diff --git a/Cargo.lock b/Cargo.lock
index f59bd8cfd..a5b0aab05 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -203,12 +203,6 @@ version = "0.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "33954243bd79057c2de7338850b85983a44588021f8a5fee574a8888c6de4344"
 
-[[package]]
-name = "anymap"
-version = "1.0.0-beta.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8f1f8f5a6f3d50d89e3797d7593a50f96bb2aaa20ca0cc7be1fb673232c91d72"
-
 [[package]]
 name = "anymap2"
 version = "0.13.0"
@@ -1309,12 +1303,6 @@ dependencies = [
  "toml 0.8.10",
 ]
 
-[[package]]
-name = "cassowary"
-version = "0.3.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "df8670b8c7b9dae1793364eafadf7239c40d669904660c5960d74cfd80b46a53"
-
 [[package]]
 name = "cast"
 version = "0.3.0"
@@ -1890,47 +1878,6 @@ version = "0.8.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "248e3bacc7dc6baa3b21e405ee045c3047101a49145e7e9eca583ab4c2ca5345"
 
-[[package]]
-name = "crossterm"
-version = "0.26.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a84cda67535339806297f1b331d6dd6320470d2a0fe65381e79ee9e156dd3d13"
-dependencies = [
- "bitflags 1.3.2",
- "crossterm_winapi",
- "libc",
- "mio",
- "parking_lot",
- "signal-hook",
- "signal-hook-mio",
- "winapi",
-]
-
-[[package]]
-name = "crossterm"
-version = "0.27.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f476fe445d41c9e991fd07515a6f463074b782242ccf4a5b7b1d1012e70824df"
-dependencies = [
- "bitflags 2.4.2",
- "crossterm_winapi",
- "libc",
- "mio",
- "parking_lot",
- "signal-hook",
- "signal-hook-mio",
- "winapi",
-]
-
-[[package]]
-name = "crossterm_winapi"
-version = "0.9.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "acdd7c62a3665c7f6830a51635d9ac9b23ed385797f70a83bb8bafe9c572ab2b"
-dependencies = [
- "winapi",
-]
-
 [[package]]
 name = "crunchy"
 version = "0.2.2"
@@ -2201,7 +2148,7 @@ version = "0.5.0-alpha.0"
 dependencies = [
  "criterion 0.3.6",
  "dioxus-config-macro",
- "dioxus-core",
+ "dioxus-core 0.5.0-alpha.0",
  "dioxus-core-macro",
  "dioxus-desktop",
  "dioxus-fullstack",
@@ -2213,7 +2160,6 @@ dependencies = [
  "dioxus-router",
  "dioxus-signals",
  "dioxus-ssr",
- "dioxus-tui",
  "dioxus-web",
  "env_logger",
  "futures-util",
@@ -2268,7 +2214,7 @@ dependencies = [
  "dioxus-autofmt",
  "dioxus-check",
  "dioxus-cli-config",
- "dioxus-core",
+ "dioxus-core 0.5.0-alpha.0",
  "dioxus-hot-reload",
  "dioxus-html",
  "dioxus-rsx",
@@ -2357,6 +2303,20 @@ dependencies = [
  "tracing-subscriber",
 ]
 
+[[package]]
+name = "dioxus-core"
+version = "0.5.0-alpha.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f39bef0484998f724622964f04468ddfde7fd550f5f0f1aef9394306e9caba44"
+dependencies = [
+ "futures-channel",
+ "futures-util",
+ "longest-increasing-subsequence",
+ "rustc-hash",
+ "slab",
+ "tracing",
+]
+
 [[package]]
 name = "dioxus-core-macro"
 version = "0.5.0-alpha.0"
@@ -2387,7 +2347,7 @@ dependencies = [
  "core-foundation",
  "dioxus",
  "dioxus-cli-config",
- "dioxus-core",
+ "dioxus-core 0.5.0-alpha.0",
  "dioxus-hooks",
  "dioxus-hot-reload",
  "dioxus-html",
@@ -2449,7 +2409,7 @@ dependencies = [
 name = "dioxus-fullstack"
 version = "0.5.0-alpha.0"
 dependencies = [
- "anymap 0.12.1",
+ "anymap",
  "async-trait",
  "axum",
  "base64",
@@ -2488,7 +2448,7 @@ name = "dioxus-hooks"
 version = "0.5.0-alpha.0"
 dependencies = [
  "dioxus",
- "dioxus-core",
+ "dioxus-core 0.5.0-alpha.0",
  "dioxus-debug-cell",
  "dioxus-signals",
  "futures-channel",
@@ -2506,7 +2466,7 @@ name = "dioxus-hot-reload"
 version = "0.5.0-alpha.0"
 dependencies = [
  "chrono",
- "dioxus-core",
+ "dioxus-core 0.5.0-alpha.0",
  "dioxus-html",
  "dioxus-rsx",
  "execute",
@@ -2523,7 +2483,7 @@ name = "dioxus-html"
 version = "0.5.0-alpha.0"
 dependencies = [
  "async-trait",
- "dioxus-core",
+ "dioxus-core 0.5.0-alpha.0",
  "dioxus-html-internal-macro",
  "dioxus-rsx",
  "enumset",
@@ -2556,7 +2516,7 @@ dependencies = [
 name = "dioxus-interpreter-js"
 version = "0.5.0-alpha.0"
 dependencies = [
- "dioxus-core",
+ "dioxus-core 0.5.0-alpha.0",
  "dioxus-html",
  "js-sys",
  "md5",
@@ -2572,7 +2532,7 @@ name = "dioxus-lib"
 version = "0.5.0-alpha.0"
 dependencies = [
  "dioxus-config-macro",
- "dioxus-core",
+ "dioxus-core 0.5.0-alpha.0",
  "dioxus-core-macro",
  "dioxus-hooks",
  "dioxus-html",
@@ -2587,7 +2547,7 @@ dependencies = [
  "axum",
  "dioxus",
  "dioxus-cli-config",
- "dioxus-core",
+ "dioxus-core 0.5.0-alpha.0",
  "dioxus-hot-reload",
  "dioxus-html",
  "dioxus-interpreter-js",
@@ -2614,40 +2574,6 @@ dependencies = [
  "dioxus-desktop",
 ]
 
-[[package]]
-name = "dioxus-native-core"
-version = "0.5.0-alpha.0"
-dependencies = [
- "anymap 1.0.0-beta.2",
- "dashmap",
- "dioxus",
- "dioxus-core",
- "dioxus-native-core",
- "dioxus-native-core-macro",
- "keyboard-types",
- "lightningcss",
- "parking_lot",
- "rand 0.8.5",
- "rustc-hash",
- "shipyard",
- "smallvec",
- "taffy",
- "tokio",
-]
-
-[[package]]
-name = "dioxus-native-core-macro"
-version = "0.5.0-alpha.0"
-dependencies = [
- "anymap 0.12.1",
- "dioxus",
- "dioxus-native-core",
- "quote",
- "rustc-hash",
- "smallvec",
- "syn 2.0.51",
-]
-
 [[package]]
 name = "dioxus-playwright-fullstack-test"
 version = "0.1.0"
@@ -2730,7 +2656,7 @@ dependencies = [
 name = "dioxus-rsx"
 version = "0.5.0-alpha.0"
 dependencies = [
- "dioxus-core",
+ "dioxus-core 0.5.0-alpha.0",
  "internment",
  "krates",
  "proc-macro2",
@@ -2745,7 +2671,7 @@ name = "dioxus-signals"
 version = "0.5.0-alpha.0"
 dependencies = [
  "dioxus",
- "dioxus-core",
+ "dioxus-core 0.5.0-alpha.0",
  "futures-channel",
  "futures-util",
  "generational-box",
@@ -2769,7 +2695,7 @@ dependencies = [
  "async-trait",
  "chrono",
  "dioxus",
- "dioxus-core",
+ "dioxus-core 0.5.0-alpha.0",
  "dioxus-html",
  "dioxus-signals",
  "fern",
@@ -2793,24 +2719,6 @@ dependencies = [
  "manganis",
 ]
 
-[[package]]
-name = "dioxus-tui"
-version = "0.5.0-alpha.0"
-dependencies = [
- "criterion 0.3.6",
- "crossterm 0.26.1",
- "dioxus",
- "dioxus-core",
- "dioxus-hot-reload",
- "dioxus-html",
- "dioxus-native-core",
- "dioxus-native-core-macro",
- "futures",
- "plasmo",
- "taffy",
- "tokio",
-]
-
 [[package]]
 name = "dioxus-web"
 version = "0.5.0-alpha.0"
@@ -2818,7 +2726,7 @@ dependencies = [
  "async-trait",
  "console_error_panic_hook",
  "dioxus",
- "dioxus-core",
+ "dioxus-core 0.5.0-alpha.0",
  "dioxus-html",
  "dioxus-interpreter-js",
  "dioxus-ssr",
@@ -4293,12 +4201,6 @@ dependencies = [
  "system-deps",
 ]
 
-[[package]]
-name = "grid"
-version = "0.10.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eec1c01eb1de97451ee0d60de7d81cf1e72aabefb021616027f3d1c3ec1c723c"
-
 [[package]]
 name = "gtk"
 version = "0.18.1"
@@ -5152,15 +5054,6 @@ dependencies = [
  "either",
 ]
 
-[[package]]
-name = "itertools"
-version = "0.11.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b1c173a5686ce8bfa551b3563d0c2170bf24ca44da99c7ca4bfdab5418c3fe57"
-dependencies = [
- "either",
-]
-
 [[package]]
 name = "itertools"
 version = "0.12.1"
@@ -5701,10 +5594,11 @@ dependencies = [
 
 [[package]]
 name = "manganis"
-version = "0.2.0"
+version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c10916db4ed51967d92545eb5629ce1e1cc05c74da2cd2aab6ab6c57c2e838b6"
+checksum = "a42db80aa639f70d6bf1d2ef93612d2ffbb33f6ea17d473b91bfeb3f67bc24bc"
 dependencies = [
+ "dioxus-core 0.5.0-alpha.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "manganis-macro",
 ]
 
@@ -5737,9 +5631,9 @@ dependencies = [
 
 [[package]]
 name = "manganis-common"
-version = "0.2.0"
+version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "82ee0f9002a9f5d7e3b662e55562996c60401bae16da23f3790c52e0823216ea"
+checksum = "176dfb4bb5592b0d130176add9893af527ab565fc1bcf58ece88acd6276688d1"
 dependencies = [
  "anyhow",
  "base64",
@@ -5753,9 +5647,9 @@ dependencies = [
 
 [[package]]
 name = "manganis-macro"
-version = "0.2.0"
+version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "da50cc6074480dc6c255a09c9d48dd4a379e6162feb5d308ec33d5ba9da4e579"
+checksum = "ab2c2e11190c2f3d6133cffda5c955b463a7e90b7ba866e71e7dfa65fa97ddfc"
 dependencies = [
  "manganis-common",
  "proc-macro2",
@@ -6917,28 +6811,6 @@ version = "0.3.30"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d231b230927b5e4ad203db57bbcbee2802f6bce620b1e4a9024a07d94e2907ec"
 
-[[package]]
-name = "plasmo"
-version = "0.5.0-alpha.0"
-dependencies = [
- "anyhow",
- "anymap 1.0.0-beta.2",
- "criterion 0.3.6",
- "crossterm 0.26.1",
- "dioxus-html",
- "dioxus-native-core",
- "dioxus-native-core-macro",
- "futures",
- "futures-channel",
- "once_cell",
- "ratatui",
- "rustc-hash",
- "shipyard",
- "smallvec",
- "taffy",
- "tokio",
-]
-
 [[package]]
 name = "plist"
 version = "1.6.0"
@@ -7354,24 +7226,6 @@ dependencies = [
  "rand_core 0.5.1",
 ]
 
-[[package]]
-name = "ratatui"
-version = "0.24.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0ebc917cfb527a566c37ecb94c7e3fd098353516fb4eb6bea17015ade0182425"
-dependencies = [
- "bitflags 2.4.2",
- "cassowary",
- "crossterm 0.27.0",
- "indoc",
- "itertools 0.11.0",
- "lru",
- "paste",
- "strum",
- "unicode-segmentation",
- "unicode-width",
-]
-
 [[package]]
 name = "rav1e"
 version = "0.6.6"
@@ -8362,50 +8216,6 @@ version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "24188a676b6ae68c3b2cb3a01be17fbf7240ce009799bb56d5b1409051e78fde"
 
-[[package]]
-name = "shipyard"
-version = "0.6.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3511ae730f2e1c3d62a9025e2f9b2acbf130968057f1b3caab6d74a54a5e0e56"
-dependencies = [
- "hashbrown 0.12.3",
- "lock_api",
- "rayon",
- "shipyard_proc",
-]
-
-[[package]]
-name = "shipyard_proc"
-version = "0.3.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3eb847f4b9582e468198b5cfb5731b65cc67fe5e535acc9cbf3c11703d15f08c"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 1.0.109",
-]
-
-[[package]]
-name = "signal-hook"
-version = "0.3.17"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8621587d4798caf8eb44879d42e56b9a93ea5dcd315a6487c357130095b62801"
-dependencies = [
- "libc",
- "signal-hook-registry",
-]
-
-[[package]]
-name = "signal-hook-mio"
-version = "0.2.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "29ad2e15f37ec9a6cc544097b78a1ec90001e9f71b81338ca39f430adaca99af"
-dependencies = [
- "libc",
- "mio",
- "signal-hook",
-]
-
 [[package]]
 name = "signal-hook-registry"
 version = "1.4.1"
@@ -8511,15 +8321,6 @@ dependencies = [
  "rustc-hash",
 ]
 
-[[package]]
-name = "slotmap"
-version = "1.0.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dbff4acf519f630b3a3ddcfaea6c06b42174d9a44bc70c620e9ed1649d58b82a"
-dependencies = [
- "version_check",
-]
-
 [[package]]
 name = "smallvec"
 version = "1.13.1"
@@ -8920,28 +8721,6 @@ version = "0.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "73473c0e59e6d5812c5dfe2a064a6444949f089e20eec9a2e5506596494e4623"
 
-[[package]]
-name = "strum"
-version = "0.25.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "290d54ea6f91c969195bdbcd7442c8c2a2ba87da8bf60a7ee86a235d4bc1e125"
-dependencies = [
- "strum_macros",
-]
-
-[[package]]
-name = "strum_macros"
-version = "0.25.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "23dc1fa9ac9c169a78ba62f0b841814b7abae11bdd047b9c58f893439e309ea0"
-dependencies = [
- "heck 0.4.1",
- "proc-macro2",
- "quote",
- "rustversion",
- "syn 2.0.51",
-]
-
 [[package]]
 name = "subprocess"
 version = "0.2.9"
@@ -9042,18 +8821,6 @@ dependencies = [
  "version-compare",
 ]
 
-[[package]]
-name = "taffy"
-version = "0.3.18"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3c2287b6d7f721ada4cddf61ade5e760b2c6207df041cac9bfaa192897362fd3"
-dependencies = [
- "arrayvec",
- "grid",
- "num-traits",
- "slotmap",
-]
-
 [[package]]
 name = "tao"
 version = "0.24.1"
diff --git a/Cargo.toml b/Cargo.toml
index 71f4875c9..9df562b8e 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -23,10 +23,6 @@ members = [
     "packages/autofmt",
     "packages/check",
     "packages/rsx",
-    "packages/dioxus-tui",
-    "packages/plasmo",
-    "packages/native-core",
-    "packages/native-core-macro",
     "packages/rsx-rosetta",
     "packages/generational-box",
     "packages/signals",
@@ -74,10 +70,6 @@ dioxus-liveview = { path = "packages/liveview", version = "0.5.0-alpha.0"  }
 dioxus-autofmt = { path = "packages/autofmt", version = "0.5.0-alpha.0"  }
 dioxus-check = { path = "packages/check", version = "0.5.0-alpha.0"  }
 dioxus-rsx = { path = "packages/rsx", version = "0.5.0-alpha.0"  }
-dioxus-tui = { path = "packages/dioxus-tui", version = "0.5.0-alpha.0"  }
-plasmo = { path = "packages/plasmo", version = "0.5.0-alpha.0" }
-dioxus-native-core = { path = "packages/native-core", version = "0.5.0-alpha.0" }
-dioxus-native-core-macro = { path = "packages/native-core-macro", version = "0.5.0-alpha.0" }
 rsx-rosetta = { path = "packages/rsx-rosetta", version = "0.5.0-alpha.0" }
 dioxus-signals = { path = "packages/signals", version = "0.5.0-alpha.0" }
 dioxus-cli-config = { path = "packages/cli-config", version = "0.5.0-alpha.0" }
diff --git a/packages/config-macro/Cargo.toml b/packages/config-macro/Cargo.toml
index f7bba9255..57eec5756 100644
--- a/packages/config-macro/Cargo.toml
+++ b/packages/config-macro/Cargo.toml
@@ -24,4 +24,3 @@ mobile = []
 web = []
 ssr = []
 liveview = []
-tui = []
diff --git a/packages/config-macro/src/lib.rs b/packages/config-macro/src/lib.rs
index 0f318208f..13a38dcf8 100644
--- a/packages/config-macro/src/lib.rs
+++ b/packages/config-macro/src/lib.rs
@@ -23,7 +23,7 @@ pub fn server_only(input: TokenStream) -> TokenStream {
 
 #[proc_macro]
 pub fn client(input: TokenStream) -> TokenStream {
-    if cfg!(any(feature = "desktop", feature = "web", feature = "tui")) {
+    if cfg!(any(feature = "desktop", feature = "web")) {
         let input = TokenStream2::from(input);
         quote! {
             #input
@@ -110,18 +110,3 @@ pub fn liveview(input: TokenStream) -> TokenStream {
     }
     .into()
 }
-
-#[proc_macro]
-pub fn tui(input: TokenStream) -> TokenStream {
-    if cfg!(feature = "tui") {
-        let input = TokenStream2::from(input);
-        quote! {
-            #input
-        }
-    } else {
-        quote! {
-            || {}
-        }
-    }
-    .into()
-}
diff --git a/packages/dioxus-tui/.gitignore b/packages/dioxus-tui/.gitignore
deleted file mode 100644
index 96ef6c0b9..000000000
--- a/packages/dioxus-tui/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-/target
-Cargo.lock
diff --git a/packages/dioxus-tui/.vscode/spellright.dict b/packages/dioxus-tui/.vscode/spellright.dict
deleted file mode 100644
index c30e473fc..000000000
--- a/packages/dioxus-tui/.vscode/spellright.dict
+++ /dev/null
@@ -1,2 +0,0 @@
-esque
-Tui
diff --git a/packages/dioxus-tui/Cargo.toml b/packages/dioxus-tui/Cargo.toml
deleted file mode 100644
index 47ff3f536..000000000
--- a/packages/dioxus-tui/Cargo.toml
+++ /dev/null
@@ -1,36 +0,0 @@
-[package]
-name = "dioxus-tui"
-version = { workspace = true }
-authors = ["Jonathan Kelley, Evan Almloff"]
-edition = "2021"
-description = "TUI-based renderer for Dioxus"
-repository = "https://github.com/DioxusLabs/dioxus/"
-homepage = "https://dioxuslabs.com/learn/0.4/getting_started/tui"
-keywords = ["dom", "ui", "gui", "react", "terminal"]
-license = "MIT OR Apache-2.0"
-
-[dependencies]
-dioxus-core = { workspace = true, features = ["serialize"] }
-dioxus-html = { workspace = true }
-dioxus-native-core = { workspace = true, features = ["dioxus"] }
-dioxus-native-core-macro = { workspace = true }
-dioxus-hot-reload = { workspace = true, optional = true }
-plasmo = { workspace = true }
-
-crossterm = "0.26.0"
-tokio = { workspace = true, features = ["full"] }
-futures = "0.3.19"
-taffy = "0.3.12"
-
-[dev-dependencies]
-dioxus = { workspace = true }
-tokio = { version = "1" }
-criterion = "0.3.5"
-
-[[bench]]
-name = "update"
-harness = false
-
-[features]
-default = ["hot-reload"]
-hot-reload = ["dioxus-hot-reload"]
diff --git a/packages/dioxus-tui/README.md b/packages/dioxus-tui/README.md
deleted file mode 100644
index 19bac2219..000000000
--- a/packages/dioxus-tui/README.md
+++ /dev/null
@@ -1,95 +0,0 @@
-<div align="center">
-  <h1>Dioxus TUI</h1>
-  <p>
-    <strong>Beautiful terminal user interfaces in Rust with <a href="https://dioxuslabs.com/">Dioxus </a>.</strong>
-  </p>
-</div>
-
-<div align="center">
-  <!-- Crates version -->
-  <a href="https://crates.io/crates/dioxus">
-    <img src="https://img.shields.io/crates/v/dioxus.svg?style=flat-square"
-    alt="Crates.io version" />
-  </a>
-  <!-- Downloads -->
-  <a href="https://crates.io/crates/dioxus">
-    <img src="https://img.shields.io/crates/d/dioxus.svg?style=flat-square"
-      alt="Download" />
-  </a>
-  <!-- docs -->
-  <a href="https://docs.rs/dioxus">
-    <img src="https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square"
-      alt="docs.rs docs" />
-  </a>
-  <!-- CI -->
-  <a href="https://github.com/jkelleyrtp/dioxus/actions">
-    <img src="https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg"
-      alt="CI status" />
-  </a>
-
-  <!--Awesome -->
-  <a href="https://github.com/dioxuslabs/awesome-dioxus">
-    <img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Page" />
-  </a>
-  <!-- Discord -->
-  <a href="https://discord.gg/XgGxMSkvUM">
-    <img src="https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square" alt="Discord Link" />
-  </a>
-</div>
-
-<br/>
-
-Leverage React-like patterns, CSS, HTML, and Rust to build beautiful, portable, terminal user interfaces with Dioxus.
-
-```rust
-fn app() -> Element {
-    rsx!{
-        div {
-            width: "100%",
-            height: "10px",
-            background_color: "red",
-            justify_content: "center",
-            align_items: "center",
-            "Hello world!"
-        }
-    })
-}
-```
-
-![demo app](examples/example.png)
-
-## Background
-
-You can use Html-like semantics with inline styles, tree hierarchy, components, and more in your [`text-based user interface (TUI)`](https://en.wikipedia.org/wiki/Text-based_user_interface) application.
-
-Dioxus TUI is essentially a port of [Ink](https://github.com/vadimdemedes/ink) but for [`Rust`](https://www.rust-lang.org/) and [`Dioxus`](https://dioxuslabs.com/). Dioxus TUI doesn't depend on Node.js or any other JavaScript runtime, so your binaries are portable and beautiful.
-
-## Limitations
-
-- **Subset of Html**
-  Terminals can only render a subset of HTML. We support as much as we can.
-- **Particular frontend design**
-  Terminals and browsers are and look different. Therefore, the same design might not be the best to cover both renderers.
-
-## Status
-
-**WARNING: Dioxus TUI is currently under construction!**
-
-Rendering a VirtualDom works fine, but the ecosystem of hooks is not yet ready. Additionally, some bugs in the flexbox implementation might be quirky at times.
-
-## Features
-
-Dioxus TUI features:
-
-- [x] Flexbox-based layout system
-- [ ] CSS selectors
-- [x] inline CSS support
-- [x] Built-in focusing system
-
-* [x] Widgets<sup>1</sup>
-* [ ] Support for events, hooks, and callbacks<sup>2</sup>
-* [ ] Html tags<sup>3</sup>
-
-<sup>1</sup> Currently only a subset of the input element is implemented as a component (not an element). The `Input` component supports sliders, text, numbers, passwords, buttons, and checkboxes.
-<sup>2</sup> Basic keyboard, mouse, and focus events are implemented.
-<sup>3</sup> Currently, most HTML tags don't translate into any meaning inside of Dioxus TUI. So an `input` _element_ won't mean anything nor does it have any additional functionality.
diff --git a/packages/dioxus-tui/benches/update.rs b/packages/dioxus-tui/benches/update.rs
deleted file mode 100644
index 0f0479400..000000000
--- a/packages/dioxus-tui/benches/update.rs
+++ /dev/null
@@ -1,155 +0,0 @@
-use criterion::{criterion_group, criterion_main, BenchmarkId, Criterion};
-use dioxus::prelude::*;
-use dioxus_tui::{Config, TuiContext};
-
-criterion_group!(mbenches, tui_update);
-criterion_main!(mbenches);
-
-/// This benchmarks the cache performance of the TUI for small edits by changing one box at a time.
-fn tui_update(c: &mut Criterion) {
-    {
-        let mut group = c.benchmark_group("Update boxes");
-
-        for size in 1..=20usize {
-            let parameter_string = format!("{}", (size).pow(2));
-            group.bench_with_input(
-                BenchmarkId::new("size", parameter_string),
-                &size,
-                |b, size| {
-                    b.iter(|| {
-                        dioxus_tui::launch_cfg_with_props(
-                            app,
-                            GridProps {
-                                size: *size,
-                                update_count: 1,
-                            },
-                            Config::default().with_headless(),
-                        )
-                    })
-                },
-            );
-        }
-    }
-
-    {
-        let mut group = c.benchmark_group("Update many boxes");
-
-        for update_count in 1..=20usize {
-            let update_count = update_count * 20;
-            let parameter_string = update_count.to_string();
-            group.bench_with_input(
-                BenchmarkId::new("update count", parameter_string),
-                &update_count,
-                |b, update_count| {
-                    b.iter(|| {
-                        dioxus_tui::launch_cfg_with_props(
-                            app,
-                            GridProps {
-                                size: 20,
-                                update_count: *update_count,
-                            },
-                            Config::default().with_headless(),
-                        )
-                    })
-                },
-            );
-        }
-    }
-}
-
-#[derive(Props, PartialEq, Clone)]
-struct BoxProps {
-    x: usize,
-    y: usize,
-    hue: f32,
-    alpha: f32,
-}
-#[allow(non_snake_case)]
-fn Box(props: BoxProps) -> Element {
-    let count = use_signal(|| 0);
-
-    let x = props.x * 2;
-    let y = props.y * 2;
-    let hue = props.hue;
-    let display_hue = props.hue as u32 / 10;
-    let count = count();
-    let alpha = props.alpha + (count % 100) as f32;
-
-    rsx! {
-        div {
-            left: "{x}%",
-            top: "{y}%",
-            width: "100%",
-            height: "100%",
-            background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
-            align_items: "center",
-            p{"{display_hue:03}"}
-        }
-    }
-}
-
-#[derive(Props, PartialEq, Clone)]
-struct GridProps {
-    size: usize,
-    update_count: usize,
-}
-#[allow(non_snake_case)]
-fn Grid(props: GridProps) -> Element {
-    let size = props.size;
-    let mut count = use_signal(|| 0);
-    let mut counts = use_signal(|| vec![0; size * size]);
-
-    let ctx: TuiContext = consume_context();
-    if count() + props.update_count >= (size * size) {
-        ctx.quit();
-    } else {
-        for _ in 0..props.update_count {
-            counts.with_mut(|c| {
-                let i = count();
-                c[i] += 1;
-                c[i] %= 360;
-            });
-            count.with_mut(|i| {
-                *i += 1;
-                *i %= size * size;
-            });
-        }
-    }
-
-    rsx! {
-        div{
-            width: "100%",
-            height: "100%",
-            flex_direction: "column",
-            for x in 0..size {
-                div {
-                    width: "100%",
-                    height: "100%",
-                    flex_direction: "row",
-                    for y in 0..size {
-                        Box {
-                            key: "{x}-{y}",
-                            x: x,
-                            y: y,
-                            alpha: 100.0,
-                            hue: y as f32*100.0/size as f32 + counts.read()[x*size + y] as f32,
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-fn app(props: GridProps) -> Element {
-    rsx! {
-        div{
-            width: "100%",
-            height: "100%",
-            Grid{
-                size: props.size,
-                update_count: props.update_count,
-            }
-        }
-    }
-}
diff --git a/packages/dioxus-tui/examples/all_terminal_events.rs b/packages/dioxus-tui/examples/all_terminal_events.rs
deleted file mode 100644
index 45aec8837..000000000
--- a/packages/dioxus-tui/examples/all_terminal_events.rs
+++ /dev/null
@@ -1,64 +0,0 @@
-use dioxus::prelude::*;
-use std::{fmt::Debug, rc::Rc};
-
-fn main() {
-    dioxus_tui::launch(app);
-}
-
-const MAX_EVENTS: usize = 8;
-
-fn app() -> Element {
-    let mut events = use_signal(|| Vec::new() as Vec<Rc<dyn Debug>>);
-
-    let mut log_event = move |event: Rc<dyn Debug>| events.write().push(event);
-
-    rsx! {
-        div { width: "100%", height: "100%", flex_direction: "column",
-            div {
-                width: "80%",
-                height: "50%",
-                border_width: "1px",
-                justify_content: "center",
-                align_items: "center",
-                background_color: "hsl(248, 53%, 58%)",
-
-                // Mosue
-                onmousemove: move |event| log_event(event.data()),
-                onclick: move |event| log_event(event.data()),
-                ondoubleclick: move |event| log_event(event.data()),
-                onmousedown: move |event| log_event(event.data()),
-                onmouseup: move |event| log_event(event.data()),
-
-                // Scroll
-                onwheel: move |event| log_event(event.data()),
-
-                // Keyboard
-                onkeydown: move |event| log_event(event.data()),
-                onkeyup: move |event| log_event(event.data()),
-                onkeypress: move |event| log_event(event.data()),
-
-                // Focus
-                onfocusin: move |event| log_event(event.data()),
-                onfocusout: move |event| log_event(event.data()),
-
-                "Hover, click, type or scroll to see the info down below"
-            }
-            div { width: "80%", height: "50%", flex_direction: "column",
-                // A trailing iterator of the last MAX_EVENTS events
-                // The index actually is a fine key here, since events are append-only and therefore stable
-                for (index, event) in events.read().iter().enumerate().rev().take(MAX_EVENTS).rev() {
-                    p { key: "{index}",
-                        {
-                            // TUI panics if text overflows (https://github.com/DioxusLabs/dioxus/issues/371)
-                            // temporary hack: just trim the strings (and make sure viewport is big enough)
-                            // todo: remove
-                            let mut trimmed = format!("{event:?}");
-                            trimmed.truncate(200);
-                            trimmed
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/packages/dioxus-tui/examples/border.rs b/packages/dioxus-tui/examples/border.rs
deleted file mode 100644
index b38edd061..000000000
--- a/packages/dioxus-tui/examples/border.rs
+++ /dev/null
@@ -1,27 +0,0 @@
-use dioxus::prelude::*;
-
-fn main() {
-    dioxus_tui::launch(app);
-}
-
-fn app() -> Element {
-    let mut radius = use_signal(|| 0);
-
-    rsx! {
-        div {
-            width: "100%",
-            height: "100%",
-            justify_content: "center",
-            align_items: "center",
-            background_color: "hsl(248, 53%, 58%)",
-            onwheel: move |w| radius.with_mut(|r| *r = (*r + w.delta().strip_units().y as i8).abs()),
-
-            border_style: "solid none solid double",
-            border_width: "thick",
-            border_radius: "{radius}px",
-            border_color: "#0000FF #FF00FF #FF0000 #00FF00",
-
-            "{radius}"
-        }
-    }
-}
diff --git a/packages/dioxus-tui/examples/buttons.rs b/packages/dioxus-tui/examples/buttons.rs
deleted file mode 100644
index 5173103af..000000000
--- a/packages/dioxus-tui/examples/buttons.rs
+++ /dev/null
@@ -1,72 +0,0 @@
-use dioxus::prelude::*;
-use dioxus_html::input_data::keyboard_types::Code;
-
-fn main() {
-    dioxus_tui::launch(app);
-}
-
-#[component]
-fn Button(color_offset: u32, layer: u16) -> Element {
-    let mut toggle = use_signal(|| false);
-    let mut hovered = use_signal(|| false);
-
-    let hue = color_offset % 255;
-    let saturation = if toggle() { 50 } else { 25 } + if hovered() { 50 } else { 25 };
-    let brightness = saturation / 2;
-    let color = format!("hsl({hue}, {saturation}, {brightness})");
-
-    rsx! {
-        div{
-            width: "100%",
-            height: "100%",
-            background_color: "{color}",
-            tabindex: "{layer}",
-            onkeydown: move |e| {
-                if let Code::Space = e.code() {
-                    toggle.toggle();
-                }
-            },
-            onclick: move |_| toggle.toggle(),
-            onmouseenter: move |_| hovered.set(true),
-            onmouseleave: move |_| hovered.set(false),
-            justify_content: "center",
-            align_items: "center",
-            display: "flex",
-            flex_direction: "column",
-            p { "tabindex: {layer}" }
-        }
-    }
-}
-
-fn app() -> Element {
-    rsx! {
-        div {
-            display: "flex",
-            flex_direction: "column",
-            width: "100%",
-            height: "100%",
-            for y in 1..8 {
-                div {
-                    display: "flex",
-                    flex_direction: "row",
-                    width: "100%",
-                    height: "100%",
-                    for x in 1..8 {
-                        if (x + y) % 2 == 0 {
-                            div {
-                                width: "100%",
-                                height: "100%",
-                                background_color: "rgb(100, 100, 100)",
-                            }
-                        } else {
-                            Button {
-                                color_offset: x * y,
-                                layer: ((x + y) % 3) as u16,
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/packages/dioxus-tui/examples/color_test.rs b/packages/dioxus-tui/examples/color_test.rs
deleted file mode 100644
index 72fa5b44a..000000000
--- a/packages/dioxus-tui/examples/color_test.rs
+++ /dev/null
@@ -1,38 +0,0 @@
-use dioxus::prelude::*;
-
-fn main() {
-    dioxus_tui::launch_cfg(
-        app,
-        dioxus_tui::Config::default().with_rendering_mode(dioxus_tui::RenderingMode::Ansi),
-    );
-}
-
-fn app() -> Element {
-    let steps = 50;
-    rsx! {
-        div{
-            width: "100%",
-            height: "100%",
-            flex_direction: "column",
-            for x in 0..=steps {
-                div { width: "100%", height: "100%", flex_direction: "row",
-                    for y in 0..=steps {
-                        {
-                            let hue = x as f32*360.0/steps as f32;
-                            let alpha = y as f32*100.0/steps as f32;
-                            rsx! {
-                                div {
-                                    left: "{x}px",
-                                    top: "{y}px",
-                                    width: "10%",
-                                    height: "100%",
-                                    background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/packages/dioxus-tui/examples/example.png b/packages/dioxus-tui/examples/example.png
deleted file mode 100644
index ba45e6e99..000000000
Binary files a/packages/dioxus-tui/examples/example.png and /dev/null differ
diff --git a/packages/dioxus-tui/examples/flex.rs b/packages/dioxus-tui/examples/flex.rs
deleted file mode 100644
index bbe6df055..000000000
--- a/packages/dioxus-tui/examples/flex.rs
+++ /dev/null
@@ -1,82 +0,0 @@
-use dioxus::prelude::*;
-
-fn main() {
-    dioxus_tui::launch(app);
-}
-
-fn app() -> Element {
-    rsx! {
-        div {
-            width: "100%",
-            height: "100%",
-            flex_direction: "column",
-            // justify_content: "center",
-            // align_items: "center",
-            // flex_direction: "row",
-            // background_color: "red",
-
-            p {
-                background_color: "black",
-                flex_direction: "column",
-                justify_content: "center",
-                align_items: "center",
-                // height: "10%",
-                "hi"
-                "hi"
-                "hi"
-            }
-
-            li {
-                background_color: "red",
-                flex_direction: "column",
-                justify_content: "center",
-                align_items: "center",
-                // height: "10%",
-                "bib"
-                "bib"
-                "bib"
-                "bib"
-                "bib"
-                "bib"
-                "bib"
-                "bib"
-            }
-            li {
-                background_color: "blue",
-                flex_direction: "column",
-                justify_content: "center",
-                align_items: "center",
-                // height: "10%",
-                "zib"
-                "zib"
-                "zib"
-                "zib"
-                "zib"
-                "zib"
-                "zib"
-                "zib"
-                "zib"
-                "zib"
-                "zib"
-                "zib"
-                "zib"
-            }
-            p {
-                background_color: "yellow",
-                "asd"
-            }
-            p {
-                background_color: "green",
-                "asd"
-            }
-            p {
-                background_color: "white",
-                "asd"
-            }
-            p {
-                background_color: "cyan",
-                "asd"
-            }
-        }
-    }
-}
diff --git a/packages/dioxus-tui/examples/hover.rs b/packages/dioxus-tui/examples/hover.rs
deleted file mode 100644
index 30740e0d7..000000000
--- a/packages/dioxus-tui/examples/hover.rs
+++ /dev/null
@@ -1,125 +0,0 @@
-use dioxus::{events::MouseData, prelude::*};
-use dioxus_core::Event;
-use std::convert::TryInto;
-use std::fmt::Write;
-use std::rc::Rc;
-
-fn main() {
-    dioxus_tui::launch(app);
-}
-
-fn app() -> Element {
-    fn to_str(c: &[i32; 3]) -> String {
-        let mut result = String::new();
-        result += "#";
-        for c in c.iter() {
-            write!(result, "{c:02X?}").unwrap();
-        }
-        result
-    }
-
-    fn get_brightness(m: Rc<MouseData>) -> i32 {
-        let b: i32 = m.held_buttons().len().try_into().unwrap();
-        127 * b
-    }
-
-    let mut q1_color = use_signal(|| [200; 3]);
-    let mut q2_color = use_signal(|| [200; 3]);
-    let mut q3_color = use_signal(|| [200; 3]);
-    let mut q4_color = use_signal(|| [200; 3]);
-
-    let mut page_coordinates = use_signal(|| "".to_string());
-    let mut element_coordinates = use_signal(|| "".to_string());
-    let mut buttons = use_signal(|| "".to_string());
-    let mut modifiers = use_signal(|| "".to_string());
-
-    let update_data = move |event: Event<MouseData>| {
-        page_coordinates.set(format!("{:?}", event.page_coordinates()));
-        element_coordinates.set(format!("{:?}", event.element_coordinates()));
-
-        // Note: client coordinates are also available, but they would be the same as the page coordinates in this example, because there is no scrolling.
-        // There are also screen coordinates, but they are currently the same as client coordinates due to technical limitations
-        buttons.set(format!("{:?}", event.held_buttons()));
-        modifiers.set(format!("{:?}", event.modifiers()));
-    };
-
-    rsx! {
-        div {
-            width: "100%",
-            height: "100%",
-            flex_direction: "column",
-            div {
-                width: "100%",
-                height: "50%",
-                flex_direction: "row",
-                div {
-                    border_width: "1px",
-                    width: "50%",
-                    height: "100%",
-                    justify_content: "center",
-                    align_items: "center",
-                    background_color: to_str(&q1_color()),
-                    onmouseenter: move |m| q1_color.set([get_brightness(m.data()), 0, 0]),
-                    onmousedown: move |m| q1_color.set([get_brightness(m.data()), 0, 0]),
-                    onmouseup: move |m| q1_color.set([get_brightness(m.data()), 0, 0]),
-                    onwheel: move |w| q1_color.set([q1_color()[0] + (10.0 * w.delta().strip_units().y) as i32, 0, 0]),
-                    onmouseleave: move |_| q1_color.set([200; 3]),
-                    onmousemove: update_data,
-                    "click me"
-                }
-                div {
-                    width: "50%",
-                    height: "100%",
-                    justify_content: "center",
-                    align_items: "center",
-                    background_color: to_str(&q2_color()),
-                    onmouseenter: move |m| q2_color.set([get_brightness(m.data()); 3]),
-                    onmousedown: move |m| q2_color.set([get_brightness(m.data()); 3]),
-                    onmouseup: move |m| q2_color.set([get_brightness(m.data()); 3]),
-                    onwheel: move |w| q2_color.set([q2_color()[0] + (10.0 * w.delta().strip_units().y) as i32; 3]),
-                    onmouseleave: move |_| q2_color.set([200; 3]),
-                    onmousemove: update_data,
-                    "click me"
-                }
-            }
-
-            div {
-                width: "100%",
-                height: "50%",
-                flex_direction: "row",
-                div {
-                    width: "50%",
-                    height: "100%",
-                    justify_content: "center",
-                    align_items: "center",
-                    background_color: to_str(&q3_color()),
-                    onmouseenter: move |m| q3_color.set([0, get_brightness(m.data()), 0]),
-                    onmousedown: move |m| q3_color.set([0, get_brightness(m.data()), 0]),
-                    onmouseup: move |m| q3_color.set([0, get_brightness(m.data()), 0]),
-                    onwheel: move |w| q3_color.set([0, q3_color()[1] + (10.0 * w.delta().strip_units().y) as i32, 0]),
-                    onmouseleave: move |_| q3_color.set([200; 3]),
-                    onmousemove: update_data,
-                    "click me"
-                }
-                div {
-                    width: "50%",
-                    height: "100%",
-                    justify_content: "center",
-                    align_items: "center",
-                    background_color: to_str(&q4_color()),
-                    onmouseenter: move |m| q4_color.set([0, 0, get_brightness(m.data())]),
-                    onmousedown: move |m| q4_color.set([0, 0, get_brightness(m.data())]),
-                    onmouseup: move |m| q4_color.set([0, 0, get_brightness(m.data())]),
-                    onwheel: move |w| q4_color.set([0, 0, q4_color()[2] + (10.0 * w.delta().strip_units().y) as i32]),
-                    onmouseleave: move |_| q4_color.set([200; 3]),
-                    onmousemove: update_data,
-                    "click me"
-                }
-            }
-            div { "Page coordinates: {page_coordinates}" }
-            div { "Element coordinates: {element_coordinates}" }
-            div { "Buttons: {buttons}" }
-            div { "Modifiers: {modifiers}" }
-        }
-    }
-}
diff --git a/packages/dioxus-tui/examples/list.rs b/packages/dioxus-tui/examples/list.rs
deleted file mode 100644
index 156e83550..000000000
--- a/packages/dioxus-tui/examples/list.rs
+++ /dev/null
@@ -1,28 +0,0 @@
-use dioxus::prelude::*;
-
-fn main() {
-    dioxus_tui::launch(app);
-}
-
-fn app() -> Element {
-    rsx! {
-        div {
-            width: "100%",
-            height: "100%",
-            flex_direction: "column",
-            border_width: "1px",
-
-            h1 { height: "2px", color: "green",
-                "that's awesome!"
-            }
-
-            ul {
-                flex_direction: "column",
-                padding_left: "3px",
-                for i in 0..10 {
-                    "> hello {i}"
-                }
-            }
-        }
-    }
-}
diff --git a/packages/dioxus-tui/examples/many_small_edit_stress.rs b/packages/dioxus-tui/examples/many_small_edit_stress.rs
deleted file mode 100644
index 1093e353f..000000000
--- a/packages/dioxus-tui/examples/many_small_edit_stress.rs
+++ /dev/null
@@ -1,96 +0,0 @@
-use dioxus::prelude::*;
-use dioxus_tui::{Config, TuiContext};
-
-/// This benchmarks the cache performance of the TUI for small edits by changing one box at a time.
-fn main() {
-    for size in 1..=20usize {
-        for _ in 0..10 {
-            let dom = VirtualDom::new(app).with_root_context(size);
-            dioxus_tui::launch_vdom_cfg(dom, Config::default().with_headless())
-        }
-    }
-}
-
-fn app() -> Element {
-    let size = use_context::<usize>();
-    rsx! {
-        div { width: "100%", height: "100%", Grid { size } }
-    }
-}
-
-#[component]
-fn Box(x: usize, y: usize, hue: f32, alpha: f32) -> Element {
-    let count = use_signal(|| 0);
-
-    let x = x * 2;
-    let y = y * 2;
-    let hue = hue;
-    let display_hue = hue as u32 / 10;
-
-    let alpha = alpha + (count() % 100) as f32;
-
-    rsx! {
-        div {
-            left: "{x}%",
-            top: "{y}%",
-            width: "100%",
-            height: "100%",
-            background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
-            align_items: "center",
-            p{"{display_hue:03}"}
-        }
-    }
-}
-
-#[component]
-fn Grid(size: usize) -> Element {
-    let size = size;
-    let mut count = use_signal(|| 0);
-    let mut counts = use_signal(|| vec![0; size * size]);
-
-    let ctx: TuiContext = consume_context();
-
-    if count() + 1 >= (size * size) {
-        ctx.quit();
-    } else {
-        counts.with_mut(|c| {
-            let i = count();
-            c[i] += 1;
-            c[i] %= 360;
-        });
-        count.with_mut(|i| {
-            *i += 1;
-            *i %= size * size;
-        });
-    }
-
-    rsx! {
-        div{
-            width: "100%",
-            height: "100%",
-            flex_direction: "column",
-            for x in 0..size {
-                div{
-                    width: "100%",
-                    height: "100%",
-                    flex_direction: "row",
-                    for y in 0..size {
-                        {
-                            let alpha = y as f32*100.0/size as f32 + counts.read()[x*size + y] as f32;
-                            let key = format!("{}-{}", x, y);
-                            rsx! {
-                                Box {
-                                    x: x,
-                                    y: y,
-                                    alpha: 100.0,
-                                    hue: alpha,
-                                    key: "{key}",
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/packages/dioxus-tui/examples/margin.rs b/packages/dioxus-tui/examples/margin.rs
deleted file mode 100644
index 20ce9a8e1..000000000
--- a/packages/dioxus-tui/examples/margin.rs
+++ /dev/null
@@ -1,50 +0,0 @@
-use dioxus::prelude::*;
-
-fn main() {
-    dioxus_tui::launch(app);
-}
-
-fn app() -> Element {
-    rsx! {
-        div {
-            width: "100%",
-            height: "100%",
-            flex_direction: "column",
-            background_color: "black",
-            margin_right: "10px",
-
-            div {
-                width: "70%",
-                height: "70%",
-                background_color: "green",
-                margin_left: "4px",
-
-                div {
-                    width: "100%",
-                    height: "100%",
-
-                    margin_top: "2px",
-                    margin_bottom: "2px",
-                    margin_left: "2px",
-                    margin_right: "2px",
-                    flex_shrink: "0",
-
-                    background_color: "red",
-                    justify_content: "center",
-                    align_items: "center",
-                    flex_direction: "column",
-
-                    padding_top: "2px",
-                    padding_bottom: "2px",
-                    padding_left: "4px",
-                    padding_right: "4px",
-
-                    "[A]"
-                    "[A]"
-                    "[A]"
-                    "[A]"
-                }
-            }
-        }
-    }
-}
diff --git a/packages/dioxus-tui/examples/quadrants.rs b/packages/dioxus-tui/examples/quadrants.rs
deleted file mode 100644
index fd410b554..000000000
--- a/packages/dioxus-tui/examples/quadrants.rs
+++ /dev/null
@@ -1,58 +0,0 @@
-#![allow(non_snake_case)]
-
-use dioxus::prelude::*;
-
-fn main() {
-    dioxus_tui::launch_cfg(app, Default::default());
-}
-
-#[component]
-fn Quadrant(color: String, text: String) -> Element {
-    rsx! {
-        div {
-            border_width: "1px",
-            width: "50%",
-            height: "100%",
-            justify_content: "center",
-            align_items: "center",
-            background_color: "{color}",
-            "{text}"
-        }
-    }
-}
-
-fn app() -> Element {
-    rsx! {
-        div {
-            width: "100%",
-            height: "100%",
-            flex_direction: "column",
-            div {
-                width: "100%",
-                height: "50%",
-                flex_direction: "row",
-                Quadrant {
-                    color: "red".to_string(),
-                    text: "[A]".to_string()
-                },
-                Quadrant {
-                    color: "black".to_string(),
-                    text: "[B]".to_string()
-                }
-            }
-            div {
-                width: "100%",
-                height: "50%",
-                flex_direction: "row",
-                Quadrant {
-                    color: "green".to_string(),
-                    text: "[C]".to_string()
-                },
-                Quadrant {
-                    color: "blue".to_string(),
-                    text: "[D]".to_string()
-                }
-            }
-        }
-    }
-}
diff --git a/packages/dioxus-tui/examples/readme_hello_world.rs b/packages/dioxus-tui/examples/readme_hello_world.rs
deleted file mode 100644
index c17869596..000000000
--- a/packages/dioxus-tui/examples/readme_hello_world.rs
+++ /dev/null
@@ -1,19 +0,0 @@
-use dioxus::prelude::*;
-
-fn main() {
-    dioxus_tui::launch(app);
-}
-
-fn app() -> Element {
-    rsx! {
-        div {
-            width: "100%",
-            height: "10px",
-            background_color: "red",
-            justify_content: "center",
-            align_items: "center",
-
-            "Hello world!"
-        }
-    }
-}
diff --git a/packages/dioxus-tui/examples/task.rs b/packages/dioxus-tui/examples/task.rs
deleted file mode 100644
index 01e7831a0..000000000
--- a/packages/dioxus-tui/examples/task.rs
+++ /dev/null
@@ -1,28 +0,0 @@
-use dioxus::prelude::*;
-
-fn main() {
-    dioxus_tui::launch(app);
-}
-
-fn app() -> Element {
-    let mut count = use_signal(|| 0);
-
-    use_future(move || async move {
-        loop {
-            count += 1;
-            tokio::time::sleep(std::time::Duration::from_millis(1000)).await;
-            schedule_update();
-        }
-    });
-
-    rsx! {
-        div { width: "100%",
-            div { width: "50%", height: "5px", background_color: "blue", justify_content: "center", align_items: "center",
-                "Hello {count}!"
-            }
-            div { width: "50%", height: "10px", background_color: "red", justify_content: "center", align_items: "center",
-                "Hello {count}!"
-            }
-        }
-    }
-}
diff --git a/packages/dioxus-tui/examples/text.rs b/packages/dioxus-tui/examples/text.rs
deleted file mode 100644
index 7e3a59d4d..000000000
--- a/packages/dioxus-tui/examples/text.rs
+++ /dev/null
@@ -1,113 +0,0 @@
-use dioxus::prelude::*;
-
-fn main() {
-    dioxus_tui::launch(app);
-}
-
-fn app() -> Element {
-    let mut alpha = use_signal(|| 100);
-
-    rsx! {
-        div {
-            width: "100%",
-            height: "100%",
-            flex_direction: "column",
-            onwheel: move |evt| alpha.set((alpha() + evt.delta().strip_units().y as i64).clamp(0, 100)),
-
-            p {
-                background_color: "black",
-                flex_direction: "column",
-                justify_content: "center",
-                align_items: "center",
-                color: "green",
-                "hi"
-                "hi"
-                "hi"
-            }
-
-            li {
-                background_color: "red",
-                flex_direction: "column",
-                justify_content: "center",
-                align_items: "center",
-                "bib"
-                "bib"
-                "bib"
-                "bib"
-                "bib"
-                "bib"
-                "bib"
-                "bib"
-            }
-            li {
-                background_color: "blue",
-                flex_direction: "column",
-                justify_content: "center",
-                align_items: "center",
-                "zib"
-                "zib"
-                "zib"
-                "zib"
-                "zib"
-                "zib"
-            }
-            p {
-                background_color: "yellow",
-                "asd"
-            }
-            p {
-                background_color: "green",
-                "asd"
-            }
-            p {
-                background_color: "white",
-                "asd"
-            }
-            p {
-                background_color: "cyan",
-                "asd"
-            }
-            div {
-                font_weight: "bold",
-                color: "#666666",
-                p {
-                    "bold"
-                }
-                p {
-                    font_weight: "normal",
-                    " normal"
-                }
-            }
-            p {
-                font_style: "italic",
-                color: "red",
-                "italic"
-            }
-            p {
-                text_decoration: "underline",
-                color: "rgba(255, 255, 255)",
-                "underline"
-            }
-            p {
-                text_decoration: "line-through",
-                color: "hsla(10, 100%, 70%)",
-                "line-through"
-            }
-            div{
-                position: "absolute",
-                top: "1px",
-                background_color: "rgba(255, 0, 0, 50%)",
-                width: "100%",
-                p {
-                    color: "rgba(255, 255, 255, {alpha}%)",
-                    background_color: "rgba(100, 100, 100, {alpha}%)",
-                    "rgba(255, 255, 255, {alpha}%)"
-                }
-                p {
-                    color: "rgba(255, 255, 255, 100%)",
-                    "rgba(255, 255, 255, 100%)"
-                }
-            }
-        }
-    }
-}
diff --git a/packages/dioxus-tui/examples/widgets.rs b/packages/dioxus-tui/examples/widgets.rs
deleted file mode 100644
index 355f773b2..000000000
--- a/packages/dioxus-tui/examples/widgets.rs
+++ /dev/null
@@ -1,90 +0,0 @@
-use dioxus::prelude::*;
-use dioxus_tui::Config;
-
-fn main() {
-    dioxus_tui::launch_cfg(app, Config::new());
-}
-
-fn app() -> Element {
-    let mut bg_green = use_signal(|| false);
-    let color = if bg_green() { "green" } else { "red" };
-
-    rsx! {
-        div {
-            width: "100%",
-            background_color: "{color}",
-            flex_direction: "column",
-            align_items: "center",
-            justify_content: "center",
-            input {
-                oninput: move |data| if data.value() == "good" {
-                    bg_green.set(true);
-                } else{
-                    bg_green.set(false);
-                },
-                r#type: "checkbox",
-                value: "good",
-                width: "50%",
-                height: "10%",
-                checked: "true",
-            }
-            input {
-                oninput: move |data| if &data.value() == "hello world"{
-                    bg_green.set(true);
-                } else {
-                    bg_green.set(false);
-                },
-                width: "50%",
-                height: "10%",
-                maxlength: "11",
-            }
-            input {
-                oninput: move |data| {
-                    if (data.value().parse::<f32>().unwrap() - 40.0).abs() < 5.0 {
-                        bg_green.set(true);
-                    } else{
-                        bg_green.set(false);
-                    }
-                },
-                r#type: "range",
-                width: "50%",
-                height: "10%",
-                min: "20",
-                max: "80",
-            }
-            input {
-                oninput: move |data| {
-                    if data.value() == "10"{
-                        bg_green.set(true);
-                    } else {
-                        bg_green.set(false);
-                    }
-                },
-                r#type: "number",
-                width: "50%",
-                height: "10%",
-                maxlength: "4",
-            }
-            input {
-                oninput: move |data| {
-                    if data.value() == "hello world"{
-                        bg_green.set(true);
-                    } else{
-                        bg_green.set(false);
-                    }
-                },
-                r#type: "password",
-                width: "50%",
-                height: "10%",
-                maxlength: "11",
-            }
-            input {
-                oninput: move |_| { bg_green.set(true) },
-                r#type: "button",
-                value: "green",
-                width: "50%",
-                height: "10%",
-            }
-        }
-    }
-}
diff --git a/packages/dioxus-tui/src/element.rs b/packages/dioxus-tui/src/element.rs
deleted file mode 100644
index bb6e36722..000000000
--- a/packages/dioxus-tui/src/element.rs
+++ /dev/null
@@ -1,158 +0,0 @@
-use std::{
-    any::Any,
-    fmt::{Display, Formatter},
-};
-
-use dioxus_core::{ElementId, WriteMutations};
-use dioxus_html::{
-    geometry::euclid::{Point2D, Rect, Size2D},
-    MountedData, MountedError, RenderedElementBacking,
-};
-
-use dioxus_native_core::{dioxus::DioxusNativeCoreMutationWriter, NodeId};
-use plasmo::query::{ElementRef, Query};
-
-pub(crate) struct DioxusTUIMutationWriter<'a> {
-    pub(crate) query: Query,
-    pub(crate) events: &'a mut Vec<(ElementId, &'static str, Box<dyn Any>, bool)>,
-    pub(crate) native_core_writer: DioxusNativeCoreMutationWriter<'a>,
-}
-
-impl WriteMutations for DioxusTUIMutationWriter<'_> {
-    fn register_template(&mut self, template: dioxus_core::prelude::Template) {
-        self.native_core_writer.register_template(template)
-    }
-
-    fn append_children(&mut self, id: ElementId, m: usize) {
-        self.native_core_writer.append_children(id, m)
-    }
-
-    fn assign_node_id(&mut self, path: &'static [u8], id: ElementId) {
-        self.native_core_writer.assign_node_id(path, id)
-    }
-
-    fn create_placeholder(&mut self, id: ElementId) {
-        self.native_core_writer.create_placeholder(id)
-    }
-
-    fn create_text_node(&mut self, value: &str, id: ElementId) {
-        self.native_core_writer.create_text_node(value, id)
-    }
-
-    fn hydrate_text_node(&mut self, path: &'static [u8], value: &str, id: ElementId) {
-        self.native_core_writer.hydrate_text_node(path, value, id)
-    }
-
-    fn load_template(&mut self, name: &'static str, index: usize, id: ElementId) {
-        self.native_core_writer.load_template(name, index, id)
-    }
-
-    fn replace_node_with(&mut self, id: ElementId, m: usize) {
-        self.native_core_writer.replace_node_with(id, m)
-    }
-
-    fn replace_placeholder_with_nodes(&mut self, path: &'static [u8], m: usize) {
-        self.native_core_writer
-            .replace_placeholder_with_nodes(path, m)
-    }
-
-    fn insert_nodes_after(&mut self, id: ElementId, m: usize) {
-        self.native_core_writer.insert_nodes_after(id, m)
-    }
-
-    fn insert_nodes_before(&mut self, id: ElementId, m: usize) {
-        self.native_core_writer.insert_nodes_before(id, m)
-    }
-
-    fn set_attribute(
-        &mut self,
-        name: &'static str,
-        ns: Option<&'static str>,
-        value: &dioxus_core::AttributeValue,
-        id: ElementId,
-    ) {
-        self.native_core_writer.set_attribute(name, ns, value, id)
-    }
-
-    fn set_node_text(&mut self, value: &str, id: ElementId) {
-        self.native_core_writer.set_node_text(value, id)
-    }
-
-    fn create_event_listener(&mut self, name: &'static str, id: ElementId) {
-        if name == "mounted" {
-            let element = TuiElement {
-                query: self.query.clone(),
-                id: self.native_core_writer.state.element_to_node_id(id),
-            };
-            self.events
-                .push((id, "mounted", Box::new(MountedData::new(element)), false));
-        } else {
-            self.native_core_writer.create_event_listener(name, id)
-        }
-    }
-
-    fn remove_event_listener(&mut self, name: &'static str, id: ElementId) {
-        self.native_core_writer.remove_event_listener(name, id)
-    }
-
-    fn remove_node(&mut self, id: ElementId) {
-        self.native_core_writer.remove_node(id)
-    }
-
-    fn push_root(&mut self, id: ElementId) {
-        self.native_core_writer.push_root(id)
-    }
-}
-
-#[derive(Clone)]
-pub(crate) struct TuiElement {
-    query: Query,
-    id: NodeId,
-}
-
-impl TuiElement {
-    pub(crate) fn element(&self) -> ElementRef {
-        self.query.get(self.id)
-    }
-}
-
-impl RenderedElementBacking for TuiElement {
-    fn get_client_rect(
-        &self,
-    ) -> std::pin::Pin<
-        Box<
-            dyn futures::Future<
-                Output = dioxus_html::MountedResult<dioxus_html::geometry::euclid::Rect<f64, f64>>,
-            >,
-        >,
-    > {
-        let layout = self.element().layout();
-        Box::pin(async move {
-            match layout {
-                Some(layout) => {
-                    let x = layout.location.x as f64;
-                    let y = layout.location.y as f64;
-                    let width = layout.size.width as f64;
-                    let height = layout.size.height as f64;
-                    Ok(Rect::new(Point2D::new(x, y), Size2D::new(width, height)))
-                }
-                None => Err(MountedError::OperationFailed(Box::new(TuiElementNotFound))),
-            }
-        })
-    }
-
-    fn as_any(&self) -> &dyn std::any::Any {
-        self
-    }
-}
-
-#[derive(Debug)]
-struct TuiElementNotFound;
-
-impl Display for TuiElementNotFound {
-    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
-        write!(f, "TUI element not found")
-    }
-}
-
-impl std::error::Error for TuiElementNotFound {}
diff --git a/packages/dioxus-tui/src/events.rs b/packages/dioxus-tui/src/events.rs
deleted file mode 100644
index 3e7b6fd2a..000000000
--- a/packages/dioxus-tui/src/events.rs
+++ /dev/null
@@ -1,108 +0,0 @@
-use core::panic;
-
-use dioxus_html::*;
-
-use crate::element::TuiElement;
-
-fn downcast(event: &PlatformEventData) -> plasmo::EventData {
-    event
-        .downcast::<plasmo::EventData>()
-        .expect("event should be of type EventData")
-        .clone()
-}
-
-pub(crate) struct SerializedHtmlEventConverter;
-
-impl HtmlEventConverter for SerializedHtmlEventConverter {
-    fn convert_animation_data(&self, _: &PlatformEventData) -> AnimationData {
-        panic!("animation events not supported")
-    }
-
-    fn convert_clipboard_data(&self, _: &PlatformEventData) -> ClipboardData {
-        panic!("clipboard events not supported")
-    }
-
-    fn convert_composition_data(&self, _: &PlatformEventData) -> CompositionData {
-        panic!("composition events not supported")
-    }
-
-    fn convert_drag_data(&self, _: &PlatformEventData) -> DragData {
-        panic!("drag events not supported")
-    }
-
-    fn convert_focus_data(&self, event: &PlatformEventData) -> FocusData {
-        if let plasmo::EventData::Focus(event) = downcast(event) {
-            FocusData::new(event)
-        } else {
-            panic!("event should be of type Focus")
-        }
-    }
-
-    fn convert_form_data(&self, event: &PlatformEventData) -> FormData {
-        if let plasmo::EventData::Form(event) = downcast(event) {
-            FormData::new(event)
-        } else {
-            panic!("event should be of type Form")
-        }
-    }
-
-    fn convert_image_data(&self, _: &PlatformEventData) -> ImageData {
-        panic!("image events not supported")
-    }
-
-    fn convert_keyboard_data(&self, event: &PlatformEventData) -> KeyboardData {
-        if let plasmo::EventData::Keyboard(event) = downcast(event) {
-            KeyboardData::new(event)
-        } else {
-            panic!("event should be of type Keyboard")
-        }
-    }
-
-    fn convert_media_data(&self, _: &PlatformEventData) -> MediaData {
-        panic!("media events not supported")
-    }
-
-    fn convert_mounted_data(&self, event: &PlatformEventData) -> MountedData {
-        event.downcast::<TuiElement>().cloned().unwrap().into()
-    }
-
-    fn convert_mouse_data(&self, event: &PlatformEventData) -> MouseData {
-        if let plasmo::EventData::Mouse(event) = downcast(event) {
-            MouseData::new(event)
-        } else {
-            panic!("event should be of type Mouse")
-        }
-    }
-
-    fn convert_pointer_data(&self, _: &PlatformEventData) -> PointerData {
-        panic!("pointer events not supported")
-    }
-
-    fn convert_scroll_data(&self, _: &PlatformEventData) -> ScrollData {
-        panic!("scroll events not supported")
-    }
-
-    fn convert_selection_data(&self, _: &PlatformEventData) -> SelectionData {
-        panic!("selection events not supported")
-    }
-
-    fn convert_toggle_data(&self, _: &PlatformEventData) -> ToggleData {
-        panic!("toggle events not supported")
-    }
-
-    fn convert_touch_data(&self, _: &PlatformEventData) -> TouchData {
-        panic!("touch events not supported")
-    }
-
-    fn convert_transition_data(&self, _: &PlatformEventData) -> TransitionData {
-        panic!("transition events not supported")
-    }
-
-    fn convert_wheel_data(&self, event: &PlatformEventData) -> WheelData {
-        if let plasmo::EventData::Wheel(event) = downcast(event) {
-            WheelData::new(event)
-        } else {
-            panic!("event should be of type Wheel")
-        }
-    }
-}
diff --git a/packages/dioxus-tui/src/lib.rs b/packages/dioxus-tui/src/lib.rs
deleted file mode 100644
index 294c0300b..000000000
--- a/packages/dioxus-tui/src/lib.rs
+++ /dev/null
@@ -1,208 +0,0 @@
-#![doc = include_str!("../README.md")]
-#![doc(html_logo_url = "https://avatars.githubusercontent.com/u/79236386")]
-#![doc(html_favicon_url = "https://avatars.githubusercontent.com/u/79236386")]
-
-mod element;
-mod events;
-
-use std::{
-    any::Any,
-    ops::Deref,
-    rc::Rc,
-    sync::{Arc, RwLock},
-};
-
-use dioxus_core::{Element, ElementId, ScopeId, VirtualDom};
-use dioxus_html::PlatformEventData;
-use dioxus_native_core::dioxus::{DioxusState, NodeImmutableDioxusExt};
-use dioxus_native_core::prelude::*;
-
-use element::DioxusTUIMutationWriter;
-pub use plasmo::{query::Query, Config, RenderingMode, Size, TuiContext};
-use plasmo::{render, Driver};
-
-pub mod launch {
-    use super::*;
-
-    pub type Config = super::Config;
-    /// Launches the WebView and runs the event loop, with configuration and root props.
-    pub fn launch(
-        root: fn() -> Element,
-        contexts: Vec<Box<dyn Fn() -> Box<dyn Any>>>,
-        platform_config: Config,
-    ) {
-        let mut virtual_dom = VirtualDom::new(root);
-
-        for context in contexts {
-            virtual_dom.insert_any_root_context(context());
-        }
-
-        launch_vdom_cfg(virtual_dom, platform_config)
-    }
-}
-
-pub fn launch(app: fn() -> Element) {
-    launch_cfg(app, Config::default())
-}
-
-pub fn launch_cfg(app: fn() -> Element, cfg: Config) {
-    launch_vdom_cfg(VirtualDom::new(app), cfg)
-}
-
-pub fn launch_cfg_with_props<P: Clone + 'static>(app: fn(P) -> Element, props: P, cfg: Config) {
-    launch_vdom_cfg(VirtualDom::new_with_props(app, props), cfg)
-}
-
-pub fn launch_vdom_cfg(vdom: VirtualDom, cfg: Config) {
-    dioxus_html::set_event_converter(Box::new(events::SerializedHtmlEventConverter));
-
-    render(cfg, |rdom, taffy, event_tx| {
-        let dioxus_state = {
-            let mut rdom = rdom.write().unwrap();
-            DioxusState::create(&mut rdom)
-        };
-        let dioxus_state = Rc::new(RwLock::new(dioxus_state));
-        let vdom = vdom
-            .with_root_context(TuiContext::new(event_tx))
-            .with_root_context(Query::new(rdom.clone(), taffy.clone()))
-            .with_root_context(DioxusElementToNodeId {
-                mapping: dioxus_state.clone(),
-            });
-
-        let queued_events = Vec::new();
-
-        let mut myself = DioxusRenderer {
-            vdom,
-            dioxus_state,
-            queued_events,
-            #[cfg(all(feature = "hot-reload", debug_assertions))]
-            hot_reload_rx: {
-                let (hot_reload_tx, hot_reload_rx) =
-                    tokio::sync::mpsc::unbounded_channel::<dioxus_hot_reload::HotReloadMsg>();
-                dioxus_hot_reload::connect(move |msg| {
-                    let _ = hot_reload_tx.send(msg);
-                });
-                hot_reload_rx
-            },
-        };
-
-        {
-            let mut rdom = rdom.write().unwrap();
-            let mut dioxus_state = myself.dioxus_state.write().unwrap();
-
-            let mut writer = DioxusTUIMutationWriter {
-                query: myself
-                    .vdom
-                    .in_runtime(|| ScopeId::ROOT.consume_context().unwrap()),
-                events: &mut myself.queued_events,
-                native_core_writer: dioxus_state.create_mutation_writer(&mut rdom),
-            };
-
-            // Find any mount events
-            myself.vdom.rebuild(&mut writer);
-        }
-
-        myself
-    })
-    .unwrap();
-}
-
-struct DioxusRenderer {
-    vdom: VirtualDom,
-    dioxus_state: Rc<RwLock<DioxusState>>,
-    // Events that are queued up to be sent to the vdom next time the vdom is polled
-    queued_events: Vec<(ElementId, &'static str, Box<dyn Any>, bool)>,
-    #[cfg(all(feature = "hot-reload", debug_assertions))]
-    hot_reload_rx: tokio::sync::mpsc::UnboundedReceiver<dioxus_hot_reload::HotReloadMsg>,
-}
-
-impl Driver for DioxusRenderer {
-    fn update(&mut self, rdom: &Arc<RwLock<RealDom>>) {
-        let mut rdom = rdom.write().unwrap();
-        let mut dioxus_state = self.dioxus_state.write().unwrap();
-
-        let mut writer = DioxusTUIMutationWriter {
-            query: self
-                .vdom
-                .in_runtime(|| ScopeId::ROOT.consume_context().unwrap()),
-            events: &mut self.queued_events,
-            native_core_writer: dioxus_state.create_mutation_writer(&mut rdom),
-        };
-
-        // Find any mount events
-        self.vdom.render_immediate(&mut writer);
-    }
-
-    fn handle_event(
-        &mut self,
-        rdom: &Arc<RwLock<RealDom>>,
-        id: NodeId,
-        event: &str,
-        value: Rc<plasmo::EventData>,
-        bubbles: bool,
-    ) {
-        let id = { rdom.read().unwrap().get(id).unwrap().mounted_id() };
-        if let Some(id) = id {
-            let inner_value = value.deref().clone();
-            let boxed_event = Box::new(inner_value);
-            let platform_event = PlatformEventData::new(boxed_event);
-            self.vdom
-                .handle_event(event, Rc::new(platform_event), id, bubbles);
-        }
-    }
-
-    fn poll_async(&mut self) -> std::pin::Pin<Box<dyn futures::Future<Output = ()> + '_>> {
-        // Add any queued events
-        for (id, event, value, bubbles) in self.queued_events.drain(..) {
-            let platform_event = PlatformEventData::new(value);
-            self.vdom
-                .handle_event(event, Rc::new(platform_event), id, bubbles);
-        }
-
-        #[cfg(all(feature = "hot-reload", debug_assertions))]
-        return Box::pin(async {
-            let hot_reload_wait = self.hot_reload_rx.recv();
-            let mut hot_reload_msg = None;
-            let wait_for_work = self.vdom.wait_for_work();
-            tokio::select! {
-                Some(msg) = hot_reload_wait => {
-                    #[cfg(all(feature = "hot-reload", debug_assertions))]
-                    {
-                        hot_reload_msg = Some(msg);
-                    }
-                    #[cfg(not(all(feature = "hot-reload", debug_assertions)))]
-                    let () = msg;
-                }
-                _ = wait_for_work => {}
-            }
-            // if we have a new template, replace the old one
-            if let Some(msg) = hot_reload_msg {
-                match msg {
-                    dioxus_hot_reload::HotReloadMsg::UpdateTemplate(template) => {
-                        self.vdom.replace_template(template);
-                    }
-                    dioxus_hot_reload::HotReloadMsg::Shutdown => {
-                        std::process::exit(0);
-                    }
-                }
-            }
-        });
-
-        #[cfg(not(all(feature = "hot-reload", debug_assertions)))]
-        Box::pin(self.vdom.wait_for_work())
-    }
-}
-
-#[derive(Clone)]
-pub struct DioxusElementToNodeId {
-    mapping: Rc<RwLock<DioxusState>>,
-}
-
-impl DioxusElementToNodeId {
-    pub fn get_node_id(&self, element_id: ElementId) -> Option<NodeId> {
-        self.mapping
-            .read()
-            .unwrap()
-            .try_element_to_node_id(element_id)
-    }
-}
diff --git a/packages/dioxus-tui/test.html b/packages/dioxus-tui/test.html
deleted file mode 100644
index 5298c723e..000000000
--- a/packages/dioxus-tui/test.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <title>Test</title>
-    <style>
-        html,
-        body {
-            height: 100%;
-        }
-        
-        .container {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            background-color: black;
-            /* justify-content: center;
-            align-items: center; */
-            /* margin: auto; */
-        }
-        
-        .smaller {
-            height: 70%;
-            width: 70%;
-            background-color: green;
-            /* justify-content: center; */
-            /* align-items: center; */
-        }
-        
-        .superinner {
-            height: 100%;
-            width: 100%;
-            /* display: flex; */
-            /*  */
-            margin-top: 20px;
-            margin-bottom: 20px;
-            margin-left: 20px;
-            margin-right: 20px;
-            /*  */
-            background-color: red;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-            /* margin: 20px; */
-            /* margin: 20px; */
-        }
-    </style>
-</head>
-
-<body>
-    <div class="container">
-        <div class="smaller">
-            <div class="superinner">
-                <h1>Hello World</h1>
-                <p>This is a test</p>
-            </div>
-        </div>
-    </div>
-    <!-- <div class="container">
-        <div class="smaller">
-            hello world
-            <div style="color: green; margin: 40px;">
-                goodbye
-                <div style="color:red;">
-                    asdasdasd
-                </div>
-            </div>
-        </div>
-    </div> -->
-</body>
-
-</html>
\ No newline at end of file
diff --git a/packages/dioxus-tui/tests/events.rs b/packages/dioxus-tui/tests/events.rs
deleted file mode 100644
index f49b64d97..000000000
--- a/packages/dioxus-tui/tests/events.rs
+++ /dev/null
@@ -1,381 +0,0 @@
-use crossterm::event::{Event, KeyCode, KeyEvent, KeyModifiers, MouseButton, MouseEvent};
-use dioxus::prelude::*;
-use dioxus_html::input_data::keyboard_types::Code;
-use dioxus_tui::TuiContext;
-use std::future::Future;
-use std::pin::Pin;
-use std::task::{Context, Poll};
-
-/// The tui renderer will look for any event that has occured or any future that has resolved in a loop.
-/// It will resolve at most one event per loop.
-/// This future will resolve after a certain number of polls. If the number of polls is greater than the number of events triggered, and the event has not been recieved there is an issue with the event system.
-struct PollN(usize);
-impl PollN {
-    fn new(n: usize) -> Self {
-        PollN(n)
-    }
-}
-impl Future for PollN {
-    type Output = ();
-
-    fn poll(mut self: Pin<&mut Self>, _: &mut Context<'_>) -> Poll<Self::Output> {
-        if self.0 == 0 {
-            Poll::Ready(())
-        } else {
-            self.0 -= 1;
-            Poll::Pending
-        }
-    }
-}
-
-#[test]
-fn key_down() {
-    dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
-
-    fn app() -> Element {
-        let render_count = use_signal(|| 0);
-        let mut render_count_handle = render_count;
-        let tui_ctx: TuiContext = consume_context();
-
-        spawn(async move {
-            PollN::new(3).await;
-            render_count_handle.with_mut(|x| *x + 1);
-        });
-        if render_count() > 2 {
-            panic!("Event was not received");
-        }
-        // focus the element
-        tui_ctx.inject_event(Event::Key(KeyEvent {
-            code: KeyCode::Tab,
-            modifiers: KeyModifiers::NONE,
-            kind: crossterm::event::KeyEventKind::Press,
-            state: crossterm::event::KeyEventState::NONE,
-        }));
-        tui_ctx.inject_event(Event::Key(KeyEvent {
-            code: KeyCode::Char('a'),
-            modifiers: KeyModifiers::NONE,
-            kind: crossterm::event::KeyEventKind::Press,
-            state: crossterm::event::KeyEventState::NONE,
-        }));
-        rsx! {
-            div {
-                width: "100%",
-                height: "100%",
-                onkeydown: move |evt| {
-                    assert_eq!(evt.data.code(), Code::KeyA);
-                    tui_ctx.quit();
-                }
-            }
-        }
-    }
-}
-
-#[test]
-fn mouse_down() {
-    dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
-
-    fn app() -> Element {
-        let render_count = use_signal(|| 0);
-        let tui_ctx: TuiContext = consume_context();
-        let mut render_count_handle = render_count;
-        spawn(async move {
-            PollN::new(2).await;
-            render_count_handle.with_mut(|x| *x + 1);
-        });
-        if render_count() > 2 {
-            panic!("Event was not received");
-        }
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 0,
-            row: 0,
-            kind: crossterm::event::MouseEventKind::Down(MouseButton::Left),
-            modifiers: KeyModifiers::NONE,
-        }));
-        rsx! {
-            div {
-                width: "100%",
-                height: "100%",
-                onmousedown: move |evt| {
-                    assert!(
-                        evt.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Primary)
-                    );
-                    tui_ctx.quit();
-                }
-            }
-        }
-    }
-}
-
-#[test]
-fn mouse_up() {
-    dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
-
-    fn app() -> Element {
-        let render_count = use_signal(|| 0);
-        let tui_ctx: TuiContext = consume_context();
-        let mut render_count_handle = render_count;
-        spawn(async move {
-            PollN::new(3).await;
-            render_count_handle.with_mut(|x| *x + 1);
-        });
-        if render_count() > 2 {
-            panic!("Event was not received");
-        }
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 0,
-            row: 0,
-            kind: crossterm::event::MouseEventKind::Down(MouseButton::Left),
-            modifiers: KeyModifiers::NONE,
-        }));
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 0,
-            row: 0,
-            kind: crossterm::event::MouseEventKind::Up(MouseButton::Left),
-            modifiers: KeyModifiers::NONE,
-        }));
-        rsx! {
-            div {
-                width: "100%",
-                height: "100%",
-                onmouseup: move |_| {
-                    tui_ctx.quit();
-                }
-            }
-        }
-    }
-}
-
-#[test]
-fn mouse_enter() {
-    dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
-
-    fn app() -> Element {
-        let render_count = use_signal(|| 0);
-        let mut render_count_handle = render_count;
-        let tui_ctx: TuiContext = consume_context();
-        spawn(async move {
-            PollN::new(3).await;
-            render_count_handle.with_mut(|x| *x + 1);
-        });
-        if render_count() > 2 {
-            panic!("Event was not received");
-        }
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 100,
-            row: 100,
-            kind: crossterm::event::MouseEventKind::Moved,
-            modifiers: KeyModifiers::NONE,
-        }));
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 0,
-            row: 0,
-            kind: crossterm::event::MouseEventKind::Moved,
-            modifiers: KeyModifiers::NONE,
-        }));
-        rsx! {
-            div {
-                width: "50%",
-                height: "50%",
-                onmouseenter: move |_| {
-                    tui_ctx.quit();
-                }
-            }
-        }
-    }
-}
-
-#[test]
-fn mouse_exit() {
-    dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
-
-    fn app() -> Element {
-        let render_count = use_signal(|| 0);
-        let tui_ctx: TuiContext = consume_context();
-        let mut render_count_handle = render_count;
-        spawn(async move {
-            PollN::new(3).await;
-            render_count_handle.with_mut(|x| *x + 1);
-        });
-        if render_count() > 2 {
-            panic!("Event was not received");
-        }
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 0,
-            row: 0,
-            kind: crossterm::event::MouseEventKind::Moved,
-            modifiers: KeyModifiers::NONE,
-        }));
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 100,
-            row: 100,
-            kind: crossterm::event::MouseEventKind::Moved,
-            modifiers: KeyModifiers::NONE,
-        }));
-        rsx! {
-            div {
-                width: "50%",
-                height: "50%",
-                onmouseenter: move |_| {
-                    tui_ctx.quit();
-                }
-            }
-        }
-    }
-}
-
-#[test]
-fn mouse_move() {
-    dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
-
-    fn app() -> Element {
-        let render_count = use_signal(|| 0);
-        let tui_ctx: TuiContext = consume_context();
-        let mut render_count_handle = render_count;
-        spawn(async move {
-            PollN::new(3).await;
-            render_count_handle.with_mut(|x| *x + 1);
-        });
-        if render_count() > 2 {
-            panic!("Event was not received");
-        }
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 40,
-            row: 40,
-            kind: crossterm::event::MouseEventKind::Moved,
-            modifiers: KeyModifiers::NONE,
-        }));
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 60,
-            row: 60,
-            kind: crossterm::event::MouseEventKind::Moved,
-            modifiers: KeyModifiers::NONE,
-        }));
-        rsx! {
-            div {
-                width: "100%",
-                height: "100%",
-                onmousemove: move |_| {
-                    tui_ctx.quit();
-                }
-            }
-        }
-    }
-}
-
-#[test]
-fn wheel() {
-    dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
-
-    fn app() -> Element {
-        let render_count = use_signal(|| 0);
-        let tui_ctx: TuiContext = consume_context();
-        let mut render_count_handle = render_count;
-        spawn(async move {
-            PollN::new(3).await;
-            render_count_handle.with_mut(|x| *x + 1);
-        });
-        if render_count() > 2 {
-            panic!("Event was not received");
-        }
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 50,
-            row: 50,
-            kind: crossterm::event::MouseEventKind::Moved,
-            modifiers: KeyModifiers::NONE,
-        }));
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 50,
-            row: 50,
-            kind: crossterm::event::MouseEventKind::ScrollDown,
-            modifiers: KeyModifiers::NONE,
-        }));
-        rsx! {
-            div {
-                width: "100%",
-                height: "100%",
-                onwheel: move |evt| {
-                    assert!(evt.data.delta().strip_units().y > 0.0);
-                    tui_ctx.quit();
-                }
-            }
-        }
-    }
-}
-
-#[test]
-fn click() {
-    dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
-
-    fn app() -> Element {
-        let render_count = use_signal(|| 0);
-        let tui_ctx: TuiContext = consume_context();
-        let mut render_count_handle = render_count;
-        spawn(async move {
-            PollN::new(3).await;
-            render_count_handle.with_mut(|x| *x + 1);
-        });
-        if render_count() > 2 {
-            panic!("Event was not received");
-        }
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 50,
-            row: 50,
-            kind: crossterm::event::MouseEventKind::Down(MouseButton::Left),
-            modifiers: KeyModifiers::NONE,
-        }));
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 50,
-            row: 50,
-            kind: crossterm::event::MouseEventKind::Up(MouseButton::Left),
-            modifiers: KeyModifiers::NONE,
-        }));
-        rsx! {
-            div {
-                width: "100%",
-                height: "100%",
-                onclick: move |_| {
-                    tui_ctx.quit();
-                }
-            }
-        }
-    }
-}
-
-#[test]
-fn context_menu() {
-    dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
-
-    fn app() -> Element {
-        let render_count = use_signal(|| 0);
-        let tui_ctx: TuiContext = consume_context();
-        let mut render_count_handle = render_count;
-        spawn(async move {
-            PollN::new(3).await;
-            render_count_handle.with_mut(|x| *x + 1);
-        });
-        if render_count() > 2 {
-            panic!("Event was not received");
-        }
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 50,
-            row: 50,
-            kind: crossterm::event::MouseEventKind::Down(MouseButton::Right),
-            modifiers: KeyModifiers::NONE,
-        }));
-        tui_ctx.inject_event(Event::Mouse(MouseEvent {
-            column: 50,
-            row: 50,
-            kind: crossterm::event::MouseEventKind::Up(MouseButton::Right),
-            modifiers: KeyModifiers::NONE,
-        }));
-        rsx! {
-            div {
-                width: "100%",
-                height: "100%",
-                oncontextmenu: move |_| {
-                    tui_ctx.quit();
-                }
-            }
-        }
-    }
-}
diff --git a/packages/dioxus/Cargo.toml b/packages/dioxus/Cargo.toml
index fbaed9660..67029a37b 100644
--- a/packages/dioxus/Cargo.toml
+++ b/packages/dioxus/Cargo.toml
@@ -24,7 +24,6 @@ dioxus-desktop = { workspace = true, optional = true }
 dioxus-fullstack = { workspace = true, optional = true }
 dioxus-liveview = { workspace = true, optional = true }
 dioxus-ssr ={ workspace = true, optional = true }
-dioxus-tui = { workspace = true, optional = true }
 
 serde = { version = "1.0.136", optional = true }
 
@@ -50,7 +49,6 @@ web = ["dioxus-web", "dioxus-fullstack?/web", "dioxus-config-macro/web", "dioxus
 ssr = ["dioxus-ssr", "dioxus-router?/ssr", "dioxus-config-macro/ssr"]
 liveview = ["dioxus-liveview", "dioxus-config-macro/liveview", "dioxus-router?/liveview"]
 axum = ["dioxus-fullstack?/axum", "dioxus-fullstack?/server", "ssr", "dioxus-liveview?/axum"]
-tui = ["dioxus-tui", "dioxus-config-macro/tui"]
 
 # This feature just disables the no-renderer-enabled warning
 third-party-renderer = []
diff --git a/packages/dioxus/build.rs b/packages/dioxus/build.rs
index 15315eeb9..d5d3e7374 100644
--- a/packages/dioxus/build.rs
+++ b/packages/dioxus/build.rs
@@ -7,7 +7,7 @@ fn main() {
 
         let liveview_renderers = ["liveview", "axum"];
         let fullstack_renderers = ["axum"];
-        let client_renderers = ["desktop", "mobile", "web", "tui"];
+        let client_renderers = ["desktop", "mobile", "web"];
         let client_renderer_selected = client_renderers
             .iter()
             .any(|renderer| feature_enabled(renderer));
diff --git a/packages/dioxus/src/launch.rs b/packages/dioxus/src/launch.rs
index e58e3ecb5..4030f093f 100644
--- a/packages/dioxus/src/launch.rs
+++ b/packages/dioxus/src/launch.rs
@@ -80,17 +80,6 @@ impl LaunchBuilder {
         }
     }
 
-    #[cfg(feature = "tui")]
-    #[cfg_attr(docsrs, doc(cfg(feature = "tui")))]
-    /// Launch your tui application
-    pub fn tui() -> LaunchBuilder<dioxus_tui::Config, UnsendContext> {
-        LaunchBuilder {
-            launch_fn: dioxus_tui::launch::launch,
-            contexts: Vec::new(),
-            platform_config: None,
-        }
-    }
-
     /// Provide a custom launch function for your application.
     ///
     /// Useful for third party renderers to tap into the launch builder API without having to reimplement it.
@@ -184,24 +173,11 @@ mod current_platform {
     ))]
     pub use dioxus_liveview::launch::*;
 
-    #[cfg(all(
-        feature = "tui",
-        not(any(
-            feature = "liveview",
-            feature = "web",
-            feature = "desktop",
-            feature = "mobile",
-            feature = "fullstack"
-        ))
-    ))]
-    pub use dioxus_tui::launch::*;
-
     #[cfg(not(any(
         feature = "liveview",
         feature = "desktop",
         feature = "mobile",
         feature = "web",
-        feature = "tui",
         feature = "fullstack"
     )))]
     pub type Config = ();
@@ -211,7 +187,6 @@ mod current_platform {
         feature = "desktop",
         feature = "mobile",
         feature = "web",
-        feature = "tui",
         feature = "fullstack"
     )))]
     pub fn launch(
@@ -251,10 +226,3 @@ pub fn launch_desktop(app: fn() -> Element) {
 pub fn launch_fullstack(app: fn() -> Element) {
     LaunchBuilder::fullstack().launch(app)
 }
-
-#[cfg(feature = "tui")]
-#[cfg_attr(docsrs, doc(cfg(feature = "tui")))]
-/// Launch your tui application without any additional configuration. See [`LaunchBuilder`] for more options.
-pub fn launch_tui(app: fn() -> Element) {
-    LaunchBuilder::tui().launch(app)
-}
diff --git a/packages/dioxus/src/lib.rs b/packages/dioxus/src/lib.rs
index bd2e8f70b..b7afd3be0 100644
--- a/packages/dioxus/src/lib.rs
+++ b/packages/dioxus/src/lib.rs
@@ -106,10 +106,6 @@ pub use dioxus_desktop as mobile;
 #[cfg_attr(docsrs, doc(cfg(feature = "liveview")))]
 pub use dioxus_liveview as liveview;
 
-#[cfg(feature = "tui")]
-#[cfg_attr(docsrs, doc(cfg(feature = "tui")))]
-pub use dioxus_tui as tui;
-
 #[cfg(feature = "ssr")]
 #[cfg_attr(docsrs, doc(cfg(feature = "ssr")))]
 pub use dioxus_ssr as ssr;
diff --git a/packages/native-core-macro/.gitignore b/packages/native-core-macro/.gitignore
deleted file mode 100644
index 96ef6c0b9..000000000
--- a/packages/native-core-macro/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-/target
-Cargo.lock
diff --git a/packages/native-core-macro/Cargo.toml b/packages/native-core-macro/Cargo.toml
deleted file mode 100644
index 92d739117..000000000
--- a/packages/native-core-macro/Cargo.toml
+++ /dev/null
@@ -1,24 +0,0 @@
-[package]
-name = "dioxus-native-core-macro"
-version = { workspace = true }
-edition = "2021"
-description = "Build natively rendered apps with Dioxus"
-license = "MIT OR Apache-2.0"
-repository = "https://github.com/DioxusLabs/dioxus/"
-homepage = "https://dioxuslabs.com"
-keywords = ["dom", "ui", "gui", "react"]
-authors = ["Jonathan Kelley", "Evan Almloff"]
-
-[lib]
-proc-macro = true
-
-[dependencies]
-syn = { version = "2.0", features = ["extra-traits", "full"] }
-quote = "1.0"
-
-[dev-dependencies]
-smallvec = "1.6"
-rustc-hash = { workspace = true }
-anymap = "0.12.1"
-dioxus = { workspace = true }
-dioxus-native-core = { workspace = true }
diff --git a/packages/native-core-macro/README.md b/packages/native-core-macro/README.md
deleted file mode 100644
index 4cf19cece..000000000
--- a/packages/native-core-macro/README.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# Dioxus Native Core Macro
-
-[![Crates.io][crates-badge]][crates-url]
-[![MIT licensed][mit-badge]][mit-url]
-[![Build Status][actions-badge]][actions-url]
-[![Discord chat][discord-badge]][discord-url]
-
-[crates-badge]: https://img.shields.io/crates/v/dioxus-native-core-macro.svg
-[crates-url]: https://crates.io/crates/dioxus-native-core-macro
-[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg
-[mit-url]: https://github.com/dioxuslabs/dioxus/blob/master/LICENSE
-[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg
-[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster
-[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square
-[discord-url]: https://discord.gg/XgGxMSkvUM
-
-[Website](https://dioxuslabs.com) |
-[Guides](https://dioxuslabs.com/learn/0.4/) |
-[API Docs](https://docs.rs/dioxus-native-core-macro/latest/dioxus_native_core_macro) |
-[Chat](https://discord.gg/XgGxMSkvUM)
-
-## Overview
-
-`dioxus-native-core-macro` provides a handful of macros used by native-core for native renderers like TUI, Blitz, and Freya to derive their state.
-
-## Contributing
-
-- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).
-- Join the discord and ask questions!
-
-## License
-
-This project is licensed under the [MIT license].
-
-[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT
-
-Unless you explicitly state otherwise, any contribution intentionally submitted
-for inclusion in Dioxus by you shall be licensed as MIT without any additional
-terms or conditions.
diff --git a/packages/native-core-macro/src/lib.rs b/packages/native-core-macro/src/lib.rs
deleted file mode 100644
index fdaa12cf5..000000000
--- a/packages/native-core-macro/src/lib.rs
+++ /dev/null
@@ -1,390 +0,0 @@
-#![doc = include_str!("../README.md")]
-#![doc(html_logo_url = "https://avatars.githubusercontent.com/u/79236386")]
-#![doc(html_favicon_url = "https://avatars.githubusercontent.com/u/79236386")]
-
-extern crate proc_macro;
-
-use std::collections::HashSet;
-
-use proc_macro::TokenStream;
-use quote::{format_ident, quote};
-use syn::{parse_macro_input, ItemImpl, Type, TypePath, TypeTuple};
-
-/// A helper attribute for deriving `State` for a struct.
-#[proc_macro_attribute]
-pub fn partial_derive_state(_: TokenStream, input: TokenStream) -> TokenStream {
-    let impl_block: syn::ItemImpl = parse_macro_input!(input as syn::ItemImpl);
-
-    let has_create_fn = impl_block
-        .items
-        .iter()
-        .any(|item| matches!(item, syn::ImplItem::Fn(method) if method.sig.ident == "create"));
-
-    let parent_dependencies = impl_block
-        .items
-        .iter()
-        .find_map(|item| {
-            if let syn::ImplItem::Type(syn::ImplItemType { ident, ty, .. }) = item {
-                (ident == "ParentDependencies").then_some(ty)
-            } else {
-                None
-            }
-        })
-        .expect("ParentDependencies must be defined");
-    let child_dependencies = impl_block
-        .items
-        .iter()
-        .find_map(|item| {
-            if let syn::ImplItem::Type(syn::ImplItemType { ident, ty, .. }) = item {
-                (ident == "ChildDependencies").then_some(ty)
-            } else {
-                None
-            }
-        })
-        .expect("ChildDependencies must be defined");
-    let node_dependencies = impl_block
-        .items
-        .iter()
-        .find_map(|item| {
-            if let syn::ImplItem::Type(syn::ImplItemType { ident, ty, .. }) = item {
-                (ident == "NodeDependencies").then_some(ty)
-            } else {
-                None
-            }
-        })
-        .expect("NodeDependencies must be defined");
-
-    let this_type = &impl_block.self_ty;
-    let this_type = extract_type_path(this_type)
-        .unwrap_or_else(|| panic!("Self must be a type path, found {}", quote!(#this_type)));
-
-    let mut combined_dependencies = HashSet::new();
-
-    let self_path: TypePath = syn::parse_quote!(Self);
-
-    let parent_dependencies = match extract_tuple(parent_dependencies) {
-        Some(tuple) => {
-            let mut parent_dependencies = Vec::new();
-            for type_ in &tuple.elems {
-                let mut type_ = extract_type_path(type_).unwrap_or_else(|| {
-                    panic!(
-                        "ParentDependencies must be a tuple of type paths, found {}",
-                        quote!(#type_)
-                    )
-                });
-                if type_ == self_path {
-                    type_ = this_type.clone();
-                }
-                combined_dependencies.insert(type_.clone());
-                parent_dependencies.push(type_);
-            }
-            parent_dependencies
-        }
-        _ => panic!(
-            "ParentDependencies must be a tuple, found {}",
-            quote!(#parent_dependencies)
-        ),
-    };
-    let child_dependencies = match extract_tuple(child_dependencies) {
-        Some(tuple) => {
-            let mut child_dependencies = Vec::new();
-            for type_ in &tuple.elems {
-                let mut type_ = extract_type_path(type_).unwrap_or_else(|| {
-                    panic!(
-                        "ChildDependencies must be a tuple of type paths, found {}",
-                        quote!(#type_)
-                    )
-                });
-                if type_ == self_path {
-                    type_ = this_type.clone();
-                }
-                combined_dependencies.insert(type_.clone());
-                child_dependencies.push(type_);
-            }
-            child_dependencies
-        }
-        _ => panic!(
-            "ChildDependencies must be a tuple, found {}",
-            quote!(#child_dependencies)
-        ),
-    };
-    let node_dependencies = match extract_tuple(node_dependencies) {
-        Some(tuple) => {
-            let mut node_dependencies = Vec::new();
-            for type_ in &tuple.elems {
-                let mut type_ = extract_type_path(type_).unwrap_or_else(|| {
-                    panic!(
-                        "NodeDependencies must be a tuple of type paths, found {}",
-                        quote!(#type_)
-                    )
-                });
-                if type_ == self_path {
-                    type_ = this_type.clone();
-                }
-                combined_dependencies.insert(type_.clone());
-                node_dependencies.push(type_);
-            }
-            node_dependencies
-        }
-        _ => panic!(
-            "NodeDependencies must be a tuple, found {}",
-            quote!(#node_dependencies)
-        ),
-    };
-    combined_dependencies.insert(this_type.clone());
-
-    let combined_dependencies: Vec<_> = combined_dependencies.into_iter().collect();
-    let parent_dependancies_idxes: Vec<_> = parent_dependencies
-        .iter()
-        .filter_map(|ident| combined_dependencies.iter().position(|i| i == ident))
-        .collect();
-    let child_dependencies_idxes: Vec<_> = child_dependencies
-        .iter()
-        .filter_map(|ident| combined_dependencies.iter().position(|i| i == ident))
-        .collect();
-    let node_dependencies_idxes: Vec<_> = node_dependencies
-        .iter()
-        .filter_map(|ident| combined_dependencies.iter().position(|i| i == ident))
-        .collect();
-    let this_type_idx = combined_dependencies
-        .iter()
-        .enumerate()
-        .find_map(|(i, ident)| (this_type == *ident).then_some(i))
-        .unwrap();
-    let this_view = format_ident!("__data{}", this_type_idx);
-
-    let combined_dependencies_quote = combined_dependencies.iter().map(|ident| {
-        if ident == &this_type {
-            quote! {shipyard::ViewMut<#ident>}
-        } else {
-            quote! {shipyard::View<#ident>}
-        }
-    });
-    let combined_dependencies_quote = quote!((#(#combined_dependencies_quote,)*));
-
-    let ItemImpl {
-        attrs,
-        defaultness,
-        unsafety,
-        impl_token,
-        generics,
-        trait_,
-        self_ty,
-        items,
-        ..
-    } = impl_block;
-    let for_ = trait_.as_ref().map(|t| t.2);
-    let trait_ = trait_.map(|t| t.1);
-
-    let split_views: Vec<_> = (0..combined_dependencies.len())
-        .map(|i| {
-            let ident = format_ident!("__data{}", i);
-            if i == this_type_idx {
-                quote! {mut #ident}
-            } else {
-                quote! {#ident}
-            }
-        })
-        .collect();
-
-    let node_view = node_dependencies_idxes
-        .iter()
-        .map(|i| format_ident!("__data{}", i))
-        .collect::<Vec<_>>();
-    let get_node_view = {
-        if node_dependencies.is_empty() {
-            quote! {
-                let raw_node = ();
-            }
-        } else {
-            let temps = (0..node_dependencies.len())
-                .map(|i| format_ident!("__temp{}", i))
-                .collect::<Vec<_>>();
-            quote! {
-                let raw_node: (#(*const #node_dependencies,)*) = {
-                    let (#(#temps,)*) = (#(&#node_view,)*).get(id).unwrap_or_else(|err| panic!("Failed to get node view {:?}", err));
-                    (#(#temps as *const _,)*)
-                };
-            }
-        }
-    };
-    let deref_node_view = {
-        if node_dependencies.is_empty() {
-            quote! {
-                let node = raw_node;
-            }
-        } else {
-            let indexes = (0..node_dependencies.len()).map(syn::Index::from);
-            quote! {
-                let node = unsafe { (#(dioxus_native_core::prelude::DependancyView::new(&*raw_node.#indexes),)*) };
-            }
-        }
-    };
-
-    let parent_view = parent_dependancies_idxes
-        .iter()
-        .map(|i| format_ident!("__data{}", i))
-        .collect::<Vec<_>>();
-    let get_parent_view = {
-        if parent_dependencies.is_empty() {
-            quote! {
-                let raw_parent = tree.parent_id_advanced(id, Self::TRAVERSE_SHADOW_DOM).map(|_| ());
-            }
-        } else {
-            let temps = (0..parent_dependencies.len())
-                .map(|i| format_ident!("__temp{}", i))
-                .collect::<Vec<_>>();
-            quote! {
-                let raw_parent = tree.parent_id_advanced(id, Self::TRAVERSE_SHADOW_DOM).and_then(|parent_id| {
-                    let raw_parent: Option<(#(*const #parent_dependencies,)*)> = (#(&#parent_view,)*).get(parent_id).ok().map(|c| {
-                        let (#(#temps,)*) = c;
-                        (#(#temps as *const _,)*)
-                    });
-                    raw_parent
-                });
-            }
-        }
-    };
-    let deref_parent_view = {
-        if parent_dependencies.is_empty() {
-            quote! {
-                let parent = raw_parent;
-            }
-        } else {
-            let indexes = (0..parent_dependencies.len()).map(syn::Index::from);
-            quote! {
-                let parent = unsafe { raw_parent.map(|raw_parent| (#(dioxus_native_core::prelude::DependancyView::new(&*raw_parent.#indexes),)*)) };
-            }
-        }
-    };
-
-    let child_view = child_dependencies_idxes
-        .iter()
-        .map(|i| format_ident!("__data{}", i))
-        .collect::<Vec<_>>();
-    let get_child_view = {
-        if child_dependencies.is_empty() {
-            quote! {
-                let raw_children: Vec<_> = tree.children_ids_advanced(id, Self::TRAVERSE_SHADOW_DOM).into_iter().map(|_| ()).collect();
-            }
-        } else {
-            let temps = (0..child_dependencies.len())
-                .map(|i| format_ident!("__temp{}", i))
-                .collect::<Vec<_>>();
-            quote! {
-                let raw_children: Vec<_> = tree.children_ids_advanced(id, Self::TRAVERSE_SHADOW_DOM).into_iter().filter_map(|id| {
-                    let raw_children: Option<(#(*const #child_dependencies,)*)> = (#(&#child_view,)*).get(id).ok().map(|c| {
-                        let (#(#temps,)*) = c;
-                        (#(#temps as *const _,)*)
-                    });
-                    raw_children
-                }).collect();
-            }
-        }
-    };
-    let deref_child_view = {
-        if child_dependencies.is_empty() {
-            quote! {
-                let children = raw_children;
-            }
-        } else {
-            let indexes = (0..child_dependencies.len()).map(syn::Index::from);
-            quote! {
-                let children = unsafe { raw_children.iter().map(|raw_children| (#(dioxus_native_core::prelude::DependancyView::new(&*raw_children.#indexes),)*)).collect::<Vec<_>>() };
-            }
-        }
-    };
-
-    let trait_generics = trait_
-        .as_ref()
-        .unwrap()
-        .segments
-        .last()
-        .unwrap()
-        .arguments
-        .clone();
-
-    // if a create function is defined, we don't generate one
-    // otherwise we generate a default one that uses the update function and the default constructor
-    let create_fn = (!has_create_fn).then(|| {
-        quote! {
-            fn create<'a>(
-                node_view: dioxus_native_core::prelude::NodeView # trait_generics,
-                node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-                parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-                children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-                context: &dioxus_native_core::prelude::SendAnyMap,
-            ) -> Self {
-                let mut myself = Self::default();
-                myself.update(node_view, node, parent, children, context);
-                myself
-            }
-        }
-    });
-
-    quote!(
-        #(#attrs)*
-        #defaultness #unsafety #impl_token #generics #trait_ #for_ #self_ty {
-            #create_fn
-
-            #(#items)*
-
-            fn workload_system(type_id: std::any::TypeId, dependants: std::sync::Arc<dioxus_native_core::prelude::Dependants>, pass_direction: dioxus_native_core::prelude::PassDirection) -> dioxus_native_core::exports::shipyard::WorkloadSystem {
-                use dioxus_native_core::exports::shipyard::{IntoWorkloadSystem, Get, AddComponent};
-                use dioxus_native_core::tree::TreeRef;
-                use dioxus_native_core::prelude::{NodeType, NodeView};
-
-                let node_mask = Self::NODE_MASK.build();
-
-                (move |data: #combined_dependencies_quote, run_view: dioxus_native_core::prelude::RunPassView #trait_generics| {
-                    let (#(#split_views,)*) = data;
-                    let tree = run_view.tree.clone();
-                    let node_types = run_view.node_type.clone();
-                    dioxus_native_core::prelude::run_pass(type_id, dependants.clone(), pass_direction, run_view, |id, context| {
-                        let node_data: &NodeType<_> = node_types.get(id).unwrap_or_else(|err| panic!("Failed to get node type {:?}", err));
-                        // get all of the states from the tree view
-                        // Safety: No node has itself as a parent or child.
-                        let raw_myself: Option<*mut Self> = (&mut #this_view).get(id).ok().map(|c| c as *mut _);
-                        #get_node_view
-                        #get_parent_view
-                        #get_child_view
-
-                        let myself: Option<&mut Self> = unsafe { raw_myself.map(|val| &mut *val) };
-                        #deref_node_view
-                        #deref_parent_view
-                        #deref_child_view
-
-                        let view = NodeView::new(id, node_data, &node_mask);
-                        if let Some(myself) = myself {
-                            myself
-                                .update(view, node, parent, children, context)
-                        }
-                        else {
-                            (&mut #this_view).add_component_unchecked(
-                                id,
-                                Self::create(view, node, parent, children, context));
-                            true
-                        }
-                    })
-                }).into_workload_system().unwrap()
-            }
-        }
-    )
-    .into()
-}
-
-fn extract_tuple(ty: &Type) -> Option<TypeTuple> {
-    match ty {
-        Type::Tuple(tuple) => Some(tuple.clone()),
-        Type::Group(group) => extract_tuple(&group.elem),
-        _ => None,
-    }
-}
-
-fn extract_type_path(ty: &Type) -> Option<TypePath> {
-    match ty {
-        Type::Path(path) => Some(path.clone()),
-        Type::Group(group) => extract_type_path(&group.elem),
-        _ => None,
-    }
-}
diff --git a/packages/native-core/.gitignore b/packages/native-core/.gitignore
deleted file mode 100644
index 96ef6c0b9..000000000
--- a/packages/native-core/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-/target
-Cargo.lock
diff --git a/packages/native-core/Cargo.toml b/packages/native-core/Cargo.toml
deleted file mode 100644
index db75fcfd8..000000000
--- a/packages/native-core/Cargo.toml
+++ /dev/null
@@ -1,39 +0,0 @@
-[package]
-name = "dioxus-native-core"
-version = { workspace = true }
-edition = "2021"
-license = "MIT OR Apache-2.0"
-repository = "https://github.com/DioxusLabs/dioxus/"
-homepage = "https://dioxuslabs.com"
-description = "Build natively rendered apps with Dioxus"
-keywords = ["dom", "ui", "gui", "react"]
-authors = ["Jonathan Kelley", "Evan Almloff"]
-
-[dependencies]
-dioxus-core = { workspace = true, optional = true }
-
-keyboard-types = "0.7"
-smallvec = "1.6"
-rustc-hash = { workspace = true }
-anymap = "1.0.0-beta.2"
-parking_lot = { version = "0.12.1", features = ["send_guard"] }
-dashmap = "5.4.0"
-
-# for parsing attributes
-taffy = { version = "0.3.12", optional = true }
-lightningcss = { version = "1.0.0-alpha.39", optional = true }
-
-shipyard = { version = "0.6.2", features = ["proc", "std"], default-features = false }
-
-[dev-dependencies]
-rand = "0.8.5"
-dioxus = { workspace = true }
-tokio = { workspace = true, features = ["full"] }
-dioxus-native-core = { workspace = true, features = ["dioxus"] }
-dioxus-native-core-macro = { workspace = true }
-
-[features]
-default = []
-layout-attributes = ["dep:taffy", "dep:lightningcss"]
-dioxus = ["dioxus-core"]
-parallel = ["shipyard/parallel"]
diff --git a/packages/native-core/README.md b/packages/native-core/README.md
deleted file mode 100644
index c467d37de..000000000
--- a/packages/native-core/README.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Dioxus Native Core
-
-[![Crates.io][crates-badge]][crates-url]
-[![MIT licensed][mit-badge]][mit-url]
-[![Build Status][actions-badge]][actions-url]
-[![Discord chat][discord-badge]][discord-url]
-
-[crates-badge]: https://img.shields.io/crates/v/dioxus-native-core.svg
-[crates-url]: https://crates.io/crates/dioxus-native-core
-
-[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg
-[mit-url]: https://github.com/dioxuslabs/dioxus/blob/master/LICENSE
-
-[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg
-[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster
-
-[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square
-[discord-url]: https://discord.gg/XgGxMSkvUM
-
-[Website](https://dioxuslabs.com) |
-[Guides](https://dioxuslabs.com/guide/) |
-[API Docs](https://docs.rs/dioxus-native-core/latest/dioxus_native_core) |
-[Chat](https://discord.gg/XgGxMSkvUM)
-
-
-## Overview
-
-`dioxus-native-core` provides several helpful utilities for lazily resolving computed values of the Dioxus VirtualDom to be used in conjunction with a native rendering engine.
-
-The main "value-add" of this crate over implementing your native tree is that this tree is incrementally recomputed using the Dioxus VirtualDom's edit stream. Only parts of the tree that rely on each other will be redrawn - all else will be ignored.
-
-
-## Contributing
-
-- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).
-- Join the discord and ask questions!
-
-## License
-This project is licensed under the [MIT license].
-
-[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT
-
-Unless you explicitly state otherwise, any contribution intentionally submitted
-for inclusion in Dioxus by you shall be licensed as MIT without any additional
-terms or conditions.
diff --git a/packages/native-core/_tests/called_minimally_on_build.rs b/packages/native-core/_tests/called_minimally_on_build.rs
deleted file mode 100644
index af0ca7a7c..000000000
--- a/packages/native-core/_tests/called_minimally_on_build.rs
+++ /dev/null
@@ -1,237 +0,0 @@
-use dioxus::prelude::*;
-use dioxus_native_core::prelude::*;
-use dioxus_native_core_macro::partial_derive_state;
-use shipyard::Component;
-
-macro_rules! dep {
-    ( child( $name:ty, $dep:ty ) ) => {
-        #[partial_derive_state]
-        impl State for $name {
-            type ParentDependencies = ();
-            type ChildDependencies = $dep;
-            type NodeDependencies = ();
-
-            const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::ALL;
-
-            fn update<'a>(
-                &mut self,
-                _: NodeView,
-                _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-                _: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-                _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-                _: &SendAnyMap,
-            ) -> bool {
-                self.0 += 1;
-                true
-            }
-
-            fn create<'a>(
-                node_view: NodeView<()>,
-                node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-                parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-                children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-                context: &SendAnyMap,
-            ) -> Self {
-                let mut myself = Self::default();
-                myself.update(node_view, node, parent, children, context);
-                myself
-            }
-        }
-    };
-
-    ( parent( $name:ty, $dep:ty ) ) => {
-        #[partial_derive_state]
-        impl State for $name {
-            type ParentDependencies = $dep;
-            type ChildDependencies = ();
-            type NodeDependencies = ();
-
-            const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::ALL;
-
-            fn update<'a>(
-                &mut self,
-                _: NodeView,
-                _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-                _: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-                _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-                _: &SendAnyMap,
-            ) -> bool {
-                self.0 += 1;
-                true
-            }
-
-            fn create<'a>(
-                node_view: NodeView<()>,
-                node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-                parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-                children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-                context: &SendAnyMap,
-            ) -> Self {
-                let mut myself = Self::default();
-                myself.update(node_view, node, parent, children, context);
-                myself
-            }
-        }
-    };
-
-    ( node( $name:ty, $dep:ty ) ) => {
-        #[partial_derive_state]
-        impl State for $name {
-            type ParentDependencies = $dep;
-            type ChildDependencies = ();
-            type NodeDependencies = ();
-
-            const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::ALL;
-
-            fn update<'a>(
-                &mut self,
-                _: NodeView,
-                _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-                _: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-                _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-                _: &SendAnyMap,
-            ) -> bool {
-                self.0 += 1;
-                true
-            }
-
-            fn create<'a>(
-                node_view: NodeView<()>,
-                node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-                parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-                children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-                context: &SendAnyMap,
-            ) -> Self {
-                let mut myself = Self::default();
-                myself.update(node_view, node, parent, children, context);
-                myself
-            }
-        }
-    };
-}
-
-macro_rules! test_state{
-    ( state: ( $( $state:ty ),* ) ) => {
-        #[test]
-        fn state_reduce_initally_called_minimally() {
-            #[allow(non_snake_case)]
-            fn Base() -> Element {
-                rsx!{
-                    div {
-                        div{
-                            div{
-                                p{}
-                            }
-                            p{
-                                "hello"
-                            }
-                            div{
-                                h1{}
-                            }
-                            p{
-                                "world"
-                            }
-                        }
-                    }
-                }
-            }
-
-            let mut vdom = VirtualDom::new(Base);
-
-            let mutations = vdom.rebuild();
-
-            let mut dom: RealDom = RealDom::new([$( <$state>::to_type_erased() ),*]);
-            let mut dioxus_state = DioxusState::create(&mut dom);
-
-            dioxus_state.apply_mutations(&mut dom, mutations);
-            dom.update_state(SendAnyMap::new());
-
-            dom.traverse_depth_first_advanced(false, |n| {
-                $(
-                    assert_eq!(n.get::<$state>().unwrap().0, 1);
-                )*
-            });
-        }
-    }
-}
-
-mod node_depends_on_child_and_parent {
-    use super::*;
-    #[derive(Debug, Clone, Default, PartialEq, Component)]
-    struct Node(i32);
-    dep!(node(Node, (Child, Parent)));
-
-    #[derive(Debug, Clone, Default, PartialEq, Component)]
-    struct Child(i32);
-    dep!(child(Child, (Child,)));
-
-    #[derive(Debug, Clone, Default, PartialEq, Component)]
-    struct Parent(i32);
-    dep!(parent(Parent, (Parent,)));
-
-    test_state!(state: (Child, Node, Parent));
-}
-
-mod child_depends_on_node_that_depends_on_parent {
-    use super::*;
-    #[derive(Debug, Clone, Default, PartialEq, Component)]
-    struct Node(i32);
-    dep!(node(Node, (Parent,)));
-
-    #[derive(Debug, Clone, Default, PartialEq, Component)]
-    struct Child(i32);
-    dep!(child(Child, (Node,)));
-
-    #[derive(Debug, Clone, Default, PartialEq, Component)]
-    struct Parent(i32);
-    dep!(parent(Parent, (Parent,)));
-
-    test_state!(state: (Child, Node, Parent));
-}
-
-mod parent_depends_on_node_that_depends_on_child {
-    use super::*;
-    #[derive(Debug, Clone, Default, PartialEq, Component)]
-    struct Node(i32);
-    dep!(node(Node, (Child,)));
-
-    #[derive(Debug, Clone, Default, PartialEq, Component)]
-    struct Child(i32);
-    dep!(child(Child, (Child,)));
-
-    #[derive(Debug, Clone, Default, PartialEq, Component)]
-    struct Parent(i32);
-    dep!(parent(Parent, (Node,)));
-
-    test_state!(state: (Child, Node, Parent));
-}
-
-mod node_depends_on_other_node_state {
-    use super::*;
-    #[derive(Debug, Clone, Default, PartialEq, Component)]
-    struct Node1(i32);
-    dep!(node(Node1, (Node2,)));
-
-    #[derive(Debug, Clone, Default, PartialEq, Component)]
-    struct Node2(i32);
-    dep!(node(Node2, ()));
-
-    test_state!(state: (Node1, Node2));
-}
-
-mod node_child_and_parent_state_depends_on_self {
-    use super::*;
-    #[derive(Debug, Clone, Default, PartialEq, Component)]
-    struct Node(i32);
-    dep!(node(Node, ()));
-
-    #[derive(Debug, Clone, Default, PartialEq, Component)]
-    struct Child(i32);
-    dep!(child(Child, (Child,)));
-
-    #[derive(Debug, Clone, Default, PartialEq, Component)]
-    struct Parent(i32);
-    dep!(parent(Parent, (Parent,)));
-
-    test_state!(state: (Child, Node, Parent));
-}
diff --git a/packages/native-core/_tests/custom_element.rs b/packages/native-core/_tests/custom_element.rs
deleted file mode 100644
index 1aaab3953..000000000
--- a/packages/native-core/_tests/custom_element.rs
+++ /dev/null
@@ -1,389 +0,0 @@
-use dioxus::prelude::*;
-use dioxus_native_core::{custom_element::CustomElement, prelude::*};
-use dioxus_native_core_macro::partial_derive_state;
-use shipyard::Component;
-
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Default, Component)]
-pub struct ColorState {
-    color: usize,
-}
-
-#[partial_derive_state]
-impl State for ColorState {
-    type ParentDependencies = (Self,);
-    type ChildDependencies = ();
-    type NodeDependencies = ();
-
-    // The color state should not be effected by the shadow dom
-    const TRAVERSE_SHADOW_DOM: bool = false;
-
-    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
-        .with_attrs(AttributeMaskBuilder::Some(&["color"]))
-        .with_element();
-
-    fn update<'a>(
-        &mut self,
-        view: NodeView,
-        _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: &SendAnyMap,
-    ) -> bool {
-        if let Some(size) = view
-            .attributes()
-            .into_iter()
-            .flatten()
-            .find(|attr| attr.attribute.name == "color")
-        {
-            self.color = size
-                .value
-                .as_float()
-                .or_else(|| size.value.as_int().map(|i| i as f64))
-                .or_else(|| size.value.as_text().and_then(|i| i.parse().ok()))
-                .unwrap_or(0.0) as usize;
-        } else if let Some((parent,)) = parent {
-            *self = *parent;
-        }
-        true
-    }
-
-    fn create<'a>(
-        node_view: NodeView<()>,
-        node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        context: &SendAnyMap,
-    ) -> Self {
-        let mut myself = Self::default();
-        myself.update(node_view, node, parent, children, context);
-        myself
-    }
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Default, Component)]
-pub struct LayoutState {
-    size: usize,
-}
-
-#[partial_derive_state]
-impl State for LayoutState {
-    type ParentDependencies = (Self,);
-    type ChildDependencies = ();
-    type NodeDependencies = ();
-
-    // The layout state should be effected by the shadow dom
-    const TRAVERSE_SHADOW_DOM: bool = true;
-
-    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
-        .with_attrs(AttributeMaskBuilder::Some(&["size"]))
-        .with_element();
-
-    fn update<'a>(
-        &mut self,
-        view: NodeView,
-        _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: &SendAnyMap,
-    ) -> bool {
-        if let Some(size) = view
-            .attributes()
-            .into_iter()
-            .flatten()
-            .find(|attr| attr.attribute.name == "size")
-        {
-            self.size = size
-                .value
-                .as_float()
-                .or_else(|| size.value.as_int().map(|i| i as f64))
-                .or_else(|| size.value.as_text().and_then(|i| i.parse().ok()))
-                .unwrap_or(0.0) as usize;
-        } else if let Some((parent,)) = parent {
-            if parent.size > 0 {
-                self.size = parent.size - 1;
-            }
-        }
-        true
-    }
-
-    fn create<'a>(
-        node_view: NodeView<()>,
-        node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        context: &SendAnyMap,
-    ) -> Self {
-        let mut myself = Self::default();
-        myself.update(node_view, node, parent, children, context);
-        myself
-    }
-}
-
-mod dioxus_elements {
-    macro_rules! builder_constructors {
-        (
-            $(
-                $(#[$attr:meta])*
-                $name:ident {
-                    $(
-                        $(#[$attr_method:meta])*
-                        $fil:ident: $vil:ident,
-                    )*
-                };
-            )*
-        ) => {
-            $(
-                #[allow(non_camel_case_types)]
-                $(#[$attr])*
-                pub struct $name;
-
-                #[allow(non_upper_case_globals, unused)]
-                impl $name {
-                    pub const TAG_NAME: &'static str = stringify!($name);
-                    pub const NAME_SPACE: Option<&'static str> = None;
-
-                    $(
-                        pub const $fil: (&'static str, Option<&'static str>, bool) = (stringify!($fil), None, false);
-                    )*
-                }
-
-                impl GlobalAttributes for $name {}
-            )*
-        }
-    }
-
-    pub trait GlobalAttributes {}
-
-    pub trait SvgAttributes {}
-
-    builder_constructors! {
-        customelementslot {
-            size: attr,
-            color: attr,
-        };
-        customelementnoslot {
-            size: attr,
-            color: attr,
-        };
-        testing132 {
-            color: attr,
-        };
-    }
-}
-
-struct CustomElementWithSlot {
-    root: NodeId,
-    slot: NodeId,
-}
-
-impl CustomElement for CustomElementWithSlot {
-    const NAME: &'static str = "customelementslot";
-
-    fn create(mut node: NodeMut<()>) -> Self {
-        let dom = node.real_dom_mut();
-        let child = dom.create_node(ElementNode {
-            tag: "div".into(),
-            namespace: None,
-            attributes: Default::default(),
-            listeners: Default::default(),
-        });
-        let slot_id = child.id();
-        let mut root = dom.create_node(ElementNode {
-            tag: "div".into(),
-            namespace: None,
-            attributes: Default::default(),
-            listeners: Default::default(),
-        });
-        root.add_child(slot_id);
-
-        Self {
-            root: root.id(),
-            slot: slot_id,
-        }
-    }
-
-    fn slot(&self) -> Option<NodeId> {
-        Some(self.slot)
-    }
-
-    fn roots(&self) -> Vec<NodeId> {
-        vec![self.root]
-    }
-
-    fn attributes_changed(
-        &mut self,
-        node: NodeMut<()>,
-        attributes: &dioxus_native_core::node_ref::AttributeMask,
-    ) {
-        println!("attributes_changed");
-        println!("{:?}", attributes);
-        println!("{:?}: {:#?}", node.id(), &*node.node_type());
-    }
-}
-
-struct CustomElementWithNoSlot {
-    root: NodeId,
-}
-
-impl CustomElement for CustomElementWithNoSlot {
-    const NAME: &'static str = "customelementnoslot";
-
-    fn create(mut node: NodeMut<()>) -> Self {
-        let dom = node.real_dom_mut();
-        let root = dom.create_node(ElementNode {
-            tag: "div".into(),
-            namespace: None,
-            attributes: Default::default(),
-            listeners: Default::default(),
-        });
-        Self { root: root.id() }
-    }
-
-    fn roots(&self) -> Vec<NodeId> {
-        vec![self.root]
-    }
-
-    fn attributes_changed(
-        &mut self,
-        node: NodeMut<()>,
-        attributes: &dioxus_native_core::node_ref::AttributeMask,
-    ) {
-        println!("attributes_changed");
-        println!("{:?}", attributes);
-        println!("{:?}: {:#?}", node.id(), &*node.node_type());
-    }
-}
-
-#[test]
-fn custom_elements_work() {
-    fn app() -> Element {
-        let count = use_signal(|| 0);
-
-        use_future(|count| async move {
-            count.with_mut(|count| *count += 1);
-        });
-
-        rsx! {
-            customelementslot {
-                size: "{count}",
-                color: "1",
-                customelementslot {
-                    testing132 {}
-                }
-            }
-        }
-    }
-
-    let rt = tokio::runtime::Builder::new_current_thread()
-        .enable_time()
-        .build()
-        .unwrap();
-
-    rt.block_on(async {
-        let mut rdom = RealDom::new([LayoutState::to_type_erased(), ColorState::to_type_erased()]);
-        rdom.register_custom_element::<CustomElementWithSlot>();
-        let mut dioxus_state = DioxusState::create(&mut rdom);
-        let mut dom = VirtualDom::new(app);
-
-        let mutations = dom.rebuild();
-        dioxus_state.apply_mutations(&mut rdom, mutations);
-
-        let ctx = SendAnyMap::new();
-        rdom.update_state(ctx);
-
-        for i in 0..10usize {
-            dom.wait_for_work().await;
-
-            let mutations = dom.render_immediate();
-            dioxus_state.apply_mutations(&mut rdom, mutations);
-
-            let ctx = SendAnyMap::new();
-            rdom.update_state(ctx);
-
-            // render...
-            rdom.traverse_depth_first_advanced(true, |node| {
-                let node_type = &*node.node_type();
-                let height = node.height() as usize;
-                let indent = " ".repeat(height);
-                let color = *node.get::<ColorState>().unwrap();
-                let size = *node.get::<LayoutState>().unwrap();
-                let id = node.id();
-                println!("{indent}{id:?} {color:?} {size:?} {node_type:?}");
-                if let NodeType::Element(el) = node_type {
-                    match el.tag.as_str() {
-                        // the color should bubble up from customelementslot
-                        "testing132" | "customelementslot" => {
-                            assert_eq!(color.color, 1);
-                        }
-                        // the color of the light dom should not effect the color of the shadow dom, so the color of divs in the shadow dom should be 0
-                        "div" => {
-                            assert_eq!(color.color, 0);
-                        }
-                        _ => {}
-                    }
-                    if el.tag != "Root" {
-                        assert_eq!(size.size, (i + 2).saturating_sub(height));
-                    }
-                }
-            });
-        }
-    });
-}
-
-#[test]
-#[should_panic]
-fn slotless_custom_element_cant_have_children() {
-    fn app() -> Element {
-        rsx! {
-            customelementnoslot {
-                testing132 {}
-            }
-        }
-    }
-
-    let rt = tokio::runtime::Builder::new_current_thread()
-        .enable_time()
-        .build()
-        .unwrap();
-
-    rt.block_on(async {
-        let mut rdom = RealDom::new([LayoutState::to_type_erased(), ColorState::to_type_erased()]);
-        rdom.register_custom_element::<CustomElementWithNoSlot>();
-        let mut dioxus_state = DioxusState::create(&mut rdom);
-        let mut dom = VirtualDom::new(app);
-
-        let mutations = dom.rebuild();
-        dioxus_state.apply_mutations(&mut rdom, mutations);
-
-        let ctx = SendAnyMap::new();
-        rdom.update_state(ctx);
-    });
-}
-
-#[test]
-fn slotless_custom_element() {
-    fn app() -> Element {
-        rsx! {
-            customelementnoslot {
-            }
-        }
-    }
-
-    let rt = tokio::runtime::Builder::new_current_thread()
-        .enable_time()
-        .build()
-        .unwrap();
-
-    rt.block_on(async {
-        let mut rdom = RealDom::new([LayoutState::to_type_erased(), ColorState::to_type_erased()]);
-        rdom.register_custom_element::<CustomElementWithNoSlot>();
-        let mut dioxus_state = DioxusState::create(&mut rdom);
-        let mut dom = VirtualDom::new(app);
-
-        let mutations = dom.rebuild();
-        dioxus_state.apply_mutations(&mut rdom, mutations);
-
-        let ctx = SendAnyMap::new();
-        rdom.update_state(ctx);
-    });
-}
diff --git a/packages/native-core/_tests/fuzzing.rs b/packages/native-core/_tests/fuzzing.rs
deleted file mode 100644
index cd8e97be8..000000000
--- a/packages/native-core/_tests/fuzzing.rs
+++ /dev/null
@@ -1,386 +0,0 @@
-use std::cell::Cell;
-
-use dioxus::prelude::Props;
-use dioxus_core::*;
-use dioxus_native_core::prelude::*;
-use dioxus_native_core_macro::partial_derive_state;
-use shipyard::Component;
-
-fn random_ns() -> Option<&'static str> {
-    let namespace = rand::random::<u8>() % 2;
-    match namespace {
-        0 => None,
-        1 => Some(Box::leak(
-            format!("ns{}", rand::random::<usize>()).into_boxed_str(),
-        )),
-        _ => unreachable!(),
-    }
-}
-
-fn create_random_attribute(attr_idx: &mut usize) -> TemplateAttribute<'static> {
-    match rand::random::<u8>() % 2 {
-        0 => TemplateAttribute::Static {
-            name: Box::leak(format!("attr{}", rand::random::<usize>()).into_boxed_str()),
-            value: Box::leak(format!("value{}", rand::random::<usize>()).into_boxed_str()),
-            namespace: random_ns(),
-        },
-        1 => TemplateAttribute::Dynamic {
-            id: {
-                let old_idx = *attr_idx;
-                *attr_idx += 1;
-                old_idx
-            },
-        },
-        _ => unreachable!(),
-    }
-}
-
-fn create_random_template_node(
-    dynamic_node_types: &mut Vec<DynamicNodeType>,
-    template_idx: &mut usize,
-    attr_idx: &mut usize,
-    depth: usize,
-) -> TemplateNode {
-    match rand::random::<u8>() % 4 {
-        0 => {
-            let attrs = {
-                let attrs: Vec<_> = (0..(rand::random::<usize>() % 10))
-                    .map(|_| create_random_attribute(attr_idx))
-                    .collect();
-                Box::leak(attrs.into_boxed_slice())
-            };
-            TemplateNode::Element {
-                tag: Box::leak(format!("tag{}", rand::random::<usize>()).into_boxed_str()),
-                namespace: random_ns(),
-                attrs,
-                children: {
-                    if depth > 4 {
-                        &[]
-                    } else {
-                        let children: Vec<_> = (0..(rand::random::<usize>() % 3))
-                            .map(|_| {
-                                create_random_template_node(
-                                    dynamic_node_types,
-                                    template_idx,
-                                    attr_idx,
-                                    depth + 1,
-                                )
-                            })
-                            .collect();
-                        Box::leak(children.into_boxed_slice())
-                    }
-                },
-            }
-        }
-        1 => TemplateNode::Text {
-            text: Box::leak(format!("{}", rand::random::<usize>()).into_boxed_str()),
-        },
-        2 => TemplateNode::DynamicText {
-            id: {
-                let old_idx = *template_idx;
-                *template_idx += 1;
-                dynamic_node_types.push(DynamicNodeType::Text);
-                old_idx
-            },
-        },
-        3 => TemplateNode::Dynamic {
-            id: {
-                let old_idx = *template_idx;
-                *template_idx += 1;
-                dynamic_node_types.push(DynamicNodeType::Other);
-                old_idx
-            },
-        },
-        _ => unreachable!(),
-    }
-}
-
-fn generate_paths(
-    node: &TemplateNode,
-    current_path: &[u8],
-    node_paths: &mut Vec<Vec<u8>>,
-    attr_paths: &mut Vec<Vec<u8>>,
-) {
-    match node {
-        TemplateNode::Element {
-            children, attrs, ..
-        } => {
-            for attr in *attrs {
-                match attr {
-                    TemplateAttribute::Static { .. } => {}
-                    TemplateAttribute::Dynamic { .. } => {
-                        attr_paths.push(current_path.to_vec());
-                    }
-                }
-            }
-            for (i, child) in children.iter().enumerate() {
-                let mut current_path = current_path.to_vec();
-                current_path.push(i as u8);
-                generate_paths(child, &current_path, node_paths, attr_paths);
-            }
-        }
-        TemplateNode::Text { .. } => {}
-        TemplateNode::DynamicText { .. } => {
-            node_paths.push(current_path.to_vec());
-        }
-        TemplateNode::Dynamic { .. } => {
-            node_paths.push(current_path.to_vec());
-        }
-    }
-}
-
-enum DynamicNodeType {
-    Text,
-    Other,
-}
-
-fn create_random_template(name: &'static str) -> (Template, Vec<DynamicNodeType>) {
-    let mut dynamic_node_type = Vec::new();
-    let mut template_idx = 0;
-    let mut attr_idx = 0;
-    let roots = (0..(1 + rand::random::<usize>() % 5))
-        .map(|_| {
-            create_random_template_node(&mut dynamic_node_type, &mut template_idx, &mut attr_idx, 0)
-        })
-        .collect::<Vec<_>>();
-    assert!(!roots.is_empty());
-    let roots = Box::leak(roots.into_boxed_slice());
-    let mut node_paths = Vec::new();
-    let mut attr_paths = Vec::new();
-    for (i, root) in roots.iter().enumerate() {
-        generate_paths(root, &[i as u8], &mut node_paths, &mut attr_paths);
-    }
-    let node_paths = Box::leak(
-        node_paths
-            .into_iter()
-            .map(|v| &*Box::leak(v.into_boxed_slice()))
-            .collect::<Vec<_>>()
-            .into_boxed_slice(),
-    );
-    let attr_paths = Box::leak(
-        attr_paths
-            .into_iter()
-            .map(|v| &*Box::leak(v.into_boxed_slice()))
-            .collect::<Vec<_>>()
-            .into_boxed_slice(),
-    );
-    (
-        Template {
-            name,
-            roots,
-            node_paths,
-            attr_paths,
-        },
-        dynamic_node_type,
-    )
-}
-
-fn create_random_dynamic_node(depth: usize) -> DynamicNode {
-    let range = if depth > 3 { 1 } else { 3 };
-    match rand::random::<u8>() % range {
-        0 => DynamicNode::Placeholder(Default::default()),
-        1 => cx.make_node((0..(rand::random::<u8>() % 5)).map(|_| {
-            cx.vnode(
-                None.into(),
-                Default::default(),
-                Cell::new(Template {
-                    name: concat!(file!(), ":", line!(), ":", column!(), ":0"),
-                    roots: &[TemplateNode::Dynamic { id: 0 }],
-                    node_paths: &[&[0]],
-                    attr_paths: &[],
-                }),
-                dioxus::dioxus_core::exports::bumpalo::collections::Vec::new_in(cx.bump()).into(),
-                cx.bump().alloc([cx.component(
-                    create_random_element,
-                    DepthProps { depth, root: false },
-                    "create_random_element",
-                )]),
-                &[],
-            )
-        })),
-        2 => cx.component(
-            create_random_element,
-            DepthProps { depth, root: false },
-            "create_random_element",
-        ),
-        _ => unreachable!(),
-    }
-}
-
-fn create_random_dynamic_attr() -> Attribute {
-    let value = match rand::random::<u8>() % 6 {
-        0 => AttributeValue::Text(Box::leak(
-            format!("{}", rand::random::<usize>()).into_boxed_str(),
-        )),
-        1 => AttributeValue::Float(rand::random()),
-        2 => AttributeValue::Int(rand::random()),
-        3 => AttributeValue::Bool(rand::random()),
-        4 => cx.any_value(rand::random::<usize>()),
-        5 => AttributeValue::None,
-        _ => unreachable!(),
-    };
-
-    Attribute::new(
-        Box::leak(format!("attr{}", rand::random::<usize>()).into_boxed_str()),
-        value,
-        random_ns(),
-        rand::random(),
-    )
-}
-
-static mut TEMPLATE_COUNT: usize = 0;
-
-#[derive(PartialEq, Props, Component)]
-struct DepthProps {
-    depth: usize,
-    root: bool,
-}
-
-fn create_random_element(cx: Scope<DepthProps>) -> Element {
-    cx.needs_update();
-    let range = if cx.props.root { 2 } else { 3 };
-    let node = match rand::random::<usize>() % range {
-        0 | 1 => {
-            let (template, dynamic_node_types) = create_random_template(Box::leak(
-                format!(
-                    "{}{}",
-                    concat!(file!(), ":", line!(), ":", column!(), ":"),
-                    {
-                        unsafe {
-                            let old = TEMPLATE_COUNT;
-                            TEMPLATE_COUNT += 1;
-                            old
-                        }
-                    }
-                )
-                .into_boxed_str(),
-            ));
-            println!("{template:#?}");
-            let node = cx.vnode(
-                None.into(),
-                None,
-                Cell::new(template),
-                dioxus::dioxus_core::exports::bumpalo::collections::Vec::new_in(cx.bump()).into(),
-                {
-                    let dynamic_nodes: Vec<_> = dynamic_node_types
-                        .iter()
-                        .map(|ty| match ty {
-                            DynamicNodeType::Text => DynamicNode::Text(VText::new(Box::leak(
-                                format!("{}", rand::random::<usize>()).into_boxed_str(),
-                            ))),
-                            DynamicNodeType::Other => {
-                                create_random_dynamic_node(cx.props.depth + 1)
-                            }
-                        })
-                        .collect();
-                    cx.bump().alloc(dynamic_nodes)
-                },
-                cx.bump()
-                    .alloc(
-                        (0..template.attr_paths.len())
-                            .map(|_| create_random_dynamic_attr(cx).into())
-                            .collect::<Vec<_>>(),
-                    )
-                    .as_slice(),
-            );
-            Some(node)
-        }
-        _ => None,
-    };
-    println!("{node:#?}");
-    node
-}
-
-#[derive(Debug, Clone, PartialEq, Eq, Default, Component)]
-pub struct BlablaState {
-    count: usize,
-}
-
-#[partial_derive_state]
-impl State for BlablaState {
-    type ParentDependencies = (Self,);
-    type ChildDependencies = ();
-    type NodeDependencies = ();
-
-    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
-        .with_attrs(AttributeMaskBuilder::Some(&["blabla"]))
-        .with_element();
-
-    fn update<'a>(
-        &mut self,
-        _: NodeView,
-        _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: &SendAnyMap,
-    ) -> bool {
-        if let Some((parent,)) = parent {
-            if parent.count != 0 {
-                self.count += 1;
-            }
-        }
-        true
-    }
-
-    fn create<'a>(
-        node_view: NodeView<()>,
-        node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        context: &SendAnyMap,
-    ) -> Self {
-        let mut myself = Self::default();
-        myself.update(node_view, node, parent, children, context);
-        myself
-    }
-}
-
-// test for panics when creating random nodes and templates
-#[test]
-fn create() {
-    for _ in 0..100 {
-        let mut vdom = VirtualDom::new_with_props(
-            create_random_element,
-            DepthProps {
-                depth: 0,
-                root: true,
-            },
-        );
-        let mutations = vdom.rebuild();
-        let mut rdom: RealDom = RealDom::new([BlablaState::to_type_erased()]);
-        let mut dioxus_state = DioxusState::create(&mut rdom);
-        dioxus_state.apply_mutations(&mut rdom, mutations);
-
-        let ctx = SendAnyMap::new();
-        rdom.update_state(ctx);
-    }
-}
-
-// test for panics when diffing random nodes
-// This test will change the template every render which is not very realistic, but it helps stress the system
-#[test]
-fn diff() {
-    for _ in 0..10 {
-        let mut vdom = VirtualDom::new_with_props(
-            create_random_element,
-            DepthProps {
-                depth: 0,
-                root: true,
-            },
-        );
-        let mutations = vdom.rebuild();
-        let mut rdom: RealDom = RealDom::new([BlablaState::to_type_erased()]);
-        let mut dioxus_state = DioxusState::create(&mut rdom);
-        dioxus_state.apply_mutations(&mut rdom, mutations);
-
-        let ctx = SendAnyMap::new();
-        rdom.update_state(ctx);
-        for _ in 0..10 {
-            let mutations = vdom.render_immediate();
-            dioxus_state.apply_mutations(&mut rdom, mutations);
-
-            let ctx = SendAnyMap::new();
-            rdom.update_state(ctx);
-        }
-    }
-}
diff --git a/packages/native-core/_tests/miri_native.rs b/packages/native-core/_tests/miri_native.rs
deleted file mode 100644
index 5a8abd44c..000000000
--- a/packages/native-core/_tests/miri_native.rs
+++ /dev/null
@@ -1,154 +0,0 @@
-use dioxus::prelude::*;
-use dioxus_native_core::prelude::*;
-use dioxus_native_core_macro::partial_derive_state;
-use shipyard::Component;
-use tokio::time::sleep;
-
-#[derive(Debug, Clone, PartialEq, Eq, Default, Component)]
-pub struct BlablaState {
-    count: usize,
-}
-
-#[partial_derive_state]
-impl State for BlablaState {
-    type ParentDependencies = (Self,);
-    type ChildDependencies = ();
-    type NodeDependencies = ();
-
-    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
-        .with_attrs(AttributeMaskBuilder::Some(&["blabla"]))
-        .with_element();
-
-    fn update<'a>(
-        &mut self,
-        _: NodeView,
-        _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: &SendAnyMap,
-    ) -> bool {
-        if let Some((parent,)) = parent {
-            if parent.count != 0 {
-                self.count += 1;
-            }
-        }
-        true
-    }
-
-    fn create<'a>(
-        node_view: NodeView<()>,
-        node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        context: &SendAnyMap,
-    ) -> Self {
-        let mut myself = Self::default();
-        myself.update(node_view, node, parent, children, context);
-        myself
-    }
-}
-
-mod dioxus_elements {
-    macro_rules! builder_constructors {
-        (
-            $(
-                $(#[$attr:meta])*
-                $name:ident {
-                    $(
-                        $(#[$attr_method:meta])*
-                        $fil:ident: $vil:ident,
-                    )*
-                };
-            )*
-        ) => {
-            $(
-                #[allow(non_camel_case_types)]
-                $(#[$attr])*
-                pub struct $name;
-
-                impl $name {
-                    pub const TAG_NAME: &'static str = stringify!($name);
-                    pub const NAME_SPACE: Option<&'static str> = None;
-
-                    $(
-                        pub const $fil: (&'static str, Option<&'static str>, bool) = (stringify!($fil), None, false);
-                    )*
-                }
-
-                impl GlobalAttributes for $name {}
-            )*
-        }
-    }
-
-    pub trait GlobalAttributes {}
-
-    pub trait SvgAttributes {}
-
-    builder_constructors! {
-        blabla {
-
-        };
-    }
-}
-
-#[test]
-fn native_core_is_okay() {
-    use std::sync::{Arc, Mutex};
-    use std::time::Duration;
-
-    fn app() -> Element {
-        let colors = use_signal(|| vec!["green", "blue", "red"]);
-        let padding = use_signal(|| 10);
-
-        use_effect(colors, |colors| async move {
-            sleep(Duration::from_millis(1000)).await;
-            colors.with_mut(|colors| colors.reverse());
-        });
-
-        use_effect(padding, |padding| async move {
-            sleep(Duration::from_millis(10)).await;
-            padding.with_mut(|padding| {
-                if *padding < 65 {
-                    *padding += 1;
-                } else {
-                    *padding = 5;
-                }
-            });
-        });
-
-        let _big = colors[0];
-        let _mid = colors[1];
-        let _small = colors[2];
-
-        rsx! {
-            blabla {}
-        }
-    }
-
-    let rt = tokio::runtime::Builder::new_current_thread()
-        .enable_time()
-        .build()
-        .unwrap();
-
-    rt.block_on(async {
-        let rdom = Arc::new(Mutex::new(RealDom::new([BlablaState::to_type_erased()])));
-        let mut dioxus_state = DioxusState::create(&mut rdom.lock().unwrap());
-        let mut dom = VirtualDom::new(app);
-
-        let mutations = dom.rebuild();
-        dioxus_state.apply_mutations(&mut rdom.lock().unwrap(), mutations);
-
-        let ctx = SendAnyMap::new();
-        rdom.lock().unwrap().update_state(ctx);
-
-        for _ in 0..10 {
-            dom.wait_for_work().await;
-
-            let mutations = dom.render_immediate();
-            dioxus_state.apply_mutations(&mut rdom.lock().unwrap(), mutations);
-
-            let ctx = SendAnyMap::new();
-            rdom.lock().unwrap().update_state(ctx);
-        }
-    });
-}
diff --git a/packages/native-core/_tests/passes.rs b/packages/native-core/_tests/passes.rs
deleted file mode 100644
index 368333fb5..000000000
--- a/packages/native-core/_tests/passes.rs
+++ /dev/null
@@ -1,440 +0,0 @@
-use dioxus_native_core::node::NodeType;
-use dioxus_native_core::prelude::*;
-use dioxus_native_core_macro::partial_derive_state;
-use rustc_hash::{FxHashMap, FxHashSet};
-use shipyard::Component;
-
-fn create_blank_element() -> NodeType {
-    NodeType::Element(ElementNode {
-        tag: "div".to_owned(),
-        namespace: None,
-        attributes: FxHashMap::default(),
-        listeners: FxHashSet::default(),
-    })
-}
-
-#[test]
-fn node_pass() {
-    #[derive(Debug, Default, Clone, PartialEq, Component)]
-    struct Number(i32);
-
-    #[partial_derive_state]
-    impl State for Number {
-        type ChildDependencies = ();
-        type NodeDependencies = ();
-        type ParentDependencies = ();
-        const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new();
-
-        fn update<'a>(
-            &mut self,
-            _: NodeView,
-            _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-            _: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-            _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-            _: &SendAnyMap,
-        ) -> bool {
-            self.0 += 1;
-            true
-        }
-
-        fn create<'a>(
-            node_view: NodeView<()>,
-            node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-            parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-            children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-            context: &SendAnyMap,
-        ) -> Self {
-            let mut myself = Self::default();
-            myself.update(node_view, node, parent, children, context);
-            myself
-        }
-    }
-
-    let mut tree: RealDom = RealDom::new([Number::to_type_erased()]);
-    tree.update_state(SendAnyMap::new());
-
-    assert_eq!(
-        tree.get(tree.root_id()).unwrap().get().as_deref(),
-        Some(&Number(1))
-    );
-
-    // mark the node as dirty
-    tree.get_mut(tree.root_id()).unwrap().get_mut::<Number>();
-
-    tree.update_state(SendAnyMap::new());
-    assert_eq!(
-        tree.get(tree.root_id()).unwrap().get().as_deref(),
-        Some(&Number(2))
-    );
-}
-
-#[test]
-fn dependant_node_pass() {
-    #[derive(Debug, Default, Clone, PartialEq, Component)]
-    struct AddNumber(i32);
-
-    #[partial_derive_state]
-    impl State for AddNumber {
-        type ChildDependencies = ();
-        type NodeDependencies = (SubtractNumber,);
-        type ParentDependencies = ();
-        const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new();
-
-        fn update<'a>(
-            &mut self,
-            _: NodeView,
-            _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-            _: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-            _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-            _: &SendAnyMap,
-        ) -> bool {
-            self.0 += 1;
-            true
-        }
-
-        fn create<'a>(
-            node_view: NodeView<()>,
-            node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-            parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-            children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-            context: &SendAnyMap,
-        ) -> Self {
-            let mut myself = Self::default();
-            myself.update(node_view, node, parent, children, context);
-            myself
-        }
-    }
-
-    #[derive(Debug, Default, Clone, PartialEq, Component)]
-    struct SubtractNumber(i32);
-
-    #[partial_derive_state]
-    impl State for SubtractNumber {
-        type ChildDependencies = ();
-        type NodeDependencies = ();
-        type ParentDependencies = ();
-        const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new();
-
-        fn update<'a>(
-            &mut self,
-            _: NodeView,
-            _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-            _: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-            _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-            _: &SendAnyMap,
-        ) -> bool {
-            self.0 -= 1;
-            true
-        }
-
-        fn create<'a>(
-            node_view: NodeView<()>,
-            node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-            parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-            children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-            context: &SendAnyMap,
-        ) -> Self {
-            let mut myself = Self::default();
-            myself.update(node_view, node, parent, children, context);
-            myself
-        }
-    }
-
-    let mut tree: RealDom = RealDom::new([
-        AddNumber::to_type_erased(),
-        SubtractNumber::to_type_erased(),
-    ]);
-    tree.update_state(SendAnyMap::new());
-
-    let root = tree.get(tree.root_id()).unwrap();
-    assert_eq!(root.get().as_deref(), Some(&AddNumber(1)));
-    assert_eq!(root.get().as_deref(), Some(&SubtractNumber(-1)));
-
-    // mark the subtract state as dirty, it should update the add state
-    tree.get_mut(tree.root_id())
-        .unwrap()
-        .get_mut::<SubtractNumber>();
-
-    tree.update_state(SendAnyMap::new());
-    let root = tree.get(tree.root_id()).unwrap();
-    assert_eq!(root.get().as_deref(), Some(&AddNumber(2)));
-    assert_eq!(root.get().as_deref(), Some(&SubtractNumber(-2)));
-
-    // mark the add state as dirty, it should ~not~ update the subtract state
-    tree.get_mut(tree.root_id()).unwrap().get_mut::<AddNumber>();
-
-    tree.update_state(SendAnyMap::new());
-    let root = tree.get(tree.root_id()).unwrap();
-    assert_eq!(root.get().as_deref(), Some(&AddNumber(3)));
-    assert_eq!(root.get().as_deref(), Some(&SubtractNumber(-2)));
-}
-
-#[test]
-fn independant_node_pass() {
-    #[derive(Debug, Default, Clone, PartialEq, Component)]
-    struct AddNumber(i32);
-
-    #[partial_derive_state]
-    impl State for AddNumber {
-        type ChildDependencies = ();
-        type NodeDependencies = ();
-        type ParentDependencies = ();
-
-        const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new();
-
-        fn update<'a>(
-            &mut self,
-            _: NodeView,
-            _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-            _: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-            _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-            _: &SendAnyMap,
-        ) -> bool {
-            self.0 += 1;
-            true
-        }
-
-        fn create<'a>(
-            node_view: NodeView<()>,
-            node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-            parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-            children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-            context: &SendAnyMap,
-        ) -> Self {
-            let mut myself = Self::default();
-            myself.update(node_view, node, parent, children, context);
-            myself
-        }
-    }
-
-    #[derive(Debug, Default, Clone, PartialEq, Component)]
-    struct SubtractNumber(i32);
-
-    #[partial_derive_state]
-    impl State for SubtractNumber {
-        type ChildDependencies = ();
-        type NodeDependencies = ();
-        type ParentDependencies = ();
-
-        const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new();
-
-        fn update<'a>(
-            &mut self,
-            _: NodeView,
-            _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-            _: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-            _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-            _: &SendAnyMap,
-        ) -> bool {
-            self.0 -= 1;
-            true
-        }
-
-        fn create<'a>(
-            node_view: NodeView<()>,
-            node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-            parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-            children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-            context: &SendAnyMap,
-        ) -> Self {
-            let mut myself = Self::default();
-            myself.update(node_view, node, parent, children, context);
-            myself
-        }
-    }
-
-    let mut tree: RealDom = RealDom::new([
-        AddNumber::to_type_erased(),
-        SubtractNumber::to_type_erased(),
-    ]);
-    tree.update_state(SendAnyMap::new());
-
-    let root = tree.get(tree.root_id()).unwrap();
-    assert_eq!(root.get().as_deref(), Some(&AddNumber(1)));
-    assert_eq!(root.get().as_deref(), Some(&SubtractNumber(-1)));
-
-    // mark the subtract state as dirty, it should ~not~ update the add state
-    tree.get_mut(tree.root_id())
-        .unwrap()
-        .get_mut::<SubtractNumber>();
-
-    tree.update_state(SendAnyMap::new());
-
-    let root = tree.get(tree.root_id()).unwrap();
-    assert_eq!(root.get().as_deref(), Some(&AddNumber(1)));
-    assert_eq!(root.get().as_deref(), Some(&SubtractNumber(-2)));
-
-    // mark the add state as dirty, it should ~not~ update the subtract state
-    tree.get_mut(tree.root_id()).unwrap().get_mut::<AddNumber>();
-
-    tree.update_state(SendAnyMap::new());
-
-    let root = tree.get(tree.root_id()).unwrap();
-    assert_eq!(root.get().as_deref(), Some(&AddNumber(2)));
-    assert_eq!(root.get().as_deref(), Some(&SubtractNumber(-2)));
-}
-
-#[test]
-fn down_pass() {
-    #[derive(Debug, Clone, PartialEq, Component)]
-    struct AddNumber(i32);
-
-    impl Default for AddNumber {
-        fn default() -> Self {
-            Self(1)
-        }
-    }
-
-    #[partial_derive_state]
-    impl State for AddNumber {
-        type ChildDependencies = ();
-        type NodeDependencies = ();
-        type ParentDependencies = (AddNumber,);
-
-        const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new();
-
-        fn update<'a>(
-            &mut self,
-            _: NodeView,
-            _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-            parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-            _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-            _: &SendAnyMap,
-        ) -> bool {
-            if let Some((parent,)) = parent {
-                self.0 += parent.0;
-            }
-            true
-        }
-
-        fn create<'a>(
-            node_view: NodeView<()>,
-            node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-            parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-            children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-            context: &SendAnyMap,
-        ) -> Self {
-            let mut myself = Self::default();
-            myself.update(node_view, node, parent, children, context);
-            myself
-        }
-    }
-
-    let mut tree: RealDom = RealDom::new([AddNumber::to_type_erased()]);
-    let grandchild1 = tree.create_node(create_blank_element());
-    let grandchild1 = grandchild1.id();
-    let mut child1 = tree.create_node(create_blank_element());
-    child1.add_child(grandchild1);
-    let child1 = child1.id();
-    let grandchild2 = tree.create_node(create_blank_element());
-    let grandchild2 = grandchild2.id();
-    let mut child2 = tree.create_node(create_blank_element());
-    child2.add_child(grandchild2);
-    let child2 = child2.id();
-    let mut parent = tree.get_mut(tree.root_id()).unwrap();
-    parent.add_child(child1);
-    parent.add_child(child2);
-
-    tree.update_state(SendAnyMap::new());
-
-    let root = tree.get(tree.root_id()).unwrap();
-    dbg!(root.id());
-    assert_eq!(root.get().as_deref(), Some(&AddNumber(1)));
-
-    let child1 = tree.get(child1).unwrap();
-    dbg!(child1.id());
-    assert_eq!(child1.get().as_deref(), Some(&AddNumber(2)));
-
-    let grandchild1 = tree.get(grandchild1).unwrap();
-    assert_eq!(grandchild1.get().as_deref(), Some(&AddNumber(3)));
-
-    let child2 = tree.get(child2).unwrap();
-    assert_eq!(child2.get().as_deref(), Some(&AddNumber(2)));
-
-    let grandchild2 = tree.get(grandchild2).unwrap();
-    assert_eq!(grandchild2.get().as_deref(), Some(&AddNumber(3)));
-}
-
-#[test]
-fn up_pass() {
-    // Tree before:
-    // 1=\
-    //   1=\
-    //     1
-    //   1=\
-    //     1
-    // Tree after:
-    // 4=\
-    //   2=\
-    //     1
-    //   2=\
-    //     1
-
-    #[derive(Debug, Clone, PartialEq, Component)]
-    struct AddNumber(i32);
-
-    #[partial_derive_state]
-    impl State for AddNumber {
-        type ChildDependencies = (AddNumber,);
-        type NodeDependencies = ();
-        type ParentDependencies = ();
-
-        const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new();
-
-        fn update<'a>(
-            &mut self,
-            _: NodeView,
-            _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-            _: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-            children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-            _: &SendAnyMap,
-        ) -> bool {
-            self.0 += children.iter().map(|(i,)| i.0).sum::<i32>();
-            true
-        }
-
-        fn create<'a>(
-            node_view: NodeView<()>,
-            node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-            parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-            children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-            context: &SendAnyMap,
-        ) -> Self {
-            let mut myself = Self(1);
-            myself.update(node_view, node, parent, children, context);
-            myself
-        }
-    }
-
-    let mut tree: RealDom = RealDom::new([AddNumber::to_type_erased()]);
-    let grandchild1 = tree.create_node(create_blank_element());
-    let grandchild1 = grandchild1.id();
-    let mut child1 = tree.create_node(create_blank_element());
-    child1.add_child(grandchild1);
-    let child1 = child1.id();
-    let grandchild2 = tree.create_node(create_blank_element());
-    let grandchild2 = grandchild2.id();
-    let mut child2 = tree.create_node(create_blank_element());
-    child2.add_child(grandchild2);
-    let child2 = child2.id();
-    let mut parent = tree.get_mut(tree.root_id()).unwrap();
-    parent.add_child(child1);
-    parent.add_child(child2);
-
-    tree.update_state(SendAnyMap::new());
-
-    let root = tree.get(tree.root_id()).unwrap();
-    assert_eq!(root.get().as_deref(), Some(&AddNumber(5)));
-
-    let child1 = tree.get(child1).unwrap();
-    assert_eq!(child1.get().as_deref(), Some(&AddNumber(2)));
-
-    let grandchild1 = tree.get(grandchild1).unwrap();
-    assert_eq!(grandchild1.get().as_deref(), Some(&AddNumber(1)));
-
-    let child2 = tree.get(child2).unwrap();
-    assert_eq!(child2.get().as_deref(), Some(&AddNumber(2)));
-
-    let grandchild2 = tree.get(grandchild2).unwrap();
-    assert_eq!(grandchild2.get().as_deref(), Some(&AddNumber(1)));
-}
diff --git a/packages/native-core/examples/custom_attr.rs b/packages/native-core/examples/custom_attr.rs
deleted file mode 100644
index e7bbb36ea..000000000
--- a/packages/native-core/examples/custom_attr.rs
+++ /dev/null
@@ -1,231 +0,0 @@
-use dioxus_native_core::exports::shipyard::Component;
-use dioxus_native_core::node_ref::*;
-use dioxus_native_core::prelude::*;
-use dioxus_native_core::real_dom::NodeTypeMut;
-use dioxus_native_core_macro::partial_derive_state;
-
-struct FontSize(f64);
-
-// All states need to derive Component
-#[derive(Default, Debug, Copy, Clone, Component)]
-struct Size(f64, f64);
-
-#[derive(Default, Debug, Copy, Clone, Component)]
-struct X;
-
-impl FromAnyValue for X {
-    fn from_any_value(_: &dyn std::any::Any) -> Self {
-        X
-    }
-}
-
-/// Derive some of the boilerplate for the State implementation
-#[partial_derive_state]
-impl State<X> for Size {
-    type ParentDependencies = ();
-
-    // The size of the current node depends on the size of its children
-    type ChildDependencies = (Self,);
-
-    type NodeDependencies = ();
-
-    // Size only cares about the width, height, and text parts of the current node
-    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
-        // Get access to the width and height attributes
-        .with_attrs(AttributeMaskBuilder::Some(&["width", "height"]))
-        // Get access to the text of the node
-        .with_text();
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView<X>,
-        _node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        _parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        context: &SendAnyMap,
-    ) -> bool {
-        let font_size = context.get::<FontSize>().unwrap().0;
-        let mut width;
-        let mut height;
-        if let Some(text) = node_view.text() {
-            // if the node has text, use the text to size our object
-            width = text.len() as f64 * font_size;
-            height = font_size;
-        } else {
-            // otherwise, the size is the maximum size of the children
-            width = children
-                .iter()
-                .map(|(item,)| item.0)
-                .reduce(|accum, item| if accum >= item { accum } else { item })
-                .unwrap_or(0.0);
-
-            height = children
-                .iter()
-                .map(|(item,)| item.1)
-                .reduce(|accum, item| if accum >= item { accum } else { item })
-                .unwrap_or(0.0);
-        }
-        // if the node contains a width or height attribute it overrides the other size
-        for a in node_view.attributes().into_iter().flatten() {
-            match &*a.attribute.name {
-                "width" => width = a.value.as_float().unwrap(),
-                "height" => height = a.value.as_float().unwrap(),
-                // because Size only depends on the width and height, no other attributes will be passed to the member
-                _ => panic!(),
-            }
-        }
-        // to determine what other parts of the dom need to be updated we return a boolean that marks if this member changed
-        let changed = (width != self.0) || (height != self.1);
-        *self = Self(width, height);
-        changed
-    }
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, Default, Component)]
-struct TextColor {
-    r: u8,
-    g: u8,
-    b: u8,
-}
-
-#[partial_derive_state]
-impl State<X> for TextColor {
-    // TextColor depends on the TextColor part of the parent
-    type ParentDependencies = (Self,);
-
-    type ChildDependencies = ();
-
-    type NodeDependencies = ();
-
-    // TextColor only cares about the color attribute of the current node
-    const NODE_MASK: NodeMaskBuilder<'static> =
-        // Get access to the color attribute
-        NodeMaskBuilder::new().with_attrs(AttributeMaskBuilder::Some(&["color"]));
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView<X>,
-        _node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _context: &SendAnyMap,
-    ) -> bool {
-        // TextColor only depends on the color tag, so getting the first tag is equivilent to looking through all tags
-        let new = match node_view
-            .attributes()
-            .and_then(|mut attrs| attrs.next())
-            .and_then(|attr| attr.value.as_text())
-        {
-            // if there is a color tag, translate it
-            Some("red") => TextColor { r: 255, g: 0, b: 0 },
-            Some("green") => TextColor { r: 0, g: 255, b: 0 },
-            Some("blue") => TextColor { r: 0, g: 0, b: 255 },
-            Some(color) => panic!("unknown color {color}"),
-            // otherwise check if the node has a parent and inherit that color
-            None => match parent {
-                Some((parent,)) => *parent,
-                None => Self::default(),
-            },
-        };
-        // check if the member has changed
-        let changed = new != *self;
-        *self = new;
-        changed
-    }
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, Default, Component)]
-struct Border(bool);
-
-#[partial_derive_state]
-impl State<X> for Border {
-    // TextColor depends on the TextColor part of the parent
-    type ParentDependencies = (Self,);
-
-    type ChildDependencies = ();
-
-    type NodeDependencies = ();
-
-    // Border does not depended on any other member in the current node
-    const NODE_MASK: NodeMaskBuilder<'static> =
-        // Get access to the border attribute
-        NodeMaskBuilder::new().with_attrs(AttributeMaskBuilder::Some(&["border"]));
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView<X>,
-        _node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        _parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _context: &SendAnyMap,
-    ) -> bool {
-        // check if the node contians a border attribute
-        let new = Self(
-            node_view
-                .attributes()
-                .and_then(|mut attrs| attrs.next().map(|a| a.attribute.name == "border"))
-                .is_some(),
-        );
-        // check if the member has changed
-        let changed = new != *self;
-        *self = new;
-        changed
-    }
-}
-
-fn main() -> Result<(), Box<dyn std::error::Error>> {
-    let mut rdom: RealDom<X> = RealDom::new([
-        Border::to_type_erased(),
-        TextColor::to_type_erased(),
-        Size::to_type_erased(),
-    ]);
-
-    let mut count = 0;
-
-    // intial render
-    let text_id = rdom.create_node(format!("Count: {count}")).id();
-    let mut root = rdom.get_mut(rdom.root_id()).unwrap();
-    // set the color to red
-    if let NodeTypeMut::Element(mut element) = root.node_type_mut() {
-        element.set_attribute(("color", "style"), "red".to_string());
-    }
-    root.add_child(text_id);
-
-    let mut ctx = SendAnyMap::new();
-    // set the font size to 3.3
-    ctx.insert(FontSize(3.3));
-    // update the State for nodes in the real_dom tree
-    let _to_rerender = rdom.update_state(ctx);
-
-    // we need to run the vdom in a async runtime
-    tokio::runtime::Builder::new_current_thread()
-        .enable_all()
-        .build()?
-        .block_on(async {
-            loop {
-                // update the count
-                count += 1;
-                let mut text = rdom.get_mut(text_id).unwrap();
-                if let NodeTypeMut::Text(mut text) = text.node_type_mut() {
-                    *text = format!("Count: {count}");
-                }
-
-                let mut ctx = SendAnyMap::new();
-                ctx.insert(FontSize(3.3));
-                let _to_rerender = rdom.update_state(ctx);
-
-                // render...
-                rdom.traverse_depth_first_advanced(true, |node| {
-                    let indent = " ".repeat(node.height() as usize);
-                    let color = *node.get::<TextColor>().unwrap();
-                    let size = *node.get::<Size>().unwrap();
-                    let border = *node.get::<Border>().unwrap();
-                    let id = node.id();
-                    println!("{indent}{id:?} {color:?} {size:?} {border:?}");
-                });
-
-                // wait 1 second
-                tokio::time::sleep(std::time::Duration::from_secs(1)).await;
-            }
-        })
-}
diff --git a/packages/native-core/examples/font_size.rs b/packages/native-core/examples/font_size.rs
deleted file mode 100644
index 40261baa2..000000000
--- a/packages/native-core/examples/font_size.rs
+++ /dev/null
@@ -1,175 +0,0 @@
-use dioxus_native_core::exports::shipyard::Component;
-use dioxus_native_core::node_ref::*;
-use dioxus_native_core::prelude::*;
-use dioxus_native_core::real_dom::NodeTypeMut;
-use dioxus_native_core_macro::partial_derive_state;
-
-// All states need to derive Component
-#[derive(Default, Debug, Copy, Clone, Component)]
-struct Size(f64, f64);
-
-/// Derive some of the boilerplate for the State implementation
-#[partial_derive_state]
-impl State for Size {
-    type ParentDependencies = ();
-
-    // The size of the current node depends on the size of its children
-    type ChildDependencies = (Self,);
-
-    type NodeDependencies = (FontSize,);
-
-    // Size only cares about the width, height, and text parts of the current node
-    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
-        // Get access to the width and height attributes
-        .with_attrs(AttributeMaskBuilder::Some(&["width", "height"]))
-        // Get access to the text of the node
-        .with_text();
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView<()>,
-        (font_size,): <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        _parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: &SendAnyMap,
-    ) -> bool {
-        let font_size = font_size.size;
-        let mut width;
-        let mut height;
-        if let Some(text) = node_view.text() {
-            // if the node has text, use the text to size our object
-            width = text.len() as f64 * font_size;
-            height = font_size;
-        } else {
-            // otherwise, the size is the maximum size of the children
-            width = children
-                .iter()
-                .map(|(item,)| item.0)
-                .reduce(|accum, item| if accum >= item { accum } else { item })
-                .unwrap_or(0.0);
-
-            height = children
-                .iter()
-                .map(|(item,)| item.1)
-                .reduce(|accum, item| if accum >= item { accum } else { item })
-                .unwrap_or(0.0);
-        }
-        // if the node contains a width or height attribute it overrides the other size
-        for a in node_view.attributes().into_iter().flatten() {
-            match &*a.attribute.name {
-                "width" => width = a.value.as_float().unwrap(),
-                "height" => height = a.value.as_float().unwrap(),
-                // because Size only depends on the width and height, no other attributes will be passed to the member
-                _ => panic!(),
-            }
-        }
-        // to determine what other parts of the dom need to be updated we return a boolean that marks if this member changed
-        let changed = (width != self.0) || (height != self.1);
-        *self = Self(width, height);
-        changed
-    }
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, Component)]
-struct FontSize {
-    size: f64,
-}
-
-impl Default for FontSize {
-    fn default() -> Self {
-        Self { size: 16.0 }
-    }
-}
-
-#[partial_derive_state]
-impl State for FontSize {
-    // TextColor depends on the TextColor part of the parent
-    type ParentDependencies = (Self,);
-
-    type ChildDependencies = ();
-
-    type NodeDependencies = ();
-
-    // TextColor only cares about the color attribute of the current node
-    const NODE_MASK: NodeMaskBuilder<'static> =
-        // Get access to the color attribute
-        NodeMaskBuilder::new().with_attrs(AttributeMaskBuilder::Some(&["font-size"]));
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView<()>,
-        _node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _context: &SendAnyMap,
-    ) -> bool {
-        let mut new = None;
-        for attr in node_view.attributes().into_iter().flatten() {
-            if attr.attribute.name == "font-size" {
-                new = Some(FontSize {
-                    size: attr.value.as_float().unwrap(),
-                });
-            }
-        }
-        let new = new.unwrap_or(parent.map(|(p,)| *p).unwrap_or_default());
-        // check if the member has changed
-        let changed = new != *self;
-        *self = new;
-        changed
-    }
-}
-
-fn main() -> Result<(), Box<dyn std::error::Error>> {
-    let mut rdom: RealDom = RealDom::new([FontSize::to_type_erased(), Size::to_type_erased()]);
-
-    let mut count = 0;
-
-    // intial render
-    let text_id = rdom.create_node(format!("Count: {count}")).id();
-    let mut root = rdom.get_mut(rdom.root_id()).unwrap();
-    // set the color to red
-    if let NodeTypeMut::Element(mut element) = root.node_type_mut() {
-        element.set_attribute(("color", "style"), "red".to_string());
-        element.set_attribute(("font-size", "style"), 1.);
-    }
-    root.add_child(text_id);
-
-    let ctx = SendAnyMap::new();
-    // update the State for nodes in the real_dom tree
-    let _to_rerender = rdom.update_state(ctx);
-
-    // we need to run the vdom in a async runtime
-    tokio::runtime::Builder::new_current_thread()
-        .enable_all()
-        .build()?
-        .block_on(async {
-            loop {
-                // update the count and font size
-                count += 1;
-                let mut text = rdom.get_mut(text_id).unwrap();
-                if let NodeTypeMut::Text(mut text) = text.node_type_mut() {
-                    *text = format!("Count: {count}");
-                }
-                if let NodeTypeMut::Element(mut element) =
-                    rdom.get_mut(rdom.root_id()).unwrap().node_type_mut()
-                {
-                    element.set_attribute(("font-size", "style"), count as f64);
-                }
-
-                let ctx = SendAnyMap::new();
-                let _to_rerender = rdom.update_state(ctx);
-
-                // render...
-                rdom.traverse_depth_first_advanced(true, |node| {
-                    let indent = " ".repeat(node.height() as usize);
-                    let font_size = *node.get::<FontSize>().unwrap();
-                    let size = *node.get::<Size>().unwrap();
-                    let id = node.id();
-                    println!("{indent}{id:?} {font_size:?} {size:?}");
-                });
-
-                // wait 1 second
-                tokio::time::sleep(std::time::Duration::from_secs(1)).await;
-            }
-        })
-}
diff --git a/packages/native-core/examples/simple.rs b/packages/native-core/examples/simple.rs
deleted file mode 100644
index 276d06d08..000000000
--- a/packages/native-core/examples/simple.rs
+++ /dev/null
@@ -1,222 +0,0 @@
-use dioxus_native_core::exports::shipyard::Component;
-use dioxus_native_core::node_ref::*;
-use dioxus_native_core::prelude::*;
-use dioxus_native_core::real_dom::NodeTypeMut;
-use dioxus_native_core_macro::partial_derive_state;
-
-struct FontSize(f64);
-
-// All states need to derive Component
-#[derive(Default, Debug, Copy, Clone, Component)]
-struct Size(f64, f64);
-
-/// Derive some of the boilerplate for the State implementation
-#[partial_derive_state]
-impl State for Size {
-    type ParentDependencies = ();
-
-    // The size of the current node depends on the size of its children
-    type ChildDependencies = (Self,);
-
-    type NodeDependencies = ();
-
-    // Size only cares about the width, height, and text parts of the current node
-    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
-        // Get access to the width and height attributes
-        .with_attrs(AttributeMaskBuilder::Some(&["width", "height"]))
-        // Get access to the text of the node
-        .with_text();
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView<()>,
-        _node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        _parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        context: &SendAnyMap,
-    ) -> bool {
-        let font_size = context.get::<FontSize>().unwrap().0;
-        let mut width;
-        let mut height;
-        if let Some(text) = node_view.text() {
-            // if the node has text, use the text to size our object
-            width = text.len() as f64 * font_size;
-            height = font_size;
-        } else {
-            // otherwise, the size is the maximum size of the children
-            width = children
-                .iter()
-                .map(|(item,)| item.0)
-                .reduce(|accum, item| if accum >= item { accum } else { item })
-                .unwrap_or(0.0);
-
-            height = children
-                .iter()
-                .map(|(item,)| item.1)
-                .reduce(|accum, item| if accum >= item { accum } else { item })
-                .unwrap_or(0.0);
-        }
-        // if the node contains a width or height attribute it overrides the other size
-        for a in node_view.attributes().into_iter().flatten() {
-            match &*a.attribute.name {
-                "width" => width = a.value.as_float().unwrap(),
-                "height" => height = a.value.as_float().unwrap(),
-                // because Size only depends on the width and height, no other attributes will be passed to the member
-                _ => panic!(),
-            }
-        }
-        // to determine what other parts of the dom need to be updated we return a boolean that marks if this member changed
-        let changed = (width != self.0) || (height != self.1);
-        *self = Self(width, height);
-        changed
-    }
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, Default, Component)]
-struct TextColor {
-    r: u8,
-    g: u8,
-    b: u8,
-}
-
-#[partial_derive_state]
-impl State for TextColor {
-    // TextColor depends on the TextColor part of the parent
-    type ParentDependencies = (Self,);
-
-    type ChildDependencies = ();
-
-    type NodeDependencies = ();
-
-    // TextColor only cares about the color attribute of the current node
-    const NODE_MASK: NodeMaskBuilder<'static> =
-        // Get access to the color attribute
-        NodeMaskBuilder::new().with_attrs(AttributeMaskBuilder::Some(&["color"]));
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView<()>,
-        _node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _context: &SendAnyMap,
-    ) -> bool {
-        // TextColor only depends on the color tag, so getting the first tag is equivilent to looking through all tags
-        let new = match node_view
-            .attributes()
-            .and_then(|mut attrs| attrs.next())
-            .and_then(|attr| attr.value.as_text())
-        {
-            // if there is a color tag, translate it
-            Some("red") => TextColor { r: 255, g: 0, b: 0 },
-            Some("green") => TextColor { r: 0, g: 255, b: 0 },
-            Some("blue") => TextColor { r: 0, g: 0, b: 255 },
-            Some(color) => panic!("unknown color {color}"),
-            // otherwise check if the node has a parent and inherit that color
-            None => match parent {
-                Some((parent,)) => *parent,
-                None => Self::default(),
-            },
-        };
-        // check if the member has changed
-        let changed = new != *self;
-        *self = new;
-        changed
-    }
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, Default, Component)]
-struct Border(bool);
-
-#[partial_derive_state]
-impl State for Border {
-    // TextColor depends on the TextColor part of the parent
-    type ParentDependencies = (Self,);
-
-    type ChildDependencies = ();
-
-    type NodeDependencies = ();
-
-    // Border does not depended on any other member in the current node
-    const NODE_MASK: NodeMaskBuilder<'static> =
-        // Get access to the border attribute
-        NodeMaskBuilder::new().with_attrs(AttributeMaskBuilder::Some(&["border"]));
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView<()>,
-        _node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        _parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _context: &SendAnyMap,
-    ) -> bool {
-        // check if the node contians a border attribute
-        let new = Self(
-            node_view
-                .attributes()
-                .and_then(|mut attrs| attrs.next().map(|a| a.attribute.name == "border"))
-                .is_some(),
-        );
-        // check if the member has changed
-        let changed = new != *self;
-        *self = new;
-        changed
-    }
-}
-
-fn main() -> Result<(), Box<dyn std::error::Error>> {
-    let mut rdom: RealDom = RealDom::new([
-        Border::to_type_erased(),
-        TextColor::to_type_erased(),
-        Size::to_type_erased(),
-    ]);
-
-    let mut count = 0;
-
-    // intial render
-    let text_id = rdom.create_node(format!("Count: {count}")).id();
-    let mut root = rdom.get_mut(rdom.root_id()).unwrap();
-    // set the color to red
-    if let NodeTypeMut::Element(mut element) = root.node_type_mut() {
-        element.set_attribute(("color", "style"), "red".to_string());
-    }
-    root.add_child(text_id);
-
-    let mut ctx = SendAnyMap::new();
-    // set the font size to 3.3
-    ctx.insert(FontSize(3.3));
-    // update the State for nodes in the real_dom tree
-    let _to_rerender = rdom.update_state(ctx);
-
-    // we need to run the vdom in a async runtime
-    tokio::runtime::Builder::new_current_thread()
-        .enable_all()
-        .build()?
-        .block_on(async {
-            loop {
-                // update the count
-                count += 1;
-                let mut text = rdom.get_mut(text_id).unwrap();
-                if let NodeTypeMut::Text(mut text) = text.node_type_mut() {
-                    *text = format!("Count: {count}");
-                }
-
-                let mut ctx = SendAnyMap::new();
-                ctx.insert(FontSize(3.3));
-                let _to_rerender = rdom.update_state(ctx);
-
-                // render...
-                rdom.traverse_depth_first_advanced(true, |node| {
-                    let indent = " ".repeat(node.height() as usize);
-                    let color = *node.get::<TextColor>().unwrap();
-                    let size = *node.get::<Size>().unwrap();
-                    let border = *node.get::<Border>().unwrap();
-                    let id = node.id();
-                    println!("{indent}{id:?} {color:?} {size:?} {border:?}");
-                });
-
-                // wait 1 second
-                tokio::time::sleep(std::time::Duration::from_secs(1)).await;
-            }
-        })
-}
diff --git a/packages/native-core/examples/simple_dioxus.rs b/packages/native-core/examples/simple_dioxus.rs
deleted file mode 100644
index afb9fe487..000000000
--- a/packages/native-core/examples/simple_dioxus.rs
+++ /dev/null
@@ -1,245 +0,0 @@
-#![allow(non_snake_case)]
-use dioxus::prelude::*;
-use dioxus_native_core::exports::shipyard::Component;
-use dioxus_native_core::node_ref::*;
-use dioxus_native_core::prelude::*;
-use dioxus_native_core_macro::partial_derive_state;
-
-struct FontSize(f64);
-
-// All states need to derive Component
-#[derive(Default, Debug, Copy, Clone, Component)]
-struct Size(f64, f64);
-
-/// Derive some of the boilerplate for the State implementation
-#[partial_derive_state]
-impl State for Size {
-    type ParentDependencies = ();
-
-    // The size of the current node depends on the size of its children
-    type ChildDependencies = (Self,);
-
-    type NodeDependencies = ();
-
-    // Size only cares about the width, height, and text parts of the current node
-    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
-        // Get access to the width and height attributes
-        .with_attrs(AttributeMaskBuilder::Some(&["width", "height"]))
-        // Get access to the text of the node
-        .with_text();
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView<()>,
-        _node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        _parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        context: &SendAnyMap,
-    ) -> bool {
-        let font_size = context.get::<FontSize>().unwrap().0;
-        let mut width;
-        let mut height;
-        if let Some(text) = node_view.text() {
-            // if the node has text, use the text to size our object
-            width = text.len() as f64 * font_size;
-            height = font_size;
-        } else {
-            // otherwise, the size is the maximum size of the children
-            width = children
-                .iter()
-                .map(|(item,)| item.0)
-                .reduce(|accum, item| if accum >= item { accum } else { item })
-                .unwrap_or(0.0);
-
-            height = children
-                .iter()
-                .map(|(item,)| item.1)
-                .reduce(|accum, item| if accum >= item { accum } else { item })
-                .unwrap_or(0.0);
-        }
-        // if the node contains a width or height attribute it overrides the other size
-        for a in node_view.attributes().into_iter().flatten() {
-            match &*a.attribute.name {
-                "width" => width = a.value.as_float().unwrap(),
-                "height" => height = a.value.as_float().unwrap(),
-                // because Size only depends on the width and height, no other attributes will be passed to the member
-                _ => panic!(),
-            }
-        }
-        // to determine what other parts of the dom need to be updated we return a boolean that marks if this member changed
-        let changed = (width != self.0) || (height != self.1);
-        *self = Self(width, height);
-        changed
-    }
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, Default, Component)]
-struct TextColor {
-    r: u8,
-    g: u8,
-    b: u8,
-}
-
-#[partial_derive_state]
-impl State for TextColor {
-    // TextColor depends on the TextColor part of the parent
-    type ParentDependencies = (Self,);
-
-    type ChildDependencies = ();
-
-    type NodeDependencies = ();
-
-    // TextColor only cares about the color attribute of the current node
-    const NODE_MASK: NodeMaskBuilder<'static> =
-        // Get access to the color attribute
-        NodeMaskBuilder::new().with_attrs(AttributeMaskBuilder::Some(&["color"]));
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView<()>,
-        _node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _context: &SendAnyMap,
-    ) -> bool {
-        // TextColor only depends on the color tag, so getting the first tag is equivilent to looking through all tags
-        let new = match node_view
-            .attributes()
-            .and_then(|mut attrs| attrs.next())
-            .and_then(|attr| attr.value.as_text())
-        {
-            // if there is a color tag, translate it
-            Some("red") => TextColor { r: 255, g: 0, b: 0 },
-            Some("green") => TextColor { r: 0, g: 255, b: 0 },
-            Some("blue") => TextColor { r: 0, g: 0, b: 255 },
-            Some(color) => panic!("unknown color {color}"),
-            // otherwise check if the node has a parent and inherit that color
-            None => match parent {
-                Some((parent,)) => *parent,
-                None => Self::default(),
-            },
-        };
-        // check if the member has changed
-        let changed = new != *self;
-        *self = new;
-        changed
-    }
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, Default, Component)]
-struct Border(bool);
-
-#[partial_derive_state]
-impl State for Border {
-    // TextColor depends on the TextColor part of the parent
-    type ParentDependencies = (Self,);
-
-    type ChildDependencies = ();
-
-    type NodeDependencies = ();
-
-    // Border does not depended on any other member in the current node
-    const NODE_MASK: NodeMaskBuilder<'static> =
-        // Get access to the border attribute
-        NodeMaskBuilder::new().with_attrs(AttributeMaskBuilder::Some(&["border"]));
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView<()>,
-        _node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        _parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _context: &SendAnyMap,
-    ) -> bool {
-        // check if the node contians a border attribute
-        let new = Self(
-            node_view
-                .attributes()
-                .and_then(|mut attrs| attrs.next().map(|a| a.attribute.name == "border"))
-                .is_some(),
-        );
-        // check if the member has changed
-        let changed = new != *self;
-        *self = new;
-        changed
-    }
-}
-
-fn main() -> Result<(), Box<dyn std::error::Error>> {
-    fn app() -> Element {
-        let mut count = use_signal(|| 0);
-
-        use_future(move || async move {
-            loop {
-                tokio::time::sleep(std::time::Duration::from_secs(1)).await;
-                count += 1;
-            }
-        });
-
-        rsx! {
-            div { color: "red",
-                "{count}",
-                Comp {}
-            }
-        }
-    }
-
-    fn Comp() -> Element {
-        rsx! {
-            div { border: "", "hello world" }
-        }
-    }
-
-    // create the vdom, the real_dom, and the binding layer between them
-    let mut vdom = VirtualDom::new(app);
-    let mut rdom: RealDom = RealDom::new([
-        Border::to_type_erased(),
-        TextColor::to_type_erased(),
-        Size::to_type_erased(),
-    ]);
-    let mut dioxus_intigration_state = DioxusState::create(&mut rdom);
-
-    // update the structure of the real_dom tree
-    let mut writer = dioxus_intigration_state.create_mutation_writer(&mut rdom);
-    vdom.rebuild(&mut writer);
-
-    let mut ctx = SendAnyMap::new();
-    // set the font size to 3.3
-    ctx.insert(FontSize(3.3));
-    // update the State for nodes in the real_dom tree
-    let _to_rerender = rdom.update_state(ctx);
-
-    // we need to run the vdom in a async runtime
-    tokio::runtime::Builder::new_current_thread()
-        .enable_all()
-        .build()?
-        .block_on(async {
-            loop {
-                // wait for the vdom to update
-                vdom.wait_for_work().await;
-
-                // get the mutations from the vdom
-                // update the structure of the real_dom tree
-                let mut writer = dioxus_intigration_state.create_mutation_writer(&mut rdom);
-                vdom.rebuild(&mut writer);
-
-                // update the state of the real_dom tree
-                let mut ctx = SendAnyMap::new();
-                // set the font size to 3.3
-                ctx.insert(FontSize(3.3));
-                let _to_rerender = rdom.update_state(ctx);
-
-                // render...
-                rdom.traverse_depth_first_advanced(true, |node| {
-                    let indent = " ".repeat(node.height() as usize);
-                    let color = *node.get::<TextColor>().unwrap();
-                    let size = *node.get::<Size>().unwrap();
-                    let border = *node.get::<Border>().unwrap();
-                    let id = node.id();
-                    let node = node.node_type();
-                    let node_type = &*node;
-                    println!("{indent}{id:?} {color:?} {size:?} {border:?} {node_type:?}");
-                });
-            }
-        })
-}
diff --git a/packages/native-core/src/custom_element.rs b/packages/native-core/src/custom_element.rs
deleted file mode 100644
index 3675089f6..000000000
--- a/packages/native-core/src/custom_element.rs
+++ /dev/null
@@ -1,180 +0,0 @@
-//! A custom element is a controlled element that renders to a shadow DOM. This allows you to create elements that act like widgets without relying on a specific framework.
-//!
-//! Each custom element is registered with a element name and namespace with [`RealDom::register_custom_element`] or [`RealDom::register_custom_element_with_factory`]. Once registered, they will be created automatically when the element is added to the DOM.
-
-// Used in doc links
-#[allow(unused)]
-use crate::real_dom::RealDom;
-
-use std::sync::{Arc, RwLock};
-
-use rustc_hash::FxHashMap;
-use shipyard::Component;
-
-use crate::{
-    node::{FromAnyValue, NodeType},
-    node_ref::AttributeMask,
-    prelude::{NodeImmutable, NodeMut},
-    tree::TreeMut,
-    NodeId,
-};
-
-pub(crate) struct CustomElementRegistry<V: FromAnyValue + Send + Sync> {
-    builders: FxHashMap<(&'static str, Option<&'static str>), CustomElementBuilder<V>>,
-}
-
-impl<V: FromAnyValue + Send + Sync> Default for CustomElementRegistry<V> {
-    fn default() -> Self {
-        Self {
-            builders: FxHashMap::default(),
-        }
-    }
-}
-
-impl<V: FromAnyValue + Send + Sync> CustomElementRegistry<V> {
-    pub fn register<F, U>(&mut self)
-    where
-        F: CustomElementFactory<U, V>,
-        U: CustomElementUpdater<V>,
-    {
-        self.builders.insert(
-            (F::NAME, F::NAMESPACE),
-            CustomElementBuilder {
-                create: |node| Box::new(F::create(node)),
-            },
-        );
-    }
-
-    pub fn add_shadow_dom(&self, mut node: NodeMut<V>) {
-        let element_tag = if let NodeType::Element(el) = &*node.node_type() {
-            Some((el.tag.clone(), el.namespace.clone()))
-        } else {
-            None
-        };
-        if let Some((tag, ns)) = element_tag {
-            if let Some(builder) = self.builders.get(&(tag.as_str(), ns.as_deref())) {
-                let boxed_custom_element = { (builder.create)(node.reborrow()) };
-
-                let shadow_roots = boxed_custom_element.roots();
-
-                let light_id = node.id();
-                node.real_dom_mut().tree_mut().create_subtree(
-                    light_id,
-                    shadow_roots,
-                    boxed_custom_element.slot(),
-                );
-
-                let boxed_custom_element = CustomElementManager {
-                    inner: Arc::new(RwLock::new(boxed_custom_element)),
-                };
-
-                node.insert(boxed_custom_element);
-            }
-        }
-    }
-}
-
-struct CustomElementBuilder<V: FromAnyValue + Send + Sync> {
-    create: fn(NodeMut<V>) -> Box<dyn CustomElementUpdater<V>>,
-}
-
-/// A controlled element that renders to a shadow DOM.
-///
-/// Register with [`RealDom::register_custom_element`]
-///
-/// This is a simplified custom element trait for elements that can create themselves. For more granular control, implement [`CustomElementFactory`] and [`CustomElementUpdater`] instead.
-pub trait CustomElement<V: FromAnyValue + Send + Sync = ()>: Send + Sync + 'static {
-    /// The tag of the element
-    const NAME: &'static str;
-
-    /// The namespace of the element
-    const NAMESPACE: Option<&'static str> = None;
-
-    /// Create a new element *without mounting* it.
-    /// The node passed in is the light DOM node. The element should not modify the light DOM node, but it can get the [`NodeMut::real_dom_mut`] from the node to create new nodes.
-    fn create(light_root: NodeMut<V>) -> Self;
-
-    /// The root node of the custom element. These roots must be not change once the element is created.
-    fn roots(&self) -> Vec<NodeId>;
-
-    /// The slot to render children of the element into. The slot must be not change once the element is created.
-    fn slot(&self) -> Option<NodeId> {
-        None
-    }
-
-    /// Update the custom element's shadow tree with the new attributes.
-    /// Called when the attributes of the custom element are changed.
-    fn attributes_changed(&mut self, light_node: NodeMut<V>, attributes: &AttributeMask);
-}
-
-/// A factory for creating custom elements
-///
-/// Register with [`RealDom::register_custom_element_with_factory`]
-pub trait CustomElementFactory<W: CustomElementUpdater<V>, V: FromAnyValue + Send + Sync = ()>:
-    Send + Sync + 'static
-{
-    /// The tag of the element
-    const NAME: &'static str;
-
-    /// The namespace of the element
-    const NAMESPACE: Option<&'static str> = None;
-
-    /// Create a new element *without mounting* it.
-    /// The node passed in is the light DOM node. The element should not modify the light DOM node, but it can get the [`NodeMut::real_dom_mut`] from the node to create new nodes.
-    fn create(dom: NodeMut<V>) -> W;
-}
-
-impl<W: CustomElement<V>, V: FromAnyValue + Send + Sync> CustomElementFactory<W, V> for W {
-    const NAME: &'static str = W::NAME;
-
-    const NAMESPACE: Option<&'static str> = W::NAMESPACE;
-
-    fn create(node: NodeMut<V>) -> Self {
-        Self::create(node)
-    }
-}
-
-/// A trait for updating custom elements
-pub trait CustomElementUpdater<V: FromAnyValue + Send + Sync = ()>: Send + Sync + 'static {
-    /// Update the custom element's shadow tree with the new attributes.
-    /// Called when the attributes of the custom element are changed.
-    fn attributes_changed(&mut self, light_root: NodeMut<V>, attributes: &AttributeMask);
-
-    /// The root node of the custom element. These roots must be not change once the element is created.
-    fn roots(&self) -> Vec<NodeId>;
-
-    /// The slot to render children of the element into. The slot must be not change once the element is created.
-    fn slot(&self) -> Option<NodeId> {
-        None
-    }
-}
-
-impl<W: CustomElement<V>, V: FromAnyValue + Send + Sync> CustomElementUpdater<V> for W {
-    fn attributes_changed(&mut self, light_root: NodeMut<V>, attributes: &AttributeMask) {
-        self.attributes_changed(light_root, attributes);
-    }
-
-    fn roots(&self) -> Vec<NodeId> {
-        self.roots()
-    }
-
-    fn slot(&self) -> Option<NodeId> {
-        self.slot()
-    }
-}
-
-/// A dynamic trait object wrapper for [`CustomElementUpdater`]
-#[derive(Component, Clone)]
-pub(crate) struct CustomElementManager<V: FromAnyValue = ()> {
-    inner: Arc<RwLock<Box<dyn CustomElementUpdater<V>>>>,
-}
-
-impl<V: FromAnyValue + Send + Sync> CustomElementManager<V> {
-    /// Update the custom element based on attributes changed.
-    pub fn on_attributes_changed(&self, light_root: NodeMut<V>, attributes: &AttributeMask) {
-        self.inner
-            .write()
-            .unwrap()
-            .attributes_changed(light_root, attributes);
-    }
-}
diff --git a/packages/native-core/src/dioxus.rs b/packages/native-core/src/dioxus.rs
deleted file mode 100644
index 36348cc9d..000000000
--- a/packages/native-core/src/dioxus.rs
+++ /dev/null
@@ -1,326 +0,0 @@
-//! Integration between Dioxus and the RealDom
-
-use crate::tree::TreeMut;
-use dioxus_core::{AttributeValue, ElementId, TemplateNode, WriteMutations};
-use rustc_hash::{FxHashMap, FxHashSet};
-use shipyard::Component;
-
-use crate::{
-    node::{
-        ElementNode, FromAnyValue, NodeType, OwnedAttributeDiscription, OwnedAttributeValue,
-        TextNode,
-    },
-    prelude::*,
-    real_dom::NodeTypeMut,
-    NodeId,
-};
-
-#[derive(Component)]
-struct ElementIdComponent(ElementId);
-
-/// The state of the Dioxus integration with the RealDom
-pub struct DioxusState {
-    templates: FxHashMap<String, Vec<NodeId>>,
-    stack: Vec<NodeId>,
-    node_id_mapping: Vec<Option<NodeId>>,
-}
-
-impl DioxusState {
-    /// Initialize the DioxusState in the RealDom
-    pub fn create<V: FromAnyValue + Send + Sync>(rdom: &mut RealDom<V>) -> Self {
-        let root_id = rdom.root_id();
-        let mut root = rdom.get_mut(root_id).unwrap();
-        root.insert(ElementIdComponent(ElementId(0)));
-        Self {
-            templates: FxHashMap::default(),
-            stack: vec![root_id],
-            node_id_mapping: vec![Some(root_id)],
-        }
-    }
-
-    /// Convert an ElementId to a NodeId
-    pub fn element_to_node_id(&self, element_id: ElementId) -> NodeId {
-        self.try_element_to_node_id(element_id).unwrap()
-    }
-
-    /// Attempt to convert an ElementId to a NodeId. This will return None if the ElementId is not in the RealDom.
-    pub fn try_element_to_node_id(&self, element_id: ElementId) -> Option<NodeId> {
-        self.node_id_mapping.get(element_id.0).copied().flatten()
-    }
-
-    /// Create a mutation writer for the RealDom
-    pub fn create_mutation_writer<'a, V: FromAnyValue + Send + Sync>(
-        &'a mut self,
-        rdom: &'a mut RealDom<V>,
-    ) -> DioxusNativeCoreMutationWriter<'a, V> {
-        DioxusNativeCoreMutationWriter { rdom, state: self }
-    }
-
-    fn set_element_id<V: FromAnyValue + Send + Sync>(
-        &mut self,
-        mut node: NodeMut<V>,
-        element_id: ElementId,
-    ) {
-        let node_id = node.id();
-        node.insert(ElementIdComponent(element_id));
-        if self.node_id_mapping.len() <= element_id.0 {
-            self.node_id_mapping.resize(element_id.0 + 1, None);
-        } else if let Some(mut node) =
-            self.node_id_mapping[element_id.0].and_then(|id| node.real_dom_mut().get_mut(id))
-        {
-            node.remove();
-        }
-
-        self.node_id_mapping[element_id.0] = Some(node_id);
-    }
-
-    fn load_child<V: FromAnyValue + Send + Sync>(&self, rdom: &RealDom<V>, path: &[u8]) -> NodeId {
-        let mut current = rdom.get(*self.stack.last().unwrap()).unwrap();
-        for i in path {
-            let new_id = current.child_ids()[*i as usize];
-            current = rdom.get(new_id).unwrap();
-        }
-        current.id()
-    }
-}
-
-/// A writer for mutations that can be used with the RealDom.
-pub struct DioxusNativeCoreMutationWriter<'a, V: FromAnyValue + Send + Sync = ()> {
-    /// The realdom associated with this writer
-    pub rdom: &'a mut RealDom<V>,
-
-    /// The state associated with this writer
-    pub state: &'a mut DioxusState,
-}
-
-impl<V: FromAnyValue + Send + Sync> WriteMutations for DioxusNativeCoreMutationWriter<'_, V> {
-    fn register_template(&mut self, template: dioxus_core::prelude::Template) {
-        let mut template_root_ids = Vec::new();
-        for root in template.roots {
-            let id = create_template_node(self.rdom, root);
-            template_root_ids.push(id);
-        }
-        self.state
-            .templates
-            .insert(template.name.to_string(), template_root_ids);
-    }
-
-    fn append_children(&mut self, id: ElementId, m: usize) {
-        let children = self.state.stack.split_off(self.state.stack.len() - m);
-        let parent = self.state.element_to_node_id(id);
-        for child in children {
-            self.rdom.get_mut(parent).unwrap().add_child(child);
-        }
-    }
-
-    fn assign_node_id(&mut self, path: &'static [u8], id: ElementId) {
-        let node_id = self.state.load_child(self.rdom, path);
-        self.state
-            .set_element_id(self.rdom.get_mut(node_id).unwrap(), id);
-    }
-
-    fn create_placeholder(&mut self, id: ElementId) {
-        let node = NodeType::Placeholder;
-        let node = self.rdom.create_node(node);
-        let node_id = node.id();
-        self.state.set_element_id(node, id);
-        self.state.stack.push(node_id);
-    }
-
-    fn create_text_node(&mut self, value: &str, id: ElementId) {
-        let node_data = NodeType::Text(TextNode {
-            listeners: FxHashSet::default(),
-            text: value.to_string(),
-        });
-        let node = self.rdom.create_node(node_data);
-        let node_id = node.id();
-        self.state.set_element_id(node, id);
-        self.state.stack.push(node_id);
-    }
-
-    fn hydrate_text_node(&mut self, path: &'static [u8], value: &str, id: ElementId) {
-        let node_id = self.state.load_child(self.rdom, path);
-        let node = self.rdom.get_mut(node_id).unwrap();
-        self.state.set_element_id(node, id);
-        let mut node = self.rdom.get_mut(node_id).unwrap();
-        let node_type_mut = node.node_type_mut();
-        if let NodeTypeMut::Text(mut text) = node_type_mut {
-            *text.text_mut() = value.to_string();
-        } else {
-            drop(node_type_mut);
-            node.set_type(NodeType::Text(TextNode {
-                text: value.to_string(),
-                listeners: FxHashSet::default(),
-            }));
-        }
-    }
-
-    fn load_template(&mut self, name: &'static str, index: usize, id: ElementId) {
-        let template_id = self.state.templates[name][index];
-        let clone_id = self.rdom.get_mut(template_id).unwrap().clone_node();
-        let clone = self.rdom.get_mut(clone_id).unwrap();
-        self.state.set_element_id(clone, id);
-        self.state.stack.push(clone_id);
-    }
-
-    fn replace_node_with(&mut self, id: ElementId, m: usize) {
-        let new_nodes = self.state.stack.split_off(self.state.stack.len() - m);
-        let old_node_id = self.state.element_to_node_id(id);
-        for new in new_nodes {
-            let mut node = self.rdom.get_mut(new).unwrap();
-            node.insert_before(old_node_id);
-        }
-        self.rdom.get_mut(old_node_id).unwrap().remove();
-    }
-
-    fn replace_placeholder_with_nodes(&mut self, path: &'static [u8], m: usize) {
-        let new_nodes = self.state.stack.split_off(self.state.stack.len() - m);
-        let old_node_id = self.state.load_child(self.rdom, path);
-        for new in new_nodes {
-            let mut node = self.rdom.get_mut(new).unwrap();
-            node.insert_before(old_node_id);
-        }
-        self.rdom.get_mut(old_node_id).unwrap().remove();
-    }
-
-    fn insert_nodes_after(&mut self, id: ElementId, m: usize) {
-        let new_nodes = self.state.stack.split_off(self.state.stack.len() - m);
-        let old_node_id = self.state.element_to_node_id(id);
-        for new in new_nodes.into_iter().rev() {
-            let mut node = self.rdom.get_mut(new).unwrap();
-            node.insert_after(old_node_id);
-        }
-    }
-
-    fn insert_nodes_before(&mut self, id: ElementId, m: usize) {
-        let new_nodes = self.state.stack.split_off(self.state.stack.len() - m);
-        let old_node_id = self.state.element_to_node_id(id);
-        for new in new_nodes {
-            self.rdom.tree_mut().insert_before(old_node_id, new);
-        }
-    }
-
-    fn set_attribute(
-        &mut self,
-        name: &'static str,
-        ns: Option<&'static str>,
-        value: &AttributeValue,
-        id: ElementId,
-    ) {
-        let node_id = self.state.element_to_node_id(id);
-        let mut node = self.rdom.get_mut(node_id).unwrap();
-        let mut node_type_mut = node.node_type_mut();
-        if let NodeTypeMut::Element(element) = &mut node_type_mut {
-            if let AttributeValue::None = &value {
-                element.remove_attribute(&OwnedAttributeDiscription {
-                    name: name.to_string(),
-                    namespace: ns.map(|s| s.to_string()),
-                });
-            } else {
-                element.set_attribute(
-                    OwnedAttributeDiscription {
-                        name: name.to_string(),
-                        namespace: ns.map(|s| s.to_string()),
-                    },
-                    OwnedAttributeValue::from(value),
-                );
-            }
-        }
-    }
-
-    fn set_node_text(&mut self, value: &str, id: ElementId) {
-        let node_id = self.state.element_to_node_id(id);
-        let mut node = self.rdom.get_mut(node_id).unwrap();
-        let node_type_mut = node.node_type_mut();
-        if let NodeTypeMut::Text(mut text) = node_type_mut {
-            *text.text_mut() = value.to_string();
-        }
-    }
-
-    fn create_event_listener(&mut self, name: &'static str, id: ElementId) {
-        let node_id = self.state.element_to_node_id(id);
-        let mut node = self.rdom.get_mut(node_id).unwrap();
-        node.add_event_listener(name);
-    }
-
-    fn remove_event_listener(&mut self, name: &'static str, id: ElementId) {
-        let node_id = self.state.element_to_node_id(id);
-        let mut node = self.rdom.get_mut(node_id).unwrap();
-        node.remove_event_listener(name);
-    }
-
-    fn remove_node(&mut self, id: ElementId) {
-        let node_id = self.state.element_to_node_id(id);
-        self.rdom.get_mut(node_id).unwrap().remove();
-    }
-
-    fn push_root(&mut self, id: ElementId) {
-        let node_id = self.state.element_to_node_id(id);
-        self.state.stack.push(node_id);
-    }
-}
-
-fn create_template_node<V: FromAnyValue + Send + Sync>(
-    rdom: &mut RealDom<V>,
-    node: &TemplateNode,
-) -> NodeId {
-    match node {
-        TemplateNode::Element {
-            tag,
-            namespace,
-            attrs,
-            children,
-        } => {
-            let node = NodeType::Element(ElementNode {
-                tag: tag.to_string(),
-                namespace: namespace.map(|s| s.to_string()),
-                attributes: attrs
-                    .iter()
-                    .filter_map(|attr| match attr {
-                        dioxus_core::TemplateAttribute::Static {
-                            name,
-                            value,
-                            namespace,
-                        } => Some((
-                            OwnedAttributeDiscription {
-                                namespace: namespace.map(|s| s.to_string()),
-                                name: name.to_string(),
-                            },
-                            OwnedAttributeValue::Text(value.to_string()),
-                        )),
-                        dioxus_core::TemplateAttribute::Dynamic { .. } => None,
-                    })
-                    .collect(),
-                listeners: FxHashSet::default(),
-            });
-            let node_id = rdom.create_node(node).id();
-            for child in *children {
-                let child_id = create_template_node(rdom, child);
-                rdom.get_mut(node_id).unwrap().add_child(child_id);
-            }
-            node_id
-        }
-        TemplateNode::Text { text } => rdom
-            .create_node(NodeType::Text(TextNode {
-                text: text.to_string(),
-                ..Default::default()
-            }))
-            .id(),
-        TemplateNode::Dynamic { .. } => rdom.create_node(NodeType::Placeholder).id(),
-        TemplateNode::DynamicText { .. } => {
-            rdom.create_node(NodeType::Text(TextNode::default())).id()
-        }
-    }
-}
-
-/// A trait that extends the `NodeImmutable` trait with methods that are useful for dioxus.
-pub trait NodeImmutableDioxusExt<V: FromAnyValue + Send + Sync>: NodeImmutable<V> {
-    /// Returns the id of the element that this node is mounted to.
-    /// Not all nodes are mounted to an element, only nodes with dynamic content that have been renderered will have an id.
-    fn mounted_id(&self) -> Option<ElementId> {
-        let id = self.get::<ElementIdComponent>();
-        id.map(|id| id.0)
-    }
-}
-
-impl<T: NodeImmutable<V>, V: FromAnyValue + Send + Sync> NodeImmutableDioxusExt<V> for T {}
diff --git a/packages/native-core/src/layout_attributes.rs b/packages/native-core/src/layout_attributes.rs
deleted file mode 100644
index 5d83a6cb2..000000000
--- a/packages/native-core/src/layout_attributes.rs
+++ /dev/null
@@ -1,641 +0,0 @@
-//! Utility functions for applying layout attributes to taffy layout
-
-/*
-- [ ] pub display: Display, ----> taffy doesnt support all display types
-- [x] pub position: Position,  --> taffy doesnt support everything
-- [x] pub direction: Direction,
-
-- [x] pub flex_direction: FlexDirection,
-- [x] pub flex_wrap: FlexWrap,
-- [x] pub flex_grow: f32,
-- [x] pub flex_shrink: f32,
-- [x] pub flex_basis: Dimension,
-
-- [x]pub grid_auto_flow: GridAutoFlow,
-- [x]pub grid_template_rows: GridTrackVec<TrackSizingFunction>,
-- [x]pub grid_template_columns: GridTrackVec<TrackSizingFunction>,
-- [x]pub grid_auto_rows: GridTrackVec<NonRepeatedTrackSizingFunction>,
-- [x]pub grid_auto_columns: GridTrackVec<NonRepeatedTrackSizingFunction>,
-- [x]pub grid_row: Line<GridPlacement>,
-- [x]pub grid_column: Line<GridPlacement>,
-
-- [x] pub overflow: Overflow, ---> taffy doesnt have support for directional overflow
-
-- [x] pub align_items: AlignItems,
-- [x] pub align_self: AlignSelf,
-- [x] pub align_content: AlignContent,
-
-- [x] pub margin: Rect<Dimension>,
-- [x] pub padding: Rect<Dimension>,
-
-- [x] pub justify_content: JustifyContent,
-- [x] pub inset: Rect<Dimension>,
-- [x] pub border: Rect<Dimension>,
-
-- [ ] pub size: Size<Dimension>, ----> seems to only be relevant for input?
-- [ ] pub min_size: Size<Dimension>,
-- [ ] pub max_size: Size<Dimension>,
-
-- [x] pub aspect_ratio: Number,
-*/
-
-use lightningcss::properties::border::LineStyle;
-use lightningcss::properties::grid::{TrackBreadth, TrackSizing};
-use lightningcss::properties::{align, border, display, flex, grid, position, size};
-use lightningcss::values::percentage::Percentage;
-use lightningcss::{
-    properties::{Property, PropertyId},
-    stylesheet::ParserOptions,
-    traits::Parse,
-    values::{
-        length::{Length, LengthPercentageOrAuto, LengthValue},
-        percentage::DimensionPercentage,
-        ratio::Ratio,
-    },
-};
-use taffy::{
-    prelude::*,
-    style::{FlexDirection, Position},
-};
-
-/// Default values for layout attributes
-#[derive(Default)]
-pub struct LayoutConfigeration {
-    /// the default border widths to use
-    pub border_widths: BorderWidths,
-}
-
-/// Default border widths
-pub struct BorderWidths {
-    /// the default border width to use for thin borders
-    pub thin: f32,
-    /// the default border width to use for medium borders
-    pub medium: f32,
-    /// the default border width to use for thick borders
-    pub thick: f32,
-}
-
-impl Default for BorderWidths {
-    fn default() -> Self {
-        Self {
-            thin: 1.0,
-            medium: 3.0,
-            thick: 5.0,
-        }
-    }
-}
-
-/// applies the entire html namespace defined in dioxus-html
-pub fn apply_layout_attributes(name: &str, value: &str, style: &mut Style) {
-    apply_layout_attributes_cfg(name, value, style, &LayoutConfigeration::default())
-}
-
-/// applies the entire html namespace defined in dioxus-html with the specified configeration
-pub fn apply_layout_attributes_cfg(
-    name: &str,
-    value: &str,
-    style: &mut Style,
-    config: &LayoutConfigeration,
-) {
-    if let Ok(property) =
-        Property::parse_string(PropertyId::from(name), value, ParserOptions::default())
-    {
-        match property {
-            Property::Display(display) => match display {
-                display::Display::Keyword(display::DisplayKeyword::None) => {
-                    style.display = Display::None
-                }
-                display::Display::Pair(pair) => match pair.inside {
-                    display::DisplayInside::Flex(_) => {
-                        style.display = Display::Flex;
-                    }
-                    display::DisplayInside::Grid => {
-                        style.display = Display::Grid;
-                    }
-                    _ => {}
-                },
-                _ => {}
-            },
-            Property::Position(position) => {
-                style.position = match position {
-                    position::Position::Relative => Position::Relative,
-                    position::Position::Absolute => Position::Absolute,
-                    _ => return,
-                }
-            }
-            Property::Top(top) => style.inset.top = convert_length_percentage_or_auto(top),
-            Property::Bottom(bottom) => {
-                style.inset.bottom = convert_length_percentage_or_auto(bottom)
-            }
-            Property::Left(left) => style.inset.left = convert_length_percentage_or_auto(left),
-            Property::Right(right) => style.inset.right = convert_length_percentage_or_auto(right),
-            Property::Inset(inset) => {
-                style.inset.top = convert_length_percentage_or_auto(inset.top);
-                style.inset.bottom = convert_length_percentage_or_auto(inset.bottom);
-                style.inset.left = convert_length_percentage_or_auto(inset.left);
-                style.inset.right = convert_length_percentage_or_auto(inset.right);
-            }
-            Property::BorderTopWidth(width) => {
-                style.border.top = convert_border_side_width(width, &config.border_widths);
-            }
-            Property::BorderBottomWidth(width) => {
-                style.border.bottom = convert_border_side_width(width, &config.border_widths);
-            }
-            Property::BorderLeftWidth(width) => {
-                style.border.left = convert_border_side_width(width, &config.border_widths);
-            }
-            Property::BorderRightWidth(width) => {
-                style.border.right = convert_border_side_width(width, &config.border_widths);
-            }
-            Property::BorderWidth(width) => {
-                style.border.top = convert_border_side_width(width.top, &config.border_widths);
-                style.border.bottom =
-                    convert_border_side_width(width.bottom, &config.border_widths);
-                style.border.left = convert_border_side_width(width.left, &config.border_widths);
-                style.border.right = convert_border_side_width(width.right, &config.border_widths);
-            }
-            Property::Border(border) => {
-                let width = convert_border_side_width(border.width, &config.border_widths);
-                style.border.top = width;
-                style.border.bottom = width;
-                style.border.left = width;
-                style.border.right = width;
-            }
-            Property::BorderTop(top) => {
-                style.border.top = convert_border_side_width(top.width, &config.border_widths);
-            }
-            Property::BorderBottom(bottom) => {
-                style.border.bottom =
-                    convert_border_side_width(bottom.width, &config.border_widths);
-            }
-            Property::BorderLeft(left) => {
-                style.border.left = convert_border_side_width(left.width, &config.border_widths);
-            }
-            Property::BorderRight(right) => {
-                style.border.right = convert_border_side_width(right.width, &config.border_widths);
-            }
-            Property::BorderTopStyle(line_style) => {
-                if line_style != LineStyle::None {
-                    style.border.top = convert_border_side_width(
-                        border::BorderSideWidth::Medium,
-                        &config.border_widths,
-                    );
-                }
-            }
-            Property::BorderBottomStyle(line_style) => {
-                if line_style != LineStyle::None {
-                    style.border.bottom = convert_border_side_width(
-                        border::BorderSideWidth::Medium,
-                        &config.border_widths,
-                    );
-                }
-            }
-            Property::BorderLeftStyle(line_style) => {
-                if line_style != LineStyle::None {
-                    style.border.left = convert_border_side_width(
-                        border::BorderSideWidth::Medium,
-                        &config.border_widths,
-                    );
-                }
-            }
-            Property::BorderRightStyle(line_style) => {
-                if line_style != LineStyle::None {
-                    style.border.right = convert_border_side_width(
-                        border::BorderSideWidth::Medium,
-                        &config.border_widths,
-                    );
-                }
-            }
-            Property::BorderStyle(styles) => {
-                if styles.top != LineStyle::None {
-                    style.border.top = convert_border_side_width(
-                        border::BorderSideWidth::Medium,
-                        &config.border_widths,
-                    );
-                }
-                if styles.bottom != LineStyle::None {
-                    style.border.bottom = convert_border_side_width(
-                        border::BorderSideWidth::Medium,
-                        &config.border_widths,
-                    );
-                }
-                if styles.left != LineStyle::None {
-                    style.border.left = convert_border_side_width(
-                        border::BorderSideWidth::Medium,
-                        &config.border_widths,
-                    );
-                }
-                if styles.right != LineStyle::None {
-                    style.border.right = convert_border_side_width(
-                        border::BorderSideWidth::Medium,
-                        &config.border_widths,
-                    );
-                }
-            }
-
-            // Flexbox properties
-            Property::FlexDirection(flex_direction, _) => {
-                use FlexDirection::*;
-                style.flex_direction = match flex_direction {
-                    flex::FlexDirection::Row => Row,
-                    flex::FlexDirection::RowReverse => RowReverse,
-                    flex::FlexDirection::Column => Column,
-                    flex::FlexDirection::ColumnReverse => ColumnReverse,
-                }
-            }
-            Property::FlexWrap(wrap, _) => {
-                use FlexWrap::*;
-                style.flex_wrap = match wrap {
-                    flex::FlexWrap::NoWrap => NoWrap,
-                    flex::FlexWrap::Wrap => Wrap,
-                    flex::FlexWrap::WrapReverse => WrapReverse,
-                }
-            }
-            Property::FlexGrow(grow, _) => {
-                style.flex_grow = grow;
-            }
-            Property::FlexShrink(shrink, _) => {
-                style.flex_shrink = shrink;
-            }
-            Property::FlexBasis(basis, _) => {
-                style.flex_basis = convert_length_percentage_or_auto(basis).into();
-            }
-            Property::Flex(flex, _) => {
-                style.flex_grow = flex.grow;
-                style.flex_shrink = flex.shrink;
-                style.flex_basis = convert_length_percentage_or_auto(flex.basis).into();
-            }
-
-            // Grid properties
-            Property::GridAutoFlow(grid_auto_flow) => {
-                let is_row = grid_auto_flow.contains(grid::GridAutoFlow::Row);
-                let is_dense = grid_auto_flow.contains(grid::GridAutoFlow::Dense);
-                style.grid_auto_flow = match (is_row, is_dense) {
-                    (true, false) => GridAutoFlow::Row,
-                    (false, false) => GridAutoFlow::Column,
-                    (true, true) => GridAutoFlow::RowDense,
-                    (false, true) => GridAutoFlow::ColumnDense,
-                };
-            }
-            Property::GridTemplateColumns(TrackSizing::TrackList(track_list)) => {
-                style.grid_template_columns = track_list
-                    .items
-                    .into_iter()
-                    .map(convert_grid_track_item)
-                    .collect();
-            }
-            Property::GridTemplateRows(TrackSizing::TrackList(track_list)) => {
-                style.grid_template_rows = track_list
-                    .items
-                    .into_iter()
-                    .map(convert_grid_track_item)
-                    .collect();
-            }
-            Property::GridAutoColumns(grid::TrackSizeList(track_size_list)) => {
-                style.grid_auto_columns = track_size_list
-                    .into_iter()
-                    .map(convert_grid_track_size)
-                    .collect();
-            }
-            Property::GridAutoRows(grid::TrackSizeList(track_size_list)) => {
-                style.grid_auto_rows = track_size_list
-                    .into_iter()
-                    .map(convert_grid_track_size)
-                    .collect();
-            }
-            Property::GridRow(grid_row) => {
-                style.grid_row = Line {
-                    start: convert_grid_placement(grid_row.start),
-                    end: convert_grid_placement(grid_row.end),
-                };
-            }
-            Property::GridColumn(grid_column) => {
-                style.grid_column = Line {
-                    start: convert_grid_placement(grid_column.start),
-                    end: convert_grid_placement(grid_column.end),
-                };
-            }
-
-            // Alignment properties
-            Property::AlignContent(align, _) => {
-                use AlignContent::*;
-                style.align_content = match align {
-                    align::AlignContent::ContentDistribution(distribution) => match distribution {
-                        align::ContentDistribution::SpaceBetween => Some(SpaceBetween),
-                        align::ContentDistribution::SpaceAround => Some(SpaceAround),
-                        align::ContentDistribution::SpaceEvenly => Some(SpaceEvenly),
-                        align::ContentDistribution::Stretch => Some(Stretch),
-                    },
-                    align::AlignContent::ContentPosition {
-                        value: position, ..
-                    } => match position {
-                        align::ContentPosition::Center => Some(Center),
-                        align::ContentPosition::Start => Some(Start),
-                        align::ContentPosition::FlexStart => Some(FlexStart),
-                        align::ContentPosition::End => Some(End),
-                        align::ContentPosition::FlexEnd => Some(FlexEnd),
-                    },
-                    _ => return,
-                };
-            }
-            Property::JustifyContent(justify, _) => {
-                use AlignContent::*;
-                style.justify_content = match justify {
-                    align::JustifyContent::ContentDistribution(distribution) => {
-                        match distribution {
-                            align::ContentDistribution::SpaceBetween => Some(SpaceBetween),
-                            align::ContentDistribution::SpaceAround => Some(SpaceAround),
-                            align::ContentDistribution::SpaceEvenly => Some(SpaceEvenly),
-                            _ => return,
-                        }
-                    }
-                    align::JustifyContent::ContentPosition {
-                        value: position, ..
-                    } => match position {
-                        align::ContentPosition::Center => Some(Center),
-                        align::ContentPosition::Start => Some(Start),
-                        align::ContentPosition::FlexStart => Some(FlexStart),
-                        align::ContentPosition::End => Some(End),
-                        align::ContentPosition::FlexEnd => Some(FlexEnd),
-                    },
-                    _ => return,
-                };
-            }
-            Property::AlignSelf(align, _) => {
-                use AlignItems::*;
-                style.align_self = match align {
-                    align::AlignSelf::Auto => None,
-                    align::AlignSelf::Stretch => Some(Stretch),
-                    align::AlignSelf::BaselinePosition(_) => Some(Baseline),
-                    align::AlignSelf::SelfPosition {
-                        value: position, ..
-                    } => match position {
-                        align::SelfPosition::Center => Some(Center),
-                        align::SelfPosition::Start | align::SelfPosition::SelfStart => Some(Start),
-                        align::SelfPosition::FlexStart => Some(FlexStart),
-                        align::SelfPosition::End | align::SelfPosition::SelfEnd => Some(End),
-                        align::SelfPosition::FlexEnd => Some(FlexEnd),
-                    },
-                    _ => return,
-                };
-            }
-            Property::AlignItems(align, _) => {
-                use AlignItems::*;
-                style.align_items = match align {
-                    align::AlignItems::BaselinePosition(_) => Some(Baseline),
-                    align::AlignItems::Stretch => Some(Stretch),
-                    align::AlignItems::SelfPosition {
-                        value: position, ..
-                    } => match position {
-                        align::SelfPosition::Center => Some(Center),
-                        align::SelfPosition::FlexStart => Some(FlexStart),
-                        align::SelfPosition::FlexEnd => Some(FlexEnd),
-                        align::SelfPosition::Start | align::SelfPosition::SelfStart => {
-                            Some(FlexEnd)
-                        }
-                        align::SelfPosition::End | align::SelfPosition::SelfEnd => Some(FlexEnd),
-                    },
-                    _ => return,
-                };
-            }
-            Property::RowGap(row_gap) => {
-                style.gap.width = convert_gap_value(row_gap);
-            }
-            Property::ColumnGap(column_gap) => {
-                style.gap.height = convert_gap_value(column_gap);
-            }
-            Property::Gap(gap) => {
-                style.gap = Size {
-                    width: convert_gap_value(gap.row),
-                    height: convert_gap_value(gap.column),
-                };
-            }
-            Property::MarginTop(margin) => {
-                style.margin.top = convert_length_percentage_or_auto(margin);
-            }
-            Property::MarginBottom(margin) => {
-                style.margin.bottom = convert_length_percentage_or_auto(margin);
-            }
-            Property::MarginLeft(margin) => {
-                style.margin.left = convert_length_percentage_or_auto(margin);
-            }
-            Property::MarginRight(margin) => {
-                style.margin.right = convert_length_percentage_or_auto(margin);
-            }
-            Property::Margin(margin) => {
-                style.margin = Rect {
-                    top: convert_length_percentage_or_auto(margin.top),
-                    bottom: convert_length_percentage_or_auto(margin.bottom),
-                    left: convert_length_percentage_or_auto(margin.left),
-                    right: convert_length_percentage_or_auto(margin.right),
-                };
-            }
-            Property::PaddingTop(padding) => {
-                style.padding.top = convert_padding(padding);
-            }
-            Property::PaddingBottom(padding) => {
-                style.padding.bottom = convert_padding(padding);
-            }
-            Property::PaddingLeft(padding) => {
-                style.padding.left = convert_padding(padding);
-            }
-            Property::PaddingRight(padding) => {
-                style.padding.right = convert_padding(padding);
-            }
-            Property::Padding(padding) => {
-                style.padding = Rect {
-                    top: convert_padding(padding.top),
-                    bottom: convert_padding(padding.bottom),
-                    left: convert_padding(padding.left),
-                    right: convert_padding(padding.right),
-                };
-            }
-            Property::Width(width) => {
-                style.size.width = convert_size(width);
-            }
-            Property::Height(height) => {
-                style.size.height = convert_size(height);
-            }
-            _ => (),
-        }
-        // currently not implemented in lightningcss
-        if name == "aspect-ratio" {
-            if let Ok(ratio) = Ratio::parse_string(value) {
-                style.aspect_ratio = Some(ratio.0 / ratio.1);
-            }
-        }
-    }
-}
-
-fn extract_px_value(length_value: LengthValue) -> f32 {
-    match length_value {
-        LengthValue::Px(value) => value,
-        _ => todo!("Only px values are supported"),
-    }
-}
-
-fn convert_length_percentage(
-    dimension_percentage: DimensionPercentage<LengthValue>,
-) -> LengthPercentage {
-    match dimension_percentage {
-        DimensionPercentage::Dimension(value) => LengthPercentage::Points(extract_px_value(value)),
-        DimensionPercentage::Percentage(percentage) => LengthPercentage::Percent(percentage.0),
-        DimensionPercentage::Calc(_) => todo!("Calc is not supported yet"),
-    }
-}
-
-fn convert_padding(dimension_percentage: LengthPercentageOrAuto) -> LengthPercentage {
-    match dimension_percentage {
-        LengthPercentageOrAuto::Auto => unimplemented!(),
-        LengthPercentageOrAuto::LengthPercentage(lp) => match lp {
-            DimensionPercentage::Dimension(value) => {
-                LengthPercentage::Points(extract_px_value(value))
-            }
-            DimensionPercentage::Percentage(percentage) => LengthPercentage::Percent(percentage.0),
-            DimensionPercentage::Calc(_) => unimplemented!("Calc is not supported yet"),
-        },
-    }
-}
-
-fn convert_length_percentage_or_auto(
-    dimension_percentage: LengthPercentageOrAuto,
-) -> LengthPercentageAuto {
-    match dimension_percentage {
-        LengthPercentageOrAuto::Auto => LengthPercentageAuto::Auto,
-        LengthPercentageOrAuto::LengthPercentage(lp) => match lp {
-            DimensionPercentage::Dimension(value) => {
-                LengthPercentageAuto::Points(extract_px_value(value))
-            }
-            DimensionPercentage::Percentage(percentage) => {
-                LengthPercentageAuto::Percent(percentage.0)
-            }
-            DimensionPercentage::Calc(_) => todo!("Calc is not supported yet"),
-        },
-    }
-}
-
-fn convert_dimension(dimension_percentage: DimensionPercentage<LengthValue>) -> Dimension {
-    match dimension_percentage {
-        DimensionPercentage::Dimension(value) => Dimension::Points(extract_px_value(value)),
-        DimensionPercentage::Percentage(percentage) => Dimension::Percent(percentage.0),
-        DimensionPercentage::Calc(_) => todo!("Calc is not supported yet"),
-    }
-}
-
-fn convert_border_side_width(
-    border_side_width: border::BorderSideWidth,
-    border_width_config: &BorderWidths,
-) -> LengthPercentage {
-    match border_side_width {
-        border::BorderSideWidth::Length(Length::Value(value)) => {
-            LengthPercentage::Points(extract_px_value(value))
-        }
-        border::BorderSideWidth::Thick => LengthPercentage::Points(border_width_config.thick),
-        border::BorderSideWidth::Medium => LengthPercentage::Points(border_width_config.medium),
-        border::BorderSideWidth::Thin => LengthPercentage::Points(border_width_config.thin),
-        border::BorderSideWidth::Length(_) => todo!("Only Length::Value is supported"),
-    }
-}
-
-fn convert_gap_value(gap_value: align::GapValue) -> LengthPercentage {
-    match gap_value {
-        align::GapValue::LengthPercentage(dim) => convert_length_percentage(dim),
-        align::GapValue::Normal => LengthPercentage::Points(0.0),
-    }
-}
-
-fn convert_size(size: size::Size) -> Dimension {
-    match size {
-        size::Size::Auto => Dimension::Auto,
-        size::Size::LengthPercentage(length) => convert_dimension(length),
-        size::Size::MinContent(_) => Dimension::Auto, // Unimplemented, so default auto
-        size::Size::MaxContent(_) => Dimension::Auto, // Unimplemented, so default auto
-        size::Size::FitContent(_) => Dimension::Auto, // Unimplemented, so default auto
-        size::Size::FitContentFunction(_) => Dimension::Auto, // Unimplemented, so default auto
-        size::Size::Stretch(_) => Dimension::Auto,    // Unimplemented, so default auto
-        size::Size::Contain => Dimension::Auto,       // Unimplemented, so default auto
-    }
-}
-
-fn convert_grid_placement(input: grid::GridLine) -> GridPlacement {
-    match input {
-        grid::GridLine::Auto => GridPlacement::Auto,
-        grid::GridLine::Line { index, .. } => line(index as i16),
-        grid::GridLine::Span { index, .. } => span(index as u16),
-        grid::GridLine::Area { .. } => unimplemented!(),
-    }
-}
-
-fn convert_grid_track_item(input: grid::TrackListItem) -> TrackSizingFunction {
-    match input {
-        grid::TrackListItem::TrackSize(size) => {
-            TrackSizingFunction::Single(convert_grid_track_size(size))
-        }
-        grid::TrackListItem::TrackRepeat(_) => todo!("requires TrackRepeat fields to be public!"),
-    }
-}
-
-fn convert_grid_track_size(input: grid::TrackSize) -> NonRepeatedTrackSizingFunction {
-    match input {
-        grid::TrackSize::TrackBreadth(breadth) => minmax(
-            convert_track_breadth_min(&breadth),
-            convert_track_breadth_max(&breadth),
-        ),
-        grid::TrackSize::MinMax { min, max } => minmax(
-            convert_track_breadth_min(&min),
-            convert_track_breadth_max(&max),
-        ),
-        grid::TrackSize::FitContent(limit) => match limit {
-            DimensionPercentage::Dimension(LengthValue::Px(len)) => minmax(auto(), points(len)),
-            DimensionPercentage::Percentage(Percentage(pct)) => minmax(auto(), percent(pct)),
-            _ => unimplemented!(),
-        },
-    }
-}
-
-fn convert_track_breadth_max(breadth: &TrackBreadth) -> MaxTrackSizingFunction {
-    match breadth {
-        grid::TrackBreadth::Length(length_percentage) => match length_percentage {
-            DimensionPercentage::Dimension(LengthValue::Px(len)) => points(*len),
-            DimensionPercentage::Percentage(Percentage(pct)) => percent(*pct),
-            _ => unimplemented!(),
-        },
-        grid::TrackBreadth::Flex(fraction) => fr(*fraction),
-        grid::TrackBreadth::MinContent => MaxTrackSizingFunction::MinContent,
-        grid::TrackBreadth::MaxContent => MaxTrackSizingFunction::MaxContent,
-        grid::TrackBreadth::Auto => MaxTrackSizingFunction::Auto,
-    }
-}
-
-fn convert_track_breadth_min(breadth: &TrackBreadth) -> MinTrackSizingFunction {
-    match breadth {
-        grid::TrackBreadth::Length(length_percentage) => match length_percentage {
-            DimensionPercentage::Dimension(LengthValue::Px(len)) => points(*len),
-            DimensionPercentage::Percentage(Percentage(pct)) => percent(*pct),
-            _ => unimplemented!(),
-        },
-        grid::TrackBreadth::MinContent => MinTrackSizingFunction::MinContent,
-        grid::TrackBreadth::MaxContent => MinTrackSizingFunction::MaxContent,
-        grid::TrackBreadth::Auto => MinTrackSizingFunction::Auto,
-        grid::TrackBreadth::Flex(_) => MinTrackSizingFunction::Auto,
-    }
-}
-
-/// parse relative or absolute value
-pub fn parse_value(value: &str) -> Option<Dimension> {
-    if value.ends_with("px") {
-        if let Ok(px) = value.trim_end_matches("px").parse::<f32>() {
-            Some(Dimension::Points(px))
-        } else {
-            None
-        }
-    } else if value.ends_with('%') {
-        if let Ok(pct) = value.trim_end_matches('%').parse::<f32>() {
-            Some(Dimension::Percent(pct / 100.0))
-        } else {
-            None
-        }
-    } else {
-        None
-    }
-}
diff --git a/packages/native-core/src/lib.rs b/packages/native-core/src/lib.rs
deleted file mode 100644
index dd36990a7..000000000
--- a/packages/native-core/src/lib.rs
+++ /dev/null
@@ -1,54 +0,0 @@
-#![doc = include_str!("../README.md")]
-#![doc(html_logo_url = "https://avatars.githubusercontent.com/u/79236386")]
-#![doc(html_favicon_url = "https://avatars.githubusercontent.com/u/79236386")]
-#![warn(missing_docs)]
-
-use std::any::Any;
-use std::hash::BuildHasherDefault;
-
-use node_ref::NodeMask;
-use rustc_hash::FxHasher;
-
-pub mod custom_element;
-#[cfg(feature = "dioxus")]
-pub mod dioxus;
-#[cfg(feature = "layout-attributes")]
-pub mod layout_attributes;
-pub mod node;
-pub mod node_ref;
-pub mod node_watcher;
-mod passes;
-pub mod real_dom;
-pub mod tree;
-pub mod utils;
-
-pub use shipyard::EntityId as NodeId;
-
-pub mod exports {
-    //! Important dependencies that are used by the rest of the library
-    //! Feel free to just add the dependencies in your own Crates.toml
-    // exported for the macro
-    #[doc(hidden)]
-    pub use rustc_hash::FxHashSet;
-    pub use shipyard;
-}
-
-/// A prelude of commonly used items
-pub mod prelude {
-    #[cfg(feature = "dioxus")]
-    pub use crate::dioxus::*;
-    pub use crate::node::{ElementNode, FromAnyValue, NodeType, OwnedAttributeView, TextNode};
-    pub use crate::node_ref::{AttributeMaskBuilder, NodeMaskBuilder, NodeView};
-    pub use crate::passes::{run_pass, PassDirection, RunPassView, TypeErasedState};
-    pub use crate::passes::{Dependancy, DependancyView, Dependants, State};
-    pub use crate::real_dom::{NodeImmutable, NodeMut, NodeRef, RealDom};
-    pub use crate::NodeId;
-    pub use crate::SendAnyMap;
-}
-
-/// A map that can be sent between threads
-pub type FxDashMap<K, V> = dashmap::DashMap<K, V, BuildHasherDefault<FxHasher>>;
-/// A set that can be sent between threads
-pub type FxDashSet<K> = dashmap::DashSet<K, BuildHasherDefault<FxHasher>>;
-/// A map of types that can be sent between threads
-pub type SendAnyMap = anymap::Map<dyn Any + Send + Sync + 'static>;
diff --git a/packages/native-core/src/node.rs b/packages/native-core/src/node.rs
deleted file mode 100644
index 9644bda7f..000000000
--- a/packages/native-core/src/node.rs
+++ /dev/null
@@ -1,260 +0,0 @@
-//! Items related to Nodes in the RealDom
-
-use rustc_hash::{FxHashMap, FxHashSet};
-use shipyard::Component;
-use std::{
-    any::Any,
-    fmt::{Debug, Display},
-};
-
-/// A element node in the RealDom
-#[derive(Debug, Clone, Default)]
-pub struct ElementNode<V: FromAnyValue = ()> {
-    /// The [tag](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName) of the element
-    pub tag: String,
-    /// The [namespace](https://developer.mozilla.org/en-US/docs/Web/API/Element/namespaceURI) of the element
-    pub namespace: Option<String>,
-    /// The attributes of the element
-    pub attributes: FxHashMap<OwnedAttributeDiscription, OwnedAttributeValue<V>>,
-    /// The events the element is listening for
-    pub listeners: FxHashSet<String>,
-}
-
-impl ElementNode {
-    /// Create a new element node
-    pub fn new(tag: impl Into<String>, namespace: impl Into<Option<String>>) -> Self {
-        Self {
-            tag: tag.into(),
-            namespace: namespace.into(),
-            attributes: Default::default(),
-            listeners: Default::default(),
-        }
-    }
-}
-
-/// A text node in the RealDom
-#[derive(Debug, Clone, Default)]
-pub struct TextNode {
-    /// The text of the node
-    pub text: String,
-    /// The events the node is listening for
-    pub listeners: FxHashSet<String>,
-}
-
-impl TextNode {
-    /// Create a new text node
-    pub fn new(text: String) -> Self {
-        Self {
-            text,
-            listeners: Default::default(),
-        }
-    }
-}
-
-/// A type of node with data specific to the node type.
-#[derive(Debug, Clone, Component)]
-pub enum NodeType<V: FromAnyValue = ()> {
-    /// A text node
-    Text(TextNode),
-    /// An element node
-    Element(ElementNode<V>),
-    /// A placeholder node. This can be used as a cheaper placeholder for a node that will be created later
-    Placeholder,
-}
-
-impl<V: FromAnyValue, S: Into<String>> From<S> for NodeType<V> {
-    fn from(text: S) -> Self {
-        Self::Text(TextNode::new(text.into()))
-    }
-}
-
-impl<V: FromAnyValue> From<TextNode> for NodeType<V> {
-    fn from(text: TextNode) -> Self {
-        Self::Text(text)
-    }
-}
-
-impl<V: FromAnyValue> From<ElementNode<V>> for NodeType<V> {
-    fn from(element: ElementNode<V>) -> Self {
-        Self::Element(element)
-    }
-}
-
-/// A discription of an attribute on a DOM node, such as `id` or `href`.
-#[derive(Debug, Clone, Hash, PartialEq, Eq)]
-pub struct OwnedAttributeDiscription {
-    /// The name of the attribute.
-    pub name: String,
-    /// The namespace of the attribute used to identify what kind of attribute it is.
-    ///
-    /// For renderers that use HTML, this can be used to identify if the attribute is a style attribute.
-    /// Instead of parsing the style attribute every time a style is changed, you can set an attribute with the `style` namespace.
-    pub namespace: Option<String>,
-}
-
-impl From<String> for OwnedAttributeDiscription {
-    fn from(name: String) -> Self {
-        Self {
-            name,
-            namespace: None,
-        }
-    }
-}
-
-impl<S: Into<String>, N: Into<String>> From<(S, N)> for OwnedAttributeDiscription {
-    fn from(name: (S, N)) -> Self {
-        Self {
-            name: name.0.into(),
-            namespace: Some(name.1.into()),
-        }
-    }
-}
-
-/// An attribute on a DOM node, such as `id="my-thing"` or
-/// `href="https://example.com"`.
-#[derive(Clone, Copy, Debug)]
-pub struct OwnedAttributeView<'a, V: FromAnyValue = ()> {
-    /// The discription of the attribute.
-    pub attribute: &'a OwnedAttributeDiscription,
-
-    /// The value of the attribute.
-    pub value: &'a OwnedAttributeValue<V>,
-}
-
-/// The value of an attribute on a DOM node. This contains non-text values to allow users to skip parsing attribute values in some cases.
-#[derive(Clone)]
-pub enum OwnedAttributeValue<V: FromAnyValue = ()> {
-    /// A string value. This is the most common type of attribute.
-    Text(String),
-    /// A floating point value.
-    Float(f64),
-    /// An integer value.
-    Int(i64),
-    /// A boolean value.
-    Bool(bool),
-    /// A custom value specific to the renderer
-    Custom(V),
-}
-
-impl<V: FromAnyValue> From<String> for OwnedAttributeValue<V> {
-    fn from(value: String) -> Self {
-        Self::Text(value)
-    }
-}
-
-impl<V: FromAnyValue> From<f64> for OwnedAttributeValue<V> {
-    fn from(value: f64) -> Self {
-        Self::Float(value)
-    }
-}
-
-impl<V: FromAnyValue> From<i64> for OwnedAttributeValue<V> {
-    fn from(value: i64) -> Self {
-        Self::Int(value)
-    }
-}
-
-impl<V: FromAnyValue> From<bool> for OwnedAttributeValue<V> {
-    fn from(value: bool) -> Self {
-        Self::Bool(value)
-    }
-}
-
-impl<V: FromAnyValue> From<V> for OwnedAttributeValue<V> {
-    fn from(value: V) -> Self {
-        Self::Custom(value)
-    }
-}
-
-/// Something that can be converted from a borrowed [Any] value.
-pub trait FromAnyValue: Clone + 'static {
-    /// Convert from an [Any] value.
-    fn from_any_value(value: &dyn Any) -> Self;
-}
-
-impl FromAnyValue for () {
-    fn from_any_value(_: &dyn Any) -> Self {}
-}
-
-impl<V: FromAnyValue> Debug for OwnedAttributeValue<V> {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        match self {
-            Self::Text(arg0) => f.debug_tuple("Text").field(arg0).finish(),
-            Self::Float(arg0) => f.debug_tuple("Float").field(arg0).finish(),
-            Self::Int(arg0) => f.debug_tuple("Int").field(arg0).finish(),
-            Self::Bool(arg0) => f.debug_tuple("Bool").field(arg0).finish(),
-            Self::Custom(_) => f.debug_tuple("Any").finish(),
-        }
-    }
-}
-
-impl<V: FromAnyValue> Display for OwnedAttributeValue<V> {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        match self {
-            Self::Text(arg0) => f.write_str(arg0),
-            Self::Float(arg0) => f.write_str(&arg0.to_string()),
-            Self::Int(arg0) => f.write_str(&arg0.to_string()),
-            Self::Bool(arg0) => f.write_str(&arg0.to_string()),
-            Self::Custom(_) => f.write_str("custom"),
-        }
-    }
-}
-
-#[cfg(feature = "dioxus")]
-impl<V: FromAnyValue> From<&dioxus_core::AttributeValue> for OwnedAttributeValue<V> {
-    fn from(value: &dioxus_core::AttributeValue) -> Self {
-        match value {
-            dioxus_core::AttributeValue::Text(text) => Self::Text(text.clone()),
-            dioxus_core::AttributeValue::Float(float) => Self::Float(*float),
-            dioxus_core::AttributeValue::Int(int) => Self::Int(*int),
-            dioxus_core::AttributeValue::Bool(bool) => Self::Bool(*bool),
-            dioxus_core::AttributeValue::Any(any) => Self::Custom(V::from_any_value(any.as_any())),
-            dioxus_core::AttributeValue::None => panic!("None attribute values result in removing the attribute, not converting it to a None value."),
-            _ => panic!("Unsupported attribute value type"),
-        }
-    }
-}
-
-impl<V: FromAnyValue> OwnedAttributeValue<V> {
-    /// Attempt to convert the attribute value to a string.
-    pub fn as_text(&self) -> Option<&str> {
-        match self {
-            OwnedAttributeValue::Text(text) => Some(text),
-            _ => None,
-        }
-    }
-
-    /// Attempt to convert the attribute value to a float.
-    pub fn as_float(&self) -> Option<f64> {
-        match self {
-            OwnedAttributeValue::Float(float) => Some(*float),
-            OwnedAttributeValue::Int(int) => Some(*int as f64),
-            _ => None,
-        }
-    }
-
-    /// Attempt to convert the attribute value to an integer.
-    pub fn as_int(&self) -> Option<i64> {
-        match self {
-            OwnedAttributeValue::Float(float) => Some(*float as i64),
-            OwnedAttributeValue::Int(int) => Some(*int),
-            _ => None,
-        }
-    }
-
-    /// Attempt to convert the attribute value to a boolean.
-    pub fn as_bool(&self) -> Option<bool> {
-        match self {
-            OwnedAttributeValue::Bool(bool) => Some(*bool),
-            _ => None,
-        }
-    }
-
-    /// Attempt to convert the attribute value to a custom value.
-    pub fn as_custom(&self) -> Option<&V> {
-        match self {
-            OwnedAttributeValue::Custom(custom) => Some(custom),
-            _ => None,
-        }
-    }
-}
diff --git a/packages/native-core/src/node_ref.rs b/packages/native-core/src/node_ref.rs
deleted file mode 100644
index 156ecdbd6..000000000
--- a/packages/native-core/src/node_ref.rs
+++ /dev/null
@@ -1,332 +0,0 @@
-//! Utilities that provide limited access to nodes
-
-use rustc_hash::FxHashSet;
-
-use crate::{
-    node::{ElementNode, FromAnyValue, NodeType, OwnedAttributeView},
-    NodeId,
-};
-
-/// A view into a [NodeType] with a mask that determines what is visible.
-#[derive(Debug)]
-pub struct NodeView<'a, V: FromAnyValue = ()> {
-    id: NodeId,
-    inner: &'a NodeType<V>,
-    mask: &'a NodeMask,
-}
-
-impl<'a, V: FromAnyValue> NodeView<'a, V> {
-    /// Create a new NodeView from a VNode, and mask.
-    pub fn new(id: NodeId, node: &'a NodeType<V>, view: &'a NodeMask) -> Self {
-        Self {
-            inner: node,
-            mask: view,
-            id,
-        }
-    }
-
-    /// Get the node id of the node
-    pub fn node_id(&self) -> NodeId {
-        self.id
-    }
-
-    /// Get the tag of the node if the tag is enabled in the mask
-    pub fn tag(&self) -> Option<&'a str> {
-        self.mask
-            .tag
-            .then_some(match &self.inner {
-                NodeType::Element(ElementNode { tag, .. }) => Some(&**tag),
-                _ => None,
-            })
-            .flatten()
-    }
-
-    /// Get the tag of the node if the namespace is enabled in the mask
-    pub fn namespace(&self) -> Option<&'a str> {
-        self.mask
-            .namespace
-            .then_some(match &self.inner {
-                NodeType::Element(ElementNode { namespace, .. }) => namespace.as_deref(),
-                _ => None,
-            })
-            .flatten()
-    }
-
-    /// Get any attributes that are enabled in the mask
-    pub fn attributes<'b>(
-        &'b self,
-    ) -> Option<impl Iterator<Item = OwnedAttributeView<'a, V>> + 'b> {
-        match &self.inner {
-            NodeType::Element(ElementNode { attributes, .. }) => Some(
-                attributes
-                    .iter()
-                    .filter(move |(attr, _)| self.mask.attritutes.contains(&attr.name))
-                    .map(|(attr, val)| OwnedAttributeView {
-                        attribute: attr,
-                        value: val,
-                    }),
-            ),
-            _ => None,
-        }
-    }
-
-    /// Get the text if it is enabled in the mask
-    pub fn text(&self) -> Option<&str> {
-        self.mask
-            .text
-            .then_some(match &self.inner {
-                NodeType::Text(text) => Some(&text.text),
-                _ => None,
-            })
-            .flatten()
-            .map(|x| &**x)
-    }
-
-    /// Get the listeners if it is enabled in the mask
-    pub fn listeners(&self) -> Option<impl Iterator<Item = &'a str> + '_> {
-        if self.mask.listeners {
-            match &self.inner {
-                NodeType::Element(ElementNode { listeners, .. }) => {
-                    Some(listeners.iter().map(|l| &**l))
-                }
-                _ => None,
-            }
-        } else {
-            None
-        }
-    }
-}
-
-/// A mask that contains a list of attributes that are visible.
-#[derive(PartialEq, Eq, Clone, Debug)]
-pub enum AttributeMask {
-    /// All attributes are visible
-    All,
-    /// Only the given attributes are visible
-    Some(FxHashSet<Box<str>>),
-}
-
-impl AttributeMask {
-    /// Check if the mask contains the given attribute
-    pub fn contains(&self, attr: &str) -> bool {
-        match self {
-            AttributeMask::All => true,
-            AttributeMask::Some(attrs) => attrs.contains(attr),
-        }
-    }
-
-    /// Create a new dynamic attribute mask with a single attribute
-    pub fn single(new: &str) -> Self {
-        let mut set = FxHashSet::default();
-        set.insert(new.into());
-        Self::Some(set)
-    }
-
-    /// Combine two attribute masks
-    pub fn union(&self, other: &Self) -> Self {
-        match (self, other) {
-            (AttributeMask::Some(s), AttributeMask::Some(o)) => {
-                AttributeMask::Some(s.union(o).cloned().collect())
-            }
-            _ => AttributeMask::All,
-        }
-    }
-
-    /// Check if two attribute masks overlap
-    fn overlaps(&self, other: &Self) -> bool {
-        match (self, other) {
-            (AttributeMask::All, AttributeMask::Some(attrs)) => !attrs.is_empty(),
-            (AttributeMask::Some(attrs), AttributeMask::All) => !attrs.is_empty(),
-            (AttributeMask::Some(attrs1), AttributeMask::Some(attrs2)) => {
-                !attrs1.is_disjoint(attrs2)
-            }
-            _ => true,
-        }
-    }
-}
-
-impl Default for AttributeMask {
-    fn default() -> Self {
-        AttributeMask::Some(FxHashSet::default())
-    }
-}
-
-/// A mask that limits what parts of a node a dependency can see.
-#[derive(Default, PartialEq, Eq, Clone, Debug)]
-pub struct NodeMask {
-    attritutes: AttributeMask,
-    tag: bool,
-    namespace: bool,
-    text: bool,
-    listeners: bool,
-}
-
-impl NodeMask {
-    /// Check if two masks overlap
-    pub fn overlaps(&self, other: &Self) -> bool {
-        (self.tag && other.tag)
-            || (self.namespace && other.namespace)
-            || self.attritutes.overlaps(&other.attritutes)
-            || (self.text && other.text)
-            || (self.listeners && other.listeners)
-    }
-
-    /// Combine two node masks
-    pub fn union(&self, other: &Self) -> Self {
-        Self {
-            attritutes: self.attritutes.union(&other.attritutes),
-            tag: self.tag | other.tag,
-            namespace: self.namespace | other.namespace,
-            text: self.text | other.text,
-            listeners: self.listeners | other.listeners,
-        }
-    }
-
-    /// Allow the mask to view the given attributes
-    pub fn add_attributes(&mut self, attributes: AttributeMask) {
-        self.attritutes = self.attritutes.union(&attributes);
-    }
-
-    /// Get the mask for the attributes
-    pub fn attributes(&self) -> &AttributeMask {
-        &self.attritutes
-    }
-
-    /// Set the mask to view the tag
-    pub fn set_tag(&mut self) {
-        self.tag = true;
-    }
-
-    /// Get the mask for the tag
-    pub fn tag(&self) -> bool {
-        self.tag
-    }
-
-    /// Set the mask to view the namespace
-    pub fn set_namespace(&mut self) {
-        self.namespace = true;
-    }
-
-    /// Get the mask for the namespace
-    pub fn namespace(&self) -> bool {
-        self.namespace
-    }
-
-    /// Set the mask to view the text
-    pub fn set_text(&mut self) {
-        self.text = true;
-    }
-
-    /// Get the mask for the text
-    pub fn text(&self) -> bool {
-        self.text
-    }
-
-    /// Set the mask to view the listeners
-    pub fn set_listeners(&mut self) {
-        self.listeners = true;
-    }
-
-    /// Get the mask for the listeners
-    pub fn listeners(&self) -> bool {
-        self.listeners
-    }
-}
-
-/// A builder for a mask that controls what attributes are visible.
-#[derive(PartialEq, Eq, Clone, Debug)]
-pub enum AttributeMaskBuilder<'a> {
-    /// All attributes are visible
-    All,
-    /// Only the given attributes are visible
-    Some(&'a [&'a str]),
-}
-
-impl Default for AttributeMaskBuilder<'_> {
-    fn default() -> Self {
-        AttributeMaskBuilder::Some(&[])
-    }
-}
-
-/// A mask that limits what parts of a node a dependency can see.
-#[derive(Default, PartialEq, Eq, Clone, Debug)]
-pub struct NodeMaskBuilder<'a> {
-    attritutes: AttributeMaskBuilder<'a>,
-    tag: bool,
-    namespace: bool,
-    text: bool,
-    listeners: bool,
-}
-
-impl<'a> NodeMaskBuilder<'a> {
-    /// A node mask with no parts visible.
-    pub const NONE: Self = Self::new();
-    /// A node mask with every part visible.
-    pub const ALL: Self = Self::new()
-        .with_attrs(AttributeMaskBuilder::All)
-        .with_text()
-        .with_element()
-        .with_listeners();
-
-    /// Create a empty node mask
-    pub const fn new() -> Self {
-        Self {
-            attritutes: AttributeMaskBuilder::Some(&[]),
-            tag: false,
-            namespace: false,
-            text: false,
-            listeners: false,
-        }
-    }
-
-    /// Allow the mask to view the given attributes
-    pub const fn with_attrs(mut self, attritutes: AttributeMaskBuilder<'a>) -> Self {
-        self.attritutes = attritutes;
-        self
-    }
-
-    /// Allow the mask to view the tag
-    pub const fn with_tag(mut self) -> Self {
-        self.tag = true;
-        self
-    }
-
-    /// Allow the mask to view the namespace
-    pub const fn with_namespace(mut self) -> Self {
-        self.namespace = true;
-        self
-    }
-
-    /// Allow the mask to view the namespace and tag
-    pub const fn with_element(self) -> Self {
-        self.with_namespace().with_tag()
-    }
-
-    /// Allow the mask to view the text
-    pub const fn with_text(mut self) -> Self {
-        self.text = true;
-        self
-    }
-
-    /// Allow the mask to view the listeners
-    pub const fn with_listeners(mut self) -> Self {
-        self.listeners = true;
-        self
-    }
-
-    /// Build the mask
-    pub fn build(self) -> NodeMask {
-        NodeMask {
-            attritutes: match self.attritutes {
-                AttributeMaskBuilder::All => AttributeMask::All,
-                AttributeMaskBuilder::Some(attrs) => {
-                    AttributeMask::Some(attrs.iter().map(|s| (*s).into()).collect())
-                }
-            },
-            tag: self.tag,
-            namespace: self.namespace,
-            text: self.text,
-            listeners: self.listeners,
-        }
-    }
-}
diff --git a/packages/native-core/src/node_watcher.rs b/packages/native-core/src/node_watcher.rs
deleted file mode 100644
index d437b158c..000000000
--- a/packages/native-core/src/node_watcher.rs
+++ /dev/null
@@ -1,19 +0,0 @@
-//! Helpers for watching for changes in the DOM tree.
-
-use crate::{node::FromAnyValue, node_ref::AttributeMask, prelude::*};
-
-/// A trait for watching for changes in the DOM tree.
-pub trait NodeWatcher<V: FromAnyValue + Send + Sync> {
-    /// Called after a node is added to the tree.
-    fn on_node_added(&mut self, _node: NodeMut<V>) {}
-    /// Called before a node is removed from the tree.
-    fn on_node_removed(&mut self, _node: NodeMut<V>) {}
-    /// Called after a node is moved to a new parent.
-    fn on_node_moved(&mut self, _node: NodeMut<V>) {}
-}
-
-/// A trait for watching for changes to attributes of an element.
-pub trait AttributeWatcher<V: FromAnyValue + Send + Sync> {
-    /// Called before update_state is called on the RealDom
-    fn on_attributes_changed(&self, _node: NodeMut<V>, _attributes: &AttributeMask) {}
-}
diff --git a/packages/native-core/src/passes.rs b/packages/native-core/src/passes.rs
deleted file mode 100644
index a76dbc61c..000000000
--- a/packages/native-core/src/passes.rs
+++ /dev/null
@@ -1,379 +0,0 @@
-use parking_lot::RwLock;
-use rustc_hash::{FxHashMap, FxHashSet};
-use shipyard::{Borrow, BorrowInfo, Component, Unique, UniqueView, View, WorkloadSystem};
-use std::any::{Any, TypeId};
-use std::collections::BTreeMap;
-use std::marker::PhantomData;
-use std::ops::Deref;
-use std::sync::Arc;
-
-use crate::node::{FromAnyValue, NodeType};
-use crate::node_ref::{NodeMaskBuilder, NodeView};
-use crate::real_dom::{DirtyNodesResult, SendAnyMapWrapper};
-use crate::tree::{TreeRef, TreeRefView};
-use crate::SendAnyMap;
-use crate::{NodeId, NodeMask};
-
-#[derive(Default)]
-struct DirtyNodes {
-    nodes_dirty: FxHashSet<NodeId>,
-}
-
-impl DirtyNodes {
-    pub fn add_node(&mut self, node_id: NodeId) {
-        self.nodes_dirty.insert(node_id);
-    }
-
-    pub fn is_empty(&self) -> bool {
-        self.nodes_dirty.is_empty()
-    }
-
-    pub fn pop(&mut self) -> Option<NodeId> {
-        self.nodes_dirty.iter().next().copied().map(|id| {
-            self.nodes_dirty.remove(&id);
-            id
-        })
-    }
-}
-
-/// Tracks the dirty nodes sorted by height for each pass. We resolve passes based on the height of the node in order to avoid resolving any node twice in a pass.
-#[derive(Clone, Unique)]
-pub struct DirtyNodeStates {
-    dirty: Arc<FxHashMap<TypeId, RwLock<BTreeMap<u16, DirtyNodes>>>>,
-}
-
-impl DirtyNodeStates {
-    pub fn with_passes(passes: impl Iterator<Item = TypeId>) -> Self {
-        Self {
-            dirty: Arc::new(
-                passes
-                    .map(|pass| (pass, RwLock::new(BTreeMap::new())))
-                    .collect(),
-            ),
-        }
-    }
-
-    pub fn insert(&self, pass_id: TypeId, node_id: NodeId, height: u16) {
-        if let Some(btree) = self.dirty.get(&pass_id) {
-            let mut write = btree.write();
-            if let Some(entry) = write.get_mut(&height) {
-                entry.add_node(node_id);
-            } else {
-                let mut entry = DirtyNodes::default();
-                entry.add_node(node_id);
-                write.insert(height, entry);
-            }
-        }
-    }
-
-    fn pop_front(&self, pass_id: TypeId) -> Option<(u16, NodeId)> {
-        let mut values = self.dirty.get(&pass_id)?.write();
-        let mut value = values.first_entry()?;
-        let height = *value.key();
-        let ids = value.get_mut();
-        let id = ids.pop()?;
-        if ids.is_empty() {
-            value.remove_entry();
-        }
-
-        Some((height, id))
-    }
-
-    fn pop_back(&self, pass_id: TypeId) -> Option<(u16, NodeId)> {
-        let mut values = self.dirty.get(&pass_id)?.write();
-        let mut value = values.last_entry()?;
-        let height = *value.key();
-        let ids = value.get_mut();
-        let id = ids.pop()?;
-        if ids.is_empty() {
-            value.remove_entry();
-        }
-
-        Some((height, id))
-    }
-}
-
-/// A state that is automatically inserted in a node with dependencies.
-pub trait State<V: FromAnyValue + Send + Sync = ()>: Any + Send + Sync {
-    /// This is a tuple of (T: State, ..) of states read from the parent required to update this state
-    type ParentDependencies: Dependancy;
-    /// This is a tuple of (T: State, ..) of states read from the children required to update this state
-    type ChildDependencies: Dependancy;
-    /// This is a tuple of (T: State, ..) of states read from the node required to update this state
-    type NodeDependencies: Dependancy;
-    /// This is a mask of what aspects of the node are required to update this state
-    const NODE_MASK: NodeMaskBuilder<'static>;
-
-    /// Does the state traverse into the shadow dom or pass over it. This should be true for layout and false for styles
-    const TRAVERSE_SHADOW_DOM: bool = false;
-
-    /// Update this state in a node, returns if the state was updated
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView<V>,
-        node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        context: &SendAnyMap,
-    ) -> bool;
-
-    /// Create a new instance of this state
-    fn create<'a>(
-        node_view: NodeView<V>,
-        node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        context: &SendAnyMap,
-    ) -> Self;
-
-    /// Create a workload system for this state
-    fn workload_system(
-        type_id: TypeId,
-        dependants: Arc<Dependants>,
-        pass_direction: PassDirection,
-    ) -> WorkloadSystem;
-
-    /// Converts to a type erased version of the trait
-    fn to_type_erased() -> TypeErasedState<V>
-    where
-        Self: Sized,
-    {
-        let node_mask = Self::NODE_MASK.build();
-        TypeErasedState {
-            this_type_id: TypeId::of::<Self>(),
-            parent_dependancies_ids: Self::ParentDependencies::type_ids()
-                .iter()
-                .copied()
-                .collect(),
-            child_dependancies_ids: Self::ChildDependencies::type_ids()
-                .iter()
-                .copied()
-                .collect(),
-            node_dependancies_ids: Self::NodeDependencies::type_ids().iter().copied().collect(),
-            dependants: Default::default(),
-            mask: node_mask,
-            pass_direction: pass_direction::<V, Self>(),
-            enter_shadow_dom: Self::TRAVERSE_SHADOW_DOM,
-            workload: Self::workload_system,
-            phantom: PhantomData,
-        }
-    }
-}
-
-fn pass_direction<V: FromAnyValue + Send + Sync, S: State<V>>() -> PassDirection {
-    if S::ChildDependencies::type_ids()
-        .iter()
-        .any(|type_id| *type_id == TypeId::of::<S>())
-    {
-        PassDirection::ChildToParent
-    } else if S::ParentDependencies::type_ids()
-        .iter()
-        .any(|type_id| *type_id == TypeId::of::<S>())
-    {
-        PassDirection::ParentToChild
-    } else {
-        PassDirection::AnyOrder
-    }
-}
-
-#[doc(hidden)]
-#[derive(Borrow, BorrowInfo)]
-pub struct RunPassView<'a, V: FromAnyValue + Send + Sync = ()> {
-    pub tree: TreeRefView<'a>,
-    pub node_type: View<'a, NodeType<V>>,
-    dirty_nodes_result: UniqueView<'a, DirtyNodesResult>,
-    node_states: UniqueView<'a, DirtyNodeStates>,
-    any_map: UniqueView<'a, SendAnyMapWrapper>,
-}
-
-// This is used by the macro
-/// Updates the given pass, marking any nodes that were changed
-#[doc(hidden)]
-pub fn run_pass<V: FromAnyValue + Send + Sync>(
-    type_id: TypeId,
-    dependants: Arc<Dependants>,
-    pass_direction: PassDirection,
-    view: RunPassView<V>,
-    mut update_node: impl FnMut(NodeId, &SendAnyMap) -> bool,
-) {
-    let RunPassView {
-        tree,
-        dirty_nodes_result: nodes_updated,
-        node_states: dirty,
-        any_map: ctx,
-        ..
-    } = view;
-    let ctx = ctx.as_ref();
-    match pass_direction {
-        PassDirection::ParentToChild => {
-            while let Some((height, id)) = dirty.pop_front(type_id) {
-                if (update_node)(id, ctx) {
-                    nodes_updated.insert(id);
-                    dependants.mark_dirty(&dirty, id, &tree, height);
-                }
-            }
-        }
-        PassDirection::ChildToParent => {
-            while let Some((height, id)) = dirty.pop_back(type_id) {
-                if (update_node)(id, ctx) {
-                    nodes_updated.insert(id);
-                    dependants.mark_dirty(&dirty, id, &tree, height);
-                }
-            }
-        }
-        PassDirection::AnyOrder => {
-            while let Some((height, id)) = dirty.pop_back(type_id) {
-                if (update_node)(id, ctx) {
-                    nodes_updated.insert(id);
-                    dependants.mark_dirty(&dirty, id, &tree, height);
-                }
-            }
-        }
-    }
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-pub(crate) struct Dependant {
-    pub(crate) type_id: TypeId,
-    pub(crate) enter_shadow_dom: bool,
-}
-
-/// The states that depend on this state
-#[derive(Default, Debug, Clone, PartialEq, Eq)]
-pub struct Dependants {
-    /// The states in the parent direction that should be invalidated when this state is invalidated
-    pub(crate) parent: Vec<Dependant>,
-    /// The states in the child direction that should be invalidated when this state is invalidated
-    pub(crate) child: Vec<Dependant>,
-    /// The states in the node direction that should be invalidated when this state is invalidated
-    pub(crate) node: Vec<TypeId>,
-}
-
-impl Dependants {
-    fn mark_dirty(&self, dirty: &DirtyNodeStates, id: NodeId, tree: &impl TreeRef, height: u16) {
-        for &Dependant {
-            type_id,
-            enter_shadow_dom,
-        } in &self.child
-        {
-            for id in tree.children_ids_advanced(id, enter_shadow_dom) {
-                dirty.insert(type_id, id, height + 1);
-            }
-        }
-
-        for &Dependant {
-            type_id,
-            enter_shadow_dom,
-        } in &self.parent
-        {
-            if let Some(id) = tree.parent_id_advanced(id, enter_shadow_dom) {
-                dirty.insert(type_id, id, height - 1);
-            }
-        }
-
-        for dependant in &self.node {
-            dirty.insert(*dependant, id, height);
-        }
-    }
-}
-
-/// A type erased version of [`State`] that can be added to the [`crate::prelude::RealDom`] with [`crate::prelude::RealDom::new`]
-pub struct TypeErasedState<V: FromAnyValue + Send = ()> {
-    pub(crate) this_type_id: TypeId,
-    pub(crate) parent_dependancies_ids: FxHashSet<TypeId>,
-    pub(crate) child_dependancies_ids: FxHashSet<TypeId>,
-    pub(crate) node_dependancies_ids: FxHashSet<TypeId>,
-    pub(crate) dependants: Arc<Dependants>,
-    pub(crate) mask: NodeMask,
-    pub(crate) workload: fn(TypeId, Arc<Dependants>, PassDirection) -> WorkloadSystem,
-    pub(crate) pass_direction: PassDirection,
-    pub(crate) enter_shadow_dom: bool,
-    phantom: PhantomData<V>,
-}
-
-impl<V: FromAnyValue + Send> TypeErasedState<V> {
-    pub(crate) fn create_workload(&self) -> WorkloadSystem {
-        (self.workload)(
-            self.this_type_id,
-            self.dependants.clone(),
-            self.pass_direction,
-        )
-    }
-
-    pub(crate) fn combined_dependancy_type_ids(&self) -> impl Iterator<Item = TypeId> + '_ {
-        self.parent_dependancies_ids
-            .iter()
-            .chain(self.child_dependancies_ids.iter())
-            .chain(self.node_dependancies_ids.iter())
-            .copied()
-    }
-}
-
-/// The direction that a pass should be run in
-#[derive(Debug, Clone, Copy, Hash, PartialEq, Eq)]
-pub enum PassDirection {
-    /// The pass should be run from the root to the leaves
-    ParentToChild,
-    /// The pass should be run from the leaves to the root
-    ChildToParent,
-    /// The pass can be run in any order
-    AnyOrder,
-}
-
-/// A trait that is implemented for all the dependancies of a [`State`]
-pub trait Dependancy {
-    /// A tuple with all the elements of the dependancy as [`DependancyView`]
-    type ElementBorrowed<'a>;
-
-    /// Returns a list of all the [`TypeId`]s of the elements in the dependancy
-    fn type_ids() -> Box<[TypeId]> {
-        Box::new([])
-    }
-}
-
-macro_rules! impl_dependancy {
-    ($($t:ident),*) => {
-        impl< $($t: Send + Sync + Component),* > Dependancy for ($($t,)*) {
-            type ElementBorrowed<'a> = ($(DependancyView<'a, $t>,)*);
-
-            fn type_ids() -> Box<[TypeId]> {
-                Box::new([$(TypeId::of::<$t>()),*])
-            }
-        }
-    };
-}
-
-// TODO: track what components are actually read to update subscriptions
-// making this a wrapper makes it possible to implement that optimization without a breaking change
-/// A immutable view of a [`State`]
-pub struct DependancyView<'a, T> {
-    inner: &'a T,
-}
-
-impl<'a, T> DependancyView<'a, T> {
-    // This should only be used in the macro. This is not a public API or stable
-    #[doc(hidden)]
-    pub fn new(inner: &'a T) -> Self {
-        Self { inner }
-    }
-}
-
-impl<'a, T> Deref for DependancyView<'a, T> {
-    type Target = T;
-
-    fn deref(&self) -> &Self::Target {
-        self.inner
-    }
-}
-
-impl_dependancy!();
-impl_dependancy!(A);
-impl_dependancy!(A, B);
-impl_dependancy!(A, B, C);
-impl_dependancy!(A, B, C, D);
-impl_dependancy!(A, B, C, D, E);
-impl_dependancy!(A, B, C, D, E, F);
-impl_dependancy!(A, B, C, D, E, F, G);
-impl_dependancy!(A, B, C, D, E, F, G, H);
-impl_dependancy!(A, B, C, D, E, F, G, H, I);
-impl_dependancy!(A, B, C, D, E, F, G, H, I, J);
diff --git a/packages/native-core/src/real_dom.rs b/packages/native-core/src/real_dom.rs
deleted file mode 100644
index 69ff87793..000000000
--- a/packages/native-core/src/real_dom.rs
+++ /dev/null
@@ -1,1241 +0,0 @@
-//! A Dom that can sync with the VirtualDom mutations intended for use in lazy renderers.
-
-use rustc_hash::{FxHashMap, FxHashSet};
-use shipyard::error::GetStorage;
-use shipyard::track::Untracked;
-use shipyard::{Component, Get, IntoBorrow, ScheduledWorkload, Unique, View, ViewMut, Workload};
-use shipyard::{SystemModificator, World};
-use std::any::TypeId;
-use std::collections::VecDeque;
-use std::ops::{Deref, DerefMut};
-use std::sync::{Arc, RwLock};
-
-use crate::custom_element::{
-    CustomElement, CustomElementFactory, CustomElementManager, CustomElementRegistry,
-    CustomElementUpdater,
-};
-use crate::node::{
-    ElementNode, FromAnyValue, NodeType, OwnedAttributeDiscription, OwnedAttributeValue, TextNode,
-};
-use crate::node_ref::{NodeMask, NodeMaskBuilder};
-use crate::node_watcher::{AttributeWatcher, NodeWatcher};
-use crate::passes::{Dependant, DirtyNodeStates, PassDirection, TypeErasedState};
-use crate::prelude::AttributeMaskBuilder;
-use crate::tree::{TreeMut, TreeMutView, TreeRef, TreeRefView};
-use crate::NodeId;
-use crate::{FxDashSet, SendAnyMap};
-
-/// The context passes can receive when they are executed
-#[derive(Unique)]
-pub(crate) struct SendAnyMapWrapper(SendAnyMap);
-
-impl Deref for SendAnyMapWrapper {
-    type Target = SendAnyMap;
-
-    fn deref(&self) -> &Self::Target {
-        &self.0
-    }
-}
-
-/// The nodes that were changed when updating the state of the RealDom
-#[derive(Unique, Default)]
-pub(crate) struct DirtyNodesResult(FxDashSet<NodeId>);
-
-impl Deref for DirtyNodesResult {
-    type Target = FxDashSet<NodeId>;
-
-    fn deref(&self) -> &Self::Target {
-        &self.0
-    }
-}
-
-/// The nodes that have been marked as dirty in the RealDom
-pub(crate) struct NodesDirty<V: FromAnyValue + Send + Sync> {
-    passes_updated: FxHashMap<NodeId, FxHashSet<TypeId>>,
-    nodes_updated: FxHashMap<NodeId, NodeMask>,
-    nodes_created: FxHashSet<NodeId>,
-    pub(crate) passes: Box<[TypeErasedState<V>]>,
-}
-
-impl<V: FromAnyValue + Send + Sync> NodesDirty<V> {
-    /// Mark a node as dirty
-    fn mark_dirty(&mut self, node_id: NodeId, mask: NodeMask) {
-        self.passes_updated.entry(node_id).or_default().extend(
-            self.passes
-                .iter()
-                .filter_map(|x| x.mask.overlaps(&mask).then_some(x.this_type_id)),
-        );
-        let nodes_updated = &mut self.nodes_updated;
-        if let Some(node) = nodes_updated.get_mut(&node_id) {
-            *node = node.union(&mask);
-        } else {
-            nodes_updated.insert(node_id, mask);
-        }
-    }
-
-    /// Mark a node that has had a parent changed
-    fn mark_parent_added_or_removed(&mut self, node_id: NodeId) {
-        let hm = self.passes_updated.entry(node_id).or_default();
-        for pass in &*self.passes {
-            // If any of the states in this node depend on the parent then mark them as dirty
-            for &pass in &pass.parent_dependancies_ids {
-                hm.insert(pass);
-            }
-        }
-    }
-
-    /// Mark a node as having a child added or removed
-    fn mark_child_changed(&mut self, node_id: NodeId) {
-        let hm = self.passes_updated.entry(node_id).or_default();
-        for pass in &*self.passes {
-            // If any of the states in this node depend on the children then mark them as dirty
-            for &pass in &pass.child_dependancies_ids {
-                hm.insert(pass);
-            }
-        }
-    }
-}
-
-type NodeWatchers<V> = Arc<RwLock<Vec<Box<dyn NodeWatcher<V> + Send + Sync>>>>;
-type AttributeWatchers<V> = Arc<RwLock<Vec<Box<dyn AttributeWatcher<V> + Send + Sync>>>>;
-
-/// A Dom that can sync with the VirtualDom mutations intended for use in lazy renderers.
-/// The render state passes from parent to children and or accumulates state from children to parents.
-/// To get started:
-/// 1) Implement [crate::passes::State] for each part of your state that you want to compute incrementally
-/// 2) Create a RealDom [RealDom::new], passing in each state you created
-/// 3) Update the state of the RealDom by adding and modifying nodes
-/// 4) Call [RealDom::update_state] to update the state of incrementally computed values on each node
-///
-/// # Custom attribute values
-/// To allow custom values to be passed into attributes implement FromAnyValue on a type that can represent your custom value and specify the V generic to be that type. If you have many different custom values, it can be useful to use a enum type to represent the variants.
-pub struct RealDom<V: FromAnyValue + Send + Sync = ()> {
-    pub(crate) world: World,
-    nodes_listening: FxHashMap<String, FxHashSet<NodeId>>,
-    pub(crate) dirty_nodes: NodesDirty<V>,
-    node_watchers: NodeWatchers<V>,
-    attribute_watchers: AttributeWatchers<V>,
-    workload: ScheduledWorkload,
-    root_id: NodeId,
-    custom_elements: Arc<RwLock<CustomElementRegistry<V>>>,
-    phantom: std::marker::PhantomData<V>,
-}
-
-impl<V: FromAnyValue + Send + Sync> RealDom<V> {
-    /// Create a new RealDom with the given states that will be inserted and updated when needed
-    pub fn new(tracked_states: impl Into<Box<[TypeErasedState<V>]>>) -> RealDom<V> {
-        let mut tracked_states = tracked_states.into();
-        // resolve dependants for each pass
-        for i in 1..=tracked_states.len() {
-            let (before, after) = tracked_states.split_at_mut(i);
-            let (current, before) = before.split_last_mut().unwrap();
-            for state in before.iter_mut().chain(after.iter_mut()) {
-                let dependants = Arc::get_mut(&mut state.dependants).unwrap();
-
-                let current_dependant = Dependant {
-                    type_id: current.this_type_id,
-                    enter_shadow_dom: current.enter_shadow_dom,
-                };
-
-                // If this node depends on the other state as a parent, then the other state should update its children of the current type when it is invalidated
-                if current
-                    .parent_dependancies_ids
-                    .contains(&state.this_type_id)
-                    && !dependants.child.contains(&current_dependant)
-                {
-                    dependants.child.push(current_dependant);
-                }
-                // If this node depends on the other state as a child, then the other state should update its parent of the current type when it is invalidated
-                if current.child_dependancies_ids.contains(&state.this_type_id)
-                    && !dependants.parent.contains(&current_dependant)
-                {
-                    dependants.parent.push(current_dependant);
-                }
-                // If this node depends on the other state as a sibling, then the other state should update its siblings of the current type when it is invalidated
-                if current.node_dependancies_ids.contains(&state.this_type_id)
-                    && !dependants.node.contains(&current.this_type_id)
-                {
-                    dependants.node.push(current.this_type_id);
-                }
-            }
-            // If the current state depends on itself, then it should update itself when it is invalidated
-            let dependants = Arc::get_mut(&mut current.dependants).unwrap();
-            let current_dependant = Dependant {
-                type_id: current.this_type_id,
-                enter_shadow_dom: current.enter_shadow_dom,
-            };
-            match current.pass_direction {
-                PassDirection::ChildToParent => {
-                    if !dependants.parent.contains(&current_dependant) {
-                        dependants.parent.push(current_dependant);
-                    }
-                }
-                PassDirection::ParentToChild => {
-                    if !dependants.child.contains(&current_dependant) {
-                        dependants.child.push(current_dependant);
-                    }
-                }
-                _ => {}
-            }
-        }
-        let workload = construct_workload(&mut tracked_states);
-        let (workload, _) = workload.build().unwrap();
-        let mut world = World::new();
-        let root_node: NodeType<V> = NodeType::Element(ElementNode {
-            tag: "Root".to_string(),
-            namespace: Some("Root".to_string()),
-            attributes: FxHashMap::default(),
-            listeners: FxHashSet::default(),
-        });
-        let root_id = world.add_entity(root_node);
-        {
-            let mut tree: TreeMutView = world.borrow().unwrap();
-            tree.create_node(root_id);
-        }
-
-        let mut passes_updated = FxHashMap::default();
-        let mut nodes_updated = FxHashMap::default();
-
-        passes_updated.insert(
-            root_id,
-            tracked_states.iter().map(|x| x.this_type_id).collect(),
-        );
-        nodes_updated.insert(root_id, NodeMaskBuilder::ALL.build());
-
-        RealDom {
-            world,
-            nodes_listening: FxHashMap::default(),
-            dirty_nodes: NodesDirty {
-                passes_updated,
-                nodes_updated,
-                passes: tracked_states,
-                nodes_created: [root_id].into_iter().collect(),
-            },
-            node_watchers: Default::default(),
-            attribute_watchers: Default::default(),
-            workload,
-            root_id,
-            custom_elements: Default::default(),
-            phantom: std::marker::PhantomData,
-        }
-    }
-
-    /// Get a reference to the tree.
-    pub fn tree_ref(&self) -> TreeRefView {
-        self.world.borrow().unwrap()
-    }
-
-    /// Get a mutable reference to the tree.
-    pub fn tree_mut(&self) -> TreeMutView {
-        self.world.borrow().unwrap()
-    }
-
-    /// Create a new node of the given type in the dom and return a mutable reference to it.
-    pub fn create_node(&mut self, node: impl Into<NodeType<V>>) -> NodeMut<'_, V> {
-        let node = node.into();
-        let is_element = matches!(node, NodeType::Element(_));
-
-        let id = self.world.add_entity(node);
-        self.tree_mut().create_node(id);
-
-        self.dirty_nodes
-            .passes_updated
-            .entry(id)
-            .or_default()
-            .extend(self.dirty_nodes.passes.iter().map(|x| x.this_type_id));
-        self.dirty_nodes
-            .mark_dirty(id, NodeMaskBuilder::ALL.build());
-        self.dirty_nodes.nodes_created.insert(id);
-
-        // Create a custom element if needed
-        if is_element {
-            let custom_elements = self.custom_elements.clone();
-            custom_elements
-                .read()
-                .unwrap()
-                .add_shadow_dom(NodeMut::new(id, self));
-        }
-
-        NodeMut::new(id, self)
-    }
-
-    /// Find all nodes that are listening for an event, sorted by there height in the dom progressing starting at the bottom and progressing up.
-    /// This can be useful to avoid creating duplicate events.
-    pub fn get_listening_sorted(&self, event: &str) -> Vec<NodeRef<V>> {
-        if let Some(nodes) = self.nodes_listening.get(event) {
-            let mut listening: Vec<_> = nodes
-                .iter()
-                .map(|id| (*id, self.tree_ref().height(*id).unwrap()))
-                .collect();
-            listening.sort_by(|(_, h1), (_, h2)| h1.cmp(h2).reverse());
-            listening
-                .into_iter()
-                .map(|(id, _)| NodeRef { id, dom: self })
-                .collect()
-        } else {
-            Vec::new()
-        }
-    }
-
-    /// Returns the id of the root node.
-    pub fn root_id(&self) -> NodeId {
-        self.root_id
-    }
-
-    /// Check if a node exists in the dom.
-    pub fn contains(&self, id: NodeId) -> bool {
-        self.tree_ref().contains(id)
-    }
-
-    /// Get a reference to a node.
-    pub fn get(&self, id: NodeId) -> Option<NodeRef<'_, V>> {
-        self.contains(id).then_some(NodeRef { id, dom: self })
-    }
-
-    /// Get a mutable reference to a node.
-    pub fn get_mut(&mut self, id: NodeId) -> Option<NodeMut<'_, V>> {
-        let contains = self.contains(id);
-        contains.then(|| NodeMut::new(id, self))
-    }
-
-    /// Borrow a component from the world without updating the dirty nodes.
-    fn borrow_raw<'a, B: IntoBorrow>(&'a self) -> Result<B, GetStorage>
-    where
-        B::Borrow: shipyard::Borrow<'a, View = B>,
-    {
-        self.world.borrow()
-    }
-
-    /// Borrow a component from the world without updating the dirty nodes.
-    fn borrow_node_type_mut(&self) -> Result<ViewMut<NodeType<V>>, GetStorage> {
-        self.world.borrow()
-    }
-
-    /// Update the state of the dom, after appling some mutations. This will keep the nodes in the dom up to date with their VNode counterparts.
-    pub fn update_state(
-        &mut self,
-        ctx: SendAnyMap,
-    ) -> (FxDashSet<NodeId>, FxHashMap<NodeId, NodeMask>) {
-        let nodes_created = std::mem::take(&mut self.dirty_nodes.nodes_created);
-
-        // call node watchers
-        {
-            let watchers = self.node_watchers.clone();
-
-            // ignore watchers if they are already being modified
-            if let Ok(mut watchers) = watchers.try_write() {
-                for id in &nodes_created {
-                    for watcher in &mut *watchers {
-                        watcher.on_node_added(NodeMut::new(*id, self));
-                    }
-                }
-            };
-        }
-
-        let passes = std::mem::take(&mut self.dirty_nodes.passes_updated);
-        let nodes_updated = std::mem::take(&mut self.dirty_nodes.nodes_updated);
-
-        for (node_id, mask) in &nodes_updated {
-            if self.contains(*node_id) {
-                // call attribute watchers but ignore watchers if they are already being modified
-                let watchers = self.attribute_watchers.clone();
-                if let Ok(mut watchers) = watchers.try_write() {
-                    for watcher in &mut *watchers {
-                        watcher.on_attributes_changed(
-                            self.get_mut(*node_id).unwrap(),
-                            mask.attributes(),
-                        );
-                    }
-                };
-
-                // call custom element watchers
-                let node = self.get_mut(*node_id).unwrap();
-                let custom_element_manager =
-                    node.get::<CustomElementManager<V>>().map(|x| x.clone());
-                if let Some(custom_element_manager) = custom_element_manager {
-                    custom_element_manager.on_attributes_changed(node, mask.attributes());
-                }
-            }
-        }
-
-        let dirty_nodes =
-            DirtyNodeStates::with_passes(self.dirty_nodes.passes.iter().map(|p| p.this_type_id));
-        let tree = self.tree_ref();
-        for (node_id, passes) in passes {
-            // remove any nodes that were created and then removed in the same mutations from the dirty nodes list
-            if let Some(height) = tree.height(node_id) {
-                for pass in passes {
-                    dirty_nodes.insert(pass, node_id, height);
-                }
-            }
-        }
-
-        let _ = self.world.remove_unique::<DirtyNodeStates>();
-        let _ = self.world.remove_unique::<SendAnyMapWrapper>();
-        self.world.add_unique(dirty_nodes);
-        self.world.add_unique(SendAnyMapWrapper(ctx));
-        self.world.add_unique(DirtyNodesResult::default());
-
-        self.workload.run_with_world(&self.world).unwrap();
-
-        let dirty = self.world.remove_unique::<DirtyNodesResult>().unwrap();
-
-        (dirty.0, nodes_updated)
-    }
-
-    /// Traverses the dom in a depth first manner, calling the provided function on each node.
-    /// If `enter_shadow_dom` is true, then the traversal will enter shadow doms in the tree.
-    pub fn traverse_depth_first_advanced(
-        &self,
-        enter_shadow_dom: bool,
-        mut f: impl FnMut(NodeRef<V>),
-    ) {
-        let mut stack = vec![self.root_id()];
-        let tree = self.tree_ref();
-        while let Some(id) = stack.pop() {
-            if let Some(node) = self.get(id) {
-                f(node);
-                let children = tree.children_ids_advanced(id, enter_shadow_dom);
-                stack.extend(children.iter().copied().rev());
-            }
-        }
-    }
-
-    /// Traverses the dom in a depth first manner, calling the provided function on each node.
-    pub fn traverse_depth_first(&self, f: impl FnMut(NodeRef<V>)) {
-        self.traverse_depth_first_advanced(true, f)
-    }
-
-    /// Traverses the dom in a breadth first manner, calling the provided function on each node.
-    /// If `enter_shadow_dom` is true, then the traversal will enter shadow doms in the tree.
-    pub fn traverse_breadth_first_advanced(
-        &self,
-        enter_shadow_doms: bool,
-        mut f: impl FnMut(NodeRef<V>),
-    ) {
-        let mut queue = VecDeque::new();
-        queue.push_back(self.root_id());
-        let tree = self.tree_ref();
-        while let Some(id) = queue.pop_front() {
-            if let Some(node) = self.get(id) {
-                f(node);
-                let children = tree.children_ids_advanced(id, enter_shadow_doms);
-                for id in children {
-                    queue.push_back(id);
-                }
-            }
-        }
-    }
-
-    /// Traverses the dom in a breadth first manner, calling the provided function on each node.
-    pub fn traverse_breadth_first(&self, f: impl FnMut(NodeRef<V>)) {
-        self.traverse_breadth_first_advanced(true, f);
-    }
-
-    /// Traverses the dom in a depth first manner mutably, calling the provided function on each node.
-    /// If `enter_shadow_dom` is true, then the traversal will enter shadow doms in the tree.
-    pub fn traverse_depth_first_mut_advanced(
-        &mut self,
-        enter_shadow_doms: bool,
-        mut f: impl FnMut(NodeMut<V>),
-    ) {
-        let mut stack = vec![self.root_id()];
-        while let Some(id) = stack.pop() {
-            let tree = self.tree_ref();
-            let mut children = tree.children_ids_advanced(id, enter_shadow_doms);
-            drop(tree);
-            children.reverse();
-            if let Some(node) = self.get_mut(id) {
-                f(node);
-                stack.extend(children.iter());
-            }
-        }
-    }
-
-    /// Traverses the dom in a depth first manner mutably, calling the provided function on each node.
-    pub fn traverse_depth_first_mut(&mut self, f: impl FnMut(NodeMut<V>)) {
-        self.traverse_depth_first_mut_advanced(true, f)
-    }
-
-    /// Traverses the dom in a breadth first manner mutably, calling the provided function on each node.
-    /// If `enter_shadow_dom` is true, then the traversal will enter shadow doms in the tree.
-    pub fn traverse_breadth_first_mut_advanced(
-        &mut self,
-        enter_shadow_doms: bool,
-        mut f: impl FnMut(NodeMut<V>),
-    ) {
-        let mut queue = VecDeque::new();
-        queue.push_back(self.root_id());
-        while let Some(id) = queue.pop_front() {
-            let tree = self.tree_ref();
-            let children = tree.children_ids_advanced(id, enter_shadow_doms);
-            drop(tree);
-            if let Some(node) = self.get_mut(id) {
-                f(node);
-                for id in children {
-                    queue.push_back(id);
-                }
-            }
-        }
-    }
-
-    /// Traverses the dom in a breadth first manner mutably, calling the provided function on each node.
-    pub fn traverse_breadth_first_mut(&mut self, f: impl FnMut(NodeMut<V>)) {
-        self.traverse_breadth_first_mut_advanced(true, f);
-    }
-
-    /// Adds a [`NodeWatcher`] to the dom. Node watchers are called whenever a node is created or removed.
-    pub fn add_node_watcher(&mut self, watcher: impl NodeWatcher<V> + 'static + Send + Sync) {
-        self.node_watchers.write().unwrap().push(Box::new(watcher));
-    }
-
-    /// Adds an [`AttributeWatcher`] to the dom. Attribute watchers are called whenever an attribute is changed.
-    pub fn add_attribute_watcher(
-        &mut self,
-        watcher: impl AttributeWatcher<V> + 'static + Send + Sync,
-    ) {
-        self.attribute_watchers
-            .write()
-            .unwrap()
-            .push(Box::new(watcher));
-    }
-
-    /// Returns a reference to the underlying world. Any changes made to the world will not update the reactive system.
-    pub fn raw_world(&self) -> &World {
-        &self.world
-    }
-
-    /// Returns a mutable reference to the underlying world. Any changes made to the world will not update the reactive system.
-    pub fn raw_world_mut(&mut self) -> &mut World {
-        &mut self.world
-    }
-
-    /// Registers a new custom element.
-    pub fn register_custom_element<E: CustomElement<V>>(&mut self) {
-        self.register_custom_element_with_factory::<E, E>()
-    }
-
-    /// Registers a new custom element with a custom factory.
-    pub fn register_custom_element_with_factory<F, U>(&mut self)
-    where
-        F: CustomElementFactory<U, V>,
-        U: CustomElementUpdater<V>,
-    {
-        self.custom_elements.write().unwrap().register::<F, U>()
-    }
-}
-
-/// A reference to a tracked component in a node.
-pub struct ViewEntry<'a, V: Component + Send + Sync> {
-    view: View<'a, V>,
-    id: NodeId,
-}
-
-impl<'a, V: Component + Send + Sync> ViewEntry<'a, V> {
-    fn new(view: View<'a, V>, id: NodeId) -> Self {
-        Self { view, id }
-    }
-}
-
-impl<'a, V: Component + Send + Sync> Deref for ViewEntry<'a, V> {
-    type Target = V;
-
-    fn deref(&self) -> &Self::Target {
-        &self.view[self.id]
-    }
-}
-
-/// A mutable reference to a tracked component in a node.
-pub struct ViewEntryMut<'a, V: Component<Tracking = Untracked> + Send + Sync> {
-    view: ViewMut<'a, V, Untracked>,
-    id: NodeId,
-}
-
-impl<'a, V: Component<Tracking = Untracked> + Send + Sync> ViewEntryMut<'a, V> {
-    fn new(view: ViewMut<'a, V, Untracked>, id: NodeId) -> Self {
-        Self { view, id }
-    }
-}
-
-impl<'a, V: Component<Tracking = Untracked> + Send + Sync> Deref for ViewEntryMut<'a, V> {
-    type Target = V;
-
-    fn deref(&self) -> &Self::Target {
-        self.view.get(self.id).unwrap()
-    }
-}
-
-impl<'a, V: Component<Tracking = Untracked> + Send + Sync> DerefMut for ViewEntryMut<'a, V> {
-    fn deref_mut(&mut self) -> &mut Self::Target {
-        (&mut self.view).get(self.id).unwrap()
-    }
-}
-
-/// A immutable view of a node
-pub trait NodeImmutable<V: FromAnyValue + Send + Sync = ()>: Sized {
-    /// Get the real dom this node was created in
-    fn real_dom(&self) -> &RealDom<V>;
-
-    /// Get the id of the current node
-    fn id(&self) -> NodeId;
-
-    /// Get the type of the current node
-    #[inline]
-    fn node_type(&self) -> ViewEntry<NodeType<V>> {
-        self.get().unwrap()
-    }
-
-    /// Get a component from the current node
-    #[inline]
-    fn get<'a, T: Component + Sync + Send>(&'a self) -> Option<ViewEntry<'a, T>> {
-        // self.real_dom().tree.get(self.id())
-        let view: View<'a, T> = self.real_dom().borrow_raw().ok()?;
-        view.contains(self.id())
-            .then(|| ViewEntry::new(view, self.id()))
-    }
-
-    /// Get the ids of the children of the current node, if enter_shadow_dom is true and the current node is a shadow slot, the ids of the nodes under the node the shadow slot is attached to will be returned
-    #[inline]
-    fn children_ids_advanced(&self, id: NodeId, enter_shadow_dom: bool) -> Vec<NodeId> {
-        self.real_dom()
-            .tree_ref()
-            .children_ids_advanced(id, enter_shadow_dom)
-    }
-
-    /// Get the ids of the children of the current node
-    #[inline]
-    fn child_ids(&self) -> Vec<NodeId> {
-        self.real_dom().tree_ref().children_ids(self.id())
-    }
-
-    /// Get the children of the current node
-    #[inline]
-    fn children(&self) -> Vec<NodeRef<V>> {
-        self.child_ids()
-            .iter()
-            .map(|id| NodeRef {
-                id: *id,
-                dom: self.real_dom(),
-            })
-            .collect()
-    }
-
-    /// Get the id of the parent of the current node, if enter_shadow_dom is true and the current node is a shadow root, the node the shadow root is attached to will be returned
-    #[inline]
-    fn parent_id_advanced(&self, id: NodeId, enter_shadow_dom: bool) -> Option<NodeId> {
-        self.real_dom()
-            .tree_ref()
-            .parent_id_advanced(id, enter_shadow_dom)
-    }
-
-    /// Get the id of the parent of the current node
-    #[inline]
-    fn parent_id(&self) -> Option<NodeId> {
-        self.real_dom().tree_ref().parent_id(self.id())
-    }
-
-    /// Get the parent of the current node
-    #[inline]
-    fn parent(&self) -> Option<NodeRef<V>> {
-        self.parent_id().map(|id| NodeRef {
-            id,
-            dom: self.real_dom(),
-        })
-    }
-
-    /// Get the node after the current node
-    #[inline]
-    fn next(&self) -> Option<NodeRef<V>> {
-        let parent = self.parent_id()?;
-        let children = self.real_dom().tree_ref().children_ids(parent);
-        let index = children.iter().position(|id| *id == self.id())?;
-        if index + 1 < children.len() {
-            Some(NodeRef {
-                id: children[index + 1],
-                dom: self.real_dom(),
-            })
-        } else {
-            None
-        }
-    }
-
-    /// Get the node before the current node
-    #[inline]
-    fn prev(&self) -> Option<NodeRef<V>> {
-        let parent = self.parent_id()?;
-        let children = self.real_dom().tree_ref().children_ids(parent);
-        let index = children.iter().position(|id| *id == self.id())?;
-        if index > 0 {
-            Some(NodeRef {
-                id: children[index - 1],
-                dom: self.real_dom(),
-            })
-        } else {
-            None
-        }
-    }
-
-    /// Get the height of the current node in the tree (the number of nodes between the current node and the root)
-    #[inline]
-    fn height(&self) -> u16 {
-        self.real_dom().tree_ref().height(self.id()).unwrap()
-    }
-}
-
-/// An immutable reference to a node in a RealDom
-pub struct NodeRef<'a, V: FromAnyValue + Send + Sync = ()> {
-    id: NodeId,
-    dom: &'a RealDom<V>,
-}
-
-impl<'a, V: FromAnyValue + Send + Sync> Clone for NodeRef<'a, V> {
-    fn clone(&self) -> Self {
-        *self
-    }
-}
-
-impl<'a, V: FromAnyValue + Send + Sync> Copy for NodeRef<'a, V> {}
-
-impl<'a, V: FromAnyValue + Send + Sync> NodeImmutable<V> for NodeRef<'a, V> {
-    #[inline(always)]
-    fn real_dom(&self) -> &RealDom<V> {
-        self.dom
-    }
-
-    #[inline(always)]
-    fn id(&self) -> NodeId {
-        self.id
-    }
-}
-
-/// A mutable refrence to a node in the RealDom that tracks what States need to be updated
-pub struct NodeMut<'a, V: FromAnyValue + Send + Sync = ()> {
-    id: NodeId,
-    dom: &'a mut RealDom<V>,
-}
-
-impl<'a, V: FromAnyValue + Send + Sync> NodeMut<'a, V> {
-    /// Create a new mutable refrence to a node in a RealDom
-    pub fn new(id: NodeId, dom: &'a mut RealDom<V>) -> Self {
-        Self { id, dom }
-    }
-}
-
-impl<'a, V: FromAnyValue + Send + Sync> NodeImmutable<V> for NodeMut<'a, V> {
-    #[inline(always)]
-    fn real_dom(&self) -> &RealDom<V> {
-        self.dom
-    }
-
-    #[inline(always)]
-    fn id(&self) -> NodeId {
-        self.id
-    }
-}
-
-impl<'a, V: FromAnyValue + Send + Sync> NodeMut<'a, V> {
-    /// Reborrow the node mutably
-    pub fn reborrow(&mut self) -> NodeMut<'_, V> {
-        NodeMut {
-            id: self.id,
-            dom: self.dom,
-        }
-    }
-
-    /// Get the real dom this node was created in mutably
-    #[inline(always)]
-    pub fn real_dom_mut(&mut self) -> &mut RealDom<V> {
-        self.dom
-    }
-
-    /// Get the parent of this node mutably
-    #[inline]
-    pub fn parent_mut(&mut self) -> Option<NodeMut<V>> {
-        self.parent_id().map(|id| NodeMut { id, dom: self.dom })
-    }
-
-    /// Get a component from the current node mutably
-    #[inline]
-    pub fn get_mut<T: Component<Tracking = Untracked> + Sync + Send>(
-        &mut self,
-    ) -> Option<ViewEntryMut<T>> {
-        // mark the node state as dirty
-        self.dom
-            .dirty_nodes
-            .passes_updated
-            .entry(self.id)
-            .or_default()
-            .insert(TypeId::of::<T>());
-        let view_mut: ViewMut<T> = self.dom.borrow_raw().ok()?;
-        view_mut
-            .contains(self.id)
-            .then_some(ViewEntryMut::new(view_mut, self.id))
-    }
-
-    /// Insert a custom component into this node
-    ///
-    /// Note: Components that implement State and are added when the RealDom is created will automatically be created
-    #[inline]
-    pub fn insert<T: Component + Sync + Send>(&mut self, value: T) {
-        // mark the node state as dirty
-        self.dom
-            .dirty_nodes
-            .passes_updated
-            .entry(self.id)
-            .or_default()
-            .insert(TypeId::of::<T>());
-        self.dom.world.add_component(self.id, value);
-    }
-
-    /// Get the next node
-    #[inline]
-    pub fn next_mut(self) -> Option<NodeMut<'a, V>> {
-        let parent = self.parent_id()?;
-        let children = self.dom.tree_mut().children_ids(parent);
-        let index = children.iter().position(|id| *id == self.id)?;
-        if index + 1 < children.len() {
-            Some(NodeMut::new(children[index + 1], self.dom))
-        } else {
-            None
-        }
-    }
-
-    /// Get the previous node
-    #[inline]
-    pub fn prev_mut(self) -> Option<NodeMut<'a, V>> {
-        let parent = self.parent_id()?;
-        let children = self.dom.tree_ref().children_ids(parent);
-        let index = children.iter().position(|id| *id == self.id)?;
-        if index > 0 {
-            Some(NodeMut::new(children[index - 1], self.dom))
-        } else {
-            None
-        }
-    }
-
-    /// Add the given node to the end of this nodes children
-    #[inline]
-    pub fn add_child(&mut self, child: NodeId) {
-        self.dom.dirty_nodes.mark_child_changed(self.id);
-        self.dom.dirty_nodes.mark_parent_added_or_removed(child);
-        self.dom.tree_mut().add_child(self.id, child);
-        NodeMut::new(child, self.dom).mark_moved();
-    }
-
-    /// Insert this node after the given node
-    #[inline]
-    pub fn insert_after(&mut self, old: NodeId) {
-        let id = self.id();
-        let parent_id = { self.dom.tree_ref().parent_id(old) };
-        if let Some(parent_id) = parent_id {
-            self.dom.dirty_nodes.mark_child_changed(parent_id);
-            self.dom.dirty_nodes.mark_parent_added_or_removed(id);
-        }
-        self.dom.tree_mut().insert_after(old, id);
-        self.mark_moved();
-    }
-
-    /// Insert this node before the given node
-    #[inline]
-    pub fn insert_before(&mut self, old: NodeId) {
-        let id = self.id();
-        let parent_id = { self.dom.tree_ref().parent_id(old) };
-        if let Some(parent_id) = parent_id {
-            self.dom.dirty_nodes.mark_child_changed(parent_id);
-            self.dom.dirty_nodes.mark_parent_added_or_removed(id);
-        }
-        self.dom.tree_mut().insert_before(old, id);
-        self.mark_moved();
-    }
-
-    /// Remove this node from the RealDom
-    #[inline]
-    pub fn remove(&mut self) {
-        let id = self.id();
-        {
-            let RealDom {
-                world,
-                nodes_listening,
-                ..
-            } = &mut self.dom;
-            let mut view: ViewMut<NodeType<V>> = world.borrow().unwrap();
-            if let NodeType::Element(ElementNode { listeners, .. })
-            | NodeType::Text(TextNode { listeners, .. }) = (&mut view).get(id).unwrap()
-            {
-                let listeners = std::mem::take(listeners);
-                for event in listeners {
-                    nodes_listening.get_mut(&event).unwrap().remove(&id);
-                }
-            }
-        }
-        self.mark_removed();
-        let parent_id = { self.dom.tree_ref().parent_id(id) };
-        if let Some(parent_id) = parent_id {
-            self.real_dom_mut()
-                .dirty_nodes
-                .mark_child_changed(parent_id);
-        }
-        let children_ids = self.child_ids();
-        let children_ids_vec = children_ids.to_vec();
-        for child in children_ids_vec {
-            self.dom.get_mut(child).unwrap().remove();
-        }
-        self.dom.tree_mut().remove(id);
-        self.real_dom_mut().raw_world_mut().delete_entity(id);
-    }
-
-    /// Replace this node with a different node
-    #[inline]
-    pub fn replace(mut self, new: NodeId) {
-        self.mark_removed();
-        if let Some(parent_id) = self.parent_id() {
-            self.real_dom_mut()
-                .dirty_nodes
-                .mark_child_changed(parent_id);
-            self.real_dom_mut()
-                .dirty_nodes
-                .mark_parent_added_or_removed(new);
-        }
-        let id = self.id();
-        self.dom.tree_mut().replace(id, new);
-        self.remove();
-    }
-
-    /// Add an event listener
-    #[inline]
-    pub fn add_event_listener(&mut self, event: &str) {
-        let id = self.id();
-        let RealDom {
-            world,
-            dirty_nodes,
-            nodes_listening,
-            ..
-        } = &mut self.dom;
-        let mut view: ViewMut<NodeType<V>> = world.borrow().unwrap();
-        let node_type: &mut NodeType<V> = (&mut view).get(self.id).unwrap();
-        if let NodeType::Element(ElementNode { listeners, .. })
-        | NodeType::Text(TextNode { listeners, .. }) = node_type
-        {
-            dirty_nodes.mark_dirty(self.id, NodeMaskBuilder::new().with_listeners().build());
-            listeners.insert(event.to_string());
-            match nodes_listening.get_mut(event) {
-                Some(hs) => {
-                    hs.insert(id);
-                }
-                None => {
-                    let mut hs = FxHashSet::default();
-                    hs.insert(id);
-                    nodes_listening.insert(event.to_string(), hs);
-                }
-            }
-        }
-    }
-
-    /// Remove an event listener
-    #[inline]
-    pub fn remove_event_listener(&mut self, event: &str) {
-        let id = self.id();
-        let RealDom {
-            world,
-            dirty_nodes,
-            nodes_listening,
-            ..
-        } = &mut self.dom;
-        let mut view: ViewMut<NodeType<V>> = world.borrow().unwrap();
-        let node_type: &mut NodeType<V> = (&mut view).get(self.id).unwrap();
-        if let NodeType::Element(ElementNode { listeners, .. })
-        | NodeType::Text(TextNode { listeners, .. }) = node_type
-        {
-            dirty_nodes.mark_dirty(self.id, NodeMaskBuilder::new().with_listeners().build());
-            listeners.remove(event);
-
-            nodes_listening.get_mut(event).unwrap().remove(&id);
-        }
-    }
-
-    /// mark that this node was removed for the incremental system
-    fn mark_removed(&mut self) {
-        let watchers = self.dom.node_watchers.clone();
-        for watcher in &mut *watchers.write().unwrap() {
-            watcher.on_node_removed(NodeMut::new(self.id(), self.dom));
-        }
-    }
-
-    /// mark that this node was moved for the incremental system
-    fn mark_moved(&mut self) {
-        let watchers = self.dom.node_watchers.clone();
-        // ignore watchers if the we are inside of a watcher
-        if let Ok(mut watchers) = watchers.try_write() {
-            for watcher in &mut *watchers {
-                watcher.on_node_moved(NodeMut::new(self.id(), self.dom));
-            }
-        };
-    }
-
-    /// Get a mutable reference to the type of the current node
-    pub fn node_type_mut(&mut self) -> NodeTypeMut<'_, V> {
-        let id = self.id();
-        let RealDom {
-            world, dirty_nodes, ..
-        } = &mut self.dom;
-        let view: ViewMut<NodeType<V>> = world.borrow().unwrap();
-        let node_type = ViewEntryMut::new(view, id);
-        match &*node_type {
-            NodeType::Element(_) => NodeTypeMut::Element(ElementNodeMut {
-                id,
-                element: node_type,
-                dirty_nodes,
-            }),
-            NodeType::Text(_) => NodeTypeMut::Text(TextNodeMut {
-                id,
-                text: node_type,
-                dirty_nodes,
-            }),
-            NodeType::Placeholder => NodeTypeMut::Placeholder,
-        }
-    }
-
-    /// Set the type of the current node
-    pub fn set_type(&mut self, new: NodeType<V>) {
-        {
-            let mut view: ViewMut<NodeType<V>> = self.dom.borrow_node_type_mut().unwrap();
-            *(&mut view).get(self.id).unwrap() = new;
-        }
-        self.dom
-            .dirty_nodes
-            .mark_dirty(self.id, NodeMaskBuilder::ALL.build())
-    }
-
-    /// Clone a node and it's children and returns the id of the new node.
-    /// This is more effecient than creating the node from scratch because it can pre-allocate the memory required.
-    #[inline]
-    pub fn clone_node(&mut self) -> NodeId {
-        let new_node = self.node_type().clone();
-        let rdom = self.real_dom_mut();
-        let new_id = rdom.create_node(new_node).id();
-
-        let children = self.child_ids();
-        let children = children.to_vec();
-        let rdom = self.real_dom_mut();
-        for child in children {
-            let child_id = rdom.get_mut(child).unwrap().clone_node();
-            rdom.get_mut(new_id).unwrap().add_child(child_id);
-        }
-        new_id
-    }
-}
-
-/// A mutable refrence to the type of a node in the RealDom
-pub enum NodeTypeMut<'a, V: FromAnyValue + Send + Sync = ()> {
-    /// An element node
-    Element(ElementNodeMut<'a, V>),
-    /// A text node
-    Text(TextNodeMut<'a, V>),
-    /// A placeholder node
-    Placeholder,
-}
-
-/// A mutable refrence to a text node in the RealDom
-pub struct TextNodeMut<'a, V: FromAnyValue + Send + Sync = ()> {
-    id: NodeId,
-    text: ViewEntryMut<'a, NodeType<V>>,
-    dirty_nodes: &'a mut NodesDirty<V>,
-}
-
-impl<V: FromAnyValue + Send + Sync> TextNodeMut<'_, V> {
-    /// Get the underlying test of the node
-    pub fn text(&self) -> &str {
-        match &*self.text {
-            NodeType::Text(text) => &text.text,
-            _ => unreachable!(),
-        }
-    }
-
-    /// Get the underlying text mutably
-    pub fn text_mut(&mut self) -> &mut String {
-        self.dirty_nodes
-            .mark_dirty(self.id, NodeMaskBuilder::new().with_text().build());
-        match &mut *self.text {
-            NodeType::Text(text) => &mut text.text,
-            _ => unreachable!(),
-        }
-    }
-}
-
-impl<V: FromAnyValue + Send + Sync> Deref for TextNodeMut<'_, V> {
-    type Target = String;
-
-    fn deref(&self) -> &Self::Target {
-        match &*self.text {
-            NodeType::Text(text) => &text.text,
-            _ => unreachable!(),
-        }
-    }
-}
-
-impl<V: FromAnyValue + Send + Sync> DerefMut for TextNodeMut<'_, V> {
-    fn deref_mut(&mut self) -> &mut Self::Target {
-        self.text_mut()
-    }
-}
-
-/// A mutable refrence to a text Element node in the RealDom
-pub struct ElementNodeMut<'a, V: FromAnyValue + Send + Sync = ()> {
-    id: NodeId,
-    element: ViewEntryMut<'a, NodeType<V>>,
-    dirty_nodes: &'a mut NodesDirty<V>,
-}
-
-impl std::fmt::Debug for ElementNodeMut<'_> {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        f.debug_struct("ElementNodeMut")
-            .field("id", &self.id)
-            .field("element", &*self.element)
-            .finish()
-    }
-}
-
-impl<V: FromAnyValue + Send + Sync> ElementNodeMut<'_, V> {
-    /// Get the current element
-    fn element(&self) -> &ElementNode<V> {
-        match &*self.element {
-            NodeType::Element(element) => element,
-            _ => unreachable!(),
-        }
-    }
-
-    /// Get the current element mutably (does not mark anything as dirty)
-    fn element_mut(&mut self) -> &mut ElementNode<V> {
-        match &mut *self.element {
-            NodeType::Element(element) => element,
-            _ => unreachable!(),
-        }
-    }
-
-    /// Get the tag of the element
-    pub fn tag(&self) -> &str {
-        &self.element().tag
-    }
-
-    /// Get a mutable reference to the tag of the element
-    pub fn tag_mut(&mut self) -> &mut String {
-        self.dirty_nodes
-            .mark_dirty(self.id, NodeMaskBuilder::new().with_tag().build());
-        &mut self.element_mut().tag
-    }
-
-    /// Get a reference to the namespace the element is in
-    pub fn namespace(&self) -> Option<&str> {
-        self.element().namespace.as_deref()
-    }
-
-    /// Get a mutable reference to the namespace the element is in
-    pub fn namespace_mut(&mut self) -> &mut Option<String> {
-        self.dirty_nodes
-            .mark_dirty(self.id, NodeMaskBuilder::new().with_namespace().build());
-        &mut self.element_mut().namespace
-    }
-
-    /// Get a reference to all of the attributes currently set on the element
-    pub fn attributes(&self) -> &FxHashMap<OwnedAttributeDiscription, OwnedAttributeValue<V>> {
-        &self.element().attributes
-    }
-
-    /// Set an attribute in the element
-    pub fn set_attribute(
-        &mut self,
-        name: impl Into<OwnedAttributeDiscription>,
-        value: impl Into<OwnedAttributeValue<V>>,
-    ) -> Option<OwnedAttributeValue<V>> {
-        let name = name.into();
-        let value = value.into();
-        self.dirty_nodes.mark_dirty(
-            self.id,
-            NodeMaskBuilder::new()
-                .with_attrs(AttributeMaskBuilder::Some(&[&name.name]))
-                .build(),
-        );
-        self.element_mut().attributes.insert(name, value)
-    }
-
-    /// Remove an attribute from the element
-    pub fn remove_attribute(
-        &mut self,
-        name: &OwnedAttributeDiscription,
-    ) -> Option<OwnedAttributeValue<V>> {
-        self.dirty_nodes.mark_dirty(
-            self.id,
-            NodeMaskBuilder::new()
-                .with_attrs(AttributeMaskBuilder::Some(&[&name.name]))
-                .build(),
-        );
-        self.element_mut().attributes.remove(name)
-    }
-
-    /// Get an attribute of the element
-    pub fn get_attribute_mut(
-        &mut self,
-        name: &OwnedAttributeDiscription,
-    ) -> Option<&mut OwnedAttributeValue<V>> {
-        self.dirty_nodes.mark_dirty(
-            self.id,
-            NodeMaskBuilder::new()
-                .with_attrs(AttributeMaskBuilder::Some(&[&name.name]))
-                .build(),
-        );
-        self.element_mut().attributes.get_mut(name)
-    }
-
-    /// Get an attribute of the element
-    pub fn get_attribute(
-        &self,
-        name: &OwnedAttributeDiscription,
-    ) -> Option<&OwnedAttributeValue<V>> {
-        self.element().attributes.get(name)
-    }
-
-    /// Get the set of all events the element is listening to
-    pub fn listeners(&self) -> &FxHashSet<String> {
-        &self.element().listeners
-    }
-}
-
-// Create a workload from all of the passes. This orders the passes so that each pass will only run at most once.
-fn construct_workload<V: FromAnyValue + Send + Sync>(
-    passes: &mut [TypeErasedState<V>],
-) -> Workload {
-    let mut workload = Workload::new("Main Workload");
-    // Assign a unique index to keep track of each pass
-    let mut unresloved_workloads = passes
-        .iter_mut()
-        .enumerate()
-        .map(|(i, pass)| {
-            let workload = Some(pass.create_workload());
-            (i, pass, workload)
-        })
-        .collect::<Vec<_>>();
-    // set all the labels
-    for (id, _, workload) in &mut unresloved_workloads {
-        *workload = Some(workload.take().unwrap().tag(id.to_string()));
-    }
-    // mark any dependancies
-    for i in 0..unresloved_workloads.len() {
-        let (_, pass, _) = &unresloved_workloads[i];
-        let all_dependancies: Vec<_> = pass.combined_dependancy_type_ids().collect();
-        for ty_id in all_dependancies {
-            let &(dependancy_id, _, _) = unresloved_workloads
-                .iter()
-                .find(|(_, pass, _)| pass.this_type_id == ty_id)
-                .unwrap();
-            let (_, _, workload) = &mut unresloved_workloads[i];
-            *workload = workload
-                .take()
-                .map(|workload| workload.after_all(dependancy_id.to_string()));
-        }
-    }
-    // Add all of the passes
-    for (_, _, mut workload_system) in unresloved_workloads {
-        workload = workload.with_system(workload_system.take().unwrap());
-    }
-    workload
-}
diff --git a/packages/native-core/src/tree.rs b/packages/native-core/src/tree.rs
deleted file mode 100644
index e7239d307..000000000
--- a/packages/native-core/src/tree.rs
+++ /dev/null
@@ -1,599 +0,0 @@
-//! A tree of nodes intigated with shipyard
-
-use crate::NodeId;
-use shipyard::{Component, EntitiesViewMut, Get, View, ViewMut};
-use std::fmt::Debug;
-
-/// A shadow tree reference inside of a tree. This tree is isolated from the main tree.
-#[derive(PartialEq, Eq, Clone, Debug, Component)]
-pub struct ShadowTree {
-    /// The root of the shadow tree
-    pub shadow_roots: Vec<NodeId>,
-    /// The node that children of the super tree should be inserted under.
-    pub slot: Option<NodeId>,
-}
-
-/// A node in a tree.
-#[derive(PartialEq, Eq, Clone, Debug, Component)]
-pub struct Node {
-    parent: Option<NodeId>,
-    children: Vec<NodeId>,
-    child_subtree: Option<ShadowTree>,
-    /// If this node is a slot in a shadow_tree, this is node whose child_subtree is that shadow_tree.
-    slot_for_light_tree: Option<NodeId>,
-    /// If this node is a root of a shadow_tree, this is the node whose child_subtree is that shadow_tree.
-    root_for_light_tree: Option<NodeId>,
-    height: u16,
-}
-
-/// A view of a tree.
-pub type TreeRefView<'a> = View<'a, Node>;
-/// A mutable view of a tree.
-pub type TreeMutView<'a> = (EntitiesViewMut<'a>, ViewMut<'a, Node>);
-
-/// A immutable view of a tree.
-pub trait TreeRef {
-    /// Get the id of the parent of the current node, if enter_shadow_dom is true and the current node is a shadow root, the node the shadow root is attached to will be returned
-    #[inline]
-    fn parent_id_advanced(&self, id: NodeId, enter_shadow_dom: bool) -> Option<NodeId> {
-        // If this node is the root of a shadow_tree, return the node the shadow_tree is attached
-        let root_for_light_tree = self.root_for_light_tree(id);
-        match (root_for_light_tree, enter_shadow_dom) {
-            (Some(id), true) => Some(id),
-            _ => {
-                let parent_id = self.parent_id(id);
-                if enter_shadow_dom {
-                    // If this node is attached via a slot, return the slot as the parent instead of the light tree parent
-                    parent_id.map(|id| {
-                        self.shadow_tree(id)
-                            .and_then(|tree| tree.slot)
-                            .unwrap_or(id)
-                    })
-                } else {
-                    parent_id
-                }
-            }
-        }
-    }
-    /// The parent id of the node.
-    fn parent_id(&self, id: NodeId) -> Option<NodeId>;
-    /// Get the ids of the children of the current node, if enter_shadow_dom is true and the current node is a shadow slot, the ids of the nodes under the node the shadow slot is attached to will be returned
-    #[inline]
-    fn children_ids_advanced(&self, id: NodeId, enter_shadow_dom: bool) -> Vec<NodeId> {
-        let shadow_tree = self.shadow_tree(id);
-        let slot_of_light_tree = self.slot_for_light_tree(id);
-        match (shadow_tree, slot_of_light_tree, enter_shadow_dom) {
-            // If this node is a shadow root, return the shadow roots
-            (Some(tree), _, true) => tree.shadow_roots.clone(),
-            // If this node is a slot, return the children of the node the slot is attached to
-            (None, Some(id), true) => self.children_ids(id),
-            _ => self.children_ids(id),
-        }
-    }
-    /// The children ids of the node.
-    fn children_ids(&self, id: NodeId) -> Vec<NodeId>;
-    /// The shadow tree tree under the node.
-    fn shadow_tree(&self, id: NodeId) -> Option<&ShadowTree>;
-    /// The node that contains the shadow tree this node is a slot for
-    fn slot_for_light_tree(&self, id: NodeId) -> Option<NodeId>;
-    /// The node that contains the shadow tree this node is a root of
-    fn root_for_light_tree(&self, id: NodeId) -> Option<NodeId>;
-    /// The height of the node.
-    fn height(&self, id: NodeId) -> Option<u16>;
-    /// Returns true if the node exists.
-    fn contains(&self, id: NodeId) -> bool;
-}
-
-/// A mutable view of a tree.
-pub trait TreeMut: TreeRef {
-    /// Removes the node and its children from the tree but do not delete the entities.
-    fn remove(&mut self, id: NodeId);
-    /// Adds a new node to the tree.
-    fn create_node(&mut self, id: NodeId);
-    /// Adds a child to the node.
-    fn add_child(&mut self, parent: NodeId, new: NodeId);
-    /// Replaces the node with a new node.
-    fn replace(&mut self, old_id: NodeId, new_id: NodeId);
-    /// Inserts a node before another node.
-    fn insert_before(&mut self, old_id: NodeId, new_id: NodeId);
-    /// Inserts a node after another node.
-    fn insert_after(&mut self, old_id: NodeId, new_id: NodeId);
-    /// Creates a new shadow tree.
-    fn create_subtree(&mut self, id: NodeId, shadow_roots: Vec<NodeId>, slot: Option<NodeId>);
-    /// Remove any shadow tree.
-    fn remove_subtree(&mut self, id: NodeId);
-}
-
-impl<'a> TreeRef for TreeRefView<'a> {
-    fn parent_id(&self, id: NodeId) -> Option<NodeId> {
-        self.get(id).ok()?.parent
-    }
-
-    fn children_ids(&self, id: NodeId) -> Vec<NodeId> {
-        self.get(id)
-            .map(|node| node.children.clone())
-            .unwrap_or_default()
-    }
-
-    fn height(&self, id: NodeId) -> Option<u16> {
-        Some(self.get(id).ok()?.height)
-    }
-
-    fn contains(&self, id: NodeId) -> bool {
-        self.get(id).is_ok()
-    }
-
-    fn shadow_tree(&self, id: NodeId) -> Option<&ShadowTree> {
-        self.get(id).ok()?.child_subtree.as_ref()
-    }
-
-    fn slot_for_light_tree(&self, id: NodeId) -> Option<NodeId> {
-        self.get(id).ok()?.slot_for_light_tree
-    }
-
-    fn root_for_light_tree(&self, id: NodeId) -> Option<NodeId> {
-        self.get(id).ok()?.root_for_light_tree
-    }
-}
-
-impl<'a> TreeMut for TreeMutView<'a> {
-    fn remove(&mut self, id: NodeId) {
-        fn recurse(tree: &mut TreeMutView<'_>, id: NodeId) {
-            let (light_tree, children) = {
-                let node = (&mut tree.1).get(id).unwrap();
-                (node.slot_for_light_tree, std::mem::take(&mut node.children))
-            };
-
-            for child in children {
-                recurse(tree, child);
-            }
-
-            // If this node is a slot in a shadow_tree, remove it from the shadow_tree.
-            if let Some(light_tree) = light_tree {
-                let root_for_light_tree = (&mut tree.1).get(light_tree).unwrap();
-
-                if let Some(shadow_tree) = &mut root_for_light_tree.child_subtree {
-                    shadow_tree.slot = None;
-                }
-
-                debug_assert!(
-                    root_for_light_tree.children.is_empty(),
-                    "ShadowTree root should have no children when slot is removed."
-                );
-            }
-        }
-
-        {
-            let mut node_data_mut = &mut self.1;
-            if let Some(parent) = node_data_mut.get(id).unwrap().parent {
-                let parent = (&mut node_data_mut).get(parent).unwrap();
-                parent.children.retain(|&child| child != id);
-            }
-        }
-
-        recurse(self, id);
-    }
-
-    fn create_node(&mut self, id: NodeId) {
-        let (entities, node_data_mut) = self;
-        entities.add_component(
-            id,
-            node_data_mut,
-            Node {
-                parent: None,
-                children: Vec::new(),
-                height: 0,
-                child_subtree: None,
-                slot_for_light_tree: None,
-                root_for_light_tree: None,
-            },
-        );
-    }
-
-    fn add_child(&mut self, parent: NodeId, new: NodeId) {
-        {
-            let mut node_state = &mut self.1;
-            (&mut node_state).get(new).unwrap().parent = Some(parent);
-            let parent = (&mut node_state).get(parent).unwrap();
-            parent.children.push(new);
-        }
-        let height = child_height((&self.1).get(parent).unwrap(), self);
-        set_height(self, new, height);
-    }
-
-    fn replace(&mut self, old_id: NodeId, new_id: NodeId) {
-        {
-            let mut node_state = &mut self.1;
-            // update the parent's link to the child
-            if let Some(parent_id) = node_state.get(old_id).unwrap().parent {
-                let parent = (&mut node_state).get(parent_id).unwrap();
-                for id in &mut parent.children {
-                    if *id == old_id {
-                        *id = new_id;
-                        break;
-                    }
-                }
-                let height = child_height((&self.1).get(parent_id).unwrap(), self);
-                set_height(self, new_id, height);
-            }
-        }
-        self.remove(old_id);
-    }
-
-    fn insert_before(&mut self, old_id: NodeId, new_id: NodeId) {
-        let parent_id = {
-            let old_node = self.1.get(old_id).unwrap();
-            old_node.parent.expect("tried to insert before root")
-        };
-        {
-            (&mut self.1).get(new_id).unwrap().parent = Some(parent_id);
-        }
-        let parent = (&mut self.1).get(parent_id).unwrap();
-        let index = parent
-            .children
-            .iter()
-            .position(|child| *child == old_id)
-            .unwrap();
-        parent.children.insert(index, new_id);
-        let height = child_height((&self.1).get(parent_id).unwrap(), self);
-        set_height(self, new_id, height);
-    }
-
-    fn insert_after(&mut self, old_id: NodeId, new_id: NodeId) {
-        let mut node_state = &mut self.1;
-        let old_node = node_state.get(old_id).unwrap();
-        let parent_id = old_node.parent.expect("tried to insert before root");
-        (&mut node_state).get(new_id).unwrap().parent = Some(parent_id);
-        let parent = (&mut node_state).get(parent_id).unwrap();
-        let index = parent
-            .children
-            .iter()
-            .position(|child| *child == old_id)
-            .unwrap();
-        parent.children.insert(index + 1, new_id);
-        let height = child_height((&self.1).get(parent_id).unwrap(), self);
-        set_height(self, new_id, height);
-    }
-
-    fn create_subtree(&mut self, id: NodeId, shadow_roots: Vec<NodeId>, slot: Option<NodeId>) {
-        let (_, node_data_mut) = self;
-
-        let light_root_height;
-        {
-            let shadow_tree = ShadowTree {
-                shadow_roots: shadow_roots.clone(),
-                slot,
-            };
-
-            let light_root = node_data_mut
-                .get(id)
-                .expect("tried to create shadow_tree with non-existent id");
-
-            light_root.child_subtree = Some(shadow_tree);
-            light_root_height = light_root.height;
-
-            if let Some(slot) = slot {
-                let slot = node_data_mut
-                    .get(slot)
-                    .expect("tried to create shadow_tree with non-existent slot");
-                slot.slot_for_light_tree = Some(id);
-            }
-        }
-
-        // Now that we have created the shadow_tree, we need to update the height of the shadow_tree roots
-        for root in shadow_roots {
-            (&mut self.1).get(root).unwrap().root_for_light_tree = Some(id);
-            set_height(self, root, light_root_height + 1);
-        }
-    }
-
-    fn remove_subtree(&mut self, id: NodeId) {
-        let (_, node_data_mut) = self;
-
-        if let Ok(node) = node_data_mut.get(id) {
-            if let Some(shadow_tree) = node.child_subtree.take() {
-                // Remove the slot's link to the shadow_tree
-                if let Some(slot) = shadow_tree.slot {
-                    let slot = node_data_mut
-                        .get(slot)
-                        .expect("tried to remove shadow_tree with non-existent slot");
-                    slot.slot_for_light_tree = None;
-                }
-
-                let node = node_data_mut.get(id).unwrap();
-
-                // Reset the height of the light root's children
-                let height = node.height;
-                for child in node.children.clone() {
-                    println!("child: {:?}", child);
-                    set_height(self, child, height + 1);
-                }
-
-                // Reset the height of the shadow roots
-                for root in &shadow_tree.shadow_roots {
-                    set_height(self, *root, 0);
-                }
-            }
-        }
-    }
-}
-
-fn child_height(parent: &Node, tree: &impl TreeRef) -> u16 {
-    match &parent.child_subtree {
-        Some(shadow_tree) => {
-            if let Some(slot) = shadow_tree.slot {
-                tree.height(slot)
-                    .expect("Attempted to read a slot that does not exist")
-                    + 1
-            } else {
-                panic!("Attempted to read the height of a child of a node with a shadow tree, but the shadow tree does not have a slot. Every shadow tree attached to a node with children must have a slot.")
-            }
-        }
-        None => parent.height + 1,
-    }
-}
-
-/// Sets the height of a node and updates the height of all its children
-fn set_height(tree: &mut TreeMutView<'_>, node: NodeId, height: u16) {
-    let (shadow_tree, light_tree, children) = {
-        let mut node_data_mut = &mut tree.1;
-        let node = (&mut node_data_mut).get(node).unwrap();
-        node.height = height;
-
-        (
-            node.child_subtree.clone(),
-            node.slot_for_light_tree,
-            node.children.clone(),
-        )
-    };
-
-    // If the children are actually part of a shadow_tree, there height is determined by the height of the shadow_tree
-    if let Some(shadow_tree) = shadow_tree {
-        // Set the height of the shadow_tree roots
-        for &shadow_root in &shadow_tree.shadow_roots {
-            set_height(tree, shadow_root, height + 1);
-        }
-    } else {
-        // Otherwise, we just set the height of the children to be one more than the height of the parent
-        for child in children {
-            set_height(tree, child, height + 1);
-        }
-    }
-
-    // If this nodes is a slot for a shadow_tree, we need to go to the super tree and update the height of its children
-    if let Some(light_tree) = light_tree {
-        let children = (&tree.1).get(light_tree).unwrap().children.clone();
-        for child in children {
-            set_height(tree, child, height + 1);
-        }
-    }
-}
-
-impl<'a> TreeRef for TreeMutView<'a> {
-    fn parent_id(&self, id: NodeId) -> Option<NodeId> {
-        let node_data = &self.1;
-        node_data.get(id).unwrap().parent
-    }
-
-    fn children_ids(&self, id: NodeId) -> Vec<NodeId> {
-        let node_data = &self.1;
-        node_data
-            .get(id)
-            .map(|node| node.children.clone())
-            .unwrap_or_default()
-    }
-
-    fn height(&self, id: NodeId) -> Option<u16> {
-        let node_data = &self.1;
-        node_data.get(id).map(|node| node.height).ok()
-    }
-
-    fn contains(&self, id: NodeId) -> bool {
-        self.1.get(id).is_ok()
-    }
-
-    fn shadow_tree(&self, id: NodeId) -> Option<&ShadowTree> {
-        let node_data = &self.1;
-        node_data.get(id).ok()?.child_subtree.as_ref()
-    }
-
-    fn slot_for_light_tree(&self, id: NodeId) -> Option<NodeId> {
-        let node_data = &self.1;
-        node_data.get(id).ok()?.slot_for_light_tree
-    }
-
-    fn root_for_light_tree(&self, id: NodeId) -> Option<NodeId> {
-        let node_data = &self.1;
-        node_data.get(id).ok()?.root_for_light_tree
-    }
-}
-
-#[test]
-fn creation() {
-    use shipyard::World;
-    #[derive(Component)]
-    struct Num(i32);
-
-    let mut world = World::new();
-    let parent_id = world.add_entity(Num(1i32));
-    let child_id = world.add_entity(Num(0i32));
-
-    let mut tree = world.borrow::<TreeMutView>().unwrap();
-
-    tree.create_node(parent_id);
-    tree.create_node(child_id);
-
-    tree.add_child(parent_id, child_id);
-
-    assert_eq!(tree.height(parent_id), Some(0));
-    assert_eq!(tree.height(child_id), Some(1));
-    assert_eq!(tree.parent_id(parent_id), None);
-    assert_eq!(tree.parent_id(child_id).unwrap(), parent_id);
-    assert_eq!(tree.children_ids(parent_id), &[child_id]);
-}
-
-#[test]
-fn shadow_tree() {
-    use shipyard::World;
-    #[derive(Component)]
-    struct Num(i32);
-
-    let mut world = World::new();
-    // Create main tree
-    let parent_id = world.add_entity(Num(1i32));
-    let child_id = world.add_entity(Num(0i32));
-
-    // Create shadow tree
-    let shadow_parent_id = world.add_entity(Num(2i32));
-    let shadow_child_id = world.add_entity(Num(3i32));
-
-    let mut tree = world.borrow::<TreeMutView>().unwrap();
-
-    tree.create_node(parent_id);
-    tree.create_node(child_id);
-
-    tree.add_child(parent_id, child_id);
-
-    tree.create_node(shadow_parent_id);
-    tree.create_node(shadow_child_id);
-
-    tree.add_child(shadow_parent_id, shadow_child_id);
-
-    // Check that both trees are correct individually
-    assert_eq!(tree.height(parent_id), Some(0));
-    assert_eq!(tree.height(child_id), Some(1));
-    assert_eq!(tree.parent_id(parent_id), None);
-    assert_eq!(tree.parent_id(child_id).unwrap(), parent_id);
-    assert_eq!(tree.children_ids(parent_id), &[child_id]);
-
-    assert_eq!(tree.height(shadow_parent_id), Some(0));
-    assert_eq!(tree.height(shadow_child_id), Some(1));
-    assert_eq!(tree.parent_id(shadow_parent_id), None);
-    assert_eq!(tree.parent_id(shadow_child_id).unwrap(), shadow_parent_id);
-    assert_eq!(tree.children_ids(shadow_parent_id), &[shadow_child_id]);
-
-    // Add shadow tree to main tree
-    tree.create_subtree(parent_id, vec![shadow_parent_id], Some(shadow_child_id));
-
-    assert_eq!(tree.height(parent_id), Some(0));
-    assert_eq!(tree.height(shadow_parent_id), Some(1));
-    assert_eq!(tree.height(shadow_child_id), Some(2));
-    assert_eq!(tree.height(child_id), Some(3));
-    assert_eq!(
-        tree.1
-            .get(parent_id)
-            .unwrap()
-            .child_subtree
-            .as_ref()
-            .unwrap()
-            .shadow_roots,
-        &[shadow_parent_id]
-    );
-    assert_eq!(
-        tree.1.get(shadow_child_id).unwrap().slot_for_light_tree,
-        Some(parent_id)
-    );
-
-    // Remove shadow tree from main tree
-    tree.remove_subtree(parent_id);
-
-    // Check that both trees are correct individually
-    assert_eq!(tree.height(parent_id), Some(0));
-    assert_eq!(tree.height(child_id), Some(1));
-    assert_eq!(tree.parent_id(parent_id), None);
-    assert_eq!(tree.parent_id(child_id).unwrap(), parent_id);
-    assert_eq!(tree.children_ids(parent_id), &[child_id]);
-
-    assert_eq!(tree.height(shadow_parent_id), Some(0));
-    assert_eq!(tree.height(shadow_child_id), Some(1));
-    assert_eq!(tree.parent_id(shadow_parent_id), None);
-    assert_eq!(tree.parent_id(shadow_child_id).unwrap(), shadow_parent_id);
-    assert_eq!(tree.children_ids(shadow_parent_id), &[shadow_child_id]);
-}
-
-#[test]
-fn insertion() {
-    use shipyard::World;
-    #[derive(Component)]
-    struct Num(i32);
-
-    let mut world = World::new();
-    let parent = world.add_entity(Num(0));
-    let child = world.add_entity(Num(2));
-    let before = world.add_entity(Num(1));
-    let after = world.add_entity(Num(3));
-
-    let mut tree = world.borrow::<TreeMutView>().unwrap();
-
-    tree.create_node(parent);
-    tree.create_node(child);
-    tree.create_node(before);
-    tree.create_node(after);
-
-    tree.add_child(parent, child);
-    tree.insert_before(child, before);
-    tree.insert_after(child, after);
-
-    assert_eq!(tree.height(parent), Some(0));
-    assert_eq!(tree.height(child), Some(1));
-    assert_eq!(tree.height(before), Some(1));
-    assert_eq!(tree.height(after), Some(1));
-    assert_eq!(tree.parent_id(before).unwrap(), parent);
-    assert_eq!(tree.parent_id(child).unwrap(), parent);
-    assert_eq!(tree.parent_id(after).unwrap(), parent);
-    assert_eq!(tree.children_ids(parent), &[before, child, after]);
-}
-
-#[test]
-fn deletion() {
-    use shipyard::World;
-    #[derive(Component)]
-    struct Num(i32);
-
-    let mut world = World::new();
-    let parent = world.add_entity(Num(0));
-    let child = world.add_entity(Num(2));
-    let before = world.add_entity(Num(1));
-    let after = world.add_entity(Num(3));
-
-    let mut tree = world.borrow::<TreeMutView>().unwrap();
-
-    tree.create_node(parent);
-    tree.create_node(child);
-    tree.create_node(before);
-    tree.create_node(after);
-
-    tree.add_child(parent, child);
-    tree.insert_before(child, before);
-    tree.insert_after(child, after);
-
-    assert_eq!(tree.height(parent), Some(0));
-    assert_eq!(tree.height(child), Some(1));
-    assert_eq!(tree.height(before), Some(1));
-    assert_eq!(tree.height(after), Some(1));
-    assert_eq!(tree.parent_id(before).unwrap(), parent);
-    assert_eq!(tree.parent_id(child).unwrap(), parent);
-    assert_eq!(tree.parent_id(after).unwrap(), parent);
-    assert_eq!(tree.children_ids(parent), &[before, child, after]);
-
-    tree.remove(child);
-
-    assert_eq!(tree.height(parent), Some(0));
-    assert_eq!(tree.height(before), Some(1));
-    assert_eq!(tree.height(after), Some(1));
-    assert_eq!(tree.parent_id(before).unwrap(), parent);
-    assert_eq!(tree.parent_id(after).unwrap(), parent);
-    assert_eq!(tree.children_ids(parent), &[before, after]);
-
-    tree.remove(before);
-
-    assert_eq!(tree.height(parent), Some(0));
-    assert_eq!(tree.height(after), Some(1));
-    assert_eq!(tree.parent_id(after).unwrap(), parent);
-    assert_eq!(tree.children_ids(parent), &[after]);
-
-    tree.remove(after);
-
-    assert_eq!(tree.height(parent), Some(0));
-    assert_eq!(tree.children_ids(parent), &[]);
-}
diff --git a/packages/native-core/src/utils/cursor.rs b/packages/native-core/src/utils/cursor.rs
deleted file mode 100644
index 466b0e70c..000000000
--- a/packages/native-core/src/utils/cursor.rs
+++ /dev/null
@@ -1,541 +0,0 @@
-//! A cursor implementation that can be used to navigate and edit text.
-
-use std::{cmp::Ordering, ops::Range};
-
-use keyboard_types::{Code, Key, Modifiers};
-
-/// This contains the information about the text that is used by the cursor to handle navigation.
-pub trait Text {
-    /// Returns the line at the given index.
-    fn line(&self, number: usize) -> Option<&Self>;
-    /// Returns the length of the text in characters.
-    fn length(&self) -> usize;
-    /// Returns the number of lines in the text.
-    fn line_count(&self) -> usize;
-    /// Returns the character at the given character index.
-    fn character(&self, idx: usize) -> Option<char>;
-    /// Returns the length of the text before the given line in characters.
-    fn len_before_line(&self, line: usize) -> usize;
-}
-
-impl Text for str {
-    fn line(&self, number: usize) -> Option<&str> {
-        self.lines().nth(number)
-    }
-
-    fn length(&self) -> usize {
-        self.chars().count()
-    }
-
-    fn line_count(&self) -> usize {
-        self.lines().count()
-    }
-
-    fn character(&self, idx: usize) -> Option<char> {
-        self.chars().nth(idx)
-    }
-
-    fn len_before_line(&self, line: usize) -> usize {
-        self.lines()
-            .take(line)
-            .map(|l| l.chars().count())
-            .sum::<usize>()
-    }
-}
-
-/// This contains the information about the text that is used by the cursor to handle editing text.
-pub trait TextEditable<T: Text + ?Sized>: AsRef<T> {
-    /// Inserts a character at the given character index.
-    fn insert_character(&mut self, idx: usize, text: char);
-    /// Deletes the given character range.
-    fn delete_range(&mut self, range: Range<usize>);
-}
-
-impl TextEditable<str> for String {
-    fn insert_character(&mut self, idx: usize, text: char) {
-        self.insert(idx, text);
-    }
-
-    fn delete_range(&mut self, range: Range<usize>) {
-        self.replace_range(range, "");
-    }
-}
-
-/// A cursor position
-#[derive(Debug, Clone, PartialEq, Eq)]
-pub struct Pos {
-    /// The virtual column of the cursor. This can be more than the line length. To get the realized column, use [`Pos::col()`].
-    pub col: usize,
-    /// The row of the cursor.
-    pub row: usize,
-}
-
-impl Pos {
-    /// Creates a new cursor position.
-    pub fn new(col: usize, row: usize) -> Self {
-        Self { row, col }
-    }
-
-    /// Moves the position up by one line.
-    pub fn up(&mut self, text: &(impl Text + ?Sized)) {
-        self.move_row(-1, text);
-    }
-
-    /// Moves the position down by one line.
-    pub fn down(&mut self, text: &(impl Text + ?Sized)) {
-        self.move_row(1, text);
-    }
-
-    /// Moves the position right by one character.
-    pub fn right(&mut self, text: &(impl Text + ?Sized)) {
-        self.move_col(1, text);
-    }
-
-    /// Moves the position left by one character.
-    pub fn left(&mut self, text: &(impl Text + ?Sized)) {
-        self.move_col(-1, text);
-    }
-
-    /// Move the position's row by the given amount. (positive is down, negative is up)
-    pub fn move_row(&mut self, change: i32, text: &(impl Text + ?Sized)) {
-        let new = self.row as i32 + change;
-        if new >= 0 && new < text.line_count() as i32 {
-            self.row = new as usize;
-        }
-    }
-
-    /// Move the position's column by the given amount. (positive is right, negative is left)
-    pub fn move_col(&mut self, change: i32, text: &(impl Text + ?Sized)) {
-        self.realize_col(text);
-        let idx = self.idx(text) as i32;
-        if idx + change >= 0 && idx + change <= text.length() as i32 {
-            let len_line = self.len_line(text) as i32;
-            let new_col = self.col as i32 + change;
-            let diff = new_col - len_line;
-            if diff > 0 {
-                self.down(text);
-                self.col = 0;
-                self.move_col(diff - 1, text);
-            } else if new_col < 0 {
-                self.up(text);
-                self.col = self.len_line(text);
-                self.move_col(new_col + 1, text);
-            } else {
-                self.col = new_col as usize;
-            }
-        }
-    }
-
-    /// Get the realized column of the position. This is the column, but capped at the line length.
-    pub fn col(&self, text: &(impl Text + ?Sized)) -> usize {
-        self.col.min(self.len_line(text))
-    }
-
-    /// Get the row of the position.
-    pub fn row(&self) -> usize {
-        self.row
-    }
-
-    fn len_line(&self, text: &(impl Text + ?Sized)) -> usize {
-        if let Some(line) = text.line(self.row) {
-            let len = line.length();
-            if len > 0 && line.character(len - 1) == Some('\n') {
-                len - 1
-            } else {
-                len
-            }
-        } else {
-            0
-        }
-    }
-
-    /// Get the character index of the position.
-    pub fn idx(&self, text: &(impl Text + ?Sized)) -> usize {
-        text.len_before_line(self.row) + self.col(text)
-    }
-
-    /// If the column is more than the line length, cap it to the line length.
-    pub fn realize_col(&mut self, text: &(impl Text + ?Sized)) {
-        self.col = self.col(text);
-    }
-}
-
-impl Ord for Pos {
-    fn cmp(&self, other: &Self) -> Ordering {
-        self.row.cmp(&other.row).then(self.col.cmp(&other.col))
-    }
-}
-
-impl PartialOrd for Pos {
-    fn partial_cmp(&self, other: &Self) -> Option<Ordering> {
-        Some(self.cmp(other))
-    }
-}
-
-/// A cursor is a selection of text. It has a start and end position of the selection.
-#[derive(Debug, Clone, PartialEq, Eq)]
-pub struct Cursor {
-    /// The start position of the selection. The start position is the origin of the selection, not necessarily the first position.
-    pub start: Pos,
-    /// The end position of the selection. If the end position is None, the cursor is a caret.
-    pub end: Option<Pos>,
-}
-
-impl Cursor {
-    /// Create a new cursor with the given start position.
-    pub fn from_start(pos: Pos) -> Self {
-        Self {
-            start: pos,
-            end: None,
-        }
-    }
-
-    /// Create a new cursor with the given start and end position.
-    pub fn new(start: Pos, end: Pos) -> Self {
-        Self {
-            start,
-            end: Some(end),
-        }
-    }
-
-    /// Move the cursor position. If shift is true, the end position will be moved instead of the start position.
-    pub fn move_cursor(&mut self, f: impl FnOnce(&mut Pos), shift: bool) {
-        if shift {
-            self.with_end(f);
-        } else {
-            f(&mut self.start);
-            self.end = None;
-        }
-    }
-
-    /// Delete the currently selected text and update the cursor position.
-    pub fn delete_selection<T: Text + ?Sized>(&mut self, text: &mut impl TextEditable<T>) {
-        let first = self.first();
-        let last = self.last();
-        text.delete_range(first.idx(text.as_ref())..last.idx(text.as_ref()));
-        if let Some(end) = self.end.take() {
-            if self.start > end {
-                self.start = end;
-            }
-        }
-    }
-
-    /// Handle moving the cursor with the given key.
-    pub fn handle_input<T: Text + ?Sized>(
-        &mut self,
-        code: &Code,
-        key: &Key,
-        modifiers: &Modifiers,
-        text: &mut impl TextEditable<T>,
-        max_text_length: usize,
-    ) {
-        use Code::*;
-        match code {
-            ArrowUp => {
-                self.move_cursor(
-                    |c| c.up(text.as_ref()),
-                    modifiers.contains(Modifiers::SHIFT),
-                );
-            }
-            ArrowDown => {
-                self.move_cursor(
-                    |c| c.down(text.as_ref()),
-                    modifiers.contains(Modifiers::SHIFT),
-                );
-            }
-            ArrowRight => {
-                if modifiers.contains(Modifiers::CONTROL) {
-                    self.move_cursor(
-                        |c| {
-                            let mut change = 1;
-                            let idx = c.idx(text.as_ref());
-                            let length = text.as_ref().length();
-                            while idx + change < length {
-                                let chr = text.as_ref().character(idx + change).unwrap();
-                                if chr.is_whitespace() {
-                                    break;
-                                }
-                                change += 1;
-                            }
-                            c.move_col(change as i32, text.as_ref());
-                        },
-                        modifiers.contains(Modifiers::SHIFT),
-                    );
-                } else {
-                    self.move_cursor(
-                        |c| c.right(text.as_ref()),
-                        modifiers.contains(Modifiers::SHIFT),
-                    );
-                }
-            }
-            ArrowLeft => {
-                if modifiers.contains(Modifiers::CONTROL) {
-                    self.move_cursor(
-                        |c| {
-                            let mut change = -1;
-                            let idx = c.idx(text.as_ref()) as i32;
-                            while idx + change > 0 {
-                                let chr = text.as_ref().character((idx + change) as usize).unwrap();
-                                if chr == ' ' {
-                                    break;
-                                }
-                                change -= 1;
-                            }
-                            c.move_col(change, text.as_ref());
-                        },
-                        modifiers.contains(Modifiers::SHIFT),
-                    );
-                } else {
-                    self.move_cursor(
-                        |c| c.left(text.as_ref()),
-                        modifiers.contains(Modifiers::SHIFT),
-                    );
-                }
-            }
-            End => {
-                self.move_cursor(
-                    |c| c.col = c.len_line(text.as_ref()),
-                    modifiers.contains(Modifiers::SHIFT),
-                );
-            }
-            Home => {
-                self.move_cursor(|c| c.col = 0, modifiers.contains(Modifiers::SHIFT));
-            }
-            Backspace => {
-                self.start.realize_col(text.as_ref());
-                let mut start_idx = self.start.idx(text.as_ref());
-                if self.end.is_some() {
-                    self.delete_selection(text);
-                } else if start_idx > 0 {
-                    self.start.left(text.as_ref());
-                    text.delete_range(start_idx - 1..start_idx);
-                    if modifiers.contains(Modifiers::CONTROL) {
-                        start_idx = self.start.idx(text.as_ref());
-                        while start_idx > 0
-                            && text
-                                .as_ref()
-                                .character(start_idx - 1)
-                                .filter(|c| *c != ' ')
-                                .is_some()
-                        {
-                            self.start.left(text.as_ref());
-                            text.delete_range(start_idx - 1..start_idx);
-                            start_idx = self.start.idx(text.as_ref());
-                        }
-                    }
-                }
-            }
-            Enter => {
-                if text.as_ref().length() + 1 - self.selection_len(text.as_ref()) <= max_text_length
-                {
-                    text.insert_character(self.start.idx(text.as_ref()), '\n');
-                    self.start.col = 0;
-                    self.start.down(text.as_ref());
-                }
-            }
-            Tab => {
-                if text.as_ref().length() + 1 - self.selection_len(text.as_ref()) <= max_text_length
-                {
-                    self.start.realize_col(text.as_ref());
-                    self.delete_selection(text);
-                    text.insert_character(self.start.idx(text.as_ref()), '\t');
-                    self.start.right(text.as_ref());
-                }
-            }
-            _ => {
-                self.start.realize_col(text.as_ref());
-                if let Key::Character(character) = key {
-                    if text.as_ref().length() + 1 - self.selection_len(text.as_ref())
-                        <= max_text_length
-                    {
-                        self.delete_selection(text);
-                        let character = character.chars().next().unwrap();
-                        text.insert_character(self.start.idx(text.as_ref()), character);
-                        self.start.right(text.as_ref());
-                    }
-                }
-            }
-        }
-    }
-
-    /// Modify the end selection position
-    pub fn with_end(&mut self, f: impl FnOnce(&mut Pos)) {
-        let mut new = self.end.take().unwrap_or_else(|| self.start.clone());
-        f(&mut new);
-        self.end.replace(new);
-    }
-
-    /// Returns first position of the selection (this could be the start or the end depending on the position)
-    pub fn first(&self) -> &Pos {
-        if let Some(e) = &self.end {
-            e.min(&self.start)
-        } else {
-            &self.start
-        }
-    }
-
-    /// Returns last position of the selection (this could be the start or the end depending on the position)
-    pub fn last(&self) -> &Pos {
-        if let Some(e) = &self.end {
-            e.max(&self.start)
-        } else {
-            &self.start
-        }
-    }
-
-    /// Returns the length of the selection
-    pub fn selection_len(&self, text: &(impl Text + ?Sized)) -> usize {
-        self.last().idx(text) - self.first().idx(text)
-    }
-}
-
-impl Default for Cursor {
-    fn default() -> Self {
-        Self {
-            start: Pos::new(0, 0),
-            end: None,
-        }
-    }
-}
-
-#[test]
-fn pos_direction_movement() {
-    let mut pos = Pos::new(100, 0);
-    let text = "hello world\nhi";
-
-    assert_eq!(pos.col(text), text.lines().next().unwrap_or_default().len());
-    pos.down(text);
-    assert_eq!(pos.col(text), text.lines().nth(1).unwrap_or_default().len());
-    pos.up(text);
-    assert_eq!(pos.col(text), text.lines().next().unwrap_or_default().len());
-    pos.left(text);
-    assert_eq!(
-        pos.col(text),
-        text.lines().next().unwrap_or_default().len() - 1
-    );
-    pos.right(text);
-    assert_eq!(pos.col(text), text.lines().next().unwrap_or_default().len());
-}
-
-#[test]
-fn pos_col_movement() {
-    let mut pos = Pos::new(100, 0);
-    let text = "hello world\nhi";
-
-    // move inside a row
-    pos.move_col(-5, text);
-    assert_eq!(
-        pos.col(text),
-        text.lines().next().unwrap_or_default().len() - 5
-    );
-    pos.move_col(5, text);
-    assert_eq!(pos.col(text), text.lines().next().unwrap_or_default().len());
-
-    // move between rows
-    pos.move_col(3, text);
-    assert_eq!(pos.col(text), 2);
-    pos.move_col(-3, text);
-    assert_eq!(pos.col(text), text.lines().next().unwrap_or_default().len());
-
-    // don't panic if moving out of range
-    pos.move_col(-100, text);
-    pos.move_col(1000, text);
-}
-
-#[test]
-fn cursor_row_movement() {
-    let mut pos = Pos::new(100, 0);
-    let text = "hello world\nhi";
-
-    pos.move_row(1, text);
-    assert_eq!(pos.row(), 1);
-    pos.move_row(-1, text);
-    assert_eq!(pos.row(), 0);
-
-    // don't panic if moving out of range
-    pos.move_row(-100, text);
-    pos.move_row(1000, text);
-}
-
-#[test]
-fn cursor_input() {
-    let mut cursor = Cursor::from_start(Pos::new(0, 0));
-    let mut text = "hello world\nhi".to_string();
-
-    for _ in 0..5 {
-        cursor.handle_input(
-            &keyboard_types::Code::ArrowRight,
-            &keyboard_types::Key::ArrowRight,
-            &Modifiers::empty(),
-            &mut text,
-            10,
-        );
-    }
-
-    for _ in 0..5 {
-        cursor.handle_input(
-            &keyboard_types::Code::Backspace,
-            &keyboard_types::Key::Backspace,
-            &Modifiers::empty(),
-            &mut text,
-            10,
-        );
-    }
-
-    assert_eq!(text, " world\nhi");
-
-    let goal_text = "hello world\nhi";
-    let max_width = goal_text.len();
-    cursor.handle_input(
-        &keyboard_types::Code::KeyH,
-        &keyboard_types::Key::Character("h".to_string()),
-        &Modifiers::empty(),
-        &mut text,
-        max_width,
-    );
-
-    cursor.handle_input(
-        &keyboard_types::Code::KeyE,
-        &keyboard_types::Key::Character("e".to_string()),
-        &Modifiers::empty(),
-        &mut text,
-        max_width,
-    );
-
-    cursor.handle_input(
-        &keyboard_types::Code::KeyL,
-        &keyboard_types::Key::Character("l".to_string()),
-        &Modifiers::empty(),
-        &mut text,
-        max_width,
-    );
-
-    cursor.handle_input(
-        &keyboard_types::Code::KeyL,
-        &keyboard_types::Key::Character("l".to_string()),
-        &Modifiers::empty(),
-        &mut text,
-        max_width,
-    );
-
-    cursor.handle_input(
-        &keyboard_types::Code::KeyO,
-        &keyboard_types::Key::Character("o".to_string()),
-        &Modifiers::empty(),
-        &mut text,
-        max_width,
-    );
-
-    // these should be ignored
-    for _ in 0..10 {
-        cursor.handle_input(
-            &keyboard_types::Code::KeyO,
-            &keyboard_types::Key::Character("o".to_string()),
-            &Modifiers::empty(),
-            &mut text,
-            max_width,
-        );
-    }
-
-    assert_eq!(text.to_string(), goal_text);
-}
diff --git a/packages/native-core/src/utils/mod.rs b/packages/native-core/src/utils/mod.rs
deleted file mode 100644
index a78b5310b..000000000
--- a/packages/native-core/src/utils/mod.rs
+++ /dev/null
@@ -1,7 +0,0 @@
-//! # Utilities for renders using the RealDOM
-//!
-//! This includes an iterator that can be used to iterate over the children of a node that persists changes in the struture of the DOM, and a cursor for text editing.
-
-mod persistant_iterator;
-pub use persistant_iterator::*;
-pub mod cursor;
diff --git a/packages/native-core/src/utils/persistant_iterator.rs b/packages/native-core/src/utils/persistant_iterator.rs
deleted file mode 100644
index 7cf7bf454..000000000
--- a/packages/native-core/src/utils/persistant_iterator.rs
+++ /dev/null
@@ -1,474 +0,0 @@
-use smallvec::SmallVec;
-
-use crate::{
-    node::FromAnyValue,
-    node_watcher::NodeWatcher,
-    prelude::{NodeMut, NodeRef},
-    real_dom::{NodeImmutable, RealDom},
-    NodeId,
-};
-use std::{
-    fmt::Debug,
-    sync::{Arc, Mutex},
-};
-
-/// The element produced by the iterator
-#[derive(Debug, Copy, Clone, PartialEq, Eq)]
-pub struct ElementProduced {
-    id: NodeId,
-    movement: IteratorMovement,
-}
-
-#[derive(Debug, Copy, Clone, PartialEq, Eq)]
-/// The method by which the iterator produced an element
-pub enum IteratorMovement {
-    /// The iterator produced an element by progressing to the next node
-    Progressed,
-    /// The iterator reached the end of the tree and looped back to the root
-    Looped,
-}
-
-impl ElementProduced {
-    /// Get the id of the element produced
-    pub fn id(&self) -> NodeId {
-        self.id
-    }
-
-    /// The movement the iterator made to produce the element
-    pub fn movement(&self) -> &IteratorMovement {
-        &self.movement
-    }
-
-    fn looped(id: NodeId) -> Self {
-        Self {
-            id,
-            movement: IteratorMovement::Looped,
-        }
-    }
-
-    fn progressed(id: NodeId) -> Self {
-        Self {
-            id,
-            movement: IteratorMovement::Progressed,
-        }
-    }
-}
-
-struct PersistantElementIterUpdater<V> {
-    stack: Arc<Mutex<smallvec::SmallVec<[NodeId; 5]>>>,
-    phantom: std::marker::PhantomData<V>,
-}
-
-impl<V: FromAnyValue + Sync + Send> NodeWatcher<V> for PersistantElementIterUpdater<V> {
-    fn on_node_moved(&mut self, node: NodeMut<V>) {
-        // if any element is moved, update its parents in the stack
-        let mut stack = self.stack.lock().unwrap();
-        let moved = node.id();
-        let rdom = node.real_dom();
-        if let Some(r) = stack.iter().position(|el_id| *el_id == moved) {
-            let back = &stack[r..];
-            let mut new = SmallVec::new();
-            let mut parent = node.parent_id();
-            while let Some(p) = parent.and_then(|id| rdom.get(id)) {
-                new.push(p.id());
-                parent = p.parent_id();
-            }
-            new.extend(back.iter().copied());
-            *stack = new;
-        }
-    }
-
-    fn on_node_removed(&mut self, node: NodeMut<V>) {
-        // if any element is removed in the chain, remove it and its children from the stack
-        let mut stack = self.stack.lock().unwrap();
-        let removed = node.id();
-        if let Some(r) = stack.iter().position(|el_id| *el_id == removed) {
-            stack.truncate(r);
-        }
-    }
-}
-
-/// Focus systems need a iterator that can persist through changes in the [crate::prelude::RealDom]
-/// This iterator traverses the tree depth first.
-/// You can iterate through it with [PersistantElementIter::next] and [PersistantElementIter::prev].
-/// The iterator loops around when it reaches the end or the beginning.
-pub struct PersistantElementIter {
-    // stack of elements and fragments, the last element is the last element that was yielded
-    stack: Arc<Mutex<smallvec::SmallVec<[NodeId; 5]>>>,
-}
-
-impl PersistantElementIter {
-    /// Create a new iterator in the RealDom
-    pub fn create<V: FromAnyValue + Send + Sync>(rdom: &mut RealDom<V>) -> Self {
-        let inner = Arc::new(Mutex::new(smallvec::smallvec![rdom.root_id()]));
-
-        rdom.add_node_watcher(PersistantElementIterUpdater {
-            stack: inner.clone(),
-            phantom: std::marker::PhantomData,
-        });
-
-        PersistantElementIter { stack: inner }
-    }
-
-    /// get the next element
-    pub fn next<V: FromAnyValue + Send + Sync>(&mut self, rdom: &RealDom<V>) -> ElementProduced {
-        let mut stack = self.stack.lock().unwrap();
-        if stack.is_empty() {
-            let id = rdom.root_id();
-            let new = id;
-            stack.push(new);
-            ElementProduced::looped(id)
-        } else {
-            let mut look_in_children = true;
-            loop {
-                if let Some(current) = stack.last().and_then(|last| rdom.get(*last)) {
-                    // if the current element has children, add the first child to the stack and return it
-                    if look_in_children {
-                        if let Some(first) = current.children().first() {
-                            let new = first.id();
-                            stack.push(new);
-                            return ElementProduced::progressed(new);
-                        }
-                    }
-                    stack.pop();
-                    if let Some(new) = current.next() {
-                        // the next element exists, add it to the stack and return it
-                        let new = new.id();
-                        stack.push(new);
-                        return ElementProduced::progressed(new);
-                    }
-                    // otherwise, continue the loop and go to the parent
-                } else {
-                    // if there is no parent, loop back to the root
-                    let new = rdom.root_id();
-                    stack.clear();
-                    stack.push(new);
-                    return ElementProduced::looped(new);
-                }
-                look_in_children = false;
-            }
-        }
-    }
-
-    /// get the previous element
-    pub fn prev<V: FromAnyValue + Send + Sync>(&mut self, rdom: &RealDom<V>) -> ElementProduced {
-        // recursively add the last child element to the stack
-        fn push_back<V: FromAnyValue + Send + Sync>(
-            stack: &mut smallvec::SmallVec<[NodeId; 5]>,
-            node: NodeRef<V>,
-        ) -> NodeId {
-            stack.push(node.id());
-            if let Some(last) = node.children().last() {
-                push_back(stack, *last)
-            } else {
-                node.id()
-            }
-        }
-        let mut stack = self.stack.lock().unwrap();
-        if stack.is_empty() {
-            let id = rdom.root_id();
-            let last = push_back(&mut stack, rdom.get(id).unwrap());
-            ElementProduced::looped(last)
-        } else if let Some(current) = stack.pop().and_then(|last| rdom.get(last)) {
-            if let Some(new) = current.prev() {
-                // the next element exists, add it to the stack and return it
-                let new = push_back(&mut stack, new);
-                ElementProduced::progressed(new)
-            }
-            // otherwise, yeild the parent
-            else if let Some(parent) = stack.last() {
-                // if there is a parent, return it
-                ElementProduced::progressed(*parent)
-            } else {
-                // if there is no parent, loop back to the root
-                let id = rdom.root_id();
-                let last = push_back(&mut stack, rdom.get(id).unwrap());
-                ElementProduced::looped(last)
-            }
-        } else {
-            // if there is no parent, loop back to the root
-            let id = rdom.root_id();
-            let last = push_back(&mut stack, rdom.get(id).unwrap());
-            ElementProduced::looped(last)
-        }
-    }
-}
-
-#[test]
-#[allow(unused_variables)]
-fn traverse() {
-    use crate::dioxus::DioxusState;
-    use crate::prelude::*;
-    use dioxus::prelude::*;
-    #[allow(non_snake_case)]
-    fn Base() -> Element {
-        rsx!(
-            div{
-                div{
-                    "hello"
-                    p{
-                        "world"
-                    }
-                    "hello world"
-                }
-            }
-        )
-    }
-
-    let mut vdom = VirtualDom::new(Base);
-
-    let mut rdom: RealDom = RealDom::new([]);
-
-    let mut iter = PersistantElementIter::create(&mut rdom);
-    let mut dioxus_state = DioxusState::create(&mut rdom);
-    vdom.rebuild(&mut dioxus_state.create_mutation_writer(&mut rdom));
-
-    let div_tag = "div".to_string();
-    assert!(matches!(
-        &*rdom.get(iter.next(&rdom).id()).unwrap().node_type(),
-        NodeType::Element(ElementNode { tag: div_tag, .. })
-    ));
-    assert!(matches!(
-        &*rdom.get(iter.next(&rdom).id()).unwrap().node_type(),
-        NodeType::Element(ElementNode { tag: div_tag, .. })
-    ));
-    let text1 = "hello".to_string();
-    assert!(matches!(
-        &*rdom.get(iter.next(&rdom).id()).unwrap().node_type(),
-        NodeType::Text(text1)
-    ));
-    let p_tag = "p".to_string();
-    assert!(matches!(
-        &*rdom.get(iter.next(&rdom).id()).unwrap().node_type(),
-        NodeType::Element(ElementNode { tag: p_tag, .. })
-    ));
-    let text2 = "world".to_string();
-    assert!(matches!(
-        &*rdom.get(iter.next(&rdom).id()).unwrap().node_type(),
-        NodeType::Text(text2)
-    ));
-    let text3 = "hello world".to_string();
-    assert!(matches!(
-        &*rdom.get(iter.next(&rdom).id()).unwrap().node_type(),
-        NodeType::Text(text3)
-    ));
-    assert!(matches!(
-        &*rdom.get(iter.next(&rdom).id()).unwrap().node_type(),
-        NodeType::Element(ElementNode { tag: div_tag, .. })
-    ));
-
-    assert!(matches!(
-        &*rdom.get(iter.prev(&rdom).id()).unwrap().node_type(),
-        NodeType::Text(text3)
-    ));
-    assert!(matches!(
-        &*rdom.get(iter.prev(&rdom).id()).unwrap().node_type(),
-        NodeType::Text(text2)
-    ));
-    assert!(matches!(
-        &*rdom.get(iter.prev(&rdom).id()).unwrap().node_type(),
-        NodeType::Element(ElementNode { tag: p_tag, .. })
-    ));
-    assert!(matches!(
-        &*rdom.get(iter.prev(&rdom).id()).unwrap().node_type(),
-        NodeType::Text(text1)
-    ));
-    assert!(matches!(
-        &*rdom.get(iter.prev(&rdom).id()).unwrap().node_type(),
-        NodeType::Element(ElementNode { tag: div_tag, .. })
-    ));
-    assert!(matches!(
-        &*rdom.get(iter.prev(&rdom).id()).unwrap().node_type(),
-        NodeType::Element(ElementNode { tag: div_tag, .. })
-    ));
-    assert!(matches!(
-        &*rdom.get(iter.prev(&rdom).id()).unwrap().node_type(),
-        NodeType::Element(ElementNode { tag: div_tag, .. })
-    ));
-    assert!(matches!(
-        &*rdom.get(iter.prev(&rdom).id()).unwrap().node_type(),
-        NodeType::Text(text3)
-    ));
-}
-
-#[test]
-#[allow(unused_variables)]
-fn persist_removes() {
-    use crate::dioxus::DioxusState;
-    use crate::prelude::*;
-    use dioxus::prelude::*;
-    #[allow(non_snake_case)]
-    fn Base() -> Element {
-        let children = match generation() % 2 {
-            0 => 3,
-            1 => 2,
-            _ => unreachable!(),
-        };
-        rsx!(
-            div {
-                for i in 0..children {
-                    p { key: "{i}", "{i}" }
-                }
-            }
-        )
-    }
-    let mut vdom = VirtualDom::new(Base);
-
-    let mut rdom: RealDom = RealDom::new([]);
-
-    // this will end on the node that is removed
-    let mut iter1 = PersistantElementIter::create(&mut rdom);
-    // this will end on the after node that is removed
-    let mut iter2 = PersistantElementIter::create(&mut rdom);
-    let mut dioxus_state = DioxusState::create(&mut rdom);
-
-    vdom.rebuild(&mut dioxus_state.create_mutation_writer(&mut rdom));
-
-    // root
-    iter1.next(&rdom).id();
-    iter2.next(&rdom).id();
-    // div
-    iter1.next(&rdom).id();
-    iter2.next(&rdom).id();
-    // p
-    iter1.next(&rdom).id();
-    iter2.next(&rdom).id();
-    // "1"
-    iter1.next(&rdom).id();
-    iter2.next(&rdom).id();
-    // p
-    iter1.next(&rdom).id();
-    iter2.next(&rdom).id();
-    // "2"
-    iter1.next(&rdom).id();
-    iter2.next(&rdom).id();
-    // p
-    iter2.next(&rdom).id();
-    // "3"
-    iter2.next(&rdom).id();
-
-    vdom.mark_dirty(ScopeId::ROOT);
-    vdom.render_immediate(&mut dioxus_state.create_mutation_writer(&mut rdom));
-
-    let root_tag = "Root".to_string();
-    let idx = iter1.next(&rdom).id();
-    assert!(matches!(
-        &*rdom.get(idx).unwrap().node_type(),
-        NodeType::Element(ElementNode { tag: root_tag, .. })
-    ));
-
-    let idx = iter2.next(&rdom).id();
-    assert!(matches!(
-        &*rdom.get(idx).unwrap().node_type(),
-        NodeType::Element(ElementNode { tag: root_tag, .. })
-    ));
-}
-
-#[test]
-#[allow(unused_variables)]
-fn persist_instertions_before() {
-    use crate::dioxus::DioxusState;
-    use crate::prelude::*;
-    use dioxus::prelude::*;
-    #[allow(non_snake_case)]
-    fn Base() -> Element {
-        let children = match generation() % 2 {
-            0 => 3,
-            1 => 2,
-            _ => unreachable!(),
-        };
-        rsx!(
-            div {
-                for i in 0..children {
-                    p { key: "{i}", "{i}" }
-                }
-            }
-        )
-    }
-    let mut vdom = VirtualDom::new(Base);
-
-    let mut rdom: RealDom = RealDom::new([]);
-    let mut dioxus_state = DioxusState::create(&mut rdom);
-
-    vdom.rebuild(&mut dioxus_state.create_mutation_writer(&mut rdom));
-
-    let mut iter = PersistantElementIter::create(&mut rdom);
-    // div
-    iter.next(&rdom).id();
-    // p
-    iter.next(&rdom).id();
-    // "1"
-    iter.next(&rdom).id();
-    // p
-    iter.next(&rdom).id();
-    // "2"
-    iter.next(&rdom).id();
-
-    vdom.mark_dirty(ScopeId::ROOT);
-    vdom.render_immediate(&mut dioxus_state.create_mutation_writer(&mut rdom));
-
-    let p_tag = "div".to_string();
-    let idx = iter.next(&rdom).id();
-    assert!(matches!(
-        &*rdom.get(idx).unwrap().node_type(),
-        NodeType::Element(ElementNode { tag: p_tag, .. })
-    ));
-}
-
-#[test]
-#[allow(unused_variables)]
-fn persist_instertions_after() {
-    use crate::dioxus::DioxusState;
-    use crate::prelude::*;
-    use dioxus::prelude::*;
-    #[allow(non_snake_case)]
-    fn Base() -> Element {
-        let children = match generation() % 2 {
-            0 => 3,
-            1 => 2,
-            _ => unreachable!(),
-        };
-        rsx!(
-            div{
-                for i in 0..children {
-                    p { key: "{i}", "{i}" }
-                }
-            }
-        )
-    }
-    let mut vdom = VirtualDom::new(Base);
-
-    let mut rdom: RealDom = RealDom::new([]);
-    let mut iter = PersistantElementIter::create(&mut rdom);
-    let mut dioxus_state = DioxusState::create(&mut rdom);
-
-    let mut writer = dioxus_state.create_mutation_writer(&mut rdom);
-    vdom.rebuild(&mut writer);
-
-    // div
-    iter.next(&rdom).id();
-    // p
-    iter.next(&rdom).id();
-    // "hello"
-    iter.next(&rdom).id();
-    // p
-    iter.next(&rdom).id();
-    // "world"
-    iter.next(&rdom).id();
-
-    let mut writer = dioxus_state.create_mutation_writer(&mut rdom);
-    vdom.rebuild(&mut writer);
-
-    let p_tag = "p".to_string();
-    let idx = iter.next(&rdom).id();
-    assert!(matches!(
-        &*rdom.get(idx).unwrap().node_type(),
-        NodeType::Element(ElementNode { tag: p_tag, .. })
-    ));
-    let text = "hello world".to_string();
-    let idx = iter.next(&rdom).id();
-    assert!(matches!(
-        &*rdom.get(idx).unwrap().node_type(),
-        NodeType::Text(text)
-    ));
-}
diff --git a/packages/plasmo/.gitignore b/packages/plasmo/.gitignore
deleted file mode 100644
index 96ef6c0b9..000000000
--- a/packages/plasmo/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-/target
-Cargo.lock
diff --git a/packages/plasmo/.vscode/spellright.dict b/packages/plasmo/.vscode/spellright.dict
deleted file mode 100644
index c30e473fc..000000000
--- a/packages/plasmo/.vscode/spellright.dict
+++ /dev/null
@@ -1,2 +0,0 @@
-esque
-Tui
diff --git a/packages/plasmo/Cargo.toml b/packages/plasmo/Cargo.toml
deleted file mode 100644
index 28440a932..000000000
--- a/packages/plasmo/Cargo.toml
+++ /dev/null
@@ -1,36 +0,0 @@
-[package]
-name = "plasmo"
-version = { workspace = true }
-authors = ["Jonathan Kelley, Evan Almloff"]
-edition = "2021"
-description = "TUI-based renderer for Dioxus"
-repository = "https://github.com/DioxusLabs/dioxus/"
-homepage = "https://dioxuslabs.com"
-keywords = ["dom", "ui", "gui", "react", "terminal"]
-license = "MIT OR Apache-2.0"
-
-[dependencies]
-dioxus-html = { workspace = true, features = ["serialize", "mounted"] }
-dioxus-native-core = { workspace = true, features = ["layout-attributes"] }
-dioxus-native-core-macro = { workspace = true }
-
-ratatui = "0.24.0"
-crossterm = "0.26.1"
-anyhow = "1.0.42"
-tokio = { workspace = true, features = ["full"] }
-futures = "0.3.19"
-taffy = "0.3.12"
-smallvec = "1.6"
-rustc-hash = { workspace = true }
-anymap = "1.0.0-beta.2"
-futures-channel = { workspace = true }
-shipyard = { version = "0.6.2", features = ["proc", "std"], default-features = false }
-once_cell = "1.17.1"
-
-[dev-dependencies]
-tokio = { version = "1" }
-criterion = "0.3.5"
-
-[features]
-default = []
-parallel = ["shipyard/parallel"]
diff --git a/packages/plasmo/README.md b/packages/plasmo/README.md
deleted file mode 100644
index 42fef4900..000000000
--- a/packages/plasmo/README.md
+++ /dev/null
@@ -1,74 +0,0 @@
-<div align="center">
-  <h1>Plasmo</h1>
-  <p>
-    <strong>A beautiful terminal user interfaces library in Rust.</strong>
-  </p>
-</div>
-
-<div align="center">
-  <!-- Crates version -->
-  <a href="https://crates.io/crates/plasmo">
-    <img src="https://img.shields.io/crates/v/plasmo.svg?style=flat-square"
-    alt="Crates.io version" />
-  </a>
-  <!-- Downloads -->
-  <a href="https://crates.io/crates/plasmo">
-    <img src="https://img.shields.io/crates/d/plasmo.svg?style=flat-square"
-      alt="Download" />
-  </a>
-  <!-- docs -->
-  <a href="https://docs.rs/plasmo">
-    <img src="https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square"
-      alt="docs.rs docs" />
-  </a>
-  <!-- CI -->
-  <a href="https://github.com/jkelleyrtp/plasmo/actions">
-    <img src="https://github.com/dioxuslabs/plasmo/actions/workflows/main.yml/badge.svg"
-      alt="CI status" />
-  </a>
-  <!-- Discord -->
-  <a href="https://discord.gg/XgGxMSkvUM">
-    <img src="https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square" alt="Discord Link" />
-  </a>
-</div>
-
-<br/>
-
-Leverage CSS, HTML, and Rust to build beautiful, portable, terminal user interfaces. Plasmo is the cross-framework library that powers [`Dioxus-TUI`](https://github.com/DioxusLabs/dioxus/tree/master/packages/dioxus-tui)
-
-![demo app](examples/example.png)
-
-## Background
-
-You can use Html-like semantics with inline styles, tree hierarchy, components, and more in your [`text-based user interface (TUI)`](https://en.wikipedia.org/wiki/Text-based_user_interface) application.
-
-Plasmo is essentially a port of [Ink](https://github.com/vadimdemedes/ink) but for [`Rust`](https://www.rust-lang.org/). Plasmo doesn't depend on Node.js or any other JavaScript runtime, so your binaries are portable and beautiful.
-
-## Limitations
-
-- **Subset of Html**
-  Terminals can only render a subset of HTML. We support as much as we can.
-- **Particular frontend design**
-  Terminals and browsers are and look different. Therefore, the same design might not be the best to cover both renderers.
-
-## Status
-
-**WARNING: Plasmo is currently under construction!**
-
-Rendering a Dom works fine, but the ecosystem of widgets is not ready yet. Additionally, some bugs in the flexbox implementation might be quirky at times.
-
-## Features
-
-Plasmo features:
-
-- [x] Flexbox-based layout system
-- [ ] CSS selectors
-- [x] inline CSS support
-- [x] Built-in focusing system
-
-* [ ] Widgets
-* [ ] Support for events, hooks, and callbacks<sup>1</sup>
-* [ ] Html tags<sup>2</sup>
-
-<sup>1</sup> Basic keyboard, mouse, and focus events are implemented.
-<sup>2</sup> Currently, most HTML tags don't translate into any meaning inside of Plasmo. So an `input` _element_ won't mean anything nor does it have any additional functionality.
diff --git a/packages/plasmo/examples/counter_button.rs b/packages/plasmo/examples/counter_button.rs
deleted file mode 100644
index 2bbd41882..000000000
--- a/packages/plasmo/examples/counter_button.rs
+++ /dev/null
@@ -1,103 +0,0 @@
-use dioxus_native_core::{
-    node::TextNode,
-    prelude::*,
-    real_dom::{NodeImmutable, NodeTypeMut},
-    NodeId,
-};
-use plasmo::{render, Config, Driver, EventData};
-use std::rc::Rc;
-use std::sync::{Arc, RwLock};
-
-#[derive(Default)]
-struct Counter {
-    count: usize,
-    counter_id: NodeId,
-    button_id: NodeId,
-}
-
-impl Counter {
-    fn create(mut root: NodeMut) -> Self {
-        let mut myself = Self::default();
-
-        let root_id = root.id();
-        let rdom = root.real_dom_mut();
-
-        // create the counter
-        let count = myself.count;
-        myself.counter_id = rdom
-            .create_node(NodeType::Text(TextNode::new(count.to_string())))
-            .id();
-        let mut button = rdom.create_node(NodeType::Element(ElementNode {
-            tag: "div".to_string(),
-            attributes: [
-                ("display".to_string().into(), "flex".to_string().into()),
-                (
-                    ("background-color", "style").into(),
-                    format!("rgb({}, {}, {})", count * 10, 0, 0,).into(),
-                ),
-                (("width", "style").into(), "100%".to_string().into()),
-                (("height", "style").into(), "100%".to_string().into()),
-                (("flex-direction", "style").into(), "row".to_string().into()),
-                (
-                    ("justify-content", "style").into(),
-                    "center".to_string().into(),
-                ),
-                (("align-items", "style").into(), "center".to_string().into()),
-            ]
-            .into_iter()
-            .collect(),
-            ..Default::default()
-        }));
-        button.add_event_listener("click");
-        button.add_event_listener("wheel");
-        button.add_child(myself.counter_id);
-        myself.button_id = button.id();
-        rdom.get_mut(root_id).unwrap().add_child(myself.button_id);
-
-        myself
-    }
-}
-
-impl Driver for Counter {
-    fn update(&mut self, rdom: &Arc<RwLock<RealDom>>) {
-        // update the counter
-        let mut rdom = rdom.write().unwrap();
-        let mut node = rdom.get_mut(self.button_id).unwrap();
-        if let NodeTypeMut::Element(mut el) = node.node_type_mut() {
-            el.set_attribute(
-                ("background-color", "style"),
-                format!("rgb({}, {}, {})", self.count * 10, 0, 0,),
-            );
-        }
-        let mut text = rdom.get_mut(self.counter_id).unwrap();
-        let type_mut = text.node_type_mut();
-        if let NodeTypeMut::Text(mut text) = type_mut {
-            *text = self.count.to_string();
-        }
-    }
-
-    fn handle_event(
-        &mut self,
-        _: &Arc<RwLock<RealDom>>,
-        _: NodeId,
-        _: &str,
-        _: Rc<EventData>,
-        _: bool,
-    ) {
-        // when a click or wheel event is fired, increment the counter
-        self.count += 1;
-    }
-
-    fn poll_async(&mut self) -> std::pin::Pin<Box<dyn futures::Future<Output = ()> + '_>> {
-        Box::pin(async move { tokio::time::sleep(std::time::Duration::from_millis(1000)).await })
-    }
-}
-
-fn main() {
-    render(Config::new(), |rdom, _, _| {
-        let mut rdom = rdom.write().unwrap();
-        let root = rdom.root_id();
-        Counter::create(rdom.get_mut(root).unwrap())
-    })
-    .unwrap();
-}
diff --git a/packages/plasmo/examples/example.png b/packages/plasmo/examples/example.png
deleted file mode 100644
index ba45e6e99..000000000
Binary files a/packages/plasmo/examples/example.png and /dev/null differ
diff --git a/packages/plasmo/examples/grid.rs b/packages/plasmo/examples/grid.rs
deleted file mode 100644
index 0c2649d00..000000000
--- a/packages/plasmo/examples/grid.rs
+++ /dev/null
@@ -1,172 +0,0 @@
-use dioxus_native_core::{
-    node::TextNode,
-    prelude::*,
-    real_dom::{NodeImmutable, NodeTypeMut},
-    NodeId,
-};
-use plasmo::{render, Config, Driver, EventData};
-use rustc_hash::FxHashSet;
-use std::rc::Rc;
-use std::sync::{Arc, RwLock};
-
-const SIZE: usize = 20;
-
-#[derive(Default, Clone, Copy)]
-struct Node {
-    container_id: Option<NodeId>,
-    text_id: Option<NodeId>,
-    count: usize,
-}
-
-struct Test {
-    node_states: [[Node; SIZE]; SIZE],
-    dirty: FxHashSet<(usize, usize)>,
-}
-
-impl Default for Test {
-    fn default() -> Self {
-        Self {
-            node_states: [[Node {
-                container_id: None,
-                text_id: None,
-                count: 0,
-            }; SIZE]; SIZE],
-            dirty: FxHashSet::default(),
-        }
-    }
-}
-
-impl Test {
-    fn create(mut root: NodeMut) -> Self {
-        let mut myself = Self::default();
-
-        // Set the root node to be a flexbox with a column direction.
-        if let NodeTypeMut::Element(mut el) = root.node_type_mut() {
-            el.set_attribute("display".to_string(), "flex".to_string());
-            el.set_attribute(("flex-direction", "style"), "column".to_string());
-            el.set_attribute(("width", "style"), "100%".to_string());
-            el.set_attribute(("height", "style"), "100%".to_string());
-        }
-
-        let root_id = root.id();
-        let rdom = root.real_dom_mut();
-
-        // create the grid
-        for (x, row) in myself.node_states.iter_mut().enumerate() {
-            let row_node = rdom
-                .create_node(NodeType::Element(ElementNode {
-                    tag: "div".to_string(),
-                    attributes: [
-                        ("display".to_string().into(), "flex".to_string().into()),
-                        (("flex-direction", "style").into(), "row".to_string().into()),
-                        (("width", "style").into(), "100%".to_string().into()),
-                        (("height", "style").into(), "100%".to_string().into()),
-                    ]
-                    .into_iter()
-                    .collect(),
-                    ..Default::default()
-                }))
-                .id();
-            for (y, node) in row.iter_mut().enumerate() {
-                let count = node.count;
-                let id = rdom
-                    .create_node(NodeType::Text(TextNode::new(count.to_string())))
-                    .id();
-                let mut button = rdom.create_node(NodeType::Element(ElementNode {
-                    tag: "div".to_string(),
-                    attributes: [
-                        ("display".to_string().into(), "flex".to_string().into()),
-                        (
-                            ("background-color", "style").into(),
-                            format!("rgb({}, {}, {})", count * 10, 0, (x + y),).into(),
-                        ),
-                        (("width", "style").into(), "100%".to_string().into()),
-                        (("height", "style").into(), "100%".to_string().into()),
-                        (("flex-direction", "style").into(), "row".to_string().into()),
-                        (
-                            ("justify-content", "style").into(),
-                            "center".to_string().into(),
-                        ),
-                        (("align-items", "style").into(), "center".to_string().into()),
-                    ]
-                    .into_iter()
-                    .collect(),
-                    ..Default::default()
-                }));
-                button.add_event_listener("click");
-                button.add_event_listener("wheel");
-                button.add_child(id);
-                let button_id = button.id();
-                rdom.get_mut(row_node).unwrap().add_child(button_id);
-                node.container_id = Some(button_id);
-                node.text_id = Some(id);
-            }
-            rdom.get_mut(root_id).unwrap().add_child(row_node);
-        }
-        myself
-    }
-}
-
-impl Driver for Test {
-    fn update(&mut self, rdom: &Arc<RwLock<RealDom>>) {
-        let mut rdom = rdom.write().unwrap();
-        for (x, y) in self.dirty.drain() {
-            let node = self.node_states[x][y];
-            let node_id = node.container_id.unwrap();
-            let mut container = rdom.get_mut(node_id).unwrap();
-            if let NodeTypeMut::Element(mut el) = container.node_type_mut() {
-                el.set_attribute(
-                    ("background-color", "style"),
-                    format!("rgb({}, {}, {})", node.count * 10, 0, (x + y),),
-                );
-            }
-            let text_id = node.text_id.unwrap();
-            let mut text = rdom.get_mut(text_id).unwrap();
-            let type_mut = text.node_type_mut();
-            if let NodeTypeMut::Text(mut text) = type_mut {
-                *text = node.count.to_string();
-            }
-        }
-    }
-
-    fn handle_event(
-        &mut self,
-        rdom: &Arc<RwLock<RealDom>>,
-        id: NodeId,
-        _: &str,
-        _: Rc<EventData>,
-        _: bool,
-    ) {
-        let rdom = rdom.read().unwrap();
-        let node = rdom.get(id).unwrap();
-        if let Some(parent) = node.parent() {
-            let child_number = parent
-                .child_ids()
-                .iter()
-                .position(|id| *id == node.id())
-                .unwrap();
-            if let Some(parents_parent) = parent.parent() {
-                let parents_child_number = parents_parent
-                    .child_ids()
-                    .iter()
-                    .position(|id| *id == parent.id())
-                    .unwrap();
-                self.node_states[parents_child_number][child_number].count += 1;
-                self.dirty.insert((parents_child_number, child_number));
-            }
-        }
-    }
-
-    fn poll_async(&mut self) -> std::pin::Pin<Box<dyn futures::Future<Output = ()> + '_>> {
-        Box::pin(async move { tokio::time::sleep(std::time::Duration::from_millis(1000)).await })
-    }
-}
-
-fn main() {
-    render(Config::new(), |rdom, _, _| {
-        let mut rdom = rdom.write().unwrap();
-        let root = rdom.root_id();
-        Test::create(rdom.get_mut(root).unwrap())
-    })
-    .unwrap();
-}
diff --git a/packages/plasmo/examples/widgets.rs b/packages/plasmo/examples/widgets.rs
deleted file mode 100644
index 42dc3723d..000000000
--- a/packages/plasmo/examples/widgets.rs
+++ /dev/null
@@ -1,102 +0,0 @@
-use dioxus_html::HasFormData;
-use dioxus_native_core::{
-    prelude::*,
-    real_dom::{NodeImmutable, NodeTypeMut},
-    NodeId,
-};
-use plasmo::{render, Config, Driver, EventData};
-use std::rc::Rc;
-use std::sync::{Arc, RwLock};
-
-#[derive(Default)]
-struct Counter {
-    count: f64,
-    button_id: NodeId,
-}
-
-impl Counter {
-    fn create(mut root: NodeMut) -> Self {
-        let mut myself = Self::default();
-
-        let root_id = root.id();
-        let rdom = root.real_dom_mut();
-
-        // create the counter
-        let count = myself.count;
-        let mut button = rdom.create_node(NodeType::Element(ElementNode {
-            tag: "input".to_string(),
-            attributes: [
-                // supported types: button, checkbox, textbox, password, number, range
-                ("type".to_string().into(), "range".to_string().into()),
-                ("display".to_string().into(), "flex".to_string().into()),
-                (("flex-direction", "style").into(), "row".to_string().into()),
-                (
-                    ("justify-content", "style").into(),
-                    "center".to_string().into(),
-                ),
-                (("align-items", "style").into(), "center".to_string().into()),
-                (
-                    "value".to_string().into(),
-                    format!("click me {count}").into(),
-                ),
-                (("width", "style").into(), "50%".to_string().into()),
-                (("height", "style").into(), "10%".to_string().into()),
-                ("min".to_string().into(), "20".to_string().into()),
-                ("max".to_string().into(), "80".to_string().into()),
-            ]
-            .into_iter()
-            .collect(),
-            ..Default::default()
-        }));
-        button.add_event_listener("input");
-        myself.button_id = button.id();
-        rdom.get_mut(root_id).unwrap().add_child(myself.button_id);
-
-        myself
-    }
-}
-
-impl Driver for Counter {
-    fn update(&mut self, rdom: &Arc<RwLock<RealDom>>) {
-        // update the counter
-        let mut rdom = rdom.write().unwrap();
-        let mut node = rdom.get_mut(self.button_id).unwrap();
-        if let NodeTypeMut::Element(mut el) = node.node_type_mut() {
-            el.set_attribute(
-                ("background-color", "style"),
-                format!("rgb({}, {}, {})", 255.0 - self.count * 2.0, 0, 0,),
-            );
-        };
-    }
-
-    fn handle_event(
-        &mut self,
-        _: &Arc<RwLock<RealDom>>,
-        _: NodeId,
-        event_type: &str,
-        event: Rc<EventData>,
-        _: bool,
-    ) {
-        if event_type == "input" {
-            // when the button is clicked, increment the counter
-            if let EventData::Form(input_event) = &*event {
-                if let Ok(value) = input_event.value().parse::<f64>() {
-                    self.count = value;
-                }
-            }
-        }
-    }
-
-    fn poll_async(&mut self) -> std::pin::Pin<Box<dyn futures::Future<Output = ()> + '_>> {
-        Box::pin(async move { tokio::time::sleep(std::time::Duration::from_millis(1000)).await })
-    }
-}
-
-fn main() {
-    render(Config::new(), |rdom, _, _| {
-        let mut rdom = rdom.write().unwrap();
-        let root = rdom.root_id();
-        Counter::create(rdom.get_mut(root).unwrap())
-    })
-    .unwrap();
-}
diff --git a/packages/plasmo/src/config.rs b/packages/plasmo/src/config.rs
deleted file mode 100644
index 41e068542..000000000
--- a/packages/plasmo/src/config.rs
+++ /dev/null
@@ -1,58 +0,0 @@
-#[derive(Clone, Copy)]
-#[non_exhaustive]
-pub struct Config {
-    pub(crate) rendering_mode: RenderingMode,
-    /// Controls if the terminal quit when the user presses `ctrl+c`?
-    /// To handle quiting on your own, use the [crate::TuiContext] root context.
-    pub(crate) ctrl_c_quit: bool,
-    /// Controls if the terminal should dislay anything, usefull for testing.
-    pub(crate) headless: bool,
-}
-
-impl Config {
-    pub fn new() -> Self {
-        Self::default()
-    }
-
-    pub fn with_rendering_mode(self, rendering_mode: RenderingMode) -> Self {
-        Self {
-            rendering_mode,
-            ..self
-        }
-    }
-
-    pub fn without_ctrl_c_quit(self) -> Self {
-        Self {
-            ctrl_c_quit: false,
-            ..self
-        }
-    }
-
-    pub fn with_headless(self) -> Self {
-        Self {
-            headless: true,
-            ..self
-        }
-    }
-}
-
-impl Default for Config {
-    fn default() -> Self {
-        Self {
-            rendering_mode: Default::default(),
-            ctrl_c_quit: true,
-            headless: false,
-        }
-    }
-}
-
-#[derive(Clone, Copy, Default)]
-pub enum RenderingMode {
-    /// only 16 colors by accessed by name, no alpha support
-    BaseColors,
-    /// 8 bit colors, will be downsampled from rgb colors
-    Ansi,
-    /// 24 bit colors, most terminals support this
-    #[default]
-    Rgb,
-}
diff --git a/packages/plasmo/src/focus.rs b/packages/plasmo/src/focus.rs
deleted file mode 100644
index 704d13b46..000000000
--- a/packages/plasmo/src/focus.rs
+++ /dev/null
@@ -1,292 +0,0 @@
-use crate::prevent_default::PreventDefault;
-
-use dioxus_native_core::{
-    node_ref::{AttributeMaskBuilder, NodeMaskBuilder},
-    prelude::*,
-    real_dom::NodeImmutable,
-    utils::{IteratorMovement, PersistantElementIter},
-};
-use dioxus_native_core_macro::partial_derive_state;
-use once_cell::sync::Lazy;
-use rustc_hash::FxHashSet;
-use shipyard::Component;
-use shipyard::{Get, ViewMut};
-
-use std::{cmp::Ordering, num::NonZeroU16};
-
-use dioxus_native_core::node_ref::NodeView;
-
-#[derive(Component)]
-pub struct Focused(pub bool);
-
-#[derive(Clone, Copy, PartialEq, Eq, Debug, Default)]
-pub(crate) enum FocusLevel {
-    #[default]
-    Unfocusable,
-    Focusable,
-    Ordered(std::num::NonZeroU16),
-}
-
-impl FocusLevel {
-    pub fn focusable(&self) -> bool {
-        match self {
-            FocusLevel::Unfocusable => false,
-            FocusLevel::Focusable => true,
-            FocusLevel::Ordered(_) => true,
-        }
-    }
-}
-
-impl PartialOrd for FocusLevel {
-    fn partial_cmp(&self, other: &Self) -> Option<std::cmp::Ordering> {
-        Some(self.cmp(other))
-    }
-}
-
-impl Ord for FocusLevel {
-    fn cmp(&self, other: &Self) -> std::cmp::Ordering {
-        match (self, other) {
-            (FocusLevel::Unfocusable, FocusLevel::Unfocusable) => std::cmp::Ordering::Equal,
-            (FocusLevel::Unfocusable, FocusLevel::Focusable) => std::cmp::Ordering::Less,
-            (FocusLevel::Unfocusable, FocusLevel::Ordered(_)) => std::cmp::Ordering::Less,
-            (FocusLevel::Focusable, FocusLevel::Unfocusable) => std::cmp::Ordering::Greater,
-            (FocusLevel::Focusable, FocusLevel::Focusable) => std::cmp::Ordering::Equal,
-            (FocusLevel::Focusable, FocusLevel::Ordered(_)) => std::cmp::Ordering::Greater,
-            (FocusLevel::Ordered(_), FocusLevel::Unfocusable) => std::cmp::Ordering::Greater,
-            (FocusLevel::Ordered(_), FocusLevel::Focusable) => std::cmp::Ordering::Less,
-            (FocusLevel::Ordered(a), FocusLevel::Ordered(b)) => a.cmp(b),
-        }
-    }
-}
-
-#[derive(Clone, PartialEq, Debug, Default, Component)]
-pub(crate) struct Focus {
-    pub level: FocusLevel,
-}
-
-#[partial_derive_state]
-impl State for Focus {
-    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
-        .with_attrs(AttributeMaskBuilder::Some(FOCUS_ATTRIBUTES))
-        .with_listeners();
-
-    type ParentDependencies = ();
-    type ChildDependencies = ();
-    type NodeDependencies = ();
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView,
-        _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        _: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: &SendAnyMap,
-    ) -> bool {
-        let new = Focus {
-            level: if let Some(a) = node_view
-                .attributes()
-                .and_then(|mut a| a.find(|a| a.attribute.name == "tabindex"))
-            {
-                if let Some(index) = a
-                    .value
-                    .as_int()
-                    .or_else(|| a.value.as_text().and_then(|v| v.parse::<i64>().ok()))
-                {
-                    match index.cmp(&0) {
-                        Ordering::Less => FocusLevel::Unfocusable,
-                        Ordering::Equal => FocusLevel::Focusable,
-                        Ordering::Greater => {
-                            FocusLevel::Ordered(NonZeroU16::new(index as u16).unwrap())
-                        }
-                    }
-                } else {
-                    FocusLevel::Unfocusable
-                }
-            } else if node_view
-                .listeners()
-                .and_then(|mut listeners| {
-                    listeners.any(|l| FOCUS_EVENTS.contains(&l)).then_some(())
-                })
-                .is_some()
-            {
-                FocusLevel::Focusable
-            } else {
-                FocusLevel::Unfocusable
-            },
-        };
-        if *self != new {
-            *self = new;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn create<'a>(
-        node_view: NodeView<()>,
-        node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        context: &SendAnyMap,
-    ) -> Self {
-        let mut myself = Self::default();
-        myself.update(node_view, node, parent, children, context);
-        myself
-    }
-}
-
-static FOCUS_EVENTS: Lazy<FxHashSet<&str>> =
-    Lazy::new(|| ["keydown", "keypress", "keyup"].into_iter().collect());
-const FOCUS_ATTRIBUTES: &[&str] = &["tabindex"];
-
-pub(crate) struct FocusState {
-    pub(crate) focus_iter: PersistantElementIter,
-    pub(crate) last_focused_id: Option<NodeId>,
-    pub(crate) focus_level: FocusLevel,
-    pub(crate) dirty: bool,
-}
-
-impl FocusState {
-    pub fn create(rdom: &mut RealDom) -> Self {
-        let focus_iter = PersistantElementIter::create(rdom);
-        Self {
-            focus_iter,
-            last_focused_id: Default::default(),
-            focus_level: Default::default(),
-            dirty: Default::default(),
-        }
-    }
-
-    /// Returns true if the focus has changed.
-    pub fn progress(&mut self, rdom: &mut RealDom, forward: bool) -> bool {
-        if let Some(last) = self.last_focused_id {
-            if rdom.get(last).unwrap().get::<PreventDefault>().map(|p| *p)
-                == Some(PreventDefault::KeyDown)
-            {
-                return false;
-            }
-        }
-        // the id that started focused to track when a loop has happened
-        let mut loop_marker_id = self.last_focused_id;
-        let focus_level = &mut self.focus_level;
-        let mut next_focus = None;
-
-        loop {
-            let new = if forward {
-                self.focus_iter.next(rdom)
-            } else {
-                self.focus_iter.prev(rdom)
-            };
-            let new_id = new.id();
-            if let IteratorMovement::Looped = new.movement() {
-                let mut closest_level = None;
-
-                if forward {
-                    // find the closest focusable element after the current level
-                    rdom.traverse_depth_first(|n| {
-                        let node_level = n.get::<Focus>().unwrap().level;
-                        if node_level != *focus_level
-                            && node_level.focusable()
-                            && node_level > *focus_level
-                        {
-                            if let Some(level) = &mut closest_level {
-                                if node_level < *level {
-                                    *level = node_level;
-                                }
-                            } else {
-                                closest_level = Some(node_level);
-                            }
-                        }
-                    });
-                } else {
-                    // find the closest focusable element before the current level
-                    rdom.traverse_depth_first(|n| {
-                        let node_level = n.get::<Focus>().unwrap().level;
-                        if node_level != *focus_level
-                            && node_level.focusable()
-                            && node_level < *focus_level
-                        {
-                            if let Some(level) = &mut closest_level {
-                                if node_level > *level {
-                                    *level = node_level;
-                                }
-                            } else {
-                                closest_level = Some(node_level);
-                            }
-                        }
-                    });
-                }
-
-                // extend the loop_marker_id to allow for another pass
-                loop_marker_id = None;
-
-                if let Some(level) = closest_level {
-                    *focus_level = level;
-                } else if forward {
-                    *focus_level = FocusLevel::Unfocusable;
-                } else {
-                    *focus_level = FocusLevel::Focusable;
-                }
-            }
-
-            // once we have looked at all the elements exit the loop
-            if let Some(last) = loop_marker_id {
-                if new_id == last {
-                    break;
-                }
-            } else {
-                loop_marker_id = Some(new_id);
-            }
-
-            let current_level = rdom.get(new_id).unwrap().get::<Focus>().unwrap().level;
-            let after_previous_focused = if forward {
-                current_level >= *focus_level
-            } else {
-                current_level <= *focus_level
-            };
-            if after_previous_focused && current_level.focusable() && current_level == *focus_level
-            {
-                next_focus = Some(new_id);
-                break;
-            }
-        }
-
-        if let Some(id) = next_focus {
-            let mut node = rdom.get_mut(id).unwrap();
-            if !node.get::<Focus>().unwrap().level.focusable() {
-                panic!()
-            }
-            node.insert(Focused(true));
-            if let Some(old) = self.last_focused_id.replace(id) {
-                let mut focused_borrow: ViewMut<Focused> = rdom.raw_world().borrow().unwrap();
-                let focused = (&mut focused_borrow).get(old).unwrap();
-                focused.0 = false;
-            }
-            // reset the position to the currently focused element
-            while self.focus_iter.next(rdom).id() != id {}
-            self.dirty = true;
-            return true;
-        }
-
-        false
-    }
-
-    pub(crate) fn set_focus(&mut self, rdom: &mut RealDom, id: NodeId) {
-        if let Some(old) = self.last_focused_id.replace(id) {
-            let mut node = rdom.get_mut(old).unwrap();
-            node.insert(Focused(false));
-        }
-        let mut node = rdom.get_mut(id).unwrap();
-        node.insert(Focused(true));
-        self.focus_level = node.get::<Focus>().unwrap().level;
-        // reset the position to the currently focused element
-        while self.focus_iter.next(rdom).id() != id {}
-        self.dirty = true;
-    }
-
-    pub(crate) fn clean(&mut self) -> bool {
-        let old = self.dirty;
-        self.dirty = false;
-        old
-    }
-}
diff --git a/packages/plasmo/src/hooks.rs b/packages/plasmo/src/hooks.rs
deleted file mode 100644
index 0c0ca1c21..000000000
--- a/packages/plasmo/src/hooks.rs
+++ /dev/null
@@ -1,1048 +0,0 @@
-use crossterm::event::{
-    Event as TermEvent, KeyCode as TermKeyCode, KeyModifiers, ModifierKeyCode, MouseButton,
-    MouseEventKind,
-};
-use dioxus_html::{
-    HasFileData, HasFormData, HasKeyboardData, HasWheelData, SerializedFocusData,
-    SerializedKeyboardData, SerializedMouseData, SerializedWheelData,
-};
-use dioxus_native_core::prelude::*;
-use dioxus_native_core::real_dom::NodeImmutable;
-use rustc_hash::{FxHashMap, FxHashSet};
-
-use dioxus_html::geometry::euclid::{Point2D, Rect, Size2D};
-use dioxus_html::geometry::{
-    ClientPoint, Coordinates, ElementPoint, PagePoint, ScreenPoint, WheelDelta,
-};
-use dioxus_html::input_data::keyboard_types::{Code, Key, Location, Modifiers};
-use dioxus_html::input_data::{
-    MouseButton as DioxusMouseButton, MouseButtonSet as DioxusMouseButtons,
-};
-use dioxus_html::{event_bubbles, prelude::*};
-use std::any::Any;
-use std::collections::HashMap;
-use std::{
-    cell::{RefCell, RefMut},
-    rc::Rc,
-    time::{Duration, Instant},
-};
-use taffy::geometry::{Point, Size};
-use taffy::{prelude::Layout, Taffy};
-
-use crate::focus::{Focus, Focused};
-use crate::layout::TaffyLayout;
-use crate::{get_abs_layout, layout_to_screen_space, FocusState};
-
-#[derive(Debug, Clone, PartialEq)]
-pub struct Event {
-    pub id: NodeId,
-    pub name: &'static str,
-    pub data: EventData,
-    pub bubbles: bool,
-}
-
-#[derive(Debug, Clone, PartialEq)]
-pub enum EventData {
-    Mouse(SerializedMouseData),
-    Keyboard(SerializedKeyboardData),
-    Focus(SerializedFocusData),
-    Wheel(SerializedWheelData),
-    Form(FormData),
-}
-
-impl EventData {
-    pub fn into_any(self) -> Rc<dyn Any> {
-        match self {
-            EventData::Mouse(m) => Rc::new(m),
-            EventData::Keyboard(k) => Rc::new(k),
-            EventData::Focus(f) => Rc::new(f),
-            EventData::Wheel(w) => Rc::new(w),
-            EventData::Form(f) => Rc::new(f),
-        }
-    }
-}
-
-#[derive(Clone, Debug, PartialEq)]
-pub struct FormData {
-    pub(crate) value: String,
-
-    pub values: HashMap<String, String>,
-
-    pub(crate) files: Option<Files>,
-}
-
-impl HasFormData for FormData {
-    fn value(&self) -> String {
-        self.value.clone()
-    }
-
-    fn values(&self) -> HashMap<String, String> {
-        self.values.clone()
-    }
-
-    fn as_any(&self) -> &dyn std::any::Any {
-        self
-    }
-}
-
-impl HasFileData for FormData {}
-
-#[derive(Clone, Debug, PartialEq)]
-pub struct Files {
-    files: FxHashMap<String, File>,
-}
-
-#[derive(Clone, Debug, PartialEq)]
-pub struct File {}
-
-type EventCore = (&'static str, EventData);
-
-const MAX_REPEAT_TIME: Duration = Duration::from_millis(100);
-
-pub struct InnerInputState {
-    mouse: Option<SerializedMouseData>,
-    wheel: Option<SerializedWheelData>,
-    last_key_pressed: Option<(SerializedKeyboardData, Instant)>,
-    pub(crate) focus_state: FocusState,
-    // subscribers: Vec<Rc<dyn Fn() + 'static>>,
-}
-
-impl InnerInputState {
-    fn create(rdom: &mut RealDom) -> Self {
-        Self {
-            mouse: None,
-            wheel: None,
-            last_key_pressed: None,
-            // subscribers: Vec::new(),
-            focus_state: FocusState::create(rdom),
-        }
-    }
-
-    // stores current input state and transforms events based on that state
-    fn apply_event(&mut self, evt: &mut EventCore) {
-        match evt.1 {
-            // limitations: only two buttons may be held at once
-            EventData::Mouse(ref mut m) => {
-                let mut held_buttons = match &self.mouse {
-                    Some(previous_data) => previous_data.held_buttons(),
-                    None => DioxusMouseButtons::empty(),
-                };
-
-                match evt.0 {
-                    "mousedown" => {
-                        held_buttons.insert(
-                            m.trigger_button()
-                                .expect("No trigger button for mousedown event"),
-                        );
-                    }
-                    "mouseup" => {
-                        held_buttons.remove(
-                            m.trigger_button()
-                                .expect("No trigger button for mouseup event"),
-                        );
-                    }
-                    _ => {}
-                }
-
-                let coordinates = m.coordinates();
-                let new_mouse_data = SerializedMouseData::new(
-                    m.trigger_button(),
-                    held_buttons,
-                    Coordinates::new(
-                        m.screen_coordinates(),
-                        m.client_coordinates(),
-                        coordinates.element(),
-                        m.page_coordinates(),
-                    ),
-                    m.modifiers(),
-                );
-
-                self.mouse = Some(new_mouse_data.clone());
-                *m = new_mouse_data;
-            }
-            EventData::Wheel(ref w) => self.wheel = Some(w.clone()),
-            EventData::Keyboard(ref mut k) => {
-                let is_repeating = self
-                    .last_key_pressed
-                    .as_ref()
-                    // heuristic for guessing which presses are auto-repeating. not necessarily accurate
-                    .filter(|(last_data, last_instant)| {
-                        last_data.key() == k.key() && last_instant.elapsed() < MAX_REPEAT_TIME
-                    })
-                    .is_some();
-
-                if is_repeating {
-                    *k = SerializedKeyboardData::new(
-                        k.key(),
-                        k.code(),
-                        k.location(),
-                        is_repeating,
-                        k.modifiers(),
-                        k.is_composing(),
-                    );
-                }
-
-                self.last_key_pressed = Some((k.clone(), Instant::now()));
-            }
-            _ => {}
-        }
-    }
-
-    fn update(
-        &mut self,
-        evts: &mut Vec<EventCore>,
-        resolved_events: &mut Vec<Event>,
-        layout: &Taffy,
-        dom: &mut RealDom,
-    ) {
-        let previous_mouse = self.mouse.clone();
-
-        self.wheel = None;
-
-        let old_focus = self.focus_state.last_focused_id;
-
-        evts.retain(|e| match &e.1 {
-            EventData::Keyboard(k) => match k.code() {
-                Code::Tab => !self
-                    .focus_state
-                    .progress(dom, !k.modifiers().contains(Modifiers::SHIFT)),
-                _ => true,
-            },
-            _ => true,
-        });
-
-        for e in evts.iter_mut() {
-            self.apply_event(e);
-        }
-
-        self.resolve_mouse_events(previous_mouse, resolved_events, layout, dom);
-
-        if old_focus != self.focus_state.last_focused_id {
-            // elements with listeners will always have a element id
-            if let Some(id) = self.focus_state.last_focused_id {
-                resolved_events.push(Event {
-                    name: "focus",
-                    id,
-                    data: EventData::Focus(SerializedFocusData::default()),
-                    bubbles: event_bubbles("focus"),
-                });
-                resolved_events.push(Event {
-                    name: "focusin",
-                    id,
-                    data: EventData::Focus(SerializedFocusData::default()),
-                    bubbles: event_bubbles("focusin"),
-                });
-            }
-            if let Some(id) = old_focus {
-                resolved_events.push(Event {
-                    name: "focusout",
-                    id,
-                    data: EventData::Focus(SerializedFocusData::default()),
-                    bubbles: event_bubbles("focusout"),
-                });
-            }
-        }
-
-        // for s in &self.subscribers {
-        //     s();
-        // }
-    }
-
-    fn resolve_mouse_events(
-        &mut self,
-        previous_mouse: Option<SerializedMouseData>,
-        resolved_events: &mut Vec<Event>,
-        layout: &Taffy,
-        dom: &mut RealDom,
-    ) {
-        fn layout_contains_point(layout: &Layout, point: ScreenPoint) -> bool {
-            let Point { x, y } = layout.location;
-            let (x, y) = (
-                layout_to_screen_space(x).round(),
-                layout_to_screen_space(y).round(),
-            );
-            let Size { width, height } = layout.size;
-            let (width, height) = (
-                layout_to_screen_space(width).round(),
-                layout_to_screen_space(height).round(),
-            );
-
-            let layout_rect = Rect::new(Point2D::new(x, y), Size2D::new(width, height));
-            layout_rect.contains(point.cast())
-        }
-
-        fn try_create_event(
-            name: &'static str,
-            data: EventData,
-            will_bubble: &mut FxHashSet<NodeId>,
-            resolved_events: &mut Vec<Event>,
-            node: NodeRef,
-            dom: &RealDom,
-        ) {
-            // only trigger event if the event was not triggered already by a child
-            let id = node.id();
-            if will_bubble.insert(id) {
-                let mut parent = Some(node);
-                while let Some(current_parent) = parent {
-                    let parent_id = current_parent.id();
-                    will_bubble.insert(parent_id);
-                    parent = current_parent.parent_id().and_then(|id| dom.get(id));
-                }
-                resolved_events.push(Event {
-                    name,
-                    id,
-                    data,
-                    bubbles: event_bubbles(name),
-                })
-            }
-        }
-
-        fn prepare_mouse_data(
-            mouse_data: &SerializedMouseData,
-            layout: &Layout,
-        ) -> SerializedMouseData {
-            let Point { x, y } = layout.location;
-            let node_origin = ClientPoint::new(
-                layout_to_screen_space(x).into(),
-                layout_to_screen_space(y).into(),
-            );
-
-            let new_client_coordinates = (mouse_data.client_coordinates() - node_origin)
-                .to_point()
-                .cast_unit();
-
-            SerializedMouseData::new(
-                mouse_data.trigger_button(),
-                mouse_data.held_buttons(),
-                Coordinates::new(
-                    mouse_data.screen_coordinates(),
-                    mouse_data.client_coordinates(),
-                    new_client_coordinates,
-                    mouse_data.page_coordinates(),
-                ),
-                mouse_data.modifiers(),
-            )
-        }
-
-        if let Some(mouse_data) = &self.mouse {
-            let new_pos = mouse_data.screen_coordinates();
-            let old_pos = previous_mouse.as_ref().map(|m| m.screen_coordinates());
-
-            // a mouse button is pressed if a button was not down and is now down
-            let previous_buttons = previous_mouse
-                .map_or(DioxusMouseButtons::empty(), |previous_data| {
-                    previous_data.held_buttons()
-                });
-            let was_pressed = !(mouse_data.held_buttons() - previous_buttons).is_empty();
-
-            // a mouse button is released if a button was down and is now not down
-            let was_released = !(previous_buttons - mouse_data.held_buttons()).is_empty();
-
-            let was_scrolled = self
-                .wheel
-                .as_ref()
-                .map_or(false, |data| !data.delta().is_zero());
-            let wheel_data = &self.wheel;
-
-            {
-                // mousemove
-                if old_pos != Some(new_pos) {
-                    let mut will_bubble = FxHashSet::default();
-                    for node in dom.get_listening_sorted("mousemove") {
-                        let node_layout = get_abs_layout(node, layout);
-                        let previously_contained = old_pos
-                            .filter(|pos| layout_contains_point(&node_layout, *pos))
-                            .is_some();
-                        let currently_contains = layout_contains_point(&node_layout, new_pos);
-
-                        if currently_contains && previously_contained {
-                            try_create_event(
-                                "mousemove",
-                                EventData::Mouse(prepare_mouse_data(mouse_data, &node_layout)),
-                                &mut will_bubble,
-                                resolved_events,
-                                node,
-                                dom,
-                            );
-                        }
-                    }
-                }
-            }
-
-            {
-                // mouseenter
-                let mut will_bubble = FxHashSet::default();
-                for node in dom.get_listening_sorted("mouseenter") {
-                    let node_layout = get_abs_layout(node, layout);
-                    let previously_contained = old_pos
-                        .filter(|pos| layout_contains_point(&node_layout, *pos))
-                        .is_some();
-                    let currently_contains = layout_contains_point(&node_layout, new_pos);
-
-                    if currently_contains && !previously_contained {
-                        try_create_event(
-                            "mouseenter",
-                            EventData::Mouse(mouse_data.clone()),
-                            &mut will_bubble,
-                            resolved_events,
-                            node,
-                            dom,
-                        );
-                    }
-                }
-            }
-
-            {
-                // mouseover
-                let mut will_bubble = FxHashSet::default();
-                for node in dom.get_listening_sorted("mouseover") {
-                    let node_layout = get_abs_layout(node, layout);
-                    let previously_contained = old_pos
-                        .filter(|pos| layout_contains_point(&node_layout, *pos))
-                        .is_some();
-                    let currently_contains = layout_contains_point(&node_layout, new_pos);
-
-                    if currently_contains && !previously_contained {
-                        try_create_event(
-                            "mouseover",
-                            EventData::Mouse(prepare_mouse_data(mouse_data, &node_layout)),
-                            &mut will_bubble,
-                            resolved_events,
-                            node,
-                            dom,
-                        );
-                    }
-                }
-            }
-
-            // mousedown
-            if was_pressed {
-                let mut will_bubble = FxHashSet::default();
-                for node in dom.get_listening_sorted("mousedown") {
-                    let node_layout = get_abs_layout(node, layout);
-                    let currently_contains = layout_contains_point(&node_layout, new_pos);
-
-                    if currently_contains {
-                        try_create_event(
-                            "mousedown",
-                            EventData::Mouse(prepare_mouse_data(mouse_data, &node_layout)),
-                            &mut will_bubble,
-                            resolved_events,
-                            node,
-                            dom,
-                        );
-                    }
-                }
-            }
-
-            {
-                // mouseup
-                if was_released {
-                    let mut will_bubble = FxHashSet::default();
-                    for node in dom.get_listening_sorted("mouseup") {
-                        let node_layout = get_abs_layout(node, layout);
-                        let currently_contains = layout_contains_point(&node_layout, new_pos);
-
-                        if currently_contains {
-                            try_create_event(
-                                "mouseup",
-                                EventData::Mouse(prepare_mouse_data(mouse_data, &node_layout)),
-                                &mut will_bubble,
-                                resolved_events,
-                                node,
-                                dom,
-                            );
-                        }
-                    }
-                }
-            }
-
-            {
-                // click
-                if mouse_data.trigger_button() == Some(DioxusMouseButton::Primary) && was_released {
-                    let mut will_bubble = FxHashSet::default();
-                    for node in dom.get_listening_sorted("click") {
-                        let node_layout = get_abs_layout(node, layout);
-                        let currently_contains = layout_contains_point(&node_layout, new_pos);
-
-                        if currently_contains {
-                            try_create_event(
-                                "click",
-                                EventData::Mouse(prepare_mouse_data(mouse_data, &node_layout)),
-                                &mut will_bubble,
-                                resolved_events,
-                                node,
-                                dom,
-                            );
-                        }
-                    }
-                }
-            }
-
-            {
-                // contextmenu
-                if mouse_data.trigger_button() == Some(DioxusMouseButton::Secondary) && was_released
-                {
-                    let mut will_bubble = FxHashSet::default();
-                    for node in dom.get_listening_sorted("contextmenu") {
-                        let node_layout = get_abs_layout(node, layout);
-                        let currently_contains = layout_contains_point(&node_layout, new_pos);
-
-                        if currently_contains {
-                            try_create_event(
-                                "contextmenu",
-                                EventData::Mouse(prepare_mouse_data(mouse_data, &node_layout)),
-                                &mut will_bubble,
-                                resolved_events,
-                                node,
-                                dom,
-                            );
-                        }
-                    }
-                }
-            }
-
-            {
-                // wheel
-                if let Some(w) = wheel_data {
-                    if was_scrolled {
-                        let mut will_bubble = FxHashSet::default();
-                        for node in dom.get_listening_sorted("wheel") {
-                            let node_layout = get_abs_layout(node, layout);
-
-                            let currently_contains = layout_contains_point(&node_layout, new_pos);
-
-                            if currently_contains {
-                                try_create_event(
-                                    "wheel",
-                                    EventData::Wheel(w.clone()),
-                                    &mut will_bubble,
-                                    resolved_events,
-                                    node,
-                                    dom,
-                                );
-                            }
-                        }
-                    }
-                }
-            }
-
-            {
-                // mouseleave
-                let mut will_bubble = FxHashSet::default();
-                for node in dom.get_listening_sorted("mouseleave") {
-                    let node_layout = get_abs_layout(node, layout);
-                    let previously_contained = old_pos
-                        .filter(|pos| layout_contains_point(&node_layout, *pos))
-                        .is_some();
-                    let currently_contains = layout_contains_point(&node_layout, new_pos);
-
-                    if !currently_contains && previously_contained {
-                        try_create_event(
-                            "mouseleave",
-                            EventData::Mouse(prepare_mouse_data(mouse_data, &node_layout)),
-                            &mut will_bubble,
-                            resolved_events,
-                            node,
-                            dom,
-                        );
-                    }
-                }
-            }
-
-            {
-                // mouseout
-                let mut will_bubble = FxHashSet::default();
-                for node in dom.get_listening_sorted("mouseout") {
-                    let node_layout = get_abs_layout(node, layout);
-                    let previously_contained = old_pos
-                        .filter(|pos| layout_contains_point(&node_layout, *pos))
-                        .is_some();
-                    let currently_contains = layout_contains_point(&node_layout, new_pos);
-
-                    if !currently_contains && previously_contained {
-                        try_create_event(
-                            "mouseout",
-                            EventData::Mouse(prepare_mouse_data(mouse_data, &node_layout)),
-                            &mut will_bubble,
-                            resolved_events,
-                            node,
-                            dom,
-                        );
-                    }
-                }
-            }
-
-            // update focus
-            if was_released {
-                let mut focus_id = None;
-                dom.traverse_depth_first(|node| {
-                    let node_layout = layout
-                        .layout(node.get::<TaffyLayout>().unwrap().node.unwrap())
-                        .unwrap();
-                    let currently_contains = layout_contains_point(node_layout, new_pos);
-
-                    if currently_contains && node.get::<Focus>().unwrap().level.focusable() {
-                        focus_id = Some(node.id());
-                    }
-                });
-                if let Some(id) = focus_id {
-                    self.focus_state.set_focus(dom, id);
-                }
-            }
-        }
-    }
-
-    // fn subscribe(&mut self, f: Rc<dyn Fn() + 'static>) {
-    //     self.subscribers.push(f)
-    // }
-}
-
-pub struct RinkInputHandler {
-    state: Rc<RefCell<InnerInputState>>,
-    queued_events: Rc<RefCell<Vec<EventCore>>>,
-}
-
-impl RinkInputHandler {
-    /// global context that handles events
-    /// limitations: GUI key modifier is never detected, key up events are not detected, and only two mouse buttons may be pressed at once
-    pub fn create(rdom: &mut RealDom) -> (Self, impl FnMut(crossterm::event::Event)) {
-        let queued_events = Rc::new(RefCell::new(Vec::new()));
-        let queued_events2 = Rc::downgrade(&queued_events);
-
-        let regester_event = move |evt: crossterm::event::Event| {
-            if let Some(evt) = get_event(evt) {
-                if let Some(v) = queued_events2.upgrade() {
-                    (*v).borrow_mut().push(evt);
-                }
-            }
-        };
-
-        let state = Rc::new(RefCell::new(InnerInputState::create(rdom)));
-
-        (
-            Self {
-                state,
-                queued_events,
-            },
-            regester_event,
-        )
-    }
-
-    pub(crate) fn get_events(&self, layout: &Taffy, dom: &mut RealDom) -> Vec<Event> {
-        let mut resolved_events = Vec::new();
-
-        (*self.state).borrow_mut().update(
-            &mut (*self.queued_events).borrow_mut(),
-            &mut resolved_events,
-            layout,
-            dom,
-        );
-
-        let events = self
-            .queued_events
-            .replace(Vec::new())
-            .into_iter()
-            // these events were added in the update stage
-            .filter(|e| {
-                ![
-                    "mouseenter",
-                    "mouseover",
-                    "mouseleave",
-                    "mouseout",
-                    "mousedown",
-                    "mouseup",
-                    "mousemove",
-                    "drag",
-                    "wheel",
-                    "click",
-                    "contextmenu",
-                ]
-                .contains(&e.0)
-            })
-            .map(|evt| (evt.0, evt.1));
-
-        let mut hm: FxHashMap<&'static str, Vec<EventData>> = FxHashMap::default();
-        for (event, data) in events {
-            if let Some(v) = hm.get_mut(event) {
-                v.push(data);
-            } else {
-                hm.insert(event, vec![data]);
-            }
-        }
-        for (event, datas) in hm {
-            for node in dom.get_listening_sorted(event) {
-                for data in &datas {
-                    let focused = node.get::<Focused>();
-                    if focused.is_some() && focused.unwrap().0 {
-                        resolved_events.push(Event {
-                            name: event,
-                            id: node.id(),
-                            data: data.clone(),
-                            bubbles: event_bubbles(event),
-                        });
-                    }
-                }
-            }
-        }
-
-        resolved_events
-    }
-
-    pub(crate) fn state(&self) -> RefMut<InnerInputState> {
-        self.state.borrow_mut()
-    }
-}
-
-// translate crossterm events into dioxus events
-fn get_event(evt: TermEvent) -> Option<(&'static str, EventData)> {
-    let (name, data): (&str, EventData) = match evt {
-        TermEvent::Key(k) => ("keydown", translate_key_event(k)?),
-        TermEvent::Mouse(m) => {
-            let (x, y) = (m.column.into(), m.row.into());
-            let alt = m.modifiers.contains(KeyModifiers::ALT);
-            let shift = m.modifiers.contains(KeyModifiers::SHIFT);
-            let ctrl = m.modifiers.contains(KeyModifiers::CONTROL);
-            let meta = false;
-
-            let get_mouse_data = |crossterm_button: Option<MouseButton>| {
-                let button = crossterm_button.map(|b| match b {
-                    MouseButton::Left => DioxusMouseButton::Primary,
-                    MouseButton::Right => DioxusMouseButton::Secondary,
-                    MouseButton::Middle => DioxusMouseButton::Auxiliary,
-                });
-
-                // from https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
-
-                let mut modifiers = Modifiers::empty();
-                if shift {
-                    modifiers.insert(Modifiers::SHIFT);
-                }
-                if ctrl {
-                    modifiers.insert(Modifiers::CONTROL);
-                }
-                if meta {
-                    modifiers.insert(Modifiers::META);
-                }
-                if alt {
-                    modifiers.insert(Modifiers::ALT);
-                }
-
-                // held mouse buttons get set later by maintaining state, as crossterm does not provide them
-                EventData::Mouse(SerializedMouseData::new(
-                    button,
-                    DioxusMouseButtons::empty(),
-                    Coordinates::new(
-                        // The `page` and `screen` coordinates are inconsistent with the MDN definition, as they are relative to the viewport (client), not the target element/page/screen, respectively.
-                        // todo?
-                        // But then, MDN defines them in terms of pixels, yet crossterm provides only row/column, and it might not be possible to get pixels. So we can't get 100% consistency anyway.
-                        ScreenPoint::new(x, y),
-                        ClientPoint::new(x, y),
-                        // offset x/y are set when the origin of the event is assigned to an element
-                        ElementPoint::new(0., 0.),
-                        PagePoint::new(x, y),
-                    ),
-                    modifiers,
-                ))
-            };
-
-            let get_wheel_data = |up| {
-                let y = if up { -1.0 } else { 1.0 };
-                EventData::Wheel(SerializedWheelData::new(WheelDelta::lines(0., y, 0.)))
-            };
-
-            match m.kind {
-                MouseEventKind::Down(b) => ("mousedown", get_mouse_data(Some(b))),
-                MouseEventKind::Up(b) => ("mouseup", get_mouse_data(Some(b))),
-                MouseEventKind::Drag(b) => ("drag", get_mouse_data(Some(b))),
-                MouseEventKind::Moved => ("mousemove", get_mouse_data(None)),
-                MouseEventKind::ScrollDown => ("wheel", get_wheel_data(false)),
-                MouseEventKind::ScrollUp => ("wheel", get_wheel_data(true)),
-            }
-        }
-        _ => return None,
-    };
-
-    Some((name, data))
-}
-
-fn translate_key_event(event: crossterm::event::KeyEvent) -> Option<EventData> {
-    let key = key_from_crossterm_key_code(event.code);
-    // crossterm does not provide code. we make a guess as to which key might have been pressed
-    // this is probably garbage if the user has a custom keyboard layout
-    let code = guess_code_from_crossterm_key_code(event.code)?;
-    let modifiers = modifiers_from_crossterm_modifiers(event.modifiers);
-
-    Some(EventData::Keyboard(SerializedKeyboardData::new(
-        key,
-        code,
-        Location::Standard,
-        false,
-        modifiers,
-        false,
-    )))
-}
-
-/// The crossterm key_code nicely represents the meaning of the key and we can mostly convert it without any issues
-///
-/// Exceptions:
-/// BackTab is converted to Key::Tab, and Null is converted to Key::Unidentified
-fn key_from_crossterm_key_code(key_code: TermKeyCode) -> Key {
-    match key_code {
-        TermKeyCode::Backspace => Key::Backspace,
-        TermKeyCode::Enter => Key::Enter,
-        TermKeyCode::Left => Key::ArrowLeft,
-        TermKeyCode::Right => Key::ArrowRight,
-        TermKeyCode::Up => Key::ArrowUp,
-        TermKeyCode::Down => Key::ArrowDown,
-        TermKeyCode::Home => Key::Home,
-        TermKeyCode::End => Key::End,
-        TermKeyCode::PageUp => Key::PageUp,
-        TermKeyCode::PageDown => Key::PageDown,
-        TermKeyCode::Tab => Key::Tab,
-        // ? no corresponding Key
-        TermKeyCode::BackTab => Key::Tab,
-        TermKeyCode::Delete => Key::Delete,
-        TermKeyCode::Insert => Key::Insert,
-        TermKeyCode::F(1) => Key::F1,
-        TermKeyCode::F(2) => Key::F2,
-        TermKeyCode::F(3) => Key::F3,
-        TermKeyCode::F(4) => Key::F4,
-        TermKeyCode::F(5) => Key::F5,
-        TermKeyCode::F(6) => Key::F6,
-        TermKeyCode::F(7) => Key::F7,
-        TermKeyCode::F(8) => Key::F8,
-        TermKeyCode::F(9) => Key::F9,
-        TermKeyCode::F(10) => Key::F10,
-        TermKeyCode::F(11) => Key::F11,
-        TermKeyCode::F(12) => Key::F12,
-        TermKeyCode::F(13) => Key::F13,
-        TermKeyCode::F(14) => Key::F14,
-        TermKeyCode::F(15) => Key::F15,
-        TermKeyCode::F(16) => Key::F16,
-        TermKeyCode::F(17) => Key::F17,
-        TermKeyCode::F(18) => Key::F18,
-        TermKeyCode::F(19) => Key::F19,
-        TermKeyCode::F(20) => Key::F20,
-        TermKeyCode::F(21) => Key::F21,
-        TermKeyCode::F(22) => Key::F22,
-        TermKeyCode::F(23) => Key::F23,
-        TermKeyCode::F(24) => Key::F24,
-        TermKeyCode::F(other) => {
-            panic!("Unexpected function key: {other:?}")
-        }
-        TermKeyCode::Char(c) => Key::Character(c.to_string()),
-        TermKeyCode::Null => Key::Unidentified,
-        TermKeyCode::Esc => Key::Escape,
-        TermKeyCode::CapsLock => Key::CapsLock,
-        TermKeyCode::ScrollLock => Key::ScrollLock,
-        TermKeyCode::NumLock => Key::NumLock,
-        TermKeyCode::PrintScreen => Key::PrintScreen,
-        TermKeyCode::Pause => Key::Pause,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::FastForward) => Key::MediaFastForward,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::PlayPause) => Key::MediaPlayPause,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::TrackPrevious) => {
-            Key::MediaTrackPrevious
-        }
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::TrackNext) => Key::MediaTrackNext,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::Stop) => Key::MediaStop,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::Play) => Key::MediaPlay,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::Pause) => Key::MediaPause,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::Record) => Key::MediaRecord,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::Rewind) => Key::MediaRewind,
-        TermKeyCode::Modifier(modifier) => match modifier {
-            ModifierKeyCode::IsoLevel3Shift
-            | ModifierKeyCode::IsoLevel5Shift
-            | ModifierKeyCode::RightShift
-            | ModifierKeyCode::LeftShift => Key::Shift,
-            ModifierKeyCode::RightControl | ModifierKeyCode::LeftControl => Key::Control,
-            ModifierKeyCode::RightAlt | ModifierKeyCode::LeftAlt => Key::Alt,
-            ModifierKeyCode::RightSuper | ModifierKeyCode::LeftSuper => Key::Super,
-            ModifierKeyCode::RightHyper | ModifierKeyCode::LeftHyper => Key::Hyper,
-            ModifierKeyCode::LeftMeta | ModifierKeyCode::RightMeta => Key::Meta,
-        },
-        _ => Key::Unidentified,
-    }
-}
-
-// Crossterm does not provide a way to get the `code` (physical key on keyboard)
-// So we make a guess based on their `key_code`, but this is probably going to break on anything other than a very standard european keyboard
-// It may look fine, but it's a horrible hack. But there's nothing better we can do.
-fn guess_code_from_crossterm_key_code(key_code: TermKeyCode) -> Option<Code> {
-    let code = match key_code {
-        TermKeyCode::Backspace => Code::Backspace,
-        TermKeyCode::Enter => Code::Enter,
-        TermKeyCode::Left => Code::ArrowLeft,
-        TermKeyCode::Right => Code::ArrowRight,
-        TermKeyCode::Up => Code::ArrowUp,
-        TermKeyCode::Down => Code::ArrowDown,
-        TermKeyCode::Home => Code::Home,
-        TermKeyCode::End => Code::End,
-        TermKeyCode::PageUp => Code::PageUp,
-        TermKeyCode::PageDown => Code::PageDown,
-        TermKeyCode::Tab => Code::Tab,
-        // ? Apparently you get BackTab by pressing Tab
-        TermKeyCode::BackTab => Code::Tab,
-        TermKeyCode::Delete => Code::Delete,
-        TermKeyCode::Insert => Code::Insert,
-        TermKeyCode::F(1) => Code::F1,
-        TermKeyCode::F(2) => Code::F2,
-        TermKeyCode::F(3) => Code::F3,
-        TermKeyCode::F(4) => Code::F4,
-        TermKeyCode::F(5) => Code::F5,
-        TermKeyCode::F(6) => Code::F6,
-        TermKeyCode::F(7) => Code::F7,
-        TermKeyCode::F(8) => Code::F8,
-        TermKeyCode::F(9) => Code::F9,
-        TermKeyCode::F(10) => Code::F10,
-        TermKeyCode::F(11) => Code::F11,
-        TermKeyCode::F(12) => Code::F12,
-        TermKeyCode::F(13) => Code::F13,
-        TermKeyCode::F(14) => Code::F14,
-        TermKeyCode::F(15) => Code::F15,
-        TermKeyCode::F(16) => Code::F16,
-        TermKeyCode::F(17) => Code::F17,
-        TermKeyCode::F(18) => Code::F18,
-        TermKeyCode::F(19) => Code::F19,
-        TermKeyCode::F(20) => Code::F20,
-        TermKeyCode::F(21) => Code::F21,
-        TermKeyCode::F(22) => Code::F22,
-        TermKeyCode::F(23) => Code::F23,
-        TermKeyCode::F(24) => Code::F24,
-        TermKeyCode::F(other) => {
-            panic!("Unexpected function key: {other:?}")
-        }
-        // this is a horrible way for crossterm to represent keys but we have to deal with it
-        TermKeyCode::Char(c) => match c {
-            'A'..='Z' | 'a'..='z' => match c.to_ascii_uppercase() {
-                'A' => Code::KeyA,
-                'B' => Code::KeyB,
-                'C' => Code::KeyC,
-                'D' => Code::KeyD,
-                'E' => Code::KeyE,
-                'F' => Code::KeyF,
-                'G' => Code::KeyG,
-                'H' => Code::KeyH,
-                'I' => Code::KeyI,
-                'J' => Code::KeyJ,
-                'K' => Code::KeyK,
-                'L' => Code::KeyL,
-                'M' => Code::KeyM,
-                'N' => Code::KeyN,
-                'O' => Code::KeyO,
-                'P' => Code::KeyP,
-                'Q' => Code::KeyQ,
-                'R' => Code::KeyR,
-                'S' => Code::KeyS,
-                'T' => Code::KeyT,
-                'U' => Code::KeyU,
-                'V' => Code::KeyV,
-                'W' => Code::KeyW,
-                'X' => Code::KeyX,
-                'Y' => Code::KeyY,
-                'Z' => Code::KeyZ,
-                _ => unreachable!("Exhaustively checked all characters in range A..Z"),
-            },
-            ' ' => Code::Space,
-            '[' | '{' => Code::BracketLeft,
-            ']' | '}' => Code::BracketRight,
-            ';' => Code::Semicolon,
-            ':' => Code::Semicolon,
-            ',' => Code::Comma,
-            '<' => Code::Comma,
-            '.' => Code::Period,
-            '>' => Code::Period,
-            '1' => Code::Digit1,
-            '2' => Code::Digit2,
-            '3' => Code::Digit3,
-            '4' => Code::Digit4,
-            '5' => Code::Digit5,
-            '6' => Code::Digit6,
-            '7' => Code::Digit7,
-            '8' => Code::Digit8,
-            '9' => Code::Digit9,
-            '0' => Code::Digit0,
-            '!' => Code::Digit1,
-            '@' => Code::Digit2,
-            '#' => Code::Digit3,
-            '$' => Code::Digit4,
-            '%' => Code::Digit5,
-            '^' => Code::Digit6,
-            '&' => Code::Digit7,
-            '*' => Code::Digit8,
-            '(' => Code::Digit9,
-            ')' => Code::Digit0,
-            // numpad characters are ambiguous; we don't know which key was really pressed
-            // it could be also:
-            // '*' => Code::Multiply,
-            // '/' => Code::Divide,
-            // '-' => Code::Subtract,
-            // '+' => Code::Add,
-            '+' => Code::Equal,
-            '-' | '_' => Code::Minus,
-            '\'' => Code::Quote,
-            '"' => Code::Quote,
-            '\\' => Code::Backslash,
-            '|' => Code::Backslash,
-            '/' => Code::Slash,
-            '?' => Code::Slash,
-            '=' => Code::Equal,
-            '`' => Code::Backquote,
-            '~' => Code::Backquote,
-            _ => return None,
-        },
-        TermKeyCode::Esc => Code::Escape,
-        TermKeyCode::CapsLock => Code::CapsLock,
-        TermKeyCode::ScrollLock => Code::ScrollLock,
-        TermKeyCode::NumLock => Code::NumLock,
-        TermKeyCode::PrintScreen => Code::PrintScreen,
-        TermKeyCode::Pause => Code::Pause,
-        TermKeyCode::Menu => Code::ContextMenu,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::FastForward) => Code::MediaFastForward,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::PlayPause) => Code::MediaPlayPause,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::TrackPrevious) => {
-            Code::MediaTrackPrevious
-        }
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::TrackNext) => Code::MediaTrackNext,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::Stop) => Code::MediaStop,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::Play) => Code::MediaPlay,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::Pause) => Code::MediaPause,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::Record) => Code::MediaRecord,
-        TermKeyCode::Media(crossterm::event::MediaKeyCode::Rewind) => Code::MediaRewind,
-        TermKeyCode::Modifier(modifier) => match modifier {
-            ModifierKeyCode::IsoLevel3Shift
-            | ModifierKeyCode::IsoLevel5Shift
-            | ModifierKeyCode::LeftShift => Code::ShiftLeft,
-            ModifierKeyCode::RightShift => Code::ShiftRight,
-            ModifierKeyCode::RightControl => Code::ControlRight,
-            ModifierKeyCode::LeftControl => Code::ControlLeft,
-            ModifierKeyCode::RightAlt => Code::AltRight,
-            ModifierKeyCode::LeftAlt => Code::AltLeft,
-            ModifierKeyCode::RightSuper | ModifierKeyCode::LeftSuper => Code::Super,
-            ModifierKeyCode::RightHyper | ModifierKeyCode::LeftHyper => Code::Hyper,
-            ModifierKeyCode::LeftMeta => Code::MetaLeft,
-            ModifierKeyCode::RightMeta => Code::MetaRight,
-        },
-        _ => return None,
-    };
-
-    Some(code)
-}
-
-fn modifiers_from_crossterm_modifiers(src: KeyModifiers) -> Modifiers {
-    let mut modifiers = Modifiers::empty();
-
-    if src.contains(KeyModifiers::SHIFT) {
-        modifiers.insert(Modifiers::SHIFT);
-    }
-
-    if src.contains(KeyModifiers::ALT) {
-        modifiers.insert(Modifiers::ALT);
-    }
-
-    if src.contains(KeyModifiers::CONTROL) {
-        modifiers.insert(Modifiers::CONTROL);
-    }
-
-    modifiers
-}
diff --git a/packages/plasmo/src/layout.rs b/packages/plasmo/src/layout.rs
deleted file mode 100644
index 72c8f68b2..000000000
--- a/packages/plasmo/src/layout.rs
+++ /dev/null
@@ -1,380 +0,0 @@
-use std::sync::{Arc, Mutex};
-
-use dioxus_native_core::exports::shipyard::Component;
-use dioxus_native_core::layout_attributes::{
-    apply_layout_attributes_cfg, BorderWidths, LayoutConfigeration,
-};
-use dioxus_native_core::node::OwnedAttributeView;
-use dioxus_native_core::node_ref::{AttributeMaskBuilder, NodeMaskBuilder, NodeView};
-use dioxus_native_core::prelude::*;
-use dioxus_native_core_macro::partial_derive_state;
-use taffy::prelude::*;
-
-use crate::{screen_to_layout_space, unit_to_layout_space};
-
-#[derive(Debug, Clone, Copy, PartialEq)]
-pub(crate) enum PossiblyUninitalized<T> {
-    Uninitalized,
-    Initialized(T),
-}
-
-impl<T> PossiblyUninitalized<T> {
-    pub fn unwrap(self) -> T {
-        match self {
-            Self::Initialized(i) => i,
-            _ => panic!("uninitalized"),
-        }
-    }
-}
-impl<T> Default for PossiblyUninitalized<T> {
-    fn default() -> Self {
-        Self::Uninitalized
-    }
-}
-
-#[derive(Clone, PartialEq, Default, Debug, Component)]
-pub(crate) struct TaffyLayout {
-    pub style: Style,
-    pub node: PossiblyUninitalized<Node>,
-}
-
-#[partial_derive_state]
-impl State for TaffyLayout {
-    type ChildDependencies = (Self,);
-    type ParentDependencies = ();
-    type NodeDependencies = ();
-
-    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
-        .with_attrs(AttributeMaskBuilder::Some(SORTED_LAYOUT_ATTRS))
-        .with_text();
-
-    // The layout state should be effected by the shadow dom
-    const TRAVERSE_SHADOW_DOM: bool = true;
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView,
-        _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        _: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        ctx: &SendAnyMap,
-    ) -> bool {
-        let mut changed = false;
-        let taffy: &Arc<Mutex<Taffy>> = ctx.get().unwrap();
-        let mut taffy = taffy.lock().expect("poisoned taffy");
-        let mut style = Style::default();
-        if let Some(text) = node_view.text() {
-            let char_len = text.chars().count();
-
-            style = Style {
-                size: Size {
-                    // characters are 1 point tall
-                    height: Dimension::Points(screen_to_layout_space(1)),
-
-                    // text is as long as it is declared
-                    width: Dimension::Points(screen_to_layout_space(char_len as u16)),
-                },
-                ..Default::default()
-            };
-            if let PossiblyUninitalized::Initialized(n) = self.node {
-                if self.style != style {
-                    taffy.set_style(n, style.clone()).unwrap();
-                }
-            } else {
-                self.node =
-                    PossiblyUninitalized::Initialized(taffy.new_leaf(style.clone()).unwrap());
-                changed = true;
-            }
-        } else {
-            // gather up all the styles from the attribute list
-            if let Some(attributes) = node_view.attributes() {
-                for OwnedAttributeView {
-                    attribute, value, ..
-                } in attributes
-                {
-                    if value.as_custom().is_none() {
-                        apply_layout_attributes_cfg(
-                            &attribute.name,
-                            &value.to_string(),
-                            &mut style,
-                            &LayoutConfigeration {
-                                border_widths: BorderWidths {
-                                    thin: 1.0,
-                                    medium: 1.0,
-                                    thick: 1.0,
-                                },
-                            },
-                        );
-                    }
-                }
-            }
-
-            // Set all direct nodes as our children
-            let mut child_layout = vec![];
-            for (l,) in children {
-                child_layout.push(l.node.unwrap());
-            }
-
-            fn scale_dimension(d: Dimension) -> Dimension {
-                match d {
-                    Dimension::Points(p) => Dimension::Points(unit_to_layout_space(p)),
-                    Dimension::Percent(p) => Dimension::Percent(p),
-                    Dimension::Auto => Dimension::Auto,
-                }
-            }
-
-            fn scale_length_percentage_auto(d: LengthPercentageAuto) -> LengthPercentageAuto {
-                match d {
-                    LengthPercentageAuto::Points(p) => {
-                        LengthPercentageAuto::Points(unit_to_layout_space(p))
-                    }
-                    LengthPercentageAuto::Percent(p) => LengthPercentageAuto::Percent(p),
-                    LengthPercentageAuto::Auto => LengthPercentageAuto::Auto,
-                }
-            }
-
-            fn scale_length_percentage(d: LengthPercentage) -> LengthPercentage {
-                match d {
-                    LengthPercentage::Points(p) => {
-                        LengthPercentage::Points(unit_to_layout_space(p))
-                    }
-                    LengthPercentage::Percent(p) => LengthPercentage::Percent(p),
-                }
-            }
-
-            let scaled_style = Style {
-                inset: Rect {
-                    left: scale_length_percentage_auto(style.inset.left),
-                    right: scale_length_percentage_auto(style.inset.right),
-                    top: scale_length_percentage_auto(style.inset.top),
-                    bottom: scale_length_percentage_auto(style.inset.bottom),
-                },
-                margin: Rect {
-                    left: scale_length_percentage_auto(style.margin.left),
-                    right: scale_length_percentage_auto(style.margin.right),
-                    top: scale_length_percentage_auto(style.margin.top),
-                    bottom: scale_length_percentage_auto(style.margin.bottom),
-                },
-                padding: Rect {
-                    left: scale_length_percentage(style.padding.left),
-                    right: scale_length_percentage(style.padding.right),
-                    top: scale_length_percentage(style.padding.top),
-                    bottom: scale_length_percentage(style.padding.bottom),
-                },
-                border: Rect {
-                    left: scale_length_percentage(style.border.left),
-                    right: scale_length_percentage(style.border.right),
-                    top: scale_length_percentage(style.border.top),
-                    bottom: scale_length_percentage(style.border.bottom),
-                },
-                gap: Size {
-                    width: scale_length_percentage(style.gap.width),
-                    height: scale_length_percentage(style.gap.height),
-                },
-                flex_basis: scale_dimension(style.flex_basis),
-                size: Size {
-                    width: scale_dimension(style.size.width),
-                    height: scale_dimension(style.size.height),
-                },
-                min_size: Size {
-                    width: scale_dimension(style.min_size.width),
-                    height: scale_dimension(style.min_size.height),
-                },
-                max_size: Size {
-                    width: scale_dimension(style.max_size.width),
-                    height: scale_dimension(style.max_size.height),
-                },
-                ..style.clone()
-            };
-
-            if let PossiblyUninitalized::Initialized(n) = self.node {
-                if self.style != style {
-                    taffy.set_style(n, scaled_style).unwrap();
-                }
-                if taffy.children(n).unwrap() != child_layout {
-                    taffy.set_children(n, &child_layout).unwrap();
-                }
-            } else {
-                self.node = PossiblyUninitalized::Initialized(
-                    taffy
-                        .new_with_children(scaled_style, &child_layout)
-                        .unwrap(),
-                );
-                changed = true;
-            }
-        }
-        if self.style != style {
-            changed = true;
-            self.style = style;
-        }
-        changed
-    }
-
-    fn create<'a>(
-        node_view: NodeView<()>,
-        node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        context: &SendAnyMap,
-    ) -> Self {
-        let mut myself = Self::default();
-        myself.update(node_view, node, parent, children, context);
-        myself
-    }
-}
-
-// these are the attributes in layout_attiributes in native-core
-const SORTED_LAYOUT_ATTRS: &[&str] = &[
-    "align-content",
-    "align-items",
-    "align-self",
-    "animation",
-    "animation-delay",
-    "animation-direction",
-    "animation-duration",
-    "animation-fill-mode",
-    "animation-iteration-count",
-    "animation-name",
-    "animation-play-state",
-    "animation-timing-function",
-    "backface-visibility",
-    "border",
-    "border-bottom",
-    "border-bottom-color",
-    "border-bottom-left-radius",
-    "border-bottom-right-radius",
-    "border-bottom-style",
-    "border-bottom-width",
-    "border-collapse",
-    "border-color",
-    "border-image",
-    "border-image-outset",
-    "border-image-repeat",
-    "border-image-slice",
-    "border-image-source",
-    "border-image-width",
-    "border-left",
-    "border-left-color",
-    "border-left-style",
-    "border-left-width",
-    "border-radius",
-    "border-right",
-    "border-right-color",
-    "border-right-style",
-    "border-right-width",
-    "border-spacing",
-    "border-style",
-    "border-top",
-    "border-top-color",
-    "border-top-left-radius",
-    "border-top-right-radius",
-    "border-top-style",
-    "border-top-width",
-    "border-width",
-    "bottom",
-    "box-shadow",
-    "box-sizing",
-    "caption-side",
-    "clear",
-    "clip",
-    "column-count",
-    "column-fill",
-    "column-gap",
-    "column-rule",
-    "column-rule-color",
-    "column-rule-style",
-    "column-rule-width",
-    "column-span",
-    "column-width",
-    "columns",
-    "content",
-    "counter-increment",
-    "counter-reset",
-    "cursor",
-    "direction",
-    "ltr",
-    "rtl",
-    "display",
-    "empty-cells",
-    "flex",
-    "flex-basis",
-    "flex-direction",
-    "flex-flow",
-    "flex-grow",
-    "flex-shrink",
-    "flex-wrap",
-    "float",
-    "height",
-    "justify-content",
-    "flex-start",
-    "flex-end",
-    "center",
-    "space-between",
-    "space-around",
-    "space-evenly",
-    "left",
-    "letter-spacing",
-    "line-height",
-    "list-style",
-    "list-style-image",
-    "list-style-position",
-    "list-style-type",
-    "margin",
-    "margin-bottom",
-    "margin-left",
-    "margin-right",
-    "margin-top",
-    "max-height",
-    "max-width",
-    "min-height",
-    "min-width",
-    "opacity",
-    "order",
-    "outline",
-    "outline-color",
-    "outline-offset",
-    "outline-style",
-    "outline-width",
-    "overflow",
-    "overflow-x",
-    "overflow-y",
-    "padding",
-    "padding-bottom",
-    "padding-left",
-    "padding-right",
-    "padding-top",
-    "page-break-after",
-    "page-break-before",
-    "page-break-inside",
-    "perspective",
-    "perspective-origin",
-    "position",
-    "static",
-    "relative",
-    "fixed",
-    "absolute",
-    "sticky",
-    "pointer-events",
-    "quotes",
-    "resize",
-    "right",
-    "tab-size",
-    "table-layout",
-    "top",
-    "transform",
-    "transform-origin",
-    "transform-style",
-    "transition",
-    "transition-delay",
-    "transition-duration",
-    "transition-property",
-    "transition-timing-function",
-    "vertical-align",
-    "visibility",
-    "white-space",
-    "width",
-    "word-break",
-    "word-spacing",
-    "word-wrap",
-    "z-index",
-];
diff --git a/packages/plasmo/src/lib.rs b/packages/plasmo/src/lib.rs
deleted file mode 100644
index c5bc0d647..000000000
--- a/packages/plasmo/src/lib.rs
+++ /dev/null
@@ -1,396 +0,0 @@
-#![doc = include_str!("../README.md")]
-#![doc(html_logo_url = "https://avatars.githubusercontent.com/u/79236386")]
-#![doc(html_favicon_url = "https://avatars.githubusercontent.com/u/79236386")]
-
-use crate::focus::Focus;
-use anyhow::Result;
-use crossterm::{
-    cursor::{MoveTo, RestorePosition, SavePosition, Show},
-    event::{DisableMouseCapture, EnableMouseCapture, Event as TermEvent, KeyCode, KeyModifiers},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-};
-use dioxus_native_core::{prelude::*, tree::TreeRef};
-use dioxus_native_core::{real_dom::RealDom, FxDashSet, NodeId, SendAnyMap};
-use focus::FocusState;
-use futures::{channel::mpsc::UnboundedSender, pin_mut, Future, StreamExt};
-use futures_channel::mpsc::unbounded;
-use layout::TaffyLayout;
-use prevent_default::PreventDefault;
-use ratatui::{backend::CrosstermBackend, Terminal};
-use std::{io, time::Duration};
-use std::{
-    pin::Pin,
-    sync::{Arc, Mutex},
-};
-use std::{rc::Rc, sync::RwLock};
-use style_attributes::StyleModifier;
-pub use taffy::{geometry::Point, prelude::*};
-use tokio::select;
-use widgets::{register_widgets, RinkWidgetResponder, RinkWidgetTraitObject};
-
-mod config;
-mod focus;
-mod hooks;
-mod layout;
-mod prevent_default;
-pub mod query;
-mod render;
-mod style;
-mod style_attributes;
-mod widget;
-mod widgets;
-
-pub use config::*;
-pub use hooks::*;
-pub use query::Query;
-
-// the layout space has a multiplier of 10 to minimize rounding errors
-pub(crate) fn screen_to_layout_space(screen: u16) -> f32 {
-    screen as f32 * 10.0
-}
-
-pub(crate) fn unit_to_layout_space(screen: f32) -> f32 {
-    screen * 10.0
-}
-
-pub(crate) fn layout_to_screen_space(layout: f32) -> f32 {
-    layout / 10.0
-}
-
-#[derive(Clone)]
-pub struct TuiContext {
-    tx: UnboundedSender<InputEvent>,
-}
-
-impl TuiContext {
-    pub fn new(tx: UnboundedSender<InputEvent>) -> Self {
-        Self { tx }
-    }
-
-    pub fn quit(&self) {
-        // panic!("ack")
-        self.tx.unbounded_send(InputEvent::Close).unwrap();
-    }
-
-    pub fn inject_event(&self, event: crossterm::event::Event) {
-        self.tx
-            .unbounded_send(InputEvent::UserInput(event))
-            .unwrap();
-    }
-}
-
-pub fn render<R: Driver>(
-    cfg: Config,
-    create_renderer: impl FnOnce(
-        &Arc<RwLock<RealDom>>,
-        &Arc<Mutex<Taffy>>,
-        UnboundedSender<InputEvent>,
-    ) -> R,
-) -> Result<()> {
-    let mut rdom = RealDom::new([
-        TaffyLayout::to_type_erased(),
-        Focus::to_type_erased(),
-        StyleModifier::to_type_erased(),
-        PreventDefault::to_type_erased(),
-    ]);
-
-    // Setup input handling
-
-    // The event channel for fully resolved events
-    let (event_tx, mut event_reciever) = unbounded();
-
-    // The event channel for raw terminal events
-    let (raw_event_tx, mut raw_event_reciever) = unbounded();
-    let event_tx_clone = raw_event_tx.clone();
-    if !cfg.headless {
-        std::thread::spawn(move || {
-            // Timeout after 10ms when waiting for events
-            let tick_rate = Duration::from_millis(10);
-            loop {
-                if crossterm::event::poll(tick_rate).unwrap() {
-                    let evt = crossterm::event::read().unwrap();
-                    if raw_event_tx
-                        .unbounded_send(InputEvent::UserInput(evt))
-                        .is_err()
-                    {
-                        break;
-                    }
-                }
-            }
-        });
-    }
-
-    register_widgets(&mut rdom, event_tx);
-
-    let (handler, mut register_event) = RinkInputHandler::create(&mut rdom);
-
-    let rdom = Arc::new(RwLock::new(rdom));
-    let taffy = Arc::new(Mutex::new(Taffy::new()));
-    let mut renderer = create_renderer(&rdom, &taffy, event_tx_clone);
-
-    // insert the query engine into the rdom
-    let query_engine = Query::new(rdom.clone(), taffy.clone());
-    {
-        let mut rdom = rdom.write().unwrap();
-        rdom.raw_world_mut().add_unique(query_engine);
-    }
-
-    tokio::runtime::Builder::new_current_thread()
-        .enable_all()
-        .build()?
-        .block_on(async {
-            {
-                renderer.update(&rdom);
-                let mut any_map = SendAnyMap::new();
-                any_map.insert(taffy.clone());
-                let mut rdom = rdom.write().unwrap();
-                let _ = rdom.update_state(any_map);
-            }
-
-            let mut terminal = (!cfg.headless).then(|| {
-                enable_raw_mode().unwrap();
-                let mut stdout = std::io::stdout();
-                execute!(
-                    stdout,
-                    EnterAlternateScreen,
-                    EnableMouseCapture,
-                    MoveTo(0, 1000)
-                )
-                .unwrap();
-                let backend = CrosstermBackend::new(io::stdout());
-                Terminal::new(backend).unwrap()
-            });
-            if let Some(terminal) = &mut terminal {
-                terminal.clear().unwrap();
-            }
-
-            let mut to_rerender = FxDashSet::default();
-            to_rerender.insert(rdom.read().unwrap().root_id());
-            let mut updated = true;
-
-            loop {
-                /*
-                -> render the nodes in the right place with tui/crossterm
-                -> wait for changes
-                -> resolve events
-                -> lazily update the layout and style based on nodes changed
-                use simd to compare lines for diffing?
-                todo: lazy re-rendering
-                */
-
-                if !to_rerender.is_empty() || updated {
-                    updated = false;
-                    fn resize(dims: ratatui::layout::Rect, taffy: &mut Taffy, rdom: &RealDom) {
-                        let width = screen_to_layout_space(dims.width);
-                        let height = screen_to_layout_space(dims.height);
-                        let root_node = rdom
-                            .get(rdom.root_id())
-                            .unwrap()
-                            .get::<TaffyLayout>()
-                            .unwrap()
-                            .node
-                            .unwrap();
-
-                        // the root node fills the entire area
-                        let mut style = taffy.style(root_node).unwrap().clone();
-                        let new_size = Size {
-                            width: Dimension::Points(width),
-                            height: Dimension::Points(height),
-                        };
-                        if style.size != new_size {
-                            style.size = new_size;
-                            taffy.set_style(root_node, style).unwrap();
-                        }
-
-                        let size = Size {
-                            width: AvailableSpace::Definite(width),
-                            height: AvailableSpace::Definite(height),
-                        };
-                        taffy.compute_layout(root_node, size).unwrap();
-                    }
-                    if let Some(terminal) = &mut terminal {
-                        execute!(terminal.backend_mut(), SavePosition).unwrap();
-                        terminal.draw(|frame| {
-                            let rdom = rdom.write().unwrap();
-                            let mut taffy = taffy.lock().expect("taffy lock poisoned");
-                            // size is guaranteed to not change when rendering
-                            resize(frame.size(), &mut taffy, &rdom);
-                            let root = rdom.get(rdom.root_id()).unwrap();
-                            render::render_vnode(frame, &taffy, root, cfg, Point::ZERO);
-                        })?;
-                        execute!(terminal.backend_mut(), RestorePosition, Show).unwrap();
-                    } else {
-                        let rdom = rdom.read().unwrap();
-                        resize(
-                            ratatui::layout::Rect {
-                                x: 0,
-                                y: 0,
-                                width: 1000,
-                                height: 1000,
-                            },
-                            &mut taffy.lock().expect("taffy lock poisoned"),
-                            &rdom,
-                        );
-                    }
-                }
-
-                let mut event_recieved = None;
-                {
-                    let wait = renderer.poll_async();
-
-                    pin_mut!(wait);
-
-                    select! {
-                        _ = wait => {
-
-                        },
-                        evt = raw_event_reciever.next() => {
-                            match evt.as_ref().unwrap() {
-                                InputEvent::UserInput(event) => match event {
-                                    TermEvent::Key(key) => {
-                                        if matches!(key.code, KeyCode::Char('C' | 'c'))
-                                        && key.modifiers.contains(KeyModifiers::CONTROL)
-                                        && cfg.ctrl_c_quit
-                                        {
-                                            break;
-                                        }
-                                    }
-                                    TermEvent::Resize(_, _) => updated = true,
-                                    _ => {}
-                                },
-                                InputEvent::Close => break,
-                            };
-
-                            if let InputEvent::UserInput(evt) = evt.unwrap() {
-                                register_event(evt);
-                            }
-                        },
-                        Some(evt) = event_reciever.next() => {
-                            event_recieved = Some(evt);
-                        }
-                    }
-                }
-
-                {
-                    if let Some(evt) = event_recieved {
-                        renderer.handle_event(
-                            &rdom,
-                            evt.id,
-                            evt.name,
-                            Rc::new(evt.data),
-                            evt.bubbles,
-                        );
-                    }
-                    {
-                        let evts = handler.get_events(
-                            &taffy.lock().expect("taffy lock poisoned"),
-                            &mut rdom.write().unwrap(),
-                        );
-                        updated |= handler.state().focus_state.clean();
-
-                        for e in evts {
-                            bubble_event_to_widgets(&mut rdom.write().unwrap(), &e);
-                            renderer.handle_event(&rdom, e.id, e.name, Rc::new(e.data), e.bubbles);
-                        }
-                    }
-                    // updates the dom's nodes
-                    renderer.update(&rdom);
-                    // update the style and layout
-                    let mut rdom = rdom.write().unwrap();
-                    let mut any_map = SendAnyMap::new();
-                    any_map.insert(taffy.clone());
-                    let (new_to_rerender, dirty) = rdom.update_state(any_map);
-                    to_rerender = new_to_rerender;
-                    let text_mask = NodeMaskBuilder::new().with_text().build();
-                    for (id, mask) in dirty {
-                        if mask.overlaps(&text_mask) {
-                            to_rerender.insert(id);
-                        }
-                    }
-                }
-            }
-
-            if let Some(terminal) = &mut terminal {
-                disable_raw_mode()?;
-                execute!(
-                    terminal.backend_mut(),
-                    LeaveAlternateScreen,
-                    DisableMouseCapture
-                )?;
-                terminal.show_cursor()?;
-            }
-
-            Ok(())
-        })
-}
-
-#[derive(Debug)]
-pub enum InputEvent {
-    UserInput(TermEvent),
-    Close,
-}
-
-pub trait Driver {
-    fn update(&mut self, rdom: &Arc<RwLock<RealDom>>);
-    fn handle_event(
-        &mut self,
-        rdom: &Arc<RwLock<RealDom>>,
-        id: NodeId,
-        event: &str,
-        value: Rc<EventData>,
-        bubbles: bool,
-    );
-    fn poll_async(&mut self) -> Pin<Box<dyn Future<Output = ()> + '_>>;
-}
-
-/// Before sending the event to drivers, we need to bubble it up the tree to any widgets that are listening
-fn bubble_event_to_widgets(rdom: &mut RealDom, event: &Event) {
-    let id = event.id;
-    let mut node = Some(id);
-
-    while let Some(node_id) = node {
-        let parent_id = {
-            let tree = rdom.tree_ref();
-            tree.parent_id_advanced(node_id, true)
-        };
-
-        {
-            // println!("@ bubbling event to node {:?}", node_id);
-            let mut node_mut = rdom.get_mut(node_id).unwrap();
-            if let Some(mut widget) = node_mut
-                .get_mut::<RinkWidgetTraitObject>()
-                .map(|w| w.clone())
-            {
-                widget.handle_event(event, node_mut)
-            }
-        }
-
-        if !event.bubbles {
-            // println!("event does not bubble");
-            break;
-        }
-        node = parent_id;
-    }
-}
-
-pub(crate) fn get_abs_layout(node: NodeRef, taffy: &Taffy) -> Layout {
-    let mut node_layout = *taffy
-        .layout(node.get::<TaffyLayout>().unwrap().node.unwrap())
-        .unwrap();
-    let mut current = node;
-
-    let dom = node.real_dom();
-    let tree = dom.tree_ref();
-
-    while let Some(parent) = tree.parent_id_advanced(current.id(), true) {
-        let parent = dom.get(parent).unwrap();
-        current = parent;
-        let parent_layout = taffy
-            .layout(parent.get::<TaffyLayout>().unwrap().node.unwrap())
-            .unwrap();
-        node_layout.location.x += parent_layout.location.x;
-        node_layout.location.y += parent_layout.location.y;
-    }
-    node_layout
-}
diff --git a/packages/plasmo/src/prevent_default.rs b/packages/plasmo/src/prevent_default.rs
deleted file mode 100644
index 4ad5ad87f..000000000
--- a/packages/plasmo/src/prevent_default.rs
+++ /dev/null
@@ -1,86 +0,0 @@
-use dioxus_native_core::prelude::*;
-use dioxus_native_core_macro::partial_derive_state;
-use shipyard::Component;
-
-#[derive(PartialEq, Debug, Clone, Copy, Component, Default)]
-pub(crate) enum PreventDefault {
-    Focus,
-    KeyPress,
-    KeyRelease,
-    KeyDown,
-    KeyUp,
-    MouseDown,
-    Click,
-    MouseEnter,
-    MouseLeave,
-    MouseOut,
-    #[default]
-    Unknown,
-    MouseOver,
-    ContextMenu,
-    Wheel,
-    MouseUp,
-}
-
-#[partial_derive_state]
-impl State for PreventDefault {
-    type ParentDependencies = ();
-    type ChildDependencies = ();
-    type NodeDependencies = ();
-
-    const NODE_MASK: dioxus_native_core::node_ref::NodeMaskBuilder<'static> =
-        dioxus_native_core::node_ref::NodeMaskBuilder::new()
-            .with_attrs(dioxus_native_core::node_ref::AttributeMaskBuilder::Some(&[
-                "dioxus-prevent-default",
-            ]))
-            .with_listeners();
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView,
-        _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        _: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: &SendAnyMap,
-    ) -> bool {
-        let new = match node_view.attributes().and_then(|mut attrs| {
-            attrs
-                .find(|a| a.attribute.name == "dioxus-prevent-default")
-                .and_then(|a| a.value.as_text())
-        }) {
-            Some("onfocus") => PreventDefault::Focus,
-            Some("onkeypress") => PreventDefault::KeyPress,
-            Some("onkeyrelease") => PreventDefault::KeyRelease,
-            Some("onkeydown") => PreventDefault::KeyDown,
-            Some("onkeyup") => PreventDefault::KeyUp,
-            Some("onclick") => PreventDefault::Click,
-            Some("onmousedown") => PreventDefault::MouseDown,
-            Some("onmouseup") => PreventDefault::MouseUp,
-            Some("onmouseenter") => PreventDefault::MouseEnter,
-            Some("onmouseover") => PreventDefault::MouseOver,
-            Some("onmouseleave") => PreventDefault::MouseLeave,
-            Some("onmouseout") => PreventDefault::MouseOut,
-            Some("onwheel") => PreventDefault::Wheel,
-            Some("oncontextmenu") => PreventDefault::ContextMenu,
-            _ => return false,
-        };
-        if new == *self {
-            false
-        } else {
-            *self = new;
-            true
-        }
-    }
-
-    fn create<'a>(
-        node_view: NodeView<()>,
-        node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        context: &SendAnyMap,
-    ) -> Self {
-        let mut myself = Self::default();
-        myself.update(node_view, node, parent, children, context);
-        myself
-    }
-}
diff --git a/packages/plasmo/src/query.rs b/packages/plasmo/src/query.rs
deleted file mode 100644
index 685d454d8..000000000
--- a/packages/plasmo/src/query.rs
+++ /dev/null
@@ -1,109 +0,0 @@
-use std::sync::{Arc, Mutex, MutexGuard, RwLock, RwLockReadGuard};
-
-use dioxus_native_core::prelude::*;
-use shipyard::Unique;
-use taffy::{
-    geometry::Point,
-    prelude::{Layout, Size},
-    Taffy,
-};
-
-use crate::{get_abs_layout, layout_to_screen_space};
-
-/// Allows querying the layout of nodes after rendering. It will only provide a correct value after a node is rendered.
-/// Provided as a root context for all tui applictions.
-/// # Example
-/// ```rust, ignore
-/// use dioxus::prelude::*;
-/// use dioxus_tui::query::Query;
-/// use dioxus_tui::Size;
-///
-/// fn main() {
-///     dioxus_tui::launch(app);
-/// }
-///
-/// fn app() -> Element {
-///     let hue = use_signal(|| 0.0);
-///     let brightness = use_signal(|| 0.0);
-///     let tui_query: Query = cx.consume_context().unwrap();
-///     rsx! {
-///         div{
-///             width: "100%",
-///             background_color: "hsl({hue}, 70%, {brightness}%)",
-///             onmousemove: move |evt| {
-///                 let node = tui_query.get(cx.root_node().mounted_id());
-///                 let Size{width, height} = node.size().unwrap();
-///                 hue.set((evt.data.offset_x as f32/width as f32)*255.0);
-///                 brightness.set((evt.data.offset_y as f32/height as f32)*100.0);
-///             },
-///             "hsl({hue}, 70%, {brightness}%)",
-///         }
-///     })
-/// }
-/// ```
-#[derive(Clone, Unique)]
-pub struct Query {
-    pub(crate) rdom: Arc<RwLock<RealDom>>,
-    pub(crate) stretch: Arc<Mutex<Taffy>>,
-}
-
-impl Query {
-    pub fn new(rdom: Arc<RwLock<RealDom>>, stretch: Arc<Mutex<Taffy>>) -> Self {
-        Self { rdom, stretch }
-    }
-
-    pub fn get(&self, id: NodeId) -> ElementRef {
-        let rdom = self.rdom.read();
-        let stretch = self.stretch.lock();
-        ElementRef::new(
-            rdom.expect("rdom lock poisoned"),
-            stretch.expect("taffy lock poisoned"),
-            id,
-        )
-    }
-}
-
-pub struct ElementRef<'a> {
-    inner: RwLockReadGuard<'a, RealDom>,
-    stretch: MutexGuard<'a, Taffy>,
-    id: NodeId,
-}
-
-impl<'a> ElementRef<'a> {
-    pub(crate) fn new(
-        inner: RwLockReadGuard<'a, RealDom>,
-        stretch: MutexGuard<'a, Taffy>,
-        id: NodeId,
-    ) -> Self {
-        Self { inner, stretch, id }
-    }
-
-    pub fn size(&self) -> Option<Size<u32>> {
-        self.layout().map(|l| l.size.map(|v| v.round() as u32))
-    }
-
-    pub fn pos(&self) -> Option<Point<u32>> {
-        self.layout().map(|l| Point {
-            x: l.location.x.round() as u32,
-            y: l.location.y.round() as u32,
-        })
-    }
-
-    pub fn layout(&self) -> Option<Layout> {
-        get_layout(self.inner.get(self.id).unwrap(), &self.stretch)
-    }
-}
-
-pub(crate) fn get_layout(node: NodeRef, stretch: &Taffy) -> Option<Layout> {
-    let layout = get_abs_layout(node, stretch);
-    let pos = layout.location;
-
-    Some(Layout {
-        order: layout.order,
-        size: layout.size.map(layout_to_screen_space),
-        location: Point {
-            x: layout_to_screen_space(pos.x).round(),
-            y: layout_to_screen_space(pos.y).round(),
-        },
-    })
-}
diff --git a/packages/plasmo/src/render.rs b/packages/plasmo/src/render.rs
deleted file mode 100644
index 68e239331..000000000
--- a/packages/plasmo/src/render.rs
+++ /dev/null
@@ -1,429 +0,0 @@
-use dioxus_native_core::{prelude::*, tree::TreeRef};
-use ratatui::{layout::Rect, style::Color};
-use taffy::{
-    geometry::Point,
-    prelude::{Dimension, Layout, Size},
-    Taffy,
-};
-
-use crate::{
-    focus::Focused,
-    layout::TaffyLayout,
-    layout_to_screen_space,
-    style::{RinkColor, RinkStyle},
-    style_attributes::{BorderEdge, BorderStyle, StyleModifier},
-    widget::{RinkBuffer, RinkCell, RinkWidget, WidgetWithContext},
-    Config,
-};
-
-const RADIUS_MULTIPLIER: [f32; 2] = [1.0, 0.5];
-
-pub(crate) fn render_vnode(
-    frame: &mut ratatui::Frame,
-    layout: &Taffy,
-    node: NodeRef,
-    cfg: Config,
-    parent_location: Point<f32>,
-) {
-    if let NodeType::Placeholder = &*node.node_type() {
-        return;
-    }
-
-    let Layout {
-        mut location, size, ..
-    } = layout
-        .layout(node.get::<TaffyLayout>().unwrap().node.unwrap())
-        .unwrap();
-    location.x += parent_location.x;
-    location.y += parent_location.y;
-
-    let Point { x: fx, y: fy } = location;
-    let x = layout_to_screen_space(fx).round() as u16;
-    let y = layout_to_screen_space(fy).round() as u16;
-    let Size { width, height } = *size;
-    let width = layout_to_screen_space(fx + width).round() as u16 - x;
-    let height = layout_to_screen_space(fy + height).round() as u16 - y;
-
-    match &*node.node_type() {
-        NodeType::Text(text) => {
-            #[derive(Default)]
-            struct Label<'a> {
-                text: &'a str,
-                style: RinkStyle,
-            }
-
-            impl<'a> RinkWidget for Label<'a> {
-                fn render(self, area: Rect, mut buf: RinkBuffer) {
-                    for (i, c) in self.text.char_indices() {
-                        let mut new_cell = RinkCell::default();
-                        new_cell.set_style(self.style);
-                        new_cell.symbol = c.to_string();
-                        buf.set(area.left() + i as u16, area.top(), new_cell);
-                    }
-                }
-            }
-
-            let label = Label {
-                text: &text.text,
-                style: node.get::<StyleModifier>().unwrap().core,
-            };
-            let area = Rect::new(x, y, width, height);
-
-            // the renderer will panic if a node is rendered out of range even if the size is zero
-            if area.width > 0 && area.height > 0 {
-                frame.render_widget(WidgetWithContext::new(label, cfg), area);
-            }
-        }
-        NodeType::Element { .. } => {
-            let area = Rect::new(x, y, width, height);
-
-            // the renderer will panic if a node is rendered out of range even if the size is zero
-            if area.width > 0 && area.height > 0 {
-                frame.render_widget(WidgetWithContext::new(node, cfg), area);
-            }
-
-            let node_id = node.id();
-            let rdom = node.real_dom();
-            for child_id in rdom.tree_ref().children_ids_advanced(node_id, true) {
-                let c = rdom.get(child_id).unwrap();
-                render_vnode(frame, layout, c, cfg, location);
-            }
-        }
-        NodeType::Placeholder => unreachable!(),
-    }
-}
-
-impl RinkWidget for NodeRef<'_> {
-    fn render(self, area: Rect, mut buf: RinkBuffer<'_>) {
-        use ratatui::symbols::line::*;
-
-        enum Direction {
-            Left,
-            Right,
-            Up,
-            Down,
-        }
-
-        fn draw(
-            buf: &mut RinkBuffer,
-            points_history: [[i32; 2]; 3],
-            symbols: &Set,
-            pos: [u16; 2],
-            color: &Option<RinkColor>,
-        ) {
-            let [before, current, after] = points_history;
-            let start_dir = match [before[0] - current[0], before[1] - current[1]] {
-                [1, 0] => Direction::Right,
-                [-1, 0] => Direction::Left,
-                [0, 1] => Direction::Down,
-                [0, -1] => Direction::Up,
-                [a, b] => {
-                    panic!("draw({before:?} {current:?} {after:?}) {a}, {b} no cell adjacent")
-                }
-            };
-            let end_dir = match [after[0] - current[0], after[1] - current[1]] {
-                [1, 0] => Direction::Right,
-                [-1, 0] => Direction::Left,
-                [0, 1] => Direction::Down,
-                [0, -1] => Direction::Up,
-                [a, b] => {
-                    panic!("draw({before:?} {current:?} {after:?}) {a}, {b} no cell adjacent")
-                }
-            };
-
-            let mut new_cell = RinkCell::default();
-            if let Some(c) = color {
-                new_cell.fg = *c;
-            }
-            new_cell.symbol = match [start_dir, end_dir] {
-                [Direction::Down, Direction::Up] => symbols.vertical,
-                [Direction::Down, Direction::Right] => symbols.top_left,
-                [Direction::Down, Direction::Left] => symbols.top_right,
-                [Direction::Up, Direction::Down] => symbols.vertical,
-                [Direction::Up, Direction::Right] => symbols.bottom_left,
-                [Direction::Up, Direction::Left] => symbols.bottom_right,
-                [Direction::Right, Direction::Left] => symbols.horizontal,
-                [Direction::Right, Direction::Up] => symbols.bottom_left,
-                [Direction::Right, Direction::Down] => symbols.top_left,
-                [Direction::Left, Direction::Up] => symbols.bottom_right,
-                [Direction::Left, Direction::Right] => symbols.horizontal,
-                [Direction::Left, Direction::Down] => symbols.top_right,
-                _ => panic!("{before:?} {current:?} {after:?} cannont connect cell to itself"),
-            }
-            .to_string();
-            buf.set(
-                (current[0] + pos[0] as i32) as u16,
-                (current[1] + pos[1] as i32) as u16,
-                new_cell,
-            );
-        }
-
-        fn draw_arc(
-            pos: [u16; 2],
-            starting_angle: f32,
-            arc_angle: f32,
-            radius: f32,
-            symbols: &Set,
-            buf: &mut RinkBuffer,
-            color: &Option<RinkColor>,
-        ) {
-            if radius < 0.0 {
-                return;
-            }
-
-            let num_points = (radius * arc_angle) as i32;
-            let starting_point = [
-                (starting_angle.cos() * (radius * RADIUS_MULTIPLIER[0])) as i32,
-                (starting_angle.sin() * (radius * RADIUS_MULTIPLIER[1])) as i32,
-            ];
-            // keep track of the last 3 point to allow filling diagonals
-            let mut points_history = [
-                [0, 0],
-                {
-                    // change the x or y value based on which one is changing quicker
-                    let ddx = -starting_angle.sin();
-                    let ddy = starting_angle.cos();
-                    if ddx.abs() > ddy.abs() {
-                        [starting_point[0] - ddx.signum() as i32, starting_point[1]]
-                    } else {
-                        [starting_point[0], starting_point[1] - ddy.signum() as i32]
-                    }
-                },
-                starting_point,
-            ];
-
-            for i in 1..=num_points {
-                let angle = (i as f32 / num_points as f32) * arc_angle + starting_angle;
-                let x = angle.cos() * radius * RADIUS_MULTIPLIER[0];
-                let y = angle.sin() * radius * RADIUS_MULTIPLIER[1];
-                let new = [x as i32, y as i32];
-
-                if new != points_history[2] {
-                    points_history = [points_history[1], points_history[2], new];
-
-                    let dx = points_history[2][0] - points_history[1][0];
-                    let dy = points_history[2][1] - points_history[1][1];
-                    // fill diagonals
-                    if dx != 0 && dy != 0 {
-                        let connecting_point = match [dx, dy] {
-                            [1, 1] => [points_history[1][0] + 1, points_history[1][1]],
-                            [1, -1] => [points_history[1][0], points_history[1][1] - 1],
-                            [-1, 1] => [points_history[1][0], points_history[1][1] + 1],
-                            [-1, -1] => [points_history[1][0] - 1, points_history[1][1]],
-                            _ => unreachable!(),
-                        };
-                        draw(
-                            buf,
-                            [points_history[0], points_history[1], connecting_point],
-                            symbols,
-                            pos,
-                            color,
-                        );
-                        points_history = [points_history[1], connecting_point, points_history[2]];
-                    }
-
-                    draw(buf, points_history, symbols, pos, color);
-                }
-            }
-
-            points_history = [points_history[1], points_history[2], {
-                // change the x or y value based on which one is changing quicker
-                let ddx = -(starting_angle + arc_angle).sin();
-                let ddy = (starting_angle + arc_angle).cos();
-                if ddx.abs() > ddy.abs() {
-                    [
-                        points_history[2][0] + ddx.signum() as i32,
-                        points_history[2][1],
-                    ]
-                } else {
-                    [
-                        points_history[2][0],
-                        points_history[2][1] + ddy.signum() as i32,
-                    ]
-                }
-            }];
-
-            draw(buf, points_history, symbols, pos, color);
-        }
-
-        fn get_radius(border: &BorderEdge, area: Rect) -> f32 {
-            match border.style {
-                BorderStyle::Hidden => 0.0,
-                BorderStyle::None => 0.0,
-                _ => match border.radius {
-                    Dimension::Percent(p) => p * area.width as f32 / 100.0,
-                    Dimension::Points(p) => p,
-                    _ => unreachable!(),
-                }
-                .abs()
-                .min((area.width as f32 / RADIUS_MULTIPLIER[0]) / 2.0)
-                .min((area.height as f32 / RADIUS_MULTIPLIER[1]) / 2.0),
-            }
-        }
-
-        if area.area() == 0 {
-            return;
-        }
-
-        // todo: only render inside borders
-        for x in area.left()..area.right() {
-            for y in area.top()..area.bottom() {
-                let mut new_cell = RinkCell::default();
-                if let Some(c) = self.get::<StyleModifier>().unwrap().core.bg {
-                    new_cell.bg = c;
-                }
-                if let Some(focused) = self.get::<Focused>() {
-                    if focused.0 {
-                        new_cell.bg.alpha = 100;
-                        new_cell.bg.color = new_cell.bg.blend(Color::White);
-                    }
-                }
-                buf.set(x, y, new_cell);
-            }
-        }
-
-        let style = self.get::<StyleModifier>().unwrap();
-
-        let borders = &style.modifier.borders;
-
-        let last_edge = &borders.left;
-        let current_edge = &borders.top;
-        if let Some(symbols) = current_edge.style.symbol_set() {
-            // the radius for the curve between this line and the next
-            let r = get_radius(current_edge, area);
-            let radius = [
-                (r * RADIUS_MULTIPLIER[0]) as u16,
-                (r * RADIUS_MULTIPLIER[1]) as u16,
-            ];
-            // the radius for the curve between this line and the last
-            let last_r = get_radius(last_edge, area);
-            let last_radius = [
-                (last_r * RADIUS_MULTIPLIER[0]) as u16,
-                (last_r * RADIUS_MULTIPLIER[1]) as u16,
-            ];
-            let color = current_edge.color.or(style.core.fg);
-            let mut new_cell = RinkCell::default();
-            if let Some(c) = color {
-                new_cell.fg = c;
-            }
-            for x in (area.left() + last_radius[0] + 1)..(area.right() - radius[0]) {
-                new_cell.symbol = symbols.horizontal.to_string();
-                buf.set(x, area.top(), new_cell.clone());
-            }
-            draw_arc(
-                [area.right() - radius[0] - 1, area.top() + radius[1]],
-                std::f32::consts::FRAC_PI_2 * 3.0,
-                std::f32::consts::FRAC_PI_2,
-                r,
-                &symbols,
-                &mut buf,
-                &color,
-            );
-        }
-
-        let last_edge = &borders.top;
-        let current_edge = &borders.right;
-        if let Some(symbols) = current_edge.style.symbol_set() {
-            // the radius for the curve between this line and the next
-            let r = get_radius(current_edge, area);
-            let radius = [
-                (r * RADIUS_MULTIPLIER[0]) as u16,
-                (r * RADIUS_MULTIPLIER[1]) as u16,
-            ];
-            // the radius for the curve between this line and the last
-            let last_r = get_radius(last_edge, area);
-            let last_radius = [
-                (last_r * RADIUS_MULTIPLIER[0]) as u16,
-                (last_r * RADIUS_MULTIPLIER[1]) as u16,
-            ];
-            let color = current_edge.color.or(style.core.fg);
-            let mut new_cell = RinkCell::default();
-            if let Some(c) = color {
-                new_cell.fg = c;
-            }
-            for y in (area.top() + last_radius[1] + 1)..(area.bottom() - radius[1]) {
-                new_cell.symbol = symbols.vertical.to_string();
-                buf.set(area.right() - 1, y, new_cell.clone());
-            }
-            draw_arc(
-                [area.right() - radius[0] - 1, area.bottom() - radius[1] - 1],
-                0.0,
-                std::f32::consts::FRAC_PI_2,
-                r,
-                &symbols,
-                &mut buf,
-                &color,
-            );
-        }
-
-        let last_edge = &borders.right;
-        let current_edge = &borders.bottom;
-        if let Some(symbols) = current_edge.style.symbol_set() {
-            // the radius for the curve between this line and the next
-            let r = get_radius(current_edge, area);
-            let radius = [
-                (r * RADIUS_MULTIPLIER[0]) as u16,
-                (r * RADIUS_MULTIPLIER[1]) as u16,
-            ];
-            // the radius for the curve between this line and the last
-            let last_r = get_radius(last_edge, area);
-            let last_radius = [
-                (last_r * RADIUS_MULTIPLIER[0]) as u16,
-                (last_r * RADIUS_MULTIPLIER[1]) as u16,
-            ];
-            let color = current_edge.color.or(style.core.fg);
-            let mut new_cell = RinkCell::default();
-            if let Some(c) = color {
-                new_cell.fg = c;
-            }
-            for x in (area.left() + radius[0])..(area.right() - last_radius[0] - 1) {
-                new_cell.symbol = symbols.horizontal.to_string();
-                buf.set(x, area.bottom() - 1, new_cell.clone());
-            }
-            draw_arc(
-                [area.left() + radius[0], area.bottom() - radius[1] - 1],
-                std::f32::consts::FRAC_PI_2,
-                std::f32::consts::FRAC_PI_2,
-                r,
-                &symbols,
-                &mut buf,
-                &color,
-            );
-        }
-
-        let last_edge = &borders.bottom;
-        let current_edge = &borders.left;
-        if let Some(symbols) = current_edge.style.symbol_set() {
-            // the radius for the curve between this line and the next
-            let r = get_radius(current_edge, area);
-            let radius = [
-                (r * RADIUS_MULTIPLIER[0]) as u16,
-                (r * RADIUS_MULTIPLIER[1]) as u16,
-            ];
-            // the radius for the curve between this line and the last
-            let last_r = get_radius(last_edge, area);
-            let last_radius = [
-                (last_r * RADIUS_MULTIPLIER[0]) as u16,
-                (last_r * RADIUS_MULTIPLIER[1]) as u16,
-            ];
-            let color = current_edge.color.or(style.core.fg);
-            let mut new_cell = RinkCell::default();
-            if let Some(c) = color {
-                new_cell.fg = c;
-            }
-            for y in (area.top() + radius[1])..(area.bottom() - last_radius[1] - 1) {
-                new_cell.symbol = symbols.vertical.to_string();
-                buf.set(area.left(), y, new_cell.clone());
-            }
-            draw_arc(
-                [area.left() + radius[0], area.top() + radius[1]],
-                std::f32::consts::PI,
-                std::f32::consts::FRAC_PI_2,
-                r,
-                &symbols,
-                &mut buf,
-                &color,
-            );
-        }
-    }
-}
diff --git a/packages/plasmo/src/style.rs b/packages/plasmo/src/style.rs
deleted file mode 100644
index affcd4324..000000000
--- a/packages/plasmo/src/style.rs
+++ /dev/null
@@ -1,452 +0,0 @@
-use std::{num::ParseFloatError, str::FromStr};
-
-use ratatui::style::{Color, Modifier, Style};
-
-use crate::RenderingMode;
-
-#[derive(Clone, Copy, Debug, PartialEq)]
-pub struct RinkColor {
-    pub color: Color,
-    pub alpha: u8,
-}
-
-impl Default for RinkColor {
-    fn default() -> Self {
-        Self {
-            color: Color::Black,
-            alpha: 0,
-        }
-    }
-}
-
-impl RinkColor {
-    pub fn blend(self, other: Color) -> Color {
-        if self.color == Color::Reset {
-            Color::Reset
-        } else if self.alpha == 0 {
-            other
-        } else {
-            let [sr, sg, sb] = to_rgb(self.color).map(|e| e as u16);
-            let [or, og, ob] = to_rgb(other).map(|e| e as u16);
-            let sa = self.alpha as u16;
-            let rsa = 255 - sa;
-            Color::Rgb(
-                ((sr * sa + or * rsa) / 255) as u8,
-                ((sg * sa + og * rsa) / 255) as u8,
-                ((sb * sa + ob * rsa) / 255) as u8,
-            )
-        }
-    }
-}
-
-fn parse_value(
-    v: &str,
-    current_max_output: f32,
-    required_max_output: f32,
-) -> Result<f32, ParseFloatError> {
-    if let Some(stripped) = v.strip_suffix('%') {
-        Ok((stripped.trim().parse::<f32>()? / 100.0) * required_max_output)
-    } else {
-        Ok((v.trim().parse::<f32>()? / current_max_output) * required_max_output)
-    }
-}
-
-pub struct ParseColorError;
-
-fn parse_hex(color: &str) -> Result<Color, ParseColorError> {
-    let mut values = [0, 0, 0];
-    let mut color_ok = true;
-    for i in 0..values.len() {
-        if let Ok(v) = u8::from_str_radix(&color[(1 + 2 * i)..(1 + 2 * (i + 1))], 16) {
-            values[i] = v;
-        } else {
-            color_ok = false;
-        }
-    }
-    if color_ok {
-        Ok(Color::Rgb(values[0], values[1], values[2]))
-    } else {
-        Err(ParseColorError)
-    }
-}
-
-fn parse_rgb(color: &str) -> Result<Color, ParseColorError> {
-    let mut values = [0, 0, 0];
-    let mut color_ok = true;
-    for (v, i) in color.split(',').zip(0..values.len()) {
-        if let Ok(v) = parse_value(v.trim(), 255.0, 255.0) {
-            values[i] = v as u8;
-        } else {
-            color_ok = false;
-        }
-    }
-    if color_ok {
-        Ok(Color::Rgb(values[0], values[1], values[2]))
-    } else {
-        Err(ParseColorError)
-    }
-}
-
-fn parse_hsl(color: &str) -> Result<Color, ParseColorError> {
-    let mut values = [0.0, 0.0, 0.0];
-    let mut color_ok = true;
-    for (v, i) in color.split(',').zip(0..values.len()) {
-        if let Ok(v) = parse_value(v.trim(), if i == 0 { 360.0 } else { 100.0 }, 1.0) {
-            values[i] = v;
-        } else {
-            color_ok = false;
-        }
-    }
-    if color_ok {
-        let [h, s, l] = values;
-        let rgb = if s == 0.0 {
-            [l as u8; 3]
-        } else {
-            fn hue_to_rgb(p: f32, q: f32, mut t: f32) -> f32 {
-                if t < 0.0 {
-                    t += 1.0;
-                }
-                if t > 1.0 {
-                    t -= 1.0;
-                }
-                if t < 1.0 / 6.0 {
-                    p + (q - p) * 6.0 * t
-                } else if t < 1.0 / 2.0 {
-                    q
-                } else if t < 2.0 / 3.0 {
-                    p + (q - p) * (2.0 / 3.0 - t) * 6.0
-                } else {
-                    p
-                }
-            }
-
-            let q = if l < 0.5 {
-                l * (1.0 + s)
-            } else {
-                l + s - l * s
-            };
-            let p = 2.0 * l - q;
-            [
-                (hue_to_rgb(p, q, h + 1.0 / 3.0) * 255.0) as u8,
-                (hue_to_rgb(p, q, h) * 255.0) as u8,
-                (hue_to_rgb(p, q, h - 1.0 / 3.0) * 255.0) as u8,
-            ]
-        };
-
-        Ok(Color::Rgb(rgb[0], rgb[1], rgb[2]))
-    } else {
-        Err(ParseColorError)
-    }
-}
-
-impl FromStr for RinkColor {
-    type Err = ParseColorError;
-
-    fn from_str(color: &str) -> Result<Self, Self::Err> {
-        match color {
-            "red" => Ok(RinkColor {
-                color: Color::Red,
-                alpha: 255,
-            }),
-            "black" => Ok(RinkColor {
-                color: Color::Black,
-                alpha: 255,
-            }),
-            "green" => Ok(RinkColor {
-                color: Color::Green,
-                alpha: 255,
-            }),
-            "yellow" => Ok(RinkColor {
-                color: Color::Yellow,
-                alpha: 255,
-            }),
-            "blue" => Ok(RinkColor {
-                color: Color::Blue,
-                alpha: 255,
-            }),
-            "magenta" => Ok(RinkColor {
-                color: Color::Magenta,
-                alpha: 255,
-            }),
-            "cyan" => Ok(RinkColor {
-                color: Color::Cyan,
-                alpha: 255,
-            }),
-            "gray" => Ok(RinkColor {
-                color: Color::Gray,
-                alpha: 255,
-            }),
-            "darkgray" => Ok(RinkColor {
-                color: Color::DarkGray,
-                alpha: 255,
-            }),
-            // light red does not exist
-            "orangered" => Ok(RinkColor {
-                color: Color::LightRed,
-                alpha: 255,
-            }),
-            "lightgreen" => Ok(RinkColor {
-                color: Color::LightGreen,
-                alpha: 255,
-            }),
-            "lightyellow" => Ok(RinkColor {
-                color: Color::LightYellow,
-                alpha: 255,
-            }),
-            "lightblue" => Ok(RinkColor {
-                color: Color::LightBlue,
-                alpha: 255,
-            }),
-            // light magenta does not exist
-            "orchid" => Ok(RinkColor {
-                color: Color::LightMagenta,
-                alpha: 255,
-            }),
-            "lightcyan" => Ok(RinkColor {
-                color: Color::LightCyan,
-                alpha: 255,
-            }),
-            "white" => Ok(RinkColor {
-                color: Color::White,
-                alpha: 255,
-            }),
-            _ => {
-                if color.len() == 7 && color.starts_with('#') {
-                    parse_hex(color).map(|c| RinkColor {
-                        color: c,
-                        alpha: 255,
-                    })
-                } else if let Some(stripped) = color.strip_prefix("rgb(") {
-                    let color_values = stripped.trim_end_matches(')');
-                    if color.matches(',').count() == 3 {
-                        let (alpha, rgb_values) =
-                            color_values.rsplit_once(',').ok_or(ParseColorError)?;
-                        if let Ok(a) = alpha.parse() {
-                            parse_rgb(rgb_values).map(|c| RinkColor { color: c, alpha: a })
-                        } else {
-                            Err(ParseColorError)
-                        }
-                    } else {
-                        parse_rgb(color_values).map(|c| RinkColor {
-                            color: c,
-                            alpha: 255,
-                        })
-                    }
-                } else if let Some(stripped) = color.strip_prefix("rgba(") {
-                    let color_values = stripped.trim_end_matches(')');
-                    if color.matches(',').count() == 3 {
-                        let (rgb_values, alpha) =
-                            color_values.rsplit_once(',').ok_or(ParseColorError)?;
-                        if let Ok(a) = parse_value(alpha, 1.0, 1.0) {
-                            parse_rgb(rgb_values).map(|c| RinkColor {
-                                color: c,
-                                alpha: (a * 255.0) as u8,
-                            })
-                        } else {
-                            Err(ParseColorError)
-                        }
-                    } else {
-                        parse_rgb(color_values).map(|c| RinkColor {
-                            color: c,
-                            alpha: 255,
-                        })
-                    }
-                } else if let Some(stripped) = color.strip_prefix("hsl(") {
-                    let color_values = stripped.trim_end_matches(')');
-                    if color.matches(',').count() == 3 {
-                        let (rgb_values, alpha) =
-                            color_values.rsplit_once(',').ok_or(ParseColorError)?;
-                        if let Ok(a) = parse_value(alpha, 1.0, 1.0) {
-                            parse_hsl(rgb_values).map(|c| RinkColor {
-                                color: c,
-                                alpha: (a * 255.0) as u8,
-                            })
-                        } else {
-                            Err(ParseColorError)
-                        }
-                    } else {
-                        parse_hsl(color_values).map(|c| RinkColor {
-                            color: c,
-                            alpha: 255,
-                        })
-                    }
-                } else if let Some(stripped) = color.strip_prefix("hsla(") {
-                    let color_values = stripped.trim_end_matches(')');
-                    if color.matches(',').count() == 3 {
-                        let (rgb_values, alpha) =
-                            color_values.rsplit_once(',').ok_or(ParseColorError)?;
-                        if let Ok(a) = parse_value(alpha, 1.0, 1.0) {
-                            parse_hsl(rgb_values).map(|c| RinkColor {
-                                color: c,
-                                alpha: (a * 255.0) as u8,
-                            })
-                        } else {
-                            Err(ParseColorError)
-                        }
-                    } else {
-                        parse_hsl(color_values).map(|c| RinkColor {
-                            color: c,
-                            alpha: 255,
-                        })
-                    }
-                } else {
-                    Err(ParseColorError)
-                }
-            }
-        }
-    }
-}
-
-fn to_rgb(c: Color) -> [u8; 3] {
-    match c {
-        Color::Black => [0, 0, 0],
-        Color::Red => [255, 0, 0],
-        Color::Green => [0, 128, 0],
-        Color::Yellow => [255, 255, 0],
-        Color::Blue => [0, 0, 255],
-        Color::Magenta => [255, 0, 255],
-        Color::Cyan => [0, 255, 255],
-        Color::Gray => [128, 128, 128],
-        Color::DarkGray => [169, 169, 169],
-        Color::LightRed => [255, 69, 0],
-        Color::LightGreen => [144, 238, 144],
-        Color::LightYellow => [255, 255, 224],
-        Color::LightBlue => [173, 216, 230],
-        Color::LightMagenta => [218, 112, 214],
-        Color::LightCyan => [224, 255, 255],
-        Color::White => [255, 255, 255],
-        Color::Rgb(r, g, b) => [r, g, b],
-        Color::Indexed(idx) => match idx {
-            16..=231 => {
-                let v = idx - 16;
-                // add 3 to round up
-                let r = ((v as u16 / 36) * 255 + 3) / 5;
-                let g = (((v as u16 % 36) / 6) * 255 + 3) / 5;
-                let b = ((v as u16 % 6) * 255 + 3) / 5;
-                [r as u8, g as u8, b as u8]
-            }
-            232..=255 => {
-                let l = (idx - 232) / 24;
-                [l; 3]
-            }
-            // plasmo will never generate these colors, but they might be on the screen from another program
-            _ => [0, 0, 0],
-        },
-        Color::Reset => [0, 0, 0],
-    }
-}
-
-pub fn convert(mode: RenderingMode, c: Color) -> Color {
-    if let Color::Reset = c {
-        c
-    } else {
-        match mode {
-            crate::RenderingMode::BaseColors => match c {
-                Color::Rgb(_, _, _) => panic!("cannot convert rgb color to base color"),
-                Color::Indexed(_) => panic!("cannot convert Ansi color to base color"),
-                _ => c,
-            },
-            crate::RenderingMode::Rgb => {
-                let rgb = to_rgb(c);
-                Color::Rgb(rgb[0], rgb[1], rgb[2])
-            }
-            crate::RenderingMode::Ansi => match c {
-                Color::Indexed(_) => c,
-                _ => {
-                    let rgb = to_rgb(c);
-                    // 16-231: 6 × 6 × 6 color cube
-                    // 232-255: 23 step grayscale
-                    if rgb[0] == rgb[1] && rgb[1] == rgb[2] {
-                        let idx = 232 + (rgb[0] as u16 * 23 / 255) as u8;
-                        Color::Indexed(idx)
-                    } else {
-                        let r = (rgb[0] as u16 * 5) / 255;
-                        let g = (rgb[1] as u16 * 5) / 255;
-                        let b = (rgb[2] as u16 * 5) / 255;
-                        let idx = 16 + r * 36 + g * 6 + b;
-                        Color::Indexed(idx as u8)
-                    }
-                }
-            },
-        }
-    }
-}
-
-#[test]
-fn rgb_to_ansi() {
-    for idx in 17..=231 {
-        let idxed = Color::Indexed(idx);
-        let rgb = to_rgb(idxed);
-        // gray scale colors have two equivelent repersentations
-        let color = Color::Rgb(rgb[0], rgb[1], rgb[2]);
-        let converted = convert(RenderingMode::Ansi, color);
-        if let Color::Indexed(i) = converted {
-            if rgb[0] != rgb[1] || rgb[1] != rgb[2] {
-                assert_eq!(idxed, converted);
-            } else {
-                assert!(i >= 232);
-            }
-        } else {
-            panic!("color is not indexed")
-        }
-    }
-    for idx in 232..=255 {
-        let idxed = Color::Indexed(idx);
-        let rgb = to_rgb(idxed);
-        assert!(rgb[0] == rgb[1] && rgb[1] == rgb[2]);
-    }
-}
-
-#[derive(Clone, Copy, PartialEq, Debug)]
-pub struct RinkStyle {
-    pub fg: Option<RinkColor>,
-    pub bg: Option<RinkColor>,
-    pub add_modifier: Modifier,
-    pub sub_modifier: Modifier,
-}
-
-impl Default for RinkStyle {
-    fn default() -> Self {
-        Self {
-            fg: Some(RinkColor {
-                color: Color::White,
-                alpha: 255,
-            }),
-            bg: None,
-            add_modifier: Modifier::empty(),
-            sub_modifier: Modifier::empty(),
-        }
-    }
-}
-
-impl RinkStyle {
-    pub fn add_modifier(mut self, m: Modifier) -> Self {
-        self.sub_modifier.remove(m);
-        self.add_modifier.insert(m);
-        self
-    }
-
-    pub fn remove_modifier(mut self, m: Modifier) -> Self {
-        self.add_modifier.remove(m);
-        self.sub_modifier.insert(m);
-        self
-    }
-
-    pub fn merge(mut self, other: RinkStyle) -> Self {
-        self.fg = self.fg.or(other.fg);
-        self.add_modifier(other.add_modifier)
-            .remove_modifier(other.sub_modifier)
-    }
-}
-
-impl From<RinkStyle> for Style {
-    fn from(val: RinkStyle) -> Self {
-        Style {
-            underline_color: None,
-            fg: val.fg.map(|c| c.color),
-            bg: val.bg.map(|c| c.color),
-            add_modifier: val.add_modifier,
-            sub_modifier: val.sub_modifier,
-        }
-    }
-}
diff --git a/packages/plasmo/src/style_attributes.rs b/packages/plasmo/src/style_attributes.rs
deleted file mode 100644
index d75de29d3..000000000
--- a/packages/plasmo/src/style_attributes.rs
+++ /dev/null
@@ -1,827 +0,0 @@
-/*
-- [ ] pub display: Display,
-- [x] pub position_type: PositionType,  --> kinda, taffy doesnt support everything
-- [ ] pub direction: Direction,
-
-- [x] pub flex_direction: FlexDirection,
-- [x] pub flex_wrap: FlexWrap,
-- [x] pub flex_grow: f32,
-- [x] pub flex_shrink: f32,
-- [x] pub flex_basis: Dimension,
-
-- [x] pub overflow: Overflow, ---> kinda implemented... taffy doesnt have support for directional overflow
-
-- [x] pub align_items: AlignItems,
-- [x] pub align_self: AlignSelf,
-- [x] pub align_content: AlignContent,
-
-- [x] pub margin: Rect<Dimension>,
-- [x] pub padding: Rect<Dimension>,
-
-- [x] pub justify_content: JustifyContent,
-- [ ] pub position: Rect<Dimension>,
-- [x] pub border: Rect<Dimension>,
-
-- [ ] pub size: Size<Dimension>, ----> ??? seems to only be relevant for input?
-- [ ] pub min_size: Size<Dimension>,
-- [ ] pub max_size: Size<Dimension>,
-
-- [ ] pub aspect_ratio: Number,
-*/
-
-use dioxus_native_core::{
-    layout_attributes::parse_value,
-    node::OwnedAttributeView,
-    node_ref::{AttributeMaskBuilder, NodeMaskBuilder, NodeView},
-    prelude::*,
-};
-use dioxus_native_core_macro::partial_derive_state;
-use shipyard::Component;
-use taffy::prelude::*;
-
-use crate::style::{RinkColor, RinkStyle};
-
-#[derive(Default, Clone, PartialEq, Debug, Component)]
-pub struct StyleModifier {
-    pub core: RinkStyle,
-    pub modifier: TuiModifier,
-}
-
-#[partial_derive_state]
-impl State for StyleModifier {
-    type ParentDependencies = (Self,);
-    type ChildDependencies = ();
-    type NodeDependencies = ();
-
-    // todo: seperate each attribute into it's own class
-    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
-        .with_attrs(AttributeMaskBuilder::Some(SORTED_STYLE_ATTRS))
-        .with_element();
-
-    fn update<'a>(
-        &mut self,
-        node_view: NodeView,
-        _: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _: &SendAnyMap,
-    ) -> bool {
-        let mut new = StyleModifier::default();
-        if parent.is_some() {
-            new.core.fg = None;
-        }
-
-        // handle text modifier elements
-        if node_view.namespace().is_none() {
-            if let Some(tag) = node_view.tag() {
-                match tag {
-                    "b" => apply_style_attributes("font-weight", "bold", &mut new),
-                    "strong" => apply_style_attributes("font-weight", "bold", &mut new),
-                    "u" => apply_style_attributes("text-decoration", "underline", &mut new),
-                    "ins" => apply_style_attributes("text-decoration", "underline", &mut new),
-                    "del" => apply_style_attributes("text-decoration", "line-through", &mut new),
-                    "i" => apply_style_attributes("font-style", "italic", &mut new),
-                    "em" => apply_style_attributes("font-style", "italic", &mut new),
-                    "mark" => {
-                        apply_style_attributes("background-color", "rgba(241, 231, 64, 50%)", self)
-                    }
-                    _ => (),
-                }
-            }
-        }
-
-        // gather up all the styles from the attribute list
-        if let Some(attrs) = node_view.attributes() {
-            for OwnedAttributeView {
-                attribute, value, ..
-            } in attrs
-            {
-                if let Some(text) = value.as_text() {
-                    apply_style_attributes(&attribute.name, text, &mut new);
-                }
-            }
-        }
-
-        // keep the text styling from the parent element
-        if let Some((parent,)) = parent {
-            let mut new_style = new.core.merge(parent.core);
-            new_style.bg = new.core.bg;
-            new.core = new_style;
-        }
-        if &mut new != self {
-            *self = new;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn create<'a>(
-        node_view: NodeView<()>,
-        node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
-        children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        context: &SendAnyMap,
-    ) -> Self {
-        let mut myself = Self::default();
-        myself.update(node_view, node, parent, children, context);
-        myself
-    }
-}
-
-#[derive(Default, Clone, PartialEq, Debug)]
-pub struct TuiModifier {
-    pub borders: Borders,
-}
-
-#[derive(Default, Clone, PartialEq, Debug)]
-pub struct Borders {
-    pub top: BorderEdge,
-    pub right: BorderEdge,
-    pub bottom: BorderEdge,
-    pub left: BorderEdge,
-}
-
-impl Borders {
-    fn slice(&mut self) -> [&mut BorderEdge; 4] {
-        [
-            &mut self.top,
-            &mut self.right,
-            &mut self.bottom,
-            &mut self.left,
-        ]
-    }
-}
-
-#[derive(Clone, PartialEq, Debug)]
-pub struct BorderEdge {
-    pub color: Option<RinkColor>,
-    pub style: BorderStyle,
-    pub width: Dimension,
-    pub radius: Dimension,
-}
-
-impl Default for BorderEdge {
-    fn default() -> Self {
-        Self {
-            color: None,
-            style: BorderStyle::None,
-            width: Dimension::Points(0.0),
-            radius: Dimension::Points(0.0),
-        }
-    }
-}
-
-#[derive(Clone, Copy, PartialEq, Eq, Debug)]
-pub enum BorderStyle {
-    Dotted,
-    Dashed,
-    Solid,
-    Double,
-    Groove,
-    Ridge,
-    Inset,
-    Outset,
-    Hidden,
-    None,
-}
-
-impl BorderStyle {
-    pub fn symbol_set(&self) -> Option<ratatui::symbols::line::Set> {
-        use ratatui::symbols::line::*;
-        const DASHED: Set = Set {
-            horizontal: "╌",
-            vertical: "╎",
-            ..NORMAL
-        };
-        const DOTTED: Set = Set {
-            horizontal: "┈",
-            vertical: "┊",
-            ..NORMAL
-        };
-        match self {
-            BorderStyle::Dotted => Some(DOTTED),
-            BorderStyle::Dashed => Some(DASHED),
-            BorderStyle::Solid => Some(NORMAL),
-            BorderStyle::Double => Some(DOUBLE),
-            BorderStyle::Groove => Some(NORMAL),
-            BorderStyle::Ridge => Some(NORMAL),
-            BorderStyle::Inset => Some(NORMAL),
-            BorderStyle::Outset => Some(NORMAL),
-            BorderStyle::Hidden => None,
-            BorderStyle::None => None,
-        }
-    }
-}
-
-/// applies the entire html namespace defined in dioxus-html
-pub fn apply_style_attributes(
-    //
-    name: &str,
-    value: &str,
-    style: &mut StyleModifier,
-) {
-    match name {
-        "animation"
-        | "animation-delay"
-        | "animation-direction"
-        | "animation-duration"
-        | "animation-fill-mode"
-        | "animation-iteration-count"
-        | "animation-name"
-        | "animation-play-state"
-        | "animation-timing-function" => apply_animation(name, value, style),
-
-        "backface-visibility" => {}
-
-        "background"
-        | "background-attachment"
-        | "background-clip"
-        | "background-color"
-        | "background-image"
-        | "background-origin"
-        | "background-position"
-        | "background-repeat"
-        | "background-size" => apply_background(name, value, style),
-
-        "border"
-        | "border-bottom"
-        | "border-bottom-color"
-        | "border-bottom-left-radius"
-        | "border-bottom-right-radius"
-        | "border-bottom-style"
-        | "border-bottom-width"
-        | "border-collapse"
-        | "border-color"
-        | "border-image"
-        | "border-image-outset"
-        | "border-image-repeat"
-        | "border-image-slice"
-        | "border-image-source"
-        | "border-image-width"
-        | "border-left"
-        | "border-left-color"
-        | "border-left-style"
-        | "border-left-width"
-        | "border-radius"
-        | "border-right"
-        | "border-right-color"
-        | "border-right-style"
-        | "border-right-width"
-        | "border-spacing"
-        | "border-style"
-        | "border-top"
-        | "border-top-color"
-        | "border-top-left-radius"
-        | "border-top-right-radius"
-        | "border-top-style"
-        | "border-top-width"
-        | "border-width" => apply_border(name, value, style),
-
-        "bottom" => {}
-        "box-shadow" => {}
-        "box-sizing" => {}
-        "caption-side" => {}
-        "clear" => {}
-        "clip" => {}
-
-        "color" => {
-            if let Ok(c) = value.parse() {
-                style.core.fg.replace(c);
-            }
-        }
-
-        "columns" => {}
-
-        "content" => {}
-        "counter-increment" => {}
-        "counter-reset" => {}
-
-        "cursor" => {}
-
-        "empty-cells" => {}
-
-        "float" => {}
-
-        "font" | "font-family" | "font-size" | "font-size-adjust" | "font-stretch"
-        | "font-style" | "font-variant" | "font-weight" => apply_font(name, value, style),
-
-        "letter-spacing" => {}
-        "line-height" => {}
-
-        "list-style" | "list-style-image" | "list-style-position" | "list-style-type" => {}
-
-        "opacity" => {}
-        "order" => {}
-        "outline" => {}
-
-        "outline-color" | "outline-offset" | "outline-style" | "outline-width" => {}
-
-        "page-break-after" | "page-break-before" | "page-break-inside" => {}
-
-        "perspective" | "perspective-origin" => {}
-
-        "pointer-events" => {}
-
-        "quotes" => {}
-        "resize" => {}
-        "tab-size" => {}
-        "table-layout" => {}
-
-        "text-align"
-        | "text-align-last"
-        | "text-decoration"
-        | "text-decoration-color"
-        | "text-decoration-line"
-        | "text-decoration-style"
-        | "text-indent"
-        | "text-justify"
-        | "text-overflow"
-        | "text-shadow"
-        | "text-transform" => apply_text(name, value, style),
-
-        "transition"
-        | "transition-delay"
-        | "transition-duration"
-        | "transition-property"
-        | "transition-timing-function" => apply_transition(name, value, style),
-
-        "visibility" => {}
-        "white-space" => {}
-        _ => {}
-    }
-}
-
-fn apply_background(name: &str, value: &str, style: &mut StyleModifier) {
-    match name {
-        "background-color" => {
-            if let Ok(c) = value.parse() {
-                style.core.bg.replace(c);
-            }
-        }
-        "background" => {}
-        "background-attachment" => {}
-        "background-clip" => {}
-        "background-image" => {}
-        "background-origin" => {}
-        "background-position" => {}
-        "background-repeat" => {}
-        "background-size" => {}
-        _ => {}
-    }
-}
-
-fn apply_border(name: &str, value: &str, style: &mut StyleModifier) {
-    fn parse_border_style(v: &str) -> BorderStyle {
-        match v {
-            "dotted" => BorderStyle::Dotted,
-            "dashed" => BorderStyle::Dashed,
-            "solid" => BorderStyle::Solid,
-            "double" => BorderStyle::Double,
-            "groove" => BorderStyle::Groove,
-            "ridge" => BorderStyle::Ridge,
-            "inset" => BorderStyle::Inset,
-            "outset" => BorderStyle::Outset,
-            "none" => BorderStyle::None,
-            "hidden" => BorderStyle::Hidden,
-            _ => todo!("Implement other border styles"),
-        }
-    }
-    match name {
-        "border" => {}
-        "border-bottom" => {}
-        "border-bottom-color" => {
-            if let Ok(c) = value.parse() {
-                style.modifier.borders.bottom.color = Some(c);
-            }
-        }
-        "border-bottom-left-radius" => {
-            if let Some(v) = parse_value(value) {
-                style.modifier.borders.left.radius = v;
-            }
-        }
-        "border-bottom-right-radius" => {
-            if let Some(v) = parse_value(value) {
-                style.modifier.borders.right.radius = v;
-            }
-        }
-        "border-bottom-style" => style.modifier.borders.bottom.style = parse_border_style(value),
-        "border-bottom-width" => {
-            if let Some(v) = parse_value(value) {
-                style.modifier.borders.bottom.width = v;
-            }
-        }
-        "border-collapse" => {}
-        "border-color" => {
-            let values: Vec<_> = value.split(' ').collect();
-            if values.len() == 1 {
-                if let Ok(c) = values[0].parse() {
-                    style
-                        .modifier
-                        .borders
-                        .slice()
-                        .iter_mut()
-                        .for_each(|b| b.color = Some(c));
-                }
-            } else {
-                for (v, b) in values
-                    .into_iter()
-                    .zip(style.modifier.borders.slice().iter_mut())
-                {
-                    if let Ok(c) = v.parse() {
-                        b.color = Some(c);
-                    }
-                }
-            }
-        }
-        "border-image" => {}
-        "border-image-outset" => {}
-        "border-image-repeat" => {}
-        "border-image-slice" => {}
-        "border-image-source" => {}
-        "border-image-width" => {}
-        "border-left" => {}
-        "border-left-color" => {
-            if let Ok(c) = value.parse() {
-                style.modifier.borders.left.color = Some(c);
-            }
-        }
-        "border-left-style" => style.modifier.borders.left.style = parse_border_style(value),
-        "border-left-width" => {
-            if let Some(v) = parse_value(value) {
-                style.modifier.borders.left.width = v;
-            }
-        }
-        "border-radius" => {
-            let values: Vec<_> = value.split(' ').collect();
-            if values.len() == 1 {
-                if let Some(r) = parse_value(values[0]) {
-                    style
-                        .modifier
-                        .borders
-                        .slice()
-                        .iter_mut()
-                        .for_each(|b| b.radius = r);
-                }
-            } else {
-                for (v, b) in values
-                    .into_iter()
-                    .zip(style.modifier.borders.slice().iter_mut())
-                {
-                    if let Some(r) = parse_value(v) {
-                        b.radius = r;
-                    }
-                }
-            }
-        }
-        "border-right" => {}
-        "border-right-color" => {
-            if let Ok(c) = value.parse() {
-                style.modifier.borders.right.color = Some(c);
-            }
-        }
-        "border-right-style" => style.modifier.borders.right.style = parse_border_style(value),
-        "border-right-width" => {
-            if let Some(v) = parse_value(value) {
-                style.modifier.borders.right.width = v;
-            }
-        }
-        "border-spacing" => {}
-        "border-style" => {
-            let values: Vec<_> = value.split(' ').collect();
-            if values.len() == 1 {
-                let border_style = parse_border_style(values[0]);
-                style
-                    .modifier
-                    .borders
-                    .slice()
-                    .iter_mut()
-                    .for_each(|b| b.style = border_style);
-            } else {
-                for (v, b) in values
-                    .into_iter()
-                    .zip(style.modifier.borders.slice().iter_mut())
-                {
-                    b.style = parse_border_style(v);
-                }
-            }
-        }
-        "border-top" => {}
-        "border-top-color" => {
-            if let Ok(c) = value.parse() {
-                style.modifier.borders.top.color = Some(c);
-            }
-        }
-        "border-top-left-radius" => {
-            if let Some(v) = parse_value(value) {
-                style.modifier.borders.left.radius = v;
-            }
-        }
-        "border-top-right-radius" => {
-            if let Some(v) = parse_value(value) {
-                style.modifier.borders.right.radius = v;
-            }
-        }
-        "border-top-style" => style.modifier.borders.top.style = parse_border_style(value),
-        "border-top-width" => {
-            if let Some(v) = parse_value(value) {
-                style.modifier.borders.top.width = v;
-            }
-        }
-        "border-width" => {
-            let values: Vec<_> = value.split(' ').collect();
-            if values.len() == 1 {
-                if let Some(w) = parse_value(values[0]) {
-                    style
-                        .modifier
-                        .borders
-                        .slice()
-                        .iter_mut()
-                        .for_each(|b| b.width = w);
-                }
-            } else {
-                for (v, width) in values
-                    .into_iter()
-                    .zip(style.modifier.borders.slice().iter_mut())
-                {
-                    if let Some(w) = parse_value(v) {
-                        width.width = w;
-                    }
-                }
-            }
-        }
-        _ => (),
-    }
-}
-
-fn apply_animation(name: &str, _value: &str, _style: &mut StyleModifier) {
-    match name {
-        "animation" => {}
-        "animation-delay" => {}
-        "animation-direction =>{}" => {}
-        "animation-duration" => {}
-        "animation-fill-mode" => {}
-        "animation-itera =>{}tion-count" => {}
-        "animation-name" => {}
-        "animation-play-state" => {}
-        "animation-timing-function" => {}
-        _ => {}
-    }
-}
-
-fn apply_font(name: &str, value: &str, style: &mut StyleModifier) {
-    use ratatui::style::Modifier;
-    match name {
-        "font" => (),
-        "font-family" => (),
-        "font-size" => (),
-        "font-size-adjust" => (),
-        "font-stretch" => (),
-        "font-style" => match value {
-            "italic" => style.core = style.core.add_modifier(Modifier::ITALIC),
-            "oblique" => style.core = style.core.add_modifier(Modifier::ITALIC),
-            _ => (),
-        },
-        "font-variant" => todo!("Implement font-variant"),
-        "font-weight" => match value {
-            "bold" => style.core = style.core.add_modifier(Modifier::BOLD),
-            "normal" => style.core = style.core.remove_modifier(Modifier::BOLD),
-            _ => (),
-        },
-        _ => (),
-    }
-}
-
-fn apply_text(name: &str, value: &str, style: &mut StyleModifier) {
-    use ratatui::style::Modifier;
-
-    match name {
-        "text-align" => todo!("Implement text-align"),
-        "text-align-last" => todo!("text-Implement align-last"),
-        "text-decoration" | "text-decoration-line" => {
-            for v in value.split(' ') {
-                match v {
-                    "line-through" => style.core = style.core.add_modifier(Modifier::CROSSED_OUT),
-                    "underline" => style.core = style.core.add_modifier(Modifier::UNDERLINED),
-                    _ => (),
-                }
-            }
-        }
-        "text-decoration-color" => todo!("text-Implement decoration-color"),
-        "text-decoration-style" => todo!("text-Implement decoration-style"),
-        "text-indent" => todo!("Implement text-indent"),
-        "text-justify" => todo!("Implement text-justify"),
-        "text-overflow" => todo!("Implement text-overflow"),
-        "text-shadow" => todo!("Implement text-shadow"),
-        "text-transform" => todo!("Implement text-transform"),
-        _ => todo!("Implement other text attributes"),
-    }
-}
-
-fn apply_transition(_name: &str, _value: &str, _style: &mut StyleModifier) {
-    todo!("Implement transitions")
-}
-
-const SORTED_STYLE_ATTRS: &[&str] = &[
-    "animation",
-    "animation-delay",
-    "animation-direction",
-    "animation-duration",
-    "animation-fill-mode",
-    "animation-iteration-count",
-    "animation-name",
-    "animation-play-state",
-    "animation-timing-function",
-    "backface-visibility",
-    "background",
-    "background-attachment",
-    "background-clip",
-    "background-color",
-    "background-image",
-    "background-origin",
-    "background-position",
-    "background-repeat",
-    "background-size",
-    "border",
-    "border-bottom",
-    "border-bottom-color",
-    "border-bottom-left-radius",
-    "border-bottom-right-radius",
-    "border-bottom-style",
-    "border-bottom-width",
-    "border-collapse",
-    "border-color",
-    "border-image",
-    "border-image-outset",
-    "border-image-repeat",
-    "border-image-slice",
-    "border-image-source",
-    "border-image-width",
-    "border-left",
-    "border-left-color",
-    "border-left-style",
-    "border-left-width",
-    "border-radius",
-    "border-right",
-    "border-right-color",
-    "border-right-style",
-    "border-right-width",
-    "border-spacing",
-    "border-style",
-    "border-top",
-    "border-top-color",
-    "border-top-left-radius",
-    "border-top-right-radius",
-    "border-top-style",
-    "border-top-width",
-    "border-width",
-    "bottom",
-    "box-shadow",
-    "box-sizing",
-    "caption-side",
-    "clear",
-    "clip",
-    "color",
-    "columns",
-    "content",
-    "counter-increment",
-    "counter-reset",
-    "cursor",
-    "empty-cells",
-    "float",
-    "font",
-    "font-family",
-    "font-size",
-    "font-size-adjust",
-    "font-stretch",
-    "font-style",
-    "font-variant",
-    "font-weight",
-    "letter-spacing",
-    "line-height",
-    "list-style",
-    "list-style-image",
-    "list-style-position",
-    "list-style-type",
-    "opacity",
-    "order",
-    "outline",
-    "outline-color",
-    "outline-offset",
-    "outline-style",
-    "outline-width",
-    "page-break-after",
-    "page-break-before",
-    "page-break-inside",
-    "perspective",
-    "perspective-origin",
-    "pointer-events",
-    "quotes",
-    "resize",
-    "tab-size",
-    "table-layout",
-    "text-align",
-    "text-align-last",
-    "text-decoration",
-    "text-decoration-color",
-    "text-decoration-line",
-    "text-decoration-style",
-    "text-indent",
-    "text-justify",
-    "text-overflow",
-    "text-shadow",
-    "text-transform",
-    "transition",
-    "transition-delay",
-    "transition-duration",
-    "transition-property",
-    "transition-timing-function",
-    "visibility",
-    "white-space",
-    "background-color",
-    "background",
-    "background-attachment",
-    "background-clip",
-    "background-image",
-    "background-origin",
-    "background-position",
-    "background-repeat",
-    "background-size",
-    "dotted",
-    "dashed",
-    "solid",
-    "double",
-    "groove",
-    "ridge",
-    "inset",
-    "outset",
-    "none",
-    "hidden",
-    "border",
-    "border-bottom",
-    "border-bottom-color",
-    "border-bottom-left-radius",
-    "border-bottom-right-radius",
-    "border-bottom-style",
-    "border-bottom-width",
-    "border-collapse",
-    "border-color",
-    "border-image",
-    "border-image-outset",
-    "border-image-repeat",
-    "border-image-slice",
-    "border-image-source",
-    "border-image-width",
-    "border-left",
-    "border-left-color",
-    "border-left-style",
-    "border-left-width",
-    "border-radius",
-    "border-right",
-    "border-right-color",
-    "border-right-style",
-    "border-right-width",
-    "border-spacing",
-    "border-style",
-    "border-top",
-    "border-top-color",
-    "border-top-left-radius",
-    "border-top-right-radius",
-    "border-top-style",
-    "border-top-width",
-    "border-width",
-    "animation",
-    "animation-delay",
-    "animation-direction",
-    "animation-duration",
-    "animation-fill-mode",
-    "animation-itera ",
-    "animation-name",
-    "animation-play-state",
-    "animation-timing-function",
-    "font",
-    "font-family",
-    "font-size",
-    "font-size-adjust",
-    "font-stretch",
-    "font-style",
-    "italic",
-    "oblique",
-    "font-variant",
-    "font-weight",
-    "bold",
-    "normal",
-    "text-align",
-    "text-align-last",
-    "text-decoration",
-    "text-decoration-line",
-    "line-through",
-    "underline",
-    "text-decoration-color",
-    "text-decoration-style",
-    "text-indent",
-    "text-justify",
-    "text-overflow",
-    "text-shadow",
-    "text-transform",
-];
diff --git a/packages/plasmo/src/widget.rs b/packages/plasmo/src/widget.rs
deleted file mode 100644
index 91af5b4f6..000000000
--- a/packages/plasmo/src/widget.rs
+++ /dev/null
@@ -1,101 +0,0 @@
-use ratatui::{
-    buffer::Buffer,
-    layout::Rect,
-    style::{Color, Modifier},
-    widgets::Widget,
-};
-
-use crate::{
-    style::{convert, RinkColor, RinkStyle},
-    Config,
-};
-
-pub struct RinkBuffer<'a> {
-    buf: &'a mut Buffer,
-    cfg: Config,
-}
-
-impl<'a> RinkBuffer<'a> {
-    fn new(buf: &'a mut Buffer, cfg: Config) -> RinkBuffer<'a> {
-        Self { buf, cfg }
-    }
-
-    pub fn set(&mut self, x: u16, y: u16, new: RinkCell) {
-        let area = self.buf.area();
-        if x < area.x || x >= area.width + area.x || y < area.y || y >= area.height + area.y {
-            // panic!("({x}, {y}) is not in {area:?}");
-            return;
-        }
-        let cell = self.buf.get_mut(x, y);
-        cell.bg = convert(self.cfg.rendering_mode, new.bg.blend(cell.bg));
-        if new.symbol.is_empty() {
-            if !cell.symbol.is_empty() {
-                // allows text to "shine through" transparent backgrounds
-                cell.fg = convert(self.cfg.rendering_mode, new.bg.blend(cell.fg));
-            }
-        } else {
-            cell.modifier = new.modifier;
-            cell.symbol = new.symbol;
-            cell.fg = convert(self.cfg.rendering_mode, new.fg.blend(cell.bg));
-        }
-    }
-}
-
-pub trait RinkWidget {
-    fn render(self, area: Rect, buf: RinkBuffer);
-}
-
-pub struct WidgetWithContext<T: RinkWidget> {
-    widget: T,
-    config: Config,
-}
-
-impl<T: RinkWidget> WidgetWithContext<T> {
-    pub fn new(widget: T, config: Config) -> WidgetWithContext<T> {
-        WidgetWithContext { widget, config }
-    }
-}
-
-impl<T: RinkWidget> Widget for WidgetWithContext<T> {
-    fn render(self, area: Rect, buf: &mut Buffer) {
-        self.widget.render(area, RinkBuffer::new(buf, self.config));
-    }
-}
-
-#[derive(Clone)]
-pub struct RinkCell {
-    pub symbol: String,
-    pub bg: RinkColor,
-    pub fg: RinkColor,
-    pub modifier: Modifier,
-}
-
-impl Default for RinkCell {
-    fn default() -> Self {
-        Self {
-            symbol: "".to_string(),
-            fg: RinkColor {
-                color: Color::Rgb(0, 0, 0),
-                alpha: 0,
-            },
-            bg: RinkColor {
-                color: Color::Rgb(0, 0, 0),
-                alpha: 0,
-            },
-            modifier: Modifier::empty(),
-        }
-    }
-}
-
-impl RinkCell {
-    pub fn set_style(&mut self, style: RinkStyle) {
-        if let Some(c) = style.fg {
-            self.fg = c;
-        }
-        if let Some(c) = style.bg {
-            self.bg = c;
-        }
-        self.modifier = style.add_modifier;
-        self.modifier.remove(style.sub_modifier);
-    }
-}
diff --git a/packages/plasmo/src/widgets/button.rs b/packages/plasmo/src/widgets/button.rs
deleted file mode 100644
index 25f0e07ef..000000000
--- a/packages/plasmo/src/widgets/button.rs
+++ /dev/null
@@ -1,214 +0,0 @@
-use std::collections::HashMap;
-
-use dioxus_html::{input_data::keyboard_types::Key, HasKeyboardData};
-use dioxus_native_core::{
-    custom_element::CustomElement,
-    node::OwnedAttributeDiscription,
-    node_ref::AttributeMask,
-    prelude::NodeType,
-    real_dom::{ElementNodeMut, NodeImmutable, NodeMut, NodeTypeMut, RealDom},
-    NodeId,
-};
-use shipyard::UniqueView;
-
-use crate::hooks::FormData;
-
-use super::{RinkWidget, WidgetContext};
-
-#[derive(Debug, Default)]
-pub(crate) struct Button {
-    text_id: NodeId,
-    value: String,
-}
-
-impl Button {
-    fn width(el: &ElementNodeMut) -> String {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "width".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            value
-        } else {
-            "1px".to_string()
-        }
-    }
-
-    fn height(el: &ElementNodeMut) -> String {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "height".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            value
-        } else {
-            "1px".to_string()
-        }
-    }
-
-    fn update_size_attr(&mut self, el: &mut ElementNodeMut) {
-        let width = Self::width(el);
-        let height = Self::height(el);
-        let single_char = width == "1px" || height == "1px";
-        let border_style = if single_char { "none" } else { "solid" };
-        el.set_attribute(
-            OwnedAttributeDiscription {
-                name: "border-style".to_string(),
-                namespace: Some("style".to_string()),
-            },
-            border_style.to_string(),
-        );
-    }
-
-    fn update_value_attr(&mut self, el: &ElementNodeMut) {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "value".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            self.value = value;
-        }
-    }
-
-    fn write_value(&self, rdom: &mut RealDom) {
-        if let Some(mut text) = rdom.get_mut(self.text_id) {
-            let node_type = text.node_type_mut();
-            let NodeTypeMut::Text(mut text) = node_type else {
-                panic!("input must be an element")
-            };
-            *text.text_mut() = self.value.clone();
-        }
-    }
-
-    fn switch(&mut self, ctx: &WidgetContext, node: NodeMut) {
-        let data = FormData {
-            value: self.value.to_string(),
-            values: HashMap::new(),
-            files: None,
-        };
-        ctx.send(crate::Event {
-            id: node.id(),
-            name: "input",
-            data: crate::EventData::Form(data),
-            bubbles: true,
-        });
-    }
-}
-
-impl CustomElement for Button {
-    const NAME: &'static str = "input";
-
-    fn roots(&self) -> Vec<NodeId> {
-        vec![self.text_id]
-    }
-
-    fn create(mut root: dioxus_native_core::real_dom::NodeMut) -> Self {
-        let node_type = root.node_type();
-        let NodeType::Element(el) = &*node_type else {
-            panic!("input must be an element")
-        };
-
-        let value = el
-            .attributes
-            .get(&OwnedAttributeDiscription {
-                name: "value".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string());
-
-        drop(node_type);
-
-        let rdom = root.real_dom_mut();
-        let text = rdom.create_node(value.clone().unwrap_or_default());
-        let text_id = text.id();
-
-        root.add_event_listener("keydown");
-        root.add_event_listener("click");
-
-        Self {
-            text_id,
-            value: value.unwrap_or_default(),
-        }
-    }
-
-    fn attributes_changed(
-        &mut self,
-        mut root: dioxus_native_core::real_dom::NodeMut,
-        attributes: &dioxus_native_core::node_ref::AttributeMask,
-    ) {
-        match attributes {
-            AttributeMask::All => {
-                {
-                    let node_type = root.node_type_mut();
-                    let NodeTypeMut::Element(mut el) = node_type else {
-                        panic!("input must be an element")
-                    };
-                    self.update_value_attr(&el);
-                    self.update_size_attr(&mut el);
-                }
-                self.write_value(root.real_dom_mut());
-            }
-            AttributeMask::Some(attrs) => {
-                {
-                    let node_type = root.node_type_mut();
-                    let NodeTypeMut::Element(mut el) = node_type else {
-                        panic!("input must be an element")
-                    };
-                    if attrs.contains("width") || attrs.contains("height") {
-                        self.update_size_attr(&mut el);
-                    }
-                    if attrs.contains("value") {
-                        self.update_value_attr(&el);
-                    }
-                }
-                if attrs.contains("value") {
-                    self.write_value(root.real_dom_mut());
-                }
-            }
-        }
-    }
-}
-
-impl RinkWidget for Button {
-    fn handle_event(
-        &mut self,
-        event: &crate::Event,
-        mut node: dioxus_native_core::real_dom::NodeMut,
-    ) {
-        let ctx: WidgetContext = {
-            node.real_dom_mut()
-                .raw_world_mut()
-                .borrow::<UniqueView<WidgetContext>>()
-                .expect("expected widget context")
-                .clone()
-        };
-
-        match event.name {
-            "click" => self.switch(&ctx, node),
-            "keydown" => {
-                if let crate::EventData::Keyboard(data) = &event.data {
-                    if !data.is_auto_repeating()
-                        && match data.key() {
-                            Key::Character(c) if c == " " => true,
-                            Key::Enter => true,
-                            _ => false,
-                        }
-                    {
-                        self.switch(&ctx, node);
-                    }
-                }
-            }
-            _ => {}
-        }
-    }
-}
diff --git a/packages/plasmo/src/widgets/checkbox.rs b/packages/plasmo/src/widgets/checkbox.rs
deleted file mode 100644
index a8a8253a0..000000000
--- a/packages/plasmo/src/widgets/checkbox.rs
+++ /dev/null
@@ -1,259 +0,0 @@
-use std::collections::HashMap;
-
-use dioxus_html::{input_data::keyboard_types::Key, HasKeyboardData};
-use dioxus_native_core::{
-    custom_element::CustomElement,
-    node::OwnedAttributeDiscription,
-    node_ref::AttributeMask,
-    prelude::NodeType,
-    real_dom::{ElementNodeMut, NodeImmutable, NodeMut, NodeTypeMut},
-    NodeId,
-};
-use shipyard::UniqueView;
-
-use crate::hooks::FormData;
-
-use super::{RinkWidget, WidgetContext};
-
-#[derive(Debug, Default)]
-pub(crate) struct CheckBox {
-    div_id: NodeId,
-    text_id: NodeId,
-    value: String,
-    checked: bool,
-}
-
-impl CheckBox {
-    fn width(el: &ElementNodeMut) -> String {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "width".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            value
-        } else {
-            "1px".to_string()
-        }
-    }
-
-    fn height(el: &ElementNodeMut) -> String {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "height".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            value
-        } else {
-            "1px".to_string()
-        }
-    }
-
-    fn update_size_attr(&mut self, el: &mut ElementNodeMut) {
-        let width = Self::width(el);
-        let height = Self::height(el);
-        let single_char = width == "1px" || height == "1px";
-        let border_style = if single_char { "none" } else { "solid" };
-        el.set_attribute(
-            OwnedAttributeDiscription {
-                name: "border-style".to_string(),
-                namespace: Some("style".to_string()),
-            },
-            border_style.to_string(),
-        );
-    }
-
-    fn update_value_attr(&mut self, el: &ElementNodeMut) {
-        self.value = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "value".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-            .unwrap_or_else(|| "on".to_string());
-    }
-
-    fn update_checked_attr(&mut self, el: &ElementNodeMut) {
-        self.checked = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "checked".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-            .unwrap_or_else(|| "false".to_string())
-            == "true";
-    }
-
-    fn write_value(&self, mut root: NodeMut) {
-        let single_char = {
-            let node_type = root.node_type_mut();
-            let NodeTypeMut::Element(el) = node_type else {
-                panic!("input must be an element")
-            };
-            Self::width(&el) == "1px" || Self::height(&el) == "1px"
-        };
-        let rdom = root.real_dom_mut();
-
-        if let Some(mut text) = rdom.get_mut(self.text_id) {
-            let node_type = text.node_type_mut();
-            let NodeTypeMut::Text(mut text) = node_type else {
-                panic!("input must be an element")
-            };
-            let value = if single_char {
-                if self.checked {
-                    "☑"
-                } else {
-                    "☐"
-                }
-            } else if self.checked {
-                "✓"
-            } else {
-                " "
-            };
-            *text.text_mut() = value.to_string();
-        }
-    }
-
-    fn switch(&mut self, mut node: NodeMut) {
-        let new_state = !self.checked;
-
-        let data = FormData {
-            value: new_state
-                .then(|| self.value.to_string())
-                .unwrap_or_default(),
-            values: HashMap::new(),
-            files: None,
-        };
-        {
-            let ctx: UniqueView<WidgetContext> = node
-                .real_dom_mut()
-                .raw_world_mut()
-                .borrow()
-                .expect("expected widget context");
-            ctx.send(crate::Event {
-                id: self.div_id,
-                name: "input",
-                data: crate::EventData::Form(data),
-                bubbles: true,
-            });
-        }
-
-        self.checked = new_state;
-
-        self.write_value(node);
-    }
-}
-
-impl CustomElement for CheckBox {
-    const NAME: &'static str = "input";
-
-    fn roots(&self) -> Vec<NodeId> {
-        vec![self.text_id]
-    }
-
-    fn create(mut root: dioxus_native_core::real_dom::NodeMut) -> Self {
-        let node_type = root.node_type();
-        let NodeType::Element(el) = &*node_type else {
-            panic!("input must be an element")
-        };
-
-        let value = el
-            .attributes
-            .get(&OwnedAttributeDiscription {
-                name: "value".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string());
-
-        drop(node_type);
-
-        let rdom = root.real_dom_mut();
-        let text = rdom.create_node(String::new());
-        let text_id = text.id();
-
-        root.add_event_listener("click");
-        root.add_event_listener("keydown");
-        let div_id = root.id();
-
-        let myself = Self {
-            div_id,
-            text_id,
-            value: value.unwrap_or_default(),
-            checked: false,
-        };
-        myself.write_value(root);
-
-        myself
-    }
-
-    fn attributes_changed(
-        &mut self,
-        mut root: dioxus_native_core::real_dom::NodeMut,
-        attributes: &dioxus_native_core::node_ref::AttributeMask,
-    ) {
-        match attributes {
-            AttributeMask::All => {
-                {
-                    let node_type = root.node_type_mut();
-                    let NodeTypeMut::Element(mut el) = node_type else {
-                        panic!("input must be an element")
-                    };
-                    self.update_value_attr(&el);
-                    self.update_size_attr(&mut el);
-                    self.update_checked_attr(&el);
-                }
-                self.write_value(root);
-            }
-            AttributeMask::Some(attrs) => {
-                {
-                    let node_type = root.node_type_mut();
-                    let NodeTypeMut::Element(mut el) = node_type else {
-                        panic!("input must be an element")
-                    };
-                    if attrs.contains("width") || attrs.contains("height") {
-                        self.update_size_attr(&mut el);
-                    }
-                    if attrs.contains("value") {
-                        self.update_value_attr(&el);
-                    }
-                    if attrs.contains("checked") {
-                        self.update_checked_attr(&el);
-                    }
-                }
-                if attrs.contains("checked") {
-                    self.write_value(root);
-                }
-            }
-        }
-    }
-}
-
-impl RinkWidget for CheckBox {
-    fn handle_event(&mut self, event: &crate::Event, node: dioxus_native_core::real_dom::NodeMut) {
-        match event.name {
-            "click" => self.switch(node),
-            "keydown" => {
-                if let crate::EventData::Keyboard(data) = &event.data {
-                    if !data.is_auto_repeating()
-                        && match data.key() {
-                            Key::Character(c) if c == " " => true,
-                            Key::Enter => true,
-                            _ => false,
-                        }
-                    {
-                        self.switch(node);
-                    }
-                }
-            }
-            _ => {}
-        }
-    }
-}
diff --git a/packages/plasmo/src/widgets/input.rs b/packages/plasmo/src/widgets/input.rs
deleted file mode 100644
index c1fb563d7..000000000
--- a/packages/plasmo/src/widgets/input.rs
+++ /dev/null
@@ -1,155 +0,0 @@
-use dioxus_native_core::{
-    custom_element::CustomElement, node::OwnedAttributeDiscription, prelude::NodeType,
-    real_dom::NodeImmutable,
-};
-
-use super::{
-    checkbox::CheckBox, number::Number, password::Password, slider::Slider, textbox::TextBox,
-    RinkWidget,
-};
-use crate::widgets::button::Button;
-
-pub(crate) enum Input {
-    Button(Button),
-    CheckBox(CheckBox),
-    TextBox(TextBox),
-    Password(Password),
-    Number(Number),
-    Slider(Slider),
-}
-
-impl CustomElement for Input {
-    const NAME: &'static str = "input";
-
-    fn roots(&self) -> Vec<dioxus_native_core::NodeId> {
-        match self {
-            Input::Button(button) => button.roots(),
-            Input::CheckBox(checkbox) => checkbox.roots(),
-            Input::TextBox(textbox) => textbox.roots(),
-            Input::Password(password) => password.roots(),
-            Input::Number(number) => number.roots(),
-            Input::Slider(slider) => slider.roots(),
-        }
-    }
-
-    fn slot(&self) -> Option<dioxus_native_core::NodeId> {
-        match self {
-            Input::Button(button) => button.slot(),
-            Input::CheckBox(checkbox) => checkbox.slot(),
-            Input::TextBox(textbox) => textbox.slot(),
-            Input::Password(password) => password.slot(),
-            Input::Number(number) => number.slot(),
-            Input::Slider(slider) => slider.slot(),
-        }
-    }
-
-    fn create(mut root: dioxus_native_core::real_dom::NodeMut) -> Self {
-        {
-            // currently widgets are not allowed to have children
-            let children = root.child_ids();
-            let rdom = root.real_dom_mut();
-            for child in children {
-                if let Some(mut child) = rdom.get_mut(child) {
-                    child.remove();
-                }
-            }
-        }
-
-        let node_type = root.node_type();
-        let NodeType::Element(el) = &*node_type else {
-            panic!("input must be an element")
-        };
-        let input_type = el
-            .attributes
-            .get(&OwnedAttributeDiscription {
-                name: "type".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text());
-        match input_type
-            .map(|type_| type_.trim().to_lowercase())
-            .as_deref()
-        {
-            Some("button") => {
-                drop(node_type);
-                Input::Button(Button::create(root))
-            }
-            Some("checkbox") => {
-                drop(node_type);
-                Input::CheckBox(CheckBox::create(root))
-            }
-            Some("textbox") => {
-                drop(node_type);
-                Input::TextBox(TextBox::create(root))
-            }
-            Some("password") => {
-                drop(node_type);
-                Input::Password(Password::create(root))
-            }
-            Some("number") => {
-                drop(node_type);
-                Input::Number(Number::create(root))
-            }
-            Some("range") => {
-                drop(node_type);
-                Input::Slider(Slider::create(root))
-            }
-            _ => {
-                drop(node_type);
-                Input::TextBox(TextBox::create(root))
-            }
-        }
-    }
-
-    fn attributes_changed(
-        &mut self,
-        root: dioxus_native_core::real_dom::NodeMut,
-        attributes: &dioxus_native_core::node_ref::AttributeMask,
-    ) {
-        match self {
-            Input::Button(button) => {
-                button.attributes_changed(root, attributes);
-            }
-            Input::CheckBox(checkbox) => {
-                checkbox.attributes_changed(root, attributes);
-            }
-            Input::TextBox(textbox) => {
-                textbox.attributes_changed(root, attributes);
-            }
-            Input::Password(password) => {
-                password.attributes_changed(root, attributes);
-            }
-            Input::Number(number) => {
-                number.attributes_changed(root, attributes);
-            }
-            Input::Slider(slider) => {
-                slider.attributes_changed(root, attributes);
-            }
-        }
-    }
-}
-
-impl RinkWidget for Input {
-    fn handle_event(&mut self, event: &crate::Event, node: dioxus_native_core::real_dom::NodeMut) {
-        match self {
-            Input::Button(button) => {
-                button.handle_event(event, node);
-            }
-            Input::CheckBox(checkbox) => {
-                checkbox.handle_event(event, node);
-            }
-            Input::TextBox(textbox) => {
-                textbox.handle_event(event, node);
-            }
-            Input::Password(password) => {
-                password.handle_event(event, node);
-            }
-            Input::Number(number) => {
-                number.handle_event(event, node);
-            }
-            Input::Slider(slider) => {
-                slider.handle_event(event, node);
-            }
-        }
-    }
-}
diff --git a/packages/plasmo/src/widgets/mod.rs b/packages/plasmo/src/widgets/mod.rs
deleted file mode 100644
index c3ecaad78..000000000
--- a/packages/plasmo/src/widgets/mod.rs
+++ /dev/null
@@ -1,128 +0,0 @@
-mod button;
-mod checkbox;
-mod input;
-mod number;
-mod password;
-mod slider;
-mod text_like;
-mod textbox;
-
-use std::sync::{Arc, RwLock};
-
-use dioxus_native_core::{
-    custom_element::{CustomElement, CustomElementUpdater},
-    real_dom::{NodeMut, RealDom},
-};
-use futures_channel::mpsc::UnboundedSender;
-use shipyard::{Component, Unique};
-
-use crate::Event;
-
-pub(crate) fn register_widgets(rdom: &mut RealDom, sender: UnboundedSender<Event>) {
-    // inject the widget context
-    rdom.raw_world().add_unique(WidgetContext { sender });
-
-    rdom.register_custom_element::<RinkWidgetWrapper<input::Input>>();
-}
-
-trait RinkWidget: Sync + Send + CustomElement + 'static {
-    fn handle_event(&mut self, event: &Event, node: dioxus_native_core::real_dom::NodeMut);
-}
-
-pub trait RinkWidgetResponder: CustomElementUpdater {
-    fn handle_event(&mut self, event: &Event, node: dioxus_native_core::real_dom::NodeMut);
-}
-
-impl<W: RinkWidget> RinkWidgetResponder for W {
-    fn handle_event(&mut self, event: &Event, node: dioxus_native_core::real_dom::NodeMut) {
-        RinkWidget::handle_event(self, event, node)
-    }
-}
-
-struct RinkWidgetWrapper<W: RinkWidget> {
-    inner: RinkWidgetTraitObject,
-    _marker: std::marker::PhantomData<W>,
-}
-
-impl<W: RinkWidget> CustomElement for RinkWidgetWrapper<W> {
-    const NAME: &'static str = W::NAME;
-
-    const NAMESPACE: Option<&'static str> = W::NAMESPACE;
-
-    fn create(mut node: NodeMut) -> Self {
-        let myself = RinkWidgetTraitObject {
-            widget: Arc::new(RwLock::new(W::create(node.reborrow()))),
-        };
-
-        // Insert the widget as an arbitrary data node so that it can be recognized when bubbling events
-        node.insert(myself.clone());
-
-        RinkWidgetWrapper {
-            inner: myself,
-            _marker: std::marker::PhantomData,
-        }
-    }
-
-    fn attributes_changed(
-        &mut self,
-        root: dioxus_native_core::real_dom::NodeMut,
-        attributes: &dioxus_native_core::node_ref::AttributeMask,
-    ) {
-        let mut widget = self.inner.widget.write().unwrap();
-        widget.attributes_changed(root, attributes);
-    }
-
-    fn roots(&self) -> Vec<dioxus_native_core::NodeId> {
-        let widget = self.inner.widget.read().unwrap();
-        widget.roots()
-    }
-
-    fn slot(&self) -> Option<dioxus_native_core::NodeId> {
-        let widget = self.inner.widget.read().unwrap();
-        widget.slot()
-    }
-}
-
-#[derive(Clone, Component)]
-pub(crate) struct RinkWidgetTraitObject {
-    widget: Arc<RwLock<dyn RinkWidgetResponder + Send + Sync>>,
-}
-
-impl CustomElementUpdater for RinkWidgetTraitObject {
-    fn attributes_changed(
-        &mut self,
-        light_root: dioxus_native_core::real_dom::NodeMut,
-        attributes: &dioxus_native_core::node_ref::AttributeMask,
-    ) {
-        let mut widget = self.widget.write().unwrap();
-        widget.attributes_changed(light_root, attributes);
-    }
-
-    fn roots(&self) -> Vec<dioxus_native_core::NodeId> {
-        let widget = self.widget.read().unwrap();
-        widget.roots()
-    }
-
-    fn slot(&self) -> Option<dioxus_native_core::NodeId> {
-        let widget = self.widget.read().unwrap();
-        widget.slot()
-    }
-}
-
-impl RinkWidgetResponder for RinkWidgetTraitObject {
-    fn handle_event(&mut self, event: &Event, node: dioxus_native_core::real_dom::NodeMut) {
-        let mut widget = self.widget.write().unwrap();
-        widget.handle_event(event, node);
-    }
-}
-
-#[derive(Unique, Clone)]
-pub(crate) struct WidgetContext {
-    sender: UnboundedSender<Event>,
-}
-
-impl WidgetContext {
-    pub(crate) fn send(&self, event: Event) {
-        self.sender.unbounded_send(event).unwrap();
-    }
-}
diff --git a/packages/plasmo/src/widgets/number.rs b/packages/plasmo/src/widgets/number.rs
deleted file mode 100644
index c2a71ceac..000000000
--- a/packages/plasmo/src/widgets/number.rs
+++ /dev/null
@@ -1,91 +0,0 @@
-use dioxus_html::{input_data::keyboard_types::Key, HasKeyboardData};
-use dioxus_native_core::{
-    custom_element::CustomElement,
-    real_dom::{NodeImmutable, RealDom},
-    NodeId,
-};
-
-use crate::EventData;
-
-use super::{text_like::TextLike, RinkWidget};
-
-#[derive(Debug, Default)]
-pub(crate) struct Number {
-    text: TextLike,
-}
-
-impl Number {
-    fn increase(&mut self, rdom: &mut RealDom, id: NodeId) {
-        let num = self.text.text().parse::<f64>().unwrap_or(0.0);
-        self.text.set_text((num + 1.0).to_string(), rdom, id);
-    }
-
-    fn decrease(&mut self, rdom: &mut RealDom, id: NodeId) {
-        let num = self.text.text().parse::<f64>().unwrap_or(0.0);
-        self.text.set_text((num - 1.0).to_string(), rdom, id);
-    }
-}
-
-impl CustomElement for Number {
-    const NAME: &'static str = "input";
-
-    fn roots(&self) -> Vec<NodeId> {
-        self.text.roots()
-    }
-
-    fn create(mut root: dioxus_native_core::real_dom::NodeMut) -> Self {
-        Number {
-            text: TextLike::create(root.reborrow()),
-        }
-    }
-
-    fn attributes_changed(
-        &mut self,
-        root: dioxus_native_core::real_dom::NodeMut,
-        attributes: &dioxus_native_core::node_ref::AttributeMask,
-    ) {
-        self.text.attributes_changed(root, attributes)
-    }
-}
-
-impl RinkWidget for Number {
-    fn handle_event(
-        &mut self,
-        event: &crate::Event,
-        mut node: dioxus_native_core::real_dom::NodeMut,
-    ) {
-        if event.name == "keydown" {
-            if let EventData::Keyboard(data) = &event.data {
-                let key = data.key();
-                let is_num_like = match key.clone() {
-                    Key::ArrowLeft | Key::ArrowRight | Key::Backspace => true,
-                    Key::Character(c)
-                        if c == "." || c == "-" || c.chars().all(|c| c.is_numeric()) =>
-                    {
-                        true
-                    }
-                    _ => false,
-                };
-
-                if is_num_like {
-                    self.text.handle_event(event, node)
-                } else {
-                    let id = node.id();
-                    let rdom = node.real_dom_mut();
-                    match key {
-                        Key::ArrowUp => {
-                            self.increase(rdom, id);
-                        }
-                        Key::ArrowDown => {
-                            self.decrease(rdom, id);
-                        }
-                        _ => (),
-                    }
-                }
-                return;
-            }
-        }
-
-        self.text.handle_event(event, node)
-    }
-}
diff --git a/packages/plasmo/src/widgets/password.rs b/packages/plasmo/src/widgets/password.rs
deleted file mode 100644
index 9a8228ad1..000000000
--- a/packages/plasmo/src/widgets/password.rs
+++ /dev/null
@@ -1,12 +0,0 @@
-use super::text_like::{TextLike, TextLikeController};
-
-pub(crate) type Password = TextLike<PasswordController>;
-
-#[derive(Debug, Default)]
-pub(crate) struct PasswordController;
-
-impl TextLikeController for PasswordController {
-    fn display_text(&self, text: &str) -> String {
-        text.chars().map(|_| '.').collect()
-    }
-}
diff --git a/packages/plasmo/src/widgets/slider.rs b/packages/plasmo/src/widgets/slider.rs
deleted file mode 100644
index bb0639610..000000000
--- a/packages/plasmo/src/widgets/slider.rs
+++ /dev/null
@@ -1,470 +0,0 @@
-use std::collections::HashMap;
-
-use dioxus_html::{
-    input_data::keyboard_types::Key, prelude::*, HasKeyboardData, SerializedKeyboardData,
-    SerializedMouseData,
-};
-use dioxus_native_core::{
-    custom_element::CustomElement,
-    node::{OwnedAttributeDiscription, OwnedAttributeValue},
-    node_ref::AttributeMask,
-    prelude::{ElementNode, NodeType},
-    real_dom::{ElementNodeMut, NodeImmutable, NodeMut, NodeTypeMut, RealDom},
-    NodeId,
-};
-use shipyard::UniqueView;
-
-use super::{RinkWidget, WidgetContext};
-use crate::hooks::FormData;
-use crate::{query::get_layout, Event, EventData, Query};
-
-#[derive(Debug)]
-pub(crate) struct Slider {
-    div_wrapper: NodeId,
-    pre_cursor_div: NodeId,
-    post_cursor_div: NodeId,
-    min: f64,
-    max: f64,
-    step: Option<f64>,
-    value: f64,
-    border: bool,
-}
-
-impl Default for Slider {
-    fn default() -> Self {
-        Self {
-            div_wrapper: Default::default(),
-            pre_cursor_div: Default::default(),
-            post_cursor_div: Default::default(),
-            min: 0.0,
-            max: 100.0,
-            step: None,
-            value: 0.0,
-            border: false,
-        }
-    }
-}
-
-impl Slider {
-    fn size(&self) -> f64 {
-        self.max - self.min
-    }
-
-    fn step(&self) -> f64 {
-        self.step.unwrap_or(self.size() / 10.0)
-    }
-
-    fn width(el: &ElementNodeMut) -> String {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "width".to_string(),
-                namespace: Some("style".to_string()),
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            value
-        } else {
-            "1px".to_string()
-        }
-    }
-
-    fn height(el: &ElementNodeMut) -> String {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "height".to_string(),
-                namespace: Some("style".to_string()),
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            value
-        } else {
-            "1px".to_string()
-        }
-    }
-
-    fn update_min_attr(&mut self, el: &ElementNodeMut) {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "min".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            self.min = value.parse().ok().unwrap_or(0.0);
-        }
-    }
-
-    fn update_max_attr(&mut self, el: &ElementNodeMut) {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "max".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            self.max = value.parse().ok().unwrap_or(100.0);
-        }
-    }
-
-    fn update_step_attr(&mut self, el: &ElementNodeMut) {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "step".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            self.step = value.parse().ok();
-        }
-    }
-
-    fn update_size_attr(&mut self, el: &mut ElementNodeMut) {
-        let width = Self::width(el);
-        let height = Self::height(el);
-        let single_char = width
-            .strip_prefix("px")
-            .and_then(|n| n.parse::<u32>().ok().filter(|num| *num > 3))
-            .is_some()
-            || height
-                .strip_prefix("px")
-                .and_then(|n| n.parse::<u32>().ok().filter(|num| *num > 3))
-                .is_some();
-        self.border = !single_char;
-        let border_style = if self.border { "solid" } else { "none" };
-        el.set_attribute(
-            OwnedAttributeDiscription {
-                name: "border-style".to_string(),
-                namespace: Some("style".to_string()),
-            },
-            border_style.to_string(),
-        );
-    }
-
-    fn update_value(&mut self, new: f64) {
-        self.value = new.clamp(self.min, self.max);
-    }
-
-    fn update_value_attr(&mut self, el: &ElementNodeMut) {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "value".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            self.update_value(value.parse().ok().unwrap_or(0.0));
-        }
-    }
-
-    fn write_value(&self, rdom: &mut RealDom, id: NodeId) {
-        let value_percent = (self.value - self.min) / self.size() * 100.0;
-
-        if let Some(mut div) = rdom.get_mut(self.pre_cursor_div) {
-            let node_type = div.node_type_mut();
-            let NodeTypeMut::Element(mut element) = node_type else {
-                panic!("input must be an element")
-            };
-            element.set_attribute(
-                OwnedAttributeDiscription {
-                    name: "width".to_string(),
-                    namespace: Some("style".to_string()),
-                },
-                format!("{}%", value_percent),
-            );
-        }
-
-        if let Some(mut div) = rdom.get_mut(self.post_cursor_div) {
-            let node_type = div.node_type_mut();
-            let NodeTypeMut::Element(mut element) = node_type else {
-                panic!("input must be an element")
-            };
-            element.set_attribute(
-                OwnedAttributeDiscription {
-                    name: "width".to_string(),
-                    namespace: Some("style".to_string()),
-                },
-                format!("{}%", 100.0 - value_percent),
-            );
-        }
-
-        // send the event
-        let world = rdom.raw_world_mut();
-
-        {
-            let ctx: UniqueView<WidgetContext> = world.borrow().expect("expected widget context");
-
-            let data = FormData {
-                value: self.value.to_string(),
-                values: HashMap::new(),
-                files: None,
-            };
-            ctx.send(Event {
-                id,
-                name: "input",
-                data: EventData::Form(data),
-                bubbles: true,
-            });
-        }
-    }
-
-    fn handle_keydown(&mut self, mut root: NodeMut, data: &SerializedKeyboardData) {
-        let key = data.key();
-
-        let step = self.step();
-        match key {
-            Key::ArrowDown | Key::ArrowLeft => {
-                self.update_value(self.value - step);
-            }
-            Key::ArrowUp | Key::ArrowRight => {
-                self.update_value(self.value + step);
-            }
-            _ => {
-                return;
-            }
-        }
-
-        let id = root.id();
-
-        let rdom = root.real_dom_mut();
-        self.write_value(rdom, id);
-    }
-
-    fn handle_mousemove(&mut self, mut root: NodeMut, data: &SerializedMouseData) {
-        if !data.held_buttons().is_empty() {
-            let id = root.id();
-            let rdom = root.real_dom_mut();
-            let world = rdom.raw_world_mut();
-            let taffy = {
-                let query: UniqueView<Query> = world.borrow().unwrap();
-                query.stretch.clone()
-            };
-
-            let taffy = taffy.lock().unwrap();
-
-            let layout = get_layout(rdom.get(self.div_wrapper).unwrap(), &taffy).unwrap();
-
-            let width = layout.size.width as f64;
-            let offset = data.element_coordinates();
-            self.update_value(self.min + self.size() * offset.x / width);
-
-            self.write_value(rdom, id);
-        }
-    }
-}
-
-impl CustomElement for Slider {
-    const NAME: &'static str = "input";
-
-    fn roots(&self) -> Vec<NodeId> {
-        vec![self.div_wrapper]
-    }
-
-    fn create(mut root: dioxus_native_core::real_dom::NodeMut) -> Self {
-        let node_type = root.node_type();
-        let NodeType::Element(el) = &*node_type else {
-            panic!("input must be an element")
-        };
-
-        let value = el.attributes.get(&OwnedAttributeDiscription {
-            name: "value".to_string(),
-            namespace: None,
-        });
-        let value = value
-            .and_then(|value| match value {
-                OwnedAttributeValue::Text(text) => text.as_str().parse().ok(),
-                OwnedAttributeValue::Float(float) => Some(*float),
-                OwnedAttributeValue::Int(int) => Some(*int as f64),
-                _ => None,
-            })
-            .unwrap_or(0.0);
-
-        drop(node_type);
-
-        let rdom = root.real_dom_mut();
-
-        let pre_cursor_div = rdom.create_node(NodeType::Element(ElementNode {
-            tag: "div".to_string(),
-            attributes: [(
-                OwnedAttributeDiscription {
-                    name: "background-color".to_string(),
-                    namespace: Some("style".to_string()),
-                },
-                "rgba(10,10,10,0.5)".to_string().into(),
-            )]
-            .into_iter()
-            .collect(),
-            ..Default::default()
-        }));
-        let pre_cursor_div_id = pre_cursor_div.id();
-
-        let cursor_text = rdom.create_node("|".to_string());
-        let cursor_text_id = cursor_text.id();
-        let mut cursor_span = rdom.create_node(NodeType::Element(ElementNode {
-            tag: "div".to_string(),
-            attributes: [].into_iter().collect(),
-            ..Default::default()
-        }));
-        cursor_span.add_child(cursor_text_id);
-        let cursor_span_id = cursor_span.id();
-
-        let post_cursor_div = rdom.create_node(NodeType::Element(ElementNode {
-            tag: "span".to_string(),
-            attributes: [
-                (
-                    OwnedAttributeDiscription {
-                        name: "width".to_string(),
-                        namespace: Some("style".to_string()),
-                    },
-                    "100%".to_string().into(),
-                ),
-                (
-                    OwnedAttributeDiscription {
-                        name: "background-color".to_string(),
-                        namespace: Some("style".to_string()),
-                    },
-                    "rgba(10,10,10,0.5)".to_string().into(),
-                ),
-            ]
-            .into_iter()
-            .collect(),
-            ..Default::default()
-        }));
-        let post_cursor_div_id = post_cursor_div.id();
-
-        let mut div_wrapper = rdom.create_node(NodeType::Element(ElementNode {
-            tag: "div".to_string(),
-            attributes: [
-                (
-                    OwnedAttributeDiscription {
-                        name: "display".to_string(),
-                        namespace: Some("style".to_string()),
-                    },
-                    "flex".to_string().into(),
-                ),
-                (
-                    OwnedAttributeDiscription {
-                        name: "flex-direction".to_string(),
-                        namespace: Some("style".to_string()),
-                    },
-                    "row".to_string().into(),
-                ),
-                (
-                    OwnedAttributeDiscription {
-                        name: "width".to_string(),
-                        namespace: Some("style".to_string()),
-                    },
-                    "100%".to_string().into(),
-                ),
-                (
-                    OwnedAttributeDiscription {
-                        name: "height".to_string(),
-                        namespace: Some("style".to_string()),
-                    },
-                    "100%".to_string().into(),
-                ),
-            ]
-            .into_iter()
-            .collect(),
-            ..Default::default()
-        }));
-        let div_wrapper_id = div_wrapper.id();
-        div_wrapper.add_child(pre_cursor_div_id);
-        div_wrapper.add_child(cursor_span_id);
-        div_wrapper.add_child(post_cursor_div_id);
-
-        root.add_event_listener("mousemove");
-        root.add_event_listener("mousedown");
-        root.add_event_listener("keydown");
-
-        Self {
-            pre_cursor_div: pre_cursor_div_id,
-            post_cursor_div: post_cursor_div_id,
-            div_wrapper: div_wrapper_id,
-            value,
-            ..Default::default()
-        }
-    }
-
-    fn attributes_changed(
-        &mut self,
-        mut root: dioxus_native_core::real_dom::NodeMut,
-        attributes: &dioxus_native_core::node_ref::AttributeMask,
-    ) {
-        match attributes {
-            AttributeMask::All => {
-                {
-                    let node_type = root.node_type_mut();
-                    let NodeTypeMut::Element(mut el) = node_type else {
-                        panic!("input must be an element")
-                    };
-                    self.update_value_attr(&el);
-                    self.update_size_attr(&mut el);
-                    self.update_max_attr(&el);
-                    self.update_min_attr(&el);
-                    self.update_step_attr(&el);
-                }
-                let id = root.id();
-                self.write_value(root.real_dom_mut(), id);
-            }
-            AttributeMask::Some(attrs) => {
-                {
-                    let node_type = root.node_type_mut();
-                    let NodeTypeMut::Element(mut el) = node_type else {
-                        panic!("input must be an element")
-                    };
-                    if attrs.contains("width") || attrs.contains("height") {
-                        self.update_size_attr(&mut el);
-                    }
-                    if attrs.contains("max") {
-                        self.update_max_attr(&el);
-                    }
-                    if attrs.contains("min") {
-                        self.update_min_attr(&el);
-                    }
-                    if attrs.contains("step") {
-                        self.update_step_attr(&el);
-                    }
-                    if attrs.contains("value") {
-                        self.update_value_attr(&el);
-                    }
-                }
-                if attrs.contains("value") {
-                    let id = root.id();
-                    self.write_value(root.real_dom_mut(), id);
-                }
-            }
-        }
-    }
-}
-
-impl RinkWidget for Slider {
-    fn handle_event(&mut self, event: &crate::Event, node: dioxus_native_core::real_dom::NodeMut) {
-        match event.name {
-            "keydown" => {
-                if let EventData::Keyboard(data) = &event.data {
-                    self.handle_keydown(node, data);
-                }
-            }
-
-            "mousemove" => {
-                if let EventData::Mouse(data) = &event.data {
-                    self.handle_mousemove(node, data);
-                }
-            }
-
-            "mousedown" => {
-                if let EventData::Mouse(data) = &event.data {
-                    self.handle_mousemove(node, data);
-                }
-            }
-
-            _ => {}
-        }
-    }
-}
diff --git a/packages/plasmo/src/widgets/text_like.rs b/packages/plasmo/src/widgets/text_like.rs
deleted file mode 100644
index 770dd9d33..000000000
--- a/packages/plasmo/src/widgets/text_like.rs
+++ /dev/null
@@ -1,460 +0,0 @@
-use std::{collections::HashMap, io::stdout};
-
-use crossterm::{cursor::MoveTo, execute};
-use dioxus_html::{
-    input_data::keyboard_types::Key, prelude::*, HasKeyboardData, SerializedKeyboardData,
-    SerializedMouseData,
-};
-use dioxus_native_core::{
-    custom_element::CustomElement,
-    node::OwnedAttributeDiscription,
-    node_ref::AttributeMask,
-    prelude::{ElementNode, NodeType},
-    real_dom::{ElementNodeMut, NodeImmutable, NodeMut, NodeTypeMut, RealDom},
-    utils::cursor::{Cursor, Pos},
-    NodeId,
-};
-use shipyard::UniqueView;
-use taffy::geometry::Point;
-
-use crate::hooks::FormData;
-use crate::{query::get_layout, Event, EventData, Query};
-
-use super::{RinkWidget, WidgetContext};
-
-pub(crate) trait TextLikeController {
-    fn display_text(&self, text: &str) -> String {
-        text.to_string()
-    }
-}
-
-#[derive(Debug, Default)]
-pub(crate) struct EmptyController;
-
-impl TextLikeController for EmptyController {}
-
-#[derive(Debug, Default)]
-pub(crate) struct TextLike<C: TextLikeController = EmptyController> {
-    text: String,
-    div_wrapper: NodeId,
-    pre_cursor_text: NodeId,
-    highlighted_text: NodeId,
-    post_cursor_text: NodeId,
-    cursor: Cursor,
-    dragging: bool,
-    border: bool,
-    max_len: Option<usize>,
-    controller: C,
-}
-
-impl<C: TextLikeController> TextLike<C> {
-    fn width(el: &ElementNodeMut) -> String {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "width".to_string(),
-                namespace: Some("style".to_string()),
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            value
-        } else {
-            "1px".to_string()
-        }
-    }
-
-    fn height(el: &ElementNodeMut) -> String {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "height".to_string(),
-                namespace: Some("style".to_string()),
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            value
-        } else {
-            "1px".to_string()
-        }
-    }
-
-    fn update_max_width_attr(&mut self, el: &ElementNodeMut) {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "maxlength".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            if let Ok(max_len) = value.parse::<usize>() {
-                self.max_len = Some(max_len);
-            }
-        }
-    }
-
-    fn update_size_attr(&mut self, el: &mut ElementNodeMut) {
-        let width = Self::width(el);
-        let height = Self::height(el);
-        let single_char = width
-            .strip_prefix("px")
-            .and_then(|n| n.parse::<u32>().ok().filter(|num| *num > 3))
-            .is_some()
-            || height
-                .strip_prefix("px")
-                .and_then(|n| n.parse::<u32>().ok().filter(|num| *num > 3))
-                .is_some();
-        self.border = !single_char;
-        let border_style = if self.border { "solid" } else { "none" };
-        el.set_attribute(
-            OwnedAttributeDiscription {
-                name: "border-style".to_string(),
-                namespace: Some("style".to_string()),
-            },
-            border_style.to_string(),
-        );
-    }
-
-    fn update_value_attr(&mut self, el: &ElementNodeMut) {
-        if let Some(value) = el
-            .get_attribute(&OwnedAttributeDiscription {
-                name: "value".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string())
-        {
-            self.text = value;
-        }
-    }
-
-    pub(crate) fn set_text(&mut self, text: String, rdom: &mut RealDom, id: NodeId) {
-        self.text = text;
-        self.write_value(rdom, id);
-    }
-
-    pub(crate) fn text(&self) -> &str {
-        self.text.as_str()
-    }
-
-    fn write_value(&self, rdom: &mut RealDom, id: NodeId) {
-        let start_highlight = self.cursor.first().idx(self.text.as_str());
-        let end_highlight = self.cursor.last().idx(self.text.as_str());
-        let (text_before_first_cursor, text_after_first_cursor) =
-            self.text.split_at(start_highlight);
-        let (text_highlighted, text_after_second_cursor) =
-            text_after_first_cursor.split_at(end_highlight - start_highlight);
-
-        if let Some(mut text) = rdom.get_mut(self.pre_cursor_text) {
-            let node_type = text.node_type_mut();
-            let NodeTypeMut::Text(mut text) = node_type else {
-                panic!("input must be an element")
-            };
-            *text.text_mut() = self.controller.display_text(text_before_first_cursor);
-        }
-
-        if let Some(mut text) = rdom.get_mut(self.highlighted_text) {
-            let node_type = text.node_type_mut();
-            let NodeTypeMut::Text(mut text) = node_type else {
-                panic!("input must be an element")
-            };
-            *text.text_mut() = self.controller.display_text(text_highlighted);
-        }
-
-        if let Some(mut text) = rdom.get_mut(self.post_cursor_text) {
-            let node_type = text.node_type_mut();
-            let NodeTypeMut::Text(mut text) = node_type else {
-                panic!("input must be an element")
-            };
-            *text.text_mut() = self.controller.display_text(text_after_second_cursor);
-        }
-
-        // send the event
-        {
-            let world = rdom.raw_world_mut();
-            let data: FormData = FormData {
-                value: self.text.clone(),
-                values: HashMap::new(),
-                files: None,
-            };
-            let ctx: UniqueView<WidgetContext> = world.borrow().expect("expected widget context");
-
-            ctx.send(Event {
-                id,
-                name: "input",
-                data: EventData::Form(data),
-                bubbles: true,
-            });
-        }
-    }
-
-    fn handle_keydown(&mut self, mut root: NodeMut, data: &SerializedKeyboardData) {
-        let key = data.key();
-        let modifiers = data.modifiers();
-        let code = data.code();
-
-        if key == Key::Enter {
-            return;
-        }
-        self.cursor.handle_input(
-            &code,
-            &key,
-            &modifiers,
-            &mut self.text,
-            self.max_len.unwrap_or(1000),
-        );
-
-        let id = root.id();
-
-        let rdom = root.real_dom_mut();
-        self.write_value(rdom, id);
-        let world = rdom.raw_world_mut();
-
-        // move cursor to new position
-        let taffy = {
-            let query: UniqueView<Query> = world.borrow().unwrap();
-            query.stretch.clone()
-        };
-
-        let taffy = taffy.lock().unwrap();
-
-        let layout = get_layout(rdom.get(self.div_wrapper).unwrap(), &taffy).unwrap();
-        let Point { x, y } = layout.location;
-
-        let Pos { col, row } = self.cursor.start;
-        let (x, y) = (col as u16 + x as u16, row as u16 + y as u16);
-        if let Ok(pos) = crossterm::cursor::position() {
-            if pos != (x, y) {
-                execute!(stdout(), MoveTo(x, y)).unwrap();
-            }
-        } else {
-            execute!(stdout(), MoveTo(x, y)).unwrap();
-        }
-    }
-
-    fn handle_mousemove(&mut self, mut root: NodeMut, data: &SerializedMouseData) {
-        if self.dragging {
-            let id = root.id();
-            let offset = data.element_coordinates();
-            let mut new = Pos::new(offset.x as usize, offset.y as usize);
-
-            // textboxs are only one line tall
-            new.row = 0;
-
-            if new != self.cursor.start {
-                self.cursor.end = Some(new);
-            }
-            let rdom = root.real_dom_mut();
-            self.write_value(rdom, id);
-        }
-    }
-
-    fn handle_mousedown(&mut self, mut root: NodeMut, data: &SerializedMouseData) {
-        let offset = data.element_coordinates();
-        let mut new = Pos::new(offset.x as usize, offset.y as usize);
-
-        // textboxs are only one line tall
-        new.row = 0;
-
-        new.realize_col(self.text.as_str());
-        self.cursor = Cursor::from_start(new);
-        self.dragging = true;
-
-        let id = root.id();
-
-        // move cursor to new position
-        let rdom = root.real_dom_mut();
-        let world = rdom.raw_world_mut();
-        let taffy = {
-            let query: UniqueView<Query> = world.borrow().unwrap();
-            query.stretch.clone()
-        };
-
-        let taffy = taffy.lock().unwrap();
-
-        let layout = get_layout(rdom.get(self.div_wrapper).unwrap(), &taffy).unwrap();
-        let Point { x, y } = layout.location;
-
-        let Pos { col, row } = self.cursor.start;
-        let (x, y) = (col as u16 + x as u16, row as u16 + y as u16);
-        if let Ok(pos) = crossterm::cursor::position() {
-            if pos != (x, y) {
-                execute!(stdout(), MoveTo(x, y)).unwrap();
-            }
-        } else {
-            execute!(stdout(), MoveTo(x, y)).unwrap();
-        }
-
-        self.write_value(rdom, id)
-    }
-}
-
-impl<C: TextLikeController + Send + Sync + Default + 'static> CustomElement for TextLike<C> {
-    const NAME: &'static str = "input";
-
-    fn roots(&self) -> Vec<NodeId> {
-        vec![self.div_wrapper]
-    }
-
-    fn create(mut root: dioxus_native_core::real_dom::NodeMut) -> Self {
-        let node_type = root.node_type();
-        let NodeType::Element(el) = &*node_type else {
-            panic!("input must be an element")
-        };
-
-        let value = el
-            .attributes
-            .get(&OwnedAttributeDiscription {
-                name: "value".to_string(),
-                namespace: None,
-            })
-            .and_then(|value| value.as_text())
-            .map(|value| value.to_string());
-
-        drop(node_type);
-
-        let rdom = root.real_dom_mut();
-
-        let pre_text = rdom.create_node(String::new());
-        let pre_text_id = pre_text.id();
-        let highlighted_text = rdom.create_node(String::new());
-        let highlighted_text_id = highlighted_text.id();
-        let mut highlighted_text_span = rdom.create_node(NodeType::Element(ElementNode {
-            tag: "span".to_string(),
-            attributes: [(
-                OwnedAttributeDiscription {
-                    name: "background-color".to_string(),
-                    namespace: Some("style".to_string()),
-                },
-                "rgba(255, 255, 255, 50%)".to_string().into(),
-            )]
-            .into_iter()
-            .collect(),
-            ..Default::default()
-        }));
-        highlighted_text_span.add_child(highlighted_text_id);
-        let highlighted_text_span_id = highlighted_text_span.id();
-        let post_text = rdom.create_node(value.clone().unwrap_or_default());
-        let post_text_id = post_text.id();
-        let mut div_wrapper = rdom.create_node(NodeType::Element(ElementNode {
-            tag: "div".to_string(),
-            attributes: [(
-                OwnedAttributeDiscription {
-                    name: "display".to_string(),
-                    namespace: Some("style".to_string()),
-                },
-                "flex".to_string().into(),
-            )]
-            .into_iter()
-            .collect(),
-            ..Default::default()
-        }));
-        let div_wrapper_id = div_wrapper.id();
-        div_wrapper.add_child(pre_text_id);
-        div_wrapper.add_child(highlighted_text_span_id);
-        div_wrapper.add_child(post_text_id);
-
-        div_wrapper.add_event_listener("mousemove");
-        div_wrapper.add_event_listener("mousedown");
-        div_wrapper.add_event_listener("mouseup");
-        div_wrapper.add_event_listener("mouseleave");
-        div_wrapper.add_event_listener("mouseenter");
-        root.add_event_listener("keydown");
-        root.add_event_listener("focusout");
-
-        Self {
-            pre_cursor_text: pre_text_id,
-            highlighted_text: highlighted_text_id,
-            post_cursor_text: post_text_id,
-            div_wrapper: div_wrapper_id,
-            cursor: Cursor::default(),
-            text: value.unwrap_or_default(),
-            ..Default::default()
-        }
-    }
-
-    fn attributes_changed(
-        &mut self,
-        mut root: dioxus_native_core::real_dom::NodeMut,
-        attributes: &dioxus_native_core::node_ref::AttributeMask,
-    ) {
-        match attributes {
-            AttributeMask::All => {
-                {
-                    let node_type = root.node_type_mut();
-                    let NodeTypeMut::Element(mut el) = node_type else {
-                        panic!("input must be an element")
-                    };
-                    self.update_value_attr(&el);
-                    self.update_size_attr(&mut el);
-                    self.update_max_width_attr(&el);
-                }
-                let id = root.id();
-                self.write_value(root.real_dom_mut(), id);
-            }
-            AttributeMask::Some(attrs) => {
-                {
-                    let node_type = root.node_type_mut();
-                    let NodeTypeMut::Element(mut el) = node_type else {
-                        panic!("input must be an element")
-                    };
-                    if attrs.contains("width") || attrs.contains("height") {
-                        self.update_size_attr(&mut el);
-                    }
-                    if attrs.contains("maxlength") {
-                        self.update_max_width_attr(&el);
-                    }
-                    if attrs.contains("value") {
-                        self.update_value_attr(&el);
-                    }
-                }
-                if attrs.contains("value") {
-                    let id = root.id();
-                    self.write_value(root.real_dom_mut(), id);
-                }
-            }
-        }
-    }
-}
-
-impl<C: TextLikeController + Send + Sync + Default + 'static> RinkWidget for TextLike<C> {
-    fn handle_event(&mut self, event: &crate::Event, node: NodeMut) {
-        match event.name {
-            "keydown" => {
-                if let EventData::Keyboard(data) = &event.data {
-                    self.handle_keydown(node, data);
-                }
-            }
-
-            "mousemove" => {
-                if let EventData::Mouse(data) = &event.data {
-                    self.handle_mousemove(node, data);
-                }
-            }
-
-            "mousedown" => {
-                if let EventData::Mouse(data) = &event.data {
-                    self.handle_mousedown(node, data);
-                }
-            }
-
-            "mouseup" => {
-                self.dragging = false;
-            }
-
-            "mouseleave" => {
-                self.dragging = false;
-            }
-
-            "mouseenter" => {
-                self.dragging = false;
-            }
-
-            "focusout" => {
-                execute!(stdout(), MoveTo(0, 1000)).unwrap();
-            }
-
-            _ => {}
-        }
-    }
-}
diff --git a/packages/plasmo/src/widgets/textbox.rs b/packages/plasmo/src/widgets/textbox.rs
deleted file mode 100644
index df9bd7758..000000000
--- a/packages/plasmo/src/widgets/textbox.rs
+++ /dev/null
@@ -1,3 +0,0 @@
-use super::text_like::TextLike;
-
-pub(crate) type TextBox = TextLike;
diff --git a/packages/plasmo/test.html b/packages/plasmo/test.html
deleted file mode 100644
index 5298c723e..000000000
--- a/packages/plasmo/test.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <title>Test</title>
-    <style>
-        html,
-        body {
-            height: 100%;
-        }
-        
-        .container {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            background-color: black;
-            /* justify-content: center;
-            align-items: center; */
-            /* margin: auto; */
-        }
-        
-        .smaller {
-            height: 70%;
-            width: 70%;
-            background-color: green;
-            /* justify-content: center; */
-            /* align-items: center; */
-        }
-        
-        .superinner {
-            height: 100%;
-            width: 100%;
-            /* display: flex; */
-            /*  */
-            margin-top: 20px;
-            margin-bottom: 20px;
-            margin-left: 20px;
-            margin-right: 20px;
-            /*  */
-            background-color: red;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-            /* margin: 20px; */
-            /* margin: 20px; */
-        }
-    </style>
-</head>
-
-<body>
-    <div class="container">
-        <div class="smaller">
-            <div class="superinner">
-                <h1>Hello World</h1>
-                <p>This is a test</p>
-            </div>
-        </div>
-    </div>
-    <!-- <div class="container">
-        <div class="smaller">
-            hello world
-            <div style="color: green; margin: 40px;">
-                goodbye
-                <div style="color:red;">
-                    asdasdasd
-                </div>
-            </div>
-        </div>
-    </div> -->
-</body>
-
-</html>
\ No newline at end of file