projview 0.1.0

package/public/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- we ship our own dark theme: tell the UA + Dark Reader to leave colors alone -->
+  <meta name="color-scheme" content="dark" />
+  <meta name="darkreader-lock" />
+  <title>projview</title>
+  <link rel="stylesheet" href="/vendor/hljs.css" />
+  <link rel="stylesheet" href="/style.css" />
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📓</text></svg>" />
+</head>
+<body class="toc-empty">
+  <aside id="sidebar">
+    <header id="brand">
+      <span class="logo">📓</span>
+      <div class="brand-text">
+        <strong id="root-name">projview</strong>
+        <small id="live-status"><span class="dot"></span> live</small>
+      </div>
+    </header>
+    <button id="open-palette" class="open-palette" title="search (⌘K)">
+      <span class="op-ico">🔎</span><span class="op-text">search…</span><kbd>⌘K</kbd>
+    </button>
+    <div id="tree" class="tree"></div>
+    <footer id="side-foot"><span id="file-count">0</span> files · ctrl-c to stop</footer>
+  </aside>
+
+  <main id="viewer">
+    <nav id="breadcrumb" hidden></nav>
+    <div id="content" class="markdown-body">
+      <div class="empty-state">
+        <div class="empty-emoji">👈</div>
+        <p>pick a file from the tree to preview it</p>
+      </div>
+    </div>
+  </main>
+
+  <aside id="toc">
+    <header class="toc-head">
+      <span>on this page</span>
+      <button id="toc-collapse" title="collapse">⟩</button>
+    </header>
+    <div id="toc-list"></div>
+  </aside>
+  <button id="toc-reopen" title="show outline">☰</button>
+
+  <div id="palette" class="palette" hidden>
+    <div class="palette-box">
+      <input id="palette-input" type="text" placeholder="search files + contents…" autocomplete="off" spellcheck="false" />
+      <div id="palette-results" class="palette-results"></div>
+      <div class="palette-foot">
+        <span><kbd>↑</kbd><kbd>↓</kbd> navigate</span>
+        <span><kbd>↵</kbd> open</span>
+        <span><kbd>esc</kbd> close</span>
+      </div>
+    </div>
+  </div>
+
+  <div id="toast" class="toast" hidden></div>
+
+  <div id="zoom" class="zoom-overlay" hidden>
+    <div class="zoom-hint">scroll to zoom · drag to pan · esc to close</div>
+    <div id="zoom-inner" class="zoom-inner"></div>
+  </div>
+
+  <script src="/vendor/mermaid.min.js"></script>
+  <script type="module" src="/main.js"></script>
+</body>
+</html>

package/public/links.js

@@ -0,0 +1,31 @@
+/* in-app link routing for clicks inside rendered content */
+
+import { $ } from './dom.js';
+import { state } from './store.js';
+import { resolveRelative } from './paths.js';
+import { openFile, scrollToFragment } from './viewer.js';
+import { toast } from './toast.js';
+
+const contentEl = $('content');
+
+contentEl.addEventListener('click', (e) => {
+  const a = e.target.closest('a');
+  if (!a) return;
+  const href = a.getAttribute('href');
+  if (!href) return;
+
+  // external / protocol links -> new tab, keep projview alive
+  if (/^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith('//')) {
+    e.preventDefault();
+    window.open(href, '_blank', 'noopener');
+    return;
+  }
+
+  e.preventDefault();
+  if (href.startsWith('#')) { scrollToFragment(href.slice(1)); return; }   // same-doc anchor
+
+  const [pathPart, frag] = href.split('#');
+  const target = resolveRelative(state.currentPath, pathPart);
+  if (/\.(md|mmd)$/i.test(target)) openFile(target, frag);
+  else toast(`can't preview "${pathPart}" - only .md / .mmd for now`);
+});

package/public/live.js

