@xen-orchestra/web-core 0.20.1 → 0.22.0

package/lib/packages/mapper/README.md

@@ -0,0 +1,166 @@
+# Mapper System
+
+A system for mapping values from one type to another with support for reactive sources.
+
+## Core Concepts
+
+- **Mapping**: A structure that defines transformations from a source type to a destination type
+- **Source**: The value to be transformed, which can be reactive
+- **Default Source**: A fallback value to use when the source is undefined or not found in the mapping
+
+## Usage
+
+### `useMapper` Composable
+
+```typescript
+const mappedValue = useMapper(sourceValue, mapping, defaultValue)
+```
+
+|                | Required | Type                      | Description                                                        |
+| -------------- | :------: | ------------------------- | ------------------------------------------------------------------ |
+| `sourceValue`  |    ✓     | `MaybeRefOrGetter<TFrom>` | The source value to be mapped (ref, getter function, or raw value) |
+| `mapping`      |    ✓     | `Mapping<TFrom, TTo>`     | The mapping between source and destination values                  |
+| `defaultValue` |    ✓     | `MaybeRefOrGetter<TFrom>` | Default source value to use when source is undefined/not found     |
+
+#### Return Value
+
+|               | Type               | Description                                   |
+| ------------- | ------------------ | --------------------------------------------- |
+| `mappedValue` | `ComputedRef<TTo>` | A computed reference of the transformed value |
+
+### `createMapper` Function
+
+Creates a reusable mapper function from a mapping configuration.
+
+```typescript
+const getValueFor = createMapper(mapping, defaultValue)
+const mappedValue = getValueFor(sourceValue)
+```
+
+|                | Required | Type                                    | Description                                          |
+| -------------- | :------: | --------------------------------------- | ---------------------------------------------------- |
+| `mapping`      |    ✓     | `MaybeRefOrGetter<Mapping<TFrom, TTo>>` | The mapping between source and destination values    |
+| `defaultValue` |    ✓     | `MaybeRefOrGetter<TFrom>`               | Default source value to use when source is undefined |
+
+#### Return Value
+
+|          | Type                     | Description                                            |
+| -------- | ------------------------ | ------------------------------------------------------ |
+| `mapper` | `(source: TFrom) => TTo` | Function that maps a source value to destination value |
+
+## Mapping Types
+
+The `mapping` parameter supports several formats:
+
+1. **Object Literal**: For when `TFrom` extends `PropertyKey` (string, number, or symbol)
+
+   ```typescript
+   const mapping = {
+     red: 'crimson',
+     blue: 'navy',
+     green: 'forest',
+   }
+   ```
+
+2. **Map Instance**: For complex or non-serializable source keys
+
+   ```typescript
+   const mapping = new Map([
+     [ADMIN_SYMBOL, { level: 3, canEdit: true }],
+     [EDITOR_SYMBOL, { level: 2, canEdit: true }],
+     [VIEWER_SYMBOL, { level: 1, canEdit: false }],
+   ])
+   ```
+
+3. **Tuple Array**: For boolean or enum values
+   ```typescript
+   const mapping = [
+     [true, 'Active'],
+     [false, 'Inactive'],
+     [undefined, 'Unknown'],
+   ]
+   ```
+
+## Basic Example
+
+```vue
+<template>
+  <div>
+    <div>Current status: {{ status }}</div>
+    <div>Status color: {{ statusColor }}</div>
+
+    <button @click="status = 'success'">Success</button>
+    <button @click="status = 'error'">Error</button>
+    <button @click="status = 'warning'">Warning</button>
+    <button @click="status = 'info'">Info</button>
+    <button @click="status = 'foobar'">Unknown</button>
+    <button @click="status = undefined">Reset</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMapper } from '@core/packages/mapper/use-mapper.ts'
+import { ref } from 'vue'
+
+type Status = 'success' | 'error' | 'warning' | 'info'
+
+const status = ref<Status | undefined>(undefined)
+
+const statusColor = useMapper(
+  status,
+  {
+    success: 'green',
+    error: 'red',
+    warning: 'orange',
+    info: 'blue',
+  },
+  'info' // Default source value when status is undefined or not found
+)
+</script>
+```
+
+## Reactive Mapping
+
+Both the source value and the mapping object can be reactive:
+
+```vue
+<template>
+  <div>
+    <div>Current status: {{ deviceStatusText }}</div>
+
+    <button type="button" @click="deviceStatus = 'yes'">Yes</button>
+    <button type="button" @click="deviceStatus = 'no'">No</button>
+
+    <div>
+      <button type="button" @click="currentMapping = 1 - currentMapping">Toggle mapping</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMapper } from '@core/packages/mapper/use-mapper.ts'
+import { computed, ref } from 'vue'
+
+const deviceStatus = ref('online')
+
+const mappings = [
+  {
+    yes: 'Yes',
+    no: 'No',
+  },
+  {
+    yes: 'Yep!',
+    no: 'Nope!',
+  },
+]
+
+const currentMapping = ref(0)
+
+// If the mapping changes, the computed result will update
+const deviceStatusText = useMapper(
+  deviceStatus,
+  computed(() => mappings[currentMapping.value]),
+  'no'
+)
+</script>
+```

