aberdeen 0.2.4 → 0.5.0

package/src/aberdeen.ts

@@ -1,2037 +1,2297 @@
-
+import { ReverseSortedSet } from "./helpers/reverseSortedSet.js";
 
 /*
- * QueueRunner
- *
- * `queue()`d runners are executed on the next timer tick, by order of their
- * `queueOrder` values.
- */
+* QueueRunner
+*
+* `queue()`d runners are executed on the next timer tick, by order of their
+* `prio` values.
+*/
 interface QueueRunner {
-	_queueOrder: number
-	_queueRun(): void
+	prio: number; // Higher values have higher priority
+	queueRun(): void;
 }
 
-let queueArray: Array<QueueRunner> = []
-let queueSet: Set<QueueRunner> = new Set()
-let queueOrdered = true
-let runQueueDepth = 0
-let queueIndex: number | undefined
+let sortedQueue: ReverseSortedSet<QueueRunner> | undefined; // When set, a runQueue is scheduled or currently running.
+let runQueueDepth = 0 // Incremented when a queue event causes another queue event to be added. Reset when queue is empty. Throw when >= 42 to break (infinite) recursion.
+let topRedrawScope: Scope | undefined // The scope that triggered the current redraw. Elements drawn at this scope level may trigger 'create' animations.
 
 /** @internal */
