@jsenv/server 16.1.2 → 16.2.1

package/dist/client/route_inspector/route_inspector.html

@@ -55,19 +55,38 @@
       `;
       
         const html = /* html */ `<style>
-      ${css}
-      </style>
-      <div class="clipboard_container">
-        <div id="copied_notif" aria-hidden="true">Copied !</div>
-        <button id="copy_button">
-          <svg id="copy_icon" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16">
-              <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
-          </svg>
-          <svg id="copied_icon" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16">
-              <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path>
-          </svg>
-        </button>
-      </div>`;
+            ${css}
+          </style>
+          <div class="clipboard_container">
+            <div id="copied_notif" aria-hidden="true">Copied !</div>
+            <button id="copy_button">
+              <svg
+                id="copy_icon"
+                aria-hidden="true"
+                viewBox="0 0 16 16"
+                width="16"
+                height="16"
+              >
+                <path
+                  d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"
+                ></path>
+                <path
+                  d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
+                ></path>
+              </svg>
+              <svg
+                id="copied_icon"
+                aria-hidden="true"
+                viewBox="0 0 16 16"
+                width="16"
+                height="16"
+              >
+                <path
+                  d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                ></path>
+              </svg>
+            </button>
+          </div>`;
         class ClipboardCopy extends HTMLElement {
           constructor() {
             super();
@@ -138,14 +157,17 @@
       `;
       
         const html = /* html */ `<style>
-      ${css}
-      </style>
-      <div id="code_block">
-        <pre id="pre"><code></code></pre>
-        <div id="clipboard_copy_container" style="position: absolute; right: 0; top: 0">
-          <clipboard-copy></clipboard-copy>
-        </div>
-      </div>
+            ${css}
+          </style>
+          <div id="code_block">
+            <pre id="pre"><code></code></pre>
+            <div
+              id="clipboard_copy_container"
+              style="position: absolute; right: 0; top: 0"
+            >
+              <clipboard-copy></clipboard-copy>
+            </div>
+          </div>
       `;
       
         let loadPromise;
@@ -224,35 +246,36 @@
     </script>
     <script>
       const css = /* css */ `
-      dialog {
-        opacity: 0;
-        transition: all 0.3s allow-discrete;
-      }
-      dialog::backdrop {
-         background-image: linear-gradient(
-          45deg,
-          magenta,
-          rebeccapurple,
-          dodgerblue,
-          green
-        );
-        opacity: 0;
-        transition: all 0.3s allow-discrete;
-      }
-      dialog:open {
-        opacity: 1;
-      }
-      dialog:open::backdrop {
-        opacity: 0.75;
-      }`;
+        dialog {
+          opacity: 0;
+          transition: all 0.3s allow-discrete;
+        }
+        dialog::backdrop {
+          background-image: linear-gradient(
+            45deg,
+            magenta,
+            rebeccapurple,
+            dodgerblue,
+            green
+          );
+          opacity: 0;
+          transition: all 0.3s allow-discrete;
+        }
+        dialog:open {
+          opacity: 1;
+        }
+        dialog:open::backdrop {
+          opacity: 0.75;
+        }
+      `;
       
       const html = /* html */ `<style>
           ${css}
-      </style>
-      <dialog>
+        </style>
+        <dialog>
           <p>Connection with server is lost</p>
           <button autofocus name="reconnect">Retry</button>
-      </dialog>`;
+        </dialog>`;
       
       class JsenvAutoreloadOnServerRestart extends HTMLElement {
         constructor({ url } = {}) {
@@ -395,6 +418,10 @@
   color: #1e90ff;
 }
 
+html {
+  scrollbar-gutter: stable both-edges;
+}
+
 body {
   color: var(--text-color);
   background-color: var(--background-color);
@@ -410,30 +437,35 @@ body {
 }
 
 aside {
-  background: var(--background-color);
-  border-radius: 6px;
   flex-shrink: 0;
   width: 250px;
-  max-height: calc(100vh - 40px);
+  height: 100%;
   margin-right: 20px;
-  padding-top: 20px;
-  padding-left: 10px;
   transition: width .3s, margin-left .3s;
-  overflow: hidden auto;
+  position: fixed;
 }
 
 main {
   flex-grow: 1;
   flex-basis: 0;
   min-width: 0;
-  padding-top: 10px;
+  margin-left: 280px;
+  padding-top: 20px;
   padding-right: 20px;
   transition: margin-left .3s;
 }
 
 .header_row {
+  align-items: flex-start;
+  gap: 10px;
+  display: flex;
+}
+
+.header_title {
   align-items: center;
   gap: 10px;
+  margin: 0;
+  line-height: 1;
   display: flex;
 }
 
@@ -666,12 +698,66 @@ main {
   }
 }
 
-.route_list {
+.route_container > * {
   flex-grow: 1;
   min-width: 0;
   margin-top: 20px;
 }
 
+.route_group_details {
+  margin: 0 0 15px;
+}
+
+.summary_marker {
+  width: 24px;
+  height: 24px;
+}
+
+.route_group_details > summary {
+  cursor: pointer;
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 7px;
+  list-style: none;
+}
+
+.route_group_details > summary::marker {
+  display: none;
+}
+
+.route_group_details[open] > summary .summary_marker {
+  transform: rotate(180deg);
+}
+
+.route_group_summary_container {
+  align-items: center;
+  padding: 5px;
+  display: flex;
+}
+
+.route_group_name {
+  text-align: center;
+  text-shadow: 0 1px #0000001a;
+  border-radius: 3px;
+  gap: .3em;
+  min-width: 80px;
+  padding: 6px 0;
+  font-family: sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  display: flex;
+}
+
+.route_group_description {
+  word-break: break-word;
+  user-select: none;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: 8px;
+  font-family: monospace;
+  font-size: 16px;
+  font-weight: 600;
+}
+
 .route_details {
   border: 1px solid #000;
   border-color: var(--method-color);
@@ -690,6 +776,10 @@ main {
   display: none;
 }
 
+.route_details:open > summary .summary_marker {
+  transform: rotate(180deg);
+}
+
 .route_summary_container {
   align-items: center;
   padding: 5px;
@@ -719,31 +809,31 @@ main {
   font-weight: 600;
 }
 
-.route_details[data-method="HEAD"] {
+.route_details[data-method="HEAD"], .route_group_details[data-method="HEAD"] {
   --method-color: var(--method-head-color);
 }
 
-.route_details[data-method="OPTIONS"] {
+.route_details[data-method="OPTIONS"], .route_group_details[data-method="OPTIONS"] {
   --method-color: var(--method-options-color);
 }
 
-.route_details[data-method="GET"] {
+.route_details[data-method="GET"], .route_group_details[data-method="GET"] {
   --method-color: var(--method-get-color);
 }
 
-.route_details[data-method="POST"] {
+.route_details[data-method="POST"], .route_group_details[data-method="POST"] {
   --method-color: var(--method-post-color);
 }
 
-.route_details[data-method="PUT"] {
+.route_details[data-method="PUT"], .route_group_details[data-method="PUT"] {
   --method-color: var(--method-put-color);
 }
 
-.route_details[data-method="PATCH"] {
+.route_details[data-method="PATCH"], .route_group_details[data-method="PATCH"] {
   --method-color: var(--method-patch-color);
 }
 
-.route_details[data-method="DELETE"] {
+.route_details[data-method="DELETE"], .route_group_details[data-method="DELETE"] {
   --method-color: var(--method-delete-color);
 }
 
@@ -774,11 +864,11 @@ main {
 }
 
 .filter_container {
-  border: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
   background: var(--secondary-color);
-  border-radius: 4px;
+  height: 100%;
   margin-bottom: 20px;
-  overflow: hidden;
+  overflow: hidden auto;
 }
 
 .filter_container::marker {
@@ -795,18 +885,25 @@ main {
   display: flex;
 }
 
-.filter:open .arrow_down {
+.filter:open > summary .summary_marker {
   transform: rotate(180deg);
 }
 
+.summary_text {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+  display: block;
+  overflow: hidden;
+}
+
 .filter_list {
   background: var(--background-color);
-  border-top: 1px solid var(--border-color);
   overflow: hidden;
 }
 
 .filter_item {
-  margin: 15px;
+  margin: 15px 15px 15px 0;
 }
 
 .filter_badge {
@@ -864,7 +961,6 @@ label .filter_text {
 }
 
 .filter_text[data-method] {
-  border-left: 5px solid var(--method-color);
   padding-left: 4px;
 }
 
@@ -930,19 +1026,27 @@ label .filter_text {
 .filter_button:hover {
   background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
 }
+
+.status_pill {
+  align-self: stretch;
+  width: .4em;
+  display: flex;
+}
 </style>
     <div class="container">
       <aside></aside>
       <main>
         <div class="header_row">
-          <h1 style="margin: 0">Route inspector</h1>
-          <button class="note_button_open" aria-label="Show information" title="About HTTP Methods">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="12" cy="12" r="10"></circle>
-              <line x1="12" y1="16" x2="12" y2="12"></line>
-              <line x1="12" y1="8" x2="12.01" y2="8"></line>
-            </svg>
-          </button>
+          <h1 class="header_title">
+            Route inspector
+            <button class="note_button_open" aria-label="Show information" title="About HTTP Methods">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"></circle>
+                <line x1="12" y1="16" x2="12" y2="12"></line>
+                <line x1="12" y1="8" x2="12.01" y2="8"></line>
+              </svg>
+            </button>
+          </h1>
           <div style="flex: 1"></div>
           <div class="theme-toggle">
             <button id="theme-toggle-btn" aria-label="Toggle dark/light mode">
@@ -1020,7 +1124,7 @@ label .filter_text {
       });
     </script>
     <script type="module">/* esm.sh - preact@10.23.1 */
-var M$2,h$1,X,ie,x$1,J,Y,R,j,$,O$1,T$1={},ee=[],le=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,I$1=Array.isArray;function b$3(_,e){for(var t in e)_[t]=e[t];return _}function _e(_){var e=_.parentNode;e&&e.removeChild(_);}function se(_,e,t){var i,n,r,l={};for(r in e)r=="key"?i=e[r]:r=="ref"?n=e[r]:l[r]=e[r];if(arguments.length>2&&(l.children=arguments.length>3?M$2.call(arguments,2):t),typeof _=="function"&&_.defaultProps!=null)for(r in _.defaultProps)l[r]===void 0&&(l[r]=_.defaultProps[r]);return U$2(_,l,i,n,null)}function U$2(_,e,t,i,n){var r={type:_,props:e,key:t,ref:i,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:n??++X,__i:-1,__u:0};return n==null&&h$1.vnode!=null&&h$1.vnode(r),r}function N(_){return _.children}function F$1(_,e){this.props=_,this.context=e;}function C$2(_,e){if(e==null)return _.__?C$2(_.__,_.__i+1):null;for(var t;e<_.__k.length;e++)if((t=_.__k[e])!=null&&t.__e!=null)return t.__e;return typeof _.type=="function"?C$2(_):null}function te(_){var e,t;if((_=_.__)!=null&&_.__c!=null){for(_.__e=_.__c.base=null,e=0;e<_.__k.length;e++)if((t=_.__k[e])!=null&&t.__e!=null){_.__e=_.__c.base=t.__e;break}return te(_)}}function B$1(_){(!_.__d&&(_.__d=true)&&x$1.push(_)&&!H$1.__r++||J!==h$1.debounceRendering)&&((J=h$1.debounceRendering)||Y)(H$1);}function H$1(){var _,e,t,i,n,r,l,s;for(x$1.sort(R);_=x$1.shift();)_.__d&&(e=x$1.length,i=void 0,r=(n=(t=_).__v).__e,l=[],s=[],t.__P&&((i=b$3({},n)).__v=n.__v+1,h$1.vnode&&h$1.vnode(i),z$1(t.__P,i,n,t.__n,t.__P.namespaceURI,32&n.__u?[r]:null,l,r??C$2(n),!!(32&n.__u),s),i.__v=n.__v,i.__.__k[i.__i]=i,re(l,i,s),i.__e!=r&&te(i)),x$1.length>e&&x$1.sort(R));H$1.__r=0;}function ne(_,e,t,i,n,r,l,s,c,u,p){var o,m,f,v,g,y=i&&i.__k||ee,a=e.length;for(t.__d=c,ue(t,e,y),c=t.__d,o=0;o<a;o++)(f=t.__k[o])!=null&&typeof f!="boolean"&&typeof f!="function"&&(m=f.__i===-1?T$1:y[f.__i]||T$1,f.__i=o,z$1(_,f,m,n,r,l,s,c,u,p),v=f.__e,f.ref&&m.ref!=f.ref&&(m.ref&&q$1(m.ref,null,f),p.push(f.ref,f.__c||v,f)),g==null&&v!=null&&(g=v),65536&f.__u||m.__k===f.__k?c=oe(f,c,_):typeof f.type=="function"&&f.__d!==void 0?c=f.__d:v&&(c=v.nextSibling),f.__d=void 0,f.__u&=-196609);t.__d=c,t.__e=g;}function ue(_,e,t){var i,n,r,l,s,c=e.length,u=t.length,p=u,o=0;for(_.__k=[],i=0;i<c;i++)l=i+o,(n=_.__k[i]=(n=e[i])==null||typeof n=="boolean"||typeof n=="function"?null:typeof n=="string"||typeof n=="number"||typeof n=="bigint"||n.constructor==String?U$2(null,n,null,null,null):I$1(n)?U$2(N,{children:n},null,null,null):n.constructor===void 0&&n.__b>0?U$2(n.type,n.props,n.key,n.ref?n.ref:null,n.__v):n)!=null?(n.__=_,n.__b=_.__b+1,s=ce(n,t,l,p),n.__i=s,r=null,s!==-1&&(p--,(r=t[s])&&(r.__u|=131072)),r==null||r.__v===null?(s==-1&&o--,typeof n.type!="function"&&(n.__u|=65536)):s!==l&&(s==l-1?o=s-l:s==l+1?o++:s>l?p>c-l?o+=s-l:o--:s<l&&o++,s!==i+o&&(n.__u|=65536))):(r=t[l])&&r.key==null&&r.__e&&!(131072&r.__u)&&(r.__e==_.__d&&(_.__d=C$2(r)),V(r,r,false),t[l]=null,p--);if(p)for(i=0;i<u;i++)(r=t[i])!=null&&!(131072&r.__u)&&(r.__e==_.__d&&(_.__d=C$2(r)),V(r,r));}function oe(_,e,t){var i,n;if(typeof _.type=="function"){for(i=_.__k,n=0;i&&n<i.length;n++)i[n]&&(i[n].__=_,e=oe(i[n],e,t));return e}_.__e!=e&&(e&&_.type&&!t.contains(e)&&(e=C$2(_)),t.insertBefore(_.__e,e||null),e=_.__e);do e=e&&e.nextSibling;while(e!=null&&e.nodeType===8);return e}function ce(_,e,t,i){var n=_.key,r=_.type,l=t-1,s=t+1,c=e[t];if(c===null||c&&n==c.key&&r===c.type&&!(131072&c.__u))return t;if(i>(c!=null&&!(131072&c.__u)?1:0))for(;l>=0||s<e.length;){if(l>=0){if((c=e[l])&&!(131072&c.__u)&&n==c.key&&r===c.type)return l;l--;}if(s<e.length){if((c=e[s])&&!(131072&c.__u)&&n==c.key&&r===c.type)return s;s++;}}return  -1}function K(_,e,t){e[0]==="-"?_.setProperty(e,t??""):_[e]=t==null?"":typeof t!="number"||le.test(e)?t:t+"px";}function W$1(_,e,t,i,n){var r;e:if(e==="style")if(typeof t=="string")_.style.cssText=t;else {if(typeof i=="string"&&(_.style.cssText=i=""),i)for(e in i)t&&e in t||K(_.style,e,"");if(t)for(e in t)i&&t[e]===i[e]||K(_.style,e,t[e]);}else if(e[0]==="o"&&e[1]==="n")r=e!==(e=e.replace(/(PointerCapture)$|Capture$/i,"$1")),e=e.toLowerCase()in _||e==="onFocusOut"||e==="onFocusIn"?e.toLowerCase().slice(2):e.slice(2),_.l||(_.l={}),_.l[e+r]=t,t?i?t.u=i.u:(t.u=j,_.addEventListener(e,r?O$1:$,r)):_.removeEventListener(e,r?O$1:$,r);else {if(n=="http://www.w3.org/2000/svg")e=e.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(e!="width"&&e!="height"&&e!="href"&&e!="list"&&e!="form"&&e!="tabIndex"&&e!="download"&&e!="rowSpan"&&e!="colSpan"&&e!="role"&&e!="popover"&&e in _)try{_[e]=t??"";break e}catch{}typeof t=="function"||(t==null||t===false&&e[4]!=="-"?_.removeAttribute(e):_.setAttribute(e,e=="popover"&&t==1?"":t));}}function Q(_){return function(e){if(this.l){var t=this.l[e.type+_];if(e.t==null)e.t=j++;else if(e.t<t.u)return;return t(h$1.event?h$1.event(e):e)}}}function z$1(_,e,t,i,n,r,l,s,c,u){var p,o,m,f,v,g,y,a,d,P,w,D,S,G,E,A,k=e.type;if(e.constructor!==void 0)return null;128&t.__u&&(c=!!(32&t.__u),r=[s=e.__e=t.__e]),(p=h$1.__b)&&p(e);e:if(typeof k=="function")try{if(a=e.props,d="prototype"in k&&k.prototype.render,P=(p=k.contextType)&&i[p.__c],w=p?P?P.props.value:p.__:i,t.__c?y=(o=e.__c=t.__c).__=o.__E:(d?e.__c=o=new k(a,w):(e.__c=o=new F$1(a,w),o.constructor=k,o.render=ae),P&&P.sub(o),o.props=a,o.state||(o.state={}),o.context=w,o.__n=i,m=o.__d=!0,o.__h=[],o._sb=[]),d&&o.__s==null&&(o.__s=o.state),d&&k.getDerivedStateFromProps!=null&&(o.__s==o.state&&(o.__s=b$3({},o.__s)),b$3(o.__s,k.getDerivedStateFromProps(a,o.__s))),f=o.props,v=o.state,o.__v=e,m)d&&k.getDerivedStateFromProps==null&&o.componentWillMount!=null&&o.componentWillMount(),d&&o.componentDidMount!=null&&o.__h.push(o.componentDidMount);else {if(d&&k.getDerivedStateFromProps==null&&a!==f&&o.componentWillReceiveProps!=null&&o.componentWillReceiveProps(a,w),!o.__e&&(o.shouldComponentUpdate!=null&&o.shouldComponentUpdate(a,o.__s,w)===!1||e.__v===t.__v)){for(e.__v!==t.__v&&(o.props=a,o.state=o.__s,o.__d=!1),e.__e=t.__e,e.__k=t.__k,e.__k.forEach(function(L){L&&(L.__=e);}),D=0;D<o._sb.length;D++)o.__h.push(o._sb[D]);o._sb=[],o.__h.length&&l.push(o);break e}o.componentWillUpdate!=null&&o.componentWillUpdate(a,o.__s,w),d&&o.componentDidUpdate!=null&&o.__h.push(function(){o.componentDidUpdate(f,v,g);});}if(o.context=w,o.props=a,o.__P=_,o.__e=!1,S=h$1.__r,G=0,d){for(o.state=o.__s,o.__d=!1,S&&S(e),p=o.render(o.props,o.state,o.context),E=0;E<o._sb.length;E++)o.__h.push(o._sb[E]);o._sb=[];}else do o.__d=!1,S&&S(e),p=o.render(o.props,o.state,o.context),o.state=o.__s;while(o.__d&&++G<25);o.state=o.__s,o.getChildContext!=null&&(i=b$3(b$3({},i),o.getChildContext())),d&&!m&&o.getSnapshotBeforeUpdate!=null&&(g=o.getSnapshotBeforeUpdate(f,v)),ne(_,I$1(A=p!=null&&p.type===N&&p.key==null?p.props.children:p)?A:[A],e,t,i,n,r,l,s,c,u),o.base=e.__e,e.__u&=-161,o.__h.length&&l.push(o),y&&(o.__E=o.__=null);}catch(L){if(e.__v=null,c||r!=null){for(e.__u|=c?160:32;s&&s.nodeType===8&&s.nextSibling;)s=s.nextSibling;r[r.indexOf(s)]=null,e.__e=s;}else e.__e=t.__e,e.__k=t.__k;h$1.__e(L,e,t);}else r==null&&e.__v===t.__v?(e.__k=t.__k,e.__e=t.__e):e.__e=pe(t.__e,e,t,i,n,r,l,c,u);(p=h$1.diffed)&&p(e);}function re(_,e,t){e.__d=void 0;for(var i=0;i<t.length;i++)q$1(t[i],t[++i],t[++i]);h$1.__c&&h$1.__c(e,_),_.some(function(n){try{_=n.__h,n.__h=[],_.some(function(r){r.call(n);});}catch(r){h$1.__e(r,n.__v);}});}function pe(_,e,t,i,n,r,l,s,c){var u,p,o,m,f,v,g,y=t.props,a=e.props,d=e.type;if(d==="svg"?n="http://www.w3.org/2000/svg":d==="math"?n="http://www.w3.org/1998/Math/MathML":n||(n="http://www.w3.org/1999/xhtml"),r!=null){for(u=0;u<r.length;u++)if((f=r[u])&&"setAttribute"in f==!!d&&(d?f.localName===d:f.nodeType===3)){_=f,r[u]=null;break}}if(_==null){if(d===null)return document.createTextNode(a);_=document.createElementNS(n,d,a.is&&a),r=null,s=false;}if(d===null)y===a||s&&_.data===a||(_.data=a);else {if(r=r&&M$2.call(_.childNodes),y=t.props||T$1,!s&&r!=null)for(y={},u=0;u<_.attributes.length;u++)y[(f=_.attributes[u]).name]=f.value;for(u in y)if(f=y[u],u!="children"){if(u=="dangerouslySetInnerHTML")o=f;else if(u!=="key"&&!(u in a)){if(u=="value"&&"defaultValue"in a||u=="checked"&&"defaultChecked"in a)continue;W$1(_,u,null,f,n);}}for(u in a)f=a[u],u=="children"?m=f:u=="dangerouslySetInnerHTML"?p=f:u=="value"?v=f:u=="checked"?g=f:u==="key"||s&&typeof f!="function"||y[u]===f||W$1(_,u,f,y[u],n);if(p)s||o&&(p.__html===o.__html||p.__html===_.innerHTML)||(_.innerHTML=p.__html),e.__k=[];else if(o&&(_.innerHTML=""),ne(_,I$1(m)?m:[m],e,t,i,d==="foreignObject"?"http://www.w3.org/1999/xhtml":n,r,l,r?r[0]:t.__k&&C$2(t,0),s,c),r!=null)for(u=r.length;u--;)r[u]!=null&&_e(r[u]);s||(u="value",v!==void 0&&(v!==_[u]||d==="progress"&&!v||d==="option"&&v!==y[u])&&W$1(_,u,v,y[u],n),u="checked",g!==void 0&&g!==_[u]&&W$1(_,u,g,y[u],n));}return _}function q$1(_,e,t){try{if(typeof _=="function"){var i=typeof _.__u=="function";i&&_.__u(),i&&e==null||(_.__u=_(e));}else _.current=e;}catch(n){h$1.__e(n,t);}}function V(_,e,t){var i,n;if(h$1.unmount&&h$1.unmount(_),(i=_.ref)&&(i.current&&i.current!==_.__e||q$1(i,null,e)),(i=_.__c)!=null){if(i.componentWillUnmount)try{i.componentWillUnmount();}catch(r){h$1.__e(r,e);}i.base=i.__P=null;}if(i=_.__k)for(n=0;n<i.length;n++)i[n]&&V(i[n],e,t||typeof _.type!="function");t||_.__e==null||_e(_.__e),_.__c=_.__=_.__e=_.__d=void 0;}function ae(_,e,t){return this.constructor(_,t)}function de(_,e,t){var i,n,r,l;h$1.__&&h$1.__(_,e),n=(i="undefined"=="function")?null:e.__k,r=[],l=[],z$1(e,_=(e).__k=se(N,null,[_]),n||T$1,T$1,e.namespaceURI,n?null:e.firstChild?M$2.call(e.childNodes):null,r,n?n.__e:e.firstChild,i,l),re(r,_,l);}M$2=ee.slice,h$1={__e:function(_,e,t,i){for(var n,r,l;e=e.__;)if((n=e.__c)&&!n.__)try{if((r=n.constructor)&&r.getDerivedStateFromError!=null&&(n.setState(r.getDerivedStateFromError(_)),l=n.__d),n.componentDidCatch!=null&&(n.componentDidCatch(_,i||{}),l=n.__d),l)return n.__E=n}catch(s){_=s;}throw _}},X=0,ie=function(_){return _!=null&&_.constructor==null},F$1.prototype.setState=function(_,e){var t;t=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=b$3({},this.state),typeof _=="function"&&(_=_(b$3({},t),this.props)),_&&b$3(t,_),_!=null&&this.__v&&(e&&this._sb.push(e),B$1(this));},F$1.prototype.forceUpdate=function(_){this.__v&&(this.__e=true,_&&this.__h.push(_),B$1(this));},F$1.prototype.render=N,x$1=[],Y=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,R=function(_,e){return _.__v.__b-e.__v.__b},H$1.__r=0,j=0,$=Q(false),O$1=Q(true);
+var M$2,h$1,X,ie,x$2,J,Y,R,j,$,O$1,T$1={},ee=[],le=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,I=Array.isArray;function b$3(_,e){for(var t in e)_[t]=e[t];return _}function _e(_){var e=_.parentNode;e&&e.removeChild(_);}function se(_,e,t){var i,n,r,l={};for(r in e)r=="key"?i=e[r]:r=="ref"?n=e[r]:l[r]=e[r];if(arguments.length>2&&(l.children=arguments.length>3?M$2.call(arguments,2):t),typeof _=="function"&&_.defaultProps!=null)for(r in _.defaultProps)l[r]===void 0&&(l[r]=_.defaultProps[r]);return U$1(_,l,i,n,null)}function U$1(_,e,t,i,n){var r={type:_,props:e,key:t,ref:i,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:n??++X,__i:-1,__u:0};return n==null&&h$1.vnode!=null&&h$1.vnode(r),r}function N(_){return _.children}function F$1(_,e){this.props=_,this.context=e;}function C$2(_,e){if(e==null)return _.__?C$2(_.__,_.__i+1):null;for(var t;e<_.__k.length;e++)if((t=_.__k[e])!=null&&t.__e!=null)return t.__e;return typeof _.type=="function"?C$2(_):null}function te(_){var e,t;if((_=_.__)!=null&&_.__c!=null){for(_.__e=_.__c.base=null,e=0;e<_.__k.length;e++)if((t=_.__k[e])!=null&&t.__e!=null){_.__e=_.__c.base=t.__e;break}return te(_)}}function B(_){(!_.__d&&(_.__d=true)&&x$2.push(_)&&!H$1.__r++||J!==h$1.debounceRendering)&&((J=h$1.debounceRendering)||Y)(H$1);}function H$1(){var _,e,t,i,n,r,l,s;for(x$2.sort(R);_=x$2.shift();)_.__d&&(e=x$2.length,i=void 0,r=(n=(t=_).__v).__e,l=[],s=[],t.__P&&((i=b$3({},n)).__v=n.__v+1,h$1.vnode&&h$1.vnode(i),z$1(t.__P,i,n,t.__n,t.__P.namespaceURI,32&n.__u?[r]:null,l,r??C$2(n),!!(32&n.__u),s),i.__v=n.__v,i.__.__k[i.__i]=i,re(l,i,s),i.__e!=r&&te(i)),x$2.length>e&&x$2.sort(R));H$1.__r=0;}function ne(_,e,t,i,n,r,l,s,c,u,p){var o,m,f,v,g,y=i&&i.__k||ee,a=e.length;for(t.__d=c,ue(t,e,y),c=t.__d,o=0;o<a;o++)(f=t.__k[o])!=null&&typeof f!="boolean"&&typeof f!="function"&&(m=f.__i===-1?T$1:y[f.__i]||T$1,f.__i=o,z$1(_,f,m,n,r,l,s,c,u,p),v=f.__e,f.ref&&m.ref!=f.ref&&(m.ref&&q$1(m.ref,null,f),p.push(f.ref,f.__c||v,f)),g==null&&v!=null&&(g=v),65536&f.__u||m.__k===f.__k?c=oe(f,c,_):typeof f.type=="function"&&f.__d!==void 0?c=f.__d:v&&(c=v.nextSibling),f.__d=void 0,f.__u&=-196609);t.__d=c,t.__e=g;}function ue(_,e,t){var i,n,r,l,s,c=e.length,u=t.length,p=u,o=0;for(_.__k=[],i=0;i<c;i++)l=i+o,(n=_.__k[i]=(n=e[i])==null||typeof n=="boolean"||typeof n=="function"?null:typeof n=="string"||typeof n=="number"||typeof n=="bigint"||n.constructor==String?U$1(null,n,null,null,null):I(n)?U$1(N,{children:n},null,null,null):n.constructor===void 0&&n.__b>0?U$1(n.type,n.props,n.key,n.ref?n.ref:null,n.__v):n)!=null?(n.__=_,n.__b=_.__b+1,s=ce(n,t,l,p),n.__i=s,r=null,s!==-1&&(p--,(r=t[s])&&(r.__u|=131072)),r==null||r.__v===null?(s==-1&&o--,typeof n.type!="function"&&(n.__u|=65536)):s!==l&&(s==l-1?o=s-l:s==l+1?o++:s>l?p>c-l?o+=s-l:o--:s<l&&o++,s!==i+o&&(n.__u|=65536))):(r=t[l])&&r.key==null&&r.__e&&!(131072&r.__u)&&(r.__e==_.__d&&(_.__d=C$2(r)),V(r,r,false),t[l]=null,p--);if(p)for(i=0;i<u;i++)(r=t[i])!=null&&!(131072&r.__u)&&(r.__e==_.__d&&(_.__d=C$2(r)),V(r,r));}function oe(_,e,t){var i,n;if(typeof _.type=="function"){for(i=_.__k,n=0;i&&n<i.length;n++)i[n]&&(i[n].__=_,e=oe(i[n],e,t));return e}_.__e!=e&&(e&&_.type&&!t.contains(e)&&(e=C$2(_)),t.insertBefore(_.__e,e||null),e=_.__e);do e=e&&e.nextSibling;while(e!=null&&e.nodeType===8);return e}function ce(_,e,t,i){var n=_.key,r=_.type,l=t-1,s=t+1,c=e[t];if(c===null||c&&n==c.key&&r===c.type&&!(131072&c.__u))return t;if(i>(c!=null&&!(131072&c.__u)?1:0))for(;l>=0||s<e.length;){if(l>=0){if((c=e[l])&&!(131072&c.__u)&&n==c.key&&r===c.type)return l;l--;}if(s<e.length){if((c=e[s])&&!(131072&c.__u)&&n==c.key&&r===c.type)return s;s++;}}return  -1}function K(_,e,t){e[0]==="-"?_.setProperty(e,t??""):_[e]=t==null?"":typeof t!="number"||le.test(e)?t:t+"px";}function W$1(_,e,t,i,n){var r;e:if(e==="style")if(typeof t=="string")_.style.cssText=t;else {if(typeof i=="string"&&(_.style.cssText=i=""),i)for(e in i)t&&e in t||K(_.style,e,"");if(t)for(e in t)i&&t[e]===i[e]||K(_.style,e,t[e]);}else if(e[0]==="o"&&e[1]==="n")r=e!==(e=e.replace(/(PointerCapture)$|Capture$/i,"$1")),e=e.toLowerCase()in _||e==="onFocusOut"||e==="onFocusIn"?e.toLowerCase().slice(2):e.slice(2),_.l||(_.l={}),_.l[e+r]=t,t?i?t.u=i.u:(t.u=j,_.addEventListener(e,r?O$1:$,r)):_.removeEventListener(e,r?O$1:$,r);else {if(n=="http://www.w3.org/2000/svg")e=e.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(e!="width"&&e!="height"&&e!="href"&&e!="list"&&e!="form"&&e!="tabIndex"&&e!="download"&&e!="rowSpan"&&e!="colSpan"&&e!="role"&&e!="popover"&&e in _)try{_[e]=t??"";break e}catch{}typeof t=="function"||(t==null||t===false&&e[4]!=="-"?_.removeAttribute(e):_.setAttribute(e,e=="popover"&&t==1?"":t));}}function Q(_){return function(e){if(this.l){var t=this.l[e.type+_];if(e.t==null)e.t=j++;else if(e.t<t.u)return;return t(h$1.event?h$1.event(e):e)}}}function z$1(_,e,t,i,n,r,l,s,c,u){var p,o,m,f,v,g,y,a,d,P,w,D,S,G,E,A,k=e.type;if(e.constructor!==void 0)return null;128&t.__u&&(c=!!(32&t.__u),r=[s=e.__e=t.__e]),(p=h$1.__b)&&p(e);e:if(typeof k=="function")try{if(a=e.props,d="prototype"in k&&k.prototype.render,P=(p=k.contextType)&&i[p.__c],w=p?P?P.props.value:p.__:i,t.__c?y=(o=e.__c=t.__c).__=o.__E:(d?e.__c=o=new k(a,w):(e.__c=o=new F$1(a,w),o.constructor=k,o.render=ae),P&&P.sub(o),o.props=a,o.state||(o.state={}),o.context=w,o.__n=i,m=o.__d=!0,o.__h=[],o._sb=[]),d&&o.__s==null&&(o.__s=o.state),d&&k.getDerivedStateFromProps!=null&&(o.__s==o.state&&(o.__s=b$3({},o.__s)),b$3(o.__s,k.getDerivedStateFromProps(a,o.__s))),f=o.props,v=o.state,o.__v=e,m)d&&k.getDerivedStateFromProps==null&&o.componentWillMount!=null&&o.componentWillMount(),d&&o.componentDidMount!=null&&o.__h.push(o.componentDidMount);else {if(d&&k.getDerivedStateFromProps==null&&a!==f&&o.componentWillReceiveProps!=null&&o.componentWillReceiveProps(a,w),!o.__e&&(o.shouldComponentUpdate!=null&&o.shouldComponentUpdate(a,o.__s,w)===!1||e.__v===t.__v)){for(e.__v!==t.__v&&(o.props=a,o.state=o.__s,o.__d=!1),e.__e=t.__e,e.__k=t.__k,e.__k.forEach(function(L){L&&(L.__=e);}),D=0;D<o._sb.length;D++)o.__h.push(o._sb[D]);o._sb=[],o.__h.length&&l.push(o);break e}o.componentWillUpdate!=null&&o.componentWillUpdate(a,o.__s,w),d&&o.componentDidUpdate!=null&&o.__h.push(function(){o.componentDidUpdate(f,v,g);});}if(o.context=w,o.props=a,o.__P=_,o.__e=!1,S=h$1.__r,G=0,d){for(o.state=o.__s,o.__d=!1,S&&S(e),p=o.render(o.props,o.state,o.context),E=0;E<o._sb.length;E++)o.__h.push(o._sb[E]);o._sb=[];}else do o.__d=!1,S&&S(e),p=o.render(o.props,o.state,o.context),o.state=o.__s;while(o.__d&&++G<25);o.state=o.__s,o.getChildContext!=null&&(i=b$3(b$3({},i),o.getChildContext())),d&&!m&&o.getSnapshotBeforeUpdate!=null&&(g=o.getSnapshotBeforeUpdate(f,v)),ne(_,I(A=p!=null&&p.type===N&&p.key==null?p.props.children:p)?A:[A],e,t,i,n,r,l,s,c,u),o.base=e.__e,e.__u&=-161,o.__h.length&&l.push(o),y&&(o.__E=o.__=null);}catch(L){if(e.__v=null,c||r!=null){for(e.__u|=c?160:32;s&&s.nodeType===8&&s.nextSibling;)s=s.nextSibling;r[r.indexOf(s)]=null,e.__e=s;}else e.__e=t.__e,e.__k=t.__k;h$1.__e(L,e,t);}else r==null&&e.__v===t.__v?(e.__k=t.__k,e.__e=t.__e):e.__e=pe(t.__e,e,t,i,n,r,l,c,u);(p=h$1.diffed)&&p(e);}function re(_,e,t){e.__d=void 0;for(var i=0;i<t.length;i++)q$1(t[i],t[++i],t[++i]);h$1.__c&&h$1.__c(e,_),_.some(function(n){try{_=n.__h,n.__h=[],_.some(function(r){r.call(n);});}catch(r){h$1.__e(r,n.__v);}});}function pe(_,e,t,i,n,r,l,s,c){var u,p,o,m,f,v,g,y=t.props,a=e.props,d=e.type;if(d==="svg"?n="http://www.w3.org/2000/svg":d==="math"?n="http://www.w3.org/1998/Math/MathML":n||(n="http://www.w3.org/1999/xhtml"),r!=null){for(u=0;u<r.length;u++)if((f=r[u])&&"setAttribute"in f==!!d&&(d?f.localName===d:f.nodeType===3)){_=f,r[u]=null;break}}if(_==null){if(d===null)return document.createTextNode(a);_=document.createElementNS(n,d,a.is&&a),r=null,s=false;}if(d===null)y===a||s&&_.data===a||(_.data=a);else {if(r=r&&M$2.call(_.childNodes),y=t.props||T$1,!s&&r!=null)for(y={},u=0;u<_.attributes.length;u++)y[(f=_.attributes[u]).name]=f.value;for(u in y)if(f=y[u],u!="children"){if(u=="dangerouslySetInnerHTML")o=f;else if(u!=="key"&&!(u in a)){if(u=="value"&&"defaultValue"in a||u=="checked"&&"defaultChecked"in a)continue;W$1(_,u,null,f,n);}}for(u in a)f=a[u],u=="children"?m=f:u=="dangerouslySetInnerHTML"?p=f:u=="value"?v=f:u=="checked"?g=f:u==="key"||s&&typeof f!="function"||y[u]===f||W$1(_,u,f,y[u],n);if(p)s||o&&(p.__html===o.__html||p.__html===_.innerHTML)||(_.innerHTML=p.__html),e.__k=[];else if(o&&(_.innerHTML=""),ne(_,I(m)?m:[m],e,t,i,d==="foreignObject"?"http://www.w3.org/1999/xhtml":n,r,l,r?r[0]:t.__k&&C$2(t,0),s,c),r!=null)for(u=r.length;u--;)r[u]!=null&&_e(r[u]);s||(u="value",v!==void 0&&(v!==_[u]||d==="progress"&&!v||d==="option"&&v!==y[u])&&W$1(_,u,v,y[u],n),u="checked",g!==void 0&&g!==_[u]&&W$1(_,u,g,y[u],n));}return _}function q$1(_,e,t){try{if(typeof _=="function"){var i=typeof _.__u=="function";i&&_.__u(),i&&e==null||(_.__u=_(e));}else _.current=e;}catch(n){h$1.__e(n,t);}}function V(_,e,t){var i,n;if(h$1.unmount&&h$1.unmount(_),(i=_.ref)&&(i.current&&i.current!==_.__e||q$1(i,null,e)),(i=_.__c)!=null){if(i.componentWillUnmount)try{i.componentWillUnmount();}catch(r){h$1.__e(r,e);}i.base=i.__P=null;}if(i=_.__k)for(n=0;n<i.length;n++)i[n]&&V(i[n],e,t||typeof _.type!="function");t||_.__e==null||_e(_.__e),_.__c=_.__=_.__e=_.__d=void 0;}function ae(_,e,t){return this.constructor(_,t)}function de(_,e,t){var i,n,r,l;h$1.__&&h$1.__(_,e),n=(i="undefined"=="function")?null:e.__k,r=[],l=[],z$1(e,_=(e).__k=se(N,null,[_]),n||T$1,T$1,e.namespaceURI,n?null:e.firstChild?M$2.call(e.childNodes):null,r,n?n.__e:e.firstChild,i,l),re(r,_,l);}M$2=ee.slice,h$1={__e:function(_,e,t,i){for(var n,r,l;e=e.__;)if((n=e.__c)&&!n.__)try{if((r=n.constructor)&&r.getDerivedStateFromError!=null&&(n.setState(r.getDerivedStateFromError(_)),l=n.__d),n.componentDidCatch!=null&&(n.componentDidCatch(_,i||{}),l=n.__d),l)return n.__E=n}catch(s){_=s;}throw _}},X=0,ie=function(_){return _!=null&&_.constructor==null},F$1.prototype.setState=function(_,e){var t;t=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=b$3({},this.state),typeof _=="function"&&(_=_(b$3({},t),this.props)),_&&b$3(t,_),_!=null&&this.__v&&(e&&this._sb.push(e),B(this));},F$1.prototype.forceUpdate=function(_){this.__v&&(this.__e=true,_&&this.__h.push(_),B(this));},F$1.prototype.render=N,x$2=[],Y=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,R=function(_,e){return _.__v.__b-e.__v.__b},H$1.__r=0,j=0,$=Q(false),O$1=Q(true);
 
 /* esm.sh - htm@3.1.1 */
 var a$2=function(p,f,c,n){var l;f[0]=0;for(var u=1;u<f.length;u++){var g=f[u++],o=f[u]?(f[0]|=g?1:2,c[f[u++]]):f[++u];g===3?n[0]=o:g===4?n[1]=Object.assign(n[1]||{},o):g===5?(n[1]=n[1]||{})[f[++u]]=o:g===6?n[1][f[++u]]+=o+"":g?(l=p.apply(o,a$2(p,o,c,["",null])),n.push(l),o[0]?f[0]|=2:(f[u-2]=0,f[u]=l)):n.push(o);}return n},M$1=new Map;function b$2(p){var f=M$1.get(this);return f||(f=new Map,M$1.set(this,f)),(f=a$2(this,f.get(p)||(f.set(p,f=function(c){for(var n,l,u=1,g="",o="",i=[0],s=function(v){u===1&&(v||(g=g.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?i.push(0,v,g):u===3&&(v||g)?(i.push(3,v,g),u=2):u===2&&g==="..."&&v?i.push(4,v,0):u===2&&g&&!v?i.push(5,0,true,g):u>=5&&((g||!v&&u===5)&&(i.push(u,0,g,l),u=6),v&&(i.push(u,v,0,l),u=6)),g="";},t=0;t<c.length;t++){t&&(u===1&&s(),s(t));for(var w=0;w<c[t].length;w++)n=c[t][w],u===1?n==="<"?(s(),i=[i],u=3):g+=n:u===4?g==="--"&&n===">"?(u=1,g=""):g=n+g[0]:o?n===o?o="":g+=n:n==='"'||n==="'"?o=n:n===">"?(s(),u=1):u&&(n==="="?(u=5,l=g,g=""):n==="/"&&(u<5||c[t][w+1]===">")?(s(),u===3&&(i=i[0]),u=i,(i=i[0]).push(2,0,u),u=0):n===" "||n==="	"||n===`
@@ -1029,14 +1133,14 @@ var a$2=function(p,f,c,n){var l;f[0]=0;for(var u=1;u<f.length;u++){var g=f[u++],
 /* esm.sh - htm@3.1.1/preact */
 var p$3=b$2.bind(se);
 
-/* esm.sh - @preact/signals-core@1.8.0 */
-var b$1=Symbol.for("preact-signals");function d$1(){if(s>1)s--;else {for(var t,i=false;e!==void 0;){var n=e;for(e=void 0,a$1++;n!==void 0;){var f=n.o;if(n.o=void 0,n.f&=-3,!(8&n.f)&&y(n))try{n.c();}catch(x){i||(t=x,i=true);}n=f;}}if(a$1=0,s--,i)throw t}}var o$1=void 0;var e=void 0,s=0,a$1=0,u=0;function p$2(t){if(o$1!==void 0){var i=t.n;if(i===void 0||i.t!==o$1)return i={i:0,S:t,p:o$1.s,n:void 0,t:o$1,e:void 0,x:void 0,r:i},o$1.s!==void 0&&(o$1.s.n=i),o$1.s=i,t.n=i,32&o$1.f&&t.S(i),i;if(i.i===-1)return i.i=0,i.n!==void 0&&(i.n.p=i.p,i.p!==void 0&&(i.p.n=i.n),i.p=o$1.s,i.n=void 0,o$1.s.n=i,o$1.s=i),i}}function r$1(t){this.v=t,this.i=0,this.n=void 0,this.t=void 0;}r$1.prototype.brand=b$1;r$1.prototype.h=function(){return  true};r$1.prototype.S=function(t){this.t!==t&&t.e===void 0&&(t.x=this.t,this.t!==void 0&&(this.t.e=t),this.t=t);};r$1.prototype.U=function(t){if(this.t!==void 0){var i=t.e,n=t.x;i!==void 0&&(i.x=n,t.e=void 0),n!==void 0&&(n.e=i,t.x=void 0),t===this.t&&(this.t=n);}};r$1.prototype.subscribe=function(t){var i=this;return U$1(function(){var n=i.value,f=o$1;o$1=void 0;try{t(n);}finally{o$1=f;}})};r$1.prototype.valueOf=function(){return this.value};r$1.prototype.toString=function(){return this.value+""};r$1.prototype.toJSON=function(){return this.value};r$1.prototype.peek=function(){var t=o$1;o$1=void 0;try{return this.value}finally{o$1=t;}};Object.defineProperty(r$1.prototype,"value",{get:function(){var t=p$2(this);return t!==void 0&&(t.i=this.i),this.v},set:function(t){if(t!==this.v){if(a$1>100)throw new Error("Cycle detected");this.v=t,this.i++,u++,s++;try{for(var i=this.t;i!==void 0;i=i.x)i.t.N();}finally{d$1();}}}});function O(t){return new r$1(t)}function y(t){for(var i=t.s;i!==void 0;i=i.n)if(i.S.i!==i.i||!i.S.h()||i.S.i!==i.i)return  true;return  false}function l$1(t){for(var i=t.s;i!==void 0;i=i.n){var n=i.S.n;if(n!==void 0&&(i.r=n),i.S.n=i,i.i=-1,i.n===void 0){t.s=i;break}}}function S$2(t){for(var i=t.s,n=void 0;i!==void 0;){var f=i.p;i.i===-1?(i.S.U(i),f!==void 0&&(f.n=i.n),i.n!==void 0&&(i.n.p=f)):n=i,i.S.n=i.r,i.r!==void 0&&(i.r=void 0),i=f;}t.s=n;}function h(t){r$1.call(this,void 0),this.x=t,this.s=void 0,this.g=u-1,this.f=4;}(h.prototype=new r$1).h=function(){if(this.f&=-3,1&this.f)return  false;if((36&this.f)==32||(this.f&=-5,this.g===u))return  true;if(this.g=u,this.f|=1,this.i>0&&!y(this))return this.f&=-2,true;var t=o$1;try{l$1(this),o$1=this;var i=this.x();(16&this.f||this.v!==i||this.i===0)&&(this.v=i,this.f&=-17,this.i++);}catch(n){this.v=n,this.f|=16,this.i++;}return o$1=t,S$2(this),this.f&=-2,true};h.prototype.S=function(t){if(this.t===void 0){this.f|=36;for(var i=this.s;i!==void 0;i=i.n)i.S.S(i);}r$1.prototype.S.call(this,t);};h.prototype.U=function(t){if(this.t!==void 0&&(r$1.prototype.U.call(this,t),this.t===void 0)){this.f&=-33;for(var i=this.s;i!==void 0;i=i.n)i.S.U(i);}};h.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;t!==void 0;t=t.x)t.t.N();}};Object.defineProperty(h.prototype,"value",{get:function(){if(1&this.f)throw new Error("Cycle detected");var t=p$2(this);if(this.h(),t!==void 0&&(t.i=this.i),16&this.f)throw this.v;return this.v}});function k$1(t){return new h(t)}function w$1(t){var i=t.u;if(t.u=void 0,typeof i=="function"){s++;var n=o$1;o$1=void 0;try{i();}catch(f){throw t.f&=-2,t.f|=8,c$2(t),f}finally{o$1=n,d$1();}}}function c$2(t){for(var i=t.s;i!==void 0;i=i.n)i.S.U(i);t.x=void 0,t.s=void 0,w$1(t);}function g$1(t){if(o$1!==this)throw new Error("Out-of-order effect");S$2(this),o$1=t,this.f&=-2,8&this.f&&c$2(this),d$1();}function v$1(t){this.x=t,this.u=void 0,this.s=void 0,this.o=void 0,this.f=32;}v$1.prototype.c=function(){var t=this.S();try{if(8&this.f||this.x===void 0)return;var i=this.x();typeof i=="function"&&(this.u=i);}finally{t();}};v$1.prototype.S=function(){if(1&this.f)throw new Error("Cycle detected");this.f|=1,this.f&=-9,w$1(this),l$1(this),s++;var t=o$1;return o$1=this,g$1.bind(this,t)};v$1.prototype.N=function(){2&this.f||(this.f|=2,this.o=e,e=this);};v$1.prototype.d=function(){this.f|=8,1&this.f||c$2(this);};function U$1(t){var i=new v$1(t);try{i.c();}catch(n){throw i.d(),n}return i.d.bind(i)}
+/* esm.sh - @preact/signals-core@1.11.0 */
+var g$1=Symbol.for("preact-signals");function a$1(){if(s>1)s--;else {for(var t,i=false;v$1!==void 0;){var o=v$1;for(v$1=void 0,c$2++;o!==void 0;){var r=o.o;if(o.o=void 0,o.f&=-3,!(8&o.f)&&w$1(o))try{o.c();}catch(u){i||(t=u,i=true);}o=r;}}if(c$2=0,s--,i)throw t}}var n=void 0;function l$1(t){var i=n;n=void 0;try{return t()}finally{n=i;}}var v$1=void 0,s=0,c$2=0,d$1=0;function y(t){if(n!==void 0){var i=t.n;if(i===void 0||i.t!==n)return i={i:0,S:t,p:n.s,n:void 0,t:n,e:void 0,x:void 0,r:i},n.s!==void 0&&(n.s.n=i),n.s=i,t.n=i,32&n.f&&t.S(i),i;if(i.i===-1)return i.i=0,i.n!==void 0&&(i.n.p=i.p,i.p!==void 0&&(i.p.n=i.n),i.p=n.s,i.n=void 0,n.s.n=i,n.s=i),i}}function f(t,i){this.v=t,this.i=0,this.n=void 0,this.t=void 0,this.W=i?.watched,this.Z=i?.unwatched;}f.prototype.brand=g$1;f.prototype.h=function(){return  true};f.prototype.S=function(t){var i=this,o=this.t;o!==t&&t.e===void 0&&(t.x=o,this.t=t,o!==void 0?o.e=t:l$1(function(){var r;(r=i.W)==null||r.call(i);}));};f.prototype.U=function(t){var i=this;if(this.t!==void 0){var o=t.e,r=t.x;o!==void 0&&(o.x=r,t.e=void 0),r!==void 0&&(r.e=o,t.x=void 0),t===this.t&&(this.t=r,r===void 0&&l$1(function(){var u;(u=i.Z)==null||u.call(i);}));}};f.prototype.subscribe=function(t){var i=this;return E$1(function(){var o=i.value,r=n;n=void 0;try{t(o);}finally{n=r;}})};f.prototype.valueOf=function(){return this.value};f.prototype.toString=function(){return this.value+""};f.prototype.toJSON=function(){return this.value};f.prototype.peek=function(){var t=n;n=void 0;try{return this.value}finally{n=t;}};Object.defineProperty(f.prototype,"value",{get:function(){var t=y(this);return t!==void 0&&(t.i=this.i),this.v},set:function(t){if(t!==this.v){if(c$2>100)throw new Error("Cycle detected");this.v=t,this.i++,d$1++,s++;try{for(var i=this.t;i!==void 0;i=i.x)i.t.N();}finally{a$1();}}}});function O(t,i){return new f(t,i)}function w$1(t){for(var i=t.s;i!==void 0;i=i.n)if(i.S.i!==i.i||!i.S.h()||i.S.i!==i.i)return  true;return  false}function S$2(t){for(var i=t.s;i!==void 0;i=i.n){var o=i.S.n;if(o!==void 0&&(i.r=o),i.S.n=i,i.i=-1,i.n===void 0){t.s=i;break}}}function x$1(t){for(var i=t.s,o=void 0;i!==void 0;){var r=i.p;i.i===-1?(i.S.U(i),r!==void 0&&(r.n=i.n),i.n!==void 0&&(i.n.p=r)):o=i,i.S.n=i.r,i.r!==void 0&&(i.r=void 0),i=r;}t.s=o;}function h(t,i){f.call(this,void 0),this.x=t,this.s=void 0,this.g=d$1-1,this.f=4,this.W=i?.watched,this.Z=i?.unwatched;}h.prototype=new f;h.prototype.h=function(){if(this.f&=-3,1&this.f)return  false;if((36&this.f)==32||(this.f&=-5,this.g===d$1))return  true;if(this.g=d$1,this.f|=1,this.i>0&&!w$1(this))return this.f&=-2,true;var t=n;try{S$2(this),n=this;var i=this.x();(16&this.f||this.v!==i||this.i===0)&&(this.v=i,this.f&=-17,this.i++);}catch(o){this.v=o,this.f|=16,this.i++;}return n=t,x$1(this),this.f&=-2,true};h.prototype.S=function(t){if(this.t===void 0){this.f|=36;for(var i=this.s;i!==void 0;i=i.n)i.S.S(i);}f.prototype.S.call(this,t);};h.prototype.U=function(t){if(this.t!==void 0&&(f.prototype.U.call(this,t),this.t===void 0)){this.f&=-33;for(var i=this.s;i!==void 0;i=i.n)i.S.U(i);}};h.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;t!==void 0;t=t.x)t.t.N();}};Object.defineProperty(h.prototype,"value",{get:function(){if(1&this.f)throw new Error("Cycle detected");var t=y(this);if(this.h(),t!==void 0&&(t.i=this.i),16&this.f)throw this.v;return this.v}});function k$1(t,i){return new h(t,i)}function b$1(t){var i=t.u;if(t.u=void 0,typeof i=="function"){s++;var o=n;n=void 0;try{i();}catch(r){throw t.f&=-2,t.f|=8,p$2(t),r}finally{n=o,a$1();}}}function p$2(t){for(var i=t.s;i!==void 0;i=i.n)i.S.U(i);t.x=void 0,t.s=void 0,b$1(t);}function U(t){if(n!==this)throw new Error("Out-of-order effect");x$1(this),n=t,this.f&=-2,8&this.f&&p$2(this),a$1();}function e(t){this.x=t,this.u=void 0,this.s=void 0,this.o=void 0,this.f=32;}e.prototype.c=function(){var t=this.S();try{if(8&this.f||this.x===void 0)return;var i=this.x();typeof i=="function"&&(this.u=i);}finally{t();}};e.prototype.S=function(){if(1&this.f)throw new Error("Cycle detected");this.f|=1,this.f&=-9,b$1(this),S$2(this),s++;var t=n;return n=this,U.bind(this,t)};e.prototype.N=function(){2&this.f||(this.f|=2,this.o=v$1,v$1=this);};e.prototype.d=function(){this.f|=8,1&this.f||p$2(this);};e.prototype.dispose=function(){this.d();};function E$1(t){var i=new e(t);try{i.c();}catch(r){throw i.d(),r}var o=i.d.bind(i);return o[Symbol.dispose]=o,o}
 
 /* esm.sh - preact@10.23.1/hooks */
