aberdeen 0.4.0 → 0.5.0

package/src/aberdeen.ts

@@ -1,2185 +1,2289 @@
-
+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> = [] // When not empty, a runQueue is scheduled or currently running.
-let queueIndex = 0 // This first element in queueArray that still needs to be processed.
-let queueSet: Set<QueueRunner> = new Set() // Contains the subset of queueArray at index >= queueIndex.
-let queueOrdered = true // Set to `false` when `queue()` appends a runner to `queueArray` that should come before the previous last item in the array. Will trigger a sort.
+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 showCreateTransitions = false // Set to `true` only when creating top level elements in response to `Store` changes, triggering `create` transitions.
-
+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)
-}
-
-/**
- * Normally, changes to `Store`s are reacted to asynchronously, in an (optimized) 
- * batch, after a timeout of 0s. Calling `runQueue()` will do so immediately
- * and synchronously. Doing so may be helpful in cases where you need some DOM
- * modification to be done synchronously.
- *
- * This function is re-entrant, meaning it is safe to call `runQueue` from a
- * function that is called due to another (automatic) invocation of `runQueue`.
- */
-export function runQueue(): void {
-	showCreateTransitions = true
-	for(; 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
-		while(queueIndex < batchEndIndex && queueOrdered) {
-			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++
 	}
-
-	queueIndex = 0
-	queueArray.length = 0
-	runQueueDepth = 0
-	showCreateTransitions = false
+	sortedQueue.add(runner);
 }
 
-
-let domWaiters: (() => void)[] = []
-let domInReadPhase = false
-
 /**
- * A promise-like object that you can `await`. It will resolve *after* the current batch
- * of DOM-write operations has completed. This is the best time to retrieve DOM properties
- * that dependent on a layout being completed, such as `offsetHeight`.
+ * 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.
- * 
- * See `transitions.js` for some examples.
- */
-
-export const DOM_READ_PHASE = {
-	then: function(fulfilled: () => void) {
-		if (domInReadPhase) fulfilled()
-		else {
-			if (!domWaiters.length) queue(DOM_PHASE_RUNNER)
-			domWaiters.push(fulfilled)
-		}
-		return this
-	}
-}
-/**
- * A promise-like object that you can `await`. It will resolve *after* the current 
- * DOM_READ_PHASE has completed (if any) and after any DOM triggered by Aberdeen
- * have completed. This is a good time to do little manual DOM tweaks that depend
- * on a *read phase* first, like triggering transitions.
+ * This can be useful in specific scenarios where you need the DOM to be updated
+ * synchronously.
  *
- * 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.
+ * 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.
  *
- * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM write
- * operations happen after all DOM reads in the same queue cycle, minimizing layout thrashing.
+ * @example
+ * ```typescript
+ * const data = proxy("before");
+ * 
+ * $({text: data});
+ * console.log(1, document.body.innerHTML); // before
  *
- * See `transitions.js` for some examples.
+ * // Make an update that should cause the DOM to change.
+ * data.value = "after";
+ *
+ * // Normally, the DOM update would happen after a timeout.
+ * // But this causes an immediate update:
+ * runQueue();
+ * 
+ * console.log(2, document.body.innerHTML); // after
+ * ```
  */
-
-export const DOM_WRITE_PHASE = {
-	then: function(fulfilled: () => void) {
-		if (!domInReadPhase) fulfilled()
-		else {
-			if (!domWaiters.length) queue(DOM_PHASE_RUNNER)
-			domWaiters.push(fulfilled)
-		}
-		return this
-	}
-}
-
-const DOM_PHASE_RUNNER = {
-	_queueOrder: 99999,
-	_queueRun: function() {
-		let waiters = domWaiters
-		domWaiters = []
-		domInReadPhase = !domInReadPhase
-		for(let waiter of waiters) {
-			try {
-				waiter()
-			} catch(e) {
-				console.error(e)
-			}
-		}
-	}
+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 {
-	// The last child node or scope within this scope that has the same `parentElement`
-	_lastChild: Node | Scope | undefined
+// Each new scope gets a lower prio than all scopes before it, by decrementing
+// this counter.
+let lastPrio = 0;
 
-	// 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}> = []
+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;
 
-	// Set to true after the scope has been cleaned, causing any spurious reruns to
-	// be ignored.
-	_isDead: boolean = false
+	abstract onChange(index: any, newData: DatumType, oldData: DatumType): void;
+	abstract queueRun(): void;
+	
+	abstract getLastNode(): Node | undefined;
+	abstract getPrecedingNode(): Node | undefined;
+	abstract delete(): void;
 
-	constructor(
-		public _parentElement: Element | undefined,
-		// The node or scope right before this scope that has the same `parentElement`
-		public _precedingSibling: Node | Scope | undefined,
-		// 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.
-		public _queueOrder: number,
-	) {
-	}
+	remove() {
+		// Remove any nodes
+		const lastNode = this.getLastNode();
+		if (lastNode) removeNodes(lastNode, this.getPrecedingNode());
 
-	// 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
-		}
+		// Run any cleaners
+		this.delete();
 	}
 
-	// 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)
-		}
-	}
+	// toString(): string {
+	// 	return `${this.constructor.name}`
+	// }
+}
 
-	_addNode(node: Node) {
-		let prevNode = this._findLastNode() || this._findPrecedingNode()
+/**
+ * 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<{delete: (scope: Scope) => void} | (() => void)>;
 
-		this._parentElement!.insertBefore(node, prevNode ? prevNode.nextSibling : this._parentElement!.firstChild)
-		this._lastChild = node
+	constructor(cleaners: Array<{delete: (scope: Scope) => void} | (() => void)> = []) {
+		super();
+		this.cleaners = cleaners;
 	}
 
-	_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
+	lastChild: Node | Scope | undefined;
 
-				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
-				}
-			}
-		}
+	// Should be subclassed in most cases..
+	redraw() {};
 
-		// run cleaners
-		this._clean()
+	abstract parentElement: Element;
+
+	getLastNode(): Node | undefined {
+		return findLastNodeInPrevSiblings(this.lastChild);
 	}
 
-	_clean() {
-		this._isDead = true
-		for(let cleaner of this._cleaners) {
-			cleaner._clean(this)
+	/**
+	 * 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
+		this.cleaners.length = 0;
+		sortedQueue?.remove(this); // This is very fast and O(1) when not queued
+
+		// 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
+	}
+
+	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 {
+
+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)
-		if (renderer) 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;
+		}
 
-	/* c8 ignore start */
-	_renderer() {
-		// Should be overriden by a subclass or the constructor
-		internalError(14)
+		// 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);
 	}
-	/* c8 ignore stop */
 
-	_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, true)
+			handleError(e, true);
 		}
