diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
new file mode 100644
index 0000000..f49c9be
--- /dev/null
+++ b/.github/workflows/node.js.yml
@@ -0,0 +1,31 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: build
+
+on: [push, pull_request]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [24]
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+        cache-dependency-path: '**/package-lock.json'
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm run coverage --if-present
+    - name: Coveralls
+      uses: coverallsapp/github-action@master
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
index 2d8d77e..9770d11 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,6 @@
-.nyc_output/
+.DS_Store
+.nyc_output
+v8.log
 coverage/
+dist/
 node_modules/
-package-lock.json
diff --git a/.npmignore b/.npmignore
deleted file mode 100644
index aaebbf0..0000000
--- a/.npmignore
+++ /dev/null
@@ -1,11 +0,0 @@
-.nyc_output/
-coverage/
-node_modules/
-rollup/
-test/
-package-lock.json
-uhtml-head.jpg
-LOGO.txt
-.travis.yml
-DOCUMENTATION.md
-V0.md
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..cafe685
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+package-lock=true
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index d5d5eb4..0000000
--- a/.travis.yml
+++ /dev/null
@@ -1,10 +0,0 @@
-language: node_js
-node_js:
-  - stable
-git:
-  depth: 1
-branches:
-  only:
-    - main
-after_success:
-  - "npm run coveralls"
diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
deleted file mode 100644
index e547b63..0000000
--- a/DOCUMENTATION.md
+++ /dev/null
@@ -1,476 +0,0 @@
-# What Is µhtml <sup><sub>(micro html)</sub></sup> And How Does It Work
-
-![snow flake](./uhtml-head.jpg)
-
-A _getting started_ guide with most common questions and answers, covered by live examples.
-
-- - -
-
-
-### A Brief Introduction
-
-While _µhtml_, on the surface, is a library that resemble some naive usage of [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML), it's actually far away from being an `innerHTML` replacement, as it's capable of handling events listeners, special and normal attributes, plus various kind of content, that will be properly parsed, normalized, and repeatedly updated at light speed, without trashing the previous content like `innerHTML` would do per each operation.
-
-```js
-render(element, html`
-  <h1 onclick=${() => console.log('🎉')}>
-    Welcome to <em>µhtml</em> 👋
-  </h1>
-`);
-```
-
-As summary: _µhtml_ is the tiniest declarative UI library of the Web, it's safe by default, and it's based on standard JS templates literals features.
-
-
-
-## Use Cases
-
-Every time you use "_vanilla JS_" to deal with the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model), you inevitably end up repeating over and over quite verbose code, and always to obtain the same result.
-
-Following a classic `<button>` element with a click handler and some state:
-
-```js
-const buttonState = {disabled: false, text: 'Click Me'};
-const {disabled, text} = buttonState;
-const {log} = console;
-
-const button = document.createElement('button');
-button.className = "clickable";
-button.disabled = disabled;
-button.textContent = text;
-button.addEventListener('click', () => log('clicked'));
-
-document.body.appendChild(button);
-```
-
-If this code looks familiar to you, it is highly possible your files contain most common helpers all over the place, such as `const create = name => document.createElement(name)` or similar.
-
-All those micro utilities are cool and tiny, but the question is: "_can they be declarative too?_"
-
-Following an example to obtain exact same result via _µhtml_, also [live on codepen](https://codepen.io/WebReflection/pen/jOPLBMm?editors=0010):
-
-```js
-import {render, html} from '//unpkg.com/uhtml?module';
-
-const buttonState = {disabled: false, text: 'Click Me'};
-const {disabled, text} = buttonState;
-const {log} = console;
-
-render(document.body, html`
-  <button class="clickable"
-    onclick=${() => log('clicked')}
-    .disabled=${disabled}
-  >
-    ${text}
-  </button>
-`);
-```
-
-As you can see, with _µhtml_ you can declare UI in a similar way you would do with writing regular _HTML_, but with few extra essential features that makes it create DOM elements fun again:
-
-  * event listeners are automatically handled, so that passing even a new function each time is ok, as the previous one, if different, is always removed. No more duplicated listeners by accident 🎉
-  * attributes with a special meaning in the JS world, like `disabled`, which can be directly accessed as _getters_ or _setters_, like we did before via `button.disabled = value`, instead of using a non semantic `button.setAttribute("disabled", "")` to set it disabled, and `button.removeAttribute("disabled")` to enabled it back, can be prefixed with a `.`, as it's done in `.disabled=${value}`
-  * any other regular attribute can be used too, abstracting away the tedious `el.setAttribute(...)` dance, with the ability to remove attributes by simply passing `null` or `undefined` instead of an actual value, so that you could write `disabled=${value || null}` if using the `.` prefix is not your cup of tea
-  * attributes that start with `on...` will be set as listeners right away, removing any previous listener if different from the one passed along. In this case, the `onclick=${() => ...}` arrow function would be a new listener to re-add each time
-  * the content is always safe to pass as _interpolation_ value, and there's no way to inject _HTML_ by accident
-
-Bear in mind, the content can also be another `html` chunk, repeatable in lists too, as the following example, also [live in codepen](https://codepen.io/WebReflection/pen/vYOJxpE?editors=0010) shows:
-
-```js
-const items = [
-  {text: 'Web Development'},
-  {text: 'Is Soo Cool'},
-];
-
-render(document.body, html`
-  <ul>
-    ${items.map(
-      ({text}, i) => html`<li class=${'item' + i}>${text}</li>`
-    )}
-  </ul>
-`);
-```
-
-As simple as it looks, you might wonder what kind of _magic_ is involved behind the scene, but the good news is that ...
-
-
-#### It's 100% JavaScript Standard: No Tooling Needed 🦄
-
-The only real _magic_ in _µhtml_ is provided by an ECMAScript 2015 feature, known as [Tagged Templates Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates).
-
-When you prefix any template literal string with a function, without needing to invoke such function, the JavaScript engine executes these simple, but extremely useful, steps:
-
-```js
-const tag = (template, ...values) => {
-  // ℹ the function is invoked with these arguments
-  // a *unique* array of strings around interpolations
-  console.log(`Template: ${template}`);
-  // and all the interpolations values a part
-  console.log(`Values: ${values}`);
-}
-
-// ⚠ it's tag`...`, not tag()`...`
-tag`This is a ${'template literals'} tagged ${'test'}`;
-
-// Template: "This is a ", " tagged ", ""
-// Values: "template literals", "test"
-```
-
-The *unique* part of the equation means that any template literal is always the same array, as long as it comes from the same scope, and the very same part of the script, example:
-
-```js
-const set = new WeakSet;
-const tag = template => {
-  if (set.has(template))
-    console.log('known template');
-  else {
-    set.add(template);
-    console.log('new template');
-  }
-};
-
-const scoped = () => tag`test`;
-
-tag`test`;  // new template
-tag`test`;  // new template
-scoped();   // new template
-scoped();   // known template
-scoped();   // known template
-tag`test`;  // new template
-```
-
-This is the fundamental concept that enables _µhtml_ to be smart about never parsing more than once the exact same template, and it perfectly suits the "_components as callback_" pattern too:
-
-```js
-// an essential Button component example
-const Button = (text, className) => html`
-  <button class=${className}>${text}</button>
-`;
-
-// render as many buttons as needed
-render(document.body, html`
-  Let's put some button live:
-  ${Button('first', 'first')} <br>
-  ${Button('second', '')}     <br>
-  ${Button('third', 'last')}
-`);
-```
-
-
-#### How Does The Parsing Work ?
-
-This part is extremely technical and likely irrelevant for a getting started page, but if you are curious to understand what happens behind the scene, you can find all steps in here.
-
-<details>
-  <summary><strong>Internal Parsing Steps</strong></summary>
-
-Taking the essential `Button(text, className)` component example, this is how _µhtml_ operates:
-
-  * if the `<button class=${...}>${...}</button>` template is unknown:
-    * loop over all template's chunks and perform these checks:
-      * if the end of the chunk is `name="`, or `name='`, or `name=`, and there is an opened `<element ...` before:
-        * substitute the attribute name with a custom `µhtml${index}="${name}"`
-      * if the chunk wasn't an attribute, and the `index` of the loop is not the last one:
-        * append an `<!--µhtml${index}-->` comment to the layout
-      * otherwise append the chunk as is, it's the closing part
-    * normalize all self-closing, [not void](https://developer.mozilla.org/en-US/docs/Glossary/empty_element), elements, so that the resulting joined layout contains `<span></span>` or `<custom-element></custom-element>` instead of `<span />` or `<custom-element />`, which is another handy _µhtml_ feature 😉
-    * let the browser engine parse the final layout through the native [Content Template element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) and traverse it in search of all comments and attributes that are only related to _µhtml_
-    * per each crawled node, using an `index` that goes from _zero_ to the length of passed values, as these are those to map and update in the future:
-      * if the node is a _comment_, and its text content is exactly `µhtml${index}`, map recursively the position of that node to retrieve it later on, and move the `index` forward
-      * if the node is not a comment:
-        * while the node has an attribute named `µhtml${index}`, map the attribute value, which is the original name, and map the node to retrieve it later on, then move the `index` forward
-      * if the node is a `style` or a `textarea`, and it contains `<!--µhtml${index}-->`, 'cause these elements cannot have comments in their content, map the node and flag it as "_text content only_", then move the `index` forward
-      * if there are no more nodes to crawl, and the `index` haven't reached the loop `length`, throw an error passing the _template_, as something definitively went wrong
-    * at this point we have a unique _template_ reference, and a list of nodes to retrieve and manipulate, every time new values are passed along. Per each information, assign to each mapped node the operation to perform whenever new values are passed around: handle _content_, _attributes_, or _text_ only.
-    * weakly reference all these information with the _template_, and keep following these steps
-  * retrieve the details previously stored regarding this _template_
-  * verify in which part of the rendering stack we are, and relate that stack to the current set of details
-  * if the stack is not already known:
-    * clone the fragment related to this template
-    * retrieve all nodes via the paths previously stored
-    * map each update operation to that path
-    * relate these information with the current execution stack to avoid repeating this next time, keep going with the next step
-  * per each update available for this part of the stack, pass each interpolated value along, so that _content_, _attributes_, or _text content_ previously mapped, can decide what to do with the new value
-  * if the new value is the same as it was before, do nothing, otherwise update the attribute, text content, or generic content of the node, using in this latter case `<!--µhtml${index}-->` comment node reference, to keep updates confined _before_ that portion of the tree 
-
-As result, each `Button(text, className)` component will simply invoke just two callbacks, where the first one will update its `class` attribute, while the second one will update its `textContent` value, and in both cases, only if different from the previous call.
-
-This might not look super useful for "_one-off_" created elements, but it's a performance game changer when the UI is frequently updated, as in lists, news feeds, chats, games, etc.
-
-I also understand this list of steps might be "_a bit_" overwhelming, but these describe pretty much everything that happens in the [rabbit.js](./esm/rabbit.js) file, which also takes care of the whole "_execution stack dance_", which enables nested rendered, with smart diff, and through the [µdomdiff](https://github.com/WebReflection/udomdiff#readme) module.
-
-It's also worth mentioning I've been fine-tuning all these steps since the beginning of 2017, so maybe it was unnecessary to describe them all, but "_the nitty-gritty_" at least is now written down somewhere 😅
-
-</details>
-
-
-
-## API In Details
-
-The module itself exports these three functions: `render`, `html`, and `svg`.
-
-
-### The `render(where, what)` Utility
-
-This function purpose is to update the content of the _where_ DOM node, which could be a custom element, or any other node that can contain other nodes.
-
-```js
-render(
-  // where to render
-  document.querySelector('#container'),
-  // what to render
-  html`content` || svg`content` || Node || callback
-);
-
-// Custom Element basic example
-class MyComponent extends HTMLElement {
-  connectedCallback() {
-    // render content, it could also be
-    // a Shadow root node
-    render(this, html`My CE Content`);
-  }
-}
-```
-
-If the value of _what_ is just a DOM node, and it's different from the one rendered before, it will clear the container and append it.
-
-If the value of _what_ is a callback, it will invoke it and use its result as content. Such result can be a _Node_, or the returning value of `html` or `svg` tags.
-
-
-### The `html` and `svg` Tags
-
-As the name would suggest, `html` is the tag to use when _HTML_ content is meant to be created, while `svg` should be used to created valid _SVG_ nodes.
-
-Beside this essential difference, both tags work in the exact same way, and both tags provide extra tags, such as `.node` and `.for(ref[, id])`.
-
-
-#### The `.node` Tag
-
-Both `html.node` and `svg.node` tags create a fresh new version of that specified content and return it.
-
-```js
-// use node to generate new DOM content
-const div = html.node`<div />`;
-
-// the div is 100% a node
-div.textContent = 'some µhtml content';
-document.body.appendChild(div);
-```
-
-It is also possible to create multiple sibling nodes at once:
-
-```js
-const fragment = html.node`
-  <span>first</span>
-  <span>second</span>
-  <span>third</span>
-`;
-
-document.body.appendChild(fragment);
-```
-
-The only special feature of fragments created via `html.node` or `svg.node`, is that these will always return `fragment.firstChild` and `fragment.lastChild` nodes, even after being appended live, where native regular fragments would instead lose all their children.
-
-_µhtml_ fragments have also two special methods: `valueOf()`, that allow you to move all nodes initially assigned to the fragment somewhere else, or `remove()`, which would remove all nodes initially assigned in one shot.
-
-```js
-// using the previous code example, then ...
-
-document.body.removeChild(fragment.remove());
-
-setTimeout(() => document.body.appendChild(fragment.valueOf()));
-```
-
-It is not super important to understand how to use fragments by hand, but these features are essential for the _µhtml_ DOM diffing engine called _[µdomdiff](https://github.com/WebReflection/udomdiff#readme)_, which is capable of updating, removing, or moving fragments around as needed.
-
-
-
-#### The `.for(ref[, id])` Tag
-
-If you are familiar with the _keyed_ and _non-keyed_ rendering concepts, this method allows just that: you can reference a specific node, and its optional id, to any object. By default, _µhtml_ uses a rendering stack to provide automatically, to each interpolation, and "_always same index_" during updates.
-
-```js
-// non-keyed rendered view
-const update = (items) => {
-  render(
-    document.querySelector('.list-items'),
-    html`
-    <ul>
-      ${items.map(
-        ({id, name}) =>
-          html`<li data-id=${id}>${name}</li>`
-      )}
-    </ul>`
-  );
-};
-
-const items = [
-  {id: 1, name: 'Article X'},
-  {id: 2, name: 'Article Y'},
-  {id: 3, name: 'Article Z'},
-];
-
-update(items);
-```
-
-While most of the time it's OK to use _non-keyed_ renders, there could be side effects when, instead of simple nodes, you have Custom Elements in the list, or you have special mutation observers somehow attached to the inner nodes.
-
-In these cases, whenever the list changes, nodes that were previously there will simply be updated with new content, attributes, and the rest, but if the Custom Element had an `attributeChangedCallback`, as example, that does something expensive, such as fetching new data, as example, this callback will be inevitably called multiple times every time an article changes position in the list, or the list is sorted, it shrinks, or it expands.
-
-But fear not, it is possible to relate a specific node through the tag returned by `.for(...)`:
-
-
-```js
-// *keyed* rendered view
-const update = (items) => {
-  const ref = document.querySelector('.list-items');
-  render(ref, html`
-    <ul>
-      ${items.map(
-        ({id, name}) =>
-          html.for(ref, id)`<li data-id=${id}>${name}</li>`
-      )}
-    </ul>`
-  );
-};
-
-const items = [
-  {id: 1, name: 'Article X'},
-  {id: 2, name: 'Article Y'},
-  {id: 3, name: 'Article Z'},
-];
-
-update(items);
-```
-
-With latest example, [live in codepen](https://codepen.io/WebReflection/pen/NWqvmJg?editors=0010), you can follow nodes moving around without ever changing any of their attributes or content, and this is how, and why, _keyed_ renders can be very important.
-
-## API: Attributes
-
-Any element can have one or more attribute, either interpolated or not.
-
-```js
-render(document.body, html`
-  <div id="main"
-        class=${`content ${extra}`}
-        data-fancy=${fancy}>
-    <p contenteditable=${editable}
-        onclick=${listener}
-        class="${['container', 'user'].join(' ')}">
-      Hello ${user.name}, feel free to edit this content.
-    </p>
-  </div>
-`);
-```
-
-These are the rules to follow for attributes:
-
-  * interpolated attributes don't require the usage of quotes, but these work either ways. `name=${value}` is OK, and so is `name="${value}"` or even `name='${value}'`
-  * you cannot have sparse attribute interpolations: always use one interpolation to define each attribute that needs one, but never write things like `style="top:${x};left:${y}"` as the parser will simply break with the error _bad template_. Use template literals within interpolations, if you want to obtain exact same result: ``style=${`top:${x};left:${y}`}``
-  * if the passed value is `null` or `undefined`, the attribute will be removed. If the value is something else, it will be set as is as value. If the attribute was previously removed, the same attribute will be placed back again. If the value is the same as it was before, nothing happens
-  * if the attribute name starts with `on`, as example, `onclick=${...}`, it will be set as listener. If the listener changes, the previous one will be automatically removed. If the listener is an `Array` like `[listener, {once:true}]`, the second entry of the array would be used as listener's options.
-  * if the attribute starts with a `.` dot, as in `.setter=${value}`, the value will be passed directly to the element per each update. If such value is a known setter, either native elements or defined via Custom Elements, the setter will be invoked per each update, even if the value is the same
-  * **new**: if the attribute starts with a `?` question mark, as in `?hidden=${value}`, the value will be toggled, accordingly with its *truthy*, or *falsy*, value.
-  * if the attribute name is `ref`, as in `ref=${object}`, the `object.current` property will be assigned to the node, once this is rendered, and per each update. If a callback is passed instead, the callback will receive the node right away, same way [React ref](https://reactjs.org/docs/refs-and-the-dom.html) does.
-  * if the attribute name is `aria`, as in `aria=${object}`, aria attributes are applied to the node, including the `role` one.
-  * if the attribute name is `.dataset`, as in `.dataset=${object}`, the `node.dataset` gets populated with all values.
-
-
-Following an example of both `aria` and `.dataset` cases:
-
-```js
-// the aria special case
-html`<div aria=${{labelledBy: 'id', role: 'button'}} />`;
-//=> <div aria-labelledby="id" role="button"></div>
-
-// the data special case
-html`<div .dataset=${{key: 'value', otherKey: 'otherValue'}} />`;
-//=> <div data-key="value" data-other-key="otherValue"></div>
-```
-
-## API: HTML/SVG Content
-
-It is possible to place interpolations within any kind of node, and together with text or other nodes too.
-
-```js
-render(document.body, html`
-  <table>
-    ${lines.map((text, i) => html`
-      <tr><td>Row ${i} with text: ${text}</td></tr>
-    `)}
-  </table>
-`);
-```
-
-There are only two exceptional nodes that do not allow sparse content within themselves: the `style` element, and the `textarea` one.
-
-```js
-// DON'T DO THIS
-render(document.body, html`
-  <style>
-    body { font-size: ${fontSize}; }
-  </style>
-  <textarea>
-    Write here ${user.name}
-  </textarea>
-`);
-
-// DO THIS INSTEAD
-render(document.body, html`
-  <style>
-  ${`
-    body { font-size: ${fontSize}; }
-  `}
-  </style>
-  <textarea>
-  ${`
-    Write here ${user.name}
-  `}
-  </textarea>
-`);
-```
-
-Beside nodes where the content will be inevitably just text, like it is for `style` or `textarea`, as example, every other interpolation can contain primitives, as strings, numbers, or even booleans, or the returned value of `html` or `svg`, plus regular DOM nodes.
-
-The only special case are _Array_ of either primitives, or returned values from `html` or `svg`, and since *2.5* _Function_, invoked and resolved after invoke.
-
-
-```js
-render(document.body, html`
-  <ul>
-    <li>This is ${'primitive'}</li>
-    <li>This is joined as primitives: ${[1, 2, 3]}</li>
-    <li>This is a callback: ${utility}</li>
-    ${lines.map((text, i) => html`
-      <li>Row ${i} with content: ${text}</li>
-    `)}
-  </ul>
-`);
-```
-
-## API: Rendering
-
-The second `what` argument of the `render(where, what)` signature can be either a function, which returning value will be used to populate the content, the result of `html` or `svg` tags, or a DOM node, so that it is possible to render within a render.
-
-
-```js
-const Button = selector => {
-  const button = document.querySelector(selector);
-  return count => render(button, html`Clicks: ${count}`);
-};
-
-const Clicker = selector => {
-  const button = Button(selector);
-  return function update(count) {
-    return render(document.body, html`
-      <div onclick=${() => update(++count)}>
-        Click again:
-        ${button(count)}
-      </div>
-    `);
-  };
-}
-
-const clicker = Clicker('#btn-clicker');
-clicker(0);
-```
diff --git a/LICENSE b/LICENSE
index fbb4931..d14b06e 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,15 +1,21 @@
-ISC License
+MIT License
 
-Copyright (c) 2020, Andrea Giammarchi, @WebReflection
+Copyright © 2020-today, Andrea Giammarchi, @WebReflection
 
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted, provided that the above
-copyright notice and this permission notice appear in all copies.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software
+is furnished to do so, subject to the following conditions:
 
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
-OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
+The above copyright notice and this permission notice shall be included
+in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
diff --git a/README.md b/README.md
index 2020475..708da3a 100644
--- a/README.md
+++ b/README.md
@@ -1,386 +1,267 @@
-# <em>µ</em>html
+# uhtml
 
-[![Downloads](https://img.shields.io/npm/dm/uhtml.svg)](https://www.npmjs.com/package/uhtml) [![Build Status](https://travis-ci.com/WebReflection/uhtml.svg?branch=main)](https://travis-ci.com/WebReflection/uhtml) [![Coverage Status](https://coveralls.io/repos/github/WebReflection/uhtml/badge.svg?branch=main)](https://coveralls.io/github/WebReflection/uhtml?branch=main) [![CSP strict](https://webreflection.github.io/csp/strict.svg)](https://webreflection.github.io/csp/#-csp-strict)
+[![Downloads](https://img.shields.io/npm/dm/uhtml.svg)](https://www.npmjs.com/package/uhtml) [![build status](https://github.com/WebReflection/uhtml/actions/workflows/node.js.yml/badge.svg)](https://github.com/WebReflection/uhtml/actions) [![Coverage Status](https://coveralls.io/repos/github/WebReflection/uhtml/badge.svg?branch=main)](https://coveralls.io/github/WebReflection/uhtml?branch=main) [![CSP strict](https://webreflection.github.io/csp/strict.svg)](https://webreflection.github.io/csp/#-csp-strict)
 
 ![snow flake](./uhtml-head.jpg)
 
 <sup>**Social Media Photo by [Andrii Ganzevych](https://unsplash.com/@odya_kun) on [Unsplash](https://unsplash.com/)**</sup>
 
-_micro html_ is a _~2.5K_ [lighterhtml](https://github.com/WebReflection/lighterhtml#readme) subset to build declarative and reactive UI via template literals tags.
-
-### 📣 Community Announcement
-
-Please ask questions in the [dedicated discussions repository](https://github.com/WebReflection/discussions), to help the community around this project grow ♥
-
----
-
-### V2.5 Update
-
-  * an interpolated value, within a *DOM* element, can now be a `function`, enabling a world of *µhtml* extending possibilities, including [intents](https://github.com/WebReflection/uhtml-intents#readme), hence aligning the behavior with both *lighterhtml* and *hyperHTML*. That is: `<el>${callback}</el>`! The `callback` will be invoked with the *comment* pin/placeholder as unique argument, where its `parentNode` would be the element containing such comment, if needed, and its returned value will be passed along the same mechanism that resolves already all other cases.
-
-### V2.4 Update
-
-  * a new `?attribute=${value}` prefix, with a question mark, has landed, after [this long debate](https://github.com/WebReflection/discussions/discussions/13), and based to the fact *µhtml* never wants to be ambiguous. However, the mighty [lit-html](https://terodox.tech/lit-html-part-2/) put an end to the debate, disambiguating through a `?` question mark prefix, which explicits developers intents, and works well across browsers. So that's it: whenever you expect an attribute to be in, or out, use `?name=${value}` and win the day 🥳
+- - -
 
-### V2.2 Update
+## Warning ⚠️
 
-  * the `new.js` file has been renamed as `es.js` to align with other modules of mine that follow the same pattern.
-  * this module now exports its very same utilities via `uhtml/async`, in order to automatically resolve asynchronous values passed along the template. Please note this means that exported `render`, `html`, and `svg` tags, are all asynchronous, hence these all return a promise.
-  * the `async.js` file is now published too, compatible with ES2015+ browsers (no `async` / `await` used)
+I'm on vacation! The fastest version and most battle tested version of this library is **v4**.
 
----
+If you are using **v4**, please keep doing that!
 
-## How To
+If you're happy to try **v5** please file issues in here, don't expect me to react out of tweets, and thank you for helping me out with use cases I couldn't even think about.
 
-**Example**
-```js
-import {render, html, svg} from 'uhtml/async';
+**v5** is a rewrite from scratch based on another library (which is *Python based*) that works perfectly fine **but** it doesn't have a reactivity story fully attached yet.
 
-render(document.body, html`a${Promise.resolve('b')}c`);
-```
+This rewrite feels good, it avoids unnecessary loops, but it's also naively based on *signals* for everything that was way easier to control before ... *a whole render* each time, never atomic, never considering edge cases around conditional arrays and what not.
 
+I understand, now that signals are in, everyone is going to use signals for everything, as a distributed shared state of everything you are doing, but as a person that alaywas provided libraries to keep it simple, I couldn't even think about some of the scenarios you are "*abusing*" (no offence, my shortsighting) signals for, so my deepest apologies if the current state of **v5** cannot meet your expectations, I've tried my best, and unfortunately rushed a little bit, with this release, but all the ideas behind represent where I want to go from now on.
 
-### How To Use µhtml
+Again, apologies for not delivering like I've done before but be assured all the dots will be soon connected in a better way, or at least one that works reliably 👋
 
-Install the module via `npm i uhtml` and consume it as such:
+P.S. **v4** is right here: https://github.com/WebReflection/uhtml/tree/v4
 
-```js
-import {render, html, svg} from 'uhtml';
-// const {render, html, svg} = require('uhtml');
+- - -
 
-render(document.body, html`<h1>Hello 👋 µhtml</h1>`);
-```
+A minimalistic library to create fast and reactive Web pages.
 
-Alternatively you can use a CDN such as _unpkg_, as shown in [this demo](https://codepen.io/WebReflection/pen/bGdBjjL?editors=0010).
 ```html
-<script src="https://unpkg.com/uhtml">/* global uhtml */</script>
-<!-- or -->
+<!doctype html>
 <script type="module">
-import {render, html, svg} from 'https://unpkg.com/uhtml?module';
+  import { html } from 'https://esm.run/uhtml';
+
+  document.body.prepend(
+    html`<h1>Hello DOM !</h2>`
+  );
 </script>
 ```
 
-- - -
-
-## API Documentation
+*uhtml* (micro *µ* html) offers the following features without needing specialized tools:
 
-Most information about _µhtml_ are written in the [documentation file](./DOCUMENTATION.md), but following you can read most essential details.
+  * *JSX* inspired syntax through template literal `html` and `svg` tags
+  * *React* like components with *Preact* like *signals*
+  * compatible with native custom elements and other Web standards out of the box
+  * simplified accessibility via `aria` attribute and easy *dataset* handling via `data`
+  * developers enhanced mode runtime debugging sessions
 
-<details>
-  <summary><strong>API Summary</strong></summary>
-  <div>
 
-The module exports the following functionalities:
+<sub>test in [codepen](https://codepen.io/WebReflection/pen/VYvbddv?editors=0010)</sub>
 
-  * a `render(where, what)` function to populate the `where` DOM node with `what` content, which can be a DOM node, or the returning value of `html` and `svg` tags. The `render` function returns the `where` DOM node itself.
-  * a `html` template literal [tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates), to produce any sort of _HTML_ content.
-  * a `svg` template literal [tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates), to produce any sort of _SVG_ content.
-  * both `html` and `svg` implements a `.for(reference[, id])` template tag function for _keyed_ weak relationships within the node. Please don't overuse this feature, as 90% of the time is not necessary, and it could make the rendering slower than it should. Also, consider the `ref` attribute, in case a reference to the current node is needed at any time.
-  * both `html` and `svg` implements a `.node` template tag function for *one-off* HTML or SVG creation. Please don't use `html.node` one off nodes within `render(...)` calls, as this utility exists to help creating fragments or nodes that should be *manually* added to the DOM, and *not* through `render` calls.
-
-  </div>
-</details>
+```js
+import { html, signal } from 'https://esm.run/uhtml';
 
-<details>
-  <summary><strong>About Attributes</strong></summary>
-  <div>
+function Counter() {
+  const count = signal(0);
 
-Any element can have one or more attribute, either interpolated or not.
+  return html`
+    <button onClick=${() => count.value++}>
+      Clicked ${count.value} times
+    </button>
+  `;
+}
 
-```js
-render(document.body, html`
-  <div id="main"
-        class=${`content ${extra}`}
-        data-fancy=${fancy}>
-    <p contenteditable=${editable}
-        @click=${listener}
-        onclick=${listener}
-        class="${['container', 'user'].join(' ')}">
-      Hello ${user.name}, feel free to edit this content.
-    </p>
-  </div>
-`);
+document.body.append(
+  html`<${Counter} />`
+);
 ```
 
-These are the rules to follow for attributes:
+- - -
 
-  * interpolated attributes don't require the usage of quotes, but these work either ways. `name=${value}` is OK, and so is `name="${value}"` or even `name='${value}'`
-  * you cannot have sparse attribute interpolations: always use one interpolation to define each attribute that needs one, but never write things like `style="top:${x};left${y}"` as the parser will simply break with the error _bad template_. Use template literals within interpolations, if you want to obtain exact same result: ``style=${`top:${x};left${y}`}``
-  * if the passed value is `null` or `undefined`, the attribute will be removed. If the value is something else, it will be set as is as value. If the attribute was previously removed, the same attribute will be placed back again. If the value is the same as it was before, nothing happens
-  * if the attribute name starts with `on` or `@`, as example, `onclick=${...}` or `@click=${...}`, it will be set as listener. If the listener changes, the previous one will be automatically removed. If the listener is an `Array` like `[listener, {once:true}]`, the second entry of the array would be used as listener's options.
-  * if the attribute starts with a `.` dot, as in `.setter=${value}`, the value will be passed directly to the element per each update. If such value is a known setter, either native elements or defined via Custom Elements, the setter will be invoked per each update, even if the value is the same
-  * **new**: if the attribute starts with a `?` question mark, as in `?hidden=${value}`, the value will be toggled, accordingly with its *truthy*, or *falsy*, value.
-  * if the attribute name is `ref`, as in `ref=${object}`, the `object.current` property will be assigned to the node, once this is rendered, and per each update. If a callback is passed instead, the callback will receive the node right away, same way [React ref](https://reactjs.org/docs/refs-and-the-dom.html) does. Please note that *conditional renders will not cleanup the reference*, if this is not assigned to the new node.
-  * if the attribute name is `aria`, as in `aria=${object}`, aria attributes are applied to the node, including the `role` one.
-  * if the attribute name is `.dataset`, as in `.dataset=${object}`, the `node.dataset` gets populated with all values.
+## Syntax
 
+If you are familiar with *JSX* you will find *uhtml* syntax very similar:
 
-Following an example of both `aria` and `data` cases:
+  * self closing tags, such as `<p />`
+  * self closing elements, such as `<custom-element>...</>`
+  * object spread operation via `<${Component} ...${{any: 'prop'}} />`
+  * `key` attribute to ensure *same DOM node* within a list of nodes
+  * `ref` attribute to retrieve the element via effects or by any other mean
 
-```js
-// the aria special case
-html`<div aria=${{labelledBy: 'id', role: 'button'}} />`;
-//=> <div aria-labelledby="id" role="button"></div>
+The main difference between *uhtml* and *JSX* is that *fragments* do **not** require `<>...</>` around:
 
-// the data special case
-html`<div .dataset=${{key: 'value', otherKey: 'otherValue'}} />`;
-//=> <div data-key="value" data-other-key="otherValue"></div>
+```js
+// uhtml fragment example
+html`
+  <div>first element</div>
+  <p> ... </p>
+  <div>last element</div>
+`
 ```
 
-  </div>
-</details>
+### Special Attributes
 
-<details>
-  <summary><strong>About HTML/SVG Content</strong></summary>
-  <div>
+On top of *JSX* like features, there are other attributes with a special meaning:
 
-It is possible to place interpolations within any kind of node, and together with text or other nodes too.
+  * `aria` attribute to simplify *a11y*, such as `<button aria=${{role: 'button', labelledBy: 'id'}} />`
+  * `data` attribute to simplify *dataset* handling, such as `<div data=${{any: 'data'}} />`
+  * `@event` attribute for generic events handling, accepting an array when *options* are meant to be passed, such as `<button @click=${[event => {}, { once: true }]} />`
+  * `on...` prefixed, case insensitive, direct events, such as `<button onclick=${listener} />`
+  * `.direct` properties access, such as `<input .value=${content} />`, `<button .textContent=${value} />` or `<div .className=${value} />`
+  * `?toggle` boolean attributes, such as `<div ?hidden=${isHidden} />`
 
-```js
-render(document.body, html`
-  <table>
-    ${lines.map((text, i) => html`
-      <tr><td>Row ${i} with text: ${text}</td></tr>
-    `)}
-  </table>
-`);
-```
+All other attributes will be handled via standard `setAttribute` or `removeAttribute` when the passed value is either `null` or `undefined`.
 
-There are only few exceptional nodes that do not allow sparse content within themselves:
+### Special Elements
 
-  * `<plaintext>${content}</plaintext>`, *deprecated*, yet it cannot contain comments
-  * `<script>${content}</script>`, it can contain comments, but only whole text can be replaced
-  * `<style>${content}</style>`, it cannot contain comments
-  * `<textarea>${content}</textarea>`, same as above
-  * `<title>${content}</title>`, same as above
-  * `<xmp>${content}</xmp>`, same as above
+Elements that contain *data* such as `<script>` or `<style>`, or those that contains text such as `<textarea>` require *explicit closing tag* to avoid having in between templates able to break the layout.
 
-Following an example on how to populate these nodes (wrong + right way):
+This is nothing new to learn, it's just how the Web works, so that one cannot have `</script>` within a `<script>` tag content and the same applies in here.
 
-```js
-// DON'T DO THIS
-render(document.body, html`
-  <style>
-    body { font-size: ${fontSize}; }
-  </style>
-  <textarea>
-    Write here ${user.name}
-  </textarea>
-`);
-
-// DO THIS INSTEAD
-render(document.body, html`
-  <style>
-  ${`
-    body { font-size: ${fontSize}; }
-  `}
-  </style>
-  <textarea>
-  ${`
-    Write here ${user.name}
-  `}
-  </textarea>
-`);
-```
+In *debugging* mode, an error telling you which template is malformed will be triggered in these cases.
 
-Beside nodes where the content will be inevitably just text, like it is for `style` or `textarea`, as example, every other interpolation can contain primitives, as strings, numbers, or even booleans, or the returned value of `html` or `svg`, plus regular DOM nodes.
+### About Comments
 
-The only special case are _Array_ of either primitives, or returned values from `html` or `svg`.
+Useful for developers but never really relevant for end users, *comments* are ignored by default in *uhtml* except for those flagged as "*very important*".
 
+The syntax to preserve a comment in the layout is `<!--! important !-->`. Every other comment will not be part of the rendered tree.
 
 ```js
-render(document.body, html`
-  <ul>
-    <li>This is ${'primitive'}</li>
-    <li>This is joined as primitives: ${[1, 2, 3]}</li>
-    ${lines.map((text, i) => html`
-      <li>Row ${i} with content: ${text}</li>
-    `)}
-  </ul>
-`);
+html`
+  <!--! this is here to stay !-->
+  <!--// this will go -->
+  <!-- also this -->
+`
 ```
 
-  </div>
-</details>
-
-<details>
-  <summary><strong>About Rendering Content</strong></summary>
-  <div>
+The result will be a clear `<!-- this is here to stay -->` comment in the layout without starting and closing `!`.
 
-The second `what` argument of the `render(where, what)` signature can be either a function, which returning value will be used to populate the content, the result of `html` or `svg` tags, or a DOM node, so that it is possible to render within a render.
+#### Other Comments
 
+There are two kind of "*logical comments*" in *uhtml*, intended to help its own functionality:
 
-```js
-const Button = selector => {
-  const button = document.querySelector(selector);
-  return count => render(button, html`Clicks: ${count}`);
-};
+  * `<!--◦-->` *holes*, used to *pin* in the DOM tree where changes need to happen.
+  * `<!--<>-->` and `<!--</>-->` persistent *fragments* delimeters
 
-const Clicker = selector => {
-  const button = Button(selector);
-  return function update(count) {
-    return render(document.body, html`
-      <div onclick=${() => update(++count)}>
-        Click again:
-        ${button(count)}
-      </div>
-    `);
-  };
-}
+The *hole* type might disappear once replaced with different content while persistent fragments delimeters are needed to confine and/or retrieve back fragments' content.
 
-const clicker = Clicker('#btn-clicker');
-clicker(0);
-```
+Neither type will affect performance or change layout behavior.
 
-  </div>
-</details>
-
-<details>
-  <summary><strong>About keyed renders</strong></summary>
-  <div>
-
-_µhtml_ `html` and `svg` tags implement exact same API offered by _lighterhtml_.
+- - -
 
-This means that both `html.for(reference[, id])` and `svg.for(reference[, id])` will weakly relate the node with the reference, and an optional unique id, instead of using its internal auto-referenced algorithm.
+## Exports
 
 ```js
-render(document.body, html`
-  <ul>
-    ${items.map(item => html.for(item)`
-      <li>Keyed row with content: ${item.text}</li>
-    `)}
-  </ul>
-`);
+import {
+  // DOM manipulation
+  render, html, svg, unsafe,
+  // Preact like signals, based on alien-signals library
+  signal, computed, effect, untracked, batch,
+  // extras
+  Hole, fragment,
+} from 'https://esm.run/uhtml';
 ```
 
-  </div>
-</details>
-
-<details>
-  <summary><strong>About data purity</strong></summary>
-  <div>
+**In details**
 
-In more than one occasion [developers got bitten](https://github.com/WebReflection/uhtml/issues/41) by the fact _µhtml_ can produce some cryptic error when `null`, or empty content, is provided as interpolation/hole.
+  * `render(where:Element, what:Function|Hole|Node)` to orchestrate one-off or repeated content rendering, providing a scoped *effect* when a *function* is passed along, such as `render(document.body, () => App(data))`. This is the suggested way to enrich any element content with complex reactivity in it.
+  * `html` and `svg` [template literal tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) to create either *HTML* or *SVG* content.
+  * `unsafe(content:string)` to inject any content, even *HTML* or *SVG*, anywhere within a node: `<div>${unsafe('<em>value</em>')}</div>`
+  * `signal`, `computed`, `effect`, `untracked` and `batch` utilities with [Preact signals](https://github.com/preactjs/signals/blob/main/packages/core/README.md) inspired API, fueled by [alien-signals](https://github.com/stackblitz/alien-signals#readme)
+  * `Hole` class used internally to resolve `html` and `svg` tags' template and interpolations. This is exported mainly to simplify *TypeScript* related signatures.
+  * `fragment(content:string, svg?:boolean)` extra utility, used internally to create either *HTML* or *SVG* elements from a string. This is merely a simplification of a manually created `<template>` element, its `template.innerHTML = content` operation and retrieval of its `template.content` reference, use it if ever needed but remember it has no special meaning or logic attached, it's literally just standard DOM fragment creation out of a string.
 
-The problem is pretty simple:
-
-  * don't loop / pass data that should *not* be render
-  * sanitize data upfront instead of expecting this library to magically understand where, and how, such data should not be rendered
-
-A basic example would be the following:
-
-```js
-const dirtyData = [
-  {name: 'first'},
-  null,
-  {name: 'second'}
-];
-
-render(document.body, html`
-  <ul>
-    ${dirtyData.map(item => {
-      // ⚠ this should not happen in the first place!
-      if (!item)
-        return null;
-      return html`<li>${item.name}</li>`;
-    })}
-  </ul>
-`);
-```
+- - -
 
-There are at least two workarounds to consider:
+## Loading from a CDN
 
-  * use `data.filter(item => validate(item)).map(...)`
-  * returns an actual node:
+The easiest way to start using *uhtml* is via *CDN* and here a few exported variants:
 
 ```js
-  if (!item)
-    return html`<!--ignore-->`;
+// implicit production version
+import { render, html } from 'https://esm.run/uhtml';
+// https://cdn.jsdelivr.net/npm/uhtml/dist/prod/dom.js
+
+// explicit production version
+import { render, html } from 'https://esm.run/uhtml/prod';
+// https://cdn.jsdelivr.net/npm/uhtml/dist/prod/dom.js
+
+// explicit developer/debugging version
+import { render, html } from 'https://esm.run/uhtml/dev';
+import { render, html } from 'https://esm.run/uhtml/debug';
+// https://cdn.jsdelivr.net/npm/uhtml/dist/dev/dom.js
+
+// automatic prod/dev version on ?dev or ?debug
+import { render, html } from 'https://esm.run/uhtml/auto';
+import { render, html } from 'https://esm.run/uhtml/cdn';
+// https://cdn.jsdelivr.net/npm/uhtml/dist/prod/cdn.js
 ```
 
-Between these two workarounds, I believe the cleanest one is the former: sanitize data upfront!
-
-The benefits are:
-
-  * there are no unnecessary nodes in the DOM
-  * there are no weird cases to consider
-  * the mapping is pure, data in, node out
+Using `https://esm.run/uhtml/cdn` (or */auto*) or the fully qualified `https://cdn.jsdelivr.net/npm/uhtml/dist/prod/cdn.js` URL provides an automatic switch to *debug* mode if the current page location contains `?dev` or `?debug` or `?debug=1` query string parameter plus it guarantees the library will not be imported again if other scripts use a different *CDN* that points at the same file in a different location.
 
-  </div>
-</details>
+This makes it easy to switch to *dev* mode by changing the location from `https://example.com` to `https://example.com?debug`.
 
-<details>
-  <summary><strong>About Custom Elements</strong></summary>
-  <div>
+Last, but not least, it is not recommended to bundle directly *uhtml* in your project because components portability becomes compromised, as example, if each component bundles within itself *uhtml*.
 
-Custom Elements are either brought you, in a simplified manner, via [µce](https://github.com/WebReflection/uce#readme) (_micro custom elements_), which is a 3K library based on _µhtml_, or via vanilla JS, as demoed in [WebComponents.dev](https://webcomponents.dev/edit/dP0G85PrChRv7CsAvGXb).
+### Import Map
 
-  </div>
-</details>
+Another way to grant *CDN* and components portability is to use an import map and exclude *uhtml* from your bundler.
 
-<details>
-  <summary><strong>Compatibility</strong></summary>
-  <div>
-
-This module works in IE11, Edge, and every other Desktop to Mobile browser, including KaiOS.
+```html
+<!-- defined on each page -->
+<script type="importmap">
+{
+  "imports": {
+    "uhtml": "https://cdn.jsdelivr.net/npm/uhtml/dist/prod/cdn.js"
+  }
+}
+</script>
+<!-- your library code -->
+<script type="module">
+import { html } from 'uhtml';
 
-  </div>
-</details>
+document.body.append(
+  html`Import Maps are Awesome!`
+);
+</script>
+```
 
 - - -
 
+## Extra Tools
 
+Minification is still recommended for production use cases and not only for *JS*, also for the templates and their content.
 
-### µhtml vs [lighterhtml](https://github.com/WebReflection/lighterhtml#readme)
-
-You could read an [exhaustive summary of features differences](https://gist.github.com/WebReflection/761052d6dae7c8207d2fcba7cdede295#dom-engines-features-comparison), but the first thing to keep in mind, is that _lighterhtml_ is at pair with _uhtml_ features, but not vice-versa, meaning if you need anything more, you can always switch to _lighterhtml_ later on, and without changing a single line of code.
-
-Following a list of other points to consider when choosing _µhtml_ instead of _lighterhtml_ (or vice-versa).
-
-<details>
-  <summary><strong>Differently from <em>lighterhtml</em></strong></summary>
-  <div>
-
-  * there are **no sparse attributes**, each attribute *must* have a single interpolated value: `attribute=${value}` is OK, `attribute="${a}${b}"` is not, and `attribute="some ${'partial'}"` is not allowed neither.
-  * the interpolations are simple: primitive, or array of primitives, and nodes, or array of nodes.
-  * the `style` attribute is not special at all: if you want to pass objects there, please transform these as you prefer.
-  * the _domdiff_ has been replaced with [udomdiff](https://github.com/WebReflection/udomdiff#readme), with a new blazing fast and super small diffing algorithm written from scratch
-  * the `template` argument is not normalized. If you target browsers with issue with such argument, please be sure you transpile your code with latest _Babel_ before shipping to production
-  * no _domtagger_ whatsoever, you can't change the current behavior of the library in any way
-
-  </div>
-</details>
+The [rollup-plugin-minify-template-literals](https://www.npmjs.com/package/rollup-plugin-minify-template-literals) is a wonderful example of a plugin that does not complain about *uhtml* syntax and minifies to its best *uhtml* templates in both *vite* and *rollup*.
 
-<details>
-  <summary><strong>Similarly or better than <em>lighterhtml</em></strong></summary>
-  <div>
+This is a *rollup* configuration example:
 
-  * _uhtml_ should *not* suffer any of the IE11/Edge issues, or invalid SVG attributes warnings, as the parsing is done differently 🎉
-  * nested `html` and `svg` are allowed like in _lighterhtml_. The version `0` of this library didn't allow that, hence it was more "_surprise prone_". _uhtml_ in that sense is more like a drop-in replacement for _lighterhtml_, and vice-versa
-  * keyed results via `htmlfor(...)` or `svg.for(...)`, as well as one-off node creation, via `html.node` or `svg.node` are the same found in _lighterhtml_
-  * both `aria=${object}`, and  `ref=${...}` special attributes work same as _lighterhtml_
-  * the `.dataset=${object}` helper work the same as _lighterhtml_
-  * the `.property=${...}` *direct setter* is still available
-  * self closing nodes are also supported, go wild with `<custom-elements />` or even `<span />`
-  * the wire parsing logic has been simplified even more, resulting in slightly [better bootstrap and update performance](https://github.com/krausest/js-framework-benchmark/pull/698)
-  * it's half of _lighterhtml_ production size, mostly because ...
-  * there are no 3rd parts dependencies, except for [µparser](https://github.com/WebReflection/uparser#readme), [µdomdiff](https://github.com/WebReflection/udomdiff#readme), and for `@ungap/create-content`, needed only for IE11, but removable via [@ungap/degap](https://github.com/ungap/degap#readme), same way I've done it [here](./rollup/new.config.js), or [babel-plugin-remove-ungap](https://github.com/cfware/babel-plugin-remove-ungap#readme). The compressed final size difference is just around _~0.2K_ though.
-
-  </div>
-</details>
-
-<details>
-  <summary><strong>µhtml library goals</strong></summary>
-  <div>
-
-  * be an essential/ideal companion for [wickedElements](https://github.com/WebReflection/wicked-elements#readme), [hookedElements](https://github.com/WebReflection/hooked-elements#readme), or any third part that would like a _lighterhtml_ like API, without the extra weight
-  * keep it as simple as possible, but not simpler
-  * see if there is room for improvements in _lighterhtml_ whenever _uhtml_ simplifications allow to be ported there
+```js
+import terser from "@rollup/plugin-terser";
+import templateMinifier from "rollup-plugin-minify-template-literals";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+
+export default {
+  input: "src/your-component.js",
+  plugins: [
+    templateMinifier({
+      options: {
+        minifyOptions: {
+          // allow only explicit <!--! comments !-->
+          ignoreCustomComments: [/^!/],
+          keepClosingSlash: true,
+          caseSensitive: true,
+        },
+      },
+    }),
+    nodeResolve(),
+    terser(),
+  ],
+  output: {
+    esModule: true,
+    file: "dist/your-component.js",
+  },
+};
+```
 
-  </div>
-</details>
+- - -
 
-### V2 Breaking Change
+## About SSR and hydration
 
-The recently introduced `data` helper [could conflict](https://github.com/WebReflection/uhtml/issues/14) with some node such as `<object>`, hence it has been replaced by the `.dataset` utility. Since `element.dataset = object` is an invalid operation, the sugar to simplify `data-` attributes is now never ambiguous and future-proof: `<element .dataset=${...} />` it is.
+The current *pareser* is already environment agnostic, it runs on the client like it does in the server without needing dependencies at all.
 
+However, the current *SSR* story is still a **work in progress** but it's planned to land sooner than later.
diff --git a/V0.md b/V0.md
deleted file mode 100644
index 1599028..0000000
--- a/V0.md
+++ /dev/null
@@ -1,83 +0,0 @@
-# uHTML v0
-
-A micro HTML/SVG render
-
-  * no diffing whatsoever, it's just a faster, and smarter `innerHTML` equivalent
-  * nodes with a `name="..."` attribute are collected once
-  * arrays in holes are joined with a space in between
-  * no repeated render, per each node, when same template literal is used
-  * a perfect tiny companion for [wickedElements](https://github.com/WebReflection/wicked-elements#readme) or [hookedElements](https://github.com/WebReflection/hooked-elements#readme)
-
-The key of _uhtml_ is size and simplicity: nothing is transformed, transpiled, or mapped, you have full freedom to define layouts and enrich these later on.
-
-```js
-import {render, html, svg} from 'uhtml';
-const {render, html, svg} = require('uhtml');
-// https://unpkg.com/uhtml
-```
-
-## API and Features in a Nutshell
-
-Anything in the template gets in as is, with the exception of arrays, joined via a space, so that classes, as well as list of elements, can get in too.
-
-```js
-import {render, html, svg} from 'uhtml';
-
-const {title, kind} = render(
-  document.body,
-  html`
-    <h1 name="title" class="${['a', 'b', 'c']}">Hello uHTML!</h1>
-    <p>
-      Welcome to this <span name="kind">old</span> adventure!
-    </p>
-  `
-);
-
-// every name in the template results into an element
-title.style.textDecoration = 'underline';
-kind.textContent = 'new';
-```
-
-Feel free to check this **[live counter demo](https://codepen.io/WebReflection/pen/bGdpEKB)** to better understand how this works.
-
-## F.A.Q.
-
-<details>
-  <summary>
-    <strong>How is this any better than <code>innerHTML</code> ?</strong>
-  </summary>
-
-  _uhtml_ never pollutes, trash, or recreate, content defined via a template literal.
-
-  In case you didn't know, [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) are unique per scope, so that defining some HTML or SVG content for a specific node passed as `render` argument, never replaces the content that was previously there, if the template literal is exactly the same.
-
-  Moreover, if you use `innerHTML` for SVG content, that won't work the way you'd expect.
-
-  _uhtml_ does indeed the minimum amount of processing to ensure your HTML or SVG content is injected once, and only if the template literal is different from the previous one.
-
-</details>
-
-<details>
-  <summary>
-    <strong>Can I use nested <code>html</code> or <code>svg</code> in the template ?</strong>
-  </summary>
-
-  The _TL;DR_ answer is **no**, 'cause those utilities are there to define the kind of content you want for that specific node, instrumenting few DOM APIs to provide such content within fragments.
-
-  This boils down to the inability, or the anti-pattern, to have lists created within a template, unless you take over such list, through a named element, in a way that allows you to update, replace, or drop, such list later on.
-
-  The [domdiff](https://github.com/WebReflection/domdiff#readme) module, in such cases, might be a solution, otherwise you are in charge of handling inner lists changes.
-
-</details>
-
-<details>
-  <summary>
-    <strong>Should I <em>hydrate</em> each content manually ?</strong>
-  </summary>
-
-  The `name` attribute simplifies the retrieval of elements within the template.
-  From that time on, you are in charge of populating, or manipulating, anything you like, and per each named node.
-
-  Please note that a query such as `[name]` will return anything found in the template, so that name clashing is inevitable, if you use the same attribute within other elements/components defined in your template.
-
-</details>
diff --git a/async.js b/async.js
deleted file mode 100644
index f2c4c0c..0000000
--- a/async.js
+++ /dev/null
@@ -1 +0,0 @@
-self.uhtml=function(e){"use strict";const{isArray:t}=Array,n=(e,r)=>{const s=[];for(const{length:o}=e;r<o;r++)s.push(t(e[r])?n(e[r],0):e[r]);return Promise.all(s)};var r=e=>{function t(t,n){return e.apply(this,[t].concat(n))}return function(e){return n(arguments,1).then(t.bind(this,e))}},s=e=>({get:t=>e.get(t),set:(t,n)=>(e.set(t,n),n)});const o=/([^\s\\>"'=]+)\s*=\s*(['"]?)$/,l=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,i=/<[a-z][^>]+$/i,a=/>[^<>]*$/,c=/<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/>)/gi,u=/\s+$/,d=(e,t)=>0<t--&&(i.test(e[t])||!a.test(e[t])&&d(e,t)),p=(e,t,n)=>l.test(t)?e:`<${t}${n.replace(u,"")}></${t}>`;const{isArray:f}=Array,{indexOf:h,slice:m}=[],g=(e,t)=>111===e.nodeType?1/t<0?t?(({firstChild:e,lastChild:t})=>{const n=document.createRange();return n.setStartAfter(e),n.setEndAfter(t),n.deleteContents(),e})(e):e.lastChild:t?e.valueOf():e.firstChild:e;const v=(e,t)=>{let n,r=t.slice(2);return!(t in e)&&t.toLowerCase()in e&&(r=r.toLowerCase()),t=>{const s=f(t)?t:[t,!1];n!==s[0]&&(n&&e.removeEventListener(r,n,s[1]),(n=s[0])&&e.addEventListener(r,n,s[1]))}},y=({childNodes:e},t)=>e[t],w=(e,t,n)=>((e,t,n,r,s)=>{const o=n.length;let l=t.length,i=o,a=0,c=0,u=null;for(;a<l||c<i;)if(l===a){const t=i<o?c?r(n[c-1],-0).nextSibling:r(n[i-c],0):s;for(;c<i;)e.insertBefore(r(n[c++],1),t)}else if(i===c)for(;a<l;)u&&u.has(t[a])||e.removeChild(r(t[a],-1)),a++;else if(t[a]===n[c])a++,c++;else if(t[l-1]===n[i-1])l--,i--;else if(t[a]===n[i-1]&&n[c]===t[l-1]){const s=r(t[--l],-1).nextSibling;e.insertBefore(r(n[c++],1),r(t[a++],-1).nextSibling),e.insertBefore(r(n[--i],1),s),t[l]=n[i]}else{if(!u){u=new Map;let e=c;for(;e<i;)u.set(n[e],e++)}if(u.has(t[a])){const s=u.get(t[a]);if(c<s&&s<i){let o=a,d=1;for(;++o<l&&o<i&&u.get(t[o])===s+d;)d++;if(d>s-c){const o=r(t[a],0);for(;c<s;)e.insertBefore(r(n[c++],1),o)}else e.replaceChild(r(n[c++],1),r(t[a++],-1))}else a++}else e.removeChild(r(t[a++],-1))}return n})(e.parentNode,t,n,g,e),b=(e,t)=>{switch(t[0]){case"?":return((e,t,n)=>r=>{n!==!!r&&((n=!!r)?e.setAttribute(t,""):e.removeAttribute(t))})(e,t.slice(1),!1);case".":return((e,t)=>"dataset"===t?(({dataset:e})=>t=>{for(const n in t){const r=t[n];null==r?delete e[n]:e[n]=r}})(e):n=>{e[t]=n})(e,t.slice(1));case"@":return v(e,"on"+t.slice(1));case"o":if("n"===t[1])return v(e,t)}switch(t){case"ref":return(e=>{let t;return n=>{t!==n&&(t=n,"function"==typeof n?n(e):n.current=e)}})(e);case"aria":return(e=>t=>{for(const n in t){const r="role"===n?n:`aria-${n}`,s=t[n];null==s?e.removeAttribute(r):e.setAttribute(r,s)}})(e)}return((e,t)=>{let n,r=!0;const s=document.createAttributeNS(null,t);return t=>{n!==t&&(n=t,null==n?r||(e.removeAttributeNode(s),r=!0):(s.value=t,r&&(e.setAttributeNodeNS(s),r=!1)))}})(e,t)};function N(e){const{type:t,path:n}=e,r=n.reduceRight(y,this);return"node"===t?(e=>{let t,n,r=[];const s=o=>{switch(typeof o){case"string":case"number":case"boolean":t!==o&&(t=o,n||(n=document.createTextNode("")),n.data=o,r=w(e,r,[n]));break;case"object":case"undefined":if(null==o){t!=o&&(t=o,r=w(e,r,[]));break}if(f(o)){t=o,0===o.length?r=w(e,r,[]):"object"==typeof o[0]?r=w(e,r,o):s(String(o));break}t!==o&&"ELEMENT_NODE"in o&&(t=o,r=w(e,r,11===o.nodeType?m.call(o.childNodes):[o]));break;case"function":s(o(e))}};return s})(r):"attr"===t?b(r,e.name):(e=>{let t;return n=>{t!=n&&(t=n,e.textContent=null==n?"":n)}})(r)}const $=e=>document.createElementNS("http://www.w3.org/1999/xhtml",e),x=(e,t)=>("svg"===t?k:C)(e),C=e=>{const t=$("template");return t.innerHTML=e,t.content},k=e=>{const{content:t}=$("template"),n=$("div");n.innerHTML='<svg xmlns="http://www.w3.org/2000/svg">'+e+"</svg>";const{childNodes:r}=n.firstChild;let{length:s}=r;for(;s--;)t.appendChild(r[0]);return t},A=1!=document.importNode.length,E=A?(e,t,n)=>document.importNode(x(e,t),!0):x,T=A?e=>document.createTreeWalker(e,129,null,!1):e=>document.createTreeWalker(e,129),M=e=>{const t=[];let{parentNode:n}=e;for(;n;)t.push(h.call(n.childNodes,e)),n=(e=n).parentNode;return t},O="isµ",L=s(new WeakMap),S=/^(?:plaintext|script|style|textarea|title|xmp)$/i,W=(e,t)=>{const n=((e,t,n)=>{const r=[],{length:s}=e;for(let n=1;n<s;n++){const s=e[n-1];r.push(o.test(s)&&d(e,n)?s.replace(o,((e,r,s)=>`${t}${n-1}=${s||'"'}${r}${s?"":'"'}`)):`${s}\x3c!--${t}${n-1}--\x3e`)}r.push(e[s-1]);const l=r.join("").trim();return n?l:l.replace(c,p)})(t,O,"svg"===e),r=E(n,e),s=T(r),l=[],i=t.length-1;let a=0,u=`isµ${a}`;for(;a<i;){const e=s.nextNode();if(!e)throw`bad template: ${n}`;if(8===e.nodeType)e.data===u&&(l.push({type:"node",path:M(e)}),u="isµ"+ ++a);else{for(;e.hasAttribute(u);)l.push({type:"attr",path:M(e),name:e.getAttribute(u)}),e.removeAttribute(u),u="isµ"+ ++a;S.test(e.tagName)&&e.textContent.trim()===`\x3c!--${u}--\x3e`&&(e.textContent="",l.push({type:"text",path:M(e)}),u="isµ"+ ++a)}}return{content:r,nodes:l}},j=(e,t)=>{const{content:n,nodes:r}=L.get(t)||L.set(t,W(e,t)),s=document.importNode(n,!0);return{content:s,updates:r.map(N,s)}},B=(e,{type:t,template:n,values:r})=>{const{length:s}=r;P(e,r,s);let{entry:o}=e;o&&o.template===n&&o.type===t||(e.entry=o=((e,t)=>{const{content:n,updates:r}=j(e,t);return{type:e,template:t,content:n,updates:r,wire:null}})(t,n));const{content:l,updates:i,wire:a}=o;for(let e=0;e<s;e++)i[e](r[e]);return a||(o.wire=(e=>{const{childNodes:t}=e,{length:n}=t;if(n<2)return n?t[0]:e;const r=m.call(t,0);return{ELEMENT_NODE:1,nodeType:111,firstChild:r[0],lastChild:r[n-1],valueOf(){if(t.length!==n){let t=0;for(;t<n;)e.appendChild(r[t++])}return e}}})(l))},P=({stack:e},t,n)=>{for(let r=0;r<n;r++){const n=t[r];n instanceof z?t[r]=B(e[r]||(e[r]={stack:[],entry:null,wire:null}),n):f(n)?P(e[r]||(e[r]={stack:[],entry:null,wire:null}),n,n.length):e[r]=null}n<e.length&&e.splice(n)};function z(e,t,n){this.type=e,this.template=t,this.values=n}const{create:H,defineProperties:_}=Object,D=e=>{const t=s(new WeakMap);return _(((t,...n)=>new z(e,t,n)),{for:{value(n,r){const s=t.get(n)||t.set(n,H(null));return s[r]||(s[r]=(t=>(n,...r)=>B(t,{type:e,template:n,values:r}))({stack:[],entry:null,wire:null}))}},node:{value:(t,...n)=>B({stack:[],entry:null,wire:null},{type:e,template:t,values:n}).valueOf()}})},R=s(new WeakMap),q=D("html"),F=D("svg"),{defineProperties:G}=Object,I=e=>{const t=s(new WeakMap);return G(r(e),{for:{value(n,s){const o=e.for(n,s);return t.get(o)||t.set(o,r(o))}},node:{value:r(e.node)}})},J=I(q),K=I(F);return e.Hole=z,e.html=J,e.render=(e,t)=>{const n="function"==typeof t?t():t;return Promise.resolve(n).then((t=>((e,t)=>{const n="function"==typeof t?t():t,r=R.get(e)||R.set(e,{stack:[],entry:null,wire:null}),s=n instanceof z?B(r,n):n;return s!==r.wire&&(r.wire=s,e.textContent="",e.appendChild(s.valueOf())),e})(e,t)))},e.svg=K,e}({});
diff --git a/build/dev.js b/build/dev.js
new file mode 100644
index 0000000..ae93071
--- /dev/null
+++ b/build/dev.js
@@ -0,0 +1,7 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import files from './files.js';
+
+const target = 'dev';
+const plugins = [nodeResolve()];
+
+export default files(target, plugins);
diff --git a/build/files.js b/build/files.js
new file mode 100644
index 0000000..fd26bb4
--- /dev/null
+++ b/build/files.js
@@ -0,0 +1,50 @@
+export default (target, plugins) => [
+  {
+    plugins,
+    input: './src/parser/index.js',
+    output: {
+      esModule: true,
+      file: `./dist/${target}/parser.js`,
+    }
+  },
+  {
+    plugins,
+    input: './src/dom/cdn.js',
+    output: {
+      esModule: true,
+      file: `./dist/${target}/cdn.js`,
+    }
+  },
+  {
+    plugins,
+    input: './src/json/index.js',
+    output: {
+      esModule: true,
+      file: `./dist/${target}/json.js`,
+    }
+  },
+  {
+    plugins,
+    input: './src/dom/creator.js',
+    output: {
+      esModule: true,
+      file: `./dist/${target}/creator.js`,
+    }
+  },
+  {
+    plugins,
+    input: './src/dom/ish.js',
+    output: {
+      esModule: true,
+      file: `./dist/${target}/ish.js`,
+    }
+  },
+  {
+    plugins,
+    input: './src/dom/index.js',
+    output: {
+      esModule: true,
+      file: `./dist/${target}/dom.js`,
+    }
+  },
+];
diff --git a/build/prod.js b/build/prod.js
new file mode 100644
index 0000000..e6455f2
--- /dev/null
+++ b/build/prod.js
@@ -0,0 +1,8 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+import files from './files.js';
+
+const target = 'prod';
+const plugins = [nodeResolve()].concat(process.env.NO_MIN ? [] : [terser()]);
+
+export default files(target, plugins);
diff --git a/cjs/async.js b/cjs/async.js
deleted file mode 100644
index 416279e..0000000
--- a/cjs/async.js
+++ /dev/null
@@ -1,40 +0,0 @@
-'use strict';
-const asyncTag = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('async-tag'));
-const umap = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('umap'));
-
-const {render: $render, html: $html, svg: $svg} = require('./index.js');
-
-const {defineProperties} = Object;
-
-const tag = original => {
-  const wrap = umap(new WeakMap);
-  return defineProperties(
-    asyncTag(original),
-    {
-      for: {
-        value(ref, id) {
-          const tag = original.for(ref, id);
-          return wrap.get(tag) || wrap.set(tag, asyncTag(tag));
-        }
-      },
-      node: {
-        value: asyncTag(original.node)
-      }
-    }
-  );
-};
-
-const html = tag($html);
-exports.html = html;
-const svg = tag($svg);
-exports.svg = svg;
-
-const render = (where, what) => {
-  const hole = typeof what === 'function' ? what() : what;
-  return Promise.resolve(hole).then(what => $render(where, what));
-};
-exports.render = render;
-
-(m => {
-  exports.Hole = m.Hole;
-})(require('./index.js'));
diff --git a/cjs/handlers.js b/cjs/handlers.js
deleted file mode 100644
index 78277d8..0000000
--- a/cjs/handlers.js
+++ /dev/null
@@ -1,141 +0,0 @@
-'use strict';
-const {isArray, slice} = require('uarray');
-const udomdiff = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('udomdiff'));
-const {aria, attribute, boolean, event, ref, setter, text} = require('uhandlers');
-const {diffable} = require('uwire');
-
-// from a generic path, retrieves the exact targeted node
-const reducePath = ({childNodes}, i) => childNodes[i];
-
-// this helper avoid code bloat around handleAnything() callback
-const diff = (comment, oldNodes, newNodes) => udomdiff(
-  comment.parentNode,
-  // TODO: there is a possible edge case where a node has been
-  //       removed manually, or it was a keyed one, attached
-  //       to a shared reference between renders.
-  //       In this case udomdiff might fail at removing such node
-  //       as its parent won't be the expected one.
-  //       The best way to avoid this issue is to filter oldNodes
-  //       in search of those not live, or not in the current parent
-  //       anymore, but this would require both a change to uwire,
-  //       exposing a parentNode from the firstChild, as example,
-  //       but also a filter per each diff that should exclude nodes
-  //       that are not in there, penalizing performance quite a lot.
-  //       As this has been also a potential issue with domdiff,
-  //       and both lighterhtml and hyperHTML might fail with this
-  //       very specific edge case, I might as well document this possible
-  //       "diffing shenanigan" and call it a day.
-  oldNodes,
-  newNodes,
-  diffable,
-  comment
-);
-
-// if an interpolation represents a comment, the whole
-// diffing will be related to such comment.
-// This helper is in charge of understanding how the new
-// content for such interpolation/hole should be updated
-const handleAnything = comment => {
-  let oldValue, text, nodes = [];
-  const anyContent = newValue => {
-    switch (typeof newValue) {
-      // primitives are handled as text content
-      case 'string':
-      case 'number':
-      case 'boolean':
-        if (oldValue !== newValue) {
-          oldValue = newValue;
-          if (!text)
-            text = document.createTextNode('');
-          text.data = newValue;
-          nodes = diff(comment, nodes, [text]);
-        }
-        break;
-      // null, and undefined are used to cleanup previous content
-      case 'object':
-      case 'undefined':
-        if (newValue == null) {
-          if (oldValue != newValue) {
-            oldValue = newValue;
-            nodes = diff(comment, nodes, []);
-          }
-          break;
-        }
-        // arrays and nodes have a special treatment
-        if (isArray(newValue)) {
-          oldValue = newValue;
-          // arrays can be used to cleanup, if empty
-          if (newValue.length === 0)
-            nodes = diff(comment, nodes, []);
-          // or diffed, if these contains nodes or "wires"
-          else if (typeof newValue[0] === 'object')
-            nodes = diff(comment, nodes, newValue);
-          // in all other cases the content is stringified as is
-          else
-            anyContent(String(newValue));
-          break;
-        }
-        // if the new value is a DOM node, or a wire, and it's
-        // different from the one already live, then it's diffed.
-        // if the node is a fragment, it's appended once via its childNodes
-        // There is no `else` here, meaning if the content
-        // is not expected one, nothing happens, as easy as that.
-        if (oldValue !== newValue && 'ELEMENT_NODE' in newValue) {
-          oldValue = newValue;
-          nodes = diff(
-            comment,
-            nodes,
-            newValue.nodeType === 11 ?
-              slice.call(newValue.childNodes) :
-              [newValue]
-          );
-        }
-        break;
-      case 'function':
-        anyContent(newValue(comment));
-        break;
-    }
-  };
-  return anyContent;
-};
-
-// attributes can be:
-//  * ref=${...}      for hooks and other purposes
-//  * aria=${...}     for aria attributes
-//  * ?boolean=${...} for boolean attributes
-//  * .dataset=${...} for dataset related attributes
-//  * .setter=${...}  for Custom Elements setters or nodes with setters
-//                    such as buttons, details, options, select, etc
-//  * @event=${...}   to explicitly handle event listeners
-//  * onevent=${...}  to automatically handle event listeners
-//  * generic=${...}  to handle an attribute just like an attribute
-const handleAttribute = (node, name/*, svg*/) => {
-  switch (name[0]) {
-    case '?': return boolean(node, name.slice(1), false);
-    case '.': return setter(node, name.slice(1));
-    case '@': return event(node, 'on' + name.slice(1));
-    case 'o': if (name[1] === 'n') return event(node, name);
-  }
-
-  switch (name) {
-    case 'ref': return ref(node);
-    case 'aria': return aria(node);
-  }
-
-  return attribute(node, name/*, svg*/);
-};
-
-// each mapped update carries the update type and its path
-// the type is either node, attribute, or text, while
-// the path is how to retrieve the related node to update.
-// In the attribute case, the attribute name is also carried along.
-function handlers(options) {
-  const {type, path} = options;
-  const node = path.reduceRight(reducePath, this);
-  return type === 'node' ?
-    handleAnything(node) :
-    (type === 'attr' ?
-      handleAttribute(node, options.name/*, options.svg*/) :
-      text(node));
-}
-exports.handlers = handlers;
diff --git a/cjs/index.js b/cjs/index.js
deleted file mode 100644
index 397e74d..0000000
--- a/cjs/index.js
+++ /dev/null
@@ -1,76 +0,0 @@
-'use strict';
-const umap = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('umap'));
-const {Hole, createCache, unroll} = require('./rabbit.js');
-
-const {create, defineProperties} = Object;
-
-// both `html` and `svg` template literal tags are polluted
-// with a `for(ref[, id])` and a `node` tag too
-const tag = type => {
-  // both `html` and `svg` tags have their own cache
-  const keyed = umap(new WeakMap);
-  // keyed operations always re-use the same cache and unroll
-  // the template and its interpolations right away
-  const fixed = cache => (template, ...values) => unroll(
-    cache,
-    {type, template, values}
-  );
-  return defineProperties(
-    // non keyed operations are recognized as instance of Hole
-    // during the "unroll", recursively resolved and updated
-    (template, ...values) => new Hole(type, template, values),
-    {
-      for: {
-        // keyed operations need a reference object, usually the parent node
-        // which is showing keyed results, and optionally a unique id per each
-        // related node, handy with JSON results and mutable list of objects
-        // that usually carry a unique identifier
-        value(ref, id) {
-          const memo = keyed.get(ref) || keyed.set(ref, create(null));
-          return memo[id] || (memo[id] = fixed(createCache()));
-        }
-      },
-      node: {
-        // it is possible to create one-off content out of the box via node tag
-        // this might return the single created node, or a fragment with all
-        // nodes present at the root level and, of course, their child nodes
-        value: (template, ...values) => unroll(
-          createCache(),
-          {type, template, values}
-        ).valueOf()
-      }
-    }
-  );
-};
-
-// each rendered node gets its own cache
-const cache = umap(new WeakMap);
-
-// rendering means understanding what `html` or `svg` tags returned
-// and it relates a specific node to its own unique cache.
-// Each time the content to render changes, the node is cleaned up
-// and the new new content is appended, and if such content is a Hole
-// then it's "unrolled" to resolve all its inner nodes.
-const render = (where, what) => {
-  const hole = typeof what === 'function' ? what() : what;
-  const info = cache.get(where) || cache.set(where, createCache());
-  const wire = hole instanceof Hole ? unroll(info, hole) : hole;
-  if (wire !== info.wire) {
-    info.wire = wire;
-    where.textContent = '';
-    // valueOf() simply returns the node itself, but in case it was a "wire"
-    // it will eventually re-append all nodes to its fragment so that such
-    // fragment can be re-appended many times in a meaningful way
-    // (wires are basically persistent fragments facades with special behavior)
-    where.appendChild(wire.valueOf());
-  }
-  return where;
-};
-
-const html = tag('html');
-const svg = tag('svg');
-
-exports.Hole = Hole;
-exports.render = render;
-exports.html = html;
-exports.svg = svg;
diff --git a/cjs/init.js b/cjs/init.js
deleted file mode 100644
index b0a32b5..0000000
--- a/cjs/init.js
+++ /dev/null
@@ -1,667 +0,0 @@
-'use strict';
-const umap = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('umap'));
-const instrument = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('uparser'));
-const {indexOf, isArray, slice} = require('uarray');
-const udomdiff = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('udomdiff'));
-
-module.exports = ({document}) => {
-  /**start**/
-/*! (c) Andrea Giammarchi - ISC */
-var createContent = (function (document) {'use strict';
-  var FRAGMENT = 'fragment';
-  var TEMPLATE = 'template';
-  var HAS_CONTENT = 'content' in create(TEMPLATE);
-
-  var createHTML = HAS_CONTENT ?
-    function (html) {
-      var template = create(TEMPLATE);
-      template.innerHTML = html;
-      return template.content;
-    } :
-    function (html) {
-      var content = create(FRAGMENT);
-      var template = create(TEMPLATE);
-      var childNodes = null;
-      if (/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(html)) {
-        var selector = RegExp.$1;
-        template.innerHTML = '<table>' + html + '</table>';
-        childNodes = template.querySelectorAll(selector);
-      } else {
-        template.innerHTML = html;
-        childNodes = template.childNodes;
-      }
-      append(content, childNodes);
-      return content;
-    };
-
-  return function createContent(markup, type) {
-    return (type === 'svg' ? createSVG : createHTML)(markup);
-  };
-
-  function append(root, childNodes) {
-    var length = childNodes.length;
-    while (length--)
-      root.appendChild(childNodes[0]);
-  }
-
-  function create(element) {
-    return element === FRAGMENT ?
-      document.createDocumentFragment() :
-      document.createElementNS('http://www.w3.org/1999/xhtml', element);
-  }
-
-  // it could use createElementNS when hasNode is there
-  // but this fallback is equally fast and easier to maintain
-  // it is also battle tested already in all IE
-  function createSVG(svg) {
-    var content = create(FRAGMENT);
-    var template = create('div');
-    template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg">' + svg + '</svg>';
-    append(content, template.firstChild.childNodes);
-    return content;
-  }
-
-}(document));
-
-
-
-
-const ELEMENT_NODE = 1;
-const nodeType = 111;
-
-const remove = ({firstChild, lastChild}) => {
-  const range = document.createRange();
-  range.setStartAfter(firstChild);
-  range.setEndAfter(lastChild);
-  range.deleteContents();
-  return firstChild;
-};
-
-const diffable = (node, operation) => node.nodeType === nodeType ?
-  ((1 / operation) < 0 ?
-    (operation ? remove(node) : node.lastChild) :
-    (operation ? node.valueOf() : node.firstChild)) :
-  node
-;
-
-const persistent = fragment => {
-  const {childNodes} = fragment;
-  const {length} = childNodes;
-  if (length < 2)
-    return length ? childNodes[0] : fragment;
-  const nodes = slice.call(childNodes, 0);
-  const firstChild = nodes[0];
-  const lastChild = nodes[length - 1];
-  return {
-    ELEMENT_NODE,
-    nodeType,
-    firstChild,
-    lastChild,
-    valueOf() {
-      if (childNodes.length !== length) {
-        let i = 0;
-        while (i < length)
-          fragment.appendChild(nodes[i++]);
-      }
-      return fragment;
-    }
-  };
-};
-
-
-
-const aria = node => values => {
-  for (const key in values) {
-    const name = key === 'role' ? key : `aria-${key}`;
-    const value = values[key];
-    if (value == null)
-      node.removeAttribute(name);
-    else
-      node.setAttribute(name, value);
-  }
-};
-
-const attribute = (node, name) => {
-  let oldValue, orphan = true;
-  const attributeNode = document.createAttributeNS(null, name);
-  return newValue => {
-    if (oldValue !== newValue) {
-      oldValue = newValue;
-      if (oldValue == null) {
-        if (!orphan) {
-          node.removeAttributeNode(attributeNode);
-          orphan = true;
-        }
-      }
-      else {
-        attributeNode.value = newValue;
-        if (orphan) {
-          node.setAttributeNodeNS(attributeNode);
-          orphan = false;
-        }
-      }
-    }
-  };
-};
-
-const boolean = (node, key, oldValue) => newValue => {
-  if (oldValue !== !!newValue) {
-    // when IE won't be around anymore ...
-    // node.toggleAttribute(key, oldValue = !!newValue);
-    if ((oldValue = !!newValue))
-      node.setAttribute(key, '');
-    else
-      node.removeAttribute(key);
-  }
-};
-
-const data = ({dataset}) => values => {
-  for (const key in values) {
-    const value = values[key];
-    if (value == null)
-      delete dataset[key];
-    else
-      dataset[key] = value;
-  }
-};
-
-const event = (node, name) => {
-  let oldValue, type = name.slice(2);
-  if (!(name in node) && name.toLowerCase() in node)
-    type = type.toLowerCase();
-  return newValue => {
-    const info = isArray(newValue) ? newValue : [newValue, false];
-    if (oldValue !== info[0]) {
-      if (oldValue)
-        node.removeEventListener(type, oldValue, info[1]);
-      if (oldValue = info[0])
-        node.addEventListener(type, oldValue, info[1]);
-    }
-  };
-};
-
-const ref = node => {
-  let oldValue;
-  return value => {
-    if (oldValue !== value) {
-      oldValue = value;
-      if (typeof value === 'function')
-        value(node);
-      else
-        value.current = node;
-    }
-  };
-};
-
-const setter = (node, key) => key === 'dataset' ?
-  data(node) :
-  value => {
-    node[key] = value;
-  };
-
-const text = node => {
-  let oldValue;
-  return newValue => {
-    if (oldValue != newValue) {
-      oldValue = newValue;
-      node.textContent = newValue == null ? '' : newValue;
-    }
-  };
-};
-
-
-
-// this "hack" tells the library if the browser is IE11 or old Edge
-const isImportNodeLengthWrong = document.importNode.length != 1;
-
-// IE11 and old Edge discard empty nodes when cloning, potentially
-// resulting in broken paths to find updates. The workaround here
-// is to import once, upfront, the fragment that will be cloned
-// later on, so that paths are retrieved from one already parsed,
-// hence without missing child nodes once re-cloned.
-const createFragment = isImportNodeLengthWrong ?
-  (text, type, normalize) => document.importNode(
-    createContent(text, type, normalize),
-    true
-  ) :
-  createContent;
-
-// IE11 and old Edge have a different createTreeWalker signature that
-// has been deprecated in other browsers. This export is needed only
-// to guarantee the TreeWalker doesn't show warnings and, ultimately, works
-const createWalker = isImportNodeLengthWrong ?
-  fragment => document.createTreeWalker(fragment, 1 | 128, null, false) :
-  fragment => document.createTreeWalker(fragment, 1 | 128);
-
-
-
-
-
-
-// from a generic path, retrieves the exact targeted node
-const reducePath = ({childNodes}, i) => childNodes[i];
-
-// this helper avoid code bloat around handleAnything() callback
-const diff = (comment, oldNodes, newNodes) => udomdiff(
-  comment.parentNode,
-  // TODO: there is a possible edge case where a node has been
-  //       removed manually, or it was a keyed one, attached
-  //       to a shared reference between renders.
-  //       In this case udomdiff might fail at removing such node
-  //       as its parent won't be the expected one.
-  //       The best way to avoid this issue is to filter oldNodes
-  //       in search of those not live, or not in the current parent
-  //       anymore, but this would require both a change to uwire,
-  //       exposing a parentNode from the firstChild, as example,
-  //       but also a filter per each diff that should exclude nodes
-  //       that are not in there, penalizing performance quite a lot.
-  //       As this has been also a potential issue with domdiff,
-  //       and both lighterhtml and hyperHTML might fail with this
-  //       very specific edge case, I might as well document this possible
-  //       "diffing shenanigan" and call it a day.
-  oldNodes,
-  newNodes,
-  diffable,
-  comment
-);
-
-// if an interpolation represents a comment, the whole
-// diffing will be related to such comment.
-// This helper is in charge of understanding how the new
-// content for such interpolation/hole should be updated
-const handleAnything = comment => {
-  let oldValue, text, nodes = [];
-  const anyContent = newValue => {
-    switch (typeof newValue) {
-      // primitives are handled as text content
-      case 'string':
-      case 'number':
-      case 'boolean':
-        if (oldValue !== newValue) {
-          oldValue = newValue;
-          if (!text)
-            text = document.createTextNode('');
-          text.data = newValue;
-          nodes = diff(comment, nodes, [text]);
-        }
-        break;
-      // null, and undefined are used to cleanup previous content
-      case 'object':
-      case 'undefined':
-        if (newValue == null) {
-          if (oldValue != newValue) {
-            oldValue = newValue;
-            nodes = diff(comment, nodes, []);
-          }
-          break;
-        }
-        // arrays and nodes have a special treatment
-        if (isArray(newValue)) {
-          oldValue = newValue;
-          // arrays can be used to cleanup, if empty
-          if (newValue.length === 0)
-            nodes = diff(comment, nodes, []);
-          // or diffed, if these contains nodes or "wires"
-          else if (typeof newValue[0] === 'object')
-            nodes = diff(comment, nodes, newValue);
-          // in all other cases the content is stringified as is
-          else
-            anyContent(String(newValue));
-          break;
-        }
-        // if the new value is a DOM node, or a wire, and it's
-        // different from the one already live, then it's diffed.
-        // if the node is a fragment, it's appended once via its childNodes
-        // There is no `else` here, meaning if the content
-        // is not expected one, nothing happens, as easy as that.
-        if (oldValue !== newValue && 'ELEMENT_NODE' in newValue) {
-          oldValue = newValue;
-          nodes = diff(
-            comment,
-            nodes,
-            newValue.nodeType === 11 ?
-              slice.call(newValue.childNodes) :
-              [newValue]
-          );
-        }
-        break;
-      case 'function':
-        anyContent(newValue(comment));
-        break;
-    }
-  };
-  return anyContent;
-};
-
-// attributes can be:
-//  * ref=${...}      for hooks and other purposes
-//  * aria=${...}     for aria attributes
-//  * ?boolean=${...} for boolean attributes
-//  * .dataset=${...} for dataset related attributes
-//  * .setter=${...}  for Custom Elements setters or nodes with setters
-//                    such as buttons, details, options, select, etc
-//  * @event=${...}   to explicitly handle event listeners
-//  * onevent=${...}  to automatically handle event listeners
-//  * generic=${...}  to handle an attribute just like an attribute
-const handleAttribute = (node, name/*, svg*/) => {
-  switch (name[0]) {
-    case '?': return boolean(node, name.slice(1), false);
-    case '.': return setter(node, name.slice(1));
-    case '@': return event(node, 'on' + name.slice(1));
-    case 'o': if (name[1] === 'n') return event(node, name);
-  }
-
-  switch (name) {
-    case 'ref': return ref(node);
-    case 'aria': return aria(node);
-  }
-
-  return attribute(node, name/*, svg*/);
-};
-
-// each mapped update carries the update type and its path
-// the type is either node, attribute, or text, while
-// the path is how to retrieve the related node to update.
-// In the attribute case, the attribute name is also carried along.
-function handlers(options) {
-  const {type, path} = options;
-  const node = path.reduceRight(reducePath, this);
-  return type === 'node' ?
-    handleAnything(node) :
-    (type === 'attr' ?
-      handleAttribute(node, options.name/*, options.svg*/) :
-      text(node));
-};
-
-
-
-
-
-
-
-
-
-// from a fragment container, create an array of indexes
-// related to its child nodes, so that it's possible
-// to retrieve later on exact node via reducePath
-const createPath = node => {
-  const path = [];
-  let {parentNode} = node;
-  while (parentNode) {
-    path.push(indexOf.call(parentNode.childNodes, node));
-    node = parentNode;
-    parentNode = node.parentNode;
-  }
-  return path;
-};
-
-// the prefix is used to identify either comments, attributes, or nodes
-// that contain the related unique id. In the attribute cases
-// isµX="attribute-name" will be used to map current X update to that
-// attribute name, while comments will be like <!--isµX-->, to map
-// the update to that specific comment node, hence its parent.
-// style and textarea will have <!--isµX--> text content, and are handled
-// directly through text-only updates.
-const prefix = 'isµ';
-
-// Template Literals are unique per scope and static, meaning a template
-// should be parsed once, and once only, as it will always represent the same
-// content, within the exact same amount of updates each time.
-// This cache relates each template to its unique content and updates.
-const cache = umap(new WeakMap);
-
-// a RegExp that helps checking nodes that cannot contain comments
-const textOnly = /^(?:plaintext|script|style|textarea|title|xmp)$/i;
-
-const createCache = () => ({
-  stack: [],    // each template gets a stack for each interpolation "hole"
-
-  entry: null,  // each entry contains details, such as:
-                //  * the template that is representing
-                //  * the type of node it represents (html or svg)
-                //  * the content fragment with all nodes
-                //  * the list of updates per each node (template holes)
-                //  * the "wired" node or fragment that will get updates
-                // if the template or type are different from the previous one
-                // the entry gets re-created each time
-
-  wire: null    // each rendered node represent some wired content and
-                // this reference to the latest one. If different, the node
-                // will be cleaned up and the new "wire" will be appended
-});
-
-// the entry stored in the rendered node cache, and per each "hole"
-const createEntry = (type, template) => {
-  const {content, updates} = mapUpdates(type, template);
-  return {type, template, content, updates, wire: null};
-};
-
-// a template is instrumented to be able to retrieve where updates are needed.
-// Each unique template becomes a fragment, cloned once per each other
-// operation based on the same template, i.e. data => html`<p>${data}</p>`
-const mapTemplate = (type, template) => {
-  const text = instrument(template, prefix, type === 'svg');
-  const content = createFragment(text, type);
-  // once instrumented and reproduced as fragment, it's crawled
-  // to find out where each update is in the fragment tree
-  const tw = createWalker(content);
-  const nodes = [];
-  const length = template.length - 1;
-  let i = 0;
-  // updates are searched via unique names, linearly increased across the tree
-  // <div isµ0="attr" isµ1="other"><!--isµ2--><style><!--isµ3--</style></div>
-  let search = `${prefix}${i}`;
-  while (i < length) {
-    const node = tw.nextNode();
-    // if not all updates are bound but there's nothing else to crawl
-    // it means that there is something wrong with the template.
-    if (!node)
-      throw `bad template: ${text}`;
-    // if the current node is a comment, and it contains isµX
-    // it means the update should take care of any content
-    if (node.nodeType === 8) {
-      // The only comments to be considered are those
-      // which content is exactly the same as the searched one.
-      if (node.data === search) {
-        nodes.push({type: 'node', path: createPath(node)});
-        search = `${prefix}${++i}`;
-      }
-    }
-    else {
-      // if the node is not a comment, loop through all its attributes
-      // named isµX and relate attribute updates to this node and the
-      // attribute name, retrieved through node.getAttribute("isµX")
-      // the isµX attribute will be removed as irrelevant for the layout
-      // let svg = -1;
-      while (node.hasAttribute(search)) {
-        nodes.push({
-          type: 'attr',
-          path: createPath(node),
-          name: node.getAttribute(search),
-          //svg: svg < 0 ? (svg = ('ownerSVGElement' in node ? 1 : 0)) : svg
-        });
-        node.removeAttribute(search);
-        search = `${prefix}${++i}`;
-      }
-      // if the node was a style, textarea, or others, check its content
-      // and if it is <!--isµX--> then update tex-only this node
-      if (
-        textOnly.test(node.tagName) &&
-        node.textContent.trim() === `<!--${search}-->`
-      ){
-        node.textContent = '';
-        nodes.push({type: 'text', path: createPath(node)});
-        search = `${prefix}${++i}`;
-      }
-    }
-  }
-  // once all nodes to update, or their attributes, are known, the content
-  // will be cloned in the future to represent the template, and all updates
-  // related to such content retrieved right away without needing to re-crawl
-  // the exact same template, and its content, more than once.
-  return {content, nodes};
-};
-
-// if a template is unknown, perform the previous mapping, otherwise grab
-// its details such as the fragment with all nodes, and updates info.
-const mapUpdates = (type, template) => {
-  const {content, nodes} = (
-    cache.get(template) ||
-    cache.set(template, mapTemplate(type, template))
-  );
-  // clone deeply the fragment
-  const fragment = document.importNode(content, true);
-  // and relate an update handler per each node that needs one
-  const updates = nodes.map(handlers, fragment);
-  // return the fragment and all updates to use within its nodes
-  return {content: fragment, updates};
-};
-
-// as html and svg can be nested calls, but no parent node is known
-// until rendered somewhere, the unroll operation is needed to
-// discover what to do with each interpolation, which will result
-// into an update operation.
-const unroll = (info, {type, template, values}) => {
-  const {length} = values;
-  // interpolations can contain holes and arrays, so these need
-  // to be recursively discovered
-  unrollValues(info, values, length);
-  let {entry} = info;
-  // if the cache entry is either null or different from the template
-  // and the type this unroll should resolve, create a new entry
-  // assigning a new content fragment and the list of updates.
-  if (!entry || (entry.template !== template || entry.type !== type))
-    info.entry = (entry = createEntry(type, template));
-  const {content, updates, wire} = entry;
-  // even if the fragment and its nodes is not live yet,
-  // it is already possible to update via interpolations values.
-  for (let i = 0; i < length; i++)
-    updates[i](values[i]);
-  // if the entry was new, or representing a different template or type,
-  // create a new persistent entity to use during diffing.
-  // This is simply a DOM node, when the template has a single container,
-  // as in `<p></p>`, or a "wire" in `<p></p><p></p>` and similar cases.
-  return wire || (entry.wire = persistent(content));
-};
-
-// the stack retains, per each interpolation value, the cache
-// related to each interpolation value, or null, if the render
-// was conditional and the value is not special (Array or Hole)
-const unrollValues = ({stack}, values, length) => {
-  for (let i = 0; i < length; i++) {
-    const hole = values[i];
-    // each Hole gets unrolled and re-assigned as value
-    // so that domdiff will deal with a node/wire, not with a hole
-    if (hole instanceof Hole)
-      values[i] = unroll(
-        stack[i] || (stack[i] = createCache()),
-        hole
-      );
-    // arrays are recursively resolved so that each entry will contain
-    // also a DOM node or a wire, hence it can be diffed if/when needed
-    else if (isArray(hole))
-      unrollValues(
-        stack[i] || (stack[i] = createCache()),
-        hole,
-        hole.length
-      );
-    // if the value is nothing special, the stack doesn't need to retain data
-    // this is useful also to cleanup previously retained data, if the value
-    // was a Hole, or an Array, but not anymore, i.e.:
-    // const update = content => html`<div>${content}</div>`;
-    // update(listOfItems); update(null); update(html`hole`)
-    else
-      stack[i] = null;
-  }
-  if (length < stack.length)
-    stack.splice(length);
-};
-
-/**
- * Holds all details wrappers needed to render the content further on.
- * @constructor
- * @param {string} type The hole type, either `html` or `svg`.
- * @param {string[]} template The template literals used to the define the content.
- * @param {Array} values Zero, one, or more interpolated values to render.
- */
-function Hole(type, template, values) {
-  this.type = type;
-  this.template = template;
-  this.values = values;
-};
-
-
-
-
-const {create, defineProperties} = Object;
-
-// both `html` and `svg` template literal tags are polluted
-// with a `for(ref[, id])` and a `node` tag too
-const tag = type => {
-  // both `html` and `svg` tags have their own _cache
-  const keyed = umap(new WeakMap);
-  // keyed operations always re-use the same _cache and unroll
-  // the template and its interpolations right away
-  const fixed = _cache => (template, ...values) => unroll(
-    _cache,
-    {type, template, values}
-  );
-  return defineProperties(
-    // non keyed operations are recognized as instance of Hole
-    // during the "unroll", recursively resolved and updated
-    (template, ...values) => new Hole(type, template, values),
-    {
-      for: {
-        // keyed operations need a reference object, usually the parent node
-        // which is showing keyed results, and optionally a unique id per each
-        // related node, handy with JSON results and mutable list of objects
-        // that usually carry a unique identifier
-        value(ref, id) {
-          const memo = keyed.get(ref) || keyed.set(ref, create(null));
-          return memo[id] || (memo[id] = fixed(createCache()));
-        }
-      },
-      node: {
-        // it is possible to create one-off content out of the box via node tag
-        // this might return the single created node, or a fragment with all
-        // nodes present at the root level and, of course, their child nodes
-        value: (template, ...values) => unroll(
-          createCache(),
-          {type, template, values}
-        ).valueOf()
-      }
-    }
-  );
-};
-
-// each rendered node gets its own _cache
-const _cache = umap(new WeakMap);
-
-// rendering means understanding what `html` or `svg` tags returned
-// and it relates a specific node to its own unique _cache.
-// Each time the content to render changes, the node is cleaned up
-// and the new new content is appended, and if such content is a Hole
-// then it's "unrolled" to resolve all its inner nodes.
-const render = (where, what) => {
-  const hole = typeof what === 'function' ? what() : what;
-  const info = _cache.get(where) || _cache.set(where, createCache());
-  const wire = hole instanceof Hole ? unroll(info, hole) : hole;
-  if (wire !== info.wire) {
-    info.wire = wire;
-    where.textContent = '';
-    // valueOf() simply returns the node itself, but in case it was a "wire"
-    // it will eventually re-append all nodes to its fragment so that such
-    // fragment can be re-appended many times in a meaningful way
-    // (wires are basically persistent fragments facades with special behavior)
-    where.appendChild(wire.valueOf());
-  }
-  return where;
-};
-
-const html = tag('html');
-const svg = tag('svg');
-
-return {Hole, render, html, svg};
-
-/**end**/
-};
diff --git a/cjs/json.js b/cjs/json.js
deleted file mode 100644
index fdc1823..0000000
--- a/cjs/json.js
+++ /dev/null
@@ -1,51 +0,0 @@
-'use strict';
-const umap = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('umap'));
-const {render: $render, html, svg} = require('./index.js');
-
-// Sender (SW, Worker, postMessage)
-const ids = umap(new WeakMap);
-let id = 0;
-
-const tag = type => (template, ...values) => ({
-  id: ids.get(template) ||
-      ids.set(template, id++),
-  type,
-  values,
-  template
-});
-
-html.json = tag('html');
-svg.json = tag('svg');
-
-// Receiver (onmessage, from SW, Workers, etc)
-const templates = umap(new Map);
-
-const unroll = ({type, template, values, id}) => (
-  (type === 'svg' ? svg : html).apply(
-    null,
-    [
-      templates.get(id) ||
-      templates.set(id, template)
-    ].concat(values.map(asJSON))
-  )
-);
-
-const asJSON = value => isJSON(value) ? unroll(value) : value;
-
-const isJSON = thing => (
-  typeof thing === 'object' &&
-  thing !== null &&
-  'id' in thing &&
-  'type' in thing &&
-  'values' in thing &&
-  'template' in thing
-);
-
-const render = (where, what) => $render(
-  where,
-  isJSON(what) ? unroll(what) : what
-);
-
-exports.render = render;
-exports.html = html;
-exports.svg = svg;
diff --git a/cjs/node.js b/cjs/node.js
deleted file mode 100644
index d6ef65c..0000000
--- a/cjs/node.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-const createContent = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('@ungap/create-content'));
-
-// this "hack" tells the library if the browser is IE11 or old Edge
-const isImportNodeLengthWrong = document.importNode.length != 1;
-
-// IE11 and old Edge discard empty nodes when cloning, potentially
-// resulting in broken paths to find updates. The workaround here
-// is to import once, upfront, the fragment that will be cloned
-// later on, so that paths are retrieved from one already parsed,
-// hence without missing child nodes once re-cloned.
-const createFragment = isImportNodeLengthWrong ?
-  (text, type, normalize) => document.importNode(
-    createContent(text, type, normalize),
-    true
-  ) :
-  createContent;
-exports.createFragment = createFragment;
-
-// IE11 and old Edge have a different createTreeWalker signature that
-// has been deprecated in other browsers. This export is needed only
-// to guarantee the TreeWalker doesn't show warnings and, ultimately, works
-const createWalker = isImportNodeLengthWrong ?
-  fragment => document.createTreeWalker(fragment, 1 | 128, null, false) :
-  fragment => document.createTreeWalker(fragment, 1 | 128);
-exports.createWalker = createWalker;
diff --git a/cjs/package.json b/cjs/package.json
deleted file mode 100644
index 0292b99..0000000
--- a/cjs/package.json
+++ /dev/null
@@ -1 +0,0 @@
-{"type":"commonjs"}
\ No newline at end of file
diff --git a/cjs/rabbit.js b/cjs/rabbit.js
deleted file mode 100644
index 770b1cb..0000000
--- a/cjs/rabbit.js
+++ /dev/null
@@ -1,220 +0,0 @@
-'use strict';
-const umap = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('umap'));
-const instrument = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('uparser'));
-const {indexOf, isArray} = require('uarray');
-const {persistent} = require('uwire');
-
-const {handlers} = require('./handlers.js');
-const {createFragment, createWalker} = require('./node.js');
-
-// from a fragment container, create an array of indexes
-// related to its child nodes, so that it's possible
-// to retrieve later on exact node via reducePath
-const createPath = node => {
-  const path = [];
-  let {parentNode} = node;
-  while (parentNode) {
-    path.push(indexOf.call(parentNode.childNodes, node));
-    node = parentNode;
-    parentNode = node.parentNode;
-  }
-  return path;
-};
-
-// the prefix is used to identify either comments, attributes, or nodes
-// that contain the related unique id. In the attribute cases
-// isµX="attribute-name" will be used to map current X update to that
-// attribute name, while comments will be like <!--isµX-->, to map
-// the update to that specific comment node, hence its parent.
-// style and textarea will have <!--isµX--> text content, and are handled
-// directly through text-only updates.
-const prefix = 'isµ';
-
-// Template Literals are unique per scope and static, meaning a template
-// should be parsed once, and once only, as it will always represent the same
-// content, within the exact same amount of updates each time.
-// This cache relates each template to its unique content and updates.
-const cache = umap(new WeakMap);
-
-// a RegExp that helps checking nodes that cannot contain comments
-const textOnly = /^(?:plaintext|script|style|textarea|title|xmp)$/i;
-
-const createCache = () => ({
-  stack: [],    // each template gets a stack for each interpolation "hole"
-
-  entry: null,  // each entry contains details, such as:
-                //  * the template that is representing
-                //  * the type of node it represents (html or svg)
-                //  * the content fragment with all nodes
-                //  * the list of updates per each node (template holes)
-                //  * the "wired" node or fragment that will get updates
-                // if the template or type are different from the previous one
-                // the entry gets re-created each time
-
-  wire: null    // each rendered node represent some wired content and
-                // this reference to the latest one. If different, the node
-                // will be cleaned up and the new "wire" will be appended
-});
-exports.createCache = createCache;
-
-// the entry stored in the rendered node cache, and per each "hole"
-const createEntry = (type, template) => {
-  const {content, updates} = mapUpdates(type, template);
-  return {type, template, content, updates, wire: null};
-};
-
-// a template is instrumented to be able to retrieve where updates are needed.
-// Each unique template becomes a fragment, cloned once per each other
-// operation based on the same template, i.e. data => html`<p>${data}</p>`
-const mapTemplate = (type, template) => {
-  const text = instrument(template, prefix, type === 'svg');
-  const content = createFragment(text, type);
-  // once instrumented and reproduced as fragment, it's crawled
-  // to find out where each update is in the fragment tree
-  const tw = createWalker(content);
-  const nodes = [];
-  const length = template.length - 1;
-  let i = 0;
-  // updates are searched via unique names, linearly increased across the tree
-  // <div isµ0="attr" isµ1="other"><!--isµ2--><style><!--isµ3--</style></div>
-  let search = `${prefix}${i}`;
-  while (i < length) {
-    const node = tw.nextNode();
-    // if not all updates are bound but there's nothing else to crawl
-    // it means that there is something wrong with the template.
-    if (!node)
-      throw `bad template: ${text}`;
-    // if the current node is a comment, and it contains isµX
-    // it means the update should take care of any content
-    if (node.nodeType === 8) {
-      // The only comments to be considered are those
-      // which content is exactly the same as the searched one.
-      if (node.data === search) {
-        nodes.push({type: 'node', path: createPath(node)});
-        search = `${prefix}${++i}`;
-      }
-    }
-    else {
-      // if the node is not a comment, loop through all its attributes
-      // named isµX and relate attribute updates to this node and the
-      // attribute name, retrieved through node.getAttribute("isµX")
-      // the isµX attribute will be removed as irrelevant for the layout
-      // let svg = -1;
-      while (node.hasAttribute(search)) {
-        nodes.push({
-          type: 'attr',
-          path: createPath(node),
-          name: node.getAttribute(search),
-          //svg: svg < 0 ? (svg = ('ownerSVGElement' in node ? 1 : 0)) : svg
-        });
-        node.removeAttribute(search);
-        search = `${prefix}${++i}`;
-      }
-      // if the node was a style, textarea, or others, check its content
-      // and if it is <!--isµX--> then update tex-only this node
-      if (
-        textOnly.test(node.tagName) &&
-        node.textContent.trim() === `<!--${search}-->`
-      ){
-        node.textContent = '';
-        nodes.push({type: 'text', path: createPath(node)});
-        search = `${prefix}${++i}`;
-      }
-    }
-  }
-  // once all nodes to update, or their attributes, are known, the content
-  // will be cloned in the future to represent the template, and all updates
-  // related to such content retrieved right away without needing to re-crawl
-  // the exact same template, and its content, more than once.
-  return {content, nodes};
-};
-
-// if a template is unknown, perform the previous mapping, otherwise grab
-// its details such as the fragment with all nodes, and updates info.
-const mapUpdates = (type, template) => {
-  const {content, nodes} = (
-    cache.get(template) ||
-    cache.set(template, mapTemplate(type, template))
-  );
-  // clone deeply the fragment
-  const fragment = document.importNode(content, true);
-  // and relate an update handler per each node that needs one
-  const updates = nodes.map(handlers, fragment);
-  // return the fragment and all updates to use within its nodes
-  return {content: fragment, updates};
-};
-
-// as html and svg can be nested calls, but no parent node is known
-// until rendered somewhere, the unroll operation is needed to
-// discover what to do with each interpolation, which will result
-// into an update operation.
-const unroll = (info, {type, template, values}) => {
-  const {length} = values;
-  // interpolations can contain holes and arrays, so these need
-  // to be recursively discovered
-  unrollValues(info, values, length);
-  let {entry} = info;
-  // if the cache entry is either null or different from the template
-  // and the type this unroll should resolve, create a new entry
-  // assigning a new content fragment and the list of updates.
-  if (!entry || (entry.template !== template || entry.type !== type))
-    info.entry = (entry = createEntry(type, template));
-  const {content, updates, wire} = entry;
-  // even if the fragment and its nodes is not live yet,
-  // it is already possible to update via interpolations values.
-  for (let i = 0; i < length; i++)
-    updates[i](values[i]);
-  // if the entry was new, or representing a different template or type,
-  // create a new persistent entity to use during diffing.
-  // This is simply a DOM node, when the template has a single container,
-  // as in `<p></p>`, or a "wire" in `<p></p><p></p>` and similar cases.
-  return wire || (entry.wire = persistent(content));
-};
-exports.unroll = unroll;
-
-// the stack retains, per each interpolation value, the cache
-// related to each interpolation value, or null, if the render
-// was conditional and the value is not special (Array or Hole)
-const unrollValues = ({stack}, values, length) => {
-  for (let i = 0; i < length; i++) {
-    const hole = values[i];
-    // each Hole gets unrolled and re-assigned as value
-    // so that domdiff will deal with a node/wire, not with a hole
-    if (hole instanceof Hole)
-      values[i] = unroll(
-        stack[i] || (stack[i] = createCache()),
-        hole
-      );
-    // arrays are recursively resolved so that each entry will contain
-    // also a DOM node or a wire, hence it can be diffed if/when needed
-    else if (isArray(hole))
-      unrollValues(
-        stack[i] || (stack[i] = createCache()),
-        hole,
-        hole.length
-      );
-    // if the value is nothing special, the stack doesn't need to retain data
-    // this is useful also to cleanup previously retained data, if the value
-    // was a Hole, or an Array, but not anymore, i.e.:
-    // const update = content => html`<div>${content}</div>`;
-    // update(listOfItems); update(null); update(html`hole`)
-    else
-      stack[i] = null;
-  }
-  if (length < stack.length)
-    stack.splice(length);
-};
-
-/**
- * Holds all details wrappers needed to render the content further on.
- * @constructor
- * @param {string} type The hole type, either `html` or `svg`.
- * @param {string[]} template The template literals used to the define the content.
- * @param {Array} values Zero, one, or more interpolated values to render.
- */
-function Hole(type, template, values) {
-  this.type = type;
-  this.template = template;
-  this.values = values;
-}
-exports.Hole = Hole;
diff --git a/cjs/x.js b/cjs/x.js
deleted file mode 100644
index acc4e2d..0000000
--- a/cjs/x.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict';
-const {createPragma} = require('jsx2tag');
-const {html} = require('./index.js');
-
-const createElement = createPragma(html);
-self.React = {
-  createElement,
-  Fragment: createElement
-};
-
-(m => Object.keys(m).map(k => k !== 'default' && (exports[k] = m[k])))
-(require('jsx2tag'));
-(m => Object.keys(m).map(k => k !== 'default' && (exports[k] = m[k])))
-(require('./index.js'));
diff --git a/dist/dev/cdn.js b/dist/dev/cdn.js
new file mode 100644
index 0000000..91f7de0
--- /dev/null
+++ b/dist/dev/cdn.js
@@ -0,0 +1,16 @@
+const resolve = ({ protocol, host, pathname }) => {
+  const dev = /[?&](?:dev|debug)(?:=|$)/.test(location.search);
+  let path = pathname.replace(/\+\S*?$/, '');
+  path = path.replace(/\/(?:auto|cdn)(?:\/|\.js\S*)$/, '/');
+  path = path.replace(/\/(?:dist\/)?(?:dev|prod)\//, '/');
+  return `${protocol}//${host}${path}dist/${dev ? 'dev' : 'prod'}/dom.js`;
+};
+
+const uhtml = Symbol.for('µhtml');
+
+const {
+  render, html, svg,
+  computed, signal, batch, effect, untracked,
+} = globalThis[uhtml] || (globalThis[uhtml] = await import(/* webpackIgnore: true */resolve(new URL(import.meta.url))));
+
+export { batch, computed, effect, html, render, signal, svg, untracked };
diff --git a/dist/dev/creator.js b/dist/dev/creator.js
new file mode 100644
index 0000000..ac47cd4
--- /dev/null
+++ b/dist/dev/creator.js
@@ -0,0 +1,31 @@
+// @ts-check
+
+/**
+ * @param {Document} document
+ * @returns
+ */
+var creator = (document = /** @type {Document} */(globalThis.document)) => {
+  let tpl = document.createElement('template'), range;
+  /**
+   * @param {string} content
+   * @param {boolean} [xml=false]
+   * @returns {DocumentFragment}
+   */
+  return (content, xml = false) => {
+    if (xml) {
+      if (!range) {
+        range = document.createRange();
+        range.selectNodeContents(
+          document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+        );
+      }
+      return range.createContextualFragment(content);
+    }
+    tpl.innerHTML = content;
+    const fragment = tpl.content;
+    tpl = /** @type {HTMLTemplateElement} */(tpl.cloneNode(false));
+    return fragment;
+  };
+};
+
+export { creator as default };
diff --git a/dist/dev/ish.js b/dist/dev/ish.js
new file mode 100644
index 0000000..7b1d835
--- /dev/null
+++ b/dist/dev/ish.js
@@ -0,0 +1,236 @@
+const { isArray } = Array;
+const { assign, freeze} = Object;
+/* c8 ignore stop */
+
+// this is an essential ad-hoc DOM facade
+
+
+const ELEMENT = 1;
+const ATTRIBUTE = 2;
+const TEXT = 3;
+const COMMENT = 8;
+const DOCUMENT_TYPE = 10;
+const FRAGMENT = 11;
+const COMPONENT = 42;
+
+const TEXT_ELEMENTS = new Set([
+  'plaintext',
+  'script',
+  'style',
+  'textarea',
+  'title',
+  'xmp',
+]);
+
+const VOID_ELEMENTS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'menuitem',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]);
+
+const props = freeze({});
+const children = freeze([]);
+
+const append = (node, child) => {
+  if (node.children === children) node.children = [];
+  node.children.push(child);
+  child.parent = node;
+  return child;
+};
+
+const prop = (node, name, value) => {
+  if (node.props === props) node.props = {};
+  node.props[name] = value;
+};
+
+const addJSON = (value, comp, json) => {
+  if (value !== comp) json.push(value);
+};
+
+const setChildren = (node, json) => {
+  node.children = json.map(revive, node);
+};
+
+const setJSON = (node, json, index) => {
+  switch (json.length) {
+    case index: setChildren(node, json[index - 1]);
+    case index - 1: {
+      const value = json[index - 2];
+      if (isArray(value)) setChildren(node, value);
+      else node.props = assign({}, value);
+    }
+  }
+  return node;
+};
+
+function revive(json) {
+  const node = fromJSON(json);
+  node.parent = this;
+  return node;
+}
+
+const fromJSON = json => {
+  switch (json[0]) {
+    case COMMENT: return new Comment(json[1]);
+    case DOCUMENT_TYPE: return new DocumentType(json[1]);
+    case TEXT: return new Text(json[1]);
+    case COMPONENT: return setJSON(new Component, json, 3);
+    case ELEMENT: return setJSON(new Element(json[1], !!json[2]), json, 5);
+    case FRAGMENT: {
+      const node = new Fragment;
+      if (1 < json.length) node.children = json[1].map(revive, node);
+      return node;
+    }
+  }
+};
+
+class Node {
+  constructor(type) {
+    this.type = type;
+    this.parent = null;
+  }
+
+  toJSON() {
+    //@ts-ignore
+    return [this.type, this.data];
+  }
+}
+
+class Comment extends Node {
+  constructor(data) {
+    super(COMMENT);
+    this.data = data;
+  }
+
+  toString() {
+    return `<!--${this.data}-->`;
+  }
+}
+
+class DocumentType extends Node {
+  constructor(data) {
+    super(DOCUMENT_TYPE);
+    this.data = data;
+  }
+
+  toString() {
+    return `<!${this.data}>`;
+  }
+}
+
+class Text extends Node {
+  constructor(data) {
+    super(TEXT);
+    this.data = data;
+  }
+
+  toString() {
+    return this.data;
+  }
+}
+
+class Component extends Node {
+  constructor() {
+    super(COMPONENT);
+    this.name = 'template';
+    this.props = props;
+    this.children = children;
+  }
+
+  toJSON() {
+    const json = [COMPONENT];
+    addJSON(this.props, props, json);
+    addJSON(this.children, children, json);
+    return json;
+  }
+
+  toString() {
+    let attrs = '';
+    for (const key in this.props) {
+      const value = this.props[key];
+      if (value != null) {
+        /* c8 ignore start */
+        if (typeof value === 'boolean') {
+          if (value) attrs += ` ${key}`;
+        }
+        else attrs += ` ${key}="${value}"`;
+        /* c8 ignore stop */
+      }
+    }
+    return `<template${attrs}>${this.children.join('')}</template>`;
+  }
+}
+
+class Element extends Node {
+  constructor(name, xml = false) {
+    super(ELEMENT);
+    this.name = name;
+    this.xml = xml;
+    this.props = props;
+    this.children = children;
+  }
+
+  toJSON() {
+    const json = [ELEMENT, this.name, +this.xml];
+    addJSON(this.props, props, json);
+    addJSON(this.children, children, json);
+    return json;
+  }
+
+  toString() {
+    const { xml, name, props, children } = this;
+    const { length } = children;
+    let html = `<${name}`;
+    for (const key in props) {
+      const value = props[key];
+      if (value != null) {
+        if (typeof value === 'boolean') {
+          if (value) html += xml ? ` ${key}=""` : ` ${key}`;
+        }
+        else html += ` ${key}="${value}"`;
+      }
+    }
+    if (length) {
+      html += '>';
+      for (let text = !xml && TEXT_ELEMENTS.has(name), i = 0; i < length; i++)
+        html += text ? children[i].data : children[i];
+      html += `</${name}>`;
+    }
+    else if (xml) html += ' />';
+    else html += VOID_ELEMENTS.has(name) ? '>' : `></${name}>`;
+    return html;
+  }
+}
+
+class Fragment extends Node {
+  constructor() {
+    super(FRAGMENT);
+    this.name = '#fragment';
+    this.children = children;
+  }
+
+  toJSON() {
+    const json = [FRAGMENT];
+    addJSON(this.children, children, json);
+    return json;
+  }
+
+  toString() {
+    return this.children.join('');
+  }
+}
+
+export { ATTRIBUTE, COMMENT, COMPONENT, Comment, Component, DOCUMENT_TYPE, DocumentType, ELEMENT, Element, FRAGMENT, Fragment, Node, TEXT, TEXT_ELEMENTS, Text, VOID_ELEMENTS, append, children, fromJSON, prop, props };
diff --git a/dist/dev/json.js b/dist/dev/json.js
new file mode 100644
index 0000000..f55401d
--- /dev/null
+++ b/dist/dev/json.js
@@ -0,0 +1,675 @@
+/* c8 ignore start */
+const asTemplate = template => (template?.raw || template)?.join?.(',') || 'unknown';
+/* c8 ignore stop */
+
+var errors = {
+  text: (template, tag, value) => new SyntaxError(`Mixed text and interpolations found in text only <${tag}> element ${JSON.stringify(String(value))} in template ${asTemplate(template)}`),
+  unclosed: (template, tag) => new SyntaxError(`The text only <${tag}> element requires explicit </${tag}> closing tag in template ${asTemplate(template)}`),
+  unclosed_element: (template, tag) => new SyntaxError(`Unclosed element <${tag}> found in template ${asTemplate(template)}`),
+  invalid_content: template => new SyntaxError(`Invalid content "<!" found in template: ${asTemplate(template)}`),
+  invalid_closing: template => new SyntaxError(`Invalid closing tag: </... found in template: ${asTemplate(template)}`),
+  invalid_nul: template => new SyntaxError(`Invalid content: NUL char \\x00 found in template: ${asTemplate(template)}`),
+  invalid_comment: template => new SyntaxError(`Invalid comment: no closing --> found in template ${asTemplate(template)}`),
+  invalid_layout: template => new SyntaxError(`Too many closing tags found in template ${asTemplate(template)}`),
+  invalid_doctype: (template, value) => new SyntaxError(`Invalid doctype: ${value} found in template ${asTemplate(template)}`),
+
+  // DOM ONLY
+  /* c8 ignore start */
+  invalid_template: template => new SyntaxError(`Invalid template - the amount of values does not match the amount of updates: ${asTemplate(template)}`),
+  invalid_path: (template, path) => new SyntaxError(`Invalid path - unreachable node at the path [${path.join(', ')}] found in template ${asTemplate(template)}`),
+  invalid_attribute: (template, kind) => new SyntaxError(`Invalid ${kind} attribute in template definition\n${asTemplate(template)}`),
+  invalid_interpolation: (template, value) => new SyntaxError(`Invalid interpolation - expected hole or array: ${String(value)} found in template ${asTemplate(template)}`),
+  invalid_hole: value => new SyntaxError(`Invalid interpolation - expected hole: ${String(value)}`),
+  invalid_key: value => new SyntaxError(`Invalid key attribute or position in template: ${String(value)}`),
+  invalid_array: value => new SyntaxError(`Invalid array - expected html/svg but found something else: ${String(value)}`),
+  invalid_component: value => new SyntaxError(`Invalid component: ${String(value)}`),
+};
+
+const { isArray } = Array;
+const { assign, freeze, keys } = Object;
+/* c8 ignore stop */
+
+// this is an essential ad-hoc DOM facade
+
+
+const ELEMENT = 1;
+const ATTRIBUTE$1 = 2;
+const TEXT$1 = 3;
+const COMMENT$1 = 8;
+const DOCUMENT_TYPE = 10;
+const FRAGMENT = 11;
+const COMPONENT$1 = 42;
+
+const TEXT_ELEMENTS = new Set([
+  'plaintext',
+  'script',
+  'style',
+  'textarea',
+  'title',
+  'xmp',
+]);
+
+const VOID_ELEMENTS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'menuitem',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]);
+
+const props = freeze({});
+const children = freeze([]);
+
+const append = (node, child) => {
+  if (node.children === children) node.children = [];
+  node.children.push(child);
+  child.parent = node;
+  return child;
+};
+
+const prop = (node, name, value) => {
+  if (node.props === props) node.props = {};
+  node.props[name] = value;
+};
+
+const addJSON = (value, comp, json) => {
+  if (value !== comp) json.push(value);
+};
+
+const setChildren = (node, json) => {
+  node.children = json.map(revive, node);
+};
+
+const setJSON = (node, json, index) => {
+  switch (json.length) {
+    case index: setChildren(node, json[index - 1]);
+    case index - 1: {
+      const value = json[index - 2];
+      if (isArray(value)) setChildren(node, value);
+      else node.props = assign({}, value);
+    }
+  }
+  return node;
+};
+
+function revive(json) {
+  const node = fromJSON(json);
+  node.parent = this;
+  return node;
+}
+
+const fromJSON = json => {
+  switch (json[0]) {
+    case COMMENT$1: return new Comment(json[1]);
+    case DOCUMENT_TYPE: return new DocumentType(json[1]);
+    case TEXT$1: return new Text(json[1]);
+    case COMPONENT$1: return setJSON(new Component, json, 3);
+    case ELEMENT: return setJSON(new Element(json[1], !!json[2]), json, 5);
+    case FRAGMENT: {
+      const node = new Fragment;
+      if (1 < json.length) node.children = json[1].map(revive, node);
+      return node;
+    }
+  }
+};
+
+class Node {
+  constructor(type) {
+    this.type = type;
+    this.parent = null;
+  }
+
+  toJSON() {
+    //@ts-ignore
+    return [this.type, this.data];
+  }
+}
+
+class Comment extends Node {
+  constructor(data) {
+    super(COMMENT$1);
+    this.data = data;
+  }
+
+  toString() {
+    return `<!--${this.data}-->`;
+  }
+}
+
+class DocumentType extends Node {
+  constructor(data) {
+    super(DOCUMENT_TYPE);
+    this.data = data;
+  }
+
+  toString() {
+    return `<!${this.data}>`;
+  }
+}
+
+class Text extends Node {
+  constructor(data) {
+    super(TEXT$1);
+    this.data = data;
+  }
+
+  toString() {
+    return this.data;
+  }
+}
+
+class Component extends Node {
+  constructor() {
+    super(COMPONENT$1);
+    this.name = 'template';
+    this.props = props;
+    this.children = children;
+  }
+
+  toJSON() {
+    const json = [COMPONENT$1];
+    addJSON(this.props, props, json);
+    addJSON(this.children, children, json);
+    return json;
+  }
+
+  toString() {
+    let attrs = '';
+    for (const key in this.props) {
+      const value = this.props[key];
+      if (value != null) {
+        /* c8 ignore start */
+        if (typeof value === 'boolean') {
+          if (value) attrs += ` ${key}`;
+        }
+        else attrs += ` ${key}="${value}"`;
+        /* c8 ignore stop */
+      }
+    }
+    return `<template${attrs}>${this.children.join('')}</template>`;
+  }
+}
+
+class Element extends Node {
+  constructor(name, xml = false) {
+    super(ELEMENT);
+    this.name = name;
+    this.xml = xml;
+    this.props = props;
+    this.children = children;
+  }
+
+  toJSON() {
+    const json = [ELEMENT, this.name, +this.xml];
+    addJSON(this.props, props, json);
+    addJSON(this.children, children, json);
+    return json;
+  }
+
+  toString() {
+    const { xml, name, props, children } = this;
+    const { length } = children;
+    let html = `<${name}`;
+    for (const key in props) {
+      const value = props[key];
+      if (value != null) {
+        if (typeof value === 'boolean') {
+          if (value) html += xml ? ` ${key}=""` : ` ${key}`;
+        }
+        else html += ` ${key}="${value}"`;
+      }
+    }
+    if (length) {
+      html += '>';
+      for (let text = !xml && TEXT_ELEMENTS.has(name), i = 0; i < length; i++)
+        html += text ? children[i].data : children[i];
+      html += `</${name}>`;
+    }
+    else if (xml) html += ' />';
+    else html += VOID_ELEMENTS.has(name) ? '>' : `></${name}>`;
+    return html;
+  }
+}
+
+class Fragment extends Node {
+  constructor() {
+    super(FRAGMENT);
+    this.name = '#fragment';
+    this.children = children;
+  }
+
+  toJSON() {
+    const json = [FRAGMENT];
+    addJSON(this.children, children, json);
+    return json;
+  }
+
+  toString() {
+    return this.children.join('');
+  }
+}
+
+//@ts-check
+
+
+const NUL = '\x00';
+const DOUBLE_QUOTED_NUL = `"${NUL}"`;
+const SINGLE_QUOTED_NUL = `'${NUL}'`;
+const NEXT = /\x00|<[^><\s]+/g;
+const ATTRS = /([^\s/>=]+)(?:=(\x00|(?:(['"])[\s\S]*?\3)))?/g;
+
+// // YAGNI: NUL char in the wild is a shenanigan
+// // usage: template.map(safe).join(NUL).trim()
+// const NUL_RE = /\x00/g;
+// const safe = s => s.replace(NUL_RE, '&#0;');
+
+/** @typedef {import('../dom/ish.js').Node} Node */
+/** @typedef {import('../dom/ish.js').Element} Element */
+/** @typedef {import('../dom/ish.js').Component} Component */
+/** @typedef {(node: import('../dom/ish.js').Node, type: typeof ATTRIBUTE | typeof TEXT | typeof COMMENT | typeof COMPONENT, path: number[], name: string, hint: unknown) => unknown} update */
+/** @typedef {Element | Component} Container */
+
+/** @type {update} */
+const defaultUpdate = (_, type, path, name, hint) => [type, path, name];
+
+/**
+ * @param {Node} node
+ * @returns {number[]}
+ */
+const path = node => {
+  const insideout = [];
+  while (node.parent) {
+    switch (node.type) {
+      /* c8 ignore start */
+      case COMPONENT$1:
+      // fallthrough
+      /* c8 ignore stop */
+      case ELEMENT: {
+        if (/** @type {Container} */(node).name === 'template') insideout.push(-1);
+        break;
+      }
+    }
+    insideout.push(node.parent.children.indexOf(node));
+    node = node.parent;
+  }
+  return insideout;
+};
+
+/**
+ * @param {Node} node
+ * @param {Set<Node>} ignore
+ * @returns {Node}
+ */
+const parent = (node, ignore) => {
+  do { node = node.parent; } while (ignore.has(node));
+  return node;
+};
+
+var parser = ({
+  Comment: Comment$1 = Comment,
+  DocumentType: DocumentType$1 = DocumentType,
+  Text: Text$1 = Text,
+  Fragment: Fragment$1 = Fragment,
+  Element: Element$1 = Element,
+  Component: Component$1 = Component,
+  update = defaultUpdate,
+}) =>
+/**
+ * Parse a template string into a crawable JS literal tree and provide a list of updates.
+ * @param {TemplateStringsArray|string[]} template
+ * @param {unknown[]} holes
+ * @param {boolean} xml
+ * @returns {[Node, unknown[]]}
+ */
+(template, holes, xml) => {
+  if (template.some(chunk => chunk.includes(NUL))) throw errors.invalid_nul(template);
+  const content = template.join(NUL).trim();
+  if (content.replace(/(\S+)=(['"])([\S\s]+?)\2/g, (...a) => /^[^\x00]+\x00|\x00[^\x00]+$/.test(a[3]) ? (xml = a[1]) : a[0]) !== content) throw errors.invalid_attribute(template, xml);
+  const ignore = new Set;
+  const values = [];
+  let node = new Fragment$1, pos = 0, skip = 0, hole = 0, resolvedPath = children;
+  for (const match of content.matchAll(NEXT)) {
+    // already handled via attributes or text content nodes
+    if (0 < skip) {
+      skip--;
+      continue;
+    }
+
+    const chunk = match[0];
+    const index = match.index;
+
+    // prepend previous content, if any
+    if (pos < index)
+      append(node, new Text$1(content.slice(pos, index)));
+
+    // holes
+    if (chunk === NUL) {
+      if (node.name === 'table') {
+        node = append(node, new Element$1('tbody', xml));
+        ignore.add(node);
+      }
+      const comment = append(node, new Comment$1('◦'));
+      values.push(update(comment, COMMENT$1, path(comment), '', holes[hole++]));
+      pos = index + 1;
+    }
+    // comments or doctype
+    else if (chunk.startsWith('<!')) {
+      const i = content.indexOf('>', index + 2);
+
+      if (i < 0) throw errors.invalid_content(template);
+
+      if (content.slice(i - 2, i + 1) === '-->') {
+        if ((i - index) < 6) throw errors.invalid_comment(template);
+        const data = content.slice(index + 4, i - 2);
+        if (data[0] === '!') append(node, new Comment$1(data.slice(1).replace(/!$/, '')));
+      }
+      else {
+        if (!content.slice(index + 2, i).toLowerCase().startsWith('doctype')) throw errors.invalid_doctype(template, content.slice(index + 2, i));
+        append(node, new DocumentType$1(content.slice(index + 2, i)));
+      }
+      pos = i + 1;
+    }
+    // closing tag </> or </name>
+    else if (chunk.startsWith('</')) {
+      const i = content.indexOf('>', index + 2);
+      if (i < 0) throw errors.invalid_closing(template);
+      if (xml && node.name === 'svg') xml = false;
+      node = /** @type {Container} */(parent(node, ignore));
+      if (!node) throw errors.invalid_layout(template);
+      pos = i + 1;
+    }
+    // opening tag <name> or <name />
+    else {
+      const i = index + chunk.length;
+      const j = content.indexOf('>', i);
+      const name = chunk.slice(1);
+
+      if (j < 0) throw errors.unclosed_element(template, name);
+
+      let tag = name;
+      // <${Component} ... />
+      if (name === NUL) {
+        tag = 'template';
+        node = append(node, new Component$1);
+        resolvedPath = path(node).slice(1);
+        //@ts-ignore
+        values.push(update(node, COMPONENT$1, resolvedPath, '', holes[hole++]));
+      }
+      // any other element
+      else {
+        if (!xml) {
+          tag = tag.toLowerCase();
+          // patch automatic elements insertion with <table>
+          // or path will fail once live on the DOM
+          if (node.name === 'table' && (tag === 'tr' || tag === 'td')) {
+            node = append(node, new Element$1('tbody', xml));
+            ignore.add(node);
+          }
+          if (node.name === 'tbody' && tag === 'td') {
+            node = append(node, new Element$1('tr', xml));
+            ignore.add(node);
+          }
+        }
+        node = append(node, new Element$1(tag, xml ? tag !== 'svg' : false));
+        resolvedPath = children;
+      }
+
+      // attributes
+      if (i < j) {
+        let dot = false;
+        for (const [_, name, value] of content.slice(i, j).matchAll(ATTRS)) {
+          if (value === NUL || value === DOUBLE_QUOTED_NUL || value === SINGLE_QUOTED_NUL || (dot = name.endsWith(NUL))) {
+            const p = resolvedPath === children ? (resolvedPath = path(node)) : resolvedPath;
+            //@ts-ignore
+            values.push(update(node, ATTRIBUTE$1, p, dot ? name.slice(0, -1) : name, holes[hole++]));
+            dot = false;
+            skip++;
+          }
+          else prop(node, name, value ? value.slice(1, -1) : true);
+        }
+        resolvedPath = children;
+      }
+
+      pos = j + 1;
+
+      // to handle self-closing tags
+      const closed = 0 < j && content[j - 1] === '/';
+
+      if (xml) {
+        if (closed) {
+          node = node.parent;
+          /* c8 ignore start unable to reproduce, still worth a guard */
+          if (!node) throw errors.invalid_layout(template);
+          /* c8 ignore stop */
+        }
+      }
+      else if (closed || VOID_ELEMENTS.has(tag)) {
+        // void elements are never td or tr
+        node = closed ? parent(node, ignore) : node.parent;
+        
+        /* c8 ignore start unable to reproduce, still worth a guard */
+        if (!node) throw errors.invalid_layout();
+        /* c8 ignore stop */
+      }
+      // <svg> switches to xml mode
+      else if (tag === 'svg') xml = true;
+      // text content / data elements content handling
+      else if (TEXT_ELEMENTS.has(tag)) {
+        const index = content.indexOf(`</${name}>`, pos);
+        if (index < 0) throw errors.unclosed(template, tag);
+        const value = content.slice(pos, index);
+        // interpolation as text
+        if (value.trim() === NUL) {
+          skip++;
+          values.push(update(node, TEXT$1, path(node), '', holes[hole++]));
+        }
+        else if (value.includes(NUL)) throw errors.text(template, tag, value);
+        else append(node, new Text$1(value));
+        // text elements are never td or tr
+        node = node.parent;
+        /* c8 ignore start unable to reproduce, still worth a guard */
+        if (!node) throw errors.invalid_layout(template);
+        /* c8 ignore stop */
+        pos = index + name.length + 3;
+        // ignore the closing tag regardless of the content
+        skip++;
+        continue;
+      }
+    }
+  }
+
+  if (pos < content.length)
+    append(node, new Text$1(content.slice(pos)));
+
+  /* c8 ignore start */
+  if (hole < holes.length) throw errors.invalid_template(template);
+  /* c8 ignore stop */
+
+  return [node, values];
+};
+
+const tree = ((node, i) => i < 0 ? node : node?.children?.[i]) 
+;
+
+var resolve = (root, path) => path.reduceRight(tree, root);
+
+const get = node => {
+  if (node.props === props) node.props = {};
+  return node.props;
+};
+
+const set = (props, name, value) => {
+  if (value == null) delete props[name];
+  else props[name] = value;
+};
+
+const ARIA = 0;
+const aria =  (node, values) => {
+  const props = get(node);
+  for (const key in values) {
+    const name = key === 'role' ? key : `aria-${key}`;
+    const value = values[key];
+    set(props, name, value);
+  }
+  if (keys(props).length === 0) node.props = props;
+};
+
+const ATTRIBUTE = 1;
+const attribute = name => (node, value) => {
+  const props = get(node);
+  set(props, name, value);
+  if (keys(props).length === 0) node.props = props;
+};
+
+const COMMENT = 2;
+const comment = (node, value) => {
+  const { children } = node.parent;
+  const i = children.indexOf(node);
+  if (isArray(value)) {
+    const fragment = new Fragment;
+    fragment.children = value;
+    value = fragment;
+  }
+  else if (!(value instanceof Node)) value = new Text(value == null ? '' : value);
+  children[i] = value;
+};
+
+const COMPONENT = 3;
+const component = (node, value) => [node, value];
+
+const DATA = 4;
+const data = (node, values) => {
+  const props = get(node);
+  for (const key in values) {
+    const name = `data-${key}`;
+    const value = values[key];
+    set(props, name, value);
+  }
+  if (keys(props).length === 0) node.props = props;
+};
+
+const DIRECT = 5;
+const direct = name => (node, value) => {
+  const props = get(node);
+  set(props, name, value);
+  if (keys(props).length === 0) node.props = props;
+};
+
+const DOTS = 6;
+const dots = isComponent => (node, value) => {
+};
+
+const EVENT = 7;
+const event = at => (node, value) => {
+  const props = get(node);
+  if (value == null) delete props[at];
+  else props[at] = value;
+};
+
+const KEY = 8;
+
+const TEXT = 9;
+const text = (node, value) => {
+  if (value == null) node.children = children;
+  else node.children = [new Text(value)];
+};
+
+const TOGGLE = 10;
+const toggle = name => (node, value) => {
+  const props = get(node);
+  if (!value) {
+    delete props[name];
+    if (keys(props).length === 0) node.props = props;
+  }
+  else props[name] = !!value;
+};
+
+const update = (node, type, path, name) => {
+  switch (type) {
+    case COMPONENT$1: {
+      return [path, component, COMPONENT];
+    }
+    case COMMENT$1: {
+      return [path, comment, COMMENT];
+    }
+    case ATTRIBUTE$1: {
+      switch (name.at(0)) {
+        case '@': return [path, event(Symbol(name)), EVENT];
+        case '?': return [path, toggle(name.slice(1)), TOGGLE];
+        case '.': return name === '...' ?
+          [path, dots(node.type === COMPONENT$1), DOTS] :
+          [path, direct(name.slice(1)), DIRECT]
+        ;
+        case 'a': if (name === 'aria') return [path, aria, ARIA];
+        case 'd': if (name === 'data') return [path, data, DATA];
+        case 'k': if (name === 'key') return [path, Object, KEY];
+        default: return [path, attribute(name), ATTRIBUTE];
+      }
+    }
+    case TEXT$1: return [path, text, TEXT];
+  }
+};
+
+const textParser = parser({
+  Comment,
+  DocumentType,
+  Text,
+  Fragment,
+  Element,
+  Component,
+  update,
+});
+
+const { parse, stringify } = JSON;
+
+const create = xml => {
+  const twm = new WeakMap;
+  const cache = (template, values) => {
+    const parsed = textParser(template, values, xml);
+    parsed[0] = parse(stringify(parsed[0]));
+    twm.set(template, parsed);
+    return parsed;
+  };
+  return (template, ...values) => {
+    const [json, updates] = twm.get(template) || cache(template, values);
+    const root = fromJSON(json);
+    const length = values.length;
+    if (length === updates.length) {
+      const components = [];
+      for (let node, prev, i = 0; i < length; i++) {
+        const [path, update, type] = updates[i];
+        const value = values[i];
+        if (prev !== path) {
+          node = resolve(root, path);
+          prev = path;
+          if (!node) throw errors.invalid_path(path);
+        }
+        if (type === KEY) continue;
+        if (type === COMPONENT) components.push(update(node, value));
+        else update(node, value);
+      }
+      for (const [node, Component] of components) {
+        const props = assign({ children: node.children }, node.props);
+        comment(node, Component(props));
+      }
+    }
+    else throw errors.invalid_template();
+    return root;
+  };
+};
+
+const html = create(false);
+const svg = create(true);
+
+export { html, svg };
diff --git a/dist/dev/parser.js b/dist/dev/parser.js
new file mode 100644
index 0000000..4163343
--- /dev/null
+++ b/dist/dev/parser.js
@@ -0,0 +1,464 @@
+/* c8 ignore start */
+const asTemplate = template => (template?.raw || template)?.join?.(',') || 'unknown';
+/* c8 ignore stop */
+
+var errors = {
+  text: (template, tag, value) => new SyntaxError(`Mixed text and interpolations found in text only <${tag}> element ${JSON.stringify(String(value))} in template ${asTemplate(template)}`),
+  unclosed: (template, tag) => new SyntaxError(`The text only <${tag}> element requires explicit </${tag}> closing tag in template ${asTemplate(template)}`),
+  unclosed_element: (template, tag) => new SyntaxError(`Unclosed element <${tag}> found in template ${asTemplate(template)}`),
+  invalid_content: template => new SyntaxError(`Invalid content "<!" found in template: ${asTemplate(template)}`),
+  invalid_closing: template => new SyntaxError(`Invalid closing tag: </... found in template: ${asTemplate(template)}`),
+  invalid_nul: template => new SyntaxError(`Invalid content: NUL char \\x00 found in template: ${asTemplate(template)}`),
+  invalid_comment: template => new SyntaxError(`Invalid comment: no closing --> found in template ${asTemplate(template)}`),
+  invalid_layout: template => new SyntaxError(`Too many closing tags found in template ${asTemplate(template)}`),
+  invalid_doctype: (template, value) => new SyntaxError(`Invalid doctype: ${value} found in template ${asTemplate(template)}`),
+
+  // DOM ONLY
+  /* c8 ignore start */
+  invalid_template: template => new SyntaxError(`Invalid template - the amount of values does not match the amount of updates: ${asTemplate(template)}`),
+  invalid_path: (template, path) => new SyntaxError(`Invalid path - unreachable node at the path [${path.join(', ')}] found in template ${asTemplate(template)}`),
+  invalid_attribute: (template, kind) => new SyntaxError(`Invalid ${kind} attribute in template definition\n${asTemplate(template)}`),
+  invalid_interpolation: (template, value) => new SyntaxError(`Invalid interpolation - expected hole or array: ${String(value)} found in template ${asTemplate(template)}`),
+  invalid_hole: value => new SyntaxError(`Invalid interpolation - expected hole: ${String(value)}`),
+  invalid_key: value => new SyntaxError(`Invalid key attribute or position in template: ${String(value)}`),
+  invalid_array: value => new SyntaxError(`Invalid array - expected html/svg but found something else: ${String(value)}`),
+  invalid_component: value => new SyntaxError(`Invalid component: ${String(value)}`),
+};
+
+const { freeze} = Object;
+/* c8 ignore stop */
+
+// this is an essential ad-hoc DOM facade
+
+
+const ELEMENT = 1;
+const ATTRIBUTE = 2;
+const TEXT = 3;
+const COMMENT = 8;
+const DOCUMENT_TYPE = 10;
+const FRAGMENT = 11;
+const COMPONENT = 42;
+
+const TEXT_ELEMENTS = new Set([
+  'plaintext',
+  'script',
+  'style',
+  'textarea',
+  'title',
+  'xmp',
+]);
+
+const VOID_ELEMENTS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'menuitem',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]);
+
+const props = freeze({});
+const children = freeze([]);
+
+const append = (node, child) => {
+  if (node.children === children) node.children = [];
+  node.children.push(child);
+  child.parent = node;
+  return child;
+};
+
+const prop = (node, name, value) => {
+  if (node.props === props) node.props = {};
+  node.props[name] = value;
+};
+
+const addJSON = (value, comp, json) => {
+  if (value !== comp) json.push(value);
+};
+
+class Node {
+  constructor(type) {
+    this.type = type;
+    this.parent = null;
+  }
+
+  toJSON() {
+    //@ts-ignore
+    return [this.type, this.data];
+  }
+}
+
+class Comment extends Node {
+  constructor(data) {
+    super(COMMENT);
+    this.data = data;
+  }
+
+  toString() {
+    return `<!--${this.data}-->`;
+  }
+}
+
+class DocumentType extends Node {
+  constructor(data) {
+    super(DOCUMENT_TYPE);
+    this.data = data;
+  }
+
+  toString() {
+    return `<!${this.data}>`;
+  }
+}
+
+class Text extends Node {
+  constructor(data) {
+    super(TEXT);
+    this.data = data;
+  }
+
+  toString() {
+    return this.data;
+  }
+}
+
+class Component extends Node {
+  constructor() {
+    super(COMPONENT);
+    this.name = 'template';
+    this.props = props;
+    this.children = children;
+  }
+
+  toJSON() {
+    const json = [COMPONENT];
+    addJSON(this.props, props, json);
+    addJSON(this.children, children, json);
+    return json;
+  }
+
+  toString() {
+    let attrs = '';
+    for (const key in this.props) {
+      const value = this.props[key];
+      if (value != null) {
+        /* c8 ignore start */
+        if (typeof value === 'boolean') {
+          if (value) attrs += ` ${key}`;
+        }
+        else attrs += ` ${key}="${value}"`;
+        /* c8 ignore stop */
+      }
+    }
+    return `<template${attrs}>${this.children.join('')}</template>`;
+  }
+}
+
+class Element extends Node {
+  constructor(name, xml = false) {
+    super(ELEMENT);
+    this.name = name;
+    this.xml = xml;
+    this.props = props;
+    this.children = children;
+  }
+
+  toJSON() {
+    const json = [ELEMENT, this.name, +this.xml];
+    addJSON(this.props, props, json);
+    addJSON(this.children, children, json);
+    return json;
+  }
+
+  toString() {
+    const { xml, name, props, children } = this;
+    const { length } = children;
+    let html = `<${name}`;
+    for (const key in props) {
+      const value = props[key];
+      if (value != null) {
+        if (typeof value === 'boolean') {
+          if (value) html += xml ? ` ${key}=""` : ` ${key}`;
+        }
+        else html += ` ${key}="${value}"`;
+      }
+    }
+    if (length) {
+      html += '>';
+      for (let text = !xml && TEXT_ELEMENTS.has(name), i = 0; i < length; i++)
+        html += text ? children[i].data : children[i];
+      html += `</${name}>`;
+    }
+    else if (xml) html += ' />';
+    else html += VOID_ELEMENTS.has(name) ? '>' : `></${name}>`;
+    return html;
+  }
+}
+
+class Fragment extends Node {
+  constructor() {
+    super(FRAGMENT);
+    this.name = '#fragment';
+    this.children = children;
+  }
+
+  toJSON() {
+    const json = [FRAGMENT];
+    addJSON(this.children, children, json);
+    return json;
+  }
+
+  toString() {
+    return this.children.join('');
+  }
+}
+
+//@ts-check
+
+
+const NUL = '\x00';
+const DOUBLE_QUOTED_NUL = `"${NUL}"`;
+const SINGLE_QUOTED_NUL = `'${NUL}'`;
+const NEXT = /\x00|<[^><\s]+/g;
+const ATTRS = /([^\s/>=]+)(?:=(\x00|(?:(['"])[\s\S]*?\3)))?/g;
+
+// // YAGNI: NUL char in the wild is a shenanigan
+// // usage: template.map(safe).join(NUL).trim()
+// const NUL_RE = /\x00/g;
+// const safe = s => s.replace(NUL_RE, '&#0;');
+
+/** @typedef {import('../dom/ish.js').Node} Node */
+/** @typedef {import('../dom/ish.js').Element} Element */
+/** @typedef {import('../dom/ish.js').Component} Component */
+/** @typedef {(node: import('../dom/ish.js').Node, type: typeof ATTRIBUTE | typeof TEXT | typeof COMMENT | typeof COMPONENT, path: number[], name: string, hint: unknown) => unknown} update */
+/** @typedef {Element | Component} Container */
+
+/** @type {update} */
+const defaultUpdate = (_, type, path, name, hint) => [type, path, name];
+
+/**
+ * @param {Node} node
+ * @returns {number[]}
+ */
+const path = node => {
+  const insideout = [];
+  while (node.parent) {
+    switch (node.type) {
+      /* c8 ignore start */
+      case COMPONENT:
+      // fallthrough
+      /* c8 ignore stop */
+      case ELEMENT: {
+        if (/** @type {Container} */(node).name === 'template') insideout.push(-1);
+        break;
+      }
+    }
+    insideout.push(node.parent.children.indexOf(node));
+    node = node.parent;
+  }
+  return insideout;
+};
+
+/**
+ * @param {Node} node
+ * @param {Set<Node>} ignore
+ * @returns {Node}
+ */
+const parent = (node, ignore) => {
+  do { node = node.parent; } while (ignore.has(node));
+  return node;
+};
+
+var index = ({
+  Comment: Comment$1 = Comment,
+  DocumentType: DocumentType$1 = DocumentType,
+  Text: Text$1 = Text,
+  Fragment: Fragment$1 = Fragment,
+  Element: Element$1 = Element,
+  Component: Component$1 = Component,
+  update = defaultUpdate,
+}) =>
+/**
+ * Parse a template string into a crawable JS literal tree and provide a list of updates.
+ * @param {TemplateStringsArray|string[]} template
+ * @param {unknown[]} holes
+ * @param {boolean} xml
+ * @returns {[Node, unknown[]]}
+ */
+(template, holes, xml) => {
+  if (template.some(chunk => chunk.includes(NUL))) throw errors.invalid_nul(template);
+  const content = template.join(NUL).trim();
+  if (content.replace(/(\S+)=(['"])([\S\s]+?)\2/g, (...a) => /^[^\x00]+\x00|\x00[^\x00]+$/.test(a[3]) ? (xml = a[1]) : a[0]) !== content) throw errors.invalid_attribute(template, xml);
+  const ignore = new Set;
+  const values = [];
+  let node = new Fragment$1, pos = 0, skip = 0, hole = 0, resolvedPath = children;
+  for (const match of content.matchAll(NEXT)) {
+    // already handled via attributes or text content nodes
+    if (0 < skip) {
+      skip--;
+      continue;
+    }
+
+    const chunk = match[0];
+    const index = match.index;
+
+    // prepend previous content, if any
+    if (pos < index)
+      append(node, new Text$1(content.slice(pos, index)));
+
+    // holes
+    if (chunk === NUL) {
+      if (node.name === 'table') {
+        node = append(node, new Element$1('tbody', xml));
+        ignore.add(node);
+      }
+      const comment = append(node, new Comment$1('◦'));
+      values.push(update(comment, COMMENT, path(comment), '', holes[hole++]));
+      pos = index + 1;
+    }
+    // comments or doctype
+    else if (chunk.startsWith('<!')) {
+      const i = content.indexOf('>', index + 2);
+
+      if (i < 0) throw errors.invalid_content(template);
+
+      if (content.slice(i - 2, i + 1) === '-->') {
+        if ((i - index) < 6) throw errors.invalid_comment(template);
+        const data = content.slice(index + 4, i - 2);
+        if (data[0] === '!') append(node, new Comment$1(data.slice(1).replace(/!$/, '')));
+      }
+      else {
+        if (!content.slice(index + 2, i).toLowerCase().startsWith('doctype')) throw errors.invalid_doctype(template, content.slice(index + 2, i));
+        append(node, new DocumentType$1(content.slice(index + 2, i)));
+      }
+      pos = i + 1;
+    }
+    // closing tag </> or </name>
+    else if (chunk.startsWith('</')) {
+      const i = content.indexOf('>', index + 2);
+      if (i < 0) throw errors.invalid_closing(template);
+      if (xml && node.name === 'svg') xml = false;
+      node = /** @type {Container} */(parent(node, ignore));
+      if (!node) throw errors.invalid_layout(template);
+      pos = i + 1;
+    }
+    // opening tag <name> or <name />
+    else {
+      const i = index + chunk.length;
+      const j = content.indexOf('>', i);
+      const name = chunk.slice(1);
+
+      if (j < 0) throw errors.unclosed_element(template, name);
+
+      let tag = name;
+      // <${Component} ... />
+      if (name === NUL) {
+        tag = 'template';
+        node = append(node, new Component$1);
+        resolvedPath = path(node).slice(1);
+        //@ts-ignore
+        values.push(update(node, COMPONENT, resolvedPath, '', holes[hole++]));
+      }
+      // any other element
+      else {
+        if (!xml) {
+          tag = tag.toLowerCase();
+          // patch automatic elements insertion with <table>
+          // or path will fail once live on the DOM
+          if (node.name === 'table' && (tag === 'tr' || tag === 'td')) {
+            node = append(node, new Element$1('tbody', xml));
+            ignore.add(node);
+          }
+          if (node.name === 'tbody' && tag === 'td') {
+            node = append(node, new Element$1('tr', xml));
+            ignore.add(node);
+          }
+        }
+        node = append(node, new Element$1(tag, xml ? tag !== 'svg' : false));
+        resolvedPath = children;
+      }
+
+      // attributes
+      if (i < j) {
+        let dot = false;
+        for (const [_, name, value] of content.slice(i, j).matchAll(ATTRS)) {
+          if (value === NUL || value === DOUBLE_QUOTED_NUL || value === SINGLE_QUOTED_NUL || (dot = name.endsWith(NUL))) {
+            const p = resolvedPath === children ? (resolvedPath = path(node)) : resolvedPath;
+            //@ts-ignore
+            values.push(update(node, ATTRIBUTE, p, dot ? name.slice(0, -1) : name, holes[hole++]));
+            dot = false;
+            skip++;
+          }
+          else prop(node, name, value ? value.slice(1, -1) : true);
+        }
+        resolvedPath = children;
+      }
+
+      pos = j + 1;
+
+      // to handle self-closing tags
+      const closed = 0 < j && content[j - 1] === '/';
+
+      if (xml) {
+        if (closed) {
+          node = node.parent;
+          /* c8 ignore start unable to reproduce, still worth a guard */
+          if (!node) throw errors.invalid_layout(template);
+          /* c8 ignore stop */
+        }
+      }
+      else if (closed || VOID_ELEMENTS.has(tag)) {
+        // void elements are never td or tr
+        node = closed ? parent(node, ignore) : node.parent;
+        
+        /* c8 ignore start unable to reproduce, still worth a guard */
+        if (!node) throw errors.invalid_layout();
+        /* c8 ignore stop */
+      }
+      // <svg> switches to xml mode
+      else if (tag === 'svg') xml = true;
+      // text content / data elements content handling
+      else if (TEXT_ELEMENTS.has(tag)) {
+        const index = content.indexOf(`</${name}>`, pos);
+        if (index < 0) throw errors.unclosed(template, tag);
+        const value = content.slice(pos, index);
+        // interpolation as text
+        if (value.trim() === NUL) {
+          skip++;
+          values.push(update(node, TEXT, path(node), '', holes[hole++]));
+        }
+        else if (value.includes(NUL)) throw errors.text(template, tag, value);
+        else append(node, new Text$1(value));
+        // text elements are never td or tr
+        node = node.parent;
+        /* c8 ignore start unable to reproduce, still worth a guard */
+        if (!node) throw errors.invalid_layout(template);
+        /* c8 ignore stop */
+        pos = index + name.length + 3;
+        // ignore the closing tag regardless of the content
+        skip++;
+        continue;
+      }
+    }
+  }
+
+  if (pos < content.length)
+    append(node, new Text$1(content.slice(pos)));
+
+  /* c8 ignore start */
+  if (hole < holes.length) throw errors.invalid_template(template);
+  /* c8 ignore stop */
+
+  return [node, values];
+};
+
+export { index as default };
diff --git a/dist/prod/cdn.js b/dist/prod/cdn.js
new file mode 100644
index 0000000..70a57ea
--- /dev/null
+++ b/dist/prod/cdn.js
@@ -0,0 +1 @@
+const e=Symbol.for("µhtml"),{render:t,html:o,svg:r,computed:a,signal:l,batch:c,effect:d,untracked:s}=globalThis[e]||(globalThis[e]=await import((({protocol:e,host:t,pathname:o})=>{const r=/[?&](?:dev|debug)(?:=|$)/.test(location.search);let a=o.replace(/\+\S*?$/,"");return a=a.replace(/\/(?:auto|cdn)(?:\/|\.js\S*)$/,"/"),a=a.replace(/\/(?:dist\/)?(?:dev|prod)\//,"/"),`${e}//${t}${a}dist/${r?"dev":"prod"}/dom.js`})(new URL(import.meta.url))));export{c as batch,a as computed,d as effect,o as html,t as render,l as signal,r as svg,s as untracked};
diff --git a/dist/prod/creator.js b/dist/prod/creator.js
new file mode 100644
index 0000000..8b1d1df
--- /dev/null
+++ b/dist/prod/creator.js
@@ -0,0 +1 @@
+var e=(e=globalThis.document)=>{let t,n=e.createElement("template");return(r,a=!1)=>{if(a)return t||(t=e.createRange(),t.selectNodeContents(e.createElementNS("http://www.w3.org/2000/svg","svg"))),t.createContextualFragment(r);n.innerHTML=r;const o=n.content;return n=n.cloneNode(!1),o}};export{e as default};
diff --git a/dist/prod/ish.js b/dist/prod/ish.js
new file mode 100644
index 0000000..c5b6fac
--- /dev/null
+++ b/dist/prod/ish.js
@@ -0,0 +1 @@
+const{isArray:t}=Array,{assign:e,freeze:s}=Object,r=1,n=2,i=3,c=8,o=10,a=11,h=42,p=new Set(["plaintext","script","style","textarea","title","xmp"]),l=new Set(["area","base","br","col","embed","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]),u=s({}),d=s([]),m=(t,e)=>(t.children===d&&(t.children=[]),t.children.push(e),e.parent=t,e),x=(t,e,s)=>{t.props===u&&(t.props={}),t.props[e]=s},$=(t,e,s)=>{t!==e&&s.push(t)},g=(t,e)=>{t.children=e.map(w,t)},S=(s,r,n)=>{switch(r.length){case n:g(s,r[n-1]);case n-1:{const i=r[n-2];t(i)?g(s,i):s.props=e({},i)}}return s};function w(t){const e=f(t);return e.parent=this,e}const f=t=>{switch(t[0]){case 8:return new b(t[1]);case 10:return new O(t[1]);case 3:return new J(t[1]);case 42:return S(new N,t,3);case 1:return S(new j(t[1],!!t[2]),t,5);case 11:{const e=new k;return 1<t.length&&(e.children=t[1].map(w,e)),e}}};class y{constructor(t){this.type=t,this.parent=null}toJSON(){return[this.type,this.data]}}class b extends y{constructor(t){super(8),this.data=t}toString(){return`\x3c!--${this.data}--\x3e`}}class O extends y{constructor(t){super(10),this.data=t}toString(){return`<!${this.data}>`}}class J extends y{constructor(t){super(3),this.data=t}toString(){return this.data}}class N extends y{constructor(){super(42),this.name="template",this.props=u,this.children=d}toJSON(){const t=[42];return $(this.props,u,t),$(this.children,d,t),t}toString(){let t="";for(const e in this.props){const s=this.props[e];null!=s&&("boolean"==typeof s?s&&(t+=` ${e}`):t+=` ${e}="${s}"`)}return`<template${t}>${this.children.join("")}</template>`}}class j extends y{constructor(t,e=!1){super(1),this.name=t,this.xml=e,this.props=u,this.children=d}toJSON(){const t=[1,this.name,+this.xml];return $(this.props,u,t),$(this.children,d,t),t}toString(){const{xml:t,name:e,props:s,children:r}=this,{length:n}=r;let i=`<${e}`;for(const e in s){const r=s[e];null!=r&&("boolean"==typeof r?r&&(i+=t?` ${e}=""`:` ${e}`):i+=` ${e}="${r}"`)}if(n){i+=">";for(let s=!t&&p.has(e),c=0;c<n;c++)i+=s?r[c].data:r[c];i+=`</${e}>`}else i+=t?" />":l.has(e)?">":`></${e}>`;return i}}class k extends y{constructor(){super(11),this.name="#fragment",this.children=d}toJSON(){const t=[11];return $(this.children,d,t),t}toString(){return this.children.join("")}}export{n as ATTRIBUTE,c as COMMENT,h as COMPONENT,b as Comment,N as Component,o as DOCUMENT_TYPE,O as DocumentType,r as ELEMENT,j as Element,a as FRAGMENT,k as Fragment,y as Node,i as TEXT,p as TEXT_ELEMENTS,J as Text,l as VOID_ELEMENTS,m as append,d as children,f as fromJSON,x as prop,u as props};
diff --git a/dist/prod/json.js b/dist/prod/json.js
new file mode 100644
index 0000000..809dc67
--- /dev/null
+++ b/dist/prod/json.js
@@ -0,0 +1 @@
+const{isArray:e}=Array,{assign:t,freeze:n,keys:s}=Object,r=42,c=new Set(["plaintext","script","style","textarea","title","xmp"]),o=new Set(["area","base","br","col","embed","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]),i=n({}),a=n([]),l=(e,t)=>(e.children===a&&(e.children=[]),e.children.push(t),t.parent=e,t),p=(e,t,n)=>{e.props===i&&(e.props={}),e.props[t]=n},h=(e,t,n)=>{e!==t&&n.push(e)},u=(e,t)=>{e.children=t.map(m,e)},d=(n,s,r)=>{switch(s.length){case r:u(n,s[r-1]);case r-1:{const c=s[r-2];e(c)?u(n,c):n.props=t({},c)}}return n};function m(e){const t=f(e);return t.parent=this,t}const f=e=>{switch(e[0]){case 8:return new w(e[1]);case 10:return new x(e[1]);case 3:return new $(e[1]);case r:return d(new y,e,3);case 1:return d(new S(e[1],!!e[2]),e,5);case 11:{const t=new b;return 1<e.length&&(t.children=e[1].map(m,t)),t}}};class g{constructor(e){this.type=e,this.parent=null}toJSON(){return[this.type,this.data]}}class w extends g{constructor(e){super(8),this.data=e}toString(){return`\x3c!--${this.data}--\x3e`}}class x extends g{constructor(e){super(10),this.data=e}toString(){return`<!${this.data}>`}}class $ extends g{constructor(e){super(3),this.data=e}toString(){return this.data}}class y extends g{constructor(){super(r),this.name="template",this.props=i,this.children=a}toJSON(){const e=[r];return h(this.props,i,e),h(this.children,a,e),e}toString(){let e="";for(const t in this.props){const n=this.props[t];null!=n&&("boolean"==typeof n?n&&(e+=` ${t}`):e+=` ${t}="${n}"`)}return`<template${e}>${this.children.join("")}</template>`}}class S extends g{constructor(e,t=!1){super(1),this.name=e,this.xml=t,this.props=i,this.children=a}toJSON(){const e=[1,this.name,+this.xml];return h(this.props,i,e),h(this.children,a,e),e}toString(){const{xml:e,name:t,props:n,children:s}=this,{length:r}=s;let i=`<${t}`;for(const t in n){const s=n[t];null!=s&&("boolean"==typeof s?s&&(i+=e?` ${t}=""`:` ${t}`):i+=` ${t}="${s}"`)}if(r){i+=">";for(let n=!e&&c.has(t),o=0;o<r;o++)i+=n?s[o].data:s[o];i+=`</${t}>`}else i+=e?" />":o.has(t)?">":`></${t}>`;return i}}class b extends g{constructor(){super(11),this.name="#fragment",this.children=a}toJSON(){const e=[11];return h(this.children,a,e),e}toString(){return this.children.join("")}}const O="\0",k=`"${O}"`,j=`'${O}'`,v=/\x00|<[^><\s]+/g,C=/([^\s/>=]+)(?:=(\x00|(?:(['"])[\s\S]*?\3)))?/g,J=(e,t,n,s,r)=>[t,n,s],N=e=>{const t=[];for(;e.parent;){switch(e.type){case r:case 1:"template"===e.name&&t.push(-1)}t.push(e.parent.children.indexOf(e)),e=e.parent}return t},A=(e,t)=>{do{e=e.parent}while(t.has(e));return e};const T=(e,t)=>t<0?e:e.children[t];var W=(e,t)=>t.reduceRight(T,e);const D=e=>(e.props===i&&(e.props={}),e.props),E=(e,t,n)=>{null==n?delete e[t]:e[t]=n},F=(e,t)=>{const n=D(e);for(const e in t){const s="role"===e?e:`aria-${e}`,r=t[e];E(n,s,r)}0===s(n).length&&(e.props=n)},z=e=>(t,n)=>{const r=D(t);E(r,e,n),0===s(r).length&&(t.props=r)},L=(t,n)=>{const{children:s}=t.parent,r=s.indexOf(t);if(e(n)){const e=new b;e.children=n,n=e}else n instanceof g||(n=new $(null==n?"":n));s[r]=n},M=(e,t)=>[e,t],R=(e,t)=>{const n=D(e);for(const e in t){const s=`data-${e}`,r=t[e];E(n,s,r)}0===s(n).length&&(e.props=n)},q=e=>(t,n)=>{const r=D(t);E(r,e,n),0===s(r).length&&(t.props=r)},B=(e,t)=>{e.children=null==t?a:[new $(t)]},G=e=>(t,n)=>{const r=D(t);n?r[e]=!!n:(delete r[e],0===s(r).length&&(t.props=r))},H=(({Comment:e=w,DocumentType:t=x,Text:n=$,Fragment:s=b,Element:i=S,Component:h=y,update:u=J})=>(d,m,f)=>{const g=d.join(O).trim(),w=new Set,x=[];let $=new s,y=0,S=0,b=0,J=a;for(const s of g.matchAll(v)){if(0<S){S--;continue}const d=s[0],v=s.index;if(y<v&&l($,new n(g.slice(y,v))),d===O){"table"===$.name&&($=l($,new i("tbody",f)),w.add($));const t=l($,new e("◦"));x.push(u(t,8,N(t),"",m[b++])),y=v+1}else if(d.startsWith("<!")){const n=g.indexOf(">",v+2);if("--\x3e"===g.slice(n-2,n+1)){const t=g.slice(v+4,n-2);"!"===t[0]&&l($,new e(t.slice(1).replace(/!$/,"")))}else l($,new t(g.slice(v+2,n)));y=n+1}else if(d.startsWith("</")){const e=g.indexOf(">",v+2);f&&"svg"===$.name&&(f=!1),$=A($,w),y=e+1}else{const e=v+d.length,t=g.indexOf(">",e),s=d.slice(1);let T=s;if(s===O?(T="template",$=l($,new h),J=N($).slice(1),x.push(u($,r,J,"",m[b++]))):(f||(T=T.toLowerCase(),"table"!==$.name||"tr"!==T&&"td"!==T||($=l($,new i("tbody",f)),w.add($)),"tbody"===$.name&&"td"===T&&($=l($,new i("tr",f)),w.add($))),$=l($,new i(T,!!f&&"svg"!==T)),J=a),e<t){let n=!1;for(const[s,r,c]of g.slice(e,t).matchAll(C))if(c===O||c===k||c===j||(n=r.endsWith(O))){const e=J===a?J=N($):J;x.push(u($,2,e,n?r.slice(0,-1):r,m[b++])),n=!1,S++}else p($,r,!c||c.slice(1,-1));J=a}y=t+1;const W=0<t&&"/"===g[t-1];if(f)W&&($=$.parent);else if(W||o.has(T))$=W?A($,w):$.parent;else if("svg"===T)f=!0;else if(c.has(T)){const e=g.indexOf(`</${s}>`,y),t=g.slice(y,e);t.trim()===O?(S++,x.push(u($,3,N($),"",m[b++]))):l($,new n(t)),$=$.parent,y=e+s.length+3,S++;continue}}}return y<g.length&&l($,new n(g.slice(y))),[$,x]})({Comment:w,DocumentType:x,Text:$,Fragment:b,Element:S,Component:y,update:(e,t,n,s)=>{switch(t){case r:return[n,M,3];case 8:return[n,L,2];case 2:switch(s.at(0)){case"@":return[n,(c=Symbol(s),(e,t)=>{const n=D(e);null==t?delete n[c]:n[c]=t}),7];case"?":return[n,G(s.slice(1)),10];case".":return"..."===s?[n,(e.type,(e,t)=>{}),6]:[n,q(s.slice(1)),5];case"a":if("aria"===s)return[n,F,0];case"d":if("data"===s)return[n,R,4];case"k":if("key"===s)return[n,Object,8];default:return[n,z(s),1]}case 3:return[n,B,9]}var c}}),{parse:I,stringify:K}=JSON,P=e=>{const n=new WeakMap;return(s,...r)=>{const[c,o]=n.get(s)||((t,s)=>{const r=H(t,s,e);return r[0]=I(K(r[0])),n.set(t,r),r})(s,r),i=f(c),a=r.length;if(a===o.length){const e=[];for(let t,n,s=0;s<a;s++){const[c,a,l]=o[s],p=r[s];n!==c&&(t=W(i,c),n=c),8!==l&&(3===l?e.push(a(t,p)):a(t,p))}for(const[n,s]of e){const e=t({children:n.children},n.props);L(n,s(e))}}return i}},Q=P(!1),U=P(!0);export{Q as html,U as svg};
diff --git a/dist/prod/parser.js b/dist/prod/parser.js
new file mode 100644
index 0000000..b6bda4c
--- /dev/null
+++ b/dist/prod/parser.js
@@ -0,0 +1 @@
+const{freeze:t}=Object,e=new Set(["plaintext","script","style","textarea","title","xmp"]),s=new Set(["area","base","br","col","embed","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]),n=t({}),r=t([]),i=(t,e)=>(t.children===r&&(t.children=[]),t.children.push(e),e.parent=t,e),o=(t,e,s)=>{t.props===n&&(t.props={}),t.props[e]=s},c=(t,e,s)=>{t!==e&&s.push(t)};class a{constructor(t){this.type=t,this.parent=null}toJSON(){return[this.type,this.data]}}class l extends a{constructor(t){super(8),this.data=t}toString(){return`\x3c!--${this.data}--\x3e`}}class h extends a{constructor(t){super(10),this.data=t}toString(){return`<!${this.data}>`}}class p extends a{constructor(t){super(3),this.data=t}toString(){return this.data}}class d extends a{constructor(){super(42),this.name="template",this.props=n,this.children=r}toJSON(){const t=[42];return c(this.props,n,t),c(this.children,r,t),t}toString(){let t="";for(const e in this.props){const s=this.props[e];null!=s&&("boolean"==typeof s?s&&(t+=` ${e}`):t+=` ${e}="${s}"`)}return`<template${t}>${this.children.join("")}</template>`}}class u extends a{constructor(t,e=!1){super(1),this.name=t,this.xml=e,this.props=n,this.children=r}toJSON(){const t=[1,this.name,+this.xml];return c(this.props,n,t),c(this.children,r,t),t}toString(){const{xml:t,name:n,props:r,children:i}=this,{length:o}=i;let c=`<${n}`;for(const e in r){const s=r[e];null!=s&&("boolean"==typeof s?s&&(c+=t?` ${e}=""`:` ${e}`):c+=` ${e}="${s}"`)}if(o){c+=">";for(let s=!t&&e.has(n),r=0;r<o;r++)c+=s?i[r].data:i[r];c+=`</${n}>`}else c+=t?" />":s.has(n)?">":`></${n}>`;return c}}class m extends a{constructor(){super(11),this.name="#fragment",this.children=r}toJSON(){const t=[11];return c(this.children,r,t),t}toString(){return this.children.join("")}}const f="\0",x=`"${f}"`,g=`'${f}'`,w=/\x00|<[^><\s]+/g,$=/([^\s/>=]+)(?:=(\x00|(?:(['"])[\s\S]*?\3)))?/g,S=(t,e,s,n,r)=>[e,s,n],b=t=>{const e=[];for(;t.parent;){switch(t.type){case 42:case 1:"template"===t.name&&e.push(-1)}e.push(t.parent.children.indexOf(t)),t=t.parent}return e},y=(t,e)=>{do{t=t.parent}while(e.has(t));return t};var O=({Comment:t=l,DocumentType:n=h,Text:c=p,Fragment:a=m,Element:O=u,Component:j=d,update:v=S})=>(l,h,p)=>{const d=l.join(f).trim(),u=new Set,m=[];let S=new a,J=0,N=0,k=0,C=r;for(const a of d.matchAll(w)){if(0<N){N--;continue}const l=a[0],w=a.index;if(J<w&&i(S,new c(d.slice(J,w))),l===f){"table"===S.name&&(S=i(S,new O("tbody",p)),u.add(S));const e=i(S,new t("◦"));m.push(v(e,8,b(e),"",h[k++])),J=w+1}else if(l.startsWith("<!")){const e=d.indexOf(">",w+2);if("--\x3e"===d.slice(e-2,e+1)){const s=d.slice(w+4,e-2);"!"===s[0]&&i(S,new t(s.slice(1).replace(/!$/,"")))}else i(S,new n(d.slice(w+2,e)));J=e+1}else if(l.startsWith("</")){const t=d.indexOf(">",w+2);p&&"svg"===S.name&&(p=!1),S=y(S,u),J=t+1}else{const t=w+l.length,n=d.indexOf(">",t),a=l.slice(1);let W=a;if(a===f?(W="template",S=i(S,new j),C=b(S).slice(1),m.push(v(S,42,C,"",h[k++]))):(p||(W=W.toLowerCase(),"table"!==S.name||"tr"!==W&&"td"!==W||(S=i(S,new O("tbody",p)),u.add(S)),"tbody"===S.name&&"td"===W&&(S=i(S,new O("tr",p)),u.add(S))),S=i(S,new O(W,!!p&&"svg"!==W)),C=r),t<n){let e=!1;for(const[s,i,c]of d.slice(t,n).matchAll($))if(c===f||c===x||c===g||(e=i.endsWith(f))){const t=C===r?C=b(S):C;m.push(v(S,2,t,e?i.slice(0,-1):i,h[k++])),e=!1,N++}else o(S,i,!c||c.slice(1,-1));C=r}J=n+1;const A=0<n&&"/"===d[n-1];if(p)A&&(S=S.parent);else if(A||s.has(W))S=A?y(S,u):S.parent;else if("svg"===W)p=!0;else if(e.has(W)){const t=d.indexOf(`</${a}>`,J),e=d.slice(J,t);e.trim()===f?(N++,m.push(v(S,3,b(S),"",h[k++]))):i(S,new c(e)),S=S.parent,J=t+a.length+3,N++;continue}}}return J<d.length&&i(S,new c(d.slice(J))),[S,m]};export{O as default};
diff --git a/es.js b/es.js
deleted file mode 100644
index 045a52f..0000000
--- a/es.js
+++ /dev/null
@@ -1 +0,0 @@
-self.uhtml=function(e){"use strict";var t=e=>({get:t=>e.get(t),set:(t,n)=>(e.set(t,n),n)});const n=/([^\s\\>"'=]+)\s*=\s*(['"]?)$/,r=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,s=/<[a-z][^>]+$/i,l=/>[^<>]*$/,o=/<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/>)/gi,i=/\s+$/,a=(e,t)=>0<t--&&(s.test(e[t])||!l.test(e[t])&&a(e,t)),c=(e,t,n)=>r.test(t)?e:`<${t}${n.replace(i,"")}></${t}>`;const{isArray:u}=Array,{indexOf:d,slice:p}=[],f=(e,t)=>111===e.nodeType?1/t<0?t?(({firstChild:e,lastChild:t})=>{const n=document.createRange();return n.setStartAfter(e),n.setEndAfter(t),n.deleteContents(),e})(e):e.lastChild:t?e.valueOf():e.firstChild:e;const h=(e,t)=>{let n,r=t.slice(2);return!(t in e)&&t.toLowerCase()in e&&(r=r.toLowerCase()),t=>{const s=u(t)?t:[t,!1];n!==s[0]&&(n&&e.removeEventListener(r,n,s[1]),(n=s[0])&&e.addEventListener(r,n,s[1]))}},m=({childNodes:e},t)=>e[t],g=(e,t,n)=>((e,t,n,r,s)=>{const l=n.length;let o=t.length,i=l,a=0,c=0,u=null;for(;a<o||c<i;)if(o===a){const t=i<l?c?r(n[c-1],-0).nextSibling:r(n[i-c],0):s;for(;c<i;)e.insertBefore(r(n[c++],1),t)}else if(i===c)for(;a<o;)u&&u.has(t[a])||e.removeChild(r(t[a],-1)),a++;else if(t[a]===n[c])a++,c++;else if(t[o-1]===n[i-1])o--,i--;else if(t[a]===n[i-1]&&n[c]===t[o-1]){const s=r(t[--o],-1).nextSibling;e.insertBefore(r(n[c++],1),r(t[a++],-1).nextSibling),e.insertBefore(r(n[--i],1),s),t[o]=n[i]}else{if(!u){u=new Map;let e=c;for(;e<i;)u.set(n[e],e++)}if(u.has(t[a])){const s=u.get(t[a]);if(c<s&&s<i){let l=a,d=1;for(;++l<o&&l<i&&u.get(t[l])===s+d;)d++;if(d>s-c){const l=r(t[a],0);for(;c<s;)e.insertBefore(r(n[c++],1),l)}else e.replaceChild(r(n[c++],1),r(t[a++],-1))}else a++}else e.removeChild(r(t[a++],-1))}return n})(e.parentNode,t,n,f,e),v=(e,t)=>{switch(t[0]){case"?":return((e,t,n)=>r=>{n!==!!r&&((n=!!r)?e.setAttribute(t,""):e.removeAttribute(t))})(e,t.slice(1),!1);case".":return((e,t)=>"dataset"===t?(({dataset:e})=>t=>{for(const n in t){const r=t[n];null==r?delete e[n]:e[n]=r}})(e):n=>{e[t]=n})(e,t.slice(1));case"@":return h(e,"on"+t.slice(1));case"o":if("n"===t[1])return h(e,t)}switch(t){case"ref":return(e=>{let t;return n=>{t!==n&&(t=n,"function"==typeof n?n(e):n.current=e)}})(e);case"aria":return(e=>t=>{for(const n in t){const r="role"===n?n:`aria-${n}`,s=t[n];null==s?e.removeAttribute(r):e.setAttribute(r,s)}})(e)}return((e,t)=>{let n,r=!0;const s=document.createAttributeNS(null,t);return t=>{n!==t&&(n=t,null==n?r||(e.removeAttributeNode(s),r=!0):(s.value=t,r&&(e.setAttributeNodeNS(s),r=!1)))}})(e,t)};function w(e){const{type:t,path:n}=e,r=n.reduceRight(m,this);return"node"===t?(e=>{let t,n,r=[];const s=l=>{switch(typeof l){case"string":case"number":case"boolean":t!==l&&(t=l,n||(n=document.createTextNode("")),n.data=l,r=g(e,r,[n]));break;case"object":case"undefined":if(null==l){t!=l&&(t=l,r=g(e,r,[]));break}if(u(l)){t=l,0===l.length?r=g(e,r,[]):"object"==typeof l[0]?r=g(e,r,l):s(String(l));break}t!==l&&"ELEMENT_NODE"in l&&(t=l,r=g(e,r,11===l.nodeType?p.call(l.childNodes):[l]));break;case"function":s(l(e))}};return s})(r):"attr"===t?v(r,e.name):(e=>{let t;return n=>{t!=n&&(t=n,e.textContent=null==n?"":n)}})(r)}const y=e=>document.createElementNS("http://www.w3.org/1999/xhtml",e),b=(e,t)=>("svg"===t?$:N)(e),N=e=>{const t=y("template");return t.innerHTML=e,t.content},$=e=>{const{content:t}=y("template"),n=y("div");n.innerHTML='<svg xmlns="http://www.w3.org/2000/svg">'+e+"</svg>";const{childNodes:r}=n.firstChild;let{length:s}=r;for(;s--;)t.appendChild(r[0]);return t},x=1!=document.importNode.length,C=x?(e,t,n)=>document.importNode(b(e,t),!0):b,k=x?e=>document.createTreeWalker(e,129,null,!1):e=>document.createTreeWalker(e,129),A=e=>{const t=[];let{parentNode:n}=e;for(;n;)t.push(d.call(n.childNodes,e)),n=(e=n).parentNode;return t},E="isµ",T=t(new WeakMap),L=/^(?:plaintext|script|style|textarea|title|xmp)$/i,M=(e,t)=>{const r=((e,t,r)=>{const s=[],{length:l}=e;for(let r=1;r<l;r++){const l=e[r-1];s.push(n.test(l)&&a(e,r)?l.replace(n,((e,n,s)=>`${t}${r-1}=${s||'"'}${n}${s?"":'"'}`)):`${l}\x3c!--${t}${r-1}--\x3e`)}s.push(e[l-1]);const i=s.join("").trim();return r?i:i.replace(o,c)})(t,E,"svg"===e),s=C(r,e),l=k(s),i=[],u=t.length-1;let d=0,p=`isµ${d}`;for(;d<u;){const e=l.nextNode();if(!e)throw`bad template: ${r}`;if(8===e.nodeType)e.data===p&&(i.push({type:"node",path:A(e)}),p="isµ"+ ++d);else{for(;e.hasAttribute(p);)i.push({type:"attr",path:A(e),name:e.getAttribute(p)}),e.removeAttribute(p),p="isµ"+ ++d;L.test(e.tagName)&&e.textContent.trim()===`\x3c!--${p}--\x3e`&&(e.textContent="",i.push({type:"text",path:A(e)}),p="isµ"+ ++d)}}return{content:s,nodes:i}},O=(e,t)=>{const{content:n,nodes:r}=T.get(t)||T.set(t,M(e,t)),s=document.importNode(n,!0);return{content:s,updates:r.map(w,s)}},S=(e,{type:t,template:n,values:r})=>{const{length:s}=r;W(e,r,s);let{entry:l}=e;l&&l.template===n&&l.type===t||(e.entry=l=((e,t)=>{const{content:n,updates:r}=O(e,t);return{type:e,template:t,content:n,updates:r,wire:null}})(t,n));const{content:o,updates:i,wire:a}=l;for(let e=0;e<s;e++)i[e](r[e]);return a||(l.wire=(e=>{const{childNodes:t}=e,{length:n}=t;if(n<2)return n?t[0]:e;const r=p.call(t,0);return{ELEMENT_NODE:1,nodeType:111,firstChild:r[0],lastChild:r[n-1],valueOf(){if(t.length!==n){let t=0;for(;t<n;)e.appendChild(r[t++])}return e}}})(o))},W=({stack:e},t,n)=>{for(let r=0;r<n;r++){const n=t[r];n instanceof j?t[r]=S(e[r]||(e[r]={stack:[],entry:null,wire:null}),n):u(n)?W(e[r]||(e[r]={stack:[],entry:null,wire:null}),n,n.length):e[r]=null}n<e.length&&e.splice(n)};function j(e,t,n){this.type=e,this.template=t,this.values=n}const{create:B,defineProperties:z}=Object,H=e=>{const n=t(new WeakMap);return z(((t,...n)=>new j(e,t,n)),{for:{value(t,r){const s=n.get(t)||n.set(t,B(null));return s[r]||(s[r]=(t=>(n,...r)=>S(t,{type:e,template:n,values:r}))({stack:[],entry:null,wire:null}))}},node:{value:(t,...n)=>S({stack:[],entry:null,wire:null},{type:e,template:t,values:n}).valueOf()}})},_=t(new WeakMap),D=H("html"),R=H("svg");return e.Hole=j,e.html=D,e.render=(e,t)=>{const n="function"==typeof t?t():t,r=_.get(e)||_.set(e,{stack:[],entry:null,wire:null}),s=n instanceof j?S(r,n):n;return s!==r.wire&&(r.wire=s,e.textContent="",e.appendChild(s.valueOf())),e},e.svg=R,e}({});
diff --git a/esm/async.js b/esm/async.js
deleted file mode 100644
index 10a14dc..0000000
--- a/esm/async.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import asyncTag from 'async-tag';
-import umap from 'umap';
-
-import {render as $render, html as $html, svg as $svg} from './index.js';
-
-const {defineProperties} = Object;
-
-const tag = original => {
-  const wrap = umap(new WeakMap);
-  return defineProperties(
-    asyncTag(original),
-    {
-      for: {
-        value(ref, id) {
-          const tag = original.for(ref, id);
-          return wrap.get(tag) || wrap.set(tag, asyncTag(tag));
-        }
-      },
-      node: {
-        value: asyncTag(original.node)
-      }
-    }
-  );
-};
-
-export const html = tag($html);
-export const svg = tag($svg);
-
-export const render = (where, what) => {
-  const hole = typeof what === 'function' ? what() : what;
-  return Promise.resolve(hole).then(what => $render(where, what));
-};
-
-export {Hole} from './index.js';
diff --git a/esm/handlers.js b/esm/handlers.js
deleted file mode 100644
index b429fff..0000000
--- a/esm/handlers.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import {isArray, slice} from 'uarray';
-import udomdiff from 'udomdiff';
-import {aria, attribute, boolean, event, ref, setter, text} from 'uhandlers';
-import {diffable} from 'uwire';
-
-// from a generic path, retrieves the exact targeted node
-const reducePath = ({childNodes}, i) => childNodes[i];
-
-// this helper avoid code bloat around handleAnything() callback
-const diff = (comment, oldNodes, newNodes) => udomdiff(
-  comment.parentNode,
-  // TODO: there is a possible edge case where a node has been
-  //       removed manually, or it was a keyed one, attached
-  //       to a shared reference between renders.
-  //       In this case udomdiff might fail at removing such node
-  //       as its parent won't be the expected one.
-  //       The best way to avoid this issue is to filter oldNodes
-  //       in search of those not live, or not in the current parent
-  //       anymore, but this would require both a change to uwire,
-  //       exposing a parentNode from the firstChild, as example,
-  //       but also a filter per each diff that should exclude nodes
-  //       that are not in there, penalizing performance quite a lot.
-  //       As this has been also a potential issue with domdiff,
-  //       and both lighterhtml and hyperHTML might fail with this
-  //       very specific edge case, I might as well document this possible
-  //       "diffing shenanigan" and call it a day.
-  oldNodes,
-  newNodes,
-  diffable,
-  comment
-);
-
-// if an interpolation represents a comment, the whole
-// diffing will be related to such comment.
-// This helper is in charge of understanding how the new
-// content for such interpolation/hole should be updated
-const handleAnything = comment => {
-  let oldValue, text, nodes = [];
-  const anyContent = newValue => {
-    switch (typeof newValue) {
-      // primitives are handled as text content
-      case 'string':
-      case 'number':
-      case 'boolean':
-        if (oldValue !== newValue) {
-          oldValue = newValue;
-          if (!text)
-            text = document.createTextNode('');
-          text.data = newValue;
-          nodes = diff(comment, nodes, [text]);
-        }
-        break;
-      // null, and undefined are used to cleanup previous content
-      case 'object':
-      case 'undefined':
-        if (newValue == null) {
-          if (oldValue != newValue) {
-            oldValue = newValue;
-            nodes = diff(comment, nodes, []);
-          }
-          break;
-        }
-        // arrays and nodes have a special treatment
-        if (isArray(newValue)) {
-          oldValue = newValue;
-          // arrays can be used to cleanup, if empty
-          if (newValue.length === 0)
-            nodes = diff(comment, nodes, []);
-          // or diffed, if these contains nodes or "wires"
-          else if (typeof newValue[0] === 'object')
-            nodes = diff(comment, nodes, newValue);
-          // in all other cases the content is stringified as is
-          else
-            anyContent(String(newValue));
-          break;
-        }
-        // if the new value is a DOM node, or a wire, and it's
-        // different from the one already live, then it's diffed.
-        // if the node is a fragment, it's appended once via its childNodes
-        // There is no `else` here, meaning if the content
-        // is not expected one, nothing happens, as easy as that.
-        if (oldValue !== newValue && 'ELEMENT_NODE' in newValue) {
-          oldValue = newValue;
-          nodes = diff(
-            comment,
-            nodes,
-            newValue.nodeType === 11 ?
-              slice.call(newValue.childNodes) :
-              [newValue]
-          );
-        }
-        break;
-      case 'function':
-        anyContent(newValue(comment));
-        break;
-    }
-  };
-  return anyContent;
-};
-
-// attributes can be:
-//  * ref=${...}      for hooks and other purposes
-//  * aria=${...}     for aria attributes
-//  * ?boolean=${...} for boolean attributes
-//  * .dataset=${...} for dataset related attributes
-//  * .setter=${...}  for Custom Elements setters or nodes with setters
-//                    such as buttons, details, options, select, etc
-//  * @event=${...}   to explicitly handle event listeners
-//  * onevent=${...}  to automatically handle event listeners
-//  * generic=${...}  to handle an attribute just like an attribute
-const handleAttribute = (node, name/*, svg*/) => {
-  switch (name[0]) {
-    case '?': return boolean(node, name.slice(1), false);
-    case '.': return setter(node, name.slice(1));
-    case '@': return event(node, 'on' + name.slice(1));
-    case 'o': if (name[1] === 'n') return event(node, name);
-  }
-
-  switch (name) {
-    case 'ref': return ref(node);
-    case 'aria': return aria(node);
-  }
-
-  return attribute(node, name/*, svg*/);
-};
-
-// each mapped update carries the update type and its path
-// the type is either node, attribute, or text, while
-// the path is how to retrieve the related node to update.
-// In the attribute case, the attribute name is also carried along.
-export function handlers(options) {
-  const {type, path} = options;
-  const node = path.reduceRight(reducePath, this);
-  return type === 'node' ?
-    handleAnything(node) :
-    (type === 'attr' ?
-      handleAttribute(node, options.name/*, options.svg*/) :
-      text(node));
-};
diff --git a/esm/index.js b/esm/index.js
deleted file mode 100644
index e7ed492..0000000
--- a/esm/index.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import umap from 'umap';
-import {Hole, createCache, unroll} from './rabbit.js';
-
-const {create, defineProperties} = Object;
-
-// both `html` and `svg` template literal tags are polluted
-// with a `for(ref[, id])` and a `node` tag too
-const tag = type => {
-  // both `html` and `svg` tags have their own cache
-  const keyed = umap(new WeakMap);
-  // keyed operations always re-use the same cache and unroll
-  // the template and its interpolations right away
-  const fixed = cache => (template, ...values) => unroll(
-    cache,
-    {type, template, values}
-  );
-  return defineProperties(
-    // non keyed operations are recognized as instance of Hole
-    // during the "unroll", recursively resolved and updated
-    (template, ...values) => new Hole(type, template, values),
-    {
-      for: {
-        // keyed operations need a reference object, usually the parent node
-        // which is showing keyed results, and optionally a unique id per each
-        // related node, handy with JSON results and mutable list of objects
-        // that usually carry a unique identifier
-        value(ref, id) {
-          const memo = keyed.get(ref) || keyed.set(ref, create(null));
-          return memo[id] || (memo[id] = fixed(createCache()));
-        }
-      },
-      node: {
-        // it is possible to create one-off content out of the box via node tag
-        // this might return the single created node, or a fragment with all
-        // nodes present at the root level and, of course, their child nodes
-        value: (template, ...values) => unroll(
-          createCache(),
-          {type, template, values}
-        ).valueOf()
-      }
-    }
-  );
-};
-
-// each rendered node gets its own cache
-const cache = umap(new WeakMap);
-
-// rendering means understanding what `html` or `svg` tags returned
-// and it relates a specific node to its own unique cache.
-// Each time the content to render changes, the node is cleaned up
-// and the new new content is appended, and if such content is a Hole
-// then it's "unrolled" to resolve all its inner nodes.
-const render = (where, what) => {
-  const hole = typeof what === 'function' ? what() : what;
-  const info = cache.get(where) || cache.set(where, createCache());
-  const wire = hole instanceof Hole ? unroll(info, hole) : hole;
-  if (wire !== info.wire) {
-    info.wire = wire;
-    where.textContent = '';
-    // valueOf() simply returns the node itself, but in case it was a "wire"
-    // it will eventually re-append all nodes to its fragment so that such
-    // fragment can be re-appended many times in a meaningful way
-    // (wires are basically persistent fragments facades with special behavior)
-    where.appendChild(wire.valueOf());
-  }
-  return where;
-};
-
-const html = tag('html');
-const svg = tag('svg');
-
-export {Hole, render, html, svg};
diff --git a/esm/init.js b/esm/init.js
deleted file mode 100644
index 28abf32..0000000
--- a/esm/init.js
+++ /dev/null
@@ -1,666 +0,0 @@
-import umap from 'umap';
-import instrument from 'uparser';
-import {indexOf, isArray, slice} from 'uarray';
-import udomdiff from 'udomdiff';
-
-export default ({document}) => {
-  /**start**/
-/*! (c) Andrea Giammarchi - ISC */
-var createContent = (function (document) {'use strict';
-  var FRAGMENT = 'fragment';
-  var TEMPLATE = 'template';
-  var HAS_CONTENT = 'content' in create(TEMPLATE);
-
-  var createHTML = HAS_CONTENT ?
-    function (html) {
-      var template = create(TEMPLATE);
-      template.innerHTML = html;
-      return template.content;
-    } :
-    function (html) {
-      var content = create(FRAGMENT);
-      var template = create(TEMPLATE);
-      var childNodes = null;
-      if (/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(html)) {
-        var selector = RegExp.$1;
-        template.innerHTML = '<table>' + html + '</table>';
-        childNodes = template.querySelectorAll(selector);
-      } else {
-        template.innerHTML = html;
-        childNodes = template.childNodes;
-      }
-      append(content, childNodes);
-      return content;
-    };
-
-  return function createContent(markup, type) {
-    return (type === 'svg' ? createSVG : createHTML)(markup);
-  };
-
-  function append(root, childNodes) {
-    var length = childNodes.length;
-    while (length--)
-      root.appendChild(childNodes[0]);
-  }
-
-  function create(element) {
-    return element === FRAGMENT ?
-      document.createDocumentFragment() :
-      document.createElementNS('http://www.w3.org/1999/xhtml', element);
-  }
-
-  // it could use createElementNS when hasNode is there
-  // but this fallback is equally fast and easier to maintain
-  // it is also battle tested already in all IE
-  function createSVG(svg) {
-    var content = create(FRAGMENT);
-    var template = create('div');
-    template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg">' + svg + '</svg>';
-    append(content, template.firstChild.childNodes);
-    return content;
-  }
-
-}(document));
-
-
-
-
-const ELEMENT_NODE = 1;
-const nodeType = 111;
-
-const remove = ({firstChild, lastChild}) => {
-  const range = document.createRange();
-  range.setStartAfter(firstChild);
-  range.setEndAfter(lastChild);
-  range.deleteContents();
-  return firstChild;
-};
-
-const diffable = (node, operation) => node.nodeType === nodeType ?
-  ((1 / operation) < 0 ?
-    (operation ? remove(node) : node.lastChild) :
-    (operation ? node.valueOf() : node.firstChild)) :
-  node
-;
-
-const persistent = fragment => {
-  const {childNodes} = fragment;
-  const {length} = childNodes;
-  if (length < 2)
-    return length ? childNodes[0] : fragment;
-  const nodes = slice.call(childNodes, 0);
-  const firstChild = nodes[0];
-  const lastChild = nodes[length - 1];
-  return {
-    ELEMENT_NODE,
-    nodeType,
-    firstChild,
-    lastChild,
-    valueOf() {
-      if (childNodes.length !== length) {
-        let i = 0;
-        while (i < length)
-          fragment.appendChild(nodes[i++]);
-      }
-      return fragment;
-    }
-  };
-};
-
-
-
-const aria = node => values => {
-  for (const key in values) {
-    const name = key === 'role' ? key : `aria-${key}`;
-    const value = values[key];
-    if (value == null)
-      node.removeAttribute(name);
-    else
-      node.setAttribute(name, value);
-  }
-};
-
-const attribute = (node, name) => {
-  let oldValue, orphan = true;
-  const attributeNode = document.createAttributeNS(null, name);
-  return newValue => {
-    if (oldValue !== newValue) {
-      oldValue = newValue;
-      if (oldValue == null) {
-        if (!orphan) {
-          node.removeAttributeNode(attributeNode);
-          orphan = true;
-        }
-      }
-      else {
-        attributeNode.value = newValue;
-        if (orphan) {
-          node.setAttributeNodeNS(attributeNode);
-          orphan = false;
-        }
-      }
-    }
-  };
-};
-
-const boolean = (node, key, oldValue) => newValue => {
-  if (oldValue !== !!newValue) {
-    // when IE won't be around anymore ...
-    // node.toggleAttribute(key, oldValue = !!newValue);
-    if ((oldValue = !!newValue))
-      node.setAttribute(key, '');
-    else
-      node.removeAttribute(key);
-  }
-};
-
-const data = ({dataset}) => values => {
-  for (const key in values) {
-    const value = values[key];
-    if (value == null)
-      delete dataset[key];
-    else
-      dataset[key] = value;
-  }
-};
-
-const event = (node, name) => {
-  let oldValue, type = name.slice(2);
-  if (!(name in node) && name.toLowerCase() in node)
-    type = type.toLowerCase();
-  return newValue => {
-    const info = isArray(newValue) ? newValue : [newValue, false];
-    if (oldValue !== info[0]) {
-      if (oldValue)
-        node.removeEventListener(type, oldValue, info[1]);
-      if (oldValue = info[0])
-        node.addEventListener(type, oldValue, info[1]);
-    }
-  };
-};
-
-const ref = node => {
-  let oldValue;
-  return value => {
-    if (oldValue !== value) {
-      oldValue = value;
-      if (typeof value === 'function')
-        value(node);
-      else
-        value.current = node;
-    }
-  };
-};
-
-const setter = (node, key) => key === 'dataset' ?
-  data(node) :
-  value => {
-    node[key] = value;
-  };
-
-const text = node => {
-  let oldValue;
-  return newValue => {
-    if (oldValue != newValue) {
-      oldValue = newValue;
-      node.textContent = newValue == null ? '' : newValue;
-    }
-  };
-};
-
-
-
-// this "hack" tells the library if the browser is IE11 or old Edge
-const isImportNodeLengthWrong = document.importNode.length != 1;
-
-// IE11 and old Edge discard empty nodes when cloning, potentially
-// resulting in broken paths to find updates. The workaround here
-// is to import once, upfront, the fragment that will be cloned
-// later on, so that paths are retrieved from one already parsed,
-// hence without missing child nodes once re-cloned.
-const createFragment = isImportNodeLengthWrong ?
-  (text, type, normalize) => document.importNode(
-    createContent(text, type, normalize),
-    true
-  ) :
-  createContent;
-
-// IE11 and old Edge have a different createTreeWalker signature that
-// has been deprecated in other browsers. This export is needed only
-// to guarantee the TreeWalker doesn't show warnings and, ultimately, works
-const createWalker = isImportNodeLengthWrong ?
-  fragment => document.createTreeWalker(fragment, 1 | 128, null, false) :
-  fragment => document.createTreeWalker(fragment, 1 | 128);
-
-
-
-
-
-
-// from a generic path, retrieves the exact targeted node
-const reducePath = ({childNodes}, i) => childNodes[i];
-
-// this helper avoid code bloat around handleAnything() callback
-const diff = (comment, oldNodes, newNodes) => udomdiff(
-  comment.parentNode,
-  // TODO: there is a possible edge case where a node has been
-  //       removed manually, or it was a keyed one, attached
-  //       to a shared reference between renders.
-  //       In this case udomdiff might fail at removing such node
-  //       as its parent won't be the expected one.
-  //       The best way to avoid this issue is to filter oldNodes
-  //       in search of those not live, or not in the current parent
-  //       anymore, but this would require both a change to uwire,
-  //       exposing a parentNode from the firstChild, as example,
-  //       but also a filter per each diff that should exclude nodes
-  //       that are not in there, penalizing performance quite a lot.
-  //       As this has been also a potential issue with domdiff,
-  //       and both lighterhtml and hyperHTML might fail with this
-  //       very specific edge case, I might as well document this possible
-  //       "diffing shenanigan" and call it a day.
-  oldNodes,
-  newNodes,
-  diffable,
-  comment
-);
-
-// if an interpolation represents a comment, the whole
-// diffing will be related to such comment.
-// This helper is in charge of understanding how the new
-// content for such interpolation/hole should be updated
-const handleAnything = comment => {
-  let oldValue, text, nodes = [];
-  const anyContent = newValue => {
-    switch (typeof newValue) {
-      // primitives are handled as text content
-      case 'string':
-      case 'number':
-      case 'boolean':
-        if (oldValue !== newValue) {
-          oldValue = newValue;
-          if (!text)
-            text = document.createTextNode('');
-          text.data = newValue;
-          nodes = diff(comment, nodes, [text]);
-        }
-        break;
-      // null, and undefined are used to cleanup previous content
-      case 'object':
-      case 'undefined':
-        if (newValue == null) {
-          if (oldValue != newValue) {
-            oldValue = newValue;
-            nodes = diff(comment, nodes, []);
-          }
-          break;
-        }
-        // arrays and nodes have a special treatment
-        if (isArray(newValue)) {
-          oldValue = newValue;
-          // arrays can be used to cleanup, if empty
-          if (newValue.length === 0)
-            nodes = diff(comment, nodes, []);
-          // or diffed, if these contains nodes or "wires"
-          else if (typeof newValue[0] === 'object')
-            nodes = diff(comment, nodes, newValue);
-          // in all other cases the content is stringified as is
-          else
-            anyContent(String(newValue));
-          break;
-        }
-        // if the new value is a DOM node, or a wire, and it's
-        // different from the one already live, then it's diffed.
-        // if the node is a fragment, it's appended once via its childNodes
-        // There is no `else` here, meaning if the content
-        // is not expected one, nothing happens, as easy as that.
-        if (oldValue !== newValue && 'ELEMENT_NODE' in newValue) {
-          oldValue = newValue;
-          nodes = diff(
-            comment,
-            nodes,
-            newValue.nodeType === 11 ?
-              slice.call(newValue.childNodes) :
-              [newValue]
-          );
-        }
-        break;
-      case 'function':
-        anyContent(newValue(comment));
-        break;
-    }
-  };
-  return anyContent;
-};
-
-// attributes can be:
-//  * ref=${...}      for hooks and other purposes
-//  * aria=${...}     for aria attributes
-//  * ?boolean=${...} for boolean attributes
-//  * .dataset=${...} for dataset related attributes
-//  * .setter=${...}  for Custom Elements setters or nodes with setters
-//                    such as buttons, details, options, select, etc
-//  * @event=${...}   to explicitly handle event listeners
-//  * onevent=${...}  to automatically handle event listeners
-//  * generic=${...}  to handle an attribute just like an attribute
-const handleAttribute = (node, name/*, svg*/) => {
-  switch (name[0]) {
-    case '?': return boolean(node, name.slice(1), false);
-    case '.': return setter(node, name.slice(1));
-    case '@': return event(node, 'on' + name.slice(1));
-    case 'o': if (name[1] === 'n') return event(node, name);
-  }
-
-  switch (name) {
-    case 'ref': return ref(node);
-    case 'aria': return aria(node);
-  }
-
-  return attribute(node, name/*, svg*/);
-};
-
-// each mapped update carries the update type and its path
-// the type is either node, attribute, or text, while
-// the path is how to retrieve the related node to update.
-// In the attribute case, the attribute name is also carried along.
-function handlers(options) {
-  const {type, path} = options;
-  const node = path.reduceRight(reducePath, this);
-  return type === 'node' ?
-    handleAnything(node) :
-    (type === 'attr' ?
-      handleAttribute(node, options.name/*, options.svg*/) :
-      text(node));
-};
-
-
-
-
-
-
-
-
-
-// from a fragment container, create an array of indexes
-// related to its child nodes, so that it's possible
-// to retrieve later on exact node via reducePath
-const createPath = node => {
-  const path = [];
-  let {parentNode} = node;
-  while (parentNode) {
-    path.push(indexOf.call(parentNode.childNodes, node));
-    node = parentNode;
-    parentNode = node.parentNode;
-  }
-  return path;
-};
-
-// the prefix is used to identify either comments, attributes, or nodes
-// that contain the related unique id. In the attribute cases
-// isµX="attribute-name" will be used to map current X update to that
-// attribute name, while comments will be like <!--isµX-->, to map
-// the update to that specific comment node, hence its parent.
-// style and textarea will have <!--isµX--> text content, and are handled
-// directly through text-only updates.
-const prefix = 'isµ';
-
-// Template Literals are unique per scope and static, meaning a template
-// should be parsed once, and once only, as it will always represent the same
-// content, within the exact same amount of updates each time.
-// This cache relates each template to its unique content and updates.
-const cache = umap(new WeakMap);
-
-// a RegExp that helps checking nodes that cannot contain comments
-const textOnly = /^(?:plaintext|script|style|textarea|title|xmp)$/i;
-
-const createCache = () => ({
-  stack: [],    // each template gets a stack for each interpolation "hole"
-
-  entry: null,  // each entry contains details, such as:
-                //  * the template that is representing
-                //  * the type of node it represents (html or svg)
-                //  * the content fragment with all nodes
-                //  * the list of updates per each node (template holes)
-                //  * the "wired" node or fragment that will get updates
-                // if the template or type are different from the previous one
-                // the entry gets re-created each time
-
-  wire: null    // each rendered node represent some wired content and
-                // this reference to the latest one. If different, the node
-                // will be cleaned up and the new "wire" will be appended
-});
-
-// the entry stored in the rendered node cache, and per each "hole"
-const createEntry = (type, template) => {
-  const {content, updates} = mapUpdates(type, template);
-  return {type, template, content, updates, wire: null};
-};
-
-// a template is instrumented to be able to retrieve where updates are needed.
-// Each unique template becomes a fragment, cloned once per each other
-// operation based on the same template, i.e. data => html`<p>${data}</p>`
-const mapTemplate = (type, template) => {
-  const text = instrument(template, prefix, type === 'svg');
-  const content = createFragment(text, type);
-  // once instrumented and reproduced as fragment, it's crawled
-  // to find out where each update is in the fragment tree
-  const tw = createWalker(content);
-  const nodes = [];
-  const length = template.length - 1;
-  let i = 0;
-  // updates are searched via unique names, linearly increased across the tree
-  // <div isµ0="attr" isµ1="other"><!--isµ2--><style><!--isµ3--</style></div>
-  let search = `${prefix}${i}`;
-  while (i < length) {
-    const node = tw.nextNode();
-    // if not all updates are bound but there's nothing else to crawl
-    // it means that there is something wrong with the template.
-    if (!node)
-      throw `bad template: ${text}`;
-    // if the current node is a comment, and it contains isµX
-    // it means the update should take care of any content
-    if (node.nodeType === 8) {
-      // The only comments to be considered are those
-      // which content is exactly the same as the searched one.
-      if (node.data === search) {
-        nodes.push({type: 'node', path: createPath(node)});
-        search = `${prefix}${++i}`;
-      }
-    }
-    else {
-      // if the node is not a comment, loop through all its attributes
-      // named isµX and relate attribute updates to this node and the
-      // attribute name, retrieved through node.getAttribute("isµX")
-      // the isµX attribute will be removed as irrelevant for the layout
-      // let svg = -1;
-      while (node.hasAttribute(search)) {
-        nodes.push({
-          type: 'attr',
-          path: createPath(node),
-          name: node.getAttribute(search),
-          //svg: svg < 0 ? (svg = ('ownerSVGElement' in node ? 1 : 0)) : svg
-        });
-        node.removeAttribute(search);
-        search = `${prefix}${++i}`;
-      }
-      // if the node was a style, textarea, or others, check its content
-      // and if it is <!--isµX--> then update tex-only this node
-      if (
-        textOnly.test(node.tagName) &&
-        node.textContent.trim() === `<!--${search}-->`
-      ){
-        node.textContent = '';
-        nodes.push({type: 'text', path: createPath(node)});
-        search = `${prefix}${++i}`;
-      }
-    }
-  }
-  // once all nodes to update, or their attributes, are known, the content
-  // will be cloned in the future to represent the template, and all updates
-  // related to such content retrieved right away without needing to re-crawl
-  // the exact same template, and its content, more than once.
-  return {content, nodes};
-};
-
-// if a template is unknown, perform the previous mapping, otherwise grab
-// its details such as the fragment with all nodes, and updates info.
-const mapUpdates = (type, template) => {
-  const {content, nodes} = (
-    cache.get(template) ||
-    cache.set(template, mapTemplate(type, template))
-  );
-  // clone deeply the fragment
-  const fragment = document.importNode(content, true);
-  // and relate an update handler per each node that needs one
-  const updates = nodes.map(handlers, fragment);
-  // return the fragment and all updates to use within its nodes
-  return {content: fragment, updates};
-};
-
-// as html and svg can be nested calls, but no parent node is known
-// until rendered somewhere, the unroll operation is needed to
-// discover what to do with each interpolation, which will result
-// into an update operation.
-const unroll = (info, {type, template, values}) => {
-  const {length} = values;
-  // interpolations can contain holes and arrays, so these need
-  // to be recursively discovered
-  unrollValues(info, values, length);
-  let {entry} = info;
-  // if the cache entry is either null or different from the template
-  // and the type this unroll should resolve, create a new entry
-  // assigning a new content fragment and the list of updates.
-  if (!entry || (entry.template !== template || entry.type !== type))
-    info.entry = (entry = createEntry(type, template));
-  const {content, updates, wire} = entry;
-  // even if the fragment and its nodes is not live yet,
-  // it is already possible to update via interpolations values.
-  for (let i = 0; i < length; i++)
-    updates[i](values[i]);
-  // if the entry was new, or representing a different template or type,
-  // create a new persistent entity to use during diffing.
-  // This is simply a DOM node, when the template has a single container,
-  // as in `<p></p>`, or a "wire" in `<p></p><p></p>` and similar cases.
-  return wire || (entry.wire = persistent(content));
-};
-
-// the stack retains, per each interpolation value, the cache
-// related to each interpolation value, or null, if the render
-// was conditional and the value is not special (Array or Hole)
-const unrollValues = ({stack}, values, length) => {
-  for (let i = 0; i < length; i++) {
-    const hole = values[i];
-    // each Hole gets unrolled and re-assigned as value
-    // so that domdiff will deal with a node/wire, not with a hole
-    if (hole instanceof Hole)
-      values[i] = unroll(
-        stack[i] || (stack[i] = createCache()),
-        hole
-      );
-    // arrays are recursively resolved so that each entry will contain
-    // also a DOM node or a wire, hence it can be diffed if/when needed
-    else if (isArray(hole))
-      unrollValues(
-        stack[i] || (stack[i] = createCache()),
-        hole,
-        hole.length
-      );
-    // if the value is nothing special, the stack doesn't need to retain data
-    // this is useful also to cleanup previously retained data, if the value
-    // was a Hole, or an Array, but not anymore, i.e.:
-    // const update = content => html`<div>${content}</div>`;
-    // update(listOfItems); update(null); update(html`hole`)
-    else
-      stack[i] = null;
-  }
-  if (length < stack.length)
-    stack.splice(length);
-};
-
-/**
- * Holds all details wrappers needed to render the content further on.
- * @constructor
- * @param {string} type The hole type, either `html` or `svg`.
- * @param {string[]} template The template literals used to the define the content.
- * @param {Array} values Zero, one, or more interpolated values to render.
- */
-function Hole(type, template, values) {
-  this.type = type;
-  this.template = template;
-  this.values = values;
-};
-
-
-
-
-const {create, defineProperties} = Object;
-
-// both `html` and `svg` template literal tags are polluted
-// with a `for(ref[, id])` and a `node` tag too
-const tag = type => {
-  // both `html` and `svg` tags have their own _cache
-  const keyed = umap(new WeakMap);
-  // keyed operations always re-use the same _cache and unroll
-  // the template and its interpolations right away
-  const fixed = _cache => (template, ...values) => unroll(
-    _cache,
-    {type, template, values}
-  );
-  return defineProperties(
-    // non keyed operations are recognized as instance of Hole
-    // during the "unroll", recursively resolved and updated
-    (template, ...values) => new Hole(type, template, values),
-    {
-      for: {
-        // keyed operations need a reference object, usually the parent node
-        // which is showing keyed results, and optionally a unique id per each
-        // related node, handy with JSON results and mutable list of objects
-        // that usually carry a unique identifier
-        value(ref, id) {
-          const memo = keyed.get(ref) || keyed.set(ref, create(null));
-          return memo[id] || (memo[id] = fixed(createCache()));
-        }
-      },
-      node: {
-        // it is possible to create one-off content out of the box via node tag
-        // this might return the single created node, or a fragment with all
-        // nodes present at the root level and, of course, their child nodes
-        value: (template, ...values) => unroll(
-          createCache(),
-          {type, template, values}
-        ).valueOf()
-      }
-    }
-  );
-};
-
-// each rendered node gets its own _cache
-const _cache = umap(new WeakMap);
-
-// rendering means understanding what `html` or `svg` tags returned
-// and it relates a specific node to its own unique _cache.
-// Each time the content to render changes, the node is cleaned up
-// and the new new content is appended, and if such content is a Hole
-// then it's "unrolled" to resolve all its inner nodes.
-const render = (where, what) => {
-  const hole = typeof what === 'function' ? what() : what;
-  const info = _cache.get(where) || _cache.set(where, createCache());
-  const wire = hole instanceof Hole ? unroll(info, hole) : hole;
-  if (wire !== info.wire) {
-    info.wire = wire;
-    where.textContent = '';
-    // valueOf() simply returns the node itself, but in case it was a "wire"
-    // it will eventually re-append all nodes to its fragment so that such
-    // fragment can be re-appended many times in a meaningful way
-    // (wires are basically persistent fragments facades with special behavior)
-    where.appendChild(wire.valueOf());
-  }
-  return where;
-};
-
-const html = tag('html');
-const svg = tag('svg');
-
-return {Hole, render, html, svg};
-
-/**end**/
-};
diff --git a/esm/json.js b/esm/json.js
deleted file mode 100644
index 33f8ed9..0000000
--- a/esm/json.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import umap from 'umap';
-import {render as $render, html, svg} from './index.js';
-
-// Sender (SW, Worker, postMessage)
-const ids = umap(new WeakMap);
-let id = 0;
-
-const tag = type => (template, ...values) => ({
-  id: ids.get(template) ||
-      ids.set(template, id++),
-  type,
-  values,
-  template
-});
-
-html.json = tag('html');
-svg.json = tag('svg');
-
-// Receiver (onmessage, from SW, Workers, etc)
-const templates = umap(new Map);
-
-const unroll = ({type, template, values, id}) => (
-  (type === 'svg' ? svg : html).apply(
-    null,
-    [
-      templates.get(id) ||
-      templates.set(id, template)
-    ].concat(values.map(asJSON))
-  )
-);
-
-const asJSON = value => isJSON(value) ? unroll(value) : value;
-
-const isJSON = thing => (
-  typeof thing === 'object' &&
-  thing !== null &&
-  'id' in thing &&
-  'type' in thing &&
-  'values' in thing &&
-  'template' in thing
-);
-
-const render = (where, what) => $render(
-  where,
-  isJSON(what) ? unroll(what) : what
-);
-
-export {render, html, svg};
diff --git a/esm/node.js b/esm/node.js
deleted file mode 100644
index 21ca5a1..0000000
--- a/esm/node.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import createContent from '@ungap/create-content';
-
-// this "hack" tells the library if the browser is IE11 or old Edge
-const isImportNodeLengthWrong = document.importNode.length != 1;
-
-// IE11 and old Edge discard empty nodes when cloning, potentially
-// resulting in broken paths to find updates. The workaround here
-// is to import once, upfront, the fragment that will be cloned
-// later on, so that paths are retrieved from one already parsed,
-// hence without missing child nodes once re-cloned.
-export const createFragment = isImportNodeLengthWrong ?
-  (text, type, normalize) => document.importNode(
-    createContent(text, type, normalize),
-    true
-  ) :
-  createContent;
-
-// IE11 and old Edge have a different createTreeWalker signature that
-// has been deprecated in other browsers. This export is needed only
-// to guarantee the TreeWalker doesn't show warnings and, ultimately, works
-export const createWalker = isImportNodeLengthWrong ?
-  fragment => document.createTreeWalker(fragment, 1 | 128, null, false) :
-  fragment => document.createTreeWalker(fragment, 1 | 128);
diff --git a/esm/rabbit.js b/esm/rabbit.js
deleted file mode 100644
index 6d208cb..0000000
--- a/esm/rabbit.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import umap from 'umap';
-import instrument from 'uparser';
-import {indexOf, isArray} from 'uarray';
-import {persistent} from 'uwire';
-
-import {handlers} from './handlers.js';
-import {createFragment, createWalker} from './node.js';
-
-// from a fragment container, create an array of indexes
-// related to its child nodes, so that it's possible
-// to retrieve later on exact node via reducePath
-const createPath = node => {
-  const path = [];
-  let {parentNode} = node;
-  while (parentNode) {
-    path.push(indexOf.call(parentNode.childNodes, node));
-    node = parentNode;
-    parentNode = node.parentNode;
-  }
-  return path;
-};
-
-// the prefix is used to identify either comments, attributes, or nodes
-// that contain the related unique id. In the attribute cases
-// isµX="attribute-name" will be used to map current X update to that
-// attribute name, while comments will be like <!--isµX-->, to map
-// the update to that specific comment node, hence its parent.
-// style and textarea will have <!--isµX--> text content, and are handled
-// directly through text-only updates.
-const prefix = 'isµ';
-
-// Template Literals are unique per scope and static, meaning a template
-// should be parsed once, and once only, as it will always represent the same
-// content, within the exact same amount of updates each time.
-// This cache relates each template to its unique content and updates.
-const cache = umap(new WeakMap);
-
-// a RegExp that helps checking nodes that cannot contain comments
-const textOnly = /^(?:plaintext|script|style|textarea|title|xmp)$/i;
-
-export const createCache = () => ({
-  stack: [],    // each template gets a stack for each interpolation "hole"
-
-  entry: null,  // each entry contains details, such as:
-                //  * the template that is representing
-                //  * the type of node it represents (html or svg)
-                //  * the content fragment with all nodes
-                //  * the list of updates per each node (template holes)
-                //  * the "wired" node or fragment that will get updates
-                // if the template or type are different from the previous one
-                // the entry gets re-created each time
-
-  wire: null    // each rendered node represent some wired content and
-                // this reference to the latest one. If different, the node
-                // will be cleaned up and the new "wire" will be appended
-});
-
-// the entry stored in the rendered node cache, and per each "hole"
-const createEntry = (type, template) => {
-  const {content, updates} = mapUpdates(type, template);
-  return {type, template, content, updates, wire: null};
-};
-
-// a template is instrumented to be able to retrieve where updates are needed.
-// Each unique template becomes a fragment, cloned once per each other
-// operation based on the same template, i.e. data => html`<p>${data}</p>`
-const mapTemplate = (type, template) => {
-  const text = instrument(template, prefix, type === 'svg');
-  const content = createFragment(text, type);
-  // once instrumented and reproduced as fragment, it's crawled
-  // to find out where each update is in the fragment tree
-  const tw = createWalker(content);
-  const nodes = [];
-  const length = template.length - 1;
-  let i = 0;
-  // updates are searched via unique names, linearly increased across the tree
-  // <div isµ0="attr" isµ1="other"><!--isµ2--><style><!--isµ3--</style></div>
-  let search = `${prefix}${i}`;
-  while (i < length) {
-    const node = tw.nextNode();
-    // if not all updates are bound but there's nothing else to crawl
-    // it means that there is something wrong with the template.
-    if (!node)
-      throw `bad template: ${text}`;
-    // if the current node is a comment, and it contains isµX
-    // it means the update should take care of any content
-    if (node.nodeType === 8) {
-      // The only comments to be considered are those
-      // which content is exactly the same as the searched one.
-      if (node.data === search) {
-        nodes.push({type: 'node', path: createPath(node)});
-        search = `${prefix}${++i}`;
-      }
-    }
-    else {
-      // if the node is not a comment, loop through all its attributes
-      // named isµX and relate attribute updates to this node and the
-      // attribute name, retrieved through node.getAttribute("isµX")
-      // the isµX attribute will be removed as irrelevant for the layout
-      // let svg = -1;
-      while (node.hasAttribute(search)) {
-        nodes.push({
-          type: 'attr',
-          path: createPath(node),
-          name: node.getAttribute(search),
-          //svg: svg < 0 ? (svg = ('ownerSVGElement' in node ? 1 : 0)) : svg
-        });
-        node.removeAttribute(search);
-        search = `${prefix}${++i}`;
-      }
-      // if the node was a style, textarea, or others, check its content
-      // and if it is <!--isµX--> then update tex-only this node
-      if (
-        textOnly.test(node.tagName) &&
-        node.textContent.trim() === `<!--${search}-->`
-      ){
-        node.textContent = '';
-        nodes.push({type: 'text', path: createPath(node)});
-        search = `${prefix}${++i}`;
-      }
-    }
-  }
-  // once all nodes to update, or their attributes, are known, the content
-  // will be cloned in the future to represent the template, and all updates
-  // related to such content retrieved right away without needing to re-crawl
-  // the exact same template, and its content, more than once.
-  return {content, nodes};
-};
-
-// if a template is unknown, perform the previous mapping, otherwise grab
-// its details such as the fragment with all nodes, and updates info.
-const mapUpdates = (type, template) => {
-  const {content, nodes} = (
-    cache.get(template) ||
-    cache.set(template, mapTemplate(type, template))
-  );
-  // clone deeply the fragment
-  const fragment = document.importNode(content, true);
-  // and relate an update handler per each node that needs one
-  const updates = nodes.map(handlers, fragment);
-  // return the fragment and all updates to use within its nodes
-  return {content: fragment, updates};
-};
-
-// as html and svg can be nested calls, but no parent node is known
-// until rendered somewhere, the unroll operation is needed to
-// discover what to do with each interpolation, which will result
-// into an update operation.
-export const unroll = (info, {type, template, values}) => {
-  const {length} = values;
-  // interpolations can contain holes and arrays, so these need
-  // to be recursively discovered
-  unrollValues(info, values, length);
-  let {entry} = info;
-  // if the cache entry is either null or different from the template
-  // and the type this unroll should resolve, create a new entry
-  // assigning a new content fragment and the list of updates.
-  if (!entry || (entry.template !== template || entry.type !== type))
-    info.entry = (entry = createEntry(type, template));
-  const {content, updates, wire} = entry;
-  // even if the fragment and its nodes is not live yet,
-  // it is already possible to update via interpolations values.
-  for (let i = 0; i < length; i++)
-    updates[i](values[i]);
-  // if the entry was new, or representing a different template or type,
-  // create a new persistent entity to use during diffing.
-  // This is simply a DOM node, when the template has a single container,
-  // as in `<p></p>`, or a "wire" in `<p></p><p></p>` and similar cases.
-  return wire || (entry.wire = persistent(content));
-};
-
-// the stack retains, per each interpolation value, the cache
-// related to each interpolation value, or null, if the render
-// was conditional and the value is not special (Array or Hole)
-const unrollValues = ({stack}, values, length) => {
-  for (let i = 0; i < length; i++) {
-    const hole = values[i];
-    // each Hole gets unrolled and re-assigned as value
-    // so that domdiff will deal with a node/wire, not with a hole
-    if (hole instanceof Hole)
-      values[i] = unroll(
-        stack[i] || (stack[i] = createCache()),
-        hole
-      );
-    // arrays are recursively resolved so that each entry will contain
-    // also a DOM node or a wire, hence it can be diffed if/when needed
-    else if (isArray(hole))
-      unrollValues(
-        stack[i] || (stack[i] = createCache()),
-        hole,
-        hole.length
-      );
-    // if the value is nothing special, the stack doesn't need to retain data
-    // this is useful also to cleanup previously retained data, if the value
-    // was a Hole, or an Array, but not anymore, i.e.:
-    // const update = content => html`<div>${content}</div>`;
-    // update(listOfItems); update(null); update(html`hole`)
-    else
-      stack[i] = null;
-  }
-  if (length < stack.length)
-    stack.splice(length);
-};
-
-/**
- * Holds all details wrappers needed to render the content further on.
- * @constructor
- * @param {string} type The hole type, either `html` or `svg`.
- * @param {string[]} template The template literals used to the define the content.
- * @param {Array} values Zero, one, or more interpolated values to render.
- */
-export function Hole(type, template, values) {
-  this.type = type;
-  this.template = template;
-  this.values = values;
-};
diff --git a/esm/x.js b/esm/x.js
deleted file mode 100644
index fc57b43..0000000
--- a/esm/x.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import {createPragma} from 'jsx2tag';
-import {html} from './index.js';
-
-const createElement = createPragma(html);
-self.React = {
-  createElement,
-  Fragment: createElement
-};
-
-export * from 'jsx2tag';
-export * from './index.js';
diff --git a/index.d.ts b/index.d.ts
deleted file mode 100644
index be7b35f..0000000
--- a/index.d.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export type TemplateFunction<T> = (
-  template: TemplateStringsArray,
-  ...values: any[]
-) => T;
-
-export interface Tag<T> extends TemplateFunction<Hole> {
-  for(object: object, id?: string): TemplateFunction<T>;
-  node: TemplateFunction<T>;
-}
-
-export type Renderable = Hole | HTMLElement | SVGElement;
-
-export declare const html: Tag<HTMLElement>;
-export declare const svg: Tag<SVGElement>;
-export declare function render<T extends Node>(
-  node: T,
-  renderer: (() => Renderable) | Renderable,
-): T;
-
-/**
- * Used for internal purposes, should be created using
- * the `html` or `svg` template tags.
- */
-export class Hole {
-  constructor(type: string, template: TemplateStringsArray, values: any[]);
-  readonly type: string;
-  readonly template: TemplateStringsArray;
-  readonly values: readonly any[];
-}
diff --git a/index.js b/index.js
deleted file mode 100644
index f12a134..0000000
--- a/index.js
+++ /dev/null
@@ -1,880 +0,0 @@
-self.uhtml = (function (exports) {
-  'use strict';
-
-  var umap = (function (_) {
-    return {
-      // About: get: _.get.bind(_)
-      // It looks like WebKit/Safari didn't optimize bind at all,
-      // so that using bind slows it down by 60%.
-      // Firefox and Chrome are just fine in both cases,
-      // so let's use the approach that works fast everywhere 👍
-      get: function get(key) {
-        return _.get(key);
-      },
-      set: function set(key, value) {
-        return _.set(key, value), value;
-      }
-    };
-  });
-
-  var attr = /([^\s\\>"'=]+)\s*=\s*(['"]?)$/;
-  var empty = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
-  var node = /<[a-z][^>]+$/i;
-  var notNode = />[^<>]*$/;
-  var selfClosing = /<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/>)/ig;
-  var trimEnd = /\s+$/;
-
-  var isNode = function isNode(template, i) {
-    return 0 < i-- && (node.test(template[i]) || !notNode.test(template[i]) && isNode(template, i));
-  };
-
-  var regular = function regular(original, name, extra) {
-    return empty.test(name) ? original : "<".concat(name).concat(extra.replace(trimEnd, ''), "></").concat(name, ">");
-  };
-
-  var instrument = (function (template, prefix, svg) {
-    var text = [];
-    var length = template.length;
-
-    var _loop = function _loop(i) {
-      var chunk = template[i - 1];
-      text.push(attr.test(chunk) && isNode(template, i) ? chunk.replace(attr, function (_, $1, $2) {
-        return "".concat(prefix).concat(i - 1, "=").concat($2 || '"').concat($1).concat($2 ? '' : '"');
-      }) : "".concat(chunk, "<!--").concat(prefix).concat(i - 1, "-->"));
-    };
-
-    for (var i = 1; i < length; i++) {
-      _loop(i);
-    }
-
-    text.push(template[length - 1]);
-    var output = text.join('').trim();
-    return svg ? output : output.replace(selfClosing, regular);
-  });
-
-  var isArray = Array.isArray;
-  var _ref = [],
-      indexOf = _ref.indexOf,
-      slice = _ref.slice;
-
-  var ELEMENT_NODE = 1;
-  var nodeType = 111;
-
-  var remove = function remove(_ref) {
-    var firstChild = _ref.firstChild,
-        lastChild = _ref.lastChild;
-    var range = document.createRange();
-    range.setStartAfter(firstChild);
-    range.setEndAfter(lastChild);
-    range.deleteContents();
-    return firstChild;
-  };
-
-  var diffable = function diffable(node, operation) {
-    return node.nodeType === nodeType ? 1 / operation < 0 ? operation ? remove(node) : node.lastChild : operation ? node.valueOf() : node.firstChild : node;
-  };
-  var persistent = function persistent(fragment) {
-    var childNodes = fragment.childNodes;
-    var length = childNodes.length;
-    if (length < 2) return length ? childNodes[0] : fragment;
-    var nodes = slice.call(childNodes, 0);
-    var firstChild = nodes[0];
-    var lastChild = nodes[length - 1];
-    return {
-      ELEMENT_NODE: ELEMENT_NODE,
-      nodeType: nodeType,
-      firstChild: firstChild,
-      lastChild: lastChild,
-      valueOf: function valueOf() {
-        if (childNodes.length !== length) {
-          var i = 0;
-
-          while (i < length) {
-            fragment.appendChild(nodes[i++]);
-          }
-        }
-
-        return fragment;
-      }
-    };
-  };
-
-  
-
-  /**
-   * ISC License
-   *
-   * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
-   *
-   * Permission to use, copy, modify, and/or distribute this software for any
-   * purpose with or without fee is hereby granted, provided that the above
-   * copyright notice and this permission notice appear in all copies.
-   *
-   * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-   * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-   * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-   * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-   * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
-   * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-   * PERFORMANCE OF THIS SOFTWARE.
-   */
-
-  /**
-   * @param {Node} parentNode The container where children live
-   * @param {Node[]} a The list of current/live children
-   * @param {Node[]} b The list of future children
-   * @param {(entry: Node, action: number) => Node} get
-   * The callback invoked per each entry related DOM operation.
-   * @param {Node} [before] The optional node used as anchor to insert before.
-   * @returns {Node[]} The same list of future children.
-   */
-  var udomdiff = (function (parentNode, a, b, get, before) {
-    var bLength = b.length;
-    var aEnd = a.length;
-    var bEnd = bLength;
-    var aStart = 0;
-    var bStart = 0;
-    var map = null;
-
-    while (aStart < aEnd || bStart < bEnd) {
-      // append head, tail, or nodes in between: fast path
-      if (aEnd === aStart) {
-        // we could be in a situation where the rest of nodes that
-        // need to be added are not at the end, and in such case
-        // the node to `insertBefore`, if the index is more than 0
-        // must be retrieved, otherwise it's gonna be the first item.
-        var node = bEnd < bLength ? bStart ? get(b[bStart - 1], -0).nextSibling : get(b[bEnd - bStart], 0) : before;
-
-        while (bStart < bEnd) {
-          parentNode.insertBefore(get(b[bStart++], 1), node);
-        }
-      } // remove head or tail: fast path
-      else if (bEnd === bStart) {
-          while (aStart < aEnd) {
-            // remove the node only if it's unknown or not live
-            if (!map || !map.has(a[aStart])) parentNode.removeChild(get(a[aStart], -1));
-            aStart++;
-          }
-        } // same node: fast path
-        else if (a[aStart] === b[bStart]) {
-            aStart++;
-            bStart++;
-          } // same tail: fast path
-          else if (a[aEnd - 1] === b[bEnd - 1]) {
-              aEnd--;
-              bEnd--;
-            } // The once here single last swap "fast path" has been removed in v1.1.0
-            // https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
-            // reverse swap: also fast path
-            else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
-                // this is a "shrink" operation that could happen in these cases:
-                // [1, 2, 3, 4, 5]
-                // [1, 4, 3, 2, 5]
-                // or asymmetric too
-                // [1, 2, 3, 4, 5]
-                // [1, 2, 3, 5, 6, 4]
-                var _node = get(a[--aEnd], -1).nextSibling;
-                parentNode.insertBefore(get(b[bStart++], 1), get(a[aStart++], -1).nextSibling);
-                parentNode.insertBefore(get(b[--bEnd], 1), _node); // mark the future index as identical (yeah, it's dirty, but cheap 👍)
-                // The main reason to do this, is that when a[aEnd] will be reached,
-                // the loop will likely be on the fast path, as identical to b[bEnd].
-                // In the best case scenario, the next loop will skip the tail,
-                // but in the worst one, this node will be considered as already
-                // processed, bailing out pretty quickly from the map index check
-
-                a[aEnd] = b[bEnd];
-              } // map based fallback, "slow" path
-              else {
-                  // the map requires an O(bEnd - bStart) operation once
-                  // to store all future nodes indexes for later purposes.
-                  // In the worst case scenario, this is a full O(N) cost,
-                  // and such scenario happens at least when all nodes are different,
-                  // but also if both first and last items of the lists are different
-                  if (!map) {
-                    map = new Map();
-                    var i = bStart;
-
-                    while (i < bEnd) {
-                      map.set(b[i], i++);
-                    }
-                  } // if it's a future node, hence it needs some handling
-
-
-                  if (map.has(a[aStart])) {
-                    // grab the index of such node, 'cause it might have been processed
-                    var index = map.get(a[aStart]); // if it's not already processed, look on demand for the next LCS
-
-                    if (bStart < index && index < bEnd) {
-                      var _i = aStart; // counts the amount of nodes that are the same in the future
-
-                      var sequence = 1;
-
-                      while (++_i < aEnd && _i < bEnd && map.get(a[_i]) === index + sequence) {
-                        sequence++;
-                      } // effort decision here: if the sequence is longer than replaces
-                      // needed to reach such sequence, which would brings again this loop
-                      // to the fast path, prepend the difference before a sequence,
-                      // and move only the future list index forward, so that aStart
-                      // and bStart will be aligned again, hence on the fast path.
-                      // An example considering aStart and bStart are both 0:
-                      // a: [1, 2, 3, 4]
-                      // b: [7, 1, 2, 3, 6]
-                      // this would place 7 before 1 and, from that time on, 1, 2, and 3
-                      // will be processed at zero cost
-
-
-                      if (sequence > index - bStart) {
-                        var _node2 = get(a[aStart], 0);
-
-                        while (bStart < index) {
-                          parentNode.insertBefore(get(b[bStart++], 1), _node2);
-                        }
-                      } // if the effort wasn't good enough, fallback to a replace,
-                      // moving both source and target indexes forward, hoping that some
-                      // similar node will be found later on, to go back to the fast path
-                      else {
-                          parentNode.replaceChild(get(b[bStart++], 1), get(a[aStart++], -1));
-                        }
-                    } // otherwise move the source forward, 'cause there's nothing to do
-                    else aStart++;
-                  } // this node has no meaning in the future list, so it's more than safe
-                  // to remove it, and check the next live node out instead, meaning
-                  // that only the live list index should be forwarded
-                  else parentNode.removeChild(get(a[aStart++], -1));
-                }
-    }
-
-    return b;
-  });
-
-  var aria = function aria(node) {
-    return function (values) {
-      for (var key in values) {
-        var name = key === 'role' ? key : "aria-".concat(key);
-        var value = values[key];
-        if (value == null) node.removeAttribute(name);else node.setAttribute(name, value);
-      }
-    };
-  };
-  var attribute = function attribute(node, name) {
-    var oldValue,
-        orphan = true;
-    var attributeNode = document.createAttributeNS(null, name);
-    return function (newValue) {
-      if (oldValue !== newValue) {
-        oldValue = newValue;
-
-        if (oldValue == null) {
-          if (!orphan) {
-            node.removeAttributeNode(attributeNode);
-            orphan = true;
-          }
-        } else {
-          attributeNode.value = newValue;
-
-          if (orphan) {
-            node.setAttributeNodeNS(attributeNode);
-            orphan = false;
-          }
-        }
-      }
-    };
-  };
-
-  var _boolean = function _boolean(node, key, oldValue) {
-    return function (newValue) {
-      if (oldValue !== !!newValue) {
-        // when IE won't be around anymore ...
-        // node.toggleAttribute(key, oldValue = !!newValue);
-        if (oldValue = !!newValue) node.setAttribute(key, '');else node.removeAttribute(key);
-      }
-    };
-  };
-  var data = function data(_ref) {
-    var dataset = _ref.dataset;
-    return function (values) {
-      for (var key in values) {
-        var value = values[key];
-        if (value == null) delete dataset[key];else dataset[key] = value;
-      }
-    };
-  };
-  var event = function event(node, name) {
-    var oldValue,
-        type = name.slice(2);
-    if (!(name in node) && name.toLowerCase() in node) type = type.toLowerCase();
-    return function (newValue) {
-      var info = isArray(newValue) ? newValue : [newValue, false];
-
-      if (oldValue !== info[0]) {
-        if (oldValue) node.removeEventListener(type, oldValue, info[1]);
-        if (oldValue = info[0]) node.addEventListener(type, oldValue, info[1]);
-      }
-    };
-  };
-  var ref = function ref(node) {
-    var oldValue;
-    return function (value) {
-      if (oldValue !== value) {
-        oldValue = value;
-        if (typeof value === 'function') value(node);else value.current = node;
-      }
-    };
-  };
-  var setter = function setter(node, key) {
-    return key === 'dataset' ? data(node) : function (value) {
-      node[key] = value;
-    };
-  };
-  var text = function text(node) {
-    var oldValue;
-    return function (newValue) {
-      if (oldValue != newValue) {
-        oldValue = newValue;
-        node.textContent = newValue == null ? '' : newValue;
-      }
-    };
-  };
-
-  var reducePath = function reducePath(_ref, i) {
-    var childNodes = _ref.childNodes;
-    return childNodes[i];
-  }; // this helper avoid code bloat around handleAnything() callback
-
-
-  var diff = function diff(comment, oldNodes, newNodes) {
-    return udomdiff(comment.parentNode, // TODO: there is a possible edge case where a node has been
-    //       removed manually, or it was a keyed one, attached
-    //       to a shared reference between renders.
-    //       In this case udomdiff might fail at removing such node
-    //       as its parent won't be the expected one.
-    //       The best way to avoid this issue is to filter oldNodes
-    //       in search of those not live, or not in the current parent
-    //       anymore, but this would require both a change to uwire,
-    //       exposing a parentNode from the firstChild, as example,
-    //       but also a filter per each diff that should exclude nodes
-    //       that are not in there, penalizing performance quite a lot.
-    //       As this has been also a potential issue with domdiff,
-    //       and both lighterhtml and hyperHTML might fail with this
-    //       very specific edge case, I might as well document this possible
-    //       "diffing shenanigan" and call it a day.
-    oldNodes, newNodes, diffable, comment);
-  }; // if an interpolation represents a comment, the whole
-  // diffing will be related to such comment.
-  // This helper is in charge of understanding how the new
-  // content for such interpolation/hole should be updated
-
-
-  var handleAnything = function handleAnything(comment) {
-    var oldValue,
-        text,
-        nodes = [];
-
-    var anyContent = function anyContent(newValue) {
-      switch (typeof(newValue)) {
-        // primitives are handled as text content
-        case 'string':
-        case 'number':
-        case 'boolean':
-          if (oldValue !== newValue) {
-            oldValue = newValue;
-            if (!text) text = document.createTextNode('');
-            text.data = newValue;
-            nodes = diff(comment, nodes, [text]);
-          }
-
-          break;
-        // null, and undefined are used to cleanup previous content
-
-        case 'object':
-        case 'undefined':
-          if (newValue == null) {
-            if (oldValue != newValue) {
-              oldValue = newValue;
-              nodes = diff(comment, nodes, []);
-            }
-
-            break;
-          } // arrays and nodes have a special treatment
-
-
-          if (isArray(newValue)) {
-            oldValue = newValue; // arrays can be used to cleanup, if empty
-
-            if (newValue.length === 0) nodes = diff(comment, nodes, []); // or diffed, if these contains nodes or "wires"
-            else if (typeof(newValue[0]) === 'object') nodes = diff(comment, nodes, newValue); // in all other cases the content is stringified as is
-              else anyContent(String(newValue));
-            break;
-          } // if the new value is a DOM node, or a wire, and it's
-          // different from the one already live, then it's diffed.
-          // if the node is a fragment, it's appended once via its childNodes
-          // There is no `else` here, meaning if the content
-          // is not expected one, nothing happens, as easy as that.
-
-
-          if (oldValue !== newValue && 'ELEMENT_NODE' in newValue) {
-            oldValue = newValue;
-            nodes = diff(comment, nodes, newValue.nodeType === 11 ? slice.call(newValue.childNodes) : [newValue]);
-          }
-
-          break;
-
-        case 'function':
-          anyContent(newValue(comment));
-          break;
-      }
-    };
-
-    return anyContent;
-  }; // attributes can be:
-  //  * ref=${...}      for hooks and other purposes
-  //  * aria=${...}     for aria attributes
-  //  * ?boolean=${...} for boolean attributes
-  //  * .dataset=${...} for dataset related attributes
-  //  * .setter=${...}  for Custom Elements setters or nodes with setters
-  //                    such as buttons, details, options, select, etc
-  //  * @event=${...}   to explicitly handle event listeners
-  //  * onevent=${...}  to automatically handle event listeners
-  //  * generic=${...}  to handle an attribute just like an attribute
-
-
-  var handleAttribute = function handleAttribute(node, name
-  /*, svg*/
-  ) {
-    switch (name[0]) {
-      case '?':
-        return _boolean(node, name.slice(1), false);
-
-      case '.':
-        return setter(node, name.slice(1));
-
-      case '@':
-        return event(node, 'on' + name.slice(1));
-
-      case 'o':
-        if (name[1] === 'n') return event(node, name);
-    }
-
-    switch (name) {
-      case 'ref':
-        return ref(node);
-
-      case 'aria':
-        return aria(node);
-    }
-
-    return attribute(node, name
-    /*, svg*/
-    );
-  }; // each mapped update carries the update type and its path
-  // the type is either node, attribute, or text, while
-  // the path is how to retrieve the related node to update.
-  // In the attribute case, the attribute name is also carried along.
-
-
-  function handlers(options) {
-    var type = options.type,
-        path = options.path;
-    var node = path.reduceRight(reducePath, this);
-    return type === 'node' ? handleAnything(node) : type === 'attr' ? handleAttribute(node, options.name
-    /*, options.svg*/
-    ) : text(node);
-  }
-
-  /*! (c) Andrea Giammarchi - ISC */
-  var createContent = function (document) {
-
-    var FRAGMENT = 'fragment';
-    var TEMPLATE = 'template';
-    var HAS_CONTENT = ('content' in create(TEMPLATE));
-    var createHTML = HAS_CONTENT ? function (html) {
-      var template = create(TEMPLATE);
-      template.innerHTML = html;
-      return template.content;
-    } : function (html) {
-      var content = create(FRAGMENT);
-      var template = create(TEMPLATE);
-      var childNodes = null;
-
-      if (/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(html)) {
-        var selector = RegExp.$1;
-        template.innerHTML = '<table>' + html + '</table>';
-        childNodes = template.querySelectorAll(selector);
-      } else {
-        template.innerHTML = html;
-        childNodes = template.childNodes;
-      }
-
-      append(content, childNodes);
-      return content;
-    };
-    return function createContent(markup, type) {
-      return (type === 'svg' ? createSVG : createHTML)(markup);
-    };
-
-    function append(root, childNodes) {
-      var length = childNodes.length;
-
-      while (length--) {
-        root.appendChild(childNodes[0]);
-      }
-    }
-
-    function create(element) {
-      return element === FRAGMENT ? document.createDocumentFragment() : document.createElementNS('http://www.w3.org/1999/xhtml', element);
-    } // it could use createElementNS when hasNode is there
-    // but this fallback is equally fast and easier to maintain
-    // it is also battle tested already in all IE
-
-
-    function createSVG(svg) {
-      var content = create(FRAGMENT);
-      var template = create('div');
-      template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg">' + svg + '</svg>';
-      append(content, template.firstChild.childNodes);
-      return content;
-    }
-  }(document);
-
-  var isImportNodeLengthWrong = document.importNode.length != 1; // IE11 and old Edge discard empty nodes when cloning, potentially
-  // resulting in broken paths to find updates. The workaround here
-  // is to import once, upfront, the fragment that will be cloned
-  // later on, so that paths are retrieved from one already parsed,
-  // hence without missing child nodes once re-cloned.
-
-  var createFragment = isImportNodeLengthWrong ? function (text, type, normalize) {
-    return document.importNode(createContent(text, type, normalize), true);
-  } : createContent; // IE11 and old Edge have a different createTreeWalker signature that
-  // has been deprecated in other browsers. This export is needed only
-  // to guarantee the TreeWalker doesn't show warnings and, ultimately, works
-
-  var createWalker = isImportNodeLengthWrong ? function (fragment) {
-    return document.createTreeWalker(fragment, 1 | 128, null, false);
-  } : function (fragment) {
-    return document.createTreeWalker(fragment, 1 | 128);
-  };
-
-  // related to its child nodes, so that it's possible
-  // to retrieve later on exact node via reducePath
-
-  var createPath = function createPath(node) {
-    var path = [];
-    var _node = node,
-        parentNode = _node.parentNode;
-
-    while (parentNode) {
-      path.push(indexOf.call(parentNode.childNodes, node));
-      node = parentNode;
-      parentNode = node.parentNode;
-    }
-
-    return path;
-  }; // the prefix is used to identify either comments, attributes, or nodes
-  // that contain the related unique id. In the attribute cases
-  // isµX="attribute-name" will be used to map current X update to that
-  // attribute name, while comments will be like <!--isµX-->, to map
-  // the update to that specific comment node, hence its parent.
-  // style and textarea will have <!--isµX--> text content, and are handled
-  // directly through text-only updates.
-
-
-  var prefix = 'isµ'; // Template Literals are unique per scope and static, meaning a template
-  // should be parsed once, and once only, as it will always represent the same
-  // content, within the exact same amount of updates each time.
-  // This cache relates each template to its unique content and updates.
-
-  var cache$1 = umap(new WeakMap()); // a RegExp that helps checking nodes that cannot contain comments
-
-  var textOnly = /^(?:plaintext|script|style|textarea|title|xmp)$/i;
-  var createCache = function createCache() {
-    return {
-      stack: [],
-      // each template gets a stack for each interpolation "hole"
-      entry: null,
-      // each entry contains details, such as:
-      //  * the template that is representing
-      //  * the type of node it represents (html or svg)
-      //  * the content fragment with all nodes
-      //  * the list of updates per each node (template holes)
-      //  * the "wired" node or fragment that will get updates
-      // if the template or type are different from the previous one
-      // the entry gets re-created each time
-      wire: null // each rendered node represent some wired content and
-      // this reference to the latest one. If different, the node
-      // will be cleaned up and the new "wire" will be appended
-
-    };
-  }; // the entry stored in the rendered node cache, and per each "hole"
-
-  var createEntry = function createEntry(type, template) {
-    var _mapUpdates = mapUpdates(type, template),
-        content = _mapUpdates.content,
-        updates = _mapUpdates.updates;
-
-    return {
-      type: type,
-      template: template,
-      content: content,
-      updates: updates,
-      wire: null
-    };
-  }; // a template is instrumented to be able to retrieve where updates are needed.
-  // Each unique template becomes a fragment, cloned once per each other
-  // operation based on the same template, i.e. data => html`<p>${data}</p>`
-
-
-  var mapTemplate = function mapTemplate(type, template) {
-    var text = instrument(template, prefix, type === 'svg');
-    var content = createFragment(text, type); // once instrumented and reproduced as fragment, it's crawled
-    // to find out where each update is in the fragment tree
-
-    var tw = createWalker(content);
-    var nodes = [];
-    var length = template.length - 1;
-    var i = 0; // updates are searched via unique names, linearly increased across the tree
-    // <div isµ0="attr" isµ1="other"><!--isµ2--><style><!--isµ3--</style></div>
-
-    var search = "".concat(prefix).concat(i);
-
-    while (i < length) {
-      var node = tw.nextNode(); // if not all updates are bound but there's nothing else to crawl
-      // it means that there is something wrong with the template.
-
-      if (!node) throw "bad template: ".concat(text); // if the current node is a comment, and it contains isµX
-      // it means the update should take care of any content
-
-      if (node.nodeType === 8) {
-        // The only comments to be considered are those
-        // which content is exactly the same as the searched one.
-        if (node.data === search) {
-          nodes.push({
-            type: 'node',
-            path: createPath(node)
-          });
-          search = "".concat(prefix).concat(++i);
-        }
-      } else {
-        // if the node is not a comment, loop through all its attributes
-        // named isµX and relate attribute updates to this node and the
-        // attribute name, retrieved through node.getAttribute("isµX")
-        // the isµX attribute will be removed as irrelevant for the layout
-        // let svg = -1;
-        while (node.hasAttribute(search)) {
-          nodes.push({
-            type: 'attr',
-            path: createPath(node),
-            name: node.getAttribute(search) //svg: svg < 0 ? (svg = ('ownerSVGElement' in node ? 1 : 0)) : svg
-
-          });
-          node.removeAttribute(search);
-          search = "".concat(prefix).concat(++i);
-        } // if the node was a style, textarea, or others, check its content
-        // and if it is <!--isµX--> then update tex-only this node
-
-
-        if (textOnly.test(node.tagName) && node.textContent.trim() === "<!--".concat(search, "-->")) {
-          node.textContent = '';
-          nodes.push({
-            type: 'text',
-            path: createPath(node)
-          });
-          search = "".concat(prefix).concat(++i);
-        }
-      }
-    } // once all nodes to update, or their attributes, are known, the content
-    // will be cloned in the future to represent the template, and all updates
-    // related to such content retrieved right away without needing to re-crawl
-    // the exact same template, and its content, more than once.
-
-
-    return {
-      content: content,
-      nodes: nodes
-    };
-  }; // if a template is unknown, perform the previous mapping, otherwise grab
-  // its details such as the fragment with all nodes, and updates info.
-
-
-  var mapUpdates = function mapUpdates(type, template) {
-    var _ref = cache$1.get(template) || cache$1.set(template, mapTemplate(type, template)),
-        content = _ref.content,
-        nodes = _ref.nodes; // clone deeply the fragment
-
-
-    var fragment = document.importNode(content, true); // and relate an update handler per each node that needs one
-
-    var updates = nodes.map(handlers, fragment); // return the fragment and all updates to use within its nodes
-
-    return {
-      content: fragment,
-      updates: updates
-    };
-  }; // as html and svg can be nested calls, but no parent node is known
-  // until rendered somewhere, the unroll operation is needed to
-  // discover what to do with each interpolation, which will result
-  // into an update operation.
-
-
-  var unroll = function unroll(info, _ref2) {
-    var type = _ref2.type,
-        template = _ref2.template,
-        values = _ref2.values;
-    var length = values.length; // interpolations can contain holes and arrays, so these need
-    // to be recursively discovered
-
-    unrollValues(info, values, length);
-    var entry = info.entry; // if the cache entry is either null or different from the template
-    // and the type this unroll should resolve, create a new entry
-    // assigning a new content fragment and the list of updates.
-
-    if (!entry || entry.template !== template || entry.type !== type) info.entry = entry = createEntry(type, template);
-    var _entry = entry,
-        content = _entry.content,
-        updates = _entry.updates,
-        wire = _entry.wire; // even if the fragment and its nodes is not live yet,
-    // it is already possible to update via interpolations values.
-
-    for (var i = 0; i < length; i++) {
-      updates[i](values[i]);
-    } // if the entry was new, or representing a different template or type,
-    // create a new persistent entity to use during diffing.
-    // This is simply a DOM node, when the template has a single container,
-    // as in `<p></p>`, or a "wire" in `<p></p><p></p>` and similar cases.
-
-
-    return wire || (entry.wire = persistent(content));
-  }; // the stack retains, per each interpolation value, the cache
-  // related to each interpolation value, or null, if the render
-  // was conditional and the value is not special (Array or Hole)
-
-  var unrollValues = function unrollValues(_ref3, values, length) {
-    var stack = _ref3.stack;
-
-    for (var i = 0; i < length; i++) {
-      var hole = values[i]; // each Hole gets unrolled and re-assigned as value
-      // so that domdiff will deal with a node/wire, not with a hole
-
-      if (hole instanceof Hole) values[i] = unroll(stack[i] || (stack[i] = createCache()), hole); // arrays are recursively resolved so that each entry will contain
-      // also a DOM node or a wire, hence it can be diffed if/when needed
-      else if (isArray(hole)) unrollValues(stack[i] || (stack[i] = createCache()), hole, hole.length); // if the value is nothing special, the stack doesn't need to retain data
-        // this is useful also to cleanup previously retained data, if the value
-        // was a Hole, or an Array, but not anymore, i.e.:
-        // const update = content => html`<div>${content}</div>`;
-        // update(listOfItems); update(null); update(html`hole`)
-        else stack[i] = null;
-    }
-
-    if (length < stack.length) stack.splice(length);
-  };
-  /**
-   * Holds all details wrappers needed to render the content further on.
-   * @constructor
-   * @param {string} type The hole type, either `html` or `svg`.
-   * @param {string[]} template The template literals used to the define the content.
-   * @param {Array} values Zero, one, or more interpolated values to render.
-   */
-
-
-  function Hole(type, template, values) {
-    this.type = type;
-    this.template = template;
-    this.values = values;
-  }
-
-  var create = Object.create,
-      defineProperties = Object.defineProperties; // both `html` and `svg` template literal tags are polluted
-  // with a `for(ref[, id])` and a `node` tag too
-
-  var tag = function tag(type) {
-    // both `html` and `svg` tags have their own cache
-    var keyed = umap(new WeakMap()); // keyed operations always re-use the same cache and unroll
-    // the template and its interpolations right away
-
-    var fixed = function fixed(cache) {
-      return function (template) {
-        for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          values[_key - 1] = arguments[_key];
-        }
-
-        return unroll(cache, {
-          type: type,
-          template: template,
-          values: values
-        });
-      };
-    };
-
-    return defineProperties( // non keyed operations are recognized as instance of Hole
-    // during the "unroll", recursively resolved and updated
-    function (template) {
-      for (var _len2 = arguments.length, values = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        values[_key2 - 1] = arguments[_key2];
-      }
-
-      return new Hole(type, template, values);
-    }, {
-      "for": {
-        // keyed operations need a reference object, usually the parent node
-        // which is showing keyed results, and optionally a unique id per each
-        // related node, handy with JSON results and mutable list of objects
-        // that usually carry a unique identifier
-        value: function value(ref, id) {
-          var memo = keyed.get(ref) || keyed.set(ref, create(null));
-          return memo[id] || (memo[id] = fixed(createCache()));
-        }
-      },
-      node: {
-        // it is possible to create one-off content out of the box via node tag
-        // this might return the single created node, or a fragment with all
-        // nodes present at the root level and, of course, their child nodes
-        value: function value(template) {
-          for (var _len3 = arguments.length, values = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
-            values[_key3 - 1] = arguments[_key3];
-          }
-
-          return unroll(createCache(), {
-            type: type,
-            template: template,
-            values: values
-          }).valueOf();
-        }
-      }
-    });
-  }; // each rendered node gets its own cache
-
-
-  var cache = umap(new WeakMap()); // rendering means understanding what `html` or `svg` tags returned
-  // and it relates a specific node to its own unique cache.
-  // Each time the content to render changes, the node is cleaned up
-  // and the new new content is appended, and if such content is a Hole
-  // then it's "unrolled" to resolve all its inner nodes.
-
-  var render = function render(where, what) {
-    var hole = typeof what === 'function' ? what() : what;
-    var info = cache.get(where) || cache.set(where, createCache());
-    var wire = hole instanceof Hole ? unroll(info, hole) : hole;
-
-    if (wire !== info.wire) {
-      info.wire = wire;
-      where.textContent = ''; // valueOf() simply returns the node itself, but in case it was a "wire"
-      // it will eventually re-append all nodes to its fragment so that such
-      // fragment can be re-appended many times in a meaningful way
-      // (wires are basically persistent fragments facades with special behavior)
-
-      where.appendChild(wire.valueOf());
-    }
-
-    return where;
-  };
-
-  var html = tag('html');
-  var svg = tag('svg');
-
-  exports.Hole = Hole;
-  exports.html = html;
-  exports.render = render;
-  exports.svg = svg;
-
-  return exports;
-
-}({}));
diff --git a/min.js b/min.js
deleted file mode 100644
index cdb009f..0000000
--- a/min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-self.uhtml=function(e){"use strict";var t=function(e){return{get:function(t){return e.get(t)},set:function(t,n){return e.set(t,n),n}}},n=/([^\s\\>"'=]+)\s*=\s*(['"]?)$/,r=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,a=/<[a-z][^>]+$/i,o=/>[^<>]*$/,i=/<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/>)/gi,u=/\s+$/,c=function e(t,n){return 0<n--&&(a.test(t[n])||!o.test(t[n])&&e(t,n))},l=function(e,t,n){return r.test(t)?e:"<".concat(t).concat(n.replace(u,""),"></").concat(t,">")},f=function(e,t,r){for(var a=[],o=e.length,u=function(r){var o=e[r-1];a.push(n.test(o)&&c(e,r)?o.replace(n,(function(e,n,a){return"".concat(t).concat(r-1,"=").concat(a||'"').concat(n).concat(a?"":'"')})):"".concat(o,"\x3c!--").concat(t).concat(r-1,"--\x3e"))},f=1;f<o;f++)u(f);a.push(e[o-1]);var s=a.join("").trim();return r?s:s.replace(i,l)},s=Array.isArray,d=[],v=d.indexOf,p=d.slice,h=function(e,t){return 111===e.nodeType?1/t<0?t?function(e){var t=e.firstChild,n=e.lastChild,r=document.createRange();return r.setStartAfter(t),r.setEndAfter(n),r.deleteContents(),t}(e):e.lastChild:t?e.valueOf():e.firstChild:e},m=function(e,t){var n,r=t.slice(2);return!(t in e)&&t.toLowerCase()in e&&(r=r.toLowerCase()),function(t){var a=s(t)?t:[t,!1];n!==a[0]&&(n&&e.removeEventListener(r,n,a[1]),(n=a[0])&&e.addEventListener(r,n,a[1]))}},g=function(e,t){return e.childNodes[t]},y=function(e,t,n){return function(e,t,n,r,a){for(var o=n.length,i=t.length,u=o,c=0,l=0,f=null;c<i||l<u;)if(i===c)for(var s=u<o?l?r(n[l-1],-0).nextSibling:r(n[u-l],0):a;l<u;)e.insertBefore(r(n[l++],1),s);else if(u===l)for(;c<i;)f&&f.has(t[c])||e.removeChild(r(t[c],-1)),c++;else if(t[c]===n[l])c++,l++;else if(t[i-1]===n[u-1])i--,u--;else if(t[c]===n[u-1]&&n[l]===t[i-1]){var d=r(t[--i],-1).nextSibling;e.insertBefore(r(n[l++],1),r(t[c++],-1).nextSibling),e.insertBefore(r(n[--u],1),d),t[i]=n[u]}else{if(!f){f=new Map;for(var v=l;v<u;)f.set(n[v],v++)}if(f.has(t[c])){var p=f.get(t[c]);if(l<p&&p<u){for(var h=c,m=1;++h<i&&h<u&&f.get(t[h])===p+m;)m++;if(m>p-l)for(var g=r(t[c],0);l<p;)e.insertBefore(r(n[l++],1),g);else e.replaceChild(r(n[l++],1),r(t[c++],-1))}else c++}else e.removeChild(r(t[c++],-1))}return n}(e.parentNode,t,n,h,e)},w=function(e,t){switch(t[0]){case"?":return function(e,t,n){return function(r){n!==!!r&&((n=!!r)?e.setAttribute(t,""):e.removeAttribute(t))}}(e,t.slice(1),!1);case".":return function(e,t){return"dataset"===t?function(e){var t=e.dataset;return function(e){for(var n in e){var r=e[n];null==r?delete t[n]:t[n]=r}}}(e):function(n){e[t]=n}}(e,t.slice(1));case"@":return m(e,"on"+t.slice(1));case"o":if("n"===t[1])return m(e,t)}switch(t){case"ref":return function(e){var t;return function(n){t!==n&&(t=n,"function"==typeof n?n(e):n.current=e)}}(e);case"aria":return function(e){return function(t){for(var n in t){var r="role"===n?n:"aria-".concat(n),a=t[n];null==a?e.removeAttribute(r):e.setAttribute(r,a)}}}(e)}return function(e,t){var n,r=!0,a=document.createAttributeNS(null,t);return function(t){n!==t&&(null==(n=t)?r||(e.removeAttributeNode(a),r=!0):(a.value=t,r&&(e.setAttributeNodeNS(a),r=!1)))}}(e,t)};function b(e){var t=e.type,n=e.path.reduceRight(g,this);return"node"===t?function(e){var t,n,r=[];return function a(o){switch(typeof o){case"string":case"number":case"boolean":t!==o&&(t=o,n||(n=document.createTextNode("")),n.data=o,r=y(e,r,[n]));break;case"object":case"undefined":if(null==o){t!=o&&(t=o,r=y(e,r,[]));break}if(s(o)){t=o,0===o.length?r=y(e,r,[]):"object"==typeof o[0]?r=y(e,r,o):a(String(o));break}t!==o&&"ELEMENT_NODE"in o&&(t=o,r=y(e,r,11===o.nodeType?p.call(o.childNodes):[o]));break;case"function":a(o(e))}}}(n):"attr"===t?w(n,e.name):function(e){var t;return function(n){t!=n&&(t=n,e.textContent=null==n?"":n)}}(n)}
-/*! (c) Andrea Giammarchi - ISC */var N=function(e){var t="fragment",n="template",r="content"in o(n)?function(e){var t=o(n);return t.innerHTML=e,t.content}:function(e){var r=o(t),i=o(n),u=null;if(/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(e)){var c=RegExp.$1;i.innerHTML="<table>"+e+"</table>",u=i.querySelectorAll(c)}else i.innerHTML=e,u=i.childNodes;return a(r,u),r};return function(e,t){return("svg"===t?i:r)(e)};function a(e,t){for(var n=t.length;n--;)e.appendChild(t[0])}function o(n){return n===t?e.createDocumentFragment():e.createElementNS("http://www.w3.org/1999/xhtml",n)}function i(e){var n=o(t),r=o("div");return r.innerHTML='<svg xmlns="http://www.w3.org/2000/svg">'+e+"</svg>",a(n,r.firstChild.childNodes),n}}(document),x=1!=document.importNode.length,C=x?function(e,t,n){return document.importNode(N(e,t,n),!0)}:N,k=x?function(e){return document.createTreeWalker(e,129,null,!1)}:function(e){return document.createTreeWalker(e,129)},A=function(e){for(var t=[],n=e.parentNode;n;)t.push(v.call(n.childNodes,e)),n=(e=n).parentNode;return t},E="isµ",T=t(new WeakMap),L=/^(?:plaintext|script|style|textarea|title|xmp)$/i,M=function(e,t){var n=T.get(t)||T.set(t,function(e,t){for(var n=f(t,E,"svg"===e),r=C(n,e),a=k(r),o=[],i=t.length-1,u=0,c="".concat(E).concat(u);u<i;){var l=a.nextNode();if(!l)throw"bad template: ".concat(n);if(8===l.nodeType)l.data===c&&(o.push({type:"node",path:A(l)}),c="".concat(E).concat(++u));else{for(;l.hasAttribute(c);)o.push({type:"attr",path:A(l),name:l.getAttribute(c)}),l.removeAttribute(c),c="".concat(E).concat(++u);L.test(l.tagName)&&l.textContent.trim()==="\x3c!--".concat(c,"--\x3e")&&(l.textContent="",o.push({type:"text",path:A(l)}),c="".concat(E).concat(++u))}}return{content:r,nodes:o}}(e,t)),r=n.content,a=n.nodes,o=document.importNode(r,!0);return{content:o,updates:a.map(b,o)}},S=function(e,t){var n=t.type,r=t.template,a=t.values,o=a.length;O(e,a,o);var i=e.entry;i&&i.template===r&&i.type===n||(e.entry=i=function(e,t){var n=M(e,t);return{type:e,template:t,content:n.content,updates:n.updates,wire:null}}(n,r));for(var u=i,c=u.content,l=u.updates,f=u.wire,s=0;s<o;s++)l[s](a[s]);return f||(i.wire=function(e){var t=e.childNodes,n=t.length;if(n<2)return n?t[0]:e;var r=p.call(t,0);return{ELEMENT_NODE:1,nodeType:111,firstChild:r[0],lastChild:r[n-1],valueOf:function(){if(t.length!==n)for(var a=0;a<n;)e.appendChild(r[a++]);return e}}}(c))},O=function e(t,n,r){for(var a=t.stack,o=0;o<r;o++){var i=n[o];i instanceof $?n[o]=S(a[o]||(a[o]={stack:[],entry:null,wire:null}),i):s(i)?e(a[o]||(a[o]={stack:[],entry:null,wire:null}),i,i.length):a[o]=null}r<a.length&&a.splice(r)};function $(e,t,n){this.type=e,this.template=t,this.values=n}var j=Object.create,H=Object.defineProperties,W=function(e){var n=t(new WeakMap);return H((function(t){for(var n=arguments.length,r=new Array(n>1?n-1:0),a=1;a<n;a++)r[a-1]=arguments[a];return new $(e,t,r)}),{for:{value:function(t,r){var a=n.get(t)||n.set(t,j(null));return a[r]||(a[r]=function(t){return function(n){for(var r=arguments.length,a=new Array(r>1?r-1:0),o=1;o<r;o++)a[o-1]=arguments[o];return S(t,{type:e,template:n,values:a})}}({stack:[],entry:null,wire:null}))}},node:{value:function(t){for(var n=arguments.length,r=new Array(n>1?n-1:0),a=1;a<n;a++)r[a-1]=arguments[a];return S({stack:[],entry:null,wire:null},{type:e,template:t,values:r}).valueOf()}}})},B=t(new WeakMap),z=W("html"),D=W("svg");return e.Hole=$,e.html=z,e.render=function(e,t){var n="function"==typeof t?t():t,r=B.get(e)||B.set(e,{stack:[],entry:null,wire:null}),a=n instanceof $?S(r,n):n;return a!==r.wire&&(r.wire=a,e.textContent="",e.appendChild(a.valueOf())),e},e.svg=D,e}({});
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..5d3cb51
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1759 @@
+{
+  "name": "uhtml",
+  "version": "5.0.9",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "uhtml",
+      "version": "5.0.9",
+      "license": "MIT",
+      "dependencies": {
+        "@webreflection/alien-signals": "^0.3.2"
+      },
+      "devDependencies": {
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@rollup/plugin-terser": "^0.4.4",
+        "c8": "^10.1.3",
+        "rollup": "^4.46.2",
+        "typescript": "^5.9.2"
+      }
+    },
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz",
+      "integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.12",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
+      "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.10.tgz",
+      "integrity": "sha512-0pPkgz9dY+bijgistcTTJ5mR+ocqRXLuhXHYdzoMmmoJ2C9S46RCm2GMUbatPEUK9Yjy26IrAy8D/M00lLkv+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.4.tgz",
+      "integrity": "sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.29",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
+      "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-16.0.1.tgz",
+      "integrity": "sha512-tk5YCxJWIG81umIvNkSod2qK5KyQW19qcBF/B78n1bjtOON6gzKoVeSzAE8yHCZEDmqkHKkxplExA8KzdJLJpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "@types/resolve": "1.20.2",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.78.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-terser": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.4.tgz",
+      "integrity": "sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "serialize-javascript": "^6.0.1",
+        "smob": "^1.0.0",
+        "terser": "^5.17.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.2.0.tgz",
+      "integrity": "sha512-qWJ2ZTbmumwiLFomfzTyt5Kng4hwPi9rwCYN4SHb6eaRU1KNO4ccxINHr/VhH4GgPlt1XfSTLX2LBTme8ne4Zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.46.2.tgz",
+      "integrity": "sha512-Zj3Hl6sN34xJtMv7Anwb5Gu01yujyE/cLBDB2gnHTAHaWS1Z38L7kuSG+oAh0giZMqG060f/YBStXtMH6FvPMA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.46.2.tgz",
+      "integrity": "sha512-nTeCWY83kN64oQ5MGz3CgtPx8NSOhC5lWtsjTs+8JAJNLcP3QbLCtDDgUKQc/Ro/frpMq4SHUaHN6AMltcEoLQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.46.2.tgz",
+      "integrity": "sha512-HV7bW2Fb/F5KPdM/9bApunQh68YVDU8sO8BvcW9OngQVN3HHHkw99wFupuUJfGR9pYLLAjcAOA6iO+evsbBaPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.46.2.tgz",
+      "integrity": "sha512-SSj8TlYV5nJixSsm/y3QXfhspSiLYP11zpfwp6G/YDXctf3Xkdnk4woJIF5VQe0of2OjzTt8EsxnJDCdHd2xMA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.46.2.tgz",
+      "integrity": "sha512-ZyrsG4TIT9xnOlLsSSi9w/X29tCbK1yegE49RYm3tu3wF1L/B6LVMqnEWyDB26d9Ecx9zrmXCiPmIabVuLmNSg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.46.2.tgz",
+      "integrity": "sha512-pCgHFoOECwVCJ5GFq8+gR8SBKnMO+xe5UEqbemxBpCKYQddRQMgomv1104RnLSg7nNvgKy05sLsY51+OVRyiVw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.46.2.tgz",
+      "integrity": "sha512-EtP8aquZ0xQg0ETFcxUbU71MZlHaw9MChwrQzatiE8U/bvi5uv/oChExXC4mWhjiqK7azGJBqU0tt5H123SzVA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.46.2.tgz",
+      "integrity": "sha512-qO7F7U3u1nfxYRPM8HqFtLd+raev2K137dsV08q/LRKRLEc7RsiDWihUnrINdsWQxPR9jqZ8DIIZ1zJJAm5PjQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.46.2.tgz",
+      "integrity": "sha512-3dRaqLfcOXYsfvw5xMrxAk9Lb1f395gkoBYzSFcc/scgRFptRXL9DOaDpMiehf9CO8ZDRJW2z45b6fpU5nwjng==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.46.2.tgz",
+      "integrity": "sha512-fhHFTutA7SM+IrR6lIfiHskxmpmPTJUXpWIsBXpeEwNgZzZZSg/q4i6FU4J8qOGyJ0TR+wXBwx/L7Ho9z0+uDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.46.2.tgz",
+      "integrity": "sha512-i7wfGFXu8x4+FRqPymzjD+Hyav8l95UIZ773j7J7zRYc3Xsxy2wIn4x+llpunexXe6laaO72iEjeeGyUFmjKeA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.46.2.tgz",
+      "integrity": "sha512-B/l0dFcHVUnqcGZWKcWBSV2PF01YUt0Rvlurci5P+neqY/yMKchGU8ullZvIv5e8Y1C6wOn+U03mrDylP5q9Yw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.46.2.tgz",
+      "integrity": "sha512-32k4ENb5ygtkMwPMucAb8MtV8olkPT03oiTxJbgkJa7lJ7dZMr0GCFJlyvy+K8iq7F/iuOr41ZdUHaOiqyR3iQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.46.2.tgz",
+      "integrity": "sha512-t5B2loThlFEauloaQkZg9gxV05BYeITLvLkWOkRXogP4qHXLkWSbSHKM9S6H1schf/0YGP/qNKtiISlxvfmmZw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.46.2.tgz",
+      "integrity": "sha512-YKjekwTEKgbB7n17gmODSmJVUIvj8CX7q5442/CK80L8nqOUbMtf8b01QkG3jOqyr1rotrAnW6B/qiHwfcuWQA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.46.2.tgz",
+      "integrity": "sha512-Jj5a9RUoe5ra+MEyERkDKLwTXVu6s3aACP51nkfnK9wJTraCC8IMe3snOfALkrjTYd2G1ViE1hICj0fZ7ALBPA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.46.2.tgz",
+      "integrity": "sha512-7kX69DIrBeD7yNp4A5b81izs8BqoZkCIaxQaOpumcJ1S/kmqNFjPhDu1LHeVXv0SexfHQv5cqHsxLOjETuqDuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.46.2.tgz",
+      "integrity": "sha512-wiJWMIpeaak/jsbaq2HMh/rzZxHVW1rU6coyeNNpMwk5isiPjSTx0a4YLSlYDwBH/WBvLz+EtsNqQScZTLJy3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.46.2.tgz",
+      "integrity": "sha512-gBgaUDESVzMgWZhcyjfs9QFK16D8K6QZpwAaVNJxYDLHWayOta4ZMjGm/vsAEy3hvlS2GosVFlBlP9/Wb85DqQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.46.2.tgz",
+      "integrity": "sha512-CvUo2ixeIQGtF6WvuB87XWqPQkoFAFqW+HUo/WzHwuHDvIwZCtjdWXoYCcr06iKGydiqTclC4jU/TNObC/xKZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
+      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/resolve": {
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webreflection/alien-signals": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@webreflection/alien-signals/-/alien-signals-0.3.2.tgz",
+      "integrity": "sha512-DmNjD8Kq5iM+Toirp3llS/izAiI3Dwav5nHRvKdR/YJBTgun3y4xK76rs9CFYD2bZwZJN/rP+HjEqKTteGK+Yw==",
+      "license": "MIT",
+      "dependencies": {
+        "alien-signals": "^2.0.6"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/alien-signals": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-2.0.6.tgz",
+      "integrity": "sha512-P3TxJSe31bUHBiblg59oU1PpaWPtmxF9GhJ/cB7OkgJ0qN/ifFSKUI25/v8ZhsT+lIG6ac8DpTOplXxORX6F3Q==",
+      "license": "MIT"
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/c8": {
+      "version": "10.1.3",
+      "resolved": "https://registry.npmjs.org/c8/-/c8-10.1.3.tgz",
+      "integrity": "sha512-LvcyrOAaOnrrlMpW22n690PUvxiq4Uf9WMhQwNJ9vgagkL/ph1+D4uvjvDA5XCbykrc0sx+ay6pVi9YZ1GnhyA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@bcoe/v8-coverage": "^1.0.1",
+        "@istanbuljs/schema": "^0.1.3",
+        "find-up": "^5.0.0",
+        "foreground-child": "^3.1.1",
+        "istanbul-lib-coverage": "^3.2.0",
+        "istanbul-lib-report": "^3.0.1",
+        "istanbul-reports": "^3.1.6",
+        "test-exclude": "^7.0.1",
+        "v8-to-istanbul": "^9.0.0",
+        "yargs": "^17.7.2",
+        "yargs-parser": "^21.1.1"
+      },
+      "bin": {
+        "c8": "bin/c8.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "monocart-coverage-reports": "^2"
+      },
+      "peerDependenciesMeta": {
+        "monocart-coverage-reports": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
+      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
+      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^4.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.7.tgz",
+      "integrity": "sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/make-dir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.46.2.tgz",
+      "integrity": "sha512-WMmLFI+Boh6xbop+OAGo9cQ3OgX9MIg7xOQjn+pTCwOkk+FNDAeAemXkJ3HzDJrVXleLOFVa1ipuc1AmEx1Dwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.46.2",
+        "@rollup/rollup-android-arm64": "4.46.2",
+        "@rollup/rollup-darwin-arm64": "4.46.2",
+        "@rollup/rollup-darwin-x64": "4.46.2",
+        "@rollup/rollup-freebsd-arm64": "4.46.2",
+        "@rollup/rollup-freebsd-x64": "4.46.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.46.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.46.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.46.2",
+        "@rollup/rollup-linux-arm64-musl": "4.46.2",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.46.2",
+        "@rollup/rollup-linux-ppc64-gnu": "4.46.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.46.2",
+        "@rollup/rollup-linux-riscv64-musl": "4.46.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.46.2",
+        "@rollup/rollup-linux-x64-gnu": "4.46.2",
+        "@rollup/rollup-linux-x64-musl": "4.46.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.46.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.46.2",
+        "@rollup/rollup-win32-x64-msvc": "4.46.2",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/smob": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/smob/-/smob-1.5.0.tgz",
+      "integrity": "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.43.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.43.1.tgz",
+      "integrity": "sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.14.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/test-exclude": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-7.0.1.tgz",
+      "integrity": "sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^10.4.1",
+        "minimatch": "^9.0.4"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/v8-to-istanbul": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz",
+      "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.12",
+        "@types/istanbul-lib-coverage": "^2.0.1",
+        "convert-source-map": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index 7111b76..381149e 100644
--- a/package.json
+++ b/package.json
@@ -1,86 +1,111 @@
-{
-  "name": "uhtml",
-  "version": "2.7.6",
-  "description": "A micro HTML/SVG render",
-  "main": "cjs/index.js",
-  "types": "index.d.ts",
-  "scripts": {
-    "build": "node pony.js && npm run cjs && npm run rollup:async && npm run rollup:es && npm run rollup:babel && drop-babel-typeof ./index.js && npm run min && npm run test && npm run size",
-    "cjs": "rm cjs/*.js && ascjs --no-default esm cjs",
-    "rollup:async": "rollup --config rollup/async.config.js && sed -i.bck 's/^var /self./' async.js && rm -rf async.js.bck",
-    "rollup:es": "rollup --config rollup/es.config.js && sed -i.bck 's/^var /self./' es.js && rm -rf es.js.bck",
-    "rollup:babel": "rollup --config rollup/babel.config.js && sed -i.bck 's/^var /self./' index.js && rm -rf index.js.bck",
-    "min": "terser index.js -c -m -o min.js",
-    "size": "cat min.js | brotli | wc -c && cat es.js | brotli | wc -c",
-    "coveralls": "c8 report --reporter=text-lcov | coveralls",
-    "test": "node test/coverage.init.js && c8 node test/coverage.js"
-  },
-  "keywords": [
-    "micro",
-    "HTML",
-    "render"
-  ],
-  "author": "Andrea Giammarchi",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.7",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@ungap/degap": "^0.2.7",
-    "ascjs": "^5.0.1",
-    "c8": "^7.7.3",
-    "coveralls": "^3.1.1",
-    "drop-babel-typeof": "^1.0.3",
-    "linkedom": "^0.9.7",
-    "rollup": "^2.52.3",
-    "rollup-plugin-includepaths": "^0.2.4",
-    "rollup-plugin-terser": "^7.0.2",
-    "terser": "^5.7.1"
-  },
-  "dependencies": {
-    "@ungap/create-content": "^0.3.1",
-    "async-tag": "^0.2.0",
-    "jsx2tag": "^0.3.0",
-    "uarray": "^1.0.0",
-    "udomdiff": "^1.1.0",
-    "uhandlers": "^0.5.0",
-    "umap": "^1.0.2",
-    "uparser": "^0.2.1",
-    "uwire": "^1.1.0"
-  },
-  "module": "./esm/index.js",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": "./esm/index.js",
-      "default": "./cjs/index.js"
-    },
-    "./async": {
-      "import": "./esm/async.js",
-      "default": "./cjs/async.js"
-    },
-    "./init": {
-      "import": "./esm/init.js",
-      "default": "./cjs/init.js"
-    },
-    "./json": {
-      "import": "./esm/json.js",
-      "default": "./cjs/json.js"
-    },
-    "./jsx": {
-      "import": "./esm/x.js",
-      "default": "./cjs/x.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "unpkg": "min.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WebReflection/uhtml.git"
-  },
-  "bugs": {
-    "url": "https://github.com/WebReflection/uhtml/issues"
-  },
-  "homepage": "https://github.com/WebReflection/uhtml#readme"
-}
+{
+  "name": "uhtml",
+  "version": "5.0.9",
+  "type": "module",
+  "scripts": {
+    "build": "npm run types && npm run build:js",
+    "build:js": "rm -rf dist && npm test && npm run build:prod && npm run build:dev && npm run size",
+    "build:dev": "sed -i 's/false/true/' src/debug.js && rollup -c build/dev.js",
+    "build:prod": "sed -i 's/true/false/' src/debug.js && rollup -c build/prod.js",
+    "coverage": "mkdir -p ./coverage; c8 report --reporter=text-lcov > ./coverage/lcov.info",
+    "size": "echo \"dom\t\t$(cat dist/prod/dom.js | brotli | wc -c)\"; echo \"json\t\t$(cat dist/prod/json.js | brotli | wc -c)\"; echo \"parser\t\t$(cat dist/prod/parser.js | brotli | wc -c)\"",
+    "test": "c8 node test/parser.js",
+    "test:json": "node test/json.js",
+    "test:all": "npm run test:json && npm run test",
+    "types": "rm -rf types && tsc --allowJs --checkJs --lib dom,esnext --moduleResolution nodenext --module NodeNext --target esnext -d --emitDeclarationOnly --outDir ./types ./src/*.js ./src/*/*.js"
+  },
+  "files": [
+    "dist",
+    "types",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "types": "./types/dom/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/prod/dom.js",
+      "types": "./types/dom/index.d.ts",
+      "description": "uhtml default browsers' export"
+    },
+    "./auto": {
+      "import": "./dist/prod/cdn.js",
+      "types": "./types/dom/index.d.ts",
+      "description": "uhtml browsers' export with automatic dev/prod switch on ?dev or ?debug pages' URLs"
+    },
+    "./cdn": {
+      "import": "./dist/prod/cdn.js",
+      "types": "./types/dom/index.d.ts",
+      "description": "uhtml browsers' export with automatic dev/prod switch on ?dev or ?debug pages' URLs"
+    },
+    "./debug": {
+      "import": "./dist/dev/dom.js",
+      "types": "./types/dom/index.d.ts",
+      "description": "alias for uhtml browsers' debugging export"
+    },
+    "./dev": {
+      "import": "./dist/dev/dom.js",
+      "types": "./types/dom/index.d.ts",
+      "description": "explicit uhtml browsers' debugging export"
+    },
+    "./prod": {
+      "import": "./dist/prod/dom.js",
+      "types": "./types/dom/index.d.ts",
+      "description": "explicit uhtml browsers' production export"
+    },
+    "./dom": {
+      "import": "./src/dom/index.js",
+      "types": "./types/dom/index.d.ts",
+      "description": "source code shortcut for ./src/dom/index.js"
+    },
+    "./dom/creator": {
+      "import": "./src/dom/creator.js",
+      "types": "./types/dom/creator.d.ts",
+      "description": "source code shortcut for ./src/dom/creator.js"
+    },
+    "./dom/ish": {
+      "import": "./src/dom/ish.js",
+      "types": "./types/dom/ish.d.ts",
+      "description": "source code shortcut for ./src/dom/ish.js"
+    },
+    "./json": {
+      "import": "./src/json/index.js",
+      "types": "./types/json/index.d.ts",
+      "description": "source code shortcut for ./src/json/index.js"
+    },
+    "./parser": {
+      "import": "./src/parser/index.js",
+      "types": "./types/parser/index.d.ts",
+      "description": "source code shortcut for ./src/parser/index.js"
+    }
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "c8": "^10.1.3",
+    "rollup": "^4.46.2",
+    "typescript": "^5.9.2"
+  },
+  "description": "A minimalistic library to create fast and reactive Web pages",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WebReflection/uhtml.git"
+  },
+  "keywords": [
+    "template",
+    "literals",
+    "vanilla",
+    "components",
+    "dom",
+    "library"
+  ],
+  "author": "Andrea Giammarchi, @WebReflection",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/WebReflection/uhtml/issues"
+  },
+  "homepage": "https://github.com/WebReflection/uhtml#readme",
+  "dependencies": {
+    "@webreflection/alien-signals": "^0.3.2"
+  }
+}
diff --git a/pony.js b/pony.js
deleted file mode 100644
index c99dee5..0000000
--- a/pony.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import {readFileSync, writeFileSync} from 'fs';
-
-const dropIE = s => s.replace(/^import\s+.+/mg, '').replace(/^export\s+/mg, '');
-
-const createContent = readFileSync('./node_modules/@ungap/create-content/esm/index.js').toString();
-const uwire = readFileSync('./node_modules/uwire/esm/index.js').toString();
-const uhandlers = readFileSync('./node_modules/uhandlers/esm/index.js').toString();
-
-const init = readFileSync('./esm/init.js').toString();
-const node = readFileSync('./esm/node.js').toString();
-const handlers = readFileSync('./esm/handlers.js').toString();
-const rabbit = readFileSync('./esm/rabbit.js').toString();
-const index = readFileSync('./esm/index.js').toString();
-
-const outcome = [
-  createContent.replace(/^export\s+.*/mg, ''),
-  dropIE(uwire),
-  dropIE(uhandlers),
-  dropIE(node).replace(/^\{.+?\};/mg, ''),
-  dropIE(handlers),
-  dropIE(rabbit),
-  dropIE(index).replace(/\bcache\b/g, '_cache').replace(/^\{/m, 'return {')
-];
-
-writeFileSync(
-  './esm/init.js',
-  init.replace(
-    /\/\*\*start\*\*\/[\s\S]*?\/\*\*end\*\*\//,
-    `/**start**/\n${outcome.join('\n')}\n/**end**/`
-  )
-);
diff --git a/rollup/async.config.js b/rollup/async.config.js
deleted file mode 100644
index 71f7cb5..0000000
--- a/rollup/async.config.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import {nodeResolve} from '@rollup/plugin-node-resolve';
-import {terser} from 'rollup-plugin-terser';
-import includePaths from 'rollup-plugin-includepaths';
-
-export default {
-  input: './esm/async.js',
-  plugins: [
-    includePaths({
-      include: {
-        '@ungap/create-content': 'node_modules/@ungap/degap/create-content.js'
-      },
-    }),
-    nodeResolve(),
-    terser()
-  ],
-  
-  output: {
-    esModule: false,
-    exports: 'named',
-    file: './async.js',
-    format: 'iife',
-    name: 'uhtml'
-  }
-};
diff --git a/rollup/babel.config.js b/rollup/babel.config.js
deleted file mode 100644
index dad2a8b..0000000
--- a/rollup/babel.config.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import {nodeResolve} from '@rollup/plugin-node-resolve';
-import babel from '@rollup/plugin-babel';
-
-export default {
-  input: './esm/index.js',
-  plugins: [
-    nodeResolve(),
-    babel({
-      presets: ['@babel/preset-env'],
-      babelHelpers: 'bundled'
-    })
-  ],
-  
-  output: {
-    esModule: false,
-    exports: 'named',
-    file: './index.js',
-    format: 'iife',
-    name: 'uhtml'
-  }
-};
diff --git a/rollup/es.config.js b/rollup/es.config.js
deleted file mode 100644
index 7b571e0..0000000
--- a/rollup/es.config.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import {nodeResolve} from '@rollup/plugin-node-resolve';
-import {terser} from 'rollup-plugin-terser';
-import includePaths from 'rollup-plugin-includepaths';
-
-export default {
-  input: './esm/index.js',
-  plugins: [
-    includePaths({
-      include: {
-        '@ungap/create-content': 'node_modules/@ungap/degap/create-content.js'
-      },
-    }),
-    nodeResolve(),
-    terser()
-  ],
-  
-  output: {
-    esModule: false,
-    exports: 'named',
-    file: './es.js',
-    format: 'iife',
-    name: 'uhtml'
-  }
-};
diff --git a/src/debug.js b/src/debug.js
new file mode 100644
index 0000000..8bc7a17
--- /dev/null
+++ b/src/debug.js
@@ -0,0 +1 @@
+export default true;
diff --git a/src/dom/cdn.js b/src/dom/cdn.js
new file mode 100644
index 0000000..413245d
--- /dev/null
+++ b/src/dom/cdn.js
@@ -0,0 +1,19 @@
+const resolve = ({ protocol, host, pathname }) => {
+  const dev = /[?&](?:dev|debug)(?:=|$)/.test(location.search);
+  let path = pathname.replace(/\+\S*?$/, '');
+  path = path.replace(/\/(?:auto|cdn)(?:\/|\.js\S*)$/, '/');
+  path = path.replace(/\/(?:dist\/)?(?:dev|prod)\//, '/');
+  return `${protocol}//${host}${path}dist/${dev ? 'dev' : 'prod'}/dom.js`;
+};
+
+const uhtml = Symbol.for('µhtml');
+
+const {
+  render, html, svg,
+  computed, signal, batch, effect, untracked,
+} = globalThis[uhtml] || (globalThis[uhtml] = await import(/* webpackIgnore: true */resolve(new URL(import.meta.url))));
+
+export {
+  render, html, svg,
+  computed, signal, batch, effect, untracked,
+};
diff --git a/src/dom/creator.js b/src/dom/creator.js
new file mode 100644
index 0000000..1d4efad
--- /dev/null
+++ b/src/dom/creator.js
@@ -0,0 +1,29 @@
+// @ts-check
+
+/**
+ * @param {Document} document
+ * @returns
+ */
+export default (document = /** @type {Document} */(globalThis.document)) => {
+  let tpl = document.createElement('template'), range;
+  /**
+   * @param {string} content
+   * @param {boolean} [xml=false]
+   * @returns {DocumentFragment}
+   */
+  return (content, xml = false) => {
+    if (xml) {
+      if (!range) {
+        range = document.createRange();
+        range.selectNodeContents(
+          document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+        );
+      }
+      return range.createContextualFragment(content);
+    }
+    tpl.innerHTML = content;
+    const fragment = tpl.content;
+    tpl = /** @type {HTMLTemplateElement} */(tpl.cloneNode(false));
+    return fragment;
+  };
+};
diff --git a/src/dom/diff.js b/src/dom/diff.js
new file mode 100644
index 0000000..d335758
--- /dev/null
+++ b/src/dom/diff.js
@@ -0,0 +1,162 @@
+// @see https://github.com/WebReflection/udomdiff
+
+/**
+ * ISC License
+ *
+ * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+ * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+ * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+ * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+ * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+ * PERFORMANCE OF THIS SOFTWARE.
+ */
+
+/**
+ * @param {Node[]} a The list of current/live children
+ * @param {Node[]} b The list of future children
+ * @param {(entry: Node, action: number) => Node} get
+ * The callback invoked per each entry related DOM operation.
+ * @param {Node} [before] The optional node used as anchor to insert before.
+ * @returns {Node[]} The same list of future children.
+ */
+export default (a, b, get, before) => {
+  const parentNode = before.parentNode;
+  const bLength = b.length;
+  let aEnd = a.length;
+  let bEnd = bLength;
+  let aStart = 0;
+  let bStart = 0;
+  let map = null;
+  while (aStart < aEnd || bStart < bEnd) {
+    // append head, tail, or nodes in between: fast path
+    if (aEnd === aStart) {
+      // we could be in a situation where the rest of nodes that
+      // need to be added are not at the end, and in such case
+      // the node to `insertBefore`, if the index is more than 0
+      // must be retrieved, otherwise it's gonna be the first item.
+      const node = bEnd < bLength ?
+        (bStart ?
+          (get(b[bStart - 1], -0).nextSibling) :
+          get(b[bEnd], 0)) :
+        before;
+      while (bStart < bEnd)
+        parentNode.insertBefore(get(b[bStart++], 1), node);
+    }
+    // remove head or tail: fast path
+    else if (bEnd === bStart) {
+      while (aStart < aEnd) {
+        // remove the node only if it's unknown or not live
+        if (!map || !map.has(a[aStart]))
+          //@ts-ignore
+          get(a[aStart], -1).remove();
+        aStart++;
+      }
+    }
+    // same node: fast path
+    else if (a[aStart] === b[bStart]) {
+      aStart++;
+      bStart++;
+    }
+    // same tail: fast path
+    else if (a[aEnd - 1] === b[bEnd - 1]) {
+      aEnd--;
+      bEnd--;
+    }
+    // The once here single last swap "fast path" has been removed in v1.1.0
+    // https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
+    // reverse swap: also fast path
+    else if (
+      a[aStart] === b[bEnd - 1] &&
+      b[bStart] === a[aEnd - 1]
+    ) {
+      // this is a "shrink" operation that could happen in these cases:
+      // [1, 2, 3, 4, 5]
+      // [1, 4, 3, 2, 5]
+      // or asymmetric too
+      // [1, 2, 3, 4, 5]
+      // [1, 2, 3, 5, 6, 4]
+      const node = get(a[--aEnd], -0).nextSibling;
+      parentNode.insertBefore(
+        get(b[bStart++], 1),
+        get(a[aStart++], -0).nextSibling
+      );
+      parentNode.insertBefore(get(b[--bEnd], 1), node);
+      // mark the future index as identical (yeah, it's dirty, but cheap 👍)
+      // The main reason to do this, is that when a[aEnd] will be reached,
+      // the loop will likely be on the fast path, as identical to b[bEnd].
+      // In the best case scenario, the next loop will skip the tail,
+      // but in the worst one, this node will be considered as already
+      // processed, bailing out pretty quickly from the map index check
+      a[aEnd] = b[bEnd];
+    }
+    // map based fallback, "slow" path
+    else {
+      // the map requires an O(bEnd - bStart) operation once
+      // to store all future nodes indexes for later purposes.
+      // In the worst case scenario, this is a full O(N) cost,
+      // and such scenario happens at least when all nodes are different,
+      // but also if both first and last items of the lists are different
+      if (!map) {
+        map = new Map;
+        let i = bStart;
+        while (i < bEnd)
+          map.set(b[i], i++);
+      }
+
+      const index = map.get(a[aStart]) ?? -1;
+
+      // this node has no meaning in the future list, so it's more than safe
+      // to remove it, and check the next live node out instead, meaning
+      // that only the live list index should be forwarded
+      //@ts-ignore
+      if (index < 0) get(a[aStart++], -1).remove();
+      // it's a future node, hence it needs some handling
+      else {
+        // if it's not already processed, look on demand for the next LCS
+        if (bStart < index && index < bEnd) {
+          let i = aStart;
+          // counts the amount of nodes that are the same in the future
+          let sequence = 1;
+          while (++i < aEnd && i < bEnd && map.get(a[i]) === (index + sequence))
+            sequence++;
+          // effort decision here: if the sequence is longer than replaces
+          // needed to reach such sequence, which would brings again this loop
+          // to the fast path, prepend the difference before a sequence,
+          // and move only the future list index forward, so that aStart
+          // and bStart will be aligned again, hence on the fast path.
+          // An example considering aStart and bStart are both 0:
+          // a: [1, 2, 3, 4]
+          // b: [7, 1, 2, 3, 6]
+          // this would place 7 before 1 and, from that time on, 1, 2, and 3
+          // will be processed at zero cost
+          if (sequence > (index - bStart)) {
+            const node = get(a[aStart], 0);
+            while (bStart < index)
+              parentNode.insertBefore(get(b[bStart++], 1), node);
+          }
+          // if the effort wasn't good enough, fallback to a replace,
+          // moving both source and target indexes forward, hoping that some
+          // similar node will be found later on, to go back to the fast path
+          else {
+            // TODO: benchmark replaceWith instead
+            parentNode.replaceChild(
+              get(b[bStart++], 1),
+              get(a[aStart++], -1)
+            );
+          }
+        }
+        // otherwise move the source forward, 'cause there's nothing to do
+        else
+          aStart++;
+      }
+    }
+  }
+  return b;
+};
diff --git a/src/dom/direct.js b/src/dom/direct.js
new file mode 100644
index 0000000..065ce16
--- /dev/null
+++ b/src/dom/direct.js
@@ -0,0 +1,9 @@
+let direct = true;
+
+/** @param {boolean} value */
+export const _set = value => {
+  direct = value;
+};
+
+/** @returns {boolean} */
+export const _get = () => direct;
diff --git a/src/dom/index.js b/src/dom/index.js
new file mode 100644
index 0000000..99cdfab
--- /dev/null
+++ b/src/dom/index.js
@@ -0,0 +1,116 @@
+//@ts-check
+
+import DEBUG from '../debug.js';
+
+//@ts-ignore
+import { effectScope } from '@webreflection/alien-signals';
+export { signal, computed, effect, untracked, batch } from './signals.js';
+
+import {
+  Comment,
+  DocumentType,
+  Text,
+  Fragment,
+  Element,
+  Component,
+} from './ish.js';
+
+import parser from '../parser/index.js';
+import { Hole, dom } from './rabbit.js';
+import { Keyed } from './keyed.js';
+import { isKeyed, fragment, update } from './update.js';
+import { diffFragment } from './persistent-fragment.js';
+
+import { _get as getDirect, _set as setDirect } from './direct.js';
+
+import { unsafe } from '../utils.js';
+export { Hole, fragment, unsafe };
+
+/** @typedef {globalThis.Element | globalThis.HTMLElement | globalThis.SVGSVGElement | globalThis.DocumentFragment} Container */
+
+const parse = parser({
+  Comment,
+  DocumentType,
+  Text,
+  Fragment,
+  Element,
+  Component,
+  update,
+});
+
+/**
+ * @param {boolean} xml
+ * @param {WeakMap<TemplateStringsArray | string[], [any, any[], Keyed?]>} twm
+ * @returns
+ */
+const create = (xml, twm = new WeakMap) =>
+  /**
+   * @param {TemplateStringsArray | string[]} template
+   * @param {unknown[]} values
+   * @returns {Hole}
+   */
+  (template, ...values) => {
+    let parsed = twm.get(template);
+    if (!parsed) {
+      parsed = parse(template, values, xml);
+      parsed.push(isKeyed() ? new Keyed : null);
+      if (DEBUG) parsed.push(template);
+      parsed[0] = fragment(parsed[0].toString(), xml);
+      twm.set(template, parsed);
+    }
+    return new Hole(parsed, values);
+  };
+
+const htmlHole = create(false);
+const svgHole = create(true);
+
+const rendered = new WeakMap;
+
+/**
+ * @param {TemplateStringsArray | string[]} template
+ * @param {any[]} values
+ * @returns {Node | HTMLElement | Hole}
+ */
+export function html(template, ...values) {
+  const hole = htmlHole.apply(null, arguments);
+  return getDirect() ? hole.valueOf(true) : hole;
+}
+
+/**
+ * @param {TemplateStringsArray | string[]} template
+ * @param {any[]} values
+ * @returns {Node | SVGSVGElement | Hole}
+ */
+export function svg(template, ...values) {
+  const hole = svgHole.apply(null, arguments);
+  return getDirect() ? hole.valueOf(true) : hole;
+}
+
+/**
+ * @param {Container} where
+ * @param {Function | Node | Container} what
+ * @returns
+ */
+export const render = (where, what) => {
+  const known = rendered.get(where);
+  if (known) known[0]();
+  if (typeof what === 'function') {
+    setDirect(false);
+    let hole;
+    const scope = effectScope(() => { hole = what() });
+    //@ts-ignore
+    if (!known || known[1].t !== hole.t) {
+      //@ts-ignore
+      const d = hole.valueOf(false);
+      where.replaceChildren(d);
+    }
+    else known[1].update(hole);
+    rendered.set(where, [scope, hole]);
+  }
+  else {
+    setDirect(true);
+    rendered.delete(where);
+    where.replaceChildren(what instanceof Hole ? dom(what) : diffFragment(what, 1));
+  }
+  return where;
+};
diff --git a/src/dom/ish.js b/src/dom/ish.js
new file mode 100644
index 0000000..5b74fa7
--- /dev/null
+++ b/src/dom/ish.js
@@ -0,0 +1,231 @@
+// this is an essential ad-hoc DOM facade
+
+import { assign, freeze, isArray } from '../utils.js';
+
+export const ELEMENT = 1;
+export const ATTRIBUTE = 2;
+export const TEXT = 3;
+export const COMMENT = 8;
+export const DOCUMENT_TYPE = 10;
+export const FRAGMENT = 11;
+export const COMPONENT = 42;
+
+export const TEXT_ELEMENTS = new Set([
+  'plaintext',
+  'script',
+  'style',
+  'textarea',
+  'title',
+  'xmp',
+]);
+
+export const VOID_ELEMENTS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'menuitem',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]);
+
+export const props = freeze({});
+export const children = freeze([]);
+
+export const append = (node, child) => {
+  if (node.children === children) node.children = [];
+  node.children.push(child);
+  child.parent = node;
+  return child;
+};
+
+export const prop = (node, name, value) => {
+  if (node.props === props) node.props = {};
+  node.props[name] = value;
+};
+
+const addJSON = (value, comp, json) => {
+  if (value !== comp) json.push(value);
+};
+
+const setChildren = (node, json) => {
+  node.children = json.map(revive, node);
+};
+
+const setJSON = (node, json, index) => {
+  switch (json.length) {
+    case index: setChildren(node, json[index - 1]);
+    case index - 1: {
+      const value = json[index - 2];
+      if (isArray(value)) setChildren(node, value);
+      else node.props = assign({}, value);
+    }
+  }
+  return node;
+};
+
+function revive(json) {
+  const node = fromJSON(json);
+  node.parent = this;
+  return node;
+}
+
+export const fromJSON = json => {
+  switch (json[0]) {
+    case COMMENT: return new Comment(json[1]);
+    case DOCUMENT_TYPE: return new DocumentType(json[1]);
+    case TEXT: return new Text(json[1]);
+    case COMPONENT: return setJSON(new Component, json, 3);
+    case ELEMENT: return setJSON(new Element(json[1], !!json[2]), json, 5);
+    case FRAGMENT: {
+      const node = new Fragment;
+      if (1 < json.length) node.children = json[1].map(revive, node);
+      return node;
+    }
+  }
+};
+
+export class Node {
+  constructor(type) {
+    this.type = type;
+    this.parent = null;
+  }
+
+  toJSON() {
+    //@ts-ignore
+    return [this.type, this.data];
+  }
+}
+
+export class Comment extends Node {
+  constructor(data) {
+    super(COMMENT);
+    this.data = data;
+  }
+
+  toString() {
+    return `<!--${this.data}-->`;
+  }
+}
+
+export class DocumentType extends Node {
+  constructor(data) {
+    super(DOCUMENT_TYPE);
+    this.data = data;
+  }
+
+  toString() {
+    return `<!${this.data}>`;
+  }
+}
+
+export class Text extends Node {
+  constructor(data) {
+    super(TEXT);
+    this.data = data;
+  }
+
+  toString() {
+    return this.data;
+  }
+}
+
+export class Component extends Node {
+  constructor() {
+    super(COMPONENT);
+    this.name = 'template';
+    this.props = props;
+    this.children = children;
+  }
+
+  toJSON() {
+    const json = [COMPONENT];
+    addJSON(this.props, props, json);
+    addJSON(this.children, children, json);
+    return json;
+  }
+
+  toString() {
+    let attrs = '';
+    for (const key in this.props) {
+      const value = this.props[key];
+      if (value != null) {
+        /* c8 ignore start */
+        if (typeof value === 'boolean') {
+          if (value) attrs += ` ${key}`;
+        }
+        else attrs += ` ${key}="${value}"`;
+        /* c8 ignore stop */
+      }
+    }
+    return `<template${attrs}>${this.children.join('')}</template>`;
+  }
+}
+
+export class Element extends Node {
+  constructor(name, xml = false) {
+    super(ELEMENT);
+    this.name = name;
+    this.xml = xml;
+    this.props = props;
+    this.children = children;
+  }
+
+  toJSON() {
+    const json = [ELEMENT, this.name, +this.xml];
+    addJSON(this.props, props, json);
+    addJSON(this.children, children, json);
+    return json;
+  }
+
+  toString() {
+    const { xml, name, props, children } = this;
+    const { length } = children;
+    let html = `<${name}`;
+    for (const key in props) {
+      const value = props[key];
+      if (value != null) {
+        if (typeof value === 'boolean') {
+          if (value) html += xml ? ` ${key}=""` : ` ${key}`;
+        }
+        else html += ` ${key}="${value}"`;
+      }
+    }
+    if (length) {
+      html += '>';
+      for (let text = !xml && TEXT_ELEMENTS.has(name), i = 0; i < length; i++)
+        html += text ? children[i].data : children[i];
+      html += `</${name}>`;
+    }
+    else if (xml) html += ' />';
+    else html += VOID_ELEMENTS.has(name) ? '>' : `></${name}>`;
+    return html;
+  }
+}
+
+export class Fragment extends Node {
+  constructor() {
+    super(FRAGMENT);
+    this.name = '#fragment';
+    this.children = children;
+  }
+
+  toJSON() {
+    const json = [FRAGMENT];
+    addJSON(this.children, children, json);
+    return json;
+  }
+
+  toString() {
+    return this.children.join('');
+  }
+}
diff --git a/src/dom/keyed.js b/src/dom/keyed.js
new file mode 100644
index 0000000..dda7784
--- /dev/null
+++ b/src/dom/keyed.js
@@ -0,0 +1,27 @@
+export const keyed = new WeakMap;
+
+//@ts-ignore
+export class Keyed extends Map {
+  constructor() {
+    //@ts-ignore
+    super()._ = new FinalizationRegistry(key => this.delete(key));
+  }
+
+  get(key) {
+    const node = super.get(key)?.deref();
+    return node && keyed.get(node);
+  }
+
+  /**
+   * @param {any} key
+   * @param {Node} node
+   * @param {import('./rabbit.js').Hole} hole
+   */
+  //@ts-ignore
+  set(key, node, hole) {
+    keyed.set(node, hole);
+    //@ts-ignore
+    this._.register(node, key);
+    super.set(key, new WeakRef(node));
+  }
+}
diff --git a/src/dom/persistent-fragment.js b/src/dom/persistent-fragment.js
new file mode 100644
index 0000000..135823d
--- /dev/null
+++ b/src/dom/persistent-fragment.js
@@ -0,0 +1,84 @@
+//@ts-check
+
+import { createComment, defineProperties } from '../utils.js';
+import { children } from './ish.js';
+
+let checkType = false, range;
+
+/**
+ * @param {DocumentFragment} fragment
+ * @returns {Node | Element}
+ */
+const drop = ({ firstChild, lastChild }) => {
+  const r = range || (range = document.createRange());
+  r.setStartAfter(firstChild);
+  r.setEndAfter(lastChild);
+  r.deleteContents();
+  //@ts-ignore
+  return firstChild;
+};
+
+/**
+ * @param {Node} node
+ * @param {1 | 0 | -0 | -1} operation
+ * @returns {Node}
+ */
+export const diffFragment = (node, operation) => (
+  checkType && node.nodeType === 11 ?
+    ((1 / operation) < 0 ?
+      //@ts-ignore
+      (operation ? drop(node) : node.lastChild) :
+      //@ts-ignore
+      (operation ? node.valueOf() : node.firstChild)) :
+    node
+);
+
+export const nodes = Symbol('nodes');
+
+const parentNode = { get() { return this.firstChild.parentNode } };
+//@ts-ignore
+const replaceWith = { value(node) { drop(this).replaceWith(node) } };
+//@ts-ignore
+const remove = { value() { drop(this).remove() } };
+const valueOf = {
+  value() {
+    const { parentNode } = this;
+    if (parentNode === this) {
+      if (this[nodes] === children)
+        this[nodes] = [...this.childNodes];
+    }
+    else {
+      // TODO: verify fragments in lists don't call this twice
+      if (parentNode) {
+        let { firstChild, lastChild } = this;
+        this[nodes] = [firstChild];
+        while (firstChild !== lastChild)
+          this[nodes].push((firstChild = firstChild.nextSibling));
+      }
+      this.replaceChildren(...this[nodes]);
+    }
+    return this;
+  }
+};
+
+/**
+ * @param {DocumentFragment} fragment
+ * @returns {DocumentFragment}
+ */
+export function PersistentFragment(fragment) {
+  const firstChild = createComment('<>'), lastChild = createComment('</>');
+  //@ts-ignore
+  fragment.replaceChildren(firstChild, ...fragment.childNodes, lastChild);
+  checkType = true;
+  return defineProperties(fragment, {
+    [nodes]: { writable: true, value: children },
+    firstChild: { value: firstChild },
+    lastChild: { value: lastChild },
+    parentNode,
+    valueOf,
+    replaceWith,
+    remove,
+  });
+}
+
+PersistentFragment.prototype = DocumentFragment.prototype;
diff --git a/src/dom/rabbit.js b/src/dom/rabbit.js
new file mode 100644
index 0000000..be704ec
--- /dev/null
+++ b/src/dom/rabbit.js
@@ -0,0 +1,265 @@
+//@ts-nocheck
+
+import DEBUG from '../debug.js';
+import errors from '../errors.js';
+
+import resolve from './resolve.js';
+import { children } from './ish.js';
+import { effect } from './signals.js';
+import { isArray } from '../utils.js';
+import { PersistentFragment, diffFragment, nodes } from './persistent-fragment.js';
+import { ARRAY, COMMENT, COMPONENT, EVENT, KEY, REF, SIGNAL, ref } from './update.js';
+
+import { _get as getDirect, _set as setDirect } from './direct.js';
+import { Signal, _get as getSignal, _set as setSignal } from './signals.js';
+
+/**
+ * @param {Hole} hole
+ * @returns
+ */
+export const dom = hole => diffFragment(hole.n ? hole.update(hole) : hole.valueOf(false), 1);
+
+const holed = (prev, current) => {
+  const changes = [], h = prev.length, l = current.length;
+  for (let c, p, j = 0, i = 0; i < l; i++) {
+    c = current[i];
+    changes[i] = j < h && (p = prev[j++]).t === c.t ? (current[i] = p).update(c) : c.valueOf(false);
+  }
+  return changes;
+};
+
+/**
+ * @param {Hole} hole
+ * @param {unknown} value
+ * @returns {Node}
+ */
+const keyed = (hole, value) => /** @type {import('./keyed.js').Keyed} */(hole.t[2]).get(value)?.update(hole) ?? hole.valueOf(false);
+
+/**
+ * 
+ * @param {Function} Component
+ * @param {Object} obj
+ * @param {unknown[]} signals
+ * @returns {Hole}
+ */
+const component = (Component, obj, signals) => {
+  const signal = getSignal();
+  const length = signals.length;
+  let i = 0;
+  setSignal(/** @param {unknown} value */ value => i < length ? signals[i++] : (signals[i++] = signal(value)));
+  const wasDirect = getDirect();
+  if (wasDirect) setDirect(!wasDirect);
+  try { return Component(obj, global); }
+  finally {
+    if (wasDirect) setDirect(wasDirect);
+    setSignal(signal);
+  }
+};
+
+/**
+ * @param {Hole} hole
+ * @param {Hole} value
+ * @returns {Hole}
+ */
+const getHole = (hole, value) => {
+  if (hole.t === value.t) {
+    hole.update(value);
+  }
+  else {
+    hole.n.replaceWith(dom(value));
+    hole = value;
+  }
+  return hole;
+};
+
+const createEffect = (node, value, obj) => {
+  let signals = [], entry = [COMPONENT, null, obj], bootstrap = true, hole;
+  effect(() => {
+    if (bootstrap) {
+      bootstrap = false;
+      hole = component(value, obj, signals);
+      if (!signals.length) signals = children;
+      if (hole) {
+        node.replaceWith(dom(hole));
+        entry[1] = hole;
+      }
+      else node.remove();
+    }
+    else {
+      const result = component(value, obj, signals);
+      if (hole) {
+        if (DEBUG && !(result instanceof Hole)) throw errors.invalid_component(value);
+        if (getHole(hole, /** @type {Hole} */(result)) === result) entry[2] = (hole = result);
+      }
+    }
+  });
+  return entry;
+};
+
+const updateRefs = refs => {
+  for (const node of refs) {
+    const value = node[ref];
+    if (typeof value === 'function')
+      value(node);
+    else if (value instanceof Signal)
+      value.value = node;
+    else if (value)
+      value.current = node;
+  }
+};
+
+const props = Symbol();
+const global = {};
+
+export class Hole {
+  /**
+   * @param {[DocumentFragment, unknown[], import('./keyed.js').Keyed?]} template
+   * @param {unknown[]} values
+   */
+  constructor(template, values) {
+    this.t = template;
+    this.v = values;
+    this.n = null;
+    this.k = -1;
+  }
+
+  /**
+   * @param {boolean} [direct]
+   * @returns {Node}
+   */
+  valueOf(direct = getDirect()) {
+    const [fragment, updates, keys] = this.t;
+    const root = document.importNode(fragment, true);
+    const values = this.v;
+    let length = values.length;
+    let changes = children;
+    let node, prev, refs;
+    if (DEBUG && length !== updates.length) throw errors.invalid_interpolation(this.t[3], values);
+    if (0 < length) {
+      changes = updates.slice(0);
+      while (length--) {
+        const [path, update, type] = updates[length];
+        const value = values[length];
+        if (prev !== path) {
+          node = resolve(root, path);
+          prev = path;
+          if (DEBUG && !node) throw errors.invalid_path(this.t[3], path);
+        }
+        if (type & COMPONENT) {
+          const obj = node[props] || (node[props] = {});
+          if (type === COMPONENT) {
+            for (const { name, value } of node.attributes) obj[name] ??= value;
+            obj.children ??= [...node.content.childNodes];
+            changes[length] = createEffect(node, value, obj);
+          }
+          else {
+            update(obj, value);
+            changes[length] = [type, update, obj];
+          }
+        }
+        else {
+          let commit = true;
+          if (DEBUG && (type & ARRAY) && !isArray(value)) throw errors.invalid_interpolation(this.t[3], value);
+          if (!direct && (type & COMMENT) && !(type & SIGNAL)) {
+            if (type & ARRAY) {
+              commit = false;
+              if (value.length)
+                update(node, value[0] instanceof Hole ? holed(children, value) : value);
+            }
+            else if (value instanceof Hole) {
+              commit = false;
+              update(node, dom(value));
+            }
+          }
+          if (commit) {
+            if (type === KEY) {
+              if (DEBUG && !keys) throw errors.invalid_key(value);
+              this.k = length;
+            }
+            else {
+              if (type === REF) (refs ??= new Set).add(node);
+              update(node, value);
+            }
+          }
+          changes[length] = [type, update, value, node];
+          if (direct && (type & COMMENT)) node.remove();
+        }
+      }
+      if (refs) updateRefs(refs);
+    }
+
+    const { childNodes } = root;
+    const size = childNodes.length;
+    const n = size === 1 ? childNodes[0] : (size ? PersistentFragment(root) : root);
+    this.v = changes;
+    this.n = n;
+    if (-1 < this.k) keys.set(changes[this.k][2], n, this);
+    return n;
+  }
+
+  /**
+   * @param {Hole} hole
+   * @returns {Node}
+   */
+  update(hole) {
+    const key = this.k;
+    const changes = this.v;
+    const values = hole.v;
+
+    if (-1 < key && changes[key][2] !== values[key])
+      return keyed(hole, values[key]);
+
+    let { length } = changes;
+    while (length--) {
+      const entry = changes[length];
+      const [type, update, prev] = entry;
+      if (type === KEY) continue;
+      let value = values[length];
+      if (type & COMPONENT) {
+        if (type === COMPONENT) {
+          if (DEBUG && typeof value !== 'function') throw errors.invalid_component(value);
+          const result = value(prev, global);
+          if (update) {
+            if (DEBUG && !(result instanceof Hole)) throw errors.invalid_component(value);
+            if (getHole(update, /** @type {Hole} */(result)) === result) entry[2] = result;
+          }
+        }
+        else update(prev, value);
+      }
+      else {
+        let change = value;
+        if (type & ARRAY) {
+          if (DEBUG && !isArray(value)) throw errors.invalid_interpolation([], value);
+          if (type & COMMENT) {
+            // TODO: a smarter differ that does not require 2 loops
+            if (value.length) {
+              if (value[0] instanceof Hole) {
+                if (DEBUG && prev.length && !(prev[0] instanceof Hole)) throw errors.invalid_interpolation([], value[0]);
+                change = holed(prev, value);
+              }
+            }
+          }
+          else if ((type & EVENT) && (value[0] === prev[0])) continue;
+        }
+        else if (type & COMMENT) {
+          if (type & SIGNAL) {
+            if (value === prev) {
+              update(entry[3], change);
+              continue;
+            }
+          }
+          else if (prev instanceof Hole) {
+            if (DEBUG && !(value instanceof Hole)) throw errors.invalid_interpolation([], value);
+            value = getHole(prev, /** @type {Hole} */(value));
+            change = value.n;
+          }
+        }
+        if (value !== prev) {
+          entry[2] = value;
+          update(entry[3], change);
+        }
+      }
+    }
+    return /** @type {Node} */(this.n);
+  }
+}
diff --git a/src/dom/resolve.js b/src/dom/resolve.js
new file mode 100644
index 0000000..3e9cc76
--- /dev/null
+++ b/src/dom/resolve.js
@@ -0,0 +1,8 @@
+import DEBUG from '../debug.js';
+
+const tree = DEBUG ?
+  ((node, i) => i < 0 ? node?.content : node?.childNodes?.[i]) :
+  ((node, i) => i < 0 ? node.content : node.childNodes[i])
+;
+
+export default (root, path) => path.reduceRight(tree, root);
diff --git a/src/dom/signals.js b/src/dom/signals.js
new file mode 100644
index 0000000..7869501
--- /dev/null
+++ b/src/dom/signals.js
@@ -0,0 +1,18 @@
+import { Signal, signal as _signal, computed, effect, untracked, startBatch, endBatch } from '@webreflection/alien-signals';
+
+const batch = fn => {
+  startBatch();
+  try { return fn() }
+  finally { endBatch() }
+};
+
+let $ = _signal;
+
+export function signal() {
+  return $.apply(null, arguments);
+}
+
+export const _get = () => $;
+export const _set = fn => { $ = fn };
+
+export { Signal, computed, effect, untracked, batch };
diff --git a/src/dom/update.js b/src/dom/update.js
new file mode 100644
index 0000000..3116f99
--- /dev/null
+++ b/src/dom/update.js
@@ -0,0 +1,192 @@
+import DEBUG from '../debug.js';
+import errors from '../errors.js';
+
+import {
+  ATTRIBUTE as TEMPLATE_ATTRIBUTE,
+  COMMENT as TEMPLATE_COMMENT,
+  COMPONENT as TEMPLATE_COMPONENT,
+  TEXT as TEMPLATE_TEXT,
+  children,
+} from './ish.js';
+
+import { Signal } from './signals.js';
+import { Unsafe, assign, entries, isArray } from '../utils.js';
+import { PersistentFragment, diffFragment, nodes } from './persistent-fragment.js';
+import creator from './creator.js';
+import diff from './diff.js';
+
+export const ARRAY = 1 << 0;
+export const ARIA = 1 << 1;
+export const ATTRIBUTE = 1 << 2;
+export const COMMENT = 1 << 3;
+export const COMPONENT = 1 << 4;
+export const DATA = 1 << 5;
+export const DIRECT = 1 << 6;
+export const DOTS = 1 << 7;
+export const EVENT = 1 << 8;
+export const KEY = 1 << 9;
+export const PROP = 1 << 10;
+export const TEXT = 1 << 11;
+export const TOGGLE = 1 << 12;
+export const UNSAFE = 1 << 13;
+export const REF = 1 << 14;
+export const SIGNAL = 1 << 15;
+
+// COMPONENT flags
+const COMPONENT_DIRECT = COMPONENT | DIRECT;
+const COMPONENT_DOTS = COMPONENT | DOTS;
+const COMPONENT_PROP = COMPONENT | PROP;
+const EVENT_ARRAY = EVENT | ARRAY;
+const COMMENT_ARRAY = COMMENT | ARRAY;
+
+export const fragment = creator(document);
+export const ref = Symbol('ref');
+
+const aria = (node, values) => {
+  for (const [key, value] of entries(values)) {
+    const name = key === 'role' ? key : `aria-${key.toLowerCase()}`;
+    if (value == null) node.removeAttribute(name);
+    else node.setAttribute(name, value);
+  }
+};
+
+const attribute = name => (node, value) => {
+  if (value == null) node.removeAttribute(name);
+  else node.setAttribute(name, value);
+};
+
+const comment_array = (node, value) => {
+  node[nodes] = diff(
+    node[nodes] || children,
+    value,
+    diffFragment,
+    node
+  );
+};
+
+const text = new WeakMap;
+const getText = (ref, value) => {
+  let node = text.get(ref);
+  if (node) node.data = value;
+  else text.set(ref, (node = document.createTextNode(value)));
+  return node;
+};
+
+const comment_hole = (node, value) => {
+  const current = typeof value === 'object' ? (value ?? node)  : getText(node, value);
+  const prev = node[nodes] ?? node;
+  if (current !== prev)
+    prev.replaceWith(diffFragment(node[nodes] = current, 1));
+};
+
+const comment_unsafe = xml => (node, value) => {
+  const prev = node[ref] ?? (node[ref] = {});
+  if (prev.v !== value) {
+    prev.f = PersistentFragment(fragment(value, xml));
+    prev.v = value;
+  }
+  comment_hole(node, prev.f);
+};
+
+const comment_signal = (node, value) => {
+  comment_hole(node, value instanceof Signal ? value.value : value);
+};
+
+const data = ({ dataset }, values) => {
+  for (const [key, value] of entries(values)) {
+    if (value == null) delete dataset[key];
+    else dataset[key] = value;
+  }
+};
+
+/** @type {Map<string|Symbol, Function>} */
+const directRefs = new Map;
+
+/**
+ * @param {string|Symbol} name
+ * @returns {Function}
+ */
+const directFor = name => {
+  let fn = directRefs.get(name);
+  if (!fn) directRefs.set(name, (fn = direct(name)));
+  return fn;
+};
+
+const direct = name => (node, value) => {
+  node[name] = value;
+};
+
+const dots = (node, values) => {
+  for (const [name, value] of entries(values))
+    attribute(name)(node, value);
+};
+
+const event = (type, at, array) => array ?
+  ((node, value) => {
+    const prev = node[at];
+    if (prev?.length) node.removeEventListener(type, ...prev);
+    if (value) node.addEventListener(type, ...value);
+    node[at] = value;
+  }) :
+  ((node, value) => {
+    const prev = node[at];
+    if (prev) node.removeEventListener(type, prev);
+    if (value) node.addEventListener(type, value);
+    node[at] = value;
+  })
+;
+
+const toggle = name => (node, value) => {
+  node.toggleAttribute(name, !!value);
+};
+
+let k = false;
+export const isKeyed = () => {
+  const wasKeyed = k;
+  k = false;
+  return wasKeyed;
+};
+
+export const update = (node, type, path, name, hint) => {
+  switch (type) {
+    case TEMPLATE_COMPONENT: return [path, hint, COMPONENT];
+    case TEMPLATE_COMMENT: {
+      if (isArray(hint)) return [path, comment_array, COMMENT_ARRAY];
+      if (hint instanceof Unsafe) return [path, comment_unsafe(node.xml), UNSAFE];
+      if (hint instanceof Signal) return [path, comment_signal, COMMENT | SIGNAL];
+      return [path, comment_hole, COMMENT];
+    }
+    case TEMPLATE_TEXT: return [path, directFor('textContent'), TEXT];
+    case TEMPLATE_ATTRIBUTE: {
+      const isComponent = node.type === TEMPLATE_COMPONENT;
+      switch (name.at(0)) {
+        case '@': {
+          if (DEBUG && isComponent) throw errors.invalid_attribute([], name);
+          const array = isArray(hint);
+          return [path, event(name.slice(1), Symbol(name), array), array ? EVENT_ARRAY : EVENT];
+        }
+        case '?':
+          if (DEBUG && isComponent) throw errors.invalid_attribute([], name);
+          return [path, toggle(name.slice(1)), TOGGLE];
+        case '.': {
+          return name === '...' ?
+            [path, isComponent ? assign : dots, isComponent ? COMPONENT_DOTS : DOTS] :
+            [path, direct(name.slice(1)), isComponent ? COMPONENT_DIRECT : DIRECT]
+          ;
+        }
+        default: {
+          if (isComponent) return [path, direct(name), COMPONENT_PROP];
+          if (name === 'aria') return [path, aria, ARIA];
+          if (name === 'data' && !/^object$/i.test(node.name)) return [path, data, DATA];
+          if (name === 'key') {
+            if (DEBUG && 1 < path.length) throw errors.invalid_key(hint);
+            return [path, (k = true), KEY];
+          };
+          if (name === 'ref') return [path, directFor(ref), REF];
+          if (name.startsWith('on')) return [path, directFor(name.toLowerCase()), DIRECT];
+          return [path, attribute(name), ATTRIBUTE];
+        }
+      }
+    }
+  }
+};
diff --git a/src/errors.js b/src/errors.js
new file mode 100644
index 0000000..6821de1
--- /dev/null
+++ b/src/errors.js
@@ -0,0 +1,26 @@
+/* c8 ignore start */
+const asTemplate = template => (template?.raw || template)?.join?.(',') || 'unknown';
+/* c8 ignore stop */
+
+export default {
+  text: (template, tag, value) => new SyntaxError(`Mixed text and interpolations found in text only <${tag}> element ${JSON.stringify(String(value))} in template ${asTemplate(template)}`),
+  unclosed: (template, tag) => new SyntaxError(`The text only <${tag}> element requires explicit </${tag}> closing tag in template ${asTemplate(template)}`),
+  unclosed_element: (template, tag) => new SyntaxError(`Unclosed element <${tag}> found in template ${asTemplate(template)}`),
+  invalid_content: template => new SyntaxError(`Invalid content "<!" found in template: ${asTemplate(template)}`),
+  invalid_closing: template => new SyntaxError(`Invalid closing tag: </... found in template: ${asTemplate(template)}`),
+  invalid_nul: template => new SyntaxError(`Invalid content: NUL char \\x00 found in template: ${asTemplate(template)}`),
+  invalid_comment: template => new SyntaxError(`Invalid comment: no closing --> found in template ${asTemplate(template)}`),
+  invalid_layout: template => new SyntaxError(`Too many closing tags found in template ${asTemplate(template)}`),
+  invalid_doctype: (template, value) => new SyntaxError(`Invalid doctype: ${value} found in template ${asTemplate(template)}`),
+
+  // DOM ONLY
+  /* c8 ignore start */
+  invalid_template: template => new SyntaxError(`Invalid template - the amount of values does not match the amount of updates: ${asTemplate(template)}`),
+  invalid_path: (template, path) => new SyntaxError(`Invalid path - unreachable node at the path [${path.join(', ')}] found in template ${asTemplate(template)}`),
+  invalid_attribute: (template, kind) => new SyntaxError(`Invalid ${kind} attribute in template definition\n${asTemplate(template)}`),
+  invalid_interpolation: (template, value) => new SyntaxError(`Invalid interpolation - expected hole or array: ${String(value)} found in template ${asTemplate(template)}`),
+  invalid_hole: value => new SyntaxError(`Invalid interpolation - expected hole: ${String(value)}`),
+  invalid_key: value => new SyntaxError(`Invalid key attribute or position in template: ${String(value)}`),
+  invalid_array: value => new SyntaxError(`Invalid array - expected html/svg but found something else: ${String(value)}`),
+  invalid_component: value => new SyntaxError(`Invalid component: ${String(value)}`),
+};
diff --git a/src/json/index.js b/src/json/index.js
new file mode 100644
index 0000000..ffda6a6
--- /dev/null
+++ b/src/json/index.js
@@ -0,0 +1,68 @@
+import DEBUG from '../debug.js';
+import errors from '../errors.js';
+import { assign } from '../utils.js';
+
+import {
+  Comment,
+  DocumentType,
+  Text,
+  Fragment,
+  Element,
+  Component,
+  fromJSON,
+} from '../dom/ish.js';
+
+import parser from '../parser/index.js';
+import resolve from './resolve.js';
+import { COMPONENT, KEY, comment, update } from './update.js';
+
+const textParser = parser({
+  Comment,
+  DocumentType,
+  Text,
+  Fragment,
+  Element,
+  Component,
+  update,
+});
+
+const { parse, stringify } = JSON;
+
+const create = xml => {
+  const twm = new WeakMap;
+  const cache = (template, values) => {
+    const parsed = textParser(template, values, xml);
+    parsed[0] = parse(stringify(parsed[0]));
+    twm.set(template, parsed);
+    return parsed;
+  };
+  return (template, ...values) => {
+    const [json, updates] = twm.get(template) || cache(template, values);
+    const root = fromJSON(json);
+    const length = values.length;
+    if (length === updates.length) {
+      const components = [];
+      for (let node, prev, i = 0; i < length; i++) {
+        const [path, update, type] = updates[i];
+        const value = values[i];
+        if (prev !== path) {
+          node = resolve(root, path);
+          prev = path;
+          if (DEBUG && !node) throw errors.invalid_path(path);
+        }
+        if (type === KEY) continue;
+        if (type === COMPONENT) components.push(update(node, value));
+        else update(node, value);
+      }
+      for (const [node, Component] of components) {
+        const props = assign({ children: node.children }, node.props);
+        comment(node, Component(props));
+      }
+    }
+    else if (DEBUG) throw errors.invalid_template();
+    return root;
+  };
+};
+
+export const html = create(false);
+export const svg = create(true);
diff --git a/src/json/resolve.js b/src/json/resolve.js
new file mode 100644
index 0000000..d295081
--- /dev/null
+++ b/src/json/resolve.js
@@ -0,0 +1,8 @@
+import DEBUG from '../debug.js';
+
+const tree = DEBUG ?
+  ((node, i) => i < 0 ? node : node?.children?.[i]) :
+  ((node, i) => i < 0 ? node : node.children[i])
+;
+
+export default (root, path) => path.reduceRight(tree, root);
diff --git a/src/json/update.js b/src/json/update.js
new file mode 100644
index 0000000..57e2e85
--- /dev/null
+++ b/src/json/update.js
@@ -0,0 +1,133 @@
+import {
+  ATTRIBUTE as TEMPLATE_ATTRIBUTE,
+  COMMENT as TEMPLATE_COMMENT,
+  TEXT as TEMPLATE_TEXT,
+  COMPONENT as TEMPLATE_COMPONENT,
+  Node, Text, Fragment,
+  props, children,
+} from '../dom/ish.js';
+
+import { isArray, keys } from '../utils.js';
+
+const get = node => {
+  if (node.props === props) node.props = {};
+  return node.props;
+};
+
+const set = (props, name, value) => {
+  if (value == null) delete props[name];
+  else props[name] = value;
+};
+
+export const ARIA = 0;
+const aria =  (node, values) => {
+  const props = get(node);
+  for (const key in values) {
+    const name = key === 'role' ? key : `aria-${key}`;
+    const value = values[key];
+    set(props, name, value);
+  }
+  if (keys(props).length === 0) node.props = props;
+};
+
+export const ATTRIBUTE = 1;
+const attribute = name => (node, value) => {
+  const props = get(node);
+  set(props, name, value);
+  if (keys(props).length === 0) node.props = props;
+};
+
+export const COMMENT = 2;
+export const comment = (node, value) => {
+  const { children } = node.parent;
+  const i = children.indexOf(node);
+  if (isArray(value)) {
+    const fragment = new Fragment;
+    fragment.children = value;
+    value = fragment;
+  }
+  else if (!(value instanceof Node)) value = new Text(value == null ? '' : value);
+  children[i] = value;
+};
+
+export const COMPONENT = 3;
+const component = (node, value) => [node, value];
+
+export const DATA = 4;
+const data = (node, values) => {
+  const props = get(node);
+  for (const key in values) {
+    const name = `data-${key}`;
+    const value = values[key];
+    set(props, name, value);
+  }
+  if (keys(props).length === 0) node.props = props;
+};
+
+export const DIRECT = 5;
+const direct = name => (node, value) => {
+  const props = get(node);
+  set(props, name, value);
+  if (keys(props).length === 0) node.props = props;
+};
+
+export const DOTS = 6;
+const dots = isComponent => (node, value) => {
+  if (isComponent) {
+    // TODO: assign props to component parameter
+  }
+  else {
+    // TODO: assign(node, value) ???
+  }
+};
+
+export const EVENT = 7;
+const event = at => (node, value) => {
+  const props = get(node);
+  if (value == null) delete props[at];
+  else props[at] = value;
+};
+
+export const KEY = 8;
+
+export const TEXT = 9;
+const text = (node, value) => {
+  if (value == null) node.children = children;
+  else node.children = [new Text(value)];
+};
+
+export const TOGGLE = 10;
+const toggle = name => (node, value) => {
+  const props = get(node);
+  if (!value) {
+    delete props[name];
+    if (keys(props).length === 0) node.props = props;
+  }
+  else props[name] = !!value;
+};
+
+export const update = (node, type, path, name) => {
+  switch (type) {
+    case TEMPLATE_COMPONENT: {
+      return [path, component, COMPONENT];
+    }
+    case TEMPLATE_COMMENT: {
+      return [path, comment, COMMENT];
+    }
+    case TEMPLATE_ATTRIBUTE: {
+      switch (name.at(0)) {
+        case '@': return [path, event(Symbol(name)), EVENT];
+        case '?': return [path, toggle(name.slice(1)), TOGGLE];
+        case '.': return name === '...' ?
+          [path, dots(node.type === TEMPLATE_COMPONENT), DOTS] :
+          [path, direct(name.slice(1)), DIRECT]
+        ;
+        case 'a': if (name === 'aria') return [path, aria, ARIA];
+        case 'd': if (name === 'data') return [path, data, DATA];
+        case 'k': if (name === 'key') return [path, Object, KEY];
+        default: return [path, attribute(name), ATTRIBUTE];
+      }
+    }
+    case TEMPLATE_TEXT: return [path, text, TEXT];
+  }
+};
diff --git a/src/parser/index.js b/src/parser/index.js
new file mode 100644
index 0000000..4b1fb9b
--- /dev/null
+++ b/src/parser/index.js
@@ -0,0 +1,257 @@
+//@ts-check
+
+import DEBUG from '../debug.js';
+import errors from '../errors.js';
+
+import {
+  ATTRIBUTE,
+  COMMENT,
+  COMPONENT,
+  ELEMENT,
+  TEXT,
+  TEXT_ELEMENTS,
+  VOID_ELEMENTS,
+  Comment as DOMComment,
+  DocumentType as DOMDocumentType,
+  Text as DOMText,
+  Fragment as DOMFragment,
+  Element as DOMElement,
+  Component as DOMComponent,
+  append, prop, children,
+} from '../dom/ish.js';
+
+const NUL = '\x00';
+const DOUBLE_QUOTED_NUL = `"${NUL}"`;
+const SINGLE_QUOTED_NUL = `'${NUL}'`;
+const NEXT = /\x00|<[^><\s]+/g;
+const ATTRS = /([^\s/>=]+)(?:=(\x00|(?:(['"])[\s\S]*?\3)))?/g;
+
+// // YAGNI: NUL char in the wild is a shenanigan
+// // usage: template.map(safe).join(NUL).trim()
+// const NUL_RE = /\x00/g;
+// const safe = s => s.replace(NUL_RE, '&#0;');
+
+/** @typedef {import('../dom/ish.js').Node} Node */
+/** @typedef {import('../dom/ish.js').Element} Element */
+/** @typedef {import('../dom/ish.js').Component} Component */
+/** @typedef {(node: import('../dom/ish.js').Node, type: typeof ATTRIBUTE | typeof TEXT | typeof COMMENT | typeof COMPONENT, path: number[], name: string, hint: unknown) => unknown} update */
+/** @typedef {Element | Component} Container */
+
+/** @type {update} */
+const defaultUpdate = (_, type, path, name, hint) => [type, path, name];
+
+/**
+ * @param {Node} node
+ * @returns {number[]}
+ */
+const path = node => {
+  const insideout = [];
+  while (node.parent) {
+    switch (node.type) {
+      /* c8 ignore start */
+      case COMPONENT:
+      // fallthrough
+      /* c8 ignore stop */
+      case ELEMENT: {
+        if (/** @type {Container} */(node).name === 'template') insideout.push(-1);
+        break;
+      }
+    }
+    insideout.push(node.parent.children.indexOf(node));
+    node = node.parent;
+  }
+  return insideout;
+};
+
+/**
+ * @param {Node} node
+ * @param {Set<Node>} ignore
+ * @returns {Node}
+ */
+const parent = (node, ignore) => {
+  do { node = node.parent } while (ignore.has(node));
+  return node;
+};
+
+export default ({
+  Comment = DOMComment,
+  DocumentType = DOMDocumentType,
+  Text = DOMText,
+  Fragment = DOMFragment,
+  Element = DOMElement,
+  Component = DOMComponent,
+  update = defaultUpdate,
+}) =>
+/**
+ * Parse a template string into a crawable JS literal tree and provide a list of updates.
+ * @param {TemplateStringsArray|string[]} template
+ * @param {unknown[]} holes
+ * @param {boolean} xml
+ * @returns {[Node, unknown[]]}
+ */
+(template, holes, xml) => {
+  if (DEBUG && template.some(chunk => chunk.includes(NUL))) throw errors.invalid_nul(template);
+  const content = template.join(NUL).trim();
+  if (DEBUG && content.replace(/(\S+)=(['"])([\S\s]+?)\2/g, (...a) => /^[^\x00]+\x00|\x00[^\x00]+$/.test(a[3]) ? (xml = a[1]) : a[0]) !== content) throw errors.invalid_attribute(template, xml);
+  const ignore = new Set;
+  const values = [];
+  let node = new Fragment, pos = 0, skip = 0, hole = 0, resolvedPath = children;
+  for (const match of content.matchAll(NEXT)) {
+    // already handled via attributes or text content nodes
+    if (0 < skip) {
+      skip--;
+      continue;
+    }
+
+    const chunk = match[0];
+    const index = match.index;
+
+    // prepend previous content, if any
+    if (pos < index)
+      append(node, new Text(content.slice(pos, index)));
+
+    // holes
+    if (chunk === NUL) {
+      if (node.name === 'table') {
+        node = append(node, new Element('tbody', xml));
+        ignore.add(node);
+      }
+      const comment = append(node, new Comment('◦'));
+      values.push(update(comment, COMMENT, path(comment), '', holes[hole++]));
+      pos = index + 1;
+    }
+    // comments or doctype
+    else if (chunk.startsWith('<!')) {
+      const i = content.indexOf('>', index + 2);
+
+      if (DEBUG && i < 0) throw errors.invalid_content(template);
+
+      if (content.slice(i - 2, i + 1) === '-->') {
+        if (DEBUG && (i - index) < 6) throw errors.invalid_comment(template);
+        const data = content.slice(index + 4, i - 2);
+        if (data[0] === '!') append(node, new Comment(data.slice(1).replace(/!$/, '')));
+      }
+      else {
+        if (DEBUG && !content.slice(index + 2, i).toLowerCase().startsWith('doctype')) throw errors.invalid_doctype(template, content.slice(index + 2, i));
+        append(node, new DocumentType(content.slice(index + 2, i)));
+      }
+      pos = i + 1;
+    }
+    // closing tag </> or </name>
+    else if (chunk.startsWith('</')) {
+      const i = content.indexOf('>', index + 2);
+      if (DEBUG && i < 0) throw errors.invalid_closing(template);
+      if (xml && node.name === 'svg') xml = false;
+      node = /** @type {Container} */(parent(node, ignore));
+      if (DEBUG && !node) throw errors.invalid_layout(template);
+      pos = i + 1;
+    }
+    // opening tag <name> or <name />
+    else {
+      const i = index + chunk.length;
+      const j = content.indexOf('>', i);
+      const name = chunk.slice(1);
+
+      if (DEBUG && j < 0) throw errors.unclosed_element(template, name);
+
+      let tag = name;
+      // <${Component} ... />
+      if (name === NUL) {
+        tag = 'template';
+        node = append(node, new Component);
+        resolvedPath = path(node).slice(1);
+        //@ts-ignore
+        values.push(update(node, COMPONENT, resolvedPath, '', holes[hole++]));
+      }
+      // any other element
+      else {
+        if (!xml) {
+          tag = tag.toLowerCase();
+          // patch automatic elements insertion with <table>
+          // or path will fail once live on the DOM
+          if (node.name === 'table' && (tag === 'tr' || tag === 'td')) {
+            node = append(node, new Element('tbody', xml));
+            ignore.add(node);
+          }
+          if (node.name === 'tbody' && tag === 'td') {
+            node = append(node, new Element('tr', xml));
+            ignore.add(node);
+          }
+        }
+        node = append(node, new Element(tag, xml ? tag !== 'svg' : false));
+        resolvedPath = children;
+      }
+
+      // attributes
+      if (i < j) {
+        let dot = false;
+        for (const [_, name, value] of content.slice(i, j).matchAll(ATTRS)) {
+          if (value === NUL || value === DOUBLE_QUOTED_NUL || value === SINGLE_QUOTED_NUL || (dot = name.endsWith(NUL))) {
+            const p = resolvedPath === children ? (resolvedPath = path(node)) : resolvedPath;
+            //@ts-ignore
+            values.push(update(node, ATTRIBUTE, p, dot ? name.slice(0, -1) : name, holes[hole++]));
+            dot = false;
+            skip++;
+          }
+          else prop(node, name, value ? value.slice(1, -1) : true);
+        }
+        resolvedPath = children;
+      }
+
+      pos = j + 1;
+
+      // to handle self-closing tags
+      const closed = 0 < j && content[j - 1] === '/';
+
+      if (xml) {
+        if (closed) {
+          node = node.parent;
+          /* c8 ignore start unable to reproduce, still worth a guard */
+          if (DEBUG && !node) throw errors.invalid_layout(template);
+          /* c8 ignore stop */
+        }
+      }
+      else if (closed || VOID_ELEMENTS.has(tag)) {
+        // void elements are never td or tr
+        node = closed ? parent(node, ignore) : node.parent;
+        
+        /* c8 ignore start unable to reproduce, still worth a guard */
+        if (DEBUG && !node) throw errors.invalid_layout();
+        /* c8 ignore stop */
+      }
+      // <svg> switches to xml mode
+      else if (tag === 'svg') xml = true;
+      // text content / data elements content handling
+      else if (TEXT_ELEMENTS.has(tag)) {
+        const index = content.indexOf(`</${name}>`, pos);
+        if (DEBUG && index < 0) throw errors.unclosed(template, tag);
+        const value = content.slice(pos, index);
+        // interpolation as text
+        if (value.trim() === NUL) {
+          skip++;
+          values.push(update(node, TEXT, path(node), '', holes[hole++]));
+        }
+        else if (DEBUG && value.includes(NUL)) throw errors.text(template, tag, value);
+        else append(node, new Text(value));
+        // text elements are never td or tr
+        node = node.parent;
+        /* c8 ignore start unable to reproduce, still worth a guard */
+        if (DEBUG && !node) throw errors.invalid_layout(template);
+        /* c8 ignore stop */
+        pos = index + name.length + 3;
+        // ignore the closing tag regardless of the content
+        skip++;
+        continue;
+      }
+    }
+  }
+
+  if (pos < content.length)
+    append(node, new Text(content.slice(pos)));
+
+  /* c8 ignore start */
+  if (DEBUG && hole < holes.length) throw errors.invalid_template(template);
+  /* c8 ignore stop */
+
+  return [node, values];
+};
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..9cfc365
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,40 @@
+const { isArray } = Array;
+const { assign, defineProperties, entries, freeze, keys } = Object;
+
+export { assign, defineProperties, entries, freeze, isArray, keys };
+
+/* c8 ignore start */
+const { replace } = '';
+const ca = /[&<>"']/g;
+const pe = c => {
+  switch (c) {
+    case '&': return '&amp;';
+    case '<': return '&lt;';
+    case '>': return '&gt;';
+    case '"': return '&quot;';
+    default: return '&#39;';
+  }
+};
+
+export const escape = es => replace.call(es, ca, pe);
+
+export class Unsafe {
+  #data;
+
+  constructor(data) {
+    this.#data = data;
+  }
+
+  valueOf() {
+    return this.#data;
+  }
+
+  toString() {
+    return String(this.#data);
+  }
+}
+
+export const unsafe = data => new Unsafe(data);
+
+export const createComment = value => document.createComment(value);
+/* c8 ignore stop */
diff --git a/test/async.html b/test/async.html
deleted file mode 100644
index 215b63d..0000000
--- a/test/async.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module">
-  import {render, html, svg} from '../esm/async.js';
-
-  render(document.body, html`a${Promise.resolve('b')}c`);
-  </script>
-</head>
-<body>
-  
-</body>
-</html>
\ No newline at end of file
diff --git a/test/base.html b/test/base.html
new file mode 100644
index 0000000..c600db1
--- /dev/null
+++ b/test/base.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<script type="module">
+  import { html } from '../dist/prod/dom.js';
+
+  document.body.prepend(
+    html`<h1>Hello DOM !</h2>`
+  );
+</script>
diff --git a/test/blank-template.html b/test/blank-template.html
deleted file mode 100644
index 1289693..0000000
--- a/test/blank-template.html
+++ /dev/null
@@ -1,95 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module">
-  // https://github.com/WebReflection/lighterhtml/issues/92
-  // ucdn --debug
-  import {render, html} from '../esm/index.js';
-
-  let state = 0;
-
-  const next = (ev) => {
-    ev.preventDefault();
-    if(state >= views.length - 1) {
-      return;	
-    }
-    state++;
-    update();
-  }
-
-  const back = (ev) => {
-    ev.preventDefault();
-    if (state <= 0) {
-      return;	
-    }
-    state --;
-    update();
-  }
-
-  const refresh = (ev) => {
-    ev.preventDefault();
-    update();
-  };
-
-  const box = f => f();
-
-  const one = (name = 'one') => html`${box(() => html`one`)}`;
-
-
-  const two = (name = 'two', value = 'opt') => html`${box(() => html`
-      <label class="block px-3 mb-3">
-        <input type="radio" class="form-radio" name=${name} value=${value}>
-        <span>two</span>
-      </label>`)}`;
-
-  const three = (value = 'three') => html`
-    <label class="block px-3 mb-3">
-      <div>
-        ${value}
-      </div>
-    </label>
-  `;
-
-  const four = (name = 'four') => html`
-    <div>
-      Four. All good?
-    </div>
-  `;
-
-  const views = [one, two, three, four];
-
-  const view = () => (views[state] || four)();
-
-  const button = (click, text) => html`<button onclick=${click}>${text}</button>`;
-
-  const nav = () => html`  
-    <nav>
-      ${button(back, 'back')}
-      ${button(next, 'next')} 
-      ${button(refresh, 'refresh')}
-    </nav>
-  `
-
-  const main = () => html`
-  <form>
-    ${box(() => view())}
-  </form>
-  ${nav()}
-  `;
-
-  const app = () => html`
-    <div>
-      <main>
-      ${main()}
-      </main>
-    </div>
-  `;
-
-  const update = () => render(document.body, app);
-
-  update();
-  </script>
-</head>
-</html>
\ No newline at end of file
diff --git a/test/counter.html b/test/counter.html
new file mode 100644
index 0000000..f9932b8
--- /dev/null
+++ b/test/counter.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script type="module">
+import { html, signal } from '../dist/dev/dom.js';
+
+function Counter() {
+  const count = signal(0);
+
+  return html`
+    <button onClick=${() => count.value++}>
+      Clicked ${count.value} times
+    </button>
+  `;
+}
+
+document.body.append(
+  html`<${Counter} />`
+);
+
+    // render(document.body, html`<${Counter} />`);
+    // render(document.body, () => html`<${Counter} />`);
+    // ... OR ...
+    // document.body.append(html`<${Counter} />`);
+  </script>
+</head>
+</html>
diff --git a/test/coverage.init.js b/test/coverage.init.js
deleted file mode 100644
index e69de29..0000000
diff --git a/test/coverage.js b/test/coverage.js
deleted file mode 100644
index b27b190..0000000
--- a/test/coverage.js
+++ /dev/null
@@ -1,189 +0,0 @@
-const {DOMParser} = require('linkedom');
-
-const document = (new DOMParser).parseFromString('<html />', 'text/html');
-
-globalThis.document = document;
-
-const {render, html, svg} = require('../cjs');
-
-const {Event} = document.defaultView;
-
-const {body} = document;
-
-const fragment = () => html`<p>1</p><p>2</p>`;
-const variousContent = content => html`${content}`;
-
-render(body, html`this is a test`);
-render(body, html`this is a ${
-  [1, 2].map(n => html`${n}`)
-} test`);
-render(body, html`this is a ${
-  [1, 2].map(n => svg`${n}`)
-} test`);
-
-(function twice(i) {
-  render(body, html`this is a ${
-    (i ? [1, 2, 3] : [1, 2]).map(n => svg`${n}`)
-  } test`);
-  if (i--) twice(i);
-}(1));
-
-render(body, html`this is a ${'test'}`);
-render(body, html`this is a ${true}`);
-render(body, html`this is a ${1} ${2} ${3}`);
-render(body, html`this is a ${1}`);
-
-let div = document.createElement('div');
-render(div, html.node`this is a test`);
-render(div, html.for(body)`this is a test`);
-render(div, html.for(body, 1)`this is a test`);
-render(div, () => html.for(body)`this is a test`);
-render(div, () => html.for(body, 1)`this is a test`);
-(function twice(i) {
-  render(div, () => html.for(body)`this is a test`);
-  render(div, () => html.for(body, 1)`this is a test`);
-  if (i--) twice(i);
-}(1));
-
-let clicked = false;
-render(div, html`<div test="${123}" @click=${() => { clicked = true; }} .disabled=${true} .contentEditable=${false} null=${null} />`);
-div.firstElementChild.dispatchEvent(new Event('click'));
-console.assert(clicked, '@click worked');
-
-clicked = false;
-render(div, html`<div test="${123}" onclick=${() => { clicked = true; }} .disabled=${true} .contentEditable=${false} null=${null} />`);
-div.firstElementChild.dispatchEvent(new Event('click'));
-console.assert(clicked, 'onclick worked');
-
-render(document.createElement('div'), html`<textarea>${'test'}</textarea>`);
-render(document.createElement('div'), html`<style>${'test'}</style>`);
-
-const sameWire = content => html`<div>${content}</div>`;
-render(div, sameWire([fragment()]));
-render(div, sameWire([]));
-render(div, sameWire([fragment()]));
-
-render(div, html`<style>${'text only'}</style>`);
-
-render(div, variousContent([
-  html`<p />`,
-  html`<p />`
-]));
-render(div, variousContent([
-  html`<p />`,
-  html`<p />`,
-  html`<p />`
-]));
-render(div, variousContent([
-  html`<p />`
-]));
-
-render(div, html`<style>${html`text only`}</style>`);
-render(div, variousContent('text'));
-render(div, variousContent(null));
-render(div, variousContent(void 0));
-render(div, variousContent([true]));
-render(div, variousContent([1]));
-render(div, variousContent(['one']));
-
-const reference = {};
-render(div, html`<div ref=${reference}>test</div>`);
-console.assert(reference.hasOwnProperty('current'));
-
-const fnReference = node => { fnReference.node = node; };
-render(div, html`<div ref=${fnReference}>test</div>`);
-console.assert(fnReference.node === div.firstElementChild);
-
-const withHandler = handler => html`<div onClick=${handler} />`;
-render(div, withHandler(Object));
-render(div, withHandler(Object));
-render(div, withHandler(String));
-render(div, withHandler(null));
-render(div, withHandler([Object, false]));
-
-const withAttribute = value => html`<div test=${value} />`;
-render(div, withAttribute(null));
-render(div, withAttribute('test'));
-render(div, withAttribute('test'));
-render(div, withAttribute(null));
-render(div, withAttribute('test'));
-
-const withText = value => html`<textarea>${value}</textarea>`;
-render(div, withText('test'));
-render(div, withText('test'));
-render(div, withText(null));
-render(div, withText('test'));
-
-render(div, html`${document.createDocumentFragment()}`);
-
-const wire1 = html`<p /><p />`;
-const wire2 = html`<div /><div />`;
-const wire = what => html`${what}`;
-render(div, wire([wire1, fragment(), wire2]));
-render(div, wire([wire2, fragment(), wire1]));
-
-render(div, html`<two /><holes />`);
-render(div, html`<one />`);
-
-try {
-  render(div, html`<p test="is ${'really'} broken" ${"isn't it"}></p>`);
-  console.assert(false, 'broken template is not breaking');
-} catch (OK) {}
-
-render(div, sameWire('test'));
-render(div, sameWire('test'));
-render(div, sameWire(document.createElement('p')));
-
-const sameAttribute = value => html`<div test=${value} />`;
-render(body, sameAttribute(1));
-render(body, sameAttribute(null));
-render(body, sameAttribute(null));
-render(body, sameAttribute(2));
-render(body, sameAttribute(3));
-
-render(body, html`<p><!--nope--></p><p>${'hole'}</p>`);
-render(body, html`<h1>${{no: "op"}}</h1>`);
-render(body, html`<h1>test</h1>`);
-render(body, html`<h2>test</h2><h3>test</h3>`);
-render(body, html`${fragment()}`);
-render(body, html`${fragment()}`);
-render(body, html`${[fragment()]}`);
-render(body, html`<h1 data-test="${123}">${'content'}</h1>`);
-render(body, html`<div test="${123}" onclick=${() => {}} .disabled=${true} .contentEditable=${false} null=${null} />`);
-render(body, variousContent([
-  html`<p />`,
-  html`<p />`
-]));
-render(body, variousContent([
-  html`<p />`,
-  html`<p />`,
-  html`<p />`
-]));
-render(body, variousContent([
-  html`<p />`
-]));
-
-render(body, html`<div aria=${{role: 'button', labelledBy: 'id'}} />`);
-console.assert(body.firstElementChild.getAttribute('role') === 'button', 'aria=${role}');
-console.assert(body.firstElementChild.getAttribute('aria-labelledBy') === 'id', 'aria=${labelledBy}');
-
-render(body, html`<div .dataset=${{labelledBy: 'id'}} />`);
-console.assert(body.firstElementChild.dataset.labelledBy === 'id', '.dataset=${...}');
-
-render(body, html`<div ?thing=${1} />`);
-console.assert(body.firstElementChild.getAttribute('thing') === '', '?thing=${truthy}');
-
-render(body, html`<div ?thing=${0} />`);
-console.assert(!body.firstElementChild.hasAttribute('thing'), '?thing=${falsy}');
-
-// cover importNode
-delete require.cache[require.resolve('../cjs/handlers.js')];
-delete require.cache[require.resolve('../cjs/node.js')];
-delete require.cache[require.resolve('../cjs/rabbit.js')];
-delete require.cache[require.resolve('../cjs')];
-const importNode = document.importNode;
-document.importNode = function () {
-  return importNode.apply(this, arguments);
-};
-const uhtml = require('../cjs');
-uhtml.render(body, uhtml.html`<last test=${123}>${456}</last>`);
diff --git a/test/csp.html b/test/csp.html
deleted file mode 100644
index ecb6458..0000000
--- a/test/csp.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="Content-Security-Policy"
-        content="style-src 'self' http: 'nonce-ijeLM8+5uwZ7ZXFmK+H2dwIWdiKJ1A4zhZIsq2Ffqqo=' https: 'nonce-ijeLM8+5uwZ7ZXFmK+H2dwIWdiKJ1A4zhZIsq2Ffqqo='">
-  <script type="module" nonce="ijeLM8+5uwZ7ZXFmK+H2dwIWdiKJ1A4zhZIsq2Ffqqo=">
-    import {render, html} from 'https://cdn.skypack.dev/uhtml';
-    switch (location.search) {
-      case '?class':
-        render(document.body, html.node`<input value=${3} class=${'test'} type=number min=1 />`);
-        break;
-      case '?style':
-        render(document.body, html.node`<input value=${2} style=${'1px solid red;'} type=number min=1 />`);
-        break;
-      case '?hole':
-        render(document.body, html`<input value=${1} type=number min=1 />`);
-        break;
-      default:
-        render(document.body, html.node`<input value=${1} type=number min=1 />`);
-        break;
-    }
-  </script>
-</head>
-<body></body>
-</html>
\ No newline at end of file
diff --git a/test/dataset.html b/test/dataset.html
deleted file mode 100644
index 859e0f9..0000000
--- a/test/dataset.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module">
-  // https://github.com/WebReflection/lighterhtml/issues/92
-  // ucdn --debug
-  import {render, html} from '../esm/index.js';
-
-  render(document.body, html`<div .dataset=${{a: 1, b: 2}} />`);
-  </script>
-</head>
-</html>
\ No newline at end of file
diff --git a/test/dbmonster.css b/test/dbmonster.css
deleted file mode 100644
index a68885c..0000000
--- a/test/dbmonster.css
+++ /dev/null
@@ -1,147 +0,0 @@
-body {
-  color: #333;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 1.42857143;
-  margin: 0;
-}
-
-label {
-  display: inline-block;
-  font-weight: 700;
-  margin-bottom: 5px;
-}
-
-#range {
-display: flex;
-}
-
-input[type=range] {
-  display: block;
-  width: 100%;
-  margin-bottom: 10px;
-  margin-top: 5px;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-:before,
-:after {
-  box-sizing: border-box;
-}
-
-.table > thead > tr > th,
-.table > tbody > tr > th,
-.table > tfoot > tr > th,
-.table > thead > tr > td,
-.table > tbody > tr > td,
-.table > tfoot > tr > td {
-  border-top: 1px solid #ddd;
-  line-height: 1.42857143;
-  padding: 8px;
-  vertical-align: top;
-}
-
-.table {
-  width: 100%;
-}
-
-.table-striped > tbody > tr:nth-child(odd) > td,
-.table-striped > tbody > tr:nth-child(odd) > th {
-  background: #f9f9f9;
-}
-
-.label {
-  border-radius: .25em;
-  color: #fff;
-  display: inline;
-  font-size: 75%;
-  font-weight: 700;
-  line-height: 1;
-  padding: .2em .6em .3em;
-  text-align: center;
-  vertical-align: baseline;
-  white-space: nowrap;
-}
-
-.label-success {
-  background-color: #5cb85c;
-}
-
-.label-warning {
-  background-color: #f0ad4e;
-}
-
-.popover {
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, .2);
-  border-radius: 6px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-  display: none;
-  left: 0;
-  max-width: 276px;
-  padding: 1px;
-  position: absolute;
-  text-align: left;
-  top: 0;
-  white-space: normal;
-  z-index: 1010;
-}
-
-.popover>.arrow:after {
-  border-width: 10px;
-  content: "";
-}
-
-.popover.left {
-  margin-left: -10px;
-}
-
-.popover.left > .arrow {
-  border-right-width: 0;
-  border-left-color: rgba(0, 0, 0, .25);
-  margin-top: -11px;
-  right: -11px;
-  top: 50%;
-}
-
-.popover.left > .arrow:after {
-  border-left-color: #fff;
-  border-right-width: 0;
-  bottom: -10px;
-  content: " ";
-  right: 1px;
-}
-
-.popover > .arrow {
-  border-width: 11px;
-}
-
-.popover > .arrow,
-.popover>.arrow:after {
-  border-color: transparent;
-  border-style: solid;
-  display: block;
-  height: 0;
-  position: absolute;
-  width: 0;
-}
-
-.popover-content {
-  padding: 9px 14px;
-}
-
-.Query {
-  position: relative;
-}
-
-.Query:hover .popover {
-  display: block;
-  left: -100%;
-  width: 100%;
-}
\ No newline at end of file
diff --git a/test/dbmonster.html b/test/dbmonster.html
deleted file mode 100644
index beb99fc..0000000
--- a/test/dbmonster.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>uhtml dbmonster</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="dbmonster.css">
-    <script src="https://unpkg.com/perf-monitor@0.3.0/dist/umd/perf-monitor.js"></script>
-    <script src="../index.js"></script>
-    <script>
-    document.addEventListener('DOMContentLoaded', function () {"use strict";
-
-      const {render, html} = uhtml;
-
-      const target = document.querySelector('#app');
-
-      function updateTable(dbs) {
-        render(target, html`
-        <table class="table table-striped latest-data">
-          <tbody>${dbs.map((db, i) => html`
-            <tr key="${db.dbname}">${[
-              html`<td class="dbname">${db.dbname}</td>`,
-              html`
-              <td class="query-count">
-                <span class="${db.lastSample.countClassName}">
-                  ${db.lastSample.nbQueries}
-                </span>
-              </td>`
-            ].concat(db.lastSample.topFiveQueries.map((query, j, a) =>
-              html`
-              <td class="${query.elapsedClassName}">
-                <span class="foo">
-                  ${query.formatElapsed}
-                </span>
-                <div class="popover left">
-                  <div class="popover-content">
-                    ${query.query}
-                  </div>
-                  <div class="arrow"></div>
-                </div>
-              </td>`
-              ))
-            }</tr>`
-          )}</tbody>
-        </table>`);
-      }
-
-      updateTable(ENV.generateData().toArray());
-
-      if (!window.perfMonitor) {
-        perfMonitor = {
-          endProfile: function () {},
-          initProfiler: function () {},
-          startFPSMonitor: function () {},
-          startMemMonitor: function () {},
-          startProfile: function () {}
-        };
-      }
-      perfMonitor.startFPSMonitor();
-      perfMonitor.startMemMonitor();
-      // perfMonitor.initProfiler('data update');
-      perfMonitor.initProfiler('view update');
-
-      function update() {
-        // perfMonitor.startProfile('data update');
-        var data = ENV.generateData().toArray();
-        // perfMonitor.endProfile('data update');
-        perfMonitor.startProfile('view update');
-        updateTable(data);
-        perfMonitor.endProfile('view update');
-        setTimeout(update, ENV.timeout);
-      }
-
-      update();
-
-    }, {once: true});
-    </script>
-  </head>
-  <body>
-    <div id="range"></div>
-    <div id="app"></div>
-    <div id="link">
-      You're looking at uhtml<br>
-      version of <a href="https://dbmonster.firebaseapp.com/">DBMonster</a>.
-    </div>
-  </body>
-  <script src="./dbmonster.js"></script>
-</html>
diff --git a/test/dbmonster.js b/test/dbmonster.js
deleted file mode 100644
index 4db2013..0000000
--- a/test/dbmonster.js
+++ /dev/null
@@ -1,209 +0,0 @@
-window.ENV = function () {'use strict';
-  var counter = 0;
-  var data;
-  var _base;
-  if (!(_base = String.prototype).lpad)
-    _base.lpad = function (padding, toLength) {
-      return padding.repeat((toLength - this.length) / padding.length).concat(this);
-    };
-
-  function formatElapsed(value) {
-    var str = parseFloat(value).toFixed(2);
-    if (value > 60) {
-      var minutes = Math.floor(value / 60);
-      var comps = (value % 60).toFixed(2).split('.');
-      var seconds = comps[0].lpad('0', 2);
-      var ms = comps[1];
-      str = minutes + ":" + seconds + "." + ms;
-    }
-    return str;
-  }
-
-  function getElapsedClassName(elapsed) {
-    var className = 'Query elapsed';
-    if (elapsed >= 10.0) {
-      className += ' warn_long';
-    }
-    else if (elapsed >= 1.0) {
-      className += ' warn';
-    }
-    else {
-      className += ' short';
-    }
-    return className;
-  }
-
-  function countClassName(queries) {
-    var countClassName = "label";
-    if (queries >= 20) {
-      countClassName += " label-important";
-    }
-    else if (queries >= 10) {
-      countClassName += " label-warning";
-    }
-    else {
-      countClassName += " label-success";
-    }
-    return countClassName;
-  }
-
-  function updateQuery(object) {
-    if (!object) {
-      object = {};
-    }
-    var elapsed = Math.random() * 15;
-    object.elapsed = elapsed;
-    object.formatElapsed = formatElapsed(elapsed);
-    object.elapsedClassName = getElapsedClassName(elapsed);
-    object.query = "SELECT blah FROM something";
-    object.waiting = Math.random() < 0.5;
-    if (Math.random() < 0.2) {
-      object.query = "<IDLE> in transaction";
-    }
-    if (Math.random() < 0.1) {
-      object.query = "vacuum";
-    }
-    return object;
-  }
-
-  function cleanQuery(value) {
-    if (value) {
-      value.formatElapsed = "";
-      value.elapsedClassName = "";
-      value.query = "";
-      value.elapsed = null;
-      value.waiting = null;
-    } else {
-      return {
-        query: "***",
-        formatElapsed: "",
-        elapsedClassName: ""
-      };
-    }
-  }
-
-  function generateRow(object, keepIdentity, counter) {
-    var nbQueries = Math.floor((Math.random() * 10) + 1);
-    if (!object) {
-      object = {};
-    }
-    object.lastMutationId = counter;
-    object.nbQueries = nbQueries;
-    if (!object.lastSample) {
-      object.lastSample = {};
-    }
-    if (!object.lastSample.topFiveQueries) {
-      object.lastSample.topFiveQueries = [];
-    }
-    if (keepIdentity) {
-      // for Angular optimization
-      if (!object.lastSample.queries) {
-        object.lastSample.queries = [];
-        for (var l = 0; l < 12; l++) {
-          object.lastSample.queries[l] = cleanQuery();
-        }
-      }
-      for (var j in object.lastSample.queries) {
-        var value = object.lastSample.queries[j];
-        if (j <= nbQueries) {
-          updateQuery(value);
-        } else {
-          cleanQuery(value);
-        }
-      }
-    } else {
-      object.lastSample.queries = [];
-      for (var j = 0; j < 12; j++) {
-        if (j < nbQueries) {
-          var value = updateQuery(cleanQuery());
-          object.lastSample.queries.push(value);
-        } else {
-          object.lastSample.queries.push(cleanQuery());
-        }
-      }
-    }
-    for (var i = 0; i < 5; i++) {
-      var source = object.lastSample.queries[i];
-      object.lastSample.topFiveQueries[i] = source;
-    }
-    object.lastSample.nbQueries = nbQueries;
-    object.lastSample.countClassName = countClassName(nbQueries);
-    return object;
-  }
-
-  function getData(keepIdentity) {
-    var oldData = data;
-    if (!keepIdentity) { // reset for each tick when !keepIdentity
-      data = [];
-      for (var i = 1; i <= ENV.rows; i++) {
-        data.push({ dbname: 'cluster' + i, query: "", formatElapsed: "", elapsedClassName: "" });
-        data.push({ dbname: 'cluster' + i + ' slave', query: "", formatElapsed: "", elapsedClassName: "" });
-      }
-    }
-    if (!data) { // first init when keepIdentity
-      data = [];
-      for (var i = 1; i <= ENV.rows; i++) {
-        data.push({ dbname: 'cluster' + i });
-        data.push({ dbname: 'cluster' + i + ' slave' });
-      }
-      oldData = data;
-    }
-    for (var i in data) {
-      var row = data[i];
-      if (!keepIdentity && oldData && oldData[i]) {
-        row.lastSample = oldData[i].lastSample;
-      }
-      if (!row.lastSample || Math.random() < ENV.mutations()) {
-        counter = counter + 1;
-        if (!keepIdentity) {
-          row.lastSample = null;
-        }
-        generateRow(row, keepIdentity, counter);
-      } else {
-        data[i] = oldData[i];
-      }
-    }
-    return {
-      toArray: function () {
-        return data;
-      }
-    };
-  }
-
-  var mutationsValue = 0.5;
-
-  function mutations(value) {
-    if (value) {
-      mutationsValue = value;
-      return mutationsValue;
-    } else {
-      return mutationsValue;
-    }
-  }
-
-  var body = document.querySelector('body');
-  var theFirstChild = body.firstChild;
-
-  var sliderContainer = document.createElement('div');
-  sliderContainer.style.cssText = "display: flex";
-  var slider = document.createElement('input');
-  var text = document.createElement('label');
-  text.innerHTML = 'mutations : ' + (mutationsValue * 100).toFixed(0) + '%';
-  text.id = "ratioval";
-  slider.setAttribute("type", "range");
-  slider.style.cssText = 'margin-bottom: 10px; margin-top: 5px';
-  slider.addEventListener('change', function (e) {
-    ENV.mutations(e.target.value / 100);
-    document.querySelector('#ratioval').innerHTML = 'mutations : ' + (ENV.mutations() * 100).toFixed(0) + '%';
-  });
-  sliderContainer.appendChild(text);
-  sliderContainer.appendChild(slider);
-  body.insertBefore(sliderContainer, theFirstChild);
-
-  return {
-    generateData: getData,
-    rows: 50,
-    timeout: 0,
-    mutations: mutations
-  };
-}();
\ No newline at end of file
diff --git a/test/diffing.js b/test/diffing.js
deleted file mode 100644
index 44a01eb..0000000
--- a/test/diffing.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import {render, html} from './instrumented/index.js';
-
-const {body} = document;
-
-const createList = (...args) => html`<div>${args}</div>`;
-const testDiff = (a, b, c, d, e, f, g, h, i, j, k) => {
-  render(body, createList());
-  render(body, createList(b, c, d));
-  render(body, createList(a, b, c, d));
-  render(body, createList(d, c, b, a));
-  render(body, createList(a, b, c, d));
-  render(body, createList(a, b, c, d, e, f));
-  render(body, createList(a, b, c, g, h, i, d, e, f));
-  render(body, createList(a, b, c, g, h, i, d, e));
-  render(body, createList(c, g, h, i, d, e));
-  render(body, createList(c, g, d, e));
-  render(body, createList());
-  render(body, createList(a, b, c, d, e, f));
-  render(body, createList(a, b, g, i, d, e, f));
-  render(body, createList(a, b, c, d, e, f));
-  render(body, createList(j, g, a, b, c, d, e, f, h, i));
-  render(body, createList(a, b, c, d, e, f));
-  render(body, createList(a, g, c, d, h, i));
-  render(body, createList(i, g, a, d, h, c));
-  render(body, createList(c, h, d, a, g, i));
-  render(body, createList(d, f, g));
-  render(body, createList(a, b, c, d, f, g));
-  render(body, createList(a, b, c, d, e, f, g));
-  render(body, createList(g, f, e, d, c, b, a));
-  render(body, createList(f, d, b, a, e, g));
-  render(body, createList(a, b, c, d, e, f));
-  render(body, createList(a, b, c, d, e, f, h, i, j));
-  render(body, createList(a, b, c, d, e, h, f, i, j));
-  render(body, createList(a, b, i, d, e, h, f, c, j));
-  render(body, createList(a, b, c, d, e, f, h, i, j));
-  render(body, createList(a, b, c, d, e, f, g, h, i, j, k));
-  render(body, createList(g, h, i));
-  render(body, createList(a, b, c, d));
-  render(body, createList(b, c, a, d));
-  render(body, createList(a, b, c, d, e));
-  render(body, createList(d, a, b, c, f));
-  render(body, createList(a, d, e));
-  render(body, createList(d, f));
-  render(body, createList(b, d, c, k));
-  render(body, createList(c, k, b, d));
-  render(body, createList());
-  render(body, createList(a, b, c, d));
-  render(body, createList(a, b, d, e, c));
-  render(body, createList(a, b, c));
-  render(body, createList(c, a, b));
-  render(body, createList());
-};
-
-testDiff(
-  html`<p>a</p>`,
-  html`<p>b</p>`,
-  html`<p>c</p>`,
-  html`<p>d</p>`,
-  html`<p>e</p>`,
-  html`<p>f</p>`,
-  html`<p>g</p>`,
-  html`<p>h</p>`,
-  html`<p>i</p>`,
-  html`<p>j</p>`,
-  html`<p>k</p>`
-);
-
-testDiff(
-  html`<p>a</p><p>a</p>`,
-  html`<p>b</p><p>b</p>`,
-  html`<p>c</p><p>c</p>`,
-  html`<p>d</p><p>d</p>`,
-  html`<p>e</p><p>e</p>`,
-  html`<p>f</p><p>f</p>`,
-  html`<p>g</p><p>g</p>`,
-  html`<p>h</p><p>h</p>`,
-  html`<p>i</p><p>i</p>`,
-  html`<p>j</p><p>j</p>`,
-  html`<p>k</p><p>k</p>`
-);
diff --git a/test/ie.html b/test/ie.html
deleted file mode 100644
index 21f44e6..0000000
--- a/test/ie.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="../index.js"></script>
-    <script>
-    this.onload = function () {
-      'use strict';
-      uhtml.render(
-        document.body,
-        uhtml.html(['<input id="delay" type="number" .value="','">'], 0)
-      );
-    };
-    </script>
-  </head>
-  <body></body>
-</html>
diff --git a/test/index.html b/test/index.html
new file mode 100644
index 0000000..0060b7d
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script type="module">
+    import { render, html, svg, signal, unsafe } from '../dist/dev/dom.js';
+
+    let hello = 'hello';
+    const comp = () => html`<${Button} text=${hello}>world</>`;
+  
+    function Button(props) {
+      return html`<button key=${1}>${props.text} ${props.children}</button>`;
+    }
+  
+    function Counter({ count }) {
+      return html`<button @click=${() => count.value++}>${unsafe('<em>count</em>')} ${count.value}</button>`;
+    }
+
+    function LI(entries) {
+      return entries.map(key => html`<li key=${key}>Rando ${key}</li>`);
+    }
+
+    function UL(keys) {
+      return html`<ul>${LI(keys)}</ul>`;
+    }
+
+    document.body.appendChild(
+      html`<svg><rect fill="red" width=${100} height=${50} /></svg>`
+    );
+
+    document.body.appendChild(comp());
+  
+    setTimeout(render, 1000, document.body, comp);
+    setTimeout((...args) => {
+      hello = 'ahoi';
+      render(...args);
+    }, 2000, document.body, comp);
+    setTimeout((...args) => {
+      render(document.body, () => UL([1, 2, 3]));
+    }, 3000, document.body, comp);
+    setTimeout((...args) => {
+      render(document.body, () => UL([3, 2, 1]));
+    }, 4000, document.body, comp);
+
+    
+    setTimeout((...args) => {
+      const count = signal(0);
+      render(document.body, html`<${Counter} count=${count} />`);
+    }, 5000);
+
+  </script>
+</head>
+</html>
diff --git a/test/json.html b/test/json.html
deleted file mode 100644
index 100ddd0..0000000
--- a/test/json.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>uhtml/json</title>
-  <script type="module">
-  import {render, html} from '../esm/json.js';
-  const strong = name => html.json`<strong>${name}</strong>`;
-  const greetings = name => JSON.parse(JSON.stringify(html.json`
-    <div>Hello ${strong(name)} 👋</div>
-  `));
-
-  console.log(greetings('console'));
-  render(document.body, greetings('World'));
-  setTimeout(() => {
-    render(document.body, greetings('uhtml/json'));
-  }, 1000);
-  </script>
-</head>
-</html>
diff --git a/test/json.js b/test/json.js
new file mode 100644
index 0000000..9f3c0eb
--- /dev/null
+++ b/test/json.js
@@ -0,0 +1,55 @@
+import { html, svg } from '../src/json/index.js';
+
+const assert = (ok, message) => {
+  if (!ok) throw new Error(message);
+};
+
+function Rect(props) {
+  console.log(props.children[1]);
+  return svg`<rect x=${props.a} y=${props.b} />`;
+}
+
+const render = (where, what) => {
+  where(String(typeof what === 'function' ? what() : what));
+};
+
+render(console.log, html`<div><template><p test=${'ok'} />${'value'}</></div>`);
+
+render(console.log, html`
+  <div hidden>
+    <p class=${'test'}>Hello</p>
+    <hr />
+    <svg>
+      <rect hidden />
+    </svg>
+    ${'World'}
+    <rect />
+  </div>
+`);
+
+render(console.log, html`
+  <${Rect} a="1" b=${2} ?c=${false} ?d=${true}>
+    <p>Component</p>
+  </>
+`);
+
+render(console.log, html`
+  <!doctype html>
+  <texatea prop="value" />
+  <style> test </style>
+  <script> ${'test'} </script>
+  <p />
+`);
+
+
+render(console.log, html`
+  <!-- comment -->
+  <p />
+  <table><td /></>
+  <table><tr class=${'test'} /></>
+  <p />
+`);
+
+render(console.log, html`<hr><br>`);
+render(console.log, html`<a ...${'props'} /> b`);
+
diff --git a/test/mondrian.css b/test/mondrian.css
deleted file mode 100644
index 934935c..0000000
--- a/test/mondrian.css
+++ /dev/null
@@ -1,255 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Lato:300,900");
-
-* {
-	box-sizing: border-box;
-	animation: fadeIn 0.5s;
-}
-
-body,
-html {
-	background-color: #fff;
-	display: grid;
-	align-items: center;
-	justify-content: center;
-	font-family: 'Lato', sans-serif;
-	text-align: center;
-	padding: 20px;
-	min-height: 100vh;
-	width: 100vw;
-}
-
-.mondrian {
-	background-color: #070908;
-	border: 10px solid #070908;
-	box-shadow: 5px 10px 10px #aaa;
-	display: grid;
-	grid-auto-columns: 50px;
-	grid-auto-flow: dense;
-	grid-auto-rows: 50px;
-	grid-gap: 10px;
-	grid-template-columns: repeat(auto-fit, 50px);
-	grid-template-rows: repeat(auto-fit, 50px);
-	height: 300px;
-	overflow: hidden;
-	width: 250px;
-}
-
-.mondrian__block {
-	animation: scaleIn 0.25s ease 0s;
-	background-color: #f2f5f1;
-}
-
-.mondrian__block:nth-child(1) {
-	animation-delay: 0.15s;
-	background-color: $color;
-	transform: scale(0);
-	animation-fill-mode: forwards;
-}
-
-.mondrian__block:nth-child(2) {
-	animation-delay: 0.3s;
-	background-color: $color;
-	transform: scale(0);
-	animation-fill-mode: forwards;
-}
-
-.mondrian__block:nth-child(3) {
-	animation-delay: 0.45s;
-	background-color: $color;
-	transform: scale(0);
-	animation-fill-mode: forwards;
-}
-
-.mondrian__block:nth-child(4) {
-	animation-delay: 0.6s;
-	background-color: $color;
-	transform: scale(0);
-	animation-fill-mode: forwards;
-}
-
-.mondrian__block:nth-child(5) {
-	animation-delay: 0.75s;
-	background-color: $color;
-	transform: scale(0);
-	animation-fill-mode: forwards;
-}
-
-.mondrian__block:nth-child(6) {
-	animation-delay: 0.9s;
-	background-color: $color;
-	transform: scale(0);
-	animation-fill-mode: forwards;
-}
-
-.mondrian__block:nth-child(7) {
-	animation-delay: 1.05s;
-	background-color: $color;
-	transform: scale(0);
-	animation-fill-mode: forwards;
-}
-
-.mondrian__block:nth-child(8) {
-	animation-delay: 1.2s;
-	background-color: $color;
-	transform: scale(0);
-	animation-fill-mode: forwards;
-}
-
-.mondrian__block:nth-child(9) {
-	animation-delay: 1.35s;
-	background-color: $color;
-	transform: scale(0);
-	animation-fill-mode: forwards;
-}
-
-.mondrian__block:nth-child(10) {
-	animation-delay: 1.5s;
-	background-color: $color;
-	transform: scale(0);
-	animation-fill-mode: forwards;
-}
-
-.mondrian__block[data-row-span="1"] {
-	grid-row: span 1;
-}
-
-.mondrian__block[data-col-span="1"] {
-	grid-column: span 1;
-}
-
-.mondrian__block[data-row-span="2"] {
-	grid-row: span 2;
-}
-
-.mondrian__block[data-col-span="2"] {
-	grid-column: span 2;
-}
-
-.mondrian__block[data-row-span="3"] {
-	grid-row: span 3;
-}
-
-.mondrian__block[data-col-span="3"] {
-	grid-column: span 3;
-}
-
-.mondrian__block[data-color-index="1"] {
-	background-color: #f2f5f1;
-}
-
-.mondrian__block[data-color-index="2"] {
-	background-color: #f8d92d;
-}
-
-.mondrian__block[data-color-index="3"] {
-	background-color: #f2f5f1;
-}
-
-.mondrian__block[data-color-index="4"] {
-	background-color: #0b54a4;
-}
-
-.mondrian__block[data-color-index="5"] {
-	background-color: #f2f5f1;
-}
-
-.mondrian__block[data-color-index="6"] {
-	background-color: #d60014;
-}
-
-.generate-button {
-	cursor: pointer;
-	padding: 4px 12px;
-	border-radius: 4px;
-	font-family: 'Lato', sans-serif;
-	margin-top: 30px;
-	background-color: #fff;
-}
-
-.generate-button:hover {
-	background-color: #e6e6e6;
-}
-
-.generate-button:active {
-	background-color: #ccc;
-}
-
-@-moz-keyframes scaleIn {
-	from {
-		transform: scale(0);
-	}
-
-	to {
-		transform: scale(1);
-	}
-}
-
-@-webkit-keyframes scaleIn {
-	from {
-		transform: scale(0);
-	}
-
-	to {
-		transform: scale(1);
-	}
-}
-
-@-o-keyframes scaleIn {
-	from {
-		transform: scale(0);
-	}
-
-	to {
-		transform: scale(1);
-	}
-}
-
-@keyframes scaleIn {
-	from {
-		transform: scale(0);
-	}
-
-	to {
-		transform: scale(1);
-	}
-}
-
-@-moz-keyframes fadeIn {
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-}
-
-@-webkit-keyframes fadeIn {
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-}
-
-@-o-keyframes fadeIn {
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-}
-
-@keyframes fadeIn {
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-}
\ No newline at end of file
diff --git a/test/mondrian.html b/test/mondrian.html
deleted file mode 100644
index b9e3cf9..0000000
--- a/test/mondrian.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Randomly generate Mondrian Art with CSS Grid + uhtml 🎨</title>
-  <link rel="stylesheet" type="text/css" href="mondrian.css">
-  <script type="module" src="mondrian.js"></script>
-</head>
-<body>
-  <div id="app">
-    <div class="mondrian"></div>
-    <button class="generate-button">
-      Regenerate
-    </button>
-  </div>
-</body>
-</html>
diff --git a/test/mondrian.js b/test/mondrian.js
deleted file mode 100644
index d5fc919..0000000
--- a/test/mondrian.js
+++ /dev/null
@@ -1,46 +0,0 @@
-const require = (mame, es = '../esm/index.js') => import(
-  /^(?:localhost|[0-9.]+)$/.test(location.hostname) ?
-  es : `https://unpkg.com/${mame}?module`
-);
-
-Promise.all([
-  import('https://unpkg.com/wicked-elements?module'),
-  require('uhtml')
-]).then(([{define}, {render, html}]) => {
-
-  define('#app .mondrian', {
-    connected() { this.render(); },
-    render(blocks = this.generateBlocks()) {
-      render(this.element, html`${blocks.map(
-        ({colSpan, rowSpan, colorIndex}) => html`
-        <div class="mondrian__block"
-            data-col-span=${colSpan}
-            data-row-span=${rowSpan}
-            data-color-index=${colorIndex} />`
-      )}`);
-    },
-    generateBlocks() {
-      const blocks = [];
-      for (let i = 0; i < 10; i++) {
-        blocks.push({
-          colSpan: Math.floor(Math.random() * 3 + 1),
-          rowSpan: Math.floor(Math.random() * 3 + 1),
-          colorIndex: Math.floor(Math.random() * 6 + 1),
-        });
-      }
-      return blocks;
-    },
-    onGenerate() {
-      this.render([]);
-      setTimeout(() => this.render());
-    }
-  });
-
-  define('#app .generate-button', {
-    onclick() {
-      const mondrian = document.querySelector('.mondrian');
-      mondrian.dispatchEvent(new Event('generate'));
-    }
-  });
-
-});
diff --git a/test/object.html b/test/object.html
deleted file mode 100644
index 08a8fbf..0000000
--- a/test/object.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-  <script type="module">
-  // npx ucdn --debug
-  import {render, html, svg} from '../esm/index.js';
-
-  const dispatch = (id, detail) => () => {
-    document.dispatchEvent(new CustomEvent(id, {detail}));
-  };
-
-  const svg_test = (id, path) => html`
-    <object
-        height="100px"
-        type="image/svg+xml"
-        data=${path}
-        onload=${dispatch(id)}
-    />
-  `;
-
-  const m = {
-    id: '_svg_',
-    path: 'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg'
-  };
-
-  const update = () => {
-    render(document.body, svg_test(m.id, m.path));
-  };
-
-  document.addEventListener(m.id, () => {
-    setTimeout(()=> {
-      console.log("loaded");
-      // do some work here like changing the svgs height/scale
-      update();
-    },1000);
-  });
-
-  update();
-  </script>
-</head>
-</html>
\ No newline at end of file
diff --git a/test/object.native.html b/test/object.native.html
deleted file mode 100644
index 5629eea..0000000
--- a/test/object.native.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script>
-  this.onload = () => {
-    document.body.innerHTML = `<object height="100px" type="image/svg+xml"></object>`;
-    const object = document.body.firstElementChild;
-    const m= {
-      id: '_svg_',
-      path: 'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg'
-    };
-    const update = () => {
-      object.onload = () => {
-        document.dispatchEvent(new CustomEvent(m.id, {detail: null}));
-      };
-      object.data = m.path;
-    };
-    document.addEventListener(m.id, () => {
-      setTimeout(()=> {
-        console.log("loaded");
-        // do some work here like changing the svgs height/scale
-        update();
-      },1000);
-    });
-    update();
-  };
-  </script>
-</head>
-</html>
\ No newline at end of file
diff --git a/test/package.json b/test/package.json
deleted file mode 100644
index 0292b99..0000000
--- a/test/package.json
+++ /dev/null
@@ -1 +0,0 @@
-{"type":"commonjs"}
\ No newline at end of file
diff --git a/test/paranoia.html b/test/paranoia.html
deleted file mode 100644
index a21cd9e..0000000
--- a/test/paranoia.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="../index.js"></script>
-    <script>
-    this.onload = function () {
-      'use strict';
-      uhtml.render(
-        document.body,
-        uhtml.html`
-          <div a=${'a'} b=${'b'}>
-            test="${123}"
-          </div>
-        `
-      );
-    };
-    </script>
-  </head>
-  <body></body>
-</html>
diff --git a/test/parser.js b/test/parser.js
new file mode 100644
index 0000000..bfe2aaa
--- /dev/null
+++ b/test/parser.js
@@ -0,0 +1,162 @@
+import {
+  Comment,
+  DocumentType,
+  Text,
+  Fragment,
+  Element,
+  Component,
+  fromJSON,
+} from '../src/dom/ish.js';
+
+import parser from '../src/parser/index.js';
+// import { update } from '../src/dom/update.js';
+
+const parse = parser({
+  Comment,
+  DocumentType,
+  Text,
+  Fragment,
+  Element,
+  Component,
+  //update,
+});
+
+const parseHTML = template => parse(template, false);
+
+const assert = (ok, message) => {
+  if (!ok) throw new Error(message);
+};
+
+const html = (template, ...values) => {
+  const [node, updates] = parseHTML(template);
+  // for (let i = 0; i < updates.length; i++) {
+  //   const [path, update, type] = updates[i];
+  //   update(path.reduce(tree, node), values[i]);
+  // }
+  const stringified = JSON.stringify(node);
+  assert(JSON.stringify(fromJSON(JSON.parse(stringified))) === stringified, [
+    '',
+    stringified,
+    JSON.stringify(fromJSON(JSON.parse(stringified))),
+  ].join('\n'));
+  return node.toString();
+};
+
+console.log(html`<div><template><p test=${'ok'} />${'value'}</></div>`);
+console.log(html`<table>${[]}</table>`);
+
+console.log(html`
+  <div hidden>
+    <!--/* comment */-->
+    <p class=${'test'}>Hello</p>
+    <hr />
+    <svg>
+      <!--! important comment !-->
+      <rect hidden />
+    </svg>
+    ${'World'}
+    <rect />
+    <!--/* comment */-->
+    <!--// comment -->
+    <!--# comment -->
+    <!--; comment ;-->
+  </div>
+`);
+
+console.log(html`
+  <${Object} a="1" b=${2} ?c=${false} ?d=${true}>
+    <p>Component</p>
+  </>
+`);
+
+console.log(html`
+  <!doctype html>
+  <texatea prop="value" />
+  <style> test </style>
+  <script> ${'test'} </script>
+  <p />
+`);
+
+
+console.log(html`
+  <!-- comment -->
+  <p />
+  <table><td /></>
+  <table><tr class=${'test'} /></>
+  <p />
+`);
+
+console.log(html`<hr><br>`);
+console.log(html`<a ...${'props'} /> b`);
+
+
+// EXPECTED ERRORS
+try {
+  html`\x00`;
+}
+catch ({ message }) {
+  assert(message === 'Invalid content: NUL char \\x00 found in template: \\x00', message);
+}
+
+try {
+  html`<p test="a ${'b'} c" />`;
+}
+catch ({ message }) {
+  assert(message.startsWith('Invalid test attribute in template definition'), message);
+}
+
+try {
+  html`<p `;
+}
+catch ({ message }) {
+  assert(message === 'Unclosed element <p> found in template <p ', message);
+}
+
+try {
+  html`<!-- `;
+}
+catch ({ message }) {
+  assert(message === 'Invalid content "<!" found in template: <!-- ', message);
+}
+
+try {
+  html`<!--->`;
+}
+catch ({ message }) {
+  assert(message === 'Invalid comment: no closing --> found in template <!--->', message);
+}
+
+try {
+  html`<!loltype gotcha>`;
+}
+catch ({ message }) {
+  assert(message === 'Invalid doctype: loltype gotcha found in template <!loltype gotcha>', message);
+}
+
+try {
+  html`<p></`;
+}
+catch ({ message }) {
+  assert(message === 'Invalid closing tag: </... found in template: <p></', message);
+}
+
+try {
+  html`<div></div></div>`;
+}
+catch ({ message }) {
+  assert(message === 'Too many closing tags found in template <div></div></div>', message);
+}
+
+try {
+  html`<textarea></>`;
+}
+catch ({ message }) {
+  assert(message === 'The text only <textarea> element requires explicit </textarea> closing tag in template <textarea></>', message);
+}
+
+try {
+  html`<textarea>a ${'b'} c</textarea>`;
+}
+catch ({ message }) {
+  assert(message === 'Mixed text and interpolations found in text only <textarea> element "a \\u0000 c" in template <textarea>a , c</textarea>', message);
+}
diff --git a/test/ref.html b/test/ref.html
deleted file mode 100644
index c3d0414..0000000
--- a/test/ref.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>uHTML</title>
-  <script src="https://unpkg.com/hooked-elements"></script>
-  <script src="../index.js"></script>
-  <script defer>
-  var define = hookedElements.define;
-  var useState = hookedElements.useState;
-  var render = uhtml.render;
-  var html = uhtml.html;
-  var content =
-    '<button class="large btn" .test=${} onclick="${}">-</button>\
-    <span class="large value">${}</span>\
-    <button class="large btn" onclick="${}">+</button>\
-    <textarea>${}</textarea>'.split('${}');
-  define("my-counter", function (element) {
-    var state = useState(0);
-    var count = state[0];
-    var update = state[1];
-    render(element, html.for(element, 'OK')(
-      content,
-      123,
-      update.bind(null, count - 1),
-      count,
-      update.bind(null, count + 1),
-      count
-    ));
-  });
-  </script>
-</head>
-<body>
-  <my-counter></my-counter>
-</body>
-</html>
diff --git a/test/render-roots.html b/test/render-roots.html
deleted file mode 100644
index 15051f9..0000000
--- a/test/render-roots.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!doctype html>
-<!-- https://github.com/Polymer/lit-html/issues/914 -->
-<script src="../index.js"></script>
-<script>
-const {render, html} = uhtml;
-
-const root = html.node`
-  <div class="navbar-item">Item 1</div>
-  <div class="navbar-item">Item 2</div>
-`;
-
-this.onload = () => {
-  document.body.appendChild(root);
-};
-</script>
diff --git a/test/repeat.html b/test/repeat.html
deleted file mode 100644
index ce04226..0000000
--- a/test/repeat.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!doctype html>
-<!-- https://github.com/Polymer/lit-html/issues/1007 -->
-<script src="../index.js"></script>
-<script>
-const {render, html} = uhtml;
-
-const someArray = ['a', 'b', 'c'];
-
-setInterval(
-  () => {
-    render(document.body, html`
-      <div>
-      ${
-        Math.random() < 0.5 ?
-          someArray.map(c => html`<p>${c}</p>`) :
-          []
-      }
-      </div>
-    `);
-  },
-  1000
-);
-</script>
diff --git a/test/select.html b/test/select.html
deleted file mode 100644
index dc6aaab..0000000
--- a/test/select.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<!-- https://github.com/Polymer/lit-html/issues/1052 -->
-<script src="../index.js"></script>
-<script>
-const {render, html} = uhtml;
-
-const someArray = ['a', 'b', 'c'];
-const selected = (Math.random() * someArray.length) | 0;
-
-this.onload = () => {
-  render(document.body, html`
-    <select>
-      ${someArray.map((value, i) => html`
-        <option .selected=${i === selected}>${value}</option>
-      `)}
-    </select>
-  `);
-};
-</script>
diff --git a/test/shenanigans.html b/test/shenanigans.html
deleted file mode 100644
index 6ee70c6..0000000
--- a/test/shenanigans.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <script src="../index.js"></script>
-</head>
-<body>
-  <script>
-
-const {render, html} = uhtml;
-
-function span(x, i) {
-  // return html`<span class="a">${x}</span>`;
-  return html.for(this, x)`<span class="a">${x}</span>`;
-}
-
-const div1 = {};
-const div2 = {};
-
-let first = 0;
-const renderDivs = (firstRow, secondRow) => html`
-  <div>
-    ${firstRow.map(span, div1)}
-  </div>
-  <hr>
-  <div>
-    ${secondRow.map(span, div2)}
-  </div>
-`;
-
-render(document.body, renderDivs([], ['a']));
-setTimeout(
-  () => {
-    render(document.body, renderDivs(['a'], []));
-    setTimeout(
-      () => {
-        render(document.body, renderDivs([1, 2, 3], ['a', 'b']));
-        setTimeout(
-          () => {
-            render(document.body, renderDivs([1, 2], ['a', 'b', 'c']));
-            setTimeout(
-              () => {
-                render(document.body, renderDivs([1], ['b']));
-                setTimeout(
-                  () => {
-                    render(document.body, renderDivs([1, 2], ['a', 'b', 'c']));
-                  },
-                  1000
-                );
-              },
-              1000
-            );
-          },
-          1000
-        );
-      },
-      1000
-    );
-  },
-  1000
-);
-
-  </script>
-</body>
-</html>
diff --git a/test/shuffled.html b/test/shuffled.html
deleted file mode 100644
index 4141a7e..0000000
--- a/test/shuffled.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="../index.js"></script>
-  <script>
-  const {render, html} = uhtml;
-
-  const update = (items) => {
-    const ref = document.querySelector('.list-items');
-    render(ref, html`
-      <ul>
-        ${items.map(
-          ({id, name}) =>
-            html.for(ref, id)`<li data-id=${id}>${name}</li>`
-        )}
-      </ul>`
-    );
-  };
-
-  const items = [
-    {id: 1, name: 'Article X'},
-    {id: 2, name: 'Article Y'},
-    {id: 3, name: 'Article Z'},
-  ];
-
-  this.onload = () => {
-    update(items);
-    let i = setInterval(
-      (randomly) => {
-        items.sort(randomly);
-        try {
-          update(items);
-        }
-        catch(error) {
-          clearInterval(i);
-          throw error;
-        }
-      },
-      100,
-      () => Math.random() - Math.random()
-    );
-  };
-
-  </script>
-</head>
-<body>
-  <div class="list-items"></div>
-</body>
-</html>
\ No newline at end of file
diff --git a/test/single.html b/test/single.html
deleted file mode 100644
index 6835514..0000000
--- a/test/single.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="../index.js"></script>
-    <script>
-    this.onload = function () {
-      'use strict';
-      var tplInner = ['', ''];
-      var tplOuter = ['<div>', '</div>'];
-      setInterval(function () {
-        uhtml.render(
-          document.body,
-          uhtml.html(tplOuter, uhtml.html(tplInner, Math.random()))
-        );
-      }, 2000);
-    };
-    </script>
-  </head>
-  <body></body>
-</html>
diff --git a/test/svg.html b/test/svg.html
deleted file mode 100644
index f0c9bc1..0000000
--- a/test/svg.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="../index.js"></script>
-  <script>
-  var render = uhtml.render;
-  var html = uhtml.html;
-  this.onload = function () {
-    var content =
-    '<svg viewBox=${} style=${}>\
-      <rect x="0" y="0" width=${} height=${} fill="#f00" />\
-    </svg>'.split('${}');
-    const viewBoxText = '0 0 100 100';
-    render(document.body, html(
-      content,
-      '0 0 100 100',
-      'width: 1000px; height: 1000px;',
-      50, 50
-    ));
-    if (document.querySelector('svg').clientWidth != 1000)
-      alert('SVG ERROR');
-  };
-  </script>
-</head>
-</html>
\ No newline at end of file
diff --git a/test/test.html b/test/test.html
deleted file mode 100644
index 6c7d17a..0000000
--- a/test/test.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>uHTML</title>
-  <script src="https://unpkg.com/hooked-elements"></script>
-  <script src="../index.js"></script>
-  <script defer>
-  var define = hookedElements.define;
-  var useState = hookedElements.useState;
-  var render = uhtml.render;
-  var html = uhtml.html;
-  var content =
-    '<button attr=${} class="large btn" .test=${} onclick="${}">-</button>\
-    <span class="large value">${}</span>\
-    <button class="large btn" onclick="${}">+</button>\
-    <textarea>${}</textarea>'.split('${}');
-  define("my-counter", function (element) {
-    var state = useState(0);
-    var count = state[0];
-    var update = state[1];
-    render(element, html(
-      content,
-      Math.random(),
-      123,
-      update.bind(null, count - 1),
-      count,
-      update.bind(null, count + 1),
-      count
-    ));
-  });
-  </script>
-</head>
-<body>
-  <my-counter></my-counter>
-</body>
-</html>
diff --git a/test/textarea.html b/test/textarea.html
deleted file mode 100644
index 21ba933..0000000
--- a/test/textarea.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<script src="../index.js"></script>
-<script>
-this.onload = () => {
-  const {render, html} = uhtml;
-
-  let text = '';
-
-  const clear = () => {
-    text = '';
-    update();
-  };
-
-  const updateText = e => {
-    text = e.currentTarget.value;
-    update();
-  };
-
-  const update = () => render(document.body, html`
-    <textarea oninput=${updateText} .value=${text}/>
-    <br>
-    <button onclick=${clear}>clear</button>
-    <div>Text: ${text}</div>
-  `);
-
-  update();
-};
-</script>
\ No newline at end of file
diff --git a/types/debug.d.ts b/types/debug.d.ts
new file mode 100644
index 0000000..20b4cd7
--- /dev/null
+++ b/types/debug.d.ts
@@ -0,0 +1,2 @@
+declare const _default: true;
+export default _default;
diff --git a/types/dom/cdn.d.ts b/types/dom/cdn.d.ts
new file mode 100644
index 0000000..3aa5c95
--- /dev/null
+++ b/types/dom/cdn.d.ts
@@ -0,0 +1,8 @@
+export const render: any;
+export const html: any;
+export const svg: any;
+export const computed: any;
+export const signal: any;
+export const batch: any;
+export const effect: any;
+export const untracked: any;
diff --git a/types/dom/creator.d.ts b/types/dom/creator.d.ts
new file mode 100644
index 0000000..ed021b9
--- /dev/null
+++ b/types/dom/creator.d.ts
@@ -0,0 +1,2 @@
+declare function _default(document?: Document): (content: string, xml?: boolean) => DocumentFragment;
+export default _default;
diff --git a/types/dom/diff.d.ts b/types/dom/diff.d.ts
new file mode 100644
index 0000000..bacdbbf
--- /dev/null
+++ b/types/dom/diff.d.ts
@@ -0,0 +1,2 @@
+declare function _default(a: Node[], b: Node[], get: (entry: Node, action: number) => Node, before?: Node): Node[];
+export default _default;
diff --git a/types/dom/direct.d.ts b/types/dom/direct.d.ts
new file mode 100644
index 0000000..6740cd7
--- /dev/null
+++ b/types/dom/direct.d.ts
@@ -0,0 +1,2 @@
+export function _set(value: boolean): void;
+export function _get(): boolean;
diff --git a/types/dom/index.d.ts b/types/dom/index.d.ts
new file mode 100644
index 0000000..21ee583
--- /dev/null
+++ b/types/dom/index.d.ts
@@ -0,0 +1,19 @@
+/**
+ * @param {TemplateStringsArray | string[]} template
+ * @param {any[]} values
+ * @returns {Node | HTMLElement | Hole}
+ */
+export function html(template: TemplateStringsArray | string[], ...values: any[]): Node | HTMLElement | Hole;
+/**
+ * @param {TemplateStringsArray | string[]} template
+ * @param {any[]} values
+ * @returns {Node | SVGSVGElement | Hole}
+ */
+export function svg(template: TemplateStringsArray | string[], ...values: any[]): Node | SVGSVGElement | Hole;
+export function render(where: Container, what: Function | Node | Container): Container;
+export type Container = globalThis.Element | globalThis.HTMLElement | globalThis.SVGSVGElement | globalThis.DocumentFragment;
+import { Hole } from './rabbit.js';
+import { fragment } from './update.js';
+import { unsafe } from '../utils.js';
+export { Hole, fragment, unsafe };
+export { signal, computed, effect, untracked, batch } from "./signals.js";
diff --git a/types/dom/ish.d.ts b/types/dom/ish.d.ts
new file mode 100644
index 0000000..33d07fe
--- /dev/null
+++ b/types/dom/ish.d.ts
@@ -0,0 +1,50 @@
+export const ELEMENT: 1;
+export const ATTRIBUTE: 2;
+export const TEXT: 3;
+export const COMMENT: 8;
+export const DOCUMENT_TYPE: 10;
+export const FRAGMENT: 11;
+export const COMPONENT: 42;
+export const TEXT_ELEMENTS: Set<string>;
+export const VOID_ELEMENTS: Set<string>;
+export const props: Readonly<{}>;
+export const children: readonly any[];
+export function append(node: any, child: any): any;
+export function prop(node: any, name: any, value: any): void;
+export function fromJSON(json: any): any;
+export class Node {
+    constructor(type: any);
+    type: any;
+    parent: any;
+    toJSON(): any[];
+}
+export class Comment extends Node {
+    data: any;
+}
+export class DocumentType extends Node {
+    data: any;
+}
+export class Text extends Node {
+    data: any;
+    toString(): any;
+}
+export class Component extends Node {
+    constructor();
+    name: string;
+    props: Readonly<{}>;
+    children: readonly any[];
+    toJSON(): number[];
+}
+export class Element extends Node {
+    constructor(name: any, xml?: boolean);
+    name: any;
+    xml: boolean;
+    props: Readonly<{}>;
+    children: readonly any[];
+}
+export class Fragment extends Node {
+    constructor();
+    name: string;
+    children: readonly any[];
+    toJSON(): number[];
+}
diff --git a/types/dom/keyed.d.ts b/types/dom/keyed.d.ts
new file mode 100644
index 0000000..993b8fe
--- /dev/null
+++ b/types/dom/keyed.d.ts
@@ -0,0 +1,11 @@
+export const keyed: WeakMap<WeakKey, any>;
+export class Keyed extends Map<any, any> {
+    constructor();
+    get(key: any): any;
+    /**
+     * @param {any} key
+     * @param {Node} node
+     * @param {import('./rabbit.js').Hole} hole
+     */
+    set(key: any, node: Node, hole: import("./rabbit.js").Hole): void;
+}
diff --git a/types/dom/persistent-fragment.d.ts b/types/dom/persistent-fragment.d.ts
new file mode 100644
index 0000000..4b6dc76
--- /dev/null
+++ b/types/dom/persistent-fragment.d.ts
@@ -0,0 +1,7 @@
+/**
+ * @param {DocumentFragment} fragment
+ * @returns {DocumentFragment}
+ */
+export function PersistentFragment(fragment: DocumentFragment): DocumentFragment;
+export function diffFragment(node: Node, operation: 1 | 0 | -0 | -1): Node;
+export const nodes: unique symbol;
diff --git a/types/dom/rabbit.d.ts b/types/dom/rabbit.d.ts
new file mode 100644
index 0000000..8623e10
--- /dev/null
+++ b/types/dom/rabbit.d.ts
@@ -0,0 +1,22 @@
+export function dom(hole: Hole): Node;
+export class Hole {
+    /**
+     * @param {[DocumentFragment, unknown[], import('./keyed.js').Keyed?]} template
+     * @param {unknown[]} values
+     */
+    constructor(template: [DocumentFragment, unknown[], import("./keyed.js").Keyed?], values: unknown[]);
+    t: [DocumentFragment, unknown[], import("./keyed.js").Keyed?];
+    v: unknown[];
+    n: DocumentFragment | ChildNode;
+    k: number;
+    /**
+     * @param {boolean} [direct]
+     * @returns {Node}
+     */
+    valueOf(direct?: boolean): Node;
+    /**
+     * @param {Hole} hole
+     * @returns {Node}
+     */
+    update(hole: Hole): Node;
+}
diff --git a/types/dom/resolve.d.ts b/types/dom/resolve.d.ts
new file mode 100644
index 0000000..67ef24a
--- /dev/null
+++ b/types/dom/resolve.d.ts
@@ -0,0 +1,2 @@
+declare function _default(root: any, path: any): any;
+export default _default;
diff --git a/types/dom/signals.d.ts b/types/dom/signals.d.ts
new file mode 100644
index 0000000..2f5c607
--- /dev/null
+++ b/types/dom/signals.d.ts
@@ -0,0 +1,5 @@
+export function signal(...args: any[]): any;
+export function _get(): any;
+export function _set(fn: any): void;
+export function batch(fn: any): any;
+export { Signal, computed, effect, untracked };
diff --git a/types/dom/update.d.ts b/types/dom/update.d.ts
new file mode 100644
index 0000000..e3c9159
--- /dev/null
+++ b/types/dom/update.d.ts
@@ -0,0 +1,20 @@
+export const ARRAY: number;
+export const ARIA: number;
+export const ATTRIBUTE: number;
+export const COMMENT: number;
+export const COMPONENT: number;
+export const DATA: number;
+export const DIRECT: number;
+export const DOTS: number;
+export const EVENT: number;
+export const KEY: number;
+export const PROP: number;
+export const TEXT: number;
+export const TOGGLE: number;
+export const UNSAFE: number;
+export const REF: number;
+export const SIGNAL: number;
+export const fragment: (content: string, xml?: boolean) => DocumentFragment;
+export const ref: unique symbol;
+export function isKeyed(): boolean;
+export function update(node: any, type: any, path: any, name: any, hint: any): any[];
diff --git a/types/errors.d.ts b/types/errors.d.ts
new file mode 100644
index 0000000..62bb153
--- /dev/null
+++ b/types/errors.d.ts
@@ -0,0 +1,20 @@
+declare namespace _default {
+    function text(template: any, tag: any, value: any): SyntaxError;
+    function unclosed(template: any, tag: any): SyntaxError;
+    function unclosed_element(template: any, tag: any): SyntaxError;
+    function invalid_content(template: any): SyntaxError;
+    function invalid_closing(template: any): SyntaxError;
+    function invalid_nul(template: any): SyntaxError;
+    function invalid_comment(template: any): SyntaxError;
+    function invalid_layout(template: any): SyntaxError;
+    function invalid_doctype(template: any, value: any): SyntaxError;
+    function invalid_template(template: any): SyntaxError;
+    function invalid_path(template: any, path: any): SyntaxError;
+    function invalid_attribute(template: any, kind: any): SyntaxError;
+    function invalid_interpolation(template: any, value: any): SyntaxError;
+    function invalid_hole(value: any): SyntaxError;
+    function invalid_key(value: any): SyntaxError;
+    function invalid_array(value: any): SyntaxError;
+    function invalid_component(value: any): SyntaxError;
+}
+export default _default;
diff --git a/types/json/index.d.ts b/types/json/index.d.ts
new file mode 100644
index 0000000..c15d58d
--- /dev/null
+++ b/types/json/index.d.ts
@@ -0,0 +1,2 @@
+export function html(template: any, ...values: any[]): any;
+export function svg(template: any, ...values: any[]): any;
diff --git a/types/json/resolve.d.ts b/types/json/resolve.d.ts
new file mode 100644
index 0000000..67ef24a
--- /dev/null
+++ b/types/json/resolve.d.ts
@@ -0,0 +1,2 @@
+declare function _default(root: any, path: any): any;
+export default _default;
diff --git a/types/json/update.d.ts b/types/json/update.d.ts
new file mode 100644
index 0000000..71eba26
--- /dev/null
+++ b/types/json/update.d.ts
@@ -0,0 +1,13 @@
+export const ARIA: 0;
+export const ATTRIBUTE: 1;
+export const COMMENT: 2;
+export function comment(node: any, value: any): void;
+export const COMPONENT: 3;
+export const DATA: 4;
+export const DIRECT: 5;
+export const DOTS: 6;
+export const EVENT: 7;
+export const KEY: 8;
+export const TEXT: 9;
+export const TOGGLE: 10;
+export function update(node: any, type: any, path: any, name: any): any[];
diff --git a/types/parser/index.d.ts b/types/parser/index.d.ts
new file mode 100644
index 0000000..45bcd6e
--- /dev/null
+++ b/types/parser/index.d.ts
@@ -0,0 +1,25 @@
+declare function _default({ Comment, DocumentType, Text, Fragment, Element, Component, update, }: {
+    Comment?: typeof DOMComment;
+    DocumentType?: typeof DOMDocumentType;
+    Text?: typeof DOMText;
+    Fragment?: typeof DOMFragment;
+    Element?: typeof DOMElement;
+    Component?: typeof DOMComponent;
+    update?: update;
+}): (template: TemplateStringsArray | string[], holes: unknown[], xml: boolean) => [Node, unknown[]];
+export default _default;
+export type Node = import("../dom/ish.js").Node;
+export type Element = import("../dom/ish.js").Element;
+export type Component = import("../dom/ish.js").Component;
+export type update = (node: import("../dom/ish.js").Node, type: typeof ATTRIBUTE | typeof TEXT | typeof COMMENT | typeof COMPONENT, path: number[], name: string, hint: unknown) => unknown;
+export type Container = Element | Component;
+import { Comment as DOMComment } from '../dom/ish.js';
+import { DocumentType as DOMDocumentType } from '../dom/ish.js';
+import { Text as DOMText } from '../dom/ish.js';
+import { Fragment as DOMFragment } from '../dom/ish.js';
+import { Element as DOMElement } from '../dom/ish.js';
+import { Component as DOMComponent } from '../dom/ish.js';
+import { ATTRIBUTE } from '../dom/ish.js';
+import { TEXT } from '../dom/ish.js';
+import { COMMENT } from '../dom/ish.js';
+import { COMPONENT } from '../dom/ish.js';
diff --git a/types/utils.d.ts b/types/utils.d.ts
new file mode 100644
index 0000000..f613117
--- /dev/null
+++ b/types/utils.d.ts
@@ -0,0 +1,34 @@
+export function escape(es: any): any;
+export class Unsafe {
+    constructor(data: any);
+    valueOf(): any;
+    toString(): string;
+    #private;
+}
+export function unsafe(data: any): Unsafe;
+export function createComment(value: any): Comment;
+export const assign: {
+    <T extends {}, U>(target: T, source: U): T & U;
+    <T extends {}, U, V>(target: T, source1: U, source2: V): T & U & V;
+    <T extends {}, U, V, W>(target: T, source1: U, source2: V, source3: W): T & U & V & W;
+    (target: object, ...sources: any[]): any;
+};
+export const defineProperties: <T>(o: T, properties: PropertyDescriptorMap & ThisType<any>) => T;
+export const entries: {
+    <T>(o: {
+        [s: string]: T;
+    } | ArrayLike<T>): [string, T][];
+    (o: {}): [string, any][];
+};
+export const freeze: {
+    <T extends Function>(f: T): T;
+    <T extends {
+        [idx: string]: U | null | undefined | object;
+    }, U extends string | bigint | number | boolean | symbol>(o: T): Readonly<T>;
+    <T>(o: T): Readonly<T>;
+};
+export const isArray: (arg: any) => arg is any[];
+export const keys: {
+    (o: object): string[];
+    (o: {}): string[];
+};