@mat3ra/esse 2026.4.4-0 → 2026.5.18-0

package/src/html/app.js

@@ -0,0 +1,309 @@
+'use strict';
+
+// ── 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'], function () {
+    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      = [];
+let expandedSet   = new Set();   // set of folder paths that are expanded
+let selectedFile  = null;        // currently selected file path
+
+// ── 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.innerHTML =
+            `<span class="t-chevron">${isOpen ? '▾' : '▸'}</span>` +
+            `<span class="t-icon" style="color:var(--icon-folder)">📁</span>` +
+            `<span class="t-label">${escHtml(key)}</span>`;
+
+        const children = document.createElement('div');
+        children.className = 't-children' + (isOpen ? ' open' : '');
+        children.dataset.rendered = isOpen ? 'true' : 'false';
+
+        row.addEventListener('click', e => {
+            e.stopPropagation();
+            const opening = !children.classList.contains('open');
+            children.classList.toggle('open', opening);
+            row.querySelector('.t-chevron').textContent = 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) {
+    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);
+    }
+}
+
+// ── Open / display a file ─────────────────────────────────────────────────────
+function openFile(path) {
+    selectedFile = path;
+
+    // Highlight in tree (works for both tree and search views)
+    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');
+
+    // 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
+    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 () {
+    const resizer = document.getElementById('resizer');
+    const sidebar = document.getElementById('sidebar');
+    let dragging = false, startX = 0, 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

@@ -0,0 +1,54 @@
+<!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>
+    <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

@@ -0,0 +1,265 @@
+: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; }