@zvndev/darkmown 0.16.0 → 0.17.0

package/AGENTS.md

@@ -156,13 +156,16 @@ Your `.skin` selectors must match the **real** output. The emitted HTML is:
 | `::: name .card … :::` (non-`section`) | `<div class="card">…</div>` |
 | `:button "x" -> …` | `<button>x</button>` |
 | `:input email …` | `<input type="…">` |
+| `:textarea note …` | `<textarea>` |
+| `:select name` + `- Label` lines | `<select>` of `<option>`s |
+| `:checkbox name` / `:radio name` + `- Label` lines | labelled `<input type=checkbox\|radio>` group (`:checkbox` captures an **array**, `:radio` one value) |
 | `:bind q placeholder="…"` | `<input>` bound two-way to `:state q` |
 | `:submit "Go"` | `<button type="submit">Go</button>` |
 | `:form …` | `<form>…</form>` |
 | reactive `@loop` of a list | `<ul>`/`<ol>` (or `<div>`) of items |
 | `{ name }` | a text node |
 
-So style with real selectors: `section`, `.card`, `button`, `input`, `form`, `h1`. **To add a class to a container, use `::: name .class`. For any other custom element, write raw HTML `<div class="…">`. There is NO `{.class}` attribute syntax.** A container class can also be reactive: `::: card .on-sale when p.price < 50` toggles the class from a predicate (same grammar as `:if`).
+So style with real selectors: `section`, `.card`, `button`, `input`, `form`, `h1`. **To add a class to a container, use `::: name .class`; to add one to a single inline element (link, image, emphasis, inline code), use a trailing `{.class .class #id}` — e.g. `[Get started](/start/){.btn}`.** A container class can also be reactive: `::: card .on-sale when p.price < 50` toggles the class from a predicate (same grammar as `:if`).
 
 ## Styling with `.skin` — ship this on every page
 

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.17.0 — 2026-06-23
+
+Multi-select and single-choice form groups: **`:checkbox` and `:radio`**.
+
+- **`:checkbox name` and `:radio name`** (each followed by `- Label` option lines) render a labelled group of `<input>`s that share one `name`, wrapped in `<label>`s inside a `role="group"` / `role="radiogroup"` container with a derived aria-label. They join `:input`/`:textarea`/`:select` as `:form into` field directives.
+- **Checkbox groups capture an array.** A `:checkbox` group is marked `data-wd-multi`, and the runtime's submit handler now collects every checked value via `FormData.getAll` instead of collapsing duplicate names to the last one. A `:radio` group captures a single value like `:input`. This is the only runtime change (shipped reactive runtime is 5836 B gzipped, still under the 6 KB budget); everything else is compile-time.
+- Live demo on `/data/` (the inquiry form), and the AGENTS.md inline-`{.class}` note is corrected (it had stale "no `{.class}` syntax" copy from before 0.15.0).
+
 ## 0.16.0 — 2026-06-23
 
 Cross-document **view transitions** return as a per-page opt-in.

package/README.md

@@ -495,6 +495,12 @@ Fetched data and a form live happily on the same page:
 :select topic
 - General
 - Billing
+:checkbox channels
+- Email
+- SMS
+:radio plan
+- Basic
+- Pro
 :textarea note placeholder="Anything else?"
 :submit "Save"
 :endform
@@ -504,7 +510,7 @@ 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`.
+- Field directives: `:input`, `:textarea name [rows=N]`, `:select name`, `:checkbox name`, and `:radio name` (the last three take `- Label` option lines) all capture into `:form into` state the same way. A `:checkbox` group captures **every checked value as an array**; a `:radio` group captures a single value. 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.

package/docs/spec-alignment.md

@@ -79,6 +79,10 @@ Three capability gaps from the 2026-06-16 audit, closed together over a shared `
 - **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 13 additions (2026-06-23, v0.17.0)
+
+- **`:checkbox` and `:radio` field groups:** `:checkbox name` / `:radio name` (with `- Label` option lines) render a labelled `role="group"` / `role="radiogroup"` of `<input>`s that share one `name`, each wrapped in its own `<label>` and deriving an aria-label like the other fields. A `:checkbox` group is marked `data-wd-multi` so the runtime's submit handler collects **every** checked value into an array (`FormData.getAll`) instead of collapsing to the last — the one runtime change (compile-time only otherwise; shipped runtime stays ~5.8 KB). A `:radio` group captures a single value like `:input`. Closes the multi-select / single-choice gap that previously forced raw HTML and lost `:form into` capture.
+
 ## 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.

package/package.json

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

package/site/pages/data.wd

@@ -150,7 +150,7 @@ Scroll me into view and I will load.
 
 ## Richer form controls
 
-`:textarea` and `:select` join `:input`, all captured into the same `:form into` state with no backend:
+`:textarea`, `:select`, `:checkbox`, and `:radio` join `:input`, all captured into the same `:form into` state with no backend. A `:checkbox` group captures every checked value as an **array**; a `:radio` group captures a single value:
 
 :form into inquiry
 :input fullname placeholder="Your full name"
@@ -158,12 +158,18 @@ Scroll me into view and I will load.
 - General question
 - New case
 - Billing
+:checkbox services
+- Cleaning
+- Whitening
+:radio urgency
+- Routine
+- Urgent
 :textarea message placeholder="How can we help?"
 :submit "Send inquiry"
 :endform
 
 :if inquiry
