@a83/orbiter-admin 0.3.13 → 0.3.15

package/public/xfce.js

@@ -0,0 +1,697 @@
+/**
+ * xfce.js — Space Station dock mode for Orbiter Admin.
+ * Auto-loaded by sidebar.js when orb_style === 'xfce'.
+ * Creates: status bar (top) + floating dock (bottom center) + HUD panel (slide-right).
+ */
+(function () {
+  'use strict';
+
+  var page      = location.pathname.split('/').pop().replace('.html', '');
+  var params    = new URLSearchParams(location.search);
+  var activeCol = params.get('col') || params.get('collection');
+
+  var NAV = [
+    { icon: '⬡', label: 'Dashboard', href: '/dashboard.html', key: 'dashboard' },
+    { icon: '◫', label: 'Media',     href: '/media.html',     key: 'media' },
+    { icon: '⚙', label: 'Settings',  href: '/settings.html',  key: 'settings' },
+    { icon: '⊛', label: 'Users',     href: '/users.html',     key: 'users' },
+  ];
+
+  var TOOLS = [
+    { icon: '▦', label: 'Schema', href: '/schema.html', key: 'schema' },
+    { icon: '◉', label: 'Build',  href: '/build.html',  key: 'build'  },
+    { icon: '↓', label: 'Import', href: '/import.html', key: 'import' },
+  ];
+
+  var WORKSPACE = [
+    { icon: '✎', label: 'Notes', pane: 'notes' },
+    { icon: '☑', label: 'To-do', pane: 'todos' },
+  ];
+
+  // ── Helpers ───────────────────────────────────────────────────────────
+  function el(tag, cls, html) {
+    var e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (html) e.innerHTML = html;
+    return e;
+  }
+
+  // ── Status Bar ────────────────────────────────────────────────────────
+  function buildStatusBar() {
+    var sb = el('div', 'xfce-sb');
+    sb.innerHTML = [
+      '<div class="xfce-sb-left">',
+        '<span class="xfce-sb-logo">',
+          '<svg viewBox="0 0 20 20" width="12" height="12" fill="none" style="margin-right:5px;vertical-align:middle">',
+            '<circle cx="10" cy="10" r="4.5" fill="currentColor" opacity=".9"/>',
+            '<ellipse cx="10" cy="10" rx="9" ry="3.2" stroke="currentColor" stroke-width="1" opacity=".5" transform="rotate(-22 10 10)"/>',
+          '</svg>ORBITER',
+        '</span>',
+        '<span class="xfce-sb-div">·</span>',
+        '<span id="xfce-sb-site">—</span>',
+      '</div>',
+      '<div class="xfce-sb-center" id="xfce-sb-title"></div>',
+      '<div class="xfce-sb-right">',
+        '<span id="xfce-sb-user"></span>',
+        '<span class="xfce-sb-div">·</span>',
+        '<span id="xfce-sb-clock"></span>',
+      '</div>',
+    ].join('');
+    document.body.insertBefore(sb, document.body.firstChild);
+
+    // Page title from document.title (strip " — Orbiter")
+    var title = document.title.replace(/\s*—\s*Orbiter.*$/, '').trim();
+    var titleEl = document.getElementById('xfce-sb-title');
+    if (titleEl && title) titleEl.textContent = title;
+
+    // Clock
+    function tick() {
+      var c = document.getElementById('xfce-sb-clock');
+      if (!c) return;
+      c.textContent = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    tick();
+    setInterval(tick, 15000);
+  }
+
+  // ── HUD Meta Panel ────────────────────────────────────────────────────
+  var metaPanel;
+
+  function buildMetaPanel() {
+    metaPanel = el('div', 'xfce-hud');
+    metaPanel.id = 'xfce-hud';
+    metaPanel.innerHTML = [
+      '<div class="xfce-hud-bar">',
+        '<span class="xfce-hud-title">◈ System HUD</span>',
+        '<button class="xfce-hud-close" id="xfce-hud-close" title="Close">✕</button>',
+      '</div>',
+      '<div class="xfce-hud-body">',
+        '<div class="xfce-hud-section-label">Pod</div>',
+        '<div id="xfce-hud-pod" class="xfce-hud-rows"></div>',
+        '<div class="xfce-hud-section-label" style="margin-top:16px">Collections</div>',
+        '<div id="xfce-hud-cols" class="xfce-hud-rows"></div>',
+        '<div class="xfce-hud-section-label" style="margin-top:16px">Navigation</div>',
+        '<div class="xfce-hud-nav-links" id="xfce-hud-nav"></div>',
+      '</div>',
+    ].join('');
+    document.body.appendChild(metaPanel);
+
+    document.getElementById('xfce-hud-close').addEventListener('click', function () {
+      metaPanel.classList.remove('open');
+    });
+
+    // Nav links inside HUD (all items including tools)
+    var navWrap = document.getElementById('xfce-hud-nav');
+    if (navWrap) {
+      NAV.concat(TOOLS).forEach(function (n) {
+        var a = el('a', 'xfce-hud-nav-item' + (page === n.key ? ' active' : ''));
+        a.href = n.href;
+        a.innerHTML = '<span>' + n.icon + '</span><span>' + n.label + '</span>';
+        navWrap.appendChild(a);
+      });
+    }
+  }
+
+  function toggleHUD() {
+    if (!metaPanel) return;
+    metaPanel.classList.toggle('open');
+  }
+
+  // ── Tools popup ───────────────────────────────────────────────────────
+  var toolsPopup;
+
+  function buildToolsPopup() {
+    toolsPopup = el('div', 'xfce-tools-popup');
+    toolsPopup.id = 'xfce-tools-popup';
+    TOOLS.forEach(function (t) {
+      var a = el('a', 'xfce-tools-item' + (page === t.key ? ' active' : ''));
+      a.href = t.href;
+      a.innerHTML = '<span class="xfce-tools-icon">' + t.icon + '</span><span>' + t.label + '</span>';
+      toolsPopup.appendChild(a);
+    });
+    document.body.appendChild(toolsPopup);
+    document.addEventListener('click', function () {
+      toolsPopup.classList.remove('open');
+    });
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') toolsPopup.classList.remove('open');
+    });
+  }
+
+  function toggleToolsPopup() {
+    if (!toolsPopup) buildToolsPopup();
+    var btn = document.getElementById('xfce-tools-btn');
+    if (btn) {
+      var rect = btn.getBoundingClientRect();
+      toolsPopup.style.left = Math.round(rect.left + rect.width / 2) + 'px';
+    }
+    toolsPopup.classList.toggle('open');
+  }
+
+  // ── Workspace overlay (Notes + To-do) ────────────────────────────────
+  var wsOverlay, wsActivePane = 'notes', wsNotesTimer, wsTodosData = [];
+
+  function buildWorkspaceOverlay() {
+    wsOverlay = el('div', 'xfce-ws-overlay');
+    wsOverlay.id = 'xfce-ws-overlay';
+    wsOverlay.innerHTML = [
+      '<div class="xfce-ws-bar">',
+        '<div class="xfce-ws-tabs">',
+          '<button class="xfce-ws-tab active" data-pane="notes">✎ Notes</button>',
+          '<button class="xfce-ws-tab" data-pane="todos">☑ To-do</button>',
+        '</div>',
+        '<div style="display:flex;align-items:center;gap:8px">',
+          '<span id="xfce-ws-ind" class="xfce-ws-ind"></span>',
+          '<button id="xfce-ws-export" class="xfce-ws-export" title="Download as Markdown">↓ .md</button>',
+          '<button id="xfce-ws-close" class="xfce-ws-close">✕</button>',
+        '</div>',
+      '</div>',
+      '<div class="xfce-ws-body">',
+        '<div id="xfce-ws-notes-pane" class="xfce-ws-pane">',
+          '<textarea id="xfce-ws-notes" class="xfce-ws-textarea" placeholder="Jot something down…"></textarea>',
+        '</div>',
+        '<div id="xfce-ws-todos-pane" class="xfce-ws-pane" style="display:none">',
+          '<div class="xfce-ws-todo-row">',
+            '<span class="xfce-ws-todo-prompt">›</span>',
+            '<input id="xfce-ws-todo-inp" class="xfce-ws-todo-inp" placeholder="Add a task…" type="text" />',
+            '<button id="xfce-ws-todo-add" class="xfce-ws-todo-add">↵</button>',
+          '</div>',
+          '<div id="xfce-ws-todo-list" class="xfce-ws-todo-list"></div>',
+          '<div class="xfce-ws-todo-footer">',
+            '<span id="xfce-ws-todo-count"></span>',
+            '<button id="xfce-ws-todo-clear" style="display:none;background:none;border:none;font-family:var(--mono);font-size:9px;color:var(--muted);cursor:pointer">Clear done</button>',
+          '</div>',
+        '</div>',
+      '</div>',
+    ].join('');
+    document.body.appendChild(wsOverlay);
+
+    // Tabs
+    wsOverlay.querySelectorAll('.xfce-ws-tab').forEach(function (btn) {
+      btn.addEventListener('click', function () { switchWsPane(btn.dataset.pane); });
+    });
+
+    // Close
+    document.getElementById('xfce-ws-close').addEventListener('click', closeWorkspace);
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape' && wsOverlay.classList.contains('open')) closeWorkspace();
+    });
+    document.addEventListener('click', function (e) {
+      if (!wsOverlay.classList.contains('open')) return;
+      if (wsOverlay.contains(e.target)) return;
+      closeWorkspace();
+    });
+
+    // Notes auto-save
+    var notesEl = document.getElementById('xfce-ws-notes');
+    var ind = document.getElementById('xfce-ws-ind');
+    notesEl.addEventListener('input', function () {
+      clearTimeout(wsNotesTimer);
+      ind.textContent = '● unsaved'; ind.style.color = 'var(--gold)';
+      wsNotesTimer = setTimeout(function () {
+        ind.textContent = '↑ saving…'; ind.style.color = 'var(--muted)';
+        fetch('/api/meta', {
+          method: 'PUT', credentials: 'include',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ 'dashboard.notes': notesEl.value }),
+        }).then(function () {
+          ind.textContent = '✓ saved'; ind.style.color = 'var(--jade)';
+          setTimeout(function () { ind.textContent = ''; }, 2000);
+        });
+      }, 1200);
+    });
+
+    // Todo add
+    function addTodo() {
+      var inp = document.getElementById('xfce-ws-todo-inp');
+      var text = inp.value.trim();
+      if (!text) return;
+      wsTodosData.push({ text: text, done: false });
+      inp.value = '';
+      renderTodos();
+      saveTodos();
+    }
+    document.getElementById('xfce-ws-todo-add').addEventListener('click', addTodo);
+    document.getElementById('xfce-ws-todo-inp').addEventListener('keydown', function (e) {
+      if (e.key === 'Enter') addTodo();
+    });
+
+    // Clear done
+    document.getElementById('xfce-ws-todo-clear').addEventListener('click', function () {
+      wsTodosData = wsTodosData.filter(function (t) { return !t.done; });
+      renderTodos(); saveTodos();
+    });
+
+    // Export .md
+    document.getElementById('xfce-ws-export').addEventListener('click', function () {
+      var date = new Date().toISOString().slice(0, 10);
+      var text, filename;
+      if (wsActivePane === 'notes') {
+        text     = document.getElementById('xfce-ws-notes').value;
+        filename = 'notes-' + date + '.md';
+      } else {
+        text     = wsTodosData.map(function (t) { return (t.done ? '- [x] ' : '- [ ] ') + t.text; }).join('\n');
+        filename = 'todos-' + date + '.md';
+      }
+      var blob = new Blob([text], { type: 'text/markdown' });
+      var a    = document.createElement('a');
+      a.href   = URL.createObjectURL(blob);
+      a.download = filename;
+      a.click();
+      URL.revokeObjectURL(a.href);
+    });
+  }
+
+  function switchWsPane(pane) {
+    wsActivePane = pane;
+    wsOverlay.querySelectorAll('.xfce-ws-tab').forEach(function (b) { b.classList.remove('active'); });
+    wsOverlay.querySelector('[data-pane="' + pane + '"]').classList.add('active');
+    document.getElementById('xfce-ws-notes-pane').style.display = pane === 'notes' ? '' : 'none';
+    document.getElementById('xfce-ws-todos-pane').style.display = pane === 'todos' ? '' : 'none';
+  }
+
+  function renderTodos() {
+    var list  = document.getElementById('xfce-ws-todo-list');
+    var count = document.getElementById('xfce-ws-todo-count');
+    var clear = document.getElementById('xfce-ws-todo-clear');
+    if (!list) return;
+    var done = wsTodosData.filter(function (t) { return t.done; }).length;
+    if (count) count.textContent = done + '/' + wsTodosData.length + ' done';
+    if (clear) clear.style.display = done > 0 ? '' : 'none';
+    list.innerHTML = wsTodosData.length === 0
+      ? '<div class="xfce-ws-todo-empty">No tasks yet</div>'
+      : '';
+    wsTodosData.forEach(function (t, i) {
+      var row = document.createElement('label');
+      row.className = 'xfce-ws-todo-item' + (t.done ? ' done' : '');
+      var cb = document.createElement('input');
+      cb.type = 'checkbox'; cb.checked = !!t.done;
+      cb.addEventListener('change', function () {
+        wsTodosData[i].done = cb.checked;
+        renderTodos(); saveTodos();
+      });
+      var span = document.createElement('span');
+      span.textContent = t.text;
+      row.appendChild(cb); row.appendChild(span);
+      list.appendChild(row);
+    });
+  }
+
+  function saveTodos() {
+    fetch('/api/meta', {
+      method: 'PUT', credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ 'dashboard.todos': JSON.stringify(wsTodosData) }),
+    });
+  }
+
+  function loadWsData() {
+    // On dashboard, read directly from the page's own elements if available
+    var dashNotes = document.getElementById('notes-area');
+    if (dashNotes) {
+      var ta = document.getElementById('xfce-ws-notes');
+      if (ta) ta.value = dashNotes.value;
+    } else {
+      fetch('/api/meta/dashboard~notes', { credentials: 'include' })
+        .then(function (r) { return r.ok ? r.json() : null; })
+        .then(function (d) {
+          var ta = document.getElementById('xfce-ws-notes');
+          if (ta && d && d.value != null) ta.value = d.value;
+        });
+    }
+    fetch('/api/meta/dashboard~todos', { credentials: 'include' })
+      .then(function (r) { return r.ok ? r.json() : null; })
+      .then(function (d) {
+        try { wsTodosData = JSON.parse(d && d.value ? d.value : '[]'); } catch (e) { wsTodosData = []; }
+        if (!Array.isArray(wsTodosData)) wsTodosData = [];
+        renderTodos();
+      });
+  }
+
+  function openWorkspace(pane) {
+    if (!wsOverlay) buildWorkspaceOverlay();
+    var isOpen = wsOverlay.classList.contains('open');
+    if (isOpen && wsActivePane === pane) { closeWorkspace(); return; }
+    switchWsPane(pane);
+    if (!isOpen) {
+      wsOverlay.classList.add('open');
+      loadWsData();
+    }
+    setTimeout(function () {
+      var focus = pane === 'notes'
+        ? document.getElementById('xfce-ws-notes')
+        : document.getElementById('xfce-ws-todo-inp');
+      if (focus) focus.focus();
+    }, 60);
+  }
+
+  function closeWorkspace() {
+    if (wsOverlay) wsOverlay.classList.remove('open');
+    // Sync indicator on dock buttons
+    document.querySelectorAll('[data-wspane]').forEach(function (btn) {
+      btn.classList.remove('active');
+    });
+  }
+
+  // ── Focus mode (spotlight on recently edited) ─────────────────────────
+  var focusedEl      = null;
+  var focusOrigStyle = null;
+
+  function buildFocusDim() {
+    var dim = document.createElement('div');
+    dim.id  = 'xfce-focus-dim';
+    dim.className = 'xfce-focus-dim';
+    dim.addEventListener('click', exitFocusMode);
+    document.body.appendChild(dim);
+    return dim;
+  }
+
+  function enterFocusMode(target) {
+    if (focusedEl) return;
+
+    var dim  = document.getElementById('xfce-focus-dim') || buildFocusDim();
+    var rect = target.getBoundingClientRect();
+
+    // Capture current computed inline style so we can fully restore it
+    focusOrigStyle = {
+      position:  target.style.position  || '',
+      left:      target.style.left      || '',
+      top:       target.style.top       || '',
+      width:     target.style.width     || '',
+      height:    target.style.height    || '',
+      zIndex:    target.style.zIndex    || '',
+      overflow:  target.style.overflow  || '',
+      maxHeight: target.style.maxHeight || '',
+      boxShadow: target.style.boxShadow || '',
+      transition:target.style.transition|| '',
+    };
+    focusedEl = target;
+
+    var tw   = Math.round(window.innerWidth  * 0.92);
+    var maxH = Math.round(window.innerHeight * 0.86);
+    var tl   = Math.round((window.innerWidth - tw) / 2);
+
+    // Fix position and set target width — let height be auto so it fits content
+    target.style.transition = 'none';
+    target.style.position   = 'fixed';
+    target.style.left       = rect.left + 'px';
+    target.style.top        = rect.top  + 'px';
+    target.style.width      = tw        + 'px';
+    target.style.height     = 'auto';
+    target.style.maxHeight  = maxH      + 'px';
+    target.style.zIndex     = '9995';
+    target.style.overflow   = 'auto';
+    target.classList.add('xfce-in-focus');
+
+    // Reflow so the browser computes auto height at the new width
+    var actualH = Math.min(target.scrollHeight, maxH);
+    var tt      = Math.round((window.innerHeight - actualH) / 2);
+
+    // Animate only position — height stays auto (content-driven)
+    target.style.transition = [
+      'left .32s cubic-bezier(.34,1.15,.64,1)',
+      'top .32s cubic-bezier(.34,1.15,.64,1)',
+      'width .28s cubic-bezier(.4,0,.2,1)',
+      'box-shadow .28s',
+    ].join(',');
+    target.style.left      = tl + 'px';
+    target.style.top       = tt + 'px';
+    target.style.boxShadow = '0 32px 80px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)';
+
+    dim.classList.add('active');
+    document.addEventListener('keydown', onFocusKey);
+  }
+
+  function exitFocusMode() {
+    if (!focusedEl) return;
+    var target = focusedEl;
+    var dim    = document.getElementById('xfce-focus-dim');
+
+    if (dim) dim.classList.remove('active');
+    document.removeEventListener('keydown', onFocusKey);
+
+    // Fade out, restore, fade back in
+    target.style.transition = 'opacity .18s';
+    target.style.opacity    = '0';
+
+    setTimeout(function () {
+      target.classList.remove('xfce-in-focus');
+      Object.keys(focusOrigStyle).forEach(function (k) {
+        target.style[k] = focusOrigStyle[k];
+      });
+      target.style.opacity = '0';
+      target.getBoundingClientRect();
+      target.style.transition = 'opacity .15s';
+      target.style.opacity    = '1';
+      setTimeout(function () {
+        target.style.transition = '';
+        target.style.opacity    = '';
+      }, 160);
+      focusedEl      = null;
+      focusOrigStyle = null;
+    }, 180);
+  }
+
+  function onFocusKey(e) {
+    if (e.key === 'Escape') exitFocusMode();
+  }
+
+  function initFocusMode() {
+    var dashContent = document.querySelector('.dash-content');
+    if (!dashContent) return;
+    var head = dashContent.querySelector('.section-head');
+    if (!head) return;
+    head.classList.add('xfce-focus-trigger');
+    head.title = 'Click to focus';
+    head.addEventListener('click', function () { enterFocusMode(dashContent); });
+  }
+
+  // ── Dock ──────────────────────────────────────────────────────────────
+  var dockInner;
+
+  function makeDockItem(icon, label, hrefOrNull, isActive, isBtn) {
+    var item = isBtn ? el('button') : el('a');
+    item.className = 'xfce-dock-item' + (isActive ? ' active' : '');
+    if (!isBtn) item.href = hrefOrNull;
+    item.setAttribute('aria-label', label);
+    item.dataset.label = label;
+    item.innerHTML = '<span class="xfce-dock-icon">' + icon + '</span><span class="xfce-dock-lbl">' + label + '</span>';
+    item.style.setProperty('--ds', '1');
+    return item;
+  }
+
+  function buildDock() {
+    var dock = el('div', 'xfce-dock');
+    dock.id = 'xfce-dock';
+    dockInner = el('div', 'xfce-dock-inner');
+    dock.appendChild(dockInner);
+
+    // Nav items group
+    var navGroup = el('div', 'xfce-dock-group');
+    NAV.forEach(function (n) {
+      navGroup.appendChild(makeDockItem(n.icon, n.label, n.href, page === n.key, false));
+    });
+    dockInner.appendChild(navGroup);
+
+    // Separator
+    dockInner.appendChild(el('div', 'xfce-dock-sep'));
+
+    // Collections group (populated by /api/info)
+    var colGroup = el('div', 'xfce-dock-group');
+    colGroup.id = 'xfce-dock-cols';
+    dockInner.appendChild(colGroup);
+
+    // Separator
+    dockInner.appendChild(el('div', 'xfce-dock-sep'));
+
+    // Workspace group: Notes + To-do (open overlay)
+    var wsGroup = el('div', 'xfce-dock-group');
+    WORKSPACE.forEach(function (w) {
+      var btn = makeDockItem(w.icon, w.label, null, false, true);
+      btn.dataset.wspane = w.pane;
+      btn.addEventListener('click', function (e) {
+        e.stopPropagation();
+        openWorkspace(w.pane);
+      });
+      wsGroup.appendChild(btn);
+    });
+    dockInner.appendChild(wsGroup);
+
+    // Separator
+    dockInner.appendChild(el('div', 'xfce-dock-sep'));
+
+    // Tools popup button (Schema, Build, Import)
+    var toolsActive = TOOLS.some(function (t) { return t.key === page; });
+    var toolsBtn = makeDockItem('⚒', 'Tools', null, toolsActive, true);
+    toolsBtn.id = 'xfce-tools-btn';
+    toolsBtn.addEventListener('click', function (e) {
+      e.stopPropagation();
+      toggleToolsPopup();
+    });
+    dockInner.appendChild(toolsBtn);
+
+    // Separator
+    dockInner.appendChild(el('div', 'xfce-dock-sep'));
+
+    // HUD toggle button
+    var hudBtn = makeDockItem('▣', 'HUD', null, false, true);
+    hudBtn.addEventListener('click', toggleHUD);
+    dockInner.appendChild(hudBtn);
+
+    // Scheme toggle
+    var schemeBtn = document.getElementById('scheme-toggle');
+    var schemeClone = makeDockItem('◐', 'Scheme', null, false, true);
+    schemeClone.addEventListener('click', function () {
+      if (schemeBtn) schemeBtn.click();
+      setTimeout(function () {
+        schemeClone.querySelector('.xfce-dock-icon').textContent = schemeBtn ? schemeBtn.textContent : '◐';
+      }, 50);
+    });
+    dockInner.appendChild(schemeClone);
+
+    document.body.appendChild(dock);
+
+    // Any click inside the dock exits focus mode (capture phase runs
+    // before stopPropagation on individual buttons can block it)
+    dock.addEventListener('click', function () {
+      if (focusedEl) exitFocusMode();
+    }, true);
+
+    // ── Magnification ─────────────────────────────────────────────────
+    function applyMag(cx) {
+      var items = dockInner.querySelectorAll('.xfce-dock-item');
+      items.forEach(function (item) {
+        var r   = item.getBoundingClientRect();
+        var mid = r.left + r.width / 2;
+        var d   = Math.abs(cx - mid);
+        var s   = d < 96 ? 1 + (1 - d / 96) * 0.95 : 1;
+        item.style.setProperty('--ds', s.toFixed(3));
+      });
+    }
+
+    dock.addEventListener('mousemove', function (e) { applyMag(e.clientX); });
+    dock.addEventListener('mouseleave', function () {
+      dockInner.querySelectorAll('.xfce-dock-item').forEach(function (item) {
+        item.style.setProperty('--ds', '1');
+      });
+    });
+  }
+
+  // ── Load /api/info ────────────────────────────────────────────────────
+  function loadInfo() {
+    fetch('/api/info', { credentials: 'include' })
+      .then(function (r) { return r.ok ? r.json() : null; })
+      .then(function (info) {
+        if (!info) return;
+
+        // Site name
+        var siteEl = document.getElementById('xfce-sb-site');
+        if (siteEl) siteEl.textContent = info.siteName || info.podPath.split('/').pop().replace('.pod', '');
+
+        // Collections in dock
+        var colGroup = document.getElementById('xfce-dock-cols');
+        if (colGroup) {
+          var topLevel = (info.collections || []).filter(function (c) { return !c.parent; });
+          topLevel.forEach(function (col) {
+            var isSingleton = !!col.singleton;
+            var href = isSingleton
+              ? '/editor.html?collection=' + encodeURIComponent(col.id) + '&singleton=1'
+              : '/entries.html?col=' + encodeURIComponent(col.id) + '&label=' + encodeURIComponent(col.label);
+            var isActive = isSingleton
+              ? page === 'editor' && activeCol === col.id
+              : page === 'entries' && activeCol === col.id;
+            // Abbreviation icon (first char of label)
+            var abbr = col.label.substring(0, 2);
+            var item = makeDockItem(abbr, col.label, href, isActive, false);
+            item.querySelector('.xfce-dock-icon').style.cssText = 'font-size:9px;font-family:var(--mono);letter-spacing:-.02em;line-height:1;';
+            colGroup.appendChild(item);
+          });
+        }
+
+        // HUD pod section
+        var hudPod = document.getElementById('xfce-hud-pod');
+        if (hudPod) {
+          var total = (info.collections || []).reduce(function (s, c) { return s + (c.total || 0); }, 0);
+          hudPod.innerHTML = [
+            hudRow('File', info.podPath.split('/').pop()),
+            hudRow('Format', 'v' + info.formatVersion),
+            hudRow('Admin', 'v' + info.adminVersion),
+            hudRow('Collections', info.collections.length),
+            hudRow('Entries', total),
+          ].join('');
+        }
+
+        // HUD collections section
+        var hudCols = document.getElementById('xfce-hud-cols');
+        if (hudCols) {
+          hudCols.innerHTML = (info.collections || []).map(function (col) {
+            return hudRow(col.label, col.total + ' entr' + (col.total === 1 ? 'y' : 'ies'));
+          }).join('');
+        }
+      })
+      .catch(function () {});
+
+    // Site meta
+    fetch('/api/meta/site~name', { credentials: 'include' })
+      .then(function (r) { return r.ok ? r.json() : null; })
+      .then(function (d) {
+        if (!d || !d.value) return;
+        var siteEl = document.getElementById('xfce-sb-site');
+        if (siteEl) siteEl.textContent = d.value;
+      })
+      .catch(function () {});
+
+    // User from topbar (wait for other scripts to populate it)
+    setTimeout(function () {
+      var topbarUser = document.getElementById('topbar-user');
+      var sbUser     = document.getElementById('xfce-sb-user');
+      if (sbUser && topbarUser) {
+        var observer = new MutationObserver(function () {
+          sbUser.textContent = topbarUser.textContent;
+        });
+        observer.observe(topbarUser, { childList: true, characterData: true, subtree: true });
+        sbUser.textContent = topbarUser.textContent;
+      }
+    }, 300);
+  }
+
+  function hudRow(label, value) {
+    return '<div class="xfce-hud-row"><span>' + label + '</span><span>' + value + '</span></div>';
+  }
+
+  // ── Keyboard shortcuts ────────────────────────────────────────────────
+  function bindKeys() {
+    document.addEventListener('keydown', function (e) {
+      var mod = e.metaKey || e.ctrlKey;
+      if (!mod || !e.shiftKey) return;
+
+      if (e.key === 'd' || e.key === 'D') {
+        e.preventDefault();
+        toggleHUD();
+      }
+
+      // ⌘⇧L — cycle back to glass
+      if (e.key === 'l' || e.key === 'L') {
+        e.preventDefault();
+        localStorage.setItem('orb_style', 'glass');
+        location.reload();
+      }
+    });
+  }
+
+  // ── Init ──────────────────────────────────────────────────────────────
+  function init() {
+    buildStatusBar();
+    buildMetaPanel();
+    buildDock();
+    loadInfo();
+    bindKeys();
+    initFocusMode();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();