@plastic-software/three 0.181.2 → 0.182.0

package/examples/jsm/inspector/ui/Profiler.js

@@ -7,13 +7,176 @@ export class Profiler {
 		this.tabs = {};
 		this.activeTabId = null;
 		this.isResizing = false;
-		this.lastHeight = 350;
+		this.lastHeightBottom = 350; // Height for bottom position
+		this.lastWidthRight = 450; // Width for right position
+		this.position = 'bottom'; // 'bottom' or 'right'
+		this.detachedWindows = []; // Array to store detached tab windows
+		this.isMobile = this.detectMobile();
+		this.maxZIndex = 1002; // Track the highest z-index for detached windows (starts at base z-index from CSS)
+		this.nextTabOriginalIndex = 0; // Track the original order of tabs as they are added
 
 		Style.init();
 
 		this.setupShell();
 		this.setupResizing();
 
+		// Setup orientation change listener for mobile devices
+		if ( this.isMobile ) {
+
+			this.setupOrientationListener();
+
+		}
+
+		// Setup window resize listener to constrain detached windows
+		this.setupWindowResizeListener();
+
+	}
+
+	detectMobile() {
+
+		// Check for mobile devices
+		const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+		const isMobileUA = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test( userAgent );
+		const isTouchDevice = ( 'ontouchstart' in window ) || ( navigator.maxTouchPoints > 0 );
+		const isSmallScreen = window.innerWidth <= 768;
+
+		return isMobileUA || ( isTouchDevice && isSmallScreen );
+
+	}
+
+	setupOrientationListener() {
+
+		const handleOrientationChange = () => {
+
+			// Check if device is in landscape or portrait mode
+			const isLandscape = window.innerWidth > window.innerHeight;
+
+			// In landscape mode, use right position (vertical panel)
+			// In portrait mode, use bottom position (horizontal panel)
+			const targetPosition = isLandscape ? 'right' : 'bottom';
+
+			if ( this.position !== targetPosition ) {
+
+				this.setPosition( targetPosition );
+
+			}
+
+		};
+
+		// Initial check
+		handleOrientationChange();
+
+		// Listen for orientation changes
+		window.addEventListener( 'orientationchange', handleOrientationChange );
+		window.addEventListener( 'resize', handleOrientationChange );
+
+	}
+
+	setupWindowResizeListener() {
+
+		const constrainDetachedWindows = () => {
+
+			this.detachedWindows.forEach( detachedWindow => {
+
+				this.constrainWindowToBounds( detachedWindow.panel );
+
+			} );
+
+		};
+
+		const constrainMainPanel = () => {
+
+			// Skip if panel is maximized (it should always fill the screen)
+			if ( this.panel.classList.contains( 'maximized' ) ) return;
+
+			const windowWidth = window.innerWidth;
+			const windowHeight = window.innerHeight;
+
+			if ( this.position === 'bottom' ) {
+
+				const currentHeight = this.panel.offsetHeight;
+				const maxHeight = windowHeight - 50; // Leave 50px margin
+
+				if ( currentHeight > maxHeight ) {
+
+					this.panel.style.height = `${ maxHeight }px`;
+					this.lastHeightBottom = maxHeight;
+
+				}
+
+			} else if ( this.position === 'right' ) {
+
+				const currentWidth = this.panel.offsetWidth;
+				const maxWidth = windowWidth - 50; // Leave 50px margin
+
+				if ( currentWidth > maxWidth ) {
+
+					this.panel.style.width = `${ maxWidth }px`;
+					this.lastWidthRight = maxWidth;
+
+				}
+
+			}
+
+		};
+
+		// Listen for window resize events
+		window.addEventListener( 'resize', () => {
+
+			constrainDetachedWindows();
+			constrainMainPanel();
+
+		} );
+
+	}
+
+	constrainWindowToBounds( windowPanel ) {
+
+		const windowWidth = window.innerWidth;
+		const windowHeight = window.innerHeight;
+
+		const panelWidth = windowPanel.offsetWidth;
+		const panelHeight = windowPanel.offsetHeight;
+
+		let left = parseFloat( windowPanel.style.left ) || windowPanel.offsetLeft || 0;
+		let top = parseFloat( windowPanel.style.top ) || windowPanel.offsetTop || 0;
+
+		// Allow window to extend half its width/height outside the screen
+		const halfWidth = panelWidth / 2;
+		const halfHeight = panelHeight / 2;
+
+		// Constrain horizontal position (allow half width to extend beyond right edge)
+		if ( left + panelWidth > windowWidth + halfWidth ) {
+
+			left = windowWidth + halfWidth - panelWidth;
+
+		}
+
+		// Constrain horizontal position (allow half width to extend beyond left edge)
+		if ( left < - halfWidth ) {
+
+			left = - halfWidth;
+
+		}
+
+		// Constrain vertical position (allow half height to extend beyond bottom edge)
+		if ( top + panelHeight > windowHeight + halfHeight ) {
+
+			top = windowHeight + halfHeight - panelHeight;
+
+		}
+
+		// Constrain vertical position (allow half height to extend beyond top edge)
+		if ( top < - halfHeight ) {
+
+			top = - halfHeight;
+
+		}
+
+		// Apply constrained position
+		windowPanel.style.left = `${ left }px`;
+		windowPanel.style.top = `${ top }px`;
+
 	}
 
 	setupShell() {
@@ -24,17 +187,24 @@ export class Profiler {
 		this.toggleButton = document.createElement( 'button' );
 		this.toggleButton.id = 'profiler-toggle';
 		this.toggleButton.innerHTML = `
+<span id="builtin-tabs-container"></span>
 <span id="toggle-text">
 	<span id="fps-counter">-</span>
 	<span class="fps-label">FPS</span>
 </span>
-<!-- <span class="toggle-separator"></span> -->
 <span id="toggle-icon">
 	<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-device-ipad-horizontal-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11.5 20h-6.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v5.5" /><path d="M9 17h2" /><path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M20.2 20.2l1.8 1.8" /></svg>
 </span>
 `;
 		this.toggleButton.onclick = () => this.togglePanel();
 
+		this.builtinTabsContainer = this.toggleButton.querySelector( '#builtin-tabs-container' );
+
+		// Create mini-panel for builtin tabs (shown when panel is hidden)
+		this.miniPanel = document.createElement( 'div' );
+		this.miniPanel.id = 'profiler-mini-panel';
+		this.miniPanel.className = 'profiler-mini-panel';
+
 		this.panel = document.createElement( 'div' );
 		this.panel.id = 'profiler-panel';
 
@@ -46,6 +216,20 @@ export class Profiler {
 		const controls = document.createElement( 'div' );
 		controls.className = 'profiler-controls';
 
+		this.floatingBtn = document.createElement( 'button' );
+		this.floatingBtn.id = 'floating-btn';
+		this.floatingBtn.title = 'Switch to Right Side';
+		this.floatingBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="21"></line></svg>';
+		this.floatingBtn.onclick = () => this.togglePosition();
+
+		// Hide position toggle button on mobile devices
+		if ( this.isMobile ) {
+
+			this.floatingBtn.style.display = 'none';
+			this.panel.classList.add( 'hide-position-toggle' );
+
+		}
+
 		this.maximizeBtn = document.createElement( 'button' );
 		this.maximizeBtn.id = 'maximize-btn';
 		this.maximizeBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>';
@@ -56,7 +240,7 @@ export class Profiler {
 		hideBtn.textContent = '-';
 		hideBtn.onclick = () => this.togglePanel();
 
-		controls.append( this.maximizeBtn, hideBtn );
+		controls.append( this.floatingBtn, this.maximizeBtn, hideBtn );
 		header.append( this.tabsContainer, controls );
 
 		this.contentWrapper = document.createElement( 'div' );
@@ -67,7 +251,10 @@ export class Profiler {
 
 		this.panel.append( resizer, header, this.contentWrapper );
 
-		this.domElement.append( this.toggleButton, this.panel );
+		this.domElement.append( this.toggleButton, this.miniPanel, this.panel );
+
+		// Set initial position class
+		this.panel.classList.add( `position-${this.position}` );
 
 	}
 
@@ -79,18 +266,40 @@ export class Profiler {
 
 			this.isResizing = true;
 			this.panel.classList.add( 'resizing' );
-			const startY = e.clientY || e.touches[ 0 ].clientY;
+			resizer.setPointerCapture( e.pointerId );
+			const startX = e.clientX;
+			const startY = e.clientY;
 			const startHeight = this.panel.offsetHeight;
+			const startWidth = this.panel.offsetWidth;
 
 			const onMove = ( moveEvent ) => {
 
 				if ( ! this.isResizing ) return;
 				moveEvent.preventDefault();
-				const currentY = moveEvent.clientY || moveEvent.touches[ 0 ].clientY;
-				const newHeight = startHeight - ( currentY - startY );
-				if ( newHeight > 100 && newHeight < window.innerHeight - 50 ) {
+				const currentX = moveEvent.clientX;
+				const currentY = moveEvent.clientY;
+
+				if ( this.position === 'bottom' ) {
+
+					// Vertical resize for bottom position
+					const newHeight = startHeight - ( currentY - startY );
+
+					if ( newHeight > 100 && newHeight < window.innerHeight - 50 ) {
 
-					this.panel.style.height = `${newHeight}px`;
+						this.panel.style.height = `${ newHeight }px`;
+
+					}
+
+				} else if ( this.position === 'right' ) {
+
+					// Horizontal resize for right position
+					const newWidth = startWidth - ( currentX - startX );
+
+					if ( newWidth > 200 && newWidth < window.innerWidth - 50 ) {
+
+						this.panel.style.width = `${ newWidth }px`;
+
+					}
 
 				}
 
@@ -100,27 +309,36 @@ export class Profiler {
 
 				this.isResizing = false;
 				this.panel.classList.remove( 'resizing' );
-				document.removeEventListener( 'mousemove', onMove );
-				document.removeEventListener( 'mouseup', onEnd );
-				document.removeEventListener( 'touchmove', onMove );
-				document.removeEventListener( 'touchend', onEnd );
+				resizer.removeEventListener( 'pointermove', onMove );
+				resizer.removeEventListener( 'pointerup', onEnd );
+				resizer.removeEventListener( 'pointercancel', onEnd );
 				if ( ! this.panel.classList.contains( 'maximized' ) ) {
 
-					this.lastHeight = this.panel.offsetHeight;
+					// Save dimensions based on current position
+					if ( this.position === 'bottom' ) {
+
+						this.lastHeightBottom = this.panel.offsetHeight;
+
+					} else if ( this.position === 'right' ) {
+
+						this.lastWidthRight = this.panel.offsetWidth;
+
+					}
+
+					// Save layout after resize
+					this.saveLayout();
 
 				}
 
 			};
 
-			document.addEventListener( 'mousemove', onMove );
-			document.addEventListener( 'mouseup', onEnd );
-			document.addEventListener( 'touchmove', onMove, { passive: false } );
-			document.addEventListener( 'touchend', onEnd );
+			resizer.addEventListener( 'pointermove', onMove );
+			resizer.addEventListener( 'pointerup', onEnd );
+			resizer.addEventListener( 'pointercancel', onEnd );
 
 		};
 
-		resizer.addEventListener( 'mousedown', onStart );
-		resizer.addEventListener( 'touchstart', onStart );
+		resizer.addEventListener( 'pointerdown', onStart );
 
 	}
 
@@ -129,14 +347,50 @@ export class Profiler {
 		if ( this.panel.classList.contains( 'maximized' ) ) {
 
 			this.panel.classList.remove( 'maximized' );
-			this.panel.style.height = `${ this.lastHeight }px`;
+
+			// Restore size based on current position
+			if ( this.position === 'bottom' ) {
+
+				this.panel.style.height = `${ this.lastHeightBottom }px`;
+				this.panel.style.width = '100%';
+
+			} else if ( this.position === 'right' ) {
+
+				this.panel.style.height = '100%';
+				this.panel.style.width = `${ this.lastWidthRight }px`;
+
+			}
+
 			this.maximizeBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>';
 
 		} else {
 
-			this.lastHeight = this.panel.offsetHeight;
+			// Save current size before maximizing
+			if ( this.position === 'bottom' ) {
+
+				this.lastHeightBottom = this.panel.offsetHeight;
+
+			} else if ( this.position === 'right' ) {
+
+				this.lastWidthRight = this.panel.offsetWidth;
+
+			}
+
 			this.panel.classList.add( 'maximized' );
-			this.panel.style.height = '100vh';
+
+			// Maximize based on current position
+			if ( this.position === 'bottom' ) {
+
+				this.panel.style.height = '100vh';
+				this.panel.style.width = '100%';
+
+			} else if ( this.position === 'right' ) {
+
+				this.panel.style.height = '100%';
+				this.panel.style.width = '100vw';
+
+			}
+
 			this.maximizeBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="12" height="12" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>';
 
 		}
@@ -146,24 +400,1575 @@ export class Profiler {
 	addTab( tab ) {
 
 		this.tabs[ tab.id ] = tab;
-		tab.button.onclick = () => this.setActiveTab( tab.id );
+
+		// Assign a permanent original index to this tab
+		tab.originalIndex = this.nextTabOriginalIndex ++;
+
+		// Add visual indicator for tabs that cannot be detached
+		if ( tab.allowDetach === false ) {
+
+			tab.button.classList.add( 'no-detach' );
+
+		}
+
+		// Set visibility change callback
+		tab.onVisibilityChange = () => this.updatePanelSize();
+
+		this.setupTabDragAndDrop( tab );
+
 		this.tabsContainer.appendChild( tab.button );
 		this.contentWrapper.appendChild( tab.content );
 
+		// Apply the current visibility state to the DOM elements
+		if ( ! tab.isVisible ) {
+
+			tab.button.style.display = 'none';
+			tab.content.style.display = 'none';
+
+		}
+
+		// If tab is builtin, add it to the profiler-toggle button
+		if ( tab.builtin ) {
+
+			this.addBuiltinTab( tab );
+
+		}
+
+		// Update panel size when tabs change
+		this.updatePanelSize();
+
 	}
 
-	setActiveTab( id ) {
+	addBuiltinTab( tab ) {
 
-		if ( this.activeTabId ) this.tabs[ this.activeTabId ].setActive( false );
-		this.activeTabId = id;
-		this.tabs[ id ].setActive( true );
+		// Create a button for the builtin tab in the profiler-toggle
+		const builtinButton = document.createElement( 'button' );
+		builtinButton.className = 'builtin-tab-btn';
+
+		// Use icon if provided, otherwise use first letter
+		if ( tab.icon ) {
+
+			builtinButton.innerHTML = tab.icon;
+
+		} else {
+
+			builtinButton.textContent = tab.button.textContent.charAt( 0 ).toUpperCase();
+
+		}
+
+		builtinButton.title = tab.button.textContent;
+
+		// Create mini-panel content container for this tab
+		const miniContent = document.createElement( 'div' );
+		miniContent.className = 'mini-panel-content';
+		miniContent.style.display = 'none';
+
+		// Store references in the tab object
+		tab.builtinButton = builtinButton;
+		tab.miniContent = miniContent;
+
+		this.miniPanel.appendChild( miniContent );
+
+		builtinButton.onclick = ( e ) => {
+
+			e.stopPropagation(); // Prevent toggle panel from triggering
+
+			const isPanelVisible = this.panel.classList.contains( 'visible' );
+
+			if ( isPanelVisible ) {
+
+				// Panel is visible - navigate to tab
+				if ( ! tab.isVisible ) {
+
+					tab.show();
+
+				}
+
+				if ( tab.isDetached ) {
+
+					// If tab is detached, just bring its window to front
+					if ( tab.detachedWindow ) {
+
+						this.bringWindowToFront( tab.detachedWindow.panel );
+
+					}
+
+				} else {
+
+					// Activate the tab
+					this.setActiveTab( tab.id );
+
+				}
+
+			} else {
+
+				// Panel is hidden - toggle mini-panel for this tab
+				const isCurrentlyActive = miniContent.style.display !== 'none' && miniContent.children.length > 0;
+
+				// Hide all other mini-panel contents
+				this.miniPanel.querySelectorAll( '.mini-panel-content' ).forEach( content => {
+
+					content.style.display = 'none';
+
+				} );
+
+				// Remove active state from all builtin buttons
+				this.builtinTabsContainer.querySelectorAll( '.builtin-tab-btn' ).forEach( btn => {
+
+					btn.classList.remove( 'active' );
+
+				} );
+
+				if ( isCurrentlyActive ) {
+
+					// Toggle off - hide mini-panel and move content back
+					this.miniPanel.classList.remove( 'visible' );
+					miniContent.style.display = 'none';
+
+					// Move content back to main panel
+					if ( miniContent.firstChild ) {
+
+						tab.content.appendChild( miniContent.firstChild );
+
+					}
+
+				} else {
+
+					// Toggle on - show mini-panel with this tab's content
+					builtinButton.classList.add( 'active' );
+
+					// Move actual content to mini-panel (not clone) if not already there
+					if ( ! miniContent.firstChild ) {
+
+						const actualContent = tab.content.querySelector( '.list-scroll-wrapper' ) || tab.content.firstElementChild;
+
+						if ( actualContent ) {
+
+							miniContent.appendChild( actualContent );
+
+						}
+
+					}
+
+					// Show after content is moved
+					miniContent.style.display = 'block';
+					this.miniPanel.classList.add( 'visible' );
+
+				}
+
+			}
+
+		};
+
+		this.builtinTabsContainer.appendChild( builtinButton );
+
+		// Store references
+		tab.builtinButton = builtinButton;
+		tab.miniContent = miniContent;
+		tab.profiler = this;
+
+		// If the tab was hidden before being added, hide the builtin button
+		if ( ! tab.isVisible ) {
+
+			builtinButton.style.display = 'none';
+			miniContent.style.display = 'none';
+
+			// Hide the builtin-tabs-container if all builtin buttons are hidden
+			const hasVisibleBuiltinButtons = Array.from( this.builtinTabsContainer.querySelectorAll( '.builtin-tab-btn' ) )
+				.some( btn => btn.style.display !== 'none' );
+
+			if ( ! hasVisibleBuiltinButtons ) {
+
+				this.builtinTabsContainer.style.display = 'none';
+
+			}
+
+		}
 
 	}
 
-	togglePanel() {
+	updatePanelSize() {
 
-		this.panel.classList.toggle( 'visible' );
-		this.toggleButton.classList.toggle( 'hidden' );
+		// Check if there are any visible tabs in the panel
+		const hasVisibleTabs = Object.values( this.tabs ).some( tab => ! tab.isDetached && tab.isVisible );
+
+		// Add or remove CSS class to indicate no tabs state
+		if ( ! hasVisibleTabs ) {
+
+			this.panel.classList.add( 'no-tabs' );
+
+			// If maximized and no tabs, restore to normal size
+			if ( this.panel.classList.contains( 'maximized' ) ) {
+
+				this.panel.classList.remove( 'maximized' );
+				this.maximizeBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>';
+
+			}
+
+			// No tabs visible - set to minimum size
+			if ( this.position === 'bottom' ) {
+
+				this.panel.style.height = '38px';
+
+			} else if ( this.position === 'right' ) {
+
+				// 45px = width of one button column
+				this.panel.style.width = '45px';
+
+			}
+
+		} else {
+
+			this.panel.classList.remove( 'no-tabs' );
+
+			if ( Object.keys( this.tabs ).length > 0 ) {
+
+				// Has tabs - restore to saved size only if we had set it to minimum before
+				if ( this.position === 'bottom' ) {
+
+					const currentHeight = parseInt( this.panel.style.height );
+					if ( currentHeight === 38 ) {
+
+						this.panel.style.height = `${ this.lastHeightBottom }px`;
+
+					}
+
+				} else if ( this.position === 'right' ) {
+
+					const currentWidth = parseInt( this.panel.style.width );
+					if ( currentWidth === 45 ) {
+
+						this.panel.style.width = `${ this.lastWidthRight }px`;
+
+					}
+
+				}
+
+			}
+
+		}
+
+	}
+
+	setupTabDragAndDrop( tab ) {
+
+		// Disable drag and drop on mobile devices
+		if ( this.isMobile ) {
+
+			tab.button.addEventListener( 'click', () => {
+
+				this.setActiveTab( tab.id );
+
+			} );
+
+			return;
+
+		}
+
+		// Disable drag and drop if tab doesn't allow detach
+		if ( tab.allowDetach === false ) {
+
+			tab.button.addEventListener( 'click', () => {
+
+				this.setActiveTab( tab.id );
+
+			} );
+
+			tab.button.style.cursor = 'default';
+
+			return;
+
+		}
+
+		let isDragging = false;
+		let startX, startY;
+		let hasMoved = false;
+		let previewWindow = null;
+		const dragThreshold = 10; // pixels to move before starting drag
+
+		const onDragStart = ( e ) => {
+
+			startX = e.clientX;
+			startY = e.clientY;
+			isDragging = false;
+			hasMoved = false;
+			tab.button.setPointerCapture( e.pointerId );
+
+		};
+
+		const onDragMove = ( e ) => {
+
+			const currentX = e.clientX;
+			const currentY = e.clientY;
+
+			const deltaX = Math.abs( currentX - startX );
+			const deltaY = Math.abs( currentY - startY );
+
+			if ( ! isDragging && ( deltaX > dragThreshold || deltaY > dragThreshold ) ) {
+
+				isDragging = true;
+				tab.button.style.cursor = 'grabbing';
+				tab.button.style.opacity = '0.5';
+				tab.button.style.transform = 'scale(1.05)';
+
+				previewWindow = this.createPreviewWindow( tab, currentX, currentY );
+				previewWindow.style.opacity = '0.8';
+
+			}
+
+			if ( isDragging && previewWindow ) {
+
+				hasMoved = true;
+				e.preventDefault();
+
+				previewWindow.style.left = `${ currentX - 200 }px`;
+				previewWindow.style.top = `${ currentY - 20 }px`;
+
+			}
+
+		};
+
+		const onDragEnd = () => {
+
+			if ( isDragging && hasMoved && previewWindow ) {
+
+				if ( previewWindow.parentNode ) {
+
+					previewWindow.parentNode.removeChild( previewWindow );
+
+				}
+
+				const finalX = parseInt( previewWindow.style.left ) + 200;
+				const finalY = parseInt( previewWindow.style.top ) + 20;
+
+				this.detachTab( tab, finalX, finalY );
+
+			} else if ( ! hasMoved ) {
+
+				this.setActiveTab( tab.id );
+
+				if ( previewWindow && previewWindow.parentNode ) {
+
+					previewWindow.parentNode.removeChild( previewWindow );
+
+				}
+
+			} else if ( previewWindow ) {
+
+				if ( previewWindow.parentNode ) {
+
+					previewWindow.parentNode.removeChild( previewWindow );
+
+				}
+
+			}
+
+			tab.button.style.opacity = '';
+			tab.button.style.transform = '';
+			tab.button.style.cursor = '';
+			isDragging = false;
+			hasMoved = false;
+			previewWindow = null;
+
+			tab.button.removeEventListener( 'pointermove', onDragMove );
+			tab.button.removeEventListener( 'pointerup', onDragEnd );
+			tab.button.removeEventListener( 'pointercancel', onDragEnd );
+
+		};
+
+		tab.button.addEventListener( 'pointerdown', ( e ) => {
+
+			onDragStart( e );
+			tab.button.addEventListener( 'pointermove', onDragMove );
+			tab.button.addEventListener( 'pointerup', onDragEnd );
+			tab.button.addEventListener( 'pointercancel', onDragEnd );
+
+		} );
+
+		// Set cursor to grab for tabs that can be detached
+		tab.button.style.cursor = 'grab';
+
+	}
+
+	createPreviewWindow( tab, x, y ) {
+
+		const windowPanel = document.createElement( 'div' );
+		windowPanel.className = 'detached-tab-panel';
+		windowPanel.style.left = `${ x - 200 }px`;
+		windowPanel.style.top = `${ y - 20 }px`;
+		windowPanel.style.pointerEvents = 'none'; // Preview only
+
+		// Set z-index for preview window to be on top
+		this.maxZIndex ++;
+		windowPanel.style.setProperty( 'z-index', this.maxZIndex, 'important' );
+
+		const windowHeader = document.createElement( 'div' );
+		windowHeader.className = 'detached-tab-header';
+
+		const title = document.createElement( 'span' );
+		title.textContent = tab.button.textContent.replace( '⇱', '' ).trim();
+		windowHeader.appendChild( title );
+
+		const headerControls = document.createElement( 'div' );
+		headerControls.className = 'detached-header-controls';
+
+		const reattachBtn = document.createElement( 'button' );
+		reattachBtn.className = 'detached-reattach-btn';
+		reattachBtn.innerHTML = '↩';
+		headerControls.appendChild( reattachBtn );
+		windowHeader.appendChild( headerControls );
+
+		const windowContent = document.createElement( 'div' );
+		windowContent.className = 'detached-tab-content';
+
+		const resizer = document.createElement( 'div' );
+		resizer.className = 'detached-tab-resizer';
+
+		windowPanel.appendChild( resizer );
+		windowPanel.appendChild( windowHeader );
+		windowPanel.appendChild( windowContent );
+
+		document.body.appendChild( windowPanel );
+
+		return windowPanel;
+
+	}
+
+	detachTab( tab, x, y ) {
+
+		if ( tab.isDetached ) return;
+
+		// Check if tab allows detachment
+		if ( tab.allowDetach === false ) return;
+
+		const allButtons = Array.from( this.tabsContainer.children );
+
+		const tabIdsInOrder = allButtons.map( btn => {
+
+			return Object.keys( this.tabs ).find( id => this.tabs[ id ].button === btn );
+
+		} ).filter( id => id !== undefined );
+
+		const currentIndex = tabIdsInOrder.indexOf( tab.id );
+
+		let newActiveTab = null;
+
+		if ( this.activeTabId === tab.id ) {
+
+			tab.setActive( false );
+
+			const remainingTabs = tabIdsInOrder.filter( id =>
+				id !== tab.id &&
+				! this.tabs[ id ].isDetached &&
+				this.tabs[ id ].isVisible
+			);
+
+			if ( remainingTabs.length > 0 ) {
+
+				for ( let i = currentIndex - 1; i >= 0; i -- ) {
+
+					if ( remainingTabs.includes( tabIdsInOrder[ i ] ) ) {
+
+						newActiveTab = tabIdsInOrder[ i ];
+						break;
+
+					}
+
+				}
+
+				if ( ! newActiveTab ) {
+
+					for ( let i = currentIndex + 1; i < tabIdsInOrder.length; i ++ ) {
+
+						if ( remainingTabs.includes( tabIdsInOrder[ i ] ) ) {
+
+							newActiveTab = tabIdsInOrder[ i ];
+							break;
+
+						}
+
+					}
+
+				}
+
+				if ( ! newActiveTab ) {
+
+					newActiveTab = remainingTabs[ 0 ];
+
+				}
+
+			}
+
+		}
+
+		if ( tab.button.parentNode ) {
+
+			tab.button.parentNode.removeChild( tab.button );
+
+		}
+
+		if ( tab.content.parentNode ) {
+
+			tab.content.parentNode.removeChild( tab.content );
+
+		}
+
+		const detachedWindow = this.createDetachedWindow( tab, x, y );
+		this.detachedWindows.push( detachedWindow );
+
+		tab.isDetached = true;
+		tab.detachedWindow = detachedWindow;
+
+		if ( newActiveTab ) {
+
+			this.setActiveTab( newActiveTab );
+
+		} else if ( this.activeTabId === tab.id ) {
+
+			this.activeTabId = null;
+
+		}
+
+		// Update panel size after detaching
+		this.updatePanelSize();
+
+		this.saveLayout();
+
+	}
+
+	createDetachedWindow( tab, x, y ) {
+
+		// Constrain initial position to window bounds
+		const windowWidth = window.innerWidth;
+		const windowHeight = window.innerHeight;
+		const estimatedWidth = 400; // Default detached window width
+		const estimatedHeight = 300; // Default detached window height
+
+		let constrainedX = x - 200;
+		let constrainedY = y - 20;
+
+		if ( constrainedX + estimatedWidth > windowWidth ) {
+
+			constrainedX = windowWidth - estimatedWidth;
+
+		}
+
+		if ( constrainedX < 0 ) {
+
+			constrainedX = 0;
+
+		}
+
+		if ( constrainedY + estimatedHeight > windowHeight ) {
+
+			constrainedY = windowHeight - estimatedHeight;
+
+		}
+
+		if ( constrainedY < 0 ) {
+
+			constrainedY = 0;
+
+		}
+
+		const windowPanel = document.createElement( 'div' );
+		windowPanel.className = 'detached-tab-panel';
+		windowPanel.style.left = `${ constrainedX }px`;
+		windowPanel.style.top = `${ constrainedY }px`;
+
+		if ( ! this.panel.classList.contains( 'visible' ) ) {
+
+			windowPanel.style.opacity = '0';
+			windowPanel.style.visibility = 'hidden';
+			windowPanel.style.pointerEvents = 'none';
+
+		}
+
+		// Hide detached window if tab is not visible
+		if ( ! tab.isVisible ) {
+
+			windowPanel.style.display = 'none';
+
+		}
+
+		const windowHeader = document.createElement( 'div' );
+		windowHeader.className = 'detached-tab-header';
+
+		const title = document.createElement( 'span' );
+		title.textContent = tab.button.textContent.replace( '⇱', '' ).trim();
+		windowHeader.appendChild( title );
+
+		const headerControls = document.createElement( 'div' );
+		headerControls.className = 'detached-header-controls';
+
+		const reattachBtn = document.createElement( 'button' );
+		reattachBtn.className = 'detached-reattach-btn';
+		reattachBtn.innerHTML = '↩';
+		reattachBtn.title = 'Reattach to main panel';
+		reattachBtn.onclick = () => this.reattachTab( tab );
+
+		headerControls.appendChild( reattachBtn );
+		windowHeader.appendChild( headerControls );
+
+		const windowContent = document.createElement( 'div' );
+		windowContent.className = 'detached-tab-content';
+		windowContent.appendChild( tab.content );
+
+		// Make sure content is visible
+		tab.content.style.display = 'block';
+		tab.content.classList.add( 'active' );
+
+		// Create resize handles for all edges
+		const resizerTop = document.createElement( 'div' );
+		resizerTop.className = 'detached-tab-resizer-top';
+
+		const resizerRight = document.createElement( 'div' );
+		resizerRight.className = 'detached-tab-resizer-right';
+
+		const resizerBottom = document.createElement( 'div' );
+		resizerBottom.className = 'detached-tab-resizer-bottom';
+
+		const resizerLeft = document.createElement( 'div' );
+		resizerLeft.className = 'detached-tab-resizer-left';
+
+		const resizerCorner = document.createElement( 'div' );
+		resizerCorner.className = 'detached-tab-resizer';
+
+		windowPanel.appendChild( resizerTop );
+		windowPanel.appendChild( resizerRight );
+		windowPanel.appendChild( resizerBottom );
+		windowPanel.appendChild( resizerLeft );
+		windowPanel.appendChild( resizerCorner );
+		windowPanel.appendChild( windowHeader );
+		windowPanel.appendChild( windowContent );
+
+		document.body.appendChild( windowPanel );
+
+		// Setup window dragging
+		this.setupDetachedWindowDrag( windowPanel, windowHeader, tab );
+
+		// Setup window resizing
+		this.setupDetachedWindowResize( windowPanel, resizerTop, resizerRight, resizerBottom, resizerLeft, resizerCorner );
+
+		// Use the same z-index that was set on the preview window
+		windowPanel.style.setProperty( 'z-index', this.maxZIndex, 'important' );
+
+		return { panel: windowPanel, tab: tab };
+
+	}
+
+	bringWindowToFront( windowPanel ) {
+
+		// Increment the max z-index and apply it to the clicked window
+		this.maxZIndex ++;
+		windowPanel.style.setProperty( 'z-index', this.maxZIndex, 'important' );
+
+	}
+
+	setupDetachedWindowDrag( windowPanel, header, tab ) {
+
+		let isDragging = false;
+		let startX, startY, startLeft, startTop;
+
+		// Bring window to front when clicking anywhere on it
+		windowPanel.addEventListener( 'pointerdown', () => {
+
+			this.bringWindowToFront( windowPanel );
+
+		} );
+
+		const onDragStart = ( e ) => {
+
+			if ( e.target.classList.contains( 'detached-reattach-btn' ) ) {
+
+				return;
+
+			}
+
+			// Bring window to front when starting to drag
+			this.bringWindowToFront( windowPanel );
+
+			isDragging = true;
+			header.style.cursor = 'grabbing';
+			header.setPointerCapture( e.pointerId );
+
+			startX = e.clientX;
+			startY = e.clientY;
+
+			const rect = windowPanel.getBoundingClientRect();
+			startLeft = rect.left;
+			startTop = rect.top;
+
+		};
+
+		const onDragMove = ( e ) => {
+
+			if ( ! isDragging ) return;
+
+			e.preventDefault();
+
+			const currentX = e.clientX;
+			const currentY = e.clientY;
+
+			const deltaX = currentX - startX;
+			const deltaY = currentY - startY;
+
+			let newLeft = startLeft + deltaX;
+			let newTop = startTop + deltaY;
+
+			// Constrain to window bounds (allow half width/height to extend outside)
+			const windowWidth = window.innerWidth;
+			const windowHeight = window.innerHeight;
+			const panelWidth = windowPanel.offsetWidth;
+			const panelHeight = windowPanel.offsetHeight;
+			const halfWidth = panelWidth / 2;
+			const halfHeight = panelHeight / 2;
+
+			// Allow window to extend half its width beyond right edge
+			if ( newLeft + panelWidth > windowWidth + halfWidth ) {
+
+				newLeft = windowWidth + halfWidth - panelWidth;
+
+			}
+
+			// Allow window to extend half its width beyond left edge
+			if ( newLeft < - halfWidth ) {
+
+				newLeft = - halfWidth;
+
+			}
+
+			// Allow window to extend half its height beyond bottom edge
+			if ( newTop + panelHeight > windowHeight + halfHeight ) {
+
+				newTop = windowHeight + halfHeight - panelHeight;
+
+			}
+
+			// Allow window to extend half its height beyond top edge
+			if ( newTop < - halfHeight ) {
+
+				newTop = - halfHeight;
+
+			}
+
+			windowPanel.style.left = `${ newLeft }px`;
+			windowPanel.style.top = `${ newTop }px`;
+
+			// Check if cursor is over the inspector panel
+			const panelRect = this.panel.getBoundingClientRect();
+			const isOverPanel = currentX >= panelRect.left && currentX <= panelRect.right &&
+								currentY >= panelRect.top && currentY <= panelRect.bottom;
+
+			if ( isOverPanel ) {
+
+				windowPanel.style.opacity = '0.5';
+				this.panel.style.outline = '2px solid var(--accent-color)';
+
+			} else {
+
+				windowPanel.style.opacity = '';
+				this.panel.style.outline = '';
+
+			}
+
+		};
+
+		const onDragEnd = ( e ) => {
+
+			if ( ! isDragging ) return;
+
+			isDragging = false;
+			header.style.cursor = '';
+			windowPanel.style.opacity = '';
+			this.panel.style.outline = '';
+
+			// Check if dropped over the inspector panel
+			const currentX = e.clientX;
+			const currentY = e.clientY;
+
+			if ( currentX !== undefined && currentY !== undefined ) {
+
+				const panelRect = this.panel.getBoundingClientRect();
+				const isOverPanel = currentX >= panelRect.left && currentX <= panelRect.right &&
+									currentY >= panelRect.top && currentY <= panelRect.bottom;
+
+				if ( isOverPanel && tab ) {
+
+					// Reattach the tab
+					this.reattachTab( tab );
+
+				} else {
+
+					// Save layout after moving detached window
+					this.saveLayout();
+
+				}
+
+			}
+
+			header.removeEventListener( 'pointermove', onDragMove );
+			header.removeEventListener( 'pointerup', onDragEnd );
+			header.removeEventListener( 'pointercancel', onDragEnd );
+
+		};
+
+		header.addEventListener( 'pointerdown', ( e ) => {
+
+			onDragStart( e );
+			header.addEventListener( 'pointermove', onDragMove );
+			header.addEventListener( 'pointerup', onDragEnd );
+			header.addEventListener( 'pointercancel', onDragEnd );
+
+		} );
+
+		header.style.cursor = 'grab';
+
+	}
+
+	setupDetachedWindowResize( windowPanel, resizerTop, resizerRight, resizerBottom, resizerLeft, resizerCorner ) {
+
+		const minWidth = 250;
+		const minHeight = 150;
+
+		const setupResizer = ( resizer, direction ) => {
+
+			let isResizing = false;
+			let startX, startY, startWidth, startHeight, startLeft, startTop;
+
+			const onResizeStart = ( e ) => {
+
+				e.preventDefault();
+				e.stopPropagation();
+				isResizing = true;
+
+				// Bring window to front when resizing
+				this.bringWindowToFront( windowPanel );
+
+				resizer.setPointerCapture( e.pointerId );
+
+				startX = e.clientX;
+				startY = e.clientY;
+				startWidth = windowPanel.offsetWidth;
+				startHeight = windowPanel.offsetHeight;
+				startLeft = windowPanel.offsetLeft;
+				startTop = windowPanel.offsetTop;
+
+			};
+
+			const onResizeMove = ( e ) => {
+
+				if ( ! isResizing ) return;
+
+				e.preventDefault();
+
+				const currentX = e.clientX;
+				const currentY = e.clientY;
+
+				const deltaX = currentX - startX;
+				const deltaY = currentY - startY;
+
+				const windowWidth = window.innerWidth;
+				const windowHeight = window.innerHeight;
+
+				if ( direction === 'right' || direction === 'corner' ) {
+
+					const newWidth = startWidth + deltaX;
+					const maxWidth = windowWidth - startLeft;
+
+					if ( newWidth >= minWidth && newWidth <= maxWidth ) {
+
+						windowPanel.style.width = `${ newWidth }px`;
+
+					}
+
+				}
+
+				if ( direction === 'bottom' || direction === 'corner' ) {
+
+					const newHeight = startHeight + deltaY;
+					const maxHeight = windowHeight - startTop;
+
+					if ( newHeight >= minHeight && newHeight <= maxHeight ) {
+
+						windowPanel.style.height = `${ newHeight }px`;
+
+					}
+
+				}
+
+				if ( direction === 'left' ) {
+
+					const newWidth = startWidth - deltaX;
+					const maxLeft = startLeft + startWidth - minWidth;
+
+					if ( newWidth >= minWidth ) {
+
+						const newLeft = startLeft + deltaX;
+
+						if ( newLeft >= 0 && newLeft <= maxLeft ) {
+
+							windowPanel.style.width = `${ newWidth }px`;
+							windowPanel.style.left = `${ newLeft }px`;
+
+						}
+
+					}
+
+				}
+
+				if ( direction === 'top' ) {
+
+					const newHeight = startHeight - deltaY;
+					const maxTop = startTop + startHeight - minHeight;
+
+					if ( newHeight >= minHeight ) {
+
+						const newTop = startTop + deltaY;
+
+						if ( newTop >= 0 && newTop <= maxTop ) {
+
+							windowPanel.style.height = `${ newHeight }px`;
+							windowPanel.style.top = `${ newTop }px`;
+
+						}
+
+					}
+
+				}
+
+			};
+
+			const onResizeEnd = () => {
+
+				isResizing = false;
+
+				resizer.removeEventListener( 'pointermove', onResizeMove );
+				resizer.removeEventListener( 'pointerup', onResizeEnd );
+				resizer.removeEventListener( 'pointercancel', onResizeEnd );
+
+				// Save layout after resizing detached window
+				this.saveLayout();
+
+			};
+
+			resizer.addEventListener( 'pointerdown', ( e ) => {
+
+				onResizeStart( e );
+				resizer.addEventListener( 'pointermove', onResizeMove );
+				resizer.addEventListener( 'pointerup', onResizeEnd );
+				resizer.addEventListener( 'pointercancel', onResizeEnd );
+
+			} );
+
+		};
+
+		// Setup all resizers
+		setupResizer( resizerTop, 'top' );
+		setupResizer( resizerRight, 'right' );
+		setupResizer( resizerBottom, 'bottom' );
+		setupResizer( resizerLeft, 'left' );
+		setupResizer( resizerCorner, 'corner' );
+
+	}
+
+	reattachTab( tab ) {
+
+		if ( ! tab.isDetached ) return;
+
+		if ( tab.detachedWindow ) {
+
+			const index = this.detachedWindows.indexOf( tab.detachedWindow );
+
+			if ( index > - 1 ) {
+
+				this.detachedWindows.splice( index, 1 );
+
+			}
+
+			if ( tab.detachedWindow.panel.parentNode ) {
+
+				tab.detachedWindow.panel.parentNode.removeChild( tab.detachedWindow.panel );
+
+			}
+
+			tab.detachedWindow = null;
+
+		}
+
+		tab.isDetached = false;
+
+		// Get all tabs and sort by their original index to determine the correct order
+		const allTabs = Object.values( this.tabs );
+		const allTabsSorted = allTabs
+			.filter( t => t.originalIndex !== undefined && t.isVisible )
+			.sort( ( a, b ) => a.originalIndex - b.originalIndex );
+
+		// Get currently attached tab buttons
+		const currentButtons = Array.from( this.tabsContainer.children );
+
+		// Find the correct position for this tab
+		let insertIndex = 0;
+		for ( const t of allTabsSorted ) {
+
+			if ( t.id === tab.id ) {
+
+				break;
+
+			}
+
+			// Count only non-detached tabs that come before this one
+			if ( ! t.isDetached ) {
+
+				insertIndex ++;
+
+			}
+
+		}
+
+		// Insert the button at the correct position
+		if ( insertIndex >= currentButtons.length || currentButtons.length === 0 ) {
+
+			// If insert index is beyond current buttons, or no buttons exist, append at the end
+			this.tabsContainer.appendChild( tab.button );
+
+		} else {
+
+			// Insert before the button at the insert index
+			this.tabsContainer.insertBefore( tab.button, currentButtons[ insertIndex ] );
+
+		}
+
+		this.contentWrapper.appendChild( tab.content );
+
+		this.setActiveTab( tab.id );
+
+		// Update panel size after reattaching
+		this.updatePanelSize();
+
+		this.saveLayout();
+
+	}
+
+	setActiveTab( id ) {
+
+		if ( this.activeTabId && this.tabs[ this.activeTabId ] && ! this.tabs[ this.activeTabId ].isDetached ) {
+
+			this.tabs[ this.activeTabId ].setActive( false );
+
+		}
+
+		this.activeTabId = id;
+
+		if ( this.tabs[ id ] ) {
+
+			this.tabs[ id ].setActive( true );
+
+		}
+
+	}
+
+	togglePanel() {
+
+		this.panel.classList.toggle( 'visible' );
+		this.toggleButton.classList.toggle( 'hidden' );
+
+		const isVisible = this.panel.classList.contains( 'visible' );
+
+		if ( isVisible ) {
+
+			// Save mini-panel state before hiding
+			this.savedMiniPanelState = {
+				isVisible: this.miniPanel.classList.contains( 'visible' ),
+				activeTabId: null,
+				contentMap: {}
+			};
+
+			// Find which tab was active in mini-panel
+			this.miniPanel.querySelectorAll( '.mini-panel-content' ).forEach( content => {
+
+				if ( content.style.display !== 'none' && content.firstChild ) {
+
+					// Find the tab that owns this content
+					Object.values( this.tabs ).forEach( tab => {
+
+						if ( tab.miniContent === content ) {
+
+							this.savedMiniPanelState.activeTabId = tab.id;
+							// Move content back to main panel
+							tab.content.appendChild( content.firstChild );
+
+						}
+
+					} );
+
+				}
+
+			} );
+
+			// Hide mini-panel temporarily
+			this.miniPanel.classList.remove( 'visible' );
+
+			// Hide all mini-panel contents
+			this.miniPanel.querySelectorAll( '.mini-panel-content' ).forEach( content => {
+
+				content.style.display = 'none';
+
+			} );
+
+			// Remove active state from builtin buttons
+			this.builtinTabsContainer.querySelectorAll( '.builtin-tab-btn' ).forEach( btn => {
+
+				btn.classList.remove( 'active' );
+
+			} );
+
+		} else {
+
+			// Restore mini-panel state when minimizing
+			if ( this.savedMiniPanelState && this.savedMiniPanelState.isVisible && this.savedMiniPanelState.activeTabId ) {
+
+				const tab = this.tabs[ this.savedMiniPanelState.activeTabId ];
+
+				if ( tab && tab.miniContent && tab.builtinButton ) {
+
+					// Restore mini-panel visibility
+					this.miniPanel.classList.add( 'visible' );
+					tab.miniContent.style.display = 'block';
+					tab.builtinButton.classList.add( 'active' );
+
+					// Move content back to mini-panel
+					const actualContent = tab.content.querySelector( '.list-scroll-wrapper, .profiler-content > *' );
+
+					if ( actualContent ) {
+
+						tab.miniContent.appendChild( actualContent );
+
+					}
+
+				}
+
+			}
+
+		}
+
+		this.detachedWindows.forEach( detachedWindow => {
+
+			if ( isVisible ) {
+
+				detachedWindow.panel.style.opacity = '';
+				detachedWindow.panel.style.visibility = '';
+				detachedWindow.panel.style.pointerEvents = '';
+
+			} else {
+
+				detachedWindow.panel.style.opacity = '0';
+				detachedWindow.panel.style.visibility = 'hidden';
+				detachedWindow.panel.style.pointerEvents = 'none';
+
+			}
+
+		} );
+
+	}
+
+	togglePosition() {
+
+		const newPosition = this.position === 'bottom' ? 'right' : 'bottom';
+		this.setPosition( newPosition );
+
+	}
+
+	setPosition( targetPosition ) {
+
+		if ( this.position === targetPosition ) return;
+
+		this.panel.style.transition = 'none';
+
+		// Check if panel is currently maximized
+		const isMaximized = this.panel.classList.contains( 'maximized' );
+
+		if ( targetPosition === 'right' ) {
+
+			this.position = 'right';
+			this.floatingBtn.classList.add( 'active' );
+			this.floatingBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><path d="M3 15h18"></path></svg>';
+			this.floatingBtn.title = 'Switch to Bottom';
+
+			// Apply right position styles
+			this.panel.classList.remove( 'position-bottom' );
+			this.panel.classList.add( 'position-right' );
+			this.panel.style.bottom = '';
+			this.panel.style.top = '0';
+			this.panel.style.right = '0';
+			this.panel.style.left = '';
+
+			// Apply size based on maximized state
+			if ( isMaximized ) {
+
+				this.panel.style.width = '100vw';
+				this.panel.style.height = '100%';
+
+			} else {
+
+				this.panel.style.width = `${ this.lastWidthRight }px`;
+				this.panel.style.height = '100%';
+
+			}
+
+		} else {
+
+			this.position = 'bottom';
+			this.floatingBtn.classList.remove( 'active' );
+			this.floatingBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="21"></line></svg>';
+			this.floatingBtn.title = 'Switch to Right Side';
+
+			// Apply bottom position styles
+			this.panel.classList.remove( 'position-right' );
+			this.panel.classList.add( 'position-bottom' );
+			this.panel.style.top = '';
+			this.panel.style.right = '';
+			this.panel.style.bottom = '0';
+			this.panel.style.left = '0';
+
+			// Apply size based on maximized state
+			if ( isMaximized ) {
+
+				this.panel.style.width = '100%';
+				this.panel.style.height = '100vh';
+
+			} else {
+
+				this.panel.style.width = '100%';
+				this.panel.style.height = `${ this.lastHeightBottom }px`;
+
+			}
+
+		}
+
+		// Re-enable transition after a brief delay
+		setTimeout( () => {
+
+			this.panel.style.transition = '';
+
+		}, 50 );
+
+		// Update panel size based on visible tabs
+		this.updatePanelSize();
+
+		// Save layout after position change
+		this.saveLayout();
+
+	}
+
+	saveLayout() {
+
+		const layout = {
+			position: this.position,
+			lastHeightBottom: this.lastHeightBottom,
+			lastWidthRight: this.lastWidthRight,
+			activeTabId: this.activeTabId,
+			detachedTabs: []
+		};
+
+		// Save detached windows state
+		this.detachedWindows.forEach( detachedWindow => {
+
+			const tab = detachedWindow.tab;
+			const panel = detachedWindow.panel;
+
+			// Get position values, ensuring they're valid numbers
+			const left = parseFloat( panel.style.left ) || panel.offsetLeft || 0;
+			const top = parseFloat( panel.style.top ) || panel.offsetTop || 0;
+			const width = panel.offsetWidth;
+			const height = panel.offsetHeight;
+
+			layout.detachedTabs.push( {
+				tabId: tab.id,
+				originalIndex: tab.originalIndex !== undefined ? tab.originalIndex : 0,
+				left: left,
+				top: top,
+				width: width,
+				height: height
+			} );
+
+		} );
+
+		try {
+
+			localStorage.setItem( 'profiler-layout', JSON.stringify( layout ) );
+
+		} catch ( e ) {
+
+			console.warn( 'Failed to save profiler layout:', e );
+
+		}
+
+	}
+
+	loadLayout() {
+
+		try {
+
+			const savedLayout = localStorage.getItem( 'profiler-layout' );
+
+			if ( ! savedLayout ) return;
+
+			const layout = JSON.parse( savedLayout );
+
+			// Constrain detached tabs positions to current screen bounds
+			if ( layout.detachedTabs && layout.detachedTabs.length > 0 ) {
+
+				const windowWidth = window.innerWidth;
+				const windowHeight = window.innerHeight;
+
+				layout.detachedTabs = layout.detachedTabs.map( detachedTabData => {
+
+					let { left, top, width, height } = detachedTabData;
+
+					// Ensure width and height are within bounds
+					if ( width > windowWidth ) {
+
+						width = windowWidth - 100; // Leave some margin
+
+					}
+
+					if ( height > windowHeight ) {
+
+						height = windowHeight - 100; // Leave some margin
+
+					}
+
+					// Allow window to extend half its width/height outside the screen
+					const halfWidth = width / 2;
+					const halfHeight = height / 2;
+
+					// Constrain horizontal position (allow half width to extend beyond right edge)
+					if ( left + width > windowWidth + halfWidth ) {
+
+						left = windowWidth + halfWidth - width;
+
+					}
+
+					// Constrain horizontal position (allow half width to extend beyond left edge)
+					if ( left < - halfWidth ) {
+
+						left = - halfWidth;
+
+					}
+
+					// Constrain vertical position (allow half height to extend beyond bottom edge)
+					if ( top + height > windowHeight + halfHeight ) {
+
+						top = windowHeight + halfHeight - height;
+
+					}
+
+					// Constrain vertical position (allow half height to extend beyond top edge)
+					if ( top < - halfHeight ) {
+
+						top = - halfHeight;
+
+					}
+
+					return {
+						...detachedTabData,
+						left,
+						top,
+						width,
+						height
+					};
+
+				} );
+
+			}
+
+			// Restore position and dimensions
+			if ( layout.position ) {
+
+				this.position = layout.position;
+
+			}
+
+			if ( layout.lastHeightBottom ) {
+
+				this.lastHeightBottom = layout.lastHeightBottom;
+
+			}
+
+			if ( layout.lastWidthRight ) {
+
+				this.lastWidthRight = layout.lastWidthRight;
+
+			}
+
+			// Constrain saved dimensions to current screen bounds
+			const windowWidth = window.innerWidth;
+			const windowHeight = window.innerHeight;
+
+			if ( this.lastHeightBottom > windowHeight - 50 ) {
+
+				this.lastHeightBottom = windowHeight - 50;
+
+			}
+
+			if ( this.lastWidthRight > windowWidth - 50 ) {
+
+				this.lastWidthRight = windowWidth - 50;
+
+			}
+
+			// Apply the saved position after shell is set up
+			if ( this.position === 'right' ) {
+
+				this.floatingBtn.classList.add( 'active' );
+				this.floatingBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><path d="M3 15h18"></path></svg>';
+				this.floatingBtn.title = 'Switch to Bottom';
+
+				this.panel.classList.remove( 'position-bottom' );
+				this.panel.classList.add( 'position-right' );
+				this.panel.style.bottom = '';
+				this.panel.style.top = '0';
+				this.panel.style.right = '0';
+				this.panel.style.left = '';
+				this.panel.style.width = `${ this.lastWidthRight }px`;
+				this.panel.style.height = '100%';
+
+			} else {
+
+				this.panel.style.height = `${ this.lastHeightBottom }px`;
+
+			}
+
+			if ( layout.activeTabId ) {
+
+				const willBeDetached = layout.detachedTabs &&
+					layout.detachedTabs.some( dt => dt.tabId === layout.activeTabId );
+
+				if ( willBeDetached ) {
+
+					this.setActiveTab( layout.activeTabId );
+
+				}
+
+			}
+
+			if ( layout.detachedTabs && layout.detachedTabs.length > 0 ) {
+
+				this.pendingDetachedTabs = layout.detachedTabs;
+				this.restoreDetachedTabs();
+
+			}
+
+			// Update panel size after loading layout
+			this.updatePanelSize();
+
+		} catch ( e ) {
+
+			console.warn( 'Failed to load profiler layout:', e );
+
+		}
+
+	}
+
+	restoreDetachedTabs() {
+
+		if ( ! this.pendingDetachedTabs || this.pendingDetachedTabs.length === 0 ) return;
+
+		this.pendingDetachedTabs.forEach( detachedTabData => {
+
+			const tab = this.tabs[ detachedTabData.tabId ];
+
+			if ( ! tab || tab.isDetached ) return;
+
+			// Restore originalIndex if saved
+			if ( detachedTabData.originalIndex !== undefined ) {
+
+				tab.originalIndex = detachedTabData.originalIndex;
+
+			}
+
+			if ( tab.button.parentNode ) {
+
+				tab.button.parentNode.removeChild( tab.button );
+
+			}
+
+			if ( tab.content.parentNode ) {
+
+				tab.content.parentNode.removeChild( tab.content );
+
+			}
+
+			const detachedWindow = this.createDetachedWindow( tab, 0, 0 );
+
+			detachedWindow.panel.style.left = `${ detachedTabData.left }px`;
+			detachedWindow.panel.style.top = `${ detachedTabData.top }px`;
+			detachedWindow.panel.style.width = `${ detachedTabData.width }px`;
+			detachedWindow.panel.style.height = `${ detachedTabData.height }px`;
+
+			// Constrain window to bounds after restoring position and size
+			this.constrainWindowToBounds( detachedWindow.panel );
+
+			this.detachedWindows.push( detachedWindow );
+
+			tab.isDetached = true;
+			tab.detachedWindow = detachedWindow;
+
+		} );
+
+		this.pendingDetachedTabs = null;
+
+		// Update maxZIndex to be higher than all existing windows
+		this.detachedWindows.forEach( detachedWindow => {
+
+			const currentZIndex = parseInt( getComputedStyle( detachedWindow.panel ).zIndex ) || 0;
+			if ( currentZIndex > this.maxZIndex ) {
+
+				this.maxZIndex = currentZIndex;
+
+			}
+
+		} );
+
+		const needsNewActiveTab = ! this.activeTabId ||
+			! this.tabs[ this.activeTabId ] ||
+			this.tabs[ this.activeTabId ].isDetached ||
+			! this.tabs[ this.activeTabId ].isVisible;
+
+		if ( needsNewActiveTab ) {
+
+			const tabIds = Object.keys( this.tabs );
+			const availableTabs = tabIds.filter( id =>
+				! this.tabs[ id ].isDetached &&
+				this.tabs[ id ].isVisible
+			);
+
+			if ( availableTabs.length > 0 ) {
+
+				const buttons = Array.from( this.tabsContainer.children );
+				const orderedTabIds = buttons.map( btn => {
+
+					return Object.keys( this.tabs ).find( id => this.tabs[ id ].button === btn );
+
+				} ).filter( id =>
+					id !== undefined &&
+					! this.tabs[ id ].isDetached &&
+					this.tabs[ id ].isVisible
+				);
+
+				this.setActiveTab( orderedTabIds[ 0 ] || availableTabs[ 0 ] );
+
+			} else {
+
+				this.activeTabId = null;
+
+			}
+
+		}
+
+		// Update panel size after restoring detached tabs
+		this.updatePanelSize();
 
 	}