-var c$1,r,d,b,v=0,x=[],o=h$1,g=o.__b,C$1=o.__r,A=o.diffed,D=o.__c,F=o.unmount,k=o.__;function l(t,_){o.__h&&o.__h(r,t,v||_),v=0;var u=r.__H||(r.__H={__:[],__h:[]});return t>=u.__.length&&u.__.push({}),u.__[t]}function B(t){return v=1,I(U,t)}function I(t,_,u){var n=l(c$1++,2);if(n.t=t,!n.__c&&(n.__=[U(void 0,_),function(a){var f=n.__N?n.__N[0]:n.__[0],s=n.t(f,a);f!==s&&(n.__N=[s,n.__[1]],n.__c.setState({}));}],n.__c=r,!r.u)){var i=function(a,f,s){if(!n.__c.__H)return  true;var m=n.__c.__H.__.filter(function(e){return !!e.__c});if(m.every(function(e){return !e.__N}))return !h||h.call(this,a,f,s);var N=false;return m.forEach(function(e){if(e.__N){var P=e.__[0];e.__=e.__N,e.__N=void 0,P!==e.__[0]&&(N=true);}}),!(!N&&n.__c.props===a)&&(!h||h.call(this,a,f,s))};r.u=true;var h=r.shouldComponentUpdate,y=r.componentWillUpdate;r.componentWillUpdate=function(a,f,s){if(this.__e){var m=h;h=void 0,i(a,f,s),h=m;}y&&y.call(this,a,f,s);},r.shouldComponentUpdate=i;}return n.__N||n.__}function z(t){return v=5,T(function(){return {current:t}},[])}function T(t,_){var u=l(c$1++,7);return E(u.__H,_)&&(u.__=t(),u.__H=_,u.__h=t),u.__}function M(t,_){return v=8,T(function(){return t},_)}function S$1(){for(var t;t=x.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(p$1),t.__H.__h.forEach(H),t.__H.__h=[];}catch(_){t.__H.__h=[],o.__e(_,t.__v);}}o.__b=function(t){r=null,g&&g(t);},o.__=function(t,_){t&&_.__k&&_.__k.__m&&(t.__m=_.__k.__m),k&&k(t,_);},o.__r=function(t){C$1&&C$1(t),c$1=0;var _=(r=t.__c).__H;_&&(d===r?(_.__h=[],r.__h=[],_.__.forEach(function(u){u.__N&&(u.__=u.__N),u.i=u.__N=void 0;})):(_.__h.forEach(p$1),_.__h.forEach(H),_.__h=[],c$1=0)),d=r;},o.diffed=function(t){A&&A(t);var _=t.__c;_&&_.__H&&(_.__H.__h.length&&(x.push(_)!==1&&b===o.requestAnimationFrame||((b=o.requestAnimationFrame)||W)(S$1)),_.__H.__.forEach(function(u){u.i&&(u.__H=u.i),u.i=void 0;})),d=r=null;},o.__c=function(t,_){_.some(function(u){try{u.__h.forEach(p$1),u.__h=u.__h.filter(function(n){return !n.__||H(n)});}catch(n){_.some(function(i){i.__h&&(i.__h=[]);}),_=[],o.__e(n,u.__v);}}),D&&D(t,_);},o.unmount=function(t){F&&F(t);var _,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{p$1(n);}catch(i){_=i;}}),u.__H=void 0,_&&o.__e(_,u.__v));};var q=typeof requestAnimationFrame=="function";function W(t){var _,u=function(){clearTimeout(n),q&&cancelAnimationFrame(_),setTimeout(t);},n=setTimeout(u,100);q&&(_=requestAnimationFrame(u));}function p$1(t){var _=r,u=t.__c;typeof u=="function"&&(t.__c=void 0,u()),r=_;}function H(t){var _=r;t.__c=t.__(),r=_;}function E(t,_){return !t||t.length!==_.length||_.some(function(u,n){return u!==t[n]})}function U(t,_){return typeof _=="function"?_(t):_}
+var c$1,r,d,b,v=0,x=[],o=h$1,g=o.__b,C$1=o.__r,A=o.diffed,D=o.__c,F=o.unmount,k=o.__;function l(t,_){o.__h&&o.__h(r,t,v||_),v=0;var u=r.__H||(r.__H={__:[],__h:[]});return t>=u.__.length&&u.__.push({}),u.__[t]}function z(t){return v=5,T(function(){return {current:t}},[])}function T(t,_){var u=l(c$1++,7);return E(u.__H,_)&&(u.__=t(),u.__H=_,u.__h=t),u.__}function M(t,_){return v=8,T(function(){return t},_)}function S$1(){for(var t;t=x.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(p$1),t.__H.__h.forEach(H),t.__H.__h=[];}catch(_){t.__H.__h=[],o.__e(_,t.__v);}}o.__b=function(t){r=null,g&&g(t);},o.__=function(t,_){t&&_.__k&&_.__k.__m&&(t.__m=_.__k.__m),k&&k(t,_);},o.__r=function(t){C$1&&C$1(t),c$1=0;var _=(r=t.__c).__H;_&&(d===r?(_.__h=[],r.__h=[],_.__.forEach(function(u){u.__N&&(u.__=u.__N),u.i=u.__N=void 0;})):(_.__h.forEach(p$1),_.__h.forEach(H),_.__h=[],c$1=0)),d=r;},o.diffed=function(t){A&&A(t);var _=t.__c;_&&_.__H&&(_.__H.__h.length&&(x.push(_)!==1&&b===o.requestAnimationFrame||((b=o.requestAnimationFrame)||W)(S$1)),_.__H.__.forEach(function(u){u.i&&(u.__H=u.i),u.i=void 0;})),d=r=null;},o.__c=function(t,_){_.some(function(u){try{u.__h.forEach(p$1),u.__h=u.__h.filter(function(n){return !n.__||H(n)});}catch(n){_.some(function(i){i.__h&&(i.__h=[]);}),_=[],o.__e(n,u.__v);}}),D&&D(t,_);},o.unmount=function(t){F&&F(t);var _,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{p$1(n);}catch(i){_=i;}}),u.__H=void 0,_&&o.__e(_,u.__v));};var q=typeof requestAnimationFrame=="function";function W(t){var _,u=function(){clearTimeout(n),q&&cancelAnimationFrame(_),setTimeout(t);},n=setTimeout(u,100);q&&(_=requestAnimationFrame(u));}function p$1(t){var _=r,u=t.__c;typeof u=="function"&&(t.__c=void 0,u()),r=_;}function H(t){var _=r;t.__c=t.__(),r=_;}function E(t,_){return !t||t.length!==_.length||_.some(function(u,n){return u!==t[n]})}
 
 /* esm.sh - @preact/signals@1.3.0 */
