@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/framework/dashboard.js

@@ -0,0 +1,1084 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * @file Dashboard 父组件 / Dashboard parent component
+ * @description 拖拽式仪表盘父组件，基于 CSS Grid 格子布局管理面板定位与尺寸。
+ *              支持面板拖拽换位、调整大小、显隐控制、锁定、状态持久化、自动重排。
+ *              Drag-and-drop dashboard parent component using CSS Grid for panel positioning and sizing.
+ *              Supports panel drag-swap, resize, visibility control, locking, state persistence, auto-rearrange.
+ */
+import { css, html, nothing, unsafeCSS } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { aitheThemeText } from '../../styles/theme';
+import './dashboard-panel';
+/** Storage key prefix for dashboard state. 仪表盘状态存储键前缀。 */
+const STORAGE_KEY_PREFIX = 'aithe-dashboard-';
+/** Default grid configuration constants. 默认网格配置常量。 */
+const DEFAULT_COLUMNS = 12;
+const DEFAULT_CELL_HEIGHT = 60;
+const DEFAULT_GAP = 10;
+/** Minimum panel size in grid units. 面板最小格子单位尺寸。 */
+const MIN_PANEL_W = 1;
+const MIN_PANEL_H = 1;
+/**
+ * Drag-and-drop dashboard parent component. Uses CSS Grid for panel positioning.
+ * Manages all child panel layout, visibility, drag-swap, resize, auto-rearrange, and state persistence.
+ * The grid auto-fills the container width — cellWidth is computed from container width / columns.
+ *
+ * 拖拽式仪表盘父组件。使用 CSS Grid 管理面板定位，统一管理子面板布局、显隐、拖拽换位、
+ * 调整大小、自动重排和状态持久化。网格自动填充容器宽度——cellWidth 由容器宽度/列数计算。
+ *
+ * @slot - Default slot for dashboard-panel children. 默认插槽，放置 dashboard-panel 子组件。
+ * @slot toolbar - Slot for custom toolbar buttons (inserted at the left side of the toolbar). 工具栏插槽，用于插入自定义按钮（位于工具栏左侧）。
+ *
+ * @csspart toolbar - The header toolbar bar. 头部工具栏。
+ * @csspart grid - The CSS Grid container. CSS Grid 容器。
+ *
+ * @fires aithe-dashboard-change - Emitted when panel layout changes with `{ panels }`. 面板布局变更时发出。
+ * @fires aithe-dashboard-fullscreen - Emitted when fullscreen mode toggles with `{ fullscreen }`. 全屏模式切换时发出。
+ *
+ * @example
+ * ```html
+ * <aithe-dashboard columns="12" cell-height="60" gap="10">
+ *   <aithe-dashboard-panel panel-id="stats" x="0" y="0" w="6" h="4" label="Statistics" icon="barChart">
+ *     <p>Stats content</p>
+ *   </aithe-dashboard-panel>
+ * </aithe-dashboard>
+ * ```
+ */
+let AitheDashboard = class AitheDashboard extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Total number of grid columns. 网格总列数。 */
+        this.columns = DEFAULT_COLUMNS;
+        /** Base cell height in pixels. 格子基础高度（像素）。 */
+        this.cellHeight = DEFAULT_CELL_HEIGHT;
+        /** Gap between grid cells in pixels. 格子间距（像素）。 */
+        this.gap = DEFAULT_GAP;
+        /** Whether the dashboard is locked (disables all drag and resize). 仪表盘是否锁定（禁用所有拖拽和调整大小）。 */
+        this.locked = false;
+        /** Storage key for persisting panel state. If empty, persistence is disabled. 状态持久化存储键，为空则禁用持久化。 */
+        this.storageKey = '';
+        /** Whether to show the built-in toolbar header. 是否显示内置工具栏头部。 */
+        this.showToolbar = true;
+        /** Whether to show the visibility dropdown button. 是否显示可见性下拉按钮。 */
+        this.showVisibility = true;
+        /** Whether to show the lock toggle button. 是否显示锁定切换按钮。 */
+        this.showLock = true;
+        /** Whether to show the reset button. 是否显示重置按钮。 */
+        this.showReset = true;
+        /** Whether to show the fullscreen toggle button. 是否显示全屏切换按钮。 */
+        this.showFullscreen = true;
+        /** Whether to show the theme picker button. 是否显示主题选择按钮。 */
+        this.showTheme = true;
+        /** Whether to show the auto-arrange button. 是否显示自动重排按钮。 */
+        this.showAutoArrange = true;
+        /** Whether to show the toggle content button. 是否显示内容切换按钮。 */
+        this.showToggleContent = true;
+        this.panelStates = new Map();
+        this.visibilityDropdownOpen = false;
+        this.fullscreen = false;
+        /** Whether the grid content area is visible. 网格内容区域是否可见。 */
+        this.showContent = true;
+        /** Internal theme for scoping theme changes to the dashboard only. 仅作用于仪表盘内部的本地主题。 */
+        this.dashboardTheme = '';
+        /** Computed cell width derived from container width / columns. 由容器宽度/列数计算的格子宽度。 */
+        this.computedCellWidth = 80;
+        /** Initial panel states from DOM attributes, used for reset. 从 DOM 属性读取的初始面板状态，用于重置。 */
+        this.initialPanelStates = new Map();
+        this.dragTargetId = '';
+        this.dragStartGridX = 0;
+        this.dragStartGridY = 0;
+        this.resizeTargetId = '';
+        this.resizeEdge = '';
+        this.resizeStartW = 0;
+        this.resizeStartH = 0;
+        this.resizeStartX = 0;
+        this.resizeStartY = 0;
+        this.resizeObserver = null;
+        this.handleSlotChange = () => {
+            this.syncPanelsFromDOM();
+        };
+        this.handlePanelClose = (event) => {
+            const customEvent = event;
+            const { panelId } = customEvent.detail;
+            this.updatePanelState(panelId, { visible: false });
+            this.emit('aithe-dashboard-change', { panels: this.getPanelStatesArray() });
+        };
+        this.handlePanelDragStart = (event) => {
+            if (this.locked)
+                return;
+            const customEvent = event;
+            this.dragTargetId = customEvent.detail.panelId;
+            const state = this.panelStates.get(this.dragTargetId);
+            if (state) {
+                this.dragStartGridX = state.x;
+                this.dragStartGridY = state.y;
+            }
+        };
+        this.handlePanelDrag = (event) => {
+            if (!this.dragTargetId || this.locked)
+                return;
+            const customEvent = event;
+            const { deltaX, deltaY } = customEvent.detail;
+            const state = this.panelStates.get(this.dragTargetId);
+            if (!state)
+                return;
+            const stepX = this.computedCellWidth + this.gap;
+            const stepY = this.cellHeight + this.gap;
+            const gridDeltaX = Math.round(deltaX / stepX);
+            const gridDeltaY = Math.round(deltaY / stepY);
+            const newX = this.clampX(this.dragStartGridX + gridDeltaX, state.w);
+            const newY = Math.max(0, this.dragStartGridY + gridDeltaY);
+            if (newX !== state.x || newY !== state.y) {
+                this.movePanelWithAutoRearrange(this.dragTargetId, newX, newY);
+            }
+        };
+        this.handlePanelDragEnd = () => {
+            this.dragTargetId = '';
+        };
+        this.handlePanelMaximize = (event) => {
+            const customEvent = event;
+            const { panelId } = customEvent.detail;
+            const state = this.panelStates.get(panelId);
+            if (!state)
+                return;
+            const newMaximized = !state.maximized;
+            this.updatePanelState(panelId, { maximized: newMaximized });
+        };
+        /** Handle panel resize start event. 处理面板调整大小开始事件。 */
+        this.handlePanelResizeStart = (event) => {
+            if (this.locked)
+                return;
+            const customEvent = event;
+            this.resizeTargetId = customEvent.detail.panelId;
+            this.resizeEdge = customEvent.detail.edge;
+            const state = this.panelStates.get(this.resizeTargetId);
+            if (state) {
+                this.resizeStartW = state.w;
+                this.resizeStartH = state.h;
+                this.resizeStartX = state.x;
+                this.resizeStartY = state.y;
+            }
+        };
+        /** Handle panel resize move event. Auto-rearranges overlapping panels like drag. 处理面板调整大小移动事件。与拖拽一样自动重排重叠面板。 */
+        this.handlePanelResize = (event) => {
+            if (!this.resizeTargetId || this.locked)
+                return;
+            const customEvent = event;
+            const { deltaX, deltaY } = customEvent.detail;
+            const state = this.panelStates.get(this.resizeTargetId);
+            if (!state)
+                return;
+            const stepX = this.computedCellWidth + this.gap;
+            const stepY = this.cellHeight + this.gap;
+            let newW = this.resizeStartW;
+            let newH = this.resizeStartH;
+            let newX = this.resizeStartX;
+            let newY = this.resizeStartY;
+            const edge = this.resizeEdge;
+            if (edge.includes('e')) {
+                newW = Math.max(MIN_PANEL_W, this.resizeStartW + Math.round(deltaX / stepX));
+            }
+            if (edge.includes('w')) {
+                const dw = Math.round(deltaX / stepX);
+                const proposedW = this.resizeStartW - dw;
+                if (proposedW >= MIN_PANEL_W) {
+                    newW = proposedW;
+                    newX = this.resizeStartX + dw;
+                }
+            }
+            if (edge.includes('s')) {
+                newH = Math.max(MIN_PANEL_H, this.resizeStartH + Math.round(deltaY / stepY));
+            }
+            if (edge.includes('n')) {
+                const dh = Math.round(deltaY / stepY);
+                const proposedH = this.resizeStartH - dh;
+                if (proposedH >= MIN_PANEL_H) {
+                    newH = proposedH;
+                    newY = this.resizeStartY + dh;
+                }
+            }
+            newX = this.clampX(newX, newW);
+            newW = Math.min(newW, this.columns - newX);
+            if (newW !== state.w || newH !== state.h || newX !== state.x || newY !== state.y) {
+                this.resizePanelWithAutoRearrange(this.resizeTargetId, newX, newY, newW, newH);
+            }
+        };
+        /** Handle panel resize end event. 处理面板调整大小结束事件。 */
+        this.handlePanelResizeEnd = () => {
+            this.resizeTargetId = '';
+            this.resizeEdge = '';
+        };
+        /**
+         * Auto-arrange all visible panels into a compact grid, scanning left-to-right top-to-bottom.
+         * 自动重排所有可见面板为紧凑网格，从左到右、从上到下扫描。
+         */
+        this.autoArrangeAll = () => {
+            const sorted = Array.from(this.panelStates.values())
+                .filter((s) => s.visible)
+                .sort((a, b) => a.y - b.y || a.x - b.x);
+            const arranged = new Map();
+            for (const panel of sorted) {
+                const pos = this.findNextAvailableSlotInMap(panel.w, panel.h, panel.panelId, arranged);
+                arranged.set(panel.panelId, { ...panel, x: pos.x, y: pos.y });
+            }
+            for (const [id, state] of this.panelStates) {
+                if (!state.visible) {
+                    arranged.set(id, { ...state });
+                }
+            }
+            this.panelStates = arranged;
+            this.applyPanelAttributes();
+            this.saveState();
+            this.emit('aithe-dashboard-change', { panels: this.getPanelStatesArray() });
+        };
+        this.toggleLock = () => {
+            this.locked = !this.locked;
+        };
+        this.toggleVisibilityDropdown = () => {
+            this.visibilityDropdownOpen = !this.visibilityDropdownOpen;
+        };
+        this.togglePanelVisibility = (panelId) => {
+            const state = this.panelStates.get(panelId);
+            if (!state)
+                return;
+            this.updatePanelState(panelId, { visible: !state.visible });
+            this.emit('aithe-dashboard-change', { panels: this.getPanelStatesArray() });
+        };
+        /** Reset all panels to their initial DOM-defined positions and sizes. 重置所有面板到初始 DOM 定义的位置和尺寸。 */
+        this.resetToDefault = () => {
+            const map = new Map();
+            for (const [id, state] of this.initialPanelStates) {
+                map.set(id, { ...state });
+            }
+            this.panelStates = map;
+            this.applyPanelAttributes();
+            this.saveState();
+            this.emit('aithe-dashboard-change', { panels: this.getPanelStatesArray() });
+        };
+        /** Toggle dashboard fullscreen mode for big-screen display. 切换仪表盘全屏模式，用于大屏显示。 */
+        this.toggleFullscreen = () => {
+            this.fullscreen = !this.fullscreen;
+            if (this.fullscreen) {
+                this.setAttribute('fullscreen', '');
+            }
+            else {
+                this.removeAttribute('fullscreen');
+            }
+            this.emit('aithe-dashboard-fullscreen', { fullscreen: this.fullscreen });
+        };
+        /** Handle theme change from the theme picker. Scoped to dashboard only — prevents global theme switch and applies data-aithe-theme on the internal wrapper. 处理主题选择器的主题变更。仅作用于仪表盘内部——阻止全局主题切换，并在内部容器上设置 data-aithe-theme。 */
+        this.handleThemeChange = (event) => {
+            event.preventDefault();
+            const customEvent = event;
+            this.dashboardTheme = customEvent.detail.theme;
+        };
+        this.handleDocClick = (event) => {
+            if (!this.visibilityDropdownEl) {
+                this.visibilityDropdownOpen = false;
+                return;
+            }
+            const path = event.composedPath();
+            if (!path.includes(this.visibilityDropdownEl)) {
+                this.visibilityDropdownOpen = false;
+            }
+        };
+    }
+    static { this.styles = [
+        unsafeCSS(aitheThemeText),
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        position: relative;
+        width: 100%;
+      }
+
+      :host([fullscreen]) {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        z-index: 9999;
+        background: var(--aithe-color-surface, #fff);
+      }
+
+      :host([fullscreen]) .dashboard-wrapper {
+        height: 100vh;
+      }
+
+      .dashboard-wrapper {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2, 8px);
+        padding: var(--aithe-space-2, 8px) var(--aithe-space-3, 12px);
+        border-bottom: 1px solid var(--aithe-color-border, #e5e7eb);
+        background: var(--aithe-color-surface, #fff);
+        flex-shrink: 0;
+      }
+
+      .toolbar-slot {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2, 8px);
+        margin-right: auto;
+      }
+
+      .toolbar-group {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2, 8px);
+      }
+
+      .toolbar-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border: 1px solid var(--aithe-color-border, #e5e7eb);
+        border-radius: var(--aithe-radius-md, 6px);
+        background: var(--aithe-color-surface, #fff);
+        color: var(--aithe-color-text, #1a1a1a);
+        cursor: pointer;
+        transition:
+          background 0.15s,
+          border-color 0.15s;
+        white-space: nowrap;
+      }
+
+      .toolbar-btn:hover {
+        border-color: var(--aithe-primary-6, #1677ff);
+        color: var(--aithe-primary-6, #1677ff);
+      }
+
+      .toolbar-btn.active {
+        background: var(--aithe-primary-6, #1677ff);
+        border-color: var(--aithe-primary-6, #1677ff);
+        color: var(--aithe-color-text-on-primary, #fff);
+      }
+
+      .visibility-dropdown {
+        position: relative;
+      }
+
+      .dropdown-menu {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        margin-top: var(--aithe-space-1, 4px);
+        min-width: 200px;
+        padding: var(--aithe-space-2, 8px) 0;
+        border: 1px solid var(--aithe-color-border, #e5e7eb);
+        border-radius: var(--aithe-radius-lg, 12px);
+        background: var(--aithe-color-surface-elevated, #fff);
+        box-shadow: var(--aithe-shadow-3, 0 4px 16px rgba(0, 0, 0, 0.12));
+        z-index: 100;
+      }
+
+      .dropdown-item {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2, 8px);
+        width: 100%;
+        padding: var(--aithe-space-2, 8px) var(--aithe-space-3, 12px);
+        border: none;
+        background: transparent;
+        color: var(--aithe-color-text, #1a1a1a);
+        font-size: var(--aithe-font-size-sm, 14px);
+        text-align: left;
+        cursor: pointer;
+        transition: background 0.15s;
+      }
+
+      .dropdown-item:hover {
+        background: var(--aithe-color-surface-muted, #f3f4f6);
+      }
+
+      .dropdown-item input[type='checkbox'] {
+        accent-color: var(--aithe-primary-6, #1677ff);
+      }
+
+      .grid-container {
+        position: relative;
+        min-height: 200px;
+        flex: 1;
+        background: var(--aithe-color-bg, #f5f5f5);
+        border-radius: var(--aithe-container-radius-lg, 12px);
+        box-sizing: border-box;
+        transition:
+          opacity var(--aithe-duration-slow, 0.3s) var(--aithe-ease-standard, ease),
+          padding-top var(--aithe-duration-slow, 0.3s) var(--aithe-ease-standard, ease),
+          padding-bottom var(--aithe-duration-slow, 0.3s) var(--aithe-ease-standard, ease),
+          min-height var(--aithe-duration-slow, 0.3s) var(--aithe-ease-standard, ease);
+      }
+
+      ::slotted(aithe-dashboard-panel) {
+        position: absolute;
+        transition:
+          left var(--aithe-duration-base, 0.2s) var(--aithe-ease-standard, ease),
+          top var(--aithe-duration-base, 0.2s) var(--aithe-ease-standard, ease),
+          width var(--aithe-duration-base, 0.2s) var(--aithe-ease-standard, ease),
+          height var(--aithe-duration-base, 0.2s) var(--aithe-ease-standard, ease);
+      }
+
+      ::slotted(aithe-dashboard-panel[maximized]) {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        z-index: 20;
+      }
+
+      .grid-container.collapsed {
+        min-height: 0 !important;
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        border: none;
+        opacity: 0;
+        overflow: hidden;
+        flex: 0 0 0;
+        border-radius: 0;
+      }
+
+      @media (max-width: 768px) {
+        .grid-container {
+          position: static !important;
+          min-height: 0 !important;
+        }
+
+        ::slotted(aithe-dashboard-panel) {
+          position: static !important;
+          width: 100% !important;
+          left: auto !important;
+          top: auto !important;
+          height: auto !important;
+          margin-bottom: var(--aithe-space-3, 12px);
+          transition: none !important;
+        }
+
+        ::slotted(aithe-dashboard-panel[maximized]) {
+          position: static !important;
+          width: 100% !important;
+          height: auto !important;
+          z-index: auto;
+        }
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('aithe-panel-close', this.handlePanelClose);
+        this.addEventListener('aithe-panel-drag-start', this.handlePanelDragStart);
+        this.addEventListener('aithe-panel-drag', this.handlePanelDrag);
+        this.addEventListener('aithe-panel-drag-end', this.handlePanelDragEnd);
+        this.addEventListener('aithe-panel-maximize', this.handlePanelMaximize);
+        this.addEventListener('aithe-panel-resize-start', this.handlePanelResizeStart);
+        this.addEventListener('aithe-panel-resize', this.handlePanelResize);
+        this.addEventListener('aithe-panel-resize-end', this.handlePanelResizeEnd);
+        document.addEventListener('click', this.handleDocClick);
+        this.restoreState();
+        this.setupResizeObserver();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('aithe-panel-close', this.handlePanelClose);
+        this.removeEventListener('aithe-panel-drag-start', this.handlePanelDragStart);
+        this.removeEventListener('aithe-panel-drag', this.handlePanelDrag);
+        this.removeEventListener('aithe-panel-drag-end', this.handlePanelDragEnd);
+        this.removeEventListener('aithe-panel-maximize', this.handlePanelMaximize);
+        this.removeEventListener('aithe-panel-resize-start', this.handlePanelResizeStart);
+        this.removeEventListener('aithe-panel-resize', this.handlePanelResize);
+        this.removeEventListener('aithe-panel-resize-end', this.handlePanelResizeEnd);
+        document.removeEventListener('click', this.handleDocClick);
+        this.resizeObserver?.disconnect();
+    }
+    updated(changed) {
+        if (changed.has('columns') || changed.has('cellHeight') || changed.has('gap')) {
+            this.recalcCellWidth();
+            this.applyPanelAttributes();
+        }
+        if (changed.has('locked')) {
+            this.applyPanelAttributes();
+        }
+    }
+    /** Setup ResizeObserver to recalculate cell width when container resizes. 设置 ResizeObserver 以在容器尺寸变化时重新计算格子宽度。 */
+    setupResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => {
+            this.recalcCellWidth();
+            this.applyPanelAttributes();
+        });
+        this.resizeObserver.observe(this);
+    }
+    /** Recalculate cellWidth from container width. 根据容器宽度重新计算格子宽度。 */
+    recalcCellWidth() {
+        const container = this.gridContainer;
+        if (!container)
+            return;
+        const style = globalThis.getComputedStyle(container);
+        const paddingLeft = Number.parseFloat(style.paddingLeft) || 0;
+        const paddingRight = Number.parseFloat(style.paddingRight) || 0;
+        const containerWidth = container.clientWidth - paddingLeft - paddingRight;
+        if (containerWidth > 0 && this.columns > 0) {
+            this.computedCellWidth = Math.max(1, (containerWidth - (this.columns - 1) * this.gap) / this.columns);
+        }
+    }
+    syncPanelsFromDOM() {
+        const panels = this.querySelectorAll('aithe-dashboard-panel');
+        const existingIds = new Set(this.panelStates.keys());
+        const domIds = new Set();
+        for (const panel of panels) {
+            const el = panel;
+            const id = el.getAttribute('panel-id') || '';
+            if (!id)
+                continue;
+            domIds.add(id);
+            const hasExplicitX = el.hasAttribute('x');
+            const hasExplicitY = el.hasAttribute('y');
+            const rawX = Number.parseInt(el.getAttribute('x') || '0', 10);
+            const rawY = Number.parseInt(el.getAttribute('y') || '0', 10);
+            const rawW = Number.parseInt(el.getAttribute('w') || '1', 10);
+            const rawH = Number.parseInt(el.getAttribute('h') || '1', 10);
+            const domState = {
+                panelId: id,
+                label: el.getAttribute('label') || id,
+                x: rawX,
+                y: rawY,
+                w: rawW,
+                h: rawH,
+                visible: el.getAttribute('visible') !== 'false',
+                maximized: false,
+            };
+            if (!this.panelStates.has(id)) {
+                if (!hasExplicitX && !hasExplicitY) {
+                    const pos = this.findNextAvailableSlot(rawW, rawH, id);
+                    domState.x = pos.x;
+                    domState.y = pos.y;
+                }
+                this.panelStates.set(id, { ...domState });
+            }
+            if (!this.initialPanelStates.has(id)) {
+                this.initialPanelStates.set(id, { ...domState });
+            }
+        }
+        for (const id of existingIds) {
+            if (!domIds.has(id)) {
+                this.panelStates.delete(id);
+                this.initialPanelStates.delete(id);
+            }
+        }
+        this.panelStates = new Map(this.panelStates);
+        this.recalcCellWidth();
+        this.applyPanelAttributes();
+    }
+    applyPanelAttributes() {
+        const panels = this.querySelectorAll('aithe-dashboard-panel');
+        for (const panel of panels) {
+            const el = panel;
+            const id = el.getAttribute('panel-id') || '';
+            const state = this.panelStates.get(id);
+            if (!state)
+                continue;
+            if (this.locked) {
+                el.setAttribute('locked', '');
+            }
+            else {
+                el.removeAttribute('locked');
+            }
+            if (state.maximized) {
+                el.setAttribute('maximized', '');
+            }
+            else {
+                el.removeAttribute('maximized');
+            }
+            if (state.visible) {
+                el.removeAttribute('hidden');
+            }
+            else {
+                el.setAttribute('hidden', '');
+            }
+            if (state.maximized) {
+                el.style.position = 'absolute';
+                el.style.top = '0';
+                el.style.left = '0';
+                el.style.width = '100%';
+                el.style.height = '100%';
+                el.style.zIndex = '20';
+            }
+            else {
+                const margin = this.outerMargin;
+                const left = margin + state.x * (this.computedCellWidth + this.gap);
+                const top = margin + state.y * (this.cellHeight + this.gap);
+                const width = state.w * this.computedCellWidth + (state.w - 1) * this.gap;
+                const height = state.h * this.cellHeight + (state.h - 1) * this.gap;
+                el.style.position = 'absolute';
+                el.style.left = `${left}px`;
+                el.style.top = `${top}px`;
+                el.style.width = `${width}px`;
+                el.style.height = `${height}px`;
+                el.style.zIndex = '';
+            }
+        }
+        this.updateGridHeight();
+    }
+    updateGridHeight() {
+        if (!this.showContent) {
+            if (this.gridContainer) {
+                this.gridContainer.style.height = '0';
+                this.gridContainer.style.minHeight = '0';
+            }
+            return;
+        }
+        const margin = this.outerMargin;
+        let maxBottom = 0;
+        for (const state of this.panelStates.values()) {
+            if (!state.visible || state.maximized)
+                continue;
+            const bottom = margin + (state.y + state.h) * this.cellHeight + (state.y + state.h - 1) * this.gap;
+            if (bottom > maxBottom)
+                maxBottom = bottom;
+        }
+        if (this.gridContainer) {
+            const h = Math.max(maxBottom + margin, 200);
+            this.gridContainer.style.height = '';
+            this.gridContainer.style.minHeight = `${h}px`;
+        }
+    }
+    updatePanelState(panelId, partial) {
+        const current = this.panelStates.get(panelId);
+        if (!current)
+            return;
+        const updated = { ...current, ...partial };
+        this.panelStates.set(panelId, updated);
+        this.panelStates = new Map(this.panelStates);
+        this.applyPanelAttributes();
+        this.saveState();
+    }
+    clampX(x, w) {
+        return Math.max(0, Math.min(x, this.columns - w));
+    }
+    /**
+     * Move a panel to new position and auto-rearrange overlapping panels.
+     * When the moving panel overlaps another, push the overlapped panel to the next available position.
+     * 移动面板到新位置并自动重排重叠面板。当移动面板与另一面板重叠时，将被重叠面板推到下一个可用位置。
+     */
+    movePanelWithAutoRearrange(movingId, newX, newY) {
+        const moving = this.panelStates.get(movingId);
+        if (!moving)
+            return;
+        const clampedX = this.clampX(newX, moving.w);
+        const clampedY = Math.max(0, newY);
+        this.panelStates.set(movingId, { ...moving, x: clampedX, y: clampedY });
+        const overlapped = this.findAllOverlapping(clampedX, clampedY, moving.w, moving.h, movingId);
+        for (const overlapId of overlapped) {
+            this.pushPanelDown(overlapId, clampedX, clampedY, moving.w, moving.h);
+        }
+        this.panelStates = new Map(this.panelStates);
+        this.applyPanelAttributes();
+        this.saveState();
+    }
+    /** Find all panels overlapping the given rect. 查找与给定矩形重叠的所有面板。 */
+    findAllOverlapping(x, y, w, h, excludeId) {
+        const result = [];
+        for (const [id, state] of this.panelStates) {
+            if (id === excludeId || !state.visible || state.maximized)
+                continue;
+            const overlapsX = x < state.x + state.w && x + w > state.x;
+            const overlapsY = y < state.y + state.h && y + h > state.y;
+            if (overlapsX && overlapsY) {
+                result.push(id);
+            }
+        }
+        return result;
+    }
+    /**
+     * Push an overlapped panel to the first available position below the moving panel.
+     * 将被重叠的面板推到移动面板下方的第一个可用位置。
+     */
+    pushPanelDown(panelId, moverX, moverY, moverW, moverH) {
+        const state = this.panelStates.get(panelId);
+        if (!state)
+            return;
+        const targetY = moverY + moverH;
+        let foundY = targetY;
+        let testY = targetY;
+        let attempts = 0;
+        const maxAttempts = 100;
+        while (attempts < maxAttempts) {
+            const overlapping = this.findAllOverlapping(state.x, testY, state.w, state.h, panelId);
+            const hasConflict = overlapping.length > 0;
+            if (!hasConflict) {
+                foundY = testY;
+                break;
+            }
+            testY++;
+            attempts++;
+        }
+        this.panelStates.set(panelId, { ...state, x: state.x, y: foundY });
+    }
+    /**
+     * Find the next available grid slot for a panel of given size, scanning left-to-right top-to-bottom.
+     * 为给定尺寸的面板查找下一个可用网格位置，从左到右、从上到下扫描。
+     */
+    findNextAvailableSlot(w, h, excludeId) {
+        const maxY = 100;
+        for (let y = 0; y <= maxY; y++) {
+            for (let x = 0; x <= this.columns - w; x++) {
+                const overlapping = this.findAllOverlapping(x, y, w, h, excludeId);
+                if (overlapping.length === 0) {
+                    return { x, y };
+                }
+            }
+        }
+        return { x: 0, y: maxY };
+    }
+    /** Like findNextAvailableSlot but checks against a provided Map instead of this.panelStates. 与 findNextAvailableSlot 类似，但检查提供的 Map 而非 this.panelStates。 */
+    findNextAvailableSlotInMap(w, h, excludeId, map) {
+        const maxY = 100;
+        for (let y = 0; y <= maxY; y++) {
+            for (let x = 0; x <= this.columns - w; x++) {
+                const overlapping = this.findAllOverlappingInMap(x, y, w, h, excludeId, map);
+                if (overlapping.length === 0) {
+                    return { x, y };
+                }
+            }
+        }
+        return { x: 0, y: maxY };
+    }
+    /** Like findAllOverlapping but checks against a provided Map. 与 findAllOverlapping 类似，但检查提供的 Map。 */
+    findAllOverlappingInMap(x, y, w, h, excludeId, map) {
+        const result = [];
+        for (const [id, state] of map) {
+            if (id === excludeId || !state.visible || state.maximized)
+                continue;
+            const overlapsX = x < state.x + state.w && x + w > state.x;
+            const overlapsY = y < state.y + state.h && y + h > state.y;
+            if (overlapsX && overlapsY) {
+                result.push(id);
+            }
+        }
+        return result;
+    }
+    /**
+     * Resize a panel to new position/size and auto-rearrange overlapping panels.
+     * When the resized panel overlaps another, push the overlapped panel to the next available position.
+     * 调整面板到新位置/尺寸并自动重排重叠面板。当调整后的面板与另一面板重叠时，将被重叠面板推到下一个可用位置。
+     */
+    resizePanelWithAutoRearrange(resizeId, newX, newY, newW, newH) {
+        const resizing = this.panelStates.get(resizeId);
+        if (!resizing)
+            return;
+        const clampedX = this.clampX(newX, newW);
+        const clampedY = Math.max(0, newY);
+        const clampedW = Math.max(MIN_PANEL_W, Math.min(newW, this.columns - clampedX));
+        const clampedH = Math.max(MIN_PANEL_H, newH);
+        this.panelStates.set(resizeId, {
+            ...resizing,
+            x: clampedX,
+            y: clampedY,
+            w: clampedW,
+            h: clampedH,
+        });
+        const overlapped = this.findAllOverlapping(clampedX, clampedY, clampedW, clampedH, resizeId);
+        for (const overlapId of overlapped) {
+            this.pushPanelDown(overlapId, clampedX, clampedY, clampedW, clampedH);
+        }
+        this.panelStates = new Map(this.panelStates);
+        this.applyPanelAttributes();
+        this.saveState();
+    }
+    swapPanels(sourceId, targetId) {
+        const source = this.panelStates.get(sourceId);
+        const target = this.panelStates.get(targetId);
+        if (!source || !target)
+            return;
+        const sourceX = source.x;
+        const sourceY = source.y;
+        this.panelStates.set(sourceId, { ...source, x: target.x, y: target.y });
+        this.panelStates.set(targetId, { ...target, x: sourceX, y: sourceY });
+        this.panelStates = new Map(this.panelStates);
+        this.applyPanelAttributes();
+        this.saveState();
+    }
+    getPanelStatesArray() {
+        return Array.from(this.panelStates.values());
+    }
+    getStorageFullKey() {
+        return this.storageKey ? `${STORAGE_KEY_PREFIX}${this.storageKey}` : '';
+    }
+    saveState() {
+        const key = this.getStorageFullKey();
+        if (!key)
+            return;
+        try {
+            const data = JSON.stringify(this.getPanelStatesArray());
+            globalThis.localStorage?.setItem(key, data);
+        }
+        catch {
+            // Storage unavailable or quota exceeded
+        }
+    }
+    restoreState() {
+        const key = this.getStorageFullKey();
+        if (!key)
+            return;
+        try {
+            const raw = globalThis.localStorage?.getItem(key);
+            if (!raw)
+                return;
+            const arr = JSON.parse(raw);
+            const map = new Map();
+            for (const item of arr) {
+                map.set(item.panelId, item);
+            }
+            this.panelStates = map;
+        }
+        catch {
+            // Storage unavailable or parse error
+        }
+    }
+    /** Render visibility dropdown button. 渲染可见性下拉按钮。 */
+    renderVisibilityBtn(allPanels) {
+        if (!this.showVisibility)
+            return nothing;
+        return html `
+      <div class="visibility-dropdown">
+        <button
+          class="toolbar-btn"
+          type="button"
+          @click=${this.toggleVisibilityDropdown}
+          title="Visibility"
+        >
+          <aithe-icon name="eye" size="14"></aithe-icon>
+        </button>
+        ${this.visibilityDropdownOpen
+            ? html `
+              <div class="dropdown-menu">
+                ${allPanels.map((state) => html `
+                    <label class="dropdown-item">
+                      <input
+                        type="checkbox"
+                        .checked=${state.visible}
+                        @change=${() => this.togglePanelVisibility(state.panelId)}
+                      />
+                      <span>${state.label || state.panelId}</span>
+                    </label>
+                  `)}
+              </div>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+    /** Render reset button. 渲染重置按钮。 */
+    renderResetBtn() {
+        if (!this.showReset)
+            return nothing;
+        return html `
+      <button
+        class="toolbar-btn"
+        type="button"
+        @click=${this.resetToDefault}
+        title="Reset to default"
+      >
+        <aithe-icon name="refresh" size="14"></aithe-icon>
+      </button>
+    `;
+    }
+    /** Render lock toggle button. 渲染锁定切换按钮。 */
+    renderLockBtn() {
+        if (!this.showLock)
+            return nothing;
+        const lockIcon = this.locked ? 'lock' : 'unlock';
+        const lockTitle = this.locked ? 'Unlock' : 'Lock';
+        return html `
+      <button
+        class="toolbar-btn ${this.locked ? 'active' : ''}"
+        type="button"
+        @click=${this.toggleLock}
+        title=${lockTitle}
+      >
+        <aithe-icon name=${lockIcon} size="14"></aithe-icon>
+      </button>
+    `;
+    }
+    /** Render fullscreen toggle button. 渲染全屏切换按钮。 */
+    renderFullscreenBtn() {
+        if (!this.showFullscreen)
+            return nothing;
+        const fsIcon = this.fullscreen ? 'minimize' : 'maximize';
+        const fsTitle = this.fullscreen ? 'Exit fullscreen' : 'Fullscreen';
+        return html `
+      <button
+        class="toolbar-btn ${this.fullscreen ? 'active' : ''}"
+        type="button"
+        @click=${this.toggleFullscreen}
+        title=${fsTitle}
+      >
+        <aithe-icon name=${fsIcon} size="14"></aithe-icon>
+      </button>
+    `;
+    }
+    /** Render theme picker button. 渲染主题选择按钮。 */
+    renderThemeBtn() {
+        if (!this.showTheme)
+            return nothing;
+        return html `
+      <aithe-theme-picker
+        .value=${(this.computedTheme) || 'light'}
+        placement="bottom-end"
+        icon-only
+        @aithe-theme-change=${this.handleThemeChange}
+      ></aithe-theme-picker>
+    `;
+    }
+    /** Render auto-arrange button. 渲染自动重排按钮。 */
+    renderAutoArrangeBtn() {
+        if (!this.showAutoArrange)
+            return nothing;
+        return html `
+      <button
+        class="toolbar-btn"
+        type="button"
+        @click=${this.autoArrangeAll}
+        title="Auto arrange"
+      >
+        <aithe-icon name="autoArrange" size="14"></aithe-icon>
+      </button>
+    `;
+    }
+    /** Render toggle content button. 渲染内容切换按钮。 */
+    renderToggleContentBtn() {
+        if (!this.showToggleContent)
+            return nothing;
+        const icon = this.showContent ? 'chevronUp' : 'chevronDown';
+        const title = this.showContent ? 'Collapse content' : 'Expand content';
+        return html `
+      <button
+        class="toolbar-btn toggle-content-btn"
+        type="button"
+        @click=${() => { this.showContent = !this.showContent; }}
+        title=${title}
+      >
+        <aithe-icon name=${icon} size="14"></aithe-icon>
+      </button>
+    `;
+    }
+    renderToolbar() {
+        if (!this.showToolbar)
+            return nothing;
+        const allPanels = Array.from(this.panelStates.values());
+        return html `
+      <div class="toolbar" part="toolbar">
+        <div class="toolbar-slot">
+          <slot name="toolbar"></slot>
+        </div>
+        <div class="toolbar-group">
+          ${this.renderAutoArrangeBtn()} ${this.renderVisibilityBtn(allPanels)}
+          ${this.renderResetBtn()} ${this.renderLockBtn()} ${this.renderFullscreenBtn()}
+          ${this.renderThemeBtn()}
+        </div>
+        <div class="toolbar-group">
+          ${this.renderToggleContentBtn()}
+        </div>
+      </div>
+    `;
+    }
+    /** Compute outer margin for grid container (gap, minimum 20px). 计算网格容器外边距（gap，最小 20px）。 */
+    get outerMargin() {
+        return Math.max(this.gap, 10);
+    }
+    render() {
+        return html `
+      <div class="dashboard-wrapper" data-aithe-theme=${this.dashboardTheme || this.computedTheme}>
+        ${this.renderToolbar()}
+        <div
+          class="grid-container ${this.showContent ? '' : 'collapsed'}"
+          part="grid"
+          style="padding:${this.outerMargin}px"
+        >
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number, attribute: 'columns' })
+], AitheDashboard.prototype, "columns", void 0);
+__decorate([
+    property({ type: Number, attribute: 'cell-height' })
+], AitheDashboard.prototype, "cellHeight", void 0);
+__decorate([
+    property({ type: Number })
+], AitheDashboard.prototype, "gap", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheDashboard.prototype, "locked", void 0);
+__decorate([
+    property({ type: String, attribute: 'storage-key' })
+], AitheDashboard.prototype, "storageKey", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-toolbar' })
+], AitheDashboard.prototype, "showToolbar", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-visibility' })
+], AitheDashboard.prototype, "showVisibility", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-lock' })
+], AitheDashboard.prototype, "showLock", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-reset' })
+], AitheDashboard.prototype, "showReset", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-fullscreen' })
+], AitheDashboard.prototype, "showFullscreen", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-theme' })
+], AitheDashboard.prototype, "showTheme", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-auto-arrange' })
+], AitheDashboard.prototype, "showAutoArrange", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-toggle-content' })
+], AitheDashboard.prototype, "showToggleContent", void 0);
+__decorate([
+    state()
+], AitheDashboard.prototype, "panelStates", void 0);
+__decorate([
+    state()
+], AitheDashboard.prototype, "visibilityDropdownOpen", void 0);
+__decorate([
+    state()
+], AitheDashboard.prototype, "fullscreen", void 0);
+__decorate([
+    state()
+], AitheDashboard.prototype, "showContent", void 0);
+__decorate([
+    state()
+], AitheDashboard.prototype, "dashboardTheme", void 0);
+__decorate([
+    query('.grid-container')
+], AitheDashboard.prototype, "gridContainer", void 0);
+__decorate([
+    query('.visibility-dropdown')
+], AitheDashboard.prototype, "visibilityDropdownEl", void 0);
+AitheDashboard = __decorate([
+    customElement('aithe-dashboard')
+], AitheDashboard);
+export { AitheDashboard };