@xen-orchestra/web-core 0.28.0 → 0.30.0

package/lib/assets/css/typography/_utils.pcss

@@ -4,3 +4,14 @@
   text-overflow: ellipsis;
   min-width: 0;
 }
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}

package/lib/assets/no-result.svg

@@ -1,81 +1,277 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="982.48732" height="763.01413"
-     viewBox="0 0 982.48732 763.01413">
-  <circle cx="559.4329" cy="333.06116" r="40.02979" fill="#e6e6e6"/>
-  <path
-    d="M766.295,452.99465l-41.832-41.832a44.307,44.307,0,0,0-14.42627-61.92578,44.45758,44.45758,0,0,0-58.91358,12.23779,44.30652,44.30652,0,0,0,60.03321,62.99512l41.832,41.832A9.40939,9.40939,0,0,0,766.295,452.99465ZM709.59431,409.6011a31.68421,31.68421,0,1,1,9.27978-22.40381A31.58568,31.58568,0,0,1,709.59431,409.6011Z"
-    transform="translate(-108.75634 -68.49293)" fill="#3f3d56"/>
-  <path
-    d="M1069.529,514.69884C1176.50914,633.00725,866.39184,803.50707,615.8095,803.50707S191.86334,671.39983,162.09,514.69884C89.89987,134.75174,777.16735-106.74054,615.8095,225.89055,380.61181,710.73882,985.27984,421.5284,1069.529,514.69884Z"
-    transform="translate(-108.75634 -68.49293)" fill="#e6e6e6"/>
-  <path
-    d="M1021.529,542.69884C1128.50914,661.00725,818.39184,831.50707,567.8095,831.50707S143.86334,699.39983,114.09,542.69884C41.89987,162.75174,729.16735-78.74054,567.8095,253.89055,332.61181,738.73882,937.27984,449.5284,1021.529,542.69884Z"
-    transform="translate(-108.75634 -68.49293)" fill="#3f3d56"/>
-  <path
-    d="M258.35026,265.31823c-75.06741-3.30525-133.27133-19.49788-132.50668-36.86436.45844-10.41178,21.70324-18.7842,58.28677-22.96955a1,1,0,1,1,.22727,1.987c-34.46168,3.943-56.11733,12.01678-56.516,21.07051-.69148,15.70451,59.11433,31.63093,130.59659,34.77832s132.4564-7.461,133.14787-23.16554c.40032-9.09178-20.59681-19.06558-54.79775-26.0284a1.00008,1.00008,0,1,1,.3991-1.95993c36.3011,7.39058,56.85694,17.624,56.39672,28.0763C392.81953,257.60908,333.41767,268.62348,258.35026,265.31823Z"
-    transform="translate(-108.75634 -68.49293)" fill="#6c63ff"/>
-  <path
-    d="M191.67927,268.22672a76.98277,76.98277,0,0,0,133.03578,5.52178A1211.97551,1211.97551,0,0,1,191.67927,268.22672Z"
-    transform="translate(-108.75634 -68.49293)" fill="#6c63ff"/>
-  <path d="M333.019,252.71347a76.997,76.997,0,1,0-147.74945-5.70562A572.23325,572.23325,0,0,0,333.019,252.71347Z"
-        transform="translate(-108.75634 -68.49293)" fill="#6c63ff"/>
-  <circle cx="168.83353" cy="123.60073" r="9" fill="#fff"/>
-  <circle cx="122.51347" cy="152.59128" r="15" fill="#fff"/>
-  <circle cx="348.90479" cy="142.89813" r="9.99975" fill="#6c63ff"/>
-  <circle cx="122.90479" cy="452.89813" r="6.00007" fill="#e6e6e6"/>
-  <circle cx="542.90479" cy="658.89813" r="6.00007" fill="#e6e6e6"/>
-  <circle cx="151.90479" cy="339.89813" r="3.00007" fill="#e6e6e6"/>
-  <circle cx="399.90479" cy="563.89813" r="3.00007" fill="#e6e6e6"/>
-  <circle cx="850.90479" cy="534.89813" r="3.00007" fill="#e6e6e6"/>
-  <circle cx="709.90479" cy="623.89813" r="3.00007" fill="#e6e6e6"/>
-  <circle cx="562.90479" cy="515.89813" r="3.00007" fill="#e6e6e6"/>
-  <circle cx="372.90479" cy="219.89813" r="3.00007" fill="#e6e6e6"/>
-  <circle cx="396.90479" cy="71.89813" r="3.00007" fill="#e6e6e6"/>
-  <circle cx="382.90479" cy="694.89813" r="3.00007" fill="#e6e6e6"/>
-  <circle cx="234.90479" cy="631.89813" r="3.00007" fill="#e6e6e6"/>
-  <circle cx="703.90479" cy="523.89813" r="3.00007" fill="#e6e6e6"/>
-  <circle cx="148.3737" cy="224.7987" r="9" fill="#fff"/>
-  <path
-    d="M460.6612,431.39114c0,26.88035-41.55939,89.516-53.70465,107.24669a3.99188,3.99188,0,0,1-6.5907,0c-12.14526-17.73066-53.70465-80.36634-53.70465-107.24669a57,57,0,1,1,114,0Z"
-    transform="translate(-108.75634 -68.49293)" fill="#fff"/>
-  <circle cx="294.90486" cy="358.8982" r="29" fill="#6c63ff"/>
-  <ellipse cx="294.40486" cy="496.3982" rx="33.5" ry="6.5" fill="#fff"/>
-  <path
-    d="M925.60957,386.41245a10.52681,10.52681,0,0,0-.64106,1.52851l-47.783,13.27682-8.61085-8.42662L854.1589,404.12429,867.953,420.52338a8,8,0,0,0,9.35283,2.169l51.61632-22.78484a10.49709,10.49709,0,1,0-3.31256-13.49509Z"
-    transform="translate(-108.75634 -68.49293)" fill="#ffb8b8"/>
-  <path
-    d="M875.50191,401.996l-17.9352,13.95958a4.5,4.5,0,0,1-6.68163-1.33719L839.73843,394.891a12.49741,12.49741,0,0,1,19.76923-15.29426l16.33819,15.59379a4.5,4.5,0,0,1-.34394,6.80543Z"
-    transform="translate(-108.75634 -68.49293)" fill="#6c63ff"/>
-  <path
-    d="M930.19158,379.80967l18.18807,8.1829a3.14913,3.14913,0,0,1,1.57976,4.16384l-2.15339,4.78633a1.05293,1.05293,0,0,1,.52659,1.38795l-.86136,1.91453a1.05292,1.05292,0,0,1-1.388.52659l-.86136,1.91453a1.05292,1.05292,0,0,1,.52659,1.388l-.86136,1.91453a1.0529,1.0529,0,0,1-1.38794.52659L931.8709,432.36162a3.14914,3.14914,0,0,1-4.16384,1.57977l-18.18807-8.1829a3.14915,3.14915,0,0,1-1.57977-4.16384l18.08852-40.20522A3.14913,3.14913,0,0,1,930.19158,379.80967Z"
-    transform="translate(-108.75634 -68.49293)" fill="#3f3d56"/>
-  <path
-    d="M912.82137,423.21181l14.59056,6.57106a3.03424,3.03424,0,0,0,3.99937-1.51155l6.73892-14.98951,2.34078-5.196,6.09875-13.562a3.026,3.026,0,0,0-1.51149-3.98886l-4.58726-2.06786L930.47694,383.964a3.02112,3.02112,0,0,0-3.98861,1.522L920.589,398.59669l-6.7179,14.92653-2.56118,5.69979A3.022,3.022,0,0,0,912.82137,423.21181Z"
-    transform="translate(-108.75634 -68.49293)" fill="#f2f2f2"/>
-  <polygon points="773.577 540.443 785.837 540.442 791.67 493.154 773.575 493.155 773.577 540.443" fill="#ffb8b8"/>
-  <path d="M879.2066,604.93325l24.1438-.001h.001a15.38605,15.38605,0,0,1,15.38648,15.38623v.5l-39.53052.00146Z"
-        transform="translate(-108.75634 -68.49293)" fill="#2f2e41"/>
-  <polygon points="805.577 537.443 817.837 537.442 823.67 490.154 805.575 490.155 805.577 537.443" fill="#ffb8b8"/>
-  <path d="M911.2066,601.93325l24.1438-.001h.001a15.38605,15.38605,0,0,1,15.38648,15.38623v.5l-39.53052.00146Z"
-        transform="translate(-108.75634 -68.49293)" fill="#2f2e41"/>
-  <path
-    d="M827.34138,497.97109a39.41035,39.41035,0,0,0,36.8999,26.81006l.62012.01c6.32959.18,13.75976-1.86,21.0498-4.79,14.3999-5.79,28.23-15.06,31.8999-17.61l-6.21972,59.79-2.52,24.24a4.51415,4.51415,0,0,0,4.48,4.97h15.52978a4.50547,4.50547,0,0,0,4.35987-3.36l25.64013-97.65a19.032,19.032,0,0,0-19.71-23.83l-53.25976,3.65,3.71972-14.88-47.54-3.16-.13965.1c-1.14013.83-2.25,1.7-3.31005,2.61a40.27149,40.27149,0,0,0-6.99024,7.66A38.48741,38.48741,0,0,0,827.34138,497.97109Z"
-    transform="translate(-108.75634 -68.49293)" fill="#2f2e41"/>
-  <path
-    d="M827.34138,497.97109a39.41035,39.41035,0,0,0,36.8999,26.81006,196.14623,196.14623,0,0,0,22.56982-13.39l-.8999,8.61-7.83984,75.42a4.51415,4.51415,0,0,0,4.48,4.97h15.52978a4.50547,4.50547,0,0,0,4.35987-3.36l9.15039-34.85,16.48974-62.8a19.032,19.032,0,0,0-19.71-23.83l-53.25976,3.65,3.71972-14.88-26.98-1.79A38.48741,38.48741,0,0,0,827.34138,497.97109Z"
-    transform="translate(-108.75634 -68.49293)" fill="#2f2e41"/>
-  <path
-    d="M838.7735,458.32082l-.35766-.043-8.29517-40.78515c-.071-.354-6.85229-35.5332,13.93677-53.92432l.36182-2.51709a4.50032,4.50032,0,0,1,5.78711-3.65771l19.58471,6.0747a4.49086,4.49086,0,0,1,3.019,5.4419l-1.90381,7.2417c2.63989,3.1001,33.7146,40.51221,22.89038,69.33545L888.9488,464.439Z"
-    transform="translate(-108.75634 -68.49293)" fill="#6c63ff"/>
-  <path
-    d="M920.09389,426.48986a10.52591,10.52591,0,0,0-1.32908.99037l-47.89739-12.858-3.13136-11.634-18.17538,2.43095,3.54192,21.13437a8,8,0,0,0,6.95146,6.62248l56.032,6.619a10.4971,10.4971,0,1,0,4.00785-13.30516Z"
-    transform="translate(-108.75634 -68.49293)" fill="#ffb8b8"/>
-  <path
-    d="M869.022,414.43646,846.48068,417.34a4.5,4.5,0,0,1-5.07405-4.54822l.42987-22.65461a12.49741,12.49741,0,0,1,24.79917-3.12052l6.14215,21.73423a4.5,4.5,0,0,1-3.75583,5.68559Z"
-    transform="translate(-108.75634 -68.49293)" fill="#6c63ff"/>
-  <circle cx="753.92061" cy="258.80372" r="24.56103" fill="#ffb8b8"/>
-  <path
-    d="M861.3848,329.34791l-3.075-5.59966c-5.82461,23.73215,4.46383,43.37315,4.46383,43.37315l-39.93243-18.601.38033-6.59991-3.95134,4.484-5.67747-3.12872-.74992-4.28064-4.28563,1.06158,15.64354-28.38736c15.18238-27.01314,37.25508-16.69982,37.25508-16.69982,35.11544-1.66934,30.82681,32.97543,30.82681,32.97543Z"
-    transform="translate(-108.75634 -68.49293)" fill="#2f2e41"/>
-  <ellipse cx="556.1612" cy="472.39114" rx="12.17949" ry="47.5"
-           transform="translate(-275.75171 306.36236) rotate(-32.66242)" fill="#3f3d56"/>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Dome" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 397.13 396.85">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: #1e1b4c;
+      }
+
+      .cls-2 {
+      fill: #fff;
+      }
+
+      .cls-3 {
+      fill: #7e7ca3;
+      }
+
+      .cls-4 {
+      opacity: .14;
+      }
+
+      .cls-4, .cls-5 {
+      fill: #8f84ff;
+      }
+
+      .cls-6 {
+      fill: #535084;
+      }
+
+      .cls-7 {
+      fill: #2ca878;
+      }
+
+      .cls-8 {
+      fill: #7455e7;
+      }
+
+      .cls-9 {
+      fill: #f0f;
+      }
+
+      .cls-10 {
+      fill: #fffce5;
+      }
+
+      .cls-11 {
+      fill: #1a1b38;
+      }
+
+      .cls-12 {
+      fill: #be1621;
+      }
+    </style>
+  </defs>
+  <path class="cls-4"
+        d="M335.6,270.5c5.93-26.71-4.17-74.78-64.42-127.89-60.26-53.11-137.16-34.9-137.16-34.9,27.12-19.7,82.16-6.98,82.16-6.98-15.14-12.76-89.47-41.08-125.96-5.88-32.1,30.96,22.73,110.72,22.73,110.72-29-23.09-44.9-77.72-44.9-77.72,0,0-8.77,68.44,58.89,123.86,65.43,53.59,141.89,41.06,141.89,41.06-40.46,15.34-88.36,2.36-89.31,2.11.58.56,48.77,47,114.66,20.34,66.29-26.83-5.5-122.23-5.5-122.23,28.63,19.54,46.92,77.51,46.92,77.51ZM301.08,252.19s-13.53-42.89-34.72-57.37c1.1,1.48,52.62,70.82,4.06,90.47-49.08,19.86-84.89-15.07-84.89-15.07,0,0,35.87,9.92,66.12-1.55,0,0-56.6,9.27-105.04-30.4-50.08-41.02-43.59-91.69-43.59-91.69,0,0,11.76,40.44,33.23,57.54,0,0-40.59-59.05-16.83-81.97,27.02-26.06,82.05-5.09,93.26,4.35,0,0-40.75-9.41-60.83,5.17,0,0,56.93-13.48,101.54,25.84,44.6,39.32,52.08,74.9,47.69,94.68Z"/>
+  <path class="cls-5"
+        d="M301.08,252.19c4.39-19.78-3.09-55.36-47.69-94.68-44.61-39.32-101.54-25.84-101.54-25.84,20.08-14.58,60.83-5.17,60.83-5.17-11.21-9.44-66.24-30.41-93.26-4.35-23.76,22.92,16.83,81.97,16.83,81.97-21.47-17.1-33.23-57.54-33.23-57.54,0,0-6.49,50.67,43.59,91.69,48.44,39.67,105.04,30.4,105.04,30.4-30.25,11.47-66.12,1.55-66.12,1.55,0,0,35.81,34.93,84.89,15.07,48.56-19.65-2.96-88.99-4.06-90.47,21.19,14.48,34.72,57.37,34.72,57.37ZM275.86,238.81s-10.07-31.92-25.83-42.68c0,0,39.53,52.52,3.03,67.29-36.06,14.59-62.49-10.57-63.13-11.19.67.18,26.96,7.26,49.17-1.16,0,0-42.1,6.89-78.12-22.61-37.25-30.51-32.42-68.2-32.42-68.2,0,0,8.75,30.08,24.72,42.8,0,0-30.19-43.92-12.52-60.96,20.1-19.38,61.02-3.79,69.36,3.23,0,0-30.28-6.99-45.22,3.83,1.05-.24,42.74-9.64,75.49,19.23,33.18,29.24,38.74,55.71,35.47,70.42Z"/>
+  <path class="cls-11"
+        d="M275.86,238.81c3.27-14.71-2.29-41.18-35.47-70.42-32.75-28.87-74.44-19.47-75.49-19.23,14.94-10.82,45.22-3.83,45.22-3.83-8.34-7.02-49.26-22.61-69.36-3.23-17.67,17.04,12.52,60.96,12.52,60.96-15.97-12.72-24.72-42.8-24.72-42.8,0,0-4.83,37.69,32.42,68.2,36.02,29.5,78.12,22.61,78.12,22.61-22.21,8.42-48.5,1.34-49.17,1.16.64.62,27.07,25.78,63.13,11.19,36.5-14.77-3.03-67.29-3.03-67.29,15.76,10.76,25.83,42.68,25.83,42.68ZM234.05,224.46c-8.33,10.25-28.64,7.55-45.36-6.04-16.73-13.58-23.54-32.91-15.22-43.16,8.33-10.25,28.64-7.54,45.36,6.04,16.73,13.59,23.54,32.91,15.22,43.16Z"/>
+  <path class="cls-3"
+        d="M218.83,181.3c-16.72-13.58-37.03-16.29-45.36-6.04-8.32,10.25-1.51,29.58,15.22,43.16,16.72,13.59,37.03,16.29,45.36,6.04,8.32-10.25,1.51-29.57-15.22-43.16ZM225.01,217.12c-5.84,7.2-20.09,5.3-31.83-4.23-11.74-9.54-16.52-23.1-10.67-30.29,5.84-7.19,20.09-5.3,31.83,4.24,11.74,9.53,16.52,23.09,10.67,30.28Z"/>
+  <path class="cls-6"
+        d="M214.34,186.84c-11.74-9.54-25.99-11.43-31.83-4.24-5.85,7.19-1.07,20.75,10.67,30.29,11.74,9.53,25.99,11.43,31.83,4.23,5.85-7.19,1.07-20.75-10.67-30.28ZM218.93,212.19c-4.17,5.13-14.34,3.78-22.72-3.03s-11.79-16.49-7.62-21.62c4.17-5.14,14.34-3.78,22.72,3.02,8.38,6.81,11.79,16.49,7.62,21.63Z"/>
+  <path class="cls-1"
+        d="M211.31,190.56c-8.38-6.8-18.55-8.16-22.72-3.02-4.17,5.13-.76,14.81,7.62,21.62s18.55,8.16,22.72,3.03c4.17-5.14.76-14.82-7.62-21.63ZM212.42,207.12c-2.45,2.93-8.32,2.06-13.11-1.95-4.78-4.01-6.67-9.63-4.21-12.56,2.45-2.93,8.32-2.06,13.11,1.94,4.78,4.01,6.67,9.63,4.21,12.57Z"/>
+  <g>
+    <path class="cls-11"
+          d="M212.42,207.12c-2.45,2.93-8.32,2.06-13.11-1.95-4.78-4.01-6.67-9.63-4.21-12.56,2.45-2.93,8.32-2.06,13.11,1.94,4.78,4.01,6.67,9.63,4.21,12.57Z"/>
+    <path class="cls-11"
+          d="M208.15,209.36c-.47,0-.97-.04-1.48-.11-2.57-.38-5.29-1.69-7.68-3.69-2.38-2-4.15-4.45-4.97-6.91-.85-2.54-.6-4.8.7-6.36,2.62-3.14,8.82-2.29,13.81,1.88,4.98,4.18,6.9,10.14,4.27,13.27h0c-1.05,1.26-2.67,1.92-4.66,1.92ZM199.39,191.36c-1.63,0-3.02.51-3.91,1.57-1.07,1.28-1.26,3.19-.52,5.4.77,2.28,2.42,4.58,4.67,6.46,2.25,1.88,4.8,3.11,7.18,3.47,2.31.34,4.15-.18,5.22-1.45h0c2.27-2.72.41-8.04-4.15-11.87-2.79-2.33-5.94-3.57-8.5-3.57Z"/>
+  </g>
+  <polygon class="cls-12"
+           points="194.8 106.15 194.1 108.49 191.76 109.19 194.1 109.88 194.8 112.23 195.49 109.88 197.83 109.19 195.49 108.49 194.8 106.15"/>
+  <polygon class="cls-12"
+           points="346.78 285.14 345.74 288.63 342.25 289.66 345.74 290.7 346.78 294.19 347.81 290.7 351.31 289.66 347.81 288.63 346.78 285.14"/>
+  <polygon class="cls-5"
+           points="75.61 181.78 74.58 185.27 71.09 186.31 74.58 187.34 75.61 190.83 76.65 187.34 80.14 186.31 76.65 185.27 75.61 181.78"/>
+  <polygon class="cls-5"
+           points="120.86 227.03 119.82 230.53 116.33 231.56 119.82 232.6 120.86 236.09 121.89 232.6 125.38 231.56 121.89 230.53 120.86 227.03"/>
+  <polygon class="cls-7"
+           points="218.94 87.14 217.91 90.64 214.42 91.67 217.91 92.71 218.94 96.2 219.98 92.71 223.47 91.67 219.98 90.64 218.94 87.14"/>
+  <polygon class="cls-7"
+           points="167.19 283.62 165.46 289.48 159.6 291.21 165.46 292.95 167.19 298.81 168.93 292.95 174.79 291.21 168.93 289.48 167.19 283.62"/>
+  <polygon class="cls-12"
+           points="87.55 165.87 86.77 168.5 84.14 169.28 86.77 170.06 87.55 172.69 88.33 170.06 90.97 169.28 88.33 168.5 87.55 165.87"/>
+  <polygon class="cls-5"
+           points="289.12 296.3 287.74 300.94 283.1 302.31 287.74 303.69 289.12 308.33 290.49 303.69 295.13 302.31 290.49 300.94 289.12 296.3"/>
+  <polygon class="cls-7"
+           points="52.62 220.15 51.25 224.79 46.61 226.16 51.25 227.54 52.62 232.18 54 227.54 58.64 226.16 54 224.79 52.62 220.15"/>
+  <polygon class="cls-5"
+           points="304.1 167.69 302.73 172.33 298.09 173.71 302.73 175.08 304.1 179.72 305.48 175.08 310.12 173.71 305.48 172.33 304.1 167.69"/>
+  <path class="cls-2"
+        d="M227.11,166.36c.52,11.74-7.42,21.72-18.24,24.36l-4.89,7.71c-.38.59-1.24.59-1.61,0l-4.88-7.7c-10.49-2.55-18.27-12.01-18.27-23.28,0-13.79,11.65-24.87,25.64-23.91,12.06.82,21.72,10.76,22.25,22.83Z"/>
+  <path class="cls-12"
+        d="M215.67,164.47c0-7.53-6.81-13.48-14.61-12.01-4.91.92-8.81,4.93-9.67,9.84-.54,3.07.1,5.96,1.5,8.35h0l.03.05c.47.79,1.06,1.36,1.65,2.19l7.1,9.41c.88,1.17,2.64,1.17,3.53,0l6.99-9.25s1.3-1.55,1.78-2.35l.03-.03h0c1.07-1.82,1.69-3.92,1.69-6.18ZM203.44,169.8c-2.97,0-5.38-2.41-5.38-5.38s2.41-5.38,5.38-5.38,5.38,2.41,5.38,5.38-2.41,5.38-5.38,5.38Z"/>
+  <circle class="cls-2" cx="326.64" cy="2.28" r="1.62"/>
+  <path class="cls-5"
+        d="M338.59,275.56c-.15.51-.37,1.02-.65,1.53-1.78,3.2-6.11,6.4-11.67,8.23-5.25,1.73-10.33,1.82-13.69.55-.77-.29-1.45-.66-2.03-1.09,4.31.48,9.55-.1,14.92-1.86,5.37-1.77,9.93-4.41,13.11-7.36Z"/>
+  <path class="cls-5"
+        d="M343.07,266.71c-.33,2.26-1.86,4.68-4.28,6.96-3.24,3.06-8.08,5.88-13.82,7.76-2.76.91-5.49,1.52-8.07,1.85-2.77.35-5.37.38-7.66.1-3.3-.4-5.96-1.44-7.57-3.06.78-5.29,8.07-11.43,18.09-14.72,1.04-.34,2.08-.64,3.11-.9,8.83-2.23,16.81-1.39,20.19,2.01Z"/>
+  <path class="cls-8"
+        d="M343.42,267.09c-.12,2.76-1.89,5.74-4.84,8.47-3.18,2.94-7.74,5.59-13.11,7.36-5.37,1.77-10.61,2.34-14.92,1.86-3.99-.44-7.18-1.8-8.92-3.95.01-.17.03-.34.05-.51,1.61,1.62,4.27,2.66,7.57,3.06,4.42.54,9.99-.07,15.73-1.95,5.74-1.89,10.58-4.7,13.82-7.76,2.42-2.28,3.94-4.7,4.28-6.96.12.12.24.25.35.38Z"/>
+  <path class="cls-10"
+        d="M332.53,265.4c.12.5.22,1.01.28,1.51-1.21,1.43-2.71,2.75-4.45,3.89-1.76,1.16-3.77,2.14-5.97,2.86s-4.37,1.12-6.47,1.24c-2.09.12-4.1-.05-5.93-.48-.24-.42-.45-.86-.65-1.32.01-.01.03-.03.04-.05,2.08.51,4.39.68,6.8.48,1.88-.16,3.82-.55,5.77-1.19,1.95-.64,3.76-1.49,5.37-2.48,2.08-1.28,3.84-2.8,5.21-4.46Z"/>
+  <path class="cls-12"
+        d="M343.42,267.09c-.12,2.76-1.89,5.74-4.84,8.47-3.18,2.94-7.74,5.59-13.11,7.36-5.37,1.77-10.61,2.34-14.92,1.86-3.99-.44-7.18-1.8-8.92-3.95.01-.17.03-.34.05-.51,1.61,1.62,4.27,2.66,7.57,3.06,4.42.54,9.99-.07,15.73-1.95,5.74-1.89,10.58-4.7,13.82-7.76,2.42-2.28,3.94-4.7,4.28-6.96.12.12.24.25.35.38Z"/>
+  <path class="cls-12"
+        d="M316.62,256.03c-6.37,2.1-9.8,9.14-7.72,15.8h0c.02.06.04.12.06.19.11.34.24.68.38,1.01.02,0,.05.01.07.02h0c3.7.92,8.13.75,12.57-.71,4.46-1.47,8.15-3.99,10.58-6.94,0-.02-.01-.05-.02-.07h0c-.08-.32-.17-.65-.28-.97-2.21-6.71-9.21-10.44-15.65-8.32Z"/>
+  <g>
+    <polygon class="cls-9"
+             points="76.12 82.81 75.43 85.15 73.08 85.85 75.43 86.54 76.12 88.89 76.82 86.54 79.16 85.85 76.82 85.15 76.12 82.81"/>
+    <polygon class="cls-9"
+             points="128.94 276.01 128.16 278.64 125.53 279.42 128.16 280.2 128.94 282.83 129.72 280.2 132.35 279.42 129.72 278.64 128.94 276.01"/>
+    <polygon class="cls-9"
+             points="104.14 80.16 103.1 83.65 99.61 84.68 103.1 85.72 104.14 89.21 105.17 85.72 108.66 84.68 105.17 83.65 104.14 80.16"/>
+    <path class="cls-9"
+          d="M281.95,291.05c.09.05.19.11.28.16.23.13.23.49,0,.62-.09.05-.19.11-.28.16-.36.21-.82-.06-.82-.47,0-.42.46-.68.82-.47Z"/>
+    <path class="cls-9" d="M240.23,137.23c.98,0,.98,1.53,0,1.53-.98,0-.98-1.53,0-1.53Z"/>
+    <path class="cls-9" d="M110.38,283.97c.9,0,.9,1.4,0,1.4s-.9-1.4,0-1.4Z"/>
+    <path class="cls-9"
+          d="M96.46,261.11c.45,0,.75.36.78.78,0,.1,0,.18-.02.28-.05.41-.31.76-.76.76s-.71-.35-.76-.76c-.01-.1-.02-.18-.02-.28.03-.42.33-.78.78-.78Z"/>
+    <path class="cls-9" d="M162.11,88.95c.83,0,.83,1.29,0,1.29s-.83-1.29,0-1.29Z"/>
+    <path class="cls-9" d="M174.38,103.11c1.18,0,1.18,1.83,0,1.83s-1.18-1.83,0-1.83Z"/>
+    <path class="cls-9"
+          d="M165.83,112.12c.12,0,.25-.01.37-.02.14,0,.14.23,0,.22-.12,0-.25-.01-.37-.02-.11,0-.11-.17,0-.17Z"/>
+    <path class="cls-9" d="M116.33,118.19c.93,0,.93,1.44,0,1.44-.93,0-.93-1.44,0-1.44Z"/>
+    <path class="cls-9"
+          d="M222.37,112.15l.19-.26c.3-.41.82-.41,1.11,0l.19.26c.39.55-.14,1.3-.74,1.3s-1.14-.75-.74-1.3Z"/>
+    <path class="cls-9"
+          d="M207.52,101.08c.06-.06.13-.12.19-.18.47-.43,1.27-.15,1.27.52s-.8.95-1.27.52c-.06-.06-.13-.12-.19-.18-.19-.17-.19-.52,0-.69Z"/>
+    <path class="cls-9" d="M212.7,118.91c.48,0,.48.74,0,.74s-.48-.74,0-.74Z"/>
+    <path class="cls-9" d="M235.58,125.42c.83,0,.83,1.29,0,1.29s-.83-1.29,0-1.29Z"/>
+    <path class="cls-9"
+          d="M121.63,102.56c.15-.11.3-.18.48-.21.5-.1,1.01.22,1.01.77,0,.55-.51.86-1.01.77-.18-.04-.33-.1-.48-.21-.41-.3-.41-.81,0-1.11Z"/>
+    <path class="cls-9"
+          d="M302.17,159.15c.34-.22.67-.31,1.06-.16.47.18.47.77,0,.95-.39.15-.72.06-1.06-.16-.23-.15-.23-.47,0-.62Z"/>
+    <path class="cls-9" d="M292.68,157.03c.73,0,.73,1.13,0,1.13s-.73-1.13,0-1.13Z"/>
+    <path class="cls-9" d="M289.71,168.52c.79,0,.79,1.22,0,1.22s-.79-1.22,0-1.22Z"/>
+    <path class="cls-9" d="M281.15,169.61c.82,0,.82,1.26,0,1.26s-.82-1.26,0-1.26Z"/>
+    <path class="cls-9" d="M284.5,180.08c.75,0,.75,1.16,0,1.16s-.75-1.16,0-1.16Z"/>
+    <path class="cls-9" d="M271.74,156.92c.87,0,.87,1.35,0,1.35s-.87-1.35,0-1.35Z"/>
+    <path class="cls-9"
+          d="M305.83,210.63c.26.23.37.53.49.85.14.36-.38.51-.58.24-.19-.25-.36-.49-.41-.81-.04-.29.26-.49.49-.29Z"/>
+    <path class="cls-9"
+          d="M301.03,198.36c.11.14.22.28.33.42.13.17-.06.36-.23.23-.14-.11-.28-.22-.42-.33-.23-.18.14-.56.32-.32Z"/>
+    <path class="cls-9"
+          d="M310.53,199.01c.09.05.19.1.28.15.35.19.35.75,0,.94-.09.05-.19.1-.28.15-.48.25-1.08-.06-1.08-.62,0-.56.61-.87,1.08-.62Z"/>
+    <path class="cls-9" d="M311.28,182.54c1.42,0,1.42,2.2,0,2.2s-1.42-2.2,0-2.2Z"/>
+    <path class="cls-9"
+          d="M322.32,177.55c.02-.09.04-.17.07-.26.12-.42.73-.42.85,0,.03.09.05.17.07.26.08.32-.15.65-.49.65s-.57-.33-.49-.65Z"/>
+    <path class="cls-9" d="M321.7,158.6c.63,0,.63.98,0,.98s-.63-.98,0-.98Z"/>
+    <path class="cls-9"
+          d="M284.68,136.84c.15.08.3.17.44.25.28.16.32.55.1.77-.22.22-.61.18-.77-.1-.08-.15-.17-.3-.25-.44-.17-.31.17-.65.48-.48Z"/>
+    <path class="cls-9" d="M265.9,122.29c.91,0,.91,1.42,0,1.42s-.91-1.42,0-1.42Z"/>
+    <path class="cls-9"
+          d="M246.08,99.94c.11-.05.22-.09.33-.14.32-.13.66.2.66.5,0,.31-.34.64-.66.5-.11-.05-.22-.09-.33-.14-.36-.15-.36-.59,0-.74Z"/>
+    <path class="cls-9"
+          d="M236.42,105.41c.1.06.18.11.29.13.57.1.7.89.33,1.26s-1.16.24-1.26-.33c-.02-.11-.07-.19-.13-.29-.27-.49.27-1.03.76-.76Z"/>
+    <path class="cls-9" d="M224.98,100.88c.7,0,.7,1.09,0,1.09s-.7-1.09,0-1.09Z"/>
+    <path class="cls-9"
+          d="M233.07,93.29c.11-.05.22-.09.33-.14.29-.12.61.18.61.46,0,.28-.31.58-.61.46-.11-.05-.22-.09-.33-.14-.32-.13-.32-.52,0-.65Z"/>
+    <path class="cls-9"
+          d="M223.12,79.12c.74,0,.98.98.37,1.36,0,0,0,0,0,0-.19.24-.53.24-.72,0,0,0,0,0,0,0-.61-.38-.37-1.36.37-1.36Z"/>
+    <path class="cls-9" d="M208.98,75.58c.7,0,.7,1.09,0,1.09s-.7-1.09,0-1.09Z"/>
+    <path class="cls-9"
+          d="M208.4,92.14c.09-.05.19-.1.28-.15.39-.21.89.05.89.51,0,.46-.5.71-.89.51-.09-.05-.19-.1-.28-.15-.27-.14-.27-.57,0-.72Z"/>
+    <path class="cls-9"
+          d="M185.69,88.25c.17.02.31.05.45.15.28.19.28.57,0,.75-.14.09-.28.13-.45.15-.34.05-.69-.14-.69-.53,0-.39.35-.57.69-.53Z"/>
+    <path class="cls-9" d="M240.23,87.01c.84,0,.84,1.31,0,1.31s-.84-1.31,0-1.31Z"/>
+    <path class="cls-9" d="M248.04,110.27c.59,0,.59.92,0,.92s-.59-.92,0-.92Z"/>
+    <path class="cls-9"
+          d="M332.58,303.01c.16.01.32.04.48.07.71.15.71,1.28,0,1.43-.16.03-.31.06-.48.07-1.02.07-1.02-1.65,0-1.57Z"/>
+    <path class="cls-9" d="M319.47,316.24c.75,0,.75,1.16,0,1.16s-.75-1.16,0-1.16Z"/>
+    <path class="cls-9" d="M354.07,224.56c.96,0,.96,1.48,0,1.48-.96,0-.96-1.48,0-1.48Z"/>
+    <path class="cls-9"
+          d="M322.83,200.61c.05-.19.18-.36.35-.46.3-.17.68-.12.92.12.37.37.21.92-.13,1.18,0,.21-.15.41-.41.42-.49.02-.81-.49-.75-.95-.02-.11-.01-.21.02-.31Z"/>
+    <path class="cls-9"
+          d="M270.55,309.54c.7.41.73,1.5,0,1.9-.31.17-.61.27-.95.09-.4-.22-.71-.55-.71-1.04,0-.83.94-1.37,1.66-.95Z"/>
+    <path class="cls-9"
+          d="M129.98,321.92c-.14.05-.25.11-.36.19-.1.02-.21.04-.31.06-.48.09-.48.88,0,.97.1.02.21.04.31.06.11.08.22.15.36.19.47.16.97-.26.97-.74s-.49-.9-.97-.74Z"/>
+    <path class="cls-9"
+          d="M113.09,315.56s-.07-.06-.1-.09c-.43-.38-1.16-.14-1.16.48s.73.86,1.16.48c.03-.03.07-.06.1-.09.22-.19.22-.59,0-.79Z"/>
+    <path class="cls-9"
+          d="M336.33,239.84c.05-.17.12-.33.22-.47.27-.39.79-.39,1.05,0,.1.15.16.3.22.47.15.48-.26.98-.75.98s-.9-.5-.75-.98Z"/>
+    <path class="cls-9"
+          d="M172.33,257.7l.27-.18c.39-.26.9.08.9.52,0,.43-.52.77-.9.52l-.27-.18c-.25-.17-.25-.51,0-.68Z"/>
+    <path class="cls-9" d="M293.23,282.43c.52,0,.52.81,0,.81s-.52-.81,0-.81Z"/>
+    <path class="cls-9" d="M207.86,286.31c.97,0,.97,1.5,0,1.5s-.97-1.5,0-1.5Z"/>
+    <path class="cls-9" d="M191.12,289.66c.48,0,.48.74,0,.74s-.48-.74,0-.74Z"/>
+    <path class="cls-9"
+          d="M173.49,272.55c.14.1.28.2.42.3.27.19.36.57.11.82-.25.25-.63.17-.82-.11-.1-.14-.2-.28-.3-.42-.25-.35.25-.85.6-.6Z"/>
+    <path class="cls-9"
+          d="M155.68,275.29s0-.02.01-.03c.15-.35.77-.35.92,0,0,.01.01.02.02.04.13.1.23.22.28.4.11.41-.14.85-.55.97-.41.11-.85-.14-.97-.55-.09-.33.04-.63.28-.82Z"/>
+    <path class="cls-9" d="M138.67,250.8c.7,0,.7,1.09,0,1.09s-.7-1.09,0-1.09Z"/>
+    <path class="cls-9"
+          d="M153.18,239.95c.55,0,.78.65.43,1.04.04-.05.03-.03-.01.06-.16.41-.68.41-.84,0-.04-.09-.05-.11-.01-.06-.35-.39-.12-1.04.43-1.04Z"/>
+    <path class="cls-9" d="M158.39,255.15c.37,0,.37.57,0,.57s-.37-.57,0-.57Z"/>
+    <path class="cls-9" d="M185.54,262.02c1.11,0,1.11,1.72,0,1.72s-1.11-1.72,0-1.72Z"/>
+    <path class="cls-9"
+          d="M255.61,298.13c.46,0,.69.48.5.87-.05.1-.09.19-.14.29-.13.27-.58.27-.72,0-.05-.1-.09-.19-.14-.29-.19-.38.04-.87.5-.87Z"/>
+    <path class="cls-9" d="M181.82,281.49c.46,0,.46.72,0,.72s-.46-.72,0-.72Z"/>
+    <path class="cls-9" d="M164.34,268.18c.84,0,.84,1.31,0,1.31s-.84-1.31,0-1.31Z"/>
+    <path class="cls-9" d="M141.27,100.53c.67,0,.67,1.05,0,1.05s-.67-1.05,0-1.05Z"/>
+    <path class="cls-9"
+          d="M122.05,82.38c.22.05.41.1.59.23.36.24.46.74.14,1.06-.33.33-.82.22-1.06-.14-.13-.19-.18-.38-.23-.59-.08-.35.22-.64.56-.56Z"/>
+    <path class="cls-9"
+          d="M117.26,92.64c.46.19.88.56.73,1.12-.05.18-.2.33-.38.38-.55.15-.93-.27-1.12-.73-.17-.42.35-.93.76-.76Z"/>
+    <path class="cls-9"
+          d="M86.36,90.99l.26-.19c.42-.3,1,.11,1,.57,0,.47-.58.88-1,.57-.09-.06-.17-.13-.26-.19-.29-.21-.29-.57,0-.77Z"/>
+    <path class="cls-9"
+          d="M79.52,73.16c.66,0,.94.78.52,1.25-.06.06-.12.13-.18.19-.17.19-.51.19-.68,0-.06-.06-.12-.13-.18-.19-.42-.46-.14-1.25.52-1.25Z"/>
+    <path class="cls-9" d="M102.59,72.65c.65,0,.65,1,0,1s-.65-1,0-1Z"/>
+    <path class="cls-9" d="M124.16,67c.73,0,.73,1.13,0,1.13s-.73-1.13,0-1.13Z"/>
+    <path class="cls-9" d="M97.75,98.3c.67,0,.67,1.05,0,1.05s-.67-1.05,0-1.05Z"/>
+    <path class="cls-9"
+          d="M72.45,73.73c.47,0,.7.58.38.91.02.03.02.06-.02.09-.1.35-.61.35-.71,0-.04-.04-.04-.07-.02-.09-.32-.33-.09-.91.38-.91Z"/>
+    <path class="cls-9"
+          d="M42.55,144.81c.44-.44,1.23-.12,1.23.51,0,0,0,0,0,0,.02.04.04.09.07.13.23.43-.22.88-.66.66-.04-.02-.09-.04-.13-.07,0,0,0,0,0,0-.63,0-.95-.78-.51-1.23Z"/>
+    <path class="cls-9" d="M68.36,134.69c.76,0,.76,1.18,0,1.18s-.76-1.18,0-1.18Z"/>
+    <path class="cls-9"
+          d="M76.38,153.5c.24.04.47.08.71.12.63.1.63,1.16,0,1.26-.24.04-.47.08-.71.12-.49.08-.98-.2-.98-.75,0-.54.49-.83.98-.75Z"/>
+    <path class="cls-9" d="M99.24,157.78c1.21,0,1.21,1.87,0,1.87-1.21,0-1.21-1.87,0-1.87Z"/>
+    <path class="cls-9"
+          d="M99.94,183.6c.15-.19.36-.25.57-.34.48-.19.98.29.98.75s-.5.94-.98.75c-.21-.08-.43-.15-.57-.34-.21-.27-.21-.55,0-.82Z"/>
+    <path class="cls-9"
+          d="M76.92,172.93c.62,0,.83.71.47,1.14-.06.07-.11.13-.17.2-.14.17-.46.17-.6,0-.06-.07-.11-.14-.17-.2-.36-.43-.15-1.14.47-1.14Z"/>
+    <path class="cls-9" d="M81.38,194.36c1.04,0,1.04,1.61,0,1.61-1.04,0-1.04-1.61,0-1.61Z"/>
+    <path class="cls-9"
+          d="M68.76,197.8c.07-.06.13-.11.2-.17.47-.39,1.25-.16,1.25.52,0,.68-.78.91-1.25.52-.07-.06-.13-.11-.2-.17-.19-.16-.19-.53,0-.69Z"/>
+    <path class="cls-9" d="M150.57,290.77c.97,0,.97,1.5,0,1.5s-.97-1.5,0-1.5Z"/>
+    <path class="cls-9" d="M177.73,306.43c.93,0,.93,1.44,0,1.44s-.93-1.44,0-1.44Z"/>
+    <path class="cls-9" d="M212.02,310.72c-1,0-1,1.55,0,1.55s1-1.55,0-1.55Z"/>
+    <path class="cls-9" d="M246.99,314.18c-1.34,0-1.34,2.07,0,2.07s1.34-2.07,0-2.07Z"/>
+    <path class="cls-9" d="M138.67,300.98c1.71,0,1.71,2.66,0,2.66-1.71,0-1.71-2.66,0-2.66Z"/>
+    <path class="cls-9" d="M231.67,312.37c.94,0,.94,1.46,0,1.46s-.94-1.46,0-1.46Z"/>
+    <path class="cls-9" d="M304.1,308.86c.69,0,.69,1.07,0,1.07s-.69-1.07,0-1.07Z"/>
+    <path class="cls-9"
+          d="M223.66,298.96c.24-.23.65-.19.82.11.13.23.06.5-.12.66.01.46-.53.6-.79.24-.22-.3-.17-.75.09-1Z"/>
+    <path class="cls-9"
+          d="M118.39,259.97c.1.07.21.16.33.2.35.11.49.55.22.82-.27.27-.71.13-.82-.22-.04-.12-.13-.22-.2-.33-.2-.28.19-.67.48-.48Z"/>
+    <path class="cls-9"
+          d="M106.31,215.53s.01-.04.02-.06c.02-.24.15-.41.32-.61.48-.56,1.36.32.8.8-.2.17-.38.31-.61.32-.02,0-.04.01-.06.02-.27.08-.55-.2-.47-.47Z"/>
+    <path class="cls-9"
+          d="M80.24,241.27c.05-.07.11-.14.16-.21.18-.23.57-.3.84-.22.37.1.63.45.63.83,0,.3-.16.59-.43.74-.3.18-.81.16-1.04-.13-.05-.07-.11-.14-.16-.21-.21-.27-.21-.54,0-.8Z"/>
+    <path class="cls-9" d="M72.45,247.92c.58,0,.58.89,0,.89s-.58-.89,0-.89Z"/>
+    <path class="cls-9"
+          d="M68.36,236.76c.67,0,1.14.92.58,1.4-.07.06-.13.11-.2.17-.23.2-.52.2-.76,0-.07-.06-.13-.11-.2-.17-.56-.48-.09-1.4.58-1.4Z"/>
+    <path class="cls-9"
+          d="M54.42,248.05c.05-.09.11-.19.16-.28.17-.29.61-.29.77,0,.05.09.11.19.16.28.24.41-.06.95-.55.95s-.78-.54-.55-.95Z"/>
+    <path class="cls-9"
+          d="M57.86,213.14c.05-.1.09-.19.14-.29.11-.23.51-.23.62,0,.05.1.09.19.14.29.17.35-.03.79-.45.79s-.62-.44-.45-.79Z"/>
+    <path class="cls-9" d="M46.78,190.21c.65,0,.65,1,0,1s-.65-1,0-1Z"/>
+    <path class="cls-9" d="M61.66,253.46c1.11,0,1.11,1.72,0,1.72s-1.11-1.72,0-1.72Z"/>
+    <path class="cls-9"
+          d="M46.8,254.67c.25.12.5.25.74.37.03.02,0,.06-.03.05-.25-.12-.5-.25-.74-.37-.03-.02,0-.06.03-.05Z"/>
+    <path class="cls-9"
+          d="M52.41,108.45c.23-.18.41-.22.69-.24.84-.04.84,1.35,0,1.31-.29-.01-.46-.06-.69-.24-.23-.18-.23-.65,0-.83Z"/>
+    <path class="cls-9"
+          d="M111.14,125.21c.57,0,.97.65.66,1.15-.06.09-.11.18-.17.27-.23.37-.75.37-.98,0l-.17-.27c-.31-.5.09-1.15.66-1.15Z"/>
+    <path class="cls-9" d="M263.69,150.9v.37s-.06.04-.06,0v-.37s.06-.04.06,0Z"/>
+    <path class="cls-9" d="M277.06,276.61s.04.06,0,.06-.04-.06,0-.06Z"/>
+    <path class="cls-9"
+          d="M207.41,302.45c.1-.37.45-.63.83-.63.3,0,.59.16.74.43.21.36.12.74-.13,1.04-.06.07-.11.13-.17.2-.2.24-.67.24-.88,0-.06-.07-.11-.13-.17-.2-.2-.24-.31-.52-.22-.84Z"/>
+    <path class="cls-9"
+          d="M86.3,221.13c10.45,10.38,20.86,20.8,31.26,31.23.13.13-.07.33-.2.2-10.43-10.4-20.85-20.81-31.23-31.26-.11-.11.06-.28.17-.17Z"/>
+    <path class="cls-9"
+          d="M58.96,95.01c10.45,10.38,20.86,20.8,31.26,31.23.13.13-.07.33-.2.2-10.43-10.4-20.85-20.81-31.23-31.26-.11-.11.06-.28.17-.17Z"/>
+    <path class="cls-9"
+          d="M322.9,151.37c10.45,10.38,20.86,20.8,31.26,31.23.13.13-.07.33-.2.2-10.43-10.4-20.85-20.81-31.23-31.26-.11-.11.06-.28.17-.17Z"/>
+    <path class="cls-9"
+          d="M103.01,252.27c4.5,4.16,8.98,8.33,13.46,12.51.06.05-.03.13-.09.08-4.49-4.17-8.98-8.34-13.45-12.52-.05-.04.03-.11.07-.07Z"/>
+    <path class="cls-9"
+          d="M61.16,116.11c4.5,4.16,8.98,8.33,13.46,12.51.06.05-.03.13-.09.08-4.49-4.17-8.98-8.34-13.45-12.52-.05-.04.03-.11.07-.07Z"/>
+    <path class="cls-9"
+          d="M338.22,186.14c4.5,4.16,8.98,8.33,13.46,12.51.06.05-.03.13-.09.08-4.49-4.17-8.98-8.34-13.45-12.52-.05-.04.03-.11.07-.07Z"/>
+  </g>
 </svg>

