From 43660276582214b1822a73b840c1aff5539fa748 Mon Sep 17 00:00:00 2001
From: Jan Andrle <andrle.jan@centrum.cz>
Date: Fri, 7 Mar 2025 14:40:45 +0100
Subject: [PATCH] :zap: dde and docs improvements (#27)

* :zap: :tada:

* :zap: wip

* :abc:

* :zap: wip

* :zap: wip

* :zap: Refatc signals to .get/.set syntax #26

* :bug: Better types for on*

* :abc:

* :abc:

* :bug: coumputed signal

* :abc: :zap: Docs UI/UX

* :zap: :abc: UI enhancements

* :zap: (bs) (un)min

* :abc: adds debugging

* :abc: ssr

* :abc:

* :zap: bs/lint

* :abc:

* :abc: UI

* :abc: updates texts

* :abc:UI

* :zap: dispatch

* :abc: events

* :abc: elements

* :abc: intro

* :bug: fixes completitions for el with components

* :bug: wrong file(s) in git

* :abc: logo

* :bug: :abc: types 3ps

* :abc: ui/ux

* :abc:

* :abc:

* :abc: scopes

* :abc:

* :abc: ui/ux

* :abc:

* :zap: issignal

* :abc: improvemens

* :zap: irelands

* :abc: UI/UX/wording

* :bug: npx-hint

[Scrollable region must have keyboard access | Axe Rules | Deque University | Deque Systems](https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI)

* :abc: logos

* :zap: better? dts builds

* Update README.md
---
 .gitignore                                    |    1 +
 README.md                                     |  166 +-
 bs/build.js                                   |   96 +-
 bs/dev/.build.js                              |  108 ++
 bs/docs.js                                    |   14 +-
 bs/docs/jsdom.js                              |    2 +-
 dist/dde-with-signals.d.ts                    |  785 ++++++++
 dist/dde-with-signals.js                      | 1645 ++++++++++-------
 dist/dde-with-signals.min.d.ts                |  785 ++++++++
 dist/dde-with-signals.min.js                  |    4 +
 dist/dde.d.ts                                 |  784 ++++++++
 dist/dde.js                                   | 1104 ++++++-----
 dist/dde.min.d.ts                             |  784 ++++++++
 dist/dde.min.js                               |    1 +
 dist/esm-with-signals.d.min.ts                |  641 +++++++
 dist/esm-with-signals.d.ts                    |  970 ++++++----
 dist/esm-with-signals.js                      | 1320 ++++++++-----
 dist/esm-with-signals.min.d.ts                |  783 ++++++++
 dist/esm-with-signals.min.js                  |    4 +
 dist/esm.d.min.ts                             |  568 ++++++
 dist/esm.d.ts                                 |  905 +++++----
 dist/esm.js                                   |  853 +++++----
 dist/esm.min.d.ts                             |  782 ++++++++
 dist/esm.min.js                               |    1 +
 docs/assets/favicon.svg                       |   60 +
 docs/assets/logo.svg                          |   71 +
 docs/components/code.html.js                  |  218 ++-
 docs/components/code.js.js                    |   71 +-
 docs/components/example.html.js               |   98 +-
 .../customElement/observedAttributes.js       |    2 +-
 .../examples/debugging/consoleLog.js          |   15 +
 .../examples/debugging/debouncing.js          |   15 +
 .../examples/debugging/dom-reactive-mark.js   |    4 +
 .../examples/debugging/mutations.js           |   15 +
 .../examples/elements/dde-dom-create.js       |   14 +
 .../examples/elements/dde-dom-tree.js         |   11 +
 .../examples/elements/native-dom-create.js    |   19 +
 .../examples/elements/native-dom-tree.js      |   15 +
 .../examples/events/append-event.js           |    8 +
 .../examples/events/attribute-event.js        |    7 +
 .../components/examples/events/chain-event.js |    8 +
 .../examples/events/native-event.js           |    2 +
 .../examples/events/property-event.js         |    7 +
 .../examples/introducing/3ps-before.js        |   14 +
 docs/components/examples/introducing/3ps.js   |   20 +-
 .../examples/introducing/helloWorld.js        |   45 +-
 .../examples/ireland-test/counter.js          |   37 +
 .../examples/scopes/custom-scope.js           |   14 +
 .../components/examples/scopes/declarative.js |   53 +-
 docs/components/examples/scopes/imperative.js |   50 +-
 docs/components/examples/scopes/mixed.js      |   36 +
 docs/components/examples/scopes/with-scope.js |   45 +
 .../examples/signals/actions-demo.js          |    2 +-
 .../examples/signals/actions-todos.js         |    4 +-
 .../examples/signals/computations-abort.js    |    8 +-
 .../examples/signals/debugging-console.js     |   20 +
 .../examples/signals/debugging-dom.js         |   38 +
 docs/components/examples/signals/derived.js   |   13 +
 docs/components/examples/signals/dom-attrs.js |    6 +-
 docs/components/examples/signals/dom-el.js    |    6 +-
 docs/components/examples/signals/signals.js   |    8 +-
 docs/components/examples/ssr/async-data.js    |   43 +
 docs/components/examples/ssr/basic-example.js |   47 +
 docs/components/examples/ssr/intro.js         |    2 +
 docs/components/examples/ssr/pages.js         |   35 +
 docs/components/examples/ssr/start.js         |   27 +
 .../examples/ssr/static-site-generator.js     |   44 +
 docs/components/ireland.html.js               |   88 +
 docs/components/ireland.js.js                 |   13 +
 docs/components/mnemonic/events-init.js       |   10 +-
 docs/components/pageUtils.html.js             |  119 +-
 docs/global.css.js                            |  530 +++++-
 docs/index.html.js                            |  100 +-
 docs/layout/head.html.js                      |  222 ++-
 docs/layout/simplePage.html.js                |   17 +-
 docs/p02-elements.html.js                     |  204 +-
 docs/p03-events.html.js                       |  243 ++-
 docs/p04-signals.html.js                      |  264 ++-
 docs/p05-scopes.html.js                       |  192 +-
 docs/p06-customElement.html.js                |  223 ++-
 docs/p07-debugging.html.js                    |  192 ++
 docs/p08-extensions.html.js                   |  255 +++
 docs/p09-ssr.html.js                          |  138 ++
 docs/p10-ireland.html.js                      |  363 ++++
 docs/ssr.js                                   |   22 +-
 docs/types.d.ts                               |    1 +
 examples/components/3rd-party.js              |    4 +-
 examples/components/fullNameComponent.js      |   10 +-
 examples/components/todosComponent.js         |   14 +-
 examples/components/webComponent.js           |    2 +-
 examples/index.js                             |    2 +-
 index.d.ts                                    |   94 +-
 jsdom.js                                      |    2 +-
 package-lock.json                             | 1551 ++++++++--------
 package.json                                  |   21 +-
 signals.d.ts                                  |   12 +-
 signals.js                                    |    6 +-
 src/customElement.js                          |   34 +
 src/dom-common.js                             |   51 +-
 src/dom.js                                    |  215 ++-
 src/events-observer.js                        |  103 +-
 src/events.js                                 |   69 +-
 src/helpers.js                                |   63 +-
 src/observables-lib.js                        |  292 ---
 src/signals-common.js                         |   13 -
 src/signals-lib.js                            |  293 ---
 src/signals-lib/common.js                     |   44 +
 src/signals-lib/helpers.js                    |   39 +
 src/{ => signals-lib}/signals-lib.d.ts        |    2 +-
 src/signals-lib/signals-lib.js                |  487 +++++
 110 files changed, 16261 insertions(+), 4741 deletions(-)
 create mode 100644 bs/dev/.build.js
 create mode 100644 dist/dde-with-signals.d.ts
 create mode 100644 dist/dde-with-signals.min.d.ts
 create mode 100644 dist/dde-with-signals.min.js
 create mode 100644 dist/dde.d.ts
 create mode 100644 dist/dde.min.d.ts
 create mode 100644 dist/dde.min.js
 create mode 100644 dist/esm-with-signals.d.min.ts
 create mode 100644 dist/esm-with-signals.min.d.ts
 create mode 100644 dist/esm-with-signals.min.js
 create mode 100644 dist/esm.d.min.ts
 create mode 100644 dist/esm.min.d.ts
 create mode 100644 dist/esm.min.js
 create mode 100644 docs/assets/favicon.svg
 create mode 100644 docs/assets/logo.svg
 create mode 100644 docs/components/examples/debugging/consoleLog.js
 create mode 100644 docs/components/examples/debugging/debouncing.js
 create mode 100644 docs/components/examples/debugging/dom-reactive-mark.js
 create mode 100644 docs/components/examples/debugging/mutations.js
 create mode 100644 docs/components/examples/elements/dde-dom-create.js
 create mode 100644 docs/components/examples/elements/dde-dom-tree.js
 create mode 100644 docs/components/examples/elements/native-dom-create.js
 create mode 100644 docs/components/examples/elements/native-dom-tree.js
 create mode 100644 docs/components/examples/events/append-event.js
 create mode 100644 docs/components/examples/events/attribute-event.js
 create mode 100644 docs/components/examples/events/chain-event.js
 create mode 100644 docs/components/examples/events/native-event.js
 create mode 100644 docs/components/examples/events/property-event.js
 create mode 100644 docs/components/examples/introducing/3ps-before.js
 create mode 100644 docs/components/examples/ireland-test/counter.js
 create mode 100644 docs/components/examples/scopes/custom-scope.js
 create mode 100644 docs/components/examples/scopes/mixed.js
 create mode 100644 docs/components/examples/scopes/with-scope.js
 create mode 100644 docs/components/examples/signals/debugging-console.js
 create mode 100644 docs/components/examples/signals/debugging-dom.js
 create mode 100644 docs/components/examples/signals/derived.js
 create mode 100644 docs/components/examples/ssr/async-data.js
 create mode 100644 docs/components/examples/ssr/basic-example.js
 create mode 100644 docs/components/examples/ssr/intro.js
 create mode 100644 docs/components/examples/ssr/pages.js
 create mode 100644 docs/components/examples/ssr/start.js
 create mode 100644 docs/components/examples/ssr/static-site-generator.js
 create mode 100644 docs/components/ireland.html.js
 create mode 100644 docs/components/ireland.js.js
 create mode 100644 docs/p07-debugging.html.js
 create mode 100644 docs/p08-extensions.html.js
 create mode 100644 docs/p09-ssr.html.js
 create mode 100644 docs/p10-ireland.html.js
 delete mode 100644 src/observables-lib.js
 delete mode 100644 src/signals-common.js
 delete mode 100644 src/signals-lib.js
 create mode 100644 src/signals-lib/common.js
 create mode 100644 src/signals-lib/helpers.js
 rename src/{ => signals-lib}/signals-lib.d.ts (84%)
 create mode 100644 src/signals-lib/signals-lib.js

diff --git a/.gitignore b/.gitignore
index 8fa8188..5990973 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 dist/docs/
+dist/.*
 # Logs
 logs
 *.log
diff --git a/README.md b/README.md
index eae793f..07e05cc 100644
--- a/README.md
+++ b/README.md
@@ -2,94 +2,120 @@
 | [source code on GitHub](https://github.com/jaandrle/deka-dom-el)
 | [*mirrored* on Gitea](https://gitea.jaandrle.cz/jaandrle/deka-dom-el)
 
+<p align="center">
+	<img src="docs/assets/logo.svg" alt="Deka DOM Elements Logo" width="180" height="180">
+</p>
+
+# Deka DOM Elements
+
 ***Vanilla for flavouring — a full-fledged feast for large projects***
 
 *…use simple DOM API by default and library tools and logic when you need them*
 
 ```javascript
+// 🌟 Reactive component with clear separation of concerns
 document.body.append(
-	el(HelloWorldComponent, { initial: "🚀" })
+	el(EmojiCounter, { initial: "🚀" })
 );
-/** @typedef {"🎉" | "🚀"} Emoji */
-/** @param {{ initial: Emoji }} attrs */
-function HelloWorldComponent({ initial }){
-	const clicks= S(0);
-	const emoji= S(initial);
+
+function EmojiCounter({ initial }) {
+	// ✨ State - Define reactive data
+	const count = S(0);
+	const emoji = S(initial);
+
 	/** @param {HTMLOptionElement} el */
 	const isSelected= el=> (el.selected= el.value===initial);
-	// @ts-expect-error 2339: The <select> has only two options with {@link Emoji}
-	const onChange= on("change", event=> emoji(event.target.value));
-
+	
+	// 🔄 View - UI updates automatically when signals change
 	return el().append(
-		el("p", {
-			textContent: S(() => `Hello World ${emoji().repeat(clicks())}`),
-			className: "example",
-			ariaLive: "polite", //OR ariaset: { live: "polite" },
-			dataset: { example: "Example" }, //OR dataExample: "Example",
-		}),
-		el("button",
-			{ textContent: "Fire", type: "button" },
-			on("click", ()=> clicks(clicks() + 1)),
-			on("keyup", ()=> clicks(clicks() - 2)),
-		),
-		el("select", null, onChange).append(
-			el(OptionComponent, "🎉", isSelected),//OR { textContent: "🎉" }
-			el(OptionComponent, "🚀", isSelected),//OR { textContent: "🚀" }
-		)
+	el("p", {
+		className: "output",
+		textContent: S(() =>
+		`Hello World ${emoji.get().repeat(clicks.get())}`),
+	}),
+	
+	// 🎮 Controls - Update state on events
+	el("button", { textContent: "Add Emoji" },
+		on("click", () => count.set(count.get() + 1))
+	),
+	
+	el("select", null, on("change", e => emoji.set(e.target.value)))
+	.append(
+		el(Option, "🎉", isSelected),
+		el(Option, "🚀", isSelected),
+		el(Option, "💖", isSelected),
+	)
 	);
 }
-function OptionComponent({ textContent }){
-	return el("option", { value: textContent, textContent })
+function Option({ textContent }){
+	return el("option", { value: textContent, textContent });
 }
 ```
-# Deka DOM Elements
-Creating reactive elements, components and Web components using [IDL](https://developer.mozilla.org/en-US/docs/
-Glossary/IDL)/JavaScript DOM API and [**signals/observables**](#signals).
 
-## Inspiration and suggested alternatives
-- my previous library (mostly used internaly): [jaandrle/dollar_dom_component: Functional DOM components without
-JSX and virtual DOM.](https://github.com/jaandrle/dollar_dom_component)
-- [vanjs-org/van: 🍦 VanJS: World's smallest reactive UI framework. Incredibly Powerful, Insanely Small -
-Everyone can build a useful UI app in an hour.](https://github.com/vanjs-org/van)
-- [hyperhype/hyperscript: Create HyperText with JavaScript.](https://github.com/hyperhype/hyperscript)
-- [adamhaile/S: S.js - Simple, Clean, Fast Reactive Programming in Javascript](https://github.com/adamhaile/S)
-([adamhaile/surplus: High performance JSX web views for S.js applications](https://github.com/adamhaile/surplus))
-- [potch/signals: a small reactive signals library](https://github.com/potch/signals)
+Creating reactive elements, components, and Web Components using the native
+[IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)/JavaScript DOM API enhanced with
+[**signals/observables**](#understanding-signals).
 
-## Why an another one?
-This library falls somewhere between van/hyperscript and [solid-js](https://github.com/solidjs/solid) in terms of size,
-complexity, and usability.
+## Features at a Glance
 
-Another goal is to proceed in the best spirit of functional programming. This involves starting with
-pure JavaScript (DOM API) and gradually adding auxiliary functions, ranging from “minor” improvements
-to the capability of writing complete declarative reactive UI templates.
+- ✅ **No build step required** — use directly in browsers or Node.js
+- ☑️ **Lightweight** — ~10-15kB minified (original goal 10kB) with zero/minimal dependencies
+- ✅ **Declarative & functional approach** for clean, maintainable code
+- ✅ **Optional signals** with support for custom reactive implementations
+- ✅ **Server-side rendering** support via [jsdom](https://github.com/jsdom/jsdom)
+- 🔄 **TypeScript support** (work in progress)
+- 🔄 **Enhanced Web Components** support (work in progress)
 
-As a result, any “internal” function (`assign`, `classListDeclarative`, `on`, `dispatchEvent`, …, `S`, …)
-can be used independently, although they are primarily designed for use in combination.  This can also,
-hopefully, help in integrating the library into existing projects.
+## Why Another Library?
 
-To balance these requirements, numerous compromises have been made. To summarize:
-- [ ] Library size: 10–15kB minified (the original goal was a maximum of 10kB)
-- [x] Optional use of *signals* with the ability to register *your own signals/observables implementation*
-- [x] *No build step required*
-- [x] Preference for a *declarative/functional* approach
-- [x] Focus on zero/minimal dependencies
-- [ ] Support for/enhancement of custom elements (web components)
-- [x] Support for SSR ([jsdom](https://github.com/jsdom/jsdom))
-- [ ] WIP providing types
+This library bridges the gap between minimal solutions like van/hyperscript and more comprehensive frameworks like
+[solid-js](https://github.com/solidjs/solid), offering a balanced trade-off between size, complexity, and usability.
 
-## First steps
-- [**Guide**](https://jaandrle.github.io/deka-dom-el)
-- Documentation
-- Installation
-	- npm
-	- [dist/](dist/) (`https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/`…)
+Following functional programming principles, Deka DOM Elements starts with pure JavaScript (DOM API) and gradually adds
+auxiliary functions. These range from minor improvements to advanced features for building complete declarative
+reactive UI templates.
 
-## Signals
-- [Signals — whats going on behind the scenes | by Ryan Hoffnan | ITNEXT](https://itnext.io/
-signals-whats-going-on-behind-the-scenes-ec858589ea63)
-- [The Evolution of Signals in JavaScript - DEV Community](https://dev.to/this-is-learning/the-evolution-of-signals-in-
-javascript-8ob)
-- there is also [tc39/proposal-signals: A proposal to add signals to JavaScript.](https://github.com/tc39/proposal-
-signals)
-- [Observer pattern - Wikipedia](https://en.wikipedia.org/wiki/Observer_pattern)
+A key advantage: any internal function (`assign`, `classListDeclarative`, `on`, `dispatchEvent`, `S`, etc.) can be used
+independently while also working seamlessly together. This modular approach makes it easier to integrate the library
+into existing projects.
+
+## Getting Started
+
+### Installation
+
+#### npm
+```bash
+# TBD
+# npm install deka-dom-el
+```
+
+#### Direct Script
+```html
+<script src="https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/dde-with-signals.min.js"></script>
+<script type="module">
+	const { el, S } = dde;
+</script>
+```
+
+### Documentation
+
+- [**Interactive Guide**](https://jaandrle.github.io/deka-dom-el): WIP
+- [Examples](./examples/): TBD/WIP
+
+## Understanding Signals
+
+Signals are the reactive backbone of Deka DOM Elements:
+
+- [Signals — what's going on behind the scenes](https://itnext.io/signals-whats-going-on-behind-the-scenes-ec858589ea63)
+- [The Evolution of Signals in JavaScript](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob)
+- [TC39 Signals Proposal](https://github.com/tc39/proposal-signals) (future standard)
+- [Observer pattern](https://en.wikipedia.org/wiki/Observer_pattern) (underlying concept)
+
+## Inspiration and Alternatives
+
+- [vanjs-org/van](https://github.com/vanjs-org/van) - World's smallest reactive UI framework
+- [adamhaile/S](https://github.com/adamhaile/S) - Simple, clean, fast reactive programming
+- [hyperhype/hyperscript](https://github.com/hyperhype/hyperscript) - Create HyperText with JavaScript
+- [potch/signals](https://github.com/potch/signals) - A small reactive signals library
+- [jaandrle/dollar_dom_component](https://github.com/jaandrle/dollar_dom_component) -
+	Functional DOM components without JSX/virtual DOM
diff --git a/bs/build.js b/bs/build.js
index 332b7ba..4f54d23 100755
--- a/bs/build.js
+++ b/bs/build.js
@@ -1,71 +1,37 @@
 #!/usr/bin/env -S npx nodejsscript
-import { bundle as bundleDTS } from "dts-bundler";
+import { build } from "./dev/.build.js"
 const files= [ "index", "index-with-signals" ];
-const filesOut= (file, mark= "esm")=> "dist/"+file.replace("index", mark);
-const css= echo.css`
-	.info{ color: gray; }
-`;
 
-$.api("", true)
-.option("--minify", "Level of minification [ no, full, partial (default) ]")
-.action(async function main({ minify= "partial" }){
-	for(const file_root of files){
-		const file= file_root+".js";
-		echo("Processing: "+ file);
-		const out= filesOut(file);
-		const esbuild_output= s.$().run([
-			"npx esbuild '::file::'",
-			"--platform=neutral",
-			"--bundle",
-			minifyOption(minify),
-			"--legal-comments=inline",
-			"--packages=external",
-			"--outfile='::out::'"
-		].filter(Boolean).join(" "), { file, out });
-		if(esbuild_output.code)
-			return $.exit(esbuild_output.code, echo(esbuild_output.stderr));
-		echoVariant(esbuild_output.stderr.split("\n")[1].trim()+ " (esbuild)");
-		pipe(
-			f=> f.replace(/^ +/gm, m=> "\t".repeat(m.length/2)),
-			f=> s.echo(f).to(out)
-		)(s.cat(out));
-
-		const file_dts= file_root+".d.ts";
-		const file_dts_out= filesOut(file_dts);
-		echoVariant(file_dts_out);
-		s.echo(bundleDTS(file_dts)).to(file_dts_out);
-
-		await toDDE(out, file_root);
-	}
-	$.exit(0);
-
-	async function toDDE(file, file_root){
-		const name= "dde";
-		const out= filesOut(file_root+".js", name);
-		echoVariant(`${out} (${file} → globalThis.${name})`)
-
-		let content= s.cat(file).toString().split(/export ?{/);
-		content.splice(1, 0, `\nglobalThis.${name}= {`);
-		content[2]= content[2]
-			.replace(/,(?!\n)/g, ",\n")
-			.replace(/(?<!\n)}/, "\n}")
-			.replace(/^(\t*)(.*) as ([^,\n]*)(,?)$/mg, "$1$3: $2$4");
-		s.echo([
-			`//deka-dom-el library is available via global namespace \`${name}\``,
-			"(()=> {",
-			content.join(""),
-			"})();"
-		].join("\n")).to(out);
-	}
+$.api("")
+.command("main", "Build main files", { default: true })
+.action(async function main(){
+	const regular = await build({
+		files,
+		filesOut,
+		minify: "no",
+	});
+	const min = await build({
+		files,
+		filesOut(file, mark= "esm"){
+			const out= filesOut(file, mark);
+			const idx= out.lastIndexOf(".");
+			return out.slice(0, idx)+".min"+out.slice(idx);
+		},
+		minify: "full",
+	});
+	return $.exit(regular + min);
+})
+.command("signals", "Build only signals (for example for analysis)")
+.action(async function signals(){
+	const regular = await build({
+		files: [ "signals" ],
+		filesOut(file){ return "dist/."+file; },
+		minify: "no",
+		dde: false,
+	});
+	return $.exit(regular);
 })
 .parse();
 
-/** @param {"no"|"full"|"partial"} level */
-function minifyOption(level= "partial"){
-	if("no"===level) return undefined;
-	if("full"===level) return "--minify";
-	return "--minify-syntax --minify-identifiers";
-}
-function echoVariant(name){
-	return echo("%c✓ "+name, css.info+css);
-}
+
+function filesOut(file, mark= "esm"){ return "dist/"+file.replace("index", mark); }
diff --git a/bs/dev/.build.js b/bs/dev/.build.js
new file mode 100644
index 0000000..d422ad3
--- /dev/null
+++ b/bs/dev/.build.js
@@ -0,0 +1,108 @@
+#!/usr/bin/env -S npx nodejsscript
+import { bundle, bundle as bundleDTS } from "dts-bundler";
+const css= echo.css`
+	.info{ color: gray; }
+`;
+
+export async function build({ files, filesOut, minify= "partial", dde= true }){
+	for(const file_root of files){
+		const file= file_root+".js";
+		echo(`Processing ${file} (minified: ${minify})`);
+		const out= filesOut(file);
+		const esbuild_output= buildEsbuild({ file, out, minify });
+		echoVariant(esbuild_output.stderr.split("\n")[1].trim()+ " (esbuild)");
+
+		const file_dts= file_root+".d.ts";
+		const file_dts_out= filesOut(file_dts);
+		echoVariant(file_dts_out, true);
+		buildDts({
+			bundle: out,
+			entry: file_dts,
+		});
+		echoVariant(file_dts_out);
+
+		if(dde) toDDE(file, file_root);
+	}
+	return 0;
+
+	async function toDDE(file, file_root){
+		const name= "dde";
+		const out= filesOut(file_root+".js", name);
+
+		const params= [
+			"--format=iife",
+			"--global-name="+name,
+		];
+		const dde_output= buildEsbuild({ file, out, minify, params });
+		echoVariant(`${out} (${file} → globalThis.${name})`)
+
+		const file_dts= file_root+".d.ts";
+		const file_dts_out= filesOut(file_dts, name);
+		echoVariant(file_dts_out, true);
+		buildDts({
+			name,
+			bundle: out,
+			entry: file_dts,
+		})
+		echoVariant(file_dts_out);
+
+		return dde_output;
+	}
+}
+export function buildDts({ bundle, entry, name }){
+	const out= bundle.slice(0, bundle.lastIndexOf("."))+".d.ts";
+	const dts_b_g_output= s.run([
+		"npx dts-bundle-generator",
+		"--silent",
+		"-o ::out::",
+		!name ? false : ("--umd-module-name "+name),
+		"--inline-declare-global",
+		"::entry::"
+	].filter(Boolean).join(" "), { out, entry });
+	return dts_b_g_output;
+}
+class ErrorEsbuild extends Error{
+	constructor({ code, stderr }){
+		super(stderr);
+		this.code= code;
+		this.stderr= stderr;
+	}
+}
+function buildEsbuild({ file, out, minify= "partial", params= [] }){
+	try {
+		return esbuild({ file, out, minify, params });
+	} catch(e){
+		if(e instanceof ErrorEsbuild)
+			return $.exit(e.code, echo(e.stderr));
+		throw e;
+	}
+}
+export function esbuild({ file, out, minify= "partial", params= [] }){
+	const esbuild_output= s.$().run([
+		"npx esbuild '::file::'",
+		"--platform=neutral",
+		"--bundle",
+		minifyOption(minify),
+		"--legal-comments=inline",
+		"--packages=external",
+		...params,
+		"--outfile='::out::'"
+	].filter(Boolean).join(" "), { file, out });
+	if(esbuild_output.code)
+		throw new ErrorEsbuild(esbuild_output);
+	pipe(
+		f=> f.replace(/^ +/gm, m=> "\t".repeat(m.length/2)),
+		f=> s.echo(f).to(out)
+	)(s.cat(out));
+	return esbuild_output;
+}
+/** @param {"no"|"full"|"partial"} level */
+function minifyOption(level= "partial"){
+	if("no"===level) return undefined;
+	if("full"===level) return "--minify";
+	return "--minify-syntax --minify-identifiers";
+}
+function echoVariant(name, todo= false){
+	if(todo) return echo.use("-R", "~ "+name);
+	return echo("%c✓ "+name, css.info);
+}
diff --git a/bs/docs.js b/bs/docs.js
index 27b2822..76d6501 100755
--- a/bs/docs.js
+++ b/bs/docs.js
@@ -4,7 +4,7 @@ echo("Building static documentation files…");
 echo("Preparing…");
 import { path_target, pages as pages_registered, styles, dispatchEvent, t } from "../docs/ssr.js";
 import { createHTMl } from "./docs/jsdom.js";
-import { register } from "../jsdom.js";
+import { register, queue } from "../jsdom.js";
 const pkg= s.cat("package.json").xargs(JSON.parse);
 
 if(s.test("-d", path_target.root)){
@@ -14,6 +14,10 @@ if(s.test("-d", path_target.root)){
 	echo("Creating directory…");
 	s.mkdir("-p", path_target.root);
 }
+
+// Create assets directory in target
+echo("Creating assets directory…");
+s.mkdir("-p", path_target.root+"assets");
 echo("Collecting list of pages…");
 const pages= s.ls($.xdg.main`../docs/*.html.js`).map(addPage);
 for(const { id, info } of pages){
@@ -27,12 +31,20 @@ for(const { id, info } of pages){
 	serverDOM.document.body.append(
 		el(page, { pkg, info }),
 	);
+	await queue();
 
 	echo.use("-R", `Writing ${id}.html…`);
 	dispatchEvent("oneachrender", document);
 	s.echo(serverDOM.serialize()).to(path_target.root+id+".html");
 }
 s.echo(styles.content).to(path_target.css+styles.name);
+
+// Copy assets
+echo("Copying assets…");
+if(s.test("-d", "docs/assets")) {
+	s.cp("-r", "docs/assets/*", path_target.assets);
+}
+
 dispatchEvent("onssrend");
 echo("Done");
 
diff --git a/bs/docs/jsdom.js b/bs/docs/jsdom.js
index dfdaf23..dc46d1b 100644
--- a/bs/docs/jsdom.js
+++ b/bs/docs/jsdom.js
@@ -1,5 +1,5 @@
 import { JSDOM } from "jsdom";
-const html_default= "<!doctype html><html><head><meta charset=\"utf-8\"></head><body></body></html>";
+const html_default= "<!doctype html><html lang=\"en\"><head><meta charset=\"utf-8\"></head><body></body></html>";
 let keys= [];
 let dom= null;
 import { relative } from 'node:path';
diff --git a/dist/dde-with-signals.d.ts b/dist/dde-with-signals.d.ts
new file mode 100644
index 0000000..494e418
--- /dev/null
+++ b/dist/dde-with-signals.d.ts
@@ -0,0 +1,785 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export interface Signal<V, A> {
+	/** The current value of the signal */
+	get(): V;
+	/** Set new value of the signal */
+	set(value: V): V;
+	toJSON(): V;
+	valueOf(): V;
+}
+export type Action<V> = (this: {
+	value: V;
+	stopPropagation(): void;
+}, ...a: any[]) => typeof signal._ | void;
+//type SymbolSignal= Symbol;
+export type SymbolOnclear = symbol;
+export type Actions<V> = Record<string | SymbolOnclear, Action<V>>;
+export type OnListenerOptions = Pick<AddEventListenerOptions, "signal"> & {
+	first_time?: boolean;
+};
+export interface signal {
+	_: Symbol;
+	/**
+	 * Computations signal. This creates a signal which is computed from other signals.
+	 * */
+	<V extends () => any>(computation: V): Signal<ReturnType<V>, {}>;
+	/**
+	 * Simple example:
+	 * ```js
+	 * const hello= S("Hello Signal");
+	 * ```
+	 * …simple todo signal:
+	 * ```js
+	 * const todos= S([], {
+	 * 	add(v){ this.value.push(S(v)); },
+	 * 	remove(i){ this.value.splice(i, 1); },
+	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
+	 * });
+	 * ```
+	 * …computed signal:
+	 * ```js
+	 * const name= S("Jan");
+	 * const surname= S("Andrle");
+	 * const fullname= S(()=> name.get()+" "+surname.get());
+	 * ```
+	 * @param value Initial signal value. Or function computing value from other signals.
+	 * @param actions Use to define actions on the signal. Such as add item to the array.
+	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
+	 *		by `S.clear`.
+	 * */
+	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(signal: S, name: N, ...params: A[N] extends (...args: infer P) => any ? P : never): void;
+	clear(...signals: Signal<any, any>[]): void;
+	on<T>(signal: Signal<T, any>, onchange: (a: T) => void, options?: OnListenerOptions): void;
+	symbols: {
+		//signal: SymbolSignal;
+		onclear: SymbolOnclear;
+	};
+	/**
+	 * Reactive element, which is rendered based on the given signal.
+	 * ```js
+	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
+	 * S.el(listS, list=> list.map(li=> el("li", li)));
+	 * ```
+	 * */
+	el<S extends any>(signal: Signal<S, any>, el: (v: S) => Element | Element[] | DocumentFragment): DocumentFragment;
+	observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
+}
+export const signal: signal;
+export const S: signal;
+declare global {
+	type ddeSignal<T, A = {}> = Signal<T, A>;
+	type ddeAction<V> = Action<V>;
+	type ddeActions<V> = Actions<V>;
+}
+export type CustomElementTagNameMap = {
+	"#text": Text;
+	"#comment": Comment;
+};
+export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
+declare global {
+	type ddeComponentAttributes = Record<any, any> | undefined;
+	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any;
+	type ddeString = string | Signal<string, {}>;
+	type ddeStringable = ddeString | number | Signal<number, {}>;
+}
+export type PascalCase = `${Capitalize<string>}${string}`;
+export type AttrsModified = {
+	/**
+	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
+	 */
+	style: Partial<CSSStyleDeclaration> | ddeString | Partial<{
+		[K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], {}>;
+	}>;
+	/**
+	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
+	 * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
+	 * for others.
+	 */
+	classList: Record<string, -1 | 0 | 1 | boolean | Signal<-1 | 0 | 1 | boolean, {}>>;
+	/**
+	 * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
+	 * Values are converted to string (see {@link DOMStringMap}).
+	 *
+	 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
+	 * */
+	dataset: Record<string, ddeStringable>;
+	/**
+	 * Sets `aria-*` simiraly to `dataset`
+	 * */
+	ariaset: Record<string, ddeString>;
+} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString> & Record<`.${string}`, any>;
+export type _fromElsInterfaces<EL extends SupportedElement> = Omit<EL, keyof AttrsModified>;
+export type IsReadonly<T, K extends keyof T> = T extends {
+	readonly [P in K]: T[K];
+} ? true : false;
+/**
+ * Just element attributtes
+ *
+ * In most cases, you can use native propertie such as
+ * [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on
+ * (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
+ *
+ * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
+ * @private
+ */
+export type ElementAttributes<T extends SupportedElement> = Partial<{
+	[K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] extends ((...p: any[]) => any) ? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>) => Signal<ReturnType<_fromElsInterfaces<T>[K]>, {}>) : (IsReadonly<_fromElsInterfaces<T>, K> extends false ? _fromElsInterfaces<T>[K] | Signal<_fromElsInterfaces<T>[K], {}> : ddeStringable);
+} & AttrsModified> & Record<string, any>;
+export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El;
+export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El;
+export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT];
+export type ExtendedHTMLElementTagNameMap = HTMLElementTagNameMap & CustomElementTagNameMap;
+export namespace el {
+	/**
+	 * Creates a marker comment for elements
+	 *
+	 * @param attrs - Marker attributes
+	 * @param [is_open=false] - Whether the marker is open-ended
+	 * @returns Comment node marker
+	 */
+	export function mark(attrs: {
+		type: "component" | "reactive" | "later";
+		name?: string;
+		host?: "this" | "parentElement";
+	}, is_open?: boolean): Comment;
+}
+export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>, ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<A extends {
+	textContent: ddeStringable;
+}, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>["textContent"], ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(tag_name: TAG, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable, ...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[]): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement;
+export function el(tag_name?: "<>"): ddeDocumentFragment;
+export function el(tag_name: string, attrs?: ElementAttributes<HTMLElement> | ddeStringable, ...addons: ddeElementAddon<HTMLElement>[]): ddeHTMLElement;
+export function elNS(namespace: "http://www.w3.org/2000/svg"): <TAG extends keyof SVGElementTagNameMap & string, EL extends (TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement)>(tag_name: TAG, attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable, ...addons: ddeElementAddon<NoInfer<EL>>[]) => TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement;
+export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG extends keyof MathMLElementTagNameMap & string, EL extends (TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement)>(tag_name: TAG, attrs?: ddeStringable | Partial<{
+	[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
+}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
+export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
+export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
+/** Simulate slots for ddeComponents */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
+/**
+ * Simulate slots in Custom Elements without using `shadowRoot`.
+ * @param el Custom Element root element
+ * @param body Body of the custom element
+ * */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void;
+export interface On {
+	/** Listens to the DOM event. See {@link Document.addEventListener} */
+	<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
+	<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+		string,
+		string
+	]>) => any, options?: AddEventListenerOptions): EE;
+}
+export const on: On;
+export type Scope = {
+	scope: Node | Function | Object;
+	host: ddeElementAddon<any>;
+	custom_element: false | HTMLElement;
+	prevent: boolean;
+};
+/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
+export const scope: {
+	current: Scope;
+	/** Stops all automatizations. E. g. signals used as attributes in current scope
+	 * registers removing these listeners (and clean signal if no other listeners are detected)
+	 * on `disconnected` event. */
+	preventDefault<T extends boolean>(prevent: T): T;
+	/**
+	 * This represents reference to the current host element — `scope.host()`.
+	 * It can be also used to register Addon(s) (functions to be called when component is initized)
+	 * — `scope.host(on.connected(console.log))`.
+	 * */
+	host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement;
+	state: Scope[];
+	/** Adds new child scope. All attributes are inherited by default. */
+	push(scope?: Partial<Scope>): ReturnType<Array<Scope>["push"]>;
+	/** Adds root scope as a child of the current scope. */
+	pushRoot(): ReturnType<Array<Scope>["push"]>;
+	/** Removes last/current child scope. */
+	pop(): ReturnType<Array<Scope>["pop"]>;
+};
+export function customElementRender<EL extends HTMLElement, P extends any = Record<string, string | Signal<string, {}>>>(target: ShadowRoot | EL, render: (props: P) => SupportedElement | DocumentFragment, props?: P | ((el: EL) => P)): EL;
+export function customElementWithDDE<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function lifecyclesToEvents<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function observedAttributes(custom_element: HTMLElement): Record<string, string>;
+/**
+ * This is used primarly for server side rendering. To be sure that all async operations
+ * are finished before the page is sent to the client.
+ * ```
+ *	// on component
+ *	function component(){
+ *		…
+ *		queue(fetch(...).then(...));
+ *	}
+ *
+ * // building the page
+ * async function build(){
+ *		const { component }= await import("./component.js");
+ *		document.body.append(el(component));
+ *		await queue();
+ *		retutn document.body.innerHTML;
+ *	}
+ * ```
+ * */
+export function queue(promise?: Promise<unknown>): Promise<unknown>;
+/* TypeScript MEH */
+declare global {
+	type ddeAppend<el> = (...nodes: (Node | string)[]) => el;
+	interface ddeDocumentFragment extends DocumentFragment {
+		append: ddeAppend<ddeDocumentFragment>;
+	}
+	interface ddeHTMLElement extends HTMLElement {
+		append: ddeAppend<ddeHTMLElement>;
+	}
+	interface ddeSVGElement extends SVGElement {
+		append: ddeAppend<ddeSVGElement>;
+	}
+	interface ddeMathMLElement extends MathMLElement {
+		append: ddeAppend<ddeMathMLElement>;
+	}
+	interface ddeHTMLElementTagNameMap {
+		"a": ddeHTMLAnchorElement;
+		"area": ddeHTMLAreaElement;
+		"audio": ddeHTMLAudioElement;
+		"base": ddeHTMLBaseElement;
+		"blockquote": ddeHTMLQuoteElement;
+		"body": ddeHTMLBodyElement;
+		"br": ddeHTMLBRElement;
+		"button": ddeHTMLButtonElement;
+		"canvas": ddeHTMLCanvasElement;
+		"caption": ddeHTMLTableCaptionElement;
+		"col": ddeHTMLTableColElement;
+		"colgroup": ddeHTMLTableColElement;
+		"data": ddeHTMLDataElement;
+		"datalist": ddeHTMLDataListElement;
+		"del": ddeHTMLModElement;
+		"details": ddeHTMLDetailsElement;
+		"dialog": ddeHTMLDialogElement;
+		"div": ddeHTMLDivElement;
+		"dl": ddeHTMLDListElement;
+		"embed": ddeHTMLEmbedElement;
+		"fieldset": ddeHTMLFieldSetElement;
+		"form": ddeHTMLFormElement;
+		"h1": ddeHTMLHeadingElement;
+		"h2": ddeHTMLHeadingElement;
+		"h3": ddeHTMLHeadingElement;
+		"h4": ddeHTMLHeadingElement;
+		"h5": ddeHTMLHeadingElement;
+		"h6": ddeHTMLHeadingElement;
+		"head": ddeHTMLHeadElement;
+		"hr": ddeHTMLHRElement;
+		"html": ddeHTMLHtmlElement;
+		"iframe": ddeHTMLIFrameElement;
+		"img": ddeHTMLImageElement;
+		"input": ddeHTMLInputElement;
+		"ins": ddeHTMLModElement;
+		"label": ddeHTMLLabelElement;
+		"legend": ddeHTMLLegendElement;
+		"li": ddeHTMLLIElement;
+		"link": ddeHTMLLinkElement;
+		"map": ddeHTMLMapElement;
+		"menu": ddeHTMLMenuElement;
+		"meta": ddeHTMLMetaElement;
+		"meter": ddeHTMLMeterElement;
+		"object": ddeHTMLObjectElement;
+		"ol": ddeHTMLOListElement;
+		"optgroup": ddeHTMLOptGroupElement;
+		"option": ddeHTMLOptionElement;
+		"output": ddeHTMLOutputElement;
+		"p": ddeHTMLParagraphElement;
+		"picture": ddeHTMLPictureElement;
+		"pre": ddeHTMLPreElement;
+		"progress": ddeHTMLProgressElement;
+		"q": ddeHTMLQuoteElement;
+		"script": ddeHTMLScriptElement;
+		"select": ddeHTMLSelectElement;
+		"slot": ddeHTMLSlotElement;
+		"source": ddeHTMLSourceElement;
+		"span": ddeHTMLSpanElement;
+		"style": ddeHTMLStyleElement;
+		"table": ddeHTMLTableElement;
+		"tbody": ddeHTMLTableSectionElement;
+		"td": ddeHTMLTableCellElement;
+		"template": ddeHTMLTemplateElement;
+		"textarea": ddeHTMLTextAreaElement;
+		"tfoot": ddeHTMLTableSectionElement;
+		"th": ddeHTMLTableCellElement;
+		"thead": ddeHTMLTableSectionElement;
+		"time": ddeHTMLTimeElement;
+		"title": ddeHTMLTitleElement;
+		"tr": ddeHTMLTableRowElement;
+		"track": ddeHTMLTrackElement;
+		"ul": ddeHTMLUListElement;
+		"video": ddeHTMLVideoElement;
+	}
+	interface ddeSVGElementTagNameMap {
+		"a": ddeSVGAElement;
+		"animate": ddeSVGAnimateElement;
+		"animateMotion": ddeSVGAnimateMotionElement;
+		"animateTransform": ddeSVGAnimateTransformElement;
+		"circle": ddeSVGCircleElement;
+		"clipPath": ddeSVGClipPathElement;
+		"defs": ddeSVGDefsElement;
+		"desc": ddeSVGDescElement;
+		"ellipse": ddeSVGEllipseElement;
+		"feBlend": ddeSVGFEBlendElement;
+		"feColorMatrix": ddeSVGFEColorMatrixElement;
+		"feComponentTransfer": ddeSVGFEComponentTransferElement;
+		"feComposite": ddeSVGFECompositeElement;
+		"feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
+		"feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
+		"feDisplacementMap": ddeSVGFEDisplacementMapElement;
+		"feDistantLight": ddeSVGFEDistantLightElement;
+		"feDropShadow": ddeSVGFEDropShadowElement;
+		"feFlood": ddeSVGFEFloodElement;
+		"feFuncA": ddeSVGFEFuncAElement;
+		"feFuncB": ddeSVGFEFuncBElement;
+		"feFuncG": ddeSVGFEFuncGElement;
+		"feFuncR": ddeSVGFEFuncRElement;
+		"feGaussianBlur": ddeSVGFEGaussianBlurElement;
+		"feImage": ddeSVGFEImageElement;
+		"feMerge": ddeSVGFEMergeElement;
+		"feMergeNode": ddeSVGFEMergeNodeElement;
+		"feMorphology": ddeSVGFEMorphologyElement;
+		"feOffset": ddeSVGFEOffsetElement;
+		"fePointLight": ddeSVGFEPointLightElement;
+		"feSpecularLighting": ddeSVGFESpecularLightingElement;
+		"feSpotLight": ddeSVGFESpotLightElement;
+		"feTile": ddeSVGFETileElement;
+		"feTurbulence": ddeSVGFETurbulenceElement;
+		"filter": ddeSVGFilterElement;
+		"foreignObject": ddeSVGForeignObjectElement;
+		"g": ddeSVGGElement;
+		"image": ddeSVGImageElement;
+		"line": ddeSVGLineElement;
+		"linearGradient": ddeSVGLinearGradientElement;
+		"marker": ddeSVGMarkerElement;
+		"mask": ddeSVGMaskElement;
+		"metadata": ddeSVGMetadataElement;
+		"mpath": ddeSVGMPathElement;
+		"path": ddeSVGPathElement;
+		"pattern": ddeSVGPatternElement;
+		"polygon": ddeSVGPolygonElement;
+		"polyline": ddeSVGPolylineElement;
+		"radialGradient": ddeSVGRadialGradientElement;
+		"rect": ddeSVGRectElement;
+		"script": ddeSVGScriptElement;
+		"set": ddeSVGSetElement;
+		"stop": ddeSVGStopElement;
+		"style": ddeSVGStyleElement;
+		"svg": ddeSVGSVGElement;
+		"switch": ddeSVGSwitchElement;
+		"symbol": ddeSVGSymbolElement;
+		"text": ddeSVGTextElement;
+		"textPath": ddeSVGTextPathElement;
+		"title": ddeSVGTitleElement;
+		"tspan": ddeSVGTSpanElement;
+		"use": ddeSVGUseElement;
+		"view": ddeSVGViewElement;
+	}
+}
+// editorconfig-checker-disable
+export interface ddeHTMLAnchorElement extends HTMLAnchorElement {
+	append: ddeAppend<ddeHTMLAnchorElement>;
+}
+export interface ddeHTMLAreaElement extends HTMLAreaElement {
+	append: ddeAppend<ddeHTMLAreaElement>;
+}
+export interface ddeHTMLAudioElement extends HTMLAudioElement {
+	append: ddeAppend<ddeHTMLAudioElement>;
+}
+export interface ddeHTMLBaseElement extends HTMLBaseElement {
+	append: ddeAppend<ddeHTMLBaseElement>;
+}
+export interface ddeHTMLQuoteElement extends HTMLQuoteElement {
+	append: ddeAppend<ddeHTMLQuoteElement>;
+}
+export interface ddeHTMLBodyElement extends HTMLBodyElement {
+	append: ddeAppend<ddeHTMLBodyElement>;
+}
+export interface ddeHTMLBRElement extends HTMLBRElement {
+	append: ddeAppend<ddeHTMLBRElement>;
+}
+export interface ddeHTMLButtonElement extends HTMLButtonElement {
+	append: ddeAppend<ddeHTMLButtonElement>;
+}
+export interface ddeHTMLCanvasElement extends HTMLCanvasElement {
+	append: ddeAppend<ddeHTMLCanvasElement>;
+}
+export interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement {
+	append: ddeAppend<ddeHTMLTableCaptionElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLDataElement extends HTMLDataElement {
+	append: ddeAppend<ddeHTMLDataElement>;
+}
+export interface ddeHTMLDataListElement extends HTMLDataListElement {
+	append: ddeAppend<ddeHTMLDataListElement>;
+}
+export interface ddeHTMLModElement extends HTMLModElement {
+	append: ddeAppend<ddeHTMLModElement>;
+}
+export interface ddeHTMLDetailsElement extends HTMLDetailsElement {
+	append: ddeAppend<ddeHTMLDetailsElement>;
+}
+export interface ddeHTMLDialogElement extends HTMLDialogElement {
+	append: ddeAppend<ddeHTMLDialogElement>;
+}
+export interface ddeHTMLDivElement extends HTMLDivElement {
+	append: ddeAppend<ddeHTMLDivElement>;
+}
+export interface ddeHTMLDListElement extends HTMLDListElement {
+	append: ddeAppend<ddeHTMLDListElement>;
+}
+export interface ddeHTMLEmbedElement extends HTMLEmbedElement {
+	append: ddeAppend<ddeHTMLEmbedElement>;
+}
+export interface ddeHTMLFieldSetElement extends HTMLFieldSetElement {
+	append: ddeAppend<ddeHTMLFieldSetElement>;
+}
+export interface ddeHTMLFormElement extends HTMLFormElement {
+	append: ddeAppend<ddeHTMLFormElement>;
+}
+export interface ddeHTMLHeadingElement extends HTMLHeadingElement {
+	append: ddeAppend<ddeHTMLHeadingElement>;
+}
+export interface ddeHTMLHeadElement extends HTMLHeadElement {
+	append: ddeAppend<ddeHTMLHeadElement>;
+}
+export interface ddeHTMLHRElement extends HTMLHRElement {
+	append: ddeAppend<ddeHTMLHRElement>;
+}
+export interface ddeHTMLHtmlElement extends HTMLHtmlElement {
+	append: ddeAppend<ddeHTMLHtmlElement>;
+}
+export interface ddeHTMLIFrameElement extends HTMLIFrameElement {
+	append: ddeAppend<ddeHTMLIFrameElement>;
+}
+export interface ddeHTMLImageElement extends HTMLImageElement {
+	append: ddeAppend<ddeHTMLImageElement>;
+}
+export interface ddeHTMLInputElement extends HTMLInputElement {
+	append: ddeAppend<ddeHTMLInputElement>;
+}
+export interface ddeHTMLLabelElement extends HTMLLabelElement {
+	append: ddeAppend<ddeHTMLLabelElement>;
+}
+export interface ddeHTMLLegendElement extends HTMLLegendElement {
+	append: ddeAppend<ddeHTMLLegendElement>;
+}
+export interface ddeHTMLLIElement extends HTMLLIElement {
+	append: ddeAppend<ddeHTMLLIElement>;
+}
+export interface ddeHTMLLinkElement extends HTMLLinkElement {
+	append: ddeAppend<ddeHTMLLinkElement>;
+}
+export interface ddeHTMLMapElement extends HTMLMapElement {
+	append: ddeAppend<ddeHTMLMapElement>;
+}
+export interface ddeHTMLMenuElement extends HTMLMenuElement {
+	append: ddeAppend<ddeHTMLMenuElement>;
+}
+export interface ddeHTMLMetaElement extends HTMLMetaElement {
+	append: ddeAppend<ddeHTMLMetaElement>;
+}
+export interface ddeHTMLMeterElement extends HTMLMeterElement {
+	append: ddeAppend<ddeHTMLMeterElement>;
+}
+export interface ddeHTMLObjectElement extends HTMLObjectElement {
+	append: ddeAppend<ddeHTMLObjectElement>;
+}
+export interface ddeHTMLOListElement extends HTMLOListElement {
+	append: ddeAppend<ddeHTMLOListElement>;
+}
+export interface ddeHTMLOptGroupElement extends HTMLOptGroupElement {
+	append: ddeAppend<ddeHTMLOptGroupElement>;
+}
+export interface ddeHTMLOptionElement extends HTMLOptionElement {
+	append: ddeAppend<ddeHTMLOptionElement>;
+}
+export interface ddeHTMLOutputElement extends HTMLOutputElement {
+	append: ddeAppend<ddeHTMLOutputElement>;
+}
+export interface ddeHTMLParagraphElement extends HTMLParagraphElement {
+	append: ddeAppend<ddeHTMLParagraphElement>;
+}
+export interface ddeHTMLPictureElement extends HTMLPictureElement {
+	append: ddeAppend<ddeHTMLPictureElement>;
+}
+export interface ddeHTMLPreElement extends HTMLPreElement {
+	append: ddeAppend<ddeHTMLPreElement>;
+}
+export interface ddeHTMLProgressElement extends HTMLProgressElement {
+	append: ddeAppend<ddeHTMLProgressElement>;
+}
+export interface ddeHTMLScriptElement extends HTMLScriptElement {
+	append: ddeAppend<ddeHTMLScriptElement>;
+}
+export interface ddeHTMLSelectElement extends HTMLSelectElement {
+	append: ddeAppend<ddeHTMLSelectElement>;
+}
+export interface ddeHTMLSlotElement extends HTMLSlotElement {
+	append: ddeAppend<ddeHTMLSlotElement>;
+}
+export interface ddeHTMLSourceElement extends HTMLSourceElement {
+	append: ddeAppend<ddeHTMLSourceElement>;
+}
+export interface ddeHTMLSpanElement extends HTMLSpanElement {
+	append: ddeAppend<ddeHTMLSpanElement>;
+}
+export interface ddeHTMLStyleElement extends HTMLStyleElement {
+	append: ddeAppend<ddeHTMLStyleElement>;
+}
+export interface ddeHTMLTableElement extends HTMLTableElement {
+	append: ddeAppend<ddeHTMLTableElement>;
+}
+export interface ddeHTMLTableSectionElement extends HTMLTableSectionElement {
+	append: ddeAppend<ddeHTMLTableSectionElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTemplateElement extends HTMLTemplateElement {
+	append: ddeAppend<ddeHTMLTemplateElement>;
+}
+export interface ddeHTMLTextAreaElement extends HTMLTextAreaElement {
+	append: ddeAppend<ddeHTMLTextAreaElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTimeElement extends HTMLTimeElement {
+	append: ddeAppend<ddeHTMLTimeElement>;
+}
+export interface ddeHTMLTitleElement extends HTMLTitleElement {
+	append: ddeAppend<ddeHTMLTitleElement>;
+}
+export interface ddeHTMLTableRowElement extends HTMLTableRowElement {
+	append: ddeAppend<ddeHTMLTableRowElement>;
+}
+export interface ddeHTMLTrackElement extends HTMLTrackElement {
+	append: ddeAppend<ddeHTMLTrackElement>;
+}
+export interface ddeHTMLUListElement extends HTMLUListElement {
+	append: ddeAppend<ddeHTMLUListElement>;
+}
+export interface ddeHTMLVideoElement extends HTMLVideoElement {
+	append: ddeAppend<ddeHTMLVideoElement>;
+}
+export interface ddeSVGAElement extends SVGAElement {
+	append: ddeAppend<ddeSVGAElement>;
+}
+export interface ddeSVGAnimateElement extends SVGAnimateElement {
+	append: ddeAppend<ddeSVGAnimateElement>;
+}
+export interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement {
+	append: ddeAppend<ddeSVGAnimateMotionElement>;
+}
+export interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement {
+	append: ddeAppend<ddeSVGAnimateTransformElement>;
+}
+export interface ddeSVGCircleElement extends SVGCircleElement {
+	append: ddeAppend<ddeSVGCircleElement>;
+}
+export interface ddeSVGClipPathElement extends SVGClipPathElement {
+	append: ddeAppend<ddeSVGClipPathElement>;
+}
+export interface ddeSVGDefsElement extends SVGDefsElement {
+	append: ddeAppend<ddeSVGDefsElement>;
+}
+export interface ddeSVGDescElement extends SVGDescElement {
+	append: ddeAppend<ddeSVGDescElement>;
+}
+export interface ddeSVGEllipseElement extends SVGEllipseElement {
+	append: ddeAppend<ddeSVGEllipseElement>;
+}
+export interface ddeSVGFEBlendElement extends SVGFEBlendElement {
+	append: ddeAppend<ddeSVGFEBlendElement>;
+}
+export interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement {
+	append: ddeAppend<ddeSVGFEColorMatrixElement>;
+}
+export interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement {
+	append: ddeAppend<ddeSVGFEComponentTransferElement>;
+}
+export interface ddeSVGFECompositeElement extends SVGFECompositeElement {
+	append: ddeAppend<ddeSVGFECompositeElement>;
+}
+export interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement {
+	append: ddeAppend<ddeSVGFEConvolveMatrixElement>;
+}
+export interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement {
+	append: ddeAppend<ddeSVGFEDiffuseLightingElement>;
+}
+export interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement {
+	append: ddeAppend<ddeSVGFEDisplacementMapElement>;
+}
+export interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement {
+	append: ddeAppend<ddeSVGFEDistantLightElement>;
+}
+export interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement {
+	append: ddeAppend<ddeSVGFEDropShadowElement>;
+}
+export interface ddeSVGFEFloodElement extends SVGFEFloodElement {
+	append: ddeAppend<ddeSVGFEFloodElement>;
+}
+export interface ddeSVGFEFuncAElement extends SVGFEFuncAElement {
+	append: ddeAppend<ddeSVGFEFuncAElement>;
+}
+export interface ddeSVGFEFuncBElement extends SVGFEFuncBElement {
+	append: ddeAppend<ddeSVGFEFuncBElement>;
+}
+export interface ddeSVGFEFuncGElement extends SVGFEFuncGElement {
+	append: ddeAppend<ddeSVGFEFuncGElement>;
+}
+export interface ddeSVGFEFuncRElement extends SVGFEFuncRElement {
+	append: ddeAppend<ddeSVGFEFuncRElement>;
+}
+export interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement {
+	append: ddeAppend<ddeSVGFEGaussianBlurElement>;
+}
+export interface ddeSVGFEImageElement extends SVGFEImageElement {
+	append: ddeAppend<ddeSVGFEImageElement>;
+}
+export interface ddeSVGFEMergeElement extends SVGFEMergeElement {
+	append: ddeAppend<ddeSVGFEMergeElement>;
+}
+export interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement {
+	append: ddeAppend<ddeSVGFEMergeNodeElement>;
+}
+export interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement {
+	append: ddeAppend<ddeSVGFEMorphologyElement>;
+}
+export interface ddeSVGFEOffsetElement extends SVGFEOffsetElement {
+	append: ddeAppend<ddeSVGFEOffsetElement>;
+}
+export interface ddeSVGFEPointLightElement extends SVGFEPointLightElement {
+	append: ddeAppend<ddeSVGFEPointLightElement>;
+}
+export interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement {
+	append: ddeAppend<ddeSVGFESpecularLightingElement>;
+}
+export interface ddeSVGFESpotLightElement extends SVGFESpotLightElement {
+	append: ddeAppend<ddeSVGFESpotLightElement>;
+}
+export interface ddeSVGFETileElement extends SVGFETileElement {
+	append: ddeAppend<ddeSVGFETileElement>;
+}
+export interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement {
+	append: ddeAppend<ddeSVGFETurbulenceElement>;
+}
+export interface ddeSVGFilterElement extends SVGFilterElement {
+	append: ddeAppend<ddeSVGFilterElement>;
+}
+export interface ddeSVGForeignObjectElement extends SVGForeignObjectElement {
+	append: ddeAppend<ddeSVGForeignObjectElement>;
+}
+export interface ddeSVGGElement extends SVGGElement {
+	append: ddeAppend<ddeSVGGElement>;
+}
+export interface ddeSVGImageElement extends SVGImageElement {
+	append: ddeAppend<ddeSVGImageElement>;
+}
+export interface ddeSVGLineElement extends SVGLineElement {
+	append: ddeAppend<ddeSVGLineElement>;
+}
+export interface ddeSVGLinearGradientElement extends SVGLinearGradientElement {
+	append: ddeAppend<ddeSVGLinearGradientElement>;
+}
+export interface ddeSVGMarkerElement extends SVGMarkerElement {
+	append: ddeAppend<ddeSVGMarkerElement>;
+}
+export interface ddeSVGMaskElement extends SVGMaskElement {
+	append: ddeAppend<ddeSVGMaskElement>;
+}
+export interface ddeSVGMetadataElement extends SVGMetadataElement {
+	append: ddeAppend<ddeSVGMetadataElement>;
+}
+export interface ddeSVGMPathElement extends SVGMPathElement {
+	append: ddeAppend<ddeSVGMPathElement>;
+}
+export interface ddeSVGPathElement extends SVGPathElement {
+	append: ddeAppend<ddeSVGPathElement>;
+}
+export interface ddeSVGPatternElement extends SVGPatternElement {
+	append: ddeAppend<ddeSVGPatternElement>;
+}
+export interface ddeSVGPolygonElement extends SVGPolygonElement {
+	append: ddeAppend<ddeSVGPolygonElement>;
+}
+export interface ddeSVGPolylineElement extends SVGPolylineElement {
+	append: ddeAppend<ddeSVGPolylineElement>;
+}
+export interface ddeSVGRadialGradientElement extends SVGRadialGradientElement {
+	append: ddeAppend<ddeSVGRadialGradientElement>;
+}
+export interface ddeSVGRectElement extends SVGRectElement {
+	append: ddeAppend<ddeSVGRectElement>;
+}
+export interface ddeSVGScriptElement extends SVGScriptElement {
+	append: ddeAppend<ddeSVGScriptElement>;
+}
+export interface ddeSVGSetElement extends SVGSetElement {
+	append: ddeAppend<ddeSVGSetElement>;
+}
+export interface ddeSVGStopElement extends SVGStopElement {
+	append: ddeAppend<ddeSVGStopElement>;
+}
+export interface ddeSVGStyleElement extends SVGStyleElement {
+	append: ddeAppend<ddeSVGStyleElement>;
+}
+export interface ddeSVGSVGElement extends SVGSVGElement {
+	append: ddeAppend<ddeSVGSVGElement>;
+}
+export interface ddeSVGSwitchElement extends SVGSwitchElement {
+	append: ddeAppend<ddeSVGSwitchElement>;
+}
+export interface ddeSVGSymbolElement extends SVGSymbolElement {
+	append: ddeAppend<ddeSVGSymbolElement>;
+}
+export interface ddeSVGTextElement extends SVGTextElement {
+	append: ddeAppend<ddeSVGTextElement>;
+}
+export interface ddeSVGTextPathElement extends SVGTextPathElement {
+	append: ddeAppend<ddeSVGTextPathElement>;
+}
+export interface ddeSVGTitleElement extends SVGTitleElement {
+	append: ddeAppend<ddeSVGTitleElement>;
+}
+export interface ddeSVGTSpanElement extends SVGTSpanElement {
+	append: ddeAppend<ddeSVGTSpanElement>;
+}
+export interface ddeSVGUseElement extends SVGUseElement {
+	append: ddeAppend<ddeSVGUseElement>;
+}
+export interface ddeSVGViewElement extends SVGViewElement {
+	append: ddeAppend<ddeSVGViewElement>;
+}
+
+export {
+	dispatchEvent$1 as dispatchEvent,
+	el as createElement,
+	elNS as createElementNS,
+};
+
+export as namespace dde;
+
+export {};
diff --git a/dist/dde-with-signals.js b/dist/dde-with-signals.js
index f18a40d..dad581e 100644
--- a/dist/dde-with-signals.js
+++ b/dist/dde-with-signals.js
@@ -1,670 +1,1031 @@
-//deka-dom-el library is available via global namespace `dde`
-(()=> {
-// src/signals-common.js
-var T = {
-	isSignal(t) {
-		return !1;
-	},
-	processReactiveAttribute(t, e, r, n) {
-		return r;
-	}
-};
-function H(t, e = !0) {
-	return e ? Object.assign(T, t) : (Object.setPrototypeOf(t, T), t);
-}
-function j(t) {
-	return T.isPrototypeOf(t) && t !== T ? t : T;
-}
-
-// src/helpers.js
-var I = (...t) => Object.prototype.hasOwnProperty.call(...t);
-function S(t) {
-	return typeof t > "u";
-}
-function X(t) {
-	let e = typeof t;
-	return e !== "object" ? e : t === null ? "null" : Object.prototype.toString.call(t);
-}
-function P(t, e) {
-	if (!t || !(t instanceof AbortSignal))
-		return !0;
-	if (!t.aborted)
-		return t.addEventListener("abort", e), function() {
-			t.removeEventListener("abort", e);
-		};
-}
-function W(t, e) {
-	let { observedAttributes: r = [] } = t.constructor;
-	return r.reduce(function(n, o) {
-		return n[dt(o)] = e(t, o), n;
-	}, {});
-}
-function dt(t) {
-	return t.replace(/-./g, (e) => e[1].toUpperCase());
-}
-
-// src/dom-common.js
-var d = {
-	setDeleteAttr: pt,
-	ssr: "",
-	D: globalThis.document,
-	F: globalThis.DocumentFragment,
-	H: globalThis.HTMLElement,
-	S: globalThis.SVGElement,
-	M: globalThis.MutationObserver,
-	q: (t) => t || Promise.resolve()
-};
-function pt(t, e, r) {
-	if (Reflect.set(t, e, r), !!S(r)) {
-		if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined")
-			return t.removeAttribute(e);
-		if (Reflect.get(t, e) === "undefined")
-			return Reflect.set(t, e, "");
-	}
-}
-var O = "__dde_lifecyclesToEvents", w = "dde:connected", y = "dde:disconnected", k = "dde:attributeChanged";
-
-// src/dom.js
-function Mt(t) {
-	return d.q(t);
-}
-var A = [{
-	get scope() {
-		return d.D.body;
-	},
-	host: (t) => t ? t(d.D.body) : d.D.body,
-	prevent: !0
-}], x = {
-	get current() {
-		return A[A.length - 1];
-	},
-	get host() {
-		return this.current.host;
-	},
-	preventDefault() {
-		let { current: t } = this;
-		return t.prevent = !0, t;
-	},
-	get state() {
-		return [...A];
-	},
-	push(t = {}) {
-		return A.push(Object.assign({}, this.current, { prevent: !1 }, t));
-	},
-	pushRoot() {
-		return A.push(A[0]);
-	},
-	pop() {
-		if (A.length !== 1)
-			return A.pop();
-	}
-};
-function Y(...t) {
-	return this.appendOriginal(...t), this;
-}
-function lt(t) {
-	return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;
-}
-var $;
-function M(t, e, ...r) {
-	let n = j(this), o = 0, c, u;
-	switch ((Object(e) !== e || n.isSignal(e)) && (e = { textContent: e }), !0) {
-		case typeof t == "function": {
-			o = 1;
-			let i = (...h) => h.length ? (o === 1 ? r.unshift(...h) : h.forEach((E) => E(u)), void 0) : u;
-			x.push({ scope: t, host: i }), c = t(e || void 0);
-			let p = c instanceof d.F;
-			if (c.nodeName === "#comment") break;
-			let v = M.mark({
-				type: "component",
-				name: t.name,
-				host: p ? "this" : "parentElement"
-			});
-			c.prepend(v), p && (u = v);
-			break;
-		}
-		case t === "#text":
-			c = q.call(this, d.D.createTextNode(""), e);
-			break;
-		case (t === "<>" || !t):
-			c = q.call(this, d.D.createDocumentFragment(), e);
-			break;
-		case !!$:
-			c = q.call(this, d.D.createElementNS($, t), e);
-			break;
-		case !c:
-			c = q.call(this, d.D.createElement(t), e);
-	}
-	return lt(c), u || (u = c), r.forEach((i) => i(u)), o && x.pop(), o = 2, c;
-}
-M.mark = function(t, e = !1) {
-	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
-	let r = e ? "" : "/", n = d.D.createComment(`<dde:mark ${t}${d.ssr}${r}>`);
-	return e && (n.end = d.D.createComment("</dde:mark>")), n;
-};
-function jt(t) {
-	let e = this;
-	return function(...n) {
-		$ = t;
-		let o = M.call(e, ...n);
-		return $ = void 0, o;
+var dde = (() => {
+	var __defProp = Object.defineProperty;
+	var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+	var __getOwnPropNames = Object.getOwnPropertyNames;
+	var __hasOwnProp = Object.prototype.hasOwnProperty;
+	var __export = (target, all) => {
+		for (var name in all)
+			__defProp(target, name, { get: all[name], enumerable: true });
 	};
-}
-function Pt(t, e = t) {
-	let r = "\xB9\u2070", n = "\u2713", o = Object.fromEntries(
-		Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(r)).map((c) => [c.name += r, c])
-	);
-	if (t.append = new Proxy(t.append, {
-		apply(c, u, i) {
-			if (i[0] === e) return c.apply(t, i);
-			for (let p of i) {
-				let v = (p.slot || "") + r;
-				try {
-					bt(p, "remove", "slot");
-				} catch {
-				}
-				let h = o[v];
-				if (!h) return;
-				h.name.startsWith(n) || (h.childNodes.forEach((E) => E.remove()), h.name = n + v), h.append(p);
-			}
-			return t.append = c, t;
+	var __copyProps = (to, from, except, desc) => {
+		if (from && typeof from === "object" || typeof from === "function") {
+			for (let key of __getOwnPropNames(from))
+				if (!__hasOwnProp.call(to, key) && key !== except)
+					__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
 		}
-	}), t !== e) {
-		let c = Array.from(t.childNodes);
-		t.append(...c);
-	}
-	return e;
-}
-var F = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;
-function q(t, ...e) {
-	if (!e.length) return t;
-	F.set(t, rt(t, this));
-	for (let [r, n] of Object.entries(Object.assign({}, ...e)))
-		nt.call(this, t, r, n);
-	return F.delete(t), t;
-}
-function nt(t, e, r) {
-	let { setRemoveAttr: n, s: o } = rt(t, this), c = this;
-	r = o.processReactiveAttribute(
-		t,
-		e,
-		r,
-		(i, p) => nt.call(c, t, i, p)
-	);
-	let [u] = e;
-	if (u === "=") return n(e.slice(1), r);
-	if (u === ".") return et(t, e.slice(1), r);
-	if (/(aria|data)([A-Z])/.test(e))
-		return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), n(e, r);
-	switch (e === "className" && (e = "class"), e) {
-		case "xlink:href":
-			return n(e, r, "http://www.w3.org/1999/xlink");
-		case "textContent":
-			return tt(t, e, r);
-		case "style":
-			if (typeof r != "object") break;
-		/* falls through */
-		case "dataset":
-			return B(o, e, t, r, et.bind(null, t[e]));
-		case "ariaset":
-			return B(o, e, t, r, (i, p) => n("aria-" + i, p));
-		case "classList":
-			return ht.call(c, t, r);
-	}
-	return gt(t, e) ? tt(t, e, r) : n(e, r);
-}
-function rt(t, e) {
-	if (F.has(t)) return F.get(t);
-	let n = (t instanceof d.S ? mt : vt).bind(null, t, "Attribute"), o = j(e);
-	return { setRemoveAttr: n, s: o };
-}
-function ht(t, e) {
-	let r = j(this);
-	return B(
-		r,
-		"classList",
-		t,
-		e,
-		(n, o) => t.classList.toggle(n, o === -1 ? void 0 : !!o)
-	), t;
-}
-function bt(t, e, r, n) {
-	return t instanceof d.H ? t[e + "Attribute"](r, n) : t[e + "AttributeNS"](null, r, n);
-}
-function gt(t, e) {
-	if (!(e in t)) return !1;
-	let r = ot(t, e);
-	return !S(r.set);
-}
-function ot(t, e) {
-	if (t = Object.getPrototypeOf(t), !t) return {};
-	let r = Object.getOwnPropertyDescriptor(t, e);
-	return r || ot(t, e);
-}
-function B(t, e, r, n, o) {
-	let c = String;
-	if (!(typeof n != "object" || n === null))
-		return Object.entries(n).forEach(function([i, p]) {
-			i && (i = new c(i), i.target = e, p = t.processReactiveAttribute(r, i, p, o), o(i, p));
-		});
-}
-function vt(t, e, r, n) {
-	return t[(S(n) ? "remove" : "set") + e](r, n);
-}
-function mt(t, e, r, n, o = null) {
-	return t[(S(n) ? "remove" : "set") + e + "NS"](o, r, n);
-}
-function et(t, e, r) {
-	if (Reflect.set(t, e, r), !!S(r))
-		return Reflect.deleteProperty(t, e);
-}
+		return to;
+	};
+	var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/events-observer.js
-var C = d.M ? Et() : new Proxy({}, {
-	get() {
-		return () => {
+	// index-with-signals.js
+	var index_with_signals_exports = {};
+	__export(index_with_signals_exports, {
+		S: () => signal,
+		assign: () => assign,
+		assignAttribute: () => assignAttribute,
+		chainableAppend: () => chainableAppend,
+		classListDeclarative: () => classListDeclarative,
+		createElement: () => createElement,
+		createElementNS: () => createElementNS,
+		customElementRender: () => customElementRender,
+		customElementWithDDE: () => lifecyclesToEvents,
+		dispatchEvent: () => dispatchEvent,
+		el: () => createElement,
+		elNS: () => createElementNS,
+		elementAttribute: () => elementAttribute,
+		isSignal: () => isSignal,
+		lifecyclesToEvents: () => lifecyclesToEvents,
+		observedAttributes: () => observedAttributes2,
+		on: () => on,
+		queue: () => queue,
+		registerReactivity: () => registerReactivity,
+		scope: () => scope,
+		signal: () => signal,
+		simulateSlots: () => simulateSlots
+	});
+
+	// src/helpers.js
+	var hasOwn = (...a) => Object.prototype.hasOwnProperty.call(...a);
+	function isUndef(value) {
+		return typeof value === "undefined";
+	}
+	function typeOf(v) {
+		const t = typeof v;
+		if (t !== "object") return t;
+		if (v === null) return "null";
+		return Object.prototype.toString.call(v);
+	}
+	function isInstance(obj, cls) {
+		return obj instanceof cls;
+	}
+	function isProtoFrom(obj, cls) {
+		return Object.prototype.isPrototypeOf.call(cls, obj);
+	}
+	function oCreate(proto = null, p = {}) {
+		return Object.create(proto, p);
+	}
+	function oAssign(...o) {
+		return Object.assign(...o);
+	}
+	function onAbort(signal2, listener) {
+		if (!signal2 || !isInstance(signal2, AbortSignal))
+			return true;
+		if (signal2.aborted)
+			return;
+		signal2.addEventListener("abort", listener);
+		return function cleanUp() {
+			signal2.removeEventListener("abort", listener);
 		};
 	}
-});
-function Et() {
-	let t = /* @__PURE__ */ new Map(), e = !1, r = (s) => function(f) {
-		for (let a of f)
-			if (a.type === "childList") {
-				if (h(a.addedNodes, !0)) {
-					s();
+	function observedAttributes(instance, observedAttribute2) {
+		const { observedAttributes: observedAttributes3 = [] } = instance.constructor;
+		return observedAttributes3.reduce(function(out, name) {
+			out[kebabToCamel(name)] = observedAttribute2(instance, name);
+			return out;
+		}, {});
+	}
+	function kebabToCamel(name) {
+		return name.replace(/-./g, (x) => x[1].toUpperCase());
+	}
+	var Defined = class extends Error {
+		constructor() {
+			super();
+			const [curr, ...rest] = this.stack.split("\n");
+			const curr_file = curr.slice(curr.indexOf("@"), curr.indexOf(".js:") + 4);
+			const curr_lib = curr_file.includes("src/helpers.js") ? "src/" : curr_file;
+			this.stack = rest.find((l) => !l.includes(curr_lib)) || curr;
+		}
+		get compact() {
+			const { stack } = this;
+			return stack.slice(0, stack.indexOf("@") + 1) + "\u2026" + stack.slice(stack.lastIndexOf("/"));
+		}
+	};
+
+	// src/signals-lib/common.js
+	var signals_global = {
+		/**
+		* Checks if a value is a signal
+		* @param {any} attributes - Value to check
+		* @returns {boolean} Whether the value is a signal
+		*/
+		isSignal(attributes) {
+			return false;
+		},
+		/**
+		* Processes an attribute that might be reactive
+		* @param {Element} obj - Element that owns the attribute
+		* @param {string} key - Attribute name
+		* @param {any} attr - Attribute value
+		* @param {Function} set - Function to set the attribute
+		* @returns {any} Processed attribute value
+		*/
+		processReactiveAttribute(obj, key, attr, set) {
+			return attr;
+		}
+	};
+	function registerReactivity(def, global = true) {
+		if (global) return oAssign(signals_global, def);
+		Object.setPrototypeOf(def, signals_global);
+		return def;
+	}
+	function signals(_this) {
+		return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
+	}
+
+	// src/dom-common.js
+	var enviroment = {
+		setDeleteAttr,
+		ssr: "",
+		D: globalThis.document,
+		F: globalThis.DocumentFragment,
+		H: globalThis.HTMLElement,
+		S: globalThis.SVGElement,
+		M: globalThis.MutationObserver,
+		q: (p) => p || Promise.resolve()
+	};
+	function setDeleteAttr(obj, prop, val) {
+		Reflect.set(obj, prop, val);
+		if (!isUndef(val)) return;
+		Reflect.deleteProperty(obj, prop);
+		if (isInstance(obj, enviroment.H) && obj.getAttribute(prop) === "undefined")
+			return obj.removeAttribute(prop);
+		if (Reflect.get(obj, prop) === "undefined")
+			return Reflect.set(obj, prop, "");
+	}
+	var keyLTE = "__dde_lifecyclesToEvents";
+	var evc = "dde:connected";
+	var evd = "dde:disconnected";
+	var eva = "dde:attributeChanged";
+
+	// src/dom.js
+	function queue(promise) {
+		return enviroment.q(promise);
+	}
+	var scopes = [{
+		get scope() {
+			return enviroment.D.body;
+		},
+		host: (c) => c ? c(enviroment.D.body) : enviroment.D.body,
+		prevent: true
+	}];
+	var scope = {
+		/**
+		* Gets the current scope
+		* @returns {Object} Current scope context
+		*/
+		get current() {
+			return scopes[scopes.length - 1];
+		},
+		/**
+		* Gets the host element of the current scope
+		* @returns {Function} Host accessor function
+		*/
+		get host() {
+			return this.current.host;
+		},
+		/**
+		* Prevents default behavior in the current scope
+		* @returns {Object} Current scope context
+		*/
+		preventDefault() {
+			const { current } = this;
+			current.prevent = true;
+			return current;
+		},
+		/**
+		* Gets a copy of the current scope stack
+		* @returns {Array} Copy of scope stack
+		*/
+		get state() {
+			return [...scopes];
+		},
+		/**
+		* Pushes a new scope to the stack
+		* @param {Object} [s={}] - Scope object to push
+		* @returns {number} New length of the scope stack
+		*/
+		push(s = {}) {
+			return scopes.push(oAssign({}, this.current, { prevent: false }, s));
+		},
+		/**
+		* Pushes the root scope to the stack
+		* @returns {number} New length of the scope stack
+		*/
+		pushRoot() {
+			return scopes.push(scopes[0]);
+		},
+		/**
+		* Pops the current scope from the stack
+		* @returns {Object|undefined} Popped scope or undefined if only one scope remains
+		*/
+		pop() {
+			if (scopes.length === 1) return;
+			return scopes.pop();
+		}
+	};
+	function append(...els) {
+		this.appendOriginal(...els);
+		return this;
+	}
+	function chainableAppend(el) {
+		if (el.append === append) return el;
+		el.appendOriginal = el.append;
+		el.append = append;
+		return el;
+	}
+	var namespace;
+	function createElement(tag, attributes, ...addons) {
+		const s = signals(this);
+		let scoped = 0;
+		let el, el_host;
+		if (Object(attributes) !== attributes || s.isSignal(attributes))
+			attributes = { textContent: attributes };
+		switch (true) {
+			case typeof tag === "function": {
+				scoped = 1;
+				const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0);
+				scope.push({ scope: tag, host });
+				el = tag(attributes || void 0);
+				const is_fragment = isInstance(el, enviroment.F);
+				if (el.nodeName === "#comment") break;
+				const el_mark = createElement.mark({
+					type: "component",
+					name: tag.name,
+					host: is_fragment ? "this" : "parentElement"
+				});
+				el.prepend(el_mark);
+				if (is_fragment) el_host = el_mark;
+				break;
+			}
+			case tag === "#text":
+				el = assign.call(this, enviroment.D.createTextNode(""), attributes);
+				break;
+			case (tag === "<>" || !tag):
+				el = assign.call(this, enviroment.D.createDocumentFragment(), attributes);
+				break;
+			case Boolean(namespace):
+				el = assign.call(this, enviroment.D.createElementNS(namespace, tag), attributes);
+				break;
+			case !el:
+				el = assign.call(this, enviroment.D.createElement(tag), attributes);
+		}
+		chainableAppend(el);
+		if (!el_host) el_host = el;
+		addons.forEach((c) => c(el_host));
+		if (scoped) scope.pop();
+		scoped = 2;
+		return el;
+	}
+	createElement.mark = function(attrs, is_open = false) {
+		attrs = Object.entries(attrs).map(([n, v]) => n + `="${v}"`).join(" ");
+		const end = is_open ? "" : "/";
+		const out = enviroment.D.createComment(`<dde:mark ${attrs}${enviroment.ssr}${end}>`);
+		if (is_open) out.end = enviroment.D.createComment("</dde:mark>");
+		return out;
+	};
+	function createElementNS(ns) {
+		const _this = this;
+		return function createElementNSCurried(...rest) {
+			namespace = ns;
+			const el = createElement.call(_this, ...rest);
+			namespace = void 0;
+			return el;
+		};
+	}
+	function simulateSlots(element, root = element) {
+		const mark_e = "\xB9\u2070", mark_s = "\u2713";
+		const slots = Object.fromEntries(
+			Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s])
+		);
+		element.append = new Proxy(element.append, {
+			apply(orig, _, els) {
+				if (els[0] === root) return orig.apply(element, els);
+				for (const el of els) {
+					const name = (el.slot || "") + mark_e;
+					try {
+						elementAttribute(el, "remove", "slot");
+					} catch (_error) {
+					}
+					const slot = slots[name];
+					if (!slot) return;
+					if (!slot.name.startsWith(mark_s)) {
+						slot.childNodes.forEach((c) => c.remove());
+						slot.name = mark_s + name;
+					}
+					slot.append(el);
+				}
+				element.append = orig;
+				return element;
+			}
+		});
+		if (element !== root) {
+			const els = Array.from(element.childNodes);
+			element.append(...els);
+		}
+		return root;
+	}
+	var assign_context = /* @__PURE__ */ new WeakMap();
+	var { setDeleteAttr: setDeleteAttr2 } = enviroment;
+	function assign(element, ...attributes) {
+		if (!attributes.length) return element;
+		assign_context.set(element, assignContext(element, this));
+		for (const [key, value] of Object.entries(oAssign({}, ...attributes)))
+			assignAttribute.call(this, element, key, value);
+		assign_context.delete(element);
+		return element;
+	}
+	function assignAttribute(element, key, value) {
+		const { setRemoveAttr, s } = assignContext(element, this);
+		const _this = this;
+		value = s.processReactiveAttribute(
+			element,
+			key,
+			value,
+			(key2, value2) => assignAttribute.call(_this, element, key2, value2)
+		);
+		const [k] = key;
+		if ("=" === k) return setRemoveAttr(key.slice(1), value);
+		if ("." === k) return setDelete(element, key.slice(1), value);
+		if (/(aria|data)([A-Z])/.test(key)) {
+			key = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+			return setRemoveAttr(key, value);
+		}
+		if ("className" === key) key = "class";
+		switch (key) {
+			case "xlink:href":
+				return setRemoveAttr(key, value, "http://www.w3.org/1999/xlink");
+			case "textContent":
+				return setDeleteAttr2(element, key, value);
+			case "style":
+				if (typeof value !== "object") break;
+			/* falls through */
+			case "dataset":
+				return forEachEntries(s, key, element, value, setDelete.bind(null, element[key]));
+			case "ariaset":
+				return forEachEntries(s, key, element, value, (key2, val) => setRemoveAttr("aria-" + key2, val));
+			case "classList":
+				return classListDeclarative.call(_this, element, value);
+		}
+		return isPropSetter(element, key) ? setDeleteAttr2(element, key, value) : setRemoveAttr(key, value);
+	}
+	function assignContext(element, _this) {
+		if (assign_context.has(element)) return assign_context.get(element);
+		const is_svg = isInstance(element, enviroment.S);
+		const setRemoveAttr = (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute");
+		const s = signals(_this);
+		return { setRemoveAttr, s };
+	}
+	function classListDeclarative(element, toggle) {
+		const s = signals(this);
+		forEachEntries(
+			s,
+			"classList",
+			element,
+			toggle,
+			(class_name, val) => element.classList.toggle(class_name, val === -1 ? void 0 : Boolean(val))
+		);
+		return element;
+	}
+	function elementAttribute(element, op, key, value) {
+		if (isInstance(element, enviroment.H))
+			return element[op + "Attribute"](key, value);
+		return element[op + "AttributeNS"](null, key, value);
+	}
+	function isPropSetter(el, key) {
+		if (!(key in el)) return false;
+		const des = getPropDescriptor(el, key);
+		return !isUndef(des.set);
+	}
+	function getPropDescriptor(p, key) {
+		p = Object.getPrototypeOf(p);
+		if (!p) return {};
+		const des = Object.getOwnPropertyDescriptor(p, key);
+		if (!des) return getPropDescriptor(p, key);
+		return des;
+	}
+	function forEachEntries(s, target, element, obj, cb) {
+		const S = String;
+		if (typeof obj !== "object" || obj === null) return;
+		return Object.entries(obj).forEach(function process([key, val]) {
+			if (!key) return;
+			key = new S(key);
+			key.target = target;
+			val = s.processReactiveAttribute(element, key, val, cb);
+			cb(key, val);
+		});
+	}
+	function setRemove(obj, prop, key, val) {
+		return obj[(isUndef(val) ? "remove" : "set") + prop](key, val);
+	}
+	function setRemoveNS(obj, prop, key, val, ns = null) {
+		return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val);
+	}
+	function setDelete(obj, key, val) {
+		Reflect.set(obj, key, val);
+		if (!isUndef(val)) return;
+		return Reflect.deleteProperty(obj, key);
+	}
+
+	// src/events-observer.js
+	var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
+		get() {
+			return () => {
+			};
+		}
+	});
+	function connectionsChangesObserverConstructor() {
+		const store = /* @__PURE__ */ new Map();
+		let is_observing = false;
+		const observerListener = (stop2) => function(mutations) {
+			for (const mutation of mutations) {
+				if (mutation.type !== "childList") continue;
+				if (observerAdded(mutation.addedNodes, true)) {
+					stop2();
 					continue;
 				}
-				E(a.removedNodes, !0) && s();
+				if (observerRemoved(mutation.removedNodes, true))
+					stop2();
 			}
-	}, n = new d.M(r(i));
-	return {
-		observe(s) {
-			let f = new d.M(r(() => {
+		};
+		const observer = new enviroment.M(observerListener(stop));
+		return {
+			/**
+			* Creates an observer for a specific element
+			* @param {Element} element - Element to observe
+			* @returns {Function} Cleanup function
+			*/
+			observe(element) {
+				const o = new enviroment.M(observerListener(() => {
+				}));
+				o.observe(element, { childList: true, subtree: true });
+				return () => o.disconnect();
+			},
+			/**
+			* Register a connection listener for an element
+			* @param {Element} element - Element to watch
+			* @param {Function} listener - Callback for connection event
+			*/
+			onConnected(element, listener) {
+				start();
+				const listeners = getElementStore(element);
+				if (listeners.connected.has(listener)) return;
+				listeners.connected.add(listener);
+				listeners.length_c += 1;
+			},
+			/**
+			* Unregister a connection listener
+			* @param {Element} element - Element being watched
+			* @param {Function} listener - Callback to remove
+			*/
+			offConnected(element, listener) {
+				if (!store.has(element)) return;
+				const ls = store.get(element);
+				if (!ls.connected.has(listener)) return;
+				ls.connected.delete(listener);
+				ls.length_c -= 1;
+				cleanWhenOff(element, ls);
+			},
+			/**
+			* Register a disconnection listener for an element
+			* @param {Element} element - Element to watch
+			* @param {Function} listener - Callback for disconnection event
+			*/
+			onDisconnected(element, listener) {
+				start();
+				const listeners = getElementStore(element);
+				if (listeners.disconnected.has(listener)) return;
+				listeners.disconnected.add(listener);
+				listeners.length_d += 1;
+			},
+			/**
+			* Unregister a disconnection listener
+			* @param {Element} element - Element being watched
+			* @param {Function} listener - Callback to remove
+			*/
+			offDisconnected(element, listener) {
+				if (!store.has(element)) return;
+				const ls = store.get(element);
+				ls.disconnected.delete(listener);
+				ls.length_d -= 1;
+				cleanWhenOff(element, ls);
+			}
+		};
+		function cleanWhenOff(element, ls) {
+			if (ls.length_c || ls.length_d)
+				return;
+			store.delete(element);
+			stop();
+		}
+		function getElementStore(element) {
+			if (store.has(element)) return store.get(element);
+			const out = {
+				connected: /* @__PURE__ */ new WeakSet(),
+				length_c: 0,
+				disconnected: /* @__PURE__ */ new WeakSet(),
+				length_d: 0
+			};
+			store.set(element, out);
+			return out;
+		}
+		function start() {
+			if (is_observing) return;
+			is_observing = true;
+			observer.observe(enviroment.D.body, { childList: true, subtree: true });
+		}
+		function stop() {
+			if (!is_observing || store.size) return;
+			is_observing = false;
+			observer.disconnect();
+		}
+		function requestIdle() {
+			return new Promise(function(resolve) {
+				(requestIdleCallback || requestAnimationFrame)(resolve);
+			});
+		}
+		async function collectChildren(element) {
+			if (store.size > 30)
+				await requestIdle();
+			const out = [];
+			if (!isInstance(element, Node)) return out;
+			for (const el of store.keys()) {
+				if (el === element || !isInstance(el, Node)) continue;
+				if (element.contains(el))
+					out.push(el);
+			}
+			return out;
+		}
+		function observerAdded(addedNodes, is_root) {
+			let out = false;
+			for (const element of addedNodes) {
+				if (is_root) collectChildren(element).then(observerAdded);
+				if (!store.has(element)) continue;
+				const ls = store.get(element);
+				if (!ls.length_c) continue;
+				element.dispatchEvent(new Event(evc));
+				ls.connected = /* @__PURE__ */ new WeakSet();
+				ls.length_c = 0;
+				if (!ls.length_d) store.delete(element);
+				out = true;
+			}
+			return out;
+		}
+		function observerRemoved(removedNodes, is_root) {
+			let out = false;
+			for (const element of removedNodes) {
+				if (is_root) collectChildren(element).then(observerRemoved);
+				if (!store.has(element)) continue;
+				const ls = store.get(element);
+				if (!ls.length_d) continue;
+				(globalThis.queueMicrotask || setTimeout)(dispatchRemove(element));
+				out = true;
+			}
+			return out;
+		}
+		function dispatchRemove(element) {
+			return () => {
+				if (element.isConnected) return;
+				element.dispatchEvent(new Event(evd));
+				store.delete(element);
+			};
+		}
+	}
+
+	// src/customElement.js
+	function customElementRender(target, render, props = observedAttributes2) {
+		const custom_element = target.host || target;
+		scope.push({
+			scope: custom_element,
+			host: (...c) => c.length ? c.forEach((c2) => c2(custom_element)) : custom_element
+		});
+		if (typeof props === "function") props = props.call(custom_element, custom_element);
+		const is_lte = custom_element[keyLTE];
+		if (!is_lte) lifecyclesToEvents(custom_element);
+		const out = render.call(custom_element, props);
+		if (!is_lte) custom_element.dispatchEvent(new Event(evc));
+		if (target.nodeType === 11 && typeof target.mode === "string")
+			custom_element.addEventListener(evd, c_ch_o.observe(target), { once: true });
+		scope.pop();
+		return target.append(out);
+	}
+	function lifecyclesToEvents(class_declaration) {
+		wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail) {
+			target.apply(thisArg, detail);
+			thisArg.dispatchEvent(new Event(evc));
+		});
+		wrapMethod(class_declaration.prototype, "disconnectedCallback", function(target, thisArg, detail) {
+			target.apply(thisArg, detail);
+			(globalThis.queueMicrotask || setTimeout)(
+				() => !thisArg.isConnected && thisArg.dispatchEvent(new Event(evd))
+			);
+		});
+		wrapMethod(class_declaration.prototype, "attributeChangedCallback", function(target, thisArg, detail) {
+			const [attribute, , value] = detail;
+			thisArg.dispatchEvent(new CustomEvent(eva, {
+				detail: [attribute, value]
 			}));
-			return f.observe(s, { childList: !0, subtree: !0 }), () => f.disconnect();
-		},
-		onConnected(s, f) {
-			u();
-			let a = c(s);
-			a.connected.has(f) || (a.connected.add(f), a.length_c += 1);
-		},
-		offConnected(s, f) {
-			if (!t.has(s)) return;
-			let a = t.get(s);
-			a.connected.has(f) && (a.connected.delete(f), a.length_c -= 1, o(s, a));
-		},
-		onDisconnected(s, f) {
-			u();
-			let a = c(s);
-			a.disconnected.has(f) || (a.disconnected.add(f), a.length_d += 1);
-		},
-		offDisconnected(s, f) {
-			if (!t.has(s)) return;
-			let a = t.get(s);
-			a.disconnected.has(f) && (a.disconnected.delete(f), a.length_d -= 1, o(s, a));
-		}
-	};
-	function o(s, f) {
-		f.length_c || f.length_d || (t.delete(s), i());
-	}
-	function c(s) {
-		if (t.has(s)) return t.get(s);
-		let f = {
-			connected: /* @__PURE__ */ new WeakSet(),
-			length_c: 0,
-			disconnected: /* @__PURE__ */ new WeakSet(),
-			length_d: 0
-		};
-		return t.set(s, f), f;
-	}
-	function u() {
-		e || (e = !0, n.observe(d.D.body, { childList: !0, subtree: !0 }));
-	}
-	function i() {
-		!e || t.size || (e = !1, n.disconnect());
-	}
-	function p() {
-		return new Promise(function(s) {
-			(requestIdleCallback || requestAnimationFrame)(s);
+			target.apply(thisArg, detail);
 		});
+		class_declaration.prototype[keyLTE] = true;
+		return class_declaration;
 	}
-	async function v(s) {
-		t.size > 30 && await p();
-		let f = [];
-		if (!(s instanceof Node)) return f;
-		for (let a of t.keys())
-			a === s || !(a instanceof Node) || s.contains(a) && f.push(a);
-		return f;
+	function wrapMethod(obj, method, apply) {
+		obj[method] = new Proxy(obj[method] || (() => {
+		}), { apply });
 	}
-	function h(s, f) {
-		let a = !1;
-		for (let b of s) {
-			if (f && v(b).then(h), !t.has(b)) continue;
-			let N = t.get(b);
-			N.length_c && (b.dispatchEvent(new Event(w)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), a = !0);
+	function observedAttributes2(instance) {
+		return observedAttributes(instance, (i, n) => i.getAttribute(n));
+	}
+
+	// src/events.js
+	function dispatchEvent(name, options, host) {
+		if (typeof options === "function") {
+			host = options;
+			options = null;
 		}
-		return a;
-	}
-	function E(s, f) {
-		let a = !1;
-		for (let b of s)
-			f && v(b).then(E), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(L(b)), a = !0);
-		return a;
-	}
-	function L(s) {
-		return () => {
-			s.isConnected || (s.dispatchEvent(new Event(y)), t.delete(s));
+		if (!options) options = {};
+		return function dispatch(element, ...d) {
+			if (host) {
+				d.unshift(element);
+				element = typeof host === "function" ? host() : host;
+			}
+			const event = d.length ? new CustomEvent(name, oAssign({ detail: d[0] }, options)) : new Event(name, options);
+			return element.dispatchEvent(event);
 		};
 	}
-}
+	function on(event, listener, options) {
+		return function registerElement(element) {
+			element.addEventListener(event, listener, options);
+			return element;
+		};
+	}
+	var lifeOptions = (obj) => oAssign({}, typeof obj === "object" ? obj : null, { once: true });
+	on.connected = function(listener, options) {
+		options = lifeOptions(options);
+		return function registerElement(element) {
+			element.addEventListener(evc, listener, options);
+			if (element[keyLTE]) return element;
+			if (element.isConnected) return element.dispatchEvent(new Event(evc)), element;
+			const c = onAbort(options.signal, () => c_ch_o.offConnected(element, listener));
+			if (c) c_ch_o.onConnected(element, listener);
+			return element;
+		};
+	};
+	on.disconnected = function(listener, options) {
+		options = lifeOptions(options);
+		return function registerElement(element) {
+			element.addEventListener(evd, listener, options);
+			if (element[keyLTE]) return element;
+			const c = onAbort(options.signal, () => c_ch_o.offDisconnected(element, listener));
+			if (c) c_ch_o.onDisconnected(element, listener);
+			return element;
+		};
+	};
+	var store_abort = /* @__PURE__ */ new WeakMap();
+	on.disconnectedAsAbort = function(host) {
+		if (store_abort.has(host)) return store_abort.get(host);
+		const a = new AbortController();
+		store_abort.set(host, a);
+		host(on.disconnected(() => a.abort()));
+		return a.signal;
+	};
+	var els_attribute_store = /* @__PURE__ */ new WeakSet();
+	on.attributeChanged = function(listener, options) {
+		if (typeof options !== "object")
+			options = {};
+		return function registerElement(element) {
+			element.addEventListener(eva, listener, options);
+			if (element[keyLTE] || els_attribute_store.has(element))
+				return element;
+			if (!enviroment.M) return element;
+			const observer = new enviroment.M(function(mutations) {
+				for (const { attributeName, target } of mutations)
+					target.dispatchEvent(
+						new CustomEvent(eva, { detail: [attributeName, target.getAttribute(attributeName)] })
+					);
+			});
+			const c = onAbort(options.signal, () => observer.disconnect());
+			if (c) observer.observe(element, { attributes: true });
+			return element;
+		};
+	};
 
-// src/customElement.js
-function It(t, e, r = _t) {
-	let n = t.host || t;
-	x.push({
-		scope: n,
-		host: (...u) => u.length ? u.forEach((i) => i(n)) : n
-	}), typeof r == "function" && (r = r.call(n, n));
-	let o = n[O];
-	o || xt(n);
-	let c = e.call(n, r);
-	return o || n.dispatchEvent(new Event(w)), t.nodeType === 11 && typeof t.mode == "string" && n.addEventListener(y, C.observe(t), { once: !0 }), x.pop(), t.append(c);
-}
-function xt(t) {
-	return J(t.prototype, "connectedCallback", function(e, r, n) {
-		e.apply(r, n), r.dispatchEvent(new Event(w));
-	}), J(t.prototype, "disconnectedCallback", function(e, r, n) {
-		e.apply(r, n), (globalThis.queueMicrotask || setTimeout)(
-			() => !r.isConnected && r.dispatchEvent(new Event(y))
-		);
-	}), J(t.prototype, "attributeChangedCallback", function(e, r, n) {
-		let [o, , c] = n;
-		r.dispatchEvent(new CustomEvent(k, {
-			detail: [o, c]
-		})), e.apply(r, n);
-	}), t.prototype[O] = !0, t;
-}
-function J(t, e, r) {
-	t[e] = new Proxy(t[e] || (() => {
-	}), { apply: r });
-}
-function _t(t) {
-	return W(t, (e, r) => e.getAttribute(r));
-}
+	// src/signals-lib/helpers.js
+	var mark = "__dde_signal";
+	var queueSignalWrite = /* @__PURE__ */ (() => {
+		let pendingSignals = /* @__PURE__ */ new Set();
+		let scheduled = false;
+		function flushSignals() {
+			scheduled = false;
+			const todo = pendingSignals;
+			pendingSignals = /* @__PURE__ */ new Set();
+			for (const signal2 of todo) {
+				const M = signal2[mark];
+				if (M) M.listeners.forEach((l) => l(M.value));
+			}
+		}
+		return function(s) {
+			pendingSignals.add(s);
+			if (scheduled) return;
+			scheduled = true;
+			queueMicrotask(flushSignals);
+		};
+	})();
 
-// src/events.js
-function Gt(t, e, r) {
-	return e || (e = {}), function(o, ...c) {
-		r && (c.unshift(o), o = typeof r == "function" ? r() : r);
-		let u = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
-		return o.dispatchEvent(u);
-	};
-}
-function _(t, e, r) {
-	return function(o) {
-		return o.addEventListener(t, e, r), o;
-	};
-}
-var ct = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
-_.connected = function(t, e) {
-	return e = ct(e), function(n) {
-		return n.addEventListener(w, t, e), n[O] ? n : n.isConnected ? (n.dispatchEvent(new Event(w)), n) : (P(e.signal, () => C.offConnected(n, t)) && C.onConnected(n, t), n);
-	};
-};
-_.disconnected = function(t, e) {
-	return e = ct(e), function(n) {
-		return n.addEventListener(y, t, e), n[O] || P(e.signal, () => C.offDisconnected(n, t)) && C.onDisconnected(n, t), n;
-	};
-};
-var Z = /* @__PURE__ */ new WeakMap();
-_.disconnectedAsAbort = function(t) {
-	if (Z.has(t)) return Z.get(t);
-	let e = new AbortController();
-	return Z.set(t, e), t(_.disconnected(() => e.abort())), e;
-};
-var wt = /* @__PURE__ */ new WeakSet();
-_.attributeChanged = function(t, e) {
-	return typeof e != "object" && (e = {}), function(n) {
-		if (n.addEventListener(k, t, e), n[O] || wt.has(n) || !d.M) return n;
-		let o = new d.M(function(u) {
-			for (let { attributeName: i, target: p } of u)
-				p.dispatchEvent(
-					new CustomEvent(k, { detail: [i, p.getAttribute(i)] })
-				);
-		});
-		return P(e.signal, () => o.disconnect()) && o.observe(n, { attributes: !0 }), n;
-	};
-};
-
-// src/signals-lib.js
-var l = "__dde_signal";
-function U(t) {
-	try {
-		return I(t, l);
-	} catch {
-		return !1;
-	}
-}
-var z = [], g = /* @__PURE__ */ new WeakMap();
-function m(t, e) {
-	if (typeof t != "function")
-		return it(!1, t, e);
-	if (U(t)) return t;
-	let r = it(!0), n = function() {
-		let [o, ...c] = g.get(n);
-		if (g.set(n, /* @__PURE__ */ new Set([o])), z.push(n), at(r, t()), z.pop(), !c.length) return;
-		let u = g.get(n);
-		for (let i of c)
-			u.has(i) || R(i, n);
-	};
-	return g.set(r[l], n), g.set(n, /* @__PURE__ */ new Set([r])), n(), r;
-}
-m.action = function(t, e, ...r) {
-	let n = t[l], { actions: o } = n;
-	if (!o || !(e in o))
-		throw new Error(`'${t}' has no action with name '${e}'!`);
-	if (o[e].apply(n, r), n.skip) return delete n.skip;
-	n.listeners.forEach((c) => c(n.value));
-};
-m.on = function t(e, r, n = {}) {
-	let { signal: o } = n;
-	if (!(o && o.aborted)) {
-		if (Array.isArray(e)) return e.forEach((c) => t(c, r, n));
-		Q(e, r), o && o.addEventListener("abort", () => R(e, r));
-	}
-};
-m.symbols = {
-	//signal: mark,
-	onclear: Symbol.for("Signal.onclear")
-};
-m.clear = function(...t) {
-	for (let r of t) {
-		let n = r[l];
-		n && (delete r.toJSON, n.onclear.forEach((o) => o.call(n)), e(r, n), delete r[l]);
-	}
-	function e(r, n) {
-		n.listeners.forEach((o) => {
-			if (n.listeners.delete(o), !g.has(o)) return;
-			let c = g.get(o);
-			c.delete(r), !(c.size > 1) && (r.clear(...c), g.delete(o));
-		});
-	}
-};
-var D = "__dde_reactive";
-m.el = function(t, e) {
-	let r = M.mark({ type: "reactive" }, !0), n = r.end, o = d.D.createDocumentFragment();
-	o.append(r, n);
-	let { current: c } = x, u = {}, i = (p) => {
-		if (!r.parentNode || !n.parentNode)
-			return R(t, i);
-		let v = u;
-		u = {}, x.push(c);
-		let h = e(p, function(f, a) {
-			let b;
-			return I(v, f) ? (b = v[f], delete v[f]) : b = a(), u[f] = b, b;
-		});
-		x.pop(), Array.isArray(h) || (h = [h]);
-		let E = document.createComment("");
-		h.push(E), r.after(...h);
-		let L;
-		for (; (L = E.nextSibling) && L !== n; )
-			L.remove();
-		E.remove(), r.isConnected && At(c.host());
-	};
-	return Q(t, i), ut(t, i, r, e), i(t()), o;
-};
-function At(t) {
-	!t || !t[D] || (requestIdleCallback || setTimeout)(function() {
-		t[D] = t[D].filter(([e, r]) => r.isConnected ? !0 : (R(...e), !1));
+	// src/signals-lib/signals-lib.js
+	var Signal = oCreate(null, {
+		get: { value() {
+			return read(this);
+		} },
+		set: { value(...v) {
+			return write(this, ...v);
+		} },
+		toJSON: { value() {
+			return read(this);
+		} },
+		valueOf: { value() {
+			return this[mark] && this[mark].value;
+		} }
 	});
-}
-var St = {
-	_set(t) {
-		this.value = t;
+	var SignalReadOnly = oCreate(Signal, {
+		set: { value() {
+			return;
+		} }
+	});
+	function isSignal(candidate) {
+		return candidate && candidate[mark];
 	}
-};
-function Ot(t) {
-	return function(e, r) {
-		let n = (...c) => c.length ? e.setAttribute(r, ...c) : K(n), o = ft(n, e.getAttribute(r), St);
-		return t[r] = o, o;
+	var stack_watch = [];
+	var deps = /* @__PURE__ */ new WeakMap();
+	function signal(value, actions) {
+		if (typeof value !== "function")
+			return create(false, value, actions);
+		if (isSignal(value)) return value;
+		const out = create(true);
+		function contextReWatch() {
+			const [origin, ...deps_old] = deps.get(contextReWatch);
+			deps.set(contextReWatch, /* @__PURE__ */ new Set([origin]));
+			stack_watch.push(contextReWatch);
+			write(out, value());
+			stack_watch.pop();
+			if (!deps_old.length) return;
+			const deps_curr = deps.get(contextReWatch);
+			for (const dep_signal of deps_old) {
+				if (deps_curr.has(dep_signal)) continue;
+				removeSignalListener(dep_signal, contextReWatch);
+			}
+		}
+		deps.set(out[mark], contextReWatch);
+		deps.set(contextReWatch, /* @__PURE__ */ new Set([out]));
+		contextReWatch();
+		return out;
+	}
+	signal.action = function(s, name, ...a) {
+		const M = s[mark];
+		if (!M) return;
+		const { actions } = M;
+		if (!actions || !hasOwn(actions, name))
+			throw new Error(`Action "${name}" not defined. See ${mark}.actions.`);
+		actions[name].apply(M, a);
+		if (M.skip) return delete M.skip;
+		queueSignalWrite(s);
 	};
-}
-var G = "__dde_attributes";
-m.observedAttributes = function(t) {
-	let e = t[G] = {}, r = W(t, Ot(e));
-	return _.attributeChanged(function({ detail: o }) {
-		/*! This maps attributes to signals (`S.observedAttributes`).
-			* Investigate `__dde_attributes` key of the element.*/
-		let [c, u] = o, i = this[G][c];
-		if (i) return m.action(i, "_set", u);
-	})(t), _.disconnected(function() {
-		/*! This removes all signals mapped to attributes (`S.observedAttributes`).
-			* Investigate `__dde_attributes` key of the element.*/
-		m.clear(...Object.values(this[G]));
-	})(t), r;
-};
-var st = {
-	isSignal: U,
-	processReactiveAttribute(t, e, r, n) {
-		if (!U(r)) return r;
-		let o = (c) => {
-			if (!t.isConnected)
-				return R(r, o);
-			n(e, c);
-		};
-		return Q(r, o), ut(r, o, t, e), r();
+	signal.on = function on2(s, listener, options = {}) {
+		const { signal: as } = options;
+		if (as && as.aborted) return;
+		if (Array.isArray(s)) return s.forEach((s2) => on2(s2, listener, options));
+		addSignalListener(s, listener);
+		if (as) as.addEventListener("abort", () => removeSignalListener(s, listener));
+	};
+	signal.symbols = {
+		//signal: mark,
+		onclear: Symbol.for("Signal.onclear")
+	};
+	signal.clear = function(...signals2) {
+		for (const s of signals2) {
+			const M = s[mark];
+			if (!M) continue;
+			delete s.toJSON;
+			M.onclear.forEach((f) => f.call(M));
+			clearListDeps(s, M);
+			delete s[mark];
+		}
+		function clearListDeps(s, o) {
+			o.listeners.forEach((l) => {
+				o.listeners.delete(l);
+				if (!deps.has(l)) return;
+				const ls = deps.get(l);
+				ls.delete(s);
+				if (ls.size > 1) return;
+				s.clear(...ls);
+				deps.delete(l);
+			});
+		}
+	};
+	var key_reactive = "__dde_reactive";
+	function cache(store = oCreate()) {
+		return (key, fun) => hasOwn(store, key) ? store[key] : store[key] = fun();
 	}
-};
-function ut(t, e, ...r) {
-	let { current: n } = x;
-	n.host(function(o) {
-		if (o[D])
-			return o[D].push([[t, e], ...r]);
-		o[D] = [], !n.prevent && _.disconnected(
+	signal.el = function(s, map) {
+		const mark_start = createElement.mark({ type: "reactive", source: new Defined().compact }, true);
+		const mark_end = mark_start.end;
+		const out = enviroment.D.createDocumentFragment();
+		out.append(mark_start, mark_end);
+		const { current } = scope;
+		let cache_shared = oCreate();
+		const reRenderReactiveElement = (v) => {
+			if (!mark_start.parentNode || !mark_end.parentNode)
+				return removeSignalListener(s, reRenderReactiveElement);
+			const memo = cache(cache_shared);
+			cache_shared = oCreate();
+			scope.push(current);
+			let els = map(v, function useCache(key, fun) {
+				return cache_shared[key] = memo(key, fun);
+			});
+			scope.pop();
+			if (!Array.isArray(els))
+				els = [els];
+			const el_start_rm = document.createComment("");
+			els.push(el_start_rm);
+			mark_start.after(...els);
+			let el_r;
+			while ((el_r = el_start_rm.nextSibling) && el_r !== mark_end)
+				el_r.remove();
+			el_start_rm.remove();
+			if (mark_start.isConnected)
+				requestCleanUpReactives(current.host());
+		};
+		addSignalListener(s, reRenderReactiveElement);
+		removeSignalsFromElements(s, reRenderReactiveElement, mark_start, map);
+		reRenderReactiveElement(s.get());
+		current.host(on.disconnected(
 			() => (
-				/*!
-					* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
-					* You can investigate the `__dde_reactive` key of the element.
-					* */
-				o[D].forEach(([[c, u]]) => R(c, u, c[l] && c[l].host && c[l].host() === o))
+				/*! Clears cached elements for reactive element `S.el` */
+				cache_shared = {}
 			)
-		)(o);
+		));
+		return out;
+	};
+	function requestCleanUpReactives(host) {
+		if (!host || !host[key_reactive]) return;
+		(requestIdleCallback || setTimeout)(function() {
+			host[key_reactive] = host[key_reactive].filter(([s, el]) => el.isConnected ? true : (removeSignalListener(...s), false));
+		});
+	}
+	var observedAttributeActions = {
+		_set(value) {
+			this.value = value;
+		}
+	};
+	function observedAttribute(store) {
+		return function(instance, name) {
+			const varS = oCreate(Signal, {
+				set: { value(...v) {
+					return instance.setAttribute(name, ...v);
+				} }
+			});
+			const out = toSignal(varS, instance.getAttribute(name), observedAttributeActions);
+			store[name] = out;
+			return out;
+		};
+	}
+	var key_attributes = "__dde_attributes";
+	signal.observedAttributes = function(element) {
+		const store = element[key_attributes] = {};
+		const attrs = observedAttributes(element, observedAttribute(store));
+		on.attributeChanged(function attributeChangeToSignal({ detail }) {
+			/*! This maps attributes to signals (`S.observedAttributes`).
+				Investigate `__dde_attributes` key of the element. */
+			const [name, value] = detail;
+			const curr = this[key_attributes][name];
+			if (curr) return signal.action(curr, "_set", value);
+		})(element);
+		on.disconnected(function() {
+			/*! This removes all signals mapped to attributes (`S.observedAttributes`).
+				Investigate `__dde_attributes` key of the element. */
+			signal.clear(...Object.values(this[key_attributes]));
+		})(element);
+		return attrs;
+	};
+	var signals_config = {
+		isSignal,
+		/**
+		* Processes attributes that might be signals
+		*
+		* @param {Element} element - Element with the attribute
+		* @param {string} key - Attribute name
+		* @param {any} attrs - Attribute value (possibly a signal)
+		* @param {Function} set - Function to set attribute value
+		* @returns {any} Processed attribute value
+		*/
+		processReactiveAttribute(element, key, attrs, set) {
+			if (!isSignal(attrs)) return attrs;
+			const l = (attr) => {
+				if (!element.isConnected)
+					return removeSignalListener(attrs, l);
+				set(key, attr);
+			};
+			addSignalListener(attrs, l);
+			removeSignalsFromElements(attrs, l, element, key);
+			return attrs.get();
+		}
+	};
+	function removeSignalsFromElements(s, listener, ...notes) {
+		const { current } = scope;
+		current.host(function(element) {
+			if (element[key_reactive])
+				return element[key_reactive].push([[s, listener], ...notes]);
+			element[key_reactive] = [];
+			if (current.prevent) return;
+			on.disconnected(
+				() => (
+					/*! Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
+						You can investigate the `__dde_reactive` key of the element. */
+					element[key_reactive].forEach(([[s2, listener2]]) => removeSignalListener(s2, listener2, s2[mark] && s2[mark].host && s2[mark].host() === element))
+				)
+			)(element);
+		});
+	}
+	var cleanUpRegistry = new FinalizationRegistry(function(s) {
+		signal.clear({ [mark]: s });
 	});
-}
-function it(t, e, r) {
-	let n = t ? () => K(n) : (...o) => o.length ? at(n, ...o) : K(n);
-	return ft(n, e, r, t);
-}
-var yt = Object.assign(/* @__PURE__ */ Object.create(null), {
-	stopPropagation() {
-		this.skip = !0;
+	function create(is_readonly, value, actions) {
+		const varS = oCreate(is_readonly ? SignalReadOnly : Signal);
+		const SI = toSignal(varS, value, actions, is_readonly);
+		cleanUpRegistry.register(SI, SI[mark]);
+		return SI;
 	}
-}), V = class extends Error {
-	constructor() {
-		super();
-		let [e, ...r] = this.stack.split(`
-`), n = e.slice(e.indexOf("@"), e.indexOf(".js:") + 4);
-		this.stack = r.find((o) => !o.includes(n));
+	var protoSigal = oAssign(oCreate(), {
+		/**
+		* Prevents signal propagation
+		*/
+		stopPropagation() {
+			this.skip = true;
+		}
+	});
+	function toSignal(s, value, actions, readonly = false) {
+		const onclear = [];
+		if (typeOf(actions) !== "[object Object]")
+			actions = {};
+		const { onclear: ocs } = signal.symbols;
+		if (actions[ocs]) {
+			onclear.push(actions[ocs]);
+			delete actions[ocs];
+		}
+		const { host } = scope;
+		Reflect.defineProperty(s, mark, {
+			value: oAssign(oCreate(protoSigal), {
+				value,
+				actions,
+				onclear,
+				host,
+				listeners: /* @__PURE__ */ new Set(),
+				defined: new Defined().stack,
+				readonly
+			}),
+			enumerable: false,
+			writable: false,
+			configurable: true
+		});
+		return s;
 	}
-};
-function ft(t, e, r, n = !1) {
-	let o = [];
-	X(r) !== "[object Object]" && (r = {});
-	let { onclear: c } = m.symbols;
-	r[c] && (o.push(r[c]), delete r[c]);
-	let { host: u } = x;
-	return Reflect.defineProperty(t, l, {
-		value: {
-			value: e,
-			actions: r,
-			onclear: o,
-			host: u,
-			listeners: /* @__PURE__ */ new Set(),
-			defined: new V().stack,
-			readonly: n
-		},
-		enumerable: !1,
-		writable: !1,
-		configurable: !0
-	}), t.toJSON = () => t(), t.valueOf = () => t[l] && t[l].value, Object.setPrototypeOf(t[l], yt), t;
-}
-function Ct() {
-	return z[z.length - 1];
-}
-function K(t) {
-	if (!t[l]) return;
-	let { value: e, listeners: r } = t[l], n = Ct();
-	return n && r.add(n), g.has(n) && g.get(n).add(t), e;
-}
-function at(t, e, r) {
-	if (!t[l]) return;
-	let n = t[l];
-	if (!(!r && n.value === e))
-		return n.value = e, n.listeners.forEach((o) => o(e)), e;
-}
-function Q(t, e) {
-	if (t[l])
-		return t[l].listeners.add(e);
-}
-function R(t, e, r) {
-	let n = t[l];
-	if (!n) return;
-	let o = n.listeners.delete(e);
-	if (r && !n.listeners.size) {
-		if (m.clear(t), !g.has(n)) return o;
-		let c = g.get(n);
-		if (!g.has(c)) return o;
-		g.get(c).forEach((u) => R(u, c, !0));
+	function currentContext() {
+		return stack_watch[stack_watch.length - 1];
+	}
+	function read(s) {
+		if (!s[mark]) return;
+		const { value, listeners } = s[mark];
+		const context = currentContext();
+		if (context) listeners.add(context);
+		if (deps.has(context)) deps.get(context).add(s);
+		return value;
+	}
+	function write(s, value, force) {
+		const M = s[mark];
+		if (!M || !force && M.value === value) return;
+		M.value = value;
+		queueSignalWrite(s);
+		return value;
+	}
+	function addSignalListener(s, listener) {
+		if (!s[mark]) return;
+		return s[mark].listeners.add(listener);
+	}
+	function removeSignalListener(s, listener, clear_when_empty) {
+		const M = s[mark];
+		if (!M) return;
+		const { listeners: L } = M;
+		const out = L.delete(listener);
+		if (!out || !clear_when_empty || L.size) return out;
+		signal.clear(s);
+		const depList = deps.get(M);
+		if (!depList) return out;
+		const depSource = deps.get(depList);
+		if (!depSource) return out;
+		for (const sig of depSource) removeSignalListener(sig, depList, true);
+		return out;
 	}
-	return o;
-}
 
-// signals.js
-H(st);
-
-globalThis.dde= {
-	S: m,
-	assign: q,
-	assignAttribute: nt,
-	chainableAppend: lt,
-	classListDeclarative: ht,
-	createElement: M,
-	createElementNS: jt,
-	customElementRender: It,
-	customElementWithDDE: xt,
-	dispatchEvent: Gt,
-	el: M,
-	elNS: jt,
-	elementAttribute: bt,
-	isSignal: U,
-	lifecyclesToEvents: xt,
-	observedAttributes: _t,
-	on: _,
-	queue: Mt,
-	registerReactivity: H,
-	scope: x,
-	signal: m,
-	simulateSlots: Pt
-};
-
-})();
\ No newline at end of file
+	// signals.js
+	registerReactivity(signals_config);
+	return __toCommonJS(index_with_signals_exports);
+})();
diff --git a/dist/dde-with-signals.min.d.ts b/dist/dde-with-signals.min.d.ts
new file mode 100644
index 0000000..494e418
--- /dev/null
+++ b/dist/dde-with-signals.min.d.ts
@@ -0,0 +1,785 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export interface Signal<V, A> {
+	/** The current value of the signal */
+	get(): V;
+	/** Set new value of the signal */
+	set(value: V): V;
+	toJSON(): V;
+	valueOf(): V;
+}
+export type Action<V> = (this: {
+	value: V;
+	stopPropagation(): void;
+}, ...a: any[]) => typeof signal._ | void;
+//type SymbolSignal= Symbol;
+export type SymbolOnclear = symbol;
+export type Actions<V> = Record<string | SymbolOnclear, Action<V>>;
+export type OnListenerOptions = Pick<AddEventListenerOptions, "signal"> & {
+	first_time?: boolean;
+};
+export interface signal {
+	_: Symbol;
+	/**
+	 * Computations signal. This creates a signal which is computed from other signals.
+	 * */
+	<V extends () => any>(computation: V): Signal<ReturnType<V>, {}>;
+	/**
+	 * Simple example:
+	 * ```js
+	 * const hello= S("Hello Signal");
+	 * ```
+	 * …simple todo signal:
+	 * ```js
+	 * const todos= S([], {
+	 * 	add(v){ this.value.push(S(v)); },
+	 * 	remove(i){ this.value.splice(i, 1); },
+	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
+	 * });
+	 * ```
+	 * …computed signal:
+	 * ```js
+	 * const name= S("Jan");
+	 * const surname= S("Andrle");
+	 * const fullname= S(()=> name.get()+" "+surname.get());
+	 * ```
+	 * @param value Initial signal value. Or function computing value from other signals.
+	 * @param actions Use to define actions on the signal. Such as add item to the array.
+	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
+	 *		by `S.clear`.
+	 * */
+	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(signal: S, name: N, ...params: A[N] extends (...args: infer P) => any ? P : never): void;
+	clear(...signals: Signal<any, any>[]): void;
+	on<T>(signal: Signal<T, any>, onchange: (a: T) => void, options?: OnListenerOptions): void;
+	symbols: {
+		//signal: SymbolSignal;
+		onclear: SymbolOnclear;
+	};
+	/**
+	 * Reactive element, which is rendered based on the given signal.
+	 * ```js
+	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
+	 * S.el(listS, list=> list.map(li=> el("li", li)));
+	 * ```
+	 * */
+	el<S extends any>(signal: Signal<S, any>, el: (v: S) => Element | Element[] | DocumentFragment): DocumentFragment;
+	observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
+}
+export const signal: signal;
+export const S: signal;
+declare global {
+	type ddeSignal<T, A = {}> = Signal<T, A>;
+	type ddeAction<V> = Action<V>;
+	type ddeActions<V> = Actions<V>;
+}
+export type CustomElementTagNameMap = {
+	"#text": Text;
+	"#comment": Comment;
+};
+export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
+declare global {
+	type ddeComponentAttributes = Record<any, any> | undefined;
+	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any;
+	type ddeString = string | Signal<string, {}>;
+	type ddeStringable = ddeString | number | Signal<number, {}>;
+}
+export type PascalCase = `${Capitalize<string>}${string}`;
+export type AttrsModified = {
+	/**
+	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
+	 */
+	style: Partial<CSSStyleDeclaration> | ddeString | Partial<{
+		[K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], {}>;
+	}>;
+	/**
+	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
+	 * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
+	 * for others.
+	 */
+	classList: Record<string, -1 | 0 | 1 | boolean | Signal<-1 | 0 | 1 | boolean, {}>>;
+	/**
+	 * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
+	 * Values are converted to string (see {@link DOMStringMap}).
+	 *
+	 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
+	 * */
+	dataset: Record<string, ddeStringable>;
+	/**
+	 * Sets `aria-*` simiraly to `dataset`
+	 * */
+	ariaset: Record<string, ddeString>;
+} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString> & Record<`.${string}`, any>;
+export type _fromElsInterfaces<EL extends SupportedElement> = Omit<EL, keyof AttrsModified>;
+export type IsReadonly<T, K extends keyof T> = T extends {
+	readonly [P in K]: T[K];
+} ? true : false;
+/**
+ * Just element attributtes
+ *
+ * In most cases, you can use native propertie such as
+ * [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on
+ * (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
+ *
+ * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
+ * @private
+ */
+export type ElementAttributes<T extends SupportedElement> = Partial<{
+	[K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] extends ((...p: any[]) => any) ? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>) => Signal<ReturnType<_fromElsInterfaces<T>[K]>, {}>) : (IsReadonly<_fromElsInterfaces<T>, K> extends false ? _fromElsInterfaces<T>[K] | Signal<_fromElsInterfaces<T>[K], {}> : ddeStringable);
+} & AttrsModified> & Record<string, any>;
+export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El;
+export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El;
+export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT];
+export type ExtendedHTMLElementTagNameMap = HTMLElementTagNameMap & CustomElementTagNameMap;
+export namespace el {
+	/**
+	 * Creates a marker comment for elements
+	 *
+	 * @param attrs - Marker attributes
+	 * @param [is_open=false] - Whether the marker is open-ended
+	 * @returns Comment node marker
+	 */
+	export function mark(attrs: {
+		type: "component" | "reactive" | "later";
+		name?: string;
+		host?: "this" | "parentElement";
+	}, is_open?: boolean): Comment;
+}
+export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>, ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<A extends {
+	textContent: ddeStringable;
+}, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>["textContent"], ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(tag_name: TAG, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable, ...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[]): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement;
+export function el(tag_name?: "<>"): ddeDocumentFragment;
+export function el(tag_name: string, attrs?: ElementAttributes<HTMLElement> | ddeStringable, ...addons: ddeElementAddon<HTMLElement>[]): ddeHTMLElement;
+export function elNS(namespace: "http://www.w3.org/2000/svg"): <TAG extends keyof SVGElementTagNameMap & string, EL extends (TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement)>(tag_name: TAG, attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable, ...addons: ddeElementAddon<NoInfer<EL>>[]) => TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement;
+export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG extends keyof MathMLElementTagNameMap & string, EL extends (TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement)>(tag_name: TAG, attrs?: ddeStringable | Partial<{
+	[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
+}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
+export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
+export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
+/** Simulate slots for ddeComponents */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
+/**
+ * Simulate slots in Custom Elements without using `shadowRoot`.
+ * @param el Custom Element root element
+ * @param body Body of the custom element
+ * */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void;
+export interface On {
+	/** Listens to the DOM event. See {@link Document.addEventListener} */
+	<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
+	<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+		string,
+		string
+	]>) => any, options?: AddEventListenerOptions): EE;
+}
+export const on: On;
+export type Scope = {
+	scope: Node | Function | Object;
+	host: ddeElementAddon<any>;
+	custom_element: false | HTMLElement;
+	prevent: boolean;
+};
+/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
+export const scope: {
+	current: Scope;
+	/** Stops all automatizations. E. g. signals used as attributes in current scope
+	 * registers removing these listeners (and clean signal if no other listeners are detected)
+	 * on `disconnected` event. */
+	preventDefault<T extends boolean>(prevent: T): T;
+	/**
+	 * This represents reference to the current host element — `scope.host()`.
+	 * It can be also used to register Addon(s) (functions to be called when component is initized)
+	 * — `scope.host(on.connected(console.log))`.
+	 * */
+	host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement;
+	state: Scope[];
+	/** Adds new child scope. All attributes are inherited by default. */
+	push(scope?: Partial<Scope>): ReturnType<Array<Scope>["push"]>;
+	/** Adds root scope as a child of the current scope. */
+	pushRoot(): ReturnType<Array<Scope>["push"]>;
+	/** Removes last/current child scope. */
+	pop(): ReturnType<Array<Scope>["pop"]>;
+};
+export function customElementRender<EL extends HTMLElement, P extends any = Record<string, string | Signal<string, {}>>>(target: ShadowRoot | EL, render: (props: P) => SupportedElement | DocumentFragment, props?: P | ((el: EL) => P)): EL;
+export function customElementWithDDE<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function lifecyclesToEvents<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function observedAttributes(custom_element: HTMLElement): Record<string, string>;
+/**
+ * This is used primarly for server side rendering. To be sure that all async operations
+ * are finished before the page is sent to the client.
+ * ```
+ *	// on component
+ *	function component(){
+ *		…
+ *		queue(fetch(...).then(...));
+ *	}
+ *
+ * // building the page
+ * async function build(){
+ *		const { component }= await import("./component.js");
+ *		document.body.append(el(component));
+ *		await queue();
+ *		retutn document.body.innerHTML;
+ *	}
+ * ```
+ * */
+export function queue(promise?: Promise<unknown>): Promise<unknown>;
+/* TypeScript MEH */
+declare global {
+	type ddeAppend<el> = (...nodes: (Node | string)[]) => el;
+	interface ddeDocumentFragment extends DocumentFragment {
+		append: ddeAppend<ddeDocumentFragment>;
+	}
+	interface ddeHTMLElement extends HTMLElement {
+		append: ddeAppend<ddeHTMLElement>;
+	}
+	interface ddeSVGElement extends SVGElement {
+		append: ddeAppend<ddeSVGElement>;
+	}
+	interface ddeMathMLElement extends MathMLElement {
+		append: ddeAppend<ddeMathMLElement>;
+	}
+	interface ddeHTMLElementTagNameMap {
+		"a": ddeHTMLAnchorElement;
+		"area": ddeHTMLAreaElement;
+		"audio": ddeHTMLAudioElement;
+		"base": ddeHTMLBaseElement;
+		"blockquote": ddeHTMLQuoteElement;
+		"body": ddeHTMLBodyElement;
+		"br": ddeHTMLBRElement;
+		"button": ddeHTMLButtonElement;
+		"canvas": ddeHTMLCanvasElement;
+		"caption": ddeHTMLTableCaptionElement;
+		"col": ddeHTMLTableColElement;
+		"colgroup": ddeHTMLTableColElement;
+		"data": ddeHTMLDataElement;
+		"datalist": ddeHTMLDataListElement;
+		"del": ddeHTMLModElement;
+		"details": ddeHTMLDetailsElement;
+		"dialog": ddeHTMLDialogElement;
+		"div": ddeHTMLDivElement;
+		"dl": ddeHTMLDListElement;
+		"embed": ddeHTMLEmbedElement;
+		"fieldset": ddeHTMLFieldSetElement;
+		"form": ddeHTMLFormElement;
+		"h1": ddeHTMLHeadingElement;
+		"h2": ddeHTMLHeadingElement;
+		"h3": ddeHTMLHeadingElement;
+		"h4": ddeHTMLHeadingElement;
+		"h5": ddeHTMLHeadingElement;
+		"h6": ddeHTMLHeadingElement;
+		"head": ddeHTMLHeadElement;
+		"hr": ddeHTMLHRElement;
+		"html": ddeHTMLHtmlElement;
+		"iframe": ddeHTMLIFrameElement;
+		"img": ddeHTMLImageElement;
+		"input": ddeHTMLInputElement;
+		"ins": ddeHTMLModElement;
+		"label": ddeHTMLLabelElement;
+		"legend": ddeHTMLLegendElement;
+		"li": ddeHTMLLIElement;
+		"link": ddeHTMLLinkElement;
+		"map": ddeHTMLMapElement;
+		"menu": ddeHTMLMenuElement;
+		"meta": ddeHTMLMetaElement;
+		"meter": ddeHTMLMeterElement;
+		"object": ddeHTMLObjectElement;
+		"ol": ddeHTMLOListElement;
+		"optgroup": ddeHTMLOptGroupElement;
+		"option": ddeHTMLOptionElement;
+		"output": ddeHTMLOutputElement;
+		"p": ddeHTMLParagraphElement;
+		"picture": ddeHTMLPictureElement;
+		"pre": ddeHTMLPreElement;
+		"progress": ddeHTMLProgressElement;
+		"q": ddeHTMLQuoteElement;
+		"script": ddeHTMLScriptElement;
+		"select": ddeHTMLSelectElement;
+		"slot": ddeHTMLSlotElement;
+		"source": ddeHTMLSourceElement;
+		"span": ddeHTMLSpanElement;
+		"style": ddeHTMLStyleElement;
+		"table": ddeHTMLTableElement;
+		"tbody": ddeHTMLTableSectionElement;
+		"td": ddeHTMLTableCellElement;
+		"template": ddeHTMLTemplateElement;
+		"textarea": ddeHTMLTextAreaElement;
+		"tfoot": ddeHTMLTableSectionElement;
+		"th": ddeHTMLTableCellElement;
+		"thead": ddeHTMLTableSectionElement;
+		"time": ddeHTMLTimeElement;
+		"title": ddeHTMLTitleElement;
+		"tr": ddeHTMLTableRowElement;
+		"track": ddeHTMLTrackElement;
+		"ul": ddeHTMLUListElement;
+		"video": ddeHTMLVideoElement;
+	}
+	interface ddeSVGElementTagNameMap {
+		"a": ddeSVGAElement;
+		"animate": ddeSVGAnimateElement;
+		"animateMotion": ddeSVGAnimateMotionElement;
+		"animateTransform": ddeSVGAnimateTransformElement;
+		"circle": ddeSVGCircleElement;
+		"clipPath": ddeSVGClipPathElement;
+		"defs": ddeSVGDefsElement;
+		"desc": ddeSVGDescElement;
+		"ellipse": ddeSVGEllipseElement;
+		"feBlend": ddeSVGFEBlendElement;
+		"feColorMatrix": ddeSVGFEColorMatrixElement;
+		"feComponentTransfer": ddeSVGFEComponentTransferElement;
+		"feComposite": ddeSVGFECompositeElement;
+		"feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
+		"feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
+		"feDisplacementMap": ddeSVGFEDisplacementMapElement;
+		"feDistantLight": ddeSVGFEDistantLightElement;
+		"feDropShadow": ddeSVGFEDropShadowElement;
+		"feFlood": ddeSVGFEFloodElement;
+		"feFuncA": ddeSVGFEFuncAElement;
+		"feFuncB": ddeSVGFEFuncBElement;
+		"feFuncG": ddeSVGFEFuncGElement;
+		"feFuncR": ddeSVGFEFuncRElement;
+		"feGaussianBlur": ddeSVGFEGaussianBlurElement;
+		"feImage": ddeSVGFEImageElement;
+		"feMerge": ddeSVGFEMergeElement;
+		"feMergeNode": ddeSVGFEMergeNodeElement;
+		"feMorphology": ddeSVGFEMorphologyElement;
+		"feOffset": ddeSVGFEOffsetElement;
+		"fePointLight": ddeSVGFEPointLightElement;
+		"feSpecularLighting": ddeSVGFESpecularLightingElement;
+		"feSpotLight": ddeSVGFESpotLightElement;
+		"feTile": ddeSVGFETileElement;
+		"feTurbulence": ddeSVGFETurbulenceElement;
+		"filter": ddeSVGFilterElement;
+		"foreignObject": ddeSVGForeignObjectElement;
+		"g": ddeSVGGElement;
+		"image": ddeSVGImageElement;
+		"line": ddeSVGLineElement;
+		"linearGradient": ddeSVGLinearGradientElement;
+		"marker": ddeSVGMarkerElement;
+		"mask": ddeSVGMaskElement;
+		"metadata": ddeSVGMetadataElement;
+		"mpath": ddeSVGMPathElement;
+		"path": ddeSVGPathElement;
+		"pattern": ddeSVGPatternElement;
+		"polygon": ddeSVGPolygonElement;
+		"polyline": ddeSVGPolylineElement;
+		"radialGradient": ddeSVGRadialGradientElement;
+		"rect": ddeSVGRectElement;
+		"script": ddeSVGScriptElement;
+		"set": ddeSVGSetElement;
+		"stop": ddeSVGStopElement;
+		"style": ddeSVGStyleElement;
+		"svg": ddeSVGSVGElement;
+		"switch": ddeSVGSwitchElement;
+		"symbol": ddeSVGSymbolElement;
+		"text": ddeSVGTextElement;
+		"textPath": ddeSVGTextPathElement;
+		"title": ddeSVGTitleElement;
+		"tspan": ddeSVGTSpanElement;
+		"use": ddeSVGUseElement;
+		"view": ddeSVGViewElement;
+	}
+}
+// editorconfig-checker-disable
+export interface ddeHTMLAnchorElement extends HTMLAnchorElement {
+	append: ddeAppend<ddeHTMLAnchorElement>;
+}
+export interface ddeHTMLAreaElement extends HTMLAreaElement {
+	append: ddeAppend<ddeHTMLAreaElement>;
+}
+export interface ddeHTMLAudioElement extends HTMLAudioElement {
+	append: ddeAppend<ddeHTMLAudioElement>;
+}
+export interface ddeHTMLBaseElement extends HTMLBaseElement {
+	append: ddeAppend<ddeHTMLBaseElement>;
+}
+export interface ddeHTMLQuoteElement extends HTMLQuoteElement {
+	append: ddeAppend<ddeHTMLQuoteElement>;
+}
+export interface ddeHTMLBodyElement extends HTMLBodyElement {
+	append: ddeAppend<ddeHTMLBodyElement>;
+}
+export interface ddeHTMLBRElement extends HTMLBRElement {
+	append: ddeAppend<ddeHTMLBRElement>;
+}
+export interface ddeHTMLButtonElement extends HTMLButtonElement {
+	append: ddeAppend<ddeHTMLButtonElement>;
+}
+export interface ddeHTMLCanvasElement extends HTMLCanvasElement {
+	append: ddeAppend<ddeHTMLCanvasElement>;
+}
+export interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement {
+	append: ddeAppend<ddeHTMLTableCaptionElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLDataElement extends HTMLDataElement {
+	append: ddeAppend<ddeHTMLDataElement>;
+}
+export interface ddeHTMLDataListElement extends HTMLDataListElement {
+	append: ddeAppend<ddeHTMLDataListElement>;
+}
+export interface ddeHTMLModElement extends HTMLModElement {
+	append: ddeAppend<ddeHTMLModElement>;
+}
+export interface ddeHTMLDetailsElement extends HTMLDetailsElement {
+	append: ddeAppend<ddeHTMLDetailsElement>;
+}
+export interface ddeHTMLDialogElement extends HTMLDialogElement {
+	append: ddeAppend<ddeHTMLDialogElement>;
+}
+export interface ddeHTMLDivElement extends HTMLDivElement {
+	append: ddeAppend<ddeHTMLDivElement>;
+}
+export interface ddeHTMLDListElement extends HTMLDListElement {
+	append: ddeAppend<ddeHTMLDListElement>;
+}
+export interface ddeHTMLEmbedElement extends HTMLEmbedElement {
+	append: ddeAppend<ddeHTMLEmbedElement>;
+}
+export interface ddeHTMLFieldSetElement extends HTMLFieldSetElement {
+	append: ddeAppend<ddeHTMLFieldSetElement>;
+}
+export interface ddeHTMLFormElement extends HTMLFormElement {
+	append: ddeAppend<ddeHTMLFormElement>;
+}
+export interface ddeHTMLHeadingElement extends HTMLHeadingElement {
+	append: ddeAppend<ddeHTMLHeadingElement>;
+}
+export interface ddeHTMLHeadElement extends HTMLHeadElement {
+	append: ddeAppend<ddeHTMLHeadElement>;
+}
+export interface ddeHTMLHRElement extends HTMLHRElement {
+	append: ddeAppend<ddeHTMLHRElement>;
+}
+export interface ddeHTMLHtmlElement extends HTMLHtmlElement {
+	append: ddeAppend<ddeHTMLHtmlElement>;
+}
+export interface ddeHTMLIFrameElement extends HTMLIFrameElement {
+	append: ddeAppend<ddeHTMLIFrameElement>;
+}
+export interface ddeHTMLImageElement extends HTMLImageElement {
+	append: ddeAppend<ddeHTMLImageElement>;
+}
+export interface ddeHTMLInputElement extends HTMLInputElement {
+	append: ddeAppend<ddeHTMLInputElement>;
+}
+export interface ddeHTMLLabelElement extends HTMLLabelElement {
+	append: ddeAppend<ddeHTMLLabelElement>;
+}
+export interface ddeHTMLLegendElement extends HTMLLegendElement {
+	append: ddeAppend<ddeHTMLLegendElement>;
+}
+export interface ddeHTMLLIElement extends HTMLLIElement {
+	append: ddeAppend<ddeHTMLLIElement>;
+}
+export interface ddeHTMLLinkElement extends HTMLLinkElement {
+	append: ddeAppend<ddeHTMLLinkElement>;
+}
+export interface ddeHTMLMapElement extends HTMLMapElement {
+	append: ddeAppend<ddeHTMLMapElement>;
+}
+export interface ddeHTMLMenuElement extends HTMLMenuElement {
+	append: ddeAppend<ddeHTMLMenuElement>;
+}
+export interface ddeHTMLMetaElement extends HTMLMetaElement {
+	append: ddeAppend<ddeHTMLMetaElement>;
+}
+export interface ddeHTMLMeterElement extends HTMLMeterElement {
+	append: ddeAppend<ddeHTMLMeterElement>;
+}
+export interface ddeHTMLObjectElement extends HTMLObjectElement {
+	append: ddeAppend<ddeHTMLObjectElement>;
+}
+export interface ddeHTMLOListElement extends HTMLOListElement {
+	append: ddeAppend<ddeHTMLOListElement>;
+}
+export interface ddeHTMLOptGroupElement extends HTMLOptGroupElement {
+	append: ddeAppend<ddeHTMLOptGroupElement>;
+}
+export interface ddeHTMLOptionElement extends HTMLOptionElement {
+	append: ddeAppend<ddeHTMLOptionElement>;
+}
+export interface ddeHTMLOutputElement extends HTMLOutputElement {
+	append: ddeAppend<ddeHTMLOutputElement>;
+}
+export interface ddeHTMLParagraphElement extends HTMLParagraphElement {
+	append: ddeAppend<ddeHTMLParagraphElement>;
+}
+export interface ddeHTMLPictureElement extends HTMLPictureElement {
+	append: ddeAppend<ddeHTMLPictureElement>;
+}
+export interface ddeHTMLPreElement extends HTMLPreElement {
+	append: ddeAppend<ddeHTMLPreElement>;
+}
+export interface ddeHTMLProgressElement extends HTMLProgressElement {
+	append: ddeAppend<ddeHTMLProgressElement>;
+}
+export interface ddeHTMLScriptElement extends HTMLScriptElement {
+	append: ddeAppend<ddeHTMLScriptElement>;
+}
+export interface ddeHTMLSelectElement extends HTMLSelectElement {
+	append: ddeAppend<ddeHTMLSelectElement>;
+}
+export interface ddeHTMLSlotElement extends HTMLSlotElement {
+	append: ddeAppend<ddeHTMLSlotElement>;
+}
+export interface ddeHTMLSourceElement extends HTMLSourceElement {
+	append: ddeAppend<ddeHTMLSourceElement>;
+}
+export interface ddeHTMLSpanElement extends HTMLSpanElement {
+	append: ddeAppend<ddeHTMLSpanElement>;
+}
+export interface ddeHTMLStyleElement extends HTMLStyleElement {
+	append: ddeAppend<ddeHTMLStyleElement>;
+}
+export interface ddeHTMLTableElement extends HTMLTableElement {
+	append: ddeAppend<ddeHTMLTableElement>;
+}
+export interface ddeHTMLTableSectionElement extends HTMLTableSectionElement {
+	append: ddeAppend<ddeHTMLTableSectionElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTemplateElement extends HTMLTemplateElement {
+	append: ddeAppend<ddeHTMLTemplateElement>;
+}
+export interface ddeHTMLTextAreaElement extends HTMLTextAreaElement {
+	append: ddeAppend<ddeHTMLTextAreaElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTimeElement extends HTMLTimeElement {
+	append: ddeAppend<ddeHTMLTimeElement>;
+}
+export interface ddeHTMLTitleElement extends HTMLTitleElement {
+	append: ddeAppend<ddeHTMLTitleElement>;
+}
+export interface ddeHTMLTableRowElement extends HTMLTableRowElement {
+	append: ddeAppend<ddeHTMLTableRowElement>;
+}
+export interface ddeHTMLTrackElement extends HTMLTrackElement {
+	append: ddeAppend<ddeHTMLTrackElement>;
+}
+export interface ddeHTMLUListElement extends HTMLUListElement {
+	append: ddeAppend<ddeHTMLUListElement>;
+}
+export interface ddeHTMLVideoElement extends HTMLVideoElement {
+	append: ddeAppend<ddeHTMLVideoElement>;
+}
+export interface ddeSVGAElement extends SVGAElement {
+	append: ddeAppend<ddeSVGAElement>;
+}
+export interface ddeSVGAnimateElement extends SVGAnimateElement {
+	append: ddeAppend<ddeSVGAnimateElement>;
+}
+export interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement {
+	append: ddeAppend<ddeSVGAnimateMotionElement>;
+}
+export interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement {
+	append: ddeAppend<ddeSVGAnimateTransformElement>;
+}
+export interface ddeSVGCircleElement extends SVGCircleElement {
+	append: ddeAppend<ddeSVGCircleElement>;
+}
+export interface ddeSVGClipPathElement extends SVGClipPathElement {
+	append: ddeAppend<ddeSVGClipPathElement>;
+}
+export interface ddeSVGDefsElement extends SVGDefsElement {
+	append: ddeAppend<ddeSVGDefsElement>;
+}
+export interface ddeSVGDescElement extends SVGDescElement {
+	append: ddeAppend<ddeSVGDescElement>;
+}
+export interface ddeSVGEllipseElement extends SVGEllipseElement {
+	append: ddeAppend<ddeSVGEllipseElement>;
+}
+export interface ddeSVGFEBlendElement extends SVGFEBlendElement {
+	append: ddeAppend<ddeSVGFEBlendElement>;
+}
+export interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement {
+	append: ddeAppend<ddeSVGFEColorMatrixElement>;
+}
+export interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement {
+	append: ddeAppend<ddeSVGFEComponentTransferElement>;
+}
+export interface ddeSVGFECompositeElement extends SVGFECompositeElement {
+	append: ddeAppend<ddeSVGFECompositeElement>;
+}
+export interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement {
+	append: ddeAppend<ddeSVGFEConvolveMatrixElement>;
+}
+export interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement {
+	append: ddeAppend<ddeSVGFEDiffuseLightingElement>;
+}
+export interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement {
+	append: ddeAppend<ddeSVGFEDisplacementMapElement>;
+}
+export interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement {
+	append: ddeAppend<ddeSVGFEDistantLightElement>;
+}
+export interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement {
+	append: ddeAppend<ddeSVGFEDropShadowElement>;
+}
+export interface ddeSVGFEFloodElement extends SVGFEFloodElement {
+	append: ddeAppend<ddeSVGFEFloodElement>;
+}
+export interface ddeSVGFEFuncAElement extends SVGFEFuncAElement {
+	append: ddeAppend<ddeSVGFEFuncAElement>;
+}
+export interface ddeSVGFEFuncBElement extends SVGFEFuncBElement {
+	append: ddeAppend<ddeSVGFEFuncBElement>;
+}
+export interface ddeSVGFEFuncGElement extends SVGFEFuncGElement {
+	append: ddeAppend<ddeSVGFEFuncGElement>;
+}
+export interface ddeSVGFEFuncRElement extends SVGFEFuncRElement {
+	append: ddeAppend<ddeSVGFEFuncRElement>;
+}
+export interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement {
+	append: ddeAppend<ddeSVGFEGaussianBlurElement>;
+}
+export interface ddeSVGFEImageElement extends SVGFEImageElement {
+	append: ddeAppend<ddeSVGFEImageElement>;
+}
+export interface ddeSVGFEMergeElement extends SVGFEMergeElement {
+	append: ddeAppend<ddeSVGFEMergeElement>;
+}
+export interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement {
+	append: ddeAppend<ddeSVGFEMergeNodeElement>;
+}
+export interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement {
+	append: ddeAppend<ddeSVGFEMorphologyElement>;
+}
+export interface ddeSVGFEOffsetElement extends SVGFEOffsetElement {
+	append: ddeAppend<ddeSVGFEOffsetElement>;
+}
+export interface ddeSVGFEPointLightElement extends SVGFEPointLightElement {
+	append: ddeAppend<ddeSVGFEPointLightElement>;
+}
+export interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement {
+	append: ddeAppend<ddeSVGFESpecularLightingElement>;
+}
+export interface ddeSVGFESpotLightElement extends SVGFESpotLightElement {
+	append: ddeAppend<ddeSVGFESpotLightElement>;
+}
+export interface ddeSVGFETileElement extends SVGFETileElement {
+	append: ddeAppend<ddeSVGFETileElement>;
+}
+export interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement {
+	append: ddeAppend<ddeSVGFETurbulenceElement>;
+}
+export interface ddeSVGFilterElement extends SVGFilterElement {
+	append: ddeAppend<ddeSVGFilterElement>;
+}
+export interface ddeSVGForeignObjectElement extends SVGForeignObjectElement {
+	append: ddeAppend<ddeSVGForeignObjectElement>;
+}
+export interface ddeSVGGElement extends SVGGElement {
+	append: ddeAppend<ddeSVGGElement>;
+}
+export interface ddeSVGImageElement extends SVGImageElement {
+	append: ddeAppend<ddeSVGImageElement>;
+}
+export interface ddeSVGLineElement extends SVGLineElement {
+	append: ddeAppend<ddeSVGLineElement>;
+}
+export interface ddeSVGLinearGradientElement extends SVGLinearGradientElement {
+	append: ddeAppend<ddeSVGLinearGradientElement>;
+}
+export interface ddeSVGMarkerElement extends SVGMarkerElement {
+	append: ddeAppend<ddeSVGMarkerElement>;
+}
+export interface ddeSVGMaskElement extends SVGMaskElement {
+	append: ddeAppend<ddeSVGMaskElement>;
+}
+export interface ddeSVGMetadataElement extends SVGMetadataElement {
+	append: ddeAppend<ddeSVGMetadataElement>;
+}
+export interface ddeSVGMPathElement extends SVGMPathElement {
+	append: ddeAppend<ddeSVGMPathElement>;
+}
+export interface ddeSVGPathElement extends SVGPathElement {
+	append: ddeAppend<ddeSVGPathElement>;
+}
+export interface ddeSVGPatternElement extends SVGPatternElement {
+	append: ddeAppend<ddeSVGPatternElement>;
+}
+export interface ddeSVGPolygonElement extends SVGPolygonElement {
+	append: ddeAppend<ddeSVGPolygonElement>;
+}
+export interface ddeSVGPolylineElement extends SVGPolylineElement {
+	append: ddeAppend<ddeSVGPolylineElement>;
+}
+export interface ddeSVGRadialGradientElement extends SVGRadialGradientElement {
+	append: ddeAppend<ddeSVGRadialGradientElement>;
+}
+export interface ddeSVGRectElement extends SVGRectElement {
+	append: ddeAppend<ddeSVGRectElement>;
+}
+export interface ddeSVGScriptElement extends SVGScriptElement {
+	append: ddeAppend<ddeSVGScriptElement>;
+}
+export interface ddeSVGSetElement extends SVGSetElement {
+	append: ddeAppend<ddeSVGSetElement>;
+}
+export interface ddeSVGStopElement extends SVGStopElement {
+	append: ddeAppend<ddeSVGStopElement>;
+}
+export interface ddeSVGStyleElement extends SVGStyleElement {
+	append: ddeAppend<ddeSVGStyleElement>;
+}
+export interface ddeSVGSVGElement extends SVGSVGElement {
+	append: ddeAppend<ddeSVGSVGElement>;
+}
+export interface ddeSVGSwitchElement extends SVGSwitchElement {
+	append: ddeAppend<ddeSVGSwitchElement>;
+}
+export interface ddeSVGSymbolElement extends SVGSymbolElement {
+	append: ddeAppend<ddeSVGSymbolElement>;
+}
+export interface ddeSVGTextElement extends SVGTextElement {
+	append: ddeAppend<ddeSVGTextElement>;
+}
+export interface ddeSVGTextPathElement extends SVGTextPathElement {
+	append: ddeAppend<ddeSVGTextPathElement>;
+}
+export interface ddeSVGTitleElement extends SVGTitleElement {
+	append: ddeAppend<ddeSVGTitleElement>;
+}
+export interface ddeSVGTSpanElement extends SVGTSpanElement {
+	append: ddeAppend<ddeSVGTSpanElement>;
+}
+export interface ddeSVGUseElement extends SVGUseElement {
+	append: ddeAppend<ddeSVGUseElement>;
+}
+export interface ddeSVGViewElement extends SVGViewElement {
+	append: ddeAppend<ddeSVGViewElement>;
+}
+
+export {
+	dispatchEvent$1 as dispatchEvent,
+	el as createElement,
+	elNS as createElementNS,
+};
+
+export as namespace dde;
+
+export {};
diff --git a/dist/dde-with-signals.min.js b/dist/dde-with-signals.min.js
new file mode 100644
index 0000000..57ae8a7
--- /dev/null
+++ b/dist/dde-with-signals.min.js
@@ -0,0 +1,4 @@
+var dde=(()=>{var G=Object.defineProperty;var wt=Object.getOwnPropertyDescriptor;var At=Object.getOwnPropertyNames;var yt=Object.prototype.hasOwnProperty;var Ct=(t,e)=>{for(var n in e)G(t,n,{get:e[n],enumerable:!0})},Ot=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of At(e))!yt.call(t,o)&&o!==n&&G(t,o,{get:()=>e[o],enumerable:!(r=wt(e,o))||r.enumerable});return t};var Dt=t=>Ot(G({},"__esModule",{value:!0}),t);var Vt={};Ct(Vt,{S:()=>g,assign:()=>F,assignAttribute:()=>Q,chainableAppend:()=>ft,classListDeclarative:()=>dt,createElement:()=>N,createElementNS:()=>Mt,customElementRender:()=>Wt,customElementWithDDE:()=>ht,dispatchEvent:()=>Ft,el:()=>N,elNS:()=>Mt,elementAttribute:()=>lt,isSignal:()=>I,lifecyclesToEvents:()=>ht,observedAttributes:()=>gt,on:()=>E,queue:()=>kt,registerReactivity:()=>z,scope:()=>b,signal:()=>g,simulateSlots:()=>Nt});var V=(...t)=>Object.prototype.hasOwnProperty.call(...t);function O(t){return typeof t>"u"}function ot(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function w(t,e){return t instanceof e}function ct(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function A(t=null,e={}){return Object.create(t,e)}function x(...t){return Object.assign(...t)}function $(t,e){if(!t||!w(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function U(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[Rt(o)]=e(t,o),r},{})}function Rt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var j=class extends Error{constructor(){super();let[e,...n]=this.stack.split(`
+`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4),o=r.includes("src/helpers.js")?"src/":r;this.stack=n.find(c=>!c.includes(o))||e}get compact(){let{stack:e}=this;return e.slice(0,e.indexOf("@")+1)+"\u2026"+e.slice(e.lastIndexOf("/"))}};var q={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function z(t,e=!0){return e?x(q,t):(Object.setPrototypeOf(t,q),t)}function H(t){return ct(t,q)&&t!==q?t:q}var d={setDeleteAttr:Lt,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function Lt(t,e,n){if(Reflect.set(t,e,n),!!O(n)){if(Reflect.deleteProperty(t,e),w(t,d.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var D="__dde_lifecyclesToEvents",y="dde:connected",R="dde:disconnected",W="dde:attributeChanged";function kt(t){return d.q(t)}var C=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],b={get current(){return C[C.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...C]},push(t={}){return C.push(x({},this.current,{prevent:!1},t))},pushRoot(){return C.push(C[0])},pop(){if(C.length!==1)return C.pop()}};function st(...t){return this.appendOriginal(...t),this}function ft(t){return t.append===st||(t.appendOriginal=t.append,t.append=st),t}var B;function N(t,e,...n){let r=H(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let i=(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(m=>m(s)),void 0):s;b.push({scope:t,host:i}),c=t(e||void 0);let l=w(c,d.F);if(c.nodeName==="#comment")break;let _=N.mark({type:"component",name:t.name,host:l?"this":"parentElement"});c.prepend(_),l&&(s=_);break}case t==="#text":c=F.call(this,d.D.createTextNode(""),e);break;case(t==="<>"||!t):c=F.call(this,d.D.createDocumentFragment(),e);break;case!!B:c=F.call(this,d.D.createElementNS(B,t),e);break;case!c:c=F.call(this,d.D.createElement(t),e)}return ft(c),s||(s=c),n.forEach(i=>i(s)),o&&b.pop(),o=2,c}N.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);return e&&(r.end=d.D.createComment("</dde:mark>")),r};function Mt(t){let e=this;return function(...r){B=t;let o=N.call(e,...r);return B=void 0,o}}function Nt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,s,i){if(i[0]===e)return c.apply(t,i);for(let l of i){let _=(l.slot||"")+n;try{lt(l,"remove","slot")}catch{}let h=o[_];if(!h)return;h.name.startsWith(r)||(h.childNodes.forEach(m=>m.remove()),h.name=r+_),h.append(l)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var J=new WeakMap,{setDeleteAttr:it}=d;function F(t,...e){if(!e.length)return t;J.set(t,at(t,this));for(let[n,r]of Object.entries(x({},...e)))Q.call(this,t,n,r);return J.delete(t),t}function Q(t,e,n){let{setRemoveAttr:r,s:o}=at(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(i,l)=>Q.call(c,t,i,l));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return ut(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return it(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return K(o,e,t,n,ut.bind(null,t[e]));case"ariaset":return K(o,e,t,n,(i,l)=>r("aria-"+i,l));case"classList":return dt.call(c,t,n)}return Tt(t,e)?it(t,e,n):r(e,n)}function at(t,e){if(J.has(t))return J.get(t);let r=(w(t,d.S)?jt:Pt).bind(null,t,"Attribute"),o=H(e);return{setRemoveAttr:r,s:o}}function dt(t,e){let n=H(this);return K(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function lt(t,e,n,r){return w(t,d.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function Tt(t,e){if(!(e in t))return!1;let n=pt(t,e);return!O(n.set)}function pt(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||pt(t,e)}function K(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([i,l]){i&&(i=new c(i),i.target=e,l=t.processReactiveAttribute(n,i,l,o),o(i,l))})}function Pt(t,e,n,r){return t[(O(r)?"remove":"set")+e](n,r)}function jt(t,e,n,r,o=null){return t[(O(r)?"remove":"set")+e+"NS"](o,n,r)}function ut(t,e,n){if(Reflect.set(t,e,n),!!O(n))return Reflect.deleteProperty(t,e)}var L=d.M?qt():new Proxy({},{get(){return()=>{}}});function qt(){let t=new Map,e=!1,n=u=>function(a){for(let f of a)if(f.type==="childList"){if(h(f.addedNodes,!0)){u();continue}m(f.removedNodes,!0)&&u()}},r=new d.M(n(i));return{observe(u){let a=new d.M(n(()=>{}));return a.observe(u,{childList:!0,subtree:!0}),()=>a.disconnect()},onConnected(u,a){s();let f=c(u);f.connected.has(a)||(f.connected.add(a),f.length_c+=1)},offConnected(u,a){if(!t.has(u))return;let f=t.get(u);f.connected.has(a)&&(f.connected.delete(a),f.length_c-=1,o(u,f))},onDisconnected(u,a){s();let f=c(u);f.disconnected.has(a)||(f.disconnected.add(a),f.length_d+=1)},offDisconnected(u,a){if(!t.has(u))return;let f=t.get(u);f.disconnected.delete(a),f.length_d-=1,o(u,f)}};function o(u,a){a.length_c||a.length_d||(t.delete(u),i())}function c(u){if(t.has(u))return t.get(u);let a={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(u,a),a}function s(){e||(e=!0,r.observe(d.D.body,{childList:!0,subtree:!0}))}function i(){!e||t.size||(e=!1,r.disconnect())}function l(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function _(u){t.size>30&&await l();let a=[];if(!w(u,Node))return a;for(let f of t.keys())f===u||!w(f,Node)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let S of u){if(a&&_(S).then(h),!t.has(S))continue;let P=t.get(S);P.length_c&&(S.dispatchEvent(new Event(y)),P.connected=new WeakSet,P.length_c=0,P.length_d||t.delete(S),f=!0)}return f}function m(u,a){let f=!1;for(let S of u)a&&_(S).then(m),!(!t.has(S)||!t.get(S).length_d)&&((globalThis.queueMicrotask||setTimeout)(T(S)),f=!0);return f}function T(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(R)),t.delete(u))}}}function Wt(t,e,n=gt){let r=t.host||t;b.push({scope:r,host:(...s)=>s.length?s.forEach(i=>i(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[D];o||ht(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(y)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(R,L.observe(t),{once:!0}),b.pop(),t.append(c)}function ht(t){return X(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(y))}),X(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(R)))}),X(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(W,{detail:[o,c]})),e.apply(n,r)}),t.prototype[D]=!0,t}function X(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function gt(t){return U(t,(e,n)=>e.getAttribute(n))}function Ft(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,x({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function E(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var bt=t=>x({},typeof t=="object"?t:null,{once:!0});E.connected=function(t,e){return e=bt(e),function(r){return r.addEventListener(y,t,e),r[D]?r:r.isConnected?(r.dispatchEvent(new Event(y)),r):($(e.signal,()=>L.offConnected(r,t))&&L.onConnected(r,t),r)}};E.disconnected=function(t,e){return e=bt(e),function(r){return r.addEventListener(R,t,e),r[D]||$(e.signal,()=>L.offDisconnected(r,t))&&L.onDisconnected(r,t),r}};var Y=new WeakMap;E.disconnectedAsAbort=function(t){if(Y.has(t))return Y.get(t);let e=new AbortController;return Y.set(t,e),t(E.disconnected(()=>e.abort())),e.signal};var It=new WeakSet;E.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(W,t,e),r[D]||It.has(r)||!d.M)return r;let o=new d.M(function(s){for(let{attributeName:i,target:l}of s)l.dispatchEvent(new CustomEvent(W,{detail:[i,l.getAttribute(i)]}))});return $(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}};var p="__dde_signal",tt=(()=>{let t=new Set,e=!1;function n(){e=!1;let r=t;t=new Set;for(let o of r){let c=o[p];c&&c.listeners.forEach(s=>s(c.value))}}return function(r){t.add(r),!e&&(e=!0,queueMicrotask(n))}})();var nt=A(null,{get:{value(){return mt(this)}},set:{value(...t){return St(this,...t)}},toJSON:{value(){return mt(this)}},valueOf:{value(){return this[p]&&this[p].value}}}),$t=A(nt,{set:{value(){}}});function I(t){return t&&t[p]}var Z=[],v=new WeakMap;function g(t,e){if(typeof t!="function")return vt(!1,t,e);if(I(t))return t;let n=vt(!0);function r(){let[o,...c]=v.get(r);if(v.set(r,new Set([o])),Z.push(r),St(n,t()),Z.pop(),!c.length)return;let s=v.get(r);for(let i of c)s.has(i)||M(i,r)}return v.set(n[p],r),v.set(r,new Set([n])),r(),n}g.action=function(t,e,...n){let r=t[p];if(!r)return;let{actions:o}=r;if(!o||!V(o,e))throw new Error(`Action "${e}" not defined. See ${p}.actions.`);if(o[e].apply(r,n),r.skip)return delete r.skip;tt(t)};g.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));rt(e,n),o&&o.addEventListener("abort",()=>M(e,n))}};g.symbols={onclear:Symbol.for("Signal.onclear")};g.clear=function(...t){for(let n of t){let r=n[p];r&&(delete n.toJSON,r.onclear.forEach(o=>o.call(r)),e(n,r),delete n[p])}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!v.has(o))return;let c=v.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),v.delete(o))})}};var k="__dde_reactive";function Ut(t=A()){return(e,n)=>V(t,e)?t[e]:t[e]=n()}g.el=function(t,e){let n=N.mark({type:"reactive",source:new j().compact},!0),r=n.end,o=d.D.createDocumentFragment();o.append(n,r);let{current:c}=b,s=A(),i=l=>{if(!n.parentNode||!r.parentNode)return M(t,i);let _=Ut(s);s=A(),b.push(c);let h=e(l,function(a,f){return s[a]=_(a,f)});b.pop(),Array.isArray(h)||(h=[h]);let m=document.createComment("");h.push(m),n.after(...h);let T;for(;(T=m.nextSibling)&&T!==r;)T.remove();m.remove(),n.isConnected&&zt(c.host())};return rt(t,i),Et(t,i,n,e),i(t.get()),c.host(E.disconnected(()=>s={})),o};function zt(t){!t||!t[k]||(requestIdleCallback||setTimeout)(function(){t[k]=t[k].filter(([e,n])=>n.isConnected?!0:(M(...e),!1))})}var Ht={_set(t){this.value=t}};function Bt(t){return function(e,n){let r=A(nt,{set:{value(...c){return e.setAttribute(n,...c)}}}),o=_t(r,e.getAttribute(n),Ht);return t[n]=o,o}}var et="__dde_attributes";g.observedAttributes=function(t){let e=t[et]={},n=U(t,Bt(e));return E.attributeChanged(function({detail:o}){/*! This maps attributes to signals (`S.observedAttributes`).
+	Investigate `__dde_attributes` key of the element. */let[c,s]=o,i=this[et][c];if(i)return g.action(i,"_set",s)})(t),E.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`).
+	Investigate `__dde_attributes` key of the element. */g.clear(...Object.values(this[et]))})(t),n};var xt={isSignal:I,processReactiveAttribute(t,e,n,r){if(!I(n))return n;let o=c=>{if(!t.isConnected)return M(n,o);r(e,c)};return rt(n,o),Et(n,o,t,e),n.get()}};function Et(t,e,...n){let{current:r}=b;r.host(function(o){if(o[k])return o[k].push([[t,e],...n]);o[k]=[],!r.prevent&&E.disconnected(()=>o[k].forEach(([[c,s]])=>M(c,s,c[p]&&c[p].host&&c[p].host()===o)))(o)})}var Jt=new FinalizationRegistry(function(t){g.clear({[p]:t})});function vt(t,e,n){let r=A(t?$t:nt),o=_t(r,e,n,t);return Jt.register(o,o[p]),o}var Zt=x(A(),{stopPropagation(){this.skip=!0}});function _t(t,e,n,r=!1){let o=[];ot(n)!=="[object Object]"&&(n={});let{onclear:c}=g.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=b;return Reflect.defineProperty(t,p,{value:x(A(Zt),{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new j().stack,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function Gt(){return Z[Z.length-1]}function mt(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=Gt();return r&&n.add(r),v.has(r)&&v.get(r).add(t),e}function St(t,e,n){let r=t[p];if(!(!r||!n&&r.value===e))return r.value=e,tt(t),e}function rt(t,e){if(t[p])return t[p].listeners.add(e)}function M(t,e,n){let r=t[p];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;g.clear(t);let s=v.get(r);if(!s)return c;let i=v.get(s);if(!i)return c;for(let l of i)M(l,s,!0);return c}z(xt);return Dt(Vt);})();
diff --git a/dist/dde.d.ts b/dist/dde.d.ts
new file mode 100644
index 0000000..97d43d5
--- /dev/null
+++ b/dist/dde.d.ts
@@ -0,0 +1,784 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export interface Signal<V, A> {
+	/** The current value of the signal */
+	get(): V;
+	/** Set new value of the signal */
+	set(value: V): V;
+	toJSON(): V;
+	valueOf(): V;
+}
+export type Action<V> = (this: {
+	value: V;
+	stopPropagation(): void;
+}, ...a: any[]) => typeof signal._ | void;
+//type SymbolSignal= Symbol;
+export type SymbolOnclear = symbol;
+export type Actions<V> = Record<string | SymbolOnclear, Action<V>>;
+export type OnListenerOptions = Pick<AddEventListenerOptions, "signal"> & {
+	first_time?: boolean;
+};
+export interface signal {
+	_: Symbol;
+	/**
+	 * Computations signal. This creates a signal which is computed from other signals.
+	 * */
+	<V extends () => any>(computation: V): Signal<ReturnType<V>, {}>;
+	/**
+	 * Simple example:
+	 * ```js
+	 * const hello= S("Hello Signal");
+	 * ```
+	 * …simple todo signal:
+	 * ```js
+	 * const todos= S([], {
+	 * 	add(v){ this.value.push(S(v)); },
+	 * 	remove(i){ this.value.splice(i, 1); },
+	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
+	 * });
+	 * ```
+	 * …computed signal:
+	 * ```js
+	 * const name= S("Jan");
+	 * const surname= S("Andrle");
+	 * const fullname= S(()=> name.get()+" "+surname.get());
+	 * ```
+	 * @param value Initial signal value. Or function computing value from other signals.
+	 * @param actions Use to define actions on the signal. Such as add item to the array.
+	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
+	 *		by `S.clear`.
+	 * */
+	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(signal: S, name: N, ...params: A[N] extends (...args: infer P) => any ? P : never): void;
+	clear(...signals: Signal<any, any>[]): void;
+	on<T>(signal: Signal<T, any>, onchange: (a: T) => void, options?: OnListenerOptions): void;
+	symbols: {
+		//signal: SymbolSignal;
+		onclear: SymbolOnclear;
+	};
+	/**
+	 * Reactive element, which is rendered based on the given signal.
+	 * ```js
+	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
+	 * S.el(listS, list=> list.map(li=> el("li", li)));
+	 * ```
+	 * */
+	el<S extends any>(signal: Signal<S, any>, el: (v: S) => Element | Element[] | DocumentFragment): DocumentFragment;
+	observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
+}
+declare const signal: signal;
+declare global {
+	type ddeSignal<T, A = {}> = Signal<T, A>;
+	type ddeAction<V> = Action<V>;
+	type ddeActions<V> = Actions<V>;
+}
+export type CustomElementTagNameMap = {
+	"#text": Text;
+	"#comment": Comment;
+};
+export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
+declare global {
+	type ddeComponentAttributes = Record<any, any> | undefined;
+	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any;
+	type ddeString = string | Signal<string, {}>;
+	type ddeStringable = ddeString | number | Signal<number, {}>;
+}
+export type PascalCase = `${Capitalize<string>}${string}`;
+export type AttrsModified = {
+	/**
+	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
+	 */
+	style: Partial<CSSStyleDeclaration> | ddeString | Partial<{
+		[K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], {}>;
+	}>;
+	/**
+	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
+	 * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
+	 * for others.
+	 */
+	classList: Record<string, -1 | 0 | 1 | boolean | Signal<-1 | 0 | 1 | boolean, {}>>;
+	/**
+	 * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
+	 * Values are converted to string (see {@link DOMStringMap}).
+	 *
+	 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
+	 * */
+	dataset: Record<string, ddeStringable>;
+	/**
+	 * Sets `aria-*` simiraly to `dataset`
+	 * */
+	ariaset: Record<string, ddeString>;
+} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString> & Record<`.${string}`, any>;
+export type _fromElsInterfaces<EL extends SupportedElement> = Omit<EL, keyof AttrsModified>;
+export type IsReadonly<T, K extends keyof T> = T extends {
+	readonly [P in K]: T[K];
+} ? true : false;
+/**
+ * Just element attributtes
+ *
+ * In most cases, you can use native propertie such as
+ * [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on
+ * (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
+ *
+ * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
+ * @private
+ */
+export type ElementAttributes<T extends SupportedElement> = Partial<{
+	[K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] extends ((...p: any[]) => any) ? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>) => Signal<ReturnType<_fromElsInterfaces<T>[K]>, {}>) : (IsReadonly<_fromElsInterfaces<T>, K> extends false ? _fromElsInterfaces<T>[K] | Signal<_fromElsInterfaces<T>[K], {}> : ddeStringable);
+} & AttrsModified> & Record<string, any>;
+export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El;
+export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El;
+export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT];
+export type ExtendedHTMLElementTagNameMap = HTMLElementTagNameMap & CustomElementTagNameMap;
+export namespace el {
+	/**
+	 * Creates a marker comment for elements
+	 *
+	 * @param attrs - Marker attributes
+	 * @param [is_open=false] - Whether the marker is open-ended
+	 * @returns Comment node marker
+	 */
+	export function mark(attrs: {
+		type: "component" | "reactive" | "later";
+		name?: string;
+		host?: "this" | "parentElement";
+	}, is_open?: boolean): Comment;
+}
+export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>, ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<A extends {
+	textContent: ddeStringable;
+}, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>["textContent"], ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(tag_name: TAG, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable, ...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[]): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement;
+export function el(tag_name?: "<>"): ddeDocumentFragment;
+export function el(tag_name: string, attrs?: ElementAttributes<HTMLElement> | ddeStringable, ...addons: ddeElementAddon<HTMLElement>[]): ddeHTMLElement;
+export function elNS(namespace: "http://www.w3.org/2000/svg"): <TAG extends keyof SVGElementTagNameMap & string, EL extends (TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement)>(tag_name: TAG, attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable, ...addons: ddeElementAddon<NoInfer<EL>>[]) => TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement;
+export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG extends keyof MathMLElementTagNameMap & string, EL extends (TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement)>(tag_name: TAG, attrs?: ddeStringable | Partial<{
+	[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
+}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
+export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
+export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
+/** Simulate slots for ddeComponents */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
+/**
+ * Simulate slots in Custom Elements without using `shadowRoot`.
+ * @param el Custom Element root element
+ * @param body Body of the custom element
+ * */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void;
+export interface On {
+	/** Listens to the DOM event. See {@link Document.addEventListener} */
+	<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
+	<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+		string,
+		string
+	]>) => any, options?: AddEventListenerOptions): EE;
+}
+export const on: On;
+export type Scope = {
+	scope: Node | Function | Object;
+	host: ddeElementAddon<any>;
+	custom_element: false | HTMLElement;
+	prevent: boolean;
+};
+/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
+export const scope: {
+	current: Scope;
+	/** Stops all automatizations. E. g. signals used as attributes in current scope
+	 * registers removing these listeners (and clean signal if no other listeners are detected)
+	 * on `disconnected` event. */
+	preventDefault<T extends boolean>(prevent: T): T;
+	/**
+	 * This represents reference to the current host element — `scope.host()`.
+	 * It can be also used to register Addon(s) (functions to be called when component is initized)
+	 * — `scope.host(on.connected(console.log))`.
+	 * */
+	host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement;
+	state: Scope[];
+	/** Adds new child scope. All attributes are inherited by default. */
+	push(scope?: Partial<Scope>): ReturnType<Array<Scope>["push"]>;
+	/** Adds root scope as a child of the current scope. */
+	pushRoot(): ReturnType<Array<Scope>["push"]>;
+	/** Removes last/current child scope. */
+	pop(): ReturnType<Array<Scope>["pop"]>;
+};
+export function customElementRender<EL extends HTMLElement, P extends any = Record<string, string | Signal<string, {}>>>(target: ShadowRoot | EL, render: (props: P) => SupportedElement | DocumentFragment, props?: P | ((el: EL) => P)): EL;
+export function customElementWithDDE<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function lifecyclesToEvents<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function observedAttributes(custom_element: HTMLElement): Record<string, string>;
+/**
+ * This is used primarly for server side rendering. To be sure that all async operations
+ * are finished before the page is sent to the client.
+ * ```
+ *	// on component
+ *	function component(){
+ *		…
+ *		queue(fetch(...).then(...));
+ *	}
+ *
+ * // building the page
+ * async function build(){
+ *		const { component }= await import("./component.js");
+ *		document.body.append(el(component));
+ *		await queue();
+ *		retutn document.body.innerHTML;
+ *	}
+ * ```
+ * */
+export function queue(promise?: Promise<unknown>): Promise<unknown>;
+/* TypeScript MEH */
+declare global {
+	type ddeAppend<el> = (...nodes: (Node | string)[]) => el;
+	interface ddeDocumentFragment extends DocumentFragment {
+		append: ddeAppend<ddeDocumentFragment>;
+	}
+	interface ddeHTMLElement extends HTMLElement {
+		append: ddeAppend<ddeHTMLElement>;
+	}
+	interface ddeSVGElement extends SVGElement {
+		append: ddeAppend<ddeSVGElement>;
+	}
+	interface ddeMathMLElement extends MathMLElement {
+		append: ddeAppend<ddeMathMLElement>;
+	}
+	interface ddeHTMLElementTagNameMap {
+		"a": ddeHTMLAnchorElement;
+		"area": ddeHTMLAreaElement;
+		"audio": ddeHTMLAudioElement;
+		"base": ddeHTMLBaseElement;
+		"blockquote": ddeHTMLQuoteElement;
+		"body": ddeHTMLBodyElement;
+		"br": ddeHTMLBRElement;
+		"button": ddeHTMLButtonElement;
+		"canvas": ddeHTMLCanvasElement;
+		"caption": ddeHTMLTableCaptionElement;
+		"col": ddeHTMLTableColElement;
+		"colgroup": ddeHTMLTableColElement;
+		"data": ddeHTMLDataElement;
+		"datalist": ddeHTMLDataListElement;
+		"del": ddeHTMLModElement;
+		"details": ddeHTMLDetailsElement;
+		"dialog": ddeHTMLDialogElement;
+		"div": ddeHTMLDivElement;
+		"dl": ddeHTMLDListElement;
+		"embed": ddeHTMLEmbedElement;
+		"fieldset": ddeHTMLFieldSetElement;
+		"form": ddeHTMLFormElement;
+		"h1": ddeHTMLHeadingElement;
+		"h2": ddeHTMLHeadingElement;
+		"h3": ddeHTMLHeadingElement;
+		"h4": ddeHTMLHeadingElement;
+		"h5": ddeHTMLHeadingElement;
+		"h6": ddeHTMLHeadingElement;
+		"head": ddeHTMLHeadElement;
+		"hr": ddeHTMLHRElement;
+		"html": ddeHTMLHtmlElement;
+		"iframe": ddeHTMLIFrameElement;
+		"img": ddeHTMLImageElement;
+		"input": ddeHTMLInputElement;
+		"ins": ddeHTMLModElement;
+		"label": ddeHTMLLabelElement;
+		"legend": ddeHTMLLegendElement;
+		"li": ddeHTMLLIElement;
+		"link": ddeHTMLLinkElement;
+		"map": ddeHTMLMapElement;
+		"menu": ddeHTMLMenuElement;
+		"meta": ddeHTMLMetaElement;
+		"meter": ddeHTMLMeterElement;
+		"object": ddeHTMLObjectElement;
+		"ol": ddeHTMLOListElement;
+		"optgroup": ddeHTMLOptGroupElement;
+		"option": ddeHTMLOptionElement;
+		"output": ddeHTMLOutputElement;
+		"p": ddeHTMLParagraphElement;
+		"picture": ddeHTMLPictureElement;
+		"pre": ddeHTMLPreElement;
+		"progress": ddeHTMLProgressElement;
+		"q": ddeHTMLQuoteElement;
+		"script": ddeHTMLScriptElement;
+		"select": ddeHTMLSelectElement;
+		"slot": ddeHTMLSlotElement;
+		"source": ddeHTMLSourceElement;
+		"span": ddeHTMLSpanElement;
+		"style": ddeHTMLStyleElement;
+		"table": ddeHTMLTableElement;
+		"tbody": ddeHTMLTableSectionElement;
+		"td": ddeHTMLTableCellElement;
+		"template": ddeHTMLTemplateElement;
+		"textarea": ddeHTMLTextAreaElement;
+		"tfoot": ddeHTMLTableSectionElement;
+		"th": ddeHTMLTableCellElement;
+		"thead": ddeHTMLTableSectionElement;
+		"time": ddeHTMLTimeElement;
+		"title": ddeHTMLTitleElement;
+		"tr": ddeHTMLTableRowElement;
+		"track": ddeHTMLTrackElement;
+		"ul": ddeHTMLUListElement;
+		"video": ddeHTMLVideoElement;
+	}
+	interface ddeSVGElementTagNameMap {
+		"a": ddeSVGAElement;
+		"animate": ddeSVGAnimateElement;
+		"animateMotion": ddeSVGAnimateMotionElement;
+		"animateTransform": ddeSVGAnimateTransformElement;
+		"circle": ddeSVGCircleElement;
+		"clipPath": ddeSVGClipPathElement;
+		"defs": ddeSVGDefsElement;
+		"desc": ddeSVGDescElement;
+		"ellipse": ddeSVGEllipseElement;
+		"feBlend": ddeSVGFEBlendElement;
+		"feColorMatrix": ddeSVGFEColorMatrixElement;
+		"feComponentTransfer": ddeSVGFEComponentTransferElement;
+		"feComposite": ddeSVGFECompositeElement;
+		"feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
+		"feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
+		"feDisplacementMap": ddeSVGFEDisplacementMapElement;
+		"feDistantLight": ddeSVGFEDistantLightElement;
+		"feDropShadow": ddeSVGFEDropShadowElement;
+		"feFlood": ddeSVGFEFloodElement;
+		"feFuncA": ddeSVGFEFuncAElement;
+		"feFuncB": ddeSVGFEFuncBElement;
+		"feFuncG": ddeSVGFEFuncGElement;
+		"feFuncR": ddeSVGFEFuncRElement;
+		"feGaussianBlur": ddeSVGFEGaussianBlurElement;
+		"feImage": ddeSVGFEImageElement;
+		"feMerge": ddeSVGFEMergeElement;
+		"feMergeNode": ddeSVGFEMergeNodeElement;
+		"feMorphology": ddeSVGFEMorphologyElement;
+		"feOffset": ddeSVGFEOffsetElement;
+		"fePointLight": ddeSVGFEPointLightElement;
+		"feSpecularLighting": ddeSVGFESpecularLightingElement;
+		"feSpotLight": ddeSVGFESpotLightElement;
+		"feTile": ddeSVGFETileElement;
+		"feTurbulence": ddeSVGFETurbulenceElement;
+		"filter": ddeSVGFilterElement;
+		"foreignObject": ddeSVGForeignObjectElement;
+		"g": ddeSVGGElement;
+		"image": ddeSVGImageElement;
+		"line": ddeSVGLineElement;
+		"linearGradient": ddeSVGLinearGradientElement;
+		"marker": ddeSVGMarkerElement;
+		"mask": ddeSVGMaskElement;
+		"metadata": ddeSVGMetadataElement;
+		"mpath": ddeSVGMPathElement;
+		"path": ddeSVGPathElement;
+		"pattern": ddeSVGPatternElement;
+		"polygon": ddeSVGPolygonElement;
+		"polyline": ddeSVGPolylineElement;
+		"radialGradient": ddeSVGRadialGradientElement;
+		"rect": ddeSVGRectElement;
+		"script": ddeSVGScriptElement;
+		"set": ddeSVGSetElement;
+		"stop": ddeSVGStopElement;
+		"style": ddeSVGStyleElement;
+		"svg": ddeSVGSVGElement;
+		"switch": ddeSVGSwitchElement;
+		"symbol": ddeSVGSymbolElement;
+		"text": ddeSVGTextElement;
+		"textPath": ddeSVGTextPathElement;
+		"title": ddeSVGTitleElement;
+		"tspan": ddeSVGTSpanElement;
+		"use": ddeSVGUseElement;
+		"view": ddeSVGViewElement;
+	}
+}
+// editorconfig-checker-disable
+export interface ddeHTMLAnchorElement extends HTMLAnchorElement {
+	append: ddeAppend<ddeHTMLAnchorElement>;
+}
+export interface ddeHTMLAreaElement extends HTMLAreaElement {
+	append: ddeAppend<ddeHTMLAreaElement>;
+}
+export interface ddeHTMLAudioElement extends HTMLAudioElement {
+	append: ddeAppend<ddeHTMLAudioElement>;
+}
+export interface ddeHTMLBaseElement extends HTMLBaseElement {
+	append: ddeAppend<ddeHTMLBaseElement>;
+}
+export interface ddeHTMLQuoteElement extends HTMLQuoteElement {
+	append: ddeAppend<ddeHTMLQuoteElement>;
+}
+export interface ddeHTMLBodyElement extends HTMLBodyElement {
+	append: ddeAppend<ddeHTMLBodyElement>;
+}
+export interface ddeHTMLBRElement extends HTMLBRElement {
+	append: ddeAppend<ddeHTMLBRElement>;
+}
+export interface ddeHTMLButtonElement extends HTMLButtonElement {
+	append: ddeAppend<ddeHTMLButtonElement>;
+}
+export interface ddeHTMLCanvasElement extends HTMLCanvasElement {
+	append: ddeAppend<ddeHTMLCanvasElement>;
+}
+export interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement {
+	append: ddeAppend<ddeHTMLTableCaptionElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLDataElement extends HTMLDataElement {
+	append: ddeAppend<ddeHTMLDataElement>;
+}
+export interface ddeHTMLDataListElement extends HTMLDataListElement {
+	append: ddeAppend<ddeHTMLDataListElement>;
+}
+export interface ddeHTMLModElement extends HTMLModElement {
+	append: ddeAppend<ddeHTMLModElement>;
+}
+export interface ddeHTMLDetailsElement extends HTMLDetailsElement {
+	append: ddeAppend<ddeHTMLDetailsElement>;
+}
+export interface ddeHTMLDialogElement extends HTMLDialogElement {
+	append: ddeAppend<ddeHTMLDialogElement>;
+}
+export interface ddeHTMLDivElement extends HTMLDivElement {
+	append: ddeAppend<ddeHTMLDivElement>;
+}
+export interface ddeHTMLDListElement extends HTMLDListElement {
+	append: ddeAppend<ddeHTMLDListElement>;
+}
+export interface ddeHTMLEmbedElement extends HTMLEmbedElement {
+	append: ddeAppend<ddeHTMLEmbedElement>;
+}
+export interface ddeHTMLFieldSetElement extends HTMLFieldSetElement {
+	append: ddeAppend<ddeHTMLFieldSetElement>;
+}
+export interface ddeHTMLFormElement extends HTMLFormElement {
+	append: ddeAppend<ddeHTMLFormElement>;
+}
+export interface ddeHTMLHeadingElement extends HTMLHeadingElement {
+	append: ddeAppend<ddeHTMLHeadingElement>;
+}
+export interface ddeHTMLHeadElement extends HTMLHeadElement {
+	append: ddeAppend<ddeHTMLHeadElement>;
+}
+export interface ddeHTMLHRElement extends HTMLHRElement {
+	append: ddeAppend<ddeHTMLHRElement>;
+}
+export interface ddeHTMLHtmlElement extends HTMLHtmlElement {
+	append: ddeAppend<ddeHTMLHtmlElement>;
+}
+export interface ddeHTMLIFrameElement extends HTMLIFrameElement {
+	append: ddeAppend<ddeHTMLIFrameElement>;
+}
+export interface ddeHTMLImageElement extends HTMLImageElement {
+	append: ddeAppend<ddeHTMLImageElement>;
+}
+export interface ddeHTMLInputElement extends HTMLInputElement {
+	append: ddeAppend<ddeHTMLInputElement>;
+}
+export interface ddeHTMLLabelElement extends HTMLLabelElement {
+	append: ddeAppend<ddeHTMLLabelElement>;
+}
+export interface ddeHTMLLegendElement extends HTMLLegendElement {
+	append: ddeAppend<ddeHTMLLegendElement>;
+}
+export interface ddeHTMLLIElement extends HTMLLIElement {
+	append: ddeAppend<ddeHTMLLIElement>;
+}
+export interface ddeHTMLLinkElement extends HTMLLinkElement {
+	append: ddeAppend<ddeHTMLLinkElement>;
+}
+export interface ddeHTMLMapElement extends HTMLMapElement {
+	append: ddeAppend<ddeHTMLMapElement>;
+}
+export interface ddeHTMLMenuElement extends HTMLMenuElement {
+	append: ddeAppend<ddeHTMLMenuElement>;
+}
+export interface ddeHTMLMetaElement extends HTMLMetaElement {
+	append: ddeAppend<ddeHTMLMetaElement>;
+}
+export interface ddeHTMLMeterElement extends HTMLMeterElement {
+	append: ddeAppend<ddeHTMLMeterElement>;
+}
+export interface ddeHTMLObjectElement extends HTMLObjectElement {
+	append: ddeAppend<ddeHTMLObjectElement>;
+}
+export interface ddeHTMLOListElement extends HTMLOListElement {
+	append: ddeAppend<ddeHTMLOListElement>;
+}
+export interface ddeHTMLOptGroupElement extends HTMLOptGroupElement {
+	append: ddeAppend<ddeHTMLOptGroupElement>;
+}
+export interface ddeHTMLOptionElement extends HTMLOptionElement {
+	append: ddeAppend<ddeHTMLOptionElement>;
+}
+export interface ddeHTMLOutputElement extends HTMLOutputElement {
+	append: ddeAppend<ddeHTMLOutputElement>;
+}
+export interface ddeHTMLParagraphElement extends HTMLParagraphElement {
+	append: ddeAppend<ddeHTMLParagraphElement>;
+}
+export interface ddeHTMLPictureElement extends HTMLPictureElement {
+	append: ddeAppend<ddeHTMLPictureElement>;
+}
+export interface ddeHTMLPreElement extends HTMLPreElement {
+	append: ddeAppend<ddeHTMLPreElement>;
+}
+export interface ddeHTMLProgressElement extends HTMLProgressElement {
+	append: ddeAppend<ddeHTMLProgressElement>;
+}
+export interface ddeHTMLScriptElement extends HTMLScriptElement {
+	append: ddeAppend<ddeHTMLScriptElement>;
+}
+export interface ddeHTMLSelectElement extends HTMLSelectElement {
+	append: ddeAppend<ddeHTMLSelectElement>;
+}
+export interface ddeHTMLSlotElement extends HTMLSlotElement {
+	append: ddeAppend<ddeHTMLSlotElement>;
+}
+export interface ddeHTMLSourceElement extends HTMLSourceElement {
+	append: ddeAppend<ddeHTMLSourceElement>;
+}
+export interface ddeHTMLSpanElement extends HTMLSpanElement {
+	append: ddeAppend<ddeHTMLSpanElement>;
+}
+export interface ddeHTMLStyleElement extends HTMLStyleElement {
+	append: ddeAppend<ddeHTMLStyleElement>;
+}
+export interface ddeHTMLTableElement extends HTMLTableElement {
+	append: ddeAppend<ddeHTMLTableElement>;
+}
+export interface ddeHTMLTableSectionElement extends HTMLTableSectionElement {
+	append: ddeAppend<ddeHTMLTableSectionElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTemplateElement extends HTMLTemplateElement {
+	append: ddeAppend<ddeHTMLTemplateElement>;
+}
+export interface ddeHTMLTextAreaElement extends HTMLTextAreaElement {
+	append: ddeAppend<ddeHTMLTextAreaElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTimeElement extends HTMLTimeElement {
+	append: ddeAppend<ddeHTMLTimeElement>;
+}
+export interface ddeHTMLTitleElement extends HTMLTitleElement {
+	append: ddeAppend<ddeHTMLTitleElement>;
+}
+export interface ddeHTMLTableRowElement extends HTMLTableRowElement {
+	append: ddeAppend<ddeHTMLTableRowElement>;
+}
+export interface ddeHTMLTrackElement extends HTMLTrackElement {
+	append: ddeAppend<ddeHTMLTrackElement>;
+}
+export interface ddeHTMLUListElement extends HTMLUListElement {
+	append: ddeAppend<ddeHTMLUListElement>;
+}
+export interface ddeHTMLVideoElement extends HTMLVideoElement {
+	append: ddeAppend<ddeHTMLVideoElement>;
+}
+export interface ddeSVGAElement extends SVGAElement {
+	append: ddeAppend<ddeSVGAElement>;
+}
+export interface ddeSVGAnimateElement extends SVGAnimateElement {
+	append: ddeAppend<ddeSVGAnimateElement>;
+}
+export interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement {
+	append: ddeAppend<ddeSVGAnimateMotionElement>;
+}
+export interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement {
+	append: ddeAppend<ddeSVGAnimateTransformElement>;
+}
+export interface ddeSVGCircleElement extends SVGCircleElement {
+	append: ddeAppend<ddeSVGCircleElement>;
+}
+export interface ddeSVGClipPathElement extends SVGClipPathElement {
+	append: ddeAppend<ddeSVGClipPathElement>;
+}
+export interface ddeSVGDefsElement extends SVGDefsElement {
+	append: ddeAppend<ddeSVGDefsElement>;
+}
+export interface ddeSVGDescElement extends SVGDescElement {
+	append: ddeAppend<ddeSVGDescElement>;
+}
+export interface ddeSVGEllipseElement extends SVGEllipseElement {
+	append: ddeAppend<ddeSVGEllipseElement>;
+}
+export interface ddeSVGFEBlendElement extends SVGFEBlendElement {
+	append: ddeAppend<ddeSVGFEBlendElement>;
+}
+export interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement {
+	append: ddeAppend<ddeSVGFEColorMatrixElement>;
+}
+export interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement {
+	append: ddeAppend<ddeSVGFEComponentTransferElement>;
+}
+export interface ddeSVGFECompositeElement extends SVGFECompositeElement {
+	append: ddeAppend<ddeSVGFECompositeElement>;
+}
+export interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement {
+	append: ddeAppend<ddeSVGFEConvolveMatrixElement>;
+}
+export interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement {
+	append: ddeAppend<ddeSVGFEDiffuseLightingElement>;
+}
+export interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement {
+	append: ddeAppend<ddeSVGFEDisplacementMapElement>;
+}
+export interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement {
+	append: ddeAppend<ddeSVGFEDistantLightElement>;
+}
+export interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement {
+	append: ddeAppend<ddeSVGFEDropShadowElement>;
+}
+export interface ddeSVGFEFloodElement extends SVGFEFloodElement {
+	append: ddeAppend<ddeSVGFEFloodElement>;
+}
+export interface ddeSVGFEFuncAElement extends SVGFEFuncAElement {
+	append: ddeAppend<ddeSVGFEFuncAElement>;
+}
+export interface ddeSVGFEFuncBElement extends SVGFEFuncBElement {
+	append: ddeAppend<ddeSVGFEFuncBElement>;
+}
+export interface ddeSVGFEFuncGElement extends SVGFEFuncGElement {
+	append: ddeAppend<ddeSVGFEFuncGElement>;
+}
+export interface ddeSVGFEFuncRElement extends SVGFEFuncRElement {
+	append: ddeAppend<ddeSVGFEFuncRElement>;
+}
+export interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement {
+	append: ddeAppend<ddeSVGFEGaussianBlurElement>;
+}
+export interface ddeSVGFEImageElement extends SVGFEImageElement {
+	append: ddeAppend<ddeSVGFEImageElement>;
+}
+export interface ddeSVGFEMergeElement extends SVGFEMergeElement {
+	append: ddeAppend<ddeSVGFEMergeElement>;
+}
+export interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement {
+	append: ddeAppend<ddeSVGFEMergeNodeElement>;
+}
+export interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement {
+	append: ddeAppend<ddeSVGFEMorphologyElement>;
+}
+export interface ddeSVGFEOffsetElement extends SVGFEOffsetElement {
+	append: ddeAppend<ddeSVGFEOffsetElement>;
+}
+export interface ddeSVGFEPointLightElement extends SVGFEPointLightElement {
+	append: ddeAppend<ddeSVGFEPointLightElement>;
+}
+export interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement {
+	append: ddeAppend<ddeSVGFESpecularLightingElement>;
+}
+export interface ddeSVGFESpotLightElement extends SVGFESpotLightElement {
+	append: ddeAppend<ddeSVGFESpotLightElement>;
+}
+export interface ddeSVGFETileElement extends SVGFETileElement {
+	append: ddeAppend<ddeSVGFETileElement>;
+}
+export interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement {
+	append: ddeAppend<ddeSVGFETurbulenceElement>;
+}
+export interface ddeSVGFilterElement extends SVGFilterElement {
+	append: ddeAppend<ddeSVGFilterElement>;
+}
+export interface ddeSVGForeignObjectElement extends SVGForeignObjectElement {
+	append: ddeAppend<ddeSVGForeignObjectElement>;
+}
+export interface ddeSVGGElement extends SVGGElement {
+	append: ddeAppend<ddeSVGGElement>;
+}
+export interface ddeSVGImageElement extends SVGImageElement {
+	append: ddeAppend<ddeSVGImageElement>;
+}
+export interface ddeSVGLineElement extends SVGLineElement {
+	append: ddeAppend<ddeSVGLineElement>;
+}
+export interface ddeSVGLinearGradientElement extends SVGLinearGradientElement {
+	append: ddeAppend<ddeSVGLinearGradientElement>;
+}
+export interface ddeSVGMarkerElement extends SVGMarkerElement {
+	append: ddeAppend<ddeSVGMarkerElement>;
+}
+export interface ddeSVGMaskElement extends SVGMaskElement {
+	append: ddeAppend<ddeSVGMaskElement>;
+}
+export interface ddeSVGMetadataElement extends SVGMetadataElement {
+	append: ddeAppend<ddeSVGMetadataElement>;
+}
+export interface ddeSVGMPathElement extends SVGMPathElement {
+	append: ddeAppend<ddeSVGMPathElement>;
+}
+export interface ddeSVGPathElement extends SVGPathElement {
+	append: ddeAppend<ddeSVGPathElement>;
+}
+export interface ddeSVGPatternElement extends SVGPatternElement {
+	append: ddeAppend<ddeSVGPatternElement>;
+}
+export interface ddeSVGPolygonElement extends SVGPolygonElement {
+	append: ddeAppend<ddeSVGPolygonElement>;
+}
+export interface ddeSVGPolylineElement extends SVGPolylineElement {
+	append: ddeAppend<ddeSVGPolylineElement>;
+}
+export interface ddeSVGRadialGradientElement extends SVGRadialGradientElement {
+	append: ddeAppend<ddeSVGRadialGradientElement>;
+}
+export interface ddeSVGRectElement extends SVGRectElement {
+	append: ddeAppend<ddeSVGRectElement>;
+}
+export interface ddeSVGScriptElement extends SVGScriptElement {
+	append: ddeAppend<ddeSVGScriptElement>;
+}
+export interface ddeSVGSetElement extends SVGSetElement {
+	append: ddeAppend<ddeSVGSetElement>;
+}
+export interface ddeSVGStopElement extends SVGStopElement {
+	append: ddeAppend<ddeSVGStopElement>;
+}
+export interface ddeSVGStyleElement extends SVGStyleElement {
+	append: ddeAppend<ddeSVGStyleElement>;
+}
+export interface ddeSVGSVGElement extends SVGSVGElement {
+	append: ddeAppend<ddeSVGSVGElement>;
+}
+export interface ddeSVGSwitchElement extends SVGSwitchElement {
+	append: ddeAppend<ddeSVGSwitchElement>;
+}
+export interface ddeSVGSymbolElement extends SVGSymbolElement {
+	append: ddeAppend<ddeSVGSymbolElement>;
+}
+export interface ddeSVGTextElement extends SVGTextElement {
+	append: ddeAppend<ddeSVGTextElement>;
+}
+export interface ddeSVGTextPathElement extends SVGTextPathElement {
+	append: ddeAppend<ddeSVGTextPathElement>;
+}
+export interface ddeSVGTitleElement extends SVGTitleElement {
+	append: ddeAppend<ddeSVGTitleElement>;
+}
+export interface ddeSVGTSpanElement extends SVGTSpanElement {
+	append: ddeAppend<ddeSVGTSpanElement>;
+}
+export interface ddeSVGUseElement extends SVGUseElement {
+	append: ddeAppend<ddeSVGUseElement>;
+}
+export interface ddeSVGViewElement extends SVGViewElement {
+	append: ddeAppend<ddeSVGViewElement>;
+}
+
+export {
+	dispatchEvent$1 as dispatchEvent,
+	el as createElement,
+	elNS as createElementNS,
+};
+
+export as namespace dde;
+
+export {};
diff --git a/dist/dde.js b/dist/dde.js
index 6a2b3e9..af8c511 100644
--- a/dist/dde.js
+++ b/dist/dde.js
@@ -1,456 +1,686 @@
-//deka-dom-el library is available via global namespace `dde`
-(()=> {
-// src/signals-common.js
-var C = {
-	isSignal(t) {
-		return !1;
-	},
-	processReactiveAttribute(t, e, r, n) {
-		return r;
-	}
-};
-function Z(t, e = !0) {
-	return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t);
-}
-function S(t) {
-	return C.isPrototypeOf(t) && t !== C ? t : C;
-}
-
-// src/helpers.js
-function m(t) {
-	return typeof t > "u";
-}
-function L(t, e) {
-	if (!t || !(t instanceof AbortSignal))
-		return !0;
-	if (!t.aborted)
-		return t.addEventListener("abort", e), function() {
-			t.removeEventListener("abort", e);
-		};
-}
-function q(t, e) {
-	let { observedAttributes: r = [] } = t.constructor;
-	return r.reduce(function(n, o) {
-		return n[G(o)] = e(t, o), n;
-	}, {});
-}
-function G(t) {
-	return t.replace(/-./g, (e) => e[1].toUpperCase());
-}
-
-// src/dom-common.js
-var a = {
-	setDeleteAttr: V,
-	ssr: "",
-	D: globalThis.document,
-	F: globalThis.DocumentFragment,
-	H: globalThis.HTMLElement,
-	S: globalThis.SVGElement,
-	M: globalThis.MutationObserver,
-	q: (t) => t || Promise.resolve()
-};
-function V(t, e, r) {
-	if (Reflect.set(t, e, r), !!m(r)) {
-		if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined")
-			return t.removeAttribute(e);
-		if (Reflect.get(t, e) === "undefined")
-			return Reflect.set(t, e, "");
-	}
-}
-var x = "__dde_lifecyclesToEvents", v = "dde:connected", w = "dde:disconnected", y = "dde:attributeChanged";
-
-// src/dom.js
-function dt(t) {
-	return a.q(t);
-}
-var g = [{
-	get scope() {
-		return a.D.body;
-	},
-	host: (t) => t ? t(a.D.body) : a.D.body,
-	prevent: !0
-}], O = {
-	get current() {
-		return g[g.length - 1];
-	},
-	get host() {
-		return this.current.host;
-	},
-	preventDefault() {
-		let { current: t } = this;
-		return t.prevent = !0, t;
-	},
-	get state() {
-		return [...g];
-	},
-	push(t = {}) {
-		return g.push(Object.assign({}, this.current, { prevent: !1 }, t));
-	},
-	pushRoot() {
-		return g.push(g[0]);
-	},
-	pop() {
-		if (g.length !== 1)
-			return g.pop();
-	}
-};
-function k(...t) {
-	return this.appendOriginal(...t), this;
-}
-function J(t) {
-	return t.append === k || (t.appendOriginal = t.append, t.append = k), t;
-}
-var T;
-function P(t, e, ...r) {
-	let n = S(this), o = 0, c, d;
-	switch ((Object(e) !== e || n.isSignal(e)) && (e = { textContent: e }), !0) {
-		case typeof t == "function": {
-			o = 1;
-			let f = (...l) => l.length ? (o === 1 ? r.unshift(...l) : l.forEach((E) => E(d)), void 0) : d;
-			O.push({ scope: t, host: f }), c = t(e || void 0);
-			let p = c instanceof a.F;
-			if (c.nodeName === "#comment") break;
-			let b = P.mark({
-				type: "component",
-				name: t.name,
-				host: p ? "this" : "parentElement"
-			});
-			c.prepend(b), p && (d = b);
-			break;
-		}
-		case t === "#text":
-			c = R.call(this, a.D.createTextNode(""), e);
-			break;
-		case (t === "<>" || !t):
-			c = R.call(this, a.D.createDocumentFragment(), e);
-			break;
-		case !!T:
-			c = R.call(this, a.D.createElementNS(T, t), e);
-			break;
-		case !c:
-			c = R.call(this, a.D.createElement(t), e);
-	}
-	return J(c), d || (d = c), r.forEach((f) => f(d)), o && O.pop(), o = 2, c;
-}
-P.mark = function(t, e = !1) {
-	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
-	let r = e ? "" : "/", n = a.D.createComment(`<dde:mark ${t}${a.ssr}${r}>`);
-	return e && (n.end = a.D.createComment("</dde:mark>")), n;
-};
-function pt(t) {
-	let e = this;
-	return function(...n) {
-		T = t;
-		let o = P.call(e, ...n);
-		return T = void 0, o;
+var dde = (() => {
+	var __defProp = Object.defineProperty;
+	var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+	var __getOwnPropNames = Object.getOwnPropertyNames;
+	var __hasOwnProp = Object.prototype.hasOwnProperty;
+	var __export = (target, all) => {
+		for (var name in all)
+			__defProp(target, name, { get: all[name], enumerable: true });
 	};
-}
-function lt(t, e = t) {
-	let r = "\xB9\u2070", n = "\u2713", o = Object.fromEntries(
-		Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(r)).map((c) => [c.name += r, c])
-	);
-	if (t.append = new Proxy(t.append, {
-		apply(c, d, f) {
-			if (f[0] === e) return c.apply(t, f);
-			for (let p of f) {
-				let b = (p.slot || "") + r;
-				try {
-					Q(p, "remove", "slot");
-				} catch {
-				}
-				let l = o[b];
-				if (!l) return;
-				l.name.startsWith(n) || (l.childNodes.forEach((E) => E.remove()), l.name = n + b), l.append(p);
-			}
-			return t.append = c, t;
+	var __copyProps = (to, from, except, desc) => {
+		if (from && typeof from === "object" || typeof from === "function") {
+			for (let key of __getOwnPropNames(from))
+				if (!__hasOwnProp.call(to, key) && key !== except)
+					__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
 		}
-	}), t !== e) {
-		let c = Array.from(t.childNodes);
-		t.append(...c);
-	}
-	return e;
-}
-var N = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: $ } = a;
-function R(t, ...e) {
-	if (!e.length) return t;
-	N.set(t, H(t, this));
-	for (let [r, n] of Object.entries(Object.assign({}, ...e)))
-		U.call(this, t, r, n);
-	return N.delete(t), t;
-}
-function U(t, e, r) {
-	let { setRemoveAttr: n, s: o } = H(t, this), c = this;
-	r = o.processReactiveAttribute(
-		t,
-		e,
-		r,
-		(f, p) => U.call(c, t, f, p)
-	);
-	let [d] = e;
-	if (d === "=") return n(e.slice(1), r);
-	if (d === ".") return F(t, e.slice(1), r);
-	if (/(aria|data)([A-Z])/.test(e))
-		return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), n(e, r);
-	switch (e === "className" && (e = "class"), e) {
-		case "xlink:href":
-			return n(e, r, "http://www.w3.org/1999/xlink");
-		case "textContent":
-			return $(t, e, r);
-		case "style":
-			if (typeof r != "object") break;
-		/* falls through */
-		case "dataset":
-			return M(o, e, t, r, F.bind(null, t[e]));
-		case "ariaset":
-			return M(o, e, t, r, (f, p) => n("aria-" + f, p));
-		case "classList":
-			return K.call(c, t, r);
-	}
-	return X(t, e) ? $(t, e, r) : n(e, r);
-}
-function H(t, e) {
-	if (N.has(t)) return N.get(t);
-	let n = (t instanceof a.S ? tt : Y).bind(null, t, "Attribute"), o = S(e);
-	return { setRemoveAttr: n, s: o };
-}
-function K(t, e) {
-	let r = S(this);
-	return M(
-		r,
-		"classList",
-		t,
-		e,
-		(n, o) => t.classList.toggle(n, o === -1 ? void 0 : !!o)
-	), t;
-}
-function Q(t, e, r, n) {
-	return t instanceof a.H ? t[e + "Attribute"](r, n) : t[e + "AttributeNS"](null, r, n);
-}
-function X(t, e) {
-	if (!(e in t)) return !1;
-	let r = z(t, e);
-	return !m(r.set);
-}
-function z(t, e) {
-	if (t = Object.getPrototypeOf(t), !t) return {};
-	let r = Object.getOwnPropertyDescriptor(t, e);
-	return r || z(t, e);
-}
-function M(t, e, r, n, o) {
-	let c = String;
-	if (!(typeof n != "object" || n === null))
-		return Object.entries(n).forEach(function([f, p]) {
-			f && (f = new c(f), f.target = e, p = t.processReactiveAttribute(r, f, p, o), o(f, p));
-		});
-}
-function Y(t, e, r, n) {
-	return t[(m(n) ? "remove" : "set") + e](r, n);
-}
-function tt(t, e, r, n, o = null) {
-	return t[(m(n) ? "remove" : "set") + e + "NS"](o, r, n);
-}
-function F(t, e, r) {
-	if (Reflect.set(t, e, r), !!m(r))
-		return Reflect.deleteProperty(t, e);
-}
+		return to;
+	};
+	var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/events-observer.js
-var _ = a.M ? et() : new Proxy({}, {
-	get() {
-		return () => {
+	// index.js
+	var index_exports = {};
+	__export(index_exports, {
+		assign: () => assign,
+		assignAttribute: () => assignAttribute,
+		chainableAppend: () => chainableAppend,
+		classListDeclarative: () => classListDeclarative,
+		createElement: () => createElement,
+		createElementNS: () => createElementNS,
+		customElementRender: () => customElementRender,
+		customElementWithDDE: () => lifecyclesToEvents,
+		dispatchEvent: () => dispatchEvent,
+		el: () => createElement,
+		elNS: () => createElementNS,
+		elementAttribute: () => elementAttribute,
+		lifecyclesToEvents: () => lifecyclesToEvents,
+		observedAttributes: () => observedAttributes2,
+		on: () => on,
+		queue: () => queue,
+		registerReactivity: () => registerReactivity,
+		scope: () => scope,
+		simulateSlots: () => simulateSlots
+	});
+
+	// src/helpers.js
+	function isUndef(value) {
+		return typeof value === "undefined";
+	}
+	function isInstance(obj, cls) {
+		return obj instanceof cls;
+	}
+	function isProtoFrom(obj, cls) {
+		return Object.prototype.isPrototypeOf.call(cls, obj);
+	}
+	function oAssign(...o) {
+		return Object.assign(...o);
+	}
+	function onAbort(signal, listener) {
+		if (!signal || !isInstance(signal, AbortSignal))
+			return true;
+		if (signal.aborted)
+			return;
+		signal.addEventListener("abort", listener);
+		return function cleanUp() {
+			signal.removeEventListener("abort", listener);
 		};
 	}
-});
-function et() {
-	let t = /* @__PURE__ */ new Map(), e = !1, r = (s) => function(u) {
-		for (let i of u)
-			if (i.type === "childList") {
-				if (l(i.addedNodes, !0)) {
-					s();
+	function observedAttributes(instance, observedAttribute) {
+		const { observedAttributes: observedAttributes3 = [] } = instance.constructor;
+		return observedAttributes3.reduce(function(out, name) {
+			out[kebabToCamel(name)] = observedAttribute(instance, name);
+			return out;
+		}, {});
+	}
+	function kebabToCamel(name) {
+		return name.replace(/-./g, (x) => x[1].toUpperCase());
+	}
+
+	// src/signals-lib/common.js
+	var signals_global = {
+		/**
+		* Checks if a value is a signal
+		* @param {any} attributes - Value to check
+		* @returns {boolean} Whether the value is a signal
+		*/
+		isSignal(attributes) {
+			return false;
+		},
+		/**
+		* Processes an attribute that might be reactive
+		* @param {Element} obj - Element that owns the attribute
+		* @param {string} key - Attribute name
+		* @param {any} attr - Attribute value
+		* @param {Function} set - Function to set the attribute
+		* @returns {any} Processed attribute value
+		*/
+		processReactiveAttribute(obj, key, attr, set) {
+			return attr;
+		}
+	};
+	function registerReactivity(def, global = true) {
+		if (global) return oAssign(signals_global, def);
+		Object.setPrototypeOf(def, signals_global);
+		return def;
+	}
+	function signals(_this) {
+		return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
+	}
+
+	// src/dom-common.js
+	var enviroment = {
+		setDeleteAttr,
+		ssr: "",
+		D: globalThis.document,
+		F: globalThis.DocumentFragment,
+		H: globalThis.HTMLElement,
+		S: globalThis.SVGElement,
+		M: globalThis.MutationObserver,
+		q: (p) => p || Promise.resolve()
+	};
+	function setDeleteAttr(obj, prop, val) {
+		Reflect.set(obj, prop, val);
+		if (!isUndef(val)) return;
+		Reflect.deleteProperty(obj, prop);
+		if (isInstance(obj, enviroment.H) && obj.getAttribute(prop) === "undefined")
+			return obj.removeAttribute(prop);
+		if (Reflect.get(obj, prop) === "undefined")
+			return Reflect.set(obj, prop, "");
+	}
+	var keyLTE = "__dde_lifecyclesToEvents";
+	var evc = "dde:connected";
+	var evd = "dde:disconnected";
+	var eva = "dde:attributeChanged";
+
+	// src/dom.js
+	function queue(promise) {
+		return enviroment.q(promise);
+	}
+	var scopes = [{
+		get scope() {
+			return enviroment.D.body;
+		},
+		host: (c) => c ? c(enviroment.D.body) : enviroment.D.body,
+		prevent: true
+	}];
+	var scope = {
+		/**
+		* Gets the current scope
+		* @returns {Object} Current scope context
+		*/
+		get current() {
+			return scopes[scopes.length - 1];
+		},
+		/**
+		* Gets the host element of the current scope
+		* @returns {Function} Host accessor function
+		*/
+		get host() {
+			return this.current.host;
+		},
+		/**
+		* Prevents default behavior in the current scope
+		* @returns {Object} Current scope context
+		*/
+		preventDefault() {
+			const { current } = this;
+			current.prevent = true;
+			return current;
+		},
+		/**
+		* Gets a copy of the current scope stack
+		* @returns {Array} Copy of scope stack
+		*/
+		get state() {
+			return [...scopes];
+		},
+		/**
+		* Pushes a new scope to the stack
+		* @param {Object} [s={}] - Scope object to push
+		* @returns {number} New length of the scope stack
+		*/
+		push(s = {}) {
+			return scopes.push(oAssign({}, this.current, { prevent: false }, s));
+		},
+		/**
+		* Pushes the root scope to the stack
+		* @returns {number} New length of the scope stack
+		*/
+		pushRoot() {
+			return scopes.push(scopes[0]);
+		},
+		/**
+		* Pops the current scope from the stack
+		* @returns {Object|undefined} Popped scope or undefined if only one scope remains
+		*/
+		pop() {
+			if (scopes.length === 1) return;
+			return scopes.pop();
+		}
+	};
+	function append(...els) {
+		this.appendOriginal(...els);
+		return this;
+	}
+	function chainableAppend(el) {
+		if (el.append === append) return el;
+		el.appendOriginal = el.append;
+		el.append = append;
+		return el;
+	}
+	var namespace;
+	function createElement(tag, attributes, ...addons) {
+		const s = signals(this);
+		let scoped = 0;
+		let el, el_host;
+		if (Object(attributes) !== attributes || s.isSignal(attributes))
+			attributes = { textContent: attributes };
+		switch (true) {
+			case typeof tag === "function": {
+				scoped = 1;
+				const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0);
+				scope.push({ scope: tag, host });
+				el = tag(attributes || void 0);
+				const is_fragment = isInstance(el, enviroment.F);
+				if (el.nodeName === "#comment") break;
+				const el_mark = createElement.mark({
+					type: "component",
+					name: tag.name,
+					host: is_fragment ? "this" : "parentElement"
+				});
+				el.prepend(el_mark);
+				if (is_fragment) el_host = el_mark;
+				break;
+			}
+			case tag === "#text":
+				el = assign.call(this, enviroment.D.createTextNode(""), attributes);
+				break;
+			case (tag === "<>" || !tag):
+				el = assign.call(this, enviroment.D.createDocumentFragment(), attributes);
+				break;
+			case Boolean(namespace):
+				el = assign.call(this, enviroment.D.createElementNS(namespace, tag), attributes);
+				break;
+			case !el:
+				el = assign.call(this, enviroment.D.createElement(tag), attributes);
+		}
+		chainableAppend(el);
+		if (!el_host) el_host = el;
+		addons.forEach((c) => c(el_host));
+		if (scoped) scope.pop();
+		scoped = 2;
+		return el;
+	}
+	createElement.mark = function(attrs, is_open = false) {
+		attrs = Object.entries(attrs).map(([n, v]) => n + `="${v}"`).join(" ");
+		const end = is_open ? "" : "/";
+		const out = enviroment.D.createComment(`<dde:mark ${attrs}${enviroment.ssr}${end}>`);
+		if (is_open) out.end = enviroment.D.createComment("</dde:mark>");
+		return out;
+	};
+	function createElementNS(ns) {
+		const _this = this;
+		return function createElementNSCurried(...rest) {
+			namespace = ns;
+			const el = createElement.call(_this, ...rest);
+			namespace = void 0;
+			return el;
+		};
+	}
+	function simulateSlots(element, root = element) {
+		const mark_e = "\xB9\u2070", mark_s = "\u2713";
+		const slots = Object.fromEntries(
+			Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s])
+		);
+		element.append = new Proxy(element.append, {
+			apply(orig, _, els) {
+				if (els[0] === root) return orig.apply(element, els);
+				for (const el of els) {
+					const name = (el.slot || "") + mark_e;
+					try {
+						elementAttribute(el, "remove", "slot");
+					} catch (_error) {
+					}
+					const slot = slots[name];
+					if (!slot) return;
+					if (!slot.name.startsWith(mark_s)) {
+						slot.childNodes.forEach((c) => c.remove());
+						slot.name = mark_s + name;
+					}
+					slot.append(el);
+				}
+				element.append = orig;
+				return element;
+			}
+		});
+		if (element !== root) {
+			const els = Array.from(element.childNodes);
+			element.append(...els);
+		}
+		return root;
+	}
+	var assign_context = /* @__PURE__ */ new WeakMap();
+	var { setDeleteAttr: setDeleteAttr2 } = enviroment;
+	function assign(element, ...attributes) {
+		if (!attributes.length) return element;
+		assign_context.set(element, assignContext(element, this));
+		for (const [key, value] of Object.entries(oAssign({}, ...attributes)))
+			assignAttribute.call(this, element, key, value);
+		assign_context.delete(element);
+		return element;
+	}
+	function assignAttribute(element, key, value) {
+		const { setRemoveAttr, s } = assignContext(element, this);
+		const _this = this;
+		value = s.processReactiveAttribute(
+			element,
+			key,
+			value,
+			(key2, value2) => assignAttribute.call(_this, element, key2, value2)
+		);
+		const [k] = key;
+		if ("=" === k) return setRemoveAttr(key.slice(1), value);
+		if ("." === k) return setDelete(element, key.slice(1), value);
+		if (/(aria|data)([A-Z])/.test(key)) {
+			key = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+			return setRemoveAttr(key, value);
+		}
+		if ("className" === key) key = "class";
+		switch (key) {
+			case "xlink:href":
+				return setRemoveAttr(key, value, "http://www.w3.org/1999/xlink");
+			case "textContent":
+				return setDeleteAttr2(element, key, value);
+			case "style":
+				if (typeof value !== "object") break;
+			/* falls through */
+			case "dataset":
+				return forEachEntries(s, key, element, value, setDelete.bind(null, element[key]));
+			case "ariaset":
+				return forEachEntries(s, key, element, value, (key2, val) => setRemoveAttr("aria-" + key2, val));
+			case "classList":
+				return classListDeclarative.call(_this, element, value);
+		}
+		return isPropSetter(element, key) ? setDeleteAttr2(element, key, value) : setRemoveAttr(key, value);
+	}
+	function assignContext(element, _this) {
+		if (assign_context.has(element)) return assign_context.get(element);
+		const is_svg = isInstance(element, enviroment.S);
+		const setRemoveAttr = (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute");
+		const s = signals(_this);
+		return { setRemoveAttr, s };
+	}
+	function classListDeclarative(element, toggle) {
+		const s = signals(this);
+		forEachEntries(
+			s,
+			"classList",
+			element,
+			toggle,
+			(class_name, val) => element.classList.toggle(class_name, val === -1 ? void 0 : Boolean(val))
+		);
+		return element;
+	}
+	function elementAttribute(element, op, key, value) {
+		if (isInstance(element, enviroment.H))
+			return element[op + "Attribute"](key, value);
+		return element[op + "AttributeNS"](null, key, value);
+	}
+	function isPropSetter(el, key) {
+		if (!(key in el)) return false;
+		const des = getPropDescriptor(el, key);
+		return !isUndef(des.set);
+	}
+	function getPropDescriptor(p, key) {
+		p = Object.getPrototypeOf(p);
+		if (!p) return {};
+		const des = Object.getOwnPropertyDescriptor(p, key);
+		if (!des) return getPropDescriptor(p, key);
+		return des;
+	}
+	function forEachEntries(s, target, element, obj, cb) {
+		const S = String;
+		if (typeof obj !== "object" || obj === null) return;
+		return Object.entries(obj).forEach(function process([key, val]) {
+			if (!key) return;
+			key = new S(key);
+			key.target = target;
+			val = s.processReactiveAttribute(element, key, val, cb);
+			cb(key, val);
+		});
+	}
+	function setRemove(obj, prop, key, val) {
+		return obj[(isUndef(val) ? "remove" : "set") + prop](key, val);
+	}
+	function setRemoveNS(obj, prop, key, val, ns = null) {
+		return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val);
+	}
+	function setDelete(obj, key, val) {
+		Reflect.set(obj, key, val);
+		if (!isUndef(val)) return;
+		return Reflect.deleteProperty(obj, key);
+	}
+
+	// src/events-observer.js
+	var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
+		get() {
+			return () => {
+			};
+		}
+	});
+	function connectionsChangesObserverConstructor() {
+		const store = /* @__PURE__ */ new Map();
+		let is_observing = false;
+		const observerListener = (stop2) => function(mutations) {
+			for (const mutation of mutations) {
+				if (mutation.type !== "childList") continue;
+				if (observerAdded(mutation.addedNodes, true)) {
+					stop2();
 					continue;
 				}
-				E(i.removedNodes, !0) && s();
+				if (observerRemoved(mutation.removedNodes, true))
+					stop2();
 			}
-	}, n = new a.M(r(f));
-	return {
-		observe(s) {
-			let u = new a.M(r(() => {
+		};
+		const observer = new enviroment.M(observerListener(stop));
+		return {
+			/**
+			* Creates an observer for a specific element
+			* @param {Element} element - Element to observe
+			* @returns {Function} Cleanup function
+			*/
+			observe(element) {
+				const o = new enviroment.M(observerListener(() => {
+				}));
+				o.observe(element, { childList: true, subtree: true });
+				return () => o.disconnect();
+			},
+			/**
+			* Register a connection listener for an element
+			* @param {Element} element - Element to watch
+			* @param {Function} listener - Callback for connection event
+			*/
+			onConnected(element, listener) {
+				start();
+				const listeners = getElementStore(element);
+				if (listeners.connected.has(listener)) return;
+				listeners.connected.add(listener);
+				listeners.length_c += 1;
+			},
+			/**
+			* Unregister a connection listener
+			* @param {Element} element - Element being watched
+			* @param {Function} listener - Callback to remove
+			*/
+			offConnected(element, listener) {
+				if (!store.has(element)) return;
+				const ls = store.get(element);
+				if (!ls.connected.has(listener)) return;
+				ls.connected.delete(listener);
+				ls.length_c -= 1;
+				cleanWhenOff(element, ls);
+			},
+			/**
+			* Register a disconnection listener for an element
+			* @param {Element} element - Element to watch
+			* @param {Function} listener - Callback for disconnection event
+			*/
+			onDisconnected(element, listener) {
+				start();
+				const listeners = getElementStore(element);
+				if (listeners.disconnected.has(listener)) return;
+				listeners.disconnected.add(listener);
+				listeners.length_d += 1;
+			},
+			/**
+			* Unregister a disconnection listener
+			* @param {Element} element - Element being watched
+			* @param {Function} listener - Callback to remove
+			*/
+			offDisconnected(element, listener) {
+				if (!store.has(element)) return;
+				const ls = store.get(element);
+				ls.disconnected.delete(listener);
+				ls.length_d -= 1;
+				cleanWhenOff(element, ls);
+			}
+		};
+		function cleanWhenOff(element, ls) {
+			if (ls.length_c || ls.length_d)
+				return;
+			store.delete(element);
+			stop();
+		}
+		function getElementStore(element) {
+			if (store.has(element)) return store.get(element);
+			const out = {
+				connected: /* @__PURE__ */ new WeakSet(),
+				length_c: 0,
+				disconnected: /* @__PURE__ */ new WeakSet(),
+				length_d: 0
+			};
+			store.set(element, out);
+			return out;
+		}
+		function start() {
+			if (is_observing) return;
+			is_observing = true;
+			observer.observe(enviroment.D.body, { childList: true, subtree: true });
+		}
+		function stop() {
+			if (!is_observing || store.size) return;
+			is_observing = false;
+			observer.disconnect();
+		}
+		function requestIdle() {
+			return new Promise(function(resolve) {
+				(requestIdleCallback || requestAnimationFrame)(resolve);
+			});
+		}
+		async function collectChildren(element) {
+			if (store.size > 30)
+				await requestIdle();
+			const out = [];
+			if (!isInstance(element, Node)) return out;
+			for (const el of store.keys()) {
+				if (el === element || !isInstance(el, Node)) continue;
+				if (element.contains(el))
+					out.push(el);
+			}
+			return out;
+		}
+		function observerAdded(addedNodes, is_root) {
+			let out = false;
+			for (const element of addedNodes) {
+				if (is_root) collectChildren(element).then(observerAdded);
+				if (!store.has(element)) continue;
+				const ls = store.get(element);
+				if (!ls.length_c) continue;
+				element.dispatchEvent(new Event(evc));
+				ls.connected = /* @__PURE__ */ new WeakSet();
+				ls.length_c = 0;
+				if (!ls.length_d) store.delete(element);
+				out = true;
+			}
+			return out;
+		}
+		function observerRemoved(removedNodes, is_root) {
+			let out = false;
+			for (const element of removedNodes) {
+				if (is_root) collectChildren(element).then(observerRemoved);
+				if (!store.has(element)) continue;
+				const ls = store.get(element);
+				if (!ls.length_d) continue;
+				(globalThis.queueMicrotask || setTimeout)(dispatchRemove(element));
+				out = true;
+			}
+			return out;
+		}
+		function dispatchRemove(element) {
+			return () => {
+				if (element.isConnected) return;
+				element.dispatchEvent(new Event(evd));
+				store.delete(element);
+			};
+		}
+	}
+
+	// src/customElement.js
+	function customElementRender(target, render, props = observedAttributes2) {
+		const custom_element = target.host || target;
+		scope.push({
+			scope: custom_element,
+			host: (...c) => c.length ? c.forEach((c2) => c2(custom_element)) : custom_element
+		});
+		if (typeof props === "function") props = props.call(custom_element, custom_element);
+		const is_lte = custom_element[keyLTE];
+		if (!is_lte) lifecyclesToEvents(custom_element);
+		const out = render.call(custom_element, props);
+		if (!is_lte) custom_element.dispatchEvent(new Event(evc));
+		if (target.nodeType === 11 && typeof target.mode === "string")
+			custom_element.addEventListener(evd, c_ch_o.observe(target), { once: true });
+		scope.pop();
+		return target.append(out);
+	}
+	function lifecyclesToEvents(class_declaration) {
+		wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail) {
+			target.apply(thisArg, detail);
+			thisArg.dispatchEvent(new Event(evc));
+		});
+		wrapMethod(class_declaration.prototype, "disconnectedCallback", function(target, thisArg, detail) {
+			target.apply(thisArg, detail);
+			(globalThis.queueMicrotask || setTimeout)(
+				() => !thisArg.isConnected && thisArg.dispatchEvent(new Event(evd))
+			);
+		});
+		wrapMethod(class_declaration.prototype, "attributeChangedCallback", function(target, thisArg, detail) {
+			const [attribute, , value] = detail;
+			thisArg.dispatchEvent(new CustomEvent(eva, {
+				detail: [attribute, value]
 			}));
-			return u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect();
-		},
-		onConnected(s, u) {
-			d();
-			let i = c(s);
-			i.connected.has(u) || (i.connected.add(u), i.length_c += 1);
-		},
-		offConnected(s, u) {
-			if (!t.has(s)) return;
-			let i = t.get(s);
-			i.connected.has(u) && (i.connected.delete(u), i.length_c -= 1, o(s, i));
-		},
-		onDisconnected(s, u) {
-			d();
-			let i = c(s);
-			i.disconnected.has(u) || (i.disconnected.add(u), i.length_d += 1);
-		},
-		offDisconnected(s, u) {
-			if (!t.has(s)) return;
-			let i = t.get(s);
-			i.disconnected.has(u) && (i.disconnected.delete(u), i.length_d -= 1, o(s, i));
-		}
-	};
-	function o(s, u) {
-		u.length_c || u.length_d || (t.delete(s), f());
-	}
-	function c(s) {
-		if (t.has(s)) return t.get(s);
-		let u = {
-			connected: /* @__PURE__ */ new WeakSet(),
-			length_c: 0,
-			disconnected: /* @__PURE__ */ new WeakSet(),
-			length_d: 0
-		};
-		return t.set(s, u), u;
-	}
-	function d() {
-		e || (e = !0, n.observe(a.D.body, { childList: !0, subtree: !0 }));
-	}
-	function f() {
-		!e || t.size || (e = !1, n.disconnect());
-	}
-	function p() {
-		return new Promise(function(s) {
-			(requestIdleCallback || requestAnimationFrame)(s);
+			target.apply(thisArg, detail);
 		});
+		class_declaration.prototype[keyLTE] = true;
+		return class_declaration;
 	}
-	async function b(s) {
-		t.size > 30 && await p();
-		let u = [];
-		if (!(s instanceof Node)) return u;
-		for (let i of t.keys())
-			i === s || !(i instanceof Node) || s.contains(i) && u.push(i);
-		return u;
+	function wrapMethod(obj, method, apply) {
+		obj[method] = new Proxy(obj[method] || (() => {
+		}), { apply });
 	}
-	function l(s, u) {
-		let i = !1;
-		for (let h of s) {
-			if (u && b(h).then(l), !t.has(h)) continue;
-			let A = t.get(h);
-			A.length_c && (h.dispatchEvent(new Event(v)), A.connected = /* @__PURE__ */ new WeakSet(), A.length_c = 0, A.length_d || t.delete(h), i = !0);
+	function observedAttributes2(instance) {
+		return observedAttributes(instance, (i, n) => i.getAttribute(n));
+	}
+
+	// src/events.js
+	function dispatchEvent(name, options, host) {
+		if (typeof options === "function") {
+			host = options;
+			options = null;
 		}
-		return i;
-	}
-	function E(s, u) {
-		let i = !1;
-		for (let h of s)
-			u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(I(h)), i = !0);
-		return i;
-	}
-	function I(s) {
-		return () => {
-			s.isConnected || (s.dispatchEvent(new Event(w)), t.delete(s));
+		if (!options) options = {};
+		return function dispatch(element, ...d) {
+			if (host) {
+				d.unshift(element);
+				element = typeof host === "function" ? host() : host;
+			}
+			const event = d.length ? new CustomEvent(name, oAssign({ detail: d[0] }, options)) : new Event(name, options);
+			return element.dispatchEvent(event);
 		};
 	}
-}
-
-// src/customElement.js
-function wt(t, e, r = rt) {
-	let n = t.host || t;
-	O.push({
-		scope: n,
-		host: (...d) => d.length ? d.forEach((f) => f(n)) : n
-	}), typeof r == "function" && (r = r.call(n, n));
-	let o = n[x];
-	o || nt(n);
-	let c = e.call(n, r);
-	return o || n.dispatchEvent(new Event(v)), t.nodeType === 11 && typeof t.mode == "string" && n.addEventListener(w, _.observe(t), { once: !0 }), O.pop(), t.append(c);
-}
-function nt(t) {
-	return j(t.prototype, "connectedCallback", function(e, r, n) {
-		e.apply(r, n), r.dispatchEvent(new Event(v));
-	}), j(t.prototype, "disconnectedCallback", function(e, r, n) {
-		e.apply(r, n), (globalThis.queueMicrotask || setTimeout)(
-			() => !r.isConnected && r.dispatchEvent(new Event(w))
-		);
-	}), j(t.prototype, "attributeChangedCallback", function(e, r, n) {
-		let [o, , c] = n;
-		r.dispatchEvent(new CustomEvent(y, {
-			detail: [o, c]
-		})), e.apply(r, n);
-	}), t.prototype[x] = !0, t;
-}
-function j(t, e, r) {
-	t[e] = new Proxy(t[e] || (() => {
-	}), { apply: r });
-}
-function rt(t) {
-	return q(t, (e, r) => e.getAttribute(r));
-}
-
-// src/events.js
-function yt(t, e, r) {
-	return e || (e = {}), function(o, ...c) {
-		r && (c.unshift(o), o = typeof r == "function" ? r() : r);
-		let d = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
-		return o.dispatchEvent(d);
+	function on(event, listener, options) {
+		return function registerElement(element) {
+			element.addEventListener(event, listener, options);
+			return element;
+		};
+	}
+	var lifeOptions = (obj) => oAssign({}, typeof obj === "object" ? obj : null, { once: true });
+	on.connected = function(listener, options) {
+		options = lifeOptions(options);
+		return function registerElement(element) {
+			element.addEventListener(evc, listener, options);
+			if (element[keyLTE]) return element;
+			if (element.isConnected) return element.dispatchEvent(new Event(evc)), element;
+			const c = onAbort(options.signal, () => c_ch_o.offConnected(element, listener));
+			if (c) c_ch_o.onConnected(element, listener);
+			return element;
+		};
 	};
-}
-function D(t, e, r) {
-	return function(o) {
-		return o.addEventListener(t, e, r), o;
+	on.disconnected = function(listener, options) {
+		options = lifeOptions(options);
+		return function registerElement(element) {
+			element.addEventListener(evd, listener, options);
+			if (element[keyLTE]) return element;
+			const c = onAbort(options.signal, () => c_ch_o.offDisconnected(element, listener));
+			if (c) c_ch_o.onDisconnected(element, listener);
+			return element;
+		};
 	};
-}
-var B = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
-D.connected = function(t, e) {
-	return e = B(e), function(n) {
-		return n.addEventListener(v, t, e), n[x] ? n : n.isConnected ? (n.dispatchEvent(new Event(v)), n) : (L(e.signal, () => _.offConnected(n, t)) && _.onConnected(n, t), n);
+	var store_abort = /* @__PURE__ */ new WeakMap();
+	on.disconnectedAsAbort = function(host) {
+		if (store_abort.has(host)) return store_abort.get(host);
+		const a = new AbortController();
+		store_abort.set(host, a);
+		host(on.disconnected(() => a.abort()));
+		return a.signal;
 	};
-};
-D.disconnected = function(t, e) {
-	return e = B(e), function(n) {
-		return n.addEventListener(w, t, e), n[x] || L(e.signal, () => _.offDisconnected(n, t)) && _.onDisconnected(n, t), n;
+	var els_attribute_store = /* @__PURE__ */ new WeakSet();
+	on.attributeChanged = function(listener, options) {
+		if (typeof options !== "object")
+			options = {};
+		return function registerElement(element) {
+			element.addEventListener(eva, listener, options);
+			if (element[keyLTE] || els_attribute_store.has(element))
+				return element;
+			if (!enviroment.M) return element;
+			const observer = new enviroment.M(function(mutations) {
+				for (const { attributeName, target } of mutations)
+					target.dispatchEvent(
+						new CustomEvent(eva, { detail: [attributeName, target.getAttribute(attributeName)] })
+					);
+			});
+			const c = onAbort(options.signal, () => observer.disconnect());
+			if (c) observer.observe(element, { attributes: true });
+			return element;
+		};
 	};
-};
-var W = /* @__PURE__ */ new WeakMap();
-D.disconnectedAsAbort = function(t) {
-	if (W.has(t)) return W.get(t);
-	let e = new AbortController();
-	return W.set(t, e), t(D.disconnected(() => e.abort())), e;
-};
-var ot = /* @__PURE__ */ new WeakSet();
-D.attributeChanged = function(t, e) {
-	return typeof e != "object" && (e = {}), function(n) {
-		if (n.addEventListener(y, t, e), n[x] || ot.has(n) || !a.M) return n;
-		let o = new a.M(function(d) {
-			for (let { attributeName: f, target: p } of d)
-				p.dispatchEvent(
-					new CustomEvent(y, { detail: [f, p.getAttribute(f)] })
-				);
-		});
-		return L(e.signal, () => o.disconnect()) && o.observe(n, { attributes: !0 }), n;
-	};
-};
-
-globalThis.dde= {
-	assign: R,
-	assignAttribute: U,
-	chainableAppend: J,
-	classListDeclarative: K,
-	createElement: P,
-	createElementNS: pt,
-	customElementRender: wt,
-	customElementWithDDE: nt,
-	dispatchEvent: yt,
-	el: P,
-	elNS: pt,
-	elementAttribute: Q,
-	lifecyclesToEvents: nt,
-	observedAttributes: rt,
-	on: D,
-	queue: dt,
-	registerReactivity: Z,
-	scope: O,
-	simulateSlots: lt
-};
-
-})();
\ No newline at end of file
+	return __toCommonJS(index_exports);
+})();
diff --git a/dist/dde.min.d.ts b/dist/dde.min.d.ts
new file mode 100644
index 0000000..97d43d5
--- /dev/null
+++ b/dist/dde.min.d.ts
@@ -0,0 +1,784 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export interface Signal<V, A> {
+	/** The current value of the signal */
+	get(): V;
+	/** Set new value of the signal */
+	set(value: V): V;
+	toJSON(): V;
+	valueOf(): V;
+}
+export type Action<V> = (this: {
+	value: V;
+	stopPropagation(): void;
+}, ...a: any[]) => typeof signal._ | void;
+//type SymbolSignal= Symbol;
+export type SymbolOnclear = symbol;
+export type Actions<V> = Record<string | SymbolOnclear, Action<V>>;
+export type OnListenerOptions = Pick<AddEventListenerOptions, "signal"> & {
+	first_time?: boolean;
+};
+export interface signal {
+	_: Symbol;
+	/**
+	 * Computations signal. This creates a signal which is computed from other signals.
+	 * */
+	<V extends () => any>(computation: V): Signal<ReturnType<V>, {}>;
+	/**
+	 * Simple example:
+	 * ```js
+	 * const hello= S("Hello Signal");
+	 * ```
+	 * …simple todo signal:
+	 * ```js
+	 * const todos= S([], {
+	 * 	add(v){ this.value.push(S(v)); },
+	 * 	remove(i){ this.value.splice(i, 1); },
+	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
+	 * });
+	 * ```
+	 * …computed signal:
+	 * ```js
+	 * const name= S("Jan");
+	 * const surname= S("Andrle");
+	 * const fullname= S(()=> name.get()+" "+surname.get());
+	 * ```
+	 * @param value Initial signal value. Or function computing value from other signals.
+	 * @param actions Use to define actions on the signal. Such as add item to the array.
+	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
+	 *		by `S.clear`.
+	 * */
+	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(signal: S, name: N, ...params: A[N] extends (...args: infer P) => any ? P : never): void;
+	clear(...signals: Signal<any, any>[]): void;
+	on<T>(signal: Signal<T, any>, onchange: (a: T) => void, options?: OnListenerOptions): void;
+	symbols: {
+		//signal: SymbolSignal;
+		onclear: SymbolOnclear;
+	};
+	/**
+	 * Reactive element, which is rendered based on the given signal.
+	 * ```js
+	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
+	 * S.el(listS, list=> list.map(li=> el("li", li)));
+	 * ```
+	 * */
+	el<S extends any>(signal: Signal<S, any>, el: (v: S) => Element | Element[] | DocumentFragment): DocumentFragment;
+	observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
+}
+declare const signal: signal;
+declare global {
+	type ddeSignal<T, A = {}> = Signal<T, A>;
+	type ddeAction<V> = Action<V>;
+	type ddeActions<V> = Actions<V>;
+}
+export type CustomElementTagNameMap = {
+	"#text": Text;
+	"#comment": Comment;
+};
+export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
+declare global {
+	type ddeComponentAttributes = Record<any, any> | undefined;
+	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any;
+	type ddeString = string | Signal<string, {}>;
+	type ddeStringable = ddeString | number | Signal<number, {}>;
+}
+export type PascalCase = `${Capitalize<string>}${string}`;
+export type AttrsModified = {
+	/**
+	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
+	 */
+	style: Partial<CSSStyleDeclaration> | ddeString | Partial<{
+		[K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], {}>;
+	}>;
+	/**
+	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
+	 * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
+	 * for others.
+	 */
+	classList: Record<string, -1 | 0 | 1 | boolean | Signal<-1 | 0 | 1 | boolean, {}>>;
+	/**
+	 * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
+	 * Values are converted to string (see {@link DOMStringMap}).
+	 *
+	 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
+	 * */
+	dataset: Record<string, ddeStringable>;
+	/**
+	 * Sets `aria-*` simiraly to `dataset`
+	 * */
+	ariaset: Record<string, ddeString>;
+} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString> & Record<`.${string}`, any>;
+export type _fromElsInterfaces<EL extends SupportedElement> = Omit<EL, keyof AttrsModified>;
+export type IsReadonly<T, K extends keyof T> = T extends {
+	readonly [P in K]: T[K];
+} ? true : false;
+/**
+ * Just element attributtes
+ *
+ * In most cases, you can use native propertie such as
+ * [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on
+ * (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
+ *
+ * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
+ * @private
+ */
+export type ElementAttributes<T extends SupportedElement> = Partial<{
+	[K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] extends ((...p: any[]) => any) ? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>) => Signal<ReturnType<_fromElsInterfaces<T>[K]>, {}>) : (IsReadonly<_fromElsInterfaces<T>, K> extends false ? _fromElsInterfaces<T>[K] | Signal<_fromElsInterfaces<T>[K], {}> : ddeStringable);
+} & AttrsModified> & Record<string, any>;
+export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El;
+export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El;
+export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT];
+export type ExtendedHTMLElementTagNameMap = HTMLElementTagNameMap & CustomElementTagNameMap;
+export namespace el {
+	/**
+	 * Creates a marker comment for elements
+	 *
+	 * @param attrs - Marker attributes
+	 * @param [is_open=false] - Whether the marker is open-ended
+	 * @returns Comment node marker
+	 */
+	export function mark(attrs: {
+		type: "component" | "reactive" | "later";
+		name?: string;
+		host?: "this" | "parentElement";
+	}, is_open?: boolean): Comment;
+}
+export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>, ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<A extends {
+	textContent: ddeStringable;
+}, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>["textContent"], ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(tag_name: TAG, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable, ...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[]): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement;
+export function el(tag_name?: "<>"): ddeDocumentFragment;
+export function el(tag_name: string, attrs?: ElementAttributes<HTMLElement> | ddeStringable, ...addons: ddeElementAddon<HTMLElement>[]): ddeHTMLElement;
+export function elNS(namespace: "http://www.w3.org/2000/svg"): <TAG extends keyof SVGElementTagNameMap & string, EL extends (TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement)>(tag_name: TAG, attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable, ...addons: ddeElementAddon<NoInfer<EL>>[]) => TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement;
+export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG extends keyof MathMLElementTagNameMap & string, EL extends (TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement)>(tag_name: TAG, attrs?: ddeStringable | Partial<{
+	[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
+}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
+export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
+export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
+/** Simulate slots for ddeComponents */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
+/**
+ * Simulate slots in Custom Elements without using `shadowRoot`.
+ * @param el Custom Element root element
+ * @param body Body of the custom element
+ * */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void;
+export interface On {
+	/** Listens to the DOM event. See {@link Document.addEventListener} */
+	<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
+	<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+		string,
+		string
+	]>) => any, options?: AddEventListenerOptions): EE;
+}
+export const on: On;
+export type Scope = {
+	scope: Node | Function | Object;
+	host: ddeElementAddon<any>;
+	custom_element: false | HTMLElement;
+	prevent: boolean;
+};
+/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
+export const scope: {
+	current: Scope;
+	/** Stops all automatizations. E. g. signals used as attributes in current scope
+	 * registers removing these listeners (and clean signal if no other listeners are detected)
+	 * on `disconnected` event. */
+	preventDefault<T extends boolean>(prevent: T): T;
+	/**
+	 * This represents reference to the current host element — `scope.host()`.
+	 * It can be also used to register Addon(s) (functions to be called when component is initized)
+	 * — `scope.host(on.connected(console.log))`.
+	 * */
+	host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement;
+	state: Scope[];
+	/** Adds new child scope. All attributes are inherited by default. */
+	push(scope?: Partial<Scope>): ReturnType<Array<Scope>["push"]>;
+	/** Adds root scope as a child of the current scope. */
+	pushRoot(): ReturnType<Array<Scope>["push"]>;
+	/** Removes last/current child scope. */
+	pop(): ReturnType<Array<Scope>["pop"]>;
+};
+export function customElementRender<EL extends HTMLElement, P extends any = Record<string, string | Signal<string, {}>>>(target: ShadowRoot | EL, render: (props: P) => SupportedElement | DocumentFragment, props?: P | ((el: EL) => P)): EL;
+export function customElementWithDDE<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function lifecyclesToEvents<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function observedAttributes(custom_element: HTMLElement): Record<string, string>;
+/**
+ * This is used primarly for server side rendering. To be sure that all async operations
+ * are finished before the page is sent to the client.
+ * ```
+ *	// on component
+ *	function component(){
+ *		…
+ *		queue(fetch(...).then(...));
+ *	}
+ *
+ * // building the page
+ * async function build(){
+ *		const { component }= await import("./component.js");
+ *		document.body.append(el(component));
+ *		await queue();
+ *		retutn document.body.innerHTML;
+ *	}
+ * ```
+ * */
+export function queue(promise?: Promise<unknown>): Promise<unknown>;
+/* TypeScript MEH */
+declare global {
+	type ddeAppend<el> = (...nodes: (Node | string)[]) => el;
+	interface ddeDocumentFragment extends DocumentFragment {
+		append: ddeAppend<ddeDocumentFragment>;
+	}
+	interface ddeHTMLElement extends HTMLElement {
+		append: ddeAppend<ddeHTMLElement>;
+	}
+	interface ddeSVGElement extends SVGElement {
+		append: ddeAppend<ddeSVGElement>;
+	}
+	interface ddeMathMLElement extends MathMLElement {
+		append: ddeAppend<ddeMathMLElement>;
+	}
+	interface ddeHTMLElementTagNameMap {
+		"a": ddeHTMLAnchorElement;
+		"area": ddeHTMLAreaElement;
+		"audio": ddeHTMLAudioElement;
+		"base": ddeHTMLBaseElement;
+		"blockquote": ddeHTMLQuoteElement;
+		"body": ddeHTMLBodyElement;
+		"br": ddeHTMLBRElement;
+		"button": ddeHTMLButtonElement;
+		"canvas": ddeHTMLCanvasElement;
+		"caption": ddeHTMLTableCaptionElement;
+		"col": ddeHTMLTableColElement;
+		"colgroup": ddeHTMLTableColElement;
+		"data": ddeHTMLDataElement;
+		"datalist": ddeHTMLDataListElement;
+		"del": ddeHTMLModElement;
+		"details": ddeHTMLDetailsElement;
+		"dialog": ddeHTMLDialogElement;
+		"div": ddeHTMLDivElement;
+		"dl": ddeHTMLDListElement;
+		"embed": ddeHTMLEmbedElement;
+		"fieldset": ddeHTMLFieldSetElement;
+		"form": ddeHTMLFormElement;
+		"h1": ddeHTMLHeadingElement;
+		"h2": ddeHTMLHeadingElement;
+		"h3": ddeHTMLHeadingElement;
+		"h4": ddeHTMLHeadingElement;
+		"h5": ddeHTMLHeadingElement;
+		"h6": ddeHTMLHeadingElement;
+		"head": ddeHTMLHeadElement;
+		"hr": ddeHTMLHRElement;
+		"html": ddeHTMLHtmlElement;
+		"iframe": ddeHTMLIFrameElement;
+		"img": ddeHTMLImageElement;
+		"input": ddeHTMLInputElement;
+		"ins": ddeHTMLModElement;
+		"label": ddeHTMLLabelElement;
+		"legend": ddeHTMLLegendElement;
+		"li": ddeHTMLLIElement;
+		"link": ddeHTMLLinkElement;
+		"map": ddeHTMLMapElement;
+		"menu": ddeHTMLMenuElement;
+		"meta": ddeHTMLMetaElement;
+		"meter": ddeHTMLMeterElement;
+		"object": ddeHTMLObjectElement;
+		"ol": ddeHTMLOListElement;
+		"optgroup": ddeHTMLOptGroupElement;
+		"option": ddeHTMLOptionElement;
+		"output": ddeHTMLOutputElement;
+		"p": ddeHTMLParagraphElement;
+		"picture": ddeHTMLPictureElement;
+		"pre": ddeHTMLPreElement;
+		"progress": ddeHTMLProgressElement;
+		"q": ddeHTMLQuoteElement;
+		"script": ddeHTMLScriptElement;
+		"select": ddeHTMLSelectElement;
+		"slot": ddeHTMLSlotElement;
+		"source": ddeHTMLSourceElement;
+		"span": ddeHTMLSpanElement;
+		"style": ddeHTMLStyleElement;
+		"table": ddeHTMLTableElement;
+		"tbody": ddeHTMLTableSectionElement;
+		"td": ddeHTMLTableCellElement;
+		"template": ddeHTMLTemplateElement;
+		"textarea": ddeHTMLTextAreaElement;
+		"tfoot": ddeHTMLTableSectionElement;
+		"th": ddeHTMLTableCellElement;
+		"thead": ddeHTMLTableSectionElement;
+		"time": ddeHTMLTimeElement;
+		"title": ddeHTMLTitleElement;
+		"tr": ddeHTMLTableRowElement;
+		"track": ddeHTMLTrackElement;
+		"ul": ddeHTMLUListElement;
+		"video": ddeHTMLVideoElement;
+	}
+	interface ddeSVGElementTagNameMap {
+		"a": ddeSVGAElement;
+		"animate": ddeSVGAnimateElement;
+		"animateMotion": ddeSVGAnimateMotionElement;
+		"animateTransform": ddeSVGAnimateTransformElement;
+		"circle": ddeSVGCircleElement;
+		"clipPath": ddeSVGClipPathElement;
+		"defs": ddeSVGDefsElement;
+		"desc": ddeSVGDescElement;
+		"ellipse": ddeSVGEllipseElement;
+		"feBlend": ddeSVGFEBlendElement;
+		"feColorMatrix": ddeSVGFEColorMatrixElement;
+		"feComponentTransfer": ddeSVGFEComponentTransferElement;
+		"feComposite": ddeSVGFECompositeElement;
+		"feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
+		"feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
+		"feDisplacementMap": ddeSVGFEDisplacementMapElement;
+		"feDistantLight": ddeSVGFEDistantLightElement;
+		"feDropShadow": ddeSVGFEDropShadowElement;
+		"feFlood": ddeSVGFEFloodElement;
+		"feFuncA": ddeSVGFEFuncAElement;
+		"feFuncB": ddeSVGFEFuncBElement;
+		"feFuncG": ddeSVGFEFuncGElement;
+		"feFuncR": ddeSVGFEFuncRElement;
+		"feGaussianBlur": ddeSVGFEGaussianBlurElement;
+		"feImage": ddeSVGFEImageElement;
+		"feMerge": ddeSVGFEMergeElement;
+		"feMergeNode": ddeSVGFEMergeNodeElement;
+		"feMorphology": ddeSVGFEMorphologyElement;
+		"feOffset": ddeSVGFEOffsetElement;
+		"fePointLight": ddeSVGFEPointLightElement;
+		"feSpecularLighting": ddeSVGFESpecularLightingElement;
+		"feSpotLight": ddeSVGFESpotLightElement;
+		"feTile": ddeSVGFETileElement;
+		"feTurbulence": ddeSVGFETurbulenceElement;
+		"filter": ddeSVGFilterElement;
+		"foreignObject": ddeSVGForeignObjectElement;
+		"g": ddeSVGGElement;
+		"image": ddeSVGImageElement;
+		"line": ddeSVGLineElement;
+		"linearGradient": ddeSVGLinearGradientElement;
+		"marker": ddeSVGMarkerElement;
+		"mask": ddeSVGMaskElement;
+		"metadata": ddeSVGMetadataElement;
+		"mpath": ddeSVGMPathElement;
+		"path": ddeSVGPathElement;
+		"pattern": ddeSVGPatternElement;
+		"polygon": ddeSVGPolygonElement;
+		"polyline": ddeSVGPolylineElement;
+		"radialGradient": ddeSVGRadialGradientElement;
+		"rect": ddeSVGRectElement;
+		"script": ddeSVGScriptElement;
+		"set": ddeSVGSetElement;
+		"stop": ddeSVGStopElement;
+		"style": ddeSVGStyleElement;
+		"svg": ddeSVGSVGElement;
+		"switch": ddeSVGSwitchElement;
+		"symbol": ddeSVGSymbolElement;
+		"text": ddeSVGTextElement;
+		"textPath": ddeSVGTextPathElement;
+		"title": ddeSVGTitleElement;
+		"tspan": ddeSVGTSpanElement;
+		"use": ddeSVGUseElement;
+		"view": ddeSVGViewElement;
+	}
+}
+// editorconfig-checker-disable
+export interface ddeHTMLAnchorElement extends HTMLAnchorElement {
+	append: ddeAppend<ddeHTMLAnchorElement>;
+}
+export interface ddeHTMLAreaElement extends HTMLAreaElement {
+	append: ddeAppend<ddeHTMLAreaElement>;
+}
+export interface ddeHTMLAudioElement extends HTMLAudioElement {
+	append: ddeAppend<ddeHTMLAudioElement>;
+}
+export interface ddeHTMLBaseElement extends HTMLBaseElement {
+	append: ddeAppend<ddeHTMLBaseElement>;
+}
+export interface ddeHTMLQuoteElement extends HTMLQuoteElement {
+	append: ddeAppend<ddeHTMLQuoteElement>;
+}
+export interface ddeHTMLBodyElement extends HTMLBodyElement {
+	append: ddeAppend<ddeHTMLBodyElement>;
+}
+export interface ddeHTMLBRElement extends HTMLBRElement {
+	append: ddeAppend<ddeHTMLBRElement>;
+}
+export interface ddeHTMLButtonElement extends HTMLButtonElement {
+	append: ddeAppend<ddeHTMLButtonElement>;
+}
+export interface ddeHTMLCanvasElement extends HTMLCanvasElement {
+	append: ddeAppend<ddeHTMLCanvasElement>;
+}
+export interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement {
+	append: ddeAppend<ddeHTMLTableCaptionElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLDataElement extends HTMLDataElement {
+	append: ddeAppend<ddeHTMLDataElement>;
+}
+export interface ddeHTMLDataListElement extends HTMLDataListElement {
+	append: ddeAppend<ddeHTMLDataListElement>;
+}
+export interface ddeHTMLModElement extends HTMLModElement {
+	append: ddeAppend<ddeHTMLModElement>;
+}
+export interface ddeHTMLDetailsElement extends HTMLDetailsElement {
+	append: ddeAppend<ddeHTMLDetailsElement>;
+}
+export interface ddeHTMLDialogElement extends HTMLDialogElement {
+	append: ddeAppend<ddeHTMLDialogElement>;
+}
+export interface ddeHTMLDivElement extends HTMLDivElement {
+	append: ddeAppend<ddeHTMLDivElement>;
+}
+export interface ddeHTMLDListElement extends HTMLDListElement {
+	append: ddeAppend<ddeHTMLDListElement>;
+}
+export interface ddeHTMLEmbedElement extends HTMLEmbedElement {
+	append: ddeAppend<ddeHTMLEmbedElement>;
+}
+export interface ddeHTMLFieldSetElement extends HTMLFieldSetElement {
+	append: ddeAppend<ddeHTMLFieldSetElement>;
+}
+export interface ddeHTMLFormElement extends HTMLFormElement {
+	append: ddeAppend<ddeHTMLFormElement>;
+}
+export interface ddeHTMLHeadingElement extends HTMLHeadingElement {
+	append: ddeAppend<ddeHTMLHeadingElement>;
+}
+export interface ddeHTMLHeadElement extends HTMLHeadElement {
+	append: ddeAppend<ddeHTMLHeadElement>;
+}
+export interface ddeHTMLHRElement extends HTMLHRElement {
+	append: ddeAppend<ddeHTMLHRElement>;
+}
+export interface ddeHTMLHtmlElement extends HTMLHtmlElement {
+	append: ddeAppend<ddeHTMLHtmlElement>;
+}
+export interface ddeHTMLIFrameElement extends HTMLIFrameElement {
+	append: ddeAppend<ddeHTMLIFrameElement>;
+}
+export interface ddeHTMLImageElement extends HTMLImageElement {
+	append: ddeAppend<ddeHTMLImageElement>;
+}
+export interface ddeHTMLInputElement extends HTMLInputElement {
+	append: ddeAppend<ddeHTMLInputElement>;
+}
+export interface ddeHTMLLabelElement extends HTMLLabelElement {
+	append: ddeAppend<ddeHTMLLabelElement>;
+}
+export interface ddeHTMLLegendElement extends HTMLLegendElement {
+	append: ddeAppend<ddeHTMLLegendElement>;
+}
+export interface ddeHTMLLIElement extends HTMLLIElement {
+	append: ddeAppend<ddeHTMLLIElement>;
+}
+export interface ddeHTMLLinkElement extends HTMLLinkElement {
+	append: ddeAppend<ddeHTMLLinkElement>;
+}
+export interface ddeHTMLMapElement extends HTMLMapElement {
+	append: ddeAppend<ddeHTMLMapElement>;
+}
+export interface ddeHTMLMenuElement extends HTMLMenuElement {
+	append: ddeAppend<ddeHTMLMenuElement>;
+}
+export interface ddeHTMLMetaElement extends HTMLMetaElement {
+	append: ddeAppend<ddeHTMLMetaElement>;
+}
+export interface ddeHTMLMeterElement extends HTMLMeterElement {
+	append: ddeAppend<ddeHTMLMeterElement>;
+}
+export interface ddeHTMLObjectElement extends HTMLObjectElement {
+	append: ddeAppend<ddeHTMLObjectElement>;
+}
+export interface ddeHTMLOListElement extends HTMLOListElement {
+	append: ddeAppend<ddeHTMLOListElement>;
+}
+export interface ddeHTMLOptGroupElement extends HTMLOptGroupElement {
+	append: ddeAppend<ddeHTMLOptGroupElement>;
+}
+export interface ddeHTMLOptionElement extends HTMLOptionElement {
+	append: ddeAppend<ddeHTMLOptionElement>;
+}
+export interface ddeHTMLOutputElement extends HTMLOutputElement {
+	append: ddeAppend<ddeHTMLOutputElement>;
+}
+export interface ddeHTMLParagraphElement extends HTMLParagraphElement {
+	append: ddeAppend<ddeHTMLParagraphElement>;
+}
+export interface ddeHTMLPictureElement extends HTMLPictureElement {
+	append: ddeAppend<ddeHTMLPictureElement>;
+}
+export interface ddeHTMLPreElement extends HTMLPreElement {
+	append: ddeAppend<ddeHTMLPreElement>;
+}
+export interface ddeHTMLProgressElement extends HTMLProgressElement {
+	append: ddeAppend<ddeHTMLProgressElement>;
+}
+export interface ddeHTMLScriptElement extends HTMLScriptElement {
+	append: ddeAppend<ddeHTMLScriptElement>;
+}
+export interface ddeHTMLSelectElement extends HTMLSelectElement {
+	append: ddeAppend<ddeHTMLSelectElement>;
+}
+export interface ddeHTMLSlotElement extends HTMLSlotElement {
+	append: ddeAppend<ddeHTMLSlotElement>;
+}
+export interface ddeHTMLSourceElement extends HTMLSourceElement {
+	append: ddeAppend<ddeHTMLSourceElement>;
+}
+export interface ddeHTMLSpanElement extends HTMLSpanElement {
+	append: ddeAppend<ddeHTMLSpanElement>;
+}
+export interface ddeHTMLStyleElement extends HTMLStyleElement {
+	append: ddeAppend<ddeHTMLStyleElement>;
+}
+export interface ddeHTMLTableElement extends HTMLTableElement {
+	append: ddeAppend<ddeHTMLTableElement>;
+}
+export interface ddeHTMLTableSectionElement extends HTMLTableSectionElement {
+	append: ddeAppend<ddeHTMLTableSectionElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTemplateElement extends HTMLTemplateElement {
+	append: ddeAppend<ddeHTMLTemplateElement>;
+}
+export interface ddeHTMLTextAreaElement extends HTMLTextAreaElement {
+	append: ddeAppend<ddeHTMLTextAreaElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTimeElement extends HTMLTimeElement {
+	append: ddeAppend<ddeHTMLTimeElement>;
+}
+export interface ddeHTMLTitleElement extends HTMLTitleElement {
+	append: ddeAppend<ddeHTMLTitleElement>;
+}
+export interface ddeHTMLTableRowElement extends HTMLTableRowElement {
+	append: ddeAppend<ddeHTMLTableRowElement>;
+}
+export interface ddeHTMLTrackElement extends HTMLTrackElement {
+	append: ddeAppend<ddeHTMLTrackElement>;
+}
+export interface ddeHTMLUListElement extends HTMLUListElement {
+	append: ddeAppend<ddeHTMLUListElement>;
+}
+export interface ddeHTMLVideoElement extends HTMLVideoElement {
+	append: ddeAppend<ddeHTMLVideoElement>;
+}
+export interface ddeSVGAElement extends SVGAElement {
+	append: ddeAppend<ddeSVGAElement>;
+}
+export interface ddeSVGAnimateElement extends SVGAnimateElement {
+	append: ddeAppend<ddeSVGAnimateElement>;
+}
+export interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement {
+	append: ddeAppend<ddeSVGAnimateMotionElement>;
+}
+export interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement {
+	append: ddeAppend<ddeSVGAnimateTransformElement>;
+}
+export interface ddeSVGCircleElement extends SVGCircleElement {
+	append: ddeAppend<ddeSVGCircleElement>;
+}
+export interface ddeSVGClipPathElement extends SVGClipPathElement {
+	append: ddeAppend<ddeSVGClipPathElement>;
+}
+export interface ddeSVGDefsElement extends SVGDefsElement {
+	append: ddeAppend<ddeSVGDefsElement>;
+}
+export interface ddeSVGDescElement extends SVGDescElement {
+	append: ddeAppend<ddeSVGDescElement>;
+}
+export interface ddeSVGEllipseElement extends SVGEllipseElement {
+	append: ddeAppend<ddeSVGEllipseElement>;
+}
+export interface ddeSVGFEBlendElement extends SVGFEBlendElement {
+	append: ddeAppend<ddeSVGFEBlendElement>;
+}
+export interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement {
+	append: ddeAppend<ddeSVGFEColorMatrixElement>;
+}
+export interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement {
+	append: ddeAppend<ddeSVGFEComponentTransferElement>;
+}
+export interface ddeSVGFECompositeElement extends SVGFECompositeElement {
+	append: ddeAppend<ddeSVGFECompositeElement>;
+}
+export interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement {
+	append: ddeAppend<ddeSVGFEConvolveMatrixElement>;
+}
+export interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement {
+	append: ddeAppend<ddeSVGFEDiffuseLightingElement>;
+}
+export interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement {
+	append: ddeAppend<ddeSVGFEDisplacementMapElement>;
+}
+export interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement {
+	append: ddeAppend<ddeSVGFEDistantLightElement>;
+}
+export interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement {
+	append: ddeAppend<ddeSVGFEDropShadowElement>;
+}
+export interface ddeSVGFEFloodElement extends SVGFEFloodElement {
+	append: ddeAppend<ddeSVGFEFloodElement>;
+}
+export interface ddeSVGFEFuncAElement extends SVGFEFuncAElement {
+	append: ddeAppend<ddeSVGFEFuncAElement>;
+}
+export interface ddeSVGFEFuncBElement extends SVGFEFuncBElement {
+	append: ddeAppend<ddeSVGFEFuncBElement>;
+}
+export interface ddeSVGFEFuncGElement extends SVGFEFuncGElement {
+	append: ddeAppend<ddeSVGFEFuncGElement>;
+}
+export interface ddeSVGFEFuncRElement extends SVGFEFuncRElement {
+	append: ddeAppend<ddeSVGFEFuncRElement>;
+}
+export interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement {
+	append: ddeAppend<ddeSVGFEGaussianBlurElement>;
+}
+export interface ddeSVGFEImageElement extends SVGFEImageElement {
+	append: ddeAppend<ddeSVGFEImageElement>;
+}
+export interface ddeSVGFEMergeElement extends SVGFEMergeElement {
+	append: ddeAppend<ddeSVGFEMergeElement>;
+}
+export interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement {
+	append: ddeAppend<ddeSVGFEMergeNodeElement>;
+}
+export interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement {
+	append: ddeAppend<ddeSVGFEMorphologyElement>;
+}
+export interface ddeSVGFEOffsetElement extends SVGFEOffsetElement {
+	append: ddeAppend<ddeSVGFEOffsetElement>;
+}
+export interface ddeSVGFEPointLightElement extends SVGFEPointLightElement {
+	append: ddeAppend<ddeSVGFEPointLightElement>;
+}
+export interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement {
+	append: ddeAppend<ddeSVGFESpecularLightingElement>;
+}
+export interface ddeSVGFESpotLightElement extends SVGFESpotLightElement {
+	append: ddeAppend<ddeSVGFESpotLightElement>;
+}
+export interface ddeSVGFETileElement extends SVGFETileElement {
+	append: ddeAppend<ddeSVGFETileElement>;
+}
+export interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement {
+	append: ddeAppend<ddeSVGFETurbulenceElement>;
+}
+export interface ddeSVGFilterElement extends SVGFilterElement {
+	append: ddeAppend<ddeSVGFilterElement>;
+}
+export interface ddeSVGForeignObjectElement extends SVGForeignObjectElement {
+	append: ddeAppend<ddeSVGForeignObjectElement>;
+}
+export interface ddeSVGGElement extends SVGGElement {
+	append: ddeAppend<ddeSVGGElement>;
+}
+export interface ddeSVGImageElement extends SVGImageElement {
+	append: ddeAppend<ddeSVGImageElement>;
+}
+export interface ddeSVGLineElement extends SVGLineElement {
+	append: ddeAppend<ddeSVGLineElement>;
+}
+export interface ddeSVGLinearGradientElement extends SVGLinearGradientElement {
+	append: ddeAppend<ddeSVGLinearGradientElement>;
+}
+export interface ddeSVGMarkerElement extends SVGMarkerElement {
+	append: ddeAppend<ddeSVGMarkerElement>;
+}
+export interface ddeSVGMaskElement extends SVGMaskElement {
+	append: ddeAppend<ddeSVGMaskElement>;
+}
+export interface ddeSVGMetadataElement extends SVGMetadataElement {
+	append: ddeAppend<ddeSVGMetadataElement>;
+}
+export interface ddeSVGMPathElement extends SVGMPathElement {
+	append: ddeAppend<ddeSVGMPathElement>;
+}
+export interface ddeSVGPathElement extends SVGPathElement {
+	append: ddeAppend<ddeSVGPathElement>;
+}
+export interface ddeSVGPatternElement extends SVGPatternElement {
+	append: ddeAppend<ddeSVGPatternElement>;
+}
+export interface ddeSVGPolygonElement extends SVGPolygonElement {
+	append: ddeAppend<ddeSVGPolygonElement>;
+}
+export interface ddeSVGPolylineElement extends SVGPolylineElement {
+	append: ddeAppend<ddeSVGPolylineElement>;
+}
+export interface ddeSVGRadialGradientElement extends SVGRadialGradientElement {
+	append: ddeAppend<ddeSVGRadialGradientElement>;
+}
+export interface ddeSVGRectElement extends SVGRectElement {
+	append: ddeAppend<ddeSVGRectElement>;
+}
+export interface ddeSVGScriptElement extends SVGScriptElement {
+	append: ddeAppend<ddeSVGScriptElement>;
+}
+export interface ddeSVGSetElement extends SVGSetElement {
+	append: ddeAppend<ddeSVGSetElement>;
+}
+export interface ddeSVGStopElement extends SVGStopElement {
+	append: ddeAppend<ddeSVGStopElement>;
+}
+export interface ddeSVGStyleElement extends SVGStyleElement {
+	append: ddeAppend<ddeSVGStyleElement>;
+}
+export interface ddeSVGSVGElement extends SVGSVGElement {
+	append: ddeAppend<ddeSVGSVGElement>;
+}
+export interface ddeSVGSwitchElement extends SVGSwitchElement {
+	append: ddeAppend<ddeSVGSwitchElement>;
+}
+export interface ddeSVGSymbolElement extends SVGSymbolElement {
+	append: ddeAppend<ddeSVGSymbolElement>;
+}
+export interface ddeSVGTextElement extends SVGTextElement {
+	append: ddeAppend<ddeSVGTextElement>;
+}
+export interface ddeSVGTextPathElement extends SVGTextPathElement {
+	append: ddeAppend<ddeSVGTextPathElement>;
+}
+export interface ddeSVGTitleElement extends SVGTitleElement {
+	append: ddeAppend<ddeSVGTitleElement>;
+}
+export interface ddeSVGTSpanElement extends SVGTSpanElement {
+	append: ddeAppend<ddeSVGTSpanElement>;
+}
+export interface ddeSVGUseElement extends SVGUseElement {
+	append: ddeAppend<ddeSVGUseElement>;
+}
+export interface ddeSVGViewElement extends SVGViewElement {
+	append: ddeAppend<ddeSVGViewElement>;
+}
+
+export {
+	dispatchEvent$1 as dispatchEvent,
+	el as createElement,
+	elNS as createElementNS,
+};
+
+export as namespace dde;
+
+export {};
diff --git a/dist/dde.min.js b/dist/dde.min.js
new file mode 100644
index 0000000..f49af19
--- /dev/null
+++ b/dist/dde.min.js
@@ -0,0 +1 @@
+var dde=(()=>{var k=Object.defineProperty;var nt=Object.getOwnPropertyDescriptor;var rt=Object.getOwnPropertyNames;var ot=Object.prototype.hasOwnProperty;var ct=(t,e)=>{for(var n in e)k(t,n,{get:e[n],enumerable:!0})},st=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of rt(e))!ot.call(t,o)&&o!==n&&k(t,o,{get:()=>e[o],enumerable:!(r=nt(e,o))||r.enumerable});return t};var it=t=>st(k({},"__esModule",{value:!0}),t);var Et={};ct(Et,{assign:()=>R,assignAttribute:()=>q,chainableAppend:()=>G,classListDeclarative:()=>J,createElement:()=>j,createElementNS:()=>dt,customElementRender:()=>vt,customElementWithDDE:()=>X,dispatchEvent:()=>mt,el:()=>j,elNS:()=>dt,elementAttribute:()=>K,lifecyclesToEvents:()=>X,observedAttributes:()=>Y,on:()=>O,queue:()=>at,registerReactivity:()=>H,scope:()=>y,simulateSlots:()=>pt});function w(t){return typeof t>"u"}function b(t,e){return t instanceof e}function $(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function v(...t){return Object.assign(...t)}function T(t,e){if(!t||!b(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function U(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[ut(o)]=e(t,o),r},{})}function ut(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var S={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function H(t,e=!0){return e?v(S,t):(Object.setPrototypeOf(t,S),t)}function N(t){return $(t,S)&&t!==S?t:S}var a={setDeleteAttr:ft,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function ft(t,e,n){if(Reflect.set(t,e,n),!!w(n)){if(Reflect.deleteProperty(t,e),b(t,a.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var A="__dde_lifecyclesToEvents",m="dde:connected",_="dde:disconnected",L="dde:attributeChanged";function at(t){return a.q(t)}var x=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],y={get current(){return x[x.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...x]},push(t={}){return x.push(v({},this.current,{prevent:!1},t))},pushRoot(){return x.push(x[0])},pop(){if(x.length!==1)return x.pop()}};function z(...t){return this.appendOriginal(...t),this}function G(t){return t.append===z||(t.appendOriginal=t.append,t.append=z),t}var P;function j(t,e,...n){let r=N(this),o=0,c,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let f=(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(E=>E(d)),void 0):d;y.push({scope:t,host:f}),c=t(e||void 0);let p=b(c,a.F);if(c.nodeName==="#comment")break;let g=j.mark({type:"component",name:t.name,host:p?"this":"parentElement"});c.prepend(g),p&&(d=g);break}case t==="#text":c=R.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=R.call(this,a.D.createDocumentFragment(),e);break;case!!P:c=R.call(this,a.D.createElementNS(P,t),e);break;case!c:c=R.call(this,a.D.createElement(t),e)}return G(c),d||(d=c),n.forEach(f=>f(d)),o&&y.pop(),o=2,c}j.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);return e&&(r.end=a.D.createComment("</dde:mark>")),r};function dt(t){let e=this;return function(...r){P=t;let o=j.call(e,...r);return P=void 0,o}}function pt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,d,f){if(f[0]===e)return c.apply(t,f);for(let p of f){let g=(p.slot||"")+n;try{K(p,"remove","slot")}catch{}let l=o[g];if(!l)return;l.name.startsWith(r)||(l.childNodes.forEach(E=>E.remove()),l.name=r+g),l.append(p)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var M=new WeakMap,{setDeleteAttr:B}=a;function R(t,...e){if(!e.length)return t;M.set(t,V(t,this));for(let[n,r]of Object.entries(v({},...e)))q.call(this,t,n,r);return M.delete(t),t}function q(t,e,n){let{setRemoveAttr:r,s:o}=V(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(f,p)=>q.call(c,t,f,p));let[d]=e;if(d==="=")return r(e.slice(1),n);if(d===".")return Z(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return B(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return W(o,e,t,n,Z.bind(null,t[e]));case"ariaset":return W(o,e,t,n,(f,p)=>r("aria-"+f,p));case"classList":return J.call(c,t,n)}return lt(t,e)?B(t,e,n):r(e,n)}function V(t,e){if(M.has(t))return M.get(t);let r=(b(t,a.S)?bt:ht).bind(null,t,"Attribute"),o=N(e);return{setRemoveAttr:r,s:o}}function J(t,e){let n=N(this);return W(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function K(t,e,n,r){return b(t,a.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function lt(t,e){if(!(e in t))return!1;let n=Q(t,e);return!w(n.set)}function Q(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||Q(t,e)}function W(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([f,p]){f&&(f=new c(f),f.target=e,p=t.processReactiveAttribute(n,f,p,o),o(f,p))})}function ht(t,e,n,r){return t[(w(r)?"remove":"set")+e](n,r)}function bt(t,e,n,r,o=null){return t[(w(r)?"remove":"set")+e+"NS"](o,n,r)}function Z(t,e,n){if(Reflect.set(t,e,n),!!w(n))return Reflect.deleteProperty(t,e)}var C=a.M?gt():new Proxy({},{get(){return()=>{}}});function gt(){let t=new Map,e=!1,n=s=>function(u){for(let i of u)if(i.type==="childList"){if(l(i.addedNodes,!0)){s();continue}E(i.removedNodes,!0)&&s()}},r=new a.M(n(f));return{observe(s){let u=new a.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){d();let i=c(s);i.connected.has(u)||(i.connected.add(u),i.length_c+=1)},offConnected(s,u){if(!t.has(s))return;let i=t.get(s);i.connected.has(u)&&(i.connected.delete(u),i.length_c-=1,o(s,i))},onDisconnected(s,u){d();let i=c(s);i.disconnected.has(u)||(i.disconnected.add(u),i.length_d+=1)},offDisconnected(s,u){if(!t.has(s))return;let i=t.get(s);i.disconnected.delete(u),i.length_d-=1,o(s,i)}};function o(s,u){u.length_c||u.length_d||(t.delete(s),f())}function c(s){if(t.has(s))return t.get(s);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,u),u}function d(){e||(e=!0,r.observe(a.D.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function g(s){t.size>30&&await p();let u=[];if(!b(s,Node))return u;for(let i of t.keys())i===s||!b(i,Node)||s.contains(i)&&u.push(i);return u}function l(s,u){let i=!1;for(let h of s){if(u&&g(h).then(l),!t.has(h))continue;let D=t.get(h);D.length_c&&(h.dispatchEvent(new Event(m)),D.connected=new WeakSet,D.length_c=0,D.length_d||t.delete(h),i=!0)}return i}function E(s,u){let i=!1;for(let h of s)u&&g(h).then(E),!(!t.has(h)||!t.get(h).length_d)&&((globalThis.queueMicrotask||setTimeout)(et(h)),i=!0);return i}function et(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(_)),t.delete(s))}}}function vt(t,e,n=Y){let r=t.host||t;y.push({scope:r,host:(...d)=>d.length?d.forEach(f=>f(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[A];o||X(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(m)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(_,C.observe(t),{once:!0}),y.pop(),t.append(c)}function X(t){return F(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(m))}),F(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(_)))}),F(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(L,{detail:[o,c]})),e.apply(n,r)}),t.prototype[A]=!0,t}function F(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function Y(t){return U(t,(e,n)=>e.getAttribute(n))}function mt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let d=c.length?new CustomEvent(t,v({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(d)}}function O(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var tt=t=>v({},typeof t=="object"?t:null,{once:!0});O.connected=function(t,e){return e=tt(e),function(r){return r.addEventListener(m,t,e),r[A]?r:r.isConnected?(r.dispatchEvent(new Event(m)),r):(T(e.signal,()=>C.offConnected(r,t))&&C.onConnected(r,t),r)}};O.disconnected=function(t,e){return e=tt(e),function(r){return r.addEventListener(_,t,e),r[A]||T(e.signal,()=>C.offDisconnected(r,t))&&C.onDisconnected(r,t),r}};var I=new WeakMap;O.disconnectedAsAbort=function(t){if(I.has(t))return I.get(t);let e=new AbortController;return I.set(t,e),t(O.disconnected(()=>e.abort())),e.signal};var xt=new WeakSet;O.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(L,t,e),r[A]||xt.has(r)||!a.M)return r;let o=new a.M(function(d){for(let{attributeName:f,target:p}of d)p.dispatchEvent(new CustomEvent(L,{detail:[f,p.getAttribute(f)]}))});return T(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}};return it(Et);})();
diff --git a/dist/esm-with-signals.d.min.ts b/dist/esm-with-signals.d.min.ts
new file mode 100644
index 0000000..49490b4
--- /dev/null
+++ b/dist/esm-with-signals.d.min.ts
@@ -0,0 +1,641 @@
+declare global{ /* ddeSignal */ }
+type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
+type SupportedElement=
+		HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
+	|	SVGElementTagNameMap[keyof SVGElementTagNameMap]
+	|	MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
+	|	CustomElementTagNameMap[keyof CustomElementTagNameMap]
+declare global {
+	type ddeComponentAttributes= Record<any, any> | undefined;
+	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
+	type ddeString= string | ddeSignal<string>
+	type ddeStringable= ddeString | number | ddeSignal<number>
+}
+type PascalCase=
+`${Capitalize<string>}${string}`;
+type AttrsModified= {
+	/**
+	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
+	 */
+	style: Partial<CSSStyleDeclaration> | ddeString
+		| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
+	/**
+	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
+	 * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
+	 * for others.
+	 */
+	classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
+	/**
+	 * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
+	 * Values are converted to string (see {@link DOMStringMap}).
+	 *
+	 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
+	 * */
+	dataset: Record<string, ddeStringable>,
+	/**
+	 * Sets `aria-*` simiraly to `dataset`
+	 * */
+	ariaset: Record<string, ddeString>,
+}	& Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString>
+	& Record<`.${string}`, any>
+type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
+type IsReadonly<T, K extends keyof T> =
+	T extends { readonly [P in K]: T[K] } ? true : false;
+/**
+ * Just element attributtes
+ *
+ * In most cases, you can use native propertie such as
+ * [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on
+ * (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
+ *
+ * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
+ * @private
+ */
+type ElementAttributes<T extends SupportedElement>= Partial<{
+	[K in keyof _fromElsInterfaces<T>]:
+		_fromElsInterfaces<T>[K] extends ((...p: any[])=> any)
+			? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>)=>
+																	ddeSignal<ReturnType<_fromElsInterfaces<T>[K]>>)
+			: (IsReadonly<_fromElsInterfaces<T>, K> extends false
+				? _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
+				: ddeStringable)
+} & AttrsModified> & Record<string, any>;
+export function classListDeclarative<El extends SupportedElement>(
+	element: El,
+	classList: AttrsModified["classList"]
+): El
+export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
+export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(
+	element: El,
+	attr: ATT,
+	value: ElementAttributes<El>[ATT]
+): ElementAttributes<El>[ATT]
+
+type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
+export namespace el {
+	/**
+	 * Creates a marker comment for elements
+	 *
+	 * @param attrs - Marker attributes
+	 * @param [is_open=false] - Whether the marker is open-ended
+	 * @returns Comment node marker
+	 */
+	export function mark(
+		attrs: { type: "component"|"reactive"|"later", name?: string, host?: "this"|"parentElement" },
+		is_open?: boolean
+	): Comment;
+}
+
+export function el<
+	A extends ddeComponentAttributes,
+	EL extends SupportedElement | ddeDocumentFragment
+>(
+	component: (attr: A, ...rest: any[])=> EL,
+	attrs?: NoInfer<A>,
+	...addons: ddeElementAddon<EL>[]
+): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
+	? EL
+	: ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement )
+export function el<
+	A extends { textContent: ddeStringable },
+	EL extends SupportedElement | ddeDocumentFragment
+>(
+	component: (attr: A, ...rest: any[])=> EL,
+	attrs?: NoInfer<A>["textContent"],
+	...addons: ddeElementAddon<EL>[]
+): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
+	? EL
+	: ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement )
+export function el<
+	TAG extends keyof ExtendedHTMLElementTagNameMap,
+>(
+	tag_name: TAG,
+	attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable,
+	...addons: ddeElementAddon<
+		ExtendedHTMLElementTagNameMap[NoInfer<TAG>]
+	>[], // TODO: for now addons must have the same element
+): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
+export function el(
+	tag_name?: "<>",
+): ddeDocumentFragment
+export function el(
+	tag_name: string,
+	attrs?: ElementAttributes<HTMLElement> | ddeStringable,
+	...addons: ddeElementAddon<HTMLElement>[]
+): ddeHTMLElement
+export { el as createElement }
+
+export function elNS(
+	namespace: "http://www.w3.org/2000/svg"
+): <
+	TAG extends keyof SVGElementTagNameMap & string,
+	EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
+>(
+	tag_name: TAG,
+	attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable,
+	...addons: ddeElementAddon<NoInfer<EL>>[]
+)=>  TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
+export function elNS(
+	namespace: "http://www.w3.org/1998/Math/MathML"
+): <
+	TAG extends keyof MathMLElementTagNameMap & string,
+	EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
+>(
+	tag_name: TAG,
+	attrs?: ddeStringable | Partial<{
+		[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
+	}>,
+	...addons: ddeElementAddon<NoInfer<EL>>[]
+)=> ddeMathMLElement
+export function elNS(
+	namespace: string
+): (
+	tag_name: string,
+	attrs?: string | ddeStringable | Record<string, any>,
+	...addons: ddeElementAddon<SupportedElement>[]
+)=> SupportedElement
+export { elNS as createElementNS }
+
+export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
+/** Simulate slots for ddeComponents */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
+	root: EL,
+): EL
+/**
+ * Simulate slots in Custom Elements without using `shadowRoot`.
+ * @param el Custom Element root element
+ * @param body Body of the custom element
+ * */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
+	el: HTMLElement,
+	body: EL,
+): EL
+
+export function dispatchEvent(name: keyof DocumentEventMap | string, element: SupportedElement):
+	(data?: any)=> void;
+export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
+	(element: SupportedElement, data?: any)=> void;
+export function dispatchEvent(
+	name: keyof DocumentEventMap | string,
+	options: EventInit | null,
+	element: SupportedElement | (()=> SupportedElement)
+): (data?: any)=> void;
+interface On{
+	/** Listens to the DOM event. See {@link Document.addEventListener} */
+	<
+		Event extends keyof DocumentEventMap,
+		EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
+		>(
+			type: Event,
+			listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	<
+		EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
+		>(
+			type: string,
+			listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent ) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
+	connected<
+		EE extends ddeElementAddon<SupportedElement>,
+		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
+		>(
+			listener: (this: El, event: CustomEvent<El>) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
+	disconnected<
+		EE extends ddeElementAddon<SupportedElement>,
+		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
+		>(
+			listener: (this: El, event: CustomEvent<void>) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
+	attributeChanged<
+		EE extends ddeElementAddon<SupportedElement>,
+		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
+		>(
+			listener: (this: El, event: CustomEvent<[ string, string ]>) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+}
+export const on: On;
+
+type Scope= {
+	scope: Node | Function | Object,
+	host: ddeElementAddon<any>,
+	custom_element: false | HTMLElement,
+	prevent: boolean
+};
+/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
+export const scope: {
+	current: Scope,
+	/** Stops all automatizations. E. g. signals used as attributes in current scope
+	 * registers removing these listeners (and clean signal if no other listeners are detected)
+	 * on `disconnected` event. */
+	preventDefault<T extends boolean>(prevent: T): T,
+	/**
+	 * This represents reference to the current host element — `scope.host()`.
+	 * It can be also used to register Addon(s) (functions to be called when component is initized)
+	 * — `scope.host(on.connected(console.log))`.
+	 * */
+	host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
+
+	state: Scope[],
+	/** Adds new child scope. All attributes are inherited by default. */
+	push(scope?: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
+	/** Adds root scope as a child of the current scope. */
+	pushRoot(): ReturnType<Array<Scope>["push"]>,
+	/** Removes last/current child scope. */
+	pop(): ReturnType<Array<Scope>["pop"]>,
+};
+
+export function customElementRender<
+	EL extends HTMLElement,
+	P extends any = Record<string, string | ddeSignal<string>>
+>(
+	target: ShadowRoot | EL,
+	render: (props: P)=> SupportedElement | DocumentFragment,
+	props?: P | ((el: EL)=> P)
+): EL
+export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
+export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
+export function observedAttributes(custom_element: HTMLElement): Record<string, string>
+
+/**
+ * This is used primarly for server side rendering. To be sure that all async operations
+ * are finished before the page is sent to the client.
+ * ```
+ *	// on component
+ *	function component(){
+ *		…
+ *		queue(fetch(...).then(...));
+ *	}
+ *
+ * // building the page
+ * async function build(){
+ *		const { component }= await import("./component.js");
+ *		document.body.append(el(component));
+ *		await queue();
+ *		retutn document.body.innerHTML;
+ *	}
+ * ```
+ * */
+export function queue(promise?: Promise<unknown>): Promise<unknown>;
+
+/* TypeScript MEH */
+declare global{
+	type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+
+	interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
+	interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
+	interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
+	interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
+
+	interface ddeHTMLElementTagNameMap {
+		"a": ddeHTMLAnchorElement;
+		"area": ddeHTMLAreaElement;
+		"audio": ddeHTMLAudioElement;
+		"base": ddeHTMLBaseElement;
+		"blockquote": ddeHTMLQuoteElement;
+		"body": ddeHTMLBodyElement;
+		"br": ddeHTMLBRElement;
+		"button": ddeHTMLButtonElement;
+		"canvas": ddeHTMLCanvasElement;
+		"caption": ddeHTMLTableCaptionElement;
+		"col": ddeHTMLTableColElement;
+		"colgroup": ddeHTMLTableColElement;
+		"data": ddeHTMLDataElement;
+		"datalist": ddeHTMLDataListElement;
+		"del": ddeHTMLModElement;
+		"details": ddeHTMLDetailsElement;
+		"dialog": ddeHTMLDialogElement;
+		"div": ddeHTMLDivElement;
+		"dl": ddeHTMLDListElement;
+		"embed": ddeHTMLEmbedElement;
+		"fieldset": ddeHTMLFieldSetElement;
+		"form": ddeHTMLFormElement;
+		"h1": ddeHTMLHeadingElement;
+		"h2": ddeHTMLHeadingElement;
+		"h3": ddeHTMLHeadingElement;
+		"h4": ddeHTMLHeadingElement;
+		"h5": ddeHTMLHeadingElement;
+		"h6": ddeHTMLHeadingElement;
+		"head": ddeHTMLHeadElement;
+		"hr": ddeHTMLHRElement;
+		"html": ddeHTMLHtmlElement;
+		"iframe": ddeHTMLIFrameElement;
+		"img": ddeHTMLImageElement;
+		"input": ddeHTMLInputElement;
+		"ins": ddeHTMLModElement;
+		"label": ddeHTMLLabelElement;
+		"legend": ddeHTMLLegendElement;
+		"li": ddeHTMLLIElement;
+		"link": ddeHTMLLinkElement;
+		"map": ddeHTMLMapElement;
+		"menu": ddeHTMLMenuElement;
+		"meta": ddeHTMLMetaElement;
+		"meter": ddeHTMLMeterElement;
+		"object": ddeHTMLObjectElement;
+		"ol": ddeHTMLOListElement;
+		"optgroup": ddeHTMLOptGroupElement;
+		"option": ddeHTMLOptionElement;
+		"output": ddeHTMLOutputElement;
+		"p": ddeHTMLParagraphElement;
+		"picture": ddeHTMLPictureElement;
+		"pre": ddeHTMLPreElement;
+		"progress": ddeHTMLProgressElement;
+		"q": ddeHTMLQuoteElement;
+		"script": ddeHTMLScriptElement;
+		"select": ddeHTMLSelectElement;
+		"slot": ddeHTMLSlotElement;
+		"source": ddeHTMLSourceElement;
+		"span": ddeHTMLSpanElement;
+		"style": ddeHTMLStyleElement;
+		"table": ddeHTMLTableElement;
+		"tbody": ddeHTMLTableSectionElement;
+		"td": ddeHTMLTableCellElement;
+		"template": ddeHTMLTemplateElement;
+		"textarea": ddeHTMLTextAreaElement;
+		"tfoot": ddeHTMLTableSectionElement;
+		"th": ddeHTMLTableCellElement;
+		"thead": ddeHTMLTableSectionElement;
+		"time": ddeHTMLTimeElement;
+		"title": ddeHTMLTitleElement;
+		"tr": ddeHTMLTableRowElement;
+		"track": ddeHTMLTrackElement;
+		"ul": ddeHTMLUListElement;
+		"video": ddeHTMLVideoElement;
+	}
+	interface ddeSVGElementTagNameMap {
+		"a": ddeSVGAElement;
+		"animate": ddeSVGAnimateElement;
+		"animateMotion": ddeSVGAnimateMotionElement;
+		"animateTransform": ddeSVGAnimateTransformElement;
+		"circle": ddeSVGCircleElement;
+		"clipPath": ddeSVGClipPathElement;
+		"defs": ddeSVGDefsElement;
+		"desc": ddeSVGDescElement;
+		"ellipse": ddeSVGEllipseElement;
+		"feBlend": ddeSVGFEBlendElement;
+		"feColorMatrix": ddeSVGFEColorMatrixElement;
+		"feComponentTransfer": ddeSVGFEComponentTransferElement;
+		"feComposite": ddeSVGFECompositeElement;
+		"feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
+		"feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
+		"feDisplacementMap": ddeSVGFEDisplacementMapElement;
+		"feDistantLight": ddeSVGFEDistantLightElement;
+		"feDropShadow": ddeSVGFEDropShadowElement;
+		"feFlood": ddeSVGFEFloodElement;
+		"feFuncA": ddeSVGFEFuncAElement;
+		"feFuncB": ddeSVGFEFuncBElement;
+		"feFuncG": ddeSVGFEFuncGElement;
+		"feFuncR": ddeSVGFEFuncRElement;
+		"feGaussianBlur": ddeSVGFEGaussianBlurElement;
+		"feImage": ddeSVGFEImageElement;
+		"feMerge": ddeSVGFEMergeElement;
+		"feMergeNode": ddeSVGFEMergeNodeElement;
+		"feMorphology": ddeSVGFEMorphologyElement;
+		"feOffset": ddeSVGFEOffsetElement;
+		"fePointLight": ddeSVGFEPointLightElement;
+		"feSpecularLighting": ddeSVGFESpecularLightingElement;
+		"feSpotLight": ddeSVGFESpotLightElement;
+		"feTile": ddeSVGFETileElement;
+		"feTurbulence": ddeSVGFETurbulenceElement;
+		"filter": ddeSVGFilterElement;
+		"foreignObject": ddeSVGForeignObjectElement;
+		"g": ddeSVGGElement;
+		"image": ddeSVGImageElement;
+		"line": ddeSVGLineElement;
+		"linearGradient": ddeSVGLinearGradientElement;
+		"marker": ddeSVGMarkerElement;
+		"mask": ddeSVGMaskElement;
+		"metadata": ddeSVGMetadataElement;
+		"mpath": ddeSVGMPathElement;
+		"path": ddeSVGPathElement;
+		"pattern": ddeSVGPatternElement;
+		"polygon": ddeSVGPolygonElement;
+		"polyline": ddeSVGPolylineElement;
+		"radialGradient": ddeSVGRadialGradientElement;
+		"rect": ddeSVGRectElement;
+		"script": ddeSVGScriptElement;
+		"set": ddeSVGSetElement;
+		"stop": ddeSVGStopElement;
+		"style": ddeSVGStyleElement;
+		"svg": ddeSVGSVGElement;
+		"switch": ddeSVGSwitchElement;
+		"symbol": ddeSVGSymbolElement;
+		"text": ddeSVGTextElement;
+		"textPath": ddeSVGTextPathElement;
+		"title": ddeSVGTitleElement;
+		"tspan": ddeSVGTSpanElement;
+		"use": ddeSVGUseElement;
+		"view": ddeSVGViewElement;
+	}
+}
+
+// editorconfig-checker-disable
+interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
+interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
+interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
+interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend<ddeHTMLBaseElement>; }
+interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend<ddeHTMLQuoteElement>; }
+interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend<ddeHTMLBodyElement>; }
+interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend<ddeHTMLBRElement>; }
+interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend<ddeHTMLButtonElement>; }
+interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend<ddeHTMLCanvasElement>; }
+interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend<ddeHTMLTableCaptionElement>; }
+interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
+interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
+interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend<ddeHTMLDataElement>; }
+interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend<ddeHTMLDataListElement>; }
+interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend<ddeHTMLModElement>; }
+interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend<ddeHTMLDetailsElement>; }
+interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend<ddeHTMLDialogElement>; }
+interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend<ddeHTMLDivElement>; }
+interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend<ddeHTMLDListElement>; }
+interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend<ddeHTMLEmbedElement>; }
+interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend<ddeHTMLFieldSetElement>; }
+interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend<ddeHTMLFormElement>; }
+interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend<ddeHTMLHeadingElement>; }
+interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend<ddeHTMLHeadElement>; }
+interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend<ddeHTMLHRElement>; }
+interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend<ddeHTMLHtmlElement>; }
+interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend<ddeHTMLIFrameElement>; }
+interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend<ddeHTMLImageElement>; }
+interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend<ddeHTMLInputElement>; }
+interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend<ddeHTMLLabelElement>; }
+interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend<ddeHTMLLegendElement>; }
+interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend<ddeHTMLLIElement>; }
+interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend<ddeHTMLLinkElement>; }
+interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend<ddeHTMLMapElement>; }
+interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend<ddeHTMLMenuElement>; }
+interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend<ddeHTMLMetaElement>; }
+interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend<ddeHTMLMeterElement>; }
+interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend<ddeHTMLObjectElement>; }
+interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend<ddeHTMLOListElement>; }
+interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend<ddeHTMLOptGroupElement>; }
+interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend<ddeHTMLOptionElement>; }
+interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend<ddeHTMLOutputElement>; }
+interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend<ddeHTMLParagraphElement>; }
+interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend<ddeHTMLPictureElement>; }
+interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend<ddeHTMLPreElement>; }
+interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend<ddeHTMLProgressElement>; }
+interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend<ddeHTMLScriptElement>; }
+interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend<ddeHTMLSelectElement>; }
+interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend<ddeHTMLSlotElement>; }
+interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend<ddeHTMLSourceElement>; }
+interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend<ddeHTMLSpanElement>; }
+interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend<ddeHTMLStyleElement>; }
+interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend<ddeHTMLTableElement>; }
+interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend<ddeHTMLTableSectionElement>; }
+interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
+interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend<ddeHTMLTemplateElement>; }
+interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend<ddeHTMLTextAreaElement>; }
+interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
+interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend<ddeHTMLTimeElement>; }
+interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend<ddeHTMLTitleElement>; }
+interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend<ddeHTMLTableRowElement>; }
+interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend<ddeHTMLTrackElement>; }
+interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend<ddeHTMLUListElement>; }
+interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend<ddeHTMLVideoElement>; }
+interface ddeSVGAElement extends SVGAElement{ append: ddeAppend<ddeSVGAElement>; }
+interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend<ddeSVGAnimateElement>; }
+interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend<ddeSVGAnimateMotionElement>; }
+interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend<ddeSVGAnimateTransformElement>; }
+interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend<ddeSVGCircleElement>; }
+interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend<ddeSVGClipPathElement>; }
+interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend<ddeSVGDefsElement>; }
+interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend<ddeSVGDescElement>; }
+interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend<ddeSVGEllipseElement>; }
+interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend<ddeSVGFEBlendElement>; }
+interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend<ddeSVGFEColorMatrixElement>; }
+interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend<ddeSVGFEComponentTransferElement>; }
+interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend<ddeSVGFECompositeElement>; }
+interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend<ddeSVGFEConvolveMatrixElement>; }
+interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend<ddeSVGFEDiffuseLightingElement>; }
+interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend<ddeSVGFEDisplacementMapElement>; }
+interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend<ddeSVGFEDistantLightElement>; }
+interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend<ddeSVGFEDropShadowElement>; }
+interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend<ddeSVGFEFloodElement>; }
+interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend<ddeSVGFEFuncAElement>; }
+interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend<ddeSVGFEFuncBElement>; }
+interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend<ddeSVGFEFuncGElement>; }
+interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend<ddeSVGFEFuncRElement>; }
+interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend<ddeSVGFEGaussianBlurElement>; }
+interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend<ddeSVGFEImageElement>; }
+interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend<ddeSVGFEMergeElement>; }
+interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend<ddeSVGFEMergeNodeElement>; }
+interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend<ddeSVGFEMorphologyElement>; }
+interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend<ddeSVGFEOffsetElement>; }
+interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend<ddeSVGFEPointLightElement>; }
+interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend<ddeSVGFESpecularLightingElement>; }
+interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend<ddeSVGFESpotLightElement>; }
+interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend<ddeSVGFETileElement>; }
+interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend<ddeSVGFETurbulenceElement>; }
+interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend<ddeSVGFilterElement>; }
+interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend<ddeSVGForeignObjectElement>; }
+interface ddeSVGGElement extends SVGGElement{ append: ddeAppend<ddeSVGGElement>; }
+interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend<ddeSVGImageElement>; }
+interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend<ddeSVGLineElement>; }
+interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend<ddeSVGLinearGradientElement>; }
+interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend<ddeSVGMarkerElement>; }
+interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend<ddeSVGMaskElement>; }
+interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend<ddeSVGMetadataElement>; }
+interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend<ddeSVGMPathElement>; }
+interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend<ddeSVGPathElement>; }
+interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend<ddeSVGPatternElement>; }
+interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend<ddeSVGPolygonElement>; }
+interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend<ddeSVGPolylineElement>; }
+interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend<ddeSVGRadialGradientElement>; }
+interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend<ddeSVGRectElement>; }
+interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend<ddeSVGScriptElement>; }
+interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend<ddeSVGSetElement>; }
+interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend<ddeSVGStopElement>; }
+interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend<ddeSVGStyleElement>; }
+interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend<ddeSVGSVGElement>; }
+interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend<ddeSVGSwitchElement>; }
+interface ddeSVGSymbolElement extends SVGSymbolElement{ append: ddeAppend<ddeSVGSymbolElement>; }
+interface ddeSVGTextElement extends SVGTextElement{ append: ddeAppend<ddeSVGTextElement>; }
+interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend<ddeSVGTextPathElement>; }
+interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTitleElement>; }
+interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
+interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
+interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
+// editorconfig-checker-enable
+export interface Signal<V, A> {
+	/** The current value of the signal */
+	get(): V;
+	/** Set new value of the signal */
+	set(value: V): V;
+	toJSON(): V;
+	valueOf(): V;
+}
+type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
+//type SymbolSignal= Symbol;
+type SymbolOnclear= symbol;
+type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
+type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
+interface signal{
+	_: Symbol
+	/**
+	 * Computations signal. This creates a signal which is computed from other signals.
+	 * */
+	<V extends ()=> any>(computation: V): Signal<ReturnType<V>, {}>
+	/**
+	 * Simple example:
+	 * ```js
+	 * const hello= S("Hello Signal");
+	 * ```
+	 * …simple todo signal:
+	 * ```js
+	 * const todos= S([], {
+	 * 	add(v){ this.value.push(S(v)); },
+	 * 	remove(i){ this.value.splice(i, 1); },
+	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
+	 * });
+	 * ```
+	 * …computed signal:
+	 * ```js
+	 * const name= S("Jan");
+	 * const surname= S("Andrle");
+	 * const fullname= S(()=> name.get()+" "+surname.get());
+	 * ```
+	 * @param value Initial signal value. Or function computing value from other signals.
+	 * @param actions Use to define actions on the signal. Such as add item to the array.
+	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
+	 *		by `S.clear`.
+	 * */
+	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(
+		signal: S,
+		name: N,
+		...params: A[N] extends (...args: infer P)=> any ? P : never
+	): void;
+	clear(...signals: Signal<any, any>[]): void;
+	on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
+	symbols: {
+		//signal: SymbolSignal;
+		onclear: SymbolOnclear;
+	}
+	/**
+	 * Reactive element, which is rendered based on the given signal.
+	 * ```js
+	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
+	 * S.el(listS, list=> list.map(li=> el("li", li)));
+	 * ```
+	 * */
+	el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
+
+	observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
+}
+export const signal: signal;
+export const S: signal;
+declare global {
+	type ddeSignal<T, A= {}>= Signal<T, A>;
+	type ddeAction<V>= Action<V>
+	type ddeActions<V>= Actions<V>
+}
\ No newline at end of file
diff --git a/dist/esm-with-signals.d.ts b/dist/esm-with-signals.d.ts
index 7d1283d..5d2f226 100644
--- a/dist/esm-with-signals.d.ts
+++ b/dist/esm-with-signals.d.ts
@@ -1,46 +1,119 @@
-declare global{ /* ddeSignal */ }
-type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
-type SupportedElement=
-		HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
-	|	SVGElementTagNameMap[keyof SVGElementTagNameMap]
-	|	MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
-	|	CustomElementTagNameMap[keyof CustomElementTagNameMap]
-declare global {
-	type ddeComponentAttributes= Record<any, any> | undefined;
-	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
-	type ddeString= string | ddeSignal<string>
-	type ddeStringable= ddeString | number | ddeSignal<number>
+// Generated by dts-bundle-generator v9.5.1
+
+export interface Signal<V, A> {
+	/** The current value of the signal */
+	get(): V;
+	/** Set new value of the signal */
+	set(value: V): V;
+	toJSON(): V;
+	valueOf(): V;
 }
-type PascalCase=
-`${Capitalize<string>}${string}`;
-type AttrsModified= {
+export type Action<V> = (this: {
+	value: V;
+	stopPropagation(): void;
+}, ...a: any[]) => typeof signal._ | void;
+//type SymbolSignal= Symbol;
+export type SymbolOnclear = symbol;
+export type Actions<V> = Record<string | SymbolOnclear, Action<V>>;
+export type OnListenerOptions = Pick<AddEventListenerOptions, "signal"> & {
+	first_time?: boolean;
+};
+export interface signal {
+	_: Symbol;
+	/**
+	 * Computations signal. This creates a signal which is computed from other signals.
+	 * */
+	<V extends () => any>(computation: V): Signal<ReturnType<V>, {}>;
+	/**
+	 * Simple example:
+	 * ```js
+	 * const hello= S("Hello Signal");
+	 * ```
+	 * …simple todo signal:
+	 * ```js
+	 * const todos= S([], {
+	 * 	add(v){ this.value.push(S(v)); },
+	 * 	remove(i){ this.value.splice(i, 1); },
+	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
+	 * });
+	 * ```
+	 * …computed signal:
+	 * ```js
+	 * const name= S("Jan");
+	 * const surname= S("Andrle");
+	 * const fullname= S(()=> name.get()+" "+surname.get());
+	 * ```
+	 * @param value Initial signal value. Or function computing value from other signals.
+	 * @param actions Use to define actions on the signal. Such as add item to the array.
+	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
+	 *		by `S.clear`.
+	 * */
+	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(signal: S, name: N, ...params: A[N] extends (...args: infer P) => any ? P : never): void;
+	clear(...signals: Signal<any, any>[]): void;
+	on<T>(signal: Signal<T, any>, onchange: (a: T) => void, options?: OnListenerOptions): void;
+	symbols: {
+		//signal: SymbolSignal;
+		onclear: SymbolOnclear;
+	};
+	/**
+	 * Reactive element, which is rendered based on the given signal.
+	 * ```js
+	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
+	 * S.el(listS, list=> list.map(li=> el("li", li)));
+	 * ```
+	 * */
+	el<S extends any>(signal: Signal<S, any>, el: (v: S) => Element | Element[] | DocumentFragment): DocumentFragment;
+	observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
+}
+export const signal: signal;
+export const S: signal;
+declare global {
+	type ddeSignal<T, A = {}> = Signal<T, A>;
+	type ddeAction<V> = Action<V>;
+	type ddeActions<V> = Actions<V>;
+}
+export type CustomElementTagNameMap = {
+	"#text": Text;
+	"#comment": Comment;
+};
+export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
+declare global {
+	type ddeComponentAttributes = Record<any, any> | undefined;
+	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any;
+	type ddeString = string | Signal<string, {}>;
+	type ddeStringable = ddeString | number | Signal<number, {}>;
+}
+export type PascalCase = `${Capitalize<string>}${string}`;
+export type AttrsModified = {
 	/**
 	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
 	 */
-	style: Partial<CSSStyleDeclaration> | ddeString
-		| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
+	style: Partial<CSSStyleDeclaration> | ddeString | Partial<{
+		[K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], {}>;
+	}>;
 	/**
 	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
 	 * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
 	 * for others.
 	 */
-	classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
+	classList: Record<string, -1 | 0 | 1 | boolean | Signal<-1 | 0 | 1 | boolean, {}>>;
 	/**
 	 * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
 	 * Values are converted to string (see {@link DOMStringMap}).
 	 *
 	 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
 	 * */
-	dataset: Record<string, ddeStringable>,
+	dataset: Record<string, ddeStringable>;
 	/**
 	 * Sets `aria-*` simiraly to `dataset`
 	 * */
-	ariaset: Record<string, ddeString>,
-}	& Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString>
-	& Record<`.${string}`, any>
-type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
-type IsReadonly<T, K extends keyof T> =
-	T extends { readonly [P in K]: T[K] } ? true : false;
+	ariaset: Record<string, ddeString>;
+} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString> & Record<`.${string}`, any>;
+export type _fromElsInterfaces<EL extends SupportedElement> = Omit<EL, keyof AttrsModified>;
+export type IsReadonly<T, K extends keyof T> = T extends {
+	readonly [P in K]: T[K];
+} ? true : false;
 /**
  * Just element attributtes
  *
@@ -51,199 +124,132 @@ type IsReadonly<T, K extends keyof T> =
  * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
  * @private
  */
-type ElementAttributes<T extends SupportedElement>= Partial<{
-	[K in keyof _fromElsInterfaces<T>]: IsReadonly<_fromElsInterfaces<T>, K> extends false
-		? _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
-		: ddeStringable
+export type ElementAttributes<T extends SupportedElement> = Partial<{
+	[K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] extends ((...p: any[]) => any) ? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>) => Signal<ReturnType<_fromElsInterfaces<T>[K]>, {}>) : (IsReadonly<_fromElsInterfaces<T>, K> extends false ? _fromElsInterfaces<T>[K] | Signal<_fromElsInterfaces<T>[K], {}> : ddeStringable);
 } & AttrsModified> & Record<string, any>;
-export function classListDeclarative<El extends SupportedElement>(
-	element: El,
-	classList: AttrsModified["classList"]
-): El
-export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
-export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(
-	element: El,
-	attr: ATT,
-	value: ElementAttributes<El>[ATT]
-): ElementAttributes<El>[ATT]
-
-type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
-export function el<
-	TAG extends keyof ExtendedHTMLElementTagNameMap,
->(
-	tag_name: TAG,
-	attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable,
-	...addons: ddeElementAddon<
-		ExtendedHTMLElementTagNameMap[NoInfer<TAG>]
-	>[], // TODO: for now addons must have the same element
-): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
-export function el(
-	tag_name?: "<>",
-): ddeDocumentFragment
-export function el(
-	tag_name: string,
-	attrs?: ElementAttributes<HTMLElement> | ddeStringable,
-	...addons: ddeElementAddon<HTMLElement>[]
-): ddeHTMLElement
-
-export function el<
-	C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
->(
-	component: C,
-	attrs?: Parameters<C>[0] | ddeStringable,
-	...addons: ddeElementAddon<ReturnType<C>>[]
-): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
-	? ReturnType<C>
-	: ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
-export { el as createElement }
-
-export function elNS(
-	namespace: "http://www.w3.org/2000/svg"
-): <
-	TAG extends keyof SVGElementTagNameMap & string,
-	EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
->(
-	tag_name: TAG,
-	attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable,
-	...addons: ddeElementAddon<NoInfer<EL>>[]
-)=>  TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
-export function elNS(
-	namespace: "http://www.w3.org/1998/Math/MathML"
-): <
-	TAG extends keyof MathMLElementTagNameMap & string,
-	EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
->(
-	tag_name: TAG,
-	attrs?: ddeStringable | Partial<{
-		[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
-	}>,
-	...addons: ddeElementAddon<NoInfer<EL>>[]
-)=> ddeMathMLElement
-export function elNS(
-	namespace: string
-): (
-	tag_name: string,
-	attrs?: string | ddeStringable | Record<string, any>,
-	...addons: ddeElementAddon<SupportedElement>[]
-)=> SupportedElement
-export { elNS as createElementNS }
-
+export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El;
+export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El;
+export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT];
+export type ExtendedHTMLElementTagNameMap = HTMLElementTagNameMap & CustomElementTagNameMap;
+export namespace el {
+	/**
+	 * Creates a marker comment for elements
+	 *
+	 * @param attrs - Marker attributes
+	 * @param [is_open=false] - Whether the marker is open-ended
+	 * @returns Comment node marker
+	 */
+	export function mark(attrs: {
+		type: "component" | "reactive" | "later";
+		name?: string;
+		host?: "this" | "parentElement";
+	}, is_open?: boolean): Comment;
+}
+export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>, ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<A extends {
+	textContent: ddeStringable;
+}, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>["textContent"], ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(tag_name: TAG, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable, ...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[]): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement;
+export function el(tag_name?: "<>"): ddeDocumentFragment;
+export function el(tag_name: string, attrs?: ElementAttributes<HTMLElement> | ddeStringable, ...addons: ddeElementAddon<HTMLElement>[]): ddeHTMLElement;
+export function elNS(namespace: "http://www.w3.org/2000/svg"): <TAG extends keyof SVGElementTagNameMap & string, EL extends (TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement)>(tag_name: TAG, attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable, ...addons: ddeElementAddon<NoInfer<EL>>[]) => TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement;
+export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG extends keyof MathMLElementTagNameMap & string, EL extends (TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement)>(tag_name: TAG, attrs?: ddeStringable | Partial<{
+	[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
+}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
+export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
 export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
 /** Simulate slots for ddeComponents */
-export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
-	root: EL,
-): EL
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
 /**
  * Simulate slots in Custom Elements without using `shadowRoot`.
  * @param el Custom Element root element
  * @param body Body of the custom element
  * */
-export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
-	el: HTMLElement,
-	body: EL,
-): EL
-
-export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
-	(element: SupportedElement, data?: any)=> void;
-export function dispatchEvent(
-	name: keyof DocumentEventMap | string,
-	options: EventInit | null,
-	element: SupportedElement | (()=> SupportedElement)
-): (data?: any)=> void;
-interface On{
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void;
+export interface On {
 	/** Listens to the DOM event. See {@link Document.addEventListener} */
-	<
-		Event extends keyof DocumentEventMap,
-		EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
-		>(
-			type: Event,
-			listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any,
-			options?: AddEventListenerOptions
-		) : EE;
-	<
-		EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
-		>(
-			type: string,
-			listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent ) => any,
-			options?: AddEventListenerOptions
-		) : EE;
-	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
-	connected<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
-		>(
-			listener: (this: El, event: CustomEvent<El>) => any,
-			options?: AddEventListenerOptions
-		) : EE;
-	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
-	disconnected<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
-		>(
-			listener: (this: El, event: CustomEvent<void>) => any,
-			options?: AddEventListenerOptions
-		) : EE;
-	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
-	attributeChanged<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
-		>(
-			listener: (this: El, event: CustomEvent<[ string, string ]>) => any,
-			options?: AddEventListenerOptions
-		) : EE;
+	<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
+	<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+		string,
+		string
+	]>) => any, options?: AddEventListenerOptions): EE;
 }
 export const on: On;
-
-type Scope= {
-	scope: Node | Function | Object,
-	host: ddeElementAddon<any>,
-	custom_element: false | HTMLElement,
-	prevent: boolean
+export type Scope = {
+	scope: Node | Function | Object;
+	host: ddeElementAddon<any>;
+	custom_element: false | HTMLElement;
+	prevent: boolean;
 };
 /** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
 export const scope: {
-	current: Scope,
+	current: Scope;
 	/** Stops all automatizations. E. g. signals used as attributes in current scope
 	 * registers removing these listeners (and clean signal if no other listeners are detected)
 	 * on `disconnected` event. */
-	preventDefault<T extends boolean>(prevent: T): T,
+	preventDefault<T extends boolean>(prevent: T): T;
 	/**
 	 * This represents reference to the current host element — `scope.host()`.
 	 * It can be also used to register Addon(s) (functions to be called when component is initized)
 	 * — `scope.host(on.connected(console.log))`.
 	 * */
-	host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
-
-	state: Scope[],
+	host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement;
+	state: Scope[];
 	/** Adds new child scope. All attributes are inherited by default. */
-	push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
+	push(scope?: Partial<Scope>): ReturnType<Array<Scope>["push"]>;
 	/** Adds root scope as a child of the current scope. */
-	pushRoot(): ReturnType<Array<Scope>["push"]>,
+	pushRoot(): ReturnType<Array<Scope>["push"]>;
 	/** Removes last/current child scope. */
-	pop(): ReturnType<Array<Scope>["pop"]>,
+	pop(): ReturnType<Array<Scope>["pop"]>;
 };
-
-export function customElementRender<
-	EL extends HTMLElement,
-	P extends any = Record<string, string | ddeSignal<string>>
->(
-	target: ShadowRoot | EL,
-	render: (props: P)=> SupportedElement | DocumentFragment,
-	props?: P | ((el: EL)=> P)
-): EL
-export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
-export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
-export function observedAttributes(custom_element: HTMLElement): Record<string, string>
-
+export function customElementRender<EL extends HTMLElement, P extends any = Record<string, string | Signal<string, {}>>>(target: ShadowRoot | EL, render: (props: P) => SupportedElement | DocumentFragment, props?: P | ((el: EL) => P)): EL;
+export function customElementWithDDE<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function lifecyclesToEvents<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function observedAttributes(custom_element: HTMLElement): Record<string, string>;
+/**
+ * This is used primarly for server side rendering. To be sure that all async operations
+ * are finished before the page is sent to the client.
+ * ```
+ *	// on component
+ *	function component(){
+ *		…
+ *		queue(fetch(...).then(...));
+ *	}
+ *
+ * // building the page
+ * async function build(){
+ *		const { component }= await import("./component.js");
+ *		document.body.append(el(component));
+ *		await queue();
+ *		retutn document.body.innerHTML;
+ *	}
+ * ```
+ * */
+export function queue(promise?: Promise<unknown>): Promise<unknown>;
 /* TypeScript MEH */
-declare global{
-	type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
-
-	interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
-	interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
-	interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
-	interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
-
+declare global {
+	type ddeAppend<el> = (...nodes: (Node | string)[]) => el;
+	interface ddeDocumentFragment extends DocumentFragment {
+		append: ddeAppend<ddeDocumentFragment>;
+	}
+	interface ddeHTMLElement extends HTMLElement {
+		append: ddeAppend<ddeHTMLElement>;
+	}
+	interface ddeSVGElement extends SVGElement {
+		append: ddeAppend<ddeSVGElement>;
+	}
+	interface ddeMathMLElement extends MathMLElement {
+		append: ddeAppend<ddeMathMLElement>;
+	}
 	interface ddeHTMLElementTagNameMap {
 		"a": ddeHTMLAnchorElement;
 		"area": ddeHTMLAreaElement;
@@ -385,199 +391,393 @@ declare global{
 		"view": ddeSVGViewElement;
 	}
 }
-
 // editorconfig-checker-disable
-interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
-interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
-interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
-interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend<ddeHTMLBaseElement>; }
-interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend<ddeHTMLQuoteElement>; }
-interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend<ddeHTMLBodyElement>; }
-interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend<ddeHTMLBRElement>; }
-interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend<ddeHTMLButtonElement>; }
-interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend<ddeHTMLCanvasElement>; }
-interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend<ddeHTMLTableCaptionElement>; }
-interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
-interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
-interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend<ddeHTMLDataElement>; }
-interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend<ddeHTMLDataListElement>; }
-interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend<ddeHTMLModElement>; }
-interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend<ddeHTMLDetailsElement>; }
-interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend<ddeHTMLDialogElement>; }
-interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend<ddeHTMLDivElement>; }
-interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend<ddeHTMLDListElement>; }
-interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend<ddeHTMLEmbedElement>; }
-interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend<ddeHTMLFieldSetElement>; }
-interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend<ddeHTMLFormElement>; }
-interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend<ddeHTMLHeadingElement>; }
-interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend<ddeHTMLHeadElement>; }
-interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend<ddeHTMLHRElement>; }
-interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend<ddeHTMLHtmlElement>; }
-interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend<ddeHTMLIFrameElement>; }
-interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend<ddeHTMLImageElement>; }
-interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend<ddeHTMLInputElement>; }
-interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend<ddeHTMLLabelElement>; }
-interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend<ddeHTMLLegendElement>; }
-interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend<ddeHTMLLIElement>; }
-interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend<ddeHTMLLinkElement>; }
-interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend<ddeHTMLMapElement>; }
-interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend<ddeHTMLMenuElement>; }
-interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend<ddeHTMLMetaElement>; }
-interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend<ddeHTMLMeterElement>; }
-interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend<ddeHTMLObjectElement>; }
-interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend<ddeHTMLOListElement>; }
-interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend<ddeHTMLOptGroupElement>; }
-interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend<ddeHTMLOptionElement>; }
-interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend<ddeHTMLOutputElement>; }
-interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend<ddeHTMLParagraphElement>; }
-interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend<ddeHTMLPictureElement>; }
-interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend<ddeHTMLPreElement>; }
-interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend<ddeHTMLProgressElement>; }
-interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend<ddeHTMLScriptElement>; }
-interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend<ddeHTMLSelectElement>; }
-interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend<ddeHTMLSlotElement>; }
-interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend<ddeHTMLSourceElement>; }
-interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend<ddeHTMLSpanElement>; }
-interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend<ddeHTMLStyleElement>; }
-interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend<ddeHTMLTableElement>; }
-interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend<ddeHTMLTableSectionElement>; }
-interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
-interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend<ddeHTMLTemplateElement>; }
-interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend<ddeHTMLTextAreaElement>; }
-interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
-interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend<ddeHTMLTimeElement>; }
-interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend<ddeHTMLTitleElement>; }
-interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend<ddeHTMLTableRowElement>; }
-interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend<ddeHTMLTrackElement>; }
-interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend<ddeHTMLUListElement>; }
-interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend<ddeHTMLVideoElement>; }
-interface ddeSVGAElement extends SVGAElement{ append: ddeAppend<ddeSVGAElement>; }
-interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend<ddeSVGAnimateElement>; }
-interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend<ddeSVGAnimateMotionElement>; }
-interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend<ddeSVGAnimateTransformElement>; }
-interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend<ddeSVGCircleElement>; }
-interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend<ddeSVGClipPathElement>; }
-interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend<ddeSVGDefsElement>; }
-interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend<ddeSVGDescElement>; }
-interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend<ddeSVGEllipseElement>; }
-interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend<ddeSVGFEBlendElement>; }
-interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend<ddeSVGFEColorMatrixElement>; }
-interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend<ddeSVGFEComponentTransferElement>; }
-interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend<ddeSVGFECompositeElement>; }
-interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend<ddeSVGFEConvolveMatrixElement>; }
-interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend<ddeSVGFEDiffuseLightingElement>; }
-interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend<ddeSVGFEDisplacementMapElement>; }
-interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend<ddeSVGFEDistantLightElement>; }
-interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend<ddeSVGFEDropShadowElement>; }
-interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend<ddeSVGFEFloodElement>; }
-interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend<ddeSVGFEFuncAElement>; }
-interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend<ddeSVGFEFuncBElement>; }
-interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend<ddeSVGFEFuncGElement>; }
-interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend<ddeSVGFEFuncRElement>; }
-interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend<ddeSVGFEGaussianBlurElement>; }
-interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend<ddeSVGFEImageElement>; }
-interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend<ddeSVGFEMergeElement>; }
-interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend<ddeSVGFEMergeNodeElement>; }
-interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend<ddeSVGFEMorphologyElement>; }
-interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend<ddeSVGFEOffsetElement>; }
-interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend<ddeSVGFEPointLightElement>; }
-interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend<ddeSVGFESpecularLightingElement>; }
-interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend<ddeSVGFESpotLightElement>; }
-interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend<ddeSVGFETileElement>; }
-interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend<ddeSVGFETurbulenceElement>; }
-interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend<ddeSVGFilterElement>; }
-interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend<ddeSVGForeignObjectElement>; }
-interface ddeSVGGElement extends SVGGElement{ append: ddeAppend<ddeSVGGElement>; }
-interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend<ddeSVGImageElement>; }
-interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend<ddeSVGLineElement>; }
-interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend<ddeSVGLinearGradientElement>; }
-interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend<ddeSVGMarkerElement>; }
-interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend<ddeSVGMaskElement>; }
-interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend<ddeSVGMetadataElement>; }
-interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend<ddeSVGMPathElement>; }
-interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend<ddeSVGPathElement>; }
-interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend<ddeSVGPatternElement>; }
-interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend<ddeSVGPolygonElement>; }
-interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend<ddeSVGPolylineElement>; }
-interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend<ddeSVGRadialGradientElement>; }
-interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend<ddeSVGRectElement>; }
-interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend<ddeSVGScriptElement>; }
-interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend<ddeSVGSetElement>; }
-interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend<ddeSVGStopElement>; }
-interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend<ddeSVGStyleElement>; }
-interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend<ddeSVGSVGElement>; }
-interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend<ddeSVGSwitchElement>; }
-interface ddeSVGSymbolElement extends SVGSymbolElement{ append: ddeAppend<ddeSVGSymbolElement>; }
-interface ddeSVGTextElement extends SVGTextElement{ append: ddeAppend<ddeSVGTextElement>; }
-interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend<ddeSVGTextPathElement>; }
-interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTitleElement>; }
-interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
-interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
-interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
-// editorconfig-checker-enable
-export type Signal<V, A>= (set?: V)=> V & A;
-type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
-//type SymbolSignal= Symbol;
-type SymbolOnclear= symbol;
-type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
-type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
-interface signal{
-	_: Symbol
-	/**
-	 * Computations signal. This creates a signal which is computed from other signals.
-	 * */
-	<V extends ()=> any>(computation: V): Signal<ReturnType<V>, {}>
-	/**
-	 * Simple example:
-	 * ```js
-	 * const hello= S("Hello Signal");
-	 * ```
-	 * …simple todo signal:
-	 * ```js
-	 * const todos= S([], {
-	 * 	add(v){ this.value.push(S(v)); },
-	 * 	remove(i){ this.value.splice(i, 1); },
-	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
-	 * });
-	 * ```
-	 * …computed signal:
-	 * ```js
-	 * const name= S("Jan");
-	 * const surname= S("Andrle");
-	 * const fullname= S(()=> name()+" "+surname());
-	 * ```
-	 * @param value Initial signal value. Or function computing value from other signals.
-	 * @param actions Use to define actions on the signal. Such as add item to the array.
-	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
-	 *		by `S.clear`.
-	 * */
-	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
-	action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(
-		signal: S,
-		name: N,
-		...params: A[N] extends (...args: infer P)=> any ? P : never
-	): void;
-	clear(...signals: Signal<any, any>[]): void;
-	on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
-	symbols: {
-		//signal: SymbolSignal;
-		onclear: SymbolOnclear;
-	}
-	/**
-	 * Reactive element, which is rendered based on the given signal.
-	 * ```js
-	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
-	 * S.el(listS, list=> list.map(li=> el("li", li)));
-	 * ```
-	 * */
-	el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
-
-	observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
+export interface ddeHTMLAnchorElement extends HTMLAnchorElement {
+	append: ddeAppend<ddeHTMLAnchorElement>;
 }
-export const signal: signal;
-export const S: signal;
-declare global {
-	type ddeSignal<T, A= {}>= Signal<T, A>;
-	type ddeAction<V>= Action<V>
-	type ddeActions<V>= Actions<V>
-}
\ No newline at end of file
+export interface ddeHTMLAreaElement extends HTMLAreaElement {
+	append: ddeAppend<ddeHTMLAreaElement>;
+}
+export interface ddeHTMLAudioElement extends HTMLAudioElement {
+	append: ddeAppend<ddeHTMLAudioElement>;
+}
+export interface ddeHTMLBaseElement extends HTMLBaseElement {
+	append: ddeAppend<ddeHTMLBaseElement>;
+}
+export interface ddeHTMLQuoteElement extends HTMLQuoteElement {
+	append: ddeAppend<ddeHTMLQuoteElement>;
+}
+export interface ddeHTMLBodyElement extends HTMLBodyElement {
+	append: ddeAppend<ddeHTMLBodyElement>;
+}
+export interface ddeHTMLBRElement extends HTMLBRElement {
+	append: ddeAppend<ddeHTMLBRElement>;
+}
+export interface ddeHTMLButtonElement extends HTMLButtonElement {
+	append: ddeAppend<ddeHTMLButtonElement>;
+}
+export interface ddeHTMLCanvasElement extends HTMLCanvasElement {
+	append: ddeAppend<ddeHTMLCanvasElement>;
+}
+export interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement {
+	append: ddeAppend<ddeHTMLTableCaptionElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLDataElement extends HTMLDataElement {
+	append: ddeAppend<ddeHTMLDataElement>;
+}
+export interface ddeHTMLDataListElement extends HTMLDataListElement {
+	append: ddeAppend<ddeHTMLDataListElement>;
+}
+export interface ddeHTMLModElement extends HTMLModElement {
+	append: ddeAppend<ddeHTMLModElement>;
+}
+export interface ddeHTMLDetailsElement extends HTMLDetailsElement {
+	append: ddeAppend<ddeHTMLDetailsElement>;
+}
+export interface ddeHTMLDialogElement extends HTMLDialogElement {
+	append: ddeAppend<ddeHTMLDialogElement>;
+}
+export interface ddeHTMLDivElement extends HTMLDivElement {
+	append: ddeAppend<ddeHTMLDivElement>;
+}
+export interface ddeHTMLDListElement extends HTMLDListElement {
+	append: ddeAppend<ddeHTMLDListElement>;
+}
+export interface ddeHTMLEmbedElement extends HTMLEmbedElement {
+	append: ddeAppend<ddeHTMLEmbedElement>;
+}
+export interface ddeHTMLFieldSetElement extends HTMLFieldSetElement {
+	append: ddeAppend<ddeHTMLFieldSetElement>;
+}
+export interface ddeHTMLFormElement extends HTMLFormElement {
+	append: ddeAppend<ddeHTMLFormElement>;
+}
+export interface ddeHTMLHeadingElement extends HTMLHeadingElement {
+	append: ddeAppend<ddeHTMLHeadingElement>;
+}
+export interface ddeHTMLHeadElement extends HTMLHeadElement {
+	append: ddeAppend<ddeHTMLHeadElement>;
+}
+export interface ddeHTMLHRElement extends HTMLHRElement {
+	append: ddeAppend<ddeHTMLHRElement>;
+}
+export interface ddeHTMLHtmlElement extends HTMLHtmlElement {
+	append: ddeAppend<ddeHTMLHtmlElement>;
+}
+export interface ddeHTMLIFrameElement extends HTMLIFrameElement {
+	append: ddeAppend<ddeHTMLIFrameElement>;
+}
+export interface ddeHTMLImageElement extends HTMLImageElement {
+	append: ddeAppend<ddeHTMLImageElement>;
+}
+export interface ddeHTMLInputElement extends HTMLInputElement {
+	append: ddeAppend<ddeHTMLInputElement>;
+}
+export interface ddeHTMLLabelElement extends HTMLLabelElement {
+	append: ddeAppend<ddeHTMLLabelElement>;
+}
+export interface ddeHTMLLegendElement extends HTMLLegendElement {
+	append: ddeAppend<ddeHTMLLegendElement>;
+}
+export interface ddeHTMLLIElement extends HTMLLIElement {
+	append: ddeAppend<ddeHTMLLIElement>;
+}
+export interface ddeHTMLLinkElement extends HTMLLinkElement {
+	append: ddeAppend<ddeHTMLLinkElement>;
+}
+export interface ddeHTMLMapElement extends HTMLMapElement {
+	append: ddeAppend<ddeHTMLMapElement>;
+}
+export interface ddeHTMLMenuElement extends HTMLMenuElement {
+	append: ddeAppend<ddeHTMLMenuElement>;
+}
+export interface ddeHTMLMetaElement extends HTMLMetaElement {
+	append: ddeAppend<ddeHTMLMetaElement>;
+}
+export interface ddeHTMLMeterElement extends HTMLMeterElement {
+	append: ddeAppend<ddeHTMLMeterElement>;
+}
+export interface ddeHTMLObjectElement extends HTMLObjectElement {
+	append: ddeAppend<ddeHTMLObjectElement>;
+}
+export interface ddeHTMLOListElement extends HTMLOListElement {
+	append: ddeAppend<ddeHTMLOListElement>;
+}
+export interface ddeHTMLOptGroupElement extends HTMLOptGroupElement {
+	append: ddeAppend<ddeHTMLOptGroupElement>;
+}
+export interface ddeHTMLOptionElement extends HTMLOptionElement {
+	append: ddeAppend<ddeHTMLOptionElement>;
+}
+export interface ddeHTMLOutputElement extends HTMLOutputElement {
+	append: ddeAppend<ddeHTMLOutputElement>;
+}
+export interface ddeHTMLParagraphElement extends HTMLParagraphElement {
+	append: ddeAppend<ddeHTMLParagraphElement>;
+}
+export interface ddeHTMLPictureElement extends HTMLPictureElement {
+	append: ddeAppend<ddeHTMLPictureElement>;
+}
+export interface ddeHTMLPreElement extends HTMLPreElement {
+	append: ddeAppend<ddeHTMLPreElement>;
+}
+export interface ddeHTMLProgressElement extends HTMLProgressElement {
+	append: ddeAppend<ddeHTMLProgressElement>;
+}
+export interface ddeHTMLScriptElement extends HTMLScriptElement {
+	append: ddeAppend<ddeHTMLScriptElement>;
+}
+export interface ddeHTMLSelectElement extends HTMLSelectElement {
+	append: ddeAppend<ddeHTMLSelectElement>;
+}
+export interface ddeHTMLSlotElement extends HTMLSlotElement {
+	append: ddeAppend<ddeHTMLSlotElement>;
+}
+export interface ddeHTMLSourceElement extends HTMLSourceElement {
+	append: ddeAppend<ddeHTMLSourceElement>;
+}
+export interface ddeHTMLSpanElement extends HTMLSpanElement {
+	append: ddeAppend<ddeHTMLSpanElement>;
+}
+export interface ddeHTMLStyleElement extends HTMLStyleElement {
+	append: ddeAppend<ddeHTMLStyleElement>;
+}
+export interface ddeHTMLTableElement extends HTMLTableElement {
+	append: ddeAppend<ddeHTMLTableElement>;
+}
+export interface ddeHTMLTableSectionElement extends HTMLTableSectionElement {
+	append: ddeAppend<ddeHTMLTableSectionElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTemplateElement extends HTMLTemplateElement {
+	append: ddeAppend<ddeHTMLTemplateElement>;
+}
+export interface ddeHTMLTextAreaElement extends HTMLTextAreaElement {
+	append: ddeAppend<ddeHTMLTextAreaElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTimeElement extends HTMLTimeElement {
+	append: ddeAppend<ddeHTMLTimeElement>;
+}
+export interface ddeHTMLTitleElement extends HTMLTitleElement {
+	append: ddeAppend<ddeHTMLTitleElement>;
+}
+export interface ddeHTMLTableRowElement extends HTMLTableRowElement {
+	append: ddeAppend<ddeHTMLTableRowElement>;
+}
+export interface ddeHTMLTrackElement extends HTMLTrackElement {
+	append: ddeAppend<ddeHTMLTrackElement>;
+}
+export interface ddeHTMLUListElement extends HTMLUListElement {
+	append: ddeAppend<ddeHTMLUListElement>;
+}
+export interface ddeHTMLVideoElement extends HTMLVideoElement {
+	append: ddeAppend<ddeHTMLVideoElement>;
+}
+export interface ddeSVGAElement extends SVGAElement {
+	append: ddeAppend<ddeSVGAElement>;
+}
+export interface ddeSVGAnimateElement extends SVGAnimateElement {
+	append: ddeAppend<ddeSVGAnimateElement>;
+}
+export interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement {
+	append: ddeAppend<ddeSVGAnimateMotionElement>;
+}
+export interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement {
+	append: ddeAppend<ddeSVGAnimateTransformElement>;
+}
+export interface ddeSVGCircleElement extends SVGCircleElement {
+	append: ddeAppend<ddeSVGCircleElement>;
+}
+export interface ddeSVGClipPathElement extends SVGClipPathElement {
+	append: ddeAppend<ddeSVGClipPathElement>;
+}
+export interface ddeSVGDefsElement extends SVGDefsElement {
+	append: ddeAppend<ddeSVGDefsElement>;
+}
+export interface ddeSVGDescElement extends SVGDescElement {
+	append: ddeAppend<ddeSVGDescElement>;
+}
+export interface ddeSVGEllipseElement extends SVGEllipseElement {
+	append: ddeAppend<ddeSVGEllipseElement>;
+}
+export interface ddeSVGFEBlendElement extends SVGFEBlendElement {
+	append: ddeAppend<ddeSVGFEBlendElement>;
+}
+export interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement {
+	append: ddeAppend<ddeSVGFEColorMatrixElement>;
+}
+export interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement {
+	append: ddeAppend<ddeSVGFEComponentTransferElement>;
+}
+export interface ddeSVGFECompositeElement extends SVGFECompositeElement {
+	append: ddeAppend<ddeSVGFECompositeElement>;
+}
+export interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement {
+	append: ddeAppend<ddeSVGFEConvolveMatrixElement>;
+}
+export interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement {
+	append: ddeAppend<ddeSVGFEDiffuseLightingElement>;
+}
+export interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement {
+	append: ddeAppend<ddeSVGFEDisplacementMapElement>;
+}
+export interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement {
+	append: ddeAppend<ddeSVGFEDistantLightElement>;
+}
+export interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement {
+	append: ddeAppend<ddeSVGFEDropShadowElement>;
+}
+export interface ddeSVGFEFloodElement extends SVGFEFloodElement {
+	append: ddeAppend<ddeSVGFEFloodElement>;
+}
+export interface ddeSVGFEFuncAElement extends SVGFEFuncAElement {
+	append: ddeAppend<ddeSVGFEFuncAElement>;
+}
+export interface ddeSVGFEFuncBElement extends SVGFEFuncBElement {
+	append: ddeAppend<ddeSVGFEFuncBElement>;
+}
+export interface ddeSVGFEFuncGElement extends SVGFEFuncGElement {
+	append: ddeAppend<ddeSVGFEFuncGElement>;
+}
+export interface ddeSVGFEFuncRElement extends SVGFEFuncRElement {
+	append: ddeAppend<ddeSVGFEFuncRElement>;
+}
+export interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement {
+	append: ddeAppend<ddeSVGFEGaussianBlurElement>;
+}
+export interface ddeSVGFEImageElement extends SVGFEImageElement {
+	append: ddeAppend<ddeSVGFEImageElement>;
+}
+export interface ddeSVGFEMergeElement extends SVGFEMergeElement {
+	append: ddeAppend<ddeSVGFEMergeElement>;
+}
+export interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement {
+	append: ddeAppend<ddeSVGFEMergeNodeElement>;
+}
+export interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement {
+	append: ddeAppend<ddeSVGFEMorphologyElement>;
+}
+export interface ddeSVGFEOffsetElement extends SVGFEOffsetElement {
+	append: ddeAppend<ddeSVGFEOffsetElement>;
+}
+export interface ddeSVGFEPointLightElement extends SVGFEPointLightElement {
+	append: ddeAppend<ddeSVGFEPointLightElement>;
+}
+export interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement {
+	append: ddeAppend<ddeSVGFESpecularLightingElement>;
+}
+export interface ddeSVGFESpotLightElement extends SVGFESpotLightElement {
+	append: ddeAppend<ddeSVGFESpotLightElement>;
+}
+export interface ddeSVGFETileElement extends SVGFETileElement {
+	append: ddeAppend<ddeSVGFETileElement>;
+}
+export interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement {
+	append: ddeAppend<ddeSVGFETurbulenceElement>;
+}
+export interface ddeSVGFilterElement extends SVGFilterElement {
+	append: ddeAppend<ddeSVGFilterElement>;
+}
+export interface ddeSVGForeignObjectElement extends SVGForeignObjectElement {
+	append: ddeAppend<ddeSVGForeignObjectElement>;
+}
+export interface ddeSVGGElement extends SVGGElement {
+	append: ddeAppend<ddeSVGGElement>;
+}
+export interface ddeSVGImageElement extends SVGImageElement {
+	append: ddeAppend<ddeSVGImageElement>;
+}
+export interface ddeSVGLineElement extends SVGLineElement {
+	append: ddeAppend<ddeSVGLineElement>;
+}
+export interface ddeSVGLinearGradientElement extends SVGLinearGradientElement {
+	append: ddeAppend<ddeSVGLinearGradientElement>;
+}
+export interface ddeSVGMarkerElement extends SVGMarkerElement {
+	append: ddeAppend<ddeSVGMarkerElement>;
+}
+export interface ddeSVGMaskElement extends SVGMaskElement {
+	append: ddeAppend<ddeSVGMaskElement>;
+}
+export interface ddeSVGMetadataElement extends SVGMetadataElement {
+	append: ddeAppend<ddeSVGMetadataElement>;
+}
+export interface ddeSVGMPathElement extends SVGMPathElement {
+	append: ddeAppend<ddeSVGMPathElement>;
+}
+export interface ddeSVGPathElement extends SVGPathElement {
+	append: ddeAppend<ddeSVGPathElement>;
+}
+export interface ddeSVGPatternElement extends SVGPatternElement {
+	append: ddeAppend<ddeSVGPatternElement>;
+}
+export interface ddeSVGPolygonElement extends SVGPolygonElement {
+	append: ddeAppend<ddeSVGPolygonElement>;
+}
+export interface ddeSVGPolylineElement extends SVGPolylineElement {
+	append: ddeAppend<ddeSVGPolylineElement>;
+}
+export interface ddeSVGRadialGradientElement extends SVGRadialGradientElement {
+	append: ddeAppend<ddeSVGRadialGradientElement>;
+}
+export interface ddeSVGRectElement extends SVGRectElement {
+	append: ddeAppend<ddeSVGRectElement>;
+}
+export interface ddeSVGScriptElement extends SVGScriptElement {
+	append: ddeAppend<ddeSVGScriptElement>;
+}
+export interface ddeSVGSetElement extends SVGSetElement {
+	append: ddeAppend<ddeSVGSetElement>;
+}
+export interface ddeSVGStopElement extends SVGStopElement {
+	append: ddeAppend<ddeSVGStopElement>;
+}
+export interface ddeSVGStyleElement extends SVGStyleElement {
+	append: ddeAppend<ddeSVGStyleElement>;
+}
+export interface ddeSVGSVGElement extends SVGSVGElement {
+	append: ddeAppend<ddeSVGSVGElement>;
+}
+export interface ddeSVGSwitchElement extends SVGSwitchElement {
+	append: ddeAppend<ddeSVGSwitchElement>;
+}
+export interface ddeSVGSymbolElement extends SVGSymbolElement {
+	append: ddeAppend<ddeSVGSymbolElement>;
+}
+export interface ddeSVGTextElement extends SVGTextElement {
+	append: ddeAppend<ddeSVGTextElement>;
+}
+export interface ddeSVGTextPathElement extends SVGTextPathElement {
+	append: ddeAppend<ddeSVGTextPathElement>;
+}
+export interface ddeSVGTitleElement extends SVGTitleElement {
+	append: ddeAppend<ddeSVGTitleElement>;
+}
+export interface ddeSVGTSpanElement extends SVGTSpanElement {
+	append: ddeAppend<ddeSVGTSpanElement>;
+}
+export interface ddeSVGUseElement extends SVGUseElement {
+	append: ddeAppend<ddeSVGUseElement>;
+}
+export interface ddeSVGViewElement extends SVGViewElement {
+	append: ddeAppend<ddeSVGViewElement>;
+}
+
+export {
+	dispatchEvent$1 as dispatchEvent,
+	el as createElement,
+	elNS as createElementNS,
+};
+
+export {};
diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js
index dc37c58..fa2f192 100644
--- a/dist/esm-with-signals.js
+++ b/dist/esm-with-signals.js
@@ -1,665 +1,1007 @@
-// src/signals-common.js
-var T = {
-	isSignal(t) {
-		return !1;
-	},
-	processReactiveAttribute(t, e, r, n) {
-		return r;
-	}
-};
-function H(t, e = !0) {
-	return e ? Object.assign(T, t) : (Object.setPrototypeOf(t, T), t);
-}
-function j(t) {
-	return T.isPrototypeOf(t) && t !== T ? t : T;
-}
-
 // src/helpers.js
-var I = (...t) => Object.prototype.hasOwnProperty.call(...t);
-function S(t) {
-	return typeof t > "u";
+var hasOwn = (...a) => Object.prototype.hasOwnProperty.call(...a);
+function isUndef(value) {
+	return typeof value === "undefined";
 }
-function X(t) {
-	let e = typeof t;
-	return e !== "object" ? e : t === null ? "null" : Object.prototype.toString.call(t);
+function typeOf(v) {
+	const t = typeof v;
+	if (t !== "object") return t;
+	if (v === null) return "null";
+	return Object.prototype.toString.call(v);
 }
-function P(t, e) {
-	if (!t || !(t instanceof AbortSignal))
-		return !0;
-	if (!t.aborted)
-		return t.addEventListener("abort", e), function() {
-			t.removeEventListener("abort", e);
-		};
+function isInstance(obj, cls) {
+	return obj instanceof cls;
 }
-function W(t, e) {
-	let { observedAttributes: r = [] } = t.constructor;
-	return r.reduce(function(n, o) {
-		return n[dt(o)] = e(t, o), n;
+function isProtoFrom(obj, cls) {
+	return Object.prototype.isPrototypeOf.call(cls, obj);
+}
+function oCreate(proto = null, p = {}) {
+	return Object.create(proto, p);
+}
+function oAssign(...o) {
+	return Object.assign(...o);
+}
+function onAbort(signal2, listener) {
+	if (!signal2 || !isInstance(signal2, AbortSignal))
+		return true;
+	if (signal2.aborted)
+		return;
+	signal2.addEventListener("abort", listener);
+	return function cleanUp() {
+		signal2.removeEventListener("abort", listener);
+	};
+}
+function observedAttributes(instance, observedAttribute2) {
+	const { observedAttributes: observedAttributes3 = [] } = instance.constructor;
+	return observedAttributes3.reduce(function(out, name) {
+		out[kebabToCamel(name)] = observedAttribute2(instance, name);
+		return out;
 	}, {});
 }
-function dt(t) {
-	return t.replace(/-./g, (e) => e[1].toUpperCase());
+function kebabToCamel(name) {
+	return name.replace(/-./g, (x) => x[1].toUpperCase());
+}
+var Defined = class extends Error {
+	constructor() {
+		super();
+		const [curr, ...rest] = this.stack.split("\n");
+		const curr_file = curr.slice(curr.indexOf("@"), curr.indexOf(".js:") + 4);
+		const curr_lib = curr_file.includes("src/helpers.js") ? "src/" : curr_file;
+		this.stack = rest.find((l) => !l.includes(curr_lib)) || curr;
+	}
+	get compact() {
+		const { stack } = this;
+		return stack.slice(0, stack.indexOf("@") + 1) + "\u2026" + stack.slice(stack.lastIndexOf("/"));
+	}
+};
+
+// src/signals-lib/common.js
+var signals_global = {
+	/**
+	* Checks if a value is a signal
+	* @param {any} attributes - Value to check
+	* @returns {boolean} Whether the value is a signal
+	*/
+	isSignal(attributes) {
+		return false;
+	},
+	/**
+	* Processes an attribute that might be reactive
+	* @param {Element} obj - Element that owns the attribute
+	* @param {string} key - Attribute name
+	* @param {any} attr - Attribute value
+	* @param {Function} set - Function to set the attribute
+	* @returns {any} Processed attribute value
+	*/
+	processReactiveAttribute(obj, key, attr, set) {
+		return attr;
+	}
+};
+function registerReactivity(def, global = true) {
+	if (global) return oAssign(signals_global, def);
+	Object.setPrototypeOf(def, signals_global);
+	return def;
+}
+function signals(_this) {
+	return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
 }
 
 // src/dom-common.js
-var d = {
-	setDeleteAttr: pt,
+var enviroment = {
+	setDeleteAttr,
 	ssr: "",
 	D: globalThis.document,
 	F: globalThis.DocumentFragment,
 	H: globalThis.HTMLElement,
 	S: globalThis.SVGElement,
 	M: globalThis.MutationObserver,
-	q: (t) => t || Promise.resolve()
+	q: (p) => p || Promise.resolve()
 };
-function pt(t, e, r) {
-	if (Reflect.set(t, e, r), !!S(r)) {
-		if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined")
-			return t.removeAttribute(e);
-		if (Reflect.get(t, e) === "undefined")
-			return Reflect.set(t, e, "");
-	}
+function setDeleteAttr(obj, prop, val) {
+	Reflect.set(obj, prop, val);
+	if (!isUndef(val)) return;
+	Reflect.deleteProperty(obj, prop);
+	if (isInstance(obj, enviroment.H) && obj.getAttribute(prop) === "undefined")
+		return obj.removeAttribute(prop);
+	if (Reflect.get(obj, prop) === "undefined")
+		return Reflect.set(obj, prop, "");
 }
-var O = "__dde_lifecyclesToEvents", w = "dde:connected", y = "dde:disconnected", k = "dde:attributeChanged";
+var keyLTE = "__dde_lifecyclesToEvents";
+var evc = "dde:connected";
+var evd = "dde:disconnected";
+var eva = "dde:attributeChanged";
 
 // src/dom.js
-function Mt(t) {
-	return d.q(t);
+function queue(promise) {
+	return enviroment.q(promise);
 }
-var A = [{
+var scopes = [{
 	get scope() {
-		return d.D.body;
+		return enviroment.D.body;
 	},
-	host: (t) => t ? t(d.D.body) : d.D.body,
-	prevent: !0
-}], x = {
+	host: (c) => c ? c(enviroment.D.body) : enviroment.D.body,
+	prevent: true
+}];
+var scope = {
+	/**
+	* Gets the current scope
+	* @returns {Object} Current scope context
+	*/
 	get current() {
-		return A[A.length - 1];
+		return scopes[scopes.length - 1];
 	},
+	/**
+	* Gets the host element of the current scope
+	* @returns {Function} Host accessor function
+	*/
 	get host() {
 		return this.current.host;
 	},
+	/**
+	* Prevents default behavior in the current scope
+	* @returns {Object} Current scope context
+	*/
 	preventDefault() {
-		let { current: t } = this;
-		return t.prevent = !0, t;
+		const { current } = this;
+		current.prevent = true;
+		return current;
 	},
+	/**
+	* Gets a copy of the current scope stack
+	* @returns {Array} Copy of scope stack
+	*/
 	get state() {
-		return [...A];
+		return [...scopes];
 	},
-	push(t = {}) {
-		return A.push(Object.assign({}, this.current, { prevent: !1 }, t));
+	/**
+	* Pushes a new scope to the stack
+	* @param {Object} [s={}] - Scope object to push
+	* @returns {number} New length of the scope stack
+	*/
+	push(s = {}) {
+		return scopes.push(oAssign({}, this.current, { prevent: false }, s));
 	},
+	/**
+	* Pushes the root scope to the stack
+	* @returns {number} New length of the scope stack
+	*/
 	pushRoot() {
-		return A.push(A[0]);
+		return scopes.push(scopes[0]);
 	},
+	/**
+	* Pops the current scope from the stack
+	* @returns {Object|undefined} Popped scope or undefined if only one scope remains
+	*/
 	pop() {
-		if (A.length !== 1)
-			return A.pop();
+		if (scopes.length === 1) return;
+		return scopes.pop();
 	}
 };
-function Y(...t) {
-	return this.appendOriginal(...t), this;
+function append(...els) {
+	this.appendOriginal(...els);
+	return this;
 }
-function lt(t) {
-	return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;
+function chainableAppend(el) {
+	if (el.append === append) return el;
+	el.appendOriginal = el.append;
+	el.append = append;
+	return el;
 }
-var $;
-function M(t, e, ...r) {
-	let n = j(this), o = 0, c, u;
-	switch ((Object(e) !== e || n.isSignal(e)) && (e = { textContent: e }), !0) {
-		case typeof t == "function": {
-			o = 1;
-			let i = (...h) => h.length ? (o === 1 ? r.unshift(...h) : h.forEach((E) => E(u)), void 0) : u;
-			x.push({ scope: t, host: i }), c = t(e || void 0);
-			let p = c instanceof d.F;
-			if (c.nodeName === "#comment") break;
-			let v = M.mark({
+var namespace;
+function createElement(tag, attributes, ...addons) {
+	const s = signals(this);
+	let scoped = 0;
+	let el, el_host;
+	if (Object(attributes) !== attributes || s.isSignal(attributes))
+		attributes = { textContent: attributes };
+	switch (true) {
+		case typeof tag === "function": {
+			scoped = 1;
+			const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0);
+			scope.push({ scope: tag, host });
+			el = tag(attributes || void 0);
+			const is_fragment = isInstance(el, enviroment.F);
+			if (el.nodeName === "#comment") break;
+			const el_mark = createElement.mark({
 				type: "component",
-				name: t.name,
-				host: p ? "this" : "parentElement"
+				name: tag.name,
+				host: is_fragment ? "this" : "parentElement"
 			});
-			c.prepend(v), p && (u = v);
+			el.prepend(el_mark);
+			if (is_fragment) el_host = el_mark;
 			break;
 		}
-		case t === "#text":
-			c = q.call(this, d.D.createTextNode(""), e);
+		case tag === "#text":
+			el = assign.call(this, enviroment.D.createTextNode(""), attributes);
 			break;
-		case (t === "<>" || !t):
-			c = q.call(this, d.D.createDocumentFragment(), e);
+		case (tag === "<>" || !tag):
+			el = assign.call(this, enviroment.D.createDocumentFragment(), attributes);
 			break;
-		case !!$:
-			c = q.call(this, d.D.createElementNS($, t), e);
+		case Boolean(namespace):
+			el = assign.call(this, enviroment.D.createElementNS(namespace, tag), attributes);
 			break;
-		case !c:
-			c = q.call(this, d.D.createElement(t), e);
+		case !el:
+			el = assign.call(this, enviroment.D.createElement(tag), attributes);
 	}
-	return lt(c), u || (u = c), r.forEach((i) => i(u)), o && x.pop(), o = 2, c;
+	chainableAppend(el);
+	if (!el_host) el_host = el;
+	addons.forEach((c) => c(el_host));
+	if (scoped) scope.pop();
+	scoped = 2;
+	return el;
 }
-M.mark = function(t, e = !1) {
-	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
-	let r = e ? "" : "/", n = d.D.createComment(`<dde:mark ${t}${d.ssr}${r}>`);
-	return e && (n.end = d.D.createComment("</dde:mark>")), n;
+createElement.mark = function(attrs, is_open = false) {
+	attrs = Object.entries(attrs).map(([n, v]) => n + `="${v}"`).join(" ");
+	const end = is_open ? "" : "/";
+	const out = enviroment.D.createComment(`<dde:mark ${attrs}${enviroment.ssr}${end}>`);
+	if (is_open) out.end = enviroment.D.createComment("</dde:mark>");
+	return out;
 };
-function jt(t) {
-	let e = this;
-	return function(...n) {
-		$ = t;
-		let o = M.call(e, ...n);
-		return $ = void 0, o;
+function createElementNS(ns) {
+	const _this = this;
+	return function createElementNSCurried(...rest) {
+		namespace = ns;
+		const el = createElement.call(_this, ...rest);
+		namespace = void 0;
+		return el;
 	};
 }
-function Pt(t, e = t) {
-	let r = "\xB9\u2070", n = "\u2713", o = Object.fromEntries(
-		Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(r)).map((c) => [c.name += r, c])
+function simulateSlots(element, root = element) {
+	const mark_e = "\xB9\u2070", mark_s = "\u2713";
+	const slots = Object.fromEntries(
+		Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s])
 	);
-	if (t.append = new Proxy(t.append, {
-		apply(c, u, i) {
-			if (i[0] === e) return c.apply(t, i);
-			for (let p of i) {
-				let v = (p.slot || "") + r;
+	element.append = new Proxy(element.append, {
+		apply(orig, _, els) {
+			if (els[0] === root) return orig.apply(element, els);
+			for (const el of els) {
+				const name = (el.slot || "") + mark_e;
 				try {
-					bt(p, "remove", "slot");
-				} catch {
+					elementAttribute(el, "remove", "slot");
+				} catch (_error) {
 				}
-				let h = o[v];
-				if (!h) return;
-				h.name.startsWith(n) || (h.childNodes.forEach((E) => E.remove()), h.name = n + v), h.append(p);
+				const slot = slots[name];
+				if (!slot) return;
+				if (!slot.name.startsWith(mark_s)) {
+					slot.childNodes.forEach((c) => c.remove());
+					slot.name = mark_s + name;
+				}
+				slot.append(el);
 			}
-			return t.append = c, t;
+			element.append = orig;
+			return element;
 		}
-	}), t !== e) {
-		let c = Array.from(t.childNodes);
-		t.append(...c);
+	});
+	if (element !== root) {
+		const els = Array.from(element.childNodes);
+		element.append(...els);
 	}
-	return e;
+	return root;
 }
-var F = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;
-function q(t, ...e) {
-	if (!e.length) return t;
-	F.set(t, rt(t, this));
-	for (let [r, n] of Object.entries(Object.assign({}, ...e)))
-		nt.call(this, t, r, n);
-	return F.delete(t), t;
+var assign_context = /* @__PURE__ */ new WeakMap();
+var { setDeleteAttr: setDeleteAttr2 } = enviroment;
+function assign(element, ...attributes) {
+	if (!attributes.length) return element;
+	assign_context.set(element, assignContext(element, this));
+	for (const [key, value] of Object.entries(oAssign({}, ...attributes)))
+		assignAttribute.call(this, element, key, value);
+	assign_context.delete(element);
+	return element;
 }
-function nt(t, e, r) {
-	let { setRemoveAttr: n, s: o } = rt(t, this), c = this;
-	r = o.processReactiveAttribute(
-		t,
-		e,
-		r,
-		(i, p) => nt.call(c, t, i, p)
+function assignAttribute(element, key, value) {
+	const { setRemoveAttr, s } = assignContext(element, this);
+	const _this = this;
+	value = s.processReactiveAttribute(
+		element,
+		key,
+		value,
+		(key2, value2) => assignAttribute.call(_this, element, key2, value2)
 	);
-	let [u] = e;
-	if (u === "=") return n(e.slice(1), r);
-	if (u === ".") return et(t, e.slice(1), r);
-	if (/(aria|data)([A-Z])/.test(e))
-		return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), n(e, r);
-	switch (e === "className" && (e = "class"), e) {
+	const [k] = key;
+	if ("=" === k) return setRemoveAttr(key.slice(1), value);
+	if ("." === k) return setDelete(element, key.slice(1), value);
+	if (/(aria|data)([A-Z])/.test(key)) {
+		key = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+		return setRemoveAttr(key, value);
+	}
+	if ("className" === key) key = "class";
+	switch (key) {
 		case "xlink:href":
-			return n(e, r, "http://www.w3.org/1999/xlink");
+			return setRemoveAttr(key, value, "http://www.w3.org/1999/xlink");
 		case "textContent":
-			return tt(t, e, r);
+			return setDeleteAttr2(element, key, value);
 		case "style":
-			if (typeof r != "object") break;
+			if (typeof value !== "object") break;
 		/* falls through */
 		case "dataset":
-			return B(o, e, t, r, et.bind(null, t[e]));
+			return forEachEntries(s, key, element, value, setDelete.bind(null, element[key]));
 		case "ariaset":
-			return B(o, e, t, r, (i, p) => n("aria-" + i, p));
+			return forEachEntries(s, key, element, value, (key2, val) => setRemoveAttr("aria-" + key2, val));
 		case "classList":
-			return ht.call(c, t, r);
+			return classListDeclarative.call(_this, element, value);
 	}
-	return gt(t, e) ? tt(t, e, r) : n(e, r);
+	return isPropSetter(element, key) ? setDeleteAttr2(element, key, value) : setRemoveAttr(key, value);
 }
-function rt(t, e) {
-	if (F.has(t)) return F.get(t);
-	let n = (t instanceof d.S ? mt : vt).bind(null, t, "Attribute"), o = j(e);
-	return { setRemoveAttr: n, s: o };
+function assignContext(element, _this) {
+	if (assign_context.has(element)) return assign_context.get(element);
+	const is_svg = isInstance(element, enviroment.S);
+	const setRemoveAttr = (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute");
+	const s = signals(_this);
+	return { setRemoveAttr, s };
 }
-function ht(t, e) {
-	let r = j(this);
-	return B(
-		r,
+function classListDeclarative(element, toggle) {
+	const s = signals(this);
+	forEachEntries(
+		s,
 		"classList",
-		t,
-		e,
-		(n, o) => t.classList.toggle(n, o === -1 ? void 0 : !!o)
-	), t;
+		element,
+		toggle,
+		(class_name, val) => element.classList.toggle(class_name, val === -1 ? void 0 : Boolean(val))
+	);
+	return element;
 }
-function bt(t, e, r, n) {
-	return t instanceof d.H ? t[e + "Attribute"](r, n) : t[e + "AttributeNS"](null, r, n);
+function elementAttribute(element, op, key, value) {
+	if (isInstance(element, enviroment.H))
+		return element[op + "Attribute"](key, value);
+	return element[op + "AttributeNS"](null, key, value);
 }
-function gt(t, e) {
-	if (!(e in t)) return !1;
-	let r = ot(t, e);
-	return !S(r.set);
+function isPropSetter(el, key) {
+	if (!(key in el)) return false;
+	const des = getPropDescriptor(el, key);
+	return !isUndef(des.set);
 }
-function ot(t, e) {
-	if (t = Object.getPrototypeOf(t), !t) return {};
-	let r = Object.getOwnPropertyDescriptor(t, e);
-	return r || ot(t, e);
+function getPropDescriptor(p, key) {
+	p = Object.getPrototypeOf(p);
+	if (!p) return {};
+	const des = Object.getOwnPropertyDescriptor(p, key);
+	if (!des) return getPropDescriptor(p, key);
+	return des;
 }
-function B(t, e, r, n, o) {
-	let c = String;
-	if (!(typeof n != "object" || n === null))
-		return Object.entries(n).forEach(function([i, p]) {
-			i && (i = new c(i), i.target = e, p = t.processReactiveAttribute(r, i, p, o), o(i, p));
-		});
+function forEachEntries(s, target, element, obj, cb) {
+	const S = String;
+	if (typeof obj !== "object" || obj === null) return;
+	return Object.entries(obj).forEach(function process([key, val]) {
+		if (!key) return;
+		key = new S(key);
+		key.target = target;
+		val = s.processReactiveAttribute(element, key, val, cb);
+		cb(key, val);
+	});
 }
-function vt(t, e, r, n) {
-	return t[(S(n) ? "remove" : "set") + e](r, n);
+function setRemove(obj, prop, key, val) {
+	return obj[(isUndef(val) ? "remove" : "set") + prop](key, val);
 }
-function mt(t, e, r, n, o = null) {
-	return t[(S(n) ? "remove" : "set") + e + "NS"](o, r, n);
+function setRemoveNS(obj, prop, key, val, ns = null) {
+	return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val);
 }
-function et(t, e, r) {
-	if (Reflect.set(t, e, r), !!S(r))
-		return Reflect.deleteProperty(t, e);
+function setDelete(obj, key, val) {
+	Reflect.set(obj, key, val);
+	if (!isUndef(val)) return;
+	return Reflect.deleteProperty(obj, key);
 }
 
 // src/events-observer.js
-var C = d.M ? Et() : new Proxy({}, {
+var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
 	get() {
 		return () => {
 		};
 	}
 });
-function Et() {
-	let t = /* @__PURE__ */ new Map(), e = !1, r = (s) => function(f) {
-		for (let a of f)
-			if (a.type === "childList") {
-				if (h(a.addedNodes, !0)) {
-					s();
-					continue;
-				}
-				E(a.removedNodes, !0) && s();
+function connectionsChangesObserverConstructor() {
+	const store = /* @__PURE__ */ new Map();
+	let is_observing = false;
+	const observerListener = (stop2) => function(mutations) {
+		for (const mutation of mutations) {
+			if (mutation.type !== "childList") continue;
+			if (observerAdded(mutation.addedNodes, true)) {
+				stop2();
+				continue;
 			}
-	}, n = new d.M(r(i));
-	return {
-		observe(s) {
-			let f = new d.M(r(() => {
-			}));
-			return f.observe(s, { childList: !0, subtree: !0 }), () => f.disconnect();
-		},
-		onConnected(s, f) {
-			u();
-			let a = c(s);
-			a.connected.has(f) || (a.connected.add(f), a.length_c += 1);
-		},
-		offConnected(s, f) {
-			if (!t.has(s)) return;
-			let a = t.get(s);
-			a.connected.has(f) && (a.connected.delete(f), a.length_c -= 1, o(s, a));
-		},
-		onDisconnected(s, f) {
-			u();
-			let a = c(s);
-			a.disconnected.has(f) || (a.disconnected.add(f), a.length_d += 1);
-		},
-		offDisconnected(s, f) {
-			if (!t.has(s)) return;
-			let a = t.get(s);
-			a.disconnected.has(f) && (a.disconnected.delete(f), a.length_d -= 1, o(s, a));
+			if (observerRemoved(mutation.removedNodes, true))
+				stop2();
 		}
 	};
-	function o(s, f) {
-		f.length_c || f.length_d || (t.delete(s), i());
+	const observer = new enviroment.M(observerListener(stop));
+	return {
+		/**
+		* Creates an observer for a specific element
+		* @param {Element} element - Element to observe
+		* @returns {Function} Cleanup function
+		*/
+		observe(element) {
+			const o = new enviroment.M(observerListener(() => {
+			}));
+			o.observe(element, { childList: true, subtree: true });
+			return () => o.disconnect();
+		},
+		/**
+		* Register a connection listener for an element
+		* @param {Element} element - Element to watch
+		* @param {Function} listener - Callback for connection event
+		*/
+		onConnected(element, listener) {
+			start();
+			const listeners = getElementStore(element);
+			if (listeners.connected.has(listener)) return;
+			listeners.connected.add(listener);
+			listeners.length_c += 1;
+		},
+		/**
+		* Unregister a connection listener
+		* @param {Element} element - Element being watched
+		* @param {Function} listener - Callback to remove
+		*/
+		offConnected(element, listener) {
+			if (!store.has(element)) return;
+			const ls = store.get(element);
+			if (!ls.connected.has(listener)) return;
+			ls.connected.delete(listener);
+			ls.length_c -= 1;
+			cleanWhenOff(element, ls);
+		},
+		/**
+		* Register a disconnection listener for an element
+		* @param {Element} element - Element to watch
+		* @param {Function} listener - Callback for disconnection event
+		*/
+		onDisconnected(element, listener) {
+			start();
+			const listeners = getElementStore(element);
+			if (listeners.disconnected.has(listener)) return;
+			listeners.disconnected.add(listener);
+			listeners.length_d += 1;
+		},
+		/**
+		* Unregister a disconnection listener
+		* @param {Element} element - Element being watched
+		* @param {Function} listener - Callback to remove
+		*/
+		offDisconnected(element, listener) {
+			if (!store.has(element)) return;
+			const ls = store.get(element);
+			ls.disconnected.delete(listener);
+			ls.length_d -= 1;
+			cleanWhenOff(element, ls);
+		}
+	};
+	function cleanWhenOff(element, ls) {
+		if (ls.length_c || ls.length_d)
+			return;
+		store.delete(element);
+		stop();
 	}
-	function c(s) {
-		if (t.has(s)) return t.get(s);
-		let f = {
+	function getElementStore(element) {
+		if (store.has(element)) return store.get(element);
+		const out = {
 			connected: /* @__PURE__ */ new WeakSet(),
 			length_c: 0,
 			disconnected: /* @__PURE__ */ new WeakSet(),
 			length_d: 0
 		};
-		return t.set(s, f), f;
+		store.set(element, out);
+		return out;
 	}
-	function u() {
-		e || (e = !0, n.observe(d.D.body, { childList: !0, subtree: !0 }));
+	function start() {
+		if (is_observing) return;
+		is_observing = true;
+		observer.observe(enviroment.D.body, { childList: true, subtree: true });
 	}
-	function i() {
-		!e || t.size || (e = !1, n.disconnect());
+	function stop() {
+		if (!is_observing || store.size) return;
+		is_observing = false;
+		observer.disconnect();
 	}
-	function p() {
-		return new Promise(function(s) {
-			(requestIdleCallback || requestAnimationFrame)(s);
+	function requestIdle() {
+		return new Promise(function(resolve) {
+			(requestIdleCallback || requestAnimationFrame)(resolve);
 		});
 	}
-	async function v(s) {
-		t.size > 30 && await p();
-		let f = [];
-		if (!(s instanceof Node)) return f;
-		for (let a of t.keys())
-			a === s || !(a instanceof Node) || s.contains(a) && f.push(a);
-		return f;
-	}
-	function h(s, f) {
-		let a = !1;
-		for (let b of s) {
-			if (f && v(b).then(h), !t.has(b)) continue;
-			let N = t.get(b);
-			N.length_c && (b.dispatchEvent(new Event(w)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), a = !0);
+	async function collectChildren(element) {
+		if (store.size > 30)
+			await requestIdle();
+		const out = [];
+		if (!isInstance(element, Node)) return out;
+		for (const el of store.keys()) {
+			if (el === element || !isInstance(el, Node)) continue;
+			if (element.contains(el))
+				out.push(el);
 		}
-		return a;
+		return out;
 	}
-	function E(s, f) {
-		let a = !1;
-		for (let b of s)
-			f && v(b).then(E), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(L(b)), a = !0);
-		return a;
+	function observerAdded(addedNodes, is_root) {
+		let out = false;
+		for (const element of addedNodes) {
+			if (is_root) collectChildren(element).then(observerAdded);
+			if (!store.has(element)) continue;
+			const ls = store.get(element);
+			if (!ls.length_c) continue;
+			element.dispatchEvent(new Event(evc));
+			ls.connected = /* @__PURE__ */ new WeakSet();
+			ls.length_c = 0;
+			if (!ls.length_d) store.delete(element);
+			out = true;
+		}
+		return out;
 	}
-	function L(s) {
+	function observerRemoved(removedNodes, is_root) {
+		let out = false;
+		for (const element of removedNodes) {
+			if (is_root) collectChildren(element).then(observerRemoved);
+			if (!store.has(element)) continue;
+			const ls = store.get(element);
+			if (!ls.length_d) continue;
+			(globalThis.queueMicrotask || setTimeout)(dispatchRemove(element));
+			out = true;
+		}
+		return out;
+	}
+	function dispatchRemove(element) {
 		return () => {
-			s.isConnected || (s.dispatchEvent(new Event(y)), t.delete(s));
+			if (element.isConnected) return;
+			element.dispatchEvent(new Event(evd));
+			store.delete(element);
 		};
 	}
 }
 
 // src/customElement.js
-function It(t, e, r = _t) {
-	let n = t.host || t;
-	x.push({
-		scope: n,
-		host: (...u) => u.length ? u.forEach((i) => i(n)) : n
-	}), typeof r == "function" && (r = r.call(n, n));
-	let o = n[O];
-	o || xt(n);
-	let c = e.call(n, r);
-	return o || n.dispatchEvent(new Event(w)), t.nodeType === 11 && typeof t.mode == "string" && n.addEventListener(y, C.observe(t), { once: !0 }), x.pop(), t.append(c);
+function customElementRender(target, render, props = observedAttributes2) {
+	const custom_element = target.host || target;
+	scope.push({
+		scope: custom_element,
+		host: (...c) => c.length ? c.forEach((c2) => c2(custom_element)) : custom_element
+	});
+	if (typeof props === "function") props = props.call(custom_element, custom_element);
+	const is_lte = custom_element[keyLTE];
+	if (!is_lte) lifecyclesToEvents(custom_element);
+	const out = render.call(custom_element, props);
+	if (!is_lte) custom_element.dispatchEvent(new Event(evc));
+	if (target.nodeType === 11 && typeof target.mode === "string")
+		custom_element.addEventListener(evd, c_ch_o.observe(target), { once: true });
+	scope.pop();
+	return target.append(out);
 }
-function xt(t) {
-	return J(t.prototype, "connectedCallback", function(e, r, n) {
-		e.apply(r, n), r.dispatchEvent(new Event(w));
-	}), J(t.prototype, "disconnectedCallback", function(e, r, n) {
-		e.apply(r, n), (globalThis.queueMicrotask || setTimeout)(
-			() => !r.isConnected && r.dispatchEvent(new Event(y))
+function lifecyclesToEvents(class_declaration) {
+	wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail) {
+		target.apply(thisArg, detail);
+		thisArg.dispatchEvent(new Event(evc));
+	});
+	wrapMethod(class_declaration.prototype, "disconnectedCallback", function(target, thisArg, detail) {
+		target.apply(thisArg, detail);
+		(globalThis.queueMicrotask || setTimeout)(
+			() => !thisArg.isConnected && thisArg.dispatchEvent(new Event(evd))
 		);
-	}), J(t.prototype, "attributeChangedCallback", function(e, r, n) {
-		let [o, , c] = n;
-		r.dispatchEvent(new CustomEvent(k, {
-			detail: [o, c]
-		})), e.apply(r, n);
-	}), t.prototype[O] = !0, t;
+	});
+	wrapMethod(class_declaration.prototype, "attributeChangedCallback", function(target, thisArg, detail) {
+		const [attribute, , value] = detail;
+		thisArg.dispatchEvent(new CustomEvent(eva, {
+			detail: [attribute, value]
+		}));
+		target.apply(thisArg, detail);
+	});
+	class_declaration.prototype[keyLTE] = true;
+	return class_declaration;
 }
-function J(t, e, r) {
-	t[e] = new Proxy(t[e] || (() => {
-	}), { apply: r });
+function wrapMethod(obj, method, apply) {
+	obj[method] = new Proxy(obj[method] || (() => {
+	}), { apply });
 }
-function _t(t) {
-	return W(t, (e, r) => e.getAttribute(r));
+function observedAttributes2(instance) {
+	return observedAttributes(instance, (i, n) => i.getAttribute(n));
 }
 
 // src/events.js
-function Gt(t, e, r) {
-	return e || (e = {}), function(o, ...c) {
-		r && (c.unshift(o), o = typeof r == "function" ? r() : r);
-		let u = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
-		return o.dispatchEvent(u);
+function dispatchEvent(name, options, host) {
+	if (typeof options === "function") {
+		host = options;
+		options = null;
+	}
+	if (!options) options = {};
+	return function dispatch(element, ...d) {
+		if (host) {
+			d.unshift(element);
+			element = typeof host === "function" ? host() : host;
+		}
+		const event = d.length ? new CustomEvent(name, oAssign({ detail: d[0] }, options)) : new Event(name, options);
+		return element.dispatchEvent(event);
 	};
 }
-function _(t, e, r) {
-	return function(o) {
-		return o.addEventListener(t, e, r), o;
+function on(event, listener, options) {
+	return function registerElement(element) {
+		element.addEventListener(event, listener, options);
+		return element;
 	};
 }
-var ct = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
-_.connected = function(t, e) {
-	return e = ct(e), function(n) {
-		return n.addEventListener(w, t, e), n[O] ? n : n.isConnected ? (n.dispatchEvent(new Event(w)), n) : (P(e.signal, () => C.offConnected(n, t)) && C.onConnected(n, t), n);
+var lifeOptions = (obj) => oAssign({}, typeof obj === "object" ? obj : null, { once: true });
+on.connected = function(listener, options) {
+	options = lifeOptions(options);
+	return function registerElement(element) {
+		element.addEventListener(evc, listener, options);
+		if (element[keyLTE]) return element;
+		if (element.isConnected) return element.dispatchEvent(new Event(evc)), element;
+		const c = onAbort(options.signal, () => c_ch_o.offConnected(element, listener));
+		if (c) c_ch_o.onConnected(element, listener);
+		return element;
 	};
 };
-_.disconnected = function(t, e) {
-	return e = ct(e), function(n) {
-		return n.addEventListener(y, t, e), n[O] || P(e.signal, () => C.offDisconnected(n, t)) && C.onDisconnected(n, t), n;
+on.disconnected = function(listener, options) {
+	options = lifeOptions(options);
+	return function registerElement(element) {
+		element.addEventListener(evd, listener, options);
+		if (element[keyLTE]) return element;
+		const c = onAbort(options.signal, () => c_ch_o.offDisconnected(element, listener));
+		if (c) c_ch_o.onDisconnected(element, listener);
+		return element;
 	};
 };
-var Z = /* @__PURE__ */ new WeakMap();
-_.disconnectedAsAbort = function(t) {
-	if (Z.has(t)) return Z.get(t);
-	let e = new AbortController();
-	return Z.set(t, e), t(_.disconnected(() => e.abort())), e;
+var store_abort = /* @__PURE__ */ new WeakMap();
+on.disconnectedAsAbort = function(host) {
+	if (store_abort.has(host)) return store_abort.get(host);
+	const a = new AbortController();
+	store_abort.set(host, a);
+	host(on.disconnected(() => a.abort()));
+	return a.signal;
 };
-var wt = /* @__PURE__ */ new WeakSet();
-_.attributeChanged = function(t, e) {
-	return typeof e != "object" && (e = {}), function(n) {
-		if (n.addEventListener(k, t, e), n[O] || wt.has(n) || !d.M) return n;
-		let o = new d.M(function(u) {
-			for (let { attributeName: i, target: p } of u)
-				p.dispatchEvent(
-					new CustomEvent(k, { detail: [i, p.getAttribute(i)] })
+var els_attribute_store = /* @__PURE__ */ new WeakSet();
+on.attributeChanged = function(listener, options) {
+	if (typeof options !== "object")
+		options = {};
+	return function registerElement(element) {
+		element.addEventListener(eva, listener, options);
+		if (element[keyLTE] || els_attribute_store.has(element))
+			return element;
+		if (!enviroment.M) return element;
+		const observer = new enviroment.M(function(mutations) {
+			for (const { attributeName, target } of mutations)
+				target.dispatchEvent(
+					new CustomEvent(eva, { detail: [attributeName, target.getAttribute(attributeName)] })
 				);
 		});
-		return P(e.signal, () => o.disconnect()) && o.observe(n, { attributes: !0 }), n;
+		const c = onAbort(options.signal, () => observer.disconnect());
+		if (c) observer.observe(element, { attributes: true });
+		return element;
 	};
 };
 
-// src/signals-lib.js
-var l = "__dde_signal";
-function U(t) {
-	try {
-		return I(t, l);
-	} catch {
-		return !1;
+// src/signals-lib/helpers.js
+var mark = "__dde_signal";
+var queueSignalWrite = /* @__PURE__ */ (() => {
+	let pendingSignals = /* @__PURE__ */ new Set();
+	let scheduled = false;
+	function flushSignals() {
+		scheduled = false;
+		const todo = pendingSignals;
+		pendingSignals = /* @__PURE__ */ new Set();
+		for (const signal2 of todo) {
+			const M = signal2[mark];
+			if (M) M.listeners.forEach((l) => l(M.value));
+		}
 	}
-}
-var z = [], g = /* @__PURE__ */ new WeakMap();
-function m(t, e) {
-	if (typeof t != "function")
-		return it(!1, t, e);
-	if (U(t)) return t;
-	let r = it(!0), n = function() {
-		let [o, ...c] = g.get(n);
-		if (g.set(n, /* @__PURE__ */ new Set([o])), z.push(n), at(r, t()), z.pop(), !c.length) return;
-		let u = g.get(n);
-		for (let i of c)
-			u.has(i) || R(i, n);
+	return function(s) {
+		pendingSignals.add(s);
+		if (scheduled) return;
+		scheduled = true;
+		queueMicrotask(flushSignals);
 	};
-	return g.set(r[l], n), g.set(n, /* @__PURE__ */ new Set([r])), n(), r;
+})();
+
+// src/signals-lib/signals-lib.js
+var Signal = oCreate(null, {
+	get: { value() {
+		return read(this);
+	} },
+	set: { value(...v) {
+		return write(this, ...v);
+	} },
+	toJSON: { value() {
+		return read(this);
+	} },
+	valueOf: { value() {
+		return this[mark] && this[mark].value;
+	} }
+});
+var SignalReadOnly = oCreate(Signal, {
+	set: { value() {
+		return;
+	} }
+});
+function isSignal(candidate) {
+	return candidate && candidate[mark];
 }
-m.action = function(t, e, ...r) {
-	let n = t[l], { actions: o } = n;
-	if (!o || !(e in o))
-		throw new Error(`'${t}' has no action with name '${e}'!`);
-	if (o[e].apply(n, r), n.skip) return delete n.skip;
-	n.listeners.forEach((c) => c(n.value));
-};
-m.on = function t(e, r, n = {}) {
-	let { signal: o } = n;
-	if (!(o && o.aborted)) {
-		if (Array.isArray(e)) return e.forEach((c) => t(c, r, n));
-		Q(e, r), o && o.addEventListener("abort", () => R(e, r));
+var stack_watch = [];
+var deps = /* @__PURE__ */ new WeakMap();
+function signal(value, actions) {
+	if (typeof value !== "function")
+		return create(false, value, actions);
+	if (isSignal(value)) return value;
+	const out = create(true);
+	function contextReWatch() {
+		const [origin, ...deps_old] = deps.get(contextReWatch);
+		deps.set(contextReWatch, /* @__PURE__ */ new Set([origin]));
+		stack_watch.push(contextReWatch);
+		write(out, value());
+		stack_watch.pop();
+		if (!deps_old.length) return;
+		const deps_curr = deps.get(contextReWatch);
+		for (const dep_signal of deps_old) {
+			if (deps_curr.has(dep_signal)) continue;
+			removeSignalListener(dep_signal, contextReWatch);
+		}
 	}
+	deps.set(out[mark], contextReWatch);
+	deps.set(contextReWatch, /* @__PURE__ */ new Set([out]));
+	contextReWatch();
+	return out;
+}
+signal.action = function(s, name, ...a) {
+	const M = s[mark];
+	if (!M) return;
+	const { actions } = M;
+	if (!actions || !hasOwn(actions, name))
+		throw new Error(`Action "${name}" not defined. See ${mark}.actions.`);
+	actions[name].apply(M, a);
+	if (M.skip) return delete M.skip;
+	queueSignalWrite(s);
 };
-m.symbols = {
+signal.on = function on2(s, listener, options = {}) {
+	const { signal: as } = options;
+	if (as && as.aborted) return;
+	if (Array.isArray(s)) return s.forEach((s2) => on2(s2, listener, options));
+	addSignalListener(s, listener);
+	if (as) as.addEventListener("abort", () => removeSignalListener(s, listener));
+};
+signal.symbols = {
 	//signal: mark,
 	onclear: Symbol.for("Signal.onclear")
 };
-m.clear = function(...t) {
-	for (let r of t) {
-		let n = r[l];
-		n && (delete r.toJSON, n.onclear.forEach((o) => o.call(n)), e(r, n), delete r[l]);
+signal.clear = function(...signals2) {
+	for (const s of signals2) {
+		const M = s[mark];
+		if (!M) continue;
+		delete s.toJSON;
+		M.onclear.forEach((f) => f.call(M));
+		clearListDeps(s, M);
+		delete s[mark];
 	}
-	function e(r, n) {
-		n.listeners.forEach((o) => {
-			if (n.listeners.delete(o), !g.has(o)) return;
-			let c = g.get(o);
-			c.delete(r), !(c.size > 1) && (r.clear(...c), g.delete(o));
+	function clearListDeps(s, o) {
+		o.listeners.forEach((l) => {
+			o.listeners.delete(l);
+			if (!deps.has(l)) return;
+			const ls = deps.get(l);
+			ls.delete(s);
+			if (ls.size > 1) return;
+			s.clear(...ls);
+			deps.delete(l);
 		});
 	}
 };
-var D = "__dde_reactive";
-m.el = function(t, e) {
-	let r = M.mark({ type: "reactive" }, !0), n = r.end, o = d.D.createDocumentFragment();
-	o.append(r, n);
-	let { current: c } = x, u = {}, i = (p) => {
-		if (!r.parentNode || !n.parentNode)
-			return R(t, i);
-		let v = u;
-		u = {}, x.push(c);
-		let h = e(p, function(f, a) {
-			let b;
-			return I(v, f) ? (b = v[f], delete v[f]) : b = a(), u[f] = b, b;
+var key_reactive = "__dde_reactive";
+function cache(store = oCreate()) {
+	return (key, fun) => hasOwn(store, key) ? store[key] : store[key] = fun();
+}
+signal.el = function(s, map) {
+	const mark_start = createElement.mark({ type: "reactive", source: new Defined().compact }, true);
+	const mark_end = mark_start.end;
+	const out = enviroment.D.createDocumentFragment();
+	out.append(mark_start, mark_end);
+	const { current } = scope;
+	let cache_shared = oCreate();
+	const reRenderReactiveElement = (v) => {
+		if (!mark_start.parentNode || !mark_end.parentNode)
+			return removeSignalListener(s, reRenderReactiveElement);
+		const memo = cache(cache_shared);
+		cache_shared = oCreate();
+		scope.push(current);
+		let els = map(v, function useCache(key, fun) {
+			return cache_shared[key] = memo(key, fun);
 		});
-		x.pop(), Array.isArray(h) || (h = [h]);
-		let E = document.createComment("");
-		h.push(E), r.after(...h);
-		let L;
-		for (; (L = E.nextSibling) && L !== n; )
-			L.remove();
-		E.remove(), r.isConnected && At(c.host());
+		scope.pop();
+		if (!Array.isArray(els))
+			els = [els];
+		const el_start_rm = document.createComment("");
+		els.push(el_start_rm);
+		mark_start.after(...els);
+		let el_r;
+		while ((el_r = el_start_rm.nextSibling) && el_r !== mark_end)
+			el_r.remove();
+		el_start_rm.remove();
+		if (mark_start.isConnected)
+			requestCleanUpReactives(current.host());
 	};
-	return Q(t, i), ut(t, i, r, e), i(t()), o;
+	addSignalListener(s, reRenderReactiveElement);
+	removeSignalsFromElements(s, reRenderReactiveElement, mark_start, map);
+	reRenderReactiveElement(s.get());
+	current.host(on.disconnected(
+		() => (
+			/*! Clears cached elements for reactive element `S.el` */
+			cache_shared = {}
+		)
+	));
+	return out;
 };
-function At(t) {
-	!t || !t[D] || (requestIdleCallback || setTimeout)(function() {
-		t[D] = t[D].filter(([e, r]) => r.isConnected ? !0 : (R(...e), !1));
+function requestCleanUpReactives(host) {
+	if (!host || !host[key_reactive]) return;
+	(requestIdleCallback || setTimeout)(function() {
+		host[key_reactive] = host[key_reactive].filter(([s, el]) => el.isConnected ? true : (removeSignalListener(...s), false));
 	});
 }
-var St = {
-	_set(t) {
-		this.value = t;
+var observedAttributeActions = {
+	_set(value) {
+		this.value = value;
 	}
 };
-function Ot(t) {
-	return function(e, r) {
-		let n = (...c) => c.length ? e.setAttribute(r, ...c) : K(n), o = ft(n, e.getAttribute(r), St);
-		return t[r] = o, o;
+function observedAttribute(store) {
+	return function(instance, name) {
+		const varS = oCreate(Signal, {
+			set: { value(...v) {
+				return instance.setAttribute(name, ...v);
+			} }
+		});
+		const out = toSignal(varS, instance.getAttribute(name), observedAttributeActions);
+		store[name] = out;
+		return out;
 	};
 }
-var G = "__dde_attributes";
-m.observedAttributes = function(t) {
-	let e = t[G] = {}, r = W(t, Ot(e));
-	return _.attributeChanged(function({ detail: o }) {
+var key_attributes = "__dde_attributes";
+signal.observedAttributes = function(element) {
+	const store = element[key_attributes] = {};
+	const attrs = observedAttributes(element, observedAttribute(store));
+	on.attributeChanged(function attributeChangeToSignal({ detail }) {
 		/*! This maps attributes to signals (`S.observedAttributes`).
-			* Investigate `__dde_attributes` key of the element.*/
-		let [c, u] = o, i = this[G][c];
-		if (i) return m.action(i, "_set", u);
-	})(t), _.disconnected(function() {
+			Investigate `__dde_attributes` key of the element. */
+		const [name, value] = detail;
+		const curr = this[key_attributes][name];
+		if (curr) return signal.action(curr, "_set", value);
+	})(element);
+	on.disconnected(function() {
 		/*! This removes all signals mapped to attributes (`S.observedAttributes`).
-			* Investigate `__dde_attributes` key of the element.*/
-		m.clear(...Object.values(this[G]));
-	})(t), r;
+			Investigate `__dde_attributes` key of the element. */
+		signal.clear(...Object.values(this[key_attributes]));
+	})(element);
+	return attrs;
 };
-var st = {
-	isSignal: U,
-	processReactiveAttribute(t, e, r, n) {
-		if (!U(r)) return r;
-		let o = (c) => {
-			if (!t.isConnected)
-				return R(r, o);
-			n(e, c);
+var signals_config = {
+	isSignal,
+	/**
+	* Processes attributes that might be signals
+	*
+	* @param {Element} element - Element with the attribute
+	* @param {string} key - Attribute name
+	* @param {any} attrs - Attribute value (possibly a signal)
+	* @param {Function} set - Function to set attribute value
+	* @returns {any} Processed attribute value
+	*/
+	processReactiveAttribute(element, key, attrs, set) {
+		if (!isSignal(attrs)) return attrs;
+		const l = (attr) => {
+			if (!element.isConnected)
+				return removeSignalListener(attrs, l);
+			set(key, attr);
 		};
-		return Q(r, o), ut(r, o, t, e), r();
+		addSignalListener(attrs, l);
+		removeSignalsFromElements(attrs, l, element, key);
+		return attrs.get();
 	}
 };
-function ut(t, e, ...r) {
-	let { current: n } = x;
-	n.host(function(o) {
-		if (o[D])
-			return o[D].push([[t, e], ...r]);
-		o[D] = [], !n.prevent && _.disconnected(
+function removeSignalsFromElements(s, listener, ...notes) {
+	const { current } = scope;
+	current.host(function(element) {
+		if (element[key_reactive])
+			return element[key_reactive].push([[s, listener], ...notes]);
+		element[key_reactive] = [];
+		if (current.prevent) return;
+		on.disconnected(
 			() => (
-				/*!
-					* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
-					* You can investigate the `__dde_reactive` key of the element.
-					* */
-				o[D].forEach(([[c, u]]) => R(c, u, c[l] && c[l].host && c[l].host() === o))
+				/*! Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
+					You can investigate the `__dde_reactive` key of the element. */
+				element[key_reactive].forEach(([[s2, listener2]]) => removeSignalListener(s2, listener2, s2[mark] && s2[mark].host && s2[mark].host() === element))
 			)
-		)(o);
+		)(element);
 	});
 }
-function it(t, e, r) {
-	let n = t ? () => K(n) : (...o) => o.length ? at(n, ...o) : K(n);
-	return ft(n, e, r, t);
+var cleanUpRegistry = new FinalizationRegistry(function(s) {
+	signal.clear({ [mark]: s });
+});
+function create(is_readonly, value, actions) {
+	const varS = oCreate(is_readonly ? SignalReadOnly : Signal);
+	const SI = toSignal(varS, value, actions, is_readonly);
+	cleanUpRegistry.register(SI, SI[mark]);
+	return SI;
 }
-var yt = Object.assign(/* @__PURE__ */ Object.create(null), {
+var protoSigal = oAssign(oCreate(), {
+	/**
+	* Prevents signal propagation
+	*/
 	stopPropagation() {
-		this.skip = !0;
+		this.skip = true;
 	}
-}), V = class extends Error {
-	constructor() {
-		super();
-		let [e, ...r] = this.stack.split(`
-`), n = e.slice(e.indexOf("@"), e.indexOf(".js:") + 4);
-		this.stack = r.find((o) => !o.includes(n));
+});
+function toSignal(s, value, actions, readonly = false) {
+	const onclear = [];
+	if (typeOf(actions) !== "[object Object]")
+		actions = {};
+	const { onclear: ocs } = signal.symbols;
+	if (actions[ocs]) {
+		onclear.push(actions[ocs]);
+		delete actions[ocs];
 	}
-};
-function ft(t, e, r, n = !1) {
-	let o = [];
-	X(r) !== "[object Object]" && (r = {});
-	let { onclear: c } = m.symbols;
-	r[c] && (o.push(r[c]), delete r[c]);
-	let { host: u } = x;
-	return Reflect.defineProperty(t, l, {
-		value: {
-			value: e,
-			actions: r,
-			onclear: o,
-			host: u,
+	const { host } = scope;
+	Reflect.defineProperty(s, mark, {
+		value: oAssign(oCreate(protoSigal), {
+			value,
+			actions,
+			onclear,
+			host,
 			listeners: /* @__PURE__ */ new Set(),
-			defined: new V().stack,
-			readonly: n
-		},
-		enumerable: !1,
-		writable: !1,
-		configurable: !0
-	}), t.toJSON = () => t(), t.valueOf = () => t[l] && t[l].value, Object.setPrototypeOf(t[l], yt), t;
+			defined: new Defined().stack,
+			readonly
+		}),
+		enumerable: false,
+		writable: false,
+		configurable: true
+	});
+	return s;
 }
-function Ct() {
-	return z[z.length - 1];
+function currentContext() {
+	return stack_watch[stack_watch.length - 1];
 }
-function K(t) {
-	if (!t[l]) return;
-	let { value: e, listeners: r } = t[l], n = Ct();
-	return n && r.add(n), g.has(n) && g.get(n).add(t), e;
+function read(s) {
+	if (!s[mark]) return;
+	const { value, listeners } = s[mark];
+	const context = currentContext();
+	if (context) listeners.add(context);
+	if (deps.has(context)) deps.get(context).add(s);
+	return value;
 }
-function at(t, e, r) {
-	if (!t[l]) return;
-	let n = t[l];
-	if (!(!r && n.value === e))
-		return n.value = e, n.listeners.forEach((o) => o(e)), e;
+function write(s, value, force) {
+	const M = s[mark];
+	if (!M || !force && M.value === value) return;
+	M.value = value;
+	queueSignalWrite(s);
+	return value;
 }
-function Q(t, e) {
-	if (t[l])
-		return t[l].listeners.add(e);
+function addSignalListener(s, listener) {
+	if (!s[mark]) return;
+	return s[mark].listeners.add(listener);
 }
-function R(t, e, r) {
-	let n = t[l];
-	if (!n) return;
-	let o = n.listeners.delete(e);
-	if (r && !n.listeners.size) {
-		if (m.clear(t), !g.has(n)) return o;
-		let c = g.get(n);
-		if (!g.has(c)) return o;
-		g.get(c).forEach((u) => R(u, c, !0));
-	}
-	return o;
+function removeSignalListener(s, listener, clear_when_empty) {
+	const M = s[mark];
+	if (!M) return;
+	const { listeners: L } = M;
+	const out = L.delete(listener);
+	if (!out || !clear_when_empty || L.size) return out;
+	signal.clear(s);
+	const depList = deps.get(M);
+	if (!depList) return out;
+	const depSource = deps.get(depList);
+	if (!depSource) return out;
+	for (const sig of depSource) removeSignalListener(sig, depList, true);
+	return out;
 }
 
 // signals.js
-H(st);
+registerReactivity(signals_config);
 export {
-	m as S,
-	q as assign,
-	nt as assignAttribute,
-	lt as chainableAppend,
-	ht as classListDeclarative,
-	M as createElement,
-	jt as createElementNS,
-	It as customElementRender,
-	xt as customElementWithDDE,
-	Gt as dispatchEvent,
-	M as el,
-	jt as elNS,
-	bt as elementAttribute,
-	U as isSignal,
-	xt as lifecyclesToEvents,
-	_t as observedAttributes,
-	_ as on,
-	Mt as queue,
-	H as registerReactivity,
-	x as scope,
-	m as signal,
-	Pt as simulateSlots
+	signal as S,
+	assign,
+	assignAttribute,
+	chainableAppend,
+	classListDeclarative,
+	createElement,
+	createElementNS,
+	customElementRender,
+	lifecyclesToEvents as customElementWithDDE,
+	dispatchEvent,
+	createElement as el,
+	createElementNS as elNS,
+	elementAttribute,
+	isSignal,
+	lifecyclesToEvents,
+	observedAttributes2 as observedAttributes,
+	on,
+	queue,
+	registerReactivity,
+	scope,
+	signal,
+	simulateSlots
 };
diff --git a/dist/esm-with-signals.min.d.ts b/dist/esm-with-signals.min.d.ts
new file mode 100644
index 0000000..5d2f226
--- /dev/null
+++ b/dist/esm-with-signals.min.d.ts
@@ -0,0 +1,783 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export interface Signal<V, A> {
+	/** The current value of the signal */
+	get(): V;
+	/** Set new value of the signal */
+	set(value: V): V;
+	toJSON(): V;
+	valueOf(): V;
+}
+export type Action<V> = (this: {
+	value: V;
+	stopPropagation(): void;
+}, ...a: any[]) => typeof signal._ | void;
+//type SymbolSignal= Symbol;
+export type SymbolOnclear = symbol;
+export type Actions<V> = Record<string | SymbolOnclear, Action<V>>;
+export type OnListenerOptions = Pick<AddEventListenerOptions, "signal"> & {
+	first_time?: boolean;
+};
+export interface signal {
+	_: Symbol;
+	/**
+	 * Computations signal. This creates a signal which is computed from other signals.
+	 * */
+	<V extends () => any>(computation: V): Signal<ReturnType<V>, {}>;
+	/**
+	 * Simple example:
+	 * ```js
+	 * const hello= S("Hello Signal");
+	 * ```
+	 * …simple todo signal:
+	 * ```js
+	 * const todos= S([], {
+	 * 	add(v){ this.value.push(S(v)); },
+	 * 	remove(i){ this.value.splice(i, 1); },
+	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
+	 * });
+	 * ```
+	 * …computed signal:
+	 * ```js
+	 * const name= S("Jan");
+	 * const surname= S("Andrle");
+	 * const fullname= S(()=> name.get()+" "+surname.get());
+	 * ```
+	 * @param value Initial signal value. Or function computing value from other signals.
+	 * @param actions Use to define actions on the signal. Such as add item to the array.
+	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
+	 *		by `S.clear`.
+	 * */
+	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(signal: S, name: N, ...params: A[N] extends (...args: infer P) => any ? P : never): void;
+	clear(...signals: Signal<any, any>[]): void;
+	on<T>(signal: Signal<T, any>, onchange: (a: T) => void, options?: OnListenerOptions): void;
+	symbols: {
+		//signal: SymbolSignal;
+		onclear: SymbolOnclear;
+	};
+	/**
+	 * Reactive element, which is rendered based on the given signal.
+	 * ```js
+	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
+	 * S.el(listS, list=> list.map(li=> el("li", li)));
+	 * ```
+	 * */
+	el<S extends any>(signal: Signal<S, any>, el: (v: S) => Element | Element[] | DocumentFragment): DocumentFragment;
+	observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
+}
+export const signal: signal;
+export const S: signal;
+declare global {
+	type ddeSignal<T, A = {}> = Signal<T, A>;
+	type ddeAction<V> = Action<V>;
+	type ddeActions<V> = Actions<V>;
+}
+export type CustomElementTagNameMap = {
+	"#text": Text;
+	"#comment": Comment;
+};
+export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
+declare global {
+	type ddeComponentAttributes = Record<any, any> | undefined;
+	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any;
+	type ddeString = string | Signal<string, {}>;
+	type ddeStringable = ddeString | number | Signal<number, {}>;
+}
+export type PascalCase = `${Capitalize<string>}${string}`;
+export type AttrsModified = {
+	/**
+	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
+	 */
+	style: Partial<CSSStyleDeclaration> | ddeString | Partial<{
+		[K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], {}>;
+	}>;
+	/**
+	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
+	 * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
+	 * for others.
+	 */
+	classList: Record<string, -1 | 0 | 1 | boolean | Signal<-1 | 0 | 1 | boolean, {}>>;
+	/**
+	 * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
+	 * Values are converted to string (see {@link DOMStringMap}).
+	 *
+	 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
+	 * */
+	dataset: Record<string, ddeStringable>;
+	/**
+	 * Sets `aria-*` simiraly to `dataset`
+	 * */
+	ariaset: Record<string, ddeString>;
+} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString> & Record<`.${string}`, any>;
+export type _fromElsInterfaces<EL extends SupportedElement> = Omit<EL, keyof AttrsModified>;
+export type IsReadonly<T, K extends keyof T> = T extends {
+	readonly [P in K]: T[K];
+} ? true : false;
+/**
+ * Just element attributtes
+ *
+ * In most cases, you can use native propertie such as
+ * [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on
+ * (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
+ *
+ * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
+ * @private
+ */
+export type ElementAttributes<T extends SupportedElement> = Partial<{
+	[K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] extends ((...p: any[]) => any) ? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>) => Signal<ReturnType<_fromElsInterfaces<T>[K]>, {}>) : (IsReadonly<_fromElsInterfaces<T>, K> extends false ? _fromElsInterfaces<T>[K] | Signal<_fromElsInterfaces<T>[K], {}> : ddeStringable);
+} & AttrsModified> & Record<string, any>;
+export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El;
+export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El;
+export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT];
+export type ExtendedHTMLElementTagNameMap = HTMLElementTagNameMap & CustomElementTagNameMap;
+export namespace el {
+	/**
+	 * Creates a marker comment for elements
+	 *
+	 * @param attrs - Marker attributes
+	 * @param [is_open=false] - Whether the marker is open-ended
+	 * @returns Comment node marker
+	 */
+	export function mark(attrs: {
+		type: "component" | "reactive" | "later";
+		name?: string;
+		host?: "this" | "parentElement";
+	}, is_open?: boolean): Comment;
+}
+export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>, ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<A extends {
+	textContent: ddeStringable;
+}, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>["textContent"], ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(tag_name: TAG, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable, ...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[]): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement;
+export function el(tag_name?: "<>"): ddeDocumentFragment;
+export function el(tag_name: string, attrs?: ElementAttributes<HTMLElement> | ddeStringable, ...addons: ddeElementAddon<HTMLElement>[]): ddeHTMLElement;
+export function elNS(namespace: "http://www.w3.org/2000/svg"): <TAG extends keyof SVGElementTagNameMap & string, EL extends (TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement)>(tag_name: TAG, attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable, ...addons: ddeElementAddon<NoInfer<EL>>[]) => TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement;
+export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG extends keyof MathMLElementTagNameMap & string, EL extends (TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement)>(tag_name: TAG, attrs?: ddeStringable | Partial<{
+	[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
+}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
+export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
+export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
+/** Simulate slots for ddeComponents */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
+/**
+ * Simulate slots in Custom Elements without using `shadowRoot`.
+ * @param el Custom Element root element
+ * @param body Body of the custom element
+ * */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void;
+export interface On {
+	/** Listens to the DOM event. See {@link Document.addEventListener} */
+	<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
+	<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+		string,
+		string
+	]>) => any, options?: AddEventListenerOptions): EE;
+}
+export const on: On;
+export type Scope = {
+	scope: Node | Function | Object;
+	host: ddeElementAddon<any>;
+	custom_element: false | HTMLElement;
+	prevent: boolean;
+};
+/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
+export const scope: {
+	current: Scope;
+	/** Stops all automatizations. E. g. signals used as attributes in current scope
+	 * registers removing these listeners (and clean signal if no other listeners are detected)
+	 * on `disconnected` event. */
+	preventDefault<T extends boolean>(prevent: T): T;
+	/**
+	 * This represents reference to the current host element — `scope.host()`.
+	 * It can be also used to register Addon(s) (functions to be called when component is initized)
+	 * — `scope.host(on.connected(console.log))`.
+	 * */
+	host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement;
+	state: Scope[];
+	/** Adds new child scope. All attributes are inherited by default. */
+	push(scope?: Partial<Scope>): ReturnType<Array<Scope>["push"]>;
+	/** Adds root scope as a child of the current scope. */
+	pushRoot(): ReturnType<Array<Scope>["push"]>;
+	/** Removes last/current child scope. */
+	pop(): ReturnType<Array<Scope>["pop"]>;
+};
+export function customElementRender<EL extends HTMLElement, P extends any = Record<string, string | Signal<string, {}>>>(target: ShadowRoot | EL, render: (props: P) => SupportedElement | DocumentFragment, props?: P | ((el: EL) => P)): EL;
+export function customElementWithDDE<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function lifecyclesToEvents<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function observedAttributes(custom_element: HTMLElement): Record<string, string>;
+/**
+ * This is used primarly for server side rendering. To be sure that all async operations
+ * are finished before the page is sent to the client.
+ * ```
+ *	// on component
+ *	function component(){
+ *		…
+ *		queue(fetch(...).then(...));
+ *	}
+ *
+ * // building the page
+ * async function build(){
+ *		const { component }= await import("./component.js");
+ *		document.body.append(el(component));
+ *		await queue();
+ *		retutn document.body.innerHTML;
+ *	}
+ * ```
+ * */
+export function queue(promise?: Promise<unknown>): Promise<unknown>;
+/* TypeScript MEH */
+declare global {
+	type ddeAppend<el> = (...nodes: (Node | string)[]) => el;
+	interface ddeDocumentFragment extends DocumentFragment {
+		append: ddeAppend<ddeDocumentFragment>;
+	}
+	interface ddeHTMLElement extends HTMLElement {
+		append: ddeAppend<ddeHTMLElement>;
+	}
+	interface ddeSVGElement extends SVGElement {
+		append: ddeAppend<ddeSVGElement>;
+	}
+	interface ddeMathMLElement extends MathMLElement {
+		append: ddeAppend<ddeMathMLElement>;
+	}
+	interface ddeHTMLElementTagNameMap {
+		"a": ddeHTMLAnchorElement;
+		"area": ddeHTMLAreaElement;
+		"audio": ddeHTMLAudioElement;
+		"base": ddeHTMLBaseElement;
+		"blockquote": ddeHTMLQuoteElement;
+		"body": ddeHTMLBodyElement;
+		"br": ddeHTMLBRElement;
+		"button": ddeHTMLButtonElement;
+		"canvas": ddeHTMLCanvasElement;
+		"caption": ddeHTMLTableCaptionElement;
+		"col": ddeHTMLTableColElement;
+		"colgroup": ddeHTMLTableColElement;
+		"data": ddeHTMLDataElement;
+		"datalist": ddeHTMLDataListElement;
+		"del": ddeHTMLModElement;
+		"details": ddeHTMLDetailsElement;
+		"dialog": ddeHTMLDialogElement;
+		"div": ddeHTMLDivElement;
+		"dl": ddeHTMLDListElement;
+		"embed": ddeHTMLEmbedElement;
+		"fieldset": ddeHTMLFieldSetElement;
+		"form": ddeHTMLFormElement;
+		"h1": ddeHTMLHeadingElement;
+		"h2": ddeHTMLHeadingElement;
+		"h3": ddeHTMLHeadingElement;
+		"h4": ddeHTMLHeadingElement;
+		"h5": ddeHTMLHeadingElement;
+		"h6": ddeHTMLHeadingElement;
+		"head": ddeHTMLHeadElement;
+		"hr": ddeHTMLHRElement;
+		"html": ddeHTMLHtmlElement;
+		"iframe": ddeHTMLIFrameElement;
+		"img": ddeHTMLImageElement;
+		"input": ddeHTMLInputElement;
+		"ins": ddeHTMLModElement;
+		"label": ddeHTMLLabelElement;
+		"legend": ddeHTMLLegendElement;
+		"li": ddeHTMLLIElement;
+		"link": ddeHTMLLinkElement;
+		"map": ddeHTMLMapElement;
+		"menu": ddeHTMLMenuElement;
+		"meta": ddeHTMLMetaElement;
+		"meter": ddeHTMLMeterElement;
+		"object": ddeHTMLObjectElement;
+		"ol": ddeHTMLOListElement;
+		"optgroup": ddeHTMLOptGroupElement;
+		"option": ddeHTMLOptionElement;
+		"output": ddeHTMLOutputElement;
+		"p": ddeHTMLParagraphElement;
+		"picture": ddeHTMLPictureElement;
+		"pre": ddeHTMLPreElement;
+		"progress": ddeHTMLProgressElement;
+		"q": ddeHTMLQuoteElement;
+		"script": ddeHTMLScriptElement;
+		"select": ddeHTMLSelectElement;
+		"slot": ddeHTMLSlotElement;
+		"source": ddeHTMLSourceElement;
+		"span": ddeHTMLSpanElement;
+		"style": ddeHTMLStyleElement;
+		"table": ddeHTMLTableElement;
+		"tbody": ddeHTMLTableSectionElement;
+		"td": ddeHTMLTableCellElement;
+		"template": ddeHTMLTemplateElement;
+		"textarea": ddeHTMLTextAreaElement;
+		"tfoot": ddeHTMLTableSectionElement;
+		"th": ddeHTMLTableCellElement;
+		"thead": ddeHTMLTableSectionElement;
+		"time": ddeHTMLTimeElement;
+		"title": ddeHTMLTitleElement;
+		"tr": ddeHTMLTableRowElement;
+		"track": ddeHTMLTrackElement;
+		"ul": ddeHTMLUListElement;
+		"video": ddeHTMLVideoElement;
+	}
+	interface ddeSVGElementTagNameMap {
+		"a": ddeSVGAElement;
+		"animate": ddeSVGAnimateElement;
+		"animateMotion": ddeSVGAnimateMotionElement;
+		"animateTransform": ddeSVGAnimateTransformElement;
+		"circle": ddeSVGCircleElement;
+		"clipPath": ddeSVGClipPathElement;
+		"defs": ddeSVGDefsElement;
+		"desc": ddeSVGDescElement;
+		"ellipse": ddeSVGEllipseElement;
+		"feBlend": ddeSVGFEBlendElement;
+		"feColorMatrix": ddeSVGFEColorMatrixElement;
+		"feComponentTransfer": ddeSVGFEComponentTransferElement;
+		"feComposite": ddeSVGFECompositeElement;
+		"feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
+		"feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
+		"feDisplacementMap": ddeSVGFEDisplacementMapElement;
+		"feDistantLight": ddeSVGFEDistantLightElement;
+		"feDropShadow": ddeSVGFEDropShadowElement;
+		"feFlood": ddeSVGFEFloodElement;
+		"feFuncA": ddeSVGFEFuncAElement;
+		"feFuncB": ddeSVGFEFuncBElement;
+		"feFuncG": ddeSVGFEFuncGElement;
+		"feFuncR": ddeSVGFEFuncRElement;
+		"feGaussianBlur": ddeSVGFEGaussianBlurElement;
+		"feImage": ddeSVGFEImageElement;
+		"feMerge": ddeSVGFEMergeElement;
+		"feMergeNode": ddeSVGFEMergeNodeElement;
+		"feMorphology": ddeSVGFEMorphologyElement;
+		"feOffset": ddeSVGFEOffsetElement;
+		"fePointLight": ddeSVGFEPointLightElement;
+		"feSpecularLighting": ddeSVGFESpecularLightingElement;
+		"feSpotLight": ddeSVGFESpotLightElement;
+		"feTile": ddeSVGFETileElement;
+		"feTurbulence": ddeSVGFETurbulenceElement;
+		"filter": ddeSVGFilterElement;
+		"foreignObject": ddeSVGForeignObjectElement;
+		"g": ddeSVGGElement;
+		"image": ddeSVGImageElement;
+		"line": ddeSVGLineElement;
+		"linearGradient": ddeSVGLinearGradientElement;
+		"marker": ddeSVGMarkerElement;
+		"mask": ddeSVGMaskElement;
+		"metadata": ddeSVGMetadataElement;
+		"mpath": ddeSVGMPathElement;
+		"path": ddeSVGPathElement;
+		"pattern": ddeSVGPatternElement;
+		"polygon": ddeSVGPolygonElement;
+		"polyline": ddeSVGPolylineElement;
+		"radialGradient": ddeSVGRadialGradientElement;
+		"rect": ddeSVGRectElement;
+		"script": ddeSVGScriptElement;
+		"set": ddeSVGSetElement;
+		"stop": ddeSVGStopElement;
+		"style": ddeSVGStyleElement;
+		"svg": ddeSVGSVGElement;
+		"switch": ddeSVGSwitchElement;
+		"symbol": ddeSVGSymbolElement;
+		"text": ddeSVGTextElement;
+		"textPath": ddeSVGTextPathElement;
+		"title": ddeSVGTitleElement;
+		"tspan": ddeSVGTSpanElement;
+		"use": ddeSVGUseElement;
+		"view": ddeSVGViewElement;
+	}
+}
+// editorconfig-checker-disable
+export interface ddeHTMLAnchorElement extends HTMLAnchorElement {
+	append: ddeAppend<ddeHTMLAnchorElement>;
+}
+export interface ddeHTMLAreaElement extends HTMLAreaElement {
+	append: ddeAppend<ddeHTMLAreaElement>;
+}
+export interface ddeHTMLAudioElement extends HTMLAudioElement {
+	append: ddeAppend<ddeHTMLAudioElement>;
+}
+export interface ddeHTMLBaseElement extends HTMLBaseElement {
+	append: ddeAppend<ddeHTMLBaseElement>;
+}
+export interface ddeHTMLQuoteElement extends HTMLQuoteElement {
+	append: ddeAppend<ddeHTMLQuoteElement>;
+}
+export interface ddeHTMLBodyElement extends HTMLBodyElement {
+	append: ddeAppend<ddeHTMLBodyElement>;
+}
+export interface ddeHTMLBRElement extends HTMLBRElement {
+	append: ddeAppend<ddeHTMLBRElement>;
+}
+export interface ddeHTMLButtonElement extends HTMLButtonElement {
+	append: ddeAppend<ddeHTMLButtonElement>;
+}
+export interface ddeHTMLCanvasElement extends HTMLCanvasElement {
+	append: ddeAppend<ddeHTMLCanvasElement>;
+}
+export interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement {
+	append: ddeAppend<ddeHTMLTableCaptionElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLDataElement extends HTMLDataElement {
+	append: ddeAppend<ddeHTMLDataElement>;
+}
+export interface ddeHTMLDataListElement extends HTMLDataListElement {
+	append: ddeAppend<ddeHTMLDataListElement>;
+}
+export interface ddeHTMLModElement extends HTMLModElement {
+	append: ddeAppend<ddeHTMLModElement>;
+}
+export interface ddeHTMLDetailsElement extends HTMLDetailsElement {
+	append: ddeAppend<ddeHTMLDetailsElement>;
+}
+export interface ddeHTMLDialogElement extends HTMLDialogElement {
+	append: ddeAppend<ddeHTMLDialogElement>;
+}
+export interface ddeHTMLDivElement extends HTMLDivElement {
+	append: ddeAppend<ddeHTMLDivElement>;
+}
+export interface ddeHTMLDListElement extends HTMLDListElement {
+	append: ddeAppend<ddeHTMLDListElement>;
+}
+export interface ddeHTMLEmbedElement extends HTMLEmbedElement {
+	append: ddeAppend<ddeHTMLEmbedElement>;
+}
+export interface ddeHTMLFieldSetElement extends HTMLFieldSetElement {
+	append: ddeAppend<ddeHTMLFieldSetElement>;
+}
+export interface ddeHTMLFormElement extends HTMLFormElement {
+	append: ddeAppend<ddeHTMLFormElement>;
+}
+export interface ddeHTMLHeadingElement extends HTMLHeadingElement {
+	append: ddeAppend<ddeHTMLHeadingElement>;
+}
+export interface ddeHTMLHeadElement extends HTMLHeadElement {
+	append: ddeAppend<ddeHTMLHeadElement>;
+}
+export interface ddeHTMLHRElement extends HTMLHRElement {
+	append: ddeAppend<ddeHTMLHRElement>;
+}
+export interface ddeHTMLHtmlElement extends HTMLHtmlElement {
+	append: ddeAppend<ddeHTMLHtmlElement>;
+}
+export interface ddeHTMLIFrameElement extends HTMLIFrameElement {
+	append: ddeAppend<ddeHTMLIFrameElement>;
+}
+export interface ddeHTMLImageElement extends HTMLImageElement {
+	append: ddeAppend<ddeHTMLImageElement>;
+}
+export interface ddeHTMLInputElement extends HTMLInputElement {
+	append: ddeAppend<ddeHTMLInputElement>;
+}
+export interface ddeHTMLLabelElement extends HTMLLabelElement {
+	append: ddeAppend<ddeHTMLLabelElement>;
+}
+export interface ddeHTMLLegendElement extends HTMLLegendElement {
+	append: ddeAppend<ddeHTMLLegendElement>;
+}
+export interface ddeHTMLLIElement extends HTMLLIElement {
+	append: ddeAppend<ddeHTMLLIElement>;
+}
+export interface ddeHTMLLinkElement extends HTMLLinkElement {
+	append: ddeAppend<ddeHTMLLinkElement>;
+}
+export interface ddeHTMLMapElement extends HTMLMapElement {
+	append: ddeAppend<ddeHTMLMapElement>;
+}
+export interface ddeHTMLMenuElement extends HTMLMenuElement {
+	append: ddeAppend<ddeHTMLMenuElement>;
+}
+export interface ddeHTMLMetaElement extends HTMLMetaElement {
+	append: ddeAppend<ddeHTMLMetaElement>;
+}
+export interface ddeHTMLMeterElement extends HTMLMeterElement {
+	append: ddeAppend<ddeHTMLMeterElement>;
+}
+export interface ddeHTMLObjectElement extends HTMLObjectElement {
+	append: ddeAppend<ddeHTMLObjectElement>;
+}
+export interface ddeHTMLOListElement extends HTMLOListElement {
+	append: ddeAppend<ddeHTMLOListElement>;
+}
+export interface ddeHTMLOptGroupElement extends HTMLOptGroupElement {
+	append: ddeAppend<ddeHTMLOptGroupElement>;
+}
+export interface ddeHTMLOptionElement extends HTMLOptionElement {
+	append: ddeAppend<ddeHTMLOptionElement>;
+}
+export interface ddeHTMLOutputElement extends HTMLOutputElement {
+	append: ddeAppend<ddeHTMLOutputElement>;
+}
+export interface ddeHTMLParagraphElement extends HTMLParagraphElement {
+	append: ddeAppend<ddeHTMLParagraphElement>;
+}
+export interface ddeHTMLPictureElement extends HTMLPictureElement {
+	append: ddeAppend<ddeHTMLPictureElement>;
+}
+export interface ddeHTMLPreElement extends HTMLPreElement {
+	append: ddeAppend<ddeHTMLPreElement>;
+}
+export interface ddeHTMLProgressElement extends HTMLProgressElement {
+	append: ddeAppend<ddeHTMLProgressElement>;
+}
+export interface ddeHTMLScriptElement extends HTMLScriptElement {
+	append: ddeAppend<ddeHTMLScriptElement>;
+}
+export interface ddeHTMLSelectElement extends HTMLSelectElement {
+	append: ddeAppend<ddeHTMLSelectElement>;
+}
+export interface ddeHTMLSlotElement extends HTMLSlotElement {
+	append: ddeAppend<ddeHTMLSlotElement>;
+}
+export interface ddeHTMLSourceElement extends HTMLSourceElement {
+	append: ddeAppend<ddeHTMLSourceElement>;
+}
+export interface ddeHTMLSpanElement extends HTMLSpanElement {
+	append: ddeAppend<ddeHTMLSpanElement>;
+}
+export interface ddeHTMLStyleElement extends HTMLStyleElement {
+	append: ddeAppend<ddeHTMLStyleElement>;
+}
+export interface ddeHTMLTableElement extends HTMLTableElement {
+	append: ddeAppend<ddeHTMLTableElement>;
+}
+export interface ddeHTMLTableSectionElement extends HTMLTableSectionElement {
+	append: ddeAppend<ddeHTMLTableSectionElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTemplateElement extends HTMLTemplateElement {
+	append: ddeAppend<ddeHTMLTemplateElement>;
+}
+export interface ddeHTMLTextAreaElement extends HTMLTextAreaElement {
+	append: ddeAppend<ddeHTMLTextAreaElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTimeElement extends HTMLTimeElement {
+	append: ddeAppend<ddeHTMLTimeElement>;
+}
+export interface ddeHTMLTitleElement extends HTMLTitleElement {
+	append: ddeAppend<ddeHTMLTitleElement>;
+}
+export interface ddeHTMLTableRowElement extends HTMLTableRowElement {
+	append: ddeAppend<ddeHTMLTableRowElement>;
+}
+export interface ddeHTMLTrackElement extends HTMLTrackElement {
+	append: ddeAppend<ddeHTMLTrackElement>;
+}
+export interface ddeHTMLUListElement extends HTMLUListElement {
+	append: ddeAppend<ddeHTMLUListElement>;
+}
+export interface ddeHTMLVideoElement extends HTMLVideoElement {
+	append: ddeAppend<ddeHTMLVideoElement>;
+}
+export interface ddeSVGAElement extends SVGAElement {
+	append: ddeAppend<ddeSVGAElement>;
+}
+export interface ddeSVGAnimateElement extends SVGAnimateElement {
+	append: ddeAppend<ddeSVGAnimateElement>;
+}
+export interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement {
+	append: ddeAppend<ddeSVGAnimateMotionElement>;
+}
+export interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement {
+	append: ddeAppend<ddeSVGAnimateTransformElement>;
+}
+export interface ddeSVGCircleElement extends SVGCircleElement {
+	append: ddeAppend<ddeSVGCircleElement>;
+}
+export interface ddeSVGClipPathElement extends SVGClipPathElement {
+	append: ddeAppend<ddeSVGClipPathElement>;
+}
+export interface ddeSVGDefsElement extends SVGDefsElement {
+	append: ddeAppend<ddeSVGDefsElement>;
+}
+export interface ddeSVGDescElement extends SVGDescElement {
+	append: ddeAppend<ddeSVGDescElement>;
+}
+export interface ddeSVGEllipseElement extends SVGEllipseElement {
+	append: ddeAppend<ddeSVGEllipseElement>;
+}
+export interface ddeSVGFEBlendElement extends SVGFEBlendElement {
+	append: ddeAppend<ddeSVGFEBlendElement>;
+}
+export interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement {
+	append: ddeAppend<ddeSVGFEColorMatrixElement>;
+}
+export interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement {
+	append: ddeAppend<ddeSVGFEComponentTransferElement>;
+}
+export interface ddeSVGFECompositeElement extends SVGFECompositeElement {
+	append: ddeAppend<ddeSVGFECompositeElement>;
+}
+export interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement {
+	append: ddeAppend<ddeSVGFEConvolveMatrixElement>;
+}
+export interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement {
+	append: ddeAppend<ddeSVGFEDiffuseLightingElement>;
+}
+export interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement {
+	append: ddeAppend<ddeSVGFEDisplacementMapElement>;
+}
+export interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement {
+	append: ddeAppend<ddeSVGFEDistantLightElement>;
+}
+export interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement {
+	append: ddeAppend<ddeSVGFEDropShadowElement>;
+}
+export interface ddeSVGFEFloodElement extends SVGFEFloodElement {
+	append: ddeAppend<ddeSVGFEFloodElement>;
+}
+export interface ddeSVGFEFuncAElement extends SVGFEFuncAElement {
+	append: ddeAppend<ddeSVGFEFuncAElement>;
+}
+export interface ddeSVGFEFuncBElement extends SVGFEFuncBElement {
+	append: ddeAppend<ddeSVGFEFuncBElement>;
+}
+export interface ddeSVGFEFuncGElement extends SVGFEFuncGElement {
+	append: ddeAppend<ddeSVGFEFuncGElement>;
+}
+export interface ddeSVGFEFuncRElement extends SVGFEFuncRElement {
+	append: ddeAppend<ddeSVGFEFuncRElement>;
+}
+export interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement {
+	append: ddeAppend<ddeSVGFEGaussianBlurElement>;
+}
+export interface ddeSVGFEImageElement extends SVGFEImageElement {
+	append: ddeAppend<ddeSVGFEImageElement>;
+}
+export interface ddeSVGFEMergeElement extends SVGFEMergeElement {
+	append: ddeAppend<ddeSVGFEMergeElement>;
+}
+export interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement {
+	append: ddeAppend<ddeSVGFEMergeNodeElement>;
+}
+export interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement {
+	append: ddeAppend<ddeSVGFEMorphologyElement>;
+}
+export interface ddeSVGFEOffsetElement extends SVGFEOffsetElement {
+	append: ddeAppend<ddeSVGFEOffsetElement>;
+}
+export interface ddeSVGFEPointLightElement extends SVGFEPointLightElement {
+	append: ddeAppend<ddeSVGFEPointLightElement>;
+}
+export interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement {
+	append: ddeAppend<ddeSVGFESpecularLightingElement>;
+}
+export interface ddeSVGFESpotLightElement extends SVGFESpotLightElement {
+	append: ddeAppend<ddeSVGFESpotLightElement>;
+}
+export interface ddeSVGFETileElement extends SVGFETileElement {
+	append: ddeAppend<ddeSVGFETileElement>;
+}
+export interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement {
+	append: ddeAppend<ddeSVGFETurbulenceElement>;
+}
+export interface ddeSVGFilterElement extends SVGFilterElement {
+	append: ddeAppend<ddeSVGFilterElement>;
+}
+export interface ddeSVGForeignObjectElement extends SVGForeignObjectElement {
+	append: ddeAppend<ddeSVGForeignObjectElement>;
+}
+export interface ddeSVGGElement extends SVGGElement {
+	append: ddeAppend<ddeSVGGElement>;
+}
+export interface ddeSVGImageElement extends SVGImageElement {
+	append: ddeAppend<ddeSVGImageElement>;
+}
+export interface ddeSVGLineElement extends SVGLineElement {
+	append: ddeAppend<ddeSVGLineElement>;
+}
+export interface ddeSVGLinearGradientElement extends SVGLinearGradientElement {
+	append: ddeAppend<ddeSVGLinearGradientElement>;
+}
+export interface ddeSVGMarkerElement extends SVGMarkerElement {
+	append: ddeAppend<ddeSVGMarkerElement>;
+}
+export interface ddeSVGMaskElement extends SVGMaskElement {
+	append: ddeAppend<ddeSVGMaskElement>;
+}
+export interface ddeSVGMetadataElement extends SVGMetadataElement {
+	append: ddeAppend<ddeSVGMetadataElement>;
+}
+export interface ddeSVGMPathElement extends SVGMPathElement {
+	append: ddeAppend<ddeSVGMPathElement>;
+}
+export interface ddeSVGPathElement extends SVGPathElement {
+	append: ddeAppend<ddeSVGPathElement>;
+}
+export interface ddeSVGPatternElement extends SVGPatternElement {
+	append: ddeAppend<ddeSVGPatternElement>;
+}
+export interface ddeSVGPolygonElement extends SVGPolygonElement {
+	append: ddeAppend<ddeSVGPolygonElement>;
+}
+export interface ddeSVGPolylineElement extends SVGPolylineElement {
+	append: ddeAppend<ddeSVGPolylineElement>;
+}
+export interface ddeSVGRadialGradientElement extends SVGRadialGradientElement {
+	append: ddeAppend<ddeSVGRadialGradientElement>;
+}
+export interface ddeSVGRectElement extends SVGRectElement {
+	append: ddeAppend<ddeSVGRectElement>;
+}
+export interface ddeSVGScriptElement extends SVGScriptElement {
+	append: ddeAppend<ddeSVGScriptElement>;
+}
+export interface ddeSVGSetElement extends SVGSetElement {
+	append: ddeAppend<ddeSVGSetElement>;
+}
+export interface ddeSVGStopElement extends SVGStopElement {
+	append: ddeAppend<ddeSVGStopElement>;
+}
+export interface ddeSVGStyleElement extends SVGStyleElement {
+	append: ddeAppend<ddeSVGStyleElement>;
+}
+export interface ddeSVGSVGElement extends SVGSVGElement {
+	append: ddeAppend<ddeSVGSVGElement>;
+}
+export interface ddeSVGSwitchElement extends SVGSwitchElement {
+	append: ddeAppend<ddeSVGSwitchElement>;
+}
+export interface ddeSVGSymbolElement extends SVGSymbolElement {
+	append: ddeAppend<ddeSVGSymbolElement>;
+}
+export interface ddeSVGTextElement extends SVGTextElement {
+	append: ddeAppend<ddeSVGTextElement>;
+}
+export interface ddeSVGTextPathElement extends SVGTextPathElement {
+	append: ddeAppend<ddeSVGTextPathElement>;
+}
+export interface ddeSVGTitleElement extends SVGTitleElement {
+	append: ddeAppend<ddeSVGTitleElement>;
+}
+export interface ddeSVGTSpanElement extends SVGTSpanElement {
+	append: ddeAppend<ddeSVGTSpanElement>;
+}
+export interface ddeSVGUseElement extends SVGUseElement {
+	append: ddeAppend<ddeSVGUseElement>;
+}
+export interface ddeSVGViewElement extends SVGViewElement {
+	append: ddeAppend<ddeSVGViewElement>;
+}
+
+export {
+	dispatchEvent$1 as dispatchEvent,
+	el as createElement,
+	elNS as createElementNS,
+};
+
+export {};
diff --git a/dist/esm-with-signals.min.js b/dist/esm-with-signals.min.js
new file mode 100644
index 0000000..b7c4be9
--- /dev/null
+++ b/dist/esm-with-signals.min.js
@@ -0,0 +1,4 @@
+var Z=(...t)=>Object.prototype.hasOwnProperty.call(...t);function O(t){return typeof t>"u"}function nt(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function S(t,e){return t instanceof e}function rt(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function w(t=null,e={}){return Object.create(t,e)}function m(...t){return Object.assign(...t)}function F(t,e){if(!t||!S(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function I(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[vt(o)]=e(t,o),r},{})}function vt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var P=class extends Error{constructor(){super();let[e,...n]=this.stack.split(`
+`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4),o=r.includes("src/helpers.js")?"src/":r;this.stack=n.find(c=>!c.includes(o))||e}get compact(){let{stack:e}=this;return e.slice(0,e.indexOf("@")+1)+"\u2026"+e.slice(e.lastIndexOf("/"))}};var j={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function G(t,e=!0){return e?m(j,t):(Object.setPrototypeOf(t,j),t)}function $(t){return rt(t,j)&&t!==j?t:j}var d={setDeleteAttr:mt,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function mt(t,e,n){if(Reflect.set(t,e,n),!!O(n)){if(Reflect.deleteProperty(t,e),S(t,d.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var D="__dde_lifecyclesToEvents",y="dde:connected",R="dde:disconnected",q="dde:attributeChanged";function Bt(t){return d.q(t)}var C=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],x={get current(){return C[C.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...C]},push(t={}){return C.push(m({},this.current,{prevent:!1},t))},pushRoot(){return C.push(C[0])},pop(){if(C.length!==1)return C.pop()}};function ot(...t){return this.appendOriginal(...t),this}function xt(t){return t.append===ot||(t.appendOriginal=t.append,t.append=ot),t}var z;function W(t,e,...n){let r=$(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let i=(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(v=>v(s)),void 0):s;x.push({scope:t,host:i}),c=t(e||void 0);let l=S(c,d.F);if(c.nodeName==="#comment")break;let E=W.mark({type:"component",name:t.name,host:l?"this":"parentElement"});c.prepend(E),l&&(s=E);break}case t==="#text":c=U.call(this,d.D.createTextNode(""),e);break;case(t==="<>"||!t):c=U.call(this,d.D.createDocumentFragment(),e);break;case!!z:c=U.call(this,d.D.createElementNS(z,t),e);break;case!c:c=U.call(this,d.D.createElement(t),e)}return xt(c),s||(s=c),n.forEach(i=>i(s)),o&&x.pop(),o=2,c}W.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);return e&&(r.end=d.D.createComment("</dde:mark>")),r};function Jt(t){let e=this;return function(...r){z=t;let o=W.call(e,...r);return z=void 0,o}}function Zt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,s,i){if(i[0]===e)return c.apply(t,i);for(let l of i){let E=(l.slot||"")+n;try{_t(l,"remove","slot")}catch{}let h=o[E];if(!h)return;h.name.startsWith(r)||(h.childNodes.forEach(v=>v.remove()),h.name=r+E),h.append(l)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var H=new WeakMap,{setDeleteAttr:ct}=d;function U(t,...e){if(!e.length)return t;H.set(t,ut(t,this));for(let[n,r]of Object.entries(m({},...e)))it.call(this,t,n,r);return H.delete(t),t}function it(t,e,n){let{setRemoveAttr:r,s:o}=ut(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(i,l)=>it.call(c,t,i,l));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return st(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return ct(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return V(o,e,t,n,st.bind(null,t[e]));case"ariaset":return V(o,e,t,n,(i,l)=>r("aria-"+i,l));case"classList":return Et.call(c,t,n)}return St(t,e)?ct(t,e,n):r(e,n)}function ut(t,e){if(H.has(t))return H.get(t);let r=(S(t,d.S)?At:wt).bind(null,t,"Attribute"),o=$(e);return{setRemoveAttr:r,s:o}}function Et(t,e){let n=$(this);return V(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function _t(t,e,n,r){return S(t,d.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function St(t,e){if(!(e in t))return!1;let n=ft(t,e);return!O(n.set)}function ft(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||ft(t,e)}function V(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([i,l]){i&&(i=new c(i),i.target=e,l=t.processReactiveAttribute(n,i,l,o),o(i,l))})}function wt(t,e,n,r){return t[(O(r)?"remove":"set")+e](n,r)}function At(t,e,n,r,o=null){return t[(O(r)?"remove":"set")+e+"NS"](o,n,r)}function st(t,e,n){if(Reflect.set(t,e,n),!!O(n))return Reflect.deleteProperty(t,e)}var L=d.M?yt():new Proxy({},{get(){return()=>{}}});function yt(){let t=new Map,e=!1,n=u=>function(a){for(let f of a)if(f.type==="childList"){if(h(f.addedNodes,!0)){u();continue}v(f.removedNodes,!0)&&u()}},r=new d.M(n(i));return{observe(u){let a=new d.M(n(()=>{}));return a.observe(u,{childList:!0,subtree:!0}),()=>a.disconnect()},onConnected(u,a){s();let f=c(u);f.connected.has(a)||(f.connected.add(a),f.length_c+=1)},offConnected(u,a){if(!t.has(u))return;let f=t.get(u);f.connected.has(a)&&(f.connected.delete(a),f.length_c-=1,o(u,f))},onDisconnected(u,a){s();let f=c(u);f.disconnected.has(a)||(f.disconnected.add(a),f.length_d+=1)},offDisconnected(u,a){if(!t.has(u))return;let f=t.get(u);f.disconnected.delete(a),f.length_d-=1,o(u,f)}};function o(u,a){a.length_c||a.length_d||(t.delete(u),i())}function c(u){if(t.has(u))return t.get(u);let a={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(u,a),a}function s(){e||(e=!0,r.observe(d.D.body,{childList:!0,subtree:!0}))}function i(){!e||t.size||(e=!1,r.disconnect())}function l(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function E(u){t.size>30&&await l();let a=[];if(!S(u,Node))return a;for(let f of t.keys())f===u||!S(f,Node)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let _ of u){if(a&&E(_).then(h),!t.has(_))continue;let T=t.get(_);T.length_c&&(_.dispatchEvent(new Event(y)),T.connected=new WeakSet,T.length_c=0,T.length_d||t.delete(_),f=!0)}return f}function v(u,a){let f=!1;for(let _ of u)a&&E(_).then(v),!(!t.has(_)||!t.get(_).length_d)&&((globalThis.queueMicrotask||setTimeout)(N(_)),f=!0);return f}function N(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(R)),t.delete(u))}}}function ee(t,e,n=Ot){let r=t.host||t;x.push({scope:r,host:(...s)=>s.length?s.forEach(i=>i(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[D];o||Ct(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(y)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(R,L.observe(t),{once:!0}),x.pop(),t.append(c)}function Ct(t){return K(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(y))}),K(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(R)))}),K(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(q,{detail:[o,c]})),e.apply(n,r)}),t.prototype[D]=!0,t}function K(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function Ot(t){return I(t,(e,n)=>e.getAttribute(n))}function se(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,m({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function A(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var at=t=>m({},typeof t=="object"?t:null,{once:!0});A.connected=function(t,e){return e=at(e),function(r){return r.addEventListener(y,t,e),r[D]?r:r.isConnected?(r.dispatchEvent(new Event(y)),r):(F(e.signal,()=>L.offConnected(r,t))&&L.onConnected(r,t),r)}};A.disconnected=function(t,e){return e=at(e),function(r){return r.addEventListener(R,t,e),r[D]||F(e.signal,()=>L.offDisconnected(r,t))&&L.onDisconnected(r,t),r}};var Q=new WeakMap;A.disconnectedAsAbort=function(t){if(Q.has(t))return Q.get(t);let e=new AbortController;return Q.set(t,e),t(A.disconnected(()=>e.abort())),e.signal};var Dt=new WeakSet;A.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(q,t,e),r[D]||Dt.has(r)||!d.M)return r;let o=new d.M(function(s){for(let{attributeName:i,target:l}of s)l.dispatchEvent(new CustomEvent(q,{detail:[i,l.getAttribute(i)]}))});return F(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}};var p="__dde_signal",X=(()=>{let t=new Set,e=!1;function n(){e=!1;let r=t;t=new Set;for(let o of r){let c=o[p];c&&c.listeners.forEach(s=>s(c.value))}}return function(r){t.add(r),!e&&(e=!0,queueMicrotask(n))}})();var tt=w(null,{get:{value(){return lt(this)}},set:{value(...t){return bt(this,...t)}},toJSON:{value(){return lt(this)}},valueOf:{value(){return this[p]&&this[p].value}}}),Rt=w(tt,{set:{value(){}}});function B(t){return t&&t[p]}var J=[],b=new WeakMap;function g(t,e){if(typeof t!="function")return dt(!1,t,e);if(B(t))return t;let n=dt(!0);function r(){let[o,...c]=b.get(r);if(b.set(r,new Set([o])),J.push(r),bt(n,t()),J.pop(),!c.length)return;let s=b.get(r);for(let i of c)s.has(i)||M(i,r)}return b.set(n[p],r),b.set(r,new Set([n])),r(),n}g.action=function(t,e,...n){let r=t[p];if(!r)return;let{actions:o}=r;if(!o||!Z(o,e))throw new Error(`Action "${e}" not defined. See ${p}.actions.`);if(o[e].apply(r,n),r.skip)return delete r.skip;X(t)};g.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));et(e,n),o&&o.addEventListener("abort",()=>M(e,n))}};g.symbols={onclear:Symbol.for("Signal.onclear")};g.clear=function(...t){for(let n of t){let r=n[p];r&&(delete n.toJSON,r.onclear.forEach(o=>o.call(r)),e(n,r),delete n[p])}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!b.has(o))return;let c=b.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),b.delete(o))})}};var k="__dde_reactive";function Lt(t=w()){return(e,n)=>Z(t,e)?t[e]:t[e]=n()}g.el=function(t,e){let n=W.mark({type:"reactive",source:new P().compact},!0),r=n.end,o=d.D.createDocumentFragment();o.append(n,r);let{current:c}=x,s=w(),i=l=>{if(!n.parentNode||!r.parentNode)return M(t,i);let E=Lt(s);s=w(),x.push(c);let h=e(l,function(a,f){return s[a]=E(a,f)});x.pop(),Array.isArray(h)||(h=[h]);let v=document.createComment("");h.push(v),n.after(...h);let N;for(;(N=v.nextSibling)&&N!==r;)N.remove();v.remove(),n.isConnected&&kt(c.host())};return et(t,i),ht(t,i,n,e),i(t.get()),c.host(A.disconnected(()=>s={})),o};function kt(t){!t||!t[k]||(requestIdleCallback||setTimeout)(function(){t[k]=t[k].filter(([e,n])=>n.isConnected?!0:(M(...e),!1))})}var Mt={_set(t){this.value=t}};function Nt(t){return function(e,n){let r=w(tt,{set:{value(...c){return e.setAttribute(n,...c)}}}),o=gt(r,e.getAttribute(n),Mt);return t[n]=o,o}}var Y="__dde_attributes";g.observedAttributes=function(t){let e=t[Y]={},n=I(t,Nt(e));return A.attributeChanged(function({detail:o}){/*! This maps attributes to signals (`S.observedAttributes`).
+	Investigate `__dde_attributes` key of the element. */let[c,s]=o,i=this[Y][c];if(i)return g.action(i,"_set",s)})(t),A.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`).
+	Investigate `__dde_attributes` key of the element. */g.clear(...Object.values(this[Y]))})(t),n};var pt={isSignal:B,processReactiveAttribute(t,e,n,r){if(!B(n))return n;let o=c=>{if(!t.isConnected)return M(n,o);r(e,c)};return et(n,o),ht(n,o,t,e),n.get()}};function ht(t,e,...n){let{current:r}=x;r.host(function(o){if(o[k])return o[k].push([[t,e],...n]);o[k]=[],!r.prevent&&A.disconnected(()=>o[k].forEach(([[c,s]])=>M(c,s,c[p]&&c[p].host&&c[p].host()===o)))(o)})}var Tt=new FinalizationRegistry(function(t){g.clear({[p]:t})});function dt(t,e,n){let r=w(t?Rt:tt),o=gt(r,e,n,t);return Tt.register(o,o[p]),o}var Pt=m(w(),{stopPropagation(){this.skip=!0}});function gt(t,e,n,r=!1){let o=[];nt(n)!=="[object Object]"&&(n={});let{onclear:c}=g.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=x;return Reflect.defineProperty(t,p,{value:m(w(Pt),{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new P().stack,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function jt(){return J[J.length-1]}function lt(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=jt();return r&&n.add(r),b.has(r)&&b.get(r).add(t),e}function bt(t,e,n){let r=t[p];if(!(!r||!n&&r.value===e))return r.value=e,X(t),e}function et(t,e){if(t[p])return t[p].listeners.add(e)}function M(t,e,n){let r=t[p];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;g.clear(t);let s=b.get(r);if(!s)return c;let i=b.get(s);if(!i)return c;for(let l of i)M(l,s,!0);return c}G(pt);export{g as S,U as assign,it as assignAttribute,xt as chainableAppend,Et as classListDeclarative,W as createElement,Jt as createElementNS,ee as customElementRender,Ct as customElementWithDDE,se as dispatchEvent,W as el,Jt as elNS,_t as elementAttribute,B as isSignal,Ct as lifecyclesToEvents,Ot as observedAttributes,A as on,Bt as queue,G as registerReactivity,x as scope,g as signal,Zt as simulateSlots};
diff --git a/dist/esm.d.min.ts b/dist/esm.d.min.ts
new file mode 100644
index 0000000..9ac112a
--- /dev/null
+++ b/dist/esm.d.min.ts
@@ -0,0 +1,568 @@
+declare global{ /* ddeSignal */ }
+type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
+type SupportedElement=
+		HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
+	|	SVGElementTagNameMap[keyof SVGElementTagNameMap]
+	|	MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
+	|	CustomElementTagNameMap[keyof CustomElementTagNameMap]
+declare global {
+	type ddeComponentAttributes= Record<any, any> | undefined;
+	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
+	type ddeString= string | ddeSignal<string>
+	type ddeStringable= ddeString | number | ddeSignal<number>
+}
+type PascalCase=
+`${Capitalize<string>}${string}`;
+type AttrsModified= {
+	/**
+	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
+	 */
+	style: Partial<CSSStyleDeclaration> | ddeString
+		| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
+	/**
+	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
+	 * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
+	 * for others.
+	 */
+	classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
+	/**
+	 * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
+	 * Values are converted to string (see {@link DOMStringMap}).
+	 *
+	 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
+	 * */
+	dataset: Record<string, ddeStringable>,
+	/**
+	 * Sets `aria-*` simiraly to `dataset`
+	 * */
+	ariaset: Record<string, ddeString>,
+}	& Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString>
+	& Record<`.${string}`, any>
+type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
+type IsReadonly<T, K extends keyof T> =
+	T extends { readonly [P in K]: T[K] } ? true : false;
+/**
+ * Just element attributtes
+ *
+ * In most cases, you can use native propertie such as
+ * [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on
+ * (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
+ *
+ * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
+ * @private
+ */
+type ElementAttributes<T extends SupportedElement>= Partial<{
+	[K in keyof _fromElsInterfaces<T>]:
+		_fromElsInterfaces<T>[K] extends ((...p: any[])=> any)
+			? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>)=>
+																	ddeSignal<ReturnType<_fromElsInterfaces<T>[K]>>)
+			: (IsReadonly<_fromElsInterfaces<T>, K> extends false
+				? _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
+				: ddeStringable)
+} & AttrsModified> & Record<string, any>;
+export function classListDeclarative<El extends SupportedElement>(
+	element: El,
+	classList: AttrsModified["classList"]
+): El
+export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
+export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(
+	element: El,
+	attr: ATT,
+	value: ElementAttributes<El>[ATT]
+): ElementAttributes<El>[ATT]
+
+type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
+export namespace el {
+	/**
+	 * Creates a marker comment for elements
+	 *
+	 * @param attrs - Marker attributes
+	 * @param [is_open=false] - Whether the marker is open-ended
+	 * @returns Comment node marker
+	 */
+	export function mark(
+		attrs: { type: "component"|"reactive"|"later", name?: string, host?: "this"|"parentElement" },
+		is_open?: boolean
+	): Comment;
+}
+
+export function el<
+	A extends ddeComponentAttributes,
+	EL extends SupportedElement | ddeDocumentFragment
+>(
+	component: (attr: A, ...rest: any[])=> EL,
+	attrs?: NoInfer<A>,
+	...addons: ddeElementAddon<EL>[]
+): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
+	? EL
+	: ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement )
+export function el<
+	A extends { textContent: ddeStringable },
+	EL extends SupportedElement | ddeDocumentFragment
+>(
+	component: (attr: A, ...rest: any[])=> EL,
+	attrs?: NoInfer<A>["textContent"],
+	...addons: ddeElementAddon<EL>[]
+): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
+	? EL
+	: ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement )
+export function el<
+	TAG extends keyof ExtendedHTMLElementTagNameMap,
+>(
+	tag_name: TAG,
+	attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable,
+	...addons: ddeElementAddon<
+		ExtendedHTMLElementTagNameMap[NoInfer<TAG>]
+	>[], // TODO: for now addons must have the same element
+): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
+export function el(
+	tag_name?: "<>",
+): ddeDocumentFragment
+export function el(
+	tag_name: string,
+	attrs?: ElementAttributes<HTMLElement> | ddeStringable,
+	...addons: ddeElementAddon<HTMLElement>[]
+): ddeHTMLElement
+export { el as createElement }
+
+export function elNS(
+	namespace: "http://www.w3.org/2000/svg"
+): <
+	TAG extends keyof SVGElementTagNameMap & string,
+	EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
+>(
+	tag_name: TAG,
+	attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable,
+	...addons: ddeElementAddon<NoInfer<EL>>[]
+)=>  TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
+export function elNS(
+	namespace: "http://www.w3.org/1998/Math/MathML"
+): <
+	TAG extends keyof MathMLElementTagNameMap & string,
+	EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
+>(
+	tag_name: TAG,
+	attrs?: ddeStringable | Partial<{
+		[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
+	}>,
+	...addons: ddeElementAddon<NoInfer<EL>>[]
+)=> ddeMathMLElement
+export function elNS(
+	namespace: string
+): (
+	tag_name: string,
+	attrs?: string | ddeStringable | Record<string, any>,
+	...addons: ddeElementAddon<SupportedElement>[]
+)=> SupportedElement
+export { elNS as createElementNS }
+
+export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
+/** Simulate slots for ddeComponents */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
+	root: EL,
+): EL
+/**
+ * Simulate slots in Custom Elements without using `shadowRoot`.
+ * @param el Custom Element root element
+ * @param body Body of the custom element
+ * */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
+	el: HTMLElement,
+	body: EL,
+): EL
+
+export function dispatchEvent(name: keyof DocumentEventMap | string, element: SupportedElement):
+	(data?: any)=> void;
+export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
+	(element: SupportedElement, data?: any)=> void;
+export function dispatchEvent(
+	name: keyof DocumentEventMap | string,
+	options: EventInit | null,
+	element: SupportedElement | (()=> SupportedElement)
+): (data?: any)=> void;
+interface On{
+	/** Listens to the DOM event. See {@link Document.addEventListener} */
+	<
+		Event extends keyof DocumentEventMap,
+		EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
+		>(
+			type: Event,
+			listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	<
+		EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
+		>(
+			type: string,
+			listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent ) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
+	connected<
+		EE extends ddeElementAddon<SupportedElement>,
+		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
+		>(
+			listener: (this: El, event: CustomEvent<El>) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
+	disconnected<
+		EE extends ddeElementAddon<SupportedElement>,
+		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
+		>(
+			listener: (this: El, event: CustomEvent<void>) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
+	attributeChanged<
+		EE extends ddeElementAddon<SupportedElement>,
+		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
+		>(
+			listener: (this: El, event: CustomEvent<[ string, string ]>) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+}
+export const on: On;
+
+type Scope= {
+	scope: Node | Function | Object,
+	host: ddeElementAddon<any>,
+	custom_element: false | HTMLElement,
+	prevent: boolean
+};
+/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
+export const scope: {
+	current: Scope,
+	/** Stops all automatizations. E. g. signals used as attributes in current scope
+	 * registers removing these listeners (and clean signal if no other listeners are detected)
+	 * on `disconnected` event. */
+	preventDefault<T extends boolean>(prevent: T): T,
+	/**
+	 * This represents reference to the current host element — `scope.host()`.
+	 * It can be also used to register Addon(s) (functions to be called when component is initized)
+	 * — `scope.host(on.connected(console.log))`.
+	 * */
+	host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
+
+	state: Scope[],
+	/** Adds new child scope. All attributes are inherited by default. */
+	push(scope?: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
+	/** Adds root scope as a child of the current scope. */
+	pushRoot(): ReturnType<Array<Scope>["push"]>,
+	/** Removes last/current child scope. */
+	pop(): ReturnType<Array<Scope>["pop"]>,
+};
+
+export function customElementRender<
+	EL extends HTMLElement,
+	P extends any = Record<string, string | ddeSignal<string>>
+>(
+	target: ShadowRoot | EL,
+	render: (props: P)=> SupportedElement | DocumentFragment,
+	props?: P | ((el: EL)=> P)
+): EL
+export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
+export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
+export function observedAttributes(custom_element: HTMLElement): Record<string, string>
+
+/**
+ * This is used primarly for server side rendering. To be sure that all async operations
+ * are finished before the page is sent to the client.
+ * ```
+ *	// on component
+ *	function component(){
+ *		…
+ *		queue(fetch(...).then(...));
+ *	}
+ *
+ * // building the page
+ * async function build(){
+ *		const { component }= await import("./component.js");
+ *		document.body.append(el(component));
+ *		await queue();
+ *		retutn document.body.innerHTML;
+ *	}
+ * ```
+ * */
+export function queue(promise?: Promise<unknown>): Promise<unknown>;
+
+/* TypeScript MEH */
+declare global{
+	type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+
+	interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
+	interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
+	interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
+	interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
+
+	interface ddeHTMLElementTagNameMap {
+		"a": ddeHTMLAnchorElement;
+		"area": ddeHTMLAreaElement;
+		"audio": ddeHTMLAudioElement;
+		"base": ddeHTMLBaseElement;
+		"blockquote": ddeHTMLQuoteElement;
+		"body": ddeHTMLBodyElement;
+		"br": ddeHTMLBRElement;
+		"button": ddeHTMLButtonElement;
+		"canvas": ddeHTMLCanvasElement;
+		"caption": ddeHTMLTableCaptionElement;
+		"col": ddeHTMLTableColElement;
+		"colgroup": ddeHTMLTableColElement;
+		"data": ddeHTMLDataElement;
+		"datalist": ddeHTMLDataListElement;
+		"del": ddeHTMLModElement;
+		"details": ddeHTMLDetailsElement;
+		"dialog": ddeHTMLDialogElement;
+		"div": ddeHTMLDivElement;
+		"dl": ddeHTMLDListElement;
+		"embed": ddeHTMLEmbedElement;
+		"fieldset": ddeHTMLFieldSetElement;
+		"form": ddeHTMLFormElement;
+		"h1": ddeHTMLHeadingElement;
+		"h2": ddeHTMLHeadingElement;
+		"h3": ddeHTMLHeadingElement;
+		"h4": ddeHTMLHeadingElement;
+		"h5": ddeHTMLHeadingElement;
+		"h6": ddeHTMLHeadingElement;
+		"head": ddeHTMLHeadElement;
+		"hr": ddeHTMLHRElement;
+		"html": ddeHTMLHtmlElement;
+		"iframe": ddeHTMLIFrameElement;
+		"img": ddeHTMLImageElement;
+		"input": ddeHTMLInputElement;
+		"ins": ddeHTMLModElement;
+		"label": ddeHTMLLabelElement;
+		"legend": ddeHTMLLegendElement;
+		"li": ddeHTMLLIElement;
+		"link": ddeHTMLLinkElement;
+		"map": ddeHTMLMapElement;
+		"menu": ddeHTMLMenuElement;
+		"meta": ddeHTMLMetaElement;
+		"meter": ddeHTMLMeterElement;
+		"object": ddeHTMLObjectElement;
+		"ol": ddeHTMLOListElement;
+		"optgroup": ddeHTMLOptGroupElement;
+		"option": ddeHTMLOptionElement;
+		"output": ddeHTMLOutputElement;
+		"p": ddeHTMLParagraphElement;
+		"picture": ddeHTMLPictureElement;
+		"pre": ddeHTMLPreElement;
+		"progress": ddeHTMLProgressElement;
+		"q": ddeHTMLQuoteElement;
+		"script": ddeHTMLScriptElement;
+		"select": ddeHTMLSelectElement;
+		"slot": ddeHTMLSlotElement;
+		"source": ddeHTMLSourceElement;
+		"span": ddeHTMLSpanElement;
+		"style": ddeHTMLStyleElement;
+		"table": ddeHTMLTableElement;
+		"tbody": ddeHTMLTableSectionElement;
+		"td": ddeHTMLTableCellElement;
+		"template": ddeHTMLTemplateElement;
+		"textarea": ddeHTMLTextAreaElement;
+		"tfoot": ddeHTMLTableSectionElement;
+		"th": ddeHTMLTableCellElement;
+		"thead": ddeHTMLTableSectionElement;
+		"time": ddeHTMLTimeElement;
+		"title": ddeHTMLTitleElement;
+		"tr": ddeHTMLTableRowElement;
+		"track": ddeHTMLTrackElement;
+		"ul": ddeHTMLUListElement;
+		"video": ddeHTMLVideoElement;
+	}
+	interface ddeSVGElementTagNameMap {
+		"a": ddeSVGAElement;
+		"animate": ddeSVGAnimateElement;
+		"animateMotion": ddeSVGAnimateMotionElement;
+		"animateTransform": ddeSVGAnimateTransformElement;
+		"circle": ddeSVGCircleElement;
+		"clipPath": ddeSVGClipPathElement;
+		"defs": ddeSVGDefsElement;
+		"desc": ddeSVGDescElement;
+		"ellipse": ddeSVGEllipseElement;
+		"feBlend": ddeSVGFEBlendElement;
+		"feColorMatrix": ddeSVGFEColorMatrixElement;
+		"feComponentTransfer": ddeSVGFEComponentTransferElement;
+		"feComposite": ddeSVGFECompositeElement;
+		"feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
+		"feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
+		"feDisplacementMap": ddeSVGFEDisplacementMapElement;
+		"feDistantLight": ddeSVGFEDistantLightElement;
+		"feDropShadow": ddeSVGFEDropShadowElement;
+		"feFlood": ddeSVGFEFloodElement;
+		"feFuncA": ddeSVGFEFuncAElement;
+		"feFuncB": ddeSVGFEFuncBElement;
+		"feFuncG": ddeSVGFEFuncGElement;
+		"feFuncR": ddeSVGFEFuncRElement;
+		"feGaussianBlur": ddeSVGFEGaussianBlurElement;
+		"feImage": ddeSVGFEImageElement;
+		"feMerge": ddeSVGFEMergeElement;
+		"feMergeNode": ddeSVGFEMergeNodeElement;
+		"feMorphology": ddeSVGFEMorphologyElement;
+		"feOffset": ddeSVGFEOffsetElement;
+		"fePointLight": ddeSVGFEPointLightElement;
+		"feSpecularLighting": ddeSVGFESpecularLightingElement;
+		"feSpotLight": ddeSVGFESpotLightElement;
+		"feTile": ddeSVGFETileElement;
+		"feTurbulence": ddeSVGFETurbulenceElement;
+		"filter": ddeSVGFilterElement;
+		"foreignObject": ddeSVGForeignObjectElement;
+		"g": ddeSVGGElement;
+		"image": ddeSVGImageElement;
+		"line": ddeSVGLineElement;
+		"linearGradient": ddeSVGLinearGradientElement;
+		"marker": ddeSVGMarkerElement;
+		"mask": ddeSVGMaskElement;
+		"metadata": ddeSVGMetadataElement;
+		"mpath": ddeSVGMPathElement;
+		"path": ddeSVGPathElement;
+		"pattern": ddeSVGPatternElement;
+		"polygon": ddeSVGPolygonElement;
+		"polyline": ddeSVGPolylineElement;
+		"radialGradient": ddeSVGRadialGradientElement;
+		"rect": ddeSVGRectElement;
+		"script": ddeSVGScriptElement;
+		"set": ddeSVGSetElement;
+		"stop": ddeSVGStopElement;
+		"style": ddeSVGStyleElement;
+		"svg": ddeSVGSVGElement;
+		"switch": ddeSVGSwitchElement;
+		"symbol": ddeSVGSymbolElement;
+		"text": ddeSVGTextElement;
+		"textPath": ddeSVGTextPathElement;
+		"title": ddeSVGTitleElement;
+		"tspan": ddeSVGTSpanElement;
+		"use": ddeSVGUseElement;
+		"view": ddeSVGViewElement;
+	}
+}
+
+// editorconfig-checker-disable
+interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
+interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
+interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
+interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend<ddeHTMLBaseElement>; }
+interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend<ddeHTMLQuoteElement>; }
+interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend<ddeHTMLBodyElement>; }
+interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend<ddeHTMLBRElement>; }
+interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend<ddeHTMLButtonElement>; }
+interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend<ddeHTMLCanvasElement>; }
+interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend<ddeHTMLTableCaptionElement>; }
+interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
+interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
+interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend<ddeHTMLDataElement>; }
+interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend<ddeHTMLDataListElement>; }
+interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend<ddeHTMLModElement>; }
+interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend<ddeHTMLDetailsElement>; }
+interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend<ddeHTMLDialogElement>; }
+interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend<ddeHTMLDivElement>; }
+interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend<ddeHTMLDListElement>; }
+interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend<ddeHTMLEmbedElement>; }
+interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend<ddeHTMLFieldSetElement>; }
+interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend<ddeHTMLFormElement>; }
+interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend<ddeHTMLHeadingElement>; }
+interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend<ddeHTMLHeadElement>; }
+interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend<ddeHTMLHRElement>; }
+interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend<ddeHTMLHtmlElement>; }
+interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend<ddeHTMLIFrameElement>; }
+interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend<ddeHTMLImageElement>; }
+interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend<ddeHTMLInputElement>; }
+interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend<ddeHTMLLabelElement>; }
+interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend<ddeHTMLLegendElement>; }
+interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend<ddeHTMLLIElement>; }
+interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend<ddeHTMLLinkElement>; }
+interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend<ddeHTMLMapElement>; }
+interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend<ddeHTMLMenuElement>; }
+interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend<ddeHTMLMetaElement>; }
+interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend<ddeHTMLMeterElement>; }
+interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend<ddeHTMLObjectElement>; }
+interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend<ddeHTMLOListElement>; }
+interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend<ddeHTMLOptGroupElement>; }
+interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend<ddeHTMLOptionElement>; }
+interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend<ddeHTMLOutputElement>; }
+interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend<ddeHTMLParagraphElement>; }
+interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend<ddeHTMLPictureElement>; }
+interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend<ddeHTMLPreElement>; }
+interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend<ddeHTMLProgressElement>; }
+interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend<ddeHTMLScriptElement>; }
+interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend<ddeHTMLSelectElement>; }
+interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend<ddeHTMLSlotElement>; }
+interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend<ddeHTMLSourceElement>; }
+interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend<ddeHTMLSpanElement>; }
+interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend<ddeHTMLStyleElement>; }
+interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend<ddeHTMLTableElement>; }
+interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend<ddeHTMLTableSectionElement>; }
+interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
+interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend<ddeHTMLTemplateElement>; }
+interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend<ddeHTMLTextAreaElement>; }
+interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
+interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend<ddeHTMLTimeElement>; }
+interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend<ddeHTMLTitleElement>; }
+interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend<ddeHTMLTableRowElement>; }
+interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend<ddeHTMLTrackElement>; }
+interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend<ddeHTMLUListElement>; }
+interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend<ddeHTMLVideoElement>; }
+interface ddeSVGAElement extends SVGAElement{ append: ddeAppend<ddeSVGAElement>; }
+interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend<ddeSVGAnimateElement>; }
+interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend<ddeSVGAnimateMotionElement>; }
+interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend<ddeSVGAnimateTransformElement>; }
+interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend<ddeSVGCircleElement>; }
+interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend<ddeSVGClipPathElement>; }
+interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend<ddeSVGDefsElement>; }
+interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend<ddeSVGDescElement>; }
+interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend<ddeSVGEllipseElement>; }
+interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend<ddeSVGFEBlendElement>; }
+interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend<ddeSVGFEColorMatrixElement>; }
+interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend<ddeSVGFEComponentTransferElement>; }
+interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend<ddeSVGFECompositeElement>; }
+interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend<ddeSVGFEConvolveMatrixElement>; }
+interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend<ddeSVGFEDiffuseLightingElement>; }
+interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend<ddeSVGFEDisplacementMapElement>; }
+interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend<ddeSVGFEDistantLightElement>; }
+interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend<ddeSVGFEDropShadowElement>; }
+interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend<ddeSVGFEFloodElement>; }
+interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend<ddeSVGFEFuncAElement>; }
+interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend<ddeSVGFEFuncBElement>; }
+interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend<ddeSVGFEFuncGElement>; }
+interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend<ddeSVGFEFuncRElement>; }
+interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend<ddeSVGFEGaussianBlurElement>; }
+interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend<ddeSVGFEImageElement>; }
+interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend<ddeSVGFEMergeElement>; }
+interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend<ddeSVGFEMergeNodeElement>; }
+interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend<ddeSVGFEMorphologyElement>; }
+interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend<ddeSVGFEOffsetElement>; }
+interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend<ddeSVGFEPointLightElement>; }
+interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend<ddeSVGFESpecularLightingElement>; }
+interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend<ddeSVGFESpotLightElement>; }
+interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend<ddeSVGFETileElement>; }
+interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend<ddeSVGFETurbulenceElement>; }
+interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend<ddeSVGFilterElement>; }
+interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend<ddeSVGForeignObjectElement>; }
+interface ddeSVGGElement extends SVGGElement{ append: ddeAppend<ddeSVGGElement>; }
+interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend<ddeSVGImageElement>; }
+interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend<ddeSVGLineElement>; }
+interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend<ddeSVGLinearGradientElement>; }
+interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend<ddeSVGMarkerElement>; }
+interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend<ddeSVGMaskElement>; }
+interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend<ddeSVGMetadataElement>; }
+interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend<ddeSVGMPathElement>; }
+interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend<ddeSVGPathElement>; }
+interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend<ddeSVGPatternElement>; }
+interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend<ddeSVGPolygonElement>; }
+interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend<ddeSVGPolylineElement>; }
+interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend<ddeSVGRadialGradientElement>; }
+interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend<ddeSVGRectElement>; }
+interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend<ddeSVGScriptElement>; }
+interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend<ddeSVGSetElement>; }
+interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend<ddeSVGStopElement>; }
+interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend<ddeSVGStyleElement>; }
+interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend<ddeSVGSVGElement>; }
+interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend<ddeSVGSwitchElement>; }
+interface ddeSVGSymbolElement extends SVGSymbolElement{ append: ddeAppend<ddeSVGSymbolElement>; }
+interface ddeSVGTextElement extends SVGTextElement{ append: ddeAppend<ddeSVGTextElement>; }
+interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend<ddeSVGTextPathElement>; }
+interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTitleElement>; }
+interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
+interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
+interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
+// editorconfig-checker-enable
\ No newline at end of file
diff --git a/dist/esm.d.ts b/dist/esm.d.ts
index 9efeb24..7a33885 100644
--- a/dist/esm.d.ts
+++ b/dist/esm.d.ts
@@ -1,46 +1,118 @@
-declare global{ /* ddeSignal */ }
-type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
-type SupportedElement=
-		HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
-	|	SVGElementTagNameMap[keyof SVGElementTagNameMap]
-	|	MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
-	|	CustomElementTagNameMap[keyof CustomElementTagNameMap]
-declare global {
-	type ddeComponentAttributes= Record<any, any> | undefined;
-	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
-	type ddeString= string | ddeSignal<string>
-	type ddeStringable= ddeString | number | ddeSignal<number>
+// Generated by dts-bundle-generator v9.5.1
+
+export interface Signal<V, A> {
+	/** The current value of the signal */
+	get(): V;
+	/** Set new value of the signal */
+	set(value: V): V;
+	toJSON(): V;
+	valueOf(): V;
 }
-type PascalCase=
-`${Capitalize<string>}${string}`;
-type AttrsModified= {
+export type Action<V> = (this: {
+	value: V;
+	stopPropagation(): void;
+}, ...a: any[]) => typeof signal._ | void;
+//type SymbolSignal= Symbol;
+export type SymbolOnclear = symbol;
+export type Actions<V> = Record<string | SymbolOnclear, Action<V>>;
+export type OnListenerOptions = Pick<AddEventListenerOptions, "signal"> & {
+	first_time?: boolean;
+};
+export interface signal {
+	_: Symbol;
+	/**
+	 * Computations signal. This creates a signal which is computed from other signals.
+	 * */
+	<V extends () => any>(computation: V): Signal<ReturnType<V>, {}>;
+	/**
+	 * Simple example:
+	 * ```js
+	 * const hello= S("Hello Signal");
+	 * ```
+	 * …simple todo signal:
+	 * ```js
+	 * const todos= S([], {
+	 * 	add(v){ this.value.push(S(v)); },
+	 * 	remove(i){ this.value.splice(i, 1); },
+	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
+	 * });
+	 * ```
+	 * …computed signal:
+	 * ```js
+	 * const name= S("Jan");
+	 * const surname= S("Andrle");
+	 * const fullname= S(()=> name.get()+" "+surname.get());
+	 * ```
+	 * @param value Initial signal value. Or function computing value from other signals.
+	 * @param actions Use to define actions on the signal. Such as add item to the array.
+	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
+	 *		by `S.clear`.
+	 * */
+	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(signal: S, name: N, ...params: A[N] extends (...args: infer P) => any ? P : never): void;
+	clear(...signals: Signal<any, any>[]): void;
+	on<T>(signal: Signal<T, any>, onchange: (a: T) => void, options?: OnListenerOptions): void;
+	symbols: {
+		//signal: SymbolSignal;
+		onclear: SymbolOnclear;
+	};
+	/**
+	 * Reactive element, which is rendered based on the given signal.
+	 * ```js
+	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
+	 * S.el(listS, list=> list.map(li=> el("li", li)));
+	 * ```
+	 * */
+	el<S extends any>(signal: Signal<S, any>, el: (v: S) => Element | Element[] | DocumentFragment): DocumentFragment;
+	observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
+}
+declare const signal: signal;
+declare global {
+	type ddeSignal<T, A = {}> = Signal<T, A>;
+	type ddeAction<V> = Action<V>;
+	type ddeActions<V> = Actions<V>;
+}
+export type CustomElementTagNameMap = {
+	"#text": Text;
+	"#comment": Comment;
+};
+export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
+declare global {
+	type ddeComponentAttributes = Record<any, any> | undefined;
+	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any;
+	type ddeString = string | Signal<string, {}>;
+	type ddeStringable = ddeString | number | Signal<number, {}>;
+}
+export type PascalCase = `${Capitalize<string>}${string}`;
+export type AttrsModified = {
 	/**
 	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
 	 */
-	style: Partial<CSSStyleDeclaration> | ddeString
-		| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
+	style: Partial<CSSStyleDeclaration> | ddeString | Partial<{
+		[K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], {}>;
+	}>;
 	/**
 	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
 	 * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
 	 * for others.
 	 */
-	classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
+	classList: Record<string, -1 | 0 | 1 | boolean | Signal<-1 | 0 | 1 | boolean, {}>>;
 	/**
 	 * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
 	 * Values are converted to string (see {@link DOMStringMap}).
 	 *
 	 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
 	 * */
-	dataset: Record<string, ddeStringable>,
+	dataset: Record<string, ddeStringable>;
 	/**
 	 * Sets `aria-*` simiraly to `dataset`
 	 * */
-	ariaset: Record<string, ddeString>,
-}	& Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString>
-	& Record<`.${string}`, any>
-type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
-type IsReadonly<T, K extends keyof T> =
-	T extends { readonly [P in K]: T[K] } ? true : false;
+	ariaset: Record<string, ddeString>;
+} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString> & Record<`.${string}`, any>;
+export type _fromElsInterfaces<EL extends SupportedElement> = Omit<EL, keyof AttrsModified>;
+export type IsReadonly<T, K extends keyof T> = T extends {
+	readonly [P in K]: T[K];
+} ? true : false;
 /**
  * Just element attributtes
  *
@@ -51,199 +123,132 @@ type IsReadonly<T, K extends keyof T> =
  * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
  * @private
  */
-type ElementAttributes<T extends SupportedElement>= Partial<{
-	[K in keyof _fromElsInterfaces<T>]: IsReadonly<_fromElsInterfaces<T>, K> extends false
-		? _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
-		: ddeStringable
+export type ElementAttributes<T extends SupportedElement> = Partial<{
+	[K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] extends ((...p: any[]) => any) ? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>) => Signal<ReturnType<_fromElsInterfaces<T>[K]>, {}>) : (IsReadonly<_fromElsInterfaces<T>, K> extends false ? _fromElsInterfaces<T>[K] | Signal<_fromElsInterfaces<T>[K], {}> : ddeStringable);
 } & AttrsModified> & Record<string, any>;
-export function classListDeclarative<El extends SupportedElement>(
-	element: El,
-	classList: AttrsModified["classList"]
-): El
-export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
-export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(
-	element: El,
-	attr: ATT,
-	value: ElementAttributes<El>[ATT]
-): ElementAttributes<El>[ATT]
-
-type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
-export function el<
-	TAG extends keyof ExtendedHTMLElementTagNameMap,
->(
-	tag_name: TAG,
-	attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable,
-	...addons: ddeElementAddon<
-		ExtendedHTMLElementTagNameMap[NoInfer<TAG>]
-	>[], // TODO: for now addons must have the same element
-): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
-export function el(
-	tag_name?: "<>",
-): ddeDocumentFragment
-export function el(
-	tag_name: string,
-	attrs?: ElementAttributes<HTMLElement> | ddeStringable,
-	...addons: ddeElementAddon<HTMLElement>[]
-): ddeHTMLElement
-
-export function el<
-	C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
->(
-	component: C,
-	attrs?: Parameters<C>[0] | ddeStringable,
-	...addons: ddeElementAddon<ReturnType<C>>[]
-): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
-	? ReturnType<C>
-	: ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
-export { el as createElement }
-
-export function elNS(
-	namespace: "http://www.w3.org/2000/svg"
-): <
-	TAG extends keyof SVGElementTagNameMap & string,
-	EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
->(
-	tag_name: TAG,
-	attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable,
-	...addons: ddeElementAddon<NoInfer<EL>>[]
-)=>  TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
-export function elNS(
-	namespace: "http://www.w3.org/1998/Math/MathML"
-): <
-	TAG extends keyof MathMLElementTagNameMap & string,
-	EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
->(
-	tag_name: TAG,
-	attrs?: ddeStringable | Partial<{
-		[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
-	}>,
-	...addons: ddeElementAddon<NoInfer<EL>>[]
-)=> ddeMathMLElement
-export function elNS(
-	namespace: string
-): (
-	tag_name: string,
-	attrs?: string | ddeStringable | Record<string, any>,
-	...addons: ddeElementAddon<SupportedElement>[]
-)=> SupportedElement
-export { elNS as createElementNS }
-
+export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El;
+export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El;
+export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT];
+export type ExtendedHTMLElementTagNameMap = HTMLElementTagNameMap & CustomElementTagNameMap;
+export namespace el {
+	/**
+	 * Creates a marker comment for elements
+	 *
+	 * @param attrs - Marker attributes
+	 * @param [is_open=false] - Whether the marker is open-ended
+	 * @returns Comment node marker
+	 */
+	export function mark(attrs: {
+		type: "component" | "reactive" | "later";
+		name?: string;
+		host?: "this" | "parentElement";
+	}, is_open?: boolean): Comment;
+}
+export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>, ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<A extends {
+	textContent: ddeStringable;
+}, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>["textContent"], ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(tag_name: TAG, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable, ...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[]): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement;
+export function el(tag_name?: "<>"): ddeDocumentFragment;
+export function el(tag_name: string, attrs?: ElementAttributes<HTMLElement> | ddeStringable, ...addons: ddeElementAddon<HTMLElement>[]): ddeHTMLElement;
+export function elNS(namespace: "http://www.w3.org/2000/svg"): <TAG extends keyof SVGElementTagNameMap & string, EL extends (TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement)>(tag_name: TAG, attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable, ...addons: ddeElementAddon<NoInfer<EL>>[]) => TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement;
+export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG extends keyof MathMLElementTagNameMap & string, EL extends (TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement)>(tag_name: TAG, attrs?: ddeStringable | Partial<{
+	[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
+}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
+export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
 export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
 /** Simulate slots for ddeComponents */
-export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
-	root: EL,
-): EL
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
 /**
  * Simulate slots in Custom Elements without using `shadowRoot`.
  * @param el Custom Element root element
  * @param body Body of the custom element
  * */
-export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
-	el: HTMLElement,
-	body: EL,
-): EL
-
-export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
-	(element: SupportedElement, data?: any)=> void;
-export function dispatchEvent(
-	name: keyof DocumentEventMap | string,
-	options: EventInit | null,
-	element: SupportedElement | (()=> SupportedElement)
-): (data?: any)=> void;
-interface On{
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void;
+export interface On {
 	/** Listens to the DOM event. See {@link Document.addEventListener} */
-	<
-		Event extends keyof DocumentEventMap,
-		EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
-		>(
-			type: Event,
-			listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any,
-			options?: AddEventListenerOptions
-		) : EE;
-	<
-		EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
-		>(
-			type: string,
-			listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent ) => any,
-			options?: AddEventListenerOptions
-		) : EE;
-	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
-	connected<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
-		>(
-			listener: (this: El, event: CustomEvent<El>) => any,
-			options?: AddEventListenerOptions
-		) : EE;
-	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
-	disconnected<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
-		>(
-			listener: (this: El, event: CustomEvent<void>) => any,
-			options?: AddEventListenerOptions
-		) : EE;
-	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
-	attributeChanged<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
-		>(
-			listener: (this: El, event: CustomEvent<[ string, string ]>) => any,
-			options?: AddEventListenerOptions
-		) : EE;
+	<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
+	<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+		string,
+		string
+	]>) => any, options?: AddEventListenerOptions): EE;
 }
 export const on: On;
-
-type Scope= {
-	scope: Node | Function | Object,
-	host: ddeElementAddon<any>,
-	custom_element: false | HTMLElement,
-	prevent: boolean
+export type Scope = {
+	scope: Node | Function | Object;
+	host: ddeElementAddon<any>;
+	custom_element: false | HTMLElement;
+	prevent: boolean;
 };
 /** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
 export const scope: {
-	current: Scope,
+	current: Scope;
 	/** Stops all automatizations. E. g. signals used as attributes in current scope
 	 * registers removing these listeners (and clean signal if no other listeners are detected)
 	 * on `disconnected` event. */
-	preventDefault<T extends boolean>(prevent: T): T,
+	preventDefault<T extends boolean>(prevent: T): T;
 	/**
 	 * This represents reference to the current host element — `scope.host()`.
 	 * It can be also used to register Addon(s) (functions to be called when component is initized)
 	 * — `scope.host(on.connected(console.log))`.
 	 * */
-	host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
-
-	state: Scope[],
+	host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement;
+	state: Scope[];
 	/** Adds new child scope. All attributes are inherited by default. */
-	push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
+	push(scope?: Partial<Scope>): ReturnType<Array<Scope>["push"]>;
 	/** Adds root scope as a child of the current scope. */
-	pushRoot(): ReturnType<Array<Scope>["push"]>,
+	pushRoot(): ReturnType<Array<Scope>["push"]>;
 	/** Removes last/current child scope. */
-	pop(): ReturnType<Array<Scope>["pop"]>,
+	pop(): ReturnType<Array<Scope>["pop"]>;
 };
-
-export function customElementRender<
-	EL extends HTMLElement,
-	P extends any = Record<string, string | ddeSignal<string>>
->(
-	target: ShadowRoot | EL,
-	render: (props: P)=> SupportedElement | DocumentFragment,
-	props?: P | ((el: EL)=> P)
-): EL
-export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
-export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
-export function observedAttributes(custom_element: HTMLElement): Record<string, string>
-
+export function customElementRender<EL extends HTMLElement, P extends any = Record<string, string | Signal<string, {}>>>(target: ShadowRoot | EL, render: (props: P) => SupportedElement | DocumentFragment, props?: P | ((el: EL) => P)): EL;
+export function customElementWithDDE<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function lifecyclesToEvents<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function observedAttributes(custom_element: HTMLElement): Record<string, string>;
+/**
+ * This is used primarly for server side rendering. To be sure that all async operations
+ * are finished before the page is sent to the client.
+ * ```
+ *	// on component
+ *	function component(){
+ *		…
+ *		queue(fetch(...).then(...));
+ *	}
+ *
+ * // building the page
+ * async function build(){
+ *		const { component }= await import("./component.js");
+ *		document.body.append(el(component));
+ *		await queue();
+ *		retutn document.body.innerHTML;
+ *	}
+ * ```
+ * */
+export function queue(promise?: Promise<unknown>): Promise<unknown>;
 /* TypeScript MEH */
-declare global{
-	type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
-
-	interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
-	interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
-	interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
-	interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
-
+declare global {
+	type ddeAppend<el> = (...nodes: (Node | string)[]) => el;
+	interface ddeDocumentFragment extends DocumentFragment {
+		append: ddeAppend<ddeDocumentFragment>;
+	}
+	interface ddeHTMLElement extends HTMLElement {
+		append: ddeAppend<ddeHTMLElement>;
+	}
+	interface ddeSVGElement extends SVGElement {
+		append: ddeAppend<ddeSVGElement>;
+	}
+	interface ddeMathMLElement extends MathMLElement {
+		append: ddeAppend<ddeMathMLElement>;
+	}
 	interface ddeHTMLElementTagNameMap {
 		"a": ddeHTMLAnchorElement;
 		"area": ddeHTMLAreaElement;
@@ -385,133 +390,393 @@ declare global{
 		"view": ddeSVGViewElement;
 	}
 }
-
 // editorconfig-checker-disable
-interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
-interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
-interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
-interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend<ddeHTMLBaseElement>; }
-interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend<ddeHTMLQuoteElement>; }
-interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend<ddeHTMLBodyElement>; }
-interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend<ddeHTMLBRElement>; }
-interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend<ddeHTMLButtonElement>; }
-interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend<ddeHTMLCanvasElement>; }
-interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend<ddeHTMLTableCaptionElement>; }
-interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
-interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
-interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend<ddeHTMLDataElement>; }
-interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend<ddeHTMLDataListElement>; }
-interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend<ddeHTMLModElement>; }
-interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend<ddeHTMLDetailsElement>; }
-interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend<ddeHTMLDialogElement>; }
-interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend<ddeHTMLDivElement>; }
-interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend<ddeHTMLDListElement>; }
-interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend<ddeHTMLEmbedElement>; }
-interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend<ddeHTMLFieldSetElement>; }
-interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend<ddeHTMLFormElement>; }
-interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend<ddeHTMLHeadingElement>; }
-interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend<ddeHTMLHeadElement>; }
-interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend<ddeHTMLHRElement>; }
-interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend<ddeHTMLHtmlElement>; }
-interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend<ddeHTMLIFrameElement>; }
-interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend<ddeHTMLImageElement>; }
-interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend<ddeHTMLInputElement>; }
-interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend<ddeHTMLLabelElement>; }
-interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend<ddeHTMLLegendElement>; }
-interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend<ddeHTMLLIElement>; }
-interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend<ddeHTMLLinkElement>; }
-interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend<ddeHTMLMapElement>; }
-interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend<ddeHTMLMenuElement>; }
-interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend<ddeHTMLMetaElement>; }
-interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend<ddeHTMLMeterElement>; }
-interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend<ddeHTMLObjectElement>; }
-interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend<ddeHTMLOListElement>; }
-interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend<ddeHTMLOptGroupElement>; }
-interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend<ddeHTMLOptionElement>; }
-interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend<ddeHTMLOutputElement>; }
-interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend<ddeHTMLParagraphElement>; }
-interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend<ddeHTMLPictureElement>; }
-interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend<ddeHTMLPreElement>; }
-interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend<ddeHTMLProgressElement>; }
-interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend<ddeHTMLScriptElement>; }
-interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend<ddeHTMLSelectElement>; }
-interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend<ddeHTMLSlotElement>; }
-interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend<ddeHTMLSourceElement>; }
-interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend<ddeHTMLSpanElement>; }
-interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend<ddeHTMLStyleElement>; }
-interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend<ddeHTMLTableElement>; }
-interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend<ddeHTMLTableSectionElement>; }
-interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
-interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend<ddeHTMLTemplateElement>; }
-interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend<ddeHTMLTextAreaElement>; }
-interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
-interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend<ddeHTMLTimeElement>; }
-interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend<ddeHTMLTitleElement>; }
-interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend<ddeHTMLTableRowElement>; }
-interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend<ddeHTMLTrackElement>; }
-interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend<ddeHTMLUListElement>; }
-interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend<ddeHTMLVideoElement>; }
-interface ddeSVGAElement extends SVGAElement{ append: ddeAppend<ddeSVGAElement>; }
-interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend<ddeSVGAnimateElement>; }
-interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend<ddeSVGAnimateMotionElement>; }
-interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend<ddeSVGAnimateTransformElement>; }
-interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend<ddeSVGCircleElement>; }
-interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend<ddeSVGClipPathElement>; }
-interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend<ddeSVGDefsElement>; }
-interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend<ddeSVGDescElement>; }
-interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend<ddeSVGEllipseElement>; }
-interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend<ddeSVGFEBlendElement>; }
-interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend<ddeSVGFEColorMatrixElement>; }
-interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend<ddeSVGFEComponentTransferElement>; }
-interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend<ddeSVGFECompositeElement>; }
-interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend<ddeSVGFEConvolveMatrixElement>; }
-interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend<ddeSVGFEDiffuseLightingElement>; }
-interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend<ddeSVGFEDisplacementMapElement>; }
-interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend<ddeSVGFEDistantLightElement>; }
-interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend<ddeSVGFEDropShadowElement>; }
-interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend<ddeSVGFEFloodElement>; }
-interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend<ddeSVGFEFuncAElement>; }
-interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend<ddeSVGFEFuncBElement>; }
-interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend<ddeSVGFEFuncGElement>; }
-interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend<ddeSVGFEFuncRElement>; }
-interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend<ddeSVGFEGaussianBlurElement>; }
-interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend<ddeSVGFEImageElement>; }
-interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend<ddeSVGFEMergeElement>; }
-interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend<ddeSVGFEMergeNodeElement>; }
-interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend<ddeSVGFEMorphologyElement>; }
-interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend<ddeSVGFEOffsetElement>; }
-interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend<ddeSVGFEPointLightElement>; }
-interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend<ddeSVGFESpecularLightingElement>; }
-interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend<ddeSVGFESpotLightElement>; }
-interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend<ddeSVGFETileElement>; }
-interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend<ddeSVGFETurbulenceElement>; }
-interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend<ddeSVGFilterElement>; }
-interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend<ddeSVGForeignObjectElement>; }
-interface ddeSVGGElement extends SVGGElement{ append: ddeAppend<ddeSVGGElement>; }
-interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend<ddeSVGImageElement>; }
-interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend<ddeSVGLineElement>; }
-interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend<ddeSVGLinearGradientElement>; }
-interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend<ddeSVGMarkerElement>; }
-interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend<ddeSVGMaskElement>; }
-interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend<ddeSVGMetadataElement>; }
-interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend<ddeSVGMPathElement>; }
-interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend<ddeSVGPathElement>; }
-interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend<ddeSVGPatternElement>; }
-interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend<ddeSVGPolygonElement>; }
-interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend<ddeSVGPolylineElement>; }
-interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend<ddeSVGRadialGradientElement>; }
-interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend<ddeSVGRectElement>; }
-interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend<ddeSVGScriptElement>; }
-interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend<ddeSVGSetElement>; }
-interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend<ddeSVGStopElement>; }
-interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend<ddeSVGStyleElement>; }
-interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend<ddeSVGSVGElement>; }
-interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend<ddeSVGSwitchElement>; }
-interface ddeSVGSymbolElement extends SVGSymbolElement{ append: ddeAppend<ddeSVGSymbolElement>; }
-interface ddeSVGTextElement extends SVGTextElement{ append: ddeAppend<ddeSVGTextElement>; }
-interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend<ddeSVGTextPathElement>; }
-interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTitleElement>; }
-interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
-interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
-interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
-// editorconfig-checker-enable
\ No newline at end of file
+export interface ddeHTMLAnchorElement extends HTMLAnchorElement {
+	append: ddeAppend<ddeHTMLAnchorElement>;
+}
+export interface ddeHTMLAreaElement extends HTMLAreaElement {
+	append: ddeAppend<ddeHTMLAreaElement>;
+}
+export interface ddeHTMLAudioElement extends HTMLAudioElement {
+	append: ddeAppend<ddeHTMLAudioElement>;
+}
+export interface ddeHTMLBaseElement extends HTMLBaseElement {
+	append: ddeAppend<ddeHTMLBaseElement>;
+}
+export interface ddeHTMLQuoteElement extends HTMLQuoteElement {
+	append: ddeAppend<ddeHTMLQuoteElement>;
+}
+export interface ddeHTMLBodyElement extends HTMLBodyElement {
+	append: ddeAppend<ddeHTMLBodyElement>;
+}
+export interface ddeHTMLBRElement extends HTMLBRElement {
+	append: ddeAppend<ddeHTMLBRElement>;
+}
+export interface ddeHTMLButtonElement extends HTMLButtonElement {
+	append: ddeAppend<ddeHTMLButtonElement>;
+}
+export interface ddeHTMLCanvasElement extends HTMLCanvasElement {
+	append: ddeAppend<ddeHTMLCanvasElement>;
+}
+export interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement {
+	append: ddeAppend<ddeHTMLTableCaptionElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLDataElement extends HTMLDataElement {
+	append: ddeAppend<ddeHTMLDataElement>;
+}
+export interface ddeHTMLDataListElement extends HTMLDataListElement {
+	append: ddeAppend<ddeHTMLDataListElement>;
+}
+export interface ddeHTMLModElement extends HTMLModElement {
+	append: ddeAppend<ddeHTMLModElement>;
+}
+export interface ddeHTMLDetailsElement extends HTMLDetailsElement {
+	append: ddeAppend<ddeHTMLDetailsElement>;
+}
+export interface ddeHTMLDialogElement extends HTMLDialogElement {
+	append: ddeAppend<ddeHTMLDialogElement>;
+}
+export interface ddeHTMLDivElement extends HTMLDivElement {
+	append: ddeAppend<ddeHTMLDivElement>;
+}
+export interface ddeHTMLDListElement extends HTMLDListElement {
+	append: ddeAppend<ddeHTMLDListElement>;
+}
+export interface ddeHTMLEmbedElement extends HTMLEmbedElement {
+	append: ddeAppend<ddeHTMLEmbedElement>;
+}
+export interface ddeHTMLFieldSetElement extends HTMLFieldSetElement {
+	append: ddeAppend<ddeHTMLFieldSetElement>;
+}
+export interface ddeHTMLFormElement extends HTMLFormElement {
+	append: ddeAppend<ddeHTMLFormElement>;
+}
+export interface ddeHTMLHeadingElement extends HTMLHeadingElement {
+	append: ddeAppend<ddeHTMLHeadingElement>;
+}
+export interface ddeHTMLHeadElement extends HTMLHeadElement {
+	append: ddeAppend<ddeHTMLHeadElement>;
+}
+export interface ddeHTMLHRElement extends HTMLHRElement {
+	append: ddeAppend<ddeHTMLHRElement>;
+}
+export interface ddeHTMLHtmlElement extends HTMLHtmlElement {
+	append: ddeAppend<ddeHTMLHtmlElement>;
+}
+export interface ddeHTMLIFrameElement extends HTMLIFrameElement {
+	append: ddeAppend<ddeHTMLIFrameElement>;
+}
+export interface ddeHTMLImageElement extends HTMLImageElement {
+	append: ddeAppend<ddeHTMLImageElement>;
+}
+export interface ddeHTMLInputElement extends HTMLInputElement {
+	append: ddeAppend<ddeHTMLInputElement>;
+}
+export interface ddeHTMLLabelElement extends HTMLLabelElement {
+	append: ddeAppend<ddeHTMLLabelElement>;
+}
+export interface ddeHTMLLegendElement extends HTMLLegendElement {
+	append: ddeAppend<ddeHTMLLegendElement>;
+}
+export interface ddeHTMLLIElement extends HTMLLIElement {
+	append: ddeAppend<ddeHTMLLIElement>;
+}
+export interface ddeHTMLLinkElement extends HTMLLinkElement {
+	append: ddeAppend<ddeHTMLLinkElement>;
+}
+export interface ddeHTMLMapElement extends HTMLMapElement {
+	append: ddeAppend<ddeHTMLMapElement>;
+}
+export interface ddeHTMLMenuElement extends HTMLMenuElement {
+	append: ddeAppend<ddeHTMLMenuElement>;
+}
+export interface ddeHTMLMetaElement extends HTMLMetaElement {
+	append: ddeAppend<ddeHTMLMetaElement>;
+}
+export interface ddeHTMLMeterElement extends HTMLMeterElement {
+	append: ddeAppend<ddeHTMLMeterElement>;
+}
+export interface ddeHTMLObjectElement extends HTMLObjectElement {
+	append: ddeAppend<ddeHTMLObjectElement>;
+}
+export interface ddeHTMLOListElement extends HTMLOListElement {
+	append: ddeAppend<ddeHTMLOListElement>;
+}
+export interface ddeHTMLOptGroupElement extends HTMLOptGroupElement {
+	append: ddeAppend<ddeHTMLOptGroupElement>;
+}
+export interface ddeHTMLOptionElement extends HTMLOptionElement {
+	append: ddeAppend<ddeHTMLOptionElement>;
+}
+export interface ddeHTMLOutputElement extends HTMLOutputElement {
+	append: ddeAppend<ddeHTMLOutputElement>;
+}
+export interface ddeHTMLParagraphElement extends HTMLParagraphElement {
+	append: ddeAppend<ddeHTMLParagraphElement>;
+}
+export interface ddeHTMLPictureElement extends HTMLPictureElement {
+	append: ddeAppend<ddeHTMLPictureElement>;
+}
+export interface ddeHTMLPreElement extends HTMLPreElement {
+	append: ddeAppend<ddeHTMLPreElement>;
+}
+export interface ddeHTMLProgressElement extends HTMLProgressElement {
+	append: ddeAppend<ddeHTMLProgressElement>;
+}
+export interface ddeHTMLScriptElement extends HTMLScriptElement {
+	append: ddeAppend<ddeHTMLScriptElement>;
+}
+export interface ddeHTMLSelectElement extends HTMLSelectElement {
+	append: ddeAppend<ddeHTMLSelectElement>;
+}
+export interface ddeHTMLSlotElement extends HTMLSlotElement {
+	append: ddeAppend<ddeHTMLSlotElement>;
+}
+export interface ddeHTMLSourceElement extends HTMLSourceElement {
+	append: ddeAppend<ddeHTMLSourceElement>;
+}
+export interface ddeHTMLSpanElement extends HTMLSpanElement {
+	append: ddeAppend<ddeHTMLSpanElement>;
+}
+export interface ddeHTMLStyleElement extends HTMLStyleElement {
+	append: ddeAppend<ddeHTMLStyleElement>;
+}
+export interface ddeHTMLTableElement extends HTMLTableElement {
+	append: ddeAppend<ddeHTMLTableElement>;
+}
+export interface ddeHTMLTableSectionElement extends HTMLTableSectionElement {
+	append: ddeAppend<ddeHTMLTableSectionElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTemplateElement extends HTMLTemplateElement {
+	append: ddeAppend<ddeHTMLTemplateElement>;
+}
+export interface ddeHTMLTextAreaElement extends HTMLTextAreaElement {
+	append: ddeAppend<ddeHTMLTextAreaElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTimeElement extends HTMLTimeElement {
+	append: ddeAppend<ddeHTMLTimeElement>;
+}
+export interface ddeHTMLTitleElement extends HTMLTitleElement {
+	append: ddeAppend<ddeHTMLTitleElement>;
+}
+export interface ddeHTMLTableRowElement extends HTMLTableRowElement {
+	append: ddeAppend<ddeHTMLTableRowElement>;
+}
+export interface ddeHTMLTrackElement extends HTMLTrackElement {
+	append: ddeAppend<ddeHTMLTrackElement>;
+}
+export interface ddeHTMLUListElement extends HTMLUListElement {
+	append: ddeAppend<ddeHTMLUListElement>;
+}
+export interface ddeHTMLVideoElement extends HTMLVideoElement {
+	append: ddeAppend<ddeHTMLVideoElement>;
+}
+export interface ddeSVGAElement extends SVGAElement {
+	append: ddeAppend<ddeSVGAElement>;
+}
+export interface ddeSVGAnimateElement extends SVGAnimateElement {
+	append: ddeAppend<ddeSVGAnimateElement>;
+}
+export interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement {
+	append: ddeAppend<ddeSVGAnimateMotionElement>;
+}
+export interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement {
+	append: ddeAppend<ddeSVGAnimateTransformElement>;
+}
+export interface ddeSVGCircleElement extends SVGCircleElement {
+	append: ddeAppend<ddeSVGCircleElement>;
+}
+export interface ddeSVGClipPathElement extends SVGClipPathElement {
+	append: ddeAppend<ddeSVGClipPathElement>;
+}
+export interface ddeSVGDefsElement extends SVGDefsElement {
+	append: ddeAppend<ddeSVGDefsElement>;
+}
+export interface ddeSVGDescElement extends SVGDescElement {
+	append: ddeAppend<ddeSVGDescElement>;
+}
+export interface ddeSVGEllipseElement extends SVGEllipseElement {
+	append: ddeAppend<ddeSVGEllipseElement>;
+}
+export interface ddeSVGFEBlendElement extends SVGFEBlendElement {
+	append: ddeAppend<ddeSVGFEBlendElement>;
+}
+export interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement {
+	append: ddeAppend<ddeSVGFEColorMatrixElement>;
+}
+export interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement {
+	append: ddeAppend<ddeSVGFEComponentTransferElement>;
+}
+export interface ddeSVGFECompositeElement extends SVGFECompositeElement {
+	append: ddeAppend<ddeSVGFECompositeElement>;
+}
+export interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement {
+	append: ddeAppend<ddeSVGFEConvolveMatrixElement>;
+}
+export interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement {
+	append: ddeAppend<ddeSVGFEDiffuseLightingElement>;
+}
+export interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement {
+	append: ddeAppend<ddeSVGFEDisplacementMapElement>;
+}
+export interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement {
+	append: ddeAppend<ddeSVGFEDistantLightElement>;
+}
+export interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement {
+	append: ddeAppend<ddeSVGFEDropShadowElement>;
+}
+export interface ddeSVGFEFloodElement extends SVGFEFloodElement {
+	append: ddeAppend<ddeSVGFEFloodElement>;
+}
+export interface ddeSVGFEFuncAElement extends SVGFEFuncAElement {
+	append: ddeAppend<ddeSVGFEFuncAElement>;
+}
+export interface ddeSVGFEFuncBElement extends SVGFEFuncBElement {
+	append: ddeAppend<ddeSVGFEFuncBElement>;
+}
+export interface ddeSVGFEFuncGElement extends SVGFEFuncGElement {
+	append: ddeAppend<ddeSVGFEFuncGElement>;
+}
+export interface ddeSVGFEFuncRElement extends SVGFEFuncRElement {
+	append: ddeAppend<ddeSVGFEFuncRElement>;
+}
+export interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement {
+	append: ddeAppend<ddeSVGFEGaussianBlurElement>;
+}
+export interface ddeSVGFEImageElement extends SVGFEImageElement {
+	append: ddeAppend<ddeSVGFEImageElement>;
+}
+export interface ddeSVGFEMergeElement extends SVGFEMergeElement {
+	append: ddeAppend<ddeSVGFEMergeElement>;
+}
+export interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement {
+	append: ddeAppend<ddeSVGFEMergeNodeElement>;
+}
+export interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement {
+	append: ddeAppend<ddeSVGFEMorphologyElement>;
+}
+export interface ddeSVGFEOffsetElement extends SVGFEOffsetElement {
+	append: ddeAppend<ddeSVGFEOffsetElement>;
+}
+export interface ddeSVGFEPointLightElement extends SVGFEPointLightElement {
+	append: ddeAppend<ddeSVGFEPointLightElement>;
+}
+export interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement {
+	append: ddeAppend<ddeSVGFESpecularLightingElement>;
+}
+export interface ddeSVGFESpotLightElement extends SVGFESpotLightElement {
+	append: ddeAppend<ddeSVGFESpotLightElement>;
+}
+export interface ddeSVGFETileElement extends SVGFETileElement {
+	append: ddeAppend<ddeSVGFETileElement>;
+}
+export interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement {
+	append: ddeAppend<ddeSVGFETurbulenceElement>;
+}
+export interface ddeSVGFilterElement extends SVGFilterElement {
+	append: ddeAppend<ddeSVGFilterElement>;
+}
+export interface ddeSVGForeignObjectElement extends SVGForeignObjectElement {
+	append: ddeAppend<ddeSVGForeignObjectElement>;
+}
+export interface ddeSVGGElement extends SVGGElement {
+	append: ddeAppend<ddeSVGGElement>;
+}
+export interface ddeSVGImageElement extends SVGImageElement {
+	append: ddeAppend<ddeSVGImageElement>;
+}
+export interface ddeSVGLineElement extends SVGLineElement {
+	append: ddeAppend<ddeSVGLineElement>;
+}
+export interface ddeSVGLinearGradientElement extends SVGLinearGradientElement {
+	append: ddeAppend<ddeSVGLinearGradientElement>;
+}
+export interface ddeSVGMarkerElement extends SVGMarkerElement {
+	append: ddeAppend<ddeSVGMarkerElement>;
+}
+export interface ddeSVGMaskElement extends SVGMaskElement {
+	append: ddeAppend<ddeSVGMaskElement>;
+}
+export interface ddeSVGMetadataElement extends SVGMetadataElement {
+	append: ddeAppend<ddeSVGMetadataElement>;
+}
+export interface ddeSVGMPathElement extends SVGMPathElement {
+	append: ddeAppend<ddeSVGMPathElement>;
+}
+export interface ddeSVGPathElement extends SVGPathElement {
+	append: ddeAppend<ddeSVGPathElement>;
+}
+export interface ddeSVGPatternElement extends SVGPatternElement {
+	append: ddeAppend<ddeSVGPatternElement>;
+}
+export interface ddeSVGPolygonElement extends SVGPolygonElement {
+	append: ddeAppend<ddeSVGPolygonElement>;
+}
+export interface ddeSVGPolylineElement extends SVGPolylineElement {
+	append: ddeAppend<ddeSVGPolylineElement>;
+}
+export interface ddeSVGRadialGradientElement extends SVGRadialGradientElement {
+	append: ddeAppend<ddeSVGRadialGradientElement>;
+}
+export interface ddeSVGRectElement extends SVGRectElement {
+	append: ddeAppend<ddeSVGRectElement>;
+}
+export interface ddeSVGScriptElement extends SVGScriptElement {
+	append: ddeAppend<ddeSVGScriptElement>;
+}
+export interface ddeSVGSetElement extends SVGSetElement {
+	append: ddeAppend<ddeSVGSetElement>;
+}
+export interface ddeSVGStopElement extends SVGStopElement {
+	append: ddeAppend<ddeSVGStopElement>;
+}
+export interface ddeSVGStyleElement extends SVGStyleElement {
+	append: ddeAppend<ddeSVGStyleElement>;
+}
+export interface ddeSVGSVGElement extends SVGSVGElement {
+	append: ddeAppend<ddeSVGSVGElement>;
+}
+export interface ddeSVGSwitchElement extends SVGSwitchElement {
+	append: ddeAppend<ddeSVGSwitchElement>;
+}
+export interface ddeSVGSymbolElement extends SVGSymbolElement {
+	append: ddeAppend<ddeSVGSymbolElement>;
+}
+export interface ddeSVGTextElement extends SVGTextElement {
+	append: ddeAppend<ddeSVGTextElement>;
+}
+export interface ddeSVGTextPathElement extends SVGTextPathElement {
+	append: ddeAppend<ddeSVGTextPathElement>;
+}
+export interface ddeSVGTitleElement extends SVGTitleElement {
+	append: ddeAppend<ddeSVGTitleElement>;
+}
+export interface ddeSVGTSpanElement extends SVGTSpanElement {
+	append: ddeAppend<ddeSVGTSpanElement>;
+}
+export interface ddeSVGUseElement extends SVGUseElement {
+	append: ddeAppend<ddeSVGUseElement>;
+}
+export interface ddeSVGViewElement extends SVGViewElement {
+	append: ddeAppend<ddeSVGViewElement>;
+}
+
+export {
+	dispatchEvent$1 as dispatchEvent,
+	el as createElement,
+	elNS as createElementNS,
+};
+
+export {};
diff --git a/dist/esm.js b/dist/esm.js
index 025a507..6a6a6cb 100644
--- a/dist/esm.js
+++ b/dist/esm.js
@@ -1,451 +1,662 @@
-// src/signals-common.js
-var C = {
-	isSignal(t) {
-		return !1;
-	},
-	processReactiveAttribute(t, e, r, n) {
-		return r;
-	}
-};
-function Z(t, e = !0) {
-	return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t);
-}
-function S(t) {
-	return C.isPrototypeOf(t) && t !== C ? t : C;
-}
-
 // src/helpers.js
-function m(t) {
-	return typeof t > "u";
+function isUndef(value) {
+	return typeof value === "undefined";
 }
-function L(t, e) {
-	if (!t || !(t instanceof AbortSignal))
-		return !0;
-	if (!t.aborted)
-		return t.addEventListener("abort", e), function() {
-			t.removeEventListener("abort", e);
-		};
+function isInstance(obj, cls) {
+	return obj instanceof cls;
 }
-function q(t, e) {
-	let { observedAttributes: r = [] } = t.constructor;
-	return r.reduce(function(n, o) {
-		return n[G(o)] = e(t, o), n;
+function isProtoFrom(obj, cls) {
+	return Object.prototype.isPrototypeOf.call(cls, obj);
+}
+function oAssign(...o) {
+	return Object.assign(...o);
+}
+function onAbort(signal, listener) {
+	if (!signal || !isInstance(signal, AbortSignal))
+		return true;
+	if (signal.aborted)
+		return;
+	signal.addEventListener("abort", listener);
+	return function cleanUp() {
+		signal.removeEventListener("abort", listener);
+	};
+}
+function observedAttributes(instance, observedAttribute) {
+	const { observedAttributes: observedAttributes3 = [] } = instance.constructor;
+	return observedAttributes3.reduce(function(out, name) {
+		out[kebabToCamel(name)] = observedAttribute(instance, name);
+		return out;
 	}, {});
 }
-function G(t) {
-	return t.replace(/-./g, (e) => e[1].toUpperCase());
+function kebabToCamel(name) {
+	return name.replace(/-./g, (x) => x[1].toUpperCase());
+}
+
+// src/signals-lib/common.js
+var signals_global = {
+	/**
+	* Checks if a value is a signal
+	* @param {any} attributes - Value to check
+	* @returns {boolean} Whether the value is a signal
+	*/
+	isSignal(attributes) {
+		return false;
+	},
+	/**
+	* Processes an attribute that might be reactive
+	* @param {Element} obj - Element that owns the attribute
+	* @param {string} key - Attribute name
+	* @param {any} attr - Attribute value
+	* @param {Function} set - Function to set the attribute
+	* @returns {any} Processed attribute value
+	*/
+	processReactiveAttribute(obj, key, attr, set) {
+		return attr;
+	}
+};
+function registerReactivity(def, global = true) {
+	if (global) return oAssign(signals_global, def);
+	Object.setPrototypeOf(def, signals_global);
+	return def;
+}
+function signals(_this) {
+	return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
 }
 
 // src/dom-common.js
-var a = {
-	setDeleteAttr: V,
+var enviroment = {
+	setDeleteAttr,
 	ssr: "",
 	D: globalThis.document,
 	F: globalThis.DocumentFragment,
 	H: globalThis.HTMLElement,
 	S: globalThis.SVGElement,
 	M: globalThis.MutationObserver,
-	q: (t) => t || Promise.resolve()
+	q: (p) => p || Promise.resolve()
 };
-function V(t, e, r) {
-	if (Reflect.set(t, e, r), !!m(r)) {
-		if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined")
-			return t.removeAttribute(e);
-		if (Reflect.get(t, e) === "undefined")
-			return Reflect.set(t, e, "");
-	}
+function setDeleteAttr(obj, prop, val) {
+	Reflect.set(obj, prop, val);
+	if (!isUndef(val)) return;
+	Reflect.deleteProperty(obj, prop);
+	if (isInstance(obj, enviroment.H) && obj.getAttribute(prop) === "undefined")
+		return obj.removeAttribute(prop);
+	if (Reflect.get(obj, prop) === "undefined")
+		return Reflect.set(obj, prop, "");
 }
-var x = "__dde_lifecyclesToEvents", v = "dde:connected", w = "dde:disconnected", y = "dde:attributeChanged";
+var keyLTE = "__dde_lifecyclesToEvents";
+var evc = "dde:connected";
+var evd = "dde:disconnected";
+var eva = "dde:attributeChanged";
 
 // src/dom.js
-function dt(t) {
-	return a.q(t);
+function queue(promise) {
+	return enviroment.q(promise);
 }
-var g = [{
+var scopes = [{
 	get scope() {
-		return a.D.body;
+		return enviroment.D.body;
 	},
-	host: (t) => t ? t(a.D.body) : a.D.body,
-	prevent: !0
-}], O = {
+	host: (c) => c ? c(enviroment.D.body) : enviroment.D.body,
+	prevent: true
+}];
+var scope = {
+	/**
+	* Gets the current scope
+	* @returns {Object} Current scope context
+	*/
 	get current() {
-		return g[g.length - 1];
+		return scopes[scopes.length - 1];
 	},
+	/**
+	* Gets the host element of the current scope
+	* @returns {Function} Host accessor function
+	*/
 	get host() {
 		return this.current.host;
 	},
+	/**
+	* Prevents default behavior in the current scope
+	* @returns {Object} Current scope context
+	*/
 	preventDefault() {
-		let { current: t } = this;
-		return t.prevent = !0, t;
+		const { current } = this;
+		current.prevent = true;
+		return current;
 	},
+	/**
+	* Gets a copy of the current scope stack
+	* @returns {Array} Copy of scope stack
+	*/
 	get state() {
-		return [...g];
+		return [...scopes];
 	},
-	push(t = {}) {
-		return g.push(Object.assign({}, this.current, { prevent: !1 }, t));
+	/**
+	* Pushes a new scope to the stack
+	* @param {Object} [s={}] - Scope object to push
+	* @returns {number} New length of the scope stack
+	*/
+	push(s = {}) {
+		return scopes.push(oAssign({}, this.current, { prevent: false }, s));
 	},
+	/**
+	* Pushes the root scope to the stack
+	* @returns {number} New length of the scope stack
+	*/
 	pushRoot() {
-		return g.push(g[0]);
+		return scopes.push(scopes[0]);
 	},
+	/**
+	* Pops the current scope from the stack
+	* @returns {Object|undefined} Popped scope or undefined if only one scope remains
+	*/
 	pop() {
-		if (g.length !== 1)
-			return g.pop();
+		if (scopes.length === 1) return;
+		return scopes.pop();
 	}
 };
-function k(...t) {
-	return this.appendOriginal(...t), this;
+function append(...els) {
+	this.appendOriginal(...els);
+	return this;
 }
-function J(t) {
-	return t.append === k || (t.appendOriginal = t.append, t.append = k), t;
+function chainableAppend(el) {
+	if (el.append === append) return el;
+	el.appendOriginal = el.append;
+	el.append = append;
+	return el;
 }
-var T;
-function P(t, e, ...r) {
-	let n = S(this), o = 0, c, d;
-	switch ((Object(e) !== e || n.isSignal(e)) && (e = { textContent: e }), !0) {
-		case typeof t == "function": {
-			o = 1;
-			let f = (...l) => l.length ? (o === 1 ? r.unshift(...l) : l.forEach((E) => E(d)), void 0) : d;
-			O.push({ scope: t, host: f }), c = t(e || void 0);
-			let p = c instanceof a.F;
-			if (c.nodeName === "#comment") break;
-			let b = P.mark({
+var namespace;
+function createElement(tag, attributes, ...addons) {
+	const s = signals(this);
+	let scoped = 0;
+	let el, el_host;
+	if (Object(attributes) !== attributes || s.isSignal(attributes))
+		attributes = { textContent: attributes };
+	switch (true) {
+		case typeof tag === "function": {
+			scoped = 1;
+			const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0);
+			scope.push({ scope: tag, host });
+			el = tag(attributes || void 0);
+			const is_fragment = isInstance(el, enviroment.F);
+			if (el.nodeName === "#comment") break;
+			const el_mark = createElement.mark({
 				type: "component",
-				name: t.name,
-				host: p ? "this" : "parentElement"
+				name: tag.name,
+				host: is_fragment ? "this" : "parentElement"
 			});
-			c.prepend(b), p && (d = b);
+			el.prepend(el_mark);
+			if (is_fragment) el_host = el_mark;
 			break;
 		}
-		case t === "#text":
-			c = R.call(this, a.D.createTextNode(""), e);
+		case tag === "#text":
+			el = assign.call(this, enviroment.D.createTextNode(""), attributes);
 			break;
-		case (t === "<>" || !t):
-			c = R.call(this, a.D.createDocumentFragment(), e);
+		case (tag === "<>" || !tag):
+			el = assign.call(this, enviroment.D.createDocumentFragment(), attributes);
 			break;
-		case !!T:
-			c = R.call(this, a.D.createElementNS(T, t), e);
+		case Boolean(namespace):
+			el = assign.call(this, enviroment.D.createElementNS(namespace, tag), attributes);
 			break;
-		case !c:
-			c = R.call(this, a.D.createElement(t), e);
+		case !el:
+			el = assign.call(this, enviroment.D.createElement(tag), attributes);
 	}
-	return J(c), d || (d = c), r.forEach((f) => f(d)), o && O.pop(), o = 2, c;
+	chainableAppend(el);
+	if (!el_host) el_host = el;
+	addons.forEach((c) => c(el_host));
+	if (scoped) scope.pop();
+	scoped = 2;
+	return el;
 }
-P.mark = function(t, e = !1) {
-	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
-	let r = e ? "" : "/", n = a.D.createComment(`<dde:mark ${t}${a.ssr}${r}>`);
-	return e && (n.end = a.D.createComment("</dde:mark>")), n;
+createElement.mark = function(attrs, is_open = false) {
+	attrs = Object.entries(attrs).map(([n, v]) => n + `="${v}"`).join(" ");
+	const end = is_open ? "" : "/";
+	const out = enviroment.D.createComment(`<dde:mark ${attrs}${enviroment.ssr}${end}>`);
+	if (is_open) out.end = enviroment.D.createComment("</dde:mark>");
+	return out;
 };
-function pt(t) {
-	let e = this;
-	return function(...n) {
-		T = t;
-		let o = P.call(e, ...n);
-		return T = void 0, o;
+function createElementNS(ns) {
+	const _this = this;
+	return function createElementNSCurried(...rest) {
+		namespace = ns;
+		const el = createElement.call(_this, ...rest);
+		namespace = void 0;
+		return el;
 	};
 }
-function lt(t, e = t) {
-	let r = "\xB9\u2070", n = "\u2713", o = Object.fromEntries(
-		Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(r)).map((c) => [c.name += r, c])
+function simulateSlots(element, root = element) {
+	const mark_e = "\xB9\u2070", mark_s = "\u2713";
+	const slots = Object.fromEntries(
+		Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s])
 	);
-	if (t.append = new Proxy(t.append, {
-		apply(c, d, f) {
-			if (f[0] === e) return c.apply(t, f);
-			for (let p of f) {
-				let b = (p.slot || "") + r;
+	element.append = new Proxy(element.append, {
+		apply(orig, _, els) {
+			if (els[0] === root) return orig.apply(element, els);
+			for (const el of els) {
+				const name = (el.slot || "") + mark_e;
 				try {
-					Q(p, "remove", "slot");
-				} catch {
+					elementAttribute(el, "remove", "slot");
+				} catch (_error) {
 				}
-				let l = o[b];
-				if (!l) return;
-				l.name.startsWith(n) || (l.childNodes.forEach((E) => E.remove()), l.name = n + b), l.append(p);
+				const slot = slots[name];
+				if (!slot) return;
+				if (!slot.name.startsWith(mark_s)) {
+					slot.childNodes.forEach((c) => c.remove());
+					slot.name = mark_s + name;
+				}
+				slot.append(el);
 			}
-			return t.append = c, t;
+			element.append = orig;
+			return element;
 		}
-	}), t !== e) {
-		let c = Array.from(t.childNodes);
-		t.append(...c);
+	});
+	if (element !== root) {
+		const els = Array.from(element.childNodes);
+		element.append(...els);
 	}
-	return e;
+	return root;
 }
-var N = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: $ } = a;
-function R(t, ...e) {
-	if (!e.length) return t;
-	N.set(t, H(t, this));
-	for (let [r, n] of Object.entries(Object.assign({}, ...e)))
-		U.call(this, t, r, n);
-	return N.delete(t), t;
+var assign_context = /* @__PURE__ */ new WeakMap();
+var { setDeleteAttr: setDeleteAttr2 } = enviroment;
+function assign(element, ...attributes) {
+	if (!attributes.length) return element;
+	assign_context.set(element, assignContext(element, this));
+	for (const [key, value] of Object.entries(oAssign({}, ...attributes)))
+		assignAttribute.call(this, element, key, value);
+	assign_context.delete(element);
+	return element;
 }
-function U(t, e, r) {
-	let { setRemoveAttr: n, s: o } = H(t, this), c = this;
-	r = o.processReactiveAttribute(
-		t,
-		e,
-		r,
-		(f, p) => U.call(c, t, f, p)
+function assignAttribute(element, key, value) {
+	const { setRemoveAttr, s } = assignContext(element, this);
+	const _this = this;
+	value = s.processReactiveAttribute(
+		element,
+		key,
+		value,
+		(key2, value2) => assignAttribute.call(_this, element, key2, value2)
 	);
-	let [d] = e;
-	if (d === "=") return n(e.slice(1), r);
-	if (d === ".") return F(t, e.slice(1), r);
-	if (/(aria|data)([A-Z])/.test(e))
-		return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), n(e, r);
-	switch (e === "className" && (e = "class"), e) {
+	const [k] = key;
+	if ("=" === k) return setRemoveAttr(key.slice(1), value);
+	if ("." === k) return setDelete(element, key.slice(1), value);
+	if (/(aria|data)([A-Z])/.test(key)) {
+		key = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+		return setRemoveAttr(key, value);
+	}
+	if ("className" === key) key = "class";
+	switch (key) {
 		case "xlink:href":
-			return n(e, r, "http://www.w3.org/1999/xlink");
+			return setRemoveAttr(key, value, "http://www.w3.org/1999/xlink");
 		case "textContent":
-			return $(t, e, r);
+			return setDeleteAttr2(element, key, value);
 		case "style":
-			if (typeof r != "object") break;
+			if (typeof value !== "object") break;
 		/* falls through */
 		case "dataset":
-			return M(o, e, t, r, F.bind(null, t[e]));
+			return forEachEntries(s, key, element, value, setDelete.bind(null, element[key]));
 		case "ariaset":
-			return M(o, e, t, r, (f, p) => n("aria-" + f, p));
+			return forEachEntries(s, key, element, value, (key2, val) => setRemoveAttr("aria-" + key2, val));
 		case "classList":
-			return K.call(c, t, r);
+			return classListDeclarative.call(_this, element, value);
 	}
-	return X(t, e) ? $(t, e, r) : n(e, r);
+	return isPropSetter(element, key) ? setDeleteAttr2(element, key, value) : setRemoveAttr(key, value);
 }
-function H(t, e) {
-	if (N.has(t)) return N.get(t);
-	let n = (t instanceof a.S ? tt : Y).bind(null, t, "Attribute"), o = S(e);
-	return { setRemoveAttr: n, s: o };
+function assignContext(element, _this) {
+	if (assign_context.has(element)) return assign_context.get(element);
+	const is_svg = isInstance(element, enviroment.S);
+	const setRemoveAttr = (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute");
+	const s = signals(_this);
+	return { setRemoveAttr, s };
 }
-function K(t, e) {
-	let r = S(this);
-	return M(
-		r,
+function classListDeclarative(element, toggle) {
+	const s = signals(this);
+	forEachEntries(
+		s,
 		"classList",
-		t,
-		e,
-		(n, o) => t.classList.toggle(n, o === -1 ? void 0 : !!o)
-	), t;
+		element,
+		toggle,
+		(class_name, val) => element.classList.toggle(class_name, val === -1 ? void 0 : Boolean(val))
+	);
+	return element;
 }
-function Q(t, e, r, n) {
-	return t instanceof a.H ? t[e + "Attribute"](r, n) : t[e + "AttributeNS"](null, r, n);
+function elementAttribute(element, op, key, value) {
+	if (isInstance(element, enviroment.H))
+		return element[op + "Attribute"](key, value);
+	return element[op + "AttributeNS"](null, key, value);
 }
-function X(t, e) {
-	if (!(e in t)) return !1;
-	let r = z(t, e);
-	return !m(r.set);
+function isPropSetter(el, key) {
+	if (!(key in el)) return false;
+	const des = getPropDescriptor(el, key);
+	return !isUndef(des.set);
 }
-function z(t, e) {
-	if (t = Object.getPrototypeOf(t), !t) return {};
-	let r = Object.getOwnPropertyDescriptor(t, e);
-	return r || z(t, e);
+function getPropDescriptor(p, key) {
+	p = Object.getPrototypeOf(p);
+	if (!p) return {};
+	const des = Object.getOwnPropertyDescriptor(p, key);
+	if (!des) return getPropDescriptor(p, key);
+	return des;
 }
-function M(t, e, r, n, o) {
-	let c = String;
-	if (!(typeof n != "object" || n === null))
-		return Object.entries(n).forEach(function([f, p]) {
-			f && (f = new c(f), f.target = e, p = t.processReactiveAttribute(r, f, p, o), o(f, p));
-		});
+function forEachEntries(s, target, element, obj, cb) {
+	const S = String;
+	if (typeof obj !== "object" || obj === null) return;
+	return Object.entries(obj).forEach(function process([key, val]) {
+		if (!key) return;
+		key = new S(key);
+		key.target = target;
+		val = s.processReactiveAttribute(element, key, val, cb);
+		cb(key, val);
+	});
 }
-function Y(t, e, r, n) {
-	return t[(m(n) ? "remove" : "set") + e](r, n);
+function setRemove(obj, prop, key, val) {
+	return obj[(isUndef(val) ? "remove" : "set") + prop](key, val);
 }
-function tt(t, e, r, n, o = null) {
-	return t[(m(n) ? "remove" : "set") + e + "NS"](o, r, n);
+function setRemoveNS(obj, prop, key, val, ns = null) {
+	return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val);
 }
-function F(t, e, r) {
-	if (Reflect.set(t, e, r), !!m(r))
-		return Reflect.deleteProperty(t, e);
+function setDelete(obj, key, val) {
+	Reflect.set(obj, key, val);
+	if (!isUndef(val)) return;
+	return Reflect.deleteProperty(obj, key);
 }
 
 // src/events-observer.js
-var _ = a.M ? et() : new Proxy({}, {
+var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
 	get() {
 		return () => {
 		};
 	}
 });
-function et() {
-	let t = /* @__PURE__ */ new Map(), e = !1, r = (s) => function(u) {
-		for (let i of u)
-			if (i.type === "childList") {
-				if (l(i.addedNodes, !0)) {
-					s();
-					continue;
-				}
-				E(i.removedNodes, !0) && s();
+function connectionsChangesObserverConstructor() {
+	const store = /* @__PURE__ */ new Map();
+	let is_observing = false;
+	const observerListener = (stop2) => function(mutations) {
+		for (const mutation of mutations) {
+			if (mutation.type !== "childList") continue;
+			if (observerAdded(mutation.addedNodes, true)) {
+				stop2();
+				continue;
 			}
-	}, n = new a.M(r(f));
-	return {
-		observe(s) {
-			let u = new a.M(r(() => {
-			}));
-			return u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect();
-		},
-		onConnected(s, u) {
-			d();
-			let i = c(s);
-			i.connected.has(u) || (i.connected.add(u), i.length_c += 1);
-		},
-		offConnected(s, u) {
-			if (!t.has(s)) return;
-			let i = t.get(s);
-			i.connected.has(u) && (i.connected.delete(u), i.length_c -= 1, o(s, i));
-		},
-		onDisconnected(s, u) {
-			d();
-			let i = c(s);
-			i.disconnected.has(u) || (i.disconnected.add(u), i.length_d += 1);
-		},
-		offDisconnected(s, u) {
-			if (!t.has(s)) return;
-			let i = t.get(s);
-			i.disconnected.has(u) && (i.disconnected.delete(u), i.length_d -= 1, o(s, i));
+			if (observerRemoved(mutation.removedNodes, true))
+				stop2();
 		}
 	};
-	function o(s, u) {
-		u.length_c || u.length_d || (t.delete(s), f());
+	const observer = new enviroment.M(observerListener(stop));
+	return {
+		/**
+		* Creates an observer for a specific element
+		* @param {Element} element - Element to observe
+		* @returns {Function} Cleanup function
+		*/
+		observe(element) {
+			const o = new enviroment.M(observerListener(() => {
+			}));
+			o.observe(element, { childList: true, subtree: true });
+			return () => o.disconnect();
+		},
+		/**
+		* Register a connection listener for an element
+		* @param {Element} element - Element to watch
+		* @param {Function} listener - Callback for connection event
+		*/
+		onConnected(element, listener) {
+			start();
+			const listeners = getElementStore(element);
+			if (listeners.connected.has(listener)) return;
+			listeners.connected.add(listener);
+			listeners.length_c += 1;
+		},
+		/**
+		* Unregister a connection listener
+		* @param {Element} element - Element being watched
+		* @param {Function} listener - Callback to remove
+		*/
+		offConnected(element, listener) {
+			if (!store.has(element)) return;
+			const ls = store.get(element);
+			if (!ls.connected.has(listener)) return;
+			ls.connected.delete(listener);
+			ls.length_c -= 1;
+			cleanWhenOff(element, ls);
+		},
+		/**
+		* Register a disconnection listener for an element
+		* @param {Element} element - Element to watch
+		* @param {Function} listener - Callback for disconnection event
+		*/
+		onDisconnected(element, listener) {
+			start();
+			const listeners = getElementStore(element);
+			if (listeners.disconnected.has(listener)) return;
+			listeners.disconnected.add(listener);
+			listeners.length_d += 1;
+		},
+		/**
+		* Unregister a disconnection listener
+		* @param {Element} element - Element being watched
+		* @param {Function} listener - Callback to remove
+		*/
+		offDisconnected(element, listener) {
+			if (!store.has(element)) return;
+			const ls = store.get(element);
+			ls.disconnected.delete(listener);
+			ls.length_d -= 1;
+			cleanWhenOff(element, ls);
+		}
+	};
+	function cleanWhenOff(element, ls) {
+		if (ls.length_c || ls.length_d)
+			return;
+		store.delete(element);
+		stop();
 	}
-	function c(s) {
-		if (t.has(s)) return t.get(s);
-		let u = {
+	function getElementStore(element) {
+		if (store.has(element)) return store.get(element);
+		const out = {
 			connected: /* @__PURE__ */ new WeakSet(),
 			length_c: 0,
 			disconnected: /* @__PURE__ */ new WeakSet(),
 			length_d: 0
 		};
-		return t.set(s, u), u;
+		store.set(element, out);
+		return out;
 	}
-	function d() {
-		e || (e = !0, n.observe(a.D.body, { childList: !0, subtree: !0 }));
+	function start() {
+		if (is_observing) return;
+		is_observing = true;
+		observer.observe(enviroment.D.body, { childList: true, subtree: true });
 	}
-	function f() {
-		!e || t.size || (e = !1, n.disconnect());
+	function stop() {
+		if (!is_observing || store.size) return;
+		is_observing = false;
+		observer.disconnect();
 	}
-	function p() {
-		return new Promise(function(s) {
-			(requestIdleCallback || requestAnimationFrame)(s);
+	function requestIdle() {
+		return new Promise(function(resolve) {
+			(requestIdleCallback || requestAnimationFrame)(resolve);
 		});
 	}
-	async function b(s) {
-		t.size > 30 && await p();
-		let u = [];
-		if (!(s instanceof Node)) return u;
-		for (let i of t.keys())
-			i === s || !(i instanceof Node) || s.contains(i) && u.push(i);
-		return u;
-	}
-	function l(s, u) {
-		let i = !1;
-		for (let h of s) {
-			if (u && b(h).then(l), !t.has(h)) continue;
-			let A = t.get(h);
-			A.length_c && (h.dispatchEvent(new Event(v)), A.connected = /* @__PURE__ */ new WeakSet(), A.length_c = 0, A.length_d || t.delete(h), i = !0);
+	async function collectChildren(element) {
+		if (store.size > 30)
+			await requestIdle();
+		const out = [];
+		if (!isInstance(element, Node)) return out;
+		for (const el of store.keys()) {
+			if (el === element || !isInstance(el, Node)) continue;
+			if (element.contains(el))
+				out.push(el);
 		}
-		return i;
+		return out;
 	}
-	function E(s, u) {
-		let i = !1;
-		for (let h of s)
-			u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(I(h)), i = !0);
-		return i;
+	function observerAdded(addedNodes, is_root) {
+		let out = false;
+		for (const element of addedNodes) {
+			if (is_root) collectChildren(element).then(observerAdded);
+			if (!store.has(element)) continue;
+			const ls = store.get(element);
+			if (!ls.length_c) continue;
+			element.dispatchEvent(new Event(evc));
+			ls.connected = /* @__PURE__ */ new WeakSet();
+			ls.length_c = 0;
+			if (!ls.length_d) store.delete(element);
+			out = true;
+		}
+		return out;
 	}
-	function I(s) {
+	function observerRemoved(removedNodes, is_root) {
+		let out = false;
+		for (const element of removedNodes) {
+			if (is_root) collectChildren(element).then(observerRemoved);
+			if (!store.has(element)) continue;
+			const ls = store.get(element);
+			if (!ls.length_d) continue;
+			(globalThis.queueMicrotask || setTimeout)(dispatchRemove(element));
+			out = true;
+		}
+		return out;
+	}
+	function dispatchRemove(element) {
 		return () => {
-			s.isConnected || (s.dispatchEvent(new Event(w)), t.delete(s));
+			if (element.isConnected) return;
+			element.dispatchEvent(new Event(evd));
+			store.delete(element);
 		};
 	}
 }
 
 // src/customElement.js
-function wt(t, e, r = rt) {
-	let n = t.host || t;
-	O.push({
-		scope: n,
-		host: (...d) => d.length ? d.forEach((f) => f(n)) : n
-	}), typeof r == "function" && (r = r.call(n, n));
-	let o = n[x];
-	o || nt(n);
-	let c = e.call(n, r);
-	return o || n.dispatchEvent(new Event(v)), t.nodeType === 11 && typeof t.mode == "string" && n.addEventListener(w, _.observe(t), { once: !0 }), O.pop(), t.append(c);
+function customElementRender(target, render, props = observedAttributes2) {
+	const custom_element = target.host || target;
+	scope.push({
+		scope: custom_element,
+		host: (...c) => c.length ? c.forEach((c2) => c2(custom_element)) : custom_element
+	});
+	if (typeof props === "function") props = props.call(custom_element, custom_element);
+	const is_lte = custom_element[keyLTE];
+	if (!is_lte) lifecyclesToEvents(custom_element);
+	const out = render.call(custom_element, props);
+	if (!is_lte) custom_element.dispatchEvent(new Event(evc));
+	if (target.nodeType === 11 && typeof target.mode === "string")
+		custom_element.addEventListener(evd, c_ch_o.observe(target), { once: true });
+	scope.pop();
+	return target.append(out);
 }
-function nt(t) {
-	return j(t.prototype, "connectedCallback", function(e, r, n) {
-		e.apply(r, n), r.dispatchEvent(new Event(v));
-	}), j(t.prototype, "disconnectedCallback", function(e, r, n) {
-		e.apply(r, n), (globalThis.queueMicrotask || setTimeout)(
-			() => !r.isConnected && r.dispatchEvent(new Event(w))
+function lifecyclesToEvents(class_declaration) {
+	wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail) {
+		target.apply(thisArg, detail);
+		thisArg.dispatchEvent(new Event(evc));
+	});
+	wrapMethod(class_declaration.prototype, "disconnectedCallback", function(target, thisArg, detail) {
+		target.apply(thisArg, detail);
+		(globalThis.queueMicrotask || setTimeout)(
+			() => !thisArg.isConnected && thisArg.dispatchEvent(new Event(evd))
 		);
-	}), j(t.prototype, "attributeChangedCallback", function(e, r, n) {
-		let [o, , c] = n;
-		r.dispatchEvent(new CustomEvent(y, {
-			detail: [o, c]
-		})), e.apply(r, n);
-	}), t.prototype[x] = !0, t;
+	});
+	wrapMethod(class_declaration.prototype, "attributeChangedCallback", function(target, thisArg, detail) {
+		const [attribute, , value] = detail;
+		thisArg.dispatchEvent(new CustomEvent(eva, {
+			detail: [attribute, value]
+		}));
+		target.apply(thisArg, detail);
+	});
+	class_declaration.prototype[keyLTE] = true;
+	return class_declaration;
 }
-function j(t, e, r) {
-	t[e] = new Proxy(t[e] || (() => {
-	}), { apply: r });
+function wrapMethod(obj, method, apply) {
+	obj[method] = new Proxy(obj[method] || (() => {
+	}), { apply });
 }
-function rt(t) {
-	return q(t, (e, r) => e.getAttribute(r));
+function observedAttributes2(instance) {
+	return observedAttributes(instance, (i, n) => i.getAttribute(n));
 }
 
 // src/events.js
-function yt(t, e, r) {
-	return e || (e = {}), function(o, ...c) {
-		r && (c.unshift(o), o = typeof r == "function" ? r() : r);
-		let d = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
-		return o.dispatchEvent(d);
+function dispatchEvent(name, options, host) {
+	if (typeof options === "function") {
+		host = options;
+		options = null;
+	}
+	if (!options) options = {};
+	return function dispatch(element, ...d) {
+		if (host) {
+			d.unshift(element);
+			element = typeof host === "function" ? host() : host;
+		}
+		const event = d.length ? new CustomEvent(name, oAssign({ detail: d[0] }, options)) : new Event(name, options);
+		return element.dispatchEvent(event);
 	};
 }
-function D(t, e, r) {
-	return function(o) {
-		return o.addEventListener(t, e, r), o;
+function on(event, listener, options) {
+	return function registerElement(element) {
+		element.addEventListener(event, listener, options);
+		return element;
 	};
 }
-var B = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
-D.connected = function(t, e) {
-	return e = B(e), function(n) {
-		return n.addEventListener(v, t, e), n[x] ? n : n.isConnected ? (n.dispatchEvent(new Event(v)), n) : (L(e.signal, () => _.offConnected(n, t)) && _.onConnected(n, t), n);
+var lifeOptions = (obj) => oAssign({}, typeof obj === "object" ? obj : null, { once: true });
+on.connected = function(listener, options) {
+	options = lifeOptions(options);
+	return function registerElement(element) {
+		element.addEventListener(evc, listener, options);
+		if (element[keyLTE]) return element;
+		if (element.isConnected) return element.dispatchEvent(new Event(evc)), element;
+		const c = onAbort(options.signal, () => c_ch_o.offConnected(element, listener));
+		if (c) c_ch_o.onConnected(element, listener);
+		return element;
 	};
 };
-D.disconnected = function(t, e) {
-	return e = B(e), function(n) {
-		return n.addEventListener(w, t, e), n[x] || L(e.signal, () => _.offDisconnected(n, t)) && _.onDisconnected(n, t), n;
+on.disconnected = function(listener, options) {
+	options = lifeOptions(options);
+	return function registerElement(element) {
+		element.addEventListener(evd, listener, options);
+		if (element[keyLTE]) return element;
+		const c = onAbort(options.signal, () => c_ch_o.offDisconnected(element, listener));
+		if (c) c_ch_o.onDisconnected(element, listener);
+		return element;
 	};
 };
-var W = /* @__PURE__ */ new WeakMap();
-D.disconnectedAsAbort = function(t) {
-	if (W.has(t)) return W.get(t);
-	let e = new AbortController();
-	return W.set(t, e), t(D.disconnected(() => e.abort())), e;
+var store_abort = /* @__PURE__ */ new WeakMap();
+on.disconnectedAsAbort = function(host) {
+	if (store_abort.has(host)) return store_abort.get(host);
+	const a = new AbortController();
+	store_abort.set(host, a);
+	host(on.disconnected(() => a.abort()));
+	return a.signal;
 };
-var ot = /* @__PURE__ */ new WeakSet();
-D.attributeChanged = function(t, e) {
-	return typeof e != "object" && (e = {}), function(n) {
-		if (n.addEventListener(y, t, e), n[x] || ot.has(n) || !a.M) return n;
-		let o = new a.M(function(d) {
-			for (let { attributeName: f, target: p } of d)
-				p.dispatchEvent(
-					new CustomEvent(y, { detail: [f, p.getAttribute(f)] })
+var els_attribute_store = /* @__PURE__ */ new WeakSet();
+on.attributeChanged = function(listener, options) {
+	if (typeof options !== "object")
+		options = {};
+	return function registerElement(element) {
+		element.addEventListener(eva, listener, options);
+		if (element[keyLTE] || els_attribute_store.has(element))
+			return element;
+		if (!enviroment.M) return element;
+		const observer = new enviroment.M(function(mutations) {
+			for (const { attributeName, target } of mutations)
+				target.dispatchEvent(
+					new CustomEvent(eva, { detail: [attributeName, target.getAttribute(attributeName)] })
 				);
 		});
-		return L(e.signal, () => o.disconnect()) && o.observe(n, { attributes: !0 }), n;
+		const c = onAbort(options.signal, () => observer.disconnect());
+		if (c) observer.observe(element, { attributes: true });
+		return element;
 	};
 };
 export {
-	R as assign,
-	U as assignAttribute,
-	J as chainableAppend,
-	K as classListDeclarative,
-	P as createElement,
-	pt as createElementNS,
-	wt as customElementRender,
-	nt as customElementWithDDE,
-	yt as dispatchEvent,
-	P as el,
-	pt as elNS,
-	Q as elementAttribute,
-	nt as lifecyclesToEvents,
-	rt as observedAttributes,
-	D as on,
-	dt as queue,
-	Z as registerReactivity,
-	O as scope,
-	lt as simulateSlots
+	assign,
+	assignAttribute,
+	chainableAppend,
+	classListDeclarative,
+	createElement,
+	createElementNS,
+	customElementRender,
+	lifecyclesToEvents as customElementWithDDE,
+	dispatchEvent,
+	createElement as el,
+	createElementNS as elNS,
+	elementAttribute,
+	lifecyclesToEvents,
+	observedAttributes2 as observedAttributes,
+	on,
+	queue,
+	registerReactivity,
+	scope,
+	simulateSlots
 };
diff --git a/dist/esm.min.d.ts b/dist/esm.min.d.ts
new file mode 100644
index 0000000..7a33885
--- /dev/null
+++ b/dist/esm.min.d.ts
@@ -0,0 +1,782 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export interface Signal<V, A> {
+	/** The current value of the signal */
+	get(): V;
+	/** Set new value of the signal */
+	set(value: V): V;
+	toJSON(): V;
+	valueOf(): V;
+}
+export type Action<V> = (this: {
+	value: V;
+	stopPropagation(): void;
+}, ...a: any[]) => typeof signal._ | void;
+//type SymbolSignal= Symbol;
+export type SymbolOnclear = symbol;
+export type Actions<V> = Record<string | SymbolOnclear, Action<V>>;
+export type OnListenerOptions = Pick<AddEventListenerOptions, "signal"> & {
+	first_time?: boolean;
+};
+export interface signal {
+	_: Symbol;
+	/**
+	 * Computations signal. This creates a signal which is computed from other signals.
+	 * */
+	<V extends () => any>(computation: V): Signal<ReturnType<V>, {}>;
+	/**
+	 * Simple example:
+	 * ```js
+	 * const hello= S("Hello Signal");
+	 * ```
+	 * …simple todo signal:
+	 * ```js
+	 * const todos= S([], {
+	 * 	add(v){ this.value.push(S(v)); },
+	 * 	remove(i){ this.value.splice(i, 1); },
+	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
+	 * });
+	 * ```
+	 * …computed signal:
+	 * ```js
+	 * const name= S("Jan");
+	 * const surname= S("Andrle");
+	 * const fullname= S(()=> name.get()+" "+surname.get());
+	 * ```
+	 * @param value Initial signal value. Or function computing value from other signals.
+	 * @param actions Use to define actions on the signal. Such as add item to the array.
+	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
+	 *		by `S.clear`.
+	 * */
+	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(signal: S, name: N, ...params: A[N] extends (...args: infer P) => any ? P : never): void;
+	clear(...signals: Signal<any, any>[]): void;
+	on<T>(signal: Signal<T, any>, onchange: (a: T) => void, options?: OnListenerOptions): void;
+	symbols: {
+		//signal: SymbolSignal;
+		onclear: SymbolOnclear;
+	};
+	/**
+	 * Reactive element, which is rendered based on the given signal.
+	 * ```js
+	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
+	 * S.el(listS, list=> list.map(li=> el("li", li)));
+	 * ```
+	 * */
+	el<S extends any>(signal: Signal<S, any>, el: (v: S) => Element | Element[] | DocumentFragment): DocumentFragment;
+	observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
+}
+declare const signal: signal;
+declare global {
+	type ddeSignal<T, A = {}> = Signal<T, A>;
+	type ddeAction<V> = Action<V>;
+	type ddeActions<V> = Actions<V>;
+}
+export type CustomElementTagNameMap = {
+	"#text": Text;
+	"#comment": Comment;
+};
+export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
+declare global {
+	type ddeComponentAttributes = Record<any, any> | undefined;
+	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any;
+	type ddeString = string | Signal<string, {}>;
+	type ddeStringable = ddeString | number | Signal<number, {}>;
+}
+export type PascalCase = `${Capitalize<string>}${string}`;
+export type AttrsModified = {
+	/**
+	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
+	 */
+	style: Partial<CSSStyleDeclaration> | ddeString | Partial<{
+		[K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], {}>;
+	}>;
+	/**
+	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
+	 * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
+	 * for others.
+	 */
+	classList: Record<string, -1 | 0 | 1 | boolean | Signal<-1 | 0 | 1 | boolean, {}>>;
+	/**
+	 * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
+	 * Values are converted to string (see {@link DOMStringMap}).
+	 *
+	 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
+	 * */
+	dataset: Record<string, ddeStringable>;
+	/**
+	 * Sets `aria-*` simiraly to `dataset`
+	 * */
+	ariaset: Record<string, ddeString>;
+} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString> & Record<`.${string}`, any>;
+export type _fromElsInterfaces<EL extends SupportedElement> = Omit<EL, keyof AttrsModified>;
+export type IsReadonly<T, K extends keyof T> = T extends {
+	readonly [P in K]: T[K];
+} ? true : false;
+/**
+ * Just element attributtes
+ *
+ * In most cases, you can use native propertie such as
+ * [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on
+ * (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
+ *
+ * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
+ * @private
+ */
+export type ElementAttributes<T extends SupportedElement> = Partial<{
+	[K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] extends ((...p: any[]) => any) ? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>) => Signal<ReturnType<_fromElsInterfaces<T>[K]>, {}>) : (IsReadonly<_fromElsInterfaces<T>, K> extends false ? _fromElsInterfaces<T>[K] | Signal<_fromElsInterfaces<T>[K], {}> : ddeStringable);
+} & AttrsModified> & Record<string, any>;
+export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El;
+export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El;
+export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT];
+export type ExtendedHTMLElementTagNameMap = HTMLElementTagNameMap & CustomElementTagNameMap;
+export namespace el {
+	/**
+	 * Creates a marker comment for elements
+	 *
+	 * @param attrs - Marker attributes
+	 * @param [is_open=false] - Whether the marker is open-ended
+	 * @returns Comment node marker
+	 */
+	export function mark(attrs: {
+		type: "component" | "reactive" | "later";
+		name?: string;
+		host?: "this" | "parentElement";
+	}, is_open?: boolean): Comment;
+}
+export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>, ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<A extends {
+	textContent: ddeStringable;
+}, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer<A>["textContent"], ...addons: ddeElementAddon<EL>[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement);
+export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(tag_name: TAG, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable, ...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[]): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement;
+export function el(tag_name?: "<>"): ddeDocumentFragment;
+export function el(tag_name: string, attrs?: ElementAttributes<HTMLElement> | ddeStringable, ...addons: ddeElementAddon<HTMLElement>[]): ddeHTMLElement;
+export function elNS(namespace: "http://www.w3.org/2000/svg"): <TAG extends keyof SVGElementTagNameMap & string, EL extends (TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement)>(tag_name: TAG, attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable, ...addons: ddeElementAddon<NoInfer<EL>>[]) => TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement;
+export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG extends keyof MathMLElementTagNameMap & string, EL extends (TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement)>(tag_name: TAG, attrs?: ddeStringable | Partial<{
+	[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
+}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
+export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
+export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
+/** Simulate slots for ddeComponents */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
+/**
+ * Simulate slots in Custom Elements without using `shadowRoot`.
+ * @param el Custom Element root element
+ * @param body Body of the custom element
+ * */
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
+declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void;
+export interface On {
+	/** Listens to the DOM event. See {@link Document.addEventListener} */
+	<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
+	<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+		string,
+		string
+	]>) => any, options?: AddEventListenerOptions): EE;
+}
+export const on: On;
+export type Scope = {
+	scope: Node | Function | Object;
+	host: ddeElementAddon<any>;
+	custom_element: false | HTMLElement;
+	prevent: boolean;
+};
+/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
+export const scope: {
+	current: Scope;
+	/** Stops all automatizations. E. g. signals used as attributes in current scope
+	 * registers removing these listeners (and clean signal if no other listeners are detected)
+	 * on `disconnected` event. */
+	preventDefault<T extends boolean>(prevent: T): T;
+	/**
+	 * This represents reference to the current host element — `scope.host()`.
+	 * It can be also used to register Addon(s) (functions to be called when component is initized)
+	 * — `scope.host(on.connected(console.log))`.
+	 * */
+	host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement;
+	state: Scope[];
+	/** Adds new child scope. All attributes are inherited by default. */
+	push(scope?: Partial<Scope>): ReturnType<Array<Scope>["push"]>;
+	/** Adds root scope as a child of the current scope. */
+	pushRoot(): ReturnType<Array<Scope>["push"]>;
+	/** Removes last/current child scope. */
+	pop(): ReturnType<Array<Scope>["pop"]>;
+};
+export function customElementRender<EL extends HTMLElement, P extends any = Record<string, string | Signal<string, {}>>>(target: ShadowRoot | EL, render: (props: P) => SupportedElement | DocumentFragment, props?: P | ((el: EL) => P)): EL;
+export function customElementWithDDE<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function lifecyclesToEvents<EL extends (new () => HTMLElement)>(custom_element: EL): EL;
+export function observedAttributes(custom_element: HTMLElement): Record<string, string>;
+/**
+ * This is used primarly for server side rendering. To be sure that all async operations
+ * are finished before the page is sent to the client.
+ * ```
+ *	// on component
+ *	function component(){
+ *		…
+ *		queue(fetch(...).then(...));
+ *	}
+ *
+ * // building the page
+ * async function build(){
+ *		const { component }= await import("./component.js");
+ *		document.body.append(el(component));
+ *		await queue();
+ *		retutn document.body.innerHTML;
+ *	}
+ * ```
+ * */
+export function queue(promise?: Promise<unknown>): Promise<unknown>;
+/* TypeScript MEH */
+declare global {
+	type ddeAppend<el> = (...nodes: (Node | string)[]) => el;
+	interface ddeDocumentFragment extends DocumentFragment {
+		append: ddeAppend<ddeDocumentFragment>;
+	}
+	interface ddeHTMLElement extends HTMLElement {
+		append: ddeAppend<ddeHTMLElement>;
+	}
+	interface ddeSVGElement extends SVGElement {
+		append: ddeAppend<ddeSVGElement>;
+	}
+	interface ddeMathMLElement extends MathMLElement {
+		append: ddeAppend<ddeMathMLElement>;
+	}
+	interface ddeHTMLElementTagNameMap {
+		"a": ddeHTMLAnchorElement;
+		"area": ddeHTMLAreaElement;
+		"audio": ddeHTMLAudioElement;
+		"base": ddeHTMLBaseElement;
+		"blockquote": ddeHTMLQuoteElement;
+		"body": ddeHTMLBodyElement;
+		"br": ddeHTMLBRElement;
+		"button": ddeHTMLButtonElement;
+		"canvas": ddeHTMLCanvasElement;
+		"caption": ddeHTMLTableCaptionElement;
+		"col": ddeHTMLTableColElement;
+		"colgroup": ddeHTMLTableColElement;
+		"data": ddeHTMLDataElement;
+		"datalist": ddeHTMLDataListElement;
+		"del": ddeHTMLModElement;
+		"details": ddeHTMLDetailsElement;
+		"dialog": ddeHTMLDialogElement;
+		"div": ddeHTMLDivElement;
+		"dl": ddeHTMLDListElement;
+		"embed": ddeHTMLEmbedElement;
+		"fieldset": ddeHTMLFieldSetElement;
+		"form": ddeHTMLFormElement;
+		"h1": ddeHTMLHeadingElement;
+		"h2": ddeHTMLHeadingElement;
+		"h3": ddeHTMLHeadingElement;
+		"h4": ddeHTMLHeadingElement;
+		"h5": ddeHTMLHeadingElement;
+		"h6": ddeHTMLHeadingElement;
+		"head": ddeHTMLHeadElement;
+		"hr": ddeHTMLHRElement;
+		"html": ddeHTMLHtmlElement;
+		"iframe": ddeHTMLIFrameElement;
+		"img": ddeHTMLImageElement;
+		"input": ddeHTMLInputElement;
+		"ins": ddeHTMLModElement;
+		"label": ddeHTMLLabelElement;
+		"legend": ddeHTMLLegendElement;
+		"li": ddeHTMLLIElement;
+		"link": ddeHTMLLinkElement;
+		"map": ddeHTMLMapElement;
+		"menu": ddeHTMLMenuElement;
+		"meta": ddeHTMLMetaElement;
+		"meter": ddeHTMLMeterElement;
+		"object": ddeHTMLObjectElement;
+		"ol": ddeHTMLOListElement;
+		"optgroup": ddeHTMLOptGroupElement;
+		"option": ddeHTMLOptionElement;
+		"output": ddeHTMLOutputElement;
+		"p": ddeHTMLParagraphElement;
+		"picture": ddeHTMLPictureElement;
+		"pre": ddeHTMLPreElement;
+		"progress": ddeHTMLProgressElement;
+		"q": ddeHTMLQuoteElement;
+		"script": ddeHTMLScriptElement;
+		"select": ddeHTMLSelectElement;
+		"slot": ddeHTMLSlotElement;
+		"source": ddeHTMLSourceElement;
+		"span": ddeHTMLSpanElement;
+		"style": ddeHTMLStyleElement;
+		"table": ddeHTMLTableElement;
+		"tbody": ddeHTMLTableSectionElement;
+		"td": ddeHTMLTableCellElement;
+		"template": ddeHTMLTemplateElement;
+		"textarea": ddeHTMLTextAreaElement;
+		"tfoot": ddeHTMLTableSectionElement;
+		"th": ddeHTMLTableCellElement;
+		"thead": ddeHTMLTableSectionElement;
+		"time": ddeHTMLTimeElement;
+		"title": ddeHTMLTitleElement;
+		"tr": ddeHTMLTableRowElement;
+		"track": ddeHTMLTrackElement;
+		"ul": ddeHTMLUListElement;
+		"video": ddeHTMLVideoElement;
+	}
+	interface ddeSVGElementTagNameMap {
+		"a": ddeSVGAElement;
+		"animate": ddeSVGAnimateElement;
+		"animateMotion": ddeSVGAnimateMotionElement;
+		"animateTransform": ddeSVGAnimateTransformElement;
+		"circle": ddeSVGCircleElement;
+		"clipPath": ddeSVGClipPathElement;
+		"defs": ddeSVGDefsElement;
+		"desc": ddeSVGDescElement;
+		"ellipse": ddeSVGEllipseElement;
+		"feBlend": ddeSVGFEBlendElement;
+		"feColorMatrix": ddeSVGFEColorMatrixElement;
+		"feComponentTransfer": ddeSVGFEComponentTransferElement;
+		"feComposite": ddeSVGFECompositeElement;
+		"feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
+		"feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
+		"feDisplacementMap": ddeSVGFEDisplacementMapElement;
+		"feDistantLight": ddeSVGFEDistantLightElement;
+		"feDropShadow": ddeSVGFEDropShadowElement;
+		"feFlood": ddeSVGFEFloodElement;
+		"feFuncA": ddeSVGFEFuncAElement;
+		"feFuncB": ddeSVGFEFuncBElement;
+		"feFuncG": ddeSVGFEFuncGElement;
+		"feFuncR": ddeSVGFEFuncRElement;
+		"feGaussianBlur": ddeSVGFEGaussianBlurElement;
+		"feImage": ddeSVGFEImageElement;
+		"feMerge": ddeSVGFEMergeElement;
+		"feMergeNode": ddeSVGFEMergeNodeElement;
+		"feMorphology": ddeSVGFEMorphologyElement;
+		"feOffset": ddeSVGFEOffsetElement;
+		"fePointLight": ddeSVGFEPointLightElement;
+		"feSpecularLighting": ddeSVGFESpecularLightingElement;
+		"feSpotLight": ddeSVGFESpotLightElement;
+		"feTile": ddeSVGFETileElement;
+		"feTurbulence": ddeSVGFETurbulenceElement;
+		"filter": ddeSVGFilterElement;
+		"foreignObject": ddeSVGForeignObjectElement;
+		"g": ddeSVGGElement;
+		"image": ddeSVGImageElement;
+		"line": ddeSVGLineElement;
+		"linearGradient": ddeSVGLinearGradientElement;
+		"marker": ddeSVGMarkerElement;
+		"mask": ddeSVGMaskElement;
+		"metadata": ddeSVGMetadataElement;
+		"mpath": ddeSVGMPathElement;
+		"path": ddeSVGPathElement;
+		"pattern": ddeSVGPatternElement;
+		"polygon": ddeSVGPolygonElement;
+		"polyline": ddeSVGPolylineElement;
+		"radialGradient": ddeSVGRadialGradientElement;
+		"rect": ddeSVGRectElement;
+		"script": ddeSVGScriptElement;
+		"set": ddeSVGSetElement;
+		"stop": ddeSVGStopElement;
+		"style": ddeSVGStyleElement;
+		"svg": ddeSVGSVGElement;
+		"switch": ddeSVGSwitchElement;
+		"symbol": ddeSVGSymbolElement;
+		"text": ddeSVGTextElement;
+		"textPath": ddeSVGTextPathElement;
+		"title": ddeSVGTitleElement;
+		"tspan": ddeSVGTSpanElement;
+		"use": ddeSVGUseElement;
+		"view": ddeSVGViewElement;
+	}
+}
+// editorconfig-checker-disable
+export interface ddeHTMLAnchorElement extends HTMLAnchorElement {
+	append: ddeAppend<ddeHTMLAnchorElement>;
+}
+export interface ddeHTMLAreaElement extends HTMLAreaElement {
+	append: ddeAppend<ddeHTMLAreaElement>;
+}
+export interface ddeHTMLAudioElement extends HTMLAudioElement {
+	append: ddeAppend<ddeHTMLAudioElement>;
+}
+export interface ddeHTMLBaseElement extends HTMLBaseElement {
+	append: ddeAppend<ddeHTMLBaseElement>;
+}
+export interface ddeHTMLQuoteElement extends HTMLQuoteElement {
+	append: ddeAppend<ddeHTMLQuoteElement>;
+}
+export interface ddeHTMLBodyElement extends HTMLBodyElement {
+	append: ddeAppend<ddeHTMLBodyElement>;
+}
+export interface ddeHTMLBRElement extends HTMLBRElement {
+	append: ddeAppend<ddeHTMLBRElement>;
+}
+export interface ddeHTMLButtonElement extends HTMLButtonElement {
+	append: ddeAppend<ddeHTMLButtonElement>;
+}
+export interface ddeHTMLCanvasElement extends HTMLCanvasElement {
+	append: ddeAppend<ddeHTMLCanvasElement>;
+}
+export interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement {
+	append: ddeAppend<ddeHTMLTableCaptionElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLTableColElement extends HTMLTableColElement {
+	append: ddeAppend<ddeHTMLTableColElement>;
+}
+export interface ddeHTMLDataElement extends HTMLDataElement {
+	append: ddeAppend<ddeHTMLDataElement>;
+}
+export interface ddeHTMLDataListElement extends HTMLDataListElement {
+	append: ddeAppend<ddeHTMLDataListElement>;
+}
+export interface ddeHTMLModElement extends HTMLModElement {
+	append: ddeAppend<ddeHTMLModElement>;
+}
+export interface ddeHTMLDetailsElement extends HTMLDetailsElement {
+	append: ddeAppend<ddeHTMLDetailsElement>;
+}
+export interface ddeHTMLDialogElement extends HTMLDialogElement {
+	append: ddeAppend<ddeHTMLDialogElement>;
+}
+export interface ddeHTMLDivElement extends HTMLDivElement {
+	append: ddeAppend<ddeHTMLDivElement>;
+}
+export interface ddeHTMLDListElement extends HTMLDListElement {
+	append: ddeAppend<ddeHTMLDListElement>;
+}
+export interface ddeHTMLEmbedElement extends HTMLEmbedElement {
+	append: ddeAppend<ddeHTMLEmbedElement>;
+}
+export interface ddeHTMLFieldSetElement extends HTMLFieldSetElement {
+	append: ddeAppend<ddeHTMLFieldSetElement>;
+}
+export interface ddeHTMLFormElement extends HTMLFormElement {
+	append: ddeAppend<ddeHTMLFormElement>;
+}
+export interface ddeHTMLHeadingElement extends HTMLHeadingElement {
+	append: ddeAppend<ddeHTMLHeadingElement>;
+}
+export interface ddeHTMLHeadElement extends HTMLHeadElement {
+	append: ddeAppend<ddeHTMLHeadElement>;
+}
+export interface ddeHTMLHRElement extends HTMLHRElement {
+	append: ddeAppend<ddeHTMLHRElement>;
+}
+export interface ddeHTMLHtmlElement extends HTMLHtmlElement {
+	append: ddeAppend<ddeHTMLHtmlElement>;
+}
+export interface ddeHTMLIFrameElement extends HTMLIFrameElement {
+	append: ddeAppend<ddeHTMLIFrameElement>;
+}
+export interface ddeHTMLImageElement extends HTMLImageElement {
+	append: ddeAppend<ddeHTMLImageElement>;
+}
+export interface ddeHTMLInputElement extends HTMLInputElement {
+	append: ddeAppend<ddeHTMLInputElement>;
+}
+export interface ddeHTMLLabelElement extends HTMLLabelElement {
+	append: ddeAppend<ddeHTMLLabelElement>;
+}
+export interface ddeHTMLLegendElement extends HTMLLegendElement {
+	append: ddeAppend<ddeHTMLLegendElement>;
+}
+export interface ddeHTMLLIElement extends HTMLLIElement {
+	append: ddeAppend<ddeHTMLLIElement>;
+}
+export interface ddeHTMLLinkElement extends HTMLLinkElement {
+	append: ddeAppend<ddeHTMLLinkElement>;
+}
+export interface ddeHTMLMapElement extends HTMLMapElement {
+	append: ddeAppend<ddeHTMLMapElement>;
+}
+export interface ddeHTMLMenuElement extends HTMLMenuElement {
+	append: ddeAppend<ddeHTMLMenuElement>;
+}
+export interface ddeHTMLMetaElement extends HTMLMetaElement {
+	append: ddeAppend<ddeHTMLMetaElement>;
+}
+export interface ddeHTMLMeterElement extends HTMLMeterElement {
+	append: ddeAppend<ddeHTMLMeterElement>;
+}
+export interface ddeHTMLObjectElement extends HTMLObjectElement {
+	append: ddeAppend<ddeHTMLObjectElement>;
+}
+export interface ddeHTMLOListElement extends HTMLOListElement {
+	append: ddeAppend<ddeHTMLOListElement>;
+}
+export interface ddeHTMLOptGroupElement extends HTMLOptGroupElement {
+	append: ddeAppend<ddeHTMLOptGroupElement>;
+}
+export interface ddeHTMLOptionElement extends HTMLOptionElement {
+	append: ddeAppend<ddeHTMLOptionElement>;
+}
+export interface ddeHTMLOutputElement extends HTMLOutputElement {
+	append: ddeAppend<ddeHTMLOutputElement>;
+}
+export interface ddeHTMLParagraphElement extends HTMLParagraphElement {
+	append: ddeAppend<ddeHTMLParagraphElement>;
+}
+export interface ddeHTMLPictureElement extends HTMLPictureElement {
+	append: ddeAppend<ddeHTMLPictureElement>;
+}
+export interface ddeHTMLPreElement extends HTMLPreElement {
+	append: ddeAppend<ddeHTMLPreElement>;
+}
+export interface ddeHTMLProgressElement extends HTMLProgressElement {
+	append: ddeAppend<ddeHTMLProgressElement>;
+}
+export interface ddeHTMLScriptElement extends HTMLScriptElement {
+	append: ddeAppend<ddeHTMLScriptElement>;
+}
+export interface ddeHTMLSelectElement extends HTMLSelectElement {
+	append: ddeAppend<ddeHTMLSelectElement>;
+}
+export interface ddeHTMLSlotElement extends HTMLSlotElement {
+	append: ddeAppend<ddeHTMLSlotElement>;
+}
+export interface ddeHTMLSourceElement extends HTMLSourceElement {
+	append: ddeAppend<ddeHTMLSourceElement>;
+}
+export interface ddeHTMLSpanElement extends HTMLSpanElement {
+	append: ddeAppend<ddeHTMLSpanElement>;
+}
+export interface ddeHTMLStyleElement extends HTMLStyleElement {
+	append: ddeAppend<ddeHTMLStyleElement>;
+}
+export interface ddeHTMLTableElement extends HTMLTableElement {
+	append: ddeAppend<ddeHTMLTableElement>;
+}
+export interface ddeHTMLTableSectionElement extends HTMLTableSectionElement {
+	append: ddeAppend<ddeHTMLTableSectionElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTemplateElement extends HTMLTemplateElement {
+	append: ddeAppend<ddeHTMLTemplateElement>;
+}
+export interface ddeHTMLTextAreaElement extends HTMLTextAreaElement {
+	append: ddeAppend<ddeHTMLTextAreaElement>;
+}
+export interface ddeHTMLTableCellElement extends HTMLTableCellElement {
+	append: ddeAppend<ddeHTMLTableCellElement>;
+}
+export interface ddeHTMLTimeElement extends HTMLTimeElement {
+	append: ddeAppend<ddeHTMLTimeElement>;
+}
+export interface ddeHTMLTitleElement extends HTMLTitleElement {
+	append: ddeAppend<ddeHTMLTitleElement>;
+}
+export interface ddeHTMLTableRowElement extends HTMLTableRowElement {
+	append: ddeAppend<ddeHTMLTableRowElement>;
+}
+export interface ddeHTMLTrackElement extends HTMLTrackElement {
+	append: ddeAppend<ddeHTMLTrackElement>;
+}
+export interface ddeHTMLUListElement extends HTMLUListElement {
+	append: ddeAppend<ddeHTMLUListElement>;
+}
+export interface ddeHTMLVideoElement extends HTMLVideoElement {
+	append: ddeAppend<ddeHTMLVideoElement>;
+}
+export interface ddeSVGAElement extends SVGAElement {
+	append: ddeAppend<ddeSVGAElement>;
+}
+export interface ddeSVGAnimateElement extends SVGAnimateElement {
+	append: ddeAppend<ddeSVGAnimateElement>;
+}
+export interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement {
+	append: ddeAppend<ddeSVGAnimateMotionElement>;
+}
+export interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement {
+	append: ddeAppend<ddeSVGAnimateTransformElement>;
+}
+export interface ddeSVGCircleElement extends SVGCircleElement {
+	append: ddeAppend<ddeSVGCircleElement>;
+}
+export interface ddeSVGClipPathElement extends SVGClipPathElement {
+	append: ddeAppend<ddeSVGClipPathElement>;
+}
+export interface ddeSVGDefsElement extends SVGDefsElement {
+	append: ddeAppend<ddeSVGDefsElement>;
+}
+export interface ddeSVGDescElement extends SVGDescElement {
+	append: ddeAppend<ddeSVGDescElement>;
+}
+export interface ddeSVGEllipseElement extends SVGEllipseElement {
+	append: ddeAppend<ddeSVGEllipseElement>;
+}
+export interface ddeSVGFEBlendElement extends SVGFEBlendElement {
+	append: ddeAppend<ddeSVGFEBlendElement>;
+}
+export interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement {
+	append: ddeAppend<ddeSVGFEColorMatrixElement>;
+}
+export interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement {
+	append: ddeAppend<ddeSVGFEComponentTransferElement>;
+}
+export interface ddeSVGFECompositeElement extends SVGFECompositeElement {
+	append: ddeAppend<ddeSVGFECompositeElement>;
+}
+export interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement {
+	append: ddeAppend<ddeSVGFEConvolveMatrixElement>;
+}
+export interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement {
+	append: ddeAppend<ddeSVGFEDiffuseLightingElement>;
+}
+export interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement {
+	append: ddeAppend<ddeSVGFEDisplacementMapElement>;
+}
+export interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement {
+	append: ddeAppend<ddeSVGFEDistantLightElement>;
+}
+export interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement {
+	append: ddeAppend<ddeSVGFEDropShadowElement>;
+}
+export interface ddeSVGFEFloodElement extends SVGFEFloodElement {
+	append: ddeAppend<ddeSVGFEFloodElement>;
+}
+export interface ddeSVGFEFuncAElement extends SVGFEFuncAElement {
+	append: ddeAppend<ddeSVGFEFuncAElement>;
+}
+export interface ddeSVGFEFuncBElement extends SVGFEFuncBElement {
+	append: ddeAppend<ddeSVGFEFuncBElement>;
+}
+export interface ddeSVGFEFuncGElement extends SVGFEFuncGElement {
+	append: ddeAppend<ddeSVGFEFuncGElement>;
+}
+export interface ddeSVGFEFuncRElement extends SVGFEFuncRElement {
+	append: ddeAppend<ddeSVGFEFuncRElement>;
+}
+export interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement {
+	append: ddeAppend<ddeSVGFEGaussianBlurElement>;
+}
+export interface ddeSVGFEImageElement extends SVGFEImageElement {
+	append: ddeAppend<ddeSVGFEImageElement>;
+}
+export interface ddeSVGFEMergeElement extends SVGFEMergeElement {
+	append: ddeAppend<ddeSVGFEMergeElement>;
+}
+export interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement {
+	append: ddeAppend<ddeSVGFEMergeNodeElement>;
+}
+export interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement {
+	append: ddeAppend<ddeSVGFEMorphologyElement>;
+}
+export interface ddeSVGFEOffsetElement extends SVGFEOffsetElement {
+	append: ddeAppend<ddeSVGFEOffsetElement>;
+}
+export interface ddeSVGFEPointLightElement extends SVGFEPointLightElement {
+	append: ddeAppend<ddeSVGFEPointLightElement>;
+}
+export interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement {
+	append: ddeAppend<ddeSVGFESpecularLightingElement>;
+}
+export interface ddeSVGFESpotLightElement extends SVGFESpotLightElement {
+	append: ddeAppend<ddeSVGFESpotLightElement>;
+}
+export interface ddeSVGFETileElement extends SVGFETileElement {
+	append: ddeAppend<ddeSVGFETileElement>;
+}
+export interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement {
+	append: ddeAppend<ddeSVGFETurbulenceElement>;
+}
+export interface ddeSVGFilterElement extends SVGFilterElement {
+	append: ddeAppend<ddeSVGFilterElement>;
+}
+export interface ddeSVGForeignObjectElement extends SVGForeignObjectElement {
+	append: ddeAppend<ddeSVGForeignObjectElement>;
+}
+export interface ddeSVGGElement extends SVGGElement {
+	append: ddeAppend<ddeSVGGElement>;
+}
+export interface ddeSVGImageElement extends SVGImageElement {
+	append: ddeAppend<ddeSVGImageElement>;
+}
+export interface ddeSVGLineElement extends SVGLineElement {
+	append: ddeAppend<ddeSVGLineElement>;
+}
+export interface ddeSVGLinearGradientElement extends SVGLinearGradientElement {
+	append: ddeAppend<ddeSVGLinearGradientElement>;
+}
+export interface ddeSVGMarkerElement extends SVGMarkerElement {
+	append: ddeAppend<ddeSVGMarkerElement>;
+}
+export interface ddeSVGMaskElement extends SVGMaskElement {
+	append: ddeAppend<ddeSVGMaskElement>;
+}
+export interface ddeSVGMetadataElement extends SVGMetadataElement {
+	append: ddeAppend<ddeSVGMetadataElement>;
+}
+export interface ddeSVGMPathElement extends SVGMPathElement {
+	append: ddeAppend<ddeSVGMPathElement>;
+}
+export interface ddeSVGPathElement extends SVGPathElement {
+	append: ddeAppend<ddeSVGPathElement>;
+}
+export interface ddeSVGPatternElement extends SVGPatternElement {
+	append: ddeAppend<ddeSVGPatternElement>;
+}
+export interface ddeSVGPolygonElement extends SVGPolygonElement {
+	append: ddeAppend<ddeSVGPolygonElement>;
+}
+export interface ddeSVGPolylineElement extends SVGPolylineElement {
+	append: ddeAppend<ddeSVGPolylineElement>;
+}
+export interface ddeSVGRadialGradientElement extends SVGRadialGradientElement {
+	append: ddeAppend<ddeSVGRadialGradientElement>;
+}
+export interface ddeSVGRectElement extends SVGRectElement {
+	append: ddeAppend<ddeSVGRectElement>;
+}
+export interface ddeSVGScriptElement extends SVGScriptElement {
+	append: ddeAppend<ddeSVGScriptElement>;
+}
+export interface ddeSVGSetElement extends SVGSetElement {
+	append: ddeAppend<ddeSVGSetElement>;
+}
+export interface ddeSVGStopElement extends SVGStopElement {
+	append: ddeAppend<ddeSVGStopElement>;
+}
+export interface ddeSVGStyleElement extends SVGStyleElement {
+	append: ddeAppend<ddeSVGStyleElement>;
+}
+export interface ddeSVGSVGElement extends SVGSVGElement {
+	append: ddeAppend<ddeSVGSVGElement>;
+}
+export interface ddeSVGSwitchElement extends SVGSwitchElement {
+	append: ddeAppend<ddeSVGSwitchElement>;
+}
+export interface ddeSVGSymbolElement extends SVGSymbolElement {
+	append: ddeAppend<ddeSVGSymbolElement>;
+}
+export interface ddeSVGTextElement extends SVGTextElement {
+	append: ddeAppend<ddeSVGTextElement>;
+}
+export interface ddeSVGTextPathElement extends SVGTextPathElement {
+	append: ddeAppend<ddeSVGTextPathElement>;
+}
+export interface ddeSVGTitleElement extends SVGTitleElement {
+	append: ddeAppend<ddeSVGTitleElement>;
+}
+export interface ddeSVGTSpanElement extends SVGTSpanElement {
+	append: ddeAppend<ddeSVGTSpanElement>;
+}
+export interface ddeSVGUseElement extends SVGUseElement {
+	append: ddeAppend<ddeSVGUseElement>;
+}
+export interface ddeSVGViewElement extends SVGViewElement {
+	append: ddeAppend<ddeSVGViewElement>;
+}
+
+export {
+	dispatchEvent$1 as dispatchEvent,
+	el as createElement,
+	elNS as createElementNS,
+};
+
+export {};
diff --git a/dist/esm.min.js b/dist/esm.min.js
new file mode 100644
index 0000000..c4a75a9
--- /dev/null
+++ b/dist/esm.min.js
@@ -0,0 +1 @@
+function w(t){return typeof t>"u"}function b(t,e){return t instanceof e}function F(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function v(...t){return Object.assign(...t)}function R(t,e){if(!t||!b(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function I(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[J(o)]=e(t,o),r},{})}function J(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var O={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function K(t,e=!0){return e?v(O,t):(Object.setPrototypeOf(t,O),t)}function T(t){return F(t,O)&&t!==O?t:O}var a={setDeleteAttr:Q,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function Q(t,e,n){if(Reflect.set(t,e,n),!!w(n)){if(Reflect.deleteProperty(t,e),b(t,a.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var A="__dde_lifecyclesToEvents",m="dde:connected",_="dde:disconnected",D="dde:attributeChanged";function gt(t){return a.q(t)}var x=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],S={get current(){return x[x.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...x]},push(t={}){return x.push(v({},this.current,{prevent:!1},t))},pushRoot(){return x.push(x[0])},pop(){if(x.length!==1)return x.pop()}};function $(...t){return this.appendOriginal(...t),this}function X(t){return t.append===$||(t.appendOriginal=t.append,t.append=$),t}var P;function k(t,e,...n){let r=T(this),o=0,c,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let f=(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(E=>E(d)),void 0):d;S.push({scope:t,host:f}),c=t(e||void 0);let p=b(c,a.F);if(c.nodeName==="#comment")break;let g=k.mark({type:"component",name:t.name,host:p?"this":"parentElement"});c.prepend(g),p&&(d=g);break}case t==="#text":c=N.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=N.call(this,a.D.createDocumentFragment(),e);break;case!!P:c=N.call(this,a.D.createElementNS(P,t),e);break;case!c:c=N.call(this,a.D.createElement(t),e)}return X(c),d||(d=c),n.forEach(f=>f(d)),o&&S.pop(),o=2,c}k.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);return e&&(r.end=a.D.createComment("</dde:mark>")),r};function vt(t){let e=this;return function(...r){P=t;let o=k.call(e,...r);return P=void 0,o}}function mt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,d,f){if(f[0]===e)return c.apply(t,f);for(let p of f){let g=(p.slot||"")+n;try{tt(p,"remove","slot")}catch{}let l=o[g];if(!l)return;l.name.startsWith(r)||(l.childNodes.forEach(E=>E.remove()),l.name=r+g),l.append(p)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var M=new WeakMap,{setDeleteAttr:U}=a;function N(t,...e){if(!e.length)return t;M.set(t,B(t,this));for(let[n,r]of Object.entries(v({},...e)))z.call(this,t,n,r);return M.delete(t),t}function z(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(f,p)=>z.call(c,t,f,p));let[d]=e;if(d==="=")return r(e.slice(1),n);if(d===".")return H(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return U(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return j(o,e,t,n,H.bind(null,t[e]));case"ariaset":return j(o,e,t,n,(f,p)=>r("aria-"+f,p));case"classList":return Y.call(c,t,n)}return et(t,e)?U(t,e,n):r(e,n)}function B(t,e){if(M.has(t))return M.get(t);let r=(b(t,a.S)?rt:nt).bind(null,t,"Attribute"),o=T(e);return{setRemoveAttr:r,s:o}}function Y(t,e){let n=T(this);return j(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function tt(t,e,n,r){return b(t,a.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function et(t,e){if(!(e in t))return!1;let n=Z(t,e);return!w(n.set)}function Z(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||Z(t,e)}function j(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([f,p]){f&&(f=new c(f),f.target=e,p=t.processReactiveAttribute(n,f,p,o),o(f,p))})}function nt(t,e,n,r){return t[(w(r)?"remove":"set")+e](n,r)}function rt(t,e,n,r,o=null){return t[(w(r)?"remove":"set")+e+"NS"](o,n,r)}function H(t,e,n){if(Reflect.set(t,e,n),!!w(n))return Reflect.deleteProperty(t,e)}var C=a.M?ot():new Proxy({},{get(){return()=>{}}});function ot(){let t=new Map,e=!1,n=s=>function(u){for(let i of u)if(i.type==="childList"){if(l(i.addedNodes,!0)){s();continue}E(i.removedNodes,!0)&&s()}},r=new a.M(n(f));return{observe(s){let u=new a.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){d();let i=c(s);i.connected.has(u)||(i.connected.add(u),i.length_c+=1)},offConnected(s,u){if(!t.has(s))return;let i=t.get(s);i.connected.has(u)&&(i.connected.delete(u),i.length_c-=1,o(s,i))},onDisconnected(s,u){d();let i=c(s);i.disconnected.has(u)||(i.disconnected.add(u),i.length_d+=1)},offDisconnected(s,u){if(!t.has(s))return;let i=t.get(s);i.disconnected.delete(u),i.length_d-=1,o(s,i)}};function o(s,u){u.length_c||u.length_d||(t.delete(s),f())}function c(s){if(t.has(s))return t.get(s);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,u),u}function d(){e||(e=!0,r.observe(a.D.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function g(s){t.size>30&&await p();let u=[];if(!b(s,Node))return u;for(let i of t.keys())i===s||!b(i,Node)||s.contains(i)&&u.push(i);return u}function l(s,u){let i=!1;for(let h of s){if(u&&g(h).then(l),!t.has(h))continue;let y=t.get(h);y.length_c&&(h.dispatchEvent(new Event(m)),y.connected=new WeakSet,y.length_c=0,y.length_d||t.delete(h),i=!0)}return i}function E(s,u){let i=!1;for(let h of s)u&&g(h).then(E),!(!t.has(h)||!t.get(h).length_d)&&((globalThis.queueMicrotask||setTimeout)(V(h)),i=!0);return i}function V(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(_)),t.delete(s))}}}function Ot(t,e,n=st){let r=t.host||t;S.push({scope:r,host:(...d)=>d.length?d.forEach(f=>f(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[A];o||ct(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(m)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(_,C.observe(t),{once:!0}),S.pop(),t.append(c)}function ct(t){return W(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(m))}),W(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(_)))}),W(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(D,{detail:[o,c]})),e.apply(n,r)}),t.prototype[A]=!0,t}function W(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function st(t){return I(t,(e,n)=>e.getAttribute(n))}function Tt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let d=c.length?new CustomEvent(t,v({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(d)}}function L(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var G=t=>v({},typeof t=="object"?t:null,{once:!0});L.connected=function(t,e){return e=G(e),function(r){return r.addEventListener(m,t,e),r[A]?r:r.isConnected?(r.dispatchEvent(new Event(m)),r):(R(e.signal,()=>C.offConnected(r,t))&&C.onConnected(r,t),r)}};L.disconnected=function(t,e){return e=G(e),function(r){return r.addEventListener(_,t,e),r[A]||R(e.signal,()=>C.offDisconnected(r,t))&&C.onDisconnected(r,t),r}};var q=new WeakMap;L.disconnectedAsAbort=function(t){if(q.has(t))return q.get(t);let e=new AbortController;return q.set(t,e),t(L.disconnected(()=>e.abort())),e.signal};var it=new WeakSet;L.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(D,t,e),r[A]||it.has(r)||!a.M)return r;let o=new a.M(function(d){for(let{attributeName:f,target:p}of d)p.dispatchEvent(new CustomEvent(D,{detail:[f,p.getAttribute(f)]}))});return R(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}};export{N as assign,z as assignAttribute,X as chainableAppend,Y as classListDeclarative,k as createElement,vt as createElementNS,Ot as customElementRender,ct as customElementWithDDE,Tt as dispatchEvent,k as el,vt as elNS,tt as elementAttribute,ct as lifecyclesToEvents,st as observedAttributes,L as on,gt as queue,K as registerReactivity,S as scope,mt as simulateSlots};
diff --git a/docs/assets/favicon.svg b/docs/assets/favicon.svg
new file mode 100644
index 0000000..0533f23
--- /dev/null
+++ b/docs/assets/favicon.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="64"
+   height="64"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="favicon.svg"
+   xml:space="preserve"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2" /><sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="9.3249707"
+     inkscape:cx="38.230683"
+     inkscape:cy="28.150223"
+     inkscape:window-width="1278"
+     inkscape:window-height="1023"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" /><rect
+     x="0"
+     y="0"
+     width="64"
+     height="64"
+     rx="10"
+     fill="#2b2b2b"
+     id="rect1" /><g
+     transform="matrix(0.98009485,0,0,1.1964871,0.58334513,-7.2134367)"
+     id="g2"
+     style="stroke:#666666"><g
+       id="g3"
+       transform="matrix(1.0027126,0,0,0.88864615,3.8540039,4.3371297)"
+       style="stroke:#666666"><path
+         d="M 8.880742,11.550781 2.9817709,32 8.880742,52.449219"
+         stroke="#ff5252"
+         stroke-width="4.25375"
+         fill="none"
+         id="path1"
+         style="stroke:#666666" /><path
+         d="M 47.330923,11.568743 53.261141,32 47.330923,52.431257"
+         stroke="#ff5252"
+         stroke-width="4.26309"
+         fill="none"
+         id="path2"
+         style="stroke:#666666" /></g></g><path
+     d="m 11.726038,32.656946 q 0,-2.685867 0.823088,-4.721927 0.823088,-2.036061 2.166022,-3.404987 1.342933,-1.360261 3.07575,-2.053387 1.732818,-0.693128 3.552275,-0.693128 4.505325,0 6.844629,2.659875 2.339303,2.668539 2.339303,7.780349 0,0.519846 -0.01733,1.083011 -0.02599,0.563166 -0.06931,0.90973 H 17.227733 q 0,1.992739 1.646176,3.145062 1.646176,1.14366 4.245402,1.14366 1.602856,0 3.058423,-0.346564 1.446902,-0.346563 2.443272,-0.693127 l 0.736447,4.548646 q -1.386253,0.476525 -2.945789,0.797097 -1.559536,0.329235 -3.508954,0.329235 -2.599226,0 -4.652615,-0.675799 -2.062053,-0.667135 -3.508955,-1.984075 -1.455566,-1.325605 -2.235335,-3.275025 -0.779767,-1.94942 -0.779767,-4.548646 m 13.645936,-2.1227 q 0,-0.823088 -0.216602,-1.585528 -0.216602,-0.753776 -0.693127,-1.360263 -0.476525,-0.606485 -1.212973,-0.979042 -0.736447,-0.363891 -1.819457,-0.363891 -1.039691,0 -1.793467,0.346563 -0.762439,0.346564 -1.264955,0.95305 -0.493854,0.606485 -0.771105,1.386253 -0.285915,0.77977 -0.372555,1.602856 z m 26.901988,11.263311 q -0.129961,0.08664 -0.589158,0.303244 -0.450533,0.216602 -1.18698,0.459196 -0.736448,0.23393 -1.793466,0.407211 -1.065682,0.173282 -2.408616,0.173282 -3.682236,0 -5.371734,-2.192014 -1.689496,-2.18335 -1.689496,-6.385432 V 17.278193 H 33.602856 V 12.85951 h 10.960069 v 22.093419 q 0,2.079381 0.823089,2.815829 0.823088,0.736447 2.07938,0.736447 1.602856,0 2.685867,-0.433204 1.08301,-0.433205 1.429574,-0.563166 z"
+     id="path1-1"
+     style="fill:#ff5252;stroke-width:0.866409" /></svg>
diff --git a/docs/assets/logo.svg b/docs/assets/logo.svg
new file mode 100644
index 0000000..3b580d2
--- /dev/null
+++ b/docs/assets/logo.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="256"
+   height="256"
+   viewBox="0 0 256 256"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs4"><linearGradient
+       id="bgGradient"
+       x1="18"
+       y1="18"
+       x2="238"
+       y2="238"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.1363636,0,0,1.1363636,-17.454544,-17.454544)"><stop
+         offset="0"
+         stop-color="#3b3b3b"
+         id="stop1" /><stop
+         offset="1"
+         stop-color="#2b2b2b"
+         id="stop2" /></linearGradient><filter
+       id="glow"
+       x="-0.089563958"
+       y="-0.082460006"
+       width="1.1791279"
+       height="1.16492"><feGaussianBlur
+         stdDeviation="4"
+         result="blur"
+         id="feGaussianBlur4"
+         in="SourceGraphic" /><feComposite
+         in="SourceGraphic"
+         in2="blur"
+         operator="over"
+         id="feComposite4"
+         result="composite-0" /></filter></defs><rect
+     x="3"
+     y="3"
+     width="250"
+     height="250"
+     fill="url(#bgGradient)"
+     id="rect4"
+     style="fill:url(#bgGradient);stroke-width:1.13636"
+     ry="50" /><g
+     id="g2"
+     transform="translate(-3.5569814,-1.5165883)"><g
+       id="g1"
+       transform="matrix(1.5900346,0,0,1.5900346,-121.12651,-66.626074)"><g
+         opacity="0.25"
+         fill="#ffffff"
+         filter="url(#glow)"
+         id="g5"
+         transform="matrix(0.55415879,0,0,0.56134669,110.90661,51.505106)"><path
+           d="m 80,60 -30,68 30,68"
+           stroke="#ffffff"
+           stroke-width="8"
+           fill="none"
+           id="path4" /><path
+           d="m 176,60 30,68 -30,68"
+           stroke="#ffffff"
+           stroke-width="8"
+           fill="none"
+           id="path5" /></g><path
+         d="m 152.28246,124.58038 q 0,-4.06854 1.24681,-7.15275 1.24681,-3.08421 3.28107,-5.15785 2.03427,-2.06051 4.65913,-3.11046 2.62486,-1.04994 5.38096,-1.04994 6.82464,0 10.3682,4.02916 3.54356,4.04228 3.54356,11.78562 0,0.78746 -0.0263,1.64054 -0.0394,0.85308 -0.10499,1.37805 h -20.01456 q 0,3.01859 2.49362,4.76412 2.49362,1.73241 6.43091,1.73241 2.42799,0 4.63287,-0.52497 2.19176,-0.52497 3.70106,-1.04995 l 1.11556,6.89026 q -2.09989,0.72184 -4.46226,1.20744 -2.36237,0.49872 -5.31534,0.49872 -3.93729,0 -7.04775,-1.02369 -3.12359,-1.01058 -5.31534,-3.00547 -2.20489,-2.00802 -3.38607,-4.96098 -1.18114,-2.95297 -1.18114,-6.89026 m 20.67077,-3.21546 q 0,-1.2468 -0.3281,-2.40174 -0.32811,-1.14182 -1.04995,-2.06052 -0.72183,-0.9187 -1.8374,-1.48304 -1.11557,-0.55123 -2.7561,-0.55123 -1.57492,0 -2.71673,0.52498 -1.15494,0.52497 -1.91615,1.44367 -0.74809,0.9187 -1.16806,2.09989 -0.43311,1.18119 -0.56435,2.42799 z m 40.75096,17.06159 q -0.19687,0.13125 -0.89245,0.45936 -0.68247,0.3281 -1.79803,0.69558 -1.11557,0.35436 -2.71673,0.61685 -1.61429,0.26248 -3.64856,0.26248 -5.57783,0 -8.13707,-3.32045 -2.55923,-3.30732 -2.55923,-9.67261 v -26.18298 h -8.5308 v -6.693389 h 16.60224 v 33.466969 q 0,3.14983 1.24681,4.26539 1.24681,1.11557 3.14983,1.11557 2.428,0 4.06853,-0.65621 1.64054,-0.65622 2.16551,-0.85308 z"
+         id="path1-3"
+         style="fill:#ff5252;stroke-width:1.31243" /></g><path
+       d="m 27.256467,130.12148 q 0,6.64555 2.489444,10.86495 2.468347,4.21939 7.953563,4.21939 1.582274,0 2.953578,-0.10548 1.371303,-0.10549 2.848092,-0.31646 v -27.00413 q -1.476789,-0.84388 -3.375517,-1.4346 -1.898728,-0.56962 -4.008427,-0.56962 -4.641336,0 -6.751034,3.69197 -2.109699,3.69198 -2.109699,10.65398 m 29.219322,23.62862 q -3.586487,1.16034 -8.755248,1.89873 -5.168761,0.7384 -10.126552,0.7384 -11.603341,0 -17.55269,-6.85651 -5.970447,-6.85652 -5.970447,-18.77632 0,-12.13076 5.021083,-19.15606 4.999985,-7.0042 14.810082,-7.0042 2.637123,0 5.168761,0.56962 2.531638,0.59072 4.430366,1.64557 V 84.235539 l 12.974645,-2.215183 z m 23.523136,-23.62862 q 0,6.64555 2.489444,10.86495 2.468344,4.21939 7.953559,4.21939 1.582268,0 2.953578,-0.10548 1.3713,-0.10549 2.84809,-0.31646 v -27.00413 q -1.47679,-0.84388 -3.37552,-1.4346 -1.89873,-0.56962 -4.008423,-0.56962 -4.64133,0 -6.75103,3.69197 -2.109698,3.69198 -2.109698,10.65398 m 29.219315,23.62862 q -3.58648,1.16034 -8.75524,1.89873 -5.168774,0.7384 -10.126562,0.7384 -11.603332,0 -17.552681,-6.85651 -5.970446,-6.85652 -5.970446,-18.77632 0,-12.13076 4.999984,-19.15606 5.021082,-7.0042 14.831178,-7.0042 2.63712,0 5.168753,0.56962 2.53164,0.59072 4.43037,1.64557 V 84.235539 l 12.974644,-2.215183 z"
+       id="path1"
+       style="fill:#ff5252;stroke-width:2.1097;fill-opacity:0.66479665" /></g></svg>
diff --git a/docs/components/code.html.js b/docs/components/code.html.js
index 9e47c6a..181e04b 100644
--- a/docs/components/code.html.js
+++ b/docs/components/code.html.js
@@ -1,28 +1,179 @@
 import { registerClientFile, styles } from "../ssr.js";
 const host= "."+code.name;
 styles.css`
-${host}{
-	--shiki-color-text: #e9eded;
-	--shiki-color-background: #212121;
+/* Code block styling */
+${host} {
+	/* Theme for dark mode - matches Flems/CodeMirror dark theme */
+	--shiki-color-text: #f8f8f2;
+	--shiki-color-background: var(--code-bg);
 	--shiki-token-constant: #82b1ff;
 	--shiki-token-string: #c3e88d;
 	--shiki-token-comment: #546e7a;
 	--shiki-token-keyword: #c792ea;
-	--shiki-token-parameter: #AA0000;
+	--shiki-token-parameter: #fd971f;
 	--shiki-token-function: #80cbae;
 	--shiki-token-string-expression: #c3e88d;
-	--shiki-token-punctuation: var(--code);
-	--shiki-token-link: #EE0000;
+	--shiki-token-punctuation: #89ddff;
+	--shiki-token-link: #82aaff;
+	--shiki-token-variable: #f8f8f2;
+	--shiki-token-number: #f78c6c;
+	--shiki-token-boolean: #82b1ff;
+	--shiki-token-tag: #f07178;
+	--shiki-token-attribute: #ffcb6b;
+	--shiki-token-property: #82b1ff;
+	--shiki-token-operator: #89ddff;
+	--shiki-token-regex: #c3e88d;
+	--shiki-token-class: #ffcb6b;
+
+	/* Basic styling */
 	white-space: pre;
-	tab-size: 2; /* TODO: allow custom tab size?! */
-	overflow: scroll;
+	tab-size: 2;
+	overflow: auto;
+	border-radius: var(--border-radius);
+	font-family: var(--font-mono);
+	font-size: .85rem;
+	line-height: 1.5;
+	position: relative;
+	margin-block: 1rem;
+	max-width: 100%;
 }
-${host}[data-js=todo]{
+
+/* Light mode overrides to match GitHub-like theme */
+@media (prefers-color-scheme: light) {
+	${host} {
+		--shiki-color-text: #24292e;
+		--shiki-color-background: var(--code-bg);
+		--shiki-token-constant: #005cc5;
+		--shiki-token-string: #22863a;
+		--shiki-token-comment: #6a737d;
+		--shiki-token-keyword: #d73a49;
+		--shiki-token-parameter: #e36209;
+		--shiki-token-function: #6f42c1;
+		--shiki-token-string-expression: #22863a;
+		--shiki-token-punctuation: #24292e;
+		--shiki-token-link: #0366d6;
+		--shiki-token-variable: #24292e;
+		--shiki-token-number: #005cc5;
+		--shiki-token-boolean: #005cc5;
+		--shiki-token-tag: #22863a;
+		--shiki-token-attribute: #005cc5;
+		--shiki-token-property: #005cc5;
+		--shiki-token-operator: #d73a49;
+		--shiki-token-regex: #032f62;
+		--shiki-token-class: #6f42c1;
+	}
+}
+
+/* Support for theme toggles */
+html[data-theme="light"] ${host} {
+	--shiki-color-text: #24292e;
+	--shiki-color-background: var(--code-bg);
+	--shiki-token-constant: #005cc5;
+	--shiki-token-string: #22863a;
+	--shiki-token-comment: #6a737d;
+	--shiki-token-keyword: #d73a49;
+	--shiki-token-parameter: #e36209;
+	--shiki-token-function: #6f42c1;
+	--shiki-token-string-expression: #22863a;
+	--shiki-token-punctuation: #24292e;
+	--shiki-token-link: #0366d6;
+	--shiki-token-variable: #24292e;
+	--shiki-token-number: #005cc5;
+	--shiki-token-boolean: #005cc5;
+	--shiki-token-tag: #22863a;
+	--shiki-token-attribute: #005cc5;
+	--shiki-token-property: #005cc5;
+	--shiki-token-operator: #d73a49;
+	--shiki-token-regex: #032f62;
+	--shiki-token-class: #6f42c1;
+}
+
+html[data-theme="dark"] ${host} {
+	--shiki-color-text: #f8f8f2;
+	--shiki-color-background: var(--code-bg);
+	--shiki-token-constant: #82b1ff;
+	--shiki-token-string: #c3e88d;
+	--shiki-token-comment: #546e7a;
+	--shiki-token-keyword: #c792ea;
+	--shiki-token-parameter: #fd971f;
+	--shiki-token-function: #80cbae;
+	--shiki-token-string-expression: #c3e88d;
+	--shiki-token-punctuation: #89ddff;
+	--shiki-token-link: #82aaff;
+	--shiki-token-variable: #f8f8f2;
+	--shiki-token-number: #f78c6c;
+	--shiki-token-boolean: #82b1ff;
+	--shiki-token-tag: #f07178;
+	--shiki-token-attribute: #ffcb6b;
+	--shiki-token-property: #82b1ff;
+	--shiki-token-operator: #89ddff;
+	--shiki-token-regex: #c3e88d;
+	--shiki-token-class: #ffcb6b;
+}
+
+/* Code block with syntax highlighting waiting for JS */
+${host}[data-js=todo] {
 	border: 1px solid var(--border);
-	border-radius: var(--standard-border-radius);
-	margin-bottom: 1rem;
-	margin-top: 18.4px; /* to fix shift when → dataJS=done */
-	padding: 1rem 1.4rem;
+	border-radius: var(--border-radius);
+	padding: 1rem;
+	background-color: var(--code-bg);
+	position: relative;
+}
+
+/* Add a subtle loading indicator */
+${host}[data-js=todo]::before {
+	content: "Loading syntax highlighting...";
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	font-size: 0.75rem;
+	color: var(--text-light);
+	background-color: var(--bg);
+	padding: 0.25rem 0.5rem;
+	border-radius: var(--border-radius);
+	opacity: 0.7;
+}
+
+/* All code blocks should have consistent font and sizing */
+${host} code {
+	font-family: var(--font-mono);
+	font-size: inherit;
+	line-height: 1.5;
+	padding: 0;
+}
+${host} pre {
+	margin-block: 0;
+	font-size: inherit;
+}
+
+/* Ensure line numbers (if added) are styled appropriately */
+${host} .line-number {
+	user-select: none;
+	opacity: 0.5;
+	margin-right: 1rem;
+	min-width: 1.5rem;
+	display: inline-block;
+	text-align: right;
+}
+
+/* If there's a copy button, style it */
+${host} .copy-button {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	background-color: var(--bg);
+	color: var(--text);
+	border: 1px solid var(--border);
+	border-radius: var(--border-radius);
+	padding: 0.25rem 0.5rem;
+	font-size: 0.75rem;
+	cursor: pointer;
+	opacity: 0;
+	transition: opacity 0.2s ease;
+}
+
+${host}:hover .copy-button {
+	opacity: 1;
 }
 `;
 import { el } from "deka-dom-el";
@@ -43,8 +194,8 @@ export function code({ id, src, content, language= "js", className= host.slice(1
 		registerClientPart(page_id);
 		dataJS= "todo";
 	}
-	return el("div", { id, className, dataJS }).append(
-		el("code", { className: "language-"+language, textContent: content })
+	return el("div", { id, className, dataJS, tabIndex: 0 }).append(
+		el("code", { className: "language-"+language, textContent: content.trim() })
 	);
 }
 let is_registered= {};
@@ -52,12 +203,45 @@ let is_registered= {};
 function registerClientPart(page_id){
 	if(is_registered[page_id]) return;
 
+	// Add Shiki with a more reliable loading method
 	document.head.append(
-		el("script", { src: "https://cdn.jsdelivr.net/npm/shiki@0.9", defer: true }),
+		// Use a newer version of Shiki with better performance
+		el("script", { src: "https://cdn.jsdelivr.net/npm/shiki@0.14.3/dist/index.unpkg.iife.js", defer: true }),
+		// Make sure we can match Flems styling in dark/light mode
+		el("style", `
+			/* Ensure CodeMirror and Shiki use the same font */
+			.CodeMirror *, .shiki * {
+				font-family: var(--font-mono) !important;
+			}
+
+			/* Style Shiki's output to match our theme */
+			.shiki {
+				background-color: var(--shiki-color-background) !important;
+				color: var(--shiki-color-text) !important;
+				padding: 1rem;
+				border-radius: var(--border-radius);
+				tab-size: 2;
+			}
+
+			/* Ensure Shiki code tokens use our CSS variables */
+			.shiki .keyword { color: var(--shiki-token-keyword) !important; }
+			.shiki .constant { color: var(--shiki-token-constant) !important; }
+			.shiki .string { color: var(--shiki-token-string) !important; }
+			.shiki .comment { color: var(--shiki-token-comment) !important; }
+			.shiki .function { color: var(--shiki-token-function) !important; }
+			.shiki .operator, .shiki .punctuation { color: var(--shiki-token-punctuation) !important; }
+			.shiki .parameter { color: var(--shiki-token-parameter) !important; }
+			.shiki .variable { color: var(--shiki-token-variable) !important; }
+			.shiki .property { color: var(--shiki-token-property) !important; }
+		`),
 	);
+
 	registerClientFile(
 		new URL("./code.js.js", import.meta.url),
-		el("script", { type: "module" })
+		{
+			head: el("script", { type: "module" }),
+		}
 	);
+
 	is_registered[page_id]= true;
 }
diff --git a/docs/components/code.js.js b/docs/components/code.js.js
index 074b054..79caa1f 100644
--- a/docs/components/code.js.js
+++ b/docs/components/code.js.js
@@ -1,12 +1,61 @@
-const highlighter= await globalThis.shiki.getHighlighter({
-	theme: "css-variables",
-	langs: ["js", "ts", "css", "html", "shell"],
-});
-const codeBlocks= document.querySelectorAll('code[class*="language-"]');
+try {
+	// Initialize Shiki with our custom theme
+	const highlighter = await globalThis.shiki.getHighlighter({
+		theme: "css-variables",
+		langs: ["javascript", "typescript", "css", "html", "shell"],
+	});
 
-codeBlocks.forEach((block)=> {
-	const lang= block.className.replace("language-", "");
-	block.parentElement.dataset.js= "done";
-	const html= highlighter.codeToHtml(block.textContent, { lang });
-	block.innerHTML= html;
-});
+	// Find all code blocks that need highlighting
+	const codeBlocks = document.querySelectorAll('div[data-js="todo"] code[class*="language-"]');
+
+	// Process each code block
+	codeBlocks.forEach((block) => {
+		try {
+			// Get the language from the class
+			const langClass = block.className.match(/language-(\w+)/);
+
+			// Map the language to Shiki format
+			let lang = langClass ? langClass[1] : 'javascript';
+			if (lang === 'js') lang = 'javascript';
+			if (lang === 'ts') lang = 'typescript';
+
+			// Mark the container as processed
+			block.parentElement.dataset.js = "done";
+
+			// Highlight the code
+			const code = block.textContent;
+			const html = highlighter.codeToHtml(code, { lang });
+
+			// Insert the highlighted HTML
+			block.innerHTML = html;
+
+			// Add copy button functionality
+			const copyBtn = document.createElement('button');
+			copyBtn.className = 'copy-button';
+			copyBtn.textContent = 'Copy';
+			copyBtn.setAttribute('aria-label', 'Copy code to clipboard');
+			copyBtn.addEventListener('click', () => {
+				navigator.clipboard.writeText(code).then(() => {
+					copyBtn.textContent = 'Copied!';
+					setTimeout(() => {
+						copyBtn.textContent = 'Copy';
+					}, 2000);
+				});
+			});
+
+			// Add the copy button to the code block container
+			block.parentElement.appendChild(copyBtn);
+		} catch (err) {
+			console.error('Error highlighting code block:', err);
+			// Make sure we don't leave the block in a pending state
+			block.parentElement.dataset.js = "error";
+		}
+	});
+} catch (err) {
+	console.error('Failed to initialize Shiki:', err);
+
+	// Fallback: at least mark blocks as processed so they don't show loading indicator
+	document.querySelectorAll('div[data-js="todo"]').forEach(block => {
+		block.dataset.js = "error";
+	});
+}
diff --git a/docs/components/example.html.js b/docs/components/example.html.js
index 4eb8e6d..477cf0d 100644
--- a/docs/components/example.html.js
+++ b/docs/components/example.html.js
@@ -1,16 +1,100 @@
 import { styles } from "../ssr.js";
 const host= "."+example.name;
 styles.css`
-${host}{
+${host} {
 	grid-column: full-main;
-	width: 100%;
-	max-width: calc(9/5 * var(--body-max-width));
-	height: calc(3/5 * var(--body-max-width));
-	margin-inline: auto;
+	width: calc(100% - .75em);
+	height: calc(4/6 * var(--body-max-width));
+	border-radius: var(--border-radius);
+	box-shadow: var(--shadow);
+	border: 1px solid var(--border);
 }
+${host} .runtime {
+	background-color: whitesmoke;
+}
+
+/* CodeMirror styling to match our theme */
+.CodeMirror {
+	height: 100% !important;
+	font-family: var(--font-mono) !important;
+	font-size: .85rem !important;
+	line-height: 1.5 !important;
+}
+
+/* Dark mode styles for CodeMirror */
 .CodeMirror, .CodeMirror-gutters {
-	background: #212121 !important;
-	border: 1px solid white;
+	background: var(--code-bg) !important;
+	color: var(--text) !important;
+}
+
+/* Light mode adjustments for CodeMirror - using CSS variables */
+@media (prefers-color-scheme: light) {
+	/* Core syntax elements */
+	.cm-s-material .cm-keyword { color: var(--shiki-token-keyword, #d73a49) !important; }
+	.cm-s-material .cm-atom { color: var(--shiki-token-constant, #005cc5) !important; }
+	.cm-s-material .cm-number { color: var(--shiki-token-number, #005cc5) !important; }
+	.cm-s-material .cm-def { color: var(--shiki-token-function, #6f42c1) !important; }
+	.cm-s-material .cm-variable { color: var(--shiki-token-variable, #24292e) !important; }
+	.cm-s-material .cm-variable-2 { color: var(--shiki-token-variable, #24292e) !important; }
+	.cm-s-material .cm-variable-3 { color: var(--shiki-token-variable, #24292e) !important; }
+	.cm-s-material .cm-property { color: var(--shiki-token-property, #005cc5) !important; }
+	.cm-s-material .cm-operator { color: var(--shiki-token-operator, #d73a49) !important; }
+	.cm-s-material .cm-comment { color: var(--shiki-token-comment, #6a737d) !important; }
+	.cm-s-material .cm-string { color: var(--shiki-token-string, #22863a) !important; }
+	.cm-s-material .cm-string-2 { color: var(--shiki-token-string, #22863a) !important; }
+	.cm-s-material .cm-tag { color: var(--shiki-token-tag, #22863a) !important; }
+	.cm-s-material .cm-attribute { color: var(--shiki-token-attribute, #005cc5) !important; }
+	.cm-s-material .cm-bracket { color: var(--shiki-token-punctuation, #24292e) !important; }
+	.cm-s-material .cm-punctuation { color: var(--shiki-token-punctuation, #24292e) !important; }
+	.cm-s-material .cm-link { color: var(--shiki-token-link, #0366d6) !important; }
+	.cm-s-material .cm-error { color: #f44336 !important; }
+}
+
+/* Handle theme toggle */
+html[data-theme="light"] .CodeMirror {
+	background: #f5f7fa !important;
+}
+
+html[data-theme="light"] .CodeMirror-gutters {
+	background: #f5f7fa !important;
+	border-right: 1px solid #e5e7eb !important;
+}
+
+/* Also apply the same styles to CodeMirror with data-theme */
+html[data-theme="light"] .cm-s-material .cm-keyword { color: var(--shiki-token-keyword, #d73a49) !important; }
+html[data-theme="light"] .cm-s-material .cm-atom { color: var(--shiki-token-constant, #005cc5) !important; }
+html[data-theme="light"] .cm-s-material .cm-number { color: var(--shiki-token-number, #005cc5) !important; }
+html[data-theme="light"] .cm-s-material .cm-def { color: var(--shiki-token-function, #6f42c1) !important; }
+html[data-theme="light"] .cm-s-material .cm-variable { color: var(--shiki-token-variable, #24292e) !important; }
+html[data-theme="light"] .cm-s-material .cm-variable-2 { color: var(--shiki-token-variable, #24292e) !important; }
+html[data-theme="light"] .cm-s-material .cm-variable-3 { color: var(--shiki-token-variable, #24292e) !important; }
+html[data-theme="light"] .cm-s-material .cm-property { color: var(--shiki-token-property, #005cc5) !important; }
+html[data-theme="light"] .cm-s-material .cm-operator { color: var(--shiki-token-operator, #d73a49) !important; }
+html[data-theme="light"] .cm-s-material .cm-comment { color: var(--shiki-token-comment, #6a737d) !important; }
+html[data-theme="light"] .cm-s-material .cm-string { color: var(--shiki-token-string, #22863a) !important; }
+html[data-theme="light"] .cm-s-material .cm-string-2 { color: var(--shiki-token-string, #22863a) !important; }
+html[data-theme="light"] .cm-s-material .cm-tag { color: var(--shiki-token-tag, #22863a) !important; }
+html[data-theme="light"] .cm-s-material .cm-attribute { color: var(--shiki-token-attribute, #005cc5) !important; }
+html[data-theme="light"] .cm-s-material .cm-bracket { color: var(--shiki-token-punctuation, #24292e) !important; }
+html[data-theme="light"] .cm-s-material .cm-punctuation { color: var(--shiki-token-punctuation, #24292e) !important; }
+html[data-theme="light"] .cm-s-material .cm-link { color: var(--shiki-token-link, #0366d6) !important; }
+html[data-theme="light"] .cm-s-material .cm-error { color: #f44336 !important; }
+
+/* Mobile adjustments */
+@media (max-width: 767px) {
+	${host} {
+		height: 50vh;
+		max-width: 100%;
+	}
+	${host} main {
+		flex-grow: 1;
+		display: flex;
+		flex-direction: column;
+	}
+	${host} main > * {
+		width: 100%;
+		max-width: 100% !important;
+	}
 }
 `;
 
diff --git a/docs/components/examples/customElement/observedAttributes.js b/docs/components/examples/customElement/observedAttributes.js
index 3d2583c..44f902e 100644
--- a/docs/components/examples/customElement/observedAttributes.js
+++ b/docs/components/examples/customElement/observedAttributes.js
@@ -26,7 +26,7 @@ function ddeComponent({ attr }){
 		on.connected(e=> console.log(( /** @type {HTMLParagraphElement} */ (e.target)).outerHTML)),
 	);
 	return el().append(
-		el("p", S(()=> `Hello from Custom Element with attribute '${attr()}'`))
+		el("p", S(()=> `Hello from Custom Element with attribute '${attr.get()}'`))
 	);
 }
 customElementWithDDE(HTMLCustomElement);
diff --git a/docs/components/examples/debugging/consoleLog.js b/docs/components/examples/debugging/consoleLog.js
new file mode 100644
index 0000000..216e0b9
--- /dev/null
+++ b/docs/components/examples/debugging/consoleLog.js
@@ -0,0 +1,15 @@
+// Debugging a (derived) signal with `console.log`
+import { S } from "deka-dom-el/signals";
+const name= S("Alice");
+const greeting = S(() => {
+	// log derived signals
+	const log = "Hello, " + name.get();
+	console.log(log);
+	console.log(name.valueOf());
+	return log;
+});
+
+// log signals in general
+S.on(greeting, value => console.log("Greeting changed to:", value));
+
+name.set("Bob"); // Should trigger computation and listener`)
diff --git a/docs/components/examples/debugging/debouncing.js b/docs/components/examples/debugging/debouncing.js
new file mode 100644
index 0000000..ccbb618
--- /dev/null
+++ b/docs/components/examples/debugging/debouncing.js
@@ -0,0 +1,15 @@
+import { S } from "deka-dom-el/signals";
+// Debouncing signal updates
+function debounce(func, wait) {
+	let timeout;
+	return (...args)=> {
+		clearTimeout(timeout);
+		timeout= setTimeout(() => func(...args), wait);
+	};
+}
+
+const inputSignal= S("");
+const debouncedSet= debounce(value => inputSignal.set(value), 300);
+
+// In your input handler
+inputElement.addEventListener("input", e=> debouncedSet(e.target.value));
diff --git a/docs/components/examples/debugging/dom-reactive-mark.js b/docs/components/examples/debugging/dom-reactive-mark.js
new file mode 100644
index 0000000..3213984
--- /dev/null
+++ b/docs/components/examples/debugging/dom-reactive-mark.js
@@ -0,0 +1,4 @@
+// Example of reactive element marker
+<!--<dde:mark type=\"reactive\" source=\"...\">-->
+<!-- content that updates when signal changes -->
+<!--</dde:mark>-->
diff --git a/docs/components/examples/debugging/mutations.js b/docs/components/examples/debugging/mutations.js
new file mode 100644
index 0000000..c8fe1cc
--- /dev/null
+++ b/docs/components/examples/debugging/mutations.js
@@ -0,0 +1,15 @@
+import { S } from "deka-dom-el/signals";
+// Wrong - direct mutation doesn't trigger updates
+const todos1 = S([{ text: "Learn signals", completed: false }]);
+todos1.get().push({ text: "Debug signals", completed: false }); // Won't trigger updates!
+
+// Correct - using .set() with a new array
+todos1.set([...todos1.get(), { text: "Debug signals", completed: false }]);
+
+// Better - using actions
+const todos2 = S([], {
+	add(text) {
+		this.value.push({ text, completed: false });
+	}
+});
+S.action(todos2, "add", "Debug signals");
diff --git a/docs/components/examples/elements/dde-dom-create.js b/docs/components/examples/elements/dde-dom-create.js
new file mode 100644
index 0000000..b9edb55
--- /dev/null
+++ b/docs/components/examples/elements/dde-dom-create.js
@@ -0,0 +1,14 @@
+import { el } from "deka-dom-el";
+
+// Create element with properties
+const button = el("button", {
+	textContent: "Click me",
+	className: "primary",
+	disabled: true
+});
+
+// Shorter and more expressive
+// than the native approach
+
+// Add to DOM
+document.body.append(button);
\ No newline at end of file
diff --git a/docs/components/examples/elements/dde-dom-tree.js b/docs/components/examples/elements/dde-dom-tree.js
new file mode 100644
index 0000000..4cf01b0
--- /dev/null
+++ b/docs/components/examples/elements/dde-dom-tree.js
@@ -0,0 +1,11 @@
+import { el } from "deka-dom-el";
+
+// Chainable, natural nesting
+// append() returns parent element
+// making chains easy and intuitive
+document.body.append(
+	el("div").append(
+		el("h1", "Title"),
+		el("p", "Paragraph")
+	)
+);
diff --git a/docs/components/examples/elements/native-dom-create.js b/docs/components/examples/elements/native-dom-create.js
new file mode 100644
index 0000000..8b7affc
--- /dev/null
+++ b/docs/components/examples/elements/native-dom-create.js
@@ -0,0 +1,19 @@
+// Create element with properties
+const button = document.createElement('button');
+button.textContent = "Click me";
+button.className = "primary";
+button.disabled = true;
+
+// Or using Object.assign()
+const button2 = Object.assign(
+	document.createElement('button'),
+	{
+	textContent: "Click me",
+	className: "primary",
+	disabled: true
+	}
+);
+
+// Add to DOM
+document.body.appendChild(button);
+document.body.appendChild(button2);
\ No newline at end of file
diff --git a/docs/components/examples/elements/native-dom-tree.js b/docs/components/examples/elements/native-dom-tree.js
new file mode 100644
index 0000000..aad2e7b
--- /dev/null
+++ b/docs/components/examples/elements/native-dom-tree.js
@@ -0,0 +1,15 @@
+// Verbose, needs temp variables
+const div = document.createElement('div');
+const h1 = document.createElement('h1');
+h1.textContent = 'Title';
+div.appendChild(h1);
+
+const p = document.createElement('p');
+p.textContent = 'Paragraph';
+div.appendChild(p);
+
+// appendChild doesn't return parent
+// so chaining is not possible
+
+// Add to DOM
+document.body.appendChild(div);
\ No newline at end of file
diff --git a/docs/components/examples/events/append-event.js b/docs/components/examples/events/append-event.js
new file mode 100644
index 0000000..86aa442
--- /dev/null
+++ b/docs/components/examples/events/append-event.js
@@ -0,0 +1,8 @@
+import { el, on } from "deka-dom-el";
+
+// Third approach - append with on addon
+el("button", {
+	textContent: "click me"
+}).append(
+	on("click", (e) => console.log("Clicked!", e))
+);
\ No newline at end of file
diff --git a/docs/components/examples/events/attribute-event.js b/docs/components/examples/events/attribute-event.js
new file mode 100644
index 0000000..fb55ecb
--- /dev/null
+++ b/docs/components/examples/events/attribute-event.js
@@ -0,0 +1,7 @@
+import { el } from "deka-dom-el";
+
+// Using events with HTML attribute style
+el("button", {
+	textContent: "click me",
+	"=onclick": "console.log(event)"
+});
\ No newline at end of file
diff --git a/docs/components/examples/events/chain-event.js b/docs/components/examples/events/chain-event.js
new file mode 100644
index 0000000..471d981
--- /dev/null
+++ b/docs/components/examples/events/chain-event.js
@@ -0,0 +1,8 @@
+import { el, on } from "deka-dom-el";
+
+// Using events as addons - chainable approach
+el("button", {
+	textContent: "click me",
+},
+	on("click", (e) => console.log("Clicked!", e))
+);
\ No newline at end of file
diff --git a/docs/components/examples/events/native-event.js b/docs/components/examples/events/native-event.js
new file mode 100644
index 0000000..d7a68a8
--- /dev/null
+++ b/docs/components/examples/events/native-event.js
@@ -0,0 +1,2 @@
+// Standard DOM event listener approach
+element.addEventListener('click', callback, options);
\ No newline at end of file
diff --git a/docs/components/examples/events/property-event.js b/docs/components/examples/events/property-event.js
new file mode 100644
index 0000000..acfb229
--- /dev/null
+++ b/docs/components/examples/events/property-event.js
@@ -0,0 +1,7 @@
+import { el } from "deka-dom-el";
+
+// Using events with property assignment
+el("button", {
+	textContent: "click me",
+	onclick: console.log
+});
\ No newline at end of file
diff --git a/docs/components/examples/introducing/3ps-before.js b/docs/components/examples/introducing/3ps-before.js
new file mode 100644
index 0000000..babc75f
--- /dev/null
+++ b/docs/components/examples/introducing/3ps-before.js
@@ -0,0 +1,14 @@
+// pseudocode
+// Mixed concerns make code hard to maintain
+const button = document.querySelector('button');
+let count = 0;
+
+button.addEventListener('click', () => {
+	count++;
+	document.querySelector('p').textContent =
+	'Clicked ' + count + ' times';
+
+	if (count > 10) {
+	button.disabled = true;
+	}
+});
diff --git a/docs/components/examples/introducing/3ps.js b/docs/components/examples/introducing/3ps.js
index 75f62d0..d78ede6 100644
--- a/docs/components/examples/introducing/3ps.js
+++ b/docs/components/examples/introducing/3ps.js
@@ -1,6 +1,14 @@
-// pseudo code!
-const onchage=
-	event=>
-		console.log("Reacting to the:", event); // A
-input.addEventListener("change", onchange); // B
-input.dispatchEvent(new Event("change")); // C
+// pseudocode
+// 1. Create state
+const count = S(0);
+
+// 2. React to state changes
+S.on(count, value => {
+	updateUI(value);
+	if (value > 10) disableButton();
+});
+
+// 3. Update state on events
+button.addEventListener('click', () => {
+	count.set(count.get() + 1);
+});
diff --git a/docs/components/examples/introducing/helloWorld.js b/docs/components/examples/introducing/helloWorld.js
index 9aaa6bf..a13692d 100644
--- a/docs/components/examples/introducing/helloWorld.js
+++ b/docs/components/examples/introducing/helloWorld.js
@@ -1,19 +1,30 @@
-import { el } from "deka-dom-el";
+import { el, on } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
-const threePS= ({ emoji= "🚀" })=> {
-	const clicks= S(0); // A
-	return el().append(
-		el("p", S(()=>
-			"Hello World "+emoji.repeat(clicks()) // B
-		)),
-		el("button", {
-			type: "button",
-			onclick: ()=> clicks(clicks()+1), // C
-			textContent: "Fire",
-		})
-	);
-};
-document.body.append(
-	el(threePS, { emoji: "🎉" }),
-);
 
+// A HelloWorld component using the 3PS pattern
+function HelloWorld({ emoji = "🚀" }) {
+	// PART 1: Create reactive state
+	const clicks = S(0);
+
+	return el().append(
+	// PART 2: Bind state to UI elements
+	el("p", {
+		className: "greeting",
+		// This paragraph automatically updates when clicks changes
+		textContent: S(() => `Hello World ${emoji.repeat(clicks.get())}`)
+	}),
+
+	// PART 3: Update state in response to events
+	el("button", {
+		type: "button",
+		textContent: "Add emoji",
+		// When clicked, update the state
+		onclick: () => clicks.set(clicks.get() + 1)
+	})
+	);
+}
+
+// Use the component in your app
+document.body.append(
+	el(HelloWorld, { emoji: "🎉" })
+);
\ No newline at end of file
diff --git a/docs/components/examples/ireland-test/counter.js b/docs/components/examples/ireland-test/counter.js
new file mode 100644
index 0000000..9832883
--- /dev/null
+++ b/docs/components/examples/ireland-test/counter.js
@@ -0,0 +1,37 @@
+import { el } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+const className = "client-side-counter";
+document.body.append(
+	el("style").append(`
+.${className} {
+	border: 1px dashed #ccc;
+	padding: 1em;
+	margin: 1em;
+}
+		`.trim())
+);
+
+export function CounterStandard() {
+	// Create reactive state with a signal
+	const count = S(0);
+
+	// Create UI components that react to state changes
+	return el("div", { className }).append(
+		el("h4", "Client-Side Counter"),
+		el("div", {
+			// The textContent updates automatically when count changes
+			textContent: S(() => `Count: ${count.get()}`),
+		}),
+		el("div", { className: "controls" }).append(
+			el("button", {
+				onclick: () => count.set(count.get() - 1),
+				textContent: "-",
+			}),
+			el("button", {
+				onclick: () => count.set(count.get() + 1),
+				textContent: "+",
+			})
+		)
+	);
+}
diff --git a/docs/components/examples/scopes/custom-scope.js b/docs/components/examples/scopes/custom-scope.js
new file mode 100644
index 0000000..d1c74f8
--- /dev/null
+++ b/docs/components/examples/scopes/custom-scope.js
@@ -0,0 +1,14 @@
+import { scope } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+function customSignalLogic() {
+	// Create an isolated scope for a specific operation
+	scope.push(); // Start new scope
+
+	// These signals are in the new scope
+	const isolatedCount = S(0);
+	const isolatedDerived = S(() => isolatedCount.get() * 2);
+
+	// Clean up by returning to previous scope
+	scope.pop();
+}
diff --git a/docs/components/examples/scopes/declarative.js b/docs/components/examples/scopes/declarative.js
index e87c7a2..2cfa978 100644
--- a/docs/components/examples/scopes/declarative.js
+++ b/docs/components/examples/scopes/declarative.js
@@ -1,35 +1,26 @@
-/* PSEUDO-CODE!!! */
 import { el } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
-function component(){
-	/* prepare changeable data */
-	const dataA= S("data");
-	const dataB= S("data");
-	/* define data flow (can be asynchronous) */
-	fetchAPI().then(data_new=> dataA(data_new));
-	setTimeout(()=> dataB("DATA"));
-	/* declarative UI */
-	return el().append(
-		el("h1", {
-			textContent: "Example",
-			/* declarative attribute(s) */
-			classList: { declarative: dataB }
-		}),
-		el("ul").append(
-			/* declarative element(s) */
-			S.el(dataA, data=> data.map(d=> el("li", d)))
-		),
-		el("ul").append(
-			/* declarative component(s) */
-			S.el(dataA, data=> data.map(d=> el(subcomponent, d)))
-		)
+function Counter() {
+	// Define state
+	const count = S(0);
+
+	// Define behavior
+	const increment = () => count.set(count.get() + 1);
+
+	// Define data flow
+	setTimeout(increment, 1000);
+	// or fetchAPI().then(increment);
+
+	// Declarative UI (how to render data/`count`)
+	// …automatically updates when changes
+	return el("div").append(
+		// declarative element(s)
+		el("p", S(() => "Count: " + count.get())),
+		el("button", {
+			onclick: increment,
+			textContent: "Increment",
+			// declarative attribute(s)
+			disabled: S(() => count.get() >= 10)
+		})
 	);
 }
-function subcomponent({ id }){
-	/* prepare changeable data */
-	const textContent= S("…");
-	/* define data flow (can be asynchronous) */
-	fetchAPI(id).then(text=> textContent(text));
-	/* declarative UI */
-	return el("li", { textContent, dataId: id });
-}
diff --git a/docs/components/examples/scopes/imperative.js b/docs/components/examples/scopes/imperative.js
index 012514c..e994560 100644
--- a/docs/components/examples/scopes/imperative.js
+++ b/docs/components/examples/scopes/imperative.js
@@ -1,31 +1,25 @@
 /* PSEUDO-CODE!!! */
-import { el, on, scope } from "deka-dom-el";
-function component(){
-	const { host }= scope;
-	const ul= el("ul");
-	const ac= new AbortController();
-	fetchAPI({ signal: ac.signal }).then(data=> {
-		data.forEach(d=> ul.append(el("li", d)));
-	});
-	host(
-		/* element was remove before data fetched */
-		on.disconnected(()=> ac.abort())
+import { el, scope } from "deka-dom-el";
+function Counter() {
+	const { host } = scope;
+
+	let count = 0;
+	const counterText = el("p", "Count: 0");
+
+	// Manually update DOM element
+	const increment = () => {
+		count++;
+		counterText.textContent = "Count: " + count;
+		host().querySelector("button").disabled = count >= 10;
+	};
+	setTimeout(increment, 1000);
+	// or fetchAPI().then(increment);
+
+	return el("div").append(
+		counterText,
+		el("button", {
+			onclick: increment,
+			textContent: "Increment"
+		})
 	);
-	return ul;
-	/**
-	 * NEVER EVER!!
-	 * let data;
-	 * fetchAPI().then(d=> data= O(d));
-	 *
-	 * OR NEVER EVER!!
-	 * const ul= el("ul");
-	 * fetchAPI().then(d=> {
-	 *	const data= O("data");
-	 *	ul.append(el("li", data));
-	 * });
-	 *
-	 * // THE HOST IS PROBABLY DIFFERENT THAN
-	 * // YOU EXPECT AND OBSERVABLES MAY BE
-	 * // UNEXPECTEDLY REMOVED!!!
-	 * */
 }
diff --git a/docs/components/examples/scopes/mixed.js b/docs/components/examples/scopes/mixed.js
new file mode 100644
index 0000000..434db7e
--- /dev/null
+++ b/docs/components/examples/scopes/mixed.js
@@ -0,0 +1,36 @@
+/* PSEUDO-CODE!!! */
+import { el, scope } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+function Counter() {
+	const { host } = scope;
+
+	let count = S(0);
+	const counterText = el("p", "Count: 0");
+	S.on(count, c=> counterText.textContent= "Count: " + c);
+
+	// Manually update DOM element
+	const increment = () => {
+		count.set(count.get() + 1);
+		// NEVER EVER
+		// count = S(count.get() + 1);
+		// THE HOST IS PROBABLY DIFFERENT THAN
+		// YOU EXPECT AND SIGNAL MAY BE
+		// UNEXPECTEDLY REMOVED!!!
+		host().querySelector("button").disabled = count.get() >= 10;
+	};
+	setTimeout(()=> {
+		// ok, BUT consider extract to separate function
+		// see section below for more info
+		const ok= S(0);
+		S.on(ok, console.log);
+		setInterval(()=> ok.set(ok.get() + 1), 100);
+	}, 100);
+
+	return el("div").append(
+		counterText,
+		el("button", {
+			onclick: increment,
+			textContent: "Increment"
+		})
+	);
+}
diff --git a/docs/components/examples/scopes/with-scope.js b/docs/components/examples/scopes/with-scope.js
new file mode 100644
index 0000000..fbbe5c9
--- /dev/null
+++ b/docs/components/examples/scopes/with-scope.js
@@ -0,0 +1,45 @@
+import { el, scope } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+function CounterWithIsolatedTimer() {
+	const { host } = scope;
+
+	// Main component state
+	const count = S(0);
+
+	// Create a timer in an isolated scope
+	scope.isolate(() => {
+	// These subscriptions won't be tied to the component lifecycle
+	// They would continue to run even if the component was removed
+	const timer = S(0);
+
+	// Not recommended for real applications!
+	// Just demonstrating scope isolation
+	setInterval(() => {
+		timer.set(timer.get() + 1);
+		console.log(`Timer: ${timer.get()}`);
+	}, 1000);
+	});
+
+	// Normal component functionality within main scope
+	function increment() {
+	count.set(count.get() + 1);
+	}
+
+	return el("div").append(
+	el("p").append(
+		"Count: ",
+		el("#text", S(() => count.get()))
+	),
+	el("button", {
+		textContent: "Increment",
+		onclick: increment
+	}),
+	el("p", "An isolated timer runs in console")
+	);
+}
+
+// Usage
+document.body.append(
+	el(CounterWithIsolatedTimer)
+);
diff --git a/docs/components/examples/signals/actions-demo.js b/docs/components/examples/signals/actions-demo.js
index f21c9a4..82a2aea 100644
--- a/docs/components/examples/signals/actions-demo.js
+++ b/docs/components/examples/signals/actions-demo.js
@@ -15,4 +15,4 @@ setTimeout(
 	clearInterval,
 	10*interval,
 	setInterval(oninterval, interval)
-);
+);
\ No newline at end of file
diff --git a/docs/components/examples/signals/actions-todos.js b/docs/components/examples/signals/actions-todos.js
index 24d2cda..9a15932 100644
--- a/docs/components/examples/signals/actions-todos.js
+++ b/docs/components/examples/signals/actions-todos.js
@@ -22,9 +22,9 @@ const onsubmit= on("submit", function(event){
 			S.action(todos, "push", data.get("todo"));
 			break;
 		case "E"/*dit*/: {
-			const last= todos().at(-1);
+			const last= todos.get().at(-1);
 			if(!last) break;
-			last(data.get("todo"));
+			last.set(data.get("todo"));
 			break;
 		}
 		case "R"/*emove*/:
diff --git a/docs/components/examples/signals/computations-abort.js b/docs/components/examples/signals/computations-abort.js
index 9573973..fcc9c71 100644
--- a/docs/components/examples/signals/computations-abort.js
+++ b/docs/components/examples/signals/computations-abort.js
@@ -1,16 +1,16 @@
 import { S } from "deka-dom-el/signals";
 const signal= S(0);
 // computation pattern
-const double= S(()=> 2*signal());
+const double= S(()=> 2*signal.get());
 
 const ac= new AbortController();
 S.on(signal, v=> console.log("signal", v), { signal: ac.signal });
 S.on(double, v=> console.log("double", v), { signal: ac.signal });
 
-signal(signal()+1);
+signal.set(signal.get()+1);
 const interval= 5 * 1000;
-const id= setInterval(()=> signal(signal()+1), interval);
+const id= setInterval(()=> signal.set(signal.get()+1), interval);
 ac.signal.addEventListener("abort",
 	()=> setTimeout(()=> clearInterval(id), 2*interval));
 
-setTimeout(()=> ac.abort(), 3*interval)
+setTimeout(()=> ac.abort(), 3*interval)
\ No newline at end of file
diff --git a/docs/components/examples/signals/debugging-console.js b/docs/components/examples/signals/debugging-console.js
new file mode 100644
index 0000000..236cb4d
--- /dev/null
+++ b/docs/components/examples/signals/debugging-console.js
@@ -0,0 +1,20 @@
+import { S } from "deka-dom-el/signals";
+
+// Debugging a derived signal
+const name = S('Alice');
+const greeting = S(() => {
+	console.log('Computing greeting...');
+	return 'Hello, ' + name.get();
+});
+
+// Monitor the derived signal
+S.on(greeting, value => console.log('Greeting changed to:', value));
+
+// Later update the dependency
+name.set('Bob'); // Should trigger computation and listener
+
+// Console output:
+// Computing greeting...
+// Greeting changed to: Hello, Alice
+// Computing greeting...
+// Greeting changed to: Hello, Bob
diff --git a/docs/components/examples/signals/debugging-dom.js b/docs/components/examples/signals/debugging-dom.js
new file mode 100644
index 0000000..ae95023
--- /dev/null
+++ b/docs/components/examples/signals/debugging-dom.js
@@ -0,0 +1,38 @@
+import { el, on, scope } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+// Create a component with reactive elements
+function ReactiveCounter() {
+	const count = S(0);
+		scope.host(on.connected(ev=>
+				console.log(ev.target.__dde_reactive)
+		));
+
+	const counter = el('div', {
+		// This element will be added into the __dde_reactive property
+		textContent: count,
+	});
+
+	const incrementBtn = el('button', {
+		textContent: 'Increment',
+		onclick: () => count.set(count.get() + 1)
+	});
+
+	// Dynamic section will be added into __dde_signal property
+	const counterInfo = S.el(count, value =>
+		el('p', `Current count is ${value}`)
+	);
+
+	return el('div', { id: 'counter' }).append(
+		counter,
+		incrementBtn,
+		counterInfo
+	);
+}
+document.body.append(
+	el(ReactiveCounter),
+);
+
+// In DevTools console:
+const counter = document.querySelector('#counter');
+setTimeout(()=> console.log(counter.__dde_reactive), 1000); // See reactive bindings
diff --git a/docs/components/examples/signals/derived.js b/docs/components/examples/signals/derived.js
new file mode 100644
index 0000000..e1e4d88
--- /dev/null
+++ b/docs/components/examples/signals/derived.js
@@ -0,0 +1,13 @@
+import { S } from "deka-dom-el/signals";
+
+// Create base signals
+const firstName = S("John");
+const lastName = S("Doe");
+
+// Create a derived signal
+const fullName = S(() => firstName.get() + " " + lastName.get());
+
+// The fullName signal updates automatically when either dependency changes
+S.on(fullName, name => console.log("Name changed to:", name));
+
+firstName.set("Jane"); // logs: "Name changed to: Jane Doe"
diff --git a/docs/components/examples/signals/dom-attrs.js b/docs/components/examples/signals/dom-attrs.js
index 0941766..53288b9 100644
--- a/docs/components/examples/signals/dom-attrs.js
+++ b/docs/components/examples/signals/dom-attrs.js
@@ -3,8 +3,8 @@ const count= S(0);
 
 import { el } from "deka-dom-el";
 document.body.append(
-	el("p", S(()=> "Currently: "+count())),
-	el("p", { classList: { red: S(()=> count()%2 === 0) }, dataset: { count }, textContent: "Attributes example" }),
+	el("p", S(()=> "Currently: "+count.get())),
+	el("p", { classList: { red: S(()=> count.get()%2 === 0) }, dataset: { count }, textContent: "Attributes example" }),
 );
 document.head.append(
 	el("style", ".red { color: red; }")
@@ -12,4 +12,4 @@ document.head.append(
 
 const interval= 5 * 1000;
 setTimeout(clearInterval, 10*interval,
-	setInterval(()=> count(count()+1), interval));
+	setInterval(()=> count.set(count.get()+1), interval));
\ No newline at end of file
diff --git a/docs/components/examples/signals/dom-el.js b/docs/components/examples/signals/dom-el.js
index 5620081..f680a1a 100644
--- a/docs/components/examples/signals/dom-el.js
+++ b/docs/components/examples/signals/dom-el.js
@@ -2,7 +2,7 @@ import { S } from "deka-dom-el/signals";
 const count= S(0, {
 	add(){ this.value= this.value + Math.round(Math.random()*10); }
 });
-const numbers= S([ count() ], {
+const numbers= S([ count.get() ], {
 	push(next){ this.value.push(next); }
 });
 
@@ -22,5 +22,5 @@ document.body.append(
 const interval= 5*1000;
 setTimeout(clearInterval, 10*interval, setInterval(function(){
 	S.action(count, "add");
-	S.action(numbers, "push", count());
-}, interval));
+	S.action(numbers, "push", count.get());
+}, interval));
\ No newline at end of file
diff --git a/docs/components/examples/signals/signals.js b/docs/components/examples/signals/signals.js
index 8178a41..199edfd 100644
--- a/docs/components/examples/signals/signals.js
+++ b/docs/components/examples/signals/signals.js
@@ -1,10 +1,10 @@
 import { S } from "deka-dom-el/signals";
-// α — `signal` represents a reactive value
+// PART 1 — `signal` represents a reactive value
 const signal= S(0);
-// β — just reacts on signal changes
+// PART 2 — just reacts on signal changes
 S.on(signal, console.log);
-// γ — just updates the value
-const update= ()=> signal(signal()+1);
+// PART 3 — just updates the value
+const update= ()=> signal.set(signal.get()+1);
 
 update();
 const interval= 5*1000;
diff --git a/docs/components/examples/ssr/async-data.js b/docs/components/examples/ssr/async-data.js
new file mode 100644
index 0000000..f10523b
--- /dev/null
+++ b/docs/components/examples/ssr/async-data.js
@@ -0,0 +1,43 @@
+// Handling async data in SSR
+import { JSDOM } from "jsdom";
+import { S } from "deka-dom-el/signals";
+import { register, queue } from "deka-dom-el/jsdom";
+
+async function renderWithAsyncData() {
+	const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
+	const { el } = await register(dom);
+
+	// Create a component that fetches data
+	function AsyncComponent() {
+			const title= S("-");
+			const description= S("-");
+
+		// Use the queue to track the async operation
+		queue(fetch("https://api.example.com/data")
+			.then(response => response.json())
+			.then(data => {
+				title.set(data.title);
+				description.set(data.description);
+			}));
+
+		return el("div", { className: "async-content" }).append(
+				el("h2", title),
+				el("p", description)
+		);
+	}
+
+	// Render the page
+	dom.window.document.body.append(
+		el("h1", "Page with Async Data"),
+		el(AsyncComponent)
+	);
+
+	// IMPORTANT: Wait for all queued operations to complete
+	await queue();
+
+	// Now the HTML includes all async content
+	const html = dom.serialize();
+	console.log(html);
+}
+
+renderWithAsyncData();
diff --git a/docs/components/examples/ssr/basic-example.js b/docs/components/examples/ssr/basic-example.js
new file mode 100644
index 0000000..e01bb80
--- /dev/null
+++ b/docs/components/examples/ssr/basic-example.js
@@ -0,0 +1,47 @@
+// Basic SSR Example
+import { JSDOM } from "jsdom";
+import { register, queue } from "deka-dom-el/jsdom";
+import { writeFileSync } from "node:fs";
+
+async function renderPage() {
+	// Create a jsdom instance
+	const dom = new JSDOM("<!DOCTYPE html><html><head><meta charset=\"utf-8\"></head><body></body></html>");
+
+	// Register with deka-dom-el and get the el function
+	const { el } = await register(dom);
+
+	// Create a simple header component
+	function Header({ title }) {
+		return el("header").append(
+			el("h1", title),
+			el("nav").append(
+				el("ul").append(
+					el("li").append(el("a", { href: "/" }, "Home")),
+					el("li").append(el("a", { href: "/about" }, "About")),
+					el("li").append(el("a", { href: "/contact" }, "Contact"))
+				)
+			)
+		);
+	}
+
+	// Create the page content
+	dom.window.document.body.append(
+		el(Header, { title: "My Static Site" }),
+		el("main").append(
+			el("h2", "Welcome!"),
+			el("p", "This page was rendered with deka-dom-el on the server.")
+		),
+		el("footer", "© 2025 My Company")
+	);
+
+	// Wait for any async operations
+	await queue();
+
+	// Get the HTML and write it to a file
+	const html = dom.serialize();
+	writeFileSync("index.html", html);
+
+	console.log("Page rendered successfully!");
+}
+
+renderPage().catch(console.error);
diff --git a/docs/components/examples/ssr/intro.js b/docs/components/examples/ssr/intro.js
new file mode 100644
index 0000000..643c2a8
--- /dev/null
+++ b/docs/components/examples/ssr/intro.js
@@ -0,0 +1,2 @@
+// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
+import { register, unregister, queue } from "deka-dom-el/jsdom";
diff --git a/docs/components/examples/ssr/pages.js b/docs/components/examples/ssr/pages.js
new file mode 100644
index 0000000..9d92d21
--- /dev/null
+++ b/docs/components/examples/ssr/pages.js
@@ -0,0 +1,35 @@
+// ❌ WRONG: Static imports are hoisted and will register before JSDOM is created
+import { register } from "deka-dom-el/jsdom";
+import { el } from "deka-dom-el";
+import { Header } from "./components/Header.js";
+
+// ✅ CORRECT: Use dynamic imports to ensure proper initialization order
+import { JSDOM } from "jsdom";
+
+async function renderPage() {
+	// 1. Create JSDOM instance first
+	const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`);
+
+	// 2. Dynamically import jsdom module
+	const { register, queue } = await import("deka-dom-el/jsdom");
+
+	// 3. Register and get el function
+	const { el } = await register(dom);
+
+	// 4. Dynamically import page components
+	const { Header } = await import("./components/Header.js");
+	const { Content } = await import("./components/Content.js");
+
+	// 5. Render components
+	const body = dom.window.document.body;
+	el(body).append(
+		el(Header, { title: "My Page" }),
+		el(Content, { text: "This is server-rendered content" })
+	);
+
+	// 6. Wait for async operations
+	await queue();
+
+	// 7. Get HTML and clean up
+	return dom.serialize();
+}
diff --git a/docs/components/examples/ssr/start.js b/docs/components/examples/ssr/start.js
new file mode 100644
index 0000000..48bf7bf
--- /dev/null
+++ b/docs/components/examples/ssr/start.js
@@ -0,0 +1,27 @@
+// Basic jsdom integration example
+import { JSDOM } from "jsdom";
+import { register, unregister, queue } from "deka-dom-el/jsdom.js";
+
+// Create a jsdom instance
+const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
+
+// Register the dom with deka-dom-el
+const { el } = await register(dom);
+
+// Use deka-dom-el normally
+dom.window.document.body.append(
+	el("div", { className: "container" }).append(
+		el("h1", "Hello, SSR World!"),
+		el("p", "This content was rendered on the server.")
+	)
+);
+
+// Wait for any async operations to complete
+await queue();
+
+// Get the rendered HTML
+const html = dom.serialize();
+console.log(html);
+
+// Clean up when done
+unregister();
diff --git a/docs/components/examples/ssr/static-site-generator.js b/docs/components/examples/ssr/static-site-generator.js
new file mode 100644
index 0000000..a93925e
--- /dev/null
+++ b/docs/components/examples/ssr/static-site-generator.js
@@ -0,0 +1,44 @@
+// Building a simple static site generator
+import { JSDOM } from "jsdom";
+import { register, queue } from "deka-dom-el/jsdom";
+import { writeFileSync, mkdirSync } from "node:fs";
+
+async function buildSite() {
+	// Define pages to build
+	const pages = [
+		{ id: "index", title: "Home", component: "./pages/home.js" },
+		{ id: "about", title: "About", component: "./pages/about.js" },
+		{ id: "docs", title: "Documentation", component: "./pages/docs.js" }
+	];
+
+	// Create output directory
+	mkdirSync("./dist", { recursive: true });
+
+	// Build each page
+	for (const page of pages) {
+		// Create a fresh jsdom instance for each page
+		const dom = new JSDOM("<!DOCTYPE html><html><head><meta charset=\"utf-8\"></head><body></body></html>");
+
+		// Register with deka-dom-el
+		const { el } = await register(dom);
+
+		// Import the page component
+		const { default: PageComponent } = await import(page.component);
+
+		// Render the page with its metadata
+		dom.window.document.body.append(
+			el(PageComponent, { title: page.title, pages })
+		);
+
+		// Wait for any async operations
+		await queue();
+
+		// Write the HTML to a file
+		const html = dom.serialize();
+		writeFileSync(`./dist/${page.id}.html`, html);
+
+		console.log(`Built page: ${page.id}.html`);
+	}
+}
+
+buildSite().catch(console.error);
diff --git a/docs/components/ireland.html.js b/docs/components/ireland.html.js
new file mode 100644
index 0000000..8387664
--- /dev/null
+++ b/docs/components/ireland.html.js
@@ -0,0 +1,88 @@
+import { el, queue } from "deka-dom-el";
+import { addEventListener, registerClientFile } from "../ssr.js";
+import { relative } from "node:path";
+
+const dir= new URL("./", import.meta.url).pathname;
+const dirFE= "irelands";
+// Track all component instances for client-side rehydration
+const componentsRegistry = new Map();
+/**
+ * Creates a component that shows code and its runtime output
+ * with server-side pre-rendering and client-side rehydration
+ *
+ * @param {object} attrs
+ * @param {URL} attrs.src - Path to the file containing the component
+ * @param {string} [attrs.exportName="default"] - Name of the export to use
+ * @param {string} attrs.page_id - ID of the current page
+ * @param {object} [attrs.props={}] - Props to pass to the component
+ */
+export function ireland({ src, exportName = "default", props = {} }) {
+	// relative src against the current directory
+	const path= "./"+relative(dir, src.pathname);
+	const id = "ireland-" + generateComponentId(src);
+	const element = el.mark({ type: "later", name: ireland.name });
+	queue(import(path).then(module => {
+		const component = module[exportName];
+		element.replaceWith(el(component, props, mark(id)));
+	}));
+
+	if(!componentsRegistry.size)
+		addEventListener("oneachrender", registerClientPart);
+	componentsRegistry.set(id, {
+		src,
+		path: dirFE+"/"+path.split("/").pop(),
+		exportName,
+		props,
+	});
+
+	return element;
+}
+
+function registerClientPart(){
+	const todo= Array.from(componentsRegistry.entries())
+		.map(([ id, d ]) => {
+			registerClientFile(d.src, {
+				folder: dirFE,
+				// not all browsers support importmap
+				replacer(file){
+					return file
+						.replaceAll(/ from "deka-dom-el(\/signals)?";/g, ` from "./esm-with-signals.js";`);
+				}
+			});
+			return [ id, d ];
+		});
+	const store = JSON.stringify(JSON.stringify(todo));
+	registerClientFile(new URL("./ireland.js.js", import.meta.url));
+	registerClientFile(new URL("../../dist/esm-with-signals.js", import.meta.url), { folder: dirFE });
+	document.head.append(
+		// not all browsers support importmap
+		el("script", { type: "importmap" }).append(`
+{
+	"imports": {
+		"deka-dom-el": "./${dirFE}/esm-with-signals.js",
+		"deka-dom-el/signals": "./${dirFE}/esm-with-signals.js"
+	}
+}
+		`.trim())
+	);
+	document.body.append(
+		el("script", { type: "module" }).append(`
+import { loadIrelands } from "./ireland.js.js";
+loadIrelands(new Map(JSON.parse(${store})));
+		`.trim())
+	)
+}
+function mark(id) { return el=> el.dataset.ddeMark= id; }
+const store_prev= new Map();
+/** @param {URL} src */
+function generateComponentId(src){
+	const candidate= parseInt(relative((new URL("..", import.meta.url)).pathname, src.pathname)
+		.split("")
+		.map(ch=> ch.charCodeAt(0))
+		.join(""), 10)
+		.toString(36)
+		.replace(/000+/g, "");
+	const count= 1 + ( store_prev.get(candidate) || 0 );
+	store_prev.set(candidate, count);
+	return count.toString()+"-"+candidate;
+}
diff --git a/docs/components/ireland.js.js b/docs/components/ireland.js.js
new file mode 100644
index 0000000..b552395
--- /dev/null
+++ b/docs/components/ireland.js.js
@@ -0,0 +1,13 @@
+// not all browsers support importmaps
+// import { el } from "deka-dom-el";
+import { el } from "./irelands/esm-with-signals.js";
+export function loadIrelands(store) {
+	document.body.querySelectorAll("[data-dde-mark]").forEach(ireland => {
+		const { ddeMark }= ireland.dataset;
+		if(!store.has(ddeMark)) return;
+		const { path, exportName, props }= store.get(ddeMark);
+		import("./"+path).then(module => {
+			ireland.replaceWith(el(module[exportName], props));
+		})
+	});
+}
diff --git a/docs/components/mnemonic/events-init.js b/docs/components/mnemonic/events-init.js
index aae2f28..9b91d63 100644
--- a/docs/components/mnemonic/events-init.js
+++ b/docs/components/mnemonic/events-init.js
@@ -17,8 +17,14 @@ export function mnemonic(){
 			" — just ", el("code", "<element>.dispatchEvent(new Event(<event>[, <options>]))")
 		),
 		el("li").append(
-			el("code", "dispatchEvent(<event>[, <options>])(element, detail)"),
-			" — just ", el("code", "<element>.dispatchEvent(new CustomEvent(<event>, { detail, ...<options> }))")
+			el("code", "dispatchEvent(<event>, <element>)([<detail>])"),
+			" — just ", el("code", "<element>.dispatchEvent(new Event(<event>))"), " or ",
+			el("code", "<element>.dispatchEvent(new CustomEvent(<event>, { detail: <detail> }))")
+		),
+		el("li").append(
+			el("code", "dispatchEvent(<event>[, <options>])(<element>[, <detail>])"),
+			" — just ", el("code", "<element>.dispatchEvent(new Event(<event>[, <options>] ))"), " or ",
+			el("code", "<element>.dispatchEvent(new CustomEvent(<event>, { detail: <detail> }))")
 		),
 	);
 }
diff --git a/docs/components/pageUtils.html.js b/docs/components/pageUtils.html.js
index ffd721b..8675c90 100644
--- a/docs/components/pageUtils.html.js
+++ b/docs/components/pageUtils.html.js
@@ -1,18 +1,67 @@
 import { pages, styles } from "../ssr.js";
 const host= "."+prevNext.name;
 styles.css`
-${host}{
-	display: grid;
-	grid-template-columns: 1fr 2fr 1fr;
-	margin-top: 1rem;
+/* Previous/Next navigation */
+${host} {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 3rem;
+	padding-top: 1.5rem;
 	border-top: 1px solid var(--border);
+	gap: 1rem;
+	width: 100%;
 }
-${host} [rel=prev]{
-	grid-column: 1;
+
+${host} a {
+	display: flex;
+	align-items: center;
+	padding: 0.5rem 0.75rem;
+	border-radius: var(--border-radius);
+	background-color: var(--primary-dark); /* Darker background for better contrast */
+	color: white;
+	font-weight: 600; /* Bolder text for better readability */
+	text-decoration: none;
+	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+	max-width: 45%;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Subtle shadow for better visibility */
 }
-${host} [rel=next]{
-	grid-column: 3;
-	text-align: right;
+
+${host} a:hover {
+	background-color: var(--primary);
+	transform: translateY(-2px);
+	text-decoration: none;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
+}
+
+${host} [rel=prev] {
+	margin-right: auto;
+}
+
+${host} [rel=next] {
+	margin-left: auto;
+}
+
+${host} [rel=prev]::before {
+	content: "←";
+	margin-right: 0.75rem;
+	font-size: 1.2em;
+}
+
+${host} [rel=next]::after {
+	content: "→";
+	margin-left: 0.75rem;
+	font-size: 1.2em;
+}
+
+/* If there's no previous/next, ensure the spacing still works */
+${host} a:only-child {
+	margin-left: auto;
+}
+
+@media (max-width: 640px) {
+	${host} a {
+		font-size: 0.9rem;
+	}
 }
 `;
 import { el } from "../../index.js";
@@ -22,21 +71,28 @@ import { el } from "../../index.js";
  * @param {string} [attrs.id]
  * */
 export function h3({ textContent, id }){
-	if(!id) id= "h-"+textContent.toLowerCase().replaceAll(/\s/g, "-").replaceAll(/[^a-z-]/g, "");
-	return el("h3", { id }).append(
-		el("a", { textContent: "#", href: "#"+id, tabIndex: -1 }),
-		" ", textContent
-	);
+		if(!id) id= "h-"+textContent.toLowerCase().replaceAll(/\s/g, "-").replaceAll(/[^a-z-]/g, "");
+		return el("h3", { id }).append(
+				el("a", {
+						className: "heading-anchor",
+						href: "#"+id,
+						textContent: "#",
+						title: `Link to this section: ${textContent}`,
+						"aria-label": `Link to section ${textContent}`
+				}),
+				" ",
+				textContent,
+		);
 }
 /**
  * @param {import("../types.d.ts").Info} page
  * */
 export function prevNext(page){
-	const page_index= pages.indexOf(page);
-	return el("div", { className: prevNext.name }).append(
-		el(pageLink, { rel: "prev", page: pages[page_index-1] }),
-		el(pageLink, { rel: "next", page: pages[page_index+1] })
-	);
+		const page_index= pages.indexOf(page);
+		return el("div", { className: prevNext.name }).append(
+				el(pageLink, { rel: "prev", page: pages[page_index-1] }),
+				el(pageLink, { rel: "next", page: pages[page_index+1] })
+		);
 }
 /**
  * @param {Object} attrs
@@ -44,11 +100,22 @@ export function prevNext(page){
  * @param {import("../types.d.ts").Info} [attrs.page]
  * */
 function pageLink({ rel, page }){
-	if(!page) return el();
-	let { href, title, description }= page;
-	return el("a", { rel, href, title: description }).append(
-		rel==="next" ?"(next) " : "",
-		title,
-		rel==="prev" ? " (previous)" : "",
-	);
+		if(!page) return el();
+		let { href, title, description }= page;
+
+		// Find the page index to show numbering
+		const pageIndex = pages.findIndex(p => p === page);
+		const pageNumber = pageIndex + 1;
+
+		const linkTitle = rel === "prev"
+				? `Previous: ${pageNumber}. ${title}`
+				: `Next: ${pageNumber}. ${title}`;
+
+		return el("a", {
+				rel,
+				href,
+				title: description || linkTitle
+		}).append(
+				title
+		);
 }
diff --git a/docs/global.css.js b/docs/global.css.js
index e956052..6371f2e 100644
--- a/docs/global.css.js
+++ b/docs/global.css.js
@@ -1,124 +1,476 @@
 import { styles } from "./ssr.js";
 styles.css`
-@import url(https://cdn.simplecss.org/simple.min.css);
-:root{
-	--body-max-width: 45rem;
-	--marked: #fb3779;
-	--code: #0d47a1;
-	--accent: #d81b60;
+:root {
+	--primary: hsl(0, 74%, 42%);
+	--primary-light: hsl(5, 87%, 61%);
+	--primary-dark: hsl(0, 100%, 25%);
+	--primary-hs: 0, 74%;
+	--secondary: hsl(330, 100%, 22%);
+	--secondary-light: hsl(339, 80%, 38%);
+	--secondary-dark: hsl(328, 100%, 15%);
+	--secondary-hs: 330, 100%;
+
+	--font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+		Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-mono: 'Fira Code', 'JetBrains Mono', 'SF Mono',
+		SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+
+	--body-max-width: 40rem;
+	--sidebar-width: 20rem;
+	--header-height: 4rem;
+	--border-radius: 0.375rem;
+
+	--bg: hsl(0, 0%, 100%);
+	--bg-sidebar: hsl(0, 100%, 98%);
+	--text: hsl(0, 16%, 15%);
+	--text-light: hsl(0, 4%, 33%);
+	--code-bg: hsl(0, 39%, 97%);
+	--code-text: hsl(0, 100%, 30%);
+	--border: hsl(0, 32%, 80%);
+	--selection: hsl(var(--primary-hs), 90%);
+	--marked: var(--primary);
+	--accent: var(--secondary);
+	--shadow: 0 2px 6px hsla(0, 0%, 0%, 0.15);
+	--shadow-sm: 0 2px 4px hsla(0, 0%, 0%, 0.15);
+
+
+	--link-color: hsl(0, 100%, 30%);
+	--link-hover: hsl(0, 100%, 25%);
+	--button-text: hsl(0, 0%, 100%);
 }
-@media (prefers-color-scheme:dark) {
+
+@media (prefers-color-scheme: dark) {
 	:root {
-		--accent: #f06292;
-		--code: #62c1f0;
+		--bg: hsl(0, 0%, 7%);
+		--bg-sidebar: hsl(0, 9%, 9%);
+		--text: hsl(0, 0%, 100%);
+		--text-light: hsl(0, 0%, 80%);
+		--code-bg: hsl(0, 18%, 15%);
+		--code-text: hsl(20, 100%, 75%);
+		--border: hsl(0, 14%, 27%);
+		--selection: hsla(9, 100%, 64%, 0.25);
+		--primary: hsl(0, 48%, 49%);
+		--primary-light: hsl(5, 100%, 75%);
+		--primary-dark: hsl(0, 67%, 47%);
+		--secondary: hsl(350, 87%, 55%);
+		--secondary-light: hsl(341, 100%, 69%);
+		--secondary-dark: hsl(340, 100%, 35%);
+		--accent: var(--secondary);
+
+		--link-color: hsl(0, 100%, 66%);
+		--link-hover: hsl(5, 100%, 75%);
+		--button-text: hsl(0, 0%, 100%);
+
+		--primary-hs: 0, 48%;
+		--secondary-hs: 350, 87%;
 	}
 }
-body {
-	grid-template-columns: 100%;
-	grid-template-areas: "header" "sidebar" "content";
+
+/* Base styling */
+* {
+	box-sizing: border-box;
 }
-@media (min-width:768px) {
-	body{
-		grid-template-rows: auto auto;
-		grid-template-columns: calc(10 * var(--body-max-width) / 27) auto;
-		grid-template-areas:
-			"header header"
-			"sidebar content"
+
+html {
+	scroll-behavior: smooth;
+}
+
+/* Accessibility improvements */
+:focus {
+	outline: 3px solid hsl(231, 48%, 70%);
+	outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {
+	outline: none;
+}
+
+:focus-visible {
+	outline: 3px solid hsl(231, 48%, 70%);
+	outline-offset: 2px;
+}
+
+/* Ensure reduced motion preferences are respected */
+@media (prefers-reduced-motion: reduce) {
+	html {
+		scroll-behavior: auto;
+	}
+
+	*, *::before, *::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
 	}
 }
-body > *{
-	grid-column: unset;
-}
-body > header{
-	grid-area: header;
-	padding: 0;
-}
-body > nav{
-	grid-area: sidebar;
-	background-color: var(--accent-bg);
-	display: flex;
-	flex-flow: column nowrap;
-}
-body > nav {
-	font-size: 1rem;
-	line-height: 2;
-	padding: 1rem 0 0 0;
-}
-body > nav ol,
-body > nav ul {
-	align-content: space-around;
-	align-items: center;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
-}
-body > nav ol li,
-body > nav ul li {
-	display:inline-block
-}
-body > nav a,
-body > nav a:visited {
-	margin: 0 .5rem 1rem .5rem;
-	border: 1px solid currentColor;
-	border-radius: var(--standard-border-radius);
-	color: var(--text-light);
-	display: inline-block;
-	padding: .1rem 1rem;
+
+/* Skip link for better keyboard navigation */
+.skip-link {
+	position: absolute;
+	top: 0;
+	left: 0;
+	transform: translateX(-100%);
+	z-index: 9999;
+	background-color: var(--primary);
+	color: white;
+	padding: 0.5rem 1rem;
 	text-decoration: none;
-	cursor: pointer;
-	transition: all .15s;
+	transition: transform 0.3s ease-in-out;
 }
-body > nav a.current,
-body > nav a[aria-current=page] {
-	background-color: var(--bg);
+
+.skip-link:focus {
+	transform: translateX(0);
+}
+
+/* Typography */
+::selection {
+	background-color: var(--selection);
+}
+
+h1, h2, h3, h4, h5, h6 {
+	margin-bottom: 1rem;
+	margin-top: 2rem;
+	font-weight: 700;
+	line-height: 1.25;
 	color: var(--text);
 }
-body > nav a:hover{
+
+h1 {
+	font-size: 2.25rem;
+	margin-top: 0;
+	color: var(--primary-dark);
+}
+h1 > a {
+	font-weight: unset;
+	color: unset;
+}
+
+h3 {
+	font-size: 1.25rem;
+	color: var(--secondary);
+}
+
+p {
+	margin-bottom: 1.5rem;
+}
+
+a {
+	color: var(--link-color, var(--primary));
+	transition: color 0.2s ease;
+	font-weight: 500;
+	text-underline-offset: 3px;
+	transition: color 0.2s ease, text-underline-offset 0.2s ease;
+}
+a:visited {
+	--link-color: var(--secondary, #700037);
+}
+a:hover {
+	--link-color: var(--link-hover, var(--primary-light));
+	text-underline-offset: 5px;
+}
+
+code, pre {
+	font-family: var(--font-mono);
+	font-size: 0.9em;
+	border-radius: var(--border-radius);
+}
+
+code {
+	background-color: var(--code-bg);
+	color: var(--code-text);
+	padding: 0.2em 0.4em;
+	word-wrap: break-word;
+}
+
+pre {
+	background-color: var(--code-bg);
+	padding: 1rem;
+	overflow-x: auto;
+	margin-bottom: 1.5rem;
+	border: 1px solid var(--border);
+}
+
+pre code {
+	background-color: transparent;
+	padding: 0;
+}
+
+/* Layout */
+body {
+	font-family: var(--font-main);
 	background-color: var(--bg);
-	color: var(--accent);
+	color: var(--text);
+	line-height: 1.6;
+	font-size: 1.05rem;
+	display: grid;
+	grid-template-columns: 100%;
+	grid-template-areas:
+		"header"
+		"sidebar"
+		"content";
+	min-height: 100vh;
+	margin: 0;
+	--_gap: .75em;
+	gap: var(--_gap);
+	padding: var(--_gap);
 }
-@media only screen and (max-width:720px) {
-	body > nav{
-		flex-flow: row wrap;
-		padding-block: .5rem;
-	}
-	body > nav a {
-		border:none;
-		text-decoration:underline;
-		margin-block: .1rem;
-		padding-block:.1rem;
-		line-height: 1rem;
-		font-size: .9rem;
+@media (min-width: 768px) {
+	body {
+		grid-template-rows: var(--header-height) 1fr;
+		grid-template-columns: var(--sidebar-width) 1fr;
+		grid-template-areas:
+			"header header"
+			"sidebar content";
 	}
 }
-main{
+body > main {
 	grid-area: content;
+	max-width: 100%;
+	overflow-x: hidden;
 	display: grid;
 	grid-template-columns:
 	[full-main-start] 1fr
 	[main-start] min(var(--body-max-width), 90%) [main-end]
 	1fr [full-main-end];
 }
-main > *, main slot > *{
+body > main > *, body > main slot > * {
+	width: 100%;
+	max-width: 100%;
+	margin-inline: auto;
 	grid-column: main;
 }
+
+/* Page title with ID anchor for skip link */
+h2 {
+	margin-top: 0;
+	border-bottom: 1px solid var(--border);
+	padding-bottom: 0.75rem;
+	margin-bottom: 1.5rem;
+	color: var(--primary);
+}
+
+/* Section headings with better visual hierarchy */
+body > main h3, body > main h4 {
+	scroll-margin-top: calc(var(--header-height) + 1rem);
+}
+
+/* Make clickable heading links for better navigation */
+.heading-anchor {
+	color: var(--text-light);
+	text-decoration: none;
+	font-weight: normal;
+	opacity: .4;
+	transition: opacity .2s;
+
+	&:hover { opacity: .8; }
+}
+
+/* Boxes */
+.illustration{
+	grid-column: full-main;
+	width: calc(100% - .75em);
+}
+.illustration:not(:has( .comparison)){
+	grid-column: main;
+
+	pre {
+		background: none;
+		border-style: dashed !important;
+		width: fit-content;
+		padding: 1em 2em;
+	}
+}
+
+.comparison {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: calc(.75em / 2);
+	margin: 1.5rem 0;
+
+	> div {
+		width: 100%;
+		overflow: hidden;
+	}
+}
+
+@media (min-width: 768px) {
+	.comparison {
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+.good-practice, .bad-practice {
+	border: 1px solid var(--border);
+	border-radius: var(--border-radius);
+	border-top: 4px solid var(--practice-color);
+	padding: 0 1rem;
+}
+.good-practice {
+	--practice-color: hsl(145, 63%, 49%); }
+.bad-practice {
+	--practice-color: hsl(340, 82%, 52%); }
+
+/* Icon styling */
 .icon {
-	vertical-align: sub;
-	padding-right: .25rem;
 	display: inline-block;
 	width: 1em;
-	height: 1.3em;
-	margin-right: 0.2rem;
+	height: 1em;
+	vertical-align: -0.125em;
 	stroke-width: 0;
 	stroke: currentColor;
 	fill: currentColor;
 }
-.note{
-	font-size: .9rem;
-	font-style: italic;
+
+/* Information blocks */
+.note, .tip, .warning, .callout, .troubleshooting {
+	padding: 1rem 1.25rem;
+	margin: 1.5rem 0;
+	border-radius: var(--border-radius);
+	position: relative;
+	font-size: 0.95rem;
+	line-height: 1.5;
+	background-color: var(--bg-sidebar);
+	border-radius: 0 var(--border-radius) var(--border-radius) 0;
+	--block-color: var(--primary);
+	border-left: 4px solid var(--block-color);
+
+	h4 { margin-top: 0; }
+}
+.tip {
+	--block-color: hsl(145, 63%, 49%); }
+.warning {
+	--block-color: hsl(48, 89%, 50%); }
+
+.callout {
+	--block-color: hsl(231, 48%, 70%); }
+
+.troubleshooting {
+	--block-color: hsl(340, 82%, 52%); }
+
+.note::before, .tip::before, .warning::before, .callout::before, .troubleshooting::before {
+	font-weight: 600;
+	display: block;
+	margin-bottom: 0.5rem;
+	color: var(--block-color);
+}
+
+.note::before {
+	content: "Note"; }
+.warning::before {
+	content: "Warning"; }
+
+/* Function table styling */
+.function-table {
+	border: 1px solid var(--border);
+	border-radius: var(--border-radius);
+	padding: 1rem;
+	margin: 1.5rem 0;
+	background-color: var(--bg-sidebar);
+}
+
+.function-table h4 {
+	margin-top: 0;
+	color: var(--primary);
+	font-family: var(--font-mono);
+	border-bottom: 1px solid var(--border);
+	padding-bottom: 0.5rem;
+	margin-bottom: 1rem;
+}
+
+.function-table dl {
+	margin: 0;
+}
+
+.function-table dt {
+	font-weight: 600;
+	margin-top: 0.75rem;
+}
+
+.function-table dd {
+	margin-left: 1rem;
+	margin-bottom: 0.75rem;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+/* Tabs styling */
+.tabs {
+	border: 1px solid var(--border);
+	border-radius: var(--border-radius);
+	margin: 1.5rem 0;
+	overflow: hidden;
+}
+
+.tab {
+	padding: 1rem;
+	border-top: 1px solid var(--border);
+}
+
+.tab:first-child {
+	border-top: none;
+}
+
+.tab h4 {
+	margin-top: 0;
+	margin-bottom: 0.75rem;
+	font-size: 1.1rem;
+}
+
+@media (min-width: 768px) {
+	.tabs {
+		display: flex;
+		flex-flow: row wrap;
+	}
+
+	.tab {
+		flex: 1;
+		min-width: 50%;
+		border-top: none;
+		display: flex;
+		flex-flow: column nowrap;
+		align-items: center;
+		text-align: justify;
+	}
+
+	.tab:first-child {
+		border-inline-end: 1px solid var(--border);
+	}
+}
+
+/* Prev/Next buttons */
+.prev-next {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 3rem;
+	padding-top: 1.5rem;
+	border-top: 1px solid var(--border);
+}
+
+.prev-next a {
+	display: flex;
+	align-items: center;
+	padding: 0.5rem 1rem;
+	border-radius: var(--border-radius);
+	background-color: var(--primary);
+	color: white;
+	transition: background-color 0.2s ease;
+}
+
+.prev-next a:hover {
+	background-color: var(--primary-dark);
+	text-decoration: none;
+}
+
+.prev-next a:empty {
+	display: none;
+}
+
+.prev-next a[rel="prev"]::before {
+	content: "←";
+	margin-right: 0.5rem;
+}
+
+.prev-next a[rel="next"]::after {
+	content: "→";
+	margin-left: 0.5rem;
 }
 `;
diff --git a/docs/index.html.js b/docs/index.html.js
index 60e1a18..d01d56a 100644
--- a/docs/index.html.js
+++ b/docs/index.html.js
@@ -2,7 +2,8 @@ import { t, T } from "./utils/index.js";
 export const info= {
 	href: "./",
 	title: t`Introduction`,
-	description: t`Introducing a library.`,
+	fullTitle: t`Vanilla for flavouring — a full-fledged feast for large projects`,
+	description: t`A lightweight, reactive DOM library for creating dynamic UIs with a declarative syntax`,
 };
 
 import { el } from "deka-dom-el";
@@ -26,37 +27,90 @@ const references= {
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("p", t`The library tries to provide pure JavaScript tool(s) to create reactive interfaces using …`),
-
-		el(h3, t`Event-driven programming (3 parts separation ≡ 3PS)`),
-		el("p").append(t`
-			Let's introduce the basic principle on which the library is built. We'll use the JavaScript listener as
-			a starting point.
-		`),
-		el(code, { src: fileURL("./components/examples/introducing/3ps.js"), page_id }),
 		el("p").append(...T`
-			As we can see, in the code at location “A” we define ${el("em", t`how to react`)} when the function
-			is called with any event as an argument. At that moment, we ${el("em", t`don’t care who/why/how`)}
-			the function was called. Similarly, at point “B”, we reference to a function to be called on the event
-			${el("em", t`without caring`)} what the function will do at that time. Finally, at point “C”, we tell
-			the application that a change has occurred, in the input, and we ${el("em", t`don't care if/how someone`)}
-			is listening for the event.
+			Welcome to Deka DOM Elements (DDE) — a lightweight library for building dynamic UIs with a declarative
+			syntax that stays close to the native DOM API. DDE gives you powerful reactive tools without the complexity
+			and overhead of larger frameworks.
 		`),
+		el("div", { className: "callout" }).append(
+			el("h4", t`What Makes DDE Special`),
+			el("ul").append(
+				el("li", t`No build step required — use directly in the browser`),
+				el("li", t`Lightweight core (~10–15kB minified) with zero dependencies`),
+				el("li", t`Natural DOM API — work with real DOM nodes, not abstractions`),
+				el("li", t`Built-in reactivity with powerful signals system`),
+				el("li", t`Clean code organization with the 3PS pattern`)
+			)
+		),
 		el(example, { src: fileURL("./components/examples/introducing/helloWorld.js"), page_id }),
+
+		el(h3, { textContent: t`The 3PS Pattern: A Better Way to Build UIs`, id: "h-3ps" }),
 		el("p").append(...T`
-			The library introduces a new “type” of variable/constant called ${el("em", t`signal`)} allowing us to
-			to use introduced 3PS pattern in our applications. As you can see it in the example above.
+			At the heart of DDE is the 3PS (3-Part Separation) pattern. This simple yet powerful approach helps you
+			organize your UI code into three distinct areas, making your applications more maintainable and easier
+			to reason about.
 		`),
+		el("div", { className: "illustration" }).append(
+			el("div", { className: "tabs" }).append(
+				el("div", { className: "tab" }).append(
+					el("h5", t`Traditional DOM Manipulation`),
+					el(code, { src: fileURL("./components/examples/introducing/3ps-before.js"), page_id }),
+				),
+				el("div", { className: "tab" }).append(
+					el("h5", t`DDE's 3PS Pattern`),
+					el(code, { src: fileURL("./components/examples/introducing/3ps.js"), page_id }),
+				)
+			)
+		),
 		el("p").append(...T`
-			Also please notice that there is very similar 3PS pattern used for separate creation of UI and
-			business logic.
+			The 3PS pattern separates your code into three clear parts:
 		`),
+		el("ol").append(
+			el("li").append(...T`
+				${el("strong", "Create State")}: Define your application's reactive data using signals
+			`),
+			el("li").append(...T`
+				${el("strong", "Bind to Elements")}: Define how UI elements react to state changes
+			`),
+			el("li").append(...T`
+				${el("strong", "Update State")}: Modify state in response to user events or other triggers
+			`)
+		),
+
 		el("p").append(...T`
-			The 3PS is very simplified definition of the pattern. There are more deep/academic definitions more precisely
-			describe usage in specific situations, see for example ${el("a", { textContent: t`MVVM`, ...references.w_mvv })}
-			or ${el("a", { textContent: t`MVC`, ...references.w_mvc })}.
+			By separating these concerns, your code becomes more modular, testable, and easier to maintain. This
+			approach shares principles with more formal patterns like ${el("a", { textContent: "MVVM",
+				...references.w_mvv })} and ${el("a", { textContent: "MVC", ...references.w_mvc })}, but with less
+			overhead and complexity.
 		`),
 
-		el(h3, t`Organization of the documentation`),
+		el("div", { className: "note" }).append(
+			el("p").append(...T`
+				The 3PS pattern becomes especially powerful when combined with components, allowing you to create
+				reusable pieces of UI with encapsulated state and behavior. You'll learn more about this in the
+				following sections.
+			`)
+		),
+
+		el(h3, t`How to Use This Documentation`),
+		el("p").append(...T`
+			This guide will take you through DDE's features step by step:
+		`),
+		el("ol").append(
+			el("li").append(...T`${el("strong", "Elements")} — Creating and manipulating DOM elements`),
+			el("li").append(...T`${el("strong", "Events")} — Handling user interactions and lifecycle events`),
+			el("li").append(...T`${el("strong", "Signals")} — Adding reactivity to your UI`),
+			el("li").append(...T`${el("strong", "Scopes")} — Managing component lifecycles`),
+			el("li").append(...T`${el("strong", "Custom Elements")} — Building web components`),
+			el("li").append(...T`${el("strong", "Debugging")} — Tools to help you build and fix your apps`),
+			el("li").append(...T`${el("strong", "Extensions")} — Integrating third-party functionalities`),
+			el("li").append(...T`${el("strong", "Ireland Components")} —
+				Creating interactive demos with server-side pre-rendering`),
+			el("li").append(...T`${el("strong", "SSR")} — Server-side rendering with DDE`)
+		),
+		el("p").append(...T`
+			Each section builds on the previous ones, so we recommend following them in order.
+			Let's get started with the basics of creating elements!
+		`),
 	);
 }
diff --git a/docs/layout/head.html.js b/docs/layout/head.html.js
index cc8f7d8..6eb9a3c 100644
--- a/docs/layout/head.html.js
+++ b/docs/layout/head.html.js
@@ -1,38 +1,220 @@
 import { el, elNS } from "deka-dom-el";
-import { pages } from "../ssr.js";
+import { pages, styles } from "../ssr.js";
+const host= "."+header.name;
+const host_nav= "."+nav.name;
+styles.css`
+/* Header */
+${host} {
+	grid-area: header;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.75rem 1.5rem;
+	background-color: var(--primary);
+	color: white;
+	box-shadow: var(--shadow);
+	height: fit-content;
+	border-radius: var(--border-radius);
+}
+
+${host} .header-title {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+
+${host} h1 {
+	font-size: 1.25rem;
+	margin: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	color: white;
+}
+
+${host} .version-badge {
+	font-size: 0.75rem;
+	background-color: hsla(0, 0%, 59%, 0.2);
+	padding: 0.25rem 0.5rem;
+	border-radius: var(--border-radius);
+}
+
+${host} p {
+	display: block;
+	font-size: 0.875rem;
+	opacity: 0.9;
+	margin: 0;
+}
+
+${host_nav} .github-link {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: 0.9rem;
+}
+
+/* Navigation */
+${host_nav} {
+	grid-area: sidebar;
+	background-color: var(--bg-sidebar);
+	border: 1px solid var(--border);
+	border-radius: var(--border-radius);
+	padding: 1rem;
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+${host_nav} a {
+	display: flex;
+	align-items: center;
+	padding: 0.625rem 0.75rem;
+	border-radius: var(--border-radius);
+	color: var(--text);
+	transition: background-color 0.1s ease, color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
+	line-height: 1.2;
+}
+
+${host_nav} a[aria-current=page] {
+	background-color: hsl(var(--primary-hs), 40%);
+	color: whitesmoke;
+	font-weight: 600;
+	box-shadow: var(--shadow);
+	text-decoration: none;
+}
+
+${host_nav} a:hover {
+	background-color: hsl(var(--primary-hs), 45%);
+	color: whitesmoke;
+	transform: translateY(-1px);
+	text-decoration: none;
+}
+
+${host_nav} a .nav-number {
+	color: rgb(from currentColor r g b / .75);
+}
+
+@media (min-width: 768px) {
+	${host_nav} {
+		height: fit-content;
+		position: sticky;
+		top: .5rem;
+	}
+}
+@media (max-width: 767px) {
+	${host_nav} {
+		padding: 0.75rem;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		border-bottom: 1px solid var(--border);
+		border-right: none;
+		justify-content: center;
+	}
+
+	${host_nav} a {
+		font-size: 0.875rem;
+		padding: 0.375rem 0.75rem;
+		white-space: nowrap;
+	}
+
+	${host_nav} a .nav-number {
+		width: auto;
+		margin-right: 0.25rem;
+	}
+
+	${host_nav} a:first-child {
+		margin-bottom: 0;
+		margin-right: 0.5rem;
+		min-width: 100%;
+		justify-content: center;
+	}
+}
+`;
 /**
  * @param {object} def
  * @param {import("../types.d.ts").Info} def.info
  * @param {import("../types.d.ts").Pkg} def.pkg Package information.
  * */
 export function header({ info: { href, title, description }, pkg }){
-	title= `\`${pkg.name}\` — ${title}`;
+	const pageTitle = `${pkg.name} — ${title}`;
+
+	// Add meta elements to the head
 	document.head.append(
-		head({ title, description, pkg })
+		head({ title: pageTitle, description, pkg })
 	);
+
 	return el().append(
-		el("header").append(
-			el("h1", title),
-			el("p", description)
-		),
-		el("nav").append(
-			el("a", { href: pkg.homepage }).append(
-				el(iconGitHub),
-				"GitHub"
+		// Header section with accessibility support
+		el("header", { role: "banner", className: header.name }).append(
+			el("div", { className: "header-title" }).append(
+				el("img", {
+					src: "assets/logo.svg",
+					alt: "DDE Logo",
+					width: "32",
+					height: "32",
+					style: "margin-right: 0.5rem;"
+				}),
+				el("h1").append(
+					el("a", { href: pages[0].href, textContent: pkg.name, title: "Go to documentation homepage" }),
+				),
+				el("span", {
+					className: "version-badge",
+					"aria-label": "Version",
+					textContent: pkg.version || ""
+				})
 			),
-			...pages.map((p, i)=> el("a", {
-				href: p.href==="index" ? "./" : p.href,
-				textContent: (i+1) + ". " + p.title,
-				title: p.description,
-				classList: { current: p.href===href }
-			}))
-		)
+			el("p", description),
+		),
+
+		// Navigation between pages
+		nav({ href, pkg })
+	);
+}
+function nav({ href, pkg }){
+	return el("nav", {
+		role: "navigation",
+		"aria-label": "Main navigation",
+		className: nav.name
+	}).append(
+		el("a", {
+			href: pkg.homepage,
+			className: "github-link",
+			"aria-label": "View on GitHub",
+			target: "_blank",
+			rel: "noopener noreferrer",
+		}).append(
+			el(iconGitHub),
+			"GitHub"
+		),
+		...pages.map((p, i) => {
+			const isIndex = p.href === "index";
+			const isCurrent = p.href === href;
+
+			return el("a", {
+				href: isIndex ? "./" : p.href,
+				title: p.description || `Go to ${p.title}`,
+				"aria-current": isCurrent ? "page" : null,
+			}).append(
+				el("span", {
+					className: "nav-number",
+					"aria-hidden": "true",
+					textContent: `${i+1}. `
+				}),
+				p.title
+			);
+		}),
 	);
 }
 function head({ title, description, pkg }){
 	return el().append(
 		el("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
 		el("meta", { name: "description", content: description }),
+		el("meta", { name: "theme-color", content: "#b71c1c" }),
+		el("link", { rel: "icon", href: "assets/favicon.svg", type: "image/svg+xml" }),
 		el("title", title),
 		el(metaAuthor),
 		el(metaTwitter, pkg),
@@ -53,7 +235,7 @@ function metaTwitter({ name, description, homepage }){
 		el("meta", { name: "twitter:url", content: homepage }),
 		el("meta", { name: "twitter:title", content: name }),
 		el("meta", { name: "twitter:description", content: description }),
-		//el("meta", { name: "twitter:image", content: "" }),
+		el("meta", { name: "twitter:image", content: homepage + "/assets/logo.svg" }),
 		el("meta", { name: "twitter:creator", content: "@jaandrle" }),
 	);
 }
@@ -62,7 +244,7 @@ function metaFacebook({ name, description, homepage }){
 		el("meta", { name: "og:url", content: homepage }),
 		el("meta", { name: "og:title", content: name }),
 		el("meta", { name: "og:description", content: description }),
-		//el("meta", { name: "og:image", content: "" }),
+		el("meta", { name: "og:image", content: homepage + "/assets/logo.svg" }),
 		el("meta", { name: "og:creator", content: "@jaandrle" }),
 	);
 }
diff --git a/docs/layout/simplePage.html.js b/docs/layout/simplePage.html.js
index 8520843..def42f3 100644
--- a/docs/layout/simplePage.html.js
+++ b/docs/layout/simplePage.html.js
@@ -7,9 +7,24 @@ import { prevNext } from "../components/pageUtils.html.js";
 /** @param {Pick<import("../types.d.ts").PageAttrs, "pkg" | "info">} attrs */
 export function simplePage({ pkg, info }){
 	return simulateSlots(el().append(
+		// Skip link for keyboard navigation
+		el("a", {
+			href: "#main-content",
+			className: "skip-link",
+			textContent: "Skip to main content"
+		}),
+
+		// Header with site information
 		el(header, { info, pkg }),
-		el("main").append(
+
+		// Main content area
+		el("main", { id: "main-content", role: "main" }).append(
+			el("h2", { textContent: info.fullTitle || info.title }),
+
+			// Main content from child elements
 			el("slot"),
+
+			// Navigation between pages
 			el(prevNext, info)
 		)
 	));
diff --git a/docs/p02-elements.html.js b/docs/p02-elements.html.js
index 34043a8..3d217f3 100644
--- a/docs/p02-elements.html.js
+++ b/docs/p02-elements.html.js
@@ -1,7 +1,8 @@
 import { T, t } from "./utils/index.js";
 export const info= {
 	title: t`Elements`,
-	description: t`Basic concepts of elements modifications and creations.`,
+	fullTitle: t`Declarative DOM Element Creation`,
+	description: t`Building user interfaces with declarative DOM element creation.`,
 };
 
 import { el } from "deka-dom-el";
@@ -48,107 +49,154 @@ const references= {
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("h2", t`Native JavaScript DOM elements creations`),
-		el("p", t`
-			Let’s go through all patterns we would like to use and what needs to be improved for better experience.
+		el("p").append(...T`
+			Building user interfaces in JavaScript often involves creating and manipulating DOM elements.
+			DDE provides a simple yet powerful approach to element creation that is declarative, chainable,
+			and maintains a clean syntax close to HTML structure.
 		`),
+		el("div", { class: "callout" }).append(
+			el("h4", t`DDE Elements: Key Benefits`),
+			el("ul").append(
+				el("li", t`Declarative element creation with intuitive property assignment`),
+				el("li", t`Chainable methods for natural DOM tree construction`),
+				el("li", t`Simplified component patterns for code reuse`),
+				el("li", t`Normalized property/attribute handling across browsers`),
+				el("li", t`Smart element return values for cleaner code flow`)
+			)
+		),
 
 		el(code, { src: fileURL("./components/examples/elements/intro.js"), page_id }),
 
-		el(h3, t`Creating element(s) (with custom attributes)`),
+		el(h3, t`Creating Elements: Native vs DDE`),
 		el("p").append(...T`
-			You can create a native DOM element by using the ${el("a", references.mdn_create).append(
-			el("code", "document.createElement()") )}. It is also possible to provide a some attribute(s) declaratively
-			using ${el("code", "Object.assign()")}. More precisely, this way you can sets some
-			${el("a", references.mdn_idl).append( el("abbr", { textContent: "IDL", title: "Interface Description Language" }))}
-			also known as a JavaScript property.
+			In standard JavaScript, you create DOM elements using the
+			${el("a", references.mdn_create).append(el("code", "document.createElement()"))} method
+			and then set properties individually or with Object.assign():
 		`),
-		el(example, { src: fileURL("./components/examples/elements/nativeCreateElement.js"), page_id }),
-		el("p").append(...T`
-			To make this easier, you can use the ${el("code", "el")} function. Internally in basic examples,
-			it is wrapper around ${el("code", "assign(document.createElement(…), { … })")}.
-		`),
-		el(example, { src: fileURL("./components/examples/elements/dekaCreateElement.js"), page_id }),
-		el("p").append(...T`
-			The ${el("code", "assign")} function provides improved behaviour of ${el("code", "Object.assign()")}.
-			You can declaratively sets any IDL and attribute of the given element. Function prefers IDL and fallback
-			to the ${el("code", "element.setAttribute")} if there is no writable property in the element prototype.
-		`),
-		el("p").append(...T`
-			You can study all JavaScript elements interfaces to the corresponding HTML elements. All HTML elements
-			inherits from ${el("a", { textContent: "HTMLElement", ...references.mdn_el })}. To see
-			all available IDLs for example for paragraphs, see ${el("a", { textContent: "HTMLParagraphElement",
-			...references.mdn_p })}. Moreover, the ${el("code", "assign")} provides a way to sets declaratively
-			some convenient properties:
-		`),
-		el("ul").append(
-			el("li").append(...T`
-				It is possible to sets ${el("code", "data-*")}/${el("code", "aria-*")} attributes using object notation.
-			`),
-			el("li").append(...T`
-				In opposite, it is also possible to sets ${el("code", "data-*")}/${el("code", "aria-*")} attribute
-				using camelCase notation.
-			`),
-			el("li").append(...T`You can use string or object as a value for ${el("code", "style")} property.`),
-			el("li").append(...T`
-				${el("code", "className")} (IDL – preffered)/${el("code", "class")} are ways to add CSS classes
-				to the element. You can use string (similarly to ${el("code", "class=\"…\"")} syntax in  HTML).
-			`),
-			el("li").append(...T`
-				Use ${el("code", "classList")} to toggle specific classes. This will be handy later when
-				the reactivity via signals is beeing introduced.
-			`),
-			el("li").append(...T`
-				The ${el("code", "assign")} also accepts the ${el("code", "undefined")} as a value for any property
-				to remove it from the element declaratively. Also for some IDL the corresponding attribute is removed
-				as it can be confusing. ${el("em").append(...T`For example, natievly the element’s ${el("code", "id")}
-				is removed by setting the IDL to an empty string.`)}
-			`),
-			el("li").append(...T`
-				You can use ${el("code", "=")} or ${el("code", ".")} to force processing given key as attribute/property
-				of the element.
-			`)
+		el("div", { class: "illustration" }).append(
+			el("div", { class: "comparison" }).append(
+				el("div").append(
+					el("h5", t`Native DOM API`),
+					el(code, { src: fileURL("./components/examples/elements/native-dom-create.js"), page_id })
+				),
+				el("div").append(
+					el("h5", t`DDE Approach`),
+					el(code, { src: fileURL("./components/examples/elements/dde-dom-create.js"), page_id })
+				)
+			)
 		),
 		el("p").append(...T`
-			For processing, the ${el("code", "assign")} internally uses ${el("code", "assignAttribute")} and
-			${el("code", "classListDeclarative")}.
+			The ${el("code", "el")} function provides a simple wrapper around ${el("code", "document.createElement")}
+			with enhanced property assignment.
 		`),
+		el(example, { src: fileURL("./components/examples/elements/dekaCreateElement.js"), page_id }),
+
+		el(h3, t`Advanced Property Assignment`),
+		el("p").append(...T`
+			The ${el("code", "assign")} function is the heart of DDE's element property handling. It is internally used
+			to assign properties using the ${el("code", "el")} function. ${el("code", "assign")} provides intelligent
+			assignment of both properties (IDL) and attributes:
+		`),
+		el("div", { class: "function-table" }).append(
+			el("dl").append(
+				el("dt", t`Property vs Attribute Priority`),
+				el("dd", t`Prefers IDL properties, falls back to setAttribute() when no writable property exists`),
+
+				el("dt", t`Data and ARIA Attributes`),
+				el("dd", t`Both dataset.* and data-* syntaxes supported (same for ARIA)`),
+
+				el("dt", t`Style Handling`),
+				el("dd", t`Accepts string or object notation for style property`),
+
+				el("dt", t`Class Management`),
+				el("dd", t`Works with className, class, or classList object for toggling classes`),
+
+				el("dt", t`Force Modes`),
+				el("dd", t`Use = prefix to force attribute mode, . prefix to force property mode`),
+
+				el("dt", t`Attribute Removal`),
+				el("dd", t`Pass undefined to remove a property or attribute`)
+			)
+		),
 		el(example, { src: fileURL("./components/examples/elements/dekaAssign.js"), page_id }),
 
-		el(h3, t`Native JavaScript templating`),
-		el("p", t`By default, the native JS has no good way to define HTML template using DOM API:`),
-		el(example, { src: fileURL("./components/examples/elements/nativeAppend.js"), page_id }),
+		el("div", { class: "note" }).append(
+			el("p").append(...T`
+				You can explore standard HTML element properties in the MDN documentation for
+				${el("a", { textContent: "HTMLElement", ...references.mdn_el })} (base class)
+				and specific element interfaces like ${el("a", { textContent: "HTMLParagraphElement", ...references.mdn_p })}.
+			`)
+		),
+
+		el(h3, t`Building DOM Trees with Chainable Methods`),
 		el("p").append(...T`
-			This library therefore overwrites the ${el("code", "append")} method of created elements to always return
-			parent element.
+			One of the most powerful features of DDE is its approach to building element trees.
+			Unlike the native DOM API which doesn't return the parent after appendChild(), DDE's
+			append() always returns the parent element:
+		`),
+		el("div", { class: "illustration" }).append(
+			el("div", { class: "comparison" }).append(
+				el("div", { class: "bad-practice" }).append(
+					el("h5", t`❌ Native DOM API`),
+					el(code, { src: fileURL("./components/examples/elements/native-dom-tree.js"), page_id })
+				),
+				el("div", { class: "good-practice" }).append(
+					el("h5", t`✅ DDE Approach`),
+					el(code, { src: fileURL("./components/examples/elements/dde-dom-tree.js"), page_id })
+				)
+			)
+		),
+		el("p").append(...T`
+			This chainable pattern is much cleaner and easier to follow, especially for deeply nested elements.
+			It also makes it simple to add multiple children to a parent element in a single fluent expression.
 		`),
 		el(example, { src: fileURL("./components/examples/elements/dekaAppend.js"), page_id }),
 
-
-		el(h3, t`Basic (state-less) components`),
+		el(h3, t`Using Components to Build UI Fragments`),
 		el("p").append(...T`
-			You can use functions for encapsulation (repeating) logic. The ${el("code", "el")} accepts function
-			as first argument. In that case, the function should return dom elements and the second argument for
-			${el("code", "el")} is argument for given element.
+			The ${el("code", "el")} function is overloaded to support both tag names and function components.
+			This lets you refactor complex UI trees into reusable pieces:
 		`),
 		el(example, { src: fileURL("./components/examples/elements/dekaBasicComponent.js"), page_id }),
 		el("p").append(...T`
-			As you can see, in case of state-less/basic components there is no difference between calling component
-			function directly or using ${el("code", "el")} function.
-		`),
-		el("p", { className: "notice" }).append(...T`
-			It is nice to use similar naming convention as native DOM API. This allows us to use
-			${el("a", { textContent: t`the destructuring assignment syntax`, ...references.mdn_destruct })} and keep
-			track of the native API (things are best remembered through regular use).
+			Component functions receive the properties object as their first argument, just like regular elements.
+			This makes it easy to pass data down to components and create reusable UI fragments.
 		`),
+		el("div", { class: "tip" }).append(
+			el("p").append(...T`
+				It's helpful to use naming conventions similar to native DOM elements for your components.
+				This allows you to use ${el("a", { textContent: "destructuring assignment", ...references.mdn_destruct })}
+				and keeps your code consistent with the DOM API.
+			`)
+		),
 
-		el(h3, t`Creating non-HTML elements`),
+		el(h3, t`Working with SVG and Other Namespaces`),
 		el("p").append(...T`
-			Similarly to the native DOM API (${el("a", references.mdn_ns).append(el("code", "document.createElementNS"))})
-			for non-HTML elements we need to tell JavaScript which kind of the element to create. We can use
-			the ${el("code", "elNS")} function:
+			For non-HTML elements like SVG, MathML, or custom namespaces, DDE provides the ${el("code", "elNS")} function
+			which corresponds to the native ${el("a", references.mdn_ns).append(el("code", "document.createElementNS"))}:
 		`),
 		el(example, { src: fileURL("./components/examples/elements/dekaElNS.js"), page_id }),
+		el("p").append(...T`
+			This function returns a namespace-specific element creator, allowing you to work with any element type
+			using the same consistent interface.
+		`),
+
+		el(h3, t`Best Practices for Declarative DOM Creation`),
+		el("ol").append(
+			el("li").append(...T`
+				${el("strong", "Use component functions for reusable UI fragments:")} Extract common UI patterns
+				into reusable functions that return elements.
+			`),
+			el("li").append(...T`
+				${el("strong", "Leverage destructuring for cleaner component code:")} Use
+				${el("a", { textContent: "destructuring", ...references.mdn_destruct })} to extract properties
+				from the props object for cleaner component code.
+			`),
+			el("li").append(...T`
+				${el("strong", "Leverage chainable methods for better performance:")} Use chainable methods like
+				${el("code", ".append()")} to build complex DOM trees for better performance and cleaner code.
+			`),
+		),
 
 		el(mnemonic)
 	);
diff --git a/docs/p03-events.html.js b/docs/p03-events.html.js
index 3ea0268..5de5d53 100644
--- a/docs/p03-events.html.js
+++ b/docs/p03-events.html.js
@@ -1,7 +1,8 @@
 import { T, t } from "./utils/index.js";
 export const info= {
 	title: t`Events and Addons`,
-	description: t`Using not only events in UI declaratively.`,
+	fullTitle: t`Declarative Event Handling and Addons`,
+	description: t`Using events and addons for declarative UI interactions.`,
 };
 
 import { el } from "deka-dom-el";
@@ -15,7 +16,7 @@ const fileURL= url=> new URL(url, import.meta.url);
 const references= {
 	/** element.addEventListener() */
 	mdn_listen: {
-		title: t`MDN documentation page for elemetn.addEventListener`,
+		title: t`MDN documentation page for element.addEventListener`,
 		href: "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener",
 	},
 	/** AbortSignal+element.addEventListener */
@@ -45,109 +46,197 @@ const references= {
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("h2", t`Listenning to the native DOM events and other Addons`),
 		el("p").append(...T`
-			We quickly introduce helper to listening to the native DOM events. And library syntax/pattern so-called
-			${el("em", t`Addon`)} to incorporate not only this in UI templates declaratively.
+			Events are at the core of interactive web applications. DDE provides a clean, declarative approach to
+			handling DOM events and extends this pattern with a powerful Addon system to incorporate additional
+			functionalities into your UI templates.
 		`),
+		el("div", { className: "callout" }).append(
+			el("h4", t`Why DDE's Event System and Addons Matters`),
+			el("ul").append(
+				el("li", t`Integrate event handling directly in element declarations`),
+				el("li", t`Leverage lifecycle events for better component design`),
+				el("li", t`Clean up listeners automatically with abort signals`),
+				el("li", t`Extend elements with custom behaviors using Addons`),
+				el("li", t`Maintain clean, readable code with consistent patterns`)
+			)
+		),
 
 		el(code, { src: fileURL("./components/examples/events/intro.js"), page_id }),
 
-		el(h3, t`Events and listenners`),
+		el(h3, t`Events and Listeners: Two Approaches`),
 		el("p").append(...T`
-			In JavaScript you can listen to the native DOM events of the given element by using
-			${el("a", references.mdn_listen).append( el("code", "element.addEventListener(type, listener, options)") )}.
-			The library provides an alternative (${el("code", "on")}) accepting the differen order of the arguments:
+			In JavaScript you can listen to native DOM events using
+			${el("a", references.mdn_listen).append(el("code", "element.addEventListener(type, listener, options)"))}.
+			DDE provides an alternative approach with arguments ordered differently to better fit its declarative style:
+		`),
+		el("div", { className: "illustration" }).append(
+			el("div", { className: "tabs" }).append(
+				el("div", { className: "tab" }).append(
+					el("h5", t`Native DOM API`),
+					el(code, { content: `element.addEventListener('click', callback, options);`, page_id })
+				),
+				el("div", { className: "tab" }).append(
+					el("h5", t`DDE Approach`),
+					el(code, { content: `on('click', callback, options)(element);`, page_id })
+				)
+			)
+		),
+		el("p").append(...T`
+			The main benefit of DDE's approach is that it works as an Addon, making it easy to integrate
+			directly into element declarations.
 		`),
 		el(example, { src: fileURL("./components/examples/events/compare.js"), page_id }),
-		el("p").append(...T`
-			…this is actually one of the two differences. The another one is that ${el("code", "on")} accepts only
-			object as the ${el("code", "options")} (but it is still optional).
-		`),
-		el("p", { className: "notice" }).append(...T`
-			The other difference is that there is ${el("strong", "no")} ${el("code", "off")} function. You can remove
-			listener declaratively using ${el("a", { textContent: "AbortSignal", ...references.mdn_abortListener })}:
-		`),
-		el(example, { src: fileURL("./components/examples/events/abortSignal.js"), page_id }),
-		el("div", { className: "notice" }).append(
-			el("p", t`So, there are (typically) three ways to handle events. You can use:`),
-			el("ul").append(
-				el("li").append( el("code", `el("button", { textContent: "click me", "=onclick": "console.log(event)" })`)),
-				el("li").append( el("code", `el("button", { textContent: "click me", onclick: console.log })`)),
-				el("li").append( el("code", `el("button", { textContent: "click me" }, on("click", console.log))`))
-			),
+
+		el(h3, t`Removing Event Listeners`),
+		el("div", { className: "note" }).append(
 			el("p").append(...T`
-				In the first example we force to use HTML attribute (it corresponds to
-				${el("code", `<button onclick="console.log(event)">click me</button>`)}). ${el("em", t`Side note:
-				this can be useful in case of SSR.`)} To study difference, you can read a nice summary here:
-				${el("a", { textContent: "GIST @WebReflection/web_events.md", ...references.web_events })}.
+				Unlike the native addEventListener/removeEventListener pattern, DDE uses the ${el("a", {
+				textContent: "AbortSignal", ...references.mdn_abortListener })} for declarative approach for removal:
 			`)
 		),
+		el(example, { src: fileURL("./components/examples/events/abortSignal.js"), page_id }),
 
-		el(h3, t`Addons`),
+		el(h3, t`Three Ways to Handle Events`),
+		el("div", { className: "tabs" }).append(
+			el("div", { className: "tab", "data-tab": "html-attr" }).append(
+				el("h4", t`HTML Attribute Style`),
+				el(code, { src: fileURL("./components/examples/events/attribute-event.js"), page_id }),
+				el("p").append(...T`
+					Forces usage as an HTML attribute. Corresponds to
+					${el("code", `<button onclick="console.log(event)">click me</button>`)}. This can be particularly
+					useful for SSR scenarios.
+				`)
+			),
+			el("div", { className: "tab", "data-tab": "property" }).append(
+				el("h4", t`Property Assignment`),
+				el(code, { src: fileURL("./components/examples/events/property-event.js"), page_id }),
+				el("p", t`Assigns the event handler directly to the element's property.`)
+			),
+			el("div", { className: "tab", "data-tab": "addon" }).append(
+				el("h4", t`Addon Approach`),
+				el(code, { src: fileURL("./components/examples/events/chain-event.js"), page_id }),
+				el("p", t`Uses the addon pattern, see above.`)
+			)
+		),
 		el("p").append(...T`
-			From practical point of view, ${el("em", t`Addons`)} are just functions that accept any HTML element as
-			their first parameter. You can see that the ${el("code", "on(…)")} fullfills this requirement.
+			For a deeper comparison of these approaches, see
+			${el("a", { textContent: "WebReflection's detailed analysis", ...references.web_events })}.
 		`),
+
+		el(h3, t`Understanding Addons`),
 		el("p").append(...T`
-			You can use Addons as ≥3rd argument of ${el("code", "el")} function. This way is possible to extends your
-			templates by additional (3rd party) functionalities. But for now mainly, you can add events listeners:
+			Addons are a powerful pattern in DDE that extends beyond just event handling.
+			An Addon is any function that accepts an HTML element as its first parameter.
+		`),
+		el("div", { className: "callout" }).append(
+			el("h4", t`What Can Addons Do?`),
+			el("ul").append(
+				el("li", t`Add event listeners to elements`),
+				el("li", t`Set up lifecycle behaviors`),
+				el("li", t`Integrate third-party libraries`),
+				el("li", t`Create reusable element behaviors`),
+				el("li", t`Capture element references`)
+			)
+		),
+		el("p").append(...T`
+			You can use Addons as ≥3rd argument of the ${el("code", "el")} function, making it possible to
+			extend your templates with additional functionality:
 		`),
 		el(example, { src: fileURL("./components/examples/events/templateWithListeners.js"), page_id }),
 		el("p").append(...T`
-			As the example shows, you can also provide types in JSDoc+TypeScript by using global type
-			${el("code", "ddeElementAddon")}. Also notice, you can use Addons to get element reference.
+			As the example shows, you can provide types in JSDoc+TypeScript using the global type
+			${el("code", "ddeElementAddon")}. Notice how Addons can also be used to get element references.
 		`),
-		el(h3, t`Life-cycle events`),
+
+		el(h3, t`Lifecycle Events`),
 		el("p").append(...T`
-			Addons are called immediately when the element is created, even it is not connected to live DOM yet.
-			Therefore, you can understand the Addon to be “oncreate” event.
+			Addons are called immediately when an element is created, even before it's connected to the live DOM.
+			You can think of an Addon as an "oncreate" event handler.
 		`),
 		el("p").append(...T`
-			The library provide three additional live-cycle events corresponding to how they are named in a case of
-			custom elements: ${el("code", "on.connected")}, ${el("code", "on.disconnected")} and ${el("code",
-			"on.attributeChanged")}.
+			DDE provides three additional lifecycle events that correspond to custom element lifecycle callbacks:
 		`),
-		el(example, { src: fileURL("./components/examples/events/live-cycle.js"), page_id }),
-		el("p").append(...T`
-			For Custom elements, we will later introduce a way to replace ${el("code", "*Callback")} syntax with
-			${el("code", "dde:*")} events. The ${el("code", "on.*")} functions then listen to the appropriate
-			Custom Elements events (see ${el("a", { textContent: t`Custom element lifecycle callbacks | MDN`,
-			...references.mdn_customElement })}).
-		`),
-		el("p").append(...T`
-			But, in case of regular elemnets the ${el("a", references.mdn_mutation).append(el("code",
-			"MutationObserver"), " | MDN")} is internaly used to track these events. Therefore, there are some
-			drawbacks:
-		`),
-		el("ul").append(
-			el("li").append(...T`
-				To proper listener registration, you need to use ${el("code", "on.*")} not \`on("dde:*", …)\`!
-			`),
-			el("li").append(...T`
-				Use sparingly! Internally, library must loop of all registered events and fires event properly.
-				${el("strong", t`It is good practice to use the fact that if an element is removed, its children are
-				also removed!`)} In this spirit, we will introduce later the ${el("strong", t`host`)} syntax to
-				register, clean up procedures when the component is removed from the app.
-			`),
+		el("div", { className: "function-table" }).append(
+			el("dl").append(
+				el("dt", t`on.connected(callback)`),
+				el("dd", t`Fires when the element is added to the DOM`),
+
+				el("dt", t`on.disconnected(callback)`),
+				el("dd", t`Fires when the element is removed from the DOM`),
+
+				el("dt", t`on.attributeChanged(callback, attributeName)`),
+				el("dd", t`Fires when the specified attribute changes`)
+			)
 		),
-		el("p").append(...T`
-			To provide intuitive behaviour, similar also to how the life-cycle events works in other
-			frameworks/libraries, deka-dom-el library ensures that ${el("code", "on.connected")} and
-			${el("code", "on.disconnected")} are called only once and only when the element, is (dis)connected to
-			live DOM. The solution is inspired by ${el("a", { textContent: "Vue", ...references.vue_fix })}. For using
-			native behaviour re-(dis)connecting element, use:
-		`),
-		el("ul").append(
-			el("li").append(...T`custom ${el("code", "MutationObserver")} or logic in (dis)${el("code",
-			"connectedCallback")} or…`),
-			el("li").append(...T`re-add ${el("code", "on.connected")} or ${el("code", "on.disconnected")} listeners.`)
+		el(example, { src: fileURL("./components/examples/events/live-cycle.js"), page_id }),
+
+		el("div", { className: "note" }).append(
+			el("p").append(...T`
+				For regular elements (non-custom elements), DDE uses
+				${el("a", references.mdn_mutation).append(el("code", "MutationObserver"), " | MDN")}
+				internally to track lifecycle events.
+			`)
 		),
 
-		el(h3, t`Final notes`),
-		el("p", t`The library also provides a method to dispatch the events.`),
+		el("div", { className: "warning" }).append(
+			el("ul").append(
+				el("li").append(...T`
+					Always use ${el("code", "on.*")} functions, not ${el("code", "on('dde:*', ...)")}, for proper registration
+				`),
+				el("li").append(...T`
+					Use lifecycle events sparingly, as they require internal tracking
+				`),
+				el("li").append(...T`
+					Leverage parent-child relationships: when a parent is removed, all children are also removed
+				`),
+				el("li").append(...T`
+					…see section later in documentation regarding hosts elements
+				`),
+				el("li").append(...T`
+					DDE ensures that connected/disconnected events fire only once for better predictability
+				`)
+			)
+		),
+
+		el(h3, t`Dispatching Custom Events`),
+		el("p").append(...T`
+			This makes it easy to implement component communication through events,
+			following standard web platform patterns. The curried approach allows for easy reuse
+			of event dispatchers throughout your application.
+		`),
 		el(example, { src: fileURL("./components/examples/events/compareDispatch.js"), page_id }),
 
+		el(h3, t`Best Practices`),
+		el("ol").append(
+			el("li").append(...T`
+				${el("strong", "Clean up listeners")}: Use AbortSignal to prevent memory leaks
+			`),
+			el("li").append(...T`
+				${el("strong", "Leverage lifecycle events")}: For component setup and teardown
+			`),
+			el("li").append(...T`
+				${el("strong", "Delegate when possible")}: Add listeners to container elements when handling many similar elements
+			`),
+			el("li").append(...T`
+				${el("strong", "Maintain consistency")}: Choose one event binding approach and stick with it
+			`)
+		),
+
+		el("div", { className: "troubleshooting" }).append(
+			el("h4", t`Common Event Pitfalls`),
+			el("dl").append(
+				el("dt", t`Event listeners not working`),
+				el("dd", t`Ensure element is in the DOM before expecting events to fire`),
+
+				el("dt", t`Memory leaks`),
+				el("dd", t`Use AbortController to clean up listeners when elements are removed`),
+
+				el("dt", t`Lifecycle events firing unexpectedly`),
+				el("dd", t`Remember that on.connected and on.disconnected events only fire once per connection state`)
+			)
+		),
+
 		el(mnemonic)
 	);
 }
diff --git a/docs/p04-signals.html.js b/docs/p04-signals.html.js
index 0f3a6b5..3a76b56 100644
--- a/docs/p04-signals.html.js
+++ b/docs/p04-signals.html.js
@@ -1,7 +1,8 @@
 import { T, t } from "./utils/index.js";
 export const info= {
-	title: t`Signals and reactivity`,
-	description: t`Handling reactivity in UI via signals.`,
+	title: t`Signals and Reactivity`,
+	fullTitle: t`Building Reactive UIs with Signals`,
+	description: t`Managing reactive UI state with signals.`,
 };
 
 import { el } from "deka-dom-el";
@@ -43,53 +44,124 @@ const references= {
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("h2", t`Using signals to manage reactivity`),
 		el("p").append(...T`
-			How a program responds to variable data or user interactions is one of the fundamental problems of
-			programming. If we desire to solve the issue in a declarative manner, signals may be a viable approach.
+			Signals provide a simple yet powerful way to create reactive applications with DDE. They handle the
+			fundamental challenge of keeping your UI in sync with changing data in a declarative, efficient way.
 		`),
+		el("div", { class: "callout" }).append(
+			el("h4", t`What Makes Signals Special?`),
+			el("ul").append(
+				el("li", t`Fine-grained reactivity without complex state management`),
+				el("li", t`Automatic UI updates when data changes`),
+				el("li", t`Clean separation between data, logic, and UI`),
+				el("li", t`Small runtime with minimal overhead`),
+				el("li").append(...T`${el("strong", "In future")} no dependencies or framework lock-in`)
+			)
+		),
 		el(code, { src: fileURL("./components/examples/signals/intro.js"), page_id }),
 
-		el(h3, t`Introducing signals`),
+		el(h3, t`The 3-Part Structure of Signals`),
 		el("p").append(...T`
-			Let’s re-introduce
-			${el("a", { textContent: t`3PS principle`, href: "./#h-event-driven-programming--parts-separation--ps" })}.
-		`),
-		el("p").append(...T`
-			Using signals, we split program logic into the three parts. Firstly (α), we create a variable (constant)
-			representing reactive value. Somewhere later, we can register (β) a logic reacting to the signal value
-			changes. Similarly, in a remaining part (γ), we can update the signal value.
+			Signals organize your code into three distinct parts, following the
+			${el("a", { textContent: t`3PS principle`, href: "./#h-3ps" })}:
 		`),
+		el("div", { class: "signal-diagram" }).append(
+			el("div", { class: "signal-part" }).append(
+				el("h4", t`PART 1: Create Signal`),
+				el(code, { content: "const count = S(0);", page_id }),
+				el("p", t`Define a reactive value that can be observed and changed`)
+			),
+			el("div", { class: "signal-part" }).append(
+				el("h4", t`PART 2: React to Changes`),
+				el(code, { content: "S.on(count, value => updateUI(value));", page_id }),
+				el("p", t`Subscribe to signal changes with callbacks or effects`)
+			),
+			el("div", { class: "signal-part" }).append(
+				el("h4", t`PART 3: Update Signal`),
+				el(code, { content: "count.set(count.get() + 1);", page_id }),
+				el("p", t`Modify the signal value, which automatically triggers updates`)
+			)
+		),
 		el(example, { src: fileURL("./components/examples/signals/signals.js"), page_id }),
+
+		el("div", { class: "note" }).append(
+			el("p").append(...T`
+				Signals implement the ${el("a", { textContent: t`Publish–subscribe pattern`, ...references.wiki_pubsub })},
+				a form of ${el("a", { textContent: t`Event-driven programming`, ...references.wiki_event_driven })}.
+				This architecture allows different parts of your application to stay synchronized through a shared signal,
+				without direct dependencies on each other. Compare for example with ${el("a", { textContent:
+				t`fpubsub library`, ...references.fpubsub })}.
+			`)
+		),
+
+		el(h3, t`Signal Essentials: Core API`),
+		el("div", { class: "function-table" }).append(
+			el("dl").append(
+				el("dt", t`Creating a Signal`),
+				el("dd", t`S(initialValue) → creates a signal with the given value`),
+
+				el("dt", t`Reading a Signal`),
+				el("dd", t`signal.get() → returns the current value`),
+
+				el("dt", t`Writing to a Signal`),
+				el("dd", t`signal.set(newValue) → updates the value and notifies subscribers`),
+
+				el("dt", t`Subscribing to Changes`),
+				el("dd", t`S.on(signal, callback) → runs callback whenever signal changes`),
+
+				el("dt", t`Unsubscribing`),
+				el("dd").append(...T`S.on(signal, callback, { signal: abortController.signal }) → Similarly to the
+					${el("code", "on")} function to register DOM events listener.`)
+			)
+		),
 		el("p").append(...T`
-			All this is just an example of
-			${el("a", { textContent: t`Event-driven programming`, ...references.wiki_event_driven })} and
-			${el("a", { textContent: t`Publish–subscribe pattern`, ...references.wiki_pubsub })} (compare for example
-			with ${el("a", { textContent: t`fpubsub library`, ...references.fpubsub })}). All three parts can be in
-			some manner independent and still connected to the same reactive entity.
+			Signals can be created with any type of value, but they work best with
+			${el("a", { textContent: t`primitive types`, ...references.mdn_primitive })} like strings, numbers, and booleans.
+			For complex data types like objects and arrays, you'll want to use Actions (covered below).
 		`),
+
+		el(h3, t`Derived Signals: Computed Values`),
 		el("p").append(...T`
-			Signals are implemented in the library as functions. To see current value of signal, just call it without
-			any arguments ${el("code", "console.log(signal())")}. To update the signal value, pass any argument
-			${el("code", `signal('${t`a new value`}')`)}. For listenning the signal value changes, use
-			${el("code", "S.on(signal, console.log)")}.
+			Computed values (also called derived signals) automatically update when their dependencies change.
+			Create them by passing a function to S():
 		`),
+		el(example, { src: fileURL("./components/examples/signals/derived.js"), page_id }),
 		el("p").append(...T`
-			Similarly to the ${el("code", "on")} function to register DOM events listener. You can use
-			${el("code", "AbortController")}/${el("code", "AbortSignal")} to ${el("em", "off")}/stop listenning. In
-			example, you also found the way for representing “live” piece of code computation pattern (derived signal):
+			Derived signals are read-only - you can't call .set() on them. Their value is always computed
+			from their dependencies. They're perfect for transforming or combining data from other signals.
 		`),
 		el(example, { src: fileURL("./components/examples/signals/computations-abort.js"), page_id }),
 
-		el(h3, t`Signals and actions`),
+		el(h3, t`Signal Actions: For Complex State`),
 		el("p").append(...T`
-			${el("code", `S(/* ${t`primitive`} */)`)} allows you to declare simple reactive variables, typically, around
-			${el("em", t`immutable`)} ${el("a", { textContent: t`primitive types`, ...references.mdn_primitive })}.
-			However, it may also be necessary to use reactive arrays, objects, or other complex reactive structures.
+			When working with objects, arrays, or other complex data structures, Signal Actions provide
+			a structured way to modify state while maintaining reactivity.
 		`),
-		el(example, { src: fileURL("./components/examples/signals/actions-demo.js"), page_id }),
-		el("p", t`…but typical user-case is object/array (maps, sets and other mutable objects):`),
-		el(example, { src: fileURL("./components/examples/signals/actions-todos.js"), page_id }),
+		el("div", { class: "illustration" }).append(
+			el("h4", t`Actions vs. Direct Mutation`),
+			el("div", { class: "comparison" }).append(
+				el("div", { class: "good-practice" }).append(
+					el("h5", t`✅ With Actions`),
+					el(code, { content: `const todos = S([], {
+	add(text) {
+		this.value.push(text);
+		// Subscribers notified automatically
+	}
+});
+
+// Use the action
+S.action(todos, "add", "New todo");`, page_id })
+				),
+				el("div", { class: "bad-practice" }).append(
+					el("h5", t`❌ Without Actions`),
+					el(code, { content: `
+const todos = S([]);
+// Directly mutating the array
+const items = todos.get();
+items.push("New todo");
+// This WON'T trigger updates!`, page_id }))
+				),
+		),
 		el("p").append(...T`
 			In some way, you can compare it with ${el("a", { textContent: "useReducer", ...references.mdn_use_reducer })}
 			hook from React. So, the ${el("code", "S(<data>, <actions>)")} pattern creates a store “machine”. We can
@@ -98,31 +170,123 @@ export function page({ pkg, info }){
 			${el("code", "this.stopPropagation()")} in the method representing the given action. As it can be seen in
 			examples, the “store” value is available also in the function for given action (${el("code", "this.value")}).
 		`),
+		el(example, { src: fileURL("./components/examples/signals/actions-demo.js"), page_id }),
 
-		el(h3, t`Reactive DOM attributes and elements`),
-		el("p", t`There are on basic level two distinc situation to mirror dynamic value into the DOM/UI`),
-		el("ol").append(
-			el("li", t`to change some attribute(s) of existing element(s)`),
-			el("li", t`to generate elements itself dynamically – this covers conditions and loops`)
+		el("p").append(...T`
+			Actions provide these benefits:
+		`),
+		el("ul").append(
+			el("li", t`Encapsulate state change logic in named methods`),
+			el("li", t`Guarantee notifications when state changes`),
+			el("li", t`Prevent accidental direct mutations`),
+			el("li", t`Act similar to reducers in other state management libraries`)
 		),
+		el("p").append(...T`
+			Here's a more complete example of a todo list using signal actions:
+		`),
+		el(example, { src: fileURL("./components/examples/signals/actions-todos.js"), page_id }),
+
+		el("div", { class: "tip" }).append(
+			el("p").append(...T`
+				${el("strong", "Special Action Methods")}: Signal actions can implement special lifecycle hooks:
+			`),
+			el("ul").append(
+				el("li", t`[S.symbols.onclear]() - Called when the signal is cleared. Use it to clean up resources.`),
+			)
+		),
+
+		el(h3, t`Connecting Signals to the DOM`),
+		el("p").append(...T`
+			Signals really shine when connected to your UI. DDE provides several ways to bind signals to DOM elements:
+		`),
+
+		el("div", { class: "tabs" }).append(
+			el("div", { class: "tab", "data-tab": "attributes" }).append(
+				el("h4", t`Reactive Attributes`),
+				el("p", t`Bind signal values directly to element attributes, properties, or styles:`),
+				el(code, { content: `// Create a signal
+const color = S("blue");
+
+// Bind it to an element's style
+el("div", {
+	style: {
+		color, // Updates when signal changes
+		fontWeight: S(() => color.get() === "red" ? "bold" : "normal")
+	}
+}, "This text changes color");
+
+// Later:
+color.set("red"); // UI updates automatically`, page_id })
+			),
+			el("div", { class: "tab", "data-tab": "elements" }).append(
+				el("h4", t`Reactive Elements`),
+				el("p", t`Dynamically create or update elements based on signal values:`),
+				el(code, { content: `// Create an array signal
+const items = S(["Apple", "Banana", "Cherry"]);
+
+// Create a dynamic list that updates when items change
+el("ul").append(
+	S.el(items, items =>
+		items.map(item => el("li", item))
+	)
+);
+
+// Later:
+S.action(items, "push", "Dragonfruit"); // List updates automatically`, page_id })
+			)
+		),
+
+		el("p").append(...T`
+			The ${el("code", "assign")} and ${el("code", "el")} functions detect signals automatically and handle binding.
+			You can use special properties like ${el("code", "dataset")}, ${el("code", "ariaset")}, and
+			${el("code", "classList")} for fine-grained control over specific attribute types.
+		`),
 		el(example, { src: fileURL("./components/examples/signals/dom-attrs.js"), page_id }),
+
 		el("p").append(...T`
-			To derived attribute based on value of signal variable just use the signal as a value of the attribute
-			(${el("code", "assign(element, { attribute: S('value') })")}). ${el("code", "assign")}/${el("code", "el")}
-			provides ways to glue reactive attributes/classes more granularly into the DOM. Just use dedicated build-in
-			attributes ${el("code", "dataset")}, ${el("code", "ariaset")} and ${el("code", "classList")}.
-		`),
-		el("p").append(...T`
-			For computation, you can use the “derived signal” (see above) like
-			${el("code", "assign(element, { textContent: S(()=> 'Hello '+WorldSignal()) })")}. This is read-only signal
-			its value is computed based on given function and updated when any signal used in the function changes.
-		`),
-		el("p").append(...T`
-			To represent part of the template filled dynamically based on the signal value use
-			${el("code", "S.el(signal, DOMgenerator)")}. This was already used in the todo example above or see:
+			${el("code", "S.el()")} is especially powerful for conditional rendering and lists:
 		`),
 		el(example, { src: fileURL("./components/examples/signals/dom-el.js"), page_id }),
 
+		el(h3, t`Best Practices for Signals`),
+		el("p").append(...T`
+			Follow these guidelines to get the most out of signals:
+		`),
+		el("ol").append(
+			el("li").append(...T`
+				${el("strong", "Keep signals small and focused")}: Use many small signals rather than a few large ones
+			`),
+			el("li").append(...T`
+				${el("strong", "Use derived signals for computations")}: Don't recompute values in multiple places
+			`),
+			el("li").append(...T`
+				${el("strong", "Clean up signal subscriptions")}: Use AbortController or scope.host() to prevent memory leaks
+			`),
+			el("li").append(...T`
+				${el("strong", "Use actions for complex state")}: Don't directly mutate objects or arrays in signals
+			`),
+			el("li").append(...T`
+				${el("strong", "Avoid infinite loops")}: Be careful when one signal updates another in a subscription
+			`)
+		),
+
+		el("div", { class: "troubleshooting" }).append(
+			el("h4", t`Common Signal Pitfalls`),
+			el("dl").append(
+				el("dt", t`UI not updating when array/object changes`),
+				el("dd", t`Use signal actions instead of direct mutation`),
+
+				el("dt", t`Infinite update loops`),
+				el("dd", t`Check for circular dependencies between signals`),
+
+				el("dt", t`Memory leaks`),
+				el("dd", t`Use AbortController or scope.host() to clean up subscriptions`),
+
+				el("dt", t`Multiple elements updating unnecessarily`),
+				el("dd", t`Split large signals into smaller, more focused ones`)
+			)
+		),
+
 		el(mnemonic)
 	);
 }
diff --git a/docs/p05-scopes.html.js b/docs/p05-scopes.html.js
index 2572d40..fb118f1 100644
--- a/docs/p05-scopes.html.js
+++ b/docs/p05-scopes.html.js
@@ -1,7 +1,8 @@
 import { T, t } from "./utils/index.js";
 export const info= {
-	title: t`Scopes and components`,
-	description: t`Organizing UI into components`,
+	title: t`Scopes and Components`,
+	fullTitle: t`Building Maintainable UIs with Scopes and Components`,
+	description: t`Organizing UI into reusable, manageable components`,
 };
 
 import { el } from "deka-dom-el";
@@ -28,59 +29,174 @@ const references= {
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("h2", t`Using functions as UI components`),
 		el("p").append(...T`
 			For state-less components we can use functions as UI components (see “Elements” page). But in real life,
-			we may need to handle the component live-cycle and provide JavaScript the way to properly use
+			we may need to handle the component's life-cycle and provide JavaScript the way to properly use
 			the ${el("a", { textContent: t`Garbage collection`, ...references.garbage_collection })}.
 		`),
 		el(code, { src: fileURL("./components/examples/scopes/intro.js"), page_id }),
-		el("p").append(...T`The library therefore use ${el("em", t`scopes`)} to provide these functionalities.`),
+		el("p").append(...T`The library therefore uses ${el("em", t`scopes`)} to provide these functionalities.`),
 
-		el(h3, t`Scopes and hosts`),
+		el(h3, t`Understanding Host Elements and Scopes`),
 		el("p").append(...T`
-			The ${el("strong", "host")} is the name for the element representing the component. This is typically
-			element returned by function. To get reference, you can use ${el("code", "scope.host()")} to applly addons
+			The ${el("strong", "host")} is the name for the element representing the component. This is typically the
+			element returned by a function. To get a reference, you can use ${el("code", "scope.host()")}. To apply addons,
 			just use ${el("code", "scope.host(...<addons>)")}.
 		`),
+		el("p").append(...T`
+			Scopes are primarily needed when signals are used in DOM templates (with ${el("code", "el")}, ${el("code",
+				"assign")}, or ${el("code", "S.el")}). They provide a way for automatically removing signal listeners
+			and cleaning up unused signals when components are removed from the DOM.
+		`),
+		el("div", { className: "illustration" }).append(
+			el("h4", t`Component Anatomy`),
+			el("pre").append(el("code", `
+// 1. Component scope created
+el(MyComponent);
+
+function MyComponent() {
+  // 2. access the host element
+  const { host } = scope;
+
+  // 3. Add behavior to host
+  host(
+  on.click(handleClick)
+  );
+
+  // 4. Return the host element
+  return el("div", {
+  className: "my-component"
+  }).append(
+  el("h2", "Title"),
+  el("p", "Content")
+  );
+}
+			`.trim()))
+		),
+		el("div", { className: "function-table" }).append(
+			el("h4", t`scope.host()`),
+			el("dl").append(
+				el("dt", t`When called with no arguments`),
+				el("dd", t`Returns a reference to the host element (the root element of your component)`),
+
+				el("dt", t`When called with addons/callbacks`),
+				el("dd", t`Applies the addons to the host element and returns the host element`)
+			)
+		),
 		el(example, { src: fileURL("./components/examples/scopes/scopes-and-hosts.js"), page_id }),
-		el("p").append(...T`
-			To better understanding we implement function ${el("code", "elClass")} helping to create component as
-			class instances.
-		`),
-		el(example, { src: fileURL("./components/examples/scopes/class-component.js"), page_id }),
-		el("p").append(...T`
-			As you can see, the ${el("code", "scope.host()")} is stored temporarily and synchronously. Therefore, at
-			least in the beginning of using library, it is the good practise to store ${el("code", "host")} in the root
-			of your component. As it may be changed, typically when there is asynchronous code in the component.
-		`),
+
+		el("div", { className: "tip" }).append(
+			el("p").append(...T`
+				${el("strong", "Best Practice:")} Always capture the host reference at the beginning of your component
+				function using ${el("code", "const { host } = scope")} to avoid scope-related issues, especially with
+				asynchronous code.
+			`),
+			el("p").append(...T`
+				If you are interested in the implementation details, see Class-Based Components section.
+			`)
+		),
 		el(code, { src: fileURL("./components/examples/scopes/good-practise.js"), page_id }),
 
-		el(h3, t`Scopes, signals and cleaning magic`),
+		el(h3, t`Class-Based Components`),
 		el("p").append(...T`
-			The ${el("code", "host")} is internally used to register the cleaning procedure, when the component
-			(${el("code", "host")} element) is removed from the DOM.
+			While functional components are the primary pattern in DDE, you can also create class-based components.
+			For this, we implement function ${el("code", "elClass")} and use it to demonstrate implementation details
+			for better understanding of the scope logic.
 		`),
+		el(example, { src: fileURL("./components/examples/scopes/class-component.js"), page_id }),
+
+		el(h3, t`Automatic Cleanup with Scopes`),
+		el("p").append(...T`
+			One of the most powerful features of scopes is automatic cleanup when components are removed from the DOM.
+			This prevents memory leaks and ensures resources are properly released.
+		`),
+		el("div", { className: "illustration" }).append(
+			el("h4", t`Lifecycle Flow`),
+			el("pre").append(el("code", `
+1. Component created → scope established
+2. Component added to DOM → connected event
+3. Component interactions happen
+4. Component removed from DOM → disconnected event
+5. Automatic cleanup of:
+  - Event listeners
+  - Signal subscriptions
+  - Custom cleanup code
+			`))
+		),
 		el(example, { src: fileURL("./components/examples/scopes/cleaning.js"), page_id }),
+
+		el("div", { className: "note" }).append(
+			el("p").append(...T`
+				In this example, when you click "Remove", the component is removed from the DOM, and all its associated
+				resources are automatically cleaned up, including the signal subscription that updates the text content.
+				This happens because the library internally registers a disconnected event handler on the host element.
+			`)
+		),
+
+		el(h3, t`Declarative vs Imperative Components`),
 		el("p").append(...T`
-			The text content of the paragraph is changing when the value of the signal ${el("code", "textContent")}
-			is changed. Internally, there is association between ${el("code", "textContent")} and the paragraph,
-			similar to using ${el("code", `S.on(textContent, /* ${t`update the paragraph`} */)`)}.
+			The library DOM API and signals work best when used declaratively. It means you split your app's logic
+			into three parts as introduced in ${el("a", { textContent: "Signals", ...references.signals })}.
 		`),
-		el("p").append(...T`
-			This listener must be removed when the component is removed from the DOM. To do it, the library assign
-			internally ${el("code", `on.disconnected(/* ${t`remove the listener`} */)(host())`)} to the host element.
-		`),
-		el("p", { className: "notice" }).append(...T`
-			The library DOM API and signals works ideally when used declaratively. It means, you split your app logic
-			into three parts as it was itroduced in ${el("a", { textContent: "Signals", ...references.signals })}.
-		`),
-		el(code, { src: fileURL("./components/examples/scopes/declarative.js"), page_id }),
-		el("p").append(...T`
-			Strictly speaking, the imperative way of using the library is not prohibited. Just be careful (rather avoid)
-			mixing declarative approach (using signals) and imperative manipulation of elements.
-		`),
-		el(code, { src: fileURL("./components/examples/scopes/imperative.js"), page_id }),
+		el("div", { className: "note" }).append(
+			el("p").append(...T`
+				Strictly speaking, the imperative way of using the library is not prohibited. Just be careful to avoid
+				mixing the declarative approach (using signals) with imperative manipulation of elements.
+			`)
+		),
+		el("div", { className: "tabs" }).append(
+			el("div", { className: "tab", "data-tab": "declarative" }).append(
+				el("h4", t`✅ Declarative Approach`),
+				el("p", t`Define what your UI should look like based on state:`),
+				el(code, { src: fileURL("./components/examples/scopes/declarative.js"), page_id })
+			),
+			el("div", { className: "tab", "data-tab": "imperative" }).append(
+				el("h4", t`⚠️ Imperative Approach`),
+				el("p", t`Manually update the DOM in response to events:`),
+				el(code, { src: fileURL("./components/examples/scopes/imperative.js"), page_id })
+			),
+			el("div", { className: "tab", "data-tab": "mixed" }).append(
+				el("h4", t`❌ Mixed Approach`),
+				el("p", t`This approach should be avoided:`),
+				el(code, { src: fileURL("./components/examples/scopes/mixed.js"), page_id })
+			)
+		),
+
+		el(h3, t`Best Practices for Scopes and Components`),
+		el("ol").append(
+			el("li").append(...T`
+				${el("strong", "Capture host early:")} Use ${el("code", "const { host } = scope")} at component start
+			`),
+			el("li").append(...T`
+				${el("strong", "Define signals as constants:")} ${el("code", "const counter = S(0);")}
+			`),
+			el("li").append(...T`
+				${el("strong", "Prefer declarative patterns:")} Use signals to drive UI updates rather than manual DOM manipulation
+			`),
+			el("li").append(...T`
+				${el("strong", "Keep components focused:")} Each component should do one thing well
+			`),
+			el("li").append(...T`
+				${el("strong", "Add explicit cleanup:")} For resources not managed by DDE, use ${el("code", "on.disconnected")}
+			`)
+		),
+
+		el("div", { className: "troubleshooting" }).append(
+			el("h4", t`Common Scope Pitfalls`),
+			el("dl").append(
+				el("dt", t`Losing host reference in async code`),
+				el("dd", t`Store host reference early with const { host } = scope`),
+
+				el("dt", t`Memory leaks from custom resources`),
+				el("dd", t`Use host(on.disconnected(cleanup)) for manual resource cleanup`),
+
+				el("dt", t`Event handlers with incorrect 'this'`),
+				el("dd", t`Use arrow functions or .bind() to preserve context`),
+
+				el("dt", t`Mixing declarative and imperative styles`),
+				el("dd", t`Choose one approach and be consistent throughout a component`)
+			)
+		),
 
 		el(mnemonic)
 	);
diff --git a/docs/p06-customElement.html.js b/docs/p06-customElement.html.js
index 0bc4c81..f81d957 100644
--- a/docs/p06-customElement.html.js
+++ b/docs/p06-customElement.html.js
@@ -1,7 +1,8 @@
 import { T, t } from "./utils/index.js";
 export const info= {
 	title: t`Web Components`,
-	description: t`Using custom elements in combinantion with DDE`,
+	fullTitle: t`Using Web Components with DDE: Better Together`,
+	description: t`Using custom elements in combination with DDE`,
 };
 
 import { el } from "deka-dom-el";
@@ -53,90 +54,220 @@ const references= {
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("h2", t`Using web components in combinantion with DDE`),
 		el("p").append(...T`
-			The DDE library allows for use within ${el("a", references.mdn_web_components).append( el("strong",
-			t`Web Components`) )} for dom-tree generation. However, in order to be able to use signals (possibly
-			mapping to registered ${el("a", references.mdn_observedAttributes).append( el("code", "observedAttributes")
-			)}) and additional functionality is (unfortunately) required to use helpers provided by the library.
+			DDE pairs powerfully with ${el("a", references.mdn_web_components).append(el("strong", t`Web Components`))}
+			to create reusable, encapsulated custom elements with all the benefits of DDE's declarative DOM
+			construction and reactivity system.
 		`),
+		el("div", { className: "callout" }).append(
+			el("h4", t`Why Combine DDE with Web Components?`),
+			el("ul").append(
+				el("li", t`Declarative DOM creation within your components`),
+				el("li", t`Reactive attribute updates through signals`),
+				el("li", t`Simplified event handling with the same events API`),
+				el("li", t`Clean component lifecycle management`),
+				el("li", t`Improved code organization with scopes`)
+			)
+		),
 		el(code, { src: fileURL("./components/examples/customElement/intro.js"), page_id }),
 
-		el(h3, t`Custom Elements Introduction`),
+		el(h3, t`Getting Started: Web Components Basics`),
 		el("p").append(...T`
-			Web Components, specifically Custom Elements, are a set of web platform APIs that allow you to create
-			new HTML tags with custom functionality encapsulated within them. This allows for the creation of reusable
-			components that can be used across web applications.
+			Web Components are a set of standard browser APIs that let you create custom HTML elements with
+			encapsulated functionality. They consist of three main technologies:
 		`),
+		el("ul").append(
+			el("li").append(...T`
+				${el("strong", "Custom Elements:")} Create your own HTML tags with JS-defined behavior
+			`),
+			el("li").append(...T`
+				${el("strong", "Shadow DOM:")} Encapsulate styles and markup within a component
+			`),
+			el("li").append(...T`
+				${el("strong", "HTML Templates:")} Define reusable markup structures
+			`)
+		),
 		el("p").append(...T`
-			To start with, let’s see how to use native Custom Elements. As starting point please read
-			${el("a", references.mdn_custom_elements).append( el("strong", t`Using Custom Elements`), t` on MDN` )}.
-			To sum up and for mnemonic see following code overview:
+			Let's start with a basic Custom Element example without DDE to establish the foundation:
 		`),
 		el(code, { src: fileURL("./components/examples/customElement/native-basic.js"), page_id }),
+
+		el("div", { className: "note" }).append(
+			el("p").append(...T`
+				For complete information on Web Components, see the
+				${el("a", references.mdn_custom_elements).append(el("strong", t`MDN documentation`))}.
+				Also, ${el("a", references.custom_elements_tips).append(el("strong", t`Handy Custom Elements Patterns`))}
+				provides useful techniques for connecting attributes with properties.
+			`)
+		),
+
+		el(h3, t`DDE Integration: Step 1 - Event Handling`),
 		el("p").append(...T`
-			For more advanced use of Custom Elements, the summary ${el("a", references.custom_elements_tips)
-			.append( el("strong", t`Handy Custom Elements Patterns`) )} may be useful. Especially pay attention to
-			linking HTML attributes and defining setters/getters, this is very helpful to use in combination with
-			the library (${el("code", `el(HTMLCustomElement.tagName, { customAttribute: "${t`new-value`}" });`)}).
-		`),
-		el("p").append(...T`
-			Also see the Life Cycle Events sections, very similarly we would like to use
-			${el("a", { textContent: t`DDE events`, href: "./p03-events.html", title: t`See events part of the library
-			documentation` })}. To do it, the library provides function ${el("code", "customElementWithDDE")}…
+			The first step in integrating DDE with Web Components is enabling DDE's event system to work with your
+			Custom Elements. This is done with ${el("code", "customElementWithDDE")}, which makes your Custom Element
+			compatible with DDE's event handling.
 		`),
+		el("div", { className: "function-table" }).append(
+			el("h4", t`customElementWithDDE`),
+			el("dl").append(
+				el("dt", t`Purpose`),
+				el("dd", t`Enables DDE's event system to work with your Custom Element`),
+				el("dt", t`Usage`),
+				el("dd", t`customElementWithDDE(YourElementClass)`),
+				el("dt", t`Benefits`),
+				el("dd", t`Allows using on.connected(), on.disconnected(), etc. with your element`)
+			)
+		),
 		el(example, { src: fileURL("./components/examples/customElement/customElementWithDDE.js"), page_id }),
 
-		el("h3", t`Custom Elements with DDE`),
+		el("div", { className: "tip" }).append(
+			el("p").append(...T`
+				${el("strong", "Key Point:")} The ${el("code", "customElementWithDDE")} function adds event dispatching
+				to your Custom Element lifecycle methods, making them work seamlessly with DDE's event system.
+			`)
+		),
+
+		el(h3, t`DDE Integration: Step 2 - Rendering Components`),
 		el("p").append(...T`
-			The ${el("code", "customElementWithDDE")} function is only (small) part of the inregration of the library.
-			More important for coexistence is render component function as a body of the Custom Element. For that, you
-			can use ${el("code", "customElementRender")} with arguments instance reference, target for connection,
-			render function and optional properties (will be passed to the render function) see later…
+			The next step is to use DDE's component rendering within your Custom Element. This is done with
+			${el("code", "customElementRender")}, which connects your DDE component function to the Custom Element.
 		`),
+		el("div", { className: "function-table" }).append(
+			el("h4", t`customElementRender`),
+			el("dl").append(
+				el("dt", t`Purpose`),
+				el("dd", t`Connects a DDE component function to a Custom Element`),
+				el("dt", t`Parameters`),
+				el("dd").append(
+					el("ol").append(
+						el("li", t`Target (usually this or this.shadowRoot)`),
+						el("li", t`Component function that returns a DOM tree`),
+						el("li", t`Optional: Attributes transformer function (default or S.observedAttributes)`)
+					)
+				),
+				el("dt", t`Returns`),
+				el("dd", t`The rendered DOM tree`)
+			)
+		),
 		el(example, { src: fileURL("./components/examples/customElement/dde.js"), page_id }),
+
+		el("div", { className: "note" }).append(
+			el("p").append(...T`
+				In this example, we're using Shadow DOM (${el("code", "this.attachShadow()")}) for encapsulation,
+				but you can also render directly to the element with ${el("code", "customElementRender(this, ...)")}.
+			`)
+		),
+
+		el(h3, t`Reactive Web Components with Signals`),
 		el("p").append(...T`
-			…as you can see, you can use components created based on the documentation previously introduced. To unlock
-			full potential, use with combination ${el("code", "customElementWithDDE")} (allows to use livecycle events)
-			and ${el("code", "observedAttributes")} (converts attributes to render function arguments —
-			${el("em", "default")}) or ${el("code", "S.observedAttributes")} (converts attributes to signals).
+			One of the most powerful features of integrating DDE with Web Components is connecting HTML attributes
+			to DDE's reactive signals system. This creates truly reactive custom elements.
+		`),
+		el("div", { className: "tip" }).append(
+			el("p").append(...T`
+				${el("strong", "Two Ways to Handle Attributes:")}
+			`),
+			el("ol").append(
+				el("li").append(...T`
+					${el("code", "observedAttributes")} - Passes attributes as regular values (static)
+				`),
+				el("li").append(...T`
+					${el("code", "S.observedAttributes")} - Transforms attributes into signals (reactive)
+				`)
+			)
+		),
+		el("p").append(...T`
+			Using ${el("code", "S.observedAttributes")} creates a reactive connection between your element's attributes
+			and its internal rendering. When attributes change, your component automatically updates!
 		`),
 		el(example, { src: fileURL("./components/examples/customElement/observedAttributes.js"), page_id }),
 
+		el("div", { className: "callout" }).append(
+			el("h4", t`How S.observedAttributes Works`),
+			el("ol").append(
+				el("li", t`Takes each attribute listed in static observedAttributes`),
+				el("li", t`Creates a DDE signal for each one`),
+				el("li", t`Automatically updates these signals when attributes change`),
+				el("li", t`Passes the signals to your component function`),
+				el("li", t`Your component reacts to changes through signal subscriptions`)
+			)
+		),
 
-		el(h3, t`Shadow DOM`),
+		el(h3, t`Working with Shadow DOM`),
 		el("p").append(...T`
-			Shadow DOM is a web platform feature that allows for the encapsulation of a component’s internal DOM tree
-			from the rest of the document. This means that styles and scripts applied to the document will not affect
-			the component’s internal DOM, and vice versa.
+			Shadow DOM provides encapsulation for your component's styles and markup. When using DDE with Shadow DOM,
+			you get the best of both worlds: encapsulation plus declarative DOM creation.
 		`),
+		el("div", { className: "illustration" }).append(
+			el("h4", t`Shadow DOM Encapsulation`),
+			el("pre").append(el("code", `
+<my-custom-element>
+  ┌─────────────────────────┐
+    #shadow-root
+
+      Created with DDE:
+    ┌──────────────────┐
+      <div>
+       <h2>Title</h2>
+       <p>Content</p>
+			`))
+		),
 		el(example, { src: fileURL("./components/examples/customElement/shadowRoot.js"), page_id }),
+
 		el("p").append(...T`
-			Regarding to ${el("code", "this.attachShadow({ mode: 'open' })")} see quick overview
-			${el("a", { textContent: t`Using Shadow DOM`, ...references.mdn_shadow_dom_depth })}. An another source of
-			information can be ${el("a", { textContent: t`Shadow DOM in Depth`, ...references.shadow_dom_depth })}.
+			For more information on Shadow DOM, see
+			${el("a", { textContent: t`Using Shadow DOM`, ...references.mdn_shadow_dom_depth })}, or the comprehensive
+			${el("a", { textContent: t`Shadow DOM in Depth`, ...references.shadow_dom_depth })}.
 		`),
+
+		el(h3, t`Working with Slots`),
 		el("p").append(...T`
 			Besides the encapsulation, the Shadow DOM allows for using the ${el("a", references.mdn_shadow_dom_slot).append(
 			el("strong", t`<slot>`), t` element(s)`)}. You can simulate this feature using ${el("code", "simulateSlots")}:
 		`),
 		el(example, { src: fileURL("./components/examples/customElement/simulateSlots.js"), page_id }),
+		el("div", { className: "function-table" }).append(
+			el("h4", t`simulateSlots`),
+			el("dl").append(
+				el("dt", t`Purpose`),
+				el("dd", t`Provides slot functionality when you cannot/do not want to use shadow DOM`),
+				el("dt", t`Parameters`),
+				el("dd", t`A mapping object of slot names to DOM elements`)
+			)
+		),
+
+		el(h3, t`Best Practices for Web Components with DDE`),
 		el("p").append(...T`
-			To sum up:
+			When combining DDE with Web Components, follow these recommendations:
 		`),
-		el("ul").append(
+		el("ol").append(
 			el("li").append(...T`
-				The use of shadow DOM to encapsulate the internal structure of the custom element, which affects how
-				the custom element can be styled and modified using JavaScript and CSS.
+				${el("strong", "Always use customElementWithDDE")} to enable event integration
 			`),
 			el("li").append(...T`
-				The ability to access and modify the internal structure of the custom element using JavaScript, which
-				is affected by the use of shadow DOM and the mode of the shadow DOM.
+				${el("strong", "Prefer S.observedAttributes")} for reactive attribute connections
 			`),
 			el("li").append(...T`
-				The use of slots to allow for the insertion of content from the parent document into the custom
-				element, which is affected by the use of shadow DOM and the mode of the shadow DOM.
+				${el("strong", "Create reusable component functions")} that your custom elements render
 			`),
+			el("li").append(...T`
+				${el("strong", "Use scope.host()")} to clean up event listeners and subscriptions
+			`),
+			el("li").append(...T`
+				${el("strong", "Add setters and getters")} for better property access to your element
+			`)
+		),
+
+		el("div", { className: "troubleshooting" }).append(
+			el("h4", t`Common Issues`),
+			el("dl").append(
+				el("dt", t`Events not firing properly`),
+				el("dd", t`Make sure you called customElementWithDDE before defining the element`),
+				el("dt", t`Attributes not updating`),
+				el("dd", t`Check that you've properly listed them in static observedAttributes`),
+				el("dt", t`Component not rendering`),
+				el("dd", t`Verify customElementRender is called in connectedCallback, not constructor`)
+			)
 		),
 
 		el(mnemonic)
diff --git a/docs/p07-debugging.html.js b/docs/p07-debugging.html.js
new file mode 100644
index 0000000..c9b442e
--- /dev/null
+++ b/docs/p07-debugging.html.js
@@ -0,0 +1,192 @@
+import { T, t } from "./utils/index.js";
+export const info= {
+	title: t`Debugging`,
+	fullTitle: t`Debugging applications with deka-dom-el`,
+	description: t`Techniques for debugging applications using deka-dom-el, especially signals.`,
+};
+
+import { el } from "deka-dom-el";
+import { simplePage } from "./layout/simplePage.html.js";
+import { example } from "./components/example.html.js";
+import { h3 } from "./components/pageUtils.html.js";
+import { code } from "./components/code.html.js";
+/** @param {string} url */
+const fileURL= url=> new URL(url, import.meta.url);
+
+/** @param {import("./types.d.ts").PageAttrs} attrs */
+export function page({ pkg, info }){
+	const page_id= info.id;
+	return el(simplePage, { info, pkg }).append(
+		el("p").append(...T`
+			Debugging is an essential part of application development. This guide provides techniques
+			and best practices for debugging applications built with deka-dom-el, with a focus on signals.
+		`),
+
+		el(h3, t`Debugging signals`),
+		el("p").append(...T`
+			Signals are reactive primitives that update the UI when their values change. When debugging signals,
+			you need to track their values, understand their dependencies, and identify why updates are or aren't happening.
+		`),
+
+		el("h4", t`Inspecting signal values`),
+		el("p").append(...T`
+			The simplest way to debug a signal is to log its current value by calling the get method:
+		`),
+		el(code, { content: `
+const signal = S(0);
+console.log('Current value:', signal.get());
+// without triggering updates
+console.log('Current value:', signal.valueOf());
+			`, page_id }),
+		el("p").append(...T`
+			You can also monitor signal changes by adding a listener:
+		`),
+		el(code, {
+			content:
+			"// Log every time the signal changes\nS.on(signal, value => console.log('Signal changed:', value));",
+			page_id }),
+
+		el("h4", t`Debugging derived signals`),
+		el("p").append(...T`
+			With derived signals (created with ${el("code", "S(() => computation))")}), debugging is a bit more complex
+			because the value depends on other signals. To understand why a derived signal isn't updating correctly:
+		`),
+		el("ol").append(
+			el("li", t`Check that all dependency signals are updating correctly`),
+			el("li", t`Add logging inside the computation function to see when it runs`),
+			el("li", t`Verify that the computation function actually accesses the signal values with .get()`)
+		),
+		el(example, { src: fileURL("./components/examples/debugging/consoleLog.js"), page_id }),
+
+		el(h3, t`Common signal debugging issues`),
+		el("h4", t`Signal updates not triggering UI changes`),
+		el("p").append(...T`
+			If signal updates aren't reflected in the UI, check:
+		`),
+		el("ul").append(
+			el("li", t`That you're using signal.set() to update the value, not modifying objects/arrays directly`),
+			el("li", t`For mutable objects, ensure you're using actions or making proper copies before updating`),
+			el("li", t`That the signal is actually connected to the DOM element (check your S.el or attribute binding code)`)
+		),
+		el(code, { src: fileURL("./components/examples/debugging/mutations.js"), page_id }),
+
+		el("h4", t`Memory leaks with signal listeners`),
+		el("p").append(...T`
+			Signal listeners can cause memory leaks if not properly cleaned up. Always use AbortSignal
+			to cancel listeners.
+		`),
+
+		el("h4", t`Performance issues with frequently updating signals`),
+		el("p").append(...T`
+			If you notice performance issues with signals that update very frequently:
+		`),
+		el("ul").append(
+			el("li", t`Consider debouncing or throttling signal updates`),
+			el("li", t`Make sure derived signals don't perform expensive calculations unnecessarily`),
+			el("li", t`Keep signal computations focused and minimal`)
+		),
+		el(code, { src: fileURL("./components/examples/debugging/debouncing.js"), page_id }),
+
+		el(h3, t`Browser DevTools tips for deka-dom-el`),
+		el("p").append(...T`
+			When debugging in the browser, deka-dom-el provides several helpful DevTools-friendly features:
+		`),
+
+		el("h4", t`Identifying components in the DOM`),
+		el("p").append(...T`
+			deka-dom-el marks components in the DOM with special comment nodes to help you identify component boundaries.
+			Components created with ${el("code", "el(ComponentFunction)")} are marked with comment nodes
+			${el("code", "<!--<dde:mark type=\"component\" name=\"MyComponent\" host=\"parentElement\"/>-->")} and
+			includes:
+		`),
+		el("ul").append(
+			el("li", "type - Identifies the type of marker (\"component\", \"reactive\", or \"later\")"),
+			el("li", "name - The name of the component function"),
+			el("li", "host - Indicates whether the host is \"this\" (for DocumentFragments) or \"parentElement\""),
+		),
+
+		el("h4", t`Finding reactive elements in the DOM`),
+		el("p").append(...T`
+			When using ${el("code", "S.el()")}, deka-dom-el creates reactive elements in the DOM
+			that are automatically updated when signal values change. These elements are wrapped in special
+			comment nodes for debugging (to be true they are also used internally, so please do not edit them by hand):
+		`),
+		el(code, { src: fileURL("./components/examples/debugging/dom-reactive-mark.js"), page_id }),
+		el("p").append(...T`
+			This is particularly useful when debugging why a reactive section isn't updating as expected.
+			You can inspect the elements between the comment nodes to see their current state and the
+			signal connections through \`__dde_reactive\` of the host element.
+		`),
+
+		el("h4", t`DOM inspection properties`),
+		el("p").append(...T`
+			Elements created with the deka-dom-el library have special properties to aid in debugging:
+		`),
+		el("p").append(...T`
+			${el("code", "<element>.__dde_reactive")} - An array property on DOM elements that tracks signal-to-element
+			relationships.  This allows you to quickly identify which elements are reactive and what signals they're
+			bound to.  Each entry in the array contains:
+		`),
+		el("ul").append(
+			el("li", "A pair of signal and listener function: [signal, listener]"),
+			el("li", "Additional context information about the element or attribute"),
+			el("li", "Automatically managed by signal.el(), signal.observedAttributes(), and processReactiveAttribute()")
+		),
+		el("p").append(...T`
+			These properties make it easier to understand the reactive structure of your application when inspecting elements.
+		`),
+		el(example, { src: fileURL("./components/examples/signals/debugging-dom.js"), page_id }),
+
+		el("h4", t`Examining signal connections`),
+		el("p").append(...T`
+			${el("code", "<signal>.__dde_signal")} - A Symbol property used to identify and store the internal state of
+			signal objects. It contains the following information:
+		`),
+		el("ul").append(
+			el("li", "listeners: A Set of functions called when the signal value changes"),
+			el("li", "actions: Custom actions that can be performed on the signal"),
+			el("li", "onclear: Functions to run when the signal is cleared"),
+			el("li", "host: Reference to the host element/scope"),
+			el("li", "defined: Stack trace information for debugging"),
+			el("li", "readonly: Boolean flag indicating if the signal is read-only")
+		),
+		el("p").append(...T`
+			…to determine the current value of the signal, call ${el("code", "signal.valueOf()")}.
+		`),
+		el("p").append(...T`
+			You can inspect (host) element relationships and bindings with signals in the DevTools console using
+			${el("code", "$0.__dde_reactive")} (for currently selected element). In the console you will see a list of
+			${el("code", "[ [ signal, listener ], element, property ]")}, where:
+		`),
+		el("ul").append(
+			el("li", "signal — the signal triggering the changes"),
+			el("li", "listener — the listener function (this is an internal function for DDE)"),
+			el("li", "element — the DOM element that is bound to the signal"),
+			el("li", "property — the attribute or property name which is changing based on the signal"),
+		),
+		el("p").append(...T`
+			…the structure of \`__dde_reactive\` utilizes the browser's behavior of packing the first field,
+			so you can see the element and property that changes in the console right away.
+		`),
+
+		el("h4", t`Debugging with breakpoints`),
+		el("p").append(...T`
+			Effective use of breakpoints can help track signal flow:
+		`),
+		el("ul").append(
+			el("li").append(...T`
+				Set breakpoints in signal update methods to track when values change
+			`),
+			el("li").append(...T`
+				Use conditional breakpoints to only break when specific signals change to certain values
+			`),
+			el("li").append(...T`
+				Set breakpoints in your signal computation functions to see when derived signals recalculate
+			`),
+			el("li").append(...T`
+				Use performance profiling to identify bottlenecks in signal updates
+			`)
+		),
+
+	);
+}
diff --git a/docs/p08-extensions.html.js b/docs/p08-extensions.html.js
new file mode 100644
index 0000000..826dd77
--- /dev/null
+++ b/docs/p08-extensions.html.js
@@ -0,0 +1,255 @@
+import { T, t } from "./utils/index.js";
+export const info= {
+	title: t`Extensions and 3rd Party`,
+	fullTitle: t`Extending deka-dom-el with Third-Party Functionalities`,
+	description: t`How to extend deka-dom-el with third-party libraries and custom functionalities.`,
+};
+
+import { el } from "deka-dom-el";
+import { simplePage } from "./layout/simplePage.html.js";
+import { h3 } from "./components/pageUtils.html.js";
+import { code } from "./components/code.html.js";
+/** @param {string} url */
+const fileURL= url=> new URL(url, import.meta.url);
+
+/** @param {import("./types.js").PageAttrs} attrs */
+export function page({ pkg, info }){
+	const page_id= info.id;
+	return el(simplePage, { info, pkg }).append(
+		el("p").append(...T`
+			deka-dom-el is designed with extensibility in mind. This page covers how to separate
+			third-party functionalities and integrate them seamlessly with the library, focusing on
+			proper resource cleanup and interoperability.
+		`),
+
+		el(h3, t`DOM Element Extensions with Addons`),
+		el("p").append(...T`
+			The primary method for extending DOM elements in deka-dom-el is through the Addon pattern.
+			Addons are functions that take an element and applying some functionality to it. This pattern enables a
+			clean, functional approach to element enhancement.
+		`),
+		el("div", { className: "callout" }).append(
+			el("h4", t`What are Addons?`),
+			el("p").append(...T`
+				Addons are simply functions with the signature: (element) => void. They:
+			`),
+			el("ul").append(
+				el("li", t`Accept a DOM element as input`),
+				el("li", t`Apply some behavior, property, or attribute to the element`),
+			)
+		),
+		el(code, { content: `
+// Basic structure of an addon
+function myAddon(config) {
+	return function(element) {
+		// Apply functionality to element
+		element.dataset.myAddon = config.option;
+	};
+}
+
+// Using an addon
+el("div", { id: "example" }, myAddon({ option: "value" }));
+		`.trim(), page_id }),
+
+		el(h3, t`Resource Cleanup with Abort Signals`),
+		el("p").append(...T`
+			When extending elements with functionality that uses resources like event listeners, timers,
+			or external subscriptions, it's critical to clean up these resources when the element is removed
+			from the DOM. deka-dom-el provides utilities for this through AbortSignal integration.
+		`),
+		el("div", { className: "tip" }).append(
+			el("p").append(...T`
+				The ${el("code", "on.disconnectedAsAbort")} utility creates an AbortSignal that automatically
+				triggers when an element is disconnected from the DOM, making cleanup much easier to manage.
+			`)
+		),
+		el(code, { content: `
+// Third-party library addon with proper cleanup
+function externalLibraryAddon(config, signal) {
+	return function(element) {
+		// Initialize the third-party library
+		const instance = new ExternalLibrary(element, config);
+
+		// Set up cleanup when the element is removed
+		signal.addEventListener('abort', () => {
+			instance.destroy();
+		});
+
+		return element;
+	};
+}
+// dde component
+function Component(){
+	const { host }= scope;
+	const signal= on.disconnectedAsAbort(host);
+	return el("div", null, externalLibraryAddon({ option: "value" }, signal));
+}
+		`.trim(), page_id }),
+
+		el(h3, t`Building Library-Independent Extensions`),
+		el("p").append(...T`
+			When creating extensions, it's a good practice to make them as library-independent as possible.
+			This approach enables better interoperability and future-proofing.
+		`),
+		el("div", { className: "illustration" }).append(
+			el("h4", t`Library-Independent vs. Library-Dependent Extension`),
+			el("div", { className: "tabs" }).append(
+				el("div", { className: "tab" }).append(
+					el("h5", t`✅ Library-Independent`),
+					el(code, { content: `
+function enhancementElement({ signal, ...config }) {
+	// do something
+	return function(element) {
+		// do something
+		signal.addEventListener('abort', () => {
+			// do cleanup
+		});
+	};
+}
+`.trim(), page_id })
+				),
+				el("div", { className: "tab" }).append(
+					el("h5", t`⚠️ Library-Dependent`),
+					el(code, { content: `
+// Tightly coupled to deka-dom-el
+function enhancementElement(config) {
+	return function(element) {
+		// do something
+		on.disconnected(()=> {
+			// do cleanup
+		})(element);
+	};
+}
+					`.trim(), page_id })
+				)
+			)
+		),
+
+		el(h3, t`Signal Extensions and Future Compatibility`),
+		el("p").append(...T`
+			Unlike DOM elements, signal functionality in deka-dom-el currently lacks a standardized
+			way to create library-independent extensions. This is because signals are implemented
+			differently across libraries.
+		`),
+		el("div", { className: "note" }).append(
+			el("p").append(...T`
+				In the future, JavaScript may include built-in signals through the
+				${el("a", { href: "https://github.com/tc39/proposal-signals", textContent: "TC39 Signals Proposal" })}.
+				deka-dom-el is designed with future compatibility in mind and will hopefully support these
+				native signals without breaking changes when they become available.
+			`)
+		),
+		el("p").append(...T`
+			For now, when extending signals functionality, focus on clear interfaces and isolation to make
+			future migration easier.
+		`),
+		el(code, { content: `
+// Signal extension with clear interface
+function createEnhancedSignal(initialValue) {
+	const signal = S(initialValue);
+
+	// Extension functionality
+	const increment = () => signal.set(signal.get() + 1);
+	const decrement = () => signal.set(signal.get() - 1);
+
+	// Return the original signal with added methods
+	return Object.assign(signal, {
+		increment,
+		decrement
+	});
+}
+
+// Usage
+const counter = createEnhancedSignal(0);
+el("button")({ onclick: () => counter.increment() }, "Increment");
+el("div", S.text\`Count: \${counter}\`);
+		`.trim(), page_id }),
+
+		el(h3, t`Using Signals Independently`),
+		el("p").append(...T`
+			While signals are tightly integrated with DDE's DOM elements, you can also use them independently.
+			This can be useful when you need reactivity in non-UI code or want to integrate with other libraries.
+		`),
+		el("p").append(...T`
+			There are two ways to import signals:
+		`),
+		el("ol").append(
+			el("li").append(...T`
+				${el("strong", "Standard import")}: ${el("code", "import { S } from \"deka-dom-el/signals\";")}
+				— This automatically registers signals with DDE's DOM reactivity system
+			`),
+			el("li").append(...T`
+				${el("strong", "Independent import")}: ${el("code", "import { S } from \"deka-dom-el/src/signals-lib\";")}
+				— This gives you just the signal system without DOM integration
+			`)
+		),
+		el(code, { content: `// Independent signals without DOM integration
+import { signal as S, isSignal } from "deka-dom-el/src/signals-lib";
+
+// Create and use signals as usual
+const count = S(0);
+const doubled = S(() => count.get() * 2);
+
+// Subscribe to changes
+S.on(count, value => console.log(value));
+
+// Update signal value
+count.set(5); // Logs: 5
+console.log(doubled.get()); // 10`, page_id }),
+		el("p").append(...T`
+			The independent signals API includes all core functionality (${el("code", "S()")}, ${el("code", "S.on()")},
+			${el("code", "S.action()")}).
+		`),
+		el("div", { class: "callout" }).append(
+			el("h4", t`When to Use Independent Signals`),
+			el("ul").append(
+				el("li", t`For non-UI state management in your application`),
+				el("li", t`When integrating with other libraries or frameworks`),
+				el("li", t`To minimize bundle size when you don't need DOM integration`)
+			)
+		),
+
+		el(h3, t`Best Practices for Extensions`),
+		el("ol").append(
+			el("li").append(...T`
+				${el("strong", "Use AbortSignals for cleanup:")} Always implement proper resource cleanup with
+				${el("code", "on.disconnectedAsAbort")} or similar mechanisms
+			`),
+			el("li").append(...T`
+				${el("strong", "Separate core logic from library adaptation:")} Make your core functionality work
+				with standard DOM APIs when possible
+			`),
+			el("li").append(...T`
+				${el("strong", "Document clearly:")} Provide clear documentation on how your extension works
+				and what resources it uses
+			`),
+			el("li").append(...T`
+				${el("strong", "Follow the Addon pattern:")} Keep to the (element) => element signature for
+				DOM element extensions
+			`),
+			el("li").append(...T`
+				${el("strong", "Avoid modifying global state:")} Extensions should be self-contained and not
+				affect other parts of the application
+			`)
+		),
+
+		el("div", { className: "troubleshooting" }).append(
+			el("h4", t`Common Extension Pitfalls`),
+			el("dl").append(
+				el("dt", t`Leaking event listeners or resources`),
+				el("dd", t`Always use AbortSignal-based cleanup to automatically remove listeners when elements
+					are disconnected`),
+
+				el("dt", t`Tight coupling with library internals`),
+				el("dd", t`Focus on standard DOM APIs and clean interfaces rather than depending on deka-dom-el
+					implementation details`),
+
+				el("dt", t`Mutating element prototypes`),
+				el("dd", t`Prefer compositional approaches with addons over modifying element prototypes`),
+
+				el("dt", t`Complex initialization in addons`),
+				el("dd", t`Split complex logic into a separate initialization function that the addon can call`)
+			)
+		)
+	);
+}
diff --git a/docs/p09-ssr.html.js b/docs/p09-ssr.html.js
new file mode 100644
index 0000000..4a20fb1
--- /dev/null
+++ b/docs/p09-ssr.html.js
@@ -0,0 +1,138 @@
+import { T, t } from "./utils/index.js";
+export const info= {
+	title: t`Server-Side Rendering (SSR)`,
+	fullTitle: t`Server-Side Rendering with deka-dom-el`,
+	description: t`Using deka-dom-el for server-side rendering with jsdom to generate static HTML.`,
+};
+
+import { el } from "deka-dom-el";
+import { simplePage } from "./layout/simplePage.html.js";
+import { h3 } from "./components/pageUtils.html.js";
+import { code } from "./components/code.html.js";
+/** @param {string} url */
+const fileURL= url=> new URL(url, import.meta.url);
+
+/** @param {import("./types.js").PageAttrs} attrs */
+export function page({ pkg, info }){
+	const page_id= info.id;
+	return el(simplePage, { info, pkg }).append(
+		el("div", { className: "warning" }).append(
+			el("p").append(...T`
+				This part of the documentation is primarily intended for technical enthusiasts and authors of
+				3rd-party libraries. It describes an advanced feature, not a core part of the library. Most users will
+				not need to implement this functionality directly in their applications. This capability will hopefully
+				be covered by third-party libraries or frameworks that provide simpler SSR integration using
+				deka-dom-el.
+			`)
+		),
+		el("p").append(...T`
+			deka-dom-el isn't limited to browser environments. Thanks to its flexible architecture,
+			it can be used for server-side rendering (SSR) to generate static HTML files.
+			This is achieved through integration with for example ${el("a", { href: "https://github.com/tmpvar/jsdom",
+			textContent: "jsdom" })}, a JavaScript implementation of web standards for Node.js.
+		`),
+		el(code, { src: fileURL("./components/examples/ssr/intro.js"), page_id }),
+
+		el(h3, t`Why Server-Side Rendering?`),
+		el("p").append(...T`
+			SSR offers several benefits:
+		`),
+		el("ul").append(
+			el("li", t`Improved SEO — Search engines can easily index fully rendered content`),
+			el("li", t`Faster initial page load — Users see content immediately without waiting for JavaScript to load`),
+			el("li", t`Better performance on low-powered devices — Less JavaScript processing on the client`),
+			el("li", t`Content available without JavaScript — Useful for users who have disabled JavaScript`),
+			el("li", t`Static site generation — Build files once, serve them many times`)
+		),
+
+		el(h3, t`How jsdom Integration Works`),
+		el("p").append(...T`
+			The jsdom export in deka-dom-el provides the necessary tools to use the library in Node.js
+			by integrating with jsdom. Here's what it does:
+		`),
+		el("ol").append(
+			el("li", t`Creates a virtual DOM environment in Node.js using jsdom`),
+			el("li", t`Registers DOM globals like HTMLElement, document, etc. for deka-dom-el to use`),
+			el("li", t`Sets an SSR flag in the environment to enable SSR-specific behaviors`),
+			el("li", t`Provides a promise queue system for managing async operations during rendering`),
+			el("li", t`Handles DOM property/attribute mapping differences between browsers and jsdom`)
+		),
+		el(code, { src: fileURL("./components/examples/ssr/start.js"), page_id }),
+
+		el(h3, t`Basic SSR Example`),
+		el("p").append(...T`
+			Here's a simple example of how to use deka-dom-el for server-side rendering in a Node.js script:
+		`),
+		el(code, { src: fileURL("./components/examples/ssr/basic-example.js"), page_id }),
+
+		el(h3, t`Building a Static Site Generator`),
+		el("p").append(...T`
+			You can build a complete static site generator with deka-dom-el. In fact, this documentation site
+			is built using deka-dom-el for server-side rendering! Here's how the documentation build process works:
+		`),
+		el(code, { src: fileURL("./components/examples/ssr/static-site-generator.js"), page_id }),
+
+		el(h3, t`Working with Async Content in SSR`),
+		el("p").append(...T`
+			The jsdom export includes a queue system to handle asynchronous operations during rendering.
+			This is crucial for components that fetch data or perform other async tasks.
+		`),
+		el(code, { src: fileURL("./components/examples/ssr/async-data.js"), page_id }),
+
+		el(h3, t`Working with Dynamic Imports for SSR`),
+		el("p").append(...T`
+			When structuring server-side rendering code, a crucial pattern to follow is using dynamic imports
+			for both the deka-dom-el/jsdom module and your page components.
+		`),
+		el("p").append(...T`
+			Why is this important?
+		`),
+		el("ul").append(
+			el("li").append(...T`
+				${el("strong", "Static imports are hoisted:")} JavaScript hoists import statements to the top of the file,
+				executing them before any other code
+			`),
+			el("li").append(...T`
+				${el("strong", "Environment registration timing:")} The jsdom module auto-registers the DOM environment
+				when imported, which must happen ${el("em", "after")} you've created your JSDOM instance and
+				${el("em", "before")} you import your components using ${el("code", "import { el } from \"deka-dom-el\";")}.
+			`),
+			el("li").append(...T`
+				${el("strong", "Correct initialization order:")} You need to control the exact sequence of:
+				create JSDOM → register environment → import components
+			`)
+		),
+		el("p").append(...T`
+			Follow this pattern when creating server-side rendered pages:
+		`),
+		el(code, { src: fileURL("./components/examples/ssr/pages.js"), page_id }),
+
+		el(h3, t`SSR Considerations and Limitations`),
+		el("p").append(...T`
+			When using deka-dom-el for SSR, keep these considerations in mind:
+		`),
+		el("ul").append(
+			el("li", t`Browser-specific APIs like window.localStorage are not available in jsdom by default`),
+			el("li", t`Event listeners added during SSR won't be functional in the final HTML unless hydrated on the client`),
+			el("li", t`Some DOM features may behave differently in jsdom compared to real browsers`),
+			el("li", t`For large sites, you may need to optimize memory usage by creating a new jsdom instance for each page`)
+		),
+		el("p").append(...T`
+			For advanced SSR applications, consider implementing hydration on the client-side to restore
+			interactivity after the initial render.
+		`),
+
+		el(h3, t`Real Example: How This Documentation is Built`),
+		el("p").append(...T`
+			This documentation site itself is built using deka-dom-el's SSR capabilities.
+			The build process collects all page components, renders them with jsdom, and outputs static HTML files.
+		`),
+		el(code, { src: fileURL("./components/examples/ssr/static-site-generator.js"), page_id }),
+
+		el("p").append(...T`
+			The resulting static files can be deployed to any static hosting service,
+			providing fast loading times and excellent SEO without the need for client-side JavaScript
+			to render the initial content.
+		`),
+	);
+}
diff --git a/docs/p10-ireland.html.js b/docs/p10-ireland.html.js
new file mode 100644
index 0000000..e59fc53
--- /dev/null
+++ b/docs/p10-ireland.html.js
@@ -0,0 +1,363 @@
+import { T, t } from "./utils/index.js";
+export const info= {
+	title: t`Ireland Components`,
+	fullTitle: t`Interactive Demo Components with Server-Side Pre-Rendering`,
+	description: t`Creating live, interactive component examples in documentation with server-side
+		rendering and client-side hydration.`,
+};
+
+import { el } from "deka-dom-el";
+import { simplePage } from "./layout/simplePage.html.js";
+import { h3 } from "./components/pageUtils.html.js";
+import { code } from "./components/code.html.js";
+import { ireland } from "./components/ireland.html.js";
+/** @param {string} url */
+const fileURL= url=> new URL(url, import.meta.url);
+
+/** @param {import("./types.js").PageAttrs} attrs */
+export function page({ pkg, info }){
+	const page_id= info.id;
+	return el(simplePage, { info, pkg }).append(
+		el("div", { className: "warning" }).append(
+			el("p").append(...T`
+				This part of the documentation is primarily intended for technical enthusiasts and authors of
+				3rd-party libraries. It describes an advanced feature, not a core part of the library. Most users will
+				not need to implement this functionality directly in their applications. This capability will hopefully
+				be covered by third-party libraries or frameworks that provide simpler SSR integration using
+				deka-dom-el.
+			`)
+		),
+
+		el(h3, t`What Are Ireland Components?`),
+		el("p").append(...T`
+			Ireland components are a special type of documentation component that:
+		`),
+		el("ul").append(
+			el("li", t`Display source code with syntax highlighting`),
+			el("li", t`Pre-render components on the server during documentation build`),
+			el("li", t`Copy component source files to the documentation output`),
+			el("li", t`Provide client-side rehydration for interactive demos`),
+			el("li", t`Allow users to run and experiment with components in real-time`)
+		),
+
+		el(h3, t`How Ireland Components Work`),
+		el("p").append(...T`
+			The Ireland component system consists of several parts working together:
+		`),
+
+		el("ol").append(
+			el("li").append(...T`
+				${el("strong", "Server-side rendering:")} Components are pre-rendered during the documentation build process
+			`),
+			el("li").append(...T`
+				${el("strong", "Component registration:")} Source files are copied to the documentation output directory
+			`),
+			el("li").append(...T`
+				${el("strong", "Client-side scripting:")} JavaScript code is generated to load and render components
+			`),
+			el("li").append(...T`
+				${el("strong", "User interaction:")} The "Run Component" button dynamically loads and renders the component
+			`)
+		),
+
+		el(h3, t`Implementation Architecture`),
+		el("p").append(...T`
+			The core of the Ireland system is implemented in ${el("code", "docs/components/ireland.html.js")}.
+			It integrates with the SSR build process using the ${el("code", "registerClientFile")} function
+			from ${el("code", "docs/ssr.js")}.
+		`),
+
+		el(code, { content: `
+// Basic usage of an ireland component
+el(ireland, {
+	src: fileURL("./components/examples/path/to/component.js"),
+	exportName: "NamedExport", // optional, defaults to "default",
+})`, page_id }),
+
+		el("p").append(...T`
+			During the build process (${el("code", "bs/docs.js")}), the following happens:
+		`),
+
+		el("ol").append(
+			el("li", t`Component source code is loaded and displayed with syntax highlighting`),
+			el("li", t`Source files are registered to be copied to the output directory`),
+			el("li", t`Client-side scripts are generated for each page with ireland components`),
+			el("li", t`The component is wrapped in a UI container with controls`)
+		),
+
+		el(h3, t`Core Implementation Details`),
+		el("p").append(...T`
+			Let's look at the key parts of the ireland component implementation:
+		`),
+
+		el("h4", t`Building SSR`),
+		el(code, { content: `
+// From bs/docs.js - Server-side rendering engine
+import { createHTMl } from "./docs/jsdom.js";
+import { register, queue } from "../jsdom.js";
+import { path_target, dispatchEvent } from "../docs/ssr.js";
+
+// For each page, render it on the server
+for(const { id, info } of pages) {
+	// Create a virtual DOM environment for server-side rendering
+	const serverDOM = createHTMl("");
+	serverDOM.registerGlobally("HTMLScriptElement");
+
+	// Register deka-dom-el with the virtual DOM
+	const { el } = await register(serverDOM.dom);
+
+	// Import and render the page component
+	const { page } = await import(\`../docs/\${id}.html.js\`);
+	serverDOM.document.body.append(
+	el(page, { pkg, info }),
+	);
+
+	// Process the queue of asynchronous operations
+	await queue();
+
+	// Trigger render event handlers
+	dispatchEvent("oneachrender", document);
+
+	// Write the HTML to the output file
+	s.echo(serverDOM.serialize()).to(path_target.root+id+".html");
+}
+
+// Final build step - trigger SSR end event
+dispatchEvent("onssrend");
+`, page_id }),
+		el("h4", t`File Registration`),
+		el(code, { content: `
+// From docs/ssr.js - File registration system
+export function registerClientFile(url, { head, folder = "", replacer } = {}) {
+	// Ensure folder path ends with a slash
+	if(folder && !folder.endsWith("/")) folder += "/";
+
+	// Extract filename from URL
+	const file_name = url.pathname.split("/").pop();
+
+	// Create target directory if needed
+	s.mkdir("-p", path_target.root+folder);
+
+	// Get file content and apply optional replacer function
+	let content = s.cat(url);
+	if(replacer) content = s.echo(replacer(content.toString()));
+
+	// Write content to the output directory
+	content.to(path_target.root+folder+file_name);
+
+	// If a head element was provided, add it to the document
+	if(!head) return;
+	head[head instanceof HTMLScriptElement ? "src" : "href"] = file_name;
+	document.head.append(head);
+}
+`, page_id }),
+		el("h4", t`Server-Side Rendering`),
+		el(code, { content: `
+// From docs/components/ireland.html.js - Server-side component implementation
+export function ireland({ src, exportName = "default", props = {} }) {
+	// Calculate relative path for imports
+	const path = "./"+relative(dir, src.pathname);
+
+	// Generate unique ID for this component instance
+	const id = "ireland-" + generateComponentId(src);
+
+	// Create placeholder element
+	const element = el.mark({ type: "later", name: ireland.name });
+
+	// Import and render the component during SSR
+	queue(import(path).then(module => {
+	const component = module[exportName];
+	element.replaceWith(el(component, props, mark(id)));
+	}));
+
+	// Register client-side hydration on first component
+	if(!componentsRegistry.size)
+	addEventListener("oneachrender", registerClientPart);
+
+	// Store component info for client-side hydration
+	componentsRegistry.set(id, {
+	src,
+	path: dirFE+"/"+path.split("/").pop(),
+	exportName,
+	props,
+	});
+
+	return element;
+}
+
+// Register client-side resources
+function registerClientPart() {
+	// Process all component registrations
+	const todo = Array.from(componentsRegistry.entries())
+	.map(([ id, d ]) => {
+		// Copy the component source file to output directory
+		registerClientFile(d.src, {
+		folder: dirFE,
+		// Replace bare imports for browser compatibility
+		replacer(file) {
+			return file.replaceAll(
+				/ from "deka-dom-el(\/signals)?";/g,
+				\` from "./esm-with-signals.js";\`
+			);
+		}
+	});
+		return [ id, d ];
+	});
+
+	// Serialize the component registry for client-side use
+	const store = JSON.stringify(JSON.stringify(todo));
+
+	// Copy client-side scripts to output
+	registerClientFile(new URL("./ireland.js.js", import.meta.url));
+	registerClientFile(new URL("../../dist/esm-with-signals.js", import.meta.url), { folder: dirFE });
+
+	// Add import map for package resolution
+	document.head.append(
+	el("script", { type: "importmap" }).append(\`
+{
+	"imports": {
+	"deka-dom-el": "./\${dirFE}/esm-with-signals.js",
+	"deka-dom-el/signals": "./\${dirFE}/esm-with-signals.js"
+	}
+}
+	\`.trim())
+	);
+
+	// Add bootstrap script to load components
+	document.body.append(
+	el("script", { type: "module" }).append(\`
+import { loadIrelands } from "./ireland.js.js";
+loadIrelands(new Map(JSON.parse(\${store})));
+	\`.trim())
+	);
+}
+`, page_id }),
+		el("h4", t`Client-Side Hydration`),
+		el(code, { content: `
+// From docs/components/ireland.js.js - Client-side hydration
+import { el } from "./irelands/esm-with-signals.js";
+
+export function loadIrelands(store) {
+	// Find all marked components in the DOM
+	document.body.querySelectorAll("[data-dde-mark]").forEach(ireland => {
+	const { ddeMark } = ireland.dataset;
+
+	// Skip if this component isn't in our registry
+	if(!store.has(ddeMark)) return;
+
+	// Get component information
+	const { path, exportName, props } = store.get(ddeMark);
+
+	// Dynamically import the component module
+	import("./" + path).then(module => {
+		// Replace the server-rendered element with the client-side version
+		ireland.replaceWith(el(module[exportName], props));
+	});
+	});
+}
+`, page_id }),
+
+		el(h3, t`Live Example`),
+			el("p").append(...T`
+				Here's a live example of an Ireland component showing a standard counter.
+				The component is defined in ${el("code", "docs/components/examples/ireland-test/counter.js")} and
+				rendered with the Ireland component system:
+			`),
+
+			el(code, {
+				src: fileURL("./components/examples/ireland-test/counter.js"),
+				page_id
+			}),
+			el(ireland, {
+				src: fileURL("./components/examples/ireland-test/counter.js"),
+				exportName: "CounterStandard",
+				page_id
+			}),
+
+			el("p").append(...T`
+				When the "Run Component" button is clicked, the component is loaded and rendered dynamically.
+				The counter state is maintained using signals, allowing for reactive updates as you click
+				the buttons to increment and decrement the value.
+			`),
+
+		el(h3, t`Creating Your Own Components`),
+		el("p").append(...T`
+			To create components for use with the Ireland system, follow these guidelines:
+		`),
+
+		el("ol").append(
+			el("li").append(...T`
+				${el("strong", "Export a function:")} Components should be exported as named or default functions
+			`),
+			el("li").append(...T`
+
+			`),
+			el("li").append(...T`
+				${el("strong", "Accept props:")} Components should accept a props object, even if not using it
+			`),
+			el("li").append(...T`
+				${el("strong", "Manage reactivity:")} Use signals for state management where appropriate
+			`),
+			el("li").append(...T`
+				${el("strong", "Handle cleanup:")} Include any necessary cleanup for event listeners or signals
+			`)
+		),
+
+		el(h3, t`Practical Considerations and Limitations`),
+			el("p").append(...T`
+				When implementing Ireland components in real documentation, there are several important
+				considerations to keep in mind:
+			`),
+
+			el("div", { className: "warning" }).append(
+				el("h4", t`Module Resolution and Bundling`),
+				el("p").append(...T`
+					The examples shown here use bare module specifiers like ${el("code", "import { el } from \"deka-dom-el\"")}
+					which aren't supported in all browsers without importmaps. In a production implementation, you would need to:
+				`),
+				el("ol").append(
+					el("li", t`Replace bare import paths with actual paths during the build process`),
+					el("li", t`Bundle component dependencies to avoid multiple requests`),
+					el("li", t`Ensure all module dependencies are properly resolved and copied to the output directory`)
+				),
+				el("p").append(...T`
+					In this documentation, we replace the paths with ${el("code", "./esm-with-signals.js")} and provide
+					a bundled version of the library, but more complex components might require a dedicated bundling step.
+				`)
+			),
+
+			el("div", { className: "note" }).append(
+				el("h4", t`Component Dependencies`),
+				el("p").append(...T`
+					Real-world components typically depend on multiple modules and assets. The Ireland system would need
+					to be extended to:
+				`),
+				el("ul").append(
+					el("li", t`Detect and analyze all dependencies of a component`),
+					el("li", t`Bundle these dependencies together or ensure they're properly copied to the output directory`),
+					el("li", t`Handle non-JavaScript assets like CSS, images, or data files`)
+				)
+			),
+
+			el(h3, t`Advanced Usage`),
+			el("p").append(...T`
+				The Ireland system can be extended in several ways to address these limitations:
+			`),
+
+			el("ul").append(
+				el("li", t`Integrate with a bundler like esbuild, Rollup, or Webpack`),
+				el("li", t`Add props support for configuring components at runtime`),
+				el("li", t`Implement module caching to reduce network requests`),
+				el("li", t`Add code editing capabilities for interactive experimentation`),
+				el("li", t`Support TypeScript and other languages through transpilation`),
+				el("li", t`Implement state persistence between runs`)
+			),
+
+			el("p").append(...T`
+				This documentation site itself is built using the techniques described here,
+				showcasing how deka-dom-el can be used to create both the documentation and
+				the interactive examples within it. The implementation here is simplified for clarity,
+				while a production-ready system would need to address the considerations above.
+			`)
+	);
+}
diff --git a/docs/ssr.js b/docs/ssr.js
index 12afb0a..4d151b6 100644
--- a/docs/ssr.js
+++ b/docs/ssr.js
@@ -1,7 +1,8 @@
 export { t } from "./utils/index.js";
 export const path_target= {
 	root: "dist/docs/",
-	css: "dist/docs/"
+	css: "dist/docs/",
+	assets: "dist/docs/assets/"
 };
 /**
  * This variable will be filled with the list of pages during the build process (see `bs/docs.js`).
@@ -12,16 +13,23 @@ export let pages= [];
  * @typedef registerClientFile
  * @type {function}
  * @param {URL} url
- * @param {HTMLScriptElement|HTMLLinkElement} [element_head]
+ * @param {Object} [options]
+ * @param {HTMLScriptElement|HTMLLinkElement} [options.head]
+ * @param {string} [options.folder]
+ * @param {function} [options.replacer]
  * */
-export function registerClientFile(url, element_head){
+export function registerClientFile(url, { head, folder= "", replacer }= {}){
+	if(folder && !folder.endsWith("/")) folder+= "/";
 	const file_name= url.pathname.split("/").pop();
-	s.cat(url).to(path_target.root+file_name);
+	s.mkdir("-p", path_target.root+folder);
+	let content= s.cat(url)
+	if(replacer) content= s.echo(replacer(content.toString()));
+	content.to(path_target.root+folder+file_name);
 
-	if(!element_head) return;
-	element_head[element_head instanceof HTMLScriptElement ? "src" : "href"]= file_name;
+	if(!head) return;
+	head[head instanceof HTMLScriptElement ? "src" : "href"]= file_name;
 	document.head.append(
-		element_head
+		head
 	);
 }
 
diff --git a/docs/types.d.ts b/docs/types.d.ts
index 69e3729..9dd060a 100644
--- a/docs/types.d.ts
+++ b/docs/types.d.ts
@@ -4,6 +4,7 @@ export type Info= {
 	id: string,
 	href: string,
 	title: string,
+	fullTitle: string,
 	description: string,
 }
 export type Pages=Info[];
diff --git a/examples/components/3rd-party.js b/examples/components/3rd-party.js
index 01c819e..4b5d7b7 100644
--- a/examples/components/3rd-party.js
+++ b/examples/components/3rd-party.js
@@ -15,7 +15,7 @@ export function thirdParty(){
 	}, {
 		set(key, value){
 			const p=  this.value[key] || S();
-			p(value);
+			p.set(value);
 			this.value[key]= p;
 		}
 	});
@@ -32,7 +32,7 @@ export function thirdParty(){
 	})();
 	return el("input", {
 		className,
-		value: store().value(),
+		value: store.get().value.get(),
 		type: "text",
 		onchange: ev=> S.action(store, "set", "value", ev.target.value)
 	});
diff --git a/examples/components/fullNameComponent.js b/examples/components/fullNameComponent.js
index 3ba4816..c0e2179 100644
--- a/examples/components/fullNameComponent.js
+++ b/examples/components/fullNameComponent.js
@@ -9,24 +9,24 @@ export function fullNameComponent(){
 	const labels= [ "Name", "Surname" ];
 	const name= labels.map(_=> S(""));
 	const full_name= S(()=>
-		name.map(l=> l()).filter(Boolean).join(" ") || "-");
+		name.map(l=> l.get()).filter(Boolean).join(" ") || "-");
 	scope.host(
 		on.connected(()=> console.log(fullNameComponent)),
 		on.disconnected(()=> console.log(fullNameComponent))
 	);
 
 	const count= S(0);
-	setInterval(()=> count(count()+1), 5000);
+	setInterval(()=> count.set(count.get()+1), 5000);
 	const style= { height: "80px", display: "block", fill: "currentColor" };
 	const elSVG= elNS("http://www.w3.org/2000/svg");
 	return el("div", { className }).append(
 		el("h2", "Simple form:"),
-		el("p", { textContent: S(()=> "Count: "+count()),
-			dataset: { count }, classList: { count: S(() => count()%2 === 0) } }),
+		el("p", { textContent: S(()=> "Count: "+count.get()),
+			dataset: { count }, classList: { count: S(() => count.get()%2 === 0) } }),
 		el("form", { onsubmit: ev=> ev.preventDefault() }).append(
 			...name.map((v, i)=>
 				el("label", labels[i]).append(
-					el("input", { type: "text", name: labels[i], value: v() }, on("change", ev=> v(ev.target.value)))
+					el("input", { type: "text", name: labels[i], value: v.get() }, on("change", ev=> v.set(ev.target.value)))
 				))
 		),
 		el("p").append(
diff --git a/examples/components/todosComponent.js b/examples/components/todosComponent.js
index ab70675..9f552ba 100644
--- a/examples/components/todosComponent.js
+++ b/examples/components/todosComponent.js
@@ -45,7 +45,7 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
 				: el("ul").append(
 					...Array.from(ts).map(([ value, textContent ])=>
 						memo(value, ()=> el(todoComponent, { textContent, value, className }, onremove)))
-				)
+				),
 			),
 			el("p", "Click to the text to edit it.")
 		),
@@ -54,11 +54,11 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
 			el("label", "New todo: ").append(
 				el("input", { name, type: "text", required: true }),
 			),
-			el("button", "+")
+			el("button", "+"),
 		),
 		el("div").append(
 			el("h3", "Output (JSON):"),
-			el("output", S(()=> JSON.stringify(Array.from(todosO()), null, "\t")))
+			el("output", S(()=> JSON.stringify(Array.from(todosO.get()), null, "\t")))
 		)
 	)
 }
@@ -80,13 +80,13 @@ function todoComponent({ textContent, value }){
 	const is_editable= S(false);
 	const onedited= on("change", ev=> {
 		const el= /** @type {HTMLInputElement} */ (ev.target);
-		textContent(el.value);
-		is_editable(false);
+		textContent.set(el.value);
+		is_editable.set(false);
 	});
 	return el("li").append(
 		S.el(is_editable, is=> is
-			? el("input", { value: textContent(), type: "text" }, onedited)
-			: el("span", { textContent, onclick: is_editable.bind(null, true) })
+			? el("input", { value: textContent.get(), type: "text" }, onedited)
+			: el("span", { textContent, onclick: ()=> is_editable.set(true) })
 		),
 		el("button", { type: "button", value, textContent: "-" }, onclick)
 	);
diff --git a/examples/components/webComponent.js b/examples/components/webComponent.js
index b0dd0dc..1126cd9 100644
--- a/examples/components/webComponent.js
+++ b/examples/components/webComponent.js
@@ -34,7 +34,7 @@ export class CustomHTMLTestElement extends HTMLElement{
 			text(test),
 			text(name),
 			text(preName),
-			el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName("Ahoj") }),
+			el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName.set("Ahoj") }),
 			" | ",
 			el("slot", { className: "test", name: "test" }),
 		);
diff --git a/examples/index.js b/examples/index.js
index 8767717..6708196 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -20,7 +20,7 @@ document.body.append(
 		el("span", { textContent: "test", slot: "test" }),
 	),
 	el(thirdParty),
-	el(CustomSlottingHTMLElement.tagName, { onclick: ()=> toggle(!toggle()) }).append(
+	el(CustomSlottingHTMLElement.tagName, { onclick: ()=> toggle.set(!toggle.get()) }).append(
 		el("strong", { slot: "name", textContent: "Honzo" }),
 		S.el(toggle, is=> is
 			? el("span", "…default slot")
diff --git a/index.d.ts b/index.d.ts
index 63effa8..cba4bea 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,5 +1,4 @@
-declare global{ /* ddeSignal */ }
-
+import type { Signal as ddeSignal } from "./signals";
 type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
 type SupportedElement=
 		HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
@@ -9,8 +8,8 @@ type SupportedElement=
 declare global {
 	type ddeComponentAttributes= Record<any, any> | undefined;
 	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
-	type ddeString= string | ddeSignal<string>
-	type ddeStringable= ddeString | number | ddeSignal<number>
+	type ddeString= string | ddeSignal<string, {}>
+	type ddeStringable= ddeString | number | ddeSignal<number, {}>
 }
 type PascalCase= `${Capitalize<string>}${string}`;
 type AttrsModified= {
@@ -18,13 +17,13 @@ type AttrsModified= {
 	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
 	 */
 	style: Partial<CSSStyleDeclaration> | ddeString
-		| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
+		| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K], {}> }>
 	/**
 	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
 	 * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
 	 * for others.
 	 */
-	classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
+	classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean, {}>>,
 	/**
 	 * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
 	 * Values are converted to string (see {@link DOMStringMap}).
@@ -52,9 +51,13 @@ type IsReadonly<T, K extends keyof T> =
  * @private
  */
 type ElementAttributes<T extends SupportedElement>= Partial<{
-	[K in keyof _fromElsInterfaces<T>]: IsReadonly<_fromElsInterfaces<T>, K> extends false
-		? _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
-		: ddeStringable
+	[K in keyof _fromElsInterfaces<T>]:
+		_fromElsInterfaces<T>[K] extends ((...p: any[])=> any)
+			? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>)=>
+																	ddeSignal<ReturnType<_fromElsInterfaces<T>[K]>, {}>)
+			: (IsReadonly<_fromElsInterfaces<T>, K> extends false
+				? _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K], {}>
+				: ddeStringable)
 } & AttrsModified> & Record<string, any>;
 export function classListDeclarative<El extends SupportedElement>(
 	element: El,
@@ -68,6 +71,40 @@ export function assignAttribute<El extends SupportedElement, ATT extends keyof E
 ): ElementAttributes<El>[ATT]
 
 type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
+export namespace el {
+	/**
+	 * Creates a marker comment for elements
+	 *
+	 * @param attrs - Marker attributes
+	 * @param [is_open=false] - Whether the marker is open-ended
+	 * @returns Comment node marker
+	 */
+	export function mark(
+		attrs: { type: "component"|"reactive"|"later", name?: string, host?: "this"|"parentElement" },
+		is_open?: boolean
+	): Comment;
+}
+
+export function el<
+	A extends ddeComponentAttributes,
+	EL extends SupportedElement | ddeDocumentFragment
+>(
+	component: (attr: A, ...rest: any[])=> EL,
+	attrs?: NoInfer<A>,
+	...addons: ddeElementAddon<EL>[]
+): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
+	? EL
+	: ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement )
+export function el<
+	A extends { textContent: ddeStringable },
+	EL extends SupportedElement | ddeDocumentFragment
+>(
+	component: (attr: A, ...rest: any[])=> EL,
+	attrs?: NoInfer<A>["textContent"],
+	...addons: ddeElementAddon<EL>[]
+): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
+	? EL
+	: ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement )
 export function el<
 	TAG extends keyof ExtendedHTMLElementTagNameMap,
 >(
@@ -85,16 +122,6 @@ export function el(
 	attrs?: ElementAttributes<HTMLElement> | ddeStringable,
 	...addons: ddeElementAddon<HTMLElement>[]
 ): ddeHTMLElement
-
-export function el<
-	C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
->(
-	component: C,
-	attrs?: Parameters<C>[0] | ddeStringable,
-	...addons: ddeElementAddon<ReturnType<C>>[]
-): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
-	? ReturnType<C>
-	: ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
 export { el as createElement }
 
 export function elNS(
@@ -115,7 +142,7 @@ export function elNS(
 >(
 	tag_name: TAG,
 	attrs?: ddeStringable | Partial<{
-		[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
+		[key in keyof EL]: EL[key] | ddeSignal<EL[key], {}> | string | number | boolean
 	}>,
 	...addons: ddeElementAddon<NoInfer<EL>>[]
 )=> ddeMathMLElement
@@ -143,6 +170,8 @@ export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
 	body: EL,
 ): EL
 
+export function dispatchEvent(name: keyof DocumentEventMap | string, element: SupportedElement):
+	(data?: any)=> void;
 export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
 	(element: SupportedElement, data?: any)=> void;
 export function dispatchEvent(
@@ -216,7 +245,7 @@ export const scope: {
 
 	state: Scope[],
 	/** Adds new child scope. All attributes are inherited by default. */
-	push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
+	push(scope?: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
 	/** Adds root scope as a child of the current scope. */
 	pushRoot(): ReturnType<Array<Scope>["push"]>,
 	/** Removes last/current child scope. */
@@ -225,7 +254,7 @@ export const scope: {
 
 export function customElementRender<
 	EL extends HTMLElement,
-	P extends any = Record<string, string | ddeSignal<string>>
+	P extends any = Record<string, string | ddeSignal<string, {}>>
 >(
 	target: ShadowRoot | EL,
 	render: (props: P)=> SupportedElement | DocumentFragment,
@@ -235,6 +264,27 @@ export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_e
 export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
 export function observedAttributes(custom_element: HTMLElement): Record<string, string>
 
+/**
+ * This is used primarly for server side rendering. To be sure that all async operations
+ * are finished before the page is sent to the client.
+ * ```
+ *	// on component
+ *	function component(){
+ *		…
+ *		queue(fetch(...).then(...));
+ *	}
+ *
+ * // building the page
+ * async function build(){
+ *		const { component }= await import("./component.js");
+ *		document.body.append(el(component));
+ *		await queue();
+ *		retutn document.body.innerHTML;
+ *	}
+ * ```
+ * */
+export function queue(promise?: Promise<unknown>): Promise<unknown>;
+
 /* TypeScript MEH */
 declare global{
 	type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
diff --git a/jsdom.js b/jsdom.js
index 00d5a2d..8344ae4 100644
--- a/jsdom.js
+++ b/jsdom.js
@@ -17,7 +17,7 @@ env.setDeleteAttr= function(obj, prop, value){
 	if(value) return obj.setAttribute(prop, "");
 	obj.removeAttribute(prop);
 };
-const keys= { H: "HTMLElement", S: "SVGElement", F: "DocumentFragment", M: "MutationObserver", D: "document" };
+const keys= { H: "HTMLElement", S: "SVGElement", F: "DocumentFragment", D: "document" };
 let env_bk= {};
 let dom_last;
 
diff --git a/package-lock.json b/package-lock.json
index 4736753..742b4af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,19 @@
 {
 	"name": "deka-dom-el",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "deka-dom-el",
-			"version": "0.8.0",
+			"version": "0.9.0",
 			"license": "MIT",
 			"devDependencies": {
-				"@size-limit/preset-small-lib": "~11.0",
-				"dts-bundler": "~0.1",
-				"editorconfig-checker": "^6.0.0",
-				"esbuild": "~0.24",
-				"jsdom": "~25.0",
+				"@size-limit/preset-small-lib": "~11.2",
+				"dts-bundle-generator": "~9.5",
+				"editorconfig-checker": "~6.0",
+				"esbuild": "~0.25",
+				"jsdom": "~26.0",
 				"jshint": "~2.13",
 				"nodejsscript": "^1.0.2",
 				"size-limit-node-esbuild": "~0.3"
@@ -22,10 +22,139 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/@asamuzakjp/css-color": {
+			"version": "2.8.3",
+			"resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-2.8.3.tgz",
+			"integrity": "sha512-GIc76d9UI1hCvOATjZPyHFmE5qhRccp3/zGfMPapK3jBi+yocEzp6BBB0UnfRYP9NP4FANqUZYb0hnfs3TM3hw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@csstools/css-calc": "^2.1.1",
+				"@csstools/css-color-parser": "^3.0.7",
+				"@csstools/css-parser-algorithms": "^3.0.4",
+				"@csstools/css-tokenizer": "^3.0.3",
+				"lru-cache": "^10.4.3"
+			}
+		},
+		"node_modules/@csstools/color-helpers": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.0.2.tgz",
+			"integrity": "sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"license": "MIT-0",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@csstools/css-calc": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.2.tgz",
+			"integrity": "sha512-TklMyb3uBB28b5uQdxjReG4L80NxAqgrECqLZFQbyLekwwlcDDS8r3f07DKqeo8C4926Br0gf/ZDe17Zv4wIuw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@csstools/css-parser-algorithms": "^3.0.4",
+				"@csstools/css-tokenizer": "^3.0.3"
+			}
+		},
+		"node_modules/@csstools/css-color-parser": {
+			"version": "3.0.8",
+			"resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.0.8.tgz",
+			"integrity": "sha512-pdwotQjCCnRPuNi06jFuP68cykU1f3ZWExLe/8MQ1LOs8Xq+fTkYgd+2V8mWUWMrOn9iS2HftPVaMZDaXzGbhQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"@csstools/color-helpers": "^5.0.2",
+				"@csstools/css-calc": "^2.1.2"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@csstools/css-parser-algorithms": "^3.0.4",
+				"@csstools/css-tokenizer": "^3.0.3"
+			}
+		},
+		"node_modules/@csstools/css-parser-algorithms": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.4.tgz",
+			"integrity": "sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@csstools/css-tokenizer": "^3.0.3"
+			}
+		},
+		"node_modules/@csstools/css-tokenizer": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.3.tgz",
+			"integrity": "sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/@esbuild/aix-ppc64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
-			"integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.0.tgz",
+			"integrity": "sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ==",
 			"cpu": [
 				"ppc64"
 			],
@@ -40,9 +169,9 @@
 			}
 		},
 		"node_modules/@esbuild/android-arm": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz",
-			"integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.0.tgz",
+			"integrity": "sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g==",
 			"cpu": [
 				"arm"
 			],
@@ -57,9 +186,9 @@
 			}
 		},
 		"node_modules/@esbuild/android-arm64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz",
-			"integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.0.tgz",
+			"integrity": "sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g==",
 			"cpu": [
 				"arm64"
 			],
@@ -74,9 +203,9 @@
 			}
 		},
 		"node_modules/@esbuild/android-x64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz",
-			"integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.0.tgz",
+			"integrity": "sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg==",
 			"cpu": [
 				"x64"
 			],
@@ -91,9 +220,9 @@
 			}
 		},
 		"node_modules/@esbuild/darwin-arm64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz",
-			"integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.0.tgz",
+			"integrity": "sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw==",
 			"cpu": [
 				"arm64"
 			],
@@ -108,9 +237,9 @@
 			}
 		},
 		"node_modules/@esbuild/darwin-x64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz",
-			"integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.0.tgz",
+			"integrity": "sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg==",
 			"cpu": [
 				"x64"
 			],
@@ -125,9 +254,9 @@
 			}
 		},
 		"node_modules/@esbuild/freebsd-arm64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz",
-			"integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.0.tgz",
+			"integrity": "sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w==",
 			"cpu": [
 				"arm64"
 			],
@@ -142,9 +271,9 @@
 			}
 		},
 		"node_modules/@esbuild/freebsd-x64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz",
-			"integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.0.tgz",
+			"integrity": "sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A==",
 			"cpu": [
 				"x64"
 			],
@@ -159,9 +288,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-arm": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz",
-			"integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.0.tgz",
+			"integrity": "sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg==",
 			"cpu": [
 				"arm"
 			],
@@ -176,9 +305,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-arm64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz",
-			"integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.0.tgz",
+			"integrity": "sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg==",
 			"cpu": [
 				"arm64"
 			],
@@ -193,9 +322,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-ia32": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz",
-			"integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.0.tgz",
+			"integrity": "sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg==",
 			"cpu": [
 				"ia32"
 			],
@@ -210,9 +339,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-loong64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz",
-			"integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.0.tgz",
+			"integrity": "sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw==",
 			"cpu": [
 				"loong64"
 			],
@@ -227,9 +356,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-mips64el": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz",
-			"integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.0.tgz",
+			"integrity": "sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ==",
 			"cpu": [
 				"mips64el"
 			],
@@ -244,9 +373,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-ppc64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz",
-			"integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.0.tgz",
+			"integrity": "sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw==",
 			"cpu": [
 				"ppc64"
 			],
@@ -261,9 +390,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-riscv64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz",
-			"integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.0.tgz",
+			"integrity": "sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA==",
 			"cpu": [
 				"riscv64"
 			],
@@ -278,9 +407,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-s390x": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz",
-			"integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.0.tgz",
+			"integrity": "sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA==",
 			"cpu": [
 				"s390x"
 			],
@@ -295,9 +424,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-x64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz",
-			"integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.0.tgz",
+			"integrity": "sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw==",
 			"cpu": [
 				"x64"
 			],
@@ -311,10 +440,27 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/@esbuild/netbsd-arm64": {
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.0.tgz",
+			"integrity": "sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/@esbuild/netbsd-x64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
-			"integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.0.tgz",
+			"integrity": "sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA==",
 			"cpu": [
 				"x64"
 			],
@@ -329,9 +475,9 @@
 			}
 		},
 		"node_modules/@esbuild/openbsd-arm64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz",
-			"integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.0.tgz",
+			"integrity": "sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw==",
 			"cpu": [
 				"arm64"
 			],
@@ -346,9 +492,9 @@
 			}
 		},
 		"node_modules/@esbuild/openbsd-x64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz",
-			"integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.0.tgz",
+			"integrity": "sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg==",
 			"cpu": [
 				"x64"
 			],
@@ -363,9 +509,9 @@
 			}
 		},
 		"node_modules/@esbuild/sunos-x64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz",
-			"integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.0.tgz",
+			"integrity": "sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg==",
 			"cpu": [
 				"x64"
 			],
@@ -380,9 +526,9 @@
 			}
 		},
 		"node_modules/@esbuild/win32-arm64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz",
-			"integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.0.tgz",
+			"integrity": "sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw==",
 			"cpu": [
 				"arm64"
 			],
@@ -397,9 +543,9 @@
 			}
 		},
 		"node_modules/@esbuild/win32-ia32": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz",
-			"integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.0.tgz",
+			"integrity": "sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA==",
 			"cpu": [
 				"ia32"
 			],
@@ -414,9 +560,9 @@
 			}
 		},
 		"node_modules/@esbuild/win32-x64": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
-			"integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.0.tgz",
+			"integrity": "sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ==",
 			"cpu": [
 				"x64"
 			],
@@ -482,478 +628,48 @@
 			}
 		},
 		"node_modules/@size-limit/esbuild": {
-			"version": "11.0.3",
-			"resolved": "https://registry.npmjs.org/@size-limit/esbuild/-/esbuild-11.0.3.tgz",
-			"integrity": "sha512-8DqOU79oMcNH33d8XlECVF/G2ZbuyTP7/GwRswjM+hObGgsSjVZUN2Ikxl9t0zJvvG2bLB8m3uHa9bsCtdnOcw==",
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/@size-limit/esbuild/-/esbuild-11.2.0.tgz",
+			"integrity": "sha512-vSg9H0WxGQPRzDnBzeDyD9XT0Zdq0L+AI3+77/JhxznbSCMJMMr8ndaWVQRhOsixl97N0oD4pRFw2+R1Lcvi6A==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"esbuild": "^0.20.1",
-				"nanoid": "^5.0.6"
+				"esbuild": "^0.25.0",
+				"nanoid": "^5.1.0"
 			},
 			"engines": {
 				"node": "^18.0.0 || >=20.0.0"
 			},
 			"peerDependencies": {
-				"size-limit": "11.0.3"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/aix-ppc64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
-			"integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
-			"cpu": [
-				"ppc64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"aix"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/android-arm": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
-			"integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
-			"cpu": [
-				"arm"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"android"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/android-arm64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
-			"integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"android"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/android-x64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
-			"integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"android"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/darwin-arm64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
-			"integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/darwin-x64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
-			"integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/freebsd-arm64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
-			"integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"freebsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/freebsd-x64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
-			"integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"freebsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/linux-arm": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
-			"integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
-			"cpu": [
-				"arm"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/linux-arm64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
-			"integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/linux-ia32": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
-			"integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
-			"cpu": [
-				"ia32"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/linux-loong64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
-			"integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
-			"cpu": [
-				"loong64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/linux-mips64el": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
-			"integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
-			"cpu": [
-				"mips64el"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/linux-ppc64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
-			"integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
-			"cpu": [
-				"ppc64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/linux-riscv64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
-			"integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
-			"cpu": [
-				"riscv64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/linux-s390x": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
-			"integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
-			"cpu": [
-				"s390x"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/linux-x64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
-			"integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/netbsd-x64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
-			"integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"netbsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/openbsd-x64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
-			"integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"openbsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/sunos-x64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
-			"integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"sunos"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/win32-arm64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
-			"integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/win32-ia32": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
-			"integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
-			"cpu": [
-				"ia32"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/@esbuild/win32-x64": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
-			"integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@size-limit/esbuild/node_modules/esbuild": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
-			"integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
-			"dev": true,
-			"hasInstallScript": true,
-			"license": "MIT",
-			"bin": {
-				"esbuild": "bin/esbuild"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"optionalDependencies": {
-				"@esbuild/aix-ppc64": "0.20.2",
-				"@esbuild/android-arm": "0.20.2",
-				"@esbuild/android-arm64": "0.20.2",
-				"@esbuild/android-x64": "0.20.2",
-				"@esbuild/darwin-arm64": "0.20.2",
-				"@esbuild/darwin-x64": "0.20.2",
-				"@esbuild/freebsd-arm64": "0.20.2",
-				"@esbuild/freebsd-x64": "0.20.2",
-				"@esbuild/linux-arm": "0.20.2",
-				"@esbuild/linux-arm64": "0.20.2",
-				"@esbuild/linux-ia32": "0.20.2",
-				"@esbuild/linux-loong64": "0.20.2",
-				"@esbuild/linux-mips64el": "0.20.2",
-				"@esbuild/linux-ppc64": "0.20.2",
-				"@esbuild/linux-riscv64": "0.20.2",
-				"@esbuild/linux-s390x": "0.20.2",
-				"@esbuild/linux-x64": "0.20.2",
-				"@esbuild/netbsd-x64": "0.20.2",
-				"@esbuild/openbsd-x64": "0.20.2",
-				"@esbuild/sunos-x64": "0.20.2",
-				"@esbuild/win32-arm64": "0.20.2",
-				"@esbuild/win32-ia32": "0.20.2",
-				"@esbuild/win32-x64": "0.20.2"
+				"size-limit": "11.2.0"
 			}
 		},
 		"node_modules/@size-limit/file": {
-			"version": "11.0.3",
-			"resolved": "https://registry.npmjs.org/@size-limit/file/-/file-11.0.3.tgz",
-			"integrity": "sha512-fuVZG+dZLLMaEi1siHHK5gU8Vfc4pvjZBxrefwZt9gOinbOgGONauEPZYipaE1tYTZPeJo8o9PuJ8Obbub+MLA==",
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/@size-limit/file/-/file-11.2.0.tgz",
+			"integrity": "sha512-OZHE3putEkQ/fgzz3Tp/0hSmfVo3wyTpOJSRNm6AmcwX4Nm9YtTfbQQ/hZRwbBFR23S7x2Sd9EbqYzngKwbRoA==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": "^18.0.0 || >=20.0.0"
 			},
 			"peerDependencies": {
-				"size-limit": "11.0.3"
+				"size-limit": "11.2.0"
 			}
 		},
 		"node_modules/@size-limit/preset-small-lib": {
-			"version": "11.0.3",
-			"resolved": "https://registry.npmjs.org/@size-limit/preset-small-lib/-/preset-small-lib-11.0.3.tgz",
-			"integrity": "sha512-EolyGohughbRQ7TNiqE3qj+7pun0EH1Aks7eJnoWuUWZz9j3eVJMT9FP5p9oIBUjn808LerZNt2bFnnjxiOjnA==",
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/@size-limit/preset-small-lib/-/preset-small-lib-11.2.0.tgz",
+			"integrity": "sha512-RFbbIVfv8/QDgTPyXzjo5NKO6CYyK5Uq5xtNLHLbw5RgSKrgo8WpiB/fNivZuNd/5Wk0s91PtaJ9ThNcnFuI3g==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@size-limit/esbuild": "11.0.3",
-				"@size-limit/file": "11.0.3",
-				"size-limit": "11.0.3"
+				"@size-limit/esbuild": "11.2.0",
+				"@size-limit/file": "11.2.0",
+				"size-limit": "11.2.0"
 			},
 			"peerDependencies": {
-				"size-limit": "11.0.3"
+				"size-limit": "11.2.0"
 			}
 		},
 		"node_modules/@types/glob": {
@@ -982,13 +698,13 @@
 			"license": "MIT"
 		},
 		"node_modules/@types/node": {
-			"version": "22.7.5",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.5.tgz",
-			"integrity": "sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==",
+			"version": "22.13.9",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.9.tgz",
+			"integrity": "sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"undici-types": "~6.19.2"
+				"undici-types": "~6.20.0"
 			}
 		},
 		"node_modules/@types/sade": {
@@ -1026,14 +742,11 @@
 			}
 		},
 		"node_modules/agent-base": {
-			"version": "7.1.1",
-			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
-			"integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+			"version": "7.1.3",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
+			"integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==",
 			"dev": true,
 			"license": "MIT",
-			"dependencies": {
-				"debug": "^4.3.4"
-			},
 			"engines": {
 				"node": ">= 14"
 			}
@@ -1101,6 +814,19 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/anymatch/node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
 		"node_modules/async-exit-hook": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/async-exit-hook/-/async-exit-hook-1.1.2.tgz",
@@ -1172,29 +898,34 @@
 				"node": ">= 0.8"
 			}
 		},
-		"node_modules/chokidar": {
-			"version": "3.6.0",
-			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-			"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+		"node_modules/call-bind-apply-helpers": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+			"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"anymatch": "~3.1.2",
-				"braces": "~3.0.2",
-				"glob-parent": "~5.1.2",
-				"is-binary-path": "~2.1.0",
-				"is-glob": "~4.0.1",
-				"normalize-path": "~3.0.0",
-				"readdirp": "~3.6.0"
+				"es-errors": "^1.3.0",
+				"function-bind": "^1.1.2"
 			},
 			"engines": {
-				"node": ">= 8.10.0"
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/chokidar": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+			"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"readdirp": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 14.16.0"
 			},
 			"funding": {
 				"url": "https://paulmillr.com/funding/"
-			},
-			"optionalDependencies": {
-				"fsevents": "~2.3.2"
 			}
 		},
 		"node_modules/cli": {
@@ -1211,6 +942,21 @@
 				"node": ">=0.2.5"
 			}
 		},
+		"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/color-convert": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1268,9 +1014,9 @@
 			"license": "MIT"
 		},
 		"node_modules/css-in-console": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/css-in-console/-/css-in-console-2.0.0.tgz",
-			"integrity": "sha512-Xbphn3qbe/XO67D8dr7Q39qSqi3ddnSsL72nixhKLiUEr8K3oTlk9aCOKRyCVNgPtgWwhynM19jj5mw1n/K2Tg==",
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/css-in-console/-/css-in-console-2.1.0.tgz",
+			"integrity": "sha512-HfEIgVmaZowNLWVBdpp5gI4zz8KBKgl0IpYHLCRv6poFBCOgtdBIa8rSy8l9UTsTITIXy5K7PnlEoExggkT2KQ==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -1278,13 +1024,14 @@
 			}
 		},
 		"node_modules/cssstyle": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz",
-			"integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==",
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.2.1.tgz",
+			"integrity": "sha512-9+vem03dMXG7gDmZ62uqmRiMRNtinIZ9ZyuF6BdxzfOD+FdN5hretzynkn0ReS2DO2GSw76RWHs0UmJPI2zUjw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"rrweb-cssom": "^0.7.1"
+				"@asamuzakjp/css-color": "^2.8.2",
+				"rrweb-cssom": "^0.8.0"
 			},
 			"engines": {
 				"node": ">=18"
@@ -1321,9 +1068,9 @@
 			"dev": true
 		},
 		"node_modules/debug": {
-			"version": "4.3.7",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
-			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+			"integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1339,9 +1086,9 @@
 			}
 		},
 		"node_modules/decimal.js": {
-			"version": "10.4.3",
-			"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
-			"integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
+			"version": "10.5.0",
+			"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.5.0.tgz",
+			"integrity": "sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==",
 			"dev": true,
 			"license": "MIT"
 		},
@@ -1415,20 +1162,42 @@
 				"domelementtype": "1"
 			}
 		},
-		"node_modules/dts-bundler": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/dts-bundler/-/dts-bundler-0.1.0.tgz",
-			"integrity": "sha512-h0llx8DbWDMLJoB/jT5+YghYse1RA7SKDDPG3h0E+ecgkRDFMsr1aa8vaPTmrv6Qta79mme78tIyFStXBxijCg==",
+		"node_modules/dts-bundle-generator": {
+			"version": "9.5.1",
+			"resolved": "https://registry.npmjs.org/dts-bundle-generator/-/dts-bundle-generator-9.5.1.tgz",
+			"integrity": "sha512-DxpJOb2FNnEyOzMkG11sxO2dmxPjthoVWxfKqWYJ/bI/rT1rvTMktF5EKjAYrRZu6Z6t3NhOUZ0sZ5ZXevOfbA==",
 			"dev": true,
 			"license": "MIT",
-			"peerDependencies": {
-				"typescript": "^2.4.0"
+			"dependencies": {
+				"typescript": ">=5.0.2",
+				"yargs": "^17.6.0"
+			},
+			"bin": {
+				"dts-bundle-generator": "dist/bin/dts-bundle-generator.js"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/dunder-proto": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+			"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.1",
+				"es-errors": "^1.3.0",
+				"gopd": "^1.2.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
 			}
 		},
 		"node_modules/editorconfig-checker": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/editorconfig-checker/-/editorconfig-checker-6.0.0.tgz",
-			"integrity": "sha512-uyTOwLJzR/k7ugiu7ITjCzkLKBhXeirQZ8hGlUkt1u/hq2Qu1E8EslgFZDN+lxZoQc97eiI87sUFgVILK4P+YQ==",
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/editorconfig-checker/-/editorconfig-checker-6.0.1.tgz",
+			"integrity": "sha512-9qhGMJNBSDx+V2w7u8eh47AOMFe+9KWG6hzEG3nlB/7SATo0O65jOrqWbcutrToZh2ojtaGlLhQ9kVocWxwsrw==",
 			"dev": true,
 			"license": "MIT",
 			"bin": {
@@ -1457,10 +1226,59 @@
 			"dev": true,
 			"license": "BSD-like"
 		},
+		"node_modules/es-define-property": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+			"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-errors": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+			"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-object-atoms": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+			"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-set-tostringtag": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+			"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.6",
+				"has-tostringtag": "^1.0.2",
+				"hasown": "^2.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/esbuild": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.0.tgz",
-			"integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.0.tgz",
+			"integrity": "sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==",
 			"dev": true,
 			"hasInstallScript": true,
 			"license": "MIT",
@@ -1471,30 +1289,41 @@
 				"node": ">=18"
 			},
 			"optionalDependencies": {
-				"@esbuild/aix-ppc64": "0.24.0",
-				"@esbuild/android-arm": "0.24.0",
-				"@esbuild/android-arm64": "0.24.0",
-				"@esbuild/android-x64": "0.24.0",
-				"@esbuild/darwin-arm64": "0.24.0",
-				"@esbuild/darwin-x64": "0.24.0",
-				"@esbuild/freebsd-arm64": "0.24.0",
-				"@esbuild/freebsd-x64": "0.24.0",
-				"@esbuild/linux-arm": "0.24.0",
-				"@esbuild/linux-arm64": "0.24.0",
-				"@esbuild/linux-ia32": "0.24.0",
-				"@esbuild/linux-loong64": "0.24.0",
-				"@esbuild/linux-mips64el": "0.24.0",
-				"@esbuild/linux-ppc64": "0.24.0",
-				"@esbuild/linux-riscv64": "0.24.0",
-				"@esbuild/linux-s390x": "0.24.0",
-				"@esbuild/linux-x64": "0.24.0",
-				"@esbuild/netbsd-x64": "0.24.0",
-				"@esbuild/openbsd-arm64": "0.24.0",
-				"@esbuild/openbsd-x64": "0.24.0",
-				"@esbuild/sunos-x64": "0.24.0",
-				"@esbuild/win32-arm64": "0.24.0",
-				"@esbuild/win32-ia32": "0.24.0",
-				"@esbuild/win32-x64": "0.24.0"
+				"@esbuild/aix-ppc64": "0.25.0",
+				"@esbuild/android-arm": "0.25.0",
+				"@esbuild/android-arm64": "0.25.0",
+				"@esbuild/android-x64": "0.25.0",
+				"@esbuild/darwin-arm64": "0.25.0",
+				"@esbuild/darwin-x64": "0.25.0",
+				"@esbuild/freebsd-arm64": "0.25.0",
+				"@esbuild/freebsd-x64": "0.25.0",
+				"@esbuild/linux-arm": "0.25.0",
+				"@esbuild/linux-arm64": "0.25.0",
+				"@esbuild/linux-ia32": "0.25.0",
+				"@esbuild/linux-loong64": "0.25.0",
+				"@esbuild/linux-mips64el": "0.25.0",
+				"@esbuild/linux-ppc64": "0.25.0",
+				"@esbuild/linux-riscv64": "0.25.0",
+				"@esbuild/linux-s390x": "0.25.0",
+				"@esbuild/linux-x64": "0.25.0",
+				"@esbuild/netbsd-arm64": "0.25.0",
+				"@esbuild/netbsd-x64": "0.25.0",
+				"@esbuild/openbsd-arm64": "0.25.0",
+				"@esbuild/openbsd-x64": "0.25.0",
+				"@esbuild/sunos-x64": "0.25.0",
+				"@esbuild/win32-arm64": "0.25.0",
+				"@esbuild/win32-ia32": "0.25.0",
+				"@esbuild/win32-x64": "0.25.0"
+			}
+		},
+		"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/event-target-shim": {
@@ -1517,9 +1346,9 @@
 			}
 		},
 		"node_modules/fast-glob": {
-			"version": "3.3.2",
-			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-			"integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+			"integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1527,22 +1356,37 @@
 				"@nodelib/fs.walk": "^1.2.3",
 				"glob-parent": "^5.1.2",
 				"merge2": "^1.3.0",
-				"micromatch": "^4.0.4"
+				"micromatch": "^4.0.8"
 			},
 			"engines": {
 				"node": ">=8.6.0"
 			}
 		},
 		"node_modules/fastq": {
-			"version": "1.17.1",
-			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-			"integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+			"version": "1.19.1",
+			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+			"integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
 			"dev": true,
 			"license": "ISC",
 			"dependencies": {
 				"reusify": "^1.0.4"
 			}
 		},
+		"node_modules/fdir": {
+			"version": "6.4.3",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
+			"integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"picomatch": "^3 || ^4"
+			},
+			"peerDependenciesMeta": {
+				"picomatch": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/fetch-blob": {
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
@@ -1581,14 +1425,15 @@
 			}
 		},
 		"node_modules/form-data": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
-			"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+			"integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"asynckit": "^0.4.0",
 				"combined-stream": "^1.0.8",
+				"es-set-tostringtag": "^2.1.0",
 				"mime-types": "^2.1.12"
 			},
 			"engines": {
@@ -1636,11 +1481,59 @@
 			"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"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/get-intrinsic": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+			"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.2",
+				"es-define-property": "^1.0.1",
+				"es-errors": "^1.3.0",
+				"es-object-atoms": "^1.1.1",
+				"function-bind": "^1.1.2",
+				"get-proto": "^1.0.1",
+				"gopd": "^1.2.0",
+				"has-symbols": "^1.1.0",
+				"hasown": "^2.0.2",
+				"math-intrinsics": "^1.1.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/get-proto": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+			"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"dunder-proto": "^1.0.1",
+				"es-object-atoms": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/glob": {
 			"version": "7.2.3",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -1690,18 +1583,18 @@
 			}
 		},
 		"node_modules/globby": {
-			"version": "14.0.2",
-			"resolved": "https://registry.npmjs.org/globby/-/globby-14.0.2.tgz",
-			"integrity": "sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==",
+			"version": "14.1.0",
+			"resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz",
+			"integrity": "sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@sindresorhus/merge-streams": "^2.1.0",
-				"fast-glob": "^3.3.2",
-				"ignore": "^5.2.4",
-				"path-type": "^5.0.0",
+				"fast-glob": "^3.3.3",
+				"ignore": "^7.0.3",
+				"path-type": "^6.0.0",
 				"slash": "^5.1.0",
-				"unicorn-magic": "^0.1.0"
+				"unicorn-magic": "^0.3.0"
 			},
 			"engines": {
 				"node": ">=18"
@@ -1710,13 +1603,54 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/gopd": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+			"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-symbols": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+			"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-tostringtag": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+			"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"has-symbols": "^1.0.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"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",
-			"peer": true,
 			"dependencies": {
 				"function-bind": "^1.1.2"
 			},
@@ -1766,13 +1700,13 @@
 			}
 		},
 		"node_modules/https-proxy-agent": {
-			"version": "7.0.5",
-			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
-			"integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+			"version": "7.0.6",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+			"integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"agent-base": "^7.0.2",
+				"agent-base": "^7.1.2",
 				"debug": "4"
 			},
 			"engines": {
@@ -1793,9 +1727,9 @@
 			}
 		},
 		"node_modules/ignore": {
-			"version": "5.3.2",
-			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
-			"integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.3.tgz",
+			"integrity": "sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -1853,9 +1787,9 @@
 			}
 		},
 		"node_modules/is-core-module": {
-			"version": "2.15.1",
-			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
-			"integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
+			"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",
 			"peer": true,
@@ -1926,24 +1860,34 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/jiti": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+			"integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"jiti": "lib/jiti-cli.mjs"
+			}
+		},
 		"node_modules/jsdom": {
-			"version": "25.0.1",
-			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-25.0.1.tgz",
-			"integrity": "sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==",
+			"version": "26.0.0",
+			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-26.0.0.tgz",
+			"integrity": "sha512-BZYDGVAIriBWTpIxYzrXjv3E/4u8+/pSG5bQdIYCbNCGOvsPkDQfTVLAIXAf9ETdCpduCVTkDe2NNZ8NIwUVzw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"cssstyle": "^4.1.0",
+				"cssstyle": "^4.2.1",
 				"data-urls": "^5.0.0",
 				"decimal.js": "^10.4.3",
-				"form-data": "^4.0.0",
+				"form-data": "^4.0.1",
 				"html-encoding-sniffer": "^4.0.0",
 				"http-proxy-agent": "^7.0.2",
-				"https-proxy-agent": "^7.0.5",
+				"https-proxy-agent": "^7.0.6",
 				"is-potential-custom-element-name": "^1.0.1",
-				"nwsapi": "^2.2.12",
-				"parse5": "^7.1.2",
-				"rrweb-cssom": "^0.7.1",
+				"nwsapi": "^2.2.16",
+				"parse5": "^7.2.1",
+				"rrweb-cssom": "^0.8.0",
 				"saxes": "^6.0.0",
 				"symbol-tree": "^3.2.4",
 				"tough-cookie": "^5.0.0",
@@ -1951,7 +1895,7 @@
 				"webidl-conversions": "^7.0.0",
 				"whatwg-encoding": "^3.1.1",
 				"whatwg-mimetype": "^4.0.0",
-				"whatwg-url": "^14.0.0",
+				"whatwg-url": "^14.1.0",
 				"ws": "^8.18.0",
 				"xml-name-validator": "^5.0.0"
 			},
@@ -1959,7 +1903,7 @@
 				"node": ">=18"
 			},
 			"peerDependencies": {
-				"canvas": "^2.11.2"
+				"canvas": "^3.0.0"
 			},
 			"peerDependenciesMeta": {
 				"canvas": {
@@ -2001,9 +1945,9 @@
 			"license": "MIT"
 		},
 		"node_modules/lilconfig": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
-			"integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+			"integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -2033,6 +1977,23 @@
 				"wrap-ansi": "^7.0.0"
 			}
 		},
+		"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/math-intrinsics": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+			"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2057,6 +2018,19 @@
 				"node": ">=8.6"
 			}
 		},
+		"node_modules/micromatch/node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
 		"node_modules/mime-db": {
 			"version": "1.52.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -2121,9 +2095,9 @@
 			"license": "MIT"
 		},
 		"node_modules/nanoid": {
-			"version": "5.0.7",
-			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
-			"integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==",
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.2.tgz",
+			"integrity": "sha512-b+CiXQCNMUGe0Ri64S9SXFcP9hogjAJ2Rd6GdVxhPLRm7mhGaM7VgOvCAJ1ZshfHbqVDI3uqTI5C8/GaKuLI7g==",
 			"dev": true,
 			"funding": [
 				{
@@ -2140,13 +2114,13 @@
 			}
 		},
 		"node_modules/nanospinner": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/nanospinner/-/nanospinner-1.1.0.tgz",
-			"integrity": "sha512-yFvNYMig4AthKYfHFl1sLj7B2nkHL4lzdig4osvl9/LdGbXwrdFRoqBS98gsEsOakr0yH+r5NZ/1Y9gdVB8trA==",
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/nanospinner/-/nanospinner-1.2.2.tgz",
+			"integrity": "sha512-Zt/AmG6qRU3e+WnzGGLuMCEAO/dAu45stNbHY223tUxldaDAeE+FxSPsd9Q+j+paejmm0ZbrNVs5Sraqy3dRxA==",
 			"dev": true,
-			"license": "ISC",
+			"license": "MIT",
 			"dependencies": {
-				"picocolors": "^1.0.0"
+				"picocolors": "^1.1.1"
 			}
 		},
 		"node_modules/node-domexception": {
@@ -2189,16 +2163,16 @@
 			}
 		},
 		"node_modules/nodejsscript": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/nodejsscript/-/nodejsscript-1.0.2.tgz",
-			"integrity": "sha512-ofGiso5StUjQbM0lG0dwumJSQMstaU8NZ6CWsGcX4bbTTQGnTvf7GI/2jyG3UqsF79VJTLHHLPVwoqJ+Wn9/rQ==",
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/nodejsscript/-/nodejsscript-1.0.3.tgz",
+			"integrity": "sha512-R6mp1CNY269bP+HmIpZ/vvMgPNvNjKrPvB3IMBGLoi0lm8261P4ZY8Vk1a6VFtDTZW5tnq0NPnodZn1oumg5zg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/sade": "~1.7",
 				"@types/shelljs": "~0.8",
 				"abort-controller": "~3.0",
-				"css-in-console": "~2.0",
+				"css-in-console": "~2.1",
 				"log-update-async-hook": "~2.0",
 				"node-fetch": "~3.3",
 				"sade": "~1.8",
@@ -2226,9 +2200,9 @@
 			}
 		},
 		"node_modules/nwsapi": {
-			"version": "2.2.13",
-			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.13.tgz",
-			"integrity": "sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ==",
+			"version": "2.2.18",
+			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.18.tgz",
+			"integrity": "sha512-p1TRH/edngVEHVbwqWnxUViEmq5znDvyB+Sik5cmuLpGOIfDf/39zLiq3swPF8Vakqn+gvNiOQAZu8djYlQILA==",
 			"dev": true,
 			"license": "MIT"
 		},
@@ -2256,9 +2230,9 @@
 			}
 		},
 		"node_modules/parse5": {
-			"version": "7.2.0",
-			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.0.tgz",
-			"integrity": "sha512-ZkDsAOcxsUMZ4Lz5fVciOehNcJ+Gb8gTzcA4yl3wnc273BAybYWrQ+Ks/OjCjSEpjvQkDSeZbybK9qj2VHHdGA==",
+			"version": "7.2.1",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
+			"integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -2300,33 +2274,33 @@
 			"peer": true
 		},
 		"node_modules/path-type": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/path-type/-/path-type-5.0.0.tgz",
-			"integrity": "sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==",
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/path-type/-/path-type-6.0.0.tgz",
+			"integrity": "sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
 		"node_modules/picocolors": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-			"integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
 			"dev": true,
 			"license": "ISC"
 		},
 		"node_modules/picomatch": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+			"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
-				"node": ">=8.6"
+				"node": ">=12"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/jonschlinkert"
@@ -2377,16 +2351,17 @@
 			}
 		},
 		"node_modules/readdirp": {
-			"version": "3.6.0",
-			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+			"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
 			"dev": true,
 			"license": "MIT",
-			"dependencies": {
-				"picomatch": "^2.2.1"
-			},
 			"engines": {
-				"node": ">=8.10.0"
+				"node": ">= 14.18.0"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://paulmillr.com/funding/"
 			}
 		},
 		"node_modules/rechoir": {
@@ -2402,29 +2377,42 @@
 				"node": ">= 0.10"
 			}
 		},
+		"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.8",
-			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
-			"integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+			"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",
 			"peer": true,
 			"dependencies": {
-				"is-core-module": "^2.13.0",
+				"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/reusify": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-			"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+			"integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -2433,9 +2421,9 @@
 			}
 		},
 		"node_modules/rrweb-cssom": {
-			"version": "0.7.1",
-			"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
-			"integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
+			"version": "0.8.0",
+			"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+			"integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
 			"dev": true,
 			"license": "MIT"
 		},
@@ -2529,18 +2517,19 @@
 			}
 		},
 		"node_modules/size-limit": {
-			"version": "11.0.3",
-			"resolved": "https://registry.npmjs.org/size-limit/-/size-limit-11.0.3.tgz",
-			"integrity": "sha512-opXC+dOlwaKMyCx89WQq5J+LE+WdqtAFwaNwKNJv8xTCNMq6NIIY5LdayTRuRWWdsQM7hvI27afjtofN/m0gIw==",
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/size-limit/-/size-limit-11.2.0.tgz",
+			"integrity": "sha512-2kpQq2DD/pRpx3Tal/qRW1SYwcIeQ0iq8li5CJHQgOC+FtPn2BVmuDtzUCgNnpCrbgtfEHqh+iWzxK+Tq6C+RQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"bytes-iec": "^3.1.1",
-				"chokidar": "^3.6.0",
-				"globby": "^14.0.1",
-				"lilconfig": "^3.1.1",
-				"nanospinner": "^1.1.0",
-				"picocolors": "^1.0.0"
+				"chokidar": "^4.0.3",
+				"jiti": "^2.4.2",
+				"lilconfig": "^3.1.3",
+				"nanospinner": "^1.2.2",
+				"picocolors": "^1.1.1",
+				"tinyglobby": "^0.2.11"
 			},
 			"bin": {
 				"size-limit": "bin.js"
@@ -2567,6 +2556,31 @@
 				"url": "https://opencollective.com/unts"
 			}
 		},
+		"node_modules/size-limit-node-esbuild/node_modules/chokidar": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+			"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"anymatch": "~3.1.2",
+				"braces": "~3.0.2",
+				"glob-parent": "~5.1.2",
+				"is-binary-path": "~2.1.0",
+				"is-glob": "~4.0.1",
+				"normalize-path": "~3.0.0",
+				"readdirp": "~3.6.0"
+			},
+			"engines": {
+				"node": ">= 8.10.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			},
+			"optionalDependencies": {
+				"fsevents": "~2.3.2"
+			}
+		},
 		"node_modules/size-limit-node-esbuild/node_modules/lilconfig": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -2577,6 +2591,32 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/size-limit-node-esbuild/node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
+		"node_modules/size-limit-node-esbuild/node_modules/readdirp": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"picomatch": "^2.2.1"
+			},
+			"engines": {
+				"node": ">=8.10.0"
+			}
+		},
 		"node_modules/size-limit-node-esbuild/node_modules/size-limit": {
 			"version": "10.0.3",
 			"resolved": "https://registry.npmjs.org/size-limit/-/size-limit-10.0.3.tgz",
@@ -2680,23 +2720,40 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/tldts": {
-			"version": "6.1.51",
-			"resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.51.tgz",
-			"integrity": "sha512-33lfQoL0JsDogIbZ8fgRyvv77GnRtwkNE/MOKocwUgPO1WrSfsq7+vQRKxRQZai5zd+zg97Iv9fpFQSzHyWdLA==",
+		"node_modules/tinyglobby": {
+			"version": "0.2.12",
+			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
+			"integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"tldts-core": "^6.1.51"
+				"fdir": "^6.4.3",
+				"picomatch": "^4.0.2"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/SuperchupuDev"
+			}
+		},
+		"node_modules/tldts": {
+			"version": "6.1.82",
+			"resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.82.tgz",
+			"integrity": "sha512-KCTjNL9F7j8MzxgfTgjT+v21oYH38OidFty7dH00maWANAI2IsLw2AnThtTJi9HKALHZKQQWnNebYheadacD+g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tldts-core": "^6.1.82"
 			},
 			"bin": {
 				"tldts": "bin/cli.js"
 			}
 		},
 		"node_modules/tldts-core": {
-			"version": "6.1.51",
-			"resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.51.tgz",
-			"integrity": "sha512-bu9oCYYWC1iRjx+3UnAjqCsfrWNZV1ghNQf49b3w5xE8J/tNShHTzp5syWJfwGH+pxUgTTLUnzHnfuydW7wmbg==",
+			"version": "6.1.82",
+			"resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.82.tgz",
+			"integrity": "sha512-Jabl32m21tt/d/PbDO88R43F8aY98Piiz6BVH9ShUlOAiiAELhEqwrAmBocjAqnCfoUeIsRU+h3IEzZd318F3w==",
 			"dev": true,
 			"license": "MIT"
 		},
@@ -2714,9 +2771,9 @@
 			}
 		},
 		"node_modules/tough-cookie": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.0.0.tgz",
-			"integrity": "sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==",
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+			"integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
 			"dev": true,
 			"license": "BSD-3-Clause",
 			"dependencies": {
@@ -2740,9 +2797,9 @@
 			}
 		},
 		"node_modules/tslib": {
-			"version": "2.7.0",
-			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-			"integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
 			"dev": true,
 			"license": "0BSD"
 		},
@@ -2760,31 +2817,30 @@
 			}
 		},
 		"node_modules/typescript": {
-			"version": "2.9.2",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
-			"integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
+			"version": "5.8.2",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
+			"integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
 			"dev": true,
 			"license": "Apache-2.0",
-			"peer": true,
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"
 			},
 			"engines": {
-				"node": ">=4.2.0"
+				"node": ">=14.17"
 			}
 		},
 		"node_modules/undici-types": {
-			"version": "6.19.8",
-			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-			"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+			"version": "6.20.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+			"integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
 			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/unicorn-magic": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz",
-			"integrity": "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==",
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
+			"integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -2851,9 +2907,9 @@
 			}
 		},
 		"node_modules/whatwg-url": {
-			"version": "14.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
-			"integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
+			"version": "14.1.1",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.1.1.tgz",
+			"integrity": "sha512-mDGf9diDad/giZ/Sm9Xi2YcyzaFpbdLpJPr+E9fSkyQ7KpQD4SdFcugkRQYzhmfI4KeV4Qpnn2sKPdo+kmsgRQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -2890,9 +2946,9 @@
 			"license": "ISC"
 		},
 		"node_modules/ws": {
-			"version": "8.18.0",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
-			"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+			"version": "8.18.1",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.1.tgz",
+			"integrity": "sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -2927,6 +2983,45 @@
 			"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
 			"dev": true,
 			"license": "MIT"
+		},
+		"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"
+			}
 		}
 	}
 }
diff --git a/package.json b/package.json
index 9018174..066a3b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "deka-dom-el",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.",
 	"author": "Jan Andrle <andrle.jan@centrum.cz>",
 	"license": "MIT",
@@ -29,8 +29,8 @@
 			"types": "./jsdom.d.ts"
 		},
 		"./src/signals-lib": {
-			"import": "./src/signals-lib.js",
-			"types": "./src/signals-lib.d.ts"
+			"import": "./src/signals-lib/signals-lib.js",
+			"types": "./src/signals-lib/signals-lib.d.ts"
 		}
 	},
 	"files": [
@@ -53,7 +53,8 @@
 		"globals": {
 			"requestIdleCallback": false,
 			"AbortController": false,
-			"AbortSignal": false
+			"AbortSignal": false,
+			"FinalizationRegistry": false
 		}
 	},
 	"size-limit": [
@@ -65,7 +66,7 @@
 		},
 		{
 			"path": "./signals.js",
-			"limit": "12 kB",
+			"limit": "12.5 kB",
 			"gzip": false,
 			"brotli": false
 		},
@@ -77,7 +78,7 @@
 		},
 		{
 			"path": "./index-with-signals.js",
-			"limit": "5.25 kB"
+			"limit": "5.5 kB"
 		}
 	],
 	"modifyEsbuildConfig": {
@@ -91,11 +92,11 @@
 		"typescript"
 	],
 	"devDependencies": {
-		"@size-limit/preset-small-lib": "~11.0",
-		"dts-bundler": "~0.1",
+		"@size-limit/preset-small-lib": "~11.2",
+		"dts-bundle-generator": "~9.5",
 		"editorconfig-checker": "~6.0",
-		"esbuild": "~0.24",
-		"jsdom": "~25.0",
+		"esbuild": "~0.25",
+		"jsdom": "~26.0",
 		"jshint": "~2.13",
 		"nodejsscript": "^1.0.2",
 		"size-limit-node-esbuild": "~0.3"
diff --git a/signals.d.ts b/signals.d.ts
index 2cd5d19..34eb228 100644
--- a/signals.d.ts
+++ b/signals.d.ts
@@ -1,4 +1,12 @@
-export type Signal<V, A>= (set?: V)=> V & A;
+export interface Signal<V, A> {
+	/** The current value of the signal */
+	get(): V;
+	/** Set new value of the signal */
+	set(value: V): V;
+	toJSON(): V;
+	valueOf(): V;
+}
+
 type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
 //type SymbolSignal= Symbol;
 type SymbolOnclear= symbol;
@@ -27,7 +35,7 @@ interface signal{
 	 * ```js
 	 * const name= S("Jan");
 	 * const surname= S("Andrle");
-	 * const fullname= S(()=> name()+" "+surname());
+	 * const fullname= S(()=> name.get()+" "+surname.get());
 	 * ```
 	 * @param value Initial signal value. Or function computing value from other signals.
 	 * @param actions Use to define actions on the signal. Such as add item to the array.
diff --git a/signals.js b/signals.js
index 5e456f4..dc6392d 100644
--- a/signals.js
+++ b/signals.js
@@ -1,4 +1,4 @@
-export { signal, S, isSignal } from "./src/signals-lib.js";
-import { signals_config } from "./src/signals-lib.js";
-import { registerReactivity } from "./src/signals-common.js";
+export { signal, S, isSignal } from "./src/signals-lib/signals-lib.js";
+import { signals_config } from "./src/signals-lib/signals-lib.js";
+import { registerReactivity } from "./src/signals-lib/common.js";
 registerReactivity(signals_config);
diff --git a/src/customElement.js b/src/customElement.js
index c34b911..33eb0ee 100644
--- a/src/customElement.js
+++ b/src/customElement.js
@@ -1,6 +1,15 @@
 import { keyLTE, evc, evd, eva } from "./dom-common.js";
 import { scope } from "./dom.js";
 import { c_ch_o } from "./events-observer.js";
+
+/**
+ * Renders content into a custom element or shadow root
+ *
+ * @param {Element|ShadowRoot} target - The custom element or shadow root to render into
+ * @param {Function} render - The render function that returns content
+ * @param {Function|Object} [props=observedAttributes] - Props to pass to the render function
+ * @returns {Node} The rendered content
+ */
 export function customElementRender(target, render, props= observedAttributes){
 	const custom_element= target.host || target;
 	scope.push({
@@ -17,6 +26,13 @@ export function customElementRender(target, render, props= observedAttributes){
 	scope.pop();
 	return target.append(out);
 }
+
+/**
+ * Transforms custom element lifecycle callbacks into events
+ *
+ * @param {Function|Object} class_declaration - Custom element class or instance
+ * @returns {Function|Object} The modified class or instance
+ */
 export function lifecyclesToEvents(class_declaration){
 	wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail){
 		target.apply(thisArg, detail);
@@ -38,12 +54,30 @@ export function lifecyclesToEvents(class_declaration){
 	class_declaration.prototype[keyLTE]= true;
 	return class_declaration;
 }
+
+/** Public API */
 export { lifecyclesToEvents as customElementWithDDE };
+
+/**
+ * Wraps a method with a proxy to intercept calls
+ *
+ * @param {Object} obj - Object containing the method
+ * @param {string} method - Method name to wrap
+ * @param {Function} apply - Function to execute when method is called
+ * @private
+ */
 function wrapMethod(obj, method, apply){
 	obj[method]= new Proxy(obj[method] || (()=> {}), { apply });
 }
 
 import { observedAttributes as oA } from "./helpers.js";
+
+/**
+ * Gets observed attributes for a custom element
+ *
+ * @param {Element} instance - Custom element instance
+ * @returns {Object} Object mapping camelCase attribute names to their values
+ */
 export function observedAttributes(instance){
 	return oA(instance, (i, n)=> i.getAttribute(n));
 }
diff --git a/src/dom-common.js b/src/dom-common.js
index 01eb83f..ba08da1 100644
--- a/src/dom-common.js
+++ b/src/dom-common.js
@@ -1,3 +1,15 @@
+/**
+ * Environment configuration and globals for the library
+ * @typedef {Object} Environment
+ * @property {typeof setDeleteAttr} setDeleteAttr - Function to safely set or delete attributes
+ * @property {string} ssr - Server-side rendering flag
+ * @property {Document} D - Document global
+ * @property {typeof DocumentFragment} F - DocumentFragment constructor
+ * @property {typeof HTMLElement} H - HTMLElement constructor
+ * @property {typeof SVGElement} S - SVGElement constructor
+ * @property {typeof MutationObserver} M - MutationObserver constructor
+ * @property {Function} q - Promise wrapper for Promse queue feature
+ */
 export const enviroment= {
 	setDeleteAttr,
 	ssr: "",
@@ -8,26 +20,43 @@ export const enviroment= {
 	M: globalThis.MutationObserver,
 	q: p=> p || Promise.resolve(),
 };
-import { isUndef } from './helpers.js';
+import { isInstance, isUndef } from './helpers.js';
+
+/**
+ * Handles attribute setting with special undefined handling
+ *
+ * @param {Object} obj - The object to set the property on
+ * @param {string} prop - The property name
+ * @param {any} val - The value to set
+ * @returns {void}
+ *
+ * Issue:
+ *   For some native attrs you can unset only to set empty string.
+ *   This can be confusing as it is seen in inspector `<… id=""`.
+ *   Options:
+ *     1. Leave it, as it is native behaviour
+ *     2. Sets as empty string and removes the corresponding attribute when also has empty string
+ *     3. (*) Sets as undefined and removes the corresponding attribute when "undefined" string discovered
+ *     4. Point 2. with checks for coincidence (e.g. use special string)
+ */
 function setDeleteAttr(obj, prop, val){
-	/* Issue
-		For some native attrs you can unset only to set empty string.
-		This can be confusing as it is seen in inspector `<… id=""`.
-		Options:
-			1. Leave it, as it is native behaviour
-			2. Sets as empty string and removes the corresponding attribute when also has empty string
-			3. (*) Sets as undefined and removes the corresponding attribute when "undefined" string discovered
-			4. Point 2. with checks for coincidence (e.g. use special string)
-	*/
 	Reflect.set(obj, prop, val);
 	if(!isUndef(val)) return;
 	Reflect.deleteProperty(obj, prop);
-	if(obj instanceof enviroment.H && obj.getAttribute(prop)==="undefined")
+	if(isInstance(obj, enviroment.H) && obj.getAttribute(prop)==="undefined")
 		return obj.removeAttribute(prop);
 	if(Reflect.get(obj, prop)==="undefined")
 		return Reflect.set(obj, prop, "");
 }
+
+/** Property key for tracking lifecycle events */
 export const keyLTE= "__dde_lifecyclesToEvents"; //boolean
+
+/** Event name for connected lifecycle event */
 export const evc= "dde:connected";
+
+/** Event name for disconnected lifecycle event */
 export const evd= "dde:disconnected";
+
+/** Event name for attribute changed lifecycle event */
 export const eva= "dde:attributeChanged";
diff --git a/src/dom.js b/src/dom.js
index 9e07785..dc3da60 100644
--- a/src/dom.js
+++ b/src/dom.js
@@ -1,38 +1,104 @@
-import { signals } from "./signals-common.js";
+import { signals } from "./signals-lib/common.js";
 import { enviroment as env } from './dom-common.js';
+import { isInstance, isUndef, oAssign } from "./helpers.js";
 
-//TODO: add type, docs ≡ make it public
+/**
+ * Queues a promise, this is helpful for crossplatform components (on server side we can wait for all registered
+ * promises to be resolved before rendering).
+ * @param {Promise} promise - Promise to process
+ * @returns {Promise} Processed promise
+ */
 export function queue(promise){ return env.q(promise); }
-/** @type {{ scope: object, prevent: boolean, host: function }[]} */
+
+/**
+ * Array of scope contexts for tracking component hierarchies
+ * @type {{ scope: object, prevent: boolean, host: function }[]}
+ */
 const scopes= [ {
 	get scope(){ return  env.D.body; },
 	host: c=> c ? c(env.D.body) : env.D.body,
 	prevent: true,
 } ];
+/**
+ * Scope management utility for tracking component hierarchies
+ */
 export const scope= {
+	/**
+	 * Gets the current scope
+	 * @returns {Object} Current scope context
+	 */
 	get current(){ return scopes[scopes.length-1]; },
+
+	/**
+	 * Gets the host element of the current scope
+	 * @returns {Function} Host accessor function
+	 */
 	get host(){ return this.current.host; },
 
+	/**
+	 * Prevents default behavior in the current scope
+	 * @returns {Object} Current scope context
+	 */
 	preventDefault(){
 		const { current }= this;
 		current.prevent= true;
 		return current;
 	},
 
+	/**
+	 * Gets a copy of the current scope stack
+	 * @returns {Array} Copy of scope stack
+	 */
 	get state(){ return [ ...scopes ]; },
-	push(s= {}){ return scopes.push(Object.assign({}, this.current, { prevent: false }, s)); },
+
+	/**
+	 * Pushes a new scope to the stack
+	 * @param {Object} [s={}] - Scope object to push
+	 * @returns {number} New length of the scope stack
+	 */
+	push(s= {}){ return scopes.push(oAssign({}, this.current, { prevent: false }, s)); },
+
+	/**
+	 * Pushes the root scope to the stack
+	 * @returns {number} New length of the scope stack
+	 */
 	pushRoot(){ return scopes.push(scopes[0]); },
+
+	/**
+	 * Pops the current scope from the stack
+	 * @returns {Object|undefined} Popped scope or undefined if only one scope remains
+	 */
 	pop(){
 		if(scopes.length===1) return;
 		return scopes.pop();
 	},
 };
-//NOTE: following chainableAppend implementation is OK as the ElementPrototype.append description already is { writable: true, enumerable: true, configurable: true } // editorconfig-checker-disable-line
+/**
+ * Chainable append function for elements
+ * @private
+ */
 function append(...els){ this.appendOriginal(...els); return this; }
+
+/**
+ * Makes an element's append method chainable. NOTE: following chainableAppend implementation is OK as the
+ * ElementPrototype.append description already is { writable: true, enumerable: true, configurable: true }
+ * @param {Element} el - Element to modify
+ * @returns {Element} Modified element
+ */
 export function chainableAppend(el){
 	if(el.append===append) return el; el.appendOriginal= el.append; el.append= append; return el;
 }
+/** Current namespace for element creation */
 let namespace;
+
+/**
+ * Creates a DOM element with specified tag, attributes and addons
+ *
+ * @param {string|Function} tag - Element tag name or component function
+ * @param {Object|string|number} [attributes] - Element attributes
+ * @param {...Function} addons - Functions to call with the created element
+ * @returns {Element|DocumentFragment} Created element
+ */
 export function createElement(tag, attributes, ...addons){
 	/* jshint maxcomplexity: 15 */
 	const s= signals(this);
@@ -47,7 +113,7 @@ export function createElement(tag, attributes, ...addons){
 				(scoped===1 ? addons.unshift(...c) : c.forEach(c=> c(el_host)), undefined);
 			scope.push({ scope: tag, host });
 			el= tag(attributes || undefined);
-			const is_fragment= el instanceof env.F;
+			const is_fragment= isInstance(el, env.F);
 			if(el.nodeName==="#comment") break;
 			const el_mark= createElement.mark({
 				type: "component",
@@ -70,10 +136,15 @@ export function createElement(tag, attributes, ...addons){
 	scoped= 2;
 	return el;
 }
+
 /**
- * @param { { type: "component", name: string, host: "this" | "parentElement" } | { type: "reactive" | "later" } } attrs
- * @param {boolean} [is_open=false]
- * */
+ * Creates a marker comment for elements
+ *
+ * @param {{ type: "component"|"reactive"|"later", name?: string, host?: "this"|"parentElement" }} attrs - Marker
+ * attributes
+ * @param {boolean} [is_open=false] - Whether the marker is open-ended
+ * @returns {Comment} Comment node marker
+ */
 createElement.mark= function(attrs, is_open= false){
 	attrs= Object.entries(attrs).map(([ n, v ])=> n+`="${v}"`).join(" ");
 	const end= is_open ? "" : "/";
@@ -81,8 +152,16 @@ createElement.mark= function(attrs, is_open= false){
 	if(is_open) out.end= env.D.createComment("</dde:mark>");
 	return out;
 };
+/** Alias for createElement */
 export { createElement as el };
+
 //TODO?: const namespaceHelper= ns=> ns==="svg" ? "http://www.w3.org/2000/svg" : ns;
+/**
+ * Creates a namespaced element creation function
+ *
+ * @param {string} ns - Namespace URI
+ * @returns {Function} Element creation function for the namespace
+ */
 export function createElementNS(ns){
 	const _this= this;
 	return function createElementNSCurried(...rest){
@@ -92,9 +171,17 @@ export function createElementNS(ns){
 		return el;
 	};
 }
+
+/** Alias for createElementNS */
 export { createElementNS as elNS };
 
-/** @param {HTMLElement} element @param {HTMLElement} [root] */
+/**
+ * Simulates slot functionality for elements
+ *
+ * @param {HTMLElement} element - Parent element
+ * @param {HTMLElement} [root=element] - Root element containing slots
+ * @returns {HTMLElement} The root element
+ */
 export function simulateSlots(element, root= element){
 	const mark_e= "¹⁰", mark_s= "✓"; //NOTE: Markers to identify slots processed by this function. Also “prevents” native behavior as it is unlikely to use these in names. // editorconfig-checker-disable-line
 	const slots= Object.fromEntries(
@@ -128,17 +215,34 @@ export function simulateSlots(element, root= element){
 	return root;
 }
 
+/** Store for element assignment contexts */
 const assign_context= new WeakMap();
 const { setDeleteAttr }= env;
+
+/**
+ * Assigns attributes to an element
+ *
+ * @param {Element} element - Element to assign attributes to
+ * @param {...Object} attributes - Attribute objects to assign
+ * @returns {Element} The element with attributes assigned
+ */
 export function assign(element, ...attributes){
 	if(!attributes.length) return element;
 	assign_context.set(element, assignContext(element, this));
 
-	for(const [ key, value ] of Object.entries(Object.assign({}, ...attributes)))
+	for(const [ key, value ] of Object.entries(oAssign({}, ...attributes)))
 		assignAttribute.call(this, element, key, value);
 	assign_context.delete(element);
 	return element;
 }
+/**
+ * Assigns a single attribute to an element
+ *
+ * @param {Element} element - Element to assign attribute to
+ * @param {string} key - Attribute name
+ * @param {any} value - Attribute value
+ * @returns {any} Result of the attribute assignment
+ */
 export function assignAttribute(element, key, value){
 	const { setRemoveAttr, s }= assignContext(element, this);
 	const _this= this;
@@ -170,13 +274,28 @@ export function assignAttribute(element, key, value){
 	}
 	return isPropSetter(element, key) ? setDeleteAttr(element, key, value) : setRemoveAttr(key, value);
 }
+/**
+ * Gets or creates assignment context for an element
+ *
+ * @param {Element} element - Element to get context for
+ * @param {Object} _this - Context object
+ * @returns {Object} Assignment context
+ * @private
+ */
 function assignContext(element, _this){
 	if(assign_context.has(element)) return assign_context.get(element);
-	const is_svg= element instanceof env.S;
+	const is_svg= isInstance(element, env.S);
 	const setRemoveAttr= (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute");
 	const s= signals(_this);
 	return { setRemoveAttr, s };
 }
+/**
+ * Applies a declarative classList object to an element
+ *
+ * @param {Element} element - Element to apply classes to
+ * @param {Object} toggle - Object with class names as keys and boolean values
+ * @returns {Element} The element with classes applied
+ */
 export function classListDeclarative(element, toggle){
 	const s= signals(this);
 	forEachEntries(s, "classList", element, toggle,
@@ -184,18 +303,45 @@ export function classListDeclarative(element, toggle){
 			element.classList.toggle(class_name, val===-1 ? undefined : Boolean(val)) );
 	return element;
 }
+
+/**
+ * Generic element attribute manipulation
+ *
+ * @param {Element} element - Element to manipulate
+ * @param {string} op - Operation ("set" or "remove")
+ * @param {string} key - Attribute name
+ * @param {any} [value] - Attribute value
+ * @returns {void}
+ */
 export function elementAttribute(element, op, key, value){
-	if(element instanceof env.H)
+	if(isInstance(element, env.H))
 		return element[op+"Attribute"](key, value);
 	return element[op+"AttributeNS"](null, key, value);
 }
-import { isUndef } from "./helpers.js";
+
 //TODO: add cache? `(Map/Set)<el.tagName+key,isUndef>`
+/**
+ * Checks if a property can be set on an element
+ *
+ * @param {Element} el - Element to check
+ * @param {string} key - Property name
+ * @returns {boolean} Whether the property can be set
+ * @private
+ */
 function isPropSetter(el, key){
 	if(!(key in el)) return false;
 	const des= getPropDescriptor(el, key);
 	return !isUndef(des.set);
 }
+
+/**
+ * Gets a property descriptor from a prototype chain
+ *
+ * @param {Object} p - Prototype object
+ * @param {string} key - Property name
+ * @returns {PropertyDescriptor} Property descriptor
+ * @private
+ */
 function getPropDescriptor(p, key){
 	p= Object.getPrototypeOf(p);
 	if(!p) return {};
@@ -224,9 +370,44 @@ function forEachEntries(s, target, element, obj, cb){
 	});
 }
 
+/**
+ * Sets or removes an attribute based on value
+ *
+ * @param {Element} obj - Element to modify
+ * @param {string} prop - Property suffix ("Attribute")
+ * @param {string} key - Attribute name
+ * @param {any} val - Attribute value
+ * @returns {void}
+ * @private
+ */
 function setRemove(obj, prop, key, val){
-	return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, val); }
+	return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, val);
+}
+
+/**
+ * Sets or removes a namespaced attribute based on value
+ *
+ * @param {Element} obj - Element to modify
+ * @param {string} prop - Property suffix ("Attribute")
+ * @param {string} key - Attribute name
+ * @param {any} val - Attribute value
+ * @param {string|null} [ns=null] - Namespace URI
+ * @returns {void}
+ * @private
+ */
 function setRemoveNS(obj, prop, key, val, ns= null){
-	return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, val); }
+	return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, val);
+}
+
+/**
+ * Sets or deletes a property based on value
+ *
+ * @param {Object} obj - Object to modify
+ * @param {string} key - Property name
+ * @param {any} val - Property value
+ * @returns {void}
+ * @private
+ */
 function setDelete(obj, key, val){
-	Reflect.set(obj, key, val); if(!isUndef(val)) return; return Reflect.deleteProperty(obj, key); }
+	Reflect.set(obj, key, val); if(!isUndef(val)) return; return Reflect.deleteProperty(obj, key);
+}
diff --git a/src/events-observer.js b/src/events-observer.js
index 846340e..5ac925f 100644
--- a/src/events-observer.js
+++ b/src/events-observer.js
@@ -1,11 +1,27 @@
 import { enviroment as env, evc, evd } from './dom-common.js';
+import { isInstance } from "./helpers.js";
+
+/**
+ * Connection changes observer for tracking element connection/disconnection
+ * Falls back to a dummy implementation if MutationObserver is not available
+ */
 export const c_ch_o= env.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
 	get(){ return ()=> {}; }
 });
 
+/**
+ * Creates an observer that tracks elements being connected to and disconnected from the DOM
+ * @returns {Object} Observer with methods to register element listeners
+ */
 function connectionsChangesObserverConstructor(){
 	const store= new Map();
 	let is_observing= false;
+
+	/**
+	 * Creates a mutation observer callback
+	 * @param {Function} stop - Function to stop observation when no longer needed
+	 * @returns {Function} MutationObserver callback
+	 */
 	const observerListener= stop=> function(mutations){
 		for(const mutation of mutations){
 			if(mutation.type!=="childList") continue;
@@ -17,13 +33,26 @@ function connectionsChangesObserverConstructor(){
 				stop();
 		}
 	};
+
 	const observer= new env.M(observerListener(stop));
+
 	return {
+		/**
+		 * Creates an observer for a specific element
+		 * @param {Element} element - Element to observe
+		 * @returns {Function} Cleanup function
+		 */
 		observe(element){
 			const o= new env.M(observerListener(()=> {}));
 			o.observe(element, { childList: true, subtree: true });
 			return ()=> o.disconnect();
 		},
+
+		/**
+		 * Register a connection listener for an element
+		 * @param {Element} element - Element to watch
+		 * @param {Function} listener - Callback for connection event
+		 */
 		onConnected(element, listener){
 			start();
 			const listeners= getElementStore(element);
@@ -31,6 +60,12 @@ function connectionsChangesObserverConstructor(){
 			listeners.connected.add(listener);
 			listeners.length_c+= 1;
 		},
+
+		/**
+		 * Unregister a connection listener
+		 * @param {Element} element - Element being watched
+		 * @param {Function} listener - Callback to remove
+		 */
 		offConnected(element, listener){
 			if(!store.has(element)) return;
 			const ls= store.get(element);
@@ -39,6 +74,12 @@ function connectionsChangesObserverConstructor(){
 			ls.length_c-= 1;
 			cleanWhenOff(element, ls);
 		},
+
+		/**
+		 * Register a disconnection listener for an element
+		 * @param {Element} element - Element to watch
+		 * @param {Function} listener - Callback for disconnection event
+		 */
 		onDisconnected(element, listener){
 			start();
 			const listeners= getElementStore(element);
@@ -46,21 +87,38 @@ function connectionsChangesObserverConstructor(){
 			listeners.disconnected.add(listener);
 			listeners.length_d+= 1;
 		},
+
+		/**
+		 * Unregister a disconnection listener
+		 * @param {Element} element - Element being watched
+		 * @param {Function} listener - Callback to remove
+		 */
 		offDisconnected(element, listener){
 			if(!store.has(element)) return;
 			const ls= store.get(element);
-			if(!ls.disconnected.has(listener)) return;
 			ls.disconnected.delete(listener);
 			ls.length_d-= 1;
 			cleanWhenOff(element, ls);
 		}
 	};
+
+	/**
+	 * Cleanup element tracking when all listeners are removed
+	 * @param {Element} element - Element to potentially remove from tracking
+	 * @param {Object} ls - Element's listener store
+	 */
 	function cleanWhenOff(element, ls){
 		if(ls.length_c || ls.length_d)
 			return;
 		store.delete(element);
 		stop();
 	}
+
+	/**
+	 * Gets or creates a store for element listeners
+	 * @param {Element} element - Element to get store for
+	 * @returns {Object} Listener store for the element
+	 */
 	function getElementStore(element){
 		if(store.has(element)) return store.get(element);
 		const out= {
@@ -72,32 +130,58 @@ function connectionsChangesObserverConstructor(){
 		store.set(element, out);
 		return out;
 	}
+
+	/**
+	 * Start observing DOM changes
+	 */
 	function start(){
 		if(is_observing) return;
 		is_observing= true;
 		observer.observe(env.D.body, { childList: true, subtree: true });
 	}
+
+	/**
+	 * Stop observing DOM changes when no longer needed
+	 */
 	function stop(){
 		if(!is_observing || store.size) return;
 		is_observing= false;
 		observer.disconnect();
 	}
+
 	//TODO: remount support?
+	/**
+	 * Schedule a task during browser idle time
+	 * @returns {Promise<void>} Promise that resolves when browser is idle
+	 */
 	function requestIdle(){ return new Promise(function(resolve){
 		(requestIdleCallback || requestAnimationFrame)(resolve);
 	}); }
+
+	/**
+	 * Collects child elements from the store that are contained by the given element
+	 * @param {Element} element - Parent element
+	 * @returns {Promise<Element[]>} Promise resolving to array of child elements
+	 */
 	async function collectChildren(element){
 		if(store.size > 30)//TODO?: limit
 			await requestIdle();
 		const out= [];
-		if(!(element instanceof Node)) return out;
+		if(!isInstance(element, Node)) return out;
 		for(const el of store.keys()){
-			if(el===element || !(el instanceof Node)) continue;
+			if(el===element || !isInstance(el, Node)) continue;
 			if(element.contains(el))
 				out.push(el);
 		}
 		return out;
 	}
+
+	/**
+	 * Process nodes added to the DOM
+	 * @param {NodeList} addedNodes - Nodes that were added
+	 * @param {boolean} is_root - Whether these are root-level additions
+	 * @returns {boolean} Whether any relevant elements were processed
+	 */
 	function observerAdded(addedNodes, is_root){
 		let out= false;
 		for(const element of addedNodes){
@@ -115,6 +199,13 @@ function connectionsChangesObserverConstructor(){
 		}
 		return out;
 	}
+
+	/**
+	 * Process nodes removed from the DOM
+	 * @param {NodeList} removedNodes - Nodes that were removed
+	 * @param {boolean} is_root - Whether these are root-level removals
+	 * @returns {boolean} Whether any relevant elements were processed
+	 */
 	function observerRemoved(removedNodes, is_root){
 		let out= false;
 		for(const element of removedNodes){
@@ -128,6 +219,12 @@ function connectionsChangesObserverConstructor(){
 		}
 		return out;
 	}
+
+	/**
+	 * Creates a function to dispatch the disconnect event
+	 * @param {Element} element - Element that was removed
+	 * @returns {Function} Function to dispatch event after confirming disconnection
+	 */
 	function dispatchRemove(element){
 		return ()=> {
 			if(element.isConnected) return;
diff --git a/src/events.js b/src/events.js
index 282f13d..49d0b27 100644
--- a/src/events.js
+++ b/src/events.js
@@ -1,7 +1,17 @@
-export { registerReactivity } from './signals-common.js';
+export { registerReactivity } from './signals-lib/common.js';
 import { enviroment as env, keyLTE, evc, evd, eva } from './dom-common.js';
+import { oAssign, onAbort } from './helpers.js';
 
+/**
+ * Creates a function to dispatch events on elements
+ *
+ * @param {string} name - Event name
+ * @param {Object} [options] - Event options
+ * @param {Element|Function} [host] - Host element or function returning host element
+ * @returns {Function} Function that dispatches the event
+ */
 export function dispatchEvent(name, options, host){
+	if(typeof options==="function"){ host= options; options= null; }
 	if(!options) options= {};
 	return function dispatch(element, ...d){
 		if(host){
@@ -9,10 +19,19 @@ export function dispatchEvent(name, options, host){
 			element= typeof host==="function"? host() : host;
 		}
 		//TODO: what about re-emmitting?
-		const event= d.length ? new CustomEvent(name, Object.assign({ detail: d[0] }, options)) : new Event(name, options);
+		const event= d.length ? new CustomEvent(name, oAssign({ detail: d[0] }, options)) : new Event(name, options);
 		return element.dispatchEvent(event);
 	};
 }
+
+/**
+ * Creates a function to register event listeners on elements
+ *
+ * @param {string} event - Event name
+ * @param {Function} listener - Event handler
+ * @param {Object} [options] - Event listener options
+ * @returns {Function} Function that registers the listener
+ */
 export function on(event, listener, options){
 	return function registerElement(element){
 		element.addEventListener(event, listener, options);
@@ -21,10 +40,23 @@ export function on(event, listener, options){
 }
 
 import { c_ch_o } from "./events-observer.js";
-import { onAbort } from './helpers.js';
-const lifeOptions= obj=> Object.assign({}, typeof obj==="object" ? obj : null, { once: true });
+
+/**
+ * Prepares lifecycle event options with once:true default
+ * @private
+ */
+const lifeOptions= obj=> oAssign({}, typeof obj==="object" ? obj : null, { once: true });
+
 //TODO: cleanUp when event before abort?
 //TODO: docs (e.g.) https://nolanlawson.com/2024/01/13/web-component-gotcha-constructor-vs-connectedcallback/
+
+/**
+ * Creates a function to register connected lifecycle event listeners
+ *
+ * @param {Function} listener - Event handler
+ * @param {Object} [options] - Event listener options
+ * @returns {Function} Function that registers the connected listener
+ */
 on.connected= function(listener, options){
 	options= lifeOptions(options);
 	return function registerElement(element){
@@ -37,6 +69,14 @@ on.connected= function(listener, options){
 		return element;
 	};
 };
+
+/**
+ * Creates a function to register disconnected lifecycle event listeners
+ *
+ * @param {Function} listener - Event handler
+ * @param {Object} [options] - Event listener options
+ * @returns {Function} Function that registers the disconnected listener
+ */
 on.disconnected= function(listener, options){
 	options= lifeOptions(options);
 	return function registerElement(element){
@@ -48,16 +88,35 @@ on.disconnected= function(listener, options){
 		return element;
 	};
 };
+
+/** Store for disconnect abort controllers */
 const store_abort= new WeakMap();
+
+/**
+ * Creates an AbortController that triggers when the element disconnects
+ *
+ * @param {Function} host - Host element or function taking an element
+ * @returns {AbortSignal} AbortSignal that aborts on disconnect
+ */
 on.disconnectedAsAbort= function(host){
 	if(store_abort.has(host)) return store_abort.get(host);
 
 	const a= new AbortController();
 	store_abort.set(host, a);
 	host(on.disconnected(()=> a.abort()));
-	return a;
+	return a.signal;
 };
+
+/** Store for elements with attribute observers */
 const els_attribute_store= new WeakSet();
+
+/**
+ * Creates a function to register attribute change event listeners
+ *
+ * @param {Function} listener - Event handler
+ * @param {Object} [options] - Event listener options
+ * @returns {Function} Function that registers the attribute change listener
+ */
 on.attributeChanged= function(listener, options){
 	if(typeof options !== "object")
 		options= {};
diff --git a/src/helpers.js b/src/helpers.js
index 8273af7..4ed4126 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -1,13 +1,43 @@
+/**
+ * Safe method to check if an object has a specific property
+ * @param {...any} a - Arguments to pass to Object.prototype.hasOwnProperty.call
+ * @returns {boolean} Result of hasOwnProperty check
+ */
 export const hasOwn= (...a)=> Object.prototype.hasOwnProperty.call(...a);
+
+/**
+ * Checks if a value is undefined
+ * @param {any} value - The value to check
+ * @returns {boolean} True if the value is undefined
+ */
 export function isUndef(value){ return typeof value==="undefined"; }
+
+/**
+ * Enhanced typeof that handles null and objects better
+ * @param {any} v - The value to check
+ * @returns {string} Type as a string
+ */
 export function typeOf(v){
 	const t= typeof v;
 	if(t!=="object") return t;
 	if(v===null) return "null";
 	return Object.prototype.toString.call(v);
 }
+
+export function isInstance(obj, cls){ return obj instanceof cls; }
+/** @type {typeof Object.prototype.isPrototypeOf.call} */
+export function isProtoFrom(obj, cls){ return Object.prototype.isPrototypeOf.call(cls, obj); }
+export function oCreate(proto= null, p= {}){ return Object.create(proto, p); }
+export function oAssign(...o){ return Object.assign(...o); }
+
+/**
+ * Handles AbortSignal registration and cleanup
+ * @param {AbortSignal} signal - The AbortSignal to listen to
+ * @param {Function} listener - The abort event listener
+ * @returns {Function|undefined|boolean} Cleanup function or undefined if already aborted
+ */
 export function onAbort(signal, listener){
-	if(!signal || !(signal instanceof AbortSignal))
+	if(!signal || !isInstance(signal, AbortSignal))
 		return true;
 	if(signal.aborted)
 		return;
@@ -16,6 +46,13 @@ export function onAbort(signal, listener){
 		signal.removeEventListener("abort", listener);
 	};
 }
+
+/**
+ * Processes observed attributes for custom elements
+ * @param {object} instance - The custom element instance
+ * @param {Function} observedAttribute - Function to process each attribute
+ * @returns {object} Object with processed attributes
+ */
 export function observedAttributes(instance, observedAttribute){
 	const { observedAttributes= [] }= instance.constructor;
 	return observedAttributes
@@ -24,4 +61,28 @@ export function observedAttributes(instance, observedAttribute){
 			return out;
 		}, {});
 }
+
+/**
+ * Converts kebab-case strings to camelCase
+ * @param {string} name - The kebab-case string
+ * @returns {string} The camelCase string
+ */
 function kebabToCamel(name){ return name.replace(/-./g, x=> x[1].toUpperCase()); }
+
+/**
+ * Error class for definition tracking
+ * Shows the correct stack trace for debugging (signal) creation
+ */
+export class Defined extends Error{
+	constructor(){
+		super();
+		const [ curr, ...rest ]= this.stack.split("\n");
+		const curr_file= curr.slice(curr.indexOf("@"), curr.indexOf(".js:")+4);
+		const curr_lib= curr_file.includes("src/helpers.js") ? "src/" : curr_file;
+		this.stack= rest.find(l=> !l.includes(curr_lib)) || curr;
+	}
+	get compact(){
+		const { stack }= this;
+		return stack.slice(0, stack.indexOf("@")+1)+"…"+stack.slice(stack.lastIndexOf("/"));
+	}
+}
diff --git a/src/observables-lib.js b/src/observables-lib.js
deleted file mode 100644
index 1fbae47..0000000
--- a/src/observables-lib.js
+++ /dev/null
@@ -1,292 +0,0 @@
-export const mark= "__dde_signal";
-import { hasOwn } from "./helpers.js";
-
-export function isSignal(candidate){
-	try{ return hasOwn(candidate, mark); }
-	catch(e){ return false; }
-}
-/** @type {function[]} */
-const stack_watch= [];
-/**
- * ### `WeakMap<function, Set<ddeSignal<any, any>>>`
- * The `Set` is in the form of `[ source, ...depended signals (DSs) ]`.
- * When the DS is cleaned (`S.clear`) it is removed from DSs,
- * if remains only one (`source`) it is cleared too.
- * ### `WeakMap<object, function>`
- * This is used for revesed deps, the `function` is also key for `deps`.
- * @type {WeakMap<function|object,Set<ddeSignal<any, any>>|function>}
- * */
-const deps= new WeakMap();
-export function signal(value, actions){
-	if(typeof value!=="function")
-		return create(false, value, actions);
-	if(isSignal(value)) return value;
-
-	const out= create(true);
-	const contextReWatch= function(){
-		const [ origin, ...deps_old ]= deps.get(contextReWatch);
-		deps.set(contextReWatch, new Set([ origin ]));
-
-		stack_watch.push(contextReWatch);
-		write(out, value());
-		stack_watch.pop();
-
-		if(!deps_old.length) return;
-		const deps_curr= deps.get(contextReWatch);
-		for (const dep_signal of deps_old){
-			if(deps_curr.has(dep_signal)) continue;
-			removeSignalListener(dep_signal, contextReWatch);
-		}
-	};
-	deps.set(out[mark], contextReWatch);
-	deps.set(contextReWatch, new Set([ out ]));
-	contextReWatch();
-	return out;
-}
-export { signal as S };
-signal.action= function(s, name, ...a){
-	const M= s[mark], { actions }= M;
-	if(!actions || !(name in actions))
-		throw new Error(`'${s}' has no action with name '${name}'!`);
-	actions[name].apply(M, a);
-	if(M.skip) return (delete M.skip);
-	M.listeners.forEach(l=> l(M.value));
-};
-signal.on= function on(s, listener, options= {}){
-	const { signal: as }= options;
-	if(as && as.aborted) return;
-	if(Array.isArray(s)) return s.forEach(s=> on(s, listener, options));
-	addSignalListener(s, listener);
-	if(as) as.addEventListener("abort", ()=> removeSignalListener(s, listener));
-	//TODO: cleanup when signal removed
-};
-signal.symbols= {
-	//signal: mark,
-	onclear: Symbol.for("Signal.onclear")
-};
-signal.clear= function(...signals){
-	for(const s of signals){
-		const M= s[mark];
-		if(!M) continue;
-		delete s.toJSON;
-		M.onclear.forEach(f=> f.call(M));
-		clearListDeps(s, M);
-		delete s[mark];
-	}
-	function clearListDeps(s, o){
-		o.listeners.forEach(l=> {
-			o.listeners.delete(l);
-			if(!deps.has(l)) return;
-
-			const ls= deps.get(l);
-			ls.delete(s);
-			if(ls.size>1) return;
-
-			s.clear(...ls);
-			deps.delete(l);
-		});
-	}
-};
-const key_reactive= "__dde_reactive";
-import { enviroment as env } from "./dom-common.js";
-import { el } from "./dom.js";
-import { scope } from "./dom.js";
-// TODO: third argument for handle `cache_tmp` in re-render
-signal.el= function(s, map){
-	const mark_start= el.mark({ type: "reactive" }, true);
-	const mark_end= mark_start.end;
-	const out= env.D.createDocumentFragment();
-	out.append(mark_start, mark_end);
-	const { current }= scope;
-	let cache= {};
-	const reRenderReactiveElement= v=> {
-		if(!mark_start.parentNode || !mark_end.parentNode) // === `isConnected` or wasn’t yet rendered
-			return removeSignalListener(s, reRenderReactiveElement);
-		const cache_tmp= cache; // will be reused in the useCache or removed in the while loop on the end
-		cache= {};
-		scope.push(current);
-		let els= map(v, function useCache(key, fun){
-			let value;
-			if(hasOwn(cache_tmp, key)){
-				value= cache_tmp[key];
-				delete cache_tmp[key];
-			} else
-				value= fun();
-			cache[key]= value;
-			return value;
-		});
-		scope.pop();
-		if(!Array.isArray(els))
-			els= [ els ];
-		const el_start_rm= document.createComment("");
-		els.push(el_start_rm);
-		mark_start.after(...els);
-		let el_r;
-		while(( el_r= el_start_rm.nextSibling ) && el_r !== mark_end)
-			el_r.remove();
-		el_start_rm.remove();
-		if(mark_start.isConnected)
-			requestCleanUpReactives(current.host());
-	};
-	addSignalListener(s, reRenderReactiveElement);
-	removeSignalsFromElements(s, reRenderReactiveElement, mark_start, map);
-	reRenderReactiveElement(s());
-	return out;
-};
-function requestCleanUpReactives(host){
-	if(!host || !host[key_reactive]) return;
-	(requestIdleCallback || setTimeout)(function(){
-		host[key_reactive]= host[key_reactive]
-			.filter(([ s, el ])=> el.isConnected ? true : (removeSignalListener(...s), false));
-	});
-}
-import { on } from "./events.js";
-import { observedAttributes } from "./helpers.js";
-const observedAttributeActions= {
-	_set(value){ this.value= value; },
-};
-function observedAttribute(store){
-	return function(instance, name){
-		const varS= (...args)=> !args.length
-			? read(varS)
-			: instance.setAttribute(name, ...args);
-		const out= toSignal(varS, instance.getAttribute(name), observedAttributeActions);
-		store[name]= out;
-		return out;
-	};
-}
-const key_attributes= "__dde_attributes";
-signal.observedAttributes= function(element){
-	const store= element[key_attributes]= {};
-	const attrs= observedAttributes(element, observedAttribute(store));
-	on.attributeChanged(function attributeChangeToSignal({ detail }){
-		/*! This maps attributes to signals (`S.observedAttributes`).
-			* Investigate `__dde_attributes` key of the element.*/
-		const [ name, value ]= detail;
-		const curr= this[key_attributes][name];
-		if(curr) return signal.action(curr, "_set", value);
-	})(element);
-	on.disconnected(function(){
-		/*! This removes all signals mapped to attributes (`S.observedAttributes`).
-			* Investigate `__dde_attributes` key of the element.*/
-		signal.clear(...Object.values(this[key_attributes]));
-	})(element);
-	return attrs;
-};
-
-import { typeOf } from './helpers.js';
-export const signals_config= {
-	isSignal,
-	processReactiveAttribute(element, key, attrs, set){
-		if(!isSignal(attrs)) return attrs;
-		const l= attr=> {
-			if(!element.isConnected)
-				return removeSignalListener(attrs, l);
-			set(key, attr);
-		};
-		addSignalListener(attrs, l);
-		removeSignalsFromElements(attrs, l, element, key);
-		return attrs();
-	}
-};
-function removeSignalsFromElements(s, listener, ...notes){
-	const { current }= scope;
-	if(current.prevent) return;
-	current.host(function(element){
-		if(!element[key_reactive]){
-			element[key_reactive]= [];
-			on.disconnected(()=>
-				/*!
-				 * Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
-				 * You can investigate the `__dde_reactive` key of the element.
-				 * */
-				element[key_reactive].forEach(([ [ s, listener ] ])=>
-					removeSignalListener(s, listener, s[mark] && s[mark].host && s[mark].host() === element))
-			)(element);
-		}
-		element[key_reactive].push([ [ s, listener ], ...notes ]);
-	});
-}
-
-function create(is_readonly, value, actions){
-	const varS= is_readonly
-		? ()=> read(varS)
-		: (...value)=> value.length ? write(varS, ...value) : read(varS);
-	return toSignal(varS, value, actions, is_readonly);
-}
-const protoSigal= Object.assign(Object.create(null), {
-	stopPropagation(){
-		this.skip= true;
-	}
-});
-class SignalDefined extends Error{
-	constructor(){
-		super();
-		const [ curr, ...rest ]= this.stack.split("\n");
-		const curr_file= curr.slice(curr.indexOf("@"), curr.indexOf(".js:")+4);
-		this.stack= rest.find(l=> !l.includes(curr_file));
-	}
-}
-function toSignal(s, value, actions, readonly= false){
-	const onclear= [];
-	if(typeOf(actions)!=="[object Object]")
-		actions= {};
-	const { onclear: ocs }= signal.symbols;
-	if(actions[ocs]){
-		onclear.push(actions[ocs]);
-		delete actions[ocs];
-	}
-	const { host }= scope;
-	Reflect.defineProperty(s, mark, {
-		value: {
-			value, actions, onclear, host,
-			listeners: new Set(),
-			defined: (new SignalDefined()).stack,
-			readonly
-		},
-		enumerable: false,
-		writable: false,
-		configurable: true
-	});
-	s.toJSON= ()=> s();
-	s.valueOf= ()=> s[mark] && s[mark].value;
-	Object.setPrototypeOf(s[mark], protoSigal);
-	return s;
-}
-function currentContext(){
-	return stack_watch[stack_watch.length - 1];
-}
-function read(s){
-	if(!s[mark]) return;
-	const { value, listeners }= s[mark];
-	const context= currentContext();
-	if(context) listeners.add(context);
-	if(deps.has(context)) deps.get(context).add(s);
-	return value;
-}
-function write(s, value, force){
-	if(!s[mark]) return;
-	const M= s[mark];
-	if(!force && M.value===value) return;
-	M.value= value;
-	M.listeners.forEach(l=> l(value));
-	return value;
-}
-
-function addSignalListener(s, listener){
-	if(!s[mark]) return;
-	return s[mark].listeners.add(listener);
-}
-function removeSignalListener(s, listener, clear_when_empty){
-	const M= s[mark];
-	if(!M) return;
-	const out= M.listeners.delete(listener);
-	if(clear_when_empty && !M.listeners.size){
-		signal.clear(s);
-		if(!deps.has(M)) return out;
-		const c= deps.get(M);
-		if(!deps.has(c)) return out;
-		deps.get(c).forEach(sig=> removeSignalListener(sig, c, true));
-	}
-	return out;
-}
diff --git a/src/signals-common.js b/src/signals-common.js
deleted file mode 100644
index abe281a..0000000
--- a/src/signals-common.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export const signals_global= {
-	isSignal(attributes){ return false; },
-	processReactiveAttribute(obj, key, attr, set){ return attr; },
-};
-export function registerReactivity(def, global= true){
-	if(global) return Object.assign(signals_global, def);
-	Object.setPrototypeOf(def, signals_global);
-	return def;
-}
-/** @param {unknown} _this @returns {typeof signals_global} */
-export function signals(_this){
-	return signals_global.isPrototypeOf(_this) && _this!==signals_global ? _this : signals_global;
-}
diff --git a/src/signals-lib.js b/src/signals-lib.js
deleted file mode 100644
index caddcfe..0000000
--- a/src/signals-lib.js
+++ /dev/null
@@ -1,293 +0,0 @@
-export const mark= "__dde_signal";
-import { hasOwn } from "./helpers.js";
-
-export function isSignal(candidate){
-	try{ return hasOwn(candidate, mark); }
-	catch(e){ return false; }
-}
-/** @type {function[]} */
-const stack_watch= [];
-/**
- * ### `WeakMap<function, Set<ddeSignal<any, any>>>`
- * The `Set` is in the form of `[ source, ...depended signals (DSs) ]`.
- * When the DS is cleaned (`S.clear`) it is removed from DSs,
- * if remains only one (`source`) it is cleared too.
- * ### `WeakMap<object, function>`
- * This is used for revesed deps, the `function` is also key for `deps`.
- * @type {WeakMap<function|object,Set<ddeSignal<any, any>>|function>}
- * */
-const deps= new WeakMap();
-export function signal(value, actions){
-	if(typeof value!=="function")
-		return create(false, value, actions);
-	if(isSignal(value)) return value;
-
-	const out= create(true);
-	const contextReWatch= function(){
-		const [ origin, ...deps_old ]= deps.get(contextReWatch);
-		deps.set(contextReWatch, new Set([ origin ]));
-
-		stack_watch.push(contextReWatch);
-		write(out, value());
-		stack_watch.pop();
-
-		if(!deps_old.length) return;
-		const deps_curr= deps.get(contextReWatch);
-		for (const dep_signal of deps_old){
-			if(deps_curr.has(dep_signal)) continue;
-			removeSignalListener(dep_signal, contextReWatch);
-		}
-	};
-	deps.set(out[mark], contextReWatch);
-	deps.set(contextReWatch, new Set([ out ]));
-	contextReWatch();
-	return out;
-}
-export { signal as S };
-signal.action= function(s, name, ...a){
-	const M= s[mark], { actions }= M;
-	if(!actions || !(name in actions))
-		throw new Error(`'${s}' has no action with name '${name}'!`);
-	actions[name].apply(M, a);
-	if(M.skip) return (delete M.skip);
-	M.listeners.forEach(l=> l(M.value));
-};
-signal.on= function on(s, listener, options= {}){
-	const { signal: as }= options;
-	if(as && as.aborted) return;
-	if(Array.isArray(s)) return s.forEach(s=> on(s, listener, options));
-	addSignalListener(s, listener);
-	if(as) as.addEventListener("abort", ()=> removeSignalListener(s, listener));
-	//TODO: cleanup when signal removed
-};
-signal.symbols= {
-	//signal: mark,
-	onclear: Symbol.for("Signal.onclear")
-};
-signal.clear= function(...signals){
-	for(const s of signals){
-		const M= s[mark];
-		if(!M) continue;
-		delete s.toJSON;
-		M.onclear.forEach(f=> f.call(M));
-		clearListDeps(s, M);
-		delete s[mark];
-	}
-	function clearListDeps(s, o){
-		o.listeners.forEach(l=> {
-			o.listeners.delete(l);
-			if(!deps.has(l)) return;
-
-			const ls= deps.get(l);
-			ls.delete(s);
-			if(ls.size>1) return;
-
-			s.clear(...ls);
-			deps.delete(l);
-		});
-	}
-};
-const key_reactive= "__dde_reactive";
-import { enviroment as env } from "./dom-common.js";
-import { el } from "./dom.js";
-import { scope } from "./dom.js";
-// TODO: third argument for handle `cache_tmp` in re-render
-// TODO: clear cache on disconnect
-// TODO: extract cache to separate (exportable) function
-signal.el= function(s, map){
-	const mark_start= el.mark({ type: "reactive" }, true);
-	const mark_end= mark_start.end;
-	const out= env.D.createDocumentFragment();
-	out.append(mark_start, mark_end);
-	const { current }= scope;
-	let cache= {};
-	const reRenderReactiveElement= v=> {
-		if(!mark_start.parentNode || !mark_end.parentNode) // === `isConnected` or wasn’t yet rendered
-			return removeSignalListener(s, reRenderReactiveElement);
-		const cache_tmp= cache; // will be reused in the useCache or removed in the while loop on the end
-		cache= {};
-		scope.push(current);
-		let els= map(v, function useCache(key, fun){
-			let value;
-			if(hasOwn(cache_tmp, key)){
-				value= cache_tmp[key];
-				delete cache_tmp[key];
-			} else
-				value= fun();
-			cache[key]= value;
-			return value;
-		});
-		scope.pop();
-		if(!Array.isArray(els))
-			els= [ els ];
-		const el_start_rm= document.createComment("");
-		els.push(el_start_rm);
-		mark_start.after(...els);
-		let el_r;
-		while(( el_r= el_start_rm.nextSibling ) && el_r !== mark_end)
-			el_r.remove();
-		el_start_rm.remove();
-		if(mark_start.isConnected)
-			requestCleanUpReactives(current.host());
-	};
-	addSignalListener(s, reRenderReactiveElement);
-	removeSignalsFromElements(s, reRenderReactiveElement, mark_start, map);
-	reRenderReactiveElement(s());
-	return out;
-};
-function requestCleanUpReactives(host){
-	if(!host || !host[key_reactive]) return;
-	(requestIdleCallback || setTimeout)(function(){
-		host[key_reactive]= host[key_reactive]
-			.filter(([ s, el ])=> el.isConnected ? true : (removeSignalListener(...s), false));
-	});
-}
-import { on } from "./events.js";
-import { observedAttributes } from "./helpers.js";
-const observedAttributeActions= {
-	_set(value){ this.value= value; },
-};
-function observedAttribute(store){
-	return function(instance, name){
-		const varS= (...args)=> !args.length
-			? read(varS)
-			: instance.setAttribute(name, ...args);
-		const out= toSignal(varS, instance.getAttribute(name), observedAttributeActions);
-		store[name]= out;
-		return out;
-	};
-}
-const key_attributes= "__dde_attributes";
-signal.observedAttributes= function(element){
-	const store= element[key_attributes]= {};
-	const attrs= observedAttributes(element, observedAttribute(store));
-	on.attributeChanged(function attributeChangeToSignal({ detail }){
-		/*! This maps attributes to signals (`S.observedAttributes`).
-			* Investigate `__dde_attributes` key of the element.*/
-		const [ name, value ]= detail;
-		const curr= this[key_attributes][name];
-		if(curr) return signal.action(curr, "_set", value);
-	})(element);
-	on.disconnected(function(){
-		/*! This removes all signals mapped to attributes (`S.observedAttributes`).
-			* Investigate `__dde_attributes` key of the element.*/
-		signal.clear(...Object.values(this[key_attributes]));
-	})(element);
-	return attrs;
-};
-
-import { typeOf } from './helpers.js';
-export const signals_config= {
-	isSignal,
-	processReactiveAttribute(element, key, attrs, set){
-		if(!isSignal(attrs)) return attrs;
-		const l= attr=> {
-			if(!element.isConnected)
-				return removeSignalListener(attrs, l);
-			set(key, attr);
-		};
-		addSignalListener(attrs, l);
-		removeSignalsFromElements(attrs, l, element, key);
-		return attrs();
-	}
-};
-function removeSignalsFromElements(s, listener, ...notes){
-	const { current }= scope;
-	current.host(function(element){
-		if(element[key_reactive])
-			return element[key_reactive].push([ [ s, listener ], ...notes ]);
-		element[key_reactive]= [];
-		if(current.prevent) return; // typically document.body, doenst need auto-remove as it should happen on page leave
-		on.disconnected(()=>
-			/*!
-				* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
-				* You can investigate the `__dde_reactive` key of the element.
-				* */
-			element[key_reactive].forEach(([ [ s, listener ] ])=>
-				removeSignalListener(s, listener, s[mark] && s[mark].host && s[mark].host() === element))
-		)(element);
-	});
-}
-
-function create(is_readonly, value, actions){
-	const varS= is_readonly
-		? ()=> read(varS)
-		: (...value)=> value.length ? write(varS, ...value) : read(varS);
-	return toSignal(varS, value, actions, is_readonly);
-}
-const protoSigal= Object.assign(Object.create(null), {
-	stopPropagation(){
-		this.skip= true;
-	}
-});
-class SignalDefined extends Error{
-	constructor(){
-		super();
-		const [ curr, ...rest ]= this.stack.split("\n");
-		const curr_file= curr.slice(curr.indexOf("@"), curr.indexOf(".js:")+4);
-		this.stack= rest.find(l=> !l.includes(curr_file));
-	}
-}
-function toSignal(s, value, actions, readonly= false){
-	const onclear= [];
-	if(typeOf(actions)!=="[object Object]")
-		actions= {};
-	const { onclear: ocs }= signal.symbols;
-	if(actions[ocs]){
-		onclear.push(actions[ocs]);
-		delete actions[ocs];
-	}
-	const { host }= scope;
-	Reflect.defineProperty(s, mark, {
-		value: {
-			value, actions, onclear, host,
-			listeners: new Set(),
-			defined: (new SignalDefined()).stack,
-			readonly
-		},
-		enumerable: false,
-		writable: false,
-		configurable: true
-	});
-	s.toJSON= ()=> s();
-	s.valueOf= ()=> s[mark] && s[mark].value;
-	Object.setPrototypeOf(s[mark], protoSigal);
-	return s;
-}
-function currentContext(){
-	return stack_watch[stack_watch.length - 1];
-}
-function read(s){
-	if(!s[mark]) return;
-	const { value, listeners }= s[mark];
-	const context= currentContext();
-	if(context) listeners.add(context);
-	if(deps.has(context)) deps.get(context).add(s);
-	return value;
-}
-function write(s, value, force){
-	if(!s[mark]) return;
-	const M= s[mark];
-	if(!force && M.value===value) return;
-	M.value= value;
-	M.listeners.forEach(l=> l(value));
-	return value;
-}
-
-function addSignalListener(s, listener){
-	if(!s[mark]) return;
-	return s[mark].listeners.add(listener);
-}
-function removeSignalListener(s, listener, clear_when_empty){
-	const M= s[mark];
-	if(!M) return;
-	const out= M.listeners.delete(listener);
-	if(clear_when_empty && !M.listeners.size){
-		signal.clear(s);
-		if(!deps.has(M)) return out;
-		const c= deps.get(M);
-		if(!deps.has(c)) return out;
-		deps.get(c).forEach(sig=> removeSignalListener(sig, c, true));
-	}
-	return out;
-}
diff --git a/src/signals-lib/common.js b/src/signals-lib/common.js
new file mode 100644
index 0000000..9266500
--- /dev/null
+++ b/src/signals-lib/common.js
@@ -0,0 +1,44 @@
+import { isProtoFrom, oAssign } from "../helpers.js";
+/**
+ * Global signals object with default implementation
+ * @type {Object}
+ */
+export const signals_global= {
+	/**
+	 * Checks if a value is a signal
+	 * @param {any} attributes - Value to check
+	 * @returns {boolean} Whether the value is a signal
+	 */
+	isSignal(attributes){ return false; },
+
+	/**
+	 * Processes an attribute that might be reactive
+	 * @param {Element} obj - Element that owns the attribute
+	 * @param {string} key - Attribute name
+	 * @param {any} attr - Attribute value
+	 * @param {Function} set - Function to set the attribute
+	 * @returns {any} Processed attribute value
+	 */
+	processReactiveAttribute(obj, key, attr, set){ return attr; },
+};
+
+/**
+ * Registers a reactivity implementation
+ * @param {Object} def - Reactivity implementation
+ * @param {boolean} [global=true] - Whether to set globally or create a new implementation
+ * @returns {Object} The registered reactivity implementation
+ */
+export function registerReactivity(def, global= true){
+	if(global) return oAssign(signals_global, def);
+	Object.setPrototypeOf(def, signals_global);
+	return def;
+}
+
+/**
+ * Gets the signals implementation from a context
+ * @param {unknown} _this - Context to check for signals implementation
+ * @returns {typeof signals_global} Signals implementation
+ */
+export function signals(_this){
+	return isProtoFrom(_this, signals_global) && _this!==signals_global ? _this : signals_global;
+}
diff --git a/src/signals-lib/helpers.js b/src/signals-lib/helpers.js
new file mode 100644
index 0000000..2ca8e51
--- /dev/null
+++ b/src/signals-lib/helpers.js
@@ -0,0 +1,39 @@
+/**
+ * Symbol used to identify signals in objects
+ * @type {string}
+ */
+export const mark= "__dde_signal";
+
+/**
+ * Batches signal updates to improve performance
+ * @type {Function}
+ */
+export const queueSignalWrite= (()=> {
+	let pendingSignals= new Set();
+	let scheduled= false;
+
+	/**
+	 * Processes all pending signal updates
+	 * @private
+	 */
+	function flushSignals() {
+		scheduled = false;
+		const todo= pendingSignals;
+		pendingSignals= new Set();
+		for(const signal of todo){
+			const M = signal[mark];
+			if(M) M.listeners.forEach(l => l(M.value));
+		}
+	}
+
+	/**
+	 * Queues a signal for update
+	 * @param {Object} s - Signal to queue
+	 */
+	return function(s){
+		pendingSignals.add(s);
+		if(scheduled) return;
+		scheduled = true;
+		queueMicrotask(flushSignals);
+	};
+})();
diff --git a/src/signals-lib.d.ts b/src/signals-lib/signals-lib.d.ts
similarity index 84%
rename from src/signals-lib.d.ts
rename to src/signals-lib/signals-lib.d.ts
index 9e02e46..182989e 100644
--- a/src/signals-lib.d.ts
+++ b/src/signals-lib/signals-lib.d.ts
@@ -1,4 +1,4 @@
-import type { Action, Actions, signal as s, Signal, SymbolOnclear } from "../signals.d.ts";
+import type { Action, Actions, signal as s, Signal, SymbolOnclear } from "../../signals.js";
 export { Action, Actions, Signal, SymbolOnclear };
 export const S: s;
 export const signal: s;
diff --git a/src/signals-lib/signals-lib.js b/src/signals-lib/signals-lib.js
new file mode 100644
index 0000000..e2ae1de
--- /dev/null
+++ b/src/signals-lib/signals-lib.js
@@ -0,0 +1,487 @@
+import { queueSignalWrite, mark } from "./helpers.js";
+export { mark };
+import { hasOwn, Defined, oCreate, oAssign } from "../helpers.js";
+
+const Signal = oCreate(null, {
+	get: { value(){ return read(this); } },
+	set: { value(...v){ return write(this, ...v); } },
+	toJSON: { value(){ return read(this); } },
+	valueOf: { value(){ return this[mark] && this[mark].value; } }
+});
+const SignalReadOnly= oCreate(Signal, {
+	set: { value(){ return; } },
+});
+/**
+ * Checks if a value is a signal
+ *
+ * @param {any} candidate - Value to check
+ * @returns {boolean} True if the value is a signal
+ */
+export function isSignal(candidate){
+	return candidate && candidate[mark];
+}
+
+/**
+ * Stack for tracking nested signal computations
+ * @type {function[]}
+ */
+const stack_watch= [];
+
+/**
+ * Dependencies tracking map for signals
+ *
+ * ### `WeakMap<function, Set<ddeSignal<any, any>>>`
+ * The `Set` is in the form of `[ source, ...depended signals (DSs) ]`.
+ * When the DS is cleaned (`S.clear`) it is removed from DSs,
+ * if remains only one (`source`) it is cleared too.
+ * ### `WeakMap<object, function>`
+ * This is used for revesed deps, the `function` is also key for `deps`.
+ * @type {WeakMap<function|object,Set<ddeSignal<any, any>>|function>}
+ */
+const deps= new WeakMap();
+/**
+ * Creates a new signal or converts a function into a derived signal
+ *
+ * @param {any|function} value - Initial value or function that computes the value
+ * @param {Object} [actions] - Custom actions for the signal
+ * @returns {Object} Signal object with get() and set() methods
+ */
+export function signal(value, actions){
+	if(typeof value!=="function")
+		return create(false, value, actions);
+	if(isSignal(value)) return value;
+
+	const out= create(true);
+
+	/**
+	 * Updates the derived signal when dependencies change
+	 * @private
+	 */
+	function contextReWatch(){
+		const [ origin, ...deps_old ]= deps.get(contextReWatch);
+		deps.set(contextReWatch, new Set([ origin ]));
+
+		stack_watch.push(contextReWatch);
+		write(out, value());
+		stack_watch.pop();
+
+		if(!deps_old.length) return;
+		const deps_curr= deps.get(contextReWatch);
+		for (const dep_signal of deps_old){
+			if(deps_curr.has(dep_signal)) continue;
+			removeSignalListener(dep_signal, contextReWatch);
+		}
+	}
+	deps.set(out[mark], contextReWatch);
+	deps.set(contextReWatch, new Set([ out ]));
+	contextReWatch();
+	return out;
+}
+
+/** Alias for signal */
+export { signal as S };
+/**
+ * Calls a custom action on a signal
+ *
+ * @param {Object} s - Signal object to call action on
+ * @param {string} name - Action name
+ * @param {...any} a - Arguments to pass to the action
+ */
+signal.action= function(s, name, ...a){
+	const M= s[mark];
+	if(!M) return;
+	const { actions }= M;
+	if(!actions || !hasOwn(actions, name))
+		throw new Error(`Action "${name}" not defined. See ${mark}.actions.`);
+	actions[name].apply(M, a);
+	if(M.skip) return (delete M.skip);
+	queueSignalWrite(s);
+};
+
+/**
+ * Subscribes a listener to signal changes
+ *
+ * @param {Object|Object[]} s - Signal object or array of signal objects to subscribe to
+ * @param {function} listener - Callback function receiving signal value
+ * @param {Object} [options={}] - Subscription options
+ * @param {AbortSignal} [options.signal] - Signal to abort subscription
+ */
+signal.on= function on(s, listener, options= {}){
+	const { signal: as }= options;
+	if(as && as.aborted) return;
+	if(Array.isArray(s)) return s.forEach(s=> on(s, listener, options));
+	addSignalListener(s, listener);
+	if(as) as.addEventListener("abort", ()=> removeSignalListener(s, listener));
+};
+
+/**
+ * Symbol constants for signal internals
+ */
+signal.symbols= {
+	//signal: mark,
+	onclear: Symbol.for("Signal.onclear")
+};
+
+/**
+ * Cleans up signals and their dependencies
+ *
+ * @param {...Object} signals - Signal objects to clean up
+ */
+signal.clear= function(...signals){
+	for(const s of signals){
+		const M= s[mark];
+		if(!M) continue;
+		delete s.toJSON;
+		M.onclear.forEach(f=> f.call(M));
+		clearListDeps(s, M);
+		delete s[mark];
+	}
+
+	/**
+	 * Cleans up signal dependencies
+	 * @param {function} s - Signal being cleared
+	 * @param {Object} o - Signal metadata
+	 * @private
+	 */
+	function clearListDeps(s, o){
+		o.listeners.forEach(l=> {
+			o.listeners.delete(l);
+			if(!deps.has(l)) return;
+
+			const ls= deps.get(l);
+			ls.delete(s);
+			if(ls.size>1) return;
+
+			s.clear(...ls);
+			deps.delete(l);
+		});
+	}
+};
+/** Property key for tracking reactive elements */
+const key_reactive= "__dde_reactive";
+import { enviroment as env } from "../dom-common.js";
+import { el } from "../dom.js";
+import { scope } from "../dom.js";
+import { on } from "../events.js";
+
+export function cache(store= oCreate()){
+	return (key, fun)=> hasOwn(store, key) ? store[key] : (store[key]= fun());
+}
+/**
+ * Creates a reactive DOM element that re-renders when signal changes
+ *
+ * @TODO Third argument for handle `cache_tmp` in re-render
+ * @param {Object} s - Signal object to watch
+ * @param {Function} map - Function mapping signal value to DOM elements
+ * @returns {DocumentFragment} Fragment containing reactive elements
+ */
+signal.el= function(s, map){
+	const mark_start= el.mark({ type: "reactive", source: new Defined().compact }, true);
+	const mark_end= mark_start.end;
+	const out= env.D.createDocumentFragment();
+	out.append(mark_start, mark_end);
+	const { current }= scope;
+	let cache_shared= oCreate();
+	const reRenderReactiveElement= v=> {
+		if(!mark_start.parentNode || !mark_end.parentNode) // === `isConnected` or wasn’t yet rendered
+			return removeSignalListener(s, reRenderReactiveElement);
+		const memo= cache(cache_shared);
+		cache_shared= oCreate();
+		scope.push(current);
+		let els= map(v, function useCache(key, fun){
+			return (cache_shared[key]= memo(key, fun));
+		});
+		scope.pop();
+		if(!Array.isArray(els))
+			els= [ els ];
+		const el_start_rm= document.createComment("");
+		els.push(el_start_rm);
+		mark_start.after(...els);
+		let el_r;
+		while(( el_r= el_start_rm.nextSibling ) && el_r !== mark_end)
+			el_r.remove();
+		el_start_rm.remove();
+		if(mark_start.isConnected)
+			requestCleanUpReactives(current.host());
+	};
+	addSignalListener(s, reRenderReactiveElement);
+	removeSignalsFromElements(s, reRenderReactiveElement, mark_start, map);
+	reRenderReactiveElement(s.get());
+	current.host(on.disconnected(()=>
+		/*! Clears cached elements for reactive element `S.el` */
+		cache_shared= {}
+	));
+	return out;
+};
+/**
+ * Cleans up reactive elements that are no longer connected
+ *
+ * @param {Element} host - Host element containing reactive elements
+ * @private
+ */
+function requestCleanUpReactives(host){
+	if(!host || !host[key_reactive]) return;
+	(requestIdleCallback || setTimeout)(function(){
+		host[key_reactive]= host[key_reactive]
+			.filter(([ s, el ])=> el.isConnected ? true : (removeSignalListener(...s), false));
+	});
+}
+import { observedAttributes } from "../helpers.js";
+
+/**
+ * Actions for observed attribute signals
+ * @private
+ */
+const observedAttributeActions= {
+	_set(value){ this.value= value; },
+};
+
+/**
+ * Creates a function that returns signals for element attributes
+ *
+ * @param {Object} store - Storage object for attribute signals
+ * @returns {Function} Function creating attribute signals
+ * @private
+ */
+function observedAttribute(store){
+	return function(instance, name){
+		const varS= oCreate(Signal, {
+			set: { value(...v){ return instance.setAttribute(name, ...v); } }
+		});
+		const out= toSignal(varS, instance.getAttribute(name), observedAttributeActions);
+		store[name]= out;
+		return out;
+	};
+}
+/** Property key for storing attribute signals */
+const key_attributes= "__dde_attributes";
+
+/**
+ * Creates signals for observed attributes in custom elements
+ *
+ * @param {Element} element - Custom element instance
+ * @returns {Object} Object with attribute signals
+ */
+signal.observedAttributes= function(element){
+	const store= element[key_attributes]= {};
+	const attrs= observedAttributes(element, observedAttribute(store));
+	on.attributeChanged(function attributeChangeToSignal({ detail }){
+		/*! This maps attributes to signals (`S.observedAttributes`).
+			Investigate `__dde_attributes` key of the element. */
+		const [ name, value ]= detail;
+		const curr= this[key_attributes][name];
+		if(curr) return signal.action(curr, "_set", value);
+	})(element);
+	on.disconnected(function(){
+		/*! This removes all signals mapped to attributes (`S.observedAttributes`).
+			Investigate `__dde_attributes` key of the element. */
+		signal.clear(...Object.values(this[key_attributes]));
+	})(element);
+	return attrs;
+};
+
+import { typeOf } from '../helpers.js';
+
+/**
+ * Signal configuration for the library
+ * Implements processReactiveAttribute to handle signal-based attributes
+ */
+export const signals_config= {
+	isSignal,
+
+	/**
+	 * Processes attributes that might be signals
+	 *
+	 * @param {Element} element - Element with the attribute
+	 * @param {string} key - Attribute name
+	 * @param {any} attrs - Attribute value (possibly a signal)
+	 * @param {Function} set - Function to set attribute value
+	 * @returns {any} Processed attribute value
+	 */
+	processReactiveAttribute(element, key, attrs, set){
+		if(!isSignal(attrs)) return attrs;
+		const l= attr=> {
+			if(!element.isConnected)
+				return removeSignalListener(attrs, l);
+			set(key, attr);
+		};
+		addSignalListener(attrs, l);
+		removeSignalsFromElements(attrs, l, element, key);
+		return attrs.get();
+	}
+};
+/**
+ * Registers signal listener for cleanup when element is removed
+ *
+ * @param {Object} s - Signal object to track
+ * @param {Function} listener - Signal listener
+ * @param {...any} notes - Additional context information
+ * @private
+ */
+function removeSignalsFromElements(s, listener, ...notes){
+	const { current }= scope;
+	current.host(function(element){
+		if(element[key_reactive])
+			return element[key_reactive].push([ [ s, listener ], ...notes ]);
+		element[key_reactive]= [];
+		if(current.prevent) return; // typically document.body, doenst need auto-remove as it should happen on page leave
+		on.disconnected(()=>
+			/*! Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
+				You can investigate the `__dde_reactive` key of the element. */
+			element[key_reactive].forEach(([ [ s, listener ] ])=>
+				removeSignalListener(s, listener, s[mark] && s[mark].host && s[mark].host() === element))
+		)(element);
+	});
+}
+
+/**
+ * Registry for cleaning up signals when they are garbage collected
+ * @type {FinalizationRegistry}
+ */
+const cleanUpRegistry = new FinalizationRegistry(function(s){
+	signal.clear({ [mark]: s });
+});
+/**
+ * Creates a new signal object
+ *
+ * @param {boolean} is_readonly - Whether the signal is readonly
+ * @param {any} value - Initial signal value
+ * @param {Object} actions - Custom actions for the signal
+ * @returns {Object} Signal object with get() and set() methods
+ * @private
+ */
+function create(is_readonly, value, actions){
+	const varS = oCreate(is_readonly ? SignalReadOnly : Signal);
+	const SI= toSignal(varS, value, actions, is_readonly);
+	cleanUpRegistry.register(SI, SI[mark]);
+	return SI;
+}
+
+/**
+ * Prototype for signal internal objects
+ * @private
+ */
+const protoSigal= oAssign(oCreate(), {
+	/**
+	 * Prevents signal propagation
+	 */
+	stopPropagation(){
+		this.skip= true;
+	}
+});
+/**
+ * Transforms an object into a signal
+ *
+ * @param {Object} s - Object to transform
+ * @param {any} value - Initial value
+ * @param {Object} actions - Custom actions
+ * @param {boolean} [readonly=false] - Whether the signal is readonly
+ * @returns {Object} Signal object with get() and set() methods
+ * @private
+ */
+function toSignal(s, value, actions, readonly= false){
+	const onclear= [];
+	if(typeOf(actions)!=="[object Object]")
+		actions= {};
+	const { onclear: ocs }= signal.symbols;
+	if(actions[ocs]){
+		onclear.push(actions[ocs]);
+		delete actions[ocs];
+	}
+	const { host }= scope;
+	Reflect.defineProperty(s, mark, {
+		value: oAssign(oCreate(protoSigal), {
+			value, actions, onclear, host,
+			listeners: new Set(),
+			defined: new Defined().stack,
+			readonly
+		}),
+		enumerable: false,
+		writable: false,
+		configurable: true
+	});
+	return s;
+}
+/**
+ * Gets the current computation context
+ * @returns {function|undefined} Current context function
+ * @private
+ */
+function currentContext(){
+	return stack_watch[stack_watch.length - 1];
+}
+
+/**
+ * Reads a signal's value and tracks dependencies
+ *
+ * @param {Object} s - Signal object to read
+ * @returns {any} Signal value
+ * @private
+ */
+function read(s){
+	if(!s[mark]) return;
+	const { value, listeners }= s[mark];
+	const context= currentContext();
+	if(context) listeners.add(context);
+	if(deps.has(context)) deps.get(context).add(s);
+	return value;
+}
+
+/**
+ * Writes a new value to a signal
+ *
+ * @param {Object} s - Signal object to update
+ * @param {any} value - New value
+ * @param {boolean} [force=false] - Force update even if value is unchanged
+ * @returns {any} The new value
+ * @private
+ */
+function write(s, value, force){
+	const M= s[mark];
+	if(!M || (!force && M.value===value)) return;
+
+	M.value= value;
+	queueSignalWrite(s);
+	return value;
+}
+
+/**
+ * Adds a listener to a signal
+ *
+ * @param {Object} s - Signal object to listen to
+ * @param {Function} listener - Callback function
+ * @returns {Set} Listener set
+ * @private
+ */
+function addSignalListener(s, listener){
+	if(!s[mark]) return;
+	return s[mark].listeners.add(listener);
+}
+
+/**
+ * Removes a listener from a signal
+ *
+ * @param {Object} s - Signal object to modify
+ * @param {Function} listener - Listener to remove
+ * @param {boolean} [clear_when_empty] - Whether to clear the signal when no listeners remain
+ * @returns {boolean} Whether the listener was found and removed
+ * @private
+ */
+function removeSignalListener(s, listener, clear_when_empty){
+	const M= s[mark];
+	if(!M) return;
+
+	const { listeners: L }= M;
+	const out= L.delete(listener);
+	if(!out || !clear_when_empty || L.size) return out;
+
+	signal.clear(s);
+	const depList= deps.get(M);
+	if(!depList) return out;
+
+	const depSource= deps.get(depList);
+	if(!depSource) return out;
+
+	for(const sig of depSource) removeSignalListener(sig, depList, true);
+	return out;
+}