-var p;function a(e,n){h$1[e]=n.bind(null,h$1[e]||function(){});}function c(e){p&&p(),p=e&&e.S();}function S(e){var n=this,t=e.data,i=w(t);i.value=t;var u=T(function(){for(var r=n.__v;r=r.__;)if(r.__c){r.__c.__$f|=4;break}return n.__$u.c=function(){var f;!ie(u.peek())&&((f=n.base)==null?void 0:f.nodeType)===3?n.base.data=u.peek():(n.__$f|=1,n.setState({}));},k$1(function(){var f=i.value.value;return f===0?0:f===true?"":f||""})},[]);return u.value}S.displayName="_st";Object.defineProperties(r$1.prototype,{constructor:{configurable:true,value:void 0},type:{configurable:true,value:S},props:{configurable:true,get:function(){return {data:this}}},__b:{configurable:true,value:1}});a("__b",function(e,n){if(typeof n.type=="string"){var t,i=n.props;for(var u in i)if(u!=="children"){var r=i[u];r instanceof r$1&&(t||(n.__np=t={}),t[u]=r,i[u]=r.peek());}}e(n);});a("__r",function(e,n){c();var t,i=n.__c;i&&(i.__$f&=-2,(t=i.__$u)===void 0&&(i.__$u=t=function(u){var r;return U$1(function(){r=this;}),r.c=function(){i.__$f|=1,i.setState({});},r}())),c(t),e(n);});a("__e",function(e,n,t,i){c(),e(n,t,i);});a("diffed",function(e,n){c();var t;if(typeof n.type=="string"&&(t=n.__e)){var i=n.__np,u=n.props;if(i){var r=t.U;if(r)for(var f in r){var o=r[f];o!==void 0&&!(f in i)&&(o.d(),r[f]=void 0);}else t.U=r={};for(var _ in i){var v=r[_],m=i[_];v===void 0?(v=C(t,_,m,u),r[_]=v):v.o(m,u);}}}e(n);});function C(e,n,t,i){var u=n in e&&e.ownerSVGElement===void 0,r=O(t);return {o:function(f,o){r.value=f,i=o;},d:U$1(function(){var f=r.value.value;i[n]!==f&&(i[n]=f,u?e[n]=f:f?e.setAttribute(n,f):e.removeAttribute(n));})}}a("unmount",function(e,n){if(typeof n.type=="string"){var t=n.__e;if(t){var i=t.U;if(i){t.U=void 0;for(var u in i){var r=i[u];r&&r.d();}}}}else {var f=n.__c;if(f){var o=f.__$u;o&&(f.__$u=void 0,o.d());}}e(n);});a("__h",function(e,n,t,i){(i<3||i===9)&&(n.__$f|=2),e(n,t,i);});F$1.prototype.shouldComponentUpdate=function(e,n){var t=this.__$u;if(!(t&&t.s!==void 0||4&this.__$f)||3&this.__$f)return  true;for(var i in n)return  true;for(var u in e)if(u!=="__source"&&e[u]!==this.props[u])return  true;for(var r in this.props)if(!(r in e))return  true;return  false};function w(e){return T(function(){return O(e)},[])}
+var p;function a(e,n){h$1[e]=n.bind(null,h$1[e]||function(){});}function c(e){p&&p(),p=e&&e.S();}function S(e){var n=this,t=e.data,i=w(t);i.value=t;var u=T(function(){for(var r=n.__v;r=r.__;)if(r.__c){r.__c.__$f|=4;break}return n.__$u.c=function(){var f;!ie(u.peek())&&((f=n.base)==null?void 0:f.nodeType)===3?n.base.data=u.peek():(n.__$f|=1,n.setState({}));},k$1(function(){var f=i.value.value;return f===0?0:f===true?"":f||""})},[]);return u.value}S.displayName="_st";Object.defineProperties(f.prototype,{constructor:{configurable:true,value:void 0},type:{configurable:true,value:S},props:{configurable:true,get:function(){return {data:this}}},__b:{configurable:true,value:1}});a("__b",function(e,n){if(typeof n.type=="string"){var t,i=n.props;for(var u in i)if(u!=="children"){var r=i[u];r instanceof f&&(t||(n.__np=t={}),t[u]=r,i[u]=r.peek());}}e(n);});a("__r",function(e,n){c();var t,i=n.__c;i&&(i.__$f&=-2,(t=i.__$u)===void 0&&(i.__$u=t=function(u){var r;return E$1(function(){r=this;}),r.c=function(){i.__$f|=1,i.setState({});},r}())),c(t),e(n);});a("__e",function(e,n,t,i){c(),e(n,t,i);});a("diffed",function(e,n){c();var t;if(typeof n.type=="string"&&(t=n.__e)){var i=n.__np,u=n.props;if(i){var r=t.U;if(r)for(var f in r){var o=r[f];o!==void 0&&!(f in i)&&(o.d(),r[f]=void 0);}else t.U=r={};for(var _ in i){var v=r[_],m=i[_];v===void 0?(v=C(t,_,m,u),r[_]=v):v.o(m,u);}}}e(n);});function C(e,n,t,i){var u=n in e&&e.ownerSVGElement===void 0,r=O(t);return {o:function(f,o){r.value=f,i=o;},d:E$1(function(){var f=r.value.value;i[n]!==f&&(i[n]=f,u?e[n]=f:f?e.setAttribute(n,f):e.removeAttribute(n));})}}a("unmount",function(e,n){if(typeof n.type=="string"){var t=n.__e;if(t){var i=t.U;if(i){t.U=void 0;for(var u in i){var r=i[u];r&&r.d();}}}}else {var f=n.__c;if(f){var o=f.__$u;o&&(f.__$u=void 0,o.d());}}e(n);});a("__h",function(e,n,t,i){(i<3||i===9)&&(n.__$f|=2),e(n,t,i);});F$1.prototype.shouldComponentUpdate=function(e,n){var t=this.__$u;if(!(t&&t.s!==void 0||4&this.__$f)||3&this.__$f)return  true;for(var i in n)return  true;for(var u in e)if(u!=="__source"&&e[u]!==this.props[u])return  true;for(var r in this.props)if(!(r in e))return  true;return  false};function w(e){return T(function(){return O(e)},[])}
 
 const routesLoadingSignal = O(false);
       const routeLoadingErrorSignal = O(null);
