sdocs-dev 1.1.2 → 1.3.0

package/public/sdocs-app.js

@@ -9,12 +9,12 @@ var S = SDocs;
 var LINK_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>';
 var COPY_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
 var CHECK_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+var CHEVRON_SVG = '<span class="section-toggle"><svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2l4 3-4 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>';
+var COPY_FEEDBACK_MS = 1500;
 
 // ── Slugify + section helpers ──────────────────────
 
-function slugify(text) {
-  return text.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '').replace(/-+/g, '-').replace(/^-|-$/g, '');
-}
+var slugify = SDocSlugify.slugify;
 
 function buildSectionUrl(slug) {
   var base = window.location.origin + window.location.pathname;
@@ -50,15 +50,11 @@ function getSectionMarkdown(headingIndex) {
   return lines.slice(target.line, endLine).join('\n').trimEnd();
 }
 
-// ── Render ──────────────────────────────────
-
-function render() {
-  var oldSpacer = S.renderedEl.querySelector('.sec-scroll-spacer');
-  if (oldSpacer) oldSpacer.remove();
-  S.renderedEl.innerHTML = marked.parse(S.currentBody);
+// ── Render sub-functions ──────────────────────────────────
 
+function attachHeadingAnchors(container) {
   var slugCounts = {};
-  var allHeadings = [].slice.call(S.renderedEl.querySelectorAll('h1, h2, h3, h4'));
+  var allHeadings = [].slice.call(container.querySelectorAll('h1, h2, h3, h4'));
   allHeadings.forEach(function(h, idx) {
     var slug = slugify(h.textContent);
     if (!slug) slug = 'section';
@@ -78,7 +74,7 @@ function render() {
       e.preventDefault();
       navigator.clipboard.writeText(buildSectionUrl(slug)).then(function() {
         anchor.innerHTML = CHECK_SVG;
-        setTimeout(function() { anchor.innerHTML = LINK_SVG; }, 1500);
+        setTimeout(function() { anchor.innerHTML = LINK_SVG; }, COPY_FEEDBACK_MS);
       });
     });
     h.appendChild(anchor);
@@ -94,57 +90,75 @@ function render() {
       var md = getSectionMarkdown(hIdx);
       navigator.clipboard.writeText(md).then(function() {
         copyBtn.innerHTML = CHECK_SVG;
-        setTimeout(function() { copyBtn.innerHTML = COPY_SVG; }, 1500);
+        setTimeout(function() { copyBtn.innerHTML = COPY_SVG; }, COPY_FEEDBACK_MS);
       });
     });
     h.appendChild(copyBtn);
   });
+}
 
