@kritzel/editor 0.4.31 → 0.4.33

package/dist/components/{p-Ckqh1tqY.js → p-DRe-rTlX.js}

@@ -1,19 +1,19 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
 import { KritzelDevicesHelper, KritzelToolConfigHelper, KritzelColorHelper } from '@kritzel/engine';
-import { d as defineCustomElement$e } from './p-DVv8ChhE.js';
-import { d as defineCustomElement$d } from './p-GbCxpbQ6.js';
-import { d as defineCustomElement$c } from './p-R1D8Sr0l.js';
-import { d as defineCustomElement$b } from './p-BDjRSoAc.js';
-import { d as defineCustomElement$a } from './p-ClfOtiNp.js';
-import { d as defineCustomElement$9 } from './p-BfMlwIcG.js';
-import { d as defineCustomElement$8 } from './p-BGmTmdLe.js';
-import { d as defineCustomElement$7 } from './p-CoNexfpB.js';
-import { d as defineCustomElement$6 } from './p-h_uh_Njf.js';
-import { d as defineCustomElement$5 } from './p-BvG3JO85.js';
-import { d as defineCustomElement$4 } from './p-DXuf225S.js';
-import { d as defineCustomElement$3 } from './p-CzUeIini.js';
-import { d as defineCustomElement$2 } from './p-DJxgPPfs.js';
-import { d as defineCustomElement$1 } from './p-BjFrt1q0.js';
+import { d as defineCustomElement$e } from './p-CO1cJlfg.js';
+import { d as defineCustomElement$d } from './p-C2ySiAXO.js';
+import { d as defineCustomElement$c } from './p-B-U13Ew1.js';
+import { d as defineCustomElement$b } from './p-Dko_6jIh.js';
+import { d as defineCustomElement$a } from './p-C1_r9nJU.js';
+import { d as defineCustomElement$9 } from './p-DF8p-DxR.js';
+import { d as defineCustomElement$8 } from './p-B6Z_VKKH.js';
+import { d as defineCustomElement$7 } from './p-BDsuJNT_.js';
+import { d as defineCustomElement$6 } from './p-VYGV0cr3.js';
+import { d as defineCustomElement$5 } from './p-BMi-i7sC.js';
+import { d as defineCustomElement$4 } from './p-HbHo7awi.js';
+import { d as defineCustomElement$3 } from './p-D-1ixLxq.js';
+import { d as defineCustomElement$2 } from './p-CCuNN278.js';
+import { d as defineCustomElement$1 } from './p-DnHvqeyr.js';
 
 const kritzelToolbarCss = () => `:host{display:flex;flex-direction:column;user-select:none;max-width:100%;z-index:1}:host(.mobile){--kritzel-toolbar-control-hover-background-color:transparent;--kritzel-toolbar-control-active-background-color:transparent}.kritzel-toolbar{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-toolbar-gap, 8px);height:100%;padding:var(--kritzel-toolbar-padding, 8px);background-color:var(--kritzel-toolbar-background-color, #ffffff);border-radius:var(--kritzel-toolbar-border-radius, 16px);box-shadow:var(--kritzel-toolbar-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-toolbar-border, 1px solid #ebebeb);z-index:1;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-toolbar-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-toolbar-background-color, #ffffff), transparent);border-radius:var(--kritzel-toolbar-border-radius, 16px) 0 0 var(--kritzel-toolbar-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-toolbar-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-toolbar-border-radius, 16px) var(--kritzel-toolbar-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-toolbar-control-color, #000000);border-radius:var(--kritzel-toolbar-control-border-radius, 12px);padding:var(--kritzel-toolbar-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-toolbar-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-toolbar-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-toolbar-control-selected-background-color, #007AFF) !important;color:var(--kritzel-toolbar-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-toolbar-control-selected-background-color, #007bffe3) !important}.kritzel-control:disabled,.kritzel-control.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.kritzel-control-separator{width:1px;height:24px;background-color:var(--kritzel-toolbar-separator-color, #ebebeb);margin:0 4px}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-toolbar-control-border-radius, 12px);color:var(--kritzel-toolbar-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-toolbar-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-toolbar-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-toolbar-control-border-radius, 12px) 0 0 var(--kritzel-toolbar-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-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-toolbar-control-border-radius, 12px) var(--kritzel-toolbar-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-toolbar-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-toolbar-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-toolbar-control-selected-background-color, #007AFF) !important;color:var(--kritzel-toolbar-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-control-split .kritzel-control-main:disabled,.kritzel-control-split .kritzel-control-main.disabled,.kritzel-control-split .kritzel-control-dropdown:disabled,.kritzel-control-split .kritzel-control-dropdown.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.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-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-toolbar-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-toolbar-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-toolbar-control-selected-background-color, #007AFF);color:var(--kritzel-toolbar-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-toolbar-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-toolbar-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-toolbar-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-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-global-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-global-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}`;
 