-		currentScope = savedScope
+		currentScope = savedScope;
 	}
+}
 
-	_install() {
-		if (showCreateTransitions) {
-			showCreateTransitions = false
-			this._update()
-			showCreateTransitions = true
-		} else {
-			this._update()
-		}
-		// Add it to our list of cleaners. Even if `childScope` currently has
-		// no cleaners, it may get them in a future refresh.
-		currentScope!._cleaners.push(this)
+
+class RootScope extends ContentScope {
+	parentElement = document.body;
+	getPrecedingNode(): Node | undefined {
+		return undefined;
 	}
 }
 
-/**
- * This could have been done with a SimpleScope, but then we'd have to draw along an instance of
- * that as well as a renderer function that closes over quite a few variables, which probably
- * wouldn't be great for the performance of this common feature.
- */
-class SetArgScope extends SimpleScope {
+class MountScope extends ContentScope {
 	constructor(
-		parentElement: Element | undefined,
-		precedingSibling: Node | Scope | undefined,
-		queueOrder: number,
-		private _key: string,
-		private _value: Store,
+		// The parent DOM element we'll add our child nodes to
+		public parentElement: Element,
+		// The function that 
+		public renderer: () => any,
 	) {
-		super(parentElement, precedingSibling, queueOrder)
+		super();
+		this.redraw();
+		currentScope.cleaners.push(this)
 	}
 
-	_renderer() {
-		applyArg(this._parentElement as Element, this._key, this._value.get())
+	redraw() {
+		RegularScope.prototype.redraw.call(this);
 	}
-}
 
-let immediateQueue: Set<Scope> = new Set()
+	getPrecedingNode(): Node | undefined {
+		return undefined;
+	}
 
-class ImmediateScope extends SimpleScope {
-	_onChange(index: any, newData: DatumType, oldData: DatumType) {
-		immediateQueue.add(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();
 	}
-}
 
-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
-		}
+	remove() {
+		this.delete();
 	}
 }
 
-class IsEmptyObserver implements Observer {
-	scope: Scope
-	collection: ObsCollection
-	count: number
-	triggerCount: boolean
 
-	constructor(scope: Scope, collection: ObsCollection, triggerCount: boolean) {
-		this.scope = scope
-		this.collection = collection
-		this.triggerCount = triggerCount
-		this.count = collection._getCount()
-
-		collection._addObserver(ANY_INDEX, this)
-		scope._cleaners.push(this)
-	}
-
-	_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 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();
 		}
-	}
-
-	_clean() {
-		this.collection._removeObserver(ANY_INDEX, this)
+		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;
+
+		this.parent.byIndex.set(this.itemIndex, this);
+
+		// 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;
+
+		// Don't register to be cleaned by parent scope, as the OnEachScope will manage this for us (for efficiency)
+
+		if (topRedraw) topRedrawScope = this;
+		this.redraw();
 	}
 
-	// toString(): string {
-	// 	return `OnEachItemScope(itemIndex=${this.itemIndex} parentElement=${this.parentElement} parent=${this.parent} precedingSibling=${this.precedingSibling} lastChild=${this.lastChild})`
-	// }
+	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();
+	}
 
-	_queueRun() {
-		/* c8 ignore next */
-		if (currentScope) internalError(4)
+	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();
+	}
 
-		if (this._isDead) return
-		this._remove()
-		this._isDead = false
+	getActualLastNode(): Node | undefined {
+		let child = this.lastChild;
 
-		this._update()
+		while(child && child !== this) {
+			if (child instanceof Node) return child;
+			const node = child.getLastNode();
+			if (node) return node;
+			child = child.getPrecedingNode();
+		}
 	}
 
-	_update() {
+	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());
+		}
+
+		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.
-		// 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)
+		// 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]);
 
-		let sortKey
+		// Since makeSortKey may get() the Store, we'll need to set currentScope first.
+		let savedScope = currentScope;
+		currentScope = this;
+		
+		let sortKey : undefined | string | number;
 		try {
-			sortKey = this._parent._makeSortKey(itemStore)
+			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`.
+
+			if (sortKey != null) this.parent.renderer(value, this.itemIndex);
 		} catch(e) {
-			handleError(e, false)
+			handleError(e, sortKey!=null);
 		}
 
-		let oldSortStr: string = this._sortStr
-		let newSortStr: string = sortKey==null ? '' : sortKeyToString(sortKey)
+		currentScope = savedScope;
+	}
 
-		if (oldSortStr!=='' && oldSortStr!==newSortStr) {
-			this._parent._removeFromPosition(this)
-		}
+	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);
+	}
 
-		this._sortStr = newSortStr
-		if (newSortStr!=='') {
-			if (newSortStr !== oldSortStr) {
-				this._parent._insertAtPosition(this)
-			}
-			try {
-				this._parent._renderer(itemStore)
-			} catch(e) {
-				handleError(e, true)
-			}
+	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());
+
+			this.parent.sortedSet.remove(this);
+			this.sortKey = undefined;
 		}
 
-		currentScope = savedScope
+		this.delete();
 	}
 }
 
+function addNode(node: Node) {
+	const parentEl = currentScope.parentElement;
+	const prevNode = currentScope.getInsertAfterNode();
+	parentEl.insertBefore(node, prevNode ? prevNode.nextSibling : parentEl.firstChild);
+	currentScope.lastChild = node;
+}
+
 
 /**
- * This global is set during the execution of a `Scope.render`. It is used by
- * functions like `$` and `clean`.
- */
-let currentScope: Scope | undefined
+* 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;
+
+/**
+* A special Node observer index to subscribe to any value in the map changing.
+*/
+const ANY_SYMBOL = Symbol('any');
 
 /**
- * A special Node observer index to subscribe to any value in the map changing.
+ * When our proxy objects need to lookup `obj[TARGET_SYMBOL]` it returns its
+ * target, to be used in our wrapped methods.
  */
-const ANY_INDEX = {}
+const TARGET_SYMBOL = Symbol('target');
 
 
-type DatumType = string | number | Function | boolean | null | undefined | ObsMap | ObsArray
+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
 
+function subscribe(target: any, index: symbol|string|number, observer: Scope | ((index: any, newData: DatumType, oldData: DatumType) => void) = currentScope) {
+	if (observer === ROOT_SCOPE || peeking) return;
 
-/** @internal */
-export abstract class ObsCollection {
-	_observers: Map<any, Set<Observer>> = new Map()
+	let byTarget = subscribers.get(target);
+	if (!byTarget) subscribers.set(target, byTarget = new Map());
 
-	// toString(): string {
-	// 	return JSON.stringify(peek(() => this.getRecursive(3)))
-	// }
+	// 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;
 
-	_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)
-			}
-		}
-	}
+	let byIndex = byTarget.get(index);
+	if (!byIndex) byTarget.set(index, byIndex = new Set());
+
+	if (byIndex.has(observer)) return;
 
-	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
+	byIndex.add(observer);
+	
+	if (observer === currentScope) {
+		currentScope.cleaners.push(byIndex);
+	} else {
+		currentScope.cleaners.push(function() {
+			byIndex.delete(observer);
+		});
+	}
 }
 
-/** @internal */
-class ObsArray extends ObsCollection {
-	_data: Array<DatumType> = []
+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;
 
-	_getType() {
-		return "array"
-	}
-
-	_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
-	}
-
-	rawGet(index: any): DatumType {
-		return this._data[index]
-	}
-
-	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()
-		}
-	}
+/**
+ * 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;
 
-	_merge(newValue: any, deleteMissing: boolean): boolean {
-		if (!(newValue instanceof Array)) {
-			return false
-		}
-		// newValue is an array
+	new OnEachScope(target, render, makeKey);
+}
 
-		for(let i=0; i<newValue.length; i++) {
-			this._setIndex(i, newValue[i], deleteMissing)
-		}
+function isObjEmpty(obj: object): boolean {
+	for(let k in obj) return false;
+	return true;
+}
 
-		// 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
+/**
+ * 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;
 	}
+}
 
+/** @private */
+export interface ValueRef<T> {
+	value: T;
+}
 
-	_iterateIndexes(scope: OnEachScope): void {
-		for(let i=0; i<this._data.length; i++) {
-			if (this._data[i]!==undefined) {
-				scope._addChild(i)
-			}	
-		}
-	}
+/**
+ * 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>
 
-	_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)}`)
-	}
+ * // 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');
 
