kritzel-stencil 0.0.124 → 0.0.126

package/dist/esm/kritzel-brush-style_18.entry.js

@@ -1,2347 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BGl8znzE.js';
-import { K as KritzelBrushTool, a as KritzelTextTool, b as KritzelMouseButton, c as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, d as KritzelEraserTool, e as DEFAULT_TEXT_CONFIG, f as KritzelImageTool, g as KritzelEventHelper, h as KritzelBaseCommand, i as KritzelSelectionGroup, j as KrtizelSelectionBox, R as RemoveSelectionGroupCommand, k as RemoveObjectCommand, B as BatchCommand, A as AddObjectCommand, l as AddSelectionGroupCommand, m as KritzelToolRegistry, n as KritzelBaseHandler, o as KritzelBaseTool, p as KritzelKeyboardHelper } from './index-DO2IiM_o.js';
-
-const kritzelBrushStyleCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.brush-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:default;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)}";
-
-const KritzelBrushStyle = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.typeChange = createEvent(this, "typeChange");
-        this.type = 'pen';
-        this.brushOptions = [
-            { value: 'pen', label: 'Pen' },
-            { value: 'highlighter', label: 'Highlighter' },
-        ];
-    }
-    handleDropdownValueChange(event) {
-        this.typeChange.emit(event.detail);
-    }
-    render() {
-        const dropdownOptions = this.brushOptions.map(option => ({
-            value: option.value,
-            label: option.label,
-        }));
-        return (h(Host, { key: 'd7af382fe6f613aa16a5146785990ad2faa17f60' }, h("kritzel-dropdown", { key: '6d6d330d415c210058834b2968774b3db2ab7fc4', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: 'c9fb33795b8e25f68c1d2ae248dc82a6de29e199', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: '975c95b545a1c27ae2984405ac298592eec9743d', name: this.type, size: 16 })))));
-    }
-};
-KritzelBrushStyle.style = kritzelBrushStyleCss;
-
-const kritzelColorCss = ":host{display:flex}.checkerboard-bg{background:repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}";
-
-const KritzelColor = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.size = 24;
-    }
-    isLightColor(hexColor) {
-        if (!hexColor)
-            return false;
-        let r = 0, g = 0, b = 0;
-        let sanitizedHex = hexColor.startsWith('#') ? hexColor.slice(1) : hexColor;
-        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 false;
-        }
-        if (isNaN(r) || isNaN(g) || isNaN(b)) {
-            return false;
-        }
-        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
-        return luminance > 220;
-    }
-    render() {
-        const isColorVeryLight = this.isLightColor(this.value);
-        return (h(Host, { key: '19ad3872a132c885c612dc3b96698a0c8dc7214d' }, h("div", { key: 'f67108e82396cbaa3d070c8dfc83da2b080ddf47', class: "checkerboard-bg", style: {
-                width: `${this.size}px`,
-                height: `${this.size}px`,
-                borderRadius: '50%',
-                display: 'inline-block',
-                position: 'relative',
-            } }, h("div", { key: '1af0cc3e9f6eebc04cae2367510ef3b98420a818', class: {
-                'color-circle': true,
-                'white': isColorVeryLight,
-            }, style: {
-                backgroundColor: this.value,
-                width: `${this.size}px`,
-                height: `${this.size}px`,
-                borderRadius: '50%',
-                position: 'absolute',
-                top: '0',
-                left: '0',
-                display: 'inline-block',
-            } }))));
-    }
-};
-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:pointer;border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.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) {
-        registerInstance(this, hostRef);
-        this.colorChange = createEvent(this, "colorChange");
-        this.colors = [];
-        this.selectedColor = null;
-        this.isExpanded = false;
-        this.isOpaque = false;
-    }
-    handleColorClick(color) {
-        this.selectedColor = color;
-        this.colorChange.emit(color);
-    }
-    calculateHeight() {
-        const colorsPerRow = 6;
-        const rowHeight = 32;
-        const gap = 8;
-        const rowCount = Math.ceil(this.colors.length / colorsPerRow);
-        return `${rowCount * rowHeight + (rowCount - 1) * gap}px`;
-    }
-    render() {
-        const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
-        const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: '0f0d176e1c8b199a973dbdb23b84e4a8d4d57f59' }, h("div", { key: '1d4707cdb30752d21a5058dbbef5fb32934bd3bd', class: {
-                'color-grid': true,
-                'expanded': this.isExpanded,
-            }, style: {
-                height: expandedHeight
-            } }, displayedColors.map(color => (h("div", { class: {
-                'color-container': true,
-                'selected': this.selectedColor === color,
-            }, onClick: () => this.handleColorClick(color) }, h("kritzel-color", { value: color })))))));
-    }
-};
-KritzelColorPalette.style = kritzelColorPaletteCss;
-
-const kritzelContextMenuCss = ":host{display:block}.menu-container{display:flex;flex-direction:column;background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #f0f0f0);padding:var(--kritzel-context-menu-padding,4px)}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:pointer;font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent}.menu-item:not(.disabled):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa);cursor:default}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";
-
-const KritzelContextMenu = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.actionSelected = createEvent(this, "actionSelected");
-        this.disabledStates = new Map();
-        this.visibleItems = [];
-    }
-    componentWillLoad() {
-        this.resolveVisibleItems();
-        this.resolveDisabledStates();
-    }
-    onItemsChanged() {
-        this.resolveVisibleItems();
-        this.resolveDisabledStates();
-    }
-    handleItemClick(item, index) {
-        if (!this.disabledStates.get(index)) {
-            this.actionSelected.emit(item);
-        }
-    }
-    async resolveVisibleItems() {
-        const visibleItems = [];
-        const visibilityPromises = this.items.map(async (item, index) => {
-            let isVisible = true;
-            if (item.visible !== undefined) {
-                if (typeof item.visible === 'boolean') {
-                    isVisible = item.visible;
-                }
-                else if (typeof item.visible === 'function') {
-                    const result = item.visible(null, this.objects);
-                    if (result instanceof Promise) {
-                        isVisible = await result;
-                    }
-                    else {
-                        isVisible = result;
-                    }
-                }
-            }
-            return { item, index, isVisible };
-        });
-        const visibilityResults = await Promise.all(visibilityPromises);
-        visibilityResults.forEach(({ item, isVisible }) => {
-            if (isVisible) {
-                visibleItems.push(item);
-            }
-        });
-        this.visibleItems = visibleItems;
-    }
-    async resolveDisabledStates() {
-        const newStates = new Map();
-        const disabledPromises = this.visibleItems.map(async (item, index) => {
-            let isDisabled = false;
-            if (typeof item.disabled === 'boolean') {
-                isDisabled = item.disabled;
-            }
-            else if (typeof item.disabled === 'function') {
-                const result = item.disabled(null, this.objects);
-                if (result instanceof Promise) {
-                    isDisabled = await result;
-                }
-                else {
-                    isDisabled = result;
-                }
-            }
-            newStates.set(index, isDisabled);
-        });
-        await Promise.all(disabledPromises);
-        this.disabledStates = new Map(newStates);
-    }
-    render() {
-        return (h(Host, { key: '3265d2e63ff1e1f91faf1c6c5da3490687f3adb1' }, h("div", { key: '80b2100e2ffcaba25ca08cfec650b1f7558c5d25', class: "menu-container" }, this.visibleItems.map((item, index) => {
-            var _a;
-            const isDisabled = (_a = this.disabledStates.get(index)) !== null && _a !== void 0 ? _a : false;
-            return (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, index), onTouchStart: () => this.handleItemClick(item, index), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)));
-        }))));
-    }
-    get hostElement() { return getElement(this); }
-    static get watchers() { return {
-        "items": ["onItemsChanged"]
-    }; }
-};
-KritzelContextMenu.style = kritzelContextMenuCss;
-
-const kritzelControlBrushConfigCss = ":host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;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");
-        this.isExpanded = false;
-        this.palette = [];
-    }
-    handleToolChange(newTool) {
-        this.palette = newTool.palettes[newTool.type];
-    }
-    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: '8e7930fcc093f7277ed088d8ec5e54e4cd051b86' }, h("div", { key: '08bd37b90decc9054c05d646aabbba0a4985d04c', style: {
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                width: '100%',
-                gap: '8px',
-            } }, h("kritzel-brush-style", { key: 'f79744fb6523d0b4fa67c324cbf8ff3eb8a0308d', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: 'dc3bdd90cebb29f2357e13dbc8d2dcaf02ae056e', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '6e9e6de7fc7c708aad700498e030d2ad7364a9f3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'c1ffd48a475754bb1447e9d866b494fd3476f050', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '38e265b42fe09d0105e0385d7ec8e7d8d318abb0', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
-    }
-    static get watchers() { return {
-        "tool": ["handleToolChange"]
-    }; }
-};
-KritzelControlBrushConfig.style = kritzelControlBrushConfigCss;
-
-const kritzelControlTextConfigCss = ":host{display:block;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;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");
-        this.isExpanded = false;
-    }
-    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: '27d47c47987fb7644313a4face4a7023dfbe454d' }, h("div", { key: '835b8072267da18b39a5c02a6c989e1f7b81e9a5', style: {
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                width: '100%',
-                gap: '8px',
-            } }, h("kritzel-font-family", { key: 'b7a0bde2e9cf53c9ae7c3a32b424825ca9f757c4', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '41aba583656195c4825a15ddc12c5e1efed0d8d2', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '5ff979420066703b5d5e886d12f89687392006e3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '30fbcc05f80b15fba7f1f5ac6413732d0149ee9b', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '2a0d3c4578316b37bc1a25b6e065ecf565eca2b3', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
-    }
-};
-KritzelControlTextConfig.style = kritzelControlTextConfigCss;
-
-class KritzelDevicesHelper {
-    static isTouchDevice() {
-        return window.matchMedia('(any-pointer: coarse)').matches;
-    }
-}
-
-const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}.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 #f0f0f0);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;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.mobile) .kritzel-control:hover{background-color:unset}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}:host(.mobile) .kritzel-control:active{background-color:unset}.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-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001}";
-
-const KritzelControls = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.isControlsReady = createEvent(this, "isControlsReady");
-        this.controls = [];
-        this.activeControl = null;
-        this.isUtilityPanelVisible = true;
-        this.firstConfig = null;
-        this.isTooltipVisible = false;
-        this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
-        this.kritzelEngine = null;
-    }
-    async handleActiveToolChange(event) {
-        var _a;
-        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
-        await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
-    }
-    handleClick(event) {
-        const element = event.target;
-        if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
-            return;
-        }
-        this.isTooltipVisible = false;
-        this.kritzelEngine.enable();
-    }
-    async closeTooltip() {
-        var _a;
-        this.isTooltipVisible = false;
-        (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.enable();
-    }
-    get activeToolAsTextTool() {
-        var _a;
-        return (_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.tool;
-    }
-    get activeToolAsBrushTool() {
-        var _a;
-        return (_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.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.');
-        }
-    }
-    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;
-            }
-            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') {
-            await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
-        }
-    }
-    handleConfigClick(event) {
-        event.stopPropagation();
-        this.isTooltipVisible = !this.isTooltipVisible;
-        this.kritzelEngine.disable();
-    }
-    async handleToolChange(event) {
-        this.activeControl = Object.assign(Object.assign({}, this.activeControl), { tool: event.detail });
-        await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
-    }
-    render() {
-        var _a, _b;
-        const hasNoConfig = ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.config) === undefined || ((_b = this.activeControl) === null || _b === void 0 ? void 0 : _b.config) === null;
-        return (h(Host, { key: '5531510d4b95c082148ce3e8f5d3048f808162b2', class: {
-                mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'e7e58ee4ae6a8a77918d5c8a954c2dcae287b265', style: {
-                position: 'absolute',
-                bottom: '56px',
-                left: '12px',
-            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } })), h("div", { key: '65ad87089a38f3e89f8332fc6f261555c2e7eb40', class: "kritzel-controls" }, this.controls.map(control => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            if (control.type === 'tool') {
-                return (h("button", { class: {
-                        'kritzel-control': true,
-                        'selected': ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.name) === (control === null || control === void 0 ? void 0 : control.name),
-                    }, key: control.name, onClick: _event => { var _a; return (_a = this.handleControlClick) === null || _a === void 0 ? void 0 : _a.call(this, control); } }, h("kritzel-icon", { name: control.icon })));
-            }
-            if (control.type === 'divider') {
-                return h("div", { class: "kritzel-divider", key: control.name });
-            }
-            if (control.type === 'config' && control.name === ((_b = this.firstConfig) === null || _b === void 0 ? void 0 : _b.name) && this.activeControl) {
-                return (h("div", { class: "kritzel-config-container", key: control.name }, h("kritzel-tooltip", { isVisible: this.isTooltipVisible, anchorElement: (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.kritzel-config-container') }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => { var _a; return (_a = this.handleToolChange) === null || _a === void 0 ? void 0 : _a.call(this, event); } })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => { var _a; return (_a = this.handleToolChange) === null || _a === void 0 ? void 0 : _a.call(this, event); } })))), h("div", { class: "kritzel-config", onClick: event => { var _a; return (_a = this.handleConfigClick) === null || _a === void 0 ? void 0 : _a.call(this, event); }, style: {
-                        cursor: this.activeControl.config ? 'pointer' : 'default',
-                        pointerEvents: hasNoConfig ? 'none' : 'auto',
-                    } }, this.activeControl.tool instanceof KritzelBrushTool && (h("div", { class: "color-container" }, h("kritzel-color", { value: (_d = this.activeToolAsBrushTool) === null || _d === void 0 ? void 0 : _d.color, size: (_e = this.activeToolAsBrushTool) === null || _e === void 0 ? void 0 : _e.size, style: {
-                        borderRadius: '50%',
-                        border: 'none',
-                    } }))), this.activeControl.tool instanceof KritzelTextTool && (h("div", { class: "font-container" }, h("kritzel-font", { fontFamily: (_f = this.activeToolAsTextTool) === null || _f === void 0 ? void 0 : _f.fontFamily, size: (_g = this.activeToolAsTextTool) === null || _g === void 0 ? void 0 : _g.fontSize, color: (_h = this.activeToolAsTextTool) === null || _h === void 0 ? void 0 : _h.fontColor }))), hasNoConfig && h("div", { class: "no-config" }))));
-            }
-        }))));
-    }
-    static get assetsDirs() { return ["../assets"]; }
-    get host() { return getElement(this); }
-};
-KritzelControls.style = kritzelControlsCss;
-
-const kritzelCursorTrailCss = ":host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9000}";
-
-const KritzelCursorTrail = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.cursorTrailPoints = [];
-        this.isLeftButtonDown = false;
-        this.TRAIL_DURATION_MS = 100;
-        this.MAX_TRAIL_POINTS = 50;
-    }
-    componentDidLoad() {
-        this.trailCleanupIntervalId = window.setInterval(() => {
-            const now = Date.now();
-            const newTrailPoints = this.cursorTrailPoints.filter(p => now - p.timestamp < this.TRAIL_DURATION_MS);
-            if (newTrailPoints.length !== this.cursorTrailPoints.length) {
-                this.cursorTrailPoints = newTrailPoints;
-            }
-        }, 50);
-    }
-    disconnectedCallback() {
-        if (this.trailCleanupIntervalId) {
-            window.clearInterval(this.trailCleanupIntervalId);
-        }
-    }
-    handleMouseDown(ev) {
-        if (ev.pointerType === 'mouse') {
-            if (ev.button === KritzelMouseButton.Left) {
-                this.isLeftButtonDown = true;
-                this.cursorTrailPoints = [];
-            }
-        }
-        if (ev.pointerType === 'touch') {
-            if (this.store.state.pointers.size === 1) {
-                this.isLeftButtonDown = true;
-                this.cursorTrailPoints = [];
-            }
-        }
-    }
-    handlePointerMove(ev) {
-        if (!this.isLeftButtonDown) {
-            return;
-        }
-        const newPoint = { x: ev.clientX, y: ev.clientY, timestamp: Date.now() };
-        const updatedTrail = [newPoint, ...this.cursorTrailPoints];
-        if (updatedTrail.length > this.MAX_TRAIL_POINTS) {
-            this.cursorTrailPoints = updatedTrail.slice(0, this.MAX_TRAIL_POINTS);
-        }
-        else {
-            this.cursorTrailPoints = updatedTrail;
-        }
-    }
-    handlePointerUp(ev) {
-        if (ev.pointerType === 'mouse') {
-            if (ev.button === KritzelMouseButton.Left) {
-                this.isLeftButtonDown = false;
-                this.cursorTrailPoints = [];
-            }
-        }
-        if (ev.pointerType === 'touch') {
-            if (this.store.state.pointers.size === 0) {
-                this.isLeftButtonDown = false;
-                this.cursorTrailPoints = [];
-            }
-        }
-    }
-    render() {
-        return (h(Host, { key: '2e6ee739a4c25cee00470ee95ca22e55712c8d7b' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '483aa687ccd290980ca9c588a84547df2bfdb659', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
-                position: 'absolute',
-                left: '0',
-                top: '0',
-                width: '100%',
-                height: '100%',
-                pointerEvents: 'none',
-                opacity: 'var(--kritzel-cursor-trail-opacity, 0.6)',
-                zIndex: '9000',
-            } }, this.cursorTrailPoints.slice(1).map((point, index) => {
-            const prevPoint = this.cursorTrailPoints[index];
-            const now = Date.now();
-            const age = now - point.timestamp;
-            const progress = Math.max(0, Math.min(1, age / this.TRAIL_DURATION_MS));
-            if (progress >= 1)
-                return null;
-            const baseStrokeWidth = Math.max(2, 15 * (1 - progress));
-            return (h("line", { key: `trail-segment-${point.timestamp}`, x1: prevPoint.x.toString(), y1: prevPoint.y.toString(), x2: point.x.toString(), y2: point.y.toString(), stroke: "var(--kritzel-cursor-trail-color, rgb(228, 228, 228))", "stroke-width": baseStrokeWidth.toString(), "stroke-linecap": "round" }));
-        })))));
-    }
-};
-KritzelCursorTrail.style = kritzelCursorTrailCss;
-
-const kritzelDropdownCss = ":host{display:inline-flex;vertical-align:middle;width:100%;}.dropdown-wrapper{display:flex;align-items:center;border:1px solid #333333;border-radius:var(--kritzel-controls-control-border-radius, 12px);overflow:hidden;height:32px;width:100%}.custom-select{padding:0 8px;padding-right:30px;height:100%;width:100%;box-sizing:border-box;border-radius:0;border:none;background-color:#fff;cursor:pointer;outline:none;font-size:inherit;color:var(--kritzel-controls-text-color, #333333);-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23333333\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>');background-size:16px 16px;background-repeat:no-repeat;background-position:right 8px center}.custom-select.has-suffix-border{border-right:1px solid #333333}.custom-select.has-prefix-border{border-left:1px solid #333333}::slotted(*){height:100%;box-sizing:border-box}";
-
-const KritzelDropdown = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.valueChanged = createEvent(this, "valueChanged");
-        this.options = [];
-        this.selectStyles = {};
-        this.hasSuffixContent = false;
-        this.hasPrefixContent = false;
-        this.handleSelectChange = (event) => {
-            const newValue = event.target.value;
-            if (this.internalValue !== newValue) {
-                this.internalValue = newValue;
-                this.valueChanged.emit(this.internalValue);
-            }
-        };
-        this.evaluateSuffixContent = () => {
-            if (this.suffixSlotElement) {
-                const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;
-                if (this.hasSuffixContent !== newHasContent) {
-                    this.hasSuffixContent = newHasContent;
-                }
-            }
-            else {
-                if (this.hasSuffixContent !== false) {
-                    this.hasSuffixContent = false;
-                }
-            }
-        };
-        this.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;
-                }
-            }
-        };
-    }
-    componentWillLoad() {
-        this.updateInternalValue(this.value, false);
-        this.evaluateSuffixContent();
-        this.evaluatePrefixContent();
-    }
-    externalValueChanged(newValue) {
-        if (newValue !== this.internalValue) {
-            this.updateInternalValue(newValue, false);
-        }
-    }
-    optionsChanged() {
-        this.updateInternalValue(this.internalValue, true);
-    }
-    updateInternalValue(proposedValue, emitChange) {
-        let finalValue = proposedValue;
-        if (this.options && this.options.length > 0) {
-            const isValidValue = this.options.some(opt => opt.value === finalValue);
-            if (!finalValue || !isValidValue) {
-                finalValue = this.options[0].value;
-            }
-        }
-        else {
-            finalValue = undefined;
-        }
-        if (this.internalValue !== finalValue) {
-            this.internalValue = finalValue;
-            if (emitChange || (proposedValue !== finalValue && proposedValue !== undefined)) {
-                this.valueChanged.emit(this.internalValue);
-            }
-        }
-    }
-    render() {
-        const selectClasses = {
-            'custom-select': true,
-            'has-suffix-border': this.hasSuffixContent,
-            'has-prefix-border': this.hasPrefixContent,
-        };
-        return (h(Host, { key: '32c5f5a4f807c1e316c91b795c005b8d30ce6189' }, h("div", { key: 'b1cbeff18e688da4a2f7472be290b9527a619f07', class: "dropdown-wrapper" }, h("slot", { key: 'b3bbb7e21c6f5620cab41aa4b1c7206b6c75fd86', name: "prefix", ref: el => this.prefixSlotElement = el, onSlotchange: this.evaluatePrefixContent }), h("select", { key: '8b2dcdc125bee59cf29fce7c980b755e78d5816e', class: selectClasses, style: Object.assign(Object.assign({}, this.selectStyles), { width: this.width }), onInput: this.handleSelectChange }, this.options.map(option => (h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), h("slot", { key: '8d83f0dea41ac959bf2392948efef33bb70d0154', name: "suffix", ref: el => this.suffixSlotElement = el, onSlotchange: this.evaluateSuffixContent }))));
-    }
-    static get watchers() { return {
-        "value": ["externalValueChanged"],
-        "options": ["optionsChanged"]
-    }; }
-};
-KritzelDropdown.style = kritzelDropdownCss;
-
-class KritzelIconRegistry {
-    static register(name, svgContent) {
-        if (this.registry.has(name)) {
-            console.warn(`[IconRegistry] Icon "${name}" is already registered. It will be overwritten.`);
-        }
-        this.registry.set(name, svgContent);
-    }
-    static get(name) {
-        return this.registry.get(name);
-    }
-    static registerIcons(icons) {
-        for (const name in icons) {
-            if (Object.prototype.hasOwnProperty.call(icons, name)) {
-                this.register(name, icons[name]);
-            }
-        }
-    }
-    static has(name) {
-        return this.registry.has(name);
-    }
-}
-KritzelIconRegistry.registry = new Map();
-KritzelIconRegistry.registerIcons({
-    'cursor': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z"/></svg>',
-    'pen': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>',
-    'highlighter': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-highlighter-icon lucide-highlighter"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/></svg>',
-    'eraser': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>',
-    'type': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>',
-    'image': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
-    'chevron-down': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>',
-    'chevron-up': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>',
-    'copy': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',
-    'paste': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-paste-icon lucide-clipboard-paste"><path d="M11 14h10"/><path d="M16 4h2a2 2 0 0 1 2 2v1.344"/><path d="m17 18 4-4-4-4"/><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>',
-    'cut': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scissors-icon lucide-scissors"><circle cx="6" cy="6" r="3"/><path d="M8.12 8.12 12 12"/><path d="M20 4 8.12 15.88"/><circle cx="6" cy="18" r="3"/><path d="M14.8 14.8 20 20"/></svg>',
-    'delete': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>',
-    'bring-to-front': '<svg  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-to-line-icon lucide-arrow-up-to-line"><path d="M5 3h14"/><path d="m18 13-6-6-6 6"/><path d="M12 7v14"/></svg>',
-    'send-to-back': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-to-line-icon lucide-arrow-down-to-line"><path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/></svg>',
-    'select-all': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-mouse-pointer-icon lucide-square-mouse-pointer"><path d="M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"/><path d="M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"/></svg>',
-    'download': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>',
-    'undo': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo-icon lucide-undo"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>',
-    'redo': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-redo-icon lucide-redo"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg>'
-});
-
-const ABSOLUTE_SCALE_MAX = 1000;
-const ABSOLUTE_SCALE_MIN = 0.0001;
-
-const kritzelEditorCss = "kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-controls{position:absolute;bottom:28px}";
-
-const KritzelEditor = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.isReady = createEvent(this, "isReady");
-        this.scaleMax = ABSOLUTE_SCALE_MAX;
-        this.scaleMin = ABSOLUTE_SCALE_MIN;
-        this.controls = [
-            {
-                name: 'selection',
-                type: 'tool',
-                tool: KritzelSelectionTool,
-                icon: 'cursor',
-            },
-            {
-                name: 'brush',
-                type: 'tool',
-                tool: KritzelBrushTool,
-                icon: 'pen',
-                isDefault: true,
-                config: DEFAULT_BRUSH_CONFIG,
-            },
-            {
-                name: 'eraser',
-                type: 'tool',
-                tool: KritzelEraserTool,
-                icon: 'eraser',
-            },
-            {
-                name: 'text',
-                type: 'tool',
-                tool: KritzelTextTool,
-                icon: 'type',
-                config: DEFAULT_TEXT_CONFIG,
-            },
-            {
-                name: 'image',
-                type: 'tool',
-                tool: KritzelImageTool,
-                icon: 'image',
-            },
-            {
-                name: 'divider',
-                type: 'divider',
-            },
-            {
-                name: 'config',
-                type: 'config',
-            },
-        ];
-        this.globalContextMenuItems = [
-            {
-                label: 'Paste',
-                icon: 'paste',
-                disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
-                action: menu => this.engineRef.paste(menu.x, menu.y),
-            },
-            { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },
-        ];
-        this.objectContextMenuItems = [
-            {
-                label: 'Edit',
-                icon: 'pen',
-                visible: (_, objects) => objects.length === 1 && objects[0].isEditable,
-                action: (_, objects) => {
-                    if (objects.length === 1) {
-                        const object = objects[0];
-                        if (object.isEditable) {
-                            object.edit();
-                        }
-                    }
-                },
-            },
-            { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },
-            {
-                label: 'Paste',
-                icon: 'paste',
-                disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
-                action: (menu, _) => this.engineRef.paste(menu.x, menu.y),
-            },
-            { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },
-            { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.moveToTop() },
-            { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.moveToBottom() },
-        ];
-        this.customSvgIcons = {};
-        this.isControlsVisible = true;
-        this.isUtilityPanelVisible = true;
-        this.isEngineReady = false;
-        this.isControlsReady = false;
-    }
-    onIsEngineReady(newValue) {
-        if (newValue && this.isControlsReady) {
-            this.checkIsReady();
-        }
-    }
-    onIsControlsReady(newValue) {
-        if (newValue && this.isEngineReady) {
-            this.checkIsReady();
-        }
-    }
-    async getObjectById(id) {
-        return this.engineRef.getObjectById(id);
-    }
-    async addObject(object) {
-        return this.engineRef.addObject(object);
-    }
-    async updateObject(object, updatedProperties) {
-        return this.engineRef.updateObject(object, updatedProperties);
-    }
-    async removeObject(object) {
-        return this.engineRef.removeObject(object);
-    }
-    async getSelectedObjects() {
-        return this.engineRef.getSelectedObjects();
-    }
-    async selectObjects(objects) {
-        return this.engineRef.selectObjects(objects);
-    }
-    async selectAllObjectsInViewport() {
-        return this.engineRef.selectAllObjectsInViewport();
-    }
-    async clearSelection() {
-        this.engineRef.clearSelection();
-    }
-    async centerObjectInViewport(object) {
-        return this.engineRef.centerObjectInViewport(object);
-    }
-    handleTouchStart(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-        }
-    }
-    handleKeyDown(event) {
-        var _a;
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            (_a = this.controlsRef) === null || _a === void 0 ? void 0 : _a.closeTooltip();
-        }
-    }
-    componentDidLoad() {
-        this.registerCustomSvgIcons();
-    }
-    async checkIsReady() {
-        await customElements.whenDefined('kritzel-editor');
-        await customElements.whenDefined('kritzel-controls');
-        await customElements.whenDefined('kritzel-engine');
-        if (!this.isEngineReady || !this.isControlsReady) {
-            return;
-        }
-        this.isReady.emit(this.host);
-    }
-    registerCustomSvgIcons() {
-        for (const [name, svg] of Object.entries(this.customSvgIcons)) {
-            KritzelIconRegistry.register(name, svg);
-        }
-    }
-    render() {
-        return (h(Host, { key: 'f2fa7efff5baf4df8a9b2100b96e1546731b006b' }, h("kritzel-engine", { key: 'd4fc5d1b0827656119b14c9e2971818904f41c3f', ref: el => (this.engineRef = el), onIsEngineReady: () => (this.isEngineReady = true), scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems }), h("kritzel-controls", { key: 'd5f3a9b3d23090bbc8f36b8f974226697868988d', ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, style: this.isControlsVisible ? { display: 'flex' } : { display: 'none' }, onIsControlsReady: () => (this.isControlsReady = true) })));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "isEngineReady": ["onIsEngineReady"],
-        "isControlsReady": ["onIsControlsReady"]
-    }; }
-};
-KritzelEditor.style = kritzelEditorCss;
-
-class KritzelViewport {
-    constructor(store, host) {
-        this.initialTouchDistance = 0;
-        this.startX = 0;
-        this.startY = 0;
-        this._store = store;
-        this._store.state.host = host;
-        this._store.state.viewportWidth = host.clientWidth;
-        this._store.state.viewportHeight = host.clientHeight;
-        this._store.state.startX = 0;
-        this._store.state.startY = 0;
-        this._store.state.translateX = 0;
-        this._store.state.translateY = 0;
-    }
-    handleResize() {
-        this._store.state.viewportWidth = this._store.state.host.clientWidth;
-        this._store.state.viewportHeight = this._store.state.host.clientHeight;
-        this._store.state.hasViewportChanged = true;
-        this._store.rerender();
-    }
-    handlePointerDown(event) {
-        if (event.pointerType === 'mouse') {
-            const adjustedClientX = event.clientX - this._store.offsetX;
-            const adjustedClientY = event.clientY - this._store.offsetY;
-            if (event.button === KritzelMouseButton.Right) {
-                this._store.state.isPanning = true;
-                this._store.state.startX = adjustedClientX;
-                this._store.state.startY = adjustedClientY;
-            }
-        }
-        if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
-            if (activePointers.length === 2) {
-                this._store.state.currentPath = null;
-                this._store.state.isScaling = true;
-                const firstTouchX = activePointers[0].clientX - this._store.offsetX;
-                const firstTouchY = activePointers[0].clientY - this._store.offsetY;
-                const secondTouchX = activePointers[1].clientX - this._store.offsetX;
-                const secondTouchY = activePointers[1].clientY - this._store.offsetY;
-                this.initialTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
-                this.startX = (firstTouchX + secondTouchX) / 2;
-                this.startY = (firstTouchY + secondTouchY) / 2;
-                this._store.rerender();
-            }
-        }
-    }
-    handlePointerMove(event) {
-        if (event.pointerType === 'mouse') {
-            const hostRect = this._store.state.host.getBoundingClientRect();
-            const xRelativeToHost = event.clientX - hostRect.left;
-            const yRelativeToHost = event.clientY - hostRect.top;
-            this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
-            this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
-            if (this._store.state.isPanning) {
-                this._store.state.translateX -= this._store.state.startX - xRelativeToHost;
-                this._store.state.translateY -= this._store.state.startY - yRelativeToHost;
-                this._store.state.startX = xRelativeToHost;
-                this._store.state.startY = yRelativeToHost;
-                this._store.state.hasViewportChanged = true;
-                this._store.state.skipContextMenu = true;
-                this._store.rerender();
-            }
-        }
-        if (event.pointerType === 'touch') {
-            const hostRect = this._store.state.host.getBoundingClientRect();
-            const xRelativeToHost = event.clientX - hostRect.left;
-            const yRelativeToHost = event.clientY - hostRect.top;
-            this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
-            this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
-            const activePointers = Array.from(this._store.state.pointers.values());
-            if (activePointers.length === 2) {
-                const firstTouchX = activePointers[0].clientX - this._store.offsetX;
-                const firstTouchY = activePointers[0].clientY - this._store.offsetY;
-                const secondTouchX = activePointers[1].clientX - this._store.offsetX;
-                const secondTouchY = activePointers[1].clientY - this._store.offsetY;
-                const currentTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
-                const midpointX = (firstTouchX + secondTouchX) / 2;
-                const midpointY = (firstTouchY + secondTouchY) / 2;
-                const scaleRatio = currentTouchDistance / this.initialTouchDistance;
-                const newScale = this._store.state.scale * scaleRatio;
-                if (newScale > this._store.state.scaleMax || newScale < this._store.state.scaleMin) {
-                    this._store.state.translateX += midpointX - this.startX;
-                    this._store.state.translateY += midpointY - this.startY;
-                }
-                else {
-                    const translateXAdjustment = (midpointX - this._store.state.translateX) * (scaleRatio - 1);
-                    const translateYAdjustment = (midpointY - this._store.state.translateY) * (scaleRatio - 1);
-                    this._store.state.translateX += midpointX - this.startX - translateXAdjustment;
-                    this._store.state.translateY += midpointY - this.startY - translateYAdjustment;
-                    this._store.state.scale = newScale;
-                    this.initialTouchDistance = currentTouchDistance;
-                }
-                this.startX = midpointX;
-                this.startY = midpointY;
-                this._store.state.hasViewportChanged = true;
-                this._store.rerender();
-            }
-        }
-    }
-    handlePointerUp(event) {
-        if (event.pointerType === 'mouse') {
-            if (this._store.state.isPanning) {
-                this._store.state.isPanning = false;
-                this._store.rerender();
-            }
-        }
-        if (event.pointerType === 'touch') {
-            this._store.state.isScaling = false;
-            this._store.rerender();
-        }
-    }
-    handleWheel(event) {
-        event.preventDefault();
-        if (event.ctrlKey === true && KritzelEventHelper.isMainMouseWheel(event)) {
-            this.handleZoom(event);
-        }
-        if (!event.ctrlKey) {
-            this.handlePan(event);
-        }
-    }
-    handleZoom(event) {
-        const rect = this._store.state.host.getBoundingClientRect();
-        const xRelativeToHost = event.clientX - rect.left;
-        const yRelativeToHost = event.clientY - rect.top;
-        this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
-        this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
-        const delta = event.deltaY > 0 ? -this._store.state.scaleStep * this._store.state.scale : this._store.state.scaleStep * this._store.state.scale;
-        const newScale = Math.min(this._store.state.scaleMax, Math.max(this._store.state.scaleMin, this._store.state.scale + delta));
-        const scaleRatio = newScale / this._store.state.scale;
-        const translateXAdjustment = (xRelativeToHost - this._store.state.translateX) * (scaleRatio - 1);
-        const translateYAdjustment = (yRelativeToHost - this._store.state.translateY) * (scaleRatio - 1);
-        this._store.state.scale = newScale;
-        this._store.state.translateX -= translateXAdjustment;
-        this._store.state.translateY -= translateYAdjustment;
-        this._store.state.hasViewportChanged = true;
-        this._store.rerender();
-    }
-    handlePan(event) {
-        const panSpeed = 0.8;
-        this._store.state.translateX -= event.deltaX * panSpeed;
-        this._store.state.translateY -= event.deltaY * panSpeed;
-        this._store.state.hasViewportChanged = true;
-        this._store.rerender();
-    }
-}
-
-class UpdateViewportCommand extends KritzelBaseCommand {
-    constructor(store, initiator, previousViewport) {
-        super(store, initiator);
-        this.previousViewport = previousViewport;
-        this.currentViewport = {
-            scale: this._store.state.scale,
-            translateX: this._store.state.translateX,
-            translateY: this._store.state.translateY,
-        };
-    }
-    execute() {
-        this._store.state.scale = this.currentViewport.scale;
-        this._store.state.translateX = this.currentViewport.translateX;
-        this._store.state.translateY = this.currentViewport.translateY;
-    }
-    undo() {
-        this._store.state.scale = this.previousViewport.scale;
-        this._store.state.translateX = this.previousViewport.translateX;
-        this._store.state.translateY = this.previousViewport.translateY;
-    }
-}
-
-class KritzelCircularBuffer {
-    constructor(capacity) {
-        this.head = 0;
-        this.tail = 0;
-        this.size = 0;
-        this.capacity = capacity;
-        this.buffer = new Array(capacity).fill(null);
-    }
-    add(item) {
-        this.buffer[this.head] = item;
-        this.head = (this.head + 1) % this.capacity;
-        if (this.size < this.capacity) {
-            this.size++;
-        }
-        else {
-            this.tail = (this.tail + 1) % this.capacity;
-        }
-    }
-    pop() {
-        if (this.size === 0) {
-            return null;
-        }
-        this.head = (this.head - 1 + this.capacity) % this.capacity;
-        const item = this.buffer[this.head];
-        this.buffer[this.head] = null;
-        this.size--;
-        return item;
-    }
-    peek() {
-        if (this.size === 0) {
-            return null;
-        }
-        const lastIndex = (this.head - 1 + this.capacity) % this.capacity;
-        return this.buffer[lastIndex];
-    }
-    isEmpty() {
-        return this.size === 0;
-    }
-    clear() {
-        this.buffer.fill(null);
-        this.head = 0;
-        this.tail = 0;
-        this.size = 0;
-    }
-}
-
-class KritzelHistory {
-    constructor(store) {
-        this._store = store;
-        this.undoStack = new KritzelCircularBuffer(this._store.state.historyBufferSize);
-        this.redoStack = new KritzelCircularBuffer(this._store.state.historyBufferSize);
-        this.previousViewport = {
-            scale: this._store.state.scale,
-            scaleStep: this._store.state.scaleStep,
-            translateX: this._store.state.translateX,
-            translateY: this._store.state.translateY,
-        };
-    }
-    executeCommand(command) {
-        if (this._store.state.hasViewportChanged) {
-            this.addUpdateViewportCommand();
-        }
-        command.execute();
-        if (this._store.state.debugInfo.logCommands)
-            console.info('add', command);
-        this.undoStack.add(command);
-        if (this.redoStack.isEmpty() === false) {
-            this.redoStack.clear();
-        }
-        this._store.rerender();
-    }
-    undo() {
-        if (this._store.state.hasViewportChanged) {
-            const command = new UpdateViewportCommand(this._store, this, this.previousViewport);
-            command.undo();
-            this._store.state.hasViewportChanged = false;
-            this._store.rerender();
-            return;
-        }
-        const command = this.undoStack.pop();
-        if (command) {
-            command.undo();
-            if (this._store.state.debugInfo.logCommands)
-                console.info('undo', command);
-            this.redoStack.add(command);
-        }
-        this._store.rerender();
-    }
-    redo() {
-        const command = this.redoStack.pop();
-        if (command) {
-            command.execute();
-            if (this._store.state.debugInfo.logCommands)
-                console.info('redo', command);
-            this.undoStack.add(command);
-        }
-        this._store.rerender();
-    }
-    addUpdateViewportCommand() {
-        const command = new UpdateViewportCommand(this._store, this, this.previousViewport);
-        command.execute();
-        this.undoStack.add(command);
-        if (this.redoStack.isEmpty() === false) {
-            this.redoStack.clear();
-        }
-        this._store.state.hasViewportChanged = false;
-        this.previousViewport = {
-            scale: this._store.state.scale,
-            scaleStep: this._store.state.scaleStep,
-            translateX: this._store.state.translateX,
-            translateY: this._store.state.translateY,
-        };
-    }
-}
-
-class KritzelOctree {
-    constructor(bounds, capacity = 8) {
-        this.objects = [];
-        this.children = null;
-        this.bounds = bounds;
-        this.capacity = capacity;
-    }
-    insert(object) {
-        if (!this.intersects(object.rotatedBoundingBox, this.bounds)) {
-            return false;
-        }
-        if (this.objects.length < this.capacity && this.children === null) {
-            this.objects.push(object);
-            return true;
-        }
-        if (this.children === null) {
-            this.subdivide();
-        }
-        for (const child of this.children) {
-            if (child.insert(object)) {
-                return true;
-            }
-        }
-        return false;
-    }
-    update(object) {
-        const index = this.objects.findIndex(o => o.id === object.id);
-        if (index !== -1) {
-            this.objects[index] = object;
-            return true;
-        }
-        if (this.children !== null) {
-            for (const child of this.children) {
-                if (child.update(object)) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    remove(predicate) {
-        const index = this.objects.findIndex(o => predicate(o));
-        if (index !== -1) {
-            this.objects.splice(index, 1);
-        }
-        if (this.children !== null) {
-            for (const child of this.children) {
-                child.remove(predicate);
-            }
-        }
-    }
-    query(range) {
-        const results = [];
-        if (!this.intersects(range, this.bounds)) {
-            return results;
-        }
-        for (const object of this.objects) {
-            if (this.intersects(object.rotatedBoundingBox, range)) {
-                results.push(object);
-            }
-        }
-        if (this.children !== null) {
-            for (const child of this.children) {
-                results.push(...child.query(range));
-            }
-        }
-        return results;
-    }
-    filter(predicate) {
-        const results = this.objects.filter(o => predicate(o));
-        if (this.children !== null) {
-            for (const child of this.children) {
-                results.push(...child.filter(predicate));
-            }
-        }
-        return results;
-    }
-    allObjects() {
-        const results = [...this.objects];
-        if (this.children !== null) {
-            for (const child of this.children) {
-                results.push(...child.allObjects());
-            }
-        }
-        return results;
-    }
-    subdivide() {
-        const { x, y, z, width, height, depth } = this.bounds;
-        const halfWidth = width / 2;
-        const halfHeight = height / 2;
-        const halfDepth = depth / 2;
-        this.children = [
-            new KritzelOctree({ x, y, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x, y: y + halfHeight, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y: y + halfHeight, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x, y, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x, y: y + halfHeight, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y: y + halfHeight, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-        ];
-    }
-    intersects(a, b) {
-        return !(a.x >= b.x + b.width || // a is completely to the right of b
-            a.x + a.width <= b.x || // a is completely to the left of b
-            a.y >= b.y + b.height || // a is completely below b
-            a.y + a.height <= b.y // a is completely above b
-        );
-    }
-}
-
-class UpdateObjectCommand extends KritzelBaseCommand {
-    constructor(store, initiator, object, updatedProperties) {
-        super(store, initiator);
-        this.object = object;
-        this.updatedProperties = updatedProperties;
-        this.previousProperties = {};
-        for (const key in updatedProperties) {
-            if (updatedProperties.hasOwnProperty(key)) {
-                this.previousProperties[key] = this.object[key];
-            }
-        }
-    }
-    execute() {
-        for (const key in this.updatedProperties) {
-            if (this.updatedProperties.hasOwnProperty(key)) {
-                this.object[key] = this.updatedProperties[key];
-            }
-        }
-    }
-    undo() {
-        for (const key in this.previousProperties) {
-            if (this.previousProperties.hasOwnProperty(key)) {
-                this.object[key] = this.previousProperties[key];
-            }
-        }
-    }
-}
-
-const DEFAULT_ENGINE_STATE = {
-    activeTool: null,
-    activeText: null,
-    currentPath: null,
-    copiedObjects: null,
-    objectsOctree: null,
-    selectionBox: null,
-    selectionGroup: null,
-    resizeHandleType: null,
-    hasViewportChanged: false,
-    isReady: false,
-    isEnabled: true,
-    isScaling: false,
-    isPanning: false,
-    isFocused: false,
-    isSelecting: false,
-    isResizing: false,
-    isResizeHandleSelected: false,
-    isRotating: false,
-    isRotationHandleSelected: false,
-    isDragging: false,
-    isDrawing: false,
-    isErasing: false,
-    isWriting: false,
-    isCtrlKeyPressed: false,
-    isContextMenuVisible: false,
-    contextMenuItems: [],
-    contextMenuX: 0,
-    contextMenuY: 0,
-    skipContextMenu: false,
-    debugInfo: {
-        showObjectInfo: false,
-        showViewportInfo: false,
-        logCommands: false,
-    },
-    host: null,
-    pointerX: 0,
-    pointerY: 0,
-    scale: 1,
-    scaleMax: 1,
-    scaleMin: 1,
-    scaleStep: 0.05,
-    startX: 0,
-    startY: 0,
-    translateX: 0,
-    translateXMax: 400,
-    translateXMin: 0,
-    translateY: 0,
-    translateYMax: 400,
-    translateYMin: 0,
-    viewportWidth: 0,
-    viewportHeight: 0,
-    historyBufferSize: 1000,
-    longTouchTimeout: null,
-    longTouchDelay: 300,
-    pointers: new Map()
-};
-
-class KritzelStore {
-    get history() {
-        return this._history;
-    }
-    get state() {
-        return this._state;
-    }
-    get currentZIndex() {
-        return this._state.objectsOctree.filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox)).length;
-    }
-    get allObjects() {
-        return this._state.objectsOctree.allObjects();
-    }
-    get selectedObjects() {
-        return this.allObjects.filter(o => !(o instanceof KritzelSelectionGroup)).filter(o => o.isSelected);
-    }
-    get offsetX() {
-        return this._state.host.getBoundingClientRect().left;
-    }
-    get offsetY() {
-        return this._state.host.getBoundingClientRect().top;
-    }
-    constructor(kritzelEngine) {
-        this._listeners = new Map();
-        this.objects = [];
-        this._state = DEFAULT_ENGINE_STATE;
-        this._kritzelEngine = kritzelEngine;
-        this._history = new KritzelHistory(this);
-        this._state.objectsOctree = new KritzelOctree({
-            x: -Infinity,
-            y: -Infinity,
-            z: -Infinity,
-            width: Infinity,
-            height: Infinity,
-            depth: Infinity,
-        });
-    }
-    rerender() {
-        const viewportBounds = {
-            x: -this._state.translateX / this._state.scale,
-            y: -this._state.translateY / this._state.scale,
-            z: this._state.scale,
-            width: this._state.viewportWidth / this._state.scale,
-            height: this._state.viewportHeight / this._state.scale,
-            depth: 100,
-        };
-        this.objects = this._state.objectsOctree.query(viewportBounds);
-        if (this._kritzelEngine) {
-            this._kritzelEngine.forceUpdate++;
-        }
-    }
-    findObjectById(id) {
-        for (const object of this.allObjects) {
-            if (object.id === id) {
-                return object;
-            }
-        }
-        return null;
-    }
-    deselectAllObjects() {
-        if (this._state.selectionGroup) {
-            this._history.executeCommand(new RemoveSelectionGroupCommand(this, this));
-        }
-    }
-    onStateChange(property, listener) {
-        if (!this._listeners.has(property)) {
-            this._listeners.set(property, new Set());
-        }
-        this._listeners.get(property).add(listener);
-    }
-    setState(property, value) {
-        const oldValue = this._state[property];
-        if (oldValue !== value) {
-            this._state[property] = value;
-            if (this._listeners.has(property)) {
-                this._listeners.get(property).forEach(listener => listener(value, oldValue, String(property)));
-            }
-        }
-    }
-    delete() {
-        if (!this.state.selectionGroup) {
-            return;
-        }
-        const deleteSelectedObjectsCommand = this.state.selectionGroup.objects.map(obj => new RemoveObjectCommand(this, this.state.selectionGroup, obj));
-        const removeSelectionGroupCommand = new RemoveSelectionGroupCommand(this, this.state.selectionGroup);
-        const commands = [...deleteSelectedObjectsCommand, removeSelectionGroupCommand];
-        this.history.executeCommand(new BatchCommand(this, this.state.selectionGroup, commands));
-    }
-    deleteObject(id, isHistoryUpdated = true) {
-        const object = this.findObjectById(id);
-        if (object) {
-            if (isHistoryUpdated) {
-                const removeObjectCommand = new RemoveObjectCommand(this, this, object);
-                this.history.executeCommand(removeObjectCommand);
-            }
-            else {
-                this._state.objectsOctree.remove(obj => obj.id === id);
-                this.rerender();
-            }
-        }
-    }
-    copy() {
-        this.state.copiedObjects = this.state.selectionGroup.copy();
-    }
-    paste(x, y) {
-        this.state.copiedObjects.isSelected = true;
-        const adjustedX = x !== undefined ? x : this.state.copiedObjects.translateX + 25;
-        const adjustedY = y !== undefined ? y : this.state.copiedObjects.translateY + 25;
-        this.state.copiedObjects.updatePosition(adjustedX, adjustedY);
-        const commands = [];
-        if (this.state.selectionGroup !== null) {
-            commands.push(new RemoveSelectionGroupCommand(this, this.state.selectionGroup));
-        }
-        const addCopiedObjectsCommands = this.state.copiedObjects.objects.map(obj => new AddObjectCommand(this, this, obj));
-        const addCopiedObjectsAsSelectionGroupCommand = new AddSelectionGroupCommand(this, this, this.state.copiedObjects);
-        commands.push(...addCopiedObjectsCommands, addCopiedObjectsAsSelectionGroupCommand);
-        this.history.executeCommand(new BatchCommand(this, this, commands));
-        this.state.isSelecting = false;
-        this.state.copiedObjects = this.state.selectionGroup.copy();
-        this.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-    }
-    bringForward(object) {
-        const max = this.allObjects.length + 1;
-        const objects = object ? [object] : this.state.selectionGroup.objects;
-        const increaseZIndexCommands = objects.map(obj => {
-            if (obj.zIndex === max) {
-                return;
-            }
-            return new UpdateObjectCommand(this, this, obj, { zIndex: obj.zIndex + 1 });
-        });
-        this.history.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
-    }
-    sendBackward(object) {
-        const min = 0;
-        const objects = object ? [object] : this.state.selectionGroup.objects;
-        const decreaseZIndexCommands = objects.map(obj => {
-            if (obj.zIndex === min) {
-                return;
-            }
-            return new UpdateObjectCommand(this, this, obj, { zIndex: obj.zIndex - 1 });
-        });
-        this.history.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
-    }
-    bringToFront(object) {
-        const max = this.allObjects.length + 1;
-        const objects = object ? [object] : this.state.selectionGroup.objects;
-        const increaseZIndexCommands = objects.map(obj => {
-            return new UpdateObjectCommand(this, this, obj, { zIndex: max });
-        });
-        this.history.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
-    }
-    sendToBack(object) {
-        const min = -1;
-        const objects = object ? [object] : this.state.selectionGroup.objects;
-        const decreaseZIndexCommands = objects.map(obj => {
-            return new UpdateObjectCommand(this, this, obj, { zIndex: min });
-        });
-        this.history.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
-    }
-    selectObjects(objects) {
-        if (objects.length === 0) {
-            return;
-        }
-        const selectionGroup = KritzelSelectionGroup.create(this);
-        objects.forEach(obj => {
-            obj.isSelected = false;
-            selectionGroup.addOrRemove(obj);
-        });
-        selectionGroup.isSelected = true;
-        this.state.selectionGroup = selectionGroup;
-        if (objects.length === 1) {
-            selectionGroup.rotation = selectionGroup.objects[0].rotation;
-        }
-        this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
-    }
-    selectAllObjectsInViewport() {
-        const objectsInViewport = this._state.objectsOctree
-            .query({
-            x: -this._state.translateX / this._state.scale,
-            y: -this._state.translateY / this._state.scale,
-            z: this._state.scale,
-            width: this._state.viewportWidth / this._state.scale,
-            height: this._state.viewportHeight / this._state.scale,
-            depth: 100,
-        })
-            .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox) && !(o instanceof KritzelContextMenu));
-        if (objectsInViewport.length > 0) {
-            const selectionGroup = KritzelSelectionGroup.create(this);
-            objectsInViewport.forEach(obj => {
-                obj.isSelected = false;
-                selectionGroup.addOrRemove(obj);
-            });
-            selectionGroup.isSelected = true;
-            this.state.isSelecting = false;
-            if (objectsInViewport.length === 1) {
-                selectionGroup.rotation = selectionGroup.objects[0].rotation;
-            }
-            this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
-            this.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-        }
-    }
-    clearSelection() {
-        const command = new RemoveSelectionGroupCommand(this, this.state.selectionGroup);
-        this.history.executeCommand(command);
-        this.state.selectionGroup = null;
-        this.state.selectionBox = null;
-        this.state.isSelecting = false;
-        this.state.isResizeHandleSelected = false;
-        this.state.isRotationHandleSelected = false;
-    }
-    resetActiveText() {
-        if (this.state.activeText && this.state.activeText.value === ' ') {
-            this.deleteObject(this.state.activeText.id, false);
-            this.history.undoStack.pop();
-        }
-        this.state.activeText = null;
-    }
-    getObjectFromPointerEvent(event, selector = '.object') {
-        var _a;
-        const shadowRoot = (_a = this.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
-        if (!shadowRoot)
-            return null;
-        const clientX = event.clientX;
-        const clientY = event.clientY;
-        const elementAtPoint = shadowRoot.elementFromPoint(clientX, clientY);
-        if (!elementAtPoint)
-            return null;
-        const selectedObject = elementAtPoint.closest(selector);
-        if (selectedObject) {
-            return this.allObjects.find(object => selectedObject.id === object.id);
-        }
-        return null;
-    }
-    getObjectsFromPointerEvent(event, selector = '.object') {
-        var _a;
-        const shadowRoot = (_a = this.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
-        if (!shadowRoot)
-            return [];
-        const clientX = event.clientX;
-        const clientY = event.clientY;
-        const elementsAtPoint = shadowRoot.elementsFromPoint(clientX, clientY);
-        if (!elementsAtPoint || elementsAtPoint.length === 0)
-            return [];
-        const objectIds = new Set();
-        elementsAtPoint.forEach(element => {
-            const selectedObject = element.closest(selector);
-            if (selectedObject && selectedObject.id) {
-                objectIds.add(selectedObject.id);
-            }
-        });
-        if (objectIds.size > 0) {
-            return this.allObjects.filter(object => objectIds.has(object.id)).sort((a, b) => b.zIndex - a.zIndex);
-        }
-        return [];
-    }
-    getCanvasPoint(event) {
-        if (!this.state.host) {
-            return { x: 0, y: 0 };
-        }
-        // Get the position of the kritzel-engine host element relative to the viewport
-        const hostRect = this.state.host.getBoundingClientRect();
-        // 1. Make the pointer coordinates relative to the host element
-        const xRelativeToHost = event.clientX - hostRect.left;
-        const yRelativeToHost = event.clientY - hostRect.top;
-        // 2. Reverse the translation applied to the #origin div
-        const xWithoutTranslate = xRelativeToHost - this.state.translateX;
-        const yWithoutTranslate = yRelativeToHost - this.state.translateY;
-        // 3. Reverse the scaling to get the final world coordinates
-        const worldX = xWithoutTranslate / this.state.scale;
-        const worldY = yWithoutTranslate / this.state.scale;
-        return { x: worldX, y: worldY };
-    }
-}
-
-class KritzelKeyHandler extends KritzelBaseHandler {
-    constructor(store) {
-        super(store);
-    }
-    handleKeyDown(event) {
-        if (this._store.state.isFocused === false) {
-            event.preventDefault();
-            return;
-        }
-        this._store.state.isCtrlKeyPressed = event.ctrlKey;
-        if (this._store.state.isCtrlKeyPressed) {
-            event.preventDefault();
-        }
-        if (event.key === 'Escape' && this._store.state.selectionGroup) {
-            this._store.clearSelection();
-        }
-        if (event.key === 'Delete' && this._store.state.selectionGroup) {
-            this._store.delete();
-        }
-        if (event.key === 'z' && event.ctrlKey) {
-            this._store.history.undo();
-        }
-        if (event.key === 'y' && event.ctrlKey) {
-            this._store.history.redo();
-        }
-        if (event.key === 's' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'b' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('brush'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'e' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('eraser'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'i' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('image'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'x' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('text'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'c' && event.ctrlKey && this._store.state.selectionGroup) {
-            this._store.copy();
-            this._store.rerender();
-        }
-        if (event.key === 'v' && event.ctrlKey && this._store.state.copiedObjects) {
-            this._store.paste();
-        }
-        if (event.key === '+' && event.ctrlKey && this._store.state.selectionGroup) {
-            this._store.bringForward();
-        }
-        if (event.key === '-' && event.ctrlKey && this._store.state.selectionGroup) {
-            this._store.sendBackward();
-        }
-        if (event.key === '*' && event.shiftKey && this._store.state.selectionGroup) {
-            this._store.bringToFront();
-        }
-        if (event.key === '_' && event.shiftKey && this._store.state.selectionGroup) {
-            this._store.sendToBack();
-        }
-        if (event.key === 'a' && event.ctrlKey && this._store.state.activeText) {
-            this._store.state.activeText.selectAll();
-        }
-        if (event.key === 'v' && event.ctrlKey && this._store.state.activeText) {
-            this._store.state.activeText.insertFromClipboard();
-        }
-    }
-    handleKeyUp(event) {
-        if (this._store.state.isFocused === false) {
-            return;
-        }
-        this._store.state.isCtrlKeyPressed = event.ctrlKey;
-    }
-}
-
-class KritzelContextMenuHandler extends KritzelBaseHandler {
-    constructor(store, globalContextMenuItems, objectContextMenuItems) {
-        super(store);
-        this.globalContextMenuItems = [];
-        this.objectContextMenuItems = [];
-        this.globalContextMenuItems = globalContextMenuItems;
-        this.objectContextMenuItems = objectContextMenuItems;
-    }
-    handleContextMenu(event) {
-        if (this._store.state.skipContextMenu) {
-            this._store.state.skipContextMenu = false;
-            return;
-        }
-        const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
-        if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup)) {
-            this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
-            this._store.state.selectionGroup.addOrRemove(selectedObject);
-            this._store.state.selectionGroup.isSelected = true;
-            this._store.state.selectionGroup.rotation = selectedObject.rotation;
-            this._store.state.isSelecting = false;
-            this._store.history.executeCommand(new AddSelectionGroupCommand(this._store, this, this._store.state.selectionGroup));
-        }
-        this._store.state.contextMenuItems = this._store.state.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
-        let x = event.clientX - this._store.offsetX;
-        let y = event.clientY - this._store.offsetY;
-        const menuWidthEstimate = 150;
-        const menuHeightEstimate = 200;
-        const margin = 10;
-        if (x + menuWidthEstimate > window.innerWidth - margin) {
-            x = window.innerWidth - menuWidthEstimate - margin;
-        }
-        if (y + menuHeightEstimate > window.innerHeight - margin) {
-            y = window.innerHeight - menuHeightEstimate - margin;
-        }
-        x = Math.max(margin, x);
-        y = Math.max(margin, y);
-        this._store.state.contextMenuX = x;
-        this._store.state.contextMenuY = y;
-        this._store.state.isContextMenuVisible = true;
-        this._store.state.isEnabled = false;
-        this._store.rerender();
-    }
-}
-
-class KritzelClassHelper {
-    static isInstanceOf(object, className) {
-        return object.__class__ === className;
-    }
-}
-
-const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
-
-const KritzelEngine = class {
-    validateScaleMax(newValue) {
-        if (newValue > ABSOLUTE_SCALE_MAX) {
-            console.warn(`scaleMax cannot be greater than ${ABSOLUTE_SCALE_MAX}.`);
-            this.scaleMax = ABSOLUTE_SCALE_MAX;
-            this.store.state.scaleMax = this.scaleMax;
-        }
-        else {
-            this.store.state.scaleMax = newValue;
-        }
-    }
-    validateScaleMin(newValue) {
-        if (newValue < ABSOLUTE_SCALE_MIN) {
-            console.warn(`scaleMin cannot be less than ${ABSOLUTE_SCALE_MIN}.`);
-            this.scaleMin = ABSOLUTE_SCALE_MIN;
-            this.store.state.scaleMin = this.scaleMin;
-        }
-        else {
-            this.store.state.scaleMin = newValue;
-        }
-    }
-    get isSelecting() {
-        return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.isSelecting;
-    }
-    get isSelectionActive() {
-        return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.selectionGroup !== null;
-    }
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.isEngineReady = createEvent(this, "isEngineReady");
-        this.activeToolChange = createEvent(this, "activeToolChange");
-        this.scaleMax = ABSOLUTE_SCALE_MAX;
-        this.scaleMin = ABSOLUTE_SCALE_MIN;
-        this.forceUpdate = 0;
-        this.contextMenuElement = null;
-        this.store = new KritzelStore(this);
-    }
-    componentWillLoad() {
-        this.validateScaleMax(this.scaleMax);
-        this.validateScaleMin(this.scaleMin);
-    }
-    componentDidLoad() {
-        this.contextMenuHandler = new KritzelContextMenuHandler(this.store, this.globalContextMenuItems, this.objectContextMenuItems);
-        this.keyHandler = new KritzelKeyHandler(this.store);
-        this.viewport = new KritzelViewport(this.store, this.host);
-        this._registerStateChangeListeners();
-        if (this.store.state.isReady === false) {
-            this.store.state.isReady = true;
-            this.isEngineReady.emit();
-        }
-    }
-    handleWheel(ev) {
-        var _a, _b;
-        if (this.store.state.isContextMenuVisible) {
-            this.hideContextMenu();
-        }
-        this.viewport.handleWheel(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleWheel(ev);
-    }
-    handlePointerDown(ev) {
-        var _a, _b;
-        if (KritzelEventHelper.isPointerEventOnContextMenu(ev) === false && this.store.state.isContextMenuVisible) {
-            this.hideContextMenu();
-            return;
-        }
-        if (this.store.state.isEnabled === false) {
-            return;
-        }
-        KritzelEventHelper.onLongTouchPress(ev, (event) => {
-            if (!(this.store.state.activeTool instanceof KritzelSelectionTool)) {
-                return;
-            }
-            this.contextMenuHandler.handleContextMenu(event);
-        });
-        this.host.setPointerCapture(ev.pointerId);
-        this.store.state.pointers.set(ev.pointerId, ev);
-        this.viewport.handlePointerDown(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerDown(ev);
-    }
-    handlePointerMove(ev) {
-        var _a, _b;
-        if (this.store.state.isEnabled === false) {
-            return;
-        }
-        this.store.state.pointers.set(ev.pointerId, ev);
-        this.viewport.handlePointerMove(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerMove(ev);
-    }
-    handlePointerUp(ev) {
-        var _a, _b;
-        if (this.store.state.isEnabled === false) {
-            return;
-        }
-        this.store.state.pointers.delete(ev.pointerId);
-        this.host.releasePointerCapture(ev.pointerId);
-        this.viewport.handlePointerUp(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerUp(ev);
-    }
-    handlePointerCancel(ev) {
-        var _a, _b;
-        if (this.store.state.isEnabled === false) {
-            return;
-        }
-        this.host.releasePointerCapture(ev.pointerId);
-        this.store.state.pointers.delete(ev.pointerId);
-        this.viewport.handlePointerUp(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerUp(ev);
-    }
-    handleContextMenu(ev) {
-        ev.preventDefault();
-        if (this.store.state.isEnabled === false) {
-            return;
-        }
-        if (ev.pointerType === 'touch') {
-            return;
-        }
-        this.contextMenuHandler.handleContextMenu(ev);
-    }
-    handleResize() {
-        this.viewport.handleResize();
-    }
-    handleKeyDown(ev) {
-        this.keyHandler.handleKeyDown(ev);
-    }
-    handleKeyUp(ev) {
-        this.keyHandler.handleKeyUp(ev);
-    }
-    updateFocus(ev) {
-        const rect = this.store.state.host.getBoundingClientRect();
-        const isInside = ev.clientX >= rect.left && ev.clientX <= rect.right && ev.clientY >= rect.top && ev.clientY <= rect.bottom;
-        const path = ev.composedPath();
-        const kritzelEngineElement = this.host.closest('kritzel-engine');
-        const isInKritzelEngine = path.includes(kritzelEngineElement || this.host);
-        this.store.setState('isFocused', isInside && isInKritzelEngine);
-    }
-    async registerTool(toolName, toolClass, toolConfig) {
-        if (typeof toolClass !== 'function' || !(toolClass.prototype instanceof KritzelBaseTool)) {
-            console.error(`Failed to register tool "${toolName}": Tool class must be a constructor function`);
-            return null;
-        }
-        const registeredTool = KritzelToolRegistry.registerTool(toolName, toolClass, this.store);
-        if (toolConfig) {
-            Object.entries(toolConfig).forEach(([key, value]) => {
-                registeredTool[key] = value;
-            });
-        }
-        return Promise.resolve(registeredTool);
-    }
-    async changeActiveTool(tool) {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
-        this.store.setState('activeTool', tool);
-        this.store.deselectAllObjects();
-        tool === null || tool === void 0 ? void 0 : tool.onActivate();
-    }
-    async setFocus() {
-        this.host.focus();
-        this.store.state.isFocused = true;
-    }
-    async disable() {
-        this.store.state.isEnabled = false;
-        this.forceUpdate++;
-    }
-    async enable() {
-        this.store.state.isEnabled = true;
-        this.forceUpdate++;
-    }
-    async delete() {
-        this.store.delete();
-    }
-    async copy() {
-        this.store.copy();
-    }
-    async paste(x, y) {
-        this.store.paste(x, y);
-    }
-    async bringForward(object) {
-        this.store.bringForward(object);
-    }
-    async sendBackward(object) {
-        this.store.sendBackward(object);
-    }
-    async moveToTop(object) {
-        this.store.bringToFront(object);
-    }
-    async moveToBottom(object) {
-        this.store.sendToBack(object);
-    }
-    async undo() {
-        this.store.history.undo();
-    }
-    async redo() {
-        this.store.history.redo();
-    }
-    async hideContextMenu() {
-        this.store.state.pointers.clear();
-        this.store.state.isContextMenuVisible = false;
-        this.store.state.selectionBox = null;
-        this.store.state.isSelecting = false;
-    }
-    async getObjectById(id) {
-        const object = this.store.objects.find(obj => obj.id === id);
-        return object || null;
-    }
-    async addObject(object) {
-        this.store.deselectAllObjects();
-        object.id = object.generateId();
-        object._store = this.store;
-        object.scale = object.scale ? object.scale : this.store.state.scale;
-        object.zIndex = this.store.currentZIndex;
-        const command = new AddObjectCommand(this.store, this, object);
-        this.store.history.executeCommand(command);
-        return object;
-    }
-    async updateObject(object, updatedProperties) {
-        this.store.deselectAllObjects();
-        const command = new UpdateObjectCommand(this.store, this, object, updatedProperties);
-        this.store.history.executeCommand(command);
-        return object;
-    }
-    async removeObject(object) {
-        this.store.deselectAllObjects();
-        const command = new RemoveObjectCommand(this.store, this, object);
-        this.store.history.executeCommand(command);
-        return object;
-    }
-    async getSelectedObjects() {
-        return this.store.state.selectionGroup ? this.store.state.selectionGroup.objects : [];
-    }
-    async selectObjects(objects) {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
-        this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-        this.store.deselectAllObjects();
-        this.store.selectObjects(objects);
-        console.log('Selected objects:', objects);
-    }
-    async selectAllObjectsInViewport() {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
-        this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-        this.store.deselectAllObjects();
-        this.store.selectAllObjectsInViewport();
-    }
-    async clearSelection() {
-        this.store.clearSelection();
-    }
-    async centerObjectInViewport(object) {
-        object.centerInViewport();
-        const command = new UpdateObjectCommand(this.store, this, object, object);
-        this.store.history.executeCommand(command);
-        return object;
-    }
-    async getCopiedObjects() {
-        var _a;
-        return ((_a = this.store.state.copiedObjects) === null || _a === void 0 ? void 0 : _a.objects) || [];
-    }
-    _registerStateChangeListeners() {
-        this.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
-        this.store.onStateChange('isFocused', this._handleIsFocusedChange.bind(this));
-    }
-    _handleActiveToolChange(activeTool) {
-        if (!(activeTool instanceof KritzelSelectionTool)) {
-            this.store.clearSelection();
-        }
-        this.store.state.skipContextMenu = false;
-        this.activeToolChange.emit(activeTool);
-        KritzelKeyboardHelper.forceHideKeyboard();
-    }
-    _handleIsFocusedChange(isFocused) {
-        if (!isFocused) {
-            this.store.resetActiveText();
-        }
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
-        const computedStyle = window.getComputedStyle(this.host);
-        const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
-        const baseHandleSize = parseFloat(baseHandleSizePx);
-        const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (h(Host, { key: 'a8e6c284c98509ddd158686887d656d3907d40a2' }, h("div", { key: '3935b658e8859f746a5faef0bb91a527b68fcd3e', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '12c190c7ea99ac69310b27e719e7df8392b2b46e' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), h("div", { key: '4c98deccc2a029dab06ed76e5af426f4a05c7b66' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), h("div", { key: '1330191a39c7795f17a6adcc4fbd05e2d6a24d43' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), h("div", { key: '1ee59427037357ee6bf746a094285426eb0e6a58' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), h("div", { key: '1e68312e8516f25dcff34e9f9f70b90f426b8711' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '1d7cea9e21d9b744d8eaac29286528829143b4fa' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), h("div", { key: '0b60168fbd55aefa3714067bace80f167b8bcac0' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), h("div", { key: '109752df6a77633d89929f325d296f96d27d7aa9' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: 'b35466caf465b490c5d448d694353186ff902f09' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: '5df20e47f3bf234f04eea001b0a0abaf57946498' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '9d1ec8b8268488821a968e109fa279393977fdf8' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: '92fa98b7fa3bf877c4fffaca70683d2d908f5177' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '708d02459c1e3907dd88a2f2fd8916c1ee684cf1' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '27f45c1b6ee0b6bd0b3301a9c09b9198de722ac4' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '50d4476aecfc00d12bae7d8a3880ccb8de82fe68' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '0c582e97ee1535b4a14b75b7ef15373c43f21c4b' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '7a8378ac991d17d0eaaba5fbd519875197903a39' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '00b56f11ffd16f7b9049d2857f5f7effceba1294' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '3b7773194bd6bc8b8b2d024afc768f4e9fbb54c6' }, "PointerX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.pointerX), h("div", { key: 'a2b2c96f6180591082a5aee20cc3e82236dac520' }, "PointerY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.pointerY)), h("div", { key: '309eb61fff5182b5076cb3886bbd79006efc30b1', id: "origin", class: "origin", style: {
-                transform: `matrix(${(_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale}, 0, 0, ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.translateX}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateY})`,
-            } }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
-            _t.map(object => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-                return (h("div", { style: { transform: object === null || object === void 0 ? void 0 : object.transformationMatrix, transformOrigin: 'top left', zIndex: object.zIndex.toString(), position: 'absolute' } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", key: object.id, id: object.id, class: "object", style: {
-                        height: object === null || object === void 0 ? void 0 : object.totalHeight.toString(),
-                        width: object === null || object === void 0 ? void 0 : object.totalWidth.toString(),
-                        left: '0',
-                        top: '0',
-                        position: 'absolute',
-                        transform: `rotate(${object.rotationDegrees}deg)`,
-                        transformOrigin: 'center',
-                        opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
-                        pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                    } }, h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
-                        minHeight: '0',
-                        minWidth: '0',
-                        backgroundColor: object.backgroundColor,
-                        borderColor: object.borderColor,
-                        borderWidth: object.borderWidth + 'px',
-                        borderStyle: 'solid',
-                        padding: object.padding + 'px',
-                        overflow: 'visible',
-                    } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => el ? object.mount(el) : object.unmount(), xmlns: "http://www.w3.org/2000/svg", style: {
-                        height: object === null || object === void 0 ? void 0 : object.height.toString(),
-                        width: object === null || object === void 0 ? void 0 : object.width.toString(),
-                        position: 'absolute',
-                        overflow: 'visible',
-                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => el ? object.mount(el) : object.unmount(), src: object.src, style: {
-                        width: '100%',
-                        height: '100%',
-                        userSelect: 'none',
-                        pointerEvents: 'none',
-                    }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("textarea", { ref: el => el ? object.mount(el) : object.unmount(), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
-                        width: '100%',
-                        height: '100%',
-                        color: object.fontColor,
-                        fontSize: ((_a = object.fontSize) === null || _a === void 0 ? void 0 : _a.toString()) + 'px',
-                        fontFamily: object.fontFamily,
-                        border: 'none',
-                        outline: 'none',
-                        resize: 'none',
-                        overflow: 'hidden',
-                        display: 'block',
-                        padding: '1px',
-                        whiteSpace: 'nowrap',
-                        pointerEvents: object.isReadonly ? 'none' : 'auto',
-                        cursor: object.isReadonly ? 'default' : 'text',
-                        caretColor: object.isReadonly ? 'transparent' : 'auto',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
-                        width: '100%',
-                        height: '100%',
-                        pointerEvents: 'auto',
-                        overflow: 'hidden',
-                        display: 'block',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
-                        width: '100%',
-                        height: '100%',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
-                        width: '100%',
-                        height: '100%',
-                    } }))), h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_b = this.store.state) === null || _b === void 0 ? void 0 : _b.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_c = this.store.state) === null || _c === void 0 ? void 0 : _c.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_d = this.store.state) === null || _d === void 0 ? void 0 : _d.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_e = this.store.state) === null || _e === void 0 ? void 0 : _e.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / ((_f = this.store.state) === null || _f === void 0 ? void 0 : _f.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_g = this.store.state) === null || _g === void 0 ? void 0 : _g.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale)), style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale})`,
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale)), r: `${(baseHandleSize * object.scale) / ((_s = this.store.state) === null || _s === void 0 ? void 0 : _s.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_t = this.store.state) === null || _t === void 0 ? void 0 : _t.scale)), r: `${(baseHandleTouchSize * object.scale) / ((_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale)}`, style: {
-                        fill: 'transparent',
-                        cursor: 'grab',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation), h("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
-            }), h("svg", { key: 'c40c470ce1a341a6d238ea6c313bd3a78465dbd9', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
-                height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
-                width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
-                left: '0',
-                top: '0',
-                zIndex: (_w = this.store.state.currentPath) === null || _w === void 0 ? void 0 : _w.zIndex.toString(),
-                position: 'absolute',
-                transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
-                transformOrigin: 'top left',
-                overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: 'f2d62173bc61abf639e356520419b50c0493f34b', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'ad36d2e5eb72e2cbca73c48ef8a4db6d3b6f7a64', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: ((_2 = this.store.state.selectionGroup) === null || _2 === void 0 ? void 0 : _2.objects) || [], style: {
-                position: 'fixed',
-                left: `${this.store.state.contextMenuX}px`,
-                top: `${this.store.state.contextMenuY}px`,
-                zIndex: '10000',
-            }, onActionSelected: event => {
-                var _a;
-                event.detail.action({
-                    x: (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale,
-                    y: (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale,
-                }, (_a = this.store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.objects);
-                this.hideContextMenu();
-            } })), ((_3 = this.store.state) === null || _3 === void 0 ? void 0 : _3.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '6917e2621b4de0b0985e58a6043898d79e367ccc', store: this.store })));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "scaleMax": ["validateScaleMax"],
-        "scaleMin": ["validateScaleMin"]
-    }; }
-};
-KritzelEngine.style = kritzelEngineCss;
-
-const kritzelFontCss = ":host{display:block}.font-preview{color:var(--kritzel-font-size-text-color, #333333);line-height:1;text-align:center;font-weight:bold}";
-
-const KritzelFont = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.fontFamily = 'Arial, sans-serif';
-        this.size = 24;
-        this.color = '#000000';
-    }
-    render() {
-        return (h(Host, { key: 'd0378237899c5641ae4354f3bffb14e3f8bafb59' }, h("div", { key: '1475a6ae39ffc97eb780b30c85015c22cecafa6e', class: "font-preview", style: {
-                fontFamily: this.fontFamily,
-                fontSize: `${this.size}px`,
-                color: this.color
-            } }, "A")));
-    }
-};
-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: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) {
-        registerInstance(this, hostRef);
-        this.fontFamilyChange = createEvent(this, "fontFamilyChange");
-        this.fontOptions = [
-            { value: 'arial', label: 'Arial' },
-            { value: 'verdana', label: 'Verdana' },
-            { value: 'helvetica', label: 'Helvetica' },
-            { value: 'tahoma', label: 'Tahoma' },
-            { value: 'trebuchet ms', label: 'Trebuchet MS' },
-            { value: 'times new roman', label: 'Times New Roman' },
-            { value: 'georgia', label: 'Georgia' },
-            { value: 'garamond', label: 'Garamond' },
-            { value: 'courier new', label: 'Courier New' },
-            { value: 'brush script mt', label: 'Brush Script MT' },
-        ];
-        this.handleDropdownValueChange = (event) => {
-            this.fontFamilyChange.emit(event.detail);
-        };
-    }
-    componentWillLoad() {
-        if (this.fontOptions && this.fontOptions.length > 0) {
-            const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);
-            if (!this.selectedFontFamily || !isValidCurrentFont) {
-                this.selectedFontFamily = this.fontOptions[0].value;
-            }
-        }
-    }
-    render() {
-        const dropdownOptions = this.fontOptions.map(option => ({
-            value: option.value,
-            label: option.label,
-            style: { fontFamily: option.value },
-        }));
-        return (h(Host, { key: 'f420ff18156d54bfc475148a7d9aae0f1441408c' }, h("kritzel-dropdown", { key: '6b54fb8265a0eb59a6a681c6a2b7a95fb222671c', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: 'b853c75a425c7baafa7a8e749c90c0b08884375c', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: '68dea850dd1d1f38db727d8be0eec3481890c571', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
-    }
-};
-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:pointer;border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #f0f0f0)}.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) {
-        registerInstance(this, hostRef);
-        this.sizeChange = createEvent(this, "sizeChange");
-        this.sizes = [8, 10, 12, 16, 20, 24];
-        this.selectedSize = null;
-        this.fontFamily = 'Arial';
-    }
-    handleSizeClick(size) {
-        this.selectedSize = size;
-        this.sizeChange.emit(size);
-    }
-    render() {
-        return (h(Host, { key: '1c09a403f1e8278d30b2675c3a6e17e12ec79afa' }, this.sizes.map(size => (h("div", { class: {
-                'size-container': true,
-                'selected': this.selectedSize === size,
-            }, onClick: () => this.handleSizeClick(size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
-    }
-};
-KritzelFontSize.style = kritzelFontSizeCss;
-
-const kritzelIconCss = ":host{display:inline-flex;justify-content:center;align-items:center;}span{display:flex;align-items:center;width:100%;height:100%;}span>svg{width:100%;height:100%}";
-
-const KritzelIcon = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.size = 24;
-    }
-    render() {
-        const svgContent = KritzelIconRegistry.get(this.name);
-        if (!svgContent) {
-            console.error(`[kritzel-icon] Icon "${this.name}" not found in registry.`);
-            return h("span", { class: "error-icon", "aria-label": `Error: Icon ${this.name} not found` }, "?");
-        }
-        const styles = {
-            width: `${this.size}px`,
-            height: `${this.size}px`,
-        };
-        return (h(Host, { style: styles }, h("span", { "aria-hidden": !this.label, role: this.label ? 'img' : undefined, "aria-label": this.label, innerHTML: svgContent })));
-    }
-};
-KritzelIcon.style = kritzelIconCss;
-
-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:pointer;border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #f0f0f0)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #f0f0f0)}";
-
-const KritzelStrokeSize = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.sizeChange = createEvent(this, "sizeChange");
-        this.sizes = [4, 6, 8, 12, 16, 24];
-        this.selectedSize = null;
-    }
-    handleSizeClick(size) {
-        this.selectedSize = size;
-        this.sizeChange.emit(size);
-    }
-    render() {
-        return (h(Host, { key: '2e2a4d38920e25e1e60788deabe4912b510d0b10' }, this.sizes.map(size => (h("div", { class: {
-                'size-container': true,
-                'selected': this.selectedSize === 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 MOBILE_BREAKPOINT = 768;
-const KritzelTooltip = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.isVisible = false;
-        this.arrowSize = 8;
-        this.offsetY = 24;
-        this.positionX = 0;
-        this.arrowOffset = '0px';
-        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
-    }
-    handleWindowResize() {
-        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
-        this.calculateAdjustedPosition();
-    }
-    componentWillLoad() {
-        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
-        this.calculateAdjustedPosition();
-    }
-    componentWillUpdate() {
-        this.calculateAdjustedPosition();
-    }
-    calculateAdjustedPosition() {
-        var _a;
-        if (this.isVisible && this.anchorElement) {
-            const anchorRect = this.anchorElement.getBoundingClientRect();
-            const tooltipContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tooltip-content');
-            if (!this.isMobileView) {
-                this.positionX = anchorRect.left + anchorRect.width / 2;
-                this.arrowOffset = `calc(${50}% - ${this.arrowSize}px)`;
-            }
-            else {
-                const tooltipRect = tooltipContent.getBoundingClientRect();
-                this.positionX = anchorRect.left + anchorRect.width / 2 - tooltipRect.width / 2;
-                this.arrowOffset = `${anchorRect.left + anchorRect.width / 2 - tooltipRect.left - this.arrowSize}px`;
-            }
-        }
-    }
-    render() {
-        return (h(Host, { key: '3161826337f6957d2e568f52cfe3f57d705af0ed', 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.isMobileView ? `${this.positionX}px` : '50%',
-                marginBottom: `${this.offsetY + this.arrowSize}px`,
-            } }, h("div", { key: '12fc4bc05b7be756102ce3779c9be1d51f3fe13b', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '90f645f8f7cec371aaeda7207a9fb420b02b2ae4' }), h("div", { key: '73380e2c6df22bc4a97479a52315e7b34d069fa1', class: "tooltip-arrow-wrapper", style: {
-                position: 'fixed',
-                left: this.arrowOffset,
-                bottom: `-${this.arrowSize * 2}px`,
-            } }, h("div", { key: '2e13cb01a3282e161d3212f4970a93b20ca1a0fe', class: "tooltip-arrow", style: {
-                borderLeft: `${this.arrowSize}px solid transparent`,
-                borderRight: `${this.arrowSize}px solid transparent`,
-                borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,
-                filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), h("div", { key: '30ddbd00b928c0c734656d6309eaefbae5baf264', class: "tooltip-arrow-rect", style: {
-                position: 'relative',
-                width: `${this.arrowSize * 2}px`,
-                height: `${this.arrowSize}px`,
-                backgroundColor: 'var(--kritzel-controls-tooltip-background-color, #ffffff)',
-                bottom: `${this.arrowSize * 2}px`,
-            } })))));
-    }
-    get el() { return getElement(this); }
-};
-KritzelTooltip.style = kritzelTooltipCss;
-
-const kritzelUtilityPanelCss = ":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:rgb(226, 226, 226);width:fit-content;user-select:none}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;outline:none;background:none;cursor:pointer;color:#333333;-webkit-tap-highlight-color:transparent}.utility-separator{width:1px;height:16px;background-color:hsl(0, 0%, 0%, 4.3%)}";
-
-const KritzelUtilityPanel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.undo = createEvent(this, "undo");
-        this.redo = createEvent(this, "redo");
-        this.delete = createEvent(this, "delete");
-    }
-    handleUndo(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.undo.emit();
-        }
-    }
-    handleRedo(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.redo.emit();
-    }
-    render() {
-        return (h(Host, { key: '496ed78323c9899ad363e7f7732a1464d99e1b3b' }, h("button", { key: '7b6b9cd238a8d254f032d5752f184d567e9a3096', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '8ac19f36c6b82f7cc4a0249e60cf429f75c09218', name: "undo" })), h("button", { key: '1164727510a968356042507c1e302b85a135baf8', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '1c6cc414d5841a06853f99316eee7a0a609d5c92', name: "redo" })), h("div", { key: 'e6f3342569b1c6b5a6b267cc215bc8e5d259e302', class: "utility-separator" }), h("button", { key: '0aa486a543df924c224f3637857cdcdb06f995ea', class: "utility-button" }, h("kritzel-icon", { key: '9ee324e03f5df5297916549743539f7f19950768', name: "delete", onClick: () => this.delete.emit() }))));
-    }
-};
-KritzelUtilityPanel.style = kritzelUtilityPanelCss;
-
-export { KritzelBrushStyle as kritzel_brush_style, 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, KritzelStrokeSize as kritzel_stroke_size, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel };
-//# sourceMappingURL=kritzel-brush-style.kritzel-color.kritzel-color-palette.kritzel-context-menu.kritzel-control-brush-config.kritzel-control-text-config.kritzel-controls.kritzel-cursor-trail.kritzel-dropdown.kritzel-editor.kritzel-engine.kritzel-font.kritzel-font-family.kritzel-font-size.kritzel-icon.kritzel-stroke-size.kritzel-tooltip.kritzel-utility-panel.entry.js.map
-
-//# sourceMappingURL=kritzel-brush-style_18.entry.js.map