package/lib/packages/mapper/convert-to-map.ts

@@ -0,0 +1,5 @@
+import type { AnyMapping } from './types.ts'
+
+export function convertToMap(mapping: AnyMapping): Map<unknown, unknown> {
+  return mapping instanceof Map ? mapping : Array.isArray(mapping) ? new Map(mapping) : new Map(Object.entries(mapping))
+}

package/lib/packages/mapper/create-mapper.ts

@@ -0,0 +1,30 @@
+import type { AnyMapping } from './types.ts'
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+import { convertToMap } from './convert-to-map.ts'
+
+export function createMapper<const TFrom extends PropertyKey, const TTo>(
+  mapping: MaybeRefOrGetter<Record<TFrom, TTo>>,
+  defaultSource: NoInfer<MaybeRefOrGetter<TFrom>>
+): (source: undefined | TFrom) => TTo
+
+export function createMapper<const TFrom, const TTo>(
+  mapping: MaybeRefOrGetter<Map<TFrom, TTo>>,
+  defaultSource: NoInfer<MaybeRefOrGetter<TFrom>>
+): (source: undefined | TFrom) => TTo
+
+export function createMapper<const TFrom, const TTo>(
+  mapping: MaybeRefOrGetter<[TFrom, TTo][]>,
+  defaultSource: NoInfer<MaybeRefOrGetter<TFrom>>
+): (source: undefined | TFrom) => TTo
+
+export function createMapper(mapping: MaybeRefOrGetter<AnyMapping>, defaultSource: MaybeRefOrGetter) {
+  const map = computed(() => convertToMap(toValue(mapping)))
+
+  return function get(source: unknown) {
+    if (map.value.has(source)) {
+      return map.value.get(source)!
+    }
+
+    return map.value.get(toValue(defaultSource))!
+  }
+}

package/lib/packages/mapper/index.ts

@@ -0,0 +1,4 @@
+export * from './convert-to-map.ts'
+export * from './create-mapper.ts'
+export * from './types.ts'
+export * from './use-mapper.ts'

package/lib/packages/mapper/types.ts

@@ -0,0 +1 @@
+export type AnyMapping = Record<PropertyKey, any> | Map<any, any> | [any, any][]

package/lib/packages/mapper/use-mapper.ts

@@ -0,0 +1,31 @@
+import type { AnyMapping } from './types.ts'
+import { computed, type ComputedRef, type MaybeRefOrGetter, toValue } from 'vue'
+import { createMapper } from './create-mapper.ts'
+
+export function useMapper<const TFrom extends PropertyKey, const TTo>(
+  source: MaybeRefOrGetter<TFrom | undefined>,
+  mapping: MaybeRefOrGetter<Record<TFrom, TTo>>,
+  defaultSource: NoInfer<MaybeRefOrGetter<TFrom>>
+): ComputedRef<TTo>
+
+export function useMapper<const TFrom, const TTo>(
+  source: MaybeRefOrGetter<TFrom | undefined>,
+  mapping: MaybeRefOrGetter<Map<TFrom, TTo>>,
+  defaultSource: NoInfer<MaybeRefOrGetter<TFrom>>
+): ComputedRef<TTo>
+
+export function useMapper<const TFrom, const TTo>(
+  source: MaybeRefOrGetter<TFrom | undefined>,
+  mapping: MaybeRefOrGetter<[TFrom, TTo][]>,
+  defaultSource: NoInfer<MaybeRefOrGetter<TFrom>>
+): ComputedRef<TTo>
+
+export function useMapper(
+  source: MaybeRefOrGetter,
+  mapping: MaybeRefOrGetter<AnyMapping>,
+  defaultSource: MaybeRefOrGetter
+): ComputedRef {
+  const mapper = createMapper(mapping, defaultSource)
+
+  return computed(() => mapper(toValue(source)))
+}

