@jsenv/core 23.1.3 → 23.2.2

package/src/internal/runtime/s.js

@@ -1,5 +1,5 @@
 /*
-* SJS 6.10.3
+* SJS 6.11.0
 * Minimal SystemJS Build
 */
 (function () {
@@ -598,7 +598,7 @@
   var lastAutoImportDeps, lastAutoImportTimeout;
   var autoImportCandidates = {};
   var systemRegister = systemJSPrototype.register;
-  var inlineScriptCount = 0
+  var inlineScriptCount = 0;
   systemJSPrototype.register = function (deps, declare) {
     if (hasDocument && document.readyState === 'loading' && typeof deps !== 'string') {
       var scripts = document.querySelectorAll('script[src]');
@@ -610,7 +610,7 @@
       }
       else {
         inlineScriptCount++
-        lastAutoImportUrl = document.location.href + "__inline_script__" + inlineScriptCount ;
+        lastAutoImportUrl = document.location.href + "__inline_script__" + inlineScriptCount;
       }
       // if this is already a System load, then the instantiate has already begun
       // so this re-import has no consequence
@@ -634,27 +634,28 @@
       return autoImportRegistration;
     }
     var loader = this;
-    return new Promise(function (resolve, reject) {
-      var script = systemJSPrototype.createScript(url);
-      script.addEventListener('error', function () {
-        reject(Error(errMsg(3,  [url, firstParentUrl].join(', ') )));
-      });
-      script.addEventListener('load', function () {
-        document.head.removeChild(script);
-        // Note that if an error occurs that isn't caught by this if statement,
-        // that getRegister will return null and a "did not instantiate" error will be thrown.
-        if (lastWindowErrorUrl === url) {
-          reject(lastWindowError);
-        }
-        else {
-          var register = loader.getRegister(url);
-          // Clear any auto import registration for dynamic import scripts during load
-          if (register && register[0] === lastAutoImportDeps)
-            clearTimeout(lastAutoImportTimeout);
-          resolve(register);
-        }
+    return Promise.resolve(systemJSPrototype.createScript(url)).then(function (script) {
+      return new Promise(function (resolve, reject) {
+        script.addEventListener('error', function () {
+          reject(Error(errMsg(3,  [url, firstParentUrl].join(', ') )));
+        });
+        script.addEventListener('load', function () {
+          document.head.removeChild(script);
+          // Note that if an error occurs that isn't caught by this if statement,
+          // that getRegister will return null and a "did not instantiate" error will be thrown.
+          if (lastWindowErrorUrl === url) {
+            reject(lastWindowError);
+          }
+          else {
+            var register = loader.getRegister(url);
+            // Clear any auto import registration for dynamic import scripts during load
+            if (register && register[0] === lastAutoImportDeps)
+              clearTimeout(lastAutoImportTimeout);
+            resolve(register);
+          }
+        });
+        document.head.appendChild(script);
       });
-      document.head.appendChild(script);
     });
   };
 
@@ -724,4 +725,4 @@
       });
     };
 
-}());
+}());

package/src/internal/toolbar/toolbar.html

@@ -48,9 +48,7 @@
             <div class="tooltip">Executing...</div>
             <button>
               <svg id="loader-icon" data-animate>
-                <use
-                  xlink:href="./toolbar-loading-icon.svg#toolbar-loading-icon"
-                ></use>
+                <use xlink:href="#loading_svg"></use>
               </svg>
             </button>
           </div>
@@ -104,10 +102,16 @@
               <br />
               <div class="tooltipAction">
                 <a href="javascript:void(0);">