@@ -1099,11 +1203,18 @@ const routesLoadingSignal = O(false);
         if (routes.length === 0) {
           return null;
         }
-        return p$3` <${FiltersPanel} routes=${routes} /> `;
+        return p$3`
+          <div>
+            <${FiltersPanel} routes="${routes}" />
+          </div>`;
       };
 
       const App = () => {
-        return p$3` <${RouteList} /> `;
+        return p$3`
+          <div>
+            <${Toolbox} />
+            <${RouteResults} />
+          </div>`;
       };
       const ProgressBar = ({ width = "100%", height = 6, loading }) => {
         if (!loading) {
@@ -1112,11 +1223,11 @@ const routesLoadingSignal = O(false);
         return p$3`
           <div
             class="progress-bar"
-            style=${{
+            style="${{
               width: typeof Number(width) === "number" ? `${width}px` : width,
               height:
                 typeof Number(height) === "number" ? `${height}px` : height,
-            }}
+            }}"
           >
             <div class="progress-container progress-indeterminate">
               <div class="progress-bar-long"></div>
@@ -1125,19 +1236,20 @@ const routesLoadingSignal = O(false);
           </div>
         `;
       };
-      const RouteList = () => {
+      const RouteResults = () => {
         const routes = routesSignal.value;
         const loading = routesLoadingSignal.value;
         const routeLoadingError = routeLoadingErrorSignal.value;
+        const [groupBy] = useGroupByUrlStringParam();
 
         if (loading) {
-          return p$3`<${ProgressBar} width="150" loading=${true} />`;
+          return p$3`<${ProgressBar} width="150" loading="${true}" />`;
         }
 
         if (routeLoadingError) {
           return p$3`<p>
-            Error loading routes: ${routeLoadingError.message}
-          </p>`;
+              Error loading routes: ${routeLoadingError.message}
+            </p>`;
         }
 
         if (!routes || routes.length === 0) {
@@ -1145,10 +1257,74 @@ const routesLoadingSignal = O(false);
         }
 
         return p$3`<div class="route_container">
-          <div class="route_list">
+            ${groupBy
+              ? p$3`<${RouteGroups} groupBy="${groupBy}" routes="${routes}" />`
+              : p$3`<${RouteList} routes="${routes}" />`}
+          </div>`;
+      };
+
+      const RouteGroups = ({ groupBy, routes }) => {
+        const groups = {};
+        for (const route of routes) {
+          const groupKey =
+            groupBy === "by_method"
+              ? route.method
+              : route.meta.packageName || NO_PACKAGE_NAME;
+          if (!groups[groupKey]) {
+            groups[groupKey] = [];
+          }
+          groups[groupKey].push(route);
+        }
+
+        return p$3`
+          <ul style="margin-left: 0; padding: 0">
+            <li style="list-style: none; padding: 0;">
+              ${Object.entries(groups).map(([groupKey, groupRoutes]) => {
+                const groupText =
+                  groupBy === "by_method"
+                    ? p$3`<span
+                          style="margin-left: 0.5em; display: inline-flex; gap: 0.5em;"
+                        >
+                          <${MethodsStatusPill} methodNames="${[groupKey]}" />
+                          <span>${groupKey}</span>
+                        </span>`
+                    : p$3`<span>${groupKey}</span>`;
+
+                return p$3`
+                  <details
+                    class="route_group_details"
+                    data-method="${groupBy === "by_method"
+                      ? groupKey
+                      : undefined}"
+                  >
+                    <summary>
+                      <div class="route_group_summary_container">
+                        <span class="route_group_name">
+                          ${groupBy === "by_method" ? "method" : "package"}:
+                          ${groupText}
+                        </span>
+                        <span class="route_group_description">
+                          <span class="filter_count">
+                            ${groupRoutes.length}
+                          </span>
+                        </span>
+                        <span style="flex: 1"></span>
+                        <span class="summary_marker">
+                          <${ArrowDown} />
+                        </span>
+                      </div>
+                    </summary>
+                    <${RouteList} routes="${groupRoutes}" />
+                  </details>`;
+              })}
+            </li>
+          </ul>`;
+      };
+
+      const RouteList = ({ routes }) => {
+        return p$3`<div class="route_list">
             ${routes.map((route) => p$3`<${RouteDetails} ...${route} />`)}
-          </div>
-        </div>`;
+          </div>`;
       };
 
       const documentUrlSignal = O(window.location.href);
@@ -1227,6 +1403,13 @@ const routesLoadingSignal = O(false);
         };
       }
 
+      const useGroupByUrlStringParam = () => {
+        const availableGroupByValues = ["by_method", "by_package"];
+        return useUrlStringParam("groupBy", {
+          availableValues: availableGroupByValues,
+        });
+      };
+
       const useMethodUrlStringParam = () => {
         const availableMethodNames = availableMethodNamesSignal.value;
         return useUrlStringParam("method", {
@@ -1241,6 +1424,66 @@ const routesLoadingSignal = O(false);
         });
       };
 
+      let Toolbox;
+      {
+        Toolbox = () => {
+          return p$3``;
+        };
+      }
+
+      const StatusPill = ({ children, color }) => {
+        return p$3`
+            <span
+            class="status_pill"
+            style="${{
+              background: color,
+            }}"
+          >
+            ${children}
+          </span>`;
+      };
+      const buildLinearGradient = (colors) => {
+        const percentagePerColor = Math.floor(100 / (colors.length - 1));
+        const gradientSteps = [];
+        let progress = 0;
+        let index = 0;
+        for (const color of colors) {
+          if (index === colors.length - 1) {
+            progress = 100;
+          }
+          gradientSteps.push(`${color} ${progress}%`);
+          progress += percentagePerColor;
+          index++;
+        }
+        const gradient = `linear-gradient(to bottom, ${gradientSteps.join(", ")})`;
+        return gradient;
+      };
+      const MethodsStatusPill = ({ methodNames }) => {
+        if (methodNames.length === 1) {
+          return p$3`
+            <${StatusPill}
+              color="${getMethodColor(methodNames[0])}"
+            />
+          `;
+        }
+        const colors = methodNames.map((methodName) =>
+          getMethodColor(methodName),
+        );
+        const linearGradient = buildLinearGradient(colors);
+        return p$3`
+            <${StatusPill}
+            color="${linearGradient}"
+          />
+          `;
+      };
+      const getMethodColor = (methodName) => {
+        const bodyStyle = window.getComputedStyle(document.body);
+        const methodColor = bodyStyle.getPropertyValue(
+          `--method-${methodName.toLowerCase()}-color`,
+        );
+        return methodColor;
+      };
+
       let FiltersPanel;
       {
         FiltersPanel = ({ routes }) => {
@@ -1248,57 +1491,81 @@ const routesLoadingSignal = O(false);
             <div class="filter_container">
               <div class="filter_list">
                 <div class="filter_item">
-                  <${MethodFilter} routes=${routes} />
+                  <${GroupSelector} />
+                </div>
+                <div class="filter_item">
+                  <${MethodFilter} routes="${routes}" />
                 </div>
                 <div class="filter_item">
-                  <${PackageFilter} routes=${routes} />
+                  <${PackageFilter} routes="${routes}" />
                 </div>
               </div>
             </div>
           `;
         };
+
+        const GroupSelector = () => {
+          const [groupBy, setGroupBy] = useGroupByUrlStringParam();
+          const label = p$3`
+            <span>
+              Group: ${groupBy || "none"}
+            </span>`;
+          const options = [
+            {
+              value: "",
+              text: p$3`
+                <span class="filter_text">
+                  none
+                </span>
+              `,
+              selected: !groupBy,
+            },
+            {
+              value: "by_method",
+              text: p$3`
+                <span class="filter_text">
+                  by method
+                </span>
+              `,
+              selected: groupBy === "by_method",
+            },
+            {
+              value: "by_package",
+              text: p$3`
+                <span class="filter_text">
+                  by package
+                </span>
+              `,
+              selected: groupBy === "by_package",
+            },
+          ];
+
+          return p$3`
+            <${FilterSelector}
+              label="${label}"
+              options="${options}"
+              onChange="${(groupByToSelect) => {
+                setGroupBy(groupByToSelect);
+              }}"
+            />
+          `;
+        };
         const MethodFilter = ({ routes }) => {
           const availableMethodNames = availableMethodNamesSignal.value;
           const availableMethodRepartition = methodRepartitionSignal.value;
           const [selectedMethod, setSelectedMethod] = useMethodUrlStringParam();
 
-          // "all" border image is a combination of available method colors
-          const getMethodColor = (methodName) => {
-            const bodyStyle = window.getComputedStyle(document.body);
-            const methodColor = bodyStyle.getPropertyValue(
-              `--method-${methodName.toLowerCase()}-color`,
-            );
-            return methodColor;
-          };
-          const percentagePerColor = Math.floor(
-            100 / (availableMethodNames.length - 1),
-          );
-          const gradientSteps = [];
-          let progress = 0;
-          let index = 0;
-          for (const methodName of availableMethodNames) {
-            if (index === availableMethodNames.length - 1) {
-              progress = 100;
-            }
-            gradientSteps.push(`${getMethodColor(methodName)} ${progress}%`);
-            progress += percentagePerColor;
-            index++;
-          }
-          const gradient = `linear-gradient(to bottom, ${gradientSteps.join(", ")})`;
-
           const options = [
             {
               value: "",
               text: p$3`
-                <span
-                  class="filter_text"
-                  data-method="all"
-                  style=${{
-                    borderImageSource: gradient,
-                  }}
-                  >all</span
-                >
-                <span class="filter_count">${routes.length}</span>
+                <${MethodsStatusPill}
+                  methodNames="${availableMethodNames}"
+                />
+                <span class="filter_text" data-method="all">all</span>
+                <span class="filter_count">
+                  ${routes.length}
+                </span>
               `,
               selected: !selectedMethod,
             },
@@ -1306,8 +1573,14 @@ const routesLoadingSignal = O(false);
               return {
                 value: availableMethodName,
                 text: p$3`
-                  <span class="filter_text" data-method="${availableMethodName}"
-                    >${availableMethodName}
+                  <${MethodsStatusPill}
+                    methodNames="${[availableMethodName]}"
+                  />
+                  <span
+                    class="filter_text"
+                    data-method="${availableMethodName}"
+                  >
+                    ${availableMethodName}
                   </span>
                   <span class="filter_count">
                     ${availableMethodRepartition[availableMethodName]}
@@ -1318,13 +1591,24 @@ const routesLoadingSignal = O(false);
             }),
           ];
 