-export type Patch = Map<ObsCollection, Map<any, [any, any]>>;
+export type TargetType = any[] | {[key: string]: any};
+/** @internal */
+export type DatumType = TargetType | boolean | number | string | null | undefined;
 
 function queue(runner: QueueRunner) {
-	if (queueSet.has(runner)) return
-	if (runQueueDepth > 42) {
-		throw new Error("Too many recursive updates from observes")
-	}
-	if (!queueArray.length) {
-		setTimeout(runQueue, 0)
-	}
-	else if (runner._queueOrder < queueArray[queueArray.length-1]._queueOrder) {
-		queueOrdered = false
-	}
-	queueArray.push(runner)
-	queueSet.add(runner)
-}
-
-function runQueue(): void {
-	onCreateEnabled = true
-	for(queueIndex = 0; queueIndex < queueArray.length; ) {
-		// Sort queue if new unordered items have been added since last time.
-		if (!queueOrdered) {
-			queueArray.splice(0, queueIndex)
-			queueIndex = 0
-			// Order queued observers by depth, lowest first.
-			queueArray.sort((a,b) => a._queueOrder - b._queueOrder)
-			queueOrdered = true
-		}
-		
-		// Process the rest of what's currently in the queue.
-		let batchEndIndex = queueArray.length
-		for(; queueIndex < batchEndIndex && queueOrdered; queueIndex++) {
-			let runner = queueArray[queueIndex]
-			queueSet.delete(runner)
-			runner._queueRun()
+	if (!sortedQueue) {
+		sortedQueue = new ReverseSortedSet<QueueRunner>('prio');
+		setTimeout(runQueue, 0);
+	} else if (!(runQueueDepth&1)) {
+		runQueueDepth++; // Make it uneven
+		if (runQueueDepth > 98) {
+			throw new Error("Too many recursive updates from observes");
 		}
-		
-		// If new items have been added to the queue while processing the previous
-		// batch, we'll need to run this loop again.
-		runQueueDepth++
 	}
-
-	queueArray.length = 0
-	queueIndex = undefined
-	runQueueDepth = 0
-	onCreateEnabled = false
+	sortedQueue.add(runner);
 }
 
-
 /**
- * Schedule a DOM read operation to be executed in Aberdeen's internal task queue.
- *
- * This function is used to batch DOM read operations together, avoiding unnecessary
- * layout recalculations and improving browser performance. A DOM read operation should
- * only *read* from the DOM, such as measuring element dimensions or retrieving computed styles.
+ * Forces the immediate and synchronous execution of all pending reactive updates.
  *
- * By batching DOM reads separately from DOM writes, this prevents the browser from
- * interleaving layout reads and writes, which can force additional layout recalculations.
- * This helps reduce visual glitches and flashes by ensuring the browser doesn't render
- * intermediate DOM states during updates.
+ * Normally, changes to observed data sources (like proxied objects or arrays)
+ * are processed asynchronously in a batch after a brief timeout (0ms). This function
+ * allows you to bypass the timeout and process the update queue immediately.
  *
- * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM read
- * operations happen before any DOM writes in the same queue cycle, minimizing layout thrashing.
+ * This can be useful in specific scenarios where you need the DOM to be updated
+ * synchronously.
  *
- * @param func The function to be executed as a DOM read operation.
- */
-export function scheduleDomReader(func: () => void): void {
-	let order = (queueIndex!=null && queueIndex < queueArray.length && queueArray[queueIndex]._queueOrder >= 1000) ? ((queueArray[queueIndex]._queueOrder+1) & (~1)) : 1000
-	queue({_queueOrder: order, _queueRun: func})
-}
-
-/**
- * Schedule a DOM write operation to be executed in Aberdeen's internal task queue.
+ * This function is re-entrant, meaning it is safe to call `runQueue` from within
+ * a function that is itself being executed as part of an update cycle triggered
+ * by a previous (or the same) `runQueue` call.
  *
- * This function is used to batch DOM write operations together, avoiding unnecessary
- * layout recalculations and improving browser performance. A DOM write operation should
- * only *write* to the DOM, such as modifying element properties or applying styles.
- *
- * By batching DOM writes separately from DOM reads, this prevents the browser from
- * interleaving layout reads and writes, which can force additional layout recalculations.
- * This helps reduce visual glitches and flashes by ensuring the browser doesn't render
- * intermediate DOM states during updates.
+ * @example
+ * ```typescript
+ * const data = proxy("before");
+ * 
+ * $({text: data});
+ * console.log(1, document.body.innerHTML); // before
  *
- * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM write
- * operations happen after all DOM reads in the same queue cycle, minimizing layout thrashing.
+ * // Make an update that should cause the DOM to change.
+ * data.value = "after";
  *
- * @param func The function to be executed as a DOM write operation.
+ * // Normally, the DOM update would happen after a timeout.
+ * // But this causes an immediate update:
+ * runQueue();
+ * 
+ * console.log(2, document.body.innerHTML); // after
+ * ```
  */
-export function scheduleDomWriter(func: () => void): void {
-	let order = (queueIndex!=null && queueIndex < queueArray.length && queueArray[queueIndex]._queueOrder >= 1000) ? (queueArray[queueIndex]._queueOrder | 1) : 1001
-	queue({_queueOrder: order, _queueRun: func})
+export function runQueue(): void {
+	let time = Date.now();
+	while(sortedQueue) {
+		const runner = sortedQueue.fetchLast();
+		if (!runner) break;
+		if (runQueueDepth&1) runQueueDepth++; // Make it even
+		runner.queueRun();
+	}
+	sortedQueue = undefined;
+	runQueueDepth = 0;
+	time = Date.now() - time;
+	if (time>1) console.debug(`Aberdeen queue took ${time}ms`);
 }
 
 
-/** @internal */
-type SortKeyType = number | string | Array<number|string>
-
-
 /**
- * Given an integer number, a string or an array of these, this function returns a string that can be used
- * to compare items in a natural sorting order. So `[3, 'ab']` should be smaller than `[3, 'ac']`.
- * The resulting string is guaranteed to never be empty.
+ * A sort key, as used by {@link onEach}, is a value that determines the order of items. It can	
+ * be a number, string, or an array of numbers/strings. The sort key is used to sort items
+ * based on their values. The sort key can also be `undefined`, which indicates that the item
+ * should be ignored.
+ * @private
  */
-function sortKeyToString(key: SortKeyType) {
-	if (key instanceof Array) {
-		return key.map(partToStr).join('')
-	} else {
-		return partToStr(key)
-	}
-}
+export type SortKeyType = number | string | Array<number|string> | undefined;
 
+/**
+* Given an integer number or a string, this function returns a string that can be concatenated
+* with other strings to create a composed sort key, that follows natural number ordering.
+*/
 function partToStr(part: number|string): string {
 	if (typeof part === 'string') {
-		return part + '\x01'
-	} else {
-		let result = numToString(Math.abs(Math.round(part)), part<0)
-		// Prefix the number of digits, counting down from 128 for negative and up for positive
-		return String.fromCharCode(128 + (part>0 ? result.length : -result.length)) + result
+		return part + '\x01'; // end-of-string
 	}
-}
-
-function numToString(num: number, neg: boolean): string {
-	let result = ''
+	let result = '';
+	let num = Math.abs(Math.round(part));
+	const negative = part < 0;
 	while(num > 0) {
 		/*
 		* We're reserving a few character codes:
 		* 0 - for compatibility
-		* 1 - separator between array items
+		* 1 - separator between string array items
 		* 65535 - for compatibility
 		*/
-		result += String.fromCharCode(neg ? 65535 - (num % 65533) : 2 + (num % 65533))
-		num = Math.floor(num / 65533)
+		result += String.fromCharCode(negative ? 65534 - (num % 65533) : 2 + (num % 65533));
+		num = Math.floor(num / 65533);
 	}
-	return result
+	// Prefix the number of digits, counting down from 128 for negative and up for positive
+	return String.fromCharCode(128 + (negative ? -result.length : result.length)) + result;
 }
 
-/** @internal */
-interface Observer {
-	_onChange(index: any, newData: DatumType, oldData: DatumType): void
+/**
+ * Creates a new string that has the opposite sort order compared to the input string.
+ *
+ * This is achieved by flipping the bits of each character code in the input string.
+ * The resulting string is intended for use as a sort key, particularly with the
+ * `makeKey` function in {@link onEach}, to achieve a descending sort order.
+ *
+ * **Warning:** The output string will likely contain non-printable characters or
+ * appear as gibberish and should not be displayed to the user.
+ *
+ * @example
+ * ```typescript
+ * const users = proxy([
+ *     { id: 1, name: 'Charlie', score: 95 },
+ *     { id: 2, name: 'Alice', score: 100 },
+ *     { id: 3, name: 'Bob', score: 90 },
+ * ]);
+ *
+ * onEach(users, (user) => {
+ *     $(`p:${user.name}: ${user.score}`);
+ * }, (user) => invertString(user.name)); // Reverse alphabetic order
+ * ```
+ *
+ * @param input The string whose sort order needs to be inverted.
+ * @returns A new string that will sort in the reverse order of the input string.
+ * @see {@link onEach} for usage with sorting.
+ */
+export function invertString(input: string): string {
+	let result = '';
+	for (let i = 0; i < input.length; i++) {
+		result += String.fromCodePoint(65535 - input.charCodeAt(i));
+	}
+	return result;
 }
 
-/*
- * Scope
- * @internal
- *
- * A `Scope` is created with a `render` function that is run initially,
- * and again when any of the `Store`s that this function reads are changed. Any
- * DOM elements that is given a `render` function for its contents has its own scope.
- * The `Scope` manages the position in the DOM tree elements created by `render`
- * are inserted at. Before a rerender, all previously created elements are removed
- * and the `clean` functions for the scope and all sub-scopes are called.
- */
 
-abstract class Scope implements QueueRunner, Observer {
-	_parentElement: Element | undefined
+// Each new scope gets a lower prio than all scopes before it, by decrementing
+// this counter.
+let lastPrio = 0;
+
+abstract class Scope implements QueueRunner {
+	// Scopes are to be handled in creation order. This will make sure that parents are
+	// handled before their children (as they should), and observes are executed in the
+	// order of the source code.
+	prio: number = --lastPrio;
 
-	// How deep is this scope nested in other scopes; we use this to make sure events
-	// at lower depths are handled before events at higher depths.
-	_queueOrder: number
+	abstract onChange(index: any, newData: DatumType, oldData: DatumType): void;
+	abstract queueRun(): void;
 	
-	// The node or scope right before this scope that has the same `parentElement`
-	_precedingSibling: Node | Scope | undefined
+	abstract getLastNode(): Node | undefined;
+	abstract getPrecedingNode(): Node | undefined;
+	abstract delete(): void;
 
-	// The last child node or scope within this scope that has the same `parentElement`
-	_lastChild: Node | Scope | undefined
+	remove() {
+		// Remove any nodes
+		const lastNode = this.getLastNode();
+		if (lastNode) removeNodes(lastNode, this.getPrecedingNode());
 
+		// Run any cleaners
+		this.delete();
+	}
+
+	// toString(): string {
+	// 	return `${this.constructor.name}`
+	// }
+}
+
+/**
+ * All Scopes that can hold nodes and subscopes, including `SimpleScope` and `OnEachItemScope`
+ * but *not* `OnEachScope`, are `ContentScope`s.
+ */
+abstract class ContentScope extends Scope {
 	// The list of clean functions to be called when this scope is cleaned. These can
 	// be for child scopes, subscriptions as well as `clean(..)` hooks.
-	_cleaners: Array<{_clean: (scope: Scope) => void}> = []
+	cleaners: Array<{delete: (scope: Scope) => void} | (() => void)>;
 
-	// Set to true after the scope has been cleaned, causing any spurious reruns to
-	// be ignored.
-	_isDead: boolean = false
-
-	constructor(
-		parentElement: Element | undefined,
-		precedingSibling: Node | Scope | undefined,
-		queueOrder: number,
-	) {
-		this._parentElement = parentElement
-		this._precedingSibling = precedingSibling
-		this._queueOrder = queueOrder
-	}
-
-	// Get a reference to the last Node preceding this Scope, or undefined if there is none
-	_findPrecedingNode(stopAt: Scope | Node | undefined = undefined): Node | undefined {
-		let cur: Scope = this
-		let pre: Scope | Node | undefined
-		while((pre = cur._precedingSibling) && pre !== stopAt) {
-			if (pre instanceof Node) return pre
-			let node = pre._findLastNode()
-			if (node) return node
-			cur = pre
-		}
+	constructor(cleaners: Array<{delete: (scope: Scope) => void} | (() => void)> = []) {
+		super();
+		this.cleaners = cleaners;
 	}
 
-	// Get a reference to the last Node within this scope and parentElement
-	_findLastNode(): Node | undefined {
-		if (this._lastChild) {
-			if (this._lastChild instanceof Node) return this._lastChild
-			else return this._lastChild._findLastNode() || this._lastChild._findPrecedingNode(this._precedingSibling)
-		}
-	}
+	lastChild: Node | Scope | undefined;
 
-	_addNode(node: Node) {
-		if (!this._parentElement) throw new ScopeError(true)
-		let prevNode = this._findLastNode() || this._findPrecedingNode()
+	// Should be subclassed in most cases..
+	redraw() {};
 
-		this._parentElement.insertBefore(node, prevNode ? prevNode.nextSibling : this._parentElement.firstChild)
-		this._lastChild = node
-	}
+	abstract parentElement: Element;
 
-	_remove() {
-		if (this._parentElement) {
-			let lastNode: Node | undefined = this._findLastNode()
-			if (lastNode) {
-				// at least one DOM node to be removed
-				
-				let nextNode: Node | undefined = this._findPrecedingNode()
-				nextNode = (nextNode ? nextNode.nextSibling : this._parentElement.firstChild) as Node | undefined
+	getLastNode(): Node | undefined {
+		return findLastNodeInPrevSiblings(this.lastChild);
+	}
 
-				this._lastChild = undefined
-				
-				// Keep removing DOM nodes starting at our first node, until we encounter the last node
-				while(true) {
-					/* c8 ignore next */
-					if (!nextNode) return internalError(1)
-						
-					const node = nextNode
-					nextNode = node.nextSibling || undefined
-					let onDestroy = onDestroyMap.get(node)
-					if (onDestroy && node instanceof Element) {
-						if (onDestroy !== true) {
-							if (typeof onDestroy === 'function') {
-								onDestroy(node)
-							} else {
-								destroyWithClass(node, onDestroy)
-							}
-							// This causes the element to be ignored from this function from now on:
-							onDestroyMap.set(node, true)
-						}
-					// Ignore the deleting element
-					} else {
-						this._parentElement.removeChild(node)
-					}
-					if (node === lastNode) break
-				}
-			}
+	/**
+	 * Call cleaners and make sure the scope is not queued.
+	 * It is called `delete`, so that the list of cleaners can also contain `Set`s.
+	 */
+	delete(/* ignore observer argument */) {
+		for(let cleaner of this.cleaners) {
+			if (typeof cleaner === 'function') cleaner();
+			else cleaner.delete(this); // pass in observer argument, in case `cleaner` is a `Set`
 		}
+		this.cleaners.length = 0;
+		sortedQueue?.remove(this); // This is very fast and O(1) when not queued
 
-		// run cleaners
-		this._clean()
+		// To prepare for a redraw or to help GC when we're being removed:
+		this.lastChild = undefined;
+	}
+	
+	queueRun() {
+		this.remove();
+		
+		topRedrawScope = this
+		this.redraw();
+		topRedrawScope = undefined
 	}
 
-	_clean() {
-		this._isDead = true
-		for(let cleaner of this._cleaners) {
-			cleaner._clean(this)
-		}
-		this._cleaners.length = 0
+	getInsertAfterNode() {
+		return this.getLastNode() || this.getPrecedingNode();
 	}
 
-	_onChange(index: any, newData: DatumType, oldData: DatumType) {
-		queue(this)
+	onChange(index: any, newData: DatumType, oldData: DatumType) {
+		queue(this);
 	}
 
-	abstract _queueRun(): void
+	getChildPrevSibling() {
+		return this.lastChild;
+	}
 }
 
-class SimpleScope extends Scope {
-	_renderer: () => void
+
+class ChainedScope extends ContentScope {
+	// The node or scope right before this scope that has the same `parentElement`.
+	public prevSibling: Node | Scope | undefined;
 
 	constructor(
-		parentElement: Element | undefined,
-		precedingSibling: Node | Scope | undefined,
-		queueOrder: number,
-		renderer: () => void,
+		// The parent DOM element we'll add our child nodes to.
+		public parentElement: Element,
+		// When true, we share our 'cleaners' list with the parent scope.
+		useParentCleaners: boolean = false,
 	) {
-		super(parentElement, precedingSibling, queueOrder)
-		this._renderer = renderer
+		super(useParentCleaners ? currentScope.cleaners : []);
+		if (parentElement === currentScope.parentElement) {
+			// If `currentScope` is not actually a ChainedScope, prevSibling will be undefined, as intended
+			this.prevSibling = currentScope.getChildPrevSibling();
+			currentScope.lastChild = this;
+		}
+
+		// We're always adding ourselve as a cleaner, in order to run our own cleaners
+		// and to remove ourselve from the queue (if we happen to be in there).
+		if (!useParentCleaners) currentScope.cleaners.push(this);
 	}
 
-	_queueRun() {
-		/* c8 ignore next */
-		if (currentScope) internalError(2)
+	getPrecedingNode(): Node | undefined {
+		return findLastNodeInPrevSiblings(this.prevSibling);
+	}
+	
+	getChildPrevSibling() {
+		return this.lastChild || this.prevSibling;
+	}
+}
 
-		if (this._isDead) return
-		this._remove()
-		this._isDead = false
+/**
+* @internal
+* A `RegularScope` is created with a `render` function that is run initially,
+* and again when any of the `Store`s that this function reads are changed. Any
+* DOM elements that is given a `render` function for its contents has its own scope.
+* The `Scope` manages the position in the DOM tree elements created by `render`
+* are inserted at. Before a rerender, all previously created elements are removed
+* and the `clean` functions for the scope and all sub-scopes are called.
+*/
+class RegularScope extends ChainedScope {
+	constructor(
+		parentElement: Element,
+		// The function that will be reactively called. Elements it creates using `$` are 
+		// added to the appropriate position within `parentElement`.
+		public renderer: () => any,
+	) {
+		super(parentElement);
 
-		this._update()
+		// Do the initial run
+		this.redraw();
 	}
 
-	_update() {
-		let savedScope = currentScope
-		currentScope = this
+	redraw() {
+		let savedScope = currentScope;
+		currentScope = this;
 		try {
-			this._renderer()
+			this.renderer();
 		} catch(e) {
 			// Throw the error async, so the rest of the rendering can continue
-			handleError(e)
+			handleError(e, true);
 		}
-		currentScope = savedScope
+		currentScope = savedScope;
 	}
 }
 
-let immediateQueue: Set<Scope> = new Set()
 
-class ImmediateScope extends SimpleScope {
-	_onChange(index: any, newData: DatumType, oldData: DatumType) {
-		immediateQueue.add(this)
+class RootScope extends ContentScope {
+	parentElement = document.body;
+	getPrecedingNode(): Node | undefined {
+		return undefined;
 	}
 }
 
-let immediateQueuerRunning = false
-function runImmediateQueue() {
-	if (immediateQueuerRunning) return
-	for(let count=0; immediateQueue.size; count++) {
-		if (count > 42) {
-			immediateQueue.clear()
-			throw new Error("Too many recursive updates from immediate-mode observes")
-		}
-		immediateQueuerRunning = true
-		let copy = immediateQueue
-		immediateQueue = new Set()
-		let savedScope = currentScope
-		currentScope = undefined
-		try {
-			for(const scope of copy) {
-				scope._queueRun()
-			}
-		} finally {
-			currentScope = savedScope
-			immediateQueuerRunning = false
-		}
+class MountScope extends ContentScope {
+	constructor(
+		// The parent DOM element we'll add our child nodes to
+		public parentElement: Element,
+		// The function that 
+		public renderer: () => any,
+	) {
+		super();
+		this.redraw();
+		currentScope.cleaners.push(this)
 	}
-}
 
-class IsEmptyObserver implements Observer {
-	scope: Scope
-	collection: ObsCollection
-	count: number
-	triggerCount: boolean
+	redraw() {
+		RegularScope.prototype.redraw.call(this);
+	}
 
-	constructor(scope: Scope, collection: ObsCollection, triggerCount: boolean) {
-		this.scope = scope
-		this.collection = collection
-		this.triggerCount = triggerCount
-		this.count = collection._getCount()
+	getPrecedingNode(): Node | undefined {
+		return undefined;
+	}
 
-		collection._addObserver(ANY_INDEX, this)
-		scope._cleaners.push(this)
+	delete() {
+		// We can't rely on our parent scope to remove all our nodes for us, as our parent
+		// probably has a totally different `parentElement`. Therefore, our `delete()` does
+		// what `_remove()` does for regular scopes.
+		removeNodes(this.getLastNode(), this.getPrecedingNode());
+		super.delete();
 	}
 
-	_onChange(index: any, newData: DatumType, oldData: DatumType) {
-		if (newData===undefined) {
-			// oldData is guaranteed not to be undefined
-			if (this.triggerCount || !--this.count) queue(this.scope)
-		} else if (oldData===undefined) {
-			if (this.triggerCount || !this.count++) queue(this.scope)
-		}
+	remove() {
+		this.delete();
 	}
+}
+
 
-	_clean() {
-		this.collection._removeObserver(ANY_INDEX, this)
+// Remove node and all its preceding siblings (uptil and excluding preNode)
+// from the DOM, using onDestroy if applicable.
+function removeNodes(node: Node | null | undefined, preNode: Node | null | undefined) {
+	while(node && node !== preNode) {
+		const prevNode: Node | null = node.previousSibling;
+		let onDestroy = onDestroyMap.get(node);
+		if (onDestroy && node instanceof Element) {
+			if (onDestroy !== true) {
+				if (typeof onDestroy === 'function') {
+					onDestroy(node);
+				} else {
+					destroyWithClass(node, onDestroy);
+				}
+				// This causes the element to be ignored from this function from now on:
+				onDestroyMap.set(node, true);
+			}
+			// Ignore the deleting element
+		} else {
+			(node as Element|Text).remove();
+		}
+		node = prevNode;
 	}
 }
 
-/** @internal */
-class OnEachScope extends Scope {
+// Get a reference to the last node within `sibling` or any of its preceding siblings.
+// If a `Node` is given, that node is returned.
+function findLastNodeInPrevSiblings(sibling: Node | Scope | undefined): Node | undefined {
+	if (!sibling || sibling instanceof Node) return sibling;
+	return sibling.getLastNode() || sibling.getPrecedingNode();
+}
 
-	/** The Node we are iterating */
-	_collection: ObsCollection
 
-	/** A function returning a number/string/array that defines the position of an item */
-	_makeSortKey: (value: Store) => SortKeyType
+class ResultScope<T extends DatumType | void> extends ChainedScope {
+	public result: ValueRef<T> = optProxy({value: undefined});
 
-	/** A function that renders an item */
-	_renderer: (itemStore: Store) => void
+	constructor(
+		parentElement: Element,
+		public renderer: () => T,
+	) {
+		super(parentElement);
 
-	/** The ordered list of currently item scopes */
-	_byPosition: OnEachItemScope[] = []
+		this.redraw();
+	}
 
-	/** The item scopes in a Map by index */
-	_byIndex: Map<any, OnEachItemScope> = new Map()
+	redraw() {
+		let savedScope = currentScope;
+		currentScope = this;
+		try {
+			this.result.value = this.renderer();
+		} catch(e) {
+			// Throw the error async, so the rest of the rendering can continue
+			handleError(e, true);
+		}
+		currentScope = savedScope;
+	}
+}
 
-	/** Indexes that have been created/removed and need to be handled in the next `queueRun` */
-	_newIndexes: Set<any> = new Set()
-	_removedIndexes: Set<any> = new Set()
+/**
+ * A `Scope` subclass optimized for reactively setting just a single element property
+ * based on a proxied reference. 
+ */
 
+class SetArgScope extends ChainedScope {
 	constructor(
-		parentElement: Element | undefined,
-		precedingSibling: Node | Scope | undefined,
-		queueOrder: number,
-		collection: ObsCollection,
-		renderer: (itemStore: Store) => void,
-		makeSortKey: (itemStore: Store) => SortKeyType
+		parentElement: Element,
+		public key: string,
+		public target: {value: DatumType},
 	) {
-		super(parentElement, precedingSibling, queueOrder)
-		this._collection = collection
-		this._renderer = renderer
-		this._makeSortKey = makeSortKey
+		super(parentElement);
+		this.redraw();
+	}
+	redraw() {
+		let savedScope = currentScope;
+		currentScope = this;
+		applyArg(this.key, this.target.value)
+		currentScope = savedScope;
 	}
+}
 
-	// toString(): string {
-	// 	return `OnEachScope(collection=${this.collection})`
-	// }
 
-	_onChange(index: any, newData: DatumType, oldData: DatumType) {
-		if (oldData===undefined) {
-			if (this._removedIndexes.has(index)) {
-				this._removedIndexes.delete(index)
-			} else {
-				this._newIndexes.add(index)
-				queue(this)
-			}
-		} else if (newData===undefined) {
-			if (this._newIndexes.has(index)) {
-				this._newIndexes.delete(index)
-			} else {
-				this._removedIndexes.add(index)
-				queue(this)
+let immediateQueue: ReverseSortedSet<Scope> = new ReverseSortedSet('prio');
+
+class ImmediateScope extends RegularScope {
+	onChange(index: any, newData: DatumType, oldData: DatumType) {
+		immediateQueue.add(this);
+	}
+}
+
+let immediateQueueRunning = false;
+function runImmediateQueue() {
+	for(let count=0; !immediateQueue.isEmpty() && !immediateQueueRunning; count++) {
+		if (count > 42) {
+			immediateQueue.clear();
+			throw new Error("Too many immediate-mode recursive updates");
+		}
+		immediateQueueRunning = true;
+		let copy = immediateQueue;
+		immediateQueue = new ReverseSortedSet('prio');
+		try {
+			for(const scope of copy) {
+				// On exception, the exception will be bubbled up to the call site, discarding any
+				// remaining immediate scopes from the queue. This behavior is perhaps debatable,
+				// but getting a synchronous exception at the call site can be very helpful.
+				scope.queueRun();
 			}
+		} finally {
+			immediateQueueRunning = false;
 		}
 	}
+}
 
-	_queueRun() {
-		if (this._isDead) return
 
-		let indexes = this._removedIndexes
-		this._removedIndexes = new Set()
-		indexes.forEach(index => {
-			this._removeChild(index)
-		})
+/** @internal */
+class OnEachScope extends Scope {
+	parentElement: Element = currentScope.parentElement;
+	prevSibling: Node | Scope | undefined;
 
-		indexes = this._newIndexes
-		this._newIndexes = new Set()
-		indexes.forEach(index => {
-			this._addChild(index)
-		})
-	}
+	/** The data structure we are iterating */
+	target: TargetType;
+	
+	/** All item scopes, by array index or object key. This is used for removing an item scope when its value
+	 * disappears, and calling all subscope cleaners. */
+	byIndex: Map<any,OnEachItemScope> = new Map();
 
-	_clean() {
-		super._clean()
-		this._collection._observers.delete(this)
-		for (const [index, scope] of this._byIndex) {
-			scope._clean()
-		}
+	/** The reverse-ordered list of item scopes, not including those for which makeSortKey returned undefined. */
+	sortedSet: ReverseSortedSet<OnEachItemScope> = new ReverseSortedSet('sortKey');
 
-		// Help garbage collection:
-		this._byPosition.length = 0
-		this._byIndex.clear()
-	}
+	/** Indexes that have been created/removed and need to be handled in the next `queueRun`. */
+	changedIndexes: Set<any> = new Set();
+	
+	constructor(
+		proxy: TargetType,
+		/** A function that renders an item */
+		public renderer: (value: DatumType, key: any, ) => void,
+		/** A function returning a number/string/array that defines the position of an item */
+		public makeSortKey?: (value: DatumType, key: any) => SortKeyType,
+	) {
+		super();
+		const target: TargetType = this.target = (proxy as any)[TARGET_SYMBOL] || proxy;
 
-	_renderInitial() {
-		/* c8 ignore next */
-		if (!currentScope) return internalError(3)
-		let parentScope = currentScope
+		subscribe(target, ANY_SYMBOL, this);
+		this.prevSibling = currentScope.getChildPrevSibling();
+		currentScope.lastChild = this;
 
-		this._collection._iterateIndexes(this)
+		currentScope.cleaners.push(this);
 
-		currentScope = parentScope
+		// Do _addChild() calls for initial items
+		if (target instanceof Array) {
+			for(let i=0; i<target.length; i++) {
+				if (target[i]!==undefined) {
+					new OnEachItemScope(this, i, false);
+				}
+			}
+		} else {
+			for(const key in target) {
+				if (target[key] !== undefined) {
+					new OnEachItemScope(this, key, false);
+				}
+			}
+		}
 	}
 
-	_addChild(itemIndex: any) {
-		let scope = new OnEachItemScope(this._parentElement, undefined, this._queueOrder+1, this, itemIndex)
-		this._byIndex.set(itemIndex, scope)
-		scope._update()
-		// We're not adding a cleaner here, as we'll be calling them from our _clean function
+	getPrecedingNode(): Node | undefined {
+		return findLastNodeInPrevSiblings(this.prevSibling);
 	}
-
-	_removeChild(itemIndex: any) {
-		let scope = this._byIndex.get(itemIndex)
-		/* c8 ignore next */
-		if (!scope) return internalError(6)
-		scope._remove()
-		this._byIndex.delete(itemIndex)
-		this._removeFromPosition(scope)
+	
+	onChange(index: any, newData: DatumType, oldData: DatumType) {
+		if (!(this.target instanceof Array) || typeof index === 'number') this.changedIndexes.add(index);
+		queue(this);
 	}
-
-	_findPosition(sortStr: string) {
-		// In case of duplicate `sortStr`s, this will return the first match.
-		let items = this._byPosition
-		let min = 0, max = items.length
-		
-		// Fast-path for elements that are already ordered (as is the case when working with arrays ordered by index)
-		if (!max || sortStr > items[max-1]._sortStr) return max
-
-		// Binary search for the insert position		
-		while(min<max) {
-			let mid = (min+max)>>1
-			if (items[mid]._sortStr < sortStr) {
-				min = mid+1
+	
+	queueRun() {
+		let indexes = this.changedIndexes;
+		this.changedIndexes = new Set();
+		for(let index of indexes) {
+			const oldScope = this.byIndex.get(index);
+			if (oldScope) oldScope.remove();
+
+			if ((this.target as any)[index] === undefined) {
+				this.byIndex.delete(index);
 			} else {
-				max = mid
+				new OnEachItemScope(this, index, true);
 			}
 		}
-		return min
+		topRedrawScope = undefined;
 	}
-
-	_insertAtPosition(child: OnEachItemScope) {
-		let pos = this._findPosition(child._sortStr)
-		this._byPosition.splice(pos, 0, child)
-		
-		// Based on the position in the list, set the precedingSibling for the new Scope
-		// and for the next sibling.
-		let nextSibling: OnEachItemScope = this._byPosition[pos+1]
-		if (nextSibling) {
-			child._precedingSibling = nextSibling._precedingSibling
-			nextSibling._precedingSibling = child
-		} else {
-			child._precedingSibling = this._lastChild || this._precedingSibling
-			this._lastChild = child
+	
+	delete() {
+		// Propagate to all our subscopes
+		for (const scope of this.byIndex.values()) {
+			scope.delete();
 		}
+		
+		// Help garbage collection:
+		this.byIndex.clear();
+		setTimeout(() => {
+			// Unsure if this is a good idea. It takes time, but presumably makes things a lot easier for GC...
+			this.sortedSet.clear(); 
+		}, 1);
 	}
-
-	_removeFromPosition(child: OnEachItemScope) {
-		if (child._sortStr==='') return
-		let pos = this._findPosition(child._sortStr)
-		while(true) {
-			if (this._byPosition[pos] === child) {
-				// Yep, this is the right scope
-				this._byPosition.splice(pos, 1)
-				if (pos < this._byPosition.length) {
-					let nextSibling: Scope | undefined = this._byPosition[pos] as (Scope | undefined)
-					/* c8 ignore next */
-					if (!nextSibling) return internalError(8)
-					/* c8 ignore next */
-					if (nextSibling._precedingSibling !== child) return internalError(13)
-					nextSibling._precedingSibling = child._precedingSibling
-				} else {
-					/* c8 ignore next */
-					if (child !== this._lastChild) return internalError(12)
-					this._lastChild = child._precedingSibling === this._precedingSibling ? undefined : child._precedingSibling	
-				}
-				return
-			}
-			// There may be another Scope with the same sortStr
-			/* c8 ignore next */
-			if (++pos >= this._byPosition.length || this._byPosition[pos]._sortStr !== child._sortStr) return internalError(5)
+	
+	getLastNode(): Node | undefined {
+		for(let scope of this.sortedSet) { // Iterates starting at last child scope.
+			const node = scope.getActualLastNode();
+			if (node) return node;
 		}
 	}
 }
 
 /** @internal */
-class OnEachItemScope extends Scope {
-	_parent: OnEachScope
-	_itemIndex: any
-	_sortStr: string = ""
-
+class OnEachItemScope extends ContentScope {
+	sortKey: string | number | undefined; // When undefined, this scope is currently not showing in the list
+	public parentElement: Element;
+	
 	constructor(
-		parentElement: Element | undefined,
-		precedingSibling: Node | Scope | undefined,
-		queueOrder: number,
-		parent: OnEachScope,
-		itemIndex: any
+		public parent: OnEachScope,
+		public itemIndex: any,
+		topRedraw: boolean,
 	) {
-		super(parentElement, precedingSibling, queueOrder)
-		this._parent = parent
-		this._itemIndex = itemIndex
-	}
+		super();
+		this.parentElement = parent.parentElement;
 
-	// toString(): string {
-	// 	return `OnEachItemScope(itemIndex=${this.itemIndex} parentElement=${this.parentElement} parent=${this.parent} precedingSibling=${this.precedingSibling} lastChild=${this.lastChild})`
-	// }
+		this.parent.byIndex.set(this.itemIndex, this);
 
-	_queueRun() {
-		/* c8 ignore next */
-		if (currentScope) internalError(4)
+		// Okay, this is hacky. In case our first (actual) child is a ChainedScope, we won't be able
+		// to provide it with a reliable prevSibling. Therefore, we'll pretend to be that sibling,
+		// doing what's need for this case in `getLastNode`.
+		// For performance, we prefer not having to create additional 'fake sibling' objects for each item.
+		this.lastChild = this;
 
-		if (this._isDead) return
-		this._remove()
-		this._isDead = false
+		// Don't register to be cleaned by parent scope, as the OnEachScope will manage this for us (for efficiency)
 
-		this._update()
+		if (topRedraw) topRedrawScope = this;
+		this.redraw();
 	}
 
-	_update() {
-		// Have the makeSortKey function return an ordering int/string/array.
-		// Since makeSortKey may get() the Store, we'll need to set currentScope first.
-		let savedScope = currentScope
-		currentScope = this
-
-		let itemStore = new Store(this._parent._collection, this._itemIndex)
+	getPrecedingNode(): Node | undefined {
+		// As apparently we're interested in the node insert position, we'll need to become part
+		// of the sortedSet now (if we weren't already).
+		// This will do nothing and barely take any time of `this` is already part of the set:
+		this.parent.sortedSet.add(this);
+		
+		const preScope = this.parent.sortedSet.prev(this);
+		// As preScope should have inserted itself as its first child, this should
+		// recursively call getPrecedingNode() on preScope in case it doesn't
+		// have any actual nodes as children yet.
+		if (preScope) return findLastNodeInPrevSiblings(preScope.lastChild);
+		return this.parent.getPrecedingNode();
+	}
 
-		let sortKey
-		try {
-			sortKey = this._parent._makeSortKey(itemStore)
-		} catch(e) {
-			handleError(e)
-		}
+	getLastNode(): Node | undefined {
+		// Hack! As explain in the constructor, this getLastNode method actually
+		// does not return the last node, but the preceding one.
+		return this.getPrecedingNode();
+	}
 
-		let oldSortStr: string = this._sortStr
-		let newSortStr: string = sortKey==null ? '' : sortKeyToString(sortKey)
+	getActualLastNode(): Node | undefined {
+		let child = this.lastChild;
 
-		if (oldSortStr!=='' && oldSortStr!==newSortStr) {
-			this._parent._removeFromPosition(this)
+		while(child && child !== this) {
+			if (child instanceof Node) return child;
+			const node = child.getLastNode();
+			if (node) return node;
+			child = child.getPrecedingNode();
 		}
+	}
 
-		this._sortStr = newSortStr
-		if (newSortStr!=='') {
-			if (newSortStr !== oldSortStr) {
-				this._parent._insertAtPosition(this)
-			}
-			try {
-				this._parent._renderer(itemStore)
-			} catch(e) {
-				handleError(e)
-			}
+	queueRun() {
+		/* c8 ignore next */
+		if (currentScope !== ROOT_SCOPE) internalError(4);
+			
+		// We're not calling `remove` here, as we don't want to remove ourselves from
+		// the sorted set. `redraw` will take care of that, if needed.
+		// Also, we can't use `getLastNode` here, as we've hacked it to return the
+		// preceding node instead.
+		if (this.sortKey !== undefined) {
+			const lastNode = this.getActualLastNode();
+			if (lastNode) removeNodes(lastNode, this.getPrecedingNode());
 		}
 
-		currentScope = savedScope
+		this.delete();
+		this.lastChild = this; // apply the hack (see constructor) again
+		
+		topRedrawScope = this;
+		this.redraw();
+		topRedrawScope = undefined;
 	}
-}
-
+	
+	redraw() {
+		// Have the makeSortKey function return an ordering int/string/array.
 
-/**
- * This global is set during the execution of a `Scope.render`. It is used by
- * functions like `node`, `text` and `clean`.
- */
-let currentScope: Scope | undefined
+		// Note that we're NOT subscribing on target[itemIndex], as the OnEachScope uses
+		// a wildcard subscription to delete/recreate any scopes when that changes.
+		// We ARE creating a proxy around the value though (in case its an object/array),
+		// so we'll have our own scope subscribe to changes on that.
+		const value: DatumType = optProxy((this.parent.target as any)[this.itemIndex]);
 
-/**
- * A special Node observer index to subscribe to any value in the map changing.
- */
-const ANY_INDEX = {}
+		// Since makeSortKey may get() the Store, we'll need to set currentScope first.
+		let savedScope = currentScope;
+		currentScope = this;
+		
+		let sortKey : undefined | string | number;
+		try {
+			if (this.parent.makeSortKey) {
+				let rawSortKey = this.parent.makeSortKey(value, this.itemIndex);
+				if (rawSortKey != null) sortKey = rawSortKey instanceof Array ? rawSortKey.map(partToStr).join('') : rawSortKey;
+			} else {
+				sortKey = this.itemIndex;
+			}
+			if (typeof sortKey === 'number') sortKey = partToStr(sortKey);
+			
+			if (this.sortKey !== sortKey) {
+				// If the sortKey is changed, make sure `this` is removed from the
+				// set before setting the new sortKey to it.
+				this.parent.sortedSet.remove(this); // Very fast if `this` is not in the set
+				this.sortKey = sortKey;
+			}
 
+			// We're not adding `this` to the `sortedSet` (yet), as that may not be needed,
+			// in case no nodes are created. We'll do it just-in-time in `getPrecedingNode`.
 
-type DatumType = string | number | Function | boolean | null | undefined | ObsMap | ObsArray
+			if (sortKey != null) this.parent.renderer(value, this.itemIndex);
+		} catch(e) {
+			handleError(e, sortKey!=null);
+		}
 
+		currentScope = savedScope;
+	}
 
-/** @internal */
-export abstract class ObsCollection {
-	_observers: Map<any, Set<Observer>> = new Map()
+	getInsertAfterNode() {
+		if (this.sortKey == null) internalError(1);
+		// Due to the `this` being the first child for `this` hack, this will look
+		// for the preceding node as well, if we don't have nodes ourselves.
+		return findLastNodeInPrevSiblings(this.lastChild);
+	}
 
-	// toString(): string {
-	// 	return JSON.stringify(peek(() => this.getRecursive(3)))
-	// }
+	remove() {
+		// We can't use getLastNode here, as we've hacked it to return the preceding
+		// node instead.
+		if (this.sortKey !== undefined) {
+			const lastNode = this.getActualLastNode();
+			if (lastNode) removeNodes(lastNode, this.getPrecedingNode());
 
-	_addObserver(index: any, observer: Observer) {
-	   observer = observer
-	   let obsSet = this._observers.get(index)
-	   if (obsSet) {
-		   if (obsSet.has(observer)) return false
-		   obsSet.add(observer)
-	   } else {
-		   this._observers.set(index, new Set([observer]))
-	   }
-	   return true
-   }
-
-   _removeObserver(index: any, observer: Observer) {
-	   let obsSet = <Set<Observer>>this._observers.get(index)
-	   obsSet.delete(observer)
-   }
-
-   emitChange(index: any, newData: DatumType, oldData: DatumType) {
-		let obsSet = this._observers.get(index)
-		if (obsSet) obsSet.forEach(observer => observer._onChange(index, newData, oldData))
-		obsSet = this._observers.get(ANY_INDEX)
-		if (obsSet) obsSet.forEach(observer => observer._onChange(index, newData, oldData))
-   }
-
-   _clean(observer: Observer) {
-		this._removeObserver(ANY_INDEX, observer)
-	}
-
-	_setIndex(index: any, newValue: any, deleteMissing: boolean): void {
-		const curData = this.rawGet(index)
-
-		if (!(curData instanceof ObsCollection) || newValue instanceof Store || !curData._merge(newValue, deleteMissing)) {
-			let newData = valueToData(newValue)
-			if (newData !== curData) {
-				this.rawSet(index, newData)
-				this.emitChange(index, newData, curData)
-			}
+			this.parent.sortedSet.remove(this);
+			this.sortKey = undefined;
 		}
+
+		this.delete();
 	}
+}
 
-	abstract rawGet(index: any): DatumType
-	abstract rawSet(index: any, data: DatumType): void
-	abstract _merge(newValue: any, deleteMissing: boolean): void
-	abstract _getType(): string
-	abstract _getRecursive(depth: number): object | Set<any> | Array<any>
-	abstract _iterateIndexes(scope: OnEachScope): void
-	abstract _normalizeIndex(index: any): any
-	abstract _getCount(): number
+function addNode(node: Node) {
+	const parentEl = currentScope.parentElement;
+	const prevNode = currentScope.getInsertAfterNode();
+	parentEl.insertBefore(node, prevNode ? prevNode.nextSibling : parentEl.firstChild);
+	currentScope.lastChild = node;
 }
 
-/** @internal */
-class ObsArray extends ObsCollection {
-	_data: Array<DatumType> = []
 
-	_getType() {
-		return "array"
-	}
+/**
+* This global is set during the execution of a `Scope.render`. It is used by
+* functions like `$` and `clean`.
+*/
+const ROOT_SCOPE = new RootScope();
+let currentScope: ContentScope = ROOT_SCOPE;
 
-	_getRecursive(depth: number) {
-		if (currentScope) {
-			if (this._addObserver(ANY_INDEX, currentScope)) {
-				currentScope._cleaners.push(this)
-			}
-		}
-		let result: any[] = []
-		for(let i=0; i<this._data.length; i++) {
-			let v = this._data[i]
-			result.push(v instanceof ObsCollection ? (depth ? v._getRecursive(depth-1) : new Store(this,i)) : v)
-		}
-		return result
-	}
+/**
+* A special Node observer index to subscribe to any value in the map changing.
+*/
+const ANY_SYMBOL = Symbol('any');
 
-	rawGet(index: any): DatumType {
-		return this._data[index]
-	}
+/**
+ * When our proxy objects need to lookup `obj[TARGET_SYMBOL]` it returns its
+ * target, to be used in our wrapped methods.
+ */
+const TARGET_SYMBOL = Symbol('target');
 
-	rawSet(index: any, newData: DatumType): void {
-		if (index !== (0|index) || index<0 || index>999999) {
-			throw new Error(`Invalid array index ${JSON.stringify(index)}`)
-		}
-		this._data[index] = newData
-		// Remove trailing `undefined`s
-		while(this._data.length>0 && this._data[this._data.length-1]===undefined) {
-			this._data.pop()
-		}
-	}
 
-	_merge(newValue: any, deleteMissing: boolean): boolean {
-		if (!(newValue instanceof Array)) {
-			return false
-		}
-		// newValue is an array
+const subscribers = new WeakMap<TargetType, Map<any, Set<Scope | ((index: any, newData: DatumType, oldData: DatumType) => void)>>>;
+let peeking = 0; // When > 0, we're not subscribing to any changes
 
-		for(let i=0; i<newValue.length; i++) {
-			this._setIndex(i, newValue[i], deleteMissing)
-		}
+function subscribe(target: any, index: symbol|string|number, observer: Scope | ((index: any, newData: DatumType, oldData: DatumType) => void) = currentScope) {
+	if (observer === ROOT_SCOPE || peeking) return;
 
-		// Overwriting just the first elements of an array and leaving the rest of
-		// the old data in place is just weird and unexpected, so we'll always use
-		// 'replace' behavior for arrays.
-		if (/*deleteMissing &&*/ this._data.length > newValue.length) {
-			for(let i=newValue.length; i<this._data.length; i++) {
-				let old = this._data[i]
-				if (old!==undefined) {
-					this.emitChange(i, undefined, old)
-				}
-			}
-			this._data.length = newValue.length
-		}
-		return true
-	}
+	let byTarget = subscribers.get(target);
+	if (!byTarget) subscribers.set(target, byTarget = new Map());
 
+	// No need to subscribe to specific keys if we're already subscribed to ANY
+	if (index !== ANY_SYMBOL && byTarget.get(ANY_SYMBOL)?.has(observer)) return;
 
-	_iterateIndexes(scope: OnEachScope): void {
-		for(let i=0; i<this._data.length; i++) {
-			if (this._data[i]!==undefined) {
-				scope._addChild(i)
-			}	
-		}
-	}
+	let byIndex = byTarget.get(index);
+	if (!byIndex) byTarget.set(index, byIndex = new Set());
 
-	_normalizeIndex(index: any): any {
-		if (typeof index==='number') return index
-		if (typeof index==='string') {
-			// Convert to int
-			let num = 0 | <number><unknown>index
-			// Check if the number is still the same after conversion
-			if (index.length && num==<unknown>index) return index
-		}
-		throw new Error(`Invalid array index ${JSON.stringify(index)}`)
-	}
+	if (byIndex.has(observer)) return;
 
-	_getCount() {
-		return this._data.length
+	byIndex.add(observer);
+	
+	if (observer === currentScope) {
+		currentScope.cleaners.push(byIndex);
+	} else {
+		currentScope.cleaners.push(function() {
+			byIndex.delete(observer);
+		});
 	}
 }
 
-/** @internal */
-class ObsMap extends ObsCollection {
-	data: Map<any, DatumType> = new Map()
-
-	_getType() {
-		return "map"
-	}
+export function onEach<T>(target: Array<undefined|T>, render: (value: T, index: number) => void, makeKey?: (value: T, key: any) => SortKeyType): void;
+export function onEach<K extends string|number|symbol,T>(target: Record<K,undefined|T>, render: (value: T, index: K) => void, makeKey?: (value: T, key: K) => SortKeyType): void;
 
-	_getRecursive(depth: number) {
-		if (currentScope) {
-			if (this._addObserver(ANY_INDEX, currentScope)) {
-				currentScope._cleaners.push(this)
-			}
-		}
-		let result: Map<any,any> = new Map()
-		this.data.forEach((v: any, k: any) => {
-			result.set(k, (v instanceof ObsCollection) ? (depth ? v._getRecursive(depth-1) : new Store(this, k)) : v)
-		})
-		return result
-	}
-
-	rawGet(index: any): DatumType {
-		return this.data.get(index)
-	}
-
-	rawSet(index: any, newData: DatumType): void {
-		if (newData===undefined) {
-			this.data.delete(index)
-		} else {
-			this.data.set(index, newData)
-		}
-	}
-
-	_merge(newValue: any, deleteMissing: boolean): boolean {
-		if (!(newValue instanceof Map)) {
-			return false
-		}
+/**
+ * Reactively iterates over the items of an observable array or object, optionally rendering content for each item.
+ * 
+ * Automatically updates when items are added, removed, or modified.
+ *
+ * @param target The observable array or object to iterate over. Values that are `undefined` are skipped.
+ * @param render A function called for each item in the array. It receives the item's (observable) value and its index/key. Any DOM elements created within this function will be associated with the item, placed at the right spot in the DOM, and cleaned up when redrawing/removing the item.
+ * @param makeKey An optional function to generate a sort key for each item. This controls the order in which items are rendered in the DOM. If omitted, items are rendered in array index order. The returned key can be a number, string, or an array of numbers/strings for composite sorting. Use {@link invertString} on string keys for descending order. Returning `null` or `undefined` from `makeKey` will prevent the item from being rendered.
+ *
+ * @example Iterating an array
+ * ```typescript
+ * const items = proxy(['apple', 'banana', 'cherry']);
+ *
+ * // Basic iteration
+ * onEach(items, (item, index) => $(`li:${item} (#${index})`));
+ *
+ * // Add a new item - the list updates automatically
+ * setTimeout(() => items.push('durian'), 2000);
+ * // Same for updates and deletes
+ * setTimeout(() => items[1] = 'berry', 4000);
+ * setTimeout(() => delete items[2], 6000);
+ * ```
+ *
+ * @example Iterating an array with custom ordering
+ * ```typescript
+ * const users = proxy([
+ *     { id: 3, group: 1, name: 'Charlie' },
+ *     { id: 1, group: 1, name: 'Alice' },
+ *     { id: 2, group: 2, name: 'Bob' },
+ * ]);
+ *
+ * // Sort by name alphabetically
+ * onEach(users, (user) => {
+ *     $(`p:${user.name} (id=${user.id})`);
+ * }, (user) => [user.group, user.name]); // Sort by group, and within each group sort by name
+ * ```
+ * 
+ *  @example Iterating an object
+ * ```javascript
+ * const config = proxy({ theme: 'dark', fontSize: 14, showTips: true });
+ *
+ * // Display configuration options
+ * $('dl', () => {
+ *     onEach(config, (value, key) => {
+ *         if (key === 'showTips') return; // Don't render this one
+ *         $('dt:'+key);
+ *         $('dd:'+value);
+ *     });
+ * });
+ *
+ * // Change a value - the display updates automatically
+ * setTimeout(() => config.fontSize = 16, 2000);
+ * ```
+ * @see {@link invertString} To easily create keys for reverse sorting.
+ */
+export function onEach(target: TargetType, render: (value: DatumType, index: any) => void, makeKey?: (value: DatumType, key: any) => SortKeyType): void {
+	if (!target || typeof target !== 'object') throw new Error('onEach requires an object');
+	target = (target as any)[TARGET_SYMBOL] || target;
 
-		// Walk the pairs of the new value map
-		newValue.forEach((v: any, k: any) => {
-			this._setIndex(k, v, deleteMissing)
-		})
+	new OnEachScope(target, render, makeKey);
+}
 
-		if (deleteMissing) {
-			this.data.forEach((v: DatumType, k: any) => {
-				if (!newValue.has(k)) this._setIndex(k, undefined, false)
-			})
-		}
-		return true
-	}
+function isObjEmpty(obj: object): boolean {
+	for(let k in obj) return false;
+	return true;
+}
 
-	_iterateIndexes(scope: OnEachScope): void {
-		this.data.forEach((_, itemIndex) => {
-			scope._addChild(itemIndex)
-		})
+/**
+ * Reactively checks if an observable array or object is empty.
+ *
+ * This function not only returns the current emptiness state but also establishes
+ * a reactive dependency. If the emptiness state of the `proxied` object or array
+ * changes later (e.g., an item is added to an empty array, or the last property
+ * is deleted from an object), the scope that called `isEmpty` will be automatically
+ * scheduled for re-evaluation.
+ *
+ * @param proxied The observable array or object (obtained via `observe()`) to check.
+ * @returns `true` if the array has length 0 or the object has no own enumerable properties, `false` otherwise.
+ *
+ * @example
+ * ```typescript
+ * const items = proxy([]);
+ *
+ * // Reactively display a message if the items array is empty
+ * $('div', () => {
+ *     if (isEmpty(items)) {
+ *         $('p', 'i:No items yet!');
+ *     } else {
+ * 		   onEach(items, item=>$('p:'+item));
+ *     }
+ * });
+ *
+ * // Adding an item will automatically remove the "No items yet!" message
+ * setInterval(() => {
+ *   if (!items.length || Math.random()>0.5) items.push('Item');
+ *   else items.length = 0;
+ * }, 1000)
+ * ```
+ */
+export function isEmpty(proxied: TargetType): boolean {
+	const target = (proxied as any)[TARGET_SYMBOL] || proxied;
+	const scope = currentScope;
+
+	if (target instanceof Array) {
+		subscribe(target, 'length', function(index: any, newData: DatumType, oldData: DatumType) {
+			if (!newData !== !oldData) queue(scope);
+		});
+		return !target.length;
+	} else {
+		const result = isObjEmpty(target);
+		subscribe(target, ANY_SYMBOL, function(index: any, newData: DatumType, oldData: DatumType) {
+			if (result ? oldData===undefined : newData===undefined) queue(scope);
+		});
+		return result;
 	}
+}
 
-	_normalizeIndex(index: any): any {
-		return index
-	}
+/** @private */
+export interface ValueRef<T> {
+	value: T;
+}
 
-	_getCount() {
-		return this.data.size
-	}
- }
+/**
+ * Reactively counts the number of properties in an objects.
+ *
+ * @param proxied The observable object to count. In case an `array` is passed in, a {@link ref} to its `.length` will be returned.
+ * @returns an observable object for which the `value` property reflects the number of properties in `proxied` with a value other than `undefined`.
+ * 
+ * @example
+ * ```typescript
+ * const items = proxy({x: 3, y: 7} as any);
+ * const cnt = count(items);
+ *
+ * // Create a DOM text node for the count:
+ * $('div', {text: cnt});
+ * // <div>2</div>
+
+ * // Or we can use it in an {@link observe} function:
+ * observe(() => console.log("The count is now", cnt.value));
+ * // The count is now 2
+ * 
+ * // Adding/removing items will update the count
+ * items.z = 12;
+ * // Asynchronously, after 0ms:
+ * // <div>3</div>
+ * // The count is now 3
+ * ```
+ */
+export function count(proxied: TargetType): ValueRef<number> {
+	if (proxied instanceof Array) return ref(proxied, 'length');
 
- /** @internal */
- class ObsObject extends ObsMap {
-	_getType() {
-		return "object"
-	}
+	const target = (proxied as any)[TARGET_SYMBOL] || proxied;
+	let cnt = 0;
+	for(let k in target) if (target[k] !== undefined) cnt++;
+	
+	const result = proxy(cnt);
+	subscribe(target, ANY_SYMBOL, function(index: any, newData: DatumType, oldData: DatumType) {
+		if (oldData===newData) {}
+		else if (oldData===undefined) result.value = ++cnt;
+		else if (newData===undefined) result.value = --cnt;
+	});
+
+	return result;
+}
 
-	_getRecursive(depth: number) {
-		if (currentScope) {
-			if (this._addObserver(ANY_INDEX, currentScope)) {
-				currentScope._cleaners.push(this)
+/** @internal */
+export function defaultEmitHandler(target: TargetType, index: string|symbol|number, newData: DatumType, oldData: DatumType) {
+	// We're triggering for values changing from undefined to undefined, as this *may*
+	// indicate a change from or to `[empty]` (such as `[,1][0]`).
+	if (newData === oldData && newData !== undefined) return;
+	
+	const byTarget = subscribers.get(target);
+	if (byTarget===undefined) return;
+
+	for(const what of [index, ANY_SYMBOL]) {
+		let byIndex = byTarget.get(what);
+		if (byIndex) {
+			for(let observer of byIndex) {
+				if (typeof observer === 'function') observer(index, newData, oldData);
+				else observer.onChange(index, newData, oldData)	
 			}
 		}
-		let result: any = {}
-		this.data.forEach((v: any, k: any) => {
-			result[k] = (v instanceof ObsCollection) ? (depth ? v._getRecursive(depth-1) : new Store(this,k)) : v
-		})
-		return result
 	}
-
-	_merge(newValue: any, deleteMissing: boolean): boolean {
-		if (!newValue || newValue.constructor !== Object) {
-			return false
+}
+let emit = defaultEmitHandler;
+
+
+const objectHandler: ProxyHandler<any> = {
+	get(target: any, prop: any) {
+		if (prop===TARGET_SYMBOL) return target;
+		subscribe(target, prop);
+		return optProxy(target[prop]);
+	},
+	set(target: any, prop: any, newData: any) {
+		// Make sure newData is unproxied
+		if (typeof newData === 'object' && newData) newData = (newData as any)[TARGET_SYMBOL] || newData;
+		const oldData = target[prop];
+		if (newData !== oldData) {
+			target[prop] = newData;
+			emit(target, prop, newData, oldData);
+			runImmediateQueue();
 		}
+		return true;
+	},
+	deleteProperty(target: any, prop: any) {
+		const old = target[prop];
+		delete target[prop];
+		emit(target, prop, undefined, old);
+		runImmediateQueue();
+		return true;
+	},
+	has(target: any, prop: any) {
+		const result = prop in target;
+		subscribe(target, prop);
+		return result;
+	},
+	ownKeys(target: any) {
+		subscribe(target, ANY_SYMBOL);
+		return Reflect.ownKeys(target);
+	}
+};
+
+function arraySet(target: any, prop: any, newData: any) {
+	// Make sure newData is unproxied
+	if (typeof newData === 'object' && newData) newData = (newData as any)[TARGET_SYMBOL] || newData;
+	const oldData = target[prop];
+	if (newData !== oldData) {
+		let oldLength = target.length;
+				
+		if (prop === 'length') {
+			target.length = newData;
 
-		// Walk the pairs of the new value object
-		for(let k in newValue) {
-			this._setIndex(k, newValue[k], deleteMissing)
-		}
+			// We only need to emit for shrinking, as growing just adds undefineds
+			for(let i=newData; i<oldLength; i++) {
+				emit(target, i, undefined, target[i]);
+			}
+		} else {
+			const intProp = parseInt(prop)
+			if (intProp.toString() === prop) prop = intProp;
 
-		if (deleteMissing) {
-			this.data.forEach((v: DatumType, k: any) => {
-				if (!newValue.hasOwnProperty(k)) this._setIndex(k, undefined, false)
-			})
+			target[prop] = newData;
+			emit(target, prop, newData, oldData);
 		}
-		
-		return true
-	}
-
-	_normalizeIndex(index: any): any {
-		let type = typeof index
-		if (type==='string') return index
-		if (type==='number') return ''+index
-		throw new Error(`Invalid object index ${JSON.stringify(index)}`)
+		if (target.length !== oldLength) {
+			emit(target, 'length', target.length, oldLength);
+		}
+		runImmediateQueue();
 	}
+	return true;
+}
 
-	_getCount() {
-		let cnt = 0
-		for(let key of this.data) cnt++
-		return cnt
-	}
- }
+const arrayHandler: ProxyHandler<any[]> = {
+	get(target: any, prop: any) {
+		if (prop===TARGET_SYMBOL) return target;
+		let subProp = prop;
+		if (typeof prop !== 'symbol') {
+			const intProp = parseInt(prop);
+			if (intProp.toString() === prop) subProp = intProp;
+		}
+		subscribe(target, subProp);
+		return optProxy(target[prop]);
+	},
+	set: arraySet,
+	deleteProperty(target: any, prop: string|symbol) {
+		return arraySet(target, prop, undefined);
+	},
+};
+
+const proxyMap = new WeakMap<TargetType, /*Proxy*/TargetType>();
+
+function optProxy(value: any): any {
+	// If value is a primitive type or already proxied, just return it
+	if (typeof value !== 'object' || !value || value[TARGET_SYMBOL] !== undefined) {
+		return value;
+	}
+	let proxied = proxyMap.get(value);
+	if (proxied) return proxied // Only one proxy per target!
+	
+	proxied = new Proxy(value, value instanceof Array ? arrayHandler : objectHandler);
+	proxyMap.set(value, proxied as TargetType);
+	return proxied;
+}
 
 
+export function proxy<T extends DatumType>(target: Array<T>): Array<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T>;
+export function proxy<T extends object>(target: T): T;
+export function proxy<T extends DatumType>(target: T): ValueRef<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T>;
 
 /**
- * A data store that automatically subscribes the current scope to updates
- * whenever data is read from it.
+ * Creates a reactive proxy around the given data.
+ *
+ * Reading properties from the returned proxy within a reactive scope (like one created by
+ * {@link $} or {@link observe}) establishes a subscription. Modifying properties *through*
+ * the proxy will notify subscribed scopes, causing them to re-execute.
+ *
+ * - Plain objects and arrays are wrapped in a standard JavaScript `Proxy` that intercepts
+ *   property access and mutations, but otherwise works like the underlying data.
+ * - Primitives (string, number, boolean, null, undefined) are wrapped in an object
+ *   `{ value: T }` which is then proxied. Access the primitive via the `.value` property.
+ *
+ * Use {@link unproxy} to get the original underlying data back.
+ *
+ * @param target - The object, array, or primitive value to make reactive.
+ * @returns A reactive proxy wrapping the target data.
+ * @template T - The type of the data being proxied.
+ *
+ * @example Object
+ * ```javascript
+ * const state = proxy({ count: 0, message: 'Hello' });
+ * observe(() => console.log(state.message)); // Subscribes to message
+ * setTimeout(() => state.message = 'World', 1000); // Triggers the observe function
+ * setTimeout(() => state.count++, 2000); // Triggers nothing
+ * ```
+ *
+ * @example Array
+ * ```javascript
+ * const items = proxy(['a', 'b']);
+ * observe(() => console.log(items.length)); // Subscribes to length
+ * setTimeout(() => items.push('c'), 2000); // Triggers the observe function
+ * ```
  *
- * Supported data types are: `string`, `number`, `boolean`, `undefined`, `null`,
- * `Array`, `object` and `Map`. The latter three will always have `Store` objects as
- * values, creating a tree of `Store`-objects.
+ * @example Primitive
+ * ```javascript
+ * const name = proxy('Aberdeen');
+ * observe(() => console.log(name.value)); // Subscribes to value
+ * setTimeout(() => name.value = 'UI', 2000); // Triggers the observe function
+ * ```
+ * 
+ * @example Class instance
+ * ```typescript
+ * class Widget {
+ *   constructor(public name: string, public width: number, public height: number) {}
+ *   grow() { this.width *= 2; }
+ *   toString() { return `${this.name}Widget (${this.width}x${this.height})`; }
+ * }
+ * let graph: Widget = proxy(new Widget('Graph', 200, 100));
+ * observe(() => console.log(''+graph));
+ * setTimeout(() => graph.grow(), 2000);
+ * setTimeout(() => graph.grow(), 4000);
+ * ```
  */
+export function proxy(target: TargetType): TargetType {
+    return optProxy(typeof target === 'object' && target !== null ? target : {value: target});
+}
 
-export class Store {
-	/** @internal */
-	private _collection: ObsCollection
-	/** @internal */
-	private _idx: any
-
-	/**
-	 * Create a new store with the given `value` as its value. Defaults to `undefined` if no value is given.
-	 * When the value is a plain JavaScript object, an `Array` or a `Map`, it will be stored as a tree of
-	 * `Store`s. (Calling {@link Store.get} on the store will recreate the original data strucure, though.)
-	 *
-	 * @example
-	 * ```
-	 * let emptyStore = new Store()
-	 * let numStore = new Store(42)
-	 * let objStore = new Store({x: {alice: 1, bob: 2}, y: [9,7,5,3,1]})
-	 * ```
-	*/
-	constructor()
-	constructor(value: any)
-	/** @internal */
-	constructor(collection: ObsCollection, index: any)
-
-	constructor(value: any = undefined, index: any = undefined) {
-		if (index===undefined) {
-			this._collection = new ObsArray()
-			this._idx = 0
-			if (value!==undefined) {
-				this._collection.rawSet(0, valueToData(value))
-			}
-		} else {
-			if (!(value instanceof ObsCollection)) {
-				throw new Error("1st parameter should be an ObsCollection if the 2nd is also given")
-			}
-			this._collection = value
-			this._idx = index
-		}
-	}
-
-	/**
-	 *
-	 * @returns The index for this Store within its parent collection. This will be a `number`
-	 * when the parent collection is an array, a `string` when it's an object, or any data type
-	 * when it's a `Map`.
-	 *
-	 * @example
-	 * ```
-	 * let store = new Store({x: 123})
-	 * let subStore = store.ref('x')
-	 * assert(subStore.get() === 123)
-	 * assert(subStore.index() === 'x') // <----
-	 * ```
-	 */
-	index() {
-		return this._idx
-	}
-
-	/** @internal */
-	_clean(scope: Scope) {
-		this._collection._removeObserver(this._idx, scope)
-	}
-
-
-	/**
-	 * @returns Resolves `path` and then retrieves the value that is there, subscribing
-	 * to all read `Store` values. If `path` does not exist, `undefined` is returned.
-	 * @param path - Any path terms to resolve before retrieving the value.
-	 * @example
-	 * ```
-	 * let store = new Store({a: {b: {c: {d: 42}}}})
-	 * assert('a' in store.get())
-	 * assert(store.get('a', 'b') === {c: {d: 42}})
-	 * ```
-	 */
-	get(...path: any[]) : any {
-		return this.query({path})
-	}
-
-	/**
-	 * Like {@link Store.get}, but doesn't subscribe to changes.
-	 */
-	peek(...path: any[]): any {
-		return this.query({path, peek: true})
-	}
+/**
+ * Returns the original, underlying data target from a reactive proxy created by {@link proxy}.
+ * If the input `target` is not a proxy, it is returned directly.
+ *
+ * This is useful when you want to avoid triggering subscriptions during read operations or
+ * re-executes during write operations. Using {@link peek} is an alternative way to achieve this.
+ *
+ * @param target - A proxied object, array, or any other value.
+ * @returns The underlying (unproxied) data, or the input value if it wasn't a proxy.
+ * @template T - The type of the target.
+ *
+ * @example
+ * ```typescript
+ * const userProxy = proxy({ name: 'Frank' });
+ * const rawUser = unproxy(userProxy);
+ *
+ * // Log reactively
+ * $(() => console.log('proxied', userProxy.name));
+ * // The following will only ever log once, as we're not subscribing to any observable
+ * $(() => console.log('unproxied', rawUser.name));
+ * 
+ * // This cause the first log to run again:
+ * setTimeout(() => userProxy.name += '!', 1000);
+ * 
+ * // This doesn't cause any new logs:
+ * setTimeout(() => rawUser.name += '?', 2000);
+ * 
+ * // Both userProxy and rawUser end up as `{name: 'Frank!?'}`
+ * setTimeout(() => console.log('final values', userProxy, rawUser), 3000);
+ * ```
+ */
+export function unproxy<T>(target: T): T {
+	return target ? (target as any)[TARGET_SYMBOL] || target : target;
+}
 
-	/**
-	 * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `number`.
-	 * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
-	 */
-	getNumber(...path: any[]): number { return <number>this.query({path, type: 'number'}) }
-	/**
-	 * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `string`.
-	 * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
-	 */
-	getString(...path: any[]): string { return <string>this.query({path, type: 'string'}) }
-	/**
-	 * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `boolean`.
-	 * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
-	 */
-	getBoolean(...path: any[]): boolean { return <boolean>this.query({path, type: 'boolean'}) }
-	/**
-	 * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `function`.
-	 * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
-	 */
-	getFunction(...path: any[]): (Function) { return <Function>this.query({path, type: 'function'}) }
-	/**
-	 * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `array`.
-	 * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
-	 */
-	getArray(...path: any[]): any[] { return <any[]>this.query({path, type: 'array'}) }
-	/**
-	 * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `object`.
-	 * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
-	 */
-	getObject(...path: any[]): object { return <object>this.query({path, type: 'object'}) }
-	/**
-	 * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `map`.
-	 * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
-	 */
-	getMap(...path: any[]): Map<any,any> { return <Map<any,any>>this.query({path, type: 'map'}) }
+let onDestroyMap: WeakMap<Node, string | Function | true> = new WeakMap();
 
-	/**
-	 * Like {@link Store.get}, but the first parameter is the default value (returned when the Store
-	 * contains `undefined`). This default value is also used to determine the expected type,
-	 * and to throw otherwise.
-	 *
-	 * @example
-	 * ```
-	 * let store = {x: 42}
-	 * assert(getOr(99, 'x') == 42)
-	 * assert(getOr(99, 'y') == 99)
-	 * getOr('hello', x') # throws TypeError (because 42 is not a string)
-	 * ```
-	 */
-	getOr<T>(defaultValue: T, ...path: any[]): T {
-		let type: string = typeof defaultValue
-		if (type==='object') {
-			if (defaultValue instanceof Map) type = 'map'
-			else if (defaultValue instanceof Array) type = 'array'
-		}
-		return this.query({type, defaultValue, path})
-	}
+function destroyWithClass(element: Element, cls: string) {
+	const classes = cls.split('.').filter(c=>c);
+	element.classList.add(...classes);
+	setTimeout(() => element.remove(), 2000);
+}
 
-	/** Retrieve a value, subscribing to all read `Store` values. This is a more flexible
-	 * form of the {@link Store.get} and {@link Store.peek} methods.
-	 *
-	 * @returns The resulting value, or `undefined` if the `path` does not exist.
-	 */
-	query(opts: {
-		/**  The value for this path should be retrieved. Defaults to `[]`, meaning the entire `Store`. */
-		path?: any[],
-		/** A string specifying what type the query is expected to return. Options are:
-		 *  "undefined", "null", "boolean", "number", "string", "function", "array", "map"
-		 *  and "object". If the store holds a different type of value, a `TypeError`
-		 *  exception is thrown. By default (when `type` is `undefined`) no type checking
-		 *  is done.
-		 */
-		type?: string,
-		/** Limit the depth of the retrieved data structure to this positive integer.
-		*  When `depth` is `1`, only a single level of the value at `path` is unpacked. This
-		*  makes no difference for primitive values (like strings), but for objects, maps and
-		*  arrays, it means that each *value* in the resulting data structure will be a
-		*  reference to the `Store` for that value.
-		*/
-		depth?: number,
-		/** Return this value when the `path` does not exist. Defaults to `undefined`. */
-		defaultValue?: any,
-		/** When peek is `undefined` or `false`, the current scope will automatically be
-		 * subscribed to changes of any parts of the store being read. When `true`, no
-		 * subscribers will be performed.
-		 */
-		peek?: boolean
-	}): any {
-		if (opts.peek && currentScope) {
-			let savedScope = currentScope
-			currentScope = undefined
-			let result = this.query(opts)
-			currentScope = savedScope
-			return result
-		}
-		let store = opts.path && opts.path.length ? this.ref(...opts.path) : this
-		let value = store._observe()
+/**
+ * Recursively copies properties or array items from `src` to `dst`.
+ * It's designed to work efficiently with reactive proxies created by {@link proxy}.
+ *
+ * - **Minimizes Updates:** When copying between objects/arrays (proxied or not), if a nested object
+ *   exists in `dst` with the same constructor as the corresponding object in `src`, `copy`
+ *   will recursively copy properties into the existing `dst` object instead of replacing it.
+ *   This minimizes change notifications for reactive updates.
+ * - **Handles Proxies:** Can accept proxied or unproxied objects/arrays for both `dst` and `src`.
+ *
+ * @param dst - The destination object/array (proxied or unproxied).
+ * @param src - The source object/array (proxied or unproxied). It won't be modified.
+ * @param flags - Bitmask controlling copy behavior:
+ *   - {@link MERGE}: Performs a partial update. Properties in `dst` not present in `src` are kept.
+ *     `null`/`undefined` in `src` delete properties in `dst`. Handles partial array updates via object keys.
+ *   - {@link SHALLOW}: Performs a shallow copy; when an array/object of the right type doesn't exist in `dst` yet, a reference to the array/object in `src` will be made, instead of creating a copy. If the array/object already exists, it won't be replaced (by a reference), but all items will be individually checked and copied like normal, keeping changes (and therefore UI updates) to a minimum.
+ * @template T - The type of the objects being copied.
+ * @throws Error if attempting to copy an array into a non-array or vice versa (unless {@link MERGE} is set, allowing for sparse array updates).
+ *
+ * @example Basic Copy
+ * ```typescript
+ * const source = proxy({ a: 1, b: { c: 2 } });
+ * const dest = proxy({ b: { d: 3 } });
+ * copy(dest, source);
+ * console.log(dest); // proxy({ a: 1, b: { c: 2 } })
+ * ```
+ *
+ * @example MERGE
+ * ```typescript
+ * const source = { b: { c: 99 }, d: undefined }; // d: undefined will delete
+ * const dest = proxy({ a: 1, b: { x: 5 }, d: 4 });
+ * copy(dest, source, MERGE);
+ * console.log(dest); // proxy({ a: 1, b: { c: 99, x: 5 } })
+ * ```
+ *
+ * @example Partial Array Update with MERGE
+ * ```typescript
+ * const messages = proxy(['msg1', 'msg2', 'msg3']);
+ * const update = { 1: 'updated msg2' }; // Update using object key as index
+ * copy(messages, update, MERGE);
+ * console.log(messages); // proxy(['msg1', 'updated msg2', 'msg3'])
+ * ```
+ *
+ * @example SHALLOW
+ * ```typescript
+ * const source = { nested: [1, 2] };
+ * const dest = {};
+ * copy(dest, source, SHALLOW);
+ * dest.nested.push(3);
+ * console.log(source.nested); // [1, 2, 3] (source was modified)
+ * ```
+ */
+export function copy<T extends object>(dst: T, src: T, flags: number = 0) {
+	copyRecurse(dst, src, flags);
+	runImmediateQueue();
+}
+/** Flag to {@link copy} causing it to use merge semantics. See {@link copy} for details. */
+export const MERGE = 1;
+/** Flag to {@link copy} and {@link clone} causing them to create a shallow copy (instead of the deep copy done by default).*/
+export const SHALLOW = 2;
+const COPY_SUBSCRIBE = 32;
+const COPY_EMIT = 64;
 
-		if (opts.type && (value!==undefined || opts.defaultValue===undefined)) {
-			let type = (value instanceof ObsCollection) ? value._getType() : (value===null ? "null" : typeof value)
-			if (type !== opts.type) throw new TypeError(`Expecting ${opts.type} but got ${type}`)
-		}
-		if (value instanceof ObsCollection) {
-			return value._getRecursive(opts.depth==null ? -1 : opts.depth-1)
-		}
-		return value===undefined ? opts.defaultValue : value
-	}
+/**
+ * Clone an (optionally proxied) object or array.
+ * 
+ * @param src The object or array to clone. If it is proxied, `clone` will subscribe to any changes to the (nested) data structure.
+ * @param flags 
+ *   - {@link SHALLOW}: Performs a shallow clone, meaning that only the top-level array or object will be copied, while object/array values will just be references to the original data in `src`.
+ * @template T - The type of the objects being copied.
+ * @returns A new unproxied array or object (of the same type as `src`), containing a deep (by default) copy of `src`.
+ */
+export function clone<T extends object>(src: T, flags: number = 0): T {
+	const dst = Object.create(Object.getPrototypeOf(src)) as T;
+	copyRecurse(dst, src, flags);
+	return dst;
+}
 
-	/**
-	 * Checks if the specified collection is empty, and subscribes the current scope to changes of the emptiness of this collection.
-	 *
-	 * @param path Any path terms to resolve before retrieving the value.
-	 * @returns When the specified collection is not empty `true` is returned. If it is empty or if the value is undefined, `false` is returned.
-	 * @throws When the value is not a collection and not undefined, an Error will be thrown.
-	 */
-	isEmpty(...path: any[]): boolean {
-		let store = this.ref(...path)
-		
-		let value = store._observe()
-		if (value instanceof ObsCollection) {
-			if (currentScope) {
-				let observer = new IsEmptyObserver(currentScope, value, false)
-				return !observer.count
+function copyRecurse(dst: any, src: any, flags: number) {
+	// We never want to subscribe to reads we do to the target (to find changes). So we'll
+	// take the unproxied version and `emit` updates ourselve.
+	let unproxied = dst[TARGET_SYMBOL];
+	if (unproxied) {
+		dst = unproxied;
+		flags |= COPY_EMIT;
+	}
+	// For performance, we'll work on the unproxied `src` and manually subscribe to changes.
+	unproxied = src[TARGET_SYMBOL];
+	if (unproxied) {
+		src = unproxied;
+		// If we're not in peek mode, we'll manually subscribe to all source reads.
+		if (currentScope !== ROOT_SCOPE && !peeking) flags |= COPY_SUBSCRIBE;
+	}
+
+	if (flags&COPY_SUBSCRIBE) subscribe(src, ANY_SYMBOL);
+    if (src instanceof Array) {
+        if (!(dst instanceof Array)) throw new Error("Cannot copy array into object");
+		const dstLen = dst.length;
+		const srcLen = src.length;
+        for(let i=0; i<srcLen; i++) {
+            copyValue(dst, src, i, flags)
+        }
+		// Leaving additional values in the old array doesn't make sense
+		if (srcLen !== dstLen) {
+			if (flags&COPY_EMIT) {
+				for(let i=srcLen; i<dstLen; i++) {
+					const old = dst[i];
+					dst[i] = undefined;
+					emit(dst, i, undefined, old);
+				}
+				dst.length = srcLen;
+				emit(dst, 'length', srcLen, dstLen);
 			} else {
-				return !value._getCount()
+				dst.length = srcLen;
 			}
-		} else if (value===undefined) {
-			return true
-		} else {
-			throw new Error(`isEmpty() expects a collection or undefined, but got ${JSON.stringify(value)}`)
 		}
-	}
-
-	/**
-	 * Returns the number of items in the specified collection, and subscribes the current scope to changes in this count.
-	 *
-	 * @param path Any path terms to resolve before retrieving the value.
-	 * @returns The number of items contained in the collection, or 0 if the value is undefined.
-	 * @throws When the value is not a collection and not undefined, an Error will be thrown.
-	 */
-	count(...path: any[]): number {
-		let store = this.ref(...path)
-		
-		let value = store._observe()
-		if (value instanceof ObsCollection) {
-			if (currentScope) {
-				let observer = new IsEmptyObserver(currentScope, value, true)
-				return observer.count
-			} else {
-				return value._getCount()
+    } else {
+        for(let k in src) {
+            copyValue(dst, src, k, flags);
+        }
+		if (!(flags & MERGE)) {
+			for(let k in dst) {
+				if (!(k in src)) {
+					const old = dst[k];
+					delete dst[k];
+					if (flags&COPY_EMIT && old !== undefined) {
+						emit(dst, k, undefined, old);
+					}
+				}
 			}
-		} else if (value===undefined) {
-			return 0
-		} else {
-			throw new Error(`count() expects a collection or undefined, but got ${JSON.stringify(value)}`)
 		}
-	}
-
-	/**
-	 * Returns a strings describing the type of the store value, subscribing to changes of this type.
-	 * Note: this currently also subscribes to changes of primitive values, so changing a value from 3 to 4
-	 * would cause the scope to be rerun. This is not great, and may change in the future. This caveat does
-	 * not apply to changes made *inside* an object, `Array` or `Map`.
-	 *
-	 * @param path Any path terms to resolve before retrieving the value.
-	 * @returns Possible options: "undefined", "null", "boolean", "number", "string", "function", "array", "map" or "object".
-	 */
-	getType(...path: any[]): string {
-		let store = this.ref(...path)
-		let value = store._observe()
-		return (value instanceof ObsCollection) ? value._getType() : (value===null ? "null" : typeof value)
-	}
-
-	/**
-	 * Sets the value to the last given argument. Any earlier argument are a Store-path that is first
-	 * resolved/created using {@link Store.makeRef}.
-	 *
-	 * When a `Store` is passed in as the value, its value will be copied (subscribing to changes). In
-	 * case the value is an object, an `Array` or a `Map`, a *reference* to that data structure will
-	 * be created, so that changes made through one `Store` will be reflected through the other. Be
-	 * carefull not to create loops in your `Store` tree that way, as that would cause any future
-	 * call to {@link Store.get} to throw a `RangeError` (Maximum call stack size exceeded.)
-	 *
-	 * If you intent to make a copy instead of a reference, call {@link Store.get} on the origin `Store`.
-	 *
-	 *
-	 * @example
-	 * ```
-	 * let store = new Store() // Value is `undefined`
-	 *
-	 * store.set('x', 6) // Causes the store to become an object
-	 * assert(store.get() == {x: 6})
-	 *
-	 * store.set('a', 'b', 'c', 'd') // Create parent path as objects
-	 * assert(store.get() == {x: 6, a: {b: {c: 'd'}}})
-	 *
-	 * store.set(42) // Overwrites all of the above
-	 * assert(store.get() == 42)
-	 *
-	 * store.set('x', 6) // Throw Error (42 is not a collection)
-	 * ```
-	 */
-	set(...pathAndValue: any[]): void {
-		let newValue = pathAndValue.pop()
-		let store = this.makeRef(...pathAndValue)
-		store._collection._setIndex(store._idx, newValue, true)
-		runImmediateQueue()
-	}
-
-	/**
-	 * Sets the `Store` to the given `mergeValue`, but without deleting any pre-existing
-	 * items when a collection overwrites a similarly typed collection. This results in
-	 * a deep merge.
-	 *
-	 * @example
-	 * ```
-	 * let store = new Store({a: {x: 1}})
-	 * store.merge({a: {y: 2}, b: 3})
-	 * assert(store.get() == {a: {x: 1, y: 2}, b: 3})
-	 * ```
-	 */
-	merge(...pathAndValue: any): void {
-		let mergeValue = pathAndValue.pop()
-		let store = this.makeRef(...pathAndValue)
-		store._collection._setIndex(store._idx, mergeValue, false)
-		runImmediateQueue()
-	}
-
-	/**
-	 * Sets the value for the store to `undefined`, which causes it to be omitted from the map (or array, if it's at the end)
-	 *
-	 * @example
-	 * ```
-	 * let store = new Store({a: 1, b: 2})
-	 * store.delete('a')
-	 * assert(store.get() == {b: 2})
-	 *
-	 * store = new Store(['a','b','c'])
-	 * store.delete(1)
-	 * assert(store.get() == ['a', undefined, 'c'])
-	 * store.delete(2)
-	 * assert(store.get() == ['a'])
-	 * ```
-	 */
-	delete(...path: any) {
-		let store = this.makeRef(...path)
-		store._collection._setIndex(store._idx, undefined, true)
-		runImmediateQueue()
-	}
+    }
+}
 
-	/**
-	 * Pushes a value to the end of the Array that is at the specified path in the store.
-	 * If that store path is `undefined`, an Array is created first.
-	 * The last argument is the value to be added, any earlier arguments indicate the path.
-	 *
-	 * @example
-	 * ```
-	 * let store = new Store()
-	 * store.push(3) // Creates the array
-	 * store.push(6)
-	 * assert(store.get() == [3,6])
-	 *
-	 * store = new Store({myArray: [1,2]})
-	 * store.push('myArray', 3)
-	 * assert(store.get() == {myArray: [1,2,3]})
-	 * ```
-	 */
-	push(...pathAndValue: any[]): number {
-		let newValue = pathAndValue.pop()
-		let store = this.makeRef(...pathAndValue)
-
-		let obsArray = store._collection.rawGet(store._idx)
-		if (obsArray===undefined) {
-			obsArray = new ObsArray()
-			store._collection._setIndex(store._idx, obsArray, true)
-		} else if (!(obsArray instanceof ObsArray)) {
-			throw new Error(`push() is only allowed for an array or undefined (which would become an array)`)
+function copyValue(dst: any, src: any, index: any, flags: number) {
+	let dstValue = dst[index];
+    let srcValue = src[index];
+	if (srcValue !== dstValue) {
+		if (srcValue && dstValue && typeof srcValue === 'object' && typeof dstValue === 'object' && (srcValue.constructor === dstValue.constructor || (flags&MERGE && dstValue instanceof Array))) {
+			copyRecurse(dstValue, srcValue, flags);
+			return;
 		}
-
-		let newData = valueToData(newValue)
-		let pos = obsArray._data.length
-		obsArray._data.push(newData)
-		obsArray.emitChange(pos, newData, undefined)
-		runImmediateQueue()
-		return pos
-	}
-
-	/**
-	 * {@link Store.peek} the current value, pass it through `func`, and {@link Store.set} the resulting
-	 * value.
-	 * @param func The function transforming the value.
-	 */
-	modify(func: (value: any) => any): void {
-		this.set(func(this.query({peek: true})))
-	}
-
-	/**
-	 * Return a `Store` deeper within the tree by resolving the given `path`,
-	 * subscribing to every level.
-	 * In case `undefined` is encountered while resolving the path, a newly
-	 * created `Store` containing `undefined` is returned. In that case, the
-	 * `Store`'s {@link Store.isDetached} method will return `true`.
-	 * In case something other than a collection is encountered, an error is thrown.
-	 */
-	ref(...path: any[]): Store {
-		let store: Store = this
-
-		for(let i=0; i<path.length; i++) {
-			let value = store._observe()
-			if (value instanceof ObsCollection) {
-				store = new Store(value, value._normalizeIndex(path[i]))
-			} else {
-				if (value!==undefined) throw new Error(`Value ${JSON.stringify(value)} is not a collection (nor undefined) in step ${i} of $(${JSON.stringify(path)})`)
-				return new DetachedStore()
-			}
+		
+		if (!(flags&SHALLOW) && srcValue && typeof srcValue === 'object') {
+			// Create an empty object of the same type
+			let copy = Object.create(Object.getPrototypeOf(srcValue));
+			// Copy all properties to it. This doesn't need to emit anything
+			// and MERGE does not apply as this is a new branch.
+			copyRecurse(copy, srcValue, 0);
+			srcValue = copy;
 		}
-
-		return store
+		const old = dst[index];
+		if (flags&MERGE && srcValue == null) delete dst[index];
+		else dst[index] = srcValue;
+		if (flags&COPY_EMIT) emit(dst, index, srcValue, old)
 	}
+}
 
-	/**
-	 * Similar to `ref()`, but instead of returning `undefined`, new objects are created when
-	 * a path does not exist yet. An error is still thrown when the path tries to index an invalid
-	 * type.
-	 * Unlike `ref`, `makeRef` does *not* subscribe to the path levels, as it is intended to be
-	 * a write-only operation.
-	 *
-	 * @example
-	 * ```
-	 * let store = new Store() // Value is `undefined`
-	 *
-	 * let ref = store.makeRef('a', 'b', 'c')
-	 * assert(store.get() == {a: {b: {}}}
-	 *
-	 * ref.set(42)
-	 * assert(store.get() == {a: {b: {c: 42}}}
-	 *
-	 * ref.makeRef('d') // Throw Error (42 is not a collection)
-	 * ```
-	 */
-	makeRef(...path: any[]): Store {
-		let store: Store = this
-
-		for(let i=0; i<path.length; i++) {
-			let value = store._collection.rawGet(store._idx)
-			if (!(value instanceof ObsCollection)) {
-				if (value!==undefined) throw new Error(`Value ${JSON.stringify(value)} is not a collection (nor undefined) in step ${i} of $(${JSON.stringify(path)})`)
-				value = new ObsObject()
-				store._collection.rawSet(store._idx, value)
-				store._collection.emitChange(store._idx, value, undefined)
-			}
-			store = new Store(value, value._normalizeIndex(path[i]))
-		}
-		runImmediateQueue()
-		return store	
-	}
 
-	/** @internal */
-	_observe() {
-		if (currentScope) {
-			if (this._collection._addObserver(this._idx, currentScope)) {
-				currentScope._cleaners.push(this)
-			}
+interface RefTarget {
+	proxy: TargetType
+	index: any
+}
+const refHandler: ProxyHandler<RefTarget> = {
+	get(target: RefTarget, prop: any) {
+		if (prop===TARGET_SYMBOL) {
+			// Create a ref to the unproxied version of the target
+			return ref(unproxy(target.proxy), target.index);
 		}
-		return this._collection.rawGet(this._idx)
-	}
-
-	/**
-	 * Iterate the specified collection (Array, Map or object), running the given code block for each item.
-	 * When items are added to the collection at some later point, the code block will be ran for them as well.
-	 * When an item is removed, the {@link Store.clean} handlers left by its code block are executed.
-	 *
-	 *
-	 *
-	 * @param pathAndFuncs
-	 */
-	onEach(...pathAndFuncs: any): void {
-		let makeSortKey = defaultMakeSortKey
-		let renderer = pathAndFuncs.pop()
-		if (typeof pathAndFuncs[pathAndFuncs.length-1]==='function' && (typeof renderer==='function' || renderer==null)) {
-			if (renderer!=null) makeSortKey = renderer
-			renderer = pathAndFuncs.pop()
+		if (prop==="value") {
+			return (target.proxy as any)[target.index];
 		}
-		if (typeof renderer !== 'function') throw new Error(`onEach() expects a render function as its last argument but got ${JSON.stringify(renderer)}`)
-
-		if (!currentScope) throw new ScopeError(false)
-
-		let store = this.ref(...pathAndFuncs)
-
-		let val = store._observe()
-		if (val instanceof ObsCollection) {
-			// Subscribe to changes using the specialized OnEachScope
-			let onEachScope = new OnEachScope(currentScope._parentElement, currentScope._lastChild || currentScope._precedingSibling, currentScope._queueOrder+1, val, renderer, makeSortKey)
-			val._addObserver(ANY_INDEX, onEachScope)
-
-			currentScope._cleaners.push(onEachScope)
-			currentScope._lastChild = onEachScope
-
-			onEachScope._renderInitial()
-		} else if (val!==undefined) {
-			throw new Error(`onEach() attempted on a value that is neither a collection nor undefined`)
+	},
+	set(target: any, prop: any, value: any) {
+		if (prop==="value") {
+			(target.proxy as any)[target.index] = value;
+			return true;
 		}
-	}
+		return false;
+	},
+};
 
-	/**
-	 * Applies a filter/map function on each item within the `Store`'s collection,
-	 * and reactively manages the returned `Map` `Store` to hold any results.
-	 *
-	 * @param func - Function that transform the given store into an output value or
-	 * `undefined` in case this value should be skipped:
-	 *
-	 * @returns - A map `Store` with the values returned by `func` and the corresponding
-	 * keys from the original map, array or object `Store`.
-	 *
-	 * When items disappear from the `Store` or are changed in a way that `func` depends
-	 * upon, the resulting items are removed from the output `Store` as well. When multiple
-	 * input items produce the same output keys, this may lead to unexpected results.
-	 */
-	map(func: (store: Store) => any): Store {
-		let out = new Store(new Map())
-		this.onEach((item: Store) => {
-			let value = func(item)
-			if (value !== undefined) {
-				let key = item.index()
-				out.set(key, value)
-				clean(() => {
-					out.delete(key)
-				})
-			}
-		})
-		return out
-	}
 
-	/**
-	 * Applies a filter/map function on each item within the `Store`'s collection,
-	 * each of which can deliver any number of key/value pairs, and reactively manages the
-	 * returned map `Store` to hold any results.
-	 *
-	 * @param func - Function that transform the given store into output values
-	 * that can take one of the following forms:
-	 * - an `Object` or a `Map`: Each key/value pair will be added to the output `Store`.
-	 * - anything else: No key/value pairs are added to the output `Store`.
-	 *
-	 * @returns - A map `Store` with the key/value pairs returned by all `func` invocations.
-	 *
-	 * When items disappear from the `Store` or are changed in a way that `func` depends
-	 * upon, the resulting items are removed from the output `Store` as well. When multiple
-	 * input items produce the same output keys, this may lead to unexpected results.
-	 */
-	multiMap(func: (store: Store) => any): Store {
-		let out = new Store(new Map())
-		this.onEach((item: Store) => {
-			let result = func(item)
-			let keys: Array<any>
-			if (result.constructor === Object) {
-				for(let key in result) {
-					out.set(key, result[key])
-				}
-				keys = Object.keys(result)
-			} else if (result instanceof Map) {
-				result.forEach((value: any, key: any) => {
-					out.set(key, value)
-				})
-				keys = [...result.keys()]
-			} else {
-				return
-			}
-			if (keys.length) {
-				clean(() => {
-					for(let key of keys) {
-						out.delete(key)
-					}
-				})
-			}
-		})
-		return out	
-	}
+/**
+ * Creates a reactive reference (`{ value: T }`-like object) to a specific value
+ * within a proxied object or array.
+ *
+ * This is primarily used for the `bind` property in {@link $} to create two-way data bindings
+ * with form elements, and for passing a reactive property to any of the {@link $} key-value pairs.
+ *
+ * Reading `ref.value` accesses the property from the underlying proxy (and subscribes the current scope).
+ * Assigning to `ref.value` updates the property in the underlying proxy (triggering reactive updates).
+ *
+ * @param target - The reactive proxy (created by {@link proxy}) containing the target property.
+ * @param index - The key (for objects) or index (for arrays) of the property to reference.
+ * @returns A reference object with a `value` property linked to the specified proxy property.
+ *
+ * @example
+ * ```javascript
+ * const formData = proxy({ color: 'orange', velocity: 42 });
+ *
+ * // Usage with `bind`
+ * $('input', {
+ *   type: 'text',
+ *   // Creates a two-way binding between the input's value and formData.username
+ *   bind: ref(formData, 'color')
+ * });
+ *
+ * // Usage as a dynamic property, causes a TextNode with just the name to be created and live-updated
+ * $('p:Selected color: ', {
+ *   text: ref(formData, 'color'),
+ *   $color: ref(formData, 'color')
+ * });
+ * 
+ * // Changes are actually stored in formData - this causes logs like `{color: "Blue", velocity 42}`
+ * $(() => console.log(formData))
+ * ```
+ */
+export function ref<T extends TargetType, K extends keyof T>(target: T, index: K): ValueRef<T[K]> {
+	return new Proxy({proxy: target, index}, refHandler) as any as ValueRef<T[K]>;
+}
 
-	/**
-	 * @returns Returns `true` when the `Store` was created by {@link Store.ref}ing a path that
-	 * does not exist.
-	 */
-	isDetached() { return false }
 
-	/**
-	* Dump a live view of the `Store` tree as HTML text, `ul` and `li` nodes at
-	* the current mount position. Meant for debugging purposes.
-	*/
-	dump() {
-	  let type = this.getType()
-	  if (type === 'array' || type === 'object' || type === 'map') {
-	    text('<'+type+'>')
-	    node('ul', () => {
-	      this.onEach((sub: Store) => {
-	        node('li', () => {
-	          text(JSON.stringify(sub.index())+': ')
-	          sub.dump()
-	        })
-	      })
-	    })
-	  }
-	  else {
-	    text(JSON.stringify(this.get()))
-	  }
+function applyBind(_el: Element, target: any) {
+	const el = _el as HTMLInputElement;
+	let onProxyChange: () => void;
+	let onInputChange: () => void;
+	let type = el.getAttribute('type');
+	let value = unproxy(target).value;
+	if (type === 'checkbox') {
+		if (value === undefined) target.value = el.checked;
+		onProxyChange = () => el.checked = target.value;
+		onInputChange = () => target.value = el.checked;
+	} else if (type === 'radio') {
+		if (value === undefined && el.checked) target.value = el.value;
+		onProxyChange = () => el.checked = (target.value === el.value);
+		onInputChange = () => {
+			if (el.checked) target.value = el.value;
+		}
+	} else {
+		onInputChange = () => target.value = type==='number' || type==='range' ? (el.value==='' ? null : +el.value) : el.value;
+		if (value === undefined) onInputChange();
+		onProxyChange = () => el.value = target.value
 	}
+	observe(onProxyChange);
+	el.addEventListener('input', onInputChange);
+	clean(() => {
+		el.removeEventListener('input', onInputChange);
+	});
 }
 
-class DetachedStore extends Store {
-	isDetached() { return true }
+const SPECIAL_PROPS: {[key: string]: (value: any) => void} = {
+	create: function(value: any) {
+		const el = currentScope.parentElement;
+		if (currentScope !== topRedrawScope) return;
+		if (typeof value === 'function') {
+			value(el);
+		} else {
+			const classes = value.split('.').filter((c: any)=>c);
+			el.classList.add(...classes);
+			(async function(){ // attempt to prevent layout trashing
+				(el as HTMLElement).offsetHeight; // trigger layout
+				el.classList.remove(...classes);
+			})();
+		}
+	},
+	destroy: function(value: any) {
+		const el = currentScope.parentElement;
+		onDestroyMap.set(el, value);
+	},
+	html: function(value: any) {
+		let tmpParent = document.createElement(currentScope.parentElement.tagName);
+		tmpParent.innerHTML = ''+value;
+		while(tmpParent.firstChild) addNode(tmpParent.firstChild);
+	},
+	text: function(value: any) {
+		addNode(document.createTextNode(value));
+	},
+	element: function(value: any) {
+		if (!(value instanceof Node)) throw new Error(`Unexpected element-argument: ${JSON.parse(value)}`);
+		addNode(value);
+	},
 }
 
 
 
-let onCreateEnabled = false
-let onDestroyMap: WeakMap<Node, string | Function | true> = new WeakMap()
-
-function destroyWithClass(element: Element, cls: string) {
-	element.classList.add(cls)
-	setTimeout(() => element.remove(), 2000)
-}
-
-
 /**
- * Create a new DOM element, and insert it into the DOM at the position held by the current scope.
- * @param tag - The tag of the element to be created and optionally dot-separated class names. For example: `h1` or `p.intro.has_avatar`.
- * @param rest - The other arguments are flexible and interpreted based on their types:
- *   - `string`: Used as textContent for the element.
- *   - `object`: Used as attributes, properties or event listeners for the element. See {@link Store.prop} on how the distinction is made and to read about a couple of special keys.
- *   - `function`: The render function used to draw the scope of the element. This function gets its own `Scope`, so that if any `Store` it reads changes, it will redraw by itself.
- *   - `Store`: Presuming `tag` is `"input"`, `"textarea"` or `"select"`, create a two-way binding between this `Store` value and the input element. The initial value of the input will be set to the initial value of the `Store`, or the other way around if the `Store` holds `undefined`. After that, the `Store` will be updated when the input changes and vice versa.
- * @example
- * node('aside.editorial', 'Yada yada yada....', () => {
- *	 node('a', {href: '/bio'}, () => {
- *		 node('img.author', {src: '/me.jpg', alt: 'The author'})
- *	 })
- * })
+ * The core function for building reactive user interfaces in Aberdeen. It creates and inserts new DOM elements
+ * and sets attributes/properties/event listeners on DOM elements. It does so in a reactive way, meaning that
+ * changes will be (mostly) undone when the current *scope* is destroyed or will be re-execute.
+ *
+ * @param {...(string | function | object | false | undefined | null)} args - Any number of arguments can be given. How they're interpreted depends on their types:
+ *
+ * - `string`: Strings can be used to create and insert new elements, set classnames for the *current* element, and add text to the current element.
+ *   The format of a string is: **tag**? (`.` **class**)* (':' **text**)?
+ *   meaning it consists of...
+ *   - An optional HTML **tag**, something like `h1`. If present, a DOM element of that tag is created, and that element will be the *current* element for the rest of this `$` function execution.
+ *   - Any number of CSS classes prefixed by `.` characters. These classes will be added to the *current* element.
+ *   - Optional content **text** prefixed by a `:` character, ranging til the end of the string. This will be added as a TextNode to the *current* element.
+ * - `function`: When a function (without argument nor a return value) is passed in, it will be reactively executed in its own observe scope, preserving the *current element*. So any `$()` invocations within this function will create DOM elements with our *current* element as parent. If the function reads observable data, and that data is changed later on, the function we re-execute (after side effects, such as DOM modifications through `$`, have been cleaned - see also {@link clean}).
+ * - `object`: When an object is passed in, its key-value pairs are used to modify the *current* element in the following ways...
+ *   - `{<attrName>: any}`: The common case is setting the value as an HTML attribute named key. So `{placeholder: "Your name"}` would add `placeholder="Your name"` to the current HTML element.
+ *   - `{<propName>: boolean}` or `{value: any}` or `{selectedIndex: number}`: If the value is a boolean, or if the key is `value` or `selectedIndex`, it is set on the `current` element as a DOM property instead of an HTML attribute. For example `{checked: true}` would do `el.checked = true` for the *current* element.
+ *   - `{".class": boolean}`: If the key starts with a `.` character, its either added to or removed from the *current* element as a CSS class, based on the truthiness of the value. So `{".hidden": hide}` would toggle the `hidden` CSS class.
+ *   - `{<eventName>: function}`: If the value is a `function` it is set as an event listener for the event with the name given by the key. For example: `{click: myClickHandler}`.
+ *   - `{$<styleProp>: value}`: If the key starts with a `$` character, set a CSS style property with the name of the rest of the key to the given value. Example: `{$backgroundColor: 'red'}`.
+ *   - `{create: string}`: Add the value string as a CSS class to the *current* element, *after* the browser has finished doing a layout pass. This behavior only triggers when the scope setting the `create` is the top-level scope being (re-)run. This allows for creation transitions, without triggering the transitions for deeply nested elements being drawn as part of a larger component. The string may also contain multiple dot-separated CSS classes, such as `.fade.grow`.
+ *   - `{destroy: string}`: When the *current* element is a top-level element to be removed (due to reactivity cleanup), actual removal from the DOM is delayed by 2 seconds, and in the mean time the value string is added as a CSS class to the element, allowing for a deletion transition. The string may also contain multiple dot-separated CSS classes, such as `.fade.shrink`.
+ *   - `{create: function}` and `{destroy: function}`: The function is invoked when the *current* element is the top-level element being created/destroyed. It can be used for more involved creation/deletion animations. In case of `destroy`, the function is responsible for actually removing the element from the DOM (eventually). See `transitions.ts` in the Aberdeen source code for some examples.
+ *   - `{bind: <obsValue>}`: Create a two-way binding element between the `value` property of the given observable (proxy) variable, and the *current* input element (`<input>`, `<select>` or `<textarea>`). This is often used together with {@link ref}, in order to use properties other than `.value`.
+ *   - `{<any>: <obsvalue>}`: Create a new observe scope and read the `value` property of the given observable (proxy) variable from within it, and apply the contained value using any of the other rules in this list. Example:
+ *      ```typescript
+ *      const myColor = proxy('red');
+ *      $('p:Test', {$color: myColor, click: () => myColor.value = 'yellow'})
+ *      // Clicking the text will cause it to change color without recreating the <p> itself
+ *      ```
+ *      This is often used together with {@link ref}, in order to use properties other than `.value`.
+ *   - `{text: string|number}`: Add the value as a `TextNode` to the *current* element.
+ *   - `{html: string}`: Add the value as HTML to the *current* element. This should only be used in exceptional situations. And of course, beware of XSS.
+ *   - `{element: Node}`: Add a pre-existing HTML `Node` to the *current* element.
+ *
+ *
+ * @example Create Element
+ * ```typescript
+ * $('button.secondary.outline:Submit', {
+ *   disabled: true,
+ *   click: () => console.log('Clicked!'),
+ *   $color: 'red'
+ * });
+ * ```
+ *
+ * @example Nested Elements & Reactive Scope
+ * ```typescript
+ * const state = proxy({ count: 0 });
+ * $('div', () => { // Outer element
+ *   // This scope re-renders when state.count changes
+ *   $('p:Count is ${state.count}`);
+ *   $('button:Increment', { click: () => state.count++ });
+ * });
+ * ```
+ *
+ * @example Two-way Binding
+ * ```typescript
+ * const user = proxy({ name: '' });
+ * $('input', { placeholder: 'Name', bind: ref(user, 'name') });
+ * $('h3', () => { // Reactive scope
+ *   $(`:Hello ${user.name || 'stranger'}`);
+ * });
+ * ```
+ *
+ * @example Conditional Rendering
+ * ```typescript
+ * const show = proxy(false);
+ * $('button', { click: () => show.value = !show.value }, () => $(show.value ? ':Hide' : ':Show'));
+ * $(() => { // Reactive scope
+ *   if (show.value) {
+ *     $('p:Details are visible!');
+ *   }
+ * });
+ * ```
  */
-export function node(tag: string|Element = "", ...rest: any[]) {
-	if (!currentScope) throw new ScopeError(true)
 
-	let el
-	if (tag instanceof Element) {
-		el = tag
-	} else {
-		let pos = tag.indexOf('.')
-		let classes
-		if (pos>=0) {
-			classes = tag.substr(pos+1)
-			tag = tag.substr(0, pos)
-		}
-		el = document.createElement(tag || 'div')
-		if (classes) {
-			// @ts-ignore (replaceAll is polyfilled)
-			el.className = classes.replaceAll('.', ' ')
-		}
-	}
 
-	currentScope._addNode(el)
+export function $(...args: (string | null | undefined | false | (() => void) | Record<string,any>)[]): void {
+	let savedCurrentScope;
+	let err;
 
-	for(let item of rest) {
-		let type = typeof item
-		if (type === 'function') {
-			let scope = new SimpleScope(el, undefined, currentScope._queueOrder+1, item)
-			if (onCreateEnabled) {
-				onCreateEnabled = false
-				scope._update()
-				onCreateEnabled = true
+	for(let arg of args) {
+		if (arg == null || arg === false) continue;
+		if (typeof arg === 'string') {
+			let text, classes: undefined | string;
+			const textPos = arg.indexOf(':');
+			if (textPos >= 0) {
+				text = arg.substring(textPos+1);
+				arg = arg.substring(0,textPos);
+			}
+			const classPos = arg.indexOf('.');
+			if (classPos >= 0) {
+				classes = arg.substring(classPos+1);
+				arg = arg.substring(0, classPos);
+			}
+			if (arg === '') { // Add text or classes to parent
+				if (text) addNode(document.createTextNode(text));
+				if (classes) {
+					const el = currentScope.parentElement;
+					el.classList.add(...classes.split('.'));
+					if (!savedCurrentScope) {
+						clean(() => el.classList.remove(...classes.split('.')));
+					}
+				}
+			} else if (arg.indexOf(' ') >= 0) {
+				err = `Tag '${arg}' cannot contain space`;
+				break;
 			} else {
-				scope._update()
+				const el = document.createElement(arg);
+				if (classes) el.className = classes.replaceAll('.', ' ');
+				if (text) el.textContent = text;
+				addNode(el);
+				if (!savedCurrentScope) {
+					savedCurrentScope = currentScope;
+				}
+				let newScope = new ChainedScope(el, true);
+				newScope.lastChild = el.lastChild || undefined;
+				if (topRedrawScope === currentScope) topRedrawScope = newScope;
+				currentScope = newScope;
 			}
-
-			// Add it to our list of cleaners. Even if `scope` currently has
-			// no cleaners, it may get them in a future refresh.
-			currentScope._cleaners.push(scope)
-		} else if (type === 'string' || type === 'number') {
-			el.textContent = item
-		} else if (type === 'object' && item && item.constructor === Object) {
-			for(let k in item) {
-				applyProp(el, k, item[k])
+		}
+		else if (typeof arg === 'object') {
+			if (arg.constructor !== Object) {
+				err = `Unexpected argument: ${arg}`;
+				break;
+			}
+			for(const key in arg) {
+				const val = arg[key];
+				applyArg(key, val);
 			}
-		} else if (item instanceof Store) {
-			bindInput(<HTMLInputElement>el, item)
-		} else if (item != null) {
-			throw new Error(`Unexpected argument ${JSON.stringify(item)}`)
+		} else if (typeof arg === 'function') {
+			new RegularScope(currentScope.parentElement, arg);
+		} else {
+			err = `Unexpected argument: ${arg}`;
+			break;
 		}
 	}
+	if (savedCurrentScope) {
+		currentScope = savedCurrentScope;
+	}
+	if (err) throw new Error(err);
 }
 
-
+let cssCount = 0;
 
 /**
- * Convert an HTML string to one or more DOM elements, and add them to the current DOM scope.
- * @param html - The HTML string. For example `"<section><h2>Test</h2><p>Info..</p></section>"`.
+ * Inserts CSS rules into the document, optionally scoping them with a unique class name.
+ *
+ * Takes a JavaScript object representation of CSS rules. camelCased property keys are
+ * converted to kebab-case (e.g., `fontSize` becomes `font-size`).
+ *
+ * @param style - An object where keys are CSS selectors (or camelCased properties) and values are
+ *   CSS properties or nested rule objects.
+ *   - Selectors are usually combined as a descendant-relationship (meaning just a space character) with their parent selector.
+ *   - In case a selector contains a `&`, that character will be replaced by the parent selector.
+ *   - Selectors will be split on `,` characters, each combining with the parent selector with *or* semantics.
+ *   - Selector starting with `'@'` define at-rules like media queries. They may be nested within regular selectors.
+ * @param global - If `true`, styles are inserted globally without prefixing.
+ *                 If `false` (default), all selectors are prefixed with a unique generated
+ *                 class name (e.g., `.AbdStl1`) to scope the styles.
+ * @returns The unique class name prefix used for scoping (e.g., `.AbdStl1`), or an empty string
+ *          if `global` was `true`. Use this prefix with {@link $} to apply the styles.
+ *
+ * @example Scoped Styles
+ * ```typescript
+ * const scopeClass = insertCss({
+ *   color: 'red',
+ *   padding: '10px',
+ *   '&:hover': { // Use '&' for the root scoped selector
+ *     backgroundColor: '#535'
+ *   },
+ *   '.child-element': { // Nested selector
+ *     fontWeight: 'bold'
+ *   },
+ *   '@media (max-width: 600px)': {
+ *     padding: '5px'
+ *   }
+ * });
+ * // scopeClass might be ".AbdStl1"
+ *
+ * // Apply the styles
+ * $(scopeClass, () => { // Add class to the div
+ *   $(`:Scoped content`);
+ *   $('div.child-element:Child'); // .AbdStl1 .child-element rule applies
+ * });
+ * ```
+ *
+ * @example Global Styles
+ * ```typescript
+ * insertCss({
+ *   '*': {
+ *     fontFamily: 'monospace',
+ *   },
+ *   'a': {
+ *     textDecoration: 'none',
+ *     color: "#107ab0",
+ *   }
+ * }, true); // Pass true for global
+ * 
+ * $('a:Styled link');
+ * ```
  */
-export function html(html: string) {
-	if (!currentScope || !currentScope._parentElement) throw new ScopeError(true)
-	let tmpParent = document.createElement(currentScope._parentElement.tagName)
-	tmpParent.innerHTML = ''+html
-	while(tmpParent.firstChild) {
-		currentScope._addNode(tmpParent.firstChild)
-	}
+export function insertCss(style: object, global: boolean = false): string {
+	const prefix = global ? "" : ".AbdStl" + ++cssCount;
+	let css = styleToCss(style, prefix);
+	if (css) $('style:'+css);
+	return prefix;
 }
 
-function bindInput(el: HTMLInputElement, store: Store) {
-	let onStoreChange: (value: any) => void
-	let onInputChange: () => void
-	let type = el.getAttribute('type')
-	let value = store.query({peek: true})
-	if (type === 'checkbox') {
-		if (value === undefined) store.set(el.checked)
-		onStoreChange = value => el.checked = value
-		onInputChange = () => store.set(el.checked)
-	} else if (type === 'radio') {
-		if (value === undefined && el.checked) store.set(el.value)
-		onStoreChange = value => el.checked = (value === el.value)
-		onInputChange = () => {
-			if (el.checked) store.set(el.value)
-		}
-	} else {
-		onInputChange = () => store.set(type==='number' || type==='range' ? (el.value==='' ? null : +el.value) : el.value)
-		if (value === undefined) onInputChange()
-		onStoreChange = value => {
-			if (el.value !== value) el.value = value
+function styleToCss(style: object, prefix: string): string {
+	let props = '';
+	let rules = '';
+	for(const kOr in style) {
+		const v = (style as any)[kOr];
+		for(const k of kOr.split(/, ?/g)) {
+			if (v && typeof v === 'object') {
+				if (k.startsWith('@')) { // media queries
+					rules += k + '{\n' + styleToCss(v, prefix) + '}\n';
+				} else {
+					rules += styleToCss(v, k.includes('&') ? k.replace(/&/g, prefix) : prefix+' '+k);
+				}
+			} else {
+				props += k.replace(/[A-Z]/g, letter => '-'+letter.toLowerCase()) +":"+v+";";
+			}
 		}
 	}
-	observe(() => {
-		onStoreChange(store.get())
-	})
-	el.addEventListener('input', onInputChange)
-	clean(() => {
-		el.removeEventListener('input', onInputChange)
-	})
-
+	if (props) rules = (prefix.trimStart() || '*') + '{'+props+'}\n' + rules;
+	return rules;
 }
 
-/**
- * Add a text node at the current Scope position.
- */
-export function text(text: string) {
-	if (!currentScope) throw new ScopeError(true)
-	if (text==null) return
-	currentScope._addNode(document.createTextNode(text))
+function applyArg(key: string, value: any) {
+	const el = currentScope.parentElement;
+	if (typeof value === 'object' && value !== null && value[TARGET_SYMBOL]) { // Value is a proxy
+		if (key === 'bind') {
+			applyBind(el, value)
+		} else {
+			new SetArgScope(el, key, value)
+			// SetArgScope will (repeatedly) call `applyArg` again with the actual value
+		}
+	} else if (key[0] === '.') { // CSS class(es)
+		const classes = key.substring(1).split('.');
+		if (value) el.classList.add(...classes);
+		else el.classList.remove(...classes);
+	} else if (key[0] === '$') { // Style
+		const name = key.substring(1);
+		if (value==null || value===false) (el as any).style[name] = ''
+		else (el as any).style[name] = ''+value;
+	} else if (value == null) { // Value left empty
+		// Do nothing
+	} else if (key in SPECIAL_PROPS) { // Special property
+		SPECIAL_PROPS[key](value);
+	} else if (typeof value === 'function') { // Event listener
+		el.addEventListener(key, value);
+		clean(() => el.removeEventListener(key, value));
+	} else if (value===true || value===false || key==='value' || key==='selectedIndex') { // DOM property
+		(el as any)[key] = value;
+	} else { // HTML attribute
+		el.setAttribute(key, value);
+	}
 }
 
+function defaultOnError(error: Error) {
+	console.error('Error while in Aberdeen render:', error);
+	return true;
+}
+let onError: (error: Error) => boolean | undefined = defaultOnError;
 
 /**
- * Set properties and attributes for the containing DOM element. Doing it this way
- * as opposed to setting them directly from node() allows changing them later on
- * without recreating the element itself. Also, code can be more readable this way.
- * Note that when a nested `observe()` is used, properties set this way do NOT
- * automatically revert to their previous values.
- *
- * Here's how properties are handled:
- * - If `name` is `"create"`, `value` should be either a function that gets
- *   called with the element as its only argument immediately after creation,
- *   or a string being the name of a CSS class that gets added immediately
- *   after element creation, and removed shortly afterwards. This allows for
- *   reveal animations. However, this is intentionally *not* done
- *   for elements that are created as part of a larger (re)draw, to prevent
- *   all elements from individually animating on page creation.
- * - If `name` is `"destroy"`, `value` should be a function that gets called
- *   with the element as its only argument, *instead of* the element being
- *   removed from the DOM (which the function will presumably need to do
- *   eventually). This can be used for a conceal animation.
- *   As a convenience, it's also possible to provide a string instead of
- *   a function, which will be added to the element as a CSS class, allowing
- *   for simple transitions. In this case, the DOM element in removed 2 seconds
- *   later (currently not configurable).
- *   Similar to `"create"` (and in this case doing anything else would make little
- *   sense), this only happens when the element being is the top-level element
- *   being removed from the DOM.
- * - If `value` is a function, it is registered as an event handler for the
- *   `name` event.
- * - If `name` is `"class"` or `"className"` and the `value` is an
- *   object, all keys of the object are either added or removed from `classList`,
- *   depending on whether `value` is true-like or false-like.
- * - If `value` is a boolean *or* `name` is `"value"`, `"className"` or
- *   `"selectedIndex"`, it is set as a DOM element *property*.
- * - If `name` is `"text"`, the `value` is set as the element's `textContent`.
- * - If `name` is `"style"` and `value` is an object, each of its
- *   key/value pairs are assigned to the element's `.style`.
- * - In other cases, the `value` is set as the `name` HTML *attribute*.
+ * Sets a custom error handler function for errors that occur asynchronously
+ * within reactive scopes (e.g., during updates triggered by proxy changes in
+ * {@link observe} or {@link $} render functions).
  *
- * @example
- * ```
- * node('input', () => {
- *	   prop('type', 'password')
- *	   prop('readOnly', true)
- *	   prop('class', 'my-class')
- *	   prop('class', {
- *	   		'my-disabled-class': false,
- *	   		'my-enabled-class': true,
- *	   })
- *	   prop({
- *	   		class: 'my-class',
- *	   		text: 'Here is something to read...',
- *	   		style: {
- *	   			backgroundColor: 'red',
- *	   			fontWeight: 'bold',
- *	   		},
- *	   		create: aberdeen.fadeIn,
- *	   		destroy: 'my-fade-out-class',
- *	   		click: myClickHandler,
- *	   })
+ * The default handler logs the error to `console.error` and adds a simple
+ * 'Error' message div to the DOM at the location where the error occurred (if possible).
+ *
+ * Your handler can provide custom logging, UI feedback, or suppress the default
+ * error message.
+ *
+ * @param handler - A function that accepts the `Error` object.
+ *   - Return `false` to prevent adding an error message to the DOM.
+ *   - Return `true` or `undefined` (or throw) to allow the error messages to be added to the DOM.
+ *
+ * @example Custom Logging and Suppressing Default Message
+ * ```typescript
+ * setErrorHandler(error => {
+ *   console.warn('Aberdeen render error:', error.message);
+ *   // Log to error reporting service
+ *   // myErrorReporter.log(error);
+ *
+ *   try {
+ *     // Attempt to show a custom message in the UI
+ *     $('div.error-display:Oops, something went wrong!');
+ *   } catch (e) {
+ *     // Ignore errors during error handling itself
+ *   }
+ *
+ *   return false; // Suppress default console log and DOM error message
+ * });
+ * 
+ * // Cause an error within a render scope.
+ * $('div.box', () => {
+ *   noSuchFunction();
  * })
  * ```
  */
-export function prop(name: string, value: any): void
-export function prop(props: object): void
-
-export function prop(name: any, value: any = undefined) {
-	if (!currentScope || !currentScope._parentElement) throw new ScopeError(true)
-	if (typeof name === 'object') {
-		for(let k in name) {
-			applyProp(currentScope._parentElement, k, name[k])
-		}
-	} else {
-		applyProp(currentScope._parentElement, name, value)
-	}
+export function setErrorHandler(handler?: (error: Error) => boolean | undefined) {
+	onError = handler || defaultOnError;
 }
 
 
 /**
- * Return the browser Element that `node()`s would be rendered to at this point.
- * NOTE: Manually changing the DOM is not recommended in most cases. There is
- * usually a better, declarative way. Although there are no hard guarantees on
- * how your changes interact with Aberdeen, in most cases results will not be
- * terribly surprising. Be careful within the parent element of onEach() though.
+ * Gets the parent DOM `Element` where nodes created by {@link $} would currently be inserted.
+ *
+ * This is context-dependent based on the current reactive scope (e.g., inside a {@link mount}
+ * call or a {@link $} element's render function).
+ *
+ * **Note:** While this provides access to the DOM element, directly manipulating it outside
+ * of Aberdeen's control is generally discouraged. Prefer declarative updates using {@link $}.
+ *
+ * @returns The current parent `Element` for DOM insertion.
+ *
+ * @example Get parent for attaching a third-party library
+ * ```typescript
+ * function thirdPartyLibInit(parentElement) {
+ *   parentElement.innerHTML = "This element is managed by a <em>third party</em> lib."
+ * }
+ *
+ * $('div.box', () => {
+ *   // Get the div.box element just created
+ *   const containerElement = getParentElement();
+ *   thirdPartyLibInit(containerElement);
+ * });
+ * ```
  */
 export function getParentElement(): Element {
-	if (!currentScope || !currentScope._parentElement) throw new ScopeError(true)
-	return currentScope._parentElement
+	return currentScope.parentElement;
 }
 
 
 /**
- * Register a function that is to be executed right before the current reactive scope
- * disappears or redraws.
- * @param clean - The function to be executed.
+ * Registers a cleanup function to be executed just before the current reactive scope
+ * is destroyed or redraws.
+ *
+ * This is useful for releasing resources, removing manual event listeners, or cleaning up
+ * side effects associated with the scope. Cleaners are run in reverse order of registration.
+ *
+ * Scopes are created by functions like {@link observe}, {@link mount}, {@link $} (when given a render function),
+ * and internally by constructs like {@link onEach}.
+ *
+ * @param cleaner - The function to execute during cleanup.
+ *
+ * @example Maintaing a sum for a changing array
+ * ```typescript
+ * const myArray = proxy([3, 5, 10]);
+ * let sum = proxy(0);
+ *
+ * // Show the array items and maintain the sum
+ * onEach(myArray, (item, index) => {
+ *     $(`code:${index}→${item}`);
+ *     // We'll update sum.value using peek, as += first does a read, but
+ *     // we don't want to subscribe.
+ *     peek(() => sum.value += item);
+ *     // Clean gets called before each rerun for a certain item index
+ *     // No need for peek here, as the clean code doesn't run in an 
+ *     // observe scope.
+ *     clean(() => sum.value -= item);
+ * })
+ * 
+ * // Show the sum
+ * $('h1', {text: sum});
+ * 
+ * // Make random changes to the array
+ * const rnd = () => 0|(Math.random()*20);
+ * setInterval(() => myArray[rnd()] = rnd(), 1000);
+ * ```
  */
-export function clean(clean: () => void) {
-	if (!currentScope) throw new ScopeError(false)
-	currentScope._cleaners.push({_clean: clean})
+
+export function clean(cleaner: () => void) {
+	currentScope.cleaners.push(cleaner);
 }
 
 
 /**
- * Reactively run a function, meaning the function will rerun when any `Store` that was read
- * during its execution is updated.
- * Calls to `observe` can be nested, such that changes to `Store`s read by the inner function do
- * no cause the outer function to rerun.
+ * Creates a reactive scope that automatically re-executes the provided function
+ * whenever any proxied data (created by {@link proxy}) read during its last execution changes, storing
+ * its return value in an observable.
  *
- * @param func - The function to be (repeatedly) executed.
- * @returns The mount id (usable for `unmount`) if this is a top-level observe.
- * @example
+ * Updates are batched and run asynchronously shortly after the changes occur.
+ * Use {@link clean} to register cleanup logic for the scope.
+ * Use {@link peek} or {@link unproxy} within the function to read proxied data without subscribing to it.
+ *
+ * @param func - The function to execute reactively. Any DOM manipulations should typically
+ *   be done using {@link $} within this function. Its return value will be made available as an
+ *   observable returned by the `observe()` function.
+ * @returns An observable object, with its `value` property containing whatever the last run of `func` returned.
+ *
+ * @example Observation creating a UI components
+ * ```typescript
+ * const data = proxy({ user: 'Frank', notifications: 42 });
+ *
+ * $('main', () => {
+ *   console.log('Welcome');
+ *   $('h3:Welcome, ' + data.user); // Reactive text
+ *
+ *   observe(() => {
+ *     // When data.notifications changes, only this inner scope reruns,
+ *     // leaving the `<p>Welcome, ..</p>` untouched.
+ *     console.log('Notifications');
+ *     $('code.notification-badge:' + data.notifications);
+ *     $('a:Notify!', {click: () => data.notifications++});
+ *   });
+ * });
  * ```
- * let number = new Store(0)
- * let doubled = new Store()
- * setInterval(() => number.set(0|Math.random()*100)), 1000)
+ * 
+ * ***Note*** that the above could just as easily be done using `$(func)` instead of `observe(func)`.
+ * 
+ * @example Observation with return value
+ * ```typescript
+ * const counter = proxy(0);
+ * setInterval(() => counter.value++, 1000);
+ * const double = observe(() => counter.value * 2);
  *
- * observe(() => {
- *   doubled.set(number.get() * 2)
+ * $('h3', () => {
+ *     $(`:counter=${counter.value} double=${double.value}`);
  * })
+ * ```
  *
- * observe(() => {
- *   console.log(doubled.get())
- * })
+ * @overload
+ * @param func Func without a return value.
  */
-export function observe(func: () => void): number | undefined {
-	return _mount(undefined, func, SimpleScope)
+export function observe<T extends (DatumType | void)>(func: () => T): ValueRef<T> {
+	return (new ResultScope<T>(currentScope.parentElement, func)).result;
 }
 
 /**
- * Like `observe`, but instead of deferring running the observer function until
- * a setTimeout 0, run it immediately and synchronously when a change to one of
- * the observed  `Store`s is made. Use this sparingly, as this prevents Aberdeen
- * from doing the usual batching and smart ordering of observers, leading to
- * performance problems and observing of 'weird' partial states.
- * @param func The function to be (repeatedly) executed.
- * @returns The mount id (usable for `unmount`) if this is a top-level observe.
+ * Similar to {@link observe}, creates a reactive scope that re-executes the function
+ * when its proxied dependencies change.
+ *
+ * **Difference:** Updates run **synchronously and immediately** after the proxy modification
+ * that triggered the update occurs.
+ *
+ * **Caution:** Use sparingly. Immediate execution bypasses Aberdeen's usual batching and
+ * ordering optimizations, which can lead to performance issues or observing inconsistent
+ * intermediate states if multiple related updates are applied sequentially.
+ * Prefer {@link observe} or {@link $} for most use cases.
+ *
+ * @param func - The function to execute reactively and synchronously.
+ *
+ * @example
+ * ```javascript
+ * const state = proxy({ single: 'A' });
+ *
+ * immediateObserve(() => {
+ *   state.double = state.single + state.single
+ * });
+ * console.log(state.double); // 'AA'
+ *
+ * state.single = 'B';
+ * // Synchronously:
+ * console.log(state.double); // 'BB'
+ * ```
  */
-export function immediateObserve(func: () => void): number | undefined {
-	return _mount(undefined, func, ImmediateScope)
+export function immediateObserve(func: () => void) {
+	new ImmediateScope(currentScope.parentElement, func);
 }
 
-
 /**
- * Like {@link Store.observe}, but allow the function to create DOM elements using {@link Store.node}.
-
- * @param func - The function to be (repeatedly) executed, possibly adding DOM elements to `parentElement`.
- * @param parentElement - A DOM element that will be used as the parent element for calls to `node`.
- * @returns The mount id (usable for `unmount`) if this is a top-level mount.
+ * Attaches a reactive Aberdeen UI fragment to an existing DOM element. Without the use of
+ * this function, {@link $} will assume `document.body` as its root.
  *
- * @example
- * ```
- * let store = new Store(0)
- * setInterval(() => store.modify(v => v+1), 1000)
+ * It creates a top-level reactive scope associated with the `parentElement`. The provided
+ * function `func` is executed immediately within this scope. Any proxied data read by `func`
+ * will cause it to re-execute when the data changes, updating the DOM elements created within it.
  *
- * mount(document.body, () => {
- * 	   node('h2', `${store.get()} seconds have passed`)
- * })
- * ```
+ * Calls to {@link $} inside `func` will append nodes to `parentElement`.
+ * You can nest {@link observe} or other {@link $} scopes within `func`.
+ * Use {@link unmountAll} to clean up all mounted scopes and their DOM nodes.
+ * 
+ * Mounting scopes happens reactively, meaning that if this function is called from within another
+ * ({@link observe} or {@link $} or {@link mount}) scope that gets cleaned up, so will the mount.
  *
- * An example nesting {@link Store.observe} within `mount`:
- * ```
- * let selected = new Store(0)
- * let colors = new Store(new Map())
- *
- * mount(document.body, () => {
- * 	// This function will never rerun (as it does not read any `Store`s)
- * 	node('button', '<<', {click: () => selected.modify(n => n-1)})
- * 	node('button', '>>', {click: () => selected.modify(n => n+1)})
- * 	
- * 	observe(() => {
- * 		// This will rerun whenever `selected` changes, recreating the <h2> and <input>.
- * 		node('h2', '#'+selected.get())
- * 		node('input', {type: 'color', value: '#ffffff'}, colors.ref(selected.get()))
- * 	})
- * 	
- * 	observe(() => {
- * 		// This function will rerun when `selected` or the selected color changes.
- * 		// It will change the <body> background-color.
- * 		prop({style: {backgroundColor: colors.get(selected.get()) || 'white'}})
- * 	})
- * })
+ * @param parentElement - The native DOM `Element` to which the UI fragment will be appended.
+ * @param func - The function that defines the UI fragment, typically containing calls to {@link $}.
+ *
+ * @example Basic Mount
+ * ```javascript
+ * // Create a pre-existing DOM structure (without Aberdeen)
+ * document.body.innerHTML = `<h3>Static content <span id="title-extra"></span></h3><div class="box" id="app-root"></div>`;
+ * 
+ * import { mount, $, proxy } from 'aberdeen';
+ *
+ * const runTime = proxy(0);
+ * setInterval(() => runTime.value++, 1000);
+ *
+ * mount(document.getElementById('app-root'), () => {
+ *   $('h4:Aberdeen App');
+ *   $(`p:Run time: ${runTime.value}s`);
+ *   // Conditionally render some content somewhere else in the static page
+ *   if (runTime.value&1) {
+ *     mount(document.getElementById('title-extra'), () =>
+ *       $(`i:(${runTime.value}s)`)
+ *     );
+ *   }
+ * });
  * ```
-*/
-export function mount(parentElement: Element, func: () => void) {
-	return _mount(parentElement, func, SimpleScope)
-}
-
-let maxTopScopeId = 0
-const topScopes: Map<number, SimpleScope> = new Map()
-function _mount(parentElement: Element | undefined, func: () => void, MountScope: typeof SimpleScope): number | undefined {
-	let scope
-	if (parentElement || !currentScope) {
-		scope = new MountScope(parentElement, undefined, 0, func)
-	} else {
-		scope = new MountScope(currentScope._parentElement, currentScope._lastChild || currentScope._precedingSibling, currentScope._queueOrder+1, func)
-		currentScope._lastChild = scope
-	}
-
-	// Do the initial run
-	scope._update()
+ * 
+ * Note how the inner mount behaves reactively as well, automatically unmounting when it's parent observer scope re-runs.
+ */
 
-	// Add it to our list of cleaners. Even if `scope` currently has
-	// no cleaners, it may get them in a future refresh.
-	if (currentScope) {
-		currentScope._cleaners.push(scope)
-	} else {
-		topScopes.set(++maxTopScopeId, scope)
-		return maxTopScopeId
-	}
+export function mount(parentElement: Element, func: () => void) {
+	new MountScope(parentElement, func);
 }
 
 /**
- * Unmount one specific or all top-level mounts or observes, meaning those that were created outside of the scope 
- * of any other mount or observe.
- * @param id Optional mount number (as returned by `mount`, `observe` or `immediateObserve`). If `undefined`, unmount all.
+ * Removes all Aberdeen-managed DOM nodes and stops all active reactive scopes
+ * (created by {@link mount}, {@link observe}, {@link $} with functions, etc.).
+ *
+ * This effectively cleans up the entire Aberdeen application state.
  */
-export function unmount(id?: number) {
-	if (id == null) {
-		for(let scope of topScopes.values()) scope._remove()
-		topScopes.clear()
-	} else {
-		let scope = topScopes.get(id)
-		if (!scope) throw new Error("No such mount "+id)
-		scope._remove()
-	}
+export function unmountAll() {
+	ROOT_SCOPE.remove();
+	cssCount = 0;
 }
 
-
-/** Runs the given function, while not subscribing the current scope when reading {@link Store.Store} values.
+/**
+ * Executes a function *without* creating subscriptions in the current reactive scope, and returns its result.
  *
- * @param func Function to be executed immediately.
- * @returns Whatever `func()` returns.
- * @example
- * ```
- * import {Store, peek, text} from aberdeen
+ * This is useful when you need to access reactive data inside a reactive scope (like {@link observe})
+ * but do not want changes to that specific data to trigger a re-execute of the scope.
  *
- * let store = new Store(['a', 'b', 'c'])
+ * @template T The type of the return value of your function.
  *
- * mount(document.body, () => {
- *     // Prevent rerender when store changes
- *     let msg = peek(() => `Store has ${store.count()} elements, and the first is ${store.get(0)}`))
- *     text(msg)
- * })
+ * @param func - The function to execute without creating subscriptions.
+ * @returns Whatever `func` returns.
+ *
+ * @example Peeking within observe
+ * ```typescript
+ * const data = proxy({ a: 1, b: 2 });
+ * observe(() => {
+ *   // re-executes only when data.a changes, because data.b is peeked.
+ *   const b = peek(() => data.b);
+ *   console.log(`A is ${data.a}, B was ${b} when A changed.`);
+ * });
+ * data.b = 3; // Does not trigger console.log
+ * data.a = 2; // Triggers console.log (logs "A is 2, B was 3 when A changed.")
  * ```
  *
- * In the above example `store.get(0)` could be replaced with `store.peek(0)` to achieve the
- * same result without `peek()` wrapping everything. There is no non-subscribing equivalent
- * for `count()` however.
  */
 export function peek<T>(func: () => T): T {
-	let savedScope = currentScope
-	currentScope = undefined
+	peeking++;
 	try {
-		return func()
+		return func();
 	} finally {
-		currentScope = savedScope
+		peeking--;
 	}
 }
 
+/** When using an object as `source`. */
+export function map<IN,OUT>(source: Record<string|symbol,IN>, func: (value: IN, index: string|symbol) => undefined|OUT): Record<string|symbol,OUT>;
+/** When using an array as `source`. */
+export function map<IN,OUT>(source: Array<IN>, func: (value: IN, index: number) => undefined|OUT): Array<OUT>;
+/**
+ * Reactively maps/filters items from a proxied source array or object to a new proxied array or object.
+ *
+ * It iterates over the `target` proxy. For each item, it calls `func`.
+ * - If `func` returns a value, it's added to the result proxy under the same key/index.
+ * - If `func` returns `undefined`, the item is skipped (filtered out).
+ *
+ * The returned proxy automatically updates when:
+ * - Items are added/removed/updated in the `target` proxy.
+ * - Any proxied data read *within* the `func` call changes (for a specific item).
+ *
+ * @param func - A function `(value, key) => mappedValue | undefined` that transforms each item.
+ *   It receives the item's value and its key/index. Return `undefined` to filter the item out.
+ * @returns A new proxied array or object containing the mapped values.
+ * @template IN The type of items in the source proxy.
+ * @template OUT The type of items in the resulting proxy.
+ *
+ * @example Map array values
+ * ```typescript
+ * const numbers = proxy([1, 2, 3]);
+ * const doubled = map(numbers, (n) => n * 2);
+ * // doubled is proxy([2, 4, 6])
+ *
+ * observe(() => console.log(doubled)); // Logs updates
+ * numbers.push(4); // doubled becomes proxy([2, 4, 6, 8])
+ * ```
+ *
+ * @example Filter and map object properties
+ * ```typescript
+ * const users = proxy({
+ *   'u1': { name: 'Alice', active: true },
+ *   'u2': { name: 'Bob', active: false },
+ *   'u3': { name: 'Charlie', active: true }
+ * });
+ *
+ * const activeUserNames = map(users, (user) => user.active ? user.name : undefined);
+ * // activeUserNames is proxy({ u1: 'Alice', u3: 'Charlie' })
+ * observe(() => console.log(Object.values(activeUserNames)));
+ *
+ * users.u2.active = true;
+ * // activeUserNames becomes proxy({ u1: 'Alice', u2: 'Bob', u3: 'Charlie' })
+ * ```
+ */
+export function map(source: any, func: (value: DatumType, key: any) => any): any {
+	let out = optProxy(source instanceof Array ? [] : {});
+	onEach(source, (item: DatumType, key: symbol|string|number) => {
+		let value = func(item, key);
+		if (value !== undefined) {
+			out[key] = value;
+			clean(() => {
+				delete out[key];
+			})
+		}
+	})
+	return out
+}
 
-/*
- * Helper functions
+/** When using an array as `source`. */
+export function multiMap<IN,OUT extends {[key: string|symbol]: DatumType}>(source: Array<IN>, func: (value: IN, index: number) => OUT | undefined): OUT;
+/** When using an object as `source`. */
+export function multiMap<K extends string|number|symbol,IN,OUT extends {[key: string|symbol]: DatumType}>(source: Record<K,IN>, func: (value: IN, index: K) => OUT | undefined): OUT;
+/**
+ * Reactively maps items from a source proxy (array or object) to a target proxied object,
+ * where each source item can contribute multiple key-value pairs to the target.
+ *
+ * It iterates over the `target` proxy. For each item, it calls `func`.
+ * - If `func` returns an object, all key-value pairs from that object are added to the result proxy.
+ * - If `func` returns `undefined`, the item contributes nothing.
+ *
+ * The returned proxy automatically updates when:
+ * - Items are added/removed/updated in the `target` proxy.
+ * - Any proxied data read *within* the `func` call changes (for a specific item).
+ * - If multiple input items produce the same output key, the last one processed usually "wins",
+ *   but the exact behavior on collision depends on update timing.
+ *
+ * This is useful for "flattening" or "indexing" data, or converting an observable array to an observable object.
+ *
+ * @param source - The source proxied array or object.
+ * @param func - A function `(value, key) => ({...pairs} | undefined)` that transforms an item
+ *   into an object of key-value pairs to add, or `undefined` to add nothing.
+ * @returns A new proxied object containing the aggregated key-value pairs.
+ * @template IN The type of items in the source proxy.
+ * @template OUT The type of the aggregated output object (should encompass all possible key-value pairs).
+ *
+ * @example Creating an index from an array
+ * ```typescript
+ * const items = proxy([
+ *   { id: 'a', value: 10 },
+ *   { id: 'b', value: 20 },
+ * ]);
+ * const itemsById = multiMap(items, (item) => ({
+ *   [item.id]: item.value,
+ *   [item.id+item.id]: item.value*10,
+ * }));
+ * // itemsById is proxy({ a: 10, aa: 100, b: 20, bb: 200 })
+ * 
+ * $(() => console.log(itemsById));
+ *
+ * items.push({ id: 'c', value: 30 });
+ * // itemsById becomes proxy({ a: 10, aa: 100, b: 20, bb: 200, c: 30, cc: 300 })
+ * ```
  */
+export function multiMap(source: any, func: (value: DatumType, key: any) => Record<string|symbol,DatumType>): any {
+	let out = optProxy({});
+	onEach(source, (item: DatumType, key: symbol|string|number) => {
+		let pairs = func(item, key);
+		if (pairs) {
+			for(let key in pairs) out[key] = pairs[key];
+			clean(() => {
+				for(let key in pairs) delete out[key];
+			})
+		}
+	})
+	return out
+}
 
-function applyProp(el: Element, prop: any, value: any) {
-	if (prop==='create') {
-		if (onCreateEnabled) {
-			if (typeof value === 'function') {
-				value(el)
-			} else {
-				el.classList.add(value)
-				setTimeout(function(){el.classList.remove(value)}, 0)
+/** When using an object as `array`. */
+export function partition<OUT_K extends string|number|symbol, IN_V>(source: IN_V[], func: (value: IN_V, key: number) => undefined | OUT_K | OUT_K[]): Record<OUT_K,Record<number,IN_V>>;
+/** When using an object as `source`. */
+export function partition<IN_K extends string|number|symbol, OUT_K extends string|number|symbol, IN_V>(source: Record<IN_K,IN_V>, func: (value: IN_V, key: IN_K) => undefined | OUT_K | OUT_K[]): Record<OUT_K,Record<IN_K,IN_V>>;
+
+/**
+ * @overload
+ * Reactively partitions items from a source proxy (array or object) into multiple "bucket" proxies
+ * based on keys determined by a classifier function.
+ *
+ * This function iterates through the `source` proxy using {@link onEach}. For each item,
+ * it calls the classifier `func`, which should return:
+ * - A single key (`OUT_K`): The item belongs to the bucket with this key.
+ * - An array of keys (`OUT_K[]`): The item belongs to all buckets specified in the array.
+ * - `undefined`: The item is not placed in any bucket.
+ *
+ * The function returns a main proxied object. The keys of this object are the bucket keys (`OUT_K`)
+ * returned by `func`. Each value associated with a bucket key is another proxied object (the "bucket").
+ * This inner bucket object maps the *original* keys/indices from the `source` to the items
+ * themselves that were classified into that bucket.
+ *
+ * The entire structure is reactive. Changes in the `source` proxy (adding/removing/updating items)
+ * or changes in dependencies read by the `func` will cause the output partitioning to update automatically.
+ * Buckets are created dynamically as needed and removed when they become empty.
+ *
+ * @param source - The input proxied Array or Record (e.g., created by {@link proxy}) containing the items to partition.
+ * @param func - A classifier function `(value: IN_V, key: IN_K | number) => undefined | OUT_K | OUT_K[]`.
+ *   It receives the item's value and its original key/index from the `source`. It returns the bucket key(s)
+ *   the item belongs to, or `undefined` to ignore the item.
+ * @returns A proxied object where keys are the bucket identifiers (`OUT_K`) and values are proxied Records
+ *   (`Record<IN_K | number, IN_V>`) representing the buckets. Each bucket maps original source keys/indices
+ *   to the items belonging to that bucket.
+ *
+ * @template OUT_K - The type of the keys used for the output buckets (string, number, or symbol).
+ * @template IN_V - The type of the values in the source proxy.
+ * @template IN_K - The type of the keys in the source proxy (if it's a Record).
+ *
+ * @example Grouping items by a property
+ * ```typescript
+ * interface Product { id: string; category: string; name: string; }
+ * const products = proxy<Product[]>([
+ *   { id: 'p1', category: 'Fruit', name: 'Apple' },
+ *   { id: 'p2', category: 'Veg', name: 'Carrot' },
+ *   { id: 'p3', category: 'Fruit', name: 'Banana' },
+ * ]);
+ *
+ * // Partition products by category. Output keys are categories (string).
+ * // Inner keys are original array indices (number).
+ * const productsByCategory = partition(products, (product) => product.category);
+ * 
+ * // Reactively show the data structure
+ * dump(productsByCategory);
+ * 
+ * // Make random changes to the categories, to show reactiveness
+ * setInterval(() => products[0|(Math.random()*3)].category = ['Snack','Fruit','Veg'][0|(Math.random()*3)], 2000);
+ * ```
+ *
+ * @example Item in multiple buckets
+ * ```typescript
+ * interface User { id: number; tags: string[]; name: string; }
+ * const users = proxy({
+ *   'u1': { name: 'Alice', tags: ['active', 'new'] },
+ *   'u2': { name: 'Bob', tags: ['active'] }
+ * });
+ *
+ * // Partition users by tag. Output keys are tags (string).
+ * // Inner keys are original object keys (string: 'u1', 'u2').
+ * const usersByTag = partition(users, (user) => user.tags);
+ *
+ * console.log(usersByTag);
+ * ```
+ */
+export function partition<IN_K extends string|number|symbol, OUT_K extends string|number|symbol, IN_V>(source: Record<IN_K,IN_V>, func: (value: IN_V, key: IN_K) => undefined | OUT_K | OUT_K[]): Record<OUT_K,Record<IN_K,IN_V>> {
+	const unproxiedOut = {} as Record<OUT_K,Record<IN_K,IN_V>>;
+	const out = proxy(unproxiedOut);
+	onEach(source, (item: IN_V, key: IN_K) => {
+		let rsp = func(item, key);
+		if (rsp != null) {
+			const buckets = rsp instanceof Array ? rsp : [rsp];
+			if (buckets.length) {
+				for(let bucket of buckets) {
+					if (unproxiedOut[bucket]) out[bucket][key] = item;
+					else out[bucket] = {[key]: item} as Record<IN_K, IN_V>;
+				}
+				clean(() => {
+					for(let bucket of buckets) {
+						delete out[bucket][key];
+						if (isObjEmpty(unproxiedOut[bucket])) delete out[bucket];
+					}						
+				})
 			}
 		}
-	} else if (prop==='destroy') {
-		onDestroyMap.set(el, value)
-	} else if (typeof value === 'function') {
-		// Set an event listener; remove it again on clean.
-		el.addEventListener(prop, value)
-		clean(() => el.removeEventListener(prop, value))
-	} else if (prop==='value' || prop==='className' || prop==='selectedIndex' || value===true || value===false) {
-		// All boolean values and a few specific keys should be set as a property
-		(el as any)[prop] = value
-	} else if (prop==='text') {
-		// `text` is set as textContent
-		el.textContent = value
-	} else if ((prop==='class' || prop==='className') && typeof value === 'object') {
-		// Allow setting classes using an object where the keys are the names and
-		// the values are booleans stating whether to set or remove.
-		for(let name in value) {
-			if (value[name]) el.classList.add(name)
-			else el.classList.remove(name)
-		}
-	} else if (prop==='style' && typeof value === 'object') {
-		// `style` can receive an object
-		Object.assign((<HTMLElement>el).style, value)
-	} else {
-		// Everything else is an HTML attribute
-		el.setAttribute(prop, value)
-	}
+	})
+	return out;
 }
 
-function valueToData(value: any) {
-	if (typeof value !== "object" || !value) {
-		// Simple data types
-		return value
-	} else if (value instanceof Store) {
-		// When a Store is passed pointing at a collection, a reference
-		// is made to that collection.
-		return value._observe()
-	} else if (value instanceof Map) {
-		let result = new ObsMap()
-		value.forEach((v,k) => {
-			let d = valueToData(v)
-			if (d!==undefined) result.rawSet(k, d)
+
+/**
+ * Renders a live, recursive dump of a proxied data structure (or any value)
+ * into the DOM at the current {@link $} insertion point.
+ *
+ * Uses `<ul>` and `<li>` elements to display object properties and array items.
+ * Updates reactively if the dumped data changes. Primarily intended for debugging purposes.
+ *
+ * @param data - The proxied data structure (or any value) to display.
+ * @returns The original `data` argument, allowing for chaining.
+ * @template T - The type of the data being dumped.
+ *
+ * @example Dumping reactive state
+ * ```typescript
+ * import { $, proxy, dump } from 'aberdeen';
+ *
+ * const state = proxy({
+ *   user: { name: 'Frank', kids: 1 },
+ *   items: ['a', 'b']
+ * });
+ *
+ * $('h2:Live State Dump');
+ * dump(state);
+ *
+ * // Change state later, the dump in the DOM will update
+ * setTimeout(() => { state.user.kids++; state.items.push('c'); }, 2000);
+ * ```
+ */
+export function dump<T>(data: T): T {
+	if (data && typeof data === 'object') {
+		$({text: data instanceof Array ? "<array>" : "<object>"});
+		$('ul', () => {
+			onEach(data as any, (value, key) => {
+				$('li:'+JSON.stringify(key)+": ", () => {
+					dump(value)
+				})
+			})
 		})
-		return result
-	}
-	else if (value instanceof Array) {
-		let result = new ObsArray()
-		for(let i=0; i<value.length; i++) {
-			let d = valueToData(value[i])
-			if (d!==undefined) result.rawSet(i, d)
-		}
-		return result
-	} else if (value.constructor === Object) {
-		// A plain (literal) object
-		let result = new ObsObject()
-		for(let k in value) {
-			let d = valueToData(value[k])
-			if (d!==undefined) result.rawSet(k, d)
-		}
-		return result
 	} else {
-		// Any other type of object (including ObsCollection)
-		return value
+		$({text: JSON.stringify(data)})
 	}
+	return data
 }
 
-function defaultMakeSortKey(store: Store) {
-	return store.index()
-}
+/*
+* Helper functions
+*/
 
 /* c8 ignore start */
-function internalError(code: number) {
-	let error = new Error("Aberdeen internal error "+code)
-	setTimeout(() => { throw error }, 0)
+function internalError(code: number): never {
+	throw new Error("Aberdeen internal error "+code);
 }
 /* c8 ignore end */
 
-function handleError(e: any) {
-	// Throw the error async, so the rest of the rendering can continue
-	setTimeout(() => {throw e}, 0)
-}
-
-class ScopeError extends Error {
-	constructor(mount: boolean) {
-		super(`Operation not permitted outside of ${mount ? "a mount" : "an observe"}() scope`)
+function handleError(e: any, showMessage: boolean) {
+	try {
+		if (onError(e) === false) showMessage = false;
+	} catch (e) {
+		console.error(e);
+	}
+	try {
+		if (showMessage) $('div.aberdeen-error:Error');
+	} catch {
+		// Error while adding the error marker to the DOM. Apparently, we're in
+		// an awkward context. The error should already have been logged by
+		// onError, so let's not confuse things by generating more errors.
 	}
 }
 
 /** @internal */
-export function withEmitHandler(handler: (this: ObsCollection, index: any, newData: DatumType, oldData: DatumType) => void, func: ()=>void) {
-	const oldEmitHandler = ObsCollection.prototype.emitChange
-	ObsCollection.prototype.emitChange = handler
+export function withEmitHandler(handler: (target: TargetType, index: any, newData: DatumType, oldData: DatumType) => void, func: ()=>void) {
+	const oldEmitHandler = emit;
+	emit = handler;
 	try {
-		func()
+		func();
 	} finally {
-		ObsCollection.prototype.emitChange = oldEmitHandler
+		emit = oldEmitHandler;
 	}
 }
 
-/**
- * Run a function, while *not* causing reactive effects for any changes it makes to `Store`s.
- * @param func The function to be executed once immediately.
- */
-export function inhibitEffects(func: () => void) {
-	withEmitHandler(() => {}, func)
-}
-
 // @ts-ignore
 // c8 ignore next
 if (!String.prototype.replaceAll) String.prototype.replaceAll = function(from, to) { return this.split(from).join(to) }
+declare global {
+	interface String {
+		replaceAll(from: string, to: string): string;
+	}
+}