kritzel-stencil 0.0.126 → 0.0.127

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

@@ -0,0 +1,2346 @@
+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-D37FADaF.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: '8f8bb6c8c710bf6f3731b2be82c0857dd13913f1' }, h("div", { key: 'd28526ebcb418130ae8f608ea51c6c8dccffb906', class: "checkerboard-bg", style: {
+                width: `${this.size}px`,
+                height: `${this.size}px`,
+                borderRadius: '50%',
+                display: 'inline-block',
+                position: 'relative',
+            } }, h("div", { key: 'ec6a886f152dd4db4d4a3f86991f3b065ece1b45', 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: 'bae0e5b2c6444f4a447dbcb13bfd427b4f25ddb6' }, h("div", { key: '3020fe3b1eef1cafb8e1720716219464d11c0594', 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: 'cc1a338a7bf0d32764c2737f4f32774ccb22370a' }, h("div", { key: '4a83b9366332e42b506c3c876c00d77498a2b8b5', 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: 'c200146a90a3dd72241e098eff555312fd3125a9' }, h("div", { key: '886492ec4c5e15954166c4a7569ba832d0e6eff8', style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                gap: '8px',
+            } }, h("kritzel-brush-style", { key: '64e205189fbd740c01d4fd94c5098edae574d69b', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: '4b2d0fbf4d485350223dbc27601e78ab37be8df5', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '35262e8456901d10c84437e578317287282cf690', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '4f519179f419a3e3567d2db39d0d8f9f30d5a6a1', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '05f05946c3ebd2707f1c41c236a2efca47cedbec', 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: '1c8463a1f6b7bcf81f3b58fc0064330c50d6ada9' }, h("div", { key: '69825e6c9be473dda3597c86d51dffff9a6418fd', style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                gap: '8px',
+            } }, h("kritzel-font-family", { key: '56c947950e32989782512a2b00e3be0aaa12d77b', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '83fdb5908340adc032a7abae9b4b678697e0cff8', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '739c175fbc3c0c5c342f2983d0e47323bc5b56f4', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '98251da71574b3487bf6ee46f7e4e95d133e1eea', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '95c88611a6631a4db5d200aac57e7eeef2c195b8', 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: 'dfb17219cf1d27d86148bc918b8303d74244700c', class: {
+                mobile: this.isTouchDevice,
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'a5eb7c6b59a193ba0bdde53812882c355a7658d4', 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: 'b51e49664bf6330f22fb07ef64116459ec3832b3', 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: '2bd830d9a7f97a9a7e96a5b6a40535fdaefb904d' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '3da6a2e65030721cbdb04fba78d15776cb8f281c', 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.bringToFront() },
+            { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },
+        ];
+        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: 'ddfb1861cc7fe2acda822b9389c3a049fe626deb' }, h("kritzel-engine", { key: 'ccbf2c636bdf63630ac06e1e8d3239c79bb7e774', 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: 'a0111b00ecbcb18c615c7f12f005f0edfe363af8', 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 = Math.max(...this.allObjects.map(obj => obj.zIndex)) + 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 = Math.min(...this.allObjects.map(obj => obj.zIndex)) - 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 bringToFront(object) {
+        this.store.bringToFront(object);
+    }
+    async sendToBack(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);
+    }
+    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, _4;
+        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: '9662d9be6c5537340fe8416a5f74f3dec995fc91' }, h("div", { key: '4f42e6cf0ee0b77c672e7485a53ffed7a75961fa', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '75bb2ea8e945c4d65d86a90f4f6da95ccd4425d1' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), h("div", { key: '69558794d6b88fece7c8af2be3cf5930174b8fd6' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), h("div", { key: 'd2e933f23eef9ee56137906f56c5cbadbaadaf23' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), h("div", { key: 'c085fee84706c0be930d1e659dedb8a2728130dd' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), h("div", { key: 'eeef8323ae0bc5047f038f4794aee4ed718d1183' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '20172772854ab20ee9dd9b4bf9b969627c649e61' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), h("div", { key: '256646b05f63bc6949578acb1739f57a581c86e4' }, "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: 'd9e17c3c89a135fcbaf1cdfaa8f8123186c74626' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: '7750bc5b2763e6351eb37f51b54bca965f7e0823' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: '59ca295c0ab33fe6d82ccd1072fe64672c9f21b7' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: 'b413ddf6bbc8e7e758abd811f3e66a71a4961a04' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: 'c941fe71c6d3a124bcb02ff6d1efa33d943646aa' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: 'f060e324991d0885770cfbedf8332047a3ede890' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'ec3f85f2cc61bb55210cfa952ce8b1af66c4caf4' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '0376abe30d6456038a98383a82eff2ec955fd69a' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '546d868377d654400e9013f8df54389e08a2c02d' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'b233911cad585a5318dd0a83258d477dd3e286f7' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '4fd9f89a72c49bb681695030245d4622ffe281b5' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'e7c3b3485b945fff20dd0c6601727b52478a283b' }, "PointerX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.pointerX), h("div", { key: '0e940ac9609f23f1e4855206dda52c52eec14fe5' }, "PointerY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.pointerY), h("div", { key: '60475be8341d3a8e28416d91a38d188bce30d15b' }, "SelectedObjects: ", ((_p = this.store.state.selectionGroup) === null || _p === void 0 ? void 0 : _p.objects.length) || 0)), h("div", { key: '16608718942fd141d17a5d398045e178fa37eacf', id: "origin", class: "origin", style: {
+                transform: `matrix(${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, 0, 0, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateX}, ${(_t = this.store.state) === null || _t === void 0 ? void 0 : _t.translateY})`,
+            } }, (_u = this.store.objects) === null || _u === void 0 ? void 0 :
+            _u.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: 'd945e3fae758a66d8d17875203561602446acf9a', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+                height: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.height.toString(),
+                width: (_w = this.store.state.currentPath) === null || _w === void 0 ? void 0 : _w.width.toString(),
+                left: '0',
+                top: '0',
+                zIndex: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.zIndex.toString(),
+                position: 'absolute',
+                transform: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.transformationMatrix,
+                transformOrigin: 'top left',
+                overflow: 'visible',
+            }, viewBox: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.viewBox }, h("path", { key: '111070848aa210dabf4150a9e69326c7a32a2bb7', d: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.d, fill: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.fill, stroke: (_2 = this.store.state.currentPath) === null || _2 === void 0 ? void 0 : _2.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '13f61253ab96655d6816bfba60b7c1c8e0697533', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: ((_3 = this.store.state.selectionGroup) === null || _3 === void 0 ? void 0 : _3.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();
+            } })), ((_4 = this.store.state) === null || _4 === void 0 ? void 0 : _4.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: 'bcbedb0fd45a7b87e82e78326bfdc0d1a872c1aa', 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: 'e4123d3701933d5de1d5c063f69f6823db849baf' }, h("div", { key: '81dde2ff263a8bf110b9c0f0be4a5adc5852fa2f', 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: 'b56a2dcc19e11c8cf84449d94f43fd93a882ac4e' }, h("kritzel-dropdown", { key: '999c75650ce8d83c5b52eda5c96ce0b040e67475', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: 'defbe8238c3037a5128f59f33a51f6ec9fd08dc3', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: '7dd5a7256dde1d38b495f67bdec2d605fde0a1ec', 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: 'b741185f77e6e6f9fa7a5023d90936d1ebb48d30' }, 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: 'b481b62184551bc776042f58d2f27beba837f61d' }, 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: 'aed123eda0750df66229f0dd40eeafea39360901', 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: 'ebd77cc44aea3a3ff193717f2dae7eedb55023fd', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '70966228bbe59b894eb472704f08b340c32bbad9' }), h("div", { key: '0d82c0f5b1531b39e48b9e80045771e3dda53964', class: "tooltip-arrow-wrapper", style: {
+                position: 'fixed',
+                left: this.arrowOffset,
+                bottom: `-${this.arrowSize * 2}px`,
+            } }, h("div", { key: '24b911e6fe5b5b9a1009d28c797c4c3d00f6f7c7', 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: '2a15c5e8614e57a763aa3d8d4f8d4138146ac0a7', 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: 'f381fac2cb032ca19c6945ef4f39673ea0bd0cc5' }, h("button", { key: '1f7200672970baf1d0cfcaa116fa3f8f9a39832a', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '755d9201d80d8db086f07b38e90a01a06e980b50', name: "undo" })), h("button", { key: '06e4d5c2956f23245c3d48f21c15d54e8bef8119', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '13eb6b31c45b67ac399fc7c84b941ddce04c5c86', name: "redo" })), h("div", { key: '7f03a576a37649db679b93604c2654d29cc81da4', class: "utility-separator" }), h("button", { key: '0c40613e9f6a049cec872d71e9f948d685ec1dbe', class: "utility-button" }, h("kritzel-icon", { key: '8cba73bcb02ef8b7c182ba2fd16d98d6855f1c1b', 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