diff --git a/.zed/settings.json b/.zed/settings.json
index 0ec3f89ec..391fdabca 100644
--- a/.zed/settings.json
+++ b/.zed/settings.json
@@ -15,8 +15,8 @@
     "**/modern-screenshot/*/index.mjs",
     "**/solidjs-signals/*/dist/prod.js",
     "uFuzzy.mjs",
-    "lightweight-charts.standalone.production.mjs",
+    "lightweight-charts.standalone.production.mjs"
     // "scripts/packages",
-    "dist"
+    // "dist"
   ]
 }
diff --git a/Cargo.toml b/Cargo.toml
index 4577ac48c..108e53172 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -90,4 +90,3 @@ ci = "github"
 allow-dirty = ["ci"]
 installers = []
 targets = ["aarch64-apple-darwin", "aarch64-unknown-linux-gnu", "x86_64-unknown-linux-gnu"]
-rust-toolchain-version = "1.89"
diff --git a/crates/brk_computer/src/blks.rs b/crates/brk_computer/src/blks.rs
index cc60872ab..606cb4187 100644
--- a/crates/brk_computer/src/blks.rs
+++ b/crates/brk_computer/src/blks.rs
@@ -3,7 +3,7 @@ use std::path::Path;
 use brk_error::Result;
 use brk_indexer::Indexer;
 use brk_parser::Parser;
-use brk_structs::{BlkPosition, Height, StoredU32, TxIndex, Version};
+use brk_structs::{BlkPosition, Height, TxIndex, Version};
 use vecdb::{
     AnyCollectableVec, AnyIterableVec, AnyStoredVec, AnyVec, CompressedVec, Database, Exit,
     GenericStoredVec, PAGE_SIZE, VecIterator,
@@ -16,9 +16,7 @@ pub struct Vecs {
     db: Database,
 
     pub height_to_position: CompressedVec<Height, BlkPosition>,
-    pub height_to_len: CompressedVec<Height, StoredU32>,
     pub txindex_to_position: CompressedVec<TxIndex, BlkPosition>,
-    pub txindex_to_len: CompressedVec<TxIndex, StoredU32>,
 }
 
 impl Vecs {
@@ -34,13 +32,11 @@ impl Vecs {
                 "position",
                 version + Version::TWO,
             )?,
-            height_to_len: CompressedVec::forced_import(&db, "len", version + Version::TWO)?,
             txindex_to_position: CompressedVec::forced_import(
                 &db,
                 "position",
                 version + Version::TWO,
             )?,
-            txindex_to_len: CompressedVec::forced_import(&db, "len", version + Version::TWO)?,
 
             db,
         };
@@ -104,9 +100,6 @@ impl Vecs {
                     exit,
                 )?;
 
-                self.height_to_len
-                    .forced_push_at(height, block.metadata().len().into(), exit)?;
-
                 let txindex = height_to_first_txindex_iter.unwrap_get_inner(height);
 
                 block.tx_metadata().iter().enumerate().try_for_each(
@@ -117,8 +110,6 @@ impl Vecs {
                             metadata.position(),
                             exit,
                         )?;
-                        self.txindex_to_len
-                            .forced_push_at(txindex, metadata.len().into(), exit)?;
                         Ok(())
                     },
                 )?;
@@ -126,18 +117,14 @@ impl Vecs {
                 if *height % 1_000 == 0 {
                     let _lock = exit.lock();
                     self.height_to_position.flush()?;
-                    self.height_to_len.flush()?;
                     self.txindex_to_position.flush()?;
-                    self.txindex_to_len.flush()?;
                 }
                 Ok(())
             })?;
 
         let _lock = exit.lock();
         self.height_to_position.flush()?;
-        self.height_to_len.flush()?;
         self.txindex_to_position.flush()?;
-        self.txindex_to_len.flush()?;
 
         Ok(())
     }
@@ -146,9 +133,7 @@ impl Vecs {
         Box::new(
             [
                 &self.height_to_position as &dyn AnyCollectableVec,
-                &self.height_to_len,
                 &self.txindex_to_position,
-                &self.txindex_to_len,
             ]
             .into_iter(),
         )
diff --git a/crates/brk_server/src/api/mod.rs b/crates/brk_server/src/api/mod.rs
index 81d24ba34..27172d43a 100644
--- a/crates/brk_server/src/api/mod.rs
+++ b/crates/brk_server/src/api/mod.rs
@@ -12,7 +12,6 @@ use axum::{
     routing::get,
 };
 use bitcoin::{Address, Network, Transaction, consensus::Decodable};
-use bitcoincore_rpc::bitcoin;
 use brk_interface::{IdParam, Index, PaginatedIndexParam, PaginationParam, Params, ParamsOpt};
 use brk_parser::XORIndex;
 use brk_structs::{
@@ -182,7 +181,7 @@ impl ApiRoutes for Router<AppState> {
                     let computer = interface.computer();
 
                     let position = computer.blks.txindex_to_position.iter().unwrap_get_inner(txindex);
-                    let len = computer.blks.txindex_to_len.iter().unwrap_get_inner(txindex);
+                    let len = indexer.vecs.txindex_to_total_size.iter().unwrap_get_inner(txindex);
 
                     let blk_index_to_blk_path = parser.blk_index_to_blk_path();
 
diff --git a/rust-toolchain.toml b/rust-toolchain.toml
deleted file mode 100644
index b67e7d534..000000000
--- a/rust-toolchain.toml
+++ /dev/null
@@ -1,2 +0,0 @@
-[toolchain]
-channel = "1.89.0"
diff --git a/websites/bitview/scripts/chart.js b/websites/bitview/scripts/core/chart.js
similarity index 99%
rename from websites/bitview/scripts/chart.js
rename to websites/bitview/scripts/core/chart.js
index b0f8733cc..29fe2830f 100644
--- a/websites/bitview/scripts/chart.js
+++ b/websites/bitview/scripts/core/chart.js
@@ -1,6 +1,6 @@
 // @ts-check
 
-/** @import { IChartApi, ISeriesApi as _ISeriesApi, SeriesDefinition, SingleValueData as _SingleValueData, CandlestickData as _CandlestickData, BaselineData as _BaselineData, HistogramData as _HistogramData, SeriesType, IPaneApi, LineSeriesPartialOptions as _LineSeriesPartialOptions, HistogramSeriesPartialOptions as _HistogramSeriesPartialOptions, BaselineSeriesPartialOptions as _BaselineSeriesPartialOptions, CandlestickSeriesPartialOptions as _CandlestickSeriesPartialOptions, WhitespaceData, DeepPartial, ChartOptions, Time, LineData as _LineData } from './packages/lightweight-charts/5.0.8/dist/typings' */
+/** @import { IChartApi, ISeriesApi as _ISeriesApi, SeriesDefinition, SingleValueData as _SingleValueData, CandlestickData as _CandlestickData, BaselineData as _BaselineData, HistogramData as _HistogramData, SeriesType, IPaneApi, LineSeriesPartialOptions as _LineSeriesPartialOptions, HistogramSeriesPartialOptions as _HistogramSeriesPartialOptions, BaselineSeriesPartialOptions as _BaselineSeriesPartialOptions, CandlestickSeriesPartialOptions as _CandlestickSeriesPartialOptions, WhitespaceData, DeepPartial, ChartOptions, Time, LineData as _LineData } from '../packages/lightweight-charts/5.0.8/dist/typings' */
 
 /**
  * @typedef {[number, number, number, number]} OHLCTuple
@@ -46,7 +46,7 @@ import {
   LineSeries,
   BaselineSeries,
   // } from "./5.0.8/dist/lightweight-charts.standalone.development.mjs";
-} from "./packages/lightweight-charts/5.0.8/dist/lightweight-charts.standalone.production.mjs";
+} from "../packages/lightweight-charts/5.0.8/dist/lightweight-charts.standalone.production.mjs";
 
 const oklchToRGBA = createOklchToRGBA();
 
diff --git a/websites/bitview/scripts/core/colors.js b/websites/bitview/scripts/core/colors.js
new file mode 100644
index 000000000..09850a92d
--- /dev/null
+++ b/websites/bitview/scripts/core/colors.js
@@ -0,0 +1,120 @@
+/**
+ * @import { Accessor } from "../packages/solidjs-signals/wrapper";
+ */
+
+const globalComputedStyle = getComputedStyle(window.document.documentElement);
+
+/**
+ * @param {Accessor<boolean>} dark
+ */
+export function createColors(dark) {
+  /**
+   * @param {string} color
+   */
+  function getColor(color) {
+    return globalComputedStyle.getPropertyValue(`--${color}`);
+  }
+  function red() {
+    return getColor("red");
+  }
+  function orange() {
+    return getColor("orange");
+  }
+  function amber() {
+    return getColor("amber");
+  }
+  function yellow() {
+    return getColor("yellow");
+  }
+  function avocado() {
+    return getColor("avocado");
+  }
+  function lime() {
+    return getColor("lime");
+  }
+  function green() {
+    return getColor("green");
+  }
+  function emerald() {
+    return getColor("emerald");
+  }
+  function teal() {
+    return getColor("teal");
+  }
+  function cyan() {
+    return getColor("cyan");
+  }
+  function sky() {
+    return getColor("sky");
+  }
+  function blue() {
+    return getColor("blue");
+  }
+  function indigo() {
+    return getColor("indigo");
+  }
+  function violet() {
+    return getColor("violet");
+  }
+  function purple() {
+    return getColor("purple");
+  }
+  function fuchsia() {
+    return getColor("fuchsia");
+  }
+  function pink() {
+    return getColor("pink");
+  }
+  function rose() {
+    return getColor("rose");
+  }
+  function gray() {
+    return getColor("gray");
+  }
+
+  /**
+   * @param {string} property
+   */
+  function getLightDarkValue(property) {
+    const value = globalComputedStyle.getPropertyValue(property);
+    const [light, _dark] = value.slice(11, -1).split(", ");
+    return dark() ? _dark : light;
+  }
+
+  function textColor() {
+    return getLightDarkValue("--color");
+  }
+  function borderColor() {
+    return getLightDarkValue("--border-color");
+  }
+
+  return {
+    default: textColor,
+    gray,
+    border: borderColor,
+
+    red,
+    orange,
+    amber,
+    yellow,
+    avocado,
+    lime,
+    green,
+    emerald,
+    teal,
+    cyan,
+    sky,
+    blue,
+    indigo,
+    violet,
+    purple,
+    fuchsia,
+    pink,
+    rose,
+  };
+}
+/**
+ * @typedef {ReturnType<typeof createColors>} Colors
+ * @typedef {Colors["orange"]} Color
+ * @typedef {keyof Colors} ColorName
+ */
diff --git a/websites/bitview/scripts/core/dom.js b/websites/bitview/scripts/core/dom.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/websites/bitview/scripts/core/elements.js b/websites/bitview/scripts/core/elements.js
new file mode 100644
index 000000000..e530a8eb3
--- /dev/null
+++ b/websites/bitview/scripts/core/elements.js
@@ -0,0 +1,28 @@
+/**
+ * @param {string} id
+ */
+function getElementById(id) {
+  const element = window.document.getElementById(id);
+  if (!element) throw `Element with id = "${id}" should exist`;
+  return element;
+}
+
+export default {
+  head: window.document.getElementsByTagName("head")[0],
+  body: window.document.body,
+  main: getElementById("main"),
+  aside: getElementById("aside"),
+  asideLabel: getElementById("aside-selector-label"),
+  navLabel: getElementById(`nav-selector-label`),
+  searchLabel: getElementById(`search-selector-label`),
+  search: getElementById("search"),
+  nav: getElementById("nav"),
+  searchInput: /** @type {HTMLInputElement} */ (getElementById("search-input")),
+  searchResults: getElementById("search-results"),
+  selectors: getElementById("frame-selectors"),
+  style: getComputedStyle(window.document.documentElement),
+  charts: getElementById("charts"),
+  table: getElementById("table"),
+  explorer: getElementById("explorer"),
+  simulation: getElementById("simulation"),
+};
diff --git a/websites/bitview/scripts/core/env.js b/websites/bitview/scripts/core/env.js
new file mode 100644
index 000000000..9c38acef6
--- /dev/null
+++ b/websites/bitview/scripts/core/env.js
@@ -0,0 +1,24 @@
+const localhost = window.location.hostname === "localhost";
+const standalone =
+  "standalone" in window.navigator && !!window.navigator.standalone;
+const userAgent = navigator.userAgent.toLowerCase();
+const isChrome = userAgent.includes("chrome");
+const safari = userAgent.includes("safari");
+const safariOnly = safari && !isChrome;
+const macOS = userAgent.includes("mac os");
+const iphone = userAgent.includes("iphone");
+const ipad = userAgent.includes("ipad");
+const ios = iphone || ipad;
+
+export default {
+  standalone,
+  userAgent,
+  isChrome,
+  safari,
+  safariOnly,
+  macOS,
+  iphone,
+  ipad,
+  ios,
+  localhost,
+};
diff --git a/websites/bitview/scripts/core/options/full.js b/websites/bitview/scripts/core/options/full.js
new file mode 100644
index 000000000..7f6986e16
--- /dev/null
+++ b/websites/bitview/scripts/core/options/full.js
@@ -0,0 +1,371 @@
+import { createPartialOptions } from "./partial";
+
+/**
+ * @param {Object} args
+ * @param {Colors} args.colors
+ * @param {Signals} args.signals
+ * @param {Env} args.env
+ * @param {Utilities} args.utils
+ * @param {VecIdToIndexes} args.vecIdToIndexes
+ * @param {Pools} args.pools
+ * @param {Signal<string | null>} args.qrcode
+ */
+export function initOptions({
+  colors,
+  signals,
+  env,
+  utils,
+  qrcode,
+  vecIdToIndexes,
+  pools,
+}) {
+  const LS_SELECTED_KEY = `selected_path`;
+
+  const urlPath_ = window.document.location.pathname
+    .split("/")
+    .filter((v) => v);
+  const urlPath = urlPath_.length ? urlPath_ : undefined;
+  const savedPath = /** @type {string[]} */ (
+    JSON.parse(utils.storage.read(LS_SELECTED_KEY) || "[]") || []
+  ).filter((v) => v);
+  console.log(savedPath);
+
+  /** @type {Signal<Option>} */
+  const selected = signals.createSignal(/** @type {any} */ (undefined));
+
+  const partialOptions = createPartialOptions({
+    env,
+    colors,
+    vecIdToIndexes,
+    pools,
+  });
+
+  /** @type {Option[]} */
+  const list = [];
+
+  const parent = signals.createSignal(/** @type {HTMLElement | null} */ (null));
+
+  /**
+   * @param {AnyFetchedSeriesBlueprint[]} [arr]
+   */
+  function arrayToRecord(arr = []) {
+    return (arr || []).reduce((record, blueprint) => {
+      if (env.localhost && !(blueprint.key in vecIdToIndexes)) {
+        throw Error(`${blueprint.key} not recognized`);
+      }
+      const unit = blueprint.unit ?? utils.vecidToUnit(blueprint.key);
+      record[unit] ??= [];
+      record[unit].push(blueprint);
+      return record;
+    }, /** @type {Record<Unit, AnyFetchedSeriesBlueprint[]>} */ ({}));
+  }
+
+  /**
+   * @param {Option} option
+   */
+  function selectOption(option) {
+    utils.url.pushHistory(option.path);
+    utils.url.resetParams(option);
+    utils.storage.write(LS_SELECTED_KEY, JSON.stringify(option.path));
+    selected.set(option);
+  }
+
+  /**
+   * @param {Object} args
+   * @param {Option} args.option
+   * @param {string} args.frame
+   * @param {Signal<string | null>} args.qrcode
+   * @param {string} [args.name]
+   */
+  function createOptionElement({ option, frame, name, qrcode }) {
+    const title = option.title;
+    if (option.kind === "url") {
+      const href = option.url();
+
+      if (option.qrcode) {
+        return utils.dom.createButtonElement({
+          inside: option.name,
+          title,
+          onClick: () => {
+            qrcode.set(option.url);
+          },
+        });
+      } else {
+        return utils.dom.createAnchorElement({
+          href,
+          blank: true,
+          text: option.name,
+          title,
+        });
+      }
+    } else {
+      return utils.dom.createAnchorElement({
+        href: `/${option.path.join("/")}`,
+        title,
+        text: name || option.name,
+        onClick: () => {
+          selectOption(option);
+        },
+      });
+    }
+  }
+
+  /** @type {Option | undefined} */
+  let savedOption;
+
+  /**
+   * @param {PartialOptionsTree} partialTree
+   * @param {Accessor<HTMLElement | null>} parent
+   * @param {string[] | undefined} parentPath
+   * @returns {Accessor<number>}
+   */
+  function recursiveProcessPartialTree(
+    partialTree,
+    parent,
+    parentPath = [],
+    depth = 0,
+  ) {
+    /** @type {Accessor<number>[]} */
+    const listForSum = [];
+
+    const ul = signals.createMemo(
+      // @ts_ignore
+      (_previous) => {
+        const previous = /** @type {HTMLUListElement | null} */ (_previous);
+        previous?.remove();
+
+        const _parent = parent();
+        if (_parent) {
+          if ("open" in _parent && !_parent.open) {
+            throw "Set accesor to null instead";
+          }
+
+          const ul = window.document.createElement("ul");
+          _parent.append(ul);
+          return ul;
+        } else {
+          return null;
+        }
+      },
+      null,
+    );
+
+    partialTree.forEach((anyPartial, partialIndex) => {
+      const renderLi = signals.createSignal(true);
+
+      const li = signals.createMemo((_previous) => {
+        const previous = _previous;
+        previous?.remove();
+
+        const _ul = ul();
+
+        if (renderLi() && _ul) {
+          const li = window.document.createElement("li");
+          utils.dom.insertElementAtIndex(_ul, li, partialIndex);
+          return li;
+        } else {
+          return null;
+        }
+      }, /** @type {HTMLLIElement | null} */ (null));
+
+      if ("tree" in anyPartial) {
+        /** @type {Omit<OptionsGroup, keyof PartialOptionsGroup>} */
+        const groupAddons = {};
+
+        Object.assign(anyPartial, groupAddons);
+
+        const passedDetails = signals.createSignal(
+          /** @type {HTMLDivElement | HTMLDetailsElement | null} */ (null),
+        );
+
+        const serName = utils.stringToId(anyPartial.name);
+        const path = [...parentPath, serName];
+        const childOptionsCount = recursiveProcessPartialTree(
+          anyPartial.tree,
+          passedDetails,
+          path,
+          depth + 1,
+        );
+
+        listForSum.push(childOptionsCount);
+
+        signals.createEffect(li, (li) => {
+          if (!li) {
+            passedDetails.set(null);
+            return;
+          }
+
+          signals.createEffect(selected, (selected) => {
+            if (
+              path.length <= selected.path.length &&
+              path.every((v, i) => selected.path.at(i) === v)
+            ) {
+              li.dataset.highlight = "";
+            } else {
+              delete li.dataset.highlight;
+            }
+          });
+
+          const details = window.document.createElement("details");
+          details.dataset.name = serName;
+          li.appendChild(details);
+
+          const summary = window.document.createElement("summary");
+          details.append(summary);
+          summary.append(anyPartial.name);
+
+          const supCount = window.document.createElement("sup");
+          summary.append(supCount);
+
+          signals.createEffect(childOptionsCount, (childOptionsCount) => {
+            supCount.innerHTML = childOptionsCount.toLocaleString("en-us");
+          });
+
+          details.addEventListener("toggle", () => {
+            const open = details.open;
+
+            if (open) {
+              passedDetails.set(details);
+            } else {
+              passedDetails.set(null);
+            }
+          });
+        });
+
+        function createRenderLiEffect() {
+          signals.createEffect(childOptionsCount, (count) => {
+            renderLi.set(!!count);
+          });
+        }
+        createRenderLiEffect();
+      } else {
+        const option = /** @type {Option} */ (anyPartial);
+
+        const name = option.name;
+        const path = [...parentPath, utils.stringToId(option.name)];
+
+        if ("kind" in anyPartial && anyPartial.kind === "explorer") {
+          Object.assign(
+            option,
+            /** @satisfies {ExplorerOption} */ ({
+              kind: anyPartial.kind,
+              path,
+              name,
+              title: option.title,
+            }),
+          );
+        } else if ("kind" in anyPartial && anyPartial.kind === "table") {
+          Object.assign(
+            option,
+            /** @satisfies {TableOption} */ ({
+              kind: anyPartial.kind,
+              path,
+              name,
+              title: option.title,
+            }),
+          );
+        } else if ("kind" in anyPartial && anyPartial.kind === "simulation") {
+          Object.assign(
+            option,
+            /** @satisfies {SimulationOption} */ ({
+              kind: anyPartial.kind,
+              path,
+              name,
+              title: anyPartial.title,
+            }),
+          );
+        } else if ("url" in anyPartial) {
+          Object.assign(
+            option,
+            /** @satisfies {UrlOption} */ ({
+              kind: "url",
+              path,
+              name,
+              title: name,
+              qrcode: !!anyPartial.qrcode,
+              url: anyPartial.url,
+            }),
+          );
+        } else {
+          const title = option.title || option.name;
+          Object.assign(
+            option,
+            /** @satisfies {ChartOption} */ ({
+              kind: "chart",
+              name,
+              title,
+              path,
+              top: arrayToRecord(anyPartial.top),
+              bottom: arrayToRecord(anyPartial.bottom),
+            }),
+          );
+        }
+
+        list.push(option);
+
+        if (urlPath) {
+          const sameAsURLPath =
+            urlPath.length === path.length &&
+            urlPath.every((val, i) => val === path[i]);
+          if (sameAsURLPath) {
+            selected.set(option);
+          }
+        } else if (savedPath) {
+          const sameAsSavedPath =
+            savedPath.length === path.length &&
+            savedPath.every((val, i) => val === path[i]);
+          if (sameAsSavedPath) {
+            savedOption = option;
+          }
+        }
+
+        signals.createEffect(li, (li) => {
+          if (!li) {
+            return;
+          }
+
+          signals.createEffect(selected, (selected) => {
+            if (selected === option) {
+              li.dataset.highlight = "";
+            } else {
+              delete li.dataset.highlight;
+            }
+          });
+
+          const element = createOptionElement({
+            option,
+            frame: "nav",
+            qrcode,
+          });
+
+          li.append(element);
+        });
+
+        listForSum.push(() => 1);
+      }
+    });
+
+    return signals.createMemo(() =>
+      listForSum.reduce((acc, s) => acc + s(), 0),
+    );
+  }
+  recursiveProcessPartialTree(partialOptions, parent);
+
+  if (!selected()) {
+    const option =
+      savedOption || list.find((option) => option.kind === "chart");
+    if (option) {
+      selected.set(option);
+    }
+  }
+
+  return {
+    selected,
+    list,
+    tree: /** @type {OptionsTree} */ (partialOptions),
+    parent,
+    createOptionElement,
+    selectOption,
+  };
+}
+/** @typedef {ReturnType<typeof initOptions>} Options */
diff --git a/websites/bitview/scripts/options.js b/websites/bitview/scripts/core/options/partial.js
similarity index 93%
rename from websites/bitview/scripts/options.js
rename to websites/bitview/scripts/core/options/partial.js
index 2dbeebd69..bb0203be9 100644
--- a/websites/bitview/scripts/options.js
+++ b/websites/bitview/scripts/core/options/partial.js
@@ -127,7 +127,7 @@
  * @param {Pools} args.pools
  * @returns {PartialOptionsTree}
  */
-function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
+export function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
   /**
    * @template {string} S
    * @typedef {Extract<VecId, `${S}${string}`>} StartsWith
@@ -720,7 +720,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
         name,
         title: `UTXOs ${title}`,
         color,
-      })
+      }),
   );
 
   const addressesAboveAmount = aboveAmount.map(
@@ -730,7 +730,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
         name,
         title: `Addresses ${title}`,
         color,
-      })
+      }),
   );
 
   const underAmount = /** @type {const} */ ([
@@ -821,7 +821,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
         name,
         title: `UTXOs ${title}`,
         color,
-      })
+      }),
   );
 
   const addressesUnderAmount = underAmount.map(
@@ -831,7 +831,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
         name,
         title: `Addresses ${title}`,
         color,
-      })
+      }),
   );
 
   const amountRanges = /** @type {const} */ ([
@@ -934,7 +934,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
         name,
         title: `UTXOs ${title}`,
         color,
-      })
+      }),
   );
 
   const addressesAmountRanges = amountRanges.map(
@@ -944,7 +944,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
         name,
         title: `Addresses ${title}`,
         color,
-      })
+      }),
   );
 
   const type = /** @type {const} */ ([
@@ -1129,7 +1129,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
             lastValueVisible: false,
             crosshairMarkerVisible: false,
           },
-        })
+        }),
     );
   }
 
@@ -1426,7 +1426,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                   options: {
                     lineStyle: 1,
                   },
-                })
+                }),
               )
             : []),
         ],
@@ -1449,7 +1449,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                   options: {
                     lineStyle: 1,
                   },
-                })
+                }),
               )
             : []),
           ...(`${key}_ratio_sma` in vecIdToIndexes
@@ -1462,7 +1462,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                   options: {
                     lineStyle: 1,
                   },
-                })
+                }),
               )
             : []),
           createPriceLine({
@@ -1641,7 +1641,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                         options: {
                           lineStyle: 1,
                         },
-                      })
+                      }),
                     ),
                   ],
                   bottom: [
@@ -2014,11 +2014,11 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
           }),
         },
         ...(list.filter(
-          ({ key }) => `${fixKey(key)}addr_count` in vecIdToIndexes
+          ({ key }) => `${fixKey(key)}addr_count` in vecIdToIndexes,
         ).length > ("list" in args ? 1 : 0)
           ? !("list" in args) ||
             list.filter(
-              ({ key }) => `${fixKey(key)}empty_addr_count` in vecIdToIndexes
+              ({ key }) => `${fixKey(key)}empty_addr_count` in vecIdToIndexes,
             ).length <= 1
             ? [
                 {
@@ -2060,7 +2060,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                       bottom: list
                         .filter(
                           ({ key }) =>
-                            `${fixKey(key)}addr_count` in vecIdToIndexes
+                            `${fixKey(key)}addr_count` in vecIdToIndexes,
                         )
                         .flatMap(({ name, color, key: _key }) => {
                           const key = fixKey(_key);
@@ -2075,7 +2075,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                     },
                     ...(list.filter(
                       ({ key }) =>
-                        `${fixKey(key)}empty_addr_count` in vecIdToIndexes
+                        `${fixKey(key)}empty_addr_count` in vecIdToIndexes,
                     ).length
                       ? [
                           {
@@ -2085,7 +2085,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                               .filter(
                                 ({ key }) =>
                                   `${fixKey(key)}empty_addr_count` in
-                                  vecIdToIndexes
+                                  vecIdToIndexes,
                               )
                               .flatMap(({ name, color, key: _key }) => {
                                 const key = fixKey(_key);
@@ -2117,7 +2117,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                         key: `${fixKey(key)}realized_price`,
                         name,
                         color,
-                      })
+                      }),
                     ),
                   },
                   {
@@ -2129,7 +2129,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                           key: `${fixKey(key)}realized_price_ratio`,
                           name,
                           color,
-                        })
+                        }),
                       ),
                       createPriceLine({
                         unit: "ratio",
@@ -2195,7 +2195,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                         ? [
                             createBaseSeries({
                               key: `${fixKey(
-                                args.key
+                                args.key,
                               )}realized_profit_to_loss_ratio`,
                               name: "proft / loss",
                               color: colors.yellow,
@@ -2234,7 +2234,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                       /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                         type: "Baseline",
                         key: `${fixKey(
-                          args.key
+                          args.key,
                         )}realized_profit_rel_to_realized_cap`,
                         title: "Profit",
                         color: colors.green,
@@ -2242,7 +2242,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                       /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                         type: "Baseline",
                         key: `${fixKey(
-                          args.key
+                          args.key,
                         )}realized_loss_rel_to_realized_cap`,
                         title: "Loss",
                         color: colors.red,
@@ -2274,7 +2274,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                       /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                         type: "Baseline",
                         key: `${fixKey(
-                          key
+                          key,
                         )}net_realized_pnl_cumulative_30d_delta`,
                         title: "cumulative 30d change",
                         defaultActive: false,
@@ -2282,14 +2282,14 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                       /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                         type: "Baseline",
                         key: `${fixKey(
-                          key
+                          key,
                         )}net_realized_pnl_rel_to_realized_cap`,
                         title: "Raw",
                       }),
                       /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                         type: "Baseline",
                         key: `${fixKey(
-                          key
+                          key,
                         )}net_realized_pnl_cumulative_30d_delta_rel_to_realized_cap`,
                         title: "cumulative 30d change",
                         defaultActive: false,
@@ -2297,7 +2297,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                       /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                         type: "Baseline",
                         key: `${fixKey(
-                          key
+                          key,
                         )}net_realized_pnl_cumulative_30d_delta_rel_to_market_cap`,
                         title: "cumulative 30d change",
                       }),
@@ -2500,7 +2500,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                         /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                           type: "Baseline",
                           key: `${fixKey(
-                            key
+                            key,
                           )}net_realized_pnl_rel_to_realized_cap`,
                           title: name,
                           color,
@@ -2571,7 +2571,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                             /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                               type: "Baseline",
                               key: `${fixKey(
-                                key
+                                key,
                               )}net_realized_pnl_cumulative_30d_delta`,
                               title: name,
                               color,
@@ -2579,7 +2579,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                             /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                               type: "Baseline",
                               key: `${fixKey(
-                                key
+                                key,
                               )}net_realized_pnl_cumulative_30d_delta_rel_to_realized_cap`,
                               title: name,
                               color,
@@ -2587,7 +2587,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                             /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                               type: "Baseline",
                               key: `${fixKey(
-                                key
+                                key,
                               )}net_realized_pnl_cumulative_30d_delta_rel_to_market_cap`,
                               title: name,
                               color,
@@ -2650,7 +2650,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                                         title: name,
                                         color,
                                       }),
-                                    ]
+                                    ],
                                   ),
                                   createPriceLine({
                                     number: 1,
@@ -2730,7 +2730,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                         bottom: list.flatMap(({ color, name, key }) => {
                           const normalKey = `${fixKey(key)}value_destroyed`;
                           const adjKey = `${fixKey(
-                            key
+                            key,
                           )}adjusted_value_destroyed`;
                           return [
                             createBaseSeries({
@@ -2785,7 +2785,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                                           key,
                                           name,
                                           color,
-                                        })
+                                        }),
                                     ),
                                   },
                                 ]
@@ -2826,7 +2826,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                                           key,
                                           name,
                                           color,
-                                        })
+                                        }),
                                     ),
                                   },
                                 ]
@@ -2871,14 +2871,14 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                       }),
                       createBaseSeries({
                         key: `${fixKey(
-                          args.key
+                          args.key,
                         )}unrealized_profit_rel_to_market_cap`,
                         name: "Profit",
                         color: colors.green,
                       }),
                       createBaseSeries({
                         key: `${fixKey(
-                          args.key
+                          args.key,
                         )}unrealized_loss_rel_to_market_cap`,
                         name: "Loss",
                         color: colors.red,
@@ -2886,26 +2886,26 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                       }),
                       createBaseSeries({
                         key: `${fixKey(
-                          args.key
+                          args.key,
                         )}neg_unrealized_loss_rel_to_market_cap`,
                         name: "Negative Loss",
                         color: colors.red,
                       }),
                       ...(`${fixKey(
-                        args.key
+                        args.key,
                       )}unrealized_profit_rel_to_own_market_cap` in
                       vecIdToIndexes
                         ? [
                             createBaseSeries({
                               key: `${fixKey(
-                                args.key
+                                args.key,
                               )}unrealized_profit_rel_to_own_market_cap`,
                               name: "Profit",
                               color: colors.green,
                             }),
                             createBaseSeries({
                               key: `${fixKey(
-                                args.key
+                                args.key,
                               )}unrealized_loss_rel_to_own_market_cap`,
                               name: "Loss",
                               color: colors.red,
@@ -2913,7 +2913,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                             }),
                             createBaseSeries({
                               key: `${fixKey(
-                                args.key
+                                args.key,
                               )}neg_unrealized_loss_rel_to_own_market_cap`,
                               name: "Negative Loss",
                               color: colors.red,
@@ -2928,20 +2928,20 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                           ]
                         : []),
                       ...(`${fixKey(
-                        args.key
+                        args.key,
                       )}unrealized_profit_rel_to_own_total_unrealized_pnl` in
                       vecIdToIndexes
                         ? [
                             createBaseSeries({
                               key: `${fixKey(
-                                args.key
+                                args.key,
                               )}unrealized_profit_rel_to_own_total_unrealized_pnl`,
                               name: "Profit",
                               color: colors.green,
                             }),
                             createBaseSeries({
                               key: `${fixKey(
-                                args.key
+                                args.key,
                               )}unrealized_loss_rel_to_own_total_unrealized_pnl`,
                               name: "Loss",
                               color: colors.red,
@@ -2949,7 +2949,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                             }),
                             createBaseSeries({
                               key: `${fixKey(
-                                args.key
+                                args.key,
                               )}neg_unrealized_loss_rel_to_own_total_unrealized_pnl`,
                               name: "Negative Loss",
                               color: colors.red,
@@ -3036,13 +3036,13 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                     color: useGroupName ? color : undefined,
                   }),
                   ...(`${fixKey(
-                    key
+                    key,
                   )}net_unrealized_pnl_rel_to_own_market_cap` in vecIdToIndexes
                     ? [
                         /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                           type: "Baseline",
                           key: `${fixKey(
-                            key
+                            key,
                           )}net_unrealized_pnl_rel_to_own_market_cap`,
                           title: useGroupName ? name : "Net",
                           color: useGroupName ? color : undefined,
@@ -3053,14 +3053,14 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                       ]
                     : []),
                   ...(`${fixKey(
-                    key
+                    key,
                   )}net_unrealized_pnl_rel_to_own_total_unrealized_pnl` in
                   vecIdToIndexes
                     ? [
                         /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                           type: "Baseline",
                           key: `${fixKey(
-                            key
+                            key,
                           )}net_unrealized_pnl_rel_to_own_total_unrealized_pnl`,
                           title: useGroupName ? name : "Net",
                           color: useGroupName ? color : undefined,
@@ -3277,7 +3277,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                         key: `price_${key}_${keyAddon}`,
                         name: key,
                         color,
-                      })
+                      }),
                     ),
                   },
                   ...averages.map(({ key, name, color }) => ({
@@ -3494,7 +3494,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                               unit: "percentage",
                             }),
                           ],
-                        })
+                        }),
                     ),
                     .../** @type {const} */ ([
                       { name: "2 Year", key: "2y" },
@@ -3551,7 +3551,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                               unit: "percentage",
                             }),
                           ],
-                        })
+                        }),
                     ),
                   ],
                 },
@@ -3567,7 +3567,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                           name: `${year}`,
                           color,
                           defaultActive,
-                        })
+                        }),
                       ),
                     },
                     ...dcaClasses.map(
@@ -3592,7 +3592,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                               unit: "percentage",
                             }),
                           ],
-                        })
+                        }),
                     ),
                   ],
                 },
@@ -3681,13 +3681,13 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                     //   name: "Weight",
                     // }),
                     ...createAverageSumCumulativeMinMaxPercentilesSeries(
-                      "block_size"
+                      "block_size",
                     ),
                     ...createAverageSumCumulativeMinMaxPercentilesSeries(
-                      "block_weight"
+                      "block_weight",
                     ),
                     ...createAverageSumCumulativeMinMaxPercentilesSeries(
-                      "block_vbytes"
+                      "block_vbytes",
                     ),
                   ],
                 },
@@ -3703,7 +3703,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                     {
                       key: "tx_count",
                       name: "Count",
-                    }
+                    },
                   ),
                 },
                 {
@@ -3771,7 +3771,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                       common: `v${index + 1}`,
                       sumColor,
                       cumulativeColor,
-                    })
+                    }),
                   ),
                 },
                 {
@@ -3905,19 +3905,19 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                           {
                             key: "coinbase",
                             name: "Coinbase",
-                          }
+                          },
                         ),
                         ...createBaseAverageSumCumulativeMinMaxPercentilesSeries(
                           {
                             key: "coinbase_btc",
                             name: "Coinbase",
-                          }
+                          },
                         ),
                         ...createBaseAverageSumCumulativeMinMaxPercentilesSeries(
                           {
                             key: "coinbase_usd",
                             name: "Coinbase",
-                          }
+                          },
                         ),
                       ],
                     },
@@ -3929,7 +3929,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                           {
                             key: "subsidy",
                             name: "Subsidy",
-                          }
+                          },
                         ),
                         createBaseSeries({
                           key: "subsidy_usd_1y_sma",
@@ -3939,13 +3939,13 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                           {
                             key: "subsidy_btc",
                             name: "Subsidy",
-                          }
+                          },
                         ),
                         ...createBaseAverageSumCumulativeMinMaxPercentilesSeries(
                           {
                             key: "subsidy_usd",
                             name: "Subsidy",
-                          }
+                          },
                         ),
                       ],
                     },
@@ -3954,13 +3954,13 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                       title: "Transaction Fee",
                       bottom: [
                         ...createAverageSumCumulativeMinMaxPercentilesSeries(
-                          "fee"
+                          "fee",
                         ),
                         ...createAverageSumCumulativeMinMaxPercentilesSeries(
-                          "fee_btc"
+                          "fee_btc",
                         ),
                         ...createAverageSumCumulativeMinMaxPercentilesSeries(
-                          "fee_usd"
+                          "fee_usd",
                         ),
                       ],
                     },
@@ -4312,7 +4312,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                                 sumColor,
                                 cumulativeColor,
                               }),
-                            ]
+                            ],
                           ),
                         },
                         {
@@ -4550,7 +4550,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                       key,
                       name,
                       color,
-                    })
+                    }),
                   ),
                 },
                 ...cointimePrices.map(({ key, name, color, title }) => ({
@@ -4587,7 +4587,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                         key,
                         name,
                         color,
-                      })
+                      }),
                     ),
                   ],
                 },
@@ -4612,7 +4612,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                         color: colors.orange,
                       }),
                     ],
-                  })
+                  }),
                 ),
               ],
             },
@@ -4653,7 +4653,7 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
                       name,
                       color,
                     }),
-                  ])
+                  ]),
               ),
             },
             {
@@ -4868,373 +4868,3 @@ function createPartialOptions({ env, colors, vecIdToIndexes, pools }) {
     },
   ];
 }
-
-/**
- * @param {Object} args
- * @param {Colors} args.colors
- * @param {Signals} args.signals
- * @param {Env} args.env
- * @param {Utilities} args.utils
- * @param {VecIdToIndexes} args.vecIdToIndexes
- * @param {Pools} args.pools
- * @param {Signal<string | null>} args.qrcode
- */
-export function initOptions({
-  colors,
-  signals,
-  env,
-  utils,
-  qrcode,
-  vecIdToIndexes,
-  pools,
-}) {
-  const LS_SELECTED_KEY = `selected_path`;
-
-  const urlPath_ = window.document.location.pathname
-    .split("/")
-    .filter((v) => v);
-  const urlPath = urlPath_.length ? urlPath_ : undefined;
-  const savedPath = /** @type {string[]} */ (
-    JSON.parse(utils.storage.read(LS_SELECTED_KEY) || "[]") || []
-  ).filter((v) => v);
-  console.log(savedPath);
-
-  /** @type {Signal<Option>} */
-  const selected = signals.createSignal(/** @type {any} */ (undefined));
-
-  const partialOptions = createPartialOptions({
-    env,
-    colors,
-    vecIdToIndexes,
-    pools,
-  });
-
-  /** @type {Option[]} */
-  const list = [];
-
-  const parent = signals.createSignal(/** @type {HTMLElement | null} */ (null));
-
-  /**
-   * @param {AnyFetchedSeriesBlueprint[]} [arr]
-   */
-  function arrayToRecord(arr = []) {
-    return (arr || []).reduce((record, blueprint) => {
-      if (env.localhost && !(blueprint.key in vecIdToIndexes)) {
-        throw Error(`${blueprint.key} not recognized`);
-      }
-      const unit = blueprint.unit ?? utils.vecidToUnit(blueprint.key);
-      record[unit] ??= [];
-      record[unit].push(blueprint);
-      return record;
-    }, /** @type {Record<Unit, AnyFetchedSeriesBlueprint[]>} */ ({}));
-  }
-
-  /**
-   * @param {Option} option
-   */
-  function selectOption(option) {
-    utils.url.pushHistory(option.path);
-    utils.url.resetParams(option);
-    utils.storage.write(LS_SELECTED_KEY, JSON.stringify(option.path));
-    selected.set(option);
-  }
-
-  /**
-   * @param {Object} args
-   * @param {Option} args.option
-   * @param {string} args.frame
-   * @param {Signal<string | null>} args.qrcode
-   * @param {string} [args.name]
-   */
-  function createOptionElement({ option, frame, name, qrcode }) {
-    const title = option.title;
-    if (option.kind === "url") {
-      const href = option.url();
-
-      if (option.qrcode) {
-        return utils.dom.createButtonElement({
-          inside: option.name,
-          title,
-          onClick: () => {
-            qrcode.set(option.url);
-          },
-        });
-      } else {
-        return utils.dom.createAnchorElement({
-          href,
-          blank: true,
-          text: option.name,
-          title,
-        });
-      }
-    } else {
-      return utils.dom.createAnchorElement({
-        href: `/${option.path.join("/")}`,
-        title,
-        text: name || option.name,
-        onClick: () => {
-          selectOption(option);
-        },
-      });
-    }
-  }
-
-  /** @type {Option | undefined} */
-  let savedOption;
-
-  /**
-   * @param {PartialOptionsTree} partialTree
-   * @param {Accessor<HTMLElement | null>} parent
-   * @param {string[] | undefined} parentPath
-   * @returns {Accessor<number>}
-   */
-  function recursiveProcessPartialTree(
-    partialTree,
-    parent,
-    parentPath = [],
-    depth = 0
-  ) {
-    /** @type {Accessor<number>[]} */
-    const listForSum = [];
-
-    const ul = signals.createMemo(
-      // @ts_ignore
-      (_previous) => {
-        const previous = /** @type {HTMLUListElement | null} */ (_previous);
-        previous?.remove();
-
-        const _parent = parent();
-        if (_parent) {
-          if ("open" in _parent && !_parent.open) {
-            throw "Set accesor to null instead";
-          }
-
-          const ul = window.document.createElement("ul");
-          _parent.append(ul);
-          return ul;
-        } else {
-          return null;
-        }
-      },
-      null
-    );
-
-    partialTree.forEach((anyPartial, partialIndex) => {
-      const renderLi = signals.createSignal(true);
-
-      const li = signals.createMemo((_previous) => {
-        const previous = _previous;
-        previous?.remove();
-
-        const _ul = ul();
-
-        if (renderLi() && _ul) {
-          const li = window.document.createElement("li");
-          utils.dom.insertElementAtIndex(_ul, li, partialIndex);
-          return li;
-        } else {
-          return null;
-        }
-      }, /** @type {HTMLLIElement | null} */ (null));
-
-      if ("tree" in anyPartial) {
-        /** @type {Omit<OptionsGroup, keyof PartialOptionsGroup>} */
-        const groupAddons = {};
-
-        Object.assign(anyPartial, groupAddons);
-
-        const passedDetails = signals.createSignal(
-          /** @type {HTMLDivElement | HTMLDetailsElement | null} */ (null)
-        );
-
-        const serName = utils.stringToId(anyPartial.name);
-        const path = [...parentPath, serName];
-        const childOptionsCount = recursiveProcessPartialTree(
-          anyPartial.tree,
-          passedDetails,
-          path,
-          depth + 1
-        );
-
-        listForSum.push(childOptionsCount);
-
-        signals.createEffect(li, (li) => {
-          if (!li) {
-            passedDetails.set(null);
-            return;
-          }
-
-          signals.createEffect(selected, (selected) => {
-            if (
-              path.length <= selected.path.length &&
-              path.every((v, i) => selected.path.at(i) === v)
-            ) {
-              li.dataset.highlight = "";
-            } else {
-              delete li.dataset.highlight;
-            }
-          });
-
-          const details = window.document.createElement("details");
-          details.dataset.name = serName;
-          li.appendChild(details);
-
-          const summary = window.document.createElement("summary");
-          details.append(summary);
-          summary.append(anyPartial.name);
-
-          const supCount = window.document.createElement("sup");
-          summary.append(supCount);
-
-          signals.createEffect(childOptionsCount, (childOptionsCount) => {
-            supCount.innerHTML = childOptionsCount.toLocaleString("en-us");
-          });
-
-          details.addEventListener("toggle", () => {
-            const open = details.open;
-
-            if (open) {
-              passedDetails.set(details);
-            } else {
-              passedDetails.set(null);
-            }
-          });
-        });
-
-        function createRenderLiEffect() {
-          signals.createEffect(childOptionsCount, (count) => {
-            renderLi.set(!!count);
-          });
-        }
-        createRenderLiEffect();
-      } else {
-        const option = /** @type {Option} */ (anyPartial);
-
-        const name = option.name;
-        const path = [...parentPath, utils.stringToId(option.name)];
-
-        if ("kind" in anyPartial && anyPartial.kind === "explorer") {
-          Object.assign(
-            option,
-            /** @satisfies {ExplorerOption} */ ({
-              kind: anyPartial.kind,
-              path,
-              name,
-              title: option.title,
-            })
-          );
-        } else if ("kind" in anyPartial && anyPartial.kind === "table") {
-          Object.assign(
-            option,
-            /** @satisfies {TableOption} */ ({
-              kind: anyPartial.kind,
-              path,
-              name,
-              title: option.title,
-            })
-          );
-        } else if ("kind" in anyPartial && anyPartial.kind === "simulation") {
-          Object.assign(
-            option,
-            /** @satisfies {SimulationOption} */ ({
-              kind: anyPartial.kind,
-              path,
-              name,
-              title: anyPartial.title,
-            })
-          );
-        } else if ("url" in anyPartial) {
-          Object.assign(
-            option,
-            /** @satisfies {UrlOption} */ ({
-              kind: "url",
-              path,
-              name,
-              title: name,
-              qrcode: !!anyPartial.qrcode,
-              url: anyPartial.url,
-            })
-          );
-        } else {
-          const title = option.title || option.name;
-          Object.assign(
-            option,
-            /** @satisfies {ChartOption} */ ({
-              kind: "chart",
-              name,
-              title,
-              path,
-              top: arrayToRecord(anyPartial.top),
-              bottom: arrayToRecord(anyPartial.bottom),
-            })
-          );
-        }
-
-        list.push(option);
-
-        if (urlPath) {
-          const sameAsURLPath =
-            urlPath.length === path.length &&
-            urlPath.every((val, i) => val === path[i]);
-          if (sameAsURLPath) {
-            selected.set(option);
-          }
-        } else if (savedPath) {
-          const sameAsSavedPath =
-            savedPath.length === path.length &&
-            savedPath.every((val, i) => val === path[i]);
-          if (sameAsSavedPath) {
-            savedOption = option;
-          }
-        }
-
-        signals.createEffect(li, (li) => {
-          if (!li) {
-            return;
-          }
-
-          signals.createEffect(selected, (selected) => {
-            if (selected === option) {
-              li.dataset.highlight = "";
-            } else {
-              delete li.dataset.highlight;
-            }
-          });
-
-          const element = createOptionElement({
-            option,
-            frame: "nav",
-            qrcode,
-          });
-
-          li.append(element);
-        });
-
-        listForSum.push(() => 1);
-      }
-    });
-
-    return signals.createMemo(() =>
-      listForSum.reduce((acc, s) => acc + s(), 0)
-    );
-  }
-  recursiveProcessPartialTree(partialOptions, parent);
-
-  if (!selected()) {
-    const option =
-      savedOption || list.find((option) => option.kind === "chart");
-    if (option) {
-      selected.set(option);
-    }
-  }
-
-  return {
-    selected,
-    list,
-    tree: /** @type {OptionsTree} */ (partialOptions),
-    parent,
-    createOptionElement,
-    selectOption,
-  };
-}
-/** @typedef {ReturnType<typeof initOptions>} Options */
diff --git a/websites/bitview/scripts/core/utils.js b/websites/bitview/scripts/core/utils.js
new file mode 100644
index 000000000..247af42e3
--- /dev/null
+++ b/websites/bitview/scripts/core/utils.js
@@ -0,0 +1,1459 @@
+const localhost = window.location.hostname === "localhost";
+
+/**
+ * @param {string} serialized
+ * @returns {boolean}
+ */
+export function isSerializedBooleanTrue(serialized) {
+  return serialized === "true" || serialized === "1";
+}
+
+/**
+ * @param {number} ms
+ */
+export function sleep(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+export function next() {
+  return sleep(0);
+}
+
+export const array = {
+  /**
+   * @param {number} start
+   * @param {number} end
+   */
+  range(start, end) {
+    const range = [];
+    while (start <= end) {
+      range.push(start);
+      start += 1;
+    }
+    return range;
+  },
+  /**
+   * @template T
+   * @param {T[]} array
+   */
+  random(array) {
+    return array[Math.floor(Math.random() * array.length)];
+  },
+};
+
+export const dom = {
+  /**
+   * @param {string} id
+   * @returns {HTMLElement}
+   */
+  getElementById(id) {
+    const element = window.document.getElementById(id);
+    if (!element) throw `Element with id = "${id}" should exist`;
+    return element;
+  },
+  /**
+   * @param {HTMLElement} element
+   */
+  isHidden(element) {
+    return element.tagName !== "BODY" && !element.offsetParent;
+  },
+  /**
+   *
+   * @param {HTMLElement} element
+   * @param {VoidFunction} callback
+   */
+  onFirstIntersection(element, callback) {
+    const observer = new IntersectionObserver((entries) => {
+      for (let i = 0; i < entries.length; i++) {
+        if (entries[i].isIntersecting) {
+          callback();
+          observer.disconnect();
+        }
+      }
+    });
+    observer.observe(element);
+  },
+  /**
+   * @param {string} name
+   */
+  createSpanName(name) {
+    const spanName = window.document.createElement("span");
+    spanName.classList.add("name");
+    const [first, second, third] = name.split(" - ");
+    spanName.innerHTML = first;
+
+    if (second) {
+      const smallRest = window.document.createElement("small");
+      smallRest.innerHTML = ` — ${second}`;
+      spanName.append(smallRest);
+
+      if (third) {
+        throw "Shouldn't have more than one dash";
+      }
+    }
+
+    return spanName;
+  },
+  /**
+   * @param {Object} arg
+   * @param {string} arg.href
+   * @param {string} arg.title
+   * @param {string} [arg.text]
+   * @param {boolean} [arg.blank]
+   * @param {VoidFunction} [arg.onClick]
+   * @param {boolean} [arg.preventDefault]
+   */
+  createAnchorElement({ text, href, blank, onClick, title, preventDefault }) {
+    const anchor = window.document.createElement("a");
+    anchor.href = href;
+    anchor.title = title.toUpperCase();
+
+    if (text) {
+      anchor.innerText = text;
+    }
+
+    if (blank) {
+      anchor.target = "_blank";
+      anchor.rel = "noopener noreferrer";
+    }
+
+    if (onClick || preventDefault) {
+      if (onClick) {
+        anchor.addEventListener("click", (event) => {
+          event.preventDefault();
+          onClick();
+        });
+      }
+    }
+
+    return anchor;
+  },
+  /**
+   * @param {Object} arg
+   * @param {string | HTMLElement} arg.inside
+   * @param {string} arg.title
+   * @param {(event: MouseEvent) => void} arg.onClick
+   */
+  createButtonElement({ inside: text, onClick, title }) {
+    const button = window.document.createElement("button");
+
+    button.append(text);
+
+    button.title = title.toUpperCase();
+
+    button.addEventListener("click", onClick);
+
+    return button;
+  },
+
+  /**
+   * @param {Object} args
+   * @param {string} args.inputName
+   * @param {string} args.inputId
+   * @param {string} args.inputValue
+   * @param {boolean} [args.inputChecked=false]
+   * @param {string} [args.title]
+   * @param {'radio' | 'checkbox'} args.type
+   * @param {(event: MouseEvent) => void} [args.onClick]
+   */
+  createLabeledInput({
+    inputId,
+    inputName,
+    inputValue,
+    inputChecked = false,
+    title,
+    onClick,
+    type,
+  }) {
+    const label = window.document.createElement("label");
+
+    inputId = inputId.toLowerCase();
+
+    const input = window.document.createElement("input");
+    if (type === "radio") {
+      input.type = "radio";
+      input.name = inputName;
+    } else {
+      input.type = "checkbox";
+    }
+    input.id = inputId;
+    input.value = inputValue;
+    input.checked = inputChecked;
+    label.append(input);
+
+    label.id = `${inputId}-label`;
+    if (title) {
+      label.title = title;
+    }
+    label.htmlFor = inputId;
+
+    if (onClick) {
+      label.addEventListener("click", onClick);
+    }
+
+    return {
+      label,
+      input,
+    };
+  },
+  /**
+   * @param {HTMLElement} parent
+   * @param {HTMLElement} child
+   * @param {number} index
+   */
+  insertElementAtIndex(parent, child, index) {
+    if (!index) index = 0;
+    if (index >= parent.children.length) {
+      parent.appendChild(child);
+    } else {
+      parent.insertBefore(child, parent.children[index]);
+    }
+  },
+  /**
+   * @param {string} url
+   * @param {boolean} [targetBlank]
+   */
+  open(url, targetBlank) {
+    console.log(`open: ${url}`);
+    const a = window.document.createElement("a");
+    window.document.body.append(a);
+    a.href = url;
+
+    if (targetBlank) {
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+    }
+
+    a.click();
+    a.remove();
+  },
+  /**
+   * @param {string} href
+   */
+  importStyle(href) {
+    const link = document.createElement("link");
+    link.href = href;
+    link.type = "text/css";
+    link.rel = "stylesheet";
+    link.media = "screen,print";
+    const head = window.document.getElementsByTagName("head")[0];
+    head.appendChild(link);
+    return link;
+  },
+  /**
+   * @template {Readonly<string[]>} T
+   * @param {Object} args
+   * @param {T[number]} args.defaultValue
+   * @param {string} [args.id]
+   * @param {T | Accessor<T>} args.choices
+   * @param {string} [args.keyPrefix]
+   * @param {string} args.key
+   * @param {boolean} [args.sorted]
+   * @param {Signals} args.signals
+   */
+  createHorizontalChoiceField({
+    id,
+    choices: unsortedChoices,
+    defaultValue,
+    keyPrefix,
+    key,
+    signals,
+    sorted,
+  }) {
+    const choices = signals.createMemo(() => {
+      /** @type {T} */
+      let c;
+      if (typeof unsortedChoices === "function") {
+        c = unsortedChoices();
+      } else {
+        c = unsortedChoices;
+      }
+
+      return sorted
+        ? /** @type {T} */ (
+            /** @type {any} */ (c.toSorted((a, b) => a.localeCompare(b)))
+          )
+        : c;
+    });
+
+    /** @type {Signal<T[number]>} */
+    const selected = signals.createSignal(defaultValue, {
+      save: {
+        ...serde.string,
+        keyPrefix: keyPrefix ?? "",
+        key,
+        saveDefaultValue: true,
+      },
+    });
+
+    const field = window.document.createElement("div");
+    field.classList.add("field");
+
+    const div = window.document.createElement("div");
+    field.append(div);
+
+    signals.createEffect(choices, (choices) => {
+      const s = selected();
+      if (!choices.includes(s)) {
+        if (choices.includes(defaultValue)) {
+          selected.set(() => defaultValue);
+        } else if (choices.length) {
+          selected.set(() => choices[0]);
+        }
+      }
+
+      div.innerHTML = "";
+
+      choices.forEach((choice) => {
+        const inputValue = choice;
+        const { label } = this.createLabeledInput({
+          inputId: `${id ?? key}-${choice.toLowerCase()}`,
+          inputName: id ?? key,
+          inputValue,
+          inputChecked: inputValue === selected(),
+          // title: choice,
+          type: "radio",
+        });
+
+        const text = window.document.createTextNode(choice);
+        label.append(text);
+        div.append(label);
+      });
+    });
+
+    field.addEventListener("change", (event) => {
+      // @ts-ignore
+      const value = event.target.value;
+      selected.set(value);
+    });
+
+    return { field, selected };
+  },
+  /**
+   * @param {string} [title]
+   * @param {1 | 2 | 3} [level]
+   */
+  createHeader(title = "", level = 1) {
+    const headerElement = window.document.createElement("header");
+
+    const headingElement = window.document.createElement(`h${level}`);
+    headingElement.innerHTML = title;
+    headerElement.append(headingElement);
+    headingElement.style.display = "block";
+
+    return {
+      headerElement,
+      headingElement,
+    };
+  },
+  /**
+   * @template {string} Name
+   * @template {string} Value
+   * @template {Value | {name: Name; value: Value}} T
+   * @param {T} arg
+   */
+  createOption(arg) {
+    const option = window.document.createElement("option");
+    if (typeof arg === "object") {
+      option.value = arg.value;
+      option.innerText = arg.name;
+    } else {
+      option.value = arg;
+      option.innerText = arg;
+    }
+    return option;
+  },
+  /**
+   * @template {string} Name
+   * @template {string} Value
+   * @template {Value | {name: Name; value: Value}} T
+   * @param {Object} args
+   * @param {string} [args.id]
+   * @param {boolean} [args.deep]
+   * @param {readonly ((T) | {name: string; list: T[]})[]} args.list
+   * @param {Signal<T>} args.signal
+   */
+  createSelect({ id, list, signal, deep = false }) {
+    const select = window.document.createElement("select");
+
+    if (id) {
+      select.name = id;
+      select.id = id;
+    }
+
+    /** @type {Record<string, VoidFunction>} */
+    const setters = {};
+
+    list.forEach((anyOption, index) => {
+      if (typeof anyOption === "object" && "list" in anyOption) {
+        const { name, list } = anyOption;
+        const optGroup = window.document.createElement("optgroup");
+        optGroup.label = name;
+        select.append(optGroup);
+        list.forEach((option) => {
+          optGroup.append(this.createOption(option));
+          const key = /** @type {string} */ (
+            typeof option === "object" ? option.value : option
+          );
+          setters[key] = () => signal.set(() => option);
+        });
+      } else {
+        select.append(this.createOption(anyOption));
+        const key = /** @type {string} */ (
+          typeof anyOption === "object" ? anyOption.value : anyOption
+        );
+        setters[key] = () => signal.set(() => anyOption);
+      }
+      if (deep && index !== list.length - 1) {
+        select.append(window.document.createElement("hr"));
+      }
+    });
+
+    select.addEventListener("change", () => {
+      const callback = setters[select.value];
+      // @ts-ignore
+      if (callback) {
+        callback();
+      }
+    });
+
+    const initialSignal = signal();
+    const initialValue =
+      typeof initialSignal === "object" ? initialSignal.value : initialSignal;
+    select.value = String(initialValue);
+
+    return { select, signal };
+  },
+  /**
+   * @param {Object} args
+   * @param {string} args.title
+   * @param {string} args.description
+   * @param {HTMLElement} args.input
+   */
+  createFieldElement({ title, description, input }) {
+    const div = window.document.createElement("div");
+
+    const label = window.document.createElement("label");
+    div.append(label);
+
+    const titleElement = window.document.createElement("span");
+    titleElement.innerHTML = title;
+    label.append(titleElement);
+
+    const descriptionElement = window.document.createElement("small");
+    descriptionElement.innerHTML = description;
+    label.append(descriptionElement);
+
+    div.append(input);
+
+    const forId = input.id || input.firstElementChild?.id;
+
+    if (!forId) {
+      console.log(input);
+      throw `Input should've an ID`;
+    }
+
+    label.htmlFor = forId;
+
+    return div;
+  },
+  /**
+   * @param {'left' | 'bottom' | 'top' | 'right'} position
+   */
+  createShadow(position) {
+    const div = window.document.createElement("div");
+    div.classList.add(`shadow-${position}`);
+    return div;
+  },
+};
+
+/**
+ * @param {string | string[]} [pathname]
+ */
+function processPathname(pathname) {
+  pathname ||= window.location.pathname;
+  return Array.isArray(pathname) ? pathname.join("/") : pathname;
+}
+
+export const url = {
+  chartParamsWhitelist: ["from", "to"],
+  /**
+   * @param {string | string[]} pathname
+   */
+  pushHistory(pathname) {
+    const urlParams = new URLSearchParams(window.location.search);
+    pathname = processPathname(pathname);
+    try {
+      const url = `/${pathname}?${urlParams.toString()}`;
+      console.log(`push history: ${url}`);
+      window.history.pushState(null, "", url);
+    } catch (_) {}
+  },
+  /**
+   * @param {Object} args
+   * @param {URLSearchParams} [args.urlParams]
+   * @param {string | string[]} [args.pathname]
+   */
+  replaceHistory({ urlParams, pathname }) {
+    urlParams ||= new URLSearchParams(window.location.search);
+    pathname = processPathname(pathname);
+    try {
+      const url = `/${pathname}?${urlParams.toString()}`;
+      console.log(`replace history: ${url}`);
+      window.history.replaceState(null, "", url);
+    } catch (_) {}
+  },
+  /**
+   * @param {Option} option
+   */
+  resetParams(option) {
+    const urlParams = new URLSearchParams();
+    if (option.kind === "chart") {
+      [...new URLSearchParams(window.location.search).entries()]
+        .filter(([key, _]) => this.chartParamsWhitelist.includes(key))
+        .forEach(([key, value]) => {
+          urlParams.set(key, value);
+        });
+    }
+    this.replaceHistory({ urlParams, pathname: option.path.join("/") });
+  },
+  /**
+   * @param {string} key
+   * @param {string | boolean | null | undefined} value
+   */
+  writeParam(key, value) {
+    const urlParams = new URLSearchParams(window.location.search);
+
+    if (value !== null && value !== undefined) {
+      urlParams.set(key, String(value));
+    } else {
+      urlParams.delete(key);
+    }
+
+    this.replaceHistory({ urlParams });
+  },
+  /**
+   * @param {string} key
+   */
+  removeParam(key) {
+    this.writeParam(key, undefined);
+  },
+  /**
+   *
+   * @param {string} key
+   * @returns {boolean | null}
+   */
+  readBoolParam(key) {
+    const parameter = this.readParam(key);
+
+    if (parameter) {
+      return isSerializedBooleanTrue(parameter);
+    }
+
+    return null;
+  },
+  /**
+   *
+   * @param {string} key
+   * @returns {number | null}
+   */
+  readNumberParam(key) {
+    const parameter = this.readParam(key);
+
+    if (parameter) {
+      return Number(parameter);
+    }
+
+    return null;
+  },
+  /**
+   *
+   * @param {string} key
+   * @returns {string | null}
+   */
+  readParam(key) {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get(key);
+  },
+};
+
+/**
+ * @param {number} value
+ * @param {number} [digits]
+ * @param {Intl.NumberFormatOptions} [options]
+ */
+function numberToUSFormat(value, digits, options) {
+  return value.toLocaleString("en-us", {
+    ...options,
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+  });
+}
+
+const thoroughUnitCheck = localhost;
+
+/**
+ * @param {VecId} id
+ */
+export function vecidToUnit(id) {
+  /** @type {Unit | undefined} */
+  let unit;
+
+  /**
+
+     * @param {Unit} u
+     */
+  function setUnit(u) {
+    if (unit)
+      throw Error(
+        `Can't assign "${u}" to unit, "${unit}" is already assigned to "${id}"`,
+      );
+    unit = u;
+  }
+
+  if (
+    (!unit || thoroughUnitCheck) &&
+    (id.includes("in_sats") ||
+      (id.endsWith("supply") &&
+        !(id.endsWith("circulating_supply") || id.endsWith("_own_supply"))) ||
+      id === "sent" ||
+      id === "annualized_volume" ||
+      id.endsWith("supply_half") ||
+      id.endsWith("supply_breakeven") ||
+      id.endsWith("supply_in_profit") ||
+      id.endsWith("supply_in_loss") ||
+      id.endsWith("stack") ||
+      (id.endsWith("value") && !id.includes("realized")) ||
+      ((id.includes("coinbase") ||
+        id.includes("fee") ||
+        id.includes("subsidy") ||
+        id.includes("rewards")) &&
+        !(
+          id.startsWith("is_") ||
+          id.includes("_btc") ||
+          id.includes("_usd") ||
+          id.includes("fee_rate") ||
+          id.endsWith("dominance")
+        )))
+  ) {
+    setUnit("sats");
+  }
+  if (
+    (!unit || thoroughUnitCheck) &&
+    !id.endsWith("velocity") &&
+    ((id.includes("_btc") &&
+      !(id.includes("0k_btc") || id.includes("1k_btc"))) ||
+      id.endsWith("_btc"))
+  ) {
+    setUnit("btc");
+  }
+  if ((!unit || thoroughUnitCheck) && id === "chain") {
+    setUnit("block");
+  }
+  if ((!unit || thoroughUnitCheck) && id.startsWith("blocks_before")) {
+    setUnit("blocks");
+  }
+  if (
+    (!unit || thoroughUnitCheck) &&
+    (id === "emptyaddressdata" || id === "loadedaddressdata")
+  ) {
+    setUnit("address data");
+  }
+  if (
+    (!unit || thoroughUnitCheck) &&
+    (id === "price_high" ||
+      id === "price_ohlc" ||
+      id === "price_low" ||
+      id === "price_close" ||
+      id === "price_open" ||
+      id === "price_ath" ||
+      id === "market_cap" ||
+      id.startsWith("price_true_range") ||
+      (id.includes("_usd") && !id.endsWith("velocity")) ||
+      id.includes("cointime_value") ||
+      id.endsWith("_ago") ||
+      id.endsWith("price_paid") ||
+      id.endsWith("_price") ||
+      (id.startsWith("price") && (id.endsWith("min") || id.endsWith("max"))) ||
+      (id.endsWith("_cap") && !id.includes("rel_to")) ||
+      id.endsWith("value_created") ||
+      id.endsWith("value_destroyed") ||
+      ((id.includes("realized") || id.includes("true_market_mean")) &&
+        !id.includes("ratio") &&
+        !id.includes("rel_to")) ||
+      ((id.endsWith("sma") || id.includes("sma_x") || id.endsWith("ema")) &&
+        !id.includes("ratio") &&
+        !id.includes("sopr") &&
+        !id.includes("hash_rate")) ||
+      id === "ath")
+  ) {
+    setUnit("usd");
+  }
+  if ((!unit || thoroughUnitCheck) && id.endsWith("cents")) {
+    setUnit("cents");
+  }
+  if (
+    ((!unit || thoroughUnitCheck) &&
+      (id.endsWith("ratio") ||
+        (id.includes("ratio") &&
+          (id.endsWith("sma") ||
+            id.endsWith("ema") ||
+            id.endsWith("zscore"))) ||
+        id.includes("sopr") ||
+        id.endsWith("_5sd") ||
+        id.endsWith("1sd") ||
+        id.endsWith("2sd") ||
+        id.endsWith("3sd") ||
+        id.endsWith("pct1") ||
+        id.endsWith("pct2") ||
+        id.endsWith("pct5") ||
+        id.endsWith("pct95") ||
+        id.endsWith("pct98") ||
+        id.endsWith("pct99"))) ||
+    id.includes("liveliness") ||
+    id.includes("vaultedness") ||
+    id == "puell_multiple" ||
+    id.endsWith("velocity")
+  ) {
+    setUnit("ratio");
+  }
+  if (
+    (!unit || thoroughUnitCheck) &&
+    (id === "price_drawdown" ||
+      id === "difficulty_adjustment" ||
+      id.endsWith("inflation_rate") ||
+      id.endsWith("_oscillator") ||
+      id.endsWith("_dominance") ||
+      id.endsWith("_returns") ||
+      id.endsWith("_rebound") ||
+      id.endsWith("_volatility") ||
+      id.endsWith("_cagr"))
+  ) {
+    setUnit("percentage");
+  }
+  if (
+    (!unit || thoroughUnitCheck) &&
+    (id.endsWith("count") ||
+      id.includes("_count_") ||
+      id.startsWith("block_count") ||
+      id.includes("blocks_mined") ||
+      (id.includes("tx_v") && !id.includes("vsize")))
+  ) {
+    setUnit("count");
+  }
+  if (
+    (!unit || thoroughUnitCheck) &&
+    (id.startsWith("hash_rate") || id.endsWith("as_hash"))
+  ) {
+    setUnit("h/s");
+  }
+  if ((!unit || thoroughUnitCheck) && id === "pool") {
+    setUnit("id");
+  }
+  if ((!unit || thoroughUnitCheck) && id.includes("fee_rate")) {
+    setUnit("sat/vb");
+  }
+  if ((!unit || thoroughUnitCheck) && id.startsWith("is_")) {
+    setUnit("bool");
+  }
+  if ((!unit || thoroughUnitCheck) && id.endsWith("type")) {
+    setUnit("type");
+  }
+  if (
+    (!unit || thoroughUnitCheck) &&
+    (id === "interval" || id.startsWith("block_interval"))
+  ) {
+    setUnit("secs");
+  }
+  if ((!unit || thoroughUnitCheck) && id.endsWith("_per_sec")) {
+    setUnit("/sec");
+  }
+  if ((!unit || thoroughUnitCheck) && id.endsWith("locktime")) {
+    setUnit("locktime");
+  }
+
+  if ((!unit || thoroughUnitCheck) && id.endsWith("version")) {
+    setUnit("version");
+  }
+  if (
+    (!unit || thoroughUnitCheck) &&
+    (id === "txid" ||
+      (id.endsWith("bytes") && !id.endsWith("vbytes")) ||
+      id.endsWith("base_size") ||
+      id.endsWith("total_size") ||
+      id.includes("block_size"))
+  ) {
+    setUnit("bytes");
+  }
+  if ((!unit || thoroughUnitCheck) && id.endsWith("_sd")) {
+    setUnit("sd");
+  }
+  if (
+    (!unit || thoroughUnitCheck) &&
+    (id.includes("vsize") || id.includes("vbytes"))
+  ) {
+    setUnit("vb");
+  }
+  if ((!unit || thoroughUnitCheck) && id.includes("weight")) {
+    setUnit("wu");
+  }
+  if ((!unit || thoroughUnitCheck) && id.endsWith("index")) {
+    setUnit("index");
+  }
+  if ((!unit || thoroughUnitCheck) && (id === "date" || id === "date_fixed")) {
+    setUnit("date");
+  }
+  if (
+    (!unit || thoroughUnitCheck) &&
+    (id === "timestamp" || id === "timestamp_fixed")
+  ) {
+    setUnit("timestamp");
+  }
+  if ((!unit || thoroughUnitCheck) && id.includes("coinblocks")) {
+    setUnit("coinblocks");
+  }
+  if ((!unit || thoroughUnitCheck) && id.includes("coindays")) {
+    setUnit("coindays");
+  }
+  if ((!unit || thoroughUnitCheck) && id.includes("satblocks")) {
+    setUnit("satblocks");
+  }
+  if ((!unit || thoroughUnitCheck) && id.includes("satdays")) {
+    setUnit("satdays");
+  }
+  if ((!unit || thoroughUnitCheck) && id.endsWith("height")) {
+    setUnit("height");
+  }
+  if ((!unit || thoroughUnitCheck) && id.endsWith("rel_to_market_cap")) {
+    setUnit("%mcap");
+  }
+  if ((!unit || thoroughUnitCheck) && id.endsWith("rel_to_own_market_cap")) {
+    setUnit("%cmcap");
+  }
+  if (
+    (!unit || thoroughUnitCheck) &&
+    id.endsWith("rel_to_own_total_unrealized_pnl")
+  ) {
+    setUnit("%cp+l");
+  }
+  if ((!unit || thoroughUnitCheck) && id.endsWith("rel_to_realized_cap")) {
+    setUnit("%rcap");
+  }
+  if (
+    (!unit || thoroughUnitCheck) &&
+    id.endsWith("rel_to_circulating_supply")
+  ) {
+    setUnit("%all");
+  }
+  if (
+    (!unit || thoroughUnitCheck) &&
+    (id.includes("rel_to_realized_profit") ||
+      id.includes("rel_to_realized_loss"))
+  ) {
+    setUnit("%pnl");
+  }
+  if ((!unit || thoroughUnitCheck) && id.endsWith("rel_to_own_supply")) {
+    setUnit("%self");
+  }
+  if ((!unit || thoroughUnitCheck) && id.endsWith("epoch")) {
+    setUnit("epoch");
+  }
+  if ((!unit || thoroughUnitCheck) && id === "difficulty") {
+    setUnit("difficulty");
+  }
+  if ((!unit || thoroughUnitCheck) && id === "blockhash") {
+    setUnit("hash");
+  }
+  if ((!unit || thoroughUnitCheck) && id.startsWith("hash_price_phs")) {
+    setUnit("usd/(ph/s)/day");
+  }
+  if ((!unit || thoroughUnitCheck) && id.startsWith("hash_price_ths")) {
+    setUnit("usd/(th/s)/day");
+  }
+  if ((!unit || thoroughUnitCheck) && id.startsWith("hash_value_phs")) {
+    setUnit("sats/(ph/s)/day");
+  }
+  if ((!unit || thoroughUnitCheck) && id.startsWith("hash_value_ths")) {
+    setUnit("sats/(th/s)/day");
+  }
+
+  if (
+    (!unit || thoroughUnitCheck) &&
+    (id.includes("days_between") ||
+      id.includes("days_since") ||
+      id.startsWith("days_before"))
+  ) {
+    setUnit("days");
+  }
+  if ((!unit || thoroughUnitCheck) && id.includes("years_between")) {
+    setUnit("years");
+  }
+  if ((!unit || thoroughUnitCheck) && id == "len") {
+    setUnit("len");
+  }
+  if ((!unit || thoroughUnitCheck) && id == "position") {
+    setUnit("position");
+  }
+  if ((!unit || thoroughUnitCheck) && id.startsWith("constant")) {
+    setUnit("constant");
+  }
+
+  if (!unit) {
+    console.log();
+    throw Error(`Unit not set for "${id}"`);
+  }
+  return /** @type {Unit} */ (unit);
+}
+
+export const locale = {
+  numberToUSFormat,
+};
+
+export const storage = {
+  /**
+   * @param {string} key
+   */
+  readNumber(key) {
+    const saved = this.read(key);
+    if (saved) {
+      return Number(saved);
+    }
+    return null;
+  },
+  /**
+   * @param {string} key
+   */
+  readBool(key) {
+    const saved = this.read(key);
+    if (saved) {
+      return isSerializedBooleanTrue(saved);
+    }
+    return null;
+  },
+  /**
+   * @param {string} key
+   */
+  read(key) {
+    try {
+      return localStorage.getItem(key);
+    } catch (_) {
+      return null;
+    }
+  },
+  /**
+   * @param {string} key
+   * @param {string | boolean | null | undefined} value
+   */
+  write(key, value) {
+    try {
+      value !== undefined && value !== null
+        ? localStorage.setItem(key, String(value))
+        : localStorage.removeItem(key);
+    } catch (_) {}
+  },
+  /**
+   * @param {string} key
+   */
+  remove(key) {
+    this.write(key, undefined);
+  },
+};
+
+export const serde = {
+  string: {
+    /**
+     * @param {string} v
+     */
+    serialize(v) {
+      return v;
+    },
+    /**
+     * @param {string} v
+     */
+    deserialize(v) {
+      return v;
+    },
+  },
+  vecIds: {
+    /**
+     * @param {VecId[]} v
+     */
+    serialize(v) {
+      return v.join(",");
+    },
+    /**
+     * @param {string} v
+     */
+    deserialize(v) {
+      return /** @type {VecId[]} */ (v.split(","));
+    },
+  },
+  number: {
+    /**
+     * @param {number} v
+     */
+    serialize(v) {
+      return String(v);
+    },
+    /**
+     * @param {string} v
+     */
+    deserialize(v) {
+      return Number(v);
+    },
+  },
+  optNumber: {
+    /**
+     * @param {number | null} v
+     */
+    serialize(v) {
+      return v !== null ? String(v) : "";
+    },
+    /**
+     * @param {string} v
+     */
+    deserialize(v) {
+      return v ? Number(v) : null;
+    },
+  },
+  optDate: {
+    /**
+     * @param {Date |  null} date
+     */
+    serialize(date) {
+      return date !== null ? date.toString() : "";
+    },
+    /**
+     * @param {string} v
+     */
+    deserialize(v) {
+      return new Date(v);
+    },
+  },
+  boolean: {
+    /**
+     * @param {boolean} v
+     */
+    serialize(v) {
+      return String(v);
+    },
+    /**
+     * @param {string} v
+     */
+    deserialize(v) {
+      if (v === "true") {
+        return true;
+      } else if (v === "false") {
+        return false;
+      } else {
+        throw "deser bool err";
+      }
+    },
+  },
+  index: {
+    /**
+     * @param {Index} v
+     */
+    serialize(v) {
+      switch (v) {
+        case /** @satisfies {DateIndex} */ (0):
+          return "dateindex";
+        case /** @satisfies {DecadeIndex} */ (1):
+          return "decadeindex";
+        case /** @satisfies {DifficultyEpoch} */ (2):
+          return "difficultyepoch";
+        case /** @satisfies {EmptyOutputIndex} */ (3):
+          return "emptyoutputindex";
+        case /** @satisfies {HalvingEpoch} */ (4):
+          return "halvingepoch";
+        case /** @satisfies {Height} */ (5):
+          return "height";
+        case /** @satisfies {InputIndex} */ (6):
+          return "inputindex";
+        case /** @satisfies {MonthIndex} */ (7):
+          return "monthindex";
+        case /** @satisfies {OpReturnIndex} */ (8):
+          return "opreturnindex";
+        case /** @satisfies {OutputIndex} */ (9):
+          return "outputindex";
+        case /** @satisfies {P2AAddressIndex} */ (10):
+          return "p2aaddressindex";
+        case /** @satisfies {P2MSOutputIndex} */ (11):
+          return "p2msoutputindex";
+        case /** @satisfies {P2PK33AddressIndex} */ (12):
+          return "p2pk33addressindex";
+        case /** @satisfies {P2PK65AddressIndex} */ (13):
+          return "p2pk65addressindex";
+        case /** @satisfies {P2PKHAddressIndex} */ (14):
+          return "p2pkhaddressindex";
+        case /** @satisfies {P2SHAddressIndex} */ (15):
+          return "p2shaddressindex";
+        case /** @satisfies {P2TRAddressIndex} */ (16):
+          return "p2traddressindex";
+        case /** @satisfies {P2WPKHAddressIndex} */ (17):
+          return "p2wpkhaddressindex";
+        case /** @satisfies {P2WSHAddressIndex} */ (18):
+          return "p2wshaddressindex";
+        case /** @satisfies {QuarterIndex} */ (19):
+          return "quarterindex";
+        case /** @satisfies {SemesterIndex} */ (20):
+          return "semesterindex";
+        case /** @satisfies {TxIndex} */ (21):
+          return "txindex";
+        case /** @satisfies {UnknownOutputIndex} */ (22):
+          return "unknownoutputindex";
+        case /** @satisfies {WeekIndex} */ (23):
+          return "weekindex";
+        case /** @satisfies {YearIndex} */ (24):
+          return "yearindex";
+        case /** @satisfies {LoadedAddressIndex} */ (25):
+          return "loadedaddressindex";
+        case /** @satisfies {EmptyAddressIndex} */ (26):
+          return "emptyaddressindex";
+      }
+    },
+  },
+  chartableIndex: {
+    /**
+     * @param {number} v
+     * @returns {SerializedChartableIndex | null}
+     */
+    serialize(v) {
+      switch (v) {
+        case /** @satisfies {DateIndex} */ (0):
+          return "date";
+        case /** @satisfies {DecadeIndex} */ (1):
+          return "decade";
+        case /** @satisfies {DifficultyEpoch} */ (2):
+          return "d.epoch";
+        // case /** @satisfies {HalvingEpoch} */ (4):
+        //   return "halving";
+        case /** @satisfies {Height} */ (5):
+          return "timestamp";
+        case /** @satisfies {MonthIndex} */ (7):
+          return "month";
+        case /** @satisfies {QuarterIndex} */ (19):
+          return "quarter";
+        case /** @satisfies {SemesterIndex} */ (20):
+          return "semester";
+        case /** @satisfies {WeekIndex} */ (23):
+          return "week";
+        case /** @satisfies {YearIndex} */ (24):
+          return "year";
+        default:
+          return null;
+      }
+    },
+    /**
+     * @param {SerializedChartableIndex} v
+     * @returns {Index}
+     */
+    deserialize(v) {
+      switch (v) {
+        case "timestamp":
+          return /** @satisfies {Height} */ (5);
+        case "date":
+          return /** @satisfies {DateIndex} */ (0);
+        case "week":
+          return /** @satisfies {WeekIndex} */ (23);
+        case "d.epoch":
+          return /** @satisfies {DifficultyEpoch} */ (2);
+        case "month":
+          return /** @satisfies {MonthIndex} */ (7);
+        case "quarter":
+          return /** @satisfies {QuarterIndex} */ (19);
+        case "semester":
+          return /** @satisfies {SemesterIndex} */ (20);
+        case "year":
+          return /** @satisfies {YearIndex} */ (24);
+        case "decade":
+          return /** @satisfies {DecadeIndex} */ (1);
+        default:
+          throw Error("todo");
+      }
+    },
+  },
+};
+
+export const formatters = {
+  dollars: new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }),
+  percentage: new Intl.NumberFormat("en-US", {
+    style: "percent",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }),
+};
+
+export const date = {
+  ONE_DAY_IN_MS: 1000 * 60 * 60 * 24,
+  todayUTC() {
+    const today = new Date();
+    return new Date(
+      Date.UTC(
+        today.getUTCFullYear(),
+        today.getUTCMonth(),
+        today.getUTCDate(),
+        0,
+        0,
+        0,
+      ),
+    );
+  },
+  /**
+   * @param {Date} date
+   */
+  toString(date) {
+    return date.toJSON().split("T")[0];
+  },
+  /**
+   * @param {Date} date
+   */
+  toDateIndex(date) {
+    if (
+      date.getUTCFullYear() === 2009 &&
+      date.getUTCMonth() === 0 &&
+      date.getUTCDate() === 3
+    )
+      return 0;
+    return this.differenceBetween(date, new Date("2009-01-09"));
+  },
+  /**
+   * @param {Date} start
+   * @param {Date} end
+   */
+  getRange(start, end) {
+    const dates = /** @type {Date[]} */ ([]);
+    let currentDate = new Date(start);
+    while (currentDate <= end) {
+      dates.push(new Date(currentDate));
+      currentDate.setUTCDate(currentDate.getUTCDate() + 1);
+    }
+    return dates;
+  },
+  /**
+   * @param {Date} date1
+   * @param {Date} date2
+   */
+  differenceBetween(date1, date2) {
+    return Math.abs(date1.valueOf() - date2.valueOf()) / this.ONE_DAY_IN_MS;
+  },
+};
+
+/**
+ *
+ * @template {(...args: any[]) => any} F
+ * @param {F} callback
+ * @param {number} [wait]
+ */
+export function throttle(callback, wait = 1000) {
+  /** @type {number | null} */
+  let timeoutId = null;
+  /** @type {Parameters<F>} */
+  let latestArgs;
+
+  return (/** @type {Parameters<F>} */ ...args) => {
+    latestArgs = args;
+
+    if (!timeoutId) {
+      // Otherwise it optimizes away timeoutId in Chrome and FF
+      timeoutId = timeoutId;
+      timeoutId = setTimeout(() => {
+        callback(...latestArgs); // Execute with latest args
+        timeoutId = null;
+      }, wait);
+    }
+  };
+}
+
+/**
+ * @param {VoidFunction} callback
+ * @param {number} [timeout = 1]
+ */
+export function runWhenIdle(callback, timeout = 1) {
+  if ("requestIdleCallback" in window) {
+    requestIdleCallback(callback);
+  } else {
+    setTimeout(callback, timeout);
+  }
+}
+
+/**
+ * @param {Date} oldest
+ * @param {Date} youngest
+ * @returns {number}
+ */
+export function getNumberOfDaysBetweenTwoDates(oldest, youngest) {
+  return Math.round(
+    Math.abs((youngest.getTime() - oldest.getTime()) / date.ONE_DAY_IN_MS),
+  );
+}
+
+/**
+ * @param {string} s
+ */
+export function stringToId(s) {
+  return (
+    s
+      // .replace(/\W/g, " ")
+      .trim()
+      .replace(/ +/g, "-")
+      .toLowerCase()
+  );
+}
+
+export const api = (() => {
+  const CACHE_NAME = "api";
+  const API_VECS_PREFIX = "/api/vecs";
+
+  /**
+   * @template T
+   * @param {(value: T) => void} callback
+   * @param {string} path
+   * @param {boolean} [mustBeArray]
+   */
+  async function fetchApi(callback, path, mustBeArray) {
+    const url = `${API_VECS_PREFIX}${path}`;
+
+    /** @type {T | null} */
+    let cachedJson = null;
+
+    /** @type {Cache | undefined} */
+    let cache;
+    try {
+      cache = await caches.open(CACHE_NAME);
+      const cachedResponse = await cache.match(url);
+      if (cachedResponse) {
+        console.debug(`cache: ${url}`);
+        const json = /** @type {T} */ await cachedResponse.json();
+        cachedJson = json;
+        callback(json);
+      }
+    } catch {}
+
+    if (navigator.onLine) {
+      // TODO: rerun after 10s instead of returning (due to some kind of error)
+
+      /** @type {Response | undefined} */
+      let fetchedResponse;
+      try {
+        fetchedResponse = await fetch(url, {
+          signal: AbortSignal.timeout(5000),
+        });
+        if (!fetchedResponse.ok) {
+          throw Error;
+        }
+      } catch {
+        return cachedJson;
+      }
+
+      const clonedResponse = fetchedResponse.clone();
+
+      let fetchedJson = /** @type {T | null} */ (null);
+      try {
+        const f = await fetchedResponse.json();
+        fetchedJson = /** @type {T} */ (
+          mustBeArray && !Array.isArray(f) ? [f] : f
+        );
+      } catch (_) {
+        return cachedJson;
+      }
+
+      if (!fetchedJson) return cachedJson;
+
+      console.debug(`fetch: ${url}`);
+
+      if (Array.isArray(cachedJson) && Array.isArray(fetchedJson)) {
+        const previousLength = cachedJson?.length || 0;
+        const newLength = fetchedJson.length;
+
+        if (!newLength) {
+          return cachedJson;
+        }
+
+        if (previousLength && previousLength === newLength) {
+          const previousLastValue = Object.values(cachedJson || []).at(-1);
+          const newLastValue = Object.values(fetchedJson).at(-1);
+          if (
+            JSON.stringify(previousLastValue) === JSON.stringify(newLastValue)
+          ) {
+            return cachedJson;
+          }
+        }
+      }
+
+      callback(fetchedJson);
+
+      runWhenIdle(async function () {
+        try {
+          await cache?.put(url, clonedResponse);
+        } catch (_) {}
+      });
+
+      return fetchedJson;
+    } else {
+      return cachedJson;
+    }
+  }
+
+  /**
+   * @param {Index} index
+   * @param {VecId} vecId
+   * @param {number} [from]
+   * @param {number} [to]
+   */
+  function genPath(index, vecId, from, to) {
+    let path = `/${serde.index.serialize(index)}-to-${vecId.replaceAll(
+      "_",
+      "-",
+    )}?`;
+
+    if (from !== undefined) {
+      path += `from=${from}`;
+    }
+    if (to !== undefined) {
+      if (!path.endsWith("?")) {
+        path += `&`;
+      }
+      path += `to=${to}`;
+    }
+    return path;
+  }
+
+  return {
+    /**
+     * @param {Index} index
+     * @param {VecId} vecId
+     * @param {number} from
+     */
+    genUrl(index, vecId, from) {
+      return `${API_VECS_PREFIX}${genPath(index, vecId, from)}`;
+    },
+    /**
+     * @template {number | OHLCTuple} [T=number]
+     * @param {(v: T[]) => void} callback
+     * @param {Index} index
+     * @param {VecId} vecId
+     * @param {number} [from]
+     * @param {number} [to]
+     */
+    fetchVec(callback, index, vecId, from, to) {
+      return fetchApi(callback, genPath(index, vecId, from, to), true);
+    },
+    /**
+     * @template {number | OHLCTuple} [T=number]
+     * @param {(v: T) => void} callback
+     * @param {Index} index
+     * @param {VecId} vecId
+     */
+    fetchLast(callback, index, vecId) {
+      return fetchApi(callback, genPath(index, vecId, -1));
+    },
+  };
+})();
diff --git a/websites/bitview/scripts/core/ws.js b/websites/bitview/scripts/core/ws.js
new file mode 100644
index 000000000..9aa895bde
--- /dev/null
+++ b/websites/bitview/scripts/core/ws.js
@@ -0,0 +1,128 @@
+/**
+ * @param {Signals} signals
+ */
+export function createWebSockets(signals) {
+  /**
+   * @template T
+   * @param {(callback: (value: T) => void) => WebSocket} creator
+   */
+  function createWebsocket(creator) {
+    let ws = /** @type {WebSocket | null} */ (null);
+
+    const live = signals.createSignal(false);
+    const latest = signals.createSignal(/** @type {T | null} */ (null));
+
+    function reinitWebSocket() {
+      if (!ws || ws.readyState === ws.CLOSED) {
+        console.log("ws: reinit");
+        resource.open();
+      }
+    }
+
+    function reinitWebSocketIfDocumentNotHidden() {
+      !window.document.hidden && reinitWebSocket();
+    }
+
+    const resource = {
+      live,
+      latest,
+      open() {
+        ws = creator((value) => latest.set(() => value));
+
+        ws.addEventListener("open", () => {
+          console.log("ws: open");
+          live.set(true);
+        });
+
+        ws.addEventListener("close", () => {
+          console.log("ws: close");
+          live.set(false);
+        });
+
+        window.document.addEventListener(
+          "visibilitychange",
+          reinitWebSocketIfDocumentNotHidden,
+        );
+
+        window.document.addEventListener("online", reinitWebSocket);
+      },
+      close() {
+        ws?.close();
+        window.document.removeEventListener(
+          "visibilitychange",
+          reinitWebSocketIfDocumentNotHidden,
+        );
+        window.document.removeEventListener("online", reinitWebSocket);
+        live.set(false);
+        ws = null;
+      },
+    };
+
+    return resource;
+  }
+
+  /**
+   * @param {(candle: CandlestickData) => void} callback
+   */
+  function krakenCandleWebSocketCreator(callback) {
+    const ws = new WebSocket("wss://ws.kraken.com/v2");
+
+    ws.addEventListener("open", () => {
+      ws.send(
+        JSON.stringify({
+          method: "subscribe",
+          params: {
+            channel: "ohlc",
+            symbol: ["BTC/USD"],
+            interval: 1440,
+          },
+        }),
+      );
+    });
+
+    ws.addEventListener("message", (message) => {
+      const result = JSON.parse(message.data);
+
+      if (result.channel !== "ohlc") return;
+
+      const { interval_begin, open, high, low, close } = result.data.at(-1);
+
+      /** @type {CandlestickData} */
+      const candle = {
+        // index: -1,
+        time: new Date(interval_begin).valueOf() / 1000,
+        open: Number(open),
+        high: Number(high),
+        low: Number(low),
+        close: Number(close),
+      };
+
+      candle && callback({ ...candle });
+    });
+
+    return ws;
+  }
+
+  /** @type {ReturnType<typeof createWebsocket<CandlestickData>>} */
+  const kraken1dCandle = createWebsocket((callback) =>
+    krakenCandleWebSocketCreator(callback),
+  );
+
+  kraken1dCandle.open();
+
+  signals.createEffect(kraken1dCandle.latest, (latest) => {
+    if (latest) {
+      const close = latest.close;
+      console.log("close:", close);
+
+      window.document.title = `${latest.close.toLocaleString("en-us")} | ${
+        window.location.host
+      }`;
+    }
+  });
+
+  return {
+    kraken1dCandle,
+  };
+}
+/** @typedef {ReturnType<typeof createWebSockets>} WebSockets */
diff --git a/websites/bitview/scripts/entry.js b/websites/bitview/scripts/entry.js
index e7d4a9269..f8a3ced98 100644
--- a/websites/bitview/scripts/entry.js
+++ b/websites/bitview/scripts/entry.js
@@ -1,3 +1,88 @@
+/**
+ *
+ * @import { Valued,  SingleValueData, CandlestickData, OHLCTuple, Series, ISeries, HistogramData, LineData, BaselineData, LineSeriesPartialOptions, BaselineSeriesPartialOptions, HistogramSeriesPartialOptions, CandlestickSeriesPartialOptions, CreateChartElement, Chart } from "./core/chart"
+ *
+ * @import * as _ from "./packages/leeoniya-ufuzzy/1.0.19/dist/uFuzzy.d.ts"
+ *
+ * @import { SerializedChartableIndex } from "./panes/chart";
+ *
+ * @import { Signal, Signals, Accessor } from "./packages/solidjs-signals/wrapper";
+ *
+ * @import { DateIndex, DecadeIndex, DifficultyEpoch, Index, HalvingEpoch, Height, MonthIndex, P2PK33AddressIndex, P2PK65AddressIndex, P2PKHAddressIndex, P2SHAddressIndex, P2MSOutputIndex, P2AAddressIndex, P2TRAddressIndex, P2WPKHAddressIndex, P2WSHAddressIndex, TxIndex, InputIndex, OutputIndex, VecId, WeekIndex, SemesterIndex, YearIndex, VecIdToIndexes, QuarterIndex, EmptyOutputIndex, OpReturnIndex, UnknownOutputIndex, EmptyAddressIndex, LoadedAddressIndex } from "./bridge/vecs"
+ *
+ * @import { Pools, Pool } from "./bridge/pools"
+ *
+ * @import { Color, ColorName, Colors } from "./core/colors"
+ *
+ * @import { Option, PartialChartOption, ChartOption, AnyPartialOption, ProcessedOptionAddons, OptionsTree, SimulationOption, AnySeriesBlueprint, SeriesType, AnyFetchedSeriesBlueprint, TableOption, ExplorerOption, UrlOption, PartialOptionsGroup, OptionsGroup, PartialOptionsTree } from "./core/options/partial"
+ *
+ * @import { WebSockets } from "./core/ws"
+ */
+
+/**
+ * @typedef {typeof import("./lazy")["default"]} Packages
+ * @typedef {typeof import("./core/utils")} Utilities
+ * @typedef {typeof import("./core/env")["default"]} Env
+ * @typedef {typeof import("./core/elements")["default"]} Elements
+ */
+
+/**
+ * @typedef {"" |
+ *   "%all" |
+ *   "%cmcap" |
+ *   "%cp+l" |
+ *   "%mcap" |
+ *   "%pnl" |
+ *   "%rcap" |
+ *   "%self" |
+ *   "/sec" |
+ *   "address data" |
+ *   "block" |
+ *   "blocks" |
+ *   "bool" |
+ *   "btc" |
+ *   "bytes" |
+ *   "cents" |
+ *   "coinblocks" |
+ *   "coindays" |
+ *   "constant" |
+ *   "count" |
+ *   "date" |
+ *   "days" |
+ *   "difficulty" |
+ *   "epoch" |
+ *   "gigabytes" |
+ *   "h/s" |
+ *   "hash" |
+ *   "height" |
+ *   "id" |
+ *   "index" |
+ *   "len" |
+ *   "locktime" |
+ *   "percentage" |
+ *   "position" |
+ *   "ratio" |
+ *   "sat/vb" |
+ *   "satblocks" |
+ *   "satdays" |
+ *   "sats" |
+ *   "sats/(ph/s)/day" |
+ *   "sats/(th/s)/day" |
+ *   "sd" |
+ *   "secs" |
+ *   "timestamp" |
+ *   "tx" |
+ *   "type" |
+ *   "usd" |
+ *   "usd/(ph/s)/day" |
+ *   "usd/(th/s)/day" |
+ *   "vb" |
+ *   "version" |
+ *   "wu" |
+ *   "years" |
+ * "" } Unit
+ */
+
 // DO NOT CHANGE, Exact format is expected in `brk_bundler`
 // @ts-ignore
 import("./main.js");
diff --git a/websites/bitview/scripts/lazy.js b/websites/bitview/scripts/lazy.js
new file mode 100644
index 000000000..500ccd9f3
--- /dev/null
+++ b/websites/bitview/scripts/lazy.js
@@ -0,0 +1,58 @@
+const imports = {
+  async signals() {
+    return import("./packages/solidjs-signals/wrapper.js").then(
+      (d) => d.default,
+    );
+  },
+  async chart() {
+    return window.document.fonts.ready.then(() =>
+      import("./core/chart.js").then((d) => d.default),
+    );
+  },
+  async leanQr() {
+    return import("./packages/lean-qr/2.5.0/index.mjs").then((d) => d);
+  },
+  async ufuzzy() {
+    return import("./packages/leeoniya-ufuzzy/1.0.19/dist/uFuzzy.mjs").then(
+      ({ default: d }) => d,
+    );
+  },
+  async modernScreenshot() {
+    return import("./packages/modern-screenshot/wrapper.js").then((d) => d);
+  },
+
+  async options() {
+    return import("./core/options/full.js").then((d) => d);
+  },
+  async vecs() {
+    return import("./bridge/vecs.js").then((d) => d);
+  },
+  async pools() {
+    return import("./bridge/pools.js").then((d) => d);
+  },
+};
+
+/**
+ * @template {keyof typeof imports} K
+ * @param {K} key
+ */
+function lazyImport(key) {
+  /** @type {any | null} */
+  let packagePromise = null;
+
+  return function () {
+    if (!packagePromise) {
+      packagePromise = imports[key]();
+    }
+    return /** @type {ReturnType<typeof imports[K]>} */ (packagePromise);
+  };
+}
+
+export default /** @type {{ [K in keyof typeof imports]: () => ReturnType<typeof imports[K]> }} */ (
+  Object.fromEntries(
+    Object.keys(imports).map((key) => [
+      key,
+      lazyImport(/** @type {keyof typeof imports} */ (key)),
+    ]),
+  )
+);
diff --git a/websites/bitview/scripts/main.js b/websites/bitview/scripts/main.js
index 5f1716a5e..96f8f7af4 100644
--- a/websites/bitview/scripts/main.js
+++ b/websites/bitview/scripts/main.js
@@ -1,1613 +1,11 @@
 // @ts-check
 
-/**
- * @import { Option, PartialChartOption, ChartOption, AnyPartialOption, ProcessedOptionAddons, OptionsTree, SimulationOption, AnySeriesBlueprint, SeriesType } from "./options"
- * @import { Valued,  SingleValueData, CandlestickData, OHLCTuple, Series, ISeries, HistogramData, LineData, BaselineData, LineSeriesPartialOptions, BaselineSeriesPartialOptions, HistogramSeriesPartialOptions, CandlestickSeriesPartialOptions, CreateChartElement, Chart } from "./chart"
- * @import * as _ from "./packages/leeoniya-ufuzzy/1.0.19/dist/uFuzzy.d.ts"
- * @import { SerializedChartableIndex } from "./charts";
- * @import { Signal, Signals, Accessor } from "./packages/solidjs-signals/wrapper";
- * @import { DateIndex, DecadeIndex, DifficultyEpoch, Index, HalvingEpoch, Height, MonthIndex, P2PK33AddressIndex, P2PK65AddressIndex, P2PKHAddressIndex, P2SHAddressIndex, P2MSOutputIndex, P2AAddressIndex, P2TRAddressIndex, P2WPKHAddressIndex, P2WSHAddressIndex, TxIndex, InputIndex, OutputIndex, VecId, WeekIndex, SemesterIndex, YearIndex, VecIdToIndexes, QuarterIndex, EmptyOutputIndex, OpReturnIndex, UnknownOutputIndex, EmptyAddressIndex, LoadedAddressIndex } from "./bridge/vecs"
- * @import { Pools, Pool } from "./bridge/pools"
- */
-
-/**
- * @typedef {"" |
- *   "%all" |
- *   "%cmcap" |
- *   "%cp+l" |
- *   "%mcap" |
- *   "%pnl" |
- *   "%rcap" |
- *   "%self" |
- *   "/sec" |
- *   "address data" |
- *   "block" |
- *   "blocks" |
- *   "bool" |
- *   "btc" |
- *   "bytes" |
- *   "cents" |
- *   "coinblocks" |
- *   "coindays" |
- *   "constant" |
- *   "count" |
- *   "date" |
- *   "days" |
- *   "difficulty" |
- *   "epoch" |
- *   "gigabytes" |
- *   "h/s" |
- *   "hash" |
- *   "height" |
- *   "id" |
- *   "index" |
- *   "len" |
- *   "locktime" |
- *   "percentage" |
- *   "position" |
- *   "ratio" |
- *   "sat/vb" |
- *   "satblocks" |
- *   "satdays" |
- *   "sats" |
- *   "sats/(ph/s)/day" |
- *   "sats/(th/s)/day" |
- *   "sd" |
- *   "secs" |
- *   "timestamp" |
- *   "tx" |
- *   "type" |
- *   "usd" |
- *   "usd/(ph/s)/day" |
- *   "usd/(th/s)/day" |
- *   "vb" |
- *   "version" |
- *   "wu" |
- *   "years" |
- * "" } Unit
- */
-
-const localhost = window.location.hostname === "localhost";
-
-function initPackages() {
-  const imports = {
-    async signals() {
-      return import("./packages/solidjs-signals/wrapper.js").then(
-        (d) => d.default,
-      );
-    },
-    async chart() {
-      return window.document.fonts.ready.then(() =>
-        import("./chart.js").then((d) => d.default),
-      );
-    },
-    async leanQr() {
-      return import("./packages/lean-qr/2.5.0/index.mjs").then((d) => d);
-    },
-    async ufuzzy() {
-      return import("./packages/leeoniya-ufuzzy/1.0.19/dist/uFuzzy.mjs").then(
-        ({ default: d }) => d,
-      );
-    },
-    async modernScreenshot() {
-      return import("./packages/modern-screenshot/wrapper.js").then((d) => d);
-    },
-  };
-
-  /**
-   * @template {keyof typeof imports} K
-   * @param {K} key
-   */
-  function lazyImport(key) {
-    /** @type {ReturnType<typeof imports[K]> | null} */
-    let packagePromise = null;
-
-    return function () {
-      if (!packagePromise) {
-        // @ts-ignore
-        packagePromise = imports[key]();
-      }
-      return /** @type {ReturnType<typeof imports[K]>} */ (packagePromise);
-    };
-  }
-
-  return {
-    signals: lazyImport("signals"),
-    chart: lazyImport("chart"),
-    leanQr: lazyImport("leanQr"),
-    ufuzzy: lazyImport("ufuzzy"),
-    modernScreenshot: lazyImport("modernScreenshot"),
-  };
-}
-/**
- * @typedef {ReturnType<typeof initPackages>} Packages
- */
-
-function createUtils() {
-  /**
-   * @param {string} serialized
-   * @returns {boolean}
-   */
-  function isSerializedBooleanTrue(serialized) {
-    return serialized === "true" || serialized === "1";
-  }
-
-  /**
-   * @param {number} ms
-   */
-  function sleep(ms) {
-    return new Promise((resolve) => {
-      setTimeout(resolve, ms);
-    });
-  }
-
-  function next() {
-    return sleep(0);
-  }
-
-  const array = {
-    /**
-     * @param {number} start
-     * @param {number} end
-     */
-    range(start, end) {
-      const range = [];
-      while (start <= end) {
-        range.push(start);
-        start += 1;
-      }
-      return range;
-    },
-    /**
-     * @template T
-     * @param {T[]} array
-     */
-    random(array) {
-      return array[Math.floor(Math.random() * array.length)];
-    },
-  };
-
-  const dom = {
-    /**
-     * @param {string} id
-     * @returns {HTMLElement}
-     */
-    getElementById(id) {
-      const element = window.document.getElementById(id);
-      if (!element) throw `Element with id = "${id}" should exist`;
-      return element;
-    },
-    /**
-     * @param {HTMLElement} element
-     */
-    isHidden(element) {
-      return element.tagName !== "BODY" && !element.offsetParent;
-    },
-    /**
-     *
-     * @param {HTMLElement} element
-     * @param {VoidFunction} callback
-     */
-    onFirstIntersection(element, callback) {
-      const observer = new IntersectionObserver((entries) => {
-        for (let i = 0; i < entries.length; i++) {
-          if (entries[i].isIntersecting) {
-            callback();
-            observer.disconnect();
-          }
-        }
-      });
-      observer.observe(element);
-    },
-    /**
-     * @param {string} name
-     */
-    createSpanName(name) {
-      const spanName = window.document.createElement("span");
-      spanName.classList.add("name");
-      const [first, second, third] = name.split(" - ");
-      spanName.innerHTML = first;
-
-      if (second) {
-        const smallRest = window.document.createElement("small");
-        smallRest.innerHTML = ` — ${second}`;
-        spanName.append(smallRest);
-
-        if (third) {
-          throw "Shouldn't have more than one dash";
-        }
-      }
-
-      return spanName;
-    },
-    /**
-     * @param {Object} arg
-     * @param {string} arg.href
-     * @param {string} arg.title
-     * @param {string} [arg.text]
-     * @param {boolean} [arg.blank]
-     * @param {VoidFunction} [arg.onClick]
-     * @param {boolean} [arg.preventDefault]
-     */
-    createAnchorElement({ text, href, blank, onClick, title, preventDefault }) {
-      const anchor = window.document.createElement("a");
-      anchor.href = href;
-      anchor.title = title.toUpperCase();
-
-      if (text) {
-        anchor.innerText = text;
-      }
-
-      if (blank) {
-        anchor.target = "_blank";
-        anchor.rel = "noopener noreferrer";
-      }
-
-      if (onClick || preventDefault) {
-        if (onClick) {
-          anchor.addEventListener("click", (event) => {
-            event.preventDefault();
-            onClick();
-          });
-        }
-      }
-
-      return anchor;
-    },
-    /**
-     * @param {Object} arg
-     * @param {string | HTMLElement} arg.inside
-     * @param {string} arg.title
-     * @param {(event: MouseEvent) => void} arg.onClick
-     */
-    createButtonElement({ inside: text, onClick, title }) {
-      const button = window.document.createElement("button");
-
-      button.append(text);
-
-      button.title = title.toUpperCase();
-
-      button.addEventListener("click", onClick);
-
-      return button;
-    },
-
-    /**
-     * @param {Object} args
-     * @param {string} args.inputName
-     * @param {string} args.inputId
-     * @param {string} args.inputValue
-     * @param {boolean} [args.inputChecked=false]
-     * @param {string} [args.title]
-     * @param {'radio' | 'checkbox'} args.type
-     * @param {(event: MouseEvent) => void} [args.onClick]
-     */
-    createLabeledInput({
-      inputId,
-      inputName,
-      inputValue,
-      inputChecked = false,
-      title,
-      onClick,
-      type,
-    }) {
-      const label = window.document.createElement("label");
-
-      inputId = inputId.toLowerCase();
-
-      const input = window.document.createElement("input");
-      if (type === "radio") {
-        input.type = "radio";
-        input.name = inputName;
-      } else {
-        input.type = "checkbox";
-      }
-      input.id = inputId;
-      input.value = inputValue;
-      input.checked = inputChecked;
-      label.append(input);
-
-      label.id = `${inputId}-label`;
-      if (title) {
-        label.title = title;
-      }
-      label.htmlFor = inputId;
-
-      if (onClick) {
-        label.addEventListener("click", onClick);
-      }
-
-      return {
-        label,
-        input,
-      };
-    },
-    /**
-     * @param {HTMLElement} parent
-     * @param {HTMLElement} child
-     * @param {number} index
-     */
-    insertElementAtIndex(parent, child, index) {
-      if (!index) index = 0;
-      if (index >= parent.children.length) {
-        parent.appendChild(child);
-      } else {
-        parent.insertBefore(child, parent.children[index]);
-      }
-    },
-    /**
-     * @param {string} url
-     * @param {Elements} elements
-     * @param {boolean} [targetBlank]
-     */
-    open(url, elements, targetBlank) {
-      console.log(`open: ${url}`);
-      const a = window.document.createElement("a");
-      elements.body.append(a);
-      a.href = url;
-
-      if (targetBlank) {
-        a.target = "_blank";
-        a.rel = "noopener noreferrer";
-      }
-
-      a.click();
-      a.remove();
-    },
-    /**
-     * @param {string} href
-     */
-    importStyle(href) {
-      const link = document.createElement("link");
-      link.href = href;
-      link.type = "text/css";
-      link.rel = "stylesheet";
-      link.media = "screen,print";
-      const head = window.document.getElementsByTagName("head")[0];
-      head.appendChild(link);
-      return link;
-    },
-    /**
-     * @template {Readonly<string[]>} T
-     * @param {Object} args
-     * @param {T[number]} args.defaultValue
-     * @param {string} [args.id]
-     * @param {T | Accessor<T>} args.choices
-     * @param {string} [args.keyPrefix]
-     * @param {string} args.key
-     * @param {boolean} [args.sorted]
-     * @param {Signals} args.signals
-     */
-    createHorizontalChoiceField({
-      id,
-      choices: unsortedChoices,
-      defaultValue,
-      keyPrefix,
-      key,
-      signals,
-      sorted,
-    }) {
-      const choices = signals.createMemo(() => {
-        /** @type {T} */
-        let c;
-        if (typeof unsortedChoices === "function") {
-          c = unsortedChoices();
-        } else {
-          c = unsortedChoices;
-        }
-
-        return sorted
-          ? /** @type {T} */ (
-              /** @type {any} */ (c.toSorted((a, b) => a.localeCompare(b)))
-            )
-          : c;
-      });
-
-      /** @type {Signal<T[number]>} */
-      const selected = signals.createSignal(defaultValue, {
-        save: {
-          ...serde.string,
-          keyPrefix: keyPrefix ?? "",
-          key,
-          saveDefaultValue: true,
-        },
-      });
-
-      const field = window.document.createElement("div");
-      field.classList.add("field");
-
-      const div = window.document.createElement("div");
-      field.append(div);
-
-      signals.createEffect(choices, (choices) => {
-        const s = selected();
-        if (!choices.includes(s)) {
-          if (choices.includes(defaultValue)) {
-            selected.set(() => defaultValue);
-          } else if (choices.length) {
-            selected.set(() => choices[0]);
-          }
-        }
-
-        div.innerHTML = "";
-
-        choices.forEach((choice) => {
-          const inputValue = choice;
-          const { label } = this.createLabeledInput({
-            inputId: `${id ?? key}-${choice.toLowerCase()}`,
-            inputName: id ?? key,
-            inputValue,
-            inputChecked: inputValue === selected(),
-            // title: choice,
-            type: "radio",
-          });
-
-          const text = window.document.createTextNode(choice);
-          label.append(text);
-          div.append(label);
-        });
-      });
-
-      field.addEventListener("change", (event) => {
-        // @ts-ignore
-        const value = event.target.value;
-        selected.set(value);
-      });
-
-      return { field, selected };
-    },
-    /**
-     * @param {string} [title]
-     * @param {1 | 2 | 3} [level]
-     */
-    createHeader(title = "", level = 1) {
-      const headerElement = window.document.createElement("header");
-
-      const headingElement = window.document.createElement(`h${level}`);
-      headingElement.innerHTML = title;
-      headerElement.append(headingElement);
-      headingElement.style.display = "block";
-
-      return {
-        headerElement,
-        headingElement,
-      };
-    },
-    /**
-     * @template {string} Name
-     * @template {string} Value
-     * @template {Value | {name: Name; value: Value}} T
-     * @param {T} arg
-     */
-    createOption(arg) {
-      const option = window.document.createElement("option");
-      if (typeof arg === "object") {
-        option.value = arg.value;
-        option.innerText = arg.name;
-      } else {
-        option.value = arg;
-        option.innerText = arg;
-      }
-      return option;
-    },
-    /**
-     * @template {string} Name
-     * @template {string} Value
-     * @template {Value | {name: Name; value: Value}} T
-     * @param {Object} args
-     * @param {string} [args.id]
-     * @param {boolean} [args.deep]
-     * @param {readonly ((T) | {name: string; list: T[]})[]} args.list
-     * @param {Signal<T>} args.signal
-     */
-    createSelect({ id, list, signal, deep = false }) {
-      const select = window.document.createElement("select");
-
-      if (id) {
-        select.name = id;
-        select.id = id;
-      }
-
-      /** @type {Record<string, VoidFunction>} */
-      const setters = {};
-
-      list.forEach((anyOption, index) => {
-        if (typeof anyOption === "object" && "list" in anyOption) {
-          const { name, list } = anyOption;
-          const optGroup = window.document.createElement("optgroup");
-          optGroup.label = name;
-          select.append(optGroup);
-          list.forEach((option) => {
-            optGroup.append(this.createOption(option));
-            const key = /** @type {string} */ (
-              typeof option === "object" ? option.value : option
-            );
-            setters[key] = () => signal.set(() => option);
-          });
-        } else {
-          select.append(this.createOption(anyOption));
-          const key = /** @type {string} */ (
-            typeof anyOption === "object" ? anyOption.value : anyOption
-          );
-          setters[key] = () => signal.set(() => anyOption);
-        }
-        if (deep && index !== list.length - 1) {
-          select.append(window.document.createElement("hr"));
-        }
-      });
-
-      select.addEventListener("change", () => {
-        const callback = setters[select.value];
-        // @ts-ignore
-        if (callback) {
-          callback();
-        }
-      });
-
-      const initialSignal = signal();
-      const initialValue =
-        typeof initialSignal === "object" ? initialSignal.value : initialSignal;
-      select.value = String(initialValue);
-
-      return { select, signal };
-    },
-    /**
-     * @param {Object} args
-     * @param {string} args.title
-     * @param {string} args.description
-     * @param {HTMLElement} args.input
-     */
-    createFieldElement({ title, description, input }) {
-      const div = window.document.createElement("div");
-
-      const label = window.document.createElement("label");
-      div.append(label);
-
-      const titleElement = window.document.createElement("span");
-      titleElement.innerHTML = title;
-      label.append(titleElement);
-
-      const descriptionElement = window.document.createElement("small");
-      descriptionElement.innerHTML = description;
-      label.append(descriptionElement);
-
-      div.append(input);
-
-      const forId = input.id || input.firstElementChild?.id;
-
-      if (!forId) {
-        console.log(input);
-        throw `Input should've an ID`;
-      }
-
-      label.htmlFor = forId;
-
-      return div;
-    },
-    /**
-     * @param {'left' | 'bottom' | 'top' | 'right'} position
-     */
-    createShadow(position) {
-      const div = window.document.createElement("div");
-      div.classList.add(`shadow-${position}`);
-      return div;
-    },
-  };
-
-  /**
-   * @param {string | string[]} [pathname]
-   */
-  function processPathname(pathname) {
-    pathname ||= window.location.pathname;
-    return Array.isArray(pathname) ? pathname.join("/") : pathname;
-  }
-
-  const url = {
-    chartParamsWhitelist: ["from", "to"],
-    /**
-     * @param {string | string[]} pathname
-     */
-    pushHistory(pathname) {
-      const urlParams = new URLSearchParams(window.location.search);
-      pathname = processPathname(pathname);
-      try {
-        const url = `/${pathname}?${urlParams.toString()}`;
-        console.log(`push history: ${url}`);
-        window.history.pushState(null, "", url);
-      } catch (_) {}
-    },
-    /**
-     * @param {Object} args
-     * @param {URLSearchParams} [args.urlParams]
-     * @param {string | string[]} [args.pathname]
-     */
-    replaceHistory({ urlParams, pathname }) {
-      urlParams ||= new URLSearchParams(window.location.search);
-      pathname = processPathname(pathname);
-      try {
-        const url = `/${pathname}?${urlParams.toString()}`;
-        console.log(`replace history: ${url}`);
-        window.history.replaceState(null, "", url);
-      } catch (_) {}
-    },
-    /**
-     * @param {Option} option
-     */
-    resetParams(option) {
-      const urlParams = new URLSearchParams();
-      if (option.kind === "chart") {
-        [...new URLSearchParams(window.location.search).entries()]
-          .filter(([key, _]) => this.chartParamsWhitelist.includes(key))
-          .forEach(([key, value]) => {
-            urlParams.set(key, value);
-          });
-      }
-      this.replaceHistory({ urlParams, pathname: option.path.join("/") });
-    },
-    /**
-     * @param {string} key
-     * @param {string | boolean | null | undefined} value
-     */
-    writeParam(key, value) {
-      const urlParams = new URLSearchParams(window.location.search);
-
-      if (value !== null && value !== undefined) {
-        urlParams.set(key, String(value));
-      } else {
-        urlParams.delete(key);
-      }
-
-      this.replaceHistory({ urlParams });
-    },
-    /**
-     * @param {string} key
-     */
-    removeParam(key) {
-      this.writeParam(key, undefined);
-    },
-    /**
-     *
-     * @param {string} key
-     * @returns {boolean | null}
-     */
-    readBoolParam(key) {
-      const parameter = this.readParam(key);
-
-      if (parameter) {
-        return isSerializedBooleanTrue(parameter);
-      }
-
-      return null;
-    },
-    /**
-     *
-     * @param {string} key
-     * @returns {number | null}
-     */
-    readNumberParam(key) {
-      const parameter = this.readParam(key);
-
-      if (parameter) {
-        return Number(parameter);
-      }
-
-      return null;
-    },
-    /**
-     *
-     * @param {string} key
-     * @returns {string | null}
-     */
-    readParam(key) {
-      const urlParams = new URLSearchParams(window.location.search);
-      return urlParams.get(key);
-    },
-  };
-
-  /**
-   * @param {number} value
-   * @param {number} [digits]
-   * @param {Intl.NumberFormatOptions} [options]
-   */
-  function numberToUSFormat(value, digits, options) {
-    return value.toLocaleString("en-us", {
-      ...options,
-      minimumFractionDigits: digits,
-      maximumFractionDigits: digits,
-    });
-  }
-
-  const thoroughUnitCheck = localhost;
-
-  /**
-   * @param {VecId} id
-   */
-  function vecidToUnit(id) {
-    /** @type {Unit | undefined} */
-    let unit;
-
-    /**
-
-     * @param {Unit} u
-     */
-    function setUnit(u) {
-      if (unit)
-        throw Error(
-          `Can't assign "${u}" to unit, "${unit}" is already assigned to "${id}"`,
-        );
-      unit = u;
-    }
-
-    if (
-      (!unit || thoroughUnitCheck) &&
-      (id.includes("in_sats") ||
-        (id.endsWith("supply") &&
-          !(id.endsWith("circulating_supply") || id.endsWith("_own_supply"))) ||
-        id === "sent" ||
-        id === "annualized_volume" ||
-        id.endsWith("supply_half") ||
-        id.endsWith("supply_breakeven") ||
-        id.endsWith("supply_in_profit") ||
-        id.endsWith("supply_in_loss") ||
-        id.endsWith("stack") ||
-        (id.endsWith("value") && !id.includes("realized")) ||
-        ((id.includes("coinbase") ||
-          id.includes("fee") ||
-          id.includes("subsidy") ||
-          id.includes("rewards")) &&
-          !(
-            id.startsWith("is_") ||
-            id.includes("_btc") ||
-            id.includes("_usd") ||
-            id.includes("fee_rate") ||
-            id.endsWith("dominance")
-          )))
-    ) {
-      setUnit("sats");
-    }
-    if (
-      (!unit || thoroughUnitCheck) &&
-      !id.endsWith("velocity") &&
-      ((id.includes("_btc") &&
-        !(id.includes("0k_btc") || id.includes("1k_btc"))) ||
-        id.endsWith("_btc"))
-    ) {
-      setUnit("btc");
-    }
-    if ((!unit || thoroughUnitCheck) && id === "chain") {
-      setUnit("block");
-    }
-    if ((!unit || thoroughUnitCheck) && id.startsWith("blocks_before")) {
-      setUnit("blocks");
-    }
-    if (
-      (!unit || thoroughUnitCheck) &&
-      (id === "emptyaddressdata" || id === "loadedaddressdata")
-    ) {
-      setUnit("address data");
-    }
-    if (
-      (!unit || thoroughUnitCheck) &&
-      (id === "price_high" ||
-        id === "price_ohlc" ||
-        id === "price_low" ||
-        id === "price_close" ||
-        id === "price_open" ||
-        id === "price_ath" ||
-        id === "market_cap" ||
-        id.startsWith("price_true_range") ||
-        (id.includes("_usd") && !id.endsWith("velocity")) ||
-        id.includes("cointime_value") ||
-        id.endsWith("_ago") ||
-        id.endsWith("price_paid") ||
-        id.endsWith("_price") ||
-        (id.startsWith("price") &&
-          (id.endsWith("min") || id.endsWith("max"))) ||
-        (id.endsWith("_cap") && !id.includes("rel_to")) ||
-        id.endsWith("value_created") ||
-        id.endsWith("value_destroyed") ||
-        ((id.includes("realized") || id.includes("true_market_mean")) &&
-          !id.includes("ratio") &&
-          !id.includes("rel_to")) ||
-        ((id.endsWith("sma") || id.includes("sma_x") || id.endsWith("ema")) &&
-          !id.includes("ratio") &&
-          !id.includes("sopr") &&
-          !id.includes("hash_rate")) ||
-        id === "ath")
-    ) {
-      setUnit("usd");
-    }
-    if ((!unit || thoroughUnitCheck) && id.endsWith("cents")) {
-      setUnit("cents");
-    }
-    if (
-      ((!unit || thoroughUnitCheck) &&
-        (id.endsWith("ratio") ||
-          (id.includes("ratio") &&
-            (id.endsWith("sma") ||
-              id.endsWith("ema") ||
-              id.endsWith("zscore"))) ||
-          id.includes("sopr") ||
-          id.endsWith("_5sd") ||
-          id.endsWith("1sd") ||
-          id.endsWith("2sd") ||
-          id.endsWith("3sd") ||
-          id.endsWith("pct1") ||
-          id.endsWith("pct2") ||
-          id.endsWith("pct5") ||
-          id.endsWith("pct95") ||
-          id.endsWith("pct98") ||
-          id.endsWith("pct99"))) ||
-      id.includes("liveliness") ||
-      id.includes("vaultedness") ||
-      id == "puell_multiple" ||
-      id.endsWith("velocity")
-    ) {
-      setUnit("ratio");
-    }
-    if (
-      (!unit || thoroughUnitCheck) &&
-      (id === "price_drawdown" ||
-        id === "difficulty_adjustment" ||
-        id.endsWith("inflation_rate") ||
-        id.endsWith("_oscillator") ||
-        id.endsWith("_dominance") ||
-        id.endsWith("_returns") ||
-        id.endsWith("_rebound") ||
-        id.endsWith("_volatility") ||
-        id.endsWith("_cagr"))
-    ) {
-      setUnit("percentage");
-    }
-    if (
-      (!unit || thoroughUnitCheck) &&
-      (id.endsWith("count") ||
-        id.includes("_count_") ||
-        id.startsWith("block_count") ||
-        id.includes("blocks_mined") ||
-        (id.includes("tx_v") && !id.includes("vsize")))
-    ) {
-      setUnit("count");
-    }
-    if (
-      (!unit || thoroughUnitCheck) &&
-      (id.startsWith("hash_rate") || id.endsWith("as_hash"))
-    ) {
-      setUnit("h/s");
-    }
-    if ((!unit || thoroughUnitCheck) && id === "pool") {
-      setUnit("id");
-    }
-    if ((!unit || thoroughUnitCheck) && id.includes("fee_rate")) {
-      setUnit("sat/vb");
-    }
-    if ((!unit || thoroughUnitCheck) && id.startsWith("is_")) {
-      setUnit("bool");
-    }
-    if ((!unit || thoroughUnitCheck) && id.endsWith("type")) {
-      setUnit("type");
-    }
-    if (
-      (!unit || thoroughUnitCheck) &&
-      (id === "interval" || id.startsWith("block_interval"))
-    ) {
-      setUnit("secs");
-    }
-    if ((!unit || thoroughUnitCheck) && id.endsWith("_per_sec")) {
-      setUnit("/sec");
-    }
-    if ((!unit || thoroughUnitCheck) && id.endsWith("locktime")) {
-      setUnit("locktime");
-    }
-
-    if ((!unit || thoroughUnitCheck) && id.endsWith("version")) {
-      setUnit("version");
-    }
-    if (
-      (!unit || thoroughUnitCheck) &&
-      (id === "txid" ||
-        (id.endsWith("bytes") && !id.endsWith("vbytes")) ||
-        id.endsWith("base_size") ||
-        id.endsWith("total_size") ||
-        id.includes("block_size"))
-    ) {
-      setUnit("bytes");
-    }
-    if ((!unit || thoroughUnitCheck) && id.endsWith("_sd")) {
-      setUnit("sd");
-    }
-    if (
-      (!unit || thoroughUnitCheck) &&
-      (id.includes("vsize") || id.includes("vbytes"))
-    ) {
-      setUnit("vb");
-    }
-    if ((!unit || thoroughUnitCheck) && id.includes("weight")) {
-      setUnit("wu");
-    }
-    if ((!unit || thoroughUnitCheck) && id.endsWith("index")) {
-      setUnit("index");
-    }
-    if (
-      (!unit || thoroughUnitCheck) &&
-      (id === "date" || id === "date_fixed")
-    ) {
-      setUnit("date");
-    }
-    if (
-      (!unit || thoroughUnitCheck) &&
-      (id === "timestamp" || id === "timestamp_fixed")
-    ) {
-      setUnit("timestamp");
-    }
-    if ((!unit || thoroughUnitCheck) && id.includes("coinblocks")) {
-      setUnit("coinblocks");
-    }
-    if ((!unit || thoroughUnitCheck) && id.includes("coindays")) {
-      setUnit("coindays");
-    }
-    if ((!unit || thoroughUnitCheck) && id.includes("satblocks")) {
-      setUnit("satblocks");
-    }
-    if ((!unit || thoroughUnitCheck) && id.includes("satdays")) {
-      setUnit("satdays");
-    }
-    if ((!unit || thoroughUnitCheck) && id.endsWith("height")) {
-      setUnit("height");
-    }
-    if ((!unit || thoroughUnitCheck) && id.endsWith("rel_to_market_cap")) {
-      setUnit("%mcap");
-    }
-    if ((!unit || thoroughUnitCheck) && id.endsWith("rel_to_own_market_cap")) {
-      setUnit("%cmcap");
-    }
-    if (
-      (!unit || thoroughUnitCheck) &&
-      id.endsWith("rel_to_own_total_unrealized_pnl")
-    ) {
-      setUnit("%cp+l");
-    }
-    if ((!unit || thoroughUnitCheck) && id.endsWith("rel_to_realized_cap")) {
-      setUnit("%rcap");
-    }
-    if (
-      (!unit || thoroughUnitCheck) &&
-      id.endsWith("rel_to_circulating_supply")
-    ) {
-      setUnit("%all");
-    }
-    if (
-      (!unit || thoroughUnitCheck) &&
-      (id.includes("rel_to_realized_profit") ||
-        id.includes("rel_to_realized_loss"))
-    ) {
-      setUnit("%pnl");
-    }
-    if ((!unit || thoroughUnitCheck) && id.endsWith("rel_to_own_supply")) {
-      setUnit("%self");
-    }
-    if ((!unit || thoroughUnitCheck) && id.endsWith("epoch")) {
-      setUnit("epoch");
-    }
-    if ((!unit || thoroughUnitCheck) && id === "difficulty") {
-      setUnit("difficulty");
-    }
-    if ((!unit || thoroughUnitCheck) && id === "blockhash") {
-      setUnit("hash");
-    }
-    if ((!unit || thoroughUnitCheck) && id.startsWith("hash_price_phs")) {
-      setUnit("usd/(ph/s)/day");
-    }
-    if ((!unit || thoroughUnitCheck) && id.startsWith("hash_price_ths")) {
-      setUnit("usd/(th/s)/day");
-    }
-    if ((!unit || thoroughUnitCheck) && id.startsWith("hash_value_phs")) {
-      setUnit("sats/(ph/s)/day");
-    }
-    if ((!unit || thoroughUnitCheck) && id.startsWith("hash_value_ths")) {
-      setUnit("sats/(th/s)/day");
-    }
-
-    if (
-      (!unit || thoroughUnitCheck) &&
-      (id.includes("days_between") ||
-        id.includes("days_since") ||
-        id.startsWith("days_before"))
-    ) {
-      setUnit("days");
-    }
-    if ((!unit || thoroughUnitCheck) && id.includes("years_between")) {
-      setUnit("years");
-    }
-    if ((!unit || thoroughUnitCheck) && id == "len") {
-      setUnit("len");
-    }
-    if ((!unit || thoroughUnitCheck) && id == "position") {
-      setUnit("position");
-    }
-    if ((!unit || thoroughUnitCheck) && id.startsWith("constant")) {
-      setUnit("constant");
-    }
-
-    if (!unit) {
-      console.log();
-      throw Error(`Unit not set for "${id}"`);
-    }
-    return /** @type {Unit} */ (unit);
-  }
-
-  const locale = {
-    numberToUSFormat,
-  };
-
-  const storage = {
-    /**
-     * @param {string} key
-     */
-    readNumber(key) {
-      const saved = this.read(key);
-      if (saved) {
-        return Number(saved);
-      }
-      return null;
-    },
-    /**
-     * @param {string} key
-     */
-    readBool(key) {
-      const saved = this.read(key);
-      if (saved) {
-        return isSerializedBooleanTrue(saved);
-      }
-      return null;
-    },
-    /**
-     * @param {string} key
-     */
-    read(key) {
-      try {
-        return localStorage.getItem(key);
-      } catch (_) {
-        return null;
-      }
-    },
-    /**
-     * @param {string} key
-     * @param {string | boolean | null | undefined} value
-     */
-    write(key, value) {
-      try {
-        value !== undefined && value !== null
-          ? localStorage.setItem(key, String(value))
-          : localStorage.removeItem(key);
-      } catch (_) {}
-    },
-    /**
-     * @param {string} key
-     */
-    remove(key) {
-      this.write(key, undefined);
-    },
-  };
-
-  const serde = {
-    string: {
-      /**
-       * @param {string} v
-       */
-      serialize(v) {
-        return v;
-      },
-      /**
-       * @param {string} v
-       */
-      deserialize(v) {
-        return v;
-      },
-    },
-    vecIds: {
-      /**
-       * @param {VecId[]} v
-       */
-      serialize(v) {
-        return v.join(",");
-      },
-      /**
-       * @param {string} v
-       */
-      deserialize(v) {
-        return /** @type {VecId[]} */ (v.split(","));
-      },
-    },
-    number: {
-      /**
-       * @param {number} v
-       */
-      serialize(v) {
-        return String(v);
-      },
-      /**
-       * @param {string} v
-       */
-      deserialize(v) {
-        return Number(v);
-      },
-    },
-    optNumber: {
-      /**
-       * @param {number | null} v
-       */
-      serialize(v) {
-        return v !== null ? String(v) : "";
-      },
-      /**
-       * @param {string} v
-       */
-      deserialize(v) {
-        return v ? Number(v) : null;
-      },
-    },
-    optDate: {
-      /**
-       * @param {Date |  null} date
-       */
-      serialize(date) {
-        return date !== null ? date.toString() : "";
-      },
-      /**
-       * @param {string} v
-       */
-      deserialize(v) {
-        return new Date(v);
-      },
-    },
-    boolean: {
-      /**
-       * @param {boolean} v
-       */
-      serialize(v) {
-        return String(v);
-      },
-      /**
-       * @param {string} v
-       */
-      deserialize(v) {
-        if (v === "true") {
-          return true;
-        } else if (v === "false") {
-          return false;
-        } else {
-          throw "deser bool err";
-        }
-      },
-    },
-    index: {
-      /**
-       * @param {Index} v
-       */
-      serialize(v) {
-        switch (v) {
-          case /** @satisfies {DateIndex} */ (0):
-            return "dateindex";
-          case /** @satisfies {DecadeIndex} */ (1):
-            return "decadeindex";
-          case /** @satisfies {DifficultyEpoch} */ (2):
-            return "difficultyepoch";
-          case /** @satisfies {EmptyOutputIndex} */ (3):
-            return "emptyoutputindex";
-          case /** @satisfies {HalvingEpoch} */ (4):
-            return "halvingepoch";
-          case /** @satisfies {Height} */ (5):
-            return "height";
-          case /** @satisfies {InputIndex} */ (6):
-            return "inputindex";
-          case /** @satisfies {MonthIndex} */ (7):
-            return "monthindex";
-          case /** @satisfies {OpReturnIndex} */ (8):
-            return "opreturnindex";
-          case /** @satisfies {OutputIndex} */ (9):
-            return "outputindex";
-          case /** @satisfies {P2AAddressIndex} */ (10):
-            return "p2aaddressindex";
-          case /** @satisfies {P2MSOutputIndex} */ (11):
-            return "p2msoutputindex";
-          case /** @satisfies {P2PK33AddressIndex} */ (12):
-            return "p2pk33addressindex";
-          case /** @satisfies {P2PK65AddressIndex} */ (13):
-            return "p2pk65addressindex";
-          case /** @satisfies {P2PKHAddressIndex} */ (14):
-            return "p2pkhaddressindex";
-          case /** @satisfies {P2SHAddressIndex} */ (15):
-            return "p2shaddressindex";
-          case /** @satisfies {P2TRAddressIndex} */ (16):
-            return "p2traddressindex";
-          case /** @satisfies {P2WPKHAddressIndex} */ (17):
-            return "p2wpkhaddressindex";
-          case /** @satisfies {P2WSHAddressIndex} */ (18):
-            return "p2wshaddressindex";
-          case /** @satisfies {QuarterIndex} */ (19):
-            return "quarterindex";
-          case /** @satisfies {SemesterIndex} */ (20):
-            return "semesterindex";
-          case /** @satisfies {TxIndex} */ (21):
-            return "txindex";
-          case /** @satisfies {UnknownOutputIndex} */ (22):
-            return "unknownoutputindex";
-          case /** @satisfies {WeekIndex} */ (23):
-            return "weekindex";
-          case /** @satisfies {YearIndex} */ (24):
-            return "yearindex";
-          case /** @satisfies {LoadedAddressIndex} */ (25):
-            return "loadedaddressindex";
-          case /** @satisfies {EmptyAddressIndex} */ (26):
-            return "emptyaddressindex";
-        }
-      },
-    },
-    chartableIndex: {
-      /**
-       * @param {number} v
-       * @returns {SerializedChartableIndex | null}
-       */
-      serialize(v) {
-        switch (v) {
-          case /** @satisfies {DateIndex} */ (0):
-            return "date";
-          case /** @satisfies {DecadeIndex} */ (1):
-            return "decade";
-          case /** @satisfies {DifficultyEpoch} */ (2):
-            return "d.epoch";
-          // case /** @satisfies {HalvingEpoch} */ (4):
-          //   return "halving";
-          case /** @satisfies {Height} */ (5):
-            return "timestamp";
-          case /** @satisfies {MonthIndex} */ (7):
-            return "month";
-          case /** @satisfies {QuarterIndex} */ (19):
-            return "quarter";
-          case /** @satisfies {SemesterIndex} */ (20):
-            return "semester";
-          case /** @satisfies {WeekIndex} */ (23):
-            return "week";
-          case /** @satisfies {YearIndex} */ (24):
-            return "year";
-          default:
-            return null;
-        }
-      },
-      /**
-       * @param {SerializedChartableIndex} v
-       * @returns {Index}
-       */
-      deserialize(v) {
-        switch (v) {
-          case "timestamp":
-            return /** @satisfies {Height} */ (5);
-          case "date":
-            return /** @satisfies {DateIndex} */ (0);
-          case "week":
-            return /** @satisfies {WeekIndex} */ (23);
-          case "d.epoch":
-            return /** @satisfies {DifficultyEpoch} */ (2);
-          case "month":
-            return /** @satisfies {MonthIndex} */ (7);
-          case "quarter":
-            return /** @satisfies {QuarterIndex} */ (19);
-          case "semester":
-            return /** @satisfies {SemesterIndex} */ (20);
-          case "year":
-            return /** @satisfies {YearIndex} */ (24);
-          case "decade":
-            return /** @satisfies {DecadeIndex} */ (1);
-          default:
-            throw Error("todo");
-        }
-      },
-    },
-  };
-
-  const formatters = {
-    dollars: new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    }),
-    percentage: new Intl.NumberFormat("en-US", {
-      style: "percent",
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    }),
-  };
-
-  const date = {
-    ONE_DAY_IN_MS: 1000 * 60 * 60 * 24,
-    todayUTC() {
-      const today = new Date();
-      return new Date(
-        Date.UTC(
-          today.getUTCFullYear(),
-          today.getUTCMonth(),
-          today.getUTCDate(),
-          0,
-          0,
-          0,
-        ),
-      );
-    },
-    /**
-     * @param {Date} date
-     */
-    toString(date) {
-      return date.toJSON().split("T")[0];
-    },
-    /**
-     * @param {Date} date
-     */
-    toDateIndex(date) {
-      if (
-        date.getUTCFullYear() === 2009 &&
-        date.getUTCMonth() === 0 &&
-        date.getUTCDate() === 3
-      )
-        return 0;
-      return this.differenceBetween(date, new Date("2009-01-09"));
-    },
-    /**
-     * @param {Date} start
-     * @param {Date} end
-     */
-    getRange(start, end) {
-      const dates = /** @type {Date[]} */ ([]);
-      let currentDate = new Date(start);
-      while (currentDate <= end) {
-        dates.push(new Date(currentDate));
-        currentDate.setUTCDate(currentDate.getUTCDate() + 1);
-      }
-      return dates;
-    },
-    /**
-     * @param {Date} date1
-     * @param {Date} date2
-     */
-    differenceBetween(date1, date2) {
-      return Math.abs(date1.valueOf() - date2.valueOf()) / this.ONE_DAY_IN_MS;
-    },
-  };
-
-  /**
-   *
-   * @template {(...args: any[]) => any} F
-   * @param {F} callback
-   * @param {number} [wait]
-   */
-  function throttle(callback, wait = 1000) {
-    /** @type {number | null} */
-    let timeoutId = null;
-    /** @type {Parameters<F>} */
-    let latestArgs;
-
-    return (/** @type {Parameters<F>} */ ...args) => {
-      latestArgs = args;
-
-      if (!timeoutId) {
-        // Otherwise it optimizes away timeoutId in Chrome and FF
-        timeoutId = timeoutId;
-        timeoutId = setTimeout(() => {
-          callback(...latestArgs); // Execute with latest args
-          timeoutId = null;
-        }, wait);
-      }
-    };
-  }
-
-  /**
-   * @param {VoidFunction} callback
-   * @param {number} [timeout = 1]
-   */
-  function runWhenIdle(callback, timeout = 1) {
-    if ("requestIdleCallback" in window) {
-      requestIdleCallback(callback);
-    } else {
-      setTimeout(callback, timeout);
-    }
-  }
-
-  /**
-   * @param {Date} oldest
-   * @param {Date} youngest
-   * @returns {number}
-   */
-  function getNumberOfDaysBetweenTwoDates(oldest, youngest) {
-    return Math.round(
-      Math.abs((youngest.getTime() - oldest.getTime()) / date.ONE_DAY_IN_MS),
-    );
-  }
-
-  /**
-   * @param {string} s
-   */
-  function stringToId(s) {
-    return (
-      s
-        // .replace(/\W/g, " ")
-        .trim()
-        .replace(/ +/g, "-")
-        .toLowerCase()
-    );
-  }
-
-  const api = (() => {
-    const CACHE_NAME = "api";
-    const API_VECS_PREFIX = "/api/vecs";
-
-    /**
-     * @template T
-     * @param {(value: T) => void} callback
-     * @param {string} path
-     * @param {boolean} [mustBeArray]
-     */
-    async function fetchApi(callback, path, mustBeArray) {
-      const url = `${API_VECS_PREFIX}${path}`;
-
-      /** @type {T | null} */
-      let cachedJson = null;
-
-      /** @type {Cache | undefined} */
-      let cache;
-      try {
-        cache = await caches.open(CACHE_NAME);
-        const cachedResponse = await cache.match(url);
-        if (cachedResponse) {
-          console.debug(`cache: ${url}`);
-          const json = /** @type {T} */ await cachedResponse.json();
-          cachedJson = json;
-          callback(json);
-        }
-      } catch {}
-
-      if (navigator.onLine) {
-        // TODO: rerun after 10s instead of returning (due to some kind of error)
-
-        /** @type {Response | undefined} */
-        let fetchedResponse;
-        try {
-          fetchedResponse = await fetch(url, {
-            signal: AbortSignal.timeout(5000),
-          });
-          if (!fetchedResponse.ok) {
-            throw Error;
-          }
-        } catch {
-          return cachedJson;
-        }
-
-        const clonedResponse = fetchedResponse.clone();
-
-        let fetchedJson = /** @type {T | null} */ (null);
-        try {
-          const f = await fetchedResponse.json();
-          fetchedJson = /** @type {T} */ (
-            mustBeArray && !Array.isArray(f) ? [f] : f
-          );
-        } catch (_) {
-          return cachedJson;
-        }
-
-        if (!fetchedJson) return cachedJson;
-
-        console.debug(`fetch: ${url}`);
-
-        if (Array.isArray(cachedJson) && Array.isArray(fetchedJson)) {
-          const previousLength = cachedJson?.length || 0;
-          const newLength = fetchedJson.length;
-
-          if (!newLength) {
-            return cachedJson;
-          }
-
-          if (previousLength && previousLength === newLength) {
-            const previousLastValue = Object.values(cachedJson || []).at(-1);
-            const newLastValue = Object.values(fetchedJson).at(-1);
-            if (
-              JSON.stringify(previousLastValue) === JSON.stringify(newLastValue)
-            ) {
-              return cachedJson;
-            }
-          }
-        }
-
-        callback(fetchedJson);
-
-        runWhenIdle(async function () {
-          try {
-            await cache?.put(url, clonedResponse);
-          } catch (_) {}
-        });
-
-        return fetchedJson;
-      } else {
-        return cachedJson;
-      }
-    }
-
-    /**
-     * @param {Index} index
-     * @param {VecId} vecId
-     * @param {number} [from]
-     * @param {number} [to]
-     */
-    function genPath(index, vecId, from, to) {
-      let path = `/${serde.index.serialize(index)}-to-${vecId.replaceAll(
-        "_",
-        "-",
-      )}?`;
-
-      if (from !== undefined) {
-        path += `from=${from}`;
-      }
-      if (to !== undefined) {
-        if (!path.endsWith("?")) {
-          path += `&`;
-        }
-        path += `to=${to}`;
-      }
-      return path;
-    }
-
-    return {
-      /**
-       * @param {Index} index
-       * @param {VecId} vecId
-       * @param {number} from
-       */
-      genUrl(index, vecId, from) {
-        return `${API_VECS_PREFIX}${genPath(index, vecId, from)}`;
-      },
-      /**
-       * @template {number | OHLCTuple} [T=number]
-       * @param {(v: T[]) => void} callback
-       * @param {Index} index
-       * @param {VecId} vecId
-       * @param {number} [from]
-       * @param {number} [to]
-       */
-      fetchVec(callback, index, vecId, from, to) {
-        return fetchApi(callback, genPath(index, vecId, from, to), true);
-      },
-      /**
-       * @template {number | OHLCTuple} [T=number]
-       * @param {(v: T) => void} callback
-       * @param {Index} index
-       * @param {VecId} vecId
-       */
-      fetchLast(callback, index, vecId) {
-        return fetchApi(callback, genPath(index, vecId, -1));
-      },
-    };
-  })();
-
-  return {
-    api,
-    isSerializedBooleanTrue,
-    sleep,
-    next,
-    array,
-    dom,
-    url,
-    locale,
-    storage,
-    serde,
-    formatters,
-    date,
-    throttle,
-    runWhenIdle,
-    getNumberOfDaysBetweenTwoDates,
-    stringToId,
-    vecidToUnit,
-  };
-}
-/** @typedef {ReturnType<typeof createUtils>} Utilities */
+import { createColors } from "./core/colors";
+import { createWebSockets } from "./core/ws";
+import * as utils from "./core/utils";
+import elements from "./core/elements";
+import env from "./core/env";
+import packages from "./lazy";
 
 /**
  * @param {Signals} signals
@@ -1743,606 +141,261 @@ function createVecsResources(signals, utils, env, vecIdToIndexes) {
 /** @typedef {ReturnType<typeof createVecsResources>} VecsResources */
 /** @typedef {ReturnType<VecsResources["getOrCreate"]>} VecResource */
 
-function initEnv() {
-  const standalone =
-    "standalone" in window.navigator && !!window.navigator.standalone;
-  const userAgent = navigator.userAgent.toLowerCase();
-  const isChrome = userAgent.includes("chrome");
-  const safari = userAgent.includes("safari");
-  const safariOnly = safari && !isChrome;
-  const macOS = userAgent.includes("mac os");
-  const iphone = userAgent.includes("iphone");
-  const ipad = userAgent.includes("ipad");
-  const ios = iphone || ipad;
+function initFrameSelectors() {
+  const children = Array.from(elements.selectors.children);
 
-  return {
-    standalone,
-    userAgent,
-    isChrome,
-    safari,
-    safariOnly,
-    macOS,
-    iphone,
-    ipad,
-    ios,
-    localhost,
-  };
-}
-/** @typedef {ReturnType<typeof initEnv>} Env */
+  /** @type {HTMLElement | undefined} */
+  let focusedFrame = undefined;
 
-function getElements() {
-  /**
-   * @param {string} id
-   */
-  function getElementById(id) {
-    const element = window.document.getElementById(id);
-    if (!element) throw `Element with id = "${id}" should exist`;
-    return element;
-  }
+  for (let i = 0; i < children.length; i++) {
+    const element = children[i];
 
-  return {
-    head: window.document.getElementsByTagName("head")[0],
-    body: window.document.body,
-    main: getElementById("main"),
-    aside: getElementById("aside"),
-    asideLabel: getElementById("aside-selector-label"),
-    navLabel: getElementById(`nav-selector-label`),
-    searchLabel: getElementById(`search-selector-label`),
-    search: getElementById("search"),
-    nav: getElementById("nav"),
-    searchInput: /** @type {HTMLInputElement} */ (
-      getElementById("search-input")
-    ),
-    searchResults: getElementById("search-results"),
-    selectors: getElementById("frame-selectors"),
-    style: getComputedStyle(window.document.documentElement),
-    charts: getElementById("charts"),
-    table: getElementById("table"),
-    explorer: getElementById("explorer"),
-    simulation: getElementById("simulation"),
-  };
-}
-/** @typedef {ReturnType<typeof getElements>} Elements */
+    switch (element.tagName) {
+      case "LABEL": {
+        element.addEventListener("click", () => {
+          const inputId = element.getAttribute("for");
 
-/**
- * @param {Accessor<boolean>} dark
- * @param {Elements} elements
- */
-function createColors(dark, elements) {
-  /**
-   * @param {string} color
-   */
-  function getColor(color) {
-    return elements.style.getPropertyValue(`--${color}`);
-  }
-  function red() {
-    return getColor("red");
-  }
-  function orange() {
-    return getColor("orange");
-  }
-  function amber() {
-    return getColor("amber");
-  }
-  function yellow() {
-    return getColor("yellow");
-  }
-  function avocado() {
-    return getColor("avocado");
-  }
-  function lime() {
-    return getColor("lime");
-  }
-  function green() {
-    return getColor("green");
-  }
-  function emerald() {
-    return getColor("emerald");
-  }
-  function teal() {
-    return getColor("teal");
-  }
-  function cyan() {
-    return getColor("cyan");
-  }
-  function sky() {
-    return getColor("sky");
-  }
-  function blue() {
-    return getColor("blue");
-  }
-  function indigo() {
-    return getColor("indigo");
-  }
-  function violet() {
-    return getColor("violet");
-  }
-  function purple() {
-    return getColor("purple");
-  }
-  function fuchsia() {
-    return getColor("fuchsia");
-  }
-  function pink() {
-    return getColor("pink");
-  }
-  function rose() {
-    return getColor("rose");
-  }
-  function gray() {
-    return getColor("gray");
-  }
+          if (!inputId) {
+            console.log(element, element.getAttribute("for"));
+            throw "Input id in label not found";
+          }
 
-  /**
-   * @param {string} property
-   */
-  function getLightDarkValue(property) {
-    const value = elements.style.getPropertyValue(property);
-    const [light, _dark] = value.slice(11, -1).split(", ");
-    return dark() ? _dark : light;
-  }
+          const input = window.document.getElementById(inputId);
 
-  function textColor() {
-    return getLightDarkValue("--color");
-  }
-  function borderColor() {
-    return getLightDarkValue("--border-color");
-  }
+          if (!input || !("value" in input)) {
+            throw "Not input or no value";
+          }
 
-  return {
-    default: textColor,
-    gray,
-    border: borderColor,
+          const frame = window.document.getElementById(
+            /** @type {string} */ (input.value),
+          );
 
-    red,
-    orange,
-    amber,
-    yellow,
-    avocado,
-    lime,
-    green,
-    emerald,
-    teal,
-    cyan,
-    sky,
-    blue,
-    indigo,
-    violet,
-    purple,
-    fuchsia,
-    pink,
-    rose,
-  };
-}
-/**
- * @typedef {ReturnType<typeof createColors>} Colors
- * @typedef {Colors["orange"]} Color
- * @typedef {keyof Colors} ColorName
- */
+          if (!frame) {
+            console.log(input.value);
+            throw "Frame element doesn't exist";
+          }
 
-/**
- * @param {Signals} signals
- * @param {Utilities} utils
- */
-function initWebSockets(signals, utils) {
-  /**
-   * @template T
-   * @param {(callback: (value: T) => void) => WebSocket} creator
-   */
-  function createWebsocket(creator) {
-    let ws = /** @type {WebSocket | null} */ (null);
-
-    const live = signals.createSignal(false);
-    const latest = signals.createSignal(/** @type {T | null} */ (null));
-
-    function reinitWebSocket() {
-      if (!ws || ws.readyState === ws.CLOSED) {
-        console.log("ws: reinit");
-        resource.open();
-      }
-    }
-
-    function reinitWebSocketIfDocumentNotHidden() {
-      !window.document.hidden && reinitWebSocket();
-    }
-
-    const resource = {
-      live,
-      latest,
-      open() {
-        ws = creator((value) => latest.set(() => value));
-
-        ws.addEventListener("open", () => {
-          console.log("ws: open");
-          live.set(true);
-        });
-
-        ws.addEventListener("close", () => {
-          console.log("ws: close");
-          live.set(false);
-        });
-
-        window.document.addEventListener(
-          "visibilitychange",
-          reinitWebSocketIfDocumentNotHidden,
-        );
-
-        window.document.addEventListener("online", reinitWebSocket);
-      },
-      close() {
-        ws?.close();
-        window.document.removeEventListener(
-          "visibilitychange",
-          reinitWebSocketIfDocumentNotHidden,
-        );
-        window.document.removeEventListener("online", reinitWebSocket);
-        live.set(false);
-        ws = null;
-      },
-    };
-
-    return resource;
-  }
-
-  /**
-   * @param {(candle: CandlestickData) => void} callback
-   */
-  function krakenCandleWebSocketCreator(callback) {
-    const ws = new WebSocket("wss://ws.kraken.com/v2");
-
-    ws.addEventListener("open", () => {
-      ws.send(
-        JSON.stringify({
-          method: "subscribe",
-          params: {
-            channel: "ohlc",
-            symbol: ["BTC/USD"],
-            interval: 1440,
-          },
-        }),
-      );
-    });
-
-    ws.addEventListener("message", (message) => {
-      const result = JSON.parse(message.data);
-
-      if (result.channel !== "ohlc") return;
-
-      const { interval_begin, open, high, low, close } = result.data.at(-1);
-
-      /** @type {CandlestickData} */
-      const candle = {
-        // index: -1,
-        time: new Date(interval_begin).valueOf() / 1000,
-        open: Number(open),
-        high: Number(high),
-        low: Number(low),
-        close: Number(close),
-      };
-
-      candle && callback({ ...candle });
-    });
-
-    return ws;
-  }
-
-  /** @type {ReturnType<typeof createWebsocket<CandlestickData>>} */
-  const kraken1dCandle = createWebsocket((callback) =>
-    krakenCandleWebSocketCreator(callback),
-  );
-
-  kraken1dCandle.open();
-
-  function createDocumentTitleEffect() {
-    signals.createEffect(kraken1dCandle.latest, (latest) => {
-      if (latest) {
-        const close = latest.close;
-        console.log("close:", close);
-
-        window.document.title = `${latest.close.toLocaleString("en-us")} | ${
-          window.location.host
-        }`;
-      }
-    });
-  }
-  createDocumentTitleEffect();
-
-  return {
-    kraken1dCandle,
-  };
-}
-/** @typedef {ReturnType<typeof initWebSockets>} WebSockets */
-
-function main() {
-  const optionsPromise = import("./options.js");
-  const vecsPromise = import("./bridge/vecs.js");
-  const poolsPromise = import("./bridge/pools.js");
-  const packages = initPackages();
-  const env = initEnv();
-  const utils = createUtils();
-  const elements = getElements();
-
-  function initFrameSelectors() {
-    const children = Array.from(elements.selectors.children);
-
-    /** @type {HTMLElement | undefined} */
-    let focusedFrame = undefined;
-
-    for (let i = 0; i < children.length; i++) {
-      const element = children[i];
-
-      switch (element.tagName) {
-        case "LABEL": {
-          element.addEventListener("click", () => {
-            const inputId = element.getAttribute("for");
-
-            if (!inputId) {
-              console.log(element, element.getAttribute("for"));
-              throw "Input id in label not found";
-            }
-
-            const input = window.document.getElementById(inputId);
-
-            if (!input || !("value" in input)) {
-              throw "Not input or no value";
-            }
-
-            const frame = window.document.getElementById(
-              /** @type {string} */ (input.value),
-            );
-
-            if (!frame) {
-              console.log(input.value);
-              throw "Frame element doesn't exist";
-            }
-
-            if (frame === focusedFrame) {
-              return;
-            }
-
-            frame.hidden = false;
-            if (focusedFrame) {
-              focusedFrame.hidden = true;
-            }
-            focusedFrame = frame;
-          });
-          break;
-        }
-      }
-    }
-
-    elements.asideLabel.click();
-
-    // When going from mobile view to desktop view, if selected frame was open, go to the nav frame
-    new IntersectionObserver((entries) => {
-      for (let i = 0; i < entries.length; i++) {
-        if (
-          !entries[i].isIntersecting &&
-          entries[i].target === elements.asideLabel &&
-          focusedFrame == elements.aside
-        ) {
-          elements.navLabel.click();
-        }
-      }
-    }).observe(elements.asideLabel);
-
-    function setAsideParent() {
-      const { clientWidth } = window.document.documentElement;
-      const { aside, body, main } = elements;
-      const MEDIUM_WIDTH = 768;
-      if (clientWidth >= MEDIUM_WIDTH) {
-        aside.parentElement !== body && body.append(aside);
-      } else {
-        aside.parentElement !== main && main.append(aside);
-      }
-    }
-
-    setAsideParent();
-
-    window.addEventListener("resize", setAsideParent);
-  }
-  initFrameSelectors();
-
-  function createKeyDownEventListener() {
-    window.document.addEventListener("keydown", (event) => {
-      switch (event.key) {
-        case "Escape": {
-          event.stopPropagation();
-          event.preventDefault();
-          elements.navLabel.click();
-          break;
-        }
-        case "/": {
-          if (window.document.activeElement === elements.searchInput) {
+          if (frame === focusedFrame) {
             return;
           }
 
-          event.stopPropagation();
-          event.preventDefault();
-          elements.searchLabel.click();
-          elements.searchInput.focus();
-          break;
-        }
+          frame.hidden = false;
+          if (focusedFrame) {
+            focusedFrame.hidden = true;
+          }
+          focusedFrame = frame;
+        });
+        break;
       }
-    });
+    }
   }
-  createKeyDownEventListener();
 
-  Promise.all([
-    packages.signals(),
-    vecsPromise,
-    poolsPromise,
-    optionsPromise,
-  ]).then(
-    ([
-      signals,
-      { createVecIdToIndexes, VERSION },
-      { createPools },
-      { initOptions },
-    ]) =>
-      signals.createRoot(() => {
-        const owner = signals.getOwner();
+  elements.asideLabel.click();
 
-        console.log(`VERSION = ${VERSION}`);
+  // When going from mobile view to desktop view, if selected frame was open, go to the nav frame
+  new IntersectionObserver((entries) => {
+    for (let i = 0; i < entries.length; i++) {
+      if (
+        !entries[i].isIntersecting &&
+        entries[i].target === elements.asideLabel &&
+        focusedFrame == elements.aside
+      ) {
+        elements.navLabel.click();
+      }
+    }
+  }).observe(elements.asideLabel);
 
-        const vecIdToIndexes = createVecIdToIndexes();
+  function setAsideParent() {
+    const { clientWidth } = window.document.documentElement;
+    const { aside, body, main } = elements;
+    const MEDIUM_WIDTH = 768;
+    if (clientWidth >= MEDIUM_WIDTH) {
+      aside.parentElement !== body && body.append(aside);
+    } else {
+      aside.parentElement !== main && main.append(aside);
+    }
+  }
 
-        if (env.localhost) {
-          Object.keys(vecIdToIndexes).forEach((id) => {
-            utils.vecidToUnit(/** @type {VecId} */ (id));
-          });
-        }
+  setAsideParent();
 
-        function initDark() {
-          const preferredColorSchemeMatchMedia = window.matchMedia(
-            "(prefers-color-scheme: dark)",
-          );
-          const dark = signals.createSignal(
-            preferredColorSchemeMatchMedia.matches,
-          );
-          preferredColorSchemeMatchMedia.addEventListener(
-            "change",
-            ({ matches }) => {
-              dark.set(matches);
+  window.addEventListener("resize", setAsideParent);
+}
+initFrameSelectors();
+
+Promise.all([
+  packages.signals(),
+  packages.vecs(),
+  packages.pools(),
+  packages.options(),
+]).then(
+  ([
+    signals,
+    { createVecIdToIndexes, VERSION },
+    { createPools },
+    { initOptions },
+  ]) =>
+    signals.createRoot(() => {
+      const owner = signals.getOwner();
+
+      console.log(`VERSION = ${VERSION}`);
+
+      const vecIdToIndexes = createVecIdToIndexes();
+
+      if (env.localhost) {
+        Object.keys(vecIdToIndexes).forEach((id) => {
+          utils.vecidToUnit(/** @type {VecId} */ (id));
+        });
+      }
+
+      function initDark() {
+        const preferredColorSchemeMatchMedia = window.matchMedia(
+          "(prefers-color-scheme: dark)",
+        );
+        const dark = signals.createSignal(
+          preferredColorSchemeMatchMedia.matches,
+        );
+        preferredColorSchemeMatchMedia.addEventListener(
+          "change",
+          ({ matches }) => {
+            dark.set(matches);
+          },
+        );
+        return dark;
+      }
+      const dark = initDark();
+
+      const qrcode = signals.createSignal(/** @type {string | null} */ (null));
+
+      function createLastHeightResource() {
+        const lastHeight = signals.createSignal(0);
+        function fetchLastHeight() {
+          utils.api.fetchLast(
+            (h) => {
+              lastHeight.set(h);
             },
+            /** @satisfies {Height} */ (5),
+            "height",
           );
-          return dark;
         }
-        const dark = initDark();
+        fetchLastHeight();
+        setInterval(fetchLastHeight, 10_000);
+        return lastHeight;
+      }
+      const lastHeight = createLastHeightResource();
 
-        const qrcode = signals.createSignal(
-          /** @type {string | null} */ (null),
-        );
+      const webSockets = createWebSockets(signals);
 
-        function createLastHeightResource() {
-          const lastHeight = signals.createSignal(0);
-          function fetchLastHeight() {
-            utils.api.fetchLast(
-              (h) => {
-                lastHeight.set(h);
-              },
-              /** @satisfies {Height} */ (5),
-              "height",
-            );
-          }
-          fetchLastHeight();
-          setInterval(fetchLastHeight, 10_000);
-          return lastHeight;
-        }
-        const lastHeight = createLastHeightResource();
+      const vecsResources = createVecsResources(
+        signals,
+        utils,
+        env,
+        vecIdToIndexes,
+      );
 
-        const webSockets = initWebSockets(signals, utils);
+      const pools = createPools();
 
-        const vecsResources = createVecsResources(
-          signals,
-          utils,
-          env,
-          vecIdToIndexes,
-        );
+      const colors = createColors(dark);
 
-        const pools = createPools();
+      const options = initOptions({
+        colors,
+        env,
+        signals,
+        utils,
+        qrcode,
+        vecIdToIndexes,
+        pools,
+      });
 
-        const colors = createColors(dark, elements);
+      window.addEventListener("popstate", (event) => {
+        const path = window.document.location.pathname
+          .split("/")
+          .filter((v) => v);
+        let folder = options.tree;
 
-        const options = initOptions({
-          colors,
-          env,
-          signals,
-          utils,
-          qrcode,
-          vecIdToIndexes,
-          pools,
-        });
-
-        window.addEventListener("popstate", (event) => {
-          const path = window.document.location.pathname
-            .split("/")
-            .filter((v) => v);
-          let folder = options.tree;
-
-          while (path.length) {
-            const id = path.shift();
-            const res = folder.find((v) => id === utils.stringToId(v.name));
-            if (!res) throw "Option not found";
-            if (path.length >= 1) {
-              if (!("tree" in res)) {
-                throw "Unreachable";
-              }
-              folder = res.tree;
-            } else {
-              if ("tree" in res) {
-                throw "Unreachable";
-              }
-              options.selected.set(res);
+        while (path.length) {
+          const id = path.shift();
+          const res = folder.find((v) => id === utils.stringToId(v.name));
+          if (!res) throw "Option not found";
+          if (path.length >= 1) {
+            if (!("tree" in res)) {
+              throw "Unreachable";
             }
+            folder = res.tree;
+          } else {
+            if ("tree" in res) {
+              throw "Unreachable";
+            }
+            options.selected.set(res);
           }
-        });
+        }
+      });
 
-        function initSelected() {
-          let firstRun = true;
-          function initSelectedFrame() {
-            if (!firstRun) throw Error("Unreachable");
-            firstRun = false;
+      function initSelected() {
+        let firstRun = true;
+        function initSelectedFrame() {
+          if (!firstRun) throw Error("Unreachable");
+          firstRun = false;
 
-            const owner = signals.getOwner();
+          const owner = signals.getOwner();
 
-            const chartOption = signals.createSignal(
-              /** @type {ChartOption | null} */ (null),
-            );
-            const simOption = signals.createSignal(
-              /** @type {SimulationOption | null} */ (null),
-            );
+          const chartOption = signals.createSignal(
+            /** @type {ChartOption | null} */ (null),
+          );
+          const simOption = signals.createSignal(
+            /** @type {SimulationOption | null} */ (null),
+          );
 
-            let previousElement = /** @type {HTMLElement | undefined} */ (
-              undefined
-            );
-            let firstTimeLoadingChart = true;
-            let firstTimeLoadingTable = true;
-            let firstTimeLoadingSimulation = true;
-            let firstTimeLoadingExplorer = true;
+          let previousElement = /** @type {HTMLElement | undefined} */ (
+            undefined
+          );
+          let firstTimeLoadingChart = true;
+          let firstTimeLoadingTable = true;
+          let firstTimeLoadingSimulation = true;
+          let firstTimeLoadingExplorer = true;
 
-            signals.createEffect(options.selected, (option) => {
-              /** @type {HTMLElement} */
-              let element;
+          signals.createEffect(options.selected, (option) => {
+            /** @type {HTMLElement} */
+            let element;
 
-              switch (option.kind) {
-                case "explorer": {
-                  element = elements.explorer;
+            switch (option.kind) {
+              case "explorer": {
+                element = elements.explorer;
 
-                  if (firstTimeLoadingExplorer) {
-                    const chartPkg = packages.chart();
-                    import("./explorer.js").then(({ init }) =>
-                      chartPkg.then(({ createChartElement }) =>
-                        signals.runWithOwner(owner, () =>
-                          init({
-                            colors,
-                            elements,
-                            createChartElement,
-                            option: /** @type {Accessor<ChartOption>} */ (
-                              chartOption
-                            ),
-                            signals,
-                            utils,
-                            webSockets,
-                            vecsResources,
-                            vecIdToIndexes,
-                          }),
-                        ),
+                if (firstTimeLoadingExplorer) {
+                  const chartPkg = packages.chart();
+                  import("./panes/explorer.js").then(({ init }) =>
+                    chartPkg.then(({ createChartElement }) =>
+                      signals.runWithOwner(owner, () =>
+                        init({
+                          colors,
+                          elements,
+                          createChartElement,
+                          option: /** @type {Accessor<ChartOption>} */ (
+                            chartOption
+                          ),
+                          signals,
+                          utils,
+                          webSockets,
+                          vecsResources,
+                          vecIdToIndexes,
+                        }),
                       ),
-                    );
-                  }
-                  firstTimeLoadingExplorer = false;
-
-                  break;
+                    ),
+                  );
                 }
-                case "chart": {
-                  element = elements.charts;
+                firstTimeLoadingExplorer = false;
 
-                  chartOption.set(option);
+                break;
+              }
+              case "chart": {
+                element = elements.charts;
 
-                  if (firstTimeLoadingChart) {
-                    const chartPkg = packages.chart();
-                    import("./charts.js").then(({ init: initChartsElement }) =>
+                chartOption.set(option);
+
+                if (firstTimeLoadingChart) {
+                  const chartPkg = packages.chart();
+                  import("./panes/chart.js").then(
+                    ({ init: initChartsElement }) =>
                       chartPkg.then(({ createChartElement }) =>
                         signals.runWithOwner(owner, () =>
                           initChartsElement({
@@ -2362,454 +415,449 @@ function main() {
                           }),
                         ),
                       ),
-                    );
-                  }
-                  firstTimeLoadingChart = false;
-
-                  break;
+                  );
                 }
-                case "table": {
-                  element = elements.table;
+                firstTimeLoadingChart = false;
 
-                  if (firstTimeLoadingTable) {
-                    import("./table.js").then(({ init }) =>
+                break;
+              }
+              case "table": {
+                element = elements.table;
+
+                if (firstTimeLoadingTable) {
+                  import("./panes/table.js").then(({ init }) =>
+                    signals.runWithOwner(owner, () =>
+                      init({
+                        elements,
+                        signals,
+                        utils,
+                        vecsResources,
+                        option,
+                        vecIdToIndexes,
+                      }),
+                    ),
+                  );
+                }
+                firstTimeLoadingTable = false;
+
+                break;
+              }
+              case "simulation": {
+                element = elements.simulation;
+
+                simOption.set(option);
+
+                if (firstTimeLoadingSimulation) {
+                  const chart = packages.chart();
+                  import("./panes/simulation.js").then(({ init }) =>
+                    chart.then(({ createChartElement }) =>
                       signals.runWithOwner(owner, () =>
                         init({
+                          colors,
                           elements,
+                          createChartElement,
                           signals,
                           utils,
                           vecsResources,
-                          option,
-                          vecIdToIndexes,
                         }),
                       ),
-                    );
-                  }
-                  firstTimeLoadingTable = false;
-
-                  break;
+                    ),
+                  );
                 }
-                case "simulation": {
-                  element = elements.simulation;
+                firstTimeLoadingSimulation = false;
 
-                  simOption.set(option);
-
-                  if (firstTimeLoadingSimulation) {
-                    const chart = packages.chart();
-                    import("./simulation.js").then(({ init }) =>
-                      chart.then(({ createChartElement }) =>
-                        signals.runWithOwner(owner, () =>
-                          init({
-                            colors,
-                            elements,
-                            createChartElement,
-                            signals,
-                            utils,
-                            vecsResources,
-                          }),
-                        ),
-                      ),
-                    );
-                  }
-                  firstTimeLoadingSimulation = false;
-
-                  break;
-                }
-                case "url": {
-                  return;
-                }
+                break;
               }
-
-              if (element !== previousElement) {
-                if (previousElement) previousElement.hidden = true;
-                element.hidden = false;
+              case "url": {
+                return;
               }
+            }
 
-              if (!previousElement) {
-                utils.url.replaceHistory({ pathname: option.path });
-              }
+            if (element !== previousElement) {
+              if (previousElement) previousElement.hidden = true;
+              element.hidden = false;
+            }
 
-              previousElement = element;
-            });
-          }
+            if (!previousElement) {
+              utils.url.replaceHistory({ pathname: option.path });
+            }
 
-          function createMobileSwitchEffect() {
-            let firstRun = true;
-            signals.createEffect(options.selected, () => {
-              if (!firstRun && !utils.dom.isHidden(elements.asideLabel)) {
-                elements.asideLabel.click();
-              }
-              firstRun = false;
-            });
-          }
-          createMobileSwitchEffect();
-
-          utils.dom.onFirstIntersection(elements.aside, () =>
-            signals.runWithOwner(owner, initSelectedFrame),
-          );
+            previousElement = element;
+          });
         }
-        initSelected();
 
-        utils.dom.onFirstIntersection(elements.nav, async () => {
-          options.parent.set(elements.nav);
+        function createMobileSwitchEffect() {
+          let firstRun = true;
+          signals.createEffect(options.selected, () => {
+            if (!firstRun && !utils.dom.isHidden(elements.asideLabel)) {
+              elements.asideLabel.click();
+            }
+            firstRun = false;
+          });
+        }
+        createMobileSwitchEffect();
 
-          const option = options.selected();
-          if (!option) throw "Selected should be set by now";
-          const path = [...option.path];
+        utils.dom.onFirstIntersection(elements.aside, () =>
+          signals.runWithOwner(owner, initSelectedFrame),
+        );
+      }
+      initSelected();
 
-          /** @type {HTMLUListElement | null} */
-          let ul = /** @type {any} */ (null);
-          async function getFirstChild() {
-            try {
-              ul = /** @type {HTMLUListElement} */ (
-                elements.nav.firstElementChild
-              );
-              await utils.next();
-              if (!ul) {
-                await getFirstChild();
-              }
-            } catch (_) {
-              await utils.next();
+      utils.dom.onFirstIntersection(elements.nav, async () => {
+        options.parent.set(elements.nav);
+
+        const option = options.selected();
+        if (!option) throw "Selected should be set by now";
+        const path = [...option.path];
+
+        /** @type {HTMLUListElement | null} */
+        let ul = /** @type {any} */ (null);
+        async function getFirstChild() {
+          try {
+            ul = /** @type {HTMLUListElement} */ (
+              elements.nav.firstElementChild
+            );
+            await utils.next();
+            if (!ul) {
               await getFirstChild();
             }
+          } catch (_) {
+            await utils.next();
+            await getFirstChild();
           }
-          await getFirstChild();
-          if (!ul) throw Error("Unreachable");
+        }
+        await getFirstChild();
+        if (!ul) throw Error("Unreachable");
 
-          let i = 0;
-          while (path.length > 1) {
-            const name = path.shift();
-            if (!name) throw "Unreachable";
-            /** @type {HTMLDetailsElement[]} */
-            let detailsList = [];
-            while (!detailsList.length) {
-              detailsList = Array.from(
-                ul.querySelectorAll(":scope > li > details"),
-              );
-              if (!detailsList.length) {
-                await utils.next();
-              }
-            }
-            const details = detailsList.find((s) => s.dataset.name == name);
-            if (!details) return;
-            details.open = true;
-            ul = null;
-            while (!ul) {
-              const uls = /** @type {HTMLUListElement[]} */ (
-                Array.from(details.querySelectorAll(":scope > ul"))
-              );
-              if (!uls.length) {
-                await utils.next();
-              } else if (uls.length > 1) {
-                throw "Shouldn't be possible";
-              } else {
-                ul = /** @type {HTMLUListElement} */ (uls.pop());
-              }
-            }
-          }
-          /** @type {HTMLAnchorElement[]} */
-          let anchors = [];
-          while (!anchors.length) {
-            anchors = Array.from(ul.querySelectorAll(":scope > li > a"));
-            if (!anchors.length) {
+        let i = 0;
+        while (path.length > 1) {
+          const name = path.shift();
+          if (!name) throw "Unreachable";
+          /** @type {HTMLDetailsElement[]} */
+          let detailsList = [];
+          while (!detailsList.length) {
+            detailsList = Array.from(
+              ul.querySelectorAll(":scope > li > details"),
+            );
+            if (!detailsList.length) {
               await utils.next();
             }
           }
-          anchors
-            .find(
-              (a) =>
-                a.getAttribute("href") == window.document.location.pathname,
-            )
-            ?.scrollIntoView({
-              behavior: "instant",
-              block: "center",
-            });
-        });
+          const details = detailsList.find((s) => s.dataset.name == name);
+          if (!details) return;
+          details.open = true;
+          ul = null;
+          while (!ul) {
+            const uls = /** @type {HTMLUListElement[]} */ (
+              Array.from(details.querySelectorAll(":scope > ul"))
+            );
+            if (!uls.length) {
+              await utils.next();
+            } else if (uls.length > 1) {
+              throw "Shouldn't be possible";
+            } else {
+              ul = /** @type {HTMLUListElement} */ (uls.pop());
+            }
+          }
+        }
+        /** @type {HTMLAnchorElement[]} */
+        let anchors = [];
+        while (!anchors.length) {
+          anchors = Array.from(ul.querySelectorAll(":scope > li > a"));
+          if (!anchors.length) {
+            await utils.next();
+          }
+        }
+        anchors
+          .find(
+            (a) => a.getAttribute("href") == window.document.location.pathname,
+          )
+          ?.scrollIntoView({
+            behavior: "instant",
+            block: "center",
+          });
+      });
 
-        utils.dom.onFirstIntersection(elements.search, () => {
-          console.log("search: init");
+      utils.dom.onFirstIntersection(elements.search, () => {
+        console.log("search: init");
 
-          const haystack = options.list.map((option) => option.title);
+        const haystack = options.list.map((option) => option.title);
 
-          const RESULTS_PER_PAGE = 100;
+        const RESULTS_PER_PAGE = 100;
 
-          packages.ufuzzy().then((ufuzzy) => {
-            /**
-             * @param {uFuzzy.SearchResult} searchResult
-             * @param {number} pageIndex
-             */
-            function computeResultPage(searchResult, pageIndex) {
-              /** @type {{ option: Option, title: string }[]} */
-              let list = [];
+        packages.ufuzzy().then((ufuzzy) => {
+          /**
+           * @param {uFuzzy.SearchResult} searchResult
+           * @param {number} pageIndex
+           */
+          function computeResultPage(searchResult, pageIndex) {
+            /** @type {{ option: Option, title: string }[]} */
+            let list = [];
 
-              let [indexes, info, order] = searchResult || [null, null, null];
+            let [indexes, info, order] = searchResult || [null, null, null];
 
-              const minIndex = pageIndex * RESULTS_PER_PAGE;
+            const minIndex = pageIndex * RESULTS_PER_PAGE;
 
-              if (indexes?.length) {
-                const maxIndex = Math.min(
-                  (order || indexes).length - 1,
-                  minIndex + RESULTS_PER_PAGE - 1,
-                );
+            if (indexes?.length) {
+              const maxIndex = Math.min(
+                (order || indexes).length - 1,
+                minIndex + RESULTS_PER_PAGE - 1,
+              );
 
-                list = Array(maxIndex - minIndex + 1);
+              list = Array(maxIndex - minIndex + 1);
 
-                for (let i = minIndex; i <= maxIndex; i++) {
-                  let index = indexes[i];
+              for (let i = minIndex; i <= maxIndex; i++) {
+                let index = indexes[i];
 
-                  const title = haystack[index];
+                const title = haystack[index];
 
-                  list[i % 100] = {
-                    option: options.list[index],
-                    title,
-                  };
-                }
+                list[i % 100] = {
+                  option: options.list[index],
+                  title,
+                };
               }
-
-              return list;
             }
 
-            /** @type {uFuzzy.Options} */
-            const config = {
-              intraIns: Infinity,
-              intraChars: `[a-z\d' ]`,
-            };
+            return list;
+          }
 
-            const fuzzyMultiInsert = /** @type {uFuzzy} */ (
-              ufuzzy({
-                intraIns: 1,
-              })
-            );
-            const fuzzyMultiInsertFuzzier = /** @type {uFuzzy} */ (
-              ufuzzy(config)
-            );
-            const fuzzySingleError = /** @type {uFuzzy} */ (
-              ufuzzy({
-                intraMode: 1,
-                ...config,
-              })
-            );
-            const fuzzySingleErrorFuzzier = /** @type {uFuzzy} */ (
-              ufuzzy({
-                intraMode: 1,
-                ...config,
-              })
-            );
+          /** @type {uFuzzy.Options} */
+          const config = {
+            intraIns: Infinity,
+            intraChars: `[a-z\d' ]`,
+          };
 
-            /** @type {VoidFunction | undefined} */
-            let dispose;
+          const fuzzyMultiInsert = /** @type {uFuzzy} */ (
+            ufuzzy({
+              intraIns: 1,
+            })
+          );
+          const fuzzyMultiInsertFuzzier = /** @type {uFuzzy} */ (
+            ufuzzy(config)
+          );
+          const fuzzySingleError = /** @type {uFuzzy} */ (
+            ufuzzy({
+              intraMode: 1,
+              ...config,
+            })
+          );
+          const fuzzySingleErrorFuzzier = /** @type {uFuzzy} */ (
+            ufuzzy({
+              intraMode: 1,
+              ...config,
+            })
+          );
 
-            function inputEvent() {
-              signals.createRoot((_dispose) => {
-                const needle = /** @type {string} */ (
-                  elements.searchInput.value
+          /** @type {VoidFunction | undefined} */
+          let dispose;
+
+          function inputEvent() {
+            signals.createRoot((_dispose) => {
+              const needle = /** @type {string} */ (elements.searchInput.value);
+
+              dispose?.();
+
+              dispose = _dispose;
+
+              elements.searchResults.scrollTo({
+                top: 0,
+              });
+
+              if (!needle) {
+                elements.searchResults.innerHTML = "";
+                return;
+              }
+
+              const outOfOrder = 5;
+              const infoThresh = 5_000;
+
+              let result = fuzzyMultiInsert?.search(
+                haystack,
+                needle,
+                undefined,
+                infoThresh,
+              );
+
+              if (!result?.[0]?.length || !result?.[1]) {
+                result = fuzzyMultiInsert?.search(
+                  haystack,
+                  needle,
+                  outOfOrder,
+                  infoThresh,
                 );
+              }
 
-                dispose?.();
+              if (!result?.[0]?.length || !result?.[1]) {
+                result = fuzzySingleError?.search(
+                  haystack,
+                  needle,
+                  outOfOrder,
+                  infoThresh,
+                );
+              }
 
-                dispose = _dispose;
+              if (!result?.[0]?.length || !result?.[1]) {
+                result = fuzzySingleErrorFuzzier?.search(
+                  haystack,
+                  needle,
+                  outOfOrder,
+                  infoThresh,
+                );
+              }
 
-                elements.searchResults.scrollTo({
-                  top: 0,
-                });
-
-                if (!needle) {
-                  elements.searchResults.innerHTML = "";
-                  return;
-                }
-
-                const outOfOrder = 5;
-                const infoThresh = 5_000;
-
-                let result = fuzzyMultiInsert?.search(
+              if (!result?.[0]?.length || !result?.[1]) {
+                result = fuzzyMultiInsertFuzzier?.search(
                   haystack,
                   needle,
                   undefined,
                   infoThresh,
                 );
+              }
 
-                if (!result?.[0]?.length || !result?.[1]) {
-                  result = fuzzyMultiInsert?.search(
-                    haystack,
-                    needle,
-                    outOfOrder,
-                    infoThresh,
-                  );
-                }
+              if (!result?.[0]?.length || !result?.[1]) {
+                result = fuzzyMultiInsertFuzzier?.search(
+                  haystack,
+                  needle,
+                  outOfOrder,
+                  infoThresh,
+                );
+              }
 
-                if (!result?.[0]?.length || !result?.[1]) {
-                  result = fuzzySingleError?.search(
-                    haystack,
-                    needle,
-                    outOfOrder,
-                    infoThresh,
-                  );
-                }
+              elements.searchResults.innerHTML = "";
 
-                if (!result?.[0]?.length || !result?.[1]) {
-                  result = fuzzySingleErrorFuzzier?.search(
-                    haystack,
-                    needle,
-                    outOfOrder,
-                    infoThresh,
-                  );
-                }
+              const list = computeResultPage(result, 0);
 
-                if (!result?.[0]?.length || !result?.[1]) {
-                  result = fuzzyMultiInsertFuzzier?.search(
-                    haystack,
-                    needle,
-                    undefined,
-                    infoThresh,
-                  );
-                }
+              list.forEach(({ option, title }) => {
+                const li = window.document.createElement("li");
+                elements.searchResults.appendChild(li);
 
-                if (!result?.[0]?.length || !result?.[1]) {
-                  result = fuzzyMultiInsertFuzzier?.search(
-                    haystack,
-                    needle,
-                    outOfOrder,
-                    infoThresh,
-                  );
-                }
-
-                elements.searchResults.innerHTML = "";
-
-                const list = computeResultPage(result, 0);
-
-                list.forEach(({ option, title }) => {
-                  const li = window.document.createElement("li");
-                  elements.searchResults.appendChild(li);
-
-                  const element = options.createOptionElement({
-                    option,
-                    frame: "search",
-                    name: title,
-                    qrcode,
-                  });
-
-                  if (element) {
-                    li.append(element);
-                  }
+                const element = options.createOptionElement({
+                  option,
+                  frame: "search",
+                  name: title,
+                  qrcode,
                 });
+
+                if (element) {
+                  li.append(element);
+                }
               });
-            }
+            });
+          }
 
-            if (elements.searchInput.value) {
-              inputEvent();
-            }
+          if (elements.searchInput.value) {
+            inputEvent();
+          }
 
-            elements.searchInput.addEventListener("input", inputEvent);
-          });
+          elements.searchInput.addEventListener("input", inputEvent);
+        });
+      });
+
+      function initShare() {
+        const shareDiv = utils.dom.getElementById("share-div");
+        const shareContentDiv = utils.dom.getElementById("share-content-div");
+
+        shareDiv.addEventListener("click", () => {
+          qrcode.set(null);
         });
 
-        function initShare() {
-          const shareDiv = utils.dom.getElementById("share-div");
-          const shareContentDiv = utils.dom.getElementById("share-content-div");
+        shareContentDiv.addEventListener("click", (event) => {
+          event.stopPropagation();
+          event.preventDefault();
+        });
 
-          shareDiv.addEventListener("click", () => {
-            qrcode.set(null);
-          });
+        packages.leanQr().then(({ generate }) =>
+          signals.runWithOwner(owner, () => {
+            const imgQrcode = /** @type {HTMLImageElement} */ (
+              utils.dom.getElementById("share-img")
+            );
 
-          shareContentDiv.addEventListener("click", (event) => {
-            event.stopPropagation();
-            event.preventDefault();
-          });
+            const anchor = /** @type {HTMLAnchorElement} */ (
+              utils.dom.getElementById("share-anchor")
+            );
 
-          packages.leanQr().then(({ generate }) =>
-            signals.runWithOwner(owner, () => {
-              const imgQrcode = /** @type {HTMLImageElement} */ (
-                utils.dom.getElementById("share-img")
-              );
-
-              const anchor = /** @type {HTMLAnchorElement} */ (
-                utils.dom.getElementById("share-anchor")
-              );
-
-              signals.createEffect(qrcode, (qrcode) => {
-                if (!qrcode) {
-                  shareDiv.hidden = true;
-                  return;
-                }
-
-                const href = qrcode;
-                anchor.href = href;
-                anchor.innerText =
-                  (href.startsWith("http")
-                    ? href.split("//").at(-1)
-                    : href.split(":").at(-1)) || "";
-
-                imgQrcode.src =
-                  generate(/** @type {any} */ (href))?.toDataURL({
-                    // @ts-ignore
-                    padX: 0,
-                    padY: 0,
-                  }) || "";
-
-                shareDiv.hidden = false;
-              });
-            }),
-          );
-        }
-        initShare();
-
-        function initDesktopResizeBar() {
-          const resizeBar = utils.dom.getElementById("resize-bar");
-          let resize = false;
-          let startingWidth = 0;
-          let startingClientX = 0;
-
-          const barWidthLocalStorageKey = "bar-width";
-
-          /**
-           * @param {number | null} width
-           */
-          function setBarWidth(width) {
-            // TODO: Check if should be a signal ??
-            try {
-              if (typeof width === "number") {
-                elements.main.style.width = `${width}px`;
-                utils.storage.write(barWidthLocalStorageKey, String(width));
-              } else {
-                elements.main.style.width = elements.style.getPropertyValue(
-                  "--default-main-width",
-                );
-                utils.storage.remove(barWidthLocalStorageKey);
+            signals.createEffect(qrcode, (qrcode) => {
+              if (!qrcode) {
+                shareDiv.hidden = true;
+                return;
               }
-            } catch (_) {}
-          }
 
-          /**
-           * @param {MouseEvent} event
-           */
-          function mouseMoveEvent(event) {
-            if (resize) {
-              setBarWidth(startingWidth + (event.clientX - startingClientX));
+              const href = qrcode;
+              anchor.href = href;
+              anchor.innerText =
+                (href.startsWith("http")
+                  ? href.split("//").at(-1)
+                  : href.split(":").at(-1)) || "";
+
+              imgQrcode.src =
+                generate(/** @type {any} */ (href))?.toDataURL({
+                  // @ts-ignore
+                  padX: 0,
+                  padY: 0,
+                }) || "";
+
+              shareDiv.hidden = false;
+            });
+          }),
+        );
+      }
+      initShare();
+
+      function initDesktopResizeBar() {
+        const resizeBar = utils.dom.getElementById("resize-bar");
+        let resize = false;
+        let startingWidth = 0;
+        let startingClientX = 0;
+
+        const barWidthLocalStorageKey = "bar-width";
+
+        /**
+         * @param {number | null} width
+         */
+        function setBarWidth(width) {
+          // TODO: Check if should be a signal ??
+          try {
+            if (typeof width === "number") {
+              elements.main.style.width = `${width}px`;
+              utils.storage.write(barWidthLocalStorageKey, String(width));
+            } else {
+              elements.main.style.width = elements.style.getPropertyValue(
+                "--default-main-width",
+              );
+              utils.storage.remove(barWidthLocalStorageKey);
             }
-          }
-
-          resizeBar.addEventListener("mousedown", (event) => {
-            startingClientX = event.clientX;
-            startingWidth = elements.main.clientWidth;
-            resize = true;
-            window.document.documentElement.dataset.resize = "";
-            window.addEventListener("mousemove", mouseMoveEvent);
-          });
-
-          resizeBar.addEventListener("dblclick", () => {
-            setBarWidth(null);
-          });
-
-          const setResizeFalse = () => {
-            resize = false;
-            delete window.document.documentElement.dataset.resize;
-            window.removeEventListener("mousemove", mouseMoveEvent);
-          };
-          window.addEventListener("mouseup", setResizeFalse);
-          window.addEventListener("mouseleave", setResizeFalse);
+          } catch (_) {}
         }
-        initDesktopResizeBar();
-      }),
-  );
-}
-main();
+
+        /**
+         * @param {MouseEvent} event
+         */
+        function mouseMoveEvent(event) {
+          if (resize) {
+            setBarWidth(startingWidth + (event.clientX - startingClientX));
+          }
+        }
+
+        resizeBar.addEventListener("mousedown", (event) => {
+          startingClientX = event.clientX;
+          startingWidth = elements.main.clientWidth;
+          resize = true;
+          window.document.documentElement.dataset.resize = "";
+          window.addEventListener("mousemove", mouseMoveEvent);
+        });
+
+        resizeBar.addEventListener("dblclick", () => {
+          setBarWidth(null);
+        });
+
+        const setResizeFalse = () => {
+          resize = false;
+          delete window.document.documentElement.dataset.resize;
+          window.removeEventListener("mousemove", mouseMoveEvent);
+        };
+        window.addEventListener("mouseup", setResizeFalse);
+        window.addEventListener("mouseleave", setResizeFalse);
+      }
+      initDesktopResizeBar();
+    }),
+);
diff --git a/websites/bitview/scripts/charts.js b/websites/bitview/scripts/panes/chart.js
similarity index 100%
rename from websites/bitview/scripts/charts.js
rename to websites/bitview/scripts/panes/chart.js
diff --git a/websites/bitview/scripts/explorer.js b/websites/bitview/scripts/panes/explorer.js
similarity index 100%
rename from websites/bitview/scripts/explorer.js
rename to websites/bitview/scripts/panes/explorer.js
diff --git a/websites/bitview/scripts/panes/nav.js b/websites/bitview/scripts/panes/nav.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/websites/bitview/scripts/panes/search.js b/websites/bitview/scripts/panes/search.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/websites/bitview/scripts/simulation.js b/websites/bitview/scripts/panes/simulation.js
similarity index 100%
rename from websites/bitview/scripts/simulation.js
rename to websites/bitview/scripts/panes/simulation.js
diff --git a/websites/bitview/scripts/table.js b/websites/bitview/scripts/panes/table.js
similarity index 100%
rename from websites/bitview/scripts/table.js
rename to websites/bitview/scripts/panes/table.js