@platforma-sdk/ui-vue 1.42.24 → 1.42.34

package/dist/plugins/Monetization/RunStatus.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RunStatus.vue2.js","sources":["../../../src/plugins/Monetization/RunStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { PlIcon24, PlTooltip } from '@milaboratories/uikit';\n\nconst props = defineProps<{\n  canRun: boolean | undefined;\n  statusText: string | undefined;\n}>();\n\nconst tooltipText = computed(() => {\n  if (props.canRun) {\n    return 'Can run';\n  }\n\n  return 'Cannot run: check your monetization settings';\n});\n\nconst badgeText = computed(() => {\n  if (props.canRun) {\n    return 'Ready to run';\n  }\n\n  return 'Cannot run';\n});\n</script>\n\n<template>\n  <div>\n    <div :class=\"[{ [$style['can-run']]: canRun }, $style.container]\">\n      <div :class=\"$style.badge\">\n        <i :class=\"$style.blob\">\n          <span>\n            <span :class=\"$style.dot\" />\n          </span>\n        </i>\n        <span>{{ badgeText }}</span>\n      </div>\n      <PlTooltip v-if=\"false\">\n        <template #tooltip>\n          {{ tooltipText }}\n        </template>\n        <PlIcon24 name=\"info\" />\n      </PlTooltip>\n      <slot />\n    </div>\n    <div v-if=\"statusText\" :class=\"$style.statusText\">{{ statusText }}</div>\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  --blob-color: #FF5C5C;\n  --badge-background: rgba(255, 92, 92, 0.12);\n  &.can-run {\n    --blob-color: #49CC49;\n    --badge-background: rgba(99, 224, 36, 0.12);\n  }\n}\n\n.statusText {\n  margin-top: 6px;\n  color: var(--txt-error);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n\n.badge {\n  display: flex;\n  gap: 6px;\n  height: 40px;\n  padding: 6px 16px 6px 8px;\n  align-items: center;\n  border-radius: 6px;\n  border: 1px solid var(--badge-background);\n  background: var(--badge-background);\n}\n\n.blob {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  place-items: center;\n  place-content: center;\n\n  >span {\n    display: flex;\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    place-content: center;\n    place-items: center;\n    background-color: rgb(from var(--blob-color) r g b / 0.24);\n  }\n\n  .dot {\n    border-radius: 50%;\n    height: 8px;\n    width: 8px;\n    transform: scale(1);\n\n    background: var(--blob-color);\n    box-shadow: 0 0 0 0 var(--blob-color);\n    animation: pulse-glob 1s infinite;\n  }\n}\n</style>\n"],"names":["props","__props","computed","badgeText"],"mappings":";;;;;;;;;AAIA,UAAMA,IAAQC;AAKM,IAAAC,EAAS,MACvBF,EAAM,SACD,YAGF,8CACR;AAED,UAAMG,IAAYD,EAAS,MACrBF,EAAM,SACD,iBAGF,YACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RunStatus.vue2.js","sources":["../../../src/plugins/Monetization/RunStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst props = defineProps<{\n  canRun: boolean | undefined;\n  statusText: string | undefined;\n  isLoading?: boolean;\n}>();\n\nconst badgeText = computed(() => {\n  if (props.isLoading) {\n    return 'Updating...';\n  }\n\n  if (props.canRun) {\n    return 'Ready to run';\n  }\n\n  return 'Cannot run';\n});\n</script>\n\n<template>\n  <div>\n    <div :class=\"[{ [$style['can-run']]: canRun, [$style.loading]: isLoading }, $style.container]\">\n      <div :class=\"$style.badge\">\n        <i :class=\"$style.blob\">\n          <span>\n            <span :class=\"$style.dot\" />\n          </span>\n        </i>\n        <span>{{ badgeText }}</span>\n      </div>\n      <slot />\n    </div>\n    <div v-if=\"statusText\" :class=\"$style.statusText\">{{ statusText }}</div>\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  --blob-color: #FF5C5C;\n  --badge-background: rgba(255, 92, 92, 0.12);\n\n  &.can-run {\n    --blob-color: #49CC49;\n    --badge-background: rgba(99, 224, 36, 0.12);\n  }\n\n  &.loading {\n    --blob-color: #FFAD0A;\n    --badge-background: rgba(255, 173, 10, 0.12);\n  }\n}\n\n.statusText {\n  margin-top: 6px;\n  color: var(--txt-error);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n\n.badge {\n  display: flex;\n  gap: 6px;\n  height: 40px;\n  padding: 6px 16px 6px 8px;\n  align-items: center;\n  border-radius: 6px;\n  border: 1px solid var(--badge-background);\n  background: var(--badge-background);\n}\n\n.blob {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  place-items: center;\n  place-content: center;\n\n  >span {\n    display: flex;\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    place-content: center;\n    place-items: center;\n    background-color: rgb(from var(--blob-color) r g b / 0.24);\n  }\n\n  .dot {\n    border-radius: 50%;\n    height: 8px;\n    width: 8px;\n    transform: scale(1);\n\n    background: var(--blob-color);\n    box-shadow: 0 0 0 0 var(--blob-color);\n    animation: pulse-glob 1s infinite;\n  }\n}\n</style>\n"],"names":["props","__props","badgeText","computed"],"mappings":";;;;;;;;;AAGA,UAAMA,IAAQC,GAMRC,IAAYC,EAAS,MACrBH,EAAM,YACD,gBAGLA,EAAM,SACD,iBAGF,YACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/plugins/Monetization/RunStatus.vue3.js