-                  <svg id="powerOffIconSvg" class="tooltipIcon">
-                    <use
-                      xlink:href="./eventsource/toolbar-power-off-icon.svg#toolbar-power-off-icon"
-                    ></use>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    id="powerOffIconSvg"
+                    class="tooltipIcon"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                      d="M10 3H8v1.88l2 2zm6 6v3.88l1.8 1.8.2-.2V9c0-1.1-.9-2-2-2V3h-2v4h-3.88l2 2H16zM4.12 3.84L2.71 5.25 6 8.54v5.96L9.5 18v3h5v-3l.48-.48 4.47 4.47 1.41-1.41L4.12 3.84zm8.38 13.33V19h-1v-1.83L8 13.65v-3.11l5.57 5.57-1.07 1.06z"
+                    />
                   </svg>
                   cancel
                 </a>
@@ -132,10 +136,16 @@
               <br />
               <div class="tooltipAction">
                 <a href="javascript:void(0);">
-                  <svg id="powerIconSvg" class="tooltipIcon">
-                    <use
-                      xlink:href="./eventsource/toolbar-power-icon.svg#toolbar-power-icon"
-                    ></use>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    id="powerIconSvg"
+                    class="tooltipIcon"
+                  >
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                      d="M16 9v4.66l-3.5 3.51V19h-1v-1.83L8 13.65V9h8m0-6h-2v4h-4V3H8v4h-.01C6.9 6.99 6 7.89 6 8.98v5.52L9.5 18v3h5v-3l3.5-3.51V9c0-1.1-.9-2-2-2V3z"
+                    />
                   </svg>
                   retry
                 </a>
@@ -186,9 +196,7 @@
                   class="event-source-livereload iconToolbar"
                   data-variant="enabled"
                 >
-                  <use
-                    xlink:href="./toolbar-loading-icon.svg#toolbar-loading-icon"
-                  ></use>
+                  <use xlink:href="#loading_svg"></use>
                 </svg>
               </div>
               <div data-when="changes:yes">
@@ -196,9 +204,7 @@
                   class="event-source-livereload iconToolbar"
                   data-variant="disabled"
                 >
-                  <use
-                    xlink:href="./toolbar-loading-icon.svg#toolbar-loading-icon"
-                  ></use>
+                  <use xlink:href="#loading_svg"></use>
                 </svg>
               </div>
               <svg class="event-source-icon">
@@ -218,10 +224,16 @@
               <br />
               <div class="tooltipAction">
                 <a href="javascript:void(0);">
-                  <svg id="powerIconSvg" class="tooltipIcon">
-                    <use
-                      xlink:href="./eventsource/toolbar-power-icon.svg#toolbar-power-icon"
-                    ></use>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    id="powerIconSvg"
+                    class="tooltipIcon"
+                  >
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                      d="M16 9v4.66l-3.5 3.51V19h-1v-1.83L8 13.65V9h8m0-6h-2v4h-4V3H8v4h-.01C6.9 6.99 6 7.89 6 8.98v5.52L9.5 18v3h5v-3l3.5-3.51V9c0-1.1-.9-2-2-2V3z"
+                    />
                   </svg>
                   connect
                 </a>
@@ -245,16 +257,28 @@
           <div id="settings-box">
             <div id="settings-box-header">
               <button id="button-close-settings">
-                <svg id="crossIconSvg" class="" width="18px" height="18px">
-                  <use
-                    xlink:href="./toolbar-cross-icon.svg#toolbar-cross-icon"
-                  ></use>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  width="18px"
+                  height="18px"
+                >
+                  <path
+                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                  />
+                  <path d="M0 0h24v24H0z" fill="none" />
                 </svg>
               </button>
-              <svg class="settings-icon" width="35px" height="35px">
-                <use
-                  xlink:href="./settings/toolbar-settings-icon.svg#toolbar-settings-icon"
-                ></use>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="35px"
+                height="35px"
+                class="settings-icon"
+              >
+                <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"
+                />
               </svg>
               <h3>Settings</h3>
             </div>
@@ -262,10 +286,15 @@
               <div class="settings-box-items-wrapper">
                 <div class="settings-box-item">
                   <div class="category-title">
-                    <svg width="20px" height="20px">
-                      <use
-                        xlink:href="./toolbar-notif-icon.svg#toolbar-notif-icon"
-                      ></use>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      height="20px"
+                    >
+                      <path
+                        d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"
+                      />
                     </svg>
                     Notifications
                   </div>
