kritzel-stencil 0.0.162 → 0.0.163

package/dist/components/{p-CuhOrcET.js → p-CnRfQsIC.js}

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
 import { K as KritzelMouseButton } from './p-D8W6LE-c.js';
-import { e as KritzelBaseObject, f as KritzelGeometryHelper, g as KritzelBaseTool, h as KritzelEventHelper, i as KritzelToolRegistry, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, d as KritzelKeyboardHelper } from './p-sokRZ7Vn.js';
-import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-dMCB4tJA.js';
+import { e as KritzelBaseObject, f as KritzelGeometryHelper, g as KritzelBaseTool, h as KritzelEventHelper, i as KritzelToolRegistry, S as Schema, s as schema, j as addListNodes, E as EditorView, k as EditorState, l as keymap, T as TextSelection, d as KritzelKeyboardHelper, m as baseKeymap, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath } from './p-Dz2XHHqa.js';
+import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-D1YAsWrL.js';
 import { O as ObjectHelper } from './p-B0kd2rUI.js';
-import { K as KritzelIconRegistry, d as defineCustomElement$1 } from './p-BixlbUD7.js';
-import { K as KritzelWorkspace } from './p-n789Y3S-.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
+import { K as KritzelIconRegistry, d as defineCustomElement$1 } from './p-Cv4BGNPb.js';
+import { K as KritzelWorkspace } from './p-n789Y3S-.js';
 import { d as defineCustomElement$2 } from './p-B_3OZeom.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1018,6 +1018,7 @@ class KritzelLineTool extends KritzelBaseTool {
                     });
                     updatedLine.id = currentLine.id;
                     updatedLine.workspaceId = currentLine.workspaceId;
+                    updatedLine.zIndex = currentLine.zIndex;
                     updatedLine.isCompleted = false;
                     this._core.store.state.objects.update(updatedLine);
                 }
@@ -1044,6 +1045,7 @@ class KritzelLineTool extends KritzelBaseTool {
                     });
                     updatedLine.id = currentLine.id;
                     updatedLine.workspaceId = currentLine.workspaceId;
+                    updatedLine.zIndex = currentLine.zIndex;
                     updatedLine.isCompleted = false;
                     this._core.store.state.objects.update(updatedLine);
                 }
