@metricinsights/pp-dev 0.9.0 → 0.10.0

package/dist/client/client.css

@@ -11,7 +11,7 @@
   --pp-dev-info-color-black: #000000;
 }
 .pp-dev-info-namespace .pp-dev-info__popup {
-  position: absolute;
+  position: fixed;
   top: 10px;
   right: 10px;
   width: max-content;
@@ -19,21 +19,45 @@
   height: max-content;
   max-height: max-content;
   background-color: var(--pp-dev-info-color-white);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  border-radius: 3px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
   display: flex;
   flex-direction: column;
-  transition: all 0.3s;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
-  z-index: 100000;
+  z-index: 100001;
   border: 1px solid var(--pp-dev-info-color-secondary);
+  transform: translateX(0);
+  opacity: 1;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+.pp-dev-info-namespace .pp-dev-info__popup.entering {
+  transform: translateX(100%);
+  opacity: 0;
+}
+.pp-dev-info-namespace .pp-dev-info__popup.exiting {
+  transform: translateX(100%);
+  opacity: 0;
+}
+.pp-dev-info-namespace .pp-dev-info__popup-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--pp-dev-info-color-primary), var(--pp-dev-info-color-info));
+  width: 100%;
+  transform-origin: left;
+  transition: width 0.1s linear;
+  border-radius: 0 0 0 8px;
 }
 .pp-dev-info-namespace .pp-dev-info__popup-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 10px;
-  height: 30px;
+  padding: 12px 16px;
+  height: auto;
+  min-height: 30px;
   width: 100%;
   box-sizing: border-box;
   border-bottom: 1px solid var(--pp-dev-info-color-light);