@@ -0,0 +1,31 @@
+/* live reload via server-sent events */
+
+import { $ } from './dom.js';
+import { state } from './store.js';
+import { loadTree } from './tree.js';
+import { openFile } from './viewer.js';
+
+const liveStatusEl = $('live-status');
+
+export function connectEvents() {
+  const es = new EventSource('/api/events');
+  es.addEventListener('change', (e) => {
+    const { path } = JSON.parse(e.data);
+    if (path === state.currentPath) { pulse(); openFile(path); }
+  });
+  es.addEventListener('tree', async () => { pulse(); await loadTree(); });
+  es.onerror = () => setLive(false);
+  es.addEventListener('ready', () => setLive(true));
+}
+
+function setLive(on) {
+  liveStatusEl.classList.toggle('off', !on);
+  liveStatusEl.querySelector('.dot')?.classList.toggle('off', !on);
+}
+
+let pulseTimer;
+function pulse() {
+  liveStatusEl.classList.add('pulse');
+  clearTimeout(pulseTimer);
+  pulseTimer = setTimeout(() => liveStatusEl.classList.remove('pulse'), 600);
+}

package/public/main.js

@@ -0,0 +1,27 @@
+/* projview client entry - wires the modules and boots */
+
+import { state } from './store.js';
+import { loadTree } from './tree.js';
+import { openFile } from './viewer.js';
+import { connectEvents } from './live.js';
+
+// side-effect modules: each attaches its own listeners on import
+import './links.js';
+import './toc.js';
+import './mermaid.js';
+import './search.js';
+
+// browser back / forward
+window.addEventListener('hashchange', () => {
+  const p = decodeURIComponent(location.hash.slice(1));
+  if (p && p !== state.currentPath) openFile(p);   // guard prevents self-trigger loop
+});
+
+async function boot() {
+  await loadTree();
+  const hash = decodeURIComponent(location.hash.slice(1));
+  if (hash) openFile(hash);   // openFile -> revealInTree expands ancestors
+  connectEvents();
+}
+
+boot();

package/public/mermaid.js

@@ -0,0 +1,77 @@
+/* mermaid rendering (per-diagram, with error cards) + zoom overlay */
+
+import { $, esc } from './dom.js';
+
+const mermaid = window.mermaid;   // UMD global, loaded via classic <script> before this module
+const contentEl = $('content');
+const zoomEl = $('zoom');
+const zoomInnerEl = $('zoom-inner');
+
+let mermaidSeq = 0;               // unique id source for mermaid.render
+
+mermaid.initialize({
+  startOnLoad: false,
+  theme: 'dark',
+  securityLevel: 'loose',
+  suppressErrorRendering: true   // we render our own error card; don't inject the default bomb
+});
+
+// Render each .mermaid block individually so one bad diagram can't kill the rest.
+export async function runMermaid() {
+  const nodes = [...contentEl.querySelectorAll('.mermaid')];
+  for (const node of nodes) {
+    const src = node.textContent.trim();
+    try {
+      const { svg, bindFunctions } = await mermaid.render(`pv-mmd-${++mermaidSeq}`, src);
+      node.innerHTML = svg;
+      bindFunctions?.(node);
+      node.classList.add('rendered');
+      node.title = 'click to zoom';
+      node.addEventListener('click', () => openZoom(node.querySelector('svg')?.outerHTML || ''));
+    } catch (err) {
+      node.classList.add('mermaid-error');
+      node.innerHTML =
+        `<div class="diagram-error"><strong>⚠ diagram failed to render</strong>` +
+        `<pre class="err-msg">${esc(String(err && err.message ? err.message : err))}</pre>` +
+        `<details><summary>source</summary><pre>${esc(src)}</pre></details></div>`;
+    }
+  }
+}
+
+/* ---------- zoom overlay ---------- */
+
+let zoomState = { scale: 1, x: 0, y: 0 };
+let zoomDrag = null;
+
+function applyZoom() {
+  zoomInnerEl.style.transform =
+    `translate(${zoomState.x}px, ${zoomState.y}px) scale(${zoomState.scale})`;
+}
+function openZoom(svgHtml) {
+  if (!svgHtml) return;
+  zoomInnerEl.innerHTML = svgHtml;
+  zoomState = { scale: 1, x: 0, y: 0 };
+  applyZoom();
+  zoomEl.hidden = false;
+}
+function closeZoom() { zoomEl.hidden = true; zoomInnerEl.innerHTML = ''; }
+
+zoomEl.addEventListener('click', (e) => { if (e.target === zoomEl) closeZoom(); });
+zoomEl.addEventListener('wheel', (e) => {
+  e.preventDefault();
+  const factor = e.deltaY < 0 ? 1.12 : 1 / 1.12;
+  zoomState.scale = Math.min(8, Math.max(0.3, zoomState.scale * factor));
+  applyZoom();
+}, { passive: false });
+zoomInnerEl.addEventListener('pointerdown', (e) => {
+  zoomDrag = { x: e.clientX, y: e.clientY, ox: zoomState.x, oy: zoomState.y };
+  zoomInnerEl.setPointerCapture(e.pointerId);
+});
+zoomInnerEl.addEventListener('pointermove', (e) => {
+  if (!zoomDrag) return;
+  zoomState.x = zoomDrag.ox + (e.clientX - zoomDrag.x);
+  zoomState.y = zoomDrag.oy + (e.clientY - zoomDrag.y);
+  applyZoom();
+});
+zoomInnerEl.addEventListener('pointerup', () => { zoomDrag = null; });
+window.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !zoomEl.hidden) closeZoom(); });

