@mat3ra/esse 2026.8.13-0 → 2026.8.18-0

package/src/html/app.js

@@ -1,350 +0,0 @@
-/* global monaco */
-/* eslint-disable import/no-amd, import/no-dynamic-require, no-use-before-define */
-
-// ── Monaco bootstrap ──────────────────────────────────────────────────────────
-let monacoEditor = null;
-let pendingContent = null;
-
-require.config({ paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs" } });
-require(["vs/editor/editor.main"], () => {
-    monacoEditor = monaco.editor.create(document.getElementById("monaco-editor"), {
-        value: "",
-        language: "json",
-        theme: "vs-dark",
-        readOnly: true,
-        minimap: { enabled: true },
-        scrollBeyondLastLine: false,
-        fontSize: 13,
-        lineNumbers: "on",
-        wordWrap: "off",
-        automaticLayout: true,
-        renderLineHighlight: "all",
-    });
-    if (pendingContent !== null) {
-        applyContent(pendingContent);
-        pendingContent = null;
-    }
-});
-
-function applyContent(text) {
-    if (!monacoEditor) {
-        pendingContent = text;
-        return;
-    }
-    document.getElementById("welcome").style.display = "none";
-    document.getElementById("monaco-editor").style.display = "block";
-    monacoEditor.setValue(text);
-    monacoEditor.revealLine(1);
-}
-
-// ── State ─────────────────────────────────────────────────────────────────────
-let allFiles = [];
-const expandedSet = new Set(); // set of folder paths that are expanded
-let selectedFile = null; // currently selected file path
-let currentQuery = "";
-
-// ── Build nested tree object from flat path list ──────────────────────────────
-function pathsToTree(paths) {
-    const root = {};
-    paths.forEach((p) => {
-        const parts = p.split("/");
-        let node = root;
-        for (let i = 0; i < parts.length; i++) {
-            const part = parts[i];
-            if (i === parts.length - 1) {
-                if (!node.__files) node.__files = [];
-                node.__files.push({ name: part, path: p });
-            } else {
-                if (!node[part]) node[part] = {};
-                node = node[part];
-            }
-        }
-    });
-    return root;
-}
-
-// ── Render tree (lazy — children only rendered when folder is opened) ─────────
-function renderTree(container, node, depth, folderPath) {
-    // Folders first (alphabetical)
-    const folderKeys = Object.keys(node)
-        .filter((k) => k !== "__files")
-        .sort();
-    folderKeys.forEach((key) => {
-        const fp = folderPath ? `${folderPath}/${key}` : key;
-        const isOpen = expandedSet.has(fp);
-
-        const row = document.createElement("div");
-        row.className = "t-item folder";
-        row.style.paddingLeft = `${depth * 12 + 4}px`;
-        row.dataset.fp = fp;
-        row.setAttribute("aria-expanded", String(isOpen));
-
-        row.innerHTML =
-            `<span class="t-chevron">${isOpen ? "▾" : "▸"}</span>` +
-            `<span class="t-icon" style="color:var(--icon-folder)">${isOpen ? "📂" : "📁"}</span>` +
-            `<span class="t-label">${escHtml(key)}</span>`;
-
-        const children = document.createElement("div");
-        children.className = "t-children" + (isOpen ? " open" : "");
-        children.dataset.rendered = "false";
-
-        row.addEventListener("click", (e) => {
-            e.stopPropagation();
-            const opening = !children.classList.contains("open");
-            children.classList.toggle("open", opening);
-            row.querySelector(".t-chevron").textContent = opening ? "▾" : "▸";
-            row.querySelector(".t-icon").textContent = opening ? "📂" : "📁";
-            row.setAttribute("aria-expanded", String(opening));
-            if (opening) {
-                expandedSet.add(fp);
-                if (children.dataset.rendered === "false") {
-                    renderTree(children, node[key], depth + 1, fp);
-                    children.dataset.rendered = "true";
-                }
-            } else {
-                expandedSet.delete(fp);
-            }
-        });
-
-        if (isOpen && children.dataset.rendered === "false") {
-            renderTree(children, node[key], depth + 1, fp);
-            children.dataset.rendered = "true";
-        }
-
-        container.appendChild(row);
-        container.appendChild(children);
-    });
-
-    // Then files
-    if (node.__files) {
-        node.__files
-            .slice()
-            .sort((a, b) => a.name.localeCompare(b.name))
-            .forEach(({ name, path }) => {
-                const row = document.createElement("div");
-                row.className = "t-item file" + (path === selectedFile ? " selected" : "");
-                row.style.paddingLeft = `${depth * 12 + 22}px`;
-                row.dataset.path = path;
-
-                row.innerHTML =
-                    `<span class="t-icon">📄</span>` +
-                    `<span class="t-label">${escHtml(name)}</span>`;
-
-                row.addEventListener("click", () => openFile(path));
-                container.appendChild(row);
-            });
-    }
-}
-
-// ── Render flat search results ────────────────────────────────────────────────
-function renderSearch(container, matches, query) {
-    if (matches.length === 0) {
-        container.innerHTML = '<div class="tree-msg">No results found.</div>';
-        return;
-    }
-    document.getElementById("status-count").textContent = `${matches.length} result${
-        matches.length !== 1 ? "s" : ""
-    }`;
-
-    matches.forEach((path) => {
-        const fileName = path.split("/").pop();
-        const dirPart = path.slice(0, path.length - fileName.length - 1);
-        const row = document.createElement("div");
-        row.className = "t-item file flat-result" + (path === selectedFile ? " selected" : "");
-        row.style.paddingLeft = "8px";
-        row.dataset.path = path;
-
-        const hl = (s) => hlMatch(s, query);
-
-        row.innerHTML =
-            `<span class="t-icon" style="flex-shrink:0">📄</span>` +
-            `<span class="t-label">` +
-            `<span class="t-filename">${hl(fileName)}</span>` +
-            `<span class="t-filepath">${hl(dirPart)}</span>` +
-            `</span>`;
-
-        row.addEventListener("click", () => openFile(path));
-        container.appendChild(row);
-    });
-}
-
-// ── Highlight query match in text ─────────────────────────────────────────────
-function hlMatch(text, query) {
-    if (!query) return escHtml(text);
-    const idx = text.toLowerCase().indexOf(query.toLowerCase());
-    if (idx === -1) return escHtml(text);
-    return (
-        escHtml(text.slice(0, idx)) +
-        `<mark>${escHtml(text.slice(idx, idx + query.length))}</mark>` +
-        escHtml(text.slice(idx + query.length))
-    );
-}
-
-function escHtml(s) {
-    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-
-// ── Pre-expand folders up to a given depth ────────────────────────────────────
-function preExpand(node, depth, folderPath, maxDepth) {
-    if (depth >= maxDepth) return;
-    Object.keys(node)
-        .filter((k) => k !== "__files")
-        .forEach((key) => {
-            const fp = folderPath ? `${folderPath}/${key}` : key;
-            expandedSet.add(fp);
-            preExpand(node[key], depth + 1, fp, maxDepth);
-        });
-}
-
-// ── Rebuild the whole tree pane ───────────────────────────────────────────────
-function rebuildTree(query) {
-    currentQuery = query;
-    const container = document.getElementById("file-tree");
-    container.innerHTML = "";
-
-    if (!query) {
-        document.getElementById("status-count").textContent = `${allFiles.length} file${
-            allFiles.length !== 1 ? "s" : ""
-        }`;
-        const tree = pathsToTree(allFiles);
-        renderTree(container, tree, 0, "");
-    } else {
-        const q = query.toLowerCase();
-        const matches = allFiles.filter((f) => f.toLowerCase().includes(q));
-        renderSearch(container, matches, query);
-    }
-}
-
-function focusSelectedFileInTree(path) {
-    document.querySelectorAll(".t-item.selected").forEach((el) => el.classList.remove("selected"));
-    const el = document.querySelector(`.t-item.file[data-path="${CSS.escape(path)}"]`);
-    if (el) {
-        el.classList.add("selected");
-        el.scrollIntoView({ block: "nearest" });
-    }
-}
-
-// ── Open / display a file ─────────────────────────────────────────────────────
-function openFile(path) {
-    selectedFile = path;
-    expandToFile(path);
-
-    if (currentQuery) {
-        currentQuery = "";
-        document.getElementById("search-input").value = "";
-    }
-
-    rebuildTree("");
-
-    // Highlight in tree (works for both tree and search views)
-    focusSelectedFileInTree(path);
-
-    // Tab
-    const fname = path.split("/").pop();
-    document.getElementById(
-        "tabbar",
-    ).innerHTML = `<div class="tab active"><span>📄</span><span>${escHtml(fname)}</span></div>`;
-
-    // Breadcrumb
-    const parts = path.split("/");
-    document.getElementById("breadcrumb").innerHTML = parts
-        .map((p, i) =>
-            i < parts.length - 1
-                ? `<span>${escHtml(p)}</span><span class="bc-sep">›</span>`
-                : `<span style="color:var(--text-primary)">${escHtml(p)}</span>`,
-        )
-        .join("");
-
-    // Status
-    document.getElementById("status-path").textContent = path;
-
-    // Update URL hash for deep-linking
-    window.history.replaceState(null, "", "#" + path);
-
-    // Fetch
-    fetch(path)
-        .then((r) => {
-            if (!r.ok) throw new Error("HTTP " + r.status);
-            return r.json();
-        })
-        .then((data) => applyContent(JSON.stringify(data, null, 2)))
-        .catch((err) => applyContent(`// Error loading file\n// ${err.message}`));
-}
-
-// ── Expand all ancestor folders for a given file path ────────────────────────
-function expandToFile(path) {
-    const parts = path.split("/");
-    let folderPath = "";
-    for (let i = 0; i < parts.length - 1; i++) {
-        folderPath = folderPath ? `${folderPath}/${parts[i]}` : parts[i];
-        expandedSet.add(folderPath);
-    }
-}
-
-// ── Search handler ────────────────────────────────────────────────────────────
-let searchTimer = null;
-document.getElementById("search-input").addEventListener("input", function () {
-    clearTimeout(searchTimer);
-    searchTimer = setTimeout(() => rebuildTree(this.value.trim()), 150);
-});
-
-// ── Resizer ───────────────────────────────────────────────────────────────────
-(function initResizer() {
-    const resizer = document.getElementById("resizer");
-    const sidebar = document.getElementById("sidebar");
-    let dragging = false;
-    let startX = 0;
-    let startW = 0;
-
-    resizer.addEventListener("mousedown", (e) => {
-        dragging = true;
-        startX = e.clientX;
-        startW = sidebar.offsetWidth;
-        resizer.classList.add("active");
-        document.body.style.cursor = "col-resize";
-        document.body.style.userSelect = "none";
-        e.preventDefault();
-    });
-    document.addEventListener("mousemove", (e) => {
-        if (!dragging) return;
-        const w = Math.max(120, Math.min(window.innerWidth * 0.6, startW + e.clientX - startX));
-        sidebar.style.width = w + "px";
-        if (monacoEditor) monacoEditor.layout();
-    });
-    document.addEventListener("mouseup", () => {
-        if (!dragging) return;
-        dragging = false;
-        resizer.classList.remove("active");
-        document.body.style.cursor = "";
-        document.body.style.userSelect = "";
-    });
-})();
-
-// ── Init ──────────────────────────────────────────────────────────────────────
-fetch("files.json")
-    .then((r) => r.json())
-    .then((files) => {
-        allFiles = files;
-        // Pre-expand to second degree by default
-        const tree = pathsToTree(allFiles);
-        preExpand(tree, 0, "", 2);
-        // Handle deep-link hash
-        const hash = window.location.hash.slice(1);
-        if (hash && allFiles.includes(hash)) {
-            expandToFile(hash);
-        }
-        rebuildTree("");
-        if (hash && allFiles.includes(hash)) {
-            openFile(hash);
-        }
-    })
-    .catch((err) => {
-        document.getElementById(
-            "file-tree",
-        ).innerHTML = `<div class="tree-msg" style="color:#f88">Failed to load file index: ${err.message}</div>`;
-    });
-
-window.addEventListener("hashchange", () => {
-    const hash = window.location.hash.slice(1);
-    if (hash && allFiles.includes(hash)) openFile(hash);
-});

package/src/html/index.html

@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ESSEntial Source of Schemas and Examples (ESSE)</title>
-    <!-- URL-encoded svg favicon with theme-aware styles -->
-    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asvgjs%3D%22http%3A%2F%2Fsvgjs.com%2Fsvgjs%22%20width%3D%22512%22%20height%3D%22512%22%3E%3Cstyle%3E%40media%20%28prefers-color-scheme%3Alight%29%7B.theme-color%7Bfill%3A%23000000%7D%7D%40media%20%28prefers-color-scheme%3Adark%29%7B.theme-color%7Bfill%3A%23FFFFFF%7D%7D%3C%2Fstyle%3E%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20class%3D%22theme-color%22%20cx%3D%22256%22%20cy%3D%22256%22%20r%3D%2280%22%20transform%3D%22rotate%28-180%20256%20256%29%22%3E%3C%2Fcircle%3E%3Cpath%20class%3D%22theme-color%22%20d%3D%22M334%20100.056C334%2050.8718%20373.847%2011%20423%2011C472.153%2011%20512%2050.8718%20512%20100.056C512%20130.306%20480.115%20171.982%20480.115%20171.982C480.115%20171.982%20427.327%20236.133%20427.327%20256.326C427.327%20276.516%20456.851%20312.743%20480.115%20341.285C497.341%20362.431%20512%20383.184%20512%20411.944C512%20461.128%20472.153%20501%20423%20501C373.847%20501%20334%20461.128%20334%20411.944C334%20384.78%20349.322%20361.543%20365.887%20341.285C389.152%20312.74%20418.674%20276.516%20418.674%20256.326C418.674%20236.289%20366.784%20171.982%20366.784%20171.982C366.784%20171.982%20334%20131.672%20334%20100.056Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22theme-color%22%20d%3D%22M0%20100.056C0%2050.8718%2039.8467%2011%2089%2011C138.153%2011%20178%2050.8718%20178%20100.056C178%20130.306%20146.115%20171.982%20146.115%20171.982C146.115%20171.982%2093.3276%20236.133%2093.3276%20256.326C93.3276%20276.516%20122.851%20312.743%20146.115%20341.285C163.341%20362.431%20178%20383.184%20178%20411.944C178%20461.128%20138.153%20501%2089%20501C39.8467%20501%200%20461.128%200%20411.944C0%20384.78%2015.3226%20361.543%2031.8867%20341.285C55.1519%20312.74%2084.6738%20276.516%2084.6738%20256.326C84.6738%20236.289%2032.7845%20171.982%2032.7845%20171.982C32.7845%20171.982%200%20131.672%200%20100.056Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%3C%2Fsvg%3E" />
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-
-<div id="titlebar">
-    <span class="app-name">ESSEntial Source of Schemas and Examples (ESSE)</span>
-    <span>—</span>
-    <span>schemas.mat3ra.com</span>
-</div>
-
-<div id="workspace">
-
-    <div id="sidebar">
-        <div id="sidebar-title">Explorer</div>
-        <div id="search-wrap">
-            <input id="search-input" type="search" placeholder="Search schemas…" autocomplete="off" spellcheck="false">
-        </div>
-        <div id="file-tree">
-            <div class="tree-msg">Loading…</div>
-        </div>
-    </div>
-
-    <div id="resizer"></div>
-
-    <div id="editor-area">
-        <div id="tabbar"></div>
-        <div id="breadcrumb">ESSEntial Source of Schemas and Examples (ESSE)</div>
-        <div id="editor-wrap">
-            <div id="welcome">
-                <h2>ESSEntial Source of Schemas and Examples (ESSE)</h2>
-                <p>Select a schema from the explorer on the left, or start typing to search.</p>
-            </div>
-            <div id="monaco-editor"></div>
-        </div>
-    </div>
-
-</div>
-
-<div id="statusbar">
-    <span id="status-path">No file selected</span>
-    <span id="status-count"></span>
-</div>
-
-<!-- Monaco Editor (loaded from CDN) -->
-<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs/loader.min.js"></script>
-<script src="app.js"></script>
-</body>
-</html>

package/src/html/style.css

@@ -1,265 +0,0 @@
-:root {
-    --bg-editor:   #1e1e1e;
-    --bg-sidebar:  #252526;
-    --bg-inactive: #2d2d2d;
-    --bg-hover:    #2a2d2e;
-    --bg-selected: #094771;
-    --text-primary:   #d4d4d4;
-    --text-secondary: #abb2bf;
-    --text-muted:     #858585;
-    --border:  #3e3e3e;
-    --accent:  #0078d4;
-    --icon-folder: #dcb67a;
-    --icon-json:   #9cdcfe;
-}
-
-* { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
-    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
-    background: var(--bg-editor);
-    color: var(--text-primary);
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    overflow: hidden;
-}
-
-/* ── Title bar ───────────────────────────────────────────── */
-#titlebar {
-    height: 30px;
-    background: #323233;
-    border-bottom: 1px solid #111;
-    display: flex;
-    align-items: center;
-    padding: 0 14px;
-    flex-shrink: 0;
-    font-size: 13px;
-    color: var(--text-muted);
-    gap: 8px;
-}
-#titlebar .app-name { color: var(--text-primary); font-weight: 500; }
-
-/* ── Layout ──────────────────────────────────────────────── */
-#workspace {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-}
-
-/* ── Sidebar ─────────────────────────────────────────────── */
-#sidebar {
-    width: 280px;
-    min-width: 120px;
-    max-width: 60vw;
-    background: var(--bg-sidebar);
-    border-right: 1px solid var(--border);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    flex-shrink: 0;
-}
-
-#sidebar-title {
-    padding: 10px 12px 6px;
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--text-muted);
-    flex-shrink: 0;
-}
-
-#search-wrap {
-    padding: 0 8px 8px;
-    flex-shrink: 0;
-}
-
-#search-input {
-    width: 100%;
-    background: #3c3c3c;
-    border: 1px solid #555;
-    border-radius: 3px;
-    color: var(--text-primary);
-    font-size: 13px;
-    padding: 5px 8px 5px 30px;
-    outline: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23858585'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: 8px 50%;
-    background-size: 14px 14px;
-}
-#search-input:focus { border-color: var(--accent); }
-#search-input::placeholder { color: var(--text-muted); }
-
-#file-tree {
-    flex: 1;
-    overflow-y: auto;
-    font-size: 13px;
-    line-height: 1;
-}
-#file-tree::-webkit-scrollbar { width: 6px; }
-#file-tree::-webkit-scrollbar-thumb { background: #424242; border-radius: 3px; }
-#file-tree::-webkit-scrollbar-track { background: transparent; }
-
-/* ── Tree items ──────────────────────────────────────────── */
-.t-item {
-    display: flex;
-    align-items: center;
-    height: 22px;
-    cursor: pointer;
-    white-space: nowrap;
-    padding-right: 8px;
-    gap: 3px;
-}
-.t-item:hover    { background: var(--bg-hover); }
-.t-item.selected { background: var(--bg-selected); }
-
-.t-chevron {
-    flex-shrink: 0;
-    width: 16px;
-    text-align: center;
-    font-size: 9px;
-    color: var(--text-muted);
-    transition: transform 0.1s;
-}
-.t-icon   { flex-shrink: 0; font-size: 14px; width: 18px; text-align: center; }
-.t-label  { flex: 1; overflow: hidden; text-overflow: ellipsis; }
-
-.t-item.folder .t-label { color: var(--text-primary); }
-.t-item.file   .t-label { color: var(--icon-json); }
-
-.t-children { display: none; }
-.t-children.open { display: block; }
-
-/* search result: show full path */
-.t-item.flat-result .t-label {
-    display: flex;
-    flex-direction: column;
-    line-height: 1.3;
-    padding: 2px 0;
-    height: auto;
-}
-.t-item.flat-result { height: auto; min-height: 22px; align-items: flex-start; padding-top: 3px; padding-bottom: 3px; }
-.t-item.flat-result .t-filename { color: var(--icon-json); font-weight: 500; }
-.t-item.flat-result .t-filepath { font-size: 11px; color: var(--text-muted); }
-.t-item.flat-result mark { background: transparent; color: #e6b422; font-weight: 700; }
-
-/* no-results / loading */
-.tree-msg {
-    padding: 12px;
-    font-size: 12px;
-    color: var(--text-muted);
-}
-
-/* ── Resizer ─────────────────────────────────────────────── */
-#resizer {
-    width: 4px;
-    background: transparent;
-    cursor: col-resize;
-    flex-shrink: 0;
-    transition: background 0.15s;
-}
-#resizer:hover, #resizer.active { background: var(--accent); }
-
-/* ── Editor area ─────────────────────────────────────────── */
-#editor-area {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    min-width: 0;
-}
-
-/* Tab bar */
-#tabbar {
-    height: 35px;
-    background: var(--bg-sidebar);
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    align-items: flex-end;
-    flex-shrink: 0;
-    overflow: hidden;
-}
-.tab {
-    height: 35px;
-    padding: 0 12px;
-    font-size: 13px;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    background: var(--bg-inactive);
-    border-right: 1px solid var(--border);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: var(--text-muted);
-    max-width: 240px;
-}
-.tab.active {
-    background: var(--bg-editor);
-    color: var(--text-primary);
-    border-top: 1px solid var(--accent);
-    height: 36px;
-}
-
-/* Breadcrumb */
-#breadcrumb {
-    height: 22px;
-    padding: 0 14px;
-    font-size: 12px;
-    color: var(--text-muted);
-    background: var(--bg-editor);
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    overflow: hidden;
-    gap: 2px;
-}
-.bc-sep { opacity: 0.4; margin: 0 2px; }
-
-/* Editor container */
-#editor-wrap {
-    flex: 1;
-    position: relative;
-    overflow: hidden;
-}
-
-#monaco-editor {
-    position: absolute;
-    inset: 0;
-    display: none;
-}
-
-/* Welcome */
-#welcome {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    color: var(--text-muted);
-}
-#welcome h2 {
-    font-size: 22px;
-    font-weight: 300;
-    color: var(--text-secondary);
-}
-#welcome p { font-size: 13px; }
-
-/* Status bar */
-#statusbar {
-    height: 22px;
-    background: var(--accent);
-    color: #fff;
-    display: flex;
-    align-items: center;
-    padding: 0 14px;
-    font-size: 12px;
-    flex-shrink: 0;
-    gap: 16px;
-}
-#status-path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }