Merge pull request #36 from ikatson/web-ui

Rqbit Web UI
2023-11-21 14:11:04 +00:00 · 2023-11-21 14:11:04 +00:00 · 64209a2c7c
commit 64209a2c7c
parent e557d76660 85a762d2de
150 changed files with 13276 additions and 100 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@ -683,6 +683,12 @@ dependencies = [
 "pin-project-lite",
 ]

+[[package]]
+name = "http-range-header"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "add0ab9360ddbd88cfeb3bd9574a1d85cfdfa14db10b3e21d3700dbc4328758f"
+
 [[package]]
 name = "httparse"
 version = "1.8.0"
@ -862,6 +868,7 @@ dependencies = [
 "size_format",
 "tokio",
 "tokio-stream",
+ "tower-http",
 "tracing",
 "tracing-subscriber",
 "url",
@ -1944,6 +1951,25 @@ dependencies = [
 "tracing",
 ]

+[[package]]
+name = "tower-http"
+version = "0.4.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "61c5bb1d698276a2443e5ecfabc1008bf15a36c12e6a7176e7bf089ea9131140"
+dependencies = [
+ "bitflags 2.4.1",
+ "bytes",
+ "futures-core",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-range-header",
+ "pin-project-lite",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
 [[package]]
 name = "tower-layer"
 version = "0.3.2"
--- a/13
+++ b/13
@ -1,6 +1,17 @@
 OPENSSL_VERSION=3.1.1

-all: sign-release sign-debug
+# I'm lazy to type "webui-build" so made it default
+all: webui-build
+
+@PHONY: webui-dev
+webui-dev:
+	cd crates/librqbit/webui && \
+	npm run dev
+
+@PHONY: webui-build
+webui-build:
+	cd crates/librqbit/webui && \
+	npm run build

@PHONY: clean
 clean:
--- a/TODO.md
+++ b/TODO.md
@ -4,8 +4,10 @@
 - [x] use some concurrent hashmap e.g. flurry or dashmap
 - [x] tracing instead of logging. Debugging peers: RUST_LOG=[{peer=.*}]=debug
  test-log for tests
- [ ] reopen read only is bugged:
-  expected to be able to write to disk: error writing to file 0 (""The.Creator.2023.D.AMZN.WEB-DLRip.1.46Gb.MegaPeer.avi"")
+- [x] reopen read only is bugged
+- [ ] initializing
+  - [ ] blocks the whole process. Need to break it up. On slower devices (rpi) just hangs for a good while
+  - [ ] initilizating torrents should be visible right away

 someday:
 - [ ] cancellation from the client-side for the lib (i.e. stop the torrent manager)
--- a/crates/librqbit/Cargo.toml
+++ b/crates/librqbit/Cargo.toml
@ -13,6 +13,7 @@ readme = "README.md"

 [features]
 default = ["sha1-system", "default-tls"]
+webui = []
 timed_existence = []
 sha1-system = ["sha1w/sha1-system"]
 sha1-openssl = ["sha1w/sha1-openssl"]
@ -31,6 +32,7 @@ dht = {path = "../dht", package="librqbit-dht", version="3.0.0"}

 tokio = {version = "1", features = ["macros", "rt-multi-thread"]}
 axum = {version = "0.6"}
+tower-http = {version = "0.4", features = ["cors", "trace"]}
 tokio-stream = "0.1"
 serde = {version = "1", features=["derive"]}
 serde_json = "1"
--- a/crates/librqbit/src/http_api.rs
+++ b/crates/librqbit/src/http_api.rs
@ -1,4 +1,5 @@
 use anyhow::Context;
+use axum::body::Bytes;
 use axum::extract::{Path, Query, State};
 use axum::response::IntoResponse;
 use axum::routing::get;
@ -18,7 +19,9 @@ use axum::Router;

 use crate::http_api_error::{ApiError, ApiErrorExt};
 use crate::peer_state::PeerStatsFilter;
-use crate::session::{AddTorrentOptions, AddTorrentResponse, ListOnlyResponse, Session};
+use crate::session::{
+    AddTorrent, AddTorrentOptions, AddTorrentResponse, ListOnlyResponse, Session,
+};
 use crate::torrent_manager::TorrentManagerHandle;
 use crate::torrent_state::StatsSnapshot;

@ -54,7 +57,8 @@ impl HttpApi {
                    "GET /torrents/{index}/peer_stats": "Per peer stats",
                    // This is kind of not secure as it just reads any local file that it has access to,
                    // or any URL, but whatever, ok for our purposes / threat model.
-                    "POST /torrents": "Add a torrent here. magnet: or http:// or a local file."
+                    "POST /torrents": "Add a torrent here. magnet: or http:// or a local file.",
+                    "GET /web/": "Web UI",
                },
                "server": "rqbit",
            }))
@ -75,10 +79,14 @@ impl HttpApi {
        async fn torrents_post(
            State(state): State<ApiState>,
            Query(params): Query<TorrentAddQueryParams>,
-            url: String,
+            data: Bytes,
        ) -> Result<impl IntoResponse> {
            let opts = params.into_add_torrent_options();
-            state.api_add_torrent(url, Some(opts)).await.map(axum::Json)
+            let add = match String::from_utf8(data.to_vec()) {
+                Ok(s) => AddTorrent::from(s),
+                Err(e) => AddTorrent::from(e.into_bytes()),
+            };
+            state.api_add_torrent(add, Some(opts)).await.map(axum::Json)
        }

        async fn torrent_details(
@ -110,7 +118,8 @@ impl HttpApi {
            state.api_peer_stats(idx, filter).map(axum::Json)
        }

-        let app = Router::new()
+        #[allow(unused_mut)]
+        let mut app = Router::new()
            .route("/", get(api_root))
            .route("/dht/stats", get(dht_stats))
            .route("/dht/table", get(dht_table))
@ -118,13 +127,55 @@ impl HttpApi {
            .route("/torrents/:id", get(torrent_details))
            .route("/torrents/:id/haves", get(torrent_haves))
            .route("/torrents/:id/stats", get(torrent_stats))
-            .route("/torrents/:id/peer_stats", get(peer_stats))
-            .with_state(state);
+            .route("/torrents/:id/peer_stats", get(peer_stats));
+
+        #[cfg(feature = "webui")]
+        {
+            let webui_router = Router::new()
+                .route(
+                    "/",
+                    get(|| async {
+                        (
+                            [("Content-Type", "text/html")],
+                            include_str!("../webui/dist/index.html"),
+                        )
+                    }),
+                )
+                .route(
+                    "/app.js",
+                    get(|| async {
+                        (
+                            [("Content-Type", "application/javascript")],
+                            include_str!("../webui/dist/app.js"),
+                        )
+                    }),
+                );
+
+            // This is to develop webui by just doing "open index.html && tsc --watch"
+            let cors_layer = std::env::var("CORS_DEBUG")
+                .ok()
+                .map(|_| {
+                    use tower_http::cors::{AllowHeaders, AllowOrigin};
+
+                    warn!("CorsLayer: allowing everything because CORS_DEBUG is set");
+                    tower_http::cors::CorsLayer::default()
+                        .allow_origin(AllowOrigin::predicate(|_, _| true))
+                        .allow_headers(AllowHeaders::any())
+                })
+                .unwrap_or_default();
+
+            app = app.nest("/web/", webui_router).layer(cors_layer);
+        }
+
+        let app = app
+            .layer(tower_http::trace::TraceLayer::new_for_http())
+            .with_state(state)
+            .into_make_service();

        info!("starting HTTP server on {}", addr);
        axum::Server::try_bind(&addr)
            .with_context(|| format!("error binding to {addr}"))?
-            .serve(app.into_make_service())
+            .serve(app)
            .await?;
        Ok(())
    }
@ -177,13 +228,33 @@ pub struct TorrentDetailsResponse {
    pub files: Vec<TorrentDetailsResponseFile>,
 }

+struct DurationWithHumanReadable(Duration);
+
+impl Serialize for DurationWithHumanReadable {
+    fn serialize<S>(&self, serializer: S) -> core::result::Result<S::Ok, S::Error>
+    where
+        S: serde::Serializer,
+    {
+        #[derive(Serialize)]
+        struct Tmp {
+            duration: Duration,
+            human_readable: String,
+        }
+        Tmp {
+            duration: self.0,
+            human_readable: format!("{:?}", self.0),
+        }
+        .serialize(serializer)
+    }
+}
+
 #[derive(Serialize)]
 struct StatsResponse {
    snapshot: StatsSnapshot,
    average_piece_download_time: Option<Duration>,
    download_speed: Speed,
    all_time_download_speed: Speed,
-    time_remaining: Option<Duration>,
+    time_remaining: Option<DurationWithHumanReadable>,
 }

 #[derive(Serialize, Deserialize)]
@ -282,12 +353,12 @@ impl ApiInternal {

    pub async fn api_add_torrent(
        &self,
-        url: String,
+        add: AddTorrent<'_>,
        opts: Option<AddTorrentOptions>,
    ) -> Result<ApiAddTorrentResponse> {
        let response = match self
            .session
-            .add_torrent(&url, opts)
+            .add_torrent(add, opts)
            .await
            .context("error adding torrent")
            .with_error_status_code(StatusCode::BAD_REQUEST)?
@ -353,7 +424,7 @@ impl ApiInternal {
            snapshot,
            all_time_download_speed: (downloaded_mb / elapsed.as_secs_f64()).into(),
            download_speed: estimator.download_mbps().into(),
-            time_remaining: estimator.time_remaining(),
+            time_remaining: estimator.time_remaining().map(DurationWithHumanReadable),
        })
    }

--- a/crates/librqbit/src/session.rs
+++ b/crates/librqbit/src/session.rs
@ -1,4 +1,4 @@
-use std::{fs::File, io::Read, net::SocketAddr, path::PathBuf, time::Duration};
+use std::{borrow::Cow, fs::File, io::Read, net::SocketAddr, path::PathBuf, time::Duration};

 use anyhow::Context;
 use buffers::ByteString;
@ -141,6 +141,29 @@ pub enum AddTorrentResponse {
    Added(TorrentManagerHandle),
 }

+pub enum AddTorrent<'a> {
+    Url(Cow<'a, str>),
+    TorrentFileBytes(Vec<u8>),
+}
+
+impl<'a> From<&'a str> for AddTorrent<'a> {
+    fn from(s: &'a str) -> Self {
+        Self::Url(Cow::Borrowed(s))
+    }
+}
+
+impl<'a> From<String> for AddTorrent<'a> {
+    fn from(s: String) -> Self {
+        Self::Url(Cow::Owned(s))
+    }
+}
+
+impl<'a> From<Vec<u8>> for AddTorrent<'a> {
+    fn from(b: Vec<u8>) -> Self {
+        Self::TorrentFileBytes(b)
+    }
+}
+
 #[derive(Default)]
 pub struct SessionOptions {
    pub disable_dht: bool,
@ -193,99 +216,110 @@ impl Session {
    }
    pub async fn add_torrent(
        &self,
-        url: &str,
+        add: impl Into<AddTorrent<'_>>,
        opts: Option<AddTorrentOptions>,
    ) -> anyhow::Result<AddTorrentResponse> {
        // Magnet links are different in that we first need to discover the metadata.
        let opts = opts.unwrap_or_default();
-        if url.starts_with("magnet:") {
-            let Magnet {
-                info_hash,
-                trackers,
-            } = Magnet::parse(url).context("provided path is not a valid magnet URL")?;

-            let dht_rx = self
-                .dht
-                .as_ref()
-                .context("magnet links without DHT are not supported")?
-                .get_peers(info_hash)
-                .await?;
+        let (info_hash, info, dht_rx, trackers, initial_peers) = match add.into() {
+            AddTorrent::Url(magnet) if magnet.starts_with("magnet:") => {
+                let Magnet {
+                    info_hash,
+                    trackers,
+                } = Magnet::parse(&*magnet).context("provided path is not a valid magnet URL")?;

-            let trackers = trackers
-                .into_iter()
-                .filter_map(|url| match reqwest::Url::parse(&url) {
-                    Ok(url) => Some(url),
-                    Err(e) => {
-                        warn!("error parsing tracker {} as url: {}", url, e);
-                        None
-                    }
-                })
-                .collect();
+                let dht_rx = self
+                    .dht
+                    .as_ref()
+                    .context("magnet links without DHT are not supported")?
+                    .get_peers(info_hash)
+                    .await?;

-            let (info, dht_rx, initial_peers) = match read_metainfo_from_peer_receiver(
-                self.peer_id,
-                info_hash,
-                dht_rx,
-                Some(self.peer_opts),
-            )
-            .await
-            {
-                ReadMetainfoResult::Found { info, rx, seen } => (info, rx, seen),
-                ReadMetainfoResult::ChannelClosed { .. } => {
-                    anyhow::bail!("DHT died, no way to discover torrent metainfo")
-                }
-            };
-            self.main_torrent_info(
-                info_hash,
-                info,
-                Some(dht_rx),
-                initial_peers.into_iter().collect(),
-                trackers,
-                opts,
-            )
-            .await
-        } else {
-            let torrent = if url.starts_with("http://") || url.starts_with("https://") {
-                torrent_from_url(url).await?
-            } else {
-                torrent_from_file(url)?
-            };
-            let dht_rx = match self.dht.as_ref() {
-                Some(dht) => {
-                    debug!("reading peers for {:?} from DHT", torrent.info_hash);
-                    Some(dht.get_peers(torrent.info_hash).await?)
-                }
-                None => None,
-            };
-            let trackers = torrent
-                .iter_announce()
-                .filter_map(|tracker| {
-                    let url = match std::str::from_utf8(tracker.as_ref()) {
-                        Ok(url) => url,
-                        Err(_) => {
-                            warn!("cannot parse tracker url as utf-8, ignoring");
-                            return None;
-                        }
-                    };
-                    match Url::parse(url) {
+                let trackers = trackers
+                    .into_iter()
+                    .filter_map(|url| match reqwest::Url::parse(&url) {
                        Ok(url) => Some(url),
                        Err(e) => {
-                            warn!("cannot parse tracker URL {}: {}", url, e);
+                            warn!("error parsing tracker {} as url: {}", url, e);
                            None
                        }
+                    })
+                    .collect();
+
+                let (info, dht_rx, initial_peers) = match read_metainfo_from_peer_receiver(
+                    self.peer_id,
+                    info_hash,
+                    dht_rx,
+                    Some(self.peer_opts),
+                )
+                .await
+                {
+                    ReadMetainfoResult::Found { info, rx, seen } => (info, rx, seen),
+                    ReadMetainfoResult::ChannelClosed { .. } => {
+                        anyhow::bail!("DHT died, no way to discover torrent metainfo")
                    }
-                })
-                .collect::<Vec<_>>();
-            self.main_torrent_info(
-                torrent.info_hash,
-                torrent.info,
-                dht_rx,
-                Vec::new(),
-                trackers,
-                opts,
-            )
-            .await
-        }
+                };
+                (info_hash, info, Some(dht_rx), trackers, initial_peers)
+            }
+            other => {
+                let torrent = match other {
+                    AddTorrent::Url(url)
+                        if url.starts_with("http://") || url.starts_with("https://") =>
+                    {
+                        torrent_from_url(&*url).await?
+                    }
+                    AddTorrent::Url(filename) => torrent_from_file(&*filename)?,
+                    AddTorrent::TorrentFileBytes(bytes) => {
+                        torrent_from_bytes(&bytes).context("error decoding torrent")?
+                    }
+                };
+
+                let dht_rx = match self.dht.as_ref() {
+                    Some(dht) => {
+                        debug!("reading peers for {:?} from DHT", torrent.info_hash);
+                        Some(dht.get_peers(torrent.info_hash).await?)
+                    }
+                    None => None,
+                };
+                let trackers = torrent
+                    .iter_announce()
+                    .filter_map(|tracker| {
+                        let url = match std::str::from_utf8(tracker.as_ref()) {
+                            Ok(url) => url,
+                            Err(_) => {
+                                warn!("cannot parse tracker url as utf-8, ignoring");
+                                return None;
+                            }
+                        };
+                        match Url::parse(url) {
+                            Ok(url) => Some(url),
+                            Err(e) => {
+                                warn!("cannot parse tracker URL {}: {}", url, e);
+                                None
+                            }
+                        }
+                    })
+                    .collect::<Vec<_>>();
+                (
+                    torrent.info_hash,
+                    torrent.info,
+                    dht_rx,
+                    trackers,
+                    Default::default(),
+                )
+            }
+        };
+
+        self.main_torrent_info(
+            info_hash,
+            info,
+            dht_rx,
+            initial_peers.into_iter().collect(),
+            trackers,
+            opts,
+        )
+        .await
    }

    #[allow(clippy::too_many_arguments)]
--- a/crates/librqbit/src/torrent_state.rs
+++ b/crates/librqbit/src/torrent_state.rs
@ -1045,7 +1045,18 @@ impl PeerHandler {
        self.state
            .peers
            .with_live_mut(self.addr, "on_have", |live| {
-                live.bitfield.set(have as usize, true);
+                // If bitfield wasn't allocated yet, let's do it. Some clients send haves before bitfield.
+                if live.bitfield.is_empty() {
+                    live.bitfield =
+                        BF::from_vec(vec![0; self.state.lengths.piece_bitfield_bytes()]);
+                }
+                match live.bitfield.get_mut(have as usize) {
+                    Some(mut v) => *v = true,
+                    None => {
+                        warn!("received have {} out of range", have);
+                        return;
+                    }
+                };
                debug!("updated bitfield with have={}", have);
            });
    }
--- a/crates/librqbit/webui/.gitignore
+++ b/crates/librqbit/webui/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/crates/librqbit/webui/dist/app.js
+++ b/crates/librqbit/webui/dist/app.js
--- a/crates/librqbit/webui/index.html
+++ b/crates/librqbit/webui/index.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>rqbit web 0.0.1-alpha</title>
+	<!-- Include Bootstrap CSS -->
+	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+</head>
+
+<body>
+	<div id="app-container" class="container text-center">
+		<h1 class="mt-3 mb-4">rqbit web 0.0.1-alpha</h1>
+		<div id="output"></div>
+	</div>
+
+	<script type="module" src="src/index.tsx"></script>
+</body>
+
+</html>
--- a/crates/librqbit/webui/node_modules/.package-lock.json
+++ b/crates/librqbit/webui/node_modules/.package-lock.json
--- a/crates/librqbit/webui/node_modules/preact/LICENSE
+++ b/crates/librqbit/webui/node_modules/preact/LICENSE
@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present Jason Miller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/crates/librqbit/webui/node_modules/preact/README.md
+++ b/crates/librqbit/webui/node_modules/preact/README.md
@ -0,0 +1,190 @@
+<p align="center">
+<a href="https://preactjs.com" target="_blank">
+
+![Preact](https://raw.githubusercontent.com/preactjs/preact/8b0bcc927995c188eca83cba30fbc83491cc0b2f/logo.svg?sanitize=true 'Preact')
+
+</a>
+</p>
+<p align="center">Fast <b>3kB</b> alternative to React with the same modern API.</p>
+
+**All the power of Virtual DOM components, without the overhead:**
+
+- Familiar React API & patterns: ES6 Class, hooks, and Functional Components
+- Extensive React compatibility via a simple [preact/compat] alias
+- Everything you need: JSX, <abbr title="Virtual DOM">VDOM</abbr>, [DevTools], <abbr title="Hot Module Replacement">HMR</abbr>, <abbr title="Server-Side Rendering">SSR</abbr>.
+- Highly optimized diff algorithm and seamless hydration from Server Side Rendering
+- Supports all modern browsers and IE11
+- Transparent asynchronous rendering with a pluggable scheduler
+
+### 💁 More information at the [Preact Website ➞](https://preactjs.com)
+
+<table border="0">
+<tbody>
+<tr>
+<td>
+
+[![npm](https://img.shields.io/npm/v/preact.svg)](http://npm.im/preact)
+[![Preact Slack Community](https://img.shields.io/badge/Slack%20Community-preact.slack.com-blue)](https://chat.preactjs.com)
+[![OpenCollective Backers](https://opencollective.com/preact/backers/badge.svg)](#backers)
+[![OpenCollective Sponsors](https://opencollective.com/preact/sponsors/badge.svg)](#sponsors)
+
+[![coveralls](https://img.shields.io/coveralls/preactjs/preact/main.svg)](https://coveralls.io/github/preactjs/preact)
+[![gzip size](http://img.badgesize.io/https://unpkg.com/preact/dist/preact.min.js?compression=gzip&label=gzip)](https://unpkg.com/preact/dist/preact.min.js)
+[![brotli size](http://img.badgesize.io/https://unpkg.com/preact/dist/preact.min.js?compression=brotli&label=brotli)](https://unpkg.com/preact/dist/preact.min.js)
+
+</td>
+<td>
+
+<img src="https://saucelabs.com/browser-matrix/preact.svg" title="Browser support matrix">
+
+</td>
+</tr>
+</tbody>
+</table>
+
+You can find some awesome libraries in the [awesome-preact list](https://github.com/preactjs/awesome-preact) :sunglasses:
+
+---
+
+## Getting Started
+
+> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_
+
+#### Tutorial: Building UI with Preact
+
+With Preact, you create user interfaces by assembling trees of components and elements. Components are functions or classes that return a description of what their tree should output. These descriptions are typically written in [JSX](https://facebook.github.io/jsx/) (shown underneath), or [HTM](https://github.com/developit/htm) which leverages standard JavaScript Tagged Templates. Both syntaxes can express trees of elements with "props" (similar to HTML attributes) and children.
+
+To get started using Preact, first look at the render() function. This function accepts a tree description and creates the structure described. Next, it appends this structure to a parent DOM element provided as the second argument. Future calls to render() will reuse the existing tree and update it in-place in the DOM. Internally, render() will calculate the difference from previous outputted structures in an attempt to perform as few DOM operations as possible.
+
+```js
+import { h, render } from 'preact';
+// Tells babel to use h for JSX. It's better to configure this globally.
+// See https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#usage
+// In tsconfig you can specify this with the jsxFactory
+/** @jsx h */
+
+// create our tree and append it to document.body:
+render(
+	<main>
+		<h1>Hello</h1>
+	</main>,
+	document.body
+);
+
+// update the tree in-place:
+render(
+	<main>
+		<h1>Hello World!</h1>
+	</main>,
+	document.body
+);
+// ^ this second invocation of render(...) will use a single DOM call to update the text of the <h1>
+```
+
+Hooray! render() has taken our structure and output a User Interface! This approach demonstrates a simple case, but would be difficult to use as an application grows in complexity. Each change would be forced to calculate the difference between the current and updated structure for the entire application. Components can help here – by dividing the User Interface into nested Components each can calculate their difference from their mounted point. Here's an example:
+
+```js
+import { render, h } from 'preact';
+import { useState } from 'preact/hooks';
+
+/** @jsx h */
+
+const App = () => {
+	const [input, setInput] = useState('');
+
+	return (
+		<div>
+			<p>Do you agree to the statement: "Preact is awesome"?</p>
+			<input value={input} onInput={e => setInput(e.target.value)} />
+		</div>
+	);
+};
+
+render(<App />, document.body);
+```
+
+---
+
+## Sponsors
+
+Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]
+
+<a href="https://opencollective.com/preact/sponsor/0/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/0/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/1/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/1/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/2/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/2/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/3/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/3/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/4/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/4/avatar.svg"></a>
+<a href="https://snyk.co/preact" target="_blank"><img src="https://res.cloudinary.com/snyk/image/upload/snyk-marketingui/brand-logos/wordmark-logo-color.svg" width="192" height="64"></a>
+<a href="https://opencollective.com/preact/sponsor/5/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/5/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/6/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/6/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/7/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/7/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/8/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/8/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/9/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/9/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/10/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/10/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/11/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/11/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/12/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/12/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/13/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/13/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/14/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/14/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/15/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/15/avatar.svg"></a>
+<a href="https://github.com/guardian" target="_blank"> &nbsp; &nbsp; &nbsp; <img src="https://github.com/guardian.png" width="64" height="64"> &nbsp; &nbsp; &nbsp; </a>
+<a href="https://opencollective.com/preact/sponsor/16/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/16/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/17/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/17/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/18/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/18/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/19/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/19/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/20/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/20/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/21/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/21/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/22/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/22/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/23/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/23/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/24/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/24/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/25/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/25/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/26/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/26/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/27/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/27/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/28/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/28/avatar.svg"></a>
+<a href="https://opencollective.com/preact/sponsor/29/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/29/avatar.svg"></a>
+
+## Backers
+
+Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/preact#backer)]
+
+<a href="https://opencollective.com/preact/backer/0/website" target="_blank"><img src="https://opencollective.com/preact/backer/0/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/1/website" target="_blank"><img src="https://opencollective.com/preact/backer/1/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/2/website" target="_blank"><img src="https://opencollective.com/preact/backer/2/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/3/website" target="_blank"><img src="https://opencollective.com/preact/backer/3/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/4/website" target="_blank"><img src="https://opencollective.com/preact/backer/4/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/5/website" target="_blank"><img src="https://opencollective.com/preact/backer/5/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/6/website" target="_blank"><img src="https://opencollective.com/preact/backer/6/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/7/website" target="_blank"><img src="https://opencollective.com/preact/backer/7/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/8/website" target="_blank"><img src="https://opencollective.com/preact/backer/8/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/9/website" target="_blank"><img src="https://opencollective.com/preact/backer/9/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/10/website" target="_blank"><img src="https://opencollective.com/preact/backer/10/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/11/website" target="_blank"><img src="https://opencollective.com/preact/backer/11/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/12/website" target="_blank"><img src="https://opencollective.com/preact/backer/12/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/13/website" target="_blank"><img src="https://opencollective.com/preact/backer/13/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/14/website" target="_blank"><img src="https://opencollective.com/preact/backer/14/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/15/website" target="_blank"><img src="https://opencollective.com/preact/backer/15/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/16/website" target="_blank"><img src="https://opencollective.com/preact/backer/16/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/17/website" target="_blank"><img src="https://opencollective.com/preact/backer/17/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/18/website" target="_blank"><img src="https://opencollective.com/preact/backer/18/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/19/website" target="_blank"><img src="https://opencollective.com/preact/backer/19/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/20/website" target="_blank"><img src="https://opencollective.com/preact/backer/20/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/21/website" target="_blank"><img src="https://opencollective.com/preact/backer/21/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/22/website" target="_blank"><img src="https://opencollective.com/preact/backer/22/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/23/website" target="_blank"><img src="https://opencollective.com/preact/backer/23/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/24/website" target="_blank"><img src="https://opencollective.com/preact/backer/24/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/25/website" target="_blank"><img src="https://opencollective.com/preact/backer/25/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/26/website" target="_blank"><img src="https://opencollective.com/preact/backer/26/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/27/website" target="_blank"><img src="https://opencollective.com/preact/backer/27/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/28/website" target="_blank"><img src="https://opencollective.com/preact/backer/28/avatar.svg"></a>
+<a href="https://opencollective.com/preact/backer/29/website" target="_blank"><img src="https://opencollective.com/preact/backer/29/avatar.svg"></a>
+
+---
+
+## License
+
+MIT
+
+[![Preact](https://i.imgur.com/YqCHvEW.gif)](https://preactjs.com)
+
+[preact/compat]: https://github.com/preactjs/preact/tree/main/compat
+[hyperscript]: https://github.com/dominictarr/hyperscript
+[DevTools]: https://github.com/preactjs/preact-devtools
--- a/crates/librqbit/webui/node_modules/preact/compat/LICENSE
+++ b/crates/librqbit/webui/node_modules/preact/compat/LICENSE
@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present Jason Miller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/crates/librqbit/webui/node_modules/preact/compat/client.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/client.js
@ -0,0 +1,19 @@
+const { render, hydrate, unmountComponentAtNode } = require('preact/compat');
+
+function createRoot(container) {
+	return {
+		render(children) {
+			render(children, container);
+		},
+		unmount() {
+			unmountComponentAtNode(container);
+		}
+	};
+}
+
+exports.createRoot = createRoot;
+
+exports.hydrateRoot = function (container, children) {
+	hydrate(children, container);
+	return createRoot(container);
+};
--- a/crates/librqbit/webui/node_modules/preact/compat/client.mjs
+++ b/crates/librqbit/webui/node_modules/preact/compat/client.mjs
@ -0,0 +1,22 @@
+import { render, hydrate, unmountComponentAtNode } from 'preact/compat';
+
+export function createRoot(container) {
+	return {
+		render(children) {
+			render(children, container);
+		},
+		unmount() {
+			unmountComponentAtNode(container);
+		}
+	};
+}
+
+export function hydrateRoot(container, children) {
+	hydrate(children, container);
+	return createRoot(container);
+}
+
+export default {
+	createRoot,
+	hydrateRoot
+};
--- a/crates/librqbit/webui/node_modules/preact/compat/dist/compat.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/dist/compat.js
--- a/crates/librqbit/webui/node_modules/preact/compat/dist/compat.js.map
+++ b/crates/librqbit/webui/node_modules/preact/compat/dist/compat.js.map
--- a/crates/librqbit/webui/node_modules/preact/compat/dist/compat.mjs
+++ b/crates/librqbit/webui/node_modules/preact/compat/dist/compat.mjs
--- a/crates/librqbit/webui/node_modules/preact/compat/dist/compat.module.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/dist/compat.module.js
--- a/crates/librqbit/webui/node_modules/preact/compat/dist/compat.module.js.map
+++ b/crates/librqbit/webui/node_modules/preact/compat/dist/compat.module.js.map
--- a/crates/librqbit/webui/node_modules/preact/compat/dist/compat.umd.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/dist/compat.umd.js
--- a/crates/librqbit/webui/node_modules/preact/compat/dist/compat.umd.js.map
+++ b/crates/librqbit/webui/node_modules/preact/compat/dist/compat.umd.js.map
--- a/crates/librqbit/webui/node_modules/preact/compat/jsx-dev-runtime.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/jsx-dev-runtime.js
@ -0,0 +1,3 @@
+require('preact/compat');
+
+module.exports = require('preact/jsx-runtime');
--- a/crates/librqbit/webui/node_modules/preact/compat/jsx-dev-runtime.mjs
+++ b/crates/librqbit/webui/node_modules/preact/compat/jsx-dev-runtime.mjs
@ -0,0 +1,3 @@
+import 'preact/compat';
+
+export * from 'preact/jsx-runtime';
--- a/crates/librqbit/webui/node_modules/preact/compat/jsx-runtime.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/jsx-runtime.js
@ -0,0 +1,3 @@
+require('preact/compat');
+
+module.exports = require('preact/jsx-runtime');
--- a/crates/librqbit/webui/node_modules/preact/compat/jsx-runtime.mjs
+++ b/crates/librqbit/webui/node_modules/preact/compat/jsx-runtime.mjs
@ -0,0 +1,3 @@
+import 'preact/compat';
+
+export * from 'preact/jsx-runtime';
--- a/crates/librqbit/webui/node_modules/preact/compat/package.json
+++ b/crates/librqbit/webui/node_modules/preact/compat/package.json
@ -0,0 +1,50 @@
+{
+  "name": "preact-compat",
+  "amdName": "preactCompat",
+  "version": "4.0.0",
+  "private": true,
+  "description": "A React compatibility layer for Preact",
+  "main": "dist/compat.js",
+  "module": "dist/compat.module.js",
+  "umd:main": "dist/compat.umd.js",
+  "source": "src/index.js",
+  "types": "src/index.d.ts",
+  "license": "MIT",
+  "mangle": {
+    "regex": "^_"
+  },
+  "peerDependencies": {
+    "preact": "^10.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "browser": "./dist/compat.module.js",
+      "umd": "./dist/compat.umd.js",
+      "import": "./dist/compat.mjs",
+      "require": "./dist/compat.js"
+    },
+    "./client": {
+      "import": "./client.mjs",
+      "require": "./client.js"
+    },
+    "./server": {
+      "browser": "./server.browser.js",
+      "import": "./server.mjs",
+      "require": "./server.js"
+    },
+    "./jsx-runtime": {
+      "import": "./jsx-runtime.mjs",
+      "require": "./jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "import": "./jsx-dev-runtime.mjs",
+      "require": "./jsx-dev-runtime.js"
+    },
+    "./scheduler": {
+      "import": "./scheduler.mjs",
+      "require": "./scheduler.js"
+    },
+    "./package.json": "./package.json"
+  }
+}
--- a/crates/librqbit/webui/node_modules/preact/compat/scheduler.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/scheduler.js
@ -0,0 +1,15 @@
+// see scheduler.mjs
+
+function unstable_runWithPriority(priority, callback) {
+	return callback();
+}
+
+module.exports = {
+	unstable_ImmediatePriority: 1,
+	unstable_UserBlockingPriority: 2,
+	unstable_NormalPriority: 3,
+	unstable_LowPriority: 4,
+	unstable_IdlePriority: 5,
+	unstable_runWithPriority,
+	unstable_now: performance.now.bind(performance)
+};
--- a/crates/librqbit/webui/node_modules/preact/compat/scheduler.mjs
+++ b/crates/librqbit/webui/node_modules/preact/compat/scheduler.mjs
@ -0,0 +1,23 @@
+/* eslint-disable */
+
+// This file includes experimental React APIs exported from the "scheduler"
+// npm package. Despite being explicitely marked as unstable some libraries
+// already make use of them. This file is not a full replacement for the
+// scheduler package, but includes the necessary shims to make those libraries
+// work with Preact.
+
+export var unstable_ImmediatePriority = 1;
+export var unstable_UserBlockingPriority = 2;
+export var unstable_NormalPriority = 3;
+export var unstable_LowPriority = 4;
+export var unstable_IdlePriority = 5;
+
+/**
+ * @param {number} priority
+ * @param {() => void} callback
+ */
+export function unstable_runWithPriority(priority, callback) {
+	return callback();
+}
+
+export var unstable_now = performance.now.bind(performance);
--- a/crates/librqbit/webui/node_modules/preact/compat/server.browser.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/server.browser.js
@ -0,0 +1,11 @@
+import { renderToString } from 'preact-render-to-string';
+
+export {
+	renderToString,
+	renderToString as renderToStaticMarkup
+} from 'preact-render-to-string';
+
+export default {
+	renderToString,
+	renderToStaticMarkup: renderToString
+};
--- a/crates/librqbit/webui/node_modules/preact/compat/server.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/server.js
@ -0,0 +1,15 @@
+/* eslint-disable */
+var renderToString;
+try {
+	const mod = require('preact-render-to-string');
+	renderToString = mod.default || mod.renderToString || mod;
+} catch (e) {
+	throw Error(
+		'renderToString() error: missing "preact-render-to-string" dependency.'
+	);
+}
+
+module.exports = {
+	renderToString: renderToString,
+	renderToStaticMarkup: renderToString
+};
--- a/crates/librqbit/webui/node_modules/preact/compat/server.mjs
+++ b/crates/librqbit/webui/node_modules/preact/compat/server.mjs
@ -0,0 +1,11 @@
+import { renderToString } from 'preact-render-to-string';
+
+export {
+	renderToString,
+	renderToString as renderToStaticMarkup
+} from 'preact-render-to-string';
+
+export default {
+	renderToString,
+	renderToStaticMarkup: renderToString
+};
--- a/crates/librqbit/webui/node_modules/preact/compat/src/Children.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/src/Children.js
@ -0,0 +1,21 @@
+import { toChildArray } from 'preact';
+
+const mapFn = (children, fn) => {
+	if (children == null) return null;
+	return toChildArray(toChildArray(children).map(fn));
+};
+
+// This API is completely unnecessary for Preact, so it's basically passthrough.
+export const Children = {
+	map: mapFn,
+	forEach: mapFn,
+	count(children) {
+		return children ? toChildArray(children).length : 0;
+	},
+	only(children) {
+		const normalized = toChildArray(children);
+		if (normalized.length !== 1) throw 'Children.only';
+		return normalized[0];
+	},
+	toArray: toChildArray
+};
--- a/crates/librqbit/webui/node_modules/preact/compat/src/PureComponent.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/src/PureComponent.js
@ -0,0 +1,15 @@
+import { Component } from 'preact';
+import { shallowDiffers } from './util';
+
+/**
+ * Component class with a predefined `shouldComponentUpdate` implementation
+ */
+export function PureComponent(p) {
+	this.props = p;
+}
+PureComponent.prototype = new Component();
+// Some third-party libraries check if this property is present
+PureComponent.prototype.isPureReactComponent = true;
+PureComponent.prototype.shouldComponentUpdate = function (props, state) {
+	return shallowDiffers(this.props, props) || shallowDiffers(this.state, state);
+};
--- a/crates/librqbit/webui/node_modules/preact/compat/src/forwardRef.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/src/forwardRef.js
@ -0,0 +1,44 @@
+import { options } from 'preact';
+import { assign } from './util';
+
+let oldDiffHook = options._diff;
+options._diff = vnode => {
+	if (vnode.type && vnode.type._forwarded && vnode.ref) {
+		vnode.props.ref = vnode.ref;
+		vnode.ref = null;
+	}
+	if (oldDiffHook) oldDiffHook(vnode);
+};
+
+export const REACT_FORWARD_SYMBOL =
+	(typeof Symbol != 'undefined' &&
+		Symbol.for &&
+		Symbol.for('react.forward_ref')) ||
+	0xf47;
+
+/**
+ * Pass ref down to a child. This is mainly used in libraries with HOCs that
+ * wrap components. Using `forwardRef` there is an easy way to get a reference
+ * of the wrapped component instead of one of the wrapper itself.
+ * @param {import('./index').ForwardFn} fn
+ * @returns {import('./internal').FunctionComponent}
+ */
+export function forwardRef(fn) {
+	function Forwarded(props) {
+		let clone = assign({}, props);
+		delete clone.ref;
+		return fn(clone, props.ref || null);
+	}
+
+	// mobx-react checks for this being present
+	Forwarded.$$typeof = REACT_FORWARD_SYMBOL;
+	// mobx-react heavily relies on implementation details.
+	// It expects an object here with a `render` property,
+	// and prototype.render will fail. Without this
+	// mobx-react throws.
+	Forwarded.render = Forwarded;
+
+	Forwarded.prototype.isReactComponent = Forwarded._forwarded = true;
+	Forwarded.displayName = 'ForwardRef(' + (fn.displayName || fn.name) + ')';
+	return Forwarded;
+}
--- a/crates/librqbit/webui/node_modules/preact/compat/src/index.d.ts
+++ b/crates/librqbit/webui/node_modules/preact/compat/src/index.d.ts
@ -0,0 +1,208 @@
+import * as _hooks from '../../hooks';
+import * as preact from '../../src';
+import { JSXInternal } from '../../src/jsx';
+import * as _Suspense from './suspense';
+import * as _SuspenseList from './suspense-list';
+
+// export default React;
+export = React;
+export as namespace React;
+declare namespace React {
+	// Export JSX
+	export import JSX = JSXInternal;
+
+	// Hooks
+	export import CreateHandle = _hooks.CreateHandle;
+	export import EffectCallback = _hooks.EffectCallback;
+	export import Inputs = _hooks.Inputs;
+	export import PropRef = _hooks.PropRef;
+	export import Reducer = _hooks.Reducer;
+	export import Dispatch = _hooks.Dispatch;
+	export import Ref = _hooks.Ref;
+	export import SetStateAction = _hooks.StateUpdater;
+	export import useCallback = _hooks.useCallback;
+	export import useContext = _hooks.useContext;
+	export import useDebugValue = _hooks.useDebugValue;
+	export import useEffect = _hooks.useEffect;
+	export import useImperativeHandle = _hooks.useImperativeHandle;
+	export import useId = _hooks.useId;
+	export import useLayoutEffect = _hooks.useLayoutEffect;
+	export import useMemo = _hooks.useMemo;
+	export import useReducer = _hooks.useReducer;
+	export import useRef = _hooks.useRef;
+	export import useState = _hooks.useState;
+	// React 18 hooks
+	export import useInsertionEffect = _hooks.useLayoutEffect;
+	export function useTransition(): [false, typeof startTransition];
+	export function useDeferredValue<T = any>(val: T): T;
+	export function useSyncExternalStore<T>(
+		subscribe: (flush: () => void) => () => void,
+		getSnapshot: () => T
+	): T;
+
+	// Preact Defaults
+	export import Context = preact.Context;
+	export import ContextType = preact.ContextType;
+	export import RefObject = preact.RefObject;
+	export import Component = preact.Component;
+	export import FunctionComponent = preact.FunctionComponent;
+	export import FC = preact.FunctionComponent;
+	export import createContext = preact.createContext;
+	export import createRef = preact.createRef;
+	export import Fragment = preact.Fragment;
+	export import createElement = preact.createElement;
+	export import cloneElement = preact.cloneElement;
+	export import ComponentProps = preact.ComponentProps;
+	export import ReactNode = preact.ComponentChild;
+
+	// Suspense
+	export import Suspense = _Suspense.Suspense;
+	export import lazy = _Suspense.lazy;
+	export import SuspenseList = _SuspenseList.SuspenseList;
+
+	// Compat
+	export import StrictMode = preact.Fragment;
+	export const version: string;
+	export function startTransition(cb: () => void): void;
+
+	// HTML
+	export interface HTMLAttributes<T extends EventTarget>
+		extends JSXInternal.HTMLAttributes<T> {}
+	export interface HTMLProps<T extends EventTarget>
+		extends JSXInternal.HTMLAttributes<T>,
+			preact.ClassAttributes<T> {}
+	export import DetailedHTMLProps = JSXInternal.DetailedHTMLProps;
+	export import CSSProperties = JSXInternal.CSSProperties;
+	export interface SVGProps<T extends EventTarget>
+		extends JSXInternal.SVGAttributes<T>,
+			preact.ClassAttributes<T> {}
+
+	// Events
+	export import TargetedEvent = JSXInternal.TargetedEvent;
+	export import ChangeEvent = JSXInternal.TargetedEvent;
+	export import ChangeEventHandler = JSXInternal.GenericEventHandler;
+
+	export function createPortal(
+		vnode: preact.VNode,
+		container: preact.ContainerNode
+	): preact.VNode<any>;
+
+	export function render(
+		vnode: preact.VNode<any>,
+		parent: preact.ContainerNode,
+		callback?: () => void
+	): Component | null;
+
+	export function hydrate(
+		vnode: preact.VNode<any>,
+		parent: preact.ContainerNode,
+		callback?: () => void
+	): Component | null;
+
+	export function unmountComponentAtNode(
+		container: preact.ContainerNode
+	): boolean;
+
+	export function createFactory(
+		type: preact.VNode<any>['type']
+	): (
+		props?: any,
+		...children: preact.ComponentChildren[]
+	) => preact.VNode<any>;
+	export function isValidElement(element: any): boolean;
+	export function isFragment(element: any): boolean;
+	export function findDOMNode(
+		component: preact.Component | Element
+	): Element | null;
+
+	export abstract class PureComponent<P = {}, S = {}, SS = any> extends preact.Component<
+		P,
+		S
+	> {
+		isPureReactComponent: boolean;
+	}
+
+	export type MemoExoticComponent<C extends preact.FunctionalComponent<any>> =
+		preact.FunctionComponent<ComponentProps<C>> & {
+			readonly type: C;
+		};
+
+	export function memo<P = {}>(
+		component: preact.FunctionalComponent<P>,
+		comparer?: (prev: P, next: P) => boolean
+	): preact.FunctionComponent<P>;
+	export function memo<C extends preact.FunctionalComponent<any>>(
+		component: C,
+		comparer?: (
+			prev: preact.ComponentProps<C>,
+			next: preact.ComponentProps<C>
+		) => boolean
+	): C;
+
+	export interface RefAttributes<R> extends preact.Attributes {
+		ref?: preact.Ref<R> | undefined;
+	}
+
+	export interface ForwardFn<P = {}, T = any> {
+		(props: P, ref: ForwardedRef<T>): preact.ComponentChild;
+		displayName?: string;
+	}
+
+	export interface ForwardRefExoticComponent<P>
+		extends preact.FunctionComponent<P> {
+		defaultProps?: Partial<P> | undefined;
+	}
+
+	export function forwardRef<R, P = {}>(
+		fn: ForwardFn<P, R>
+	): preact.FunctionalComponent<PropsWithoutRef<P> & { ref?: preact.Ref<R> }>;
+
+	export type PropsWithoutRef<P> = Omit<P, 'ref'>;
+
+	interface MutableRefObject<T> {
+		current: T;
+	}
+
+	export type ForwardedRef<T> =
+		| ((instance: T | null) => void)
+		| MutableRefObject<T | null>
+		| null;
+
+	export function flushSync<R>(fn: () => R): R;
+	export function flushSync<A, R>(fn: (a: A) => R, a: A): R;
+
+	export function unstable_batchedUpdates(
+		callback: (arg?: any) => void,
+		arg?: any
+	): void;
+
+	export type PropsWithChildren<P = unknown> = P & {
+		children?: preact.ComponentChild | undefined;
+	};
+
+	export const Children: {
+		map<T extends preact.ComponentChild, R>(
+			children: T | T[],
+			fn: (child: T, i: number) => R
+		): R[];
+		forEach<T extends preact.ComponentChild>(
+			children: T | T[],
+			fn: (child: T, i: number) => void
+		): void;
+		count: (children: preact.ComponentChildren) => number;
+		only: (children: preact.ComponentChildren) => preact.ComponentChild;
+		toArray: (children: preact.ComponentChildren) => preact.VNode<{}>[];
+	};
+
+	// scheduler
+	export const unstable_ImmediatePriority: number;
+	export const unstable_UserBlockingPriority: number;
+	export const unstable_NormalPriority: number;
+	export const unstable_LowPriority: number;
+	export const unstable_IdlePriority: number;
+	export function unstable_runWithPriority(
+		priority: number,
+		callback: () => void
+	): void;
+	export const unstable_now: () => number;
+}
--- a/crates/librqbit/webui/node_modules/preact/compat/src/index.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/src/index.js
@ -0,0 +1,278 @@
+import {
+	createElement,
+	render as preactRender,
+	cloneElement as preactCloneElement,
+	createRef,
+	Component,
+	createContext,
+	Fragment
+} from 'preact';
+import {
+	useState,
+	useId,
+	useReducer,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useImperativeHandle,
+	useMemo,
+	useCallback,
+	useContext,
+	useDebugValue
+} from 'preact/hooks';
+import { PureComponent } from './PureComponent';
+import { memo } from './memo';
+import { forwardRef } from './forwardRef';
+import { Children } from './Children';
+import { Suspense, lazy } from './suspense';
+import { SuspenseList } from './suspense-list';
+import { createPortal } from './portals';
+import { is } from './util';
+import {
+	hydrate,
+	render,
+	REACT_ELEMENT_TYPE,
+	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+} from './render';
+
+const version = '17.0.2'; // trick libraries to think we are react
+
+/**
+ * Legacy version of createElement.
+ * @param {import('./internal').VNode["type"]} type The node name or Component constructor
+ */
+function createFactory(type) {
+	return createElement.bind(null, type);
+}
+
+/**
+ * Check if the passed element is a valid (p)react node.
+ * @param {*} element The element to check
+ * @returns {boolean}
+ */
+function isValidElement(element) {
+	return !!element && element.$$typeof === REACT_ELEMENT_TYPE;
+}
+
+/**
+ * Check if the passed element is a Fragment node.
+ * @param {*} element The element to check
+ * @returns {boolean}
+ */
+function isFragment(element) {
+	return isValidElement(element) && element.type === Fragment;
+}
+
+/**
+ * Wrap `cloneElement` to abort if the passed element is not a valid element and apply
+ * all vnode normalizations.
+ * @param {import('./internal').VNode} element The vnode to clone
+ * @param {object} props Props to add when cloning
+ * @param {Array<import('./internal').ComponentChildren>} rest Optional component children
+ */
+function cloneElement(element) {
+	if (!isValidElement(element)) return element;
+	return preactCloneElement.apply(null, arguments);
+}
+
+/**
+ * Remove a component tree from the DOM, including state and event handlers.
+ * @param {import('./internal').PreactElement} container
+ * @returns {boolean}
+ */
+function unmountComponentAtNode(container) {
+	if (container._children) {
+		preactRender(null, container);
+		return true;
+	}
+	return false;
+}
+
+/**
+ * Get the matching DOM node for a component
+ * @param {import('./internal').Component} component
+ * @returns {import('./internal').PreactElement | null}
+ */
+function findDOMNode(component) {
+	return (
+		(component &&
+			(component.base || (component.nodeType === 1 && component))) ||
+		null
+	);
+}
+
+/**
+ * Deprecated way to control batched rendering inside the reconciler, but we
+ * already schedule in batches inside our rendering code
+ * @template Arg
+ * @param {(arg: Arg) => void} callback function that triggers the updated
+ * @param {Arg} [arg] Optional argument that can be passed to the callback
+ */
+// eslint-disable-next-line camelcase
+const unstable_batchedUpdates = (callback, arg) => callback(arg);
+
+/**
+ * In React, `flushSync` flushes the entire tree and forces a rerender. It's
+ * implmented here as a no-op.
+ * @template Arg
+ * @template Result
+ * @param {(arg: Arg) => Result} callback function that runs before the flush
+ * @param {Arg} [arg] Optional argument that can be passed to the callback
+ * @returns
+ */
+const flushSync = (callback, arg) => callback(arg);
+
+/**
+ * Strict Mode is not implemented in Preact, so we provide a stand-in for it
+ * that just renders its children without imposing any restrictions.
+ */
+const StrictMode = Fragment;
+
+export function startTransition(cb) {
+	cb();
+}
+
+export function useDeferredValue(val) {
+	return val;
+}
+
+export function useTransition() {
+	return [false, startTransition];
+}
+
+// TODO: in theory this should be done after a VNode is diffed as we want to insert
+// styles/... before it attaches
+export const useInsertionEffect = useLayoutEffect;
+
+// compat to react-is
+export const isElement = isValidElement;
+
+/**
+ * This is taken from https://github.com/facebook/react/blob/main/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L84
+ * on a high level this cuts out the warnings, ... and attempts a smaller implementation
+ * @typedef {{ _value: any; _getSnapshot: () => any }} Store
+ */
+export function useSyncExternalStore(subscribe, getSnapshot) {
+	const value = getSnapshot();
+
+	/**
+	 * @typedef {{ _instance: Store }} StoreRef
+	 * @type {[StoreRef, (store: StoreRef) => void]}
+	 */
+	const [{ _instance }, forceUpdate] = useState({
+		_instance: { _value: value, _getSnapshot: getSnapshot }
+	});
+
+	useLayoutEffect(() => {
+		_instance._value = value;
+		_instance._getSnapshot = getSnapshot;
+
+		if (didSnapshotChange(_instance)) {
+			forceUpdate({ _instance });
+		}
+	}, [subscribe, value, getSnapshot]);
+
+	useEffect(() => {
+		if (didSnapshotChange(_instance)) {
+			forceUpdate({ _instance });
+		}
+
+		return subscribe(() => {
+			if (didSnapshotChange(_instance)) {
+				forceUpdate({ _instance });
+			}
+		});
+	}, [subscribe]);
+
+	return value;
+}
+
+/** @type {(inst: Store) => boolean} */
+function didSnapshotChange(inst) {
+	const latestGetSnapshot = inst._getSnapshot;
+	const prevValue = inst._value;
+	try {
+		const nextValue = latestGetSnapshot();
+		return !is(prevValue, nextValue);
+	} catch (error) {
+		return true;
+	}
+}
+
+export * from 'preact/hooks';
+export {
+	version,
+	Children,
+	render,
+	hydrate,
+	unmountComponentAtNode,
+	createPortal,
+	createElement,
+	createContext,
+	createFactory,
+	cloneElement,
+	createRef,
+	Fragment,
+	isValidElement,
+	isFragment,
+	findDOMNode,
+	Component,
+	PureComponent,
+	memo,
+	forwardRef,
+	flushSync,
+	// eslint-disable-next-line camelcase
+	unstable_batchedUpdates,
+	StrictMode,
+	Suspense,
+	SuspenseList,
+	lazy,
+	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+};
+
+// React copies the named exports to the default one.
+export default {
+	useState,
+	useId,
+	useReducer,
+	useEffect,
+	useLayoutEffect,
+	useInsertionEffect,
+	useTransition,
+	useDeferredValue,
+	useSyncExternalStore,
+	startTransition,
+	useRef,
+	useImperativeHandle,
+	useMemo,
+	useCallback,
+	useContext,
+	useDebugValue,
+	version,
+	Children,
+	render,
+	hydrate,
+	unmountComponentAtNode,
+	createPortal,
+	createElement,
+	createContext,
+	createFactory,
+	cloneElement,
+	createRef,
+	Fragment,
+	isValidElement,
+	isElement,
+	isFragment,
+	findDOMNode,
+	Component,
+	PureComponent,
+	memo,
+	forwardRef,
+	flushSync,
+	unstable_batchedUpdates,
+	StrictMode,
+	Suspense,
+	SuspenseList,
+	lazy,
+	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+};
--- a/crates/librqbit/webui/node_modules/preact/compat/src/internal.d.ts
+++ b/crates/librqbit/webui/node_modules/preact/compat/src/internal.d.ts
@ -0,0 +1,47 @@
+import {
+	Component as PreactComponent,
+	VNode as PreactVNode,
+	FunctionComponent as PreactFunctionComponent
+} from '../../src/internal';
+import { SuspenseProps } from './suspense';
+
+export { ComponentChildren } from '../..';
+
+export { PreactElement } from '../../src/internal';
+
+export interface Component<P = {}, S = {}> extends PreactComponent<P, S> {
+	isReactComponent?: object;
+	isPureReactComponent?: true;
+	_patchedLifecycles?: true;
+
+	// Suspense internal properties
+	_childDidSuspend?(error: Promise<void>, suspendingVNode: VNode): void;
+	_suspended: (vnode: VNode) => (unsuspend: () => void) => void;
+	_onResolve?(): void;
+
+	// Portal internal properties
+	_temp: any;
+	_container: PreactElement;
+}
+
+export interface FunctionComponent<P = {}> extends PreactFunctionComponent<P> {
+	shouldComponentUpdate?(nextProps: Readonly<P>): boolean;
+	_forwarded?: boolean;
+	_patchedLifecycles?: true;
+}
+
+export interface VNode<T = any> extends PreactVNode<T> {
+	$$typeof?: symbol | string;
+	preactCompatNormalized?: boolean;
+}
+
+export interface SuspenseState {
+	_suspended?: null | VNode<any>;
+}
+
+export interface SuspenseComponent
+	extends PreactComponent<SuspenseProps, SuspenseState> {
+	_pendingSuspensionCount: number;
+	_suspenders: Component[];
+	_detachOnNextRender: null | VNode<any>;
+}
--- a/crates/librqbit/webui/node_modules/preact/compat/src/memo.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/src/memo.js
@ -0,0 +1,34 @@
+import { createElement } from 'preact';
+import { shallowDiffers } from './util';
+
+/**
+ * Memoize a component, so that it only updates when the props actually have
+ * changed. This was previously known as `React.pure`.
+ * @param {import('./internal').FunctionComponent} c functional component
+ * @param {(prev: object, next: object) => boolean} [comparer] Custom equality function
+ * @returns {import('./internal').FunctionComponent}
+ */
+export function memo(c, comparer) {
+	function shouldUpdate(nextProps) {
+		let ref = this.props.ref;
+		let updateRef = ref == nextProps.ref;
+		if (!updateRef && ref) {
+			ref.call ? ref(null) : (ref.current = null);
+		}
+
+		if (!comparer) {
+			return shallowDiffers(this.props, nextProps);
+		}
+
+		return !comparer(this.props, nextProps) || !updateRef;
+	}
+
+	function Memoed(props) {
+		this.shouldComponentUpdate = shouldUpdate;
+		return createElement(c, props);
+	}
+	Memoed.displayName = 'Memo(' + (c.displayName || c.name) + ')';
+	Memoed.prototype.isReactComponent = true;
+	Memoed._forwarded = true;
+	return Memoed;
+}
--- a/crates/librqbit/webui/node_modules/preact/compat/src/portals.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/src/portals.js
@ -0,0 +1,73 @@
+import { createElement, render } from 'preact';
+
+/**
+ * @param {import('../../src/index').RenderableProps<{ context: any }>} props
+ */
+function ContextProvider(props) {
+	this.getChildContext = () => props.context;
+	return props.children;
+}
+
+/**
+ * Portal component
+ * @this {import('./internal').Component}
+ * @param {object | null | undefined} props
+ *
+ * TODO: use createRoot() instead of fake root
+ */
+function Portal(props) {
+	const _this = this;
+	let container = props._container;
+
+	_this.componentWillUnmount = function () {
+		render(null, _this._temp);
+		_this._temp = null;
+		_this._container = null;
+	};
+
+	// When we change container we should clear our old container and
+	// indicate a new mount.
+	if (_this._container && _this._container !== container) {
+		_this.componentWillUnmount();
+	}
+
+	if (!_this._temp) {
+		_this._container = container;
+
+		// Create a fake DOM parent node that manages a subset of `container`'s children:
+		_this._temp = {
+			nodeType: 1,
+			parentNode: container,
+			childNodes: [],
+			appendChild(child) {
+				this.childNodes.push(child);
+				_this._container.appendChild(child);
+			},
+			insertBefore(child, before) {
+				this.childNodes.push(child);
+				_this._container.appendChild(child);
+			},
+			removeChild(child) {
+				this.childNodes.splice(this.childNodes.indexOf(child) >>> 1, 1);
+				_this._container.removeChild(child);
+			}
+		};
+	}
+
+	// Render our wrapping element into temp.
+	render(
+		createElement(ContextProvider, { context: _this.context }, props._vnode),
+		_this._temp
+	);
+}
+
+/**
+ * Create a `Portal` to continue rendering the vnode tree at a different DOM node
+ * @param {import('./internal').VNode} vnode The vnode to render
+ * @param {import('./internal').PreactElement} container The DOM node to continue rendering in to.
+ */
+export function createPortal(vnode, container) {
+	const el = createElement(Portal, { _vnode: vnode, _container: container });
+	el.containerInfo = container;
+	return el;
+}
--- a/crates/librqbit/webui/node_modules/preact/compat/src/render.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/src/render.js
@ -0,0 +1,276 @@
+import {
+	render as preactRender,
+	hydrate as preactHydrate,
+	options,
+	toChildArray,
+	Component
+} from 'preact';
+
+export const REACT_ELEMENT_TYPE =
+	(typeof Symbol != 'undefined' && Symbol.for && Symbol.for('react.element')) ||
+	0xeac7;
+
+const CAMEL_PROPS =
+	/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/;
+const ON_ANI = /^on(Ani|Tra|Tou|BeforeInp|Compo)/;
+const CAMEL_REPLACE = /[A-Z0-9]/g;
+
+const IS_DOM = typeof document !== 'undefined';
+
+// Input types for which onchange should not be converted to oninput.
+// type="file|checkbox|radio", plus "range" in IE11.
+// (IE11 doesn't support Symbol, which we use here to turn `rad` into `ra` which matches "range")
+const onChangeInputType = type =>
+	(typeof Symbol != 'undefined' && typeof Symbol() == 'symbol'
+		? /fil|che|rad/
+		: /fil|che|ra/
+	).test(type);
+
+// Some libraries like `react-virtualized` explicitly check for this.
+Component.prototype.isReactComponent = {};
+
+// `UNSAFE_*` lifecycle hooks
+// Preact only ever invokes the unprefixed methods.
+// Here we provide a base "fallback" implementation that calls any defined UNSAFE_ prefixed method.
+// - If a component defines its own `componentDidMount()` (including via defineProperty), use that.
+// - If a component defines `UNSAFE_componentDidMount()`, `componentDidMount` is the alias getter/setter.
+// - If anything assigns to an `UNSAFE_*` property, the assignment is forwarded to the unprefixed property.
+// See https://github.com/preactjs/preact/issues/1941
+[
+	'componentWillMount',
+	'componentWillReceiveProps',
+	'componentWillUpdate'
+].forEach(key => {
+	Object.defineProperty(Component.prototype, key, {
+		configurable: true,
+		get() {
+			return this['UNSAFE_' + key];
+		},
+		set(v) {
+			Object.defineProperty(this, key, {
+				configurable: true,
+				writable: true,
+				value: v
+			});
+		}
+	});
+});
+
+/**
+ * Proxy render() since React returns a Component reference.
+ * @param {import('./internal').VNode} vnode VNode tree to render
+ * @param {import('./internal').PreactElement} parent DOM node to render vnode tree into
+ * @param {() => void} [callback] Optional callback that will be called after rendering
+ * @returns {import('./internal').Component | null} The root component reference or null
+ */
+export function render(vnode, parent, callback) {
+	// React destroys any existing DOM nodes, see #1727
+	// ...but only on the first render, see #1828
+	if (parent._children == null) {
+		parent.textContent = '';
+	}
+
+	preactRender(vnode, parent);
+	if (typeof callback == 'function') callback();
+
+	return vnode ? vnode._component : null;
+}
+
+export function hydrate(vnode, parent, callback) {
+	preactHydrate(vnode, parent);
+	if (typeof callback == 'function') callback();
+
+	return vnode ? vnode._component : null;
+}
+
+let oldEventHook = options.event;
+options.event = e => {
+	if (oldEventHook) e = oldEventHook(e);
+
+	e.persist = empty;
+	e.isPropagationStopped = isPropagationStopped;
+	e.isDefaultPrevented = isDefaultPrevented;
+	return (e.nativeEvent = e);
+};
+
+function empty() {}
+
+function isPropagationStopped() {
+	return this.cancelBubble;
+}
+
+function isDefaultPrevented() {
+	return this.defaultPrevented;
+}
+
+const classNameDescriptorNonEnumberable = {
+	enumerable: false,
+	configurable: true,
+	get() {
+		return this.class;
+	}
+};
+
+function handleDomVNode(vnode) {
+	let props = vnode.props,
+		type = vnode.type,
+		normalizedProps = {};
+
+	for (let i in props) {
+		let value = props[i];
+
+		if (
+			(i === 'value' && 'defaultValue' in props && value == null) ||
+			// Emulate React's behavior of not rendering the contents of noscript tags on the client.
+			(IS_DOM && i === 'children' && type === 'noscript') ||
+			i === 'class' ||
+			i === 'className'
+		) {
+			// Skip applying value if it is null/undefined and we already set
+			// a default value
+			continue;
+		}
+
+		let lowerCased = i.toLowerCase();
+		if (i === 'defaultValue' && 'value' in props && props.value == null) {
+			// `defaultValue` is treated as a fallback `value` when a value prop is present but null/undefined.
+			// `defaultValue` for Elements with no value prop is the same as the DOM defaultValue property.
+			i = 'value';
+		} else if (i === 'download' && value === true) {
+			// Calling `setAttribute` with a truthy value will lead to it being
+			// passed as a stringified value, e.g. `download="true"`. React
+			// converts it to an empty string instead, otherwise the attribute
+			// value will be used as the file name and the file will be called
+			// "true" upon downloading it.
+			value = '';
+		} else if (lowerCased === 'ondoubleclick') {
+			i = 'ondblclick';
+		} else if (
+			lowerCased === 'onchange' &&
+			(type === 'input' || type === 'textarea') &&
+			!onChangeInputType(props.type)
+		) {
+			lowerCased = i = 'oninput';
+		} else if (lowerCased === 'onfocus') {
+			i = 'onfocusin';
+		} else if (lowerCased === 'onblur') {
+			i = 'onfocusout';
+		} else if (ON_ANI.test(i)) {
+			i = lowerCased;
+		} else if (type.indexOf('-') === -1 && CAMEL_PROPS.test(i)) {
+			i = i.replace(CAMEL_REPLACE, '-$&').toLowerCase();
+		} else if (value === null) {
+			value = undefined;
+		}
+
+		// Add support for onInput and onChange, see #3561
+		// if we have an oninput prop already change it to oninputCapture
+		if (lowerCased === 'oninput') {
+			i = lowerCased;
+			if (normalizedProps[i]) {
+				i = 'oninputCapture';
+			}
+		}
+
+		normalizedProps[i] = value;
+	}
+
+	// Add support for array select values: <select multiple value={[]} />
+	if (
+		type == 'select' &&
+		normalizedProps.multiple &&
+		Array.isArray(normalizedProps.value)
+	) {
+		// forEach() always returns undefined, which we abuse here to unset the value prop.
+		normalizedProps.value = toChildArray(props.children).forEach(child => {
+			child.props.selected =
+				normalizedProps.value.indexOf(child.props.value) != -1;
+		});
+	}
+
+	// Adding support for defaultValue in select tag
+	if (type == 'select' && normalizedProps.defaultValue != null) {
+		normalizedProps.value = toChildArray(props.children).forEach(child => {
+			if (normalizedProps.multiple) {
+				child.props.selected =
+					normalizedProps.defaultValue.indexOf(child.props.value) != -1;
+			} else {
+				child.props.selected =
+					normalizedProps.defaultValue == child.props.value;
+			}
+		});
+	}
+
+	if (props.class && !props.className) {
+		normalizedProps.class = props.class;
+		Object.defineProperty(
+			normalizedProps,
+			'className',
+			classNameDescriptorNonEnumberable
+		);
+	} else if (props.className && !props.class) {
+		normalizedProps.class = normalizedProps.className = props.className;
+	} else if (props.class && props.className) {
+		normalizedProps.class = normalizedProps.className = props.className;
+	}
+
+	vnode.props = normalizedProps;
+}
+
+let oldVNodeHook = options.vnode;
+options.vnode = vnode => {
+	// only normalize props on Element nodes
+	if (typeof vnode.type === 'string') {
+		handleDomVNode(vnode);
+	}
+
+	vnode.$$typeof = REACT_ELEMENT_TYPE;
+
+	if (oldVNodeHook) oldVNodeHook(vnode);
+};
+
+// Only needed for react-relay
+let currentComponent;
+const oldBeforeRender = options._render;
+options._render = function (vnode) {
+	if (oldBeforeRender) {
+		oldBeforeRender(vnode);
+	}
+	currentComponent = vnode._component;
+};
+
+const oldDiffed = options.diffed;
+/** @type {(vnode: import('./internal').VNode) => void} */
+options.diffed = function (vnode) {
+	if (oldDiffed) {
+		oldDiffed(vnode);
+	}
+
+	const props = vnode.props;
+	const dom = vnode._dom;
+
+	if (
+		dom != null &&
+		vnode.type === 'textarea' &&
+		'value' in props &&
+		props.value !== dom.value
+	) {
+		dom.value = props.value == null ? '' : props.value;
+	}
+
+	currentComponent = null;
+};
+
+// This is a very very private internal function for React it
+// is used to sort-of do runtime dependency injection. So far
+// only `react-relay` makes use of it. It uses it to read the
+// context value.
+export const __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
+	ReactCurrentDispatcher: {
+		current: {
+			readContext(context) {
+				return currentComponent._globalContext[context._id].props.value;
+			}
+		}
+	}
+};
--- a/crates/librqbit/webui/node_modules/preact/compat/src/suspense-list.d.ts
+++ b/crates/librqbit/webui/node_modules/preact/compat/src/suspense-list.d.ts
@ -0,0 +1,14 @@
+import { Component, ComponentChild, ComponentChildren } from '../../src';
+
+//
+// SuspenseList
+// -----------------------------------
+
+export interface SuspenseListProps {
+	children?: ComponentChildren;
+	revealOrder?: 'forwards' | 'backwards' | 'together';
+}
+
+export class SuspenseList extends Component<SuspenseListProps> {
+	render(): ComponentChild;
+}
--- a/crates/librqbit/webui/node_modules/preact/compat/src/suspense-list.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/src/suspense-list.js
@ -0,0 +1,127 @@
+import { Component, toChildArray } from 'preact';
+import { suspended } from './suspense.js';
+
+// Indexes to linked list nodes (nodes are stored as arrays to save bytes).
+const SUSPENDED_COUNT = 0;
+const RESOLVED_COUNT = 1;
+const NEXT_NODE = 2;
+
+// Having custom inheritance instead of a class here saves a lot of bytes.
+export function SuspenseList() {
+	this._next = null;
+	this._map = null;
+}
+
+// Mark one of child's earlier suspensions as resolved.
+// Some pending callbacks may become callable due to this
+// (e.g. the last suspended descendant gets resolved when
+// revealOrder === 'together'). Process those callbacks as well.
+const resolve = (list, child, node) => {
+	if (++node[RESOLVED_COUNT] === node[SUSPENDED_COUNT]) {
+		// The number a child (or any of its descendants) has been suspended
+		// matches the number of times it's been resolved. Therefore we
+		// mark the child as completely resolved by deleting it from ._map.
+		// This is used to figure out when *all* children have been completely
+		// resolved when revealOrder is 'together'.
+		list._map.delete(child);
+	}
+
+	// If revealOrder is falsy then we can do an early exit, as the
+	// callbacks won't get queued in the node anyway.
+	// If revealOrder is 'together' then also do an early exit
+	// if all suspended descendants have not yet been resolved.
+	if (
+		!list.props.revealOrder ||
+		(list.props.revealOrder[0] === 't' && list._map.size)
+	) {
+		return;
+	}
+
+	// Walk the currently suspended children in order, calling their
+	// stored callbacks on the way. Stop if we encounter a child that
+	// has not been completely resolved yet.
+	node = list._next;
+	while (node) {
+		while (node.length > 3) {
+			node.pop()();
+		}
+		if (node[RESOLVED_COUNT] < node[SUSPENDED_COUNT]) {
+			break;
+		}
+		list._next = node = node[NEXT_NODE];
+	}
+};
+
+// Things we do here to save some bytes but are not proper JS inheritance:
+// - call `new Component()` as the prototype
+// - do not set `Suspense.prototype.constructor` to `Suspense`
+SuspenseList.prototype = new Component();
+
+SuspenseList.prototype._suspended = function (child) {
+	const list = this;
+	const delegated = suspended(list._vnode);
+
+	let node = list._map.get(child);
+	node[SUSPENDED_COUNT]++;
+
+	return unsuspend => {
+		const wrappedUnsuspend = () => {
+			if (!list.props.revealOrder) {
+				// Special case the undefined (falsy) revealOrder, as there
+				// is no need to coordinate a specific order or unsuspends.
+				unsuspend();
+			} else {
+				node.push(unsuspend);
+				resolve(list, child, node);
+			}
+		};
+		if (delegated) {
+			delegated(wrappedUnsuspend);
+		} else {
+			wrappedUnsuspend();
+		}
+	};
+};
+
+SuspenseList.prototype.render = function (props) {
+	this._next = null;
+	this._map = new Map();
+
+	const children = toChildArray(props.children);
+	if (props.revealOrder && props.revealOrder[0] === 'b') {
+		// If order === 'backwards' (or, well, anything starting with a 'b')
+		// then flip the child list around so that the last child will be
+		// the first in the linked list.
+		children.reverse();
+	}
+	// Build the linked list. Iterate through the children in reverse order
+	// so that `_next` points to the first linked list node to be resolved.
+	for (let i = children.length; i--; ) {
+		// Create a new linked list node as an array of form:
+		// 	[suspended_count, resolved_count, next_node]
+		// where suspended_count and resolved_count are numeric counters for
+		// keeping track how many times a node has been suspended and resolved.
+		//
+		// Note that suspended_count starts from 1 instead of 0, so we can block
+		// processing callbacks until componentDidMount has been called. In a sense
+		// node is suspended at least until componentDidMount gets called!
+		//
+		// Pending callbacks are added to the end of the node:
+		// 	[suspended_count, resolved_count, next_node, callback_0, callback_1, ...]
+		this._map.set(children[i], (this._next = [1, 0, this._next]));
+	}
+	return props.children;
+};
+
+SuspenseList.prototype.componentDidUpdate =
+	SuspenseList.prototype.componentDidMount = function () {
+		// Iterate through all children after mounting for two reasons:
+		// 1. As each node[SUSPENDED_COUNT] starts from 1, this iteration increases
+		//    each node[RELEASED_COUNT] by 1, therefore balancing the counters.
+		//    The nodes can now be completely consumed from the linked list.
+		// 2. Handle nodes that might have gotten resolved between render and
+		//    componentDidMount.
+		this._map.forEach((node, child) => {
+			resolve(this, child, node);
+		});
+	};
--- a/crates/librqbit/webui/node_modules/preact/compat/src/suspense.d.ts
+++ b/crates/librqbit/webui/node_modules/preact/compat/src/suspense.d.ts
@ -0,0 +1,15 @@
+import { Component, ComponentChild, ComponentChildren } from '../../src';
+
+//
+// Suspense/lazy
+// -----------------------------------
+export function lazy<T>(loader: () => Promise<{ default: T } | T>): T;
+
+export interface SuspenseProps {
+	children?: ComponentChildren;
+	fallback: ComponentChildren;
+}
+
+export class Suspense extends Component<SuspenseProps> {
+	render(): ComponentChild;
+}
--- a/crates/librqbit/webui/node_modules/preact/compat/src/suspense.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/src/suspense.js
@ -0,0 +1,273 @@
+import { Component, createElement, options, Fragment } from 'preact';
+import { MODE_HYDRATE } from '../../src/constants';
+import { assign } from './util';
+
+const oldCatchError = options._catchError;
+options._catchError = function (error, newVNode, oldVNode, errorInfo) {
+	if (error.then) {
+		/** @type {import('./internal').Component} */
+		let component;
+		let vnode = newVNode;
+
+		for (; (vnode = vnode._parent); ) {
+			if ((component = vnode._component) && component._childDidSuspend) {
+				if (newVNode._dom == null) {
+					newVNode._dom = oldVNode._dom;
+					newVNode._children = oldVNode._children;
+				}
+				// Don't call oldCatchError if we found a Suspense
+				return component._childDidSuspend(error, newVNode);
+			}
+		}
+	}
+	oldCatchError(error, newVNode, oldVNode, errorInfo);
+};
+
+const oldUnmount = options.unmount;
+options.unmount = function (vnode) {
+	/** @type {import('./internal').Component} */
+	const component = vnode._component;
+	if (component && component._onResolve) {
+		component._onResolve();
+	}
+
+	// if the component is still hydrating
+	// most likely it is because the component is suspended
+	// we set the vnode.type as `null` so that it is not a typeof function
+	// so the unmount will remove the vnode._dom
+	if (component && vnode._flags & MODE_HYDRATE) {
+		vnode.type = null;
+	}
+
+	if (oldUnmount) oldUnmount(vnode);
+};
+
+function detachedClone(vnode, detachedParent, parentDom) {
+	if (vnode) {
+		if (vnode._component && vnode._component.__hooks) {
+			vnode._component.__hooks._list.forEach(effect => {
+				if (typeof effect._cleanup == 'function') effect._cleanup();
+			});
+
+			vnode._component.__hooks = null;
+		}
+
+		vnode = assign({}, vnode);
+		if (vnode._component != null) {
+			if (vnode._component._parentDom === parentDom) {
+				vnode._component._parentDom = detachedParent;
+			}
+			vnode._component = null;
+		}
+
+		vnode._children =
+			vnode._children &&
+			vnode._children.map(child =>
+				detachedClone(child, detachedParent, parentDom)
+			);
+	}
+
+	return vnode;
+}
+
+function removeOriginal(vnode, detachedParent, originalParent) {
+	if (vnode && originalParent) {
+		vnode._original = null;
+		vnode._children =
+			vnode._children &&
+			vnode._children.map(child =>
+				removeOriginal(child, detachedParent, originalParent)
+			);
+
+		if (vnode._component) {
+			if (vnode._component._parentDom === detachedParent) {
+				if (vnode._dom) {
+					originalParent.appendChild(vnode._dom);
+				}
+				vnode._component._force = true;
+				vnode._component._parentDom = originalParent;
+			}
+		}
+	}
+
+	return vnode;
+}
+
+// having custom inheritance instead of a class here saves a lot of bytes
+export function Suspense() {
+	// we do not call super here to golf some bytes...
+	this._pendingSuspensionCount = 0;
+	this._suspenders = null;
+	this._detachOnNextRender = null;
+}
+
+// Things we do here to save some bytes but are not proper JS inheritance:
+// - call `new Component()` as the prototype
+// - do not set `Suspense.prototype.constructor` to `Suspense`
+Suspense.prototype = new Component();
+
+/**
+ * @this {import('./internal').SuspenseComponent}
+ * @param {Promise} promise The thrown promise
+ * @param {import('./internal').VNode<any, any>} suspendingVNode The suspending component
+ */
+Suspense.prototype._childDidSuspend = function (promise, suspendingVNode) {
+	const suspendingComponent = suspendingVNode._component;
+
+	/** @type {import('./internal').SuspenseComponent} */
+	const c = this;
+
+	if (c._suspenders == null) {
+		c._suspenders = [];
+	}
+	c._suspenders.push(suspendingComponent);
+
+	const resolve = suspended(c._vnode);
+
+	let resolved = false;
+	const onResolved = () => {
+		if (resolved) return;
+
+		resolved = true;
+		suspendingComponent._onResolve = null;
+
+		if (resolve) {
+			resolve(onSuspensionComplete);
+		} else {
+			onSuspensionComplete();
+		}
+	};
+
+	suspendingComponent._onResolve = onResolved;
+
+	const onSuspensionComplete = () => {
+		if (!--c._pendingSuspensionCount) {
+			// If the suspension was during hydration we don't need to restore the
+			// suspended children into the _children array
+			if (c.state._suspended) {
+				const suspendedVNode = c.state._suspended;
+				c._vnode._children[0] = removeOriginal(
+					suspendedVNode,
+					suspendedVNode._component._parentDom,
+					suspendedVNode._component._originalParentDom
+				);
+			}
+
+			c.setState({ _suspended: (c._detachOnNextRender = null) });
+
+			let suspended;
+			while ((suspended = c._suspenders.pop())) {
+				suspended.forceUpdate();
+			}
+		}
+	};
+
+	/**
+	 * We do not set `suspended: true` during hydration because we want the actual markup
+	 * to remain on screen and hydrate it when the suspense actually gets resolved.
+	 * While in non-hydration cases the usual fallback -> component flow would occour.
+	 */
+	if (
+		!c._pendingSuspensionCount++ &&
+		!(suspendingVNode._flags & MODE_HYDRATE)
+	) {
+		c.setState({ _suspended: (c._detachOnNextRender = c._vnode._children[0]) });
+	}
+	promise.then(onResolved, onResolved);
+};
+
+Suspense.prototype.componentWillUnmount = function () {
+	this._suspenders = [];
+};
+
+/**
+ * @this {import('./internal').SuspenseComponent}
+ * @param {import('./internal').SuspenseComponent["props"]} props
+ * @param {import('./internal').SuspenseState} state
+ */
+Suspense.prototype.render = function (props, state) {
+	if (this._detachOnNextRender) {
+		// When the Suspense's _vnode was created by a call to createVNode
+		// (i.e. due to a setState further up in the tree)
+		// it's _children prop is null, in this case we "forget" about the parked vnodes to detach
+		if (this._vnode._children) {
+			const detachedParent = document.createElement('div');
+			const detachedComponent = this._vnode._children[0]._component;
+			this._vnode._children[0] = detachedClone(
+				this._detachOnNextRender,
+				detachedParent,
+				(detachedComponent._originalParentDom = detachedComponent._parentDom)
+			);
+		}
+
+		this._detachOnNextRender = null;
+	}
+
+	// Wrap fallback tree in a VNode that prevents itself from being marked as aborting mid-hydration:
+	/** @type {import('./internal').VNode} */
+	const fallback =
+		state._suspended && createElement(Fragment, null, props.fallback);
+	if (fallback) fallback._flags &= ~MODE_HYDRATE;
+
+	return [
+		createElement(Fragment, null, state._suspended ? null : props.children),
+		fallback
+	];
+};
+
+/**
+ * Checks and calls the parent component's _suspended method, passing in the
+ * suspended vnode. This is a way for a parent (e.g. SuspenseList) to get notified
+ * that one of its children/descendants suspended.
+ *
+ * The parent MAY return a callback. The callback will get called when the
+ * suspension resolves, notifying the parent of the fact.
+ * Moreover, the callback gets function `unsuspend` as a parameter. The resolved
+ * child descendant will not actually get unsuspended until `unsuspend` gets called.
+ * This is a way for the parent to delay unsuspending.
+ *
+ * If the parent does not return a callback then the resolved vnode
+ * gets unsuspended immediately when it resolves.
+ *
+ * @param {import('./internal').VNode} vnode
+ * @returns {((unsuspend: () => void) => void)?}
+ */
+export function suspended(vnode) {
+	/** @type {import('./internal').Component} */
+	let component = vnode._parent._component;
+	return component && component._suspended && component._suspended(vnode);
+}
+
+export function lazy(loader) {
+	let prom;
+	let component;
+	let error;
+
+	function Lazy(props) {
+		if (!prom) {
+			prom = loader();
+			prom.then(
+				exports => {
+					component = exports.default || exports;
+				},
+				e => {
+					error = e;
+				}
+			);
+		}
+
+		if (error) {
+			throw error;
+		}
+
+		if (!component) {
+			throw prom;
+		}
+
+		return createElement(component, props);
+	}
+
+	Lazy.displayName = 'Lazy';
+	Lazy._forwarded = true;
+	return Lazy;
+}
--- a/crates/librqbit/webui/node_modules/preact/compat/src/util.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/src/util.js
@ -0,0 +1,33 @@
+/**
+ * Assign properties from `props` to `obj`
+ * @template O, P The obj and props types
+ * @param {O} obj The object to copy properties to
+ * @param {P} props The object to copy properties from
+ * @returns {O & P}
+ */
+export function assign(obj, props) {
+	for (let i in props) obj[i] = props[i];
+	return /** @type {O & P} */ (obj);
+}
+
+/**
+ * Check if two objects have a different shape
+ * @param {object} a
+ * @param {object} b
+ * @returns {boolean}
+ */
+export function shallowDiffers(a, b) {
+	for (let i in a) if (i !== '__source' && !(i in b)) return true;
+	for (let i in b) if (i !== '__source' && a[i] !== b[i]) return true;
+	return false;
+}
+
+/**
+ * Check if two values are the same value
+ * @param {*} x
+ * @param {*} y
+ * @returns {boolean}
+ */
+export function is(x, y) {
+	return (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y);
+}
--- a/crates/librqbit/webui/node_modules/preact/compat/test-utils.js
+++ b/crates/librqbit/webui/node_modules/preact/compat/test-utils.js
@ -0,0 +1 @@
+module.exports = require('preact/test-utils');
--- a/crates/librqbit/webui/node_modules/preact/debug/LICENSE
+++ b/crates/librqbit/webui/node_modules/preact/debug/LICENSE
@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present Jason Miller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/crates/librqbit/webui/node_modules/preact/debug/dist/debug.js
+++ b/crates/librqbit/webui/node_modules/preact/debug/dist/debug.js
--- a/crates/librqbit/webui/node_modules/preact/debug/dist/debug.js.map
+++ b/crates/librqbit/webui/node_modules/preact/debug/dist/debug.js.map
--- a/crates/librqbit/webui/node_modules/preact/debug/dist/debug.mjs
+++ b/crates/librqbit/webui/node_modules/preact/debug/dist/debug.mjs
--- a/crates/librqbit/webui/node_modules/preact/debug/dist/debug.module.js
+++ b/crates/librqbit/webui/node_modules/preact/debug/dist/debug.module.js
--- a/crates/librqbit/webui/node_modules/preact/debug/dist/debug.module.js.map
+++ b/crates/librqbit/webui/node_modules/preact/debug/dist/debug.module.js.map
--- a/crates/librqbit/webui/node_modules/preact/debug/dist/debug.umd.js
+++ b/crates/librqbit/webui/node_modules/preact/debug/dist/debug.umd.js
--- a/crates/librqbit/webui/node_modules/preact/debug/dist/debug.umd.js.map
+++ b/crates/librqbit/webui/node_modules/preact/debug/dist/debug.umd.js.map
--- a/crates/librqbit/webui/node_modules/preact/debug/package.json
+++ b/crates/librqbit/webui/node_modules/preact/debug/package.json
@ -0,0 +1,27 @@
+{
+  "name": "preact-debug",
+  "amdName": "preactDebug",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Preact extensions for development",
+  "main": "dist/debug.js",
+  "module": "dist/debug.module.js",
+  "umd:main": "dist/debug.umd.js",
+  "source": "src/index.js",
+  "license": "MIT",
+  "mangle": {
+    "regex": "^(?!_renderer)^_"
+  },
+  "peerDependencies": {
+    "preact": "^10.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "browser": "./dist/debug.module.js",
+      "umd": "./dist/debug.umd.js",
+      "import": "./dist/debug.mjs",
+      "require": "./dist/debug.js"
+    }
+  }
+}
--- a/crates/librqbit/webui/node_modules/preact/debug/src/check-props.js
+++ b/crates/librqbit/webui/node_modules/preact/debug/src/check-props.js
@ -0,0 +1,54 @@
+const ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+
+let loggedTypeFailures = {};
+
+/**
+ * Reset the history of which prop type warnings have been logged.
+ */
+export function resetPropWarnings() {
+	loggedTypeFailures = {};
+}
+
+/**
+ * Assert that the values match with the type specs.
+ * Error messages are memorized and will only be shown once.
+ *
+ * Adapted from https://github.com/facebook/prop-types/blob/master/checkPropTypes.js
+ *
+ * @param {object} typeSpecs Map of name to a ReactPropType
+ * @param {object} values Runtime values that need to be type-checked
+ * @param {string} location e.g. "prop", "context", "child context"
+ * @param {string} componentName Name of the component for error messages.
+ * @param {?Function} getStack Returns the component stack.
+ */
+export function checkPropTypes(
+	typeSpecs,
+	values,
+	location,
+	componentName,
+	getStack
+) {
+	Object.keys(typeSpecs).forEach(typeSpecName => {
+		let error;
+		try {
+			error = typeSpecs[typeSpecName](
+				values,
+				typeSpecName,
+				componentName,
+				location,
+				null,
+				ReactPropTypesSecret
+			);
+		} catch (e) {
+			error = e;
+		}
+		if (error && !(error.message in loggedTypeFailures)) {
+			loggedTypeFailures[error.message] = true;
+			console.error(
+				`Failed ${location} type: ${error.message}${
+					(getStack && `\n${getStack()}`) || ''
+				}`
+			);
+		}
+	});
+}
--- a/crates/librqbit/webui/node_modules/preact/debug/src/component-stack.js
+++ b/crates/librqbit/webui/node_modules/preact/debug/src/component-stack.js
@ -0,0 +1,146 @@
+import { options, Fragment } from 'preact';
+
+/**
+ * Get human readable name of the component/dom node
+ * @param {import('./internal').VNode} vnode
+ * @param {import('./internal').VNode} vnode
+ * @returns {string}
+ */
+export function getDisplayName(vnode) {
+	if (vnode.type === Fragment) {
+		return 'Fragment';
+	} else if (typeof vnode.type == 'function') {
+		return vnode.type.displayName || vnode.type.name;
+	} else if (typeof vnode.type == 'string') {
+		return vnode.type;
+	}
+
+	return '#text';
+}
+
+/**
+ * Used to keep track of the currently rendered `vnode` and print it
+ * in debug messages.
+ */
+let renderStack = [];
+
+/**
+ * Keep track of the current owners. An owner describes a component
+ * which was responsible to render a specific `vnode`. This exclude
+ * children that are passed via `props.children`, because they belong
+ * to the parent owner.
+ *
+ * ```jsx
+ * const Foo = props => <div>{props.children}</div> // div's owner is Foo
+ * const Bar = props => {
+ *   return (
+ *     <Foo><span /></Foo> // Foo's owner is Bar, span's owner is Bar
+ *   )
+ * }
+ * ```
+ *
+ * Note: A `vnode` may be hoisted to the root scope due to compiler
+ * optimiztions. In these cases the `_owner` will be different.
+ */
+let ownerStack = [];
+
+/**
+ * Get the currently rendered `vnode`
+ * @returns {import('./internal').VNode | null}
+ */
+export function getCurrentVNode() {
+	return renderStack.length > 0 ? renderStack[renderStack.length - 1] : null;
+}
+
+/**
+ * If the user doesn't have `@babel/plugin-transform-react-jsx-source`
+ * somewhere in his tool chain we can't print the filename and source
+ * location of a component. In that case we just omit that, but we'll
+ * print a helpful message to the console, notifying the user of it.
+ */
+let hasBabelPlugin = false;
+
+/**
+ * Check if a `vnode` is a possible owner.
+ * @param {import('./internal').VNode} vnode
+ */
+function isPossibleOwner(vnode) {
+	return typeof vnode.type == 'function' && vnode.type != Fragment;
+}
+
+/**
+ * Return the component stack that was captured up to this point.
+ * @param {import('./internal').VNode} vnode
+ * @returns {string}
+ */
+export function getOwnerStack(vnode) {
+	const stack = [vnode];
+	let next = vnode;
+	while (next._owner != null) {
+		stack.push(next._owner);
+		next = next._owner;
+	}
+
+	return stack.reduce((acc, owner) => {
+		acc += `  in ${getDisplayName(owner)}`;
+
+		const source = owner.__source;
+		if (source) {
+			acc += ` (at ${source.fileName}:${source.lineNumber})`;
+		} else if (!hasBabelPlugin) {
+			hasBabelPlugin = true;
+			console.warn(
+				'Add @babel/plugin-transform-react-jsx-source to get a more detailed component stack. Note that you should not add it to production builds of your App for bundle size reasons.'
+			);
+		}
+
+		return (acc += '\n');
+	}, '');
+}
+
+/**
+ * Setup code to capture the component trace while rendering. Note that
+ * we cannot simply traverse `vnode._parent` upwards, because we have some
+ * debug messages for `this.setState` where the `vnode` is `undefined`.
+ */
+export function setupComponentStack() {
+	let oldDiff = options._diff;
+	let oldDiffed = options.diffed;
+	let oldRoot = options._root;
+	let oldVNode = options.vnode;
+	let oldRender = options._render;
+
+	options.diffed = vnode => {
+		if (isPossibleOwner(vnode)) {
+			ownerStack.pop();
+		}
+		renderStack.pop();
+		if (oldDiffed) oldDiffed(vnode);
+	};
+
+	options._diff = vnode => {
+		if (isPossibleOwner(vnode)) {
+			renderStack.push(vnode);
+		}
+		if (oldDiff) oldDiff(vnode);
+	};
+
+	options._root = (vnode, parent) => {
+		ownerStack = [];
+		if (oldRoot) oldRoot(vnode, parent);
+	};
+
+	options.vnode = vnode => {
+		vnode._owner =
+			ownerStack.length > 0 ? ownerStack[ownerStack.length - 1] : null;
+		if (oldVNode) oldVNode(vnode);
+	};
+
+	options._render = vnode => {
+		if (isPossibleOwner(vnode)) {
+			ownerStack.push(vnode);
+		}
+
+		if (oldRender) oldRender(vnode);
+	};
+}
--- a/crates/librqbit/webui/node_modules/preact/debug/src/constants.js
+++ b/crates/librqbit/webui/node_modules/preact/debug/src/constants.js
@ -0,0 +1,3 @@
+export const ELEMENT_NODE = 1;
+export const DOCUMENT_NODE = 9;
+export const DOCUMENT_FRAGMENT_NODE = 11;
--- a/crates/librqbit/webui/node_modules/preact/debug/src/debug.js
+++ b/crates/librqbit/webui/node_modules/preact/debug/src/debug.js
@ -0,0 +1,545 @@
+import { checkPropTypes } from './check-props';
+import { options, Component } from 'preact';
+import {
+	ELEMENT_NODE,
+	DOCUMENT_NODE,
+	DOCUMENT_FRAGMENT_NODE
+} from './constants';
+import {
+	getOwnerStack,
+	setupComponentStack,
+	getCurrentVNode,
+	getDisplayName
+} from './component-stack';
+import { assign, isNaN } from './util';
+
+const isWeakMapSupported = typeof WeakMap == 'function';
+
+/**
+ * @param {import('./internal').VNode} vnode
+ * @returns {Array<string>}
+ */
+function getDomChildren(vnode) {
+	let domChildren = [];
+
+	if (!vnode._children) return domChildren;
+
+	vnode._children.forEach(child => {
+		if (child && typeof child.type === 'function') {
+			domChildren.push.apply(domChildren, getDomChildren(child));
+		} else if (child && typeof child.type === 'string') {
+			domChildren.push(child.type);
+		}
+	});
+
+	return domChildren;
+}
+
+/**
+ * @param {import('./internal').VNode} parent
+ * @returns {string}
+ */
+function getClosestDomNodeParentName(parent) {
+	if (!parent) return '';
+	if (typeof parent.type == 'function') {
+		if (parent._parent === null) {
+			if (parent._dom !== null && parent._dom.parentNode !== null) {
+				return parent._dom.parentNode.localName;
+			}
+			return '';
+		}
+		return getClosestDomNodeParentName(parent._parent);
+	}
+	return /** @type {string} */ (parent.type);
+}
+
+export function initDebug() {
+	setupComponentStack();
+
+	let hooksAllowed = false;
+
+	/* eslint-disable no-console */
+	let oldBeforeDiff = options._diff;
+	let oldDiffed = options.diffed;
+	let oldVnode = options.vnode;
+	let oldRender = options._render;
+	let oldCatchError = options._catchError;
+	let oldRoot = options._root;
+	let oldHook = options._hook;
+	const warnedComponents = !isWeakMapSupported
+		? null
+		: {
+				useEffect: new WeakMap(),
+				useLayoutEffect: new WeakMap(),
+				lazyPropTypes: new WeakMap()
+		  };
+	const deprecations = [];
+
+	options._catchError = (error, vnode, oldVNode, errorInfo) => {
+		let component = vnode && vnode._component;
+		if (component && typeof error.then == 'function') {
+			const promise = error;
+			error = new Error(
+				`Missing Suspense. The throwing component was: ${getDisplayName(vnode)}`
+			);
+
+			let parent = vnode;
+			for (; parent; parent = parent._parent) {
+				if (parent._component && parent._component._childDidSuspend) {
+					error = promise;
+					break;
+				}
+			}
+
+			// We haven't recovered and we know at this point that there is no
+			// Suspense component higher up in the tree
+			if (error instanceof Error) {
+				throw error;
+			}
+		}
+
+		try {
+			errorInfo = errorInfo || {};
+			errorInfo.componentStack = getOwnerStack(vnode);
+			oldCatchError(error, vnode, oldVNode, errorInfo);
+
+			// when an error was handled by an ErrorBoundary we will nonetheless emit an error
+			// event on the window object. This is to make up for react compatibility in dev mode
+			// and thus make the Next.js dev overlay work.
+			if (typeof error.then != 'function') {
+				setTimeout(() => {
+					throw error;
+				});
+			}
+		} catch (e) {
+			throw e;
+		}
+	};
+
+	options._root = (vnode, parentNode) => {
+		if (!parentNode) {
+			throw new Error(
+				'Undefined parent passed to render(), this is the second argument.\n' +
+					'Check if the element is available in the DOM/has the correct id.'
+			);
+		}
+
+		let isValid;
+		switch (parentNode.nodeType) {
+			case ELEMENT_NODE:
+			case DOCUMENT_FRAGMENT_NODE:
+			case DOCUMENT_NODE:
+				isValid = true;
+				break;
+			default:
+				isValid = false;
+		}
+
+		if (!isValid) {
+			let componentName = getDisplayName(vnode);
+			throw new Error(
+				`Expected a valid HTML node as a second argument to render.	Received ${parentNode} instead: render(<${componentName} />, ${parentNode});`
+			);
+		}
+
+		if (oldRoot) oldRoot(vnode, parentNode);
+	};
+
+	options._diff = vnode => {
+		let { type } = vnode;
+
+		hooksAllowed = true;
+
+		if (type === undefined) {
+			throw new Error(
+				'Undefined component passed to createElement()\n\n' +
+					'You likely forgot to export your component or might have mixed up default and named imports' +
+					serializeVNode(vnode) +
+					`\n\n${getOwnerStack(vnode)}`
+			);
+		} else if (type != null && typeof type == 'object') {
+			if (type._children !== undefined && type._dom !== undefined) {
+				throw new Error(
+					`Invalid type passed to createElement(): ${type}\n\n` +
+						'Did you accidentally pass a JSX literal as JSX twice?\n\n' +
+						`  let My${getDisplayName(vnode)} = ${serializeVNode(type)};\n` +
+						`  let vnode = <My${getDisplayName(vnode)} />;\n\n` +
+						'This usually happens when you export a JSX literal and not the component.' +
+						`\n\n${getOwnerStack(vnode)}`
+				);
+			}
+
+			throw new Error(
+				'Invalid type passed to createElement(): ' +
+					(Array.isArray(type) ? 'array' : type)
+			);
+		}
+
+		if (
+			vnode.ref !== undefined &&
+			typeof vnode.ref != 'function' &&
+			typeof vnode.ref != 'object' &&
+			!('$$typeof' in vnode) // allow string refs when preact-compat is installed
+		) {
+			throw new Error(
+				`Component's "ref" property should be a function, or an object created ` +
+					`by createRef(), but got [${typeof vnode.ref}] instead\n` +
+					serializeVNode(vnode) +
+					`\n\n${getOwnerStack(vnode)}`
+			);
+		}
+
+		if (typeof vnode.type == 'string') {
+			for (const key in vnode.props) {
+				if (
+					key[0] === 'o' &&
+					key[1] === 'n' &&
+					typeof vnode.props[key] != 'function' &&
+					vnode.props[key] != null
+				) {
+					throw new Error(
+						`Component's "${key}" property should be a function, ` +
+							`but got [${typeof vnode.props[key]}] instead\n` +
+							serializeVNode(vnode) +
+							`\n\n${getOwnerStack(vnode)}`
+					);
+				}
+			}
+		}
+
+		// Check prop-types if available
+		if (typeof vnode.type == 'function' && vnode.type.propTypes) {
+			if (
+				vnode.type.displayName === 'Lazy' &&
+				warnedComponents &&
+				!warnedComponents.lazyPropTypes.has(vnode.type)
+			) {
+				const m =
+					'PropTypes are not supported on lazy(). Use propTypes on the wrapped component itself. ';
+				try {
+					const lazyVNode = vnode.type();
+					warnedComponents.lazyPropTypes.set(vnode.type, true);
+					console.warn(
+						m + `Component wrapped in lazy() is ${getDisplayName(lazyVNode)}`
+					);
+				} catch (promise) {
+					console.warn(
+						m + "We will log the wrapped component's name once it is loaded."
+					);
+				}
+			}
+
+			let values = vnode.props;
+			if (vnode.type._forwarded) {
+				values = assign({}, values);
+				delete values.ref;
+			}
+
+			checkPropTypes(
+				vnode.type.propTypes,
+				values,
+				'prop',
+				getDisplayName(vnode),
+				() => getOwnerStack(vnode)
+			);
+		}
+
+		if (oldBeforeDiff) oldBeforeDiff(vnode);
+	};
+
+	options._render = vnode => {
+		if (oldRender) {
+			oldRender(vnode);
+		}
+		hooksAllowed = true;
+	};
+
+	options._hook = (comp, index, type) => {
+		if (!comp || !hooksAllowed) {
+			throw new Error('Hook can only be invoked from render methods.');
+		}
+
+		if (oldHook) oldHook(comp, index, type);
+	};
+
+	// Ideally we'd want to print a warning once per component, but we
+	// don't have access to the vnode that triggered it here. As a
+	// compromise and to avoid flooding the console with warnings we
+	// print each deprecation warning only once.
+	const warn = (property, message) => ({
+		get() {
+			const key = 'get' + property + message;
+			if (deprecations && deprecations.indexOf(key) < 0) {
+				deprecations.push(key);
+				console.warn(`getting vnode.${property} is deprecated, ${message}`);
+			}
+		},
+		set() {
+			const key = 'set' + property + message;
+			if (deprecations && deprecations.indexOf(key) < 0) {
+				deprecations.push(key);
+				console.warn(`setting vnode.${property} is not allowed, ${message}`);
+			}
+		}
+	});
+
+	const deprecatedAttributes = {
+		nodeName: warn('nodeName', 'use vnode.type'),
+		attributes: warn('attributes', 'use vnode.props'),
+		children: warn('children', 'use vnode.props.children')
+	};
+
+	const deprecatedProto = Object.create({}, deprecatedAttributes);
+
+	options.vnode = vnode => {
+		const props = vnode.props;
+		if (
+			vnode.type !== null &&
+			props != null &&
+			('__source' in props || '__self' in props)
+		) {
+			const newProps = (vnode.props = {});
+			for (let i in props) {
+				const v = props[i];
+				if (i === '__source') vnode.__source = v;
+				else if (i === '__self') vnode.__self = v;
+				else newProps[i] = v;
+			}
+		}
+
+		// eslint-disable-next-line
+		vnode.__proto__ = deprecatedProto;
+		if (oldVnode) oldVnode(vnode);
+	};
+
+	options.diffed = vnode => {
+		const { type, _parent: parent } = vnode;
+		// Check if the user passed plain objects as children. Note that we cannot
+		// move this check into `options.vnode` because components can receive
+		// children in any shape they want (e.g.
+		// `<MyJSONFormatter>{{ foo: 123, bar: "abc" }}</MyJSONFormatter>`).
+		// Putting this check in `options.diffed` ensures that
+		// `vnode._children` is set and that we only validate the children
+		// that were actually rendered.
+		if (vnode._children) {
+			vnode._children.forEach(child => {
+				if (typeof child === 'object' && child && child.type === undefined) {
+					const keys = Object.keys(child).join(',');
+					throw new Error(
+						`Objects are not valid as a child. Encountered an object with the keys {${keys}}.` +
+							`\n\n${getOwnerStack(vnode)}`
+					);
+				}
+			});
+		}
+
+		if (typeof type === 'string' && (isTableElement(type) || type === 'p')) {
+			// Avoid false positives when Preact only partially rendered the
+			// HTML tree. Whilst we attempt to include the outer DOM in our
+			// validation, this wouldn't work on the server for
+			// `preact-render-to-string`. There we'd otherwise flood the terminal
+			// with false positives, which we'd like to avoid.
+			let domParentName = getClosestDomNodeParentName(parent);
+			if (domParentName !== '') {
+				if (
+					type === 'table' &&
+					// Tables can be nested inside each other if it's inside a cell.
+					// See https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#nesting_tables
+					domParentName !== 'td' &&
+					isTableElement(domParentName)
+				) {
+					console.log(domParentName, parent._dom);
+					console.error(
+						'Improper nesting of table. Your <table> should not have a table-node parent.' +
+							serializeVNode(vnode) +
+							`\n\n${getOwnerStack(vnode)}`
+					);
+				} else if (
+					(type === 'thead' || type === 'tfoot' || type === 'tbody') &&
+					domParentName !== 'table'
+				) {
+					console.error(
+						'Improper nesting of table. Your <thead/tbody/tfoot> should have a <table> parent.' +
+							serializeVNode(vnode) +
+							`\n\n${getOwnerStack(vnode)}`
+					);
+				} else if (
+					type === 'tr' &&
+					domParentName !== 'thead' &&
+					domParentName !== 'tfoot' &&
+					domParentName !== 'tbody' &&
+					domParentName !== 'table'
+				) {
+					console.error(
+						'Improper nesting of table. Your <tr> should have a <thead/tbody/tfoot/table> parent.' +
+							serializeVNode(vnode) +
+							`\n\n${getOwnerStack(vnode)}`
+					);
+				} else if (type === 'td' && domParentName !== 'tr') {
+					console.error(
+						'Improper nesting of table. Your <td> should have a <tr> parent.' +
+							serializeVNode(vnode) +
+							`\n\n${getOwnerStack(vnode)}`
+					);
+				} else if (type === 'th' && domParentName !== 'tr') {
+					console.error(
+						'Improper nesting of table. Your <th> should have a <tr>.' +
+							serializeVNode(vnode) +
+							`\n\n${getOwnerStack(vnode)}`
+					);
+				}
+			} else if (type === 'p') {
+				let illegalDomChildrenTypes = getDomChildren(vnode).filter(childType =>
+					ILLEGAL_PARAGRAPH_CHILD_ELEMENTS.test(childType)
+				);
+				if (illegalDomChildrenTypes.length) {
+					console.error(
+						'Improper nesting of paragraph. Your <p> should not have ' +
+							illegalDomChildrenTypes.join(', ') +
+							'as child-elements.' +
+							serializeVNode(vnode) +
+							`\n\n${getOwnerStack(vnode)}`
+					);
+				}
+			}
+		}
+
+		hooksAllowed = false;
+
+		if (oldDiffed) oldDiffed(vnode);
+
+		if (vnode._children != null) {
+			const keys = [];
+			for (let i = 0; i < vnode._children.length; i++) {
+				const child = vnode._children[i];
+				if (!child || child.key == null) continue;
+
+				const key = child.key;
+				if (keys.indexOf(key) !== -1) {
+					console.error(
+						'Following component has two or more children with the ' +
+							`same key attribute: "${key}". This may cause glitches and misbehavior ` +
+							'in rendering process. Component: \n\n' +
+							serializeVNode(vnode) +
+							`\n\n${getOwnerStack(vnode)}`
+					);
+
+					// Break early to not spam the console
+					break;
+				}
+
+				keys.push(key);
+			}
+		}
+
+		if (vnode._component != null && vnode._component.__hooks != null) {
+			// Validate that none of the hooks in this component contain arguments that are NaN.
+			// This is a common mistake that can be hard to debug, so we want to catch it early.
+			const hooks = vnode._component.__hooks._list;
+			if (hooks) {
+				for (let i = 0; i < hooks.length; i += 1) {
+					const hook = hooks[i];
+					if (hook._args) {
+						for (let j = 0; j < hook._args.length; j++) {
+							const arg = hook._args[j];
+							if (isNaN(arg)) {
+								const componentName = getDisplayName(vnode);
+								throw new Error(
+									`Invalid argument passed to hook. Hooks should not be called with NaN in the dependency array. Hook index ${i} in component ${componentName} was called with NaN.`
+								);
+							}
+						}
+					}
+				}
+			}
+		}
+	};
+}
+
+const setState = Component.prototype.setState;
+Component.prototype.setState = function (update, callback) {
+	if (this._vnode == null) {
+		// `this._vnode` will be `null` during componentWillMount. But it
+		// is perfectly valid to call `setState` during cWM. So we
+		// need an additional check to verify that we are dealing with a
+		// call inside constructor.
+		if (this.state == null) {
+			console.warn(
+				`Calling "this.setState" inside the constructor of a component is a ` +
+					`no-op and might be a bug in your application. Instead, set ` +
+					`"this.state = {}" directly.\n\n${getOwnerStack(getCurrentVNode())}`
+			);
+		}
+	}
+
+	return setState.call(this, update, callback);
+};
+
+function isTableElement(type) {
+	return (
+		type === 'table' ||
+		type === 'tfoot' ||
+		type === 'tbody' ||
+		type === 'thead' ||
+		type === 'td' ||
+		type === 'tr' ||
+		type === 'th'
+	);
+}
+
+const ILLEGAL_PARAGRAPH_CHILD_ELEMENTS =
+	/^(address|article|aside|blockquote|details|div|dl|fieldset|figcaption|figure|footer|form|h1|h2|h3|h4|h5|h6|header|hgroup|hr|main|menu|nav|ol|p|pre|search|section|table|ul)$/;
+
+const forceUpdate = Component.prototype.forceUpdate;
+Component.prototype.forceUpdate = function (callback) {
+	if (this._vnode == null) {
+		console.warn(
+			`Calling "this.forceUpdate" inside the constructor of a component is a ` +
+				`no-op and might be a bug in your application.\n\n${getOwnerStack(
+					getCurrentVNode()
+				)}`
+		);
+	} else if (this._parentDom == null) {
+		console.warn(
+			`Can't call "this.forceUpdate" on an unmounted component. This is a no-op, ` +
+				`but it indicates a memory leak in your application. To fix, cancel all ` +
+				`subscriptions and asynchronous tasks in the componentWillUnmount method.` +
+				`\n\n${getOwnerStack(this._vnode)}`
+		);
+	}
+	return forceUpdate.call(this, callback);
+};
+
+/**
+ * Serialize a vnode tree to a string
+ * @param {import('./internal').VNode} vnode
+ * @returns {string}
+ */
+export function serializeVNode(vnode) {
+	let { props } = vnode;
+	let name = getDisplayName(vnode);
+
+	let attrs = '';
+	for (let prop in props) {
+		if (props.hasOwnProperty(prop) && prop !== 'children') {
+			let value = props[prop];
+
+			// If it is an object but doesn't have toString(), use Object.toString
+			if (typeof value == 'function') {
+				value = `function ${value.displayName || value.name}() {}`;
+			}
+
+			value =
+				Object(value) === value && !value.toString
+					? Object.prototype.toString.call(value)
+					: value + '';
+
+			attrs += ` ${prop}=${JSON.stringify(value)}`;
+		}
+	}
+
+	let children = props.children;
+	return `<${name}${attrs}${
+		children && children.length ? '>..</' + name + '>' : ' />'
+	}`;
+}
--- a/crates/librqbit/webui/node_modules/preact/debug/src/index.d.ts
+++ b/crates/librqbit/webui/node_modules/preact/debug/src/index.d.ts
@ -0,0 +1,4 @@
+/**
+ * Reset the history of which prop type warnings have been logged.
+ */
+export function resetPropWarnings(): void;
--- a/crates/librqbit/webui/node_modules/preact/debug/src/index.js
+++ b/crates/librqbit/webui/node_modules/preact/debug/src/index.js
@ -0,0 +1,6 @@
+import { initDebug } from './debug';
+import 'preact/devtools';
+
+initDebug();
+
+export { resetPropWarnings } from './check-props';
--- a/crates/librqbit/webui/node_modules/preact/debug/src/internal.d.ts
+++ b/crates/librqbit/webui/node_modules/preact/debug/src/internal.d.ts
@ -0,0 +1,82 @@
+import { Component, PreactElement, VNode, Options } from '../../src/internal';
+
+export { Component, PreactElement, VNode, Options };
+
+export interface DevtoolsInjectOptions {
+	/** 1 = DEV, 0 = production */
+	bundleType: 1 | 0;
+	/** The devtools enable different features for different versions of react */
+	version: string;
+	/** Informative string, currently unused in the devtools  */
+	rendererPackageName: string;
+	/** Find the root dom node of a vnode */
+	findHostInstanceByFiber(vnode: VNode): HTMLElement | null;
+	/** Find the closest vnode given a dom node */
+	findFiberByHostInstance(instance: HTMLElement): VNode | null;
+}
+
+export interface DevtoolsUpdater {
+	setState(objOrFn: any): void;
+	forceUpdate(): void;
+	setInState(path: Array<string | number>, value: any): void;
+	setInProps(path: Array<string | number>, value: any): void;
+	setInContext(): void;
+}
+
+export type NodeType = 'Composite' | 'Native' | 'Wrapper' | 'Text';
+
+export interface DevtoolData {
+	nodeType: NodeType;
+	// Component type
+	type: any;
+	name: string;
+	ref: any;
+	key: string | number;
+	updater: DevtoolsUpdater | null;
+	text: string | number | null;
+	state: any;
+	props: any;
+	children: VNode[] | string | number | null;
+	publicInstance: PreactElement | Text | Component;
+	memoizedInteractions: any[];
+
+	actualDuration: number;
+	actualStartTime: number;
+	treeBaseDuration: number;
+}
+
+export type EventType =
+	| 'unmount'
+	| 'rootCommitted'
+	| 'root'
+	| 'mount'
+	| 'update'
+	| 'updateProfileTimes';
+
+export interface DevtoolsEvent {
+	data?: DevtoolData;
+	internalInstance: VNode;
+	renderer: string;
+	type: EventType;
+}
+
+export interface DevtoolsHook {
+	_renderers: Record<string, any>;
+	_roots: Set<VNode>;
+	on(ev: string, listener: () => void): void;
+	emit(ev: string, data?: object): void;
+	helpers: Record<string, any>;
+	getFiberRoots(rendererId: string): Set<any>;
+	inject(config: DevtoolsInjectOptions): string;
+	onCommitFiberRoot(rendererId: string, root: VNode): void;
+	onCommitFiberUnmount(rendererId: string, vnode: VNode): void;
+}
+
+export interface DevtoolsWindow extends Window {
+	/**
+	 * If the devtools extension is installed it will inject this object into
+	 * the dom. This hook handles all communications between preact and the
+	 * devtools panel.
+	 */
+	__REACT_DEVTOOLS_GLOBAL_HOOK__?: DevtoolsHook;
+}
--- a/crates/librqbit/webui/node_modules/preact/debug/src/util.js
+++ b/crates/librqbit/webui/node_modules/preact/debug/src/util.js
@ -0,0 +1,15 @@
+/**
+ * Assign properties from `props` to `obj`
+ * @template O, P The obj and props types
+ * @param {O} obj The object to copy properties to
+ * @param {P} props The object to copy properties from
+ * @returns {O & P}
+ */
+export function assign(obj, props) {
+	for (let i in props) obj[i] = props[i];
+	return /** @type {O & P} */ (obj);
+}
+
+export function isNaN(value) {
+	return value !== value;
+}
--- a/crates/librqbit/webui/node_modules/preact/devtools/LICENSE
+++ b/crates/librqbit/webui/node_modules/preact/devtools/LICENSE
@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present Jason Miller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/crates/librqbit/webui/node_modules/preact/devtools/dist/devtools.js
+++ b/crates/librqbit/webui/node_modules/preact/devtools/dist/devtools.js
@ -0,0 +1,2 @@
+var n=require("preact");"undefined"!=typeof window&&window.__PREACT_DEVTOOLS__&&window.__PREACT_DEVTOOLS__.attachPreact("10.19.2",n.options,{Fragment:n.Fragment,Component:n.Component}),exports.addHookName=function(e,o){return n.options.__a&&n.options.__a(o),e};
+//# sourceMappingURL=devtools.js.map
--- a/crates/librqbit/webui/node_modules/preact/devtools/dist/devtools.js.map
+++ b/crates/librqbit/webui/node_modules/preact/devtools/dist/devtools.js.map
@ -0,0 +1 @@
+{"version":3,"file":"devtools.js","sources":["../src/devtools.js","../src/index.js"],"sourcesContent":["import { options, Fragment, Component } from 'preact';\n\nexport function initDevTools() {\n\tif (typeof window != 'undefined' && window.__PREACT_DEVTOOLS__) {\n\t\twindow.__PREACT_DEVTOOLS__.attachPreact('10.19.2', options, {\n\t\t\tFragment,\n\t\t\tComponent\n\t\t});\n\t}\n}\n","import { options } from 'preact';\nimport { initDevTools } from './devtools';\n\ninitDevTools();\n\n/**\n * Display a custom label for a custom hook for the devtools panel\n * @type {<T>(value: T, name: string) => T}\n */\nexport function addHookName(value, name) {\n\tif (options._addHookName) {\n\t\toptions._addHookName(name);\n\t}\n\treturn value;\n}\n"],"names":["window","__PREACT_DEVTOOLS__","attachPreact","options","Fragment","Component","value","name","__a"],"mappings":"wBAGsB,oBAAVA,QAAyBA,OAAOC,qBAC1CD,OAAOC,oBAAoBC,aAAa,UAAWC,EAAAA,QAAS,CAC3DC,SAAAA,EAAAA,SACAC,UAAAA,EAF2DA,gCCKvD,SAAqBC,EAAOC,GAIlC,OAHIJ,EAAAA,QAAsBK,KACzBL,EAAAA,QAAOK,IAAcD,GAEfD,CACP"}
--- a/crates/librqbit/webui/node_modules/preact/devtools/dist/devtools.mjs
+++ b/crates/librqbit/webui/node_modules/preact/devtools/dist/devtools.mjs
@ -0,0 +1,2 @@
+import{options as n,Fragment as o,Component as e}from"preact";function t(o,e){return n.__a&&n.__a(e),o}"undefined"!=typeof window&&window.__PREACT_DEVTOOLS__&&window.__PREACT_DEVTOOLS__.attachPreact("10.19.2",n,{Fragment:o,Component:e});export{t as addHookName};
+//# sourceMappingURL=devtools.module.js.map
--- a/crates/librqbit/webui/node_modules/preact/devtools/dist/devtools.module.js
+++ b/crates/librqbit/webui/node_modules/preact/devtools/dist/devtools.module.js
@ -0,0 +1,2 @@
+import{options as n,Fragment as o,Component as e}from"preact";function t(o,e){return n.__a&&n.__a(e),o}"undefined"!=typeof window&&window.__PREACT_DEVTOOLS__&&window.__PREACT_DEVTOOLS__.attachPreact("10.19.2",n,{Fragment:o,Component:e});export{t as addHookName};
+//# sourceMappingURL=devtools.module.js.map
--- a/crates/librqbit/webui/node_modules/preact/devtools/dist/devtools.module.js.map
+++ b/crates/librqbit/webui/node_modules/preact/devtools/dist/devtools.module.js.map
@ -0,0 +1 @@
+{"version":3,"file":"devtools.module.js","sources":["../src/index.js","../src/devtools.js"],"sourcesContent":["import { options } from 'preact';\nimport { initDevTools } from './devtools';\n\ninitDevTools();\n\n/**\n * Display a custom label for a custom hook for the devtools panel\n * @type {<T>(value: T, name: string) => T}\n */\nexport function addHookName(value, name) {\n\tif (options._addHookName) {\n\t\toptions._addHookName(name);\n\t}\n\treturn value;\n}\n","import { options, Fragment, Component } from 'preact';\n\nexport function initDevTools() {\n\tif (typeof window != 'undefined' && window.__PREACT_DEVTOOLS__) {\n\t\twindow.__PREACT_DEVTOOLS__.attachPreact('10.19.2', options, {\n\t\t\tFragment,\n\t\t\tComponent\n\t\t});\n\t}\n}\n"],"names":["addHookName","value","name","options","__a","window","__PREACT_DEVTOOLS__","attachPreact","Fragment","Component"],"mappings":"8DASO,SAASA,EAAYC,EAAOC,GAIlC,OAHIC,EAAsBC,KACzBD,EAAOC,IAAcF,GAEfD,CACP,CCXqB,oBAAVI,QAAyBA,OAAOC,qBAC1CD,OAAOC,oBAAoBC,aAAa,UAAWJ,EAAS,CAC3DK,SAAAA,EACAC,UAAAA"}
--- a/crates/librqbit/webui/node_modules/preact/devtools/dist/devtools.umd.js
+++ b/crates/librqbit/webui/node_modules/preact/devtools/dist/devtools.umd.js
@ -0,0 +1,2 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("preact")):"function"==typeof define&&define.amd?define(["exports","preact"],n):n((e||self).preactDevtools={},e.preact)}(this,function(e,n){"undefined"!=typeof window&&window.__PREACT_DEVTOOLS__&&window.__PREACT_DEVTOOLS__.attachPreact("10.19.2",n.options,{Fragment:n.Fragment,Component:n.Component}),e.addHookName=function(e,o){return n.options.__a&&n.options.__a(o),e}});
+//# sourceMappingURL=devtools.umd.js.map
--- a/crates/librqbit/webui/node_modules/preact/devtools/dist/devtools.umd.js.map
+++ b/crates/librqbit/webui/node_modules/preact/devtools/dist/devtools.umd.js.map
@ -0,0 +1 @@
+{"version":3,"file":"devtools.umd.js","sources":["../src/devtools.js","../src/index.js"],"sourcesContent":["import { options, Fragment, Component } from 'preact';\n\nexport function initDevTools() {\n\tif (typeof window != 'undefined' && window.__PREACT_DEVTOOLS__) {\n\t\twindow.__PREACT_DEVTOOLS__.attachPreact('10.19.2', options, {\n\t\t\tFragment,\n\t\t\tComponent\n\t\t});\n\t}\n}\n","import { options } from 'preact';\nimport { initDevTools } from './devtools';\n\ninitDevTools();\n\n/**\n * Display a custom label for a custom hook for the devtools panel\n * @type {<T>(value: T, name: string) => T}\n */\nexport function addHookName(value, name) {\n\tif (options._addHookName) {\n\t\toptions._addHookName(name);\n\t}\n\treturn value;\n}\n"],"names":["window","__PREACT_DEVTOOLS__","attachPreact","options","Fragment","Component","value","name","__a"],"mappings":"8QAGsB,oBAAVA,QAAyBA,OAAOC,qBAC1CD,OAAOC,oBAAoBC,aAAa,UAAWC,EAAAA,QAAS,CAC3DC,SAAAA,EAAAA,SACAC,UAAAA,EAF2DA,0BCKvD,SAAqBC,EAAOC,GAIlC,OAHIJ,EAAAA,QAAsBK,KACzBL,EAAAA,QAAOK,IAAcD,GAEfD,CACP"}
--- a/crates/librqbit/webui/node_modules/preact/devtools/package.json
+++ b/crates/librqbit/webui/node_modules/preact/devtools/package.json
@ -0,0 +1,25 @@
+{
+  "name": "preact-devtools",
+  "amdName": "preactDevtools",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Preact bridge for Preact devtools",
+  "main": "dist/devtools.js",
+  "module": "dist/devtools.module.js",
+  "umd:main": "dist/devtools.umd.js",
+  "source": "src/index.js",
+  "license": "MIT",
+  "types": "src/index.d.ts",
+  "peerDependencies": {
+    "preact": "^10.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "browser": "./dist/devtools.module.js",
+      "umd": "./dist/devtools.umd.js",
+      "import": "./dist/devtools.mjs",
+      "require": "./dist/devtools.js"
+    }
+  }
+}
--- a/crates/librqbit/webui/node_modules/preact/devtools/src/devtools.js
+++ b/crates/librqbit/webui/node_modules/preact/devtools/src/devtools.js
@ -0,0 +1,10 @@
+import { options, Fragment, Component } from 'preact';
+
+export function initDevTools() {
+	if (typeof window != 'undefined' && window.__PREACT_DEVTOOLS__) {
+		window.__PREACT_DEVTOOLS__.attachPreact('10.19.2', options, {
+			Fragment,
+			Component
+		});
+	}
+}
--- a/crates/librqbit/webui/node_modules/preact/devtools/src/index.d.ts
+++ b/crates/librqbit/webui/node_modules/preact/devtools/src/index.d.ts
@ -0,0 +1,8 @@
+/**
+ * Customize the displayed name of a useState, useReducer or useRef hook
+ * in the devtools panel.
+ *
+ * @param value Wrapped native hook.
+ * @param name Custom name
+ */
+export function addHookName<T>(value: T, name: string): T;
--- a/crates/librqbit/webui/node_modules/preact/devtools/src/index.js
+++ b/crates/librqbit/webui/node_modules/preact/devtools/src/index.js
@ -0,0 +1,15 @@
+import { options } from 'preact';
+import { initDevTools } from './devtools';
+
+initDevTools();
+
+/**
+ * Display a custom label for a custom hook for the devtools panel
+ * @type {<T>(value: T, name: string) => T}
+ */
+export function addHookName(value, name) {
+	if (options._addHookName) {
+		options._addHookName(name);
+	}
+	return value;
+}
--- a/crates/librqbit/webui/node_modules/preact/dist/preact.js
+++ b/crates/librqbit/webui/node_modules/preact/dist/preact.js
--- a/crates/librqbit/webui/node_modules/preact/dist/preact.js.map
+++ b/crates/librqbit/webui/node_modules/preact/dist/preact.js.map
--- a/crates/librqbit/webui/node_modules/preact/dist/preact.min.js
+++ b/crates/librqbit/webui/node_modules/preact/dist/preact.min.js
--- a/crates/librqbit/webui/node_modules/preact/dist/preact.min.js.map
+++ b/crates/librqbit/webui/node_modules/preact/dist/preact.min.js.map
--- a/crates/librqbit/webui/node_modules/preact/dist/preact.min.module.js
+++ b/crates/librqbit/webui/node_modules/preact/dist/preact.min.module.js
--- a/crates/librqbit/webui/node_modules/preact/dist/preact.min.module.js.map
+++ b/crates/librqbit/webui/node_modules/preact/dist/preact.min.module.js.map
--- a/crates/librqbit/webui/node_modules/preact/dist/preact.min.umd.js
+++ b/crates/librqbit/webui/node_modules/preact/dist/preact.min.umd.js
--- a/crates/librqbit/webui/node_modules/preact/dist/preact.min.umd.js.map
+++ b/crates/librqbit/webui/node_modules/preact/dist/preact.min.umd.js.map
--- a/crates/librqbit/webui/node_modules/preact/dist/preact.mjs
+++ b/crates/librqbit/webui/node_modules/preact/dist/preact.mjs
--- a/crates/librqbit/webui/node_modules/preact/dist/preact.module.js
+++ b/crates/librqbit/webui/node_modules/preact/dist/preact.module.js
--- a/crates/librqbit/webui/node_modules/preact/dist/preact.module.js.map
+++ b/crates/librqbit/webui/node_modules/preact/dist/preact.module.js.map
--- a/crates/librqbit/webui/node_modules/preact/dist/preact.umd.js
+++ b/crates/librqbit/webui/node_modules/preact/dist/preact.umd.js
--- a/crates/librqbit/webui/node_modules/preact/dist/preact.umd.js.map
+++ b/crates/librqbit/webui/node_modules/preact/dist/preact.umd.js.map
--- a/crates/librqbit/webui/node_modules/preact/hooks/LICENSE
+++ b/crates/librqbit/webui/node_modules/preact/hooks/LICENSE
@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present Jason Miller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/crates/librqbit/webui/node_modules/preact/hooks/dist/hooks.js
+++ b/crates/librqbit/webui/node_modules/preact/hooks/dist/hooks.js
@ -0,0 +1,2 @@
+var n,t,r,u,o=require("preact"),i=0,f=[],c=[],e=o.options.__b,a=o.options.__r,v=o.options.diffed,s=o.options.__c,l=o.options.unmount;function p(n,r){o.options.__h&&o.options.__h(t,n,i||r),i=0;var u=t.__H||(t.__H={__:[],__h:[]});return n>=u.__.length&&u.__.push({__V:c}),u.__[n]}function x(n){return i=1,d(P,n)}function d(r,u,o){var i=p(n++,2);if(i.t=r,!i.__c&&(i.__=[o?o(u):P(void 0,u),function(n){var t=i.__N?i.__N[0]:i.__[0],r=i.t(t,n);t!==r&&(i.__N=[r,i.__[1]],i.__c.setState({}))}],i.__c=t,!t.u)){var f=function(n,t,r){if(!i.__c.__H)return!0;var u=i.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return!n.__N}))return!c||c.call(this,n,t,r);var o=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(o=!0)}}),!(!o&&i.__c.props===n)&&(!c||c.call(this,n,t,r))};t.u=!0;var c=t.shouldComponentUpdate,e=t.componentWillUpdate;t.componentWillUpdate=function(n,t,r){if(this.__e){var u=c;c=void 0,f(n,t,r),c=u}e&&e.call(this,n,t,r)},t.shouldComponentUpdate=f}return i.__N||i.__}function m(r,u){var i=p(n++,4);!o.options.__s&&T(i.__H,u)&&(i.__=r,i.o=u,t.__h.push(i))}function h(t,r){var u=p(n++,7);return T(u.__H,r)?(u.__V=t(),u.o=r,u.__h=t,u.__V):u.__}function y(){for(var n;n=f.shift();)if(n.__P&&n.__H)try{n.__H.__h.forEach(A),n.__H.__h.forEach(F),n.__H.__h=[]}catch(t){n.__H.__h=[],o.options.__e(t,n.__v)}}o.options.__b=function(n){t=null,e&&e(n)},o.options.__r=function(u){a&&a(u),n=0;var o=(t=u.__c).__H;o&&(r===t?(o.__h=[],t.__h=[],o.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c,n.__N=n.o=void 0})):(o.__h.forEach(A),o.__h.forEach(F),o.__h=[],n=0)),r=t},o.options.diffed=function(n){v&&v(n);var i=n.__c;i&&i.__H&&(i.__H.__h.length&&(1!==f.push(i)&&u===o.options.requestAnimationFrame||((u=o.options.requestAnimationFrame)||q)(y)),i.__H.__.forEach(function(n){n.o&&(n.__H=n.o),n.__V!==c&&(n.__=n.__V),n.o=void 0,n.__V=c})),r=t=null},o.options.__c=function(n,t){t.some(function(n){try{n.__h.forEach(A),n.__h=n.__h.filter(function(n){return!n.__||F(n)})}catch(r){t.some(function(n){n.__h&&(n.__h=[])}),t=[],o.options.__e(r,n.__v)}}),s&&s(n,t)},o.options.unmount=function(n){l&&l(n);var t,r=n.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{A(n)}catch(n){t=n}}),r.__H=void 0,t&&o.options.__e(t,r.__v))};var _="function"==typeof requestAnimationFrame;function q(n){var t,r=function(){clearTimeout(u),_&&cancelAnimationFrame(t),setTimeout(n)},u=setTimeout(r,100);_&&(t=requestAnimationFrame(r))}function A(n){var r=t,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),t=r}function F(n){var r=t;n.__c=n.__(),t=r}function T(n,t){return!n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function P(n,t){return"function"==typeof t?t(n):t}exports.useCallback=function(n,t){return i=8,h(function(){return n},t)},exports.useContext=function(r){var u=t.context[r.__c],o=p(n++,9);return o.c=r,u?(null==o.__&&(o.__=!0,u.sub(t)),u.props.value):r.__},exports.useDebugValue=function(n,t){o.options.useDebugValue&&o.options.useDebugValue(t?t(n):n)},exports.useEffect=function(r,u){var i=p(n++,3);!o.options.__s&&T(i.__H,u)&&(i.__=r,i.o=u,t.__H.__h.push(i))},exports.useErrorBoundary=function(r){var u=p(n++,10),o=x();return u.__=r,t.componentDidCatch||(t.componentDidCatch=function(n,t){u.__&&u.__(n,t),o[1](n)}),[o[0],function(){o[1](void 0)}]},exports.useId=function(){var r=p(n++,11);if(!r.__){for(var u=t.__v;null!==u&&!u.__m&&null!==u.__;)u=u.__;var o=u.__m||(u.__m=[0,0]);r.__="P"+o[0]+"-"+o[1]++}return r.__},exports.useImperativeHandle=function(n,t,r){i=6,m(function(){return"function"==typeof n?(n(t()),function(){return n(null)}):n?(n.current=t(),function(){return n.current=null}):void 0},null==r?r:r.concat(n))},exports.useLayoutEffect=m,exports.useMemo=h,exports.useReducer=d,exports.useRef=function(n){return i=5,h(function(){return{current:n}},[])},exports.useState=x;
+//# sourceMappingURL=hooks.js.map
--- a/crates/librqbit/webui/node_modules/preact/hooks/dist/hooks.js.map
+++ b/crates/librqbit/webui/node_modules/preact/hooks/dist/hooks.js.map
--- a/crates/librqbit/webui/node_modules/preact/hooks/dist/hooks.mjs
+++ b/crates/librqbit/webui/node_modules/preact/hooks/dist/hooks.mjs
@ -0,0 +1,2 @@
+import{options as n}from"preact";var t,r,u,i,o=0,f=[],c=[],e=n.__b,a=n.__r,v=n.diffed,l=n.__c,m=n.unmount;function d(t,u){n.__h&&n.__h(r,t,o||u),o=0;var i=r.__H||(r.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:c}),i.__[t]}function h(n){return o=1,s(B,n)}function s(n,u,i){var o=d(t++,2);if(o.t=n,!o.__c&&(o.__=[i?i(u):B(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}))}],o.__c=r,!r.u)){var f=function(n,t,r){if(!o.__c.__H)return!0;var u=o.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return!n.__N}))return!c||c.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0)}}),!(!i&&o.__c.props===n)&&(!c||c.call(this,n,t,r))};r.u=!0;var c=r.shouldComponentUpdate,e=r.componentWillUpdate;r.componentWillUpdate=function(n,t,r){if(this.__e){var u=c;c=void 0,f(n,t,r),c=u}e&&e.call(this,n,t,r)},r.shouldComponentUpdate=f}return o.__N||o.__}function p(u,i){var o=d(t++,3);!n.__s&&z(o.__H,i)&&(o.__=u,o.i=i,r.__H.__h.push(o))}function y(u,i){var o=d(t++,4);!n.__s&&z(o.__H,i)&&(o.__=u,o.i=i,r.__h.push(o))}function _(n){return o=5,F(function(){return{current:n}},[])}function A(n,t,r){o=6,y(function(){return"function"==typeof n?(n(t()),function(){return n(null)}):n?(n.current=t(),function(){return n.current=null}):void 0},null==r?r:r.concat(n))}function F(n,r){var u=d(t++,7);return z(u.__H,r)?(u.__V=n(),u.i=r,u.__h=n,u.__V):u.__}function T(n,t){return o=8,F(function(){return n},t)}function q(n){var u=r.context[n.__c],i=d(t++,9);return i.c=n,u?(null==i.__&&(i.__=!0,u.sub(r)),u.props.value):n.__}function x(t,r){n.useDebugValue&&n.useDebugValue(r?r(t):t)}function P(n){var u=d(t++,10),i=h();return u.__=n,r.componentDidCatch||(r.componentDidCatch=function(n,t){u.__&&u.__(n,t),i[1](n)}),[i[0],function(){i[1](void 0)}]}function V(){var n=d(t++,11);if(!n.__){for(var u=r.__v;null!==u&&!u.__m&&null!==u.__;)u=u.__;var i=u.__m||(u.__m=[0,0]);n.__="P"+i[0]+"-"+i[1]++}return n.__}function b(){for(var t;t=f.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(k),t.__H.__h.forEach(w),t.__H.__h=[]}catch(r){t.__H.__h=[],n.__e(r,t.__v)}}n.__b=function(n){r=null,e&&e(n)},n.__r=function(n){a&&a(n),t=0;var i=(r=n.__c).__H;i&&(u===r?(i.__h=[],r.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c,n.__N=n.i=void 0})):(i.__h.forEach(k),i.__h.forEach(w),i.__h=[],t=0)),u=r},n.diffed=function(t){v&&v(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==f.push(o)&&i===n.requestAnimationFrame||((i=n.requestAnimationFrame)||j)(b)),o.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==c&&(n.__=n.__V),n.i=void 0,n.__V=c})),u=r=null},n.__c=function(t,r){r.some(function(t){try{t.__h.forEach(k),t.__h=t.__h.filter(function(n){return!n.__||w(n)})}catch(u){r.some(function(n){n.__h&&(n.__h=[])}),r=[],n.__e(u,t.__v)}}),l&&l(t,r)},n.unmount=function(t){m&&m(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{k(n)}catch(n){r=n}}),u.__H=void 0,r&&n.__e(r,u.__v))};var g="function"==typeof requestAnimationFrame;function j(n){var t,r=function(){clearTimeout(u),g&&cancelAnimationFrame(t),setTimeout(n)},u=setTimeout(r,100);g&&(t=requestAnimationFrame(r))}function k(n){var t=r,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r=t}function w(n){var t=r;n.__c=n.__(),r=t}function z(n,t){return!n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function B(n,t){return"function"==typeof t?t(n):t}export{T as useCallback,q as useContext,x as useDebugValue,p as useEffect,P as useErrorBoundary,V as useId,A as useImperativeHandle,y as useLayoutEffect,F as useMemo,s as useReducer,_ as useRef,h as useState};
+//# sourceMappingURL=hooks.module.js.map
--- a/crates/librqbit/webui/node_modules/preact/hooks/dist/hooks.module.js
+++ b/crates/librqbit/webui/node_modules/preact/hooks/dist/hooks.module.js
@ -0,0 +1,2 @@
+import{options as n}from"preact";var t,r,u,i,o=0,f=[],c=[],e=n.__b,a=n.__r,v=n.diffed,l=n.__c,m=n.unmount;function d(t,u){n.__h&&n.__h(r,t,o||u),o=0;var i=r.__H||(r.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:c}),i.__[t]}function h(n){return o=1,s(B,n)}function s(n,u,i){var o=d(t++,2);if(o.t=n,!o.__c&&(o.__=[i?i(u):B(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}))}],o.__c=r,!r.u)){var f=function(n,t,r){if(!o.__c.__H)return!0;var u=o.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return!n.__N}))return!c||c.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0)}}),!(!i&&o.__c.props===n)&&(!c||c.call(this,n,t,r))};r.u=!0;var c=r.shouldComponentUpdate,e=r.componentWillUpdate;r.componentWillUpdate=function(n,t,r){if(this.__e){var u=c;c=void 0,f(n,t,r),c=u}e&&e.call(this,n,t,r)},r.shouldComponentUpdate=f}return o.__N||o.__}function p(u,i){var o=d(t++,3);!n.__s&&z(o.__H,i)&&(o.__=u,o.i=i,r.__H.__h.push(o))}function y(u,i){var o=d(t++,4);!n.__s&&z(o.__H,i)&&(o.__=u,o.i=i,r.__h.push(o))}function _(n){return o=5,F(function(){return{current:n}},[])}function A(n,t,r){o=6,y(function(){return"function"==typeof n?(n(t()),function(){return n(null)}):n?(n.current=t(),function(){return n.current=null}):void 0},null==r?r:r.concat(n))}function F(n,r){var u=d(t++,7);return z(u.__H,r)?(u.__V=n(),u.i=r,u.__h=n,u.__V):u.__}function T(n,t){return o=8,F(function(){return n},t)}function q(n){var u=r.context[n.__c],i=d(t++,9);return i.c=n,u?(null==i.__&&(i.__=!0,u.sub(r)),u.props.value):n.__}function x(t,r){n.useDebugValue&&n.useDebugValue(r?r(t):t)}function P(n){var u=d(t++,10),i=h();return u.__=n,r.componentDidCatch||(r.componentDidCatch=function(n,t){u.__&&u.__(n,t),i[1](n)}),[i[0],function(){i[1](void 0)}]}function V(){var n=d(t++,11);if(!n.__){for(var u=r.__v;null!==u&&!u.__m&&null!==u.__;)u=u.__;var i=u.__m||(u.__m=[0,0]);n.__="P"+i[0]+"-"+i[1]++}return n.__}function b(){for(var t;t=f.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(k),t.__H.__h.forEach(w),t.__H.__h=[]}catch(r){t.__H.__h=[],n.__e(r,t.__v)}}n.__b=function(n){r=null,e&&e(n)},n.__r=function(n){a&&a(n),t=0;var i=(r=n.__c).__H;i&&(u===r?(i.__h=[],r.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c,n.__N=n.i=void 0})):(i.__h.forEach(k),i.__h.forEach(w),i.__h=[],t=0)),u=r},n.diffed=function(t){v&&v(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==f.push(o)&&i===n.requestAnimationFrame||((i=n.requestAnimationFrame)||j)(b)),o.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==c&&(n.__=n.__V),n.i=void 0,n.__V=c})),u=r=null},n.__c=function(t,r){r.some(function(t){try{t.__h.forEach(k),t.__h=t.__h.filter(function(n){return!n.__||w(n)})}catch(u){r.some(function(n){n.__h&&(n.__h=[])}),r=[],n.__e(u,t.__v)}}),l&&l(t,r)},n.unmount=function(t){m&&m(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{k(n)}catch(n){r=n}}),u.__H=void 0,r&&n.__e(r,u.__v))};var g="function"==typeof requestAnimationFrame;function j(n){var t,r=function(){clearTimeout(u),g&&cancelAnimationFrame(t),setTimeout(n)},u=setTimeout(r,100);g&&(t=requestAnimationFrame(r))}function k(n){var t=r,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r=t}function w(n){var t=r;n.__c=n.__(),r=t}function z(n,t){return!n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function B(n,t){return"function"==typeof t?t(n):t}export{T as useCallback,q as useContext,x as useDebugValue,p as useEffect,P as useErrorBoundary,V as useId,A as useImperativeHandle,y as useLayoutEffect,F as useMemo,s as useReducer,_ as useRef,h as useState};
+//# sourceMappingURL=hooks.module.js.map
--- a/crates/librqbit/webui/node_modules/preact/hooks/dist/hooks.module.js.map
+++ b/crates/librqbit/webui/node_modules/preact/hooks/dist/hooks.module.js.map
--- a/crates/librqbit/webui/node_modules/preact/hooks/dist/hooks.umd.js
+++ b/crates/librqbit/webui/node_modules/preact/hooks/dist/hooks.umd.js
@ -0,0 +1,2 @@
+!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("preact")):"function"==typeof define&&define.amd?define(["exports","preact"],t):t((n||self).preactHooks={},n.preact)}(this,function(n,t){var u,r,i,o,f=0,e=[],c=[],a=t.options.__b,v=t.options.__r,l=t.options.diffed,d=t.options.__c,s=t.options.unmount;function p(n,u){t.options.__h&&t.options.__h(r,n,f||u),f=0;var i=r.__H||(r.__H={__:[],__h:[]});return n>=i.__.length&&i.__.push({__V:c}),i.__[n]}function h(n){return f=1,y(g,n)}function y(n,t,i){var o=p(u++,2);if(o.t=n,!o.__c&&(o.__=[i?i(t):g(void 0,t),function(n){var t=o.__N?o.__N[0]:o.__[0],u=o.t(t,n);t!==u&&(o.__N=[u,o.__[1]],o.__c.setState({}))}],o.__c=r,!r.u)){var f=function(n,t,u){if(!o.__c.__H)return!0;var r=o.__c.__H.__.filter(function(n){return n.__c});if(r.every(function(n){return!n.__N}))return!e||e.call(this,n,t,u);var i=!1;return r.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0)}}),!(!i&&o.__c.props===n)&&(!e||e.call(this,n,t,u))};r.u=!0;var e=r.shouldComponentUpdate,c=r.componentWillUpdate;r.componentWillUpdate=function(n,t,u){if(this.__e){var r=e;e=void 0,f(n,t,u),e=r}c&&c.call(this,n,t,u)},r.shouldComponentUpdate=f}return o.__N||o.__}function m(n,i){var o=p(u++,4);!t.options.__s&&F(o.__H,i)&&(o.__=n,o.i=i,r.__h.push(o))}function _(n,t){var r=p(u++,7);return F(r.__H,t)?(r.__V=n(),r.i=t,r.__h=n,r.__V):r.__}function T(){for(var n;n=e.shift();)if(n.__P&&n.__H)try{n.__H.__h.forEach(x),n.__H.__h.forEach(A),n.__H.__h=[]}catch(u){n.__H.__h=[],t.options.__e(u,n.__v)}}t.options.__b=function(n){r=null,a&&a(n)},t.options.__r=function(n){v&&v(n),u=0;var t=(r=n.__c).__H;t&&(i===r?(t.__h=[],r.__h=[],t.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c,n.__N=n.i=void 0})):(t.__h.forEach(x),t.__h.forEach(A),t.__h=[],u=0)),i=r},t.options.diffed=function(n){l&&l(n);var u=n.__c;u&&u.__H&&(u.__H.__h.length&&(1!==e.push(u)&&o===t.options.requestAnimationFrame||((o=t.options.requestAnimationFrame)||q)(T)),u.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==c&&(n.__=n.__V),n.i=void 0,n.__V=c})),i=r=null},t.options.__c=function(n,u){u.some(function(n){try{n.__h.forEach(x),n.__h=n.__h.filter(function(n){return!n.__||A(n)})}catch(r){u.some(function(n){n.__h&&(n.__h=[])}),u=[],t.options.__e(r,n.__v)}}),d&&d(n,u)},t.options.unmount=function(n){s&&s(n);var u,r=n.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{x(n)}catch(n){u=n}}),r.__H=void 0,u&&t.options.__e(u,r.__v))};var b="function"==typeof requestAnimationFrame;function q(n){var t,u=function(){clearTimeout(r),b&&cancelAnimationFrame(t),setTimeout(n)},r=setTimeout(u,100);b&&(t=requestAnimationFrame(u))}function x(n){var t=r,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r=t}function A(n){var t=r;n.__c=n.__(),r=t}function F(n,t){return!n||n.length!==t.length||t.some(function(t,u){return t!==n[u]})}function g(n,t){return"function"==typeof t?t(n):t}n.useCallback=function(n,t){return f=8,_(function(){return n},t)},n.useContext=function(n){var t=r.context[n.__c],i=p(u++,9);return i.c=n,t?(null==i.__&&(i.__=!0,t.sub(r)),t.props.value):n.__},n.useDebugValue=function(n,u){t.options.useDebugValue&&t.options.useDebugValue(u?u(n):n)},n.useEffect=function(n,i){var o=p(u++,3);!t.options.__s&&F(o.__H,i)&&(o.__=n,o.i=i,r.__H.__h.push(o))},n.useErrorBoundary=function(n){var t=p(u++,10),i=h();return t.__=n,r.componentDidCatch||(r.componentDidCatch=function(n,u){t.__&&t.__(n,u),i[1](n)}),[i[0],function(){i[1](void 0)}]},n.useId=function(){var n=p(u++,11);if(!n.__){for(var t=r.__v;null!==t&&!t.__m&&null!==t.__;)t=t.__;var i=t.__m||(t.__m=[0,0]);n.__="P"+i[0]+"-"+i[1]++}return n.__},n.useImperativeHandle=function(n,t,u){f=6,m(function(){return"function"==typeof n?(n(t()),function(){return n(null)}):n?(n.current=t(),function(){return n.current=null}):void 0},null==u?u:u.concat(n))},n.useLayoutEffect=m,n.useMemo=_,n.useReducer=y,n.useRef=function(n){return f=5,_(function(){return{current:n}},[])},n.useState=h});
+//# sourceMappingURL=hooks.umd.js.map
--- a/crates/librqbit/webui/node_modules/preact/hooks/dist/hooks.umd.js.map
+++ b/crates/librqbit/webui/node_modules/preact/hooks/dist/hooks.umd.js.map
--- a/crates/librqbit/webui/node_modules/preact/hooks/package.json
+++ b/crates/librqbit/webui/node_modules/preact/hooks/package.json
@ -0,0 +1,35 @@
+{
+  "name": "preact-hooks",
+  "amdName": "preactHooks",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Hook addon for Preact",
+  "main": "dist/hooks.js",
+  "module": "dist/hooks.module.js",
+  "umd:main": "dist/hooks.umd.js",
+  "source": "src/index.js",
+  "license": "MIT",
+  "types": "src/index.d.ts",
+  "scripts": {
+    "build": "microbundle build --raw",
+    "dev": "microbundle watch --raw --format cjs",
+    "test": "npm-run-all build --parallel test:karma",
+    "test:karma": "karma start test/karma.conf.js --single-run",
+    "test:karma:watch": "karma start test/karma.conf.js --no-single-run"
+  },
+  "peerDependencies": {
+    "preact": "^10.0.0"
+  },
+  "mangle": {
+    "regex": "^_"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "browser": "./dist/hooks.module.js",
+      "umd": "./dist/hooks.umd.js",
+      "import": "./dist/hooks.mjs",
+      "require": "./dist/hooks.js"
+    }
+  }
+}
--- a/crates/librqbit/webui/node_modules/preact/hooks/src/index.d.ts
+++ b/crates/librqbit/webui/node_modules/preact/hooks/src/index.d.ts
@ -0,0 +1,142 @@
+import { ErrorInfo, PreactContext, Ref as PreactRef } from '../..';
+
+type Inputs = ReadonlyArray<unknown>;
+
+export type StateUpdater<S> = (value: S | ((prevState: S) => S)) => void;
+/**
+ * Returns a stateful value, and a function to update it.
+ * @param initialState The initial value (or a function that returns the initial value)
+ */
+export function useState<S>(initialState: S | (() => S)): [S, StateUpdater<S>];
+
+export function useState<S = undefined>(): [
+	S | undefined,
+	StateUpdater<S | undefined>
+];
+
+export type Reducer<S, A> = (prevState: S, action: A) => S;
+export type Dispatch<A> = (action: A) => void;
+/**
+ * An alternative to `useState`.
+ *
+ * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
+ * multiple sub-values. It also lets you optimize performance for components that trigger deep
+ * updates because you can pass `dispatch` down instead of callbacks.
+ * @param reducer Given the current state and an action, returns the new state
+ * @param initialState The initial value to store as state
+ */
+export function useReducer<S, A>(
+	reducer: Reducer<S, A>,
+	initialState: S
+): [S, Dispatch<A>];
+
+/**
+ * An alternative to `useState`.
+ *
+ * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
+ * multiple sub-values. It also lets you optimize performance for components that trigger deep
+ * updates because you can pass `dispatch` down instead of callbacks.
+ * @param reducer Given the current state and an action, returns the new state
+ * @param initialArg The initial argument to pass to the `init` function
+ * @param init A function that, given the `initialArg`, returns the initial value to store as state
+ */
+export function useReducer<S, A, I>(
+	reducer: Reducer<S, A>,
+	initialArg: I,
+	init: (arg: I) => S
+): [S, Dispatch<A>];
+
+/** @deprecated Use the `Ref` type instead. */
+type PropRef<T> = MutableRef<T>;
+interface Ref<T> {
+	readonly current: T | null;
+}
+
+interface MutableRef<T> {
+	current: T;
+}
+
+/**
+ * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
+ * (`initialValue`). The returned object will persist for the full lifetime of the component.
+ *
+ * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
+ * value around similar to how you’d use instance fields in classes.
+ *
+ * @param initialValue the initial value to store in the ref object
+ */
+export function useRef<T>(initialValue: T): MutableRef<T>;
+export function useRef<T>(initialValue: T | null): Ref<T>;
+export function useRef<T = undefined>(): MutableRef<T | undefined>;
+
+type EffectCallback = () => void | (() => void);
+/**
+ * Accepts a function that contains imperative, possibly effectful code.
+ * The effects run after browser paint, without blocking it.
+ *
+ * @param effect Imperative function that can return a cleanup function
+ * @param inputs If present, effect will only activate if the values in the list change (using ===).
+ */
+export function useEffect(effect: EffectCallback, inputs?: Inputs): void;
+
+type CreateHandle = () => object;
+
+/**
+ * @param ref The ref that will be mutated
+ * @param create The function that will be executed to get the value that will be attached to
+ * ref.current
+ * @param inputs If present, effect will only activate if the values in the list change (using ===).
+ */
+export function useImperativeHandle<T, R extends T>(
+	ref: PreactRef<T>,
+	create: () => R,
+	inputs?: Inputs
+): void;
+
+/**
+ * Accepts a function that contains imperative, possibly effectful code.
+ * Use this to read layout from the DOM and synchronously re-render.
+ * Updates scheduled inside `useLayoutEffect` will be flushed synchronously, after all DOM mutations but before the browser has a chance to paint.
+ * Prefer the standard `useEffect` hook when possible to avoid blocking visual updates.
+ *
+ * @param effect Imperative function that can return a cleanup function
+ * @param inputs If present, effect will only activate if the values in the list change (using ===).
+ */
+export function useLayoutEffect(effect: EffectCallback, inputs?: Inputs): void;
+
+/**
+ * Returns a memoized version of the callback that only changes if one of the `inputs`
+ * has changed (using ===).
+ */
+export function useCallback<T extends Function>(callback: T, inputs: Inputs): T;
+
+/**
+ * Pass a factory function and an array of inputs.
+ * useMemo will only recompute the memoized value when one of the inputs has changed.
+ * This optimization helps to avoid expensive calculations on every render.
+ * If no array is provided, a new value will be computed whenever a new function instance is passed as the first argument.
+ */
+// for `inputs`, allow undefined, but don't make it optional as that is very likely a mistake
+export function useMemo<T>(factory: () => T, inputs: Inputs | undefined): T;
+
+/**
+ * Returns the current context value, as given by the nearest context provider for the given context.
+ * When the provider updates, this Hook will trigger a rerender with the latest context value.
+ *
+ * @param context The context you want to use
+ */
+export function useContext<T>(context: PreactContext<T>): T;
+
+/**
+ * Customize the displayed value in the devtools panel.
+ *
+ * @param value Custom hook name or object that is passed to formatter
+ * @param formatter Formatter to modify value before sending it to the devtools
+ */
+export function useDebugValue<T>(value: T, formatter?: (value: T) => any): void;
+
+export function useErrorBoundary(
+	callback?: (error: any, errorInfo: ErrorInfo) => Promise<void> | void
+): [any, () => void];
+
+export function useId(): string;
--- a/Show more
+++ b/Show more
				`@ -0,0 +1 @@`
				`module.exports = require('preact/test-utils');`
				`@ -0,0 +1 @@`
				{"version":3,"file":"devtools.js","sources":["../src/devtools.js","../src/index.js"],"sourcesContent":["import { options, Fragment, Component } from 'preact';\n\nexport function initDevTools() {\n\tif (typeof window != 'undefined' && window.__PREACT_DEVTOOLS__) {\n\t\twindow.__PREACT_DEVTOOLS__.attachPreact('10.19.2', options, {\n\t\t\tFragment,\n\t\t\tComponent\n\t\t});\n\t}\n}\n","import { options } from 'preact';\nimport { initDevTools } from './devtools';\n\ninitDevTools();\n\n/*\n Display a custom label for a custom hook for the devtools panel\n * @type {<T>(value: T, name: string) => T}\n */\nexport function addHookName(value, name) {\n\tif (options._addHookName) {\n\t\toptions._addHookName(name);\n\t}\n\treturn value;\n}\n"],"names":["window","__PREACT_DEVTOOLS__","attachPreact","options","Fragment","Component","value","name","__a"],"mappings":"wBAGsB,oBAAVA,QAAyBA,OAAOC,qBAC1CD,OAAOC,oBAAoBC,aAAa,UAAWC,EAAAA,QAAS,CAC3DC,SAAAA,EAAAA,SACAC,UAAAA,EAF2DA,gCCKvD,SAAqBC,EAAOC,GAIlC,OAHIJ,EAAAA,QAAsBK,KACzBL,EAAAA,QAAOK,IAAcD,GAEfD,CACP"}
				`@ -0,0 +1 @@`
				{"version":3,"file":"devtools.module.js","sources":["../src/index.js","../src/devtools.js"],"sourcesContent":["import { options } from 'preact';\nimport { initDevTools } from './devtools';\n\ninitDevTools();\n\n/*\n Display a custom label for a custom hook for the devtools panel\n * @type {<T>(value: T, name: string) => T}\n */\nexport function addHookName(value, name) {\n\tif (options._addHookName) {\n\t\toptions._addHookName(name);\n\t}\n\treturn value;\n}\n","import { options, Fragment, Component } from 'preact';\n\nexport function initDevTools() {\n\tif (typeof window != 'undefined' && window.__PREACT_DEVTOOLS__) {\n\t\twindow.__PREACT_DEVTOOLS__.attachPreact('10.19.2', options, {\n\t\t\tFragment,\n\t\t\tComponent\n\t\t});\n\t}\n}\n"],"names":["addHookName","value","name","options","__a","window","__PREACT_DEVTOOLS__","attachPreact","Fragment","Component"],"mappings":"8DASO,SAASA,EAAYC,EAAOC,GAIlC,OAHIC,EAAsBC,KACzBD,EAAOC,IAAcF,GAEfD,CACP,CCXqB,oBAAVI,QAAyBA,OAAOC,qBAC1CD,OAAOC,oBAAoBC,aAAa,UAAWJ,EAAS,CAC3DK,SAAAA,EACAC,UAAAA"}
				`@ -0,0 +1 @@`
				{"version":3,"file":"devtools.umd.js","sources":["../src/devtools.js","../src/index.js"],"sourcesContent":["import { options, Fragment, Component } from 'preact';\n\nexport function initDevTools() {\n\tif (typeof window != 'undefined' && window.__PREACT_DEVTOOLS__) {\n\t\twindow.__PREACT_DEVTOOLS__.attachPreact('10.19.2', options, {\n\t\t\tFragment,\n\t\t\tComponent\n\t\t});\n\t}\n}\n","import { options } from 'preact';\nimport { initDevTools } from './devtools';\n\ninitDevTools();\n\n/*\n Display a custom label for a custom hook for the devtools panel\n * @type {<T>(value: T, name: string) => T}\n */\nexport function addHookName(value, name) {\n\tif (options._addHookName) {\n\t\toptions._addHookName(name);\n\t}\n\treturn value;\n}\n"],"names":["window","__PREACT_DEVTOOLS__","attachPreact","options","Fragment","Component","value","name","__a"],"mappings":"8QAGsB,oBAAVA,QAAyBA,OAAOC,qBAC1CD,OAAOC,oBAAoBC,aAAa,UAAWC,EAAAA,QAAS,CAC3DC,SAAAA,EAAAA,SACAC,UAAAA,EAF2DA,0BCKvD,SAAqBC,EAAOC,GAIlC,OAHIJ,EAAAA,QAAsBK,KACzBL,EAAAA,QAAOK,IAAcD,GAEfD,CACP"}