@jsenv/plugin-toolbar 1.5.22 → 1.5.24

package/dist/css/toolbar.css

@@ -143,10 +143,10 @@ input:focus-visible {
 }
 
 #execution_completed_icon[data-animate] path {
-  transform-origin: 50%;
+  stroke: green;
   stroke-dasharray: 48;
   stroke-dashoffset: 48px;
-  stroke: green;
+  transform-origin: 50%;
   animation: .5s cubic-bezier(.65, 0, .45, 1) forwards stroke;
 }
 
@@ -250,9 +250,9 @@ input:focus-visible {
 }
 
 .server_indicator_ring {
+  fill: #0000;
   stroke: #cecece75;
   stroke-width: 4px;
-  fill: #0000;
   transform-origin: center;
   animation: 1.2s ease-out infinite pulse;
 }
@@ -397,9 +397,9 @@ html[data-theme="light"] .execution-link {
 }
 
 #settings_box {
-  text-align: center;
-  color: #fff;
   z-index: -1;
+  color: #fff;
+  text-align: center;
   background-color: #030713;
   border-radius: 5px 5px 0 0;
   min-width: 250px;
@@ -496,8 +496,8 @@ label {
 }
 
 #settings_box .category_title svg {
-  fill: currentColor;
   vertical-align: top;
+  fill: currentColor;
   width: 18px;
   height: 18px;
   margin-right: 5px;
@@ -539,8 +539,8 @@ label {
 }
 
 .switch .square {
-  content: "";
   color: #030713;
+  content: "";
   background-color: #4c4c4c;
   border-radius: .15em;
   width: 1em;
@@ -599,8 +599,8 @@ label {
 }
 
 #menu_overflow {
-  visibility: hidden;
   opacity: 0;
+  visibility: hidden;
   background: #404040;
   width: 100%;
   height: 100%;
@@ -617,8 +617,8 @@ label {
 }
 
 #menu_overflow > * {
-  vertical-align: middle;
   text-align: center;
+  vertical-align: middle;
 }
 
 #toolbar[data-menu-overflow-enabled] #menu_overflow_button {
@@ -634,8 +634,8 @@ label {
 }
 
 #toolbar[data-menu-overflow-opened] #menu_overflow {
-  visibility: visible;
   opacity: 1;
+  visibility: visible;
   margin-left: -40px;
   display: block;
   left: 0;
@@ -701,14 +701,14 @@ label {
 }
 
 .tooltip_action a {
-  vertical-align: middle;
   color: #fff;
+  vertical-align: middle;
   text-decoration: none;
 }
 
 .tooltip_icon {
-  fill: #fff;
   vertical-align: middle;
+  fill: #fff;
   width: 20px;
   height: 20px;
 }
@@ -733,8 +733,8 @@ label {
 }
 
 .toolbar_icon {
-  fill: #cecece;
   color: #cecece;
+  fill: #cecece;
   height: 40px;
 }
 

package/dist/js/toolbar_injector.js

