app-devtools 0.7.0 → 0.9.0

package/dist/main.js

@@ -1,437 +1,1091 @@
-import Q from "dayjs";
-import { sharedConfig as D, createRoot as it, createRenderEffect as C, mergeProps as st, $PROXY as z, $TRACK as _e, getListener as Ke, batch as at, createSignal as re, createMemo as m, splitProps as ct, createComponent as p, Show as ae, For as F, Switch as dt, Match as G } from "solid-js";
-import { css as _ } from "solid-styled-components";
-import { dequal as Ue } from "dequal";
-import { nanoid as ut } from "nanoid";
-import { parse as ft } from "regexparam";
-import * as pt from "diff";
-import gt from "tinykeys";
-const ht = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"], mt = /* @__PURE__ */ new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...ht]), $t = /* @__PURE__ */ new Set(["innerHTML", "textContent", "innerText", "children"]), yt = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
+import dayjs from 'dayjs';
+import { dequal } from 'dequal';
+import { nanoid } from 'nanoid';
+import { parse } from 'regexparam';
+import * as diff from 'diff';
+import tinykeys from 'tinykeys';
+
+const sharedConfig = {};
+
+const equalFn = (a, b) => a === b;
+const $PROXY = Symbol("solid-proxy");
+const $TRACK = Symbol("solid-track");
+const signalOptions = {
+  equals: equalFn
+};
+let runEffects = runQueue;
+const STALE = 1;
+const PENDING = 2;
+const UNOWNED = {
+  owned: null,
+  cleanups: null,
+  context: null,
+  owner: null
+};
+var Owner = null;
+let Transition = null;
+let Listener = null;
+let Updates = null;
+let Effects = null;
+let ExecCount = 0;
+function createRoot(fn, detachedOwner) {
+  const listener = Listener,
+    owner = Owner,
+    unowned = fn.length === 0,
+    root = unowned ? UNOWNED : {
+      owned: null,
+      cleanups: null,
+      context: null,
+      owner: detachedOwner === undefined ? owner : detachedOwner
+    },
+    updateFn = unowned ? fn : () => fn(() => untrack(() => cleanNode(root)));
+  Owner = root;
+  Listener = null;
+  try {
+    return runUpdates(updateFn, true);
+  } finally {
+    Listener = listener;
+    Owner = owner;
+  }
+}
+function createSignal(value, options) {
+  options = options ? Object.assign({}, signalOptions, options) : signalOptions;
+  const s = {
+    value,
+    observers: null,
+    observerSlots: null,
+    comparator: options.equals || undefined
+  };
+  const setter = value => {
+    if (typeof value === "function") {
+      value = value(s.value);
+    }
+    return writeSignal(s, value);
+  };
+  return [readSignal.bind(s), setter];
+}
+function createRenderEffect(fn, value, options) {
+  const c = createComputation(fn, value, false, STALE);
+  updateComputation(c);
+}
+function createMemo(fn, value, options) {
+  options = options ? Object.assign({}, signalOptions, options) : signalOptions;
+  const c = createComputation(fn, value, true, 0);
+  c.observers = null;
+  c.observerSlots = null;
+  c.comparator = options.equals || undefined;
+  updateComputation(c);
+  return readSignal.bind(c);
+}
+function batch(fn) {
+  return runUpdates(fn, false);
+}
+function untrack(fn) {
+  if (Listener === null) return fn();
+  const listener = Listener;
+  Listener = null;
+  try {
+    return fn();
+  } finally {
+    Listener = listener;
+  }
+}
+function onCleanup(fn) {
+  if (Owner === null) ;else if (Owner.cleanups === null) Owner.cleanups = [fn];else Owner.cleanups.push(fn);
+  return fn;
+}
+function getListener() {
+  return Listener;
+}
+function children(fn) {
+  const children = createMemo(fn);
+  const memo = createMemo(() => resolveChildren(children()));
+  memo.toArray = () => {
+    const c = memo();
+    return Array.isArray(c) ? c : c != null ? [c] : [];
+  };
+  return memo;
+}
+function readSignal() {
+  const runningTransition = Transition ;
+  if (this.sources && (this.state || runningTransition )) {
+    if (this.state === STALE || runningTransition ) updateComputation(this);else {
+      const updates = Updates;
+      Updates = null;
+      runUpdates(() => lookUpstream(this), false);
+      Updates = updates;
+    }
+  }
+  if (Listener) {
+    const sSlot = this.observers ? this.observers.length : 0;
+    if (!Listener.sources) {
+      Listener.sources = [this];
+      Listener.sourceSlots = [sSlot];
+    } else {
+      Listener.sources.push(this);
+      Listener.sourceSlots.push(sSlot);
+    }
+    if (!this.observers) {
+      this.observers = [Listener];
+      this.observerSlots = [Listener.sources.length - 1];
+    } else {
+      this.observers.push(Listener);
+      this.observerSlots.push(Listener.sources.length - 1);
+    }
+  }
+  return this.value;
+}
+function writeSignal(node, value, isComp) {
+  let current = node.value;
+  if (!node.comparator || !node.comparator(current, value)) {
+    node.value = value;
+    if (node.observers && node.observers.length) {
+      runUpdates(() => {
+        for (let i = 0; i < node.observers.length; i += 1) {
+          const o = node.observers[i];
+          const TransitionRunning = Transition && Transition.running;
+          if (TransitionRunning && Transition.disposed.has(o)) ;
+          if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
+            if (o.pure) Updates.push(o);else Effects.push(o);
+            if (o.observers) markDownstream(o);
+          }
+          if (TransitionRunning) ;else o.state = STALE;
+        }
+        if (Updates.length > 10e5) {
+          Updates = [];
+          if (false) ;
+          throw new Error();
+        }
+      }, false);
+    }
+  }
+  return value;
+}
+function updateComputation(node) {
+  if (!node.fn) return;
+  cleanNode(node);
+  const owner = Owner,
+    listener = Listener,
+    time = ExecCount;
+  Listener = Owner = node;
+  runComputation(node, node.value, time);
+  Listener = listener;
+  Owner = owner;
+}
+function runComputation(node, value, time) {
+  let nextValue;
+  try {
+    nextValue = node.fn(value);
+  } catch (err) {
+    if (node.pure) {
+      {
+        node.state = STALE;
+        node.owned && node.owned.forEach(cleanNode);
+        node.owned = null;
+      }
+    }
+    handleError(err);
+  }
+  if (!node.updatedAt || node.updatedAt <= time) {
+    if (node.updatedAt != null && "observers" in node) {
+      writeSignal(node, nextValue);
+    } else node.value = nextValue;
+    node.updatedAt = time;
+  }
+}
+function createComputation(fn, init, pure, state = STALE, options) {
+  const c = {
+    fn,
+    state: state,
+    updatedAt: null,
+    owned: null,
+    sources: null,
+    sourceSlots: null,
+    cleanups: null,
+    value: init,
+    owner: Owner,
+    context: null,
+    pure
+  };
+  if (Owner === null) ;else if (Owner !== UNOWNED) {
+    {
+      if (!Owner.owned) Owner.owned = [c];else Owner.owned.push(c);
+    }
+  }
+  return c;
+}
+function runTop(node) {
+  const runningTransition = Transition ;
+  if (node.state === 0 || runningTransition ) return;
+  if (node.state === PENDING || runningTransition ) return lookUpstream(node);
+  if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
+  const ancestors = [node];
+  while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
+    if (node.state || runningTransition ) ancestors.push(node);
+  }
+  for (let i = ancestors.length - 1; i >= 0; i--) {
+    node = ancestors[i];
+    if (node.state === STALE || runningTransition ) {
+      updateComputation(node);
+    } else if (node.state === PENDING || runningTransition ) {
+      const updates = Updates;
+      Updates = null;
+      runUpdates(() => lookUpstream(node, ancestors[0]), false);
+      Updates = updates;
+    }
+  }
+}
+function runUpdates(fn, init) {
+  if (Updates) return fn();
+  let wait = false;
+  if (!init) Updates = [];
+  if (Effects) wait = true;else Effects = [];
+  ExecCount++;
+  try {
+    const res = fn();
+    completeUpdates(wait);
+    return res;
+  } catch (err) {
+    if (!wait) Effects = null;
+    Updates = null;
+    handleError(err);
+  }
+}
+function completeUpdates(wait) {
+  if (Updates) {
+    runQueue(Updates);
+    Updates = null;
+  }
+  if (wait) return;
+  const e = Effects;
+  Effects = null;
+  if (e.length) runUpdates(() => runEffects(e), false);
+}
+function runQueue(queue) {
+  for (let i = 0; i < queue.length; i++) runTop(queue[i]);
+}
+function lookUpstream(node, ignore) {
+  const runningTransition = Transition ;
+  node.state = 0;
+  for (let i = 0; i < node.sources.length; i += 1) {
+    const source = node.sources[i];
+    if (source.sources) {
+      if (source.state === STALE || runningTransition ) {
+        if (source !== ignore) runTop(source);
+      } else if (source.state === PENDING || runningTransition ) lookUpstream(source, ignore);
+    }
+  }
+}
+function markDownstream(node) {
+  const runningTransition = Transition ;
+  for (let i = 0; i < node.observers.length; i += 1) {
+    const o = node.observers[i];
+    if (!o.state || runningTransition ) {
+      o.state = PENDING;
+      if (o.pure) Updates.push(o);else Effects.push(o);
+      o.observers && markDownstream(o);
+    }
+  }
+}
+function cleanNode(node) {
+  let i;
+  if (node.sources) {
+    while (node.sources.length) {
+      const source = node.sources.pop(),
+        index = node.sourceSlots.pop(),
+        obs = source.observers;
+      if (obs && obs.length) {
+        const n = obs.pop(),
+          s = source.observerSlots.pop();
+        if (index < obs.length) {
+          n.sourceSlots[s] = index;
+          obs[index] = n;
+          source.observerSlots[index] = s;
+        }
+      }
+    }
+  }
+  if (node.owned) {
+    for (i = 0; i < node.owned.length; i++) cleanNode(node.owned[i]);
+    node.owned = null;
+  }
+  if (node.cleanups) {
+    for (i = 0; i < node.cleanups.length; i++) node.cleanups[i]();
+    node.cleanups = null;
+  }
+  node.state = 0;
+  node.context = null;
+}
+function castError(err) {
+  if (err instanceof Error || typeof err === "string") return err;
+  return new Error("Unknown error");
+}
+function handleError(err) {
+  err = castError(err);
+  throw err;
+}
+function resolveChildren(children) {
+  if (typeof children === "function" && !children.length) return resolveChildren(children());
+  if (Array.isArray(children)) {
+    const results = [];
+    for (let i = 0; i < children.length; i++) {
+      const result = resolveChildren(children[i]);
+      Array.isArray(result) ? results.push.apply(results, result) : results.push(result);
+    }
+    return results;
+  }
+  return children;
+}
+
+const FALLBACK = Symbol("fallback");
+function dispose(d) {
+  for (let i = 0; i < d.length; i++) d[i]();
+}
+function mapArray(list, mapFn, options = {}) {
+  let items = [],
+    mapped = [],
+    disposers = [],
+    len = 0,
+    indexes = mapFn.length > 1 ? [] : null;
+  onCleanup(() => dispose(disposers));
+  return () => {
+    let newItems = list() || [],
+      i,
+      j;
+    newItems[$TRACK];
+    return untrack(() => {
+      let newLen = newItems.length,
+        newIndices,
+        newIndicesNext,
+        temp,
+        tempdisposers,
+        tempIndexes,
+        start,
+        end,
+        newEnd,
+        item;
+      if (newLen === 0) {
+        if (len !== 0) {
+          dispose(disposers);
+          disposers = [];
+          items = [];
+          mapped = [];
+          len = 0;
+          indexes && (indexes = []);
+        }
+        if (options.fallback) {
+          items = [FALLBACK];
+          mapped[0] = createRoot(disposer => {
+            disposers[0] = disposer;
+            return options.fallback();
+          });
+          len = 1;
+        }
+      }
+      else if (len === 0) {
+        mapped = new Array(newLen);
+        for (j = 0; j < newLen; j++) {
+          items[j] = newItems[j];
+          mapped[j] = createRoot(mapper);
+        }
+        len = newLen;
+      } else {
+        temp = new Array(newLen);
+        tempdisposers = new Array(newLen);
+        indexes && (tempIndexes = new Array(newLen));
+        for (start = 0, end = Math.min(len, newLen); start < end && items[start] === newItems[start]; start++);
+        for (end = len - 1, newEnd = newLen - 1; end >= start && newEnd >= start && items[end] === newItems[newEnd]; end--, newEnd--) {
+          temp[newEnd] = mapped[end];
+          tempdisposers[newEnd] = disposers[end];
+          indexes && (tempIndexes[newEnd] = indexes[end]);
+        }
+        newIndices = new Map();
+        newIndicesNext = new Array(newEnd + 1);
+        for (j = newEnd; j >= start; j--) {
+          item = newItems[j];
+          i = newIndices.get(item);
+          newIndicesNext[j] = i === undefined ? -1 : i;
+          newIndices.set(item, j);
+        }
+        for (i = start; i <= end; i++) {
+          item = items[i];
+          j = newIndices.get(item);
+          if (j !== undefined && j !== -1) {
+            temp[j] = mapped[i];
+            tempdisposers[j] = disposers[i];
+            indexes && (tempIndexes[j] = indexes[i]);
+            j = newIndicesNext[j];
+            newIndices.set(item, j);
+          } else disposers[i]();
+        }
+        for (j = start; j < newLen; j++) {
+          if (j in temp) {
+            mapped[j] = temp[j];
+            disposers[j] = tempdisposers[j];
+            if (indexes) {
+              indexes[j] = tempIndexes[j];
+              indexes[j](j);
+            }
+          } else mapped[j] = createRoot(mapper);
+        }
+        mapped = mapped.slice(0, len = newLen);
+        items = newItems.slice(0);
+      }
+      return mapped;
+    });
+    function mapper(disposer) {
+      disposers[j] = disposer;
+      if (indexes) {
+        const [s, set] = createSignal(j);
+        indexes[j] = set;
+        return mapFn(newItems[j], s);
+      }
+      return mapFn(newItems[j]);
+    }
+  };
+}
+function createComponent(Comp, props) {
+  return untrack(() => Comp(props || {}));
+}
+function trueFn() {
+  return true;
+}
+const propTraps = {
+  get(_, property, receiver) {
+    if (property === $PROXY) return receiver;
+    return _.get(property);
+  },
+  has(_, property) {
+    if (property === $PROXY) return true;
+    return _.has(property);
+  },
+  set: trueFn,
+  deleteProperty: trueFn,
+  getOwnPropertyDescriptor(_, property) {
+    return {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return _.get(property);
+      },
+      set: trueFn,
+      deleteProperty: trueFn
+    };
+  },
+  ownKeys(_) {
+    return _.keys();
+  }
+};
+function resolveSource(s) {
+  return !(s = typeof s === "function" ? s() : s) ? {} : s;
+}
+function mergeProps(...sources) {
+  let proxy = false;
+  for (let i = 0; i < sources.length; i++) {
+    const s = sources[i];
+    proxy = proxy || !!s && $PROXY in s;
+    sources[i] = typeof s === "function" ? (proxy = true, createMemo(s)) : s;
+  }
+  if (proxy) {
+    return new Proxy({
+      get(property) {
+        for (let i = sources.length - 1; i >= 0; i--) {
+          const v = resolveSource(sources[i])[property];
+          if (v !== undefined) return v;
+        }
+      },
+      has(property) {
+        for (let i = sources.length - 1; i >= 0; i--) {
+          if (property in resolveSource(sources[i])) return true;
+        }
+        return false;
+      },
+      keys() {
+        const keys = [];
+        for (let i = 0; i < sources.length; i++) keys.push(...Object.keys(resolveSource(sources[i])));
+        return [...new Set(keys)];
+      }
+    }, propTraps);
+  }
+  const target = {};
+  for (let i = sources.length - 1; i >= 0; i--) {
+    if (sources[i]) {
+      const descriptors = Object.getOwnPropertyDescriptors(sources[i]);
+      for (const key in descriptors) {
+        if (key in target) continue;
+        Object.defineProperty(target, key, {
+          enumerable: true,
+          get() {
+            for (let i = sources.length - 1; i >= 0; i--) {
+              const v = (sources[i] || {})[key];
+              if (v !== undefined) return v;
+            }
+          }
+        });
+      }
+    }
+  }
+  return target;
+}
+function splitProps(props, ...keys) {
+  const blocked = new Set(keys.flat());
+  if ($PROXY in props) {
+    const res = keys.map(k => {
+      return new Proxy({
+        get(property) {
+          return k.includes(property) ? props[property] : undefined;
+        },
+        has(property) {
+          return k.includes(property) && property in props;
+        },
+        keys() {
+          return k.filter(property => property in props);
+        }
+      }, propTraps);
+    });
+    res.push(new Proxy({
+      get(property) {
+        return blocked.has(property) ? undefined : props[property];
+      },
+      has(property) {
+        return blocked.has(property) ? false : property in props;
+      },
+      keys() {
+        return Object.keys(props).filter(k => !blocked.has(k));
+      }
+    }, propTraps));
+    return res;
+  }
+  const descriptors = Object.getOwnPropertyDescriptors(props);
+  keys.push(Object.keys(descriptors).filter(k => !blocked.has(k)));
+  return keys.map(k => {
+    const clone = {};
+    for (let i = 0; i < k.length; i++) {
+      const key = k[i];
+      if (!(key in props)) continue;
+      Object.defineProperty(clone, key, descriptors[key] ? descriptors[key] : {
+        get() {
+          return props[key];
+        },
+        set() {
+          return true;
+        },
+        enumerable: true
+      });
+    }
+    return clone;
+  });
+}
+
+function For(props) {
+  const fallback = "fallback" in props && {
+    fallback: () => props.fallback
+  };
+  return createMemo(mapArray(() => props.each, props.children, fallback || undefined));
+}
+function Show(props) {
+  let strictEqual = false;
+  const keyed = props.keyed;
+  const condition = createMemo(() => props.when, undefined, {
+    equals: (a, b) => strictEqual ? a === b : !a === !b
+  });
+  return createMemo(() => {
+    const c = condition();
+    if (c) {
+      const child = props.children;
+      const fn = typeof child === "function" && child.length > 0;
+      strictEqual = keyed || fn;
+      return fn ? untrack(() => child(c)) : child;
+    }
+    return props.fallback;
+  }, undefined, undefined);
+}
+function Switch(props) {
+  let strictEqual = false;
+  let keyed = false;
+  const equals = (a, b) => a[0] === b[0] && (strictEqual ? a[1] === b[1] : !a[1] === !b[1]) && a[2] === b[2];
+  const conditions = children(() => props.children),
+    evalConditions = createMemo(() => {
+      let conds = conditions();
+      if (!Array.isArray(conds)) conds = [conds];
+      for (let i = 0; i < conds.length; i++) {
+        const c = conds[i].when;
+        if (c) {
+          keyed = !!conds[i].keyed;
+          return [i, c, conds[i]];
+        }
+      }
+      return [-1];
+    }, undefined, {
+      equals
+    });
+  return createMemo(() => {
+    const [index, when, cond] = evalConditions();
+    if (index < 0) return props.fallback;
+    const c = cond.children;
+    const fn = typeof c === "function" && c.length > 0;
+    strictEqual = keyed || fn;
+    return fn ? untrack(() => c(when)) : c;
+  }, undefined, undefined);
+}
+function Match(props) {
+  return props;
+}
+
+const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
+const Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
+const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
+const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
   className: "class",
   htmlFor: "for"
-}), Ne = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
+});
+const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
   class: "className",
   formnovalidate: "formNoValidate",
   ismap: "isMap",
   nomodule: "noModule",
   playsinline: "playsInline",
   readonly: "readOnly"
