/**
 * App — root component composing the full shell tree
 *
 * ┌───────────────────────────────┐
 * │ AppShell (banners, layout)    │
 * │  └─ SurfaceViewport           │
 * ├───────────────────────────────┤
 * │ ToastContainer  (fixed z:10k) │
 * │ DialogStack     (fixed z:5k)  │
 * └───────────────────────────────┘
 *
 * ToastContainer and DialogStack live outside AppShell
 * so they float above all shell content.
 *
 * Props:
 *   banner   — { text, variant } or null
 *   message  — { text, variant } or null
 *   footer   — VNode or null
 *   surface  — VNode or null (active surface content)
 */
const { html } = window;

import { AppShell } from './app-shell.js';
import { SurfaceViewport } from './surface-viewport.js';
import { DialogStack } from './dialog-stack.js';
import { ToastContainer } from '../primitives/toast.js';

export function App({ banner, message, footer, surface }) {
    return html`
        <${AppShell} banner=${banner} message=${message} footer=${footer}>
            <${SurfaceViewport} surface=${surface} />
        <//>
        <${ToastContainer} />
        <${DialogStack} />
    `;
}
