@c9up/aurora 0.1.26 → 0.1.28

package/dist/browser.js

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Browser DX helpers — navigation + a typed `localStorage` wrapper.
  *

package/dist/html.js

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Tagged-template HTML parser.
  *

package/dist/http.js

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * `HttpClient` — a small typed wrapper over `fetch` so call sites read
  * `await http.get<User>("/auth/me")` instead of hand-rolling headers,

package/dist/hydrate.js

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Hydration — adopt SSR-rendered HTML in the browser without rebuilding
  * the DOM.
@@ -257,6 +262,11 @@ function hydrateTemplateResult(result, liveNodes, cleanups, mountHooks, markerCu
     const syntheticRoot = {
         childNodes: liveNodes,
     };
+    // An attribute interpolating several slots — `class="static ${a} ${b}"` — is
+    // ONE attribute value built from all of them plus the static segments in
+    // between. Binding each slot on its own would have the last writer win and
+    // wipe the statics, which is what render.ts already avoids server-side.
+    const multiGroups = new Map();
     for (let i = 0; i < tpl.slots.length; i++) {
         const slot = tpl.slots[i];
         const liveNode = resolvePathLive(syntheticRoot, slot.path, liveNodes);
@@ -270,8 +280,47 @@ function hydrateTemplateResult(result, liveNodes, cleanups, mountHooks, markerCu
             }
             continue;
         }
+        if (slot.kind === "attr" && slot.staticParts !== undefined) {
+            collectMultiAttr(slot, liveNode, result.values[i], multiGroups);
+            continue;
+        }
         hydrateSlot(slot, liveNode, result.values[i], cleanups, mountHooks, markerCursor);
     }
