@zvndev/darkmown 2.6.1-next.11.g82bb8d7 → 2.7.0

package/src/compiler/loops.js

@@ -7,7 +7,7 @@
 // ---------------------------------------------------------------------------
 
 import { at, createScope, lineOf, nestedCtx, recordSymbol, wdError } from "./context.js";
-import { serializeExpr } from "./expr-ast.js";
+import { astOf, evalAst, serializeExpr } from "./expr-ast.js";
 import { applyPipeline, stagesFromAttr } from "./format.js";
 import { resolveInclude } from "./includes.js";
 import {
@@ -19,10 +19,12 @@ import {
   stripQuotes,
   unescapeHtml
 } from "./interpolation.js";
+import { encodeDest, unsafeUrlValue } from "./markdown.js";
 import { compilePredicate, evalPredicate } from "./predicates.js";
 
 /**
  * @typedef {import("./context.js").Ctx} Ctx
+ * @typedef {import("./context.js").Compilation} Compilation
  * @typedef {import("./context.js").Predicate} Predicate
  * @typedef {import("./context.js").NumArg} NumArg
  * @typedef {import("./context.js").LoopOpts} LoopOpts
@@ -37,6 +39,121 @@ export const LOOP_EXAMPLE = "@loop /products.json into p where p.price < 50 sort
 // The fixed corrective suggestion shown for any malformed @loop header.
 const LOOP_USAGE = `Use: @loop src into item [where …] [sort by …] [reverse] [offset N] [limit N] [paginate N] [sortable] — e.g. ${LOOP_EXAMPLE}`;
 
+// The corrective suggestion for an expression the AST re-parser cannot read.
+const EXPR_USAGE =
+  'Use simpler operands — a field path, a declared :state, a plain number, or a "string".';
+
+/**
+ * Serialize an already-validated expression fragment into the compact AST
+ * attribute payload the runtime reads, turning a residual parse failure into a
+ * CODED compile error with `file:line` instead of the AST layer's raw internal
+ * `Error`.
+ *
+ * `expr-ast.js` re-parses the compiler's own output, so a failure there is not
+ * an author mistake and it throws a plain `Error` by design. But the operand
+ * folds in `predicates.js` splice BUILD-TIME VALUES into that output, and a
+ * value the fold cannot render as a readable literal escapes as an uncoded
+ * `expr-ast: …` error with no file, no line, and no suggestion — the one gap in
+ * the "every author-facing error carries a code" invariant. This is the seam
+ * where that becomes an ordinary Darkmown compile error again.
+ *
+ * Lives here rather than beside its `structure.js` callers because the error-code
+ * registry pins each source file to a subsystem block (`compiler/loops.js` owns
+ * WD1xx), and this guard's reserved code is WD190.
+ * @param {string} code Validated JS fragment over `I()`/`S()`/`C()`/`A()`.
+ * @param {Ctx} ctx
+ * @param {number} index 0-based line index of the directive that owns it.
+ * @param {string} what Directive label for the message, e.g. `":if"`.
+ * @returns {any[]} The parsed AST.
+ */
+export function astAt(code, ctx, index, what) {
+  try {
+    return astOf(code);
+  } catch {
+    throw wdError(
+      `${what} expression in ${at(ctx, index)} could not be compiled: "${code}". ${EXPR_USAGE}`,
+      {
+        code: "WD190",
+        file: ctx.file,
+        line: lineOf(ctx, index),
+        hint: EXPR_USAGE.slice("Use ".length)
+      }
+    );
+  }
+}
+
+/**
+ * `JSON.stringify(astAt(…))` — the attribute payload, with the same coded error.
+ * @param {string} code
+ * @param {Ctx} ctx
+ * @param {number} index
+ * @param {string} what
+ * @returns {string}
+ */
+export const serializeExprAt = (code, ctx, index, what) =>
+  JSON.stringify(astAt(code, ctx, index, what));
+
+// The clause patterns, each opening with `(^|\s)` so the keyword's own start is
+// `m.index + m[1].length`. `g`-flagged so {@link matchClause} can keep scanning
+// past an occurrence that turned out to be inside a quoted `where` operand.
+const SORTABLE_RE = /(^|\s)sortable(?=\s|$)/g;
+const PAGINATE_RE = /(^|\s)paginate\s+(\d+)(?=\s|$)/g;
+const LIMIT_RE = /(^|\s)limit\s+(\d+|[A-Za-z_$][\w$]*)$/g;
+const OFFSET_RE = /(^|\s)offset\s+(\d+|[A-Za-z_$][\w$]*)$/g;
+const REVERSE_RE = /(^|\s)reverse$/g;
+const SORT_RE =
+  /(^|\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))?$/g;
+// A clause keyword left INSIDE the `where` remainder — the out-of-order signal.
+const CLAUSE_IN_WHERE_RE = /(^|\s)(sort\s+by\s|reverse(\s|$))/g;
+
+/**
+ * Which characters of a `@loop` clause tail sit inside a quoted operand.
+ *
+ * The clause peels are plain regexes over the whole tail, so they could not tell
+ * a real clause from the same word inside a `where` string literal: `where
+ * p.note contains "a sortable b"` peeled a `sortable` flag out of the middle of
+ * the string (then failed as "sortable cannot combine with where"), and `where
+ * p.t contains "we sort by hand"` was rejected outright as out-of-order clauses.
+ * Same defect, and the same remedy, as the quote-aware `and`/`or` split in
+ * `predicates.js`. Opening and closing quotes count as inside, so a keyword can
+ * never be read out of a literal.
+ * @param {string} s
+ * @returns {boolean[]}
+ */
+function quotedMask(s) {
+  const mask = new Array(s.length).fill(false);
+  let quote = "";
+  for (let i = 0; i < s.length; i++) {
+    if (quote) {
+      mask[i] = true;
+      if (s[i] === quote) quote = "";
+    } else if (s[i] === '"' || s[i] === "'") {
+      quote = s[i];
+      mask[i] = true;
+    }
+  }
+  return mask;
+}
+
+/**
+ * The first match of a clause pattern whose KEYWORD begins outside a quoted
+ * operand, or null when the only occurrences are quoted.
+ * @param {string} s
+ * @param {RegExp} re One of the `g`-flagged clause patterns above.
+ * @returns {RegExpExecArray | null}
+ */
+function matchClause(s, re) {
+  const mask = quotedMask(s);
+  re.lastIndex = 0;
+  for (let m = re.exec(s); m; m = re.exec(s)) {
+    if (!mask[m.index + m[1].length]) return m;
+    // Resume one character in, not past the whole match: a real clause can begin
+    // inside the span a quoted occurrence just consumed.
+    re.lastIndex = m.index + 1;
+  }
+  return null;
+}
+
 /**
  * Parse the optional clause tail of a `@loop` header in FIXED order:
  * `[where P] [sort by key [asc|desc]] [reverse] [offset N] [limit N] [paginate N] [sortable]`.
@@ -48,9 +165,11 @@ const LOOP_USAGE = `Use: @loop src into item [where …] [sort by …] [reverse]
 function parseLoopClauses(tail, itemName, ctx) {
   // Peel clauses off the END in reverse fixed-order (limit, offset, reverse,
   // sort by). Parsing from the tail avoids mistaking a state operand named
-  // `limit`/`offset` inside the `where` predicate for a clause keyword. Whatever
-  // remains must be `where …` (or empty); a clause keyword surviving in the
-  // remainder means the author wrote the clauses out of order.
+  // `limit`/`offset` inside the `where` predicate for a clause keyword, and
+  // every peel goes through `matchClause`, which ignores a keyword sitting
+  // inside a quoted `where` operand. Whatever remains must be `where …` (or
+  // empty); a clause keyword surviving UNQUOTED in the remainder means the
+  // author wrote the clauses out of order.
   let s = tail.trim();
   /** @type {import("./context.js").LoopOpts["sort"]} */ let sort = null;
   let reverse = false;