@@ -41,31 +65,43 @@
 }
 .pp-dev-info-namespace .pp-dev-info__popup-title-text {
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 600;
   color: var(--pp-dev-info-color-white);
+  line-height: 1.4;
 }
 .pp-dev-info-namespace .pp-dev-info__popup-title-close {
   cursor: pointer;
-  width: 30px;
-  height: 30px;
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--pp-dev-info-color-white);
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
 }
 .pp-dev-info-namespace .pp-dev-info__popup-title-close:hover {
-  color: var(--pp-dev-info-color-light);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.pp-dev-info-namespace .pp-dev-info__popup-title-close svg {
+  transition: transform 0.2s ease;
+}
+.pp-dev-info-namespace .pp-dev-info__popup-title-close:hover svg {
+  transform: scale(1.1);
 }
 .pp-dev-info-namespace .pp-dev-info__popup-content {
-  padding: 10px;
+  padding: 12px 16px;
   overflow-y: auto;
   box-sizing: border-box;
   flex-grow: 1;
   background-color: var(--pp-dev-info-color-white);
   width: 100%;
+  line-height: 1.5;
+  font-size: 13px;
 }
 .pp-dev-info-namespace .pp-dev-info__popup--success {
   border-color: var(--pp-dev-info-color-success);
+  box-shadow: 0 4px 6px rgba(40, 167, 69, 0.1), 0 1px 3px rgba(40, 167, 69, 0.08);
 }
 .pp-dev-info-namespace .pp-dev-info__popup--success .pp-dev-info__popup-title {
   background-color: var(--pp-dev-info-color-success);
@@ -73,8 +109,12 @@
 .pp-dev-info-namespace .pp-dev-info__popup--success .pp-dev-info__popup-content {
   color: var(--pp-dev-info-color-success);
 }
+.pp-dev-info-namespace .pp-dev-info__popup--success .pp-dev-info__popup-progress {
+  background: linear-gradient(90deg, var(--pp-dev-info-color-success), #4caf50);
+}
 .pp-dev-info-namespace .pp-dev-info__popup--danger {
   border-color: var(--pp-dev-info-color-danger);
+  box-shadow: 0 4px 6px rgba(220, 53, 69, 0.1), 0 1px 3px rgba(220, 53, 69, 0.08);
 }
 .pp-dev-info-namespace .pp-dev-info__popup--danger .pp-dev-info__popup-title {
   background-color: var(--pp-dev-info-color-danger);
@@ -82,25 +122,58 @@
 .pp-dev-info-namespace .pp-dev-info__popup--danger .pp-dev-info__popup-content {
   color: var(--pp-dev-info-color-danger);
 }
+.pp-dev-info-namespace .pp-dev-info__popup--danger .pp-dev-info__popup-progress {
+  background: linear-gradient(90deg, var(--pp-dev-info-color-danger), #f44336);
+}
+.pp-dev-info-namespace .pp-dev-info__popup--info {
+  border-color: var(--pp-dev-info-color-info);
+  box-shadow: 0 4px 6px rgba(23, 162, 184, 0.1), 0 1px 3px rgba(23, 162, 184, 0.08);
+}
+.pp-dev-info-namespace .pp-dev-info__popup--info .pp-dev-info__popup-title {
+  background-color: var(--pp-dev-info-color-info);
+}
+.pp-dev-info-namespace .pp-dev-info__popup--info .pp-dev-info__popup-content {
+  color: var(--pp-dev-info-color-info);
+}
+.pp-dev-info-namespace .pp-dev-info__popup--info .pp-dev-info__popup-progress {
+  background: linear-gradient(90deg, var(--pp-dev-info-color-info), #2196f3);
+}
+.pp-dev-info-namespace .pp-dev-info__popup--warning {
+  border-color: var(--pp-dev-info-color-warning);
+  box-shadow: 0 4px 6px rgba(255, 193, 7, 0.1), 0 1px 3px rgba(255, 193, 7, 0.08);
+}
+.pp-dev-info-namespace .pp-dev-info__popup--warning .pp-dev-info__popup-title {
+  background-color: var(--pp-dev-info-color-warning);
+  color: var(--pp-dev-info-color-dark);
+}
+.pp-dev-info-namespace .pp-dev-info__popup--warning .pp-dev-info__popup-content {
+  color: var(--pp-dev-info-color-warning);
+}
+.pp-dev-info-namespace .pp-dev-info__popup--warning .pp-dev-info__popup-progress {
+  background: linear-gradient(90deg, var(--pp-dev-info-color-warning), #ff9800);
+}
 .pp-dev-info-namespace.pp-dev-info,
 .pp-dev-info-namespace .pp-dev-info {
   position: fixed;
-  z-index: 10000;
+  z-index: 100000;
   white-space: nowrap;
   width: fit-content;
   height: 30px;
   top: calc(100% - 30px);
   right: 0;
   text-align: center;
-  padding: 3px 8px 3px 0;
+  padding: 8px 12px;
   background-color: var(--pp-dev-info-color-white);
-  border-radius: 3px 0 0 0;
+  border-radius: 8px 0 0 0;
   color: var(--pp-dev-info-color-dark);
   box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
   display: flex;
-  transition: all 0.3s;
-  overflow: hidden;
+  align-items: center;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: visible;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
 }
 .pp-dev-info-namespace.pp-dev-info *,
 .pp-dev-info-namespace .pp-dev-info * {
@@ -123,6 +196,75 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.pp-dev-info-namespace.pp-dev-info__content,
+.pp-dev-info-namespace .pp-dev-info__content {
+  display: flex;
+  align-items: center;
+  gap: 0px;
+}
+.pp-dev-info-namespace.pp-dev-info__section,
+.pp-dev-info-namespace .pp-dev-info__section {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 8px;
+}
+.pp-dev-info-namespace.pp-dev-info__section:not(:last-child)::after,
+.pp-dev-info-namespace .pp-dev-info__section:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 12px;
+  width: 1px;
+  background-color: rgba(0, 0, 0, 0.15);
+}
+@media screen and (prefers-color-scheme: dark) {
+  .pp-dev-info-namespace.pp-dev-info__section:not(:last-child)::after,
+  .pp-dev-info-namespace .pp-dev-info__section:not(:last-child)::after {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+}
+.pp-dev-info-namespace.pp-dev-info__section:first-child,
+.pp-dev-info-namespace .pp-dev-info__section:first-child {
+  padding-left: 0;
+}
+.pp-dev-info-namespace.pp-dev-info__section:last-child,
+.pp-dev-info-namespace .pp-dev-info__section:last-child {
+  padding-right: 0;
+}
+.pp-dev-info-namespace.pp-dev-info__item,
+.pp-dev-info-namespace .pp-dev-info__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.pp-dev-info-namespace.pp-dev-info__label,
+.pp-dev-info-namespace .pp-dev-info__label {
+  color: var(--pp-dev-info-color-secondary);
+  font-weight: 500;
+}
+.pp-dev-info-namespace.pp-dev-info__value,
+.pp-dev-info-namespace .pp-dev-info__value {
+  font-weight: 600;
+}
+.pp-dev-info-namespace.pp-dev-info__link,
+.pp-dev-info-namespace .pp-dev-info__link {
+  color: var(--pp-dev-info-color-primary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.pp-dev-info-namespace.pp-dev-info__link:hover,
+.pp-dev-info-namespace .pp-dev-info__link:hover {
+  color: var(--pp-dev-info-color-primary);
+  text-decoration: underline;
+}
 .pp-dev-info-namespace.pp-dev-info .primary,
 .pp-dev-info-namespace .pp-dev-info .primary {
   color: var(--pp-dev-info-color-primary) !important;
@@ -178,57 +320,108 @@
   box-sizing: content-box;
   display: flex;
   align-items: center;
-  max-width: 13px;
-  width: 100%;
-  margin-right: 10px;
-  padding-left: 10px;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 12px;
+  padding: 4px;
   cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
 }
 .pp-dev-info-namespace.pp-dev-info__wrap-btn:hover,
 .pp-dev-info-namespace .pp-dev-info__wrap-btn:hover {
+  background-color: rgba(0, 0, 0, 0.05);
   animation: arrowHover 0.8s linear infinite;
 }
 .pp-dev-info-namespace.pp-dev-info__wrap-btn-arrow,
 .pp-dev-info-namespace .pp-dev-info__wrap-btn-arrow {
-  width: 13px;
+  width: 16px;
+  height: 16px;
   fill: var(--pp-dev-info-color-dark);
+  transition: transform 0.2s ease;
 }
 .pp-dev-info-namespace.pp-dev-info.closed,
 .pp-dev-info-namespace .pp-dev-info.closed {
-  transform: translateX(calc(100% - 27px));
+  transform: translateX(calc(100% - 40px));
+  z-index: 100002;
 }
 .pp-dev-info-namespace.pp-dev-info.closed .pp-dev-info__wrap-btn:hover,
 .pp-dev-info-namespace .pp-dev-info.closed .pp-dev-info__wrap-btn:hover {
   animation: arrowHover 1.2s linear infinite;
 }
-.pp-dev-info-namespace.pp-dev-info.closed .pp-dev-info__wrap-btn .pp-dev-info__wrap-btn-arrow,
-.pp-dev-info-namespace .pp-dev-info.closed .pp-dev-info__wrap-btn .pp-dev-info__wrap-btn-arrow {
+.pp-dev-info-namespace.pp-dev-info.closed .pp-dev-info__wrap-btn-arrow,
+.pp-dev-info-namespace .pp-dev-info.closed .pp-dev-info__wrap-btn-arrow {
   transform: rotate(180deg);
-  max-width: 12px;
-}
-.pp-dev-info-namespace.pp-dev-info.closed .pp-dev-info__wrap-btn,
-.pp-dev-info-namespace .pp-dev-info.closed .pp-dev-info__wrap-btn {
-  margin-left: -2px;
 }
 .pp-dev-info-namespace.pp-dev-info .sync-button,
 .pp-dev-info-namespace .pp-dev-info .sync-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  margin-left: 12px;
   background-color: transparent;
   border: none;
+  border-radius: 4px;
   cursor: pointer;
-  padding: 4px 2px;
+  color: var(--pp-dev-info-color-primary);
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
 }
-.pp-dev-info-namespace.pp-dev-info .sync-button.disabled svg,
-.pp-dev-info-namespace .pp-dev-info .sync-button.disabled svg {
-  fill: gray !important;
+.pp-dev-info-namespace.pp-dev-info .sync-button::before,
+.pp-dev-info-namespace .pp-dev-info .sync-button::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: currentColor;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  border-radius: 4px;
+}
+.pp-dev-info-namespace.pp-dev-info .sync-button svg,
+.pp-dev-info-namespace .pp-dev-info .sync-button svg {
+  position: relative;
+  z-index: 1;
+  transition: transform 0.3s ease;
+}
+.pp-dev-info-namespace.pp-dev-info .sync-button:hover:not(.disabled),
+.pp-dev-info-namespace .pp-dev-info .sync-button:hover:not(.disabled) {
+  color: var(--pp-dev-info-color-primary);
+}
+.pp-dev-info-namespace.pp-dev-info .sync-button:hover:not(.disabled) svg,
+.pp-dev-info-namespace .pp-dev-info .sync-button:hover:not(.disabled) svg {
+  transform: scale(1.2) rotate(90deg) matrix(1, 0, 0, -1, 0, 0);
+  transition: transform 0.2s ease;
+}
+.pp-dev-info-namespace.pp-dev-info .sync-button:active:not(.disabled) svg,
+.pp-dev-info-namespace .pp-dev-info .sync-button:active:not(.disabled) svg {
+  transform: scale(0.9) rotate(90deg) matrix(1, 0, 0, -1, 0, 0);
 }
-.pp-dev-info-namespace.pp-dev-info .sync-button.syncing,
-.pp-dev-info-namespace .pp-dev-info .sync-button.syncing {
+.pp-dev-info-namespace.pp-dev-info .sync-button.disabled,
+.pp-dev-info-namespace .pp-dev-info .sync-button.disabled {
+  opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
+  color: var(--pp-dev-info-color-secondary);
 }
 .pp-dev-info-namespace.pp-dev-info .sync-button.syncing svg,
 .pp-dev-info-namespace .pp-dev-info .sync-button.syncing svg {
-  animation: rotation 2s linear infinite;
+  animation: rotate 1.5s linear infinite;
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 .pp-dev-info-namespace.pp-dev-info .margin-5,
 .pp-dev-info-namespace .pp-dev-info .margin-5 {
@@ -284,4 +477,6 @@
     --pp-dev-info-color-white: #000000;
     --pp-dev-info-color-black: #ffffff;
   }
-}
+}
+
+/*# sourceMappingURL=client.css.map */

package/dist/client/client.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["stdin"],"names":[],"mappings":"AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA,YACE;;AAIA;EACE;;AAGF;EACE;;AAGF;EACE;;AAKN;EACE;EACA,YACE;;AAIA;EACE;;AAGF;EACE;;AAGF;EACE;;AAKN;EACE;EACA,YACE;;AAIA;EACE;;AAGF;EACE;;AAGF;EACE;;AAKN;EACE;EACA,YACE;;AAIA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAMR;AAAA;EAEE;EACA;EACA;EACA;EACA,QAhNY;EAiNZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAVF;AAAA;IAWI;;;AAIJ;AAAA;EACE;;AAGF;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAQJ;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;EAEE;;AAIJ;AAAA;EACE;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;EA/CE;;AAoDF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;;AAIJ;AAAA;EACE;EACA;;AAGE;AAAA;EACE;;AAGF;AAAA;EACE;;AAKN;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;;AAEA;AAAA;EACE;EACA;;AAKF;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAKN;EACE;IACE;;EAEF;IACE;;;AAIJ;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAIJ;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AAKJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA","file":"client.css"}

package/dist/client/client.js

@@ -19,31 +19,120 @@ function getStorageItem(key) {
     }
     return null;
 }
-function infoPopup(opts) {
+const POPUP_OFFSET = 10;
+const POPUP_HEIGHT = 100;
+const ANIMATION_DURATION = 300;
+function createPopupElement(opts) {
+    const $popup = document.createElement('div');
+    $popup.classList.add('pp-dev-info-namespace');
+    const typeClass = opts.type ? `pp-dev-info__popup--${opts.type}` : '';
     const template = `
-    <div class="pp-dev-info__popup ${opts.className || ''}" style="${opts.style || ''}">
+    <div class="pp-dev-info__popup ${typeClass} ${opts.className || ''}" style="${opts.style || ''}">
       <div class="pp-dev-info__popup-title">
         <div class="pp-dev-info__popup-title-text">${opts.title}</div>
         <div class="pp-dev-info__popup-title-close">
-          <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+          <svg
+            viewBox="0 0 24 24"
+            width="16"
+            height="16"
+            stroke="currentColor"
+            stroke-width="1.5"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
             <path d="M18 6L6 18"></path>
             <path d="M6 6l12 12"></path>
           </svg>
         </div>
       </div>
       <div class="pp-dev-info__popup-content">${opts.content}</div>
+      <div class="pp-dev-info__popup-progress"></div>
     </div>
-    `;
-    const $popup = document.createElement('div');
-    $popup.classList.add('pp-dev-info-namespace');
+  `;
     $popup.innerHTML = template;
-    $popup.querySelector('.pp-dev-info__popup-title-close')?.addEventListener('click', () => {
-        $popup.remove();
+    return $popup;
+}
+function updatePopupPositions() {
+    const popups = document.querySelectorAll('.pp-dev-info-namespace:not(.pp-dev-info)');
+    const $devPanel = document.querySelector('.pp-dev-info');
+    popups.forEach((popup, index) => {
+        const top = POPUP_OFFSET + (index * (POPUP_HEIGHT + POPUP_OFFSET));
+        popup.style.top = `${top}px`;
     });
-    document.body.appendChild($popup);
-    setTimeout(() => {
+    if ($devPanel) {
+        $devPanel.style.top = 'auto';
+        $devPanel.style.bottom = '0';
+    }
+}
+function animatePopup($popup, type) {
+    return new Promise((resolve) => {
+        const $popupContent = $popup.querySelector('.pp-dev-info-namespace');
+        if (!$popupContent) {
+            return resolve();
+        }
+        if (type === 'enter') {
+            $popupContent.classList.add('entering');
+            requestAnimationFrame(() => {
+                $popupContent.classList.remove('entering');
+                resolve();
+            });
+        }
+        else {
+            $popupContent.classList.add('exiting');
+            setTimeout(() => {
+                $popupContent.classList.remove('exiting');
+                resolve();
+            }, ANIMATION_DURATION);
+        }
+    });
+}
+function infoPopup(opts) {
+    const $popup = createPopupElement(opts);
+    const $closeButton = $popup.querySelector('.pp-dev-info__popup-title-close');
+    const $progressBar = $popup.querySelector('.pp-dev-info__popup-progress');
+    const removePopup = async () => {
+        await animatePopup($popup, 'exit');
         $popup.remove();
-    }, 10000);
+        updatePopupPositions();
+        opts.onClose?.();
+    };
+    $closeButton?.addEventListener('click', removePopup);
+    document.body.appendChild($popup);
+    updatePopupPositions();
+    animatePopup($popup, 'enter');
+    const duration = opts.duration ?? 10000;
+    if (duration > 0) {
+        let remainingTime = duration;
+        let lastUpdate = Date.now();
+        let isVisible = true;
+        const updateProgress = () => {
+            if (!isVisible) {
+                return;
+            }
+            const now = Date.now();
+            const elapsed = now - lastUpdate;
+            remainingTime -= elapsed;
+            lastUpdate = now;
+            if (remainingTime <= 0) {
+                removePopup();
+                return;
+            }
+            const progress = (remainingTime / duration) * 100;
+            if ($progressBar) {
+                $progressBar.style.width = `${progress}%`;
+            }
+            requestAnimationFrame(updateProgress);
+        };
+        document.addEventListener('visibilitychange', () => {
+            isVisible = !document.hidden;
+            if (isVisible) {
+                lastUpdate = Date.now();
+                requestAnimationFrame(updateProgress);
+            }
+        });
+        requestAnimationFrame(updateProgress);
+    }
 }
 if (import.meta.hot) {
     const { hot } = import.meta;
@@ -99,9 +188,16 @@ if (import.meta.hot) {
                     content: payload.error,
                     className: 'pp-dev-info__popup--danger',
                 });
-                $syncButton.disabled = true;
-                $syncButton.classList.add('disabled');
-                $syncButton.title = 'Sync is unavailable on this instance';
+                if (payload.refresh) {
+                    setTimeout(() => {
+                        window.location.reload();
+                    });
+                }
+                else {
+                    $syncButton.disabled = true;
+                    $syncButton.classList.add('disabled');
+                    $syncButton.title = 'Sync is unavailable on this instance';
+                }
             }
             else if ('syncedAt' in payload && typeof payload.syncedAt !== 'undefined') {
                 infoPopup({

package/dist/client/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","sources":["index.ts"],"sourcesContent":[null],"names":[],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"client.js","sources":["index.ts"],"sourcesContent":[null],"names":[],"mappings":"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","x_google_ignoreList":[0]}

package/dist/client/index.html

@@ -8,38 +8,51 @@
     </svg>
   </div>
 
-  <div>
-    <span class="margin-5 custom-font not-colored"
-      ><a href="https://www.npmjs.com/package/{%= PACKAGE_NAME %}/v/{%= VERSION %}" target="_blank">
-        <span class="bold primary">{%= PACKAGE_NAME %}</span>: <span class="bold warning">{%= VERSION %}</span></a
-      >;
-    </span>
+  <div class="pp-dev-info__content">
+    <div class="pp-dev-info__section">
+      <span class="pp-dev-info__item">
+        <a href="https://www.npmjs.com/package/{%= PACKAGE_NAME %}/v/{%= VERSION %}" target="_blank" class="pp-dev-info__link">
+          <span class="pp-dev-info__label">Package:</span>
+          <span class="pp-dev-info__value primary">{%= PACKAGE_NAME %}</span>
+          <span class="pp-dev-info__value warning">{%= VERSION %}</span>
+        </a>
+      </span>
+    </div>
+
     {% if (backendBaseURL) { %}
-    <span class="margin-5 custom-font">
-      <span>Backend URL: </span><a href="!!{%= backendBaseURL %}" target="_blank">!!{%= backendBaseURL %}</a>;
-    </span>
+    <div class="pp-dev-info__section">
+      <span class="pp-dev-info__item">
+        <span class="pp-dev-info__label">Backend URL:</span>
+        <a href="!!{%= backendBaseURL %}" target="_blank" class="pp-dev-info__link">!!{%= backendBaseURL %}</a>
+      </span>
+    </div>
     {% } %}
-    <span class="margin-5 custom-font">
-      <span>Template mode: </span>
-      {% if (templateLess || !backendBaseURL || Number.isNaN(+portalPageId)) { %}
-      <span class="status-text danger">Disabled</span>; {% } else { %} <span class="status-text success">Enabled</span>;
-      {% } %}
-    </span>
+
+    <div class="pp-dev-info__section">
+      <span class="pp-dev-info__item">
+        <span class="pp-dev-info__label">Template mode:</span>
+        {% if (templateLess || !backendBaseURL || Number.isNaN(+portalPageId)) { %}
+        <span class="pp-dev-info__value danger">Disabled</span>
+        {% } else { %}
+        <span class="pp-dev-info__value success">Enabled</span>
+        {% } %}
+      </span>
+    </div>
+
     {% if (backendBaseURL && !Number.isNaN(+portalPageId)) { %}
-    <span class="margin-5 custom-font"
-      ><span>Portal page ID: </span>
-      <a href="!!{%= backendBaseURL %}/admin/page/edit/id/{%= portalPageId %}" target="_blank">{%= portalPageId %}</a>;
-    </span>
+    <div class="pp-dev-info__section">
+      <span class="pp-dev-info__item">
+        <span class="pp-dev-info__label">Portal page ID:</span>
+        <a href="!!{%= backendBaseURL %}/admin/page/edit/id/{%= portalPageId %}" target="_blank" class="pp-dev-info__link">{%= portalPageId %}</a>
+      </span>
+    </div>
     {% } %}
   </div>
-  {% if (!templateLess && backendBaseURL && !Number.isNaN(+portalPageId)) { %}
-  <button
-    id="sync-template"
-    class="sync-button"
-    title="Sync template"
-  >
+
+  {% if (backendBaseURL && !Number.isNaN(+portalPageId)) { %}
+  <button id="sync-template" class="sync-button" title="Sync template">
     <svg
-      fill="#007BFF"
+      fill="currentColor"
       width="16px"
       height="16px"
       viewBox="0 0 24 24"