@@ -283,9 +312,7 @@
                 <div class="settings-box-item settings-livereload">
                   <div class="category-title">
                     <svg width="20px" height="20px">
-                      <use
-                        xlink:href="./toolbar-loading-icon.svg#toolbar-loading-icon"
-                      ></use>
+                      <use xlink:href="#loading_svg"></use>
                     </svg>
                     <span>Livereload</span>
                   </div>
@@ -302,10 +329,16 @@
                 </div>
                 <div class="settings-box-item">
                   <div class="category-title">
-                    <svg width="20px" height="20px">
-                      <use
-                        xlink:href="./animation/toolbar-movie-icon.svg#toolbar-movie-icon"
-                      ></use>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      height="20px"
+                    >
+                      <path
+                        d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"
+                      />
+                      <path d="M0 0h24v24H0z" fill="none" />
                     </svg>
                     Animations
                   </div>
@@ -322,10 +355,17 @@
                 </div>
                 <div class="settings-box-item">
                   <div class="category-title">
-                    <svg width="20px" height="20px" id="paletteIconSvg">
-                      <use
-                        xlink:href="./theme/toolbar-palette-icon.svg#toolbar-palette-icon"
-                      ></use>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      height="20px"
+                      id="paletteIconSvg"
+                    >
+                      <path
+                        d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
+                      />
+                      <path d="M0 0h24v24H0z" fill="none" />
                     </svg>
                     Dark mode
                   </div>
@@ -342,8 +382,20 @@
                 </div>
                 <div class="settings-box-item" id="browser_support">
                   <div class="category-title">
-                    <svg id="browser_support_svg" width="20px" height="20px">
-                      <use xlink:href="./compilation/loupe.svg#icon"></use>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 512 512"
+                      width="20px"
+                      height="20px"
+                      style="enable-background: new 0 0 512 512"
+                      id="browser_support_svg"
+                    >
+                      <path
+                        d="M497.938,430.063l-126.914-126.91C389.287,272.988,400,237.762,400,200C400,89.719,310.281,0,200,0
+		C89.719,0,0,89.719,0,200c0,110.281,89.719,200,200,200c37.762,0,72.984-10.711,103.148-28.973l126.914,126.91
+		C439.438,507.313,451.719,512,464,512c12.281,0,24.563-4.688,33.938-14.063C516.688,479.195,516.688,448.805,497.938,430.063z
+		 M64,200c0-74.992,61.016-136,136-136s136,61.008,136,136s-61.016,136-136,136S64,274.992,64,200z"
+                      />
                     </svg>
                     Browser support
                   </div>
@@ -376,8 +428,22 @@
                 </div>
                 <div class="settings-box-item" id="files_compilation">
                   <div class="category-title">
