aberdeen 1.6.0 → 1.7.0

package/skill/aberdeen.md

@@ -1,4 +1,4 @@
-[**Aberdeen v1.6.0**](README.md)
+[**Aberdeen v1.7.0**](README.md)
 
 ***
 
@@ -10,7 +10,7 @@
 
 ### PromiseProxy
 
-Defined in: [aberdeen.ts:1315](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1315)
+Defined in: [aberdeen.ts:1360](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1360)
 
 When `proxy` is called with a Promise, the returned object has this shape.
 
@@ -26,7 +26,7 @@ When `proxy` is called with a Promise, the returned object has this shape.
 
 > **busy**: `boolean`
 
-Defined in: [aberdeen.ts:1319](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1319)
+Defined in: [aberdeen.ts:1364](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1364)
 
 True if the promise is still pending, false if it has resolved or rejected.
 
@@ -34,7 +34,7 @@ True if the promise is still pending, false if it has resolved or rejected.
 
 > `optional` **error**: `any`
 
-Defined in: [aberdeen.ts:1327](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1327)
+Defined in: [aberdeen.ts:1372](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1372)
 
 If the promise has rejected, this contains the rejection error.
 
@@ -42,7 +42,7 @@ If the promise has rejected, this contains the rejection error.
 
 > `optional` **value**: `T`
 
-Defined in: [aberdeen.ts:1323](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1323)
+Defined in: [aberdeen.ts:1368](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1368)
 
 If the promise has resolved, this contains the resolved value.
 
@@ -52,7 +52,7 @@ If the promise has resolved, this contains the resolved value.
 
 > `const` **cssVars**: `Record`\<`string`, `string`\>
 
-Defined in: [aberdeen.ts:1737](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1737)
+Defined in: [aberdeen.ts:1772](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1772)
 
 A reactive object containing CSS variable definitions.
 