-	_getCount() {
-		return this._data.length
-	}
+	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;
 }
 
 /** @internal */
-class ObsMap extends ObsCollection {
-	data: Map<any, DatumType> = new Map()
-
-	_getType() {
-		return "map"
-	}
-
-	_getRecursive(depth: number) {
-		if (currentScope) {
-			if (this._addObserver(ANY_INDEX, currentScope)) {
-				currentScope._cleaners.push(this)
+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: 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)
-		}
 	}
+}
+let emit = defaultEmitHandler;
 
-	_merge(newValue: any, deleteMissing: boolean): boolean {
-		if (!(newValue instanceof Map)) {
-			return false
-		}
 
-		// Walk the pairs of the new value map
-		newValue.forEach((v: any, k: any) => {
-			this._setIndex(k, v, deleteMissing)
-		})
-
-		if (deleteMissing) {
-			this.data.forEach((v: DatumType, k: any) => {
-				if (!newValue.has(k)) this._setIndex(k, undefined, false)
-			})
+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
-	}
-
-	_iterateIndexes(scope: OnEachScope): void {
-		this.data.forEach((_, itemIndex) => {
-			scope._addChild(itemIndex)
-		})
-	}
-
-	_normalizeIndex(index: any): any {
-		return index
-	}
-
-	_getCount() {
-		return this.data.size
-	}
- }
-
- /** @internal */
- class ObsObject extends ObsMap {
-	_getType() {
-		return "object"
-	}
+		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;
 
-	_getRecursive(depth: number) {
-		if (currentScope) {
-			if (this._addObserver(ANY_INDEX, currentScope)) {
-				currentScope._cleaners.push(this)
+			// 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]);
 			}
-		}
-		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
-		}
+		} else {
+			const intProp = parseInt(prop)
+			if (intProp.toString() === prop) prop = intProp;
 
-		// Walk the pairs of the new value object
-		for(let k in newValue) {
-			this._setIndex(k, newValue[k], deleteMissing)
+			target[prop] = newData;
+			emit(target, prop, newData, oldData);
 		}
-
-		if (deleteMissing) {
-			this.data.forEach((v: DatumType, k: any) => {
-				if (!newValue.hasOwnProperty(k)) this._setIndex(k, undefined, false)
-			})
+		if (target.length !== oldLength) {
+			emit(target, 'length', target.length, oldLength);
 		}
-		
-		return true
+		runImmediateQueue();
 	}
-
-	_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)}`)
-	}
-
-	_getCount() {
-		let cnt = 0
-		for(let key of this.data) cnt++
-		return cnt
-	}
- }
-
-
-
- const DETACHED_KEY: any = {}
-
- /*
- * A data store that automatically subscribes the current Scope to updates
- * whenever data is read from it.
- *
- * 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.
- */
- 
-export interface Store {
-	/**
-	 * 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 [[`isDetached`]] method will return `true`.
-	 * In case something other than a collection is encountered, an error is thrown.
-	 */
-	(...path: any[]): Store
+	return true;
 }
 
-export class Store {
-	/** @internal */
-	// @ts-ignore
-	private _collection: ObsCollection
-	/** @internal */
-	private _idx: any
-	/** @internal */
-	private _virtual: string[] | undefined
-
-	/**
-	 * Create a new `Store` with `undefined` as its initial value.
-	 */
-	constructor()
-	/**
-	 * Create a new `Store`.
-	 * @param value The initial value. Plain objects, arrays and `Map`s, are converted
-	 * into a tree of nested `Store`s. When another `Store` is included somewhere in that
-	 * input tree, a reference is made.
-	 */
-	constructor(value: any)
-	
-	/** @internal */
-	constructor(collection: ObsCollection, index: any)
-
-	/** @internal */
-	constructor(value: any = undefined, index: any = undefined) {
-		/**
-		 * Create and return a new `Store` that represents the subtree at `path` of
-		 * the current `Store`.
-		 * 
-		 * The `path` is only actually resolved when this new `Store` is first used,
-		 * and how this is done depends on whether a read or a write operation is 
-		 * performed. Read operations will just use an `undefined` value when a
-		 * subtree that we're diving into does not exist. Also, they'll subscribe
-		 * to changes at each level of the tree indexed by `path`.
-		 * 
-		 * Write operations will create any missing subtrees as objects. They don't
-		 * subscribe to changes (as they are the ones causing the changes). 
-		 * 
-		 * Both read and write operations will throw an error if, while resolving
-		 * `path`, they encounters a non-collection data type (such as a number)
-		 */
-		const ref: Store = function(...path: any): Store {
-			const result = new Store(ref._collection, ref._idx)
-			if (path.length || ref._virtual) {
-				result._virtual = ref._virtual ? ref._virtual.concat(path) : path
-			}
-			return result
-		} as Store
-
-		Object.setPrototypeOf(ref, Store.prototype)
-		if (index===undefined) {
-			ref._collection = new ObsArray()
-			ref._idx = 0
-			if (value!==undefined) {
-				ref._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")
-			}
-			ref._collection = value
-			ref._idx = index
+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;
 		}
-		// @ts-ignore
-		return ref
-	}
-
-	/**
-	 * @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')
-	 * subStore.get() // 123
-	 * subStore.index() // 'x'
-	 * ```
-	 */
-	index() {
-		return this._idx
-	}
-
-	/** @internal */
-	_clean(scope: Scope) {
-		this._collection._removeObserver(this._idx, scope)
-	}
-
-	/**
-	 * Retrieve the value for store, subscribing the observe scope to changes.
-	 *
-	 * @param depth 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.
-     *
-	 * @returns The resulting value (or `undefined` if the `Store` does not exist). 
-	 */
-	get(depth: number = 0): any {
-		let value = this._observe()
-		return value instanceof ObsCollection ? value._getRecursive(depth-1) : value
-	}
+		subscribe(target, subProp);
+		return optProxy(target[prop]);
+	},
+	set: arraySet,
+	deleteProperty(target: any, prop: string|symbol) {
+		return arraySet(target, prop, undefined);
+	},
+};
 