-                    <svg id="browser_support_svg" width="20px" height="20px">
-                      <use xlink:href="./compilation/flask.svg#icon"></use>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="-74 0 512 512"
+                      width="20px"
+                      height="20px"
+                      id="browser_support_svg"
+                    >
+                      <path
+                        d="m361.414062 443.589844-108.269531-263.902344c-6.003906-14.640625-9.050781-30.085938-9.050781-45.910156v-69.757813c0-7.511719 2.925781-14.574219 8.238281-19.886719 6.476563-6.476562 10.046875-15.089843 10.046875-24.25v-9.882812c0-5.523438-4.480468-10-10-10h-139.621094c-5.523437 0-10 4.476562-10 10v9.882812c0 9.160157 3.566407 17.773438 10.042969 24.25 5.3125 5.3125 8.238281 12.375 8.238281 19.890626v69.753906c0 15.824218-3.042968 31.269531-9.050781 45.910156l-29.75 72.515625c-.011719.027344-.023437.054687-.035156.082031l-78.484375 191.304688c-6.285156 15.324218-4.53125 32.6875 4.695312 46.441406 9.226563 13.757812 24.621094 21.96875 41.183594 21.96875h265.9375c16.5625 0 31.960938-8.210938 41.1875-21.96875 9.222656-13.757812 10.976563-31.117188 4.691406-46.441406zm-230.921874-256.3125c7-17.058594 10.546874-35.058594 10.546874-53.5v-69.757813c0-12.851562-5.003906-24.9375-14.09375-34.027343-2.671874-2.671876-4.15625-6.21875-4.1875-9.992188h119.621094c-.03125 3.773438-1.515625 7.316406-4.191406 9.992188-9.085938 9.089843-14.09375 21.171874-14.09375 34.027343v69.753907c0 18.441406 3.550781 36.441406 10.546875 53.5l24.144531 58.851562h-152.4375zm209.617187 291.613281c-5.585937 8.332031-14.542969 13.109375-24.574219 13.109375h-265.9375c-10.027344 0-18.984375-4.777344-24.574218-13.109375-4.214844-6.285156-5.824219-13.574219-4.730469-20.761719h16.476562c5.519531 0 10-4.480468 10-10 0-5.523437-4.480469-10-10-10h-9.1875l11.484375-28h16.867188c5.523437 0 10-4.480468 10-10 0-5.523437-4.476563-10-10-10h-8.660156l11.484374-28h17.34375c5.523438 0 10-4.480468 10-10 0-5.523437-4.476562-10-10-10h-9.136718l11.488281-28h17.8125c5.523437 0 10-4.480468 10-10 0-5.523437-4.476563-10-10-10h-9.609375l11.488281-28h168.84375l75.921875 185.054688c3.804688 9.277344 2.785156 19.378906-2.800781 27.707031zm0 0"
+                      />
+                      <path
+                        d="m312.03125 444.214844c-2.09375-5.113282-7.929688-7.558594-13.042969-5.46875-5.109375 2.09375-7.558593 7.929687-5.46875 13.042968l.054688.125c1.585937 3.871094 5.316406 6.214844 9.257812 6.214844 1.261719 0 2.542969-.238281 3.785157-.746094 5.109374-2.09375 7.558593-7.933593 5.464843-13.042968zm0 0"
+                      />
+                      <path
+                        d="m297.898438 409.761719-35.8125-87.289063c-2.09375-5.109375-7.933594-7.554687-13.046876-5.457031-5.109374 2.09375-7.550781 7.9375-5.457031 13.046875l35.8125 87.289062c1.585938 3.871094 5.316407 6.207032 9.257813 6.207032 1.261718 0 2.546875-.238282 3.789062-.75 5.109375-2.09375 7.554688-7.9375 5.457032-13.046875zm0 0"
+                      />
                     </svg>
                     Files compilation
                   </div>
@@ -412,14 +478,15 @@
           </div>
           <button id="settings-button" class="toolbar-icon-wrapper">
             <svg
-              class="settings-icon iconToolbar"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              width="24px"
+              height="24px"
               class="iconToolbar"
-              width="35px"
-              height="35px"
             >
-              <use
-                xlink:href="./settings/toolbar-settings-icon.svg#toolbar-settings-icon"
-              ></use>
+              <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"
+              />
             </svg>
           </button>
         </section>
@@ -428,14 +495,17 @@
           <button id="button-close-toolbar">
             <div class="toolbar-icon-wrapper">
               <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
                 id="crossIconSvg"
                 class="iconToolbar"
                 width="35px"
                 height="35px"
               >
-                <use
-                  xlink:href="./toolbar-cross-icon.svg#toolbar-cross-icon"
-                ></use>
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+                <path d="M0 0h24v24H0z" fill="none" />
               </svg>
             </div>
           </button>
@@ -448,10 +518,18 @@
 
       <div id="overflow-menu-button">
         <button class="toolbar-icon-wrapper">
