@omicronenergy/oscd-shell 0.0.9 → 0.0.11

package/dist/oscd-shell.js

@@ -1,186 +1,86 @@
-var _OpenSCD_plugins, _OpenSCD_actions;
-import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
-import '@webcomponents/scoped-custom-element-registry';
-import { configureLocalization, localized, msg } from '@lit/localize';
+import { __decorate } from "tslib";
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { customElement, property, query, queryAssignedNodes, state, } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+import { localized, msg } from '@lit/localize';
 import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
-import '@omicronenergy/oscd-ui/app-bar/oscd-app-bar.js';
-import '@omicronenergy/oscd-ui/dialog/oscd-dialog.js';
-import '@omicronenergy/oscd-ui/divider/oscd-divider.js';
-import '@omicronenergy/oscd-ui/iconbutton/oscd-filled-icon-button.js';
-import '@omicronenergy/oscd-ui/select/oscd-filled-select.js';
-import '@omicronenergy/oscd-ui/textfield/oscd-filled-text-field.js';
-import '@omicronenergy/oscd-ui/icon/oscd-icon.js';
-import '@omicronenergy/oscd-ui/list/oscd-list.js';
-import '@omicronenergy/oscd-ui/list/oscd-list-item.js';
-import '@omicronenergy/oscd-ui/menu/oscd-menu.js';
-import '@omicronenergy/oscd-ui/menu/oscd-menu-item.js';
-import '@omicronenergy/oscd-ui/navigation-drawer/oscd-navigation-drawer.js';
-import '@omicronenergy/oscd-ui/navigation-drawer/oscd-navigation-drawer-header.js';
-import '@omicronenergy/oscd-ui/tabs/oscd-secondary-tab.js';
-import '@omicronenergy/oscd-ui/select/oscd-select-option.js';
-import '@omicronenergy/oscd-ui/tabs/oscd-tabs.js';
-import '@omicronenergy/oscd-ui/button/oscd-text-button.js';
+import { OscdFilledIconButton } from '@omicronenergy/oscd-ui/iconbutton/OscdFilledIconButton.js';
 import { XMLEditor } from '@omicronenergy/oscd-editor';
-import { sourceLocale, targetLocales } from './locales.js';
 import { loadSourcedPlugins } from './utils/plugin-utils.js';
