Sidebar Quick Start <link rel="stylesheet" href="panel-layout.css"> <script type="module"> import { initPanelLayout } from './panel-layout.js'; initPanelLayout(); </script> Editor Basic Structure <panel-branch-fc id="app" row> <panel-leaf-fc id="sidebar" fixed style="--panel-basis: 220px;"> Sidebar content </panel-leaf-fc> <panel-splitter-fc></panel-splitter-fc> <panel-leaf-fc id="main"> Main content (fluid) </panel-leaf-fc> </panel-branch-fc> Attributes row → horizontal column → vertical fixed → use --panel-basis (none) → fluid, fills space Toggle Buttons <button data-panel-toggle="sidebar"> Toggle Sidebar </button> Interactions • Drag splitter to resize • Double-click to collapse • Red = will snap closed • Persists to localStorage Events document.addEventListener( 'panel-layout-changed', () => console.log('!') ); Console Nested Layouts This panel is inside a nested branch: #bottom (row, fixed) <panel-branch-fc column> <panel-leaf-fc>Editor</> <panel-splitter-fc></> <panel-branch-fc row fixed style="--panel-basis:160px"> Console | Clipboard </panel-branch-fc> </panel-branch-fc> Clipboard CSS Variables Fixed panels use: --panel-basis: 200px; Splitter theming: --splitter-color: #444; --splitter-hover: blue; --danger: red; (snap) Inspector This Demo Structure #main (row) ├─ #sidebar (fixed) ├─ #workspace (column) │ ├─ #editor (fluid) │ └─ #bottom (row, fixed) │ ├─ #console (fluid) │ └─ #clipboard (fixed) └─ #inspector (fixed)