@jsenv/core 25.3.0-alpha.0 → 25.4.2

package/dist/toolbar/{toolbar_361afb84.html → toolbar_0a91ca3b.html}

@@ -1915,19 +1915,29 @@ html[data-toolbar-visible] #toolbar-trigger {
                     <div class="files_compilation_text">
                       <span data-when="filesCompilation:no">Files shown are source files</span>
                       <span data-when="filesCompilation:html_only">Files shown are source files, except html</span>
-                      <span data-when="filesCompilation:yes">Files shown are compiled</span>
+                      <span data-when="filesCompilation:yes">Files shown are compiled for {runtime}</span>
+                      <span data-when="filesCompilation:mismatch">Files shown are compiled for an other runtime</span>
                     </div>
-                    <a data-when="compiled:yes" class="go_to_source_link" href="javascript:void(0);">Switch to source files</a>
-                    <a data-when="compiled:no" class="go_to_compiled_link" href="javascript:void(0);">Switch to compiled files</a>
+                    <a data-when="compilation_link:source" class="link_to_source_files" href="javascript:void(0);">Switch to source files</a>
+                    <a data-when="compilation_link:mismatch" class="link_to_appropriate_files" href="javascript:void(0);">Switch to appropriate files</a>
+                    <a data-when="compilation_link:compiled" class="link_to_compiled_files" href="javascript:void(0);">Switch to compiled files</a>
+                    <a data-when="compilation_link:force" class="link_to_compilation_forced_files" href="javascript:void(0);">Force compilation</a>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <button id="settings-button" class="toolbar-icon-wrapper">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px" class="iconToolbar">
-              <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"></path>
-            </svg>
+            <div data-when="has_warning:yes">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.999 511.999" width="24px" height="24px" class="iconToolbar">
+                <path d="M506.43 421.536 291.573 49.394c-15.814-27.391-55.327-27.401-71.147 0L5.568 421.536c-15.814 27.391 3.934 61.616 35.574 61.616h429.714c31.629.001 51.394-34.214 35.574-61.616zm-231.609-36.502c0 10.394-8.427 18.821-18.821 18.821s-18.821-8.427-18.821-18.821v-11.239c0-10.394 8.427-18.821 18.821-18.821s18.821 8.427 18.821 18.821v11.239zm0-73.332c0 10.394-8.427 18.821-18.821 18.821s-18.821-8.427-18.821-18.821v-107.89c0-10.394 8.427-18.821 18.821-18.821s18.821 8.427 18.821 18.821v107.89z"></path>
+              </svg>
+            </div>
+            <div data-when="has_warning:no">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px" class="iconToolbar">
+                <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"></path>
+              </svg>
+            </div>
           </button>
         </section>
 
@@ -2182,64 +2192,6 @@ html[data-toolbar-visible] #toolbar-trigger {
         return relativeUrl;
       };
 