package/lib/components/console/VtsRemoteConsole.vue

@@ -1,24 +1,27 @@
 <template>
   <div :class="uiStore.isMobile ? 'mobile' : undefined" class="vts-remote-console">
-    <VtsLoadingHero v-if="!isReady" type="panel" />
+    <VtsStateHero v-if="!isReady" format="page" busy size="medium">{{ t('loading') }}</VtsStateHero>
     <div ref="console-container" class="console" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import { useUiStore } from '@core/stores/ui.store'
 import VncClient from '@novnc/novnc/lib/rfb'
 import { whenever } from '@vueuse/core'
 import { promiseTimeout } from '@vueuse/shared'
 import { fibonacci } from 'iterable-backoff'
 import { onBeforeUnmount, ref, useTemplateRef, watchEffect } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{
   url: URL
   isConsoleAvailable: boolean
 }>()
 
+const { t } = useI18n()
+
 const uiStore = useUiStore()
 
 const N_TOTAL_TRIES = 8
@@ -147,6 +150,7 @@ defineExpose({
   }
 
   /* Required because the library adds "margin: auto" to the canvas which makes the canvas centered in space and not aligned to the rest of the layout */
+
   :deep(canvas) {
     margin: 0 auto !important;
     cursor: default !important;

package/lib/components/data-table/VtsDataTable.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="table-container">
-    <VtsLoadingHero v-if="!isReady" type="table" />
-    <VtsErrorNoDataHero v-else-if="hasError" type="table" />
-    <VtsNoDataHero v-else-if="noDataMessage" type="table" />
+    <VtsStateHero v-if="!isReady" format="table" busy size="medium" />
+    <VtsStateHero v-else-if="hasError" format="table" type="error" size="small" no-background>
+      {{ t('error-no-data') }}
+    </VtsStateHero>
+    <VtsStateHero v-else-if="noDataMessage" format="table" type="no-data" size="small">
+      {{ noDataMessage ? noDataMessage : t('no-data') }}
+    </VtsStateHero>
     <VtsTable v-else vertical-border>
       <thead>
         <slot name="thead" />
@@ -15,10 +19,9 @@
 </template>
 
 <script lang="ts" setup>
-import VtsErrorNoDataHero from '@core/components/state-hero/VtsErrorNoDataHero.vue'
-import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
-import VtsNoDataHero from '@core/components/state-hero/VtsNoDataHero.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import VtsTable from '@core/components/table/VtsTable.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   isReady?: boolean
@@ -30,6 +33,8 @@ defineSlots<{
   thead(): any
   tbody(): any
 }>()
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/progress-bar/VtsProgressBar.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="vts-progress-bar">
+    <UiDataRuler :max="percentageCap" :warning="threshold.payload" />
+    <UiProgressBar :accent="threshold.payload.accent ?? 'info'" :fill-width :legend />
+  </div>
+</template>
+
+<script generic="TSource" lang="ts" setup>
+import UiDataRuler from '@core/components/ui/data-ruler/UiDataRuler.vue'
+import UiProgressBar, { type ProgressBarAccent } from '@core/components/ui/progress-bar/UiProgressBar.vue'
+import { useProgress } from '@core/packages/progress/use-progress.ts'
+import type { ThresholdConfig } from '@core/packages/threshold/type.ts'
+import { useThreshold } from '@core/packages/threshold/use-threshold.ts'
+import { defaultProgressThresholds, useProgressToLegend } from '@core/utils/progress.util.ts'
+
+export type ProgressBarLegendType = 'percent' | 'bytes' | 'bytes-with-total' | 'value' | 'value-with-total'
+
+export type ProgressBarThresholdPayload = { accent?: ProgressBarAccent; tooltip?: string }
+
+export type ProgressBarThresholdConfig = ThresholdConfig<ProgressBarThresholdPayload>
+
+const {
+  current,
+  total,
+  label,
+  thresholds = defaultProgressThresholds(),
+  legendType,
+} = defineProps<{
+  current: number
+  total: number
+  label: string
+  legendType?: ProgressBarLegendType
+  thresholds?: ProgressBarThresholdConfig
+}>()
+
+const progress = useProgress(
+  () => current,
+  () => total
+)
+
+const { percentageCap, percentage, fillWidth } = progress
+
+const legend = useProgressToLegend(() => legendType, label, progress)
+
+const threshold = useThreshold(percentage, () => thresholds)
+</script>
+
+<style lang="postcss" scoped>
+.vts-progress-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+</style>

package/lib/components/progress-bar-group/VtsProgressBarGroup.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="vts-progress-bar-group">
+    <UiDataRuler :max="highestPercentageCap" :warning="threshold.payload" />
+    <UiProgressBar
+      v-for="item of progressItems"
+      :key="item.source.id"
+      :accent="item.threshold.payload?.accent ?? 'info'"
+      :fill-width="item.fillWidth"
+      :legend="toLegend(item.source.label, item)"
+    />
+  </div>
+</template>
+
+<script generic="TSource" lang="ts" setup>
+import type {
+  ProgressBarLegendType,
+  ProgressBarThresholdConfig,
+} from '@core/components/progress-bar/VtsProgressBar.vue'
+import UiDataRuler from '@core/components/ui/data-ruler/UiDataRuler.vue'
+import UiProgressBar from '@core/components/ui/progress-bar/UiProgressBar.vue'
+import { useProgressGroup } from '@core/packages/progress/use-progress-group.ts'
+import { useThreshold } from '@core/packages/threshold/use-threshold.ts'
+import { defaultProgressThresholds, useProgressToLegend } from '@core/utils/progress.util.ts'
+import { computed } from 'vue'
+
+export type ProgressBarGroupItem = { id: string; current: number; total: number; label: string }
+
+const {
+  items,
+  thresholds = defaultProgressThresholds(),
+  sort = 'desc',
+  legendType,
+  nItems,
+} = defineProps<{
+  items: ProgressBarGroupItem[]
+  legendType?: ProgressBarLegendType
+  thresholds?: ProgressBarThresholdConfig
+  sort?: 'asc' | 'desc' | 'none'
+  nItems?: number
+}>()
+
+const {
+  highestPercentageCap,
+  progressItems: rawProgressItems,
+  highestPercentage,
+} = useProgressGroup(() => items, {
+  sort: () => (sort === 'none' ? undefined : sort),
+})
+
+const progressItems = computed(() => {
+  const items = rawProgressItems.value.map(item => {
+    return {
+      ...item,
+      threshold: useThreshold(item.percentage, thresholds).value,
+    }
+  })
+
+  if (nItems) {
+    return items.slice(0, nItems)
+  }
+
+  return items
+})
+
+const toLegend = useProgressToLegend(() => legendType)
+
+const threshold = useThreshold(highestPercentage, () => thresholds)
+</script>
+
+<style lang="postcss" scoped>
+.vts-progress-bar-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+</style>

package/lib/components/quick-info-card/VtsQuickInfoCard.vue

@@ -1,7 +1,7 @@
 <template>
   <UiCard class="vts-quick-info-card">
     <UiCardTitle>{{ t('quick-info') }}</UiCardTitle>
-    <VtsLoadingHero v-if="loading" type="card" />
+    <VtsStateHero v-if="loading" format="card" busy size="medium" />
     <div v-else class="info-container">
       <slot />
     </div>
@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import { useI18n } from 'vue-i18n'