@zvndev/darkmown 1.0.0 → 1.2.0

package/src/compiler/directives.js

@@ -578,6 +578,129 @@ export function handleBind(line, ctx, index) {
   return `<input type="${escapeHtml(type)}" data-wd-bind-input="${key}"${valueAttr} ${attrs.join(" ")}>`;
 }
 
+/**
+ * `:slider name [= value] [min=N] [max=N] [step=N] [aria-label="…"] [persist]` — a
+ * range input two-way bound to a NUMBER :state. With `= value` it declares the state
+ * inline (seeding it numeric) and may `persist`; without `=` it binds to an already-
+ * declared :state. Pure compile-time: it reuses the runtime's input binding (range
+ * values coerce to Number), so it ships NO behavior module.
+ * @param {string} line
+ * @param {Ctx} ctx
+ * @param {number} index 0-based line index for `file:line` errors.
+ * @returns {string}
+ */
+export function handleSlider(line, ctx, index) {
+  const head = line.match(/^:slider\s+([A-Za-z_$][\w$]*)\s*(.*)$/);
+  if (!head)
+    throw new Error(
+      `Malformed :slider in ${at(ctx.file, index)}: ${line}. Use: :slider volume = 50 min=0 max=100 step=1`
+    );
+  const name = head[1];
+  let rest = head[2].trim();
+
+  /** @type {string | undefined} */
+  let initialRaw;
+  if (rest.startsWith("=")) {
+    const valueMatch = rest.match(/^=\s*(\S+)\s*(.*)$/);
+    if (!valueMatch)
+      throw new Error(
+        `Malformed :slider initial value in ${at(ctx.file, index)}: ${line}. Use: :slider ${name} = 50`
+      );
+    initialRaw = valueMatch[1];
+    rest = valueMatch[2].trim();
+  }
+
+  let min = "0";
+  let max = "100";
+  let step = "1";
+  /** @type {string | undefined} */
+  let ariaLabel;
+  let persist = false;
+  for (const token of rest.matchAll(/([A-Za-z-]+)=("[^"]*"|\S+)|(\bpersist\b)/g)) {
+    if (token[3]) {
+      persist = true;
+      continue;
+    }
+    const value = stripQuotes(token[2]);
+    if (token[1] === "min") min = value;
+    else if (token[1] === "max") max = value;
+    else if (token[1] === "step") step = value;
+    else if (token[1] === "aria-label") ariaLabel = value;
+    else throw new Error(`Unknown :slider attribute "${token[1]}" in ${at(ctx.file, index)}`);
+  }
+  for (const [label, raw] of [
+    ["min", min],
+    ["max", max],
+    ["step", step]
+  ]) {
+    if (!/^-?\d+(?:\.\d+)?$/.test(raw))
+      throw new Error(`:slider ${label} must be a number in ${at(ctx.file, index)}: ${raw}`);
+  }
+
+  ctx.comp.assets.runtime = true;
+  /** @type {string} */
+  let key;
+  let seed = "";
+  if (initialRaw !== undefined) {
+    const value = parseStateValue(initialRaw, at(ctx.file, index));
+    if (typeof value !== "number")
+      throw new Error(
+        `:slider ${name} initial value must be a number in ${at(ctx.file, index)}: ${initialRaw}`
+      );
+    key = declareState(name, value, ctx);
+    const persistAttr = persist ? ` data-wd-persist="${key}"` : "";
+    seed = `<script type="application/json" data-wd-state${persistAttr}>${safeScriptJson({ [key]: value })}</script>`;
+  } else {
+    if (persist)
+      throw new Error(
+        `:slider persist only applies when declaring state inline (:slider ${name} = 0 … persist) in ${at(ctx.file, index)}`
+      );
+    const resolved = resolveStateKey(name, ctx);
+    if (!resolved)
+      throw new Error(
+        `:slider ${name} in ${ctx.file} has no matching state. Declare it: :slider ${name} = 0 min=0 max=100`
+      );
+    key = resolved;
+  }
+
+  const initial = ctx.comp.state.get(key);
+  const valueAttr =
+    initial === undefined || initial === null ? "" : ` value="${escapeHtml(String(initial))}"`;
+  const ariaAttr = ` aria-label="${escapeHtml(ariaLabel || humanizeName(name))}"`;
+  return `${seed}<input type="range" data-wd-bind-input="${key}" min="${escapeHtml(min)}" max="${escapeHtml(max)}" step="${escapeHtml(step)}"${valueAttr}${ariaAttr}>`;
+}
+
+/**
+ * `:carousel [autoplay=N]` … `:endcarousel` — a horizontally scroll-snapping
+ * carousel. Contract: each DIRECT child element of the track is one slide, so put
+ * each slide in its own block (e.g. a `::: slide` container) and give that block
+ * the slide sizing in your skin — loose prose lines would each count as a slide.
+ * Registers the `carousel` behavior (prev/next, dot nav, optional autoplay, mouse
+ * drag); native CSS scroll-snap + the page skin handle layout and touch swipe.
+ * `autoplay` is suppressed under `prefers-reduced-motion`. No runtime required.
+ * @param {string} line
+ * @param {string[]} bodyLines
+ * @param {Ctx} ctx
+ * @param {number} index 0-based line index for `file:line` errors.
+ * @returns {string}
+ */
+export function handleCarousel(line, bodyLines, ctx, index) {
+  const match = line.match(/^:carousel\s*(.*)$/);
+  const rest = (match?.[1] || "").trim();
+  let autoplayAttr = "";
+  if (rest) {
+    const auto = rest.match(/^autoplay=(\d+)$/);
+    if (!auto)
+      throw new Error(
+        `Malformed :carousel in ${at(ctx.file, index)}: ${line}. Use: :carousel [autoplay=3000] … :endcarousel`
+      );
+    autoplayAttr = ` data-wd-carousel-autoplay="${auto[1]}"`;
+  }
+  ctx.comp.assets.behaviors.add("carousel");
+  const inner = compileBody(bodyLines, ctx);
+  return `<div class="wd-carousel" data-wd-carousel${autoplayAttr}>\n<div class="wd-carousel-track" data-wd-carousel-track>\n${inner}\n</div>\n</div>`;
+}
+
 /**
  * @param {string} line
  * @param {Ctx} ctx

package/src/compiler/interpolation.js

@@ -119,10 +119,12 @@ export function safeScriptJson(value) {
 }
 
 /**
- * Parse a single-line `:state`/`:store`/`:theme` value: quoted string, boolean,
- * null, number, or JSON literal — falling back to the bare string. A value that
- * opens a JSON array/object but won't parse throws (almost always a multi-line
- * literal, which these single-line directives can't express).
+ * Parse a `:state`/`:store`/`:theme` value: quoted string, boolean, null, number,
+ * or JSON literal — falling back to the bare string. Multi-line array/object
+ * literals are joined into one line before reaching here (see `joinValueDirective`
+ * in body.js), so a value that opens a `[`/`{` but won't parse is genuinely
+ * unbalanced (a missing `]`/`}`) and throws, rather than being stored verbatim as
+ * the partial string `"["` — the silent-corruption footgun this guard replaces.
  * @param {string} raw
  * @param {string} [where] `file:line` for the error message.
  * @returns {unknown}
@@ -137,18 +139,17 @@ export function parseStateValue(raw, where) {
   try {
     return JSON.parse(value);
   } catch {
-    // A value that opens a JSON array/object but won't parse is almost always a
-    // multi-line literal — :state/:store/:theme take a single-line value, so the
-    // unterminated "[" used to get stored verbatim as the string "[" and silently
-    // break the page. Fail loudly with the fix instead. Quote it to keep literal
-    // brackets (e.g. `= "[draft]"`).
-    if (/^[[{]/.test(value))
+    if (/^[[{]/.test(value)) {
+      const open = value[0];
+      const close = open === "[" ? "]" : "}";
+      const shown = value.length > 60 ? `${value.slice(0, 57)}…` : value;
       throw new Error(
-        `Invalid value ${value}${where ? ` in ${where}` : ""}: this looks like the start of a ` +
-          `multi-line array/object, but :state/:store values must fit on one line. ` +
-          `Put the whole literal on one line, or quote it for literal text. ` +
-          `Use: name = [{"id":1,"label":"…"}]`
+        `Unbalanced JSON value "${shown}"${where ? ` in ${where}` : ""}: this opens "${open}" but ` +
+          `never closes it. :state/:store/:theme accept a multi-line array/object, but the literal ` +
+          `must balance (a "${close}" is missing) with no blank lines inside it. ` +
+          `Quote it for literal bracket text (e.g. = "[draft]").`
       );
+    }
     return value;
   }
 }

package/src/compiler/loops.js

@@ -29,15 +29,16 @@ import { compilePredicate, evalPredicate } from "./predicates.js";
  */
 
 // The fixed corrective suggestion shown for any malformed @loop header.
-const LOOP_USAGE = "Use: @loop src into item [where …] [sort by …] [reverse] [offset N] [limit N]";
+const LOOP_USAGE =
+  "Use: @loop src into item [where …] [sort by …] [reverse] [offset N] [limit N] [sortable]";
 
 /**
  * Parse the optional clause tail of a `@loop` header in FIXED order:
- * `[where P] [sort by key [asc|desc]] [reverse] [offset N] [limit N]`.
+ * `[where P] [sort by key [asc|desc]] [reverse] [offset N] [limit N] [sortable]`.
  * @param {string} tail Everything after `@loop src into item`.
  * @param {string} itemName
  * @param {Ctx} ctx
- * @returns {{ where: string|null, sort: import("./context.js").LoopOpts["sort"], reverse: boolean, offset: NumArg|null, limit: NumArg|null, refsState: boolean }}
+ * @returns {{ where: string|null, sort: import("./context.js").LoopOpts["sort"], reverse: boolean, offset: NumArg|null, limit: NumArg|null, refsState: boolean, sortable: boolean }}
  */
 function parseLoopClauses(tail, itemName, ctx) {
   // Peel clauses off the END in reverse fixed-order (limit, offset, reverse,
@@ -51,11 +52,23 @@ function parseLoopClauses(tail, itemName, ctx) {
   /** @type {NumArg|null} */ let offset = null;
   /** @type {NumArg|null} */ let limit = null;
   let refsState = false;
+  let sortable = false;
   /** @returns {never} */
   const bad = () => {
     throw new Error(`Malformed @loop clause in ${ctx.file}: "${tail.trim()}". ${LOOP_USAGE}`);
   };
 
+  // `sortable` is a position-independent flag (drag-reorder); peel it wherever it
+  // sits so the rest of the fixed-order parse is unaffected. handleLoop rejects it
+  // when combined with where/sort/reverse/offset/limit.
+  const sm = s.match(/(^|\s)sortable(?=\s|$)/);
+  if (sm) {
+    sortable = true;
+    s = (s.slice(0, sm.index) + s.slice((sm.index ?? 0) + sm[0].length))
+      .replace(/\s+/g, " ")
+      .trim();
+  }
+
   let m = s.match(/(^|\s)limit\s+(\d+|[A-Za-z_$][\w$]*)$/);
   if (m) {
     limit = parseNumArg(m[2], ctx);
@@ -96,7 +109,7 @@ function parseLoopClauses(tail, itemName, ctx) {
     // predicate means a clause was written before `where` finished (wrong order).
     if (/(^|\s)(sort\s+by\s|reverse(\s|$))/.test(where)) bad();
   }
-  return { where, sort, reverse, offset, limit, refsState };
+  return { where, sort, reverse, offset, limit, refsState, sortable };
 }
 
 /**
@@ -193,8 +206,27 @@ export function handleLoop(line, bodyLines, emptyLines, ctx) {
   const itemName = match[2];
   const clauses = match[3]
     ? parseLoopClauses(match[3], itemName, ctx)
-    : { where: null, sort: null, reverse: false, offset: null, limit: null, refsState: false };
+    : {
+        where: null,
+        sort: null,
+        reverse: false,
+        offset: null,
+        limit: null,
+        refsState: false,
+        sortable: false
+      };
   const where = clauses.where ? compilePredicate(clauses.where, itemName, ctx) : null;
+  // `sortable` reorders the list directly, so it can't combine with a clause that
+  // re-derives the visible order (where/sort/reverse) or shows a partial view
+  // (offset/limit) — those would break the 1:1 DOM↔array index mapping.
+  if (
+    clauses.sortable &&
+    (where || clauses.sort || clauses.reverse || clauses.offset || clauses.limit)
+  ) {
+    throw new Error(
+      `@loop sortable cannot combine with where/sort/reverse/offset/limit in ${ctx.file}. ${LOOP_USAGE}`
+    );
+  }
   /** @type {LoopOpts} */
   const opts = {
     where,
@@ -203,7 +235,8 @@ export function handleLoop(line, bodyLines, emptyLines, ctx) {
     offset: clauses.offset,
     limit: clauses.limit,
     empty: emptyLines,
-    clauseRefsState: clauses.refsState
+    clauseRefsState: clauses.refsState,
+    sortable: clauses.sortable
   };
 
   if (
@@ -242,6 +275,11 @@ export function handleLoop(line, bodyLines, emptyLines, ctx) {
     // Inside a reactive loop, `@loop <outerItem>.<path> into x` loops a field of
     // the enclosing row item — an ITEM-RELATIVE loop the runtime fills per row.
     if (ctx.loopItem && segs[0] === ctx.loopItem && segs.length > 1) {
+      if (opts.sortable) {
+        throw new Error(
+          `@loop sortable is not supported on a nested (item-relative) loop in ${ctx.file}. ${LOOP_USAGE}`
+        );
+      }
       return itemRelativeLoop(segs.slice(1).join("."), itemName, bodyLines, ctx, opts);
     }
   }
@@ -298,6 +336,11 @@ function pipelineRows(rows, where, opts, ctx) {
  * @returns {string}
  */
 function loopOverData(rows, itemName, bodyLines, ctx, opts) {
+  if (opts.sortable) {
+    throw new Error(
+      `@loop sortable requires a :state or :store list to reorder, not a JSON file or in-scope value, in ${ctx.file}. ${LOOP_USAGE}`
+    );
+  }
   // Reactive when the where reads state OR an offset/limit references a state key.
   const reactive = (opts.where && opts.where.refsState) || opts.clauseRefsState;
   if (reactive) return reactiveLoop(null, itemName, bodyLines, ctx, { ...opts, data: rows });
@@ -396,7 +439,8 @@ function reactiveLoop(key, itemName, bodyLines, ctx, opts = null) {
           ? { kind: "literal", value: num(limit) ?? allRows.length }
           : limit,
       empty: null,
-      clauseRefsState: false
+      clauseRefsState: false,
+      sortable: false
     },
     ctx
   );
@@ -421,9 +465,14 @@ function reactiveLoop(key, itemName, bodyLines, ctx, opts = null) {
       ? compileBody(emptyLines, { ...ctx, loopMeta: true }).trim()
       : initial;
 
+  // `sortable` tags the region for the drag-reorder behavior (emitted only here)
+  // and points it at the state key whose list it rewrites on drop.
+  const sortable = opts?.sortable || false;
+  if (sortable && key) ctx.comp.assets.behaviors.add("sortable");
   const attrs =
     loopClauseAttrs({ where, sort, reverse, offset, limit }) +
-    (baked ? ` data-wd-loop-data="${escapeHtml(JSON.stringify(baked))}"` : "");
+    (baked ? ` data-wd-loop-data="${escapeHtml(JSON.stringify(baked))}"` : "") +
+    (sortable && key ? ` data-wd-sortable="${escapeHtml(key)}"` : "");
   return `<div data-wd-loop="${escapeHtml(key || "")}"${attrs}><template data-wd-loop-template>${itemTemplate}</template>${emptyTemplate}<${wrapperTag} data-wd-loop-out>${initialOut}</${wrapperTag}></div>`;
 }
 

package/src/compiler/page.js

@@ -61,9 +61,15 @@ 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];
+  // Pay-for-what-you-use behavior modules (slider is compile-time and never here;
+  // sortable/carousel each emit one) load after the runtime — sortable depends on
+  // `window.wd` — and before any colocated page script.
+  const behaviorSrcs = [...compiled.assets.behaviors].map((name) => `/__wd/behaviors/${name}.js`);
+  const scriptSrcs = [
+    ...(compiled.assets.runtime ? ["/__wd/runtime.js"] : []),
+    ...behaviorSrcs,
+    ...compiled.assets.scripts
+  ];
   const scripts = scriptSrcs
     .map((src) => `<script type="module" src="${src}"></script>`)
     .join("\n");

package/src/deploy.js

@@ -0,0 +1,174 @@
+import { spawn } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { buildSite } from "./builder.js";
+import { BASE_SECURITY_HEADERS, REACTIVE_CSP } from "./headers.js";
+
+/** The platforms `darkmown deploy` knows how to drive. */
+export const DEPLOY_TARGETS = ["vercel", "cloudflare"];
+
+/**
+ * Deploy a Darkmown site to a platform by wrapping its CLI. The build is
+ * target-aware (Cloudflare gets the `dist/_worker.js` for `api/*`), platform
+ * config is written if missing, then the platform CLI runs via `npx`.
+ *
+ * The process spawn is injected (`run`) so this is unit-testable without touching
+ * the network; the binary defaults to {@link spawnProcess}.
+ * @param {object} opts
+ * @param {string} opts.cwd Project directory.
+ * @param {string} opts.target One of {@link DEPLOY_TARGETS}.
+ * @param {boolean} [opts.prod] Promote to production.
+ * @param {(msg: string) => void} opts.log Progress sink.
+ * @param {(file: string, args: string[], options: object) => Promise<{ code: number, stdout: string, stderr: string }>} [opts.run]
+ * @param {string} [opts.projectName] Cloudflare Pages project name (defaults to package.json name).
+ * @returns {Promise<{ url: string | null }>}
+ */
+export async function deploy({ cwd, target, prod = false, log, run = spawnProcess, projectName }) {
+  if (!DEPLOY_TARGETS.includes(target)) {
+    throw new Error(`Unknown deploy target "${target}". Use one of: ${DEPLOY_TARGETS.join(", ")}.`);
+  }
+
+  ensurePlatformConfig(cwd, target);
+  log(`Building for ${target}…`);
+  buildSite(cwd, { target });
+
+  const plan = deployCommand({ target, prod, name: projectName || packageName(cwd) });
+  log(`$ ${plan.file} ${plan.args.join(" ")}`);
+  const result = await run(plan.file, plan.args, { cwd });
+  const output = `${result.stdout}\n${result.stderr}`;
+
+  if (result.code !== 0) {
+    // Matches both Vercel ("Not authenticated. Please log in.") and wrangler
+    // ("you are not logged in", "Authentication error", "run `wrangler login`",
+    // "You need to log in first") auth-failure wording.
+    if (
+      /not authenticated|not logged in|please log ?in|unauthorized|no auth|log ?in first|authentication (?:error|failed)|wrangler login/i.test(
+        output
+      )
+    ) {
+      throw new Error(
+        `The ${target} CLI is not signed in. Run \`${plan.loginHint}\` (try \`! ${plan.loginHint}\` in this session), then re-run \`darkmown deploy ${target}\`.`
+      );
+    }
+    throw new Error(`${target} deploy failed (exit ${result.code}).`);
+  }
+
+  const url = plan.parseUrl(output);
+  if (url) log(`Deployed → ${url}`);
+  else log("Deploy finished (no URL detected in the CLI output).");
+  return { url };
+}
+
+/**
+ * Build the platform CLI invocation: binary, args, login hint, and a URL parser.
+ * @param {{ target: string, prod: boolean, name: string }} opts
+ * @returns {{ file: string, args: string[], loginHint: string, parseUrl: (out: string) => string | null }}
+ */
+function deployCommand({ target, prod, name }) {
+  if (target === "vercel") {
+    const args = ["--yes", "vercel", "deploy", "--yes"];
+    if (prod) args.push("--prod");
+    return {
+      file: "npx",
+      args,
+      loginHint: "npx vercel login",
+      parseUrl: (out) => firstMatch(out, /https:\/\/[^\s]*\.vercel\.app[^\s]*/)
+    };
+  }
+  // cloudflare — `--branch main` promotes to production only if the project's
+  // configured production branch is literally `main` (Cloudflare's default).
+  const args = ["--yes", "wrangler", "pages", "deploy", "dist", "--project-name", name];
+  if (prod) args.push("--branch", "main");
+  return {
+    file: "npx",
+    args,
+    loginHint: "npx wrangler login",
+    parseUrl: (out) => firstMatch(out, /https:\/\/[^\s]*\.pages\.dev[^\s]*/)
+  };
+}
+
+/**
+ * Ensure the platform has the config it needs. Vercel reads `vercel.json` BEFORE
+ * the build, so write a sane default if absent (never overwrite). Cloudflare needs
+ * nothing extra — the build emits `dist/_worker.js` + `dist/_headers`.
+ * @param {string} cwd
+ * @param {string} target
+ * @returns {void}
+ */
+function ensurePlatformConfig(cwd, target) {
+  if (target !== "vercel") return;
+  const file = path.join(cwd, "vercel.json");
+  if (fs.existsSync(file)) return;
+  const config = {
+    $schema: "https://openapi.vercel.sh/vercel.json",
+    framework: null,
+    buildCommand: "npm run build",
+    outputDirectory: "dist",
+    cleanUrls: true,
+    trailingSlash: false,
+    headers: [
+      {
+        source: "/(.*)",
+        headers: [
+          ...Object.entries(BASE_SECURITY_HEADERS).map(([key, value]) => ({ key, value })),
+          { key: "Content-Security-Policy", value: REACTIVE_CSP }
+        ]
+      }
+    ]
+  };
+  fs.writeFileSync(file, `${JSON.stringify(config, null, 2)}\n`);
+}
+
+/**
+ * Spawn a process, streaming its output to the terminal while capturing it for
+ * URL parsing. Resolves (never rejects) with the exit code + captured streams.
+ * @param {string} file
+ * @param {string[]} args
+ * @param {object} options
+ * @returns {Promise<{ code: number, stdout: string, stderr: string }>}
+ */
+export function spawnProcess(file, args, options) {
+  return new Promise((resolve) => {
+    let stdout = "";
+    let stderr = "";
+    const child = spawn(file, args, { ...options, stdio: ["inherit", "pipe", "pipe"] });
+    child.stdout.on("data", (chunk) => {
+      stdout += chunk;
+      process.stdout.write(chunk);
+    });
+    child.stderr.on("data", (chunk) => {
+      stderr += chunk;
+      process.stderr.write(chunk);
+    });
+    child.on("close", (code) => resolve({ code: code ?? 1, stdout, stderr }));
+    child.on("error", (err) => resolve({ code: 1, stdout, stderr: `${stderr}${err}` }));
+  });
+}
+
+/**
+ * @param {string} text
+ * @param {RegExp} re
+ * @returns {string | null}
+ */
+function firstMatch(text, re) {
+  const match = text.match(re);
+  // The greedy `[^\s]*` can swallow trailing sentence punctuation (e.g. a period
+  // after the URL in "Deployed to https://x.pages.dev."); strip it off.
+  return match ? match[0].replace(/[.,;:)\]}'"]+$/, "") : null;
+}
+
+/**
+ * The project's package.json `name`, or the directory name, as a Cloudflare Pages
+ * project slug.
+ * @param {string} cwd
+ * @returns {string}
+ */
+function packageName(cwd) {
+  try {
+    const pkg = JSON.parse(fs.readFileSync(path.join(cwd, "package.json"), "utf8"));
+    if (pkg.name) return String(pkg.name).replace(/^@[^/]+\//, "");
+  } catch {
+    /* no package.json — fall back to the directory name */
+  }
+  return path.basename(cwd) || "darkmown-site";
+}

package/src/headers.js

@@ -22,6 +22,9 @@
  *   - `:video`/`:audio` allow relative or `http(s)` sources — `media-src 'self' https:`.
  *   - `:embed` rewrites to exactly the YouTube no-cookie and Vimeo player origins,
  *     so `frame-src` pre-authorizes those two hosts (and nothing else).
+ *   - A native `:form action="/api/…"` POSTs same-origin, so `form-action 'self'`
+ *     authorizes it (and blocks a form exfiltrating to a third-party origin). Apps
+ *     posting to a remote backend widen this alongside `connect-src`.
  *
  * Static pages (zero framework JS) still emit inline `<style>` and an inline
  * `<script type="speculationrules">`, so they keep `'unsafe-inline'`, but they
@@ -51,6 +54,7 @@ const COMMON_CSP_DIRECTIVES = [
   CONNECT_SRC,
   "object-src 'none'",
   "base-uri 'self'",
+  "form-action 'self'",
   "frame-ancestors 'self'"
 ];
 

package/src/runtime.js

@@ -587,7 +587,9 @@ function render() {
 document.addEventListener("input", (event) => {
   const input = /** @type {HTMLInputElement | null} */ (/** @type {Element} */ (event.target)?.closest("[data-wd-bind-input]"));
   if (!input) return;
-  state[input.getAttribute("data-wd-bind-input") || ""] = input.value;
+  // A `:slider` binds a range input: keep state numeric so `:computed`/math see a
+  // number, not the DOM's string `.value`. Other inputs stay strings as before.
+  state[input.getAttribute("data-wd-bind-input") || ""] = input.type === "range" ? input.valueAsNumber : input.value;
   savePersisted();
   render();
   checkRefetch();