@@ -185,7 +185,7 @@ const appendIntoRespectingLineBreaksAndIndentation = (node, parentNode, {
   parentNode.appendChild(document.createTextNode("\n".concat(indentMinusOne)));
 };
 const createToolbarTriggerNode = () => {
-  const css = /* css */"\n    #jsenv_toolbar_trigger {\n      display: block;\n      overflow: hidden;\n      position: fixed;\n      z-index: 1000;\n      bottom: -32px;\n      right: 20px;\n      height: 40px;\n      width: 40px;\n      padding: 0;\n      margin: 0;\n      border-radius: 5px 5px 0 0;\n      border: 1px solid rgba(0, 0, 0, 0.33);\n      border-bottom: none;\n      box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);\n      background: transparent;\n      text-align: center;\n      transition: 600ms;\n    }\n\n    #jsenv_toolbar_trigger:hover {\n      cursor: pointer;\n    }\n\n    #jsenv_toolbar_trigger[data-expanded] {\n      bottom: 0;\n    }\n\n    #jsenv_toolbar_trigger_icon {\n      width: 35px;\n      height: 35px;\n      opacity: 0;\n      transition: 600ms;\n    }\n\n    #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {\n      opacity: 1;\n    }\n  ";
+  const css = /* css */"\n    #jsenv_toolbar_trigger {\n      position: fixed;\n      right: 20px;\n      bottom: -32px;\n      z-index: 1000;\n      display: block;\n      width: 40px;\n      height: 40px;\n      margin: 0;\n      padding: 0;\n      text-align: center;\n      background: transparent;\n      border: 1px solid rgba(0, 0, 0, 0.33);\n      border-bottom: none;\n      border-radius: 5px 5px 0 0;\n      box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);\n      transition: 600ms;\n      overflow: hidden;\n    }\n\n    #jsenv_toolbar_trigger:hover {\n      cursor: pointer;\n    }\n\n    #jsenv_toolbar_trigger[data-expanded] {\n      bottom: 0;\n    }\n\n    #jsenv_toolbar_trigger_icon {\n      width: 35px;\n      height: 35px;\n      opacity: 0;\n      transition: 600ms;\n    }\n\n    #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {\n      opacity: 1;\n    }\n  ";
   const html = /* html */" <div\n      id=\"jsenv_toolbar_trigger\"\n      style=\"display:none\"\n    >\n      <style>\n        ".concat(css, "\n      </style>\n      <svg id=\"jsenv_toolbar_trigger_icon\">\n        <use xlink:href=\"").concat(jsenvLogoSvgUrl, "#jsenv_logo\"></use>\n      </svg>\n    </div>");
   class JsenvToolbarTriggerHtmlElement extends HTMLElement {
     constructor() {

package/dist/jsenv_plugin_toolbar_node_modules.js

@@ -1,6 +1,6 @@
 var n$1,
   u$2;
-function k$1(n) {
+function k$2(n) {
   return n.children;
 }
 n$1 = {
@@ -32,8 +32,8 @@ var t$1,
   l$1 = e$1.diffed,
   m = e$1.__c,
   s$1 = e$1.unmount,
-  p$1 = e$1.__;
-function d$1(n, t) {
+  p$2 = e$1.__;
+function d$2(n, t) {
   e$1.__h && e$1.__h(r$1, n, f$1 || t), f$1 = 0;
   var u = r$1.__H || (r$1.__H = {
     __: [],
@@ -41,11 +41,11 @@ function d$1(n, t) {
   });
   return n >= u.__.length && u.__.push({}), u.__[n];
 }
-function h$2(n) {
+function h$1(n) {
   return f$1 = 1, y$2(D, n);
 }
 function y$2(n, u, i) {
-  var f = d$1(t$1++, 2);
+  var f = d$2(t$1++, 2);
   if (f.t = n, !f.__c && (f.__ = [D(void 0, u), function (n) {
     var t = f.__N ? f.__N[0] : f.__[0],
       r = f.t(t, n);
@@ -80,8 +80,8 @@ function y$2(n, u, i) {
   }
   return f.__N || f.__;
 }
-function q$1(n, r) {
-  var u = d$1(t$1++, 7);
+function q(n, r) {
+  var u = d$2(t$1++, 7);
   return C(u.__H, r) && (u.__ = n(), u.__H = r, u.__h = n), u.__;
 }
 function g$2() {
@@ -94,7 +94,7 @@ function g$2() {
 e$1.__b = function (n) {
   r$1 = null, a$1 && a$1(n);
 }, e$1.__ = function (n, t) {
-  n && t.__k && t.__k.__m && (n.__m = t.__k.__m), p$1 && p$1(n, t);
+  n && t.__k && t.__k.__m && (n.__m = t.__k.__m), p$2 && p$2(n, t);
 }, e$1.__r = function (n) {
   v$2 && v$2(n), t$1 = 0;
   var i = (r$1 = n.__c).__H;
@@ -131,14 +131,14 @@ e$1.__b = function (n) {
     }
   }), r.__H = void 0, t && e$1.__e(t, r.__v));
 };
-var k = "function" == typeof requestAnimationFrame;
+var k$1 = "function" == typeof requestAnimationFrame;
 function w$2(n) {
   var t,
     r = function () {
-      clearTimeout(u), k && cancelAnimationFrame(t), setTimeout(n);
+      clearTimeout(u), k$1 && cancelAnimationFrame(t), setTimeout(n);
     },
     u = setTimeout(r, 35);
-  k && (t = requestAnimationFrame(r));
+  k$1 && (t = requestAnimationFrame(r));
 }
 function z(n) {
   var t = r$1,
@@ -199,7 +199,7 @@ function o(i) {
   }
 }
 let n, s;
-function h$1(i) {
+function h(i) {
   const t = n;
   n = void 0;
   try {
@@ -261,7 +261,7 @@ c.prototype.S = function (i) {
   if (t !== i && void 0 === i.e) {
     i.x = t;
     this.t = i;
-    if (void 0 !== t) t.e = i;else h$1(() => {
+    if (void 0 !== t) t.e = i;else h(() => {
       var i;
       null == (i = this.W) || i.call(this);
     });
@@ -281,7 +281,7 @@ c.prototype.U = function (i) {
     }
     if (i === this.t) {
       this.t = o;
-      if (void 0 === o) h$1(() => {
+      if (void 0 === o) h(() => {
         var i;
         null == (i = this.Z) || i.call(this);
       });
@@ -341,7 +341,7 @@ Object.defineProperty(c.prototype, "value", {
     }
   }
 });
-function d(i, t) {
+function d$1(i, t) {
   return new c(i, t);
 }
 function v$1(i) {
@@ -454,7 +454,7 @@ Object.defineProperty(a.prototype, "value", {
 function w$1(i, t) {
   return new a(i, t);
 }
-function _$1(i) {
+function _(i) {
   const o = i.u;
   i.u = void 0;
   if ("function" == typeof o) {
@@ -478,7 +478,7 @@ function b$1(i) {
   for (let t = i.s; void 0 !== t; t = t.n) t.S.U(t);
   i.x = void 0;
   i.s = void 0;
-  _$1(i);
+  _(i);
 }
 function g$1(i) {
   if (n !== this) throw new Error("Out-of-order effect");
@@ -488,7 +488,7 @@ function g$1(i) {
   if (8 & this.f) b$1(this);
   t();
 }
-function p(i, t) {
+function p$1(i, t) {
   this.x = i;
   this.u = void 0;
   this.s = void 0;
@@ -496,7 +496,7 @@ function p(i, t) {
   this.f = 32;
   this.name = null == t ? void 0 : t.name;
 }
-p.prototype.c = function () {
+p$1.prototype.c = function () {
   const i = this.S();
   try {
     if (8 & this.f) return;
@@ -507,33 +507,33 @@ p.prototype.c = function () {
     i();
   }
 };
-p.prototype.S = function () {
+p$1.prototype.S = function () {
   if (1 & this.f) throw new Error("Cycle detected");
   this.f |= 1;
   this.f &= -9;
-  _$1(this);
+  _(this);
   l(this);
   r++;
   const i = n;
   n = this;
   return g$1.bind(this, i);
 };
-p.prototype.N = function () {
+p$1.prototype.N = function () {
   if (!(2 & this.f)) {
     this.f |= 2;
     this.o = s;
     s = this;
   }
 };
-p.prototype.d = function () {
+p$1.prototype.d = function () {
   this.f |= 8;
   if (!(1 & this.f)) b$1(this);
 };
-p.prototype.dispose = function () {
+p$1.prototype.dispose = function () {
   this.d();
 };
 function E(i, t) {
-  const o = new p(i, t);
+  const o = new p$1(i, t);
   try {
     o.c();
   } catch (i) {
@@ -545,41 +545,42 @@ function E(i, t) {
   return n;
 }
 
-let h,
-  w,
-  v = [];
+const d = "undefined" != typeof window && !!window.__PREACT_SIGNALS_DEVTOOLS__;
+let p,
+  v,
+  g = [];
 E(function () {
-  h = this.N;
+  p = this.N;
 })();
-function y(i, n) {
-  n$1[i] = n.bind(null, n$1[i] || (() => {}));
+function b(t, e) {
+  n$1[t] = e.bind(null, n$1[t] || (() => {}));
 }
-function _(i) {
-  if (w) w();
-  w = i && i.S();
+function y(t) {
+  if (v) v();
+  v = t && t.S();
 }
-function g({
-  data: i
+function w({
+  data: t
 }) {
-  const t = useSignal(i);
-  t.value = i;
-  const [e, f] = q$1(() => {
-    let i = this,
-      e = this.__v;
-    while (e = e.__) if (e.__c) {
-      e.__c.__$f |= 4;
+  const i = useSignal(t);
+  i.value = t;
+  const [n, f] = q(() => {
+    let t = this,
+      n = this.__v;
+    while (n = n.__) if (n.__c) {
+      n.__c.__$f |= 4;
       break;
     }
     const o = w$1(() => {
-        let i = t.value.value;
-        return 0 === i ? 0 : true === i ? "" : i || "";
+        let t = i.value.value;
+        return 0 === t ? 0 : true === t ? "" : t || "";
       }),
       f = w$1(() => !Array.isArray(o.value) && !u$2(o.value)),
       r = E(function () {
-        this.N = F;
+        this.N = M;
         if (f.value) {
-          const t = o.value;
-          if (i.__v && i.__v.__e && 3 === i.__v.__e.nodeType) i.__v.__e.data = t;
+          const i = o.value;
+          if (t.__v && t.__v.__e && 3 === t.__v.__e.nodeType) t.__v.__e.data = i;
         }
       }),
       u = this.__$u.d;
@@ -589,9 +590,9 @@ function g({
     };
     return [f, o];
   }, []);
-  return e.value ? f.peek() : f.value;
+  return n.value ? f.peek() : f.value;
 }
-g.displayName = "ReactiveTextNode";
+w.displayName = "ReactiveTextNode";
 Object.defineProperties(c.prototype, {
   constructor: {
     configurable: true,
@@ -599,7 +600,7 @@ Object.defineProperties(c.prototype, {
   },
   type: {
     configurable: true,
-    value: g
+    value: w
   },
   props: {
     configurable: true,
@@ -614,147 +615,147 @@ Object.defineProperties(c.prototype, {
     value: 1
   }
 });
-y("__b", (i, t) => {
-  if ("function" == typeof t.type && "undefined" != typeof window && window.__PREACT_SIGNALS_DEVTOOLS__) window.__PREACT_SIGNALS_DEVTOOLS__.exitComponent();
-  if ("string" == typeof t.type) {
-    let i,
-      n = t.props;
-    for (let e in n) {
-      if ("children" === e) continue;
-      let o = n[e];
+b("__b", (t, i) => {
+  if ("string" == typeof i.type) {
+    let t,
+      e = i.props;
+    for (let n in e) {
+      if ("children" === n) continue;
+      let o = e[n];
       if (o instanceof c) {
-        if (!i) t.__np = i = {};
-        i[e] = o;
-        n[e] = o.peek();
+        if (!t) i.__np = t = {};
+        t[n] = o;
+        e[n] = o.peek();
       }
     }
   }
-  i(t);
+  t(i);
 });
-y("__r", (i, t) => {
-  if ("function" == typeof t.type && "undefined" != typeof window && window.__PREACT_SIGNALS_DEVTOOLS__) window.__PREACT_SIGNALS_DEVTOOLS__.enterComponent(t);
-  if (t.type !== k$1) {
-    _();
-    let i,
-      n = t.__c;
-    if (n) {
-      n.__$f &= -2;
-      i = n.__$u;
-      if (void 0 === i) n.__$u = i = function (i) {
-        let t;
+b("__r", (t, i) => {
+  if (i.type !== k$2) {
+    y();
+    let t,
+      e = i.__c;
+    if (e) {
+      e.__$f &= -2;
+      t = e.__$u;
+      if (void 0 === t) e.__$u = t = function (t, i) {
+        let e;
         E(function () {
-          t = this;
+          e = this;
+        }, {
+          name: i
         });
-        t.c = () => {
-          n.__$f |= 1;
-          n.setState({});
-        };
-        return t;
-      }();
+        e.c = t;
+        return e;
+      }(() => {
+        var i;
+        if (d) null == (i = t.y) || i.call(t);
+        e.__$f |= 1;
+        e.setState({});
+      }, "function" == typeof i.type ? i.type.displayName || i.type.name : "");
     }
-    _(i);
+    y(t);
   }
-  i(t);
+  t(i);
 });
-y("__e", (i, t, n, e) => {
-  if ("undefined" != typeof window && window.__PREACT_SIGNALS_DEVTOOLS__) window.__PREACT_SIGNALS_DEVTOOLS__.exitComponent();
-  _();
-  i(t, n, e);
+b("__e", (t, i, e, n) => {
+  y();
+  t(i, e, n);
 });
-y("diffed", (i, t) => {
-  if ("function" == typeof t.type && "undefined" != typeof window && window.__PREACT_SIGNALS_DEVTOOLS__) window.__PREACT_SIGNALS_DEVTOOLS__.exitComponent();
-  _();
-  let n;
-  if ("string" == typeof t.type && (n = t.__e)) {
-    let i = t.__np,
-      e = t.props;
-    if (i) {
-      let t = n.U;
-      if (t) for (let n in t) {
-        let e = t[n];
-        if (void 0 !== e && !(n in i)) {
-          e.d();
-          t[n] = void 0;
+b("diffed", (t, i) => {
+  y();
+  let e;
+  if ("string" == typeof i.type && (e = i.__e)) {
+    let t = i.__np,
+      n = i.props;
+    if (t) {
+      let i = e.U;
+      if (i) for (let e in i) {
+        let n = i[e];
+        if (void 0 !== n && !(e in t)) {
+          n.d();
+          i[e] = void 0;
         }
       } else {
-        t = {};
-        n.U = t;
+        i = {};
+        e.U = i;
       }
-      for (let o in i) {
-        let f = t[o],
-          r = i[o];
+      for (let o in t) {
+        let f = i[o],
+          r = t[o];
         if (void 0 === f) {
-          f = b(n, o, r, e);
-          t[o] = f;
-        } else f.o(r, e);
+          f = k(e, o, r, n);
+          i[o] = f;
+        } else f.o(r, n);
       }
     }
   }
-  i(t);
+  t(i);
 });
-function b(i, t, n, e) {
-  const o = t in i && void 0 === i.ownerSVGElement,
-    f = d(n);
+function k(t, i, e, n) {
+  const o = i in t && void 0 === t.ownerSVGElement,
+    f = d$1(e);
   return {
-    o: (i, t) => {
-      f.value = i;
-      e = t;
+    o: (t, i) => {
+      f.value = t;
+      n = i;
     },
     d: E(function () {
-      this.N = F;
-      const n = f.value.value;
-      if (e[t] !== n) {
-        e[t] = n;
-        if (o) i[t] = n;else if (null != n && (false !== n || "-" === t[4])) i.setAttribute(t, n);else i.removeAttribute(t);
+      this.N = M;
+      const e = f.value.value;
+      if (n[i] !== e) {
+        n[i] = e;
+        if (o) t[i] = e;else if (null != e && (false !== e || "-" === i[4])) t.setAttribute(i, e);else t.removeAttribute(i);
       }
     })
   };
 }
-y("unmount", (i, t) => {
-  if ("string" == typeof t.type) {
-    let i = t.__e;
-    if (i) {
-      const t = i.U;
-      if (t) {
-        i.U = void 0;
-        for (let i in t) {
-          let n = t[i];
-          if (n) n.d();
+b("unmount", (t, i) => {
+  if ("string" == typeof i.type) {
+    let t = i.__e;
+    if (t) {
+      const i = t.U;
+      if (i) {
+        t.U = void 0;
+        for (let t in i) {
+          let e = i[t];
+          if (e) e.d();
         }
       }
     }
   } else {
-    let i = t.__c;
-    if (i) {
-      const t = i.__$u;
-      if (t) {
-        i.__$u = void 0;
-        t.d();
+    let t = i.__c;
+    if (t) {
+      const i = t.__$u;
+      if (i) {
+        t.__$u = void 0;
+        i.d();
       }
     }
   }
-  i(t);
+  t(i);
 });
-y("__h", (i, t, n, e) => {
-  if (e < 3 || 9 === e) t.__$f |= 2;
-  i(t, n, e);
+b("__h", (t, i, e, n) => {
+  if (n < 3 || 9 === n) i.__$f |= 2;
+  t(i, e, n);
 });
-function useSignal(i, t) {
-  return h$2(() => d(i, t))[0];
+function useSignal(t, i) {
+  return h$1(() => d$1(t, i))[0];
 }
-const q = i => {
+const A = t => {
     queueMicrotask(() => {
-      queueMicrotask(i);
+      queueMicrotask(t);
     });
   };
-function x() {
+function F() {
   o(() => {
-    let i;
-    while (i = v.shift()) h.call(i);
+    let t;
+    while (t = g.shift()) p.call(t);
   });
 }
-function F() {
-  if (1 === v.push(this)) (n$1.requestAnimationFrame || q)(x);
+function M() {
+  if (1 === g.push(this)) (n$1.requestAnimationFrame || A)(F);
 }
 
-export { E, d, w$1 as w };
+export { E, d$1 as d, w$1 as w };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/plugin-toolbar",
-  "version": "1.5.22",
+  "version": "1.5.24",
   "repository": {
     "type": "git",
     "url": "https://github.com/jsenv/core",
@@ -28,15 +28,15 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@jsenv/ast": "6.7.17"
+    "@jsenv/ast": "6.7.19"
   },
   "devDependencies": {
     "@jsenv/core": "../../",
     "@jsenv/filesystem": "../../tooling/filesystem",
     "@jsenv/plugin-toolbar": "./",
     "@jsenv/utils": "../../tooling/utils",
-    "@preact/signals": "2.5.0",
-    "playwright": "1.56.1"
+    "@preact/signals": "2.6.2",
+    "playwright": "1.58.1"
   },
   "publishConfig": {
     "access": "public"

package/src/client/toolbar_injector.js

@@ -207,23 +207,23 @@ const appendIntoRespectingLineBreaksAndIndentation = (
 const createToolbarTriggerNode = () => {
   const css = /* css */ `
     #jsenv_toolbar_trigger {
-      display: block;
-      overflow: hidden;
       position: fixed;
-      z-index: 1000;
-      bottom: -32px;
       right: 20px;
-      height: 40px;
+      bottom: -32px;
+      z-index: 1000;
+      display: block;
       width: 40px;
-      padding: 0;
+      height: 40px;
       margin: 0;
-      border-radius: 5px 5px 0 0;
+      padding: 0;
+      text-align: center;
+      background: transparent;
       border: 1px solid rgba(0, 0, 0, 0.33);
       border-bottom: none;
+      border-radius: 5px 5px 0 0;
       box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);
-      background: transparent;
-      text-align: center;
       transition: 600ms;
+      overflow: hidden;
     }
 
     #jsenv_toolbar_trigger:hover {

package/src/client/ui/document_execution_indicator/document_execution_indicator.css

@@ -2,8 +2,8 @@
   width: 20px;
   height: 20px;
   margin: 10px;
-  transform: scaleX(-1);
   color: #cecece;
+  transform: scaleX(-1);
 }
 #execution_pending_icon[data-animate] {
   opacity: 0;
@@ -12,15 +12,15 @@
 }
 @keyframes rotateLoader {
   0% {
-    transform: scaleX(-1) rotate(360deg);
     opacity: 1;
+    transform: scaleX(-1) rotate(360deg);
   }
   50% {
     opacity: 0;
   }
   100% {
-    transform: scaleX(-1) rotate(0deg);
     opacity: 1;
+    transform: scaleX(-1) rotate(0deg);
   }
 }
 
@@ -34,11 +34,11 @@
   opacity: 1;
 }
 #execution_completed_icon[data-animate] path {
-  transform-origin: 50% 50%;
+  stroke: green;
   stroke-dasharray: 48;
   stroke-dashoffset: 48;
+  transform-origin: 50% 50%;
   animation: stroke 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards;
-  stroke: green;
 }
 @keyframes stroke {
   100% {
@@ -69,7 +69,7 @@
 }
 @keyframes draw {
   100% {
-    height: 376.964px;
     width: 45px;
+    height: 376.964px;
   }
 }

package/src/client/ui/globals.css

@@ -3,9 +3,9 @@
 }
 html,
 body {
+  height: 100%;
   margin: 0;
   padding: 0;
-  height: 100%;
 }
 html {
   font-family: arial, sans;
@@ -64,7 +64,6 @@ Because for some element we set the focus outline on a div which would not match
   input:focus-visible,
   *[data-input-customized] input:focus-visible + * {
     outline-width: 2px;
-    outline-offset: 0;
     outline-style: solid;
     /*
     force a blue color for firefox otherwise
@@ -72,6 +71,7 @@ Because for some element we set the focus outline on a div which would not match
     making it unpredictible and sometimes hard to see
     */
     outline-color: rgb(0, 150, 255);
+    outline-offset: 0;
   }
 }
 ::-moz-focus-inner {
@@ -86,18 +86,18 @@ Because for some element we set the focus outline on a div which would not match
 
 #toolbar_overlay {
   position: fixed;
-  left: 0;
   top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
-  filter: url(#better-blur);
   background-color: rgba(0, 0, 0, 0.2);
+  filter: url(#better-blur);
 }
 
 #toolbar {
   position: fixed;
   bottom: 0;
-  height: 40px;
   width: 100%;
+  height: 40px;
   background: #404040;
 }

package/src/client/ui/server_indicator/server_indicator.css

@@ -9,11 +9,11 @@
 
 #server_indicator .autoreload {
   position: absolute;
+  top: 0;
+  left: 0;
   width: 32px;
   height: 32px;
   margin: 4px;
-  left: 0;
-  top: 0;
 }
 .autoreload[data-variant="enabled"] {
   color: green;
@@ -30,8 +30,8 @@
 }
 .server_indicator_circle[data-variant="connecting"] {
   fill: #cecece;
-  animation: wink 1.2s ease-out infinite;
   transform-origin: center;
+  animation: wink 1.2s ease-out infinite;
 }
 @keyframes wink {
   0% {
@@ -52,22 +52,22 @@
 }
 
 .server_indicator_ring {
+  fill: transparent;
   stroke: rgba(206, 206, 206, 0.46);
   stroke-width: 4;
-  fill: transparent;
-  animation: pulse 1.2s ease-out infinite;
   transform-origin: center;
+  animation: pulse 1.2s ease-out infinite;
 }
 @keyframes pulse {
   0% {
-    transform: scale(0);
     opacity: 0;
+    transform: scale(0);
   }
   50% {
     opacity: 1;
   }
   100% {
-    transform: scale(1);
     opacity: 0;
+    transform: scale(1);
   }
 }

package/src/client/ui/toolbar.css

@@ -6,14 +6,14 @@
 @import "./tooltips/tooltips.css";
 
 .toolbar_control {
-  background: none;
-  border: none;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 40px;
   width: 40px;
+  height: 40px;
   padding: 0;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
 }
 
 .toolbar_control:hover {
@@ -28,8 +28,8 @@
 
 .toolbar_icon {
   height: 40px;
-  fill: #cecece;
   color: #cecece;
+  fill: #cecece;
 }
 
 .toolbar_icon:hover {
@@ -37,10 +37,10 @@
 }
 
 .toolbar_icon_wrapper {
+  display: inline-block;
+  width: 40px;
   height: 100%;
   text-align: center;
-  width: 40px;
-  display: inline-block;
 }
 
 #file[data-active] {
@@ -61,9 +61,9 @@
 
 #changes_indicator button {
   display: flex;
-  justify-content: center;
-  align-items: stretch;
   width: auto;
+  align-items: stretch;
+  justify-content: center;
 }
 
 .changes_icon {

package/src/client/ui/toolbar_menu_overflow/toolbar_menu_overflow.css

@@ -1,8 +1,8 @@
 #menu_overflow_button {
-  display: none;
   position: absolute;
   top: 0;
   right: 0;
+  display: none;
   width: 40px;
   background: #404040;
 }
@@ -12,16 +12,16 @@
 }
 
 #menu_overflow {
-  visibility: hidden; /* disable keyboard navigation */
-  display: none;
   position: absolute;
-  left: 100%;
   top: 0;
   bottom: 0;
+  left: 100%;
+  display: none;
   width: 100%;
   height: 100%;
   background: #404040;
   opacity: 0;
+  visibility: hidden; /* disable keyboard navigation */
 }
 
 #menu_overflow[data-animate] {
@@ -30,8 +30,8 @@
 }
 
 #menu_overflow > * {
-  vertical-align: middle;
   text-align: center;
+  vertical-align: middle;
 }
 
 #toolbar[data-menu-overflow-enabled] #menu_overflow_button {
@@ -48,11 +48,11 @@
 }
 
 #toolbar[data-menu-overflow-opened] #menu_overflow {
-  visibility: visible; /* restore keyboard navigation */
-  display: block;
-  opacity: 1;
   left: 0;
+  display: block;
   margin-left: -40px;
+  opacity: 1;
+  visibility: visible; /* restore keyboard navigation */
 }
 
 #toolbar[data-menu-overflow-enabled] #settings_box {

package/src/client/ui/toolbar_settings/jsenv_theme.css

@@ -49,8 +49,8 @@ html[data-theme="jsenv"] .switch .slider:before {
 
 /* tooltips */
 html[data-theme="jsenv"] .tooltip {
-  background-color: #ffd390;
   color: #884900;
+  background-color: #ffd390;
 }
 html[data-theme="jsenv"] .tooltip_action {
   border-color: #884900;

package/src/client/ui/toolbar_settings/theme_light.css

@@ -54,8 +54,8 @@ html[data-theme="light"] .switch input:checked + * .square {
 
 /* tooltips */
 html[data-theme="light"] .tooltip {
-  background-color: rgb(138, 145, 154);
   color: #fff;
+  background-color: rgb(138, 145, 154);
 }
 html[data-theme="light"] .tooltip_action {
   border-color: #fff;
@@ -100,6 +100,6 @@ html[data-theme="light"] #explorables fieldset label input + * {
   background: #ddf0ff;
 }
 html[data-theme="light"] .execution-link {
-  background: #ddf0ff;
   color: #076570;
+  background: #ddf0ff;
 }

package/src/client/ui/toolbar_settings/toolbar_settings.css

@@ -13,19 +13,19 @@
 }
 
 #settings_box {
-  display: none;
   position: absolute;
-  bottom: 40px;
   right: 0;
-  text-align: center;
+  bottom: 40px;
+  z-index: -1;
+  display: none;
+  min-width: 250px;
+  min-height: 150px;
   padding: 17px;
-  font-size: 14px;
   color: #fff;
+  font-size: 14px;
+  text-align: center;
   background-color: #030713;
   border-radius: 5px 5px 0 0;
-  min-width: 250px;
-  min-height: 150px;
-  z-index: -1;
 }
 
 [data-active] #settings_box {
@@ -45,45 +45,45 @@
 }
 
 #settings_box_body {
-  text-align: left;
-  padding: 18px 0;
-  max-height: 80vh;
-  overflow: auto;
-  width: 100vw;
   display: flex;
+  width: 100vw;
+  max-height: 80vh;
+  padding: 18px 0;
   justify-content: center;
+  text-align: left;
+  overflow: auto;
 }
 
 .settings_box_items_wrapper {
-  max-width: 700px;
   display: flex;
+  max-width: 700px;
   flex-wrap: wrap;
   justify-content: center;
 }
 
 .settings_box_item {
-  padding: 15px;
-  background: #0c111b;
   width: 250px;
   margin: 9px 18px;
+  padding: 15px;
+  background: #0c111b;
 }
 
 #settings_box_header .settings_icon {
+  position: relative;
+  top: 4px;
+  width: 22px;
+  height: 22px;
+  margin-right: 10px;
   fill: none;
   stroke: #24b1b0;
   stroke-width: 2;
-  margin-right: 10px;
-  width: 22px;
-  height: 22px;
-  position: relative;
-  top: 4px;
 }
 
 #settings_box h3 {
   display: inline-block;
-  font-size: 20px;
   margin: 10px 0;
   color: #24b1b0;
+  font-size: 20px;
 }
 
 #settings_close_button {
@@ -95,32 +95,32 @@
 }
 
 label {
+  display: block;
+  padding-bottom: 3px;
   color: #a9a8a8;
   font-size: 14px;
-  padding-bottom: 3px;
-  display: block;
 }
 
 #settings_box .category_title {
-  color: #24b1b0;
-  font-size: 16px;
   display: inline-block;
-  margin-bottom: 15px;
   margin-top: 4px;
+  margin-bottom: 15px;
+  color: #24b1b0;
+  font-size: 16px;
 }
 
 #settings_box .category_title svg {
-  fill: currentColor;
-  vertical-align: top;
-  margin-right: 5px;
   width: 18px;
   height: 18px;
+  margin-right: 5px;
+  vertical-align: top;
+  fill: currentColor;
 }
 
 #settings_box .category_subtitle {
+  max-width: 220px;
   color: #a9a8a8;
   font-size: 14px;
-  max-width: 220px;
 }
 
 /* checkbox switch */
@@ -134,34 +134,34 @@ label {
 }
 .switch input {
   position: absolute;
-  opacity: 0;
   width: 0;
   height: 0;
+  opacity: 0;
 }
 .switch .slider {
   position: absolute;
-  vertical-align: middle;
-  height: 0.3em;
-  left: 0.5em;
-  right: 0.5em;
   top: 50%;
+  right: 0.5em;
+  left: 0.5em;
+  height: 0.3em;
   margin-top: -0.15em;
+  vertical-align: middle;
   background-color: #4c4c4c;
-  transition: 0.4s;
   border-radius: 0.15em;
+  transition: 0.4s;
 }
 .switch .square {
   position: absolute;
-  content: "";
-  height: 1em;
-  width: 1em;
-  left: 0.5em;
   top: 50%;
+  left: 0.5em;
+  width: 1em;
+  height: 1em;
   margin-top: -0.5em;
-  background-color: #4c4c4c;
   color: #030713;
-  transition: 0.4s;
+  background-color: #4c4c4c;
   border-radius: 0.15em;
+  transition: 0.4s;
+  content: "";
 }
 .switch input + * {
   position: relative;
@@ -171,15 +171,15 @@ label {
   /* It's important to have a border (event transparent)
 To be able to apply an outline to this element later*/
   border-width: 1px;
-  border-color: transparent;
   border-style: solid;
+  border-color: transparent;
 }
 .switch input:checked + * .slider {
   background-color: #24b1b0;
 }
 .switch input:checked + * .square {
-  transform: translateX(1.6em);
   background-color: #24b1b0;
+  transform: translateX(1.6em);
 }
 
 .settings_box_item[data-disabled] {

package/src/client/ui/tooltips/tooltips.css

@@ -1,26 +1,26 @@
 .tooltip {
-  display: none;
-  background-color: rgb(94, 94, 94);
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
   position: absolute;
   bottom: 100%;
+  display: none;
+  max-width: 260px;
   margin-bottom: 6px;
   padding: 10px;
+  color: #fff;
   font-size: 14px;
-  max-width: 260px;
+  text-align: center;
+  background-color: rgb(94, 94, 94);
+  border-radius: 6px;
   cursor: default;
 }
 
 .tooltip::after {
-  content: "";
   position: absolute;
   top: 100%;
   left: 14px;
   border-width: 5px;
   border-style: solid;
   border-color: rgb(94, 94, 94) transparent transparent transparent;
+  content: "";
 }
 
 .tooltip[data-toolip-left] {
@@ -47,21 +47,21 @@
 
 .tooltip_action {
   display: inline-block;
+  margin-top: 6px;
+  padding: 3px 7px;
   border: 1px solid #a0a0a0;
   border-radius: 3px;
-  padding: 3px 7px;
-  margin-top: 6px;
 }
 
 .tooltip_action a {
-  vertical-align: middle;
   color: white;
   text-decoration: none;
+  vertical-align: middle;
 }
 
 .tooltip_icon {
-  fill: white;
   width: 20px;
   height: 20px;
   vertical-align: middle;
+  fill: white;
 }

package/src/jsenv_plugin_toolbar.js

@@ -8,9 +8,8 @@ export const jsenvPluginToolbar = ({
   animationsEnabled = true,
   notificationsEnabled = true,
 } = {}) => {
-  const toolbarInjectorClientFileUrl = import.meta.resolve(
-    "./client/toolbar_injector.js",
-  );
+  const toolbarInjectorClientFileUrl = import.meta
+    .resolve("./client/toolbar_injector.js");
   const toolbarHtmlClientFileUrl = import.meta.resolve("./client/toolbar.html");
   return {
     name: "jsenv:toolbar",