@nynb/sandpaper 0.1.0

package/brain/assets/brain.js

@@ -0,0 +1,189 @@
+// brain.js — zero-dependency, file://-safe enhancements for the project brain.
+// (1) Live-DOM search/filter over .entry blocks.  (2) "Since you last looked" on the log.
+// (3) Plan progress derived from task status.  (4) Out-link resolver — keeps brain/
+//     publishable anywhere (one same-origin probe; the only network call in this file).
+// (5) Whiteboard fold-fit — the canvas caps at the first fold, content scrolls inside.
+(function () {
+  'use strict';
+
+  // ---- (1) search / filter ----
+  var q = document.getElementById('brain-q');
+  if (q) {
+    var entries = Array.prototype.slice.call(document.querySelectorAll('.entry[data-kind], .timeline li[data-kind]'));
+    var facetEls = Array.prototype.slice.call(document.querySelectorAll('.facet'));
+    var note = document.getElementById('brain-searchnote');
+    var activeFacet = '';
+
+    function apply() {
+      var term = q.value.trim().toLowerCase();
+      var shown = 0;
+      entries.forEach(function (e) {
+        var hay = (e.textContent + ' ' + (e.getAttribute('data-tags') || '') + ' ' + (e.getAttribute('data-kind') || '') + ' ' + (e.getAttribute('data-status') || '') + ' ' + (e.getAttribute('data-lens') || '')).toLowerCase();
+        var okTerm = !term || hay.indexOf(term) >= 0;
+        var okFacet = !activeFacet || e.getAttribute('data-kind') === activeFacet || e.getAttribute('data-status') === activeFacet || e.getAttribute('data-lens') === activeFacet;
+        var show = okTerm && okFacet;
+        e.classList.toggle('hidden', !show);
+        if (show) shown++;
+      });
+      if (note) note.textContent = (term || activeFacet) ? (shown + ' shown') : '';
+    }
+    q.addEventListener('input', apply);
+    facetEls.forEach(function (f) {
+      f.addEventListener('click', function () {
+        var val = f.getAttribute('data-facet') || '';
+        activeFacet = (activeFacet === val) ? '' : val;
+        facetEls.forEach(function (x) { x.classList.toggle('on', x === f && activeFacet); });
+        apply();
+      });
+    });
+    // press "/" to focus search
+    document.addEventListener('keydown', function (e) {
+      if (e.key === '/' && document.activeElement !== q) { e.preventDefault(); q.focus(); }
+    });
+  }
+
+  // ---- (2) "since you last looked" on the log ----
+  var logRows = Array.prototype.slice.call(document.querySelectorAll('.timeline li[data-cid], .entry--worklog[data-cid]'));
+  if (logRows.length) {
+    // freshness is the product: derive the day divider from the newest row instead of trusting stale hand-typed text
+    var day = document.querySelector('.tl-day');
+    var newestDate = logRows[0].getAttribute('data-date');
+    if (day && newestDate) {
+      var d = new Date(newestDate + 'T00:00:00');
+      if (!isNaN(d)) day.textContent = d.toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric' }) + ' · latest';
+    }
+    var KEY = 'brain:lastSeen';
+    var last = null;
+    try { last = localStorage.getItem(KEY); } catch (e) {}
+    var newest = logRows[0].getAttribute('data-cid'); // rows are newest-first
+    if (last && last !== newest) {
+      var unseen = 0;
+      for (var i = 0; i < logRows.length; i++) {
+        if (logRows[i].getAttribute('data-cid') === last) break;
+        logRows[i].classList.add('unseen'); unseen++;
+      }
+      var badge = document.getElementById('brain-unseen');
+      if (badge && unseen) { badge.textContent = unseen + ' new'; badge.hidden = false; }
+    }
+    var mark = document.getElementById('brain-markseen');
+    if (mark) mark.addEventListener('click', function () {
+      try { localStorage.setItem(KEY, newest); } catch (e) {}
+      logRows.forEach(function (r) { r.classList.remove('unseen'); });
+      var b = document.getElementById('brain-unseen'); if (b) b.hidden = true;
+    });
+    // record this visit as seen on unload
+    window.addEventListener('pagehide', function () { try { localStorage.setItem(KEY, newest); } catch (e) {} });
+  }
+
+  // ---- (3) plan progress: derive each initiative's bar + the overall % from child task status ----
+  var inits = Array.prototype.slice.call(document.querySelectorAll('.entry--initiative'));
+  if (inits.length) {
+    var allDone = 0, allTotal = 0;
+    inits.forEach(function (ini) {
+      var tasks = Array.prototype.slice.call(ini.querySelectorAll('.task[data-status]'));
+      var done = 0, doing = 0, blocked = 0;
+      tasks.forEach(function (t) {
+        var s = t.getAttribute('data-status');
+        if (s === 'done') done++; else if (s === 'doing') doing++; else if (s === 'blocked') blocked++;
+      });
+      var total = tasks.length; allDone += done; allTotal += total;
+      var pct = total ? Math.round(done / total * 100) : 0;
+      var bar = ini.querySelector('[data-progress] i'); if (bar) bar.style.width = pct + '%';
+      var lab = ini.querySelector('[data-progress-label]'); if (lab) lab.textContent = done + '/' + total + ' · ' + pct + '%';
+      var st = (total && done === total) ? 'done' : (blocked && !doing) ? 'blocked' : (doing || done) ? 'active' : 'planned';
+      var roll = ini.querySelector('[data-rollup]');
+      if (roll) { roll.textContent = st; roll.className = 'badge ' + (st === 'done' ? 'done' : st === 'active' ? 'wip' : st === 'blocked' ? 'open' : 'stub'); }
+      ini.setAttribute('data-derived', st);
+    });
+    var op = allTotal ? Math.round(allDone / allTotal * 100) : 0;
+    var ov = document.getElementById('plan-overall'); if (ov) ov.textContent = allDone + '/' + allTotal + ' · ' + op + '%';
+    var ob = document.getElementById('plan-overall-bar'); if (ob) ob.style.width = op + '%';
+    // per-PHASE rollup — sum tasks across each phase's initiatives (by data-phase, not position)
+    ['0', '1'].forEach(function (ph) {
+      var pt = Array.prototype.slice.call(document.querySelectorAll('.entry--initiative[data-phase="' + ph + '"] .task[data-status]'));
+      var pd = pt.filter(function (t) { return t.getAttribute('data-status') === 'done'; }).length;
+      var pp = pt.length ? Math.round(pd / pt.length * 100) : 0;
+      var pbar = document.querySelector('[data-phase-progress="' + ph + '"] i'); if (pbar) pbar.style.width = pp + '%';
+      var plab = document.querySelector('[data-phase-label="' + ph + '"]'); if (plab) plab.textContent = pd + '/' + pt.length + ' · ' + pp + '%';
+    });
+  }
+
+  // ---- (4) out-link resolver: brain/ stays publishable anywhere ----
+  // Refs to canonical truth (spec · source · meta) are written RELATIVE — link, never copy —
+  // so they resolve on disk and whenever the whole repo is served. Deployed DETACHED (a
+  // brain/-only static host), they would 404; so: probe once per load for the repo above us
+  // (../package.json, name-checked, NO caching — the same origin can serve both modes), and
+  // when detached, resolve out-links AT CLICK TIME to the source base named in
+  // <meta name="sandpaper:source" content=".../blob/HEAD/" data-pkg="name">.
+  // No meta → dim them with a tooltip instead of 404ing. file:// counts as attached (it IS
+  // the disk). NOTE: out-of-brain detection must read the RAW href prefix — at a root deploy
+  // the URL resolver silently eats "../" at the boundary, so resolved URLs can't tell.
+  var me = document.querySelector('script[src*="assets/brain.js"]');
+  var ups = me ? ((me.getAttribute('src') || '').match(/\.\.\//g) || []).length : 0; // page depth below the brain root
+  var OUT = new Array(ups + 2).join('../'); // (ups+1) ×  "../"  — the prefix that leaves brain/
+  var srcMeta = document.querySelector('meta[name="sandpaper:source"]');
+  var srcBase = srcMeta ? (srcMeta.getAttribute('content') || '') : '';
+  var srcPkg = srcMeta ? (srcMeta.getAttribute('data-pkg') || '') : '';
+
+  function outPath(a) { // the repo-relative path if this anchor leaves brain/, else null
+    var h = a.getAttribute('href') || '';
+    if (h.slice(0, OUT.length) !== OUT) return null;
+    var rest = h.slice(OUT.length);
+    return rest.slice(0, 3) === '../' ? null : rest; // above the repo root — unmappable
+  }
+
+  var outLinks = Array.prototype.slice.call(document.querySelectorAll('a[href]')).filter(outPath);
+  if (outLinks.length && location.protocol !== 'file:') {
+    fetch(OUT + 'package.json', { cache: 'no-store' })
+      .then(function (r) { if (!r.ok) throw 0; return r.json(); })
+      .then(function (j) { if (!j || typeof j.name !== 'string' || (srcPkg && j.name !== srcPkg)) detached(); })
+      .catch(detached);
+  }
+
+  function detached() {
+    document.documentElement.classList.add('brain-detached');
+    if (srcBase) {
+      outLinks.forEach(function (a) { a.title = 'repo file — opens the copy on the source host'; });
+      document.addEventListener('click', rewrite, true);
+      document.addEventListener('auxclick', rewrite, true); // middle-click
+    } else {
+      var block = function (e) { e.preventDefault(); };
+      outLinks.forEach(function (a) {
+        a.classList.add('ref-detached');
+        a.title = 'lives in the repo — open the brain locally (or set the sandpaper:source meta) to follow';
+        a.addEventListener('click', block);
+        a.addEventListener('auxclick', block);
+      });
+    }
+  }
+  // Resolve just-in-time, then RESTORE the raw href: the mutation must live only long enough
+  // for the browser's default navigation to read it. A rewrite left in the DOM gets captured
+  // by the refine toolbar's edit-in-place and committed to disk — an absolute URL baked into
+  // the brain file. Inert when something upstream (the toolbar) already claimed the click.
+  function rewrite(e) {
+    if (e.defaultPrevented) return;
+    var a = e.target && e.target.closest ? e.target.closest('a[href]') : null;
+    if (!a) return;
+    var p = outPath(a);
+    if (!p) return;
+    var raw = a.getAttribute('href');
+    a.setAttribute('href', srcBase + p);
+    setTimeout(function () { a.setAttribute('href', raw); }, 0);
+  }
+
+  // ---- (5) whiteboard fold-fit ----
+  // CSS alone can't cap the canvas at the fold — how far down the whiteboard starts depends
+  // on the shell + NOW plate above it — so measure: cap = viewport − document offset − a
+  // breath. Re-fit on resize and once fonts settle (they shift the offset after first paint).
+  var wb = document.querySelector('.whiteboard');
+  if (wb) {
+    var fit = function () {
+      var top = wb.getBoundingClientRect().top + window.pageYOffset;
+      wb.style.maxHeight = Math.max(260, window.innerHeight - top - 26) + 'px';
+    };
+    fit();
+    window.addEventListener('resize', fit);
+    window.addEventListener('load', fit);
+    if (document.fonts && document.fonts.ready && document.fonts.ready.then) document.fonts.ready.then(fit);
+  }
+})();

package/brain/assets/theme.css

@@ -0,0 +1,88 @@
+/* theme.css — Sandpaper's single skin.
+   This is the ONE file a project owner edits to re-skin every Sandpaper surface
+   (the brain books, sandpaper.html, engg-spec.html). Change a value here and the
+   whole look shifts with it. Pure CSS custom properties, zero dependencies,
+   no build step, valid standalone CSS.
+
+   CURRENT SKIN — "AS-BUILT": the cyanotype engineering-drawing system shared with
+   sandpaper.sh. Cool drafting sheets, prussian plate, one working blue, a red
+   inspection accent. Type: Archivo (grotesk) + JetBrains Mono. (The previous warm
+   service-manual skin lives in git history if you ever want it back.)
+
+   NOTE: toolbar.css does NOT import this file (it is injected into arbitrary host
+   pages and must stand alone) — it carries its own #sp-panel-scoped --sp-* copy as a
+   fallback. But toolbar.js reads these :root tokens at runtime and overrides that copy
+   when present, so re-skinning here reaches the floating toolbar too — no hand-sync. */
+:root{
+  /* ---- paper / surfaces (cool drafting sheets) ---- */
+  --paper:#F3F6F9;          /* base page background */
+  --panel:#E9EFF4;          /* raised panel / card / input background */
+  --paper-3:#DEE7EF;        /* recessed progress track / lighter paper */
+  --card-feature:#EDF3F8;   /* feature-card cool wash */
+  --plate:#0E2C50;          /* dark drafting-plate / code-block background — the blueprint */
+  --white:#FCFDFE;          /* search & inline input fields */
+
+  /* ---- ink / text ---- */
+  --ink:#18293E;            /* primary text; cover-plate background */
+  --ink-2:#122136;          /* darker ink variant */
+  --text:#2A3B50;           /* body copy inside records, cards, callouts */
+  --text-prose:#243348;     /* long-form wiki prose + lead */
+  --text-quote:#33445A;     /* quoted text (toolbar blockquotes) */
+  --text-muted:#54687D;     /* muted ledger / "today" text */
+
+  /* ---- accents (semantic, never decorative) ---- */
+  --clay:#1C5085;           /* primary accent: links, interactive, WIP — the working blue */
+  --pine:#274768;           /* secondary: success surface, sidebar, verdict */
+  --ochre:#B07818;          /* warning / open — drafting amber */
+  --moss:#1F7A4D;           /* done / verified / progress fill */
+  --rust:#C63B2F;           /* error / blocked / gotcha — the inspection red */
+  --mute:#6B7E92;           /* secondary text, idle, disabled */
+
+  /* ---- legible inks for tinted badges / the dark plate ---- */
+  --badge-done-ink:#1D5B3C; /* text on the "done/verified" badge */
+  --badge-open-ink:#7A5610; /* text on the "open" badge */
+  --on-plate-meta:#8FAAC6;  /* metadata text on the dark cover plate */
+  --on-plate-link:#C9D8E7;  /* links on the dark cover plate */
+  --on-plate-em:#FF9A8B;    /* accent inside the NOW hero */
+
+  /* ---- status semantics (map onto the accents; always label-paired) ---- */
+  --ok:var(--moss); --wip:var(--clay); --open:var(--ochre); --blocked:var(--rust); --idle:var(--mute);
+
+  /* ---- hairlines, rules, and ink/paper/accent tints ---- */
+  --rule:rgba(24,41,62,.16);            /* standard divider */
+  --rule-2:rgba(24,41,62,.08);          /* faint divider */
+  --hairline:1px solid var(--rule);     /* the canonical 1px border */
+  --tint-ink-code:rgba(28,80,133,.08);  /* inline-code wash */
+  --tint-ink-stub:rgba(24,41,62,.08);   /* stub / superseded badge wash */
+  --tint-ink-strike:rgba(24,41,62,.24); /* line-through decoration */
+  --tint-clay-sel:rgba(28,80,133,.22);  /* text selection */
+  --tint-clay-badge:rgba(28,80,133,.13);/* wip / fixed badge wash */
+  --tint-clay-focus:rgba(28,80,133,.3); /* input focus ring */
+  --tint-ochre-badge:rgba(176,120,24,.16);/* open badge wash */
+  --tint-moss-badge:rgba(31,122,77,.14);/* done badge wash */
+  --tint-rust-badge:rgba(198,59,47,.12); /* blocking badge wash */
+  --tint-moss-glow:rgba(31,122,77,.25); /* health-dot glow ring */
+  --tint-paper-grid:rgba(243,246,249,.07);/* plate grid lines */
+  --tint-paper-border:rgba(243,246,249,.3);/* health pill border on plate */
+
+  /* ---- typography ---- */
+  --font-display:'Archivo',system-ui,-apple-system,sans-serif;          /* display, used sparingly */
+  --font-body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* body */
+  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;            /* labels / code / metadata */
+
+  /* ---- radii (drafting-sharp) ---- */
+  --radius:3px;             /* default container radius */
+  --radius-sm:2px;          /* inline code, id chips */
+  --radius-md:4px;          /* cards, panels */
+  --radius-lg:6px;          /* floating toolbar panel */
+  --radius-pill:3px;        /* chips, progress tracks, health badge — squared, like drawing labels */
+
+  /* ---- elevation ---- */
+  --shadow-panel:0 10px 30px rgba(10,20,40,.16);
+
+  /* ---- legacy aliases (keep brain.css's existing names resolving) ---- */
+  --paper-2:var(--panel);
+  --serif:var(--font-display);
+  --sans:var(--font-body);
+  --mono:var(--font-mono);
+}

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@nynb/sandpaper",
+  "version": "0.1.0",
+  "description": "A living project brain + refine-in-place toolbar for Claude Code projects. npx @nynb/sandpaper install-skill / init / doctor / open.",
+  "type": "module",
+  "bin": { "sandpaper": "bin/cli.js" },
+  "files": ["bin/", "src/", "public/", "skill/", "brain/assets/", "README.md"],
+  "keywords": ["claude-code", "skill", "project-brain", "living-docs", "documentation", "agent"],
+  "author": "Narayan <codevalley@live.com>",
+  "license": "MIT",
+  "repository": { "type": "git", "url": "git+https://github.com/codevalley/sandpaper.git" },
+  "homepage": "https://github.com/codevalley/sandpaper#readme",
+  "bugs": "https://github.com/codevalley/sandpaper/issues",
+  "engines": { "node": ">=18" },
+  "scripts": {
+    "start": "node bin/cli.js help",
+    "test": "node test/parse-test.js && node test/markdown-test.js && node test/edit-test.js"
+  }
+}

package/public/sp-markdown.js

@@ -0,0 +1,172 @@
+// sp-markdown.js — a tiny, dependency-free, XSS-safe markdown renderer for the Sandpaper toolbar.
+// parseMarkdown / tokenizeInline are PURE (no DOM) and unit-tested in node.
+// renderMarkdown builds DOM via createElement + textContent only — never innerHTML on model output.
+
+// ---- block parser (pure) ----
+export function parseMarkdown(md) {
+  const lines = String(md == null ? '' : md).replace(/\r\n?/g, '\n').split('\n');
+  const blocks = [];
+  let i = 0;
+  const isSep = (s) => s != null && /-/.test(s) && /^\s*\|?[\s:|-]+\|?\s*$/.test(s);
+  while (i < lines.length) {
+    const line = lines[i];
+    if (/^\s*$/.test(line)) { i++; continue; }                       // blank
+
+    const fence = line.match(/^```(\w*)\s*$/);                        // fenced code
+    if (fence) {
+      const buf = []; i++;
+      while (i < lines.length && !/^```\s*$/.test(lines[i])) { buf.push(lines[i]); i++; }
+      i++; // skip closing fence (tolerant of EOF — streaming-safe)
+      blocks.push({ type: 'code', lang: fence[1] || '', text: buf.join('\n') });
+      continue;
+    }
+
+    const h = line.match(/^(#{1,6})\s+(.*)$/);                        // heading
+    if (h) { blocks.push({ type: 'h', level: h[1].length, text: h[2].trim() }); i++; continue; }
+
+    if (/^\s*([-*_])\1\1[-*_\s]*$/.test(line)) { blocks.push({ type: 'hr' }); i++; continue; } // hr
+
+    if (/^\s*>\s?/.test(line)) {                                      // blockquote
+      const q = [];
+      while (i < lines.length && /^\s*>\s?/.test(lines[i])) { q.push(lines[i].replace(/^\s*>\s?/, '')); i++; }
+      blocks.push({ type: 'quote', text: q.join('\n') });
+      continue;
+    }
+
+    if (line.indexOf('|') >= 0 && isSep(lines[i + 1])) {             // GFM table
+      const headers = splitRow(line);
+      i += 2;
+      const rows = [];
+      while (i < lines.length && lines[i].indexOf('|') >= 0 && !/^\s*$/.test(lines[i])) { rows.push(splitRow(lines[i])); i++; }
+      blocks.push({ type: 'table', headers, rows });
+      continue;
+    }
+
+    const lu = line.match(/^\s*[-*+]\s+(.*)$/);                       // list
+    const lo = line.match(/^\s*\d+[.)]\s+(.*)$/);
+    if (lu || lo) {
+      const ordered = !!lo; const items = [];
+      while (i < lines.length) {
+        const mu = lines[i].match(/^\s*[-*+]\s+(.*)$/);
+        const mo = lines[i].match(/^\s*\d+[.)]\s+(.*)$/);
+        if (ordered && mo) { items.push(mo[1]); i++; }
+        else if (!ordered && mu) { items.push(mu[1]); i++; }
+        else break;
+      }
+      blocks.push({ type: ordered ? 'ol' : 'ul', items });
+      continue;
+    }
+
+    const p = [];                                                    // paragraph
+    while (i < lines.length && !/^\s*$/.test(lines[i]) && !/^```/.test(lines[i]) &&
+           !/^#{1,6}\s/.test(lines[i]) && !/^\s*>/.test(lines[i]) &&
+           !/^\s*([-*+]|\d+[.)])\s+/.test(lines[i]) &&
+           !(lines[i].indexOf('|') >= 0 && isSep(lines[i + 1]))) {
+      p.push(lines[i]); i++;
+    }
+    blocks.push({ type: 'p', text: p.join('\n') });
+  }
+  return blocks;
+}
+
+function splitRow(line) {
+  return line.trim().replace(/^\|/, '').replace(/\|$/, '').split('|').map((c) => c.trim());
+}
+
+// ---- inline tokenizer (pure) ----
+const SAFE_HREF = /^(https?:|mailto:|\/|\.|#)/i;
+export function tokenizeInline(text) {
+  const out = [];
+  let s = String(text == null ? '' : text);
+  const rules = [
+    { type: 'code', re: /`([^`]+)`/ },
+    { type: 'bold', re: /\*\*([^*]+)\*\*/ },
+    { type: 'strike', re: /~~([^~]+)~~/ },
+    { type: 'link', re: /\[([^\]]+)\]\(([^)\s]+)\)/ },
+    { type: 'em', re: /\*([^*\n]+)\*|_([^_\n]+)_/ },
+  ];
+  while (s.length) {
+    let best = null;
+    for (const r of rules) {
+      const m = r.re.exec(s);
+      if (m && (best === null || m.index < best.m.index)) best = { r, m };
+    }
+    if (!best) { out.push({ type: 'text', value: s }); break; }
+    if (best.m.index > 0) out.push({ type: 'text', value: s.slice(0, best.m.index) });
+    const m = best.m;
+    if (best.r.type === 'link') out.push({ type: 'link', value: m[1], href: m[2] });
+    else if (best.r.type === 'em') out.push({ type: 'em', value: m[1] || m[2] });
+    else out.push({ type: best.r.type, value: m[1] });
+    s = s.slice(m.index + m[0].length);
+  }
+  return out;
+}
+
+// ---- DOM renderer (browser only) ----
+export function renderMarkdown(md) {
+  const frag = document.createDocumentFragment();
+  for (const b of parseMarkdown(md)) {
+    if (b.type === 'h') frag.appendChild(inlineInto(document.createElement('h' + Math.min(b.level, 6)), b.text, 'sp-md-h'));
+    else if (b.type === 'p') frag.appendChild(inlineInto(document.createElement('p'), b.text, 'sp-md-p'));
+    else if (b.type === 'ul' || b.type === 'ol') frag.appendChild(listEl(b));
+    else if (b.type === 'code') frag.appendChild(codeBlock(b.text));
+    else if (b.type === 'table') frag.appendChild(tableEl(b));
+    else if (b.type === 'quote') frag.appendChild(inlineInto(document.createElement('blockquote'), b.text, 'sp-md-quote'));
+    else if (b.type === 'hr') { const hr = document.createElement('hr'); hr.className = 'sp-md-hr'; frag.appendChild(hr); }
+  }
+  return frag;
+}
+
+function inlineInto(el, text, cls) {
+  if (cls) el.className = cls;
+  for (const t of tokenizeInline(text)) {
+    if (t.type === 'text') el.appendChild(document.createTextNode(t.value));
+    else if (t.type === 'link') {
+      const a = document.createElement('a');
+      a.textContent = t.value;
+      a.href = SAFE_HREF.test(t.href) ? t.href : '#';   // reject javascript: etc.
+      a.target = '_blank'; a.rel = 'noopener noreferrer';
+      el.appendChild(a);
+    } else {
+      const tag = t.type === 'bold' ? 'strong' : t.type === 'em' ? 'em' : t.type === 'strike' ? 'del' : 'code';
+      const e = document.createElement(tag);
+      if (t.type === 'code') e.className = 'sp-md-code';
+      e.textContent = t.value;
+      el.appendChild(e);
+    }
+  }
+  return el;
+}
+
+function listEl(b) {
+  const l = document.createElement(b.type); l.className = 'sp-md-list';
+  b.items.forEach((it) => l.appendChild(inlineInto(document.createElement('li'), it)));
+  return l;
+}
+
+function codeBlock(text) {
+  const wrap = document.createElement('div'); wrap.className = 'sp-md-pre';
+  const copy = document.createElement('button'); copy.type = 'button'; copy.className = 'sp-md-copy'; copy.textContent = 'Copy';
+  copy.addEventListener('click', function () {
+    if (navigator.clipboard) navigator.clipboard.writeText(text).then(function () { copy.textContent = 'Copied'; setTimeout(function () { copy.textContent = 'Copy'; }, 1200); });
+  });
+  const pre = document.createElement('pre'); const code = document.createElement('code');
+  code.textContent = text; pre.appendChild(code);
+  wrap.appendChild(copy); wrap.appendChild(pre);
+  return wrap;
+}
+
+function tableEl(b) {
+  const t = document.createElement('table'); t.className = 'sp-md-table';
+  const thead = document.createElement('thead'); const htr = document.createElement('tr');
+  b.headers.forEach((c) => htr.appendChild(inlineInto(document.createElement('th'), c)));
+  thead.appendChild(htr); t.appendChild(thead);
+  const tb = document.createElement('tbody');
+  b.rows.forEach((row) => {
+    const tr = document.createElement('tr');
+    row.forEach((c) => tr.appendChild(inlineInto(document.createElement('td'), c)));
+    tb.appendChild(tr);
+  });
+  t.appendChild(tb);
+  return t;
+}