@@ -1060,7 +1062,6 @@ class KritzelLineTool extends KritzelBaseTool {
                 const currentLine = this._core.store.currentLine;
                 if (currentLine) {
                     currentLine.isCompleted = true;
-                    currentLine.zIndex = this._core.store.currentZIndex;
                     this._core.store.state.objects.update(currentLine);
                     this._core.engine.emitObjectsChange();
                     // Switch to selection tool and select the drawn line
@@ -1074,7 +1075,6 @@ class KritzelLineTool extends KritzelBaseTool {
                 const currentLine = this._core.store.currentLine;
                 if (currentLine) {
                     currentLine.isCompleted = true;
-                    currentLine.zIndex = this._core.store.currentZIndex;
                     this._core.store.state.objects.update(currentLine);
                     this._core.engine.emitObjectsChange();
                     // Switch to selection tool and select the drawn line
@@ -18281,7 +18281,34 @@ class KritzelAnchorManager {
         const reference = endpoint === 'start'
             ? this.lineLocalToWorld(line, line.endX, line.endY)
             : this.lineLocalToWorld(line, line.startX, line.startY);
-        const edgeIntersection = KritzelGeometryHelper.getLinePolygonIntersection(reference, { x: targetObject.centerX, y: targetObject.centerY }, targetObject.rotatedPolygon);
+        // Check for path object (uses stroke edge detection)
+        const pathClipPoint = this.getPathClipPoint(targetObject, reference);
+        if (pathClipPoint) {
+            const localEdge = this.lineWorldToLocal(line, pathClipPoint.x, pathClipPoint.y);
+            const totalLength = Math.sqrt(Math.pow(line.endX - line.startX, 2) +
+                Math.pow(line.endY - line.startY, 2));
+            const distanceFromStart = Math.sqrt(Math.pow(localEdge.x - line.startX, 2) +
+                Math.pow(localEdge.y - line.startY, 2));
+            const t = totalLength > 0 ? distanceFromStart / totalLength : endpoint === 'start' ? 0 : 1;
+            return {
+                localX: localEdge.x,
+                localY: localEdge.y,
+                worldX: pathClipPoint.x,
+                worldY: pathClipPoint.y,
+                t,
+            };
+        }
+        // Check for custom clip polygon (ellipse, triangle shapes)
+        const customClipPolygon = this.getClipPolygonForObject(targetObject);
+        let edgeIntersection;
+        if (customClipPolygon) {
+            // Use custom polygon for non-rectangular shapes
+            edgeIntersection = KritzelGeometryHelper.getLinePointsArrayIntersection(reference, { x: targetObject.centerX, y: targetObject.centerY }, customClipPolygon);
+        }
+        else {
+            // Fall back to bounding box for rectangles and other objects
+            edgeIntersection = KritzelGeometryHelper.getLinePolygonIntersection(reference, { x: targetObject.centerX, y: targetObject.centerY }, targetObject.rotatedPolygon);
+        }
         if (!edgeIntersection) {
             return null;
         }
@@ -18300,7 +18327,15 @@ class KritzelAnchorManager {
         };
     }
     computeCurvedClipInfo(line, endpoint, targetObject) {
-        const polygonPoints = this.getPolygonPoints(targetObject.rotatedPolygon);
+        // Check for path object (uses stroke edge detection via sampling)
+        if (KritzelClassHelper.isInstanceOf(targetObject, 'KritzelPath')) {
+            // For curved lines to paths, sample along the curve to find stroke edge
+            const path = targetObject;
+            return this.findCurveExitPointForPath(line, endpoint, path);
+        }
+        // Check for custom clip polygon (ellipse, triangle shapes)
+        const customClipPolygon = this.getClipPolygonForObject(targetObject);
+        const polygonPoints = customClipPolygon ?? this.getPolygonPoints(targetObject.rotatedPolygon);
         const exitPoint = this.findCurveExitPoint(line, endpoint, polygonPoints);
         if (exitPoint) {
             return exitPoint;
@@ -18308,7 +18343,13 @@ class KritzelAnchorManager {
         const reference = endpoint === 'start'
             ? this.lineLocalToWorld(line, line.endX, line.endY)
             : this.lineLocalToWorld(line, line.startX, line.startY);
-        const fallbackIntersection = KritzelGeometryHelper.getLinePolygonIntersection(reference, { x: targetObject.centerX, y: targetObject.centerY }, targetObject.rotatedPolygon);
+        let fallbackIntersection;
+        if (customClipPolygon) {
+            fallbackIntersection = KritzelGeometryHelper.getLinePointsArrayIntersection(reference, { x: targetObject.centerX, y: targetObject.centerY }, customClipPolygon);
+        }
+        else {
+            fallbackIntersection = KritzelGeometryHelper.getLinePolygonIntersection(reference, { x: targetObject.centerX, y: targetObject.centerY }, targetObject.rotatedPolygon);
+        }
         if (!fallbackIntersection) {
             return null;
         }
@@ -18348,6 +18389,119 @@ class KritzelAnchorManager {
         }
         return null;
     }
+    /**
+     * Finds the exit point for a curved line going to a Path object.
+     * Uses distance-to-stroke sampling instead of polygon containment.
+     */
+    findCurveExitPointForPath(line, endpoint, path) {
+        const steps = 64;
+        const initialT = endpoint === 'start' ? 0 : 1;
+        const halfStroke = path.strokeWidth / path.scale / 2;
+        // Ensure path has computed points
+        const pathPoints = this.getPathAdjustedPoints(path);
+        if (pathPoints.length < 1) {
+            return null;
+        }
+        // Check if starting point is inside the stroke
+        const initialSample = this.evaluateLineAtT(line, initialT);
+        let prevInside = this.isPointInPathStroke(initialSample.worldX, initialSample.worldY, pathPoints, halfStroke);
+        let prevT = initialT;
+        for (let i = 1; i <= steps; i++) {
+            const t = endpoint === 'start' ? i / steps : 1 - i / steps;
+            const sample = this.evaluateLineAtT(line, t);
+            const inside = this.isPointInPathStroke(sample.worldX, sample.worldY, pathPoints, halfStroke);
+            if (prevInside && !inside) {
+                // Refine using binary search
+                const refinedT = this.refineCurveExitParameterForPath(line, pathPoints, halfStroke, prevT, t);
+                const refinedPoint = this.evaluateLineAtT(line, refinedT);
+                return {
+                    localX: refinedPoint.localX,
+                    localY: refinedPoint.localY,
+                    worldX: refinedPoint.worldX,
+                    worldY: refinedPoint.worldY,
+                    t: refinedT,
+                };
+            }
+            prevInside = inside;
+            prevT = t;
+        }
+        return null;
+    }
+    refineCurveExitParameterForPath(line, pathPoints, halfStroke, insideT, outsideT) {
+        let tInside = insideT;
+        let tOutside = outsideT;
+        for (let i = 0; i < 8; i++) {
+            const mid = (tInside + tOutside) / 2;
+            const sample = this.evaluateLineAtT(line, mid);
+            const inside = this.isPointInPathStroke(sample.worldX, sample.worldY, pathPoints, halfStroke);
+            if (inside) {
+                tInside = mid;
+            }
+            else {
+                tOutside = mid;
+            }
+        }
+        return (tInside + tOutside) / 2;
+    }
+    getPathAdjustedPoints(path) {
+        // Access the path's adjusted points through its internal computation
+        // We'll need to manually compute them since they're private
+        return this.computePathAdjustedPoints(path);
+    }
+    computePathAdjustedPoints(path) {
+        if (!path.points?.length) {
+            return [];
+        }
+        const angle = path.rotation;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const xs = path.points.map(p => p[0]);
+        const ys = path.points.map(p => p[1]);
+        const pivot = {
+            x: (Math.min(...xs) + Math.max(...xs)) / 2,
+            y: (Math.min(...ys) + Math.max(...ys)) / 2,
+        };
+        const { x: cx, y: cy } = pivot;
+        const rotatedPoints = path.points.map(([x, y]) => {
+            const dx = x - cx;
+            const dy = y - cy;
+            return [cx + dx * cos - dy * sin, cy + dx * sin + dy * cos];
+        });
+        return rotatedPoints.map(([px, py]) => [
+            Math.abs(px - path.x) / path.scale + path.translateX,
+            Math.abs(py - path.y) / path.scale + path.translateY,
+        ]);
+    }
+    isPointInPathStroke(x, y, pathPoints, halfStroke) {
+        if (pathPoints.length === 1) {
+            const p = pathPoints[0];
+            const dx = x - p[0];
+            const dy = y - p[1];
+            return Math.sqrt(dx * dx + dy * dy) <= halfStroke;
+        }
+        for (let i = 0; i < pathPoints.length - 1; i++) {
+            const p1 = pathPoints[i];
+            const p2 = pathPoints[i + 1];
+            const dist = this.pointToSegmentDistance(x, y, p1[0], p1[1], p2[0], p2[1]);
+            if (dist <= halfStroke) {
+                return true;
+            }
+        }
+        return false;
+    }
+    pointToSegmentDistance(px, py, x1, y1, x2, y2) {
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const lengthSquared = dx * dx + dy * dy;
+        if (lengthSquared === 0) {
+            return Math.sqrt((px - x1) * (px - x1) + (py - y1) * (py - y1));
+        }
+        let t = ((px - x1) * dx + (py - y1) * dy) / lengthSquared;
+        t = Math.max(0, Math.min(1, t));
+        const nearestX = x1 + t * dx;
+        const nearestY = y1 + t * dy;
+        return Math.sqrt((px - nearestX) * (px - nearestX) + (py - nearestY) * (py - nearestY));
+    }
     refineCurveExitParameter(line, polygonPoints, insideT, outsideT) {
         let tInside = insideT;
         let tOutside = outsideT;
@@ -18481,6 +18635,30 @@ class KritzelAnchorManager {
     getPolygonPoints(polygon) {
         return [polygon.topLeft, polygon.topRight, polygon.bottomRight, polygon.bottomLeft];
     }
+    /**
+     * Gets the custom clip polygon for an object if it has one.
+     * Returns null for objects that should use the default rotatedPolygon.
+     */
+    getClipPolygonForObject(object) {
+        // Check if the object is a KritzelShape with a custom clip polygon
+        if (KritzelClassHelper.isInstanceOf(object, 'KritzelShape')) {
+            const shape = object;
+            return shape.getClipPolygon();
+        }
+        // Path objects use getPathClipPoint instead of polygon
+        return null;
+    }
+    /**
+     * Gets the clip point for a Path object (stroke edge intersection).
+     * Returns null if the object is not a Path or no intersection found.
+     */
+    getPathClipPoint(object, outsidePoint) {
+        if (KritzelClassHelper.isInstanceOf(object, 'KritzelPath')) {
+            const path = object;
+            return path.getClipPoint(outsidePoint);
+        }
+        return null;
+    }
     /**
      * Converts local line coordinates to world coordinates.
      */
@@ -18532,6 +18710,571 @@ class KritzelAnchorManager {
     }
 }
 
+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 ABSOLUTE_SCALE_MAX = 1000;
 const ABSOLUTE_SCALE_MIN = 0.0001;
 
@@ -35770,6 +36513,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;
@@ -36082,7 +36833,7 @@ const DEFAULT_ENGINE_CONFIG = {
     contextMenuY: 0,
     skipContextMenu: false,
     debugInfo: {
-        showObjectInfo: false,
+        showObjectInfo: true,
         showViewportInfo: false
     },
     host: null,
@@ -36191,6 +36942,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;
@@ -36221,6 +36983,9 @@ class KritzelReviver {
                     case 'KritzelLineTool':
                         revivedObj = new KritzelLineTool(this._core);
                         break;
+                    case 'KritzelShapeTool':
+                        revivedObj = new KritzelShapeTool(this._core);
+                        break;
                     default:
                         revivedObj = obj;
                 }
@@ -36696,6 +37461,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;
@@ -36944,6 +37713,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();
@@ -36952,10 +37726,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();
@@ -37332,6 +38103,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)
@@ -37404,6 +38181,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'));
@@ -37833,9 +38618,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             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: {
@@ -37881,7 +38666,32 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     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',
@@ -37897,7 +38707,13 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     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(),
@@ -38053,7 +38869,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     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`,
@@ -38064,7 +38880,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '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"],
@@ -38147,7 +38963,7 @@ function defineCustomElement() {
     } });
 }
 
-export { isNode as A, min$2 as B, pow as C, HocuspocusProviderWebsocket as D, KritzelLine as E, KritzelLineTool as F, KritzelEraserTool as G, HocuspocusProvider as H, KritzelImageTool as I, KritzelCursorHelper as J, KritzelImage as K, KritzelSelectionTool as L, IndexedDBSyncProvider as M, KritzelAppStateMap as N, Observable$1 as O, KritzelAnchorManager as P, ABSOLUTE_SCALE_MAX as Q, ABSOLUTE_SCALE_MIN as R, defineCustomElement as S, KritzelEngine as T, writeVarUint8Array$2 as a, readVarUint8Array$2 as b, applyUpdate as c, encodeStateVector as d, encodeStateAsUpdate as e, createEncoder$1 as f, createDecoder$1 as g, create$8 as h, fromBase64 as i, toBase64 as j, createUint8ArrayFromArrayBuffer as k, offChange as l, readVarString$2 as m, floor$2 as n, onChange as o, getUnixTime$1 as p, equalityDeep$1 as q, readVarUint$2 as r, setIfUndefined$1 as s, toUint8Array$1 as t, writeVarString$2 as u, varStorage as v, writeVarUint$2 as w, map as x, ObservableV2 as y, length$3 as z };
-//# sourceMappingURL=p-CuhOrcET.js.map
+export { isNode as A, min$2 as B, pow as C, HocuspocusProviderWebsocket as D, KritzelLine as E, KritzelLineTool as F, KritzelEraserTool as G, HocuspocusProvider as H, KritzelImageTool as I, KritzelCursorHelper as J, KritzelImage as K, KritzelSelectionTool as L, IndexedDBSyncProvider as M, KritzelAppStateMap as N, Observable$1 as O, KritzelAnchorManager as P, ABSOLUTE_SCALE_MAX as Q, ABSOLUTE_SCALE_MIN as R, ShapeType as S, KritzelShapeTool as T, defineCustomElement as U, KritzelEngine as V, writeVarUint8Array$2 as a, readVarUint8Array$2 as b, applyUpdate as c, encodeStateVector as d, encodeStateAsUpdate as e, createEncoder$1 as f, createDecoder$1 as g, create$8 as h, fromBase64 as i, toBase64 as j, createUint8ArrayFromArrayBuffer as k, offChange as l, readVarString$2 as m, floor$2 as n, onChange as o, getUnixTime$1 as p, equalityDeep$1 as q, readVarUint$2 as r, setIfUndefined$1 as s, toUint8Array$1 as t, writeVarString$2 as u, varStorage as v, writeVarUint$2 as w, map as x, ObservableV2 as y, length$3 as z };
+//# sourceMappingURL=p-CnRfQsIC.js.map
 
-//# sourceMappingURL=p-CuhOrcET.js.map
+//# sourceMappingURL=p-CnRfQsIC.js.map