-}), vt = /* @__PURE__ */ new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]), bt = {
+});
+const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
+const SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
-function Ct(e, t, n) {
-  let l = n.length, i = t.length, o = l, s = 0, r = 0, a = t[i - 1].nextSibling, c = null;
-  for (; s < i || r < o; ) {
-    if (t[s] === n[r]) {
-      s++, r++;
+
+function reconcileArrays(parentNode, a, b) {
+  let bLength = b.length,
+    aEnd = a.length,
+    bEnd = bLength,
+    aStart = 0,
+    bStart = 0,
+    after = a[aEnd - 1].nextSibling,
+    map = null;
+  while (aStart < aEnd || bStart < bEnd) {
+    if (a[aStart] === b[bStart]) {
+      aStart++;
+      bStart++;
       continue;
     }
-    for (; t[i - 1] === n[o - 1]; )
-      i--, o--;
-    if (i === s) {
-      const d = o < l ? r ? n[r - 1].nextSibling : n[o - r] : a;
-      for (; r < o; )
-        e.insertBefore(n[r++], d);
-    } else if (o === r)
-      for (; s < i; )
-        (!c || !c.has(t[s])) && t[s].remove(), s++;
-    else if (t[s] === n[o - 1] && n[r] === t[i - 1]) {
-      const d = t[--i].nextSibling;
-      e.insertBefore(n[r++], t[s++].nextSibling), e.insertBefore(n[--o], d), t[i] = n[o];
+    while (a[aEnd - 1] === b[bEnd - 1]) {
+      aEnd--;
+      bEnd--;
+    }
+    if (aEnd === aStart) {
+      const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after;
+      while (bStart < bEnd) parentNode.insertBefore(b[bStart++], node);
+    } else if (bEnd === bStart) {
+      while (aStart < aEnd) {
+        if (!map || !map.has(a[aStart])) a[aStart].remove();
+        aStart++;
+      }
+    } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+      const node = a[--aEnd].nextSibling;
+      parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
+      parentNode.insertBefore(b[--bEnd], node);
+      a[aEnd] = b[bEnd];
     } else {
-      if (!c) {
-        c = /* @__PURE__ */ new Map();
-        let g = r;
-        for (; g < o; )
-          c.set(n[g], g++);
+      if (!map) {
+        map = new Map();
+        let i = bStart;
+        while (i < bEnd) map.set(b[i], i++);
       }
-      const d = c.get(t[s]);
-      if (d != null)
-        if (r < d && d < o) {
-          let g = s, f = 1, y;
-          for (; ++g < i && g < o && !((y = c.get(t[g])) == null || y !== d + f); )
-            f++;
-          if (f > d - r) {
-            const v = t[s];
-            for (; r < d; )
-              e.insertBefore(n[r++], v);
-          } else
-            e.replaceChild(n[r++], t[s++]);
-        } else
-          s++;
-      else
-        t[s++].remove();
-    }
-  }
-}
-const Se = "_$DX_DELEGATE";
-function xt(e, t, n, l = {}) {
-  let i;
-  return it((o) => {
-    i = o, t === document ? e() : u(t, e(), t.firstChild ? null : void 0, n);
-  }, l.owner), () => {
-    i(), t.textContent = "";
+      const index = map.get(a[aStart]);
+      if (index != null) {
+        if (bStart < index && index < bEnd) {
+          let i = aStart,
+            sequence = 1,
+            t;
+          while (++i < aEnd && i < bEnd) {
+            if ((t = map.get(a[i])) == null || t !== index + sequence) break;
+            sequence++;
+          }
+          if (sequence > index - bStart) {
+            const node = a[aStart];
+            while (bStart < index) parentNode.insertBefore(b[bStart++], node);
+          } else parentNode.replaceChild(b[bStart++], a[aStart++]);
+        } else aStart++;
+      } else a[aStart++].remove();
+    }
+  }
+}
+
+const $$EVENTS = "_$DX_DELEGATE";
+function render(code, element, init, options = {}) {
+  let disposer;
+  createRoot(dispose => {
+    disposer = dispose;
+    element === document ? code() : insert(element, code(), element.firstChild ? null : undefined, init);
+  }, options.owner);
+  return () => {
+    disposer();
+    element.textContent = "";
   };
 }
-function $(e, t, n) {
-  const l = document.createElement("template");
-  l.innerHTML = e;
-  let i = l.content.firstChild;
-  return n && (i = i.firstChild), i;
-}
-function ce(e, t = window.document) {
-  const n = t[Se] || (t[Se] = /* @__PURE__ */ new Set());
-  for (let l = 0, i = e.length; l < i; l++) {
-    const o = e[l];
-    n.has(o) || (n.add(o), t.addEventListener(o, At));
-  }
-}
-function P(e, t, n) {
-  n == null ? e.removeAttribute(t) : e.setAttribute(t, n);
-}
-function wt(e, t, n, l) {
-  l == null ? e.removeAttributeNS(t, n) : e.setAttributeNS(t, n, l);
-}
-function b(e, t) {
-  t == null ? e.removeAttribute("class") : e.className = t;
-}
-function oe(e, t, n, l) {
-  if (l)
-    Array.isArray(n) ? (e[`$$${t}`] = n[0], e[`$$${t}Data`] = n[1]) : e[`$$${t}`] = n;
-  else if (Array.isArray(n)) {
-    const i = n[0];
-    e.addEventListener(t, n[0] = (o) => i.call(e, n[1], o));
-  } else
-    e.addEventListener(t, n);
-}
-function _t(e, t, n = {}) {
-  const l = Object.keys(t || {}), i = Object.keys(n);
-  let o, s;
-  for (o = 0, s = i.length; o < s; o++) {
-    const r = i[o];
-    !r || r === "undefined" || t[r] || (ke(e, r, !1), delete n[r]);
-  }
-  for (o = 0, s = l.length; o < s; o++) {
-    const r = l[o], a = !!t[r];
-    !r || r === "undefined" || n[r] === a || !a || (ke(e, r, !0), n[r] = a);
-  }
-  return n;
-}
-function We(e, t, n) {
-  if (!t)
-    return n ? P(e, "style") : t;
-  const l = e.style;
-  if (typeof t == "string")
-    return l.cssText = t;
-  typeof n == "string" && (l.cssText = n = void 0), n || (n = {}), t || (t = {});
-  let i, o;
-  for (o in n)
-    t[o] == null && l.removeProperty(o), delete n[o];
-  for (o in t)
-    i = t[o], i !== n[o] && (l.setProperty(o, i), n[o] = i);
-  return n;
-}
-function Nt(e, t = {}, n, l) {
-  const i = {};
-  return l || C(() => i.children = U(e, t.children, i.children)), C(() => t.ref && t.ref(e)), C(() => St(e, t, n, !0, i, !0)), i;
-}
-function u(e, t, n, l) {
-  if (n !== void 0 && !l && (l = []), typeof t != "function")
-    return U(e, t, l, n);
-  C((i) => U(e, t(), i, n), l);
-}
-function St(e, t, n, l, i = {}, o = !1) {
-  t || (t = {});
-  for (const s in i)
-    if (!(s in t)) {
-      if (s === "children")
-        continue;
-      i[s] = Ae(e, s, null, i[s], n, o);
+function template(html, check, isSVG) {
+  const t = document.createElement("template");
+  t.innerHTML = html;
+  let node = t.content.firstChild;
+  if (isSVG) node = node.firstChild;
+  return node;
+}
+function delegateEvents(eventNames, document = window.document) {
+  const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
+  for (let i = 0, l = eventNames.length; i < l; i++) {
+    const name = eventNames[i];
+    if (!e.has(name)) {
+      e.add(name);
+      document.addEventListener(name, eventHandler);
+    }
+  }
+}
+function setAttribute(node, name, value) {
+  if (value == null) node.removeAttribute(name);else node.setAttribute(name, value);
+}
+function setAttributeNS(node, namespace, name, value) {
+  if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
+}
+function className(node, value) {
+  if (value == null) node.removeAttribute("class");else node.className = value;
+}
+function addEventListener(node, name, handler, delegate) {
+  if (delegate) {
+    if (Array.isArray(handler)) {
+      node[`$$${name}`] = handler[0];
+      node[`$$${name}Data`] = handler[1];
+    } else node[`$$${name}`] = handler;
+  } else if (Array.isArray(handler)) {
+    const handlerFn = handler[0];
+    node.addEventListener(name, handler[0] = e => handlerFn.call(node, handler[1], e));
+  } else node.addEventListener(name, handler);
+}
+function classList(node, value, prev = {}) {
+  const classKeys = Object.keys(value || {}),
+    prevKeys = Object.keys(prev);
+  let i, len;
+  for (i = 0, len = prevKeys.length; i < len; i++) {
+    const key = prevKeys[i];
+    if (!key || key === "undefined" || value[key]) continue;
+    toggleClassKey(node, key, false);
+    delete prev[key];
+  }
+  for (i = 0, len = classKeys.length; i < len; i++) {
+    const key = classKeys[i],
+      classValue = !!value[key];
+    if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
+    toggleClassKey(node, key, true);
+    prev[key] = classValue;
+  }
+  return prev;
+}
+function style$1(node, value, prev) {
+  if (!value) return prev ? setAttribute(node, "style") : value;
+  const nodeStyle = node.style;
+  if (typeof value === "string") return nodeStyle.cssText = value;
+  typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
+  prev || (prev = {});
+  value || (value = {});
+  let v, s;
+  for (s in prev) {
+    value[s] == null && nodeStyle.removeProperty(s);
+    delete prev[s];
+  }
+  for (s in value) {
+    v = value[s];
+    if (v !== prev[s]) {
+      nodeStyle.setProperty(s, v);
+      prev[s] = v;
+    }
+  }
+  return prev;
+}
+function spread(node, props = {}, isSVG, skipChildren) {
+  const prevProps = {};
+  if (!skipChildren) {
+    createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
+  }
+  createRenderEffect(() => props.ref && props.ref(node));
+  createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
+  return prevProps;
+}
+function insert(parent, accessor, marker, initial) {
+  if (marker !== undefined && !initial) initial = [];
+  if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
+  createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
+}
+function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+  props || (props = {});
+  for (const prop in prevProps) {
+    if (!(prop in props)) {
+      if (prop === "children") continue;
+      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
     }
-  for (const s in t) {
-    if (s === "children") {
-      l || U(e, t.children);
+  }
+  for (const prop in props) {
+    if (prop === "children") {
+      if (!skipChildren) insertExpression(node, props.children);
       continue;
     }
-    const r = t[s];
-    i[s] = Ae(e, s, r, i[s], n, o);
-  }
-}
-function kt(e) {
-  return e.toLowerCase().replace(/-([a-z])/g, (t, n) => n.toUpperCase());
-}
-function ke(e, t, n) {
-  const l = t.trim().split(/\s+/);
-  for (let i = 0, o = l.length; i < o; i++)
-    e.classList.toggle(l[i], n);
-}
-function Ae(e, t, n, l, i, o) {
-  let s, r, a;
-  if (t === "style")
-    return We(e, n, l);
-  if (t === "classList")
-    return _t(e, n, l);
-  if (n === l)
-    return l;
-  if (t === "ref")
-    o || n(e);
-  else if (t.slice(0, 3) === "on:") {
-    const c = t.slice(3);
-    l && e.removeEventListener(c, l), n && e.addEventListener(c, n);
-  } else if (t.slice(0, 10) === "oncapture:") {
-    const c = t.slice(10);
-    l && e.removeEventListener(c, l, !0), n && e.addEventListener(c, n, !0);
-  } else if (t.slice(0, 2) === "on") {
-    const c = t.slice(2).toLowerCase(), d = vt.has(c);
-    if (!d && l) {
-      const g = Array.isArray(l) ? l[0] : l;
-      e.removeEventListener(c, g);
-    }
-    (d || n) && (oe(e, c, n, d), d && ce([c]));
-  } else if ((a = $t.has(t)) || !i && (Ne[t] || (r = mt.has(t))) || (s = e.nodeName.includes("-")))
-    t === "class" || t === "className" ? b(e, n) : s && !r && !a ? e[kt(t)] = n : e[Ne[t] || t] = n;
-  else {
-    const c = i && t.indexOf(":") > -1 && bt[t.split(":")[0]];
-    c ? wt(e, c, t, n) : P(e, yt[t] || t, n);
-  }
-  return n;
-}
-function At(e) {
-  const t = `$$${e.type}`;
-  let n = e.composedPath && e.composedPath()[0] || e.target;
-  for (e.target !== n && Object.defineProperty(e, "target", {
-    configurable: !0,
-    value: n
-  }), Object.defineProperty(e, "currentTarget", {
-    configurable: !0,
-    get() {
-      return n || document;
-    }
-  }), D.registry && !D.done && (D.done = !0, document.querySelectorAll("[id^=pl-]").forEach((l) => {
-    for (; l && l.nodeType !== 8 && l.nodeValue !== "pl-" + e; ) {
-      let i = l.nextSibling;
-      l.remove(), l = i;
-    }
-    l && l.remove();
-  })); n; ) {
-    const l = n[t];
-    if (l && !n.disabled) {
-      const i = n[`${t}Data`];
-      if (i !== void 0 ? l.call(n, i, e) : l.call(n, e), e.cancelBubble)
-        return;
+    const value = props[prop];
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
+  }
+}
+function toPropertyName(name) {
+  return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
+}
+function toggleClassKey(node, key, value) {
+  const classNames = key.trim().split(/\s+/);
+  for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
+}
+function assignProp(node, prop, value, prev, isSVG, skipRef) {
+  let isCE, isProp, isChildProp;
+  if (prop === "style") return style$1(node, value, prev);
+  if (prop === "classList") return classList(node, value, prev);
+  if (value === prev) return prev;
+  if (prop === "ref") {
+    if (!skipRef) value(node);
+  } else if (prop.slice(0, 3) === "on:") {
+    const e = prop.slice(3);
+    prev && node.removeEventListener(e, prev);
+    value && node.addEventListener(e, value);
+  } else if (prop.slice(0, 10) === "oncapture:") {
+    const e = prop.slice(10);
+    prev && node.removeEventListener(e, prev, true);
+    value && node.addEventListener(e, value, true);
+  } else if (prop.slice(0, 2) === "on") {
+    const name = prop.slice(2).toLowerCase();
+    const delegate = DelegatedEvents.has(name);
+    if (!delegate && prev) {
+      const h = Array.isArray(prev) ? prev[0] : prev;
+      node.removeEventListener(name, h);
+    }
+    if (delegate || value) {
+      addEventListener(node, name, value, delegate);
+      delegate && delegateEvents([name]);
     }
-    n = n._$host || n.parentNode || n.host;
-  }
-}
-function U(e, t, n, l, i) {
-  for (D.context && !n && (n = [...e.childNodes]); typeof n == "function"; )
-    n = n();
-  if (t === n)
-    return n;
-  const o = typeof t, s = l !== void 0;
-  if (e = s && n[0] && n[0].parentNode || e, o === "string" || o === "number") {
-    if (D.context)
-      return n;
-    if (o === "number" && (t = t.toString()), s) {
-      let r = n[0];
-      r && r.nodeType === 3 ? r.data = t : r = document.createTextNode(t), n = Z(e, n, l, r);
-    } else
-      n !== "" && typeof n == "string" ? n = e.firstChild.data = t : n = e.textContent = t;
-  } else if (t == null || o === "boolean") {
-    if (D.context)
-      return n;
-    n = Z(e, n, l);
+  } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
+    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
   } else {
-    if (o === "function")
-      return C(() => {
-        let r = t();
-        for (; typeof r == "function"; )
-          r = r();
-        n = U(e, r, n, l);
-      }), () => n;
-    if (Array.isArray(t)) {
-      const r = [], a = n && Array.isArray(n);
-      if (me(r, t, n, i))
-        return C(() => n = U(e, r, n, l, !0)), () => n;
-      if (D.context) {
-        if (!r.length)
-          return n;
-        for (let c = 0; c < r.length; c++)
-          if (r[c].parentNode)
-            return n = r;
-      }
-      if (r.length === 0) {
-        if (n = Z(e, n, l), s)
-          return n;
-      } else
-        a ? n.length === 0 ? Pe(e, r, l) : Ct(e, n, r) : (n && Z(e), Pe(e, r));
-      n = r;
-    } else if (t instanceof Node) {
-      if (D.context && t.parentNode)
-        return n = s ? [t] : t;
-      if (Array.isArray(n)) {
-        if (s)
-          return n = Z(e, n, l, t);
-        Z(e, n, null, t);
-      } else
-        n == null || n === "" || !e.firstChild ? e.appendChild(t) : e.replaceChild(t, e.firstChild);
-      n = t;
-    }
-  }
-  return n;
-}
-function me(e, t, n, l) {
-  let i = !1;
-  for (let o = 0, s = t.length; o < s; o++) {
-    let r = t[o], a = n && n[o];
-    if (r instanceof Node)
-      e.push(r);
-    else if (!(r == null || r === !0 || r === !1))
-      if (Array.isArray(r))
-        i = me(e, r, a) || i;
-      else if (typeof r == "function")
-        if (l) {
-          for (; typeof r == "function"; )
-            r = r();
-          i = me(e, Array.isArray(r) ? r : [r], Array.isArray(a) ? a : [a]) || i;
-        } else
-          e.push(r), i = !0;
-      else {
-        const c = String(r);
-        a && a.nodeType === 3 && a.data === c ? e.push(a) : e.push(document.createTextNode(c));
+    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
+    if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
+  }
+  return value;
+}
+function eventHandler(e) {
+  const key = `$$${e.type}`;
+  let node = e.composedPath && e.composedPath()[0] || e.target;
+  if (e.target !== node) {
+    Object.defineProperty(e, "target", {
+      configurable: true,
+      value: node
+    });
+  }
+  Object.defineProperty(e, "currentTarget", {
+    configurable: true,
+    get() {
+      return node || document;
+    }
+  });
+  if (sharedConfig.registry && !sharedConfig.done) {
+    sharedConfig.done = true;
+    document.querySelectorAll("[id^=pl-]").forEach(elem => {
+      while (elem && elem.nodeType !== 8 && elem.nodeValue !== "pl-" + e) {
+        let x = elem.nextSibling;
+        elem.remove();
+        elem = x;
       }
+      elem && elem.remove();
+    });
   }
-  return i;
-}
-function Pe(e, t, n = null) {
-  for (let l = 0, i = t.length; l < i; l++)
-    e.insertBefore(t[l], n);
-}
-function Z(e, t, n, l) {
-  if (n === void 0)
-    return e.textContent = "";
-  const i = l || document.createTextNode("");
-  if (t.length) {
-    let o = !1;
-    for (let s = t.length - 1; s >= 0; s--) {
-      const r = t[s];
-      if (i !== r) {
-        const a = r.parentNode === e;
-        !o && !s ? a ? e.replaceChild(i, r) : e.insertBefore(i, n) : a && r.remove();
-      } else
-        o = !0;
-    }
-  } else
-    e.insertBefore(i, n);
-  return [i];
-}
-var Pt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, $e = {}, Tt = {
-  get exports() {
-    return $e;
-  },
-  set exports(e) {
-    $e = e;
+  while (node) {
+    const handler = node[key];
+    if (handler && !node.disabled) {
+      const data = node[`${key}Data`];
+      data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
+      if (e.cancelBubble) return;
+    }
+    node = node._$host || node.parentNode || node.host;
   }
-};
-(function(e, t) {
-  (function(n, l) {
-    e.exports = l();
-  })(Pt, function() {
-    return function(n, l, i) {
-      n = n || {};
-      var o = l.prototype, s = { future: "in %s", past: "%s ago", s: "a few seconds", m: "a minute", mm: "%d minutes", h: "an hour", hh: "%d hours", d: "a day", dd: "%d days", M: "a month", MM: "%d months", y: "a year", yy: "%d years" };
-      function r(c, d, g, f) {
-        return o.fromToBase(c, d, g, f);
+}
+function insertExpression(parent, value, current, marker, unwrapArray) {
+  if (sharedConfig.context && !current) current = [...parent.childNodes];
+  while (typeof current === "function") current = current();
+  if (value === current) return current;
+  const t = typeof value,
+    multi = marker !== undefined;
+  parent = multi && current[0] && current[0].parentNode || parent;
+  if (t === "string" || t === "number") {
+    if (sharedConfig.context) return current;
+    if (t === "number") value = value.toString();
+    if (multi) {
+      let node = current[0];
+      if (node && node.nodeType === 3) {
+        node.data = value;
+      } else node = document.createTextNode(value);
+      current = cleanChildren(parent, current, marker, node);
+    } else {
+      if (current !== "" && typeof current === "string") {
+        current = parent.firstChild.data = value;
+      } else current = parent.textContent = value;
+    }
+  } else if (value == null || t === "boolean") {
+    if (sharedConfig.context) return current;
+    current = cleanChildren(parent, current, marker);
+  } else if (t === "function") {
+    createRenderEffect(() => {
+      let v = value();
+      while (typeof v === "function") v = v();
+      current = insertExpression(parent, v, current, marker);
+    });
+    return () => current;
+  } else if (Array.isArray(value)) {
+    const array = [];
+    const currentArray = current && Array.isArray(current);
+    if (normalizeIncomingArray(array, value, current, unwrapArray)) {
+      createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
+      return () => current;
+    }
+    if (sharedConfig.context) {
+      if (!array.length) return current;
+      for (let i = 0; i < array.length; i++) {
+        if (array[i].parentNode) return current = array;
       }
-      i.en.relativeTime = s, o.fromToBase = function(c, d, g, f, y) {
-        for (var v, x, w, A = g.$locale().relativeTime || s, k = n.thresholds || [{ l: "s", r: 44, d: "second" }, { l: "m", r: 89 }, { l: "mm", r: 44, d: "minute" }, { l: "h", r: 89 }, { l: "hh", r: 21, d: "hour" }, { l: "d", r: 35 }, { l: "dd", r: 25, d: "day" }, { l: "M", r: 45 }, { l: "MM", r: 10, d: "month" }, { l: "y", r: 17 }, { l: "yy", d: "year" }], ee = k.length, O = 0; O < ee; O += 1) {
-          var T = k[O];
-          T.d && (v = f ? i(c).diff(g, T.d, !0) : g.diff(c, T.d, !0));
-          var V = (n.rounding || Math.round)(Math.abs(v));
-          if (w = v > 0, V <= T.r || !T.r) {
-            V <= 1 && O > 0 && (T = k[O - 1]);
-            var pe = A[T.l];
-            y && (V = y("" + V)), x = typeof pe == "string" ? pe.replace("%d", V) : pe(V, d, T.l, w);
-            break;
-          }
-        }
-        if (d)
-          return x;
-        var ge = w ? A.future : A.past;
-        return typeof ge == "function" ? ge(x) : ge.replace("%s", x);
-      }, o.to = function(c, d) {
-        return r(c, d, this, !0);
-      }, o.from = function(c, d) {
-        return r(c, d, this);
-      };
-      var a = function(c) {
-        return c.$u ? i.utc() : i();
-      };
-      o.toNow = function(c) {
-        return this.to(a(this), c);
-      }, o.fromNow = function(c) {
-        return this.from(a(this), c);
-      };
-    };
-  });
-})(Tt);
-const Et = $e, Lt = /* @__PURE__ */ $("<button></button>"), M = (e) => (() => {
-  const t = Lt.cloneNode(!0);
-  return Nt(t, st(e, {
-    onMouseDown: Ot
-  }), !1, !1), t;
-})();
-function Ot(e) {
+    }
+    if (array.length === 0) {
+      current = cleanChildren(parent, current, marker);
+      if (multi) return current;
+    } else if (currentArray) {
+      if (current.length === 0) {
+        appendNodes(parent, array, marker);
+      } else reconcileArrays(parent, current, array);
+    } else {
+      current && cleanChildren(parent);
+      appendNodes(parent, array);
+    }
+    current = array;
+  } else if (value instanceof Node) {
+    if (sharedConfig.context && value.parentNode) return current = multi ? [value] : value;
+    if (Array.isArray(current)) {
+      if (multi) return current = cleanChildren(parent, current, marker, value);
+      cleanChildren(parent, current, null, value);
+    } else if (current == null || current === "" || !parent.firstChild) {
+      parent.appendChild(value);
+    } else parent.replaceChild(value, parent.firstChild);
+    current = value;
+  } else ;
+  return current;
+}
+function normalizeIncomingArray(normalized, array, current, unwrap) {
+  let dynamic = false;
+  for (let i = 0, len = array.length; i < len; i++) {
+    let item = array[i],
+      prev = current && current[i];
+    if (item instanceof Node) {
+      normalized.push(item);
+    } else if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
+      dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
+    } else if ((typeof item) === "function") {
+      if (unwrap) {
+        while (typeof item === "function") item = item();
+        dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;
+      } else {
+        normalized.push(item);
+        dynamic = true;
+      }
+    } else {
+      const value = String(item);
+      if (prev && prev.nodeType === 3 && prev.data === value) {
+        normalized.push(prev);
+      } else normalized.push(document.createTextNode(value));
+    }
+  }
+  return dynamic;
+}
+function appendNodes(parent, array, marker = null) {
+  for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
+}
+function cleanChildren(parent, current, marker, replacement) {
+  if (marker === undefined) return parent.textContent = "";
+  const node = replacement || document.createTextNode("");
+  if (current.length) {
+    let inserted = false;
+    for (let i = current.length - 1; i >= 0; i--) {
+      const el = current[i];
+      if (node !== el) {
+        const isParent = el.parentNode === parent;
+        if (!inserted && !i) isParent ? parent.replaceChild(node, el) : parent.insertBefore(node, marker);else isParent && el.remove();
+      } else inserted = true;
+    }
+  } else parent.insertBefore(node, marker);
+  return [node];
+}
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+var relativeTimeExports = {};
+var relativeTime$1 = {
+  get exports(){ return relativeTimeExports; },
+  set exports(v){ relativeTimeExports = v; },
+};
+
+(function (module, exports) {
+	!function(r,e){module.exports=e();}(commonjsGlobal,(function(){return function(r,e,t){r=r||{};var n=e.prototype,o={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function i(r,e,t,o){return n.fromToBase(r,e,t,o)}t.en.relativeTime=o,n.fromToBase=function(e,n,i,d,u){for(var f,a,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],m=h.length,c=0;c<m;c+=1){var y=h[c];y.d&&(f=d?t(e).diff(i,y.d,!0):i.diff(e,y.d,!0));var p=(r.rounding||Math.round)(Math.abs(f));if(s=f>0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return "function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,!0)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)};}}));
+} (relativeTime$1));
+
+const relativeTime = relativeTimeExports;
+
+const _tmpl$$b = /*#__PURE__*/template(`<button></button>`);
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+
+const ButtonElement = props => {
+  return (() => {
+    const _el$ = _tmpl$$b.cloneNode(true);
+    spread(_el$, mergeProps(props, {
+      "onMouseDown": preventDefault
+    }), false, false);
+    return _el$;
+  })();
+};
+function preventDefault(e) {
   e.preventDefault();
 }
-const jt = `<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="32"
-  height="32"
-  viewBox="0 0 32 32"
->
-  <path
-    fill="currentColor"
-    d="m24 12l-8 10l-8-10z"
-  />
-</svg>
-`, Mt = `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 28C22.1046 28 23 27.1046 23 26C23 24.8954 22.1046 24 21 24C19.8954 24 19 24.8954 19 26C19 27.1046 19.8954 28 21 28Z" fill="currentColor"/>
-<path d="M21 8C22.1046 8 23 7.10457 23 6C23 4.89543 22.1046 4 21 4C19.8954 4 19 4.89543 19 6C19 7.10457 19.8954 8 21 8Z" fill="currentColor"/>
-<path d="M4 18C5.10457 18 6 17.1046 6 16C6 14.8954 5.10457 14 4 14C2.89543 14 2 14.8954 2 16C2 17.1046 2.89543 18 4 18Z" fill="currentColor"/>
-<path d="M28 12C27.1156 12.0026 26.2571 12.2986 25.5589 12.8415C24.8608 13.3844 24.3624 14.1435 24.142 15H19.858C19.7164 14.4361 19.4525 13.9101 19.085 13.4595C18.7175 13.0089 18.2555 12.6446 17.7315 12.3924C17.2076 12.1402 16.6346 12.0064 16.0532 12.0002C15.4718 11.9941 14.8961 12.1159 14.367 12.357L11.19 8.387C11.7126 7.7007 11.997 6.86262 12 6C12 5.20887 11.7654 4.43552 11.3259 3.77772C10.8864 3.11992 10.2616 2.60723 9.53073 2.30448C8.79983 2.00173 7.99556 1.92252 7.21964 2.07686C6.44371 2.2312 5.73098 2.61216 5.17157 3.17157C4.61216 3.73098 4.2312 4.44371 4.07686 5.21964C3.92252 5.99556 4.00173 6.79983 4.30448 7.53073C4.60723 8.26164 5.11992 8.88635 5.77772 9.32588C6.43552 9.7654 7.20887 10 8 10C8.56387 9.99869 9.12096 9.87698 9.634 9.643L12.81 13.613C12.285 14.298 12.0005 15.137 12.0005 16C12.0005 16.863 12.285 17.702 12.81 18.387L9.634 22.357C9.12096 22.123 8.56387 22.0013 8 22C7.20887 22 6.43552 22.2346 5.77772 22.6741C5.11992 23.1136 4.60723 23.7384 4.30448 24.4693C4.00173 25.2002 3.92252 26.0044 4.07686 26.7804C4.2312 27.5563 4.61216 28.269 5.17157 28.8284C5.73098 29.3878 6.44371 29.7688 7.21964 29.9231C7.99556 30.0775 8.79983 29.9983 9.53073 29.6955C10.2616 29.3928 10.8864 28.8801 11.3259 28.2223C11.7654 27.5645 12 26.7911 12 26C11.9971 25.1374 11.7127 24.2993 11.19 23.613L14.366 19.643C14.8952 19.8843 15.4709 20.0062 16.0525 20.0002C16.634 19.9942 17.2071 19.8603 17.7312 19.6081C18.2552 19.3559 18.7174 18.9915 19.0849 18.5408C19.4525 18.0901 19.7164 17.5641 19.858 17H24.142C24.3303 17.7226 24.7175 18.3778 25.2595 18.8914C25.8015 19.405 26.4766 19.7563 27.2083 19.9055C27.9399 20.0547 28.6987 19.9957 29.3985 19.7353C30.0983 19.4749 30.7111 19.0234 31.1673 18.4323C31.6234 17.8411 31.9047 17.1339 31.9791 16.3909C32.0535 15.6479 31.9181 14.899 31.5882 14.2291C31.2584 13.5592 30.7473 12.9952 30.113 12.6012C29.4787 12.2072 28.7467 11.9989 28 12ZM6 6C6 5.60444 6.1173 5.21776 6.33706 4.88886C6.55682 4.55996 6.86918 4.30362 7.23463 4.15224C7.60009 4.00087 8.00222 3.96126 8.39018 4.03843C8.77814 4.1156 9.13451 4.30608 9.41421 4.58579C9.69392 4.86549 9.8844 5.22186 9.96157 5.60982C10.0387 5.99778 9.99913 6.39991 9.84776 6.76537C9.69638 7.13082 9.44004 7.44318 9.11114 7.66294C8.78224 7.8827 8.39556 8 8 8C7.46973 7.99947 6.96133 7.78859 6.58637 7.41363C6.21141 7.03867 6.00053 6.53027 6 6ZM8 28C7.60444 28 7.21776 27.8827 6.88886 27.6629C6.55996 27.4432 6.30362 27.1308 6.15224 26.7654C6.00087 26.3999 5.96126 25.9978 6.03843 25.6098C6.1156 25.2219 6.30608 24.8655 6.58579 24.5858C6.86549 24.3061 7.22186 24.1156 7.60982 24.0384C7.99778 23.9613 8.39991 24.0009 8.76537 24.1522C9.13082 24.3036 9.44318 24.56 9.66294 24.8889C9.8827 25.2178 10 25.6044 10 26C9.99947 26.5303 9.78859 27.0387 9.41363 27.4136C9.03867 27.7886 8.53027 27.9995 8 28ZM16 18C15.6044 18 15.2178 17.8827 14.8889 17.6629C14.56 17.4432 14.3036 17.1308 14.1522 16.7654C14.0009 16.3999 13.9613 15.9978 14.0384 15.6098C14.1156 15.2219 14.3061 14.8655 14.5858 14.5858C14.8655 14.3061 15.2219 14.1156 15.6098 14.0384C15.9978 13.9613 16.3999 14.0009 16.7654 14.1522C17.1308 14.3036 17.4432 14.56 17.6629 14.8889C17.8827 15.2178 18 15.6044 18 16C17.9995 16.5303 17.7886 17.0387 17.4136 17.4136C17.0387 17.7886 16.5303 17.9995 16 18ZM28 18C27.6044 18 27.2178 17.8827 26.8889 17.6629C26.56 17.4432 26.3036 17.1308 26.1522 16.7654C26.0009 16.3999 25.9613 15.9978 26.0384 15.6098C26.1156 15.2219 26.3061 14.8655 26.5858 14.5858C26.8655 14.3061 27.2219 14.1156 27.6098 14.0384C27.9978 13.9613 28.3999 14.0009 28.7654 14.1522C29.1308 14.3036 29.4432 14.56 29.6629 14.8889C29.8827 15.2178 30 15.6044 30 16C29.9995 16.5303 29.7886 17.0387 29.4136 17.4136C29.0387 17.7886 28.5303 17.9995 28 18Z" fill="currentColor"/>
-</svg>
-`, Rt = `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M29 27.586L21.448 20.034C23.2628 17.8553 24.1678 15.0608 23.9747 12.2319C23.7816 9.40297 22.5053 6.75739 20.4112 4.84552C18.3172 2.93364 15.5667 1.90267 12.732 1.96709C9.89717 2.0315 7.19635 3.18633 5.19134 5.19134C3.18633 7.19635 2.0315 9.89717 1.96709 12.732C1.90268 15.5667 2.93364 18.3172 4.84552 20.4112C6.75739 22.5053 9.40297 23.7816 12.2319 23.9747C15.0608 24.1678 17.8553 23.2628 20.034 21.448L27.586 29L29 27.586ZM4 13C4 11.22 4.52784 9.47991 5.51677 7.99987C6.50571 6.51983 7.91132 5.36627 9.55585 4.68508C11.2004 4.0039 13.01 3.82567 14.7558 4.17293C16.5016 4.5202 18.1053 5.37737 19.364 6.63604C20.6226 7.89471 21.4798 9.49836 21.8271 11.2442C22.1743 12.99 21.9961 14.7996 21.3149 16.4442C20.6337 18.0887 19.4802 19.4943 18.0001 20.4832C16.5201 21.4722 14.78 22 13 22C10.6139 21.9974 8.32622 21.0483 6.63896 19.361C4.95171 17.6738 4.00265 15.3861 4 13Z" fill="currentColor"/>
-</svg>
-`, Dt = `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M27.71 4.29C27.575 4.15567 27.4045 4.06267 27.2185 4.02193C27.0325 3.98118 26.8388 3.99439 26.66 4.06L4.66 12.06C4.47027 12.132 4.30692 12.26 4.19165 12.427C4.07638 12.594 4.01465 12.7921 4.01465 12.995C4.01465 13.1979 4.07638 13.396 4.19165 13.563C4.30692 13.73 4.47027 13.858 4.66 13.93L14.26 17.77L18.1 27.37C18.1721 27.5514 18.2958 27.7077 18.4557 27.8197C18.6157 27.9316 18.8049 27.9943 19 28C19.2021 27.9959 19.3982 27.9306 19.5624 27.8127C19.7266 27.6949 19.8513 27.5301 19.92 27.34L27.92 5.34C27.9881 5.16308 28.0046 4.97043 27.9674 4.78452C27.9302 4.59862 27.8409 4.42711 27.71 4.29ZM19 24.2L16.21 17.2L21 12.41L19.59 11L14.76 15.83L7.8 13L25.33 6.67L19 24.2Z" fill="currentColor"/>
-</svg>
-`, It = `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30 8H25.9C25.4 5.7 23.4 4 21 4C18.6 4 16.6 5.7 16.1 8H2V10H16.1C16.6 12.3 18.6 14 21 14C23.4 14 25.4 12.3 25.9 10H30V8ZM21 12C19.3 12 18 10.7 18 9C18 7.3 19.3 6 21 6C22.7 6 24 7.3 24 9C24 10.7 22.7 12 21 12ZM2 24H6.1C6.6 26.3 8.6 28 11 28C13.4 28 15.4 26.3 15.9 24H30V22H15.9C15.4 19.7 13.4 18 11 18C8.6 18 6.6 19.7 6.1 22H2V24ZM11 20C12.7 20 14 21.3 14 23C14 24.7 12.7 26 11 26C9.3 26 8 24.7 8 23C8 21.3 9.3 20 11 20Z" fill="currentColor"/>
-</svg>
-`, zt = /* @__PURE__ */ Object.assign({
-  "/src/assets/icons/caret-down.svg": jt,
-  "/src/assets/icons/network.svg": Mt,
-  "/src/assets/icons/search.svg": Rt,
-  "/src/assets/icons/send.svg": Dt,
-  "/src/assets/icons/settings.svg": It
+
+const __vite_glob_0_0 = "<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"32\"\n  height=\"32\"\n  viewBox=\"0 0 32 32\"\n>\n  <path\n    fill=\"currentColor\"\n    d=\"m24 12l-8 10l-8-10z\"\n  />\n</svg>\n";
+
+const __vite_glob_0_1 = "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21 28C22.1046 28 23 27.1046 23 26C23 24.8954 22.1046 24 21 24C19.8954 24 19 24.8954 19 26C19 27.1046 19.8954 28 21 28Z\" fill=\"currentColor\"/>\n<path d=\"M21 8C22.1046 8 23 7.10457 23 6C23 4.89543 22.1046 4 21 4C19.8954 4 19 4.89543 19 6C19 7.10457 19.8954 8 21 8Z\" fill=\"currentColor\"/>\n<path d=\"M4 18C5.10457 18 6 17.1046 6 16C6 14.8954 5.10457 14 4 14C2.89543 14 2 14.8954 2 16C2 17.1046 2.89543 18 4 18Z\" fill=\"currentColor\"/>\n<path d=\"M28 12C27.1156 12.0026 26.2571 12.2986 25.5589 12.8415C24.8608 13.3844 24.3624 14.1435 24.142 15H19.858C19.7164 14.4361 19.4525 13.9101 19.085 13.4595C18.7175 13.0089 18.2555 12.6446 17.7315 12.3924C17.2076 12.1402 16.6346 12.0064 16.0532 12.0002C15.4718 11.9941 14.8961 12.1159 14.367 12.357L11.19 8.387C11.7126 7.7007 11.997 6.86262 12 6C12 5.20887 11.7654 4.43552 11.3259 3.77772C10.8864 3.11992 10.2616 2.60723 9.53073 2.30448C8.79983 2.00173 7.99556 1.92252 7.21964 2.07686C6.44371 2.2312 5.73098 2.61216 5.17157 3.17157C4.61216 3.73098 4.2312 4.44371 4.07686 5.21964C3.92252 5.99556 4.00173 6.79983 4.30448 7.53073C4.60723 8.26164 5.11992 8.88635 5.77772 9.32588C6.43552 9.7654 7.20887 10 8 10C8.56387 9.99869 9.12096 9.87698 9.634 9.643L12.81 13.613C12.285 14.298 12.0005 15.137 12.0005 16C12.0005 16.863 12.285 17.702 12.81 18.387L9.634 22.357C9.12096 22.123 8.56387 22.0013 8 22C7.20887 22 6.43552 22.2346 5.77772 22.6741C5.11992 23.1136 4.60723 23.7384 4.30448 24.4693C4.00173 25.2002 3.92252 26.0044 4.07686 26.7804C4.2312 27.5563 4.61216 28.269 5.17157 28.8284C5.73098 29.3878 6.44371 29.7688 7.21964 29.9231C7.99556 30.0775 8.79983 29.9983 9.53073 29.6955C10.2616 29.3928 10.8864 28.8801 11.3259 28.2223C11.7654 27.5645 12 26.7911 12 26C11.9971 25.1374 11.7127 24.2993 11.19 23.613L14.366 19.643C14.8952 19.8843 15.4709 20.0062 16.0525 20.0002C16.634 19.9942 17.2071 19.8603 17.7312 19.6081C18.2552 19.3559 18.7174 18.9915 19.0849 18.5408C19.4525 18.0901 19.7164 17.5641 19.858 17H24.142C24.3303 17.7226 24.7175 18.3778 25.2595 18.8914C25.8015 19.405 26.4766 19.7563 27.2083 19.9055C27.9399 20.0547 28.6987 19.9957 29.3985 19.7353C30.0983 19.4749 30.7111 19.0234 31.1673 18.4323C31.6234 17.8411 31.9047 17.1339 31.9791 16.3909C32.0535 15.6479 31.9181 14.899 31.5882 14.2291C31.2584 13.5592 30.7473 12.9952 30.113 12.6012C29.4787 12.2072 28.7467 11.9989 28 12ZM6 6C6 5.60444 6.1173 5.21776 6.33706 4.88886C6.55682 4.55996 6.86918 4.30362 7.23463 4.15224C7.60009 4.00087 8.00222 3.96126 8.39018 4.03843C8.77814 4.1156 9.13451 4.30608 9.41421 4.58579C9.69392 4.86549 9.8844 5.22186 9.96157 5.60982C10.0387 5.99778 9.99913 6.39991 9.84776 6.76537C9.69638 7.13082 9.44004 7.44318 9.11114 7.66294C8.78224 7.8827 8.39556 8 8 8C7.46973 7.99947 6.96133 7.78859 6.58637 7.41363C6.21141 7.03867 6.00053 6.53027 6 6ZM8 28C7.60444 28 7.21776 27.8827 6.88886 27.6629C6.55996 27.4432 6.30362 27.1308 6.15224 26.7654C6.00087 26.3999 5.96126 25.9978 6.03843 25.6098C6.1156 25.2219 6.30608 24.8655 6.58579 24.5858C6.86549 24.3061 7.22186 24.1156 7.60982 24.0384C7.99778 23.9613 8.39991 24.0009 8.76537 24.1522C9.13082 24.3036 9.44318 24.56 9.66294 24.8889C9.8827 25.2178 10 25.6044 10 26C9.99947 26.5303 9.78859 27.0387 9.41363 27.4136C9.03867 27.7886 8.53027 27.9995 8 28ZM16 18C15.6044 18 15.2178 17.8827 14.8889 17.6629C14.56 17.4432 14.3036 17.1308 14.1522 16.7654C14.0009 16.3999 13.9613 15.9978 14.0384 15.6098C14.1156 15.2219 14.3061 14.8655 14.5858 14.5858C14.8655 14.3061 15.2219 14.1156 15.6098 14.0384C15.9978 13.9613 16.3999 14.0009 16.7654 14.1522C17.1308 14.3036 17.4432 14.56 17.6629 14.8889C17.8827 15.2178 18 15.6044 18 16C17.9995 16.5303 17.7886 17.0387 17.4136 17.4136C17.0387 17.7886 16.5303 17.9995 16 18ZM28 18C27.6044 18 27.2178 17.8827 26.8889 17.6629C26.56 17.4432 26.3036 17.1308 26.1522 16.7654C26.0009 16.3999 25.9613 15.9978 26.0384 15.6098C26.1156 15.2219 26.3061 14.8655 26.5858 14.5858C26.8655 14.3061 27.2219 14.1156 27.6098 14.0384C27.9978 13.9613 28.3999 14.0009 28.7654 14.1522C29.1308 14.3036 29.4432 14.56 29.6629 14.8889C29.8827 15.2178 30 15.6044 30 16C29.9995 16.5303 29.7886 17.0387 29.4136 17.4136C29.0387 17.7886 28.5303 17.9995 28 18Z\" fill=\"currentColor\"/>\n</svg>\n";
+
+const __vite_glob_0_2 = "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M29 27.586L21.448 20.034C23.2628 17.8553 24.1678 15.0608 23.9747 12.2319C23.7816 9.40297 22.5053 6.75739 20.4112 4.84552C18.3172 2.93364 15.5667 1.90267 12.732 1.96709C9.89717 2.0315 7.19635 3.18633 5.19134 5.19134C3.18633 7.19635 2.0315 9.89717 1.96709 12.732C1.90268 15.5667 2.93364 18.3172 4.84552 20.4112C6.75739 22.5053 9.40297 23.7816 12.2319 23.9747C15.0608 24.1678 17.8553 23.2628 20.034 21.448L27.586 29L29 27.586ZM4 13C4 11.22 4.52784 9.47991 5.51677 7.99987C6.50571 6.51983 7.91132 5.36627 9.55585 4.68508C11.2004 4.0039 13.01 3.82567 14.7558 4.17293C16.5016 4.5202 18.1053 5.37737 19.364 6.63604C20.6226 7.89471 21.4798 9.49836 21.8271 11.2442C22.1743 12.99 21.9961 14.7996 21.3149 16.4442C20.6337 18.0887 19.4802 19.4943 18.0001 20.4832C16.5201 21.4722 14.78 22 13 22C10.6139 21.9974 8.32622 21.0483 6.63896 19.361C4.95171 17.6738 4.00265 15.3861 4 13Z\" fill=\"currentColor\"/>\n</svg>\n";
+
+const __vite_glob_0_3 = "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M27.71 4.29C27.575 4.15567 27.4045 4.06267 27.2185 4.02193C27.0325 3.98118 26.8388 3.99439 26.66 4.06L4.66 12.06C4.47027 12.132 4.30692 12.26 4.19165 12.427C4.07638 12.594 4.01465 12.7921 4.01465 12.995C4.01465 13.1979 4.07638 13.396 4.19165 13.563C4.30692 13.73 4.47027 13.858 4.66 13.93L14.26 17.77L18.1 27.37C18.1721 27.5514 18.2958 27.7077 18.4557 27.8197C18.6157 27.9316 18.8049 27.9943 19 28C19.2021 27.9959 19.3982 27.9306 19.5624 27.8127C19.7266 27.6949 19.8513 27.5301 19.92 27.34L27.92 5.34C27.9881 5.16308 28.0046 4.97043 27.9674 4.78452C27.9302 4.59862 27.8409 4.42711 27.71 4.29ZM19 24.2L16.21 17.2L21 12.41L19.59 11L14.76 15.83L7.8 13L25.33 6.67L19 24.2Z\" fill=\"currentColor\"/>\n</svg>\n";
+
+const __vite_glob_0_4 = "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M30 8H25.9C25.4 5.7 23.4 4 21 4C18.6 4 16.6 5.7 16.1 8H2V10H16.1C16.6 12.3 18.6 14 21 14C23.4 14 25.4 12.3 25.9 10H30V8ZM21 12C19.3 12 18 10.7 18 9C18 7.3 19.3 6 21 6C22.7 6 24 7.3 24 9C24 10.7 22.7 12 21 12ZM2 24H6.1C6.6 26.3 8.6 28 11 28C13.4 28 15.4 26.3 15.9 24H30V22H15.9C15.4 19.7 13.4 18 11 18C8.6 18 6.6 19.7 6.1 22H2V24ZM11 20C12.7 20 14 21.3 14 23C14 24.7 12.7 26 11 26C9.3 26 8 24.7 8 23C8 21.3 9.3 20 11 20Z\" fill=\"currentColor\"/>\n</svg>\n";
+
+const test = /* #__PURE__ */ Object.assign({"/src/assets/icons/caret-down.svg": __vite_glob_0_0,"/src/assets/icons/network.svg": __vite_glob_0_1,"/src/assets/icons/search.svg": __vite_glob_0_2,"/src/assets/icons/send.svg": __vite_glob_0_3,"/src/assets/icons/settings.svg": __vite_glob_0_4
+
+
 });
-function Ft(e) {
-  return zt[`/src/assets/icons/${e}.svg`];
+function getIconSvg(icon) {
+  const svg = test[`/src/assets/icons/${icon}.svg`];
+  return svg;
 }
-const Ce = `
+
+const fillContainer = `
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
 `;
-function Bt(e, t = "px") {
-  return typeof e == "string" ? String(e) : Array.isArray(e) ? e.map((n) => `${n}${t}`).join(" ") : `${e}${t}`;
+
+function parseUnit(value, defaultUnit = "px") {
+  return typeof value === "string" ? String(value) : Array.isArray(value) ? value.map((item) => `${item}${defaultUnit}`).join(" ") : `${value}${defaultUnit}`;
 }
-const Ht = /* @__PURE__ */ $("<div></div>"), Vt = _`
+
+let e={data:""},t=t=>"object"==typeof window?((t?t.querySelector("#_goober"):window._goober)||Object.assign((t||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:t||e,l=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,a=/\/\*[^]*?\*\/|  +/g,n=/\n+/g,o=(e,t)=>{let r="",l="",a="";for(let n in e){let c=e[n];"@"==n[0]?"i"==n[1]?r=n+" "+c+";":l+="f"==n[1]?o(c,n):n+"{"+o(c,"k"==n[1]?"":t)+"}":"object"==typeof c?l+=o(c,t?t.replace(/([^,])+/g,e=>n.replace(/(^:.*)|([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+" "+t:t)):n):null!=c&&(n=/^--/.test(n)?n:n.replace(/[A-Z]/g,"-$&").toLowerCase(),a+=o.p?o.p(n,c):n+":"+c+";");}return r+(t&&a?t+"{"+a+"}":a)+l},c={},s=e=>{if("object"==typeof e){let t="";for(let r in e)t+=r+s(e[r]);return t}return e},i=(e,t,r,i,p)=>{let u=s(e),d=c[u]||(c[u]=(e=>{let t=0,r=11;for(;t<e.length;)r=101*r+e.charCodeAt(t++)>>>0;return "go"+r})(u));if(!c[d]){let t=u!==e?e:(e=>{let t,r,o=[{}];for(;t=l.exec(e.replace(a,""));)t[4]?o.shift():t[3]?(r=t[3].replace(n," ").trim(),o.unshift(o[0][r]=o[0][r]||{})):o[0][t[1]]=t[2].replace(n," ").trim();return o[0]})(e);c[d]=o(p?{["@keyframes "+d]:t}:t,r?"":"."+d);}let f=r&&c.g?c.g:null;return r&&(c.g=c[d]),((e,t,r,l)=>{l?t.data=t.data.replace(l,e):-1===t.data.indexOf(e)&&(t.data=r?e+t.data:t.data+e);})(c[d],t,i,f),d},p=(e,t,r)=>e.reduce((e,l,a)=>{let n=t[a];if(n&&n.call){let e=n(r),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;n=t?"."+t:e&&"object"==typeof e?e.props?"":o(e,""):!1===e?"":e;}return e+l+(null==n?"":n)},"");function u(e){let r=this||{},l=e.call?e(r.p):e;return i(l.unshift?l.raw?p(l,[].slice.call(arguments,1),r.p):l.reduce((e,t)=>Object.assign(e,t&&t.call?t(r.p):t),{}):l,t(r.target),r.g,r.o,r.k)}u.bind({g:1});u.bind({k:1});
+
+const _tmpl$$a = /*#__PURE__*/template(`<div></div>`);
+const style = u`
   &&& {
     position: relative;
     color: currentColor;
@@ -440,316 +1094,392 @@ const Ht = /* @__PURE__ */ $("<div></div>"), Vt = _`
 
     svg {
       display: block;
-      ${Ce};
+      ${fillContainer};
     }
   }
-`, de = (e) => {
-  const t = Ft(e.name);
+`;
+const Icon = props => {
+  const icon = getIconSvg(props.name);
   return (() => {
-    const n = Ht.cloneNode(!0);
-    return n.innerHTML = t, C((l) => {
-      const i = `icon ${e.class || ""} ${Vt}`, o = {
-        color: e.color,
-        "--icon-size": e.size && Bt(e.size)
-      };
-      return i !== l._v$ && b(n, l._v$ = i), l._v$2 = We(n, o, l._v$2), l;
+    const _el$ = _tmpl$$a.cloneNode(true);
+    _el$.innerHTML = icon;
+    createRenderEffect(_p$ => {
+      const _v$ = `icon ${props.class || ''} ${style}`,
+        _v$2 = {
+          color: props.color,
+          '--icon-size': props.size && parseUnit(props.size)
+        };
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style$1(_el$, _v$2, _p$._v$2);
+      return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
-    }), n;
+      _v$: undefined,
+      _v$2: undefined
+    });
+    return _el$;
   })();
-}, le = Symbol("store-raw"), q = Symbol("store-node"), Zt = Symbol("store-name");
-function Je(e, t) {
-  let n = e[z];
-  if (!n && (Object.defineProperty(e, z, {
-    value: n = new Proxy(e, Wt)
-  }), !Array.isArray(e))) {
-    const l = Object.keys(e), i = Object.getOwnPropertyDescriptors(e);
-    for (let o = 0, s = l.length; o < s; o++) {
-      const r = l[o];
-      i[r].get && Object.defineProperty(e, r, {
-        enumerable: i[r].enumerable,
-        get: i[r].get.bind(n)
-      });
+};
+
+const $RAW = Symbol("store-raw"),
+  $NODE = Symbol("store-node"),
+  $NAME = Symbol("store-name");
+function wrap$1(value, name) {
+  let p = value[$PROXY];
+  if (!p) {
+    Object.defineProperty(value, $PROXY, {
+      value: p = new Proxy(value, proxyTraps$1)
+    });
+    if (!Array.isArray(value)) {
+      const keys = Object.keys(value),
+        desc = Object.getOwnPropertyDescriptors(value);
+      for (let i = 0, l = keys.length; i < l; i++) {
+        const prop = keys[i];
+        if (desc[prop].get) {
+          Object.defineProperty(value, prop, {
+            enumerable: desc[prop].enumerable,
+            get: desc[prop].get.bind(p)
+          });
+        }
+      }
     }
   }
-  return n;
-}
-function W(e) {
-  let t;
-  return e != null && typeof e == "object" && (e[z] || !(t = Object.getPrototypeOf(e)) || t === Object.prototype || Array.isArray(e));
-}
-function J(e, t = /* @__PURE__ */ new Set()) {
-  let n, l, i, o;
-  if (n = e != null && e[le])
-    return n;
-  if (!W(e) || t.has(e))
-    return e;
-  if (Array.isArray(e)) {
-    Object.isFrozen(e) ? e = e.slice(0) : t.add(e);
-    for (let s = 0, r = e.length; s < r; s++)
-      i = e[s], (l = J(i, t)) !== i && (e[s] = l);
+  return p;
+}
+function isWrappable(obj) {
+  let proto;
+  return obj != null && typeof obj === "object" && (obj[$PROXY] || !(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype || Array.isArray(obj));
+}
+function unwrap(item, set = new Set()) {
+  let result, unwrapped, v, prop;
+  if (result = item != null && item[$RAW]) return result;
+  if (!isWrappable(item) || set.has(item)) return item;
+  if (Array.isArray(item)) {
+    if (Object.isFrozen(item)) item = item.slice(0);else set.add(item);
+    for (let i = 0, l = item.length; i < l; i++) {
+      v = item[i];
+      if ((unwrapped = unwrap(v, set)) !== v) item[i] = unwrapped;
+    }
   } else {
-    Object.isFrozen(e) ? e = Object.assign({}, e) : t.add(e);
-    const s = Object.keys(e), r = Object.getOwnPropertyDescriptors(e);
-    for (let a = 0, c = s.length; a < c; a++)
-      o = s[a], !r[o].get && (i = e[o], (l = J(i, t)) !== i && (e[o] = l));
+    if (Object.isFrozen(item)) item = Object.assign({}, item);else set.add(item);
+    const keys = Object.keys(item),
+      desc = Object.getOwnPropertyDescriptors(item);
+    for (let i = 0, l = keys.length; i < l; i++) {
+      prop = keys[i];
+      if (desc[prop].get) continue;
+      v = item[prop];
+      if ((unwrapped = unwrap(v, set)) !== v) item[prop] = unwrapped;
+    }
   }
-  return e;
-}
-function xe(e) {
-  let t = e[q];
-  return t || Object.defineProperty(e, q, {
-    value: t = {}
-  }), t;
+  return item;
 }
-function ye(e, t, n) {
-  return e[t] || (e[t] = Ge(n));
-}
-function Kt(e, t) {
-  const n = Reflect.getOwnPropertyDescriptor(e, t);
-  return !n || n.get || !n.configurable || t === z || t === q || t === Zt || (delete n.value, delete n.writable, n.get = () => e[z][t]), n;
-}
-function Xe(e) {
-  if (Ke()) {
-    const t = xe(e);
-    (t._ || (t._ = Ge()))();
+function getDataNodes(target) {
+  let nodes = target[$NODE];
+  if (!nodes) Object.defineProperty(target, $NODE, {
+    value: nodes = {}
+  });
+  return nodes;
+}
+function getDataNode(nodes, property, value) {
+  return nodes[property] || (nodes[property] = createDataNode(value));
+}
+function proxyDescriptor$1(target, property) {
+  const desc = Reflect.getOwnPropertyDescriptor(target, property);
+  if (!desc || desc.get || !desc.configurable || property === $PROXY || property === $NODE || property === $NAME) return desc;
+  delete desc.value;
+  delete desc.writable;
+  desc.get = () => target[$PROXY][property];
+  return desc;
+}
+function trackSelf(target) {
+  if (getListener()) {
+    const nodes = getDataNodes(target);
+    (nodes._ || (nodes._ = createDataNode()))();
   }
 }
-function Ut(e) {
-  return Xe(e), Reflect.ownKeys(e);
+function ownKeys(target) {
+  trackSelf(target);
+  return Reflect.ownKeys(target);
 }
-function Ge(e) {
-  const [t, n] = re(e, {
-    equals: !1,
-    internal: !0
+function createDataNode(value) {
+  const [s, set] = createSignal(value, {
+    equals: false,
+    internal: true
   });
-  return t.$ = n, t;
-}
-const Wt = {
-  get(e, t, n) {
-    if (t === le)
-      return e;
-    if (t === z)
-      return n;
-    if (t === _e)
-      return Xe(e), n;
-    const l = xe(e), i = l.hasOwnProperty(t);
-    let o = i ? l[t]() : e[t];
-    if (t === q || t === "__proto__")
-      return o;
-    if (!i) {
-      const s = Object.getOwnPropertyDescriptor(e, t);
-      Ke() && (typeof o != "function" || e.hasOwnProperty(t)) && !(s && s.get) && (o = ye(l, t, o)());
-    }
-    return W(o) ? Je(o) : o;
+  s.$ = set;
+  return s;
+}
+const proxyTraps$1 = {
+  get(target, property, receiver) {
+    if (property === $RAW) return target;
+    if (property === $PROXY) return receiver;
+    if (property === $TRACK) {
+      trackSelf(target);
+      return receiver;
+    }
+    const nodes = getDataNodes(target);
+    const tracked = nodes.hasOwnProperty(property);
+    let value = tracked ? nodes[property]() : target[property];
+    if (property === $NODE || property === "__proto__") return value;
+    if (!tracked) {
+      const desc = Object.getOwnPropertyDescriptor(target, property);
+      if (getListener() && (typeof value !== "function" || target.hasOwnProperty(property)) && !(desc && desc.get)) value = getDataNode(nodes, property, value)();
+    }
+    return isWrappable(value) ? wrap$1(value) : value;
   },
-  has(e, t) {
-    return t === le || t === z || t === _e || t === q || t === "__proto__" ? !0 : (this.get(e, t, e), t in e);
+  has(target, property) {
+    if (property === $RAW || property === $PROXY || property === $TRACK || property === $NODE || property === "__proto__") return true;
+    this.get(target, property, target);
+    return property in target;
   },
   set() {
-    return !0;
+    return true;
   },
   deleteProperty() {
-    return !0;
+    return true;
   },
-  ownKeys: Ut,
-  getOwnPropertyDescriptor: Kt
+  ownKeys: ownKeys,
+  getOwnPropertyDescriptor: proxyDescriptor$1
 };
-function X(e, t, n, l = !1) {
-  if (!l && e[t] === n)
-    return;
-  const i = e[t], o = e.length;
-  n === void 0 ? delete e[t] : e[t] = n;
-  let s = xe(e), r;
-  (r = ye(s, t, i)) && r.$(() => n), Array.isArray(e) && e.length !== o && (r = ye(s, "length", o)) && r.$(e.length), (r = s._) && r.$();
-}
-function Ye(e, t) {
-  const n = Object.keys(t);
-  for (let l = 0; l < n.length; l += 1) {
-    const i = n[l];
-    X(e, i, t[i]);
-  }
-}
-function Jt(e, t) {
-  if (typeof t == "function" && (t = t(e)), t = J(t), Array.isArray(t)) {
-    if (e === t)
-      return;
-    let n = 0, l = t.length;
-    for (; n < l; n++) {
-      const i = t[n];
-      e[n] !== i && X(e, n, i);
-    }
-    X(e, "length", l);
-  } else
-    Ye(e, t);
-}
-function Y(e, t, n = []) {
-  let l, i = e;
-  if (t.length > 1) {
-    l = t.shift();
-    const s = typeof l, r = Array.isArray(e);
-    if (Array.isArray(l)) {
-      for (let a = 0; a < l.length; a++)
-        Y(e, [l[a]].concat(t), n);
+function setProperty(state, property, value, deleting = false) {
+  if (!deleting && state[property] === value) return;
+  const prev = state[property],
+    len = state.length;
+  if (value === undefined) delete state[property];else state[property] = value;
+  let nodes = getDataNodes(state),
+    node;
+  if (node = getDataNode(nodes, property, prev)) node.$(() => value);
+  if (Array.isArray(state) && state.length !== len) (node = getDataNode(nodes, "length", len)) && node.$(state.length);
+  (node = nodes._) && node.$();
+}
+function mergeStoreNode(state, value) {
+  const keys = Object.keys(value);
+  for (let i = 0; i < keys.length; i += 1) {
+    const key = keys[i];
+    setProperty(state, key, value[key]);
+  }
+}
+function updateArray(current, next) {
+  if (typeof next === "function") next = next(current);
+  next = unwrap(next);
+  if (Array.isArray(next)) {
+    if (current === next) return;
+    let i = 0,
+      len = next.length;
+    for (; i < len; i++) {
+      const value = next[i];
+      if (current[i] !== value) setProperty(current, i, value);
+    }
+    setProperty(current, "length", len);
+  } else mergeStoreNode(current, next);
+}
+function updatePath(current, path, traversed = []) {
+  let part,
+    prev = current;
+  if (path.length > 1) {
+    part = path.shift();
+    const partType = typeof part,
+      isArray = Array.isArray(current);
+    if (Array.isArray(part)) {
+      for (let i = 0; i < part.length; i++) {
+        updatePath(current, [part[i]].concat(path), traversed);
+      }
       return;
-    } else if (r && s === "function") {
-      for (let a = 0; a < e.length; a++)
-        l(e[a], a) && Y(e, [a].concat(t), n);
+    } else if (isArray && partType === "function") {
+      for (let i = 0; i < current.length; i++) {
+        if (part(current[i], i)) updatePath(current, [i].concat(path), traversed);
+      }
       return;
-    } else if (r && s === "object") {
+    } else if (isArray && partType === "object") {
       const {
-        from: a = 0,
-        to: c = e.length - 1,
-        by: d = 1
-      } = l;
-      for (let g = a; g <= c; g += d)
-        Y(e, [g].concat(t), n);
+        from = 0,
+        to = current.length - 1,
+        by = 1
+      } = part;
+      for (let i = from; i <= to; i += by) {
+        updatePath(current, [i].concat(path), traversed);
+      }
       return;
-    } else if (t.length > 1) {
-      Y(e[l], t, [l].concat(n));
+    } else if (path.length > 1) {
+      updatePath(current[part], path, [part].concat(traversed));
       return;
     }
-    i = e[l], n = [l].concat(n);
+    prev = current[part];
+    traversed = [part].concat(traversed);
   }
-  let o = t[0];
-  typeof o == "function" && (o = o(i, n), o === i) || l === void 0 && o == null || (o = J(o), l === void 0 || W(i) && W(o) && !Array.isArray(o) ? Ye(i, o) : X(e, l, o));
-}
-function Qe(...[e, t]) {
-  const n = J(e || {}), l = Array.isArray(n), i = Je(n);
-  function o(...s) {
-    at(() => {
-      l && s.length === 1 ? Jt(n, s[0]) : Y(n, s);
+  let value = path[0];
+  if (typeof value === "function") {
+    value = value(prev, traversed);
+    if (value === prev) return;
+  }
+  if (part === undefined && value == undefined) return;
+  value = unwrap(value);
+  if (part === undefined || isWrappable(prev) && isWrappable(value) && !Array.isArray(value)) {
+    mergeStoreNode(prev, value);
+  } else setProperty(current, part, value);
+}
+function createStore(...[store, options]) {
+  const unwrappedStore = unwrap(store || {});
+  const isArray = Array.isArray(unwrappedStore);
+  const wrappedStore = wrap$1(unwrappedStore);
+  function setStore(...args) {
+    batch(() => {
+      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
     });
   }
-  return [i, o];
-}
-const ie = /* @__PURE__ */ new WeakMap(), qe = {
-  get(e, t) {
-    if (t === le)
-      return e;
-    const n = e[t];
-    let l;
-    return W(n) ? ie.get(n) || (ie.set(n, l = new Proxy(n, qe)), l) : n;
+  return [wrappedStore, setStore];
+}
+const producers = new WeakMap();
+const setterTraps = {
+  get(target, property) {
+    if (property === $RAW) return target;
+    const value = target[property];
+    let proxy;
+    return isWrappable(value) ? producers.get(value) || (producers.set(value, proxy = new Proxy(value, setterTraps)), proxy) : value;
   },
-  set(e, t, n) {
-    return X(e, t, J(n)), !0;
+  set(target, property, value) {
+    setProperty(target, property, unwrap(value));
+    return true;
   },
-  deleteProperty(e, t) {
-    return X(e, t, void 0, !0), !0;
+  deleteProperty(target, property) {
+    setProperty(target, property, undefined, true);
+    return true;
   }
 };
-function Xt(e) {
-  return (t) => {
-    if (W(t)) {
-      let n;
-      (n = ie.get(t)) || ie.set(t, n = new Proxy(t, qe)), e(n);
+function produce(fn) {
+  return state => {
+    if (isWrappable(state)) {
+      let proxy;
+      if (!(proxy = producers.get(state))) {
+        producers.set(state, proxy = new Proxy(state, setterTraps));
+      }
+      fn(proxy);
     }
-    return t;
+    return state;
   };
 }
-const [S, se] = Qe({
+
+const [uiStore, setUiStore] = createStore({
   selectedCall: null,
   selectedRequest: null,
   selectedTab: null,
   selectedSubitem: null
-}), ue = `
+});
+
+const ellipsis = `
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-wrap: norma;
   max-width: 100%;
-`, Gt = {
+`;
+
+const justifyValues$1 = {
   left: "flex-start",
   center: "center",
   right: "flex-end",
   spaceBetween: "space-between",
   spaceAround: "space-around",
   spaceEvenly: "space-evenly"
-}, Yt = {
+};
+const alignValues$1 = {
   top: "flex-start",
   bottom: "flex-end",
   center: "center",
   stretch: "stretch"
-}, B = ({
-  justify: e = "left",
-  align: t = "center",
-  gap: n
+};
+const inline = ({
+  justify = "left",
+  align = "center",
+  gap
 } = {}) => `
     display: flex;
-    column-gap: ${n}px;
+    column-gap: ${gap}px;
     flex-direction: row;
-    justify-content: ${Gt[e]};
-    align-items: ${Yt[t]};
-  `, Qt = {
+    justify-content: ${justifyValues$1[justify]};
+    align-items: ${alignValues$1[align]};
+  `;
+
+const justifyValues = {
   top: "flex-start",
   center: "center",
   bottom: "flex-end",
   spaceBetween: "space-between",
   spaceAround: "space-around",
   spaceEvenly: "space-evenly"
-}, qt = {
+};
+const alignValues = {
   left: "flex-start",
   right: "flex-end",
   center: "center",
   stretch: "stretch"
-}, N = ({
-  justify: e = "top",
-  align: t = "stretch",
-  gap: n = 0
+};
+const stack = ({
+  justify = "top",
+  align = "stretch",
+  gap = 0
 } = {}) => `
-    row-gap: ${n}px;
+    row-gap: ${gap}px;
     display: flex;
     flex-direction: column;
-    justify-content: ${Qt[e]};
-    align-items: ${qt[t]};
+    justify-content: ${justifyValues[justify]};
+    align-items: ${alignValues[align]};
   `;
-function en(e) {
-  if (e.length < 4)
+
+function hexToRgb(hex) {
+  if (hex.length < 4)
     throw new Error("Invalid hex value");
-  return (e.replace(
+  return (hex.replace(
     /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
-    (t, n, l, i) => `#${n}${n}${l}${l}${i}${i}`
-  ).substring(1).match(/.{2}/g) || []).map((t) => parseInt(t, 16));
-}
-function tn(e) {
-  return Object.entries(e);
-}
-const te = document.documentElement.style;
-let Te = 1;
-function nn(e) {
-  const t = {};
-  for (const [n, l] of tn(e)) {
-    const [i, o, s] = en(l), r = `c${Te}`;
-    Te++, te.setProperty(`--${r}-r`, String(i)), te.setProperty(`--${r}-g`, String(o)), te.setProperty(`--${r}-b`, String(s)), te.setProperty(`--${r}`, l), t[n] = {
-      red: i,
-      green: o,
-      blue: s,
-      var: `var(--${r})`,
-      raw: l,
-      alpha: (a) => `rgba(var(--${r}-r), var(--${r}-g), var(--${r}-b), ${a})`,
-      darker: (a, c) => {
-        const d = a / 100;
-        return `${c ? "rgba" : "rgb"}(${[
-          `calc(var(--${r}-r) - var(--${r}-r) * ${d})`,
-          `calc(var(--${r}-g) - var(--${r}-g) * ${d})`,
-          `calc(var(--${r}-b) - var(--${r}-b) * ${d})`
-        ].join(",")}${c !== void 0 ? `, ${c}` : ""})`;
+    (m, r, g, b) => `#${r}${r}${g}${g}${b}${b}`
+  ).substring(1).match(/.{2}/g) || []).map((x) => parseInt(x, 16));
+}
+
+function typedObjectEntries(obj) {
+  return Object.entries(obj);
+}
+
+const rootStyle = document.documentElement.style;
+let autoId = 1;
+function createThemeColors(colors) {
+  const themeColors = {};
+  for (const [name, color] of typedObjectEntries(colors)) {
+    const [red, green, blue] = hexToRgb(color);
+    const colorId = `c${autoId}`;
+    autoId++;
+    rootStyle.setProperty(`--${colorId}-r`, String(red));
+    rootStyle.setProperty(`--${colorId}-g`, String(green));
+    rootStyle.setProperty(`--${colorId}-b`, String(blue));
+    rootStyle.setProperty(`--${colorId}`, color);
+    themeColors[name] = {
+      red,
+      green,
+      blue,
+      var: `var(--${colorId})`,
+      raw: color,
+      alpha: (alpha) => `rgba(var(--${colorId}-r), var(--${colorId}-g), var(--${colorId}-b), ${alpha})`,
+      darker: (percentage, alpha) => {
+        const weight = percentage / 100;
+        return `${alpha ? "rgba" : "rgb"}(${[
+          `calc(var(--${colorId}-r) - var(--${colorId}-r) * ${weight})`,
+          `calc(var(--${colorId}-g) - var(--${colorId}-g) * ${weight})`,
+          `calc(var(--${colorId}-b) - var(--${colorId}-b) * ${weight})`
+        ].join(",")}${alpha !== void 0 ? `, ${alpha}` : ""})`;
       },
-      lighter: (a, c) => {
-        const d = a / 100;
-        return `${c ? "rgba" : "rgb"}(${[
-          `calc(var(--${r}-r) + (255 - var(--${r}-r)) * ${d})`,
-          `calc(var(--${r}-g) + (255 - var(--${r}-g)) * ${d})`,
-          `calc(var(--${r}-b) + (255 - var(--${r}-b)) * ${d})`
-        ].join(",")}${c !== void 0 ? `, ${c}` : ""})`;
+      lighter: (percentage, alpha) => {
+        const weight = percentage / 100;
+        return `${alpha ? "rgba" : "rgb"}(${[
+          `calc(var(--${colorId}-r) + (255 - var(--${colorId}-r)) * ${weight})`,
+          `calc(var(--${colorId}-g) + (255 - var(--${colorId}-g)) * ${weight})`,
+          `calc(var(--${colorId}-b) + (255 - var(--${colorId}-b)) * ${weight})`
+        ].join(",")}${alpha !== void 0 ? `, ${alpha}` : ""})`;
       }
     };
   }
-  return t;
+  return themeColors;
 }
-const h = nn({
+
+const colors = createThemeColors({
   bgPrimary: "#0F172A",
   bgSecondary: "#1E293B",
   textPrimary: "#fff",
@@ -762,65 +1492,81 @@ const h = nn({
   bg: "#EAEFFF",
   white: "#fff",
   black: "#000"
-}), L = {
+});
+const fonts = {
   primary: "Work Sans, sans-serif",
   decorative: '"Fira Code", monospaced'
 };
-function rn(e, t, n) {
-  if (!e)
-    return t;
-  const l = [], i = new Map(e.map((o) => [o[n], o]));
-  for (const o of t) {
-    const s = i.get(o[n]);
-    s && Ue(s, o) ? l.push(s) : l.push(o);
+
+function reconcile(original, newItems, key) {
+  if (!original) {
+    return newItems;
+  }
+  const final = [];
+  const originalMap = new Map(original.map((item) => [item[key], item]));
+  for (const item of newItems) {
+    const currentValue = originalMap.get(item[key]);
+    if (!currentValue) {
+      final.push(item);
+    } else if (dequal(currentValue, item)) {
+      final.push(currentValue);
+    } else {
+      final.push(item);
+    }
   }
-  return l;
+  return final;
 }
-function et(e, t) {
-  return m((n) => rn(n, typeof e == "function" ? e() : e, t));
+function createReconciledArray(array, key) {
+  return createMemo((prev) => {
+    return reconcile(prev, typeof array === "function" ? array() : array, key);
+  });
 }
-function we(e) {
-  const [t, n] = re(e);
+function createSignalRef(initialValue) {
+  const [value, setValue] = createSignal(initialValue);
   return {
     get value() {
-      return t();
+      return value();
     },
-    set value(l) {
-      n(() => l);
+    set value(newValue) {
+      setValue(() => newValue);
     },
-    set(l) {
-      n(() => l);
+    set(newValue) {
+      setValue(() => newValue);
     }
   };
 }
-const on = /* @__PURE__ */ $('<div class="tag"></div>'), Ee = /* @__PURE__ */ $("<span></span>"), ln = /* @__PURE__ */ $('<div><div class="call"></div></div>'), sn = _`
+
+const _tmpl$$9 = /*#__PURE__*/template(`<div class="tag"></div>`),
+  _tmpl$2$7 = /*#__PURE__*/template(`<span></span>`),
+  _tmpl$3$5 = /*#__PURE__*/template(`<div><div class="call"></div></div>`);
+const menuItemStyle = u`
   &&& {
     font-size: 14px;
-    ${N()};
+    ${stack()};
 
     > .call {
       padding: 4px 12px;
-      ${B()};
+      ${inline()};
       opacity: 0.8;
 
       &.selected {
         opacity: 1;
-        background-color: ${h.secondary.alpha(0.16)};
+        background-color: ${colors.secondary.alpha(0.16)};
       }
 
       > button {
         text-align: left;
-        ${B({
+        ${inline({
   gap: 8
 })};
 
         > .tag {
           font-weight: 600;
-          font-family: ${L.decorative};
+          font-family: ${fonts.decorative};
         }
 
         > span {
-          ${ue};
+          ${ellipsis};
           flex-shrink: 1;
         }
       }
@@ -831,7 +1577,7 @@ const on = /* @__PURE__ */ $('<div class="tag"></div>'), Ee = /* @__PURE__ */ $(
       padding: 4px 12px;
       padding-left: 14px;
       margin-left: 16px;
-      border-left: 1px solid ${h.white.alpha(0.1)};
+      border-left: 1px solid ${colors.white.alpha(0.1)};
 
       span {
         opacity: 0.6;
@@ -842,7 +1588,7 @@ const on = /* @__PURE__ */ $('<div class="tag"></div>'), Ee = /* @__PURE__ */ $(
 
       &.selected span {
         opacity: 1;
-        background-color: ${h.secondary.alpha(0.16)};
+        background-color: ${colors.secondary.alpha(0.16)};
       }
 
       &:first-of-type {
@@ -851,7 +1597,7 @@ const on = /* @__PURE__ */ $('<div class="tag"></div>'), Ee = /* @__PURE__ */ $(
 
       &:last-of-type {
         border-radius: 0 0 0 10px;
-        border-bottom: 1px solid ${h.white.alpha(0.1)};
+        border-bottom: 1px solid ${colors.white.alpha(0.1)};
         padding-bottom: 10px;
         margin-bottom: 4px;
       }
@@ -866,238 +1612,317 @@ const on = /* @__PURE__ */ $('<div class="tag"></div>'), Ee = /* @__PURE__ */ $(
       }
     }
   }
-`, an = (e) => {
-  const t = () => e.item, n = () => e.currentCallId;
-  ct(e, ["item", "currentCallId"])[1];
-  const l = we(e.item.subitemsWithAlias.length < 4), i = cn(t().type, t().subType);
+`;
+const ApiExplorerMenuItem = props => {
+  const _prop = () => props.item,
+    _prop2 = () => props.currentCallId;
+    splitProps(props, ["item", "currentCallId"])[1];
+  const showSubitems = createSignalRef(props.item.subitemsWithAlias.length < 4);
+  const typeIcon = getTypeIcon(_prop().type, _prop().subType);
   return (() => {
-    const o = ln.cloneNode(!0), s = o.firstChild;
-    return b(o, sn), u(s, p(M, {
+    const _el$ = _tmpl$3$5.cloneNode(true),
+      _el$2 = _el$.firstChild;
+    className(_el$, menuItemStyle);
+    insert(_el$2, createComponent(ButtonElement, {
       onClick: () => {
-        se({
-          selectedCall: t().id,
+        setUiStore({
+          selectedCall: _prop().id,
           selectedSubitem: null
         });
       },
       get children() {
         return [(() => {
-          const r = on.cloneNode(!0);
-          return u(r, () => i.icon), C((a) => {
-            const c = `${t().type}${t().subType ? ` (${t().subType})` : ""}`, d = i.color;
-            return c !== a._v$ && P(r, "title", a._v$ = c), d !== a._v$2 && r.style.setProperty("color", a._v$2 = d), a;
+          const _el$3 = _tmpl$$9.cloneNode(true);
+          insert(_el$3, () => typeIcon.icon);
+          createRenderEffect(_p$ => {
+            const _v$ = `${_prop().type}${_prop().subType ? ` (${_prop().subType})` : ''}`,
+              _v$2 = typeIcon.color;
+            _v$ !== _p$._v$ && setAttribute(_el$3, "title", _p$._v$ = _v$);
+            _v$2 !== _p$._v$2 && _el$3.style.setProperty("color", _p$._v$2 = _v$2);
+            return _p$;
           }, {
-            _v$: void 0,
-            _v$2: void 0
-          }), r;
+            _v$: undefined,
+            _v$2: undefined
+          });
+          return _el$3;
         })(), (() => {
-          const r = Ee.cloneNode(!0);
-          return u(r, () => t().name), C(() => P(r, "title", t().name)), r;
+          const _el$4 = _tmpl$2$7.cloneNode(true);
+          insert(_el$4, () => _prop().name);
+          createRenderEffect(() => setAttribute(_el$4, "title", _prop().name));
+          return _el$4;
         })()];
       }
-    }), null), u(s, (() => {
-      const r = m(() => t().subitemsWithAlias.length > 0);
-      return () => r() && p(M, {
-        class: "expand-button",
+    }), null);
+    insert(_el$2, (() => {
+      const _c$ = createMemo(() => _prop().subitemsWithAlias.length > 0);
+      return () => _c$() && createComponent(ButtonElement, {
+        "class": "expand-button",
         get classList() {
           return {
-            expanded: l.value
+            expanded: showSubitems.value
           };
         },
         onClick: () => {
-          l.value = !l.value;
+          showSubitems.value = !showSubitems.value;
         },
         get children() {
-          return p(de, {
+          return createComponent(Icon, {
             name: "caret-down"
           });
         }
       });
-    })(), null), u(o, p(ae, {
+    })(), null);
+    insert(_el$, createComponent(Show, {
       get when() {
-        return l.value;
+        return showSubitems.value;
       },
       get children() {
-        return p(F, {
+        return createComponent(For, {
           get each() {
-            return t().subitemsWithAlias;
+            return _prop().subitemsWithAlias;
           },
-          children: (r) => p(M, {
-            class: "subitem",
+          children: subitem => createComponent(ButtonElement, {
+            "class": "subitem",
             get classList() {
               return {
-                selected: n() === t().id && S.selectedSubitem === r
+                selected: _prop2() === _prop().id && uiStore.selectedSubitem === subitem
               };
             },
             onClick: () => {
-              se({
-                selectedCall: t().id,
-                selectedSubitem: r
+              setUiStore({
+                selectedCall: _prop().id,
+                selectedSubitem: subitem
               });
             },
             get children() {
-              const a = Ee.cloneNode(!0);
-              return u(a, r), a;
+              const _el$5 = _tmpl$2$7.cloneNode(true);
+              insert(_el$5, subitem);
+              return _el$5;
             }
           })
         });
       }
-    }), null), C(() => s.classList.toggle("selected", n() ? n() === t().id : e.index === 0)), o;
+    }), null);
+    createRenderEffect(() => _el$2.classList.toggle("selected", !!(_prop2() ? _prop2() === _prop().id : props.index === 0)));
+    return _el$;
   })();
 };
-function cn(e, t) {
-  let n = "", l = "";
-  return e === "fetch" ? (n = "F", l = "#FDE047") : t ? t === "create" ? (n = "C", l = "#6EE7B7") : t === "update" ? (n = "U", l = "#A78BFA") : t === "delete" ? (n = "D", l = "#E53558") : (n = t[0]?.toUpperCase() || "?", l = "#FDE047") : (n = "M", l = "#A78BFA"), {
-    icon: n,
-    color: l
+function getTypeIcon(type, subType) {
+  let icon = '';
+  let color = '';
+  if (type === 'fetch') {
+    icon = 'F';
+    color = '#FDE047';
+  } else {
+    if (subType) {
+      if (subType === 'create') {
+        icon = 'C';
+        color = '#6EE7B7';
+      } else if (subType === 'update') {
+        icon = 'U';
+        color = '#A78BFA';
+      } else if (subType === 'delete') {
+        icon = 'D';
+        color = '#E53558';
+      } else {
+        icon = subType[0]?.toUpperCase() || '?';
+        color = '#FDE047';
+      }
+    } else {
+      icon = 'M';
+      color = '#A78BFA';
+    }
+  }
+  return {
+    icon,
+    color
   };
 }
-function Le(e) {
-  if (e == null)
+
+function assertIsNotNullish(value) {
+  if (value === null || value === void 0) {
     throw new Error("Value is null or undefined");
+  }
 }
-function Oe(e, t) {
+
+function tryExpression(expression, onError) {
   try {
-    return e();
-  } catch (n) {
-    return t && t(n), null;
+    return expression();
+  } catch (error) {
+    if (onError) {
+      onError(error);
+    }
+    return null;
   }
 }
-function dn(e, t) {
-  const n = ft(t);
-  return un(e, n);
+
+function matchURLPattern(url, pattern) {
+  const regex = parse(pattern);
+  return exec(url, regex);
 }
-function un(e, t) {
-  let n = 0;
-  const l = {}, i = t.pattern.exec(e);
-  if (!i)
+function exec(path, result) {
+  let i = 0;
+  const out = {};
+  const matches = result.pattern.exec(path);
+  if (!matches)
     return null;
-  for (; n < t.keys.length; )
-    l[t.keys[n]] = i[++n] || null;
-  return l;
+  while (i < result.keys.length) {
+    out[result.keys[i]] = matches[++i] || null;
+  }
+  return out;
 }
-function tt(e) {
-  return e ? e.slice().reverse() : [];
+
+function reverseCopy(array) {
+  if (!array)
+    return [];
+  return array.slice().reverse();
 }
-function fn(...e) {
-  const t = [];
-  for (const n of e)
-    n != null && t.push(...n);
-  return t;
+function concatNonNullable(...arrays) {
+  const result = [];
+  for (const array of arrays) {
+    if (array !== null && array !== void 0) {
+      result.push(...array);
+    }
+  }
+  return result;
 }
-function pn(e) {
-  return e.filter((t) => t != null);
+function filterNonNullableElements(array) {
+  return array.filter((item) => item !== null && item !== void 0);
 }
-const [H, gn] = Qe({
+
+const [callsStore, setCallsStore] = createStore({
   calls: {}
 });
-let ve = {
+let config = {
   callsProcessor: []
 };
-function hn(e) {
-  ve = {
-    ...ve,
-    ...e
+function setConfig(newConfig) {
+  config = {
+    ...config,
+    ...newConfig
   };
 }
-function Vr(e) {
-  const t = e.startTime || Date.now();
+function addCall(request) {
+  const startTime = request.startTime || Date.now();
   return ({
-    isError: n,
-    status: l,
-    response: i,
-    metadata: o,
-    tags: s
+    isError,
+    status,
+    response,
+    metadata,
+    tags
   }) => {
-    const r = e.duration || Date.now() - t;
-    gn(
-      Xt((a) => {
-        const c = Oe(
-          () => new URL(e.path, "http://localhost")
+    const duration = request.duration || Date.now() - startTime;
+    setCallsStore(
+      produce((draft) => {
+        const pathURL = tryExpression(
+          () => new URL(request.path, "http://localhost")
         );
-        Le(c);
-        const d = c.searchParams.toString() !== "" ? Object.fromEntries(c.searchParams.entries()) : null;
-        let g = null;
-        const f = ve.callsProcessor.find((O) => {
-          if (typeof O.match == "string") {
-            const T = dn(c.pathname, O.match);
-            return T ? (g = T, !0) : !1;
-          } else
-            return O.match({
-              url: c,
-              type: e.type,
-              subType: e.subType
+        assertIsNotNullish(pathURL);
+        const searchParams = pathURL.searchParams.toString() !== "" ? Object.fromEntries(pathURL.searchParams.entries()) : null;
+        let pathParams = null;
+        const relatedConfig = config.callsProcessor.find((processor) => {
+          if (typeof processor.match === "string") {
+            const pattern = matchURLPattern(pathURL.pathname, processor.match);
+            if (pattern) {
+              pathParams = pattern;
+              return true;
+            }
+            return false;
+          } else {
+            return processor.match({
+              url: pathURL,
+              type: request.type,
+              subType: request.subType
             });
-        }), y = f?.callID?.({
-          url: c,
-          type: e.type,
-          subType: e.subType
-        }) || typeof f?.match == "string" && f.match, v = btoa(
-          y || `${c.pathname}|${e.type}${e.subType ? `|${e.subType}` : ""}`
-        ), x = f?.callName, w = typeof x == "function" ? x({
-          url: c,
-          type: e.type,
-          subType: e.subType
-        }) : x;
-        a.calls[v] || (a.calls[v] = {
-          name: w || typeof f?.match == "string" && f.match || c.pathname.replace(/^\//, ""),
-          path: c.pathname.replace(/^\//, ""),
-          lastRequestStartTime: t,
-          requests: [],
-          type: e.type,
-          subType: e.subType
+          }
         });
-        const A = a.calls[v];
-        Le(A), A.requests.length > 100 && A.requests.shift();
-        const k = {
-          id: ut(),
-          duration: r,
-          pathParams: g,
-          isError: n,
-          metadata: o,
-          path: e.path.replace(/^\//, ""),
-          payload: e.payload,
-          response: i,
-          searchParams: d,
-          startTime: t,
-          type: e.type,
-          method: e.method,
-          subType: e.subType,
-          code: l,
-          tags: pn(
-            fn(e.tags, s)
+        const normalizedCallId = relatedConfig?.callID?.({
+          url: pathURL,
+          type: request.type,
+          subType: request.subType
+        }) || typeof relatedConfig?.match === "string" && relatedConfig.match;
+        const callID = btoa(
+          normalizedCallId || `${pathURL.pathname}|${request.type}${request.subType ? `|${request.subType}` : ""}`
+        );
+        const callNameNormalizer = relatedConfig?.callName;
+        const normalizedCallName = typeof callNameNormalizer === "function" ? callNameNormalizer({
+          url: pathURL,
+          type: request.type,
+          subType: request.subType
+        }) : callNameNormalizer;
+        if (!draft.calls[callID]) {
+          draft.calls[callID] = {
+            name: normalizedCallName || typeof relatedConfig?.match === "string" && relatedConfig.match || pathURL.pathname.replace(/^\//, ""),
+            path: pathURL.pathname.replace(/^\//, ""),
+            lastRequestStartTime: startTime,
+            requests: [],
+            type: request.type,
+            subType: request.subType
+          };
+        }
+        const call = draft.calls[callID];
+        assertIsNotNullish(call);
+        if (call.requests.length > 100) {
+          call.requests.shift();
+        }
+        const requestToAdd = {
+          id: nanoid(),
+          duration,
+          pathParams,
+          isError,
+          metadata,
+          path: request.path.replace(/^\//, ""),
+          payload: request.payload,
+          response,
+          searchParams,
+          startTime,
+          type: request.type,
+          method: request.method,
+          subType: request.subType,
+          code: status,
+          tags: filterNonNullableElements(
+            concatNonNullable(request.tags, tags)
           )
-        }, ee = Oe(
-          () => f?.payloadAlias?.(k.payload, k)
+        };
+        const payloadAlias = tryExpression(
+          () => relatedConfig?.payloadAlias?.(requestToAdd.payload, requestToAdd)
         );
-        ee && (k.alias = ee), A.requests.push(k);
+        if (payloadAlias) {
+          requestToAdd.alias = payloadAlias;
+        }
+        call.requests.push(requestToAdd);
       })
     );
   };
 }
-const mn = /* @__PURE__ */ $('<div><h1>API EXPLORER</h1><label><input type="text" placeholder="Search"></label><div></div></div>'), $n = _`
+
+const _tmpl$$8 = /*#__PURE__*/template(`<div><h1>API EXPLORER</h1><label><input type="text" placeholder="Search"></label><div></div></div>`);
+const containerStyle$8 = u`
   &&& {
-    ${N()};
-    border-right: 1px solid ${h.white.alpha(0.1)};
+    ${stack()};
+    border-right: 1px solid ${colors.white.alpha(0.1)};
 
     > h1 {
       font-size: 18px;
       padding-left: 12px;
       padding-top: 10px;
-      font-family: ${L.decorative};
-      color: ${h.secondary.var};
+      font-family: ${fonts.decorative};
+      color: ${colors.secondary.var};
       padding-bottom: 16px;
     }
   }
-`, yn = _`
+`;
+const menuContainerStyle = u`
   &&& {
-    ${N()};
+    ${stack()};
     flex: 1 1;
     overflow-y: auto;
     padding-bottom: 16px;
   }
-`, vn = _`
+`;
+const searchStyle = u`
   &&& {
-    ${B({
+    ${inline({
   gap: 8
 })};
     margin: 0 10px;
@@ -1105,92 +1930,121 @@ const mn = /* @__PURE__ */ $('<div><h1>API EXPLORER</h1><label><input type="text
 
     display: grid;
     grid-template-columns: 14px 1fr;
-    background: ${h.white.alpha(0.05)};
+    background: ${colors.white.alpha(0.05)};
     border-radius: 4px;
     --icon-size: 16px;
     padding: 4px 0;
     padding-left: 6px;
 
     .icon {
-      color: ${h.secondary.var};
+      color: ${colors.secondary.var};
     }
 
     input {
       border: none;
       background: transparent;
-      color: ${h.white.var};
+      color: ${colors.white.var};
 
       &:focus {
         outline: none;
       }
     }
   }
-`, bn = () => {
-  const e = we(""), t = et(() => {
-    const l = Object.entries(H.calls), i = [];
-    for (const [o, s] of l.reverse()) {
-      if (e.value.trim() && !s.name.includes(e.value.toLowerCase()))
+`;
+const ApiExplorerMenu = () => {
+  const search = createSignalRef('');
+  const menuItems = createReconciledArray(() => {
+    const callsEntries = Object.entries(callsStore.calls);
+    const filtered = [];
+    for (const [key, value] of callsEntries.reverse()) {
+      if (search.value.trim() && !value.name.includes(search.value.toLowerCase())) {
         continue;
-      const r = /* @__PURE__ */ new Set();
-      for (const a of s.requests)
-        a.alias && r.add(a.alias);
-      i.push({
-        id: o,
-        subitemsWithAlias: [...r],
-        ...s
+      }
+      const subitemsWithAlias = new Set();
+      for (const request of value.requests) {
+        if (request.alias) {
+          subitemsWithAlias.add(request.alias);
+        }
+      }
+      filtered.push({
+        id: key,
+        subitemsWithAlias: [...subitemsWithAlias],
+        ...value
       });
     }
-    return i;
-  }, "id"), n = m(() => S.selectedCall);
+    return filtered;
+  }, 'id');
+  const _currentCallId = createMemo(() => uiStore.selectedCall);
   return (() => {
-    const l = mn.cloneNode(!0), i = l.firstChild, o = i.nextSibling, s = o.firstChild, r = o.nextSibling;
-    return b(l, $n), b(o, vn), u(o, p(de, {
+    const _el$ = _tmpl$$8.cloneNode(true),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      _el$4 = _el$3.firstChild,
+      _el$5 = _el$3.nextSibling;
+    className(_el$, containerStyle$8);
+    className(_el$3, searchStyle);
+    insert(_el$3, createComponent(Icon, {
       name: "search"
-    }), s), s.$$input = (a) => {
-      e.value = a.currentTarget.value;
-    }, b(r, yn), u(r, p(F, {
+    }), _el$4);
+    _el$4.$$input = e => {
+      search.value = e.currentTarget.value;
+    };
+    className(_el$5, menuContainerStyle);
+    insert(_el$5, createComponent(For, {
       get each() {
-        return t();
+        return menuItems();
       },
-      children: (a, c) => p(an, {
-        get index() {
-          return c();
-        },
-        item: a,
-        get currentCallId() {
-          return n();
-        }
-      })
-    })), C(() => s.value = e.value), l;
+      children: (item, i) => {
+        return createComponent(ApiExplorerMenuItem, {
+          get index() {
+            return i();
+          },
+          item: item,
+          get currentCallId() {
+            return _currentCallId();
+          }
+        });
+      }
+    }));
+    createRenderEffect(() => _el$4.value = search.value);
+    return _el$;
   })();
 };
-ce(["input"]);
-function nt(...e) {
-  const t = [];
-  for (let n = 0; n < e.length; n++) {
-    const l = e[n];
-    if (!l)
+delegateEvents(["input"]);
+
+function cx(...args) {
+  const classNames = [];
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (!arg)
       continue;
-    const i = typeof l;
-    if (i === "string" || i === "number")
-      t.push(l);
-    else if (i === "object")
-      for (let o = 0, s = Object.keys(l); o < s.length; o++)
-        l[s[o]] && t.push(s[o]);
+    const argType = typeof arg;
+    if (argType === "string" || argType === "number") {
+      classNames.push(arg);
+    } else if (argType === "object") {
+      for (let i2 = 0, keys = Object.keys(arg); i2 < keys.length; i2++) {
+        if (arg[keys[i2]]) {
+          classNames.push(keys[i2]);
+        }
+      }
+    }
   }
-  return t.join(" ");
+  return classNames.join(" ");
 }
-const Cn = /* @__PURE__ */ $('<div><div class="content"></div></div>'), xn = /* @__PURE__ */ $("<h1></h1>"), wn = _`
+
+const _tmpl$$7 = /*#__PURE__*/template(`<div><div class="content"></div></div>`),
+  _tmpl$2$6 = /*#__PURE__*/template(`<h1></h1>`);
+const containerStyle$7 = u`
   &&& {
-    ${N()};
+    ${stack()};
 
     > h1 {
       font-size: 14px;
-      color: ${h.secondary.var};
+      color: ${colors.secondary.var};
       letter-spacing: 0.08em;
-      font-family: ${L.decorative};
+      font-family: ${fonts.decorative};
       font-weight: 300;
-      background: ${h.bgPrimary.var};
+      background: ${colors.bgPrimary.var};
       z-index: 1;
       align-self: flex-start;
       position: sticky;
@@ -1206,7 +2060,7 @@ const Cn = /* @__PURE__ */ $('<div><div class="content"></div></div>'), xn = /*
       padding-top: calc(var(--padding-top) + 10px);
       padding-inline: 10px;
       padding-bottom: 10px;
-      background: ${h.white.alpha(0.05)};
+      background: ${colors.white.alpha(0.05)};
       border-radius: 4px;
     }
 
@@ -1214,36 +2068,60 @@ const Cn = /* @__PURE__ */ $('<div><div class="content"></div></div>'), xn = /*
       margin-top: 20px;
     }
   }
-`, E = (e) => (() => {
-  const t = Cn.cloneNode(!0), n = t.firstChild;
-  return u(t, (() => {
-    const l = m(() => !!e.title);
-    return () => l() && (() => {
-      const i = xn.cloneNode(!0);
-      return u(i, () => e.title), i;
-    })();
-  })(), n), u(n, () => e.children), C(() => b(t, nt(wn, e.class))), t;
-})(), _n = `
+`;
+const Section = props => {
+  return (() => {
+    const _el$ = _tmpl$$7.cloneNode(true),
+      _el$2 = _el$.firstChild;
+    insert(_el$, (() => {
+      const _c$ = createMemo(() => !!props.title);
+      return () => _c$() && (() => {
+        const _el$3 = _tmpl$2$6.cloneNode(true);
+        insert(_el$3, () => props.title);
+        return _el$3;
+      })();
+    })(), _el$2);
+    insert(_el$2, () => props.children);
+    createRenderEffect(() => className(_el$, cx(containerStyle$7, props.class)));
+    return _el$;
+  })();
+};
+
+const allowTextSelection = `
   user-select: text;
 
   *, *::before, *::after {
     user-select: text;
   }
 `;
-function Nn(e) {
+
+function multilineEllipsis(breakAtLine) {
   return `
     display: -webkit-box;
     overflow: hidden;
-    -webkit-line-clamp: ${e};
+    -webkit-line-clamp: ${breakAtLine};
     -webkit-box-orient: vertical;
   `;
 }
-const Sn = /* @__PURE__ */ $('<div class="key"><span></span></div>'), kn = /* @__PURE__ */ $('<div class="collapsed"></div>'), An = /* @__PURE__ */ $('<div class="delimiter">[]</div>'), Pn = /* @__PURE__ */ $('<div class="delimiter">{}</div>'), je = /* @__PURE__ */ $('<div class="delimiter"></div>'), Me = /* @__PURE__ */ $('<div class="childs"></div>'), Tn = /* @__PURE__ */ $('<div class="delimiter end">]</div>'), Re = /* @__PURE__ */ $('<div class="child"></div>'), En = /* @__PURE__ */ $('<div class="delimiter end">}</div>'), Ln = /* @__PURE__ */ $('<div class="value" title="Shift + Click to copy value"></div>'), De = /* @__PURE__ */ $('<span class="string-quotes">"</span>'), On = /* @__PURE__ */ $("<div></div>"), jn = _`
+
+const _tmpl$$6 = /*#__PURE__*/template(`<div class="key"><span></span></div>`),
+  _tmpl$2$5 = /*#__PURE__*/template(`<div class="collapsed"></div>`),
+  _tmpl$3$4 = /*#__PURE__*/template(`<div class="delimiter">[]</div>`),
+  _tmpl$4$4 = /*#__PURE__*/template(`<div class="delimiter">{}</div>`),
+  _tmpl$5$2 = /*#__PURE__*/template(`<div class="delimiter"></div>`),
+  _tmpl$6$2 = /*#__PURE__*/template(`<div class="childs"></div>`),
+  _tmpl$7$1 = /*#__PURE__*/template(`<div class="delimiter end">]</div>`),
+  _tmpl$8$1 = /*#__PURE__*/template(`<div class="child"></div>`),
+  _tmpl$9$1 = /*#__PURE__*/template(`<div class="delimiter end">}</div>`),
+  _tmpl$10 = /*#__PURE__*/template(`<div class="value" title="Shift + Click to copy value"></div>`),
+  _tmpl$11 = /*#__PURE__*/template(`<span class="string-quotes">"</span>`),
+  _tmpl$12 = /*#__PURE__*/template(`<div></div>`);
+const containerStyle$6 = u`
   &&& {
-    font-family: ${L.decorative};
+    font-family: ${fonts.decorative};
     font-size: 13px;
-    ${_n};
-    ${N({
+    ${allowTextSelection};
+    ${stack({
   gap: 2
 })};
     padding-left: 8px;
@@ -1253,7 +2131,7 @@ const Sn = /* @__PURE__ */ $('<div class="key"><span></span></div>'), kn = /* @_
       width: 16px;
       display: inline-block;
       vertical-align: middle;
-      color: ${h.white.alpha(0.5)};
+      color: ${colors.white.alpha(0.5)};
 
       &:not(.expanded) .icon {
         transform: rotate(-90deg);
@@ -1261,18 +2139,18 @@ const Sn = /* @__PURE__ */ $('<div class="key"><span></span></div>'), kn = /* @_
     }
 
     .show-all {
-      color: ${h.white.alpha(0.5)};
+      color: ${colors.white.alpha(0.5)};
       text-align: left;
     }
 
     .childs {
-      ${N({
+      ${stack({
   gap: 2
 })};
     }
 
     .delimiter {
-      color: ${h.white.alpha(0.5)};
+      color: ${colors.white.alpha(0.5)};
       margin-top: 1px;
       margin-bottom: 1px;
 
@@ -1286,13 +2164,13 @@ const Sn = /* @__PURE__ */ $('<div class="key"><span></span></div>'), kn = /* @_
     .childs {
       padding-left: 20px;
       grid-column: 1 / span 3;
-      border-left: 1px solid ${h.white.alpha(0.05)};
+      border-left: 1px solid ${colors.white.alpha(0.05)};
 
       > .value {
         &::after {
           content: ',';
           opacity: 0.5;
-          color: ${h.white.var};
+          color: ${colors.white.var};
         }
       }
     }
@@ -1304,22 +2182,22 @@ const Sn = /* @__PURE__ */ $('<div class="key"><span></span></div>'), kn = /* @_
       .key {
         color: #a5d6ff;
         margin-right: 5px;
-        ${B({
-  align: "top"
+        ${inline({
+  align: 'top'
 })};
 
         span {
           flex-shrink: 1;
-          ${ue};
+          ${ellipsis};
         }
 
         &.index {
-          color: ${h.success.alpha(0.7)};
+          color: ${colors.success.alpha(0.7)};
         }
 
         &::after {
           content: ':';
-          color: ${h.secondary.alpha(0.5)};
+          color: ${colors.secondary.alpha(0.5)};
         }
       }
     }
@@ -1330,180 +2208,254 @@ const Sn = /* @__PURE__ */ $('<div class="key"><span></span></div>'), kn = /* @_
 
     .value {
       word-wrap: break-word;
-      ${Nn(5)};
+      ${multilineEllipsis(5)};
     }
 
     [data-type='number'] {
-      color: ${h.primary.var};
+      color: ${colors.primary.var};
     }
 
     [data-type='boolean'] {
-      color: ${h.warning.var};
+      color: ${colors.warning.var};
     }
 
     [data-type='object'],
     [data-type='undefined'] {
-      color: ${h.white.alpha(0.6)};
+      color: ${colors.white.alpha(0.6)};
     }
 
     .collapsed {
-      color: ${h.white.alpha(0.5)};
+      color: ${colors.white.alpha(0.5)};
     }
   }
-`, Mn = new Intl.NumberFormat("en-US"), K = 14, be = (e) => {
-  let [t, n] = re(!(e.indent > 0 && e.compact)), [l, i] = re(!e.compact);
-  return m(() => {
-    const o = e.value, s = Array.isArray(o), r = !s && typeof o == "object" && o !== null, a = e.key !== void 0 || e.index !== void 0, c = s && o.length > 0 || r && Object.keys(o).length > 0, d = c && p(M, {
+`;
+const numberFormatter = new Intl.NumberFormat('en-US');
+const compactMaxChilds = 14;
+const ValueItem = props => {
+  let [_expanded, _setexpanded] = createSignal(props.indent > 0 && props.compact ? false : true);
+  let [_showAllChilds, _setshowAllChilds] = createSignal(!props.compact);
+  return createMemo(() => {
+    const value = props.value;
+    const valueIsArray = Array.isArray(value);
+    const valueIsObject = !valueIsArray && typeof value === 'object' && value !== null;
+    const hasKey = props.key !== undefined || props.index !== undefined;
+    const showExpandButton = valueIsArray && value.length > 0 || valueIsObject && Object.keys(value).length > 0;
+    const toggleExpanded = showExpandButton && createComponent(ButtonElement, {
       onClick: () => {
-        n(() => !t());
+        _setexpanded(() => !_expanded());
       },
       get classList() {
         return {
-          expanded: t()
+          expanded: _expanded()
         };
       },
-      class: "expand-button",
+      "class": "expand-button",
       get children() {
-        return p(de, {
+        return createComponent(Icon, {
           name: "caret-down",
           size: 14
         });
       }
     });
-    return [a && (() => {
-      const g = Sn.cloneNode(!0), f = g.firstChild;
-      return g.$$click = (y) => {
-        y.shiftKey && ne(JSON.stringify(o));
-      }, u(g, s || r ? d : null, f), u(f, () => e.key || e.index), C((y) => {
-        const v = `${e.key ? `${e.key}
-` : ""}Shift + Click to copy value`, x = e.index !== void 0;
-        return v !== y._v$ && P(g, "title", y._v$ = v), x !== y._v$2 && g.classList.toggle("index", y._v$2 = x), y;
+    return [hasKey && (() => {
+      const _el$ = _tmpl$$6.cloneNode(true),
+        _el$2 = _el$.firstChild;
+      _el$.$$click = e => {
+        if (e.shiftKey) {
+          copyToClipboard(JSON.stringify(value));
+        }
+      };
+      insert(_el$, valueIsArray || valueIsObject ? toggleExpanded : null, _el$2);
+      insert(_el$2, () => props.key || props.index);
+      createRenderEffect(_p$ => {
+        const _v$ = `${props.key ? `${props.key}\n` : ''}Shift + Click to copy value`,
+          _v$2 = !!(props.index !== undefined);
+        _v$ !== _p$._v$ && setAttribute(_el$, "title", _p$._v$ = _v$);
+        _v$2 !== _p$._v$2 && _el$.classList.toggle("index", _p$._v$2 = _v$2);
+        return _p$;
       }, {
-        _v$: void 0,
-        _v$2: void 0
-      }), g;
-    })(), m((() => {
-      const g = m(() => !!(a && c && !t()));
-      return () => g() ? (() => {
-        const f = kn.cloneNode(!0);
-        return u(f, () => s ? `[…] ${o.length} items` : `{…} ${Object.keys(o).length} properties`), f;
-      })() : (() => s && o.length === 0 ? An.cloneNode(!0) : r && Object.keys(o).length === 0 ? Pn.cloneNode(!0) : s ? [(() => {
-        const f = je.cloneNode(!0);
-        return oe(f, "click", a ? void 0 : (y) => {
-          y.shiftKey && ne(JSON.stringify(o));
-        }, !0), P(f, "title", a ? void 0 : "Shift + Click to copy value"), u(f, !a && d, null), u(f, () => t() ? "[" : `[…] ${o.length} items`, null), f;
-      })(), m((() => {
-        const f = m(() => !!t());
-        return () => f() && [(() => {
-          const y = Me.cloneNode(!0);
-          return u(y, () => {
-            let v = o;
-            const x = v.length;
-            return l() || (v = v.slice(0, K)), [m(() => v.map((w, A) => (() => {
-              const k = Re.cloneNode(!0);
-              return u(k, p(be, {
-                value: w,
-                get indent() {
-                  return e.indent + 1;
-                },
-                index: A,
-                get compact() {
-                  return e.compact;
-                }
-              })), k;
-            })())), m((() => {
-              const w = m(() => !l() && x > K);
-              return () => w() && p(M, {
-                onClick: () => {
-                  i(() => !0);
-                },
-                class: "show-all",
-                get children() {
-                  return ["…show all (+", x - K, ")"];
+        _v$: undefined,
+        _v$2: undefined
+      });
+      return _el$;
+    })(), createMemo((() => {
+      const _c$ = createMemo(() => !!(hasKey && showExpandButton && !_expanded()));
+      return () => _c$() ? (() => {
+        const _el$3 = _tmpl$2$5.cloneNode(true);
+        insert(_el$3, () => valueIsArray ? `[…] ${value.length} items` : `{…} ${Object.keys(value).length} properties`);
+        return _el$3;
+      })() : (() => {
+        if (valueIsArray && value.length === 0) {
+          return _tmpl$3$4.cloneNode(true);
+        }
+        if (valueIsObject && Object.keys(value).length === 0) {
+          return _tmpl$4$4.cloneNode(true);
+        }
+        if (valueIsArray) {
+          return [(() => {
+            const _el$6 = _tmpl$5$2.cloneNode(true);
+            addEventListener(_el$6, "click", !hasKey ? e => {
+              if (e.shiftKey) {
+                copyToClipboard(JSON.stringify(value));
+              }
+            } : undefined, true);
+            setAttribute(_el$6, "title", !hasKey ? 'Shift + Click to copy value' : undefined);
+            insert(_el$6, !hasKey && toggleExpanded, null);
+            insert(_el$6, () => _expanded() ? '[' : `[…] ${value.length} items`, null);
+            return _el$6;
+          })(), createMemo((() => {
+            const _c$2 = createMemo(() => !!_expanded());
+            return () => _c$2() && [(() => {
+              const _el$7 = _tmpl$6$2.cloneNode(true);
+              insert(_el$7, () => {
+                let items = value;
+                const totalSize = items.length;
+                if (!_showAllChilds()) {
+                  items = items.slice(0, compactMaxChilds);
                 }
+                return [createMemo(() => items.map((item, index) => (() => {
+                  const _el$9 = _tmpl$8$1.cloneNode(true);
+                  insert(_el$9, createComponent(ValueItem, {
+                    value: item,
+                    get indent() {
+                      return props.indent + 1;
+                    },
+                    index: index,
+                    get compact() {
+                      return props.compact;
+                    }
+                  }));
+                  return _el$9;
+                })())), createMemo((() => {
+                  const _c$3 = createMemo(() => !!(!_showAllChilds() && totalSize > compactMaxChilds));
+                  return () => _c$3() && createComponent(ButtonElement, {
+                    onClick: () => {
+                      _setshowAllChilds(() => true);
+                    },
+                    "class": "show-all",
+                    get children() {
+                      return ["\u2026show all (+", totalSize - compactMaxChilds, ")"];
+                    }
+                  });
+                })())];
               });
-            })())];
-          }), y;
-        })(), Tn.cloneNode(!0)];
-      })())] : r ? [(() => {
-        const f = je.cloneNode(!0);
-        return oe(f, "click", a ? void 0 : (y) => {
-          y.shiftKey && ne(JSON.stringify(o));
-        }, !0), P(f, "title", a ? void 0 : "Shift + Click to copy value"), u(f, !a && d, null), u(f, (() => {
-          const y = m(() => !!t());
-          return () => y() ? "{" : `{…} ${Object.keys(o).length} properties`;
-        })(), null), f;
-      })(), m((() => {
-        const f = m(() => !!t());
-        return () => f() && [(() => {
-          const y = Me.cloneNode(!0);
-          return u(y, () => {
-            let v = Object.entries(o);
-            const x = v.length;
-            return l() || (v = v.slice(0, K)), [m(() => v.map(([w, A]) => (() => {
-              const k = Re.cloneNode(!0);
-              return u(k, p(be, {
-                value: A,
-                key: w,
-                get indent() {
-                  return e.indent + 1;
-                },
-                get compact() {
-                  return e.compact;
-                }
-              })), k;
-            })())), m((() => {
-              const w = m(() => !l() && x > K);
-              return () => w() && p(M, {
-                onClick: () => {
-                  i(() => !0);
-                },
-                class: "show-all",
-                get children() {
-                  return ["…show all (+", x - K, ")"];
+              return _el$7;
+            })(), _tmpl$7$1.cloneNode(true)];
+          })())];
+        }
+        if (valueIsObject) {
+          return [(() => {
+            const _el$10 = _tmpl$5$2.cloneNode(true);
+            addEventListener(_el$10, "click", !hasKey ? e => {
+              if (e.shiftKey) {
+                copyToClipboard(JSON.stringify(value));
+              }
+            } : undefined, true);
+            setAttribute(_el$10, "title", !hasKey ? 'Shift + Click to copy value' : undefined);
+            insert(_el$10, !hasKey && toggleExpanded, null);
+            insert(_el$10, (() => {
+              const _c$4 = createMemo(() => !!_expanded());
+              return () => _c$4() ? '{' : `{…} ${Object.keys(value).length} properties`;
+            })(), null);
+            return _el$10;
+          })(), createMemo((() => {
+            const _c$5 = createMemo(() => !!_expanded());
+            return () => _c$5() && [(() => {
+              const _el$11 = _tmpl$6$2.cloneNode(true);
+              insert(_el$11, () => {
+                let entries = Object.entries(value);
+                const totalSize = entries.length;
+                if (!_showAllChilds()) {
+                  entries = entries.slice(0, compactMaxChilds);
                 }
+                return [createMemo(() => entries.map(([key, objValue]) => (() => {
+                  const _el$13 = _tmpl$8$1.cloneNode(true);
+                  insert(_el$13, createComponent(ValueItem, {
+                    value: objValue,
+                    key: key,
+                    get indent() {
+                      return props.indent + 1;
+                    },
+                    get compact() {
+                      return props.compact;
+                    }
+                  }));
+                  return _el$13;
+                })())), createMemo((() => {
+                  const _c$6 = createMemo(() => !!(!_showAllChilds() && totalSize > compactMaxChilds));
+                  return () => _c$6() && createComponent(ButtonElement, {
+                    onClick: () => {
+                      _setshowAllChilds(() => true);
+                    },
+                    "class": "show-all",
+                    get children() {
+                      return ["\u2026show all (+", totalSize - compactMaxChilds, ")"];
+                    }
+                  });
+                })())];
               });
-            })())];
-          }), y;
-        })(), En.cloneNode(!0)];
-      })())] : (() => {
-        const f = Ln.cloneNode(!0);
-        return f.$$click = (y) => {
-          y.shiftKey && ne(String(o));
-        }, P(f, "data-type", typeof o), u(f, typeof o == "string" && De.cloneNode(!0), null), u(f, () => typeof o == "number" ? Mn.format(o) : String(o), null), u(f, typeof o == "string" && De.cloneNode(!0), null), f;
-      })())();
+              return _el$11;
+            })(), _tmpl$9$1.cloneNode(true)];
+          })())];
+        }
+        return (() => {
+          const _el$14 = _tmpl$10.cloneNode(true);
+          _el$14.$$click = e => {
+            if (e.shiftKey) {
+              copyToClipboard(String(value));
+            }
+          };
+          setAttribute(_el$14, "data-type", typeof value);
+          insert(_el$14, typeof value === 'string' && _tmpl$11.cloneNode(true), null);
+          insert(_el$14, () => typeof value === 'number' ? numberFormatter.format(value) : String(value), null);
+          insert(_el$14, typeof value === 'string' && _tmpl$11.cloneNode(true), null);
+          return _el$14;
+        })();
+      })();
     })())];
   });
-}, R = (e) => (() => {
-  const t = On.cloneNode(!0);
-  return b(t, jn), u(t, p(be, {
-    get value() {
-      return e.value;
-    },
-    indent: 0,
-    get compact() {
-      return !!e.compact;
-    }
-  })), t;
-})();
-async function ne(e) {
-  await navigator.clipboard.writeText(e), alert("Copied to clipboard");
+};
+const ValueVisualizer = props => {
+  return (() => {
+    const _el$17 = _tmpl$12.cloneNode(true);
+    className(_el$17, containerStyle$6);
+    insert(_el$17, createComponent(ValueItem, {
+      get value() {
+        return props.value;
+      },
+      indent: 0,
+      get compact() {
+        return !!props.compact;
+      }
+    }));
+    return _el$17;
+  })();
+};
+async function copyToClipboard(text) {
+  await navigator.clipboard.writeText(text);
+  alert('Copied to clipboard');
 }
-ce(["click"]);
-let Rn = 0;
-function Dn() {
-  return Rn++;
+delegateEvents(["click"]);
+
+let id = 0;
+function autoIncrementId() {
+  return id++;
 }
-const In = /* @__PURE__ */ $("<label></label>"), zn = /* @__PURE__ */ $('<div><div class="inputContainer"><select></select></div></div>'), Fn = /* @__PURE__ */ $('<option value="">-- select an option --</option>'), Bn = /* @__PURE__ */ $("<option></option>"), Hn = _`
+
+const _tmpl$$5 = /*#__PURE__*/template(`<label></label>`),
+  _tmpl$2$4 = /*#__PURE__*/template(`<div><div class="inputContainer"><select></select></div></div>`),
+  _tmpl$3$3 = /*#__PURE__*/template(`<option value="">-- select an option --</option>`),
+  _tmpl$4$3 = /*#__PURE__*/template(`<option></option>`);
+const containerStyle$5 = u`
   &&& {
-    ${N({
-  align: "left"
+    ${stack({
+  align: 'left'
 })};
     width: 100%;
     position: relative;
 
     label {
-      color: ${h.primary.var};
+      color: ${colors.primary.var};
       z-index: 1;
       font-size: 13px;
       letter-spacing: 0.08em;
@@ -1511,14 +2463,14 @@ const In = /* @__PURE__ */ $("<label></label>"), zn = /* @__PURE__ */ $('<div><d
     }
 
     .inputContainer {
-      background: ${h.white.alpha(0.05)};
+      background: ${colors.white.alpha(0.05)};
       border-radius: 4px;
       margin-top: 0px;
       position: relative;
       width: 100%;
       overflow: hidden;
-      ${N({
-  align: "left"
+      ${stack({
+  align: 'left'
 })};
     }
 
@@ -1530,7 +2482,7 @@ const In = /* @__PURE__ */ $("<label></label>"), zn = /* @__PURE__ */ $('<div><d
       padding-left: 10px;
       font-size: 14px;
       background: transparent;
-      color: ${h.white.var};
+      color: ${colors.white.var};
 
       &:focus {
         outline: 0;
@@ -1546,76 +2498,114 @@ const In = /* @__PURE__ */ $("<label></label>"), zn = /* @__PURE__ */ $('<div><d
       left: 0;
       right: 8px;
       height: 17px;
-      background: ${h.white.var};
+      background: ${colors.white.var};
     }
   }
-`, Vn = (e) => {
-  const t = `input${Dn()}`;
+`;
+const Select = props => {
+  const inputId = `input${autoIncrementId()}`;
   return (() => {
-    const n = zn.cloneNode(!0), l = n.firstChild, i = l.firstChild;
-    return u(n, p(ae, {
+    const _el$ = _tmpl$2$4.cloneNode(true),
+      _el$3 = _el$.firstChild,
+      _el$4 = _el$3.firstChild;
+    insert(_el$, createComponent(Show, {
       get when() {
-        return e.label;
+        return props.label;
       },
       get children() {
-        const o = In.cloneNode(!0);
-        return P(o, "for", t), u(o, () => e.label), o;
+        const _el$2 = _tmpl$$5.cloneNode(true);
+        setAttribute(_el$2, "for", inputId);
+        insert(_el$2, () => props.label);
+        return _el$2;
       }
-    }), l), i.addEventListener("change", (o) => {
-      o.currentTarget.value && e.onChange(o.currentTarget.value);
-    }), P(i, "id", t), u(i, (() => {
-      const o = m(() => !e.value);
-      return () => o() && Fn.cloneNode(!0);
-    })(), null), u(i, p(F, {
+    }), _el$3);
+    _el$4.addEventListener("change", e => {
+      if (e.currentTarget.value) {
+        props.onChange(e.currentTarget.value);
+      }
+    });
+    setAttribute(_el$4, "id", inputId);
+    insert(_el$4, (() => {
+      const _c$ = createMemo(() => !!!props.value);
+      return () => _c$() && _tmpl$3$3.cloneNode(true);
+    })(), null);
+    insert(_el$4, createComponent(For, {
       get each() {
-        return e.options;
+        return props.options;
       },
-      children: (o) => (() => {
-        const s = Bn.cloneNode(!0);
-        return u(s, () => o.label), C(() => s.value = o.value), s;
+      children: option => (() => {
+        const _el$6 = _tmpl$4$3.cloneNode(true);
+        insert(_el$6, () => option.label);
+        createRenderEffect(() => _el$6.value = option.value);
+        return _el$6;
       })()
-    }), null), C(() => b(n, nt(Hn, e.class))), C(() => i.value = e.value ?? ""), n;
+    }), null);
+    createRenderEffect(() => className(_el$, cx(containerStyle$5, props.class)));
+    createRenderEffect(() => _el$4.value = props.value ?? '');
+    return _el$;
   })();
 };
-function rt(e) {
-  const t = e.alias || e.payload || e.searchParams;
-  return !t || Object.keys(t).length === 0 ? "" : typeof t == "string" || typeof t == "number" ? String(t) : JSON.stringify(t);
-}
-function Ie(e, t) {
-  return Ue(e, t) ? "no changes" : pt.diffJson(
-    typeof e == "object" && e !== null ? e : String(e),
-    typeof t == "object" && t !== null ? t : String(t)
+
+function getRequestPayload(request) {
+  const payload = request.alias || request.payload || request.searchParams;
+  if (!payload || Object.keys(payload).length === 0) {
+    return '';
+  }
+  if (typeof payload === 'string' || typeof payload === 'number') {
+    return String(payload);
+  }
+  return JSON.stringify(payload);
+}
+
+function getDiff(from, to) {
+  if (dequal(from, to)) {
+    return "no changes";
+  }
+  const diffs = diff.diffJson(
+    typeof from === "object" && from !== null ? from : String(from),
+    typeof to === "object" && to !== null ? to : String(to)
   );
+  return diffs;
 }
-function Zn(e, t) {
-  return e.length > t ? `${e.slice(0, t)}...` : e;
+
+function truncateText(text, max) {
+  if (text.length > max) {
+    return `${text.slice(0, max)}...`;
+  }
+  return text;
 }
-const Kn = /* @__PURE__ */ $('<div class="changes-count"><span class="additions">+ <b></b> lines</span> | <span class="removals">- <b></b> lines</span></div>'), he = /* @__PURE__ */ $("<div></div>"), ze = /* @__PURE__ */ $("<div>No changes</div>"), Fe = /* @__PURE__ */ $('<div class="line"></div>'), Un = _`
+
+const _tmpl$$4 = /*#__PURE__*/template(`<div class="changes-count"><span class="additions">+ <b></b> lines</span> | <span class="removals">- <b></b> lines</span></div>`),
+  _tmpl$2$3 = /*#__PURE__*/template(`<div></div>`),
+  _tmpl$3$2 = /*#__PURE__*/template(`<div>No changes</div>`),
+  _tmpl$4$2 = /*#__PURE__*/template(`<div class="line"></div>`);
+const containerStyle$4 = u`
   &&& {
-    ${N({
+    ${stack({
   gap: 14
 })};
 
     .changes-count {
-      color: ${h.white.alpha(0.5)};
+      color: ${colors.white.alpha(0.5)};
       font-size: 14px;
 
       .additions {
-        color: ${h.success.var};
+        color: ${colors.success.var};
       }
 
       .removals {
-        color: ${h.error.var};
+        color: ${colors.error.var};
       }
     }
   }
-`, Be = _`
+`;
+const diffContainerStyle = u`
   &&& {
-    ${N({
+    ${stack({
   gap: 0
 })};
     font-size: 14px;
-    font-family: ${L.decorative};
+    font-family: ${fonts.decorative};
     white-space: pre;
     overflow-x: auto;
 
@@ -1625,8 +2615,8 @@ const Kn = /* @__PURE__ */ $('<div class="changes-count"><span class="additions"
 
       &.added {
         opacity: 1;
-        color: ${h.success.var};
-        background: ${h.success.alpha(0.1)};
+        color: ${colors.success.var};
+        background: ${colors.success.alpha(0.1)};
 
         &::before {
           content: '+';
@@ -1637,8 +2627,8 @@ const Kn = /* @__PURE__ */ $('<div class="changes-count"><span class="additions"
 
       &.removed {
         opacity: 1;
-        color: ${h.error.var};
-        background: ${h.error.alpha(0.1)};
+        color: ${colors.error.var};
+        background: ${colors.error.alpha(0.1)};
 
         &::before {
           content: '-';
@@ -1648,153 +2638,209 @@ const Kn = /* @__PURE__ */ $('<div class="changes-count"><span class="additions"
       }
     }
   }
-`, Wn = () => {
-  const e = m(() => {
+`;
+const Diff = () => {
+  const currentCall = createMemo(() => {
     const {
-      selectedCall: r
-    } = S;
-    return r ? H.calls[r] : Object.values(H.calls).at(-1);
-  }), t = et(() => {
-    const r = e();
-    return r ? tt(r.requests).map((a) => ({
-      value: a.id,
-      label: `${Q(a.startTime).format("HH:mm:ss")} | ${Zn(rt(a), 50)}`
-    })).filter((a) => a.value !== S.selectedRequest) : [];
-  }, "value"), n = we(null), l = m(() => S.selectedRequest ? e()?.requests.find((r) => r.id === S.selectedRequest) : null), i = m(() => n.value ? e()?.requests.find((r) => r.id === n.value) : null), o = m(() => {
-    if (!n.value || !S.selectedRequest)
-      return [];
-    const r = l()?.response, a = i()?.response, c = Ie(a, r);
-    return c === "no changes" ? [] : c;
-  }), s = m(() => {
-    if (!n.value || !S.selectedRequest)
-      return [];
-    const r = He(l()), a = He(i()), c = Ie(a, r);
-    return c === "no changes" ? [] : c;
+      selectedCall
+    } = uiStore;
+    if (!selectedCall) return Object.values(callsStore.calls).at(-1);
+    return callsStore.calls[selectedCall];
+  });
+  const requestOptions = createReconciledArray(() => {
+    const call = currentCall();
+    if (!call) return [];
+    return reverseCopy(call.requests).map(request => {
+      return {
+        value: request.id,
+        label: `${dayjs(request.startTime).format('HH:mm:ss')} | ${truncateText(getRequestPayload(request), 50)}`
+      };
+    }).filter(request => request.value !== uiStore.selectedRequest);
+  }, 'value');
+  const compareRequest = createSignalRef(null);
+  const activeRequest = createMemo(() => {
+    if (!uiStore.selectedRequest) return null;
+    return currentCall()?.requests.find(request => request.id === uiStore.selectedRequest);
+  });
+  const compareFromRequest = createMemo(() => {
+    if (!compareRequest.value) return null;
+    return currentCall()?.requests.find(request => request.id === compareRequest.value);
+  });
+  const responseDiff = createMemo(() => {
+    if (!compareRequest.value || !uiStore.selectedRequest) return [];
+    const activeResponse = activeRequest()?.response;
+    const compareFromResponse = compareFromRequest()?.response;
+    const diffParts = getDiff(compareFromResponse, activeResponse);
+    return diffParts === 'no changes' ? [] : diffParts;
+  });
+  const payloadDiff = createMemo(() => {
+    if (!compareRequest.value || !uiStore.selectedRequest) return [];
+    const activePayload = getPayload(activeRequest());
+    const compareFromPayload = getPayload(compareFromRequest());
+    const diffParts = getDiff(compareFromPayload, activePayload);
+    return diffParts === 'no changes' ? [] : diffParts;
   });
   return (() => {
-    const r = he.cloneNode(!0);
-    return b(r, Un), u(r, p(Vn, {
+    const _el$ = _tmpl$2$3.cloneNode(true);
+    className(_el$, containerStyle$4);
+    insert(_el$, createComponent(Select, {
       get value() {
-        return n.value;
+        return compareRequest.value;
       },
       label: "Select a request to compare with",
       get options() {
-        return t();
+        return requestOptions();
       },
-      onChange: (a) => {
-        n.value = a;
+      onChange: value => {
+        compareRequest.value = value;
       }
-    }), null), u(r, p(ae, {
+    }), null);
+    insert(_el$, createComponent(Show, {
       get when() {
-        return n.value;
+        return compareRequest.value;
       },
       get children() {
         return [(() => {
-          const a = Kn.cloneNode(!0), c = a.firstChild, d = c.firstChild, g = d.nextSibling, f = c.nextSibling, y = f.nextSibling, v = y.firstChild, x = v.nextSibling;
-          return u(g, () => o().filter((w) => w.added).length), u(x, () => o().filter((w) => w.removed).length), a;
-        })(), p(E, {
+          const _el$2 = _tmpl$$4.cloneNode(true),
+            _el$3 = _el$2.firstChild,
+            _el$4 = _el$3.firstChild,
+            _el$5 = _el$4.nextSibling,
+            _el$6 = _el$3.nextSibling,
+            _el$9 = _el$6.nextSibling,
+            _el$10 = _el$9.firstChild,
+            _el$11 = _el$10.nextSibling;
+          insert(_el$5, () => responseDiff().filter(item => item.added).length);
+          insert(_el$11, () => responseDiff().filter(item => item.removed).length);
+          return _el$2;
+        })(), createComponent(Section, {
           get title() {
-            return m(() => !!l()?.payload)() ? "Payload Diff" : l()?.searchParams ? "Search Params Diff" : "Path Params Diff";
+            return createMemo(() => !!activeRequest()?.payload)() ? 'Payload Diff' : activeRequest()?.searchParams ? 'Search Params Diff' : 'Path Params Diff';
           },
           get children() {
-            const a = he.cloneNode(!0);
-            return b(a, Be), u(a, p(F, {
+            const _el$12 = _tmpl$2$3.cloneNode(true);
+            className(_el$12, diffContainerStyle);
+            insert(_el$12, createComponent(For, {
               get each() {
-                return s();
+                return payloadDiff();
               },
               get fallback() {
-                return ze.cloneNode(!0);
+                return _tmpl$3$2.cloneNode(true);
               },
-              children: (c) => (() => {
-                const d = Fe.cloneNode(!0);
-                return u(d, () => c.value), C((g) => {
-                  const f = !!c.added, y = !!c.removed;
-                  return f !== g._v$ && d.classList.toggle("added", g._v$ = f), y !== g._v$2 && d.classList.toggle("removed", g._v$2 = y), g;
+              children: item => (() => {
+                const _el$15 = _tmpl$4$2.cloneNode(true);
+                insert(_el$15, () => item.value);
+                createRenderEffect(_p$ => {
+                  const _v$ = !!item.added,
+                    _v$2 = !!item.removed;
+                  _v$ !== _p$._v$ && _el$15.classList.toggle("added", _p$._v$ = _v$);
+                  _v$2 !== _p$._v$2 && _el$15.classList.toggle("removed", _p$._v$2 = _v$2);
+                  return _p$;
                 }, {
-                  _v$: void 0,
-                  _v$2: void 0
-                }), d;
+                  _v$: undefined,
+                  _v$2: undefined
+                });
+                return _el$15;
               })()
-            })), a;
+            }));
+            return _el$12;
           }
-        }), p(E, {
-          title: "Response Diff",
+        }), createComponent(Section, {
+          title: 'Response Diff',
           get children() {
-            const a = he.cloneNode(!0);
-            return b(a, Be), u(a, p(F, {
+            const _el$13 = _tmpl$2$3.cloneNode(true);
+            className(_el$13, diffContainerStyle);
+            insert(_el$13, createComponent(For, {
               get each() {
-                return o();
+                return responseDiff();
               },
               get fallback() {
-                return ze.cloneNode(!0);
+                return _tmpl$3$2.cloneNode(true);
               },
-              children: (c) => (() => {
-                const d = Fe.cloneNode(!0);
-                return u(d, () => c.value), C((g) => {
-                  const f = !!c.added, y = !!c.removed;
-                  return f !== g._v$3 && d.classList.toggle("added", g._v$3 = f), y !== g._v$4 && d.classList.toggle("removed", g._v$4 = y), g;
+              children: item => (() => {
+                const _el$17 = _tmpl$4$2.cloneNode(true);
+                insert(_el$17, () => item.value);
+                createRenderEffect(_p$ => {
+                  const _v$3 = !!item.added,
+                    _v$4 = !!item.removed;
+                  _v$3 !== _p$._v$3 && _el$17.classList.toggle("added", _p$._v$3 = _v$3);
+                  _v$4 !== _p$._v$4 && _el$17.classList.toggle("removed", _p$._v$4 = _v$4);
+                  return _p$;
                 }, {
-                  _v$3: void 0,
-                  _v$4: void 0
-                }), d;
+                  _v$3: undefined,
+                  _v$4: undefined
+                });
+                return _el$17;
               })()
-            })), a;
+            }));
+            return _el$13;
           }
         })];
       }
-    }), null), r;
+    }), null);
+    return _el$;
   })();
 };
-function He(e) {
-  return e ? e.payload || e.searchParams || e.pathParams : null;
-}
-const Ve = /* @__PURE__ */ $("<div></div>"), Jn = /* @__PURE__ */ $("<h1></h1>"), Xn = /* @__PURE__ */ $('<div class="tags"></div>'), Gn = /* @__PURE__ */ $('<div class="details"></div>'), Yn = /* @__PURE__ */ $("<h2></h2>"), Qn = /* @__PURE__ */ $('<div class="method"></div>'), qn = /* @__PURE__ */ $('<div class="code"></div>'), er = /* @__PURE__ */ $('<div class="tag error">Has Error</div>'), tr = /* @__PURE__ */ $('<div class="tag"></div>'), nr = _`
+function getPayload(request) {
+  if (!request) return null;
+  return request.payload || request.searchParams || request.pathParams;
+}
+
+const _tmpl$$3 = /*#__PURE__*/template(`<div></div>`),
+  _tmpl$2$2 = /*#__PURE__*/template(`<h1></h1>`),
+  _tmpl$3$1 = /*#__PURE__*/template(`<div class="tags"></div>`),
+  _tmpl$4$1 = /*#__PURE__*/template(`<div class="details"></div>`),
+  _tmpl$5$1 = /*#__PURE__*/template(`<h2></h2>`),
+  _tmpl$6$1 = /*#__PURE__*/template(`<div class="method"></div>`),
+  _tmpl$7 = /*#__PURE__*/template(`<div class="code"></div>`),
+  _tmpl$8 = /*#__PURE__*/template(`<div class="tag error">Has Error</div>`),
+  _tmpl$9 = /*#__PURE__*/template(`<div class="tag"></div>`);
+const containerStyle$3 = u`
   &&& {
-    ${N()};
+    ${stack()};
     padding-left: 10px;
 
     > h1 {
       margin-top: 12px;
-      font-family: ${L.decorative};
-      ${ue};
+      font-family: ${fonts.decorative};
+      ${ellipsis};
     }
 
     > h2 {
       margin-top: 4px;
-      font-family: ${L.decorative};
+      font-family: ${fonts.decorative};
       font-size: 12px;
       opacity: 0.5;
     }
 
     .tags {
-      ${B({
+      ${inline({
   gap: 8
 })};
       margin-top: 8px;
 
       .method {
-        color: ${h.primary.var};
+        color: ${colors.primary.var};
       }
 
       .code {
-        color: ${h.success.var};
+        color: ${colors.success.var};
 
         &.error {
-          color: ${h.error.var};
+          color: ${colors.error.var};
         }
       }
 
       .tag {
         font-size: 11px;
-        color: ${h.warning.var};
+        color: ${colors.warning.var};
         padding: 1px 3px;
         border-radius: 4px;
-        border: 1px solid ${h.warning.alpha(0.6)};
+        border: 1px solid ${colors.warning.alpha(0.6)};
 
         &.error {
-          color: ${h.error.var};
+          color: ${colors.error.var};
           font-weight: 600;
-          border-color: ${h.error.alpha(0.6)};
+          border-color: ${colors.error.alpha(0.6)};
         }
       }
     }
@@ -1802,7 +2848,7 @@ const Ve = /* @__PURE__ */ $("<div></div>"), Jn = /* @__PURE__ */ $("<h1></h1>")
     > .details {
       margin-top: 14px;
       padding-right: 10px;
-      ${N({
+      ${stack({
   gap: 8
 })};
       flex: 1 1;
@@ -1810,12 +2856,13 @@ const Ve = /* @__PURE__ */ $("<div></div>"), Jn = /* @__PURE__ */ $("<h1></h1>")
       padding-bottom: 20px;
     }
   }
-`, rr = _`
+`;
+const tabsStyle = u`
   &&& {
-    ${B({
+    ${inline({
   gap: 20
 })};
-    color: ${h.secondary.var};
+    color: ${colors.secondary.var};
     margin-top: 20px;
 
     > button {
@@ -1832,248 +2879,289 @@ const Ve = /* @__PURE__ */ $("<div></div>"), Jn = /* @__PURE__ */ $("<h1></h1>")
       }
     }
   }
-`, or = () => {
-  const e = m(() => S.selectedCall), t = m(() => S.selectedRequest), n = m(() => S.selectedTab || "summary"), l = m(() => {
-    let o;
-    e() ? o = H.calls[e()] : o = Object.values(H.calls).at(-1);
-    const s = t() && o?.requests.find((r) => r.id === t()) || o?.requests.at(-1);
-    return s && o ? {
-      ...s,
-      callName: o.name,
-      callPath: o.path
-    } : null;
+`;
+const RequestDetails = () => {
+  const _selectedCallId = createMemo(() => uiStore.selectedCall);
+  const _selectedRequestId = createMemo(() => uiStore.selectedRequest);
+  const _selectedTab = createMemo(() => uiStore.selectedTab || 'summary');
+  const selectedRequest = createMemo(() => {
+    let selectedCall;
+    if (_selectedCallId()) {
+      selectedCall = callsStore.calls[_selectedCallId()];
+    } else {
+      selectedCall = Object.values(callsStore.calls).at(-1);
+    }
+    const selectedRequest = _selectedRequestId() && selectedCall?.requests.find(request => request.id === _selectedRequestId()) || selectedCall?.requests.at(-1);
+    if (selectedRequest && selectedCall) {
+      return {
+        ...selectedRequest,
+        callName: selectedCall.name,
+        callPath: selectedCall.path
+      };
+    }
+    return null;
   });
-  function i(o, s) {
-    return p(M, {
+  function getTab(tabId, label) {
+    return createComponent(ButtonElement, {
       get classList() {
         return {
-          selected: n() === o
+          selected: _selectedTab() === tabId
         };
       },
       onClick: () => {
-        se("selectedTab", o);
+        setUiStore('selectedTab', tabId);
       },
-      children: s
+      children: label
     });
   }
   return (() => {
-    const o = Ve.cloneNode(!0);
-    return b(o, nr), u(o, p(ae, {
+    const _el$ = _tmpl$$3.cloneNode(true);
+    className(_el$, containerStyle$3);
+    insert(_el$, createComponent(Show, {
       get when() {
-        return l();
+        return selectedRequest();
       },
-      keyed: !0,
-      children: (s) => [(() => {
-        const r = Jn.cloneNode(!0);
-        return u(r, () => s.callName, null), u(r, () => s.alias && ` | ${s.alias}`, null), r;
-      })(), m((() => {
-        const r = m(() => s.callPath !== s.callName);
-        return () => r() && (() => {
-          const a = Yn.cloneNode(!0);
-          return u(a, () => s.callPath), a;
+      keyed: true,
+      children: request => [(() => {
+        const _el$2 = _tmpl$2$2.cloneNode(true);
+        insert(_el$2, () => request.callName, null);
+        insert(_el$2, () => request.alias && ` | ${request.alias}`, null);
+        return _el$2;
+      })(), createMemo((() => {
+        const _c$ = createMemo(() => request.callPath !== request.callName);
+        return () => _c$() && (() => {
+          const _el$6 = _tmpl$5$1.cloneNode(true);
+          insert(_el$6, () => request.callPath);
+          return _el$6;
         })();
       })()), (() => {
-        const r = Xn.cloneNode(!0);
-        return u(r, (() => {
-          const a = m(() => !!s.method);
-          return () => a() && (() => {
-            const c = Qn.cloneNode(!0);
-            return u(c, () => s.method), c;
+        const _el$3 = _tmpl$3$1.cloneNode(true);
+        insert(_el$3, (() => {
+          const _c$2 = createMemo(() => !!request.method);
+          return () => _c$2() && (() => {
+            const _el$7 = _tmpl$6$1.cloneNode(true);
+            insert(_el$7, () => request.method);
+            return _el$7;
           })();
-        })(), null), u(r, (() => {
-          const a = m(() => !!s.code);
-          return () => a() && (() => {
-            const c = qn.cloneNode(!0);
-            return u(c, () => s.code), C(() => c.classList.toggle("error", s.code >= 400)), c;
+        })(), null);
+        insert(_el$3, (() => {
+          const _c$3 = createMemo(() => !!request.code);
+          return () => _c$3() && (() => {
+            const _el$8 = _tmpl$7.cloneNode(true);
+            insert(_el$8, () => request.code);
+            createRenderEffect(() => _el$8.classList.toggle("error", !!(request.code >= 400)));
+            return _el$8;
           })();
-        })(), null), u(r, (() => {
-          const a = m(() => !!s.isError);
-          return () => a() && er.cloneNode(!0);
-        })(), null), u(r, p(F, {
+        })(), null);
+        insert(_el$3, (() => {
+          const _c$4 = createMemo(() => !!request.isError);
+          return () => _c$4() && _tmpl$8.cloneNode(true);
+        })(), null);
+        insert(_el$3, createComponent(For, {
           get each() {
-            return s.tags;
+            return request.tags;
           },
-          children: (a) => (() => {
-            const c = tr.cloneNode(!0);
-            return u(c, a), c;
+          children: tag => (() => {
+            const _el$10 = _tmpl$9.cloneNode(true);
+            insert(_el$10, tag);
+            return _el$10;
           })()
-        }), null), r;
+        }), null);
+        return _el$3;
       })(), (() => {
-        const r = Ve.cloneNode(!0);
-        return b(r, rr), u(r, () => i("summary", "Summary"), null), u(r, (() => {
-          const a = m(() => !!s.payload);
-          return () => a() && i("payload", "Payload");
-        })(), null), u(r, (() => {
-          const a = m(() => !!s.searchParams);
-          return () => a() && i("urlParams", "URL Params");
-        })(), null), u(r, () => i("response", "Response"), null), u(r, () => i("diff", "Diff"), null), r;
+        const _el$4 = _tmpl$$3.cloneNode(true);
+        className(_el$4, tabsStyle);
+        insert(_el$4, () => getTab('summary', 'Summary'), null);
+        insert(_el$4, (() => {
+          const _c$5 = createMemo(() => !!!!request.payload);
+          return () => _c$5() && getTab('payload', 'Payload');
+        })(), null);
+        insert(_el$4, (() => {
+          const _c$6 = createMemo(() => !!!!request.searchParams);
+          return () => _c$6() && getTab('urlParams', 'URL Params');
+        })(), null);
+        insert(_el$4, () => getTab('response', 'Response'), null);
+        insert(_el$4, () => getTab('diff', 'Diff'), null);
+        return _el$4;
       })(), (() => {
-        const r = Gn.cloneNode(!0);
-        return u(r, p(dt, {
+        const _el$5 = _tmpl$4$1.cloneNode(true);
+        insert(_el$5, createComponent(Switch, {
           get children() {
-            return [p(G, {
+            return [createComponent(Match, {
               get when() {
-                return n() === "summary";
+                return _selectedTab() === 'summary';
               },
               get children() {
-                return [m(() => m(() => !!s.payload)() && p(E, {
+                return [createMemo(() => createMemo(() => !!!!request.payload)() && createComponent(Section, {
                   title: "Payload",
                   get children() {
-                    return p(R, {
+                    return createComponent(ValueVisualizer, {
                       get value() {
-                        return s.payload;
+                        return request.payload;
                       },
-                      compact: !0
+                      compact: true
                     });
                   }
-                })), m(() => m(() => !!s.searchParams)() && p(E, {
+                })), createMemo(() => createMemo(() => !!!!request.searchParams)() && createComponent(Section, {
                   title: "URL Params",
                   get children() {
-                    return p(R, {
+                    return createComponent(ValueVisualizer, {
                       get value() {
-                        return s.searchParams;
+                        return request.searchParams;
                       },
-                      compact: !0
+                      compact: true
                     });
                   }
-                })), m(() => m(() => !!s.response)() && p(E, {
+                })), createMemo(() => createMemo(() => !!!!request.response)() && createComponent(Section, {
                   title: "Response",
                   get children() {
-                    return p(R, {
+                    return createComponent(ValueVisualizer, {
                       get value() {
-                        return s.response;
+                        return request.response;
                       },
-                      compact: !0
+                      compact: true
                     });
                   }
-                })), p(E, {
+                })), createComponent(Section, {
                   title: "Stats",
                   get children() {
-                    return p(R, {
+                    return createComponent(ValueVisualizer, {
                       get value() {
                         return {
-                          "Duration (ms)": Math.round(s.duration),
-                          "Start Time": `${Q(s.startTime).format("HH:mm:ss")} (${Q(s.startTime).fromNow()})`
+                          'Duration (ms)': Math.round(request.duration),
+                          'Start Time': `${dayjs(request.startTime).format('HH:mm:ss')} (${dayjs(request.startTime).fromNow()})`
                         };
                       }
                     });
                   }
-                }), p(E, {
+                }), createComponent(Section, {
                   title: "Metadata",
                   get children() {
-                    return p(R, {
+                    return createComponent(ValueVisualizer, {
                       get value() {
-                        return s.metadata;
+                        return request.metadata;
                       }
                     });
                   }
                 })];
               }
-            }), p(G, {
+            }), createComponent(Match, {
               get when() {
-                return n() === "payload";
+                return _selectedTab() === 'payload';
               },
               get children() {
-                return p(E, {
+                return createComponent(Section, {
                   title: null,
                   get children() {
-                    return p(R, {
+                    return createComponent(ValueVisualizer, {
                       get value() {
-                        return s.payload;
+                        return request.payload;
                       }
                     });
                   }
                 });
               }
-            }), p(G, {
+            }), createComponent(Match, {
               get when() {
-                return n() === "response";
+                return _selectedTab() === 'response';
               },
               get children() {
-                return p(E, {
+                return createComponent(Section, {
                   title: null,
                   get children() {
-                    return p(R, {
+                    return createComponent(ValueVisualizer, {
                       get value() {
-                        return s.response;
+                        return request.response;
                       }
                     });
                   }
                 });
               }
-            }), p(G, {
+            }), createComponent(Match, {
               get when() {
-                return n() === "urlParams";
+                return _selectedTab() === 'urlParams';
               },
               get children() {
-                return p(E, {
+                return createComponent(Section, {
                   title: null,
                   get children() {
-                    return p(R, {
+                    return createComponent(ValueVisualizer, {
                       get value() {
-                        return s.searchParams;
+                        return request.searchParams;
                       }
                     });
                   }
                 });
               }
-            }), p(G, {
+            }), createComponent(Match, {
               get when() {
-                return n() === "diff";
+                return _selectedTab() === 'diff';
               },
               get children() {
-                return p(Wn, {});
+                return createComponent(Diff, {});
               }
             })];
           }
-        })), r;
+        }));
+        return _el$5;
       })()]
-    })), o;
+    }));
+    return _el$;
   })();
-}, lr = /* @__PURE__ */ $("<div><h1>timeline</h1><div></div></div>"), ir = /* @__PURE__ */ $("<div>no requests found</div>"), sr = /* @__PURE__ */ $('<span class="start-time"></span>'), ar = /* @__PURE__ */ $("<div></div>"), cr = /* @__PURE__ */ $('<span class="separator">|</span>'), dr = /* @__PURE__ */ $('<span class="payload"></span>'), ur = _`
+};
+
+const _tmpl$$2 = /*#__PURE__*/template(`<div><h1>timeline</h1><div></div></div>`),
+  _tmpl$2$1 = /*#__PURE__*/template(`<div>no requests found</div>`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class="start-time"></span>`),
+  _tmpl$4 = /*#__PURE__*/template(`<div></div>`),
+  _tmpl$5 = /*#__PURE__*/template(`<span class="separator">|</span>`),
+  _tmpl$6 = /*#__PURE__*/template(`<span class="payload"></span>`);
+const containerStyle$2 = u`
   &&& {
-    ${N()};
-    border-right: 1px solid ${h.white.alpha(0.1)};
+    ${stack()};
+    border-right: 1px solid ${colors.white.alpha(0.1)};
 
     > h1 {
       font-size: 16px;
       padding-left: 12px;
       padding-top: 10px;
-      font-family: ${L.decorative};
-      color: ${h.secondary.var};
+      font-family: ${fonts.decorative};
+      color: ${colors.secondary.var};
       padding-bottom: 16px;
     }
   }
-`, fr = _`
+`;
+const itemsContainerStyle = u`
   &&& {
-    ${N()};
+    ${stack()};
     flex: 1 1;
     overflow-y: auto;
   }
-`, pr = _`
+`;
+const requestItemStyle = u`
   &&& {
     font-size: 13px;
-    ${N()};
+    ${stack()};
 
     &.error {
-      color: ${h.error.var};
+      color: ${colors.error.var};
       font-weight: 600;
     }
 
     > button {
       padding: 4px 12px;
-      ${B({
+      ${inline({
   gap: 8
 })};
       opacity: 0.8;
 
       &.selected {
         opacity: 1;
-        background-color: ${h.secondary.alpha(0.16)};
+        background-color: ${colors.secondary.alpha(0.16)};
       }
 
       > .start-time {
-        font-family: ${L.decorative};
+        font-family: ${fonts.decorative};
       }
 
       > .separator {
@@ -2081,76 +3169,124 @@ const Ve = /* @__PURE__ */ $("<div></div>"), Jn = /* @__PURE__ */ $("<h1></h1>")
       }
 
       > .payload {
-        ${ue};
+        ${ellipsis};
         flex-shrink: 1;
       }
     }
   }
-`, gr = _`
+`;
+const emptyStateStyle = u`
   &&& {
     opacity: 0.4;
     font-size: 14px;
     padding: 12px;
     padding-top: 0;
   }
-`, hr = () => {
-  const e = m(() => {
-    const i = S.selectedCall;
-    return i ? i ? H.calls[i] : null : Object.values(H.calls).at(-1) || null;
-  }), t = m(() => {
-    const i = tt(e()?.requests);
-    return i.length === 0 ? null : i;
-  }), n = m(() => S.selectedSubitem ? t()?.filter((i) => i.alias === S.selectedSubitem) : t()), l = m(() => S.selectedRequest || n()?.[0]?.id);
+`;
+const Timeline = () => {
+  const selectedCall = createMemo(() => {
+    const selectedCallId = uiStore.selectedCall;
+    if (!selectedCallId) {
+      const callsEntries = Object.values(callsStore.calls).at(-1);
+      return callsEntries || null;
+    }
+    if (selectedCallId) {
+      return callsStore.calls[selectedCallId];
+    }
+    return null;
+  });
+  const requests = createMemo(() => {
+    const reversed = reverseCopy(selectedCall()?.requests);
+    return reversed.length === 0 ? null : reversed;
+  });
+  const filteredRequests = createMemo(() => {
+    if (uiStore.selectedSubitem) {
+      return requests()?.filter(request => {
+        return request.alias === uiStore.selectedSubitem;
+      });
+    } else {
+      return requests();
+    }
+  });
+  const _selectedRequestId = createMemo(() => uiStore.selectedRequest || filteredRequests()?.[0]?.id);
   return (() => {
-    const i = lr.cloneNode(!0), o = i.firstChild, s = o.nextSibling;
-    return b(i, ur), b(s, fr), u(s, p(F, {
+    const _el$ = _tmpl$$2.cloneNode(true),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling;
+    className(_el$, containerStyle$2);
+    className(_el$3, itemsContainerStyle);
+    insert(_el$3, createComponent(For, {
       get each() {
-        return n();
+        return filteredRequests();
       },
       get fallback() {
         return (() => {
-          const r = ir.cloneNode(!0);
-          return b(r, gr), r;
+          const _el$4 = _tmpl$2$1.cloneNode(true);
+          className(_el$4, emptyStateStyle);
+          return _el$4;
         })();
       },
-      children: (r) => {
-        const a = Q(r.startTime), c = a.format("HH:mm:ss"), d = a.fromNow(), g = rt(r);
+      children: request => {
+        const startTime = dayjs(request.startTime);
+        const formattedStartTime = startTime.format('HH:mm:ss');
+        const relativeStartTime = startTime.fromNow();
+        const payload = getRequestPayload(request);
         return (() => {
-          const f = ar.cloneNode(!0);
-          return b(f, pr), u(f, p(M, {
+          const _el$5 = _tmpl$4.cloneNode(true);
+          className(_el$5, requestItemStyle);
+          insert(_el$5, createComponent(ButtonElement, {
             onClick: () => {
-              se("selectedRequest", r.id);
+              setUiStore('selectedRequest', request.id);
             },
             get classList() {
               return {
-                selected: r.id === l()
+                selected: request.id === _selectedRequestId()
               };
             },
             get children() {
               return [(() => {
-                const y = sr.cloneNode(!0);
-                return P(y, "title", d), u(y, c), y;
-              })(), m(() => !!g && [cr.cloneNode(!0), (() => {
-                const y = dr.cloneNode(!0);
-                return P(y, "title", g), u(y, g), y;
+                const _el$6 = _tmpl$3.cloneNode(true);
+                setAttribute(_el$6, "title", relativeStartTime);
+                insert(_el$6, formattedStartTime);
+                return _el$6;
+              })(), createMemo(() => !!payload && [_tmpl$5.cloneNode(true), (() => {
+                const _el$8 = _tmpl$6.cloneNode(true);
+                setAttribute(_el$8, "title", payload);
+                insert(_el$8, payload);
+                return _el$8;
               })()])];
             }
-          })), C(() => f.classList.toggle("error", !!r.isError)), f;
+          }));
+          createRenderEffect(() => _el$5.classList.toggle("error", !!request.isError));
+          return _el$5;
         })();
       }
-    })), i;
+    }));
+    return _el$;
   })();
-}, mr = /* @__PURE__ */ $("<div></div>"), $r = _`
+};
+
+const _tmpl$$1 = /*#__PURE__*/template(`<div></div>`);
+const containerStyle$1 = u`
   &&& {
     display: grid;
-    grid-template-columns: 1.5fr 1fr 3fr;
+    grid-template-columns: 1fr 1fr 3fr;
   }
-`, yr = () => (() => {
-  const e = mr.cloneNode(!0);
-  return b(e, $r), u(e, p(bn, {}), null), u(e, p(hr, {}), null), u(e, p(or, {}), null), e;
-})(), vr = `
-  font-family: ${L.primary};
-  color: ${h.textPrimary.var};
+`;
+const ApiExplorerPage = () => {
+  return (() => {
+    const _el$ = _tmpl$$1.cloneNode(true);
+    className(_el$, containerStyle$1);
+    insert(_el$, createComponent(ApiExplorerMenu, {}), null);
+    insert(_el$, createComponent(Timeline, {}), null);
+    insert(_el$, createComponent(RequestDetails, {}), null);
+    return _el$;
+  })();
+};
+
+const globalStyle = `
+  font-family: ${fonts.primary};
+  color: ${colors.textPrimary.var};
 
   * {
     user-select: none;
@@ -2199,11 +3335,15 @@ const Ve = /* @__PURE__ */ $("<div></div>"), Jn = /* @__PURE__ */ $("<h1></h1>")
   h3 {
     font-weight: normal;
   }
-`, br = `
+`;
+
+const centerContent = `
   display: flex;
   align-items: center;
   justify-content: center;
-`, Cr = `
+`;
+
+const resetStyle = `
 *,
 *::before,
 *::after {
@@ -2278,75 +3418,29 @@ button {
   -webkit-appearance: none;
 }
 `;
-let xr = { data: "" }, wr = (e) => typeof window == "object" ? ((e ? e.querySelector("#_goober") : window._goober) || Object.assign((e || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : e || xr, _r = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, Nr = /\/\*[^]*?\*\/|  +/g, Ze = /\n+/g, I = (e, t) => {
-  let n = "", l = "", i = "";
-  for (let o in e) {
-    let s = e[o];
-    o[0] == "@" ? o[1] == "i" ? n = o + " " + s + ";" : l += o[1] == "f" ? I(s, o) : o + "{" + I(s, o[1] == "k" ? "" : t) + "}" : typeof s == "object" ? l += I(s, t ? t.replace(/([^,])+/g, (r) => o.replace(/(^:.*)|([^,])+/g, (a) => /&/.test(a) ? a.replace(/&/g, r) : r ? r + " " + a : a)) : o) : s != null && (o = /^--/.test(o) ? o : o.replace(/[A-Z]/g, "-$&").toLowerCase(), i += I.p ? I.p(o, s) : o + ":" + s + ";");
-  }
-  return n + (t && i ? t + "{" + i + "}" : i) + l;
-}, j = {}, ot = (e) => {
-  if (typeof e == "object") {
-    let t = "";
-    for (let n in e)
-      t += n + ot(e[n]);
-    return t;
-  }
-  return e;
-}, Sr = (e, t, n, l, i) => {
-  let o = ot(e), s = j[o] || (j[o] = ((a) => {
-    let c = 0, d = 11;
-    for (; c < a.length; )
-      d = 101 * d + a.charCodeAt(c++) >>> 0;
-    return "go" + d;
-  })(o));
-  if (!j[s]) {
-    let a = o !== e ? e : ((c) => {
-      let d, g, f = [{}];
-      for (; d = _r.exec(c.replace(Nr, "")); )
-        d[4] ? f.shift() : d[3] ? (g = d[3].replace(Ze, " ").trim(), f.unshift(f[0][g] = f[0][g] || {})) : f[0][d[1]] = d[2].replace(Ze, " ").trim();
-      return f[0];
-    })(e);
-    j[s] = I(i ? { ["@keyframes " + s]: a } : a, n ? "" : "." + s);
-  }
-  let r = n && j.g ? j.g : null;
-  return n && (j.g = j[s]), ((a, c, d, g) => {
-    g ? c.data = c.data.replace(g, a) : c.data.indexOf(a) === -1 && (c.data = d ? a + c.data : c.data + a);
-  })(j[s], t, l, r), s;
-}, kr = (e, t, n) => e.reduce((l, i, o) => {
-  let s = t[o];
-  if (s && s.call) {
-    let r = s(n), a = r && r.props && r.props.className || /^go/.test(r) && r;
-    s = a ? "." + a : r && typeof r == "object" ? r.props ? "" : I(r, "") : r === !1 ? "" : r;
-  }
-  return l + i + (s ?? "");
-}, "");
-function fe(e) {
-  let t = this || {}, n = e.call ? e(t.p) : e;
-  return Sr(n.unshift ? n.raw ? kr(n, [].slice.call(arguments, 1), t.p) : n.reduce((l, i) => Object.assign(l, i && i.call ? i(t.p) : i), {}) : n, wr(t.target), t.g, t.o, t.k);
-}
-fe.bind({ g: 1 });
-fe.bind({ k: 1 });
-const Ar = /* @__PURE__ */ $("<div></div>"), Pr = /* @__PURE__ */ $('<div id="dev-tools-root-element"><nav></nav><main></main></div>'), Tr = fe`
-  ${Cr};
-  ${vr};
+
+const _tmpl$ = /*#__PURE__*/template(`<div></div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div id="dev-tools-root-element"><nav></nav><main></main></div>`);
+const containerStyle = u`
+  ${resetStyle};
+  ${globalStyle};
 
   position: fixed;
   inset: 32px;
   border-radius: 4px;
-  background: ${h.bgPrimary.var};
+  background: ${colors.bgPrimary.var};
   display: grid;
   grid-template-columns: 51px 1fr;
 
   nav {
-    ${N()};
-    border-right: 1px solid ${h.white.alpha(0.1)};
+    ${stack()};
+    border-right: 1px solid ${colors.white.alpha(0.1)};
 
     button {
-      ${br};
+      ${centerContent};
       width: 100%;
       aspect-ratio: 1 / 1;
-      color: ${h.bgPrimary.var};
+      color: ${colors.bgPrimary.var};
       --icon-size: 30px;
 
       &::before {
@@ -2354,59 +3448,81 @@ const Ar = /* @__PURE__ */ $("<div></div>"), Pr = /* @__PURE__ */ $('<div id="de
         inset: 6px;
         border-radius: 3px;
         position: absolute;
-        background: ${h.primary.var};
+        background: ${colors.primary.var};
       }
     }
   }
 
   > main > * {
-    ${Ce};
+    ${fillContainer};
   }
-`, Er = fe`
-  ${Ce};
+`;
+const backdropStyle = u`
+  ${fillContainer};
   position: fixed;
   inset: 0;
-`, Lr = () => [(() => {
-  const e = Ar.cloneNode(!0);
-  return oe(e, "click", Mr, !0), b(e, Er), e;
-})(), (() => {
-  const e = Pr.cloneNode(!0), t = e.firstChild, n = t.nextSibling;
-  return b(e, Tr), u(t, p(M, {
-    title: "API Explorer",
-    get children() {
-      return p(de, {
-        name: "network"
-      });
-    }
-  })), u(n, p(yr, {})), e;
-})()];
-ce(["click"]);
-const Or = () => p(Lr, {});
-let lt = () => {
+`;
+const App = () => {
+  return [(() => {
+    const _el$ = _tmpl$.cloneNode(true);
+    addEventListener(_el$, "click", unmountApp, true);
+    className(_el$, backdropStyle);
+    return _el$;
+  })(), (() => {
+    const _el$2 = _tmpl$2.cloneNode(true),
+      _el$3 = _el$2.firstChild,
+      _el$4 = _el$3.nextSibling;
+    className(_el$2, containerStyle);
+    insert(_el$3, createComponent(ButtonElement, {
+      title: "API Explorer",
+      get children() {
+        return createComponent(Icon, {
+          name: "network"
+        });
+      }
+    }));
+    insert(_el$4, createComponent(ApiExplorerPage, {}));
+    return _el$2;
+  })()];
+};
+delegateEvents(["click"]);
+
+const Root = () => {
+  return createComponent(App, {});
 };
-function jr() {
-  Q.extend(Et), navigator.platform.indexOf("Win") > -1 && document.body.classList.add("windows");
-  const e = document.getElementById("dev-tools-root") || document.createElement("div");
-  e.id = "dev-tools-root", document.body.appendChild(e), lt = xt(() => p(Or, {}), e);
+
+let unmount = () => {};
+function initializeApp() {
+  dayjs.extend(relativeTime);
+  if (navigator.platform.indexOf('Win') > -1) {
+    document.body.classList.add('windows');
+  }
+  const devToolsRoot = document.getElementById('dev-tools-root') || document.createElement('div');
+  devToolsRoot.id = 'dev-tools-root';
+  document.body.appendChild(devToolsRoot);
+  unmount = render(() => createComponent(Root, {}), devToolsRoot);
 }
-function Mr() {
-  lt();
+function unmountApp() {
+  unmount();
 }
-function Zr({
-  callsProcessor: e,
-  shortcut: t = "$mod+D"
+
+function initializeDevTools({
+  callsProcessor,
+  shortcut
 }) {
-  gt(window, {
-    [t]: (n) => {
-      n.preventDefault();
-      const l = document.activeElement;
-      l instanceof HTMLElement && (l.isContentEditable || l.tagName === "INPUT" || l.tagName === "TEXTAREA") || jr();
-    }
-  }), hn({
-    callsProcessor: e
+  tinykeys(window, {
+    [shortcut]: (e) => {
+      e.preventDefault();
+      const active = document.activeElement;
+      const enteringText = active instanceof HTMLElement && (active.isContentEditable || active.tagName === "INPUT" || active.tagName === "TEXTAREA");
+      if (enteringText)
+        return;
+      initializeApp();
+    }
+  });
+  setConfig({
+    callsProcessor
   });
 }
-export {
-  Vr as addCall,
-  Zr as initializeDevTools
-};
+
+export { addCall, initializeDevTools };