-Thanks **{ inquiry.fullname }** — we logged your "{ inquiry.topic }" note.
+Thanks **{ inquiry.fullname }** — we logged your "{ inquiry.topic }" note. Services: { inquiry.services }. Urgency: { inquiry.urgency }.
 :else
 Pick a topic and send — it is captured client-side, no backend.
 :endif

package/src/compiler.js

@@ -413,6 +413,16 @@ function compileBody(lines, ctx) {
       i = j - 1;
       continue;
     }
+    const choiceMatch = line.match(/^:(checkbox|radio)\s/);
+    if (choiceMatch) {
+      flush();
+      const opts = [];
+      let j = i + 1;
+      while (j < lines.length && /^\s*-\s+/.test(lines[j])) { opts.push(lines[j]); j++; }
+      out.push(handleChoiceGroup(line, opts, ctx, /** @type {"checkbox" | "radio"} */ (choiceMatch[1])));
+      i = j - 1;
+      continue;
+    }
     if (/^:bind\s/.test(line)) {
       flush();
       out.push(handleBind(line, ctx));
@@ -1209,6 +1219,66 @@ function handleSelect(line, optionLines, ctx) {
   return `<select ${attrs.join(" ")}>${opts}</select>`;
 }
 
+/**
+ * `:checkbox name [required]` / `:radio name [required]` followed by `- Label`
+ * lines → a labelled group of `<input type=checkbox|radio>`, each sharing `name`
+ * with value === label and wrapped in its own `<label>`. The group is a
+ * `role="group"` / `role="radiogroup"` container with an aria-label (explicit or
+ * humanized from the name). Checkbox groups are marked `data-wd-multi="name"` so
+ * the runtime captures every checked value as an array (`FormData.getAll`); radio
+ * groups capture a single value like `:input`. Flags: `required` (radio → the
+ * group; not emitted on checkboxes, where "at least one" has no native HTML form),
+ * `disabled` (whole group), `autofocus` (first control).
+ * @param {string} line
+ * @param {string[]} optionLines The following `- Label` lines consumed by dispatch.
+ * @param {Ctx} ctx
+ * @param {"checkbox" | "radio"} kind
+ * @returns {string}
+ */
+function handleChoiceGroup(line, optionLines, ctx, kind) {
+  const directive = `:${kind}`;
+  const match = line.match(kind === "checkbox" ? /^:checkbox\s+([A-Za-z_][\w-]*)\s*(.*)$/ : /^:radio\s+([A-Za-z_][\w-]*)\s*(.*)$/);
+  if (!match) throw new Error(`Malformed ${directive} in ${ctx.file}: ${line}. Use: ${directive} name [required] then "- Label" lines`);
+  const name = match[1];
+  const flags = [];
+  let ariaLabel = null;
+  let ariaDescribedby = null;
+  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 ${directive} flag "${token[3]}" in ${ctx.file}`);
+      }
+      flags.push(token[3]);
+      continue;
+    }
+    const value = stripQuotes(token[2]);
+    if (token[1] === "aria-label") ariaLabel = value;
+    else if (token[1] === "aria-describedby") ariaDescribedby = value;
+    else throw new Error(`Unknown ${directive} attribute "${token[1]}" in ${ctx.file}`);
+  }
+  const options = optionLines.map((l) => l.replace(/^\s*-\s+/, "").trim()).filter(Boolean);
+  if (!options.length) {
+    throw new Error(`${directive} "${name}" in ${ctx.file} has no options. Add "- Label" lines beneath it.`);
+  }
+  const isCheckbox = kind === "checkbox";
+  const groupAttrs = [`class="wd-${isCheckbox ? "checkboxes" : "radios"}"`, `role="${isCheckbox ? "group" : "radiogroup"}"`];
+  if (isCheckbox) groupAttrs.push(`data-wd-multi="${escapeHtml(name)}"`);
+  groupAttrs.push(`aria-label="${escapeHtml(ariaLabel || humanizeName(name))}"`);
+  if (ariaDescribedby) groupAttrs.push(`aria-describedby="${escapeHtml(ariaDescribedby)}"`);
+  const disabled = flags.includes("disabled");
+  const required = flags.includes("required");
+  const autofocus = flags.includes("autofocus");
+  const controls = options.map((opt, idx) => {
+    const a = [`type="${kind}"`, `name="${escapeHtml(name)}"`, `value="${escapeHtml(opt)}"`];
+    if (disabled) a.push("disabled");
+    if (required && !isCheckbox) a.push("required");
+    if (autofocus && idx === 0) a.push("autofocus");
+    return `<label><input ${a.join(" ")}> ${escapeHtml(opt)}</label>`;
+  }).join("");
+  return `<div ${groupAttrs.join(" ")}>${controls}</div>`;
+}
+
 /**
  * @param {string} line
  * @param {Ctx} ctx

package/src/runtime.js

@@ -557,7 +557,14 @@ document.addEventListener("submit", (event) => {
   const action = form.getAttribute("action");
 
   if (!action) {
-    state[key] = Object.fromEntries(new FormData(form));
+    const fd = new FormData(form);
+    const data = /** @type {Record<string, any>} */ (Object.fromEntries(fd));
+    // :checkbox groups share one name; collect every checked value as an array.
+    for (const group of form.querySelectorAll("[data-wd-multi]")) {
+      const field = group.getAttribute("data-wd-multi");
+      if (field) data[field] = fd.getAll(field);
+    }
+    state[key] = data;
     savePersisted();
     render();
     return;