@zvndev/darkmown 0.20.0 → 1.0.0

package/src/compiler/format.js

@@ -0,0 +1,244 @@
+// ---------------------------------------------------------------------------
+// Format pipes — the value layer. `{ value | name:arg:arg | name2 }` runs a
+// resolved value through a whitelist of formatters; `{ list | sum:"price" }`
+// aggregates a list. The same formatter math is mirrored, compactly, in
+// src/runtime.js for the reactive path — tests/format.test.js + the compile↔
+// runtime parity test guard against drift. Nothing here is eval'd: pipe stages
+// are a fixed, compile-time-validated registry, exactly like the predicate and
+// action grammars.
+//
+// Folds at build time when the piped value is static (zero-JS); a value that
+// reads :state/:store emits `data-wd-fmt` and re-formats in the runtime.
+// ---------------------------------------------------------------------------
+
+/**
+ * @typedef {import("./context.js").Ctx} Ctx
+ * @typedef {{ name: string, args: Array<string | number | boolean | null> }} Stage
+ */
+
+// --- shared math (kept tiny and mirrored in the runtime) -------------------
+
+/** @param {unknown} v @returns {number} */
+const toNum = (v) => {
+  const n = typeof v === "number" ? v : Number.parseFloat(String(v));
+  return Number.isFinite(n) ? n : 0;
+};
+/** @param {unknown} v @returns {any[]} */
+const toList = (v) => (Array.isArray(v) ? v : v == null ? [] : [v]);
+/** Read one shallow field off a row, or the row itself when no field is given. */
+const pick = (/** @type {any} */ row, /** @type {string} */ f) =>
+  f != null && f !== "" ? (row == null ? undefined : row[f]) : row;
+/** @param {any[]} list @param {string} f @returns {number[]} */
+const nums = (list, f) => list.map((row) => toNum(pick(row, f)));
+
+/**
+ * Coerce ISO strings, epoch milliseconds (number or numeric string), or a Date
+ * into a Date. Returns an invalid Date for unparseable input (formatters guard).
+ * @param {unknown} v
+ * @returns {Date}
+ */
+function toDate(v) {
+  if (v instanceof Date) return v;
+  if (typeof v === "number") return new Date(v);
+  const s = String(v).trim();
+  return /^-?\d+$/.test(s) ? new Date(Number(s)) : new Date(s);
+}
+
+/** @param {Date} d @param {Intl.DateTimeFormatOptions} opts @param {string} fallback */
+const fmtDate = (d, opts, fallback) =>
+  Number.isNaN(d.getTime()) ? String(fallback) : new Intl.DateTimeFormat(undefined, opts).format(d);
+
+// --- aggregates (shared by pipes and `:computed`) --------------------------
+
+/** @type {Record<string, (list: any[], field?: string) => number>} */
+export const AGGREGATES = {
+  sum: (list, f) => nums(list, f || "").reduce((a, n) => a + n, 0),
+  avg: (list, f) => (list.length ? AGGREGATES.sum(list, f) / list.length : 0),
+  min: (list, f) => (list.length ? Math.min(...nums(list, f || "")) : 0),
+  max: (list, f) => (list.length ? Math.max(...nums(list, f || "")) : 0),
+  count: (list) => list.length
+};
+
+// --- the formatter registry ------------------------------------------------
+
+/**
+ * The whitelist. Each formatter is a pure function of (value, args) — no clock,
+ * no DOM, no globals beyond `Intl` — so a static value folds deterministically at
+ * build time and a reactive value formats identically in the browser.
+ * @type {Record<string, (value: any, args: any[]) => string | number>}
+ */
+export const FORMATTERS = {
+  // numbers / money
+  money: (v, [currency = "USD", locale]) =>
+    new Intl.NumberFormat(locale || undefined, {
+      style: "currency",
+      currency: String(currency || "USD")
+    }).format(toNum(v)),
+  number: (v, [dec]) =>
+    new Intl.NumberFormat(
+      undefined,
+      dec == null ? {} : { minimumFractionDigits: +dec, maximumFractionDigits: +dec }
+    ).format(toNum(v)),
+  percent: (v, [dec = 0]) =>
+    new Intl.NumberFormat(undefined, {
+      style: "percent",
+      minimumFractionDigits: +dec,
+      maximumFractionDigits: +dec
+    }).format(toNum(v)),
+  round: (v, [dec = 0]) => {
+    const p = 10 ** +dec;
+    return Math.round(toNum(v) * p) / p;
+  },
+  // dates (format a given instant — pure, no "now")
+  date: (v, [style = "medium"]) => fmtDate(toDate(v), { dateStyle: /** @type {any} */ (style) }, v),
+  time: (v, [style = "short"]) => fmtDate(toDate(v), { timeStyle: /** @type {any} */ (style) }, v),
+  datetime: (v, [ds = "medium", ts = "short"]) =>
+    fmtDate(
+      toDate(v),
+      { dateStyle: /** @type {any} */ (ds), timeStyle: /** @type {any} */ (ts) },
+      v
+    ),
+  // text
+  upper: (v) => String(v ?? "").toUpperCase(),
+  lower: (v) => String(v ?? "").toLowerCase(),
+  capitalize: (v) => {
+    const s = String(v ?? "");
+    return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
+  },
+  truncate: (v, [length = 50, suffix = "…"]) => {
+    const s = String(v ?? "");
+    return s.length > +length ? s.slice(0, +length).trimEnd() + String(suffix) : s;
+  },
+  trim: (v) => String(v ?? "").trim(),
+  pluralize: (v, [singular = "", plural]) => {
+    const n = toNum(v);
+    const word =
+      Math.abs(n) === 1 ? String(singular) : plural != null ? String(plural) : `${singular}s`;
+    return `${new Intl.NumberFormat().format(n)} ${word}`;
+  },
+  default: (v, [fallback = ""]) => {
+    const empty = v == null || v === "" || (Array.isArray(v) && v.length === 0);
+    return empty ? String(fallback) : v;
+  },
+  // aggregates (operate on a list)
+  sum: (v, [f]) => AGGREGATES.sum(toList(v), f),
+  avg: (v, [f]) => AGGREGATES.avg(toList(v), f),
+  min: (v, [f]) => AGGREGATES.min(toList(v), f),
+  max: (v, [f]) => AGGREGATES.max(toList(v), f),
+  count: (v) => AGGREGATES.count(toList(v)),
+  join: (v, [sep = ", ", f]) =>
+    toList(v)
+      .map((row) => pick(row, /** @type {string} */ (f)))
+      .join(String(sep))
+};
+
+/** Formatter names, for error messages and the runtime mirror check. */
+export const FORMATTER_NAMES = Object.keys(FORMATTERS);
+
+// --- parsing ---------------------------------------------------------------
+
+/**
+ * Split a string on a separator that is not inside a quoted run. Keeps pipe
+ * arguments like `"a | b"` or `":"` intact.
+ * @param {string} s
+ * @param {string} sep single character
+ * @returns {string[]}
+ */
+function splitTop(s, sep) {
+  /** @type {string[]} */
+  const out = [];
+  let cur = "";
+  let quote = "";
+  for (const c of s) {
+    if (quote) {
+      cur += c;
+      if (c === quote) quote = "";
+    } else if (c === '"' || c === "'") {
+      quote = c;
+      cur += c;
+    } else if (c === sep) {
+      out.push(cur);
+      cur = "";
+    } else cur += c;
+  }
+  out.push(cur);
+  return out;
+}
+
+/** @param {string} t @returns {string | number | boolean | null} */
+function parseArg(t) {
+  const v = t.trim();
+  if (/^"[^"]*"$/.test(v) || /^'[^']*'$/.test(v)) return v.slice(1, -1);
+  if (/^-?\d+(?:\.\d+)?$/.test(v)) return Number(v);
+  if (v === "true") return true;
+  if (v === "false") return false;
+  if (v === "null") return null;
+  return v;
+}
+
+/**
+ * Parse the inside of a `{ … }` binding into its path and an ordered list of
+ * pipe stages. `{ price | money }` → `{ path: "price", stages: [{name:"money",args:[]}] }`.
+ * Stage validation (unknown formatter) happens in {@link validatePipes}.
+ * @param {string} inner
+ * @returns {{ path: string, stages: Stage[] }}
+ */
+export function parsePipes(inner) {
+  const segs = splitTop(inner, "|");
+  const path = segs[0].trim();
+  /** @type {Stage[]} */
+  const stages = [];
+  for (let i = 1; i < segs.length; i++) {
+    const raw = segs[i].trim();
+    const m = /^([A-Za-z][A-Za-z0-9_]*)\s*(?::([\s\S]*))?$/.exec(raw);
+    if (!m) return { path, stages: [{ name: raw, args: [] }] }; // malformed → flagged by validate
+    stages.push({ name: m[1], args: m[2] == null ? [] : splitTop(m[2], ":").map(parseArg) });
+  }
+  return { path, stages };
+}
+
+/**
+ * Compile-time validation: every stage must name a known formatter. Throws a
+ * corrective compile error otherwise. Returns the parsed `{ path, stages }`.
+ * @param {string} inner
+ * @param {Ctx} ctx
+ * @returns {{ path: string, stages: Stage[] }}
+ */
+export function validatePipes(inner, ctx) {
+  const parsed = parsePipes(inner);
+  for (const stage of parsed.stages) {
+    if (!Object.hasOwn(FORMATTERS, stage.name)) {
+      throw new Error(
+        `Unknown formatter "${stage.name}" in { ${inner} } (${ctx.file}). Available: ${FORMATTER_NAMES.join(", ")}.`
+      );
+    }
+  }
+  return parsed;
+}
+
+/**
+ * Run a resolved value through a pipe chain at build time. Returns the final
+ * value (a string or number); the caller stringifies for output. Mirrors the
+ * runtime's `applyFmt`.
+ * @param {any} value
+ * @param {Stage[]} stages
+ * @returns {any}
+ */
+export function applyPipeline(value, stages) {
+  let out = value;
+  for (const stage of stages) out = FORMATTERS[stage.name](out, stage.args);
+  return out;
+}
+
+/** Serialize stages to the compact `[[name,[args]]]` form carried in data-wd-fmt. */
+export const fmtAttr = (/** @type {Stage[]} */ stages) =>
+  JSON.stringify(stages.map((s) => [s.name, s.args]));
+
+/**
+ * Parse a `data-wd-fmt` JSON payload (already HTML-decoded) back into stages.
+ * Mirrors the runtime's own parse so the initial paint and the live update agree.
+ * @param {string} json
+ * @returns {Stage[]}
+ */
+export const stagesFromAttr = (json) =>
+  /** @type {[string, any[]][]} */ (JSON.parse(json)).map(([name, args]) => ({ name, args }));