@@ -177,17 +177,13 @@ const KritzelToolbar = /*@__PURE__*/ proxyCustomElement(class KritzelToolbar ext
         await this.resolveDisabledStates(newToolbar);
         for (const c of newToolbar) {
             if (c.type === 'tool' && c.tool) {
-                let toolConstructor = c.tool;
-                if (typeof toolConstructor !== 'function') {
-                    toolConstructor = toolConstructor.constructor;
-                }
-                const registered = await this.kritzelEngine.registerTool(c.name, toolConstructor, c.config);
+                const registered = await this.kritzelEngine.getTool(c.name);
                 if (registered) {
                     c.tool = registered;
                 }
             }
             if (c.type === 'tool' && c.isDefault && !this.isControlDisabled(c) && c.tool) {
-                await this.kritzelEngine.changeActiveTool(c.name);
+                await this.kritzelEngine.setActiveTool(c.name);
                 this.activeControl = c;
                 this.updateDisplayValues(c.tool);
                 hasDefault = true;
@@ -206,7 +202,7 @@ const KritzelToolbar = /*@__PURE__*/ proxyCustomElement(class KritzelToolbar ext
         if (!hasDefault) {
             const firstTool = this.internalToolbar.find(c => c.type === 'tool' && c.tool && !this.isControlDisabled(c));
             if (firstTool) {
-                await this.kritzelEngine.changeActiveTool(firstTool.name);
+                await this.kritzelEngine.setActiveTool(firstTool.name);
                 this.activeControl = firstTool;
                 this.updateDisplayValues(firstTool.tool);
             }
@@ -242,12 +238,12 @@ const KritzelToolbar = /*@__PURE__*/ proxyCustomElement(class KritzelToolbar ext
         this.activeControl = control;
         if (this.activeControl.type === 'tool') {
             this.updateDisplayValues(this.activeControl.tool);
-            await this.kritzelEngine.changeActiveTool(this.activeControl.name);
+            await this.kritzelEngine.setActiveTool(this.activeControl.name);
         }
     }
     async handleToolChange(event) {
         this.activeControl = { ...this.activeControl, tool: event.detail };
-        await this.kritzelEngine.changeActiveTool(this.activeControl.name);
+        await this.kritzelEngine.setActiveTool(this.activeControl.name);
     }
     /**
      * Get the currently selected sub-option for a control.
@@ -286,13 +282,13 @@ const KritzelToolbar = /*@__PURE__*/ proxyCustomElement(class KritzelToolbar ext
         // Separate tool controls from config control
         const toolControls = this.internalToolbar.filter(c => c.type === 'tool' || c.type === 'separator');
         const configControl = this.internalToolbar.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (h(Host, { key: '138b1071841d6d8de85379e953f5f597216569d3', style: { display: this.visible ? '' : 'none' }, class: {
+        return (h(Host, { key: 'e4f662409cdd76fafa8753a47d4c4670968a9e7a', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '566c48a8ebe036f2bd5972b25e1f937cab45e34b', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'c3c864e0e818ccf92d4c9b43f183775fa919cf4c', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'eda49dc67a1e4da92e4b47e5a97366810464d998', class: "kritzel-toolbar" }, h("div", { key: '018b3062a233b92424a9c64002fe69bb48d6a2d3', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '8afc779f4137ad4410765e7c37fe49e32fe94624', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '4d59605d66ee7277af8fc56002947f943f8a5b14', class: "kritzel-toolbar" }, h("div", { key: '7c36b7ad02470bafc9efcb426f667376e28953e8', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'd29be9bca631077fad2fe709219c8897735bc6a6', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
@@ -314,7 +310,7 @@ const KritzelToolbar = /*@__PURE__*/ proxyCustomElement(class KritzelToolbar ext
                     }, disabled: isDisabled, ref: el => {
                         if (el)
                             control._triggerRef = el;
-                    }, "aria-label": `Select ${control.name} options`, "aria-disabled": isDisabled, "data-testid": `tool-${control.name}-dropdown`, tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { anchorElement: control._anchorRef, triggerElement: control._triggerRef }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
+                    }, "aria-label": `Select ${control.name} options`, "aria-disabled": isDisabled, "data-testid": `tool-${control.name}-dropdown`, tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevronDown", size: 12 })), h("kritzel-tooltip", { anchorElement: control._anchorRef, triggerElement: control._triggerRef }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
                         'kritzel-submenu-item': true,
                         'active': option.id === selectedSubOption?.id,
                     }, key: option.id, "data-testid": `suboption-${option.id}`, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
@@ -328,10 +324,10 @@ const KritzelToolbar = /*@__PURE__*/ proxyCustomElement(class KritzelToolbar ext
                     'selected': this.activeControl?.name === control?.name,
                     'disabled': this.isControlDisabled(control),
                 }, disabled: this.isControlDisabled(control), key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1), "aria-disabled": this.isControlDisabled(control) }, h("kritzel-icon", { name: control.icon })));
-        })), h("div", { key: '08de74d08ced9a4d34d61740729f317fee7724e0', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: '8cb7ae1d0b77f6bac9c6ddf34699c2653b1cfa68', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, h("div", { key: 'c453af061cbf23f83c2418fe5db315008550afeb', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '9818cdc44e0da2f5bbae24697a22add9499aaa9b', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'f957bba0e15a7771856c4f04346ada370f0730c8', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '49657d004467ae5f6ec97f70c3d88cfc48e6e3d8', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, h("div", { key: '764230be2ef0ca45f94ca2a7bf6e2b5df7bdf7b2', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '7b6c2cae55b9ca6f723e2209f98d921b388e8159', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '222a7eb3c5a0ad3589e62b43618dcf56bce01418', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '90455ca7c55240645445f3d92ccec54ffc1e3572', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -340,7 +336,7 @@ const KritzelToolbar = /*@__PURE__*/ proxyCustomElement(class KritzelToolbar ext
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (h("div", { key: '6a8f4f549919b7e87a3338145347597f6e41019c', class: "color-container" }, h("kritzel-color", { key: 'c050efb35a31ac668fcb25fec3cd036f871d6a8f', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (h("div", { key: 'ef0c11f630b70dadf5c9b7688c0f1b93cf9cf030', class: "color-container" }, h("kritzel-color", { key: 'd14a7837fef6d3777ee92d219d22915c5f21e541', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));

package/dist/components/{p-McY5wZ0h.js → p-DSyb29RF.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
 
 const kritzelNumericInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-numeric-input-label-color, #333333)}.input-wrapper{display:flex;position:relative}.numeric-input{flex:1;padding:8px 36px 8px 12px;border:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:var(--kritzel-numeric-input-border-radius, 6px);font-size:14px;color:var(--kritzel-numeric-input-text-color, #333333);background-color:var(--kritzel-numeric-input-input-background, #ffffff);outline:none;transition:border-color 150ms ease;box-sizing:border-box}.numeric-input::-webkit-outer-spin-button,.numeric-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.numeric-input[type='number']{-moz-appearance:textfield}.numeric-input::selection{background-color:var(--kritzel-numeric-input-selection-background, #007AFF);color:var(--kritzel-numeric-input-selection-color, #ffffff)}.numeric-input:hover{border-color:var(--kritzel-numeric-input-hover-border-color, #cccccc)}.numeric-input:focus{border-color:var(--kritzel-numeric-input-focus-border-color, #0066ff);border-width:2px;padding:7px 35px 7px 11px}.spinner-buttons{position:absolute;right:1px;top:1px;bottom:1px;display:flex;flex-direction:column;border-left:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:0 var(--kritzel-numeric-input-spinner-border-radius, 5px) var(--kritzel-numeric-input-spinner-border-radius, 5px) 0;overflow:hidden}.spinner-button{flex:1;display:flex;align-items:center;justify-content:center;width:24px;padding:0;border:none;background-color:var(--kritzel-numeric-input-spinner-background, #f5f5f5);color:var(--kritzel-numeric-input-spinner-color, #666666);cursor:pointer;transition:background-color 150ms ease}.spinner-button:hover{background-color:var(--kritzel-numeric-input-spinner-hover-background, #ebebeb)}.spinner-button:active{background-color:var(--kritzel-numeric-input-spinner-active-background, #dddddd)}.spinner-up{border-bottom:1px solid var(--kritzel-numeric-input-border-color, #ebebeb)}.spinner-icon{width:10px;height:6px}`;
 
@@ -97,7 +97,7 @@ const KritzelNumericInput = /*@__PURE__*/ proxyCustomElement(class KritzelNumeri
         this.valueChange.emit(newValue);
     };
     render() {
-        return (h(Host, { key: '273ca34d6be0e76cfd742495cd75172c5112533a' }, h("div", { key: '2ef4be625b4f97c1a65f4e114a161ae092248479', class: "input-container" }, this.label && h("label", { key: '4f3866b2c33327100f6b49e7b12c10ab91601bf3', class: "input-label" }, this.label), h("div", { key: 'cc1608e9638d3ea5434096720731073e8e436e53', class: "input-wrapper" }, h("input", { key: 'f872d2fb83f1ecfc2bbb9edeae97b8a0deccca66', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: '0893a104eb1b68138de0d77cfe6e644e7fff75d2', class: "spinner-buttons" }, h("button", { key: 'c39596aac8affea11a880835c63975e8cdae6599', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '6cfad1fab40cd65ba54ee5d80d9b08af5676878c', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '50ca542fa773658823a9bc09ec3226bba02cfac7', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '5c62a5a71555474e94e73b9123023f6cf0f70c81', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '72b12df906ebf5e2d07ec387faeb11567dbca76b', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'a85205a5f31392e1db4bc893fad336f5b9775530', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '4492b328055747be0df872965fe8f8a644c1b99f' }, h("div", { key: '8e35306939f4da96af77658c02ae3c4f2f9bd9c3', class: "input-container" }, this.label && h("label", { key: '00eef99018632f20e98f372b29ee23efd6855196', class: "input-label" }, this.label), h("div", { key: '41bed7ac6642a3cd52e5be1d95d1243d48e1249b', class: "input-wrapper" }, h("input", { key: 'fcb996947286814e01e15f01df89ff161926c8f3', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: '0ff1a0d8306cf45d594413332c2977202ad402d3', class: "spinner-buttons" }, h("button", { key: '1f5b278dff3052fd03e65aa6758c289200574eae', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '1722b868967111631dbf2442d33d2c9736b68c0c', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '75655b2843c384ab448c5447fc3d3546c6f360d9', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'b81a65fefb49157a76f9dd5dc0ad785e167a61fe', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: 'dc1cc93cb3bb8593a50682a49018bd4ca27b3a30', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'db9138181002c73da50fb3ab369a36912a7874f5', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get watchers() { return {
         "value": [{

package/dist/components/{p-D0tPTPkR.js → p-DYDruZIw.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
-import { d as defineCustomElement$1 } from './p-BGmTmdLe.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
+import { d as defineCustomElement$1 } from './p-B6Z_VKKH.js';
 
-const kritzelNotificationCardCss = () => `:host{display:block}.card{box-sizing:border-box;width:100%;max-width:var(--kritzel-notification-card-max-width, 360px);margin-inline:auto;font-family:var(--kritzel-font-family, sans-serif);padding:var(--kritzel-notification-card-padding, 12px 14px);border:var(--kritzel-notification-card-border, 1px solid #e5e7eb);border-radius:var(--kritzel-notification-card-border-radius, 12px);background-color:var(--kritzel-notification-card-background-color, #ffffff);color:var(--kritzel-notification-card-color, #111827);box-shadow:var(--kritzel-notification-card-box-shadow, 0 8px 20px rgba(15, 23, 42, 0.08))}.card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--kritzel-notification-card-header-gap, 8px);margin-bottom:var(--kritzel-notification-card-header-margin-bottom, 8px)}.header-right{display:inline-flex;align-items:center;gap:var(--kritzel-notification-card-header-right-gap, 6px)}.type-pill{display:inline-flex;align-items:center;justify-content:center;min-height:var(--kritzel-notification-card-pill-height, 22px);padding:var(--kritzel-notification-card-pill-padding, 0 8px);border-radius:var(--kritzel-notification-card-pill-border-radius, 999px);background-color:var(--kritzel-notification-card-pill-background-color, #eff6ff);color:var(--kritzel-notification-card-pill-color, #1d4ed8);font-size:var(--kritzel-notification-card-pill-font-size, 12px);font-weight:var(--kritzel-notification-card-pill-font-weight, 600);line-height:1}.card.type-info .type-pill{background-color:var(--kritzel-notification-card-info-pill-background-color, #eff6ff);color:var(--kritzel-notification-card-info-pill-color, #1d4ed8)}.card.type-warning .type-pill{background-color:var(--kritzel-notification-card-warning-pill-background-color, #fff7ed);color:var(--kritzel-notification-card-warning-pill-color, #b45309)}.card.type-error .type-pill{background-color:var(--kritzel-notification-card-error-pill-background-color, #fef2f2);color:var(--kritzel-notification-card-error-pill-color, #b91c1c)}.timestamp{color:var(--kritzel-notification-card-timestamp-color, #6b7280);font-size:var(--kritzel-notification-card-timestamp-font-size, 12px);white-space:nowrap}.dismiss-button{display:inline-flex;align-items:center;justify-content:center;width:var(--kritzel-notification-card-dismiss-button-size, 24px);height:var(--kritzel-notification-card-dismiss-button-size, 24px);padding:0;border:none;border-radius:var(--kritzel-notification-card-dismiss-button-border-radius, 6px);background:var(--kritzel-notification-card-dismiss-button-background-color, transparent);color:var(--kritzel-notification-card-dismiss-button-color, #4b5563);cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.dismiss-button:hover{background:var(--kritzel-notification-card-dismiss-button-hover-background-color, #f3f4f6)}.dismiss-button:active{background:var(--kritzel-notification-card-dismiss-button-active-background-color, #e5e7eb)}.dismiss-button:focus-visible{outline:revert}.message{margin:0;color:var(--kritzel-notification-card-message-color, inherit);font-size:var(--kritzel-notification-card-message-font-size, 14px);line-height:var(--kritzel-notification-card-message-line-height, 1.45);word-break:break-word}`;
+const kritzelNotificationCardCss = () => `:host{display:block}.card{box-sizing:border-box;width:100%;max-width:var(--kritzel-notification-card-max-width, 360px);margin-inline:auto;font-family:var(--kritzel-global-font-family, sans-serif);padding:var(--kritzel-notification-card-padding, 12px 14px);border:var(--kritzel-notification-card-border, 1px solid #e5e7eb);border-radius:var(--kritzel-notification-card-border-radius, 12px);background-color:var(--kritzel-notification-card-background-color, #ffffff);color:var(--kritzel-notification-card-color, #111827);box-shadow:var(--kritzel-notification-card-box-shadow, 0 8px 20px rgba(15, 23, 42, 0.08))}.card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--kritzel-notification-card-header-gap, 8px);margin-bottom:var(--kritzel-notification-card-header-margin-bottom, 8px)}.header-right{display:inline-flex;align-items:center;gap:var(--kritzel-notification-card-header-right-gap, 6px)}.type-pill{display:inline-flex;align-items:center;justify-content:center;min-height:var(--kritzel-notification-card-pill-height, 22px);padding:var(--kritzel-notification-card-pill-padding, 0 8px);border-radius:var(--kritzel-notification-card-pill-border-radius, 999px);background-color:var(--kritzel-notification-card-pill-background-color, #eff6ff);color:var(--kritzel-notification-card-pill-color, #1d4ed8);font-size:var(--kritzel-notification-card-pill-font-size, 12px);font-weight:var(--kritzel-notification-card-pill-font-weight, 600);line-height:1}.card.type-info .type-pill{background-color:var(--kritzel-notification-card-info-pill-background-color, #eff6ff);color:var(--kritzel-notification-card-info-pill-color, #1d4ed8)}.card.type-warning .type-pill{background-color:var(--kritzel-notification-card-warning-pill-background-color, #fff7ed);color:var(--kritzel-notification-card-warning-pill-color, #b45309)}.card.type-error .type-pill{background-color:var(--kritzel-notification-card-error-pill-background-color, #fef2f2);color:var(--kritzel-notification-card-error-pill-color, #b91c1c)}.timestamp{color:var(--kritzel-notification-card-timestamp-color, #6b7280);font-size:var(--kritzel-notification-card-timestamp-font-size, 12px);white-space:nowrap}.dismiss-button{display:inline-flex;align-items:center;justify-content:center;width:var(--kritzel-notification-card-dismiss-button-size, 24px);height:var(--kritzel-notification-card-dismiss-button-size, 24px);padding:0;border:none;border-radius:var(--kritzel-notification-card-dismiss-button-border-radius, 6px);background:var(--kritzel-notification-card-dismiss-button-background-color, transparent);color:var(--kritzel-notification-card-dismiss-button-color, #4b5563);cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.dismiss-button:hover{background:var(--kritzel-notification-card-dismiss-button-hover-background-color, #f3f4f6)}.dismiss-button:active{background:var(--kritzel-notification-card-dismiss-button-active-background-color, #e5e7eb)}.dismiss-button:focus-visible{outline:revert}.message{margin:0;color:var(--kritzel-notification-card-message-color, inherit);font-size:var(--kritzel-notification-card-message-font-size, 14px);line-height:var(--kritzel-notification-card-message-line-height, 1.45);word-break:break-word}`;
 
 const KritzelNotificationCard = /*@__PURE__*/ proxyCustomElement(class KritzelNotificationCard extends H {
     constructor(registerHost) {

package/dist/components/{p-kOINnzaR.js → p-D_JxJxQ6.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
 import { KritzelDevicesHelper } from '@kritzel/engine';
-import { d as defineCustomElement$4 } from './p-BGmTmdLe.js';
-import { d as defineCustomElement$3 } from './p-DqOC_Yck.js';
-import { d as defineCustomElement$2 } from './p-BN8VWPlq.js';
-import { d as defineCustomElement$1 } from './p-CS3YZVYE.js';
+import { d as defineCustomElement$4 } from './p-B6Z_VKKH.js';
+import { d as defineCustomElement$3 } from './p-BpvSYxxN.js';
+import { d as defineCustomElement$2 } from './p-B-Divd0Q.js';
+import { d as defineCustomElement$1 } from './p-BmFJelgk.js';
 
 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:var(--kritzel-split-button-color, #000000);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-global-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}`;
 
@@ -25,7 +25,7 @@ const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitBu
     }
     get host() { return this; }
     buttonIcon = 'plus';
-    dropdownIcon = 'chevron-down';
+    dropdownIcon = 'chevronDown';
     items = [];
     mainButtonDisabled = false;
     menuButtonDisabled = false;
@@ -107,7 +107,7 @@ const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitBu
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (h(Host, { key: '80f3c3e9287618077ac2a617adf7d6a0de655e7a', class: { mobile: this.isTouchDevice } }, h("button", { key: '91b74d5411e4923f5dff8b664e3de1a8bcfd1889', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: 'd089a83295928b61604e795db2d4696c463f00e2', name: this.buttonIcon })), h("div", { key: '7aa9f16c44edc37a1fce8ffdfddd78ae9b376024', class: "split-divider" }), h("button", { key: '45c8ee363f4d07c282b4a21381e1af80cf4a52f1', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: 'bab844ef65aa599a138522d94f1e067e8003ff67', name: this.dropdownIcon })), h("kritzel-portal", { key: '9f7241ef66f83e05c18613f36605dc3b6c41352a', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '034c48192e15d56602b29a7e8d491e15cc01bd41', 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: 'fd367561351219e18883cf7bf72a1fd488b1d3e9', class: { mobile: this.isTouchDevice } }, h("button", { key: 'f9edff7ca0c77f2502947a98ab4bb64ed68d6437', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '31f8dc17a94d015d5881ca2475b4933a6183cafa', name: this.buttonIcon })), h("div", { key: '3620329f4b911cee3f4cbae4498c28c20e19f953', class: "split-divider" }), h("button", { key: 'cda9b17a019df40107f01d9bb644e5545218e891', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: '03f04eb20ef66cc6ea8ed4104f26dc062afba680', name: this.dropdownIcon })), h("kritzel-portal", { key: 'e02bc799b56ad731db06719ae77b65b872e0a368', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '694b82e1c05411ea119fdb07aec0b747c6e3d6f4', 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 }))));
     }
     static get style() { return kritzelSplitButtonCss(); }
 }, [513, "kritzel-split-button", {

package/dist/components/{p-BDjRSoAc.js → p-Dko_6jIh.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
 
 const kritzelFontCss = () => `:host{display:block}.font-preview{color:var(--kritzel-font-size-text-color, #333333);line-height:1;text-align:center;font-weight:bold}`;
 
@@ -14,7 +14,7 @@ const KritzelFont = /*@__PURE__*/ proxyCustomElement(class KritzelFont extends H
     size = 24;
     color = '#000000';
     render() {
-        return (h(Host, { key: 'b594153b199a9ed859b0b74dccaa8f242f6e388d' }, h("div", { key: 'f1888af3f0342a38c3d5a887ef66adef63b35a87', class: "font-preview", style: {
+        return (h(Host, { key: '7ee5e56528fd93c5b00c930e0404b55aa6ba29f7' }, h("div", { key: '54111872192f8f6aa4a523c81fdcbacacde5facf', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color

package/dist/components/{p-BjFrt1q0.js → p-DnHvqeyr.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
-import { d as defineCustomElement$1 } from './p-BGmTmdLe.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
+import { d as defineCustomElement$1 } from './p-B6Z_VKKH.js';
 
 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:var(--kritzel-utility-panel-background-color, #e2e2e2);width:fit-content;user-select:none;z-index:1}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-utility-panel-button-color, #333333);--kritzel-icon-color:var(--kritzel-utility-panel-button-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-utility-panel-button-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:var(--kritzel-utility-panel-separator-color, hsl(0, 0%, 0%, 8%))}`;
 
@@ -33,7 +33,7 @@ const KritzelUtilityPanel = /*@__PURE__*/ proxyCustomElement(class KritzelUtilit
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '716bf600bb8ef3e1c7663183c2b4d2927e554faf' }, h("button", { key: '64b300d1d10c30d623fce76a919610e7b553c504', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: '86c0711e5a61f837bf279600e27d896a81ae1d5c', name: "undo" })), h("button", { key: '9052c2023254caca5109364b1c82d42e0900d54b', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: '03060f21b1551bcdae724b4de03010127647c036', name: "redo" })), h("div", { key: '5ac88e76663bb2d5c90f16b76021123fe64d898a', class: "utility-separator" }), h("button", { key: '7cbbc765c1c4b642d8371a25348d1d886b9b5440', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: 'a8f6c8e8a8783e45d781b50aa7aec51b3f29dd5c', name: "delete" }))));
+        return (h(Host, { key: '1ec661383d53b4c34308152d745a8de1cb5809e0' }, h("button", { key: '69ff640842779f8b03709040feb3dbfe2f5f0f05', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: '49be69476a559136b1199f7d20144d0dc0aa402b', name: "undo" })), h("button", { key: 'f9a14d78e14e66f0ebfb3762a7de748097c297e1', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: 'e559abf9a2a0471d2524f65264adbc28d8fa0449', name: "redo" })), h("div", { key: '19fe0895816459d7e9241307c9f0642c055774b6', class: "utility-separator" }), h("button", { key: '3672bbcad7e22b023dc203ee098ba1538836b0ee', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: 'aadbff86ca2938e28a74c4ad1c0ac6330d20e529', name: "delete" }))));
     }
     static get style() { return kritzelUtilityPanelCss(); }
 }, [513, "kritzel-utility-panel", {

package/dist/components/{p-BrGJIoGK.js → p-DqMikMrS.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
-import { d as defineCustomElement$1 } from './p-4-qLegHb.js';
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
+import { d as defineCustomElement$1 } from './p-Bipc1XvF.js';
 
 const kritzelCurrentUserCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}kritzel-avatar{cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}`;
 
@@ -22,7 +22,7 @@ const KritzelCurrentUser = /*@__PURE__*/ proxyCustomElement(class KritzelCurrent
     /** Resolved localized strings keyed by term key, supplied by the editor. */
     terms = {};
     render() {
-        return (h(Host, { key: '27a6be0c90f290588190f9810608041eb713ac75' }, h("kritzel-avatar", { key: 'f06de8b0e904cbcf3fb72ed2cc50da559ca2c9c4', user: this.user, size: this.avatarSize })));
+        return (h(Host, { key: 'e6b56d76dd339fd10216a4d788d56de1fdd20fc6' }, h("kritzel-avatar", { key: '03445e8fe4c43aa4015b6ec124ac731baec03a22', user: this.user, size: this.avatarSize })));
     }
     static get style() { return kritzelCurrentUserCss(); }
 }, [513, "kritzel-current-user", {

package/dist/components/p-DsnHq8en.js

@@ -0,0 +1,55 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
+
+const kritzelButtonCss = () => `:host{display:inline-block;font-family:var(--kritzel-button-font-family, var(--kritzel-global-font-family, sans-serif))}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:inline-flex;width:var(--kritzel-button-width, auto);align-items:center;justify-content:center;gap:6px;border-radius:var(--kritzel-button-border-radius, 8px);padding:var(--kritzel-button-padding, 12px 20px);font-size:var(--kritzel-button-font-size, 14px);font-weight:var(--kritzel-button-font-weight, 500);transition:background-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}button.primary{background-color:var(--kritzel-button-primary-background-color, #007AFF);color:var(--kritzel-button-primary-color, #ffffff)}button.primary:hover{background-color:var(--kritzel-button-primary-hover-background-color, #006ae6)}button.primary:active{background-color:var(--kritzel-button-primary-active-background-color, #005bbf)}button.secondary{background-color:var(--kritzel-button-secondary-background-color, #f0f0f0);color:var(--kritzel-button-secondary-color, #333333)}button.secondary:hover{background-color:var(--kritzel-button-secondary-hover-background-color, #e0e0e0)}button.secondary:active{background-color:var(--kritzel-button-secondary-active-background-color, #d0d0d0)}button.text{background-color:transparent;color:var(--kritzel-button-text-color, #007AFF)}button.text:hover{background-color:var(--kritzel-button-text-hover-background-color, rgba(0, 122, 255, 0.08))}button.text:active{background-color:var(--kritzel-button-text-active-background-color, rgba(0, 122, 255, 0.15))}button.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}`;
+
+const KritzelButton = /*@__PURE__*/ proxyCustomElement(class KritzelButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.buttonClick = createEvent(this, "buttonClick");
+    }
+    /** The visual variant of the button */
+    variant = 'primary';
+    /** Whether the button is disabled */
+    disabled = false;
+    /** The type attribute for the native button element */
+    type = 'button';
+    /** Emitted when the button is clicked */
+    buttonClick;
+    handleClick = (event) => {
+        if (this.disabled)
+            return;
+        event.stopPropagation();
+        this.buttonClick.emit();
+    };
+    render() {
+        return (h(Host, { key: 'e88abc53a52cd32846b389f9de239d3f98b7230f' }, h("button", { key: 'de77c4ac750f35766b9657276addf78068be1575', type: this.type, class: {
+                'kritzel-button': true,
+                [this.variant]: true,
+                'disabled': this.disabled,
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'bdd2227879415dccc23676cf219ef17b1dd104fe' }))));
+    }
+    static get style() { return kritzelButtonCss(); }
+}, [769, "kritzel-button", {
+        "variant": [1],
+        "disabled": [4],
+        "type": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-button":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelButton);
+            }
+            break;
+    } });
+}
+
+export { KritzelButton as K, defineCustomElement as d };

package/dist/components/{p-DXZBWJBt.js → p-DxFNLy9X.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
-import { d as defineCustomElement$1 } from './p-BGmTmdLe.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
+import { d as defineCustomElement$1 } from './p-B6Z_VKKH.js';
 
-const kritzelZoomPanelCss = () => `:host{display:block;z-index:1}.panel{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-zoom-panel-gap, 4px);padding:var(--kritzel-zoom-panel-padding, 4px);border:var(--kritzel-zoom-panel-border, 1px solid #ebebeb);border-radius:var(--kritzel-zoom-panel-border-radius, 12px);background-color:var(--kritzel-zoom-panel-background-color, #ffffff);box-shadow:var(--kritzel-zoom-panel-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.panel.visible{opacity:1;pointer-events:auto}.zoom-level{display:inline-flex;align-items:center;justify-content:center;min-width:46px;color:var(--kritzel-zoom-panel-icon-color, #000000);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;font-weight:500;line-height:1;padding:0 4px;user-select:none}.zoom-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-zoom-panel-button-size, 32px);height:var(--kritzel-zoom-panel-button-size, 32px);padding:0;border:0;border-radius:var(--kritzel-zoom-panel-button-border-radius, 8px);background:transparent;background-color:transparent;color:var(--kritzel-zoom-panel-icon-color, #000000);--kritzel-icon-color:var(--kritzel-zoom-panel-icon-color, #000000);box-shadow:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.zoom-button:hover,.zoom-button:focus-visible{background-color:var(--kritzel-zoom-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.zoom-button:active{background-color:var(--kritzel-zoom-panel-button-active-background-color, hsl(0, 0%, 0%, 8.6%))}.zoom-button:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}`;
+const kritzelZoomPanelCss = () => `:host{display:block;z-index:1}.panel{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-zoom-panel-gap, 4px);padding:var(--kritzel-zoom-panel-padding, 4px);border:var(--kritzel-zoom-panel-border, 1px solid #ebebeb);border-radius:var(--kritzel-zoom-panel-border-radius, 12px);background-color:var(--kritzel-zoom-panel-background-color, #ffffff);box-shadow:var(--kritzel-zoom-panel-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.panel.visible{opacity:1;pointer-events:auto}.zoom-level{display:inline-flex;align-items:center;justify-content:center;min-width:46px;color:var(--kritzel-zoom-panel-icon-color, #000000);font-family:var(--kritzel-global-font-family, sans-serif);font-size:12px;font-weight:500;line-height:1;padding:0 4px;user-select:none}.zoom-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-zoom-panel-button-size, 32px);height:var(--kritzel-zoom-panel-button-size, 32px);padding:0;border:0;border-radius:var(--kritzel-zoom-panel-button-border-radius, 8px);background:transparent;background-color:transparent;color:var(--kritzel-zoom-panel-icon-color, #000000);--kritzel-icon-color:var(--kritzel-zoom-panel-icon-color, #000000);box-shadow:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.zoom-button:hover,.zoom-button:focus-visible{background-color:var(--kritzel-zoom-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.zoom-button:active{background-color:var(--kritzel-zoom-panel-button-active-background-color, hsl(0, 0%, 0%, 8.6%))}.zoom-button:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}`;
 
 const KritzelZoomPanel = /*@__PURE__*/ proxyCustomElement(class KritzelZoomPanel extends H {
     constructor(registerHost) {
@@ -39,7 +39,7 @@ const KritzelZoomPanel = /*@__PURE__*/ proxyCustomElement(class KritzelZoomPanel
         return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
     }
     render() {
-        return (h(Host, { key: 'aa8e01ab1b510f98b2b53a6ff882fe278969d1b3' }, h("div", { key: 'b652d46eac7add121c64baee132d4d162f4ec657', class: { panel: true, visible: this.visible } }, h("button", { key: '8fe1d17dba12490a6033889b4448b3f330815cdc', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '919c0ca7c58a79fd792cdf504a7565df29043211', name: "minus" })), h("span", { key: '0acb683ebf5f2ea6a66065783ebf10715c588567', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: 'e0209ca2d8af30c56833b28c394373f83da1fcf8', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: '13907bcae5712d23165aa22bfe229f2893b4f74f', name: "plus" })))));
+        return (h(Host, { key: '37bdf4f4025a64be94a2f743d73d2a83c4f9c478' }, h("div", { key: '5c897da0de9a15d91c4d488be923271f82d816c1', class: { panel: true, visible: this.visible } }, h("button", { key: '165fedd5f1c87140e1cbfd7c3a99344edea59d3e', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '4ac3e03e68166c9e9819c5a11ab1d8aac37b6eb1', name: "minus" })), h("span", { key: 'd124c60a92cde8afe9fac87c85b3654d18238343', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: 'fe94bf21c0de5fc212524058c6fb5de90a89679e', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: '84c8ebd09772c81946e65a5759376c501f050548', name: "plus" })))));
     }
     static get style() { return kritzelZoomPanelCss(); }
 }, [513, "kritzel-zoom-panel", {

package/dist/components/{p-5qkOM1RJ.js → p-Dzr6X2aj.js}

@@ -2,7 +2,7 @@ const NAMESPACE = 'kritzel-editor';
 const BUILD = /* kritzel-editor */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: false, state: true, updatable: true};
 
 /*
- Stencil Client Platform v4.44.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.45.1 | MIT Licensed | https://stenciljs.com
  */
 
 
@@ -839,7 +839,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       if (idxInOld >= 0) {
         elmToMove = oldCh[idxInOld];
         if (elmToMove.$tag$ !== newStartVnode.$tag$) {
-          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
+          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
         } else {
           patch(elmToMove, newStartVnode, isInitialRender);
           oldCh[idxInOld] = void 0;
@@ -1119,6 +1119,17 @@ var postUpdateComponent = (hostRef) => {
     hostRef.$flags$ &= -517;
   }
 };
+var forceUpdate = (ref) => {
+  var _a;
+  {
+    const hostRef = getHostRef(ref);
+    const isConnected = (_a = hostRef == null ? void 0 : hostRef.$hostElement$) == null ? void 0 : _a.isConnected;
+    if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+      scheduleUpdate(hostRef, false);
+    }
+    return isConnected;
+  }
+};
 var appDidLoad = (who) => {
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
 };
@@ -1290,8 +1301,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
           if (isBooleanTarget) {
             newValue = newValue === null || newValue === "false" ? false : true;
           }
+          const currentValue = this[propName];
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
+          if (!isSpuriousBooleanRemoval && newValue != currentValue && (!propDesc.get || !!propDesc.set)) {
             this[propName] = newValue;
           }
         });
@@ -1554,4 +1566,4 @@ function transformTag(tag) {
   return tag;
 }
 
-export { H, setNonce as a, setPlatformOptions as b, createEvent as c, Host as d, getAssetPath as g, h, proxyCustomElement as p, render as r, setAssetPath as s, transformTag as t };
+export { H, setNonce as a, setPlatformOptions as b, createEvent as c, Host as d, forceUpdate as f, getAssetPath as g, h, proxyCustomElement as p, render as r, setAssetPath as s, transformTag as t };

package/dist/components/{p-DXuf225S.js → p-HbHo7awi.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
-import { d as defineCustomElement$1 } from './p-DVv8ChhE.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
+import { d as defineCustomElement$1 } from './p-CO1cJlfg.js';
 
 const kritzelStrokeSizeCss = () => `:host{display:flex;align-items:flex-start;gap:0;padding:0;width:100%;box-sizing:border-box}.size-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fill, 32px);gap:8px;justify-items:center}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-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)}`;
 
@@ -21,7 +21,7 @@ const KritzelStrokeSize = /*@__PURE__*/ proxyCustomElement(class KritzelStrokeSi
     }
     render() {
         const sizes = this.sizes ?? [];
-        return (h(Host, { key: '826fcdeaedaa3d33be0d6b446941bf92a36b13c3' }, h("div", { key: 'd4fb007d3ad0d31ce4424079ab02a2f4f36b1f61', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: 'dcb655ac6ec2eea1ee38b9d267dd11c6d1f21f4a' }, h("div", { key: '50c3ecaddb26cebb943c24685386401b5fdac54c', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));

package/dist/components/{p-CwBxnzYu.js → p-Qbk7xE91.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
-import { d as defineCustomElement$1 } from './p-BGmTmdLe.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
+import { d as defineCustomElement$1 } from './p-B6Z_VKKH.js';
 
 const kritzelBackToContentCss = () => `:host{display:block;z-index:var(--kritzel-back-to-content-z-index, 1000)}.back-to-content-button{display:flex;align-items:center;justify-content:center;height:var(--kritzel-back-to-content-height, 50px);box-sizing:border-box;gap:var(--kritzel-back-to-content-gap, 6px);padding:var(--kritzel-back-to-content-padding, 0 16px);border:var(--kritzel-back-to-content-border, 1px solid #ebebeb);border-radius:var(--kritzel-back-to-content-border-radius, 12px);background-color:var(--kritzel-back-to-content-background-color, #ffffff);color:var(--kritzel-back-to-content-color, #000000);font-size:var(--kritzel-back-to-content-font-size, 14px);font-weight:var(--kritzel-back-to-content-font-weight, 500);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-back-to-content-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));opacity:0;pointer-events:none;transition:opacity 0.2s ease-out, transform 0.2s ease-out, background-color 0.15s ease-out;-webkit-tap-highlight-color:transparent;user-select:none}.back-to-content-button.visible{opacity:1;pointer-events:auto}@media (hover: hover){.back-to-content-button:hover{background-color:var(--kritzel-back-to-content-hover-background-color, hsl(0, 0%, 0%, 4.3%))}}.back-to-content-button:active{background-color:var(--kritzel-back-to-content-active-background-color, hsl(0, 0%, 0%, 8.6%))}`;
 
@@ -28,7 +28,7 @@ const KritzelBackToContent = /*@__PURE__*/ proxyCustomElement(class KritzelBackT
         this.backToContent.emit();
     };
     render() {
-        return (h(Host, { key: 'c5c829f14100bd2d658f0dc1e32553f9adccb129' }, h("button", { key: 'a3cde6688b78466c79721d55b087c91490c6c378', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '8c31350e301b6852f2e9cf9d897281ff118587c7', name: "chevrons-left" }))));
+        return (h(Host, { key: '335205a7ec6430235c54941828b7491d75472778' }, h("button", { key: '176e473183c4d58607a697c924035baec67c138d', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '44ad49916d1ee99fed8e635de65f7ae337235ecb', name: "chevronsLeft" }))));
     }
     static get style() { return kritzelBackToContentCss(); }
 }, [513, "kritzel-back-to-content", {

package/dist/components/{p-h_uh_Njf.js → p-VYGV0cr3.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
 
-const kritzelOpacitySliderCss = () => `:host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(      to right,      var(--kritzel-opacity-slider-active-color, #007AFF) 0%,      var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%),      var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%),      var(--kritzel-opacity-slider-track-color, #e0e0e0) 100%    );outline:none;cursor:var(--kritzel-global-pointer-cursor, pointer)}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-moz-range-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.opacity-slider:focus{outline:none}.opacity-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}`;
+const kritzelOpacitySliderCss = () => `:host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(     to right,     var(--kritzel-opacity-slider-active-color, #007AFF) 0%,     var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%),     var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%),     var(--kritzel-opacity-slider-track-color, #e0e0e0) 100%   );outline:none;cursor:var(--kritzel-global-pointer-cursor, pointer)}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-moz-range-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.opacity-slider:focus{outline:none}.opacity-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}`;
 
 const KritzelOpacitySlider = /*@__PURE__*/ proxyCustomElement(class KritzelOpacitySlider extends H {
     constructor(registerHost) {
@@ -33,7 +33,7 @@ const KritzelOpacitySlider = /*@__PURE__*/ proxyCustomElement(class KritzelOpaci
     }
     render() {
         const percentage = this.getPercentage();
-        return (h(Host, { key: '6de0826f246bd01ec2230aac0820439059ad73c9' }, h("div", { key: 'f1f00e8e6162a8731ddeb5a857475d189ba803b1', class: "opacity-container" }, h("div", { key: '964d210f3509480756fc20795a00bda5fcfa0fb7', class: "slider-wrapper" }, h("input", { key: '40123306802ac13259e1ccd98f04739ecafbb3b4', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+        return (h(Host, { key: 'bb0e9f56f5ede377700710940c29cc05c767549a' }, h("div", { key: 'aea9ee85b87ff8a91b4119f5ff008dd6d838c05b', class: "opacity-container" }, h("div", { key: '45e6e8b7f6ec871935143ef45996114ead9d9018', class: "slider-wrapper" }, h("input", { key: '7e3d4877bf04110784c20d2b4633b7c489d54a82', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
                 '--slider-progress': `${percentage}%`,
                 '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
             } })))));

package/dist/components/{p-DyRJFg4w.js → p-YGBl60lb.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
 
 const kritzelSlideToggleCss = () => `:host{display:inline-flex;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;z-index:1;-webkit-tap-highlight-color:transparent}:host(:focus-visible) .toggle-track{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}:host(.disabled){opacity:0.5;pointer-events:none;cursor:default}.toggle-track{position:relative;width:var(--kritzel-slide-toggle-width, 40px);height:var(--kritzel-slide-toggle-height, 22px);background-color:var(--kritzel-slide-toggle-track-color, #ccc);border-radius:var(--kritzel-slide-toggle-border-radius, 11px);transition:background-color var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-track{background-color:var(--kritzel-slide-toggle-track-checked-color, #007AFF)}.toggle-thumb{position:absolute;top:50%;left:2px;transform:translateY(-50%);width:var(--kritzel-slide-toggle-thumb-size, 18px);height:var(--kritzel-slide-toggle-thumb-size, 18px);background-color:var(--kritzel-slide-toggle-thumb-color, #fff);border-radius:50%;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:left var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-thumb{left:calc(var(--kritzel-slide-toggle-width, 40px) - var(--kritzel-slide-toggle-thumb-size, 18px) - 2px)}`;
 
@@ -32,7 +32,7 @@ const KritzelSlideToggle = /*@__PURE__*/ proxyCustomElement(class KritzelSlideTo
         }
     };
     render() {
-        return (h(Host, { key: 'cedab6d6c0ae42325b68c6f17696f7527aa629be', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: '8702a1d196a1a5f9fda7f8d1634fba9a580e3f66', class: "toggle-track" }, h("div", { key: '33e2986727467bcedb31c267a7d6c173e6fc0add', class: "toggle-thumb" }))));
+        return (h(Host, { key: '21474507cafab44ac713e7732d2bb3b1323951e1', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: '9d973f03b674ae90c0f3dc78680feffb5e74e2f0', class: "toggle-track" }, h("div", { key: '3988d20da458ace01a0bb1af196d28c8fd290042', class: "toggle-thumb" }))));
     }
     static get style() { return kritzelSlideToggleCss(); }
 }, [513, "kritzel-slide-toggle", {

package/dist/components/{p-hQwVRh0t.js → p-clFfXKKn.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
-import { d as defineCustomElement$5 } from './p-peZjvnkK.js';
-import { d as defineCustomElement$4 } from './p-R1D8Sr0l.js';
-import { d as defineCustomElement$3 } from './p-BGmTmdLe.js';
-import { d as defineCustomElement$2 } from './p-B5xYV1o3.js';
-import { d as defineCustomElement$1 } from './p-B_gT0lCn.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
+import { d as defineCustomElement$5 } from './p-C0ns8IPO.js';
+import { d as defineCustomElement$4 } from './p-B-U13Ew1.js';
+import { d as defineCustomElement$3 } from './p-B6Z_VKKH.js';
+import { d as defineCustomElement$2 } from './p-C68YXjuL.js';
+import { d as defineCustomElement$1 } from './p-B2-SxV8E.js';
 
 const kritzelExportCss = () => `:host{display:flex;flex-direction:column;min-height:0}.export-content{display:flex;flex-direction:column;gap:16px;padding:0;flex:1}.export-content kritzel-pill-tabs{align-self:center}.export-tab-content{display:flex;flex-direction:column;gap:16px;min-height:330px}.format-selection{display:flex;flex-direction:column;gap:6px}.format-selection label{font-size:14px;font-weight:500;color:var(--kritzel-global-text-primary, #333)}.export-primary-button{width:100%;padding:12px 24px;background-color:var(--kritzel-global-primary-color, #007AFF);color:var(--kritzel-global-primary-text-color, #fff);border:none;border-radius:var(--kritzel-button-border-radius, 8px);font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;-webkit-tap-highlight-color:transparent}.export-primary-button:hover{background-color:var(--kritzel-global-primary-hover-color, #0066d6)}.export-primary-button:focus-visible{outline:revert;outline-offset:revert}.preview-container{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin-bottom:8px}.preview-container img{max-width:100%;max-height:250px;object-fit:contain;box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);border-radius:4px;border:1px solid var(--kritzel-global-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-global-text-secondary, #666)}@media (max-width: 576px){.export-tab-content{flex:1;min-height:0}}`;
 
@@ -90,7 +90,7 @@ const KritzelExport = /*@__PURE__*/ proxyCustomElement(class KritzelExport exten
         return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: this.terms['export.filename.label'] ?? 'Filename', value: this.exportFilename, placeholder: this.terms['export.filename.placeholder'] ?? 'Enter filename', suffix: ".json", onValueChange: this.handleFilenameChange })));
     }
     render() {
-        return (h(Host, { key: '60baf80591c9456aa32443a43f9af102ed711494' }, h("kritzel-dialog", { key: 'f8c744284000b356dc9c3de12252c0358909c9de', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: '9f5f5e56302cc9c1d1c173757fe720871e085ca0', class: "export-content" }, h("kritzel-pill-tabs", { key: '3976ad59d19c90c8d1a605815cb7d90cebede5e3', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: '992dad8deb946feebd453d452f0e7338dbdb2236', slot: "footer" }, h("button", { key: '8c9d907a82a45e9ad2b48618ff6e812c804d7252', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
+        return (h(Host, { key: '94d55a7c75cdad6c8772180656016ef7a84ea937' }, h("kritzel-dialog", { key: '7564885a16e21f036e4943f9be923ef3db07ab77', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: '40fceeacffc79d70ecea2c397f19852e85756d50', class: "export-content" }, h("kritzel-pill-tabs", { key: 'a2bb5be3df21f940d8e3f7d27fa9fbc956f16a55', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: '29a0fcb85755577655401c96643a1956aedfa27d', slot: "footer" }, h("button", { key: 'f003963d407005c67740b6620b8983dcf3c8977a', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
     }
     static get style() { return kritzelExportCss(); }
 }, [513, "kritzel-export", {

package/dist/components/{p-SLnqczCS.js → p-dUcCDLDF.js}

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
 
 const ABSOLUTE_SCALE_MAX = 1000;
 const ABSOLUTE_SCALE_MIN = 0.0001;
 /** Destination opened when the "Powered by Kritzel" watermark is clicked. */
 const KRITZEL_WEBSITE_URL = 'https://kritzel.io';
 
-const kritzelWatermarkCss = () => `:host{position:absolute;bottom:var(--kritzel-watermark-offset-bottom, 12px);right:var(--kritzel-watermark-offset-right, 12px);z-index:10000;pointer-events:none}.watermark-link{pointer-events:auto;display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--kritzel-watermark-border-radius, 6px);font-family:var(--kritzel-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);font-size:var(--kritzel-watermark-font-size, 11px);line-height:1;text-decoration:none;color:var(--kritzel-watermark-color, rgba(60, 60, 60, 0.75));background-color:var(--kritzel-watermark-background, rgba(255, 255, 255, 0.6));box-shadow:var(--kritzel-watermark-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.12));opacity:var(--kritzel-watermark-opacity, 0.85);transition:opacity 150ms ease;user-select:none}.watermark-link:hover{opacity:1}`;
+const kritzelWatermarkCss = () => `:host{position:absolute;bottom:var(--kritzel-watermark-offset-bottom, 12px);right:var(--kritzel-watermark-offset-right, 12px);z-index:10000;pointer-events:none}.watermark-link{pointer-events:auto;display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--kritzel-watermark-border-radius, 6px);font-family:var(--kritzel-global-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);font-size:var(--kritzel-watermark-font-size, 11px);line-height:1;text-decoration:none;color:var(--kritzel-watermark-color, rgba(60, 60, 60, 0.75));background-color:var(--kritzel-watermark-background, rgba(255, 255, 255, 0.6));box-shadow:var(--kritzel-watermark-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.12));opacity:var(--kritzel-watermark-opacity, 0.85);transition:opacity 150ms ease;user-select:none}.watermark-link:hover{opacity:1}`;
 
 const KritzelWatermark = /*@__PURE__*/ proxyCustomElement(class KritzelWatermark extends H {
     constructor(registerHost) {
@@ -25,7 +25,7 @@ const KritzelWatermark = /*@__PURE__*/ proxyCustomElement(class KritzelWatermark
     label;
     render() {
         const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
-        return (h(Host, { key: '2bacbc19d9469c7fcaf5d6b1b3133ec14d3ff864' }, h("a", { key: '2de44e340afd092ed388b7575350af1ee9155d58', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
+        return (h(Host, { key: '5bc76650ecd1f82f5ed283d4433b0e5fc8937cab' }, h("a", { key: 'b0828f36df618e461794772d2e8f55c0a8cb357e', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
     }
     static get style() { return kritzelWatermarkCss(); }
 }, [513, "kritzel-watermark", {