+    for (const group of multiGroups.values()) {
+        applyMultiAttrGroup(group, cleanups);
+    }
+}
+function collectMultiAttr(slot, el, value, groups) {
+    if (!slot.staticParts)
+        return;
+    const key = `${slot.name}::${slot.path.join(".")}`;
+    let group = groups.get(key);
+    if (!group) {
+        group = { el, name: slot.name, staticParts: slot.staticParts, values: [] };
+        groups.set(key, group);
+    }
+    group.values.push(value);
+}
+function applyMultiAttrGroup(group, cleanups) {
+    function join() {
+        let out = group.staticParts[0] ?? "";
+        for (let i = 0; i < group.values.length; i++) {
+            const v = group.values[i];
+            const resolved = isSignal(v) || typeof v === "function" ? v() : v;
+            out += resolved == null || resolved === false ? "" : String(resolved);
+            out += group.staticParts[i + 1] ?? "";
+        }
+        return out;
+    }
+    const hasReactive = group.values.some((v) => isSignal(v) || typeof v === "function");
+    if (hasReactive) {
+        // SSR already wrote the joined value; re-joining on every tick is what
+        // keeps the statics in place when only one part changes.
+        cleanups.push(effect(() => {
+            group.el.setAttribute(group.name, join());
+        }));
+    }
+    // Fully static groups need nothing: SSR wrote the final value.
 }
 /**
  * Resolve a slot's path against the LIVE DOM. The first index of the

package/dist/liveClient.js

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Live client runtime (Stage 5) — the thin browser side of live components.
  *

package/dist/liveServer.d.ts

@@ -12,7 +12,12 @@
 import type { LiveRouter } from "./liveRouter.js";
 /** The slice of the host HTTP router this needs. */
 export interface LiveHttpRouter {
-    post(path: string, handler: (ctx: LiveHttpContext) => unknown): unknown;
+    /**
+     * The handler returns `void | Promise<void>`, not `unknown`: that is what an
+     * HTTP handler returns in ream and in AdonisJS, and the wider shape made
+     * ream's own Router fail to satisfy this interface.
+     */
+    post(path: string, handler: (ctx: LiveHttpContext) => void | Promise<void>): unknown;
 }
 /** The slice of the host HTTP context this needs (Ream's HttpContext satisfies it). */
 export interface LiveHttpContext {

package/dist/render.js

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Render a `TemplateResult` to the DOM and keep it reactive.
  *
@@ -68,10 +73,17 @@ export function mount(result, cleanups, mounted, mountHooks) {
     // the final string. Collect them in a first pass, attach effects
     // after.
     const multiGroups = new Map();
+    // Resolve EVERY slot's node before applying any of them. Applying a text
+    // slot inserts nodes into the fragment, which shifts the child indices the
+    // remaining paths were computed against — so a slot sitting after a nested
+    // template (`${Icon()}${label}`) used to resolve to the wrong node, or to
+    // none, and silently never bound. Fragments exist precisely so a component
+    // needs no wrapper element; they must not cost the slots that follow them.
+    const resolved = tpl.slots.map((slot) => resolvePath(fragment, slot.path));
     for (let i = 0; i < tpl.slots.length; i++) {
         const slot = tpl.slots[i];
-        const node = resolvePath(fragment, slot.path);
-        if (node === null) {
+        const node = resolved[i];
+        if (node === null || node === undefined) {
             // Path didn't resolve — skip this binding rather than crash (see
             // resolvePath). Degrades to a dead binding; the surrounding render
             // (and any command driving it) survives.

package/dist/rpc.js

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Browser JSON-RPC 2.0 client for Ream's RPC endpoint — aurora's thin binding
  * over the agnostic {@link https://github.com/C9up/comet | @c9up/comet} client.

package/dist/server/renderPage.js

@@ -140,13 +140,29 @@ function escapeAttr(value) {
 }
 /**
  * Escape a JSON payload for safe embedding inside a `<script>` block.
- * The HTML parser closes the script on `</script>` regardless of JSON
- * quoting, so we slash-escape the `/`. We also escape `<!--` and `-->`
- * to dodge HTML-comment interpretation inside the script body.
+ *
+ * The HTML parser ends the script on `</script>` and reinterprets `<!--` /
+ * `-->` as comment markers, whatever the JSON quoting says — so those
+ * characters must not survive literally. They are escaped as \uXXXX, which is
+ * valid JSON: a backslash escape like `\!` or `\>` is NOT, and made
+ * `JSON.parse` throw on the client the moment a prop contained a comment
+ * marker, taking the whole page's hydration with it.
  */
 function escapeJsonForScript(value) {
-    return JSON.stringify(value)
-        .replace(/<\/(script)/gi, "<\\/$1")
-        .replace(/<!--/g, "<\\!--")
-        .replace(/-->/g, "--\\>");
+    return JSON.stringify(value).replace(/[<>&\u2028\u2029]/g, (c) => {
+        switch (c) {
+            case "<":
+                return "\\u003c";
+            case ">":
+                return "\\u003e";
+            case "&":
+                return "\\u0026";
+            // Line separators are valid in JSON strings but terminate a JS line,
+            // so a script block carrying them raw is a syntax error.
+            case "\u2028":
+                return "\\u2028";
+            default:
+                return "\\u2029";
+        }
+    });
 }

package/dist/ssr.js

@@ -46,6 +46,7 @@ function stringifyTemplateResult(result) {
     // segment. This three-step coordination is why the loop holds a
     // `pendingClosingQuote` flag.
     let pendingClosingQuote = false;
+    const scanner = new TagScanner();
     for (let i = 0; i < strings.length; i++) {
         let segment = strings[i];
         if (pendingClosingQuote) {
@@ -59,11 +60,14 @@ function stringifyTemplateResult(result) {
             pendingClosingQuote = true;
         }
         out += segment;
+        scanner.consume(segment);
         if (i < values.length && !skipValue) {
             const value = values[i];
-            const inAttr = isInsideAttribute(out);
+            const inAttr = scanner.insideTag;
             if (inAttr) {
-                out += stringifyValue(value, true);
+                const rendered = stringifyValue(value, true);
+                out += rendered;
+                scanner.consume(rendered);
             }
             else {
                 // Text-region slot — ALWAYS wrap in boundary markers so the SSR
@@ -77,9 +81,13 @@ function stringifyTemplateResult(result) {
                 // (collapseMarkerRanges) so paths align exactly; the range also
                 // anchors scalar text updates and nested-template swaps. Same
                 // part-marker approach as lit-html / Solid.
+                const rendered = stringifyValue(value, false);
                 out += `<!--${SLOT_START}-->`;
-                out += stringifyValue(value, false);
+                out += rendered;
                 out += `<!--${SLOT_END}-->`;
+                // A text-region value may itself carry markup (a nested template
+                // or a SafeString), so it has to move the scanner too.
+                scanner.consume(rendered);
             }
         }
     }
@@ -89,20 +97,47 @@ function stringifyTemplateResult(result) {
 const SLOT_START = "$";
 const SLOT_END = "/$";
 /**
- * Returns true if the position at the end of `htmlSoFar` lives inside
- * the value region of an HTML tag (between `<` and `>`). The check
- * walks backwards from the end, which is the smallest hint we need to
- * decide between text-region and attribute-region escaping.
+ * Tracks whether the cursor sits inside a tag, scanning FORWARD as the output
+ * grows.
+ *
+ * The obvious version walked backwards looking for the nearest `<` or `>`, but
+ * a `>` inside a quoted attribute value — `title="a > b"` — reads as the end of
+ * the tag, so the next interpolation is treated as a text slot and gets wrapped
+ * in `<!--$-->` markers INSIDE an attribute. That corrupts the markup and
+ * desyncs every following slot path at hydration. Quotes are what disambiguate,
+ * and they can only be resolved by reading forward.
+ *
+ * State is carried across appends instead of re-derived, so the whole render
+ * stays linear.
  */
-function isInsideAttribute(htmlSoFar) {
-    for (let i = htmlSoFar.length - 1; i >= 0; i--) {
-        const c = htmlSoFar.charCodeAt(i);
-        if (c === 60 /* '<' */)
-            return true;
-        if (c === 62 /* '>' */)
-            return false;
+class TagScanner {
+    #inTag = false;
+    /** The quote character currently open inside a tag, or empty. */
+    #quote = "";
+    /** Feed everything appended since the last call. */
+    consume(chunk) {
+        for (let i = 0; i < chunk.length; i++) {
+            const c = chunk[i];
+            if (this.#quote !== "") {
+                if (c === this.#quote)
+                    this.#quote = "";
+                continue;
+            }
+            if (this.#inTag) {
+                if (c === '"' || c === "'")
+                    this.#quote = c;
+                else if (c === ">")
+                    this.#inTag = false;
+                continue;
+            }
+            if (c === "<")
+                this.#inTag = true;
+        }
+    }
+    /** True when the cursor is inside a tag — an attribute region. */
+    get insideTag() {
+        return this.#inTag;
     }
-    return false;
 }
 function stringifyValue(value, inAttribute) {
     if (value === null || value === undefined || value === false)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c9up/aurora",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "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",

package/src/browser.ts

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Browser DX helpers — navigation + a typed `localStorage` wrapper.
  *

package/src/html.ts

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Tagged-template HTML parser.
  *

package/src/http.ts

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * `HttpClient` — a small typed wrapper over `fetch` so call sites read
  * `await http.get<User>("/auth/me")` instead of hand-rolling headers,

package/src/hydrate.ts

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Hydration — adopt SSR-rendered HTML in the browser without rebuilding
  * the DOM.
@@ -358,6 +363,12 @@ function hydrateTemplateResult(
 		childNodes: liveNodes,
 	} as unknown as ParentNode;
 
+	// An attribute interpolating several slots — `class="static ${a} ${b}"` — is
+	// ONE attribute value built from all of them plus the static segments in
+	// between. Binding each slot on its own would have the last writer win and
+	// 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];
 		const liveNode = resolvePathLive(syntheticRoot, slot.path, liveNodes);
@@ -373,6 +384,15 @@ function hydrateTemplateResult(
 			}
 			continue;
 		}
+		if (slot.kind === "attr" && slot.staticParts !== undefined) {
+			collectMultiAttr(
+				slot,
+				liveNode as Element,
+				result.values[i],
+				multiGroups,
+			);
+			continue;
+		}
 		hydrateSlot(
 			slot,
 			liveNode,
@@ -382,6 +402,65 @@ function hydrateTemplateResult(
 			markerCursor,
 		);
 	}
+
+	for (const group of multiGroups.values()) {
+		applyMultiAttrGroup(group, cleanups);
+	}
+}
+
+/** One attribute whose value is assembled from several slots. */
+interface MultiAttrGroup {
+	el: Element;
+	name: string;
+	staticParts: readonly string[];
+	values: unknown[];
+}
+
+function collectMultiAttr(
+	slot: AttrSlot,
+	el: Element,
+	value: unknown,
+	groups: Map<string, MultiAttrGroup>,
+): void {
+	if (!slot.staticParts) return;
+	const key = `${slot.name}::${(slot.path as readonly number[]).join(".")}`;
+	let group = groups.get(key);
+	if (!group) {
+		group = { el, name: slot.name, staticParts: slot.staticParts, values: [] };
+		groups.set(key, group);
+	}
+	group.values.push(value);
+}
+
+function applyMultiAttrGroup(
+	group: MultiAttrGroup,
+	cleanups: Disposer[],
+): void {
+	function join(): string {
+		let out = group.staticParts[0] ?? "";
+		for (let i = 0; i < group.values.length; i++) {
+			const v = group.values[i];
+			const resolved =
+				isSignal(v) || typeof v === "function" ? (v as () => unknown)() : v;
+			out += resolved == null || resolved === false ? "" : String(resolved);
+			out += group.staticParts[i + 1] ?? "";
+		}
+		return out;
+	}
+
+	const hasReactive = group.values.some(
+		(v) => isSignal(v) || typeof v === "function",
+	);
+	if (hasReactive) {
+		// SSR already wrote the joined value; re-joining on every tick is what
+		// keeps the statics in place when only one part changes.
+		cleanups.push(
+			effect(() => {
+				group.el.setAttribute(group.name, join());
+			}),
+		);
+	}
+	// Fully static groups need nothing: SSR wrote the final value.
 }
 
 /**

package/src/liveClient.ts

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Live client runtime (Stage 5) — the thin browser side of live components.
  *

package/src/liveServer.ts

@@ -14,7 +14,15 @@ import type { LiveRouter } from "./liveRouter.js";
 
 /** The slice of the host HTTP router this needs. */
 export interface LiveHttpRouter {
-	post(path: string, handler: (ctx: LiveHttpContext) => unknown): unknown;
+	/**
+	 * The handler returns `void | Promise<void>`, not `unknown`: that is what an
+	 * HTTP handler returns in ream and in AdonisJS, and the wider shape made
+	 * ream's own Router fail to satisfy this interface.
+	 */
+	post(
+		path: string,
+		handler: (ctx: LiveHttpContext) => void | Promise<void>,
+	): unknown;
 }
 
 /** The slice of the host HTTP context this needs (Ream's HttpContext satisfies it). */

package/src/render.ts

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Render a `TemplateResult` to the DOM and keep it reactive.
  *
@@ -104,10 +109,20 @@ export function mount(
 	// after.
 	const multiGroups = new Map<string, MultiAttrGroup>();
 
+	// Resolve EVERY slot's node before applying any of them. Applying a text
+	// slot inserts nodes into the fragment, which shifts the child indices the
+	// remaining paths were computed against — so a slot sitting after a nested
+	// template (`${Icon()}${label}`) used to resolve to the wrong node, or to
+	// none, and silently never bound. Fragments exist precisely so a component
+	// needs no wrapper element; they must not cost the slots that follow them.
+	const resolved: Array<Node | null> = tpl.slots.map((slot) =>
+		resolvePath(fragment, slot.path),
+	);
+
 	for (let i = 0; i < tpl.slots.length; i++) {
 		const slot = tpl.slots[i];
-		const node = resolvePath(fragment, slot.path);
-		if (node === null) {
+		const node = resolved[i];
+		if (node === null || node === undefined) {
 			// Path didn't resolve — skip this binding rather than crash (see
 			// resolvePath). Degrades to a dead binding; the surrounding render
 			// (and any command driving it) survives.

package/src/rpc.ts

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Browser JSON-RPC 2.0 client for Ream's RPC endpoint — aurora's thin binding
  * over the agnostic {@link https://github.com/C9up/comet | @c9up/comet} client.

package/src/server/renderPage.ts

@@ -278,13 +278,29 @@ function escapeAttr(value: string): string {
 
 /**
  * Escape a JSON payload for safe embedding inside a `<script>` block.
- * The HTML parser closes the script on `</script>` regardless of JSON
- * quoting, so we slash-escape the `/`. We also escape `<!--` and `-->`
- * to dodge HTML-comment interpretation inside the script body.
+ *
+ * The HTML parser ends the script on `</script>` and reinterprets `<!--` /
+ * `-->` as comment markers, whatever the JSON quoting says — so those
+ * characters must not survive literally. They are escaped as \uXXXX, which is
+ * valid JSON: a backslash escape like `\!` or `\>` is NOT, and made
+ * `JSON.parse` throw on the client the moment a prop contained a comment
+ * marker, taking the whole page's hydration with it.
  */
 function escapeJsonForScript(value: unknown): string {
-	return JSON.stringify(value)
-		.replace(/<\/(script)/gi, "<\\/$1")
-		.replace(/<!--/g, "<\\!--")
-		.replace(/-->/g, "--\\>");
+	return JSON.stringify(value).replace(/[<>&\u2028\u2029]/g, (c) => {
+		switch (c) {
+			case "<":
+				return "\\u003c";
+			case ">":
+				return "\\u003e";
+			case "&":
+				return "\\u0026";
+			// Line separators are valid in JSON strings but terminate a JS line,
+			// so a script block carrying them raw is a syntax error.
+			case "\u2028":
+				return "\\u2028";
+			default:
+				return "\\u2029";
+		}
+	});
 }

package/src/ssr.ts

@@ -50,6 +50,7 @@ function stringifyTemplateResult(result: TemplateResult): string {
 	// segment. This three-step coordination is why the loop holds a
 	// `pendingClosingQuote` flag.
 	let pendingClosingQuote = false;
+	const scanner = new TagScanner();
 	for (let i = 0; i < strings.length; i++) {
 		let segment = strings[i];
 		if (pendingClosingQuote) {
@@ -63,11 +64,14 @@ function stringifyTemplateResult(result: TemplateResult): string {
 			pendingClosingQuote = true;
 		}
 		out += segment;
+		scanner.consume(segment);
 		if (i < values.length && !skipValue) {
 			const value = values[i];
-			const inAttr = isInsideAttribute(out);
+			const inAttr = scanner.insideTag;
 			if (inAttr) {
-				out += stringifyValue(value, true);
+				const rendered = stringifyValue(value, true);
+				out += rendered;
+				scanner.consume(rendered);
 			} else {
 				// Text-region slot — ALWAYS wrap in boundary markers so the SSR
 				// node structure matches the client template, which keeps exactly
@@ -80,9 +84,13 @@ function stringifyTemplateResult(result: TemplateResult): string {
 				// (collapseMarkerRanges) so paths align exactly; the range also
 				// anchors scalar text updates and nested-template swaps. Same
 				// part-marker approach as lit-html / Solid.
+				const rendered = stringifyValue(value, false);
 				out += `<!--${SLOT_START}-->`;
-				out += stringifyValue(value, false);
+				out += rendered;
 				out += `<!--${SLOT_END}-->`;
+				// A text-region value may itself carry markup (a nested template
+				// or a SafeString), so it has to move the scanner too.
+				scanner.consume(rendered);
 			}
 		}
 	}
@@ -94,18 +102,45 @@ const SLOT_START = "$";
 const SLOT_END = "/$";
 
 /**
- * Returns true if the position at the end of `htmlSoFar` lives inside
- * the value region of an HTML tag (between `<` and `>`). The check
- * walks backwards from the end, which is the smallest hint we need to
- * decide between text-region and attribute-region escaping.
+ * Tracks whether the cursor sits inside a tag, scanning FORWARD as the output
+ * grows.
+ *
+ * The obvious version walked backwards looking for the nearest `<` or `>`, but
+ * a `>` inside a quoted attribute value — `title="a > b"` — reads as the end of
+ * the tag, so the next interpolation is treated as a text slot and gets wrapped
+ * in `<!--$-->` markers INSIDE an attribute. That corrupts the markup and
+ * desyncs every following slot path at hydration. Quotes are what disambiguate,
+ * and they can only be resolved by reading forward.
+ *
+ * State is carried across appends instead of re-derived, so the whole render
+ * stays linear.
  */
-function isInsideAttribute(htmlSoFar: string): boolean {
-	for (let i = htmlSoFar.length - 1; i >= 0; i--) {
-		const c = htmlSoFar.charCodeAt(i);
-		if (c === 60 /* '<' */) return true;
-		if (c === 62 /* '>' */) return false;
+class TagScanner {
+	#inTag = false;
+	/** The quote character currently open inside a tag, or empty. */
+	#quote = "";
+
+	/** Feed everything appended since the last call. */
+	consume(chunk: string): void {
+		for (let i = 0; i < chunk.length; i++) {
+			const c = chunk[i];
+			if (this.#quote !== "") {
+				if (c === this.#quote) this.#quote = "";
+				continue;
+			}
+			if (this.#inTag) {
+				if (c === '"' || c === "'") this.#quote = c;
+				else if (c === ">") this.#inTag = false;
+				continue;
+			}
+			if (c === "<") this.#inTag = true;
+		}
+	}
+
+	/** True when the cursor is inside a tag — an attribute region. */
+	get insideTag(): boolean {
+		return this.#inTag;
 	}
-	return false;
 }
 
 function stringifyValue(value: unknown, inAttribute: boolean): string {