-	/** 
-	 * Exactly like {@link Store.get}, except that when executed from an observe scope,
-	 * we will not subscribe to changes in the data retrieved data.
-	 */
-	peek(depth: number = 0): any {
+const proxyMap = new WeakMap<TargetType, /*Proxy*/TargetType>();
 
-		let savedScope = currentScope
-		currentScope = undefined
-		let result = this.get(depth)
-		currentScope = savedScope
-		return result
+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;
+}
 
-	/**
-	 * Like {@link Store.get}, but with return type checking.
-	 * 
-	 * @param expectType A string specifying what type the.get 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.
-	 * @returns 
-	 */
-	getTyped(expectType: String, depth: number = 0): any {
-		let value = this._observe()
-		let type = (value instanceof ObsCollection) ? value._getType() : (value===null ? "null" : typeof value)
-		if (type !== expectType) throw new TypeError(`Expecting ${expectType} but got ${type}`)
-		return value instanceof ObsCollection ? value._getRecursive(depth-1) : value
-	}
-
-	/**
-	 * @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(): number { return <number>this.getTyped('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(): string { return <string>this.getTyped('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(): boolean { return <boolean>this.getTyped('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(): (Function) { return <Function>this.getTyped('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(depth: number = 0): any[] { return <any[]>this.getTyped('array', depth) }
-	/**
-	 * @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(depth: number = 0): object { return <object>this.getTyped('object', depth) }
-	/**
-	 * @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(depth: number = 0): Map<any,any> { return <Map<any,any>>this.getTyped('map', depth) }
-
-
-	/**
-	 * Like {@link Store.get}, but with a 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 = new Store({x: 42})
-	 * store('x').getOr(99) // 42
-	 * store('y').getOr(99) // 99
-	 * store('x').getOr('hello') // throws TypeError (because 42 is not a string)
-	 * ```
-	 */
-	getOr<T>(defaultValue: T): T {
-		let value = this._observe()
-		if (value===undefined) return defaultValue
-
-		let expectType: string = typeof defaultValue
-		if (expectType==='object') {
-			if (defaultValue instanceof Map) expectType = 'map'
-			else if (defaultValue instanceof Array) expectType = 'array'
-			else if (defaultValue === null) expectType = 'null'
-		}
-		let type = (value instanceof ObsCollection) ? value._getType() : (value===null ? "null" : typeof value)
-		if (type !== expectType) throw new TypeError(`Expecting ${expectType} but got ${type}`)
-		return (value instanceof ObsCollection ? value._getRecursive(-1) : value) as T
-	}
-
-	/**
-	 * Checks if the collection held in `Store` is empty, and subscribes the current scope to changes of the emptiness of this collection.
-	 *
-	 * @returns When the 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(): boolean {
-		let value = this._observe()
-		if (value instanceof ObsCollection) {
-			if (currentScope) {
-				let observer = new IsEmptyObserver(currentScope, value, false)
-				return !observer.count
-			} else {
-				return !value._getCount()
-			}
-		} 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 collection held in Store, and subscribes the current scope to changes in this count.
-	 *
-	 * @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(): number {
-		let value = this._observe()
-		if (value instanceof ObsCollection) {
-			if (currentScope) {
-				let observer = new IsEmptyObserver(currentScope, value, true)
-				return observer.count
-			} else {
-				return value._getCount()
-			}
-		} 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`.
-	 *
-	 * @returns Possible options: "undefined", "null", "boolean", "number", "string", "function", "array", "map" or "object".
-	 */
-	getType(): string {
-		let value = this._observe()
-		return (value instanceof ObsCollection) ? value._getType() : (value===null ? "null" : typeof value)
-	}
-
-	/**
-	 * Returns a new `Store` that will always hold either the value of `whenTrue` or the value
-	 * of `whenFalse` depending on whether the original `Store` is truthy or not.
-	 * 
-	 * @param whenTrue The value set to the return-`Store` while `this` is truthy. This can be
-	 *     any type of value. If it's a `Store`, the return-`Store` will reference the same 
-	 *     data (so *no* deep copy will be made).
-	 * @param whenFalse Like `whenTrue`, but for falsy values (false, undefined, null, 0, "").
-	 * @returns A store holding the result value. The value will keep getting updated while
-	 * the observe context from which `if()` was called remains active.
-	 */
-	if(whenTrue: any[], whenFalse?: any[]): Store {
-		const result = new Store()
-		observe(() => {
-			const value = this.get() ? whenTrue : whenFalse
-			result.set(value)
-		})
-		return result
-	}
-
-	/**
-	 * Sets the `Store` value to the given argument.
-	 *
-	 * 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`.
-	 *
-	 * @returns The `Store` itself, for chaining other methods.
-     *
-	 * @example
-	 * ```
-	 * let store = new Store() // Value is `undefined`
-	 *
-	 * store.set(6)
-	 * store.get() // 6
-	 *
-	 * store.set({}) // Change  value to an empty object
-	 * store('a', 'b', 'c').set('d') // Create parent path as objects
-	 * store.get() // {x: 6, a: {b: {c: 'd'}}}
-	 *
-	 * store.set(42) // Overwrites all of the above
-	 * store.get() // 42
-	 *
-	 * store('x').set(6) // Throw Error (42 is not a collection)
-	 * ```
-	 */
-	set(newValue: any): Store {
-		this._materialize(true)
-		this._collection._setIndex(this._idx, newValue, true)
-		runImmediateQueue()
-		return this
-	}
-
-	/** @internal */
-	_materialize(forWriting: boolean): boolean {
-		if (!this._virtual) return true
-		let collection = this._collection
-		let idx = this._idx
-		for(let i=0; i<this._virtual.length; i++) {
-			if (!forWriting && currentScope) {
-				if (collection._addObserver(idx, currentScope)) {
-					currentScope._cleaners.push(this)
-				}
-			}
-			let value = collection.rawGet(idx)
-			if (!(value instanceof ObsCollection)) {
-				// Throw an error if trying to index a primitive type
-				if (value!==undefined) throw new Error(`While resolving ${JSON.stringify(this._virtual)}, found ${JSON.stringify(value)} at index ${i} instead of a collection.`)
-				// For reads, we'll just give up. We might reactively get another shot at this.
-				if (!forWriting) return false
-				// For writes, create a new collection.
-				value = new ObsObject()
-				collection.rawSet(idx, value)
-				collection.emitChange(idx, value, undefined)	
-			}
-			collection = value
-			const prop = this._virtual[i]
-			idx = collection._normalizeIndex(prop)
-		}
-		this._collection = collection
-		this._idx = idx
-		delete this._virtual
-		return true
-	}
-
-	/**
-	 * 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.
-     *
- 	 * @returns The `Store` itself, for chaining other methods.
-	 *
-	 * @example
-	 * ```
-	 * let store = new Store({a: {x: 1}})
-	 * store.merge({a: {y: 2}, b: 3})
-	 * store.get() // {a: {x: 1, y: 2}, b: 3}
-	 * ```
-	 */
-	merge(mergeValue: any): Store {
-		this._materialize(true)
-		this._collection._setIndex(this._idx, mergeValue, false)
-		runImmediateQueue()
-		return this
-	}
-
-	/**
-	 * 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)
-     *
- 	 * @returns The `Store` itself, for chaining other methods.
-	 *
-	 * @example
-	 * ```
-	 * let store = new Store({a: 1, b: 2})
-	 * store('a').delete()
-	 * store.get() // {b: 2}
-	 *
-	 * store = new Store(['a','b','c'])
-	 * store(1).delete()
-	 * store.get() // ['a', undefined, 'c']
-	 * store(2).delete()
-	 * store.get() // ['a']
-	 * store.delete()
-	 * store.get() // undefined
-	 * ```
-	 */
-	delete(): Store {
-		this._materialize(true)
-		this._collection._setIndex(this._idx, undefined, true)
-		runImmediateQueue()
-		return this
-	}
-
-	/**
-	 * 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.
-	 *
-	 * @returns The index at which the item was appended.
-	 * @throws TypeError when the store contains a primitive data type.
-	 * 
-	 * @example
-	 * ```
-	 * let store = new Store()
-	 * store.push(3) // Creates the array
-	 * store.push(6)
-	 * store.get() // [3,6]
-	 *
-	 * store = new Store({myArray: [1,2]})
-	 * store('myArray').push(3)
-	 * store.get() // {myArray: [1,2,3]}
-	 * ```
-	 */
-	push(newValue: any): number {
-		this._materialize(true)
-
-		let obsArray = this._collection.rawGet(this._idx)
-		if (obsArray===undefined) {
-			obsArray = new ObsArray()
-			this._collection._setIndex(this._idx, obsArray, true)
-		} else if (!(obsArray instanceof ObsArray)) {
-			throw new TypeError(`push() is only allowed for an array or undefined (which would become an array)`)
-		}
-
-		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.
- 	 * @returns The `Store` itself, for chaining other methods.
-	 */
-	modify(func: (value: any) => any): Store {
-		this.set(func(this.peek()))
-		return this
-	}
-
-	/** @internal */
-	_observe() {
-		if (!this._materialize(false)) return undefined
-		if (currentScope) {
-			if (this._collection._addObserver(this._idx, currentScope)) {
-				currentScope._cleaners.push(this)
-			}
-		}
-		return this._collection.rawGet(this._idx)
-	}
+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>;
 
-	/**
-	 * 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 renderer The function to be called for each item. It receives the item's `Store` object as its only argument.
-	 * @param makeSortKey An optional function that, given an items `Store` object, returns a value to be sorted on.
-	 *   This value can be a number, a string, or an array containing a combination of both. When undefined is returned,
-	 *   the item is *not* rendered. If `makeSortKey` is not specified, the output will be sorted by `index()`.
-	 */
-	onEach(renderer: (store: Store) => void, makeSortKey: (store: Store) => any = defaultMakeSortKey): void {
-		if (!currentScope) { // Do this in a new top-level scope
-			_mount(undefined, () => this.onEach(renderer, makeSortKey), SimpleScope)
-			return
-		}
+/**
+ * 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
+ * ```
+ *
+ * @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});
+}
 
-		let val = this._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)
+/**
+ * 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;
+}
 
-			currentScope._cleaners.push(onEachScope)
-			currentScope._lastChild = onEachScope
+let onDestroyMap: WeakMap<Node, string | Function | true> = new WeakMap();
 
-			onEachScope._renderInitial()
-		} else if (val!==undefined) {
-			throw new Error(`onEach() attempted on a value that is neither a collection nor undefined`)
-		}
-	}
+function destroyWithClass(element: Element, cls: string) {
+	const classes = cls.split('.').filter(c=>c);
+	element.classList.add(...classes);
+	setTimeout(() => element.remove(), 2000);
+}
 
-	/**
-	 * Derive a new `Store` from this `Store`, by reactively passing its value
-	 * through the specified function.
-	 * @param func Your function. It should accept a the input store's value, and return
-	 *   a result to be reactively set to the output store.
-	 * @returns The output `Store`.
-	 * @example
-	 * ```javascript
-	 * const store = new Store(21)
-	 * const double = store.derive(v => v*2)
-	 * double.get() // 42
-	 * 
-	 * store.set(100)
-	 * runQueue() // Or after a setTimeout 0, due to batching
-	 * double.get() // 200
-	 * ```
-	 */
-	derive(func: (value: any) => any): Store {
-		let out = new Store()
-		observe(() => {
-			out.set(func(this.get()))
-		})
-		return out
-	}
+/**
+ * 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;
 
-	/**
-	 * 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 array/map/object `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()
-		observe(() => {
-			let t = this.getType()
-			out.set(t==='array' ? [] : (t==='object' ? {} : new Map()))
-			this.onEach((item: Store) => {
-				let value = func(item)
-				if (value !== undefined) {
-					let key = item.index()
-					const ref = out(key)
-					ref.set(value)
-					clean(() => {
-						ref.delete()
-					})
-				}
-			})
-		})			
-		return out
-	}
+/**
+ * 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;
+}
 
-	/**
-	 * 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 refs: Array<Store> = []
-			if (result.constructor === Object) {
-				for(let key in result) {
-					const ref = out(key)
-					ref.set(result[key])
-					refs.push(ref)
+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);
 				}
-			} else if (result instanceof Map) {
-				result.forEach((value: any, key: any) => {
-					const ref = out(key)
-					ref.set(value)
-					refs.push(ref)
-				})
+				dst.length = srcLen;
+				emit(dst, 'length', srcLen, dstLen);
 			} else {
-				return
+				dst.length = srcLen;
 			}
-			if (refs.length) {
-				clean(() => {
-					for(let ref of refs) {
-						ref.delete()
+		}
+    } 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);
 					}
-				})
+				}
 			}
-		})
-		return out	
-	}
+		}
+    }
+}
 
-	/**
-	* Dump a live view of the `Store` tree as HTML text, `ul` and `li` nodes at
-	* the current mount position. Meant for debugging purposes.
- 	* @returns The `Store` itself, for chaining other methods.
-	*/
-	dump(): Store {
-		let type = this.getType()
-		if (type === 'array' || type === 'object' || type === 'map') {
-			$({text: `<${type}>`})
-			$('ul', () => {
-				this.onEach((sub: Store) => {
-					$('li:'+JSON.stringify(sub.index())+": ", () => {
-						sub.dump()
-					})
-				})
-			})
-		} else {
-			$({text: JSON.stringify(this.get())})
+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;
+		}
+		
+		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 this
+		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)
 	}
 }
 
 
