kritzel-stencil 0.4.4 → 0.4.6

package/dist/components/p-BsANVili.js

@@ -1 +1,150 @@
-import{p as e,H as t,c as i,h as a,d as r,t as l}from"./p-B43upypT.js";import{d as o}from"./p-CdR76C4L.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=i(this,"itemSelect")}get host(){return this}items=[];selectedItemId;itemSelect;focusedIndex=-1;showMobileDetail=!1;tabRefs=[];watchSelectedItemId(e,t){e!==t&&(this.showMobileDetail=!0)}componentWillRender(){this.tabRefs=[]}handleItemClick=e=>{e.disabled||(this.itemSelect.emit({item:e}),this.showMobileDetail=!0)};handleBackClick=()=>{this.showMobileDetail=!1};handleKeyDown=(e,t,i)=>{const a=this.items.map(((e,t)=>e.disabled?-1:t)).filter((e=>-1!==e)),r=a.indexOf(i);switch(e.key){case"ArrowDown":e.preventDefault(),this.focusTab(a[(r+1)%a.length]);break;case"ArrowUp":e.preventDefault(),this.focusTab(a[(r-1+a.length)%a.length]);break;case"Home":e.preventDefault(),this.focusTab(a[0]);break;case"End":e.preventDefault(),this.focusTab(a[a.length-1]);break;case"Enter":case" ":e.preventDefault(),this.handleItemClick(t)}};focusTab(e){this.focusedIndex=e;const t=this.tabRefs[e];t&&t.focus()}handleFocus=e=>{this.focusedIndex=e};handleBlur=()=>{this.focusedIndex=-1};setTabRef=(e,t)=>{e&&(this.tabRefs[t]=e)};getTabIndex(e,t){return e.disabled?-1:0}render(){const e=this.items.find((e=>e.id===this.selectedItemId)),t="master-detail-panel",i=e?`tab-${e.id}`:void 0;return a(r,{key:"e363142a5175b1f711cebfc98cfeedf07cd2c6c3"},a("div",{key:"eebf863ecdb4a53289cb56e14c02977375781167",class:{"master-detail-container":!0,"is-mobile-detail-visible":this.showMobileDetail}},a("nav",{key:"06660d3cd7de29ba46e3437169f99cb00eef1cc6",class:"master-menu",role:"tablist","aria-orientation":"vertical","aria-label":"Settings categories"},this.items.map(((e,i)=>a("button",{key:e.id,id:`tab-${e.id}`,ref:e=>this.setTabRef(e,i),class:{"menu-item":!0,"is-selected":e.id===this.selectedItemId,"is-disabled":!!e.disabled,"is-focused":i===this.focusedIndex},role:"tab","aria-selected":e.id===this.selectedItemId?"true":"false","aria-controls":t,"aria-disabled":e.disabled?"true":void 0,tabIndex:this.getTabIndex(e,i),disabled:e.disabled,onClick:()=>this.handleItemClick(e),onKeyDown:t=>this.handleKeyDown(t,e,i),onFocus:()=>this.handleFocus(i),onBlur:this.handleBlur},e.icon&&a("kritzel-icon",{name:e.icon,size:20,class:"menu-item-icon"}),a("span",{class:"menu-item-label"},e.label),a("span",{class:"menu-item-chevron","aria-hidden":"true"},a("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},a("path",{d:"m9 18 6-6-6-6"}))))))),a("div",{key:"0d6b6722ecbf64b28d27754161f861edafa3882c",id:t,class:"detail-panel",role:"tabpanel","aria-labelledby":i},a("button",{key:"3d8ac88c0f8a7a840b5560c4917d74ff910a99c8",class:"mobile-back-button",onClick:this.handleBackClick,"aria-label":"Back to menu"},a("kritzel-icon",{key:"03cf6ca5ea2b9d16ff21b1b38fd0b6148d35ff1f",name:"chevron-left",size:20,class:"mobile-back-icon"}),"Back"),a("slot",{key:"3323357889024c0d2126c30d976c3ece7ddd706a"}))))}static get watchers(){return{selectedItemId:[{watchSelectedItemId:0}]}}static get style(){return":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-global-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:var(--kritzel-global-scrollbar-thumb-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;-webkit-tap-highlight-color:transparent;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}}"}},[769,"kritzel-master-detail",{items:[16],selectedItemId:[1,"selected-item-id"],focusedIndex:[32],showMobileDetail:[32]},void 0,{selectedItemId:[{watchSelectedItemId:0}]}]);function n(){"undefined"!=typeof customElements&&["kritzel-master-detail","kritzel-icon"].forEach((e=>{switch(e){case"kritzel-master-detail":customElements.get(l(e))||customElements.define(l(e),s);break;case"kritzel-icon":customElements.get(l(e))||o()}}))}export{s as K,n as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { d as defineCustomElement$1 } from './p-CdR76C4L.js';
+
+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-global-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:var(--kritzel-global-scrollbar-thumb-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;-webkit-tap-highlight-color:transparent;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 = /*@__PURE__*/ proxyCustomElement(class KritzelMasterDetail extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.itemSelect = createEvent(this, "itemSelect");
+    }
+    get host() { return this; }
+    /** Array of menu items to display in the master (left) panel */
+    items = [];
+    /** ID of the currently selected item */
+    selectedItemId;
+    /** Emitted when an item is selected */
+    itemSelect;
+    focusedIndex = -1;
+    showMobileDetail = false;
+    tabRefs = [];
+    watchSelectedItemId(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.showMobileDetail = true;
+        }
+    }
+    componentWillRender() {
+        this.tabRefs = [];
+    }
+    handleItemClick = (item) => {
+        if (item.disabled)
+            return;
+        this.itemSelect.emit({ item });
+        this.showMobileDetail = true;
+    };
+    handleBackClick = () => {
+        this.showMobileDetail = false;
+    };
+    handleKeyDown = (event, item, index) => {
+        const enabledIndices = this.items
+            .map((it, idx) => (!it.disabled ? idx : -1))
+            .filter(idx => idx !== -1);
+        const currentEnabledIndex = enabledIndices.indexOf(index);
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                const nextIndex = enabledIndices[(currentEnabledIndex + 1) % enabledIndices.length];
+                this.focusTab(nextIndex);
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                const prevIndex = enabledIndices[(currentEnabledIndex - 1 + enabledIndices.length) % enabledIndices.length];
+                this.focusTab(prevIndex);
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                this.focusTab(enabledIndices[0]);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                this.focusTab(enabledIndices[enabledIndices.length - 1]);
+                break;
+            }
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                this.handleItemClick(item);
+                break;
+            }
+        }
+    };
+    focusTab(index) {
+        this.focusedIndex = index;
+        const tab = this.tabRefs[index];
+        if (tab) {
+            tab.focus();
+        }
+    }
+    handleFocus = (index) => {
+        this.focusedIndex = index;
+    };
+    handleBlur = () => {
+        this.focusedIndex = -1;
+    };
+    setTabRef = (el, index) => {
+        if (el) {
+            this.tabRefs[index] = el;
+        }
+    };
+    getTabIndex(item, _index) {
+        if (item.disabled)
+            return -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: 'e363142a5175b1f711cebfc98cfeedf07cd2c6c3' }, h("div", { key: 'eebf863ecdb4a53289cb56e14c02977375781167', class: {
+                'master-detail-container': true,
+                'is-mobile-detail-visible': this.showMobileDetail,
+            } }, h("nav", { key: '06660d3cd7de29ba46e3437169f99cb00eef1cc6', 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: '0d6b6722ecbf64b28d27754161f861edafa3882c', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '3d8ac88c0f8a7a840b5560c4917d74ff910a99c8', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '03cf6ca5ea2b9d16ff21b1b38fd0b6148d35ff1f', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '3323357889024c0d2126c30d976c3ece7ddd706a' })))));
+    }
+    static get watchers() { return {
+        "selectedItemId": [{
+                "watchSelectedItemId": 0
+            }]
+    }; }
+    static get style() { return kritzelMasterDetailCss(); }
+}, [769, "kritzel-master-detail", {
+        "items": [16],
+        "selectedItemId": [1, "selected-item-id"],
+        "focusedIndex": [32],
+        "showMobileDetail": [32]
+    }, undefined, {
+        "selectedItemId": [{
+                "watchSelectedItemId": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-master-detail", "kritzel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-master-detail":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelMasterDetail);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelMasterDetail as K, defineCustomElement as d };

package/dist/components/p-BxpKq94F.js

@@ -1 +1,290 @@
-import{p as e,H as t,c as i,h as n,d as s,t as o}from"./p-B43upypT.js";import{d as r}from"./p-CdR76C4L.js";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.actionSelected=i(this,"actionSelected"),this.close=i(this,"close")}get host(){return this}items;onItemsChanged(){this.updateMenuItems()}objects;actionSelected;close;processedItems=[];openSubmenuPath="";submenuPositions={};submenuTimer=null;submenuRefs=new Map;menuItemWrapperRefs=new Map;handleOutsideClick(e){e.composedPath().includes(this.host)||this.close.emit()}componentWillLoad(){this.updateMenuItems()}componentDidLoad(){this.adjustPositionToViewport()}componentDidUpdate(){this.adjustPositionToViewport(),this.adjustSubmenuPositions(),this.pruneStaleRefs()}disconnectedCallback(){this.submenuTimer&&clearTimeout(this.submenuTimer)}adjustPositionToViewport(){const e=this.host.getBoundingClientRect(),t=window.innerWidth,i=window.innerHeight,n=parseFloat(this.host.style.left)||0,s=parseFloat(this.host.style.top)||0;let o=n,r=s;e.right>t-8&&(o=t-e.width-8),e.bottom>i-8&&(r=i-e.height-8),o<8&&(o=8),r<8&&(r=8),o===n&&r===s||(this.host.style.left=`${o}px`,this.host.style.top=`${r}px`)}adjustSubmenuPositions(){if(!this.openSubmenuPath)return;const e=window.innerHeight;for(const t of this.getOpenSubmenuPaths()){const i=this.submenuRefs.get(t),n=this.menuItemWrapperRefs.get(t);if(!i||!n)continue;const s=n.getBoundingClientRect(),o=s.top+i.offsetHeight;if(o>e-8){let t=o-(e-8);s.top-t<8&&(t=s.top-8),i.style.top=-t+"px"}else i.style.top="0px"}}getOpenSubmenuPaths(){if(!this.openSubmenuPath)return[];const e=this.openSubmenuPath.split("."),t=[];for(let i=1;i<=e.length;i++)t.push(e.slice(0,i).join("."));return t}isSubmenuOpen(e){return this.openSubmenuPath===e||this.openSubmenuPath.startsWith(e+".")}getParentPath(e){const t=e.lastIndexOf(".");return-1===t?"":e.substring(0,t)}getMenuDepth(e){return e?e.split(".").length:0}pruneStaleRefs(){const e=new Set(this.getOpenSubmenuPaths());for(const t of Array.from(this.submenuRefs.keys()))e.has(t)||this.submenuRefs.delete(t);for(const t of Array.from(this.menuItemWrapperRefs.keys())){const i=this.getParentPath(t);""===i||e.has(i)||this.menuItemWrapperRefs.delete(t)}}handleItemClick(e,t,i){t||i||e.action&&this.actionSelected.emit(e)}handleItemMouseEnter(e,t){this.submenuTimer&&(clearTimeout(this.submenuTimer),this.submenuTimer=null);const i=this.getParentPath(e);this.submenuTimer=t?setTimeout((()=>{const t=this.menuItemWrapperRefs.get(e);let i="right";if(t){const e=t.getBoundingClientRect(),n=window.innerWidth;i=e.right+160>n-8?"left":"right"}this.submenuPositions={...this.submenuPositions,[e]:i},this.openSubmenuPath=e}),150):setTimeout((()=>{this.openSubmenuPath=i}),150)}handleSubmenuMouseEnter(){this.submenuTimer&&(clearTimeout(this.submenuTimer),this.submenuTimer=null)}handleSubmenuMouseLeave(e){const t=this.getParentPath(e);this.submenuTimer=setTimeout((()=>{this.openSubmenuPath=t}),150)}async updateMenuItems(){this.processedItems=await this.processItems(this.items)}async processItems(e){const t=[];for(const i of e)if(await this.evaluateProperty(i.visible,!0)){const e=await this.evaluateProperty(i.disabled,!1);let n;i.children&&i.children.length>0&&(n=await this.processItems(i.children)),t.push({item:i,isDisabled:e,processedChildren:n})}return t}async evaluateProperty(e,t){return"boolean"==typeof e?e:"function"==typeof e?await Promise.resolve(e(null,this.objects)):t}renderItems(e,t){return e.map((({item:i,isDisabled:s,processedChildren:o},r)=>{const a=""===t?String(r):`${t}.${r}`,l=r>0?e[r-1].item:null,u=l&&l.group!==i.group,c=!!o&&o.length>0,d=c&&this.isSubmenuOpen(a);return[u&&n("div",{class:"menu-divider",key:`divider-${a}`}),n("div",{class:"menu-item-wrapper",key:`wrapper-${a}`,ref:e=>e&&this.menuItemWrapperRefs.set(a,e),onMouseEnter:()=>this.handleItemMouseEnter(a,c)},n("button",{key:`${i.label}-${a}`,class:{"menu-item":!0,disabled:s,"has-children":c,"submenu-open":d},onClick:()=>this.handleItemClick(i,s,c),disabled:s&&!c},i.icon&&n("kritzel-icon",{name:i.icon,size:16}),n("span",{class:"label"},i.label),c&&n("kritzel-icon",{name:"chevron-right",size:12,class:"submenu-arrow"})),c&&d&&this.renderSubmenu(o,a))]}))}renderSubmenu(e,t){const i="left"===this.submenuPositions[t]?"left":"right",s=this.getMenuDepth(t)+1;return n("div",{class:{"submenu-container":!0,"position-left":"left"===i},key:`submenu-${t}`,style:{zIndex:String(s)},ref:e=>e&&this.submenuRefs.set(t,e),onMouseEnter:()=>this.handleSubmenuMouseEnter(),onMouseLeave:()=>this.handleSubmenuMouseLeave(t)},this.renderItems(e,t))}render(){return this.processedItems&&0!==this.processedItems.length?n(s,null,n("div",{class:"menu-container"},this.renderItems(this.processedItems,""))):null}static get watchers(){return{items:[{onItemsChanged:0}]}}static get style(){return":host{display:block}.menu-container{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:var(--kritzel-context-menu-min-width, 140px)}.menu-item-wrapper{position:relative}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:var(--kritzel-global-pointer-cursor, pointer);font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent;width:100%;min-width:0}.menu-item:not(.disabled):hover,.menu-item.submenu-open{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa)}.menu-item.has-children.disabled{cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-context-menu-item-color, #333333)}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.menu-item.has-children.disabled kritzel-icon{opacity:0.8}.label{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.submenu-arrow{margin-left:auto;opacity:0.5}.menu-divider{height:1px;background-color:var(--kritzel-context-menu-divider-color, rgba(0, 0, 0, 0.1));margin:var(--kritzel-context-menu-divider-margin, 4px 8px)}.submenu-container{position:absolute;top:0;left:100%;z-index:2;margin-left:4px;display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:120px}.submenu-container.position-left{left:auto;right:100%;margin-left:0;margin-right:4px}"}},[513,"kritzel-context-menu",{items:[16],objects:[16],processedItems:[32],openSubmenuPath:[32],submenuPositions:[32]},[[9,"pointerdown","handleOutsideClick"]],{items:[{onItemsChanged:0}]}]);function l(){"undefined"!=typeof customElements&&["kritzel-context-menu","kritzel-icon"].forEach((e=>{switch(e){case"kritzel-context-menu":customElements.get(o(e))||customElements.define(o(e),a);break;case"kritzel-icon":customElements.get(o(e))||r()}}))}export{a as K,l as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { d as defineCustomElement$1 } from './p-CdR76C4L.js';
+
+const kritzelContextMenuCss = () => `:host{display:block}.menu-container{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:var(--kritzel-context-menu-min-width, 140px)}.menu-item-wrapper{position:relative}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:var(--kritzel-global-pointer-cursor, pointer);font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent;width:100%;min-width:0}.menu-item:not(.disabled):hover,.menu-item.submenu-open{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa)}.menu-item.has-children.disabled{cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-context-menu-item-color, #333333)}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.menu-item.has-children.disabled kritzel-icon{opacity:0.8}.label{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.submenu-arrow{margin-left:auto;opacity:0.5}.menu-divider{height:1px;background-color:var(--kritzel-context-menu-divider-color, rgba(0, 0, 0, 0.1));margin:var(--kritzel-context-menu-divider-margin, 4px 8px)}.submenu-container{position:absolute;top:0;left:100%;z-index:2;margin-left:4px;display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:120px}.submenu-container.position-left{left:auto;right:100%;margin-left:0;margin-right:4px}`;
+
+const VIEWPORT_PADDING = 8;
+const SUBMENU_DELAY = 150;
+const ESTIMATED_SUBMENU_WIDTH = 160; // Estimated width for pre-calculation
+const KritzelContextMenu = /*@__PURE__*/ proxyCustomElement(class KritzelContextMenu extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.actionSelected = createEvent(this, "actionSelected");
+        this.close = createEvent(this, "close");
+    }
+    get host() { return this; }
+    items;
+    onItemsChanged() {
+        this.updateMenuItems();
+    }
+    objects;
+    actionSelected;
+    close;
+    processedItems = [];
+    /** Current open submenu path (e.g. '0.2.1'). Empty if none. */
+    openSubmenuPath = '';
+    submenuPositions = {};
+    submenuTimer = null;
+    submenuRefs = new Map();
+    menuItemWrapperRefs = new Map();
+    handleOutsideClick(event) {
+        const path = event.composedPath();
+        if (!path.includes(this.host)) {
+            this.close.emit();
+        }
+    }
+    componentWillLoad() {
+        this.updateMenuItems();
+    }
+    componentDidLoad() {
+        this.adjustPositionToViewport();
+    }
+    componentDidUpdate() {
+        this.adjustPositionToViewport();
+        this.adjustSubmenuPositions();
+        this.pruneStaleRefs();
+    }
+    disconnectedCallback() {
+        if (this.submenuTimer) {
+            clearTimeout(this.submenuTimer);
+        }
+    }
+    adjustPositionToViewport() {
+        const rect = this.host.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const currentLeft = parseFloat(this.host.style.left) || 0;
+        const currentTop = parseFloat(this.host.style.top) || 0;
+        let newLeft = currentLeft;
+        let newTop = currentTop;
+        // Check if menu extends beyond right edge
+        if (rect.right > viewportWidth - VIEWPORT_PADDING) {
+            newLeft = viewportWidth - rect.width - VIEWPORT_PADDING;
+        }
+        // Check if menu extends beyond bottom edge
+        if (rect.bottom > viewportHeight - VIEWPORT_PADDING) {
+            newTop = viewportHeight - rect.height - VIEWPORT_PADDING;
+        }
+        // Ensure menu doesn't go beyond left edge
+        if (newLeft < VIEWPORT_PADDING) {
+            newLeft = VIEWPORT_PADDING;
+        }
+        // Ensure menu doesn't go beyond top edge
+        if (newTop < VIEWPORT_PADDING) {
+            newTop = VIEWPORT_PADDING;
+        }
+        // Only update if position changed to avoid infinite loops
+        if (newLeft !== currentLeft || newTop !== currentTop) {
+            this.host.style.left = `${newLeft}px`;
+            this.host.style.top = `${newTop}px`;
+        }
+    }
+    adjustSubmenuPositions() {
+        if (!this.openSubmenuPath)
+            return;
+        const viewportHeight = window.innerHeight;
+        // Adjust every open submenu in the chain (every prefix of openSubmenuPath).
+        for (const path of this.getOpenSubmenuPaths()) {
+            const submenuEl = this.submenuRefs.get(path);
+            const wrapperEl = this.menuItemWrapperRefs.get(path);
+            if (!submenuEl || !wrapperEl)
+                continue;
+            const wrapperRect = wrapperEl.getBoundingClientRect();
+            const submenuHeight = submenuEl.offsetHeight; // Constant regardless of current top shift
+            const naturalBottom = wrapperRect.top + submenuHeight;
+            if (naturalBottom > viewportHeight - VIEWPORT_PADDING) {
+                let overflow = naturalBottom - (viewportHeight - VIEWPORT_PADDING);
+                // Don't shift up so far that the top goes above the viewport
+                if (wrapperRect.top - overflow < VIEWPORT_PADDING) {
+                    overflow = wrapperRect.top - VIEWPORT_PADDING;
+                }
+                submenuEl.style.top = `${-overflow}px`;
+            }
+            else {
+                submenuEl.style.top = '0px';
+            }
+        }
+    }
+    getOpenSubmenuPaths() {
+        if (!this.openSubmenuPath)
+            return [];
+        const parts = this.openSubmenuPath.split('.');
+        const paths = [];
+        for (let i = 1; i <= parts.length; i++) {
+            paths.push(parts.slice(0, i).join('.'));
+        }
+        return paths;
+    }
+    isSubmenuOpen(path) {
+        return this.openSubmenuPath === path || this.openSubmenuPath.startsWith(path + '.');
+    }
+    getParentPath(path) {
+        const idx = path.lastIndexOf('.');
+        return idx === -1 ? '' : path.substring(0, idx);
+    }
+    getMenuDepth(path) {
+        if (!path)
+            return 0;
+        return path.split('.').length;
+    }
+    pruneStaleRefs() {
+        const openPaths = new Set(this.getOpenSubmenuPaths());
+        for (const key of Array.from(this.submenuRefs.keys())) {
+            if (!openPaths.has(key)) {
+                this.submenuRefs.delete(key);
+            }
+        }
+        // Keep root-level wrapper refs (single-segment paths) always rendered; prune deeper
+        // wrappers whose parent submenu is no longer open.
+        for (const key of Array.from(this.menuItemWrapperRefs.keys())) {
+            const parent = this.getParentPath(key);
+            if (parent !== '' && !openPaths.has(parent)) {
+                this.menuItemWrapperRefs.delete(key);
+            }
+        }
+    }
+    handleItemClick(item, isDisabled, hasChildren) {
+        if (isDisabled)
+            return;
+        if (hasChildren) {
+            // Hover handles open/close; click on a parent is a no-op.
+            return;
+        }
+        if (item.action) {
+            this.actionSelected.emit(item);
+        }
+    }
+    handleItemMouseEnter(path, hasChildren) {
+        if (this.submenuTimer) {
+            clearTimeout(this.submenuTimer);
+            this.submenuTimer = null;
+        }
+        const parentPath = this.getParentPath(path);
+        if (hasChildren) {
+            this.submenuTimer = setTimeout(() => {
+                // Pre-calculate horizontal position before opening to avoid flicker.
+                const wrapperEl = this.menuItemWrapperRefs.get(path);
+                let position = 'right';
+                if (wrapperEl) {
+                    const rect = wrapperEl.getBoundingClientRect();
+                    const viewportWidth = window.innerWidth;
+                    const wouldOverflowRight = rect.right + ESTIMATED_SUBMENU_WIDTH > viewportWidth - VIEWPORT_PADDING;
+                    position = wouldOverflowRight ? 'left' : 'right';
+                }
+                this.submenuPositions = { ...this.submenuPositions, [path]: position };
+                this.openSubmenuPath = path;
+            }, SUBMENU_DELAY);
+        }
+        else {
+            // Hovering a sibling without children: collapse to the parent chain so any
+            // sibling-rooted submenu closes, but the ancestor chain stays open.
+            this.submenuTimer = setTimeout(() => {
+                this.openSubmenuPath = parentPath;
+            }, SUBMENU_DELAY);
+        }
+    }
+    handleSubmenuMouseEnter() {
+        if (this.submenuTimer) {
+            clearTimeout(this.submenuTimer);
+            this.submenuTimer = null;
+        }
+    }
+    handleSubmenuMouseLeave(path) {
+        // Close this submenu (and any deeper levels) but keep the ancestor chain open.
+        const parentPath = this.getParentPath(path);
+        this.submenuTimer = setTimeout(() => {
+            this.openSubmenuPath = parentPath;
+        }, SUBMENU_DELAY);
+    }
+    async updateMenuItems() {
+        this.processedItems = await this.processItems(this.items);
+    }
+    async processItems(items) {
+        const processed = [];
+        for (const item of items) {
+            const isVisible = await this.evaluateProperty(item.visible, true);
+            if (isVisible) {
+                const isDisabled = await this.evaluateProperty(item.disabled, false);
+                let processedChildren;
+                if (item.children && item.children.length > 0) {
+                    processedChildren = await this.processItems(item.children);
+                }
+                processed.push({ item, isDisabled, processedChildren });
+            }
+        }
+        return processed;
+    }
+    async evaluateProperty(value, defaultValue) {
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        if (typeof value === 'function') {
+            return await Promise.resolve(value(null, this.objects));
+        }
+        return defaultValue;
+    }
+    renderItems(items, parentPath) {
+        return items.map(({ item, isDisabled, processedChildren }, index) => {
+            const path = parentPath === '' ? String(index) : `${parentPath}.${index}`;
+            const prevItem = index > 0 ? items[index - 1].item : null;
+            const showDivider = prevItem && prevItem.group !== item.group;
+            const hasChildren = !!processedChildren && processedChildren.length > 0;
+            const submenuOpen = hasChildren && this.isSubmenuOpen(path);
+            return [
+                showDivider && h("div", { class: "menu-divider", key: `divider-${path}` }),
+                h("div", { class: "menu-item-wrapper", key: `wrapper-${path}`, ref: el => el && this.menuItemWrapperRefs.set(path, el), onMouseEnter: () => this.handleItemMouseEnter(path, hasChildren) }, h("button", { key: `${item.label}-${path}`, class: { 'menu-item': true, 'disabled': isDisabled, 'has-children': hasChildren, 'submenu-open': submenuOpen }, onClick: () => this.handleItemClick(item, isDisabled, hasChildren), disabled: isDisabled && !hasChildren }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label), hasChildren && h("kritzel-icon", { name: "chevron-right", size: 12, class: "submenu-arrow" })), hasChildren && submenuOpen && this.renderSubmenu(processedChildren, path)),
+            ];
+        });
+    }
+    renderSubmenu(processedChildren, path) {
+        const position = this.submenuPositions[path] === 'left' ? 'left' : 'right';
+        const zIndex = this.getMenuDepth(path) + 1;
+        return (h("div", { class: { 'submenu-container': true, 'position-left': position === 'left' }, key: `submenu-${path}`, style: { zIndex: String(zIndex) }, ref: el => el && this.submenuRefs.set(path, el), onMouseEnter: () => this.handleSubmenuMouseEnter(), onMouseLeave: () => this.handleSubmenuMouseLeave(path) }, this.renderItems(processedChildren, path)));
+    }
+    render() {
+        if (!this.processedItems || this.processedItems.length === 0) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: "menu-container" }, this.renderItems(this.processedItems, ''))));
+    }
+    static get watchers() { return {
+        "items": [{
+                "onItemsChanged": 0
+            }]
+    }; }
+    static get style() { return kritzelContextMenuCss(); }
+}, [513, "kritzel-context-menu", {
+        "items": [16],
+        "objects": [16],
+        "processedItems": [32],
+        "openSubmenuPath": [32],
+        "submenuPositions": [32]
+    }, [[9, "pointerdown", "handleOutsideClick"]], {
+        "items": [{
+                "onItemsChanged": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-context-menu", "kritzel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-context-menu":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelContextMenu);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelContextMenu as K, defineCustomElement as d };