From baace1b62a6c73f3f2b59071a4cc650f80345a95 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Fri, 13 Feb 2026 20:27:58 +0100
Subject: [PATCH 1/2] treeshake unovis, drop CurveType enum

---
 .../[UI]/{ChartLine.vue => ChartLine.client.vue}  |  0
 app/components/validator/LayoutDashboard.vue      |  5 ++---
 app/components/validator/LayoutDeepDive.vue       |  5 ++---
 app/components/validator/LayoutProfile.vue        |  7 +++----
 nuxt.config.ts                                    |  2 +-
 patches/@unovis__ts@1.5.2.patch                   | 15 +++++++++++++++
 pnpm-lock.yaml                                    | 15 ++++++++++-----
 pnpm-workspace.yaml                               |  2 ++
 8 files changed, 35 insertions(+), 16 deletions(-)
 rename app/components/[UI]/{ChartLine.vue => ChartLine.client.vue} (100%)
 create mode 100644 patches/@unovis__ts@1.5.2.patch

diff --git a/app/components/[UI]/ChartLine.vue b/app/components/[UI]/ChartLine.client.vue
similarity index 100%
rename from app/components/[UI]/ChartLine.vue
rename to app/components/[UI]/ChartLine.client.vue
diff --git a/app/components/validator/LayoutDashboard.vue b/app/components/validator/LayoutDashboard.vue
index 48752fb..7c1524d 100644
--- a/app/components/validator/LayoutDashboard.vue
+++ b/app/components/validator/LayoutDashboard.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { FetchedValidatorDetails } from '~~/server/utils/validators'
-import { CurveType } from 'vue-chrts'
 
 const props = defineProps<{ validator: FetchedValidatorDetails }>()
 const validatorRef = computed(() => props.validator)
