@zvndev/darkmown 0.14.1 → 0.16.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to Darkmown are documented here. Versions follow [semver](https://semver.org); pre-1.0 minor versions may contain breaking changes.
 
+## 0.16.0 — 2026-06-23
+
+Cross-document **view transitions** return as a per-page opt-in.
+
+- **`transitions: true` frontmatter** emits the CSS-only `@view-transition { navigation: auto; }` rule, giving a smooth same-origin cross-fade on navigation with zero JavaScript. It only animates between same-origin pages that both opt in, and browsers without support silently skip the fade (no hang, no layout change). Default-off; opt out explicitly with `transitions: false`. Re-enabled after the original cross-document render-blocking regression (stalled rAF / hanging navigation on deployed pages) was verified resolved on modern Chrome. Compile-time only — no change to the shipped runtime size.
+
+## 0.15.0 — 2026-06-23
+
+Form controls and inline styling reach the authoring layer.
+
+- **`:textarea` and `:select` field directives.** Forms gain a multi-line `:textarea name [rows=N]` and a `:select name` (with `- Label` option lines). Both capture into `:form into` state exactly like `:input`, and derive a non-visual accessible name from their placeholder or humanized field name.
+- **Inline attributes.** A trailing `{.class .class #id}` (no leading space) attaches classes / an id to the inline element directly before it — link, image, emphasis, or inline code — most often to style a link as a button without a wrapping container. It never collides with `{ name }` interpolation, which always begins with a name.
+- **Interpolated link destinations.** `{ name }` now resolves inside markdown link and image destinations, so `@loop` / state values can data-drive an `href` or `src`.
+
 ## 0.14.1 — 2026-06-19
 
 Patch-release hardening for page assets, form actions, and release metadata.

package/README.md

@@ -63,6 +63,7 @@ One syntax everywhere: `{ name }` or `{ name.path }`.
 - Declared `:state` becomes a live binding.
 - The page's own frontmatter is in scope as `meta` — `{ meta.title }` prints a field.
 - Anything else stays literal text — braces in prose never break a page or pull in the runtime.
+- Build-time values also resolve **inside a link or image destination** — `[{ item.label }]({ item.url })` or `![{ p.alt }]({ p.src })` — so an `@loop` can drive an `href`/`src` and the page stays static. (Reactive `:state` cannot live in a destination.)
 
 ## Frontmatter
 
@@ -81,6 +82,8 @@ tags: [sales, revenue, "q1, q2"]
 
 Three keys also drive the document `<head>`: `title` sets `<title>`, `description` adds the meta description plus Open Graph / Twitter tags, and `image` (an absolute URL) sets the social-share preview (`og:image` / `twitter:image` and a `summary_large_image` card).
 
+`transitions: true` opts a page into **cross-document view transitions** — a smooth same-origin cross-fade on navigation, emitted as the CSS-only `@view-transition { navigation: auto; }` rule. It ships zero JavaScript, only animates between same-origin pages that both opt in, and is silently ignored by browsers without support (the navigation just doesn't fade). Off by default; opt out explicitly with `transitions: false`.
+
 ## Static assets
 
 Images, fonts, icons, and other non-page files live on the include shelf at `site/_/` and are copied into the build untouched:
@@ -489,6 +492,10 @@ Fetched data and a form live happily on the same page:
 
 :form into profile
 :input name placeholder="Your name" required
+:select topic
+- General
+- Billing
+:textarea note placeholder="Anything else?"
 :submit "Save"
 :endform
 
@@ -497,10 +504,22 @@ Fetched data and a form live happily on the same page:
 
 - `:form into name` captures submits straight into state (no backend). `:form action="/url"` emits a plain native form instead — zero JS, full progressive enhancement. Form actions use the same URL scheme guard as `:fetch`: relative paths, explicit `http(s)://`, or leading `{ state }` interpolation; protocol-relative and non-http(s) schemes are compile errors.
 - `:form action="/url" into reply` does both: with JS the submit posts urlencoded via fetch and the JSON reply lands in state `reply` (`reply_error` on failure); without JS it is the same native POST. Darkmown adapts to any backend — it does not own one.
+- Field directives: `:input`, `:textarea name [rows=N]`, and `:select name` (with `- Label` option lines) all capture into `:form into` state the same way. Each derives a non-visual `aria-label` from its placeholder, else a humanized field name, unless you supply `aria-label`/`aria-describedby`.
 - `:state x = [] persist` keeps a single page's state in localStorage across reloads. (For state that is shared across pages and tabs, reach for [`:store`](#global-state--store) instead.)
 - `:computed total = items.length * 4` derives state from state with a compile-time-checked expression (names, numbers, arithmetic, comparisons — nothing else).
 - `:if item.path` works inside reactive loops for per-row branches, and nests — an inner `:if` resolves after the outer branch and stays reactive.
 
+## Inline attributes
+
+A trailing `{.class .class #id}` attaches classes / an id to the inline element directly before it — most often to style a link as a button without a wrapper:
+
+```wd
+[Get started](/start/){.btn .lg}
+![logo](/logo.svg){.brand}
+```
+
+The block must follow the element with no space, and works on links, images, emphasis, and inline code. It never collides with `{ name }` interpolation — an interpolation always starts with a name, never a `.` or `#`.
+
 ## The escape hatch
 
 Reactive pages expose `window.wd` — `wd.get(key)`, `wd.set(key, value)`, `wd.state`, `wd.render()` — so colocated `.js` can do anything the directives can't. Section-scoped keys are addressed as `sectionId:name`.

package/docs/spec-alignment.md

@@ -33,7 +33,7 @@ This audit compares the current Darkmown implementation with the original MARROW
 
 ## Stage 4 additions (2026-06-11, same day)
 
-- **View transitions (currently disabled):** `transitions: true` in frontmatter was wired to emit `@view-transition { navigation: auto; }` — the original doc's zero-JS MPA navigation polish. **This is turned off as of now:** cross-document `@view-transition` render-blocked deployed pages (stalled rAF, hanging navigation), so `transitions` is hardcoded to `""` in `src/compiler.js`. The frontmatter key is accepted but has no effect today. Reintroduction is tracked pending proper activation fallbacks (see "Still missing from the full vision").
+- **View transitions (re-enabled in 0.16.0, opt-in):** `transitions: true` in frontmatter emits `@view-transition { navigation: auto; }` — the original doc's zero-JS MPA navigation polish (a same-origin cross-fade on navigation). Previously pulled back because cross-document `@view-transition` render-blocked deployed pages (stalled rAF, hanging navigation); verified resolved on modern Chrome (CSS-only, same-origin, graceful no-support fallback, no nav hang), so it returns as a per-page opt-in. Default-off; opt out with `transitions: false`.
 - **Lazy loading:** `:fetch … when=visible` defers the request until the marker scrolls into view (IntersectionObserver) — the adapted form of `:lazy`.
 - **Computed state:** `:computed name = expr` with a compile-time-validated grammar (state refs, numbers, strings, arithmetic, comparisons; assignment, calls, and prototype walks rejected). Initial values are evaluated at build time.
 - **Dev self-reload:** `darkmown dev` rebuilds in a child process, so changes to the framework's own `src/` always compile with fresh modules.
@@ -73,6 +73,12 @@ Three capability gaps from the 2026-06-16 audit, closed together over a shared `
 
 - **Richer `:if` / `:else if` conditions:** a conditional now accepts the same compile-time-validated predicate grammar as `.class when` (its sibling through the shared `compileWhen`) — instead of a bare truthy path only. Operands are item paths, declared `:state`/`:store`, numbers, `"strings"`, `true`/`false`/`null`; comparisons `==` `!=` `<` `<=` `>` `>=` and `contains`; joined with `and` / `or` and negated with `not`. A bare path still reads as truthy (the fast path is unchanged). (`@loop … where` stays a comparison-only subset — each condition needs an operator; it has no `not` or bare-truthy form. Unifying it is deferred, not done here.) Reactivity is decided exactly as before: a predicate over only static values folds the branch at build time (`runtime: false` preserved); one over `:state` emits a global `data-wd-if` region carrying `data-wd-if-expr`; one over a loop item emits a per-row `data-wd-each-if` with `data-wd-if-expr`. The expression compiles to the **same** whitelisted grammar over `I()`/`S()`/`C()` and runs via `new Function` through the shared `evalPredicate` runtime helper — no new eval surface, and `constructor`/`prototype`/`__proto__` segments stay rejected in compiler and runtime. `:else if` chains inherit this automatically (each desugared condition re-enters the same path). **Honest caveat:** there is no parenthesis grouping — `and`/`or` associate left-to-right with no precedence between them, so model intent explicitly (split into `:else if` branches or a `:computed` boolean when grouping matters).
 
+## Stage 12 additions (2026-06-23, v0.15.0)
+
+- **`:textarea` and `:select` form controls:** `:textarea name [placeholder=…] [rows=N] [required]` and `:select name [required]` (with `- Label` option lines) join `:input` as field directives. Both capture into `:form into` state through the runtime's `FormData` with no runtime change, and both derive an accessible name (placeholder, else humanized field name) like `:input`. Closes the gap where multi-line and dropdown fields forced raw HTML.
+- **Interpolation in link/image destinations:** `{ name.path }` now resolves inside a markdown destination — `[{ it.label }]({ it.url })`, `![{ p.alt }]({ p.src })` — so a build-time `@loop` can drive `href`/`src` and the page stays static. Only build-time (static-scope) values substitute; reactive `:state` is left untouched (it cannot live in a destination).
+- **Inline attributes (`{.class #id}`):** a trailing attribute block attaches classes / an id to the inline element before it (link, image, emphasis, code), so a link can be styled as a button without a wrapper container. The block must follow with no space; it never collides with `{ name }` interpolation (which always starts with a name, not `.`/`#`).
+
 ## Stage 11 additions (2026-06-19, v0.14.1)
 
 - **Release hardening — page asset privacy:** page-colocated assets now honor the same hidden-path convention as routes. A file under `site/pages` is emitted only when no relative path segment starts with `.`, `-`, or `_`; symlinked page assets are skipped too. This preserves normal colocated media (`logo.svg`, `blog/cover.png`) while preventing accidental publication of `.env`, `_private/*`, `-draft/*`, or symlink-to-outside files.
@@ -97,7 +103,7 @@ The compiler recognizes three directives — `:note`, `:try`, and `:sprint` —
 ## Still missing from the full vision
 
 - First-party server runtime (`site/api/`), HTML-fragment `swap` semantics, and cart server sync — parked behind the adapter decision until a real project needs them.
-- **View transitions:** re-enabling `transitions: true` with proper activation fallbacks (disabled today — see Stage 4), plus `@starting-style` emission and browser fallbacks for older engines.
+- **View transitions:** named/typed transitions (`view-transition-name`, per-element morphs) and `@starting-style` emission on top of the opt-in cross-document fade shipped in 0.16.0 (see Stage 4).
 - Richer diagnostics and package-consumer QA in regular CI. Editor tooling exists as a source-installable VS Code extension; public Marketplace/Open VSX distribution remains a launch/distribution follow-up.
 
 ## Current claim

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zvndev/darkmown",
-  "version": "0.14.1",
+  "version": "0.16.0",
   "private": false,
   "publishConfig": {
     "access": "public"

package/site/_/links.json

@@ -0,0 +1,5 @@
+[
+  { "label": "Docs", "url": "/docs/" },
+  { "label": "Loops", "url": "/loops/" },
+  { "label": "Reactive", "url": "/reactive/" }
+]

package/site/pages/data.wd

@@ -148,4 +148,36 @@ The list below uses `when=visible` — the request only fires once this section
 Scroll me into view and I will load.
 :endif
 
+## Richer form controls
+
+`:textarea` and `:select` join `:input`, all captured into the same `:form into` state with no backend:
+
+:form into inquiry
+:input fullname placeholder="Your full name"
+:select topic
+- General question
+- New case
+- Billing
+:textarea message placeholder="How can we help?"
+:submit "Send inquiry"
+:endform
+
+:if inquiry
+Thanks **{ inquiry.fullname }** — we logged your "{ inquiry.topic }" note.
+:else
+Pick a topic and send — it is captured client-side, no backend.
+:endif
+
+## Dynamic links from data, and link buttons
+
+A build-time `@loop` can drive the `href` itself — `[{ link.label }]({ link.url })` resolves the destination at compile time, so these stay plain static links:
+
+@loop /links.json into link
+- [{ link.label }]({ link.url })
+@endloop
+
+A trailing `{.class}` styles a single link as a button — no wrapper container:
+
+[Read the docs](/docs/){.pulse-button}
+
 </main>

package/src/compiler.js

@@ -77,6 +77,7 @@ import MarkdownIt from "markdown-it";
 
 const md = new MarkdownIt({ html: true });
 md.use(bindingPlugin);
+md.use(attrsPlugin);
 
 // Raw HTML in markdown passes through by default (a documented design choice).
 // Pages can opt out with frontmatter `html: false` for untrusted content; the
@@ -94,6 +95,7 @@ function selectMd(meta) {
   if (!mdNoHtml) {
     mdNoHtml = new MarkdownIt({ html: false });
     mdNoHtml.use(bindingPlugin);
+    mdNoHtml.use(attrsPlugin);
   }
   return mdNoHtml;
 }
@@ -132,10 +134,13 @@ export function compilePage(file, context) {
   const cssLinks = [...compiled.assets.skins].map((href) => `<link rel="stylesheet" href="${href}">`).join("\n");
   const scriptSrcs = compiled.assets.runtime ? ["/__wd/runtime.js", ...compiled.assets.scripts] : [...compiled.assets.scripts];
   const scripts = scriptSrcs.map((src) => `<script type="module" src="${src}"></script>`).join("\n");
-  // View transitions are temporarily disabled: cross-document @view-transition
-  // render-blocked deployed pages (rAF stalled, navigation hangs). Tracked for
-  // reintroduction with proper activation fallbacks.
-  const transitions = "";
+  // Cross-document view transitions: opt in per page with `transitions: true` in
+  // frontmatter to emit the CSS-only @view-transition rule — a smooth same-origin
+  // cross-fade on navigation, with zero JavaScript. Ignored by browsers without
+  // support (graceful fade-free fallback) and only applies to same-origin
+  // navigations where both the outgoing and incoming page opt in.
+  const wantTransitions = compiled.meta.transitions === true || compiled.meta.transitions === "true";
+  const transitions = wantTransitions ? `\n  <style>@view-transition { navigation: auto; }</style>` : "";
 
   return {
     meta: compiled.meta,
@@ -394,6 +399,20 @@ function compileBody(lines, ctx) {
       out.push(handleInput(line, ctx));
       continue;
     }
+    if (/^:textarea\s/.test(line)) {
+      flush();
+      out.push(handleTextarea(line, ctx));
+      continue;
+    }
+    if (/^:select\s/.test(line)) {
+      flush();
+      const opts = [];
+      let j = i + 1;
+      while (j < lines.length && /^\s*-\s+/.test(lines[j])) { opts.push(lines[j]); j++; }
+      out.push(handleSelect(line, opts, ctx));
+      i = j - 1;
+      continue;
+    }
     if (/^:bind\s/.test(line)) {
       flush();
       out.push(handleBind(line, ctx));
@@ -1111,6 +1130,85 @@ function handleSubmit(line, ctx) {
   return `<button type="submit">${escapeHtml(match[1])}</button>`;
 }
 
+/**
+ * `:textarea name [placeholder="…"] [rows=N] [required]` → a `<textarea>`. Like
+ * `:input`, it derives a non-visual aria-label from the placeholder (else the
+ * humanized name) when the author supplies none. Captured by the runtime's
+ * FormData exactly like `:input` — no runtime change needed.
+ * @param {string} line
+ * @param {Ctx} ctx
+ * @returns {string}
+ */
+function handleTextarea(line, ctx) {
+  const match = line.match(/^:textarea\s+([A-Za-z_][\w-]*)\s*(.*)$/);
+  if (!match) throw new Error(`Malformed :textarea in ${ctx.file}: ${line}. Use: :textarea name [placeholder="…"] [rows=N] [required]`);
+  const attrs = [`name="${escapeHtml(match[1])}"`];
+  let placeholder;
+  let hasAria = false;
+  const re = /([A-Za-z-]+)=("[^"]*"|\S+)|([A-Za-z-]+)/g;
+  for (const token of (match[2] || "").matchAll(re)) {
+    if (token[3]) {
+      if (!["required", "autofocus", "disabled", "readonly"].includes(token[3])) {
+        throw new Error(`Unknown :textarea flag "${token[3]}" in ${ctx.file}`);
+      }
+      attrs.push(token[3]);
+      continue;
+    }
+    const value = stripQuotes(token[2]);
+    if (!["placeholder", "rows", "cols", "minlength", "maxlength", "autocomplete", "aria-label", "aria-describedby"].includes(token[1])) {
+      throw new Error(`Unknown :textarea attribute "${token[1]}" in ${ctx.file}`);
+    }
+    if (token[1] === "placeholder") placeholder = value;
+    if (token[1] === "aria-label" || token[1] === "aria-describedby") hasAria = true;
+    attrs.push(`${token[1]}="${escapeHtml(value)}"`);
+  }
+  if (!hasAria) {
+    attrs.push(`aria-label="${escapeHtml(placeholder || humanizeName(match[1]))}"`);
+  }
+  return `<textarea ${attrs.join(" ")}></textarea>`;
+}
+
+/**
+ * `:select name [required]` followed by `- Label` list lines → a `<select>` with
+ * one `<option>` per label (value === label). Derives an aria-label from the
+ * humanized name when none is given. Captured by FormData like the other fields.
+ * @param {string} line
+ * @param {string[]} optionLines The following `- Label` lines consumed by dispatch.
+ * @param {Ctx} ctx
+ * @returns {string}
+ */
+function handleSelect(line, optionLines, ctx) {
+  const match = line.match(/^:select\s+([A-Za-z_][\w-]*)\s*(.*)$/);
+  if (!match) throw new Error(`Malformed :select in ${ctx.file}: ${line}. Use: :select name [required] then "- Label" lines`);
+  const attrs = [`name="${escapeHtml(match[1])}"`];
+  let hasAria = false;
+  const re = /([A-Za-z-]+)=("[^"]*"|\S+)|([A-Za-z-]+)/g;
+  for (const token of (match[2] || "").matchAll(re)) {
+    if (token[3]) {
+      if (!["required", "disabled", "autofocus"].includes(token[3])) {
+        throw new Error(`Unknown :select flag "${token[3]}" in ${ctx.file}`);
+      }
+      attrs.push(token[3]);
+      continue;
+    }
+    const value = stripQuotes(token[2]);
+    if (!["autocomplete", "aria-label", "aria-describedby"].includes(token[1])) {
+      throw new Error(`Unknown :select attribute "${token[1]}" in ${ctx.file}`);
+    }
+    if (token[1] === "aria-label" || token[1] === "aria-describedby") hasAria = true;
+    attrs.push(`${token[1]}="${escapeHtml(value)}"`);
+  }
+  if (!hasAria) {
+    attrs.push(`aria-label="${escapeHtml(humanizeName(match[1]))}"`);
+  }
+  const options = optionLines.map((l) => l.replace(/^\s*-\s+/, "").trim()).filter(Boolean);
+  if (!options.length) {
+    throw new Error(`:select "${match[1]}" in ${ctx.file} has no options. Add "- Label" lines beneath it.`);
+  }
+  const opts = options.map((o) => `<option value="${escapeHtml(o)}">${escapeHtml(o)}</option>`).join("");
+  return `<select ${attrs.join(" ")}>${opts}</select>`;
+}
+
 /**
  * @param {string} line
  * @param {Ctx} ctx
@@ -1878,9 +1976,51 @@ function validateDemoHref(href, ctx) {
  * @returns {string}
  */
 function renderProse(text, ctx) {
+  text = resolveDestinationBindings(text, ctx);
   return (ctx.md ?? md).render(text, { resolveBinding: (/** @type {string} */ expr) => resolveBindingHtml(expr, ctx) });
 }
 
+/**
+ * Pre-resolve `{ expr }` interpolations sitting in a markdown link/image
+ * destination — the `](…)` slot — so a build-time `@loop` (or any static scope)
+ * can drive an href/src. A markdown destination cannot contain the spaces inside
+ * `{ … }`, so markdown-it would otherwise never form the link; substituting the
+ * static value here lets the normal link/image parser run. Only build-time
+ * (static-scope) values are substituted — reactive `:state`/reactive-loop
+ * bindings resolve to `null` and are left untouched (they cannot live in a
+ * destination). Issue #19.
+ * @param {string} text
+ * @param {Ctx} ctx
+ * @returns {string}
+ */
+function resolveDestinationBindings(text, ctx) {
+  return text.replace(
+    /(\]\(\s*)\{\s*([A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*)\s*\}/g,
+    (whole, prefix, expr) => {
+      const raw = resolveBindingRaw(expr, ctx);
+      return raw == null ? whole : prefix + raw;
+    }
+  );
+}
+
+/**
+ * Resolve `{ expr }` to its raw static value (a plain string) for use in a
+ * destination, or `null` when the binding is reactive or not in build-time
+ * scope. Mirrors the static branch of {@link resolveBindingHtml} but returns the
+ * unescaped value (markdown-it normalizes the URL).
+ * @param {string} expr
+ * @param {Ctx} ctx
+ * @returns {string | null}
+ */
+function resolveBindingRaw(expr, ctx) {
+  const segs = expr.split(".");
+  const found = lookupVar(ctx.scope, segs[0]);
+  if (!found.found) return null;
+  const resolved = getPath(found.value, segs.slice(1));
+  const leaf = interpolateLeaf(resolved, expr, ctx);
+  return leaf == null ? null : String(leaf);
+}
+
 /**
  * markdown-it plugin: turns `{ name.path }` into an inline `html_inline` token
  * whose content comes from the env's `resolveBinding` callback.
@@ -1904,6 +2044,63 @@ function bindingPlugin(mdInstance) {
   });
 }
 
+/**
+ * markdown-it plugin (core rule): a `{.class .class #id}` block immediately
+ * following an inline element (link, image, em/strong, code) attaches those
+ * classes / id to that element. Lets a link be styled as a button without a
+ * wrapper container. The block must directly follow the element (no space), and
+ * `{ … }` interpolation is unaffected (its content starts with a name, not `.`/`#`).
+ * Issue #18.
+ * @param {MarkdownIt} mdInstance
+ * @returns {void}
+ */
+function attrsPlugin(mdInstance) {
+  mdInstance.core.ruler.push("wd_attrs", (state) => {
+    for (const block of state.tokens) {
+      if (block.type !== "inline" || !block.children) continue;
+      const children = block.children;
+      for (let i = 0; i < children.length; i++) {
+        const tok = children[i];
+        if (tok.type !== "text") continue;
+        const m = /^\{([.#][^}]*)\}/.exec(tok.content);
+        if (!m) continue;
+        const target = attrTarget(children, i);
+        if (!target) continue;
+        for (const part of m[1].split(/\s+/).filter(Boolean)) {
+          if (part[0] === ".") target.attrJoin("class", part.slice(1));
+          else if (part[0] === "#") target.attrSet("id", part.slice(1));
+        }
+        tok.content = tok.content.slice(m[0].length);
+      }
+    }
+    return false;
+  });
+}
+
+/**
+ * The inline token an attr block attaches to: the immediately-preceding image
+ * (self-closing) or the open token matching the immediately-preceding close
+ * (link/em/strong/…). Returns null when nothing valid precedes.
+ * @param {any[]} children markdown-it inline child tokens
+ * @param {number} i Index of the attr-block text token.
+ * @returns {any} the matching markdown-it Token, or null
+ */
+function attrTarget(children, i) {
+  const prev = children[i - 1];
+  if (!prev) return null;
+  if (prev.type === "image") return prev;
+  if (prev.nesting === -1) {
+    const openType = prev.type.replace(/_close$/, "_open");
+    let depth = 0;
+    for (let j = i - 1; j >= 0; j--) {
+      const t = children[j];
+      if (t.type === prev.type) depth++;
+      else if (t.type === openType) { depth--; if (depth === 0) return t; }
+    }
+  }
+  return null;
+}
+
 /**
  * Resolve a `{ name.path }` binding to HTML: loop item span, static value, or
  * a reactive bind span. Returns null when nothing in scope matches.