projview 1.0.0 → 1.2.0

package/public/index.html

@@ -3,9 +3,19 @@
 <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" />
+  <!-- we ship our own light + dark themes: tell the UA + Dark Reader to leave colors alone -->
+  <meta name="color-scheme" content="dark light" />
   <meta name="darkreader-lock" />
+  <!-- resolve the saved theme before first paint (theme.js owns it after load;
+       the 'pv-theme' key and fallback must match theme.js) -->
+  <script>
+    (function () {
+      var p = 'system';
+      try { p = localStorage.getItem('pv-theme') || 'system'; } catch (e) {}
+      var light = p === 'light' || (p !== 'dark' && matchMedia('(prefers-color-scheme: light)').matches);
+      document.documentElement.dataset.theme = light ? 'light' : 'dark';
+    })();
+  </script>
   <title>projview</title>
   <link rel="stylesheet" href="/vendor/hljs.css" />
   <link rel="stylesheet" href="/style.css" />
@@ -16,21 +26,22 @@
     <header id="brand">
       <span class="logo" aria-hidden="true">
         <svg viewBox="0 0 24 24" width="26" height="26" fill="none">
-          <rect x="2" y="4.5" width="20" height="15" rx="4" stroke="#b4befe" stroke-width="1.8"/>
-          <line x1="8.5" y1="4.5" x2="8.5" y2="19.5" stroke="#b4befe" stroke-width="1.8"/>
-          <circle cx="13.4" cy="9.4" r="1.25" fill="#cba6f7"/>
-          <circle cx="18" cy="9.4" r="1.25" fill="#cba6f7"/>
-          <circle cx="15.7" cy="14.6" r="1.25" fill="#cba6f7"/>
-          <path d="M13.4 9.4 15.7 14.6 18 9.4" stroke="#cba6f7" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+          <rect x="2" y="4.5" width="20" height="15" rx="4" stroke="currentColor" stroke-width="1.8"/>
+          <line x1="8.5" y1="4.5" x2="8.5" y2="19.5" stroke="currentColor" stroke-width="1.8"/>
+          <circle cx="13.4" cy="9.4" r="1.25" fill="currentColor"/>
+          <circle cx="18" cy="9.4" r="1.25" fill="currentColor"/>
+          <circle cx="15.7" cy="14.6" r="1.25" fill="currentColor"/>
+          <path d="M13.4 9.4 15.7 14.6 18 9.4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </span>
       <div class="brand-text">
         <strong class="wordmark"><span class="wm-proj">proj</span><span class="wm-view">view</span></strong>
         <small id="version" class="version"></small>
       </div>
+      <button id="theme-toggle" class="theme-toggle" title="theme"></button>
     </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>
+      <span class="op-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg></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>
@@ -40,7 +51,6 @@
     <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>

package/public/links.js

@@ -5,6 +5,7 @@ import { state } from './store.js';
 import { resolveRelative } from './paths.js';
 import { openFile, scrollToFragment } from './viewer.js';
 import { toast } from './toast.js';
+import { fileKind } from './icons.js';
 
 const contentEl = $('content');
 
@@ -26,6 +27,6 @@ contentEl.addEventListener('click', (e) => {
 
   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`);
+  if (fileKind(target)) openFile(target, frag);
+  else toast(`can't preview "${pathPart}" - only .md / .mmd / .json / .yaml for now`);
 });

package/public/live.js

@@ -5,6 +5,8 @@ import { state } from './store.js';
 import { loadTree } from './tree.js';
 import { openFile } from './viewer.js';
 import { refreshComments } from './comments.js';
+import { isEditing, onDiskChange } from './editor.js';
+import { isHistory, refreshHistory } from './history.js';
 
 const versionEl = $('version');
 
@@ -12,7 +14,11 @@ 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); }
+    if (path !== state.currentPath) return;
+    pulse();
+    if (isEditing(path)) onDiskChange();   // never re-render over an open editor
+    else if (isHistory(path)) setTimeout(refreshHistory, 300);   // the new version lands just after the change event
+    else openFile(path);
   });
   es.addEventListener('tree', async () => { pulse(); await loadTree(); });
   es.addEventListener('comments', (e) => {

package/public/main.js

@@ -8,9 +8,11 @@ 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 { runMermaid } from './mermaid.js';
+import { onThemeChange } from './theme.js';
 import './search.js';
 import './comments.js';
+import './editor.js';
 
 // browser back / forward
 window.addEventListener('hashchange', () => {
@@ -18,6 +20,10 @@ window.addEventListener('hashchange', () => {
   if (p && p !== state.currentPath) openFile(p);   // guard prevents self-trigger loop
 });
 
+// light/dark flip: CSS follows on its own; diagrams are baked SVG, so redraw them
+// in place (no re-fetch, no scroll jump, an open editor is left alone)
+onThemeChange(() => runMermaid({ rerender: true }));
+
 async function boot() {
   await loadTree();
   const hash = decodeURIComponent(location.hash.slice(1));

package/public/mermaid.js

@@ -1,6 +1,7 @@
 /* mermaid rendering (per-diagram, with error cards) + zoom overlay */
 
 import { $, esc } from './dom.js';
+import { currentTheme } from './theme.js';
 
 const mermaid = window.mermaid;   // UMD global, loaded via classic <script> before this module
 const contentEl = $('content');
@@ -9,27 +10,33 @@ 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() {
+// A block keeps its source in data-src, so it can be re-rendered in place (theme
+// flip) - otherwise blocks that are already rendered are left alone.
+export async function runMermaid({ rerender = false } = {}) {
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: currentTheme() === 'light' ? 'neutral' : 'dark',   // read per render: themes can flip mid-session
+    securityLevel: 'loose',
+    suppressErrorRendering: true   // we render our own error card; don't inject the default bomb
+  });
   const nodes = [...contentEl.querySelectorAll('.mermaid')];
   for (const node of nodes) {
-    const src = node.textContent.trim();
+    if (!node.dataset.src) node.dataset.src = node.textContent.trim();
+    else if (!rerender) continue;
+    const src = node.dataset.src;
+    node.classList.remove('rendered', 'mermaid-error');
     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 || ''));
+      node.onclick = () => openZoom(node.querySelector('svg')?.outerHTML || '');
     } catch (err) {
       node.classList.add('mermaid-error');
+      node.onclick = null;
+      node.title = '';
       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>` +

package/public/search.js

@@ -1,7 +1,7 @@
 /* projview cmd+K search palette - fuzzy filenames + full-text contents */
 
 import { $, esc } from './dom.js';
-import { SVG_FILE, SVG_DIAGRAM } from './icons.js';
+import { fileIcon as icon } from './icons.js';
 import { openFile } from './viewer.js';
 
 const paletteEl = $('palette');
@@ -9,8 +9,6 @@ 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;

package/public/store.js

@@ -5,5 +5,7 @@ export const state = {
   expanded: new Set(),      // dir paths the user has opened
   treeData: [],             // last tree payload from the server
   rootName: 'projview',     // indexed root's display name
-  writable: false           // can this client create/edit comments? (loopback only)
+  writable: false,          // can this client create/edit comments + files? (loopback only)
+  view: 'rendered',         // md / mmd: 'rendered' or 'raw' - sticks while browsing
+  persistent: false         // does the store keep comments + versions across runs?
 };