-          <svg id="dotsIconSvg" class="iconToolbar" width="35px" height="35px">
-            <use
-              xlink:href="./responsive/toolbar-dots-icon.svg#toolbar-dots-icon"
-            ></use>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="35px"
+            height="35px"
+            id="dotsIconSvg"
+            class="iconToolbar"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+            />
           </svg>
         </button>
       </div>
@@ -478,6 +556,24 @@
       </defs>
     </svg>
 
+    <!--
+     Reusable svg(s)
+    -->
+    <div style="display: none">
+      <svg
+        id="loading_svg"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 430 430"
+      >
+        <path
+          fill="currentColor"
+          d="m32.118 204.979.302 5.179c.124 3.4.638 8.29 1.434 14.48l.786 4.882.421 2.617c.154.89.376 1.789.558 2.712l1.197 5.75c.444 1.981 1.027 4.008 1.56 6.112 2.274 8.378 5.328 17.708 9.758 27.396a180.713 180.713 0 0 0 17.062 29.673 178.57 178.57 0 0 0 25.102 28.499c9.702 8.888 20.652 17.025 32.581 23.85a180.596 180.596 0 0 0 38.159 16.203c13.357 3.824 27.155 5.896 40.737 6.35l2.541.113 2.542-.017c1.689-.012 3.376-.142 5.059-.152l1.259-.126h.157c-.466 0-.034.113-.096.111l.329.039.657-.012 2.625-.138c1.748-.094 3.492-.181 5.229-.274l2.599-.14 2.399-.292c1.596-.203 3.188-.354 4.772-.526 3.147-.236 6.372-.888 9.541-1.397a213.826 213.826 0 0 0 35.916-9.232 622.925 622.925 0 0 1 8.182-3.142c2.655-1.114 5.222-2.329 7.782-3.459 2.6-1.056 4.984-2.43 7.407-3.636l3.584-1.832c1.189-.598 2.295-1.31 3.432-1.949 2.248-1.316 4.477-2.577 6.623-3.866l6.146-4.011c2.042-1.258 3.901-2.66 5.735-3.997 1.822-1.352 3.646-2.613 5.355-3.907l4.843-3.918c1.569-1.258 3.121-2.439 4.471-3.723l4.031-3.563c1.288-1.139 2.548-2.204 3.621-3.327 2.193-2.203 4.225-4.131 5.979-5.831 1.697-1.744 3.063-3.304 4.243-4.516l3.588-3.767.026-.028a.855.855 0 0 1 1.37.997s-.868 1.598-2.574 4.574c-.854 1.488-1.885 3.349-3.214 5.459-1.387 2.064-2.967 4.465-4.816 7.108-.887 1.355-1.955 2.669-3.051 4.075l-3.46 4.412c-1.185 1.56-2.571 3.036-3.979 4.607a11889.58 11889.58 0 0 1-4.424 4.853c-1.572 1.628-3.282 3.218-5.018 4.893-1.745 1.662-3.502 3.432-5.49 5.023l-6.021 5.047c-2.111 1.653-4.363 3.226-6.623 4.899-9.169 6.472-19.718 12.805-31.671 17.869-11.917 5.107-25.137 9.123-39.146 11.367-3.516.507-7.004 1.114-10.719 1.336-1.834.148-3.674.319-5.521.438l-2.773.192-2.611.027-5.237.045-2.63.012-1.585-.006-1.378-.074-5.521-.302-2.766-.157-2.764-.29a202.304 202.304 0 0 1-43.748-9.26 193.358 193.358 0 0 1-40.221-18.991c-12.467-7.743-23.632-16.999-33.41-26.861-9.758-9.893-18.135-20.455-24.833-31.222a187.62 187.62 0 0 1-15.97-31.794c-4.006-10.258-6.601-20.021-8.441-28.721-1.917-8.698-2.688-16.429-3.245-22.764-.396-6.374-.584-11.386-.485-14.752l.04-5.188a.85.85 0 0 1 .857-.844.86.86 0 0 1 .844.805zM393.625 225.021l-.297-4.979-.162-2.716-.093-1.565-.182-1.679c-.269-2.323-.534-4.99-.906-7.966l-.763-4.693-.408-2.516a34.227 34.227 0 0 0-.487-2.616c-.778-3.54-1.458-7.393-2.614-11.413l-.812-3.075a41.978 41.978 0 0 0-.908-3.147l-2.071-6.509c-1.604-4.392-3.258-9.013-5.353-13.684a178.146 178.146 0 0 0-15.844-28.827c-6.541-9.647-14.329-19.197-23.385-28.038l-1.683-1.677-1.766-1.605c-1.182-1.068-2.366-2.142-3.557-3.218-1.163-1.104-2.449-2.08-3.686-3.116l-3.75-3.083c-1.3-.972-2.604-1.946-3.91-2.924-1.324-.953-2.58-2.003-3.953-2.902l-4.075-2.768-2.042-1.389-2.112-1.291a179.101 179.101 0 0 0-35.961-17.193c-12.643-4.307-25.78-6.991-38.788-8.151-1.628-.128-3.24-.356-4.867-.403l-4.858-.205c-3.224-.204-6.444-.09-9.634-.125l-2.151-.002-2.495.128c-1.66.095-3.316.141-4.966.211l-2.47.097c-.809.042-1.532.143-2.3.21l-4.522.438c-2.979.166-6.046.719-9.053 1.084-3.023.336-5.975.917-8.906 1.449-1.462.28-2.93.501-4.374.794l-4.282.989-4.245.947c-1.396.353-2.766.767-4.137 1.143-2.735.781-5.465 1.47-8.073 2.398l-3.917 1.296c-1.3.42-2.588.844-3.827 1.363l-7.408 2.85a564.405 564.405 0 0 1-7.01 3.092c-1.163.477-2.267 1.042-3.361 1.598l-3.263 1.627-3.206 1.579a4807.3 4807.3 0 0 1-3.039 1.706c-1.992 1.14-4.003 2.158-5.868 3.29a478.807 478.807 0 0 1-5.419 3.344c-1.792 1.037-3.405 2.208-5.008 3.287l-4.64 3.135-7.955 5.898c-2.294 1.916-4.409 3.579-6.239 5.05-.934.718-1.729 1.45-2.471 2.111l-2.044 1.782-3.793 3.262-.025.022a.857.857 0 0 1-1.27-1.123s.969-1.457 2.861-4.161c.957-1.342 2.071-3.069 3.577-4.928 1.497-1.867 3.207-4.042 5.195-6.425a711.243 711.243 0 0 1 6.954-7.583l4.222-4.055c1.466-1.404 2.982-2.873 4.665-4.248a492.728 492.728 0 0 1 5.158-4.347c1.799-1.46 3.737-2.85 5.699-4.323l3.003-2.214 3.188-2.104a4521.47 4521.47 0 0 0 3.282-2.14c1.107-.723 2.227-1.456 3.411-2.104 9.235-5.625 19.942-10.626 31.724-14.697 1.475-.504 2.951-1.046 4.456-1.527a9356.8 9356.8 0 0 0 4.587-1.314l4.658-1.299c1.57-.402 3.17-.716 4.772-1.065l4.839-1.029a26.288 26.288 0 0 1 2.454-.433l2.478-.368c3.322-.481 6.616-1.035 10.133-1.254l5.236-.383c.866-.054 1.775-.143 2.61-.166l2.472-.042c1.65-.022 3.307-.069 4.97-.067l2.497-.011c-.163.003.397-.005.4-.001l.164.008.327.015.655.031 1.311.062c3.497.194 7.019.236 10.533.702l5.285.567c1.767.169 3.518.523 5.28.778a200.938 200.938 0 0 1 41.516 11.19 191.734 191.734 0 0 1 37.788 20.016l2.192 1.471 2.117 1.569 4.215 3.127c2.768 2.124 5.406 4.386 8.06 6.582l3.813 3.468c1.254 1.164 2.556 2.267 3.731 3.496l3.587 3.591 1.775 1.789 1.689 1.859c9.061 9.819 16.775 20.217 23.014 30.685a185.353 185.353 0 0 1 14.763 30.855c1.899 4.94 3.31 9.814 4.67 14.425l1.712 6.814c.297 1.098.526 2.196.731 3.282l.636 3.2c.923 4.179 1.378 8.165 1.943 11.813.151.911.247 1.811.318 2.695l.24 2.587.445 4.814c.173 3.065.257 5.808.365 8.183l.066 1.714-.015 1.567-.024 2.721-.045 4.987a.85.85 0 0 1-.857.843.852.852 0 0 1-.837-.8z"
+        />
+        <circle fill="currentColor" cx="70.536" cy="110.694" r="36.011" />
+        <circle fill="currentColor" cx="362.721" cy="309.694" r="36.012" />
+      </svg>
+    </div>
+
     <!--
     <script type="module" src="./toolbar.main.js"></script>
     The script type module approach works too but

