studiograph 1.2.0-beta.9 → 1.2.1

package/dist/server/chrome/chrome.js

@@ -0,0 +1,540 @@
+/**
+ * Studiograph Chrome — Shared App Header & Footer
+ *
+ * Usage: Add to any app editor HTML:
+ *   <link rel="stylesheet" href="/api/chrome/chrome.css">
+ *   <script src="/api/chrome/chrome.js"></script>
+ *
+ * Body data attributes:
+ *   data-sg-repo          — repo name
+ *   data-sg-entity-id     — entity ID
+ *   data-sg-entity-type   — entity type (deck, document, etc.)
+ *   data-sg-view-url      — URL for the View/Present button
+ *   data-sg-view-label    — label for the view button (default "View")
+ */
+(function () {
+  'use strict';
+
+  // ── Config ──────────────────────────────────────────────
+  var body = document.body;
+  var REPO = body.dataset.sgRepo || '';
+  var WORKSPACE = body.dataset.sgWorkspace || '';
+  var ENTITY_ID = body.dataset.sgEntityId || '';
+  var VIEW_URL = body.dataset.sgViewUrl || '';
+  var VIEW_LABEL = body.dataset.sgViewLabel || 'View';
+
+  if (!REPO && !WORKSPACE) return; // no repo or workspace = don't inject chrome
+
+  var workspaceMode = !REPO && !!WORKSPACE; // footer only, no header
+
+  if (!workspaceMode) body.classList.add('sg-chrome-active');
+
+  // ── Helpers ─────────────────────────────────────────────
+  function esc(s) {
+    if (!s) return '';
+    var d = document.createElement('div');
+    d.textContent = s;
+    return d.innerHTML;
+  }
+
+  function el(tag, cls, html) {
+    var e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (html) e.innerHTML = html;
+    return e;
+  }
+
+  function titleCase(str) {
+    return str.replace(/-/g, ' ').replace(/\b\w/g, function (c) { return c.toUpperCase(); });
+  }
+
+  /** Returns { repo, type, entity } parts for structured tooltip rendering */
+  function friendlyParts(repo, path, entityName) {
+    var cleaned = path.replace(/\/$/, '').replace(/\/main\.md$/, '').replace(/\.md$/, '');
+    var segments = cleaned.split('/').filter(Boolean);
+    var entity = entityName || titleCase(segments[segments.length - 1]);
+    var type = segments.length > 1 ? titleCase(segments[0]) : (entityName ? titleCase(segments[0]) : null);
+    return { repo: repo, type: type, entity: entity };
+  }
+
+  function renderPathHtml(parts) {
+    var sep = '<span class="sg-path-sep">/</span>';
+    var html = '<span class="sg-path-repo">' + esc(parts.repo) + '</span>';
+    if (parts.type) html += sep + '<span class="sg-path-type">' + esc(parts.type) + '</span>';
+    html += sep + '<span class="sg-path-entity">' + esc(parts.entity) + '</span>';
+    return html;
+  }
+
+  function statusClass(status) {
+    switch (status) {
+      case 'D': return 'sg-chrome-status-deleted';
+      case 'A': case '?': return 'sg-chrome-status-added';
+      default: return 'sg-chrome-status-modified';
+    }
+  }
+
+  // ── Theme ───────────────────────────────────────────────
+  function getTheme() {
+    return document.documentElement.dataset.theme || localStorage.getItem('theme') || 'dark';
+  }
+
+  function setTheme(theme) {
+    document.documentElement.dataset.theme = theme;
+    localStorage.setItem('theme', theme);
+    updateThemeIcon();
+    window.dispatchEvent(new CustomEvent('sg-theme-change', { detail: theme }));
+  }
+
+  function toggleTheme() {
+    setTheme(getTheme() === 'dark' ? 'light' : 'dark');
+  }
+
+  // ── Lucide SVG Icons ──────────────────────────────────
+  var SUN_ICON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>';
+  var MOON_ICON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>';
+  var ARROW_DOWN = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>';
+  var ARROW_UP = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>';
+
+  var BACK_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>';
+  var DOTS_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>';
+  var VIEW_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>';
+  var PRESENT_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="6 3 20 12 6 21 6 3"/></svg>';
+
+  var themeBtn;
+  function updateThemeIcon() {
+    if (themeBtn) themeBtn.innerHTML = getTheme() !== 'light' ? SUN_ICON : MOON_ICON;
+  }
+
+  // ── Build Header ────────────────────────────────────────
+  var header = el('header', 'sg-chrome-header');
+
+  // Left side: back + breadcrumb
+  var headerLeft = el('div', 'sg-chrome-header-left');
+  var backLink = el('a', 'sg-chrome-back', BACK_ICON);
+  backLink.href = '/';
+  backLink.title = 'Back to Studiograph';
+  backLink.addEventListener('click', function (e) {
+    if (window.history.length > 1) {
+      e.preventDefault();
+      window.history.back();
+    }
+  });
+  headerLeft.appendChild(backLink);
+
+  var breadcrumb = el('span', 'sg-chrome-breadcrumb',
+    esc(REPO) + '<span class="sg-chrome-sep">/</span>' + esc(ENTITY_ID));
+  headerLeft.appendChild(breadcrumb);
+  header.appendChild(headerLeft);
+
+  // Right side: save status, view, overflow
+  var headerRight = el('div', 'sg-chrome-header-right');
+
+  var saveStatusEl = el('span', 'sg-chrome-save-status');
+  saveStatusEl.id = 'sg-chrome-save-status';
+  headerRight.appendChild(saveStatusEl);
+
+  headerRight.appendChild(el('span', 'sg-chrome-divider'));
+
+  // View / Present button slot (always present for dynamic updates)
+  var viewBtnSlot = el('span', 'sg-chrome-view-slot');
+
+  // Static init for standalone mode (non-SPA)
+  if (VIEW_URL) {
+    var viewIcon = VIEW_LABEL === 'Present' ? PRESENT_ICON : VIEW_ICON;
+    var viewBtn = el('button', 'sg-chrome-btn sg-chrome-btn-accent',
+      viewIcon + '<span>' + esc(VIEW_LABEL) + '</span>');
+    viewBtn.title = VIEW_LABEL;
+    viewBtn.addEventListener('click', function () {
+      window.open(VIEW_URL, '_blank');
+    });
+    viewBtnSlot.appendChild(viewBtn);
+  }
+  headerRight.appendChild(viewBtnSlot);
+  headerRight.appendChild(el('span', 'sg-chrome-divider sg-chrome-view-divider'));
+
+  // Overflow menu
+  var overflowWrapper = el('div', 'sg-chrome-overflow-wrapper');
+  var overflowBtn = el('button', 'sg-chrome-overflow-btn', DOTS_ICON);
+  overflowBtn.title = 'More actions';
+  overflowWrapper.appendChild(overflowBtn);
+
+  var overflowMenu = el('div', 'sg-chrome-overflow-menu');
+  overflowWrapper.appendChild(overflowMenu);
+  headerRight.appendChild(overflowWrapper);
+
+  header.appendChild(headerRight);
+
+  // Overflow menu open/close
+  overflowBtn.addEventListener('click', function (e) {
+    e.stopPropagation();
+    overflowMenu.classList.toggle('open');
+  });
+  document.addEventListener('click', function () {
+    overflowMenu.classList.remove('open');
+  });
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') overflowMenu.classList.remove('open');
+  });
+
+  // ── Build Footer (matches StatusBar.svelte) ────────────
+  var footer = el('footer', 'sg-chrome-footer');
+
+  // Left: theme toggle + workspace stats
+  var footerLeft = el('div', 'sg-chrome-footer-left');
+
+  themeBtn = el('button', 'sg-chrome-theme-toggle');
+  themeBtn.title = 'Toggle theme';
+  themeBtn.addEventListener('click', toggleTheme);
+  footerLeft.appendChild(themeBtn);
+  updateThemeIcon();
+
+  var statsEl = el('span', 'sg-chrome-footer-stats');
+  footerLeft.appendChild(statsEl);
+  footer.appendChild(footerLeft);
+
+  // Center: Revert + Commit (absolute centered)
+  var footerCenter = el('div', 'sg-chrome-footer-center');
+
+  var revertBtn = el('button', 'sg-chrome-revert-btn', 'Revert');
+  revertBtn.title = 'Discard all unpublished changes';
+  revertBtn.hidden = true;
+
+  var commitAnchor = el('div', 'sg-chrome-tooltip-anchor');
+  var commitBtn = el('button', 'sg-chrome-commit-btn', '<span>Commit</span>');
+  commitBtn.title = 'Commit changes';
+  commitBtn.hidden = true;
+  var commitTooltip = el('div', 'sg-chrome-tooltip-popup');
+  commitAnchor.appendChild(commitBtn);
+  commitAnchor.appendChild(commitTooltip);
+
+  footerCenter.appendChild(revertBtn);
+  footerCenter.appendChild(commitAnchor);
+  footer.appendChild(footerCenter);
+
+  // Right: Pull + Push
+  var footerRight = el('div', 'sg-chrome-footer-right');
+
+  var pullBtn = el('button', 'sg-chrome-sync-btn',
+    ARROW_DOWN + '<span>Pull</span>');
+  pullBtn.title = 'Pull latest changes';
+
+  var pushAnchor = el('div', 'sg-chrome-tooltip-anchor');
+  var pushBtn = el('button', 'sg-chrome-sync-btn',
+    ARROW_UP + '<span>Push</span>');
+  pushBtn.title = 'Push changes to remote';
+  var pushTooltip = el('div', 'sg-chrome-tooltip-popup sg-chrome-tooltip-popup-right');
+  pushAnchor.appendChild(pushBtn);
+  pushAnchor.appendChild(pushTooltip);
+
+  footerRight.appendChild(pullBtn);
+  footerRight.appendChild(pushAnchor);
+  footer.appendChild(footerRight);
+
+  // ── Inject into DOM ─────────────────────────────────────
+  if (!workspaceMode) {
+    body.insertBefore(header, body.firstChild);
+  }
+  var footerMount = document.getElementById('sg-chrome-footer');
+  if (footerMount) {
+    footerMount.appendChild(footer);
+  } else if (workspaceMode) {
+    // SvelteKit SPA: mount point doesn't exist yet, wait for it
+    var observer = new MutationObserver(function (_mutations, obs) {
+      var el = document.getElementById('sg-chrome-footer');
+      if (el) {
+        el.appendChild(footer);
+        obs.disconnect();
+      }
+    });
+    observer.observe(body, { childList: true, subtree: true });
+  } else {
+    body.appendChild(footer);
+  }
+
+  // ── Git State ───────────────────────────────────────────
+  var gitState = {
+    repoStatuses: [],  // [{repo, changes: [{path, status}]}]
+    totalChanges: 0,
+    ahead: 0,
+    behind: 0,
+    stats: { entities: 0, links: 0 }
+  };
+
+  function updateFooterUI() {
+    // ── Stats ──
+    if (gitState.stats.entities > 0) {
+      var e = gitState.stats.entities;
+      var l = gitState.stats.links;
+      statsEl.innerHTML =
+        '<span class="sg-chrome-stat">' + e.toLocaleString() + (e === 1 ? ' entity' : ' entities') + '</span>' +
+        '<span class="sg-chrome-stat-sep">|</span>' +
+        '<span class="sg-chrome-stat">' + l.toLocaleString() + (l === 1 ? ' link' : ' links') + '</span>';
+    }
+
+    // ── Commit / Revert ──
+    if (gitState.totalChanges > 0) {
+      revertBtn.hidden = false;
+      commitBtn.hidden = false;
+      commitBtn.innerHTML =
+        '<span>Commit</span><span class="sg-chrome-sync-count">' + gitState.totalChanges + '</span>';
+      // Tooltip: list changed files
+      var tooltipHtml = '';
+      gitState.repoStatuses.forEach(function (rs) {
+        rs.changes.forEach(function (change) {
+          var parts = friendlyParts(rs.repo, change.path, change.entityName);
+          tooltipHtml +=
+            '<div class="sg-chrome-tooltip-file">' +
+            '<span class="sg-chrome-tooltip-dot ' + statusClass(change.status) + '"></span>' +
+            renderPathHtml(parts) +
+            '</div>';
+        });
+      });
+      commitTooltip.innerHTML = tooltipHtml;
+    } else {
+      revertBtn.hidden = true;
+      commitBtn.hidden = true;
+      commitTooltip.innerHTML = '';
+    }
+
+    // ── Pull ──
+    if (gitState.behind > 0) {
+      pullBtn.hidden = false;
+      pullBtn.className = 'sg-chrome-sync-btn sg-chrome-sync-btn-accent';
+      pullBtn.innerHTML =
+        ARROW_DOWN + '<span>Pull</span><span class="sg-chrome-sync-count">' + gitState.behind + '</span>';
+    } else {
+      pullBtn.hidden = true;
+    }
+
+    // ── Push ──
+    if (gitState.ahead > 0) {
+      pushBtn.hidden = false;
+      pushBtn.className = 'sg-chrome-sync-btn sg-chrome-sync-btn-accent';
+      pushBtn.innerHTML =
+        ARROW_UP + '<span>Push</span><span class="sg-chrome-sync-count">' + gitState.ahead + '</span>';
+      pushTooltip.innerHTML =
+        '<div class="sg-chrome-tooltip-file">' +
+        gitState.ahead + ' commit' + (gitState.ahead === 1 ? '' : 's') + ' ahead of remote</div>';
+    } else {
+      pushBtn.hidden = true;
+      pushTooltip.innerHTML = '';
+    }
+  }
+
+  // ── Git Polling ─────────────────────────────────────────
+  function fetchGitStatus() {
+    return Promise.all([
+      fetch('/api/status').then(function (r) { return r.json(); }).catch(function () { return []; }),
+      fetch('/api/sync-status').then(function (r) { return r.json(); }).catch(function () { return { ahead: 0, behind: 0 }; })
+    ]).then(function (results) {
+      gitState.repoStatuses = results[0];
+      gitState.totalChanges = results[0].reduce(function (sum, r) { return sum + r.changes.length; }, 0);
+      gitState.ahead = results[1].ahead || 0;
+      gitState.behind = results[1].behind || 0;
+      updateFooterUI();
+    });
+  }
+
+  function fetchStats() {
+    fetch('/api/stats').then(function (r) { return r.json(); }).then(function (data) {
+      gitState.stats = data;
+      updateFooterUI();
+    }).catch(function () { /* silently fail */ });
+  }
+
+  // Initial fetch
+  fetchGitStatus();
+  fetchStats();
+
+  // Poll git status every 15s (stats less frequently — every 60s)
+  setInterval(fetchGitStatus, 15000);
+  setInterval(fetchStats, 60000);
+
+  // Sync with Svelte git store — refresh immediately when it updates
+  window.addEventListener('studiograph:git-refresh', function () {
+    fetchGitStatus();
+    fetchStats();
+  });
+
+  // ── Git Operations ──────────────────────────────────────
+  commitBtn.addEventListener('click', function () {
+    if (commitBtn.disabled) return;
+    // If a commit handler is registered, delegate to it
+    if (listeners['commit'] && listeners['commit'].length > 0) {
+      emitEvent('commit');
+      return;
+    }
+    commitBtn.disabled = true;
+    commitBtn.innerHTML = '<span>Committing\u2026</span>';
+    fetch('/api/commit', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message: 'Update from editor' })
+    })
+      .then(function (res) { return res.json(); })
+      .then(function () {
+        commitBtn.disabled = false;
+        fetchGitStatus();
+        fetchStats();
+      })
+      .catch(function () {
+        commitBtn.disabled = false;
+        alert('Commit failed: network error');
+        fetchGitStatus();
+      });
+  });
+
+  revertBtn.addEventListener('click', function () {
+    emitEvent('revert:open');
+  });
+
+  pushBtn.addEventListener('click', function () {
+    if (pushBtn.disabled) return;
+    pushBtn.disabled = true;
+    var prevHtml = pushBtn.innerHTML;
+    pushBtn.innerHTML = ARROW_UP + '<span>Pushing\u2026</span>';
+    fetch('/api/push', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' })
+      .then(function () { pushBtn.disabled = false; fetchGitStatus(); })
+      .catch(function () { pushBtn.disabled = false; fetchGitStatus(); });
+  });
+
+  pullBtn.addEventListener('click', function () {
+    if (pullBtn.disabled) return;
+    pullBtn.disabled = true;
+    pullBtn.innerHTML = ARROW_DOWN + '<span>Pulling\u2026</span>';
+    emitEvent('pull:start');
+    fetch('/api/pull', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' })
+      .then(function () {
+        pullBtn.disabled = false;
+        fetchGitStatus();
+        fetchStats();
+        emitEvent('pull');
+      })
+      .catch(function () { pullBtn.disabled = false; fetchGitStatus(); emitEvent('pull'); });
+  });
+
+  // ── Event System ────────────────────────────────────────
+  var listeners = {};
+
+  function emitEvent(name, data) {
+    (listeners[name] || []).forEach(function (fn) {
+      try { fn(data); } catch (e) { console.error('StudioChrome event error:', e); }
+    });
+  }
+
+  // ── Public API ──────────────────────────────────────────
+  window.StudioChrome = {
+    on: function (event, fn) {
+      if (!listeners[event]) listeners[event] = [];
+      listeners[event].push(fn);
+    },
+
+    off: function (event, fn) {
+      if (fn && listeners[event]) {
+        listeners[event] = listeners[event].filter(function (f) { return f !== fn; });
+        if (listeners[event].length === 0) delete listeners[event];
+      } else {
+        delete listeners[event];
+      }
+    },
+
+    /** Emit a mutation event (called by web UI after agent updates an entity) */
+    emitMutation: function (detail) {
+      emitEvent('mutation', detail);
+    },
+
+    /** Move footer into #sg-chrome-footer mount point (call after SPA navigation) */
+    mountFooter: function () {
+      var target = document.getElementById('sg-chrome-footer');
+      if (target && footer.parentNode !== target) {
+        target.appendChild(footer);
+      }
+    },
+
+    /**
+     * Set save status indicator.
+     * @param {string} text - Status text to display
+     * @param {string} [type] - 'saving'|'saved'|'error'|'' — controls styling
+     */
+    setSaveStatus: function (text, type) {
+      type = type || '';
+      saveStatusEl.textContent = text || '';
+      saveStatusEl.className = 'sg-chrome-save-status' + (type === 'error' ? ' sg-chrome-save-error' : '');
+    },
+
+    refreshStatus: function () {
+      fetchGitStatus();
+    },
+
+    refreshStats: function () {
+      fetchStats();
+    },
+
+    addMenuItem: function (opts) {
+      var btn = el('button', 'sg-chrome-menu-item' + (opts.danger ? ' sg-chrome-danger' : ''),
+        (opts.icon || '') + ' ' + esc(opts.label));
+      btn.addEventListener('click', function () {
+        overflowMenu.classList.remove('open');
+        if (opts.onClick) opts.onClick();
+      });
+      overflowMenu.appendChild(btn);
+      return btn;
+    },
+
+    addMenuSeparator: function () {
+      overflowMenu.appendChild(el('div', 'sg-chrome-menu-sep'));
+    },
+
+    /** Mount header into a target element (for SPA embedding) */
+    mountHeader: function (target) {
+      if (typeof target === 'string') target = document.getElementById(target);
+      if (target && header) {
+        // Clear overflow menu items from previous editor before mounting
+        overflowMenu.innerHTML = '';
+        target.appendChild(header);
+      }
+    },
+
+    /** Remove header from DOM (keeps element alive for re-mount) */
+    unmountHeader: function () {
+      if (header && header.parentNode) header.parentNode.removeChild(header);
+    },
+
+    /** Update breadcrumb text (for SPA embedding where repo/entity change) */
+    updateBreadcrumb: function (repo, entityId) {
+      breadcrumb.innerHTML = esc(repo) + '<span class="sg-chrome-sep">/</span>' + esc(entityId || '');
+    },
+
+    /** Set dynamic View/Present button (for SPA embedding) */
+    setViewAction: function (url, label) {
+      if (!url) return;
+      label = label || 'View';
+      var icon = label === 'Present' ? PRESENT_ICON : VIEW_ICON;
+      viewBtnSlot.innerHTML = '';
+      var btn = el('button', 'sg-chrome-btn sg-chrome-btn-accent',
+        icon + '<span>' + esc(label) + '</span>');
+      btn.title = label;
+      btn.addEventListener('click', function () {
+        window.open(url, '_blank');
+      });
+      viewBtnSlot.appendChild(btn);
+      var divider = header.querySelector('.sg-chrome-view-divider');
+      if (divider) divider.style.display = '';
+    },
+
+    /** Clear View/Present button */
+    clearViewAction: function () {
+      viewBtnSlot.innerHTML = '';
+      var divider = header.querySelector('.sg-chrome-view-divider');
+      if (divider) divider.style.display = 'none';
+    },
+
+    /** No-op stubs for backward compatibility with app editors */
+    setSaveHandlers: function () {},
+    clearSaveHandlers: function () {
+      saveStatusEl.textContent = '';
+      saveStatusEl.className = 'sg-chrome-save-status';
+    },
+    isDirty: function () { return false; },
+  };
+})();