<div class="layout-container" data-component-id="{component.id}">
    <!-- Header Slot (Optional) -->
    <slot name="header"></slot>

    <div class="layout-body">
        <!-- Sidebar Slot (Scoped) -->
        <!-- Parent can access: {context.sidebarWidth}, {context.isCollapsed} -->
        <slot name="sidebar">
            <aside class="sidebar-default">
                <p>Default Sidebar</p>
            </aside>
        </slot>

        <!-- Main Content Slot (Required) -->
        <slot name="main">
            <!-- This will cause validation error if not provided -->
        </slot>
    </div>

    <!-- Footer Slot (Optional) -->
    <slot name="footer">
        <footer class="layout-footer-default">
            <p>Default Footer</p>
        </footer>
    </slot>
</div>