package/public/paths.js

@@ -0,0 +1,14 @@
+/* pure path helpers (no DOM) - importable by tests */
+
+// Resolve an href relative to the directory of `fromFile` (both posix-style,
+// repo-root-relative). Handles '.', '..', and bare names.
+export function resolveRelative(fromFile, href) {
+  const baseDir = fromFile && fromFile.includes('/') ? fromFile.slice(0, fromFile.lastIndexOf('/')) : '';
+  const parts = baseDir ? baseDir.split('/') : [];
+  for (const seg of href.split('/')) {
+    if (seg === '' || seg === '.') continue;
+    if (seg === '..') parts.pop();
+    else parts.push(seg);
+  }
+  return parts.join('/');
+}

package/public/search.js

@@ -0,0 +1,163 @@
+/* projview cmd+K search palette - fuzzy filenames + full-text contents */
+
+import { $, esc } from './dom.js';
+import { SVG_FILE, SVG_DIAGRAM } from './icons.js';
+import { openFile } from './viewer.js';
+
+const paletteEl = $('palette');
+const inputEl = $('palette-input');
+const resultsEl = $('palette-results');
+const openBtn = $('open-palette');
+
+const icon = (name) => (name.endsWith('.mmd') ? SVG_DIAGRAM : SVG_FILE);
+
+let selectable = [];     // flat list of openable results
+let selected = 0;
+let debounce;
+let seq = 0;             // guards against out-of-order async results
+
+/* ---------- open / close ---------- */
+
+function openPalette() {
+  paletteEl.hidden = false;
+  inputEl.focus();
+  inputEl.select();
+  if (inputEl.value.trim()) run();
+  else showHint();
+}
+function closePalette() { paletteEl.hidden = true; }
+function toggle() { paletteEl.hidden ? openPalette() : closePalette(); }
+
+function showHint() {
+  selectable = [];
+  resultsEl.innerHTML = `<div class="palette-hint">type to search file names + contents</div>`;
+}
+
+/* ---------- query ---------- */
+
+async function run() {
+  const q = inputEl.value.trim();
+  if (!q) { showHint(); return; }
+  const mySeq = ++seq;
+  let data;
+  try {
+    data = await (await fetch(`/api/search?q=${encodeURIComponent(q)}`)).json();
+  } catch {
+    if (mySeq === seq) resultsEl.innerHTML = `<div class="palette-hint">search unavailable</div>`;
+    return;
+  }
+  if (mySeq !== seq) return;   // a newer query superseded this one
+  render(data, q);
+}
+
+function render(data, q) {
+  const terms = q.toLowerCase().split(/\s+/).filter(Boolean);
+  selectable = [];
+  let html = '';
+
+  if (data.files.length) {
+    html += `<div class="pg-head">files</div>`;
+    for (const f of data.files) {
+      const i = selectable.length;
+      selectable.push({ type: 'file', path: f.path });
+      html += row(i, icon(f.name), hl(f.name, terms), dimPath(f.path), '');
+    }
+  }
+
+  if (data.content.length) {
+    html += `<div class="pg-head">in contents</div>`;
+    for (const c of data.content) {
+      const i = selectable.length;
+      selectable.push({ type: 'content', path: c.path, term: q });
+      const snips = c.snippets
+        .map((s) => `<div class="snip"><span class="snip-ln">${s.line}</span>${hl(s.text, terms)}</div>`)
+        .join('');
+      html += row(i, icon(c.name), hl(c.name, terms), dimPath(c.path), snips, `${c.count}×`);
+    }
+  }
+
+  if (!selectable.length) {
+    resultsEl.innerHTML = `<div class="palette-hint">no matches for “${esc(q)}”</div>`;
+    return;
+  }
+  resultsEl.innerHTML = html;
+  selected = 0;
+  paint();
+  bindRows();
+}
+
+function row(i, ic, name, path, extra, badge = '') {
+  return (
+    `<div class="presult" data-i="${i}">` +
+    `<div class="pr-main"><span class="pr-ico">${ic}</span>` +
+    `<span class="pr-name">${name}</span>` +
+    (badge ? `<span class="pr-badge">${badge}</span>` : '') +
+    `<span class="pr-path">${path}</span></div>` +
+    extra +
+    `</div>`
+  );
+}
+
+function dimPath(p) {
+  const dir = p.includes('/') ? p.slice(0, p.lastIndexOf('/')) : '';
+  return esc(dir);
+}
+
+/* ---------- selection / activation ---------- */
+
+function paint() {
+  const rows = resultsEl.querySelectorAll('.presult');
+  rows.forEach((r, i) => r.classList.toggle('sel', i === selected));
+  rows[selected]?.scrollIntoView({ block: 'nearest' });
+}
+function move(d) {
+  if (!selectable.length) return;
+  selected = (selected + d + selectable.length) % selectable.length;
+  paint();
+}
+function activate(item) {
+  if (!item) return;
+  closePalette();
+  if (item.type === 'content') openFile(item.path, null, item.term);
+  else openFile(item.path);
+}
+function bindRows() {
+  resultsEl.querySelectorAll('.presult').forEach((r) => {
+    const i = Number(r.dataset.i);
+    r.addEventListener('mousemove', () => { if (selected !== i) { selected = i; paint(); } });
+    r.addEventListener('click', () => activate(selectable[i]));
+  });
+}
+
+/* ---------- highlight helper ---------- */
+
+function hl(text, terms) {
+  let out = esc(text);
+  for (const t of terms) {
+    if (!t) continue;
+    const re = new RegExp('(' + t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'ig');
+    out = out.replace(re, '<mark>$1</mark>');
+  }
+  return out;
+}
+
+/* ---------- wiring ---------- */
+
+const isTyping = (el) =>
+  el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable);
+
+window.addEventListener('keydown', (e) => {
+  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); toggle(); return; }
+  if (!paletteEl.hidden && e.key === 'Escape') { closePalette(); return; }
+  if (paletteEl.hidden && e.key === '/' && !isTyping(e.target)) { e.preventDefault(); openPalette(); }
+});
+
+inputEl.addEventListener('input', () => { clearTimeout(debounce); debounce = setTimeout(run, 120); });
+inputEl.addEventListener('keydown', (e) => {
+  if (e.key === 'ArrowDown') { e.preventDefault(); move(1); }
+  else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1); }
+  else if (e.key === 'Enter') { e.preventDefault(); activate(selectable[selected]); }
+});
+
+paletteEl.addEventListener('click', (e) => { if (e.target === paletteEl) closePalette(); });
+openBtn.addEventListener('click', openPalette);

package/public/store.js

@@ -0,0 +1,8 @@
+/* shared client state - one mutable object the modules read/write */
+
+export const state = {
+  currentPath: null,        // path of the file currently shown
+  expanded: new Set(),      // dir paths the user has opened
+  treeData: [],             // last tree payload from the server
+  rootName: 'projview'      // indexed root's display name
+};