@@ -68,7 +67,7 @@ const donutCategories = { 0: { name: 'Availability', color: 'var(--nq-blue)' },
         <AreaChart
           :data="scoreTrendData" :height="200" :categories="scoreCategories"
           :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => `${Math.round(t * 100)}`"
-          :y-domain="[0, 1]" hide-legend :curve-type="CurveType.MonotoneX"
+          :y-domain="[0, 1]" hide-legend curve-type="monotoneX"
         />
       </div>
     </div>
@@ -88,7 +87,7 @@ const donutCategories = { 0: { name: 'Availability', color: 'var(--nq-blue)' },
         <LineChart
           :data="balanceData" :height="200" :categories="balanceCategories"
           :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => formatLunaAsNim(t * 1e5)"
-          hide-legend :curve-type="CurveType.MonotoneX"
+          hide-legend curve-type="monotoneX"
         />
       </div>
     </div>
diff --git a/app/components/validator/LayoutDeepDive.vue b/app/components/validator/LayoutDeepDive.vue
index c9d5382..f5398c2 100644
--- a/app/components/validator/LayoutDeepDive.vue
+++ b/app/components/validator/LayoutDeepDive.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { FetchedValidatorDetails } from '~~/server/utils/validators'
-import { CurveType } from 'vue-chrts'
 
 const props = defineProps<{ validator: FetchedValidatorDetails }>()
 const validatorRef = computed(() => props.validator)
@@ -45,7 +44,7 @@ const dualLineCategories = { score: { name: 'Score', color: 'var(--nq-green)' }
       <AreaChart
         :data="scoreTrendAllData" :height="280" :categories="allScoreCategories"
         :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => `${Math.round(t * 100)}`"
-        :y-domain="[0, 1]" :curve-type="CurveType.MonotoneX"
+        :y-domain="[0, 1]" curve-type="monotoneX"
       />
     </div>
 
@@ -66,7 +65,7 @@ const dualLineCategories = { score: { name: 'Score', color: 'var(--nq-green)' }
         <span nq-label text="11 neutral-800" mb-8 block>Stakers</span>
         <LineChart
           :data="stakersData" :height="200" :categories="stakersCategories"
-          :x-formatter="(t: number) => `E${t}`" hide-legend :curve-type="CurveType.MonotoneX"
+          :x-formatter="(t: number) => `E${t}`" hide-legend curve-type="monotoneX"
         />
       </div>
       <div flex="~ col gap-16">
diff --git a/app/components/validator/LayoutProfile.vue b/app/components/validator/LayoutProfile.vue
index 7ef062f..034d9bd 100644
--- a/app/components/validator/LayoutProfile.vue
+++ b/app/components/validator/LayoutProfile.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { FetchedValidatorDetails } from '~~/server/utils/validators'
-import { CurveType } from 'vue-chrts'
 
 const props = defineProps<{ validator: FetchedValidatorDetails }>()
 const validatorRef = computed(() => props.validator)
@@ -54,7 +53,7 @@ const stakersCategories = { stakers: { name: 'Stakers', color: 'var(--nq-blue)'
           <AreaChart
             :data="scoreTrendData" :height="200" :categories="scoreCategories"
             :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => `${Math.round(t * 100)}`"
-            :y-domain="[0, 1]" hide-legend :curve-type="CurveType.MonotoneX"
+            :y-domain="[0, 1]" hide-legend curve-type="monotoneX"
           />
         </div>
 
@@ -88,7 +87,7 @@ const stakersCategories = { stakers: { name: 'Stakers', color: 'var(--nq-blue)'
           <LineChart
             :data="balanceData" :height="140" :categories="balanceCategories"
             :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => formatLunaAsNim(t * 1e5)"
-            hide-legend :curve-type="CurveType.MonotoneX"
+            hide-legend curve-type="monotoneX"
           />
         </div>
 
@@ -96,7 +95,7 @@ const stakersCategories = { stakers: { name: 'Stakers', color: 'var(--nq-blue)'
         <div bg-neutral-0 outline="~ 1.5 neutral/6" rounded-8 shadow f-p-md>
           <LineChart
             :data="stakersData" :height="140" :categories="stakersCategories"
-            :x-formatter="(t: number) => `E${t}`" hide-legend :curve-type="CurveType.MonotoneX"
+            :x-formatter="(t: number) => `E${t}`" hide-legend curve-type="monotoneX"
           />
         </div>
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5febaf2..535da1a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -157,7 +157,7 @@ export default defineNuxtConfig({
     },
 
     externals: {
-      external: ['ws'],
+      external: ['ws', '@unovis/ts', '@unovis/vue', 'vue-chrts', 'elkjs'],
     },
   },
 
diff --git a/patches/@unovis__ts@1.5.2.patch b/patches/@unovis__ts@1.5.2.patch
new file mode 100644
index 0000000..35b2caf
--- /dev/null
+++ b/patches/@unovis__ts@1.5.2.patch
@@ -0,0 +1,15 @@
+diff --git a/index.js b/index.js
+index ef97708ce987e88d6db1189a2f735110fe04f6f6..f94a95101593cc1e05fb74e43b80ad6228b80cfd 100644
+--- a/index.js
++++ b/index.js
+@@ -1,10 +1,5 @@
+-import './containers.js';
+-import './components.js';
+-import './data-models/index.js';
+-import './types.js';
+ export { colors, colorsDark, getCSSColorVariable, getDarkerColor, getLighterColor } from './styles/colors.js';
+ export { styleExtraLargeSize, styleLargeSize } from './styles/sizes.js';
+-import './utils/index.js';
+ export { ContainerCore } from './core/container/index.js';
+ export { SingleContainer } from './containers/single-container/index.js';
+ export { XYContainer } from './containers/xy-container/index.js';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ab5c96..b0974af 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -175,6 +175,11 @@ catalogs:
       specifier: ^4.0.8
       version: 4.0.8
 
+patchedDependencies:
+  '@unovis/ts@1.5.2':
+    hash: a703566dd7d5e86c6b4687bf4ebeaa82f300281f9df54ab2cc0854d144005677
+    path: patches/@unovis__ts@1.5.2.patch
+
 importers:
 
   .:
@@ -193,10 +198,10 @@ importers:
         version: 8.21.3(vue@3.5.18(typescript@5.8.3))
       '@unovis/ts':
         specifier: 'catalog:'
-        version: 1.5.2
+        version: 1.5.2(patch_hash=a703566dd7d5e86c6b4687bf4ebeaa82f300281f9df54ab2cc0854d144005677)
       '@unovis/vue':
         specifier: 'catalog:'
-        version: 1.5.2(@unovis/ts@1.5.2)(vue@3.5.18(typescript@5.8.3))
+        version: 1.5.2(@unovis/ts@1.5.2(patch_hash=a703566dd7d5e86c6b4687bf4ebeaa82f300281f9df54ab2cc0854d144005677))(vue@3.5.18(typescript@5.8.3))
       '@vueuse/core':
         specifier: 'catalog:'
         version: 13.5.0(vue@3.5.18(typescript@5.8.3))
@@ -11882,7 +11887,7 @@ snapshots:
     dependencies:
       lodash-es: 4.17.21
 
-  '@unovis/ts@1.5.2':
+  '@unovis/ts@1.5.2(patch_hash=a703566dd7d5e86c6b4687bf4ebeaa82f300281f9df54ab2cc0854d144005677)':
     dependencies:
       '@emotion/css': 11.13.5
       '@juggle/resize-observer': 3.4.0
@@ -11992,9 +11997,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@unovis/vue@1.5.2(@unovis/ts@1.5.2)(vue@3.5.18(typescript@5.8.3))':
+  '@unovis/vue@1.5.2(@unovis/ts@1.5.2(patch_hash=a703566dd7d5e86c6b4687bf4ebeaa82f300281f9df54ab2cc0854d144005677))(vue@3.5.18(typescript@5.8.3))':
     dependencies:
-      '@unovis/ts': 1.5.2
+      '@unovis/ts': 1.5.2(patch_hash=a703566dd7d5e86c6b4687bf4ebeaa82f300281f9df54ab2cc0854d144005677)
       vue: 3.5.18(typescript@5.8.3)
 
   '@unovis/vue@1.6.4(@unovis/ts@1.6.4)(vue@3.5.18(typescript@5.8.3))':
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index e03c07b..ec14bb7 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,6 +1,8 @@
 packages:
   - packages/**
 
+patchedDependencies:
+  '@unovis/ts@1.5.2': patches/@unovis__ts@1.5.2.patch
 catalog:
   '@antfu/eslint-config': ^4.19.0
   '@antfu/ni': ^25.0.0

From 5b1302dd6a2cbbd75b2ff3aec9816fefef7a4151 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Fri, 13 Feb 2026 22:10:52 +0100
Subject: [PATCH 2/2] fix CurveType typecheck without runtime import

---
 app/components/validator/LayoutDashboard.vue | 4 ++--
 app/components/validator/LayoutDeepDive.vue  | 4 ++--
 app/components/validator/LayoutProfile.vue   | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/validator/LayoutDashboard.vue b/app/components/validator/LayoutDashboard.vue
index 7c1524d..3f5fa0b 100644
--- a/app/components/validator/LayoutDashboard.vue
+++ b/app/components/validator/LayoutDashboard.vue
@@ -67,7 +67,7 @@ const donutCategories = { 0: { name: 'Availability', color: 'var(--nq-blue)' },
         <AreaChart
           :data="scoreTrendData" :height="200" :categories="scoreCategories"
           :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => `${Math.round(t * 100)}`"
-          :y-domain="[0, 1]" hide-legend curve-type="monotoneX"
+          :y-domain="[0, 1]" hide-legend :curve-type="('monotoneX' as any)"
         />
       </div>
     </div>
@@ -87,7 +87,7 @@ const donutCategories = { 0: { name: 'Availability', color: 'var(--nq-blue)' },
         <LineChart
           :data="balanceData" :height="200" :categories="balanceCategories"
           :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => formatLunaAsNim(t * 1e5)"
-          hide-legend curve-type="monotoneX"
+          hide-legend :curve-type="('monotoneX' as any)"
         />
       </div>
     </div>
diff --git a/app/components/validator/LayoutDeepDive.vue b/app/components/validator/LayoutDeepDive.vue
index f5398c2..555cd8c 100644
--- a/app/components/validator/LayoutDeepDive.vue
+++ b/app/components/validator/LayoutDeepDive.vue
@@ -44,7 +44,7 @@ const dualLineCategories = { score: { name: 'Score', color: 'var(--nq-green)' }
       <AreaChart
         :data="scoreTrendAllData" :height="280" :categories="allScoreCategories"
         :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => `${Math.round(t * 100)}`"
-        :y-domain="[0, 1]" curve-type="monotoneX"
+        :y-domain="[0, 1]" :curve-type="('monotoneX' as any)"
       />
     </div>
 
@@ -65,7 +65,7 @@ const dualLineCategories = { score: { name: 'Score', color: 'var(--nq-green)' }
         <span nq-label text="11 neutral-800" mb-8 block>Stakers</span>
         <LineChart
           :data="stakersData" :height="200" :categories="stakersCategories"
-          :x-formatter="(t: number) => `E${t}`" hide-legend curve-type="monotoneX"
+          :x-formatter="(t: number) => `E${t}`" hide-legend :curve-type="('monotoneX' as any)"
         />
       </div>
       <div flex="~ col gap-16">
diff --git a/app/components/validator/LayoutProfile.vue b/app/components/validator/LayoutProfile.vue
index 034d9bd..621339d 100644
--- a/app/components/validator/LayoutProfile.vue
+++ b/app/components/validator/LayoutProfile.vue
@@ -53,7 +53,7 @@ const stakersCategories = { stakers: { name: 'Stakers', color: 'var(--nq-blue)'
           <AreaChart
             :data="scoreTrendData" :height="200" :categories="scoreCategories"
             :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => `${Math.round(t * 100)}`"
-            :y-domain="[0, 1]" hide-legend curve-type="monotoneX"
+            :y-domain="[0, 1]" hide-legend :curve-type="('monotoneX' as any)"
           />
         </div>
 
@@ -87,7 +87,7 @@ const stakersCategories = { stakers: { name: 'Stakers', color: 'var(--nq-blue)'
           <LineChart
             :data="balanceData" :height="140" :categories="balanceCategories"
             :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => formatLunaAsNim(t * 1e5)"
-            hide-legend curve-type="monotoneX"
+            hide-legend :curve-type="('monotoneX' as any)"
           />
         </div>
 
@@ -95,7 +95,7 @@ const stakersCategories = { stakers: { name: 'Stakers', color: 'var(--nq-blue)'
         <div bg-neutral-0 outline="~ 1.5 neutral/6" rounded-8 shadow f-p-md>
           <LineChart
             :data="stakersData" :height="140" :categories="stakersCategories"
-            :x-formatter="(t: number) => `E${t}`" hide-legend curve-type="monotoneX"
+            :x-formatter="(t: number) => `E${t}`" hide-legend :curve-type="('monotoneX' as any)"
           />
         </div>