package/src/compiler/interpolation.js

@@ -119,10 +119,15 @@ export function safeScriptJson(value) {
 }
 
 /**
+ * Parse a single-line `:state`/`:store`/`:theme` value: quoted string, boolean,
+ * null, number, or JSON literal — falling back to the bare string. A value that
+ * opens a JSON array/object but won't parse throws (almost always a multi-line
+ * literal, which these single-line directives can't express).
  * @param {string} raw
+ * @param {string} [where] `file:line` for the error message.
  * @returns {unknown}
  */
-export function parseStateValue(raw) {
+export function parseStateValue(raw, where) {
   const value = raw.trim();
   if (/^["'].*["']$/.test(value)) return stripQuotes(value);
   if (value === "true") return true;
@@ -132,6 +137,18 @@ export function parseStateValue(raw) {
   try {
     return JSON.parse(value);
   } catch {
+    // A value that opens a JSON array/object but won't parse is almost always a
+    // multi-line literal — :state/:store/:theme take a single-line value, so the
+    // unterminated "[" used to get stored verbatim as the string "[" and silently
+    // break the page. Fail loudly with the fix instead. Quote it to keep literal
+    // brackets (e.g. `= "[draft]"`).
+    if (/^[[{]/.test(value))
+      throw new Error(
+        `Invalid value ${value}${where ? ` in ${where}` : ""}: this looks like the start of a ` +
+          `multi-line array/object, but :state/:store values must fit on one line. ` +
+          `Put the whole literal on one line, or quote it for literal text. ` +
+          `Use: name = [{"id":1,"label":"…"}]`
+      );
     return value;
   }
 }
@@ -187,3 +204,20 @@ export function escapeHtml(value) {
     .replaceAll('"', """)
     .replaceAll("'", "'");
 }
+
+/**
+ * Reverse {@link escapeHtml}. Used by the loop initial-paint fill to read a
+ * `data-wd-fmt` attribute (HTML-escaped JSON) back into pipe stages at build
+ * time — the browser does the same decode for the runtime via getAttribute.
+ * `&amp;` is decoded last so `&amp;lt;` round-trips to `&lt;`, not `<`.
+ * @param {string} value
+ * @returns {string}
+ */
+export function unescapeHtml(value) {
+  return String(value)
+    .replaceAll("&lt;", "<")
+    .replaceAll("&gt;", ">")
+    .replaceAll("&quot;", '"')
+    .replaceAll("&#39;", "'")
+    .replaceAll("&amp;", "&");
+}

package/src/compiler/loops.js

@@ -9,8 +9,16 @@
 import fs from "node:fs";
 import { compileBody } from "./body.js";
 import { createScope } from "./context.js";
+import { applyPipeline, stagesFromAttr } from "./format.js";
 import { resolveInclude } from "./includes.js";
-import { escapeHtml, getPath, lookupPath, resolveStateKey, stripQuotes } from "./interpolation.js";
+import {
+  escapeHtml,
+  getPath,
+  lookupPath,
+  resolveStateKey,
+  stripQuotes,
+  unescapeHtml
+} from "./interpolation.js";
 import { compilePredicate, evalPredicate } from "./predicates.js";
 
 /**
@@ -29,7 +37,7 @@ const LOOP_USAGE = "Use: @loop src into item [where …] [sort by …] [reverse]
  * @param {string} tail Everything after `@loop src into item`.
  * @param {string} itemName
  * @param {Ctx} ctx
- * @returns {{ where: string|null, sort: {key:string,dir:string}|null, reverse: boolean, offset: NumArg|null, limit: NumArg|null, refsState: boolean }}
+ * @returns {{ where: string|null, sort: import("./context.js").LoopOpts["sort"], reverse: boolean, offset: NumArg|null, limit: NumArg|null, refsState: boolean }}
  */
 function parseLoopClauses(tail, itemName, ctx) {
   // Peel clauses off the END in reverse fixed-order (limit, offset, reverse,
@@ -38,7 +46,7 @@ function parseLoopClauses(tail, itemName, ctx) {
   // remains must be `where …` (or empty); a clause keyword surviving in the
   // remainder means the author wrote the clauses out of order.
   let s = tail.trim();
-  /** @type {{key:string,dir:string}|null} */ let sort = null;
+  /** @type {import("./context.js").LoopOpts["sort"]} */ let sort = null;
   let reverse = false;
   /** @type {NumArg|null} */ let offset = null;
   /** @type {NumArg|null} */ let limit = null;
@@ -68,18 +76,14 @@ function parseLoopClauses(tail, itemName, ctx) {
     s = s.slice(0, s.length - m[0].length + m[1].length).trim();
   }
 
-  m = s.match(/(^|\s)sort\s+by\s+([A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*)(?:\s+(asc|desc))?$/);
+  // The field and direction may each be a literal (`post.date` / `asc|desc`) or a
+  // `{ state }` reference, which makes the sort reactive (clickable-header tables).
+  m = s.match(
+    /(^|\s)sort\s+by\s+(\{\s*[A-Za-z_$][\w$]*\s*\}|[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*)(?:\s+(\{\s*[A-Za-z_$][\w$]*\s*\}|asc|desc))?$/
+  );
   if (m) {
-    const segs = m[2].split(".");
-    if (segs[0] !== itemName)
-      throw new Error(
-        `@loop sort key "${m[2]}" must start with the loop item "${itemName}" in ${ctx.file}. ${LOOP_USAGE}`
-      );
-    const rest = segs.slice(1);
-    if (rest.some((seg) => ["constructor", "prototype", "__proto__"].includes(seg))) {
-      throw new Error(`Sort key "${m[2]}" is not allowed in @loop (${ctx.file})`);
-    }
-    sort = { key: rest.join("."), dir: m[3] || "asc" };
+    sort = parseSortClause(m[2], m[3], itemName, ctx);
+    if (sort.keyKind === "key" || sort.dirKind === "key") refsState = true;
     s = s.slice(0, s.length - m[0].length + m[1].length).trim();
   }
 
@@ -95,6 +99,63 @@ function parseLoopClauses(tail, itemName, ctx) {
   return { where, sort, reverse, offset, limit, refsState };
 }
 
+/**
+ * Parse the `sort by` field + optional direction. Each is a literal (an
+ * item-relative field path / `asc|desc`) or a `{ state }` reference; a reference
+ * resolves to a declared `:state`/`:store` key and makes the sort reactive.
+ * @param {string} fieldTok
+ * @param {string | undefined} dirTok
+ * @param {string} itemName
+ * @param {Ctx} ctx
+ * @returns {{ key: string, keyKind: "literal" | "key", dir: string, dirKind: "literal" | "key" }}
+ */
+function parseSortClause(fieldTok, dirTok, itemName, ctx) {
+  /** @param {string} tok */
+  const stateRef = (tok) => tok.match(/^\{\s*([A-Za-z_$][\w$]*)\s*\}$/);
+
+  /** @type {string} */ let key;
+  /** @type {"literal" | "key"} */ let keyKind;
+  const fieldState = stateRef(fieldTok);
+  if (fieldState) {
+    const resolved = resolveStateKey(fieldState[1], ctx);
+    if (!resolved)
+      throw new Error(
+        `@loop sort by { ${fieldState[1]} } references unknown :state/:store in ${ctx.file}. ${LOOP_USAGE}`
+      );
+    key = resolved;
+    keyKind = "key";
+  } else {
+    const segs = fieldTok.split(".");
+    if (segs[0] !== itemName)
+      throw new Error(
+        `@loop sort key "${fieldTok}" must start with the loop item "${itemName}" in ${ctx.file}. ${LOOP_USAGE}`
+      );
+    const rest = segs.slice(1);
+    if (rest.some((seg) => ["constructor", "prototype", "__proto__"].includes(seg)))
+      throw new Error(`Sort key "${fieldTok}" is not allowed in @loop (${ctx.file})`);
+    key = rest.join(".");
+    keyKind = "literal";
+  }
+
+  /** @type {string} */ let dir = "asc";
+  /** @type {"literal" | "key"} */ let dirKind = "literal";
+  if (dirTok) {
+    const dirState = stateRef(dirTok);
+    if (dirState) {
+      const resolved = resolveStateKey(dirState[1], ctx);
+      if (!resolved)
+        throw new Error(
+          `@loop sort direction { ${dirState[1]} } references unknown :state/:store in ${ctx.file}. ${LOOP_USAGE}`
+        );
+      dir = resolved;
+      dirKind = "key";
+    } else {
+      dir = dirTok;
+    }
+  }
+  return { key, keyKind, dir, dirKind };
+}
+
 /**
  * @param {string} tok
  * @param {Ctx} ctx
@@ -406,7 +467,7 @@ function loopClauseAttrs(c) {
   return (
     (c.where ? ` data-wd-loop-where="${escapeHtml(c.where.body)}"` : "") +
     (c.sort
-      ? ` data-wd-loop-sort="${escapeHtml(c.sort.key)}" data-wd-loop-sort-dir="${c.sort.dir}"`
+      ? ` data-wd-loop-sort="${escapeHtml(c.sort.keyKind === "key" ? `key:${c.sort.key}` : c.sort.key)}" data-wd-loop-sort-dir="${escapeHtml(c.sort.dirKind === "key" ? `key:${c.sort.dir}` : c.sort.dir)}"`
       : "") +
     (c.reverse ? ` data-wd-loop-reverse` : "") +
     (c.offset ? ` data-wd-loop-offset="${numArgAttr(c.offset)}"` : "") +
@@ -520,10 +581,15 @@ function fillTemplateString(template, item, meta = {}) {
  * @returns {string}
  */
 function fillEachMeta(str, meta) {
-  return str.replace(/<span data-wd-each-meta="([a-z]+)"><\/span>/g, (_, name) => {
-    const value = name in meta ? meta[name] : "";
-    return `<span data-wd-each-meta="${name}">${escapeHtml(value ?? "")}</span>`;
-  });
+  return str.replace(
+    /<span data-wd-each-meta="([a-z]+)"(?: data-wd-fmt="([^"]*)")?><\/span>/g,
+    (_, name, fmt) => {
+      let value = name in meta ? meta[name] : "";
+      if (fmt) value = applyPipeline(value, stagesFromAttr(unescapeHtml(fmt)));
+      const fmtAttr = fmt ? ` data-wd-fmt="${fmt}"` : "";
+      return `<span data-wd-each-meta="${name}"${fmtAttr}>${escapeHtml(value ?? "")}</span>`;
+    }
+  );
 }
 
 // Walk the string resolving only the OUTERMOST data-wd-each-if regions; each
@@ -580,11 +646,16 @@ function fillOneEachIf(region, item, meta) {
  * @returns {string}
  */
 function fillEachText(str, item) {
-  return str.replace(/<span data-wd-each(?: data-wd-path="([^"]*)")?><\/span>/g, (_, p) => {
-    const value = p ? getPath(item, p.split(".")) : item;
-    const pathAttr = p ? ` data-wd-path="${p}"` : "";
-    return `<span data-wd-each${pathAttr}>${escapeHtml(value ?? "")}</span>`;
-  });
+  return str.replace(
+    /<span data-wd-each(?: data-wd-path="([^"]*)")?(?: data-wd-fmt="([^"]*)")?><\/span>/g,
+    (_, p, fmt) => {
+      let value = p ? getPath(item, p.split(".")) : item;
+      if (fmt) value = applyPipeline(value, stagesFromAttr(unescapeHtml(fmt)));
+      const pathAttr = p ? ` data-wd-path="${p}"` : "";
+      const fmtAttr = fmt ? ` data-wd-fmt="${fmt}"` : "";
+      return `<span data-wd-each${pathAttr}${fmtAttr}>${escapeHtml(value ?? "")}</span>`;
+    }
+  );
 }
 
 // Return the index just past the balanced close of the element of `tag` that

package/src/compiler/markdown.js

@@ -7,6 +7,7 @@
 
 import MarkdownIt from "markdown-it";
 import { LOOP_META } from "./context.js";
+import { applyPipeline, fmtAttr, validatePipes } from "./format.js";
 import {
   escapeHtml,
   getPath,
@@ -107,12 +108,15 @@ function resolveBindingRaw(expr, ctx) {
 function bindingPlugin(mdInstance) {
   mdInstance.inline.ruler.push("wd_binding", (state, silent) => {
     if (state.src.charCodeAt(state.pos) !== 0x7b /* { */) return false;
-    const match = /^\{\s*([A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*)\s*\}/.exec(
+    // Capture the path plus an optional `| formatter:arg | …` pipe chain. Pipe
+    // arguments may not contain `}` (they may be quoted), so the chain runs to
+    // the first closing brace.
+    const match = /^\{\s*([A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*\s*(?:\|[^}]*)?)\}/.exec(
       state.src.slice(state.pos)
     );
     if (!match) return false;
     const resolve = state.env?.resolveBinding;
-    const html = resolve ? resolve(match[1]) : null;
+    const html = resolve ? resolve(match[1].trim()) : null;
     if (typeof html !== "string") return false;
     if (!silent) {
       const token = state.push("html_inline", "", 0);
@@ -196,8 +200,13 @@ export function attrTarget(children, i) {
  * @returns {string | null}
  */
 function resolveBindingHtml(expr, ctx) {
-  const segs = expr.split(".");
+  const { path, stages } = validatePipes(expr, ctx);
+  const segs = path.split(".");
   const head = segs[0];
+  // Reactive nodes carry the pipe chain in data-wd-fmt; static values fold now.
+  const fmt = stages.length ? ` data-wd-fmt="${escapeHtml(fmtAttr(stages))}"` : "";
+  /** @param {unknown} v */
+  const fold = (v) => (stages.length ? applyPipeline(v, stages) : v);
 
   // Per-row meta vars ($index/$number/$first/$last/$count) — only inside a loop.
   if (LOOP_META[head]) {
@@ -205,19 +214,19 @@ function resolveBindingHtml(expr, ctx) {
       throw new Error(
         `"{ ${expr} }" uses the loop meta variable "${head}" outside a @loop in ${ctx.file}. Move it into a loop body, or rename your value.`
       );
-    if (ctx.loopItem) return `<span data-wd-each-meta="${LOOP_META[head]}"></span>`; // reactive: filled per row
+    if (ctx.loopItem) return `<span data-wd-each-meta="${LOOP_META[head]}"${fmt}></span>`; // reactive: filled per row
     // static: the value is in scope (injected by staticUnroll); fall through.
   }
 
   if (ctx.loopItem && head === ctx.loopItem) {
     const rest = segs.slice(1).join(".");
-    return `<span data-wd-each${rest ? ` data-wd-path="${escapeHtml(rest)}"` : ""}></span>`;
+    return `<span data-wd-each${rest ? ` data-wd-path="${escapeHtml(rest)}"` : ""}${fmt}></span>`;
   }
 
   const staticValue = lookupVar(ctx.scope, head);
   if (staticValue.found) {
     const resolved = getPath(staticValue.value, segs.slice(1));
-    return escapeHtml(interpolateLeaf(resolved, expr, ctx));
+    return escapeHtml(interpolateLeaf(fold(resolved), expr, ctx));
   }
 
   const key = resolveStateKey(head, ctx);
@@ -226,7 +235,7 @@ function resolveBindingHtml(expr, ctx) {
     const initial = getPath(ctx.comp.state.get(key), segs.slice(1));
     const rest = segs.slice(1).join(".");
     const pathAttr = rest ? ` data-wd-path="${escapeHtml(rest)}"` : "";
-    return `<span data-wd-bind="${key}"${pathAttr}>${escapeHtml(interpolateLeaf(initial, expr, ctx))}</span>`;
+    return `<span data-wd-bind="${key}"${pathAttr}${fmt}>${escapeHtml(interpolateLeaf(fold(initial), expr, ctx))}</span>`;
   }
 
   return null;

package/src/compiler/predicates.js

@@ -236,6 +236,37 @@ export function compileComputedExpr(raw, ctx) {
     strings.push(JSON.stringify(literal.slice(1, -1)));
     return `__WDSTR${strings.length - 1}__`;
   });
+  // Aggregate calls — sum/avg/min/max over a list state, count of a list — are the
+  // one allowed "function call". Each `name(listPath[, field])` is compiled to the
+  // whitelisted `A("name", S(listKey…), "field")` helper and masked before the
+  // generic function-call rejection below runs, so no arbitrary call survives.
+  /** @type {string[]} */
+  const aggs = [];
+  expr = expr.replace(
+    /\b(sum|avg|min|max|count)\s*\(\s*([A-Za-z_$][\w$.]*)\s*(?:,\s*([A-Za-z_$][\w$]*)\s*)?\)/g,
+    (_whole, name, listPath, field) => {
+      const segs = listPath.split(".");
+      if (
+        segs.some((/** @type {string} */ s) =>
+          ["constructor", "prototype", "__proto__"].includes(s)
+        )
+      ) {
+        throw new Error(`Path "${listPath}" is not allowed in :computed ${name}() (${ctx.file})`);
+      }
+      const key = resolveStateKey(segs[0], ctx);
+      if (!key) {
+        throw new Error(
+          `:computed ${name}() references unknown state "${segs[0]}" in ${ctx.file}. Declare it with :state or :fetch first.`
+        );
+      }
+      const rest = segs.slice(1).join(".");
+      const listCode = `S(${JSON.stringify(key)}${rest ? `,${JSON.stringify(rest)}` : ""})`;
+      aggs.push(
+        `A(${JSON.stringify(name)},${listCode}${field ? `,${JSON.stringify(field)}` : ""})`
+      );
+      return `__WDAGG${aggs.length - 1}__`;
+    }
+  );
   if (/["'\\`]/.test(expr)) {
     throw new Error(`Unsupported string syntax in :computed expression "${raw}" (${ctx.file})`);
   }
@@ -260,7 +291,7 @@ export function compileComputedExpr(raw, ctx) {
     );
   }
   expr = expr.replace(/[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*/g, (ref) => {
-    if (/^__WDSTR\d+__$/.test(ref)) return ref;
+    if (/^__WDSTR\d+__$/.test(ref) || /^__WDAGG\d+__$/.test(ref)) return ref;
     if (["true", "false", "null"].includes(ref)) return ref;
     const segs = ref.split(".");
     if (segs.some((seg) => ["constructor", "prototype", "__proto__"].includes(seg))) {
@@ -277,5 +308,7 @@ export function compileComputedExpr(raw, ctx) {
     const rest = segs.slice(1).join(".");
     return `S(${JSON.stringify(key)}${rest ? `,${JSON.stringify(rest)}` : ""})`;
   });
-  return expr.replace(/__WDSTR(\d+)__/g, (_, index) => strings[Number(index)]);
+  return expr
+    .replace(/__WDAGG(\d+)__/g, (_, index) => aggs[Number(index)])
+    .replace(/__WDSTR(\d+)__/g, (_, index) => strings[Number(index)]);
 }

package/src/headers.js

@@ -19,6 +19,9 @@
  *     so reactive pages additionally need `script-src 'unsafe-eval'`.
  *   - Inline `<style>` for view transitions — `style-src 'unsafe-inline'`.
  *   - `data:` favicon and remote images — `img-src 'self' data: https:`.
+ *   - `:video`/`:audio` allow relative or `http(s)` sources — `media-src 'self' https:`.
+ *   - `:embed` rewrites to exactly the YouTube no-cookie and Vimeo player origins,
+ *     so `frame-src` pre-authorizes those two hosts (and nothing else).
  *
  * Static pages (zero framework JS) still emit inline `<style>` and an inline
  * `<script type="speculationrules">`, so they keep `'unsafe-inline'`, but they
@@ -42,6 +45,8 @@ const COMMON_CSP_DIRECTIVES = [
   "default-src 'self'",
   "style-src 'self' 'unsafe-inline'",
   "img-src 'self' data: https:",
+  "media-src 'self' https:",
+  "frame-src https://www.youtube-nocookie.com https://player.vimeo.com",
   "font-src 'self'",
   CONNECT_SRC,
   "object-src 'none'",