@@ -1,19 +1,21 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_s8cm3_2{display:flex;align-items:center;gap:8px;--blob-color: #FF5C5C;--badge-background: rgba(255, 92, 92, .12)}._container_s8cm3_2._can-run_s8cm3_8{--blob-color: #49CC49;--badge-background: rgba(99, 224, 36, .12)}._statusText_s8cm3_14{margin-top:6px;color:var(--txt-error);font-size:14px;font-weight:500;line-height:20px}._badge_s8cm3_22{display:flex;gap:6px;height:40px;padding:6px 16px 6px 8px;align-items:center;border-radius:6px;border:1px solid var(--badge-background);background:var(--badge-background)}._blob_s8cm3_33{width:24px;height:24px;display:flex;place-items:center;place-content:center}._blob_s8cm3_33>span{display:flex;width:16px;height:16px;border-radius:50%;place-content:center;place-items:center;background-color:rgb(from var(--blob-color) r g b / .24)}._blob_s8cm3_33 ._dot_s8cm3_50{border-radius:50%;height:8px;width:8px;transform:scale(1);background:var(--blob-color);box-shadow:0 0 0 0 var(--blob-color);animation:_pulse-glob_s8cm3_1 1s infinite}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-const t = "_container_s8cm3_2", s = "_statusText_s8cm3_14", _ = "_badge_s8cm3_22", c = "_blob_s8cm3_33", o = "_dot_s8cm3_50", n = {
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_1l90y_2{display:flex;align-items:center;gap:8px;--blob-color: #FF5C5C;--badge-background: rgba(255, 92, 92, .12)}._container_1l90y_2._can-run_1l90y_9{--blob-color: #49CC49;--badge-background: rgba(99, 224, 36, .12)}._container_1l90y_2._loading_1l90y_14{--blob-color: #FFAD0A;--badge-background: rgba(255, 173, 10, .12)}._statusText_1l90y_20{margin-top:6px;color:var(--txt-error);font-size:14px;font-weight:500;line-height:20px}._badge_1l90y_28{display:flex;gap:6px;height:40px;padding:6px 16px 6px 8px;align-items:center;border-radius:6px;border:1px solid var(--badge-background);background:var(--badge-background)}._blob_1l90y_39{width:24px;height:24px;display:flex;place-items:center;place-content:center}._blob_1l90y_39>span{display:flex;width:16px;height:16px;border-radius:50%;place-content:center;place-items:center;background-color:rgb(from var(--blob-color) r g b / .24)}._blob_1l90y_39 ._dot_1l90y_56{border-radius:50%;height:8px;width:8px;transform:scale(1);background:var(--blob-color);box-shadow:0 0 0 0 var(--blob-color);animation:_pulse-glob_1l90y_1 1s infinite}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+const t = "_container_1l90y_2", _ = "_loading_1l90y_14", o = "_statusText_1l90y_20", l = "_badge_1l90y_28", n = "_blob_1l90y_39", s = "_dot_1l90y_56", a = {
   container: t,
-  "can-run": "_can-run_s8cm3_8",
-  statusText: s,
-  badge: _,
-  blob: c,
-  "pulse-glob": "_pulse-glob_s8cm3_1",
-  dot: o
+  "can-run": "_can-run_1l90y_9",
+  loading: _,
+  statusText: o,
+  badge: l,
+  blob: n,
+  "pulse-glob": "_pulse-glob_1l90y_1",
+  dot: s
 };
 export {
-  _ as badge,
-  c as blob,
+  l as badge,
+  n as blob,
   t as container,
-  n as default,
-  o as dot,
-  s as statusText
+  a as default,
+  s as dot,
+  _ as loading,
+  o as statusText
 };
 //# sourceMappingURL=RunStatus.vue3.js.map

package/dist/plugins/Monetization/RunStatus.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"RunStatus.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"RunStatus.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/plugins/Monetization/UserCabinetCard.vue.d.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     userCabinetUrl: string;
+    email?: string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/plugins/Monetization/UserCabinetCard.vue2.js

@@ -1,63 +1,71 @@
-import { defineComponent as y, ref as C, computed as v, createElementBlock as s, openBlock as i, createCommentVNode as b, createElementVNode as l, normalizeClass as o, createVNode as r, toDisplayString as n, unref as c, withCtx as p, createTextVNode as f } from "vue";
-import { PlTooltip as U, PlMaskIcon24 as h } from "@milaboratories/uikit";
-const k = ["title"], V = /* @__PURE__ */ y({
+import { defineComponent as v, ref as b, computed as f, createElementBlock as a, openBlock as s, createCommentVNode as p, createElementVNode as o, normalizeClass as t, createVNode as u, toDisplayString as i, unref as c, withCtx as d, createTextVNode as U } from "vue";
+import { PlTooltip as k, PlMaskIcon24 as $ } from "@milaboratories/uikit";
+const T = ["title"], w = /* @__PURE__ */ v({
   __name: "UserCabinetCard",
   props: {
-    userCabinetUrl: {}
+    userCabinetUrl: {},
+    email: {}
   },
-  setup(u) {
-    const a = u, t = C(""), d = v(() => t.value ? "clipboard-copied" : "clipboard"), m = () => {
-      a.userCabinetUrl && navigator.clipboard.writeText(a.userCabinetUrl).then(() => {
-        t.value = "URL copied!", setTimeout(() => {
-          t.value = "";
+  setup(m) {
+    const n = m, l = b(""), y = f(() => l.value ? "clipboard-copied" : "clipboard"), C = () => {
+      n.userCabinetUrl && navigator.clipboard.writeText(n.userCabinetUrl).then(() => {
+        l.value = "URL copied!", setTimeout(() => {
+          l.value = "";
         }, 2e3);
       }).catch((e) => {
-        console.error("Failed to copy text: ", e), t.value = "Copy failed", setTimeout(() => {
-          t.value = "";
+        console.error("Failed to copy text: ", e), l.value = "Copy failed", setTimeout(() => {
+          l.value = "";
         }, 2e3);
       });
     };
-    return (e, T) => (i(), s("div", null, [
-      e.userCabinetUrl ? (i(), s("div", {
+    return (e, r) => (s(), a("div", null, [
+      e.userCabinetUrl ? (s(), a("div", {
         key: 0,
-        class: o(e.$style.urlSection)
+        class: t(e.$style.urlSection)
       }, [
-        l("div", {
-          class: o(e.$style.urlLabel)
+        o("div", {
+          class: t(e.$style.urlLabel)
         }, "Scientist cabinet URL:", 2),
-        l("div", {
-          class: o(e.$style.urlActions)
+        o("div", {
+          class: t(e.$style.urlActions)
         }, [
-          l("div", {
-            class: o(e.$style.urlDisplay),
+          o("div", {
+            class: t(e.$style.urlDisplay),
             title: e.userCabinetUrl
-          }, n(e.userCabinetUrl), 11, k),
-          r(c(U), {
+          }, i(e.userCabinetUrl), 11, T),
+          u(c(k), {
             "close-delay": 800,
             position: "top"
           }, {
-            tooltip: p(() => [
-              f(n(t.value ? t.value : "Copy"), 1)
+            tooltip: d(() => [
+              U(i(l.value ? l.value : "Copy"), 1)
             ]),
-            default: p(() => [
-              r(c(h), {
-                class: o(e.$style.copyIcon),
+            default: d(() => [
+              u(c($), {
+                class: t(e.$style.copyIcon),
                 title: "Copy content",
-                name: d.value,
-                onClick: m
+                name: y.value,
+                onClick: C
               }, null, 8, ["class", "name"])
             ]),
             _: 1
           })
-        ], 2)
-      ], 2)) : b("", !0),
-      l("div", {
-        class: o(e.$style.hint)
+        ], 2),
+        e.email ? (s(), a("div", {
+          key: 0,
+          class: t(e.$style.email)
+        }, [
+          r[0] || (r[0] = o("span", null, "License owner:", -1)),
+          o("span", null, i(e.email), 1)
+        ], 2)) : p("", !0)
+      ], 2)) : p("", !0),
+      o("div", {
+        class: t(e.$style.hint)
       }, " * Copy and paste the link into your browser ", 2)
     ]));
   }
 });
 export {
-  V as default
+  w as default
 };
 //# sourceMappingURL=UserCabinetCard.vue2.js.map

package/dist/plugins/Monetization/UserCabinetCard.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserCabinetCard.vue2.js","sources":["../../../src/plugins/Monetization/UserCabinetCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from 'vue';\nimport { PlTooltip, PlMaskIcon24 } from '@milaboratories/uikit';\n\nconst props = defineProps<{\n  userCabinetUrl: string;\n}>();\n\nconst copiedMessage = ref('');\n\nconst iconName = computed(() => (copiedMessage.value ? 'clipboard-copied' : 'clipboard'));\n\nconst copyToClipboard = () => {\n  if (props.userCabinetUrl) {\n    navigator.clipboard.writeText(props.userCabinetUrl)\n      .then(() => {\n        copiedMessage.value = 'URL copied!';\n        setTimeout(() => {\n          copiedMessage.value = '';\n        }, 2000);\n      })\n      .catch((err) => {\n        console.error('Failed to copy text: ', err);\n        copiedMessage.value = 'Copy failed';\n        setTimeout(() => {\n          copiedMessage.value = '';\n        }, 2000);\n      });\n  }\n};\n</script>\n\n<template>\n  <div>\n    <div v-if=\"userCabinetUrl\" :class=\"$style.urlSection\">\n      <div :class=\"$style.urlLabel\">Scientist cabinet URL:</div>\n      <div :class=\"$style.urlActions\">\n        <div :class=\"$style.urlDisplay\" :title=\"userCabinetUrl\">{{ userCabinetUrl }}</div>\n        <PlTooltip :close-delay=\"800\" position=\"top\">\n          <PlMaskIcon24 :class=\"$style.copyIcon\" title=\"Copy content\" :name=\"iconName\" @click=\"copyToClipboard\" />\n          <template #tooltip>{{ copiedMessage ? copiedMessage : 'Copy' }}</template>\n        </PlTooltip>\n      </div>\n    </div>\n    <div :class=\"$style.hint\">\n      * Copy and paste the link into your browser\n    </div>\n  </div>\n</template>\n\n<style module>\n.hint {\n  margin-top: 6px;\n  color: var(--txt-03);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 16px;\n}\n\n.copyIcon {\n  cursor: pointer;\n}\n\n.urlSection {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background-color: #f0f0f0;\n  border-radius: 6px;\n}\n\n.urlLabel {\n  font-weight: 500;\n  color: #555;\n}\n\n.urlActions {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: nowrap;\n}\n\n.urlDisplay {\n  font-family: monospace;\n  font-size: 14px;\n  color: #0066cc;\n  padding: 6px 10px 6px 0;\n  border-radius: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 300px;\n}\n</style>\n"],"names":["props","__props","copiedMessage","ref","iconName","computed","copyToClipboard","err"],"mappings":";;;;;;;;AAIA,UAAMA,IAAQC,GAIRC,IAAgBC,EAAI,EAAE,GAEtBC,IAAWC,EAAS,MAAOH,EAAc,QAAQ,qBAAqB,WAAY,GAElFI,IAAkB,MAAM;AAC5B,MAAIN,EAAM,kBACR,UAAU,UAAU,UAAUA,EAAM,cAAc,EAC/C,KAAK,MAAM;AACV,QAAAE,EAAc,QAAQ,eACtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,QACxB,GAAG,GAAI;AAAA,MACT,CAAC,EACA,MAAM,CAACK,MAAQ;AACd,gBAAQ,MAAM,yBAAyBA,CAAG,GAC1CL,EAAc,QAAQ,eACtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,QACxB,GAAG,GAAI;AAAA,MACT,CAAC;AAAA,IAEP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"UserCabinetCard.vue2.js","sources":["../../../src/plugins/Monetization/UserCabinetCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from 'vue';\nimport { PlTooltip, PlMaskIcon24 } from '@milaboratories/uikit';\n\nconst props = defineProps<{\n  userCabinetUrl: string;\n  email?: string;\n}>();\n\nconst copiedMessage = ref('');\n\nconst iconName = computed(() => (copiedMessage.value ? 'clipboard-copied' : 'clipboard'));\n\nconst copyToClipboard = () => {\n  if (props.userCabinetUrl) {\n    navigator.clipboard.writeText(props.userCabinetUrl)\n      .then(() => {\n        copiedMessage.value = 'URL copied!';\n        setTimeout(() => {\n          copiedMessage.value = '';\n        }, 2000);\n      })\n      .catch((err) => {\n        console.error('Failed to copy text: ', err);\n        copiedMessage.value = 'Copy failed';\n        setTimeout(() => {\n          copiedMessage.value = '';\n        }, 2000);\n      });\n  }\n};\n</script>\n\n<template>\n  <div>\n    <div v-if=\"userCabinetUrl\" :class=\"$style.urlSection\">\n      <div :class=\"$style.urlLabel\">Scientist cabinet URL:</div>\n      <div :class=\"$style.urlActions\">\n        <div :class=\"$style.urlDisplay\" :title=\"userCabinetUrl\">{{ userCabinetUrl }}</div>\n        <PlTooltip :close-delay=\"800\" position=\"top\">\n          <PlMaskIcon24 :class=\"$style.copyIcon\" title=\"Copy content\" :name=\"iconName\" @click=\"copyToClipboard\" />\n          <template #tooltip>{{ copiedMessage ? copiedMessage : 'Copy' }}</template>\n        </PlTooltip>\n      </div>\n      <div v-if=\"email\" :class=\"$style.email\">\n        <span>License owner:</span>\n        <span>{{ email }}</span>\n      </div>\n    </div>\n    <div :class=\"$style.hint\">\n      * Copy and paste the link into your browser\n    </div>\n  </div>\n</template>\n\n<style module>\n.hint {\n  margin-top: 6px;\n  color: var(--txt-03);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 16px;\n}\n\n.email {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 12px;\n  color: var(--txt-03);\n\n  > span:last-child {\n    max-width: 200px;\n    text-overflow: ellipsis;\n    display: block;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n}\n\n.copyIcon {\n  cursor: pointer;\n}\n\n.urlSection {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background-color: #F7F8FA;\n  border-radius: 6px;\n  border: 1px solid #E1E3EB;\n}\n\n.urlLabel {\n  font-weight: 500;\n  color: #555;\n}\n\n.urlActions {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: nowrap;\n}\n\n.urlDisplay {\n  font-family: monospace;\n  font-size: 14px;\n  color: #0066cc;\n  padding: 6px 10px 6px 0;\n  border-radius: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 300px;\n}\n</style>\n"],"names":["props","__props","copiedMessage","ref","iconName","computed","copyToClipboard","err"],"mappings":";;;;;;;;;AAIA,UAAMA,IAAQC,GAKRC,IAAgBC,EAAI,EAAE,GAEtBC,IAAWC,EAAS,MAAOH,EAAc,QAAQ,qBAAqB,WAAY,GAElFI,IAAkB,MAAM;AAC5B,MAAIN,EAAM,kBACR,UAAU,UAAU,UAAUA,EAAM,cAAc,EAC/C,KAAK,MAAM;AACV,QAAAE,EAAc,QAAQ,eACtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,QACxB,GAAG,GAAI;AAAA,MACT,CAAC,EACA,MAAM,CAACK,MAAQ;AACd,gBAAQ,MAAM,yBAAyBA,CAAG,GAC1CL,EAAc,QAAQ,eACtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,QACxB,GAAG,GAAI;AAAA,MACT,CAAC;AAAA,IAEP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/plugins/Monetization/UserCabinetCard.vue3.js

@@ -1,19 +1,21 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._hint_1bvg8_2{margin-top:6px;color:var(--txt-03);font-size:12px;font-weight:500;line-height:16px}._copyIcon_1bvg8_10{cursor:pointer}._urlSection_1bvg8_14{display:flex;flex-direction:column;gap:8px;padding:12px;background-color:#f0f0f0;border-radius:6px}._urlLabel_1bvg8_23{font-weight:500;color:#555}._urlActions_1bvg8_28{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}._urlDisplay_1bvg8_35{font-family:monospace;font-size:14px;color:#06c;padding:6px 10px 6px 0;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-const l = "_hint_1bvg8_2", o = "_copyIcon_1bvg8_10", c = "_urlSection_1bvg8_14", n = "_urlLabel_1bvg8_23", t = "_urlActions_1bvg8_28", _ = "_urlDisplay_1bvg8_35", s = {
-  hint: l,
-  copyIcon: o,
-  urlSection: c,
-  urlLabel: n,
-  urlActions: t,
-  urlDisplay: _
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._hint_hc54t_2{margin-top:6px;color:var(--txt-03);font-size:12px;font-weight:500;line-height:16px}._email_hc54t_10{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--txt-03)}._email_hc54t_10>span:last-child{max-width:200px;text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}._copyIcon_hc54t_26{cursor:pointer}._urlSection_hc54t_30{display:flex;flex-direction:column;gap:8px;padding:12px;background-color:#f7f8fa;border-radius:6px;border:1px solid #E1E3EB}._urlLabel_hc54t_40{font-weight:500;color:#555}._urlActions_hc54t_45{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}._urlDisplay_hc54t_52{font-family:monospace;font-size:14px;color:#06c;padding:6px 10px 6px 0;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+const c = "_hint_hc54t_2", t = "_email_hc54t_10", l = "_copyIcon_hc54t_26", o = "_urlSection_hc54t_30", _ = "_urlLabel_hc54t_40", n = "_urlActions_hc54t_45", s = "_urlDisplay_hc54t_52", i = {
+  hint: c,
+  email: t,
+  copyIcon: l,
+  urlSection: o,
+  urlLabel: _,
+  urlActions: n,
+  urlDisplay: s
 };
 export {
-  o as copyIcon,
-  s as default,
-  l as hint,
-  t as urlActions,
-  _ as urlDisplay,
-  n as urlLabel,
-  c as urlSection
+  l as copyIcon,
+  i as default,
+  t as email,
+  c as hint,
+  n as urlActions,
+  s as urlDisplay,
+  _ as urlLabel,
+  o as urlSection
 };
 //# sourceMappingURL=UserCabinetCard.vue3.js.map

package/dist/plugins/Monetization/UserCabinetCard.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserCabinetCard.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"UserCabinetCard.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/plugins/Monetization/useInfo.js

@@ -1,14 +1,14 @@
 import { computed as n, ref as i, watch as g } from "vue";
 import { useSdkPlugin as h } from "../../defineApp.js";
-import { Response as w } from "./validation.js";
-import { useIntervalFn as D } from "@vueuse/core";
+import { Response as D } from "./validation.js";
+import { useIntervalFn as O } from "@vueuse/core";
 function E() {
   const m = h(), s = n(() => m.loaded ? m.useApp() : void 0), a = n(() => {
     var e, o;
     return "__mnzDate" in ((o = (e = s.value) == null ? void 0 : e.model) == null ? void 0 : o.args);
   }), v = n(() => {
     var e;
-    return w.safeParse((e = s.value) == null ? void 0 : e.model.outputs.__mnzInfo);
+    return D.safeParse((e = s.value) == null ? void 0 : e.model.outputs.__mnzInfo);
   }), c = n(() => {
     var e;
     return (e = v.value) == null ? void 0 : e.data;
@@ -33,7 +33,7 @@ function E() {
     return !!((e = t.value) != null && e.canRun);
   }), z = n(() => {
     var e;
-    return c.value ? (e = t.value) == null ? void 0 : e.status : "awaiting";
+    return c.value ? (e = t.value) == null ? void 0 : e.status : "";
   }), I = n(() => {
     var e;
     return (e = t.value) == null ? void 0 : e.customerEmail;
@@ -50,7 +50,7 @@ function E() {
   return g(f, (e) => {
     var o;
     a.value && (((o = s.value) == null ? void 0 : o.model.args).__mnzCanRun = e);
-  }), a.value && D(d, 6e4), {
+  }), a.value && O(d, 6e4), {
     hasMonetization: a,
     result: t,
     error: _,

package/dist/plugins/Monetization/useInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInfo.js","sources":["../../../src/plugins/Monetization/useInfo.ts"],"sourcesContent":["import { computed, watch, ref } from 'vue';\nimport { useSdkPlugin } from '../../defineApp';\nimport { Response } from './validation';\nimport { useIntervalFn } from '@vueuse/core';\n\nexport function useInfo() {\n  const sdk = useSdkPlugin();\n\n  const app = computed(() => (sdk.loaded ? sdk.useApp() : undefined));\n\n  const hasMonetization = computed(() => '__mnzDate' in (app.value?.model?.args as Record<string, unknown>));\n\n  const parsed = computed(() => Response.safeParse(app.value?.model.outputs['__mnzInfo']));\n\n  const currentInfo = computed<Response | undefined>(() => parsed.value?.data);\n\n  const error = computed(() => parsed.value?.error ?? info.value?.response?.error);\n\n  const info = ref<Response | undefined>(undefined);\n\n  const isLoading = ref(false);\n\n  const version = ref(0);\n\n  watch([currentInfo], ([i]) => {\n    if (i) {\n      info.value = i;\n      const v = ++version.value;\n      setTimeout(() => {\n        if (version.value === v) {\n          isLoading.value = false;\n        }\n      }, 1000);\n    }\n  }, { immediate: true });\n\n  const result = computed(() => info.value?.response?.result);\n\n  const canRun = computed(() => !!result.value?.canRun);\n\n  const status = computed(() => currentInfo.value ? result.value?.status : 'awaiting');\n\n  const customerEmail = computed(() => result.value?.customerEmail);\n\n  const endOfBillingPeriod = computed(() => result.value?.mnz.endOfBillingPeriod);\n\n  const limits = computed(() => result.value?.mnz.limits);\n\n  const refresh = () => {\n    isLoading.value = true;\n    (app.value?.model.args as Record<string, unknown>)['__mnzDate'] = new Date().toISOString();\n  };\n\n  watch(canRun, (v) => {\n    if (hasMonetization.value) {\n      (app.value?.model.args as Record<string, unknown>)['__mnzCanRun'] = v;\n    }\n  });\n\n  if (hasMonetization.value) {\n    useIntervalFn(refresh, 60_000); // 1 minute\n  }\n\n  return {\n    hasMonetization,\n    result,\n    error,\n    canRun,\n    status,\n    customerEmail,\n    endOfBillingPeriod,\n    limits,\n    refresh,\n    version,\n    isLoading,\n  };\n}\n"],"names":["useInfo","sdk","useSdkPlugin","app","computed","hasMonetization","_b","_a","parsed","Response","currentInfo","error","_c","info","ref","isLoading","version","watch","i","v","result","canRun","status","customerEmail","endOfBillingPeriod","limits","refresh","useIntervalFn"],"mappings":";;;;AAKO,SAASA,IAAU;AACxB,QAAMC,IAAMC,EAAA,GAENC,IAAMC,EAAS,MAAOH,EAAI,SAASA,EAAI,OAAA,IAAW,MAAU,GAE5DI,IAAkBD,EAAS,MAAA;;AAAM,4BAAgBE,KAAAC,IAAAJ,EAAI,UAAJ,gBAAAI,EAAW,UAAX,gBAAAD,EAAkB;AAAA,GAAgC,GAEnGE,IAASJ,EAAS,MAAA;;AAAM,WAAAK,EAAS,WAAUF,IAAAJ,EAAI,UAAJ,gBAAAI,EAAW,MAAM,QAAQ,SAAY;AAAA,GAAC,GAEjFG,IAAcN,EAA+B,MAAA;;AAAM,YAAAG,IAAAC,EAAO,UAAP,gBAAAD,EAAc;AAAA,GAAI,GAErEI,IAAQP,EAAS,MAAA;;AAAM,aAAAG,IAAAC,EAAO,UAAP,gBAAAD,EAAc,YAASK,KAAAN,IAAAO,EAAK,UAAL,gBAAAP,EAAY,aAAZ,gBAAAM,EAAsB;AAAA,GAAK,GAEzEC,IAAOC,EAA0B,MAAS,GAE1CC,IAAYD,EAAI,EAAK,GAErBE,IAAUF,EAAI,CAAC;AAErB,EAAAG,EAAM,CAACP,CAAW,GAAG,CAAC,CAACQ,CAAC,MAAM;AAC5B,QAAIA,GAAG;AACL,MAAAL,EAAK,QAAQK;AACb,YAAMC,IAAI,EAAEH,EAAQ;AACpB,iBAAW,MAAM;AACf,QAAIA,EAAQ,UAAUG,MACpBJ,EAAU,QAAQ;AAAA,MAEtB,GAAG,GAAI;AAAA,IACT;AAAA,EACF,GAAG,EAAE,WAAW,IAAM;AAEtB,QAAMK,IAAShB,EAAS,MAAA;;AAAM,YAAAE,KAAAC,IAAAM,EAAK,UAAL,gBAAAN,EAAY,aAAZ,gBAAAD,EAAsB;AAAA,GAAM,GAEpDe,IAASjB,EAAS,MAAA;;AAAM,YAAC,GAACG,IAAAa,EAAO,UAAP,QAAAb,EAAc;AAAA,GAAM,GAE9Ce,IAASlB,EAAS;;AAAM,WAAAM,EAAY,SAAQH,IAAAa,EAAO,UAAP,gBAAAb,EAAc,SAAS;AAAA,GAAU,GAE7EgB,IAAgBnB,EAAS,MAAA;;AAAM,YAAAG,IAAAa,EAAO,UAAP,gBAAAb,EAAc;AAAA,GAAa,GAE1DiB,IAAqBpB,EAAS,MAAA;;AAAM,YAAAG,IAAAa,EAAO,UAAP,gBAAAb,EAAc,IAAI;AAAA,GAAkB,GAExEkB,IAASrB,EAAS,MAAA;;AAAM,YAAAG,IAAAa,EAAO,UAAP,gBAAAb,EAAc,IAAI;AAAA,GAAM,GAEhDmB,IAAU,MAAM;;AACpB,IAAAX,EAAU,QAAQ,MACjBR,IAAAJ,EAAI,UAAJ,gBAAAI,EAAW,MAAM,MAAiC,aAAe,oBAAI,KAAA,GAAO,YAAA;AAAA,EAC/E;AAEA,SAAAU,EAAMI,GAAQ,CAACF,MAAM;;AACnB,IAAId,EAAgB,YACjBE,IAAAJ,EAAI,UAAJ,gBAAAI,EAAW,MAAM,MAAiC,cAAiBY;AAAA,EAExE,CAAC,GAEGd,EAAgB,SAClBsB,EAAcD,GAAS,GAAM,GAGxB;AAAA,IACL,iBAAArB;AAAA,IACA,QAAAe;AAAA,IACA,OAAAT;AAAA,IACA,QAAAU;AAAA,IACA,QAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAV;AAAA,IACA,WAAAD;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useInfo.js","sources":["../../../src/plugins/Monetization/useInfo.ts"],"sourcesContent":["import { computed, watch, ref } from 'vue';\nimport { useSdkPlugin } from '../../defineApp';\nimport { Response } from './validation';\nimport { useIntervalFn } from '@vueuse/core';\n\nexport function useInfo() {\n  const sdk = useSdkPlugin();\n\n  const app = computed(() => (sdk.loaded ? sdk.useApp() : undefined));\n\n  const hasMonetization = computed(() => '__mnzDate' in (app.value?.model?.args as Record<string, unknown>));\n\n  const parsed = computed(() => Response.safeParse(app.value?.model.outputs['__mnzInfo']));\n\n  const currentInfo = computed<Response | undefined>(() => parsed.value?.data);\n\n  const error = computed(() => parsed.value?.error ?? info.value?.response?.error);\n\n  const info = ref<Response | undefined>(undefined);\n\n  const isLoading = ref(false);\n\n  const version = ref(0);\n\n  watch([currentInfo], ([i]) => {\n    if (i) {\n      info.value = i;\n      const v = ++version.value;\n      setTimeout(() => {\n        if (version.value === v) {\n          isLoading.value = false;\n        }\n      }, 1000);\n    }\n  }, { immediate: true });\n\n  const result = computed(() => info.value?.response?.result);\n\n  const canRun = computed(() => !!result.value?.canRun);\n\n  const status = computed(() => currentInfo.value ? result.value?.status : '');\n\n  const customerEmail = computed(() => result.value?.customerEmail);\n\n  const endOfBillingPeriod = computed(() => result.value?.mnz.endOfBillingPeriod);\n\n  const limits = computed(() => result.value?.mnz.limits);\n\n  const refresh = () => {\n    isLoading.value = true;\n    (app.value?.model.args as Record<string, unknown>)['__mnzDate'] = new Date().toISOString();\n  };\n\n  watch(canRun, (v) => {\n    if (hasMonetization.value) {\n      (app.value?.model.args as Record<string, unknown>)['__mnzCanRun'] = v;\n    }\n  });\n\n  if (hasMonetization.value) {\n    useIntervalFn(refresh, 60_000); // 1 minute\n  }\n\n  return {\n    hasMonetization,\n    result,\n    error,\n    canRun,\n    status,\n    customerEmail,\n    endOfBillingPeriod,\n    limits,\n    refresh,\n    version,\n    isLoading,\n  };\n}\n"],"names":["useInfo","sdk","useSdkPlugin","app","computed","hasMonetization","_b","_a","parsed","Response","currentInfo","error","_c","info","ref","isLoading","version","watch","i","v","result","canRun","status","customerEmail","endOfBillingPeriod","limits","refresh","useIntervalFn"],"mappings":";;;;AAKO,SAASA,IAAU;AACxB,QAAMC,IAAMC,EAAA,GAENC,IAAMC,EAAS,MAAOH,EAAI,SAASA,EAAI,OAAA,IAAW,MAAU,GAE5DI,IAAkBD,EAAS,MAAA;;AAAM,4BAAgBE,KAAAC,IAAAJ,EAAI,UAAJ,gBAAAI,EAAW,UAAX,gBAAAD,EAAkB;AAAA,GAAgC,GAEnGE,IAASJ,EAAS,MAAA;;AAAM,WAAAK,EAAS,WAAUF,IAAAJ,EAAI,UAAJ,gBAAAI,EAAW,MAAM,QAAQ,SAAY;AAAA,GAAC,GAEjFG,IAAcN,EAA+B,MAAA;;AAAM,YAAAG,IAAAC,EAAO,UAAP,gBAAAD,EAAc;AAAA,GAAI,GAErEI,IAAQP,EAAS,MAAA;;AAAM,aAAAG,IAAAC,EAAO,UAAP,gBAAAD,EAAc,YAASK,KAAAN,IAAAO,EAAK,UAAL,gBAAAP,EAAY,aAAZ,gBAAAM,EAAsB;AAAA,GAAK,GAEzEC,IAAOC,EAA0B,MAAS,GAE1CC,IAAYD,EAAI,EAAK,GAErBE,IAAUF,EAAI,CAAC;AAErB,EAAAG,EAAM,CAACP,CAAW,GAAG,CAAC,CAACQ,CAAC,MAAM;AAC5B,QAAIA,GAAG;AACL,MAAAL,EAAK,QAAQK;AACb,YAAMC,IAAI,EAAEH,EAAQ;AACpB,iBAAW,MAAM;AACf,QAAIA,EAAQ,UAAUG,MACpBJ,EAAU,QAAQ;AAAA,MAEtB,GAAG,GAAI;AAAA,IACT;AAAA,EACF,GAAG,EAAE,WAAW,IAAM;AAEtB,QAAMK,IAAShB,EAAS,MAAA;;AAAM,YAAAE,KAAAC,IAAAM,EAAK,UAAL,gBAAAN,EAAY,aAAZ,gBAAAD,EAAsB;AAAA,GAAM,GAEpDe,IAASjB,EAAS,MAAA;;AAAM,YAAC,GAACG,IAAAa,EAAO,UAAP,QAAAb,EAAc;AAAA,GAAM,GAE9Ce,IAASlB,EAAS;;AAAM,WAAAM,EAAY,SAAQH,IAAAa,EAAO,UAAP,gBAAAb,EAAc,SAAS;AAAA,GAAE,GAErEgB,IAAgBnB,EAAS,MAAA;;AAAM,YAAAG,IAAAa,EAAO,UAAP,gBAAAb,EAAc;AAAA,GAAa,GAE1DiB,IAAqBpB,EAAS,MAAA;;AAAM,YAAAG,IAAAa,EAAO,UAAP,gBAAAb,EAAc,IAAI;AAAA,GAAkB,GAExEkB,IAASrB,EAAS,MAAA;;AAAM,YAAAG,IAAAa,EAAO,UAAP,gBAAAb,EAAc,IAAI;AAAA,GAAM,GAEhDmB,IAAU,MAAM;;AACpB,IAAAX,EAAU,QAAQ,MACjBR,IAAAJ,EAAI,UAAJ,gBAAAI,EAAW,MAAM,MAAiC,aAAe,oBAAI,KAAA,GAAO,YAAA;AAAA,EAC/E;AAEA,SAAAU,EAAMI,GAAQ,CAACF,MAAM;;AACnB,IAAId,EAAgB,YACjBE,IAAAJ,EAAI,UAAJ,gBAAAI,EAAW,MAAM,MAAiC,cAAiBY;AAAA,EAExE,CAAC,GAEGd,EAAgB,SAClBsB,EAAcD,GAAS,GAAM,GAGxB;AAAA,IACL,iBAAArB;AAAA,IACA,QAAAe;AAAA,IACA,OAAAT;AAAA,IACA,QAAAU;AAAA,IACA,QAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAV;AAAA,IACA,WAAAD;AAAA,EAAA;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.42.24",
+  "version": "1.42.34",
   "type": "module",
   "main": "dist/index.js",
   "styles": "dist/index.js",
@@ -25,9 +25,9 @@
     "@vueuse/integrations": "^13.3.0",
     "d3-format": "^3.1.0",
     "zod": "~3.23.8",
-    "@milaboratories/biowasm-tools": "^1.1.2",
-    "@milaboratories/uikit": "2.4.5",
-    "@platforma-sdk/model": "~1.42.23"
+    "@milaboratories/biowasm-tools": "1.1.2",
+    "@milaboratories/uikit": "2.4.6",
+    "@platforma-sdk/model": "1.42.25"
   },
   "devDependencies": {
     "happy-dom": "^15.11.7",
@@ -42,10 +42,10 @@
     "yarpm": "^1.2.0",
     "fast-json-patch": "^3.1.1",
     "@faker-js/faker": "^9.2.0",
-    "@milaboratories/eslint-config": "^1.0.4",
     "@milaboratories/ts-configs": "1.0.6",
-    "@milaboratories/helpers": "^1.6.21",
-    "@milaboratories/ts-builder": "1.0.4",
+    "@milaboratories/helpers": "1.6.22",
+    "@milaboratories/ts-builder": "1.0.5",
+    "@milaboratories/eslint-config": "1.0.4",
     "@milaboratories/build-configs": "1.0.8"
   },
   "scripts": {

package/src/plugins/Monetization/LimitCard.vue

@@ -10,19 +10,42 @@ const props = defineProps<{
   unit?: string;
 }>();
 
+const total = computed(() => {
+  if (props.available === null) return null;
+  return props.available + props.toSpend + props.used;
+});
+
+const exceeded = computed(() => {
+  if (props.available === null) return false;
+  return props.available < 0;
+});
+
+const availableNow = computed(() => {
+  if (props.available === null) return null;
+  return props.available + props.toSpend;
+});
+
+const clampPercentage = (n: number) => Math.max(0, Math.min(100, n));
+
 const toSpendPercentage = computed(() => {
-  if (props.available === null) return 0;
-  return (props.toSpend / props.available) * 100;
+  if (total.value === null) return 0;
+  if (total.value === 0) return 0;
+  if (exceeded.value) return 0;
+  return clampPercentage((props.toSpend / total.value) * 100);
 });
 
 const usedPercentage = computed(() => {
-  if (props.available === null) return 0;
-  return (props.used / props.available) * 100;
+  if (total.value === null) return 0;
+  if (total.value === 0) return 0;
+  return clampPercentage((props.used / total.value) * 100);
 });
 
 const availablePercentage = computed(() => {
   if (props.available === null) return 100;
-  return 100 - usedPercentage.value - toSpendPercentage.value;
+  if (total.value === null) return 100;
+  if (total.value === 0) return 100;
+  if (exceeded.value) return 0;
+  return clampPercentage(props.available / total.value * 100);
 });
 
 const computedLabel = computed(() => {
@@ -39,6 +62,10 @@ const formatUnit = (v: number) => {
   if (props.type === 'volume_limit') return toGB(v);
   return v;
 };
+
+const showBar = (n: number) => {
+  return Number(n.toFixed(2)) > 0;
+};
 </script>
 
 <template>
@@ -46,25 +73,33 @@ const formatUnit = (v: number) => {
     <span :class="$style.label">{{ computedLabel }}</span>
     <div :class="$style.content">
       <div :class="$style.contentAvailable">
-        Available:
-        <div style="flex: 1" />
-        <span v-if="available !== null"><strong>{{ formatUnit(available) }}</strong> / {{ formatUnit(available + toSpend + used) }}</span>
-        <span v-else>Unlimited</span>
-      </div>
-      <div :class="$style.progressBar">
-        <span :class="$style.progressBarAvailable" :style="{ width: `${availablePercentage}%` }" />
-        <span :class="$style.progressBarToSpend" :style="{ width: `${toSpendPercentage}%` }" />
-        <span :class="$style.progressBarUsed" :style="{ width: `${usedPercentage}%` }" />
+        <div>
+          Available:
+          <div style="flex: 1" />
+          <span v-if="availableNow !== null"><strong>{{ formatUnit(availableNow) }}</strong> / {{ formatUnit(available! + toSpend + used) }}</span>
+          <span v-else>Unlimited</span>
+        </div>
+        <div :class="[$style.afterRun, { [$style.exceeded]: exceeded }]">
+          <span v-if="exceeded">Too many files selected</span>
+          <span style="flex: 1" />
+          <span>After run:</span>
+          <span v-if="available !== null">{{ formatUnit(available) }} / {{ formatUnit(available + toSpend + used) }}</span>
+        </div>
+        <div :class="[$style.progressBar, { [$style.exceeded]: exceeded }]">
+          <span v-if="showBar(availablePercentage)" :class="$style.progressBarAvailable" :style="{ width: `${availablePercentage.toFixed(2)}%` }" />
+          <span v-if="showBar(toSpendPercentage)" :class="$style.progressBarToSpend" :style="{ width: `${toSpendPercentage.toFixed(2)}%` }" />
+          <span v-if="showBar(usedPercentage)" :class="$style.progressBarUsed" :style="{ width: `${usedPercentage.toFixed(2)}%` }" />
+        </div>
       </div>
       <div :class="$style.legends">
-        <div :class="$style.usedLegend">
-          <span/>
-          Used: {{ formatUnit(used) }}
-        </div>
         <div :class="$style.toSpendLegend">
           <span/>
           To spend: {{ formatUnit(toSpend) }}
         </div>
+        <div :class="$style.usedLegend">
+          <span/>
+          Used: {{ formatUnit(used) }}
+        </div>
       </div>
     </div>
   </div>
@@ -74,7 +109,6 @@ const formatUnit = (v: number) => {
 .container {
   display: flex;
   flex-direction: column;
-  gap: 8px;
   background-color: var(--bg-base-light);
   border-radius: 6px;
   padding: 10px 12px 16px 12px;
@@ -87,7 +121,8 @@ const formatUnit = (v: number) => {
 
 .label {
   display: block;
-  margin-bottom: 30px;
+  min-height: 36px;
+  margin-bottom: 8px;
   color: var(--txt-01);
   font-size: 14px;
   font-weight: 600;
@@ -97,64 +132,83 @@ const formatUnit = (v: number) => {
 .content {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 16px;
 }
 
 .contentAvailable {
   display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  strong {
-    font-size: 28px;
-    font-weight: 500;
-    line-height: 36px; /* 128.571% */
-    letter-spacing: -0.56px;
+  flex-direction: column;
+  gap: 6px;
+  > div {
+    display: flex;
+    align-items: flex-start;
+  }
+  >div:first-child {
+    gap: 8px;
+    strong {
+      font-size: 28px;
+      font-weight: 500;
+      line-height: 36px; /* 128.571% */
+      letter-spacing: -0.56px;
+    }
+  }
+}
+
+.afterRun {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--txt-03);
+  &.exceeded {
+    color: var(--txt-error);
   }
 }
 
 .progressBar {
   width: 100%;
-  height: 8px;
+  height: 12px;
   background-color: #E0E0E0;
-  border-radius: 4px;
   display: flex;
   align-items: center;
   border: 1px solid var(--border-color-default);
   > span {
     display: block;
     height: 100%;
+    outline: 1px solid var(--border-color-default);
+  }
+  &.exceeded {
+    opacity: 0.2;
   }
 }
 
 .progressBarAvailable {
-  background-color: #49CC49;
-  border-radius: 4px;
+  background: linear-gradient(270deg, #A1E59C 0%, #D0F5B0 98.81%);
 }
 
 .progressBarUsed {
   background-color: #FFCECC;
-  border-radius: 4px;
 }
 
 .progressBarToSpend {
   background-color: #FAF5AA;
-  border-radius: 4px;
 }
 
 .legends {
   display: flex;
+  justify-content: space-between;
   gap: 8px;
 
-  > div {
-    flex: 1;
-  }
-
   span {
     display: block;
     border-radius: 1px;
     border: 1px solid var(--border-color-default);
-    width: 16px;
-    height: 16px;
+    width: 12px;
+    height: 12px;
   }
 }
 

package/src/plugins/Monetization/MonetizationSidebar.vue

@@ -62,10 +62,8 @@ const statusText = computed(() => {
       return 'Select a subscription plan in the Scientist Cabinet.';
     case 'inactive':
       return 'Not found billing period.';
-    case 'awaiting':
-      return 'Waiting for monetization information';
     default:
-      return 'Unknown status: ' + status.value;
+      return '';
   }
 });
 
@@ -83,7 +81,7 @@ const btnIcon = computed(() => {
       </div>
     </template>
     <PlDropdown label="Product" readonly :model-value="productName" :options="options" />
-    <RunStatus :can-run="canRun" :status-text="statusText">
+    <RunStatus :can-run="canRun" :is-loading="isLoading" :status-text="statusText">
       <PlBtnSecondary
         title="Refresh status"
         round
@@ -97,7 +95,7 @@ const btnIcon = computed(() => {
     <PlAlert v-if="error" type="error">
       {{ error }}
     </PlAlert>
-    <UserCabinetCard v-if="userCabinetUrl" :user-cabinet-url="userCabinetUrl" />
+    <UserCabinetCard v-if="userCabinetUrl" :email="customerEmail" :user-cabinet-url="userCabinetUrl" />
     <EndOfPeriod v-if="endOfBillingPeriod" :end-of-period="endOfBillingPeriod" />
     <template v-if="limits">
       <LimitCard