@a83/orbiter-admin 0.3.40 → 0.3.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a83/orbiter-admin",
-  "version": "0.3.40",
+  "version": "0.3.42",
   "description": "Standalone admin server for Orbiter CMS",
   "type": "module",
   "main": "./src/server.js",

package/public/style.css

@@ -2028,23 +2028,52 @@ a.xfce-sb-logo:hover     { opacity: .8; }
 }
 .xfce-dock-item { position: relative; }
 
-/* Hover + badge above collection dock items */
-.xfce-col-create {
+/* Hover preview card above collection dock items */
+.xfce-col-preview {
   position: fixed; z-index: 99990;
-  width: 22px; height: 22px; border-radius: 50%;
-  background: var(--accent);
-  color: color-mix(in srgb, var(--bg1) 15%, #000);
-  font-size: 17px; line-height: 22px; font-weight: 300;
-  text-align: center; text-decoration: none;
   transform: translateX(-50%) translateY(6px);
   opacity: 0; pointer-events: none;
-  transition: opacity .13s, transform .13s cubic-bezier(.34,1.5,.64,1);
-  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
-  user-select: none;
+  transition: opacity .15s, transform .15s cubic-bezier(.34,1.4,.64,1);
+  background: var(--bg1); border: 1px solid var(--line);
+  border-top: 2px solid var(--accent);
+  border-radius: 10px; min-width: 180px; max-width: 240px;
+  box-shadow: 0 4px 24px rgba(0,0,0,.25);
+  overflow: hidden; font-family: var(--mono);
 }
-.xfce-col-create.visible {
+.xfce-col-preview.visible {
   opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
 }
+html[data-dock-pos="left"] .xfce-col-preview {
+  transform: translateX(0) translateY(-50%);
+}
+html[data-dock-pos="left"] .xfce-col-preview.visible {
+  transform: translateX(6px) translateY(-50%);
+}
+.xfce-preview-head { padding: 7px 12px; border-bottom: 1px solid var(--line); }
+.xfce-preview-head a { font-size: 10px; font-weight: 600; color: var(--accent); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; }
+.xfce-preview-head a:hover { text-decoration: underline; }
+.xfce-preview-entries { padding: 4px 0; }
+.xfce-preview-row {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 4px 12px; gap: 8px; text-decoration: none;
+  transition: background .1s;
+}
+.xfce-preview-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.xfce-preview-slug { font-size: 10px; color: var(--body); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.xfce-preview-date { font-size: 9px; color: var(--muted); flex-shrink: 0; }
+.xfce-preview-empty { padding: 6px 12px; font-size: 10px; color: var(--muted); }
+.xfce-preview-loading { padding: 10px 12px; font-size: 10px; color: var(--muted); }
+.xfce-preview-actions {
+  display: flex; border-top: 1px solid var(--line);
+}
+.xfce-preview-action {
+  flex: 1; padding: 6px 8px; font-size: 10px; font-family: var(--mono);
+  color: var(--accent); text-decoration: none; text-align: center;
+  background: none; border: none; cursor: pointer;
+  transition: background .1s; white-space: nowrap;
+}
+.xfce-preview-action + .xfce-preview-action { border-left: 1px solid var(--line); }
+.xfce-preview-action:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
 
 /* ── Command Palette ─────────────────────────────────────── */
 .xfce-palette {
@@ -2123,27 +2152,49 @@ a.xfce-sb-logo:hover     { opacity: .8; }
 
 /* ── Status bar build indicator ──────────────────────────── */
 .xfce-sb-build { font-size: 9px; font-family: var(--mono); color: var(--muted); white-space: nowrap; }
-
-/* ── Dock context menu ───────────────────────────────────── */
-.xfce-ctx-menu {
-  display: none; position: fixed; z-index: 100000;
-  background: var(--bg1); border: 1px solid var(--line);
-  border-top: 2px solid var(--accent);
-  border-radius: 8px; padding: 4px 0;
-  box-shadow: 0 4px 24px rgba(0,0,0,.25);
-  min-width: 160px;
-  opacity: 0; transform: scale(.96); transform-origin: top left;
-  transition: opacity .1s, transform .1s;
+.xfce-sb-g-ind {
+  font-size: 10px; font-family: var(--mono); font-weight: 700; white-space: nowrap;
+  color: var(--bg1); background: var(--accent);
+  border-radius: 4px; padding: 1px 6px; letter-spacing: .04em;
+  animation: xfce-blink .6s step-end infinite;
+}
+@keyframes xfce-blink { 0%,100% { opacity:1; } 50% { opacity:.4; } }
+
+/* ── Left dock mode ───────────────────────────────────────── */
+html[data-style="xfce"][data-dock-pos="left"] .main {
+  padding-bottom: 20px !important;
+  padding-left: 100px !important;
+}
+html[data-style="xfce"][data-dock-pos="left"] .xfce-dock {
+  bottom: auto; left: 16px; top: 50%;
+  transform: translateY(-50%);
+  padding: 10px 6px;
+  align-items: center;
 }
-.xfce-ctx-menu.open { opacity: 1; transform: scale(1); }
-.xfce-ctx-item {
-  display: flex; align-items: center; gap: 10px;
-  width: 100%; background: none; border: none; cursor: pointer;
-  padding: 7px 14px; font-size: 12px; font-family: var(--mono);
-  color: var(--body); text-align: left; transition: background .1s;
+html[data-style="xfce"][data-dock-pos="left"] .xfce-dock-inner {
+  flex-direction: column; align-items: center; gap: 4px;
+}
+html[data-style="xfce"][data-dock-pos="left"] .xfce-dock-group {
+  flex-direction: column; align-items: center; gap: 4px;
+}
+html[data-style="xfce"][data-dock-pos="left"] .xfce-dock-sep {
+  width: 28px; height: 1px; margin: 2px 0;
+}
+html[data-style="xfce"][data-dock-pos="left"] .xfce-dock-item {
+  transform-origin: left center;
+}
+html[data-style="xfce"][data-dock-pos="left"] .xfce-toast-host {
+  bottom: 20px; left: 110px; transform: none;
+}
+html[data-style="xfce"][data-dock-pos="left"] .xfce-palette {
+  padding-bottom: 20px; padding-left: 100px; align-items: center;
+}
+html[data-style="xfce"][data-dock-pos="left"] .xfce-tools-popup {
+  bottom: auto;
+}
+html[data-style="xfce"][data-dock-pos="left"] .xfce-ws-overlay {
+  bottom: auto; left: 110px; top: 50%; transform: translateY(-50%);
 }
-.xfce-ctx-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--heading); }
-.xfce-ctx-icon { width: 16px; text-align: center; color: var(--accent); flex-shrink: 0; }
 
 /* ── Toast host (above dock) ─────────────────────────────── */
 .xfce-toast-host {

package/public/xfce.js

@@ -63,6 +63,7 @@
       '</div>',
       '<div class="xfce-sb-center" id="xfce-sb-title"></div>',
       '<div class="xfce-sb-right">',
+        '<span id="xfce-sb-g-ind" class="xfce-sb-g-ind" style="display:none" title="g mode: d=dashboard m=media s=settings u=users b=build i=import h=schema a=account">g ›</span>',
         '<button id="xfce-sb-palette-btn" class="xfce-sb-palette-btn" title="Command palette (⌘K)">⌘</button>',
         '<span class="xfce-sb-div">·</span>',
         '<span id="xfce-sb-build" class="xfce-sb-build" title="Last build"></span>',
@@ -168,6 +169,30 @@
       openPalette();
     });
     toolsPopup.appendChild(palBtn);
+
+    var dockSep2 = document.createElement('div');
+    dockSep2.className = 'xfce-tools-sep';
+    toolsPopup.appendChild(dockSep2);
+
+    var dockPosBtn = el('button', 'xfce-tools-item');
+    dockPosBtn.id = 'xfce-dock-pos-btn';
+    function updateDockPosLabel() {
+      var pos = document.documentElement.dataset.dockPos || 'bottom';
+      dockPosBtn.innerHTML = '<span class="xfce-tools-icon">' + (pos === 'left' ? '⬌' : '⬍') + '</span>'
+        + '<span>Dock: ' + (pos === 'left' ? 'left' : 'bottom') + '</span>';
+    }
+    updateDockPosLabel();
+    dockPosBtn.addEventListener('click', function (e) {
+      e.stopPropagation();
+      var cur = document.documentElement.dataset.dockPos || 'bottom';
+      var next = cur === 'bottom' ? 'left' : 'bottom';
+      localStorage.setItem('orb_dock_pos', next);
+      document.documentElement.dataset.dockPos = next;
+      updateDockPosLabel();
+      toolsPopup.classList.remove('open');
+      _previewCache = {};
+    });
+    toolsPopup.appendChild(dockPosBtn);
     document.body.appendChild(toolsPopup);
     document.addEventListener('click', function () {
       toolsPopup.classList.remove('open');
@@ -179,40 +204,123 @@
 
   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';
+    var btn  = document.getElementById('xfce-tools-btn');
+    var dock = document.getElementById('xfce-dock');
+    var isLeft = document.documentElement.dataset.dockPos === 'left';
+    if (btn && dock) {
+      var bRect = btn.getBoundingClientRect();
+      var dRect = dock.getBoundingClientRect();
+      if (isLeft) {
+        toolsPopup.style.left   = Math.round(dRect.right + 10) + 'px';
+        toolsPopup.style.top    = Math.round(bRect.top + bRect.height / 2) + 'px';
+        toolsPopup.style.bottom = 'auto';
+        toolsPopup.style.transform = 'translateY(-50%)';
+      } else {
+        toolsPopup.style.left      = Math.round(bRect.left + bRect.width / 2) + 'px';
+        toolsPopup.style.top       = '';
+        toolsPopup.style.bottom    = '';
+        toolsPopup.style.transform = '';
+      }
     }
     toolsPopup.classList.toggle('open');
   }
 
-  // ── Hover + badge above collection items ─────────────────────────────
-  var colCreateEl, colCreateTimer;
+  // ── Hover preview card above collection items ────────────────────────
+  var _previewEl = null, _previewTimer = null, _previewCache = {};
 
-  function buildColCreate() {
-    colCreateEl = el('a', 'xfce-col-create');
-    colCreateEl.id = 'xfce-col-create';
-    colCreateEl.textContent = '+';
-    colCreateEl.addEventListener('mouseenter', function () { clearTimeout(colCreateTimer); });
-    colCreateEl.addEventListener('mouseleave', function () { colCreateTimer = setTimeout(hideColCreate, 120); });
-    document.body.appendChild(colCreateEl);
+  function buildPreview() {
+    _previewEl = el('div', 'xfce-col-preview');
+    _previewEl.id = 'xfce-col-preview';
+    _previewEl.addEventListener('mouseenter', function () { clearTimeout(_previewTimer); });
+    _previewEl.addEventListener('mouseleave', function () { _previewTimer = setTimeout(hideColPreview, 150); });
+    document.body.appendChild(_previewEl);
   }
 
-  function showColCreate(href, itemEl) {
-    if (!colCreateEl) buildColCreate();
-    clearTimeout(colCreateTimer);
-    var dock = document.getElementById('xfce-dock');
-    var dockTop = dock ? dock.getBoundingClientRect().top : 0;
-    var itemRect = itemEl.getBoundingClientRect();
-    colCreateEl.href = href;
-    colCreateEl.style.left = Math.round(itemRect.left + itemRect.width / 2) + 'px';
-    colCreateEl.style.top  = Math.round(dockTop - 34) + 'px';
-    colCreateEl.classList.add('visible');
+  function showColPreview(col, itemEl) {
+    if (!_previewEl) buildPreview();
+    clearTimeout(_previewTimer);
+    _previewTimer = setTimeout(function () { _renderPreview(col, itemEl); }, 280);
   }
 
-  function hideColCreate() {
-    if (colCreateEl) colCreateEl.classList.remove('visible');
+  function _renderPreview(col, itemEl) {
+    var dock    = document.getElementById('xfce-dock');
+    var isLeft  = document.documentElement.dataset.dockPos === 'left';
+    var dockR   = dock ? dock.getBoundingClientRect() : { top: 0, right: 0 };
+    var itemR   = itemEl.getBoundingClientRect();
+
+    function place() {
+      if (isLeft) {
+        _previewEl.style.left = Math.round(dockR.right + 10) + 'px';
+        _previewEl.style.top  = Math.round(itemR.top + itemR.height / 2 - _previewEl.offsetHeight / 2) + 'px';
+        _previewEl.style.bottom = 'auto';
+      } else {
+        var cx = Math.round(itemR.left + itemR.width / 2);
+        _previewEl.style.left   = cx + 'px';
+        _previewEl.style.bottom = Math.round(window.innerHeight - dockR.top + 10) + 'px';
+        _previewEl.style.top    = 'auto';
+      }
+    }
+
+    var newHref     = '/editor.html?collection=' + encodeURIComponent(col.id);
+    var entriesHref = col.singleton
+      ? newHref + '&singleton=1'
+      : '/entries.html?col=' + encodeURIComponent(col.id) + '&label=' + encodeURIComponent(col.label);
+
+    function render(entries) {
+      var rows = entries.length
+        ? entries.slice(0, 3).map(function (e) {
+            var slug = e.slug || e.id || '';
+            var date = (e.updated_at || e.created_at || '').substring(5, 10);
+            var href = '/editor.html?collection=' + encodeURIComponent(col.id) + '&slug=' + encodeURIComponent(slug);
+            return '<a class="xfce-preview-row" href="' + href + '">'
+              + '<span class="xfce-preview-slug">' + escHtml(slug) + '</span>'
+              + '<span class="xfce-preview-date">' + date + '</span>'
+              + '</a>';
+          }).join('')
+        : '<div class="xfce-preview-empty">no entries yet</div>';
+      _previewEl.innerHTML =
+        '<div class="xfce-preview-head"><a href="' + entriesHref + '">' + escHtml(col.label) + '</a></div>'
+        + '<div class="xfce-preview-entries">' + rows + '</div>'
+        + '<div class="xfce-preview-actions">'
+        +   '<a class="xfce-preview-action" href="' + newHref + '">+ new entry</a>'
+        +   '<a class="xfce-preview-action" href="' + entriesHref + '">◫ view all</a>'
+        +   '<button class="xfce-preview-action xfce-preview-export" data-col="' + escHtml(col.id) + '">↓ export</button>'
+        + '</div>';
+      var expBtn = _previewEl.querySelector('.xfce-preview-export');
+      if (expBtn) expBtn.addEventListener('click', function (ev) {
+        ev.preventDefault();
+        fetch('/api/terminal/export?col=' + encodeURIComponent(col.id) + '&format=json&drafts=0', { credentials: 'include' })
+          .then(function (r) { return r.blob(); })
+          .then(function (blob) {
+            var a = document.createElement('a');
+            a.href = URL.createObjectURL(blob); a.download = col.id + '.json';
+            document.body.appendChild(a); a.click(); a.remove();
+          });
+        hideColPreview();
+      });
+      _previewEl.classList.add('visible');
+      place();
+    }
+
+    if (_previewCache[col.id]) {
+      render(_previewCache[col.id]);
+      return;
+    }
+    _previewEl.innerHTML = '<div class="xfce-preview-loading">…</div>';
+    _previewEl.classList.add('visible');
+    place();
+    fetch('/api/collections/' + encodeURIComponent(col.id) + '/entries?limit=3', { credentials: 'include' })
+      .then(function (r) { return r.ok ? r.json() : null; })
+      .then(function (d) {
+        var entries = d ? (d.entries || (Array.isArray(d) ? d : [])) : [];
+        _previewCache[col.id] = entries;
+        if (_previewEl.classList.contains('visible')) render(entries);
+      });
+  }
+
+  function hideColPreview() {
+    clearTimeout(_previewTimer);
+    if (_previewEl) _previewEl.classList.remove('visible');
   }
 
   // ── Command Palette ───────────────────────────────────────────────────
@@ -1000,19 +1108,25 @@
       if (focusedEl) exitFocusMode();
     }, true);
 
+    // Apply saved dock position
+    var _savedDockPos = localStorage.getItem('orb_dock_pos') || 'bottom';
+    document.documentElement.dataset.dockPos = _savedDockPos;
+
     // ── Magnification ─────────────────────────────────────────────────
-    function applyMag(cx) {
-      var items = dockInner.querySelectorAll('.xfce-dock-item');
+    function applyMag(cx, cy) {
+      var isLeft = document.documentElement.dataset.dockPos === 'left';
+      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 mid = isLeft ? (r.top + r.height / 2) : (r.left + r.width / 2);
+        var pos = isLeft ? cy : cx;
+        var d   = Math.abs(pos - mid);
         var s   = d < 80 ? 1 + (1 - d / 80) * 0.50 : 1;
         item.style.setProperty('--ds', s.toFixed(3));
       });
     }
 
-    dock.addEventListener('mousemove', function (e) { applyMag(e.clientX); });
+    dock.addEventListener('mousemove', function (e) { applyMag(e.clientX, e.clientY); });
     dock.addEventListener('mouseleave', function () {
       dockInner.querySelectorAll('.xfce-dock-item').forEach(function (item) {
         item.style.setProperty('--ds', '1');
@@ -1056,15 +1170,9 @@
               item.appendChild(badge);
             }
 
-            // Hover shows + badge above this item
-            var createHref = col.singleton
-              ? '/editor.html?collection=' + encodeURIComponent(col.id) + '&singleton=1'
-              : '/editor.html?collection=' + encodeURIComponent(col.id);
-            item.addEventListener('mouseenter', function () { showColCreate(createHref, item); });
-            item.addEventListener('mouseleave', function () { colCreateTimer = setTimeout(hideColCreate, 120); });
-
-            // Right-click context menu
-            addDockCtxMenu(item, col);
+            // Hover shows preview card with recent entries
+            item.addEventListener('mouseenter', function () { showColPreview(col, item); });
+            item.addEventListener('mouseleave', function () { _previewTimer = setTimeout(hideColPreview, 150); });
 
             colGroup.appendChild(item);
 
@@ -1124,6 +1232,17 @@
   }
 
   // ── Keyboard shortcuts ────────────────────────────────────────────────
+  var _gPending = false, _gTimer = null;
+  var G_MAP = { d: '/dashboard.html', m: '/media.html', s: '/settings.html',
+                u: '/users.html',     b: '/build.html',  i: '/import.html',
+                h: '/schema.html',   a: '/account.html' };
+
+  function setGMode(on) {
+    _gPending = on;
+    var ind = document.getElementById('xfce-sb-g-ind');
+    if (ind) ind.style.display = on ? '' : 'none';
+  }
+
   function bindKeys() {
     // Capture-phase ⌘K: fires before admin-utils.js bubble-phase listener, stops it
     document.addEventListener('keydown', function (e) {
@@ -1146,11 +1265,26 @@
       // / — open palette (when not typing in an input; Shift+7 on DE keyboard also produces '/')
       if (!mod && !e.altKey && e.key === '/' && !isEditing(e.target)) {
         e.preventDefault();
+        setGMode(false); clearTimeout(_gTimer);
         if (palette && palette.classList.contains('open')) closePalette();
         else openPalette();
         return;
       }
 
+      // g — vim-style navigation prefix (g d = dashboard, g m = media, …)
+      if (!mod && !e.shiftKey && !e.altKey && e.key === 'g' && !isEditing(e.target)) {
+        e.preventDefault();
+        setGMode(true);
+        clearTimeout(_gTimer);
+        _gTimer = setTimeout(function () { setGMode(false); }, 1500);
+        return;
+      }
+      if (_gPending && !isEditing(e.target)) {
+        clearTimeout(_gTimer); setGMode(false);
+        if (G_MAP[e.key]) { e.preventDefault(); location.href = G_MAP[e.key]; }
+        return;
+      }
+
       // ⌘⇧D — toggle HUD
       if (mod && e.shiftKey && (e.key === 'd' || e.key === 'D')) {
         e.preventDefault();
@@ -1206,81 +1340,6 @@
       });
   }
 
-  // ── Dock right-click context menu ─────────────────────────────────────
-  var _ctxMenu = null;
-
-  function buildCtxMenu() {
-    _ctxMenu = document.createElement('div');
-    _ctxMenu.className = 'xfce-ctx-menu';
-    _ctxMenu.id = 'xfce-ctx-menu';
-    document.body.appendChild(_ctxMenu);
-    document.addEventListener('click', function (e) {
-      if (_ctxMenu && !_ctxMenu.contains(e.target)) closeCtxMenu();
-    }, true);
-    document.addEventListener('keydown', function (e) {
-      if (e.key === 'Escape') closeCtxMenu();
-    });
-  }
-
-  function openCtxMenu(x, y, items) {
-    if (!_ctxMenu) buildCtxMenu();
-    _ctxMenu.innerHTML = items.map(function (it) {
-      return '<button class="xfce-ctx-item" data-href="' + (it.href || '') + '">'
-        + '<span class="xfce-ctx-icon">' + it.icon + '</span>'
-        + '<span>' + it.label + '</span>'
-        + '</button>';
-    }).join('');
-    _ctxMenu.querySelectorAll('.xfce-ctx-item').forEach(function (btn) {
-      btn.addEventListener('click', function () {
-        var href = btn.dataset.href;
-        closeCtxMenu();
-        if (href) location.href = href;
-      });
-    });
-    var vw = window.innerWidth, vh = window.innerHeight;
-    _ctxMenu.style.display = 'block';
-    var w = _ctxMenu.offsetWidth, h = _ctxMenu.offsetHeight;
-    _ctxMenu.style.left = Math.min(x, vw - w - 8) + 'px';
-    _ctxMenu.style.top  = Math.min(y, vh - h - 8) + 'px';
-    _ctxMenu.classList.add('open');
-  }
-
-  function closeCtxMenu() {
-    if (!_ctxMenu) return;
-    _ctxMenu.classList.remove('open');
-    setTimeout(function () { if (_ctxMenu) _ctxMenu.style.display = 'none'; }, 120);
-  }
-
-  function addDockCtxMenu(item, col) {
-    item.addEventListener('contextmenu', function (e) {
-      e.preventDefault();
-      var entriesHref = col.singleton
-        ? '/editor.html?collection=' + encodeURIComponent(col.id) + '&singleton=1'
-        : '/entries.html?col=' + encodeURIComponent(col.id) + '&label=' + encodeURIComponent(col.label);
-      var newHref = '/editor.html?collection=' + encodeURIComponent(col.id);
-      openCtxMenu(e.clientX, e.clientY, [
-        { icon: '◫', label: 'View entries', href: entriesHref },
-        { icon: '+', label: 'New entry',    href: newHref },
-        { icon: '↓', label: 'Export JSON',  href: '' },
-      ]);
-      // Wire export separately (needs fetch, not href)
-      var exportBtn = _ctxMenu.querySelectorAll('.xfce-ctx-item')[2];
-      if (exportBtn) {
-        exportBtn.addEventListener('click', function (ev) {
-          ev.stopImmediatePropagation();
-          closeCtxMenu();
-          fetch('/api/terminal/export?col=' + encodeURIComponent(col.id) + '&format=json&drafts=0', { credentials: 'include' })
-            .then(function (r) { return r.blob(); })
-            .then(function (blob) {
-              var a = document.createElement('a');
-              a.href = URL.createObjectURL(blob);
-              a.download = col.id + '.json';
-              document.body.appendChild(a); a.click(); a.remove();
-            });
-        }, { once: true });
-      }
-    });
-  }
 
   // ── Init ──────────────────────────────────────────────────────────────
   function init() {