-  S.renderedEl.querySelectorAll('pre').forEach(function(pre) {
+function attachCodeCopyButtons(container) {
+  container.querySelectorAll('pre').forEach(function(pre) {
     var wrapper = document.createElement('div');
     wrapper.className = 'pre-wrapper';
     pre.parentNode.insertBefore(wrapper, pre);
     wrapper.appendChild(pre);
     var btn = document.createElement('button');
     btn.className = 'copy-btn';
-    btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+    btn.innerHTML = COPY_SVG;
     btn.title = 'Copy code';
     btn.addEventListener('click', function() {
       var code = pre.querySelector('code');
       navigator.clipboard.writeText(code ? code.textContent : pre.textContent).then(function() {
-        btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
-        setTimeout(function() {
-          btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
-        }, 1500);
+        btn.innerHTML = CHECK_SVG;
+        setTimeout(function() { btn.innerHTML = COPY_SVG; }, COPY_FEEDBACK_MS);
       });
     });
     wrapper.appendChild(btn);
   });
+}
+
+var SECTION_LEVELS = { H2: 2, H3: 3, H4: 4 };
+
+function buildCollapsibleSections(container) {
+  // H1 expand/collapse toggle (controls all sections below)
+  container.querySelectorAll('h1').forEach(function(h1) {
+    h1.insertAdjacentHTML('afterbegin', CHEVRON_SVG);
+    h1.style.cursor = 'pointer';
+    h1.addEventListener('click', function(e) {
+      if (e.target.closest('.header-anchor') || e.target.closest('.header-copy-btn')) return;
+      var toggle = h1.querySelector('.section-toggle');
+      var isOpen = toggle.classList.toggle('open');
+      container.querySelectorAll('.md-section-body').forEach(function(b) { b.classList.toggle('open', isOpen); });
+      container.querySelectorAll('.md-section > h2 > .section-toggle, .md-section > h3 > .section-toggle, .md-section > h4 > .section-toggle').forEach(function(t) { t.classList.toggle('open', isOpen); });
+    });
+  });
 
-  // Collapsible heading sections (H2, H3, H4)
-  var SECTION_CHEVRON = '<span class="section-toggle"><svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2l4 3-4 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>';
-  var SECTION_LEVELS = { H2: 2, H3: 3, H4: 4 };
-  var children = [].slice.call(S.renderedEl.children);
-  var bodyStack = [S.renderedEl];
+  // Nest H2/H3/H4 into collapsible section wrappers.
+  // Each stack frame tracks its heading level so siblings are siblings
+  // even when intermediate levels are skipped (e.g. h1 → h4 directly).
+  var children = [].slice.call(container.children);
+  var stack = [{ body: container, level: 0 }];
   children.forEach(function(child) {
     var level = SECTION_LEVELS[child.tagName];
     if (level) {
-      while (bodyStack.length > level - 1) bodyStack.pop();
+      while (stack[stack.length - 1].level >= level) stack.pop();
       var sectionDiv = document.createElement('div');
       sectionDiv.className = 'md-section';
       var sectionBody = document.createElement('div');
       sectionBody.className = 'md-section-body';
-      child.insertAdjacentHTML('afterbegin', SECTION_CHEVRON);
-      bodyStack[bodyStack.length - 1].appendChild(sectionDiv);
+      child.insertAdjacentHTML('afterbegin', CHEVRON_SVG);
+      stack[stack.length - 1].body.appendChild(sectionDiv);
       sectionDiv.appendChild(child);
       sectionDiv.appendChild(sectionBody);
-      bodyStack.push(sectionBody);
+      stack.push({ body: sectionBody, level: level });
     } else {
-      bodyStack[bodyStack.length - 1].appendChild(child);
+      stack[stack.length - 1].body.appendChild(child);
     }
   });
 
-  S.renderedEl.querySelectorAll('.md-section > h2, .md-section > h3, .md-section > h4').forEach(function(heading) {
+  // Attach click handlers for section heading toggles
+  container.querySelectorAll('.md-section > h2, .md-section > h3, .md-section > h4').forEach(function(heading) {
     heading.addEventListener('click', function(e) {
       if (e.target.closest('.header-anchor') || e.target.closest('.header-copy-btn')) return;
       var yBefore = heading.getBoundingClientRect().top;
@@ -163,6 +177,96 @@ function render() {
   });
 }
 
+// ── Render (orchestrator) ──────────────────────────────────
+
+function render() {
+  S.destroyCharts();
+  var oldSpacer = S.renderedEl.querySelector('.sec-scroll-spacer');
+  if (oldSpacer) oldSpacer.remove();
+  S.renderedEl.innerHTML = DOMPurify.sanitize(marked.parse(S.currentBody));
+
+  attachHeadingAnchors(S.renderedEl);
+  attachCodeCopyButtons(S.renderedEl);
+  buildCollapsibleSections(S.renderedEl);
+  S.processCharts(S.renderedEl);
+  renderFileInfoCard();
+}
+
+// ── File-info card ─────────────────────────────────────────
+
+function renderFileInfoCard() {
+  var card = document.getElementById('file-info-card');
+  if (!card) return;
+  var meta = S.currentMeta || {};
+  var local = S.localMeta || {};
+  var rowsEl = card.querySelector('.fic-rows');
+
+  var rows = [];
+  if (meta.file)      rows.push({ key: 'file',     label: 'File', value: meta.file,      local: false });
+  if (local.path)     rows.push({ key: 'path',     label: 'Path', value: local.path,     local: true  });
+  if (local.fullPath) rows.push({ key: 'fullPath', label: 'Full', value: local.fullPath, local: true  });
+
+  if (rows.length === 0) {
+    card.hidden = true;
+    rowsEl.innerHTML = '';
+    return;
+  }
+
+  card.hidden = false;
+  var note = card.querySelector('.fic-privacy-note');
+  if (note) note.hidden = !rows.some(function(r) { return r.local; });
+  rowsEl.innerHTML = rows.map(function(r) {
+    var pill = r.local ? '<span class="fic-local-pill" title="Only visible on this device — not included in shared sdocs">local only</span>' : '';
+    return '<div class="fic-row" data-key="' + r.key + '">'
+      + '<span class="fic-label">' + r.label + '</span>'
+      + '<span class="fic-value">' + escapeHtml(r.value) + '</span>'
+      + pill
+      + '<button class="fic-copy" title="Copy ' + r.label.toLowerCase() + '">' + COPY_SVG + '</button>'
+      + '</div>';
+  }).join('');
+
+  rowsEl.querySelectorAll('.fic-copy').forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      var row = btn.closest('.fic-row');
+      var val = row.querySelector('.fic-value').textContent;
+      copyWithIconFeedback(val, btn);
+    });
+  });
+}
+
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, function(c) {
+    return ({ '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;' })[c];
+  });
+}
+
+// Swap the button's <svg> to a check, restore after COPY_FEEDBACK_MS.
+// Works for both icon-only and icon+label buttons.
+function copyWithIconFeedback(text, btn) {
+  navigator.clipboard.writeText(text).then(function() {
+    if (!btn) return;
+    var svg = btn.querySelector('svg');
+    if (svg) {
+      svg.outerHTML = CHECK_SVG;
+      setTimeout(function() {
+        var current = btn.querySelector('svg');
+        if (current) current.outerHTML = COPY_SVG;
+      }, COPY_FEEDBACK_MS);
+    }
+  });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  var copyAll = document.getElementById('fic-copy-all');
+  if (copyAll) {
+    copyAll.addEventListener('click', function() {
+      var meta = Object.assign({}, S.currentMeta || {}, { styles: S.collectStyles() });
+      var full = SDocYaml.serializeFrontMatter(meta) + '\n' + (S.currentBody || '');
+      copyWithIconFeedback(full, copyAll);
+    });
+  }
+});
+
 // ── Status ──────────────────────────────────
 
 function setStatus(msg) {
@@ -175,6 +279,7 @@ function loadText(text, filename) {
   var parsed = SDocYaml.parseFrontMatter(text);
   S.currentMeta = parsed.meta;
   S.currentBody = parsed.body;
+  S.chartStyles = (parsed.meta.styles && parsed.meta.styles.chart) || null;
   render();
   if (parsed.meta.styles) S.applyStylesFromMeta(parsed.meta.styles);
   // Re-apply theme defaults for standalone colors (front matter may have
@@ -193,11 +298,30 @@ function loadText(text, filename) {
   });
   S.currentMeta = Object.assign({}, S.currentMeta, { styles: S.collectStyles() });
   S.rawEl.value = SDocYaml.serializeFrontMatter(S.currentMeta) + '\n' + S.currentBody;
-  setStatus(filename ? 'Loaded: ' + filename : 'Ready');
+  setStatus(filename ? 'Loaded: ' + filename : '');
   syncAll('load');
 }
 