-
-let onDestroyMap: WeakMap<Node, string | Function | true> = new WeakMap()
-
-function destroyWithClass(element: Element, cls: string) {
-	element.classList.add(cls)
-	setTimeout(() => element.remove(), 2000)
+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);
+		}
+		if (prop==="value") {
+			return (target.proxy as any)[target.index];
+		}
+	},
+	set(target: any, prop: any, value: any) {
+		if (prop==="value") {
+			(target.proxy as any)[target.index] = value;
+			return true;
+		}
+		return false;
+	},
+};
 
 
-function addLeafNode(deepEl: Element, node: Node) {
-	if (deepEl === (currentScope as Scope)._parentElement) {
-		currentScope!._addNode(node)
-	} else {
-		deepEl.appendChild(node)
-	}
+/**
+ * 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]>;
 }
 
 
-function applyBinding(_el: Element, _key: string, store: Store) {
-	if (store==null) return
-	if (!(store instanceof Store)) throw new Error(`Unexpect bind-argument: ${JSON.parse(store)}`)
-		const el = _el as HTMLInputElement
-	let onStoreChange: (value: any) => void
-	let onInputChange: () => void
-	let type = el.getAttribute('type')
-	let value = store.peek()
+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) store.set(el.checked)
-		onStoreChange = value => el.checked = value
-		onInputChange = () => store.set(el.checked)
+		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) store.set(el.value)
-		onStoreChange = value => el.checked = (value === el.value)
+		if (value === undefined && el.checked) target.value = el.value;
+		onProxyChange = () => el.checked = (target.value === el.value);
 		onInputChange = () => {
-			if (el.checked) store.set(el.value)
+			if (el.checked) target.value = 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
-		}
+		onInputChange = () => target.value = type==='number' || type==='range' ? (el.value==='' ? null : +el.value) : el.value;
+		if (value === undefined) onInputChange();
+		onProxyChange = () => el.value = target.value
 	}
-	observe(() => {
-		onStoreChange(store.get())
-	})
-	el.addEventListener('input', onInputChange)
+	observe(onProxyChange);
+	el.addEventListener('input', onInputChange);
 	clean(() => {
-		el.removeEventListener('input', onInputChange)
-	})
+		el.removeEventListener('input', onInputChange);
+	});
 }
 
-
-const SPECIAL_PROPS: {[key: string]: (el: Element, value: any) => void} = {
-	create: function(el: Element, value: any) {
-		if (!showCreateTransitions) return
+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)
+			value(el);
 		} else {
-			el.classList.add(value);
-			(async function(){
-				await DOM_READ_PHASE;
-				(el as HTMLElement).offsetHeight;
-				await DOM_WRITE_PHASE;
-				el.classList.remove(value)
-			})()
+			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(deepEl: Element, value: any) {
-		onDestroyMap.set(deepEl, value)
+	destroy: function(value: any) {
+		const el = currentScope.parentElement;
+		onDestroyMap.set(el, value);
 	},
-	html: function(deepEl: Element, value: any) {
-		if (!value) return
-		let tmpParent = document.createElement(deepEl.tagName)
-		tmpParent.innerHTML = ''+value
-		while(tmpParent.firstChild) addLeafNode(deepEl, tmpParent.firstChild)
+	html: function(value: any) {
+		let tmpParent = document.createElement(currentScope.parentElement.tagName);
+		tmpParent.innerHTML = ''+value;
+		while(tmpParent.firstChild) addNode(tmpParent.firstChild);
 	},
-	text: function(deepEl: Element, value: any) {
-		if (value!=null) addLeafNode(deepEl, document.createTextNode(value))
+	text: function(value: any) {
+		addNode(document.createTextNode(value));
 	},
-	element: function(deepEl: Element, value: any) {
-		if (value==null) return
-		if (!(value instanceof Node)) throw new Error(`Unexpect element-argument: ${JSON.parse(value)}`)
-		addLeafNode(deepEl, value)
+	element: function(value: any) {
+		if (!(value instanceof Node)) throw new Error(`Unexpected element-argument: ${JSON.parse(value)}`);
+		addNode(value);
 	},
 }
 
 
 
 /**
- * Modifies the *parent* DOM element in the current reactive scope, or adds
- * new DOM elements to it.
- * 
- * @param args - Arguments that define how to modify/create elements.
- * 
- * ### String arguments
- * Create new elements with optional classes and text content:
- * ```js
- * $('div.myClass')              // <div class="myClass"></div>
- * $('span.c1.c2:Hello')         // <span class="c1 c2">Hello</span>
- * $('p:Some text')              // <p>Some text</p>
- * $('.my-thing')                // <div class="my-thing"></div>
- * $('div', 'span', 'p.cls')     // <div><span<p class="cls"></p></span></div>
- * $(':Just some text!')		 // Just some text! (No new element, just a text node)
- * ```
- * 
- * ### Object arguments
- * Set properties, attributes, events and special features:
- * ```js
- * // Classes (dot prefix)
- * $('div', {'.active': true})           // Add class
- * $('div', {'.hidden': false})          // Remove (or don't add) class
- * $('div', {'.selected': myStore})      // Reactively add/remove class
- * 
- * // Styles (dollar prefixed and camel-cased CSS properties)
- * $('div', {$color: 'red'})             // style.color = 'red'
- * $('div', {$marginTop: '10px'})        // style.marginTop = '10px'
- * $('div', {$color: myColorStore})      // Reactively change color
- * 
- * // Events (function values)
- * $('button', {click: () => alert()})   // Add click handler
- * 
- * // Properties (boolean values, `selectedIndex`, `value`)
- * $('input', {disabled: true})          // el.disabled = true
- * $('input', {value: 'test'})           // el.value = 'test'
- * $('select', {selectedIndex: 2})       // el.selectedIndex = 2
- * 
- * // Transitions
- * $('div', {create: 'fade-in'})         // Add class on create
- * $('div', {create: el => {...}})       // Run function on create
- * $('div', {destroy: 'fade-out'})       // Add class before remove
- * $('div', {destroy: el => {...}})      // Run function before remove
- * 
- * // Content
- * $('div', {html: '<b>Bold</b>'})       // Set innerHTML
- * $('div', {text: 'Plain text'})        // Add text node
- * const myElement = document.createElement('video')
- * $('div', {element: myElement})        // Add existing DOM element
- *
- * // Regular attributes (everything else)
- * $('div', {title: 'Info'})             // el.setAttribute('title', 'info')
+ * 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'
+ * });
  * ```
- * 
- * When a `Store` is passed as a value, a seperate observe-scope will
- * be created for it, such that when the `Store` changes, only *that*
- * UI property will need to be updated.
- * So in the following example, when `colorStore` changes, only the
- * `color` CSS property will be updated.
- * ```js
- * $('div', {
- *   '.active': activeStore,             // Reactive class
- *   $color: colorStore,                 // Reactive style
- *   text: textStore                     // Reactive text
- * })
+ *
+ * @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++ });
+ * });
  * ```
- * 
- * ### Two-way input binding
- * Set the initial value of an <input> <textarea> or <select> to that
- * of a `Store`, and then start reflecting user changes to the former
- * in the latter.
- * ```js
- * $('input', {bind: myStore})           // Binds input.value
+ *
+ * @example Two-way Binding
+ * ```typescript
+ * const user = proxy({ name: '' });
+ * $('input', { placeholder: 'Name', bind: ref(user, 'name') });
+ * $('h3', () => { // Reactive scope
+ *   $(`:Hello ${user.name || 'stranger'}`);
+ * });
  * ```
- * This is a special case, as changes to the `Store` will *not* be
- * reflected in the UI. 
- * 
- * ### Function arguments
- * Create child scopes that re-run on observed `Store` changes:
- * ```js 
- * $('div', () => {
- *   $(myStore.get() ? 'span' : 'p')     // Reactive element type
- * })
+ *
+ * @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!');
+ *   }
+ * });
  * ```
- * When *only* a function is given, `$` behaves exactly like {@link Store.observe},
- * except that it will only work when we're inside a `mount`.
- * 
- * @throws {ScopeError} If called outside an observable scope.
- * @throws {Error} If invalid arguments are provided.
  */
 
-export function $(...args: (string | (() => void) | false | null | undefined | {[key: string]: any})[]) {
-	if (!currentScope || !currentScope._parentElement) throw new ScopeError(true)
 
-	let deepEl = currentScope._parentElement
+export function $(...args: (string | null | undefined | false | (() => void) | Record<string,any>)[]): void {
+	let savedCurrentScope;
+	let err;
 
 	for(let arg of args) {
-		if (arg == null || arg === false) continue
+		if (arg == null || arg === false) continue;
 		if (typeof arg === 'string') {
-			let text, classes
-			const textPos = arg.indexOf(':')
+			let text, classes: undefined | string;
+			const textPos = arg.indexOf(':');
 			if (textPos >= 0) {
-				text = arg.substring(textPos+1)
-				if (textPos === 0) { // Just a string to add as text, no new node
-					addLeafNode(deepEl, document.createTextNode(text))
-					continue
-				}
-				arg = arg.substring(0,textPos)
+				text = arg.substring(textPos+1);
+				arg = arg.substring(0,textPos);
 			}
-			const classPos = arg.indexOf('.')
+			const classPos = arg.indexOf('.');
 			if (classPos >= 0) {
-				classes = arg.substring(classPos+1).replaceAll('.', ' ')
-				arg = arg.substring(0, classPos)
+				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 {
+				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;
 			}
-			if (arg.indexOf(' ') >= 0) throw new Error(`Tag '${arg}' cannot contain space`)
-			const el = document.createElement(arg || 'div')
-			if (classes) el.className = classes
-			if (text) el.textContent = text
-			addLeafNode(deepEl, el)
-			deepEl = el
 		}
 		else if (typeof arg === 'object') {
-			if (arg.constructor !== Object) throw new Error(`Unexpected argument: ${arg}`)
+			if (arg.constructor !== Object) {
+				err = `Unexpected argument: ${arg}`;
+				break;
+			}
 			for(const key in arg) {
-				const val = arg[key]
-				if (key === 'bind') { // Special case, as for this prop we *don't* want to resolve the Store to a value first.
-					applyBinding(deepEl, key, val)
-				} else if (val instanceof Store) {
-					let childScope = new SetArgScope(deepEl, deepEl.lastChild as Node, currentScope!._queueOrder+1, key, val)
-					childScope._install()
-				} else {
-					applyArg(deepEl, key, val)
-				}
+				const val = arg[key];
+				applyArg(key, val);
 			}
 		} else if (typeof arg === 'function') {
-			if (deepEl === currentScope._parentElement) { // do what observe does
-				_mount(undefined, args[0] as any, SimpleScope)
-			} else { // new scope for a new node without any scope attached yet
-				let childScope = new SimpleScope(deepEl, deepEl.lastChild as Node, currentScope._queueOrder+1, arg)
-				childScope._install()
-			}
+			new RegularScope(currentScope.parentElement, arg);
 		} else {
-			throw new Error(`Unexpected argument: ${JSON.stringify(arg)}`)
+			err = `Unexpected argument: ${arg}`;
+			break;
 		}
 	}
+	if (savedCurrentScope) {
+		currentScope = savedCurrentScope;
+	}
+	if (err) throw new Error(err);
+}
+
+let cssCount = 0;
+
+/**
+ * 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 insertCss(style: object, global: boolean = false): string {
+	const prefix = global ? "" : ".AbdStl" + ++cssCount;
+	let css = styleToCss(style, prefix);
+	if (css) $('style:'+css);
+	return prefix;
 }
 
+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+";";
+			}
+		}
+	}
+	if (props) rules = (prefix.trimStart() || '*') + '{'+props+'}\n' + rules;
+	return rules;
+}
 
-function applyArg(deepEl: Element, key: string, value: any) {
-	if (key[0] === '.') { // CSS class(es)
-		const classes = key.substring(1).split('.')
-		if (value) deepEl.classList.add(...classes)
-		else deepEl.classList.remove(...classes)
+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) (deepEl as any).style[name] = ''
-		else (deepEl as any).style[name] = ''+value
+		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](deepEl, value)
+		SPECIAL_PROPS[key](value);
 	} else if (typeof value === 'function') { // Event listener
-		deepEl.addEventListener(key, value)
-		clean(() => deepEl.removeEventListener(key, value))
+		el.addEventListener(key, value);
+		clean(() => el.removeEventListener(key, value));
 	} else if (value===true || value===false || key==='value' || key==='selectedIndex') { // DOM property
-		(deepEl as any)[key] = value
+		(el as any)[key] = value;
 	} else { // HTML attribute
-		deepEl.setAttribute(key, value)
+		el.setAttribute(key, value);
 	}
 }
-				
+
 function defaultOnError(error: Error) {
-	console.error('Error while in Aberdeen render:', error)
-	return true
+	console.error('Error while in Aberdeen render:', error);
+	return true;
 }
-let onError: (error: Error) => boolean | undefined = defaultOnError
+let onError: (error: Error) => boolean | undefined = defaultOnError;
 
 /**
- * Set a custome error handling function, thast is called when an error occurs during rendering
- * while in a reactive scope. The default implementation logs the error to the console, and then
- * just returns `true`, which causes an 'Error' message to be displayed in the UI. When this function
- * returns `false`, the error is suppressed. This mechanism exists because rendering errors can occur
- * at any time, not just synchronous when making a call to Aberdeen, thus normal exception handling
- * is not always possible. 
- * 
- * @param handler The handler function, getting an `Error` as its argument, and returning `false`
- *    if it does *not* want an error message to be added to the DOM.
- *    When `handler is `undefined`, the default error handling will be reinstated.
- * 
- * @example
- * ```javascript
- * // 
+ * 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).
+ *
+ * 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 => {
- *    // Tell our developers about the problem.
- * 	  fancyErrorLogger(error)
- *    // Add custom error message to the DOM.
- *    try {
- *        $('.error:Sorry, something went wrong!')
- *    } catch() {} // In case there is no parent element.
- *    // Don't add default error message to the DOM.
- * 	  return false
+ *   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 setErrorHandler(handler?: (error: Error) => boolean | undefined) {
-	onError = handler || defaultOnError
+	onError = handler || defaultOnError;
 }
 
 
 /**
- * Return the browser Element that nodes 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);
 }
 
-
 /**
- * Reactively run the function, adding any DOM-elements created using {@link $} to the given parent element.
-
- * @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 `$`.
- * @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, () => {
- * 	   $(`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())
+ * @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 $}.
  *
- * mount(document.body, () => {
- *   // This function will never rerun (as it does not read any `Store`s)
- *   $('button:<<', {click: () => selected.modify(n => n-1)})
- *   $('button:>>', {click: () => selected.modify(n => n+1)})
+ * @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';
  *
- *   observe(() => {
- *     // This will rerun whenever `selected` changes, recreating the <h2> and <input>.
- *     $('h2', {text: '#' + selected.get()})
- *     $('input', {type: 'color', value: '#ffffff' bind: colors(selected.get())})
- *   })
+ * const runTime = proxy(0);
+ * setInterval(() => runTime.value++, 1000);
  *
- *   observe(() => {
- *     // This function will rerun when `selected` or the selected color changes.
- *     // It will change the <body> background-color.
- *     $({$backgroundColor: colors.get(selected.get()) || 'white'})
- *   })
- * })
+ * 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) {
-	for(let scope of topScopes.values()) {
-		if (parentElement === scope._parentElement) {
-			throw new Error("Only a single mount per parent element")
-		}
-	}
-
-	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)
-		topScopes.delete(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--;
 	}
-}	
+}
 
-/*
- * Helper functions
+/** 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
+}
 
-function valueToData(value: any) {
-	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 (typeof value !== "object" || !value) {
-		// Simple data types
-		return value
-	} else if (value instanceof Map) {
-		let result = new ObsMap()
-		value.forEach((v,k) => {
-			let d = valueToData(v)
-			if (d!==undefined) result.rawSet(k, d)
-		})
-		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)
+/** 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 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 out
+}
+
+/** 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];
+					}						
+				})
+			}
 		}
-		return result
+	})
+	return out;
+}
+
+
+/**
+ * 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)
+				})
+			})
+		})
 	} 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) {
-	throw new Error("Aberdeen internal error "+code)
+function internalError(code: number): never {
+	throw new Error("Aberdeen internal error "+code);
 }
 /* c8 ignore end */
 
 function handleError(e: any, showMessage: boolean) {
 	try {
-		if (onError(e) === false) showMessage = false
-	} catch {}
-	if (showMessage && currentScope?._parentElement) $('.aberdeen-error:Error')
-}
-
-class ScopeError extends Error {
-	constructor(mount: boolean) {
-		super(`Operation not permitted outside of ${mount ? "a mount" : "an observe"}() scope`)
+		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;
 	}
 }