-      var _defineProperty = function (obj, key, value) {
-        // Shortcircuit the slow defineProperty path when possible.
-        // We are trying to avoid issues where setters defined on the
-        // prototype cause side effects under the fast path of simple
-        // assignment. By checking for existence of the property with
-        // the in operator, we can optimize most of this overhead away.
-        if (key in obj) {
-          Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-          });
-        } else {
-          obj[key] = value;
-        }
-
-        return obj;
-      };
-
-      function ownKeys(object, enumerableOnly) {
-        var keys = Object.keys(object);
-
-        if (Object.getOwnPropertySymbols) {
-          var symbols = Object.getOwnPropertySymbols(object);
-
-          if (enumerableOnly) {
-            symbols = symbols.filter(function (sym) {
-              return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-          }
-
-          keys.push.apply(keys, symbols);
-        }
-
-        return keys;
-      }
-
-      function _objectSpread2(target) {
-        for (var i = 1; i < arguments.length; i++) {
-          var source = arguments[i] != null ? arguments[i] : {};
-
-          if (i % 2) {
-            ownKeys(Object(source), true).forEach(function (key) {
-              _defineProperty(target, key, source[key]);
-            });
-          } else if (Object.getOwnPropertyDescriptors) {
-            Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-          } else {
-            ownKeys(Object(source)).forEach(function (key) {
-              Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-            });
-          }
-        }
-
-        return target;
-      }
-
       var objectWithoutPropertiesLoose = function (source, excluded) {
         if (source === null) return {};
         var target = {};
@@ -2275,740 +2227,142 @@ html[data-toolbar-visible] #toolbar-trigger {
 
         return target;
       };
-      /* eslint-env browser */
-
 
-      function _await$5(value, then, direct) {
-        if (direct) {
-          return then ? then(value) : value;
+      var updateIframeOverflowOnParentWindow = function updateIframeOverflowOnParentWindow() {
+        if (!window.parent) {
+          // can happen while parent iframe reloads
+          return;
         }
 
-        if (!value || !value.then) {
-          value = Promise.resolve(value);
-        }
+        var aTooltipIsOpened = document.querySelector("[data-tooltip-visible]") || document.querySelector("[data-tooltip-auto-visible]");
+        var settingsAreOpened = document.querySelector("#settings[data-active]");
 
-        return then ? value.then(then) : value;
-      }
+        if (aTooltipIsOpened || settingsAreOpened) {
+          enableIframeOverflowOnParentWindow();
+        } else {
+          disableIframeOverflowOnParentWindow();
+        }
+      };
 
-      function _async$6(f) {
-        return function () {
-          for (var args = [], i = 0; i < arguments.length; i++) {
-            args[i] = arguments[i];
-          }
+      var iframeOverflowEnabled = false;
 
-          try {
-            return Promise.resolve(f.apply(this, args));
-          } catch (e) {
-            return Promise.reject(e);
-          }
-        };
-      }
+      var enableIframeOverflowOnParentWindow = function enableIframeOverflowOnParentWindow() {
+        if (iframeOverflowEnabled) return;
+        iframeOverflowEnabled = true;
+        var iframe = getToolbarIframe();
+        var transitionDuration = iframe.style.transitionDuration;
+        setStyles(iframe, {
+          "height": "100%",
+          "transition-duration": "0ms"
+        });
 
-      function _call$2(body, then, direct) {
-        if (direct) {
-          return then ? then(body()) : body();
+        if (transitionDuration) {
+          setTimeout(function () {
+            setStyles(iframe, {
+              "transition-duration": transitionDuration
+            });
+          });
         }
+      };
 
-        try {
-          var result = Promise.resolve(body());
-          return then ? result.then(then) : result;
-        } catch (e) {
-          return Promise.reject(e);
+      var disableIframeOverflowOnParentWindow = function disableIframeOverflowOnParentWindow() {
+        if (!iframeOverflowEnabled) return;
+        iframeOverflowEnabled = false;
+        var iframe = getToolbarIframe();
+        var transitionDuration = iframe.style.transitionDuration;
+        setStyles(iframe, {
+          "height": "40px",
+          "transition-duration": "0ms"
+        });
+
+        if (transitionDuration) {
+          setTimeout(function () {
+            setStyles(iframe, {
+              "transition-duration": transitionDuration
+            });
+          });
         }
-      }
+      };
 
-      var fetchUsingXHR = _async$6(function (url) {
-        var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-            signal = _ref.signal,
-            _ref$method = _ref.method,
-            method = _ref$method === void 0 ? "GET" : _ref$method,
-            _ref$credentials = _ref.credentials,
-            credentials = _ref$credentials === void 0 ? "same-origin" : _ref$credentials,
-            _ref$headers = _ref.headers,
-            headers = _ref$headers === void 0 ? {} : _ref$headers,
-            _ref$body = _ref.body,
-            body = _ref$body === void 0 ? null : _ref$body;
+      var getToolbarIframe = function getToolbarIframe() {
+        var iframes = Array.from(window.parent.document.querySelectorAll("iframe"));
+        return iframes.find(function (iframe) {
+          return iframe.contentWindow === window;
+        });
+      };
 
-        var headersPromise = createPromiseAndHooks();
-        var bodyPromise = createPromiseAndHooks();
-        var xhr = new XMLHttpRequest();
+      var forceHideElement = function forceHideElement(element) {
+        element.setAttribute("data-force-hide", "");
+      };
 
-        var failure = function failure(error) {
-          // if it was already resolved, we must reject the body promise
-          if (headersPromise.settled) {
-            bodyPromise.reject(error);
+      var removeForceHideElement = function removeForceHideElement(element) {
+        element.removeAttribute("data-force-hide");
+      };
+
+      var setStyles = function setStyles(element, styles) {
+        var elementStyle = element.style;
+        var restoreStyles = Object.keys(styles).map(function (styleName) {
+          var restore;
+
+          if (styleName in elementStyle) {
+            var currentStyle = elementStyle[styleName];
+
+            restore = function restore() {
+              elementStyle[styleName] = currentStyle;
+            };
           } else {
-            headersPromise.reject(error);
+            restore = function restore() {
+              delete elementStyle[styleName];
+            };
           }
-        };
 
-        var cleanup = function cleanup() {
-          xhr.ontimeout = null;
-          xhr.onerror = null;
-          xhr.onload = null;
-          xhr.onreadystatechange = null;
+          elementStyle[styleName] = styles[styleName];
+          return restore;
+        });
+        return function () {
+          restoreStyles.forEach(function (restore) {
+            return restore();
+          });
         };
+      };
 
-        xhr.ontimeout = function () {
-          cleanup();
-          failure(new Error("xhr request timeout on ".concat(url, ".")));
-        };
+      var toolbarSectionIsActive = function toolbarSectionIsActive(element) {
+        return element.hasAttribute("data-active");
+      };
 
-        xhr.onerror = function (error) {
-          cleanup(); // unfortunately with have no clue why it fails
-          // might be cors for instance
+      var activateToolbarSection = function activateToolbarSection(element) {
+        element.setAttribute("data-active", "");
+      };
 
-          failure(createRequestError(error, {
-            url: url
-          }));
-        };
+      var deactivateToolbarSection = function deactivateToolbarSection(element) {
+        element.removeAttribute("data-active");
+      };
 
-        xhr.onload = function () {
-          cleanup();
-          bodyPromise.resolve();
-        };
+      var startJavaScriptAnimation = function startJavaScriptAnimation(_ref6) {
+        var _ref6$duration = _ref6.duration,
+            duration = _ref6$duration === void 0 ? 300 : _ref6$duration,
+            _ref6$timingFunction = _ref6.timingFunction,
+            timingFunction = _ref6$timingFunction === void 0 ? function (t) {
+          return t;
+        } : _ref6$timingFunction,
+            _ref6$onProgress = _ref6.onProgress,
+            onProgress = _ref6$onProgress === void 0 ? function () {} : _ref6$onProgress,
+            _ref6$onCancel = _ref6.onCancel,
+            onCancel = _ref6$onCancel === void 0 ? function () {} : _ref6$onCancel,
+            _ref6$onComplete = _ref6.onComplete,
+            onComplete = _ref6$onComplete === void 0 ? function () {} : _ref6$onComplete;
 
-        signal.addEventListener("abort", function () {
-          xhr.abort();
-          var abortError = new Error("aborted");
-          abortError.name = "AbortError";
-          failure(abortError);
-        });
+        if (isNaN(duration)) {
+          // console.warn(`duration must be a number, received ${duration}`)
+          return function () {};
+        }
 
-        xhr.onreadystatechange = function () {
-          // https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/readyState
-          var readyState = xhr.readyState;
-
-          if (readyState === 2) {
-            headersPromise.resolve();
-          } else if (readyState === 4) {
-            cleanup();
-            bodyPromise.resolve();
-          }
-        };
-
-        xhr.open(method, url, true);
-        Object.keys(headers).forEach(function (key) {
-          xhr.setRequestHeader(key, headers[key]);
-        });
-        xhr.withCredentials = computeWithCredentials({
-          credentials: credentials,
-          url: url
-        });
-
-        if ("responseType" in xhr && hasBlob) {
-          xhr.responseType = "blob";
-        }
-
-        xhr.send(body);
-        return _await$5(headersPromise, function () {
-          // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseURL
-          var responseUrl = "responseURL" in xhr ? xhr.responseURL : headers["x-request-url"];
-          var responseStatus = xhr.status;
-          var responseStatusText = xhr.statusText;
-          var responseHeaders = getHeadersFromXHR(xhr);
-
-          var readBody = function readBody() {
-            return _await$5(bodyPromise, function () {
-              var status = xhr.status; // in Chrome on file:/// URLs, status is 0
-
-              if (status === 0) {
-                responseStatus = 200;
-              }
-
-              var body = "response" in xhr ? xhr.response : xhr.responseText;
-              return {
-                responseBody: body,
-                responseBodyType: detectBodyType(body)
-              };
-            });
-          };
-
-          var text = function text() {
-            return _call$2(readBody, function (_ref2) {
-              var responseBody = _ref2.responseBody,
-                  responseBodyType = _ref2.responseBodyType;
-
-              if (responseBodyType === "blob") {
-                return blobToText(responseBody);
-              }
-
-              if (responseBodyType === "formData") {
-                throw new Error("could not read FormData body as text");
-              }
-
-              return responseBodyType === "dataView" ? arrayBufferToText(responseBody.buffer) : responseBodyType === "arrayBuffer" ? arrayBufferToText(responseBody) : String(responseBody);
-            });
-          };
-
-          var json = function json() {
-            return _call$2(text, JSON.parse);
-          };
-
-          var blob = _async$6(function () {
-            if (!hasBlob) {
-              throw new Error("blob not supported");
-            }
-
-            return _call$2(readBody, function (_ref3) {
-              var responseBody = _ref3.responseBody,
-                  responseBodyType = _ref3.responseBodyType;
-
-              if (responseBodyType === "blob") {
-                return responseBody;
-              }
-
-              if (responseBodyType === "dataView") {
-                return new Blob([cloneBuffer(responseBody.buffer)]);
-              }
-
-              if (responseBodyType === "arrayBuffer") {
-                return new Blob([cloneBuffer(responseBody)]);
-              }
-
-              if (responseBodyType === "formData") {
-                throw new Error("could not read FormData body as blob");
-              }
-
-              return new Blob([String(responseBody)]);
-            });
-          });
-
-          var arrayBuffer = function arrayBuffer() {
-            return _call$2(readBody, function (_ref4) {
-              var responseBody = _ref4.responseBody,
-                  responseBodyType = _ref4.responseBodyType;
-              return responseBodyType === "arrayBuffer" ? cloneBuffer(responseBody) : _call$2(blob, blobToArrayBuffer);
-            });
-          };
-
-          var formData = _async$6(function () {
-            if (!hasFormData) {
-              throw new Error("formData not supported");
-            }
-
-            return _call$2(text, textToFormData);
-          });
-
-          return {
-            url: responseUrl,
-            status: responseStatus,
-            statusText: responseStatusText,
-            headers: responseHeaders,
-            text: text,
-            json: json,
-            blob: blob,
-            arrayBuffer: arrayBuffer,
-            formData: formData
-          };
-        });
-      });
-
-      var canUseBlob = function canUseBlob() {
-        if (typeof window.FileReader !== "function") return false;
-        if (typeof window.Blob !== "function") return false;
-
-        try {
-          // eslint-disable-next-line no-new
-          new Blob();
-          return true;
-        } catch (e) {
-          return false;
-        }
-      };
-
-      var hasBlob = canUseBlob();
-      var hasFormData = typeof window.FormData === "function";
-      var hasArrayBuffer = typeof window.ArrayBuffer === "function";
-      var hasSearchParams = typeof window.URLSearchParams === "function";
-
-      var createRequestError = function createRequestError(error, _ref5) {
-        var url = _ref5.url;
-        return new Error("error during xhr request on ".concat(url, ".\n--- error stack ---\n").concat(error.stack));
-      };
-
-      var createPromiseAndHooks = function createPromiseAndHooks() {
-        var resolve;
-        var reject;
-        var promise = new Promise(function (res, rej) {
-          resolve = function resolve(value) {
-            promise.settled = true;
-            res(value);
-          };
-
-          reject = function reject(value) {
-            promise.settled = true;
-            rej(value);
-          };
-        });
-        promise.resolve = resolve;
-        promise.reject = reject;
-        return promise;
-      }; // https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
-
-
-      var computeWithCredentials = function computeWithCredentials(_ref6) {
-        var credentials = _ref6.credentials,
-            url = _ref6.url;
-
-        if (credentials === "same-origin") {
-          return originSameAsGlobalOrigin(url);
-        }
-
-        return credentials === "include";
-      };
-
-      var originSameAsGlobalOrigin = function originSameAsGlobalOrigin(url) {
-        // if we cannot read globalOrigin from window.location.origin, let's consider it's ok
-        if ((typeof window === "undefined" ? "undefined" : _typeof(window)) !== "object") return true;
-        if (_typeof(window.location) !== "object") return true;
-        var globalOrigin = window.location.origin;
-        if (globalOrigin === "null") return true;
-        return hrefToOrigin(url) === globalOrigin;
-      };
-
-      var detectBodyType = function detectBodyType(body) {
-        if (!body) {
-          return "";
-        }
-
-        if (typeof body === "string") {
-          return "text";
-        }
-
-        if (hasBlob && Blob.prototype.isPrototypeOf(body)) {
-          return "blob";
-        }
-
-        if (hasFormData && FormData.prototype.isPrototypeOf(body)) {
-          return "formData";
-        }
-
-        if (hasArrayBuffer) {
-          if (hasBlob && isDataView(body)) {
-            return "dataView";
-          }
-
-          if (ArrayBuffer.prototype.isPrototypeOf(body) || isArrayBufferView(body)) {
-            return "arrayBuffer";
-          }
-        }
-
-        if (hasSearchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
-          return "searchParams";
-        }
-
-        return "";
-      }; // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/getAllResponseHeaders#Example
-
-
-      var getHeadersFromXHR = function getHeadersFromXHR(xhr) {
-        var headerMap = {};
-        var headersString = xhr.getAllResponseHeaders();
-        if (headersString === "") return headerMap;
-        var lines = headersString.trim().split(/[\r\n]+/);
-        lines.forEach(function (line) {
-          var parts = line.split(": ");
-          var name = parts.shift();
-          var value = parts.join(": ");
-          headerMap[name.toLowerCase()] = value;
-        });
-        return headerMap;
-      };
-
-      var hrefToOrigin = function hrefToOrigin(href) {
-        var scheme = hrefToScheme(href);
-
-        if (scheme === "file") {
-          return "file://";
-        }
-
-        if (scheme === "http" || scheme === "https") {
-          var secondProtocolSlashIndex = scheme.length + "://".length;
-          var pathnameSlashIndex = href.indexOf("/", secondProtocolSlashIndex);
-          if (pathnameSlashIndex === -1) return href;
-          return href.slice(0, pathnameSlashIndex);
-        }
-
-        return href.slice(0, scheme.length + 1);
-      };
-
-      var hrefToScheme = function hrefToScheme(href) {
-        var colonIndex = href.indexOf(":");
-        if (colonIndex === -1) return "";
-        return href.slice(0, colonIndex);
-      };
-
-      var isDataView = function isDataView(obj) {
-        return obj && DataView.prototype.isPrototypeOf(obj);
-      };
-
-      var isArrayBufferView = ArrayBuffer.isView || function () {
-        var viewClasses = ["[object Int8Array]", "[object Uint8Array]", "[object Uint8ClampedArray]", "[object Int16Array]", "[object Uint16Array]", "[object Int32Array]", "[object Uint32Array]", "[object Float32Array]", "[object Float64Array]"];
-        return function (value) {
-          return value && viewClasses.includes(Object.prototype.toString.call(value));
-        };
-      }();
-
-      var textToFormData = function textToFormData(text) {
-        var form = new FormData();
-        text.trim().split("&").forEach(function (bytes) {
-          if (bytes) {
-            var split = bytes.split("=");
-            var name = split.shift().replace(/\+/g, " ");
-            var value = split.join("=").replace(/\+/g, " ");
-            form.append(decodeURIComponent(name), decodeURIComponent(value));
-          }
-        });
-        return form;
-      };
-
-      var blobToArrayBuffer = _async$6(function (blob) {
-        var reader = new FileReader();
-        var promise = fileReaderReady(reader);
-        reader.readAsArrayBuffer(blob);
-        return promise;
-      });
-
-      var blobToText = function blobToText(blob) {
-        var reader = new FileReader();
-        var promise = fileReaderReady(reader);
-        reader.readAsText(blob);
-        return promise;
-      };
-
-      var arrayBufferToText = function arrayBufferToText(arrayBuffer) {
-        var view = new Uint8Array(arrayBuffer);
-        var chars = new Array(view.length);
-        var i = 0;
-
-        while (i < view.length) {
-          chars[i] = String.fromCharCode(view[i]);
-          i++;
-        }
-
-        return chars.join("");
-      };
-
-      var fileReaderReady = function fileReaderReady(reader) {
-        return new Promise(function (resolve, reject) {
-          reader.onload = function () {
-            resolve(reader.result);
-          };
-
-          reader.onerror = function () {
-            reject(reader.error);
-          };
-        });
-      };
-
-      var cloneBuffer = function cloneBuffer(buffer) {
-        if (buffer.slice) {
-          return buffer.slice(0);
-        }
-
-        var view = new Uint8Array(buffer.byteLength);
-        view.set(new Uint8Array(buffer));
-        return view.buffer;
-      };
-
-      var _excluded$1 = ["mode"];
-
-      function _await$4(value, then, direct) {
-        if (direct) {
-          return then ? then(value) : value;
-        }
-
-        if (!value || !value.then) {
-          value = Promise.resolve(value);
-        }
-
-        return then ? value.then(then) : value;
-      }
-
-      function _async$5(f) {
-        return function () {
-          for (var args = [], i = 0; i < arguments.length; i++) {
-            args[i] = arguments[i];
-          }
-
-          try {
-            return Promise.resolve(f.apply(this, args));
-          } catch (e) {
-            return Promise.reject(e);
-          }
-        };
-      }
-
-      var fetchNative = _async$5(function (url) {
-        var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-        var _ref$mode = _ref.mode,
-            mode = _ref$mode === void 0 ? "cors" : _ref$mode,
-            options = _objectWithoutProperties(_ref, _excluded$1);
-
-        return _await$4(window.fetch(url, _objectSpread2({
-          mode: mode
-        }, options)), function (response) {
-          return {
-            url: response.url,
-            status: response.status,
-            statusText: "",
-            headers: responseToHeaders(response),
-            text: function text() {
-              return response.text();
-            },
-            json: function json() {
-              return response.json();
-            },
-            blob: function blob() {
-              return response.blob();
-            },
-            arrayBuffer: function arrayBuffer() {
-              return response.arrayBuffer();
-            },
-            formData: function formData() {
-              return response.formData();
-            }
-          };
-        });
-      });
-
-      var responseToHeaders = function responseToHeaders(response) {
-        var headers = {};
-        response.headers.forEach(function (value, name) {
-          headers[name] = value;
-        });
-        return headers;
-      };
-
-      var fetchUrl = typeof window.fetch === "function" && typeof window.AbortController === "function" ? fetchNative : fetchUsingXHR;
-
-      function _await$3(value, then, direct) {
-        if (direct) {
-          return then ? then(value) : value;
-        }
-
-        if (!value || !value.then) {
-          value = Promise.resolve(value);
-        }
-
-        return then ? value.then(then) : value;
-      }
-
-      function _async$4(f) {
-        return function () {
-          for (var args = [], i = 0; i < arguments.length; i++) {
-            args[i] = arguments[i];
-          }
-
-          try {
-            return Promise.resolve(f.apply(this, args));
-          } catch (e) {
-            return Promise.reject(e);
-          }
-        };
-      }
-
-      var fetchJson = _async$4(function (url) {
-        var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        return _await$3(fetchUrl(url, options), function (response) {
-          return _await$3(response.json());
-        });
-      });
-
-      function _await$2(value, then, direct) {
-        if (direct) {
-          return then ? then(value) : value;
-        }
-
-        if (!value || !value.then) {
-          value = Promise.resolve(value);
-        }
-
-        return then ? value.then(then) : value;
-      }
-
-      function _catch$1(body, recover) {
-        try {
-          var result = body();
-        } catch (e) {
-          return recover(e);
-        }
-
-        if (result && result.then) {
-          return result.then(void 0, recover);
-        }
-
-        return result;
-      }
-
-      function _async$3(f) {
-        return function () {
-          for (var args = [], i = 0; i < arguments.length; i++) {
-            args[i] = arguments[i];
-          }
-
-          try {
-            return Promise.resolve(f.apply(this, args));
-          } catch (e) {
-            return Promise.reject(e);
-          }
-        };
-      }
-
-      var fetchExploringJson = _async$3(function () {
-        var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-            signal = _ref.signal;
-
-        return _catch$1(function () {
-          return _await$2(fetchJson("/.jsenv/exploring.json", {
-            signal: signal
-          }));
-        }, function (e) {
-          if (signal && signal.aborted && e.name === "AbortError") {
-            throw e;
-          }
-
-          throw new Error("Cannot communicate with exploring server due to a network error\n--- error stack ---\n".concat(e.stack));
-        });
-      });
-
-      var updateIframeOverflowOnParentWindow = function updateIframeOverflowOnParentWindow() {
-        if (!window.parent) {
-          // can happen while parent iframe reloads
-          return;
-        }
-
-        var aTooltipIsOpened = document.querySelector("[data-tooltip-visible]") || document.querySelector("[data-tooltip-auto-visible]");
-        var settingsAreOpened = document.querySelector("#settings[data-active]");
-
-        if (aTooltipIsOpened || settingsAreOpened) {
-          enableIframeOverflowOnParentWindow();
-        } else {
-          disableIframeOverflowOnParentWindow();
-        }
-      };
-
-      var iframeOverflowEnabled = false;
-
-      var enableIframeOverflowOnParentWindow = function enableIframeOverflowOnParentWindow() {
-        if (iframeOverflowEnabled) return;
-        iframeOverflowEnabled = true;
-        var iframe = getToolbarIframe();
-        var transitionDuration = iframe.style.transitionDuration;
-        setStyles(iframe, {
-          "height": "100%",
-          "transition-duration": "0ms"
-        });
-
-        if (transitionDuration) {
-          setTimeout(function () {
-            setStyles(iframe, {
-              "transition-duration": transitionDuration
-            });
-          });
-        }
-      };
-
-      var disableIframeOverflowOnParentWindow = function disableIframeOverflowOnParentWindow() {
-        if (!iframeOverflowEnabled) return;
-        iframeOverflowEnabled = false;
-        var iframe = getToolbarIframe();
-        var transitionDuration = iframe.style.transitionDuration;
-        setStyles(iframe, {
-          "height": "40px",
-          "transition-duration": "0ms"
-        });
-
-        if (transitionDuration) {
-          setTimeout(function () {
-            setStyles(iframe, {
-              "transition-duration": transitionDuration
-            });
-          });
-        }
-      };
-
-      var getToolbarIframe = function getToolbarIframe() {
-        var iframes = Array.from(window.parent.document.querySelectorAll("iframe"));
-        return iframes.find(function (iframe) {
-          return iframe.contentWindow === window;
-        });
-      };
-
-      var forceHideElement = function forceHideElement(element) {
-        element.setAttribute("data-force-hide", "");
-      };
-
-      var removeForceHideElement = function removeForceHideElement(element) {
-        element.removeAttribute("data-force-hide");
-      };
-
-      var setStyles = function setStyles(element, styles) {
-        var elementStyle = element.style;
-        var restoreStyles = Object.keys(styles).map(function (styleName) {
-          var restore;
-
-          if (styleName in elementStyle) {
-            var currentStyle = elementStyle[styleName];
-
-            restore = function restore() {
-              elementStyle[styleName] = currentStyle;
-            };
-          } else {
-            restore = function restore() {
-              delete elementStyle[styleName];
-            };
-          }
-
-          elementStyle[styleName] = styles[styleName];
-          return restore;
-        });
-        return function () {
-          restoreStyles.forEach(function (restore) {
-            return restore();
-          });
-        };
-      };
-
-      var toolbarSectionIsActive = function toolbarSectionIsActive(element) {
-        return element.hasAttribute("data-active");
-      };
-
-      var activateToolbarSection = function activateToolbarSection(element) {
-        element.setAttribute("data-active", "");
-      };
-
-      var deactivateToolbarSection = function deactivateToolbarSection(element) {
-        element.removeAttribute("data-active");
-      };
-
-      var startJavaScriptAnimation = function startJavaScriptAnimation(_ref6) {
-        var _ref6$duration = _ref6.duration,
-            duration = _ref6$duration === void 0 ? 300 : _ref6$duration,
-            _ref6$timingFunction = _ref6.timingFunction,
-            timingFunction = _ref6$timingFunction === void 0 ? function (t) {
-          return t;
-        } : _ref6$timingFunction,
-            _ref6$onProgress = _ref6.onProgress,
-            onProgress = _ref6$onProgress === void 0 ? function () {} : _ref6$onProgress,
-            _ref6$onCancel = _ref6.onCancel,
-            onCancel = _ref6$onCancel === void 0 ? function () {} : _ref6$onCancel,
-            _ref6$onComplete = _ref6.onComplete,
-            onComplete = _ref6$onComplete === void 0 ? function () {} : _ref6$onComplete;
-
-        if (isNaN(duration)) {
-          // console.warn(`duration must be a number, received ${duration}`)
-          return function () {};
-        }
-
-        duration = parseInt(duration, 10);
-        var startMs = performance.now();
-        var currentRequestAnimationFrameId;
-        var done = false;
-        var rawProgress = 0;
-        var progress = 0;
+        duration = parseInt(duration, 10);
+        var startMs = performance.now();
+        var currentRequestAnimationFrameId;
+        var done = false;
+        var rawProgress = 0;
+        var progress = 0;
 
         var handler = function handler() {
           currentRequestAnimationFrameId = null;
@@ -3122,33 +2476,6 @@ html[data-toolbar-visible] #toolbar-trigger {
         });
       };
 
-      var renderToolbarSettings = function renderToolbarSettings() {
-        document.querySelector("#settings-button").onclick = toggleSettings;
-        document.querySelector("#button-close-settings").onclick = toggleSettings;
-      };
-
-      var toggleSettings = function toggleSettings() {
-        if (settingsAreVisible()) {
-          hideSettings();
-        } else {
-          showSettings();
-        }
-      };
-
-      var settingsAreVisible = function settingsAreVisible() {
-        return toolbarSectionIsActive(document.querySelector("#settings"));
-      };
-
-      var hideSettings = function hideSettings() {
-        deactivateToolbarSection(document.querySelector("#settings"));
-        updateIframeOverflowOnParentWindow();
-      };
-
-      var showSettings = function showSettings() {
-        activateToolbarSection(document.querySelector("#settings"));
-        updateIframeOverflowOnParentWindow();
-      };
-
       var enableVariant = function enableVariant(rootNode, variables) {
         var nodesNotMatching = Array.from(rootNode.querySelectorAll("[".concat(attributeIndicatingACondition, "]")));
         nodesNotMatching.forEach(function (nodeNotMatching) {
@@ -3214,9 +2541,106 @@ html[data-toolbar-visible] #toolbar-trigger {
         node.removeAttribute(name);
       };
 
-      var _excluded = ["clickToFocus", "clickToClose"];
+      var renderToolbarSettings = function renderToolbarSettings() {
+        document.querySelector("#settings-button").onclick = toggleSettings;
+        document.querySelector("#button-close-settings").onclick = toggleSettings;
+      };
+
+      var toggleSettings = function toggleSettings() {
+        if (settingsAreVisible()) {
+          hideSettings();
+        } else {
+          showSettings();
+        }
+      };
+
+      var enableWarningStyle = function enableWarningStyle() {
+        enableVariant(document.querySelector("#settings-button"), {
+          has_warning: "yes"
+        });
+      };
+
+      var disableWarningStyle = function disableWarningStyle() {
+        enableVariant(document.querySelector("#settings-button"), {
+          has_warning: "no"
+        });
+      };
+
+      var settingsAreVisible = function settingsAreVisible() {
+        return toolbarSectionIsActive(document.querySelector("#settings"));
+      };
+
+      var hideSettings = function hideSettings() {
+        deactivateToolbarSection(document.querySelector("#settings"));
+        updateIframeOverflowOnParentWindow();
+      };
+
+      var showSettings = function showSettings() {
+        activateToolbarSection(document.querySelector("#settings"));
+        updateIframeOverflowOnParentWindow();
+      };
+
+      var _defineProperty = function (obj, key, value) {
+        // Shortcircuit the slow defineProperty path when possible.
+        // We are trying to avoid issues where setters defined on the
+        // prototype cause side effects under the fast path of simple
+        // assignment. By checking for existence of the property with
+        // the in operator, we can optimize most of this overhead away.
+        if (key in obj) {
+          Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+          });
+        } else {
+          obj[key] = value;
+        }
+
+        return obj;
+      };
+
+      function ownKeys(object, enumerableOnly) {
+        var keys = Object.keys(object);
+
+        if (Object.getOwnPropertySymbols) {
+          var symbols = Object.getOwnPropertySymbols(object);
+
+          if (enumerableOnly) {
+            symbols = symbols.filter(function (sym) {
+              return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+          }
+
+          keys.push.apply(keys, symbols);
+        }
+
+        return keys;
+      }
+
+      function _objectSpread2(target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i] != null ? arguments[i] : {};
+
+          if (i % 2) {
+            ownKeys(Object(source), true).forEach(function (key) {
+              _defineProperty(target, key, source[key]);
+            });
+          } else if (Object.getOwnPropertyDescriptors) {
+            Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+          } else {
+            ownKeys(Object(source)).forEach(function (key) {
+              Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+            });
+          }
+        }
+
+        return target;
+      }
+
+      var _excluded$1 = ["clickToFocus", "clickToClose"];
 
-      function _async$2(f) {
+      function _async$9(f) {
         return function () {
           for (var args = [], i = 0; i < arguments.length; i++) {
             args[i] = arguments[i];
@@ -3230,7 +2654,7 @@ html[data-toolbar-visible] #toolbar-trigger {
         };
       }
 
-      function _await$1(value, then, direct) {
+      function _await$a(value, then, direct) {
         if (direct) {
           return then ? then(value) : value;
         }
@@ -3346,526 +2770,901 @@ html[data-toolbar-visible] #toolbar-trigger {
       };
 
       var permission = "default";
-      var notify = notificationAvailable ? _async$2(function (title) {
+      var notify = notificationAvailable ? _async$9(function (title) {
         var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
         var _ref$clickToFocus = _ref.clickToFocus,
             clickToFocus = _ref$clickToFocus === void 0 ? false : _ref$clickToFocus,
             _ref$clickToClose = _ref.clickToClose,
             clickToClose = _ref$clickToClose === void 0 ? false : _ref$clickToClose,
-            options = _objectWithoutProperties(_ref, _excluded);
+            options = _objectWithoutProperties(_ref, _excluded$1);
+
+        if (permission !== "granted") {
+          return null;
+        }
+
+        var notification = new Notification(title, options);
+        arrayOfOpenedNotifications.push(notification);
+
+        notification.onclick = function () {
+          // but if the user navigated inbetween
+          // focusing window will show something else
+          // in that case it could be great to do something
+          // maybe like showing a message saying this execution
+          // is no longer visible
+          // we could also navigauate to this file execution but
+          // there is no guarantee re-executing the file would give same output
+          // and it would also trigger an other notification
+          if (clickToFocus) window.focus();
+          if (clickToClose) notification.close();
+        };
+
+        notification.onclose = function () {
+          var index = arrayOfOpenedNotifications.indexOf(notification);
+
+          if (index > -1) {
+            arrayOfOpenedNotifications.splice(index, 1);
+          }
+        };
+
+        return notification;
+      }) : function () {};
+      var requestPromise;
+      var requestPermission = notificationAvailable ? _async$9(function () {
+        if (requestPromise) return requestPromise;
+        requestPromise = Notification.requestPermission();
+        return _await$a(requestPromise, function (_requestPromise) {
+          permission = _requestPromise;
+          requestPromise = undefined;
+          return permission;
+        });
+      }) : function () {
+        return Promise.resolve("default");
+      };
+      var DARK_THEME = "dark";
+      var LIGHT_THEME = "light";
+      var themePreference = createPreference("theme");
+
+      var renderToolbarTheme = function renderToolbarTheme() {
+        var theme = getThemePreference();
+        var checkbox = document.querySelector("#checkbox-dark-theme");
+        checkbox.checked = theme === DARK_THEME;
+        setTheme(theme);
+
+        checkbox.onchange = function () {
+          if (checkbox.checked) {
+            setThemePreference(DARK_THEME);
+            setTheme(DARK_THEME);
+          } else {
+            setThemePreference(LIGHT_THEME);
+            setTheme(LIGHT_THEME);
+          }
+        };
+      };
+
+      var getThemePreference = function getThemePreference() {
+        return themePreference.has() ? themePreference.get() : DARK_THEME;
+      };
+
+      var setThemePreference = function setThemePreference(value) {
+        themePreference.set(value);
+        setTheme(value);
+      };
+
+      var setTheme = function setTheme(theme) {
+        document.querySelector("html").setAttribute("data-theme", theme);
+      };
+
+      var animationPreference = createPreference("animation");
+
+      var renderToolbarAnimation = function renderToolbarAnimation() {
+        var animCheckbox = document.querySelector("#toggle-anims");
+        animCheckbox.checked = getAnimationPreference();
+
+        animCheckbox.onchange = function () {
+          setAnimationPreference(animCheckbox.checked);
+          onPreferenceChange(animCheckbox.checked);
+        };
+
+        onPreferenceChange(); // enable toolbar transition only after first render
+
+        setTimeout(function () {
+          document.querySelector("#toolbar").setAttribute("data-animate", "");
+        });
+      };
+
+      var onPreferenceChange = function onPreferenceChange() {
+        var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getAnimationPreference();
+
+        if (value) {
+          enableAnimation();
+        } else {
+          disableAnimation();
+        }
+      };
+
+      var getAnimationPreference = function getAnimationPreference() {
+        return animationPreference.has() ? animationPreference.get() : true;
+      };
+
+      var setAnimationPreference = function setAnimationPreference(value) {
+        return animationPreference.set(value);
+      };
+
+      var enableAnimation = function enableAnimation() {
+        document.documentElement.removeAttribute("data-animation-disabled");
+      };
+
+      var disableAnimation = function disableAnimation() {
+        document.documentElement.setAttribute("data-animation-disabled", "");
+      };
+
+      var createHorizontalBreakpoint = function createHorizontalBreakpoint(breakpointValue) {
+        return createBreakpoint(windowWidthMeasure, breakpointValue);
+      };
+
+      var createMeasure = function createMeasure(_ref) {
+        var compute = _ref.compute,
+            register = _ref.register;
+        var currentValue = compute();
+
+        var get = function get() {
+          return compute();
+        };
+
+        var changed = createSignal();
+
+        var unregister = function unregister() {};
+
+        if (register) {
+          unregister = register(function () {
+            var value = compute();
+
+            if (value !== currentValue) {
+              var previousValue = value;
+              currentValue = value;
+              changed.notify(value, previousValue);
+            }
+          });
+        }
+
+        return {
+          get: get,
+          changed: changed,
+          unregister: unregister
+        };
+      };
+
+      var createSignal = function createSignal() {
+        var callbackArray = [];
+
+        var listen = function listen(callback) {
+          callbackArray.push(callback);
+          return function () {
+            var index = callbackArray.indexOf(callback);
+
+            if (index > -1) {
+              callbackArray.splice(index, 1);
+            }
+          };
+        };
+
+        var notify = function notify() {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+
+          callbackArray.slice().forEach(function (callback) {
+            callback.apply(void 0, args);
+          });
+        };
+
+        return {
+          listen: listen,
+          notify: notify
+        };
+      };
+
+      var windowWidthMeasure = createMeasure({
+        name: "window-width",
+        compute: function compute() {
+          return window.innerWidth;
+        },
+        register: function register(onchange) {
+          window.addEventListener("resize", onchange);
+          window.addEventListener("orientationchange", onchange);
+          return function () {
+            window.removeEventListener("resize", onchange);
+            window.removeEventListener("orientationchange", onchange);
+          };
+        }
+      });
+
+      var createBreakpoint = function createBreakpoint(measure, breakpointValue) {
+        var getBreakpointState = function getBreakpointState() {
+          var value = measure.get();
+
+          if (value < breakpointValue) {
+            return "below";
+          }
+
+          if (value > breakpointValue) {
+            return "above";
+          }
+
+          return "equals";
+        };
+
+        var currentBreakpointState = getBreakpointState();
+
+        var isAbove = function isAbove() {
+          return measure.get() > breakpointValue;
+        };
+
+        var isBelow = function isBelow() {
+          return measure.get() < breakpointValue;
+        };
+
+        var breakpointChanged = createSignal();
+        measure.changed.listen(function () {
+          var breakpointState = getBreakpointState();
+
+          if (breakpointState !== currentBreakpointState) {
+            var breakpointStatePrevious = currentBreakpointState;
+            currentBreakpointState = breakpointState;
+            breakpointChanged.notify(breakpointState, breakpointStatePrevious);
+          }
+        });
+        return {
+          isAbove: isAbove,
+          isBelow: isBelow,
+          changed: breakpointChanged
+        };
+      }; // const windowScrollTop = createMeasure({
+      //   name: "window-scroll-top",
+      //   compute: () => window.scrollTop,
+      //   register: (onchange) => {
+      //     window.addEventListener("scroll", onchange)
+      //     return () => {
+      //       window.removeEventListener("scroll", onchange)
+      //     }
+      //   },
+      // })
 
-        if (permission !== "granted") {
-          return null;
-        }
 
-        var notification = new Notification(title, options);
-        arrayOfOpenedNotifications.push(notification);
+      var WINDOW_MEDIUM_WIDTH = 570;
 
-        notification.onclick = function () {
-          // but if the user navigated inbetween
-          // focusing window will show something else
-          // in that case it could be great to do something
-          // maybe like showing a message saying this execution
-          // is no longer visible
-          // we could also navigauate to this file execution but
-          // there is no guarantee re-executing the file would give same output
-          // and it would also trigger an other notification
-          if (clickToFocus) window.focus();
-          if (clickToClose) notification.close();
-        };
+      var renderExecutionInToolbar = function renderExecutionInToolbar(_ref) {
+        var executedFileRelativeUrl = _ref.executedFileRelativeUrl; // reset file execution indicator ui
 
-        notification.onclose = function () {
-          var index = arrayOfOpenedNotifications.indexOf(notification);
+        applyExecutionIndicator();
+        removeForceHideElement(document.querySelector("#execution-indicator")); // apply responsive design on fileInput if needed + add listener on resize screen
 
-          if (index > -1) {
-            arrayOfOpenedNotifications.splice(index, 1);
-          }
+        var input = document.querySelector("#file-input");
+        var fileWidthBreakpoint = createHorizontalBreakpoint(WINDOW_MEDIUM_WIDTH);
+
+        var handleFileWidthBreakpoint = function handleFileWidthBreakpoint() {
+          resizeInput(input, fileWidthBreakpoint);
         };
 
-        return notification;
-      }) : function () {};
-      var requestPromise;
-      var requestPermission = notificationAvailable ? _async$2(function () {
-        if (requestPromise) return requestPromise;
-        requestPromise = Notification.requestPermission();
-        return _await$1(requestPromise, function (_requestPromise) {
-          permission = _requestPromise;
-          requestPromise = undefined;
-          return permission;
+        handleFileWidthBreakpoint();
+        fileWidthBreakpoint.changed.listen(handleFileWidthBreakpoint);
+        input.value = executedFileRelativeUrl;
+        resizeInput(input, fileWidthBreakpoint);
+        activateToolbarSection(document.querySelector("#file"));
+        removeForceHideElement(document.querySelector("#file"));
+
+        window.parent.__jsenv__.executionResultPromise.then(function (_ref2) {
+          var status = _ref2.status,
+              startTime = _ref2.startTime,
+              endTime = _ref2.endTime;
+          var execution = {
+            status: status,
+            startTime: startTime,
+            endTime: endTime
+          };
+          applyExecutionIndicator(execution);
+          var executionStorageKey = executedFileRelativeUrl;
+          var previousExecution = sessionStorage.hasOwnProperty(executionStorageKey) ? JSON.parse(sessionStorage.getItem(executionStorageKey)) : undefined;
+          notifyExecutionResult(executedFileRelativeUrl, execution, previousExecution);
+          sessionStorage.setItem(executedFileRelativeUrl, JSON.stringify(execution));
         });
-      }) : function () {
-        return Promise.resolve("default");
       };
-      var DARK_THEME = "dark";
-      var LIGHT_THEME = "light";
-      var themePreference = createPreference("theme");
 
-      var renderToolbarTheme = function renderToolbarTheme() {
-        var theme = getThemePreference();
-        var checkbox = document.querySelector("#checkbox-dark-theme");
-        checkbox.checked = theme === DARK_THEME;
-        setTheme(theme);
+      var applyExecutionIndicator = function applyExecutionIndicator() {
+        var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            _ref3$status = _ref3.status,
+            status = _ref3$status === void 0 ? "running" : _ref3$status,
+            startTime = _ref3.startTime,
+            endTime = _ref3.endTime;
 
-        checkbox.onchange = function () {
-          if (checkbox.checked) {
-            setThemePreference(DARK_THEME);
-            setTheme(DARK_THEME);
-          } else {
-            setThemePreference(LIGHT_THEME);
-            setTheme(LIGHT_THEME);
-          }
+        var executionIndicator = document.querySelector("#execution-indicator");
+        enableVariant(executionIndicator, {
+          execution: status
+        });
+        var variantNode = executionIndicator.querySelector("[data-when-active]");
+
+        variantNode.querySelector("button").onclick = function () {
+          return toggleTooltip(executionIndicator);
         };
-      };
 
-      var getThemePreference = function getThemePreference() {
-        return themePreference.has() ? themePreference.get() : DARK_THEME;
+        variantNode.querySelector(".tooltip").textContent = computeText({
+          status: status,
+          startTime: startTime,
+          endTime: endTime
+        });
       };
 
-      var setThemePreference = function setThemePreference(value) {
-        themePreference.set(value);
-        setTheme(value);
+      var computeText = function computeText(_ref4) {
+        var status = _ref4.status,
+            startTime = _ref4.startTime,
+            endTime = _ref4.endTime;
+
+        if (status === "completed") {
+          return "Execution completed in ".concat(endTime - startTime, "ms");
+        }
+
+        if (status === "errored") {
+          return "Execution failed in ".concat(endTime - startTime, "ms");
+        }
+
+        if (status === "running") {
+          return "Executing...";
+        }
+
+        return "";
       };
 
-      var setTheme = function setTheme(theme) {
-        document.querySelector("html").setAttribute("data-theme", theme);
+      var resizeInput = function resizeInput(input, fileWidthBreakpoint) {
+        var size = fileWidthBreakpoint.isBelow() ? 20 : 40;
+
+        if (input.value.length > size) {
+          input.style.width = "".concat(size, "ch");
+        } else {
+          input.style.width = "".concat(input.value.length, "ch");
+        }
       };
+      /* eslint-env browser */
 
-      var animationPreference = createPreference("animation");
 
-      var renderToolbarAnimation = function renderToolbarAnimation() {
-        var animCheckbox = document.querySelector("#toggle-anims");
-        animCheckbox.checked = getAnimationPreference();
+      function _await$9(value, then, direct) {
+        if (direct) {
+          return then ? then(value) : value;
+        }
 
-        animCheckbox.onchange = function () {
-          setAnimationPreference(animCheckbox.checked);
-          onPreferenceChange(animCheckbox.checked);
-        };
+        if (!value || !value.then) {
+          value = Promise.resolve(value);
+        }
 
-        onPreferenceChange(); // enable toolbar transition only after first render
+        return then ? value.then(then) : value;
+      }
 
-        setTimeout(function () {
-          document.querySelector("#toolbar").setAttribute("data-animate", "");
-        });
-      };
+      function _async$8(f) {
+        return function () {
+          for (var args = [], i = 0; i < arguments.length; i++) {
+            args[i] = arguments[i];
+          }
 
-      var onPreferenceChange = function onPreferenceChange() {
-        var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getAnimationPreference();
+          try {
+            return Promise.resolve(f.apply(this, args));
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        };
+      }
 
-        if (value) {
-          enableAnimation();
-        } else {
-          disableAnimation();
+      function _call$1(body, then, direct) {
+        if (direct) {
+          return then ? then(body()) : body();
         }
-      };
 
-      var getAnimationPreference = function getAnimationPreference() {
-        return animationPreference.has() ? animationPreference.get() : true;
-      };
+        try {
+          var result = Promise.resolve(body());
+          return then ? result.then(then) : result;
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      }
 
-      var setAnimationPreference = function setAnimationPreference(value) {
-        return animationPreference.set(value);
-      };
+      var fetchUsingXHR = _async$8(function (url) {
+        var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+            signal = _ref.signal,
+            _ref$method = _ref.method,
+            method = _ref$method === void 0 ? "GET" : _ref$method,
+            _ref$credentials = _ref.credentials,
+            credentials = _ref$credentials === void 0 ? "same-origin" : _ref$credentials,
+            _ref$headers = _ref.headers,
+            headers = _ref$headers === void 0 ? {} : _ref$headers,
+            _ref$body = _ref.body,
+            body = _ref$body === void 0 ? null : _ref$body;
 
-      var enableAnimation = function enableAnimation() {
-        document.documentElement.removeAttribute("data-animation-disabled");
-      };
+        var headersPromise = createPromiseAndHooks();
+        var bodyPromise = createPromiseAndHooks();
+        var xhr = new XMLHttpRequest();
 
-      var disableAnimation = function disableAnimation() {
-        document.documentElement.setAttribute("data-animation-disabled", "");
-      };
+        var failure = function failure(error) {
+          // if it was already resolved, we must reject the body promise
+          if (headersPromise.settled) {
+            bodyPromise.reject(error);
+          } else {
+            headersPromise.reject(error);
+          }
+        };
 
-      var createHorizontalBreakpoint = function createHorizontalBreakpoint(breakpointValue) {
-        return createBreakpoint(windowWidthMeasure, breakpointValue);
-      };
+        var cleanup = function cleanup() {
+          xhr.ontimeout = null;
+          xhr.onerror = null;
+          xhr.onload = null;
+          xhr.onreadystatechange = null;
+        };
 
-      var createMeasure = function createMeasure(_ref) {
-        var compute = _ref.compute,
-            register = _ref.register;
-        var currentValue = compute();
+        xhr.ontimeout = function () {
+          cleanup();
+          failure(new Error("xhr request timeout on ".concat(url, ".")));
+        };
 
-        var get = function get() {
-          return compute();
+        xhr.onerror = function (error) {
+          cleanup(); // unfortunately with have no clue why it fails
+          // might be cors for instance
+
+          failure(createRequestError(error, {
+            url: url
+          }));
+        };
+
+        xhr.onload = function () {
+          cleanup();
+          bodyPromise.resolve();
         };
 
-        var changed = createSignal();
+        signal.addEventListener("abort", function () {
+          xhr.abort();
+          var abortError = new Error("aborted");
+          abortError.name = "AbortError";
+          failure(abortError);
+        });
+
+        xhr.onreadystatechange = function () {
+          // https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/readyState
+          var readyState = xhr.readyState;
 
-        var unregister = function unregister() {};
+          if (readyState === 2) {
+            headersPromise.resolve();
+          } else if (readyState === 4) {
+            cleanup();
+            bodyPromise.resolve();
+          }
+        };
 
-        if (register) {
-          unregister = register(function () {
-            var value = compute();
+        xhr.open(method, url, true);
+        Object.keys(headers).forEach(function (key) {
+          xhr.setRequestHeader(key, headers[key]);
+        });
+        xhr.withCredentials = computeWithCredentials({
+          credentials: credentials,
+          url: url
+        });
 
-            if (value !== currentValue) {
-              var previousValue = value;
-              currentValue = value;
-              changed.notify(value, previousValue);
-            }
-          });
+        if ("responseType" in xhr && hasBlob) {
+          xhr.responseType = "blob";
         }
 
-        return {
-          get: get,
-          changed: changed,
-          unregister: unregister
-        };
-      };
+        xhr.send(body);
+        return _await$9(headersPromise, function () {
+          // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseURL
+          var responseUrl = "responseURL" in xhr ? xhr.responseURL : headers["x-request-url"];
+          var responseStatus = xhr.status;
+          var responseStatusText = xhr.statusText;
+          var responseHeaders = getHeadersFromXHR(xhr);
 
-      var createSignal = function createSignal() {
-        var callbackArray = [];
+          var readBody = function readBody() {
+            return _await$9(bodyPromise, function () {
+              var status = xhr.status; // in Chrome on file:/// URLs, status is 0
 
-        var listen = function listen(callback) {
-          callbackArray.push(callback);
-          return function () {
-            var index = callbackArray.indexOf(callback);
+              if (status === 0) {
+                responseStatus = 200;
+              }
 
-            if (index > -1) {
-              callbackArray.splice(index, 1);
-            }
+              var body = "response" in xhr ? xhr.response : xhr.responseText;
+              return {
+                responseBody: body,
+                responseBodyType: detectBodyType(body)
+              };
+            });
           };
-        };
 
-        var notify = function notify() {
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
+          var text = function text() {
+            return _call$1(readBody, function (_ref2) {
+              var responseBody = _ref2.responseBody,
+                  responseBodyType = _ref2.responseBodyType;
 
-          callbackArray.slice().forEach(function (callback) {
-            callback.apply(void 0, args);
-          });
-        };
+              if (responseBodyType === "blob") {
+                return blobToText(responseBody);
+              }
 
-        return {
-          listen: listen,
-          notify: notify
-        };
-      };
+              if (responseBodyType === "formData") {
+                throw new Error("could not read FormData body as text");
+              }
 
-      var windowWidthMeasure = createMeasure({
-        name: "window-width",
-        compute: function compute() {
-          return window.innerWidth;
-        },
-        register: function register(onchange) {
-          window.addEventListener("resize", onchange);
-          window.addEventListener("orientationchange", onchange);
-          return function () {
-            window.removeEventListener("resize", onchange);
-            window.removeEventListener("orientationchange", onchange);
+              return responseBodyType === "dataView" ? arrayBufferToText(responseBody.buffer) : responseBodyType === "arrayBuffer" ? arrayBufferToText(responseBody) : String(responseBody);
+            });
           };
-        }
-      });
-
-      var createBreakpoint = function createBreakpoint(measure, breakpointValue) {
-        var getBreakpointState = function getBreakpointState() {
-          var value = measure.get();
 
-          if (value < breakpointValue) {
-            return "below";
-          }
+          var json = function json() {
+            return _call$1(text, JSON.parse);
+          };
 
-          if (value > breakpointValue) {
-            return "above";
-          }
+          var blob = _async$8(function () {
+            if (!hasBlob) {
+              throw new Error("blob not supported");
+            }
 
-          return "equals";
-        };
+            return _call$1(readBody, function (_ref3) {
+              var responseBody = _ref3.responseBody,
+                  responseBodyType = _ref3.responseBodyType;
 
-        var currentBreakpointState = getBreakpointState();
+              if (responseBodyType === "blob") {
+                return responseBody;
+              }
 
-        var isAbove = function isAbove() {
-          return measure.get() > breakpointValue;
-        };
+              if (responseBodyType === "dataView") {
+                return new Blob([cloneBuffer(responseBody.buffer)]);
+              }
 
-        var isBelow = function isBelow() {
-          return measure.get() < breakpointValue;
-        };
+              if (responseBodyType === "arrayBuffer") {
+                return new Blob([cloneBuffer(responseBody)]);
+              }
 
-        var breakpointChanged = createSignal();
-        measure.changed.listen(function () {
-          var breakpointState = getBreakpointState();
+              if (responseBodyType === "formData") {
+                throw new Error("could not read FormData body as blob");
+              }
 
-          if (breakpointState !== currentBreakpointState) {
-            var breakpointStatePrevious = currentBreakpointState;
-            currentBreakpointState = breakpointState;
-            breakpointChanged.notify(breakpointState, breakpointStatePrevious);
-          }
-        });
-        return {
-          isAbove: isAbove,
-          isBelow: isBelow,
-          changed: breakpointChanged
-        };
-      }; // const windowScrollTop = createMeasure({
-      //   name: "window-scroll-top",
-      //   compute: () => window.scrollTop,
-      //   register: (onchange) => {
-      //     window.addEventListener("scroll", onchange)
-      //     return () => {
-      //       window.removeEventListener("scroll", onchange)
-      //     }
-      //   },
-      // })
+              return new Blob([String(responseBody)]);
+            });
+          });
 
+          var arrayBuffer = function arrayBuffer() {
+            return _call$1(readBody, function (_ref4) {
+              var responseBody = _ref4.responseBody,
+                  responseBodyType = _ref4.responseBodyType;
+              return responseBodyType === "arrayBuffer" ? cloneBuffer(responseBody) : _call$1(blob, blobToArrayBuffer);
+            });
+          };
 
-      var WINDOW_MEDIUM_WIDTH = 570;
+          var formData = _async$8(function () {
+            if (!hasFormData) {
+              throw new Error("formData not supported");
+            }
 
-      var renderExecutionInToolbar = function renderExecutionInToolbar(_ref) {
-        var executedFileRelativeUrl = _ref.executedFileRelativeUrl; // reset file execution indicator ui
+            return _call$1(text, textToFormData);
+          });
 
-        applyExecutionIndicator();
-        removeForceHideElement(document.querySelector("#execution-indicator")); // apply responsive design on fileInput if needed + add listener on resize screen
+          return {
+            url: responseUrl,
+            status: responseStatus,
+            statusText: responseStatusText,
+            headers: responseHeaders,
+            text: text,
+            json: json,
+            blob: blob,
+            arrayBuffer: arrayBuffer,
+            formData: formData
+          };
+        });
+      });
 
-        var input = document.querySelector("#file-input");
-        var fileWidthBreakpoint = createHorizontalBreakpoint(WINDOW_MEDIUM_WIDTH);
+      var canUseBlob = function canUseBlob() {
+        if (typeof window.FileReader !== "function") return false;
+        if (typeof window.Blob !== "function") return false;
 
-        var handleFileWidthBreakpoint = function handleFileWidthBreakpoint() {
-          resizeInput(input, fileWidthBreakpoint);
-        };
+        try {
+          // eslint-disable-next-line no-new
+          new Blob();
+          return true;
+        } catch (e) {
+          return false;
+        }
+      };
 
-        handleFileWidthBreakpoint();
-        fileWidthBreakpoint.changed.listen(handleFileWidthBreakpoint);
-        input.value = executedFileRelativeUrl;
-        resizeInput(input, fileWidthBreakpoint);
-        activateToolbarSection(document.querySelector("#file"));
-        removeForceHideElement(document.querySelector("#file"));
+      var hasBlob = canUseBlob();
+      var hasFormData = typeof window.FormData === "function";
+      var hasArrayBuffer = typeof window.ArrayBuffer === "function";
+      var hasSearchParams = typeof window.URLSearchParams === "function";
 
-        window.parent.__jsenv__.executionResultPromise.then(function (_ref2) {
-          var status = _ref2.status,
-              startTime = _ref2.startTime,
-              endTime = _ref2.endTime;
-          var execution = {
-            status: status,
-            startTime: startTime,
-            endTime: endTime
-          };
-          applyExecutionIndicator(execution);
-          var executionStorageKey = executedFileRelativeUrl;
-          var previousExecution = sessionStorage.hasOwnProperty(executionStorageKey) ? JSON.parse(sessionStorage.getItem(executionStorageKey)) : undefined;
-          notifyExecutionResult(executedFileRelativeUrl, execution, previousExecution);
-          sessionStorage.setItem(executedFileRelativeUrl, JSON.stringify(execution));
-        });
+      var createRequestError = function createRequestError(error, _ref5) {
+        var url = _ref5.url;
+        return new Error("error during xhr request on ".concat(url, ".\n--- error stack ---\n").concat(error.stack));
       };
 
-      var applyExecutionIndicator = function applyExecutionIndicator() {
-        var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-            _ref3$status = _ref3.status,
-            status = _ref3$status === void 0 ? "running" : _ref3$status,
-            startTime = _ref3.startTime,
-            endTime = _ref3.endTime;
+      var createPromiseAndHooks = function createPromiseAndHooks() {
+        var resolve;
+        var reject;
+        var promise = new Promise(function (res, rej) {
+          resolve = function resolve(value) {
+            promise.settled = true;
+            res(value);
+          };
 
-        var executionIndicator = document.querySelector("#execution-indicator");
-        enableVariant(executionIndicator, {
-          execution: status
+          reject = function reject(value) {
+            promise.settled = true;
+            rej(value);
+          };
         });
-        var variantNode = executionIndicator.querySelector("[data-when-active]");
+        promise.resolve = resolve;
+        promise.reject = reject;
+        return promise;
+      }; // https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
 
-        variantNode.querySelector("button").onclick = function () {
-          return toggleTooltip(executionIndicator);
-        };
 
-        variantNode.querySelector(".tooltip").textContent = computeText({
-          status: status,
-          startTime: startTime,
-          endTime: endTime
-        });
+      var computeWithCredentials = function computeWithCredentials(_ref6) {
+        var credentials = _ref6.credentials,
+            url = _ref6.url;
+
+        if (credentials === "same-origin") {
+          return originSameAsGlobalOrigin(url);
+        }
+
+        return credentials === "include";
       };
 
-      var computeText = function computeText(_ref4) {
-        var status = _ref4.status,
-            startTime = _ref4.startTime,
-            endTime = _ref4.endTime;
+      var originSameAsGlobalOrigin = function originSameAsGlobalOrigin(url) {
+        // if we cannot read globalOrigin from window.location.origin, let's consider it's ok
+        if ((typeof window === "undefined" ? "undefined" : _typeof(window)) !== "object") return true;
+        if (_typeof(window.location) !== "object") return true;
+        var globalOrigin = window.location.origin;
+        if (globalOrigin === "null") return true;
+        return hrefToOrigin(url) === globalOrigin;
+      };
 
-        if (status === "completed") {
-          return "Execution completed in ".concat(endTime - startTime, "ms");
+      var detectBodyType = function detectBodyType(body) {
+        if (!body) {
+          return "";
         }
 
-        if (status === "errored") {
-          return "Execution failed in ".concat(endTime - startTime, "ms");
+        if (typeof body === "string") {
+          return "text";
         }
 
-        if (status === "running") {
-          return "Executing...";
+        if (hasBlob && Blob.prototype.isPrototypeOf(body)) {
+          return "blob";
         }
 
-        return "";
-      };
+        if (hasFormData && FormData.prototype.isPrototypeOf(body)) {
+          return "formData";
+        }
 
-      var resizeInput = function resizeInput(input, fileWidthBreakpoint) {
-        var size = fileWidthBreakpoint.isBelow() ? 20 : 40;
+        if (hasArrayBuffer) {
+          if (hasBlob && isDataView(body)) {
+            return "dataView";
+          }
 
-        if (input.value.length > size) {
-          input.style.width = "".concat(size, "ch");
-        } else {
-          input.style.width = "".concat(input.value.length, "ch");
+          if (ArrayBuffer.prototype.isPrototypeOf(body) || isArrayBufferView(body)) {
+            return "arrayBuffer";
+          }
         }
-      };
 
-      var createDetailedMessage = function createDetailedMessage(message) {
-        var details = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        var string = "".concat(message);
-        Object.keys(details).forEach(function (key) {
-          var value = details[key];
-          string += "\n--- ".concat(key, " ---\n").concat(Array.isArray(value) ? value.join("\n") : value);
-        });
-        return string;
-      };
-
-      var COMPILE_ID_OTHERWISE = "otherwise";
+        if (hasSearchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
+          return "searchParams";
+        }
 
-      var computeCompileIdFromGroupId = function computeCompileIdFromGroupId(_ref) {
-        var groupId = _ref.groupId,
-            groupMap = _ref.groupMap;
+        return "";
+      }; // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/getAllResponseHeaders#Example
 
-        if (typeof groupId === "undefined") {
-          if (COMPILE_ID_OTHERWISE in groupMap) {
-            return COMPILE_ID_OTHERWISE;
-          }
 
-          var keys = Object.keys(groupMap);
+      var getHeadersFromXHR = function getHeadersFromXHR(xhr) {
+        var headerMap = {};
+        var headersString = xhr.getAllResponseHeaders();
+        if (headersString === "") return headerMap;
+        var lines = headersString.trim().split(/[\r\n]+/);
+        lines.forEach(function (line) {
+          var parts = line.split(": ");
+          var name = parts.shift();
+          var value = parts.join(": ");
+          headerMap[name.toLowerCase()] = value;
+        });
+        return headerMap;
+      };
 
-          if (keys.length === 1) {
-            return keys[0];
-          }
+      var hrefToOrigin = function hrefToOrigin(href) {
+        var scheme = hrefToScheme(href);
 
-          throw new Error(createUnexpectedGroupIdMessage({
-            groupMap: groupMap
-          }));
+        if (scheme === "file") {
+          return "file://";
         }
 
-        if (groupId in groupMap === false) {
-          throw new Error(createUnexpectedGroupIdMessage({
-            groupId: groupId,
-            groupMap: groupMap
-          }));
+        if (scheme === "http" || scheme === "https") {
+          var secondProtocolSlashIndex = scheme.length + "://".length;
+          var pathnameSlashIndex = href.indexOf("/", secondProtocolSlashIndex);
+          if (pathnameSlashIndex === -1) return href;
+          return href.slice(0, pathnameSlashIndex);
         }
 
-        return groupId;
+        return href.slice(0, scheme.length + 1);
       };
 
-      var createUnexpectedGroupIdMessage = function createUnexpectedGroupIdMessage(_ref2) {
-        var _createDetailedMessag;
+      var hrefToScheme = function hrefToScheme(href) {
+        var colonIndex = href.indexOf(":");
+        if (colonIndex === -1) return "";
+        return href.slice(0, colonIndex);
+      };
 
-        var compileId = _ref2.compileId,
-            groupMap = _ref2.groupMap;
-        return createDetailedMessage("unexpected groupId.", (_createDetailedMessag = {}, _defineProperty(_createDetailedMessag, "expected compiled id", Object.keys(groupMap)), _defineProperty(_createDetailedMessag, "received compile id", compileId), _createDetailedMessag));
+      var isDataView = function isDataView(obj) {
+        return obj && DataView.prototype.isPrototypeOf(obj);
       };
 
-      var valueToVersion = function valueToVersion(value) {
-        if (typeof value === "number") {
-          return numberToVersion(value);
-        }
+      var isArrayBufferView = ArrayBuffer.isView || function () {
+        var viewClasses = ["[object Int8Array]", "[object Uint8Array]", "[object Uint8ClampedArray]", "[object Int16Array]", "[object Uint16Array]", "[object Int32Array]", "[object Uint32Array]", "[object Float32Array]", "[object Float64Array]"];
+        return function (value) {
+          return value && viewClasses.includes(Object.prototype.toString.call(value));
+        };
+      }();
 
-        if (typeof value === "string") {
-          return stringToVersion(value);
-        }
+      var textToFormData = function textToFormData(text) {
+        var form = new FormData();
+        text.trim().split("&").forEach(function (bytes) {
+          if (bytes) {
+            var split = bytes.split("=");
+            var name = split.shift().replace(/\+/g, " ");
+            var value = split.join("=").replace(/\+/g, " ");
+            form.append(decodeURIComponent(name), decodeURIComponent(value));
+          }
+        });
+        return form;
+      };
+
+      var blobToArrayBuffer = _async$8(function (blob) {
+        var reader = new FileReader();
+        var promise = fileReaderReady(reader);
+        reader.readAsArrayBuffer(blob);
+        return promise;
+      });
 
-        throw new TypeError("version must be a number or a string, got ".concat(value));
+      var blobToText = function blobToText(blob) {
+        var reader = new FileReader();
+        var promise = fileReaderReady(reader);
+        reader.readAsText(blob);
+        return promise;
       };
 
-      var numberToVersion = function numberToVersion(number) {
-        return {
-          major: number,
-          minor: 0,
-          patch: 0
-        };
+      var arrayBufferToText = function arrayBufferToText(arrayBuffer) {
+        var view = new Uint8Array(arrayBuffer);
+        var chars = new Array(view.length);
+        var i = 0;
+
+        while (i < view.length) {
+          chars[i] = String.fromCharCode(view[i]);
+          i++;
+        }
+
+        return chars.join("");
       };
 
-      var stringToVersion = function stringToVersion(string) {
-        if (string.indexOf(".") > -1) {
-          var parts = string.split(".");
-          return {
-            major: Number(parts[0]),
-            minor: parts[1] ? Number(parts[1]) : 0,
-            patch: parts[2] ? Number(parts[2]) : 0
+      var fileReaderReady = function fileReaderReady(reader) {
+        return new Promise(function (resolve, reject) {
+          reader.onload = function () {
+            resolve(reader.result);
           };
-        }
 
-        if (isNaN(string)) {
-          return {
-            major: 0,
-            minor: 0,
-            patch: 0
+          reader.onerror = function () {
+            reject(reader.error);
           };
+        });
+      };
+
+      var cloneBuffer = function cloneBuffer(buffer) {
+        if (buffer.slice) {
+          return buffer.slice(0);
         }
 
-        return {
-          major: Number(string),
-          minor: 0,
-          patch: 0
-        };
+        var view = new Uint8Array(buffer.byteLength);
+        view.set(new Uint8Array(buffer));
+        return view.buffer;
       };
 
-      var versionCompare = function versionCompare(versionA, versionB) {
-        var semanticVersionA = valueToVersion(versionA);
-        var semanticVersionB = valueToVersion(versionB);
-        var majorDiff = semanticVersionA.major - semanticVersionB.major;
+      var _excluded = ["mode"];
 
-        if (majorDiff > 0) {
-          return majorDiff;
+      function _await$8(value, then, direct) {
+        if (direct) {
+          return then ? then(value) : value;
         }
 
-        if (majorDiff < 0) {
-          return majorDiff;
+        if (!value || !value.then) {
+          value = Promise.resolve(value);
         }
 
-        var minorDiff = semanticVersionA.minor - semanticVersionB.minor;
+        return then ? value.then(then) : value;
+      }
 
-        if (minorDiff > 0) {
-          return minorDiff;
-        }
+      function _async$7(f) {
+        return function () {
+          for (var args = [], i = 0; i < arguments.length; i++) {
+            args[i] = arguments[i];
+          }
 
-        if (minorDiff < 0) {
-          return minorDiff;
-        }
+          try {
+            return Promise.resolve(f.apply(this, args));
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        };
+      }
 
-        var patchDiff = semanticVersionA.patch - semanticVersionB.patch;
+      var fetchNative = _async$7(function (url) {
+        var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-        if (patchDiff > 0) {
-          return patchDiff;
-        }
+        var _ref$mode = _ref.mode,
+            mode = _ref$mode === void 0 ? "cors" : _ref$mode,
+            options = _objectWithoutProperties(_ref, _excluded);
 
-        if (patchDiff < 0) {
-          return patchDiff;
-        }
+        return _await$8(window.fetch(url, _objectSpread2({
+          mode: mode
+        }, options)), function (response) {
+          return {
+            url: response.url,
+            status: response.status,
+            statusText: "",
+            headers: responseToHeaders(response),
+            text: function text() {
+              return response.text();
+            },
+            json: function json() {
+              return response.json();
+            },
+            blob: function blob() {
+              return response.blob();
+            },
+            arrayBuffer: function arrayBuffer() {
+              return response.arrayBuffer();
+            },
+            formData: function formData() {
+              return response.formData();
+            }
+          };
+        });
+      });
 
-        return 0;
+      var responseToHeaders = function responseToHeaders(response) {
+        var headers = {};
+        response.headers.forEach(function (value, name) {
+          headers[name] = value;
+        });
+        return headers;
       };
 
-      var versionIsBelow = function versionIsBelow(versionSupposedBelow, versionSupposedAbove) {
-        return versionCompare(versionSupposedBelow, versionSupposedAbove) < 0;
-      };
+      var fetchUrl = typeof window.fetch === "function" && typeof window.AbortController === "function" ? fetchNative : fetchUsingXHR;
 
-      var findHighestVersion = function findHighestVersion() {
-        for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
-          values[_key] = arguments[_key];
+      function _await$7(value, then, direct) {
+        if (direct) {
+          return then ? then(value) : value;
         }
 
-        if (values.length === 0) throw new Error("missing argument");
-        return values.reduce(function (highestVersion, value) {
-          if (versionIsBelow(highestVersion, value)) {
-            return value;
-          }
+        if (!value || !value.then) {
+          value = Promise.resolve(value);
+        }
 
-          return highestVersion;
-        });
-      };
+        return then ? value.then(then) : value;
+      }
 
-      var resolveGroup = function resolveGroup(_ref, groupMap) {
-        var name = _ref.name,
-            version = _ref.version;
-        return Object.keys(groupMap).find(function (compileIdCandidate) {
-          var minRuntimeVersions = groupMap[compileIdCandidate].minRuntimeVersions;
-          var versionForGroup = minRuntimeVersions[name];
+      function _async$6(f) {
+        return function () {
+          for (var args = [], i = 0; i < arguments.length; i++) {
+            args[i] = arguments[i];
+          }
 
-          if (!versionForGroup) {
-            return false;
+          try {
+            return Promise.resolve(f.apply(this, args));
+          } catch (e) {
+            return Promise.reject(e);
           }
+        };
+      }
 
-          var highestVersion = findHighestVersion(version, versionForGroup);
-          return highestVersion === version;
+      var fetchJson = _async$6(function (url) {
+        var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        return _await$7(fetchUrl(url, options), function (response) {
+          return _await$7(response.json());
         });
-      };
+      });
       /*
        * Prefer window.navigator.userAgentData before resorting to
        * window.navigator.userAgent because of
@@ -4104,28 +3903,338 @@ html[data-toolbar-visible] #toolbar-trigger {
         };
       };
 
-      var normalizeName = function normalizeName(name) {
-        return name.toLowerCase();
-      };
+      var normalizeName = function normalizeName(name) {
+        return name.toLowerCase();
+      };
+
+      var normalizeVersion = function normalizeVersion(version) {
+        if (version.indexOf(".") > -1) {
+          var parts = version.split("."); // remove extraneous .
+
+          return parts.slice(0, 3).join(".");
+        }
+
+        if (version.indexOf("_") > -1) {
+          var _parts = version.split("_"); // remove extraneous _
+
+
+          return _parts.slice(0, 3).join("_");
+        }
+
+        return version;
+      };
+
+      var executeWithScriptModuleInjection = function executeWithScriptModuleInjection(code) {
+        var scriptModule = document.createElement("script");
+        scriptModule.type = "module";
+        var loadPromise = new Promise(function (resolve, reject) {
+          scriptModule.onload = function () {
+            document.body.removeChild(scriptModule);
+            resolve();
+          };
+
+          scriptModule.onerror = function () {
+            document.body.removeChild(scriptModule);
+            reject();
+          };
+
+          document.body.appendChild(scriptModule);
+        });
+        scriptModule.src = asBase64Url(code);
+        return loadPromise;
+      };
+
+      var asBase64Url = function asBase64Url(text) {
+        var mimeType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "application/javascript";
+        return "data:".concat(mimeType, ";base64,").concat(window.btoa(text));
+      };
+
+      function _await$6(value, then, direct) {
+        if (direct) {
+          return then ? then(value) : value;
+        }
+
+        if (!value || !value.then) {
+          value = Promise.resolve(value);
+        }
+
+        return then ? value.then(then) : value;
+      }
+
+      function _catch$4(body, recover) {
+        try {
+          var result = body();
+        } catch (e) {
+          return recover(e);
+        }
+
+        if (result && result.then) {
+          return result.then(void 0, recover);
+        }
+
+        return result;
+      }
+
+      function _async$5(f) {
+        return function () {
+          for (var args = [], i = 0; i < arguments.length; i++) {
+            args[i] = arguments[i];
+          }
+
+          try {
+            return Promise.resolve(f.apply(this, args));
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        };
+      }
+
+      var supportsImportmap = _async$5(function () {
+        var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            _ref$remote = _ref.remote,
+            remote = _ref$remote === void 0 ? true : _ref$remote;
+
+        var specifier = asBase64Url("export default false");
+        var importMap = {
+          imports: _defineProperty({}, specifier, asBase64Url("export default true"))
+        };
+        var importmapScript = document.createElement("script");
+        var importmapString = JSON.stringify(importMap, null, "  ");
+        importmapScript.type = "importmap";
+
+        if (remote) {
+          importmapScript.src = "data:application/json;base64,".concat(window.btoa(importmapString));
+        } else {
+          importmapScript.textContent = importmapString;
+        }
+
+        document.body.appendChild(importmapScript);
+        return _catch$4(function () {
+          return _await$6(executeWithScriptModuleInjection("import supported from \"".concat(specifier, "\"; window.__jsenv_runtime_test_importmap__ = supported")), function () {
+            document.body.removeChild(importmapScript);
+            var supported = window.__jsenv_runtime_test_importmap__;
+            delete window.__jsenv_runtime_test_importmap__;
+            return supported;
+          });
+        }, function () {
+          document.body.removeChild(importmapScript);
+          return false;
+        });
+      });
+
+      function _await$5(value, then, direct) {
+        if (direct) {
+          return then ? then(value) : value;
+        }
+
+        if (!value || !value.then) {
+          value = Promise.resolve(value);
+        }
+
+        return then ? value.then(then) : value;
+      }
+
+      function _catch$3(body, recover) {
+        try {
+          var result = body();
+        } catch (e) {
+          return recover(e);
+        }
+
+        if (result && result.then) {
+          return result.then(void 0, recover);
+        }
+
+        return result;
+      }
+
+      function _async$4(f) {
+        return function () {
+          for (var args = [], i = 0; i < arguments.length; i++) {
+            args[i] = arguments[i];
+          }
+
+          try {
+            return Promise.resolve(f.apply(this, args));
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        };
+      }
+
+      var supportsDynamicImport = _async$4(function () {
+        var moduleSource = asBase64Url("export default 42");
+        return _catch$3(function () {
+          return _await$5(executeWithScriptModuleInjection("window.__jsenv_runtime_test_dynamic_import__ = import(".concat(JSON.stringify(moduleSource), ")")), function () {
+            return _await$5(window.__jsenv_runtime_test_dynamic_import__, function (namespace) {
+              delete window.__jsenv_runtime_test_dynamic_import__;
+              return namespace.default === 42;
+            });
+          });
+        }, function () {
+          return false;
+        });
+      });
+
+      function _await$4(value, then, direct) {
+        if (direct) {
+          return then ? then(value) : value;
+        }
+
+        if (!value || !value.then) {
+          value = Promise.resolve(value);
+        }
+
+        return then ? value.then(then) : value;
+      }
+
+      function _catch$2(body, recover) {
+        try {
+          var result = body();
+        } catch (e) {
+          return recover(e);
+        }
+
+        if (result && result.then) {
+          return result.then(void 0, recover);
+        }
+
+        return result;
+      }
+
+      var supportsTopLevelAwait = function supportsTopLevelAwait() {
+        return _await$4(_catch$2(function () {
+          return _await$4(executeWithScriptModuleInjection("window.__jsenv_runtime_test_top_level_await__ = await Promise.resolve(42)"), function () {
+            var supported = window.__jsenv_runtime_test_top_level_await__ === 42;
+            delete window.__jsenv_runtime_test_top_level_await__;
+            return supported;
+          });
+        }, function () {
+          return false;
+        }));
+      };
+
+      function _await$3(value, then, direct) {
+        if (direct) {
+          return then ? then(value) : value;
+        }
+
+        if (!value || !value.then) {
+          value = Promise.resolve(value);
+        }
+
+        return then ? value.then(then) : value;
+      }
+
+      function _catch$1(body, recover) {
+        try {
+          var result = body();
+        } catch (e) {
+          return recover(e);
+        }
+
+        if (result && result.then) {
+          return result.then(void 0, recover);
+        }
+
+        return result;
+      }
+
+      function _async$3(f) {
+        return function () {
+          for (var args = [], i = 0; i < arguments.length; i++) {
+            args[i] = arguments[i];
+          }
+
+          try {
+            return Promise.resolve(f.apply(this, args));
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        };
+      }
+
+      var supportsJsonImportAssertions = _async$3(function () {
+        var jsonBase64Url = asBase64Url("42", "application/json");
+        var moduleSource = asBase64Url("import data from \"".concat(jsonBase64Url, "\" assert { type: \"json\" }\n  export default data"));
+        return _catch$1(function () {
+          return _await$3(executeWithScriptModuleInjection("window.__jsenv_runtime_test_json_import_assertion__ = import(".concat(JSON.stringify(moduleSource), ")")), function () {
+            return _await$3(window.__jsenv_runtime_test_json_import_assertion__, function (namespace) {
+              var supported = namespace.default === 42;
+              delete window.__jsenv_runtime_test_json_import_assertion__;
+              return supported;
+            });
+          });
+        }, function () {
+          return false;
+        });
+      });
+
+      function _await$2(value, then, direct) {
+        if (direct) {
+          return then ? then(value) : value;
+        }
+
+        if (!value || !value.then) {
+          value = Promise.resolve(value);
+        }
+
+        return then ? value.then(then) : value;
+      }
+
+      function _catch(body, recover) {
+        try {
+          var result = body();
+        } catch (e) {
+          return recover(e);
+        }
+
+        if (result && result.then) {
+          return result.then(void 0, recover);
+        }
 
-      var normalizeVersion = function normalizeVersion(version) {
-        if (version.indexOf(".") > -1) {
-          var parts = version.split("."); // remove extraneous .
+        return result;
+      }
 
-          return parts.slice(0, 3).join(".");
-        }
+      function _async$2(f) {
+        return function () {
+          for (var args = [], i = 0; i < arguments.length; i++) {
+            args[i] = arguments[i];
+          }
 
-        if (version.indexOf("_") > -1) {
-          var _parts = version.split("_"); // remove extraneous _
+          try {
+            return Promise.resolve(f.apply(this, args));
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        };
+      }
 
+      var supportsCssImportAssertions = _async$2(function () {
+        var cssBase64Url = asBase64Url("p { color: red; }", "text/css");
+        var moduleSource = asBase64Url("import css from \"".concat(cssBase64Url, "\" assert { type: \"css\" }\n  export default css"));
+        return _catch(function () {
+          return _await$2(executeWithScriptModuleInjection("window.__jsenv_runtime_test_css_import_assertion__ = import(".concat(JSON.stringify(moduleSource), ")")), function () {
+            return _await$2(window.__jsenv_runtime_test_css_import_assertion__, function (namespace) {
+              return namespace.default instanceof CSSStyleSheet;
+            });
+          });
+        }, function () {
+          return false;
+        });
+      });
 
-          return _parts.slice(0, 3).join("_");
+      var supportsNewStylesheet = function supportsNewStylesheet() {
+        try {
+          // eslint-disable-next-line no-new
+          new CSSStyleSheet();
+          return true;
+        } catch (e) {
+          return false;
         }
-
-        return version;
       };
 
-      function _await(value, then, direct) {
+      function _await$1(value, then, direct) {
         if (direct) {
           return then ? then(value) : value;
         }
@@ -4151,7 +4260,7 @@ html[data-toolbar-visible] #toolbar-trigger {
         };
       }
 
-      function _call$1(body, then, direct) {
+      function _call(body, then, direct) {
         if (direct) {
           return then ? then(body()) : body();
         }
@@ -4164,134 +4273,74 @@ html[data-toolbar-visible] #toolbar-trigger {
         }
       }
 
-      function _invoke(body, then) {
-        var result = body();
-
-        if (result && result.then) {
-          return result.then(then);
-        }
-
-        return then(result);
-      }
-
-      function _catch(body, recover) {
-        try {
-          var result = body();
-        } catch (e) {
-          return recover(e);
-        }
-
-        if (result && result.then) {
-          return result.then(void 0, recover);
-        }
-
-        return result;
-      }
-
       var scanBrowserRuntimeFeatures = _async$1(function () {
         var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
             _ref$coverageHandledF = _ref.coverageHandledFromOutside,
             coverageHandledFromOutside = _ref$coverageHandledF === void 0 ? false : _ref$coverageHandledF,
-            _ref$failFastOnFeatur = _ref.failFastOnFeatureDetection,
-            failFastOnFeatureDetection = _ref$failFastOnFeatur === void 0 ? false : _ref$failFastOnFeatur;
-
-        return _await(fetchJson("/.jsenv/__compile_server_meta__.json"), function (_ref2) {
-          var outDirectoryRelativeUrl = _ref2.outDirectoryRelativeUrl,
+            _ref$forceCompilation = _ref.forceCompilation,
+            forceCompilation = _ref$forceCompilation === void 0 ? false : _ref$forceCompilation,
+            _ref$forceSource = _ref.forceSource,
+            forceSource = _ref$forceSource === void 0 ? false : _ref$forceSource;
+
+        var jsenvCompileProfileUrl = "/__jsenv_compile_profile__";
+        return _await$1(fetchJson(jsenvCompileProfileUrl), function (_ref2) {
+          var jsenvDirectoryRelativeUrl = _ref2.jsenvDirectoryRelativeUrl,
               inlineImportMapIntoHTML = _ref2.inlineImportMapIntoHTML,
-              customCompilerPatterns = _ref2.customCompilerPatterns,
-              compileServerGroupMap = _ref2.compileServerGroupMap;
-          var browser = detectBrowser();
-          var compileId = computeCompileIdFromGroupId({
-            groupId: resolveGroup(browser, compileServerGroupMap),
-            groupMap: compileServerGroupMap
-          });
-          var groupInfo = compileServerGroupMap[compileId];
-          var featuresReport = {
-            importmap: undefined,
-            dynamicImport: undefined,
-            topLevelAwait: undefined,
-            jsonImportAssertions: undefined,
-            cssImportAssertions: undefined,
-            newStylesheet: undefined
-          };
-          return _await(detectSupportedFeatures({
-            featuresReport: featuresReport,
-            failFastOnFeatureDetection: failFastOnFeatureDetection,
+              availableCompileIds = _ref2.availableCompileIds;
+
+          var _detectBrowser = detectBrowser(),
+              name = _detectBrowser.name,
+              version = _detectBrowser.version;
+
+          return _await$1(detectSupportedFeatures({
+            coverageHandledFromOutside: coverageHandledFromOutside,
             inlineImportMapIntoHTML: inlineImportMapIntoHTML
-          }), function () {
-            return _await(adjustMissingFeatureNames(groupInfo, {
+          }), function (featuresReport) {
+            var runtimeReport = {
+              env: {
+                browser: true
+              },
+              name: name,
+              version: version,
               featuresReport: featuresReport,
-              coverageHandledFromOutside: coverageHandledFromOutside
-            }), function (missingFeatureNames) {
-              var canAvoidCompilation = customCompilerPatterns.length === 0 && missingFeatureNames.length === 0 && featuresReport.importmap && featuresReport.dynamicImport && featuresReport.topLevelAwait;
+              forceSource: forceSource,
+              forceCompilation: forceCompilation
+            };
+            return _await$1(fetchJson(jsenvCompileProfileUrl, {
+              method: "POST",
+              headers: {
+                "content-type": "application/json"
+              },
+              body: JSON.stringify(runtimeReport)
+            }), function (_ref3) {
+              var compileProfile = _ref3.compileProfile,
+                  compileId = _ref3.compileId;
               return {
-                canAvoidCompilation: canAvoidCompilation,
-                featuresReport: featuresReport,
-                customCompilerPatterns: customCompilerPatterns,
-                missingFeatureNames: missingFeatureNames,
+                jsenvDirectoryRelativeUrl: jsenvDirectoryRelativeUrl,
                 inlineImportMapIntoHTML: inlineImportMapIntoHTML,
-                outDirectoryRelativeUrl: outDirectoryRelativeUrl,
-                compileId: compileId,
-                browser: browser
+                availableCompileIds: availableCompileIds,
+                runtimeReport: runtimeReport,
+                compileProfile: compileProfile,
+                compileId: compileId
               };
             });
           });
         });
       });
 
-      var adjustMissingFeatureNames = _async$1(function (groupInfo, _ref3) {
-        var featuresReport = _ref3.featuresReport,
-            coverageHandledFromOutside = _ref3.coverageHandledFromOutside;
-        var missingFeatureNames = groupInfo.missingFeatureNames;
-        var missingFeatureNamesCopy = missingFeatureNames.slice();
-
-        var markAsSupported = function markAsSupported(name) {
-          var index = missingFeatureNamesCopy.indexOf(name);
-
-          if (index > -1) {
-            missingFeatureNamesCopy.splice(index, 1);
-          }
-        }; // When instrumentation CAN be handed by playwright
-        // https://playwright.dev/docs/api/class-chromiumcoverage#chromiumcoveragestartjscoverageoptions
-        // coverageHandledFromOutside is true and "transform-instrument" becomes non mandatory
-
-
-        if (coverageHandledFromOutside) {
-          markAsSupported("transform-instrument");
-        }
-
-        return _invoke(function () {
-          if (missingFeatureNames.includes("transform-import-assertions")) {
-            return _call$1(supportsJsonImportAssertions, function (jsonImportAssertions) {
-              featuresReport.jsonImportAssertions = jsonImportAssertions;
-              return _call$1(supportsCssImportAssertions, function (cssImportAssertions) {
-                featuresReport.cssImportAssertions = cssImportAssertions;
-
-                if (jsonImportAssertions && cssImportAssertions) {
-                  markAsSupported("transform-import-assertions");
-                }
-              });
-            });
-          }
-        }, function () {
-          if (missingFeatureNames.includes("new-stylesheet-as-jsenv-import")) {
-            var newStylesheet = supportsNewStylesheet();
-            featuresReport.newStylesheet = newStylesheet;
-            markAsSupported("new-stylesheet-as-jsenv-import");
-          }
-
-          return missingFeatureNamesCopy;
-        });
-      });
-
       var detectSupportedFeatures = _async$1(function (_ref4) {
-        var featuresReport = _ref4.featuresReport,
-            failFastOnFeatureDetection = _ref4.failFastOnFeatureDetection,
-            inlineImportMapIntoHTML = _ref4.inlineImportMapIntoHTML; // start testing importmap support first and not in paralell
+        var coverageHandledFromOutside = _ref4.coverageHandledFromOutside,
+            inlineImportMapIntoHTML = _ref4.inlineImportMapIntoHTML;
+        var featuresReport = {};
+        featuresReport["import_http"] = true;
+        featuresReport["coverage_js"] = coverageHandledFromOutside; // new CSSStyleSheet
+
+        featuresReport["new_stylesheet"] = supportsNewStylesheet(); // importmap
+        // start testing importmap support first and not in paralell
         // so that there is not module script loaded beore importmap is injected
         // it would log an error in chrome console and return undefined
 
-        return _await(supportsImportmap({
+        return _await$1(supportsImportmap({
           // chrome supports inline but not remote importmap
           // https://github.com/WICG/import-maps/issues/235
           // at this stage we won't know if the html file will use
@@ -4301,150 +4350,27 @@ html[data-toolbar-visible] #toolbar-trigger {
           // and in that case we can test only the local importmap support
           // so we test importmap support and the remote one
           remote: !inlineImportMapIntoHTML
-        }), function (importmap) {
-          featuresReport.importmap = importmap;
-
-          if (!importmap && failFastOnFeatureDetection) {
-            return;
-          }
-
-          return _call$1(supportsDynamicImport, function (dynamicImport) {
-            featuresReport.dynamicImport = dynamicImport;
-
-            if (!dynamicImport && failFastOnFeatureDetection) {
-              return;
-            }
-
-            return _call$1(supportsTopLevelAwait, function (topLevelAwait) {
-              featuresReport.topLevelAwait = topLevelAwait;
-            });
-          });
-        });
-      });
-
-      var supportsImportmap = _async$1(function () {
-        var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-            _ref5$remote = _ref5.remote,
-            remote = _ref5$remote === void 0 ? true : _ref5$remote;
-
-        var specifier = asBase64Url("export default false");
-        var importMap = {
-          imports: _defineProperty({}, specifier, asBase64Url("export default true"))
-        };
-        var importmapScript = document.createElement("script");
-        var importmapString = JSON.stringify(importMap, null, "  ");
-        importmapScript.type = "importmap";
-
-        if (remote) {
-          importmapScript.src = "data:application/json;base64,".concat(window.btoa(importmapString));
-        } else {
-          importmapScript.textContent = importmapString;
-        }
-
-        document.body.appendChild(importmapScript);
-        return _catch(function () {
-          return _await(executeWithScriptModuleInjection("import supported from \"".concat(specifier, "\"; window.__jsenv_runtime_test_importmap__ = supported")), function () {
-            document.body.removeChild(importmapScript);
-            return window.__jsenv_runtime_test_importmap__;
-          });
-        }, function () {
-          document.body.removeChild(importmapScript);
-          return false;
-        });
-      });
-
-      var supportsDynamicImport = _async$1(function () {
-        var moduleSource = asBase64Url("export default 42");
-        return _catch(function () {
-          return _await(executeWithScriptModuleInjection("window.__jsenv_runtime_test_dynamic_import__ = import(".concat(JSON.stringify(moduleSource), ")")), function () {
-            return _await(window.__jsenv_runtime_test_dynamic_import__, function (namespace) {
-              return namespace.default === 42;
-            });
-          });
-        }, function () {
-          return false;
-        });
-      });
-
-      var supportsNewStylesheet = function supportsNewStylesheet() {
-        try {
-          // eslint-disable-next-line no-new
-          new CSSStyleSheet();
-          return true;
-        } catch (e) {
-          return false;
-        }
-      };
-
-      var supportsTopLevelAwait = function supportsTopLevelAwait() {
-        return _await(_catch(function () {
-          return _await(executeWithScriptModuleInjection("window.__jsenv_runtime_test_top_level_await__ = await Promise.resolve(42)"), function () {
-            return window.__jsenv_runtime_test_top_level_await__ === 42;
-          });
-        }, function () {
-          return false;
-        }));
-      }; // to execute in a browser devtools
-      // const featuresReport = {}
-      // await detectSupportedFeatures({ featuresReport, inlineImportMapIntoHTML: true })
-      // console.log(featuresReport)
+        }), function (_supportsImportmap) {
+          featuresReport.importmap = _supportsImportmap; // dynamic import
 
+          return _call(supportsDynamicImport, function (_supportsDynamicImpor) {
+            featuresReport["import_dynamic"] = _supportsDynamicImpor; // top level await
 
-      var supportsJsonImportAssertions = _async$1(function () {
-        var jsonBase64Url = asBase64Url("42", "application/json");
-        var moduleSource = asBase64Url("import data from \"".concat(jsonBase64Url, "\" assert { type: \"json\" }\nexport default data"));
-        return _catch(function () {
-          return _await(executeWithScriptModuleInjection("window.__jsenv_runtime_test_json_import_assertion__ = import(".concat(JSON.stringify(moduleSource), ")")), function () {
-            return _await(window.__jsenv_runtime_test_json_import_assertion__, function (namespace) {
-              return namespace.default === 42;
-            });
-          });
-        }, function () {
-          return false;
-        });
-      });
+            return _call(supportsTopLevelAwait, function (_supportsTopLevelAwai) {
+              featuresReport["top_level_await"] = _supportsTopLevelAwai; // import assertions
 
-      var supportsCssImportAssertions = _async$1(function () {
-        var cssBase64Url = asBase64Url("p { color: red; }", "text/css");
-        var moduleSource = asBase64Url("import css from \"".concat(cssBase64Url, "\" assert { type: \"css\" }\nexport default css"));
-        return _catch(function () {
-          return _await(executeWithScriptModuleInjection("window.__jsenv_runtime_test_css_import_assertion__ = import(".concat(JSON.stringify(moduleSource), ")")), function () {
-            return _await(window.__jsenv_runtime_test_css_import_assertion__, function (namespace) {
-              return namespace.default instanceof CSSStyleSheet;
+              return _call(supportsJsonImportAssertions, function (_supportsJsonImportAs) {
+                featuresReport["import_assertion_type_json"] = _supportsJsonImportAs;
+                return _call(supportsCssImportAssertions, function (_supportsCssImportAss) {
+                  featuresReport["import_assertion_type_css"] = _supportsCssImportAss;
+                  return featuresReport;
+                });
+              });
             });
           });
-        }, function () {
-          return false;
         });
       });
 
-      var executeWithScriptModuleInjection = function executeWithScriptModuleInjection(code) {
-        var scriptModule = document.createElement("script");
-        scriptModule.type = "module";
-        var loadPromise = new Promise(function (resolve, reject) {
-          scriptModule.onload = function () {
-            document.body.removeChild(scriptModule);
-            resolve();
-          };
-
-          scriptModule.onerror = function () {
-            document.body.removeChild(scriptModule);
-            reject();
-          };
-
-          document.body.appendChild(scriptModule);
-        });
-        scriptModule.src = asBase64Url(code);
-        return loadPromise;
-      };
-
-      var asBase64Url = function asBase64Url(text) {
-        var mimeType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "application/javascript";
-        return "data:".concat(mimeType, ";base64,").concat(window.btoa(text));
-      }; // const cssImportAssertions = await supportsCssImportAssertions()
-      // console.log({ cssImportAssertions })
-
-
       var renderCompilationInToolbar = function renderCompilationInToolbar(_ref) {
         var compileGroup = _ref.compileGroup;
         var browserSupportRootNode = document.querySelector("#browser_support");
@@ -4452,14 +4378,12 @@ html[data-toolbar-visible] #toolbar-trigger {
         removeForceHideElement(browserSupportRootNode);
         removeForceHideElement(filesCompilationRootNode);
         scanBrowserRuntimeFeatures().then(function (_ref2) {
-          var canAvoidCompilation = _ref2.canAvoidCompilation,
-              featuresReport = _ref2.featuresReport,
-              customCompilerPatterns = _ref2.customCompilerPatterns,
-              missingFeatureNames = _ref2.missingFeatureNames,
+          var jsenvDirectoryRelativeUrl = _ref2.jsenvDirectoryRelativeUrl,
               inlineImportMapIntoHTML = _ref2.inlineImportMapIntoHTML,
-              outDirectoryRelativeUrl = _ref2.outDirectoryRelativeUrl,
-              compileId = _ref2.compileId;
-          var browserSupport = canAvoidCompilation ? inlineImportMapIntoHTML ? "partial" : "full" : "no";
+              compileProfile = _ref2.compileProfile,
+              compileId = _ref2.compileId,
+              runtimeReport = _ref2.runtimeReport;
+          var browserSupport = compileId ? "no" : inlineImportMapIntoHTML ? "partial" : "full";
           enableVariant(browserSupportRootNode, {
             browserSupport: browserSupport
           });
@@ -4467,57 +4391,64 @@ html[data-toolbar-visible] #toolbar-trigger {
           if (browserSupport === "no") {
             browserSupportRootNode.querySelector("a.browser_support_read_more_link").onclick = function () {
               // eslint-disable-next-line no-alert
-              window.alert("Source files needs to be compiled to be executable in this browser because: ".concat(getBrowserSupportMessage({
-                missingOnly: true,
-                featuresReport: featuresReport,
-                customCompilerPatterns: customCompilerPatterns,
-                missingFeatureNames: missingFeatureNames,
-                inlineImportMapIntoHTML: inlineImportMapIntoHTML
+              window.alert("Source files needs to be compiled to be executable in this browser because: ".concat(listWhatIsMissing({
+                compileProfile: compileProfile
               })));
             };
           } else if (browserSupport === "partial") {
             browserSupportRootNode.querySelector("a.browser_support_read_more_link").onclick = function () {
               // eslint-disable-next-line no-alert
-              window.alert("Source files (except html) can be executed directly in this browser because: ".concat(getBrowserSupportMessage({
-                featuresReport: featuresReport,
-                customCompilerPatterns: customCompilerPatterns,
-                missingFeatureNames: missingFeatureNames,
+              window.alert("Source files (except html) can be executed directly in this browser because: ".concat(listWhatIsSupported({
                 inlineImportMapIntoHTML: inlineImportMapIntoHTML
               })));
             };
           } else if (browserSupport === "full") {
             browserSupportRootNode.querySelector("a.browser_support_read_more_link").onclick = function () {
               // eslint-disable-next-line no-alert
-              window.alert("Source files can be executed directly in this browser because: ".concat(getBrowserSupportMessage({
-                featuresReport: featuresReport,
-                customCompilerPatterns: customCompilerPatterns,
-                missingFeatureNames: missingFeatureNames,
+              window.alert("Source files can be executed directly in this browser because: ".concat(listWhatIsSupported({
                 inlineImportMapIntoHTML: inlineImportMapIntoHTML
               })));
             };
           }
 
-          var filesCompilation = compileGroup.compileId ? "yes" : inlineImportMapIntoHTML ? "html_only" : "no";
+          var actualCompileId = compileGroup.compileId;
+          var expectedCompiledId = compileId;
+          var shouldSwitchCompileId = expectedCompiledId && actualCompileId && actualCompileId !== expectedCompiledId;
+          var shouldCompile = !actualCompileId && browserSupport === "no";
+          var filesCompilation = shouldSwitchCompileId ? "mismatch" : actualCompileId ? "yes" : inlineImportMapIntoHTML ? "html_only" : "no";
+          var hasWarning = shouldCompile || shouldSwitchCompileId;
           enableVariant(filesCompilationRootNode, {
             filesCompilation: filesCompilation,
-            compiled: compileGroup.compileId ? "yes" : "no"
+            compilation_link: shouldSwitchCompileId ? "mismatch" : actualCompileId ? "source" : expectedCompiledId ? "compiled" : "force"
           });
 
-          filesCompilationRootNode.querySelector("a.go_to_source_link").onclick = function () {
-            window.parent.location = "/".concat(compileGroup.fileRelativeUrl);
+          if (filesCompilation === "yes") {
+            document.querySelector(".files_compilation_text").innerHTML = "Files shown are compiled for ".concat(runtimeReport.name, "@").concat(runtimeReport.version);
+          }
+
+          filesCompilationRootNode.querySelector("a.link_to_source_files").onclick = function () {
+            window.parent.location.href = "/".concat(compileGroup.fileRelativeUrl);
+          };
+
+          filesCompilationRootNode.querySelector("a.link_to_compiled_files").onclick = function () {
+            window.parent.location.href = "/".concat(jsenvDirectoryRelativeUrl).concat(expectedCompiledId, "/").concat(compileGroup.fileRelativeUrl);
           };
 
-          filesCompilationRootNode.querySelector("a.go_to_compiled_link").onclick = function () {
-            window.parent.location = "/".concat(outDirectoryRelativeUrl).concat(compileId, "/").concat(compileGroup.fileRelativeUrl);
+          filesCompilationRootNode.querySelector("a.link_to_compilation_forced_files").onclick = function () {
+            window.parent.location.href = "/".concat(jsenvDirectoryRelativeUrl, "force/").concat(compileGroup.fileRelativeUrl);
           };
 
-          var shouldCompile = filesCompilation !== "yes" && browserSupport === "no";
+          filesCompilationRootNode.querySelector("a.link_to_appropriate_files").onclick = function () {
+            window.parent.location.href = "/".concat(jsenvDirectoryRelativeUrl).concat(expectedCompiledId, "/").concat(compileGroup.fileRelativeUrl);
+          };
 
-          if (shouldCompile) {
+          if (hasWarning) {
+            enableWarningStyle();
             document.querySelector(".files_compilation_text").setAttribute("data-warning", "");
             document.querySelector(".browser_support_text").setAttribute("data-warning", "");
             document.querySelector("#settings-button").setAttribute("data-warning", "");
           } else {
+            disableWarningStyle();
             document.querySelector(".files_compilation_text").removeAttribute("data-warning");
             document.querySelector(".browser_support_text").removeAttribute("data-warning");
             document.querySelector("#settings-button").removeAttribute("data-warning");
@@ -4525,56 +4456,54 @@ html[data-toolbar-visible] #toolbar-trigger {
         });
       };
 
-      var getBrowserSupportMessage = function getBrowserSupportMessage(_ref3) {
-        var missingOnly = _ref3.missingOnly,
-            featuresReport = _ref3.featuresReport,
-            customCompilerPatterns = _ref3.customCompilerPatterns,
-            missingFeatureNames = _ref3.missingFeatureNames,
-            inlineImportMapIntoHTML = _ref3.inlineImportMapIntoHTML;
+      var listWhatIsSupported = function listWhatIsSupported(_ref3) {
+        var inlineImportMapIntoHTML = _ref3.inlineImportMapIntoHTML;
         var parts = [];
 
-        if (featuresReport.importmap) {
-          if (!missingOnly) {
-            if (inlineImportMapIntoHTML) {
-              parts.push("importmaps are supported (only when inlined in html files)");
-            } else {
-              parts.push("importmaps are supported");
-            }
-          }
+        if (inlineImportMapIntoHTML) {
+          parts.push("importmaps are supported (only when inlined in html files)");
         } else {
+          parts.push("importmaps are supported");
+        }
+
+        parts.push("dynamic imports are supported");
+        parts.push("top level await is supported");
+        parts.push("all features are natively supported");
+        return "\n- ".concat(parts.join("\n- "));
+      };
+
+      var listWhatIsMissing = function listWhatIsMissing(_ref4) {
+        var compileProfile = _ref4.compileProfile;
+        var parts = [];
+        var missingFeatures = compileProfile.missingFeatures;
+
+        if (missingFeatures.importmap) {
           parts.push("importmaps are not supported");
         }
 
-        if (featuresReport.dynamicImport) {
-          if (!missingOnly) {
-            parts.push("dynamic imports are supported");
-          }
-        } else {
+        if (missingFeatures.dynamicImport) {
           parts.push("dynamic imports are not supported");
         }
 
-        if (featuresReport.topLevelAwait) {
-          if (!missingOnly) {
-            parts.push("top level await is supported");
-          }
-        } else {
+        if (missingFeatures.topLevelAwait) {
           parts.push("top level await is not supported");
         }
 
+        var missingFeatureNames = Object.keys(missingFeatures).filter(function (name) {
+          return name !== "importmap" && name !== "dynamicImport" && name !== "topLevelAwait" && name !== "custom_compiler_patterns";
+        });
         var missingFeatureCount = missingFeatureNames.length;
 
-        if (missingFeatureCount === 0) {
-          if (!missingOnly) {
-            parts.push("all features are natively supported");
-          }
-        } else {
+        if (missingFeatureCount > 0) {
           parts.push("".concat(missingFeatureCount, " features are missing: ").concat(missingFeatureNames));
         }
 
-        var customCompilerCount = customCompilerPatterns.length;
-        if (customCompilerCount === 0) ;else {
-          parts.push("".concat(customCompilerCount, " custom compilers enabled: ").concat(customCompilerPatterns));
+        var custom_compiler_patterns = missingFeatures.custom_compiler_patterns;
+
+        if (custom_compiler_patterns) {
+          parts.push("".concat(custom_compiler_patterns.length, " custom compilers enabled: ").concat(custom_compiler_patterns));
         }
+
         return "\n- ".concat(parts.join("\n- "));
       };
 
@@ -4750,17 +4679,16 @@ html[data-toolbar-visible] #toolbar-trigger {
         document.querySelector("#overflow-menu").removeAttribute("data-animate");
       };
 
-      function _call(body, then, direct) {
+      function _await(value, then, direct) {
         if (direct) {
-          return then ? then(body()) : body();
+          return then ? then(value) : value;
         }
 
-        try {
-          var result = Promise.resolve(body());
-          return then ? result.then(then) : result;
-        } catch (e) {
-          return Promise.reject(e);
+        if (!value || !value.then) {
+          value = Promise.resolve(value);
         }
+
+        return then ? value.then(then) : value;
       }
 
       var toolbarVisibilityPreference = createPreference("toolbar");
@@ -4779,66 +4707,67 @@ html[data-toolbar-visible] #toolbar-trigger {
         };
       }
 
-      var renderToolbar = _async(function () {
+      var renderToolbar = _async(function (_ref) {
+        var exploringJSON = _ref.exploringJSON;
         var executedFileCompiledUrl = window.parent.location.href;
         var compileServerOrigin = window.parent.location.origin; // this should not block the whole toolbar rendering + interactivity
 
-        return _call(fetchExploringJson, function (exploringConfig) {
-          var outDirectoryRelativeUrl = exploringConfig.outDirectoryRelativeUrl,
-              livereloading = exploringConfig.livereloading;
-          var compileGroup = getCompileGroup({
-            executedFileCompiledUrl: executedFileCompiledUrl,
-            outDirectoryRelativeUrl: outDirectoryRelativeUrl,
-            compileServerOrigin: compileServerOrigin
-          });
-          var executedFileRelativeUrl = compileGroup.fileRelativeUrl;
-          var toolbarOverlay = document.querySelector("#toolbar-overlay");
+        var jsenvDirectoryRelativeUrl = exploringJSON.jsenvDirectoryRelativeUrl,
+            livereloading = exploringJSON.livereloading;
+        var compileGroup = getCompileGroup({
+          executedFileCompiledUrl: executedFileCompiledUrl,
+          jsenvDirectoryRelativeUrl: jsenvDirectoryRelativeUrl,
+          compileServerOrigin: compileServerOrigin
+        });
+        var executedFileRelativeUrl = compileGroup.fileRelativeUrl;
+        var toolbarOverlay = document.querySelector("#toolbar-overlay");
 
-          toolbarOverlay.onclick = function () {
-            hideAllTooltip();
-            hideSettings();
-          };
+        toolbarOverlay.onclick = function () {
+          hideAllTooltip();
+          hideSettings();
+        };
 
-          var toolbarVisible = toolbarVisibilityPreference.has() ? toolbarVisibilityPreference.get() : true;
+        var toolbarVisible = toolbarVisibilityPreference.has() ? toolbarVisibilityPreference.get() : true;
 
-          if (toolbarVisible) {
-            showToolbar({
-              animate: false
-            });
-          } else {
-            hideToolbar({
-              animate: false
-            });
-          }
+        if (toolbarVisible) {
+          showToolbar({
+            animate: false
+          });
+        } else {
+          hideToolbar({
+            animate: false
+          });
+        }
 
-          document.querySelector(".toolbar-icon-wrapper").onclick = function () {
-            window.parent.location.href = "/";
-          };
+        document.querySelector(".toolbar-icon-wrapper").onclick = function () {
+          window.parent.location.href = "/";
+        };
 
-          renderToolbarNotification();
-          makeToolbarResponsive();
-          renderToolbarSettings();
-          renderToolbarAnimation();
-          renderToolbarTheme();
-          renderExecutionInToolbar({
-            executedFileRelativeUrl: executedFileRelativeUrl
-          });
-          renderCompilationInToolbar({
-            compileGroup: compileGroup
-          }); // this might become active but we need to detect this somehow
-
-          deactivateToolbarSection(document.querySelector("#file-list-link"));
-          initToolbarEventSource({
-            executedFileRelativeUrl: executedFileRelativeUrl,
-            livereloading: livereloading
-          }); // if user click enter or space quickly while closing toolbar
-          // it will cancel the closing
-          // that's why I used toggleToolbar and not hideToolbar
-
-          document.querySelector("#button-close-toolbar").onclick = function () {
-            return toogleToolbar();
-          };
+        renderToolbarNotification();
+        makeToolbarResponsive();
+        renderToolbarSettings();
+        renderToolbarAnimation();
+        renderToolbarTheme();
+        renderExecutionInToolbar({
+          executedFileRelativeUrl: executedFileRelativeUrl
         });
+        renderCompilationInToolbar({
+          compileGroup: compileGroup
+        }); // this might become active but we need to detect this somehow
+
+        deactivateToolbarSection(document.querySelector("#file-list-link"));
+        initToolbarEventSource({
+          executedFileRelativeUrl: executedFileRelativeUrl,
+          livereloading: livereloading
+        }); // if user click enter or space quickly while closing toolbar
+        // it will cancel the closing
+        // that's why I used toggleToolbar and not hideToolbar
+
+        document.querySelector("#button-close-toolbar").onclick = function () {
+          return toogleToolbar();
+        };
+
+        return _await();
       });
 
       var toogleToolbar = function toogleToolbar() {
@@ -4861,9 +4790,9 @@ html[data-toolbar-visible] #toolbar-trigger {
 
 
       var showToolbar = function showToolbar() {
-        var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-            _ref$animate = _ref.animate,
-            animate = _ref$animate === void 0 ? true : _ref$animate;
+        var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            _ref2$animate = _ref2.animate,
+            animate = _ref2$animate === void 0 ? true : _ref2$animate;
 
         toolbarVisibilityPreference.set(true);
 
@@ -4902,8 +4831,8 @@ html[data-toolbar-visible] #toolbar-trigger {
           var scrollEnd = scrollY + 40;
           startJavaScriptAnimation({
             duration: 300,
-            onProgress: function onProgress(_ref2) {
-              var progress = _ref2.progress;
+            onProgress: function onProgress(_ref3) {
+              var progress = _ref3.progress;
               var value = scrollY + (scrollEnd - scrollY) * progress;
               parentDocumentElement.scrollTop = value;
             }
@@ -4928,26 +4857,24 @@ html[data-toolbar-visible] #toolbar-trigger {
         };
       };
 
-      var getCompileGroup = function getCompileGroup(_ref3) {
-        var executedFileCompiledUrl = _ref3.executedFileCompiledUrl,
-            outDirectoryRelativeUrl = _ref3.outDirectoryRelativeUrl,
-            compileServerOrigin = _ref3.compileServerOrigin;
-        var outDirectoryServerUrl = String(new URL(outDirectoryRelativeUrl, compileServerOrigin));
+      var getCompileGroup = function getCompileGroup(_ref4) {
+        var executedFileCompiledUrl = _ref4.executedFileCompiledUrl,
+            jsenvDirectoryRelativeUrl = _ref4.jsenvDirectoryRelativeUrl,
+            compileServerOrigin = _ref4.compileServerOrigin;
+        var jsenvDirectoryServerUrl = new URL(jsenvDirectoryRelativeUrl, compileServerOrigin).href;
 
-        if (urlIsInsideOf(executedFileCompiledUrl, outDirectoryServerUrl)) {
-          var afterCompileDirectory = urlToRelativeUrl(executedFileCompiledUrl, outDirectoryServerUrl);
+        if (urlIsInsideOf(executedFileCompiledUrl, jsenvDirectoryServerUrl)) {
+          var afterCompileDirectory = urlToRelativeUrl(executedFileCompiledUrl, jsenvDirectoryServerUrl);
           var slashIndex = afterCompileDirectory.indexOf("/");
           var fileRelativeUrl = afterCompileDirectory.slice(slashIndex + 1);
           return {
             fileRelativeUrl: fileRelativeUrl,
-            outDirectoryRelativeUrl: outDirectoryRelativeUrl,
             compileId: afterCompileDirectory.slice(0, slashIndex)
           };
         }
 
         return {
           fileRelativeUrl: new URL(executedFileCompiledUrl).pathname.slice(1),
-          outDirectoryRelativeUrl: outDirectoryRelativeUrl,
           compileId: null
         };
       };
@@ -4989,14 +4916,13 @@ html[data-toolbar-visible] #toolbar-trigger {
       };
 
       window.toolbar = {
-        render: renderToolbar,
         show: showToolbar,
         hide: function hide() {
           return hideToolbar();
         }
       };
-      addExternalCommandCallback("renderToolbar", function () {
-        renderToolbar();
+      addExternalCommandCallback("renderToolbar", function (data) {
+        renderToolbar(data);
       });
       addExternalCommandCallback("showToolbar", function () {
         showToolbar();
@@ -5009,7 +4935,7 @@ html[data-toolbar-visible] #toolbar-trigger {
   };
 });
 
-//# sourceMappingURL=toolbar.main_6c1b3d82.js.map</script>
+//# sourceMappingURL=toolbar.main_279b3a68.js.map</script>
   
 
 </body></html>