kritzel-stencil 0.1.12 → 0.1.13

package/dist/cjs/kritzel-back-to-content_32.cjs.entry.js

@@ -536,7 +536,7 @@ class KritzelToolConfigHelper {
     }
 }
 
-const kritzelControlsCss = () => `:host{display:flex;flex-direction:column;user-select:none;max-width:calc(100vw - 16px)}: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;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;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-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-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-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;flex-shrink:0;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;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-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-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;max-width:calc(100vw - 16px)}: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;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-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-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-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-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;flex-shrink:0;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;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-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-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) {
@@ -954,7 +954,8 @@ class KritzelHTMLHelper {
         const focusableElements = [];
         const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
         const isVisible = (el) => {
-            return el.offsetParent !== null;
+            const style = window.getComputedStyle(el);
+            return style.display !== 'none' && style.visibility !== 'hidden';
         };
         const find = (element) => {
             // Check if the element itself is focusable
@@ -979,7 +980,7 @@ class KritzelHTMLHelper {
     }
 }
 
-const kritzelDialogCss = () => `:host{display:contents}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out,      opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}@media (max-width: 576px){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-pointer-cursor, pointer);transition:background-color 150ms ease,      color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:focus{outline:none}.close-button:focus-visible{outline:2px solid var(--kritzel-dialog-focus-ring-color, #0066cc);outline-offset:2px}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;scrollbar-color:#ebebeb transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}`;
+const kritzelDialogCss = () => `:host{display:contents}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out,      opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}@media (max-width: 576px){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-pointer-cursor, pointer);transition:background-color 150ms ease,      color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.close-button:focus-visible{outline:revert;outline-offset:revert}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;scrollbar-color:#ebebeb transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}`;
 
 const KritzelDialog = class {
     constructor(hostRef) {
@@ -1105,19 +1106,13 @@ const KritzelDialog = class {
         slots.forEach(slot => {
             const assigned = slot.assignedElements({ flatten: true });
             assigned.forEach(el => {
+                // Use KritzelHTMLHelper to find focusable elements including those in nested shadow DOMs
                 const elements = KritzelHTMLHelper.getFocusableElements(el);
                 focusable.push(...elements);
-                if (this.isFocusable(el)) {
-                    focusable.push(el);
-                }
             });
         });
         return focusable;
     }
-    isFocusable(el) {
-        const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
-        return el.matches(focusableSelector);
-    }
     handleTabKey(event) {
         const focusableElements = this.getSlottedFocusableElements();
         const closeButton = this.host.shadowRoot?.querySelector('.close-button');
@@ -22701,7 +22696,7 @@ const KritzelEngine = class {
 };
 KritzelEngine.style = kritzelEngineCss();
 
-const kritzelExportCss = () => `:host{display:block}.export-content{display:flex;flex-direction:column;gap:16px;padding:16px 0}.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-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-text-secondary, #666)}.export-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}.export-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;border:1px solid var(--kritzel-border-color, #dbdbdb);border-radius:8px;background-color:transparent;cursor:pointer;transition:all 0.2s ease;color:var(--kritzel-text-primary, #333)}.export-button:hover{background-color:var(--kritzel-hover-background, #f5f5f5);border-color:var(--kritzel-primary-color, #007bff);color:var(--kritzel-primary-color, #007bff)}.export-button .icon-container{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:var(--kritzel-background-secondary, #f0f0f0)}.export-button span{font-weight:500;font-size:14px}`;
+const kritzelExportCss = () => `:host{display:block}.export-content{display:flex;flex-direction:column;gap:16px;padding:16px 0}.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-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-text-secondary, #666)}.export-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}.export-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;border:1px solid var(--kritzel-border-color, #dbdbdb);border-radius:8px;background-color:transparent;cursor:pointer;transition:all 0.2s ease;color:var(--kritzel-text-primary, #333)}.export-button:hover{background-color:var(--kritzel-hover-background, #f5f5f5);border-color:var(--kritzel-primary-color, #007bff);color:var(--kritzel-primary-color, #007bff)}.export-button:focus-visible{outline:revert;outline-offset:revert}.export-button .icon-container{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:var(--kritzel-background-secondary, #f0f0f0)}.export-button span{font-weight:500;font-size:14px}`;
 
 const KritzelExport = class {
     constructor(hostRef) {
@@ -22936,7 +22931,7 @@ const KritzelLineEndings = class {
 };
 KritzelLineEndings.style = kritzelLineEndingsCss();
 
-const kritzelMasterDetailCss = () => `:host{display:block;width:100%;height:100%}.master-detail-container{display:flex;width:100%;height:100%;min-height:var(--kritzel-master-detail-min-height, 300px);gap:var(--kritzel-master-detail-gap, 0);background-color:var(--kritzel-master-detail-background-color, transparent)}.master-menu{display:flex;flex-direction:column;width:var(--kritzel-master-detail-menu-width, 200px);min-width:var(--kritzel-master-detail-menu-min-width, 160px);padding:var(--kritzel-master-detail-menu-padding, 8px);background-color:var(--kritzel-master-detail-menu-background-color, #ffffff);border-right:var(--kritzel-master-detail-menu-border-right, 1px solid #ebebeb);gap:var(--kritzel-master-detail-menu-gap, 4px);overflow-y:auto}.menu-item{display:flex;align-items:center;gap:var(--kritzel-master-detail-menu-item-gap, 10px);padding:var(--kritzel-master-detail-menu-item-padding, 10px 12px);border:none;border-radius:var(--kritzel-master-detail-menu-item-border-radius, 6px);background-color:var(--kritzel-master-detail-menu-item-background-color, transparent);color:var(--kritzel-master-detail-menu-item-color, #333333);font-family:inherit;font-size:var(--kritzel-master-detail-menu-item-font-size, 14px);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400);text-align:left;cursor:var(--kritzel-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;-webkit-tap-highlight-color:transparent}.menu-item:hover:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item:active:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-active-background-color, #e0e0e0)}.menu-item.is-selected{background-color:var(--kritzel-master-detail-menu-item-selected-background-color, #0066cc);color:var(--kritzel-master-detail-menu-item-selected-color, #ffffff);font-weight:var(--kritzel-master-detail-menu-item-selected-font-weight, 500)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-selected-hover-background-color, #0052a3)}.menu-item.is-disabled{color:var(--kritzel-master-detail-menu-item-disabled-color, #999999);cursor:not-allowed;opacity:0.6}.menu-item:focus-visible{outline:var(--kritzel-master-detail-menu-item-focus-outline, 2px solid #0066cc);outline-offset:var(--kritzel-master-detail-menu-item-focus-outline-offset, -2px)}.menu-item.is-selected:focus-visible{outline-color:var(--kritzel-master-detail-menu-item-selected-focus-outline-color, #ffffff)}.menu-item-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-panel{flex:1;min-height:0;padding:var(--kritzel-master-detail-detail-padding, 16px);background-color:var(--kritzel-master-detail-detail-background-color, #ffffff);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-color:#ebebeb transparent;scrollbar-width:thin}.detail-panel:focus{outline:none}.detail-panel:focus-visible{outline:var(--kritzel-master-detail-detail-focus-outline, 2px solid #0066cc);outline-offset:var(--kritzel-master-detail-detail-focus-outline-offset, -2px)}.mobile-back-button{display:none;align-items:center;gap:8px;background:none;border:none;padding:0 0 16px 0;cursor:pointer;color:var(--kritzel-master-detail-back-button-color, #333333);font-weight:500;font-size:14px;font-family:inherit}.mobile-back-icon{display:flex;align-items:center;flex-shrink:0}.menu-item-chevron{display:none;flex-shrink:0;margin-left:auto;color:var(--kritzel-master-detail-menu-item-chevron-color, #999999)}.menu-item-chevron svg{width:16px;height:16px;stroke:currentColor}@media (max-width: 768px){.master-menu{width:100%;border-right:none}.detail-panel{display:none;width:100%}.master-detail-container.is-mobile-detail-visible .master-menu{display:none}.master-detail-container.is-mobile-detail-visible .detail-panel{display:block}.mobile-back-button{display:flex}.menu-item.is-selected{background-color:transparent;color:var(--kritzel-master-detail-menu-item-color, #333333);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item-chevron{display:flex;align-items:center}}`;
+const kritzelMasterDetailCss = () => `:host{display:block;width:100%;height:100%}.master-detail-container{display:flex;width:100%;height:100%;min-height:var(--kritzel-master-detail-min-height, 300px);gap:var(--kritzel-master-detail-gap, 0);background-color:var(--kritzel-master-detail-background-color, transparent)}.master-menu{display:flex;flex-direction:column;width:var(--kritzel-master-detail-menu-width, 200px);min-width:var(--kritzel-master-detail-menu-min-width, 160px);padding:var(--kritzel-master-detail-menu-padding, 8px);background-color:var(--kritzel-master-detail-menu-background-color, #ffffff);border-right:var(--kritzel-master-detail-menu-border-right, 1px solid #ebebeb);gap:var(--kritzel-master-detail-menu-gap, 4px);overflow-y:auto}.menu-item{display:flex;align-items:center;gap:var(--kritzel-master-detail-menu-item-gap, 10px);padding:var(--kritzel-master-detail-menu-item-padding, 10px 12px);border:none;border-radius:var(--kritzel-master-detail-menu-item-border-radius, 6px);background-color:var(--kritzel-master-detail-menu-item-background-color, transparent);color:var(--kritzel-master-detail-menu-item-color, #333333);font-family:inherit;font-size:var(--kritzel-master-detail-menu-item-font-size, 14px);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400);text-align:left;cursor:var(--kritzel-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;-webkit-tap-highlight-color:transparent}.menu-item:hover:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item:active:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-active-background-color, #e0e0e0)}.menu-item.is-selected{background-color:var(--kritzel-master-detail-menu-item-selected-background-color, #0066cc);color:var(--kritzel-master-detail-menu-item-selected-color, #ffffff);font-weight:var(--kritzel-master-detail-menu-item-selected-font-weight, 500)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-selected-hover-background-color, #0052a3)}.menu-item.is-disabled{color:var(--kritzel-master-detail-menu-item-disabled-color, #999999);cursor:not-allowed;opacity:0.6}.menu-item:focus-visible{outline:var(--kritzel-master-detail-menu-item-focus-outline, revert);outline-offset:var(--kritzel-master-detail-menu-item-focus-outline-offset, revert)}.menu-item-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-panel{flex:1;min-height:0;padding:var(--kritzel-master-detail-detail-padding, 16px);background-color:var(--kritzel-master-detail-detail-background-color, #ffffff);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-color:#ebebeb transparent;scrollbar-width:thin}.detail-panel:focus{outline:none}.detail-panel:focus-visible{outline:var(--kritzel-master-detail-detail-focus-outline, revert);outline-offset:var(--kritzel-master-detail-detail-focus-outline-offset, revert)}.mobile-back-button{display:none;align-items:center;gap:8px;background:none;border:none;padding:0 0 16px 0;cursor:pointer;color:var(--kritzel-master-detail-back-button-color, #333333);font-weight:500;font-size:14px;font-family:inherit}.mobile-back-icon{display:flex;align-items:center;flex-shrink:0}.menu-item-chevron{display:none;flex-shrink:0;margin-left:auto;color:var(--kritzel-master-detail-menu-item-chevron-color, #999999)}.menu-item-chevron svg{width:16px;height:16px;stroke:currentColor}@media (max-width: 768px){.master-menu{width:100%;border-right:none}.detail-panel{display:none;width:100%}.master-detail-container.is-mobile-detail-visible .master-menu{display:none}.master-detail-container.is-mobile-detail-visible .detail-panel{display:block}.mobile-back-button{display:flex}.menu-item.is-selected{background-color:transparent;color:var(--kritzel-master-detail-menu-item-color, #333333);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item-chevron{display:flex;align-items:center}}`;
 
 const KritzelMasterDetail = class {
     constructor(hostRef) {
@@ -23024,30 +23019,24 @@ const KritzelMasterDetail = class {
             this.tabRefs[index] = el;
         }
     };
-    getTabIndex(item, index) {
+    getTabIndex(item, _index) {
         if (item.disabled)
             return -1;
-        // If there's a selected item, only that one gets tabindex 0
-        if (this.selectedItemId) {
-            return item.id === this.selectedItemId ? 0 : -1;
-        }
-        // Otherwise, first enabled item gets tabindex 0
-        const firstEnabledIndex = this.items.findIndex(it => !it.disabled);
-        return index === firstEnabledIndex ? 0 : -1;
+        return 0;
     }
     render() {
         const selectedItem = this.items.find(item => item.id === this.selectedItemId);
         const panelId = 'master-detail-panel';
         const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
-        return (index.h(index.Host, { key: '80d604db70f6986a0a88d057b22a3c82f9d19713' }, index.h("div", { key: 'a6269c03c1018bf8318ede1eb1699429e62ec85d', class: {
+        return (index.h(index.Host, { key: '28b34d09819dca22b9edff8367a838e5d161132a' }, index.h("div", { key: '53107e6781946c406c9fccae465d003ef6571cfd', class: {
                 'master-detail-container': true,
                 'is-mobile-detail-visible': this.showMobileDetail,
-            } }, index.h("nav", { key: '843182b43e4b2f83488b1a3406d8deb0e5ee929f', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index$1) => (index.h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index$1), class: {
+            } }, index.h("nav", { key: 'd496f8b5975250a2a0ed7007dfeac3875a980e09', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index$1) => (index.h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index$1), class: {
                 'menu-item': true,
                 'is-selected': item.id === this.selectedItemId,
                 'is-disabled': !!item.disabled,
                 'is-focused': index$1 === this.focusedIndex,
-            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index$1), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index$1), onFocus: () => this.handleFocus(index$1), onBlur: this.handleBlur }, item.icon && (index.h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), index.h("span", { class: "menu-item-label" }, item.label), index.h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "m9 18 6-6-6-6" }))))))), index.h("div", { key: '800c82b7558ca7d5c65b24e0439fe6c5fd988063', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId, tabIndex: 0 }, index.h("button", { key: 'ab522c8b0bff8082ae6a5e85f6ea1ef3b36f37f6', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, index.h("kritzel-icon", { key: '6028f75e3ccf5356f06f8a62f1f609f64c536cb1', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), index.h("slot", { key: '82353e43a8fde77c9ca9972593de3461876642f1' })))));
+            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index$1), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index$1), onFocus: () => this.handleFocus(index$1), onBlur: this.handleBlur }, item.icon && (index.h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), index.h("span", { class: "menu-item-label" }, item.label), index.h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "m9 18 6-6-6-6" }))))))), index.h("div", { key: '8cad78be4c26bd85903caa9debf14517fb6f5f75', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, index.h("button", { key: 'f185a12b0c60bac5bdd4b6992bd9f6cb653d3253', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, index.h("kritzel-icon", { key: '333e675a242b9d075aaa78f4ee005539b563a6b9', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), index.h("slot", { key: 'ccdf01882b30eea4227eb0da23fccc80fee1937e' })))));
     }
     static get watchers() { return {
         "selectedItemId": [{
@@ -23057,7 +23046,7 @@ const KritzelMasterDetail = class {
 };
 KritzelMasterDetail.style = kritzelMasterDetailCss();
 
-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;-webkit-tap-highlight-color:transparent;outline:none}:host:focus-visible{outline:auto}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}`;
 
 const KritzelMenu = class {
     constructor(hostRef) {
@@ -23125,7 +23114,7 @@ const KritzelMenu = class {
 };
 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);-webkit-tap-highlight-color:transparent}:host:focus:not(:focus-visible){outline:none}: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) {
@@ -23649,7 +23638,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.12';
+const KRITZEL_VERSION = '0.1.13';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:500;color:var(--kritzel-settings-label-color, #333333);margin:0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}`;
 

package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.css

@@ -132,17 +132,13 @@
   color: var(--kritzel-dialog-close-button-hover-color, #1a1a1a);
 }
 
-.close-button:focus {
-  outline: none;
+.close-button:active {
+  background-color: var(--kritzel-dialog-close-button-active-background, #ebebeb);
 }
 
 .close-button:focus-visible {
-  outline: 2px solid var(--kritzel-dialog-focus-ring-color, #0066cc);
-  outline-offset: 2px;
-}
-
-.close-button:active {
-  background-color: var(--kritzel-dialog-close-button-active-background, #ebebeb);
+  outline: revert;
+  outline-offset: revert;
 }
 
 .dialog-body {

package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.js

@@ -119,19 +119,13 @@ export class KritzelDialog {
         slots.forEach(slot => {
             const assigned = slot.assignedElements({ flatten: true });
             assigned.forEach(el => {
+                // Use KritzelHTMLHelper to find focusable elements including those in nested shadow DOMs
                 const elements = KritzelHTMLHelper.getFocusableElements(el);
                 focusable.push(...elements);
-                if (this.isFocusable(el)) {
-                    focusable.push(el);
-                }
             });
         });
         return focusable;
     }
-    isFocusable(el) {
-        const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
-        return el.matches(focusableSelector);
-    }
     handleTabKey(event) {
         const focusableElements = this.getSlottedFocusableElements();
         const closeButton = this.host.shadowRoot?.querySelector('.close-button');

package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.css

@@ -70,12 +70,8 @@
 }
 
 .menu-item:focus-visible {
-  outline: var(--kritzel-master-detail-menu-item-focus-outline, 2px solid #0066cc);
-  outline-offset: var(--kritzel-master-detail-menu-item-focus-outline-offset, -2px);
-}
-
-.menu-item.is-selected:focus-visible {
-  outline-color: var(--kritzel-master-detail-menu-item-selected-focus-outline-color, #ffffff);
+  outline: var(--kritzel-master-detail-menu-item-focus-outline, revert);
+  outline-offset: var(--kritzel-master-detail-menu-item-focus-outline-offset, revert);
 }
 
 /* Menu Item Icon */
@@ -111,8 +107,8 @@
 }
 
 .detail-panel:focus-visible {
-  outline: var(--kritzel-master-detail-detail-focus-outline, 2px solid #0066cc);
-  outline-offset: var(--kritzel-master-detail-detail-focus-outline-offset, -2px);
+  outline: var(--kritzel-master-detail-detail-focus-outline, revert);
+  outline-offset: var(--kritzel-master-detail-detail-focus-outline-offset, revert);
 }
 
 /* Mobile Back Button */

package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js

@@ -81,30 +81,24 @@ export class KritzelMasterDetail {
             this.tabRefs[index] = el;
         }
     };
-    getTabIndex(item, index) {
+    getTabIndex(item, _index) {
         if (item.disabled)
             return -1;
-        // If there's a selected item, only that one gets tabindex 0
-        if (this.selectedItemId) {
-            return item.id === this.selectedItemId ? 0 : -1;
-        }
-        // Otherwise, first enabled item gets tabindex 0
-        const firstEnabledIndex = this.items.findIndex(it => !it.disabled);
-        return index === firstEnabledIndex ? 0 : -1;
+        return 0;
     }
     render() {
         const selectedItem = this.items.find(item => item.id === this.selectedItemId);
         const panelId = 'master-detail-panel';
         const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
-        return (h(Host, { key: '80d604db70f6986a0a88d057b22a3c82f9d19713' }, h("div", { key: 'a6269c03c1018bf8318ede1eb1699429e62ec85d', class: {
+        return (h(Host, { key: '28b34d09819dca22b9edff8367a838e5d161132a' }, h("div", { key: '53107e6781946c406c9fccae465d003ef6571cfd', class: {
                 'master-detail-container': true,
                 'is-mobile-detail-visible': this.showMobileDetail,
-            } }, h("nav", { key: '843182b43e4b2f83488b1a3406d8deb0e5ee929f', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
+            } }, h("nav", { key: 'd496f8b5975250a2a0ed7007dfeac3875a980e09', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
                 'menu-item': true,
                 'is-selected': item.id === this.selectedItemId,
                 'is-disabled': !!item.disabled,
                 'is-focused': index === this.focusedIndex,
-            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '800c82b7558ca7d5c65b24e0439fe6c5fd988063', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId, tabIndex: 0 }, h("button", { key: 'ab522c8b0bff8082ae6a5e85f6ea1ef3b36f37f6', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '6028f75e3ccf5356f06f8a62f1f609f64c536cb1', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '82353e43a8fde77c9ca9972593de3461876642f1' })))));
+            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '8cad78be4c26bd85903caa9debf14517fb6f5f75', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: 'f185a12b0c60bac5bdd4b6992bd9f6cb653d3253', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '333e675a242b9d075aaa78f4ee005539b563a6b9', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: 'ccdf01882b30eea4227eb0da23fccc80fee1937e' })))));
     }
     static get is() { return "kritzel-master-detail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-menu/kritzel-menu.css

@@ -15,8 +15,13 @@
   scrollbar-width: thin;
   max-height: var(--kritzel-portal-max-height, 300px);
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
 }
 
+:host:focus-visible {
+  outline: auto;
+}
 
 .has-open-child-overlay {
   position: absolute;

package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.css

@@ -13,6 +13,11 @@
   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);
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host:focus:not(:focus-visible) {
+  outline: none;
 }
 
 :host(:hover) .menu-item-overlay,

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css

@@ -37,6 +37,8 @@
   overflow-y: hidden;
   flex: 1 1 auto;
   min-width: 0;
+  padding: 4px;
+  margin: -4px;
   
   /* Hide scrollbar for all browsers */
   scrollbar-width: none;

package/dist/collection/components/ui/kritzel-export/kritzel-export.css

@@ -63,6 +63,11 @@
   color: var(--kritzel-primary-color, #007bff);
 }
 
+.export-button:focus-visible {
+  outline: revert;
+  outline-offset: revert;
+}
+
 .export-button .icon-container {
   display: flex;
   align-items: center;

package/dist/collection/constants/version.js

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export const KRITZEL_VERSION = '0.1.12';
+export const KRITZEL_VERSION = '0.1.13';

package/dist/collection/helpers/html.helper.js

@@ -37,7 +37,8 @@ export class KritzelHTMLHelper {
         const focusableElements = [];
         const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
         const isVisible = (el) => {
-            return el.offsetParent !== null;
+            const style = window.getComputedStyle(el);
+            return style.display !== 'none' && style.visibility !== 'hidden';
         };
         const find = (element) => {
             // Check if the element itself is focusable

package/dist/components/kritzel-controls.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-BvoIoyaZ.js";const a=o,p=s;export{a as KritzelControls,p as defineCustomElement}
+import{K as o,d as s}from"./p-C8jozyvo.js";const p=o,r=s;export{p as KritzelControls,r as defineCustomElement}

package/dist/components/kritzel-dialog.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-DCFa1WDS.js";const a=o,p=s;export{a as KritzelDialog,p as defineCustomElement}
+import{K as o,d as r}from"./p-BtGrZ0-u.js";const s=o,t=r;export{s as KritzelDialog,t as defineCustomElement}

package/dist/components/kritzel-editor.js

@@ -1 +1 @@
-import{p as t,H as e,c as s,h as o,d as i,t as r}from"./p-Cj-I2_Og.js";import{K as a,d as n}from"./p-DPPpa9So.js";import{D as l,S as c,h as p,e as m,f as k,g as d,i as b,j as h}from"./p-CuifaWTr.js";import{L as u,M as f,K as g,E as z,N as y}from"./p-Csm0Kf0_.js";import{K as j}from"./p-n789Y3S-.js";import{K as C}from"./p-l10It7Nm.js";import{d as x}from"./p-DSMMwH1h.js";import{d as E}from"./p-CCiIxqPN.js";import{d as w}from"./p-4IV4i5r-.js";import{d as v}from"./p-BCZgrVsy.js";import{d as S}from"./p-BvoIoyaZ.js";import{d as I}from"./p-JdxbP-1P.js";import{d as R}from"./p-DCFa1WDS.js";import{d as O}from"./p-CIiUpoDZ.js";import{d as W}from"./p-DB-e1jRv.js";import{d as M}from"./p-BNYfuHT_.js";import{d as B}from"./p-DN1_B6ky.js";import{d as V}from"./p-CnO82wQT.js";import{d as D}from"./p-5Vxv1ZKh.js";import{d as T}from"./p-Bz_LzbTD.js";import{d as P,a as K}from"./p-6yo07JPM.js";import{d as A}from"./p-BVGy2ETQ.js";import{d as J}from"./p-BG4Z2Dwn.js";import{d as U}from"./p-yzi-W-0P.js";import{d as N}from"./p-Dm9n3RrJ.js";import{d as F}from"./p-BbC4EJrJ.js";import{d as G}from"./p-BdnNVYxB.js";import{d as Y}from"./p-CP3i626h.js";import{d as Z}from"./p--aa4aJEU.js";import{d as _}from"./p-K1KgiJP8.js";import{d as L}from"./p-DuK31Tjt.js";import{d as q}from"./p-zoMPunTt.js";import{d as H}from"./p-BhTMzfWj.js";import{d as Q}from"./p-CXGqvg3q.js";const X={type:"pen",color:"#000000",size:16,palettes:{pen:[...l]}},$={color:"#000000",size:8,fontFamily:"Arial",palette:[...l]},tt={color:"#000000",size:4,palette:[...l],arrows:{end:{enabled:!0,style:"triangle"}}},et={shapeType:c.Rectangle,fillColor:"transparent",strokeColor:"#000000",strokeWidth:4,fontColor:"#000000",fontSize:16,fontFamily:"Arial",palette:[...l]},st=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.isReady=s(this,"isReady"),this.objectsChange=s(this,"objectsChange"),this.undoStateChange=s(this,"undoStateChange")}get host(){return this}scaleMax=u;scaleMin=f;lockDrawingScale=!0;controls=[{name:"selection",type:"tool",isDefault:!0,tool:p,icon:"cursor"},{name:"brush",type:"tool",tool:m,icon:"pen",config:X},{name:"line",type:"tool",tool:k,icon:"arrow",config:tt},{name:"eraser",type:"tool",tool:g,icon:"eraser"},{name:"text",type:"tool",tool:d,icon:"type",config:$},{name:"shape",type:"tool",tool:b,icon:"shape-rectangle",config:et,subOptions:[{id:"rectangle",icon:"shape-rectangle",label:"Rectangle",value:c.Rectangle,toolProperty:"shapeType"},{id:"ellipse",icon:"shape-ellipse",label:"Ellipse",value:c.Ellipse,toolProperty:"shapeType"},{id:"triangle",icon:"shape-triangle",label:"Triangle",value:c.Triangle,toolProperty:"shapeType"}]},{name:"image",type:"tool",tool:z,icon:"image"},{name:"config",type:"config"}];globalContextMenuItems=[{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:t=>this.engineRef.paste(t.x,t.y)},{label:"Select All",icon:"select-all",action:()=>this.selectAllObjectsInViewport()}];objectContextMenuItems=[{label:"Copy",icon:"copy",action:()=>this.engineRef.copy()},{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:t=>this.engineRef.paste(t.x,t.y)},{label:"Delete",icon:"delete",action:()=>this.engineRef.delete()},{label:"Bring to Front",icon:"bring-to-front",action:()=>this.engineRef.bringToFront()},{label:"Send to Back",icon:"send-to-back",action:()=>this.engineRef.sendToBack()},{label:"Group",icon:"group",disabled:async()=>(await this.engineRef.getSelectedObjects()).length<2,action:()=>this.engineRef.group()},{label:"Ungroup",icon:"ungroup",disabled:async()=>!(await this.engineRef.getSelectedObjects()).some((t=>"KritzelGroup"===t.__class__)),action:()=>this.engineRef.ungroup()}];customSvgIcons={};isControlsVisible=!0;isUtilityPanelVisible=!0;syncConfig;isReady;objectsChange;undoStateChange;isEngineReady=!1;isControlsReady=!1;isWorkspaceManagerReady=!1;workspaces=[];activeWorkspace;isVirtualKeyboardOpen=!1;undoState=null;isBackToContentButtonVisible=!1;onIsEngineReady(t){t&&this.isControlsReady&&this.checkIsReady()}onIsControlsReady(t){t&&this.isEngineReady&&this.checkIsReady()}onWorkspacesChange(t){if(this.activeWorkspace){const e=t.find((t=>t.id===this.activeWorkspace.id));e&&e!==this.activeWorkspace&&(this.activeWorkspace=e)}}onTouchStart(t){t.cancelable&&t.preventDefault()}async getObjectById(t){return this.engineRef.getObjectById(t)}async addObject(t){return this.engineRef.addObject(t)}async updateObject(t,e){return this.engineRef.updateObject(t,e)}async removeObject(t){return this.engineRef.removeObject(t)}async getSelectedObjects(){return this.engineRef.getSelectedObjects()}async selectObjects(t){return this.engineRef.selectObjects(t)}async selectAllObjectsInViewport(){return this.engineRef.selectAllObjectsInViewport()}async clearSelection(){this.engineRef.clearSelection()}async centerObjectInViewport(t){return this.engineRef.centerObjectInViewport(t)}async backToContent(){return this.engineRef.backToContent()}async createWorkspace(t,e){const s=new j("workspace-"+Date.now(),t,e);return this.engineRef.createWorkspace(s)}async updateWorkspace(t){return this.engineRef.updateWorkspace(t)}async deleteWorkspace(t){return this.engineRef.deleteWorkspace(t)}async getWorkspaces(){return this.engineRef.getWorkspaces()}async getActiveWorkspace(){return this.engineRef.getActiveWorkspace()}engineRef;controlsRef;settingsRef;exportRef;splitButtonRef;componentWillLoad(){this.loadSettingsFromStorage()}componentDidLoad(){this.registerCustomSvgIcons(),this.listenForMobileKeyboard(),this.setOsSpecificCssVariables()}loadSettingsFromStorage(){const t=localStorage.getItem("kritzel-settings");if(t)try{const e=JSON.parse(t);"number"==typeof e.scaleMin&&(this.scaleMin=e.scaleMin),"number"==typeof e.scaleMax&&(this.scaleMax=e.scaleMax),"boolean"==typeof e.lockDrawingScale&&(this.lockDrawingScale=e.lockDrawingScale)}catch{}}async checkIsReady(){await customElements.whenDefined("kritzel-editor"),await customElements.whenDefined("kritzel-workspace-manager"),await customElements.whenDefined("kritzel-controls"),await customElements.whenDefined("kritzel-engine"),this.isEngineReady&&this.isControlsReady&&this.isWorkspaceManagerReady&&this.isReady.emit(this.host)}onEngineReady(t){this.isEngineReady=!0,this.activeWorkspace=t.detail.activeWorkspace,this.workspaces=t.detail.workspaces}handleWorkspacesChange(t){this.workspaces=t.detail}handleObjectsChange(t){this.objectsChange.emit(t.detail)}handleUndoStateChange(t){this.undoStateChange.emit(t.detail),this.undoState=t.detail}handleObjectsInViewportChange(t){console.log(t.detail.length),this.isBackToContentButtonVisible=!(t.detail.length>0)}handleSettingsChange(t){this.scaleMin=t.detail.scaleMin,this.scaleMax=t.detail.scaleMax,this.lockDrawingScale=t.detail.lockDrawingScale}async handleMoreMenuItemSelect(t){const{item:e}=t.detail;if("settings"===e.id&&this.settingsRef.open(),"export"===e.id){const t=await this.engineRef.getScreenshot("png");this.exportRef.open(t)}}registerCustomSvgIcons(){for(const[t,e]of Object.entries(this.customSvgIcons))a.register(t,e)}listenForMobileKeyboard(){h.onKeyboardVisibleChanged((t=>{this.isVirtualKeyboardOpen=t}))}setOsSpecificCssVariables(){switch(C.detectOS()){case"iOS":this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px"),this.host.style.setProperty("--kritzel-editor-controls-transition","cubic-bezier(0.25, 0.1, 0.25, 1.0)"),this.host.style.setProperty("--kritzel-editor-controls-transform","translateY(200%)"),this.host.style.setProperty("--kritzel-editor-controls-transition-duration","0.25s");break;case"Android":this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","24px");break;default:this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px")}}render(){return o(i,{key:"18113021f28ed340017ed15b3db83f275a1a45e0"},o("div",{key:"75c4fc6fb48133edc3b9b2152c09d1b77dc3efc6",class:"top-left-buttons"},o("kritzel-workspace-manager",{key:"c6a68abaf70ebcf37af1870b832c9a2bd2c984fb",workspaces:this.workspaces,activeWorkspace:this.activeWorkspace,onWorkspaceChange:t=>this.activeWorkspace=t.detail,onIsWorkspaceManagerReady:()=>this.isWorkspaceManagerReady=!0}),o("kritzel-back-to-content",{key:"e2be6fadb0a44dd6cc7a061767bc25b11dde5bf3",visible:this.isBackToContentButtonVisible,onBackToContent:()=>this.backToContent()})),o("kritzel-engine",{key:"16c19e74e9a3bd61845fa3542a5a84a12a3c8a05",ref:t=>this.engineRef=t,workspace:this.activeWorkspace,syncConfig:this.syncConfig,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale,scaleMin:this.scaleMin,globalContextMenuItems:this.globalContextMenuItems,objectContextMenuItems:this.objectContextMenuItems,onIsEngineReady:t=>this.onEngineReady(t),onWorkspacesChange:t=>this.handleWorkspacesChange(t),onObjectsChange:t=>this.handleObjectsChange(t),onUndoStateChange:t=>this.handleUndoStateChange(t),onObjectsInViewportChange:t=>this.handleObjectsInViewportChange(t)}),o("kritzel-controls",{key:"bb328c89b4ebbcce215e6ddf710126e7a71b5d30",class:{"keyboard-open":this.isVirtualKeyboardOpen},style:{display:this.isControlsVisible?"flex":"none"},ref:t=>this.controlsRef=t,controls:this.controls,isUtilityPanelVisible:this.isUtilityPanelVisible,undoState:this.undoState,onIsControlsReady:()=>this.isControlsReady=!0}),o("div",{key:"e7fd78379d8acc4715605c267aa352430633f6ac",class:"top-right-buttons"},o("kritzel-settings",{key:"13db94ca32cabfbd2d6664c58f55e30fcbf99221",ref:t=>this.settingsRef=t,onSettingsChange:t=>this.handleSettingsChange(t)}),o("kritzel-export",{key:"a7aa9b6ada8b0d47edf418c392d6d04598d36925",ref:t=>this.exportRef=t,onExportPng:()=>this.engineRef.exportViewportAsPng(),onExportSvg:()=>this.engineRef.exportViewportAsSvg()}),o("kritzel-more-menu",{key:"70a1a954f678e6b634d5965b23f570f79824af43",onItemSelect:t=>this.handleMoreMenuItemSelect(t)})))}static get watchers(){return{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}]}}static get style(){return"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{}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%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}"}},[512,"kritzel-editor",{scaleMax:[1026,"scale-max"],scaleMin:[1026,"scale-min"],lockDrawingScale:[1028,"lock-drawing-scale"],controls:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],customSvgIcons:[16],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],syncConfig:[16],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],undoState:[32],isBackToContentButtonVisible:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],backToContent:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}]}]),ot=st,it=function(){"undefined"!=typeof customElements&&["kritzel-editor","kritzel-back-to-content","kritzel-color","kritzel-color-palette","kritzel-context-menu","kritzel-controls","kritzel-cursor-trail","kritzel-dialog","kritzel-dropdown","kritzel-engine","kritzel-export","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-master-detail","kritzel-menu","kritzel-menu-item","kritzel-more-menu","kritzel-numeric-input","kritzel-opacity-slider","kritzel-portal","kritzel-settings","kritzel-shape-fill","kritzel-slide-toggle","kritzel-split-button","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel","kritzel-workspace-manager"].forEach((t=>{switch(t){case"kritzel-editor":customElements.get(r(t))||customElements.define(r(t),st);break;case"kritzel-back-to-content":customElements.get(r(t))||x();break;case"kritzel-color":customElements.get(r(t))||E();break;case"kritzel-color-palette":customElements.get(r(t))||w();break;case"kritzel-context-menu":customElements.get(r(t))||v();break;case"kritzel-controls":customElements.get(r(t))||S();break;case"kritzel-cursor-trail":customElements.get(r(t))||I();break;case"kritzel-dialog":customElements.get(r(t))||R();break;case"kritzel-dropdown":customElements.get(r(t))||O();break;case"kritzel-engine":customElements.get(r(t))||y();break;case"kritzel-export":customElements.get(r(t))||W();break;case"kritzel-font":customElements.get(r(t))||M();break;case"kritzel-font-family":customElements.get(r(t))||B();break;case"kritzel-font-size":customElements.get(r(t))||V();break;case"kritzel-icon":customElements.get(r(t))||n();break;case"kritzel-line-endings":customElements.get(r(t))||D();break;case"kritzel-master-detail":customElements.get(r(t))||T();break;case"kritzel-menu":customElements.get(r(t))||K();break;case"kritzel-menu-item":customElements.get(r(t))||P();break;case"kritzel-more-menu":customElements.get(r(t))||A();break;case"kritzel-numeric-input":customElements.get(r(t))||J();break;case"kritzel-opacity-slider":customElements.get(r(t))||U();break;case"kritzel-portal":customElements.get(r(t))||N();break;case"kritzel-settings":customElements.get(r(t))||F();break;case"kritzel-shape-fill":customElements.get(r(t))||G();break;case"kritzel-slide-toggle":customElements.get(r(t))||Y();break;case"kritzel-split-button":customElements.get(r(t))||Z();break;case"kritzel-stroke-size":customElements.get(r(t))||_();break;case"kritzel-tool-config":customElements.get(r(t))||L();break;case"kritzel-tooltip":customElements.get(r(t))||q();break;case"kritzel-utility-panel":customElements.get(r(t))||H();break;case"kritzel-workspace-manager":customElements.get(r(t))||Q()}}))};export{X as D,ot as KritzelEditor,$ as a,tt as b,it as defineCustomElement}
+import{p as t,H as e,c as s,h as o,d as i,t as r}from"./p-Cj-I2_Og.js";import{K as a,d as n}from"./p-DPPpa9So.js";import{D as l,S as c,h as p,e as m,f as k,g as d,i as b,j as h}from"./p-CuifaWTr.js";import{L as u,M as f,K as g,E as z,N as y}from"./p-Csm0Kf0_.js";import{K as j}from"./p-n789Y3S-.js";import{K as C}from"./p-l10It7Nm.js";import{d as x}from"./p-DSMMwH1h.js";import{d as E}from"./p-CCiIxqPN.js";import{d as w}from"./p-4IV4i5r-.js";import{d as S}from"./p-BCZgrVsy.js";import{d as v}from"./p-C8jozyvo.js";import{d as I}from"./p-JdxbP-1P.js";import{d as O}from"./p-BtGrZ0-u.js";import{d as R}from"./p-CIiUpoDZ.js";import{d as W}from"./p-CSWxqKCC.js";import{d as M}from"./p-BNYfuHT_.js";import{d as V}from"./p-DN1_B6ky.js";import{d as B}from"./p-CnO82wQT.js";import{d as D}from"./p-5Vxv1ZKh.js";import{d as P}from"./p-C7GNWyf2.js";import{d as T,a as K}from"./p-9VVxMmQY.js";import{d as N}from"./p-C40Eqc_i.js";import{d as A}from"./p-BG4Z2Dwn.js";import{d as U}from"./p-yzi-W-0P.js";import{d as Y}from"./p-DgMrqt6e.js";import{d as F}from"./p-CES8uS8D.js";import{d as Z}from"./p-BdnNVYxB.js";import{d as q}from"./p-CP3i626h.js";import{d as G}from"./p-B6UZznNo.js";import{d as _}from"./p-K1KgiJP8.js";import{d as J}from"./p-DuK31Tjt.js";import{d as L}from"./p-C2cNCqzd.js";import{d as H}from"./p-BhTMzfWj.js";import{d as Q}from"./p-CEYFDak6.js";const X={type:"pen",color:"#000000",size:16,palettes:{pen:[...l]}},$={color:"#000000",size:8,fontFamily:"Arial",palette:[...l]},tt={color:"#000000",size:4,palette:[...l],arrows:{end:{enabled:!0,style:"triangle"}}},et={shapeType:c.Rectangle,fillColor:"transparent",strokeColor:"#000000",strokeWidth:4,fontColor:"#000000",fontSize:16,fontFamily:"Arial",palette:[...l]},st=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.isReady=s(this,"isReady"),this.objectsChange=s(this,"objectsChange"),this.undoStateChange=s(this,"undoStateChange")}get host(){return this}scaleMax=u;scaleMin=f;lockDrawingScale=!0;controls=[{name:"selection",type:"tool",isDefault:!0,tool:p,icon:"cursor"},{name:"brush",type:"tool",tool:m,icon:"pen",config:X},{name:"line",type:"tool",tool:k,icon:"arrow",config:tt},{name:"eraser",type:"tool",tool:g,icon:"eraser"},{name:"text",type:"tool",tool:d,icon:"type",config:$},{name:"shape",type:"tool",tool:b,icon:"shape-rectangle",config:et,subOptions:[{id:"rectangle",icon:"shape-rectangle",label:"Rectangle",value:c.Rectangle,toolProperty:"shapeType"},{id:"ellipse",icon:"shape-ellipse",label:"Ellipse",value:c.Ellipse,toolProperty:"shapeType"},{id:"triangle",icon:"shape-triangle",label:"Triangle",value:c.Triangle,toolProperty:"shapeType"}]},{name:"image",type:"tool",tool:z,icon:"image"},{name:"config",type:"config"}];globalContextMenuItems=[{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:t=>this.engineRef.paste(t.x,t.y)},{label:"Select All",icon:"select-all",action:()=>this.selectAllObjectsInViewport()}];objectContextMenuItems=[{label:"Copy",icon:"copy",action:()=>this.engineRef.copy()},{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:t=>this.engineRef.paste(t.x,t.y)},{label:"Delete",icon:"delete",action:()=>this.engineRef.delete()},{label:"Bring to Front",icon:"bring-to-front",action:()=>this.engineRef.bringToFront()},{label:"Send to Back",icon:"send-to-back",action:()=>this.engineRef.sendToBack()},{label:"Group",icon:"group",disabled:async()=>(await this.engineRef.getSelectedObjects()).length<2,action:()=>this.engineRef.group()},{label:"Ungroup",icon:"ungroup",disabled:async()=>!(await this.engineRef.getSelectedObjects()).some((t=>"KritzelGroup"===t.__class__)),action:()=>this.engineRef.ungroup()}];customSvgIcons={};isControlsVisible=!0;isUtilityPanelVisible=!0;syncConfig;isReady;objectsChange;undoStateChange;isEngineReady=!1;isControlsReady=!1;isWorkspaceManagerReady=!1;workspaces=[];activeWorkspace;isVirtualKeyboardOpen=!1;undoState=null;isBackToContentButtonVisible=!1;onIsEngineReady(t){t&&this.isControlsReady&&this.checkIsReady()}onIsControlsReady(t){t&&this.isEngineReady&&this.checkIsReady()}onWorkspacesChange(t){if(this.activeWorkspace){const e=t.find((t=>t.id===this.activeWorkspace.id));e&&e!==this.activeWorkspace&&(this.activeWorkspace=e)}}onTouchStart(t){t.cancelable&&t.preventDefault()}async getObjectById(t){return this.engineRef.getObjectById(t)}async addObject(t){return this.engineRef.addObject(t)}async updateObject(t,e){return this.engineRef.updateObject(t,e)}async removeObject(t){return this.engineRef.removeObject(t)}async getSelectedObjects(){return this.engineRef.getSelectedObjects()}async selectObjects(t){return this.engineRef.selectObjects(t)}async selectAllObjectsInViewport(){return this.engineRef.selectAllObjectsInViewport()}async clearSelection(){this.engineRef.clearSelection()}async centerObjectInViewport(t){return this.engineRef.centerObjectInViewport(t)}async backToContent(){return this.engineRef.backToContent()}async createWorkspace(t,e){const s=new j("workspace-"+Date.now(),t,e);return this.engineRef.createWorkspace(s)}async updateWorkspace(t){return this.engineRef.updateWorkspace(t)}async deleteWorkspace(t){return this.engineRef.deleteWorkspace(t)}async getWorkspaces(){return this.engineRef.getWorkspaces()}async getActiveWorkspace(){return this.engineRef.getActiveWorkspace()}engineRef;controlsRef;settingsRef;exportRef;splitButtonRef;componentWillLoad(){this.loadSettingsFromStorage()}componentDidLoad(){this.registerCustomSvgIcons(),this.listenForMobileKeyboard(),this.setOsSpecificCssVariables()}loadSettingsFromStorage(){const t=localStorage.getItem("kritzel-settings");if(t)try{const e=JSON.parse(t);"number"==typeof e.scaleMin&&(this.scaleMin=e.scaleMin),"number"==typeof e.scaleMax&&(this.scaleMax=e.scaleMax),"boolean"==typeof e.lockDrawingScale&&(this.lockDrawingScale=e.lockDrawingScale)}catch{}}async checkIsReady(){await customElements.whenDefined("kritzel-editor"),await customElements.whenDefined("kritzel-workspace-manager"),await customElements.whenDefined("kritzel-controls"),await customElements.whenDefined("kritzel-engine"),this.isEngineReady&&this.isControlsReady&&this.isWorkspaceManagerReady&&this.isReady.emit(this.host)}onEngineReady(t){this.isEngineReady=!0,this.activeWorkspace=t.detail.activeWorkspace,this.workspaces=t.detail.workspaces}handleWorkspacesChange(t){this.workspaces=t.detail}handleObjectsChange(t){this.objectsChange.emit(t.detail)}handleUndoStateChange(t){this.undoStateChange.emit(t.detail),this.undoState=t.detail}handleObjectsInViewportChange(t){console.log(t.detail.length),this.isBackToContentButtonVisible=!(t.detail.length>0)}handleSettingsChange(t){this.scaleMin=t.detail.scaleMin,this.scaleMax=t.detail.scaleMax,this.lockDrawingScale=t.detail.lockDrawingScale}async handleMoreMenuItemSelect(t){const{item:e}=t.detail;if("settings"===e.id&&this.settingsRef.open(),"export"===e.id){const t=await this.engineRef.getScreenshot("png");this.exportRef.open(t)}}registerCustomSvgIcons(){for(const[t,e]of Object.entries(this.customSvgIcons))a.register(t,e)}listenForMobileKeyboard(){h.onKeyboardVisibleChanged((t=>{this.isVirtualKeyboardOpen=t}))}setOsSpecificCssVariables(){switch(C.detectOS()){case"iOS":this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px"),this.host.style.setProperty("--kritzel-editor-controls-transition","cubic-bezier(0.25, 0.1, 0.25, 1.0)"),this.host.style.setProperty("--kritzel-editor-controls-transform","translateY(200%)"),this.host.style.setProperty("--kritzel-editor-controls-transition-duration","0.25s");break;case"Android":this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","24px");break;default:this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px")}}render(){return o(i,{key:"18113021f28ed340017ed15b3db83f275a1a45e0"},o("div",{key:"75c4fc6fb48133edc3b9b2152c09d1b77dc3efc6",class:"top-left-buttons"},o("kritzel-workspace-manager",{key:"c6a68abaf70ebcf37af1870b832c9a2bd2c984fb",workspaces:this.workspaces,activeWorkspace:this.activeWorkspace,onWorkspaceChange:t=>this.activeWorkspace=t.detail,onIsWorkspaceManagerReady:()=>this.isWorkspaceManagerReady=!0}),o("kritzel-back-to-content",{key:"e2be6fadb0a44dd6cc7a061767bc25b11dde5bf3",visible:this.isBackToContentButtonVisible,onBackToContent:()=>this.backToContent()})),o("kritzel-engine",{key:"16c19e74e9a3bd61845fa3542a5a84a12a3c8a05",ref:t=>this.engineRef=t,workspace:this.activeWorkspace,syncConfig:this.syncConfig,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale,scaleMin:this.scaleMin,globalContextMenuItems:this.globalContextMenuItems,objectContextMenuItems:this.objectContextMenuItems,onIsEngineReady:t=>this.onEngineReady(t),onWorkspacesChange:t=>this.handleWorkspacesChange(t),onObjectsChange:t=>this.handleObjectsChange(t),onUndoStateChange:t=>this.handleUndoStateChange(t),onObjectsInViewportChange:t=>this.handleObjectsInViewportChange(t)}),o("kritzel-controls",{key:"bb328c89b4ebbcce215e6ddf710126e7a71b5d30",class:{"keyboard-open":this.isVirtualKeyboardOpen},style:{display:this.isControlsVisible?"flex":"none"},ref:t=>this.controlsRef=t,controls:this.controls,isUtilityPanelVisible:this.isUtilityPanelVisible,undoState:this.undoState,onIsControlsReady:()=>this.isControlsReady=!0}),o("div",{key:"e7fd78379d8acc4715605c267aa352430633f6ac",class:"top-right-buttons"},o("kritzel-settings",{key:"13db94ca32cabfbd2d6664c58f55e30fcbf99221",ref:t=>this.settingsRef=t,onSettingsChange:t=>this.handleSettingsChange(t)}),o("kritzel-export",{key:"a7aa9b6ada8b0d47edf418c392d6d04598d36925",ref:t=>this.exportRef=t,onExportPng:()=>this.engineRef.exportViewportAsPng(),onExportSvg:()=>this.engineRef.exportViewportAsSvg()}),o("kritzel-more-menu",{key:"70a1a954f678e6b634d5965b23f570f79824af43",onItemSelect:t=>this.handleMoreMenuItemSelect(t)})))}static get watchers(){return{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}]}}static get style(){return"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{}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%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}"}},[512,"kritzel-editor",{scaleMax:[1026,"scale-max"],scaleMin:[1026,"scale-min"],lockDrawingScale:[1028,"lock-drawing-scale"],controls:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],customSvgIcons:[16],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],syncConfig:[16],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],undoState:[32],isBackToContentButtonVisible:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],backToContent:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}]}]),ot=st,it=function(){"undefined"!=typeof customElements&&["kritzel-editor","kritzel-back-to-content","kritzel-color","kritzel-color-palette","kritzel-context-menu","kritzel-controls","kritzel-cursor-trail","kritzel-dialog","kritzel-dropdown","kritzel-engine","kritzel-export","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-master-detail","kritzel-menu","kritzel-menu-item","kritzel-more-menu","kritzel-numeric-input","kritzel-opacity-slider","kritzel-portal","kritzel-settings","kritzel-shape-fill","kritzel-slide-toggle","kritzel-split-button","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel","kritzel-workspace-manager"].forEach((t=>{switch(t){case"kritzel-editor":customElements.get(r(t))||customElements.define(r(t),st);break;case"kritzel-back-to-content":customElements.get(r(t))||x();break;case"kritzel-color":customElements.get(r(t))||E();break;case"kritzel-color-palette":customElements.get(r(t))||w();break;case"kritzel-context-menu":customElements.get(r(t))||S();break;case"kritzel-controls":customElements.get(r(t))||v();break;case"kritzel-cursor-trail":customElements.get(r(t))||I();break;case"kritzel-dialog":customElements.get(r(t))||O();break;case"kritzel-dropdown":customElements.get(r(t))||R();break;case"kritzel-engine":customElements.get(r(t))||y();break;case"kritzel-export":customElements.get(r(t))||W();break;case"kritzel-font":customElements.get(r(t))||M();break;case"kritzel-font-family":customElements.get(r(t))||V();break;case"kritzel-font-size":customElements.get(r(t))||B();break;case"kritzel-icon":customElements.get(r(t))||n();break;case"kritzel-line-endings":customElements.get(r(t))||D();break;case"kritzel-master-detail":customElements.get(r(t))||P();break;case"kritzel-menu":customElements.get(r(t))||K();break;case"kritzel-menu-item":customElements.get(r(t))||T();break;case"kritzel-more-menu":customElements.get(r(t))||N();break;case"kritzel-numeric-input":customElements.get(r(t))||A();break;case"kritzel-opacity-slider":customElements.get(r(t))||U();break;case"kritzel-portal":customElements.get(r(t))||Y();break;case"kritzel-settings":customElements.get(r(t))||F();break;case"kritzel-shape-fill":customElements.get(r(t))||Z();break;case"kritzel-slide-toggle":customElements.get(r(t))||q();break;case"kritzel-split-button":customElements.get(r(t))||G();break;case"kritzel-stroke-size":customElements.get(r(t))||_();break;case"kritzel-tool-config":customElements.get(r(t))||J();break;case"kritzel-tooltip":customElements.get(r(t))||L();break;case"kritzel-utility-panel":customElements.get(r(t))||H();break;case"kritzel-workspace-manager":customElements.get(r(t))||Q()}}))};export{X as D,ot as KritzelEditor,$ as a,tt as b,it as defineCustomElement}

package/dist/components/kritzel-export.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-DB-e1jRv.js";const p=o,r=s;export{p as KritzelExport,r as defineCustomElement}
+import{K as o,d as s}from"./p-CSWxqKCC.js";const p=o,r=s;export{p as KritzelExport,r as defineCustomElement}

package/dist/components/kritzel-master-detail.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-Bz_LzbTD.js";const p=o,r=s;export{p as KritzelMasterDetail,r as defineCustomElement}
+import{K as o,d as s}from"./p-C7GNWyf2.js";const p=o,r=s;export{p as KritzelMasterDetail,r as defineCustomElement}

package/dist/components/kritzel-menu-item.js

@@ -1 +1 @@
-import{b as o,d as s}from"./p-6yo07JPM.js";const p=o,r=s;export{p as KritzelMenuItem,r as defineCustomElement}
+import{b as o,d as s}from"./p-9VVxMmQY.js";const m=o,p=s;export{m as KritzelMenuItem,p as defineCustomElement}

package/dist/components/kritzel-menu.js

@@ -1 +1 @@
-import{K as o,a as s}from"./p-6yo07JPM.js";const a=o,p=s;export{a as KritzelMenu,p as defineCustomElement}
+import{K as o,a as s}from"./p-9VVxMmQY.js";const a=o,m=s;export{a as KritzelMenu,m as defineCustomElement}

package/dist/components/kritzel-more-menu.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-BVGy2ETQ.js";const p=o,r=s;export{p as KritzelMoreMenu,r as defineCustomElement}
+import{K as o,d as s}from"./p-C40Eqc_i.js";const p=o,r=s;export{p as KritzelMoreMenu,r as defineCustomElement}

package/dist/components/kritzel-portal.js

@@ -1 +1 @@
-import{K as o,d as r}from"./p-Dm9n3RrJ.js";const s=o,m=r;export{s as KritzelPortal,m as defineCustomElement}
+import{K as o,d as r}from"./p-DgMrqt6e.js";const s=o,t=r;export{s as KritzelPortal,t as defineCustomElement}

package/dist/components/kritzel-settings.js

@@ -1 +1 @@
-import{K as o,d as r}from"./p-BbC4EJrJ.js";const s=o,p=r;export{s as KritzelSettings,p as defineCustomElement}
+import{K as o,d as s}from"./p-CES8uS8D.js";const p=o,r=s;export{p as KritzelSettings,r as defineCustomElement}

package/dist/components/kritzel-split-button.js

@@ -1 +1 @@
-import{K as a,d as o}from"./p--aa4aJEU.js";const s=a,p=o;export{s as KritzelSplitButton,p as defineCustomElement}
+import{K as o,d as s}from"./p-B6UZznNo.js";const p=o,r=s;export{p as KritzelSplitButton,r as defineCustomElement}

package/dist/components/kritzel-tooltip.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-zoMPunTt.js";const t=o,p=s;export{t as KritzelTooltip,p as defineCustomElement}
+import{K as o,d as s}from"./p-C2cNCqzd.js";const p=o,r=s;export{p as KritzelTooltip,r as defineCustomElement}

package/dist/components/kritzel-workspace-manager.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-CXGqvg3q.js";const p=o,r=s;export{p as KritzelWorkspaceManager,r as defineCustomElement}
+import{K as o,d as s}from"./p-CEYFDak6.js";const a=o,p=s;export{a as KritzelWorkspaceManager,p as defineCustomElement}

package/dist/components/p-9VVxMmQY.js

@@ -0,0 +1 @@
+import{p as e,H as t,c as i,h as n,d as o,t as s}from"./p-Cj-I2_Og.js";import{d as r}from"./p-DPPpa9So.js";import{K as l}from"./p-l10It7Nm.js";import{d as a}from"./p-DgMrqt6e.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=i(this,"itemSelect"),this.itemSave=i(this,"itemSave"),this.itemCancel=i(this,"itemCancel"),this.itemToggleChildMenu=i(this,"itemToggleChildMenu"),this.itemCloseChildMenu=i(this,"itemCloseChildMenu")}get host(){return this}item;onItemChange(e,t){e!==t&&(this.isDirty=!1)}parent=null;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;isDirty=!1;inputRef;focusInput(){if(this.item.isEditing&&this.inputRef&&!this.isDirty)if(this.inputRef.focus(),l.isIOS()){const e=this.inputRef.value.length;this.inputRef.setSelectionRange(e,e)}else this.inputRef.select()}componentDidLoad(){this.setDeviceSpecificStyles(),this.focusInput()}componentDidUpdate(){this.focusInput()}setDeviceSpecificStyles=()=>{l.isTouchDevice()&&(this.host.style.setProperty("--kritzel-menu-item-overlay-background-color","transparent"),this.host.style.setProperty("--kritzel-menu-item-button-hover-background-color","transparent"))};handleItemSelect=e=>{e.stopPropagation(),this.itemSelect.emit({item:this.item,parent:this.parent})};handleInputChange=e=>{e.stopPropagation(),this.item.label=e.target.value,this.isDirty=!0};handleSave=e=>{e.stopPropagation(),this.host.focus(),this.itemSave.emit(this.item)};handleCancel=e=>{e.stopPropagation(),this.host.focus(),this.itemCancel.emit(this.item)};handleMenuToggle=e=>{e.stopPropagation(),this.itemToggleChildMenu.emit({item:this.item,childMenuAnchor:e.target})};handleMenuClose=()=>{this.itemCloseChildMenu.emit(this.item)};renderViewMode(){return[n("div",{class:"menu-item-content left"},this.item.icon&&n("kritzel-icon",{name:this.item.icon,size:16}),n("div",null,this.item.label)),n("div",{class:"menu-item-content right"},this.item.children&&this.item.children.length>0&&[n("button",{id:"child-menu-toggle",class:"action-button",onClick:this.handleMenuToggle,disabled:this.item.isDisabled},n("kritzel-icon",{name:"ellipsis-vertical",size:16})),n("kritzel-portal",{anchor:this.item.childMenuAnchor,offsetY:4,onClose:this.handleMenuClose},n("kritzel-menu",{items:this.item.children,parent:this.item,onItemSelect:e=>this.itemSelect.emit(e.detail),onItemSave:e=>this.itemSave.emit(e.detail),onItemCancel:e=>this.itemCancel.emit(e.detail),onClose:this.handleMenuClose}))])]}renderEditMode(){return[n("div",{class:"menu-item-content left"},n("input",{ref:e=>this.inputRef=e,type:"text",class:"edit-input",value:this.item.label,onInput:this.handleInputChange})),n("div",{class:"menu-item-content right"},n("div",{tabIndex:0,class:"action-button",onClick:this.handleCancel},n("kritzel-icon",{name:"x",size:16})),n("div",{tabIndex:this.isDirty||this.item.isNewItem?0:-1,class:{"action-button":!0,disabled:!this.isDirty&&!this.item.isNewItem},onClick:this.handleSave},n("kritzel-icon",{name:"check",size:16})))]}render(){return n(o,{key:"bea20089a9eeb66c9573187b2cccdfe220460f70",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},n("div",{key:"d877be4a4f51d6e342b3602769990e4592355686",class:"menu-item-overlay"}),this.item.isEditing?this.renderEditMode():this.renderViewMode())}static get watchers(){return{item:[{onItemChange:0}]}}static get style(){return":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);-webkit-tap-highlight-color:transparent}:host:focus:not(:focus-visible){outline:none}: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}"}},[513,"kritzel-menu-item",{item:[16],parent:[16],isDirty:[32]},void 0,{item:[{onItemChange:0}]}]);function h(){"undefined"!=typeof customElements&&["kritzel-menu-item","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-menu-item":customElements.get(s(e))||customElements.define(s(e),c);break;case"kritzel-icon":customElements.get(s(e))||r();break;case"kritzel-menu":customElements.get(s(e))||u();break;case"kritzel-menu-item":customElements.get(s(e))||h();break;case"kritzel-portal":customElements.get(s(e))||a()}}))}const m=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=i(this,"itemSelect"),this.itemSave=i(this,"itemSave"),this.itemCancel=i(this,"itemCancel"),this.itemToggleChildMenu=i(this,"itemToggleChildMenu"),this.itemCloseChildMenu=i(this,"itemCloseChildMenu"),this.close=i(this,"close")}get host(){return this}items;parent=null;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;close;selectedIndex=null;async setScrollTop(e){this.host.scrollTop=e,this.host.scrollTo({top:e,behavior:"auto"})}async setFocus(){const e=this.host.shadowRoot.querySelector("kritzel-menu-item");e&&e.focus()}get openChildMenuItem(){return this.items.find((e=>e.isChildMenuOpen))}get editingMenuItem(){return this.items.find((e=>e.isEditing))}onOverlayClick=e=>{e.stopPropagation(),this.itemCloseChildMenu.emit(this.openChildMenuItem)};handleItemSelect=e=>{e.stopPropagation(),this.itemSelect.emit(e.detail)};handleSave=e=>{e.stopPropagation(),this.itemSave.emit(e.detail)};handleCancel=e=>{e.stopPropagation(),this.itemCancel.emit(e.detail)};handleToggleChildMenu=e=>{e.stopPropagation(),this.itemToggleChildMenu.emit(e.detail)};handleCloseChildMenu=e=>{e.stopPropagation(),this.itemCloseChildMenu.emit(e.detail)};render(){return n(o,{key:"8379db1815141de23286484a16ef498bc16fe1c3",tabIndex:0,onClick:e=>e.stopPropagation()},this.openChildMenuItem&&n("div",{key:"cb5acec2f2e7e1912bdde07a0664f459425c7f5c",class:"has-open-child-overlay",onClick:this.onOverlayClick}),this.items.map((e=>n("kritzel-menu-item",{key:e.id,item:e,parent:this.parent,style:{pointerEvents:this.editingMenuItem&&!e.isEditing?"none":"auto"},onItemSelect:this.handleItemSelect,onItemSave:this.handleSave,onItemCancel:this.handleCancel,onItemToggleChildMenu:this.handleToggleChildMenu,onItemCloseChildMenu:this.handleCloseChildMenu}))))}static get style(){return":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;-webkit-tap-highlight-color:transparent;outline:none}:host:focus-visible{outline:auto}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}"}},[513,"kritzel-menu",{items:[16],parent:[16],selectedIndex:[32],setScrollTop:[64],setFocus:[64]}]);function u(){"undefined"!=typeof customElements&&["kritzel-menu","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-menu":customElements.get(s(e))||customElements.define(s(e),m);break;case"kritzel-icon":customElements.get(s(e))||r();break;case"kritzel-menu":customElements.get(s(e))||u();break;case"kritzel-menu-item":customElements.get(s(e))||h();break;case"kritzel-portal":customElements.get(s(e))||a()}}))}export{m as K,u as a,c as b,h as d}