+          const label = p$3`<span
+              style="display: flex; align-items: center; gap: 5px"
+            >
+              <${MethodsStatusPill}
+                methodNames="${selectedMethod
+                  ? [selectedMethod]
+                  : availableMethodNames}"
+              />
+              <span>Methods: ${selectedMethod || "all"}</span>
+            </span>`;
+
           return p$3`
             <${FilterSelector}
-              label="Methods"
-              options=${options}
-              onChange=${(methodToSelect) => {
+              label="${label}"
+              options="${options}"
+              onChange="${(methodToSelect) => {
                 setSelectedMethod(methodToSelect);
-              }}
+              }}"
             />
           `;
         };
@@ -1356,13 +1640,20 @@ const routesLoadingSignal = O(false);
               };
             }),
           ];
+
+          const label = p$3`
+            <span>
+              Packages: ${selectedPackageName || "all"}
+            </span>
+          `;
+
           return p$3`
             <${FilterSelector}
-              label="Packages"
-              options=${options}
-              onChange=${(packageNameToSelect) => {
+              label="${label}"
+              options="${options}"
+              onChange="${(packageNameToSelect) => {
                 setSelectedPackageName(packageNameToSelect);
-              }}
+              }}"
             />
           `;
         };
@@ -1377,66 +1668,68 @@ const routesLoadingSignal = O(false);
 
           return p$3`<details open class="filter">
                 <summary class="filter_summary">
-                  ${label}
-                  <${ArrowDown} />
+                  <span class="summary_text">${label}</span>
+                  <span class="summary_marker">
+                    <${ArrowDown} />
+                  </span>
                 </summary>
                 <form ref=${formRef} class="filter_form">
                   ${options.map((option) => {
                     return p$3`<label>
