Made of little things.

import { html } from 'lit';
import { LightElement } from './light-element';
import './bs-toolbar';
import './bs-workspace';
import './bs-status';
import './bs-library-dialog';
import './bs-settings-dialog';
import './bs-shortcuts-dialog';
import './bs-help-dialog';
import './bs-confirm-dialog';
import './bs-publish-dialog';

/** Editor shell: minimum-size notice, toolbar, workspace, status line and dialogs. */
export class BsApp extends LightElement {
    render() {
        return html`<div class="minimum">
                <b>Enlarge your map workspace</b>
                <p>
                    Map editing needs at least 280 × 240 pixels. Expand this napplet or rotate your
                    phone. Your map stays open.
                </p>
            </div>
            <div class="app-shell">
                <bs-toolbar></bs-toolbar>
                <bs-workspace></bs-workspace>
                <bs-status></bs-status>
            </div>
            <bs-library-dialog></bs-library-dialog>
            <bs-settings-dialog></bs-settings-dialog>
            <bs-shortcuts-dialog></bs-shortcuts-dialog>
            <bs-help-dialog></bs-help-dialog>
            <bs-confirm-dialog></bs-confirm-dialog>
            <bs-publish-dialog></bs-publish-dialog>`;
    }
}
customElements.define('bs-app', BsApp);

/** Resolve once the shell and every nested component have rendered. */
export async function rendered(root: Element): Promise<void> {
    const pending = (element: Element) =>
        [...element.querySelectorAll('*')].filter(
            (child): child is LightElement => child instanceof LightElement,
        );
    if (root instanceof LightElement) await root.updateComplete;
    // Nested components connect during their parents' renders; settle until none are left.
    for (let seen = 0; ;) {
        const components = pending(root);
        await Promise.all(components.map((component) => component.updateComplete));
        if (components.length === seen) return;
        seen = components.length;
    }
}