@sigil-dev/runtime 0.7.7 → 0.8.0

package/index.test.ts

@@ -1,1612 +1,1616 @@
-import { describe, expect, test } from "bun:test";
-import {
-	batch,
-	claim,
-	claimComment,
-	claimText,
-	createEffect,
-	createEffectPre,
-	createInspectEffect,
-	createMemo,
-	createProfilerEffect,
-	createRawSignal,
-	createSignal,
-	easeInCubic,
-	easeInOutCubic,
-	easeInOutQuad,
-	easeInOutQuart,
-	easeInOutQuint,
-	easeInOutSine,
-	easeInQuad,
-	easeInQuart,
-	easeInQuint,
-	easeInSine,
-	easeOutCubic,
-	easeOutQuad,
-	easeOutQuart,
-	easeOutQuint,
-	easeOutSine,
-	hydrateKeyedList,
-	linear,
-	ReactiveMap,
-	ReactiveSet,
-	reconcile,
-	snapshot,
-	tick,
-	tracking,
-	withEffectScope,
-} from "./index.ts";
-
-// Minimal DOM mock for reconcile tests
-class MockNode {
-	parentNode: MockNode | null = null;
-	children: MockNode[] = [];
-	name: string;
-	constructor(name: string) {
-		this.name = name;
-	}
-	before(node: MockNode) {
-		// Remove from old parent
-		if (node.parentNode) {
-			const idx = node.parentNode.children.indexOf(node);
-			if (idx >= 0) node.parentNode.children.splice(idx, 1);
-		}
-		// Insert before this node in parent
-		if (this.parentNode) {
-			const idx = this.parentNode.children.indexOf(this);
-			this.parentNode.children.splice(idx, 0, node);
-			node.parentNode = this.parentNode;
-		}
-	}
-	removeChild(node: MockNode) {
-		const idx = this.children.indexOf(node);
-		if (idx >= 0) this.children.splice(idx, 1);
-		node.parentNode = null;
-	}
-	toString() {
-		return this.name;
-	}
-}
-class MockComment extends MockNode {
-	constructor() {
-		super("");
-	}
-}
-class MockElement extends MockNode {}
-
-function nodeNames(parent: MockNode): string[] {
-	return parent.children.filter((c) => c.name !== "").map((c) => c.name);
-}
-
-describe("Runtime", () => {
-	describe("Basic reactivity", () => {
-		describe("createSignal", () => {
-			test("returns initial value", () => {
-				const count = createSignal(0);
-				expect(count()).toBe(0);
-			});
-
-			test("updates on set", () => {
-				const count = createSignal(0);
-				count.set(5);
-				expect(count()).toBe(5);
-			});
-		});
-
-		describe("createEffect", () => {
-			test("runs immediately", () => {
-				const count = createSignal(0);
-				let seen = -1;
-				createEffect(() => {
-					seen = count();
-				});
-				expect(seen).toBe(0);
-			});
-
-			test("reruns on signal change", () => {
-				const count = createSignal(0);
-				let seen = -1;
-				createEffect(() => {
-					seen = count();
-				});
-				batch(() => {
-					count.set(5);
-				});
-				expect(seen).toBe(5);
-			});
-		});
-
-		describe("createMemo", () => {
-			test("derives value", () => {
-				const count = createSignal(2);
-				const doubled = createMemo(() => count() * 2);
-				expect(doubled()).toBe(4);
-			});
-
-			test("updates when dependency changes", () => {
-				const count = createSignal(2);
-				const doubled = createMemo(() => count() * 2);
-				batch(() => {
-					count.set(5);
-				});
-				expect(doubled()).toBe(10);
-			});
-		});
-	});
-
-	describe("reconcile", () => {
-		function setup() {
-			const parent = new MockElement("parent");
-			const anchor = new MockComment();
-			parent.children.push(anchor);
-			anchor.parentNode = parent;
-			const keyMap = new Map<unknown, MockNode>();
-			return { parent, anchor, keyMap };
-		}
-
-		/** Cast wrapper — MockNode/MockElement satisfy the DOM APIs reconcile actually uses */
-		function mockReconcile<T>(
-			anchor: MockComment,
-			keyMap: Map<unknown, MockNode>,
-			newItems: T[],
-			getKey: (item: T) => unknown,
-			createNode: (item: T) => MockNode,
-		) {
-			reconcile(
-				anchor as unknown as Comment,
-				keyMap as unknown as Map<unknown, Node>,
-				newItems,
-				getKey,
-				createNode as unknown as (item: T) => Node,
-			);
-		}
-
-		test("inserts initial items", () => {
-			const { parent, anchor, keyMap } = setup();
-			const items = [
-				{ id: 1, text: "a" },
-				{ id: 2, text: "b" },
-			];
-
-			mockReconcile(
-				anchor,
-				keyMap,
-				items,
-				(i) => i.id,
-				(i) => new MockElement(i.text),
-			);
-
-			expect(nodeNames(parent)).toEqual(["a", "b"]);
-			expect(keyMap.size).toBe(2);
-		});
-
-		test("reuses nodes with same key", () => {
-			const { parent, anchor, keyMap } = setup();
-			const items = [
-				{ id: 1, text: "a" },
-				{ id: 2, text: "b" },
-			];
-
-			mockReconcile(
-				anchor,
-				keyMap,
-				items,
-				(i) => i.id,
-				(i) => new MockElement(i.text),
-			);
-			const nodeA = keyMap.get(1);
-
-			mockReconcile(
-				anchor,
-				keyMap,
-				items,
-				(i) => i.id,
-				(i) => new MockElement(i.text),
-			);
-
-			expect(keyMap.get(1)).toBe(nodeA);
-			expect(nodeNames(parent)).toEqual(["a", "b"]);
-		});
-
-		test("removes deleted items", () => {
-			const { parent, anchor, keyMap } = setup();
-			mockReconcile(
-				anchor,
-				keyMap,
-				[{ id: 1 }, { id: 2 }, { id: 3 }],
-				(i) => i.id,
-				(i) => new MockElement(`n${i.id}`),
-			);
-			expect(nodeNames(parent)).toEqual(["n1", "n2", "n3"]);
-
-			mockReconcile(
-				anchor,
-				keyMap,
-				[{ id: 1 }, { id: 3 }],
-				(i) => i.id,
-				(i) => new MockElement(`n${i.id}`),
-			);
-
-			expect(nodeNames(parent)).toEqual(["n1", "n3"]);
-			expect(keyMap.has(2)).toBe(false);
-		});
-
-		test("moves nodes to new order", () => {
-			const { parent, anchor, keyMap } = setup();
-			mockReconcile(
-				anchor,
-				keyMap,
-				[{ id: 1 }, { id: 2 }, { id: 3 }],
-				(i) => i.id,
-				(i) => new MockElement(`n${i.id}`),
-			);
-			const node1 = keyMap.get(1);
-			const node2 = keyMap.get(2);
-			const node3 = keyMap.get(3);
-
-			mockReconcile(
-				anchor,
-				keyMap,
-				[{ id: 3 }, { id: 2 }, { id: 1 }],
-				(i) => i.id,
-				(i) => new MockElement(`n${i.id}`),
-			);
-
-			expect(keyMap.get(1)).toBe(node1);
-			expect(keyMap.get(2)).toBe(node2);
-			expect(keyMap.get(3)).toBe(node3);
-			expect(nodeNames(parent)).toEqual(["n3", "n2", "n1"]);
-		});
-
-		test("handles mixed add/remove/reorder", () => {
-			const { parent, anchor, keyMap } = setup();
-			mockReconcile(
-				anchor,
-				keyMap,
-				[{ id: 1 }, { id: 2 }, { id: 3 }],
-				(i) => i.id,
-				(i) => new MockElement(`n${i.id}`),
-			);
-			const node1 = keyMap.get(1);
-			const node3 = keyMap.get(3);
-
-			mockReconcile(
-				anchor,
-				keyMap,
-				[{ id: 4 }, { id: 3 }, { id: 1 }],
-				(i) => i.id,
-				(i) => new MockElement(`n${i.id}`),
-			);
-
-			expect(keyMap.has(2)).toBe(false);
-			expect(keyMap.get(1)).toBe(node1);
-			expect(keyMap.get(3)).toBe(node3);
-			expect(keyMap.has(4)).toBe(true);
-			expect(nodeNames(parent)).toEqual(["n4", "n3", "n1"]);
-		});
-
-		test("empty list removes all", () => {
-			const { parent, anchor, keyMap } = setup();
-			mockReconcile(
-				anchor,
-				keyMap,
-				[{ id: 1 }, { id: 2 }],
-				(i) => i.id,
-				(i) => new MockElement(`n${i.id}`),
-			);
-			expect(nodeNames(parent)).toEqual(["n1", "n2"]);
-
-			mockReconcile(
-				anchor,
-				keyMap,
-				[] as { id: number }[],
-				(i) => i.id,
-				(i) => new MockElement(`n${i.id}`),
-			);
-
-			expect(nodeNames(parent)).toEqual([]);
-			expect(keyMap.size).toBe(0);
-		});
-
-		test("from empty to populated", () => {
-			const { parent, anchor, keyMap } = setup();
-			expect(nodeNames(parent)).toEqual([]);
-
-			mockReconcile(
-				anchor,
-				keyMap,
-				[{ id: 1 }, { id: 2 }],
-				(i) => i.id,
-				(i) => new MockElement(`n${i.id}`),
-			);
-
-			expect(nodeNames(parent)).toEqual(["n1", "n2"]);
-		});
-
-		test("preserves anchor position", () => {
-			const { parent, anchor, keyMap } = setup();
-			const header = new MockElement("header");
-			anchor.before(header);
-
-			mockReconcile(
-				anchor,
-				keyMap,
-				[{ id: 1 }],
-				(i) => i.id,
-				() => new MockElement("item"),
-			);
-
-			expect(nodeNames(parent)).toEqual(["header", "item"]);
-		});
-	});
-
-	test("effect cleanup runs before rerun", () => {
-		const count = createSignal(0);
-		const log: string[] = [];
-		createEffect(() => {
-			count(); // subscribe
-			return () => log.push("cleanup");
-		});
-		count.set(1);
-		count.set(2);
-		batch(() => {});
-		expect(log).toEqual(["cleanup"]);
-	});
-
-	test("disposer stops effect", () => {
-		const count = createSignal(0);
-		let runs = 0;
-		const stop = createEffect(() => {
-			count();
-			runs++;
-		});
-		batch(() => {
-			count.set(1);
-		});
-		stop();
-		batch(() => {
-			count.set(2);
-		});
-		expect(runs).toBe(2); // initial + one update, not three
-	});
-
-	test("cleanup runs on dispose", () => {
-		let cleaned = false;
-		const stop = createEffect(() => () => {
-			cleaned = true;
-		});
-		stop();
-		expect(cleaned).toBe(true);
-	});
-});
-
-describe("batch", () => {
-	test("multiple signals in batch trigger effect once", () => {
-		const count = createSignal(0);
-		const name = createSignal("a");
-		let runs = 0;
-		createEffect(() => {
-			count();
-			name();
-			runs++;
-		});
-		expect(runs).toBe(1); // initial run
-
-		batch(() => {
-			count.set(1);
-			name.set("b");
-		});
-		expect(runs).toBe(2); // one run, not two
-	});
-
-	test("nested batches flush on outermost exit", () => {
-		const count = createSignal(0);
-		let runs = 0;
-		createEffect(() => {
-			count();
-			runs++;
-		});
-
-		batch(() => {
-			batch(() => {
-				count.set(1);
-			});
-			count.set(2); // still inside outer batch
-		});
-		expect(runs).toBe(2); // one run after outer exits
-	});
-
-	test("outside batch auto-batches to microtask", () => {
-		const count = createSignal(0);
-		let runs = 0;
-		createEffect(() => {
-			count();
-			runs++;
-		});
-
-		count.set(1);
-		count.set(2);
-		// Without batch, effects are auto-batched — no synchronous run
-		expect(runs).toBe(1); // initial only
-
-		batch(() => {});
-		expect(runs).toBe(2); // initial + one batched update (last write wins)
-	});
-});
-
-describe("createSignal with objects", () => {
-	test("property read returns value", () => {
-		const state = createSignal({ name: "Alice" });
-		expect(state().name).toBe("Alice");
-	});
-
-	test("property write triggers effect", () => {
-		const state = createSignal({ name: "Alice" });
-		let seen = "";
-		createEffect(() => {
-			seen = state().name;
-		});
-		expect(seen).toBe("Alice");
-		batch(() => {
-			state().name = "Bob";
-		});
-		expect(seen).toBe("Bob");
-	});
-
-	test("unrelated property change does not trigger effect", () => {
-		const state = createSignal({ name: "Alice", age: 30 });
-		let runs = 0;
-		createEffect(() => {
-			state().name;
-			runs++;
-		});
-		expect(runs).toBe(1);
-		batch(() => {
-			state().age = 31;
-		});
-		expect(runs).toBe(1);
-		batch(() => {
-			state().name = "Bob";
-		});
-		expect(runs).toBe(2);
-	});
-
-	test("deeply nested property access is reactive", () => {
-		const state = createSignal({ user: { address: { city: "NYC" } } });
-		let seen = "";
-		createEffect(() => {
-			seen = state().user.address.city;
-		});
-		expect(seen).toBe("NYC");
-		batch(() => {
-			state().user.address.city = "LA";
-		});
-		expect(seen).toBe("LA");
-	});
-
-	test("proxyCache deduplication — same proxy for repeated nested access", () => {
-		const state = createSignal({ address: { city: "Agartha" } });
-		const a1 = state().address;
-		const a2 = state().address;
-		expect(a1).toBe(a2);
-
-		let seen = "";
-		createEffect(() => {
-			seen = state().address.city;
-		});
-		expect(seen).toBe("Agartha");
-		batch(() => {
-			state().address.city = "Hyperborea";
-		});
-		expect(seen).toBe("Hyperborea");
-	});
-
-	test(".set() replaces entire object", () => {
-		const state = createSignal({ name: "Alice", age: 30 });
-		let seen = "";
-		createEffect(() => {
-			seen = state().name;
-		});
-		expect(seen).toBe("Alice");
-		batch(() => {
-			state.set({ name: "Charlie", age: 25 });
-		});
-		expect(seen).toBe("Charlie");
-	});
-
-	test(".peek() reads without tracking", () => {
-		const state = createSignal({ name: "Alice" });
-		let runs = 0;
-		createEffect(() => {
-			state.peek();
-			runs++;
-		});
-		expect(runs).toBe(1);
-		batch(() => {
-			state().name = "Bob";
-		});
-		expect(runs).toBe(1);
-	});
-
-	test("JSON.stringify works on proxy", () => {
-		const state = createSignal({ name: "Alice", age: 30 });
-		expect(JSON.stringify(state())).toBe('{"name":"Alice","age":30}');
-	});
-
-	test("Object.keys works on proxy", () => {
-		const state = createSignal({ name: "Alice", age: 30 });
-		expect(Object.keys(state())).toEqual(["name", "age"]);
-	});
-
-	test("spread works on proxy", () => {
-		const state = createSignal({ name: "Alice" });
-		const copy = { ...state() };
-		expect(copy).toEqual({ name: "Alice" });
-	});
-});
-
-describe("createSignal with arrays", () => {
-	test("length is reactive", () => {
-		const items = createSignal([1, 2, 3]);
-		let len = 0;
-		createEffect(() => {
-			len = items().length;
-		});
-		expect(len).toBe(3);
-		batch(() => {
-			items().push(4);
-		});
-		expect(len).toBe(4);
-	});
-
-	test("index access is reactive", () => {
-		const items = createSignal([1, 2, 3]);
-		let first = 0;
-		//@ts-expect-error the assertion for that is below
-		createEffect(() => {
-			first = items()[0];
-		});
-		expect(first).toBe(1);
-		batch(() => {
-			items()[0] = 99;
-		});
-		expect(first).toBe(99);
-	});
-
-	test("push triggers effects that read length", () => {
-		const items = createSignal<number[]>([]);
-		let seen: number[] = [];
-		createEffect(() => {
-			seen = [...items()];
-		});
-		expect(seen).toEqual([]);
-		batch(() => {
-			items().push(1);
-		});
-		expect(seen).toEqual([1]);
-		batch(() => {
-			items().push(2);
-		});
-		expect(seen).toEqual([1, 2]);
-	});
-
-	test("pop triggers length effect", () => {
-		const items = createSignal([1, 2, 3]);
-		let len = 0;
-		createEffect(() => {
-			len = items().length;
-		});
-		expect(len).toBe(3);
-		batch(() => {
-			items().pop();
-		});
-		expect(len).toBe(2);
-	});
-
-	test("splice triggers effects", () => {
-		const items = createSignal([1, 2, 3, 4]);
-		let seen: number[] = [];
-		createEffect(() => {
-			seen = [...items()];
-		});
-		batch(() => {
-			items().splice(1, 2);
-		});
-		expect(seen).toEqual([1, 4]);
-	});
-
-	test("push + $derived recomputes", () => {
-		const items = createSignal([1, 2, 3]);
-		const doubled = createMemo(() => items().map((x) => x * 2));
-		expect(doubled()).toEqual([2, 4, 6]);
-		batch(() => {
-			items().push(4);
-		});
-		expect(doubled()).toEqual([2, 4, 6, 8]);
-	});
-});
-
-describe("proxy edge cases", () => {
-	test("null is not proxied", () => {
-		const state = createSignal(null);
-		expect(typeof state).toBe("function");
-		expect(state()).toBe(null);
-	});
-
-	test("nested arrays in objects are reactive", () => {
-		const state = createSignal({ items: [1, 2, 3] });
-		let seen: number[] = [];
-		createEffect(() => {
-			seen = [...state().items];
-		});
-		expect(seen).toEqual([1, 2, 3]);
-		batch(() => {
-			state().items.push(4);
-		});
-		expect(seen).toEqual([1, 2, 3, 4]);
-	});
-
-	test("multiple effects on same object, independent keys", () => {
-		const state = createSignal({ x: 0, y: 0 });
-		let xSeen = 0,
-			ySeen = 0,
-			xRuns = 0,
-			yRuns = 0;
-		createEffect(() => {
-			xSeen = state().x;
-			xRuns++;
-		});
-		createEffect(() => {
-			ySeen = state().y;
-			yRuns++;
-		});
-		expect(xRuns).toBe(1);
-		expect(yRuns).toBe(1);
-
-		batch(() => {
-			state().x = 5;
-		});
-		expect(xSeen).toBe(5);
-		expect(ySeen).toBe(0);
-		expect(xRuns).toBe(2);
-		expect(yRuns).toBe(1);
-
-		batch(() => {
-			state().y = 10;
-		});
-		expect(xSeen).toBe(5);
-		expect(ySeen).toBe(10);
-		expect(xRuns).toBe(2);
-		expect(yRuns).toBe(2);
-	});
-});
-
-describe("claim", () => {
-	test("claims an element by tag name and removes from pool", () => {
-		const div = document.createElement("div");
-		const span = document.createElement("span");
-		const pool: ChildNode[] = [div, span];
-		const result = claim(pool, "div");
-		expect(result).toBe(div);
-		expect(pool).toEqual([span]);
-	});
-
-	test("falls back to createElement when no match", () => {
-		const span = document.createElement("span");
-		const pool: ChildNode[] = [span];
-		const result = claim(pool, "div");
-		expect(result.tagName).toBe("DIV");
-		expect(pool).toEqual([span]);
-	});
-
-	test("claims first match only", () => {
-		const d1 = document.createElement("div");
-		const d2 = document.createElement("div");
-		const pool: ChildNode[] = [d1, d2];
-		const result = claim(pool, "div");
-		expect(result).toBe(d1);
-		expect(pool).toEqual([d2]);
-	});
-
-	test("is case-insensitive on tag comparison", () => {
-		const svg = document.createElement("SVG");
-		const pool: ChildNode[] = [svg];
-		const result = claim(pool, "svg");
-		expect(result).toBe(svg);
-	});
-
-	test("returns empty pool after claiming all matches", () => {
-		const div = document.createElement("div");
-		const pool: ChildNode[] = [div];
-		claim(pool, "div");
-		expect(pool).toEqual([]);
-	});
-
-	test("handles empty pool", () => {
-		const pool: ChildNode[] = [];
-		const result = claim(pool, "div");
-		expect(result.tagName).toBe("DIV");
-		expect(pool).toEqual([]);
-	});
-});
-
-describe("claimText", () => {
-	test("claims a text node from pool", () => {
-		const text = document.createTextNode("hello");
-		const div = document.createElement("div");
-		const pool: ChildNode[] = [text, div];
-		const result = claimText(pool);
-		expect(result).toBe(text);
-		expect(pool).toEqual([div]);
-	});
-
-	test("falls back to createTextNode when no text node in pool", () => {
-		const div = document.createElement("div");
-		const pool: ChildNode[] = [div];
-		const result = claimText(pool);
-		expect(result).toBeInstanceOf(Text);
-		expect(result.textContent).toBe("");
-		expect(pool).toEqual([div]);
-	});
-
-	test("handles empty pool", () => {
-		const pool: ChildNode[] = [];
-		const result = claimText(pool);
-		expect(result).toBeInstanceOf(Text);
-		expect(pool).toEqual([]);
-	});
-
-	test("claims first text node only", () => {
-		const t1 = document.createTextNode("a");
-		const t2 = document.createTextNode("b");
-		const pool: ChildNode[] = [t1, t2];
-		const result = claimText(pool);
-		expect(result).toBe(t1);
-		expect(pool).toEqual([t2]);
-	});
-});
-
-describe("hydration: full element tree claim", () => {
-	test("simulates SSR → hydration → scoped pools", () => {
-		// Simulate SSR output: <div><h1>Title</h1><p>Body</p></div>
-		const root = document.createElement("div");
-		const h1 = document.createElement("h1");
-		h1.appendChild(document.createTextNode("Title"));
-		const p = document.createElement("p");
-		p.appendChild(document.createTextNode("Body"));
-		root.appendChild(h1);
-		root.appendChild(p);
-
-		// Hydration entry: claim root from page-level pool
-		const pageNodes: ChildNode[] = [root];
-		const div = claim(pageNodes, "div");
-		expect(div).toBe(root);
-
-		// Scope: root's children
-		const childNodes = Array.from(div.childNodes);
-
-		// Claim h1
-		const claimedH1 = claim(childNodes, "h1");
-		expect(claimedH1).toBe(h1);
-		// Claim text inside h1 — removes from pool array, not DOM
-		const h1Pool = Array.from(claimedH1.childNodes);
-		const h1Text = claimText(h1Pool);
-		expect(h1Text.textContent).toBe("Title");
-		expect(h1Pool.length).toBe(0); // removed from pool
-
-		// Claim p
-		const claimedP = claim(childNodes, "p");
-		expect(claimedP).toBe(p);
-		const pPool = Array.from(claimedP.childNodes);
-		const pText = claimText(pPool);
-		expect(pText.textContent).toBe("Body");
-
-		// No leftover nodes in parent pool
-		expect(childNodes.length).toBe(0);
-	});
-
-	test("falls back gracefully for SSR/client mismatch", () => {
-		// SSR rendered <div><span>OK</span></div>
-		// Client expects <div><p>OK</p></div>
-		const root = document.createElement("div");
-		const span = document.createElement("span");
-		span.appendChild(document.createTextNode("OK"));
-		root.appendChild(span);
-
-		const nodes = Array.from(root.childNodes);
-		// Try to claim a <p> — doesn't exist, creates new one
-		const p = claim(nodes, "p");
-		expect(p.tagName).toBe("P");
-		expect(p.childNodes.length).toBe(0); // new element has no children
-		// Original span still in pool
-		expect(nodes.length).toBe(1);
-		expect(nodes[0]).toBe(span);
-	});
-});
-
-describe("Scary reactivity", () => {
-	test("effect unsubscribes from stale dependencies", () => {
-		const condition = createSignal(true);
-		const a = createSignal(1);
-		const b = createSignal(1);
-		let runs = 0;
-
-		createEffect(() => {
-			runs++;
-			if (condition()) {
-				a(); // read a only when condition is true
-			} else {
-				b(); // read b only when condition is false
-			}
-		});
-
-		expect(runs).toBe(1);
-
-		// flip condition, effect should now track b, not a
-		batch(() => {
-			condition.set(false);
-		});
-		expect(runs).toBe(2);
-
-		// updating a should NOT trigger the effect anymore
-		batch(() => {
-			a.set(99);
-		});
-		expect(runs).toBe(2); // ← this will fail with current implementation
-	});
-});
-
-describe("withEffectScope", () => {
-	test("collects effects created during fn()", () => {
-		const count = createSignal(0);
-		let runs = 0;
-		withEffectScope(() => {
-			createEffect(() => {
-				count();
-				runs++;
-			});
-		});
-		expect(runs).toBe(1);
-		batch(() => {
-			count.set(1);
-		});
-		expect(runs).toBe(2);
-	});
-
-	test("dispose stops all collected effects", () => {
-		const count = createSignal(0);
-		let runs = 0;
-		const dispose = withEffectScope(() => {
-			createEffect(() => {
-				count();
-				runs++;
-			});
-		});
-		expect(runs).toBe(1);
-		batch(() => {
-			count.set(1);
-		});
-		expect(runs).toBe(2);
-
-		dispose();
-
-		batch(() => {
-			count.set(2);
-		});
-		expect(runs).toBe(2); // stopped — no further runs
-	});
-
-	test("dispose stops multiple effects in the same scope", () => {
-		const a = createSignal(0);
-		const b = createSignal(0);
-		let runsA = 0;
-		let runsB = 0;
-		const dispose = withEffectScope(() => {
-			createEffect(() => {
-				a();
-				runsA++;
-			});
-			createEffect(() => {
-				b();
-				runsB++;
-			});
-		});
-		batch(() => {
-			a.set(1);
-			b.set(1);
-		});
-		expect(runsA).toBe(2);
-		expect(runsB).toBe(2);
-
-		dispose();
-
-		batch(() => {
-			a.set(2);
-			b.set(2);
-		});
-		expect(runsA).toBe(2);
-		expect(runsB).toBe(2);
-	});
-
-	test("effects outside the scope are unaffected by dispose", () => {
-		const count = createSignal(0);
-		let outsideRuns = 0;
-		let insideRuns = 0;
-
-		createEffect(() => {
-			count();
-			outsideRuns++;
-		});
-
-		const dispose = withEffectScope(() => {
-			createEffect(() => {
-				count();
-				insideRuns++;
-			});
-		});
-
-		batch(() => {
-			count.set(1);
-		});
-		expect(outsideRuns).toBe(2);
-		expect(insideRuns).toBe(2);
-
-		dispose();
-
-		batch(() => {
-			count.set(2);
-		});
-		expect(outsideRuns).toBe(3); // still running
-		expect(insideRuns).toBe(2); // stopped
-	});
-
-	test("nested scopes: inner dispose doesn't affect outer", () => {
-		const count = createSignal(0);
-		let outerRuns = 0;
-		let innerRuns = 0;
-
-		const disposeOuter = withEffectScope(() => {
-			createEffect(() => {
-				count();
-				outerRuns++;
-			});
-			// simulates a child component scope inside a page scope
-			const disposeInner = withEffectScope(() => {
-				createEffect(() => {
-					count();
-					innerRuns++;
-				});
-			});
-			disposeInner();
-		});
-
-		batch(() => {
-			count.set(1);
-		});
-		expect(outerRuns).toBe(2);
-		expect(innerRuns).toBe(1); // stopped on inner dispose
-
-		disposeOuter();
-		batch(() => {
-			count.set(2);
-		});
-		expect(outerRuns).toBe(2); // stopped on outer dispose
-	});
-
-	test("createMemo effects are collected in scope", () => {
-		const count = createSignal(0);
-		let memoRuns = 0;
-		const dispose = withEffectScope(() => {
-			// createMemo internally calls createEffect
-			const doubled = createMemo(() => {
-				memoRuns++;
-				return count() * 2;
-			});
-			expect(doubled()).toBe(0);
-		});
-		expect(memoRuns).toBe(1);
-		batch(() => {
-			count.set(5);
-		});
-		expect(memoRuns).toBe(2);
-
-		dispose();
-		batch(() => {
-			count.set(10);
-		});
-		expect(memoRuns).toBe(2); // memo's internal effect stopped
-	});
-
-	test("dispose is idempotent", () => {
-		const count = createSignal(0);
-		let runs = 0;
-		const dispose = withEffectScope(() => {
-			createEffect(() => {
-				count();
-				runs++;
-			});
-		});
-		dispose();
-		dispose(); // second call must not throw or double-fire
-		batch(() => {
-			count.set(1);
-		});
-		expect(runs).toBe(1);
-	});
-});
-
-describe("claimComment", () => {
-	test("claims a comment node from pool matching text", () => {
-		const comment = document.createComment("");
-		const div = document.createElement("div");
-		const pool: ChildNode[] = [comment, div];
-		const result = claimComment(pool);
-		expect(result).toBe(comment);
-		expect(pool).toEqual([div]);
-	});
-
-	test("skips comments with non-matching data", () => {
-		const comment = document.createComment("g");
-		const div = document.createElement("div");
-		const pool: ChildNode[] = [comment, div];
-		const result = claimComment(pool, "");
-		expect(result).not.toBe(comment);
-		expect(result).toBeInstanceOf(Comment);
-		expect(pool).toEqual([comment, div]); // pool unchanged
-	});
-
-	test("falls back to createComment when no comment in pool", () => {
-		const div = document.createElement("div");
-		const pool: ChildNode[] = [div];
-		const result = claimComment(pool);
-		expect(result).toBeInstanceOf(Comment);
-		expect(pool).toEqual([div]);
-	});
-
-	test("handles empty pool", () => {
-		const pool: ChildNode[] = [];
-		const result = claimComment(pool);
-		expect(result).toBeInstanceOf(Comment);
-		expect(pool).toEqual([]);
-	});
-});
-
-describe("hydrateKeyedList", () => {
-	test("claims anchor and sibling elements, builds keyMap", () => {
-		// Simulate SSR output: <!--g--> <li>A</li> <li>B</li> <!--/g-->
-		const parent = document.createElement("ul");
-		const open = document.createComment("g");
-		const li1 = document.createElement("li");
-		li1.textContent = "A";
-		const li2 = document.createElement("li");
-		li2.textContent = "B";
-		const close = document.createComment("/g");
-		parent.appendChild(open);
-		parent.appendChild(li1);
-		parent.appendChild(li2);
-		parent.appendChild(close);
-
-		const pool: ChildNode[] = [open, li1, li2, close];
-		const items = [{ id: "a" }, { id: "b" }];
-
-		const result = hydrateKeyedList(
-			pool,
-			items,
-			(item) => item.id,
-			(item) => {
-				const li = document.createElement("li");
-				li.textContent = item.id;
-				return li;
-			},
-		);
-
-		expect(result.anchor).toBe(open);
-		expect(result.keyMap.size).toBe(2);
-		expect(result.keyMap.get("a")).toBe(li1);
-		expect(result.keyMap.get("b")).toBe(li2);
-		// Pool lost anchor (g) via claimComment.
-		// li nodes + /g remain in pool array (walk removes from DOM only)
-		expect(pool.length).toBe(3); // li1, li2, /g still in pool array
-	});
-
-	test("handles SSR/client order mismatch by reconciling", () => {
-		// SSR rendered: A, B. Client expects: B, A.
-		const parent = document.createElement("ul");
-		const open = document.createComment("g");
-		const liA = document.createElement("li");
-		liA.textContent = "A";
-		const liB = document.createElement("li");
-		liB.textContent = "B";
-		const close = document.createComment("/g");
-		parent.appendChild(open);
-		parent.appendChild(liA);
-		parent.appendChild(liB);
-		parent.appendChild(close);
-
-		// Pool has anchor + items in SSR order
-		const pool: ChildNode[] = [open, liA, liB, close];
-		// Client order is reversed
-		const items = [{ id: "b" }, { id: "a" }];
-
-		const result = hydrateKeyedList(
-			pool,
-			items,
-			(item) => item.id,
-			(item) => {
-				const li = document.createElement("li");
-				li.textContent = item.id;
-				return li;
-			},
-		);
-
-		// keyMap should have the claimed nodes (mapped by SSR position)
-		expect(result.keyMap.get("b")).toBe(liA); // first sibling → first signal item key
-		expect(result.keyMap.get("a")).toBe(liB); // second sibling → second signal item key
-	});
-
-	test("empty signal items → empty keyMap", () => {
-		const parent = document.createElement("ul");
-		const open = document.createComment("g");
-		const close = document.createComment("/g");
-		parent.appendChild(open);
-		parent.appendChild(close);
-
-		const pool: ChildNode[] = [open, close];
-		const result = hydrateKeyedList(
-			pool,
-			[],
-			(item: { id: string }) => item.id,
-			() => document.createElement("li"),
-		);
-
-		expect(result.anchor).toBe(open);
-		expect(result.keyMap.size).toBe(0);
-	});
-});
-
-describe("A1 createRawSignal", () => {
-	test("skips proxy for objects", () => {
-		const state = createRawSignal({ name: "Alice" });
-		expect(state()).toEqual({ name: "Alice" });
-		// Raw signal — direct object, not proxied
-		const obj = state();
-		state.set({ name: "Bob" });
-		expect(state()).toEqual({ name: "Bob" });
-	});
-
-	test("works with primitives", () => {
-		const count = createRawSignal(0);
-		expect(count()).toBe(0);
-		count.set(5);
-		expect(count()).toBe(5);
-	});
-
-	test("is reactive", () => {
-		const count = createRawSignal(0);
-		let runs = 0;
-		createEffect(() => {
-			count();
-			runs++;
-		});
-		expect(runs).toBe(1);
-		batch(() => {
-			count.set(1);
-		});
-		expect(runs).toBe(2);
-	});
-
-	test(".peek() reads without tracking", () => {
-		const count = createRawSignal(0);
-		let runs = 0;
-		createEffect(() => {
-			count.peek();
-			runs++;
-		});
-		expect(runs).toBe(1);
-		batch(() => {
-			count.set(1);
-		});
-		expect(runs).toBe(1);
-	});
-});
-
-describe("A2 snapshot", () => {
-	test("returns primitive values as-is", () => {
-		expect(snapshot(42)).toBe(42);
-		expect(snapshot("hello")).toBe("hello");
-		expect(snapshot(null)).toBe(null);
-		expect(snapshot(undefined)).toBe(undefined);
-	});
-
-	test("unwraps proxy to plain object", () => {
-		const state = createSignal({ name: "Alice", age: 30 });
-		const snap = snapshot(state());
-		expect(snap).toEqual({ name: "Alice", age: 30 });
-		expect(snap).not.toBe(state()); // distinct reference
-	});
-
-	test("unwraps proxy to plain array", () => {
-		const items = createSignal([1, 2, 3]);
-		const snap = snapshot(items());
-		expect(snap).toEqual([1, 2, 3]);
-		expect(Array.isArray(snap)).toBe(true);
-		expect(snap).not.toBe(items()); // distinct reference
-	});
-
-	test("non-proxy objects are returned as-is", () => {
-		const obj = { plain: true };
-		expect(snapshot(obj)).toBe(obj);
-	});
-
-	test("deeply nested snapshot is fully un-proxied", () => {
-		const obj = createSignal({ a: { b: { c: 1 } } });
-		const s = snapshot(obj());
-		expect(s.a.b.c).toBe(1);
-		// s.a.b should NOT be a proxy — it's a plain object from the deep copy
-		const proxyTargetCheck = (val: object) =>
-			typeof val === "object" &&
-			val !== null &&
-			!Object.getPrototypeOf(val)?.constructor?.name?.includes("Map");
-		// Verify no nested proxy: accessing s.a.b.c should not trigger tracking
-		let tracked = false;
-		const prev = (globalThis as any).__sigil_tracking_test;
-		(globalThis as any).__sigil_tracking_test = () => (tracked = true);
-		const raw = s.a.b;
-		// No reactive tracking should happen on plain objects
-		expect(raw.c).toBe(1);
-		// Deep compare confirms it's a full independent copy
-		expect(s).toEqual({ a: { b: { c: 1 } } });
-		expect(s.a).not.toBe(obj().a);
-		expect(s.a.b).not.toBe(obj().a.b);
-	});
-});
-
-describe("A3 tracking", () => {
-	test("returns false outside effect", () => {
-		expect(tracking()).toBe(false);
-	});
-
-	test("returns true inside effect", () => {
-		let inside = false;
-		createEffect(() => {
-			inside = tracking();
-		});
-		expect(inside).toBe(true);
-	});
-
-	test("returns false after effect completes", () => {
-		createEffect(() => {
-			tracking();
-		});
-		expect(tracking()).toBe(false);
-	});
-});
-
-describe("A4 createInspectEffect", () => {
-	test("does not throw", () => {
-		const count = createSignal(0);
-		expect(() => {
-			createInspectEffect(() => [count()]);
-		}).not.toThrow();
-	});
-
-	test("accepts custom callback", () => {
-		const count = createSignal(0);
-		const logged: unknown[][] = [];
-		createInspectEffect(
-			() => [count()],
-			(vals) => logged.push(vals),
-		);
-		expect(logged.length).toBe(1);
-		expect(logged[0]).toEqual([0]);
-	});
-});
-
-describe("A5 createEffectPre", () => {
-	test("runs immediately like createEffect", () => {
-		const count = createSignal(0);
-		let seen = -1;
-		createEffectPre(() => {
-			seen = count();
-		});
-		expect(seen).toBe(0);
-	});
-
-	test("reruns on signal change", () => {
-		const count = createSignal(0);
-		let seen = -1;
-		createEffectPre(() => {
-			seen = count();
-		});
-		batch(() => {
-			count.set(5);
-		});
-		expect(seen).toBe(5);
-	});
-});
-
-describe("A7 ReactiveMap", () => {
-	test("basic set/get", () => {
-		const map = new ReactiveMap<string, number>();
-		map.set("a", 1);
-		expect(map.get("a")).toBe(1);
-	});
-
-	test("reactivity: get tracks reads", () => {
-		const map = new ReactiveMap<string, number>();
-		let size = 0;
-		createEffect(() => {
-			size = map.size;
-		});
-		expect(size).toBe(0);
-		batch(() => {
-			map.set("x", 1);
-		});
-		expect(size).toBe(1);
-	});
-
-	test("deleted key triggers reactivity", () => {
-		const map = new ReactiveMap<string, number>();
-		map.set("a", 1);
-		let accessed: number | undefined;
-		createEffect(() => {
-			accessed = map.get("a");
-		});
-		expect(accessed).toBe(1);
-		batch(() => {
-			map.delete("a");
-		});
-		expect(accessed).toBe(undefined);
-	});
-
-	test("clear triggers reactivity", () => {
-		const map = new ReactiveMap<string, number>();
-		map.set("a", 1);
-		let size = 0;
-		createEffect(() => {
-			size = map.size;
-		});
-		batch(() => {
-			map.clear();
-		});
-		expect(size).toBe(0);
-	});
-
-	test("forEach tracks reads", () => {
-		const map = new ReactiveMap<string, number>();
-		map.set("a", 1);
-		let count = 0;
-		createEffect(() => {
-			count = 0;
-			map.forEach(() => count++);
-		});
-		expect(count).toBe(1);
-		batch(() => {
-			map.set("b", 2);
-		});
-		expect(count).toBe(2);
-	});
-
-	test("per-key granularity: setting key X does not re-trigger effect reading key Y", () => {
-		const map = new ReactiveMap<string, number>();
-		map.set("a", 1);
-		map.set("b", 2);
-		let aRuns = 0;
-		let bRuns = 0;
-		createEffect(() => {
-			map.get("a");
-			aRuns++;
-		});
-		createEffect(() => {
-			map.get("b");
-			bRuns++;
-		});
-		expect(aRuns).toBe(1);
-		expect(bRuns).toBe(1);
-
-		batch(() => {
-			map.set("a", 10); // only a-effect should rerun
-		});
-		expect(aRuns).toBe(2);
-		expect(bRuns).toBe(1);
-
-		batch(() => {
-			map.set("b", 20); // only b-effect should rerun
-		});
-		expect(aRuns).toBe(2);
-		expect(bRuns).toBe(2);
-	});
-
-	test("per-key: adding new key triggers struct but not existing key effects", () => {
-		const map = new ReactiveMap<string, number>();
-		map.set("a", 1);
-		let aRuns = 0;
-		let sizeRuns = 0;
-		createEffect(() => {
-			map.get("a");
-			aRuns++;
-		});
-		createEffect(() => {
-			map.size;
-			sizeRuns++;
-		});
-		expect(aRuns).toBe(1);
-		expect(sizeRuns).toBe(1);
-
-		batch(() => {
-			map.set("b", 2); // new key — struct changes, a's value doesn't
-		});
-		expect(aRuns).toBe(1);
-		expect(sizeRuns).toBe(2);
-	});
-});
-
-describe("A7 ReactiveSet", () => {
-	test("basic add/has", () => {
-		const set = new ReactiveSet<number>();
-		set.add(1);
-		expect(set.has(1)).toBe(true);
-	});
-
-	test("reactivity: has tracks reads", () => {
-		const set = new ReactiveSet<number>();
-		let hasIt = false;
-		createEffect(() => {
-			hasIt = set.has(1);
-		});
-		expect(hasIt).toBe(false);
-		batch(() => {
-			set.add(1);
-		});
-		expect(hasIt).toBe(true);
-	});
-
-	test("delete triggers reactivity", () => {
-		const set = new ReactiveSet<number>();
-		set.add(1);
-		let size = 0;
-		createEffect(() => {
-			size = set.size;
-		});
-		expect(size).toBe(1);
-		batch(() => {
-			set.delete(1);
-		});
-		expect(size).toBe(0);
-	});
-
-	test("clear triggers reactivity", () => {
-		const set = new ReactiveSet<number>();
-		set.add(1);
-		let size = 0;
-		createEffect(() => {
-			size = set.size;
-		});
-		batch(() => {
-			set.clear();
-		});
-		expect(size).toBe(0);
-	});
-
-	test("forEach tracks reads", () => {
-		const set = new ReactiveSet<string>();
-		set.add("a");
-		let count = 0;
-		createEffect(() => {
-			count = 0;
-			set.forEach(() => count++);
-		});
-		expect(count).toBe(1);
-		batch(() => {
-			set.add("b");
-		});
-		expect(count).toBe(2);
-	});
-});
-
-describe("A8 easing functions", () => {
-	test("linear is identity", () => {
-		expect(linear(0)).toBe(0);
-		expect(linear(0.5)).toBe(0.5);
-		expect(linear(1)).toBe(1);
-	});
-
-	test("easeInQuad is quadratic", () => {
-		expect(easeInQuad(0)).toBe(0);
-		expect(easeInQuad(0.5)).toBe(0.25);
-		expect(easeInQuad(1)).toBe(1);
-	});
-
-	test("easeOutQuad completes at 1", () => {
-		expect(easeOutQuad(0)).toBe(0);
-		expect(easeOutQuad(1)).toBe(1);
-	});
-
-	test("all easing functions return 0 at t=0 and 1 at t=1", () => {
-		const fns = [
-			easeInQuad,
-			easeOutQuad,
-			easeInOutQuad,
-			easeInCubic,
-			easeOutCubic,
-			easeInOutCubic,
-			easeInQuart,
-			easeOutQuart,
-			easeInOutQuart,
-			easeInQuint,
-			easeOutQuint,
-			easeInOutQuint,
-			easeInSine,
-			easeOutSine,
-			easeInOutSine,
-		];
-		for (const fn of fns) {
-			expect(fn(0)).toBeCloseTo(0, 10);
-			expect(fn(1)).toBeCloseTo(1, 10);
-		}
-	});
-});
-
-describe("A9 createProfilerEffect", () => {
-	test("runs the effect", () => {
-		let ran = false;
-		createProfilerEffect("test", () => {
-			ran = true;
-		});
-		expect(ran).toBe(true);
-	});
-
-	test("reacts to signal changes", () => {
-		const count = createSignal(0);
-		let seen = -1;
-		createProfilerEffect("test", () => {
-			seen = count();
-		});
-		expect(seen).toBe(0);
-		batch(() => {
-			count.set(5);
-		});
-		expect(seen).toBe(5);
-	});
-});
-
-describe("Array reactivity", () => {
-    test("push on $state array triggers reactivity", async () => {
-        const items = createSignal([] as string[]);
-        let count = 0;
-        createEffect(() => {
-            items(); // now auto-tracks length
-            count++;
-        });
-        await tick();
-        expect(count).toBe(1); // initial run
-        items().push("a");
-        await tick();
-        expect(count).toBe(2); // re-ran after push
-        expect(items().length).toBe(1);
-    });
-
-    test("pop on $state array triggers reactivity", async () => {
-        const items = createSignal(["a", "b"] as string[]);
-        let len = 0;
-        createEffect(() => {
-            len = items().length; // reads length, subscribes
-        });
-        await tick();
-        expect(len).toBe(2);
-        items().pop();
-        await tick();
-        expect(len).toBe(1);
-    });
-
-    test("splice on $state array triggers reactivity", async () => {
-        const items = createSignal(["a", "b", "c"] as string[]);
-        let len = 0;
-        createEffect(() => { len = items().length; });
-        await tick();
-        expect(len).toBe(3);
-        items().splice(1, 1);
-        await tick();
-        expect(len).toBe(2);
-    });
-})
+import { describe, expect, test } from "bun:test";
+import {
+	batch,
+	claim,
+	claimComment,
+	claimText,
+	createEffect,
+	createEffectPre,
+	createInspectEffect,
+	createMemo,
+	createProfilerEffect,
+	createRawSignal,
+	createSignal,
+	easeInCubic,
+	easeInOutCubic,
+	easeInOutQuad,
+	easeInOutQuart,
+	easeInOutQuint,
+	easeInOutSine,
+	easeInQuad,
+	easeInQuart,
+	easeInQuint,
+	easeInSine,
+	easeOutCubic,
+	easeOutQuad,
+	easeOutQuart,
+	easeOutQuint,
+	easeOutSine,
+	hydrateKeyedList,
+	linear,
+	ReactiveMap,
+	ReactiveSet,
+	reconcile,
+	snapshot,
+	tick,
+	tracking,
+	withEffectScope,
+} from "./index.ts";
+
+// Minimal DOM mock for reconcile tests
+class MockNode {
+	parentNode: MockNode | null = null;
+	children: MockNode[] = [];
+	name: string;
+	constructor(name: string) {
+		this.name = name;
+	}
+	before(node: MockNode) {
+		// Remove from old parent
+		if (node.parentNode) {
+			const idx = node.parentNode.children.indexOf(node);
+			if (idx >= 0) node.parentNode.children.splice(idx, 1);
+		}
+		// Insert before this node in parent
+		if (this.parentNode) {
+			const idx = this.parentNode.children.indexOf(this);
+			this.parentNode.children.splice(idx, 0, node);
+			node.parentNode = this.parentNode;
+		}
+	}
+	removeChild(node: MockNode) {
+		const idx = this.children.indexOf(node);
+		if (idx >= 0) this.children.splice(idx, 1);
+		node.parentNode = null;
+	}
+	toString() {
+		return this.name;
+	}
+}
+class MockComment extends MockNode {
+	constructor() {
+		super("");
+	}
+}
+class MockElement extends MockNode {}
+
+function nodeNames(parent: MockNode): string[] {
+	return parent.children.filter((c) => c.name !== "").map((c) => c.name);
+}
+
+describe("Runtime", () => {
+	describe("Basic reactivity", () => {
+		describe("createSignal", () => {
+			test("returns initial value", () => {
+				const count = createSignal(0);
+				expect(count()).toBe(0);
+			});
+
+			test("updates on set", () => {
+				const count = createSignal(0);
+				count.set(5);
+				expect(count()).toBe(5);
+			});
+		});
+
+		describe("createEffect", () => {
+			test("runs immediately", () => {
+				const count = createSignal(0);
+				let seen = -1;
+				createEffect(() => {
+					seen = count();
+				});
+				expect(seen).toBe(0);
+			});
+
+			test("reruns on signal change", () => {
+				const count = createSignal(0);
+				let seen = -1;
+				createEffect(() => {
+					seen = count();
+				});
+				batch(() => {
+					count.set(5);
+				});
+				expect(seen).toBe(5);
+			});
+		});
+
+		describe("createMemo", () => {
+			test("derives value", () => {
+				const count = createSignal(2);
+				const doubled = createMemo(() => count() * 2);
+				expect(doubled()).toBe(4);
+			});
+
+			test("updates when dependency changes", () => {
+				const count = createSignal(2);
+				const doubled = createMemo(() => count() * 2);
+				batch(() => {
+					count.set(5);
+				});
+				expect(doubled()).toBe(10);
+			});
+		});
+	});
+
+	describe("reconcile", () => {
+		function setup() {
+			const parent = new MockElement("parent");
+			const anchor = new MockComment();
+			parent.children.push(anchor);
+			anchor.parentNode = parent;
+			const keyMap = new Map<unknown, MockNode>();
+			return { parent, anchor, keyMap };
+		}
+
+		/** Cast wrapper — MockNode/MockElement satisfy the DOM APIs reconcile actually uses */
+		function mockReconcile<T>(
+			anchor: MockComment,
+			keyMap: Map<unknown, MockNode>,
+			newItems: T[],
+			getKey: (item: T) => unknown,
+			createNode: (item: T) => MockNode,
+		) {
+			reconcile(
+				anchor as unknown as Comment,
+				keyMap as unknown as Map<unknown, Node>,
+				newItems,
+				getKey,
+				createNode as unknown as (item: T) => Node,
+			);
+		}
+
+		test("inserts initial items", () => {
+			const { parent, anchor, keyMap } = setup();
+			const items = [
+				{ id: 1, text: "a" },
+				{ id: 2, text: "b" },
+			];
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				items,
+				(i) => i.id,
+				(i) => new MockElement(i.text),
+			);
+
+			expect(nodeNames(parent)).toEqual(["a", "b"]);
+			expect(keyMap.size).toBe(2);
+		});
+
+		test("reuses nodes with same key", () => {
+			const { parent, anchor, keyMap } = setup();
+			const items = [
+				{ id: 1, text: "a" },
+				{ id: 2, text: "b" },
+			];
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				items,
+				(i) => i.id,
+				(i) => new MockElement(i.text),
+			);
+			const nodeA = keyMap.get(1);
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				items,
+				(i) => i.id,
+				(i) => new MockElement(i.text),
+			);
+
+			expect(keyMap.get(1)).toBe(nodeA);
+			expect(nodeNames(parent)).toEqual(["a", "b"]);
+		});
+
+		test("removes deleted items", () => {
+			const { parent, anchor, keyMap } = setup();
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 1 }, { id: 2 }, { id: 3 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+			expect(nodeNames(parent)).toEqual(["n1", "n2", "n3"]);
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 1 }, { id: 3 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+
+			expect(nodeNames(parent)).toEqual(["n1", "n3"]);
+			expect(keyMap.has(2)).toBe(false);
+		});
+
+		test("moves nodes to new order", () => {
+			const { parent, anchor, keyMap } = setup();
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 1 }, { id: 2 }, { id: 3 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+			const node1 = keyMap.get(1);
+			const node2 = keyMap.get(2);
+			const node3 = keyMap.get(3);
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 3 }, { id: 2 }, { id: 1 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+
+			expect(keyMap.get(1)).toBe(node1);
+			expect(keyMap.get(2)).toBe(node2);
+			expect(keyMap.get(3)).toBe(node3);
+			expect(nodeNames(parent)).toEqual(["n3", "n2", "n1"]);
+		});
+
+		test("handles mixed add/remove/reorder", () => {
+			const { parent, anchor, keyMap } = setup();
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 1 }, { id: 2 }, { id: 3 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+			const node1 = keyMap.get(1);
+			const node3 = keyMap.get(3);
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 4 }, { id: 3 }, { id: 1 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+
+			expect(keyMap.has(2)).toBe(false);
+			expect(keyMap.get(1)).toBe(node1);
+			expect(keyMap.get(3)).toBe(node3);
+			expect(keyMap.has(4)).toBe(true);
+			expect(nodeNames(parent)).toEqual(["n4", "n3", "n1"]);
+		});
+
+		test("empty list removes all", () => {
+			const { parent, anchor, keyMap } = setup();
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 1 }, { id: 2 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+			expect(nodeNames(parent)).toEqual(["n1", "n2"]);
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				[] as { id: number }[],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+
+			expect(nodeNames(parent)).toEqual([]);
+			expect(keyMap.size).toBe(0);
+		});
+
+		test("from empty to populated", () => {
+			const { parent, anchor, keyMap } = setup();
+			expect(nodeNames(parent)).toEqual([]);
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 1 }, { id: 2 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+
+			expect(nodeNames(parent)).toEqual(["n1", "n2"]);
+		});
+
+		test("preserves anchor position", () => {
+			const { parent, anchor, keyMap } = setup();
+			const header = new MockElement("header");
+			anchor.before(header);
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 1 }],
+				(i) => i.id,
+				() => new MockElement("item"),
+			);
+
+			expect(nodeNames(parent)).toEqual(["header", "item"]);
+		});
+	});
+
+	test("effect cleanup runs before rerun", () => {
+		const count = createSignal(0);
+		const log: string[] = [];
+		createEffect(() => {
+			count(); // subscribe
+			return () => log.push("cleanup");
+		});
+		count.set(1);
+		count.set(2);
+		batch(() => {});
+		expect(log).toEqual(["cleanup"]);
+	});
+
+	test("disposer stops effect", () => {
+		const count = createSignal(0);
+		let runs = 0;
+		const stop = createEffect(() => {
+			count();
+			runs++;
+		});
+		batch(() => {
+			count.set(1);
+		});
+		stop();
+		batch(() => {
+			count.set(2);
+		});
+		expect(runs).toBe(2); // initial + one update, not three
+	});
+
+	test("cleanup runs on dispose", () => {
+		let cleaned = false;
+		const stop = createEffect(() => () => {
+			cleaned = true;
+		});
+		stop();
+		expect(cleaned).toBe(true);
+	});
+});
+
+describe("batch", () => {
+	test("multiple signals in batch trigger effect once", () => {
+		const count = createSignal(0);
+		const name = createSignal("a");
+		let runs = 0;
+		createEffect(() => {
+			count();
+			name();
+			runs++;
+		});
+		expect(runs).toBe(1); // initial run
+
+		batch(() => {
+			count.set(1);
+			name.set("b");
+		});
+		expect(runs).toBe(2); // one run, not two
+	});
+
+	test("nested batches flush on outermost exit", () => {
+		const count = createSignal(0);
+		let runs = 0;
+		createEffect(() => {
+			count();
+			runs++;
+		});
+
+		batch(() => {
+			batch(() => {
+				count.set(1);
+			});
+			count.set(2); // still inside outer batch
+		});
+		expect(runs).toBe(2); // one run after outer exits
+	});
+
+	test("outside batch auto-batches to microtask", () => {
+		const count = createSignal(0);
+		let runs = 0;
+		createEffect(() => {
+			count();
+			runs++;
+		});
+
+		count.set(1);
+		count.set(2);
+		// Without batch, effects are auto-batched — no synchronous run
+		expect(runs).toBe(1); // initial only
+
+		batch(() => {});
+		expect(runs).toBe(2); // initial + one batched update (last write wins)
+	});
+});
+
+describe("createSignal with objects", () => {
+	test("property read returns value", () => {
+		const state = createSignal({ name: "Alice" });
+		expect(state().name).toBe("Alice");
+	});
+
+	test("property write triggers effect", () => {
+		const state = createSignal({ name: "Alice" });
+		let seen = "";
+		createEffect(() => {
+			seen = state().name;
+		});
+		expect(seen).toBe("Alice");
+		batch(() => {
+			state().name = "Bob";
+		});
+		expect(seen).toBe("Bob");
+	});
+
+	test("unrelated property change does not trigger effect", () => {
+		const state = createSignal({ name: "Alice", age: 30 });
+		let runs = 0;
+		createEffect(() => {
+			state().name;
+			runs++;
+		});
+		expect(runs).toBe(1);
+		batch(() => {
+			state().age = 31;
+		});
+		expect(runs).toBe(1);
+		batch(() => {
+			state().name = "Bob";
+		});
+		expect(runs).toBe(2);
+	});
+
+	test("deeply nested property access is reactive", () => {
+		const state = createSignal({ user: { address: { city: "NYC" } } });
+		let seen = "";
+		createEffect(() => {
+			seen = state().user.address.city;
+		});
+		expect(seen).toBe("NYC");
+		batch(() => {
+			state().user.address.city = "LA";
+		});
+		expect(seen).toBe("LA");
+	});
+
+	test("proxyCache deduplication — same proxy for repeated nested access", () => {
+		const state = createSignal({ address: { city: "Agartha" } });
+		const a1 = state().address;
+		const a2 = state().address;
+		expect(a1).toBe(a2);
+
+		let seen = "";
+		createEffect(() => {
+			seen = state().address.city;
+		});
+		expect(seen).toBe("Agartha");
+		batch(() => {
+			state().address.city = "Hyperborea";
+		});
+		expect(seen).toBe("Hyperborea");
+	});
+
+	test(".set() replaces entire object", () => {
+		const state = createSignal({ name: "Alice", age: 30 });
+		let seen = "";
+		createEffect(() => {
+			seen = state().name;
+		});
+		expect(seen).toBe("Alice");
+		batch(() => {
+			state.set({ name: "Charlie", age: 25 });
+		});
+		expect(seen).toBe("Charlie");
+	});
+
+	test(".peek() reads without tracking", () => {
+		const state = createSignal({ name: "Alice" });
+		let runs = 0;
+		createEffect(() => {
+			state.peek();
+			runs++;
+		});
+		expect(runs).toBe(1);
+		batch(() => {
+			state().name = "Bob";
+		});
+		expect(runs).toBe(1);
+	});
+
+	test("JSON.stringify works on proxy", () => {
+		const state = createSignal({ name: "Alice", age: 30 });
+		expect(JSON.stringify(state())).toBe('{"name":"Alice","age":30}');
+	});
+
+	test("Object.keys works on proxy", () => {
+		const state = createSignal({ name: "Alice", age: 30 });
+		expect(Object.keys(state())).toEqual(["name", "age"]);
+	});
+
+	test("spread works on proxy", () => {
+		const state = createSignal({ name: "Alice" });
+		const copy = { ...state() };
+		expect(copy).toEqual({ name: "Alice" });
+	});
+});
+
+describe("createSignal with arrays", () => {
+	test("length is reactive", () => {
+		const items = createSignal([1, 2, 3]);
+		let len = 0;
+		createEffect(() => {
+			len = items().length;
+		});
+		expect(len).toBe(3);
+		batch(() => {
+			items().push(4);
+		});
+		expect(len).toBe(4);
+	});
+
+	test("index access is reactive", () => {
+		const items = createSignal([1, 2, 3]);
+		let first = 0;
+		createEffect(() => {
+		//@ts-expect-error the assertion for that is below
+            first = items()[0];
+		});
+		expect(first).toBe(1);
+		batch(() => {
+			items()[0] = 99;
+		});
+		expect(first).toBe(99);
+	});
+
+	test("push triggers effects that read length", () => {
+		const items = createSignal<number[]>([]);
+		let seen: number[] = [];
+		createEffect(() => {
+			seen = [...items()];
+		});
+		expect(seen).toEqual([]);
+		batch(() => {
+			items().push(1);
+		});
+		expect(seen).toEqual([1]);
+		batch(() => {
+			items().push(2);
+		});
+		expect(seen).toEqual([1, 2]);
+	});
+
+	test("pop triggers length effect", () => {
+		const items = createSignal([1, 2, 3]);
+		let len = 0;
+		createEffect(() => {
+			len = items().length;
+		});
+		expect(len).toBe(3);
+		batch(() => {
+			items().pop();
+		});
+		expect(len).toBe(2);
+	});
+
+	test("splice triggers effects", () => {
+		const items = createSignal([1, 2, 3, 4]);
+		let seen: number[] = [];
+		createEffect(() => {
+			seen = [...items()];
+		});
+		batch(() => {
+			items().splice(1, 2);
+		});
+		expect(seen).toEqual([1, 4]);
+	});
+
+	test("push + $derived recomputes", () => {
+		const items = createSignal([1, 2, 3]);
+		const doubled = createMemo(() => items().map((x) => x * 2));
+		expect(doubled()).toEqual([2, 4, 6]);
+		batch(() => {
+			items().push(4);
+		});
+		expect(doubled()).toEqual([2, 4, 6, 8]);
+	});
+});
+
+describe("proxy edge cases", () => {
+	test("null is not proxied", () => {
+		const state = createSignal(null);
+		expect(typeof state).toBe("function");
+		expect(state()).toBe(null);
+	});
+
+	test("nested arrays in objects are reactive", () => {
+		const state = createSignal({ items: [1, 2, 3] });
+		let seen: number[] = [];
+		createEffect(() => {
+			seen = [...state().items];
+		});
+		expect(seen).toEqual([1, 2, 3]);
+		batch(() => {
+			state().items.push(4);
+		});
+		expect(seen).toEqual([1, 2, 3, 4]);
+	});
+
+	test("multiple effects on same object, independent keys", () => {
+		const state = createSignal({ x: 0, y: 0 });
+		let xSeen = 0,
+			ySeen = 0,
+			xRuns = 0,
+			yRuns = 0;
+		createEffect(() => {
+			xSeen = state().x;
+			xRuns++;
+		});
+		createEffect(() => {
+			ySeen = state().y;
+			yRuns++;
+		});
+		expect(xRuns).toBe(1);
+		expect(yRuns).toBe(1);
+
+		batch(() => {
+			state().x = 5;
+		});
+		expect(xSeen).toBe(5);
+		expect(ySeen).toBe(0);
+		expect(xRuns).toBe(2);
+		expect(yRuns).toBe(1);
+
+		batch(() => {
+			state().y = 10;
+		});
+		expect(xSeen).toBe(5);
+		expect(ySeen).toBe(10);
+		expect(xRuns).toBe(2);
+		expect(yRuns).toBe(2);
+	});
+});
+
+describe("claim", () => {
+	test("claims an element by tag name and removes from pool", () => {
+		const div = document.createElement("div");
+		const span = document.createElement("span");
+		const pool: ChildNode[] = [div, span];
+		const result = claim(pool, "div");
+		expect(result).toBe(div);
+		expect(pool).toEqual([span]);
+	});
+
+	test("falls back to createElement when no match", () => {
+		const span = document.createElement("span");
+		const pool: ChildNode[] = [span];
+		const result = claim(pool, "div");
+		expect(result.tagName).toBe("DIV");
+		expect(pool).toEqual([span]);
+	});
+
+	test("claims first match only", () => {
+		const d1 = document.createElement("div");
+		const d2 = document.createElement("div");
+		const pool: ChildNode[] = [d1, d2];
+		const result = claim(pool, "div");
+		expect(result).toBe(d1);
+		expect(pool).toEqual([d2]);
+	});
+
+	test("is case-insensitive on tag comparison", () => {
+		const svg = document.createElement("SVG");
+		const pool: ChildNode[] = [svg];
+		const result = claim(pool, "svg");
+		expect(result).toBe(svg);
+	});
+
+	test("returns empty pool after claiming all matches", () => {
+		const div = document.createElement("div");
+		const pool: ChildNode[] = [div];
+		claim(pool, "div");
+		expect(pool).toEqual([]);
+	});
+
+	test("handles empty pool", () => {
+		const pool: ChildNode[] = [];
+		const result = claim(pool, "div");
+		expect(result.tagName).toBe("DIV");
+		expect(pool).toEqual([]);
+	});
+});
+
+describe("claimText", () => {
+	test("claims a text node from pool", () => {
+		const text = document.createTextNode("hello");
+		const div = document.createElement("div");
+		const pool: ChildNode[] = [text, div];
+		const result = claimText(pool);
+		expect(result).toBe(text);
+		expect(pool).toEqual([div]);
+	});
+
+	test("falls back to createTextNode when no text node in pool", () => {
+		const div = document.createElement("div");
+		const pool: ChildNode[] = [div];
+		const result = claimText(pool);
+		expect(result).toBeInstanceOf(Text);
+		expect(result.textContent).toBe("");
+		expect(pool).toEqual([div]);
+	});
+
+	test("handles empty pool", () => {
+		const pool: ChildNode[] = [];
+		const result = claimText(pool);
+		expect(result).toBeInstanceOf(Text);
+		expect(pool).toEqual([]);
+	});
+
+	test("claims first text node only", () => {
+		const t1 = document.createTextNode("a");
+		const t2 = document.createTextNode("b");
+		const pool: ChildNode[] = [t1, t2];
+		const result = claimText(pool);
+		expect(result).toBe(t1);
+		expect(pool).toEqual([t2]);
+	});
+});
+
+describe("hydration: full element tree claim", () => {
+	test("simulates SSR → hydration → scoped pools", () => {
+		// Simulate SSR output: <div><h1>Title</h1><p>Body</p></div>
+		const root = document.createElement("div");
+		const h1 = document.createElement("h1");
+		h1.appendChild(document.createTextNode("Title"));
+		const p = document.createElement("p");
+		p.appendChild(document.createTextNode("Body"));
+		root.appendChild(h1);
+		root.appendChild(p);
+
+		// Hydration entry: claim root from page-level pool
+		const pageNodes: ChildNode[] = [root];
+		const div = claim(pageNodes, "div");
+		expect(div).toBe(root);
+
+		// Scope: root's children
+		const childNodes = Array.from(div.childNodes);
+
+		// Claim h1
+		const claimedH1 = claim(childNodes, "h1");
+		expect(claimedH1).toBe(h1);
+		// Claim text inside h1 — removes from pool array, not DOM
+		const h1Pool = Array.from(claimedH1.childNodes);
+		const h1Text = claimText(h1Pool);
+		expect(h1Text.textContent).toBe("Title");
+		expect(h1Pool.length).toBe(0); // removed from pool
+
+		// Claim p
+		const claimedP = claim(childNodes, "p");
+		expect(claimedP).toBe(p);
+		const pPool = Array.from(claimedP.childNodes);
+		const pText = claimText(pPool);
+		expect(pText.textContent).toBe("Body");
+
+		// No leftover nodes in parent pool
+		expect(childNodes.length).toBe(0);
+	});
+
+	test("falls back gracefully for SSR/client mismatch", () => {
+		// SSR rendered <div><span>OK</span></div>
+		// Client expects <div><p>OK</p></div>
+		const root = document.createElement("div");
+		const span = document.createElement("span");
+		span.appendChild(document.createTextNode("OK"));
+		root.appendChild(span);
+
+		const nodes = Array.from(root.childNodes);
+		// Try to claim a <p> — doesn't exist, creates new one
+		const p = claim(nodes, "p");
+		expect(p.tagName).toBe("P");
+		expect(p.childNodes.length).toBe(0); // new element has no children
+		// Original span still in pool
+		expect(nodes.length).toBe(1);
+		expect(nodes[0]).toBe(span);
+	});
+});
+
+describe("Scary reactivity", () => {
+	test("effect unsubscribes from stale dependencies", () => {
+		const condition = createSignal(true);
+		const a = createSignal(1);
+		const b = createSignal(1);
+		let runs = 0;
+
+		createEffect(() => {
+			runs++;
+			if (condition()) {
+				a(); // read a only when condition is true
+			} else {
+				b(); // read b only when condition is false
+			}
+		});
+
+		expect(runs).toBe(1);
+
+		// flip condition, effect should now track b, not a
+		batch(() => {
+			condition.set(false);
+		});
+		expect(runs).toBe(2);
+
+		// updating a should NOT trigger the effect anymore
+		batch(() => {
+			a.set(99);
+		});
+		expect(runs).toBe(2); // ← this will fail with current implementation
+	});
+});
+
+describe("withEffectScope", () => {
+	test("collects effects created during fn()", () => {
+		const count = createSignal(0);
+		let runs = 0;
+		withEffectScope(() => {
+			createEffect(() => {
+				count();
+				runs++;
+			});
+		});
+		expect(runs).toBe(1);
+		batch(() => {
+			count.set(1);
+		});
+		expect(runs).toBe(2);
+	});
+
+	test("dispose stops all collected effects", () => {
+		const count = createSignal(0);
+		let runs = 0;
+		const dispose = withEffectScope(() => {
+			createEffect(() => {
+				count();
+				runs++;
+			});
+		});
+		expect(runs).toBe(1);
+		batch(() => {
+			count.set(1);
+		});
+		expect(runs).toBe(2);
+
+		dispose();
+
+		batch(() => {
+			count.set(2);
+		});
+		expect(runs).toBe(2); // stopped — no further runs
+	});
+
+	test("dispose stops multiple effects in the same scope", () => {
+		const a = createSignal(0);
+		const b = createSignal(0);
+		let runsA = 0;
+		let runsB = 0;
+		const dispose = withEffectScope(() => {
+			createEffect(() => {
+				a();
+				runsA++;
+			});
+			createEffect(() => {
+				b();
+				runsB++;
+			});
+		});
+		batch(() => {
+			a.set(1);
+			b.set(1);
+		});
+		expect(runsA).toBe(2);
+		expect(runsB).toBe(2);
+
+		dispose();
+
+		batch(() => {
+			a.set(2);
+			b.set(2);
+		});
+		expect(runsA).toBe(2);
+		expect(runsB).toBe(2);
+	});
+
+	test("effects outside the scope are unaffected by dispose", () => {
+		const count = createSignal(0);
+		let outsideRuns = 0;
+		let insideRuns = 0;
+
+		createEffect(() => {
+			count();
+			outsideRuns++;
+		});
+
+		const dispose = withEffectScope(() => {
+			createEffect(() => {
+				count();
+				insideRuns++;
+			});
+		});
+
+		batch(() => {
+			count.set(1);
+		});
+		expect(outsideRuns).toBe(2);
+		expect(insideRuns).toBe(2);
+
+		dispose();
+
+		batch(() => {
+			count.set(2);
+		});
+		expect(outsideRuns).toBe(3); // still running
+		expect(insideRuns).toBe(2); // stopped
+	});
+
+	test("nested scopes: inner dispose doesn't affect outer", () => {
+		const count = createSignal(0);
+		let outerRuns = 0;
+		let innerRuns = 0;
+
+		const disposeOuter = withEffectScope(() => {
+			createEffect(() => {
+				count();
+				outerRuns++;
+			});
+			// simulates a child component scope inside a page scope
+			const disposeInner = withEffectScope(() => {
+				createEffect(() => {
+					count();
+					innerRuns++;
+				});
+			});
+			disposeInner();
+		});
+
+		batch(() => {
+			count.set(1);
+		});
+		expect(outerRuns).toBe(2);
+		expect(innerRuns).toBe(1); // stopped on inner dispose
+
+		disposeOuter();
+		batch(() => {
+			count.set(2);
+		});
+		expect(outerRuns).toBe(2); // stopped on outer dispose
+	});
+
+	test("createMemo effects are collected in scope", () => {
+		const count = createSignal(0);
+		let memoRuns = 0;
+		const dispose = withEffectScope(() => {
+			// createMemo internally calls createEffect
+			const doubled = createMemo(() => {
+				memoRuns++;
+				return count() * 2;
+			});
+			expect(doubled()).toBe(0);
+		});
+		expect(memoRuns).toBe(1);
+		batch(() => {
+			count.set(5);
+		});
+		expect(memoRuns).toBe(2);
+
+		dispose();
+		batch(() => {
+			count.set(10);
+		});
+		expect(memoRuns).toBe(2); // memo's internal effect stopped
+	});
+
+	test("dispose is idempotent", () => {
+		const count = createSignal(0);
+		let runs = 0;
+		const dispose = withEffectScope(() => {
+			createEffect(() => {
+				count();
+				runs++;
+			});
+		});
+		dispose();
+		dispose(); // second call must not throw or double-fire
+		batch(() => {
+			count.set(1);
+		});
+		expect(runs).toBe(1);
+	});
+});
+
+describe("claimComment", () => {
+	test("claims a comment node from pool matching text", () => {
+		const comment = document.createComment("");
+		const div = document.createElement("div");
+		const pool: ChildNode[] = [comment, div];
+		const result = claimComment(pool);
+		expect(result).toBe(comment);
+		expect(pool).toEqual([div]);
+	});
+
+	test("skips comments with non-matching data", () => {
+		const comment = document.createComment("g");
+		const div = document.createElement("div");
+		const pool: ChildNode[] = [comment, div];
+		const result = claimComment(pool, "");
+		expect(result).not.toBe(comment);
+		expect(result).toBeInstanceOf(Comment);
+		expect(pool).toEqual([comment, div]); // pool unchanged
+	});
+
+	test("falls back to createComment when no comment in pool", () => {
+		const div = document.createElement("div");
+		const pool: ChildNode[] = [div];
+		const result = claimComment(pool);
+		expect(result).toBeInstanceOf(Comment);
+		expect(pool).toEqual([div]);
+	});
+
+	test("handles empty pool", () => {
+		const pool: ChildNode[] = [];
+		const result = claimComment(pool);
+		expect(result).toBeInstanceOf(Comment);
+		expect(pool).toEqual([]);
+	});
+});
+
+describe("hydrateKeyedList", () => {
+	test("claims anchor and sibling elements, builds keyMap", () => {
+		// Simulate SSR output: <!--g--> <li>A</li> <li>B</li> <!--/g-->
+		const parent = document.createElement("ul");
+		const open = document.createComment("g");
+		const li1 = document.createElement("li");
+		li1.textContent = "A";
+		const li2 = document.createElement("li");
+		li2.textContent = "B";
+		const close = document.createComment("/g");
+		parent.appendChild(open);
+		parent.appendChild(li1);
+		parent.appendChild(li2);
+		parent.appendChild(close);
+
+		const pool: ChildNode[] = [open, li1, li2, close];
+		const items = [{ id: "a" }, { id: "b" }];
+
+		const result = hydrateKeyedList(
+			pool,
+			items,
+			(item) => item.id,
+			(item) => {
+				const li = document.createElement("li");
+				li.textContent = item.id;
+				return li;
+			},
+		);
+
+		expect(result.anchor).toBe(open);
+		expect(result.keyMap.size).toBe(2);
+		expect(result.keyMap.get("a")).toBe(li1);
+		expect(result.keyMap.get("b")).toBe(li2);
+		// Pool lost anchor (g) via claimComment.
+		// li nodes + /g remain in pool array (walk removes from DOM only)
+		expect(pool.length).toBe(3); // li1, li2, /g still in pool array
+	});
+
+	test("handles SSR/client order mismatch by reconciling", () => {
+		// SSR rendered: A, B. Client expects: B, A.
+		const parent = document.createElement("ul");
+		const open = document.createComment("g");
+		const liA = document.createElement("li");
+		liA.textContent = "A";
+		const liB = document.createElement("li");
+		liB.textContent = "B";
+		const close = document.createComment("/g");
+		parent.appendChild(open);
+		parent.appendChild(liA);
+		parent.appendChild(liB);
+		parent.appendChild(close);
+
+		// Pool has anchor + items in SSR order
+		const pool: ChildNode[] = [open, liA, liB, close];
+		// Client order is reversed
+		const items = [{ id: "b" }, { id: "a" }];
+
+		const result = hydrateKeyedList(
+			pool,
+			items,
+			(item) => item.id,
+			(item) => {
+				const li = document.createElement("li");
+				li.textContent = item.id;
+				return li;
+			},
+		);
+
+		// keyMap should have the claimed nodes (mapped by SSR position)
+		expect(result.keyMap.get("b")).toBe(liA); // first sibling → first signal item key
+		expect(result.keyMap.get("a")).toBe(liB); // second sibling → second signal item key
+	});
+
+	test("empty signal items → empty keyMap", () => {
+		const parent = document.createElement("ul");
+		const open = document.createComment("g");
+		const close = document.createComment("/g");
+		parent.appendChild(open);
+		parent.appendChild(close);
+
+		const pool: ChildNode[] = [open, close];
+		const result = hydrateKeyedList(
+			pool,
+			[],
+			(item: { id: string }) => item.id,
+			() => document.createElement("li"),
+		);
+
+		expect(result.anchor).toBe(open);
+		expect(result.keyMap.size).toBe(0);
+	});
+});
+
+describe("A1 createRawSignal", () => {
+	test("skips proxy for objects", () => {
+		const state = createRawSignal({ name: "Alice" });
+		expect(state()).toEqual({ name: "Alice" });
+		// Raw signal — direct object, not proxied
+		const obj = state();
+		state.set({ name: "Bob" });
+		expect(state()).toEqual({ name: "Bob" });
+	});
+
+	test("works with primitives", () => {
+		const count = createRawSignal(0);
+		expect(count()).toBe(0);
+		count.set(5);
+		expect(count()).toBe(5);
+	});
+
+	test("is reactive", () => {
+		const count = createRawSignal(0);
+		let runs = 0;
+		createEffect(() => {
+			count();
+			runs++;
+		});
+		expect(runs).toBe(1);
+		batch(() => {
+			count.set(1);
+		});
+		expect(runs).toBe(2);
+	});
+
+	test(".peek() reads without tracking", () => {
+		const count = createRawSignal(0);
+		let runs = 0;
+		createEffect(() => {
+			count.peek();
+			runs++;
+		});
+		expect(runs).toBe(1);
+		batch(() => {
+			count.set(1);
+		});
+		expect(runs).toBe(1);
+	});
+});
+
+describe("A2 snapshot", () => {
+	test("returns primitive values as-is", () => {
+		expect(snapshot(42)).toBe(42);
+		expect(snapshot("hello")).toBe("hello");
+		expect(snapshot(null)).toBe(null);
+		expect(snapshot(undefined)).toBe(undefined);
+	});
+
+	test("unwraps proxy to plain object", () => {
+		const state = createSignal({ name: "Alice", age: 30 });
+		const snap = snapshot(state());
+		expect(snap).toEqual({ name: "Alice", age: 30 });
+		expect(snap).not.toBe(state()); // distinct reference
+	});
+
+	test("unwraps proxy to plain array", () => {
+		const items = createSignal([1, 2, 3]);
+		const snap = snapshot(items());
+		expect(snap).toEqual([1, 2, 3]);
+		expect(Array.isArray(snap)).toBe(true);
+		expect(snap).not.toBe(items()); // distinct reference
+	});
+
+	test("non-proxy objects are returned as-is", () => {
+		const obj = { plain: true };
+		expect(snapshot(obj)).toBe(obj);
+	});
+
+	test("deeply nested snapshot is fully un-proxied", () => {
+		const obj = createSignal({ a: { b: { c: 1 } } });
+		const s = snapshot(obj());
+		expect(s.a.b.c).toBe(1);
+		// s.a.b should NOT be a proxy — it's a plain object from the deep copy
+		//biome-ignore lint: shut up
+		const proxyTargetCheck = (val: object) =>
+			typeof val === "object" &&
+			val !== null &&
+			!Object.getPrototypeOf(val)?.constructor?.name?.includes("Map");
+		// Verify no nested proxy: accessing s.a.b.c should not trigger tracking
+        let tracked = false;
+		//biome-ignore lint: shut up
+		const prev = (globalThis as any).__sigil_tracking_test;
+		(globalThis as any).__sigil_tracking_test = () => (tracked = true);
+		const raw = s.a.b;
+		// No reactive tracking should happen on plain objects
+		expect(raw.c).toBe(1);
+		// Deep compare confirms it's a full independent copy
+		expect(s).toEqual({ a: { b: { c: 1 } } });
+		expect(s.a).not.toBe(obj().a);
+		expect(s.a.b).not.toBe(obj().a.b);
+	});
+});
+
+describe("A3 tracking", () => {
+	test("returns false outside effect", () => {
+		expect(tracking()).toBe(false);
+	});
+
+	test("returns true inside effect", () => {
+		let inside = false;
+		createEffect(() => {
+			inside = tracking();
+		});
+		expect(inside).toBe(true);
+	});
+
+	test("returns false after effect completes", () => {
+		createEffect(() => {
+			tracking();
+		});
+		expect(tracking()).toBe(false);
+	});
+});
+
+describe("A4 createInspectEffect", () => {
+	test("does not throw", () => {
+		const count = createSignal(0);
+		expect(() => {
+			createInspectEffect(() => [count()]);
+		}).not.toThrow();
+	});
+
+	test("accepts custom callback", () => {
+		const count = createSignal(0);
+		const logged: unknown[][] = [];
+		createInspectEffect(
+			() => [count()],
+			(vals) => logged.push(vals),
+		);
+		expect(logged.length).toBe(1);
+		expect(logged[0]).toEqual([0]);
+	});
+});
+
+describe("A5 createEffectPre", () => {
+	test("runs immediately like createEffect", () => {
+		const count = createSignal(0);
+		let seen = -1;
+		createEffectPre(() => {
+			seen = count();
+		});
+		expect(seen).toBe(0);
+	});
+
+	test("reruns on signal change", () => {
+		const count = createSignal(0);
+		let seen = -1;
+		createEffectPre(() => {
+			seen = count();
+		});
+		batch(() => {
+			count.set(5);
+		});
+		expect(seen).toBe(5);
+	});
+});
+
+describe("A7 ReactiveMap", () => {
+	test("basic set/get", () => {
+		const map = new ReactiveMap<string, number>();
+		map.set("a", 1);
+		expect(map.get("a")).toBe(1);
+	});
+
+	test("reactivity: get tracks reads", () => {
+		const map = new ReactiveMap<string, number>();
+		let size = 0;
+		createEffect(() => {
+			size = map.size;
+		});
+		expect(size).toBe(0);
+		batch(() => {
+			map.set("x", 1);
+		});
+		expect(size).toBe(1);
+	});
+
+	test("deleted key triggers reactivity", () => {
+		const map = new ReactiveMap<string, number>();
+		map.set("a", 1);
+		let accessed: number | undefined;
+		createEffect(() => {
+			accessed = map.get("a");
+		});
+		expect(accessed).toBe(1);
+		batch(() => {
+			map.delete("a");
+		});
+		expect(accessed).toBe(undefined);
+	});
+
+	test("clear triggers reactivity", () => {
+		const map = new ReactiveMap<string, number>();
+		map.set("a", 1);
+		let size = 0;
+		createEffect(() => {
+			size = map.size;
+		});
+		batch(() => {
+			map.clear();
+		});
+		expect(size).toBe(0);
+	});
+
+	test("forEach tracks reads", () => {
+		const map = new ReactiveMap<string, number>();
+		map.set("a", 1);
+		let count = 0;
+		createEffect(() => {
+            count = 0;
+            //biome-ignore lint: shut up
+			map.forEach(() => count++);
+		});
+		expect(count).toBe(1);
+		batch(() => {
+			map.set("b", 2);
+		});
+		expect(count).toBe(2);
+	});
+
+	test("per-key granularity: setting key X does not re-trigger effect reading key Y", () => {
+		const map = new ReactiveMap<string, number>();
+		map.set("a", 1);
+		map.set("b", 2);
+		let aRuns = 0;
+		let bRuns = 0;
+		createEffect(() => {
+			map.get("a");
+			aRuns++;
+		});
+		createEffect(() => {
+			map.get("b");
+			bRuns++;
+		});
+		expect(aRuns).toBe(1);
+		expect(bRuns).toBe(1);
+
+		batch(() => {
+			map.set("a", 10); // only a-effect should rerun
+		});
+		expect(aRuns).toBe(2);
+		expect(bRuns).toBe(1);
+
+		batch(() => {
+			map.set("b", 20); // only b-effect should rerun
+		});
+		expect(aRuns).toBe(2);
+		expect(bRuns).toBe(2);
+	});
+
+	test("per-key: adding new key triggers struct but not existing key effects", () => {
+		const map = new ReactiveMap<string, number>();
+		map.set("a", 1);
+		let aRuns = 0;
+		let sizeRuns = 0;
+		createEffect(() => {
+			map.get("a");
+			aRuns++;
+		});
+		createEffect(() => {
+			map.size;
+			sizeRuns++;
+		});
+		expect(aRuns).toBe(1);
+		expect(sizeRuns).toBe(1);
+
+		batch(() => {
+			map.set("b", 2); // new key — struct changes, a's value doesn't
+		});
+		expect(aRuns).toBe(1);
+		expect(sizeRuns).toBe(2);
+	});
+});
+
+describe("A7 ReactiveSet", () => {
+	test("basic add/has", () => {
+		const set = new ReactiveSet<number>();
+		set.add(1);
+		expect(set.has(1)).toBe(true);
+	});
+
+	test("reactivity: has tracks reads", () => {
+		const set = new ReactiveSet<number>();
+		let hasIt = false;
+		createEffect(() => {
+			hasIt = set.has(1);
+		});
+		expect(hasIt).toBe(false);
+		batch(() => {
+			set.add(1);
+		});
+		expect(hasIt).toBe(true);
+	});
+
+	test("delete triggers reactivity", () => {
+		const set = new ReactiveSet<number>();
+		set.add(1);
+		let size = 0;
+		createEffect(() => {
+			size = set.size;
+		});
+		expect(size).toBe(1);
+		batch(() => {
+			set.delete(1);
+		});
+		expect(size).toBe(0);
+	});
+
+	test("clear triggers reactivity", () => {
+		const set = new ReactiveSet<number>();
+		set.add(1);
+		let size = 0;
+		createEffect(() => {
+			size = set.size;
+		});
+		batch(() => {
+			set.clear();
+		});
+		expect(size).toBe(0);
+	});
+
+	test("forEach tracks reads", () => {
+		const set = new ReactiveSet<string>();
+		set.add("a");
+		let count = 0;
+		createEffect(() => {
+            count = 0;
+			//biome-ignore lint: shut up
+			set.forEach(() => count++);
+		});
+		expect(count).toBe(1);
+		batch(() => {
+			set.add("b");
+		});
+		expect(count).toBe(2);
+	});
+});
+
+describe("A8 easing functions", () => {
+	test("linear is identity", () => {
+		expect(linear(0)).toBe(0);
+		expect(linear(0.5)).toBe(0.5);
+		expect(linear(1)).toBe(1);
+	});
+
+	test("easeInQuad is quadratic", () => {
+		expect(easeInQuad(0)).toBe(0);
+		expect(easeInQuad(0.5)).toBe(0.25);
+		expect(easeInQuad(1)).toBe(1);
+	});
+
+	test("easeOutQuad completes at 1", () => {
+		expect(easeOutQuad(0)).toBe(0);
+		expect(easeOutQuad(1)).toBe(1);
+	});
+
+	test("all easing functions return 0 at t=0 and 1 at t=1", () => {
+		const fns = [
+			easeInQuad,
+			easeOutQuad,
+			easeInOutQuad,
+			easeInCubic,
+			easeOutCubic,
+			easeInOutCubic,
+			easeInQuart,
+			easeOutQuart,
+			easeInOutQuart,
+			easeInQuint,
+			easeOutQuint,
+			easeInOutQuint,
+			easeInSine,
+			easeOutSine,
+			easeInOutSine,
+		];
+		for (const fn of fns) {
+			expect(fn(0)).toBeCloseTo(0, 10);
+			expect(fn(1)).toBeCloseTo(1, 10);
+		}
+	});
+});
+
+describe("A9 createProfilerEffect", () => {
+	test("runs the effect", () => {
+		let ran = false;
+		createProfilerEffect("test", () => {
+			ran = true;
+		});
+		expect(ran).toBe(true);
+	});
+
+	test("reacts to signal changes", () => {
+		const count = createSignal(0);
+		let seen = -1;
+		createProfilerEffect("test", () => {
+			seen = count();
+		});
+		expect(seen).toBe(0);
+		batch(() => {
+			count.set(5);
+		});
+		expect(seen).toBe(5);
+	});
+});
+
+describe("Array reactivity", () => {
+    test("push on $state array triggers reactivity", async () => {
+        const items = createSignal([] as string[]);
+        let count = 0;
+        createEffect(() => {
+            items(); // now auto-tracks length
+            count++;
+        });
+        await tick();
+        expect(count).toBe(1); // initial run
+        items().push("a");
+        await tick();
+        expect(count).toBe(2); // re-ran after push
+        expect(items().length).toBe(1);
+    });
+
+    test("pop on $state array triggers reactivity", async () => {
+        const items = createSignal(["a", "b"] as string[]);
+        let len = 0;
+        createEffect(() => {
+            len = items().length; // reads length, subscribes
+        });
+        await tick();
+        expect(len).toBe(2);
+        items().pop();
+        await tick();
+        expect(len).toBe(1);
+    });
+
+    test("splice on $state array triggers reactivity", async () => {
+        const items = createSignal(["a", "b", "c"] as string[]);
+        let len = 0;
+        createEffect(() => { len = items().length; });
+        await tick();
+        expect(len).toBe(3);
+        items().splice(1, 1);
+        await tick();
+        expect(len).toBe(2);
+    });
+})