aberdeen 1.17.0 → 2.0.0

package/src/aberdeen.ts

@@ -1,5 +1,28 @@
-import { ReverseSortedSet } from "./helpers/reverseSortedSet.js";
-import type { ReverseSortedSetPointer } from "./helpers/reverseSortedSet.js";
+import { ReverseSortedSet, type ReverseSortedSetPointer } from "./helpers/reverseSortedSet.js";
+
+/**
+ * The minimal `window`-like object an Aberdeen instance renders against. A real browser
+ * `window`, a jsdom window, and the server window from `aberdeen/server` all satisfy this.
+ */
+export interface WindowLike {
+	document: any;
+	Node: any;
+	Element: any;
+	matchMedia?: (query: string) => any;
+	location?: any;
+	history?: any;
+	addEventListener?: (...args: any[]) => void;
+	removeEventListener?: (...args: any[]) => void;
+	/** Optional; falls back to the host's timers when absent (e.g. the lean server window). */
+	setTimeout?: (...args: any[]) => any;
+	queueMicrotask?: (callback: () => void) => void;
+}
+
+/** Options for {@link createA}. */
+export interface InitOptions {
+	/** Set to `false` to disable `create`/`destroy` transitions for this instance (e.g. for SSR). */
+	transitions?: boolean;
+}
 
 /*
  * QueueRunner
@@ -14,6 +37,1054 @@ interface QueueRunner {
 	[ptr: ReverseSortedSetPointer]: QueueRunner;
 }
 
+/** Any value Aberdeen can proxy: array, plain object, Map or Set. */
+export type TargetType = any[] | { [key: string | symbol]: any } | Map<any, any> | Set<any>;
+/** A sort key returned by `onEach`/`map` ordering callbacks. */
+export type SortKeyType = number | string | Array<number | string> | undefined | void;
+/** Maps object key types to the string form Aberdeen passes to callbacks. */
+export type KeyToString<K> = K extends number ? string : K extends string | symbol ? K : K extends number | infer U ? string | U : K;
+
+/**
+ * The Aberdeen instance returned by {@link createA}: a callable element-builder with every
+ * Aberdeen function attached as a method. `import A from 'aberdeen'` gives you one of these.
+ */
+export interface Aberdeen {
+	/** Build reactive DOM: create elements, set attributes/properties/event listeners, add content. See the tutorial for the full mini-language. */
+	(...args: any[]): undefined | Element;
+
+	/**
+	 * 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 Aberdeen.derive}, {@link Aberdeen.mount}, {@link Aberdeen | A} (when given a render function),
+	 * and internally by constructs like {@link Aberdeen.onEach}.
+	 *
+	 * @param cleaner - The function to execute during cleanup.
+	 *
+	 * @example Maintaing a sum for a changing array
+	 * ```typescript
+	 * const $numbers = A.proxy([3, 5, 10]);
+	 * let $sum = A.proxy(0);
+	 *
+	 * // Show the array items and maintain the sum
+	 * A.onEach($numbers, (item, index) => {
+	 *     A(`code#${index}→${item}`);
+	 *     // We'll update $sum.value using peek, as += first does a read, but
+	 *     // we don't want to subscribe.
+	 *     A.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
+	 *     // observer scope.
+	 *     A.clean(() => $sum.value -= item);
+	 * })
+	 *
+	 * // Show the sum
+	 * A('h1 text=', $sum);
+	 *
+	 * // Make random changes to the array
+	 * const rnd = () => 0|(Math.random()*20);
+	 * setInterval(() => $numbers[rnd()] = rnd(), 1000);
+	 * ```
+	 */
+	clean(cleaner: () => void): void;
+
+	/**
+	 * 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.
+	 * @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 copy of `src`.
+	 */
+	clone<T extends object>(src: T): T;
+
+	/**
+	 * Recursively copies properties or array items from `src` to `dst`.
+	 * It's designed to work efficiently with reactive proxies created by {@link Aberdeen.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 (proxied) destinations.
+	 * - **Fast with Proxies:** When copying to/from proxied objects, `copy` uses Aberdeen internals
+	 *   to speed things up (compared to a non-Aberdeen-aware deep copy).
+	 *
+	 * @param dst - The destination object/array/Map (proxied or unproxied).
+	 * @param src - The source object/array/Map (proxied or unproxied). It won't be modified.
+	 * @template T - The type of the objects being copied.
+	 * @returns `true` if any changes were made to `dst`, or `false` if not.
+	 * @throws Error if attempting to copy an array into a non-array or vice versa.
+	 *
+	 * @example Basic Copy
+	 * ```typescript
+	 * const $source = A.proxy({ a: 1, b: { c: 2 } });
+	 * const $dest = A.proxy({ b: { d: 3 } });
+	 * A.copy($dest, $source);
+	 * console.log($dest); // proxy({ a: 1, b: { c: 2 } })
+	 * A.copy($dest, 'b', { e: 4 });
+	 * console.log($dest); // proxy({ a: 1, b: { e: 4 } })
+	 * ```
+	 */
+	copy<T extends object>(dst: T, src: T): boolean;
+	copy<T extends object>(dst: T, dstKey: keyof T, src: T[typeof dstKey]): boolean;
+
+	/**
+	 * Reactively counts the number of properties in an object.
+	 *
+	 * @param proxied The observable object to count. In case an `array`, `Map`, or `Set` is passed in, a {@link Aberdeen.ref} to its `.length` or `.size` 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`, or the collection size for arrays, Maps, and Sets.
+	 * 
+	 * @example
+	 * ```typescript
+	 * const $items = A.proxy({x: 3, y: 7} as any);
+	 * const $count = A.count($items);
+	 *
+	 * // Create a DOM text node for the count:
+	 * A('div text=', $count);
+	 * // <div>2</div>
+	
+	 * // Or we can use it in an {@link Aberdeen.derive} function:
+	 * A(() => console.log("The count is now", $count.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
+	 * ```
+	 */
+	count(proxied: TargetType): ValueRef<number>;
+
+	/**
+	 * A reactive object containing CSS variable definitions.
+	 *
+	 * Any property you assign to `cssVars` becomes available as a CSS custom property throughout your application.
+	 *
+	 * Use {@link Aberdeen.setSpacingCssVars} to optionally initialize `cssVars[1]` through `cssVars[12]` with an exponential spacing scale.
+	 *
+	 * When you reference a CSS variable in Aberdeen using the `$` prefix (e.g., `$primary`), it automatically resolves to `var(--primary)`.
+	 * For numeric keys (which can't be used directly as CSS custom property names), Aberdeen prefixes them with `m` (e.g., `$3` becomes `var(--m3)`).
+	 *
+	 * When you add the first property to cssVars, Aberdeen automatically creates a reactive `<style>` tag in `<head>`
+	 * containing the `:root` CSS custom property declarations. The style tag is automatically removed if cssVars becomes empty.
+	 *
+	 * @example
+	 * ```javascript
+	 * import A from 'aberdeen';
+	 *
+	 * // Optionally initialize spacing scale
+	 * A.setSpacingCssVars(); // Uses defaults: base=1, unit='rem'
+	 *
+	 * // Define custom colors - style tag is automatically created
+	 * A.cssVars.primary = '#3b82f6';
+	 * A.cssVars.danger = '#ef4444';
+	 *
+	 * // Use in elements with the $ prefix
+	 * A('button bg:$primary fg:white #I'm a primary button');
+	 *
+	 * // Use spacing (if setSpacingCssVars() was called)
+	 * A('hr mt:$3'); // Sets margin-top to var(--m3)
+	 * ```
+	 */
+	cssVars: Record<string, string>;
+
+	/**
+	 * When set on an object or its prototype chain, {@link Aberdeen.dump} calls this as a render function
+	 * (with the object as `this`) instead of its default recursive rendering. If the value is not 
+	 * a function, it's treated as a string to display. 
+	 *
+	 * @example
+	 * ```typescript
+	 * class Color {
+	 *   constructor(public r: number, public g: number, public b: number) {}
+	 *   [CUSTOM_DUMP]() { A(`#rgb(${this.r}, ${this.g}, ${this.b})`); }
+	 * }
+	 * ```
+	 */
+	CUSTOM_DUMP: any;
+
+	/**
+	 * Returns whether the user's browser prefers a dark color scheme.
+	 *
+	 * This function is reactive - scopes that call it will re-execute when the
+	 * browser's color scheme preference changes (via the `prefers-color-scheme` media query).
+	 *
+	 * Use this in combination with {@link Aberdeen | A} and {@link Aberdeen.cssVars} to implement theme switching:
+	 *
+	 * @returns `true` if the browser prefers dark mode, `false` if it prefers light mode.
+	 *
+	 * @example
+	 * ```javascript
+	 * import A from 'aberdeen';
+	 *
+	 * // Reactively set colors based on browser preference
+	 * A(() => {
+	 *   A.cssVars.bg = A.darkMode() ? '#1a1a1a' : '#ffffff';
+	 *   A.cssVars.fg = A.darkMode() ? '#e5e5e5' : '#000000';
+	 * });
+	 * 
+	 * A('div bg:$bg fg:$fg p:1rem #Colors change based on system dark mode preference');
+	 * ```
+	 */
+	darkMode(): boolean;
+
+	/**
+	 * Creates a reactive scope that automatically re-executes the provided function
+	 * whenever any proxied data (created by {@link Aberdeen.proxy}) read during its last execution changes, storing
+	 * its return value in an observable.
+	 *
+	 * Updates are batched and run asynchronously shortly after the changes occur.
+	 * Use {@link Aberdeen.clean} to register cleanup logic for the scope.
+	 * Use {@link Aberdeen.peek} or {@link Aberdeen.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 Aberdeen | A} within this function. Its return value will be made available as an
+	 *   observable returned by the `derive()` function.
+	 * @returns An observable object, with its `value` property containing whatever the last run of `func` returned.
+	 *
+	 * @example Observation creating UI components
+	 * ```typescript
+	 * const $data = A.proxy({ user: 'Frank', notifications: 42 });
+	 *
+	 * A('main', () => {
+	 *   console.log('Welcome');
+	 *   A('h3#Welcome, ' + $data.user); // Reactive text
+	 *
+	 *   A.derive(() => {
+	 *     // When $data.notifications changes, only this inner scope reruns,
+	 *     // leaving the `<p>Welcome, ..</p>` untouched.
+	 *     console.log('Notifications');
+	 *     A('code.notification-badge text=', $data.notifications);
+	 *     A('a text=Notify! click=', () => $data.notifications++);
+	 *   });
+	 * });
+	 * ```
+	 *
+	 * ***Note*** that the above could just as easily be done using `A(func)` instead of `derive(func)`.
+	 *
+	 * @example Observation with return value
+	 * ```typescript
+	 * const $counter = A.proxy(0);
+	 * setInterval(() => $counter.value++, 1000);
+	 * const $double = A.derive(() => $counter.value * 2);
+	 *
+	 * A('h3', () => {
+	 *     A(`#counter=${$counter.value} double=${$double.value}`);
+	 * })
+	 * ```
+	 *
+	 * @overload
+	 * @param func Func without a return value.
+	 */
+	derive<T>(func: () => T): ValueRef<T>;
+
+	/**
+	 * Renders a live, recursive dump of a proxied data structure (or any value)
+	 * into the DOM at the current {@link Aberdeen | A} 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 A from 'aberdeen';
+	 *
+	 * const $state = A.proxy({
+	 *   user: { name: 'Frank', kids: 1 },
+	 *   items: ['a', 'b']
+	 * });
+	 *
+	 * A('h2#Live State Dump');
+	 * A.dump($state);
+	 *
+	 * // Change state later, the dump in the DOM will update
+	 * setTimeout(() => { $state.user.kids++; $state.items.push('c'); }, 2000);
+	 * ```
+	 */
+	dump<T>(data: T): T;
+
+	/**
+	 * Inserts CSS rules into the document, scoping them with a unique class name.
+	 *
+	 * The `style` parameter can be either:
+	 * - A **concise style string** (for rules applying to the root class).
+	 * - An **object** where keys are selectors (with `&` representing the root class) 
+	 *   and values are concise style strings or nested objects. When the key does not contain `&`,
+	 *   it is treated as a descendant selector. So `{p: "color:red"}` becomes `".AbdStlX p { color: red; }"` with `AbdStlX` being the generated class name.
+	 *
+	 * ### Concise Style Strings
+	 * 
+	 * Concise style strings use two syntaxes (same as inline CSS in {@link Aberdeen | A}):
+	 * - **Short form** `key:value` (no space after colon): The value ends at the next whitespace.
+	 *   Example: `'m:$3 bg:red r:8px'`
+	 * - **Long form** `key: value;` (space after colon): The value continues until a semicolon.
+	 *   Example: `'box-shadow: 2px 0 6px black; transition: all 0.3s ease;'`
+	 * 
+	 * Both forms can be mixed: `'m:$3 box-shadow: 0 2px 4px rgba(0,0,0,0.2); bg:$cardBg'`
+	 * 
+	 * Supports the same CSS shortcuts as {@link Aberdeen | A} and CSS variable references with `$` (e.g., `$primary`, `$3`).
+	 *
+	 * @param style - A concise style string or a style object.
+	 * @returns The unique class name prefix used for scoping (e.g., `.AbdStl1`). 
+	 *          Use this prefix with {@link Aberdeen | A} to apply the styles.
+	 *
+	 * @example Basic Usage with Shortcuts and CSS Variables
+	 * ```typescript
+	 * const cardClass = A.insertCss({
+	 *   '&': 'bg:white p:$4 r:8px transition: background-color 0.3s;',
+	 *   '&:hover': 'bg:#f5f5f5',
+	 * });
+	 *
+	 * A('section', cardClass, () => { 
+	 *   A('p#Card content'); 
+	 * });
+	 * ```
+	 *
+	 * @example Nested Selectors and Media Queries
+	 * ```typescript
+	 * const formClass = A.insertCss({
+	 *   '&': 'bg:#0004 p:$3 r:$2',
+	 *   button: {
+	 *     '&': 'bg:$primary fg:white p:$2 r:4px cursor:pointer',
+	 *     '&:hover': 'bg:$primaryHover',
+	 *     '&:disabled': 'bg:#ccc cursor:not-allowed',
+	 *     '.icon': 'display:inline-block mr:$1',
+	 *     '@media (max-width: 600px)': 'p:$1 font-size:14px'
+	 *   }
+	 * });
+	 *
+	 * A('form', formClass, () => {
+	 *   A('button', () => {
+	 *     A('span.icon text=🔥');
+	 *     A('#Click Me');
+	 *   });
+	 * });
+	 * ```
+	 *
+	 * @example Complex CSS Values
+	 * ```typescript
+	 * const badge = A.insertCss({
+	 *   '&::before': 'content: "★"; color:gold mr:$1',
+	 *   '&': 'position:relative box-shadow: 0 2px 8px rgba(0,0,0,0.15);'
+	 * });
+	 *
+	 * A(badge + ' span#Product Name');
+	 * ```
+	 */
+	insertCss(style: string | object): string;
+
+	/**
+	 * Inserts CSS rules globally (unscoped).
+	 * 
+	 * Works exactly like {@link Aberdeen.insertCss}, but without prefixing selectors with a unique class name.
+	 * This is useful for global resets, base styles, or styles that need to apply to the entire document.
+	 * 
+	 * Accepts the same concise style string syntax and CSS shortcuts as {@link Aberdeen.insertCss}.
+	 * See {@link Aberdeen.insertCss} for detailed documentation on syntax and shortcuts.
+	 * 
+	 * @param style - Object with selectors as keys and concise CSS strings as values.
+	 * 
+	 * @example Global Reset and Base Styles
+	 * ```typescript
+	 * // Set up global styles using CSS shortcuts
+	 * A.insertGlobalCss({
+	 *   "*": "m:0 p:0 box-sizing:border-box",
+	 *   "body": "font-family: system-ui, sans-serif; m:0 p:$3 bg:#434 fg:#d0dafa",
+	 *   "a": "text-decoration:none fg:#57f",
+	 *   "a:hover": "text-decoration:underline",
+	 *   "code": "font-family:monospace bg:#222 fg:#afc p:4px r:3px"
+	 * });
+	 *
+	 * A('h2#Title without margins');
+	 * A('a#This is a link');
+	 * A('code#const x = 42;');
+	 * ```
+	 *
+	 * @example Responsive Global Styles
+	 * ```typescript
+	 * A.insertGlobalCss({
+	 *   "html": "font-size:16px",
+	 *   "body": "line-height:1.6",
+	 *   "h1, h2, h3": "font-weight:600 mt:$4 mb:$2",
+	 *   "@media (max-width: 768px)": {
+	 *     "html": "font-size:14px",
+	 *     "body": "p:$2"
+	 *   },
+	 *   "@media (prefers-color-scheme: dark)": {
+	 *     "body": "bg:#1a1a1a fg:#e5e5e5",
+	 *     "code": "bg:#2a2a2a"
+	 *   }
+	 * });
+	 * ```
+	 * At-rules such as `@media` and `@keyframes` should use nested objects. For keyframes,
+	 * the step selectors (`0%`, `50%`, `100%`, etc.) become the nested keys and each value
+	 * should be a concise CSS declaration string.
+	 *
+	 * @example Animation Keyframes
+	 * ```typescript
+	 * A.insertGlobalCss({
+	 *   "@keyframes connection-pulse": {
+	 *     "0%": "box-shadow: inset 0 0 0 0 rgba(255, 70, 70, 0.4);",
+	 *     "50%": "box-shadow: inset 0 0 0 6px rgba(255, 70, 70, 0.08);",
+	 *     "100%": "box-shadow: inset 0 0 0 0 rgba(255, 70, 70, 0.4);"
+	 *   }
+	 * });
+	 * ```
+	 */
+	insertGlobalCss(style: object): 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 Aberdeen.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 = A.proxy([
+	 *     { id: 1, name: 'Charlie', score: 95 },
+	 *     { id: 2, name: 'Alice', score: 100 },
+	 *     { id: 3, name: 'Bob', score: 90 },
+	 * ]);
+	 *
+	 * A.onEach($users, ($user) => {
+	 *     A(`p#${$user.name}: ${$user.score}`);
+	 * }, ($user) => A.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 Aberdeen.onEach} for usage with sorting.
+	 */
+	invertString(input: string): string;
+
+	/**
+	 * Reactively checks if an observable array, object, Map, or Set 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, object, Map, or Set to check.
+	 * @returns `true` if the array has length 0, the Map/Set has size 0, or the object has no own enumerable properties, `false` otherwise.
+	 *
+	 * @example
+	 * ```typescript
+	 * const $items = A.proxy([]);
+	 *
+	 * // Reactively display a message if the items array is empty
+	 * A('div', () => {
+	 *     if (A.isEmpty($items)) {
+	 *         A('p i#No items yet!');
+	 *     } else {
+	 *         A.onEach($items, item => A('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)
+	 * ```
+	 */
+	isEmpty(proxied: TargetType): boolean;
+
+	/** When using a Map as `source`. */
+	map<K, IN, OUT>(
+		source: Map<K, IN>,
+		func: (value: IN, key: K) => undefined | OUT,
+	): Map<K, OUT>;
+	map<IN, OUT>(
+		source: Array<IN>,
+		func: (value: IN, index: number) => undefined | OUT,
+	): Array<OUT>;
+	map<IN, const IN_KEY extends string | number | symbol, OUT>(
+		source: Record<IN_KEY, IN>,
+		func: (value: IN, index: KeyToString<IN_KEY>) => undefined | OUT,
+	): Record<string | symbol, OUT>;
+
+	/**
+	 * Like {@link Aberdeen.copy}, but uses merge semantics. Properties in `dst` not present in `src` are kept.
+	 * `null`/`undefined` in `src` delete properties in `dst`.
+	 * 
+	 * @example Basic merge
+	 * ```typescript
+	 * const source = { b: { c: 99 }, d: undefined }; // d: undefined will delete
+	 * const $dest = A.proxy({ a: 1, b: { x: 5 }, d: 4 });
+	 * A.merge($dest, source);
+	 * A.merge($dest, 'b', { y: 6 }); // merge into $dest.b
+	 * A.merge($dest, 'c', { z: 7 }); // $dest.c doesn't exist yet, so it will just be assigned
+	 * console.log($dest); // proxy({ a: 1, b: { c: 99, x: 5, y: 6 }, c: { z: 7 } })
+	 * ```
+	 *
+	 */
+	merge<T extends object>(dst: T, value: Partial<T>): boolean;
+	merge<T extends object>(dst: T, dstKey: keyof T, value: Partial<T[typeof dstKey]>): boolean;
+
+	/**
+	 * Attaches a reactive Aberdeen UI fragment to an existing DOM element. Without the use of
+	 * this function, {@link Aberdeen | A} will assume `document.body` as its root.
+	 *
+	 * 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.
+	 *
+	 * Calls to {@link Aberdeen | A} inside `func` will append nodes to `parentElement`.
+	 * You can nest {@link Aberdeen.derive} or other {@link Aberdeen | A} scopes within `func`.
+	 * Use {@link Aberdeen.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 Aberdeen.derive} or {@link Aberdeen | A} or {@link Aberdeen.mount}) scope that gets cleaned up, so will the mount.
+	 *
+	 * @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 Aberdeen | A}.
+	 *
+	 * @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 A from 'aberdeen';
+	 *
+	 * const $runTime = A.proxy(0);
+	 * setInterval(() => $runTime.value++, 1000);
+	 *
+	 * A.mount(document.getElementById('app-root'), () => {
+	 *   A('h4#Aberdeen App');
+	 *   A(`p#Run time: ${$runTime.value}s`);
+	 *   // Conditionally render some content somewhere else in the static page
+	 *   if ($runTime.value&1) {
+	 *     A.mount(document.getElementById('title-extra'), () =>
+	 *       A(`i#(${$runTime.value}s)`)
+	 *     );
+	 *   }
+	 * });
+	 * ```
+	 *
+	 * Note how the inner mount behaves reactively as well, automatically unmounting when it's parent observer scope re-runs.
+	 */
+	mount(parentElement: Element, func: () => void): void;
+
+	/** When using an array as `source`. */
+	multiMap<IN, OUT extends { [key: string | symbol]: any }>(
+		source: Array<IN>,
+		func: (value: IN, index: number) => OUT | undefined,
+	): OUT;
+	multiMap<
+		K extends string | number | symbol,
+		IN,
+		OUT extends { [key: string | symbol]: any },
+	>(source: Record<K, IN>, func: (value: IN, index: KeyToString<K>) => OUT | undefined): OUT;
+	multiMap<
+		K,
+		IN,
+		OUT extends { [key: string | symbol]: any },
+	>(source: Map<K, IN>, func: (value: IN, key: K) => OUT | undefined): OUT;
+
+	/**
+	 * A symbol that controls how Aberdeen handles an object in copy operations and proxy wrapping.
+	 *
+	 * The **presence** of this symbol (regardless of its value) prevents deep-copying: the object is
+	 * stored and passed by reference in {@link Aberdeen.clone} and {@link Aberdeen.copy}.
+	 *
+	 * The **value** of the symbol controls proxy wrapping when the object is read from reactive state:
+	 * - **Truthy** (e.g. `true`): the object is fully opaque — it is not wrapped in a proxy, so its
+	 *   properties are not observable. Use this for objects that break when proxied (e.g. class instances
+	 *   with internal slots, Promises) or that must be invisible to Aberdeen's reactive system.
+	 * - **Falsy** (e.g. `false`): the object is still wrapped in a proxy, so reads on its properties
+	 *   create reactive dependencies as normal — only deep-copying is suppressed.
+	 */
+	OPAQUE: any;
+
+	/**
+	 * Use {@link Aberdeen.OPAQUE} instead. This is an alias kept for backward compatibility.
+	 * 
+	 * @deprecated
+	 */
+	NO_COPY: any;
+
+	/**
+	 * Reactively iterates over the items of an observable array, object, Map, or Set, optionally rendering content for each item.
+	 *
+	 * Automatically updates when items are added, removed, or modified.
+	 *
+	 * @param target The observable array, object, Map, or Set to iterate over. Values that are `undefined` are skipped.
+	 * @param render A function called for each item. It receives the item's (observable) value and its index/key. For Sets, only the value is provided. 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, arrays use index order, Sets use the item value itself, and objects/Maps use their natural key order. The returned key can be a number, string, or an array of numbers/strings for composite sorting. Use {@link Aberdeen.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 = A.proxy(['apple', 'banana', 'cherry']);
+	 *
+	 * // Basic iteration
+	 * A.onEach($items, (item, index) => A(`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 = A.proxy([
+	 *     { id: 3, group: 1, name: 'Charlie' },
+	 *     { id: 1, group: 1, name: 'Alice' },
+	 *     { id: 2, group: 2, name: 'Bob' },
+	 * ]);
+	 *
+	 * // Sort by name alphabetically
+	 * A.onEach($users, ($user) => {
+	 *     A(`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 = A.proxy({ theme: 'dark', fontSize: 14, showTips: true });
+	 *
+	 * // Display configuration options
+	 * A('dl', () => {
+	 *     A.onEach($config, (value, key) => {
+	 *         if (key === 'showTips') return; // Don't render this one
+	 *         A('dt#'+key);
+	 *         A('dd#'+value);
+	 *     });
+	 * });
+	 *
+	 * // Change a value - the display updates automatically
+	 * setTimeout(() => $config.fontSize = 16, 2000);
+	 * ```
+	 *
+	 * @example Iterating a Set
+	 * ```javascript
+	 * const $tags = A.proxy(new Set(['ui', 'fast', 'tiny']));
+	 *
+	 * A('ul', () => {
+	 *     A.onEach($tags, (tag) => { // Defaults to alphabetically ordering by tag
+	 *         A(`li#${tag}`);
+	 *     });
+	 * });
+	 *
+	 * setTimeout(() => $tags.add('reactive'), 2000);
+	 * ```
+	 * @see {@link Aberdeen.invertString} To easily create keys for reverse sorting.
+	 */
+	onEach<K, T>(
+		target: Map<K, undefined | T>,
+		render: (value: T, key: K) => void,
+		makeKey?: (value: T, key: K) => SortKeyType,
+	): void;
+	onEach<T>(
+		target: Set<T>,
+		render: (value: T) => void,
+		makeKey?: (value: T) => SortKeyType,
+	): void;
+	onEach<T>(
+		target: ReadonlyArray<undefined | T>,
+		render: (value: T, index: number) => void,
+		makeKey?: (value: T, index: number) => SortKeyType,
+	): void;
+	onEach<K extends string | number | symbol, T>(
+		target: Record<K, undefined | T>,
+		render: (value: T, index: KeyToString<K>) => void,
+		makeKey?: (value: T, index: KeyToString<K>) => SortKeyType,
+	): void;
+
+	/** When using an object as `array`. */
+	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>>;
+	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>>;
+	partition<
+		IN_K extends string | number | symbol,
+		OUT_K extends string | number | symbol,
+		IN_V,
+	>(
+		source: Map<IN_K, IN_V>,
+		func: (value: IN_V, key: IN_K) => undefined | OUT_K | OUT_K[],
+	): Record<OUT_K, Record<IN_K, IN_V>>;
+
+	/**
+	 * Executes a function or retrieves a value *without* creating subscriptions in the current reactive scope, and returns its result.
+	 *
+	 * This is useful when you need to access reactive data inside a reactive scope (like {@link Aberdeen | A})
+	 * but do not want changes to that specific data to trigger a re-execute of the scope.
+	 * 
+	 * Note: You may also use {@link Aberdeen.unproxy} to get to the raw underlying data structure, which can be used to similar effect.
+	 *
+	 * @param target - Either a function to execute, or an object (which may also be an Array or a Map) to index.
+	 * @param key - Optional key/index to use when `target` is an object.
+	 * @returns The result of the function call, or the value at `target[key]` when `target` is an object or `target.get(key)` when it's a Map.
+	 *
+	 * @example Peeking within observer
+	 * ```typescript
+	 * const $data = A.proxy({ a: 1, b: 2 });
+	 * A(() => {
+	 *   // re-executes only when $data.a changes, because $data.b is peeked.
+	 *   const b = A.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.")
+	 * ```
+	 *
+	 */
+	peek<T extends object, K extends keyof T>(target: T, key: K): T[K];
+	peek<K,V>(target: Map<K,V>, key: K): V | undefined;
+	peek<T>(target: T[], key: number): T | undefined;
+	peek<T>(target: () => T): T;
+
+	/**
+	 * Creates a reactive proxy around the given data.
+	 *
+	 * Reading properties from the returned proxy within a reactive scope (like one created by
+	 * {@link Aberdeen | A} or {@link Aberdeen.derive}) establishes a subscription. Modifying properties *through*
+	 * the proxy will notify subscribed scopes, causing them to re-execute.
+	 *
+	 * - Plain objects, arrays, Maps, and Sets 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.
+	 * - Promises are represented by proxied objects `{ busy: boolean, value?: T, error?: any }`.
+	 *   Initially, `busy` is `true`. When the promise resolves, `value` is set and `busy`
+	 *   is set to `false`. If the promise is rejected, `error` is set and `busy` is also
+	 *   set to `false`.
+	 *
+	 * Use {@link Aberdeen.unproxy} to get the original underlying data back.
+	 * By convention in the examples below, local variables that hold proxied values are prefixed with `$`.
+	 *
+	 * @param target - The object, array, Map, Set, 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 = A.proxy({ count: 0, message: 'Hello' });
+	 * A(() => console.log($state.message)); // Subscribes to message
+	 * setTimeout(() => $state.message = 'World', 1000); // Triggers the observing function
+	 * setTimeout(() => $state.count++, 2000); // Triggers nothing
+	 * ```
+	 *
+	 * @example Array
+	 * ```javascript
+	 * const $items = A.proxy(['a', 'b']);
+	 * A(() => console.log($items.length)); // Subscribes to length
+	 * setTimeout(() => $items.push('c'), 2000); // Triggers the observing function
+	 * ```
+	 *
+	 * @example Primitive
+	 * ```javascript
+	 * const $name = A.proxy('Aberdeen');
+	 * A(() => console.log($name.value)); // Subscribes to value
+	 * setTimeout(() => $name.value = 'UI', 2000); // Triggers the observing function
+	 * ```
+	 *
+	 * @example Set
+	 * ```javascript
+	 * const $tags = A.proxy(new Set(['ui', 'tiny']));
+	 * A(() => console.log($tags.has('ui'), $tags.size));
+	 * setTimeout(() => $tags.add('fast'), 1000);
+	 * ```
+	 *
+	 * @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 = A.proxy(new Widget('Graph', 200, 100));
+	 * A(() => console.log(''+$graph));
+	 * setTimeout(() => $graph.grow(), 2000);
+	 * setTimeout(() => $graph.grow(), 4000);
+	 * ```
+	 */
+	proxy<T extends any>(target: Promise<T>): PromiseProxy<T>;
+	proxy<T extends any>(target: Array<T>): Array<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T >;
+	proxy<T extends object>(target: T): T;
+	proxy<T extends any>(target: T): ValueRef<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T>;
+
+	/**
+	 * 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 Aberdeen | A} to create two-way data bindings
+	 * with form elements, and for passing a reactive property to any of the {@link Aberdeen | A} 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 Aberdeen.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 = A.proxy({ color: 'orange', velocity: 42 });
+	 *
+	 * // Usage with `bind`
+	 * A('input type=text bind=', A.ref($formData, 'color'));
+	 *
+	 * // Usage as a dynamic property, causes a TextNode with just the name to be created and live-updated
+	 * A('p text="Selected color: " text=', A.ref($formData, 'color'), 'color:', A.ref($formData, 'color'));
+	 *
+	 * // Changes are actually stored in $formData - this causes logs like `{color: "Blue", velocity 42}`
+	 * A(() => console.log($formData))
+	 * ```
+	 */
+	ref<T extends TargetType, K extends keyof T>(
+		target: T,
+		index: K,
+	): ValueRef<T[K]>;
+
+	/**
+	 * Forces the immediate and synchronous execution of all pending reactive 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.
+	 *
+	 * This can be useful in specific scenarios where you need the DOM to be updated
+	 * synchronously.
+	 *
+	 * 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.
+	 *
+	 * @example
+	 * ```typescript
+	 * const $data = A.proxy("before");
+	 *
+	 * A('#', $data);
+	 * console.log(1, document.body.innerHTML); // before
+	 *
+	 * // 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:
+	 * A.runQueue();
+	 *
+	 * console.log(2, document.body.innerHTML); // after
+	 * ```
+	 */
+	runQueue(): void;
+
+	/**
+	 * Sets a custom error handler function for errors that occur asynchronously
+	 * within reactive scopes (e.g., during updates triggered by proxy changes in
+	 * {@link Aberdeen.derive} or {@link Aberdeen | A} 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
+	 * A.setErrorHandler(error => {
+	 *   console.warn('Aberdeen render error:', error.message);
+	 *   // Log to error reporting service
+	 *   // myErrorReporter.log(error);
+	 *
+	 *   try {
+	 *     // Attempt to show a custom message in the UI
+	 *     A('div#Oops, something went wrong!', errorClass);
+	 *   } catch (e) {
+	 *     // Ignore errors during error handling itself
+	 *   }
+	 *
+	 *   return false; // Suppress default console log and DOM error message
+	 * });
+	 *
+	 * // Styling for our custom error message
+	 * const errorClass = A.insertCss('background-color:#e31f00 display:inline-block color:white r:3px padding: 2px 4px;');
+	 *
+	 * // Cause an error within a render scope.
+	 * A('div.box', () => {
+	 *   // Will cause our error handler to insert an error message within the box
+	 *   noSuchFunction();
+	 * })
+	 * ```
+	 */
+	setErrorHandler(
+		handler?: (error: Error) => boolean | undefined,
+	): void;
+
+	/**
+	 * Initializes `cssVars[0]` through `cssVars[12]` with an exponential spacing scale.
+	 *
+	 * The scale is calculated as `2^(n-3) * base`, providing values from `0.25 * base` to `512 * base`.
+	 *
+	 * @param base - The base size for the spacing scale that will apply to `cssVars[3]`. Every step up the scale will double this, while every step down will halve it. Defaults to 1.
+	 * @param unit - The CSS unit to use, like 'rem', 'em', or 'px'. Defaults to 'rem'.
+	 *
+	 * @example
+	 * ```javascript
+	 * import A from 'aberdeen';
+	 * // Use default scale (0.25rem to 512rem)
+	 * A.setSpacingCssVars();
+	 *
+	 * // Use custom base size
+	 * A.setSpacingCssVars(16, 'px'); // 4px to 8192px
+	 *
+	 * // Use em units
+	 * A.setSpacingCssVars(1, 'em'); // 0.25em to 512em
+	 * 
+	 * // Show the last generated spacing values
+	 * A.onEach(A.cssVars, (value, key) => {
+	 * 	A(`div #${key} → ${value}`)
+	 * }, (value, key) => parseInt(key)); // Numeric sort
+	 * ```
+	 */
+	setSpacingCssVars(base?: number, unit?: string): void;
+
+	/**
+	 * Removes all Aberdeen-managed DOM nodes and stops all active reactive scopes
+	 * (created by {@link Aberdeen.mount}, {@link Aberdeen.derive}, {@link Aberdeen | A} with functions, etc.).
+	 *
+	 * This effectively cleans up the entire Aberdeen application state. Aside from in
+	 * automated tests, there should probably be little reason to call this function.
+	 */
+	unmountAll(): void;
+
+	/**
+	 * Returns the original, underlying data target from a reactive proxy created by {@link Aberdeen.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 Aberdeen.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 $user = A.proxy({ name: 'Frank' });
+	 * const rawUser = A.unproxy($user);
+	 *
+	 * // Log reactively
+	 * A(() => console.log('proxied', $user.name));
+	 * // The following will only ever log once, as we're not subscribing to any observable
+	 * A(() => console.log('unproxied', rawUser.name));
+	 *
+	 * // This cause the first log to run again:
+	 * setTimeout(() => $user.name += '!', 1000);
+	 *
+	 * // This doesn't cause any new logs:
+	 * setTimeout(() => rawUser.name += '?', 2000);
+	 *
+	 * // Both $user and rawUser end up as `{name: 'Frank!?'}`
+	 * setTimeout(() => {
+	 *   console.log('final proxied', $user)
+	 *   console.log('final unproxied', rawUser)
+	 * }, 3000);
+	 * ```
+	 */
+	unproxy<T>(target: T): T;
+
+	/** @internal The window this instance renders against. */
+	window: any;
+	/** @internal */
+	EMPTY: any;
+
+	/** @internal */
+	MAP_SIZE_SYMBOL: any;
+
+	/** @internal */
+	leakScope<T>(func: () => T): T;
+
+	/** @internal */
+	withEmitHandler(
+		handler: (
+			target: TargetType,
+			index: any,
+			newData: any,
+			oldData: any,
+		) => void,
+		func: () => void,
+	): void;
+
+	/** @internal */
+	defaultEmitHandler(
+		target: TargetType,
+		index: string | symbol | number,
+		newData: any,
+		oldData: any,
+	): void;
+
+}
+
+/** The shape returned by {@link Aberdeen.ref}: an object whose single `value` property is reactive. */
+export interface ValueRef<T> {
+	value: T;
+}
+
+/** When `proxy` is called with a Promise, the returned object has this shape. */
+export interface PromiseProxy<T> {
+	/** True while the promise is pending, false once it has resolved or rejected. */
+	busy: boolean;
+	/** If the promise has resolved, the resolved value. */
+	value?: T;
+	/** If the promise has rejected, the rejection error. */
+	error?: any;
+}
+
+/**
+ * Create an isolated Aberdeen instance bound to the given window. Returns the callable `A`
+ * object (with all Aberdeen functions attached as properties).
+ *
+ * In the browser you normally import the pre-initialised default instance
+ * (`import A from 'aberdeen'`). Call `init` yourself to render against a non-browser DOM
+ * (see `aberdeen/server`) or to create multiple isolated instances. All reactive state lives
+ * in the returned instance, so separate instances never interfere.
+ *
+ * @param window The window to render against. May be omitted for the browser default when
+ *   no `window` global exists yet; rendering then throws until a real window is available.
+ * @param options See {@link InitOptions}.
+ */
+export function createA(window?: WindowLike, options: InitOptions = {}): Aberdeen {
+
+// Everything the DOM-touching code needs comes from the injected window, so the code below
+// can use `document`, `Node`, `Element`, `setTimeout` and `queueMicrotask` exactly as it would
+// against the browser globals. Timers fall back to the host's when the window doesn't provide
+// them (e.g. the lean server window relies on Node's timers).
+const document = (window ? window.document : undefined) as Document;
+const Node = (window ? window.Node : undefined) as typeof globalThis.Node;
+const Element = (window ? window.Element : undefined) as typeof globalThis.Element;
+const setTimeout = (window?.setTimeout ? window.setTimeout.bind(window) : globalThis.setTimeout) as typeof globalThis.setTimeout;
+const queueMicrotask = (window?.queueMicrotask ? window.queueMicrotask.bind(window) : globalThis.queueMicrotask) as typeof globalThis.queueMicrotask;
+
 let sortedQueue: ReverseSortedSet<QueueRunner, "prio"> | undefined; // When set, a runQueue is scheduled or currently running.
 let runQueueDepth = 0; // Incremented when a queue event causes another queue event to be added. Reset when queue is empty. Throw when >= 42 to break (infinite) recursion.
 let topRedrawScope: Scope | undefined; // The scope that triggered the current redraw. Elements drawn at this scope level may trigger 'create' animations.
@@ -57,7 +1128,6 @@ function undoSideEffects(el: any, se: any[]) {
 }
 
 /** @internal */
-export type TargetType = any[] | { [key: string | symbol]: any } | Map<any, any> | Set<any>;
 
 
 function queue(runner: QueueRunner) {
@@ -73,38 +1143,7 @@ function queue(runner: QueueRunner) {
 	sortedQueue.add(runner);
 }
 
-/**
- * Forces the immediate and synchronous execution of all pending reactive 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.
- *
- * This can be useful in specific scenarios where you need the DOM to be updated
- * synchronously.
- *
- * 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.
- *
- * @example
- * ```typescript
- * const $data = A.proxy("before");
- *
- * A('#', $data);
- * console.log(1, document.body.innerHTML); // before
- *
- * // 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:
- * A.runQueue();
- *
- * console.log(2, document.body.innerHTML); // after
- * ```
- */
-export function runQueue(): void {
+function runQueue(): void {
 	let time = Date.now();
 	while (sortedQueue) {
 		const runner = sortedQueue.fetchLast();
@@ -119,13 +1158,12 @@ export function runQueue(): void {
 }
 
 /**
- * A sort key, as used by {@link onEach}, is a value that determines the order of items. It can
+ * A sort key, as used by {@link Aberdeen.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.
  * @internal
  */
-export type SortKeyType = number | string | Array<number | string> | undefined | void;
 
 /**
  * Given an array of integer numbers or strings, this function returns a string that sorts
@@ -162,34 +1200,7 @@ function arrayToStr(parts: (number | string)[]): string {
 	return result;
 }
 
-/**
- * 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 = A.proxy([
- *     { id: 1, name: 'Charlie', score: 95 },
- *     { id: 2, name: 'Alice', score: 100 },
- *     { id: 3, name: 'Bob', score: 90 },
- * ]);
- *
- * A.onEach($users, ($user) => {
- *     A(`p#${$user.name}: ${$user.score}`);
- * }, ($user) => A.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 {
+function invertString(input: string): string {
 	let result = "";
 	for (let i = 0; i < input.length; i++) {
 		result += String.fromCodePoint(65535 - input.charCodeAt(i));
@@ -433,7 +1444,7 @@ class RegularScope extends ChainedScope {
 }
 
 class RootScope extends ContentScope {
-	el = document.body;
+	el = document ? document.body : (undefined as any);
 	svg = false;
 	getPrecedingNode(): Node | undefined {
 		return undefined;
@@ -516,7 +1527,7 @@ function removeNodes(
 function findLastNodeInPrevSiblings(
 	sibling: Node | Scope | undefined,
 ): Node | undefined {
-	if (!sibling || sibling instanceof Node) return sibling;
+	if (!sibling || !(sibling instanceof Scope)) return sibling;
 	return sibling.getLastNode() || sibling.getPrecedingNode();
 }
 
@@ -732,7 +1743,7 @@ class OnEachItemScope extends ContentScope {
 		let child = this.lastChild;
 
 		while (child && child !== this) {
-			if (child instanceof Node) return child;
+			if (!(child instanceof Scope)) return child;
 			const node = child.getLastNode();
 			if (node) return node;
 			child = child.getPrecedingNode();
@@ -865,14 +1876,7 @@ function addNode(el: Element, node: Node) {
 const ROOT_SCOPE = new RootScope();
 let currentScope: ContentScope = ROOT_SCOPE;
 
-/**
- * Execute a function in a never-cleaned root scope. Even {@link unmountAll} will not
- * clean up observers/nodes created by the function.
- * @param func The function to execute.
- * @returns The return value of the function.
- * @internal
- */
-export function leakScope<T>(func: () => T): T {
+function leakScope<T>(func: () => T): T {
 	const savedScope = currentScope;
 	currentScope = new RootScope();
 	try {
@@ -893,12 +1897,7 @@ const ANY_SYMBOL = Symbol("any");
  */
 const TARGET_SYMBOL = Symbol("target");
 
-/**
- * Symbol used internally to track Map and Set size without clashing with actual Map keys named "size".
- * 
- * @internal
- */
-export const MAP_SIZE_SYMBOL = Symbol("mapSize");
+const MAP_SIZE_SYMBOL = Symbol("mapSize");
 
 const subscribers = new WeakMap<
 	TargetType,
@@ -949,24 +1948,23 @@ function subscribe(
  * This type changes (number | something) types to (string | something) types, maintaining typing precision as much as possible.
  * @internal
  */
-type KeyToString<K> = K extends number ? string : K extends string | symbol ? K : K extends number | infer U ? string | U : K;
 
-export function onEach<K, T>(
+function onEach<K, T>(
 	target: Map<K, undefined | T>,
 	render: (value: T, key: K) => void,
 	makeKey?: (value: T, key: K) => SortKeyType,
 ): void;
-export function onEach<T>(
+function onEach<T>(
 	target: Set<T>,
 	render: (value: T) => void,
 	makeKey?: (value: T) => SortKeyType,
 ): void;
-export function onEach<T>(
+function onEach<T>(
 	target: ReadonlyArray<undefined | T>,
 	render: (value: T, index: number) => void,
 	makeKey?: (value: T, index: number) => SortKeyType,
 ): void;
-export function onEach<K extends string | number | symbol, T>(
+function onEach<K extends string | number | symbol, T>(
 	target: Record<K, undefined | T>,
 	render: (value: T, index: KeyToString<K>) => void,
 	makeKey?: (value: T, index: KeyToString<K>) => SortKeyType,
@@ -979,7 +1977,7 @@ export function onEach<K extends string | number | symbol, T>(
  *
  * @param target The observable array, object, Map, or Set to iterate over. Values that are `undefined` are skipped.
  * @param render A function called for each item. It receives the item's (observable) value and its index/key. For Sets, only the value is provided. 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, arrays use index order, Sets use the item value itself, and objects/Maps use their natural key 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.
+ * @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, arrays use index order, Sets use the item value itself, and objects/Maps use their natural key order. The returned key can be a number, string, or an array of numbers/strings for composite sorting. Use {@link Aberdeen.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
@@ -1038,9 +2036,9 @@ export function onEach<K extends string | number | symbol, T>(
  *
  * setTimeout(() => $tags.add('reactive'), 2000);
  * ```
- * @see {@link invertString} To easily create keys for reverse sorting.
+ * @see {@link Aberdeen.invertString} To easily create keys for reverse sorting.
  */
-export function onEach(
+function onEach(
 	target: TargetType,
 	render: (value: any, index: any) => void,
 	makeKey?: (value: any, key: any) => SortKeyType,
@@ -1058,41 +2056,9 @@ function isObjEmpty(obj: object): boolean {
 }
 
 /** @private */
-export const EMPTY = Symbol("empty");
+const EMPTY = Symbol("empty");
 
-/**
- * Reactively checks if an observable array, object, Map, or Set 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, object, Map, or Set to check.
- * @returns `true` if the array has length 0, the Map/Set has size 0, or the object has no own enumerable properties, `false` otherwise.
- *
- * @example
- * ```typescript
- * const $items = A.proxy([]);
- *
- * // Reactively display a message if the items array is empty
- * A('div', () => {
- *     if (A.isEmpty($items)) {
- *         A('p i#No items yet!');
- *     } else {
- *         A.onEach($items, item => A('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 {
+function isEmpty(proxied: TargetType): boolean {
 	const target = (proxied as any)[TARGET_SYMBOL] || proxied;
 	const scope = currentScope;
 
@@ -1121,38 +2087,7 @@ export function isEmpty(proxied: TargetType): boolean {
 	return oldEmpty;
 }
 
-/** @private */
-export interface ValueRef<T> {
-	value: T;
-}
-
-/**
- * Reactively counts the number of properties in an object.
- *
- * @param proxied The observable object to count. In case an `array`, `Map`, or `Set` is passed in, a {@link ref} to its `.length` or `.size` 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`, or the collection size for arrays, Maps, and Sets.
- * 
- * @example
- * ```typescript
- * const $items = A.proxy({x: 3, y: 7} as any);
- * const $count = A.count($items);
- *
- * // Create a DOM text node for the count:
- * A('div text=', $count);
- * // <div>2</div>
-
- * // Or we can use it in an {@link derive} function:
- * A(() => console.log("The count is now", $count.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> {
+function count(proxied: TargetType): ValueRef<number> {
 	if (proxied instanceof Array) return ref(proxied, "length");
 	if (proxied instanceof Map || proxied instanceof Set) return ref(proxied, "size");
 
@@ -1175,7 +2110,7 @@ export function count(proxied: TargetType): ValueRef<number> {
 }
 
 /** @internal */
-export function defaultEmitHandler(
+function defaultEmitHandler(
 	target: TargetType,
 	index: string | symbol | number,
 	newData: any,
@@ -1521,34 +2456,17 @@ function optProxy(value: any): any {
 	return proxied;
 }
 
-/**
- * When `proxy` is called with a Promise, the returned object has this shape.
- */
-export interface PromiseProxy<T> {
-	/**
-	 * True if the promise is still pending, false if it has resolved or rejected.
-	 */
-	busy: boolean;
-	/**
-	 * If the promise has resolved, this contains the resolved value.
-	 */
-	value?: T;
-	/**
-	 * If the promise has rejected, this contains the rejection error.
-	 */
-	error?: any;
-}
 
-export function proxy<T extends any>(target: Promise<T>): PromiseProxy<T>;
-export function proxy<T extends any>(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 any>(target: T): ValueRef<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T>;
+function proxy<T extends any>(target: Promise<T>): PromiseProxy<T>;
+function proxy<T extends any>(target: Array<T>): Array<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T >;
+function proxy<T extends object>(target: T): T;
+function proxy<T extends any>(target: T): ValueRef<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T>;
 
 /**
  * Creates a reactive proxy around the given data.
  *
  * Reading properties from the returned proxy within a reactive scope (like one created by
- * {@link A | A} or {@link derive}) establishes a subscription. Modifying properties *through*
+ * {@link Aberdeen | A} or {@link Aberdeen.derive}) establishes a subscription. Modifying properties *through*
  * the proxy will notify subscribed scopes, causing them to re-execute.
  *
  * - Plain objects, arrays, Maps, and Sets are wrapped in a standard JavaScript `Proxy` that intercepts
@@ -1560,7 +2478,7 @@ export function proxy<T extends any>(target: T): ValueRef<T extends number ? num
  *   is set to `false`. If the promise is rejected, `error` is set and `busy` is also
  *   set to `false`.
  *
- * Use {@link unproxy} to get the original underlying data back.
+ * Use {@link Aberdeen.unproxy} to get the original underlying data back.
  * By convention in the examples below, local variables that hold proxied values are prefixed with `$`.
  *
  * @param target - The object, array, Map, Set, or primitive value to make reactive.
@@ -1609,7 +2527,7 @@ export function proxy<T extends any>(target: T): ValueRef<T extends number ? num
  * setTimeout(() => $graph.grow(), 4000);
  * ```
  */
-export function proxy(target: TargetType): TargetType {
+function proxy(target: TargetType): TargetType {
 	if (target instanceof Promise) {
 		const result: PromiseProxy<any> = optProxy({
 			busy: true,
@@ -1630,41 +2548,7 @@ export function proxy(target: TargetType): TargetType {
 	);
 }
 
-/**
- * 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 $user = A.proxy({ name: 'Frank' });
- * const rawUser = A.unproxy($user);
- *
- * // Log reactively
- * A(() => console.log('proxied', $user.name));
- * // The following will only ever log once, as we're not subscribing to any observable
- * A(() => console.log('unproxied', rawUser.name));
- *
- * // This cause the first log to run again:
- * setTimeout(() => $user.name += '!', 1000);
- *
- * // This doesn't cause any new logs:
- * setTimeout(() => rawUser.name += '?', 2000);
- *
- * // Both $user and rawUser end up as `{name: 'Frank!?'}`
- * setTimeout(() => {
- *   console.log('final proxied', $user)
- *   console.log('final unproxied', rawUser)
- * }, 3000);
- * ```
- */
-export function unproxy<T>(target: T): T {
+function unproxy<T>(target: T): T {
 	return target ? (target as any)[TARGET_SYMBOL] || target : target;
 }
 
@@ -1679,7 +2563,7 @@ function destroyWithClass(element: Element, cls: string) {
 
 /**
  * Recursively copies properties or array items from `src` to `dst`.
- * It's designed to work efficiently with reactive proxies created by {@link proxy}.
+ * It's designed to work efficiently with reactive proxies created by {@link Aberdeen.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`
@@ -1705,15 +2589,15 @@ function destroyWithClass(element: Element, cls: string) {
  * ```
  */
 
-export function copy<T extends object>(dst: T, src: T): boolean;
+function copy<T extends object>(dst: T, src: T): boolean;
 /**
  * Like above, but copies `src` into `dst[dstKey]`. This is useful if you're unsure if dst[dstKey]
  * already exists (as the right type of object) or if you don't want to subscribe to dst[dstKey].
  * 
  * @param dstKey - Optional key in `dst` to copy into. 
  */
-export function copy<T extends object>(dst: T, dstKey: keyof T, src: T[typeof dstKey]): boolean;
-export function copy(a: any, b: any, c?: any): boolean {
+function copy<T extends object>(dst: T, dstKey: keyof T, src: T[typeof dstKey]): boolean;
+function copy(a: any, b: any, c?: any): boolean {
 	if (arguments.length > 2) return copySet(a, b, c, 0);
 	return copyImpl(a, b, 0);
 }
@@ -1730,24 +2614,9 @@ function copySet(dst: any, dstKey: any, src: any, flags: number): boolean {
 	return true;
 }
 
-/**
- * Like {@link copy}, but uses merge semantics. Properties in `dst` not present in `src` are kept.
- * `null`/`undefined` in `src` delete properties in `dst`.
- * 
- * @example Basic merge
- * ```typescript
- * const source = { b: { c: 99 }, d: undefined }; // d: undefined will delete
- * const $dest = A.proxy({ a: 1, b: { x: 5 }, d: 4 });
- * A.merge($dest, source);
- * A.merge($dest, 'b', { y: 6 }); // merge into $dest.b
- * A.merge($dest, 'c', { z: 7 }); // $dest.c doesn't exist yet, so it will just be assigned
- * console.log($dest); // proxy({ a: 1, b: { c: 99, x: 5, y: 6 }, c: { z: 7 } })
- * ```
- *
- */
-export function merge<T extends object>(dst: T, value: Partial<T>): boolean;
-export function merge<T extends object>(dst: T, dstKey: keyof T, value: Partial<T[typeof dstKey]>): boolean;
-export function merge(a: any, b: any, c?: any) {
+function merge<T extends object>(dst: T, value: Partial<T>): boolean;
+function merge<T extends object>(dst: T, dstKey: keyof T, value: Partial<T[typeof dstKey]>): boolean;
+function merge(a: any, b: any, c?: any) {
 	if (arguments.length > 2) return copySet(a, b, c, MERGE);
 	return copyImpl(a, b, MERGE);
 }
@@ -1900,91 +2769,19 @@ const MERGE = 1;
 const COPY_SUBSCRIBE = 32;
 const COPY_EMIT = 64;
 
-/**
- * A symbol that controls how Aberdeen handles an object in copy operations and proxy wrapping.
- *
- * The **presence** of this symbol (regardless of its value) prevents deep-copying: the object is
- * stored and passed by reference in {@link clone} and {@link copy}.
- *
- * The **value** of the symbol controls proxy wrapping when the object is read from reactive state:
- * - **Truthy** (e.g. `true`): the object is fully opaque — it is not wrapped in a proxy, so its
- *   properties are not observable. Use this for objects that break when proxied (e.g. class instances
- *   with internal slots, Promises) or that must be invisible to Aberdeen's reactive system.
- * - **Falsy** (e.g. `false`): the object is still wrapped in a proxy, so reads on its properties
- *   create reactive dependencies as normal — only deep-copying is suppressed.
- */
-export const OPAQUE = Symbol("OPAQUE");
+const OPAQUE = Symbol("OPAQUE");
 
-/**
- * Use {@link OPAQUE} instead. This is an alias kept for backward compatibility.
- * 
- * @deprecated
- */
-export const NO_COPY = OPAQUE;
+const NO_COPY = OPAQUE;
 
 // Promises break when proxied, so mark them as fully opaque
 (Promise.prototype as any)[OPAQUE] = true;
 
-/**
- * A reactive object containing CSS variable definitions.
- *
- * Any property you assign to `cssVars` becomes available as a CSS custom property throughout your application.
- *
- * Use {@link setSpacingCssVars} to optionally initialize `cssVars[1]` through `cssVars[12]` with an exponential spacing scale.
- *
- * When you reference a CSS variable in Aberdeen using the `$` prefix (e.g., `$primary`), it automatically resolves to `var(--primary)`.
- * For numeric keys (which can't be used directly as CSS custom property names), Aberdeen prefixes them with `m` (e.g., `$3` becomes `var(--m3)`).
- *
- * When you add the first property to cssVars, Aberdeen automatically creates a reactive `<style>` tag in `<head>`
- * containing the `:root` CSS custom property declarations. The style tag is automatically removed if cssVars becomes empty.
- *
- * @example
- * ```javascript
- * import A from 'aberdeen';
- *
- * // Optionally initialize spacing scale
- * A.setSpacingCssVars(); // Uses defaults: base=1, unit='rem'
- *
- * // Define custom colors - style tag is automatically created
- * A.cssVars.primary = '#3b82f6';
- * A.cssVars.danger = '#ef4444';
- *
- * // Use in elements with the $ prefix
- * A('button bg:$primary fg:white #I'm a primary button');
- *
- * // Use spacing (if setSpacingCssVars() was called)
- * A('hr mt:$3'); // Sets margin-top to var(--m3)
- * ```
- */
-export const cssVars: Record<string, string> = optProxy({});
+// Also, DOM should not be proxied
+if (Node) (Node.prototype as any)[OPAQUE] = true;
 
-/**
- * Initializes `cssVars[0]` through `cssVars[12]` with an exponential spacing scale.
- *
- * The scale is calculated as `2^(n-3) * base`, providing values from `0.25 * base` to `512 * base`.
- *
- * @param base - The base size for the spacing scale that will apply to `cssVars[3]`. Every step up the scale will double this, while every step down will halve it. Defaults to 1.
- * @param unit - The CSS unit to use, like 'rem', 'em', or 'px'. Defaults to 'rem'.
- *
- * @example
- * ```javascript
- * import A from 'aberdeen';
- * // Use default scale (0.25rem to 512rem)
- * A.setSpacingCssVars();
- *
- * // Use custom base size
- * A.setSpacingCssVars(16, 'px'); // 4px to 8192px
- *
- * // Use em units
- * A.setSpacingCssVars(1, 'em'); // 0.25em to 512em
- * 
- * // Show the last generated spacing values
- * A.onEach(A.cssVars, (value, key) => {
- * 	A(`div #${key} → ${value}`)
- * }, (value, key) => parseInt(key)); // Numeric sort
- * ```
- */
-export function setSpacingCssVars(base = 1, unit = 'rem'): void {
+const cssVars: Record<string, string> = optProxy({});
+
+function setSpacingCssVars(base = 1, unit = 'rem'): void {
 	for (let i = 0; i <= 12; i++) {
 		cssVars[i] = 2 ** (i - 3) * base + unit;
 	}
@@ -2012,34 +2809,11 @@ function cssVarRef(value: string): string {
 
 let darkModeState: {value: boolean} | undefined;
 
-/**
- * Returns whether the user's browser prefers a dark color scheme.
- *
- * This function is reactive - scopes that call it will re-execute when the
- * browser's color scheme preference changes (via the `prefers-color-scheme` media query).
- *
- * Use this in combination with {@link A | A} and {@link cssVars} to implement theme switching:
- *
- * @returns `true` if the browser prefers dark mode, `false` if it prefers light mode.
- *
- * @example
- * ```javascript
- * import A from 'aberdeen';
- *
- * // Reactively set colors based on browser preference
- * A(() => {
- *   A.cssVars.bg = A.darkMode() ? '#1a1a1a' : '#ffffff';
- *   A.cssVars.fg = A.darkMode() ? '#e5e5e5' : '#000000';
- * });
- * 
- * A('div bg:$bg fg:$fg p:1rem #Colors change based on system dark mode preference');
- * ```
- */
-export function darkMode(): boolean {
+function darkMode(): boolean {
 	if (!darkModeState) {
 		// Initialize on first use
 
-		if (typeof window === 'undefined' || !window.matchMedia) return false;
+		if (!window || !window.matchMedia) return false;
 		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
 		
 		darkModeState = proxy({ value: mediaQuery.matches });
@@ -2071,14 +2845,7 @@ function cloneValue(v: any, flags: number): any {
 	return typeof v === "object" && v !== null ? cloneRecursive(v, flags) : v;
 }
 
-/**
- * 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.
- * @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 copy of `src`.
- */
-export function clone<T extends object>(src: T): T {
+function clone<T extends object>(src: T): T {
 	if (typeof src !== 'object' || src === null) return src;
 	let flags = 0;
 	const unproxied = (src as any)[TARGET_SYMBOL];
@@ -2112,35 +2879,7 @@ const refHandler: ProxyHandler<RefTarget> = {
 	},
 };
 
-/**
- * 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 A | A} to create two-way data bindings
- * with form elements, and for passing a reactive property to any of the {@link A | A} 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 = A.proxy({ color: 'orange', velocity: 42 });
- *
- * // Usage with `bind`
- * A('input type=text bind=', A.ref($formData, 'color'));
- *
- * // Usage as a dynamic property, causes a TextNode with just the name to be created and live-updated
- * A('p text="Selected color: " text=', A.ref($formData, 'color'), 'color:', A.ref($formData, 'color'));
- *
- * // Changes are actually stored in $formData - this causes logs like `{color: "Blue", velocity 42}`
- * A(() => console.log($formData))
- * ```
- */
-export function ref<T extends TargetType, K extends keyof T>(
+function ref<T extends TargetType, K extends keyof T>(
 	target: T,
 	index: K,
 ): ValueRef<T[K]> {
@@ -2263,18 +3002,6 @@ const SPECIAL_PROPS: { [key: string]: (el: Element, value: any) => void } = {
 	},
 };
 
-/**
- * Make the `create` and `destroy` special properties no-ops.
- *
- * This is useful from within automated testing environments, where the transitioning
- * new and lingering old elements may make writing reliable selectors difficult.
- * 
- * As this is only intended for testing, there's no way to re-enable the special properties
- * once disabled.
- */
-export function disableCreateDestroy() {
-	SPECIAL_PROPS.create = SPECIAL_PROPS.destroy = () => {};
-}
 
 /**
  * The core function for building reactive user interfaces in Aberdeen. It creates and inserts new DOM elements
@@ -2304,7 +3031,7 @@ export function disableCreateDestroy() {
  * - A key followed by a ':' character (with no value), in which case the value is expected as a separate argument. The value is treated as a CSS value to be set inline on the *current* element. Example: `A('div margin-top:', someValueInPx)`. In case the value is a proxied object, its `.value` property will be applied reactively without needing to rerender the parent scope.
  * 
  * ### Function arguments
- * When a function (without arguments nor a return value) is passed in, it will be reactively executed in its own observer scope, preserving the *current* element. So any `A()` invocations within this function will add child elements to or set properties on that element. 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 `A`, have been cleaned - see also {@link clean}).
+ * When a function (without arguments nor a return value) is passed in, it will be reactively executed in its own observer scope, preserving the *current* element. So any `A()` invocations within this function will add child elements to or set properties on that element. 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 `A`, have been cleaned - see also {@link Aberdeen.clean}).
  * 
  * ### Object arguments
  * When an object is passed in, its key-value pairs are used to modify the *current* element according to the *Property rules* below, *unless* the key starts with a `$` character, in which case that character is stripped of and the key/value pair is treated as a CSS property, subject to the *CSS shortcuts* below. In case a value is a proxied object, its `.value` property will be applied reactively without needing to rerender the parent scope. In most cases, the string notation (`key=` and `key:`) is preferred over this object notation, for readability.
@@ -2319,7 +3046,7 @@ export function disableCreateDestroy() {
  * - **Conditional CSS class:** 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 `A('.hidden=', isHidden)` would toggle the `hidden` CSS class. This only works if the `=` is the last character of the string, and the next argument is the value. Its common for the value to be a proxied object, in which case its `.value` is reactively applied without needing to rerender the parent scope.
  * - **Create transition:** When the key is `"create"`, the value will be added as a CSS class to the *current* element immediately, and then removed right 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`. The initial dot is optional. Alternatively, to allow for more complex transitions, the value may be a function that receives the `HTMLElement` being created as its only argument. It is *only* called if this is the top-level element being created in this scope run. See `transitions.ts` in the Aberdeen source code for some examples.
  * - **Destroy transition:** When the key is `"destroy"` the value will be used to apply a CSS transition if the *current* element is later on removed from the DOM and is the top-level element to be removed. This happens as follows: 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`. The initial dot is optional. Alternatively, to allow for more complex transitions, the value may be a function that receives the `HTMLElement` to be removed from the DOM as its only argument. This function may perform any transitions and is then itself responsible for eventually removing the element from the DOM. See `transitions.ts` in the Aberdeen source code for some examples.
- * - **Two-way data binding:** When the key is `"bind"` a two-way binding between the `.value` property of the given proxied object, and the *current* input element (`<input>`, `<select>` or `<textarea>`) is created. This is often used together with {@link ref}, in order to use properties other than `.value`.
+ * - **Two-way data binding:** When the key is `"bind"` a two-way binding between the `.value` property of the given proxied object, and the *current* input element (`<input>`, `<select>` or `<textarea>`) is created. This is often used together with {@link Aberdeen.ref}, in order to use properties other than `.value`.
  * - **Text:**: If the key is `"text"`, the value will be appended as a `TextNode` to the *current* element. The same can also be done with the `#` syntax in string arguments, though `text=` allows additional properties to come after in the same string: `A('button text=Hello click=', alert)`.
  * - **Unsafe HTML:** When the key is `"html"`, the value will be added as HTML to the *current* element. This should only be used in exceptional situations. Beware of XSS! Never use this with untrusted user data.
  * - **Rich text:** When the key is `"rich"`, the value is parsed as simple markdown-like syntax and rendered as inline elements. Supports `*italic*`, `**bold**`, `` `code` ``, and `[link text](/path)`. All text content is safely escaped, making it suitable for user data (though links should be validated if untrusted). Example: `A('p rich="Click *here* for **more** info")`.
@@ -2337,7 +3064,7 @@ export function disableCreateDestroy() {
  * | `fg` | `color` |
  * | `r` | `border-radius` |
  * 
- * Also, when the value is a string starting with `$`, it is treated as a reference to a CSS variable, expanding to `var(--variableName)`. For numeric variable names (which can't be used directly as CSS custom property names), Aberdeen prefixes them with `m`, so `$3` expands to `var(--m3)`. This is primarily intended for use with {@link setSpacingCssVars}, which initializes spacing variables named `0` through `12` with an exponential spacing scale.
+ * Also, when the value is a string starting with `$`, it is treated as a reference to a CSS variable, expanding to `var(--variableName)`. For numeric variable names (which can't be used directly as CSS custom property names), Aberdeen prefixes them with `m`, so `$3` expands to `var(--m3)`. This is primarily intended for use with {@link Aberdeen.setSpacingCssVars}, which initializes spacing variables named `0` through `12` with an exponential spacing scale.
  * 
  * @returns The most inner DOM element that was created (not counting text nodes nor elements created by content functions), or the current element if no new element was created. You should normally not need to use the return value - use this function's DOM manipulation abilities instead. One valid use case is when integrating with non-Aberdeen code that requires a reference to a DOM element.
  *
@@ -2393,10 +3120,10 @@ export function disableCreateDestroy() {
  * A('p text="The color is " text=', $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`.
+ * This is often used together with {@link Aberdeen.ref}, in order to use properties other than `.value`.
  */
 
-export function A(...args: any[]): undefined | Element {
+function A(...args: any[]): undefined | Element {
 	let el: undefined | Element = currentScope.el;
 	let svg: boolean = currentScope.svg
 
@@ -2526,75 +3253,7 @@ function findFirst(str: string, chars: string, startPos: number): number {
 
 let cssCount = 0;
 
-/**
- * Inserts CSS rules into the document, scoping them with a unique class name.
- *
- * The `style` parameter can be either:
- * - A **concise style string** (for rules applying to the root class).
- * - An **object** where keys are selectors (with `&` representing the root class) 
- *   and values are concise style strings or nested objects. When the key does not contain `&`,
- *   it is treated as a descendant selector. So `{p: "color:red"}` becomes `".AbdStlX p { color: red; }"` with `AbdStlX` being the generated class name.
- *
- * ### Concise Style Strings
- * 
- * Concise style strings use two syntaxes (same as inline CSS in {@link A | A}):
- * - **Short form** `key:value` (no space after colon): The value ends at the next whitespace.
- *   Example: `'m:$3 bg:red r:8px'`
- * - **Long form** `key: value;` (space after colon): The value continues until a semicolon.
- *   Example: `'box-shadow: 2px 0 6px black; transition: all 0.3s ease;'`
- * 
- * Both forms can be mixed: `'m:$3 box-shadow: 0 2px 4px rgba(0,0,0,0.2); bg:$cardBg'`
- * 
- * Supports the same CSS shortcuts as {@link A | A} and CSS variable references with `$` (e.g., `$primary`, `$3`).
- *
- * @param style - A concise style string or a style object.
- * @returns The unique class name prefix used for scoping (e.g., `.AbdStl1`). 
- *          Use this prefix with {@link A | A} to apply the styles.
- *
- * @example Basic Usage with Shortcuts and CSS Variables
- * ```typescript
- * const cardClass = A.insertCss({
- *   '&': 'bg:white p:$4 r:8px transition: background-color 0.3s;',
- *   '&:hover': 'bg:#f5f5f5',
- * });
- *
- * A('section', cardClass, () => { 
- *   A('p#Card content'); 
- * });
- * ```
- *
- * @example Nested Selectors and Media Queries
- * ```typescript
- * const formClass = A.insertCss({
- *   '&': 'bg:#0004 p:$3 r:$2',
- *   button: {
- *     '&': 'bg:$primary fg:white p:$2 r:4px cursor:pointer',
- *     '&:hover': 'bg:$primaryHover',
- *     '&:disabled': 'bg:#ccc cursor:not-allowed',
- *     '.icon': 'display:inline-block mr:$1',
- *     '@media (max-width: 600px)': 'p:$1 font-size:14px'
- *   }
- * });
- *
- * A('form', formClass, () => {
- *   A('button', () => {
- *     A('span.icon text=🔥');
- *     A('#Click Me');
- *   });
- * });
- * ```
- *
- * @example Complex CSS Values
- * ```typescript
- * const badge = A.insertCss({
- *   '&::before': 'content: "★"; color:gold mr:$1',
- *   '&': 'position:relative box-shadow: 0 2px 8px rgba(0,0,0,0.15);'
- * });
- *
- * A(badge + ' span#Product Name');
- * ```
- */
-export function insertCss(style: string | object): string {
+function insertCss(style: string | object): string {
 	const prefix = `.AbdStl${++cssCount}`;
 	const css = typeof style === 'string' ? styleStringToCss(style, prefix) : objectToCss(style, prefix);
 	if (css) {
@@ -2688,65 +3347,7 @@ function styleStringToCss(styleStr: string, selector: string): string {
 	return props ? `${selector}{${props}}\n` : "";
 }
 
-/**
- * Inserts CSS rules globally (unscoped).
- * 
- * Works exactly like {@link insertCss}, but without prefixing selectors with a unique class name.
- * This is useful for global resets, base styles, or styles that need to apply to the entire document.
- * 
- * Accepts the same concise style string syntax and CSS shortcuts as {@link insertCss}.
- * See {@link insertCss} for detailed documentation on syntax and shortcuts.
- * 
- * @param style - Object with selectors as keys and concise CSS strings as values.
- * 
- * @example Global Reset and Base Styles
- * ```typescript
- * // Set up global styles using CSS shortcuts
- * A.insertGlobalCss({
- *   "*": "m:0 p:0 box-sizing:border-box",
- *   "body": "font-family: system-ui, sans-serif; m:0 p:$3 bg:#434 fg:#d0dafa",
- *   "a": "text-decoration:none fg:#57f",
- *   "a:hover": "text-decoration:underline",
- *   "code": "font-family:monospace bg:#222 fg:#afc p:4px r:3px"
- * });
- *
- * A('h2#Title without margins');
- * A('a#This is a link');
- * A('code#const x = 42;');
- * ```
- *
- * @example Responsive Global Styles
- * ```typescript
- * A.insertGlobalCss({
- *   "html": "font-size:16px",
- *   "body": "line-height:1.6",
- *   "h1, h2, h3": "font-weight:600 mt:$4 mb:$2",
- *   "@media (max-width: 768px)": {
- *     "html": "font-size:14px",
- *     "body": "p:$2"
- *   },
- *   "@media (prefers-color-scheme: dark)": {
- *     "body": "bg:#1a1a1a fg:#e5e5e5",
- *     "code": "bg:#2a2a2a"
- *   }
- * });
- * ```
- * At-rules such as `@media` and `@keyframes` should use nested objects. For keyframes,
- * the step selectors (`0%`, `50%`, `100%`, etc.) become the nested keys and each value
- * should be a concise CSS declaration string.
- *
- * @example Animation Keyframes
- * ```typescript
- * A.insertGlobalCss({
- *   "@keyframes connection-pulse": {
- *     "0%": "box-shadow: inset 0 0 0 0 rgba(255, 70, 70, 0.4);",
- *     "50%": "box-shadow: inset 0 0 0 6px rgba(255, 70, 70, 0.08);",
- *     "100%": "box-shadow: inset 0 0 0 0 rgba(255, 70, 70, 0.4);"
- *   }
- * });
- * ```
- */
-export function insertGlobalCss(style: object) {
+function insertGlobalCss(style: object) {
 	const css = objectToCss(style, "");
 	if (css) {
 		let cnt = cssSnippetCount++;
@@ -2846,49 +3447,7 @@ function defaultOnError(error: Error) {
 }
 let onError: (error: Error) => boolean | undefined = defaultOnError;
 
-/**
- * Sets a custom error handler function for errors that occur asynchronously
- * within reactive scopes (e.g., during updates triggered by proxy changes in
- * {@link derive} or {@link A | A} 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
- * A.setErrorHandler(error => {
- *   console.warn('Aberdeen render error:', error.message);
- *   // Log to error reporting service
- *   // myErrorReporter.log(error);
- *
- *   try {
- *     // Attempt to show a custom message in the UI
- *     A('div#Oops, something went wrong!', errorClass);
- *   } catch (e) {
- *     // Ignore errors during error handling itself
- *   }
- *
- *   return false; // Suppress default console log and DOM error message
- * });
- *
- * // Styling for our custom error message
- * const errorClass = A.insertCss('background-color:#e31f00 display:inline-block color:white r:3px padding: 2px 4px;');
- *
- * // Cause an error within a render scope.
- * A('div.box', () => {
- *   // Will cause our error handler to insert an error message within the box
- *   noSuchFunction();
- * })
- * ```
- */
-export function setErrorHandler(
+function setErrorHandler(
 	handler?: (error: Error) => boolean | undefined,
 ) {
 	onError = handler || defaultOnError;
@@ -2901,8 +3460,8 @@ export function setErrorHandler(
  * 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 derive}, {@link mount}, {@link A | A} (when given a render function),
- * and internally by constructs like {@link onEach}.
+ * Scopes are created by functions like {@link Aberdeen.derive}, {@link Aberdeen.mount}, {@link Aberdeen | A} (when given a render function),
+ * and internally by constructs like {@link Aberdeen.onEach}.
  *
  * @param cleaner - The function to execute during cleanup.
  *
@@ -2932,79 +3491,31 @@ export function setErrorHandler(
  * ```
  */
 
-export function clean(cleaner: () => void) {
+function clean(cleaner: () => void) {
 	currentScope.cleaners.push(cleaner);
 }
 
-/**
- * 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.
- *
- * 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 A | A} within this function. Its return value will be made available as an
- *   observable returned by the `derive()` function.
- * @returns An observable object, with its `value` property containing whatever the last run of `func` returned.
- *
- * @example Observation creating UI components
- * ```typescript
- * const $data = A.proxy({ user: 'Frank', notifications: 42 });
- *
- * A('main', () => {
- *   console.log('Welcome');
- *   A('h3#Welcome, ' + $data.user); // Reactive text
- *
- *   A.derive(() => {
- *     // When $data.notifications changes, only this inner scope reruns,
- *     // leaving the `<p>Welcome, ..</p>` untouched.
- *     console.log('Notifications');
- *     A('code.notification-badge text=', $data.notifications);
- *     A('a text=Notify! click=', () => $data.notifications++);
- *   });
- * });
- * ```
- *
- * ***Note*** that the above could just as easily be done using `A(func)` instead of `derive(func)`.
- *
- * @example Observation with return value
- * ```typescript
- * const $counter = A.proxy(0);
- * setInterval(() => $counter.value++, 1000);
- * const $double = A.derive(() => $counter.value * 2);
- *
- * A('h3', () => {
- *     A(`#counter=${$counter.value} double=${$double.value}`);
- * })
- * ```
- *
- * @overload
- * @param func Func without a return value.
- */
-export function derive<T>(func: () => T): ValueRef<T> {
+function derive<T>(func: () => T): ValueRef<T> {
 	return new ResultScope<T>(func).result;
 }
 
 /**
  * Attaches a reactive Aberdeen UI fragment to an existing DOM element. Without the use of
- * this function, {@link A | A} will assume `document.body` as its root.
+ * this function, {@link Aberdeen | A} will assume `document.body` as its root.
  *
  * 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.
  *
- * Calls to {@link A | A} inside `func` will append nodes to `parentElement`.
- * You can nest {@link derive} or other {@link A | A} scopes within `func`.
- * Use {@link unmountAll} to clean up all mounted scopes and their DOM nodes.
+ * Calls to {@link Aberdeen | A} inside `func` will append nodes to `parentElement`.
+ * You can nest {@link Aberdeen.derive} or other {@link Aberdeen | A} scopes within `func`.
+ * Use {@link Aberdeen.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 derive} or {@link A | A} or {@link mount}) scope that gets cleaned up, so will the mount.
+ * ({@link Aberdeen.derive} or {@link Aberdeen | A} or {@link Aberdeen.mount}) scope that gets cleaned up, so will the mount.
  *
  * @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 A | A}.
+ * @param func - The function that defines the UI fragment, typically containing calls to {@link Aberdeen | A}.
  *
  * @example Basic Mount
  * ```javascript
@@ -3031,18 +3542,11 @@ export function derive<T>(func: () => T): ValueRef<T> {
  * Note how the inner mount behaves reactively as well, automatically unmounting when it's parent observer scope re-runs.
  */
 
-export function mount(parentElement: Element, func: () => void) {
+function mount(parentElement: Element, func: () => void) {
 	new MountScope(parentElement, func);
 }
 
-/**
- * Removes all Aberdeen-managed DOM nodes and stops all active reactive scopes
- * (created by {@link mount}, {@link derive}, {@link A | A} with functions, etc.).
- *
- * This effectively cleans up the entire Aberdeen application state. Aside from in
- * automated tests, there should probably be little reason to call this function.
- */
-export function unmountAll() {
+function unmountAll() {
 	ROOT_SCOPE.remove();
 	cssCount = 0;
 }
@@ -3050,10 +3554,10 @@ export function unmountAll() {
 /**
  * Executes a function or retrieves a value *without* creating subscriptions in the current reactive scope, and returns its result.
  *
- * This is useful when you need to access reactive data inside a reactive scope (like {@link A | A})
+ * This is useful when you need to access reactive data inside a reactive scope (like {@link Aberdeen | A})
  * but do not want changes to that specific data to trigger a re-execute of the scope.
  * 
- * Note: You may also use {@link unproxy} to get to the raw underlying data structure, which can be used to similar effect.
+ * Note: You may also use {@link Aberdeen.unproxy} to get to the raw underlying data structure, which can be used to similar effect.
  *
  * @param target - Either a function to execute, or an object (which may also be an Array or a Map) to index.
  * @param key - Optional key/index to use when `target` is an object.
@@ -3073,12 +3577,12 @@ export function unmountAll() {
  *
  */
 
-export function peek<T extends object, K extends keyof T>(target: T, key: K): T[K];
-export function peek<K,V>(target: Map<K,V>, key: K): V | undefined;
-export function peek<T>(target: T[], key: number): T | undefined;
-export function peek<T>(target: () => T): T;
+function peek<T extends object, K extends keyof T>(target: T, key: K): T[K];
+function peek<K,V>(target: Map<K,V>, key: K): V | undefined;
+function peek<T>(target: T[], key: number): T | undefined;
+function peek<T>(target: () => T): T;
 
-export function peek(target: any, key?: any) {
+function peek(target: any, key?: any) {
 	peeking++;
 	try {
 		if (arguments.length === 1) {
@@ -3092,17 +3596,17 @@ export function peek(target: any, key?: any) {
 }
 
 /** When using a Map as `source`. */
-export function map<K, IN, OUT>(
+function map<K, IN, OUT>(
 	source: Map<K, IN>,
 	func: (value: IN, key: K) => undefined | OUT,
 ): Map<K, OUT>;
 /** When using an array as `source`. */
-export function map<IN, OUT>(
+function map<IN, OUT>(
 	source: Array<IN>,
 	func: (value: IN, index: number) => undefined | OUT,
 ): Array<OUT>;
 /** When using an object as `source`. */
-export function map<IN, const IN_KEY extends string | number | symbol, OUT>(
+function map<IN, const IN_KEY extends string | number | symbol, OUT>(
 	source: Record<IN_KEY, IN>,
 	func: (value: IN, index: KeyToString<IN_KEY>) => undefined | OUT,
 ): Record<string | symbol, OUT>;
@@ -3149,7 +3653,7 @@ export function map<IN, const IN_KEY extends string | number | symbol, OUT>(
  * // $activeUserNames becomes proxy({ u1: 'Alice', u2: 'Bob', u3: 'Charlie' })
  * ```
  */
-export function map(
+function map(
 	source: any,
 	func: (value: any, key: any) => any,
 ): any {
@@ -3182,18 +3686,18 @@ export function map(
 }
 
 /** When using an array as `source`. */
-export function multiMap<IN, OUT extends { [key: string | symbol]: any }>(
+function multiMap<IN, OUT extends { [key: string | symbol]: any }>(
 	source: Array<IN>,
 	func: (value: IN, index: number) => OUT | undefined,
 ): OUT;
 /** When using an object as `source`. */
-export function multiMap<
+function multiMap<
 	K extends string | number | symbol,
 	IN,
 	OUT extends { [key: string | symbol]: any },
 >(source: Record<K, IN>, func: (value: IN, index: KeyToString<K>) => OUT | undefined): OUT;
 /** When using a Map as `source`. */
-export function multiMap<
+function multiMap<
 	K,
 	IN,
 	OUT extends { [key: string | symbol]: any },
@@ -3239,7 +3743,7 @@ export function multiMap<
  * // $itemsById becomes proxy({ a: 10, aa: 100, b: 20, bb: 200, c: 30, cc: 300 })
  * ```
  */
-export function multiMap(
+function multiMap(
 	source: any,
 	func: (value: any, key: any) => Record<string | symbol, any>,
 ): any {
@@ -3257,12 +3761,12 @@ export function multiMap(
 }
 
 /** When using an object as `array`. */
-export function partition<OUT_K extends string | number | symbol, IN_V>(
+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<
+function partition<
 	IN_K extends string | number | symbol,
 	OUT_K extends string | number | symbol,
 	IN_V,
@@ -3271,7 +3775,7 @@ export function partition<
 	func: (value: IN_V, key: IN_K) => undefined | OUT_K | OUT_K[],
 ): Record<OUT_K, Record<IN_K, IN_V>>;
 /** When using a Map as `source`. */
-export function partition<
+function partition<
 	IN_K extends string | number | symbol,
 	OUT_K extends string | number | symbol,
 	IN_V,
@@ -3285,7 +3789,7 @@ export function partition<
  * 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,
+ * This function iterates through the `source` proxy using {@link Aberdeen.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.
@@ -3300,7 +3804,7 @@ export function partition<
  * 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 source - The input proxied Array or Record (e.g., created by {@link Aberdeen.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.
@@ -3347,7 +3851,7 @@ export function partition<
  * console.log($usersByTag);
  * ```
  */
-export function partition<
+function partition<
 	IN_K extends string | number | symbol,
 	OUT_K extends string | number | symbol,
 	IN_V,
@@ -3378,34 +3882,7 @@ export function partition<
 	return out;
 }
 
-/**
- * Renders a live, recursive dump of a proxied data structure (or any value)
- * into the DOM at the current {@link A | A} 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 A from 'aberdeen';
- *
- * const $state = A.proxy({
- *   user: { name: 'Frank', kids: 1 },
- *   items: ['a', 'b']
- * });
- *
- * A('h2#Live State Dump');
- * A.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) {
+function dump<T>(data: T) {
 	const org = dumpSeen;
 	dumpSeen ||= new Set();
 	try {
@@ -3449,20 +3926,7 @@ function rawDump<T>(data: T, seen: Set<any>) {
 	}
 }
 
-/**
- * When set on an object or its prototype chain, {@link dump} calls this as a render function
- * (with the object as `this`) instead of its default recursive rendering. If the value is not 
- * a function, it's treated as a string to display. 
- *
- * @example
- * ```typescript
- * class Color {
- *   constructor(public r: number, public g: number, public b: number) {}
- *   [CUSTOM_DUMP]() { A(`#rgb(${this.r}, ${this.g}, ${this.b})`); }
- * }
- * ```
- */
-export const CUSTOM_DUMP = Symbol("CUSTOM_DUMP");
+const CUSTOM_DUMP = Symbol("CUSTOM_DUMP");
 
 (Date.prototype as any)[CUSTOM_DUMP] = function(this: Date) {
 	A("#<Date> " + this.toISOString());
@@ -3495,7 +3959,7 @@ function handleError(e: any, showMessage: boolean) {
 }
 
 /** @internal */
-export function withEmitHandler(
+function withEmitHandler(
 	handler: (
 		target: TargetType,
 		index: any,
@@ -3514,8 +3978,25 @@ export function withEmitHandler(
 }
 
 
-// Automatically add cssVars and cssSnippets (from insertCss) into a <head> style tag
-if (typeof document !== "undefined") {
+/**
+ * Build the `:root` CSS variable declarations from {@link Aberdeen.cssVars}, without subscribing.
+ * Shared between the reactive `<head>` injection (browser) and {@link buildHeadCss} (SSR).
+ * @internal
+ */
+function buildCssVars(): string {
+	if (isEmpty(cssVars)) return "";
+	let css = ":root{";
+	for (const [key, value] of Object.entries(cssVars)) {
+		const varName = DIGIT_FIRST.test(String(key)) ? `m${key}` : key;
+		css += `--${varName}:${value};`;
+	}
+	return css + "}\n";
+}
+
+// Automatically add cssVars and cssSnippets (from insertCss) into a <head> <style> tag. This
+// runs for any instance that has a document — including a server instance, whose <head> the
+// SSR entry serializes after rendering.
+if (document) {
 	leakScope(() => {
 		A(() => {
 			if (isEmpty(cssSnippets) && isEmpty(cssVars)) return;
@@ -3525,14 +4006,8 @@ if (typeof document !== "undefined") {
 						A('#', value);
 					});
 					A(() => {
-						if (isEmpty(cssVars)) return;
-						let css = ":root{";
-						for(const [key, value] of Object.entries(cssVars)) {
-							const varName = DIGIT_FIRST.test(String(key)) ? `m${key}` : key;
-							css += `--${varName}:${value};`;
-						}
-						css += "}\n";
-						A('#', css);
+						let css = buildCssVars();
+						if (css) A('#', css);
 					})
 				});
 			});
@@ -3540,6 +4015,10 @@ if (typeof document !== "undefined") {
 	});
 }
 
+// Honor the per-instance options.
+// Make `create`/`destroy` transitions no-ops for this instance when disabled (e.g. for SSR).
+if (options.transitions === false) SPECIAL_PROPS.create = SPECIAL_PROPS.destroy = () => {};
+
 /**
  * The main Aberdeen API. `A` is itself a callable function for building reactive DOM trees
  * (creating elements, setting attributes, adding content). All other Aberdeen functions and
@@ -3556,35 +4035,42 @@ if (typeof document !== "undefined") {
  * });
  * ```
  */
-export default Object.assign(A, {
-	/** {@inheritDoc clean} */ clean,
-	/** {@inheritDoc clone} */ clone,
-	/** {@inheritDoc copy} */ copy,
-	/** {@inheritDoc count} */ count,
-	/** {@inheritDoc cssVars} */ cssVars,
-	/** {@inheritDoc CUSTOM_DUMP} */ CUSTOM_DUMP,
-	/** {@inheritDoc darkMode} */ darkMode,
-	/** {@inheritDoc derive} */ derive,
-	/** {@inheritDoc disableCreateDestroy} */ disableCreateDestroy,
-	/** {@inheritDoc dump} */ dump,
-	/** {@inheritDoc insertCss} */ insertCss,
-	/** {@inheritDoc insertGlobalCss} */ insertGlobalCss,
-	/** {@inheritDoc invertString} */ invertString,
-	/** {@inheritDoc isEmpty} */ isEmpty,
-	/** {@inheritDoc map} */ map,
-	/** {@inheritDoc merge} */ merge,
-	/** {@inheritDoc mount} */ mount,
-	/** {@inheritDoc multiMap} */ multiMap,
-	/** {@inheritDoc OPAQUE} */ OPAQUE,
-	/** {@inheritDoc NO_COPY} */ NO_COPY,
-	/** {@inheritDoc onEach} */ onEach,
-	/** {@inheritDoc partition} */ partition,
-	/** {@inheritDoc peek} */ peek,
-	/** {@inheritDoc proxy} */ proxy,
-	/** {@inheritDoc ref} */ ref,
-	/** {@inheritDoc runQueue} */ runQueue,
-	/** {@inheritDoc setErrorHandler} */ setErrorHandler,
-	/** {@inheritDoc setSpacingCssVars} */ setSpacingCssVars,
-	/** {@inheritDoc unmountAll} */ unmountAll,
-	/** {@inheritDoc unproxy} */ unproxy,
-});
+return Object.assign(A, {
+	clean,
+	clone,
+	copy,
+	count,
+	cssVars,
+	CUSTOM_DUMP,
+	darkMode,
+	defaultEmitHandler,
+	derive,
+	dump,
+	/** EMPTY sentinel (used by `aberdeen/prediction`). @internal */ EMPTY,
+	insertCss,
+	insertGlobalCss,
+	invertString,
+	isEmpty,
+	/** Internal scope helper (used by `aberdeen/route`). @internal */ leakScope,
+	map,
+	/** Map/Set size tracking symbol (used by `aberdeen/prediction`). @internal */ MAP_SIZE_SYMBOL,
+	merge,
+	mount,
+	multiMap,
+	OPAQUE,
+	NO_COPY,
+	onEach,
+	partition,
+	peek,
+	proxy,
+	ref,
+	runQueue,
+	setErrorHandler,
+	setSpacingCssVars,
+	unmountAll,
+	unproxy,
+	/** The window this instance renders against (used by `aberdeen/route`). @internal */ window,
+	/** Run a function with a custom emit handler (used by `aberdeen/prediction`). @internal */ withEmitHandler,
+}) as unknown as Aberdeen;
+
+}