atomicuilibrary 0.0.1

package/dist/collection/components/panel/panel.js

@@ -0,0 +1,1842 @@
+import { h } from "@stencil/core";
+export class Panel {
+    element;
+    /**
+     * Unique identifier for the panel
+     */
+    panelId = '';
+    /**
+     * Panel width
+     */
+    width = '100%';
+    /**
+     * Panel height
+     */
+    height = 'auto';
+    /**
+     * Maximum width of the panel
+     */
+    maxWidth = 'none';
+    /**
+     * Maximum height of the panel
+     */
+    maxHeight = 'none';
+    /**
+     * Show close button
+     */
+    showClose = true;
+    /**
+     * Show settings button
+     */
+    showSettings = true;
+    /**
+     * Panel title text
+     */
+    panelTitle = '';
+    /**
+     * Panel subtitle text
+     */
+    panelSubtitle = '';
+    /**
+     * Visual variant
+      */
+    variant = 'elevated';
+    /**
+     * Whether the panel is toggleable (collapsible)
+     */
+    toggleable = false;
+    /**
+     * Whether the panel is currently collapsed
+     */
+    collapsed = false;
+    /**
+     * Whether the panel is in loading state
+     */
+    loading = false;
+    /**
+     * Remove processing on content padding
+     */
+    noPadding = false;
+    /**
+     * Color theme for the panel
+     */
+    theme = 'default';
+    /**
+     * Animation duration for collapse/expand
+     */
+    animationDuration = '300ms';
+    /**
+     * Animation type for collapse/expand
+     */
+    animationType = 'slide';
+    /**
+     * Badge content (number or text)
+     */
+    badge = '';
+    /**
+     * Badge variant style
+     */
+    badgeVariant = 'count';
+    /**
+     * Panel icon to show in header
+     */
+    icon = '';
+    /**
+     * Enable keyboard navigation
+     */
+    keyboardNav = true;
+    /**
+     * Dynamic flowing glow effect (Aura)
+     */
+    aura = false;
+    /**
+     * Integrated search bar in header
+     */
+    enableSearch = false;
+    /**
+     * Search placeholder text
+     */
+    searchPlaceholder = 'Search content...';
+    /**
+     * Elevation level (0-5) for shadow depth
+     */
+    elevation = 2;
+    panelClose;
+    panelSettings;
+    toggle;
+    /**
+     * Minimizable panel
+     */
+    minimizable = false;
+    /**
+     * Maximizable panel
+     */
+    maximizable = false;
+    /**
+     * Minimized state
+     */
+    minimized = false;
+    /**
+     * Maximized state
+     */
+    maximized = false;
+    /**
+     * Draggable panel
+     */
+    isDraggable = false;
+    /** Limit dragging within the viewport */
+    bounds = 'none';
+    /** Snap to window edges when dragging close to them */
+    edgeSnapping = false;
+    /** Snap distance in pixels */
+    snapThreshold = 20;
+    /** Snap to a grid while dragging */
+    snapToGrid = false;
+    /** Size of the grid for snapping */
+    gridSize = 20;
+    /** Apply 3D tilt physics during drag */
+    dragPhysics = false;
+    /**
+     * Resizable panel
+     */
+    resizable = false;
+    /**
+     * Minimum width when resizing
+     */
+    minWidth = '200px';
+    /**
+     * Minimum height when resizing
+     */
+    minHeight = '100px';
+    /**
+     * Pinned panel (stays on top)
+     */
+    pinned = false;
+    /**
+     * Key to persist the panel's open state and size in localStorage
+     */
+    persistenceId;
+    /**
+     * Overflow behavior
+     */
+    overflow = 'auto';
+    /**
+     * Position of the panel (docking)
+     */
+    position;
+    /**
+     * Horizontal position (e.g., '100px', '20%'). Used if position is not set.
+     */
+    x;
+    /**
+     * Vertical position (e.g., '100px', '20%'). Used if position is not set.
+     */
+    y;
+    /**
+     * Show backdrop behind the panel (modal mode)
+     */
+    modal = false;
+    /**
+     * Close panel when clicking on backdrop
+     */
+    dismissible = false;
+    /**
+     * Glassmorphism effect
+     */
+    glass = false;
+    /**
+     * Background color of the panel
+     */
+    backgroundColor = 'white';
+    panelMinimize;
+    panelMaximize;
+    panelRestore;
+    panelDragStart;
+    panelDrag;
+    panelDragEnd;
+    panelResizeStart;
+    panelResize;
+    panelResizeEnd;
+    panelSearch;
+    // @ts-ignore - Stored for future state restoration feature
+    previousDimensions = { width: '100%', height: 'auto' };
+    isDragging = false;
+    isResizing = false;
+    currentWidth;
+    currentHeight;
+    isActive = false;
+    searchQuery = '';
+    dragStartX = 0;
+    dragStartY = 0;
+    dragPosition = { x: 0, y: 0 };
+    resizeStartWidth = 0;
+    initialRect;
+    lastMouseX = 0;
+    dragTilt = 0;
+    resizeStartHeight = 0;
+    resizeHandle = '';
+    componentWillLoad() {
+        this.loadState();
+        if (!this.currentWidth)
+            this.currentWidth = this.width;
+        if (!this.currentHeight)
+            this.currentHeight = this.height;
+    }
+    loadState() {
+        if (this.persistenceId) {
+            const saved = localStorage.getItem(`ui-panel-${this.persistenceId}`);
+            if (saved) {
+                try {
+                    const state = JSON.parse(saved);
+                    this.collapsed = state.collapsed ?? this.collapsed;
+                    this.minimized = state.minimized ?? this.minimized;
+                    this.maximized = state.maximized ?? this.maximized;
+                    this.dragPosition = state.dragPosition ?? this.dragPosition;
+                    this.currentWidth = state.currentWidth ?? this.currentWidth;
+                    this.currentHeight = state.currentHeight ?? this.currentHeight;
+                    this.pinned = state.pinned ?? this.pinned;
+                    this.previousDimensions = state.previousDimensions ?? this.previousDimensions;
+                }
+                catch (e) {
+                    console.warn('Failed to load panel state', e);
+                }
+            }
+        }
+    }
+    saveState() {
+        if (this.persistenceId) {
+            const state = {
+                collapsed: this.collapsed,
+                minimized: this.minimized,
+                maximized: this.maximized,
+                dragPosition: this.dragPosition,
+                currentWidth: this.currentWidth,
+                currentHeight: this.currentHeight,
+                pinned: this.pinned,
+                previousDimensions: this.previousDimensions
+            };
+            localStorage.setItem(`ui-panel-${this.persistenceId}`, JSON.stringify(state));
+        }
+    }
+    handleFocus = () => {
+        this.isActive = true;
+        // Notify other panels to deactivate if needed, or handled via CSS z-index
+    };
+    handleBlur = () => {
+        this.isActive = false;
+    };
+    handleKeyDown = (e) => {
+        if (!this.keyboardNav)
+            return;
+        if (e.key === 'Escape' && this.showClose) {
+            this.handleClose(e);
+        }
+        else if ((e.key === ' ' || e.key === 'Enter') && this.toggleable) {
+            e.preventDefault();
+            this.handleToggle();
+        }
+        else if (this.isDraggable && e.shiftKey) {
+            // Keyboard drag
+            const step = this.snapToGrid ? this.gridSize : 20;
+            if (e.key === 'ArrowUp') {
+                this.dragPosition = { ...this.dragPosition, y: this.dragPosition.y - step };
+                e.preventDefault();
+            }
+            if (e.key === 'ArrowDown') {
+                this.dragPosition = { ...this.dragPosition, y: this.dragPosition.y + step };
+                e.preventDefault();
+            }
+            if (e.key === 'ArrowLeft') {
+                this.dragPosition = { ...this.dragPosition, x: this.dragPosition.x - step };
+                e.preventDefault();
+            }
+            if (e.key === 'ArrowRight') {
+                this.dragPosition = { ...this.dragPosition, x: this.dragPosition.x + step };
+                e.preventDefault();
+            }
+            this.saveState();
+            this.panelDrag.emit({ panelId: this.panelId, x: this.dragPosition.x, y: this.dragPosition.y });
+        }
+    };
+    handleMinimize = (e) => {
+        e.stopPropagation();
+        this.minimized = !this.minimized;
+        if (this.minimized && this.maximized) {
+            this.maximized = false;
+        }
+        this.panelMinimize.emit({ panelId: this.panelId });
+        this.saveState();
+    };
+    handleMaximize = (e) => {
+        e.stopPropagation();
+        if (!this.maximized) {
+            // Store current dimensions before maximizing
+            this.previousDimensions = { width: this.currentWidth, height: this.currentHeight };
+            this.maximized = true;
+            this.minimized = false;
+            this.panelMaximize.emit({ panelId: this.panelId });
+        }
+        else {
+            // Restore previous dimensions
+            this.maximized = false;
+            // Apply previousDimensions
+            this.currentWidth = this.previousDimensions.width;
+            this.currentHeight = this.previousDimensions.height;
+            this.panelRestore.emit({ panelId: this.panelId });
+        }
+        this.saveState();
+    };
+    handleDragStart = (e) => {
+        if (!this.isDraggable || this.maximized)
+            return;
+        this.isDragging = true;
+        this.dragStartX = e.clientX - this.dragPosition.x;
+        this.dragStartY = e.clientY - this.dragPosition.y;
+        this.initialRect = this.element.getBoundingClientRect();
+        this.lastMouseX = e.clientX;
+        this.panelDragStart.emit({ panelId: this.panelId, x: this.dragPosition.x, y: this.dragPosition.y });
+        document.addEventListener('mousemove', this.handleDragMove);
+        document.addEventListener('mouseup', this.handleDragEnd);
+    };
+    handleDragMove = (e) => {
+        if (!this.isDragging)
+            return;
+        let deltaX = e.clientX - this.dragStartX;
+        let deltaY = e.clientY - this.dragStartY;
+        if (this.dragPhysics) {
+            const vX = e.clientX - this.lastMouseX;
+            this.lastMouseX = e.clientX;
+            const tiltX = Math.max(-15, Math.min(15, vX * 0.4));
+            // Ease into tilt smoothly
+            this.dragTilt = tiltX;
+        }
+        if (this.snapToGrid && this.gridSize > 0) {
+            deltaX = Math.round(deltaX / this.gridSize) * this.gridSize;
+            deltaY = Math.round(deltaY / this.gridSize) * this.gridSize;
+        }
+        let newX = deltaX;
+        let newY = deltaY;
+        if (this.bounds === 'viewport' && this.initialRect) {
+            const screenX = this.initialRect.left + newX;
+            const screenY = this.initialRect.top + newY;
+            const minVisible = 40;
+            const viewWidth = window.innerWidth;
+            const viewHeight = window.innerHeight;
+            if (screenX + this.initialRect.width < minVisible) {
+                newX = minVisible - this.initialRect.width - this.initialRect.left;
+            }
+            if (screenX > viewWidth - minVisible) {
+                newX = viewWidth - minVisible - this.initialRect.left;
+            }
+            if (screenY < 0) {
+                newY = -this.initialRect.top;
+            }
+            if (screenY > viewHeight - minVisible) {
+                newY = viewHeight - minVisible - this.initialRect.top;
+            }
+        }
+        if (this.edgeSnapping && this.initialRect) {
+            const screenX = this.initialRect.left + newX;
+            const screenY = this.initialRect.top + newY;
+            const vW = window.innerWidth;
+            const vH = window.innerHeight;
+            const t = this.snapThreshold;
+            if (Math.abs(screenX) < t) {
+                newX = -this.initialRect.left;
+            }
+            if (Math.abs(screenY) < t) {
+                newY = -this.initialRect.top;
+            }
+            if (Math.abs(screenX + this.initialRect.width - vW) < t) {
+                newX = vW - this.initialRect.width - this.initialRect.left;
+            }
+            if (Math.abs(screenY + this.initialRect.height - vH) < t) {
+                newY = vH - this.initialRect.height - this.initialRect.top;
+            }
+        }
+        this.dragPosition = { x: newX, y: newY };
+        this.panelDrag.emit({ panelId: this.panelId, x: newX, y: newY });
+    };
+    handleDragEnd = () => {
+        if (!this.isDragging)
+            return;
+        this.isDragging = false;
+        if (this.dragPhysics)
+            this.dragTilt = 0;
+        if (this.edgeSnapping && this.initialRect) {
+            const screenX = this.initialRect.left + this.dragPosition.x;
+            const vW = window.innerWidth;
+            if (screenX <= 0) {
+                this.maximized = false;
+                this.currentWidth = '50vw';
+                this.currentHeight = '100vh';
+                this.dragPosition = { x: -this.initialRect.left, y: -this.initialRect.top };
+            }
+            else if (screenX + this.initialRect.width >= vW) {
+                this.maximized = false;
+                this.currentWidth = '50vw';
+                this.currentHeight = '100vh';
+                this.dragPosition = { x: vW - (vW / 2) - this.initialRect.left, y: -this.initialRect.top };
+            }
+        }
+        this.panelDragEnd.emit({ panelId: this.panelId, x: this.dragPosition.x, y: this.dragPosition.y });
+        this.saveState();
+        document.removeEventListener('mousemove', this.handleDragMove);
+        document.removeEventListener('mouseup', this.handleDragEnd);
+    };
+    handleResizeStart = (e, handle) => {
+        if (!this.resizable)
+            return;
+        e.stopPropagation();
+        this.isResizing = true;
+        this.resizeHandle = handle;
+        this.dragStartX = e.clientX;
+        this.dragStartY = e.clientY;
+        const rect = this.element.getBoundingClientRect();
+        this.resizeStartWidth = rect.width;
+        this.resizeStartHeight = rect.height;
+        this.panelResizeStart.emit({ panelId: this.panelId, width: rect.width, height: rect.height });
+        document.addEventListener('mousemove', this.handleResizeMove);
+        document.addEventListener('mouseup', this.handleResizeEnd);
+    };
+    handleResizeMove = (e) => {
+        if (!this.isResizing)
+            return;
+        const deltaX = e.clientX - this.dragStartX;
+        const deltaY = e.clientY - this.dragStartY;
+        let newWidth = this.resizeStartWidth;
+        let newHeight = this.resizeStartHeight;
+        let diffX = 0;
+        let diffY = 0;
+        if (this.resizeHandle.includes('e'))
+            newWidth += deltaX;
+        if (this.resizeHandle.includes('w')) {
+            newWidth -= deltaX;
+            diffX = deltaX;
+        }
+        if (this.resizeHandle.includes('s'))
+            newHeight += deltaY;
+        if (this.resizeHandle.includes('n')) {
+            newHeight -= deltaY;
+            diffY = deltaY;
+        }
+        // Apply min dimensions
+        const minW = parseInt(this.minWidth) || 200;
+        const minH = parseInt(this.minHeight) || 100;
+        if (newWidth < minW) {
+            if (this.resizeHandle.includes('w')) {
+                diffX = this.resizeStartWidth - minW;
+            }
+            newWidth = minW;
+        }
+        if (newHeight < minH) {
+            if (this.resizeHandle.includes('n')) {
+                diffY = this.resizeStartHeight - minH;
+            }
+            newHeight = minH;
+        }
+        this.currentWidth = `${newWidth}px`;
+        this.currentHeight = `${newHeight}px`;
+        if (this.resizeHandle.includes('w') || this.resizeHandle.includes('n')) {
+            this.dragPosition = {
+                x: this.dragPosition.x + diffX,
+                y: this.dragPosition.y + diffY
+            };
+        }
+        this.panelResize.emit({ panelId: this.panelId, width: newWidth, height: newHeight });
+    };
+    handleResizeEnd = () => {
+        if (!this.isResizing)
+            return;
+        this.isResizing = false;
+        const rect = this.element.getBoundingClientRect();
+        this.panelResizeEnd.emit({ panelId: this.panelId, width: rect.width, height: rect.height });
+        this.saveState();
+        document.removeEventListener('mousemove', this.handleResizeMove);
+        document.removeEventListener('mouseup', this.handleResizeEnd);
+    };
+    handleClose = (e) => {
+        e.stopPropagation();
+        this.panelClose.emit({ panelId: this.panelId });
+    };
+    showActionList = false;
+    handleSettings = (e) => {
+        e.stopPropagation();
+        this.showActionList = !this.showActionList;
+        this.panelSettings.emit({ panelId: this.panelId });
+        if (this.showActionList) {
+            document.addEventListener('click', this.closeActionList);
+        }
+        else {
+            document.removeEventListener('click', this.closeActionList);
+        }
+    };
+    closeActionList = (e) => {
+        const isClickInside = this.element.shadowRoot?.querySelector('.panel-settings-wrapper')?.contains(e.target) || this.element.contains(e.target);
+        if (!isClickInside) {
+            this.showActionList = false;
+            document.removeEventListener('click', this.closeActionList);
+        }
+    };
+    handleSearchInput = (e) => {
+        this.searchQuery = e.detail;
+        this.panelSearch.emit({ query: this.searchQuery });
+    };
+    handleToggle = () => {
+        if (this.toggleable) {
+            this.collapsed = !this.collapsed;
+            this.toggle.emit({ collapsed: this.collapsed });
+            this.saveState();
+        }
+    };
+    handlePinToggle = (e) => {
+        e.stopPropagation();
+        this.pinned = !this.pinned;
+        this.saveState();
+    };
+    render() {
+        const panelStyle = {
+            width: this.maximized ? '100vw' : this.currentWidth,
+            height: this.collapsed || this.minimized ? 'auto' : (this.maximized ? '100vh' : this.currentHeight),
+            maxWidth: this.maximized ? 'none' : this.maxWidth,
+            maxHeight: this.maximized ? 'none' : this.maxHeight,
+            '--animation-duration': this.animationDuration,
+            transform: this.isDraggable ? `translate(${this.dragPosition.x}px, ${this.dragPosition.y}px)` + (this.dragPhysics && this.isDragging ? ` rotateY(${this.dragTilt}deg) rotateZ(${this.dragTilt * 0.1}deg)` : '') : '',
+            transition: this.isDragging && !this.snapToGrid ? 'transform 0.1s ease-out' : 'transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.3s ease, height 0.3s ease',
+            position: this.position ? 'fixed' : (this.x || this.y ? 'fixed' : (this.isDraggable || this.maximized ? 'fixed' : 'relative')),
+            top: this.maximized ? '0' : (this.y ? this.y : (this.position ? '' : 'auto')),
+            left: this.maximized ? '0' : (this.x ? this.x : (this.position ? '' : 'auto')),
+            right: this.position || this.x ? '' : 'auto',
+            bottom: this.position || this.y ? '' : 'auto',
+            zIndex: this.pinned || this.modal ? '1000' : (this.isActive || this.isDraggable ? '101' : (this.isDraggable ? '100' : 'auto')),
+            margin: '0',
+            '--panel-bg': this.backgroundColor || 'white',
+            'background-color': 'var(--panel-bg, #ffffff)'
+        };
+        const containerClasses = {
+            'panel-container': true,
+            'panel-active': this.isActive,
+            [`panel-${this.variant}`]: true,
+            [`panel-theme-${this.theme}`]: true,
+            [`panel-animation-${this.animationType}`]: true,
+            'panel-collapsed': this.collapsed,
+            'panel-minimized': this.minimized,
+            'panel-maximized': this.maximized,
+            'panel-loading': this.loading,
+            'panel-draggable': this.isDraggable,
+            'panel-dragging': this.isDragging,
+            'panel-resizable': this.resizable,
+            'panel-resizing': this.isResizing,
+            'panel-pinned': this.pinned,
+            'panel-modal': this.modal,
+            'panel-glass': this.glass,
+            'panel-aura': this.aura,
+            'panel-with-search': this.enableSearch,
+            [`panel-elevation-${this.elevation}`]: true,
+            [`panel-position-${this.position}`]: !!this.position,
+        };
+        const contentStyle = {
+            overflow: this.overflow,
+        };
+        // Overlay click handler
+        const handleOverlayClick = (e) => {
+            if (this.modal && this.dismissible) {
+                e.stopPropagation();
+                this.handleClose(e);
+            }
+        };
+        return (h("div", { key: '843a2cdb343598710c2e3cf1d04994e362a0f33b', class: containerClasses, style: panelStyle, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, tabindex: this.keyboardNav ? 0 : -1, role: "region", "aria-label": this.panelTitle || 'Panel', "aria-expanded": !this.collapsed && !this.minimized }, this.modal && h("div", { key: '96a9377520a2998e820d02159da6bdaba2838dc9', class: "panel-backdrop", onClick: handleOverlayClick }), h("div", { key: '92adc3528c404b4d4338a4c2960463a48abeb282', class: "panel-header", onClick: this.toggleable ? this.handleToggle : undefined, onMouseDown: this.isDraggable ? this.handleDragStart : undefined, style: { cursor: this.isDraggable ? 'move' : (this.toggleable ? 'pointer' : 'default') } }, h("div", { key: 'b8baae2f2f4c4ae873c0a6f332d87dda76e4e3cd', class: "panel-title-wrapper" }, h("div", { key: 'cf6ca464d5fefea869a43388126fdef0b3bf71a2', class: "panel-title" }, this.icon && h("span", { key: 'a8c6607d8e1d0347440830458b1aaa13fef70966', class: "panel-header-icon-inline" }, this.icon), this.panelTitle && h("h3", { key: '2b99cbe49e2391639e619afa8ab2701def0deee3', class: "panel-title-text" }, this.panelTitle), h("slot", { key: '62cdfbaff1db11a4005c8b5ac2b92627edd07ebf', name: "header-icon" }), this.badge && (h("span", { key: '1b90d8c207d75555523ac1bfd74a13cae26b41de', class: `panel-badge panel-badge-${this.badgeVariant}` }, this.badgeVariant === 'dot' ? '' : this.badge))), this.panelSubtitle && h("div", { key: '6b56cd614017acc97e28327cfea0d5b4e4a83ef7', class: "panel-subtitle" }, this.panelSubtitle), h("slot", { key: '96e631d10bd2d3c35bca1183cc72a0c185fe0d05', name: "header" })), this.enableSearch && (h("div", { key: '1f2533ac720e317df6e0bf170bc16eb1eda5e764', class: "panel-search-container", onClick: (e) => e.stopPropagation() }, h("div", { key: '77afd05fef848e31b845692fe02d516987a4e963', class: "search-inner" }, h("ui-icon", { key: '844401caaf4fcfcb744f806ec9badd3e4d3a6ff2', name: "search", library: "lucide", class: "search-icon", size: "1.2em" }), h("ui-input", { key: 'ab85da17a38ac78c81d5bb776aca1f2dcb2f15c4', type: "text", placeholder: this.searchPlaceholder, onInputChange: this.handleSearchInput, value: this.searchQuery, size: "sm", fullWidth: true }), this.searchQuery && (h("ui-button", { key: 'b2c298aba23825796122bf235816c2eb3b36d9a4', variant: "ghost", class: "search-clear", onClick: () => { this.searchQuery = ''; this.panelSearch.emit({ query: '' }); }, ariaLabel: "Clear search", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "xxs" }))))), h("div", { key: '3c1bbc4de3923fab63d3d213a420ea20b9fc76f2', class: "panel-actions" }, h("slot", { key: '4df5712a389b6b8f5a5fb819d7e2ebee0228dd42', name: "header-actions" }), h("ui-button", { key: '9da9f9d850fd944fa71e53ea305f3b9cd079a064', variant: "ghost", class: `panel-pin-btn ${this.pinned ? 'active' : ''}`, onClick: this.handlePinToggle, ariaLabel: this.pinned ? "Unpin" : "Pin", icon: "pin", iconLibrary: "lucide", iconOnly: true, size: "sm", title: this.pinned ? "Unpin" : "Pin" }), this.minimizable && !this.maximized && (h("ui-button", { key: 'bb57989ff64f7e40cac99c20ab80b7ba3b5571ae', variant: "ghost", onClick: this.handleMinimize, ariaLabel: "Minimize panel", icon: "minus", iconLibrary: "lucide", iconOnly: true, size: "sm", title: "Minimize" })), this.maximizable && !this.minimized && (h("ui-button", { key: 'a8c74703bf14e4542825bbeb3d439288bf0ae6ca', variant: "ghost", onClick: this.handleMaximize, ariaLabel: this.maximized ? "Restore" : "Maximize", icon: this.maximized ? "copy" : "square", iconLibrary: "lucide", iconOnly: true, size: "sm", title: this.maximized ? "Restore" : "Maximize" })), this.showSettings && (h("div", { key: 'cabe3fd3cbd49f8501f60c63fa308844bd33ab85', class: "panel-settings-wrapper", style: { position: 'relative' } }, h("ui-button", { key: '84ce872e7528dee72cfa2b574acf999a94b3cf03', variant: "ghost", onClick: this.handleSettings, ariaLabel: "Panel settings", icon: "settings", iconLibrary: "lucide", iconOnly: true, size: "sm", title: "Settings" }), this.showActionList && (h("div", { key: '4992efa9846d614f721bc06c7744694d0019f201', class: "panel-action-list-popup" }, h("slot", { key: '2e13a0eb84b6bc48c02136e730915bd7b35ea432', name: "action-list" }))))), this.toggleable && (h("ui-button", { key: '7b74e90b36016a2c2410bf59296d1c8b6ccb48f7', variant: "ghost", class: `panel-action-btn panel-toggle-btn ${this.collapsed ? 'collapsed' : ''}`, onClick: (e) => { e.stopPropagation(); this.handleToggle(); }, ariaLabel: this.collapsed ? "Expand" : "Collapse", icon: "chevron-up", iconLibrary: "lucide", iconOnly: true, size: "sm" })), this.showClose && (h("ui-button", { key: '7a84ee96567a763bbf68cc187807439a3ef70b1b', variant: "ghost", onClick: this.handleClose, ariaLabel: "Close panel", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm", title: "Close" })))), !this.minimized && (h("div", { key: 'd15ea87f83ad63ffea4edf8017b23c5795a3b848', class: "panel-body-wrapper" }, this.loading && (h("div", { key: 'd6e3f9c0c43950d232643a19bfb2907c138e1afd', class: "panel-loading-overlay" }, h("div", { key: '08a48431ac6bb39b3c27444b18ea2f5cd29d55c0', class: "panel-spinner" }))), h("div", { key: 'c81065f34b525c67e082deffc9a41177c7b654d7', class: `panel-content ${this.noPadding ? 'no-padding' : ''}`, style: contentStyle }, h("slot", { key: '5aacbe8e43c160570596ac2aff83d00098b438c0', name: "content" }), h("slot", { key: '4caeef2dd57a822dc98c5fb1ec6fca10b3a62796' })), h("div", { key: '14d8117a5004c0522a0108a3879612cec4158344', class: "panel-footer" }, h("slot", { key: 'ca2f91902d37806ad5f4e4a5eebc67bc9fb5043a', name: "footer" })))), this.resizable && !this.maximized && !this.minimized && (h("div", { key: '4b22c21852d6f3cfc46c64d205db8d3276aabbbe', class: "panel-resize-handles" }, h("div", { key: '3bcf0a8f5418adbe5e871d872c4355e6aa03f384', class: "resize-handle resize-n", onMouseDown: (e) => this.handleResizeStart(e, 'n') }), h("div", { key: '377eb4f44c1d2a2991b2cf92dd57ec5eb120b040', class: "resize-handle resize-s", onMouseDown: (e) => this.handleResizeStart(e, 's') }), h("div", { key: '0bd73e6d97af791249f6876b013f5a162822477e', class: "resize-handle resize-e", onMouseDown: (e) => this.handleResizeStart(e, 'e') }), h("div", { key: '6f44b5ad062e97258b2bb29de30587e647bbde44', class: "resize-handle resize-w", onMouseDown: (e) => this.handleResizeStart(e, 'w') }), h("div", { key: '10dd0e6a1dc7a2c813090176b48b64882d26f694', class: "resize-handle resize-ne", onMouseDown: (e) => this.handleResizeStart(e, 'ne') }), h("div", { key: 'b3bcb6031895a3e13da4466092a238c4dd78b0cd', class: "resize-handle resize-nw", onMouseDown: (e) => this.handleResizeStart(e, 'nw') }), h("div", { key: '8a194a9b536b1d562a549945fd9de12e28c8c70d', class: "resize-handle resize-se", onMouseDown: (e) => this.handleResizeStart(e, 'se') }), h("div", { key: '4ad815d53e99dd50929204ea6e7b40e73191a161', class: "resize-handle resize-sw", onMouseDown: (e) => this.handleResizeStart(e, 'sw') })))));
+    }
+    static get is() { return "ui-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["panel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "panelId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique identifier for the panel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "panel-id",
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'100%'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'auto'"
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width of the panel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "'none'"
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum height of the panel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-height",
+                "defaultValue": "'none'"
+            },
+            "showClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show close button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-close",
+                "defaultValue": "true"
+            },
+            "showSettings": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show settings button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-settings",
+                "defaultValue": "true"
+            },
+            "panelTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel title text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "panel-title",
+                "defaultValue": "''"
+            },
+            "panelSubtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel subtitle text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "panel-subtitle",
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PanelVariant",
+                    "resolved": "\"default\" | \"elevated\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"outlined\"",
+                    "references": {
+                        "PanelVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/panel/types.ts::PanelVariant",
+                            "referenceLocation": "PanelVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'elevated'"
+            },
+            "toggleable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel is toggleable (collapsible)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggleable",
+                "defaultValue": "false"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel is currently collapsed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collapsed",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel is in loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "noPadding": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Remove processing on content padding"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-padding",
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PanelTheme",
+                    "resolved": "\"danger\" | \"default\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "PanelTheme": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/panel/types.ts::PanelTheme",
+                            "referenceLocation": "PanelTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color theme for the panel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'default'"
+            },
+            "animationDuration": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation duration for collapse/expand"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation-duration",
+                "defaultValue": "'300ms'"
+            },
+            "animationType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PanelAnimation",
+                    "resolved": "\"fade\" | \"none\" | \"slide\"",
+                    "references": {
+                        "PanelAnimation": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/panel/types.ts::PanelAnimation",
+                            "referenceLocation": "PanelAnimation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation type for collapse/expand"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation-type",
+                "defaultValue": "'slide'"
+            },
+            "badge": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge content (number or text)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge",
+                "defaultValue": "''"
+            },
+            "badgeVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dot' | 'count' | 'text'",
+                    "resolved": "\"count\" | \"dot\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge variant style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-variant",
+                "defaultValue": "'count'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel icon to show in header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "keyboardNav": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable keyboard navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keyboard-nav",
+                "defaultValue": "true"
+            },
+            "aura": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dynamic flowing glow effect (Aura)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aura",
+                "defaultValue": "false"
+            },
+            "enableSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Integrated search bar in header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-search",
+                "defaultValue": "false"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-placeholder",
+                "defaultValue": "'Search content...'"
+            },
+            "elevation": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Elevation level (0-5) for shadow depth"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "elevation",
+                "defaultValue": "2"
+            },
+            "minimizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimizable panel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minimizable",
+                "defaultValue": "false"
+            },
+            "maximizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximizable panel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maximizable",
+                "defaultValue": "false"
+            },
+            "minimized": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimized state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "minimized",
+                "defaultValue": "false"
+            },
+            "maximized": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximized state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "maximized",
+                "defaultValue": "false"
+            },
+            "isDraggable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Draggable panel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-draggable",
+                "defaultValue": "false"
+            },
+            "bounds": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'viewport' | 'none'",
+                    "resolved": "\"none\" | \"viewport\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Limit dragging within the viewport"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bounds",
+                "defaultValue": "'none'"
+            },
+            "edgeSnapping": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Snap to window edges when dragging close to them"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "edge-snapping",
+                "defaultValue": "false"
+            },
+            "snapThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Snap distance in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "snap-threshold",
+                "defaultValue": "20"
+            },
+            "snapToGrid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Snap to a grid while dragging"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "snap-to-grid",
+                "defaultValue": "false"
+            },
+            "gridSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the grid for snapping"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "grid-size",
+                "defaultValue": "20"
+            },
+            "dragPhysics": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Apply 3D tilt physics during drag"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drag-physics",
+                "defaultValue": "false"
+            },
+            "resizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resizable panel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resizable",
+                "defaultValue": "false"
+            },
+            "minWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum width when resizing"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-width",
+                "defaultValue": "'200px'"
+            },
+            "minHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum height when resizing"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-height",
+                "defaultValue": "'100px'"
+            },
+            "pinned": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pinned panel (stays on top)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "pinned",
+                "defaultValue": "false"
+            },
+            "persistenceId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Key to persist the panel's open state and size in localStorage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persistence-id"
+            },
+            "overflow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'scroll' | 'hidden' | 'visible'",
+                    "resolved": "\"auto\" | \"hidden\" | \"scroll\" | \"visible\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overflow behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overflow",
+                "defaultValue": "'auto'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'center' | FourSidePosition|FourCornerPosition",
+                    "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"center\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        },
+                        "FourCornerPosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourCornerPosition",
+                            "referenceLocation": "FourCornerPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the panel (docking)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position"
+            },
+            "x": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Horizontal position (e.g., '100px', '20%'). Used if position is not set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "x"
+            },
+            "y": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical position (e.g., '100px', '20%'). Used if position is not set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "y"
+            },
+            "modal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show backdrop behind the panel (modal mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modal",
+                "defaultValue": "false"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close panel when clicking on backdrop"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "false"
+            },
+            "glass": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Glassmorphism effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "glass",
+                "defaultValue": "false"
+            },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color of the panel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background-color",
+                "defaultValue": "'white'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDragging": {},
+            "isResizing": {},
+            "currentWidth": {},
+            "currentHeight": {},
+            "isActive": {},
+            "searchQuery": {},
+            "dragPosition": {},
+            "dragTilt": {},
+            "showActionList": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "panelClose",
+                "name": "panelClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PanelCloseEvent",
+                    "resolved": "PanelCloseEvent",
+                    "references": {
+                        "PanelCloseEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/panel/types.ts::PanelCloseEvent",
+                            "referenceLocation": "PanelCloseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "panelSettings",
+                "name": "panelSettings",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PanelSettingsEvent",
+                    "resolved": "PanelSettingsEvent",
+                    "references": {
+                        "PanelSettingsEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/panel/types.ts::PanelSettingsEvent",
+                            "referenceLocation": "PanelSettingsEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "toggle",
+                "name": "toggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ collapsed: boolean }",
+                    "resolved": "{ collapsed: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelMinimize",
+                "name": "panelMinimize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string }",
+                    "resolved": "{ panelId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelMaximize",
+                "name": "panelMaximize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string }",
+                    "resolved": "{ panelId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelRestore",
+                "name": "panelRestore",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string }",
+                    "resolved": "{ panelId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelDragStart",
+                "name": "panelDragStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string; x: number; y: number }",
+                    "resolved": "{ panelId: string; x: number; y: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelDrag",
+                "name": "panelDrag",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string; x: number; y: number }",
+                    "resolved": "{ panelId: string; x: number; y: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelDragEnd",
+                "name": "panelDragEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string; x: number; y: number }",
+                    "resolved": "{ panelId: string; x: number; y: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelResizeStart",
+                "name": "panelResizeStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string; width: number; height: number }",
+                    "resolved": "{ panelId: string; width: number; height: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelResize",
+                "name": "panelResize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string; width: number; height: number }",
+                    "resolved": "{ panelId: string; width: number; height: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelResizeEnd",
+                "name": "panelResizeEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string; width: number; height: number }",
+                    "resolved": "{ panelId: string; width: number; height: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelSearch",
+                "name": "panelSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ query: string }",
+                    "resolved": "{ query: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
+}