@c9up/aurora 0.1.34 → 0.1.37

package/dist/xsrf.js

@@ -0,0 +1,81 @@
+/// <reference lib="dom" />
+/**
+ * Echoing the CSRF cookie back as a header, in one place.
+ *
+ * The signed double-submit guard on the server reads `XSRF-TOKEN` from the
+ * cookie jar and compares it to `X-XSRF-TOKEN` on the request. A browser sends
+ * the cookie on its own; the header is the client's half, and it is the half
+ * that says "this request came from our own page", because a cross-site caller
+ * can cause the cookie to ride along but cannot read it.
+ *
+ * This lived three times over. `rpc.ts` and `relay.ts` each had a copy, and
+ * both described theirs as mirroring `HttpClient.#retrieveXsrfToken` — a method
+ * `HttpClient` never had. So the client the docs tell you to submit a form with
+ * sent no header at all, and every POST through it was refused the moment an
+ * application turned CSRF on. One reader now, used by all three.
+ */
+/** The cookie the server seeds. */
+export const XSRF_COOKIE_NAME = "XSRF-TOKEN";
+/** The header it is echoed in (the Axios/Angular convention the server reads). */
+export const XSRF_HEADER_NAME = "X-XSRF-TOKEN";
+/**
+ * Read a cookie's raw value from `document.cookie`.
+ *
+ * Verbatim, never decoded: the server compares the header to the cookie
+ * byte-for-byte. The token is hex + `.` + base64url, so there is nothing a
+ * decode could change — but a decode that ever did change something would turn
+ * a valid request into a rejected one, silently.
+ *
+ * Returns `undefined` server-side (no `document`) or when the cookie is absent.
+ */
+export function readXsrfCookie(name = XSRF_COOKIE_NAME) {
+    if (typeof document === "undefined")
+        return undefined;
+    const prefix = `${name}=`;
+    for (const part of document.cookie.split(";")) {
+        const trimmed = part.trimStart();
+        if (trimmed.startsWith(prefix))
+            return trimmed.slice(prefix.length);
+    }
+    return undefined;
+}
+/**
+ * Is this URL served by the page's own origin?
+ *
+ * The question is not "does it match the client's baseURL" — a client whose
+ * baseURL IS a third-party API would pass that one. A CSRF token authenticates
+ * the page's session; sending it anywhere else hands a working token to whoever
+ * runs that host.
+ *
+ * A relative URL is same-origin by construction. Outside a browser there is no
+ * page and no cookie, so the answer is no.
+ */
+export function isSameOriginAsPage(url) {
+    if (typeof window === "undefined")
+        return false;
+    if (!/^[a-z][a-z\d+\-.]*:\/\//i.test(url))
+        return true;
+    try {
+        return new URL(url).origin === window.location.origin;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * The header to add for `url`, or `undefined` when there is nothing to send.
+ *
+ * Absent cookie, disabled, cross-origin target, or no browser: nothing. The
+ * caller merges the result rather than being handed an empty object, so a call
+ * site cannot accidentally overwrite a header it set itself.
+ */
+export function xsrfHeaderFor(url, options = {}) {
+    if (options.xsrf === false)
+        return undefined;
+    if (!isSameOriginAsPage(url))
+        return undefined;
+    const token = readXsrfCookie(options.xsrfCookieName ?? XSRF_COOKIE_NAME);
+    if (token === undefined)
+        return undefined;
+    return { [options.xsrfHeaderName ?? XSRF_HEADER_NAME]: token };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c9up/aurora",
-  "version": "0.1.34",
+  "version": "0.1.37",
   "description": "Aurora — reactive UI runtime for the Ream framework. Tagged-template DOM, signal-based state, isomorphic SSR + hydration, zero build step.",
   "license": "MIT",
   "type": "module",
@@ -58,10 +58,12 @@
     "@types/node": "^22.19.15",
     "@vitest/browser": "4.1.11",
     "@vitest/browser-playwright": "4.1.11",
-    "happy-dom": "^20.12.0",
+    "@vitest/coverage-v8": "4.1.9",
+    "jsdom": "^30.0.1",
     "playwright": "^1.61.1",
     "typescript": "^6.0.2",
-    "vitest": "4.1.9"
+    "vitest": "4.1.9",
+    "@c9up/ream": "^0.2.0"
   },
   "files": [
     "LICENSE",
@@ -80,7 +82,7 @@
     "build": "tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
-    "lint": "biome check src/",
+    "lint": "biome check src/ tests/",
     "test:coverage": "vitest run --coverage",
     "test:browser": "vitest run -c vitest.browser.config.ts"
   }

package/src/AuroraProvider.ts

@@ -16,6 +16,7 @@
  * and skip the route auto-registration silently.
  */
 
+import "./augmentations.js";
 import { isAbsolute, resolve as resolvePath } from "node:path";
 import { fileURLToPath } from "node:url";
 import { AuroraManager, type AuroraManagerConfig } from "./AuroraManager.js";

package/src/augmentations.ts

@@ -0,0 +1,50 @@
+/**
+ * Teach ream's `ContainerBindings` what `container.make(...)` returns for the
+ * tokens aurora binds.
+ *
+ * ream declares that interface open on purpose: it registers its own entries
+ * and expects each package to contribute the ones it owns. Nothing filled
+ * these in, so resolving by the string token answered `unknown` and every call
+ * site had to assert a type it could not prove.
+ *
+ * Loaded from the package barrel, so importing Aurora anywhere in the
+ * application is enough — nobody writes a `declare module` of their own.
+ *
+ * Type-only, and ream stays an OPTIONAL peer: nothing here reaches a runtime
+ * import, and a `declare module` for a specifier that does not resolve is
+ * simply inert.
+ */
+
+// Referenced so the augmentations below resolve the modules they augment.
+import type {} from "@c9up/ream";
+import type {} from "@c9up/ream/types";
+
+import type { AuroraManager } from "./AuroraManager.js";
+import type { AuroraRequestRenderer } from "./middleware.js";
+
+declare module "@c9up/ream/types" {
+	interface ContainerBindings {
+		/** The Aurora manager, bound by `AuroraProvider`. */
+		aurora: AuroraManager;
+	}
+}
+
+declare module "@c9up/ream" {
+	interface HttpContext {
+		/**
+		 * Render a page for THIS request — `ctx.aurora.render(name, props)`.
+		 *
+		 * Attached by the `auroraContext` middleware, which is what the docs tell
+		 * an application to register. Without this declaration the property the
+		 * middleware sets did not exist as far as the compiler was concerned, so
+		 * the shorthand the documentation teaches did not typecheck, and a
+		 * controller had to reach for the module-level `aurora.render(ctx, ...)`
+		 * or assert its way past it.
+		 *
+		 * Optional, because the middleware is: an application that never
+		 * registers it has no `ctx.aurora`, and saying otherwise would let a
+		 * controller call something that is not there.
+		 */
+		aurora?: AuroraRequestRenderer;
+	}
+}

package/src/browser.ts

@@ -510,7 +510,7 @@ export const cookie = {
 	get(name: string): string | null {
 		if (typeof document === "undefined") {
 			const scoped = cookieStoreReader?.();
-			if (scoped && Object.hasOwn(scoped, name)) return scoped[name];
+			if (scoped && Object.hasOwn(scoped, name)) return scoped[name] ?? null;
 			return cookieSeed[name] ?? null;
 		}
 		const prefix = `${encodeURIComponent(name)}=`;

package/src/html.ts

@@ -64,6 +64,9 @@ function classifySlots(strings: readonly string[]): RawSlot[] {
 	let insideComment = false;
 	for (let i = 0; i < strings.length - 1; i++) {
 		const segment = strings[i];
+		// `i` is bounded by the loop; naming the miss is what carries that
+		// bound into the character scan below.
+		if (segment === undefined) continue;
 		for (let j = 0; j < segment.length; j++) {
 			if (insideComment) {
 				// Comments swallow everything (including stray `<` / `>`) up
@@ -111,13 +114,10 @@ function buildMarkup(
 	strings: readonly string[],
 	classification: readonly RawSlot[],
 ): string {
-	let out = strings[0];
-	for (let i = 0; i < classification.length; i++) {
-		out +=
-			classification[i].region === "text"
-				? TEXT_NODE_MARKER
-				: attrPlaceholder(i);
-		out += strings[i + 1];
+	let out = strings[0] ?? "";
+	for (const [i, slot] of classification.entries()) {
+		out += slot.region === "text" ? TEXT_NODE_MARKER : attrPlaceholder(i);
+		out += strings[i + 1] ?? "";
 	}
 	return out;
 }
@@ -195,7 +195,7 @@ function collectSlots(
 			const staticParts: string[] = [];
 			const slotCountInThisAttr = (parts.length - 1) / 2;
 			for (let i = 0; i < parts.length; i += 2) {
-				staticParts.push(parts[i]);
+				staticParts.push(parts[i] ?? "");
 			}
 			for (let i = 0; i < slotCountInThisAttr; i++) {
 				const slot: AttrSlot = {
@@ -220,8 +220,8 @@ function collectSlots(
 		if (node.nodeType === 8 /* Comment */) {
 			const data = (node as Comment).data;
 			if (data === MARKER) {
-				if (slotIndex >= classification.length) return;
 				const cls = classification[slotIndex];
+				if (cls === undefined) return;
 				if (cls.region !== "text") {
 					throw new Error(
 						`[aurora] internal classification mismatch at slot ${slotIndex}`,
@@ -259,11 +259,94 @@ function collectSlots(
 	return slots;
 }
 
+/**
+ * Elements that only ever exist inside `<svg>`.
+ *
+ * Names shared with HTML — `a`, `title`, `style`, `script`, `text` in some
+ * dialects — are deliberately absent: seeing one says nothing about which
+ * namespace was meant, and guessing wrong would move an ordinary anchor into
+ * SVG.
+ */
+const SVG_ONLY = new Set([
+	"animate",
+	"animatemotion",
+	"animatetransform",
+	"circle",
+	"clippath",
+	"defs",
+	"desc",
+	"ellipse",
+	"feblend",
+	"fecolormatrix",
+	"fegaussianblur",
+	"femerge",
+	"feoffset",
+	"filter",
+	"foreignobject",
+	"g",
+	"image",
+	"line",
+	"lineargradient",
+	"marker",
+	"mask",
+	"path",
+	"pattern",
+	"polygon",
+	"polyline",
+	"radialgradient",
+	"rect",
+	"stop",
+	"svg",
+	"symbol",
+	"tspan",
+	"use",
+]);
+
+/**
+ * Whether this markup is SVG content that lost its `<svg>` ancestor.
+ *
+ * A template compiled on its own — `html\`<path/><path/>\``, the body of an
+ * icon helper — is parsed with no parent, and the HTML parser has no
+ * self-closing tag for an unknown element: the second `<path>` becomes a CHILD
+ * of the first, in the XHTML namespace. Nothing throws and nothing is logged;
+ * the icon is simply invisible, because `<path>` in the wrong namespace paints
+ * nothing. Parsing the same markup inside an `<svg>` makes the parser apply
+ * foreign-content rules and produce the two siblings that were written.
+ *
+ * `<svg>` itself is excluded: the parser already handles it when it is the root
+ * of the markup, and wrapping one in another would nest them.
+ */
+function isOrphanedSvgContent(root: HTMLTemplateElement): boolean {
+	const elements = Array.from(root.content.childNodes).filter(
+		(node): node is Element => node.nodeType === 1,
+	);
+	if (elements.length === 0) return false;
+	return elements.every((el) => {
+		const name = el.localName.toLowerCase();
+		return name !== "svg" && SVG_ONLY.has(name);
+	});
+}
+
 function compile(strings: TemplateStringsArray): Template {
 	const classification = classifySlots(strings);
 	const markup = buildMarkup(strings, classification);
-	const tpl = document.createElement("template");
+	let tpl = document.createElement("template");
 	tpl.innerHTML = markup;
+
+	if (isOrphanedSvgContent(tpl)) {
+		// Re-parsed with the ancestor the markup was written for, then lifted
+		// back out: the nodes keep the SVG namespace they were given, and the
+		// slot paths below are collected against the shape that will actually
+		// be cloned.
+		const wrapper = document.createElement("template");
+		wrapper.innerHTML = `<svg>${markup}</svg>`;
+		const svg = wrapper.content.firstElementChild;
+		if (svg !== null) {
+			tpl = document.createElement("template");
+			while (svg.firstChild) tpl.content.appendChild(svg.firstChild);
+		}
+	}
+
 	const slots = collectSlots(tpl, classification);
 	return { element: tpl, slots };
 }

package/src/http.ts

@@ -21,7 +21,9 @@
  * Workers, Bun, Deno). Part of the client barrel.
  */
 
-export interface HttpClientOptions {
+import { type XsrfOptions, xsrfHeaderFor } from "./xsrf.js";
+
+export interface HttpClientOptions extends XsrfOptions {
 	/** Prepended to every request URL, unless the URL is already absolute. */
 	baseURL?: string;
 	/** Headers merged into every request. */
@@ -56,6 +58,12 @@ export interface HttpRequestOptions<T = unknown> {
 	headers?: Record<string, string>;
 	/** Per-request bearer token override (`null` to force-omit). */
 	token?: string | null;
+	/**
+	 * Turn the automatic `X-XSRF-TOKEN` header off for this request. Rarely
+	 * needed: it is already a no-op cross-origin, outside a browser, and when
+	 * the cookie is absent.
+	 */
+	xsrf?: boolean;
 	/** Abort signal — abort it to cancel the request (e.g. on unmount / new keystroke). */
 	signal?: AbortSignal;
 	/** Per-request timeout in ms (overrides the client default). Aborts with a `TimeoutError`. */
@@ -216,6 +224,7 @@ export class HttpClient {
 	readonly #credentials?: RequestCredentials;
 	readonly #timeout?: number;
 	readonly #allowCrossOriginAuth: boolean;
+	readonly #xsrf: XsrfOptions;
 
 	constructor(options: HttpClientOptions = {}) {
 		this.#baseURL = options.baseURL ?? "";
@@ -224,6 +233,11 @@ export class HttpClient {
 		this.#credentials = options.credentials;
 		this.#timeout = options.timeout;
 		this.#allowCrossOriginAuth = options.allowCrossOriginAuth ?? false;
+		this.#xsrf = {
+			xsrf: options.xsrf,
+			xsrfCookieName: options.xsrfCookieName,
+			xsrfHeaderName: options.xsrfHeaderName,
+		};
 	}
 
 	/** Set a default header for every subsequent request (case-insensitive replace). Chainable. */
@@ -392,6 +406,18 @@ export class HttpClient {
 			headers.Authorization = `Bearer ${token}`;
 		}
 
+		// The client's half of the signed double-submit check. Same-origin only,
+		// and never over a header the caller set: an explicit value is intent.
+		const xsrf = xsrfHeaderFor(finalUrl, {
+			...this.#xsrf,
+			xsrf: options.xsrf ?? this.#xsrf.xsrf,
+		});
+		if (xsrf !== undefined) {
+			for (const [name, value] of Object.entries(xsrf)) {
+				if (!hasHeader(headers, name)) headers[name] = value;
+			}
+		}
+
 		let payload: BodyInit | undefined;
 		if (body !== undefined && body !== null) {
 			if (shouldJsonEncode(body)) {

package/src/hydrate.ts

@@ -416,8 +416,7 @@ function hydrateTemplateResult(
 	// wipe the statics, which is what render.ts already avoids server-side.
 	const multiGroups = new Map<string, MultiAttrGroup>();
 
-	for (let i = 0; i < tpl.slots.length; i++) {
-		const slot = tpl.slots[i];
+	for (const [i, slot] of tpl.slots.entries()) {
 		const liveNode = resolvePathLive(slot.path, liveNodes);
 		if (!liveNode) {
 			// Path missed in the live DOM — SSR markup diverges from the
@@ -554,10 +553,13 @@ function resolvePathLive(path: NodePath, rootNodes: ChildNode[]): Node | null {
 	// Collapse marker ranges at EVERY level so the live child list matches the
 	// parsed template's one-node-per-slot shape (see collapseMarkerRanges).
 	let children = collapseMarkerRanges(rootNodes);
-	let node: Node | null = children[path[0]] ?? null;
-	for (let i = 1; node && i < path.length; i++) {
+	const [head, ...rest] = path;
+	if (head === undefined) return null;
+	let node: Node | null = children[head] ?? null;
+	for (const step of rest) {
+		if (!node) break;
 		children = collapseMarkerRanges(Array.from(node.childNodes));
-		node = children[path[i]] ?? null;
+		node = children[step] ?? null;
 	}
 	return node;
 }

package/src/index.ts

@@ -4,6 +4,8 @@
 // node:fs / node:path / node:url live in `@c9up/aurora/server`. Keeping them off
 // this barrel is what lets a browser bundle import the client primitives without
 // the bundler dragging Node built-ins through the import graph.
+import "./augmentations.js";
+
 export type {
 	CookieCodec,
 	CookieOptions,

package/src/relay.ts

@@ -18,6 +18,8 @@
  * `EventSource` being undefined.
  */
 
+import { xsrfHeaderFor } from "./xsrf.js";
+
 /**
  * Connection lifecycle status. Mirrors `@adonisjs/transmit-client`'s
  * `TransmitStatus` (minus `initializing`, which the singleton never
@@ -313,19 +315,18 @@ function postUnsubscribe(channel: string): Promise<void> {
 
 /**
  * POST a `{ uid, channel }` handshake to a relay endpoint. Sends the
- * signed-CSRF trio blackhole expects: the `XSRF-TOKEN` cookie echoed as
- * the `X-XSRF-TOKEN` header plus `credentials: 'include'` so the cookie
+ * signed-CSRF trio the security layer expects: the `XSRF-TOKEN` cookie echoed
+ * as the `X-XSRF-TOKEN` header plus `credentials: 'include'` so the cookie
  * itself rides along. Without both, the POST is rejected by the signed
- * double-submit guard. Mirrors `HttpClient.#retrieveXsrfToken` /
- * `createRequest` in `@adonisjs/transmit-client`.
+ * double-submit guard. The header comes from the one reader in `xsrf.ts`,
+ * which `HttpClient` uses too.
  */
 async function postHandshake(url: string, channel: string): Promise<void> {
 	const headers: Record<string, string> = {
 		"content-type": "application/json",
 	};
 	if (CONFIG.bearer) headers.authorization = `Bearer ${CONFIG.bearer}`;
-	const xsrf = retrieveXsrfToken();
-	if (xsrf !== null) headers["x-xsrf-token"] = xsrf;
+	Object.assign(headers, xsrfHeaderFor(url) ?? {});
 	const res = await fetch(url, {
 		method: "POST",
 		headers,
@@ -337,25 +338,6 @@ async function postHandshake(url: string, channel: string): Promise<void> {
 	}
 }
 
-/**
- * Read the `XSRF-TOKEN` cookie so it can be echoed as the `X-XSRF-TOKEN`
- * header (signed double-submit CSRF). Browser-only — returns `null` under
- * SSR / any environment without `document`.
- */
-function retrieveXsrfToken(): string | null {
-	if (typeof document === "undefined") return null;
-	const match = document.cookie.match(/(?:^|;\s*)XSRF-TOKEN=([^;]*)/);
-	if (!match) return null;
-	try {
-		return decodeURIComponent(match[1]);
-	} catch {
-		// A malformed cookie must not break subscribe/unsubscribe handshakes. The
-		// server will reject an invalid token normally; the client should not throw
-		// before it even sends the request.
-		return match[1];
-	}
-}
-
 function safeJson<T>(raw: unknown): T | null {
 	if (typeof raw !== "string") return null;
 	try {

package/src/render.ts

@@ -119,8 +119,7 @@ export function mount(
 		resolvePath(fragment, slot.path),
 	);
 
-	for (let i = 0; i < tpl.slots.length; i++) {
-		const slot = tpl.slots[i];
+	for (const [i, slot] of tpl.slots.entries()) {
 		const node = resolved[i];
 		if (node === null || node === undefined) {
 			// Path didn't resolve — skip this binding rather than crash (see

package/src/rpc.ts

@@ -54,41 +54,27 @@ export interface RpcClientOptions {
 	xsrfHeaderName?: string;
 }
 
-/**
- * Read a cookie's raw value from `document.cookie`. Returns `undefined`
- * server-side (no `document`) or when the cookie is absent. The value is sent
- * verbatim — double-submit compares it byte-for-byte against the cookie, so it
- * must not be decoded.
- */
-function readCookie(name: string): string | undefined {
-	if (typeof document === "undefined") return undefined;
-	const prefix = `${name}=`;
-	for (const part of document.cookie.split(";")) {
-		const trimmed = part.trimStart();
-		if (trimmed.startsWith(prefix)) return trimmed.slice(prefix.length);
-	}
-	return undefined;
-}
-
 /**
  * Create a JSON-RPC client bound to aurora's HttpClient transport. Inherits the
  * supplied (or a fresh) HttpClient's base URL, auth headers, and timeouts, and
  * (by default) auto-attaches the `X-XSRF-TOKEN` CSRF header from the cookie.
  */
 export function createRpcClient(options: RpcClientOptions = {}): RpcClient {
-	const http = options.http ?? new HttpClient({ headers: options.headers });
-	const xsrfEnabled = options.xsrf ?? true;
-	const cookieName = options.xsrfCookieName ?? "XSRF-TOKEN";
-	const headerName = options.xsrfHeaderName ?? "X-XSRF-TOKEN";
+	const http =
+		options.http ??
+		new HttpClient({
+			headers: options.headers,
+			xsrf: options.xsrf,
+			xsrfCookieName: options.xsrfCookieName,
+			xsrfHeaderName: options.xsrfHeaderName,
+		});
 	return createCometRpcClient({
 		url: options.url,
-		transport: (url, body, { signal }) => {
-			let headers: Record<string, string> | undefined;
-			if (xsrfEnabled) {
-				const token = readCookie(cookieName);
-				if (token !== undefined) headers = { [headerName]: token };
-			}
-			return http.post<unknown>(url, body, { signal, headers });
-		},
+		// The header comes from the transport, which attaches it for every
+		// request it sends. Adding it here as well meant a caller who passed
+		// their own `http` got a client that read the cookie and one that did
+		// not, depending on which constructor argument they used.
+		transport: (url, body, { signal }) =>
+			http.post<unknown>(url, body, { signal, xsrf: options.xsrf }),
 	});
 }

package/src/ssr.ts

@@ -53,8 +53,8 @@ function stringifyTemplateResult(result: TemplateResult): string {
 	// one consumed is the one that was opened. Undefined when none is pending.
 	let pendingClosingQuote: '"' | "'" | undefined;
 	const scanner = new TagScanner();
-	for (let i = 0; i < strings.length; i++) {
-		let segment = strings[i];
+	for (const [i, raw] of strings.entries()) {
+		let segment = raw;
 		if (pendingClosingQuote !== undefined) {
 			segment =
 				pendingClosingQuote === '"'
@@ -68,18 +68,36 @@ function stringifyTemplateResult(result: TemplateResult): string {
 		// value written into the HTML, and any exception swallowed.
 		const directiveMatch = segment.match(/\s([@?.][\w-]+)=("|'|)$/);
 		const skipValue = directiveMatch !== null;
+		// Set when the skipped directive is a boolean attribute, which — unlike
+		// the other two — still has markup to emit. See below.
+		let booleanAttrName: string | undefined;
 		if (directiveMatch) {
-			segment = segment.slice(0, segment.length - directiveMatch[0].length);
+			const [whole = "", directive = "", quote] = directiveMatch;
+			segment = segment.slice(0, segment.length - whole.length);
+			// `?disabled=${x}` is HTML STATE, not a client-only binding.
+			// `@click` is a listener and `.value` a DOM property: neither
+			// exists until the runtime binds it, so dropping them is right.
+			// A boolean attribute is different — the browser acts on it while
+			// parsing. Skipping it too made the server contradict the very
+			// first client render: a `?hidden` panel arrived visible and
+			// blinked away once hydration caught up.
+			if (directive.startsWith("?")) booleanAttrName = directive.slice(1);
 			// Only a quoted directive leaves a closing quote to swallow.
 			pendingClosingQuote =
-				directiveMatch[2] === '"'
-					? '"'
-					: directiveMatch[2] === "'"
-						? "'"
-						: undefined;
+				quote === '"' ? '"' : quote === "'" ? "'" : undefined;
 		}
 		out += segment;
 		scanner.consume(segment);
+		if (booleanAttrName !== undefined && i < values.length) {
+			// Present-and-empty when truthy, absent otherwise — byte-for-byte
+			// what applyBooleanAttrSlot writes on the client, so hydration
+			// re-applying the effect is a no-op instead of a correction.
+			if (resolveBooleanValue(values[i])) {
+				const rendered = ` ${booleanAttrName}=""`;
+				out += rendered;
+				scanner.consume(rendered);
+			}
+		}
 		if (i < values.length && !skipValue) {
 			const value = values[i];
 			const inAttr = scanner.insideTag;
@@ -158,6 +176,26 @@ class TagScanner {
 	}
 }
 
+/**
+ * Read a boolean attribute's value the way the client reads it: a signal or a
+ * reactive expression is called ONCE, then coerced. One level is not an
+ * approximation — `applyBooleanAttrSlot` does exactly the same, so a signal
+ * that returns a signal is truthy on both sides.
+ */
+function resolveBooleanValue(value: unknown): boolean {
+	if (isSignal(value) || typeof value === "function") {
+		try {
+			return Boolean((value as () => unknown)());
+		} catch {
+			// Same fail-soft as stringifyValue: an expression that throws
+			// server-side leaves the attribute off and lets the client effect
+			// decide once it has a real DOM to read.
+			return false;
+		}
+	}
+	return Boolean(value);
+}
+
 function stringifyValue(value: unknown, inAttribute: boolean): string {
 	if (value === null || value === undefined || value === false) return "";
 	if (value === true) return inAttribute ? "" : "true";