kritzel-stencil 0.1.0 → 0.1.2

package/dist/esm/{kritzel-color_22.entry.js → kritzel-color_24.entry.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-BqhmuUH2.js';
-import { Z as KritzelDevicesHelper, J as KritzelBrushTool, P as KritzelTextTool, _ as KritzelMouseButton, $ as KritzelBaseObject, a0 as Schema, a1 as schema, a2 as addListNodes, a3 as EditorView, a4 as EditorState, a5 as keymap, a6 as TextSelection, a7 as KritzelKeyboardHelper, a8 as KritzelToolRegistry, a9 as KritzelGeometryHelper, aa as baseKeymap, ab as KritzelBaseTool, ac as KritzelEventHelper, R as KritzelSelectionTool, W as DEFAULT_BRUSH_CONFIG, Y as DEFAULT_LINE_TOOL_CONFIG, L as KritzelLineTool, M as KritzelEraserTool, X as DEFAULT_TEXT_CONFIG, N as KritzelImageTool, U as KritzelWorkspace, ad as KritzelIconRegistry, ae as KritzelBaseHandler, af as KritzelSelectionBox, ag as KritzelSelectionGroup, I as KritzelGroup, F as KritzelImage, K as KritzelText, G as KritzelLine, E as KritzelPath, ah as Doc, ai as DEFAULT_SYNC_CONFIG, aj as UndoManager, Q as KritzelCursorHelper, T as KritzelAppStateMap, V as KritzelAnchorManager, ak as ObjectHelper, al as KritzelClassHelper } from './default-line-tool.config-CD5sTKH-.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-OLdaFN6W.js';
+import { Z as KritzelBaseTool, _ as ShapeType, $ as KritzelShape, a0 as KritzelToolRegistry, a1 as KritzelEventHelper, R as KritzelSelectionTool, J as KritzelBrushTool, L as KritzelLineTool, P as KritzelTextTool, a2 as KritzelDevicesHelper, a3 as KritzelMouseButton, a4 as DEFAULT_COLOR_PALETTE, W as DEFAULT_BRUSH_CONFIG, Y as DEFAULT_LINE_TOOL_CONFIG, M as KritzelEraserTool, X as DEFAULT_TEXT_CONFIG, N as KritzelImageTool, U as KritzelWorkspace, a5 as KritzelIconRegistry, a6 as KritzelKeyboardHelper, a7 as KritzelBaseHandler, a8 as KritzelSelectionBox, a9 as KritzelSelectionGroup, aa as KritzelBaseObject, I as KritzelGroup, F as KritzelImage, K as KritzelText, G as KritzelLine, E as KritzelPath, ab as Doc, ac as DEFAULT_SYNC_CONFIG, ad as UndoManager, Q as KritzelCursorHelper, T as KritzelAppStateMap, V as KritzelAnchorManager, ae as ObjectHelper, af as KritzelClassHelper } from './default-line-tool.config-DLpNl6R9.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -37,13 +37,13 @@ const KritzelColor = class {
     }
     render() {
         const isColorVeryLight = this.isLightColor(this.value);
-        return (h(Host, { key: 'edf5d94f476d72d0be74886b362fd37db789c517' }, h("div", { key: 'd8af2373616b9bc6f4ddea0822d737f073563bf9', class: "checkerboard-bg", style: {
+        return (h(Host, { key: '5d9fa3dd0fa30dd8e6589459efafd63a71c317bb' }, h("div", { key: 'fe35227ea4636234de62b7eec42f11a58ca788bb', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: '6b587f7926884e7c38fe36eaef41b0c8cd213c6d', class: {
+            } }, h("div", { key: '37f99d30a6f238e9e1f9976d2419364d2f83bbd8', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -60,7 +60,39 @@ const KritzelColor = class {
 };
 KritzelColor.style = kritzelColorCss();
 
-const kritzelColorPaletteCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}`;
+class KritzelColorHelper {
+    /**
+     * Applies opacity to a hex color and returns an rgba string.
+     * @param hexColor - The hex color string (e.g., '#ff0000' or '#f00')
+     * @param opacity - The opacity value between 0 and 1
+     * @returns The color as an rgba string, or the original hex if opacity is 1
+     */
+    static applyOpacity(hexColor, opacity) {
+        if (opacity >= 1)
+            return hexColor;
+        const sanitizedHex = hexColor.startsWith('#') ? hexColor.slice(1) : hexColor;
+        let r, g, b;
+        if (sanitizedHex.length === 3) {
+            r = parseInt(sanitizedHex[0] + sanitizedHex[0], 16);
+            g = parseInt(sanitizedHex[1] + sanitizedHex[1], 16);
+            b = parseInt(sanitizedHex[2] + sanitizedHex[2], 16);
+        }
+        else if (sanitizedHex.length === 6) {
+            r = parseInt(sanitizedHex.substring(0, 2), 16);
+            g = parseInt(sanitizedHex.substring(2, 4), 16);
+            b = parseInt(sanitizedHex.substring(4, 6), 16);
+        }
+        else {
+            return hexColor;
+        }
+        if (isNaN(r) || isNaN(g) || isNaN(b)) {
+            return hexColor;
+        }
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+}
+
+const kritzelColorPaletteCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:0;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}`;
 
 const KritzelColorPalette = class {
     constructor(hostRef) {
@@ -71,6 +103,7 @@ const KritzelColorPalette = class {
     selectedColor = null;
     isExpanded = false;
     isOpaque = false;
+    opacity = 1;
     colorChange;
     handleColorClick(color) {
         this.selectedColor = color;
@@ -92,7 +125,7 @@ const KritzelColorPalette = class {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: '83e3aa70f68e1bab337a031c2d00ac152f924fe1' }, h("div", { key: '86a6198500ea5bef3ed399fc8f7ec0275899eb79', class: {
+        return (h(Host, { key: '5d7861ab8510af002d4f0f4171a38bf4624d70cb' }, h("div", { key: 'd8b65ecf9aa36e0a158170e12aec27d112f5e0de', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -100,7 +133,7 @@ const KritzelColorPalette = class {
             } }, displayedColors.map(color => (h("div", { tabIndex: 0, class: {
                 'color-container': true,
                 'selected': this.selectedColor === color,
-            }, onClick: () => this.handleColorClick(color), onKeyDown: event => this.handleKeyDown(event, color) }, h("kritzel-color", { value: color })))))));
+            }, onClick: () => this.handleColorClick(color), onKeyDown: event => this.handleKeyDown(event, color) }, h("kritzel-color", { value: KritzelColorHelper.applyOpacity(color, this.opacity) })))))));
     }
 };
 KritzelColorPalette.style = kritzelColorPaletteCss();
@@ -204,198 +237,450 @@ const KritzelContextMenu = class {
 };
 KritzelContextMenu.style = kritzelContextMenuCss();
 
-const kritzelControlBrushConfigCss = () => `:host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:var(--kritzel-pointer-cursor, pointer);font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}`;
-
-const KritzelControlBrushConfig = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.toolChange = createEvent(this, "toolChange");
-    }
-    tool;
-    handleToolChange(newTool) {
-        this.palette = newTool.palettes[newTool.type];
-    }
-    isExpanded = false;
-    toolChange;
-    palette = [];
-    componentWillLoad() {
-        this.palette = this.tool.palettes[this.tool.type];
-    }
-    handleToggleExpand() {
-        this.isExpanded = !this.isExpanded;
-    }
-    handleTypeChange(event) {
-        this.palette = this.tool.palettes[event.detail];
-        this.tool.type = event.detail;
-        this.tool.color = this.palette[0];
-        this.toolChange.emit(this.tool);
-    }
-    handleColorChange(event) {
-        this.tool.color = event.detail;
-        this.toolChange.emit(this.tool);
-    }
-    handleSizeChange(event) {
-        this.tool.size = event.detail;
-        this.toolChange.emit(this.tool);
-    }
-    render() {
-        return (h(Host, { key: 'ce2ac77db22f52239a45b62f690d54009f2c6954' }, h("div", { key: '5f6c50853e876c3612bb5c270bccc468c2c9a726', style: {
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: this.isExpanded ? 'flex-start' : 'center',
-                justifyContent: 'flex-start',
-                width: '100%',
-                gap: '8px',
-            } }, h("kritzel-color-palette", { key: 'bfa24bb8683027c37f200ad65e4e6787d7224c56', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("button", { key: '8e2c55c6d16ca3911c5f068c354bdce5a4f7e844', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '33610ada109fe5d1d9cb2da4c70a60d672e3d6cb', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-stroke-size", { key: '9b095dd9436e46dd88a3485ceb2dafa5d06d1bc4', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
-    }
-    static get watchers() { return {
-        "tool": [{
-                "handleToolChange": 0
-            }]
-    }; }
-};
-KritzelControlBrushConfig.style = kritzelControlBrushConfigCss();
-
-const kritzelControlTextConfigCss = () => `:host{display:block;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:var(--kritzel-pointer-cursor, pointer);font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}`;
-
-const KritzelControlTextConfig = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.toolChange = createEvent(this, "toolChange");
-    }
-    tool;
-    isExpanded = false;
-    toolChange;
-    handleToggleExpand() {
-        this.isExpanded = !this.isExpanded;
-    }
-    handleFamilyChange(event) {
-        this.tool.fontFamily = event.detail;
-        this.toolChange.emit(this.tool);
-    }
-    handleColorChange(event) {
-        this.tool.fontColor = event.detail;
-        this.toolChange.emit(this.tool);
-    }
-    handleSizeChange(event) {
-        this.tool.fontSize = event.detail;
-        this.toolChange.emit(this.tool);
-    }
-    render() {
-        return (h(Host, { key: '4a0027969b183fef77c374eb114d9d30104e5ad7' }, h("div", { key: '9f49eb3a95080447b938fdfeb256fafbe5ff9ddc', style: {
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                width: '100%',
-                gap: '8px',
-            } }, h("kritzel-font-family", { key: '4e75cda048f8b8c04e6cb5568e7cdcde91e28112', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '05c6ce98bd700e9e9d2e676cbcf191b943a2980e', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', tabindex: "0" }, h("kritzel-icon", { key: 'ce30d48dd5ce5eefeee7702dff81ca8f96e0872d', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'a3d313bf01dafc15c8cf39a129d8c0c35741a3ca', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '954db891b80fb244083de24dc87255b1239ff913', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
-    }
-};
-KritzelControlTextConfig.style = kritzelControlTextConfigCss();
-
-const kritzelControlsCss = () => `:host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}`;
-
-const KritzelControls = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.isControlsReady = createEvent(this, "isControlsReady");
-    }
-    get host() { return getElement(this); }
-    controls = [];
-    activeControl = null;
-    isUtilityPanelVisible = true;
-    undoState = null;
-    isControlsReady;
-    firstConfig = null;
-    isTooltipVisible = false;
-    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
-    selectedSubOptions = new Map();
-    openSubMenuControl = null;
-    handleDocumentClick(event) {
-        const element = event.target;
-        if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
-            return;
-        }
-        this.isTooltipVisible = false;
+class KritzelShapeTool extends KritzelBaseTool {
+    shapeType = ShapeType.Rectangle;
+    fillColor = 'transparent';
+    strokeColor = '#000000';
+    strokeWidth = 4;
+    opacity = 1;
+    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);
     }
-    handleKeyDown(event) {
-        if (event.key === 'Escape') {
+    handlePointerDown(event) {
+        if (event.cancelable) {
             event.preventDefault();
-            this.closeTooltip();
-            this.openSubMenuControl = null;
-            this.kritzelEngine?.enable();
         }
-    }
-    async handleActiveToolChange(event) {
-        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
-    }
-    async closeTooltip() {
-        this.isTooltipVisible = false;
-    }
-    kritzelEngine = null;
-    tooltipRef = null;
-    get activeToolAsTextTool() {
-        return this.activeControl?.tool;
-    }
-    get activeToolAsBrushTool() {
-        return this.activeControl?.tool;
-    }
-    async componentWillLoad() {
-        await this.initializeEngine();
-        await this.initializeTools();
-        this.isControlsReady.emit();
-    }
-    async initializeEngine() {
-        await customElements.whenDefined('kritzel-engine');
-        this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
-        if (!this.kritzelEngine) {
-            throw new Error('kritzel-engine not found in parent element.');
+        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);
         }
-    }
-    async initializeTools() {
-        for (const c of this.controls) {
-            if (c.type === 'tool' && c.tool) {
-                c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);
+        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 (c.type === 'tool' && c.isDefault && c.tool) {
-                await this.kritzelEngine.changeActiveTool(c.tool);
-                this.activeControl = c;
+            if (activeShape !== null && object instanceof KritzelShape) {
+                activeShape.save();
+                object.edit(event);
+                return;
             }
-            if (c.type === 'config') {
-                if (this.firstConfig === null) {
-                    this.firstConfig = c;
-                }
-                else {
-                    console.warn('Only one config control is allowed. The first one will be used.');
-                }
+            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);
         }
     }
-    async handleControlClick(control) {
-        this.activeControl = control;
-        if (this.activeControl.type === 'tool') {
-            await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
+    handlePointerMove(event) {
+        if (event.cancelable) {
+            event.preventDefault();
         }
-    }
-    handleConfigClick(event) {
-        event.stopPropagation();
-        this.isTooltipVisible = !this.isTooltipVisible;
-        if (this.isTooltipVisible) {
-            this.kritzelEngine?.disable();
+        if (!this.isDrawing || !this.currentShape) {
+            return;
         }
-        else {
-            this.kritzelEngine?.enable();
+        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);
+            }
         }
-        setTimeout(() => {
-            this.tooltipRef?.focusContent();
-        }, 100);
-    }
-    async handleToolChange(event) {
-        this.activeControl = { ...this.activeControl, tool: event.detail };
-        await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
     }
-    handleTooltipClosed() {
+    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,
+            opacity: this.opacity,
+            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();
+    }
+}
+
+class KritzelToolConfigHelper {
+    static getToolConfig(tool) {
+        if (tool instanceof KritzelSelectionTool) {
+            return tool.getToolConfig();
+        }
+        if (tool instanceof KritzelBrushTool) {
+            return {
+                type: 'brush',
+                colorProperty: 'color',
+                sizeProperty: 'size',
+                opacityProperty: 'opacity',
+                paletteSource: 'palettes',
+                controls: [
+                    { type: 'stroke-size', propertyName: 'size' },
+                ],
+            };
+        }
+        if (tool instanceof KritzelLineTool) {
+            return {
+                type: 'line',
+                colorProperty: 'color',
+                sizeProperty: 'size',
+                opacityProperty: 'opacity',
+                paletteSource: 'palette',
+                controls: [
+                    { type: 'stroke-size', propertyName: 'size' },
+                    { type: 'line-endings', propertyName: 'arrows', additionalProps: {} },
+                ],
+            };
+        }
+        if (tool instanceof KritzelShapeTool) {
+            return {
+                type: 'shape',
+                colorProperty: 'strokeColor',
+                sizeProperty: 'strokeWidth',
+                opacityProperty: 'opacity',
+                paletteSource: 'palette',
+                controls: [
+                    { type: 'stroke-size', propertyName: 'strokeWidth' },
+                    { type: 'shape-fill', propertyName: 'fillColor', additionalProps: {} },
+                ],
+            };
+        }
+        if (tool instanceof KritzelTextTool) {
+            return {
+                type: 'text',
+                colorProperty: 'fontColor',
+                sizeProperty: 'fontSize',
+                opacityProperty: 'opacity',
+                paletteSource: 'palette',
+                controls: [
+                    { type: 'font-size', propertyName: 'fontSize', additionalProps: {} },
+                    { type: 'font-family', propertyName: 'fontFamily' },
+                ],
+            };
+        }
+        // Tool is not configurable (e.g., selection, eraser, image)
+        return null;
+    }
+}
+
+const kritzelControlsCss = () => `:host{display:flex;flex-direction:column;user-select:none;max-width:calc(100vw - 28px)}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:24px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-16px;width:16px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}`;
+
+const KritzelControls = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isControlsReady = createEvent(this, "isControlsReady");
+    }
+    get host() { return getElement(this); }
+    controls = [];
+    activeControl = null;
+    isUtilityPanelVisible = true;
+    undoState = null;
+    isControlsReady;
+    firstConfig = null;
+    isTooltipVisible = false;
+    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    selectedSubOptions = new Map();
+    openSubMenuControl = null;
+    canScrollLeft = false;
+    canScrollRight = false;
+    displayValues = null;
+    handleDocumentClick(event) {
+        if (!this.kritzelEngine) {
+            return;
+        }
+        // Use composedPath to check if click is inside tooltip (works across shadow DOM boundaries)
+        const path = event.composedPath();
+        const isInsideTooltip = path.some(el => {
+            const element = el;
+            if (element.tagName) {
+                return element.tagName.toLowerCase() === 'kritzel-tooltip' || element.classList?.contains('kritzel-tooltip');
+            }
+            return false;
+        });
+        if (isInsideTooltip) {
+            return;
+        }
+        this.isTooltipVisible = false;
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeTooltip();
+            this.openSubMenuControl = null;
+            this.kritzelEngine?.enable();
+        }
+    }
+    async handleActiveToolChange(event) {
+        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
+        if (this.activeControl?.tool) {
+            this.updateDisplayValues(this.activeControl.tool);
+        }
+    }
+    handleSelectionChange() {
+        if (this.activeControl?.tool instanceof KritzelSelectionTool) {
+            this.updateDisplayValues(this.activeControl.tool);
+        }
+    }
+    async closeTooltip() {
+        this.isTooltipVisible = false;
+    }
+    kritzelEngine = null;
+    tooltipRef = null;
+    toolsScrollRef = null;
+    get activeToolAsTextTool() {
+        return this.activeControl?.tool;
+    }
+    get activeToolAsBrushTool() {
+        return this.activeControl?.tool;
+    }
+    get activeToolAsLineTool() {
+        return this.activeControl?.tool;
+    }
+    get activeToolAsShapeTool() {
+        return this.activeControl?.tool;
+    }
+    handleDisplayValuesChange = (event) => {
+        const newVal = event.detail;
+        if (this.displayValues &&
+            this.displayValues.color === newVal.color &&
+            this.displayValues.size === newVal.size &&
+            this.displayValues.fontFamily === newVal.fontFamily) {
+            return;
+        }
+        this.displayValues = newVal;
+    };
+    updateDisplayValues(tool) {
+        const config = KritzelToolConfigHelper.getToolConfig(tool);
+        if (!config) {
+            this.displayValues = null;
+            return;
+        }
+        const color = tool[config.colorProperty];
+        const opacity = tool[config.opacityProperty] ?? 1;
+        const size = tool[config.sizeProperty];
+        const displayValues = {
+            color: KritzelColorHelper.applyOpacity(color, opacity),
+            size,
+        };
+        if (tool instanceof KritzelTextTool) {
+            displayValues.fontFamily = tool.fontFamily;
+        }
+        // Check for equality implementation to prevent unnecessary re-renders
+        if (this.displayValues &&
+            this.displayValues.color === displayValues.color &&
+            this.displayValues.size === displayValues.size &&
+            this.displayValues.fontFamily === displayValues.fontFamily) {
+            return;
+        }
+        this.displayValues = displayValues;
+    }
+    async componentWillLoad() {
+        await this.initializeEngine();
+        await this.initializeTools();
+        this.isControlsReady.emit();
+    }
+    componentDidLoad() {
+        this.updateScrollIndicators();
+    }
+    updateScrollIndicators() {
+        if (!this.toolsScrollRef)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = this.toolsScrollRef;
+        const threshold = 2; // Small threshold to account for rounding
+        this.canScrollLeft = scrollLeft > threshold;
+        this.canScrollRight = scrollLeft + clientWidth < scrollWidth - threshold;
+    }
+    handleToolsScroll = () => {
+        this.updateScrollIndicators();
+    };
+    async initializeEngine() {
+        await customElements.whenDefined('kritzel-engine');
+        this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
+        if (!this.kritzelEngine) {
+            throw new Error('kritzel-engine not found in parent element.');
+        }
+    }
+    async initializeTools() {
+        for (const c of this.controls) {
+            if (c.type === 'tool' && c.tool) {
+                c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);
+            }
+            if (c.type === 'tool' && c.isDefault && c.tool) {
+                await this.kritzelEngine.changeActiveTool(c.tool);
+                this.activeControl = c;
+                this.updateDisplayValues(c.tool);
+            }
+            if (c.type === 'config') {
+                if (this.firstConfig === null) {
+                    this.firstConfig = c;
+                }
+                else {
+                    console.warn('Only one config control is allowed. The first one will be used.');
+                }
+            }
+        }
+    }
+    async handleControlClick(control) {
+        this.activeControl = control;
+        if (this.activeControl.type === 'tool') {
+            this.updateDisplayValues(this.activeControl.tool);
+            await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
+        }
+    }
+    handleConfigClick(event) {
+        event.stopPropagation();
+        this.isTooltipVisible = !this.isTooltipVisible;
+        if (this.isTooltipVisible) {
+            this.kritzelEngine?.disable();
+        }
+        else {
+            this.kritzelEngine?.enable();
+        }
+        setTimeout(() => {
+            this.tooltipRef?.focusContent();
+        }, 100);
+    }
+    async handleToolChange(event) {
+        this.activeControl = { ...this.activeControl, tool: event.detail };
+        await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
+    }
+    handleTooltipClosed() {
         this.isTooltipVisible = false;
         this.kritzelEngine?.enable();
     }
@@ -439,56 +724,62 @@ const KritzelControls = class {
     }
     render() {
         const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool ||
-            this.activeControl?.tool instanceof KritzelTextTool;
-        return (h(Host, { key: 'ed5816cbeb8fe8b91e14b23bf61df4753fb0da0f', class: {
+            this.activeControl?.tool instanceof KritzelTextTool ||
+            this.activeControl?.tool instanceof KritzelLineTool ||
+            this.activeControl?.tool instanceof KritzelShapeTool ||
+            (this.activeControl?.tool instanceof KritzelSelectionTool && this.activeControl.tool.hasSelection());
+        // Separate tool controls from config control
+        const toolControls = this.controls.filter(c => c.type === 'tool');
+        const configControl = this.controls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
+        return (h(Host, { key: 'db2a043a2a32d10d7f27c01123da63115781941c', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '7218fff9c89f525baf655eea46aec1698a28babd', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '09104351c9f178b8d0dbc0636cf9cc230b2bca53', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '1dc0fa7b02a953474aae9c7822c651d5006e89e5', class: "kritzel-controls" }, this.controls.map(control => {
-            if (control.type === 'tool') {
-                // Check if this control has sub-options (split-button)
-                if (control.subOptions?.length) {
-                    const selectedSubOption = this.getSelectedSubOption(control);
-                    const isActive = this.activeControl?.name === control.name;
-                    const isSubMenuOpen = this.openSubMenuControl?.name === control.name;
-                    return (h("div", { class: {
-                            'kritzel-control-split': true,
-                            'selected': isActive,
-                        }, key: control.name, ref: el => {
-                            if (el)
-                                control._anchorRef = el;
-                        } }, h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
-                            'kritzel-control-dropdown': true,
-                            'visible': isActive,
-                        }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, onTooltipClosed: () => { this.openSubMenuControl = null; } }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
-                            'kritzel-submenu-item': true,
-                            'active': option.id === selectedSubOption?.id,
-                        }, key: option.id, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
-                }
-                // Regular tool control (no sub-options)
-                return (h("button", { class: {
-                        'kritzel-control': true,
-                        'selected': this.activeControl?.name === control?.name,
-                    }, key: control.name, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
-            }
-            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '22f95249dddcf05a75425f96ab5381fe8a4824d4', class: "kritzel-controls" }, h("div", { key: 'fcca99e2a56f401b28205b8806497c46b7f9a94b', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '145802334aa83b0190a70dd2a3aca4389cb8b88c', class: "kritzel-tools-scroll", ref: el => {
+                this.toolsScrollRef = el;
+                // Update indicators when ref is set
+                if (el)
+                    this.updateScrollIndicators();
+            }, onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            // Check if this control has sub-options (split-button)
+            if (control.subOptions?.length) {
+                const selectedSubOption = this.getSelectedSubOption(control);
+                const isActive = this.activeControl?.name === control.name;
+                const isSubMenuOpen = this.openSubMenuControl?.name === control.name;
                 return (h("div", { class: {
-                        'kritzel-config-container': true,
-                        'visible': hasConfigUI,
-                    }, key: control.name }, h("kritzel-tooltip", { ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => this.handleToolChange?.(event) })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => this.handleToolChange?.(event) })))), h("div", { tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
-                        if (event.key === 'Enter') {
-                            this.handleConfigClick?.(event);
-                        }
-                    }, style: {
-                        cursor: 'pointer',
-                    } }, this.activeControl.tool instanceof KritzelBrushTool && (h("div", { class: "color-container" }, h("kritzel-color", { value: this.activeToolAsBrushTool?.color, size: this.activeToolAsBrushTool?.size, style: {
-                        borderRadius: '50%',
-                        border: 'none',
-                    } }))), this.activeControl.tool instanceof KritzelTextTool && (h("div", { class: "font-container" }, h("kritzel-font", { fontFamily: this.activeToolAsTextTool?.fontFamily, size: this.activeToolAsTextTool?.fontSize, color: this.activeToolAsTextTool?.fontColor }))))));
+                        'kritzel-control-split': true,
+                        'selected': isActive,
+                    }, key: control.name, ref: el => {
+                        if (el)
+                            control._anchorRef = el;
+                    } }, h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
+                        'kritzel-control-dropdown': true,
+                        'visible': isActive,
+                    }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, onTooltipClosed: () => { this.openSubMenuControl = null; } }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
+                        'kritzel-submenu-item': true,
+                        'active': option.id === selectedSubOption?.id,
+                    }, key: option.id, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
             }
-        }))));
+            // Regular tool control (no sub-options)
+            return (h("button", { class: {
+                    'kritzel-control': true,
+                    'selected': this.activeControl?.name === control?.name,
+                }, key: control.name, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
+        })), h("div", { key: '43e7811998855f57097b743998363fd6866bfb29', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight } }), configControl && this.activeControl && (h("div", { class: {
+                'kritzel-config-container': true,
+                'visible': hasConfigUI,
+            }, key: configControl.name }, h("div", { key: 'c1ff98f16c41d45666915b96931f23e0cf12ed6f', class: "config-gradient-left" }), h("kritzel-tooltip", { key: 'eac68125daa371d751b65ac561e33848cad3bd69', ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("kritzel-tool-config", { key: '83ed025386d9d1b3ec8b52e99930645c4c35b20a', tool: this.activeControl.tool, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: 'cf18abb832c10826685fb41794a42b8b6a6a7486', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    this.handleConfigClick?.(event);
+                }
+            }, style: {
+                cursor: 'pointer',
+            } }, this.activeControl.tool instanceof KritzelTextTool && this.displayValues ? (h("div", { class: "font-container" }, h("kritzel-font", { fontFamily: this.displayValues.fontFamily, size: this.displayValues.size, color: this.displayValues.color }))) : this.displayValues && (h("div", { class: "color-container" }, h("kritzel-color", { value: this.displayValues.color, size: this.displayValues.size, style: {
+                borderRadius: '50%',
+                border: 'none',
+            } })))))))));
     }
     static get assetsDirs() { return ["../assets"]; }
 };
@@ -562,7 +853,7 @@ const KritzelCursorTrail = class {
         }
     }
     render() {
-        return (h(Host, { key: '556238ffd7eeda2d400039333a37853ebfcca1b6' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'a3f451cc9f142f018d0025eb7a68c1bdff5fc0d9', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (h(Host, { key: '65563f09091c0014046b65d424b4cecf89d4a407' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '9634426566a9cd69cbc63f419726af16826e45f9', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -774,629 +1065,64 @@ const KritzelDropdown = class {
                 this.hasSuffixContent = newHasContent;
             }
         }
-        else if (this.hasSuffixContent !== false) {
-            this.hasSuffixContent = false;
-        }
-    };
-    evaluatePrefixContent = () => {
-        if (this.prefixSlotElement) {
-            const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;
-            if (this.hasPrefixContent !== newHasContent) {
-                this.hasPrefixContent = newHasContent;
-            }
-        }
-        else if (this.hasPrefixContent !== false) {
-            this.hasPrefixContent = false;
-        }
-    };
-    getSelectedLabel() {
-        const selectedOption = this.options.find(opt => opt.value === this.internalValue);
-        return selectedOption?.label ?? '';
-    }
-    getSelectedStyle() {
-        const selectedOption = this.options.find(opt => opt.value === this.internalValue);
-        return selectedOption?.style;
-    }
-    render() {
-        const triggerClasses = {
-            'dropdown-trigger': true,
-            'has-suffix-border': this.hasSuffixContent,
-            'has-prefix-border': this.hasPrefixContent,
-            'is-open': this.isOpen,
-            'open-up': this.openDirection === 'up',
-        };
-        const menuClasses = {
-            'dropdown-menu': true,
-            'is-open': this.isOpen,
-            'open-up': this.openDirection === 'up',
-            'open-down': this.openDirection === 'down',
-        };
-        return (h(Host, { key: '29d076eb2ef76527c0930ab82ace0d05c896ab6c' }, h("div", { key: '1afac5cc0b7f408849670b8cb62fe0bd0f3b27f1', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '3cfcf787c3b3eedbd6bf30c7506a0a4912429672', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: 'b88120ed3e44871220e6ba61e8bef457651a2086', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '79082189066f3d0b4f5797420ec222847792fe52', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: 'a490bb6689ec1820144fe82f6833bee82e6ead0e', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '8bd7768f6fdd3c507bbca54d7d135adabe04901f', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: 'e1b854d2c93e3067181108f8d782e1393ddb615c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '3622cbf8964f4e50aa55be5209240dfd252f1d84', points: "6 9 12 15 18 9" }))))), h("slot", { key: 'b91317736904cbeee0f87058b822bd77c6b163ca', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: '0ca8690345974e9b7ad184f4c7ab7cf5367b183c', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
-            const isSelected = option.value === this.internalValue;
-            const isFocused = index === this.focusedIndex;
-            const optionClasses = {
-                'dropdown-option': true,
-                'is-selected': isSelected,
-                'is-focused': isFocused,
-            };
-            return (h("li", { class: optionClasses, role: "option", "aria-selected": isSelected ? 'true' : 'false', style: option.style, onClick: () => this.selectOption(option), onMouseEnter: () => this.handleOptionMouseEnter(index) }, option.label, isSelected && (h("span", { class: "dropdown-option-check", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" }))))));
-        })))));
-    }
-    static get watchers() { return {
-        "options": [{
-                "optionsChanged": 0
-            }],
-        "value": [{
-                "externalValueChanged": 0
-            }]
-    }; }
-};
-KritzelDropdown.style = kritzelDropdownCss();
-
-var ShapeType;
-(function (ShapeType) {
-    ShapeType["Rectangle"] = "rectangle";
-    ShapeType["Ellipse"] = "ellipse";
-    ShapeType["Triangle"] = "triangle";
-})(ShapeType || (ShapeType = {}));
-
-class KritzelShape extends KritzelBaseObject {
-    __class__ = 'KritzelShape';
-    shapeType = ShapeType.Rectangle;
-    fillColor = 'transparent';
-    strokeColor = '#000000';
-    strokeWidth = 4;
-    fontFamily = 'Arial';
-    fontSize = 16;
-    fontColor = '#000000';
-    /** Screen-space x coordinate of the shape's top-left corner (like Path.x) */
-    x = 0;
-    /** Screen-space y coordinate of the shape's top-left corner (like Path.y) */
-    y = 0;
-    scale = 1;
-    scaleFactor = 1;
-    isDebugInfoVisible = true;
-    isEditable = true;
-    isEditing = false;
-    editor = null;
-    content = null;
-    _schema = new Schema({
-        nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
-        marks: schema.spec.marks,
-    });
-    uneditedObject = null;
-    /**
-     * Returns the viewBox for the shape's SVG, using screen-space coordinates.
-     * This follows the same pattern as KritzelPath.viewBox.
-     */
-    get viewBox() {
-        return `${this.x} ${this.y} ${this.width} ${this.height}`;
-    }
-    constructor(config) {
-        super();
-        if (config) {
-            this.x = config.x ?? 0;
-            this.y = config.y ?? 0;
-            this.translateX = config.translateX ?? 0;
-            this.translateY = config.translateY ?? 0;
-            this.width = config.width ?? 100;
-            this.height = config.height ?? 100;
-            this.shapeType = config.shapeType ?? ShapeType.Rectangle;
-            this.fillColor = config.fillColor ?? 'transparent';
-            this.strokeColor = config.strokeColor ?? '#000000';
-            this.strokeWidth = config.strokeWidth ?? 4;
-            this.fontSize = config.fontSize ?? 16;
-            this.fontFamily = config.fontFamily ?? 'Arial';
-            this.fontColor = config.fontColor ?? '#000000';
-            this.scale = config.scale ?? 1;
-            this.scaleFactor = config.scaleX ?? 1;
-        }
-    }
-    /**
-     * Creates a new KritzelShape with screen-space coordinates.
-     * Following the same pattern as KritzelPath.create():
-     * - x, y are screen-space coordinates of the shape's top-left corner
-     * - translateX, translateY should be set to -viewportTranslateX, -viewportTranslateY
-     * - width, height are in screen-space
-     * - scale is the viewport scale at creation time
-     */
-    static create(core, config) {
-        const object = new KritzelShape();
-        object._core = core;
-        object.id = object.generateId();
-        object.workspaceId = core.store.state.activeWorkspace.id;
-        object.x = config?.x ?? 0;
-        object.y = config?.y ?? 0;
-        object.translateX = config?.translateX ?? 0;
-        object.translateY = config?.translateY ?? 0;
-        object.width = config?.width ?? 100;
-        object.height = config?.height ?? 100;
-        object.shapeType = config?.shapeType ?? ShapeType.Rectangle;
-        object.fillColor = config?.fillColor ?? 'transparent';
-        object.strokeColor = config?.strokeColor ?? '#000000';
-        object.strokeWidth = config?.strokeWidth ?? 4;
-        object.fontSize = config?.fontSize ?? 16;
-        object.fontFamily = config?.fontFamily ?? 'Arial';
-        object.fontColor = config?.fontColor ?? '#000000';
-        object.backgroundColor = 'transparent';
-        object.scaleFactor = 1;
-        object.scale = core.store.state.scale;
-        object.zIndex = core.store.currentZIndex;
-        object.editor = object.createEditor();
-        // Compute world-space translateX/Y from screen-space coordinates
-        // This follows the same pattern as KritzelPath.updateDimensions()
-        object.updateDimensions();
-        return object;
-    }
-    /**
-     * Updates the translateX/Y to world coordinates based on screen-space x, y.
-     * This follows the same pattern as KritzelPath.updateDimensions().
-     *
-     * The formula: translateX = (x + initialTranslateX) / scale
-     * where initialTranslateX was -viewportTranslateX
-     *
-     * This converts screen-space position to world coordinates.
-     */
-    updateDimensions() {
-        this.translateX = (this.x + this.translateX) / this.scale;
-        this.translateY = (this.y + this.translateY) / this.scale;
-    }
-    mount(element) {
-        if (element === null || this.isInViewport() === false) {
-            return;
-        }
-        if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
-            return;
-        }
-        this.elementRef = element;
-        this.isMounted = true;
-    }
-    mountTextEditor(element) {
-        if (element === null) {
-            return;
-        }
-        if (this.editor.dom.parentElement === element) {
-            return;
-        }
-        element.style.fontFamily = this.fontFamily;
-        element.style.fontSize = `${this.fontSize}pt`;
-        element.style.color = this.fontColor;
-        element.style.whiteSpace = 'pre-wrap';
-        element.style.wordWrap = 'break-word';
-        element.innerHTML = '';
-        element.appendChild(this.editor.dom);
-    }
-    createEditor() {
-        const doc = this._schema.node('doc', null, [this._schema.node('paragraph')]);
-        return new EditorView(null, {
-            state: EditorState.create({
-                doc: doc,
-                plugins: [keymap(baseKeymap)],
-            }),
-            editable: () => false,
-            dispatchTransaction: transaction => {
-                const newState = this.editor.state.apply(transaction);
-                this.editor.updateState(newState);
-                if (transaction.docChanged) {
-                    this.content = newState.doc.toJSON();
-                    if (!transaction.getMeta('fromRemote')) {
-                        this._core.store.state.objects.update(this, { temporary: true });
-                    }
-                }
-            },
-        });
-    }
-    setContent(content) {
-        this.content = content;
-        if (this.editor && content) {
-            const newDoc = this.editor.state.schema.nodeFromJSON(content);
-            const tr = this.editor.state.tr.replaceWith(0, this.editor.state.doc.content.size, newDoc.content);
-            tr.setMeta('fromRemote', true);
-            this.editor.dispatch(tr);
-        }
-    }
-    resize(x, y, width, height) {
-        if (width <= 1 || height <= 1) {
-            return;
-        }
-        this.width = width;
-        this.height = height;
-        this.translateX = x;
-        this.translateY = y;
-        this._core.store.state.objects.update(this);
-    }
-    focus(coords) {
-        if (this.editor) {
-            const doc = this.editor.state.doc;
-            if (coords?.x && coords?.y) {
-                const pos = this.editor.posAtCoords({ left: coords.x, top: coords.y });
-                if (pos) {
-                    this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, pos.pos)));
-                    this.editor.focus();
-                    if (KritzelDevicesHelper.isIOS()) {
-                        this.scrollIntoViewOnIOS();
-                    }
-                    return;
-                }
-            }
-            const end = Math.max(1, doc.content.size - 1);
-            this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, end)));
-            this.editor.focus();
-            if (KritzelDevicesHelper.isIOS()) {
-                this.scrollIntoViewOnIOS();
-            }
-        }
-    }
-    scrollIntoViewOnIOS() {
-        setTimeout(() => {
-            if (this.editor && this.editor.dom) {
-                this.editor.dom.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'center',
-                    inline: 'nearest',
-                });
-            }
-        }, 300);
-    }
-    edit(event) {
-        KritzelKeyboardHelper.disableInteractiveWidget();
-        this.uneditedObject = this.clone();
-        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('shape'));
-        this.editor.setProps({ editable: () => true });
-        this.isEditing = true;
-        this._core.rerender();
-        this.focus({ x: event?.clientX, y: event?.clientY });
-        KritzelKeyboardHelper.enableInteractiveWidget();
-    }
-    save() {
-        this.content = this.editor.state.doc.toJSON();
-        this.editor.setProps({ editable: () => false });
-        this.editor.dom.blur();
-        this.isEditing = false;
-        this._core.store.state.objects.consolidateTemporaryItems();
-        this._core.store.state.objects.update(this);
-        this._core.engine.emitObjectsChange();
-    }
-    handlePointerDown(event) {
-        if (!this.isEditing) {
-            return;
-        }
-        event.stopPropagation();
-    }
-    handlePointerMove(event) {
-        if (!this.isEditing) {
-            return;
-        }
-        event.stopPropagation();
-    }
-    handlePointerUp(event) {
-        if (!this.isEditing) {
-            return;
-        }
-        event.stopPropagation();
-    }
-    copy() {
-        const copiedObject = super.copy();
-        copiedObject.editor = copiedObject.createEditor();
-        if (this.content) {
-            copiedObject.setContent(this.content);
-        }
-        return copiedObject;
-    }
-    serialize() {
-        const { _core, _elementRef, _schema, element, totalWidth, totalHeight, editor, uneditedObject, ...remainingProps } = this;
-        const clonedProps = structuredClone(remainingProps);
-        if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
-            clonedProps.element = element.cloneNode(true);
-        }
-        return clonedProps;
-    }
-    deserialize(object) {
-        super.deserialize(object);
-        if (object.content) {
-            this.setContent(object.content);
-        }
-        return this;
-    }
-    /**
-     * Returns the clipping polygon for arrow intersection.
-     * For ellipse: returns a many-sided polygon approximation
-     * For triangle: returns the 3 corners
-     * For rectangle: returns null (uses default rotatedPolygon)
-     *
-     * Includes padding for half the stroke width so arrow heads don't overlap the stroke.
-     */
-    getClipPolygon() {
-        // Calculate world-space center and dimensions
-        const worldWidth = this.totalWidth / this.scale;
-        const worldHeight = this.totalHeight / this.scale;
-        const centerX = this.translateX + worldWidth / 2;
-        const centerY = this.translateY + worldHeight / 2;
-        // Add padding for stroke width so arrows don't overlap the stroke
-        const strokePadding = (this.strokeWidth / this.scale) / 2;
-        switch (this.shapeType) {
-            case ShapeType.Ellipse:
-                // Return a 32-segment polygon approximation of the ellipse
-                // Add stroke padding to radii
-                return KritzelGeometryHelper.getEllipsePolygonApproximation(centerX, centerY, worldWidth / 2 + strokePadding, worldHeight / 2 + strokePadding, 32, this.rotation);
-            case ShapeType.Triangle:
-                // Return the 3 corners of the triangle in world coordinates
-                // Triangle: top-center, bottom-right, bottom-left
-                // Expand each vertex outward from center by strokePadding
-                const expandVertex = (vx, vy) => {
-                    const dx = vx - centerX;
-                    const dy = vy - centerY;
-                    const dist = Math.sqrt(dx * dx + dy * dy);
-                    if (dist === 0)
-                        return { x: vx, y: vy };
-                    const scale = (dist + strokePadding) / dist;
-                    return {
-                        x: centerX + dx * scale,
-                        y: centerY + dy * scale
-                    };
-                };
-                const topX = this.translateX + worldWidth / 2;
-                const topY = this.translateY;
-                const bottomLeftX = this.translateX;
-                const bottomLeftY = this.translateY + worldHeight;
-                const bottomRightX = this.translateX + worldWidth;
-                const bottomRightY = this.translateY + worldHeight;
-                const expandedTop = expandVertex(topX, topY);
-                const expandedBottomRight = expandVertex(bottomRightX, bottomRightY);
-                const expandedBottomLeft = expandVertex(bottomLeftX, bottomLeftY);
-                // Apply rotation around center if rotated
-                if (this.rotation !== 0) {
-                    const cos = Math.cos(this.rotation);
-                    const sin = Math.sin(this.rotation);
-                    const rotate = (p) => {
-                        const dx = p.x - centerX;
-                        const dy = p.y - centerY;
-                        return {
-                            x: centerX + dx * cos - dy * sin,
-                            y: centerY + dx * sin + dy * cos
-                        };
-                    };
-                    return [
-                        rotate(expandedTop),
-                        rotate(expandedBottomRight),
-                        rotate(expandedBottomLeft)
-                    ];
-                }
-                return [expandedTop, expandedBottomRight, expandedBottomLeft];
-            case ShapeType.Rectangle:
-            default:
-                // For rectangles, return null to use the default rotatedPolygon
-                return null;
-        }
-    }
-    /**
-     * Returns the SVG path for rendering the shape.
-     * The path uses screen-space coordinates relative to (x, y).
-     */
-    getSvgPath() {
-        const w = this.width;
-        const h = this.height;
-        switch (this.shapeType) {
-            case ShapeType.Rectangle:
-                return `M ${this.x} ${this.y} L ${this.x + w} ${this.y} L ${this.x + w} ${this.y + h} L ${this.x} ${this.y + h} Z`;
-            case ShapeType.Ellipse:
-                const cx = this.x + w / 2;
-                const cy = this.y + h / 2;
-                const rx = w / 2;
-                const ry = h / 2;
-                return `M ${cx - rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx + rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx - rx} ${cy}`;
-            case ShapeType.Triangle:
-                const topX = this.x + w / 2;
-                const topY = this.y;
-                const bottomLeftX = this.x;
-                const bottomLeftY = this.y + h;
-                const bottomRightX = this.x + w;
-                const bottomRightY = this.y + h;
-                return `M ${topX} ${topY} L ${bottomRightX} ${bottomRightY} L ${bottomLeftX} ${bottomLeftY} Z`;
-            default:
-                return `M ${this.x} ${this.y} L ${this.x + w} ${this.y} L ${this.x + w} ${this.y + h} L ${this.x} ${this.y + h} Z`;
-        }
-    }
-}
-
-class KritzelShapeTool extends KritzelBaseTool {
-    shapeType = ShapeType.Rectangle;
-    fillColor = 'transparent';
-    strokeColor = '#000000';
-    strokeWidth = 4;
-    fontFamily = 'Arial';
-    fontSize = 16;
-    fontColor = '#000000';
-    palette = [
-        '#000000',
-        '#FFFFFF',
-        '#FF0000',
-        '#00FF00',
-        '#0000FF',
-        '#FFFF00',
-        '#FF00FF',
-        '#00FFFF',
-        '#808080',
-        '#C0C0C0',
-        '#800000',
-        '#008000',
-        '#000080',
-        '#808000',
-        '#800080',
-    ];
-    startX = 0;
-    startY = 0;
-    isDrawing = false;
-    currentShape = null;
-    constructor(core) {
-        super(core);
-    }
-    handlePointerDown(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-        }
-        if (event.pointerType === 'mouse') {
-            const path = event.composedPath().slice(1);
-            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
-            const object = this._core.findObjectById(objectElement?.id);
-            const activeShape = this._core.store.activeShape;
-            if (activeShape === null && object instanceof KritzelShape) {
-                object.edit(event);
-                return;
-            }
-            if (activeShape !== null && object instanceof KritzelShape) {
-                activeShape.save();
-                object.edit(event);
-                return;
-            }
-            if (activeShape !== null && object instanceof KritzelShape === false) {
-                this._core.resetActiveShape();
-                this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-                return;
-            }
-            if (KritzelEventHelper.isLeftClick(event) === false) {
-                return;
-            }
-            this.startDrawing(event.clientX, event.clientY);
-        }
-        if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._core.store.state.pointers.values());
-            const path = event.composedPath().slice(1);
-            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
-            const object = this._core.findObjectById(objectElement?.id);
-            const activeShape = this._core.store.activeShape;
-            if (activeShape === null && object instanceof KritzelShape) {
-                object.edit(event);
-                return;
-            }
-            if (activeShape !== null && object instanceof KritzelShape) {
-                activeShape.save();
-                object.edit(event);
-                return;
-            }
-            if (activeShape !== null && object instanceof KritzelShape === false) {
-                this._core.resetActiveShape();
-                this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-                return;
-            }
-            if (activePointers.length > 1) {
-                return;
-            }
-            const clientX = Math.round(activePointers[0].clientX);
-            const clientY = Math.round(activePointers[0].clientY);
-            this.startDrawing(clientX, clientY);
-        }
-    }
-    handlePointerMove(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-        }
-        if (!this.isDrawing || !this.currentShape) {
-            return;
-        }
-        if (event.pointerType === 'mouse') {
-            this.updateShapeSize(event.clientX, event.clientY);
-        }
-        if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._core.store.state.pointers.values());
-            if (activePointers.length === 1) {
-                const clientX = Math.round(activePointers[0].clientX);
-                const clientY = Math.round(activePointers[0].clientY);
-                this.updateShapeSize(clientX, clientY);
-            }
-        }
-    }
-    handlePointerUp(event) {
-        if (event.cancelable) {
-            event.preventDefault();
+        else if (this.hasSuffixContent !== false) {
+            this.hasSuffixContent = false;
         }
-        if (!this.isDrawing || !this.currentShape) {
-            return;
+    };
+    evaluatePrefixContent = () => {
+        if (this.prefixSlotElement) {
+            const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;
+            if (this.hasPrefixContent !== newHasContent) {
+                this.hasPrefixContent = newHasContent;
+            }
         }
-        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;
+        else if (this.hasPrefixContent !== false) {
+            this.hasPrefixContent = false;
         }
-        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);
+    };
+    getSelectedLabel() {
+        const selectedOption = this.options.find(opt => opt.value === this.internalValue);
+        return selectedOption?.label ?? '';
     }
-    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();
+    getSelectedStyle() {
+        const selectedOption = this.options.find(opt => opt.value === this.internalValue);
+        return selectedOption?.style;
     }
-}
+    render() {
+        const triggerClasses = {
+            'dropdown-trigger': true,
+            'has-suffix-border': this.hasSuffixContent,
+            'has-prefix-border': this.hasPrefixContent,
+            'is-open': this.isOpen,
+            'open-up': this.openDirection === 'up',
+        };
+        const menuClasses = {
+            'dropdown-menu': true,
+            'is-open': this.isOpen,
+            'open-up': this.openDirection === 'up',
+            'open-down': this.openDirection === 'down',
+        };
+        return (h(Host, { key: '29d076eb2ef76527c0930ab82ace0d05c896ab6c' }, h("div", { key: '1afac5cc0b7f408849670b8cb62fe0bd0f3b27f1', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '3cfcf787c3b3eedbd6bf30c7506a0a4912429672', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: 'b88120ed3e44871220e6ba61e8bef457651a2086', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '79082189066f3d0b4f5797420ec222847792fe52', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: 'a490bb6689ec1820144fe82f6833bee82e6ead0e', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '8bd7768f6fdd3c507bbca54d7d135adabe04901f', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: 'e1b854d2c93e3067181108f8d782e1393ddb615c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '3622cbf8964f4e50aa55be5209240dfd252f1d84', points: "6 9 12 15 18 9" }))))), h("slot", { key: 'b91317736904cbeee0f87058b822bd77c6b163ca', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: '0ca8690345974e9b7ad184f4c7ab7cf5367b183c', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
+            const isSelected = option.value === this.internalValue;
+            const isFocused = index === this.focusedIndex;
+            const optionClasses = {
+                'dropdown-option': true,
+                'is-selected': isSelected,
+                'is-focused': isFocused,
+            };
+            return (h("li", { class: optionClasses, role: "option", "aria-selected": isSelected ? 'true' : 'false', style: option.style, onClick: () => this.selectOption(option), onMouseEnter: () => this.handleOptionMouseEnter(index) }, option.label, isSelected && (h("span", { class: "dropdown-option-check", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" }))))));
+        })))));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "value": [{
+                "externalValueChanged": 0
+            }]
+    }; }
+};
+KritzelDropdown.style = kritzelDropdownCss();
 
 const DEFAULT_SHAPE_CONFIG = {
     shapeType: ShapeType.Rectangle,
@@ -1406,21 +1132,7 @@ const DEFAULT_SHAPE_CONFIG = {
     fontColor: '#000000',
     fontSize: 16,
     fontFamily: 'Arial',
-    palette: [
-        '#000000',
-        '#ff5252',
-        '#ffbc00',
-        '#00c853',
-        '#0000FF',
-        '#d500f9',
-        '#fafafa',
-        '#a52714',
-        '#ee8100',
-        '#558b2f',
-        '#01579b',
-        '#8e24aa',
-        '#90a4ae',
-    ],
+    palette: [...DEFAULT_COLOR_PALETTE],
 };
 
 const ABSOLUTE_SCALE_MAX = 1000;
@@ -1682,7 +1394,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: 'dd67bea86f807f0ccd5905183e73713a015d6bee' }, h("kritzel-workspace-manager", { key: '557edc7e3a131d338be6df91698ba6923e7bc50e', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '98969d0f2bb5a9a365885fb4765e0c04c1394caa', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '6092f393562af07643622c07d432f6100497aaf0', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (h(Host, { key: '46500c70e4c5321532eddc7f6aa96210c0fe73c8' }, h("kritzel-workspace-manager", { key: '70f780b4d42281c6c37b3fd16acab1541cc84ee1', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: 'a4906f8ac2d42126a4e55ad7c16697aca25763fb', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '4d08c06fa2c6e4f5c3c75c5e5a60bddb61083b98', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
     }
     static get watchers() { return {
         "isEngineReady": [{
@@ -18913,6 +18625,11 @@ class KritzelViewport {
     _core;
     _debounceUpdate;
     _debounceEndScaling;
+    _velocityX = 0;
+    _velocityY = 0;
+    _panRafId = null;
+    _friction = 0.92;
+    _minVelocity = 0.5;
     initialTouchDistance = 0;
     startX = 0;
     startY = 0;
@@ -19096,12 +18813,47 @@ class KritzelViewport {
         this._debounceEndScaling();
     }
     handlePan(event) {
+        // Normalize delta for trackpad vs mouse wheel
+        // WheelEvent.deltaMode: 0=pixels, 1=lines, 2=pages
+        let deltaX = event.deltaX;
+        let deltaY = event.deltaY;
+        if (event.deltaMode === 1) {
+            deltaX *= 16;
+            deltaY *= 16;
+        }
+        else if (event.deltaMode === 2) {
+            deltaX *= window.innerWidth;
+            deltaY *= window.innerHeight;
+        }
         const panSpeed = 0.8;
-        this._core.store.state.translateX = this._core.store.state.translateX - event.deltaX * panSpeed;
-        this._core.store.state.translateY = this._core.store.state.translateY - event.deltaY * panSpeed;
+        // Add to velocity for momentum effect
+        this._velocityX = -deltaX * panSpeed;
+        this._velocityY = -deltaY * panSpeed;
+        // Start animation loop if not already running
+        if (this._panRafId === null) {
+            this._animatePan();
+        }
+    }
+    _animatePan() {
+        // Apply current velocity
+        this._core.store.state.translateX += this._velocityX;
+        this._core.store.state.translateY += this._velocityY;
         this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
-        this._debounceUpdate();
+        // Apply friction to slow down
+        this._velocityX *= this._friction;
+        this._velocityY *= this._friction;
+        // Continue animation if velocity is still significant
+        if (Math.abs(this._velocityX) > this._minVelocity || Math.abs(this._velocityY) > this._minVelocity) {
+            this._panRafId = requestAnimationFrame(() => this._animatePan());
+        }
+        else {
+            // Stop animation and finalize
+            this._velocityX = 0;
+            this._velocityY = 0;
+            this._panRafId = null;
+            this._debounceUpdate();
+        }
     }
 }
 
@@ -20256,11 +20008,13 @@ class KritzelCore {
         this.removeSelectionGroup();
         this.removeSelectionBox();
         this._store.state.objects.insert(selectionGroup);
+        this._kritzelEngine.triggerSelectionChange();
     }
     removeSelectionGroup() {
         const selectionGroup = this._store.selectionGroup;
         if (selectionGroup) {
             this._store.state.objects.remove(object => object.id === selectionGroup.id);
+            this._kritzelEngine.triggerSelectionChange();
         }
     }
     removeSelectionBox() {
@@ -20802,11 +20556,15 @@ const KritzelEngine = class {
     }
     isEngineReady;
     activeToolChange;
+    objectsSelectionChange;
     workspacesChange;
     longpress;
     objectsChange;
     undoStateChange;
     forceUpdate = 0;
+    async triggerSelectionChange() {
+        this.objectsSelectionChange.emit();
+    }
     throttledWheel = lodashExports.throttle((ev) => {
         this.viewport.handleWheel(ev);
         this.core.store.state?.activeTool?.handleWheel(ev);
@@ -20922,6 +20680,9 @@ const KritzelEngine = class {
         return Promise.resolve(registeredTool);
     }
     async changeActiveTool(tool) {
+        if (this.core.store.state.activeTool === tool) {
+            return;
+        }
         this.core.store.state.activeTool?.onDeactivate();
         this.core.store.setState('activeTool', tool);
         this.core.deselectAllObjects();
@@ -21064,6 +20825,7 @@ const KritzelEngine = class {
         registerInstance(this, hostRef);
         this.isEngineReady = createEvent(this, "isEngineReady");
         this.activeToolChange = createEvent(this, "activeToolChange");
+        this.objectsSelectionChange = createEvent(this, "objectsSelectionChange");
         this.workspacesChange = createEvent(this, "workspacesChange");
         this.longpress = createEvent(this, "longpress");
         this.objectsChange = createEvent(this, "objectsChange");
@@ -21144,7 +20906,7 @@ const KritzelEngine = class {
         };
         const visibleObjects = this.core.store.state.objects.query(viewportBounds).sort((a, b) => a.zIndex - b.zIndex);
         this.core.cursorManager.applyCursor();
-        return (h(Host, { key: 'cf63f71e5ab763750f0857595a6b2d56e99b29fd' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'cf6d5221edb666692bbed086d1fa5bb57f591442', class: "debug-panel" }, h("div", { key: 'd1e94a59352063d08412c13bee8632b468229431' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '0eeff49b2c3bd703ef3b0fa574a323822ecef8a3' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '884aaab5f8c10a21541139cbc1c824a80233c7bb' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '6633c2b83830bc5091825b9c51af2aa82fbc935e' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '905bf21fed43acbada2e5d18dd9eb33979d368a4' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: 'd2abcda891791cee5386fe065de9b781c2db2e0a' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '9f64a19ac4510a2eae4d605dfdbb9a855b001b19' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '25634969756ec8505e2b169c4f8f77fa5260932a' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '2aea36a0521a5e59154836da290e7c615e4dc36d' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '599bafe7e87b23df191849ad23f56eea0009272f' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'd5e466d0b64b0f64a808dc8f08dba21530579a49' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '6143b384caa285cd850111b3d6d3fe95f3a468db' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '5695722e2e07e024fe1b5db1be22c890fa16b7d9' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '93c2d1a6669b397637d6918055fc14c96493cc65' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '2245f5894f7460d9d31ee33125260334920c6847' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '57fd33a984b7975198d87285658ec4de2824aa34' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '257cc4badaa694f04c839ca68ee79d1b695a006b' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'c00f461af4e4b1523e7e5feccfb0abfc6d45f5b7' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: '3f1bd888dfa360153b930fc5e498ccb348879d81' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '4b33ce03143d6f96e359bc0a21697a3788fa6d3e' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'd603a0a226357378889c87d1bda5dd194388a81c' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: 'e0cb4c098e14c44c7c4d96a35f75a609a5d83144' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'd663eff93d7884aa36da56a46e06cb65f0b14c54' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: 'fe44809fc10454d605bad012300e8a46a8f180c9' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'd69d570660f6ec9d37d842f24f61e534d4f349e1' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: 'aa6674f91511007c52f7faba849dd82f206e20ed', id: "origin", class: "origin", style: {
+        return (h(Host, { key: '49fbba9ba7044acb82cb23627bf08435f8683b80' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '7e18e66bdbae71ec35a6ea14bfdcd735e537a37b', class: "debug-panel" }, h("div", { key: '562ff35d3803b80f3c02c075741f1c4b81ba0739' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '82d08ac0527017c9f3674e1d551a071b0002477e' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: 'e4e3b8c6f18714dbf141a900768b2fb78ef8ec3a' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '68823a22db98800c7ec7b18770f38f03dd53f826' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '4683676eca0796b927ac8c10fe9ea48770366ee5' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: 'fcbd728c4483f06cffe1e9d581399a9619b3c172' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'f713005a414bd05b187327b5ffa021c51f227d97' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'fdb4892c0b5df0a599d4e457d656ca8e71086033' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '7c1ceb6398ceccb891d5854a731467771d88e688' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: 'fddfb8b396ab095dd99158b32bf4c9a06745c65f' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '8b807879e83bada98ff44a9124dddc7e7f8d8516' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '93827fa7bf4c27db8b3165a1d2be5d0cde5a65b6' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '923455fb261bc9aa8d6cd22c74894e41dc6a2f93' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '33579a767be0a80bed4a177da9577e6304d4900c' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '950c340bf725d7c8c92a51c61066c1aa7d09aa41' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '2a8ce1e6d68ea030f42521b25615bf60a1a8267e' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '9fd5a4b1a842c9aa178dc98dc9a210cf7d947615' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '81f9c6f9f5c38b48db1faaa8da08476cd747e906' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'bbea182105ab1f1856d8ffe7ee6dae2c96cefbae' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '0e57b3b517fc6f4780a6bf8b13a18e7d595e2e91' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '5be12fd92b4ccb6890680e725aea0f29fa16eda4' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: '51402f4730b8e482ee534bb83944c50462d895af' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'dddf5bed76a1755aec71ae7f30eab8dd0c39fdb0' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '367166d068f34090eb895116d8ac1ddd3ab5aaad' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'e88d10e302e4ff3e8cb877a509a883e2cffcc067' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '12bf294a8640947230611690f71b8c8116e861f4', 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: {
@@ -21393,7 +21155,7 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '95f98d34b26eca7124f973002c2689e9a90f6748', 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: '9d17520994c59b7eca2940d1a05f4f150b790767', 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`,
@@ -21404,7 +21166,7 @@ const KritzelEngine = class {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '412f67f0a484b7f5e37a4e9fa25d9124c389f62b', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'b86989f2a710324e420994f74bd8c4990cc52060', core: this.core })));
     }
     static get watchers() { return {
         "workspace": [{
@@ -21433,7 +21195,7 @@ const KritzelFont = class {
     size = 24;
     color = '#000000';
     render() {
-        return (h(Host, { key: '62d0314df8f62ef2cf21c17f548261b34611750f' }, h("div", { key: '269347c138aab38cb1f018e58db78cab8e087f13', class: "font-preview", style: {
+        return (h(Host, { key: '47e1580b093d5c9039a5bc1a7764e345afb7700b' }, h("div", { key: '1d6d36e895ab4e1fd76383b0847f81918e14dbb0', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -21442,7 +21204,7 @@ const KritzelFont = class {
 };
 KritzelFont.style = kritzelFontCss();
 
-const kritzelFontFamilyCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.font-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}.font-style-button.italic-text{font-style:italic}`;
+const kritzelFontFamilyCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box;width:100%}.font-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}.font-style-button.italic-text{font-style:italic}`;
 
 const KritzelFontFamily = class {
     constructor(hostRef) {
@@ -21485,7 +21247,7 @@ const KritzelFontFamily = class {
 };
 KritzelFontFamily.style = kritzelFontFamilyCss();
 
-const kritzelFontSizeCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}`;
+const kritzelFontSizeCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}`;
 
 const KritzelFontSize = class {
     constructor(hostRef) {
@@ -21507,7 +21269,7 @@ const KritzelFontSize = class {
         }
     }
     render() {
-        return (h(Host, { key: 'b0ee1ab0eb5e1871f7726d4393aea59f63264ec5' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: 'ea8461f3b921c6adec6360ffcca69832a30e5808' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
@@ -21539,6 +21301,91 @@ const KritzelIcon = class {
 };
 KritzelIcon.style = kritzelIconCss();
 
+const kritzelLineEndingsCss = () => `:host{display:flex;flex-direction:column;gap:12px;padding:0;box-sizing:border-box}.endings-section{display:flex;flex-direction:column;gap:6px}.section-label{font-size:12px;font-weight:500;color:var(--kritzel-line-endings-label-color, #666666);padding-left:4px}.endings-row{display:flex;align-items:center;gap:4px}.ending-option{display:flex;justify-content:center;align-items:center;width:48px;height:32px;border-radius:6px;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background:var(--kritzel-line-endings-option-background, #ffffff);padding:4px;transition:background-color 0.15s ease, border-color 0.15s ease}.ending-option:hover{background-color:var(--kritzel-line-endings-hover-background-color, #ebebeb)}.ending-option.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-line-endings-selected-background-color, #ebebeb)}.ending-option:focus{outline:none;box-shadow:0 0 0 2px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3))}.ending-icon{width:100%;height:100%}`;
+
+const KritzelLineEndings = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange");
+    }
+    /** Available ending styles */
+    styles = ['none', 'triangle'];
+    /** Current line arrow configuration */
+    value;
+    /** Stroke color used for rendering the preview */
+    strokeColor = '#000000';
+    valueChange;
+    getStartEnding() {
+        if (!this.value?.start?.enabled)
+            return 'none';
+        return this.value.start.style ?? 'triangle';
+    }
+    getEndEnding() {
+        if (!this.value?.end?.enabled)
+            return 'none';
+        return this.value.end.style ?? 'triangle';
+    }
+    handleStartChange(type) {
+        const newValue = {
+            ...this.value,
+            start: type === 'none'
+                ? { enabled: false }
+                : { enabled: true, style: type },
+        };
+        this.value = newValue;
+        this.valueChange.emit(newValue);
+    }
+    handleEndChange(type) {
+        const newValue = {
+            ...this.value,
+            end: type === 'none'
+                ? { enabled: false }
+                : { enabled: true, style: type },
+        };
+        this.value = newValue;
+        this.valueChange.emit(newValue);
+    }
+    getEndingPath(type) {
+        switch (type) {
+            case 'triangle':
+                return 'M 0 0 L 10 5 L 0 10 Z';
+            case 'open':
+                return 'M 0 0 L 10 5 L 0 10';
+            case 'diamond':
+                return 'M 0 5 L 5 0 L 10 5 L 5 10 Z';
+            case 'circle':
+                return 'M 10 5 A 5 5 0 1 1 0 5 A 5 5 0 1 1 10 5 Z';
+            default:
+                return '';
+        }
+    }
+    renderEndingIcon(type, isStart) {
+        const color = '#000000';
+        if (type === 'none') {
+            return (h("svg", { viewBox: "0 0 24 12", class: "ending-icon" }, h("line", { x1: isStart ? 4 : 2, y1: "6", x2: isStart ? 22 : 20, y2: "6", stroke: color, "stroke-width": "2", "stroke-linecap": "round" })));
+        }
+        const path = this.getEndingPath(type);
+        const isOpenStyle = type === 'open';
+        return (h("svg", { viewBox: "0 0 24 12", class: "ending-icon" }, isStart ? (
+        // Start arrow points left
+        h("g", null, h("line", { x1: "12", y1: "6", x2: "22", y2: "6", stroke: color, "stroke-width": "2", "stroke-linecap": "round" }), h("g", { transform: "translate(2, 1) scale(1, 1)" }, h("path", { d: path, fill: isOpenStyle ? 'none' : color, stroke: color, "stroke-width": isOpenStyle ? 2 : 0, "stroke-linecap": "round", "stroke-linejoin": "round", transform: "scale(-1, 1) translate(-10, 0)" })))) : (
+        // End arrow points right
+        h("g", null, h("line", { x1: "2", y1: "6", x2: "12", y2: "6", stroke: color, "stroke-width": "2", "stroke-linecap": "round" }), h("g", { transform: "translate(12, 1)" }, h("path", { d: path, fill: isOpenStyle ? 'none' : color, stroke: color, "stroke-width": isOpenStyle ? 2 : 0, "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+    }
+    render() {
+        const startEnding = this.getStartEnding();
+        const endEnding = this.getEndEnding();
+        return (h(Host, { key: '395c2c7e54986d9edffe7b1329361d9e0727d086' }, h("div", { key: '9f29cb35182b74d73fe82a89f91be42da3e43d3f', class: "endings-section" }, h("div", { key: '61f3e2bc9e3c2739e241213e68af71dd1091774e', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
+                'ending-option': true,
+                'selected': startEnding === type,
+            }, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: '1e39f687277ebdd0786f56b9be40101df42495d2', class: "endings-section" }, h("div", { key: 'fbe2ea8393cbf82b7c7aff7d6d8ca16abab1020a', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
+                'ending-option': true,
+                'selected': endEnding === type,
+            }, onClick: () => this.handleEndChange(type), title: type === 'none' ? 'No end arrow' : `${type} end arrow` }, this.renderEndingIcon(type, false))))))));
+    }
+};
+KritzelLineEndings.style = kritzelLineEndingsCss();
+
 const kritzelMenuCss = () => `:host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin;max-height:var(--kritzel-portal-max-height, 300px);box-sizing:border-box}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}`;
 
 const KritzelMenu = class {
@@ -21602,7 +21449,7 @@ const KritzelMenu = class {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (h(Host, { key: '3901d38f620a544be329e1a20b17b188a81295dc', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '8804023760f43fa34c3ac3f1829439f6136112b9', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+        return (h(Host, { key: '7143a116ad361651851491bce048901d6c0a02a0', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '8a5524ca7516955e1be34d10b8495c7b40ac05dd', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
 };
 KritzelMenu.style = kritzelMenuCss();
@@ -21703,12 +21550,12 @@ const KritzelMenuItem = class {
         ];
     }
     render() {
-        return (h(Host, { key: '3a8119288e14c4de188663910a58e0ba67b47614', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (h(Host, { key: '59a53dc472dd624f78dd773eb20a8722720ed465', tabIndex: this.item.isDisabled ? -1 : 0, class: {
                 'selected': this.item.isSelected,
                 'editing': this.item.isEditing,
                 'disabled': this.item.isDisabled,
                 'child-open': this.item.isChildMenuOpen,
-            }, onClick: this.handleItemSelect }, h("div", { key: 'b5dadbff0a915fb032f4a22207683667363eba1d', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, h("div", { key: '22665fedfa83e2483d97480a9c9e45da9d296319', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get watchers() { return {
         "item": [{
@@ -21718,6 +21565,42 @@ const KritzelMenuItem = class {
 };
 KritzelMenuItem.style = kritzelMenuItemCss();
 
+const kritzelOpacitySliderCss = () => `:host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(      to right,      var(--kritzel-opacity-slider-active-color, #007AFF) 0%,      var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%),      var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%),      var(--kritzel-opacity-slider-track-color, #e0e0e0) 100%    );outline:none;cursor:var(--kritzel-pointer-cursor, pointer)}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-moz-range-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.opacity-slider:focus{outline:none}.opacity-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 3px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3))}`;
+
+const KritzelOpacitySlider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange");
+    }
+    /** Current opacity value (0 to 1) */
+    value = 1;
+    /** Minimum opacity value */
+    min = 0;
+    /** Maximum opacity value */
+    max = 1;
+    /** Step increment */
+    step = 0.01;
+    /** Color to display in the preview (optional) */
+    previewColor = '#000000';
+    valueChange;
+    handleInput(event) {
+        const input = event.target;
+        const newValue = parseFloat(input.value);
+        this.value = newValue;
+        this.valueChange.emit(newValue);
+    }
+    getPercentage() {
+        return Math.round(this.value * 100);
+    }
+    render() {
+        const percentage = this.getPercentage();
+        return (h(Host, { key: 'e1409175b038e78d2659356452c48ccc7d79b8de' }, h("div", { key: '1de138f56f699fc54623ed8d7b8b5c6d3eda3c67', class: "opacity-container" }, h("div", { key: '1dd5d0d36c8d025ba46a0623a20f040990cc749a', class: "slider-wrapper" }, h("input", { key: '7b555aa0a4a9abfdcdadc86bffa5878c9336d1e4', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+                '--slider-progress': `${percentage}%`,
+            } })))));
+    }
+};
+KritzelOpacitySlider.style = kritzelOpacitySliderCss();
+
 class KritzelHTMLHelper {
     static getNumericValueFromStyle(element, property) {
         const value = window.getComputedStyle(element).getPropertyValue(property);
@@ -21974,7 +21857,7 @@ const KritzelPortal = class {
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: '9706a815c6f49853983a0fdb68b097d62e65e90b', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '1bd76deeb440cd25e3895dc8824f5200461e4ae0' })));
+        return (h(Host, { key: 'c70a1f7c4b2801346fc7a711b44e951337f42f77', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '654bd6dd3ec83d77984a500d505ed1f3c04a0c26' })));
     }
     static get watchers() { return {
         "anchor": [{
@@ -21983,6 +21866,40 @@ const KritzelPortal = class {
     }; }
 };
 
+const kritzelShapeFillCss = () => `:host{display:flex;flex-direction:column;gap:12px;padding:0;box-sizing:border-box}.fill-row{display:flex;align-items:center;gap:4px}.fill-option{display:flex;justify-content:center;align-items:center;width:48px;height:32px;border-radius:6px;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background:var(--kritzel-shape-fill-option-background, #ffffff);padding:4px;transition:background-color 0.15s ease, border-color 0.15s ease}.fill-option:hover{background-color:var(--kritzel-shape-fill-hover-background-color, #ebebeb)}.fill-option.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-shape-fill-selected-background-color, #ebebeb)}.fill-option:focus{outline:none;box-shadow:0 0 0 2px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3))}.fill-icon{width:100%;height:100%}`;
+
+const KritzelShapeFill = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange");
+    }
+    /** Current fill type */
+    value = 'transparent';
+    valueChange;
+    handleFillChange(type) {
+        this.value = type;
+        this.valueChange.emit(type);
+    }
+    renderFillIcon(type) {
+        const strokeColor = '#000000';
+        if (type === 'transparent') {
+            return (h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: "none", stroke: strokeColor, "stroke-width": "2" })));
+        }
+        // Filled
+        return (h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: strokeColor, stroke: strokeColor, "stroke-width": "2" })));
+    }
+    render() {
+        return (h(Host, { key: '7935296eb495557672cc96ab838ff4996953b220' }, h("div", { key: '69011629ff2dbdd38c7fb03b873fe5411b712de3', class: "fill-row" }, h("button", { key: '8a16a43b1ed8f316bc698a304d76667397a83015', class: {
+                'fill-option': true,
+                'selected': this.value === 'transparent',
+            }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: 'f51854da5ece9f18242b4b91ac9645e13efc41b3', class: {
+                'fill-option': true,
+                'selected': this.value === 'filled',
+            }, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));
+    }
+};
+KritzelShapeFill.style = kritzelShapeFillCss();
+
 const kritzelSplitButtonCss = () => `:host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-pointer-cursor, pointer);text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}`;
 
 const KritzelSplitButton = class {
@@ -22076,12 +21993,12 @@ const KritzelSplitButton = class {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (h(Host, { key: 'a5587085e47c4e33148f9d0817731bfa3aa804b6', class: { mobile: this.isTouchDevice } }, h("button", { key: 'd3815785bb0919e2385bc7b9b0812466ed2b45a3', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: 'b3225e1966bd21e8d37590cb39c0922e46afdaa9', name: this.buttonIcon })), h("div", { key: '526a88ef833cae7d2c7749f2a4bd96bcd2210a56', class: "split-divider" }), h("button", { key: '2c3ee46806bc64edc1f89a97c5e76ec493822065', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: 'c6204d8b14d8cefe9d6eff33af95b2a7ea9a6b7c', name: this.dropdownIcon })), h("kritzel-portal", { key: '07a5e9793484f79d9b4b1f9ae09503f762cb2580', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '0cf7601fd43b846a69152f0fc6ab950ac108ebff', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (h(Host, { key: 'cdfb795efe513061f464c76650aa226cd7d5ac81', class: { mobile: this.isTouchDevice } }, h("button", { key: '5c38c82b57f35c2e39b0dbba71b3ccfd99ebcc5c', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: '862d96cca7ec5aef55284ac6a65ce16b07a03dda', name: this.buttonIcon })), h("div", { key: '41849e36e756af257d10baf82d2cb0c9cd1e441f', class: "split-divider" }), h("button", { key: '0c54c40c84dcf5cf1b94b024353334e4be0e3404', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: '15b0d07c9afa584105180fb5f0701c15974f11aa', name: this.dropdownIcon })), h("kritzel-portal", { key: '23014ad95c3ee688b9348f480cc33cdb1c970244', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '90f4f29429a80f5700d16b1e99f3dd6315464bbb', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
 };
 KritzelSplitButton.style = kritzelSplitButtonCss();
 
-const kritzelStrokeSizeCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}`;
+const kritzelStrokeSizeCss = () => `:host{display:flex;align-items:flex-start;gap:0;padding:0;width:100%;box-sizing:border-box}.size-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}`;
 
 const KritzelStrokeSize = class {
     constructor(hostRef) {
@@ -22096,15 +22013,215 @@ const KritzelStrokeSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: 'd204d14384367ca8847ad30cab9801788c8d8fac' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: '891f899a41844bba03305e3dd7cbf428d4471ff9' }, h("div", { key: '773a756d54d0632c9ea6b3aebb743abad2274244', class: "size-grid" }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
-            }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));
+            }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size })))))));
     }
 };
 KritzelStrokeSize.style = kritzelStrokeSizeCss();
 
-const kritzelTooltipCss = () => `:host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-controls-tooltip-background-color, #ffffff);color:var(--kritzel-controls-tooltip-color, #000000);padding:var(--kritzel-controls-tooltip-padding, 8px);border-radius:var(--kritzel-controls-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}`;
+const kritzelToolConfigCss = () => `.expand-toggle{background:none;border:none;cursor:pointer;padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}`;
+
+const KritzelToolConfig = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.toolChange = createEvent(this, "toolChange");
+        this.displayValuesChange = createEvent(this, "displayValuesChange");
+    }
+    tool;
+    handleToolChange(newTool, oldTool) {
+        const newConfig = KritzelToolConfigHelper.getToolConfig(newTool);
+        // Maintain settings when switching between shape tools
+        if (oldTool && newTool && newConfig?.type === 'shape') {
+            const oldConfig = KritzelToolConfigHelper.getToolConfig(oldTool);
+            if (oldConfig?.type === 'shape') {
+                // Copy properties that should persist
+                const propsToCopy = [
+                    newConfig.colorProperty, // strokeColor
+                    newConfig.sizeProperty, // strokeWidth
+                    newConfig.opacityProperty, // opacity
+                    'fillColor' // shape specific
+                ];
+                propsToCopy.forEach(prop => {
+                    if (prop && oldTool[prop] !== undefined) {
+                        newTool[prop] = oldTool[prop];
+                    }
+                });
+            }
+        }
+        this.config = newConfig;
+        if (this.config) {
+            this.updatePalette();
+            this.currentOpacity = newTool[this.config.opacityProperty] ?? 1;
+            // Emit the values since they might have been updated from the old tool
+            this.emitDisplayValues();
+        }
+    }
+    isExpanded = false;
+    toolChange;
+    displayValuesChange;
+    config;
+    palette = [];
+    currentOpacity = 1;
+    updateTrigger = 0;
+    handleSelectionChange() {
+        if (this.tool instanceof KritzelSelectionTool) {
+            this.config = KritzelToolConfigHelper.getToolConfig(this.tool);
+            if (this.config) {
+                this.updatePalette();
+                this.currentOpacity = this.tool[this.config.opacityProperty] ?? 1;
+                this.emitDisplayValues();
+            }
+        }
+    }
+    componentWillLoad() {
+        this.config = KritzelToolConfigHelper.getToolConfig(this.tool);
+        if (this.config) {
+            this.updatePalette();
+            this.currentOpacity = this.tool[this.config.opacityProperty] ?? 1;
+            this.emitDisplayValues();
+        }
+    }
+    emitDisplayValues() {
+        if (!this.config)
+            return;
+        const color = this.tool[this.config.colorProperty];
+        const opacity = this.currentOpacity;
+        const size = this.tool[this.config.sizeProperty];
+        const displayValues = {
+            color: KritzelColorHelper.applyOpacity(color, opacity),
+            size,
+        };
+        if (this.tool instanceof KritzelTextTool) {
+            displayValues.fontFamily = this.tool.fontFamily;
+        }
+        this.displayValuesChange.emit(displayValues);
+    }
+    updatePalette() {
+        if (!this.config)
+            return;
+        if (this.config.paletteSource === 'palettes') {
+            // Brush tool has palettes[type]
+            const brushTool = this.tool;
+            this.palette = brushTool.palettes[brushTool.type] || [];
+        }
+        else if (this.config.paletteSource === 'palette') {
+            // Line, Shape, Text tools have palette
+            this.palette = this.tool.palette || [];
+        }
+    }
+    handleToggleExpand = () => {
+        this.isExpanded = !this.isExpanded;
+    };
+    handleColorChange = (event) => {
+        this.tool[this.config.colorProperty] = event.detail;
+        // Special handling for shape fill: when color (stroke) changes, update fill color if it's currently filled
+        if (this.config.type === 'shape' || this.config.type === 'selection') {
+            const tool = this.tool;
+            if (tool.fillColor !== 'transparent') {
+                tool.fillColor = event.detail;
+            }
+        }
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    handleSizeChange = (event) => {
+        this.tool[this.config.sizeProperty] = event.detail;
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    handleOpacityChange = (event) => {
+        this.tool[this.config.opacityProperty] = event.detail;
+        this.currentOpacity = event.detail;
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+    };
+    handlePropertyChange = (propertyName, value) => {
+        // Special handling for shape fill
+        if ((this.config.type === 'shape' || this.config.type === 'selection') && propertyName === 'fillColor') {
+            const newFillColor = value === 'filled' ? this.tool[this.config.colorProperty] : 'transparent';
+            this.tool.fillColor = newFillColor;
+            // When switching to fill mode, also update stroke color to match
+            if (value === 'filled') {
+                this.tool[this.config.colorProperty] = newFillColor;
+            }
+        }
+        // Special handling for brush type change
+        else if (this.config.type === 'brush' && propertyName === 'type') {
+            const brushTool = this.tool;
+            brushTool.type = value;
+            this.palette = brushTool.palettes[value];
+            brushTool.color = this.palette[0];
+            this.emitDisplayValues();
+        }
+        else {
+            this.tool[propertyName] = value;
+            // Emit display values for font family changes
+            if (propertyName === 'fontFamily') {
+                this.emitDisplayValues();
+            }
+        }
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    getShapeFillValue() {
+        const fillColor = this.tool.fillColor;
+        return fillColor === 'transparent' ? 'transparent' : 'filled';
+    }
+    renderControl(control) {
+        const value = this.tool[control.propertyName];
+        switch (control.type) {
+            case 'stroke-size':
+                return (h("kritzel-stroke-size", { key: control.type, selectedSize: value, onSizeChange: this.handleSizeChange }));
+            case 'font-size':
+                return (h("kritzel-font-size", { key: control.type, selectedSize: value, fontFamily: this.tool.fontFamily, onSizeChange: this.handleSizeChange }));
+            case 'line-endings':
+                return (h("kritzel-line-endings", { key: control.type, value: value, strokeColor: this.tool[this.config.colorProperty], onValueChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            case 'shape-fill':
+                return (h("kritzel-shape-fill", { key: control.type, value: this.getShapeFillValue(), onValueChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            case 'font-family':
+                return (h("kritzel-font-family", { key: control.type, selectedFontFamily: value, onFontFamilyChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            default:
+                return null;
+        }
+    }
+    render() {
+        if (!this.config)
+            return null;
+        const shouldShowExpandButton = this.palette.length > 6 || this.config.type === 'text';
+        // Separate size control from other controls
+        const sizeControl = this.config.controls.find(c => c.type === 'stroke-size' || c.type === 'font-size');
+        const otherControls = this.config.controls.filter(c => c.type !== 'stroke-size' && c.type !== 'font-size');
+        return (h(Host, null, h("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                gap: '8px',
+                width: '100%',
+            } }, h("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '12px',
+                flex: '1',
+            } }, h("kritzel-color-palette", { colors: this.palette, selectedColor: this.tool[this.config.colorProperty], isExpanded: this.isExpanded, isOpaque: true, opacity: this.currentOpacity, onColorChange: this.handleColorChange }), sizeControl && this.renderControl(sizeControl), h("kritzel-opacity-slider", { value: this.tool[this.config.opacityProperty], previewColor: this.tool[this.config.colorProperty], onValueChange: this.handleOpacityChange }), otherControls.map((control) => [
+            h("div", { class: "divider" }),
+            this.renderControl(control),
+        ])), shouldShowExpandButton && (h("div", { style: {
+                display: 'flex',
+                alignItems: 'flex-start',
+            } }, h("button", { class: "expand-toggle", onClick: this.handleToggleExpand, title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { name: this.isExpanded ? 'chevron-up' : 'chevron-down' })))))));
+    }
+    static get watchers() { return {
+        "tool": [{
+                "handleToolChange": 0
+            }]
+    }; }
+};
+KritzelToolConfig.style = kritzelToolConfigCss();
+
+const kritzelTooltipCss = () => `:host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-controls-tooltip-background-color, #ffffff);color:var(--kritzel-controls-tooltip-color, #000000);padding:var(--kritzel-controls-tooltip-padding, 12px);border-radius:var(--kritzel-controls-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}`;
 
 const KritzelTooltip = class {
     constructor(hostRef) {
@@ -22121,8 +22238,10 @@ const KritzelTooltip = class {
     handleOutsideClick(event) {
         if (!this.isVisible)
             return;
-        const target = event.target;
-        if (!this.host.contains(target)) {
+        // Check if click is inside the tooltip host or any of its shadow DOM content
+        const path = event.composedPath();
+        const isInsideTooltip = path.some(el => el === this.host);
+        if (!isInsideTooltip) {
             this.tooltipClosed.emit();
         }
     }
@@ -22172,14 +22291,14 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (h(Host, { key: 'c257f254b8ba6b95f251eac3136f5be282d23e30', style: {
+        return (h(Host, { key: '104ad4a160e4f47454955696e5f0e7a28873c3f5', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: `${this.positionX}px`,
                 bottom: `${this.positionY}px`,
-            } }, h("div", { key: '14f31dc995236a2309e2371ecef278a0e6374139', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '6dace4d6ed82878333f8771cf4670d53cea36873' }))));
+            } }, h("div", { key: '283eec8d84ea29caefdb1f0c4f129c57d30bc133', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '1c6e2d9bcb69f8deec08b6c10384b4c7593babd3' }))));
     }
 };
 KritzelTooltip.style = kritzelTooltipCss();
@@ -22210,7 +22329,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '998008f3c138f18d0e3f5183c3280e646e6c8e73' }, h("button", { key: '2ea58a2df20e038e00c0090c44714efbc1221314', class: "utility-button", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '1843d211731f83f2f828b17f0bc0cf83a76705e1', name: "undo" })), h("button", { key: '71064186570d8e849a634a4c68e96f3fba1ebdab', class: "utility-button", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '12694a6dcddc1f893752d3edcc1deafe700cff5c', name: "redo" })), h("div", { key: '5bbfb5e535d9e0a861d227df57bd5cc7ab8c22fb', class: "utility-separator" }), h("button", { key: 'fda95410a66afa98c0abf6eb82e323f926ef596a', class: "utility-button" }, h("kritzel-icon", { key: '0d1d77f6d65481825c2edbdb38de821a2de7b043', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: 'b0994bdfd10e1bfbad18d7df2810575b19a9e67d' }, h("button", { key: '4bcb8106f6977ff1472477b6a689942e7eedd8b7', class: "utility-button", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '05c9a0b6a926eeb236cda9bf8c333dd6a0b563cb', name: "undo" })), h("button", { key: '88b008c4c37de9440da414617a0b2e144e47e830', class: "utility-button", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: 'ec921af2eca35fd1d1aad88d88d5f0a0804e4c44', name: "redo" })), h("div", { key: '94b7eec2edee8a41296726ab79d61bccba1940d8', class: "utility-separator" }), h("button", { key: '50be446ae7510d5133b7767e0dd382b7e1c87c3f', class: "utility-button" }, h("kritzel-icon", { key: 'd11d988dafc42c250b7361f5bba532fa9f81d97e', name: "delete", onClick: () => this.delete.emit() }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss();
@@ -22355,4 +22474,4 @@ const KritzelWorkspaceManager = class {
 };
 KritzelWorkspaceManager.style = kritzelWorkspaceManagerCss();
 
-export { KritzelColor as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControlBrushConfig as kritzel_control_brush_config, KritzelControlTextConfig as kritzel_control_text_config, KritzelControls as kritzel_controls, KritzelCursorTrail as kritzel_cursor_trail, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelPortal as kritzel_portal, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel, KritzelWorkspaceManager as kritzel_workspace_manager };
+export { KritzelColor as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControls as kritzel_controls, KritzelCursorTrail as kritzel_cursor_trail, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelLineEndings as kritzel_line_endings, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelOpacitySlider as kritzel_opacity_slider, KritzelPortal as kritzel_portal, KritzelShapeFill as kritzel_shape_fill, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size, KritzelToolConfig as kritzel_tool_config, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel, KritzelWorkspaceManager as kritzel_workspace_manager };