kritzel-stencil 0.1.0 → 0.1.2

package/dist/cjs/{default-line-tool.config-7eJND6Jb.js → default-line-tool.config-MA02HCrH.js}

@@ -14043,13 +14043,14 @@ class KritzelText extends KritzelBaseObject {
         if (element === null || this.isInViewport() === false) {
             return;
         }
+        element.style.fontFamily = this.fontFamily;
+        element.style.fontSize = `${this.fontSize}pt`;
+        element.style.color = this.fontColor;
         if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
+            requestAnimationFrame(() => this.adjustSizeOnInput());
             return;
         }
         this.elementRef = element;
-        this.elementRef.style.fontFamily = this.fontFamily;
-        this.elementRef.style.fontSize = `${this.fontSize}pt`;
-        this.elementRef.style.color = this.fontColor;
         this.elementRef.style.whiteSpace = 'pre-wrap';
         this.elementRef.style.wordWrap = 'break-word';
         this.elementRef.innerHTML = '';
@@ -14290,6 +14291,7 @@ class KritzelPath extends KritzelBaseObject {
         object.scale = options?.scale ?? 1;
         object.strokeWidth = options?.strokeWidth ?? 8;
         object.fill = options?.fill ?? '#000000';
+        object.opacity = options?.opacity ?? 1;
         object.zIndex = core.store.currentZIndex;
         object.d = object.generateSvgPath();
         object.updateDimensions();
@@ -14687,6 +14689,7 @@ class KritzelLine extends KritzelBaseObject {
     isDebugInfoVisible = true;
     isCompleted = false;
     _adjustedPoints = null;
+    _clipInfo = null;
     get d() {
         if (this.controlX !== undefined && this.controlY !== undefined) {
             return `M ${this.startX} ${this.startY} Q ${this.controlX} ${this.controlY} ${this.endX} ${this.endY}`;
@@ -14732,6 +14735,7 @@ class KritzelLine extends KritzelBaseObject {
         object.scale = options?.scale ?? 1;
         object.strokeWidth = options?.strokeWidth ?? 4;
         object.stroke = options?.stroke ?? '#000000';
+        object.opacity = options?.opacity ?? 1;
         object.startAnchor = options?.startAnchor;
         object.endAnchor = options?.endAnchor;
         object.arrows = options?.arrows;
@@ -14764,6 +14768,7 @@ class KritzelLine extends KritzelBaseObject {
         this.translateX = x;
         this.translateY = y;
         this._adjustedPoints = null;
+        this._clipInfo = null;
         this._core.store.state.objects.update(this);
         // Update anchors after the line is updated
         this._core.anchorManager.updateAnchorsForObject(this.id);
@@ -14777,6 +14782,7 @@ class KritzelLine extends KritzelBaseObject {
     rotate(value) {
         this.rotation = value;
         this._adjustedPoints = null;
+        this._clipInfo = null;
         this._core.store.state.objects.update(this);
     }
     move(startX, startY, endX, endY) {
@@ -14792,6 +14798,7 @@ class KritzelLine extends KritzelBaseObject {
             this._core.anchorManager.updateAnchorsForObject(this.endAnchor.objectId);
         }
         this._adjustedPoints = null;
+        this._clipInfo = null;
         this._core.store.state.objects.update(this);
     }
     hitTest(x, y) {
@@ -14803,12 +14810,16 @@ class KritzelLine extends KritzelBaseObject {
         }
         // For curved lines, use distance to the Bezier curve
         if (this.controlX !== undefined && this.controlY !== undefined) {
-            const distance = this.pointToBezierDistance(x, y);
+            const clip = this.getClipInfo();
+            const startT = clip.start?.t ?? 0;
+            const endT = clip.end?.t ?? 1;
+            const distance = this.pointToBezierDistance(x, y, startT, endT);
             return distance <= halfStroke;
         }
         // For straight lines, use distance to line segment
-        const p1 = this._adjustedPoints[0];
-        const p2 = this._adjustedPoints[1];
+        const clip = this.getClipInfo();
+        const p1 = clip.start ? [clip.start.x, clip.start.y] : this._adjustedPoints[0];
+        const p2 = clip.end ? [clip.end.x, clip.end.y] : this._adjustedPoints[1];
         const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p2[0], p2[1]);
         return distance <= halfStroke;
     }
@@ -14817,6 +14828,7 @@ class KritzelLine extends KritzelBaseObject {
         if (this._adjustedPoints === null) {
             this._adjustedPoints = this.computeAdjustedPoints();
         }
+        const clip = this.getClipInfo();
         const polyPoints = [
             { x: polygon.bottomLeft.x, y: polygon.bottomLeft.y },
             { x: polygon.bottomRight.x, y: polygon.bottomRight.y },
@@ -14824,7 +14836,11 @@ class KritzelLine extends KritzelBaseObject {
             { x: polygon.topLeft.x, y: polygon.topLeft.y },
         ];
         // Check if any endpoint is inside the polygon
-        for (const [px, py] of this._adjustedPoints) {
+        // Use clipped endpoints
+        const p1 = clip.start ? [clip.start.x, clip.start.y] : this._adjustedPoints[0];
+        const p2 = clip.end ? [clip.end.x, clip.end.y] : this._adjustedPoints[1];
+        const endpoints = [p1, p2];
+        for (const [px, py] of endpoints) {
             if (KritzelGeometryHelper.isPointInPolygon({ x: px, y: py }, polyPoints)) {
                 return true;
             }
@@ -14840,9 +14856,12 @@ class KritzelLine extends KritzelBaseObject {
             const p0 = this._adjustedPoints[0];
             const p2 = this._adjustedPoints[1];
             const controlAdjusted = this.computeAdjustedControlPoint();
+            const startT = clip.start?.t ?? 0;
+            const endT = clip.end?.t ?? 1;
             const samples = 20;
-            for (let i = 1; i < samples; i++) {
-                const t = i / samples;
+            for (let i = 0; i <= samples; i++) {
+                const fraction = i / samples;
+                const t = startT + fraction * (endT - startT);
                 const oneMinusT = 1 - t;
                 const bx = oneMinusT * oneMinusT * p0[0] + 2 * oneMinusT * t * controlAdjusted[0] + t * t * p2[0];
                 const by = oneMinusT * oneMinusT * p0[1] + 2 * oneMinusT * t * controlAdjusted[1] + t * t * p2[1];
@@ -14862,19 +14881,19 @@ class KritzelLine extends KritzelBaseObject {
             return false;
         }
         // For straight lines, check if line intersects any polygon edge
-        const p1 = { x: this._adjustedPoints[0][0], y: this._adjustedPoints[0][1] };
-        const p2 = { x: this._adjustedPoints[1][0], y: this._adjustedPoints[1][1] };
+        const checkP1 = { x: p1[0], y: p1[1] };
+        const checkP2 = { x: p2[0], y: p2[1] };
         for (let j = 0; j < polyPoints.length; j++) {
             const q1 = polyPoints[j];
             const q2 = polyPoints[(j + 1) % polyPoints.length];
-            if (KritzelGeometryHelper.intersectLines(p1, p2, q1, q2)) {
+            if (KritzelGeometryHelper.intersectLines(checkP1, checkP2, q1, q2)) {
                 return true;
             }
             // Check distance from polygon edges to line segment
-            const d1 = this.pointToLineSegmentDistance(q1.x, q1.y, p1.x, p1.y, p2.x, p2.y);
-            const d2 = this.pointToLineSegmentDistance(q2.x, q2.y, p1.x, p1.y, p2.x, p2.y);
-            const d3 = this.pointToLineSegmentDistance(p1.x, p1.y, q1.x, q1.y, q2.x, q2.y);
-            const d4 = this.pointToLineSegmentDistance(p2.x, p2.y, q1.x, q1.y, q2.x, q2.y);
+            const d1 = this.pointToLineSegmentDistance(q1.x, q1.y, checkP1.x, checkP1.y, checkP2.x, checkP2.y);
+            const d2 = this.pointToLineSegmentDistance(q2.x, q2.y, checkP1.x, checkP1.y, checkP2.x, checkP2.y);
+            const d3 = this.pointToLineSegmentDistance(checkP1.x, checkP1.y, q1.x, q1.y, q2.x, q2.y);
+            const d4 = this.pointToLineSegmentDistance(checkP2.x, checkP2.y, q1.x, q1.y, q2.x, q2.y);
             const minD = Math.min(d1, d2, d3, d4);
             if (minD <= halfStroke) {
                 return true;
@@ -14886,6 +14905,7 @@ class KritzelLine extends KritzelBaseObject {
         this.translateX = x;
         this.translateY = y;
         this._adjustedPoints = null;
+        this._clipInfo = null;
         this._core.store.state.objects.update(this);
     }
     /**
@@ -14944,6 +14964,7 @@ class KritzelLine extends KritzelBaseObject {
         this.translateY += correctionY / this.scale;
         // Clear cached adjusted points
         this._adjustedPoints = null;
+        this._clipInfo = null;
         this._core.store.state.objects.update(this);
     }
     updateControlPoint(newX, newY) {
@@ -14986,6 +15007,7 @@ class KritzelLine extends KritzelBaseObject {
         this.translateY += correctionY / this.scale;
         // Clear cached adjusted points
         this._adjustedPoints = null;
+        this._clipInfo = null;
         this._core.store.state.objects.update(this);
     }
     computeAdjustedPoints() {
@@ -15042,7 +15064,7 @@ class KritzelLine extends KritzelBaseObject {
      * Calculates the minimum distance from a point to a quadratic Bezier curve.
      * Uses sampling along the curve to find the closest point.
      */
-    pointToBezierDistance(x, y) {
+    pointToBezierDistance(x, y, startT = 0, endT = 1) {
         if (this._adjustedPoints === null) {
             this._adjustedPoints = this.computeAdjustedPoints();
         }
@@ -15053,7 +15075,8 @@ class KritzelLine extends KritzelBaseObject {
         let minDistance = Infinity;
         const samples = 20; // Number of samples along the curve
         for (let i = 0; i <= samples; i++) {
-            const t = i / samples;
+            const fraction = i / samples;
+            const t = startT + fraction * (endT - startT);
             const oneMinusT = 1 - t;
             // Quadratic Bezier: B(t) = (1-t)²P₀ + 2(1-t)tP₁ + t²P₂
             const bx = oneMinusT * oneMinusT * p0[0] + 2 * oneMinusT * t * controlAdjusted[0] + t * t * p2[0];
@@ -15067,6 +15090,33 @@ class KritzelLine extends KritzelBaseObject {
         }
         return minDistance;
     }
+    getClipInfo() {
+        if (this._clipInfo)
+            return this._clipInfo;
+        const startAnchor = this.startAnchor;
+        const endAnchor = this.endAnchor;
+        const result = {};
+        if (startAnchor) {
+            const target = this._core.anchorManager.findAnchorTarget(this, 'start');
+            if (target) {
+                const clip = this._core.anchorManager.computeAnchorClipInfo(this, 'start', target);
+                if (clip) {
+                    result.start = { x: clip.worldX, y: clip.worldY, t: clip.t };
+                }
+            }
+        }
+        if (endAnchor) {
+            const target = this._core.anchorManager.findAnchorTarget(this, 'end');
+            if (target) {
+                const clip = this._core.anchorManager.computeAnchorClipInfo(this, 'end', target);
+                if (clip) {
+                    result.end = { x: clip.worldX, y: clip.worldY, t: clip.t };
+                }
+            }
+        }
+        this._clipInfo = result;
+        return result;
+    }
     /**
      * Computes the adjusted control point in world coordinates, accounting for rotation and translation.
      */
@@ -15728,6 +15778,7 @@ class KritzelBrushTool extends KritzelBaseTool {
     type = 'pen';
     color = '#000000';
     size = 6;
+    opacity = 1;
     palettes = {
         pen: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#808080', '#C0C0C0', '#800000', '#008000', '#000080', '#800080'],
         highlighter: ['#ffff00', '#ffb347', '#b4ffb4'],
@@ -15752,6 +15803,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                     scale: this._core.store.state.scale,
                     fill: this.color,
                     strokeWidth: this.size,
+                    opacity: this.opacity,
                 });
                 path.isCompleted = false;
                 this._currentPathId = path.id;
@@ -15771,6 +15823,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                     scale: this._core.store.state.scale,
                     fill: this.color,
                     strokeWidth: this.size,
+                    opacity: this.opacity,
                 });
                 path.isCompleted = false;
                 this._currentPathId = path.id;
@@ -15796,6 +15849,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                         scale: this._core.store.state.scale,
                         fill: this.color,
                         strokeWidth: this.size,
+                        opacity: this.opacity,
                     });
                     updatedPath.id = currentPath.id;
                     updatedPath.workspaceId = currentPath.workspaceId;
@@ -15821,6 +15875,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                             scale: this._core.store.state.scale,
                             fill: this.color,
                             strokeWidth: this.size,
+                            opacity: this.opacity,
                         });
                         updatedPath.id = currentPath.id;
                         updatedPath.workspaceId = currentPath.workspaceId;
@@ -16203,7 +16258,33 @@ class KritzelSelectionGroup extends KritzelBaseObject {
 class KritzelLineTool extends KritzelBaseTool {
     color = '#000000';
     size = 4;
-    palettes = ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#808080', '#C0C0C0', '#800000', '#008000', '#000080', '#808000', '#800080'];
+    opacity = 1;
+    palette = [
+        '#000000',
+        '#ff5252',
+        '#ffbc00',
+        '#00c853',
+        '#0000FF',
+        '#d500f9',
+        '#fafafa',
+        '#a52714',
+        '#ee8100',
+        '#558b2f',
+        '#01579b',
+        '#8e24aa',
+        '#90a4ae',
+        '#ff4081',
+        '#ff6e40',
+        '#aeea00',
+        '#304ffe',
+        '#7c4dff',
+        '#cfd8dc',
+        '#f8bbd0',
+        '#ffccbc',
+        '#f0f4c3',
+        '#9fa8da',
+        '#d1c4e9',
+    ];
     /** Arrow head configuration for lines created with this tool */
     arrows;
     _startX = 0;
@@ -16232,6 +16313,7 @@ class KritzelLineTool extends KritzelBaseTool {
                     scale: this._core.store.state.scale,
                     stroke: this.color,
                     strokeWidth: this.size,
+                    opacity: this.opacity,
                     arrows: this.arrows,
                 });
                 line.isCompleted = false;
@@ -16256,6 +16338,7 @@ class KritzelLineTool extends KritzelBaseTool {
                     scale: this._core.store.state.scale,
                     stroke: this.color,
                     strokeWidth: this.size,
+                    opacity: this.opacity,
                     arrows: this.arrows,
                 });
                 line.isCompleted = false;
@@ -16283,6 +16366,7 @@ class KritzelLineTool extends KritzelBaseTool {
                         scale: this._core.store.state.scale,
                         stroke: this.color,
                         strokeWidth: this.size,
+                        opacity: this.opacity,
                         arrows: this.arrows,
                     });
                     updatedLine.id = currentLine.id;
@@ -16310,6 +16394,7 @@ class KritzelLineTool extends KritzelBaseTool {
                         scale: this._core.store.state.scale,
                         stroke: this.color,
                         strokeWidth: this.size,
+                        opacity: this.opacity,
                         arrows: this.arrows,
                     });
                     updatedLine.id = currentLine.id;
@@ -16542,6 +16627,7 @@ class KritzelTextTool extends KritzelBaseTool {
     fontFamily = 'Arial';
     fontSize = 16;
     fontColor = '#000000';
+    opacity = 1;
     palette = [
         '#000000',
         '#FFFFFF',
@@ -16592,6 +16678,7 @@ class KritzelTextTool extends KritzelBaseTool {
             const clientY = event.clientY - this._core.store.offsetY;
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
             text.fontColor = this.fontColor;
+            text.opacity = this.opacity;
             text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
             text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
             text.zIndex = this._core.store.currentZIndex;
@@ -16626,6 +16713,7 @@ class KritzelTextTool extends KritzelBaseTool {
             const clientY = Math.round(activePointers[0].clientY - this._core.store.offsetY);
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
             text.fontColor = this.fontColor;
+            text.opacity = this.opacity;
             text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
             text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
             text.zIndex = this._core.store.currentZIndex;
@@ -16946,6 +17034,12 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         if (!selectionGroup) {
             return;
         }
+        // Only disconnect lines if the selection group contains ONLY lines.
+        // If moving lines with other objects (e.g. shapes they might be anchored to), prevent auto-disconnect.
+        const onlyLines = selectionGroup.objects.every(obj => obj instanceof KritzelLine);
+        if (!onlyLines) {
+            return;
+        }
         // Find and disconnect anchors from all anchored lines in the selection
         for (const obj of selectionGroup.objects) {
             // Skip if already disconnected in this drag session
@@ -17978,6 +18072,404 @@ class KritzelLineHandleHandler extends KritzelBaseHandler {
     }
 }
 
+exports.ShapeType = void 0;
+(function (ShapeType) {
+    ShapeType["Rectangle"] = "rectangle";
+    ShapeType["Ellipse"] = "ellipse";
+    ShapeType["Triangle"] = "triangle";
+})(exports.ShapeType || (exports.ShapeType = {}));
+
+class KritzelShape extends KritzelBaseObject {
+    __class__ = 'KritzelShape';
+    shapeType = exports.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$1({
+        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 ?? exports.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 ?? exports.ShapeType.Rectangle;
+        object.fillColor = config?.fillColor ?? 'transparent';
+        object.strokeColor = config?.strokeColor ?? '#000000';
+        object.strokeWidth = config?.strokeWidth ?? 4;
+        object.opacity = config?.opacity ?? 1;
+        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 exports.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 exports.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 exports.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 exports.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 exports.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 exports.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`;
+        }
+    }
+}
+
+/**
+ * Default color palette shared across all tool configurations.
+ * This ensures consistency in color options throughout the application.
+ */
+const DEFAULT_COLOR_PALETTE = [
+    '#000000',
+    '#ff5252',
+    '#ffbc00',
+    '#00c853',
+    '#0000FF',
+    '#d500f9',
+    '#fafafa',
+    '#a52714',
+    '#ee8100',
+    '#558b2f',
+    '#01579b',
+    '#8e24aa',
+    '#90a4ae',
+    '#ff4081',
+    '#ff6e40',
+    '#aeea00',
+    '#304ffe',
+    '#7c4dff',
+    '#cfd8dc',
+    '#f8bbd0',
+    '#ffccbc',
+    '#f0f4c3',
+    '#9fa8da',
+    '#d1c4e9',
+];
+
 class KritzelSelectionTool extends KritzelBaseTool {
     selectionHandler;
     moveHandler;
@@ -17985,6 +18477,193 @@ class KritzelSelectionTool extends KritzelBaseTool {
     resizeHandler;
     rotationHandler;
     lineHandleHandler;
+    palette = [...DEFAULT_COLOR_PALETTE];
+    /** Returns true if there are objects in the selection group */
+    hasSelection() {
+        return !!this._core.store.selectionGroup && this._core.store.selectionGroup.objects.length > 0;
+    }
+    /** Returns the selected objects or empty array */
+    getSelectedObjects() {
+        return this._core.store.selectionGroup?.objects ?? [];
+    }
+    flattenObjects(objects) {
+        let result = [];
+        for (const obj of objects) {
+            if (obj instanceof KritzelGroup) {
+                result = result.concat(this.flattenObjects(obj.children));
+            }
+            else {
+                result.push(obj);
+            }
+        }
+        return result;
+    }
+    get color() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        if (objects.length === 0)
+            return '#000000';
+        for (const obj of objects) {
+            if (obj instanceof KritzelPath)
+                return obj.fill;
+            if (obj instanceof KritzelLine)
+                return obj.stroke;
+            if (obj instanceof KritzelText)
+                return obj.fontColor;
+            if (obj instanceof KritzelShape)
+                return obj.strokeColor;
+        }
+        return '#000000';
+    }
+    set color(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelPath)
+                this._core.updateObject(obj, { fill: value });
+            if (obj instanceof KritzelLine)
+                this._core.updateObject(obj, { stroke: value });
+            if (obj instanceof KritzelText)
+                this._core.updateObject(obj, { fontColor: value });
+            if (obj instanceof KritzelShape)
+                this._core.updateObject(obj, { strokeColor: value });
+        });
+        this._core.rerender();
+    }
+    get opacity() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        if (objects.length === 0)
+            return 1;
+        return objects[0].opacity;
+    }
+    set opacity(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => this._core.updateObject(obj, { opacity: value }));
+        this._core.rerender();
+    }
+    get size() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        if (objects.length === 0)
+            return 1;
+        for (const obj of objects) {
+            if (obj instanceof KritzelPath)
+                return obj.strokeWidth;
+            if (obj instanceof KritzelLine)
+                return obj.strokeWidth;
+            if (obj instanceof KritzelText)
+                return obj.fontSize;
+            if (obj instanceof KritzelShape)
+                return obj.strokeWidth;
+        }
+        return 1;
+    }
+    set size(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelPath)
+                this._core.updateObject(obj, { strokeWidth: value });
+            if (obj instanceof KritzelLine)
+                this._core.updateObject(obj, { strokeWidth: value });
+            if (obj instanceof KritzelText)
+                this._core.updateObject(obj, { fontSize: value });
+            if (obj instanceof KritzelShape)
+                this._core.updateObject(obj, { strokeWidth: value });
+        });
+        this._core.rerender();
+    }
+    get fillColor() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        for (const obj of objects) {
+            if (obj instanceof KritzelShape)
+                return obj.fillColor;
+        }
+        return 'transparent';
+    }
+    set fillColor(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelShape) {
+                this._core.updateObject(obj, { fillColor: value });
+                // When switching to fill mode, also update stroke color to match
+                if (value !== 'transparent') {
+                    this._core.updateObject(obj, { strokeColor: value });
+                }
+            }
+        });
+        this._core.rerender();
+    }
+    get fontFamily() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        for (const obj of objects) {
+            if (obj instanceof KritzelText)
+                return obj.fontFamily;
+            if (obj instanceof KritzelShape)
+                return obj.fontFamily;
+        }
+        return 'Arial';
+    }
+    set fontFamily(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelText)
+                this._core.updateObject(obj, { fontFamily: value });
+            if (obj instanceof KritzelShape)
+                this._core.updateObject(obj, { fontFamily: value });
+        });
+        this._core.rerender();
+    }
+    get arrows() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        for (const obj of objects) {
+            if (obj instanceof KritzelLine)
+                return obj.arrows;
+        }
+        return { start: { enabled: false }, end: { enabled: false } };
+    }
+    set arrows(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelLine)
+                this._core.updateObject(obj, { arrows: value });
+        });
+        this._core.rerender();
+    }
+    /** Returns the tool config for selected objects, or null if no selection */
+    getToolConfig() {
+        if (!this.hasSelection())
+            return null;
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        const controls = [];
+        const hasShape = objects.some(o => o instanceof KritzelShape);
+        const hasText = objects.some(o => o instanceof KritzelText);
+        const hasLine = objects.some(o => o instanceof KritzelLine);
+        const hasStroke = objects.some(o => o instanceof KritzelPath || o instanceof KritzelLine || o instanceof KritzelShape);
+        if (hasText && !hasStroke) {
+            controls.push({ type: 'font-size', propertyName: 'size' });
+            controls.push({ type: 'font-family', propertyName: 'fontFamily' });
+        }
+        else if (hasStroke && !hasText) {
+            controls.push({ type: 'stroke-size', propertyName: 'size' });
+        }
+        else {
+            if (hasStroke)
+                controls.push({ type: 'stroke-size', propertyName: 'size' });
+            if (hasText)
+                controls.push({ type: 'font-family', propertyName: 'fontFamily' });
+        }
+        if (hasLine) {
+            controls.push({ type: 'line-endings', propertyName: 'arrows' });
+        }
+        if (hasShape) {
+            controls.push({ type: 'shape-fill', propertyName: 'fillColor' });
+        }
+        return {
+            type: 'selection',
+            colorProperty: 'color',
+            sizeProperty: 'size',
+            opacityProperty: 'opacity',
+            paletteSource: 'palette',
+            controls,
+        };
+    }
     constructor(core) {
         super(core);
         this.selectionHandler = new KritzelSelectionHandler(this._core);
@@ -31438,7 +32117,6 @@ class IndexedDBSyncProvider {
     constructor(docName, doc, options) {
         const dbName = options?.name || docName;
         this.provider = new IndexeddbPersistence(dbName, doc);
-        console.info(`IndexedDB Persistence initialized: ${dbName}`);
     }
     async connect() {
         if (this.isConnected) {
@@ -35559,58 +36237,7 @@ const DEFAULT_BRUSH_CONFIG = {
     color: '#000000',
     size: 16,
     palettes: {
-        pen: [
-            '#000000',
-            '#ff5252',
-            '#ffbc00',
-            '#00c853',
-            '#0000FF',
-            '#d500f9',
-            '#fafafa',
-            '#a52714',
-            '#ee8100',
-            '#558b2f',
-            '#01579b',
-            '#8e24aa',
-            '#90a4ae',
-            '#ff4081',
-            '#ff6e40',
-            '#aeea00',
-            '#304ffe',
-            '#7c4dff',
-            '#cfd8dc',
-            '#f8bbd0',
-            '#ffccbc',
-            '#f0f4c3',
-            '#9fa8da',
-            '#d1c4e9',
-        ],
-        highlighter: [
-            '#0000006e',
-            '#ff52526e',
-            '#ffbb006e',
-            '#00c8536e',
-            '#0000FF6e',
-            '#d500f96e',
-            '#fafafa6e',
-            '#a527146e',
-            '#ee81006e',
-            '#558b2f6e',
-            '#01579b6e',
-            '#8e24aa6e',
-            '#90a4ae6e',
-            '#ff40816e',
-            '#ff6e406e',
-            '#aeea006e',
-            '#304ffe6e',
-            '#7c4dff6e',
-            '#cfd8dc6e',
-            '#f8bbd06e',
-            '#ffccbc6e',
-            '#f0f4c36e',
-            '#9fa8da6e',
-            '#d1c4e96e',
-        ],
+        pen: [...DEFAULT_COLOR_PALETTE],
     },
 };
 
@@ -35618,75 +36245,24 @@ const DEFAULT_TEXT_CONFIG = {
     color: '#000000',
     size: 8,
     fontFamily: 'Arial',
-    palette: [
-        '#000000',
-        '#ff5252',
-        '#ffbc00',
-        '#00c853',
-        '#0000FF',
-        '#d500f9',
-        '#fafafa',
-        '#a52714',
-        '#ee8100',
-        '#558b2f',
-        '#01579b',
-        '#8e24aa',
-        '#90a4ae',
-        '#ff4081',
-        '#ff6e40',
-        '#aeea00',
-        '#304ffe',
-        '#7c4dff',
-        '#cfd8dc',
-        '#f8bbd0',
-        '#ffccbc',
-        '#f0f4c3',
-        '#9fa8da',
-        '#d1c4e9',
-    ],
+    palette: [...DEFAULT_COLOR_PALETTE],
 };
 
 const DEFAULT_LINE_TOOL_CONFIG = {
     color: '#000000',
     size: 4,
-    palette: [
-        '#000000',
-        '#ff5252',
-        '#ffbc00',
-        '#00c853',
-        '#0000FF',
-        '#d500f9',
-        '#fafafa',
-        '#a52714',
-        '#ee8100',
-        '#558b2f',
-        '#01579b',
-        '#8e24aa',
-        '#90a4ae',
-        '#ff4081',
-        '#ff6e40',
-        '#aeea00',
-        '#304ffe',
-        '#7c4dff',
-        '#cfd8dc',
-        '#f8bbd0',
-        '#ffccbc',
-        '#f0f4c3',
-        '#b3e5fc',
-        '#e1bee7',
-    ],
+    palette: [...DEFAULT_COLOR_PALETTE],
     arrows: {
         end: { enabled: true, style: 'triangle' },
     },
 };
 
 exports.DEFAULT_BRUSH_CONFIG = DEFAULT_BRUSH_CONFIG;
+exports.DEFAULT_COLOR_PALETTE = DEFAULT_COLOR_PALETTE;
 exports.DEFAULT_LINE_TOOL_CONFIG = DEFAULT_LINE_TOOL_CONFIG;
 exports.DEFAULT_SYNC_CONFIG = DEFAULT_SYNC_CONFIG;
 exports.DEFAULT_TEXT_CONFIG = DEFAULT_TEXT_CONFIG;
 exports.Doc = Doc;
-exports.EditorState = EditorState;
-exports.EditorView = EditorView;
 exports.HocuspocusProvider = HocuspocusProvider;
 exports.HocuspocusProviderWebsocket = HocuspocusProviderWebsocket;
 exports.IndexedDBSyncProvider = IndexedDBSyncProvider;
@@ -35701,7 +36277,6 @@ exports.KritzelCursorHelper = KritzelCursorHelper;
 exports.KritzelDevicesHelper = KritzelDevicesHelper;
 exports.KritzelEraserTool = KritzelEraserTool;
 exports.KritzelEventHelper = KritzelEventHelper;
-exports.KritzelGeometryHelper = KritzelGeometryHelper;
 exports.KritzelGroup = KritzelGroup;
 exports.KritzelIconRegistry = KritzelIconRegistry;
 exports.KritzelImage = KritzelImage;
@@ -35713,6 +36288,7 @@ exports.KritzelPath = KritzelPath;
 exports.KritzelSelectionBox = KritzelSelectionBox;
 exports.KritzelSelectionGroup = KritzelSelectionGroup;
 exports.KritzelSelectionTool = KritzelSelectionTool;
+exports.KritzelShape = KritzelShape;
 exports.KritzelText = KritzelText;
 exports.KritzelTextTool = KritzelTextTool;
 exports.KritzelToolRegistry = KritzelToolRegistry;
@@ -35720,12 +36296,8 @@ exports.KritzelWorkspace = KritzelWorkspace;
 exports.ObjectHelper = ObjectHelper;
 exports.Observable = Observable$1;
 exports.ObservableV2 = ObservableV2;
-exports.Schema = Schema$1;
-exports.TextSelection = TextSelection;
 exports.UndoManager = UndoManager;
-exports.addListNodes = addListNodes;
 exports.applyUpdate = applyUpdate;
-exports.baseKeymap = baseKeymap;
 exports.create = create$8;
 exports.createDecoder = createDecoder$1;
 exports.createEncoder = createEncoder$1;
@@ -35737,7 +36309,6 @@ exports.floor = floor$2;
 exports.fromBase64 = fromBase64;
 exports.getUnixTime = getUnixTime$1;
 exports.isNode = isNode;
-exports.keymap = keymap;
 exports.length = length$2;
 exports.map = map;
 exports.min = min$2;
@@ -35747,7 +36318,6 @@ exports.pow = pow;
 exports.readVarString = readVarString$2;
 exports.readVarUint = readVarUint$2;
 exports.readVarUint8Array = readVarUint8Array$2;
-exports.schema = schema;
 exports.setIfUndefined = setIfUndefined$1;
 exports.toBase64 = toBase64;
 exports.toUint8Array = toUint8Array$1;