atomicuilibrary 0.0.1

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

@@ -0,0 +1,1914 @@
+import { h, Host } from "@stencil/core";
+import { sanitizeHTML } from "../../utils/security";
+import { getTransformedAncestorOffset, calculateUniversalPlacement, correctViewportCoordinates } from "../../utils/dom";
+export class WorkspaceManager {
+    el;
+    /** Initial regions configuration */
+    regions = [];
+    handleRegionsChange() {
+        this.initRegions();
+        this.root = { ...this.root };
+        this.layoutVersion++;
+    }
+    /** Horizontal or vertical split for top-level regions */
+    direction = 'horizontal';
+    /** Persist sizes between reloads */
+    saveState = true;
+    /** LocalStorage key when saveState=true */
+    stateKey = 'layout-manager-state';
+    /** Root container node holding initial regions */
+    root;
+    panelsById = {};
+    popouts = {};
+    maximizedPanel;
+    preMaximizeState;
+    draggingPanel;
+    draggingPopout;
+    layoutVersion = 0; // Increment to force re-render of resizable panels
+    contextMenu;
+    tabActionsMenu;
+    floatingDropdown;
+    openDropdowns = {};
+    openActionsMenu = {};
+    regionsNeedingScroll = {};
+    minimizedRegions = {};
+    dragOverTarget;
+    floatingDropdownTrigger;
+    tabActionsMenuTrigger;
+    layoutChange;
+    panelAdded;
+    panelRemoved;
+    panelMoved;
+    panelPoppedOut;
+    panelDocked;
+    panelMaximized;
+    panelRestored;
+    regionAdded;
+    regionRemoved;
+    /** Get the current layout state */
+    async getLayoutState() {
+        return {
+            root: this.root,
+            panels: this.panelsById,
+        };
+    }
+    /** Clear all regions (reset to empty layout) */
+    async clearAllRegions() {
+        // Close all panels first (this should clear panelsById)
+        await this.closeAllPanels();
+        // Force clear all state
+        this.panelsById = {};
+        this.popouts = {};
+        this.maximizedPanel = undefined;
+        this.draggingPanel = undefined;
+        this.draggingPopout = undefined;
+        this.contextMenu = undefined;
+        this.tabActionsMenu = undefined;
+        this.openDropdowns = {};
+        this.openActionsMenu = {};
+        // Reset root to have no children
+        this.root = {
+            id: '__root__',
+            title: 'Root',
+            direction: this.direction,
+            children: [],
+            panels: [],
+        };
+        this.floatingDropdownTrigger = undefined;
+        this.tabActionsMenuTrigger = undefined;
+        this.emitLayoutChange();
+    }
+    handleScroll() {
+        if (this.floatingDropdown || this.tabActionsMenu) {
+            this.recalculateMenuPositions();
+        }
+    }
+    recalculateMenuPositions() {
+        requestAnimationFrame(() => {
+            if (this.floatingDropdown && this.floatingDropdownTrigger) {
+                const placement = calculateUniversalPlacement(this.floatingDropdownTrigger, {
+                    menuWidth: 200,
+                    menuHeight: 300,
+                    gap: 4,
+                    align: 'end'
+                });
+                this.floatingDropdown = {
+                    ...this.floatingDropdown,
+                    x: placement.left ?? 0,
+                    y: placement.top ?? 0,
+                };
+            }
+            if (this.tabActionsMenu && this.tabActionsMenuTrigger) {
+                const placement = calculateUniversalPlacement(this.tabActionsMenuTrigger, {
+                    menuWidth: 180,
+                    menuHeight: 200,
+                    gap: 4,
+                    align: 'end'
+                });
+                this.tabActionsMenu = {
+                    ...this.tabActionsMenu,
+                    x: placement.left ?? 0,
+                    y: placement.top ?? 0,
+                };
+            }
+        });
+    }
+    componentWillLoad() {
+        if (this.saveState) {
+            this.loadState();
+        }
+        if (!this.root || (this.root.children?.length === 0 && this.root.panels?.length === 0)) {
+            this.initRegions();
+        }
+        document.addEventListener('click', this.handleDocumentClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleDocumentClick);
+    }
+    handleDocumentClick = (e) => {
+        // Close dropdowns if clicking outside
+        const target = e.target;
+        if (!target.closest('.lm-panel-dropdown-wrapper')) {
+            if (Object.values(this.openDropdowns).some(v => v)) {
+                this.openDropdowns = {};
+            }
+        }
+        if (!target.closest('.lm-actions-menu-wrapper')) {
+            if (Object.values(this.openActionsMenu).some(v => v)) {
+                this.openActionsMenu = {};
+            }
+        }
+    };
+    parseRegions() {
+        const parsed = typeof this.regions === 'string' ? JSON.parse(this.regions) : this.regions;
+        return (parsed || []).map((r) => ({
+            id: r.id,
+            title: r.title,
+            size: r.size ?? 25,
+            minSize: r.minSize,
+            maxSize: r.maxSize,
+            collapsible: r.collapsible ?? false,
+        }));
+    }
+    initRegions() {
+        const base = this.parseRegions();
+        const total = base.reduce((sum, r) => sum + (r.size || 0), 0) || 100;
+        const children = base.map(r => ({
+            ...r,
+            size: ((r.size || 100 / base.length) / total) * 100,
+            panels: [],
+            activePanelId: undefined,
+        }));
+        this.root = {
+            id: '__root__',
+            title: 'Root',
+            size: 100,
+            panels: [],
+            children,
+            direction: this.direction,
+        };
+    }
+    /** Add a panel into a region. If element is provided, it will be moved into the panel content. */
+    async addPanel(opts) {
+        const id = opts.id || `panel-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+        const region = this.findRegionNode(opts.regionId)?.node;
+        if (!region)
+            throw new Error(`Region not found: ${opts.regionId}`);
+        // For content-only regions, only allow the first panel and ignore all others
+        if (region.type === 'content-only') {
+            if (region.panels && region.panels.length > 0) {
+                return region.panels[0]; // Return the existing panel ID
+            }
+        }
+        const panel = {
+            id,
+            title: opts.title,
+            regionId: region.id,
+            closable: opts.closable !== false,
+            icon: opts.icon,
+            iconLibrary: opts.iconLibrary,
+            allowPopout: opts.allowPopout !== false,
+            element: opts.element,
+            html: opts.html,
+        };
+        // Force immutable update to trigger re-render
+        this.panelsById = { ...this.panelsById, [id]: panel };
+        region.panels = [...(region.panels || []), id];
+        region.activePanelId = id;
+        // Force root update to trigger re-render
+        this.root = { ...this.root };
+        this.panelAdded.emit(panel);
+        this.emitLayoutChange();
+        return id;
+    }
+    /** Remove a panel by id */
+    async removePanel(panelId) {
+        const panel = this.panelsById[panelId];
+        if (!panel)
+            return;
+        // Prevent removing pinned panels
+        if (panel.pinned) {
+            return;
+        }
+        // If this panel is maximized, restore first
+        if (this.maximizedPanel === panelId) {
+            this.maximizedPanel = undefined;
+            this.preMaximizeState = undefined;
+        }
+        const region = this.findRegionNode(panel.regionId)?.node;
+        if (region) {
+            region.panels = (region.panels || []).filter(id => id !== panelId);
+            if (region.activePanelId === panelId) {
+                region.activePanelId = region.panels[(region.panels || []).length - 1] || undefined;
+            }
+        }
+        const { [panelId]: removed, ...rest } = this.panelsById;
+        this.panelsById = rest;
+        const { [panelId]: removedPop, ...restPop } = this.popouts;
+        this.popouts = restPop;
+        this.root = { ...this.root };
+        this.panelRemoved.emit({ panelId, regionId: region?.id || '' });
+        this.emitLayoutChange();
+    }
+    /** Move a panel to another region */
+    async movePanel(panelId, targetRegionId, index) {
+        const panel = this.panelsById[panelId];
+        if (!panel)
+            throw new Error(`Panel not found: ${panelId}`);
+        const fromRegion = this.findRegionNode(panel.regionId)?.node;
+        const toRegion = this.findRegionNode(targetRegionId)?.node;
+        if (!toRegion)
+            throw new Error(`Target region not found: ${targetRegionId}`);
+        if (fromRegion) {
+            fromRegion.panels = (fromRegion.panels || []).filter(id => id !== panelId);
+            if (fromRegion.activePanelId === panelId) {
+                fromRegion.activePanelId = fromRegion.panels[(fromRegion.panels || []).length - 1] || undefined;
+            }
+        }
+        panel.regionId = toRegion.id;
+        const newPanels = [...(toRegion.panels || [])];
+        if (index === undefined || index < 0 || index > newPanels.length) {
+            newPanels.push(panelId);
+        }
+        else {
+            newPanels.splice(index, 0, panelId);
+        }
+        toRegion.panels = newPanels;
+        toRegion.activePanelId = panelId;
+        this.panelsById = { ...this.panelsById };
+        this.root = { ...this.root };
+        this.panelMoved.emit({ panelId, from: fromRegion?.id || '', to: toRegion.id });
+        this.emitLayoutChange();
+    }
+    /** Popout a panel (make floating). Removes from region but keeps alive in overlay */
+    async popoutPanel(panelId, position) {
+        const panel = this.panelsById[panelId];
+        if (!panel)
+            throw new Error(`Panel not found: ${panelId}`);
+        const region = this.findRegionNode(panel.regionId)?.node;
+        if (region) {
+            region.panels = (region.panels || []).filter(id => id !== panelId);
+            if (region.activePanelId === panelId) {
+                region.activePanelId = region.panels[(region.panels || []).length - 1] || undefined;
+            }
+        }
+        this.popouts = {
+            ...this.popouts,
+            [panelId]: {
+                x: position?.x ?? 100,
+                y: position?.y ?? 100,
+                width: position?.width ?? 400,
+                height: position?.height ?? 300,
+            },
+        };
+        this.root = { ...this.root };
+        this.panelPoppedOut.emit({ panelId });
+        this.emitLayoutChange();
+    }
+    /** Dock a popped-out panel back into a region */
+    async dockPanel(panelId, regionId, index) {
+        if (!this.popouts[panelId])
+            return;
+        const { [panelId]: removed, ...rest } = this.popouts;
+        this.popouts = rest;
+        await this.movePanel(panelId, regionId, index);
+        this.panelDocked.emit({ panelId, regionId });
+    }
+    /** Split a leaf region into two child regions */
+    async splitRegion(regionId, direction = 'horizontal') {
+        const found = this.findRegionNode(regionId);
+        if (!found)
+            throw new Error(`Region not found: ${regionId}`);
+        const { node } = found;
+        if (node.children && node.children.length)
+            return; // already split
+        // Create two child leaf regions and distribute existing panels
+        const r1 = { id: `${regionId}-a`, title: node.title, size: 50, panels: [], activePanelId: undefined };
+        const r2 = { id: `${regionId}-b`, title: node.title, size: 50, panels: [], activePanelId: undefined };
+        // Move current active to first
+        if (node.panels?.length) {
+            r1.panels = [...node.panels];
+            r1.activePanelId = node.activePanelId;
+            node.panels = [];
+            node.activePanelId = undefined;
+        }
+        node.children = [r1, r2];
+        node.direction = direction;
+        this.root = { ...this.root };
+        this.emitLayoutChange();
+    }
+    /** Maximize a panel to fill the entire layout */
+    async maximizePanel(panelId) {
+        if (!this.panelsById[panelId])
+            throw new Error(`Panel not found: ${panelId}`);
+        // Store current layout state before maximizing
+        this.preMaximizeState = {
+            root: JSON.parse(JSON.stringify(this.root)),
+            panelsById: JSON.parse(JSON.stringify(this.panelsById)),
+        };
+        this.maximizedPanel = panelId;
+        this.panelMaximized.emit({ panelId });
+    }
+    /** Restore a maximized panel to normal layout */
+    async restorePanel() {
+        if (!this.maximizedPanel)
+            return;
+        const panelId = this.maximizedPanel;
+        // Restore the pre-maximize state if available
+        if (this.preMaximizeState) {
+            // Validate that the state is still valid
+            if (this.preMaximizeState.root && this.preMaximizeState.panelsById) {
+                this.root = this.preMaximizeState.root;
+                this.panelsById = this.preMaximizeState.panelsById;
+                // Force a complete re-render by creating new object references
+                this.root = { ...this.root };
+                this.panelsById = { ...this.panelsById };
+                // Increment version to force resizable panels to re-initialize
+                this.layoutVersion++;
+            }
+            this.preMaximizeState = undefined;
+        }
+        this.maximizedPanel = undefined;
+        this.panelRestored.emit({ panelId });
+        // Emit layout change to notify consumers
+        this.emitLayoutChange();
+    }
+    /** Close all panels in a specific region */
+    async closeAllPanels(regionId) {
+        if (regionId) {
+            const found = this.findRegionNode(regionId);
+            if (!found || !found.node.panels)
+                return;
+            const panelIds = [...found.node.panels];
+            for (const id of panelIds) {
+                await this.removePanel(id);
+            }
+        }
+        else {
+            // Close all panels in all regions
+            const panelIds = Object.keys(this.panelsById);
+            for (const id of panelIds) {
+                await this.removePanel(id);
+            }
+        }
+    }
+    /** Merge a split region back to a single leaf (left child remains) */
+    async mergeRegion(regionId) {
+        const found = this.findRegionNode(regionId);
+        if (!found)
+            return;
+        const { node } = found;
+        if (!node.children || !node.children.length)
+            return;
+        const left = node.children[0];
+        // Adopt left child's panel state
+        node.panels = [...(left.panels || [])];
+        node.activePanelId = left.activePanelId;
+        node.children = undefined;
+        node.direction = undefined;
+        this.root = { ...this.root };
+        this.emitLayoutChange();
+    }
+    /** Create a new region */
+    async createRegion(config) {
+        // Prevent duplicates anywhere in the tree
+        if (this.findRegionNode(config.id))
+            return;
+        const children = this.root.children || [];
+        const total = children.reduce((s, r) => s + (r.size || 0), 0) || 100;
+        const newSize = config.size ?? 100 / (children.length + 1);
+        const normalizedNewSize = (newSize / (total + newSize)) * 100;
+        // Reduce existing regions proportionally
+        const adjusted = children.map(r => ({
+            ...r,
+            size: (r.size || 0) * (total / (total + newSize)),
+        }));
+        this.root.children = [
+            ...adjusted,
+            {
+                id: config.id,
+                title: config.title,
+                size: normalizedNewSize,
+                minSize: config.minSize,
+                maxSize: config.maxSize,
+                collapsible: config.collapsible ?? false,
+                panels: [],
+                activePanelId: undefined,
+            },
+        ];
+        this.emitLayoutChange();
+    }
+    /** Add a new region to the root layout */
+    async addRegion(opts) {
+        if (!this.root || !this.root.children) {
+            // Initialize root if not yet ready
+            this.root = { id: '__root__', title: 'Root', direction: this.direction, children: [], panels: [] };
+        }
+        const regionId = opts.id || `region-${Date.now()}`;
+        const title = opts.title || `Region ${this.root.children.length + 1}`;
+        const position = opts.position || 'end';
+        const type = opts.type || 'default';
+        // Check if region ID already exists
+        if (this.findRegionNode(regionId)) {
+            throw new Error(`Region with id '${regionId}' already exists`);
+        }
+        // Create new region
+        const newRegion = {
+            id: regionId,
+            title: title,
+            size: opts.size || 100 / (this.root.children.length + 1),
+            panels: [],
+            activePanelId: undefined,
+            type: type,
+        };
+        // Add to children
+        if (position === 'start') {
+            this.root.children = [newRegion, ...this.root.children];
+        }
+        else {
+            this.root.children = [...this.root.children, newRegion];
+        }
+        // Normalize sizes to ensure they sum to 100% (unless skipNormalization is true)
+        if (!opts.skipNormalization) {
+            const total = this.root.children.reduce((sum, r) => sum + (r.size || 0), 0);
+            this.root.children = this.root.children.map(r => ({
+                ...r,
+                size: ((r.size || 0) / total) * 100,
+            }));
+        }
+        this.root = { ...this.root };
+        this.emitLayoutChange();
+        this.regionAdded.emit({ regionId, title });
+        return regionId;
+    }
+    /** Normalize region sizes to sum to 100% */
+    async normalizeRegionSizes() {
+        if (!this.root || !this.root.children)
+            return;
+        const total = this.root.children.reduce((sum, r) => sum + (r.size || 0), 0);
+        if (total === 0)
+            return;
+        this.root.children = this.root.children.map(r => ({
+            ...r,
+            size: ((r.size || 0) / total) * 100,
+        }));
+        this.root = { ...this.root };
+        this.emitLayoutChange();
+    }
+    /** Remove a region (panels will be moved to the nearest region) */
+    async removeRegion(regionId) {
+        const found = this.findRegionNode(regionId);
+        if (!found)
+            return;
+        const { parent } = found;
+        if (!parent || !parent.children)
+            return; // do not remove root
+        const idx = parent.children.findIndex(c => c.id === regionId);
+        const removed = parent.children[idx];
+        const target = parent.children[idx - 1] || parent.children[idx + 1];
+        parent.children = parent.children.filter(c => c.id !== regionId);
+        if (target && removed && removed.panels?.length) {
+            target.panels = [...(target.panels || []), ...removed.panels];
+            target.activePanelId = target.activePanelId || removed.activePanelId || (target.panels || [])[(target.panels || []).length - 1];
+        }
+        // Rebalance sizes
+        const remaining = parent.children;
+        const total = remaining.reduce((s, r) => s + (r.size || 0), 0) || 100;
+        parent.children = remaining.map(r => ({ ...r, size: ((r.size || 0) / total) * 100 }));
+        this.root = { ...this.root };
+        this.emitLayoutChange();
+        this.regionRemoved.emit({ regionId });
+    }
+    onPanelPopout(ev) {
+        this.popoutPanel(ev.detail.panelId);
+    }
+    onPanelSelect(ev) {
+        const region = this.findRegionNode(ev.detail.regionId)?.node;
+        if (region) {
+            region.activePanelId = ev.detail.panelId;
+            this.root = { ...this.root };
+            this.emitLayoutChange();
+        }
+    }
+    emitLayoutChange() {
+        // Emit a flattened list of leaf regions for consumers
+        const regions = [];
+        const walk = (n) => {
+            if (n.children && n.children.length)
+                n.children.forEach(walk);
+            else
+                regions.push(n);
+        };
+        walk(this.root);
+        this.layoutChange.emit({ regions });
+        if (this.saveState) {
+            this.saveStateToStorage();
+        }
+    }
+    saveStateToStorage() {
+        try {
+            const panelsById = Object.fromEntries(Object.entries(this.panelsById).map(([id, panel]) => {
+                const { element, ...serializablePanel } = panel;
+                return [id, serializablePanel];
+            }));
+            const state = {
+                root: this.root,
+                panelsById,
+                minimizedRegions: this.minimizedRegions
+            };
+            localStorage.setItem(this.stateKey, JSON.stringify(state));
+        }
+        catch (e) {
+            console.error('[WorkspaceManager] Failed to save state', e);
+        }
+    }
+    loadState() {
+        try {
+            const saved = localStorage.getItem(this.stateKey);
+            if (saved) {
+                const state = JSON.parse(saved);
+                this.root = state.root;
+                this.panelsById = state.panelsById;
+                this.minimizedRegions = state.minimizedRegions || {};
+            }
+        }
+        catch (e) {
+            console.error('[WorkspaceManager] Failed to load state', e);
+        }
+    }
+    findRegionNode(id) {
+        let res;
+        const dfs = (n, parent) => {
+            if (n.id === id) {
+                res = { node: n, parent };
+                return;
+            }
+            if (n.children)
+                n.children.forEach(child => dfs(child, n));
+        };
+        dfs(this.root);
+        return res;
+    }
+    scrollTabs(regionId, direction) {
+        const tabsEl = document.querySelector(`[data-region-id="${regionId}"] .lm-tabs`);
+        if (!tabsEl)
+            return;
+        const scrollAmount = 200;
+        tabsEl.scrollBy({ left: direction === 'left' ? -scrollAmount : scrollAmount, behavior: 'smooth' });
+    }
+    togglePanelDropdown(regionId, event) {
+        event?.stopPropagation();
+        const isOpen = !this.openDropdowns[regionId];
+        this.openDropdowns = { ...this.openDropdowns, [regionId]: isOpen };
+        if (isOpen && event) {
+            this.floatingDropdownTrigger = event.currentTarget;
+            const placement = calculateUniversalPlacement(this.floatingDropdownTrigger, {
+                menuWidth: 200,
+                menuHeight: 300,
+                gap: 4,
+                align: 'end'
+            });
+            this.floatingDropdown = {
+                x: placement.left ?? 0,
+                y: placement.top ?? 0,
+                regionId,
+                type: 'panel',
+            };
+        }
+        else {
+            this.floatingDropdown = undefined;
+            this.floatingDropdownTrigger = undefined;
+        }
+    }
+    selectPanelFromDropdown(regionId, panelId) {
+        this.selectPanel(regionId, panelId);
+        this.openDropdowns = { ...this.openDropdowns, [regionId]: false };
+        this.floatingDropdown = undefined;
+    }
+    toggleActionsMenu(regionId, event) {
+        event?.stopPropagation();
+        const isOpen = !this.openActionsMenu[regionId];
+        this.openActionsMenu = { ...this.openActionsMenu, [regionId]: isOpen };
+        if (isOpen && event) {
+            this.floatingDropdownTrigger = event.currentTarget;
+            const placement = calculateUniversalPlacement(this.floatingDropdownTrigger, {
+                menuWidth: 200,
+                menuHeight: 300,
+                gap: 4,
+                align: 'end'
+            });
+            this.floatingDropdown = {
+                x: placement.left ?? 0,
+                y: placement.top ?? 0,
+                regionId,
+                type: 'actions',
+            };
+        }
+        else {
+            this.floatingDropdown = undefined;
+            this.floatingDropdownTrigger = undefined;
+        }
+    }
+    minimizeRegion(regionId) {
+        // Don't allow minimize while a panel is maximized
+        if (this.maximizedPanel) {
+            return;
+        }
+        const found = this.findRegionNode(regionId);
+        if (!found) {
+            return;
+        }
+        const region = found.node;
+        const parent = found.parent;
+        // Don't allow minimizing a region that contains the maximized panel
+        if (this.maximizedPanel) {
+            const panel = this.panelsById[this.maximizedPanel];
+            if (panel && panel.regionId === regionId) {
+                return;
+            }
+        }
+        // Get first panel's icon if available for the nav icon
+        const firstPanel = region.panels?.[0] ? this.panelsById[region.panels[0]] : null;
+        const icon = firstPanel?.icon || 'fas fa-window-minimize';
+        // Find region's index in parent and determine side
+        let index = -1;
+        let parentId;
+        let side = 'left';
+        if (parent && parent.children) {
+            index = parent.children.findIndex(c => c.id === regionId);
+            parentId = parent.id;
+            // Determine side based on position - first half is left, second half is right
+            const midPoint = Math.floor(parent.children.length / 2);
+            side = index < midPoint ? 'left' : 'right';
+            // Remove region from parent's children
+            const remaining = parent.children.filter(c => c.id !== regionId);
+            // Redistribute space to remaining siblings proportionally
+            if (remaining.length > 0) {
+                const currentTotal = remaining.reduce((sum, r) => sum + (r.size || 0), 0);
+                // Normalize all remaining regions to total 100%
+                if (currentTotal > 0) {
+                    remaining.forEach(r => {
+                        r.size = ((r.size || 0) / currentTotal) * 100;
+                    });
+                }
+                else {
+                    // If no sizes set, distribute equally
+                    const equalSize = 100 / remaining.length;
+                    remaining.forEach(r => {
+                        r.size = equalSize;
+                    });
+                }
+            }
+            parent.children = remaining;
+        }
+        else if (this.root.id === regionId) {
+            // Cannot minimize root region
+            return;
+        }
+        // Store minimized region info with full state
+        this.minimizedRegions = {
+            ...this.minimizedRegions,
+            [regionId]: {
+                title: region.title || regionId,
+                icon,
+                iconLibrary: firstPanel?.iconLibrary,
+                region: { ...region },
+                parentId,
+                index,
+                side,
+            },
+        };
+        // Increment version to force resizable panels to re-initialize with new sizes
+        this.layoutVersion++;
+        this.root = { ...this.root };
+        this.emitLayoutChange();
+    }
+    restoreRegion(regionId) {
+        const minimized = this.minimizedRegions[regionId];
+        if (!minimized) {
+            return;
+        }
+        const { region, parentId, index } = minimized;
+        // Find parent and restore region
+        if (parentId) {
+            const parentFound = this.findRegionNode(parentId);
+            if (parentFound && parentFound.node && parentFound.node.children) {
+                const parent = parentFound.node;
+                // Create a fresh copy of the region to avoid reference issues
+                const restoredRegion = JSON.parse(JSON.stringify(region));
+                // Insert region back at original position
+                const newChildren = [...(parent.children ?? [])];
+                newChildren.splice(index, 0, restoredRegion);
+                // Recalculate sizes
+                const totalSize = newChildren.reduce((sum, r) => sum + (r.size || 0), 0);
+                if (totalSize > 0) {
+                    newChildren.forEach(r => {
+                        r.size = ((r.size || 0) / totalSize) * 100;
+                    });
+                }
+                parent.children = newChildren;
+                // Increment version to force resizable panels to re-initialize with correct sizes
+                this.layoutVersion++;
+            }
+        }
+        // Remove from minimized regions
+        const { [regionId]: removed, ...rest } = this.minimizedRegions;
+        this.minimizedRegions = rest;
+        this.root = { ...this.root };
+        this.emitLayoutChange();
+    }
+    closeAllAndRemoveRegion(regionId) {
+        const region = this.findRegionNode(regionId)?.node;
+        if (!region)
+            return;
+        // Close all panels in this region
+        const panelIds = [...region.panels];
+        panelIds.forEach(panelId => {
+            this.removePanel(panelId);
+        });
+        // Remove the region
+        this.removeRegion(regionId);
+    }
+    renderTabs(region) {
+        const panels = region.panels.map(id => this.panelsById[id]).filter(Boolean);
+        //const isDropdownOpen = this.openDropdowns[region.id];
+        const pinnedPanels = panels.filter(p => p.pinned);
+        const unpinnedPanels = panels.filter(p => !p.pinned);
+        const hasPinnedAndUnpinned = pinnedPanels.length > 0 && unpinnedPanels.length > 0;
+        const showScrollButtons = this.regionsNeedingScroll[region.id] || false;
+        return (h("div", { class: "lm-tabs-container", "data-region-id": region.id }, showScrollButtons && (h("ui-button", { variant: "ghost", size: "sm", icon: "chevron-left", iconLibrary: "fontawesome", iconSize: "14px", ariaLabel: "Scroll left", onClick: () => this.scrollTabs(region.id, 'left') })), h("div", { class: "lm-tabs", onDragOver: e => {
+                e.preventDefault();
+                this.handleDragOver(e, region.id);
+            }, onDragLeave: () => this.dragOverTarget = undefined, onDrop: e => this.handleTabDrop(e, region) }, panels.map((p, index) => {
+            const isPinned = p.pinned;
+            const isFirstUnpinned = !isPinned && index > 0 && panels[index - 1]?.pinned;
+            return (h("div", { key: p.id }, isFirstUnpinned && hasPinnedAndUnpinned && h("div", { class: "lm-tab-separator", title: "Pinned / Unpinned divider" }), h("div", { class: { 'lm-tab': true, 'active': region.activePanelId === p.id, 'pinned': !!isPinned }, draggable: true, onDragStart: e => this.handleTabDragStart(e, p, region), onContextMenu: e => this.openContextMenu(e, region.id, p.id), onClick: () => this.selectPanel(region.id, p.id) }, p.icon && h("ui-icon", { name: p.icon, library: p.iconLibrary || 'lucide' }), h("span", { class: "lm-tab-title" }, p.title), isPinned && (h("ui-icon", { name: "thumbtack", library: "fontawesome", class: "lm-tab-btn", title: "Unpin", onClick: (e) => {
+                    e.stopPropagation();
+                    this.togglePin(p.id);
+                } })), p.dirty && h("span", { class: "lm-dot", title: "Unsaved changes" }), h("ui-button", { variant: "ghost", size: "sm", icon: "ellipsis-v", iconLibrary: "fontawesome", ariaLabel: "More actions", onClick: (e) => {
+                    e.stopPropagation();
+                    const isOpen = !this.openDropdowns[`tab-${p.id}`];
+                    this.openDropdowns = { ...this.openDropdowns, [`tab-${p.id}`]: isOpen };
+                    if (isOpen) {
+                        this.tabActionsMenuTrigger = e.currentTarget;
+                        const rect = this.tabActionsMenuTrigger.getBoundingClientRect();
+                        const offset = getTransformedAncestorOffset(this.el);
+                        this.tabActionsMenu = {
+                            x: rect.right - offset.x,
+                            y: rect.bottom - offset.y + 4,
+                            panelId: p.id,
+                        };
+                    }
+                    else {
+                        this.tabActionsMenu = undefined;
+                        this.tabActionsMenuTrigger = undefined;
+                    }
+                } }), p.closable && !isPinned && (h("ui-button", { variant: "ghost", size: "sm", icon: "times", iconLibrary: "fontawesome", ariaLabel: "Close", onClick: (e) => {
+                    e.stopPropagation();
+                    this.removePanel(p.id);
+                } })))));
+        })), showScrollButtons && (h("ui-button", { variant: "ghost", size: "sm", icon: "chevron-right", iconLibrary: "fontawesome", iconSize: "14px", ariaLabel: "Scroll right", onClick: () => this.scrollTabs(region.id, 'right') }))));
+    }
+    handleTabDragStart(ev, panel, region) {
+        this.draggingPanel = { panelId: panel.id, fromRegionId: region.id };
+        ev.dataTransfer?.setData('text/plain', panel.id);
+        ev.dataTransfer?.setDragImage(ev.target, 0, 0);
+    }
+    handleTabDrop(ev, targetRegion) {
+        ev.preventDefault();
+        const panelId = ev.dataTransfer?.getData('text/plain') || this.draggingPanel?.panelId;
+        if (!panelId)
+            return;
+        // If dropping on a specific tab, insert before its index
+        let insertIndex = undefined;
+        const targetEl = ev.target;
+        const tabEl = targetEl.closest('.lm-tab');
+        if (tabEl) {
+            const tabs = Array.from(tabEl.parentElement.querySelectorAll('.lm-tab'));
+            insertIndex = tabs.indexOf(tabEl);
+        }
+        this.movePanel(panelId, targetRegion.id, insertIndex);
+        this.draggingPanel = undefined;
+    }
+    selectPanel(regionId, panelId) {
+        const region = this.findRegionNode(regionId)?.node;
+        if (region) {
+            region.activePanelId = panelId;
+            this.root = { ...this.root };
+            this.emitLayoutChange();
+        }
+    }
+    switchToPanel(regionId, panelId) {
+        const region = this.findRegionNode(regionId)?.node;
+        if (region && region.panels.includes(panelId)) {
+            region.activePanelId = panelId;
+            this.root = { ...this.root };
+        }
+    }
+    renderNavigationRegion(region) {
+        const panels = region.panels.map(id => this.panelsById[id]).filter(Boolean);
+        return (h("div", { class: "lm-region lm-region-navigation", "data-region-id": region.id }, h("div", { class: "lm-region-header" }, h("div", { class: "lm-navigation-header" }, h("span", { class: "lm-navigation-title" }, region.title || 'Navigation')), h("ui-button", { variant: "ghost", size: "sm", icon: "times-circle", iconLibrary: "fontawesome", ariaLabel: "Close all panels and remove region", onClick: () => this.closeAllAndRemoveRegion(region.id) })), h("div", { class: "lm-navigation-content" }, panels.map(panel => (h("div", { class: "lm-navigation-section", "data-panel-id": panel.id }, h("div", { class: {
+                'lm-navigation-section-header': true,
+                'active': region.activePanelId === panel.id,
+            }, onClick: () => this.switchToPanel(region.id, panel.id) }, panel.icon && h("ui-icon", { name: panel.icon, library: panel.iconLibrary || 'default' }), h("span", { class: "lm-navigation-section-title" }, panel.title), h("ui-button", { variant: "ghost", size: "sm", class: "lm-navigation-section-close", icon: "times", iconLibrary: "fontawesome", ariaLabel: "Close panel", onClick: (e) => {
+                e.stopPropagation();
+                this.removePanel(panel.id);
+            } })), region.activePanelId === panel.id && h("div", { class: "lm-navigation-section-content", ref: host => this.attachContent(host, panel) })))), panels.length === 0 && h("div", { class: "lm-empty" }, "No panels open"))));
+    }
+    renderHeaderOnlyRegion(region) {
+        const active = region.activePanelId ? this.panelsById[region.activePanelId] : undefined;
+        return (h("div", { class: "lm-region lm-region-header-only", "data-region-id": region.id }, h("div", { class: "lm-region-header" }, h("div", { class: "lm-header-only-title" }, active?.icon && h("ui-icon", { name: active.icon, library: active.iconLibrary || 'default' }), h("span", null, active?.title || region.title || 'Content')), h("div", { class: "lm-header-only-actions" }, h("div", { class: "lm-panel-dropdown-wrapper" }, h("ui-button", { variant: "ghost", size: "sm", icon: "list", iconLibrary: "fontawesome", ariaLabel: "Show all panels", onClick: (e) => this.togglePanelDropdown(region.id, e) })), active && (h("ui-button", { variant: "ghost", size: "sm", icon: "expand", iconLibrary: "fontawesome", iconSize: "14px", ariaLabel: "Maximize", onClick: () => this.maximizePanel(active.id) })), active && (h("ui-button", { variant: "ghost", size: "sm", icon: "external-link-alt", iconLibrary: "fontawesome", iconSize: "14px", ariaLabel: "Pop out", onClick: () => this.popoutPanel(active.id) })), h("ui-button", { variant: "ghost", size: "sm", icon: "times-circle", iconLibrary: "fontawesome", iconSize: "14px", ariaLabel: "Close all panels and remove region", onClick: () => this.closeAllAndRemoveRegion(region.id) }))), h("div", { class: "lm-region-content" }, active && h("div", { class: "lm-panel-host", "data-panel-id": active.id, ref: host => this.attachContent(host, active) }), !active && h("div", { class: "lm-empty" }, "No content available"))));
+    }
+    renderLeafRegion(region) {
+        const active = region.activePanelId ? this.panelsById[region.activePanelId] : undefined;
+        const regionType = region.type || 'default';
+        const showHeader = regionType !== 'no-header' && regionType !== 'content-only';
+        const showTabs = regionType !== 'title-only' && regionType !== 'no-header' && regionType !== 'content-only' && regionType !== 'navigation' && regionType !== 'header-only';
+        const showActions = regionType === 'default';
+        const showScrollButtons = this.regionsNeedingScroll[region.id] || false;
+        // For content-only type, render pure content with no UI chrome
+        if (regionType === 'content-only') {
+            return (h("div", { class: "lm-region lm-region-content-only", "data-region-id": region.id }, active && h("div", { class: "lm-panel-host", "data-panel-id": active.id, ref: host => this.attachContent(host, active) })));
+        }
+        // For navigation type, render all panels stacked vertically
+        if (regionType === 'navigation') {
+            return this.renderNavigationRegion(region);
+        }
+        // For header-only type, render header with buttons and content below
+        if (regionType === 'header-only') {
+            return this.renderHeaderOnlyRegion(region);
+        }
+        return (h("div", { class: {
+                'lm-region': true,
+                [`lm-region-${regionType}`]: true,
+            }, "data-region-id": region.id }, showHeader && (h("div", { class: "lm-region-header" }, regionType === 'title-only' && (h("div", { class: "lm-region-title" }, h("span", null, region.title))), showTabs && this.renderTabs(region), showActions && (h("div", { class: "lm-region-actions" }, showScrollButtons && (h("div", { class: "lm-panel-dropdown-wrapper" }, h("ui-button", { variant: "ghost", size: "sm", icon: "list", iconLibrary: "fontawesome", iconSize: "14px", ariaLabel: "Show all panels", onClick: (e) => this.togglePanelDropdown(region.id, e) }))), h("div", { class: "lm-actions-menu-wrapper" }, h("ui-button", { variant: "ghost", size: "sm", icon: "ellipsis-v", iconLibrary: "fontawesome", iconSize: "14px", ariaLabel: "Actions", onClick: (e) => this.toggleActionsMenu(region.id, e) })), h("ui-button", { variant: "ghost", size: "sm", icon: "window-minimize", iconLibrary: "fontawesome", iconSize: "14px", ariaLabel: "Minimize region", onClick: () => this.minimizeRegion(region.id) }), (region.panels?.length || 0) > 0 && (h("ui-button", { variant: "ghost", size: "sm", icon: "times-circle", iconLibrary: "fontawesome", iconSize: "14px", ariaLabel: "Close all panels and remove region", onClick: () => this.closeAllAndRemoveRegion(region.id) })))))), h("div", { class: "lm-region-content", onDragOver: e => {
+                e.preventDefault();
+                this.handleDragOver(e, region.id);
+            }, onDragLeave: () => this.dragOverTarget = undefined, onDrop: e => this.handleTabDrop(e, region) }, active && h("div", { class: "lm-panel-host", "data-panel-id": active.id, ref: host => this.attachContent(host, active) }), !active && h("div", { class: "lm-empty" }, "No tabs open"), this.dragOverTarget?.regionId === region.id && (h("div", { class: `lm-drop-highlighter lm-drop-${this.dragOverTarget.position}` })))));
+    }
+    renderRegionNode(node) {
+        if (node.children && node.children.length) {
+            const panelsConfig = node.children.map(child => ({
+                id: child.id,
+                size: child.size,
+                minSize: child.minSize,
+                maxSize: child.maxSize,
+                collapsible: child.collapsible,
+            }));
+            return (h("ui-resizable-panel", { key: `resizable-${node.id}-v${this.layoutVersion}`, direction: node.direction || 'horizontal', panels: JSON.stringify(panelsConfig), saveState: false, stateKey: `${this.stateKey}-${node.id}`, showHandleIcon: true }, node.children.map(child => (h("div", { slot: child.id, class: "lm-slot" }, this.renderRegionNode(child))))));
+        }
+        return this.renderLeafRegion(node);
+    }
+    attachContent(host, panel) {
+        if (!host)
+            return;
+        // Clear existing
+        while (host.firstChild)
+            host.removeChild(host.firstChild);
+        if (panel.element) {
+            host.appendChild(panel.element);
+        }
+        else if (panel.html) {
+            host.innerHTML = sanitizeHTML(panel.html);
+        }
+    }
+    renderVerticalNav(side) {
+        const minimizedEntries = Object.entries(this.minimizedRegions).filter(([_, info]) => info.side === side);
+        if (minimizedEntries.length === 0)
+            return null;
+        return (h("div", { class: `lm-vertical-nav lm-vertical-nav-${side}` }, minimizedEntries.map(([regionId, info]) => (h("div", { key: regionId, class: "lm-nav-item", title: info.title, onClick: () => this.restoreRegion(regionId) }, h("ui-icon", { name: info.icon, library: info.iconLibrary || 'default' }), h("span", { class: "lm-nav-label" }, info.title))))));
+    }
+    render() {
+        // If a panel is maximized, render only that panel
+        if (this.maximizedPanel) {
+            const p = this.panelsById[this.maximizedPanel];
+            if (p) {
+                return (h(Host, null, h("div", { class: "lm-container lm-maximized" }, h("div", { class: "lm-maximized-panel" }, h("div", { class: "lm-maximized-header" }, h("span", { class: "lm-maximized-title" }, p.title), h("div", { class: "lm-maximized-actions" }, h("ui-button", { variant: "ghost", size: "sm", icon: "compress", iconLibrary: "fontawesome", iconSize: "14px", ariaLabel: "Restore", onClick: () => this.restorePanel() }), h("ui-button", { variant: "ghost", size: "sm", icon: "times", iconLibrary: "fontawesome", iconSize: "14px", ariaLabel: "Close", onClick: () => this.removePanel(this.maximizedPanel) }))), h("div", { class: "lm-maximized-content", ref: host => this.attachContent(host, p) })))));
+            }
+        }
+        return (h(Host, null, this.renderVerticalNav('left'), h("div", { class: "lm-container" }, this.root && this.renderRegionNode(this.root), h("div", { class: "lm-popout-layer" }, Object.keys(this.popouts).map(panelId => {
+            const pop = this.popouts[panelId];
+            const p = this.panelsById[panelId];
+            if (!p)
+                return null;
+            const style = { left: `${pop.x}px`, top: `${pop.y}px`, width: `${pop.width}px`, height: `${pop.height}px` };
+            return (h("div", { class: "lm-popout-window", style: style, "data-panel-id": panelId }, h("div", { class: "lm-popout-header", onMouseDown: e => this.startPopoutDrag(e, panelId) }, h("span", { class: "lm-popout-title" }, p.title), h("div", { class: "lm-popout-actions" }, h("ui-button", { variant: "ghost", size: "sm", icon: "download", iconLibrary: "fontawesome", iconSize: "14px", ariaLabel: "Dock", onClick: () => this.dockPanel(panelId, p.regionId) }), h("ui-button", { variant: "ghost", size: "sm", icon: "times", iconLibrary: "fontawesome", iconSize: "14px", ariaLabel: "Close", onClick: () => this.removePanel(panelId) }))), h("div", { class: "lm-popout-content", ref: host => this.attachContent(host, p) })));
+        })), this.contextMenu && this.renderContextMenu(), this.tabActionsMenu && this.renderTabActionsMenu(), this.floatingDropdown && this.renderFloatingDropdown()), this.renderVerticalNav('right')));
+    }
+    startPopoutDrag(e, panelId) {
+        const pop = this.popouts[panelId];
+        if (!pop)
+            return;
+        const target = e.currentTarget.parentElement;
+        const rect = target.getBoundingClientRect();
+        const offsetX = e.clientX - rect.left;
+        const offsetY = e.clientY - rect.top;
+        this.draggingPopout = { panelId, offsetX, offsetY };
+        const onMove = (ev) => {
+            let x = ev.clientX - this.draggingPopout.offsetX;
+            let y = ev.clientY - this.draggingPopout.offsetY;
+            const snapThreshold = 20;
+            const vw = window.innerWidth;
+            const vh = window.innerHeight;
+            // Snap to viewport edges
+            if (Math.abs(x) < snapThreshold)
+                x = 0;
+            if (Math.abs(y) < snapThreshold)
+                y = 0;
+            if (Math.abs(x + pop.width - vw) < snapThreshold)
+                x = vw - pop.width;
+            if (Math.abs(y + pop.height - vh) < snapThreshold)
+                y = vh - pop.height;
+            this.popouts[panelId] = { ...this.popouts[panelId], x, y };
+            // Force re-render
+            this.popouts = { ...this.popouts };
+        };
+        const onUp = () => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            this.draggingPopout = undefined;
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }
+    openContextMenu(e, regionId, panelId) {
+        e.preventDefault();
+        const coords = correctViewportCoordinates(e.clientX, e.clientY, this.el);
+        this.contextMenu = {
+            x: coords.x,
+            y: coords.y,
+            regionId,
+            panelId,
+        };
+        const onClickAway = () => {
+            this.contextMenu = undefined;
+            document.removeEventListener('click', onClickAway);
+        };
+        document.addEventListener('click', onClickAway, { once: true });
+    }
+    renderContextMenu() {
+        const { x, y, regionId, panelId } = this.contextMenu;
+        const panel = this.panelsById[panelId];
+        const style = { left: `${x}px`, top: `${y}px` };
+        return (h("div", { class: "lm-context-menu", style: style }, h("ui-button", { variant: "ghost", fullWidth: true, icon: "thumbtack", iconLibrary: "fontawesome", iconSize: "14px", label: panel?.pinned ? 'Unpin Tab' : 'Pin Tab', onClick: () => {
+                this.togglePin(panelId);
+                this.contextMenu = undefined;
+            } }), h("hr", null), h("ui-button", { variant: "ghost", fullWidth: true, disabled: panel?.pinned, label: panel?.pinned ? 'Close (Pinned)' : 'Close', onClick: () => {
+                this.removePanel(panelId);
+                this.contextMenu = undefined;
+            } }), h("ui-button", { variant: "ghost", fullWidth: true, icon: "arrows-alt-h", iconLibrary: "fontawesome", iconSize: "14px", label: "Close Others", onClick: () => {
+                this.closeOthers(regionId, panelId);
+                this.contextMenu = undefined;
+            } }), h("ui-button", { variant: "ghost", fullWidth: true, icon: "arrow-right", iconLibrary: "fontawesome", iconSize: "14px", label: "Close to the Right", onClick: () => {
+                this.closeToRight(regionId, panelId);
+                this.contextMenu = undefined;
+            } }), h("hr", null), h("ui-button", { variant: "ghost", fullWidth: true, label: "Move to New Group (H)", onClick: () => {
+                this.splitRegion(regionId, 'horizontal').then(() => this.movePanel(panelId, `${regionId}-b`));
+                this.contextMenu = undefined;
+            } }), h("ui-button", { variant: "ghost", fullWidth: true, label: "Move to New Group (V)", onClick: () => {
+                this.splitRegion(regionId, 'vertical').then(() => this.movePanel(panelId, `${regionId}-b`));
+                this.contextMenu = undefined;
+            } })));
+    }
+    renderTabActionsMenu() {
+        const { x, y, panelId } = this.tabActionsMenu;
+        const p = this.panelsById[panelId];
+        if (!p)
+            return null;
+        const style = { left: `${x}px`, top: `${y}px` };
+        return (h("div", { class: "lm-tab-actions-menu-fixed", style: style }, h("div", { class: "lm-tab-actions-item", onClick: e => {
+                e.stopPropagation();
+                this.maximizePanel(panelId);
+                this.openDropdowns = { ...this.openDropdowns, [`tab-${panelId}`]: false };
+                this.tabActionsMenu = undefined;
+            } }, h("ui-icon", { name: "expand", library: "fontawesome", size: "14px" }), h("span", null, "Maximize")), p.allowPopout && (h("div", { class: "lm-tab-actions-item", onClick: e => {
+                e.stopPropagation();
+                this.popoutPanel(panelId);
+                this.openDropdowns = { ...this.openDropdowns, [`tab-${panelId}`]: false };
+                this.tabActionsMenu = undefined;
+            } }, h("ui-icon", { name: "window-restore", library: "fontawesome" }), h("span", null, "Pop Out"))), h("div", { class: "lm-tab-actions-divider" }), h("div", { class: "lm-tab-actions-item", onClick: e => {
+                e.stopPropagation();
+                this.togglePin(panelId);
+                this.openDropdowns = { ...this.openDropdowns, [`tab-${panelId}`]: false };
+                this.tabActionsMenu = undefined;
+            } }, p.pinned ? (h(h.Fragment, null, h("ui-icon", { name: "thumbtack", library: "fontawesome" }), h("span", null, "Unpin Tab"))) : (h(h.Fragment, null, h("ui-icon", { name: "thumbtack", library: "fontawesome" }), h("span", null, "Pin Tab")))), h("div", { class: "lm-tab-actions-divider" }), h("div", { class: "lm-tab-actions-item", onClick: e => {
+                e.stopPropagation();
+                this.closeOthers(p.regionId, panelId);
+                this.tabActionsMenu = undefined;
+            } }, h("ui-icon", { name: "arrows-alt-h", library: "fontawesome" }), h("span", null, "Close Others")), h("div", { class: "lm-tab-actions-item", onClick: e => {
+                e.stopPropagation();
+                this.closeToRight(p.regionId, panelId);
+                this.tabActionsMenu = undefined;
+            } }, h("ui-icon", { name: "arrow-right", library: "fontawesome" }), h("span", null, "Close to the Right")), h("div", { class: "lm-tab-actions-divider" }), h("div", { class: "lm-tab-actions-item lm-tab-actions-danger", onClick: e => {
+                e.stopPropagation();
+                this.removePanel(panelId);
+                this.tabActionsMenu = undefined;
+            } }, h("ui-icon", { name: "times", library: "fontawesome" }), h("span", null, "Close"))));
+    }
+    closeOthers(regionId, panelId) {
+        const region = this.findRegionNode(regionId)?.node;
+        if (!region)
+            return;
+        const ids = (region.panels || []).filter(id => id !== panelId);
+        ids.forEach(id => this.removePanel(id));
+    }
+    closeToRight(regionId, panelId) {
+        const region = this.findRegionNode(regionId)?.node;
+        if (!region)
+            return;
+        const idx = (region.panels || []).indexOf(panelId);
+        const ids = (region.panels || []).slice(idx + 1);
+        ids.forEach(id => this.removePanel(id));
+    }
+    togglePin(panelId) {
+        const panel = this.panelsById[panelId];
+        if (!panel)
+            return;
+        // Toggle pin state
+        panel.pinned = !panel.pinned;
+        // Find the region containing this panel
+        const region = this.findRegionNode(panel.regionId)?.node;
+        if (!region || !region.panels)
+            return;
+        // Reorder panels: pinned panels on the left, unpinned on the right
+        const currentPanels = region.panels.map(id => this.panelsById[id]).filter(Boolean);
+        const pinnedPanels = currentPanels.filter(p => p.pinned).map(p => p.id);
+        const unpinnedPanels = currentPanels.filter(p => !p.pinned).map(p => p.id);
+        // Update region panels order
+        region.panels = [...pinnedPanels, ...unpinnedPanels];
+        // Force re-render
+        this.panelsById = { ...this.panelsById };
+        this.root = { ...this.root };
+    }
+    checkTabsOverflow() {
+        // Check all regions to see if their tabs overflow
+        const allRegions = [];
+        const collectRegions = (node) => {
+            if (node.panels) {
+                allRegions.push(node);
+            }
+            if (node.children) {
+                node.children.forEach(collectRegions);
+            }
+        };
+        if (this.root)
+            collectRegions(this.root);
+        const needsUpdate = {};
+        allRegions.forEach(region => {
+            const container = this.el.querySelector(`[data-region-id="${region.id}"] .lm-tabs`);
+            if (container) {
+                const containerWidth = container.offsetWidth;
+                const scrollWidth = container.scrollWidth;
+                needsUpdate[region.id] = scrollWidth > containerWidth;
+            }
+        });
+        // Only update state if something changed
+        if (JSON.stringify(needsUpdate) !== JSON.stringify(this.regionsNeedingScroll)) {
+            this.regionsNeedingScroll = needsUpdate;
+        }
+    }
+    handleDragOver(e, regionId) {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        let position = 'center';
+        const threshold = 0.2; // 20% edge detection
+        if (y < rect.height * threshold)
+            position = 'top';
+        else if (y > rect.height * (1 - threshold))
+            position = 'bottom';
+        else if (x < rect.width * threshold)
+            position = 'left';
+        else if (x > rect.width * (1 - threshold))
+            position = 'right';
+        this.dragOverTarget = { regionId, position };
+    }
+    renderFloatingDropdown() {
+        if (!this.floatingDropdown)
+            return null;
+        const { x, y, regionId, type } = this.floatingDropdown;
+        const region = this.findRegionById(this.root, regionId);
+        if (!region)
+            return null;
+        if (type === 'panel') {
+            const panels = region.panels.map(id => this.panelsById[id]).filter(Boolean);
+            return (h("div", { class: "lm-panel-dropdown-menu", style: {
+                    position: 'fixed',
+                    top: `${y}px`,
+                    left: `${x}px`,
+                    zIndex: '12000',
+                    minWidth: '200px',
+                } }, h("div", { class: "lm-panel-dropdown-header" }, "All Panels (", panels.length, ")"), panels.map(p => (h("div", { class: {
+                    'lm-panel-dropdown-item': true,
+                    'active': region.activePanelId === p.id,
+                }, onClick: () => this.selectPanelFromDropdown(region.id, p.id) }, p.icon && h("ui-icon", { name: p.icon, library: p.iconLibrary || 'lucide', style: { marginRight: '8px' } }), h("span", null, p.title))))));
+        }
+        else {
+            const active = region.activePanelId ? this.panelsById[region.activePanelId] : null;
+            return (h("div", { class: "lm-actions-dropdown-menu", style: {
+                    position: 'fixed',
+                    top: `${y}px`,
+                    left: `${x}px`,
+                    zIndex: '12000',
+                    minWidth: '180px',
+                } }, h("div", { class: "lm-actions-item", onClick: () => {
+                    this.splitRegion(region.id, 'horizontal');
+                    this.floatingDropdown = undefined;
+                    this.openActionsMenu = {};
+                } }, h("ui-icon", { name: "columns", library: "fontawesome", class: "lm-actions-icon" }), "Split Horizontal"), h("div", { class: "lm-actions-item", onClick: () => {
+                    this.splitRegion(region.id, 'vertical');
+                    this.floatingDropdown = undefined;
+                    this.openActionsMenu = {};
+                } }, h("ui-icon", { name: "grip-lines", library: "fontawesome", class: "lm-actions-icon" }), "Split Vertical"), h("div", { class: "lm-actions-divider" }), active && (h("div", { class: "lm-actions-item", onClick: () => {
+                    this.maximizePanel(active.id);
+                    this.floatingDropdown = undefined;
+                    this.openActionsMenu = {};
+                } }, h("ui-icon", { name: "expand", library: "fontawesome", class: "lm-actions-icon" }), "Maximize Panel")), (region.panels?.length || 0) > 0 && (h(h.Fragment, null, h("div", { class: "lm-actions-divider" }), h("div", { class: "lm-actions-item", onClick: () => {
+                    this.closeAllPanels(region.id);
+                    this.floatingDropdown = undefined;
+                    this.openActionsMenu = {};
+                } }, h("ui-icon", { name: "times", library: "fontawesome", class: "lm-actions-icon" }), "Close All Panels"))), h("div", { class: "lm-actions-divider" }), h("div", { class: "lm-actions-item", onClick: () => {
+                    this.mergeRegion(region.id);
+                    this.floatingDropdown = undefined;
+                    this.openActionsMenu = {};
+                } }, h("ui-icon", { name: "compress", library: "fontawesome", class: "lm-actions-icon" }), "Merge Region"), h("div", { class: "lm-actions-divider" }), h("div", { class: "lm-actions-item lm-actions-danger", onClick: () => {
+                    this.closeAllAndRemoveRegion(region.id);
+                    this.floatingDropdown = undefined;
+                    this.openActionsMenu = {};
+                } }, h("ui-icon", { name: "trash", library: "fontawesome", class: "lm-actions-icon" }), "Remove Group")));
+        }
+    }
+    findRegionById(node, id) {
+        if (node.id === id)
+            return node;
+        for (const child of (node.children ?? [])) {
+            const found = this.findRegionById(child, id);
+            if (found)
+                return found;
+        }
+        return null;
+    }
+    componentDidUpdate() {
+        // Check tabs overflow after render
+        setTimeout(() => this.checkTabsOverflow(), 0);
+    }
+    static get is() { return "ui-workspace-manager"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["workspace-manager.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["workspace-manager.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "regions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LayoutRegionConfig[] | string",
+                    "resolved": "LayoutRegionConfig[] | string",
+                    "references": {
+                        "LayoutRegionConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/workspace-manager/types.ts::LayoutRegionConfig",
+                            "referenceLocation": "LayoutRegionConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial regions configuration"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "regions",
+                "defaultValue": "[]"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Direction",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Direction": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/workspace-manager/types.ts::Direction",
+                            "referenceLocation": "Direction"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Horizontal or vertical split for top-level regions"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "saveState": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Persist sizes between reloads"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "save-state",
+                "defaultValue": "true"
+            },
+            "stateKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "LocalStorage key when saveState=true"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state-key",
+                "defaultValue": "'layout-manager-state'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "root": {},
+            "panelsById": {},
+            "popouts": {},
+            "maximizedPanel": {},
+            "preMaximizeState": {},
+            "draggingPanel": {},
+            "draggingPopout": {},
+            "layoutVersion": {},
+            "contextMenu": {},
+            "tabActionsMenu": {},
+            "floatingDropdown": {},
+            "openDropdowns": {},
+            "openActionsMenu": {},
+            "regionsNeedingScroll": {},
+            "minimizedRegions": {},
+            "dragOverTarget": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "layoutChange",
+                "name": "layoutChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ regions: RegionState[] }",
+                    "resolved": "{ regions: RegionState[]; }",
+                    "references": {
+                        "RegionState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/workspace-manager/types.ts::RegionState",
+                            "referenceLocation": "RegionState"
+                        }
+                    }
+                }
+            }, {
+                "method": "panelAdded",
+                "name": "panelAdded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PanelState",
+                    "resolved": "PanelState",
+                    "references": {
+                        "PanelState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/workspace-manager/types.ts::PanelState",
+                            "referenceLocation": "PanelState"
+                        }
+                    }
+                }
+            }, {
+                "method": "panelRemoved",
+                "name": "panelRemoved",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string; regionId: string }",
+                    "resolved": "{ panelId: string; regionId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelMoved",
+                "name": "panelMoved",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string; from: string; to: string }",
+                    "resolved": "{ panelId: string; from: string; to: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelPoppedOut",
+                "name": "panelPoppedOut",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string }",
+                    "resolved": "{ panelId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelDocked",
+                "name": "panelDocked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string; regionId: string }",
+                    "resolved": "{ panelId: string; regionId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelMaximized",
+                "name": "panelMaximized",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string }",
+                    "resolved": "{ panelId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelRestored",
+                "name": "panelRestored",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panelId: string }",
+                    "resolved": "{ panelId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "regionAdded",
+                "name": "regionAdded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ regionId: string; title: string }",
+                    "resolved": "{ regionId: string; title: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "regionRemoved",
+                "name": "regionRemoved",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ regionId: string }",
+                    "resolved": "{ regionId: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getLayoutState": {
+                "complexType": {
+                    "signature": "() => Promise<{ root: RegionState; panels: { [id: string]: PanelState; }; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "RegionState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/workspace-manager/types.ts::RegionState",
+                            "referenceLocation": "RegionState"
+                        },
+                        "PanelState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/workspace-manager/types.ts::PanelState",
+                            "referenceLocation": "PanelState"
+                        }
+                    },
+                    "return": "Promise<{ root: RegionState; panels: { [id: string]: PanelState; }; }>"
+                },
+                "docs": {
+                    "text": "Get the current layout state",
+                    "tags": []
+                }
+            },
+            "clearAllRegions": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear all regions (reset to empty layout)",
+                    "tags": []
+                }
+            },
+            "addPanel": {
+                "complexType": {
+                    "signature": "(opts: PanelOptions) => Promise<string>",
+                    "parameters": [{
+                            "name": "opts",
+                            "type": "PanelOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "PanelOptions": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/workspace-manager/types.ts::PanelOptions",
+                            "referenceLocation": "PanelOptions"
+                        },
+                        "PanelState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/workspace-manager/types.ts::PanelState",
+                            "referenceLocation": "PanelState"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Add a panel into a region. If element is provided, it will be moved into the panel content.",
+                    "tags": []
+                }
+            },
+            "removePanel": {
+                "complexType": {
+                    "signature": "(panelId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "panelId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Remove a panel by id",
+                    "tags": []
+                }
+            },
+            "movePanel": {
+                "complexType": {
+                    "signature": "(panelId: string, targetRegionId: string, index?: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "panelId",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "targetRegionId",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Move a panel to another region",
+                    "tags": []
+                }
+            },
+            "popoutPanel": {
+                "complexType": {
+                    "signature": "(panelId: string, position?: { x: number; y: number; width?: number; height?: number; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "panelId",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "position",
+                            "type": "{ x: number; y: number; width?: number; height?: number; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Popout a panel (make floating). Removes from region but keeps alive in overlay",
+                    "tags": []
+                }
+            },
+            "dockPanel": {
+                "complexType": {
+                    "signature": "(panelId: string, regionId: string, index?: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "panelId",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "regionId",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Dock a popped-out panel back into a region",
+                    "tags": []
+                }
+            },
+            "splitRegion": {
+                "complexType": {
+                    "signature": "(regionId: string, direction?: Direction) => Promise<void>",
+                    "parameters": [{
+                            "name": "regionId",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "direction",
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Direction": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/workspace-manager/types.ts::Direction",
+                            "referenceLocation": "Direction"
+                        },
+                        "RegionState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/workspace-manager/types.ts::RegionState",
+                            "referenceLocation": "RegionState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Split a leaf region into two child regions",
+                    "tags": []
+                }
+            },
+            "maximizePanel": {
+                "complexType": {
+                    "signature": "(panelId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "panelId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Maximize a panel to fill the entire layout",
+                    "tags": []
+                }
+            },
+            "restorePanel": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Restore a maximized panel to normal layout",
+                    "tags": []
+                }
+            },
+            "closeAllPanels": {
+                "complexType": {
+                    "signature": "(regionId?: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "regionId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close all panels in a specific region",
+                    "tags": []
+                }
+            },
+            "mergeRegion": {
+                "complexType": {
+                    "signature": "(regionId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "regionId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Merge a split region back to a single leaf (left child remains)",
+                    "tags": []
+                }
+            },
+            "createRegion": {
+                "complexType": {
+                    "signature": "(config: LayoutRegionConfig) => Promise<void>",
+                    "parameters": [{
+                            "name": "config",
+                            "type": "LayoutRegionConfig",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "LayoutRegionConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/workspace-manager/types.ts::LayoutRegionConfig",
+                            "referenceLocation": "LayoutRegionConfig"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Create a new region",
+                    "tags": []
+                }
+            },
+            "addRegion": {
+                "complexType": {
+                    "signature": "(opts: { id?: string; title?: string; size?: number; position?: \"start\" | \"end\"; type?: RegionType; skipNormalization?: boolean; }) => Promise<string>",
+                    "parameters": [{
+                            "name": "opts",
+                            "type": "{ id?: string; title?: string; size?: number; position?: \"start\" | \"end\"; type?: RegionType; skipNormalization?: boolean; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "RegionType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/workspace-manager/types.ts::RegionType",
+                            "referenceLocation": "RegionType"
+                        },
+                        "RegionState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/workspace-manager/types.ts::RegionState",
+                            "referenceLocation": "RegionState"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Add a new region to the root layout",
+                    "tags": []
+                }
+            },
+            "normalizeRegionSizes": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Normalize region sizes to sum to 100%",
+                    "tags": []
+                }
+            },
+            "removeRegion": {
+                "complexType": {
+                    "signature": "(regionId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "regionId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Remove a region (panels will be moved to the nearest region)",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "regions",
+                "methodName": "handleRegionsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "scroll",
+                "method": "handleScroll",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "resize",
+                "method": "handleScroll",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mousemove",
+                "method": "handleScroll",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "panelPopout",
+                "method": "onPanelPopout",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "panelSelect",
+                "method": "onPanelSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}