package/lib/stores/sidebar.store.ts

@@ -53,7 +53,7 @@ export const useSidebarStore = defineStore('layout', () => {
   watch(
     () => uiStore.isMobile,
     isMobile => {
-      // keep the state of desktop expention
+      // keep the state of desktop expansion
       if (isMobile) {
         desktopState = isExpanded.value
       }

package/lib/types/chart.ts

@@ -2,8 +2,8 @@ export type LinearChartData = {
   label: string
   data: {
     timestamp: number
-    value: number
+    value: number | null
   }[]
 }[]
 
-export type ValueFormatter = (value: number) => string
+export type ValueFormatter = (value: number | null) => string

package/lib/types/utility.type.ts

@@ -9,3 +9,12 @@ export type Branded<TBrand extends string, TType = string> = TType & { [__brand]
 export type EmptyObject = Record<string, never>
 
 export type StringKeyOf<T> = Extract<keyof T, string>
+
+export type KeyOfByValue<T, TValue> =
+  T extends Record<PropertyKey, unknown>
+    ? keyof {
+        [K in keyof T as T[K] extends TValue ? K : never]: T[K]
+      }
+    : never
+
+export type ArrayFilterPredicate<T> = (value: T, index: number, array: T[]) => boolean

package/lib/utils/object.util.ts

@@ -0,0 +1,16 @@
+export function objectEntries<T, K extends string = string>(obj: { [Key in K]: T } | ArrayLike<T>): [K, T][] {
+  return Object.entries(obj) as [K, T][]
+}
+
+export function objectFromEntries<T = any, K extends PropertyKey = PropertyKey>(
+  entries: Iterable<readonly [K, T]>
+): { [Key in K]: T } {
+  return Object.fromEntries(entries) as { [Key in K]: T }
+}
+
+export function hasObjectProperty<TSource, TProperty extends PropertyKey>(
+  source: TSource,
+  property: TProperty
+): source is TSource & Record<TProperty, unknown> {
+  return typeof source === 'object' && source !== null && Object.prototype.hasOwnProperty.call(source, property)
+}

package/lib/utils/size.util.ts

@@ -1,13 +1,24 @@
-import { parse, Scale, raw } from 'human-format'
+import { parse, raw, Scale, type Info } from 'human-format'
 
 const scale = Scale.create(['', 'KiB', 'MiB', 'GiB', 'TiB'], 1024)
 
-export const formatSizeRaw = (bytes: number | undefined, decimals: number) => {
+export function formatSizeRaw(bytes: number, decimals: number): Info<Scale<'B' | 'KiB' | 'MiB' | 'GiB' | 'TiB'>>
+export function formatSizeRaw(bytes: undefined, decimals: number): undefined
+export function formatSizeRaw(
+  bytes: undefined | number,
+  decimals: number
+): undefined | Info<Scale<'B' | 'KiB' | 'MiB' | 'GiB' | 'TiB'>>
+export function formatSizeRaw(
+  bytes: number | undefined,
+  decimals: number
+): Info<Scale<'B' | 'KiB' | 'MiB' | 'GiB' | 'TiB'>> | undefined {
   if (bytes === undefined) {
     return undefined
   }
 
-  return raw(bytes, { maxDecimals: decimals, scale })
+  const result = raw(bytes, { maxDecimals: decimals, scale })
+
+  return { ...result, prefix: result.prefix === '' ? 'B' : result.prefix }
 }
 
 export const formatSizeParse = (size: number | undefined, unit?: string) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.20.1",
+  "version": "0.22.0",
   "private": false,
   "exports": {
     "./*": {
@@ -27,6 +27,7 @@
     "iterable-backoff": "^0.1.0",
     "lodash-es": "^4.17.21",
     "placement.js": "^1.0.0-beta.5",
+    "simple-icons": "^14.14.0",
     "vue-echarts": "^6.6.8"
   },
   "peerDependencies": {

package/lib/assets/zoom.svg

@@ -1,85 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Zoom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 397.13 396.85">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #eaea92;
-      }
-
-      .cls-2, .cls-3, .cls-4 {
-        fill: #8f84ff;
-      }
-
-      .cls-2, .cls-5 {
-        opacity: .3;
-      }
-
-      .cls-6, .cls-5 {
-        fill: #fff;
-      }
-
-      .cls-3 {
-        opacity: .14;
-      }
-
-      .cls-7 {
-        fill: #181849;
-      }
-
-      .cls-8 {
-        fill: #1a1b38;
-      }
-    </style>
-  </defs>
-  <path class="cls-4" d="M129.55,173.68c-6.44,2.53-12.65,5.45-18.79,8.51-6.13,3.06-12.16,6.31-18.12,9.68-5.96,3.37-11.83,6.88-17.56,10.64-2.87,1.87-5.7,3.82-8.49,5.83-2.79,2.02-5.54,4.09-8.18,6.36-1.46,1.25-1.62,3.44-.37,4.9.95,1.11,2.47,1.47,3.78,1.02,3.29-1.14,6.47-2.48,9.62-3.87,3.14-1.4,6.25-2.86,9.31-4.4,6.13-3.06,12.13-6.36,18.04-9.82,5.91-3.45,11.75-7.02,17.48-10.78,5.73-3.76,11.39-7.66,16.81-11.95,1.55-1.22,1.81-3.47.59-5.02-1-1.26-2.68-1.67-4.11-1.11Z"/>
-  <path class="cls-3" d="M194.07,50.23c74.01-2.19,138.12,51.52,147.8,121.98,10.59,77.04-47.69,146.36-119.41,157.46-89.2,13.81-175.73-66.08-167.96-152.75,5.85-65.3,64.33-124.47,139.57-126.69Z"/>
-  <path class="cls-8" d="M90.67,198.68c.14.05.25.11.35.19.1.02.2.04.3.06.46.09.46.85,0,.93-.1.02-.2.04-.3.06-.1.08-.21.14-.35.19-.46.16-.93-.25-.93-.71,0-.46.47-.87.93-.71Z"/>
-  <path class="cls-4" d="M162.94,225.43h0c-1.62-2.75-4.97-4.27-8.07-3.67l-48.48,9.41c-3.68.71-5.75,4.14-4.62,7.64l32.93,102.68c1.12,3.51,5.02,5.77,8.7,5.06l153.84-29.87c3.68-.71,5.75-4.14,4.62-7.64l-27.66-86.24c-1.12-3.51-5.02-5.77-8.7-5.06l-83.71,16.25c-7.25,1.41-15.06-2.14-18.85-8.56Z"/>
-  <polygon class="cls-6" points="299.39 311.24 138.65 342.45 108.5 236.07 269.23 204.87 299.39 311.24"/>
-  <polygon class="cls-1" points="299.39 311.24 138.65 342.45 111.03 235.58 269.23 204.87 299.39 311.24"/>
-  <polygon class="cls-6" points="299.39 311.24 138.65 342.45 111.46 231.94 272.2 200.73 299.39 311.24"/>
-  <polygon class="cls-6" points="299.39 311.24 138.65 342.45 114.8 231.29 272.2 200.73 299.39 311.24"/>
-  <polygon class="cls-1" points="299.39 280.37 138.65 311.57 115.44 197.14 276.18 165.94 299.39 280.37"/>
-  <polygon class="cls-1" points="299.39 311.24 138.65 342.45 120.12 229.37 279.82 198.36 299.39 311.24"/>
-  <polygon class="cls-6" points="300.96 307.85 138.65 342.45 121.79 229.06 282.81 198.64 300.96 307.85"/>
-  <polygon class="cls-1" points="299.39 311.24 138.65 342.45 124.91 231.07 285.65 199.87 299.39 311.24"/>
-  <polygon class="cls-6" points="299.39 311.24 138.65 342.45 126.31 231.78 287.04 200.57 299.39 311.24"/>
-  <path class="cls-4" d="M199.21,225.47h0c-.69-3-3.38-4.71-6.48-4.1l-48.48,9.41c-3.68.71-6.66,4.39-6.67,8.21l-.11,101.8c0,3.82,2.97,6.33,6.65,5.62l153.84-29.87c3.68-.71,6.66-4.39,6.67-8.21l.09-83.92c0-3.82-2.97-6.33-6.65-5.62l-83.71,16.25c-7.25,1.41-13.53-2.57-15.15-9.58Z"/>
-  <path class="cls-2" d="M153.88,195.95c26.94,15.96,61.72,7.06,77.68-19.88,15.96-26.94,7.06-61.72-19.88-77.68-26.94-15.96-61.72-7.07-77.68,19.87-15.96,26.94-7.06,61.72,19.88,77.68Z"/>
-  <path class="cls-5" d="M181.76,90.48l27.36,106.91c.76-.4,1.52-.82,2.26-1.25,4.76-2.77,9.13-6.25,12.98-10.41h0s-23.63-92.34-23.63-92.34c-6.21-2.08-12.62-3.03-18.97-2.91Z"/>
-  <path class="cls-5" d="M147.71,102.6l25.72,100.51c8.64,1.45,17.42.84,25.66-1.64l-28.09-109.76c-8.42,1.78-16.41,5.47-23.3,10.89Z"/>
-  <path class="cls-4" d="M212.83,199.46c-28.88,16.6-65.74,6.64-82.34-22.24-16.6-28.88-6.64-65.74,22.24-82.34,28.88-16.6,65.74-6.64,82.34,22.24,16.6,28.88,6.64,65.75-22.23,82.34ZM210.38,195.19c26.52-15.24,35.66-49.09,20.42-75.62-15.24-26.51-49.09-35.66-75.61-20.42-26.52,15.24-35.66,49.09-20.42,75.61,15.24,26.52,49.09,35.67,75.61,20.43Z"/>
-  <path class="cls-4" d="M133.07,179.81c-5.43,4.3-11.08,8.19-16.81,11.95-5.74,3.76-11.58,7.33-17.49,10.78-.95.56-1.91,1.11-2.87,1.66-4.98,2.86-10.02,5.59-15.17,8.16-3.06,1.54-6.17,3-9.31,4.4-3.15,1.39-6.33,2.73-9.62,3.87-1.3.45-2.82.09-3.77-1.02-1.25-1.46-1.08-3.65.37-4.9,2.65-2.27,5.4-4.34,8.19-6.36,2.79-2.01,5.61-3.96,8.48-5.83,5.74-3.76,11.61-7.28,17.57-10.65,1.23-.69,2.46-1.38,3.7-2.07,4.75-2.63,9.55-5.18,14.42-7.61,6.13-3.06,12.34-5.98,18.78-8.51,1.43-.56,3.12-.15,4.11,1.11,1.23,1.55.97,3.8-.58,5.02Z"/>
-  <path class="cls-6" d="M278.46,132.05l-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3,51.04-28.52-1.68-3-1.68-3-3,1.68-1.68-3-3,1.68-1.68-3-3,1.68-1.68-3,6.01-3.36-1.68-3,6.01-3.36-1.68-3,3-1.68-3.35-6-3,1.68-1.68-3-6.01,3.36,1.68,3-6.01,3.36,1.68,3-3,1.68-6.71-12.01-3,1.68-3,1.68,1.68,3Z"/>
-  <rect class="cls-8" x="259.33" y="166.05" width="58.47" height="3.44" transform="translate(-45.17 162.06) rotate(-29.19)"/>
-  <rect class="cls-8" x="264.16" y="174.79" width="3.44" height="3.44" transform="translate(-52.32 152.1) rotate(-29.19)"/>
-  <rect class="cls-8" x="265.48" y="170.11" width="3.44" height="3.44" transform="translate(-49.87 152.15) rotate(-29.19)"/>
-  <rect class="cls-8" x="266.81" y="165.43" width="3.44" height="3.44" transform="translate(-47.42 152.2) rotate(-29.19)"/>
-  <rect class="cls-8" x="268.13" y="160.75" width="3.44" height="3.44" transform="translate(-44.97 152.26) rotate(-29.19)"/>
-  <rect class="cls-8" x="269.46" y="156.07" width="3.44" height="3.44" transform="translate(-42.52 152.31) rotate(-29.19)"/>
-  <rect class="cls-8" x="270.78" y="151.39" width="3.44" height="3.44" transform="translate(-40.07 152.36) rotate(-29.19)"/>
-  <rect class="cls-8" x="272.11" y="146.71" width="3.44" height="3.44" transform="translate(-37.62 152.41) rotate(-29.19)"/>
-  <rect class="cls-8" x="273.43" y="142.03" width="3.44" height="3.44" transform="translate(-35.16 152.46) rotate(-29.19)"/>
-  <rect class="cls-8" x="274.76" y="137.35" width="3.44" height="3.44" transform="translate(-32.71 152.52) rotate(-29.19)"/>
-  <rect class="cls-8" x="276.08" y="132.67" width="3.44" height="3.44" transform="translate(-30.26 152.57) rotate(-29.19)"/>
-  <rect class="cls-8" x="277.41" y="127.99" width="3.44" height="3.44" transform="translate(-27.81 152.62) rotate(-29.19)"/>
-  <rect class="cls-8" x="283.77" y="125.44" width="3.44" height="17.19" transform="translate(-29.11 156.27) rotate(-29.19)"/>
-  <rect class="cls-8" x="290.12" y="136.64" width="3.44" height="3.44" transform="translate(-30.42 159.92) rotate(-29.19)"/>
-  <rect class="cls-8" x="295.15" y="145.65" width="3.44" height="3.44" transform="translate(-34.17 163.52) rotate(-29.19)"/>
-  <rect class="cls-8" x="296.26" y="140.13" width="6.88" height="3.44" transform="translate(-31.12 164.2) rotate(-29.19)"/>
-  <rect class="cls-8" x="300.59" y="133.77" width="6.88" height="3.44" transform="translate(-27.47 165.5) rotate(-29.19)"/>
-  <rect class="cls-8" x="304.3" y="125.04" width="3.44" height="6.88" transform="translate(-23.79 165.58) rotate(-29.19)"/>
-  <rect class="cls-8" x="291.23" y="131.13" width="6.88" height="3.44" transform="translate(-27.37 160.6) rotate(-29.19)"/>
-  <rect class="cls-8" x="295.56" y="124.77" width="6.88" height="3.44" transform="translate(-23.72 161.9) rotate(-29.19)"/>
-  <rect class="cls-8" x="299.83" y="146.97" width="3.44" height="3.44" transform="translate(-34.22 165.97) rotate(-29.19)"/>
-  <rect class="cls-8" x="304.51" y="148.3" width="3.44" height="3.44" transform="translate(-34.27 168.42) rotate(-29.19)"/>
-  <rect class="cls-8" x="309.19" y="149.62" width="3.44" height="3.44" transform="translate(-34.33 170.87) rotate(-29.19)"/>
-  <polygon class="cls-7" points="173.4 252.35 171.52 258.69 165.18 260.57 171.52 262.45 173.4 268.79 175.28 262.45 181.62 260.57 175.28 258.69 173.4 252.35"/>
-  <polygon class="cls-7" points="283.94 292.49 282.82 296.27 279.05 297.39 282.82 298.51 283.94 302.28 285.06 298.51 288.84 297.39 285.06 296.27 283.94 292.49"/>
-  <polygon class="cls-7" points="244.55 182.48 242.67 188.82 236.33 190.7 242.67 192.58 244.55 198.92 246.43 192.58 252.77 190.7 246.43 188.82 244.55 182.48"/>
-  <path class="cls-6" d="M222.84,291.45c.62.17,1.24.34,1.85.5-6.22,2.4-12.01,4.07-16.61,4.88-5.54.98-9.34.71-10.07-1.05-.72-1.73,1.57-4.54,6.04-7.74.07.37.13.76.23,1.13-3.52,2.54-5.25,4.66-4.7,5.96.55,1.32,3.47,1.51,7.85.77,4.11-.7,9.5-2.23,15.42-4.45Z"/>
-  <path class="cls-6" d="M247.13,280.34c-4.49,3.29-11.25,6.99-19.08,10.26-.52.22-1.04.43-1.56.64-.61-.15-1.23-.32-1.85-.48.98-.38,1.98-.79,2.98-1.2,8.13-3.39,15.07-7.18,19.31-10.34,3.21-2.39,4.88-4.43,4.36-5.67-.51-1.22-3.06-1.48-6.92-.91-.19-.32-.39-.64-.6-.95,5-.77,8.4-.43,9.08,1.21.7,1.67-1.53,4.38-5.72,7.45Z"/>
-  <path class="cls-6" d="M253.1,292.89c-.49,1.74-3.92,2.49-9.11,2.3-5.1-.19-11.91-1.29-19.31-3.23-.61-.16-1.23-.33-1.85-.5-.06-.02-.12-.03-.18-.05-7.81-2.19-14.68-4.89-19.52-7.5-4.95-2.67-7.77-5.24-7.25-7.07.51-1.8,4.05-2.59,9.54-2.32-.17.33-.37.68-.52,1.03-4.33-.19-7,.4-7.39,1.76-.39,1.38,1.79,3.34,5.68,5.47,4.62,2.53,11.67,5.28,19.76,7.55.56.16,1.11.31,1.66.46.62.17,1.24.33,1.85.48,7.1,1.79,13.5,2.8,18.05,2.93,4,.12,6.57-.45,6.94-1.74.36-1.28-1.48-3.06-4.86-5.01.05-.37.09-.74.12-1.11,4.4,2.49,6.85,4.87,6.37,6.58Z"/>
-  <path class="cls-6" d="M232.63,304.23c-11.71,3.96-24.46-2.36-28.41-14.07-3.95-11.71,2.36-24.46,14.07-28.41,11.71-3.96,24.46,2.36,28.41,14.07,3.95,11.71-2.36,24.46-14.07,28.41ZM218.74,263.1c-10.97,3.7-16.88,15.64-13.17,26.61,3.7,10.97,15.64,16.88,26.6,13.17,10.97-3.7,16.88-15.64,13.17-26.61-3.7-10.97-15.64-16.88-26.6-13.17Z"/>
-  <path class="cls-6" d="M248.48,286.34c.29-1.97.33-3.99.1-6.02,4.16-3.22,5.87-5.83,5.06-7.76-.77-1.86-3.62-2.5-8.47-1.94-5.59-8.92-16.77-13.2-27.17-9.69-6.43,2.17-11.29,6.9-13.84,12.67-5.46-.11-8.52.9-9.11,2.99-.62,2.19,1.8,4.81,7.16,7.78.07,1.19.23,2.39.49,3.58-4.5,3.38-6.36,6.12-5.5,8.16.87,2.08,4.33,2.65,10.29,1.68,5.97,7.23,16.01,10.42,25.41,7.25,5-1.69,9.05-4.92,11.8-8.98,2.85.06,5.06-.17,6.61-.69,1.46-.49,2.34-1.25,2.62-2.25.54-1.94-1.29-4.21-5.45-6.78ZM206.39,289.43c-.37-1.11-.62-2.22-.8-3.34,4.12,1.95,9.09,3.83,14.46,5.45-3.99,1.4-7.77,2.49-10.97,3.16-1.13-1.57-2.05-3.34-2.7-5.26ZM242.76,293.22c-3.78-.26-8.45-1.02-13.52-2.19,6.28-2.67,11.96-5.65,16.33-8.56.1,3.82-.92,7.54-2.82,10.75ZM250.48,273.88c.15.35-.26,1.46-2.47,3.36-.15-.57-.31-1.14-.5-1.7-.27-.79-.57-1.55-.91-2.29,2.73-.18,3.74.29,3.88.62ZM219.02,263.92c10.51-3.55,21.96,2.11,25.51,12.63.31.93.53,1.87.7,2.81-4.39,3.05-10.83,6.43-17.96,9.4-.88.37-1.79.73-2.7,1.09-.46-.12-.91-.25-1.37-.38-6.82-1.91-13.19-4.27-17.85-6.58.05-8.36,5.32-16.16,13.67-18.98ZM198.35,277.52c.13-.45,1.31-1.13,4.8-1.16-.47,1.57-.78,3.19-.91,4.85-3.29-1.99-4.01-3.26-3.89-3.69ZM200.37,294.8c-.18-.44.34-1.73,3.16-3.98.57,1.59,1.29,3.08,2.15,4.46-3.79.48-5.15-.07-5.32-.48ZM231.89,302.06c-7.53,2.54-15.53.34-20.77-4.97,2.79-.63,5.82-1.5,9.01-2.57,1.5-.51,3.04-1.06,4.6-1.66,5.84,1.52,11.44,2.55,16.17,2.98-2.3,2.78-5.36,4.99-9.02,6.22ZM250.63,292.2c-.11.38-1.18,1.02-4.32,1.11.65-1.31,1.17-2.67,1.56-4.08,2.34,1.59,2.86,2.61,2.76,2.97Z"/>
-</svg>

package/lib/components/backup-item/VtsBackupItem.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="vts-backup-item">
-    <RouterLink v-if="backup.route !== undefined" :to="backup.route">
-      {{ backup.label }}
-    </RouterLink>
-    <p v-else class="typo-body-bold">
-      {{ backup.label }}
-    </p>
-    <div class="states">
-      <VtsBackupState v-for="(state, index) in backup.states" :key="index" :state />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import VtsBackupState, { type BackupState } from '@core/components/backup-state/VtsBackupState.vue'
-import type { RouteLocationRaw } from 'vue-router'
-
-export type BackupStates = BackupState[]
-
-export type Backup = {
-  label: string
-  route?: RouteLocationRaw
-  states: BackupStates
-}
-
-defineProps<{
-  backup: Backup
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.vts-backup-item {
-  padding: 0.8rem 0.4rem;
-  border-top: 0.1rem solid var(--color-neutral-border);
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-
-  .states {
-    margin-inline-start: auto;
-    display: flex;
-    align-items: center;
-    gap: 0.2rem;
-  }
-}
-</style>

package/lib/composables/mapper.composable.md

@@ -1,74 +0,0 @@
-# `useMapper` composable
-
-This composable maps values from one type to another using a mapping record. It takes a source value, a mapping object, and a default value to use when the source value is undefined or not found in the mapping.
-
-## Usage
-
-```ts
-const mappedValue = useMapper(sourceValue, mapping, defaultValue)
-```
-
-|                | Required | Type                      | Default |                                                                                   |
-| -------------- | :------: | ------------------------- | ------- | --------------------------------------------------------------------------------- |
-| `sourceValue`  |    ✓     | `MaybeRefOrGetter<TFrom>` |         | The source value to be mapped. Can be a ref, a getter function, or a raw value    |
-| `mapping`      |    ✓     | `Record<TFrom, TTo>`      |         | An object mapping source values to destination values                             |
-| `defaultValue` |    ✓     | `MaybeRefOrGetter<TTo>`   |         | The default value to use when the source is undefined or not found in the mapping |
-
-## Return value
-
-|               | Type               |                                                  |
-| ------------- | ------------------ | ------------------------------------------------ |
-| `mappedValue` | `ComputedRef<TTo>` | A computed reference containing the mapped value |
-
-## Example
-
-```vue
-<template>
-  <div>
-    <p>Selected car color: {{ carColor }}</p>
-    <p>Recommended wall color: {{ wallColor }}</p>
-
-    <button @click="carColor = 'red'">Red Car</button>
-    <button @click="carColor = 'blue'">Blue Car</button>
-    <button @click="carColor = 'black'">Black Car</button>
-    <button @click="carColor = 'green'">Green Car</button>
-    <button @click="carColor = 'silver'">Silver Car</button>
-    <button @click="carColor = undefined">No Car</button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useMapper } from '@/composables/mapper'
-import { ref } from 'vue'
-
-// Source type
-type CarColor = 'red' | 'blue' | 'black' | 'green' | 'silver'
-
-// Destination type
-type WallColor = 'beige' | 'lightGray' | 'cream' | 'white'
-
-// Create a ref for the source value
-const carColor = ref<CarColor | undefined>(undefined)
-
-// Create a computed property that maps car color to wall color
-const wallColor = useMapper<CarColor, WallColor>(
-  carColor,
-  {
-    red: 'beige',
-    blue: 'lightGray',
-    black: 'cream',
-    green: 'beige',
-    silver: 'lightGray',
-  },
-  'white'
-)
-</script>
-```
-
-In this example:
-
-- When `carColor.value` is `'red'` or `'green'`, `wallColor.value` will be `'beige'`
-- When `carColor.value` is `'blue'` or `'silver'`, `wallColor.value` will be `'lightGray'`
-- When `carColor.value` is `'black'`, `wallColor.value` will be `'cream'`
-- When `carColor.value` is `undefined` or any value not in the mapping, `wallColor.value` will be
-  `'white'` (the default value)

package/lib/composables/mapper.composable.ts

@@ -1,18 +0,0 @@
-import { computed, type ComputedRef, type MaybeRefOrGetter, toValue } from 'vue'
-
-export function useMapper<TFrom extends string | number, TTo>(
-  _source: MaybeRefOrGetter<TFrom | undefined>,
-  mapping: Record<TFrom, TTo>,
-  _defaultValue: MaybeRefOrGetter<TTo>
-): ComputedRef<TTo> {
-  return computed(() => {
-    const source = toValue(_source)
-    const defaultValue = toValue(_defaultValue)
-
-    if (source === undefined) {
-      return defaultValue
-    }
-
-    return Object.prototype.hasOwnProperty.call(mapping, source) ? mapping[source] : defaultValue
-  })
-}