@zvndev/darkmown 0.17.0 → 0.19.0

package/src/runtime.js

@@ -246,9 +246,15 @@ function loopKeyOf(item, counts) {
  * @returns {void}
  */
 function fillItem(node, item, meta = {}) {
+  // Nested item-relative loops (data-wd-loop-item) own their descendants' binds;
+  // when present, `skip` excludes a node living inside one so the outer row's
+  // text/meta/each-if/class passes never overwrite an inner row's values.
+  const inners = node.querySelectorAll("[data-wd-loop-item]");
+  const skip = inners.length ? (/** @type {Element} */ el) => el.closest("[data-wd-loop-item]") : () => false;
   // querySelectorAll skips <template> content, so this sees only the outermost
   // regions; recursing into each injected branch fills the rest.
   for (const region of node.querySelectorAll("[data-wd-each-if]")) {
+    if (skip(region)) continue;
     const expr = region.getAttribute("data-wd-if-expr");
     const m = region.getAttribute("data-wd-meta");
     const value = expr ? evalPredicate(expr, item) : (m ? meta[m] : getPath(item, region.getAttribute("data-wd-path")));
@@ -262,13 +268,17 @@ function fillItem(node, item, meta = {}) {
     ? [node, ...node.querySelectorAll("[data-wd-each]")]
     : [...node.querySelectorAll("[data-wd-each]")];
   for (const target of targets) {
+    if (skip(target)) continue;
     target.textContent = getPath(item, target.getAttribute("data-wd-path")) ?? "";
   }
   for (const marker of node.querySelectorAll("[data-wd-each-meta]")) {
+    if (skip(marker)) continue;
     marker.textContent = meta[marker.getAttribute("data-wd-each-meta") || ""] ?? "";
   }
   const classNodes = node.matches("[data-wd-each-class]") ? [node, ...node.querySelectorAll("[data-wd-each-class]")] : [...node.querySelectorAll("[data-wd-each-class]")];
-  for (const el of classNodes) classToggle(el, el.getAttribute("data-wd-each-class"), item);
+  for (const el of classNodes) { if (!skip(el)) classToggle(el, el.getAttribute("data-wd-each-class"), item); }
+  // Reconcile nested loops last, against the now-settled outer row.
+  for (const region of inners) reconcile(region, getPath(item, region.getAttribute("data-wd-loop-item")));
 }
 
 /**
@@ -335,6 +345,75 @@ function renderIf(node) {
   for (const nested of output.querySelectorAll("[data-wd-if]")) renderIf(nested);
 }
 
+/**
+ * Reconcile one loop region (top-level or nested) from a resolved row source:
+ * filter (`where`) → pipeline (sort/reverse/offset/limit) → @empty → keyed
+ * reconcile. Each surviving row is `fillItem`-ed, which itself recurses into any
+ * nested item-relative loops. Shared by the global pass and `fillItem`.
+ * @param {Element} region
+ * @param {any} rows Source list (state-resolved globally; item-relative inside fillItem).
+ * @returns {void}
+ */
+function reconcile(region, rows) {
+  const template = /** @type {HTMLTemplateElement | null} */ (region.querySelector("template[data-wd-loop-template]"));
+  const out = region.querySelector("[data-wd-loop-out]");
+  if (!template || !out) return;
+  let list = Array.isArray(rows) ? rows.slice() : [];
+  const where = region.getAttribute("data-wd-loop-where");
+  if (where) {
+    const predicate = loopPredicate(where);
+    list = list.filter((/** @type {any} */ item) => {
+      try {
+        return predicate((/** @type {string | null} */ path) => getPath(item, path), (/** @type {string} */ k, /** @type {string} */ r) => getPath(state[k], r || ""), containsFn);
+      } catch (error) {
+        warn(where, error);
+        return false;
+      }
+    });
+  }
+  list = pipeline(list, region);
+
+  // Empty branch: clone the [data-wd-loop-empty] template into the output.
+  const emptyTpl = /** @type {HTMLTemplateElement | null} */ (region.querySelector("template[data-wd-loop-empty]"));
+  if (!list.length && emptyTpl) {
+    if (out.getAttribute("data-wd-empty") !== "1") {
+      out.textContent = "";
+      for (const child of [...emptyTpl.content.children]) out.appendChild(child.cloneNode(true));
+      out.setAttribute("data-wd-empty", "1");
+    }
+    return;
+  }
+  if (out.getAttribute("data-wd-empty") === "1") { out.textContent = ""; out.removeAttribute("data-wd-empty"); }
+
+  /** @type {Map<string, WdRow>} */
+  const existing = new Map();
+  for (const child of [...out.children]) {
+    existing.set(child.getAttribute("data-wd-loop-key") || "", /** @type {WdRow} */ (child));
+  }
+  /** @type {Map<string, number>} */
+  const counts = new Map();
+  /** @type {Set<string>} */
+  const used = new Set();
+  const count = list.length;
+  for (let i = 0; i < count; i++) {
+    const item = list[i];
+    const key = loopKeyOf(item, counts);
+    let node = existing.get(key);
+    if (!node || used.has(key)) {
+      node = /** @type {WdRow} */ (template.content.firstElementChild?.cloneNode(true));
+      if (!node) continue;
+      node.setAttribute("data-wd-loop-key", key);
+    }
+    used.add(key);
+    fillItem(node, item, { index: i, number: i + 1, first: i === 0, last: i === count - 1, count });
+    node.__wdItem = item; /** let per-row actions resolve which row was clicked */
+    out.appendChild(node);
+  }
+  for (const [key, node] of existing) {
+    if (!used.has(key)) node.remove();
+  }
+}
+
 /**
  * Synchronously render the whole document from current `state`:
  * computed → if-regions → keyed loop reconcile → text/input binds.
@@ -348,69 +427,14 @@ function renderNow() {
   // bindings (data-wd-each-class) are handled per item inside fillItem.
   for (const el of document.querySelectorAll("[data-wd-class]")) classToggle(el, el.getAttribute("data-wd-class"), undefined);
 
+  // Nested item-relative loops use data-wd-loop-item, so this top-level query
+  // skips them; fillItem reconciles those against their enclosing row.
   for (const region of document.querySelectorAll("[data-wd-loop]")) {
     const key = region.getAttribute("data-wd-loop");
     const data = region.getAttribute("data-wd-loop-data");
     /** Source may be a dotted path (e.g. team.members) read off state via getPath. */
     const dot = key ? key.indexOf(".") : -1;
-    const rows = key ? (dot < 0 ? state[key] : getPath(state[key.slice(0, dot)], key.slice(dot + 1))) : (data ? JSON.parse(data) : []);
-    const template = /** @type {HTMLTemplateElement | null} */ (region.querySelector("template[data-wd-loop-template]"));
-    const out = region.querySelector("[data-wd-loop-out]");
-    if (!template || !out) continue;
-    let list = Array.isArray(rows) ? rows.slice() : [];
-    const where = region.getAttribute("data-wd-loop-where");
-    if (where) {
-      const predicate = loopPredicate(where);
-      list = list.filter((/** @type {any} */ item) => {
-        try {
-          return predicate((/** @type {string | null} */ path) => getPath(item, path), (/** @type {string} */ k, /** @type {string} */ r) => getPath(state[k], r || ""), containsFn);
-        } catch (error) {
-          warn(where, error);
-          return false;
-        }
-      });
-    }
-    list = pipeline(list, region);
-
-    // Empty branch: clone the [data-wd-loop-empty] template into the output.
-    const emptyTpl = /** @type {HTMLTemplateElement | null} */ (region.querySelector("template[data-wd-loop-empty]"));
-    if (!list.length && emptyTpl) {
-      if (out.getAttribute("data-wd-empty") !== "1") {
-        out.textContent = "";
-        for (const child of [...emptyTpl.content.children]) out.appendChild(child.cloneNode(true));
-        out.setAttribute("data-wd-empty", "1");
-      }
-      continue;
-    }
-    if (out.getAttribute("data-wd-empty") === "1") { out.textContent = ""; out.removeAttribute("data-wd-empty"); }
-
-    /** @type {Map<string, WdRow>} */
-    const existing = new Map();
-    for (const child of [...out.children]) {
-      existing.set(child.getAttribute("data-wd-loop-key") || "", /** @type {WdRow} */ (child));
-    }
-    /** @type {Map<string, number>} */
-    const counts = new Map();
-    /** @type {Set<string>} */
-    const used = new Set();
-    const count = list.length;
-    for (let i = 0; i < count; i++) {
-      const item = list[i];
-      const key = loopKeyOf(item, counts);
-      let node = existing.get(key);
-      if (!node || used.has(key)) {
-        node = /** @type {WdRow} */ (template.content.firstElementChild?.cloneNode(true));
-        if (!node) continue;
-        node.setAttribute("data-wd-loop-key", key);
-      }
-      used.add(key);
-      fillItem(node, item, { index: i, number: i + 1, first: i === 0, last: i === count - 1, count });
-      node.__wdItem = item; /** let per-row actions resolve which row was clicked */
-      out.appendChild(node);
-    }
-    for (const [key, node] of existing) {
-      if (!used.has(key)) node.remove();
-    }
+    reconcile(region, key ? (dot < 0 ? state[key] : getPath(state[key.slice(0, dot)], key.slice(dot + 1))) : (data ? JSON.parse(data) : []));
   }
 
   for (const node of document.querySelectorAll("[data-wd-bind]")) {

package/src/skin.js

@@ -53,7 +53,16 @@ export function compileSkin(source) {
   /** @type {number | null} */
   let tokenIndent = null;
   /** @type {string[]} */
+  let tokenVars = [];
+  /** @type {string[]} */
   const rootVars = [];
+  /** @type {string[]} */
+  const darkVars = [];
+  // Manual-toggle variants: `tokens [data-theme=dark]` collects custom
+  // properties under an attribute-scoped `:root` so a `:store theme` toggle can
+  // flip them with no JS beyond writing the attribute.
+  /** @type {Map<string, string[]>} */
+  const attrVars = new Map();
 
   for (let i = 0; i < lines.length; i++) {
     const { indent, text } = lines[i];
@@ -61,14 +70,41 @@ export function compileSkin(source) {
     // the next line is indented deeper. Everything else is a declaration.
     const opensBlock = i + 1 < lines.length && lines[i + 1].indent > indent;
 
-    if (text === "tokens" && opensBlock) {
+    // `tokens` opens a design-token block emitting `:root { --name: value }`.
+    // An optional modifier picks a variant: `tokens dark` collects into a
+    // `prefers-color-scheme: dark` override (OS-driven), while a bracketed
+    // `tokens [data-theme=dark]` scopes the override to a `:root` attribute for
+    // manual toggling. Both reuse the same `--name` properties.
+    // Capture the whole modifier (`.+`, not `\S+`) so a malformed bracketed
+    // modifier with internal spaces (`[data-theme=dark extra]`) is still routed
+    // to normalizeAttr's null fail-safe rather than slipping through as a bogus
+    // `tokens …` selector.
+    const tokenMatch = /^tokens(?:\s+(.+))?$/.exec(text);
+    if (tokenMatch && opensBlock) {
       tokenIndent = indent;
+      const modifier = tokenMatch[1];
+      if (!modifier) {
+        tokenVars = rootVars;
+      } else if (modifier === "dark") {
+        tokenVars = darkVars;
+      } else if (modifier.startsWith("[") && modifier.endsWith("]")) {
+        const attr = normalizeAttr(modifier);
+        if (attr) {
+          const selector = `:root${attr}`;
+          tokenVars = attrVars.get(selector) ?? [];
+          attrVars.set(selector, tokenVars);
+        } else {
+          tokenVars = rootVars; // malformed `[…]` modifier → fall back to default :root tokens
+        }
+      } else {
+        tokenVars = rootVars;
+      }
       continue;
     }
 
     if (tokenIndent !== null && indent > tokenIndent) {
       const [name, ...rest] = text.split(/\s+/);
-      rootVars.push(`  --${name}: ${rest.join(" ")};`);
+      tokenVars.push(`  --${name}: ${rest.join(" ")};`);
       continue;
     }
 
@@ -96,10 +132,32 @@ export function compileSkin(source) {
     css.push(media ? `${media} { ${rule} }` : rule);
   }
 
+  // Prepend tokens ahead of selector rules. `unshift` reverses insertion order,
+  // so push the overrides first to land them after the `:root` defaults.
+  for (const [selector, vars] of attrVars) {
+    if (vars.length) css.unshift(`${selector} {\n${vars.join("\n")}\n}`);
+  }
+  if (darkVars.length) {
+    css.unshift(`@media (prefers-color-scheme: dark) {\n:root {\n${darkVars.join("\n")}\n}\n}`);
+  }
   if (rootVars.length) css.unshift(`:root {\n${rootVars.join("\n")}\n}`);
   return css.join("\n");
 }
 
+/**
+ * Normalize a bracketed token modifier into a valid attribute selector,
+ * quoting the value so `[data-theme=dark]` becomes `[data-theme="dark"]`.
+ * Returns null for a malformed modifier (`[]`, `[a=b c]`, injection-shaped
+ * input) so the caller can fall back to default `:root` tokens instead of
+ * emitting a junk selector.
+ * @param {string} bracketed
+ * @returns {string | null}
+ */
+function normalizeAttr(bracketed) {
+  const m = bracketed.match(/^\[\s*([^\]=\s]+)\s*=\s*"?([^\]"]*)"?\s*\]$/);
+  return m ? `[${m[1]}="${m[2]}"]` : null;
+}
+
 /**
  * Combine a selector with its parent (handles `&` nesting and comma lists).
  * @param {string} text

package/src/statics.js

@@ -1,6 +1,19 @@
 import fs from "node:fs";
 import http from "node:http";
 import path from "node:path";
+import { BASE_SECURITY_HEADERS, REACTIVE_CSP } from "./headers.js";
+
+/**
+ * Security headers for an HTML response from the local server. The relaxed
+ * (reactive) CSP is a superset that satisfies both static and reactive pages,
+ * so the runtime server uses it for every HTML response; the build-time
+ * outputs (`vercel.json`, `dist/_headers`) tighten static routes per-path.
+ * @type {Record<string, string>}
+ */
+const HTML_SECURITY_HEADERS = {
+  ...BASE_SECURITY_HEADERS,
+  "Content-Security-Policy": REACTIVE_CSP
+};
 
 /**
  * Serve a built file for a request URL out of `distRoot`, or a 404 page.
@@ -12,7 +25,7 @@ import path from "node:path";
 export function serve(distRoot, url, res) {
   const file = resolvePublicFile(distRoot, url || "/");
   if (!file || !fs.existsSync(file)) {
-    res.writeHead(404, { "content-type": "text/html; charset=utf-8" });
+    res.writeHead(404, { "content-type": "text/html; charset=utf-8", ...HTML_SECURITY_HEADERS });
     const notFound = path.join(distRoot, "404.html");
     if (fs.existsSync(notFound)) {
       res.end(fs.readFileSync(notFound));
@@ -21,7 +34,11 @@ export function serve(distRoot, url, res) {
     res.end("<h1>Not found</h1><p>This route is hidden or has not been created.</p>");
     return;
   }
-  res.writeHead(200, { "content-type": contentType(file) });
+  const type = contentType(file);
+  const headers = type.startsWith("text/html")
+    ? { "content-type": type, ...HTML_SECURITY_HEADERS }
+    : { "content-type": type };
+  res.writeHead(200, headers);
   fs.createReadStream(file).pipe(res);
 }