-const _customElementsDefine = window.customElements.define;
-window.customElements.define = (name, cl, conf) => {
-    if (!customElements.get(name)) {
-        _customElementsDefine.call(window.customElements, name, cl, conf);
-    }
-};
-const { getLocale, setLocale } = configureLocalization({
-    sourceLocale,
-    targetLocales,
-    loadLocale: locale => import(new URL(`./locales/${locale}.js`, import.meta.url).href),
-});
-function renderActionItem(control, slot = 'actionItems') {
-    return html `<oscd-filled-icon-button
-    slot="${slot}"
-    aria-label="${control.getName()}"
-    ?disabled=${control.isDisabled()}
-    @click=${control.action}
-    ><oscd-icon>${control.icon}</oscd-icon></oscd-filled-icon-button
-  >`;
-}
-function renderMenuItem(control) {
-    return html `
-    <oscd-list-item
-      type="button"
-      .disabled=${control.isDisabled()}
-      @click=${control.action}
-    >
-      <oscd-icon slot="start">${control.icon}</oscd-icon>
-      <span>${control.getName()}</span>
-    </oscd-list-item>
-  `;
-}
-let OpenSCD = class OpenSCD extends LitElement {
-    isEditable(docName) {
-        return !!this.editable.find(ext => docName.toLowerCase().endsWith(`.${ext}`));
-    }
-    get editableDocs() {
-        return Object.keys(this.docs).filter(name => this.isEditable(name));
-    }
-    /** The set of `XMLDocument`s currently loaded */
-    get docs() {
-        return this._docs;
-    }
-    set docs(newDocs) {
-        this._docs = newDocs;
-        this.onDocsChanged();
-    }
-    onDocsChanged() {
-        this.docVersion += 1;
-    }
-    get doc() {
-        return this.docs[this.docName];
-    }
-    get last() {
-        return this.xmlEditor.past.length - 1;
-    }
-    get canUndo() {
-        return this.xmlEditor.past.length >= 0;
+import { getLocale, setLocale, } from './localization.js';
+import { EditorPluginsPanel } from './side-panel/editor-plugins-panel.js';
+import { PluginsMenu } from './menus/plugins-menu.js';
+import { LandingPage } from './landing-page/landing-page.js';
+import { FilesMenu } from './menus/files-menu.js';
+import { OscdAppBar } from '@omicronenergy/oscd-ui/app-bar/OscdAppBar.js';
+import { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';
+let OscdShell = class OscdShell extends ScopedElementsMixin(LitElement) {
+    get locale() {
+        return getLocale();
     }
-    get canRedo() {
-        return this.xmlEditor.future.length >= 0;
+    set locale(tag) {
+        try {
+            if (tag) {
+                setLocale(tag);
+            }
+        }
+        catch {
+            // don't change locale if tag is invalid
+        }
     }
     get plugins() {
-        return __classPrivateFieldGet(this, _OpenSCD_plugins, "f");
+        return this._plugins;
     }
     set plugins(plugins) {
-        __classPrivateFieldSet(this, _OpenSCD_plugins, Object.entries(plugins).reduce((acc, [pluginType, kind]) => {
-            const convertedPlugins = loadSourcedPlugins(kind);
+        this._plugins = Object.entries(plugins).reduce((acc, [pluginType, kind]) => {
+            const convertedPlugins = loadSourcedPlugins(kind, this.registry);
             acc[pluginType] = convertedPlugins;
             return acc;
-        }, { menu: [], editor: [], background: [] }), "f");
+        }, { menu: [], editor: [], background: [] });
     }
-    handleOpenDoc({ detail: { docName, doc } }) {
-        this.docs = {
-            ...this.docs,
-            [docName]: doc,
-        };
-        if (this.isEditable(docName)) {
-            this.docName = docName;
-        }
-        this.requestUpdate();
+    /*
+     * States
+     */
+    get canRedo() {
+        return this.xmlEditor.future.length >= 1;
     }
-    /** Undo the last `n` [[Edit]]s committed */
-    undo(n = 1) {
-        if (!this.canUndo || n < 1) {
-            return;
-        }
-        this.xmlEditor.undo();
-        if (n > 1) {
-            this.undo(n - 1);
-        }
-        this.requestUpdate();
+    get canUndo() {
+        return this.xmlEditor.past.length >= 1;
     }
-    /** Redo the last `n` [[Edit]]s that have been undone */
-    redo(n = 1) {
-        if (!this.canRedo || n < 1) {
-            return;
-        }
-        this.xmlEditor.redo();
-        if (n > 1) {
-            this.redo(n - 1);
-        }
-        this.requestUpdate();
+    get editor() {
+        return this.plugins.editor[this.editorIndex]?.tagName ?? '';
     }
-    get locale() {
-        return getLocale();
+    get doc() {
+        return this.docs[this.docName];
     }
-    set locale(tag) {
-        try {
-            setLocale(tag);
-        }
-        catch {
-            // don't change locale if tag is invalid
-        }
+    get docs() {
+        return this._docs;
     }
-    get editor() {
-        return this.editors[this.editorIndex]?.tagName ?? '';
-    }
-    get menu() {
-        return (this.plugins.menu
-            ?.map(({ name, tagName, requireDoc, icon, translations }) => ({
-            icon,
-            getName: () => translations?.[this.locale] ||
-                name,
-            isDisabled: () => (requireDoc && !this.docName) ?? false,
-            tagName,
-            action: () => {
-                if (tagName) {
-                    this.shadowRoot.querySelector(tagName).run?.();
-                    this.menuUI.opened = false;
-                }
-            },
-        }))
-            .filter(p => p !== undefined)).concat(__classPrivateFieldGet(this, _OpenSCD_actions, "f"));
-    }
-    get editors() {
-        return this.plugins.editor?.map(({ name, tagName, requireDoc, icon, translations, }) => ({
-            icon,
-            getName: () => translations?.[this.locale] ||
-                name,
-            isDisabled: () => (requireDoc && !this.docName) ?? false,
-            tagName,
-        }));
-    }
-    handleKeyPress(e) {
-        if (!e.ctrlKey) {
-            return;
-        }
-        if (!Object.prototype.hasOwnProperty.call(this.hotkeys, e.key)) {
-            return;
-        }
-        this.hotkeys[e.key]();
-        e.preventDefault();
+    set docs(newDocs) {
+        this._docs = newDocs;
+        this.onDocsChanged();
+    }
+    get editableDocs() {
+        return Object.keys(this.docs).filter(name => this.isEditable(name));
     }
+    get last() {
+        return this.xmlEditor.past.length - 1;
+    }
+    /*
+     * Constructor & life cycle methods
+     */
     constructor() {
         super();
+        /*
+         * Properties
+         */
+        /**
+         * Url to the app icon displayed in the app bar
+         */
+        this.appIcon = '';
+        this.appTitle = 'OpenSCD';
+        this.landingPageHeading = 'Welcome to OpenSCD';
+        this.landingPageSubHeading = 'Open Source IEC-61850-6 SCL Editing Platform';
         /** The file endings of editable files */
         this.editable = [
             'cid',
@@ -190,72 +90,129 @@ let OpenSCD = class OpenSCD extends LitElement {
             'sed',
             'ssd',
         ];
-        this._docs = {};
+        this._plugins = { menu: [], editor: [], background: [] };
+        this.editorIndex = 0;
         /** The name of the [[`doc`]] currently being edited */
         this.docName = '';
-        this.xmlEditor = new XMLEditor();
+        /** The set of `XMLDocument`s currently loaded */
+        this._docs = {};
         this.docVersion = -1;
-        _OpenSCD_plugins.set(this, { menu: [], editor: [], background: [] });
-        this.editorIndex = 0;
-        this.controls = {
-            undo: {
-                icon: 'undo',
-                getName: () => msg('Undo'),
-                action: () => {
-                    this.undo();
-                    this.menuUI.opened = false;
-                },
-                isDisabled: () => !this.canUndo,
-            },
-            redo: {
-                icon: 'redo',
-                getName: () => msg('Redo'),
-                action: () => {
-                    this.redo();
-                    this.menuUI.opened = false;
-                },
-                isDisabled: () => !this.canRedo,
-            },
-            menu: {
-                icon: 'menu',
-                getName: () => msg('Menu'),
-                action: async () => {
-                    this.menuUI.opened = !this.menuUI.opened;
-                    await this.menuUI.updateComplete;
-                    if (this.menuUI.opened) {
-                        this.menuUI.querySelector('oscd-list').focus();
-                    }
-                },
-                isDisabled: () => false,
-            },
+        this.xmlEditor = new XMLEditor();
+        /*
+         * Event Handlers
+         */
+        this.handleOpenDoc = ({ detail: { docName, doc } }) => {
+            this.docs = {
+                ...this.docs,
+                [docName]: doc,
+            };
+            if (this.isEditable(docName)) {
+                this.docName = docName;
+            }
+            this.requestUpdate();
         };
-        _OpenSCD_actions.set(this, [this.controls.undo, this.controls.redo]);
-        this.hotkeys = {
-            m: this.controls.menu.action,
-            z: this.controls.undo.action,
-            y: this.controls.redo.action,
-            Z: this.controls.redo.action,
+        this.handleRenameDoc = (customEvent) => {
+            const { oldName, newName } = customEvent.detail;
+            if (!this.docs[oldName] || newName === oldName || this.docs[newName]) {
+                return;
+            }
+            const doc = this.docs[oldName];
+            delete this.docs[oldName];
+            this.docs = {
+                ...this.docs,
+                [newName]: doc,
+            };
+            this.docName = newName;
         };
-        document.addEventListener('keydown', event => this.handleKeyPress(event));
-        this.addEventListener('oscd-open', event => this.handleOpenDoc(event));
-        this.addEventListener('oscd-edit-v2', (event) => {
+        this.handleEditV2 = (event) => {
             const { edit, title, squash } = event.detail;
             this.xmlEditor.commit(edit, { title, squash });
-        });
+        };
+        this.handleCloseDoc = (event) => {
+            const docName = event.detail.docName;
+            delete this.docs[docName];
+            if (this.docName === docName) {
+                this.docName = this.editableDocs[0] || '';
+            }
+        };
+        this.handleUndo = () => {
+            this.undo();
+        };
+        this.handleRedo = () => {
+            this.redo();
+        };
+        this.handleKeyPress = (e) => {
+            if (!e.ctrlKey) {
+                return;
+            }
+            if (!Object.prototype.hasOwnProperty.call(this.hotkeys, e.key)) {
+                return;
+            }
+            this.hotkeys[e.key].call(this);
+            e.preventDefault();
+        };
+        this.handleOpenPluginMenu = () => {
+            this.pluginsMenu.open();
+        };
+        /** Undo the last `n` [[Edit]]s committed */
+        this.undo = (n = 1) => {
+            if (!this.canUndo || n < 1) {
+                return;
+            }
+            this.xmlEditor.undo();
+            if (n > 1) {
+                this.undo(n - 1);
+            }
+            this.requestUpdate();
+        };
+        /** Redo the last `n` [[Edit]]s that have been undone */
+        this.redo = (n = 1) => {
+            if (!this.canRedo || n < 1) {
+                return;
+            }
+            this.xmlEditor.redo();
+            if (n > 1) {
+                this.redo(n - 1);
+            }
+            this.requestUpdate();
+        };
+        this.hotkeys = {
+            m: this.handleOpenPluginMenu,
+            z: this.undo,
+            y: this.redo,
+            Z: this.redo,
+        };
         // Catch all edits (from commits AND events) and trigger an update
         this.xmlEditor.subscribe(() => {
             this.docVersion += 1;
         });
     }
-    updated(changedProps) {
-        super.updated(changedProps);
-        this.updateComplete.then(() => {
-            // Ensure the active tab is set after tabs are rendered
-            const oscdTabs = this.shadowRoot.querySelector('oscd-tabs');
-            if (oscdTabs && oscdTabs.activeTabIndex !== this.editorIndex) {
-                oscdTabs.activeTabIndex = this.editorIndex;
-            }
-        });
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('keydown', this.handleKeyPress);
+        this.addEventListener('oscd-open', this.handleOpenDoc);
+        this.addEventListener('oscd-rename', this.handleRenameDoc);
+        this.addEventListener('oscd-close', this.handleCloseDoc);
+        this.addEventListener('oscd-edit-v2', this.handleEditV2);
+        this.addEventListener('oscd-undo', this.handleUndo);
+        this.addEventListener('oscd-redo', this.handleRedo);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Remove event listeners
+        document.removeEventListener('keydown', this.handleKeyPress);
+        this.removeEventListener('oscd-open', this.handleOpenDoc);
+        this.removeEventListener('oscd-rename', this.handleRenameDoc);
+        this.removeEventListener('oscd-edit-v2', this.handleEditV2);
+        this.removeEventListener('oscd-undo', this.handleUndo);
+        this.removeEventListener('oscd-redo', this.handleRedo);
+        this.removeEventListener('oscd-close', this.handleCloseDoc);
+    }
+    isEditable(docName) {
+        return !!this.editable.find(ext => docName.toLowerCase().endsWith(`.${ext}`));
+    }
+    onDocsChanged() {
+        this.docVersion += 1;
     }
     renderPlugin(tagName) {
         const tag = unsafeStatic(tagName);
@@ -269,251 +226,155 @@ let OpenSCD = class OpenSCD extends LitElement {
               .editor=${this.xmlEditor}>
             </${tag}>`;
     }
-    render() {
-        return html `<oscd-app-bar slot="appContent">
-        ${renderActionItem(this.controls.menu, 'actionStart')}
-        <div slot="title" id="title">
-          ${this.editableDocs.length > 1
-            ? html `<oscd-filled-icon-button
-                id="fileMenuButton"
-                @click=${() => this.fileMenuUI.show()}
-                ><oscd-icon>arrow_drop_down</oscd-icon></oscd-filled-icon-button
-              >`
-            : nothing}
-          ${this.docName}
-          ${this.docName
-            ? html `<oscd-filled-icon-button
-                @click=${() => this.editFileUI.show()}
-                ><oscd-icon>edit</oscd-icon></oscd-filled-icon-button
-              >`
-            : nothing}
-          <oscd-menu
-            fixed
-            id="fileMenu"
-            anchor="fileMenuButton"
-            corner="BOTTOM_END"
-          >
-            ${this.editableDocs.map((name, index) => html `<oscd-menu-item
-                  @click=${() => {
-            this.docName = name;
-        }}
-                  ?disabled=${!this.isEditable(name)}
-                  ?selected=${this.docName === name}
-                  id=${index}
-                  >${name}</oscd-menu-item
-                >`)}
-          </oscd-menu>
+    onMenuPluginSelect(customEvent) {
+        const plugin = customEvent.detail.plugin;
+        if (plugin.tagName) {
+            this.shadowRoot.querySelector(plugin.tagName).run?.();
+        }
+    }
+    renderOffScreenPlugins() {
+        return html `
+      <section class="off-screen-plugin-container" aria-hidden="true">
+        <div class="menu-plugins">
+          ${this.plugins.menu
+            .filter(plugin => !plugin.requireDoc || !!this.docName)
+            .map(plugin => this.renderPlugin(plugin.tagName))}
         </div>
-
-        <div slot="actionEnd">
-          ${__classPrivateFieldGet(this, _OpenSCD_actions, "f").map(op => renderActionItem(op))}
+        <div class="background-plugins">
+          ${this.plugins.background
+            .filter(plugin => !plugin.requireDoc || !!this.docName)
+            .map(plugin => this.renderPlugin(plugin.tagName))}
         </div>
-
-        <oscd-tabs
-          .activeTabIndex=${this.editorIndex}
+      </section>
+    `;
+    }
+    renderDefaultLandingPage() {
+        return html `
+      <landing-page
+        heading=${this.landingPageHeading}
+        subHeading=${this.landingPageSubHeading}
+        .menuPlugins=${this.plugins.menu.filter(plugin => !plugin.requireDoc || !!this.docName)}
+        .locale=${this.locale}
+        @menu-plugin-select=${(event) => this.onMenuPluginSelect(event)}
+      >
+      </landing-page>
+    `;
+    }
+    render() {
+        const hasCustomLandingPage = !!this._landingPageNodes?.length;
+        if (this.editableDocs.length === 0) {
+            return html ` <slot
+          name="landing-page"
+          @slotchange=${() => this.requestUpdate()}
+        ></slot>
+        ${!hasCustomLandingPage ? this.renderDefaultLandingPage() : nothing}
+        ${this.renderOffScreenPlugins()}`;
+        }
+        return html ` <oscd-app-bar>
+        <plugins-menu
+          slot="alignStart"
+          appTitle=${this.appTitle}
+          appIcon=${this.appIcon}
+          .editableDocs=${this.editableDocs}
+          .menuPlugins=${this.plugins.menu}
+          .locale=${this.locale}
+          @menu-plugin-select=${(event) => this.onMenuPluginSelect(event)}
+        ></plugins-menu>
+
+        <files-menu
+          slot="alignMiddle"
+          .selectedDocName=${this.docName}
+          .editableDocs=${this.editableDocs}
+          .locale=${this.locale}
           @change=${(event) => {
-            const tabs = event.currentTarget;
-            this.editorIndex = tabs.activeTabIndex;
+            const name = event.detail.name;
+            this.docName = name;
         }}
-        >
-          ${this.editors.map(editor => editor.isDisabled()
-            ? nothing
-            : html `<oscd-secondary-tab>
-                  <oscd-icon slot="icon">${editor.icon}</oscd-icon>
-                  ${editor.getName()}
-                </oscd-secondary-tab>`)}
-        </oscd-tabs>
-      </oscd-app-bar>
-
-      <oscd-navigation-drawer hasheader type="modal" id="menu">
-        <oscd-navigation-drawer-header>
-          <span slot="headline">${msg('Menu')}</span>
-          ${this.docName
-            ? html `<span slot="supporting-text">${this.docName}</span>`
-            : ''}
-        </oscd-navigation-drawer-header>
-        <oscd-list>
-          <oscd-divider></oscd-divider>
-          ${this.menu.map(renderMenuItem)}
-        </oscd-list>
-      </oscd-navigation-drawer>
-
-      ${this.editor ? this.renderPlugin(this.editor) : nothing}
-
-      <oscd-dialog
-        id="editFile"
-        @closed=${(event) => {
-            const dialog = event.target;
-            if (dialog.returnValue === 'remove') {
-                delete this.docs[this.docName];
-                this.docName = this.editableDocs[0] || '';
-            }
+        ></files-menu>
+
+        <div slot="alignEnd">
+          <oscd-filled-icon-button
+            aria-label="${msg('Undo')}"
+            ?disabled=${!this.canUndo}
+            @click=${async () => {
+            this.dispatchEvent(new CustomEvent('oscd-undo', {
+                bubbles: true,
+                composed: true,
+            }));
         }}
-      >
-        <div slot="headline">
-          <oscd-icon>description</oscd-icon>${this.docName}
-        </div>
-        <form slot="content" id="edit-file-form" method="dialog">
-          <oscd-filled-text-field
-            id="fileName"
-            label="${msg('Filename')}"
-            value="${this.docName.replace(/\.[^.]+$/, '')}"
-            @input=${(event) => {
-            const input = event.target;
-            const { value } = input;
-            const name = `${value}.${this.fileExtensionUI.value}`;
-            if (name in this.docs && name !== this.docName) {
-                input.setCustomValidity('File already exists!');
-            }
-            else {
-                input.setCustomValidity('');
-            }
-            input.reportValidity();
-        }}
-          ></oscd-filled-text-field>
-          <oscd-filled-select
-            label="${msg('Extension')}"
-            fixedMenuPosition
-            id="fileExtension"
-            @selected=${() => this.fileNameUI.reportValidity()}
-          >
-            ${this.editable.map(ext => html `<oscd-select-option
-                  ?selected=${this.docName.endsWith(`.${ext}`)}
-                  value="${ext}"
-                  >${ext}</oscd-select-option
-                >`)}
-          </oscd-filled-select>
-        </form>
-        <div slot="actions">
-          <oscd-text-button
-            form="edit-file-form"
-            class="edit-dialog-remove-button"
-            value="remove"
+            ><oscd-icon>undo</oscd-icon></oscd-filled-icon-button
           >
-            <oscd-icon slot="icon">delete</oscd-icon>
-            ${msg('Close file')}
-          </oscd-text-button>
-          <oscd-text-button form="edit-file-form" value="close">
-            ${msg('Cancel')}
-          </oscd-text-button>
-          <oscd-text-button
-            @click=${() => {
-            const valid = this.fileNameUI.checkValidity();
-            if (!valid) {
-                this.fileNameUI.reportValidity();
-                return;
-            }
-            const newDocName = `${this.fileNameUI.value}.${this.fileExtensionUI.value}`;
-            const doc = this.docs[this.docName];
-            delete this.docs[this.docName];
-            this.docs = {
-                ...this.docs,
-                [newDocName]: doc,
-            };
-            this.docName = newDocName;
-            this.editFileUI.close();
+          <oscd-filled-icon-button
+            aria-label="${msg('Redo')}"
+            ?disabled=${!this.canRedo}
+            @click=${async () => {
+            this.dispatchEvent(new CustomEvent('oscd-redo', {
+                bubbles: true,
+                composed: true,
+            }));
         }}
-            trailing-icon
+            ><oscd-icon>redo</oscd-icon></oscd-filled-icon-button
           >
-            <oscd-icon slot="icon">edit</oscd-icon>
-            ${msg('Rename')}
-          </oscd-text-button>
-        </div>
-      </oscd-dialog>
-
-      <aside>
-        <div class="menu-plugins">
-          ${this.plugins.menu.map(plugin => this.renderPlugin(plugin.tagName))}
-        </div>
-        <div class="background-plugins">
-          ${this.plugins.background
-            .filter(plugin => !plugin.requireDoc || !!this.docName)
-            .map(plugin => this.renderPlugin(plugin.tagName))}
         </div>
-      </aside> `;
-    }
-    firstUpdated() {
-        const background = getComputedStyle(this.menuUI).getPropertyValue('--oscd-base2');
-        document.body.style.background = background;
-    }
-};
-_OpenSCD_plugins = new WeakMap();
-_OpenSCD_actions = new WeakMap();
-OpenSCD.styles = css `
-    .fileext {
-      opacity: 0.81;
-    }
-
-    .filename {
-      caret-color: var(--oscd-secondary);
-    }
-
-    .filename:focus {
-      outline: none;
-    }
-
-    aside {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 0;
-      height: 0;
-      overflow: hidden;
-      margin: 0;
-      padding: 0;
-    }
-
-    abbr {
-      text-decoration: none;
-    }
+      </oscd-app-bar>
 
-    @media (prefers-color-scheme: light) {
-      * {
-        --oscd-primary: var(--oscd-theme-primary, #2aa198);
-        --oscd-secondary: var(--oscd-theme-secondary, #6c71c4);
-        --oscd-base03: var(--oscd-theme-base03, #002b36);
-        --oscd-base02: var(--oscd-theme-base02, #073642);
-        --oscd-base01: var(--oscd-theme-base01, #586e75);
-        --oscd-base00: var(--oscd-theme-base00, #657b83);
-        --oscd-base0: var(--oscd-theme-base0, #839496);
-        --oscd-base1: var(--oscd-theme-base1, #93a1a1);
-        --oscd-base2: var(--oscd-theme-base2, #eee8d5);
-        --oscd-base3: var(--oscd-theme-base3, #fdf6e3);
+      <main>
+        <section class="editors-side-panel-section">
+          <editor-plugins-panel
+            .editors=${this.plugins.editor}
+            .editorIndex=${this.editorIndex}
+            .locale=${this.locale}
+            @editor-select=${(e) => {
+            this.editorIndex = e.detail.index;
+        }}
+          ></editor-plugins-panel>
+        </section>
 
-        --mdc-theme-text-disabled-on-light: rgba(255, 255, 255, 0.38);
-      }
-    }
+        <section class="editor-container">
+          ${this.editor ? this.renderPlugin(this.editor) : nothing}
+        </section>
 
-    @media (prefers-color-scheme: dark) {
-      * {
-        --oscd-primary: var(--oscd-theme-secondary, #6c71c4);
-        --oscd-secondary: var(--oscd-theme-primary, #2aa198);
-        --oscd-base03: var(--oscd-theme-base3, #fdf6e3);
-        --oscd-base02: var(--oscd-theme-base2, #eee8d5);
-        --oscd-base01: var(--oscd-theme-base1, #93a1a1);
-        --oscd-base00: var(--oscd-theme-base0, #839496);
-        --oscd-base0: var(--oscd-theme-base00, #657b83);
-        --oscd-base1: var(--oscd-theme-base01, #586e75);
-        --oscd-base2: var(--oscd-theme-base02, #073642);
-        --oscd-base3: var(--oscd-theme-base03, #002b36);
-      }
+        ${this.renderOffScreenPlugins()}
+      </main>`;
     }
-
+};
+OscdShell.scopedElements = {
+    'oscd-app-bar': OscdAppBar,
+    'oscd-filled-icon-button': OscdFilledIconButton,
+    'oscd-icon': OscdIcon,
+    'files-menu': FilesMenu,
+    'plugins-menu': PluginsMenu,
+    'editor-plugins-panel': EditorPluginsPanel,
+    'landing-page': LandingPage,
+};
+OscdShell.styles = css `
+    /* Theme variables with default values */
     * {
+      --oscd-primary: var(--oscd-theme-primary, #0b335b);
+      --oscd-secondary: var(--oscd-theme-secondary, #2485e5);
+      --oscd-base03: var(--oscd-theme-base03, #121417);
+      --oscd-base02: var(--oscd-theme-base02, #1a1e23);
+      --oscd-base01: var(--oscd-theme-base01, #3d4651);
+      --oscd-base00: var(--oscd-theme-base00, #46505d);
+      --oscd-base0: var(--oscd-theme-base0, #8b97a7);
+      --oscd-base1: var(--oscd-theme-base1, #96a1b0);
+      --oscd-base2: var(--oscd-theme-base2, #f3f5f6);
+      --oscd-base3: var(--oscd-theme-base3, white);
       --oscd-error: var(--oscd-theme-error, #dc322f);
-
+      --oscd-warning: var(--oscd-theme-warning, #b58900);
       --oscd-text-font: var(--oscd-theme-text-font, 'Roboto');
-      --oscd-icon-font: var(--oscd-theme-icon-font, 'Material Icons');
       --oscd-text-font-mono: var(--oscd-theme-text-font-mono, 'Roboto Mono');
+      --oscd-icon-font: var(
+        --oscd-theme-icon-font,
+        'Material Symbols Outlined'
+      );
 
-      --oscd-warning: var(--oscd-theme-warning, #b58900);
+      /* Fallbacks for Material Design variables */
       --md-sys-color-primary: var(--oscd-primary);
       --md-sys-color-on-primary: var(--oscd-base3);
-
       --md-sys-color-secondary: var(--oscd-secondary);
       --md-sys-color-on-secondary: var(--oscd-base3);
       --md-sys-color-secondary-container: var(--oscd-base2);
-
       --md-sys-color-surface: var(--oscd-base3);
       --md-sys-color-on-surface: var(--oscd-base00);
       --md-sys-color-surface-variant: var(--oscd-base3);
@@ -522,12 +383,11 @@ OpenSCD.styles = css `
       --md-sys-color-surface-container: var(--oscd-base3);
       --md-sys-color-surface-container-high: var(--oscd-base3);
       --md-sys-color-surface-container-highest: var(--oscd-base3);
-
       --md-sys-color-outline-variant: var(--oscd-primary);
       --md-sys-color-scrim: #000000;
       --md-sys-color-error: var(--oscd-error);
       --md-sys-color-on-error: var(--oscd-base3);
-
+      --md-icon-button-disabled-icon-color: var(--oscd-base3);
       /* --md-menu-item-selected-label-text-color: var(--oscd-base01); */
       --md-icon-button-disabled-icon-color: var(--oscd-base3);
 
@@ -539,40 +399,109 @@ OpenSCD.styles = css `
       --mdc-theme-background: var(--oscd-base3);
       --mdc-theme-surface: var(--oscd-base3);
       --mdc-theme-on-primary: var(--oscd-base2);
-      --mdc-theme-on-secondary: var(--oscd-base02);
+      --mdc-theme-on-secondary: var(--oscd-base3);
       --mdc-theme-on-background: var(--oscd-base00);
       --mdc-theme-on-surface: var(--oscd-base00);
       --mdc-theme-text-primary-on-background: var(--oscd-base01);
-      --mdc-theme-text-secondary-on-background: var(--oscd-base00);
-      --mdc-theme-text-icon-on-background: var(--oscd-base00);
+      --mdc-theme-text-secondary-on-background: var(--oscd-base3);
+      --mdc-theme-text-icon-on-background: var(--oscd-base3);
       --mdc-theme-error: var(--oscd-error);
-
       --mdc-button-disabled-ink-color: var(--oscd-base1);
-
       --mdc-drawer-heading-ink-color: var(--oscd-base00);
-
       --mdc-dialog-heading-ink-color: var(--oscd-base00);
-
       --mdc-text-field-fill-color: var(--oscd-base2);
       --mdc-text-field-ink-color: var(--oscd-base02);
       --mdc-text-field-label-ink-color: var(--oscd-base01);
       --mdc-text-field-idle-line-color: var(--oscd-base00);
       --mdc-text-field-hover-line-color: var(--oscd-base02);
-
       --mdc-select-fill-color: var(--oscd-base2);
       --mdc-select-ink-color: var(--oscd-base02);
       --mdc-select-label-ink-color: var(--oscd-base01);
       --mdc-select-idle-line-color: var(--oscd-base00);
       --mdc-select-hover-line-color: var(--oscd-base02);
       --mdc-select-dropdown-icon-color: var(--oscd-base01);
-
       --mdc-typography-font-family: var(--oscd-text-font);
       --mdc-icon-font: var(--oscd-icon-font);
+      --mdc-theme-text-disabled-on-light: rgba(255, 255, 255, 0.38);
+    }
+
+    * {
+      --app-bar-height: 54px;
+      --side-panel-width: 280px;
+
+      --md-sys-color-primary: var(--oscd-primary);
+      --md-sys-color-on-primary: var(--oscd-base3);
+
+      --md-sys-color-secondary-container: var(--oscd-base2);
+
+      --md-sys-color-surface: var(--oscd-base3);
+      --md-sys-color-on-surface: var(--oscd-base00);
+    }
+
+    :host {
+      height: 100%;
+      display: grid;
+      grid-template-rows: min-content 1fr;
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        'header'
+        'main';
+    }
+
+    oscd-app-bar {
+      grid-area: header;
+      box-shadow: var(--md-sys-elevation-level-2);
+      z-index: 10;
+    }
+
+    main {
+      grid-area: main;
+      display: grid;
+      grid-template-columns: var(--side-panel-width) 1fr;
+      grid-template-areas: 'sidebar editor';
+      overflow: hidden;
+    }
+
+    /* Side panel collapsed state */
+    main.sidebar-collapsed {
+      grid-template-columns: 0 1fr;
+    }
+
+    section.editors-side-panel-section {
+      grid-area: sidebar;
+      overflow-y: auto;
+      overflow-x: hidden;
+      transition: transform 0.3s ease-in-out;
+    }
+
+    /* Hide side panel when collapsed */
+    main.sidebar-collapsed section.editors-side-panel-section {
+      transform: translateX(-100%);
+    }
+
+    section.editor-container {
+      grid-area: editor;
+      background-color: var(--oscd-base3);
+      padding: 8px;
+      overflow: auto;
+      position: relative;
+    }
+
+    .off-screen-plugin-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0;
+      height: 0;
+      overflow: hidden;
+      margin: 0;
+      padding: 0;
     }
 
     oscd-navigation-drawer-header {
       --md-list-item-supporting-text-color: var(--md-sys-color-on-surface);
     }
+
     oscd-app-bar * {
       --md-filled-icon-button-disabled-container-opacity: 0;
       --md-filled-icon-button-disabled-icon-color: var(
@@ -580,107 +509,89 @@ OpenSCD.styles = css `
       );
     }
 
-    oscd-tabs {
-      display: flex;
-      flex-grow: 1;
-      --md-secondary-tab-container-color: var(--oscd-primary);
-    }
-    oscd-secondary-tab {
-      --md-sys-color-on-surface: var(--md-sys-color-on-primary);
-      --md-sys-color-on-surface-variant: var(--md-sys-color-on-primary);
-      --md-secondary-tab-active-indicator-color: var(--oscd-base2);
-    }
-
     .edit-dialog-remove-button {
       --md-text-button-icon-color: var(--oscd-error);
       --md-text-button-label-text-color: var(--oscd-error);
-
       --md-text-button-focus-label-text-color: var(--oscd-error);
       --md-text-button-focus-icon-color: var(--oscd-error);
-
       --md-text-button-hover-label-text-color: var(--oscd-error);
       --md-text-button-hover-state-layer-color: var(--oscd-error);
       --md-text-button-hover-icon-color: var(--oscd-error);
-
       --md-text-button-pressed-label-text-color: var(--oscd-error);
       --md-text-button-pressed-state-layer-color: var(--oscd-error);
       --md-text-button-pressed-icon-color: var(--oscd-error);
     }
-
     #title {
       position: relative;
     }
   `;
 __decorate([
-    property({ type: Array, reflect: true })
-], OpenSCD.prototype, "editable", void 0);
+    property({ type: String })
+], OscdShell.prototype, "appIcon", void 0);
 __decorate([
-    state()
-], OpenSCD.prototype, "editableDocs", null);
+    property({ type: String })
+], OscdShell.prototype, "appTitle", void 0);
 __decorate([
-    state()
-], OpenSCD.prototype, "docs", null);
+    property({ type: String })
+], OscdShell.prototype, "landingPageHeading", void 0);
+__decorate([
+    property({ type: String })
+], OscdShell.prototype, "landingPageSubHeading", void 0);
+__decorate([
+    property({ type: Array, reflect: true })
+], OscdShell.prototype, "editable", void 0);
 __decorate([
     property({ type: String, reflect: true })
-], OpenSCD.prototype, "docName", void 0);
+], OscdShell.prototype, "locale", null);
 __decorate([
-    state()
-    /** The `XMLDocument` currently being edited */
-], OpenSCD.prototype, "doc", null);
+    property({ type: Object })
+], OscdShell.prototype, "plugins", null);
 __decorate([
     state()
-], OpenSCD.prototype, "xmlEditor", void 0);
+], OscdShell.prototype, "canRedo", null);
 __decorate([
     state()
-], OpenSCD.prototype, "docVersion", void 0);
+], OscdShell.prototype, "canUndo", null);
 __decorate([
     state()
-], OpenSCD.prototype, "last", null);
+], OscdShell.prototype, "editor", null);
 __decorate([
     state()
-], OpenSCD.prototype, "canUndo", null);
+], OscdShell.prototype, "editorIndex", void 0);
 __decorate([
     state()
-], OpenSCD.prototype, "canRedo", null);
-__decorate([
-    property({ type: Object })
-], OpenSCD.prototype, "plugins", null);
-__decorate([
-    query('#editFile')
-], OpenSCD.prototype, "editFileUI", void 0);
-__decorate([
-    query('#menu')
-], OpenSCD.prototype, "menuUI", void 0);
-__decorate([
-    query('#fileName')
-], OpenSCD.prototype, "fileNameUI", void 0);
-__decorate([
-    query('#fileExtension')
-], OpenSCD.prototype, "fileExtensionUI", void 0);
-__decorate([
-    query('#fileMenu')
-], OpenSCD.prototype, "fileMenuUI", void 0);
-__decorate([
-    query('#fileMenuButton')
-], OpenSCD.prototype, "fileMenuButtonUI", void 0);
+    /** The `XMLDocument` currently being edited */
+], OscdShell.prototype, "doc", null);
 __decorate([
     property({ type: String, reflect: true })
-], OpenSCD.prototype, "locale", null);
+], OscdShell.prototype, "docName", void 0);
+__decorate([
+    state()
+], OscdShell.prototype, "docs", null);
 __decorate([
     state()
-], OpenSCD.prototype, "editorIndex", void 0);
+], OscdShell.prototype, "docVersion", void 0);
 __decorate([
     state()
-], OpenSCD.prototype, "editor", null);
+], OscdShell.prototype, "editableDocs", null);
 __decorate([
     state()
-], OpenSCD.prototype, "menu", null);
+], OscdShell.prototype, "last", null);
 __decorate([
     state()
-], OpenSCD.prototype, "editors", null);
-OpenSCD = __decorate([
-    customElement('oscd-shell'),
-    localized()
-], OpenSCD);
-export { OpenSCD };
+], OscdShell.prototype, "xmlEditor", void 0);
+__decorate([
+    query('plugins-menu')
+], OscdShell.prototype, "pluginsMenu", void 0);
+__decorate([
+    query('editor-plugins-panel')
+], OscdShell.prototype, "editorPluginsPanel", void 0);
+__decorate([
+    queryAssignedNodes({ slot: 'landing-page' })
+], OscdShell.prototype, "_landingPageNodes", void 0);
+OscdShell = __decorate([
+    localized(),
+    customElement('oscd-shell')
+], OscdShell);
+export { OscdShell };
 //# sourceMappingURL=oscd-shell.js.map