Sidebar Try: 1) Drag splitters 2) Double-click a splitter to collapse 3) Reload page to see persistence Editor Controls: - Drag splitters to resize - Double-click a splitter to collapse the smaller side - Use header buttons to restore collapsed panels Notes: - Sidebar, Console, Inspector are fixed (pixel basis) - Editor is fluid (fills remaining space) - Sizes + collapsed state persist via localStorage Layout rule Each branch needs at least one fluid panel. Otherwise you get a gap on window resize. Persistence Stored in localStorage by id: panel-layout:main panel-layout:workspace Collapsed state Implemented via [collapsed] attribute. CSS collapses to 0 and disables pointer events. Smooth dragging Pointer Events + setPointerCapture() requestAnimationFrame() throttled writes Tip: Use meaningful IDs for persistence. Console [11:39:00] panel-layout initialized [11:39:04] drag end → panel-layout-changed Clipboard Clipboard history: 1. Copy "Hello World" 2. Copy function snippet 3. Cut CSS block Inspector Use this area for: - Properties - Logs - Feature inspect - Details panels