-                      <input
-                        type="${multiple ? "checkbox" : "radio"}"
-                        name="${label}"
-                        checked=${option.selected}
-                        value=${option.value}
-                        onChange=${multiple
-                          ? () => {
-                              const formNode = formRef.current;
-                              // even if we create a checkbox list the HTML spec
-                              // return a radio node list and we have to gather the checked values
-                              const radioNodeList = formNode.elements[label];
-                              const selectedValues = [];
-                              for (const checkboxNode of Array.from(
-                                radioNodeList,
-                              )) {
-                                if (checkboxNode.checked) {
-                                  selectedValues.push(checkboxNode.value);
+                        <input
+                          type="${multiple ? "checkbox" : "radio"}"
+                          name="${label}"
+                          checked="${option.selected}"
+                          value="${option.value}"
+                          onChange="${multiple
+                            ? () => {
+                                const formNode = formRef.current;
+                                // even if we create a checkbox list the HTML spec
+                                // return a radio node list and we have to gather the checked values
+                                const radioNodeList = formNode.elements[label];
+                                const selectedValues = [];
+                                for (const checkboxNode of Array.from(
+                                  radioNodeList,
+                                )) {
+                                  if (checkboxNode.checked) {
+                                    selectedValues.push(checkboxNode.value);
+                                  }
                                 }
+                                onChange(selectedValues);
                               }
-                              onChange(selectedValues);
-                            }
-                          : () => {
-                              const formNode = formRef.current;
-                              const radioNodeList = formNode.elements[label];
-                              const selectedValue = radioNodeList.value;
-                              onChange(selectedValue);
-                            }}
-                      />
-                      ${option.text}
-                    </label>`;
+                            : () => {
+                                const formNode = formRef.current;
+                                const radioNodeList = formNode.elements[label];
+                                const selectedValue = radioNodeList.value;
+                                onChange(selectedValue);
+                              }}"
+                        />
+                        ${option.text}
+                      </label>`;
                   })}
                 </form>
                 ${
                   actions &&
                   p$3` <div class="filter_actions">
-                    <button
-                      type="button"
-                      class="filter_button"
-                      onClick=${() => {
-                        onChange(options.map((option) => option.value));
-                      }}
-                    >
-                      Select All
-                    </button>
-                    <button
-                      type="button"
-                      class="filter_button"
-                      onClick=${() => {
-                        onChange([]);
-                      }}
-                    >
-                      Clear All
-                    </button>
-                  </div>`
+                      <button
+                        type="button"
+                        class="filter_button"
+                        onClick="${() => {
+                          onChange(options.map((option) => option.value));
+                        }}"
+                      >
+                        Select All
+                      </button>
+                      <button
+                        type="button"
+                        class="filter_button"
+                        onClick="${() => {
+                          onChange([]);
+                        }}"
+                      >
+                        Clear All
+                      </button>
+                    </div>`
                 }
               </div>`;
         };