@@ -91,7 +91,7 @@ $('div mt:$3'); // Sets margin-top to var(--m3)
 
 > `const` **NO\_COPY**: *typeof* [`NO_COPY`](#no_copy)
 
-Defined in: [aberdeen.ts:1701](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1701)
+Defined in: [aberdeen.ts:1736](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1736)
 
 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
@@ -103,7 +103,7 @@ be observed for changes.
 
 > **$**(...`args`): `undefined` \| `Element`
 
-Defined in: [aberdeen.ts:2079](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2079)
+Defined in: [aberdeen.ts:2156](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2156)
 
 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
@@ -117,42 +117,66 @@ changes will be (mostly) undone when the current *scope* is destroyed or will be
 
 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.
+### String arguments
+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**[=:]"**val containing spaces**")* ('#' **text** | **key**[=:])?
+
+So a string may consist of any number of...
+- **tag** elements, 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.
+- 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.
+- Property key/value pairs, like `type=password`, `placeholder="Your name"` or `data-id=123`. When the value contains spaces, it needs to be quoted with either "double quotes", 'single quotes' or `backticks`. Quotes within quoted values cannot be escaped (see the next rule for a solution). Key/value pairs will be handled according to *Property rules* below, but with the caveat that values can only be strings.
+- CSS key/value pairs using two syntaxes:
+  - **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 support CSS shortcuts (see below). You can mix them: `m:$3 box-shadow: 0 2px 4px rgba(0,0,0,0.2); bg:$cardBg`
+The elements must be separated by spaces, except before a `.cssClass` if it is preceded by either **tag** or another CSS class.
+
+And a 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.
+- 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 *Property rules* 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")`. In case the value is a proxied object, its `.value` property will be applied reactively without needing to rerender the parent scope.
+- 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: `$('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 `$()` 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 `$`, have been cleaned - see also [clean](#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.
+
+### DOM node arguments
+When 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.
+
+### Property rules
+- **Attribute:** The common case is setting the value as an HTML attribute named key. For example `$('input placeholder=Name')` results in `<input placeholder="Name">`.
+- **Event listener:** 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: $('button text=Press! click=', () => alert('Clicked!'))`. The event listener will be removed when the current scope is destroyed.
+- **DOM property:** When the value is a boolean, or 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.
+- **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 `$('.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`.
+- **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: `$('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.
+
+### CSS shortcuts
+For conciseness, Aberdeen supports some CSS shortcuts when setting CSS properties.
+| Shortcut | Expands to |
+|----------|------------|
+| `m`, `mt`, `mb`, `ml`, `mr` | `margin`, `margin-top`, `margin-bottom`, `margin-left`, `margin-right` |
+| `mv`, `mh` | Vertical (top+bottom) or horizontal (left+right) margins |
+| `p`, `pt`, `pb`, `pl`, `pr` | `padding`, `padding-top`, `padding-bottom`, `padding-left`, `padding-right` |
+| `pv`, `ph` | Vertical or horizontal padding |
+| `w`, `h` | `width`, `height` |
+| `bg` | `background` |
+| `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 [setSpacingCssVars](#setspacingcssvars), which initializes spacing variables named `0` through `12` with an exponential spacing scale.
 
 #### 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.
+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.
 
 #### Examples
 
@@ -197,13 +221,20 @@ $(() => { // Reactive scope
 });
 ```
 
+```typescript
+const myColor = proxy('red');
+$('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 [ref](#ref), in order to use properties other than `.value`.
+
 ***
 
 ### clean()
 
 > **clean**(`cleaner`): `void`
 
-Defined in: [aberdeen.ts:2481](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2481)
+Defined in: [aberdeen.ts:2640](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2640)
 
 Registers a cleanup function to be executed just before the current reactive scope
 is destroyed or redraws.
@@ -258,7 +289,7 @@ setInterval(() => myArray[rnd()] = rnd(), 1000);
 
 > **clone**\<`T`\>(`src`): `T`
 
-Defined in: [aberdeen.ts:1845](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1845)
+Defined in: [aberdeen.ts:1893](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1893)
 
 Clone an (optionally proxied) object or array.
 
@@ -292,7 +323,7 @@ A new unproxied array or object (of the same type as `src`), containing a deep c
 
 > **copy**\<`T`\>(`dst`, `src`): `boolean`
 
-Defined in: [aberdeen.ts:1490](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1490)
+Defined in: [aberdeen.ts:1535](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1535)
 
 Recursively copies properties or array items from `src` to `dst`.
 It's designed to work efficiently with reactive proxies created by [proxy](#proxy).
@@ -353,7 +384,7 @@ console.log(dest); // proxy({ a: 1, b: { e: 4 } })
 
 > **copy**\<`T`\>(`dst`, `dstKey`, `src`): `boolean`
 
-Defined in: [aberdeen.ts:1497](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1497)
+Defined in: [aberdeen.ts:1542](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1542)
 
 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].
@@ -390,7 +421,7 @@ Optional key in `dst` to copy into.
 
 > **count**(`proxied`): `ValueRef`\<`number`\>
 
-Defined in: [aberdeen.ts:1012](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1012)
+Defined in: [aberdeen.ts:1057](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1057)
 
 Reactively counts the number of properties in an objects.
 
@@ -435,7 +466,7 @@ items.z = 12;
 
 > **darkMode**(): `boolean`
 
-Defined in: [aberdeen.ts:1819](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1819)
+Defined in: [aberdeen.ts:1872](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1872)
 
 Returns whether the user's browser prefers a dark color scheme.
 
@@ -457,14 +488,11 @@ 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';
-  }
+  cssVars.bg = darkMode() ? '#1a1a1a' : '#ffffff';
+  cssVars.fg = darkMode() ? '#e5e5e5' : '#000000';
 });
+
+$('div bg:$bg fg:$fg p:1rem #Colors change based on system dark mode preference');
 ```
 
 ***
@@ -473,7 +501,7 @@ $(() => {
 
 > **derive**\<`T`\>(`func`): `ValueRef`\<`T`\>
 
-Defined in: [aberdeen.ts:2533](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2533)
+Defined in: [aberdeen.ts:2692](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2692)
 
 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
@@ -542,7 +570,7 @@ $('h3', () => {
 
 > **dump**\<`T`\>(`data`): `T`
 
-Defined in: [aberdeen.ts:2953](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2953)
+Defined in: [aberdeen.ts:3113](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L3113)
 
 Renders a live, recursive dump of a proxied data structure (or any value)
 into the DOM at the current [$](#) insertion point.
@@ -591,115 +619,104 @@ 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
+### insertCss()
 
-```typescript
-function thirdPartyLibInit(parentElement) {
-  parentElement.innerHTML = "This element is managed by a <em>third party</em> lib."
-}
+> **insertCss**(`style`): `string`
 