@@ -70,7 +189,7 @@ function parseLoopClauses(tail, itemName, ctx) {
   // `sortable` is a position-independent flag (drag-reorder); peel it wherever it
   // sits so the rest of the fixed-order parse is unaffected. handleLoop rejects it
   // when combined with where/sort/reverse/offset/limit.
-  const sm = s.match(/(^|\s)sortable(?=\s|$)/);
+  const sm = matchClause(s, SORTABLE_RE);
   if (sm) {
     sortable = true;
     s = (s.slice(0, sm.index) + s.slice((sm.index ?? 0) + sm[0].length))
@@ -83,7 +202,7 @@ function parseLoopClauses(tail, itemName, ctx) {
   // can reject the combination with a precise message rather than failing the
   // fixed-order parse. The count is a positive integer literal — paginating "by a
   // state value" makes no sense for a build-time route split.
-  const pm = s.match(/(^|\s)paginate\s+(\d+)(?=\s|$)/);
+  const pm = matchClause(s, PAGINATE_RE);
   if (pm) {
     paginate = Number(pm[2]);
     if (paginate < 1) bad();
@@ -92,21 +211,21 @@ function parseLoopClauses(tail, itemName, ctx) {
       .trim();
   }
 
-  let m = s.match(/(^|\s)limit\s+(\d+|[A-Za-z_$][\w$]*)$/);
+  let m = matchClause(s, LIMIT_RE);
   if (m) {
     limit = parseNumArg(m[2], ctx);
     refsState = refsState || limit.kind === "key";
     s = s.slice(0, s.length - m[0].length + m[1].length).trim();
   }
 
-  m = s.match(/(^|\s)offset\s+(\d+|[A-Za-z_$][\w$]*)$/);
+  m = matchClause(s, OFFSET_RE);
   if (m) {
     offset = parseNumArg(m[2], ctx);
     refsState = refsState || offset.kind === "key";
     s = s.slice(0, s.length - m[0].length + m[1].length).trim();
   }
 
-  m = s.match(/(^|\s)reverse$/);
+  m = matchClause(s, REVERSE_RE);
   if (m) {
     reverse = true;
     s = s.slice(0, s.length - m[0].length + m[1].length).trim();
@@ -114,9 +233,7 @@ function parseLoopClauses(tail, itemName, ctx) {
 
   // 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))?$/
-  );
+  m = matchClause(s, SORT_RE);
   if (m) {
     sort = parseSortClause(m[2], m[3], itemName, ctx);
     if (sort.keyKind === "key" || sort.dirKind === "key") refsState = true;
@@ -125,12 +242,14 @@ function parseLoopClauses(tail, itemName, ctx) {
 
   /** @type {string|null} */ let where = null;
   if (s.length) {
-    m = s.match(/^where\s+(.+)$/);
-    if (!m) return bad(); // leftover non-where text → clauses written out of order
-    where = m[1].trim();
+    const head = s.match(/^where\s+(.+)$/);
+    if (!head) return bad(); // leftover non-where text → clauses written out of order
+    where = head[1].trim();
     // `sort by`/`reverse` are never valid where operands; their presence in the
     // predicate means a clause was written before `where` finished (wrong order).
-    if (/(^|\s)(sort\s+by\s|reverse(\s|$))/.test(where)) bad();
+    // Quoted text is not a clause, so `where p.t contains "we sort by hand"` is
+    // an ordinary string comparison, not a misplaced `sort by`.
+    if (matchClause(where, CLAUSE_IN_WHERE_RE)) bad();
   }
   return { where, sort, reverse, offset, limit, refsState, sortable, paginate };
 }
@@ -541,7 +660,10 @@ function pipelineRows(rows, where, opts, ctx) {
           typeof av === "number" && typeof bv === "number"
             ? av - bv
             : String(av).localeCompare(String(bv));
-        return (c || a.index - b.index) * dir;
+        // The index tiebreaker keeps EQUAL rows in source order, so it must not
+        // be flipped with the comparator: `(c || tie) * dir` negated the tie too
+        // and made `desc` unstable, reversing runs of equal keys.
+        return c ? c * dir : a.index - b.index;
       })
       .map((w) => w.value);
   }
@@ -593,6 +715,18 @@ function loopOverData(rows, itemName, bodyLines, ctx, opts) {
 function staticUnroll(rows, itemName, bodyLines, ctx, empty = null, emptyStart = 0) {
   if (rows.length === 0 && empty)
     return ctx.compileBody(empty, { ...nestedCtx(ctx, emptyStart), loopMeta: true });
+  // A body of BARE table rows (`| { p.name } | { p.n } |`, no `|---|` of its
+  // own) is the natural way to write the rows of a table whose header sits in
+  // the prose above the loop. Markdown needs a header to see a table at all, so
+  // each row compiled to a `<p>| Alpha | 3 |</p>` paragraph. Compile every row
+  // under a SYNTHESIZED header instead — the row seam then splices the one-row
+  // tables into one, and the synthetic `<thead>` is stripped off the result, so
+  // the loop emits a body-only `<table><tbody>…</tbody></table>` that the
+  // body-level seam splices onto the author's header table.
+  const pipe = pipeRowShape(bodyLines);
+  const lines = pipe
+    ? [pipeHeader(pipe.columns), pipeSeparator(pipe.columns), ...bodyLines]
+    : bodyLines;
   const out = [];
   const count = rows.length;
   for (let i = 0; i < count; i++) {
@@ -603,14 +737,219 @@ function staticUnroll(rows, itemName, bodyLines, ctx, empty = null, emptyStart =
       $last: i === count - 1,
       $count: count
     };
+    /** @type {Ctx} */
     const rowCtx = {
-      ...ctx,
+      // The two synthesized lines shift every real body line by 2, so shift the
+      // slice offset back by 2 — a warning raised inside a row still reports the
+      // line the author actually wrote.
+      ...(pipe ? nestedCtx(ctx, -2) : ctx),
       loopMeta: true,
       scope: createScope(ctx.scope, { [itemName]: rows[i], ...meta })
     };
-    out.push(ctx.compileBody(bodyLines, rowCtx));
+    out.push(ctx.compileBody(lines, rowCtx));
   }
-  return out.join("\n");
+  const html = joinRows(out);
+  // GLOBAL: one synthesized header per compiled row body, and the row seam does
+  // not always merge them into one table (a `@loop` whose rows are split by a
+  // structure the splice declines). Stripping only the first left the rest on
+  // the page as `<th>c</th>`.
+  return pipe ? html.replace(/<thead>[\s\S]*?<\/thead>\n?/g, "") : html;
+}
+
+// One synthesized markdown table header + separator, wide enough for the body
+// rows underneath. The cells are never rendered (the `<thead>` is stripped back
+// off), they exist only so markdown-it recognises the rows as a table.
+/** @param {number} columns @returns {string} */
+const pipeHeader = (columns) => `|${" c |".repeat(columns)}`;
+/** @param {number} columns @returns {string} */
+const pipeSeparator = (columns) => `|${" --- |".repeat(columns)}`;
+
+/**
+ * Whether a loop body is a run of BARE markdown table rows — every non-blank
+ * line a `|…|` row, and no `|---|` separator of its own — and how many columns
+ * the first row has.
+ *
+ * A body that carries its own separator is a COMPLETE table per row; that shape
+ * already works (each row compiles to a one-row table and the row seam splices
+ * their `<tbody>`s), so it is deliberately not claimed here.
+ * @param {string[]} bodyLines
+ * @returns {{ columns: number } | null}
+ */
+function pipeRowShape(bodyLines) {
+  // TRAILING blank lines are harmless — nothing follows them to re-open a table —
+  // so they are trimmed off the shape test. A LEADING or INTERIOR blank line is
+  // not: a blank line ENDS a markdown table, so the synthesized header would only
+  // cover the run of rows before it and every later run would form its own table
+  // with a visible `| c | c |` header. The `^ {0,3}\|` test rejects both (a blank
+  // line has no pipe) and also rejects a 4-space-indented row, which markdown
+  // reads as an indented code block, not a table row. Filtering blanks out and
+  // trimming each line — what this used to do — hid all three cases and shipped
+  // `<th>c</th>` to the page.
+  let end = bodyLines.length;
+  while (end > 0 && !bodyLines[end - 1].trim()) end--;
+  const rows = bodyLines.slice(0, end);
+  if (!rows.length || !rows.every((line) => /^ {0,3}\|/.test(line))) return null;
+  if (rows.some((line) => /^ {0,3}\|[\s:|-]+\|\s*$/.test(line))) return null;
+  return { columns: cellCount(rows[0]) };
+}
+
+/**
+ * Cells in one markdown table row. Counts `|` exactly the way markdown-it does
+ * — a backslash escapes the next character — so the synthesized header has the
+ * same column count markdown-it will read off the body rows.
+ * @param {string} row
+ * @returns {number}
+ */
+function cellCount(row) {
+  const inner = row.trim().replace(/^\|/, "").replace(/\|$/, "");
+  let cells = 1;
+  for (let i = 0; i < inner.length; i++) {
+    if (inner[i] === "\\") i++;
+    else if (inner[i] === "|") cells++;
+  }
+  return cells;
+}
+
+/**
+ * The compile error for a REACTIVE `@loop` over bare table rows. The runtime
+ * clones each row out of a `<template>` into a `<div data-wd-loop-piece>`, and a
+ * `<div>` cannot live inside a `<table>`, so there is no correct HTML to emit —
+ * it used to ship silent `<p>| … |</p>` paragraphs instead.
+ * @param {Ctx} ctx
+ * @param {Partial<LoopOpts> & { data?: unknown[] } | null | undefined} opts
+ * @param {string | null} sourceKey State key/path of the list, or null when the
+ *   source is a build-time list and a CLAUSE is what made the loop reactive.
+ * @returns {Error}
+ */
+function reactiveTableRows(ctx, opts, sourceKey) {
+  const opener = ctx.loopOpener ?? { at: ctx.file, line: "" };
+  // A loop whose SOURCE is a static list (`sourceKey === null` — a JSON file, a
+  // frontmatter list, a collection) is reactive only because a CLAUSE reads
+  // `:state`. Telling that author to "use a static source" points at the one
+  // thing already correct; the fix is in the clause, so name the state it reads.
+  const names = sourceKey === null ? clauseStateNames(opts) : [];
+  const quoted = names.map((name) => `"${name}"`).join(", ");
+  const why = names.length
+    ? ` The source is static; the clauses read :state ${quoted}, which is what makes the loop reactive.`
+    : "";
+  const hint = names.length
+    ? `drop ${quoted} from the clauses so the rows unroll at build time, or build reactive rows ` +
+      "from containers (`::: trow` / `::: td`) instead of `|` cells"
+    : "a static source (a JSON file, a frontmatter list, or a collection) for a markdown table, " +
+      "or build reactive rows from containers (`::: trow` / `::: td`) instead of `|` cells";
+  return wdError(
+    `A reactive @loop cannot build markdown table rows in ${opener.at}: "${opener.line}". ` +
+      `A reactive row is cloned into a <div>, which cannot live inside a <table>.${why} Use: ${hint}.`,
+    { code: "WD191", file: ctx.file, hint }
+  );
+}
+
+// The `S("name"…)` readers a compiled `where` predicate emits.
+const WHERE_STATE_RE = /\bS\("((?:[^"\\]|\\.)*)"/g;
+
+/**
+ * The declared-state names a loop's CLAUSES read: the `where` predicate's `S()`
+ * readers plus any `limit`/`offset`/`sort by` argument that is a state key.
+ * @param {Partial<LoopOpts> & { data?: unknown[] } | null | undefined} opts
+ * @returns {string[]}
+ */
+function clauseStateNames(opts) {
+  /** @type {Set<string>} */
+  const names = new Set();
+  for (const m of (opts?.where?.body ?? "").matchAll(WHERE_STATE_RE))
+    names.add(JSON.parse(`"${m[1]}"`));
+  for (const arg of [opts?.limit, opts?.offset]) if (arg?.kind === "key") names.add(arg.value);
+  if (opts?.sort?.keyKind === "key") names.add(opts.sort.key);
+  if (opts?.sort?.dirKind === "key") names.add(opts.sort.dir);
+  return [...names];
+}
+
+// The block tags a static unroll stitches back together across a row seam. Each
+// row body is compiled as its OWN markdown document, so a row whose body is a
+// list item closes its own `<ul>`/`<ol>` and a row whose body is a table closes
+// its own `<table>`: `- { p.name }` over three rows produced three separate
+// lists, `1. { p.name }` produced three lists each numbered 1, and a table body
+// produced three tables. Splicing at the seam gives the ONE list / ONE correctly
+// numbered list / ONE table an author wrote.
+const SEAM_TAGS = ["ul", "ol"];
+
+/**
+ * Join the compiled row bodies of a static unroll, splicing a block that a row
+ * seam split in two back into one element. A seam that does not match any
+ * mergeable shape falls back to the plain `"\n"` join the unroll always used, so
+ * every other body shape emits byte-identical HTML.
+ * @param {string[]} parts Compiled HTML, one entry per row.
+ * @returns {string}
+ */
+function joinRows(parts) {
+  if (!parts.length) return "";
+  let html = parts[0];
+  for (let i = 1; i < parts.length; i++) html = spliceRow(html, parts[i]);
+  return html;
+}
+
+/**
+ * Splice one row's HTML onto the accumulated output at their shared seam.
+ * @param {string} prev Everything emitted so far.
+ * @param {string} next The next row's compiled HTML.
+ * @returns {string}
+ */
+function spliceRow(prev, next) {
+  const left = prev.trimEnd();
+  const right = next.trimStart();
+  for (const tag of SEAM_TAGS) {
+    if (left.endsWith(`</${tag}>`) && right.startsWith(`<${tag}>`)) {
+      return `${left.slice(0, -(tag.length + 3)).trimEnd()}\n${right.slice(tag.length + 2).trimStart()}`;
+    }
+  }
+  return spliceTables(prev, next) ?? `${prev}\n${next}`;
+}
+
+/**
+ * Splice two adjacent tables into one, in the two shapes a `.wd` body produces:
+ *
+ * 1. Two tables that carry the SAME markup before `<tbody>` — one compiled row
+ *    body per loop row. Their `<tbody>` contents concatenate. Requiring the
+ *    prefixes to match is what keeps a header that interpolates the row (a
+ *    genuinely different table per row) from losing every header but the first.
+ * 2. A HEADER-ONLY table (a `<thead>` and no `<tbody>`: what `| Name | N |` +
+ *    `|---|---|` in the prose above a loop compiles to) followed by a BODY-ONLY
+ *    table (a `<tbody>` and no `<thead>`: what a loop over bare `|…|` rows now
+ *    emits). The body moves inside the header's table.
+ *
+ * Exported because both seams matter: the loop's own row seam (case 1) and the
+ * body-level seam between flushed prose and a handler's output (case 2), which
+ * `compileBody` owns.
+ * @param {string} prev
+ * @param {string} next
+ * @returns {string | null} The spliced HTML, or null when they do not merge.
+ */
+export function spliceTables(prev, next) {
+  const left = prev.trimEnd();
+  const right = next.trimStart();
+  if (!left.endsWith("</table>") || !right.startsWith("<table>")) return null;
+  const rightBody = right.indexOf("<tbody>");
+  if (rightBody === -1) return null;
+  const leftBody = left.lastIndexOf("</tbody>");
+  const tail = right.slice(rightBody + "<tbody>".length).trimStart();
+  if (leftBody === -1) {
+    // Case 2: a header-only table absorbs the body-only table's rows. Both
+    // halves must be exactly that — a right side with its own `<thead>` is a
+    // complete table of its own and stays separate.
+    if (!left.includes("<thead>") || right.includes("<thead>")) return null;
+    return `${left.slice(0, left.lastIndexOf("</table>")).trimEnd()}\n<tbody>\n${tail}`;
+  }
+  // Case 2b: the left table already has a body — the author wrote a fixed row
+  // under the header before the loop. A right side with NO `<thead>` is body-only
+  // output (a loop over bare `|…|` rows, whose synthesized header was stripped),
+  // so its rows belong in that body whatever the header above them says. Without
+  // this the fixed row forced two tables.
+  if (!right.includes("<thead>")) return `${left.slice(0, leftBody).trimEnd()}\n${tail}`;
+  // Case 1: same header, concatenated bodies. A header that INTERPOLATES the row
+  // is genuinely a table per row, and merging would drop every header but the
+  // first — so two headered tables only merge when their headers are identical.
+  if (left.slice(0, left.indexOf("<tbody>")) !== right.slice(0, rightBody)) return null;
+  return `${left.slice(0, leftBody).trimEnd()}\n${tail}`;
 }
 
 /**
@@ -626,6 +965,7 @@ function staticUnroll(rows, itemName, bodyLines, ctx, empty = null, emptyStart =
  */
 function reactiveLoop(key, itemName, bodyLines, ctx, opts = null) {
   assertReactiveDepth(ctx);
+  if (pipeRowShape(bodyLines)) throw reactiveTableRows(ctx, opts, key);
   ctx.comp.assets.runtime = true;
   /** @type {Ctx} */
   const templateCtx = {
@@ -657,12 +997,26 @@ function reactiveLoop(key, itemName, bodyLines, ctx, opts = null) {
   /** @param {NumArg|null} a */
   const num = (a) =>
     a ? (a.kind === "literal" ? a.value : Number(ctx.comp.state.get(a.value) ?? 0)) : null;
+  // A reactive `sort by { field }` / `{ dir }` carries the resolved STATE KEY in
+  // `sort.key`/`sort.dir`, not a field path and not `asc`/`desc` — the runtime
+  // reads the current value per render. The initial paint has to resolve it the
+  // same way (exactly as `num()` already does for a state-keyed offset/limit),
+  // or the key is used as a literal field path (which no row has), the direction
+  // never equals "desc", and the pre-hydration HTML ships in source order and
+  // visibly reorders the moment the runtime boots.
+  const initialSort = sort
+    ? {
+        ...sort,
+        key: sort.keyKind === "key" ? String(ctx.comp.state.get(sort.key) ?? "") : sort.key,
+        dir: sort.dirKind === "key" ? String(ctx.comp.state.get(sort.dir) ?? "asc") : sort.dir
+      }
+    : null;
   const rows = pipelineRows(
     allRows,
     where,
     {
       where,
-      sort,
+      sort: initialSort,
       reverse,
       offset:
         offset && offset.kind === "key" ? { kind: "literal", value: num(offset) || 0 } : offset,
@@ -688,7 +1042,10 @@ function reactiveLoop(key, itemName, bodyLines, ctx, opts = null) {
     .map((/** @type {unknown} */ item, i) => {
       const itemKey = loopKeyOf(item, counts);
       const meta = { index: i, number: i + 1, first: i === 0, last: i === count - 1, count };
-      return unmaskItemLoops(fillTemplateString(withLoopKey(masked, itemKey), item, meta), regions);
+      return unmaskItemLoops(
+        fillTemplateString(withLoopKey(masked, itemKey), item, meta, ctx.comp),
+        regions
+      );
     })
     .join("");
 
@@ -777,6 +1134,9 @@ function loopClauseAttrs(c) {
  */
 function itemRelativeLoop(path, itemName, bodyLines, ctx, opts) {
   assertReactiveDepth(ctx);
+  // An item-relative loop's source IS the outer reactive row, so no clause can
+  // be the cause: the source branch of the hint is always the right one.
+  if (pipeRowShape(bodyLines)) throw reactiveTableRows(ctx, opts, path);
   /** @type {Ctx} */
   // loopKey: undefined — an item-relative loop's source is a path off the outer
   // row, not a top-level state key, so a per-row `remove` inside it has no valid
@@ -853,13 +1213,84 @@ function withLoopKey(template, itemKey) {
 /**
  * @param {string} template
  * @param {unknown} item
- * @param {Record<string, unknown>} [meta] Per-row meta values for the initial paint.
+ * @param {Record<string, unknown>} meta Per-row meta values for the initial paint.
+ * @param {Compilation} comp Declared state, for a per-row `:if` predicate that
+ *   also reads `:state`/`:store`.
  * @returns {string}
  */
-function fillTemplateString(template, item, meta = {}) {
+function fillTemplateString(template, item, meta, comp) {
   // Resolve per-item :if regions first (recursively, so nested conditionals are
-  // pre-rendered for the initial paint), then fill text binds and meta markers.
-  return fillEachMeta(fillEachText(fillEachIfRegions(template, item, meta), item), meta);
+  // pre-rendered for the initial paint), then fill text binds, meta markers and
+  // bound destinations.
+  return fillEachAttr(
+    fillEachMeta(fillEachText(fillEachIfRegions(template, item, meta, comp), item), meta),
+    item,
+    meta,
+    comp
+  );
+}
+
+// An open tag carrying a per-row bound destination. Attribute values are
+// HTML-escaped, so `>` cannot appear inside one and `[^>]*` cannot overrun the
+// tag.
+const EACH_ATTR_TAG = /<[a-zA-Z][a-zA-Z0-9-]*[^>]*\sdata-wd-each-attr="([^"]*)"[^>]*>/g;
+
+/**
+ * Fill a per-row bound destination (`data-wd-each-attr`) for the initial paint.
+ *
+ * The template is the one `attrBindPlugin` stamped: `[name, …parts]`, where a
+ * part is either a literal chunk or a reader — `["i", path]` off the row,
+ * `["m", name]` off the row meta, `["s", key, path]` off declared state. The
+ * build-time seed on the element is deliberately EMPTY for the reader parts (one
+ * template serves every row), so without this fill every painted row shipped the
+ * literal skeleton — `href="/p//"` — to a crawler and to a no-JS reader.
+ *
+ * The assembly mirrors the compile-time seed in `attrBindPlugin` exactly:
+ * `encodeDest` on each resolved value (a destination has no quoting, so an
+ * unencoded `)` or space breaks the link), then the scheme guard on the WHOLE
+ * assembled value, so a row that assembles to `javascript:…` paints empty.
+ * @param {string} str
+ * @param {unknown} item
+ * @param {Record<string, unknown>} meta
+ * @param {Compilation} comp
+ * @returns {string}
+ */
+function fillEachAttr(str, item, meta, comp) {
+  return str.replace(EACH_ATTR_TAG, (tag, template) => {
+    // The compiler serialized this template itself (`attrBindPlugin`), so the
+    // parse cannot fail, the shape is `[name, …parts]`, and `name` (`href`/`src`)
+    // is always already on the tag as the empty seed — the same
+    // compiler-wrote-it-so-it-parses contract the `data-wd-if-expr` AST next door
+    // relies on.
+    const [name, ...parts] =
+      /** @type {[string, ...(string | [string, string] | [string, string, string])[]]} */ (
+        JSON.parse(unescapeHtml(template))
+      );
+    let out = "";
+    for (const part of parts) {
+      if (typeof part === "string") {
+        out += part;
+        continue;
+      }
+      const value =
+        part[0] === "s"
+          ? getPath(comp.state.get(part[1]), part[2] ? part[2].split(".") : [])
+          : part[0] === "m"
+            ? meta[part[1]]
+            : getPath(item, part[1] ? part[1].split(".") : []);
+      out += encodeDest(value ?? "");
+    }
+    // Splice the value between the seed's own quotes: `name` never reaches a
+    // RegExp, and the closing quote is located on the ORIGINAL tag, so an escaped
+    // `&quot;` in the painted value cannot be mistaken for it.
+    const open = ` ${name}="`;
+    const start = tag.indexOf(open) + open.length;
+    return (
+      tag.slice(0, start) +
+      escapeHtml(unsafeUrlValue(out) ? "" : out) +
+      tag.slice(tag.indexOf('"', start))
+    );
+  });
 }
 
 /**
@@ -886,10 +1317,11 @@ function fillEachMeta(str, meta) {
 /**
  * @param {string} str
  * @param {unknown} item
- * @param {Record<string, unknown>} [meta]
+ * @param {Record<string, unknown>} meta
+ * @param {Compilation} comp
  * @returns {string}
  */
-function fillEachIfRegions(str, item, meta = {}) {
+function fillEachIfRegions(str, item, meta, comp) {
   const marker = "<span data-wd-each-if ";
   let result = "";
   let i = 0;
@@ -898,7 +1330,7 @@ function fillEachIfRegions(str, item, meta = {}) {
     if (start === -1) return result + str.slice(i);
     result += str.slice(i, start);
     const end = matchElement(str, start, "span");
-    result += fillOneEachIf(str.slice(start, end), item, meta);
+    result += fillOneEachIf(str.slice(start, end), item, meta, comp);
     i = end;
   }
 }
@@ -907,10 +1339,18 @@ function fillEachIfRegions(str, item, meta = {}) {
  * @param {string} region
  * @param {unknown} item
  * @param {Record<string, unknown>} meta
+ * @param {Compilation} comp
  * @returns {string}
  */
-function fillOneEachIf(region, item, meta) {
+function fillOneEachIf(region, item, meta, comp) {
   const metaMatch = region.match(/^<span data-wd-each-if data-wd-meta="([a-z]+)">/);
+  // A per-row `:if` with an OPERATOR (`:if r.qty > 1`) ships its condition as a
+  // serialized AST, not a path — the same payload the runtime walks. Without
+  // this branch the path fell back to "", `getPath(item, [])` handed back the
+  // row object, and `Boolean(row)` was true for every row: every operator `:if`
+  // in every reactive loop shipped its TRUE branch in the pre-hydration HTML,
+  // which is what a crawler and a no-JS reader see.
+  const exprMatch = region.match(/^<span data-wd-each-if data-wd-if-expr="([^"]*)">/);
   const path = (region.match(/^<span data-wd-each-if data-wd-path="([^"]*)">/) || ["", ""])[1];
   const trueStart = region.indexOf("<template data-wd-if-true>");
   const trueEnd = matchElement(region, trueStart, "template");
@@ -920,12 +1360,20 @@ function fillOneEachIf(region, item, meta) {
   const close = "</template>".length;
   const truthy = region.slice(trueStart + open, trueEnd - close);
   const falsy = region.slice(falseStart + "<template data-wd-if-false>".length, falseEnd - close);
-  const test = metaMatch
-    ? Boolean(meta[metaMatch[1]])
-    : Boolean(getPath(item, path ? path.split(".") : []));
+  let test;
+  if (exprMatch) {
+    // The compiler serialized this AST itself, so the parse cannot fail; the
+    // walk is the same closed evaluator the runtime uses, so the initial paint
+    // and the first render agree.
+    test = Boolean(evalAst(JSON.parse(unescapeHtml(exprMatch[1])), item, comp));
+  } else if (metaMatch) {
+    test = Boolean(meta[metaMatch[1]]);
+  } else {
+    test = Boolean(getPath(item, path ? path.split(".") : []));
+  }
   const branch = test ? truthy : falsy;
   const head = region.slice(0, falseEnd);
-  return `${head}<span data-wd-each-if-out>${fillEachIfRegions(branch, item, meta)}</span></span>`;
+  return `${head}<span data-wd-each-if-out>${fillEachIfRegions(branch, item, meta, comp)}</span></span>`;
 }
 
 /**
@@ -989,7 +1437,7 @@ export function matchElement(str, start, tag) {
  * @returns {string}
  */
 export function loopKeyOf(item, counts) {
-  const base =
+  const raw =
     item && typeof item === "object"
       ? String(
           /** @type {Record<string, unknown>} */ (item).id ??
@@ -997,6 +1445,12 @@ export function loopKeyOf(item, counts) {
             JSON.stringify(item)
         )
       : String(item);
+  // Escape every literal `#` in the value BEFORE the `#n` disambiguator is
+  // appended, so a real key can never be mistaken for a duplicate suffix. A row
+  // with `id: "a#1"` and the second row with `id: "a"` both serialized to `a#1`,
+  // and because the runtime's reuse Map is keyed on this attribute the collision
+  // made a 3-item list grow a row on every render, unbounded.
+  const base = raw.replace(/#/g, "##");
   const seen = counts.get(base) || 0;
   counts.set(base, seen + 1);
   return seen ? `${base}#${seen}` : base;