@@ -1456,7 +1749,6 @@ const routesLoadingSignal = O(false);
         clientCodeExample,
         declarationSource,
       }) => {
-        const [opened, setOpened] = B(false);
         const [selectedMethod] = useUrlStringParam("method");
         const [selectedPackageName] = usePackageUrlStringParam();
 
@@ -1468,37 +1760,38 @@ const routesLoadingSignal = O(false);
           return null;
         }
 
-        return p$3`<details
-          class="route_details"
-          onToggle=${(e) => {
-            setOpened(e.newState === "open");
-          }}
-          data-method=${method}
-        >
-          <summary>
-            <div class="route_summary_container">
+        return p$3`<details class="route_details" data-method="${method}">
+            <summary class="route_summary_container">
               <span class="route_method">${method}</span>
               <p class="route_resource">${resource}</p>
+              ${method === "GET"
+                ? p$3`<a
+                      style="display:inline-flex; margin-left: 5px;"
+                      href="${resource}"
+                      ><${OpenLink}
+                    /></a>`
+                : null}
               <span style="flex:1"></span>
-              <${RouteBadge} meta=${meta} />
-              ${opened ? p$3`<${ArrowUp} />` : p$3`<${ArrowDown} />`}
-            </div>
-          </summary>
-          <${RouteDetailsContent}
-            method=${method}
-            resource=${resource}
-            description=${description}
-            availableMediaTypes=${availableMediaTypes}
-            availableLanguages=${availableLanguages}
-            availableVersions=${availableVersions}
-            availableEncodings=${availableEncodings}
-            acceptedMediaTypes=${acceptedMediaTypes}
-            websocket=${websocket}
-            clientCodeExample=${clientCodeExample}
-            declarationSource=${declarationSource}
-            meta=${meta}
-          />
-        </details>`;
+              <${RouteBadge} meta="${meta}" />
+              <span class="summary_marker">
+                <${ArrowDown} />
+              </span>
+            </summary>
+            <${RouteDetailsContent}
+              method="${method}"
+              resource="${resource}"
+              description="${description}"
+              availableMediaTypes="${availableMediaTypes}"
+              availableLanguages="${availableLanguages}"
+              availableVersions="${availableVersions}"
+              availableEncodings="${availableEncodings}"
+              acceptedMediaTypes="${acceptedMediaTypes}"
+              websocket="${websocket}"
+              clientCodeExample="${clientCodeExample}"
+              declarationSource="${declarationSource}"
+              meta="${meta}"
+            />
+          </details>`;
       };
 
       const RouteBadge = ({ meta }) => {
@@ -1507,9 +1800,9 @@ const routesLoadingSignal = O(false);
         }
         let text = meta.packageName;
         let title = `This endpoint is declared by ${meta.packageName}`;
