templa-js 0.10.0 → 0.13.1

package/bin/templa.js

@@ -12,7 +12,15 @@
  * runtime: {{key}}, {{{key}}}, <template if="key">…</template>,
  * <template unless="key">…</template>, plus Web Components-style <slot>
  * for layouts. Data is passed by plain HTML attributes (data-* attrs
- * are reserved as metadata and skipped).
+ * are reserved as metadata and skipped). <a> elements inside <nav>
+ * pointing at the page being built are marked aria-current="page".
+ *
+ * Asset URLs inside a partial (src on any element, href on <link>/<use>,
+ * srcset, poster, and CSS url() in <style>/style="") are treated as
+ * partial-relative and rewritten to root-absolute paths — matching the
+ * runtime — so a shared partial resolves its assets the same from pages at
+ * any depth. <a href>, {{templated}} URLs, data-* and url(#id) are left as
+ * authored (write those root-absolute).
  *
  * Convention: files and directories starting with "_" are treated as
  * partials and are never written to the output directory. Reference
@@ -25,32 +33,32 @@ const path = require('path');
 
 const VERSION = require('../package.json').version;
 const MAX_DEPTH = 50;
-
-// ─── render: shared with browser runtime ─────────────────────────────
-const escHtml = s => String(s)
-  .replace(/&/g, '&amp;')
-  .replace(/</g, '&lt;')
-  .replace(/>/g, '&gt;')
-  .replace(/"/g, '&quot;')
-  .replace(/'/g, '&#39;');
-
-function render(html, data) {
-  return html
-    .replace(/{{{\s*([\w-]+)\s*}}}/g, (m, k) => k in data ? data[k] : m)
-    .replace(/{{\s*([\w-]+)\s*}}/g, (m, k) => k in data ? escHtml(data[k]) : m);
-}
-
-// ─── attribute / template / slot parsing ─────────────────────────────
-function getAttr(attrs, name) {
-  const dq = attrs.match(new RegExp(`\\b${name}\\s*=\\s*"([^"]*)"`));
-  if (dq) return dq[1];
-  const sq = attrs.match(new RegExp(`\\b${name}\\s*=\\s*'([^']*)'`));
-  return sq ? sq[1] : null;
-}
-
-// Every attribute is a string data key, except: src/slot/if/unless are
-// reserved, and any data-* attribute is treated as metadata (skipped).
-const RESERVED = new Set(['src', 'slot', 'if', 'unless']);
+let srcRoot = '';   // set per-build; base for root-absolute asset rebasing
+
+// Single source of truth: the pure parser/renderer transforms live in templa.js
+// (the browser runtime) and are imported here, so build and runtime can't drift.
+// Only CLI-specific concerns stay below — filesystem I/O, the path-based URL
+// resolver, merged-style extraction to disk, build-time nav marking, script
+// stripping. (templa.js touches no DOM at load, so requiring it in Node is safe.)
+const {
+  render, getAttr, findTemplateBlocks, hasUnclosed, applyConditionals,
+  parseSlots, fillSlots, rebaseAssets, rebaseCss, skipUrl, normalizePagePath,
+  RESERVED,
+} = require('../templa.js')._;
+
+// ─── problem collection (--strict / check) ───────────────────────────
+// Problems are reported as a summary after the walk; with --strict (or the
+// `check` command, which implies it) any problem makes the process exit 1
+// so agents and CI can gate on the exit code instead of scraping logs.
+const problems = [];
+let currentPage = '';
+const report = msg => problems.push(`${currentPage}: ${msg}`);
+const UNRESOLVED_KEY = /{{{?\s*([\w-]+)\s*}}}?/g;
+
+// ─── CLI-only: collect data from a raw attribute string ──────────────
+// The runtime reads el.attributes from the DOM; the build has only the attrs
+// substring, so it parses that. Reserved names and data-* are skipped (shared
+// RESERVED). render/getAttr and the rest of the parser are imported above.
 const ATTR = /(\w[\w:.-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'))?/g;
 
 // ─── co-located styles via <style data-merge="..."> ─────────────────
@@ -69,7 +77,10 @@ function extractMergedStyles(html, partialPath) {
     any = true;
     const t = target.trim();
     if (!mergedTargets.has(t)) mergedTargets.set(t, []);
-    mergedTargets.get(t).push(body.trim());
+    // url()s in co-located styles are partial-relative; rebase to root-absolute
+    // (works regardless of where the merged stylesheet lands in dist).
+    const dir = path.dirname(partialPath);
+    mergedTargets.get(t).push(rebaseCss(body, v => rebaseUrl(v, dir)).trim());
     return '';
   });
   if (any) mergedSeen.add(partialPath);
@@ -91,6 +102,36 @@ function flushMergedStyles(distDir) {
   mergedSeen.clear();
 }
 
+// ─── current-page nav marking ────────────────────────────────────────
+// Any <a> inside <nav> whose href resolves to the page being built gets
+// aria-current="page" — CSS Selectors 4 specced `:local-link` for exactly
+// this and no browser shipped it. Active-nav styling becomes a single rule
+// (nav a[aria-current="page"]) with no per-page data threading and no
+// page-enumerating selectors. Skipped: pure-hash hrefs (same-page TOC
+// links), scheme/protocol-relative URLs (external), and any <a> whose
+// author already wrote aria-current. `pagePath` is the site-root-absolute
+// path of the page being built (e.g. /about.html, /blog/post.html); hrefs
+// resolve against it exactly like a browser would. Path comparison is
+// hosting-convention tolerant: /index.html ≡ /, /about.html ≡ /about ≡
+// /about/ — so pretty-URL hrefs (Netlify, Vercel) match the .html page
+// being built, mirroring the runtime's behaviour on such hosts.
+const NAV_BLOCK = /<nav\b[^>]*>[\s\S]*?<\/nav>/gi;
+const A_TAG = /<a\b((?:[^>"']|"[^"]*"|'[^']*')*)>/gi;
+
+function markCurrentNavLinks(html, pagePath) {
+  const here = normalizePagePath(pagePath);
+  return html.replace(NAV_BLOCK, nav => nav.replace(A_TAG, (tag, attrs) => {
+    if (/(?:^|\s)aria-current\s*=/i.test(attrs)) return tag;
+    const href = getAttr(attrs, 'href');
+    if (!href || href.startsWith('#') || href.startsWith('//') || /^[a-z][a-z0-9+.-]*:/i.test(href)) return tag;
+    let url;
+    try { url = new URL(href, 'https://templa.local' + pagePath); } catch { return tag; }
+    if (url.origin !== 'https://templa.local') return tag;
+    if (normalizePagePath(url.pathname) !== here) return tag;
+    return `<a${attrs} aria-current="page">`;
+  }));
+}
+
 // ─── runtime-script stripper ─────────────────────────────────────────
 // build output is fully expanded HTML; the runtime templa.js is no-op
 // there. We remove the canonical bootstrap pair from output:
@@ -115,6 +156,12 @@ const STRIP_EMPTY_MODULE = /<script\s+type\s*=\s*["']module["']\s*>\s*<\/script>
 const TEMPLA_ASSET = /^templa(\.min)?\.js$/;
 const HAS_TEMPLA_SCRIPT_REF = /<script\b[^>]*\bsrc\s*=\s*["'][^"']*\btempla(\.min)?\.js[^"']*["']/i;
 
+// After expansion, partial-internal conditionals are resolved; any remaining
+// <template if/unless> is page-level — it has no calling data, so it is left
+// untouched and ends up as inert (invisible) markup in the output. The \s
+// before the name keeps this from matching framework directives like x-if.
+const LEFTOVER_COND = /<template\b[^>]*\s(?:if|unless)\s*=/i;
+
 function stripRuntimeScripts(html) {
   return html
     .replace(STRIP_TEMPLA_SRC, '')
@@ -128,102 +175,33 @@ function collectData(attrs) {
   ATTR.lastIndex = 0;
   let m;
   while ((m = ATTR.exec(attrs))) {
-    const name = m[1];
+    const name = m[1].toLowerCase();
     if (RESERVED.has(name) || name.startsWith('data-')) continue;
     data[name] = m[2] ?? m[3] ?? '';
   }
   return data;
 }
 
-const TEMPLATE_OPEN = /<template((?:\s+[\w:.-]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'>]+))?)*)\s*(\/?)>/gi;
-const TEMPLATE_TAG = /<template\b|<\/template\s*>/gi;
-
-// Length-preserving redaction: blank out quoted string contents so a literal
-// `<template>` token inside an attribute value can't desync depth tracking.
-const redactStrings = s => s.replace(
-  /"[^"]*"|'[^']*'/g,
-  m => m[0] + ' '.repeat(m.length - 2) + m[m.length - 1]
-);
-
-// Top-level <template>...</template> blocks in `html`, depth-aware so
-// nested templates do not confuse the matching close.
-function findTemplateBlocks(html) {
-  const scan = redactStrings(html);
-  const out = [];
-  TEMPLATE_OPEN.lastIndex = 0;
-  let m;
-  while ((m = TEMPLATE_OPEN.exec(scan))) {
-    const start = m.index;
-    const openEnd = start + m[0].length;
-    const attrs = html.substring(start + 9, start + 9 + m[1].length);
-    if (m[2] === '/') {
-      out.push({ start, end: openEnd, attrs, inner: '' });
-      continue;
-    }
-    TEMPLATE_TAG.lastIndex = openEnd;
-    let depth = 1, t;
-    while (depth > 0 && (t = TEMPLATE_TAG.exec(scan))) {
-      if (t[0][1] === '/') depth--;
-      else depth++;
-      if (depth === 0) {
-        out.push({ start, end: t.index + t[0].length, attrs, inner: html.slice(openEnd, t.index) });
-        TEMPLATE_OPEN.lastIndex = t.index + t[0].length;
-        break;
-      }
-    }
-  }
-  return out;
-}
-
-function parseSlots(innerHtml) {
-  const named = {};
-  const fillers = findTemplateBlocks(innerHtml)
-    .filter(b => getAttr(b.attrs, 'slot'))
-    .sort((a, b) => b.start - a.start);
-  let def = innerHtml;
-  for (const b of fillers) {
-    named[getAttr(b.attrs, 'slot')] = b.inner;
-    def = def.slice(0, b.start) + def.slice(b.end);
-  }
-  return { named, default: def };
-}
-
-function fillSlots(html, slots) {
-  return html.replace(
-    /<slot(\s[^>]*?)?>([\s\S]*?)<\/slot>/gi,
-    (_, attrs, fallback) => {
-      const name = attrs ? getAttr(attrs, 'name') : null;
-      if (name) return name in slots.named ? slots.named[name] : fallback;
-      return slots.default.trim() ? slots.default : fallback;
-    }
-  );
-}
-
-// <template if="key"> / <template unless="key"> — existence-based conditional
-// blocks. Iterates until stable so nested conditionals resolve.
-function applyConditionals(html, data) {
-  let prev;
-  do {
-    prev = html;
-    const blocks = findTemplateBlocks(html);
-    for (let i = blocks.length - 1; i >= 0; i--) {
-      const b = blocks[i];
-      const ifKey = getAttr(b.attrs, 'if');
-      const unlessKey = getAttr(b.attrs, 'unless');
-      if (ifKey !== null) {
-        html = html.slice(0, b.start) + (data[ifKey] ? b.inner : '') + html.slice(b.end);
-      } else if (unlessKey !== null) {
-        html = html.slice(0, b.start) + (!data[unlessKey] ? b.inner : '') + html.slice(b.end);
-      }
-    }
-  } while (html !== prev);
-  return html;
+// ─── CLI-only: filesystem URL resolver for asset rebasing ────────────
+// rebaseAssets / rebaseCss (shared, imported) call this resolver to turn a
+// partial-relative URL into a root-absolute path. The runtime resolves against
+// new URL(); the build resolves against the partial's source dir mapped onto
+// srcRoot. skipUrl values and anything outside the source tree pass through.
+function rebaseUrl(v, partialDir) {
+  if (skipUrl(v)) return v;
+  const m = v.match(/^([^?#]*)([?#].*)?$/);
+  const p = m[1], suffix = m[2] || '';
+  if (!p) return v;
+  const rel = path.relative(srcRoot, path.resolve(partialDir, p));
+  if (rel.startsWith('..')) return v;   // outside the source tree — leave as-is
+  return '/' + rel.split(path.sep).join('/') + suffix;
 }
 
 // ─── recursive expansion ─────────────────────────────────────────────
 function expand(html, baseDir, depth = 0) {
   if (depth > MAX_DEPTH) {
     console.warn('[templa] max include depth reached; possible recursion');
+    report('max include depth reached (possible recursive include)');
     return html;
   }
 
@@ -247,13 +225,19 @@ function expand(html, baseDir, depth = 0) {
       let content = '';
       if (fs.existsSync(partialPath)) {
         content = fs.readFileSync(partialPath, 'utf8');
+        if (hasUnclosed(content)) {
+          console.warn(`  [templa] warning: unclosed <template> in ${path.relative(process.cwd(), partialPath)} — missing </template>; the block is dropped.`);
+          report(`unclosed <template> in ${path.relative(process.cwd(), partialPath)}`);
+        }
         content = extractMergedStyles(content, partialPath);
+        content = rebaseAssets(content, v => rebaseUrl(v, path.dirname(partialPath)));
         content = applyConditionals(content, data);
         content = render(content, data);
         content = fillSlots(content, slots);
         content = expand(content, path.dirname(partialPath), depth + 1);
       } else {
         console.error('[templa] partial not found:', partialPath);
+        report(`partial not found: ${path.relative(process.cwd(), partialPath)}`);
       }
 
       html = html.slice(0, b.start) + content + html.slice(b.end);
@@ -275,7 +259,8 @@ function isPartial(name) {
   return name.startsWith('_');
 }
 
-function walk(srcDir, distDir) {
+function walk(srcDir, distDir, opts = {}) {
+  const { dryRun = false } = opts;
   const stats = { files: 0, partials: 0, copied: 0, stripped: 0 };
   const distAbs = path.resolve(distDir);
   const deferredTempla = [];
@@ -291,23 +276,40 @@ function walk(srcDir, distDir) {
 
       if (entry.isDirectory()) {
         if (isPartial(entry.name)) { stats.partials++; continue; }
-        fs.mkdirSync(outPath, { recursive: true });
+        if (!dryRun) fs.mkdirSync(outPath, { recursive: true });
         visit(inPath, outPath);
       } else if (entry.name.endsWith('.html')) {
         if (isPartial(entry.name)) { stats.partials++; continue; }
-        let html = expand(fs.readFileSync(inPath, 'utf8'), dir);
+        currentPage = path.relative(srcDir, inPath);
+        const rawHtml = fs.readFileSync(inPath, 'utf8');
+        if (hasUnclosed(rawHtml)) {
+          console.warn(`  [templa] warning: unclosed <template> in ${currentPage} — missing </template>; the block is dropped.`);
+          report('unclosed <template> (missing </template>)');
+        }
+        let html = expand(rawHtml, dir);
+        html = markCurrentNavLinks(html, '/' + currentPage.split(path.sep).join('/'));
         html = stripRuntimeScripts(html);
         if (HAS_TEMPLA_SCRIPT_REF.test(html)) anyHtmlKeptTempla = true;
-        fs.mkdirSync(path.dirname(outPath), { recursive: true });
-        fs.writeFileSync(outPath, html);
+        if (LEFTOVER_COND.test(html)) {
+          console.warn(`  [templa] warning: unresolved <template if/unless> in ${currentPage} — page-level conditionals have no data source and are not evaluated; move them inside a partial.`);
+          report('unresolved <template if/unless> (page-level conditional)');
+        }
+        const leftoverKeys = [...new Set([...html.matchAll(UNRESOLVED_KEY)].map(m => m[1]))];
+        if (leftoverKeys.length) report(`unresolved {{${leftoverKeys.join('}}, {{')}}}`);
+        if (!dryRun) {
+          fs.mkdirSync(path.dirname(outPath), { recursive: true });
+          fs.writeFileSync(outPath, html);
+        }
         stats.files++;
-        console.log(`  ${path.relative(srcDir, inPath)}`);
+        console.log(`  ${currentPage}`);
       } else if (TEMPLA_ASSET.test(entry.name)) {
         // Defer: copied below only if a built HTML still references it.
         deferredTempla.push({ src: inPath, dest: outPath });
       } else {
-        fs.mkdirSync(path.dirname(outPath), { recursive: true });
-        fs.copyFileSync(inPath, outPath);
+        if (!dryRun) {
+          fs.mkdirSync(path.dirname(outPath), { recursive: true });
+          fs.copyFileSync(inPath, outPath);
+        }
         stats.copied++;
       }
     }
@@ -317,49 +319,72 @@ function walk(srcDir, distDir) {
 
   if (anyHtmlKeptTempla) {
     for (const a of deferredTempla) {
-      fs.mkdirSync(path.dirname(a.dest), { recursive: true });
-      fs.copyFileSync(a.src, a.dest);
+      if (!dryRun) {
+        fs.mkdirSync(path.dirname(a.dest), { recursive: true });
+        fs.copyFileSync(a.src, a.dest);
+      }
       stats.copied++;
     }
   } else {
     stats.stripped = deferredTempla.length;
-    for (const a of deferredTempla) {
-      const d = path.dirname(a.dest);
-      if (fs.existsSync(d) && fs.readdirSync(d).length === 0) {
-        fs.rmdirSync(d);
+    if (!dryRun) {
+      for (const a of deferredTempla) {
+        const d = path.dirname(a.dest);
+        if (fs.existsSync(d) && fs.readdirSync(d).length === 0) {
+          fs.rmdirSync(d);
+        }
       }
     }
   }
   return stats;
 }
 
-function build(args) {
+function build(args, { dryRun = false } = {}) {
+  // `check` (dryRun) implies --strict: it exists to gate, not to build.
+  const strict = dryRun || args.includes('--strict');
+  const noFormat = dryRun || args.includes('--no-format');
   const inIdx = args.indexOf('-i');
   const outIdx = args.indexOf('-o');
   const SRC = path.resolve(process.cwd(), inIdx !== -1 ? args[inIdx + 1] : './src');
   const DIST = path.resolve(process.cwd(), outIdx !== -1 ? args[outIdx + 1] : './dist');
+  srcRoot = SRC;   // base for root-absolute asset rebasing inside partials
 
   if (!fs.existsSync(SRC)) {
     console.error(`Error: source directory not found: ${SRC}`);
     process.exit(1);
   }
 
-  if (fs.existsSync(DIST)) fs.rmSync(DIST, { recursive: true, force: true });
-  fs.mkdirSync(DIST, { recursive: true });
+  if (!dryRun) {
+    if (fs.existsSync(DIST)) fs.rmSync(DIST, { recursive: true, force: true });
+    fs.mkdirSync(DIST, { recursive: true });
+  }
 
-  console.log(`templa build`);
+  console.log(dryRun ? 'templa check' : 'templa build');
   console.log(`  src:  ${path.relative(process.cwd(), SRC) || '.'}`);
-  console.log(`  dist: ${path.relative(process.cwd(), DIST) || '.'}`);
+  if (!dryRun) console.log(`  dist: ${path.relative(process.cwd(), DIST) || '.'}`);
   console.log('');
 
   const t0 = Date.now();
-  const stats = walk(SRC, DIST);
-  flushMergedStyles(DIST);
+  const stats = walk(SRC, DIST, { dryRun });
+  if (dryRun) {
+    mergedTargets.clear();
+    mergedSeen.clear();
+  } else {
+    flushMergedStyles(DIST);
+  }
   const ms = Date.now() - t0;
 
   console.log('');
+  if (problems.length) {
+    console.error(`✗ ${problems.length} problem(s):`);
+    for (const p of problems) console.error(`  ${p}`);
+    if (strict) process.exit(1);
+    console.log('');
+  }
   const stripped = stats.stripped > 0 ? `, ${stats.stripped} stripped` : '';
-  console.log(`✓ ${stats.files} page(s), ${stats.copied} asset(s)${stripped}, ${stats.partials} partial(s) skipped — ${ms}ms`);
+  const suffix = dryRun ? ' — dry run, nothing written' : '';
+  console.log(`✓ ${stats.files} page(s), ${stats.copied} asset(s)${stripped}, ${stats.partials} partial(s) skipped — ${ms}ms${suffix}`);
+  if (noFormat) return;
   const distRel = path.relative(process.cwd(), DIST) || 'dist';
   console.log('');
   autoFormat(distRel);
@@ -400,6 +425,15 @@ function autoFormat(distRel) {
 // ─── init command ────────────────────────────────────────────────────
 const PKG_ROOT = path.resolve(__dirname, '..');
 
+// Claude Code auto-loads CLAUDE.md (not AGENTS.md), so init --ai writes a
+// pointer file; Cursor/Codex-style agents pick up AGENTS.md directly.
+const CLAUDE_MD = `# CLAUDE.md
+
+This project is a templa static site (https://github.com/yjmtmtk/templa-js).
+Read AGENTS.md before editing files. Section sub-agents read SECTION.md instead.
+Build: \`npx templa-js build\` — Verify: \`npx templa-js check\` (exit 0 = sound)
+`;
+
 function listScaffoldFiles() {
   const items = [];
   const examplesRoot = path.join(PKG_ROOT, 'examples');
@@ -444,10 +478,12 @@ function init(args) {
   if (withAi) {
     items.push({ src: path.join(PKG_ROOT, 'AGENTS.md'), dest: 'AGENTS.md' });
     items.push({ src: path.join(PKG_ROOT, 'PLANNER.md'), dest: 'PLANNER.md' });
+    items.push({ src: path.join(PKG_ROOT, 'SECTION.md'), dest: 'SECTION.md' });
+    items.push({ content: CLAUDE_MD, dest: 'CLAUDE.md' });
   }
 
   for (const { src } of items) {
-    if (!fs.existsSync(src)) {
+    if (src && !fs.existsSync(src)) {
       console.error(`Internal error: templa installation appears broken at ${src}`);
       process.exit(1);
     }
@@ -469,10 +505,11 @@ function init(args) {
     process.exit(1);
   }
 
-  for (const { src, dest } of items) {
+  for (const { src, content, dest } of items) {
     const destAbs = path.join(cwd, dest);
     fs.mkdirSync(path.dirname(destAbs), { recursive: true });
-    fs.copyFileSync(src, destAbs);
+    if (src) fs.copyFileSync(src, destAbs);
+    else fs.writeFileSync(destAbs, content);
     console.log(`  ${dest}`);
   }
 
@@ -490,15 +527,26 @@ function help() {
 templa v${VERSION} — tiny HTML template loader
 
 Usage:
-  templa build [-i <src>] [-o <dist>]
+  templa build [-i <src>] [-o <dist>] [--strict] [--no-format]
+  templa check [-i <src>]
   templa init [--ai] [--force]
 
 Build options:
   -i <dir>      Source directory (default: ./src)
   -o <dir>      Output directory (default: ./dist)
+  --strict      Exit 1 on any problem: missing partial, unresolved
+                {{key}} in output, page-level <template if/unless>,
+                unclosed <template>
+  --no-format   Skip the automatic prettier pass on the output
+
+Check:
+  Runs the build pipeline without writing anything; always strict.
+  Use as a machine-readable gate (exit 0 = sound, exit 1 = problems).
 
 Init options:
-  --ai          Also write AGENTS.md and PLANNER.md (AI agent guides)
+  --ai          Also write the AI agent guides: AGENTS.md (orchestrator),
+                PLANNER.md (skeleton planning), SECTION.md (sub-agent
+                brief), CLAUDE.md (pointer for Claude Code)
   --force       Overwrite existing files
 
   -v, --version Show version
@@ -518,6 +566,14 @@ Template syntax:
 Passing data:
   <template src="card.html" title="Tiny" body="Light, ~3KB."></template>
 
+Asset paths:
+  URLs in a partial are relative to the partial and rewritten to
+  root-absolute (src, <link>/<use> href, srcset, poster, and CSS
+  url() in <style>/style="" — so co-located <style data-merge> works).
+  <link href="../css/style.css"> in _partials/ becomes /css/style.css
+  from any page. <a href>, {{templated}} URLs, data-* and url(#id) are
+  left as-is — write those root-absolute.
+
 Build also strips the runtime bootstrap from output HTML:
   <script src="...templa.js"></script>          (removed)
   <script type="module">await templa.start();   (line removed)
@@ -539,6 +595,7 @@ Layouts (Web Components-style slots):
 const [, , cmd, ...rest] = process.argv;
 switch (cmd) {
   case 'build': build(rest); break;
+  case 'check': build(rest, { dryRun: true }); break;
   case 'init': init(rest); break;
   case '-v': case '--version': console.log(VERSION); break;
   case '-h': case '--help': case undefined: help(); break;

package/examples/_partials/common-head.html

@@ -1,4 +1,4 @@
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>{{title}}</title>
-<link rel="stylesheet" href="./css/style.css" />
+<link rel="stylesheet" href="../css/style.css" />

package/examples/_partials/common-header.html

@@ -1,15 +1,12 @@
 <style data-merge="css/style.css">
   header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; }
   header nav a { margin-left: var(--space-3); }
-  header[data-page="index"] a[data-page="index"],
-  header[data-page="about"] a[data-page="about"] {
-    font-weight: bold;
-  }
+  nav a[aria-current="page"] { font-weight: bold; }
 </style>
-<header data-page="{{page}}">
+<header>
   <strong>My templa site</strong>
   <nav>
-    <a href="./" data-page="index">Home</a>
-    <a href="./about.html" data-page="about">About</a>
+    <a href="/">Home</a>
+    <a href="/about.html">About</a>
   </nav>
 </header>

package/examples/_partials/common-layout.html

@@ -1,4 +1,4 @@
-<template src="common-header.html" page="{{page}}"></template>
+<template src="common-header.html"></template>
 <main>
   <slot></slot>
 </main>

package/examples/_partials/index-cta.html

@@ -4,5 +4,5 @@
 </style>
 <section class="index-cta">
   <p>Ready to start?</p>
-  <a href="./about.html">See the about page</a>
+  <a href="/about.html">See the about page</a>
 </section>

package/examples/about.html

@@ -4,7 +4,7 @@
   <template src="_partials/common-head.html" title="About"></template>
 </head>
 <body>
-  <template src="_partials/common-layout.html" page="about">
+  <template src="_partials/common-layout.html">
     <template src="_partials/common-subhero.html" title="About"></template>
     <template src="_partials/about-body.html"></template>
   </template>

package/examples/css/style.css

@@ -7,6 +7,7 @@
   --space-6: 3rem;
   --space-7: 4rem;
 }
+/* ── tokens end ── (sub-agents only need the :root block above) */
 body {
   font-family: system-ui, sans-serif;
   max-width: 720px;

package/examples/index.html

@@ -4,7 +4,7 @@
   <template src="_partials/common-head.html" title="Home"></template>
 </head>
 <body>
-  <template src="_partials/common-layout.html" page="index">
+  <template src="_partials/common-layout.html">
     <template src="_partials/index-hero.html"></template>
     <template src="_partials/index-features.html"></template>
     <template src="_partials/index-cta.html"></template>

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "templa-js",
-  "version": "0.10.0",
+  "version": "0.13.1",
   "description": "A tiny HTML template loader using <template src>. Read as tempura.",
   "main": "templa.js",
   "scripts": {
-    "test": "bash scripts/test-init.sh"
+    "test": "bash scripts/test-init.sh && bash scripts/test-build.sh && bash scripts/test-runtime.sh",
+    "prepublishOnly": "npm test"
+  },
+  "engines": {
+    "node": ">=14.14"
   },
   "bin": {
     "templa": "bin/templa.js"
@@ -16,6 +20,7 @@
     "README.md",
     "AGENTS.md",
     "PLANNER.md",
+    "SECTION.md",
     "LICENSE"
   ],
   "keywords": [