atomicuilibrary 0.0.1

package/dist/collection/components/context-menu/context-menu.js

@@ -0,0 +1,1412 @@
+import { h, Host } from "@stencil/core";
+import { sanitizeHTML } from "../../utils/security";
+export class UiContextMenu {
+    hostEl;
+    /** Menu items, can be JSON string or array */
+    items = [];
+    internalItems = [];
+    hasItemTemplate = false;
+    onItemsChange() {
+        this.internalItems = this.parseItems();
+        this.resetVirtualScroll();
+    }
+    onLoadItemsChange() {
+        this.resetVirtualScroll();
+    }
+    onVisibleCountChange() {
+        this.resetVirtualScroll();
+    }
+    onPersistStateChange() {
+        if (!this.persistState) {
+            this.persistedState.clear();
+        }
+    }
+    componentWillLoad() {
+        this.internalItems = this.parseItems();
+        this.detectItemTemplate();
+    }
+    /** Listen trigger on: contextmenu, click, hover */
+    openOn = 'contextmenu';
+    /** Placement of the menu relative to target: 'bottom' (default), 'top', 'right', 'left' */
+    placement = 'bottom';
+    /** Optional CSS selector for a target element to attach the context menu */
+    target;
+    onTargetChange() {
+        this.attachTarget();
+    }
+    /** Close menu when selecting an item */
+    closeOnSelect = true;
+    /** Pixel padding from viewport edges */
+    viewportPadding = 16;
+    /** Delay for submenu opening on hover (ms) */
+    submenuOpenDelay = 120;
+    /** Delay for closing menu on mouse leave (ms) */
+    hoverCloseDelay = 50;
+    /** Attach to slotted target only; otherwise listen at document */
+    targetOnly = false;
+    /** Reserve space for icons area even if item has no icon */
+    theme = 'light';
+    reserveIconSpace = true;
+    /** Keep checkbox/radio state even if the menu re-opens */
+    persistState = false;
+    /** Duration needed for a touch to be treated as a long press (ms) */
+    longPressDuration = 500;
+    /** Set to a positive value (with `itemHeight`) to enable virtualized rendering of the root list. */
+    visibleCount = 0;
+    /** Fixed per-item height (px) used when virtualization is active so offsets can be calculated. */
+    itemHeight = 48;
+    /** Optional async loader for paginated/virtualized root items (return `[]` when no further data is available). */
+    loadItems;
+    /** ID of the currently selected item (for persistent highlighting) */
+    selectedId;
+    /** Default library for icons */
+    iconLibrary = 'default';
+    /** Emits when an item is selected */
+    itemSelect;
+    /** Alias event used by existing demos */
+    menuItemClick;
+    /** Emits when the menu opens via a long press */
+    longPress;
+    /** Emits when menu toggles */
+    menuToggle;
+    /** Hook invoked before menu opens; return false or rejected Promise to cancel */
+    beforeOpen;
+    /** Hook invoked before menu closes; return false or rejected Promise to cancel */
+    beforeClose;
+    open = false;
+    pos = { x: 0, y: 0 };
+    activePath = []; // indices per level
+    hoverPath = []; // used for hover tracking
+    typeahead = '';
+    submenuSide = []; // computed per level
+    virtualStart = 0;
+    loadingVirtual = false;
+    rootMenuEl;
+    openTimeout;
+    closeTimeout; // For root menu hover
+    lastKeyTime = 0;
+    keyBuffer = '';
+    slottedTarget;
+    lastAnchorEls = [];
+    targetElement;
+    longPressTimer;
+    virtualScrollEl;
+    persistedState = new Map();
+    virtualHasMore = true;
+    templateObserver;
+    componentDidLoad() {
+        this.attachTarget();
+        this.detectItemTemplate();
+        this.setupTemplateObserver();
+        this.scheduleInitialLoad();
+        document.addEventListener('click', this.onGlobalClick, { capture: true });
+        document.addEventListener('contextmenu', this.onGlobalContextMenu, { capture: true });
+        window.addEventListener('resize', this.onWindowResize);
+        window.addEventListener('scroll', this.onWindowResize, true);
+        window.addEventListener('uiContextMenuOpen', this.handleOtherMenuOpen);
+    }
+    disconnectedCallback() {
+        this.disconnectTemplateObserver();
+        document.removeEventListener('click', this.onGlobalClick, { capture: true });
+        document.removeEventListener('contextmenu', this.onGlobalContextMenu, { capture: true });
+        window.removeEventListener('resize', this.onWindowResize);
+        window.removeEventListener('scroll', this.onWindowResize, true);
+        window.removeEventListener('uiContextMenuOpen', this.handleOtherMenuOpen);
+    }
+    handleOtherMenuOpen = (e) => {
+        // Close if another menu opened and it's not us or one of our submenus calling it
+        if (e.detail && e.detail.source !== this.hostEl) {
+            this.close();
+        }
+    };
+    detectItemTemplate() {
+        this.hasItemTemplate = !!this.hostEl.querySelector('template[slot="item"]');
+    }
+    setupTemplateObserver() {
+        if (this.templateObserver)
+            return;
+        if (typeof globalThis.MutationObserver === 'undefined') {
+            return;
+        }
+        this.templateObserver = new MutationObserver(() => {
+            this.detectItemTemplate();
+        });
+        this.templateObserver.observe(this.hostEl, { childList: true, subtree: true });
+    }
+    disconnectTemplateObserver() {
+        this.templateObserver?.disconnect();
+        this.templateObserver = undefined;
+    }
+    scheduleInitialLoad() {
+        if (this.loadItems) {
+            this.loadMoreItems();
+        }
+    }
+    ensureVirtualItems() {
+        if (!this.loadItems)
+            return;
+        if (this.virtualHasMore && !this.loadingVirtual) {
+            this.loadMoreItems();
+        }
+    }
+    resetVirtualScroll() {
+        this.virtualStart = 0;
+        this.virtualHasMore = true;
+        this.loadingVirtual = false;
+        if (this.virtualScrollEl) {
+            this.virtualScrollEl.scrollTop = 0;
+        }
+        this.ensureVirtualItems();
+    }
+    async loadMoreItems(limitOverride) {
+        if (!this.loadItems || this.loadingVirtual || !this.virtualHasMore)
+            return;
+        this.loadingVirtual = true;
+        const offset = this.internalItems.length;
+        const limit = limitOverride ?? Math.max(this.visibleCount || 1, 8);
+        try {
+            const promise = this.loadItems(offset, limit);
+            const newItems = await promise;
+            if (newItems && newItems.length) {
+                const normalized = this.normalizeItems(newItems);
+                this.internalItems = [...this.internalItems, ...normalized];
+                if (newItems.length < limit) {
+                    this.virtualHasMore = false;
+                }
+            }
+            else {
+                this.virtualHasMore = false;
+            }
+        }
+        catch {
+            this.virtualHasMore = false;
+        }
+        finally {
+            this.loadingVirtual = false;
+        }
+    }
+    handleVirtualScroll = (event) => {
+        const target = event.currentTarget;
+        if (!target)
+            return;
+        const start = Math.floor(target.scrollTop / Math.max(1, this.itemHeight));
+        if (start !== this.virtualStart) {
+            this.virtualStart = start;
+        }
+        this.maybeLoadMoreFromScroll(target);
+    };
+    maybeLoadMoreFromScroll(el) {
+        if (!this.loadItems || this.loadingVirtual || !this.virtualHasMore)
+            return;
+        const threshold = this.itemHeight * 2;
+        if (el.scrollTop + el.clientHeight >= el.scrollHeight - threshold) {
+            this.loadMoreItems();
+        }
+    }
+    get virtualizationActive() {
+        return this.visibleCount > 0 && this.itemHeight > 0;
+    }
+    getVirtualWindow(total) {
+        const visible = Math.min(Math.max(this.visibleCount, 1), total || 1);
+        const maxStart = Math.max(0, total - visible);
+        const start = Math.min(this.virtualStart, maxStart);
+        if (start !== this.virtualStart) {
+            this.virtualStart = start;
+        }
+        const buffer = 2;
+        const end = Math.min(total, start + visible + buffer);
+        const topPadding = start * this.itemHeight;
+        const bottomPadding = Math.max(0, (total - end) * this.itemHeight);
+        return { start, end, visible, topPadding, bottomPadding, containerHeight: visible * this.itemHeight };
+    }
+    async evaluateHook(hook) {
+        if (!hook)
+            return true;
+        try {
+            const result = hook();
+            if (result && typeof result.then === 'function') {
+                return (await result) !== false;
+            }
+            return result !== false;
+        }
+        catch {
+            return false;
+        }
+    }
+    attachTarget() {
+        // Explicit target selector takes precedence
+        if (this.target) {
+            try {
+                // Try finding in Shadow Root / Current Scope first
+                const root = this.hostEl.getRootNode();
+                let el = root.querySelector(this.target);
+                // Fallback to global document
+                if (!el) {
+                    el = document.querySelector(this.target);
+                }
+                if (el) {
+                    this.targetElement = el;
+                    this.bindEvents(el);
+                }
+            }
+            catch { }
+        }
+        // Fallback to slotted target
+        if (!this.targetElement) {
+            const slot = this.hostEl.shadowRoot?.querySelector('slot');
+            if (slot) {
+                const assigned = slot.assignedElements();
+                if (assigned.length > 0) {
+                    this.slottedTarget = assigned[0];
+                    this.targetElement = this.slottedTarget;
+                    this.bindEvents(this.slottedTarget);
+                }
+            }
+        }
+    }
+    bindEvents(el) {
+        if (this.openOn === 'hover') {
+            el.addEventListener('mouseenter', this.onTargetMouseEnter);
+            el.addEventListener('mouseleave', this.onTargetMouseLeave);
+            el.addEventListener('click', this.onTargetClick);
+        }
+        else {
+            const evt = this.openOn === 'click' ? 'click' : 'contextmenu';
+            el.addEventListener(evt, this.onTargetTrigger);
+        }
+        // Mobile Long Press Support
+        el.addEventListener('touchstart', this.onTouchStart, { passive: true });
+        el.addEventListener('touchend', this.onTouchEnd, { passive: true });
+        el.addEventListener('touchmove', this.onTouchMove, { passive: true });
+    }
+    normalizeItems(items) {
+        // Map 'separator' to 'divider' for internal handling
+        return (items || []).map(it => {
+            const copy = { ...it };
+            if (copy.separator === true)
+                copy.divider = true;
+            if (copy.children && copy.children.length)
+                copy.children = this.normalizeItems(copy.children);
+            this.applyPersistedState(copy);
+            return copy;
+        });
+    }
+    applyPersistedState(item) {
+        if (this.persistState && item.id) {
+            const saved = this.persistedState.get(String(item.id));
+            if (saved && saved.checked !== undefined) {
+                item.checked = saved.checked;
+            }
+        }
+        if (item.children) {
+            item.children.forEach(child => this.applyPersistedState(child));
+        }
+    }
+    parseItems() {
+        let arr = [];
+        if (typeof this.items === 'string') {
+            try {
+                arr = JSON.parse(this.items);
+            }
+            catch {
+                arr = [];
+            }
+        }
+        else {
+            arr = this.items || [];
+        }
+        return this.normalizeItems(arr);
+    }
+    onTargetTrigger = (e) => {
+        if (this.openOn === 'contextmenu')
+            e.preventDefault();
+        const point = { x: e.clientX, y: e.clientY };
+        this.openAt(point);
+    };
+    onTargetMouseEnter = (e) => {
+        if (this.closeTimeout)
+            clearTimeout(this.closeTimeout);
+        const target = e.currentTarget;
+        const rect = target.getBoundingClientRect();
+        if (this.placement === 'top') {
+            this.openAt({ x: rect.left, y: rect.top });
+        }
+        else if (this.placement === 'right') {
+            this.openAt({ x: rect.right, y: rect.top });
+        }
+        else if (this.placement === 'left') {
+            this.openAt({ x: rect.left, y: rect.top });
+        }
+        else {
+            // Bottom
+            this.openAt({ x: rect.left, y: rect.bottom });
+        }
+    };
+    onTargetMouseLeave = () => {
+        this.closeTimeout = window.setTimeout(() => {
+            this.close();
+        }, this.hoverCloseDelay);
+    };
+    onTargetClick = (_e) => {
+        // If clicking trigger while hover mode, maybe toggle? or prevent default?
+        // For now, do nothing or user preference
+    };
+    onTouchStart = (e) => {
+        if (this.openOn !== 'contextmenu')
+            return;
+        this.longPressTimer = setTimeout(() => {
+            const touch = e.touches[0];
+            const point = { x: touch.clientX, y: touch.clientY };
+            this.openAt(point);
+            this.longPress.emit(point);
+        }, this.longPressDuration);
+    };
+    onTouchEnd = () => {
+        if (this.longPressTimer)
+            clearTimeout(this.longPressTimer);
+    };
+    onTouchMove = () => {
+        if (this.longPressTimer)
+            clearTimeout(this.longPressTimer);
+    };
+    onMenuMouseEnter = () => {
+        if (this.closeTimeout)
+            clearTimeout(this.closeTimeout);
+    };
+    onMenuMouseLeave = () => {
+        this.onTargetMouseLeave();
+    };
+    onGlobalContextMenu = (e) => {
+        if (this.targetOnly)
+            return;
+        if (this.openOn !== 'contextmenu')
+            return;
+        // If explicit target provided, only open when inside that target
+        if (this.targetElement && !this.targetElement.contains(e.target))
+            return;
+        if (this.hostEl.contains(e.target))
+            return; // ignore inside shadow host
+        e.preventDefault();
+        const point = { x: e.clientX, y: e.clientY };
+        this.openAt(point);
+    };
+    onGlobalClick = (e) => {
+        if (!this.open)
+            return;
+        const target = e.target;
+        const composedPath = typeof e.composedPath === 'function' ? e.composedPath() : [];
+        const clickedInsideHost = composedPath.includes(this.hostEl);
+        const clickedInsideTarget = this.targetElement ? composedPath.includes(this.targetElement) : false;
+        const clickedInsideShadowRoot = !!this.hostEl.shadowRoot?.contains(target);
+        const clickedInsideMenu = !!this.rootMenuEl?.contains(target);
+        // Close if clicked outside menu or clicking non-left button
+        if (!clickedInsideHost
+            && !clickedInsideTarget
+            && !clickedInsideShadowRoot
+            && !clickedInsideMenu
+            && !this.hostEl.contains(target)
+            && (!this.targetElement || !this.targetElement.contains(target))) {
+            this.close();
+        }
+    };
+    onWindowResize = () => {
+        if (!this.open)
+            return;
+        // Re-clamp position on resize/scroll
+        requestAnimationFrame(() => this.clampRootPosition());
+    };
+    async openAt(point) {
+        if (!await this.evaluateHook(this.beforeOpen)) {
+            return;
+        }
+        this.open = true;
+        this.pos = { ...point };
+        this.activePath = [];
+        this.hoverPath = [];
+        this.submenuSide = [];
+        // Only emit event if component is still connected to DOM
+        if (this.hostEl.isConnected) {
+            this.menuToggle.emit(true);
+            window.dispatchEvent(new CustomEvent('uiContextMenuOpen', {
+                detail: { source: this.hostEl }
+            }));
+        }
+        requestAnimationFrame(() => {
+            this.rootMenuEl = this.hostEl.shadowRoot?.querySelector('.ctx-menu');
+            this.clampRootPosition();
+            // Focus for keyboard navigation
+            this.rootMenuEl?.querySelector('[role="menu"]')?.focus();
+        });
+    }
+    async close() {
+        if (this.open && await this.evaluateHook(this.beforeClose)) {
+            this.open = false;
+            // Only emit event if component is still connected to DOM
+            if (this.hostEl.isConnected) {
+                this.menuToggle.emit(false);
+            }
+            this.activePath = [];
+            this.hoverPath = [];
+            this.submenuSide = [];
+        }
+    }
+    clampRectToViewport(rect, padding) {
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const dx = Math.min(0, vw - padding - rect.right) + Math.max(0, padding - rect.left);
+        const dy = Math.min(0, vh - padding - rect.bottom) + Math.max(0, padding - rect.top);
+        return { dx, dy };
+    }
+    clampRootPosition() {
+        if (!this.rootMenuEl)
+            return;
+        const el = this.rootMenuEl;
+        const padding = this.viewportPadding;
+        const vh = window.innerHeight;
+        // Clamp position to viewport
+        const rect = el.getBoundingClientRect();
+        const { dx, dy } = this.clampRectToViewport(rect, padding);
+        let newX = Math.round(this.pos.x + dx);
+        let newY = Math.round(this.pos.y + dy);
+        // Prevent the menu from going off the left or top edge of the screen completely
+        if (newX < padding)
+            newX = padding;
+        if (newY < padding)
+            newY = padding;
+        this.pos = { x: newX, y: newY };
+        // Clamp height if menu is taller than viewport from its current position
+        const availableHeight = vh - padding - newY;
+        if (!this.virtualizationActive) {
+            if (rect.height > availableHeight) {
+                el.style.maxHeight = `${availableHeight}px`;
+                el.style.overflowY = 'auto';
+            }
+            else {
+                el.style.maxHeight = '';
+                el.style.overflowY = '';
+            }
+        }
+        else {
+            el.style.maxHeight = '';
+            el.style.overflowY = '';
+        }
+        // Update transform origin for nicer animation
+        const originX = (dx < 0) ? '100%' : (dx > 0) ? '0%' : '50%';
+        const originY = (dy < 0) ? '100%' : (dy > 0) ? '0%' : '50%';
+        el.style.setProperty('--ctx-origin-x', originX);
+        el.style.setProperty('--ctx-origin-y', originY);
+    }
+    openSubmenu(level, index, anchorEl) {
+        // Compute submenu side based on viewport space
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const spaceRight = window.innerWidth - anchorRect.right;
+        const spaceLeft = anchorRect.left;
+        const side = spaceRight >= 240 || spaceRight >= spaceLeft ? 'right' : 'left';
+        this.submenuSide = [...this.submenuSide.slice(0, level), side];
+        // Update active path
+        this.activePath = [...this.activePath.slice(0, level), index];
+        this.lastAnchorEls[level] = anchorEl;
+        // After render, adjust submenu position to keep within viewport
+        this.scheduleSubmenuPosition(level);
+    }
+    handleMouseEnterItem(level, index, el) {
+        window.clearTimeout(this.openTimeout);
+        this.openTimeout = window.setTimeout(() => {
+            this.openSubmenu(level, index, el);
+            this.hoverPath = [...this.activePath];
+        }, this.submenuOpenDelay);
+    }
+    handleClickItem(item, path, ev) {
+        if (item.disabled || item.divider)
+            return;
+        if (item.children && item.children.length > 0) {
+            // open submenu immediately on click
+            const target = ev.currentTarget;
+            const level = path.length - 1;
+            this.openSubmenu(level, path[level], target);
+            return;
+        }
+        // Handle State Changes
+        if (item.type === 'checkbox') {
+            item.checked = !item.checked;
+            this.internalItems = [...this.internalItems]; // trigger render
+        }
+        else if (item.type === 'radio') {
+            // Find siblings and uncheck them
+            const parentItems = path.length > 1
+                ? this.getItemsAtPath(path.slice(0, -1))
+                : this.internalItems;
+            parentItems.forEach(it => {
+                if (it.type === 'radio')
+                    it.checked = false;
+            });
+            item.checked = true;
+            this.internalItems = [...this.internalItems]; // trigger render
+        }
+        this.itemSelect.emit({ item, path });
+        this.menuItemClick.emit({ item, path });
+        // Don't close for checkboxes/radios usually, but let's stick to prop unless overridden?
+        // Standard behavior: clicking checkbox keeps menu open.
+        if (item.type !== 'checkbox' && item.type !== 'radio' && this.closeOnSelect) {
+            this.close();
+        }
+    }
+    getItemsAtPath(path) {
+        // Use internalItems instead of parsing prop again
+        let options = this.internalItems;
+        for (const idx of path) {
+            const node = options[idx];
+            if (!node || !node.children)
+                return [];
+            options = node.children;
+        }
+        return options;
+    }
+    navMove(level, delta) {
+        const items = this.getItemsAtPath(this.activePath.slice(0, level + 1));
+        const currentIndex = this.activePath[level] ?? -1;
+        let nextIdx = currentIndex + delta;
+        const clamp = (i) => Math.max(0, Math.min(i, items.length - 1));
+        // Skip dividers/disabled
+        const isSelectable = (i) => {
+            const it = items[i];
+            return it && !it.divider && !it.disabled;
+        };
+        nextIdx = clamp(nextIdx);
+        while (!isSelectable(nextIdx) && (delta > 0 ? nextIdx < items.length - 1 : nextIdx > 0)) {
+            nextIdx = clamp(nextIdx + delta);
+        }
+        this.activePath = [...this.activePath.slice(0, level), nextIdx];
+        // Try positioning submenu if it opens due to selection change
+        const anchor = this.getAnchorElForLevel(level);
+        if (anchor)
+            this.scheduleSubmenuPosition(level);
+    }
+    keydown = (e) => {
+        if (!this.open)
+            return;
+        const level = this.activePath.length ? this.activePath.length - 1 : 0;
+        const currentLevelItems = this.getItemsAtPath(this.activePath.slice(0, level + 1));
+        const currentIndex = this.activePath[level] ?? 0;
+        const currentItem = currentLevelItems[currentIndex];
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.navMove(level, +1);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.navMove(level, -1);
+                break;
+            case 'ArrowRight': {
+                e.preventDefault();
+                if (currentItem?.children?.length) {
+                    this.activePath = [...this.activePath, 0];
+                    this.submenuSide = [...this.submenuSide, 'right'];
+                    const anchor = this.getAnchorElForLevel(level);
+                    if (anchor)
+                        this.scheduleSubmenuPosition(level);
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                e.preventDefault();
+                if (this.activePath.length > 0) {
+                    this.activePath = this.activePath.slice(0, -1);
+                    this.submenuSide = this.submenuSide.slice(0, -1);
+                }
+                else {
+                    this.close();
+                }
+                break;
+            }
+            case 'Enter': {
+                e.preventDefault();
+                if (currentItem)
+                    this.itemSelect.emit({ item: currentItem, path: [...this.activePath] });
+                if (this.closeOnSelect)
+                    this.close();
+                break;
+            }
+            case 'Escape':
+                this.close();
+                break;
+            default: {
+                // typeahead
+                if (e.key.length === 1) {
+                    const now = Date.now();
+                    if (now - this.lastKeyTime > 800) {
+                        this.keyBuffer = '';
+                    }
+                    this.lastKeyTime = now;
+                    this.keyBuffer += e.key.toLowerCase();
+                    const items = this.getItemsAtPath(this.activePath.slice(0, level + 1));
+                    const idx = items.findIndex(it => !it.divider && !it.disabled && it.label && it.label.toLowerCase().startsWith(this.keyBuffer));
+                    if (idx >= 0) {
+                        this.activePath = [...this.activePath.slice(0, level), idx];
+                    }
+                }
+            }
+        }
+    };
+    getAnchorElForLevel(level) {
+        // Find the LI element corresponding to activePath[level]
+        try {
+            const root = this.hostEl.shadowRoot?.querySelector('.ctx-menu > .ctx-list');
+            if (!root)
+                return undefined;
+            let ul = root;
+            for (let i = 0; i <= level; i++) {
+                const idx = this.activePath[i];
+                if (idx == null)
+                    return undefined;
+                const lis = ul.querySelectorAll(':scope > .ctx-item');
+                const li = lis[idx];
+                if (!li)
+                    return undefined;
+                if (i === level)
+                    return li;
+                // Next level UL resides inside submenu of this LI
+                const nextUl = li.querySelector(':scope > .ctx-submenu > .ctx-list');
+                if (!nextUl)
+                    return undefined;
+                ul = nextUl;
+            }
+        }
+        catch { }
+        return undefined;
+    }
+    scheduleSubmenuPosition(level) {
+        requestAnimationFrame(() => this.positionSubmenu(level));
+    }
+    positionSubmenu(level) {
+        const anchorEl = this.lastAnchorEls[level] || this.getAnchorElForLevel(level);
+        if (!anchorEl)
+            return;
+        const submenu = anchorEl.querySelector(':scope > .ctx-submenu');
+        if (!submenu)
+            return;
+        const padding = this.viewportPadding;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        // Measure submenu
+        const rect = submenu.getBoundingClientRect();
+        const anchorRect = anchorEl.getBoundingClientRect();
+        // Horizontal flip if needed
+        const overflowRight = rect.right > vw - padding;
+        const overflowLeft = rect.left < padding;
+        const side = this.submenuSide[level] || 'right';
+        if ((side === 'right' && overflowRight) || (side === 'left' && overflowLeft)) {
+            const spaceRight = vw - anchorRect.right;
+            const spaceLeft = anchorRect.left;
+            const desiredSide = spaceLeft > spaceRight ? 'left' : 'right';
+            if (desiredSide !== side) {
+                this.submenuSide = [...this.submenuSide.slice(0, level), desiredSide];
+                // Re-run after flip renders
+                requestAnimationFrame(() => this.positionSubmenu(level));
+                return;
+            }
+        }
+        // Vertical shift to keep within viewport
+        let offsetY = 0;
+        const afterRect = submenu.getBoundingClientRect();
+        if (afterRect.bottom > vh - padding) {
+            offsetY -= Math.ceil(afterRect.bottom - (vh - padding));
+        }
+        let newTop = afterRect.top + offsetY;
+        if (newTop < padding) {
+            offsetY += Math.ceil(padding - newTop);
+            newTop = padding;
+        }
+        // Apply offset if any
+        if (offsetY !== 0) {
+            submenu.style.top = `${offsetY}px`;
+        }
+        else {
+            submenu.style.top = '0px';
+        }
+        // Clamp height if submenu is taller than viewport from its current position
+        const availableHeight = vh - padding - newTop;
+        if (afterRect.height > availableHeight) {
+            submenu.style.maxHeight = `${availableHeight}px`;
+            submenu.style.overflowY = 'auto';
+        }
+        else {
+            submenu.style.maxHeight = '';
+            submenu.style.overflowY = '';
+        }
+    }
+    renderItems(items, level, baseIndex = 0) {
+        const activeIdx = this.activePath[level] ?? -1;
+        const side = this.submenuSide[level] || 'right';
+        const hasIcons = items.some(i => !!i.icon || i.checked !== undefined || i.type === 'checkbox' || i.type === 'radio' || (i.id && i.id === this.selectedId) || !!i.iconTemplate);
+        const shouldReserve = this.reserveIconSpace && hasIcons;
+        const parentPath = this.activePath.slice(0, level);
+        return (h("ul", { class: { 'ctx-list': true, 'ctx-list-no-icons': !shouldReserve }, role: "menu", tabindex: 0, onKeyDown: this.keydown }, items.map((item, idx) => {
+            if (item.divider || item.type === 'separator') {
+                return h("li", { class: "ctx-divider", role: "separator" });
+            }
+            if (item.type === 'header') {
+                return h("li", { class: "ctx-header", role: "presentation" }, item.label);
+            }
+            const actualIndex = baseIndex + idx;
+            const isActive = actualIndex === activeIdx;
+            const hasChildren = !!item.children?.length;
+            const Tag = (item.href && !item.disabled && !hasChildren) ? 'a' : 'div';
+            const attrs = (item.href && !item.disabled && !hasChildren) ? { href: item.href } : {};
+            const isDanger = item.variant === 'danger';
+            const isSelected = !!(item.id && item.id === this.selectedId);
+            const path = [...parentPath, actualIndex];
+            const slotProps = {
+                name: 'item',
+                item,
+                index: actualIndex,
+                level,
+                path,
+                checked: !!(item.checked || isSelected),
+                active: isActive,
+                hasChildren,
+                disabled: !!item.disabled,
+                variant: item.variant,
+            };
+            const defaultMarkup = (h(Tag, { class: "ctx-item-content", ...attrs }, (shouldReserve || item.icon || item.checked !== undefined || isSelected || item.iconTemplate) && (h("span", { class: "ctx-icon-area" }, item.iconTemplate ? (h("span", { class: "ctx-icon-slot", innerHTML: sanitizeHTML(item.iconTemplate) })) : item.icon ? (h("ui-icon", { name: item.icon, library: item.iconLibrary || this.iconLibrary, size: "1.2em" })) : (item.checked || isSelected ? (h("ui-icon", { name: "check", library: "lucide", size: "1.2em" })) : ''))), h("div", { class: "ctx-text-content" }, h("div", { class: "ctx-label-row" }, h("span", { class: "ctx-label" }, item.label), item.shortcut && h("span", { class: "ctx-shortcut" }, item.shortcut)), item.description && h("span", { class: "ctx-description" }, item.description)), hasChildren && (h("span", { class: "ctx-sub-arrow" }, h("ui-icon", { name: "chevron-right", library: "lucide", size: "12px" })))));
+            return (h("li", { class: {
+                    'ctx-item': true,
+                    'ctx-item-active': isActive,
+                    'ctx-item-selected': isSelected,
+                    'ctx-item-disabled': !!item.disabled,
+                    'ctx-item-danger': isDanger,
+                    'ctx-item-has-children': hasChildren,
+                }, role: item.type === 'checkbox' ? 'menuitemcheckbox' : item.type === 'radio' ? 'menuitemradio' : 'menuitem', "aria-checked": item.checked || isSelected ? 'true' : 'false', "aria-haspopup": hasChildren ? 'menu' : null, "aria-disabled": item.disabled ? 'true' : null, onMouseEnter: (ev) => this.handleMouseEnterItem(level, actualIndex, ev.currentTarget), onClick: (ev) => this.handleClickItem(item, path, ev) }, h("slot", { ...slotProps }, defaultMarkup), hasChildren && isActive && (h("div", { class: { 'ctx-submenu': true, [`ctx-sub-${side}`]: true } }, this.renderItems(item.children, level + 1)))));
+        })));
+    }
+    render() {
+        const items = this.internalItems;
+        let transform = '';
+        if (this.placement === 'top')
+            transform = 'translateY(-100%)';
+        else if (this.placement === 'left')
+            transform = 'translateX(-100%)';
+        const shouldVirtualize = this.virtualizationActive && (this.loadItems || items.length > this.visibleCount);
+        const windowInfo = shouldVirtualize && items.length > 0 ? this.getVirtualWindow(items.length) : null;
+        return (h(Host, { key: 'c2181afce5b7b4ef2d7df5a2d991bb70d41f27cb' }, h("slot", { key: '4142323103c62c98771ce563dfb0618ab88de56d' }), this.open && (h("div", { key: '9326f1949e3f13b96d4641ebea1cf8496014ae15', class: "ctx-menu", style: {
+                position: 'fixed',
+                zIndex: '11000',
+                left: `${this.pos.x}px`,
+                top: `${this.pos.y}px`,
+                transform: transform
+            }, onMouseEnter: this.onMenuMouseEnter, onMouseLeave: this.onMenuMouseLeave }, windowInfo ? (h("div", { class: "ctx-virtual-scroll", ref: el => (this.virtualScrollEl = el || undefined), style: {
+                height: `${windowInfo.containerHeight}px`,
+                overflowY: 'auto'
+            }, onScroll: this.handleVirtualScroll }, h("div", { class: "ctx-virtual-spacer", style: { height: `${items.length * this.itemHeight}px` } }, h("div", { class: "ctx-virtual-offset", style: { transform: `translateY(${windowInfo.topPadding}px)` } }, this.renderItems(items.slice(windowInfo.start, windowInfo.end), 0, windowInfo.start), this.loadingVirtual && (h("div", { class: "ctx-virtual-loader", style: { height: `${this.itemHeight}px` } }, h("ui-loader", { type: "dots", size: "xs" }))))))) : (this.renderItems(items, 0))))));
+    }
+    static get is() { return "ui-context-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["context-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["context-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ContextMenuItem[] | string",
+                    "resolved": "ContextMenuItem[] | string",
+                    "references": {
+                        "ContextMenuItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/context-menu/types.ts::ContextMenuItem",
+                            "referenceLocation": "ContextMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu items, can be JSON string or array"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "openOn": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'contextmenu' | 'click' | 'hover'",
+                    "resolved": "\"click\" | \"contextmenu\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Listen trigger on: contextmenu, click, hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open-on",
+                "defaultValue": "'contextmenu'"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bottom' | 'top' | 'right' | 'left'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placement of the menu relative to target: 'bottom' (default), 'top', 'right', 'left'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom'"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional CSS selector for a target element to attach the context menu"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "closeOnSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close menu when selecting an item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-select",
+                "defaultValue": "true"
+            },
+            "viewportPadding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pixel padding from viewport edges"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "viewport-padding",
+                "defaultValue": "16"
+            },
+            "submenuOpenDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay for submenu opening on hover (ms)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "submenu-open-delay",
+                "defaultValue": "120"
+            },
+            "hoverCloseDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay for closing menu on mouse leave (ms)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hover-close-delay",
+                "defaultValue": "50"
+            },
+            "targetOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Attach to slotted target only; otherwise listen at document"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target-only",
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark' | 'green'",
+                    "resolved": "\"dark\" | \"green\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reserve space for icons area even if item has no icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "theme",
+                "defaultValue": "'light'"
+            },
+            "reserveIconSpace": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reserve-icon-space",
+                "defaultValue": "true"
+            },
+            "persistState": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keep checkbox/radio state even if the menu re-opens"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persist-state",
+                "defaultValue": "false"
+            },
+            "longPressDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration needed for a touch to be treated as a long press (ms)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "long-press-duration",
+                "defaultValue": "500"
+            },
+            "visibleCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to a positive value (with `itemHeight`) to enable virtualized rendering of the root list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible-count",
+                "defaultValue": "0"
+            },
+            "itemHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fixed per-item height (px) used when virtualization is active so offsets can be calculated."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-height",
+                "defaultValue": "48"
+            },
+            "loadItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(offset: number, limit: number) => Promise<ContextMenuItem[]>",
+                    "resolved": "(offset: number, limit: number) => Promise<ContextMenuItem[]>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ContextMenuItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/context-menu/types.ts::ContextMenuItem",
+                            "referenceLocation": "ContextMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional async loader for paginated/virtualized root items (return `[]` when no further data is available)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "selectedId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the currently selected item (for persistent highlighting)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-id"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"bootstrap\" | \"default\" | \"emoji\" | \"fontawesome\" | \"google\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"remixicon\" | \"se\"",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::IconLibrary",
+                            "referenceLocation": "IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default library for icons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'default'"
+            },
+            "beforeOpen": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => boolean | Promise<boolean>",
+                    "resolved": "() => boolean | Promise<boolean>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hook invoked before menu opens; return false or rejected Promise to cancel"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "beforeClose": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => boolean | Promise<boolean>",
+                    "resolved": "() => boolean | Promise<boolean>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hook invoked before menu closes; return false or rejected Promise to cancel"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalItems": {},
+            "hasItemTemplate": {},
+            "open": {},
+            "pos": {},
+            "activePath": {},
+            "hoverPath": {},
+            "typeahead": {},
+            "submenuSide": {},
+            "virtualStart": {},
+            "loadingVirtual": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemSelect",
+                "name": "itemSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when an item is selected"
+                },
+                "complexType": {
+                    "original": "{ item: ContextMenuItem, path: number[] }",
+                    "resolved": "{ item: ContextMenuItem; path: number[]; }",
+                    "references": {
+                        "ContextMenuItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/context-menu/types.ts::ContextMenuItem",
+                            "referenceLocation": "ContextMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "menuItemClick",
+                "name": "menuItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alias event used by existing demos"
+                },
+                "complexType": {
+                    "original": "{ item: ContextMenuItem, path: number[] }",
+                    "resolved": "{ item: ContextMenuItem; path: number[]; }",
+                    "references": {
+                        "ContextMenuItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/context-menu/types.ts::ContextMenuItem",
+                            "referenceLocation": "ContextMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "longPress",
+                "name": "longPress",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the menu opens via a long press"
+                },
+                "complexType": {
+                    "original": "Point",
+                    "resolved": "Point",
+                    "references": {
+                        "Point": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/context-menu/types.ts::Point",
+                            "referenceLocation": "Point"
+                        }
+                    }
+                }
+            }, {
+                "method": "menuToggle",
+                "name": "menuToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when menu toggles"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "openAt": {
+                "complexType": {
+                    "signature": "(point: Point) => Promise<void>",
+                    "parameters": [{
+                            "name": "point",
+                            "type": "Point",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Point": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/context-menu/types.ts::Point",
+                            "referenceLocation": "Point"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "onItemsChange"
+            }, {
+                "propName": "loadItems",
+                "methodName": "onLoadItemsChange"
+            }, {
+                "propName": "visibleCount",
+                "methodName": "onVisibleCountChange"
+            }, {
+                "propName": "persistState",
+                "methodName": "onPersistStateChange"
+            }, {
+                "propName": "target",
+                "methodName": "onTargetChange"
+            }];
+    }
+}