kritzel-stencil 0.0.157 → 0.0.158

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

@@ -1,15 +1,865 @@
-import { e as getElement, r as registerInstance, a as createEvent, h, d as Host } from './index-DniO_INI.js';
-import { K as KritzelMouseButton } from './event-button.enum-D8W6LE-c.js';
-import { e as commonjsGlobal, g as getDefaultExportFromCjs, f as KritzelToolRegistry, h as KritzelBaseObject, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, i as KritzelEventHelper, j as KritzelBaseTool, d as KritzelKeyboardHelper } from './text-tool.class-C0GbC5zQ.js';
-import { e as KritzelBaseHandler, c as KritzelSelectionTool, f as KritzelSelectionBox, g as KritzelSelectionGroup, b as KritzelImageTool, a as KritzelEraserTool, K as KritzelImage } from './default-text-tool.config-DKpRP4XR.js';
-import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN } from './engine.constants-DsjjAmnl.js';
-import { K as KritzelContextMenu } from './kritzel-context-menu-BYgOEy-i.js';
-import { O as ObjectHelper } from './object.helper-B0kd2rUI.js';
-import { D as Doc, a as DEFAULT_SYNC_CONFIG, U as UndoManager, K as KritzelAppStateMap } from './sync-config.interface-lKfyG1EN.js';
-import { K as KritzelWorkspace } from './workspace.class-n789Y3S-.js';
-import { K as KritzelDevicesHelper } from './devices.helper-l10It7Nm.js';
-
-var lodash$2 = {exports: {}};
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-SGde3HXB.js';
+import { T as KritzelDevicesHelper, G as KritzelBrushTool, L as KritzelTextTool, U as KritzelMouseButton, M as KritzelSelectionTool, R as DEFAULT_BRUSH_CONFIG, I as KritzelEraserTool, S as DEFAULT_TEXT_CONFIG, J as KritzelImageTool, Q as KritzelWorkspace, V as KritzelKeyboardHelper, W as KritzelBaseHandler, X as KritzelToolRegistry, Y as KritzelSelectionBox, Z as KritzelSelectionGroup, _ as KritzelBaseObject, F as KritzelImage, K as KritzelText, E as KritzelPath, $ as Doc, a0 as DEFAULT_SYNC_CONFIG, a1 as UndoManager, P as KritzelAppStateMap, a2 as ObjectHelper, a3 as KritzelEventHelper, a4 as KritzelBaseTool } from './default-text-tool.config-2YFQA3SF.js';
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+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);
+    }
+    value;
+    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: '000e54c604c8ceca2c44365e95ec1f5bfb1b729a' }, h("div", { key: '77b2abeae70e4a80714e1364eb4e11e67f16d066', class: "checkerboard-bg", style: {
+                width: `${this.size}px`,
+                height: `${this.size}px`,
+                borderRadius: '50%',
+                display: 'inline-block',
+                position: 'relative',
+            } }, h("div", { key: 'df71720cf51d845a36598499adb900a30770c503', 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, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";
+
+const KritzelColorPalette = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.colorChange = createEvent(this, "colorChange");
+    }
+    colors = [];
+    selectedColor = null;
+    isExpanded = false;
+    isOpaque = false;
+    colorChange;
+    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: 'd533725a8ab2019ae963959727283fbbf833c56a' }, h("div", { key: '7fb50c16d79e9b7330100b0f4e116f8f07b20827', class: {
+                'color-grid': true,
+                'expanded': this.isExpanded,
+            }, style: {
+                height: expandedHeight,
+            } }, displayedColors.map(color => (h("div", { tabIndex: 0, 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 #ebebeb);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.close = createEvent(this, "close");
+    }
+    get host() { return getElement(this); }
+    items;
+    onItemsChanged() {
+        this.updateMenuItems();
+    }
+    objects;
+    actionSelected;
+    close;
+    processedItems = [];
+    handleOutsideClick(event) {
+        const path = event.composedPath();
+        if (!path.includes(this.host)) {
+            this.close.emit();
+        }
+    }
+    componentWillLoad() {
+        this.updateMenuItems();
+    }
+    handleItemClick(item, isDisabled) {
+        if (!isDisabled) {
+            this.actionSelected.emit(item);
+        }
+    }
+    async updateMenuItems() {
+        const processed = [];
+        for (const item of this.items) {
+            const isVisible = await this.evaluateProperty(item.visible, true);
+            if (isVisible) {
+                const isDisabled = await this.evaluateProperty(item.disabled, false);
+                processed.push({ item, isDisabled });
+            }
+        }
+        this.processedItems = processed;
+    }
+    async evaluateProperty(value, defaultValue) {
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        if (typeof value === 'function') {
+            return await Promise.resolve(value(null, this.objects));
+        }
+        return defaultValue;
+    }
+    render() {
+        return (h(Host, { key: '45b9652285f9c3fe7568cbe222667d23c151622f' }, h("div", { key: '9aecc01027f297fa4d991780efaaf51b8d4542dc', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index) => (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)))))));
+    }
+    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");
+    }
+    tool;
+    handleToolChange(newTool) {
+        this.palette = newTool.palettes[newTool.type];
+    }
+    isExpanded = false;
+    toolChange;
+    palette = [];
+    componentWillLoad() {
+        this.palette = this.tool.palettes[this.tool.type];
+    }
+    handleToggleExpand() {
+        this.isExpanded = !this.isExpanded;
+    }
+    handleTypeChange(event) {
+        this.palette = this.tool.palettes[event.detail];
+        this.tool.type = event.detail;
+        this.tool.color = this.palette[0];
+        this.toolChange.emit(this.tool);
+    }
+    handleColorChange(event) {
+        this.tool.color = event.detail;
+        this.toolChange.emit(this.tool);
+    }
+    handleSizeChange(event) {
+        this.tool.size = event.detail;
+        this.toolChange.emit(this.tool);
+    }
+    render() {
+        return (h(Host, { key: '4b060826312e6d5a2117f5ba9522553af9b02d6f' }, h("div", { key: '0975a250184d5bb2d38cc60263bd718157230d8c', style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: this.isExpanded ? 'flex-start' : 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                gap: '8px',
+            } }, h("kritzel-color-palette", { key: 'df84a6fdda01bc7bf3aff42e3b88c4bd9dca500f', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("button", { key: 'e43c19612807fc4f9cd1bf04f4fb79a048cfd62b', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '915cce6c4744ad175f3836c946330882de840880', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-stroke-size", { key: 'c07eebae3ba1785e2644c6b5a22d23f76be950fb', 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");
+    }
+    tool;
+    isExpanded = false;
+    toolChange;
+    handleToggleExpand() {
+        this.isExpanded = !this.isExpanded;
+    }
+    handleFamilyChange(event) {
+        this.tool.fontFamily = event.detail;
+        this.toolChange.emit(this.tool);
+    }
+    handleColorChange(event) {
+        this.tool.fontColor = event.detail;
+        this.toolChange.emit(this.tool);
+    }
+    handleSizeChange(event) {
+        this.tool.fontSize = event.detail;
+        this.toolChange.emit(this.tool);
+    }
+    render() {
+        return (h(Host, { key: '82e611092700f057bd36823e7f7503fe7a0423ed' }, h("div", { key: '37ed39adeeeb58981a917918cd185e96d589e973', style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                gap: '8px',
+            } }, h("kritzel-font-family", { key: 'cd8afc5c4a1eee087610cd3d5a6c05210cfda6b3', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '085f1bba060bde27a7b64dc5477bb51305b76235', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '3ff8fec207120e67f43315c6dace72fc2f6bd0f1', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '2e29d01a6b5c0e4a8ec347e63b6a2698c282db40', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: 'c972068f1251d66e756b8de72fbdd1b6002d1daa', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+    }
+};
+KritzelControlTextConfig.style = kritzelControlTextConfigCss;
+
+const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-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;border-radius:50%}.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, #ebebeb)}.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, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:10001}";
+
+const KritzelControls = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isControlsReady = createEvent(this, "isControlsReady");
+    }
+    get host() { return getElement(this); }
+    controls = [];
+    activeControl = null;
+    isUtilityPanelVisible = true;
+    undoState = null;
+    isControlsReady;
+    firstConfig = null;
+    isTooltipVisible = false;
+    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    handleDocumentClick(event) {
+        const element = event.target;
+        if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
+            return;
+        }
+        this.isTooltipVisible = false;
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeTooltip();
+            this.kritzelEngine?.enable();
+        }
+    }
+    async handleActiveToolChange(event) {
+        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
+    }
+    async closeTooltip() {
+        this.isTooltipVisible = false;
+    }
+    kritzelEngine = null;
+    tooltipRef = null;
+    get activeToolAsTextTool() {
+        return this.activeControl?.tool;
+    }
+    get activeToolAsBrushTool() {
+        return this.activeControl?.tool;
+    }
+    async componentWillLoad() {
+        await this.initializeEngine();
+        await this.initializeTools();
+        this.isControlsReady.emit();
+    }
+    async initializeEngine() {
+        await customElements.whenDefined('kritzel-engine');
+        this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
+        if (!this.kritzelEngine) {
+            throw new Error('kritzel-engine not found in parent element.');
+        }
+    }
+    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;
+        if (this.isTooltipVisible) {
+            this.kritzelEngine?.disable();
+        }
+        else {
+            this.kritzelEngine?.enable();
+        }
+        setTimeout(() => {
+            this.tooltipRef?.focusContent();
+        }, 100);
+    }
+    async handleToolChange(event) {
+        this.activeControl = { ...this.activeControl, tool: event.detail };
+        await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
+    }
+    handleTooltipClosed() {
+        this.isTooltipVisible = false;
+        this.kritzelEngine?.enable();
+    }
+    render() {
+        const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;
+        return (h(Host, { key: '6ea9de8d541e3fc02c5ceeebf4c2c5fb4d8ad926', class: {
+                mobile: this.isTouchDevice,
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '7506b42f05c3f49aa5c936d267c5de44b3ebb9cd', style: {
+                position: 'absolute',
+                bottom: '56px',
+                left: '12px',
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '1299fce4adea3f9a529bbaf73d35e2676b6850e4', class: "kritzel-controls" }, this.controls.map(control => {
+            if (control.type === 'tool') {
+                return (h("button", { class: {
+                        'kritzel-control': true,
+                        'selected': this.activeControl?.name === control?.name,
+                    }, key: control.name, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
+            }
+            if (control.type === 'divider') {
+                return h("div", { class: "kritzel-divider", key: control.name });
+            }
+            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {
+                return (h("div", { class: "kritzel-config-container", key: control.name }, h("kritzel-tooltip", { ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => this.handleToolChange?.(event) })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => this.handleToolChange?.(event) })))), h("div", { tabIndex: 0, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
+                        if (event.key === 'Enter') {
+                            this.handleConfigClick?.(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: this.activeToolAsBrushTool?.color, size: this.activeToolAsBrushTool?.size, style: {
+                        borderRadius: '50%',
+                        border: 'none',
+                    } }))), this.activeControl.tool instanceof KritzelTextTool && (h("div", { class: "font-container" }, h("kritzel-font", { fontFamily: this.activeToolAsTextTool?.fontFamily, size: this.activeToolAsTextTool?.fontSize, color: this.activeToolAsTextTool?.fontColor }))), hasNoConfig && h("div", { class: "no-config" }))));
+            }
+        }))));
+    }
+    static get assetsDirs() { return ["../assets"]; }
+};
+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);
+    }
+    core;
+    cursorTrailPoints = [];
+    isLeftButtonDown = false;
+    handleMouseDown(ev) {
+        if (ev.pointerType === 'mouse') {
+            if (ev.button === KritzelMouseButton.Left) {
+                this.isLeftButtonDown = true;
+                this.cursorTrailPoints = [];
+            }
+        }
+        if (ev.pointerType === 'touch') {
+            if (this.core.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.core.store.state.pointers.size === 0) {
+                this.isLeftButtonDown = false;
+                this.cursorTrailPoints = [];
+            }
+        }
+    }
+    trailCleanupIntervalId;
+    TRAIL_DURATION_MS = 100;
+    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);
+        }
+    }
+    render() {
+        return (h(Host, { key: '10ef620f19d72a8a5c3a12d0d98686bc69308a30' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'd03403051e53422aaa28d6360aaa9c0391e3ef6a', 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");
+    }
+    options = [];
+    optionsChanged() {
+        this.updateInternalValue(this.internalValue, true);
+    }
+    value;
+    externalValueChanged(newValue) {
+        if (newValue !== this.internalValue) {
+            this.updateInternalValue(newValue, false);
+        }
+    }
+    width;
+    selectStyles = {};
+    internalValue;
+    hasSuffixContent = false;
+    hasPrefixContent = false;
+    valueChanged;
+    suffixSlotElement;
+    prefixSlotElement;
+    componentWillLoad() {
+        this.updateInternalValue(this.value, false);
+        this.evaluateSuffixContent();
+        this.evaluatePrefixContent();
+    }
+    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);
+            }
+        }
+    }
+    handleSelectChange = (event) => {
+        const newValue = event.target.value;
+        if (this.internalValue !== newValue) {
+            this.internalValue = newValue;
+            this.valueChanged.emit(this.internalValue);
+        }
+    };
+    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;
+            }
+        }
+    };
+    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;
+            }
+        }
+    };
+    render() {
+        const selectClasses = {
+            'custom-select': true,
+            'has-suffix-border': this.hasSuffixContent,
+            'has-prefix-border': this.hasPrefixContent,
+        };
+        return (h(Host, { key: 'f24911715685ced571843ba7be6631248c8519b7' }, h("div", { key: '520fdb74afdef8bd5228f76074e51981f44b910d', class: "dropdown-wrapper" }, h("slot", { key: 'cf6628437946b57ad0b27c066639e0b64b5a28f8', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("select", { key: '3203ccd5b9c8b84e8f41bddfcb07786e879f0035', class: selectClasses, style: { ...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: 'd0abb52e082db81860c09d2c48b7c065adb406f3', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }))));
+    }
+    static get watchers() { return {
+        "options": ["optionsChanged"],
+        "value": ["externalValueChanged"]
+    }; }
+};
+KritzelDropdown.style = kritzelDropdownCss;
+
+class KritzelIconRegistry {
+    static registry = new Map();
+    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.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>',
+    'plus': '<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-plus-icon lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>',
+    'ellipsis-vertical': '<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-ellipsis-vertical-icon lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>',
+    'x': '<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-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
+    'check': '<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-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></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-workspace-manager{position:absolute;top:var(--kritzel-editor-workspace-manager-top, 14px);left:var(--kritzel-editor-workspace-manager-left, 14px)}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}";
+
+const KritzelEditor = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isReady = createEvent(this, "isReady");
+        this.objectsChange = createEvent(this, "objectsChange");
+        this.undoStateChange = createEvent(this, "undoStateChange");
+    }
+    get host() { return getElement(this); }
+    scaleMax = ABSOLUTE_SCALE_MAX;
+    scaleMin = ABSOLUTE_SCALE_MIN;
+    controls = [
+        {
+            name: 'selection',
+            type: 'tool',
+            isDefault: true,
+            tool: KritzelSelectionTool,
+            icon: 'cursor',
+        },
+        {
+            name: 'brush',
+            type: 'tool',
+            tool: KritzelBrushTool,
+            icon: 'pen',
+            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',
+        },
+    ];
+    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() },
+    ];
+    objectContextMenuItems = [
+        { 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() },
+    ];
+    customSvgIcons = {};
+    isControlsVisible = true;
+    isUtilityPanelVisible = true;
+    syncConfig;
+    isReady;
+    objectsChange;
+    undoStateChange;
+    isEngineReady = false;
+    isControlsReady = false;
+    isWorkspaceManagerReady = false;
+    workspaces = [];
+    activeWorkspace;
+    isVirtualKeyboardOpen = false;
+    undoState = null;
+    onIsEngineReady(newValue) {
+        if (newValue && this.isControlsReady) {
+            this.checkIsReady();
+        }
+    }
+    onIsControlsReady(newValue) {
+        if (newValue && this.isEngineReady) {
+            this.checkIsReady();
+        }
+    }
+    onWorkspacesChange(newWorkspaces) {
+        if (this.activeWorkspace) {
+            const updatedActiveWorkspace = newWorkspaces.find(ws => ws.id === this.activeWorkspace.id);
+            if (updatedActiveWorkspace && updatedActiveWorkspace !== this.activeWorkspace) {
+                this.activeWorkspace = updatedActiveWorkspace;
+            }
+        }
+    }
+    onTouchStart(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+    }
+    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);
+    }
+    async createWorkspace(name, viewport) {
+        const workspace = new KritzelWorkspace(`workspace-${Date.now()}`, name, viewport);
+        return this.engineRef.createWorkspace(workspace);
+    }
+    async updateWorkspace(workspace) {
+        return this.engineRef.updateWorkspace(workspace);
+    }
+    async deleteWorkspace(workspace) {
+        return this.engineRef.deleteWorkspace(workspace);
+    }
+    async getWorkspaces() {
+        return this.engineRef.getWorkspaces();
+    }
+    async getActiveWorkspace() {
+        return this.engineRef.getActiveWorkspace();
+    }
+    engineRef;
+    controlsRef;
+    splitButtonRef;
+    componentDidLoad() {
+        this.registerCustomSvgIcons();
+        this.listenForMobileKeyboard();
+        this.setOsSpecificCssVariables();
+    }
+    async checkIsReady() {
+        await customElements.whenDefined('kritzel-editor');
+        await customElements.whenDefined('kritzel-workspace-manager');
+        await customElements.whenDefined('kritzel-controls');
+        await customElements.whenDefined('kritzel-engine');
+        if (!this.isEngineReady || !this.isControlsReady || !this.isWorkspaceManagerReady) {
+            return;
+        }
+        this.isReady.emit(this.host);
+    }
+    onEngineReady(event) {
+        this.isEngineReady = true;
+        this.activeWorkspace = event.detail.activeWorkspace;
+        this.workspaces = event.detail.workspaces;
+    }
+    handleWorkspacesChange(event) {
+        this.workspaces = event.detail;
+    }
+    handleObjectsChange(event) {
+        this.objectsChange.emit(event.detail);
+    }
+    handleUndoStateChange(event) {
+        this.undoStateChange.emit(event.detail);
+        this.undoState = event.detail;
+    }
+    registerCustomSvgIcons() {
+        for (const [name, svg] of Object.entries(this.customSvgIcons)) {
+            KritzelIconRegistry.register(name, svg);
+        }
+    }
+    listenForMobileKeyboard() {
+        KritzelKeyboardHelper.onKeyboardVisibleChanged(isOpen => {
+            this.isVirtualKeyboardOpen = isOpen;
+        });
+    }
+    setOsSpecificCssVariables() {
+        const os = KritzelDevicesHelper.detectOS();
+        switch (os) {
+            case 'iOS':
+                // iOS specific adjustments
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');
+                this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');
+                this.host.style.setProperty('--kritzel-editor-controls-transition', 'cubic-bezier(0.25, 0.1, 0.25, 1.0)');
+                this.host.style.setProperty('--kritzel-editor-controls-transform', 'translateY(200%)');
+                this.host.style.setProperty('--kritzel-editor-controls-transition-duration', '0.25s');
+                break;
+            case 'Android':
+                // Android specific adjustments
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');
+                this.host.style.setProperty('--kritzel-editor-controls-bottom', '24px');
+                break;
+            default:
+                // Default for Windows/Linux
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');
+                this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');
+                break;
+        }
+    }
+    render() {
+        return (h(Host, { key: '87983fe2d4fcdbf226851190e7529f12e7b5fdbf' }, h("kritzel-workspace-manager", { key: 'a1e0f522a7075ef4e2b5eab47dab5dc77098b402', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '18e78080712e53ead39ff07e43b7035e43a096f2', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '5ffaebbbeecbeebab050b3f990d027c6653a1940', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
+    }
+    static get watchers() { return {
+        "isEngineReady": ["onIsEngineReady"],
+        "isControlsReady": ["onIsControlsReady"],
+        "workspaces": ["onWorkspacesChange"]
+    }; }
+};
+KritzelEditor.style = kritzelEditorCss;
+
+var lodash$1 = {exports: {}};
 
 /**
  * @license
@@ -19,15 +869,15 @@ var lodash$2 = {exports: {}};
  * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
  * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
  */
-var lodash$1 = lodash$2.exports;
+var lodash = lodash$1.exports;
 
 var hasRequiredLodash;
 
 function requireLodash () {
-	if (hasRequiredLodash) return lodash$2.exports;
+	if (hasRequiredLodash) return lodash$1.exports;
 	hasRequiredLodash = 1;
 	(function (module, exports) {
-		;(function() {
+(function() {
 
 		  /** Used as a safe reference for `undefined` in pre-ES5 environments. */
 		  var undefined$1;
@@ -457,7 +1307,7 @@ function requireLodash () {
 		  var root = freeGlobal || freeSelf || Function('return this')();
 
 		  /** Detect free variable `exports`. */
-		  var freeExports = 'object' == 'object' && exports && !exports.nodeType && exports;
+		  var freeExports = exports && !exports.nodeType && exports;
 
 		  /** Detect free variable `module`. */
 		  var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
@@ -4317,7 +5167,7 @@ function requireLodash () {
 		        return symbolToString ? symbolToString.call(value) : '';
 		      }
 		      var result = (value + '');
-		      return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
+		      return (result == '0' && (1 / value) == -Infinity) ? '-0' : result;
 		    }
 
 		    /**
@@ -5472,7 +6322,7 @@ function requireLodash () {
 		      bitmask &= ~(isCurry ? WRAP_PARTIAL_RIGHT_FLAG : WRAP_PARTIAL_FLAG);
 
 		      if (!(bitmask & WRAP_CURRY_BOUND_FLAG)) {
-		        bitmask &= ~(WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG);
+		        bitmask &= -4;
 		      }
 		      var newData = [
 		        func, bitmask, thisArg, newPartials, newHolders, newPartialsRight,
@@ -5575,7 +6425,7 @@ function requireLodash () {
 		      }
 		      var length = partials ? partials.length : 0;
 		      if (!length) {
-		        bitmask &= ~(WRAP_PARTIAL_FLAG | WRAP_PARTIAL_RIGHT_FLAG);
+		        bitmask &= -97;
 		        partials = holders = undefined$1;
 		      }
 		      ary = ary === undefined$1 ? ary : nativeMax(toInteger(ary), 0);
@@ -5608,7 +6458,7 @@ function requireLodash () {
 		        : nativeMax(newData[9] - length, 0);
 
 		      if (!arity && bitmask & (WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG)) {
-		        bitmask &= ~(WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG);
+		        bitmask &= -25;
 		      }
 		      if (!bitmask || bitmask == WRAP_BIND_FLAG) {
 		        var result = createBind(func, bitmask, thisArg);
@@ -6840,7 +7690,7 @@ function requireLodash () {
 		        return value;
 		      }
 		      var result = (value + '');
-		      return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
+		      return (result == '0' && (1 / value) == -Infinity) ? '-0' : result;
 		    }
 
 		    /**
@@ -12182,7 +13032,7 @@ function requireLodash () {
 		     * // => false
 		     */
 		    function isSafeInteger(value) {
-		      return isInteger(value) && value >= -MAX_SAFE_INTEGER && value <= MAX_SAFE_INTEGER;
+		      return isInteger(value) && value >= -9007199254740991 && value <= MAX_SAFE_INTEGER;
 		    }
 
 		    /**
@@ -12449,7 +13299,7 @@ function requireLodash () {
 		        return value === 0 ? value : 0;
 		      }
 		      value = toNumber(value);
-		      if (value === INFINITY || value === -INFINITY) {
+		      if (value === INFINITY || value === -Infinity) {
 		        var sign = (value < 0 ? -1 : 1);
 		        return sign * MAX_INTEGER;
 		      }
@@ -12618,7 +13468,7 @@ function requireLodash () {
 		     */
 		    function toSafeInteger(value) {
 		      return value
-		        ? baseClamp(toInteger(value), -MAX_SAFE_INTEGER, MAX_SAFE_INTEGER)
+		        ? baseClamp(toInteger(value), -9007199254740991, MAX_SAFE_INTEGER)
 		        : (value === 0 ? value : 0);
 		    }
 
@@ -17203,21 +18053,7 @@ function requireLodash () {
 		  var _ = runInContext();
 
 		  // Some AMD build optimizers, like r.js, check for condition patterns like:
-		  if (typeof undefined$1 == 'function' && typeof undefined$1.amd == 'object' && undefined$1.amd) {
-		    // Expose Lodash on the global object to prevent errors when Lodash is
-		    // loaded by a script tag in the presence of an AMD loader.
-		    // See http://requirejs.org/docs/errors.html#mismatch for more details.
-		    // Use `_.noConflict` to remove Lodash from the global object.
-		    root._ = _;
-
-		    // Define as an anonymous module so, through path mapping, it can be
-		    // referenced as the "underscore" module.
-		    undefined$1(function() {
-		      return _;
-		    });
-		  }
-		  // Check for `exports` after `define` in case a build optimizer adds it.
-		  else if (freeModule) {
+		  if (freeModule) {
 		    // Export for Node.js.
 		    (freeModule.exports = _)._ = _;
 		    // Export for CommonJS support.
@@ -17227,13 +18063,12 @@ function requireLodash () {
 		    // Export to the global object.
 		    root._ = _;
 		  }
-		}.call(lodash$1)); 
-	} (lodash$2, lodash$2.exports));
-	return lodash$2.exports;
+		}.call(lodash)); 
+	} (lodash$1, lodash$1.exports));
+	return lodash$1.exports;
 }
 
 var lodashExports = requireLodash();
-var lodash = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
 
 class KritzelViewport {
     _core;
@@ -17655,17 +18490,7 @@ class KritzelCustomElement extends KritzelBaseObject {
         copiedObject.element = this.element.cloneNode(true);
         return copiedObject;
     }
-}
-
-/**
- * @fileoverview entry point for your component library
- *
- * This is the entry point for your component library. Use this file to export utilities,
- * constants or data structure that accompany your components.
- *
- * DO NOT use this file to export your components. Instead, use the recommended approaches
- * to consume components of this package as outlined in the `README.md`.
- */
+}
 
 class KritzelReviver {
     _core;
@@ -18110,12 +18935,9 @@ class KritzelObjectMap {
         // We'll need to undo them all, then redo as a single transaction
         const itemsToConsolidate = Math.min(this._temporaryItemsCount, stackLength);
         if (itemsToConsolidate > 1) {
-            // Store the current state before undoing
-            const undoneItems = [];
             // Undo all temporary items
             for (let i = 0; i < itemsToConsolidate; i++) {
                 if (this._undoManager.canUndo()) {
-                    undoneItems.push(this._undoManager.undoStack[this._undoManager.undoStack.length - 1]);
                     this._undoManager.undo();
                 }
             }
@@ -18129,10 +18951,6 @@ class KritzelObjectMap {
                 }
             }, 'local');
         }
-        else if (itemsToConsolidate === 1) {
-            // If only one temporary item, just change its origin to 'local'
-            // This is implicit - next transaction will be separate
-        }
         this._temporaryItemsCount = 0;
     }
     /**
@@ -18973,12 +19791,12 @@ const KritzelEngine = class {
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.isEngineReady = createEvent(this, "isEngineReady", 7);
-        this.activeToolChange = createEvent(this, "activeToolChange", 7);
-        this.workspacesChange = createEvent(this, "workspacesChange", 7);
-        this.longpress = createEvent(this, "longpress", 7);
-        this.objectsChange = createEvent(this, "objectsChange", 7);
-        this.undoStateChange = createEvent(this, "undoStateChange", 7);
+        this.isEngineReady = createEvent(this, "isEngineReady");
+        this.activeToolChange = createEvent(this, "activeToolChange");
+        this.workspacesChange = createEvent(this, "workspacesChange");
+        this.longpress = createEvent(this, "longpress");
+        this.objectsChange = createEvent(this, "objectsChange");
+        this.undoStateChange = createEvent(this, "undoStateChange");
         this.core = new KritzelCore(this);
     }
     disconnectedCallback() {
@@ -19066,7 +19884,7 @@ const KritzelEngine = class {
         else {
             console.log(`[Performance] Getting visible objects took ${elapsed.toFixed(2)}ms (${visibleObjects.length} objects visible) [${this.visibleObjectsTimings.length}/25 samples]`);
         }
-        return (h(Host, { key: '8210f2ee93acda95165acb9245fc69ccfa340a6b' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '073e3f0b5797e64581bafe7d140fca1a5645d3dc', class: "debug-panel" }, h("div", { key: '6c32986211e8363f2883118d7876ce98c5f5a914' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '87d5bbce53d8ac781ae5062dd599c8557e2628de' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: 'e0fb672776b4857381078c235219550a50878850' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '84739318fd0251e7dad233f01201f2fd68a01e15' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: 'd644122063ef0161f489a4030a5ec0bfe95fe600' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '386ec64465cfb0e3eddd210ecc4559794bd984d4' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'de605de10833d8fb1aeaef9ffdbdcd8f6934c43a' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'fdc92933249be6fa8f207ec0172dee201f9642a8' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'cd965a32b51a3a41397aaa3aa7985e62282f8f11' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '836d65c2c329d55397ee5ae94314b848a916e3b5' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '61d647c9ed0a0336c9eaae4e515efe2b8e8fca5e' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '354b8d4abe6ea7a7c1ef9e5976838c4468fc9ba6' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: 'cda592b5096e56f4d03cb6350b69620b64498c2f' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '6b4a1802bf89b241e90b3865ed8b1eba64d144ef' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '7b6512f8ad712b282b5a01626dc20d609fd1066a' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '72412f9519df9c9c68f5ec1c7191c5ffa15f3073' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '2e6b4e6a58787990420760402e424ee23d7760fa' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'ffd4be755e80b261a4156f42ab8f96adceec9545' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '3a7eba8d3808bbbb93e6e970581004ae27a3a586' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '0f9691871b66ea22e61cf478f01140c1383abe10' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'b93fd9f867dfd40ca9155f1a22f1db3c94ceb1f6' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '1017d4f7a628afee8a35b21d56de2d2787b1dd2a' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '021173f70fbed787302d93eb712c38a4dea7d328' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: 'fda08b7e5cb8f70647213af10397c4ebffd5e044', id: "origin", class: "origin", style: {
+        return (h(Host, { key: 'f59e309c44cf9d056c17df5bae809227b0da6014' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '2e22b7eb72f8eea9b7aafb5b54d82039931fb1dd', class: "debug-panel" }, h("div", { key: 'd003aff63c05fa5889ae73448c603e4461bdcb68' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '62c6c30e81f284904e159b8abbc643527cd760ee' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: 'e6e80882c725104d52fab8da9a8b1f9e52c28202' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'c88da5777f20f6b93f22cd78d624bd3673fa3fbd' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '19d293c9e537961dc0dd47ff138608eccc84b9c0' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '747c1d0b46a918aafa8da3bff094d08b321ab638' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'a0a89524a87a8a5a438077c77c53c63bfbc02358' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'b4b385704c802a78cd959998cff0bf61dad6a54c' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '8933716cedc4d45092e6810adb8fbad1a1c80af3' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '407c5a3ca4b73e13f2f11e36b20792231e512e43' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '8c81eccee3d1b13ded8cb3e47a275df585cfb276' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '8af988839b1712024a692d554021c9a6b5c95ea1' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '6b29e356911a7f6a8b7ec349323974c0160c99a9' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: 'd47293ba022498e1e91d3b44d668bb5b09120cc0' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '135e1930f98d56018367fb2653a4564b4b01ea5a' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'bccac5527134ed4eb2308c96a056bad7ad47b479' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '8a18e170e35f1a7cf889b6c9fcb44a2ea9b4b73e' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '88e357566ef307d1c274a75994de95f1682497b4' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '48cefe71eb0c4676f9a708a6857500b68f5e5e6c' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '0646a93553cb9ca21f27c876314104efec7f7b4d' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '18cf01af3a33b87f26215921f8d67cae13743f68' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '3a250d4b06489eeea5a8765675bab0f1bad358ce' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'c5f9bc07eb57de8de922efcf2646ace75fb48a7e' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '25d849d5d92785d0545fcd54d0d94bbf5713b6b4', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
             return (h("div", { key: object.id, style: {
@@ -19193,7 +20011,7 @@ const KritzelEngine = class {
                     cursor: 'grab',
                     paintOrder: 'fill',
                 } }))))));
-        })), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '45b862e1a2bc6d4eb148e80de5fad5780fd4d6f1', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+        })), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'f4b97e66c853c2f81ca64e9c7726d83259aa01ea', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -19204,7 +20022,7 @@ const KritzelEngine = class {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '4200e8b16034a8ff18f1deedae1aa19789aed94a', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'f277db501d71eead62de569c1955acf0c9a4f386', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
@@ -19214,5 +20032,920 @@ const KritzelEngine = class {
 };
 KritzelEngine.style = kritzelEngineCss;
 
-export { KritzelEngine as kritzel_engine };
-//# sourceMappingURL=kritzel-engine.entry.esm.js.map
+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);
+    }
+    fontFamily = 'Arial, sans-serif';
+    size = 24;
+    color = '#000000';
+    render() {
+        return (h(Host, { key: '0a6f1d1326e9dde84a4122d79f75dc1c75ffe0fb' }, h("div", { key: '88a342d01c4150cd4fc5dacca23f7b9904edca52', 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");
+    }
+    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' },
+    ];
+    selectedFontFamily;
+    fontFamilyChange;
+    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;
+            }
+        }
+    }
+    handleDropdownValueChange = (event) => {
+        this.fontFamilyChange.emit(event.detail);
+    };
+    render() {
+        const dropdownOptions = this.fontOptions.map(option => ({
+            value: option.value,
+            label: option.label,
+            style: { fontFamily: option.value },
+        }));
+        return (h(Host, { key: '27d14ddb4a57b9cd7b936047b6ea6a9251a1ab27' }, h("kritzel-dropdown", { key: '20ea042c9a907dc1ac5e16a589a8856f87389e36', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: 'f63fed16477a327aadaeb54feefe35df1780e37d', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: '13b3089606c2e83b256ed2cec6513a9911016754', 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, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}";
+
+const KritzelFontSize = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sizeChange = createEvent(this, "sizeChange");
+    }
+    sizes = [8, 10, 12, 16, 20, 24];
+    selectedSize = null;
+    fontFamily = 'Arial';
+    sizeChange;
+    handleSizeClick(size) {
+        this.selectedSize = size;
+        this.sizeChange.emit(size);
+    }
+    render() {
+        return (h(Host, { key: '9f3d851d443352f7437116cf91eff8d8de41e322' }, 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;color:var(--kritzel-icon-color, inherited)}span{display:flex;align-items:center;width:100%;height:100%;}span>svg{width:100%;height:100%}";
+
+const KritzelIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    name;
+    label;
+    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 kritzelMenuCss = ":host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin;max-height:300px}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}";
+
+const KritzelMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemSelect = createEvent(this, "itemSelect");
+        this.itemSave = createEvent(this, "itemSave");
+        this.itemCancel = createEvent(this, "itemCancel");
+        this.itemToggleChildMenu = createEvent(this, "itemToggleChildMenu");
+        this.itemCloseChildMenu = createEvent(this, "itemCloseChildMenu");
+        this.close = createEvent(this, "close");
+    }
+    get host() { return getElement(this); }
+    items;
+    parent = null;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    close;
+    selectedIndex = null;
+    async setScrollTop(scrollTop) {
+        this.host.scrollTop = scrollTop;
+        this.host.scrollTo({ top: scrollTop, behavior: 'auto' });
+    }
+    async setFocus() {
+        const firstItem = this.host.shadowRoot.querySelector('kritzel-menu-item');
+        if (firstItem) {
+            firstItem.focus();
+        }
+    }
+    get openChildMenuItem() {
+        return this.items.find(item => item.isChildMenuOpen);
+    }
+    get editingMenuItem() {
+        return this.items.find(item => item.isEditing);
+    }
+    onOverlayClick = (event) => {
+        event.stopPropagation();
+        this.itemCloseChildMenu.emit(this.openChildMenuItem);
+    };
+    handleItemSelect = (event) => {
+        event.stopPropagation();
+        this.itemSelect.emit(event.detail);
+    };
+    handleSave = (event) => {
+        event.stopPropagation();
+        this.itemSave.emit(event.detail);
+    };
+    handleCancel = (event) => {
+        event.stopPropagation();
+        this.itemCancel.emit(event.detail);
+    };
+    handleToggleChildMenu = (event) => {
+        event.stopPropagation();
+        this.itemToggleChildMenu.emit(event.detail);
+    };
+    handleCloseChildMenu = (event) => {
+        event.stopPropagation();
+        this.itemCloseChildMenu.emit(event.detail);
+    };
+    render() {
+        return (h(Host, { key: 'be122cb0ecff3227d9e69997de76a73940a61860', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'ae10bec61e5c5e1a29b444cb7378f15c6692f3b6', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+    }
+};
+KritzelMenu.style = kritzelMenuCss;
+
+const kritzelMenuItemCss = ":host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px);cursor:default}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16))}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:1px solid var(--kritzel-menu-item-input-border, #ccc);font-size:var(--kritzel-context-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}";
+
+const KritzelMenuItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemSelect = createEvent(this, "itemSelect");
+        this.itemSave = createEvent(this, "itemSave");
+        this.itemCancel = createEvent(this, "itemCancel");
+        this.itemToggleChildMenu = createEvent(this, "itemToggleChildMenu");
+        this.itemCloseChildMenu = createEvent(this, "itemCloseChildMenu");
+    }
+    get host() { return getElement(this); }
+    item;
+    onItemChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.isDirty = false;
+        }
+    }
+    parent = null;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    isDirty = false;
+    inputRef;
+    focusInput() {
+        if (this.item.isEditing && this.inputRef && !this.isDirty) {
+            this.inputRef.focus();
+            if (KritzelDevicesHelper.isIOS()) {
+                const length = this.inputRef.value.length;
+                this.inputRef.setSelectionRange(length, length);
+            }
+            else {
+                this.inputRef.select();
+            }
+        }
+    }
+    componentDidLoad() {
+        this.setDeviceSpecificStyles();
+        this.focusInput();
+    }
+    componentDidUpdate() {
+        this.focusInput();
+    }
+    setDeviceSpecificStyles = () => {
+        const isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+        if (isTouchDevice) {
+            this.host.style.setProperty('--kritzel-menu-item-overlay-background-color', 'transparent');
+            this.host.style.setProperty('--kritzel-menu-item-button-hover-background-color', 'transparent');
+        }
+    };
+    handleItemSelect = (event) => {
+        event.stopPropagation();
+        this.itemSelect.emit({ item: this.item, parent: this.parent });
+    };
+    handleInputChange = (event) => {
+        event.stopPropagation();
+        const target = event.target;
+        this.item.label = target.value;
+        this.isDirty = true;
+    };
+    handleSave = (event) => {
+        event.stopPropagation();
+        this.host.focus();
+        this.itemSave.emit(this.item);
+    };
+    handleCancel = (event) => {
+        event.stopPropagation();
+        this.host.focus();
+        this.itemCancel.emit(this.item);
+    };
+    handleMenuToggle = (event) => {
+        event.stopPropagation();
+        this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target });
+    };
+    handleMenuClose = () => {
+        this.itemCloseChildMenu.emit(this.item);
+    };
+    renderViewMode() {
+        return [
+            h("div", { class: "menu-item-content left" }, h("div", null, this.item.label)),
+            h("div", { class: "menu-item-content right" }, this.item.children &&
+                this.item.children.length > 0 && [
+                h("button", { id: "child-menu-toggle", class: "action-button", onClick: this.handleMenuToggle, disabled: this.item.isDisabled }, h("kritzel-icon", { name: "ellipsis-vertical", size: 16 })),
+                h("kritzel-portal", { anchor: this.item.childMenuAnchor, offsetY: 4, onClose: this.handleMenuClose }, h("kritzel-menu", { items: this.item.children, parent: this.item, onItemSelect: event => this.itemSelect.emit(event.detail), onItemSave: event => this.itemSave.emit(event.detail), onItemCancel: event => this.itemCancel.emit(event.detail), onClose: this.handleMenuClose })),
+            ]),
+        ];
+    }
+    renderEditMode() {
+        return [
+            h("div", { class: "menu-item-content left" }, h("input", { ref: el => (this.inputRef = el), type: "text", class: "edit-input", value: this.item.label, onInput: this.handleInputChange })),
+            h("div", { class: "menu-item-content right" }, h("div", { tabIndex: 0, class: "action-button", onClick: this.handleCancel }, h("kritzel-icon", { name: "x", size: 16 })), h("div", { tabIndex: !this.isDirty && !this.item.isNewItem ? -1 : 0, class: { 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }, onClick: this.handleSave }, h("kritzel-icon", { name: "check", size: 16 }))),
+        ];
+    }
+    render() {
+        return (h(Host, { key: '9df3acdaff753e3ed910f848c98e8ad73e2b5f5c', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+                'selected': this.item.isSelected,
+                'editing': this.item.isEditing,
+                'disabled': this.item.isDisabled,
+                'child-open': this.item.isChildMenuOpen,
+            }, onClick: this.handleItemSelect }, h("div", { key: 'bb73e5c0c3dd87efabcaa0b53d20c7c477b34aa1', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+    }
+    static get watchers() { return {
+        "item": ["onItemChange"]
+    }; }
+};
+KritzelMenuItem.style = kritzelMenuItemCss;
+
+class KritzelHTMLHelper {
+    static getNumericValueFromStyle(element, property) {
+        const value = window.getComputedStyle(element).getPropertyValue(property);
+        return parseFloat(value) || 0;
+    }
+    static getScrollableParent(element) {
+        if (!element) {
+            return window;
+        }
+        const parent = element.parentNode?.host ?? element.parentElement;
+        if (!parent || parent.tagName === 'BODY') {
+            return window;
+        }
+        const style = window.getComputedStyle(parent);
+        if (style.overflow === 'auto' || style.overflowY === 'auto' || style.overflow === 'scroll' || style.overflowY === 'scroll') {
+            return parent;
+        }
+        return this.getScrollableParent(parent);
+    }
+    static isElementInViewport(element) {
+        if (!element) {
+            return false;
+        }
+        const scrollableParent = this.getScrollableParent(element);
+        const rect = element.getBoundingClientRect();
+        if (scrollableParent === window) {
+            const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+            const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+            return rect.top >= 0 && rect.left >= 0 && rect.bottom <= viewportHeight && rect.right <= viewportWidth;
+        }
+        const parentRect = scrollableParent.getBoundingClientRect();
+        return rect.top >= parentRect.top && rect.left >= parentRect.left && rect.bottom <= parentRect.bottom && rect.right <= parentRect.right;
+    }
+    static getFocusableElements(root) {
+        if (!root)
+            return [];
+        const focusableElements = [];
+        const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
+        const isVisible = (el) => {
+            return el.offsetParent !== null;
+        };
+        const find = (element) => {
+            // Check if the element itself is focusable
+            if (element instanceof HTMLElement && element.matches(focusableSelector) && !element.hasAttribute('disabled') && isVisible(element)) {
+                focusableElements.push(element);
+            }
+            // Traverse shadow DOM
+            if (element.shadowRoot) {
+                Array.from(element.shadowRoot.children).forEach(find);
+            }
+            // Traverse slotted content
+            if (element.tagName === 'SLOT') {
+                element.assignedElements({ flatten: true }).forEach(find);
+            }
+            // Traverse light DOM children if there is no shadow root
+            if (!element.shadowRoot) {
+                Array.from(element.children).forEach(find);
+            }
+        };
+        find(root);
+        return focusableElements;
+    }
+}
+
+const KritzelPortal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close");
+    }
+    get host() { return getElement(this); }
+    anchor;
+    anchorChanged(newValue) {
+        if (newValue) {
+            this.openPortal();
+            this.calculatePosition();
+            if (this.autoFocus) {
+                this.focusFirstElement();
+            }
+        }
+        else {
+            this.closePortal();
+        }
+    }
+    offsetX;
+    offsetY;
+    autoFocus = true;
+    close;
+    handleOutsideClick(event) {
+        event.stopPropagation();
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        const target = event.target;
+        if (!this.host.contains(target)) {
+            this.close.emit();
+            this.closePortal();
+        }
+    }
+    handleKeyDown(event) {
+        event.stopPropagation();
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        if (event.key === 'Escape') {
+            this.anchor.focus();
+            this.close.emit();
+            this.closePortal();
+        }
+        if (event.key === 'Tab') {
+            this.trapFocus(event);
+        }
+        if (event.key === 'Enter') {
+            const activeElement = this.getDeepActiveElement();
+            if (activeElement?.click) {
+                event.preventDefault();
+                activeElement.click();
+            }
+        }
+    }
+    handleResize() {
+        this.calculatePosition();
+    }
+    handleWindowScroll() {
+        const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);
+        if (!isInViewport) {
+            this.anchor?.blur();
+            this.closePortal();
+            return;
+        }
+        this.calculatePosition();
+    }
+    portal;
+    id = `portal-${ObjectHelper.generateUUID()}`;
+    defaultOffset = 0;
+    minLeft = 0;
+    focusFirstElement() {
+        requestAnimationFrame(() => {
+            this.firstFocusableElement?.focus?.();
+        });
+    }
+    getDeepActiveElement() {
+        let activeEl = document.activeElement;
+        while (activeEl?.shadowRoot?.activeElement) {
+            activeEl = activeEl.shadowRoot.activeElement;
+        }
+        return activeEl;
+    }
+    trapFocus(event) {
+        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
+        if (focusableElements.length === 0)
+            return;
+        const firstFocusable = focusableElements[0];
+        const lastFocusable = focusableElements[focusableElements.length - 1];
+        const activeElement = this.getDeepActiveElement();
+        if (event.shiftKey) {
+            /* shift + tab */
+            if (activeElement === firstFocusable) {
+                lastFocusable.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            /* tab */
+            if (activeElement === lastFocusable) {
+                firstFocusable.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    get firstFocusableElement() {
+        const slotEl = this.host.shadowRoot?.querySelector('slot');
+        const firstAssigned = slotEl?.assignedElements({ flatten: true })[0];
+        if (!firstAssigned)
+            return null;
+        const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);
+        return focusable[0] ?? firstAssigned;
+    }
+    get lastAddedPortal() {
+        const portals = Array.from(document.querySelectorAll('[id^="portal-"]'));
+        return portals.length ? portals[portals.length - 1] : null;
+    }
+    calculateLeft() {
+        if (!this.anchor || !this.portal)
+            return 0;
+        const refRect = this.anchor.getBoundingClientRect();
+        const portalRect = this.portal.getBoundingClientRect();
+        const offset = this.offsetX ?? this.defaultOffset;
+        let left = refRect.left + offset;
+        const maxLeft = window.innerWidth - portalRect.width - this.minLeft;
+        if (left < this.minLeft)
+            left = this.minLeft;
+        if (left > maxLeft)
+            left = maxLeft;
+        return Math.round(left + window.scrollX);
+    }
+    calculateTop() {
+        if (!this.anchor || !this.portal)
+            return 0;
+        const refRect = this.anchor.getBoundingClientRect();
+        const portalRect = this.portal.getBoundingClientRect();
+        const offset = this.offsetY ?? this.defaultOffset;
+        let top = refRect.bottom + offset;
+        if (top + portalRect.height > window.innerHeight) {
+            top = refRect.top - portalRect.height - offset;
+        }
+        return Math.round(top + window.scrollY);
+    }
+    openPortal() {
+        this.portal = document.createElement('div');
+        this.portal.setAttribute('id', this.id);
+        this.portal.style.zIndex = '1';
+        this.portal.style.position = 'absolute';
+        this.portal.style.top = '0px';
+        this.portal.style.left = '0px';
+        this.portal.appendChild(this.host);
+        document.body.append(this.portal);
+    }
+    closePortal() {
+        const portal = document.getElementById(this.id);
+        if (!portal)
+            return;
+        document.body.removeChild(portal);
+        this.host.remove();
+    }
+    calculatePosition() {
+        if (!this.anchor || !this.portal)
+            return;
+        const top = this.calculateTop();
+        const left = this.calculateLeft();
+        this.portal.style.top = `${top}px`;
+        this.portal.style.left = `${left}px`;
+    }
+    render() {
+        return (h(Host, { key: '9c5cdf7126ff1148dd2364cce9d2524862e27d13', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '209a77246fedcea0c24882605487452ff5cc62ce' })));
+    }
+    static get watchers() { return {
+        "anchor": ["anchorChanged"]
+    }; }
+};
+
+const kritzelSplitButtonCss = ":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}";
+
+const KritzelSplitButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mainButtonClick = createEvent(this, "mainButtonClick");
+        this.itemSelect = createEvent(this, "itemSelect");
+        this.itemSave = createEvent(this, "itemSave");
+        this.itemCancel = createEvent(this, "itemCancel");
+        this.itemToggleChildMenu = createEvent(this, "itemToggleChildMenu");
+        this.itemCloseChildMenu = createEvent(this, "itemCloseChildMenu");
+        this.menuOpen = createEvent(this, "menuOpen");
+        this.menuClose = createEvent(this, "menuClose");
+    }
+    get host() { return getElement(this); }
+    buttonIcon = 'plus';
+    dropdownIcon = 'chevron-down';
+    items = [];
+    mainButtonDisabled = false;
+    menuButtonDisabled = false;
+    mainButtonClick;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    menuOpen;
+    menuClose;
+    isMenuOpen = false;
+    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    anchorElement;
+    menuScrollTop = 0;
+    splitMenuButtonRef;
+    menuRef;
+    async open() {
+        if (this.isMenuOpen)
+            return;
+        this.isMenuOpen = true;
+        this.anchorElement = this.host;
+        this.menuOpen.emit();
+    }
+    async focusMenu() {
+        if (this.menuRef) {
+            await this.menuRef.setFocus();
+        }
+    }
+    handleButtonClick = (event) => {
+        event.stopPropagation();
+        this.mainButtonClick.emit();
+    };
+    toggleMenu = (event) => {
+        event.stopPropagation();
+        if (this.isMenuOpen) {
+            this.closeMenu();
+        }
+        else {
+            this.openMenu(event);
+        }
+    };
+    openMenu = (event) => {
+        event.stopPropagation();
+        this.isMenuOpen = true;
+        this.anchorElement = this.host;
+        this.menuOpen.emit();
+        requestAnimationFrame(() => {
+            this.menuRef?.setScrollTop(this.menuScrollTop);
+        });
+    };
+    closeMenu = () => {
+        this.isMenuOpen = false;
+        this.anchorElement = null;
+        this.splitMenuButtonRef?.blur();
+        this.menuClose.emit();
+    };
+    handleItemSelect = event => {
+        this.itemSelect.emit(event.detail);
+    };
+    handleItemSave = event => {
+        this.itemSave.emit(event.detail);
+    };
+    handleItemCancel = event => {
+        this.itemCancel.emit(event.detail);
+    };
+    handleItemToggleChildMenu = event => {
+        this.itemToggleChildMenu.emit(event.detail);
+    };
+    handleItemCloseChildMenu = event => {
+        this.itemCloseChildMenu.emit(event.detail);
+    };
+    handleScroll = event => {
+        this.menuScrollTop = event.target.scrollTop;
+    };
+    render() {
+        return (h(Host, { key: '4ff7809dd62c1dd60600fda592aeac43cd9bc74c', class: { mobile: this.isTouchDevice } }, h("button", { key: 'db6485fabcffdd75a25d178aca7b653af499a90c', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: '4001a4e23ef53bec2a578310de8c8b593d7b266c', name: this.buttonIcon })), h("div", { key: '8ff86d3c01a48b06afca77dd066518efa3589cb1', class: "split-divider" }), h("button", { key: 'f1c40edbec3756a7f3681de4e8d0f1981dd312a4', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: '0ddb89976632ae7454e66504f8bab3fd5072c252', name: this.dropdownIcon })), h("kritzel-portal", { key: '64531ffd6ac847fd1a99e32aceefea9f18088992', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'f3b86cb71e5ba39e8f98e26b3669416e2cdb4802', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+    }
+};
+KritzelSplitButton.style = kritzelSplitButtonCss;
+
+const kritzelStrokeSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}";
+
+const KritzelStrokeSize = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sizeChange = createEvent(this, "sizeChange");
+    }
+    sizes = [4, 6, 8, 12, 16, 24];
+    selectedSize = null;
+    sizeChange;
+    handleSizeClick(size) {
+        this.selectedSize = size;
+        this.sizeChange.emit(size);
+    }
+    render() {
+        return (h(Host, { key: '74579e34c23725e22927afe371c1f7925903720a' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+                'size-container': true,
+                'selected': this.selectedSize === size,
+            }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));
+    }
+};
+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.tooltipClosed = createEvent(this, "tooltipClosed");
+    }
+    get host() { return getElement(this); }
+    isVisible = false;
+    anchorElement;
+    arrowSize = 8;
+    offsetY = 24;
+    tooltipClosed;
+    positionX = 0;
+    arrowOffset = '0px';
+    isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
+    handleOutsideClick(event) {
+        if (!this.isVisible)
+            return;
+        const target = event.target;
+        if (!this.host.contains(target)) {
+            this.tooltipClosed.emit();
+        }
+    }
+    handleWindowResize() {
+        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
+        this.calculateAdjustedPosition();
+    }
+    async focusContent() {
+        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+    }
+    componentDidLoad() {
+        this.focusSlottedContent();
+    }
+    componentWillLoad() {
+        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
+        this.calculateAdjustedPosition();
+    }
+    componentWillUpdate() {
+        this.calculateAdjustedPosition();
+    }
+    focusSlottedContent() {
+        const slot = this.host.shadowRoot?.querySelector('slot');
+        const assignedElements = slot?.assignedElements() || [];
+        if (assignedElements.length > 0) {
+            const firstElement = assignedElements[0];
+            firstElement.focus();
+        }
+    }
+    calculateAdjustedPosition() {
+        if (this.isVisible && this.anchorElement) {
+            const anchorRect = this.anchorElement.getBoundingClientRect();
+            const tooltipContent = this.host.shadowRoot?.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: '72a6356a43a15a7abc9a46b0d22c3c62217791e8', 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: '75f5350f23ada0eee009279eddd7d25273ad3740', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: 'ad999154289e933cac1fdc13392de2aec78811a8' }), h("div", { key: '6be3f5c24d42898920c339be2cd2f3dd8a82fa80', class: "tooltip-arrow-wrapper", style: {
+                position: 'fixed',
+                left: this.arrowOffset,
+                bottom: `-${this.arrowSize * 2}px`,
+            } }, h("div", { key: '37397c6245dd6b0def23e2611d118e0c4f5860ef', 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: 'dbf009c371d46ef0a36e27771758c66e817d9b22', 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`,
+            } })))));
+    }
+};
+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;background:none;cursor:pointer;color:#333333;-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:hover,.utility-button:focus-visible{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.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");
+    }
+    undoState = null;
+    undo;
+    redo;
+    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: '47e35a4c61d2807d220888eb90e325e24b9baf90' }, h("button", { key: '4e6ec69fc83242a9c1340a31351da1cccd90b1ba', class: "utility-button", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '57bf4920ff9f0b2de8b0c1625dd844bba0c7f66d', name: "undo" })), h("button", { key: '759b9d13a679455fccd00e3d8c84e51b184659df', class: "utility-button", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: 'f3650d9dcf0c09086ec707443deb6055f7a709ec', name: "redo" })), h("div", { key: 'f414bc1d4be24a1f48d77911db4b9064c898ed8d', class: "utility-separator" }), h("button", { key: 'f542539422b6040bc7b90ceccad075e8f7150a4e', class: "utility-button" }, h("kritzel-icon", { key: 'da8e3cfe848384c3bb984b34d7ad9a6c9c1feba8', name: "delete", onClick: () => this.delete.emit() }))));
+    }
+};
+KritzelUtilityPanel.style = kritzelUtilityPanelCss;
+
+const kritzelWorkspaceManagerCss = ":host{display:flex;flex-direction:column;z-index:1}";
+
+const KritzelWorkspaceManager = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isWorkspaceManagerReady = createEvent(this, "isWorkspaceManagerReady");
+        this.workspaceChange = createEvent(this, "workspaceChange");
+    }
+    get host() { return getElement(this); }
+    activeWorkspace;
+    workspaces = [];
+    isWorkspaceManagerReady;
+    workspaceChange;
+    childMenuAnchor = null;
+    openChildMenuItem = null;
+    newWorkspace = null;
+    editingItemId = null;
+    handleWheel(event) {
+        if (event.ctrlKey) {
+            event.preventDefault();
+        }
+    }
+    kritzelEngineRef = null;
+    splitButtonRef;
+    get sortedWorkspaces() {
+        return [this.newWorkspace, ...this.workspaces].filter(ws => ws != null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+    }
+    async componentWillLoad() {
+        await this.initializeEngine();
+        this.isWorkspaceManagerReady.emit();
+    }
+    async initializeEngine() {
+        await customElements.whenDefined('kritzel-engine');
+        this.kritzelEngineRef = this.host.parentElement.querySelector('kritzel-engine');
+        if (!this.kritzelEngineRef) {
+            throw new Error('kritzel-engine not found in parent element.');
+        }
+    }
+    async select(item, parent) {
+        if (this.editingItemId) {
+            return;
+        }
+        if (item.action) {
+            item.action(item, parent);
+            return;
+        }
+        this.workspaceChange.emit(item.value);
+    }
+    async add() {
+        await this.splitButtonRef.open();
+        this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
+        this.editingItemId = this.newWorkspace.id;
+    }
+    edit(item) {
+        this.openChildMenuItem = null;
+        this.childMenuAnchor = null;
+        requestAnimationFrame(() => {
+            this.editingItemId = item.id;
+        });
+    }
+    async save(item) {
+        if (this.newWorkspace) {
+            this.newWorkspace.name = item.label;
+            await this.kritzelEngineRef.createWorkspace(this.newWorkspace);
+            this.workspaceChange.emit(this.newWorkspace);
+        }
+        else {
+            const workspace = item.value;
+            workspace.name = item.label;
+            await this.kritzelEngineRef.updateWorkspace(workspace);
+        }
+        this.editingItemId = null;
+        this.newWorkspace = null;
+    }
+    cancel() {
+        this.newWorkspace = null;
+        this.editingItemId = null;
+    }
+    async delete(item) {
+        this.openChildMenuItem = null;
+        this.childMenuAnchor = null;
+        await this.kritzelEngineRef.deleteWorkspace(item.value);
+        if (item.value.id === this.activeWorkspace?.id) {
+            this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id !== item.value.id) || null;
+            this.workspaceChange.emit(this.activeWorkspace);
+        }
+        await this.splitButtonRef.focusMenu();
+    }
+    toggleChildMenu(item, anchor) {
+        this.openChildMenuItem = item;
+        this.childMenuAnchor = anchor;
+    }
+    closeChildMenu() {
+        this.openChildMenuItem = null;
+        this.childMenuAnchor = null;
+    }
+    handleMenuOpen() {
+        this.kritzelEngineRef.disable();
+    }
+    handleMenuClose() {
+        this.cancel();
+        this.closeChildMenu();
+        this.kritzelEngineRef.enable();
+    }
+    render() {
+        const menuItems = this.sortedWorkspaces
+            .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
+            .filter(ws => ws !== null)
+            .map(ws => {
+            return {
+                id: ws.id,
+                label: ws.name,
+                value: ws,
+                isEditing: this.editingItemId === ws.id,
+                isSelected: this.activeWorkspace?.id === ws.id,
+                isNewItem: this.newWorkspace?.id === ws.id,
+                isChildMenuOpen: this.openChildMenuItem?.id === ws.id,
+                childMenuAnchor: this.openChildMenuItem?.id === ws.id ? this.childMenuAnchor : null,
+                children: [
+                    {
+                        id: `${ws.id}-rename`,
+                        label: 'Rename',
+                        value: 'rename',
+                        action: (_item, parent) => this.edit(parent),
+                    },
+                    {
+                        id: `${ws.id}-delete`,
+                        label: 'Delete',
+                        value: 'delete',
+                        isDisabled: this.sortedWorkspaces.length <= 1,
+                        action: (_item, parent) => this.delete(parent),
+                    },
+                ],
+            };
+        });
+        return (h(Host, null, h("kritzel-split-button", { ref: el => (this.splitButtonRef = el), items: menuItems, mainButtonDisabled: this.editingItemId != null, onMainButtonClick: () => this.add(), onItemSelect: event => this.select(event.detail.item, event.detail.parent), onItemToggleChildMenu: event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor), onItemSave: event => this.save(event.detail), onItemCancel: () => this.cancel(), onItemCloseChildMenu: () => this.closeChildMenu(), onMenuOpen: () => this.handleMenuOpen(), onMenuClose: () => this.handleMenuClose() })));
+    }
+};
+KritzelWorkspaceManager.style = kritzelWorkspaceManagerCss;
+
+export { KritzelColor as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControlBrushConfig as kritzel_control_brush_config, KritzelControlTextConfig as kritzel_control_text_config, KritzelControls as kritzel_controls, KritzelCursorTrail as kritzel_cursor_trail, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelPortal as kritzel_portal, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel, KritzelWorkspaceManager as kritzel_workspace_manager };
+//# sourceMappingURL=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-menu.kritzel-menu-item.kritzel-portal.kritzel-split-button.kritzel-stroke-size.kritzel-tooltip.kritzel-utility-panel.kritzel-workspace-manager.entry.js.map