@metricinsights/pp-dev 0.9.0 → 0.10.1

package/dist/client/client.css

@@ -1,287 +1,3 @@
-.pp-dev-info-namespace {
-  --pp-dev-info-color-primary: #007bff;
-  --pp-dev-info-color-secondary: #6c757d;
-  --pp-dev-info-color-success: #28a745;
-  --pp-dev-info-color-info: #17a2b8;
-  --pp-dev-info-color-warning: #ffc107;
-  --pp-dev-info-color-danger: #dc3545;
-  --pp-dev-info-color-light: #f8f9fa;
-  --pp-dev-info-color-dark: #343a40;
-  --pp-dev-info-color-white: #ffffff;
-  --pp-dev-info-color-black: #000000;
-}
-.pp-dev-info-namespace .pp-dev-info__popup {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  width: max-content;
-  max-width: 300px;
-  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;
-  display: flex;
-  flex-direction: column;
-  transition: all 0.3s;
-  overflow: hidden;
-  z-index: 100000;
-  border: 1px solid var(--pp-dev-info-color-secondary);
-}
-.pp-dev-info-namespace .pp-dev-info__popup-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px;
-  height: 30px;
-  width: 100%;
-  box-sizing: border-box;
-  border-bottom: 1px solid var(--pp-dev-info-color-light);
-  background-color: var(--pp-dev-info-color-secondary);
-}
-.pp-dev-info-namespace .pp-dev-info__popup-title-text {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--pp-dev-info-color-white);
-}
-.pp-dev-info-namespace .pp-dev-info__popup-title-close {
-  cursor: pointer;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--pp-dev-info-color-white);
-}
-.pp-dev-info-namespace .pp-dev-info__popup-title-close:hover {
-  color: var(--pp-dev-info-color-light);
-}
-.pp-dev-info-namespace .pp-dev-info__popup-content {
-  padding: 10px;
-  overflow-y: auto;
-  box-sizing: border-box;
-  flex-grow: 1;
-  background-color: var(--pp-dev-info-color-white);
-  width: 100%;
-}
-.pp-dev-info-namespace .pp-dev-info__popup--success {
-  border-color: var(--pp-dev-info-color-success);
-}
-.pp-dev-info-namespace .pp-dev-info__popup--success .pp-dev-info__popup-title {
-  background-color: var(--pp-dev-info-color-success);
-}
-.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--danger {
-  border-color: var(--pp-dev-info-color-danger);
-}
-.pp-dev-info-namespace .pp-dev-info__popup--danger .pp-dev-info__popup-title {
-  background-color: var(--pp-dev-info-color-danger);
-}
-.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,
-.pp-dev-info-namespace .pp-dev-info {
-  position: fixed;
-  z-index: 10000;
-  white-space: nowrap;
-  width: fit-content;
-  height: 30px;
-  top: calc(100% - 30px);
-  right: 0;
-  text-align: center;
-  padding: 3px 8px 3px 0;
-  background-color: var(--pp-dev-info-color-white);
-  border-radius: 3px 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;
-}
-.pp-dev-info-namespace.pp-dev-info *,
-.pp-dev-info-namespace .pp-dev-info * {
-  color: var(--pp-dev-info-color-dark);
-  font-family: sans-serif;
-  font-size: 13px;
-  font-weight: 300;
-  line-height: 1.5;
-  letter-spacing: 0.00938em;
-  text-decoration: none;
-  text-transform: inherit;
-  vertical-align: inherit;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  background: 0 0;
-  list-style: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.pp-dev-info-namespace.pp-dev-info .primary,
-.pp-dev-info-namespace .pp-dev-info .primary {
-  color: var(--pp-dev-info-color-primary) !important;
-}
-.pp-dev-info-namespace.pp-dev-info .success,
-.pp-dev-info-namespace .pp-dev-info .success {
-  color: var(--pp-dev-info-color-success) !important;
-}
-.pp-dev-info-namespace.pp-dev-info .info,
-.pp-dev-info-namespace .pp-dev-info .info {
-  color: var(--pp-dev-info-color-info) !important;
-}
-.pp-dev-info-namespace.pp-dev-info .warning,
-.pp-dev-info-namespace .pp-dev-info .warning {
-  color: var(--pp-dev-info-color-warning) !important;
-}
-.pp-dev-info-namespace.pp-dev-info .danger,
-.pp-dev-info-namespace .pp-dev-info .danger {
-  color: var(--pp-dev-info-color-danger) !important;
-}
-.pp-dev-info-namespace.pp-dev-info a,
-.pp-dev-info-namespace .pp-dev-info a {
-  color: var(--pp-dev-info-color-primary);
-  text-decoration: none;
-  vertical-align: middle;
-  line-height: 1.5;
-}
-.pp-dev-info-namespace.pp-dev-info a:hover,
-.pp-dev-info-namespace .pp-dev-info a:hover {
-  text-decoration: none;
-}
-.pp-dev-info-namespace.pp-dev-info a:active, .pp-dev-info-namespace.pp-dev-info a:hover,
-.pp-dev-info-namespace .pp-dev-info a:active,
-.pp-dev-info-namespace .pp-dev-info a:hover {
-  outline: 0;
-}
-.pp-dev-info-namespace.pp-dev-info button,
-.pp-dev-info-namespace .pp-dev-info button {
-  padding: 1px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  outline: none;
-}
-.pp-dev-info-namespace.pp-dev-info .bold,
-.pp-dev-info-namespace.pp-dev-info .status-text,
-.pp-dev-info-namespace .pp-dev-info .bold,
-.pp-dev-info-namespace .pp-dev-info .status-text {
-  font-weight: 700;
-}
-.pp-dev-info-namespace.pp-dev-info__wrap-btn,
-.pp-dev-info-namespace .pp-dev-info__wrap-btn {
-  box-sizing: content-box;
-  display: flex;
-  align-items: center;
-  max-width: 13px;
-  width: 100%;
-  margin-right: 10px;
-  padding-left: 10px;
-  cursor: pointer;
-}
-.pp-dev-info-namespace.pp-dev-info__wrap-btn:hover,
-.pp-dev-info-namespace .pp-dev-info__wrap-btn:hover {
-  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;
-  fill: var(--pp-dev-info-color-dark);
-}
-.pp-dev-info-namespace.pp-dev-info.closed,
-.pp-dev-info-namespace .pp-dev-info.closed {
-  transform: translateX(calc(100% - 27px));
-}
-.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 {
-  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 {
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 4px 2px;
-}
-.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.syncing,
-.pp-dev-info-namespace .pp-dev-info .sync-button.syncing {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-.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;
-}
-.pp-dev-info-namespace.pp-dev-info .margin-5,
-.pp-dev-info-namespace .pp-dev-info .margin-5 {
-  margin-right: 5px;
-}
-.pp-dev-info-namespace.pp-dev-info .margin-10,
-.pp-dev-info-namespace .pp-dev-info .margin-10 {
-  margin-right: 10px;
-}
-.pp-dev-info-namespace.pp-dev-info .custom-font,
-.pp-dev-info-namespace .pp-dev-info .custom-font {
-  font-family: sans-serif;
-  font-size: 13px;
-  font-weight: 300;
-  vertical-align: middle;
-  line-height: 1.5;
-  color: var(--pp-dev-info-color-dark);
-}
-.pp-dev-info-namespace.pp-dev-info .custom-font:not(.not-colored) a,
-.pp-dev-info-namespace .pp-dev-info .custom-font:not(.not-colored) a {
-  color: var(--pp-dev-info-color-primary) !important;
-}
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg) matrix(1, 0, 0, -1, 0, 0);
-  }
-  100% {
-    transform: rotate(360deg) matrix(1, 0, 0, -1, 0, 0);
-  }
-}
-@keyframes arrowHover {
-  0% {
-    transform: translateX(2px);
-  }
-  50% {
-    transform: translateX(-2px);
-  }
-  100% {
-    transform: translateX(2px);
-  }
-}
-@media screen and (prefers-color-scheme: dark) {
-  .pp-dev-info-namespace.pp-dev-info,
-  .pp-dev-info-namespace .pp-dev-info {
-    --pp-dev-info-color-primary: #007bff;
-    --pp-dev-info-color-secondary: #a4abb6;
-    --pp-dev-info-color-success: #56f000;
-    --pp-dev-info-color-info: #2dccff;
-    --pp-dev-info-color-warning: #ffb302;
-    --pp-dev-info-color-danger: #ff3838;
-    --pp-dev-info-color-light: #343a40;
-    --pp-dev-info-color-dark: #f8f9fa;
-    --pp-dev-info-color-white: #000000;
-    --pp-dev-info-color-black: #ffffff;
-  }
-}
+.pp-dev-info-namespace{--pp-dev-info-color-primary: #007bff;--pp-dev-info-color-secondary: #6c757d;--pp-dev-info-color-success: #28a745;--pp-dev-info-color-info: #17a2b8;--pp-dev-info-color-warning: #ffc107;--pp-dev-info-color-danger: #dc3545;--pp-dev-info-color-light: #f8f9fa;--pp-dev-info-color-dark: #343a40;--pp-dev-info-color-white: #ffffff;--pp-dev-info-color-black: #000000}.pp-dev-info-namespace .pp-dev-info__popup{position:fixed;top:10px;right:10px;width:max-content;max-width:300px;height:max-content;max-height:max-content;background-color:var(--pp-dev-info-color-white);box-shadow:0 4px 6px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08);border-radius:8px;display:flex;flex-direction:column;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;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 .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:12px 16px;height:auto;min-height:30px;width:100%;box-sizing:border-box;border-bottom:1px solid var(--pp-dev-info-color-light);background-color:var(--pp-dev-info-color-secondary)}.pp-dev-info-namespace .pp-dev-info__popup-title-text{font-size:14px;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:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--pp-dev-info-color-white);border-radius:4px;transition:background-color .2s ease}.pp-dev-info-namespace .pp-dev-info__popup-title-close:hover{background-color:hsla(0,0%,100%,.1)}.pp-dev-info-namespace .pp-dev-info__popup-title-close svg{transition:transform .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: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,.1),0 1px 3px rgba(40,167,69,.08)}.pp-dev-info-namespace .pp-dev-info__popup--success .pp-dev-info__popup-title{background-color:var(--pp-dev-info-color-success)}.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,.1),0 1px 3px rgba(220,53,69,.08)}.pp-dev-info-namespace .pp-dev-info__popup--danger .pp-dev-info__popup-title{background-color:var(--pp-dev-info-color-danger)}.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,.1),0 1px 3px rgba(23,162,184,.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,.1),0 1px 3px rgba(255,193,7,.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:100000;white-space:nowrap;width:fit-content;height:30px;top:calc(100% - 30px);right:0;text-align:center;padding:8px 12px;background-color:var(--pp-dev-info-color-white);border-radius:8px 0 0 0;color:var(--pp-dev-info-color-dark);box-shadow:0 -2px 4px rgba(0,0,0,.1);box-sizing:border-box;display:flex;align-items:center;transition:all .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 *{color:var(--pp-dev-info-color-dark);font-family:sans-serif;font-size:13px;font-weight:300;line-height:1.5;letter-spacing:.00938em;text-decoration:none;text-transform:inherit;vertical-align:inherit;box-sizing:border-box;margin:0;padding:0;border:0;outline:0;background:0 0;list-style:none;-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,.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:hsla(0,0%,100%,.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 .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}.pp-dev-info-namespace.pp-dev-info .success,.pp-dev-info-namespace .pp-dev-info .success{color:var(--pp-dev-info-color-success) !important}.pp-dev-info-namespace.pp-dev-info .info,.pp-dev-info-namespace .pp-dev-info .info{color:var(--pp-dev-info-color-info) !important}.pp-dev-info-namespace.pp-dev-info .warning,.pp-dev-info-namespace .pp-dev-info .warning{color:var(--pp-dev-info-color-warning) !important}.pp-dev-info-namespace.pp-dev-info .danger,.pp-dev-info-namespace .pp-dev-info .danger{color:var(--pp-dev-info-color-danger) !important}.pp-dev-info-namespace.pp-dev-info a,.pp-dev-info-namespace .pp-dev-info a{color:var(--pp-dev-info-color-primary);text-decoration:none;vertical-align:middle;line-height:1.5}.pp-dev-info-namespace.pp-dev-info a:hover,.pp-dev-info-namespace .pp-dev-info a:hover{text-decoration:none}.pp-dev-info-namespace.pp-dev-info a:active,.pp-dev-info-namespace.pp-dev-info a:hover,.pp-dev-info-namespace .pp-dev-info a:active,.pp-dev-info-namespace .pp-dev-info a:hover{outline:0}.pp-dev-info-namespace.pp-dev-info button,.pp-dev-info-namespace .pp-dev-info button{padding:1px;border:none;background:none;cursor:pointer;outline:none}.pp-dev-info-namespace.pp-dev-info .bold,.pp-dev-info-namespace.pp-dev-info .status-text,.pp-dev-info-namespace .pp-dev-info .bold,.pp-dev-info-namespace .pp-dev-info .status-text{font-weight:700}.pp-dev-info-namespace.pp-dev-info__wrap-btn,.pp-dev-info-namespace .pp-dev-info__wrap-btn{box-sizing:content-box;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:12px;padding:4px;cursor:pointer;border-radius:4px;transition:background-color .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,.05);animation:arrowHover .8s linear infinite}.pp-dev-info-namespace.pp-dev-info__wrap-btn-arrow,.pp-dev-info-namespace .pp-dev-info__wrap-btn-arrow{width:16px;height:16px;fill:var(--pp-dev-info-color-dark);transition:transform .2s ease}.pp-dev-info-namespace.pp-dev-info.closed,.pp-dev-info-namespace .pp-dev-info.closed{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-arrow,.pp-dev-info-namespace .pp-dev-info.closed .pp-dev-info__wrap-btn-arrow{transform:rotate(180deg)}.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:rgba(0,0,0,0);border:none;border-radius:4px;cursor:pointer;color:var(--pp-dev-info-color-primary);transition:all .2s ease;position:relative;overflow:hidden}.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 .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 .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 .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.disabled,.pp-dev-info-namespace .pp-dev-info .sync-button.disabled{opacity:.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: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{margin-right:5px}.pp-dev-info-namespace.pp-dev-info .margin-10,.pp-dev-info-namespace .pp-dev-info .margin-10{margin-right:10px}.pp-dev-info-namespace.pp-dev-info .custom-font,.pp-dev-info-namespace .pp-dev-info .custom-font{font-family:sans-serif;font-size:13px;font-weight:300;vertical-align:middle;line-height:1.5;color:var(--pp-dev-info-color-dark)}.pp-dev-info-namespace.pp-dev-info .custom-font:not(.not-colored) a,.pp-dev-info-namespace .pp-dev-info .custom-font:not(.not-colored) a{color:var(--pp-dev-info-color-primary) !important}@keyframes rotation{0%{transform:rotate(0deg) matrix(1, 0, 0, -1, 0, 0)}100%{transform:rotate(360deg) matrix(1, 0, 0, -1, 0, 0)}}@keyframes arrowHover{0%{transform:translateX(2px)}50%{transform:translateX(-2px)}100%{transform:translateX(2px)}}@media screen and (prefers-color-scheme: dark){.pp-dev-info-namespace.pp-dev-info,.pp-dev-info-namespace .pp-dev-info{--pp-dev-info-color-primary: #007bff;--pp-dev-info-color-secondary: #a4abb6;--pp-dev-info-color-success: #56f000;--pp-dev-info-color-info: #2dccff;--pp-dev-info-color-warning: #ffb302;--pp-dev-info-color-danger: #ff3838;--pp-dev-info-color-light: #343a40;--pp-dev-info-color-dark: #f8f9fa;--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,uBAEE,qCACA,uCACA,qCACA,kCACA,qCACA,oCACA,mCACA,kCACA,mCACA,mCAEA,2CACE,eACA,SACA,WACA,kBACA,gBACA,mBACA,uBACA,gDACA,WACE,mDAEF,kBACA,aACA,sBACA,gDACA,gBACA,eACA,oDACA,wBACA,UACA,0BACA,kCAEA,oDACE,2BACA,UAGF,mDACE,2BACA,UAGF,oDACE,kBACA,SACA,OACA,WACA,mGACA,WACA,sBACA,4BACA,wBAGF,iDACE,aACA,mBACA,8BACA,kBACA,YACA,gBACA,WACA,sBACA,uDACA,oDAEA,sDACE,eACA,gBACA,qCACA,gBAGF,uDACE,eACA,WACA,YACA,aACA,mBACA,uBACA,qCACA,kBACA,qCAEA,6DACE,oCAGF,2DACE,8BAGF,iEACE,qBAKN,mDACE,kBACA,gBACA,sBACA,YACA,gDACA,WACA,gBACA,eAGF,oDACE,8CACA,WACE,2DAIA,8EACE,kDAGF,gFACE,uCAGF,iFACE,6EAKN,mDACE,6CACA,WACE,2DAIA,6EACE,iDAGF,+EACE,sCAGF,gFACE,4EAKN,iDACE,2CACA,WACE,6DAIA,2EACE,+CAGF,6EACE,oCAGF,8EACE,0EAKN,oDACE,8CACA,WACE,2DAIA,8EACE,kDACA,oCAGF,gFACE,uCAGF,iFACE,6EAMR,uEAEE,eACA,eACA,mBACA,kBACA,OAhNY,KAiNZ,sBACA,QACA,kBACA,iBACA,gDACA,wBACA,oCACA,qCACA,sBACA,aACA,mBACA,gDACA,iBACA,0BACA,kCAMA,2EACE,oCACA,uBACA,eACA,gBACA,gBACA,wBACA,qBACA,uBACA,uBACA,sBACA,SACA,UACA,SACA,UACA,eACA,gBACA,mCACA,kCAGF,yFACE,aACA,mBACA,QAGF,yFACE,aACA,mBACA,kBACA,cAEA,yIACE,WACA,kBACA,QACA,QACA,2BACA,YACA,UACA,iCAEA,+CAVF,yIAWI,qCAIJ,iHACE,eAGF,+GACE,gBAIJ,mFACE,aACA,mBACA,QACA,eACA,gBAGF,qFACE,yCACA,gBAGF,qFACE,gBAGF,mFACE,uCACA,qBACA,0BACA,aACA,mBACA,QAEA,+FACE,uCACA,0BAQJ,yFACE,kDAGF,yFACE,kDAGF,mFACE,+CAGF,yFACE,kDAGF,uFACE,iDAGF,2EACE,uCACA,qBACA,sBACA,gBAEA,uFACE,qBAGF,gLAEE,UAIJ,qFACE,YACA,YACA,gBACA,eACA,aAGF,oLA/CE,gBAoDF,2FACE,uBACA,aACA,mBACA,uBACA,WACA,YACA,kBACA,YACA,eACA,kBACA,qCAEA,uGACE,iCACA,yCAGF,uGACE,WACA,YACA,mCACA,8BAIJ,qFACE,wCACA,eAGE,+IACE,0CAGF,+IACE,yBAKN,iGACE,aACA,mBACA,uBACA,WACA,YACA,YACA,iBACA,+BACA,YACA,kBACA,eACA,uCACA,wBACA,kBACA,gBAEA,iHACE,WACA,kBACA,MACA,OACA,WACA,YACA,8BACA,UACA,4BACA,kBAGF,yGACE,kBACA,UACA,8BAGF,2IACE,uCAEA,mJACE,6DACA,8BAKF,qJACE,6DAIJ,mHACE,WACA,mBACA,oBACA,yCAIA,yHACE,sCAKN,kBACE,KACE,uBAEF,GACE,0BAIJ,2FACE,iBAGF,6FACE,kBAGF,iGACE,uBACA,eACA,gBACA,sBACA,gBACA,oCAEA,yIACE,kDAIJ,oBACE,GACE,iDAEF,KACE,oDAIJ,sBACE,GACE,0BAEF,IACE,2BAEF,KACE,2BAKJ,+CACE,uEAEE,qCACA,uCACA,qCACA,kCACA,qCACA,oCACA,mCACA,kCACA,mCACA","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"