-        return p$3`<span title=${title} class="route_owner_name"
-          >${text}</span
-        >`;
+        return p$3`<span title="${title}" class="route_owner_name"
+            >${text}</span
+          >`;
       };
 
       const RouteDetailsContent = ({
@@ -1527,51 +1820,51 @@ const routesLoadingSignal = O(false);
         meta,
       }) => {
         return p$3`<div class="route_details_content">
-          <${RoutedeclarationSource}
-            meta=${meta}
-            declarationSource=${declarationSource}
-          />
-          <p style="margin-top: 0"><strong>Description:</strong></p>
-          <p class="route_description">
-            ${description || "No description available"}
-          </p>
-          ${availableMediaTypes.length > 0 &&
-          p$3`<${RouteContentNegotiationSection}
-            type="content-type"
-            title="Available media types"
-            availableValues=${availableMediaTypes}
-          />`}
-          ${availableLanguages.length > 0 &&
-          p$3`<${RouteContentNegotiationSection}
-            type="language"
-            title="Available languages"
-            availableValues=${availableLanguages}
-          />`}
-          ${availableVersions.length > 0 &&
-          p$3`<${RouteContentNegotiationSection}
-            type="version"
-            title="Available versions"
-            availableValues=${availableVersions}
-          />`}
-          ${availableEncodings.length > 0 &&
-          p$3`<${RouteContentNegotiationSection}
-            type="encoding"
-            title="Available encodings"
-            availableValues=${availableEncodings}
-          />`}
-          ${acceptedMediaTypes.length > 0 &&
-          p$3`<${RouteAcceptableContentSection}
-            acceptedMediaTypes=${acceptedMediaTypes}
-          />`}
-          <p style="margin-bottom:0; font-weight:bold">Example:</p>
-          <${RouteCodeExample}
-            method=${method}
-            resource=${resource}
-            availableMediaTypes=${availableMediaTypes}
-            websocket=${websocket}
-            clientCodeExample=${clientCodeExample}
-          />
-        </div>`;
+            <${RoutedeclarationSource}
+              meta="${meta}"
+              declarationSource="${declarationSource}"
+            />
+            <p style="margin-top: 0"><strong>Description:</strong></p>
+            <p class="route_description">
+              ${description || "No description available"}
+            </p>
+            ${availableMediaTypes.length > 0 &&
+            p$3`<${RouteContentNegotiationSection}
+                type="content-type"
+                title="Available media types"
+                availableValues="${availableMediaTypes}"
+              />`}
+            ${availableLanguages.length > 0 &&
+            p$3`<${RouteContentNegotiationSection}
+                type="language"
+                title="Available languages"
+                availableValues="${availableLanguages}"
+              />`}
+            ${availableVersions.length > 0 &&
+            p$3`<${RouteContentNegotiationSection}
+                type="version"
+                title="Available versions"
+                availableValues="${availableVersions}"
+              />`}
+            ${availableEncodings.length > 0 &&
+            p$3`<${RouteContentNegotiationSection}
+                type="encoding"
+                title="Available encodings"
+                availableValues="${availableEncodings}"
+              />`}
+            ${acceptedMediaTypes.length > 0 &&
+            p$3`<${RouteAcceptableContentSection}
+                acceptedMediaTypes="${acceptedMediaTypes}"
+              />`}
+            <p style="margin-bottom:0; font-weight:bold">Example:</p>
+            <${RouteCodeExample}
+              method="${method}"
+              resource="${resource}"
+              availableMediaTypes="${availableMediaTypes}"
+              websocket="${websocket}"
+              clientCodeExample="${clientCodeExample}"
+            />
+          </div>`;
       };
       const RoutedeclarationSource = ({ meta, declarationSource }) => {
         if (!declarationSource) {
@@ -1580,8 +1873,8 @@ const routesLoadingSignal = O(false);
         return p$3`<p style="margin-top: 0"><strong>Declaration:</strong></p>
           <p>
             <${RouteDeclarationText}
-              ownerLink=${meta.ownerLink}
-              declarationLink=${meta.declarationLink}
+              ownerLink="${meta.ownerLink}"
+              declarationLink="${meta.declarationLink}"
             />
           </p>`;
       };
@@ -1595,23 +1888,23 @@ const routesLoadingSignal = O(false);
         availableValues,
       }) => {
         return p$3`<div class="route_content_nego" data-nego-type="${type}">
-          <p class="route_content_nego_title">${title}:</p>
-          <ul>
-            ${availableValues.map(
-              (availableValue) => p$3`<li>${availableValue}</li>`,
-            )}
-          </ul>
-        </div>`;
+            <p class="route_content_nego_title">${title}:</p>
+            <ul>
+              ${availableValues.map(
+                (availableValue) => p$3`<li>${availableValue}</li>`,
+              )}
+            </ul>
+          </div>`;
       };
       const RouteAcceptableContentSection = ({ acceptedMediaTypes }) => {
         return p$3`<div class="route_accepted_content_type">
-          <p><strong>Accepted content types:</strong></p>
-          <ul>
-            ${acceptedMediaTypes.map(
-              (acceptedMediaType) => p$3`<li>${acceptedMediaType}</li>`,
-            )}
-          </ul>
-        </div>`;
+            <p><strong>Accepted content types:</strong></p>
+            <ul>
+              ${acceptedMediaTypes.map(
+                (acceptedMediaType) => p$3`<li>${acceptedMediaType}</li>`,
+              )}
+            </ul>
+          </div>`;
       };
 
       const RouteCodeExample = ({
@@ -1663,33 +1956,37 @@ const routesLoadingSignal = O(false);
         }
 
         return p$3`<code-block lang="js" data-escaped data-copy-button
-          >${jsSource}</code-block
-        >`;
+            >${jsSource}</code-block
+          >`;
       };
 
-      const ArrowDown = () => {
+      const ArrowDown = ({ width = 24, height = 24 }) => {
         return p$3`<svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 -960 960 960"
-          width="24"
-          height="24"
-          fill="currentColor"
-          class="arrow_down"
-        >
-          <path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" />
-        </svg>`;
+            viewBox="0 -960 960 960"
+            width="${width}"
+            height="${height}"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" />
+          </svg>`;
       };
-      const ArrowUp = () => {
+      const OpenLink = () => {
         return p$3`<svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 -960 960 960"
-          width="24"
-          height="24"
-          fill="currentColor"
-          class="arrow_up"
-        >
-          <path d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z" />
-        </svg>`;
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 64 64"
+            stroke-width="3"
+            stroke="currentColor"
+            fill="none"
+            width="24"
+            height="24"
+          >
+            <path
+              d="M55.4,32V53.58a1.81,1.81,0,0,1-1.82,1.82H10.42A1.81,1.81,0,0,1,8.6,53.58V10.42A1.81,1.81,0,0,1,10.42,8.6H32"
+            />
+            <polyline points="40.32 8.6 55.4 8.6 55.4 24.18" />
+            <line x1="19.32" y1="45.72" x2="54.61" y2="8.91" />
+          </svg>`;
       };
 
       de(p$3`<${Sidebar} />`, document.querySelector("aside"));