kritzel-stencil 0.0.171 → 0.1.0

package/dist/esm/kritzel-color_22.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-SGde3HXB.js';
-import { Z as KritzelDevicesHelper, J as KritzelBrushTool, P as KritzelTextTool, _ as KritzelMouseButton, $ as KritzelBaseObject, a0 as Schema, a1 as schema, a2 as addListNodes, a3 as EditorView, a4 as EditorState, a5 as keymap, a6 as TextSelection, a7 as KritzelKeyboardHelper, a8 as KritzelToolRegistry, a9 as KritzelGeometryHelper, aa as baseKeymap, ab as KritzelBaseTool, ac as KritzelEventHelper, R as KritzelSelectionTool, W as DEFAULT_BRUSH_CONFIG, Y as DEFAULT_LINE_TOOL_CONFIG, L as KritzelLineTool, M as KritzelEraserTool, X as DEFAULT_TEXT_CONFIG, N as KritzelImageTool, U as KritzelWorkspace, ad as KritzelIconRegistry, ae as KritzelBaseHandler, af as KritzelSelectionBox, ag as KritzelSelectionGroup, I as KritzelGroup, F as KritzelImage, K as KritzelText, G as KritzelLine, E as KritzelPath, ah as Doc, ai as DEFAULT_SYNC_CONFIG, aj as UndoManager, Q as KritzelCursorHelper, T as KritzelAppStateMap, V as KritzelAnchorManager, ak as ObjectHelper, al as KritzelClassHelper } from './default-line-tool.config-CuBm2vpW.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-BqhmuUH2.js';
+import { Z as KritzelDevicesHelper, J as KritzelBrushTool, P as KritzelTextTool, _ as KritzelMouseButton, $ as KritzelBaseObject, a0 as Schema, a1 as schema, a2 as addListNodes, a3 as EditorView, a4 as EditorState, a5 as keymap, a6 as TextSelection, a7 as KritzelKeyboardHelper, a8 as KritzelToolRegistry, a9 as KritzelGeometryHelper, aa as baseKeymap, ab as KritzelBaseTool, ac as KritzelEventHelper, R as KritzelSelectionTool, W as DEFAULT_BRUSH_CONFIG, Y as DEFAULT_LINE_TOOL_CONFIG, L as KritzelLineTool, M as KritzelEraserTool, X as DEFAULT_TEXT_CONFIG, N as KritzelImageTool, U as KritzelWorkspace, ad as KritzelIconRegistry, ae as KritzelBaseHandler, af as KritzelSelectionBox, ag as KritzelSelectionGroup, I as KritzelGroup, F as KritzelImage, K as KritzelText, G as KritzelLine, E as KritzelPath, ah as Doc, ai as DEFAULT_SYNC_CONFIG, aj as UndoManager, Q as KritzelCursorHelper, T as KritzelAppStateMap, V as KritzelAnchorManager, ak as ObjectHelper, al as KritzelClassHelper } from './default-line-tool.config-CD5sTKH-.js';
 
 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 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) {
@@ -37,13 +37,13 @@ const KritzelColor = class {
     }
     render() {
         const isColorVeryLight = this.isLightColor(this.value);
-        return (h(Host, { key: 'bd867d9ff750588e41fb364b2192a6c2c5832e59' }, h("div", { key: '858e97d057d7ba19869cbacc4e9f31ae6c64defa', class: "checkerboard-bg", style: {
+        return (h(Host, { key: 'edf5d94f476d72d0be74886b362fd37db789c517' }, h("div", { key: 'd8af2373616b9bc6f4ddea0822d737f073563bf9', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: '0c983b133716e048f29d7e51979068fbde178abd', class: {
+            } }, h("div", { key: '6b587f7926884e7c38fe36eaef41b0c8cd213c6d', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -58,9 +58,9 @@ const KritzelColor = class {
             } }))));
     }
 };
-KritzelColor.style = kritzelColorCss;
+KritzelColor.style = kritzelColorCss();
 
-const kritzelColorPaletteCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";
+const kritzelColorPaletteCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}`;
 
 const KritzelColorPalette = class {
     constructor(hostRef) {
@@ -76,6 +76,12 @@ const KritzelColorPalette = class {
         this.selectedColor = color;
         this.colorChange.emit(color);
     }
+    handleKeyDown(event, color) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleColorClick(color);
+        }
+    }
     calculateHeight() {
         const colorsPerRow = 6;
         const rowHeight = 32;
@@ -86,7 +92,7 @@ const KritzelColorPalette = class {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: 'a237c0ebccd7fbfb6b42ce7fd5689d7282571bef' }, h("div", { key: 'dbccf2817079f6cf958fa37d097654c326d6a4ab', class: {
+        return (h(Host, { key: '83e3aa70f68e1bab337a031c2d00ac152f924fe1' }, h("div", { key: '86a6198500ea5bef3ed399fc8f7ec0275899eb79', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -94,12 +100,12 @@ const KritzelColorPalette = class {
             } }, displayedColors.map(color => (h("div", { tabIndex: 0, class: {
                 'color-container': true,
                 'selected': this.selectedColor === color,
-            }, onClick: () => this.handleColorClick(color) }, h("kritzel-color", { value: color })))))));
+            }, onClick: () => this.handleColorClick(color), onKeyDown: event => this.handleKeyDown(event, color) }, h("kritzel-color", { value: color })))))));
     }
 };
-KritzelColorPalette.style = kritzelColorPaletteCss;
+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:var(--kritzel-pointer-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)}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";
+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:var(--kritzel-pointer-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)}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}`;
 
 const VIEWPORT_PADDING = 8;
 const KritzelContextMenu = class {
@@ -188,15 +194,17 @@ const KritzelContextMenu = class {
         return defaultValue;
     }
     render() {
-        return (h(Host, { key: '96a3530caa4567d30410f49311389818bbd45f64' }, h("div", { key: '79e4229815a152720ae21069233ff344f297349b', 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)))))));
+        return (h(Host, { key: 'f57688eb3c0921c0a2d85cab7bbe9273ecf4fdab' }, h("div", { key: '8082568dd09f4ad5ef07885308d752e8c924f02e', 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"]
+        "items": [{
+                "onItemsChanged": 0
+            }]
     }; }
 };
-KritzelContextMenu.style = kritzelContextMenuCss;
+KritzelContextMenu.style = kritzelContextMenuCss();
 
-const kritzelControlBrushConfigCss = ":host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:var(--kritzel-pointer-cursor, pointer);font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}";
+const kritzelControlBrushConfigCss = () => `:host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:var(--kritzel-pointer-cursor, pointer);font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}`;
 
 const KritzelControlBrushConfig = class {
     constructor(hostRef) {
@@ -231,22 +239,24 @@ const KritzelControlBrushConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '8fe8c0564f491121c0c44c6ff4083034f92dbb67' }, h("div", { key: '3e8a69b827785976768bfc1e809126bee7c48c62', style: {
+        return (h(Host, { key: 'ce2ac77db22f52239a45b62f690d54009f2c6954' }, h("div", { key: '5f6c50853e876c3612bb5c270bccc468c2c9a726', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: this.isExpanded ? 'flex-start' : 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-color-palette", { key: 'c9056f81cf47d81fef0a0f5743000dcd6633258a', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("button", { key: '2f307264b80a732d976edeb025d509bc1164606b', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '08133ba0a23353b2bb3f87c685a7a0798b8dd16c', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-stroke-size", { key: '3de25cc80029ffdfdc173c4c79e937a7dc329743', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-color-palette", { key: 'bfa24bb8683027c37f200ad65e4e6787d7224c56', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("button", { key: '8e2c55c6d16ca3911c5f068c354bdce5a4f7e844', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '33610ada109fe5d1d9cb2da4c70a60d672e3d6cb', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-stroke-size", { key: '9b095dd9436e46dd88a3485ceb2dafa5d06d1bc4', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
-        "tool": ["handleToolChange"]
+        "tool": [{
+                "handleToolChange": 0
+            }]
     }; }
 };
-KritzelControlBrushConfig.style = kritzelControlBrushConfigCss;
+KritzelControlBrushConfig.style = kritzelControlBrushConfigCss();
 
-const kritzelControlTextConfigCss = ":host{display:block;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:var(--kritzel-pointer-cursor, pointer);font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}";
+const kritzelControlTextConfigCss = () => `:host{display:block;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:var(--kritzel-pointer-cursor, pointer);font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}`;
 
 const KritzelControlTextConfig = class {
     constructor(hostRef) {
@@ -272,19 +282,19 @@ const KritzelControlTextConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '3695b187943af25566885d63257ae3de9f405ea5' }, h("div", { key: '7bb146ae3c188478ba17f18f70fd170ce3536308', style: {
+        return (h(Host, { key: '4a0027969b183fef77c374eb114d9d30104e5ad7' }, h("div", { key: '9f49eb3a95080447b938fdfeb256fafbe5ff9ddc', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-font-family", { key: '87f4c5ac2e2a4cfea216b1b828faad231438b9ec', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '2e73aaf7da659b9e069c247cc762f68394212293', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '785b664697ba266432c535ea26e0665f8d8d657f', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'ed2517a39d254b77f45154914b3ce6a934f66c33', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '9b25c9607fa69c991e769852e3e3e378e48387bd', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-font-family", { key: '4e75cda048f8b8c04e6cb5568e7cdcde91e28112', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '05c6ce98bd700e9e9d2e676cbcf191b943a2980e', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', tabindex: "0" }, h("kritzel-icon", { key: 'ce30d48dd5ce5eefeee7702dff81ca8f96e0872d', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'a3d313bf01dafc15c8cf39a129d8c0c35741a3ca', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '954db891b80fb244083de24dc87255b1239ff913', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
 };
-KritzelControlTextConfig.style = kritzelControlTextConfigCss;
+KritzelControlTextConfig.style = kritzelControlTextConfigCss();
 
-const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}";
+const kritzelControlsCss = () => `:host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}`;
 
 const KritzelControls = class {
     constructor(hostRef) {
@@ -430,13 +440,13 @@ const KritzelControls = class {
     render() {
         const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool ||
             this.activeControl?.tool instanceof KritzelTextTool;
-        return (h(Host, { key: '92696a0ac908d498211edcbe9b2b90c81aa28a4f', class: {
+        return (h(Host, { key: 'ed5816cbeb8fe8b91e14b23bf61df4753fb0da0f', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'a75649503fa82aa173fd19c0558b4b54503ff4d6', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '7218fff9c89f525baf655eea46aec1698a28babd', 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: 'e45118f06606306309114470546c34a8b5afd8f7', class: "kritzel-controls" }, this.controls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '1dc0fa7b02a953474aae9c7822c651d5006e89e5', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
                 // Check if this control has sub-options (split-button)
                 if (control.subOptions?.length) {
@@ -482,9 +492,9 @@ const KritzelControls = class {
     }
     static get assetsDirs() { return ["../assets"]; }
 };
-KritzelControls.style = kritzelControlsCss;
+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 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) {
@@ -552,7 +562,7 @@ const KritzelCursorTrail = class {
         }
     }
     render() {
-        return (h(Host, { key: '2bbe2e331555476316c4460ff64fae7a955eee3d' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '78a354686ff624afba1a3c31df02dbefaf295d4b', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (h(Host, { key: '556238ffd7eeda2d400039333a37853ebfcca1b6' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'a3f451cc9f142f018d0025eb7a68c1bdff5fc0d9', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -573,15 +583,16 @@ const KritzelCursorTrail = class {
         })))));
     }
 };
-KritzelCursorTrail.style = kritzelCursorTrailCss;
+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:var(--kritzel-pointer-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 kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid #333333;border-radius:var(--kritzel-controls-control-border-radius, 12px);overflow:visible;height:32px;width:100%;position:relative}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-controls-control-border-radius, 12px);border:none;background-color:#fff;cursor:var(--kritzel-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-controls-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid #333333;border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid #333333;border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:#fff;border:1px solid #333333;border-radius:var(--kritzel-controls-control-border-radius, 12px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:0 -4px 12px rgba(0, 0, 0, 0.15)}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-bg, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-bg, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:#ebebeb transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
 
 const KritzelDropdown = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChanged = createEvent(this, "valueChanged");
     }
+    get el() { return getElement(this); }
     options = [];
     optionsChanged() {
         this.updateInternalValue(this.internalValue, true);
@@ -597,14 +608,33 @@ const KritzelDropdown = class {
     internalValue;
     hasSuffixContent = false;
     hasPrefixContent = false;
+    isOpen = false;
+    focusedIndex = -1;
+    openDirection = 'down';
     valueChanged;
     suffixSlotElement;
     prefixSlotElement;
+    triggerElement;
+    menuElement;
+    wrapperElement;
     componentWillLoad() {
         this.updateInternalValue(this.value, false);
         this.evaluateSuffixContent();
         this.evaluatePrefixContent();
     }
+    handleDocumentClick(event) {
+        if (this.isOpen && !this.el.contains(event.target)) {
+            this.closeMenu();
+        }
+    }
+    handleDocumentKeydown(event) {
+        if (this.isOpen && event.key === 'Escape') {
+            event.stopPropagation();
+            event.preventDefault();
+            this.closeMenu();
+            this.triggerElement?.focus();
+        }
+    }
     updateInternalValue(proposedValue, emitChange) {
         let finalValue = proposedValue;
         if (this.options && this.options.length > 0) {
@@ -623,12 +653,119 @@ const KritzelDropdown = class {
             }
         }
     }
-    handleSelectChange = (event) => {
-        const newValue = event.target.value;
-        if (this.internalValue !== newValue) {
-            this.internalValue = newValue;
+    toggleMenu = () => {
+        if (this.isOpen) {
+            this.closeMenu();
+        }
+        else {
+            this.openMenu();
+        }
+    };
+    openMenu = () => {
+        this.calculateMenuDirection();
+        this.isOpen = true;
+        const currentIndex = this.options.findIndex(opt => opt.value === this.internalValue);
+        this.focusedIndex = currentIndex >= 0 ? currentIndex : 0;
+        // Focus the menu after it opens
+        requestAnimationFrame(() => {
+            this.menuElement?.focus();
+        });
+    };
+    calculateMenuDirection = () => {
+        if (!this.wrapperElement) {
+            this.openDirection = 'down';
+            return;
+        }
+        const wrapperRect = this.wrapperElement.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - wrapperRect.bottom;
+        const spaceAbove = wrapperRect.top;
+        // Estimate menu height (max 240px or fewer based on options)
+        const estimatedOptionHeight = 36; // padding + content
+        const menuPadding = 8; // 4px top + 4px bottom
+        const estimatedMenuHeight = Math.min(240, this.options.length * estimatedOptionHeight + menuPadding);
+        // Prefer opening downward, but switch to upward if not enough space below
+        // and there's more space above
+        if (spaceBelow < estimatedMenuHeight && spaceAbove > spaceBelow) {
+            this.openDirection = 'up';
+        }
+        else {
+            this.openDirection = 'down';
+        }
+    };
+    closeMenu = () => {
+        this.isOpen = false;
+        this.focusedIndex = -1;
+        // Note: openDirection is intentionally NOT reset here to allow the close animation
+        // to play in the same direction the menu was opened
+    };
+    selectOption = (option) => {
+        if (this.internalValue !== option.value) {
+            this.internalValue = option.value;
             this.valueChanged.emit(this.internalValue);
         }
+        this.closeMenu();
+        this.triggerElement?.focus();
+    };
+    handleTriggerKeyDown = (event) => {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.openMenu();
+                break;
+        }
+    };
+    handleMenuKeyDown = (event) => {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusedIndex = Math.min(this.focusedIndex + 1, this.options.length - 1);
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusedIndex = Math.max(this.focusedIndex - 1, 0);
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.focusedIndex >= 0 && this.focusedIndex < this.options.length) {
+                    this.selectOption(this.options[this.focusedIndex]);
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusedIndex = 0;
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusedIndex = this.options.length - 1;
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'Tab':
+                this.closeMenu();
+                break;
+        }
+    };
+    scrollFocusedOptionIntoView = () => {
+        if (!this.menuElement || this.focusedIndex < 0) {
+            return;
+        }
+        // Use requestAnimationFrame to ensure the DOM has updated with the new focused class
+        requestAnimationFrame(() => {
+            const focusedOption = this.menuElement?.querySelector('.dropdown-option.is-focused');
+            if (focusedOption) {
+                focusedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        });
+    };
+    handleOptionMouseEnter = (index) => {
+        this.focusedIndex = index;
     };
     evaluateSuffixContent = () => {
         if (this.suffixSlotElement) {
@@ -637,10 +774,8 @@ const KritzelDropdown = class {
                 this.hasSuffixContent = newHasContent;
             }
         }
-        else {
-            if (this.hasSuffixContent !== false) {
-                this.hasSuffixContent = false;
-            }
+        else if (this.hasSuffixContent !== false) {
+            this.hasSuffixContent = false;
         }
     };
     evaluatePrefixContent = () => {
@@ -650,26 +785,53 @@ const KritzelDropdown = class {
                 this.hasPrefixContent = newHasContent;
             }
         }
-        else {
-            if (this.hasPrefixContent !== false) {
-                this.hasPrefixContent = false;
-            }
+        else if (this.hasPrefixContent !== false) {
+            this.hasPrefixContent = false;
         }
     };
+    getSelectedLabel() {
+        const selectedOption = this.options.find(opt => opt.value === this.internalValue);
+        return selectedOption?.label ?? '';
+    }
+    getSelectedStyle() {
+        const selectedOption = this.options.find(opt => opt.value === this.internalValue);
+        return selectedOption?.style;
+    }
     render() {
-        const selectClasses = {
-            'custom-select': true,
+        const triggerClasses = {
+            'dropdown-trigger': true,
             'has-suffix-border': this.hasSuffixContent,
             'has-prefix-border': this.hasPrefixContent,
+            'is-open': this.isOpen,
+            'open-up': this.openDirection === 'up',
         };
-        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 }))));
+        const menuClasses = {
+            'dropdown-menu': true,
+            'is-open': this.isOpen,
+            'open-up': this.openDirection === 'up',
+            'open-down': this.openDirection === 'down',
+        };
+        return (h(Host, { key: '29d076eb2ef76527c0930ab82ace0d05c896ab6c' }, h("div", { key: '1afac5cc0b7f408849670b8cb62fe0bd0f3b27f1', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '3cfcf787c3b3eedbd6bf30c7506a0a4912429672', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: 'b88120ed3e44871220e6ba61e8bef457651a2086', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '79082189066f3d0b4f5797420ec222847792fe52', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: 'a490bb6689ec1820144fe82f6833bee82e6ead0e', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '8bd7768f6fdd3c507bbca54d7d135adabe04901f', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: 'e1b854d2c93e3067181108f8d782e1393ddb615c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '3622cbf8964f4e50aa55be5209240dfd252f1d84', points: "6 9 12 15 18 9" }))))), h("slot", { key: 'b91317736904cbeee0f87058b822bd77c6b163ca', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: '0ca8690345974e9b7ad184f4c7ab7cf5367b183c', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
+            const isSelected = option.value === this.internalValue;
+            const isFocused = index === this.focusedIndex;
+            const optionClasses = {
+                'dropdown-option': true,
+                'is-selected': isSelected,
+                'is-focused': isFocused,
+            };
+            return (h("li", { class: optionClasses, role: "option", "aria-selected": isSelected ? 'true' : 'false', style: option.style, onClick: () => this.selectOption(option), onMouseEnter: () => this.handleOptionMouseEnter(index) }, option.label, isSelected && (h("span", { class: "dropdown-option-check", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" }))))));
+        })))));
     }
     static get watchers() { return {
-        "options": ["optionsChanged"],
-        "value": ["externalValueChanged"]
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "value": [{
+                "externalValueChanged": 0
+            }]
     }; }
 };
-KritzelDropdown.style = kritzelDropdownCss;
+KritzelDropdown.style = kritzelDropdownCss();
 
 var ShapeType;
 (function (ShapeType) {
@@ -1264,7 +1426,7 @@ const DEFAULT_SHAPE_CONFIG = {
 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 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) {
@@ -1520,15 +1682,21 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: '497c7c69759c966dd2132007d80c5c772258a6c9' }, h("kritzel-workspace-manager", { key: '169e10c9b338283e1be32868aa0e354e7a149749', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: 'c8cf58aa8bfc9a5d4a2e4a4499c60938b0d55758', 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: '68f2bce210dab937080618a2a4f069bf8103449f', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (h(Host, { key: 'dd67bea86f807f0ccd5905183e73713a015d6bee' }, h("kritzel-workspace-manager", { key: '557edc7e3a131d338be6df91698ba6923e7bc50e', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '98969d0f2bb5a9a365885fb4765e0c04c1394caa', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '6092f393562af07643622c07d432f6100497aaf0', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
     }
     static get watchers() { return {
-        "isEngineReady": ["onIsEngineReady"],
-        "isControlsReady": ["onIsControlsReady"],
-        "workspaces": ["onWorkspacesChange"]
+        "isEngineReady": [{
+                "onIsEngineReady": 0
+            }],
+        "isControlsReady": [{
+                "onIsControlsReady": 0
+            }],
+        "workspaces": [{
+                "onWorkspacesChange": 0
+            }]
     }; }
 };
-KritzelEditor.style = kritzelEditorCss;
+KritzelEditor.style = kritzelEditorCss();
 
 var lodash$1 = {exports: {}};
 
@@ -20589,7 +20757,7 @@ class KritzelCore {
     }
 }
 
-const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}";
+const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}`;
 
 const KritzelEngine = class {
     get host() { return getElement(this); }
@@ -20976,7 +21144,7 @@ const KritzelEngine = class {
         };
         const visibleObjects = this.core.store.state.objects.query(viewportBounds).sort((a, b) => a.zIndex - b.zIndex);
         this.core.cursorManager.applyCursor();
-        return (h(Host, { key: 'd0f13eb1d34a6edcba439a501edbaab1875112f1' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'f722474cfd43ab13e306cea908871af77015d015', class: "debug-panel" }, h("div", { key: 'efd483bc92223d78f6a0f661a1911820de83682a' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '37c213c1e3d57cb79ccb99ff65404fa3e03f07e0' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '68bcdc9e10d89a6a4284dbdc11d679f6c8bed6df' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'c653966e412a801d536bfdcf8ab79176376693a5' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: 'db83b7d58514296daa1465926867d099df6988f9' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '1f15e3edec3165920207ba8f1b2886aa72049d08' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'c4e468e3c602f1fd62d4b13de1ec39dd1302768f' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '8eae67aac27495a611ba125e029473119665bb7e' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '8b22934652db52d915cb21f48f8340ceb2fe1327' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: 'd4d1872b8e1c33f0925a2f3cfcf4bc652cc5637e' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '76fc159e2f38324248db21cab17fe76dd7add144' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'aa5a5a7c5faac899492f9c87cb9bf5cf960329cb' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '21d4d43e7fc91a187055906c9f38529407f4ec6f' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: 'b43ba7bafd3ac52f5622e7d980456e7cbf5ff0fb' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'ecf9749bf4eece2970a62230d323fc205ce62fed' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '6f9c7b7fa357f86c05aa76c02428ab0584856f3d' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '7b61ed971fd7b4a029204861b19677421c049a33' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '875ed8cdf18b46c362b6b0c331a8f9fcba6bc1e2' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'f56f27eff2c7e715528a32b4fe874da5220bc1ef' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '7831c3571031b029766b0fa16fe2b0e29e8c19b5' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'd4167e465da2f690b9d1f6d3cb8778f4a618843f' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: '00dfeba01da344a0e3c40f2f92ca539ef59d5da5' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '30948e66636501df9863caa67da468d45517a44f' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '9ee2c0bb69e9a150b7ab7c0ca9881897b5ec2a72' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '9d470ca319b0c32de7565c46b28c6483d4b9c1cb' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '4eaaf1e928e62c872b354523e55f33f01c25c5e7', id: "origin", class: "origin", style: {
+        return (h(Host, { key: 'cf63f71e5ab763750f0857595a6b2d56e99b29fd' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'cf6d5221edb666692bbed086d1fa5bb57f591442', class: "debug-panel" }, h("div", { key: 'd1e94a59352063d08412c13bee8632b468229431' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '0eeff49b2c3bd703ef3b0fa574a323822ecef8a3' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '884aaab5f8c10a21541139cbc1c824a80233c7bb' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '6633c2b83830bc5091825b9c51af2aa82fbc935e' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '905bf21fed43acbada2e5d18dd9eb33979d368a4' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: 'd2abcda891791cee5386fe065de9b781c2db2e0a' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '9f64a19ac4510a2eae4d605dfdbb9a855b001b19' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '25634969756ec8505e2b169c4f8f77fa5260932a' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '2aea36a0521a5e59154836da290e7c615e4dc36d' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '599bafe7e87b23df191849ad23f56eea0009272f' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'd5e466d0b64b0f64a808dc8f08dba21530579a49' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '6143b384caa285cd850111b3d6d3fe95f3a468db' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '5695722e2e07e024fe1b5db1be22c890fa16b7d9' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '93c2d1a6669b397637d6918055fc14c96493cc65' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '2245f5894f7460d9d31ee33125260334920c6847' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '57fd33a984b7975198d87285658ec4de2824aa34' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '257cc4badaa694f04c839ca68ee79d1b695a006b' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'c00f461af4e4b1523e7e5feccfb0abfc6d45f5b7' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: '3f1bd888dfa360153b930fc5e498ccb348879d81' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '4b33ce03143d6f96e359bc0a21697a3788fa6d3e' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'd603a0a226357378889c87d1bda5dd194388a81c' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: 'e0cb4c098e14c44c7c4d96a35f75a609a5d83144' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'd663eff93d7884aa36da56a46e06cb65f0b14c54' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: 'fe44809fc10454d605bad012300e8a46a8f180c9' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'd69d570660f6ec9d37d842f24f61e534d4f349e1' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: 'aa6674f91511007c52f7faba849dd82f206e20ed', id: "origin", class: "origin", style: {
                 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: {
@@ -21179,7 +21347,7 @@ const KritzelEngine = class {
                     strokeLinecap: 'round',
                 } })), h("circle", { cx: data.startAnchorViz.centerX, cy: data.startAnchorViz.centerY, r: data.indicatorRadius, style: {
                     fill: 'var(--kritzel-snap-indicator-fill, rgba(0, 0, 0))',
-                    stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
+                    stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))), data.endAnchorViz && (h("g", { class: "anchor-line-end" }, data.endAnchorViz.pathD ? (h("path", { d: data.endAnchorViz.pathD, style: {
                     stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
@@ -21194,7 +21362,7 @@ const KritzelEngine = class {
                     strokeLinecap: 'round',
                 } })), h("circle", { cx: data.endAnchorViz.centerX, cy: data.endAnchorViz.centerY, r: data.indicatorRadius, style: {
                     fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
-                    stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
+                    stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } })))));
         })(), (() => {
@@ -21222,10 +21390,10 @@ const KritzelEngine = class {
                     strokeLinecap: 'round',
                 } }))), h("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
                     fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
-                    stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
+                    stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'f726cabc77f66c24618dc0b54cca8bd681608dde', 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: '95f98d34b26eca7124f973002c2689e9a90f6748', 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`,
@@ -21236,18 +21404,26 @@ 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: 'bf42f27e52c03f9d00a5459883ac45ed39bb1dcd', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '412f67f0a484b7f5e37a4e9fa25d9124c389f62b', core: this.core })));
     }
     static get watchers() { return {
-        "workspace": ["onWorkspaceChange"],
-        "scaleMax": ["validateScaleMax"],
-        "scaleMin": ["validateScaleMin"],
-        "cursorTarget": ["onCursorTargetChange"]
+        "workspace": [{
+                "onWorkspaceChange": 0
+            }],
+        "scaleMax": [{
+                "validateScaleMax": 0
+            }],
+        "scaleMin": [{
+                "validateScaleMin": 0
+            }],
+        "cursorTarget": [{
+                "onCursorTargetChange": 0
+            }]
     }; }
 };
-KritzelEngine.style = kritzelEngineCss;
+KritzelEngine.style = kritzelEngineCss();
 
-const kritzelFontCss = ":host{display:block}.font-preview{color:var(--kritzel-font-size-text-color, #333333);line-height:1;text-align:center;font-weight:bold}";
+const 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) {
@@ -21257,16 +21433,16 @@ const KritzelFont = class {
     size = 24;
     color = '#000000';
     render() {
-        return (h(Host, { key: '23b744f73bf860a53c554ade7d3e9d3eb281caac' }, h("div", { key: '7bfc9dadff6ccfbdf3990830423f92eff8580a54', class: "font-preview", style: {
+        return (h(Host, { key: '62d0314df8f62ef2cf21c17f548261b34611750f' }, h("div", { key: '269347c138aab38cb1f018e58db78cab8e087f13', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
             } }, "A")));
     }
 };
-KritzelFont.style = kritzelFontCss;
+KritzelFont.style = kritzelFontCss();
 
-const kritzelFontFamilyCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.font-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}.font-style-button.italic-text{font-style:italic}";
+const kritzelFontFamilyCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.font-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}.font-style-button.italic-text{font-style:italic}`;
 
 const KritzelFontFamily = class {
     constructor(hostRef) {
@@ -21304,12 +21480,12 @@ const KritzelFontFamily = class {
             label: option.label,
             style: { fontFamily: option.value },
         }));
-        return (h(Host, { key: '5c31315857fa29e0d7c3dac2b7911a244467a052' }, h("kritzel-dropdown", { key: '05abce1f973cd49ef8c7ddc198545ec63d6ac249', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: 'd5c99c0277eeb40f7a0ce29ffb013768125d7fd2', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: 'db9348b72cd65b047994dba6c898bf6517d0358b', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
+        return (h(Host, { key: '74f27d2d9f73ee8589448a24bed64e885ef6d2d8' }, h("kritzel-dropdown", { key: '58abc26a54b124f253841faaa4ca4227a23baac2', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } })));
     }
 };
-KritzelFontFamily.style = kritzelFontFamilyCss;
+KritzelFontFamily.style = kritzelFontFamilyCss();
 
-const kritzelFontSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}";
+const kritzelFontSizeCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}`;
 
 const KritzelFontSize = class {
     constructor(hostRef) {
@@ -21324,16 +21500,22 @@ const KritzelFontSize = class {
         this.selectedSize = size;
         this.sizeChange.emit(size);
     }
+    handleKeyDown(event, size) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleSizeClick(size);
+        }
+    }
     render() {
-        return (h(Host, { key: 'd20034d67eb857065dca11d96074fdf4234c0ef4' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: 'b0ee1ab0eb5e1871f7726d4393aea59f63264ec5' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
-            }, onClick: () => this.handleSizeClick(size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
+            }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
     }
 };
-KritzelFontSize.style = kritzelFontSizeCss;
+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 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) {
@@ -21355,9 +21537,9 @@ const KritzelIcon = class {
         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;
+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:var(--kritzel-portal-max-height, 300px);box-sizing:border-box}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}";
+const kritzelMenuCss = () => `:host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin;max-height:var(--kritzel-portal-max-height, 300px);box-sizing:border-box}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}`;
 
 const KritzelMenu = class {
     constructor(hostRef) {
@@ -21420,12 +21602,12 @@ const KritzelMenu = class {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (h(Host, { key: 'c4b9a602cefcbd0a100f5f1c4a273220d59ead17', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '530ce19ac1aada15260ac5ed2c95c20b202bb94a', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+        return (h(Host, { key: '3901d38f620a544be329e1a20b17b188a81295dc', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '8804023760f43fa34c3ac3f1829439f6136112b9', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
 };
-KritzelMenu.style = kritzelMenuCss;
+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)}: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:var(--kritzel-pointer-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 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)}: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:var(--kritzel-pointer-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) {
@@ -21521,18 +21703,20 @@ const KritzelMenuItem = class {
         ];
     }
     render() {
-        return (h(Host, { key: '7e1c4957d32429f235cb0f5a71fe3e0d2ca52934', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (h(Host, { key: '3a8119288e14c4de188663910a58e0ba67b47614', 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: '2e478e0ee73b11aaca57b56c25fdbeaa449a543e', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, h("div", { key: 'b5dadbff0a915fb032f4a22207683667363eba1d', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get watchers() { return {
-        "item": ["onItemChange"]
+        "item": [{
+                "onItemChange": 0
+            }]
     }; }
 };
-KritzelMenuItem.style = kritzelMenuItemCss;
+KritzelMenuItem.style = kritzelMenuItemCss();
 
 class KritzelHTMLHelper {
     static getNumericValueFromStyle(element, property) {
@@ -21790,14 +21974,16 @@ const KritzelPortal = class {
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: 'aa7399f8a2e744eaa89e881bc9e710bd8a0c6c53', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'df4d8446cf770dfd98476d19c6b18511e2531574' })));
+        return (h(Host, { key: '9706a815c6f49853983a0fdb68b097d62e65e90b', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '1bd76deeb440cd25e3895dc8824f5200461e4ae0' })));
     }
     static get watchers() { return {
-        "anchor": ["anchorChanged"]
+        "anchor": [{
+                "anchorChanged": 0
+            }]
     }; }
 };
 
-const kritzelSplitButtonCss = ":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-pointer-cursor, pointer);text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}";
+const kritzelSplitButtonCss = () => `:host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-pointer-cursor, pointer);text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}`;
 
 const KritzelSplitButton = class {
     constructor(hostRef) {
@@ -21890,12 +22076,12 @@ const KritzelSplitButton = class {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (h(Host, { key: '3603874994e8a9d666448460d7e403252d38f799', class: { mobile: this.isTouchDevice } }, h("button", { key: 'a6a2f8cd22118f7be668f3fd1fc52e38c44b22b3', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: 'e61abf53a2890b6587746eb2aef5a813e81ff1b9', name: this.buttonIcon })), h("div", { key: '17f78d85b2fbd0fe6e7925e10c2531c51bcfdf41', class: "split-divider" }), h("button", { key: 'ac507c76479d66e3483ee898e144a6bea4e8cf6a', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: '8274be53e327d537c2987bc9a3761bc768bdd41f', name: this.dropdownIcon })), h("kritzel-portal", { key: '71136ef798f3c77cff30426a0fcd4ff91bf312b8', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'd1363d2029d7b4aafbd6cba9a4ca6cdf617064e9', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (h(Host, { key: 'a5587085e47c4e33148f9d0817731bfa3aa804b6', class: { mobile: this.isTouchDevice } }, h("button", { key: 'd3815785bb0919e2385bc7b9b0812466ed2b45a3', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: 'b3225e1966bd21e8d37590cb39c0922e46afdaa9', name: this.buttonIcon })), h("div", { key: '526a88ef833cae7d2c7749f2a4bd96bcd2210a56', class: "split-divider" }), h("button", { key: '2c3ee46806bc64edc1f89a97c5e76ec493822065', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: 'c6204d8b14d8cefe9d6eff33af95b2a7ea9a6b7c', name: this.dropdownIcon })), h("kritzel-portal", { key: '07a5e9793484f79d9b4b1f9ae09503f762cb2580', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '0cf7601fd43b846a69152f0fc6ab950ac108ebff', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
 };
-KritzelSplitButton.style = kritzelSplitButtonCss;
+KritzelSplitButton.style = kritzelSplitButtonCss();
 
-const kritzelStrokeSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}";
+const kritzelStrokeSizeCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}`;
 
 const KritzelStrokeSize = class {
     constructor(hostRef) {
@@ -21910,15 +22096,15 @@ const KritzelStrokeSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '7c9041e061a946f20210cff2330cb736c2703ac7' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: 'd204d14384367ca8847ad30cab9801788c8d8fac' }, 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;
+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 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 KritzelTooltip = class {
     constructor(hostRef) {
@@ -21986,19 +22172,19 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (h(Host, { key: 'b6e220084f7ce3eead25bf60cef965322f59f3e0', style: {
+        return (h(Host, { key: 'c257f254b8ba6b95f251eac3136f5be282d23e30', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: `${this.positionX}px`,
                 bottom: `${this.positionY}px`,
-            } }, h("div", { key: '0ab91fedc3301b0c42fa773607ce6aa335b73c2e', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: 'bde0c798a393d006737c1d2c54660b6bbdace9e5' }))));
+            } }, h("div", { key: '14f31dc995236a2309e2371ecef278a0e6374139', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '6dace4d6ed82878333f8771cf4670d53cea36873' }))));
     }
 };
-KritzelTooltip.style = kritzelTooltipCss;
+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:var(--kritzel-pointer-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 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:var(--kritzel-pointer-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) {
@@ -22024,12 +22210,12 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '05ec19a2b644f00680139513c97650e6e7c612f2' }, h("button", { key: 'a62b621b7a1abe33fbf3fc0aa1f8e1d6c7ed8be3', class: "utility-button", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: 'ca8d0f9c9e5cebaf20ffc239602c4b4ce37b7e6b', name: "undo" })), h("button", { key: '7f1ba8b6ae3b8edf0ac0127fee30f3c070d47b44', class: "utility-button", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '4680f7f9523fe6c17924662e025f5e6dfc3e9d78', name: "redo" })), h("div", { key: '77148d676ed708e4029b32e25a3daac628302478', class: "utility-separator" }), h("button", { key: 'b740674dc96d41c0b7b4d2cfb365d45c0f453a27', class: "utility-button" }, h("kritzel-icon", { key: '73d2ed9b6b400106521b0f53915e93516f9d3aad', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: '998008f3c138f18d0e3f5183c3280e646e6c8e73' }, h("button", { key: '2ea58a2df20e038e00c0090c44714efbc1221314', class: "utility-button", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '1843d211731f83f2f828b17f0bc0cf83a76705e1', name: "undo" })), h("button", { key: '71064186570d8e849a634a4c68e96f3fba1ebdab', class: "utility-button", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '12694a6dcddc1f893752d3edcc1deafe700cff5c', name: "redo" })), h("div", { key: '5bbfb5e535d9e0a861d227df57bd5cc7ab8c22fb', class: "utility-separator" }), h("button", { key: 'fda95410a66afa98c0abf6eb82e323f926ef596a', class: "utility-button" }, h("kritzel-icon", { key: '0d1d77f6d65481825c2edbdb38de821a2de7b043', name: "delete", onClick: () => this.delete.emit() }))));
     }
 };
-KritzelUtilityPanel.style = kritzelUtilityPanelCss;
+KritzelUtilityPanel.style = kritzelUtilityPanelCss();
 
-const kritzelWorkspaceManagerCss = ":host{display:flex;flex-direction:column;z-index:1}";
+const kritzelWorkspaceManagerCss = () => `:host{display:flex;flex-direction:column;z-index:1}`;
 
 const KritzelWorkspaceManager = class {
     constructor(hostRef) {
@@ -22167,7 +22353,6 @@ const KritzelWorkspaceManager = class {
         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;
+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