package/src/internal/toolbar/toolbar.injector.js

@@ -91,6 +91,14 @@ const connectLivereload = () => {
 window.__jsenv_eventsource__ = connectLivereload()
 
 const injectToolbar = async () => {
+  await new Promise((resolve) => {
+    if (window.requestIdleCallback) {
+      window.requestIdleCallback(resolve)
+    } else {
+      window.requestAnimationFrame(resolve)
+    }
+  })
+
   const { jsenvDirectoryRelativeUrl } = await fetchExploringJson()
   const jsenvDirectoryServerUrl = resolveUrl(
     jsenvDirectoryRelativeUrl,

package/src/internal/toolbar/util/animation.js

@@ -4,14 +4,10 @@ const animateFallback = () => {
   return Promise.resolve()
 }
 
-const animateNative = (
-  node,
-  keyframes,
-  { cancellationToken, ...options } = {},
-) => {
+const animateNative = (node, keyframes, { signal, ...options } = {}) => {
   const animation = node.animate(keyframes, options)
-  if (cancellationToken) {
-    cancellationToken.register(() => {
+  if (signal) {
+    signal.addEventListener("abort", () => {
       animation.cancel()
     })
   }

package/src/internal/toolbar/util/fetching.js

@@ -1,34 +1,5 @@
-import { createCancellationToken } from "@jsenv/cancellation/main.browser.js"
 import { memoize } from "../../memoize.js"
 
-const fetchNative = async (
-  url,
-  { cancellationToken = createCancellationToken(), ...options } = {},
-) => {
-  const abortController = new AbortController()
-
-  let cancelError
-  cancellationToken.register((reason) => {
-    cancelError = reason
-    abortController.abort(reason)
-  })
-
-  let response
-  try {
-    response = await window.fetch(url, {
-      signal: abortController.signal,
-      ...options,
-    })
-  } catch (e) {
-    if (cancelError && e.name === "AbortError") {
-      throw cancelError
-    }
-    throw e
-  }
-
-  return response
-}
-
 const fetchPolyfill = async (...args) => {
   const { fetchUsingXHR } = await loadPolyfill()
   return fetchUsingXHR(...args)
@@ -41,5 +12,5 @@ const loadPolyfill = memoize(() =>
 export const fetchUrl =
   typeof window.fetch === "function" &&
   typeof window.AbortController === "function"
-    ? fetchNative
+    ? window.fetch
     : fetchPolyfill

package/src/jsenvServiceWorkerFinalizer.js

@@ -2,8 +2,7 @@ import { generateContentHash } from "./internal/building/url-versioning.js"
 
 export const jsenvServiceWorkerFinalizer = (
   code,
-  { buildManifest, rollupBuild },
-  { lineBreakNormalization },
+  { buildManifest, rollupBuild, lineBreakNormalization },
 ) => {
   const generatedUrlsConfig = {}
   Object.keys(buildManifest).forEach((projectRelativeUrl) => {