@zvndev/darkmown 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to Darkmown are documented here. Versions follow [semver](https://semver.org); pre-1.0 minor versions may contain breaking changes.
 
+## 1.2.0 — 2026-06-27
+
+Backends, deploy, and rich interactions — all additive. The core runtime is unchanged (still well under the 8 KB budget); the new behavior modules are budgeted separately so static pages stay zero-JS.
+
+- **Serverless `api/` model.** Backend endpoints are plain-JS Web-standard handlers — `export default (request, context) => Response` — in a top-level `api/` directory (`api/echo.js` → `/api/echo`; `api/users/[id].js` → `/api/users/:id`). Darkmown owns no server and adds no backend DSL: it adapts to the host. The build stays 100% static. `darkmown dev` runs a local runner so `/api/*` behaves identically before you deploy; on **Vercel** the functions run natively (Edge); `darkmown build --target cloudflare` emits a `dist/_worker.js` that routes `/api/*` to the same functions and serves the rest from `env.ASSETS`. `form-action 'self'` was added to both CSP variants (and `vercel.json`) so a native `:form action="/api/…"` POST is allowed.
+- **Templates + deploy CLI.** `darkmown init --template <starter|blog|store|dashboard|landing>` scaffolds from in-package templates — each a real, deployable site (`store`/`dashboard` ship an example `api/` function). `darkmown deploy <vercel|cloudflare> [--prod]` writes platform config, runs a target-aware build, wraps the platform CLI (`npx vercel` / `npx wrangler pages deploy`), and prints the deploy URL; an unauthenticated CLI surfaces the login to run.
+- **Interaction behaviors (pay-for-what-you-use).** `:slider name = v min max step` is compile-time only — a range input bound through `:bind` (range values coerce to Number), shipping **no** JS. `:sortable` (a `@loop` clause) and `:carousel` compile to tiny `/__wd/behaviors/<name>.js` modules injected **only** on the pages that use them, budgeted **separately** from the core runtime in `.size-snapshot.json`. `:sortable` drag-reorders a plain reactive `:state`/`:store` loop via Pointer Events + Arrow keys through the public `window.wd` API; `:carousel` uses native CSS scroll-snap plus prev/next, dots, autoplay, and mouse drag. New `/interactions/` demo page.
+- **Review hardening (a11y + backend).** Drag/keyboard feedback and focus now target the author's styled row (not the loop wrapper), so the dragging style and focus ring actually show; keyboard reorder gains screen-reader instructions, `aria-posinset`/`aria-setsize`, and a live "Moved to position N of M" announcement. The carousel drops an incomplete `tablist`/`tab` role for plain buttons with `aria-current`, suppresses autoplay under `prefers-reduced-motion` (and pauses when the tab is hidden). The dev API runner preserves multiple `Set-Cookie` headers (no comma-fold), matching production; `darkmown deploy` recognizes wrangler's real auth-failure wording and strips trailing punctuation from parsed URLs; the build warns on `api/` route collisions and on bare npm imports in Cloudflare advanced-mode handlers (which ship without a bundler).
+
+## 1.1.0 — 2026-06-27
+
+Follow-up to 1.0: turn the two rough edges flagged at release into real fixes. No runtime change (still ~7.4 KB gzipped).
+
+- **Multi-line `:state` / `:store` / `:theme` values.** An array or object seed may now span several lines for readability — open the `[`/`{` on the directive line and let it run until it balances:
+
+  ```wd
+  :store rows = [
+    {"id": 1, "label": "One"},
+    {"id": 2, "label": "Two"}
+  ]
+  ```
+
+  1.0 made the old silent-corruption case (the literal stored verbatim as the string `"["`) a compile error; 1.1 makes the readable multi-line form actually *work*. The compiler joins the balanced literal (string- and escape-aware bracket counting) into one line before parsing. The literal must balance with no blank line inside it; an unterminated literal stays a clear compile error. Quote genuinely literal bracket text (`:state tag = "[draft]"`). The Ledger demo's seed data is now written this way.
+- **Single source of truth for the runtime-size budget (internal).** The gzip budget had drifted into four hardcoded copies (`package.json`, `scripts/size-check.mjs`, `.github/workflows/ci.yml`, `tests/size.test.js`) — a mismatch in `ci.yml` failed the 1.0 PR. The budget now lives only in `.size-snapshot.json` (`runtime.budget`); `scripts/size-check.mjs` reads it and everything else delegates to that script. A `tests/size.test.js` drift guard fails if any config reintroduces a hardcoded budget or an inline size gate.
+
 ## 1.0.0 — 2026-06-27
 
 The 1.0 release. The directive surface is now stable, and this version closes the biggest "I'd have to drop to raw HTML/JS for that" gaps an audit found — display formatting, time, an explicit theme toggle, live table sort, media, and a real escape hatch — while holding the zero-JS-by-default promise. Six additions, all either compile-time or sharing the one runtime, which moves from ~5.8 KB to **~7.4 KB gzipped**; the CI budget is raised 6 KB → **8 KB** to match (still un-minified, fully commented). No source-level breaking changes: existing `.wd` pages compile and behave identically.

package/README.md

@@ -50,9 +50,10 @@ npm run dev     # live demo site — the same site that runs darkmown.com
 
 ## Commands
 
-- `darkmown init [dir]` scaffolds a new site.
-- `darkmown dev` starts the live compiler with browser reload and an in-browser error overlay when a build fails.
-- `darkmown build` writes static output to `dist`.
+- `darkmown init [dir] [--template <name>]` scaffolds a new site from a template (`starter`, `blog`, `store`, `dashboard`, `landing`).
+- `darkmown dev` starts the live compiler with browser reload, an in-browser error overlay, and a local runner for `api/*` functions.
+- `darkmown build [--target cloudflare]` writes static output to `dist`.
+- `darkmown deploy <vercel|cloudflare> [--prod]` builds and deploys via the platform CLI.
 - `darkmown serve` previews the built `dist` locally.
 - `darkmown version` prints the installed package version.
 - `darkmown help` prints CLI usage.
@@ -556,6 +557,16 @@ You have { cart } items.
 - **Shared across tabs.** Change a store in one tab and every other tab on the same site updates live.
 - **Global by name.** A bare `{ cart }` reads the same store everywhere — stores are never section-scoped.
 - **Same value grammar as `:state`** — string, number, boolean, `null`, array, or object — and the **same** button actions (`cart += …`, `count++`, `theme = "dark"`, and so on).
+- **Multi-line seeds.** An array or object literal may span several lines for readability — open the `[`/`{` on the `:store`/`:state` line and let it run until it closes:
+
+  ```wd
+  :store rows = [
+    {"id": 1, "label": "One"},
+    {"id": 2, "label": "Two"}
+  ]
+  ```
+
+  The literal must balance with no blank line inside it (a blank line ends the value); an unterminated literal is a compile error. Quote genuinely literal bracket text — `:state tag = "[draft]"`.
 
 The declared value is a **seed**: it is used only the first time, when the store is absent from storage. After that the persisted value wins, so visitors keep their data.
 
@@ -605,6 +616,56 @@ Fetched data and a form live happily on the same page:
 - `:computed total = items.length * 4` derives state from state with a compile-time-checked expression — names, numbers, arithmetic, comparisons, and list aggregates (`sum`/`avg`/`min`/`max`/`count`). See [Computed values](#computed-values--computed).
 - `:if item.path` works inside reactive loops for per-row branches, and nests — an inner `:if` resolves after the outer branch and stays reactive.
 
+## Backends & deploy
+
+Darkmown builds **100% static, CDN-cacheable HTML** — never per-request server rendering. Reactive pages hydrate from data-attributes client-side; dynamic data arrives via `:fetch`. When you need a backend, you don't learn a new syntax — you write a plain serverless function, and *it just comes with wherever you deploy*.
+
+A backend endpoint is a plain-JS Web-standard handler in a top-level `api/` directory:
+
+```js
+// api/subscribe.js  →  /api/subscribe
+export const config = { runtime: "edge" }; // Vercel runs api/ as Edge Functions
+
+export default async function (request, context) {
+  const { email } = await request.json();      // context.params for /api/users/[id]
+  return Response.json({ ok: true, email });
+}
+```
+
+- **One shape, every host.** `export default (request) => Response` is exactly what Vercel Edge, Cloudflare Pages, and Netlify Edge run. `api/users/[id].js` → `/api/users/:id`.
+- **Local parity.** `darkmown dev` runs a local runner, so `:fetch /api/subscribe` and `:form action="/api/subscribe"` behave the same as production before you ever deploy.
+- **Deploy in one command.** `darkmown deploy vercel` (functions run natively) or `darkmown deploy cloudflare` (the build emits a `dist/_worker.js` that routes `/api/*` and serves the rest from `env.ASSETS`). It prints your URL, or the login to run if the platform CLI isn't signed in.
+- **Custom server / remote backend.** Point `:fetch`/`:form` at an absolute `https://…` URL and widen the CSP `connect-src` (and `form-action` for native form POSTs). Darkmown owns no server — it adapts to yours.
+
+Templates get you to a running, deployable app fast: `darkmown init shop --template store` ships a cart **and** an `api/checkout.js`; `--template dashboard` ships a `:fetch` view **and** an `api/metrics.js`.
+
+## Interactions — `:slider`, `:sortable`, `:carousel`
+
+Rich interactions are **pay-for-what-you-use**: `:sortable`/`:carousel` compile to a tiny `/__wd/behaviors/<name>.js` module injected **only** on pages that use them, budgeted separately from the ≤8 KB core runtime. `:slider` is compile-time only — zero extra JS.
+
+```wd
+:slider volume = 50 min=0 max=100 step=5
+Volume: { volume }
+
+:store tasks = ["Draft", "Review", "Ship"]
+@loop tasks into t sortable
+- { t }
+@endloop
+
+:carousel autoplay=4000
+::: slide
+First slide
+:::
+::: slide
+Second slide
+:::
+:endcarousel
+```
+
+- **`:slider name = v min max step`** renders a range input two-way bound through `:bind`; range values coerce to Number so `:computed`/math see a number. Ships no behavior module.
+- **`:sortable`** (a `@loop` clause) drag-reorders the underlying `:state`/`:store` list via Pointer Events (mouse + touch), with full keyboard support (Arrow Up/Down on a focused row, screen-reader instructions + a live "Moved to position N of M" announcement), rewriting the list through the public `window.wd` API so the keyed loop repaints. Valid only on a plain reactive loop (no `where`/`sort`/`reverse`/`offset`/`limit`).
+- **`:carousel [autoplay=N]`** treats **each direct child block as one slide** (wrap each in its own block, e.g. `::: slide`, and size it in your skin), using native CSS scroll-snap (touch swipe is free) plus prev/next buttons, dot navigation, and mouse drag. `autoplay` is suppressed under `prefers-reduced-motion`.
+
 ## 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:

package/docs/cli.md

@@ -20,18 +20,21 @@ Prints the command summary, authoring directories, and common directive syntax.
 
 Prints the installed package version.
 
-### `darkmown init [dir]`
+### `darkmown init [dir] [--template <name>]`
 
-Creates a minimal Darkmown site with:
+Scaffolds a Darkmown site from a template (default: `starter`). Available templates:
 
-- `package.json` (pins the current `@zvndev/darkmown` version)
-- `site/pages/index.wd`
-- `site/pages/index.skin`
-- `site/pages/about.md`
-- `site/_/nav.wd`
-- `README.md`
+- **`starter`** — the minimal counter + todo-loop site.
+- **`blog`** — markdown posts + a `.wd` index that loops a JSON manifest.
+- **`store`** — product grid, a shared `:store` cart, and a checkout that posts to `api/checkout.js`.
+- **`dashboard`** — stat cards that `:fetch` from `api/metrics.js`.
+- **`landing`** — a marketing one-pager with a `:carousel`.
 
-Existing files are not overwritten. The scaffolded `package.json` is private by default, includes `dev`, `build`, and `preview` scripts, and names the app after the target directory.
+```sh
+darkmown init my-site --template store
+```
+
+Existing files are never overwritten. The generated `package.json` is private, sets `"type": "module"` (so `api/*.js` import as ESM), includes `dev`/`build`/`preview` scripts, and names the app after the target directory.
 
 After scaffolding:
 
@@ -52,17 +55,28 @@ Runs a live compiler:
 - injects `/__wd/dev-client.js`
 - reloads the browser through `/__wd/dev-events`
 
-### `darkmown build`
+### `darkmown build [--target cloudflare]`
+
+Compiles `site/pages` into `dist`. The output is always 100% static HTML.
 
-Compiles `site/pages` into `dist`.
+Static pages do not receive `/__wd/runtime.js`; reactive pages do. Pay-for-what-you-use behavior modules (`:sortable`, `:carousel`) emit to `dist/__wd/behaviors/` only on the pages that use them.
 
-Static pages do not receive `/__wd/runtime.js`; reactive pages do.
+`--target cloudflare` additionally emits `dist/_worker.js` — a Cloudflare Pages worker that routes `/api/*` to the project's `api/*.js` functions and serves everything else from `env.ASSETS`. The default target leaves `api/` for Vercel to run natively. `darkmown deploy` sets the right target automatically.
 
 When a `.md` file contains `.wd` syntax (directives, includes, loops), the build prints a hint suggesting a rename to `.wd` — the syntax stays plain text in `.md` by design.
 
+### `darkmown deploy <vercel|cloudflare> [--prod]`
+
+Builds (target-aware) and deploys to the platform by wrapping its CLI:
+
+- **`vercel`** — writes a `vercel.json` if absent, then runs `npx vercel deploy` (`--prod` to promote). `api/` functions run natively as Edge Functions.
+- **`cloudflare`** — builds the `dist/_worker.js`, then runs `npx wrangler pages deploy dist --project-name <name>`.
+
+The deploy URL is printed when the CLI reports it. If the platform CLI isn't signed in, the command surfaces the login to run (`npx vercel login` / `npx wrangler login`) — in a Claude Code session you can run it inline with the `!` prefix — then re-run the deploy.
+
 ### `darkmown serve`
 
-Serves the already-built `dist` directory for local preview. Run `darkmown build` first.
+Serves the already-built `dist` directory for local preview (static only — use `darkmown dev` to exercise `api/*` locally). Run `darkmown build` first.
 
 ## Smoke checks
 
@@ -74,8 +88,24 @@ npm run smoke
 
 The smoke script packs the local tarball, installs the packed CLI in a temporary driver project, scaffolds a consumer app through that installed bin, installs the same tarball into the app, builds it, verifies the reactive home route, and verifies the plain `.md` about route stays zero-JS.
 
-## Deployment notes
+## Backends (`api/`)
+
+Backend endpoints are plain-JS Web-standard handlers in a top-level `api/` directory — the same shape on every host, and the only thing you write for a server:
+
+```js
+// api/subscribe.js  →  /api/subscribe
+export const config = { runtime: "edge" }; // Vercel: run as an Edge Function
+
+export default async function (request, context) {
+  const { email } = await request.json();
+  return Response.json({ ok: true, email });
+}
+```
+
+`api/users/[id].js` maps to `/api/users/:id` (`context.params.id`). These run in `darkmown dev` (local runner), on **Vercel** natively, and on **Cloudflare Pages** via the `dist/_worker.js` that `darkmown deploy cloudflare` emits. `:fetch`/`:form` point at `/api/*` with no extra config. Need a Node-only API on Vercel? Drop `export const config` and use `(req, res)` — note local-dev parity is then lost for that function.
+
+**Custom server / remote backend.** Point `:fetch`/`:form` at an absolute URL (`https://api.example.com/…`) and widen the CSP `connect-src` (and `form-action` for native form POSTs) in `vercel.json` / `dist/_headers` / your serve config. Darkmown still ships static; only the requests leave your origin.
 
-### Cloudflare Pages
+### Cloudflare Pages note
 
-`wrangler.toml` builds and deploys the static `dist/` output for Cloudflare Pages. That configuration does **not** provide the demo `/__wd/echo` endpoint used by server-backed form examples; Vercel handles that route separately through `vercel.json` and `api/echo.js`. Add a Cloudflare Pages Function before advertising that demo endpoint on Cloudflare.
+Cloudflare advanced mode (`dist/_worker.js`) does not run a bundler, so an `api/` handler deployed to Cloudflare must be dependency-free (or pre-bundled). The same source still runs on Vercel (which bundles) and in `darkmown dev`.

package/docs/spec-alignment.md

@@ -41,7 +41,7 @@ This audit compares the current Darkmown implementation with the original MARROW
 
 ## Stage 5 additions (2026-06-11, same day)
 
-- **Adapter-style Tier 2 (decided):** Darkmown does not own a server. `:form action="/url" into reply` posts urlencoded via fetch and lands the JSON reply in state, degrading to a plain native POST without JS. Sessions ride on `:fetch` plus ordinary cookies against any backend. A first-party `site/api/` runtime stays open as a future option if a real project demands it.
+- **Adapter-style Tier 2 (decided):** Darkmown does not own a server. `:form action="/url" into reply` posts urlencoded via fetch and lands the JSON reply in state, degrading to a plain native POST without JS. Sessions ride on `:fetch` plus ordinary cookies against any backend.
 - **Dev error overlay:** failed rebuilds render the compiler error in the browser; the overlay clears on the next good build.
 - **`darkmown serve`:** local preview of the built `dist`, no dev client injected.
 - **Packaging:** v0.3.0 introduced package metadata and pack tests; the current public package is MIT licensed and scaffolded projects pin the live Darkmown version.
@@ -93,6 +93,13 @@ The post-8/10-review sprint: one reactive-loop capability, a deploy-hardening la
 - **Dark-mode theming — `tokens dark`:** a `.skin` file may add a `tokens dark` block alongside its base `tokens`; the dark tokens compile to `@media (prefers-color-scheme: dark) :root { … }`, overriding the matching base tokens under the visitor's OS dark preference. Rules keep referencing the same `$name` tokens, so dark mode is a palette swap with **zero JavaScript** — consistent with the existing zero-JS `.skin` output. A skin with no `tokens dark` block is unchanged.
 - **Test backfill + compile-error line numbers:** the sprint backfilled runtime/compiler tests for the new surface, and compile errors now carry the offending **line number** alongside the file path and corrective suggestion. **Honest caveat:** this entry documents the intended sprint scope; the exact assertion count and the precise error-message format are owned by the test/compiler tracks and were not verified from this docs track.
 
+## Stage 17 additions (2026-06-27, v1.1.0)
+
+Follow-up hardening of the two rough edges flagged at the 1.0 release. No runtime change.
+
+- **Multi-line `:state`/`:store`/`:theme` JSON values:** an array/object seed may span lines. `body.js` detects an unbalanced `[`/`{` after `=` on the directive line and gathers contiguous continuation lines (stopping at a blank line, which delimits the literal) until the brackets balance — string- and escape-aware so a `]`/`}` or `\"` inside a JSON string is not miscounted — then collapses them to one line the existing single-line handler parses. 1.0 turned the silent `"["` corruption into a compile error; 1.1 makes the readable multi-line form work. An unterminated literal stays a clear compile error; quote literal bracket text. **Honest caveat:** no blank lines inside the literal (a blank line ends the scan), and the opening bracket must be on the directive line.
+- **Single source of truth for the runtime-size budget (internal):** the gzip ceiling lives only in `.size-snapshot.json` (`runtime.budget`); `scripts/size-check.mjs` reads it and `package.json` + `ci.yml` delegate to that script. A `tests/size.test.js` drift guard fails if any config reintroduces a hardcoded budget or inline gate — closing the class of bug that failed the 1.0 PR (a stale `6144` left in `ci.yml`).
+
 ## Stage 16 additions (2026-06-27, v1.0.0)
 
 The 1.0 release: a value layer, a time primitive, an explicit theme toggle, reactive table sort, media, and a first-class escape hatch — the gaps an audit flagged as "drop to raw HTML/JS." All compile-time or shared-runtime; the runtime moved from ~5.8 KB to ~7.4 KB gzipped and the CI budget was raised 6 KB → **8 KB** to match (still un-minified). No source-level breaking changes.
@@ -127,13 +134,19 @@ Four progressive-disclosure capabilities plus an assets and a security change. T
 - **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).
 
+## 1.2.0 additions — backends, deploy & interactions (2026-06-27)
+
+- **Serverless `api/` model:** backend endpoints are plain-JS Web-standard handlers — `export default (request, context) => Response` — in a top-level `api/` directory (`api/echo.js` → `/api/echo`; `api/users/[id].js` → `/api/users/:id` with `context.params.id`). Darkmown owns no server; it *adapts* to the host. The build stays 100% static. On Vercel the `api/` functions run natively (Edge); `darkmown deploy cloudflare` (or `build --target cloudflare`) emits `dist/_worker.js` that routes `/api/*` to the same functions and serves everything else from `env.ASSETS`. `darkmown dev` runs a local runner so `/api/*` behaves identically before deploy. No `.wd` backend DSL — minimal new learning, zero lock-in. `form-action 'self'` was added to both CSP variants (and `vercel.json`) so a native `:form action="/api/…"` POST is allowed.
+- **Templates + deploy CLI:** `darkmown init --template <starter|blog|store|dashboard|landing>` scaffolds from in-package templates (each a real, deployable site; `store`/`dashboard` ship an example `api/` function). `darkmown deploy <vercel|cloudflare> [--prod]` writes platform config, runs a target-aware build, and wraps the platform CLI (`npx vercel` / `npx wrangler pages deploy`), printing the deploy URL; an unauthenticated CLI surfaces a login hint.
+- **Interaction behaviors (pay-for-what-you-use):** `:slider name = v min max step` is compile-time only — a range input bound through `:bind` (range values coerce to Number), ships **no** JS module. `:sortable` (a `@loop` clause) and `:carousel` compile to tiny `/__wd/behaviors/<name>.js` modules injected **only** on pages that use them, built on the public `window.wd` API. They are budgeted **separately** from the 8 KB core runtime (each in `.size-snapshot.json`), so core stays untaxed. `:sortable` requires a plain reactive `:state`/`:store` loop (no where/sort/reverse/offset/limit) and reorders via Pointer Events + keyboard; `:carousel` uses native CSS scroll-snap plus prev/next/dots/autoplay/mouse-drag.
+
 ## Demo-only directives (not part of the public surface)
 
-The compiler recognizes three directives — `:note`, `:try`, and `:sprint` — that exist **only to power the demo site** (darkmown.com). They are **not** part of the supported public directive set, are not documented for authors, and may change or be removed without notice. Do not build pages that depend on them. The supported public directives are the ones catalogued above: `:state`, `:store`, `:computed`, `:effect`, `:every`, `:theme`, `:button`, `:bind`, `:if`/`:else if`/`:else`/`:endif`, `:fetch` (with `headers`/`refresh`), `:form`/`:input`/`:submit`, `:video`/`:audio`/`:embed`, `@loop`/`@empty`/`@endloop` (with `where`, `sort by` — including reactive `{ state }` keys —, `reverse`, `offset`, `limit`), `@include`, and `::: section` (with reactive `.class when`). Interpolation supports **format pipes** (`{ value | name:arg }`) and `:computed`/list-pipe **aggregates** (`sum`/`avg`/`min`/`max`/`count`). The runtime escape hatch is `window.wd` (`get`/`set`/`subscribe`/`state`/`render`).
+The compiler recognizes three directives — `:note`, `:try`, and `:sprint` — that exist **only to power the demo site** (darkmown.com). They are **not** part of the supported public directive set, are not documented for authors, and may change or be removed without notice. Do not build pages that depend on them. The supported public directives are the ones catalogued above: `:state`, `:store`, `:computed`, `:effect`, `:every`, `:theme`, `:button`, `:bind`, `:if`/`:else if`/`:else`/`:endif`, `:fetch` (with `headers`/`refresh`), `:form`/`:input`/`:submit`, `:slider`, `:carousel`, `:video`/`:audio`/`:embed`, `@loop`/`@empty`/`@endloop` (with `where`, `sort by` — including reactive `{ state }` keys —, `reverse`, `offset`, `limit`, `sortable`), `@include`, and `::: section` (with reactive `.class when`). Interpolation supports **format pipes** (`{ value | name:arg }`) and `:computed`/list-pipe **aggregates** (`sum`/`avg`/`min`/`max`/`count`). The runtime escape hatch is `window.wd` (`get`/`set`/`subscribe`/`state`/`render`).
 
 ## 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.
+- HTML-fragment `swap` semantics and cart server sync — still parked. (The serverless `api/` model shipped in 1.2; a `.wd` backend DSL remains a deliberate non-goal.)
 - **View transitions:** named/typed transitions (`view-transition-name`, per-element morphs) and `@starting-style` emission, on top of the directional fade + speculation-rules prerender shipped in 0.18.0 (see Stage 4 / Stage 14).
 - 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.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zvndev/darkmown",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -18,7 +18,7 @@
   "types": "./types/index.d.ts",
   "scripts": {
     "build": "node src/cli.js build",
-    "runtime:size": "node -e \"const fs=require('fs'),zlib=require('zlib'); const size=zlib.gzipSync(fs.readFileSync('dist/__wd/runtime.js')).length; console.log('shipped runtime gzipped: '+size+' bytes (budget: 8192)'); if (size >= 8192) process.exit(1)\"",
+    "runtime:size": "node scripts/size-check.mjs",
     "dev": "node src/cli.js dev",
     "test": "node --test tests/*.test.js",
     "test:cov": "node scripts/test-coverage-gate.mjs 100",

package/site/_/roadmap.json

@@ -2,6 +2,8 @@
   { "id": "loops", "title": "Nested `:if` inside loop rows", "shipped": true, "blocked": false },
   { "id": "editor", "title": "VS Code syntax highlighting", "shipped": true, "blocked": false },
   { "id": "filter", "title": "Reactive `@loop where` filtering", "shipped": true, "blocked": false },
-  { "id": "api", "title": "First-party site/api/ runtime", "shipped": false, "blocked": true },
+  { "id": "api", "title": "Serverless `api/` model + local-dev runner", "shipped": true, "blocked": false },
+  { "id": "deploy", "title": "`init --template` + `darkmown deploy` CLI", "shipped": true, "blocked": false },
+  { "id": "behaviors", "title": "Interaction behaviors (`:slider`/`:sortable`/`:carousel`)", "shipped": true, "blocked": false },
   { "id": "swap", "title": "HTML-fragment swap responses", "shipped": false, "blocked": false }
 ]

package/site/pages/app.wd

@@ -70,7 +70,7 @@ Nice — you are tracking the whole near-term roadmap.
 
 This form posts to the demo echo endpoint and shows the reply. With JavaScript it is a `fetch`; without it, the exact same markup is a native POST. On Vercel/dev the sample endpoint replies; on static-only hosts, point `action=` at your own backend — Darkmown adapts instead of owning one:
 
-:form action="/__wd/echo" into reply
+:form action="/api/echo" into reply
 :input note placeholder="Tell us what you'd build with this"
 :submit "Send to the server"
 :endform

package/site/pages/data.wd

@@ -95,7 +95,7 @@ Submit the form and this sentence reacts. Nothing leaves the page.
 
 Darkmown does not own your backend — point a form at any endpoint. With JS, the submit becomes a fetch and the JSON reply lands in state; without JS, the same markup is a plain native POST:
 
-:form action="/__wd/echo" into reply
+:form action="/api/echo" into reply
 :input message placeholder="Say something to the server"
 :submit "Send to server"
 :endform
@@ -110,7 +110,7 @@ The reply will appear here.
 The request failed: { reply_error }
 :endif
 
-In `darkmown dev` the echo endpoint is built into the dev server; on darkmown.com it is a real serverless function behind the same URL. On static-only hosts such as a plain Cloudflare Pages deploy, replace `action="/__wd/echo"` with your own API endpoint. Either way, Darkmown itself stays static — sessions ride on `:fetch` plus ordinary cookies against your real API.
+In `darkmown dev` the echo endpoint is built into the dev server; on darkmown.com it is a real serverless function behind the same URL. On static-only hosts such as a plain Cloudflare Pages deploy, replace `action="/api/echo"` with your own API endpoint. Either way, Darkmown itself stays static — sessions ride on `:fetch` plus ordinary cookies against your real API.
 
 ## Persistent state survives reload
 

package/site/pages/docs/index.wd

@@ -349,6 +349,7 @@ You have { cart } items.
 - Saved to localStorage under `wd:store:<name>` and reloaded on the next visit; changes sync live to other open tabs.
 - The declared value is a **seed**, used only the first time — afterward the persisted value wins.
 - Same value grammar and the same button actions as `:state`.
+- An array/object seed may span **multiple lines** for readability — open the `[`/`{` on the directive line and let it run until it closes (no blank line inside; an unterminated literal is a compile error). Quote literal bracket text: `:state tag = "[draft]"`.
 - Add `ephemeral` for an in-memory store that resets on reload: `:store sidebarOpen = false ephemeral`.
 
 ## Forms and persistence
@@ -361,6 +362,27 @@ You have { cart } items.
 
 See it all live on the [Data & Forms page](/data/).
 
+## Backends & deploy
+
+Darkmown builds 100% static HTML — never per-request rendering. When you need a server, you write a plain serverless function; there is no Darkmown backend syntax to learn.
+
+- A backend endpoint is a Web-standard handler in a top-level `api/` directory: `export default (request, context) => Response`. `api/echo.js` → `/api/echo`; `api/users/[id].js` → `/api/users/:id`.
+- One shape runs everywhere: `darkmown dev` (local runner), Vercel (native Edge Functions), and Cloudflare Pages (the build emits a `dist/_worker.js`). `:fetch`/`:form` point at `/api/*` with no extra config.
+- `darkmown deploy vercel` or `darkmown deploy cloudflare` builds and ships in one command, printing your URL.
+- For a remote/custom backend, point `:fetch`/`:form` at an absolute URL and widen the CSP `connect-src` / `form-action`. Darkmown owns no server — it adapts to yours.
+
+`darkmown init shop --template store` scaffolds a cart **and** its `api/checkout.js`; `--template dashboard` ships a `:fetch` view **and** `api/metrics.js`.
+
+## Interactions — `:slider`, `:sortable`, `:carousel`
+
+Pay-for-what-you-use: `:sortable`/`:carousel` compile to a tiny `/__wd/behaviors/*.js` module loaded only where used, budgeted separately from the ≤8 KB core runtime. `:slider` is compile-time only.
+
+- `:slider name = v min=0 max=100 step=5` — a range input bound through `:bind`; range values coerce to Number.
+- `:sortable` (a `@loop` clause) — drag-to-reorder a `:state`/`:store` list via Pointer Events, with keyboard (Arrow Up/Down) + screen-reader announcements; valid on a plain reactive loop only.
+- `:carousel [autoplay=N]` — each direct child block is one slide (wrap each in its own block, e.g. `::: slide`); native scroll-snap plus prev/next, dots, and mouse drag. Autoplay respects `prefers-reduced-motion`.
+
+See all three live on the [Interactions page](/interactions/).
+
 ## Theme toggle — `:theme`
 
 For an explicit light/dark switch alongside the OS preference, declare `:theme` once and drive it with buttons. It registers a durable `theme` store and reflects onto `<html data-theme>`:

package/site/pages/folio/cart.wd

@@ -106,7 +106,7 @@ Tax (8%)
 
 This is a real form. With the runtime it posts over `fetch` and shows the reply inline; with JavaScript off, the identical markup degrades to a native POST. The demo endpoint simply echoes your order back.
 
-:form action="/__wd/echo" into receipt
+:form action="/api/echo" into receipt
 :input name placeholder="Full name" required
 :input email type=email placeholder="you@studio.com" required
 :select shipping
@@ -172,7 +172,7 @@ Total with tax — **{ total | money }**
 
 :button "Clear basket" -> cart clear
 
-:form action="/__wd/echo" into receipt
+:form action="/api/echo" into receipt
 :input name placeholder="Full name" required
 :input email type=email placeholder="you@studio.com" required
 :select shipping

package/site/pages/forge/index.wd

@@ -247,7 +247,7 @@ A month-to-month list price would run **${ annual }/yr**. Choose yearly at check
 Drop in your details and we'll spin up your **${ total }/mo** workspace — no charge for 14 days.
 
 ::: div .checkout-card
-:form action="/__wd/echo" into receipt
+:form action="/api/echo" into receipt
 :input name placeholder="Your name"
 :input email placeholder="Work email"
 :submit "Start 14-day trial"

package/site/pages/interactions/index.skin

@@ -0,0 +1,113 @@
+main.app-interactions
+  max-width 760px
+  margin 0 auto
+  padding 2.5rem 1.5rem
+
+.ix-eyebrow
+  text-transform uppercase
+  letter-spacing .08em
+  font-size .8rem
+  opacity .7
+
+.ix-tagline
+  font-size 1.05rem
+  opacity .85
+  margin-top .5rem
+
+.ix-panel
+  margin 1.5rem 0
+  padding 1.5rem
+
+.ix-panel h2
+  margin-top 0
+
+.ix-note
+  margin-top 1rem
+  font-size .9rem
+  opacity .7
+
+.readout
+  margin-top .75rem
+  font-size 1.1rem
+
+input[type=range]
+  width 100%
+  accent-color $accent
+
+.sortlist .row
+  display flex
+  align-items center
+  gap .6rem
+  padding .7rem .9rem
+  margin .4rem 0
+  border 1px solid $line
+  radius 10px
+  background $paper
+  cursor grab
+  user-select none
+
+.sortlist .row[data-wd-dragging]
+  opacity .6
+  cursor grabbing
+
+.sortlist .row:focus-visible
+  outline 2px solid $accent
+  outline-offset 2px
+
+.grip
+  color $muted
+  font-size 1.1rem
+
+.wd-carousel
+  position relative
+  margin-top .5rem
+
+.wd-carousel-track
+  display flex
+  overflow-x auto
+  scroll-snap-type x mandatory
+  scroll-behavior smooth
+  gap 1rem
+
+.wd-carousel-track .slide
+  flex 0 0 100%
+  scroll-snap-align start
+  border 1px solid $line
+  radius 12px
+  padding 1.75rem
+  background $paper
+
+.wd-carousel-prev, .wd-carousel-next
+  position absolute
+  top 40%
+  border 1px solid $line
+  background $paper
+  color $ink
+  radius 999px
+  width 2.25rem
+  height 2.25rem
+  cursor pointer
+
+.wd-carousel-prev
+  left -.5rem
+
+.wd-carousel-next
+  right -.5rem
+
+.wd-carousel-dots
+  display flex
+  justify-content center
+  gap .5rem
+  margin-top .75rem
+
+.wd-carousel-dot
+  width .6rem
+  height .6rem
+  padding 0
+  border 0
+  radius 999px
+  background $line
+  cursor pointer
+
+.wd-carousel-dot[aria-current=true]
+  background $accent

package/site/pages/interactions/index.wd

@@ -0,0 +1,86 @@
+---
+title: Interactions — sliders, drag & carousels in Markdown
+description: :slider, :sortable, and :carousel — rich interactions that compile to tiny pay-for-what-you-use modules, declared in plain Markdown. Sliders ship zero JS; sortable and carousel each load one small module, only on the pages that use them.
+image: https://darkmown.com/__wd/media/og-showcase.png
+transitions: true
+---
+
+@include /nav.wd
+@include /base.wd
+
+<main class="wide app-interactions">
+
+::: section #interactions
+
+::: ix-head
+::: eyebrow .ix-eyebrow
+Pay-for-what-you-use interactions
+:::
+
+# *Interactions*
+
+::: ix-tagline
+A range slider, drag-to-reorder, and a carousel — all declared in Markdown. The
+slider is compile-time (zero JavaScript). `:sortable` and `:carousel` each load
+one tiny module from `/__wd/behaviors/`, **only** on this page.
+:::
+:::
+
+::: card .ix-panel
+## Slider
+
+:slider volume = 60 min=0 max=100 step=5
+
+::: readout
+Volume: **{ volume }** / 100
+:::
+
+::: ix-note
+`:slider` renders a bound range input. Range values coerce to a Number, so
+`{ volume }` and any `:computed` math see `60`, not `"60"`.
+:::
+:::
+
+::: card .ix-panel
+## Drag to reorder
+
+:store tasks = ["Sketch the idea", "Draft the page", "Review with the team", "Ship it"]
+
+::: sortlist
+@loop tasks into t sortable
+::: row
+<span class="grip" aria-hidden="true">⠿</span> { t }
+:::
+@endloop
+:::
+
+::: ix-note
+Drag a row to reorder, or focus one and press ↑ / ↓. The order is rewritten on
+the underlying `:store` through `window.wd`, so the keyed loop repaints.
+:::
+:::
+
+::: card .ix-panel
+## Carousel
+
+:carousel
+::: slide
+### Native swipe
+CSS scroll-snap does the swiping — touch works with zero JavaScript.
+:::
+::: slide
+### Controls, added
+The module adds prev/next buttons, dot navigation, and mouse drag.
+:::
+::: slide
+### Loaded on demand
+`carousel.js` ships only because this page uses `:carousel`.
+:::
+:endcarousel
+:::
+
+:::
+
+</main>
+
+@include /footer.wd

package/site/pages/ledger/index.wd

@@ -13,7 +13,16 @@ transitions: true
 ::: section #ledger
 
 :theme
-:store expenses = [{"id":1,"date":"2026-06-22","merchant":"Aurora Studio","category":"Software","amount":149},{"id":2,"date":"2026-06-20","merchant":"Briza Coffee","category":"Meals","amount":18.4},{"id":3,"date":"2026-06-19","merchant":"Cobalt Cloud","category":"Hosting","amount":312.5},{"id":4,"date":"2026-06-18","merchant":"Dune Print Co","category":"Office","amount":64},{"id":5,"date":"2026-06-16","merchant":"Aurora Studio","category":"Software","amount":29},{"id":6,"date":"2026-06-15","merchant":"Ember Transit","category":"Travel","amount":212.75},{"id":7,"date":"2026-06-13","merchant":"Briza Coffee","category":"Meals","amount":11.2},{"id":8,"date":"2026-06-11","merchant":"Cobalt Cloud","category":"Hosting","amount":312.5}]
+:store expenses = [
+  {"id":1,"date":"2026-06-22","merchant":"Aurora Studio","category":"Software","amount":149},
+  {"id":2,"date":"2026-06-20","merchant":"Briza Coffee","category":"Meals","amount":18.4},
+  {"id":3,"date":"2026-06-19","merchant":"Cobalt Cloud","category":"Hosting","amount":312.5},
+  {"id":4,"date":"2026-06-18","merchant":"Dune Print Co","category":"Office","amount":64},
+  {"id":5,"date":"2026-06-16","merchant":"Aurora Studio","category":"Software","amount":29},
+  {"id":6,"date":"2026-06-15","merchant":"Ember Transit","category":"Travel","amount":212.75},
+  {"id":7,"date":"2026-06-13","merchant":"Briza Coffee","category":"Meals","amount":11.2},
+  {"id":8,"date":"2026-06-11","merchant":"Cobalt Cloud","category":"Hosting","amount":312.5}
+]
 :state q = ""
 :state sortKey = "amount"
 :state sortDir = "desc"