-// ── Compression helpers (deflate-raw + base64url) ──
+// ── Compression helpers (brotli + base64url) ──
+
+function concatChunks(chunks) {
+  var total = chunks.reduce(function(n, c) { return n + c.length; }, 0);
+  var buf = new Uint8Array(total);
+  var offset = 0;
+  for (var i = 0; i < chunks.length; i++) { buf.set(chunks[i], offset); offset += chunks[i].length; }
+  return buf;
+}
+
+async function readAllChunks(readable) {
+  var chunks = [];
+  var reader = readable.getReader();
+  while (true) {
+    var result = await reader.read();
+    if (result.done) break;
+    chunks.push(result.value);
+  }
+  return concatChunks(chunks);
+}
 
 function toBase64Url(bytes) {
   var bin = Array.from(new Uint8Array(bytes), function(b) { return String.fromCharCode(b); }).join('');
@@ -212,44 +336,46 @@ function fromBase64Url(str) {
   return bytes;
 }
 
-async function compressText(text) {
+async function compressDeflate(text) {
   var encoded = new TextEncoder().encode(text);
   var cs = new CompressionStream('deflate-raw');
   var writer = cs.writable.getWriter();
   writer.write(encoded);
   writer.close();
-  var chunks = [];
-  var reader = cs.readable.getReader();
-  while (true) {
-    var result = await reader.read();
-    if (result.done) break;
-    chunks.push(result.value);
+  return toBase64Url(await readAllChunks(cs.readable));
+}
+
+async function compressText(text) {
+  if (typeof BrotliWasm === 'undefined') return compressDeflate(text);
+  try {
+    await BrotliWasm.ready;
+    var encoded = new TextEncoder().encode(text);
+    var compressed = BrotliWasm.compress(encoded, { quality: 11 });
+    return toBase64Url(compressed);
+  } catch (_) {
+    return compressDeflate(text);
   }
-  var total = chunks.reduce(function(n, c) { return n + c.length; }, 0);
-  var buf = new Uint8Array(total);
-  var offset = 0;
-  for (var i = 0; i < chunks.length; i++) { buf.set(chunks[i], offset); offset += chunks[i].length; }
-  return toBase64Url(buf);
 }
 
-async function decompressText(b64url) {
-  var bytes = fromBase64Url(b64url);
+async function decompressDeflate(bytes) {
   var ds = new DecompressionStream('deflate-raw');
   var writer = ds.writable.getWriter();
   writer.write(bytes);
   writer.close();
-  var chunks = [];
-  var reader = ds.readable.getReader();
-  while (true) {
-    var result = await reader.read();
-    if (result.done) break;
-    chunks.push(result.value);
+  return new TextDecoder().decode(await readAllChunks(ds.readable));
+}
+
+async function decompressText(b64url) {
+  var bytes = fromBase64Url(b64url);
+  // Try brotli first, fall back to deflate for old URLs or missing WASM
+  if (typeof BrotliWasm !== 'undefined') {
+    try {
+      await BrotliWasm.ready;
+      var decompressed = BrotliWasm.decompress(bytes);
+      return new TextDecoder().decode(decompressed);
+    } catch (_) {}
   }
-  var total = chunks.reduce(function(n, c) { return n + c.length; }, 0);
-  var buf = new Uint8Array(total);
-  var offset = 0;
-  for (var i = 0; i < chunks.length; i++) { buf.set(chunks[i], offset); offset += chunks[i].length; }
-  return new TextDecoder().decode(buf);
+  return decompressDeflate(bytes);
 }
 
 // ── Auto-save to URL hash ──────────────────────────
@@ -287,6 +413,7 @@ function syncAll(source) {
   try {
     if (source === 'controls') {
       S._isDefaultState = false;
+      S.invalidateLocalMeta();
       S.currentMeta = Object.assign({}, S.currentMeta, { styles: S.collectStyles() });
       S.rawEl.value = SDocYaml.serializeFrontMatter(S.currentMeta) + '\n' + S.currentBody;
       updateHash();
@@ -333,6 +460,9 @@ contentArea.addEventListener('drop', function(e) {
 });
 
 S.rawEl.addEventListener('input', function() {
+  // Content has diverged from the on-disk file — drop local paths.
+  S.invalidateLocalMeta();
+
   clearTimeout(S._rawSyncTimer);
   S._rawSyncTimer = setTimeout(function() { syncAll('raw'); }, 300);
 });
@@ -370,6 +500,10 @@ function setMode(mode, skipHash) {
     S.enterWriteMode();
   }
 
+  if (mode === 'read') {
+    document.getElementById('content-area').focus();
+  }
+
   if (!skipHash) updateHash();
 }
 
@@ -387,14 +521,6 @@ document.getElementById('btn-new').addEventListener('click', function() {
   startNewDocument();
 });
 
-document.getElementById('btn-expand-all').addEventListener('click', function() {
-  S.renderedEl.querySelectorAll('.md-section-body').forEach(function(b) { b.classList.add('open'); });
-  S.renderedEl.querySelectorAll('.section-toggle').forEach(function(t) { t.classList.add('open'); });
-});
-document.getElementById('btn-collapse-all').addEventListener('click', function() {
-  S.renderedEl.querySelectorAll('.md-section-body').forEach(function(b) { b.classList.remove('open'); });
-  S.renderedEl.querySelectorAll('.section-toggle').forEach(function(t) { t.classList.remove('open'); });
-});
 
 document.getElementById('right-header').addEventListener('click', function() {
   if (window.innerWidth <= 768) {
@@ -450,7 +576,7 @@ document.querySelectorAll('.sub-header').forEach(function(h) {
 // ── Default content ──────────────────────────────────
 
 var DEFAULT_MD = '';
-var _defaultReady = fetch('/public/default.md').then(function(r) { return r.text(); }).then(function(t) { DEFAULT_MD = t; });
+var _defaultReady = fetch('/public/sdoc.md').then(function(r) { return r.text(); }).then(function(t) { DEFAULT_MD = t; });
 
 // ── Register on SDocs for cross-module access ──────────
 
@@ -479,6 +605,18 @@ S.setStatus = setStatus;
 S.setMode = setMode;
 S.render = render;
 S.loadText = loadText;
+S.renderFileInfoCard = renderFileInfoCard;
+
+// Clear runtime-only local metadata (paths) once the user has edited the
+// document, since the content no longer corresponds to the file on disk.
+// Suppressed while a document is loading — style changes during load come from
+// applying saved styles, not from user edits.
+S.invalidateLocalMeta = function() {
+  if (S._loadingDocument) return;
+  if (!S.localMeta || Object.keys(S.localMeta).length === 0) return;
+  S.localMeta = {};
+  renderFileInfoCard();
+};
 
 // Sync theme tabs to initial theme
 S.updateThemeTabs(S.activeTheme);
@@ -500,14 +638,33 @@ async function loadFromHash() {
   var stylesParam = params.get('styles');
   var themeParam = params.get('theme');
   var secParam = params.get('sec');
+  var localParam = params.get('local');
+
+  // Read &local=<base64url-json> into memory, then strip it from the URL bar
+  // so anything the user copies/shares no longer contains it.
+  if (localParam) {
+    try {
+      var b64 = localParam.replace(/-/g, '+').replace(/_/g, '/');
+      while (b64.length % 4) b64 += '=';
+      S.localMeta = JSON.parse(atob(b64)) || {};
+    } catch (e) {
+      S.localMeta = {};
+    }
+    params.delete('local');
+    var newHash = params.toString();
+    var newUrl = window.location.pathname + (newHash ? '#' + newHash : '');
+    window.history.replaceState(null, '', newUrl);
+    _lastLoadedHash = newHash; // prevent re-trigger
+  }
 
+  S._loadingDocument = true;
   S.resetAllStyles();
 
   if (mdParam) {
     try {
       S._isDefaultState = false;
       var text = await decompressText(mdParam);
-      loadText(text, 'document.md');
+      loadText(text);
     } catch (e) {
       console.warn('sdocs-dev: could not decode hash', e);
     }