npm - aberdeen - Versions diffs - 1.4.3 → 1.6.0 - Mend

aberdeen 1.4.3 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/aberdeen.d.ts +72 -7
package/dist/aberdeen.js +52 -7
package/dist/aberdeen.js.map +3 -3
package/dist/route.js +4 -4
package/dist/route.js.map +3 -3
package/dist-min/aberdeen.js +7 -5
package/dist-min/aberdeen.js.map +3 -3
package/dist-min/route.js.map +2 -2
package/package.json +5 -2
package/skill/SKILL.md +579 -199
package/skill/aberdeen.md +2322 -0
package/skill/dispatcher.md +126 -0
package/skill/prediction.md +73 -0
package/skill/route.md +249 -0
package/skill/transitions.md +59 -0
package/src/aberdeen.ts +129 -15
package/src/route.ts +3 -3
package/skill/references/prediction.md +0 -45
package/skill/references/routing.md +0 -81
package/skill/references/transitions.md +0 -52

package/skill/aberdeen.md ADDED Viewed

@@ -0,0 +1,2322 @@
+[**Aberdeen v1.6.0**](README.md)
+***
+[Aberdeen](README.md) / aberdeen
+# aberdeen
+## Interfaces
+### PromiseProxy
+Defined in: [aberdeen.ts:1315](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1315)
+When `proxy` is called with a Promise, the returned object has this shape.
+#### Type Parameters
+##### T
+`T`
+#### Properties
+##### busy
+> **busy**: `boolean`
+Defined in: [aberdeen.ts:1319](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1319)
+True if the promise is still pending, false if it has resolved or rejected.
+##### error?
+> `optional` **error**: `any`
+Defined in: [aberdeen.ts:1327](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1327)
+If the promise has rejected, this contains the rejection error.
+##### value?
+> `optional` **value**: `T`
+Defined in: [aberdeen.ts:1323](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1323)
+If the promise has resolved, this contains the resolved value.
+## Variables
+### cssVars
+> `const` **cssVars**: `Record`\<`string`, `string`\>
+Defined in: [aberdeen.ts:1737](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1737)
+A reactive object containing CSS variable definitions.
+Any property you assign to `cssVars` becomes available as a CSS custom property throughout your application.
+Use [setSpacingCssVars](#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 { cssVars, setSpacingCssVars, $ } from 'aberdeen';
+// Optionally initialize spacing scale
+setSpacingCssVars(); // Uses defaults: base=1, unit='rem'
+// Define custom colors - style tag is automatically created
+cssVars.primary = '#3b82f6';
+cssVars.danger = '#ef4444';
+// Use in elements with the $ prefix
+$('button bg:$primary fg:white');
+// Use spacing (if setSpacingCssVars() was called)
+$('div mt:$3'); // Sets margin-top to var(--m3)
+```
+***
+### NO\_COPY
+> `const` **NO\_COPY**: *typeof* [`NO_COPY`](#no_copy)
+Defined in: [aberdeen.ts:1701](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1701)
+A symbol that can be added to an object to prevent it from being cloned by [clone](#clone) or [copy](#copy).
+This is useful for objects that should be shared by reference. That also mean that their contents won't
+be observed for changes.
+## Functions
+### $()
+> **$**(...`args`): `undefined` \| `Element`
+Defined in: [aberdeen.ts:2079](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2079)
+The core function for building reactive user interfaces in Aberdeen. It creates and inserts new DOM elements
+and sets attributes/properties/event listeners on DOM elements. It does so in a reactive way, meaning that
+changes will be (mostly) undone when the current *scope* is destroyed or will be re-execute.
+#### Parameters
+##### args
+...`any`[]
+Any number of arguments can be given. How they're interpreted depends on their types:
+- `string`: Strings can be used to create and insert new elements, set classnames for the *current* element, and add text to the current element.
+  The format of a string is: (**tag** | `.` **class** | **key**=**val** | **key**="**long val**")* ('#' **text** | **key**=)?
+  So there can be:
+  - Any number of **tag** element, like `h1` or `div`. These elements are created, added to the *current* element, and become the new *current* element for the rest of this `$` function execution.
+  - Any number of CSS classes prefixed by `.` characters. These classes will be added to the *current* element. Optionally, CSS classes can be appended to a **tag** without a space. So both `div.myclass` and `div .myclass` are valid and do the same thing.
+  - Any number of key/value pairs with string values, like `placeholder="Your name"` or `data-id=123`. These will be handled according to the rules specified for `object`, below, but with the caveat that values can only be strings. The quotes around string values are optional, unless the value contains spaces. It's not possible to escape quotes within the value. If you want to do that, or if you have user-provided values, use the `object` syntax (see below) or end your string with `key=` followed by the data as a separate argument (see below).
+  - The string may end in a '#' followed by text, which will be added as a TextNode to the *current* element. The text ranges til the end of the string, and may contain any characters, including spaces and quotes.
+  - Alternatively, the string may end in a key followed by an '=' character, in which case the value is expected as a separate argument. The key/value pair is set according to the rules specified for `object` below. This is useful when the value is not a string or contains spaces or user data. Example: `$('button text="Click me" click=', () => alert('Clicked!'))` or `$('input.value=', someUserData, "placeholder=", "Type your stuff")`.
+- `function`: When a function (without argument nor a return value) is passed in, it will be reactively executed in its own observer scope, preserving the *current element*. So any `$()` invocations within this function will create DOM elements with our *current* element as parent. If the function reads observable data, and that data is changed later on, the function we re-execute (after side effects, such as DOM modifications through `$`, have been cleaned - see also [clean](#clean)).
+- `object`: When an object is passed in, its key-value pairs are used to modify the *current* element in the following ways...
+  - `{<attrName>: any}`: The common case is setting the value as an HTML attribute named key. So `{placeholder: "Your name"}` would add `placeholder="Your name"` to the current HTML element.
+  - `{<propName>: boolean}` or `{value: any}` or `{selectedIndex: number}`: If the value is a boolean, or if the key is `value` or `selectedIndex`, it is set on the `current` element as a DOM property instead of an HTML attribute. For example `{checked: true}` would do `el.checked = true` for the *current* element.
+  - `{".class": boolean}`: If the key starts with a `.` character, its either added to or removed from the *current* element as a CSS class, based on the truthiness of the value. So `{".hidden": hide}` would toggle the `hidden` CSS class.
+  - `{<eventName>: function}`: If the value is a `function` it is set as an event listener for the event with the name given by the key. For example: `{click: myClickHandler}`.
+  - `{$<styleProp>: value}`: If the key starts with a `$` character, set a CSS style property with the name of the rest of the key to the given value. Example: `{$backgroundColor: 'red'}`.
+  - `{create: string}`: Add the value string as a CSS class to the *current* element, *after* the browser has finished doing a layout pass. This behavior only triggers when the scope setting the `create` is the top-level scope being (re-)run. This allows for creation transitions, without triggering the transitions for deeply nested elements being drawn as part of a larger component. The string may also contain multiple dot-separated CSS classes, such as `.fade.grow`.
+  - `{destroy: string}`: When the *current* element is a top-level element to be removed (due to reactivity cleanup), actual removal from the DOM is delayed by 2 seconds, and in the mean time the value string is added as a CSS class to the element, allowing for a deletion transition. The string may also contain multiple dot-separated CSS classes, such as `.fade.shrink`.
+  - `{create: function}` and `{destroy: function}`: The function is invoked when the *current* element is the top-level element being created/destroyed. It can be used for more involved creation/deletion animations. In case of `destroy`, the function is responsible for actually removing the element from the DOM (eventually). See `transitions.ts` in the Aberdeen source code for some examples.
+  - `{bind: <obsValue>}`: Create a two-way binding element between the `value` property of the given observable (proxy) variable, and the *current* input element (`<input>`, `<select>` or `<textarea>`). This is often used together with [ref](#ref), in order to use properties other than `.value`.
+  - `{<any>: <obsvalue>}`: Create a new observer scope and read the `value` property of the given observable (proxy) variable from within it, and apply the contained value using any of the other rules in this list. Example:
+     ```typescript
+     const myColor = proxy('red');
+     $('p#Test', {$color: myColor, click: () => myColor.value = 'yellow'})
+     // Clicking the text will cause it to change color without recreating the <p> itself
+     ```
+     This is often used together with [ref](#ref), in order to use properties other than `.value`.
+  - `{text: string|number}`: Add the value as a `TextNode` to the *current* element.
+  - `{html: string}`: Add the value as HTML to the *current* element. This should only be used in exceptional situations. And of course, beware of XSS.
+  - `Node`: If a DOM Node (Element or TextNode) is passed in, it is added as a child to the *current* element. If the Node is an Element, it becomes the new *current* element for the rest of this `$` function execution.
+#### Returns
+`undefined` \| `Element`
+The most inner DOM element that was created (not counting text nodes nor elements created by content functions),
+         or undefined if no elements were created.
+#### Examples
+```typescript
+$('button.secondary.outline text=Submit color:red disabled=', false, 'click=', () => console.log('Clicked!'));
+```
+We want to set `disabled` as a property instead of an attribute, so we must use the `key=` syntax in order to provide
+`false` as a boolean instead of a string.
+```typescript
+let inputElement: Element = $('label text="Click me" input type=checkbox');
+// You should usually not touch raw DOM elements, unless when integrating
+// with non-Aberdeen code.
+console.log('DOM element:', inputElement);
+```
+```typescript
+const state = proxy({ count: 0 });
+$('div', () => { // Outer element
+  // This scope re-renders when state.count changes
+  $(`p#Count is ${state.count}`);
+  $('button text=Increment click=', () => state.count++);
+});
+```
+```typescript
+const user = proxy({ name: '' });
+$('input placeholder=Name bind=', ref(user, 'name'));
+$('h3', () => { // Reactive scope
+  $(`#Hello ${user.name || 'stranger'}`);
+});
+```
+```typescript
+const show = proxy(false);
+$('button click=', () => show.value = !show.value, () => $(show.value ? '#Hide' : '#Show'));
+$(() => { // Reactive scope
+  if (show.value) {
+    $('p#Details are visible!');
+  }
+});
+```
+***
+### clean()
+> **clean**(`cleaner`): `void`
+Defined in: [aberdeen.ts:2481](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2481)
+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 [derive](#derive), [mount](#mount), [$](#) (when given a render function),
+and internally by constructs like [onEach](#oneach).
+#### Parameters
+##### cleaner
+() => `void`
+The function to execute during cleanup.
+#### Returns
+`void`
+#### Example
+```typescript
+const myArray = proxy([3, 5, 10]);
+let sum = proxy(0);
+// Show the array items and maintain the sum
+onEach(myArray, (item, index) => {
+    $(`code#${index}→${item}`);
+    // We'll update sum.value using peek, as += first does a read, but
+    // we don't want to subscribe.
+    peek(() => sum.value += item);
+    // Clean gets called before each rerun for a certain item index
+    // No need for peek here, as the clean code doesn't run in an
+    // observer scope.
+    clean(() => sum.value -= item);
+})
+// Show the sum
+$('h1 text=', sum);
+// Make random changes to the array
+const rnd = () => 0|(Math.random()*20);
+setInterval(() => myArray[rnd()] = rnd(), 1000);
+```
+***
+### clone()
+> **clone**\<`T`\>(`src`): `T`
+Defined in: [aberdeen.ts:1845](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1845)
+Clone an (optionally proxied) object or array.
+#### Type Parameters
+##### T
+`T` *extends* `object`
+The type of the objects being copied.
+#### Parameters
+##### src
+`T`
+The object or array to clone. If it is proxied, `clone` will subscribe to any changes to the (nested) data structure.
+#### Returns
+`T`
+A new unproxied array or object (of the same type as `src`), containing a deep copy of `src`.
+***
+### copy()
+#### Call Signature
+> **copy**\<`T`\>(`dst`, `src`): `boolean`
+Defined in: [aberdeen.ts:1490](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1490)
+Recursively copies properties or array items from `src` to `dst`.
+It's designed to work efficiently with reactive proxies created by [proxy](#proxy).
+- **Minimizes Updates:** When copying between objects/arrays (proxied or not), if a nested object
+  exists in `dst` with the same constructor as the corresponding object in `src`, `copy`
+  will recursively copy properties into the existing `dst` object instead of replacing it.
+  This minimizes change notifications for reactive updates.
+- **Handles Proxies:** Can accept proxied or unproxied objects/arrays for both `dst` and `src`.
+- **Cross-Type Copying:** Supports copying between Maps and objects. When copying from an object
+  to a Map, object properties become Map entries. When copying from a Map to an object, Map entries
+  become object properties (only for Maps with string/number/symbol keys).
+##### Type Parameters
+###### T
+`T` *extends* `object`
+The type of the objects being copied.
+##### Parameters
+###### dst
+`T`
+The destination object/array/Map (proxied or unproxied).
+###### src
+`T`
+The source object/array/Map (proxied or unproxied). It won't be modified.
+##### Returns
+`boolean`
+`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
+```typescript
+const source = proxy({ a: 1, b: { c: 2 } });
+const dest = proxy({ b: { d: 3 } });
+copy(dest, source);
+console.log(dest); // proxy({ a: 1, b: { c: 2 } })
+copy(dest, 'b', { e: 4 });
+console.log(dest); // proxy({ a: 1, b: { e: 4 } })
+```
+#### Call Signature
+> **copy**\<`T`\>(`dst`, `dstKey`, `src`): `boolean`
+Defined in: [aberdeen.ts:1497](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1497)
+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].
+##### Type Parameters
+###### T
+`T` *extends* `object`
+##### Parameters
+###### dst
+`T`
+###### dstKey
+keyof `T`
+Optional key in `dst` to copy into.
+###### src
+`T`\[keyof `T`\]
+##### Returns
+`boolean`
+***
+### count()
+> **count**(`proxied`): `ValueRef`\<`number`\>
+Defined in: [aberdeen.ts:1012](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1012)
+Reactively counts the number of properties in an objects.
+#### Parameters
+##### proxied
+`TargetType`
+The observable object to count. In case an `array` is passed in, a [ref](#ref) to its `.length` will be returned.
+#### Returns
+`ValueRef`\<`number`\>
+an observable object for which the `value` property reflects the number of properties in `proxied` with a value other than `undefined`.
+#### Example
+```typescript
+const items = proxy({x: 3, y: 7} as any);
+const cnt = count(items);
+// Create a DOM text node for the count:
+$('div text=', cnt);
+// <div>2</div>
+// Or we can use it in an {@link derive} function:
+$(() => console.log("The count is now", cnt.value));
+// The count is now 2
+// Adding/removing items will update the count
+items.z = 12;
+// Asynchronously, after 0ms:
+// <div>3</div>
+// The count is now 3
+```
+***
+### darkMode()
+> **darkMode**(): `boolean`
+Defined in: [aberdeen.ts:1819](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1819)
+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 [$](#) and [cssVars](#cssvars) to implement theme switching:
+#### Returns
+`boolean`
+`true` if the browser prefers dark mode, `false` if it prefers light mode.
+#### Example
+```javascript
+import { darkMode, cssVars, $, mount } from 'aberdeen';
+// Reactively set colors based on browser preference
+$(() => {
+  if (darkMode()) { // Optionally override this with user settings
+    cssVars.bg = '#1a1a1a';
+    cssVars.fg = '#e5e5e5';
+  } else {
+    cssVars.bg = '#ffffff';
+    cssVars.fg = '#000000';
+  }
+});
+```
+***
+### derive()
+> **derive**\<`T`\>(`func`): `ValueRef`\<`T`\>
+Defined in: [aberdeen.ts:2533](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2533)
+Creates a reactive scope that automatically re-executes the provided function
+whenever any proxied data (created by [proxy](#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 [clean](#clean) to register cleanup logic for the scope.
+Use [peek](#peek) or [unproxy](#unproxy) within the function to read proxied data without subscribing to it.
+#### Type Parameters
+##### T
+`T`
+#### Parameters
+##### func
+() => `T`
+The function to execute reactively. Any DOM manipulations should typically
+  be done using [$](#) within this function. Its return value will be made available as an
+  observable returned by the `derive()` function.
+#### Returns
+`ValueRef`\<`T`\>
+An observable object, with its `value` property containing whatever the last run of `func` returned.
+#### Examples
+```typescript
+const data = proxy({ user: 'Frank', notifications: 42 });
+$('main', () => {
+  console.log('Welcome');
+  $('h3#Welcome, ' + data.user); // Reactive text
+  derive(() => {
+    // When data.notifications changes, only this inner scope reruns,
+    // leaving the `<p>Welcome, ..</p>` untouched.
+    console.log('Notifications');
+    $('code.notification-badge text=', data.notifications);
+    $('a text=Notify! click=', () => data.notifications++);
+  });
+});
+```
+***Note*** that the above could just as easily be done using `$(func)` instead of `derive(func)`.
+```typescript
+const counter = proxy(0);
+setInterval(() => counter.value++, 1000);
+const double = derive(() => counter.value * 2);
+$('h3', () => {
+    $(`#counter=${counter.value} double=${double.value}`);
+})
+```
+***
+### dump()
+> **dump**\<`T`\>(`data`): `T`
+Defined in: [aberdeen.ts:2953](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2953)
+Renders a live, recursive dump of a proxied data structure (or any value)
+into the DOM at the current [$](#) 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.
+#### Type Parameters
+##### T
+`T`
+The type of the data being dumped.
+#### Parameters
+##### data
+`T`
+The proxied data structure (or any value) to display.
+#### Returns
+`T`
+The original `data` argument, allowing for chaining.
+#### Example
+```typescript
+import { $, proxy, dump } from 'aberdeen';
+const state = proxy({
+  user: { name: 'Frank', kids: 1 },
+  items: ['a', 'b']
+});
+$('h2#Live State Dump');
+dump(state);
+// Change state later, the dump in the DOM will update
+setTimeout(() => { state.user.kids++; state.items.push('c'); }, 2000);
+```
+***
+### getParentElement()
+> **getParentElement**(): `Element`
+Defined in: [aberdeen.ts:2439](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2439)
+Gets the parent DOM `Element` where nodes created by [$](#) would currently be inserted.
+This is context-dependent based on the current reactive scope (e.g., inside a [mount](#mount)
+call or a [$](#) element's render function).
+**Note:** While this provides access to the DOM element, directly manipulating it outside
+of Aberdeen's control is generally discouraged. Prefer reactive updates using [$](#).
+#### Returns
+`Element`
+The current parent `Element` for DOM insertion.
+#### Example
+```typescript
+function thirdPartyLibInit(parentElement) {
+  parentElement.innerHTML = "This element is managed by a <em>third party</em> lib."
+}
+$('div.box', () => {
+  // Get the div.box element just created
+  const containerElement = getParentElement();
+  thirdPartyLibInit(containerElement);
+});
+```
+***
+### insertCss()
+> **insertCss**(`style`, `global`): `string`
+Defined in: [aberdeen.ts:2222](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2222)
+Inserts CSS rules into the document, scoping them with a unique class name.
+Takes a JavaScript object representation of CSS rules. camelCased property keys are
+converted to kebab-case (e.g., `fontSize` becomes `font-size`).
+#### Parameters
+##### style
+`object`
+An object where keys are CSS selectors (or camelCased properties) and values are
+  CSS properties or nested rule objects.
+  - Selectors are usually combined as a descendant-relationship (meaning just a space character) with their parent selector.
+  - In case a selector contains a `&`, that character will be replaced by the parent selector.
+  - Selectors will be split on `,` characters, each combining with the parent selector with *or* semantics.
+  - Selector starting with `'@'` define at-rules like media queries. They may be nested within regular selectors.
+##### global
+`boolean` = `false`
+Deprecated! Use [insertGlobalCss](#insertglobalcss) instead.
+#### Returns
+`string`
+The unique class name prefix used for scoping (e.g., `.AbdStl1`). Use this
+         prefix with [$](#) to apply the styles.
+#### Example
+```typescript
+const scopeClass = insertCss({
+  color: 'red',
+  padding: '10px',
+  '&:hover': { // Use '&' for the root scoped selector
+    backgroundColor: '#535'
+  },
+  '.child-element': { // Nested selector
+    fontWeight: 'bold'
+  },
+  '@media (max-width: 600px)': {
+    padding: '5px'
+  }
+});
+// scopeClass might be ".AbdStl1"
+// Apply the styles
+$(scopeClass, () => { // Add class to the div
+  $(`#Scoped content`);
+  $('div.child-element#Child'); // .AbdStl1 .child-element rule applies
+});
+```
+***
+### insertGlobalCss()
+> **insertGlobalCss**(`style`): `string`
+Defined in: [aberdeen.ts:2250](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2250)
+Inserts CSS rules globally.
+Works exactly like [insertCss](#insertcss), but without prefixing selectors with a unique class name.
+#### Parameters
+##### style
+`object`
+#### Returns
+`string`
+#### Example
+```typescript
+insertGlobalCss({
+  '*': {
+    fontFamily: 'monospace',
+    m: 0, // Using shortcut for margin
+  },
+  'a': {
+    textDecoration: 'none',
+    fg: "@primary", // Using foreground shortcut and CSS variable
+  }
+});
+$('a#Styled link');
+```
+***
+### invertString()
+> **invertString**(`input`): `string`
+Defined in: [aberdeen.ts:149](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L149)
+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 [onEach](#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.
+#### Parameters
+##### input
+`string`
+The string whose sort order needs to be inverted.
+#### Returns
+`string`
+A new string that will sort in the reverse order of the input string.
+#### Example
+```typescript
+const users = proxy([
+    { id: 1, name: 'Charlie', score: 95 },
+    { id: 2, name: 'Alice', score: 100 },
+    { id: 3, name: 'Bob', score: 90 },
+]);
+onEach(users, (user) => {
+    $(`p#${user.name}: ${user.score}`);
+}, (user) => invertString(user.name)); // Reverse alphabetic order
+```
+#### See
+[onEach](#oneach) for usage with sorting.
+***
+### isEmpty()
+> **isEmpty**(`proxied`): `boolean`
+Defined in: [aberdeen.ts:956](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L956)
+Reactively checks if an observable array or object is empty.
+This function not only returns the current emptiness state but also establishes
+a reactive dependency. If the emptiness state of the `proxied` object or array
+changes later (e.g., an item is added to an empty array, or the last property
+is deleted from an object), the scope that called `isEmpty` will be automatically
+scheduled for re-evaluation.
+#### Parameters
+##### proxied
+`TargetType`
+The observable array or object to check.
+#### Returns
+`boolean`
+`true` if the array has length 0 or the object has no own enumerable properties, `false` otherwise.
+#### Example
+```typescript
+const items = proxy([]);
+// Reactively display a message if the items array is empty
+$('div', () => {
+    if (isEmpty(items)) {
+        $('p i#No items yet!');
+    } else {
+        onEach(items, item => $('p#'+item));
+    }
+});
+// Adding an item will automatically remove the "No items yet!" message
+setInterval(() => {
+  if (!items.length || Math.random()>0.5) items.push('Item');
+  else items.length = 0;
+}, 1000)
+```
+***
+### map()
+Reactively maps/filters items from a proxied source array or object to a new proxied array or object.
+It iterates over the `target` proxy. For each item, it calls `func`.
+- If `func` returns a value, it's added to the result proxy under the same key/index.
+- If `func` returns `undefined`, the item is skipped (filtered out).
+The returned proxy automatically updates when:
+- Items are added/removed/updated in the `target` proxy.
+- Any proxied data read *within* the `func` call changes (for a specific item).
+#### Param
+A function `(value, key) => mappedValue | undefined` that transforms each item.
+  It receives the item's value and its key/index. Return `undefined` to filter the item out.
+#### Template
+The type of items in the source proxy.
+#### Template
+The type of items in the resulting proxy.
+#### Examples
+```typescript
+const numbers = proxy([1, 2, 3]);
+const doubled = map(numbers, (n) => n * 2);
+// doubled is proxy([2, 4, 6])
+$(() => console.log(doubled)); // Logs updates
+numbers.push(4); // doubled becomes proxy([2, 4, 6, 8])
+```
+```typescript
+const users = proxy({
+  'u1': { name: 'Alice', active: true },
+  'u2': { name: 'Bob', active: false },
+  'u3': { name: 'Charlie', active: true }
+});
+const activeUserNames = map(users, (user) => user.active ? user.name : undefined);
+// activeUserNames is proxy({ u1: 'Alice', u3: 'Charlie' })
+$(() => console.log(Object.values(activeUserNames)));
+users.u2.active = true;
+// activeUserNames becomes proxy({ u1: 'Alice', u2: 'Bob', u3: 'Charlie' })
+```
+#### Call Signature
+> **map**\<`K`, `IN`, `OUT`\>(`source`, `func`): `Map`\<`K`, `OUT`\>
+Defined in: [aberdeen.ts:2640](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2640)
+When using a Map as `source`.
+##### Type Parameters
+###### K
+`K`
+###### IN
+`IN`
+###### OUT
+`OUT`
+##### Parameters
+###### source
+`Map`\<`K`, `IN`\>
+###### func
+(`value`, `key`) => `undefined` \| `OUT`
+##### Returns
+`Map`\<`K`, `OUT`\>
+#### Call Signature
+> **map**\<`IN`, `OUT`\>(`source`, `func`): `OUT`[]
+Defined in: [aberdeen.ts:2645](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2645)
+When using an array as `source`.
+##### Type Parameters
+###### IN
+`IN`
+###### OUT
+`OUT`
+##### Parameters
+###### source
+`IN`[]
+###### func
+(`value`, `index`) => `undefined` \| `OUT`
+##### Returns
+`OUT`[]
+#### Call Signature
+> **map**\<`IN`, `IN_KEY`, `OUT`\>(`source`, `func`): `Record`\<`string` \| `symbol`, `OUT`\>
+Defined in: [aberdeen.ts:2650](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2650)
+When using an object as `source`.
+##### Type Parameters
+###### IN
+`IN`
+###### IN_KEY
+`IN_KEY` *extends* `string` \| `number` \| `symbol`
+###### OUT
+`OUT`
+##### Parameters
+###### source
+`Record`\<`IN_KEY`, `IN`\>
+###### func
+(`value`, `index`) => `undefined` \| `OUT`
+##### Returns
+`Record`\<`string` \| `symbol`, `OUT`\>
+***
+### merge()
+#### Call Signature
+> **merge**\<`T`\>(`dst`, `value`): `boolean`
+Defined in: [aberdeen.ts:1540](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1540)
+Like [copy](#copy), but uses merge semantics. Properties in `dst` not present in `src` are kept.
+`null`/`undefined` in `src` delete properties in `dst`.
+When the destination is an object and the source is an array, its keys are used as (sparse) array indices.
+##### Type Parameters
+###### T
+`T` *extends* `object`
+##### Parameters
+###### dst
+`T`
+###### value
+`Partial`\<`T`\>
+##### Returns
+`boolean`
+##### Examples
+```typescript
+const source = { b: { c: 99 }, d: undefined }; // d: undefined will delete
+const dest = proxy({ a: 1, b: { x: 5 }, d: 4 });
+merge(dest, source);
+merge(dest, 'b', { y: 6 }); // merge into dest.b
+merge(dest, 'c', { z: 7 }); // merge.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 } })
+```
+```typescript
+const messages = proxy(['msg1', 'msg2', 'msg3']);
+const update = { 1: 'updated msg2' }; // Update using object key as index
+merge(messages, update);
+console.log(messages); // proxy(['msg1', 'updated msg2', 'msg3'])
+```
+#### Call Signature
+> **merge**\<`T`\>(`dst`, `dstKey`, `value`): `boolean`
+Defined in: [aberdeen.ts:1541](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1541)
+Like [copy](#copy), but uses merge semantics. Properties in `dst` not present in `src` are kept.
+`null`/`undefined` in `src` delete properties in `dst`.
+When the destination is an object and the source is an array, its keys are used as (sparse) array indices.
+##### Type Parameters
+###### T
+`T` *extends* `object`
+##### Parameters
+###### dst
+`T`
+###### dstKey
+keyof `T`
+###### value
+`Partial`\<`T`\[keyof `T`\]\>
+##### Returns
+`boolean`
+##### Examples
+```typescript
+const source = { b: { c: 99 }, d: undefined }; // d: undefined will delete
+const dest = proxy({ a: 1, b: { x: 5 }, d: 4 });
+merge(dest, source);
+merge(dest, 'b', { y: 6 }); // merge into dest.b
+merge(dest, 'c', { z: 7 }); // merge.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 } })
+```
+```typescript
+const messages = proxy(['msg1', 'msg2', 'msg3']);
+const update = { 1: 'updated msg2' }; // Update using object key as index
+merge(messages, update);
+console.log(messages); // proxy(['msg1', 'updated msg2', 'msg3'])
+```
+***
+### mount()
+> **mount**(`parentElement`, `func`): `void`
+Defined in: [aberdeen.ts:2580](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2580)
+Attaches a reactive Aberdeen UI fragment to an existing DOM element. Without the use of
+this function, [$](#) 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 [$](#) inside `func` will append nodes to `parentElement`.
+You can nest [derive](#derive) or other [$](#) scopes within `func`.
+Use [unmountAll](#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
+([derive](#derive) or [$](#) or [mount](#mount)) scope that gets cleaned up, so will the mount.
+#### Parameters
+##### parentElement
+`Element`
+The native DOM `Element` to which the UI fragment will be appended.
+##### func
+() => `void`
+The function that defines the UI fragment, typically containing calls to [$](#).
+#### Returns
+`void`
+#### Example
+```javascript
+// Create a pre-existing DOM structure (without Aberdeen)
+document.body.innerHTML = `<h3>Static content <span id="title-extra"></span></h3><div class="box" id="app-root"></div>`;
+import { mount, $, proxy } from 'aberdeen';
+const runTime = proxy(0);
+setInterval(() => runTime.value++, 1000);
+mount(document.getElementById('app-root'), () => {
+  $('h4#Aberdeen App');
+  $(`p#Run time: ${runTime.value}s`);
+  // Conditionally render some content somewhere else in the static page
+  if (runTime.value&1) {
+    mount(document.getElementById('title-extra'), () =>
+      $(`i#(${runTime.value}s)`)
+    );
+  }
+});
+```
+Note how the inner mount behaves reactively as well, automatically unmounting when it's parent observer scope re-runs.
+***
+### multiMap()
+Reactively maps items from a source proxy (array or object) to a target proxied object,
+where each source item can contribute multiple key-value pairs to the target.
+It iterates over the `target` proxy. For each item, it calls `func`.
+- If `func` returns an object, all key-value pairs from that object are added to the result proxy.
+- If `func` returns `undefined`, the item contributes nothing.
+The returned proxy automatically updates when:
+- Items are added/removed/updated in the `target` proxy.
+- Any proxied data read *within* the `func` call changes (for a specific item).
+- If multiple input items produce the same output key, the last one processed usually "wins",
+  but the exact behavior on collision depends on update timing.
+This is useful for "flattening" or "indexing" data, or converting an observable array to an observable object.
+#### Param
+The source proxied array or object.
+#### Param
+A function `(value, key) => ({...pairs} | undefined)` that transforms an item
+  into an object of key-value pairs to add, or `undefined` to add nothing.
+#### Template
+The type of items in the source proxy.
+#### Template
+The type of the aggregated output object (should encompass all possible key-value pairs).
+#### Example
+```typescript
+const items = proxy([
+  { id: 'a', value: 10 },
+  { id: 'b', value: 20 },
+]);
+const itemsById = multiMap(items, (item) => ({
+  [item.id]: item.value,
+  [item.id+item.id]: item.value*10,
+}));
+// itemsById is proxy({ a: 10, aa: 100, b: 20, bb: 200 })
+$(() => console.log(itemsById));
+items.push({ id: 'c', value: 30 });
+// itemsById becomes proxy({ a: 10, aa: 100, b: 20, bb: 200, c: 30, cc: 300 })
+```
+#### Call Signature
+> **multiMap**\<`IN`, `OUT`\>(`source`, `func`): `OUT`
+Defined in: [aberdeen.ts:2730](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2730)
+When using an array as `source`.
+##### Type Parameters
+###### IN
+`IN`
+###### OUT
+`OUT` *extends* `object`
+##### Parameters
+###### source
+`IN`[]
+###### func
+(`value`, `index`) => `undefined` \| `OUT`
+##### Returns
+`OUT`
+#### Call Signature
+> **multiMap**\<`K`, `IN`, `OUT`\>(`source`, `func`): `OUT`
+Defined in: [aberdeen.ts:2735](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2735)
+When using an object as `source`.
+##### Type Parameters
+###### K
+`K` *extends* `string` \| `number` \| `symbol`
+###### IN
+`IN`
+###### OUT
+`OUT` *extends* `object`
+##### Parameters
+###### source
+`Record`\<`K`, `IN`\>
+###### func
+(`value`, `index`) => `undefined` \| `OUT`
+##### Returns
+`OUT`
+#### Call Signature
+> **multiMap**\<`K`, `IN`, `OUT`\>(`source`, `func`): `OUT`
+Defined in: [aberdeen.ts:2741](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2741)
+When using a Map as `source`.
+##### Type Parameters
+###### K
+`K`
+###### IN
+`IN`
+###### OUT
+`OUT` *extends* `object`
+##### Parameters
+###### source
+`Map`\<`K`, `IN`\>
+###### func
+(`value`, `key`) => `undefined` \| `OUT`
+##### Returns
+`OUT`
+***
+### onEach()
+Reactively iterates over the items of an observable array or object, optionally rendering content for each item.
+Automatically updates when items are added, removed, or modified.
+#### Param
+The observable array or object to iterate over. Values that are `undefined` are skipped.
+#### Param
+A function called for each item in the array. It receives the item's (observable) value and its index/key. Any DOM elements created within this function will be associated with the item, placed at the right spot in the DOM, and cleaned up when redrawing/removing the item.
+#### Param
+An optional function to generate a sort key for each item. This controls the order in which items are rendered in the DOM. If omitted, items are rendered in array index order. The returned key can be a number, string, or an array of numbers/strings for composite sorting. Use [invertString](#invertstring) on string keys for descending order. Returning `null` or `undefined` from `makeKey` will prevent the item from being rendered.
+#### Examples
+```typescript
+const items = proxy(['apple', 'banana', 'cherry']);
+// Basic iteration
+onEach(items, (item, index) => $(`li#${item} (#${index})`));
+// Add a new item - the list updates automatically
+setTimeout(() => items.push('durian'), 2000);
+// Same for updates and deletes
+setTimeout(() => items[1] = 'berry', 4000);
+setTimeout(() => delete items[2], 6000);
+```
+```typescript
+const users = proxy([
+    { id: 3, group: 1, name: 'Charlie' },
+    { id: 1, group: 1, name: 'Alice' },
+    { id: 2, group: 2, name: 'Bob' },
+]);
+// Sort by name alphabetically
+onEach(users, (user) => {
+    $(`p#${user.name} (id=${user.id})`);
+}, (user) => [user.group, user.name]); // Sort by group, and within each group sort by name
+```
+```javascript
+const config = proxy({ theme: 'dark', fontSize: 14, showTips: true });
+// Display configuration options
+$('dl', () => {
+    onEach(config, (value, key) => {
+        if (key === 'showTips') return; // Don't render this one
+        $('dt#'+key);
+        $('dd#'+value);
+    });
+});
+// Change a value - the display updates automatically
+setTimeout(() => config.fontSize = 16, 2000);
+```
+#### See
+[invertString](#invertstring) To easily create keys for reverse sorting.
+#### Call Signature
+> **onEach**\<`K`, `T`\>(`target`, `render`, `makeKey?`): `void`
+Defined in: [aberdeen.ts:834](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L834)
+##### Type Parameters
+###### K
+`K`
+###### T
+`T`
+##### Parameters
+###### target
+`Map`\<`K`, `undefined` \| `T`\>
+###### render
+(`value`, `key`) => `void`
+###### makeKey?
+(`value`, `key`) => `SortKeyType`
+##### Returns
+`void`
+#### Call Signature
+> **onEach**\<`T`\>(`target`, `render`, `makeKey?`): `void`
+Defined in: [aberdeen.ts:839](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L839)
+##### Type Parameters
+###### T
+`T`
+##### Parameters
+###### target
+readonly (`undefined` \| `T`)[]
+###### render
+(`value`, `index`) => `void`
+###### makeKey?
+(`value`, `index`) => `SortKeyType`
+##### Returns
+`void`
+#### Call Signature
+> **onEach**\<`K`, `T`\>(`target`, `render`, `makeKey?`): `void`
+Defined in: [aberdeen.ts:844](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L844)
+##### Type Parameters
+###### K
+`K` *extends* `string` \| `number` \| `symbol`
+###### T
+`T`
+##### Parameters
+###### target
+`Record`\<`K`, `undefined` \| `T`\>
+###### render
+(`value`, `index`) => `void`
+###### makeKey?
+(`value`, `index`) => `SortKeyType`
+##### Returns
+`void`
+***
+### 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 [onEach](#oneach). For each item,
+it calls the classifier `func`, which should return:
+- A single key (`OUT_K`): The item belongs to the bucket with this key.
+- An array of keys (`OUT_K[]`): The item belongs to all buckets specified in the array.
+- `undefined`: The item is not placed in any bucket.
+The function returns a main proxied object. The keys of this object are the bucket keys (`OUT_K`)
+returned by `func`. Each value associated with a bucket key is another proxied object (the "bucket").
+This inner bucket object maps the *original* keys/indices from the `source` to the items
+themselves that were classified into that bucket.
+The entire structure is reactive. Changes in the `source` proxy (adding/removing/updating items)
+or changes in dependencies read by the `func` will cause the output partitioning to update automatically.
+Buckets are created dynamically as needed and removed when they become empty.
+#### Param
+The input proxied Array or Record (e.g., created by [proxy](#proxy)) containing the items to partition.
+#### Param
+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.
+#### Template
+The type of the keys used for the output buckets (string, number, or symbol).
+#### Template
+The type of the values in the source proxy.
+#### Template
+The type of the keys in the source proxy (if it's a Record).
+#### Examples
+```typescript
+interface Product { id: string; category: string; name: string; }
+const products = proxy<Product[]>([
+  { id: 'p1', category: 'Fruit', name: 'Apple' },
+  { id: 'p2', category: 'Veg', name: 'Carrot' },
+  { id: 'p3', category: 'Fruit', name: 'Banana' },
+]);
+// Partition products by category. Output keys are categories (string).
+// Inner keys are original array indices (number).
+const productsByCategory = partition(products, (product) => product.category);
+// Reactively show the data structure
+dump(productsByCategory);
+// Make random changes to the categories, to show reactiveness
+setInterval(() => products[0|(Math.random()*3)].category = ['Snack','Fruit','Veg'][0|(Math.random()*3)], 2000);
+```
+```typescript
+interface User { id: number; tags: string[]; name: string; }
+const users = proxy({
+  'u1': { name: 'Alice', tags: ['active', 'new'] },
+  'u2': { name: 'Bob', tags: ['active'] }
+});
+// Partition users by tag. Output keys are tags (string).
+// Inner keys are original object keys (string: 'u1', 'u2').
+const usersByTag = partition(users, (user) => user.tags);
+console.log(usersByTag);
+```
+#### Call Signature
+> **partition**\<`OUT_K`, `IN_V`\>(`source`, `func`): `Record`\<`OUT_K`, `Record`\<`number`, `IN_V`\>\>
+Defined in: [aberdeen.ts:2805](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2805)
+When using an object as `array`.
+##### Type Parameters
+###### OUT_K
+`OUT_K` *extends* `string` \| `number` \| `symbol`
+###### IN_V
+`IN_V`
+##### Parameters
+###### source
+`IN_V`[]
+###### func
+(`value`, `key`) => `undefined` \| `OUT_K` \| `OUT_K`[]
+##### Returns
+`Record`\<`OUT_K`, `Record`\<`number`, `IN_V`\>\>
+#### Call Signature
+> **partition**\<`IN_K`, `OUT_K`, `IN_V`\>(`source`, `func`): `Record`\<`OUT_K`, `Record`\<`IN_K`, `IN_V`\>\>
+Defined in: [aberdeen.ts:2810](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2810)
+When using an object as `source`.
+##### Type Parameters
+###### IN_K
+`IN_K` *extends* `string` \| `number` \| `symbol`
+###### OUT_K
+`OUT_K` *extends* `string` \| `number` \| `symbol`
+###### IN_V
+`IN_V`
+##### Parameters
+###### source
+`Record`\<`IN_K`, `IN_V`\>
+###### func
+(`value`, `key`) => `undefined` \| `OUT_K` \| `OUT_K`[]
+##### Returns
+`Record`\<`OUT_K`, `Record`\<`IN_K`, `IN_V`\>\>
+#### Call Signature
+> **partition**\<`IN_K`, `OUT_K`, `IN_V`\>(`source`, `func`): `Record`\<`OUT_K`, `Record`\<`IN_K`, `IN_V`\>\>
+Defined in: [aberdeen.ts:2819](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2819)
+When using a Map as `source`.
+##### Type Parameters
+###### IN_K
+`IN_K` *extends* `string` \| `number` \| `symbol`
+###### OUT_K
+`OUT_K` *extends* `string` \| `number` \| `symbol`
+###### IN_V
+`IN_V`
+##### Parameters
+###### source
+`Map`\<`IN_K`, `IN_V`\>
+###### func
+(`value`, `key`) => `undefined` \| `OUT_K` \| `OUT_K`[]
+##### Returns
+`Record`\<`OUT_K`, `Record`\<`IN_K`, `IN_V`\>\>
+***
+### peek()
+#### Call Signature
+> **peek**\<`T`, `K`\>(`target`, `key`): `T`\[`K`\]
+Defined in: [aberdeen.ts:2621](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2621)
+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 [$](#))
+but do not want changes to that specific data to trigger a re-execute of the scope.
+Note: You may also use [unproxy](#unproxy) to get to the raw underlying data structure, which can be used to similar effect.
+##### Type Parameters
+###### T
+`T` *extends* `object`
+###### K
+`K` *extends* `string` \| `number` \| `symbol`
+##### Parameters
+###### target
+`T`
+Either a function to execute, or an object (which may also be an Array or a Map) to index.
+###### key
+`K`
+Optional key/index to use when `target` is an object.
+##### Returns
+`T`\[`K`\]
+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
+```typescript
+const data = proxy({ a: 1, b: 2 });
+$(() => {
+  // re-executes only when data.a changes, because data.b is peeked.
+  const b = peek(() => data.b);
+  console.log(`A is ${data.a}, B was ${b} when A changed.`);
+});
+data.b = 3; // Does not trigger console.log
+data.a = 2; // Triggers console.log (logs "A is 2, B was 3 when A changed.")
+```
+#### Call Signature
+> **peek**\<`K`, `V`\>(`target`, `key`): `undefined` \| `V`
+Defined in: [aberdeen.ts:2622](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2622)
+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 [$](#))
+but do not want changes to that specific data to trigger a re-execute of the scope.
+Note: You may also use [unproxy](#unproxy) to get to the raw underlying data structure, which can be used to similar effect.
+##### Type Parameters
+###### K
+`K`
+###### V
+`V`
+##### Parameters
+###### target
+`Map`\<`K`, `V`\>
+Either a function to execute, or an object (which may also be an Array or a Map) to index.
+###### key
+`K`
+Optional key/index to use when `target` is an object.
+##### Returns
+`undefined` \| `V`
+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
+```typescript
+const data = proxy({ a: 1, b: 2 });
+$(() => {
+  // re-executes only when data.a changes, because data.b is peeked.
+  const b = peek(() => data.b);
+  console.log(`A is ${data.a}, B was ${b} when A changed.`);
+});
+data.b = 3; // Does not trigger console.log
+data.a = 2; // Triggers console.log (logs "A is 2, B was 3 when A changed.")
+```
+#### Call Signature
+> **peek**\<`T`\>(`target`, `key`): `undefined` \| `T`
+Defined in: [aberdeen.ts:2623](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2623)
+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 [$](#))
+but do not want changes to that specific data to trigger a re-execute of the scope.
+Note: You may also use [unproxy](#unproxy) to get to the raw underlying data structure, which can be used to similar effect.
+##### Type Parameters
+###### T
+`T`
+##### Parameters
+###### target
+`T`[]
+Either a function to execute, or an object (which may also be an Array or a Map) to index.
+###### key
+`number`
+Optional key/index to use when `target` is an object.
+##### Returns
+`undefined` \| `T`
+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
+```typescript
+const data = proxy({ a: 1, b: 2 });
+$(() => {
+  // re-executes only when data.a changes, because data.b is peeked.
+  const b = peek(() => data.b);
+  console.log(`A is ${data.a}, B was ${b} when A changed.`);
+});
+data.b = 3; // Does not trigger console.log
+data.a = 2; // Triggers console.log (logs "A is 2, B was 3 when A changed.")
+```
+#### Call Signature
+> **peek**\<`T`\>(`target`): `T`
+Defined in: [aberdeen.ts:2624](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2624)
+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 [$](#))
+but do not want changes to that specific data to trigger a re-execute of the scope.
+Note: You may also use [unproxy](#unproxy) to get to the raw underlying data structure, which can be used to similar effect.
+##### Type Parameters
+###### T
+`T`
+##### Parameters
+###### target
+() => `T`
+Either a function to execute, or an object (which may also be an Array or a Map) to index.
+##### Returns
+`T`
+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
+```typescript
+const data = proxy({ a: 1, b: 2 });
+$(() => {
+  // re-executes only when data.a changes, because data.b is peeked.
+  const b = peek(() => data.b);
+  console.log(`A is ${data.a}, B was ${b} when A changed.`);
+});
+data.b = 3; // Does not trigger console.log
+data.a = 2; // Triggers console.log (logs "A is 2, B was 3 when A changed.")
+```
+***
+### proxy()
+Creates a reactive proxy around the given data.
+Reading properties from the returned proxy within a reactive scope (like one created by
+[$](#) or [derive](#derive)) establishes a subscription. Modifying properties *through*
+the proxy will notify subscribed scopes, causing them to re-execute.
+- Plain objects and arrays are wrapped in a standard JavaScript `Proxy` that intercepts
+  property access and mutations, but otherwise works like the underlying data.
+- Primitives (string, number, boolean, null, undefined) are wrapped in an object
+  `{ value: T }` which is then proxied. Access the primitive via the `.value` property.
+- 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 [unproxy](#unproxy) to get the original underlying data back.
+#### Param
+The object, array, or primitive value to make reactive.
+#### Template
+The type of the data being proxied.
+#### Examples
+```javascript
+const state = proxy({ count: 0, message: 'Hello' });
+$(() => console.log(state.message)); // Subscribes to message
+setTimeout(() => state.message = 'World', 1000); // Triggers the observing function
+setTimeout(() => state.count++, 2000); // Triggers nothing
+```
+```javascript
+const items = proxy(['a', 'b']);
+$(() => console.log(items.length)); // Subscribes to length
+setTimeout(() => items.push('c'), 2000); // Triggers the observing function
+```
+```javascript
+const name = proxy('Aberdeen');
+$(() => console.log(name.value)); // Subscribes to value
+setTimeout(() => name.value = 'UI', 2000); // Triggers the observing function
+```
+```typescript
+class Widget {
+  constructor(public name: string, public width: number, public height: number) {}
+  grow() { this.width *= 2; }
+  toString() { return `${this.name}Widget (${this.width}x${this.height})`; }
+}
+let graph: Widget = proxy(new Widget('Graph', 200, 100));
+$(() => console.log(''+graph));
+setTimeout(() => graph.grow(), 2000);
+setTimeout(() => graph.grow(), 4000);
+```
+#### Call Signature
+> **proxy**\<`T`\>(`target`): [`PromiseProxy`](#promiseproxy)\<`T`\>
+Defined in: [aberdeen.ts:1330](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1330)
+##### Type Parameters
+###### T
+`T` *extends* `unknown`
+##### Parameters
+###### target
+`Promise`\<`T`\>
+##### Returns
+[`PromiseProxy`](#promiseproxy)\<`T`\>
+#### Call Signature
+> **proxy**\<`T`\>(`target`): `T` *extends* `number` ? `number` : `T` *extends* `string` ? `string` : `T` *extends* `boolean` ? `boolean` : `T`[]
+Defined in: [aberdeen.ts:1331](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1331)
+##### Type Parameters
+###### T
+`T` *extends* `unknown`
+##### Parameters
+###### target
+`T`[]
+##### Returns
+`T` *extends* `number` ? `number` : `T` *extends* `string` ? `string` : `T` *extends* `boolean` ? `boolean` : `T`[]
+#### Call Signature
+> **proxy**\<`T`\>(`target`): `T`
+Defined in: [aberdeen.ts:1332](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1332)
+##### Type Parameters
+###### T
+`T` *extends* `object`
+##### Parameters
+###### target
+`T`
+##### Returns
+`T`
+#### Call Signature
+> **proxy**\<`T`\>(`target`): `ValueRef`\<`T` *extends* `number` ? `number` : `T` *extends* `string` ? `string` : `T` *extends* `boolean` ? `boolean` : `T`\>
+Defined in: [aberdeen.ts:1333](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1333)
+##### Type Parameters
+###### T
+`T` *extends* `unknown`
+##### Parameters
+###### target
+`T`
+##### Returns
+`ValueRef`\<`T` *extends* `number` ? `number` : `T` *extends* `string` ? `string` : `T` *extends* `boolean` ? `boolean` : `T`\>
+***
+### ref()
+> **ref**\<`T`, `K`\>(`target`, `index`): `ValueRef`\<`T`\[`K`\]\>
+Defined in: [aberdeen.ts:1906](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1906)
+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 [$](#) to create two-way data bindings
+with form elements, and for passing a reactive property to any of the [$](#) 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).
+#### Type Parameters
+##### T
+`T` *extends* `TargetType`
+##### K
+`K` *extends* `string` \| `number` \| `symbol`
+#### Parameters
+##### target
+`T`
+The reactive proxy (created by [proxy](#proxy)) containing the target property.
+##### index
+`K`
+The key (for objects) or index (for arrays) of the property to reference.
+#### Returns
+`ValueRef`\<`T`\[`K`\]\>
+A reference object with a `value` property linked to the specified proxy property.
+#### Example
+```javascript
+const formData = proxy({ color: 'orange', velocity: 42 });
+// Usage with `bind`
+$('input type=text bind=', ref(formData, 'color'));
+// Usage as a dynamic property, causes a TextNode with just the name to be created and live-updated
+$('p text="Selected color: " text=', ref(formData, 'color'), 'color:', ref(formData, 'color'));
+// Changes are actually stored in formData - this causes logs like `{color: "Blue", velocity 42}`
+$(() => console.log(formData))
+```
+***
+### runQueue()
+> **runQueue**(): `void`
+Defined in: [aberdeen.ts:69](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L69)
+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.
+#### Returns
+`void`
+#### Example
+```typescript
+const data = proxy("before");
+$('#'+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:
+runQueue();
+console.log(2, document.body.innerHTML); // after
+```
+***
+### setErrorHandler()
+> **setErrorHandler**(`handler?`): `void`
+Defined in: [aberdeen.ts:2409](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2409)
+Sets a custom error handler function for errors that occur asynchronously
+within reactive scopes (e.g., during updates triggered by proxy changes in
+[derive](#derive) or [$](#) 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.
+#### Parameters
+##### handler?
+(`error`) => `undefined` \| `boolean`
+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.
+#### Returns
+`void`
+#### Example
+```typescript
+setErrorHandler(error => {
+  console.warn('Aberdeen render error:', error.message);
+  // Log to error reporting service
+  // myErrorReporter.log(error);
+  try {
+    // Attempt to show a custom message in the UI
+    $('div.error-message#Oops, something went wrong!');
+  } catch (e) {
+    // Ignore errors during error handling itself
+  }
+  return false; // Suppress default console log and DOM error message
+});
+// Styling for our custom error message
+insertCss({
+  '.error-message': {
+    backgroundColor: '#e31f00',
+    display: 'inline-block',
+    color: 'white',
+    borderRadius: '3px',
+    padding: '2px 4px',
+  }
+}, true); // global style
+// Cause an error within a render scope.
+$('div.box', () => {
+  // Will cause our error handler to insert an error message within the box
+  noSuchFunction();
+})
+```
+***
+### setSpacingCssVars()
+> **setSpacingCssVars**(`base`, `unit`): `void`
+Defined in: [aberdeen.ts:1759](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1759)
+Initializes `cssVars[1]` 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`.
+#### Parameters
+##### base
+`number` = `1`
+The base size for the spacing scale (default: 1). If unit is 'rem' or 'em', this is in that unit. If unit is 'px', this is the pixel value.
+##### unit
+`string` = `'rem'`
+The CSS unit to use (default: 'rem'). Can be 'rem', 'em', 'px', or any other valid CSS unit.
+#### Returns
+`void`
+#### Example
+```javascript
+// Use default scale (0.25rem to 512rem)
+setSpacingCssVars();
+// Use custom base size
+setSpacingCssVars(16, 'px'); // 4px to 8192px
+// Use em units
+setSpacingCssVars(1, 'em'); // 0.25em to 512em
+```
+***
+### unmountAll()
+> **unmountAll**(): `void`
+Defined in: [aberdeen.ts:2590](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2590)
+Removes all Aberdeen-managed DOM nodes and stops all active reactive scopes
+(created by [mount](#mount), [derive](#derive), [$](#) with functions, etc.).
+This effectively cleans up the entire Aberdeen application state.
+#### Returns
+`void`
+***
+### unproxy()
+> **unproxy**\<`T`\>(`target`): `T`
+Defined in: [aberdeen.ts:1447](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1447)
+Returns the original, underlying data target from a reactive proxy created by [proxy](#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 [peek](#peek) is an alternative way to achieve this.
+#### Type Parameters
+##### T
+`T`
+The type of the target.
+#### Parameters
+##### target
+`T`
+A proxied object, array, or any other value.
+#### Returns
+`T`
+The underlying (unproxied) data, or the input value if it wasn't a proxy.
+#### Example
+```typescript
+const userProxy = proxy({ name: 'Frank' });
+const rawUser = unproxy(userProxy);
+// Log reactively
+$(() => console.log('proxied', userProxy.name));
+// The following will only ever log once, as we're not subscribing to any observable
+$(() => console.log('unproxied', rawUser.name));
+// This cause the first log to run again:
+setTimeout(() => userProxy.name += '!', 1000);
+// This doesn't cause any new logs:
+setTimeout(() => rawUser.name += '?', 2000);
+// Both userProxy and rawUser end up as `{name: 'Frank!?'}`
+setTimeout(() => {
+  console.log('final proxied', userProxy)
+  console.log('final unproxied', rawUser)
+}, 3000);
+```