-$('div.box', () => {
-  // Get the div.box element just created
-  const containerElement = getParentElement();
-  thirdPartyLibInit(containerElement);
-});
-```
+Defined in: [aberdeen.ts:2349](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2349)
 
-***
+Inserts CSS rules into the document, scoping them with a unique class name.
 
-### insertCss()
+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.
 
-> **insertCss**(`style`, `global`): `string`
+### Concise Style Strings
 
-Defined in: [aberdeen.ts:2222](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2222)
+Concise style strings use two syntaxes (same as inline CSS in [$](#)):
+- **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;'`
 
-Inserts CSS rules into the document, scoping them with a unique class name.
+Both forms can be mixed: `'m:$3 box-shadow: 0 2px 4px rgba(0,0,0,0.2); bg:$cardBg'`
 
-Takes a JavaScript object representation of CSS rules. camelCased property keys are
-converted to kebab-case (e.g., `fontSize` becomes `font-size`).
+Supports the same CSS shortcuts as [$](#) and CSS variable references with `$` (e.g., `$primary`, `$3`).
 
 #### 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
+A concise style string or a style object.
 
-`boolean` = `false`
-
-Deprecated! Use [insertGlobalCss](#insertglobalcss) instead.
+`string` | `object`
 
 #### Returns
 
 `string`
 
-The unique class name prefix used for scoping (e.g., `.AbdStl1`). Use this 
-         prefix with [$](#) to apply the styles.
+The unique class name prefix used for scoping (e.g., `.AbdStl1`). 
+         Use this prefix with [$](#) to apply the styles.
 
-#### Example
+#### Examples
 
 ```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'
+const cardClass = insertCss({
+  '&': 'bg:white p:$4 r:8px transition: background-color 0.3s;',
+  '&:hover': 'bg:#f5f5f5',
+});
+
+$('section', cardClass, () => { 
+  $('p#Card content'); 
+});
+```
+
+```typescript
+const formClass = 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'
   }
 });
-// scopeClass might be ".AbdStl1"
 
-// Apply the styles
-$(scopeClass, () => { // Add class to the div
-  $(`#Scoped content`);
-  $('div.child-element#Child'); // .AbdStl1 .child-element rule applies
+$('form', formClass, () => {
+  $('button', () => {
+    $('span.icon text=🔥');
+    $('#Click Me');
+  });
+});
+```
+
+```typescript
+const badge = insertCss({
+  '&::before': 'content: "★"; color:gold mr:$1',
+  '&': 'position:relative box-shadow: 0 2px 8px rgba(0,0,0,0.15);'
 });
+
+$(badge + ' span#Product Name');
 ```
 
 ***
 
 ### insertGlobalCss()
 
-> **insertGlobalCss**(`style`): `string`
+> **insertGlobalCss**(`style`): `void`
 
-Defined in: [aberdeen.ts:2250](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2250)
+Defined in: [aberdeen.ts:2473](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2473)
 
-Inserts CSS rules globally.
+Inserts CSS rules globally (unscoped).
 
 Works exactly like [insertCss](#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 [insertCss](#insertcss).
+See [insertCss](#insertcss) for detailed documentation on syntax and shortcuts.
 
 #### Parameters
 
@@ -707,25 +724,43 @@ Works exactly like [insertCss](#insertcss), but without prefixing selectors with
 
 `object`
 
+Object with selectors as keys and concise CSS strings as values.
+
 #### Returns
 
-`string`
+`void`
 
-#### Example
+#### Examples
+
+```typescript
+// Set up global styles using CSS shortcuts
+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"
+});
+
+$('h2#Title without margins');
+$('a#This is a link');
+$('code#const x = 42;');
+```
 
 ```typescript
 insertGlobalCss({
-  '*': {
-    fontFamily: 'monospace',
-    m: 0, // Using shortcut for margin
+  "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"
   },
-  'a': {
-    textDecoration: 'none',
-    fg: "@primary", // Using foreground shortcut and CSS variable
+  "@media (prefers-color-scheme: dark)": {
+    "body": "bg:#1a1a1a fg:#e5e5e5",
+    "code": "bg:#2a2a2a"
   }
 });
-
-$('a#Styled link');
 ```
 
 ***
@@ -734,7 +769,7 @@ $('a#Styled link');
 
 > **invertString**(`input`): `string`
 
-Defined in: [aberdeen.ts:149](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L149)
+Defined in: [aberdeen.ts:149](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L149)
 
 Creates a new string that has the opposite sort order compared to the input string.
 
@@ -783,7 +818,7 @@ onEach(users, (user) => {
 
 > **isEmpty**(`proxied`): `boolean`
 
-Defined in: [aberdeen.ts:956](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L956)
+Defined in: [aberdeen.ts:997](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L997)
 
 Reactively checks if an observable array or object is empty.
 
@@ -885,7 +920,7 @@ users.u2.active = true;
 
 > **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)
+Defined in: [aberdeen.ts:2800](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2800)
 
 When using a Map as `source`.
 
@@ -921,7 +956,7 @@ When using a Map as `source`.
 
 > **map**\<`IN`, `OUT`\>(`source`, `func`): `OUT`[]
 
-Defined in: [aberdeen.ts:2645](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2645)
+Defined in: [aberdeen.ts:2805](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2805)
 
 When using an array as `source`.
 
@@ -953,7 +988,7 @@ When using an array as `source`.
 
 > **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)
+Defined in: [aberdeen.ts:2810](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2810)
 
 When using an object as `source`.
 
@@ -993,13 +1028,11 @@ When using an object as `source`.
 
 > **merge**\<`T`\>(`dst`, `value`): `boolean`
 
-Defined in: [aberdeen.ts:1540](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1540)
+Defined in: [aberdeen.ts:1575](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1575)
 
 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
@@ -1020,7 +1053,7 @@ When the destination is an object and the source is an array, its keys are used
 
 `boolean`
 
-##### Examples
+##### Example
 
 ```typescript
 const source = { b: { c: 99 }, d: undefined }; // d: undefined will delete
@@ -1031,24 +1064,15 @@ merge(dest, 'c', { z: 7 }); // merge.c doesn't exist yet, so it will just be ass
 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)
+Defined in: [aberdeen.ts:1576](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1576)
 
 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
@@ -1073,7 +1097,7 @@ keyof `T`
 
 `boolean`
 
-##### Examples
+##### Example
 
 ```typescript
 const source = { b: { c: 99 }, d: undefined }; // d: undefined will delete
@@ -1084,20 +1108,13 @@ merge(dest, 'c', { z: 7 }); // merge.c doesn't exist yet, so it will just be ass
 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)
+Defined in: [aberdeen.ts:2739](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2739)
 
 Attaches a reactive Aberdeen UI fragment to an existing DOM element. Without the use of
 this function, [$](#) will assume `document.body` as its root.
@@ -1215,7 +1232,7 @@ items.push({ id: 'c', value: 30 });
 
 > **multiMap**\<`IN`, `OUT`\>(`source`, `func`): `OUT`
 
-Defined in: [aberdeen.ts:2730](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2730)
+Defined in: [aberdeen.ts:2890](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2890)
 
 When using an array as `source`.
 
@@ -1247,7 +1264,7 @@ When using an array as `source`.
 
 > **multiMap**\<`K`, `IN`, `OUT`\>(`source`, `func`): `OUT`
 
-Defined in: [aberdeen.ts:2735](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2735)
+Defined in: [aberdeen.ts:2895](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2895)
 
 When using an object as `source`.
 
@@ -1283,7 +1300,7 @@ When using an object as `source`.
 
 > **multiMap**\<`K`, `IN`, `OUT`\>(`source`, `func`): `OUT`
 
-Defined in: [aberdeen.ts:2741](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2741)
+Defined in: [aberdeen.ts:2901](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2901)
 
 When using a Map as `source`.
 
@@ -1387,7 +1404,7 @@ setTimeout(() => config.fontSize = 16, 2000);
 
 > **onEach**\<`K`, `T`\>(`target`, `render`, `makeKey?`): `void`
 
-Defined in: [aberdeen.ts:834](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L834)
+Defined in: [aberdeen.ts:875](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L875)
 
 ##### Type Parameters
 
@@ -1421,7 +1438,7 @@ Defined in: [aberdeen.ts:834](https://github.com/vanviegen/aberdeen/blob/6b79c7f
 
 > **onEach**\<`T`\>(`target`, `render`, `makeKey?`): `void`
 
-Defined in: [aberdeen.ts:839](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L839)
+Defined in: [aberdeen.ts:880](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L880)
 
 ##### Type Parameters
 
@@ -1451,7 +1468,7 @@ readonly (`undefined` \| `T`)[]
 
 > **onEach**\<`K`, `T`\>(`target`, `render`, `makeKey?`): `void`
 
-Defined in: [aberdeen.ts:844](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L844)
+Defined in: [aberdeen.ts:885](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L885)
 
 ##### Type Parameters
 
@@ -1564,7 +1581,7 @@ console.log(usersByTag);
 
 > **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)
+Defined in: [aberdeen.ts:2965](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2965)
 
 When using an object as `array`.
 
@@ -1596,7 +1613,7 @@ When using an object as `array`.
 
 > **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)
+Defined in: [aberdeen.ts:2970](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2970)
 
 When using an object as `source`.
 
@@ -1632,7 +1649,7 @@ When using an object as `source`.
 
 > **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)
+Defined in: [aberdeen.ts:2979](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2979)
 
 When using a Map as `source`.
 
@@ -1672,7 +1689,7 @@ When using a Map as `source`.
 
 > **peek**\<`T`, `K`\>(`target`, `key`): `T`\[`K`\]
 
-Defined in: [aberdeen.ts:2621](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2621)
+Defined in: [aberdeen.ts:2781](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2781)
 
 Executes a function or retrieves a value *without* creating subscriptions in the current reactive scope, and returns its result.
 
@@ -1728,7 +1745,7 @@ data.a = 2; // Triggers console.log (logs "A is 2, B was 3 when A changed.")
 
 > **peek**\<`K`, `V`\>(`target`, `key`): `undefined` \| `V`
 
-Defined in: [aberdeen.ts:2622](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2622)
+Defined in: [aberdeen.ts:2782](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2782)
 
 Executes a function or retrieves a value *without* creating subscriptions in the current reactive scope, and returns its result.
 
@@ -1784,7 +1801,7 @@ data.a = 2; // Triggers console.log (logs "A is 2, B was 3 when A changed.")
 
 > **peek**\<`T`\>(`target`, `key`): `undefined` \| `T`
 
-Defined in: [aberdeen.ts:2623](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2623)
+Defined in: [aberdeen.ts:2783](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2783)
 
 Executes a function or retrieves a value *without* creating subscriptions in the current reactive scope, and returns its result.
 
@@ -1836,7 +1853,7 @@ data.a = 2; // Triggers console.log (logs "A is 2, B was 3 when A changed.")
 
 > **peek**\<`T`\>(`target`): `T`
 
-Defined in: [aberdeen.ts:2624](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2624)
+Defined in: [aberdeen.ts:2784](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2784)
 
 Executes a function or retrieves a value *without* creating subscriptions in the current reactive scope, and returns its result.
 
@@ -1944,7 +1961,7 @@ setTimeout(() => graph.grow(), 4000);
 
 > **proxy**\<`T`\>(`target`): [`PromiseProxy`](#promiseproxy)\<`T`\>
 
-Defined in: [aberdeen.ts:1330](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1330)
+Defined in: [aberdeen.ts:1375](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1375)
 
 ##### Type Parameters
 
@@ -1966,7 +1983,7 @@ Defined in: [aberdeen.ts:1330](https://github.com/vanviegen/aberdeen/blob/6b79c7
 
 > **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)
+Defined in: [aberdeen.ts:1376](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1376)
 
 ##### Type Parameters
 
@@ -1988,7 +2005,7 @@ Defined in: [aberdeen.ts:1331](https://github.com/vanviegen/aberdeen/blob/6b79c7
 
 > **proxy**\<`T`\>(`target`): `T`
 
-Defined in: [aberdeen.ts:1332](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1332)
+Defined in: [aberdeen.ts:1377](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1377)
 
 ##### Type Parameters
 
@@ -2010,7 +2027,7 @@ Defined in: [aberdeen.ts:1332](https://github.com/vanviegen/aberdeen/blob/6b79c7
 
 > **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)
+Defined in: [aberdeen.ts:1378](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1378)
 
 ##### Type Parameters
 
@@ -2034,7 +2051,7 @@ Defined in: [aberdeen.ts:1333](https://github.com/vanviegen/aberdeen/blob/6b79c7
 
 > **ref**\<`T`, `K`\>(`target`, `index`): `ValueRef`\<`T`\[`K`\]\>
 
-Defined in: [aberdeen.ts:1906](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1906)
+Defined in: [aberdeen.ts:1954](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1954)
 
 Creates a reactive reference (`{ value: T }`-like object) to a specific value
 within a proxied object or array.
@@ -2096,7 +2113,7 @@ $(() => console.log(formData))
 
 > **runQueue**(): `void`
 
-Defined in: [aberdeen.ts:69](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L69)
+Defined in: [aberdeen.ts:69](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L69)
 
 Forces the immediate and synchronous execution of all pending reactive updates.
 
@@ -2120,7 +2137,7 @@ by a previous (or the same) `runQueue` call.
 ```typescript
 const data = proxy("before");
 
-$('#'+data);
+$('#', data);
 console.log(1, document.body.innerHTML); // before
 
 // Make an update that should cause the DOM to change.
@@ -2139,7 +2156,7 @@ console.log(2, document.body.innerHTML); // after
 
 > **setErrorHandler**(`handler?`): `void`
 
-Defined in: [aberdeen.ts:2409](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2409)
+Defined in: [aberdeen.ts:2596](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2596)
 
 Sets a custom error handler function for errors that occur asynchronously
 within reactive scopes (e.g., during updates triggered by proxy changes in
@@ -2175,7 +2192,7 @@ setErrorHandler(error => {
 
   try {
     // Attempt to show a custom message in the UI
-    $('div.error-message#Oops, something went wrong!');
+    $('div#Oops, something went wrong!', errorClass);
   } catch (e) {
     // Ignore errors during error handling itself
   }
@@ -2184,15 +2201,7 @@ setErrorHandler(error => {
 });
 
 // Styling for our custom error message
-insertCss({
-  '.error-message': {
-    backgroundColor: '#e31f00',
-    display: 'inline-block',
-    color: 'white',
-    borderRadius: '3px',
-    padding: '2px 4px',
-  }
-}, true); // global style
+const errorClass = insertCss('background-color:#e31f00 display:inline-block color:white r:3px padding: 2px 4px;');
 
 // Cause an error within a render scope.
 $('div.box', () => {
@@ -2207,9 +2216,9 @@ $('div.box', () => {
 
 > **setSpacingCssVars**(`base`, `unit`): `void`
 
-Defined in: [aberdeen.ts:1759](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1759)
+Defined in: [aberdeen.ts:1800](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1800)
 
-Initializes `cssVars[1]` through `cssVars[12]` with an exponential spacing scale.
+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`.
 
@@ -2219,13 +2228,13 @@ The scale is calculated as `2^(n-3) * base`, providing values from `0.25 * 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.
+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.
 
 ##### unit
 
 `string` = `'rem'`
 
-The CSS unit to use (default: 'rem'). Can be 'rem', 'em', 'px', or any other valid CSS unit.
+The CSS unit to use, like 'rem', 'em', or 'px'. Defaults to 'rem'.
 
 #### Returns
 
@@ -2234,6 +2243,7 @@ The CSS unit to use (default: 'rem'). Can be 'rem', 'em', 'px', or any other val
 #### Example
 
 ```javascript
+import { setSpacingCssVars, cssVars, onEach, $} from 'aberdeen';
 // Use default scale (0.25rem to 512rem)
 setSpacingCssVars();
 
@@ -2242,6 +2252,11 @@ setSpacingCssVars(16, 'px'); // 4px to 8192px
 
 // Use em units
 setSpacingCssVars(1, 'em'); // 0.25em to 512em
+
+// Show the last generated spacing values
+onEach(cssVars, (value, key) => {
+	$(`div #${key} → ${value}`)
+}, (value, key) => parseInt(key)); // Numeric sort
 ```
 
 ***
@@ -2250,12 +2265,13 @@ setSpacingCssVars(1, 'em'); // 0.25em to 512em
 
 > **unmountAll**(): `void`
 
-Defined in: [aberdeen.ts:2590](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L2590)
+Defined in: [aberdeen.ts:2750](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L2750)
 
 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.
+This effectively cleans up the entire Aberdeen application state. Aside from in
+automated tests, there should probably be little reason to call this function.
 
 #### Returns
 
@@ -2267,7 +2283,7 @@ This effectively cleans up the entire Aberdeen application state.
 
 > **unproxy**\<`T`\>(`target`): `T`
 
-Defined in: [aberdeen.ts:1447](https://github.com/vanviegen/aberdeen/blob/6b79c7fce769810bdcbd326b8ee6ef1c8e1fc011/src/aberdeen.ts#L1447)
+Defined in: [aberdeen.ts:1492](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/aberdeen.ts#L1492)
 
 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.