@zvndev/darkmown 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to Darkmown are documented here. Versions follow [semver](https://semver.org); pre-1.0 minor versions may contain breaking changes.
 
+## 0.14.1 — 2026-06-19
+
+Patch-release hardening for page assets, form actions, and release metadata.
+
+- **Security — private page assets stay private.** Page-colocated assets now follow the same hidden-path convention as routes: files or folders under `site/pages/` whose path segment starts with `.`, `-`, or `_` are not copied to `dist`. Symlinked page assets are also skipped, closing the accidental-publication path for `.env`, `_private/*`, `-draft/*`, and symlink-to-outside files. Normal colocated assets such as `site/pages/logo.svg` and `site/pages/blog/cover.png` still emit unchanged.
+- **Security — `:form action=` scheme validation.** Native and round-trip forms now validate `action=` with the same compile-time URL scheme guard as `:fetch`: relative URLs, explicit `http(s)://`, and leading `{ state }` interpolation are allowed; protocol-relative URLs and non-http(s) schemes (`javascript:`, `data:`, `file:`, …) are compile errors.
+- **Release hygiene.** `package-lock.json` package metadata is synced to the release version, so package review no longer reports stale root version drift.
+
 ## 0.14.0 — 2026-06-18
 
 Richer conditionals — `:if` / `:else if` now read the full predicate grammar instead of a bare truthy path only. The reactive runtime is ~5.7 KB gzipped (5762 B), still under the 6 KB CI budget and shipped un-minified.

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
 
@@ -95,6 +96,8 @@ Reference them with a normal URL: `![logo](/__wd/media/logo.svg)`. The preview/`
 - `site/pages/logo.svg` → `dist/logo.svg` → `![logo](/logo.svg)`
 - `site/pages/blog/cover.png` → `dist/blog/cover.png` → `![cover](/blog/cover.png)`
 
+Hidden/private page paths stay private: any `site/pages` asset below a path segment starting with `.`, `-`, or `_` is skipped, and symlinked page assets are never copied. Keep drafts, private notes, and local secrets out of public output by naming them like routes: `.env`, `_private/secret.txt`, or `-draft/notes.txt`.
+
 Use the shelf for assets shared across many pages; colocate the ones that belong to a single page or section. Both ship untouched with the correct content-type.
 
 ## Loops
@@ -487,18 +490,34 @@ 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
 
 :state cart = [] persist
 ```
 
-- `: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 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`.
@@ -517,7 +536,7 @@ Darkmown is a **trusted-author** site generator: you compile content you wrote,
 
 - **Compile only trusted, author-written content.** Do not compile `.md`/`.wd` files you did not write — user-generated content, third-party docs, form input — without sanitizing it first.
 - **Raw HTML passes through by default.** Darkmown runs `markdown-it` with `html: true`, so raw HTML in your content is emitted verbatim — by design, like every Markdown site generator. There is no built-in sanitizer; a raw `<script>` or event-handler attribute in untrusted content would execute in the visitor's browser. A page can opt into strict mode with `html: false` frontmatter, which drops raw HTML entirely.
-- **`:fetch` has no host allowlist, and reactive pages need `unsafe-eval`.** A `:fetch` (or `refresh=`) URL is taken straight from the page source; the compiler rejects non-http(s) schemes but does not restrict which hosts you call, so SSRF protection is the author's responsibility. Reactive pages also require `script-src 'unsafe-eval'` in your Content-Security-Policy, because the runtime compiles validated `:computed` / `@loop … where` / `.class when` expressions via `new Function` — a strict CSP without `unsafe-eval` will break reactive pages (static pages are unaffected).
+- **`:fetch` and `:form action=` have no host allowlist, and reactive pages need `unsafe-eval`.** A fetch/form URL is taken straight from the page source; the compiler rejects non-http(s) schemes but does not restrict which hosts you call, so SSRF/exfiltration protection is the author's responsibility. Reactive pages also require `script-src 'unsafe-eval'` in your Content-Security-Policy, because the runtime compiles validated `:computed` / `@loop … where` / `.class when` expressions via `new Function` — a strict CSP without `unsafe-eval` will break reactive pages (static pages are unaffected).
 
 > **The single biggest footgun:** do not compile untrusted or user-submitted Markdown without sanitizing it first. There is no built-in sanitizer.
 

package/SECURITY.md

@@ -16,7 +16,7 @@ Darkmown is a **trusted-author** static site generator. The threat model assumes
 
 1. **Compile only trusted, author-written content.** Do not compile `.md`/`.wd` files you did not write — user-generated content, third-party docs, or form input — without applying your own sanitization first.
 2. **Raw HTML passes through by default.** `markdown-it` runs with `html: true`, so raw HTML in content is emitted verbatim. There is no built-in sanitizer, so a raw `<script>` or event-handler attribute in untrusted content would execute in the visitor's browser. A page can opt into strict mode with `html: false` frontmatter, which strips raw HTML.
-3. **`:fetch` has no host allowlist, and reactive pages require `unsafe-eval`.** A `:fetch` (or `refresh=`) URL is read directly from the page source; the compiler rejects non-http(s) schemes (`file:`, `data:`, `javascript:`, protocol-relative `//host`) but does not restrict which hosts you call, so SSRF protection is the author's responsibility. Reactive pages also need `script-src 'unsafe-eval'` in your Content-Security-Policy, because the runtime compiles validated `:computed` / `@loop … where` / `.class when` expressions through `new Function`; a strict CSP without `unsafe-eval` breaks reactive pages (static pages are unaffected).
+3. **`:fetch` and `:form action=` have no host allowlist, and reactive pages require `unsafe-eval`.** A `:fetch`, `refresh=`, or `:form action=` URL is read directly from the page source; the compiler rejects non-http(s) schemes (`file:`, `data:`, `javascript:`, protocol-relative `//host`) but does not restrict which hosts you call, so SSRF/exfiltration protection is the author's responsibility. Reactive pages also need `script-src 'unsafe-eval'` in your Content-Security-Policy, because the runtime compiles validated `:computed` / `@loop … where` / `.class when` expressions through `new Function`; a strict CSP without `unsafe-eval` breaks reactive pages (static pages are unaffected).
 
 This is the same trust posture as every Markdown SSG: the framework is safe for the trusted-author use case it targets, and unsafe content is the author's responsibility to sanitize before it reaches the compiler.
 
@@ -27,6 +27,7 @@ Things Darkmown deliberately guards at compile time and runtime:
 - **No arbitrary JavaScript in content files.** Directive actions (`:button -> …`), `:computed` expressions, and `@loop … where` predicates compile through strict whitelisted grammars — only item paths, declared `:state`, numbers, and strings are allowed. Assignment, function calls, and unknown syntax are compile errors. Raw user content is never `eval`'d; what runs at runtime is the *validated* expression, compiled to the whitelisted grammar and executed via `new Function` (see `src/runtime.js`).
 - **Prototype-walk protection.** Path lookups (`{ a.b.c }`, computed expressions) reject `constructor`, `prototype`, and `__proto__` segments in both the compiler and the runtime.
 - **Include sandboxing.** `@include` and `@loop` data sources must resolve inside `site/pages` or `site/_`; traversal outside the site tree is a compile error, and include cycles are detected.
+- **Private page assets stay private.** Page-colocated assets under `site/pages` are copied only when their relative path has no hidden segment (`.`, `-`, or `_`) and is not a symlink. This keeps `.env`, `_private/*`, `-draft/*`, and symlink-to-outside files out of `dist`.
 - **Output escaping.** Interpolated values are HTML-escaped; state scripts escape `<` to prevent script-tag breakout.
 - **Static server path containment.** The dev/preview servers resolve requests strictly inside `dist`.
 

package/docs/spec-alignment.md

@@ -73,6 +73,18 @@ 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.
+- **Release hardening — form action URLs:** `:form action=` now uses the same scheme validation as `:fetch` and `refresh=`. Relative URLs, explicit `http(s)://`, and leading `{ state }` interpolation are allowed; protocol-relative URLs and non-http(s) schemes are compile errors. There is still no host allowlist — backend trust remains the author's deployment concern.
+- **Release hygiene:** root `package-lock.json` package metadata is synced to the release version so tarball review and reproducible install checks do not see stale package identity.
+
 ## Stage 9 additions (2026-06-18, v0.13.0)
 
 Four progressive-disclosure capabilities plus an assets and a security change. The reactive runtime grew to ~5.7 KB gzipped; the CI budget moved 5 KB → 6 KB (still un-minified).
@@ -81,7 +93,7 @@ Four progressive-disclosure capabilities plus an assets and a security change. T
 - **Reactive classes — `::: … .class when <predicate>`:** a container class toggled by a predicate using the `@loop … where` / `:if` whitelist (item fields, `:state`/`:store`, numbers, strings, `==`/`!=`/`>`/`<`/`>=`/`<=`/`contains`, `and`/`or`, plus a bare truthy path). A fully-static predicate folds to a plain class at build time (`runtime: false` preserved); a predicate over `:state` emits a global `data-wd-class`; a loop-item predicate emits `data-wd-each-class` evaluated per row. The predicate compiles to the same whitelisted grammar over `I()`/`S()`/`C()` and runs via `new Function`.
 - **Authenticated fetch + token refresh — `:fetch … headers= refresh=`:** `headers=<stateKey>` (existing) spreads a state object into request headers. New `refresh="<url>"`: on HTTP 401 the runtime POSTs the current headers to the refresh URL, writes the returned headers object back into the `headers` state (persisting if it is a `:store`), and retries the original request once; concurrent 401s sharing a refresh URL collapse to a single in-flight refresh. **Honest caveat:** this is bearer-token-style renewal only — no OAuth authorization-code flow, no refresh-token rotation beyond what the endpoint returns; `refresh=` requires `headers=`.
 - **Effects — `:effect <watched> -> <actions>`:** run the `:button` action vocabulary (`;`-chained) whenever a watched state path changes. Emits a zero-output `data-wd-effect` marker; the runtime snapshots each watched value and, after a render against settled state, runs the actions on change, re-rendering and re-checking up to a 10-pass settle cap (a non-settling effect warns and stops). **Honest caveat:** effects do not fire on initial load (only on change), and row-scoped actions (`append-row`/`remove`) have no clicked row in an effect, so they no-op.
-- **Page-colocated static assets:** any non-page file under `site/pages/` (anything but `.md`/`.wd` routes and colocated `.skin`/`.js`) is copied to `dist/` at its path (`site/pages/logo.svg` → `dist/logo.svg`). The shelf (`site/_/` → `/__wd/media`, `/__wd/data`) is unchanged; a name clash with an emitted route is skipped with a warning. `.avif` was added to the served content-types.
+- **Page-colocated static assets:** any non-page file under `site/pages/` (anything but `.md`/`.wd` routes and colocated `.skin`/`.js`) is copied to `dist/` at its path (`site/pages/logo.svg` → `dist/logo.svg`). The shelf (`site/_/` → `/__wd/media`, `/__wd/data`) is unchanged; a name clash with an emitted route is skipped with a warning. As of v0.14.1, hidden path segments (`.`, `-`, `_`) and symlinked page assets are skipped. `.avif` was added to the served content-types.
 - **`:fetch` URL scheme hardening (security):** `:fetch`/`refresh=` URLs are validated at compile time — relative, `http(s)://`, or a leading `{ state }` interpolation are allowed; protocol-relative `//host` and non-http(s) schemes (`file:`, `data:`, `javascript:`, …) are rejected with a corrective hint. **This is scheme validation, not a host allowlist** — SSRF to arbitrary http(s) hosts remains the author's responsibility (see the trust boundary).
 
 ## Demo-only directives (not part of the public surface)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zvndev/darkmown",
-  "version": "0.14.0",
+  "version": "0.15.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/site/pages/docs/index.wd

@@ -307,7 +307,7 @@ You have { cart } items.
 
 ## Forms and persistence
 
-- `:form into name` captures submits straight into state — no backend. `:form action="/url"` emits a plain native form with zero JS instead.
+- `:form into name` captures submits straight into state — no backend. `:form action="/url"` emits a plain native form with zero JS instead. Form actions follow the same scheme rules as `:fetch`: relative paths, explicit `http(s)://`, or leading `{ state }` interpolation; protocol-relative and non-http(s) schemes are compile errors.
 - `:input field placeholder="…" required` and `:submit "Label"` build the form body.
 - `:state cart = [] persist` survives reloads via localStorage on a single page; use `:store` for state shared across pages and tabs.
 - `:if item.path` works inside reactive loops for per-row branches, and conditionals nest — an inner `:if` resolves after the outer branch, staying reactive.
@@ -321,7 +321,7 @@ Darkmown is a trusted-author site generator: you compile content you wrote, the
 
 - **Compile only content you authored.** Don't run `.md`/`.wd` you didn't write — user-generated content, third-party docs — through the compiler without sanitizing it first.
 - **Raw HTML passes through by default.** Markdown renders with `html: true`, so raw HTML is emitted verbatim and there is no built-in sanitizer. Set `html: false` in a page's frontmatter to drop raw HTML for untrusted content.
-- **`:fetch` has no host allowlist, and reactive pages need `unsafe-eval`.** Fetch URLs come straight from the page source — the compiler rejects non-http(s) schemes but does not restrict which hosts you call, so SSRF is the author's responsibility. The runtime compiles `:computed` / `@loop … where` / `.class when` expressions via `new Function`, so a reactive page needs `script-src 'unsafe-eval'` in your CSP. Static pages need neither.
+- **`:fetch` and `:form action=` have no host allowlist, and reactive pages need `unsafe-eval`.** Fetch/form URLs come straight from the page source — the compiler rejects non-http(s) schemes but does not restrict which hosts you call, so SSRF/exfiltration protection is the author's responsibility. The runtime compiles `:computed` / `@loop … where` / `.class when` expressions via `new Function`, so a reactive page needs `script-src 'unsafe-eval'` in your CSP. Static pages need neither.
 
 See [SECURITY.md](https://github.com/ZVN-DEV/darkmown/blob/main/SECURITY.md) in the package for the full security model.
 
@@ -330,7 +330,7 @@ See [SECURITY.md](https://github.com/ZVN-DEV/darkmown/blob/main/SECURITY.md) in
 - A matching `.skin` file attaches CSS to the page (indentation-based, compiles to real CSS).
 - A matching `.js` file attaches page behavior.
 - Both work for included fragments too, by basename.
-- Any other file under `site/pages/` (an image, font, PDF — anything that isn't a `.md`/`.wd` route or a basename-matched `.skin`/`.js`) copies to `dist/` at its own path with the right content-type. So `site/pages/logo.svg` is served at `/logo.svg`. Use the `site/_/` shelf for assets shared across pages; colocate the ones a single page owns.
+- Any other file under `site/pages/` (an image, font, PDF — anything that isn't a `.md`/`.wd` route or a basename-matched `.skin`/`.js`) copies to `dist/` at its own path with the right content-type. So `site/pages/logo.svg` is served at `/logo.svg`. Assets below hidden path segments (`.`, `-`, or `_`) and symlinked page assets are skipped, matching the routing privacy rule. Use the `site/_/` shelf for assets shared across pages; colocate the ones a single page owns.
 
 ## Spec status
 

package/src/builder.js

@@ -190,6 +190,7 @@ function emitPageAssets(paths) {
     const ext = path.extname(file).toLowerCase();
     if ([".md", ".wd", ".skin", ".js"].includes(ext)) continue;
     const rel = path.relative(paths.routesRoot, file);
+    if (hasHiddenPathSegment(rel) || fs.lstatSync(file).isSymbolicLink()) continue;
     const out = path.join(paths.distRoot, rel);
     if (fs.existsSync(out)) {
       console.warn(`hint: page asset "${rel}" skipped — a built route already emits /${rel.replaceAll(path.sep, "/")}`);
@@ -200,6 +201,17 @@ function emitPageAssets(paths) {
   }
 }
 
+/**
+ * Match the router's hidden-path convention for page-colocated assets too:
+ * anything below a `.`, `-`, or `_` segment is private/draft framework input,
+ * not public output.
+ * @param {string} rel
+ * @returns {boolean}
+ */
+function hasHiddenPathSegment(rel) {
+  return rel.split(path.sep).some((segment) => /^[._-]/.test(segment));
+}
+
 /**
  * @param {string} dir
  * @returns {string[]}

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;
 }
@@ -394,6 +396,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));
@@ -987,7 +1003,7 @@ function compileComputedExpr(raw, ctx) {
  */
 function handleForm(line, bodyLines, ctx) {
   let rest = line.slice(":form".length).trim();
-  const action = rest.match(/action="([^"]+)"/)?.[1];
+  const rawAction = rest.match(/action="([^"]+)"/)?.[1];
   const method = rest.match(/method="([^"]+)"/)?.[1] || "post";
   const into = rest.match(/(?:^|\s)into\s+([A-Za-z_$][\w$]*)/)?.[1];
   const leftover = rest
@@ -995,11 +1011,12 @@ function handleForm(line, bodyLines, ctx) {
     .replace(/method="[^"]+"/, "")
     .replace(/(?:^|\s)into\s+[A-Za-z_$][\w$]*/, "")
     .trim();
-  if ((!action && !into) || leftover) {
+  if ((!rawAction && !into) || leftover) {
     throw new Error(
       `Malformed :form in ${ctx.file}: ${line}. Use ':form into name' (client state), ':form action="/url"' (native post), or both (fetch round-trip into state).`
     );
   }
+  const action = rawAction ? validateFetchUrl(rawAction, ctx, ":form action") : undefined;
   const inner = compileBody(bodyLines, ctx).trim();
   if (!into) {
     return `<form action="${escapeHtml(action)}" method="${escapeHtml(method)}">${inner}</form>`;
@@ -1110,6 +1127,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
@@ -1877,9 +1973,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.
@@ -1903,6 +2041,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.