animations + cards

2025-09-30 01:10:12 +02:00
parent 631bc65c70
commit 9438394db8
20 changed files with 775 additions and 455 deletions
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -18,5 +18,5 @@ jobs:
          mkdir "$APP_DIR"
          cp -a $(find . -mindepth 1 -maxdepth 1 ! -name '.git' ! -name 'node_modules') "$APP_DIR/"
          export COMPOSE_BAKE=false
-          docker rmi "local/${REPO_NAME}"
+          docker rmi "local/${REPO_NAME}" 2>/dev/null || true
          bash /var/docker-web/src/cli.sh up "${REPO_NAME}"
--- a/app/app.vue
+++ b/app/app.vue
@@ -6,18 +6,11 @@
 </template>

 <script setup>
-import { useDataStore } from '@/store/dataStore'
 useHead({
  bodyAttrs: {
    class: 'bg-slate-100 dark:bg-slate-900'
  }
 })
-
-// @todo : load datas as plugin/middleware (cant load pinia in plugin/middleware) ?
-onMounted(async () => {
-  const dataStore = await useDataStore()
-  await dataStore.loadData()
-})
 </script>

 <style>
--- a/app/components/box.vue
+++ b/app/components/box.vue
@@ -1,327 +0,0 @@
-<template>
-  <!-- scène 3D -->
-  <div ref="scene" class="scene z-10">
-    <div ref="box" class="box">
-      <div class="face front relative" ref="frontFace">
-        <img class="cover absolute" :src="`/${compilation.id}/cover.jpg`" alt="">
-      </div>
-      <div class="face back" ref="backFace" />
-      <div class="face right" ref="rightFace" />
-      <div class="face left" ref="leftFace" />
-      <div class="face top" ref="topFace">
-        <img class="logo h-full p-1" src="/logo.svg" alt="">
-        <img class="absolute block h-1/2" style="left:5%;" :src="`/${compilation.id}/title.svg`" alt="">
-      </div>
-      <div class="face bottom" ref="bottomFace" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Compilation, BoxPosition } from '~~/types/types';
-
-const props = withDefaults(
-  defineProps<{
-    compilation: Compilation
-    position?: BoxPosition
-    size?: number
-  }>(),
-  {
-    position: () => ({ x: 0, y: 0, z: 0 }),
-    size: 6,
-  }
-)
-
-// States
-
-const angleX = ref(props.position.x)
-const angleY = ref(props.position.y)
-const angleZ = ref(props.position.z)
-
-const frontFace = ref()
-const backFace = ref()
-const rightFace = ref()
-const leftFace = ref()
-const topFace = ref()
-const bottomFace = ref()
-
-const box = ref()
-const scene = ref()
-
-/*
-  ÉTATS POUR LE DRAG + INERTIE
-*/
-let dragging = false
-let lastPointer = { x: 0, y: 0, time: 0 } // position précédente du pointeur
-let velocity = { x: 0, y: 0 }              // vitesse calculée pour inertie
-let raf = null                              // id du requestAnimationFrame
-
-/*
-  PARAMÈTRES DE RÉGLAGE
-*/
-const sensitivity = 0.3    // combien de degrés par pixel de mouvement
-const friction = 0.95      // inertie : 1 = sans perte, plus bas = ralentit vite
-const minVelocity = 0.02   // seuil sous lequel on arrête l’inertie
-const enableInertia = true // true = inertie activée, false = rotation immédiate sans suite
-
-/*
-  Applique la transformation CSS à la box
-*/
-function applyTransform() {
-  angleX.value = Math.round(angleX.value)
-  angleY.value = Math.round(angleY.value)
-  angleZ.value = Math.round(angleZ.value)
-
-  box.value.style.transform = `rotateX(${angleX.value}deg) rotateY(${angleY.value}deg) rotateZ(${angleZ.value}deg)`
-}
-
-function applySize() {
-  updateCssVar('--height', `${props.size * (100 / 3)}px`, scene.value)
-  updateCssVar('--width', `${props.size * 50}px`, scene.value)
-  updateCssVar('--depth', `${props.size * 10}px`, scene.value)
-}
-function applyColor() {
-  frontFace.value.style.setProperty('background', `${props.compilation.color2}`)
-  backFace.value.style.setProperty('background', `linear-gradient(to top, ${props.compilation.color1}, ${props.compilation.color2})`)
-  rightFace.value.style.setProperty('background', `linear-gradient(to top, ${props.compilation.color1}, ${props.compilation.color2})`)
-  leftFace.value.style.setProperty('background', `linear-gradient(to top, ${props.compilation.color1}, ${props.compilation.color2})`)
-  topFace.value.style.setProperty('background', `linear-gradient(to top, ${props.compilation.color2}, ${props.compilation.color2})`)
-  bottomFace.value.style.setProperty('background', `${props.compilation.color1}`)
-}
-
-/*
-  Fonction utilitaire : place la box directement à une rotation donnée
-*/
-function applyRotation() {
-  angleX.value = props.position.x
-  angleY.value = props.position.y
-  angleZ.value = props.position.z
-  applyTransform()
-
-  box.value.style.setProperty('transition', 'transform 800ms ease-in-out')
-  setTimeout(() => {
-    box.value.style.setProperty('transition', 'transform 120ms linear')
-  }, 120)
-}
-
-/*
-  Boucle d’inertie après un drag
-  - reprend la vitesse calculée à la release
-  - diminue petit à petit avec friction
-  - stoppe quand vitesse < minVelocity
-*/
-function tickInertia() {
-  if (!enableInertia) return
-
-  // appliquer la friction
-  velocity.x *= friction
-  velocity.y *= friction
-
-  // appliquer au box
-  angleX.value += velocity.y
-  angleY.value += velocity.x
-
-  // clamp angleX pour éviter de retourner la box trop loin
-  angleX.value = Math.max(-80, Math.min(80, angleX.value))
-
-  applyTransform()
-
-  // continuer tant qu’il reste du mouvement
-  if (Math.abs(velocity.x) > minVelocity || Math.abs(velocity.y) > minVelocity) {
-    raf = requestAnimationFrame(tickInertia)
-  } else {
-    raf = null
-  }
-}
-
-/*
-  Mise en place des listeners une fois le composant monté
-*/
-onMounted(() => {
-  applySize()
-  applyColor()
-  applyTransform()
-
-  // pointerdown = début du drag
-  const down = (ev) => {
-    ev.preventDefault()
-    dragging = true
-    scene.value.setPointerCapture(ev.pointerId)
-    lastPointer = { x: ev.clientX, y: ev.clientY, time: performance.now() }
-    velocity = { x: 0, y: 0 }
-    if (raf) { cancelAnimationFrame(raf); raf = null }
-  }
-
-  // pointermove = on bouge la souris ou le doigt
-  const move = (ev) => {
-    if (!dragging) return
-    ev.preventDefault()
-    const now = performance.now()
-    const dx = ev.clientX - lastPointer.x
-    const dy = ev.clientY - lastPointer.y
-
-    // mise à jour des angles
-    angleY.value += dx * sensitivity
-    angleX.value -= dy * sensitivity
-    angleX.value = Math.max(-80, Math.min(80, angleX.value))
-
-    // calcul vitesse pour inertie
-    const dt = Math.max(1, now - lastPointer.time)
-    velocity.x = (dx / dt) * 16 * sensitivity
-    velocity.y = (-dy / dt) * 16 * sensitivity
-
-    lastPointer = { x: ev.clientX, y: ev.clientY, time: now }
-
-    applyTransform()
-  }
-
-  // pointerup = fin du drag
-  const end = (ev) => {
-    if (!dragging) return
-    dragging = false
-    try { scene.value.releasePointerCapture(ev.pointerId) } catch { }
-    if (enableInertia && (Math.abs(velocity.x) > minVelocity || Math.abs(velocity.y) > minVelocity)) {
-      if (!raf) raf = requestAnimationFrame(tickInertia)
-    }
-  }
-
-  // attach des events
-  scene.value.addEventListener('pointerdown', down)
-  scene.value.addEventListener('pointermove', move)
-  scene.value.addEventListener('pointerup', end)
-  scene.value.addEventListener('pointercancel', end)
-  scene.value.addEventListener('pointerleave', end)
-
-  // cleanup au démontage
-  onBeforeUnmount(() => {
-    cancelAnimationFrame(raf)
-  })
-})
-
-watch(() => props.position, () => {
-  applyRotation()
-}, { deep: true })
-
-watch(() => props.compilation, () => {
-  applyColor()
-}, { deep: true })
-
-watch(() => props.size, () => {
-  applySize()
-})
-</script>
-
-
-<style>
-html,
-body {
-  height: 100%;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial;
-  -webkit-font-smoothing: antialiased;
-}
-
-/* scène avec perspective */
-.scene {
-  height: var(--height);
-  width: var(--width);
-  perspective: 1000px;
-  touch-action: none;
-  /* essentiel pour empêcher le scroll pendant le drag */
-  /* height: 20px; */
-  transition: all .5s;
-}
-
-/* l'objet 3D (box simple) */
-.box {
-  width: var(--width);
-  height: var(--height);
-  position: relative;
-  transform-style: preserve-3d;
-  transition: transform 120ms linear;
-  transition: height 120ms linear;
-  /* légère smoothing quand on lâche */
-  margin: auto;
-  user-select: none;
-  cursor: grab;
-}
-
-.box:active {
-  cursor: grabbing;
-}
-
-/* faces du box */
-.face {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  color: white;
-  font-weight: 600;
-  backface-visibility: hidden;
-  /* border: 2px solid rgba(255, 255, 255, 0.06); */
-  box-sizing: border-box;
-  transform-origin: top right;
-}
-
-.front,
-.back {
-  width: 100%;
-  height: 100%;
-}
-
-.face.top,
-.face.bottom {
-  width: var(--width);
-  height: var(--depth);
-}
-
-.face.left,
-.face.right {
-  width: var(--depth);
-  height: var(--height);
-}
-
-.face.front {
-  transform: translateX(0px) translateY(0px) translateZ(0px);
-}
-
-.face.back {
-  transform: rotateY(180deg) translateX(var(--width)) translateY(0px) translateZ(var(--depth));
-}
-
-.face.right {
-  transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--width));
-  transform-origin: top left;
-}
-
-.face.left {
-  transform: rotateY(-90deg) translateX(0) translateY(0px) translateZ(var(--depth));
-}
-
-.face.top {
-  transform: rotateX(90deg) translateX(0px) translateY(calc(var(--depth) * -1)) translateZ(0px);
-}
-
-.face.top>* {
-  @apply rotate-180;
-}
-
-.face.bottom {
-  transform: rotateX(-90deg) translateX(0) translateY(0px) translateZ(calc(var(--height)));
-}
-
-.cover {
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-}
-
-.logo {
-  filter: drop-shadow(2px 2px 0 rgb(0 0 0 / 0.8));
-}
-</style>
--- a/app/components/molecule/atropos.vue
+++ b/app/components/molecule/atropos.vue
--- a/app/components/molecule/box.vue
+++ b/app/components/molecule/box.vue
@@ -0,0 +1,296 @@
+<template>
+  <article class="box box-scene z-10" ref="scene">
+    <div class="box-object" ref="box">
+      <div class="face front relative" ref="frontFace">
+        <img class="cover absolute" :src="`/${compilation.id}/cover.jpg`" alt="">
+      </div>
+      <div class="face back" ref="backFace">
+        {{ compilation.description }}
+      </div>
+      <div class="face right" ref="rightFace" />
+      <div class="face left" ref="leftFace" />
+      <div class="face top" ref="topFace">
+        <img class="logo h-full p-1" src="/logo.svg" alt="">
+        <img class="absolute block h-1/2" style="left:5%;" :src="`/${compilation.id}/title.svg`" alt="">
+      </div>
+      <div class="face bottom" ref="bottomFace" />
+    </div>
+    <OrganismCompilationPage :compilation="compilation" class="box-page" v-if="props.BoxState === 'selected'" />
+  </article>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import type { Compilation, BoxState } from '~~/types/types'
+
+const props = withDefaults(
+  defineProps<{
+    compilation: Compilation
+    BoxState?: BoxState
+  }>(),
+  { BoxState: 'list' }
+)
+
+// --- Réfs ---
+const scene = ref<HTMLElement>()
+const box = ref<HTMLElement>()
+const frontFace = ref<HTMLElement>()
+const backFace = ref<HTMLElement>()
+const rightFace = ref<HTMLElement>()
+const leftFace = ref<HTMLElement>()
+const topFace = ref<HTMLElement>()
+const bottomFace = ref<HTMLElement>()
+
+// --- Angles ---
+const rotateX = ref(0)
+const rotateY = ref(0)
+const rotateZ = ref(0)
+
+// --- Drag + inertie ---
+let dragging = false
+let lastPointer = { x: 0, y: 0, time: 0 }
+let velocity = { x: 0, y: 0 }
+let raf: number | null = null
+
+const sensitivity = 0.3
+const friction = 0.95
+const minVelocity = 0.02
+const enableInertia = true
+
+// --- Transformations ---
+function applyTransform(duration = 0.5) {
+  if (!box.value) return
+  rotateX.value = Math.round(rotateX.value)
+  rotateY.value = Math.round(rotateY.value)
+  rotateZ.value = Math.round(rotateZ.value)
+
+  box.value.style.transition = `transform ${duration}s ease`
+  box.value.style.transform = `rotateX(${rotateX.value}deg) rotateY(${rotateY.value}deg) rotateZ(${rotateZ.value}deg)`
+}
+
+// --- Gestion BoxState ---
+function applyBoxState() {
+  switch (props.BoxState) {
+    case 'list':
+      rotateX.value = 76
+      rotateY.value = 0
+      rotateZ.value = 150
+      break
+    case 'selected':
+      rotateX.value = -20
+      rotateY.value = 20
+      rotateZ.value = 0
+      break
+    case 'hide':
+      rotateX.value = 76
+      rotateY.value = 0
+      rotateZ.value = 150
+      break
+  }
+  applyTransform(0.8) // transition fluide
+}
+
+// --- Couleurs ---
+function applyColor() {
+  if (!frontFace.value || !backFace.value || !leftFace.value || !topFace.value || !bottomFace.value) return
+
+  frontFace.value.style.background = props.compilation.color2
+  backFace.value.style.background = `linear-gradient(to top, ${props.compilation.color1}, ${props.compilation.color2})`
+  leftFace.value.style.background = `linear-gradient(to top, ${props.compilation.color1}, ${props.compilation.color2})`
+  rightFace.value.style.background = `linear-gradient(to top, ${props.compilation.color1}, ${props.compilation.color2})`
+  topFace.value.style.background = `linear-gradient(to top, ${props.compilation.color2}, ${props.compilation.color2})`
+  bottomFace.value.style.background = props.compilation.color1
+}
+
+// --- Inertie ---
+function tickInertia() {
+  if (!enableInertia) return
+
+  velocity.x *= friction
+  velocity.y *= friction
+
+  rotateX.value += velocity.y
+  rotateY.value += velocity.x
+  rotateX.value = Math.max(-80, Math.min(80, rotateX.value))
+
+  applyTransform(0.05) // court duration pour inertie fluide
+
+  if (Math.abs(velocity.x) > minVelocity || Math.abs(velocity.y) > minVelocity) {
+    raf = requestAnimationFrame(tickInertia)
+  } else {
+    raf = null
+  }
+}
+
+// --- Pointer events ---
+onMounted(() => {
+  applyColor()
+  applyBoxState()
+
+  const down = (ev: PointerEvent) => {
+    ev.preventDefault()
+    dragging = true
+    scene.value?.setPointerCapture(ev.pointerId)
+    lastPointer = { x: ev.clientX, y: ev.clientY, time: performance.now() }
+    velocity = { x: 0, y: 0 }
+    if (raf) { cancelAnimationFrame(raf); raf = null }
+  }
+
+  const move = (ev: PointerEvent) => {
+    if (!dragging) return
+    ev.preventDefault()
+    const now = performance.now()
+    const dx = ev.clientX - lastPointer.x
+    const dy = ev.clientY - lastPointer.y
+    const dt = Math.max(1, now - lastPointer.time)
+
+    rotateY.value += dx * sensitivity
+    rotateX.value -= dy * sensitivity
+    rotateX.value = Math.max(-80, Math.min(80, rotateX.value))
+
+    velocity.x = (dx / dt) * 16 * sensitivity
+    velocity.y = (-dy / dt) * 16 * sensitivity
+
+    lastPointer = { x: ev.clientX, y: ev.clientY, time: now }
+    applyTransform(0) // immédiat pendant drag
+  }
+
+  const end = (ev: PointerEvent) => {
+    if (!dragging) return
+    dragging = false
+    try { scene.value?.releasePointerCapture(ev.pointerId) } catch { }
+    if (enableInertia && (Math.abs(velocity.x) > minVelocity || Math.abs(velocity.y) > minVelocity)) {
+      if (!raf) raf = requestAnimationFrame(tickInertia)
+    }
+  }
+
+  scene.value?.addEventListener('pointerdown', down)
+  scene.value?.addEventListener('pointermove', move)
+  scene.value?.addEventListener('pointerup', end)
+  scene.value?.addEventListener('pointercancel', end)
+  scene.value?.addEventListener('pointerleave', end)
+
+  onBeforeUnmount(() => {
+    cancelAnimationFrame(raf!)
+  })
+})
+
+// --- Watchers ---
+watch(() => props.BoxState, () => applyBoxState())
+watch(() => props.compilation, () => applyColor(), { deep: true })
+</script>
+
+<style lang="scss" scoped>
+.box {
+  --size: 6px;
+  --height: calc(var(--size) * (100 / 3));
+  --width: calc(var(--size) * 50);
+  --depth: calc(var(--size) * 10);
+  transition: all .5s;
+
+  &.hide {
+    height: 0;
+    opacity: 0;
+    z-index: 0;
+  }
+
+  &.list {
+    @apply hover:scale-105;
+  }
+
+  &-scene {
+    height: calc(var(--size) * 20);
+    width: var(--width);
+    perspective: 1000px;
+    touch-action: none;
+  }
+
+  &-object {
+    width: var(--width);
+    height: var(--height);
+    position: relative;
+    transform-style: preserve-3d;
+    margin: auto;
+    user-select: none;
+
+    .list & {
+      cursor: pointer;
+    }
+
+    .selected & {
+      cursor: grab;
+    }
+
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  .face {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: white;
+    font-weight: 600;
+    backface-visibility: hidden;
+    box-sizing: border-box;
+    border: 1px solid black;
+  }
+
+  .front,
+  .back {
+    width: 100%;
+    height: 100%;
+  }
+
+  .face.top,
+  .face.bottom {
+    width: var(--width);
+    height: var(--depth);
+  }
+
+  .face.left,
+  .face.right {
+    width: var(--depth);
+    height: var(--height);
+  }
+
+  .face.front {
+    transform: translateX(0) translateY(0) translateZ(var(--depth));
+  }
+
+  .face.back {
+    transform: rotateY(180deg) translateX(0) translateY(0) translateZ(0);
+  }
+
+  .face.right {
+    transform: rotateY(90deg) translateX(calc(var(--depth)*-1)) translateY(0px) translateZ(var(--width));
+    transform-origin: top left;
+  }
+
+  .face.left {
+    transform: rotateY(-90deg) translateX(calc(var(--depth)/2)) translateY(0) translateZ(calc(var(--depth)/2));
+  }
+
+  .face.top {
+    transform: rotateX(90deg) translateX(0px) translateY(calc(var(--depth)/2)) translateZ(calc(var(--depth)/2));
+  }
+
+  .face.top>* {
+    @apply rotate-180;
+  }
+
+  .face.bottom {
+    transform: rotateX(-90deg) translateX(0px) translateY(calc(var(--depth)* -0.5)) translateZ(calc(var(--height) - var(--depth)/2));
+  }
+
+  .cover {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+</style>
--- a/app/components/molecule/card.vue
+++ b/app/components/molecule/card.vue
@@ -0,0 +1,25 @@
+<template>
+  <article
+    class="backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
+    <!-- Cover -->
+    <figure class="flex-1 overflow-hidden rounded-t-xl">
+      <img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
+    </figure>
+
+    <!-- Body -->
+    <div class="p-3 text-center bg-white rounded-b-xl">
+      <h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2>
+      <p class="text-sm text-neutral-500 truncate">
+        {{ props.track.artist.name }}
+      </p>
+    </div>
+  </article>
+
+</template>
+
+<script setup lang="ts">
+import type { Track } from '~~/types/types'
+
+const props = defineProps<{ track: Track }>()
+const coverUrl = `https://f4.bcbits.com/img/${props.track.artist.coverId}_4.jpg`
+</script>
--- a/app/components/molecule/theObject.vue
+++ b/app/components/molecule/theObject.vue
--- a/app/components/organism/compilationList.vue
+++ b/app/components/organism/compilationList.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="flex flex-col-reverse mt-16">
+    <molecule-box v-for="compilation in dataStore.getAllCompilations.slice().reverse()" :key="compilation.id"
+      :compilation="compilation" :BoxState="boxStates[compilation.id]" @click="() => openCompilation(compilation.id)"
+      :class="boxStates[compilation.id]" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDataStore } from '~/store/data'
+import type { BoxState } from '~~/types/types'
+import { useRouter } from 'vue-router'
+
+const dataStore = useDataStore()
+const router = useRouter()
+const boxStates = ref<Record<string, BoxState>>({})
+
+function openCompilation(id: string) {
+  if (boxStates.value[id] === 'list') {
+    for (const key in boxStates.value) {
+      boxStates.value[key] = (key === id) ? 'selected' : 'hide'
+    }
+    window.history.pushState({}, '', '/compilation/' + id)
+  }
+}
+
+function closeCompilation(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    for (const key in boxStates.value) {
+      boxStates.value[key] = 'list'
+    }
+  }
+  window.history.pushState({}, '', '/')
+}
+
+
+onMounted(async () => {
+  const dataStore = await useDataStore()
+  await dataStore.loadData()
+
+  dataStore.getAllCompilations.forEach(c => {
+    if (!(c.id in boxStates.value)) boxStates.value[c.id] = 'hide'
+  })
+
+  window.addEventListener('keydown', closeCompilation)
+
+  setTimeout(() => {
+    dataStore.getAllCompilations.forEach(c => {
+      boxStates.value[c.id] = 'list'
+    })
+  }, 333)
+})
+</script>
--- a/app/components/organism/compilationPage.vue
+++ b/app/components/organism/compilationPage.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="mt-8 p-8 w-96">
+    <MoleculeCard v-for="track in dataStore.getTracksByCompilationId(compilation.id)" :key="track.id" :track="track" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDataStore } from '~/store/data'
+import type { Compilation } from '~~/types/types'
+
+const props = defineProps<{
+  compilation: Compilation
+}>()
+
+const dataStore = useDataStore()
+
+</script>
--- a/app/pages/design.vue
+++ b/app/pages/design.vue
@@ -1,17 +0,0 @@
-<template>
-  <div class="flex flex-wrap justify-center">
-    <div class="bg-page-dark-bg text-white">
-      <div class="flex flex-col-reverse bg-gradient-to-r from-primary to-primary-dark">
-        <div class="mt-8 flex flex-wrap justify-center"
-          v-for="compilation in store.getAllCompilations.slice().reverse()">
-          <box :compilation="compilation" template="full" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useDataStore } from '@/store/dataStore'
-const store = useDataStore()
-</script>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,9 +1,20 @@
 <template>
-  <div>
-    <h1>
-      <img class="logo h-full p-1" src="/logo.svg" alt="">
-      Compilations
-      indépendantes
-    </h1>
+  <div class="w-full flex flex-col items-center">
+    <header class="py-4">
+      <img class="logo p-1 w-80" src="/logo.svg" alt="">
+      <h1 class="dark:text-white text-center">
+        compilations
+        indépendantes
+      </h1>
+    </header>
+    <main>
+      <OrganismCompilationList />
+    </main>
  </div>
 </template>
+
+<style>
+.logo {
+  filter: drop-shadow(2px 2px 0 rgb(0 0 0 / 0.8));
+}
+</style>
--- a/app/pages/studio.vue
+++ b/app/pages/studio.vue
@@ -3,11 +3,11 @@
    <div class="bg-page-dark-bg text-white">
      <div class="flex flex-col-reverse bg-gradient-to-r from-primary to-primary-dark">
        <div class="mt-8 flex flex-wrap justify-center">
-          <box :compilation="compilation" :position="currentPosition" :size="size" />
+          <molecule-box :compilation="compilation" :position="currentPosition" :size="size" />
          <div class="devtool  absolute right-4 text-white bg-black rounded-2xl px-4 py-2">
-            <button @click="currentPosition = poser">poser</button>
-            <button @click="currentPosition = face">face</button>
-            <button @click="currentPosition = dos">dos</button>
+            <button @click="currentPosition = boxPositions.side">side</button>
+            <button @click="currentPosition = boxPositions.front">front</button>
+            <button @click="currentPosition = boxPositions.back">back</button>
            <div class="w-full block">
              <input class="w-1/2" type="color" name="color1" id="color1" v-model="compilation.color1">
              <input class="w-1/2" type="color" name="color1" id="color1" v-model="compilation.color2">
@@ -37,14 +37,16 @@
          </div>
        </div>
      </div>
+      <molecule-card :track="track" />
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import type { BoxPosition } from '~~/types/types'
+import type { BoxPosition, Compilation, Track } from '~~/types/types'
+import { boxPositions } from '~/store/position'

-const compilation = ref({
+const compilation = ref<Compilation>({
  id: 'ES00A',
  name: 'zero',
  duration: 2794,
@@ -54,13 +56,24 @@ const compilation = ref({
  color3: '#00ff00',
 })

-const poser = { x: 76, y: 0, z: 150 }
-const face = { x: -20, y: 20, z: 0 }
-const dos = { x: -20, y: 200, z: 0 }
+const track = ref<Track>({
+  id: 1,
+  compilationId: 'ES00A',
+  title: 'The grinding wheel',
+  artist: {
+    id: 0,
+    name: 'L\'Efondras',
+    url: '',
+    coverId: '0024705317',
+  },
+  start: 0,
+  url: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel',
+  coverId: 'a3236746052',
+})

 const size = ref(6)

-const currentPosition: Ref<BoxPosition> = ref(poser)
+const currentPosition: Ref<BoxPosition> = ref(boxPositions.side)

 //from-slate-800 to-zinc-900 
 </script>
--- a/app/store/dataStore.ts
+++ b/app/store/dataStore.ts
@@ -13,17 +13,24 @@ export const useDataStore = defineStore('data', {

  actions: {
    async loadData() {
-      if (this.isLoaded) return  // Avoid re-fetching if already loaded
+      if (this.isLoaded) return

-      // Fetch your data once (e.g., from an API or local JSON)
-      const { data: compilations } = await useFetch('/api/compilations')
-      const { data: artists } = await useFetch('/api/artists')
-      const { data: tracks } = await useFetch('/api/tracks')
+      const { data: compilations } = await useFetch<Compilation[]>('/api/compilations')
+      const { data: artists } = await useFetch<Artist[]>('/api/artists')
+      const { data: rawTracks } = await useFetch<{ id: number, compilationId: string, title: string, artist: number, start: number, url: string, coverId: string }[]>('/api/tracks')
+
+      // Stocker les données de base
+      this.compilations = compilations.value ?? []
+      this.artists = artists.value ?? []
+
+      // Mapper les tracks pour remplacer l'artistId par l'objet Artist
+      const artistMap = new Map(this.artists.map(a => [a.id, a]))
+
+      this.tracks = (rawTracks.value ?? []).map(track => ({
+        ...track,
+        artist: artistMap.get(track.artist) ?? { id: track.artist, name: 'Unknown', url: '', coverId: '' }
+      }))

-      // Set the data in the store
-      this.compilations = compilations.value
-      this.artists = artists.value
-      this.tracks = tracks.value
      this.isLoaded = true
    }
  },
@@ -44,8 +51,8 @@ export const useDataStore = defineStore('data', {
    getArtistById: (state) => (id: number) => state.artists.find(artist => artist.id === id),

    // Obtenir toutes les pistes d'un artiste donné
-    getTracksByArtistId: (state) => (artistId: string) => {
-      return state.tracks.filter(track => track.artistId === artistId)
+    getTracksByArtistId: (state) => (artistId: number) => {
+      return state.tracks.filter(track => track.artist.id === artistId)
    },
  },
 })
--- a/app/utils/cssVars.js
+++ b/app/utils/cssVars.js
@@ -1,6 +0,0 @@
-// utils/cssVars.js
-export function updateCssVar(name, value, el) {
-  // if (!import.meta.client) return;
-  const target = el?.$el || el || document.documentElement;
-  target.style.setProperty(name, value);
-}
--- a/package.json
+++ b/package.json
@@ -23,5 +23,8 @@
  "engines": {
    "pnpm": ">=10 <11"
  },
-  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748"
+  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748",
+  "devDependencies": {
+    "sass-embedded": "^1.93.2"
+  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
    dependencies:
      '@nuxt/eslint':
        specifier: 1.9.0
-        version: 1.9.0(@typescript-eslint/utils@8.40.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(@vue/compiler-sfc@3.5.18)(eslint@9.33.0(jiti@2.5.1))(magicast@0.3.5)(typescript@5.9.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+        version: 1.9.0(@typescript-eslint/utils@8.40.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(@vue/compiler-sfc@3.5.18)(eslint@9.33.0(jiti@2.5.1))(magicast@0.3.5)(typescript@5.9.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))
      '@nuxtjs/tailwindcss':
        specifier: 6.14.0
        version: 6.14.0(magicast@0.3.5)
@@ -25,7 +25,7 @@ importers:
        version: 9.33.0(jiti@2.5.1)
      nuxt:
        specifier: ^4.0.3
-        version: 4.0.3(@netlify/blobs@9.1.2)(@parcel/watcher@2.5.1)(@types/node@24.3.0)(@vue/compiler-sfc@3.5.18)(db0@0.3.2)(eslint@9.33.0(jiti@2.5.1))(ioredis@5.7.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.46.3)(terser@5.43.1)(typescript@5.9.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1)
+        version: 4.0.3(@netlify/blobs@9.1.2)(@parcel/watcher@2.5.1)(@types/node@24.3.0)(@vue/compiler-sfc@3.5.18)(db0@0.3.2)(eslint@9.33.0(jiti@2.5.1))(ioredis@5.7.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.46.3)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(typescript@5.9.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1)
      pinia:
        specifier: ^3.0.3
        version: 3.0.3(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2))
@@ -35,6 +35,10 @@ importers:
      vue-router:
        specifier: ^4.5.1
        version: 4.5.1(vue@3.5.18(typescript@5.9.2))
+    devDependencies:
+      sass-embedded:
+        specifier: ^1.93.2
+        version: 1.93.2

 packages:

@@ -176,6 +180,9 @@ packages:
    resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==}
    engines: {node: '>=6.9.0'}

+  '@bufbuild/protobuf@2.9.0':
+    resolution: {integrity: sha512-rnJenoStJ8nvmt9Gzye8nkYd6V22xUAnu4086ER7h1zJ508vStko4pMvDeQ446ilDTFpV5wnoc5YS7XvMwwMqA==}
+
  '@clack/core@0.5.0':
    resolution: {integrity: sha512-p3y0FIOwaYRUPRcMO7+dlmLh8PSRcrjuTndsiA0WAFbWES0mLZlrjVoBRZ9DzkPFJZG6KGkJmoEAY0ZcVWTkow==}

@@ -1833,6 +1840,9 @@ packages:
    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
    hasBin: true

+  buffer-builder@0.2.0:
+    resolution: {integrity: sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==}
+
  buffer-crc32@0.2.13:
    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}

@@ -1973,6 +1983,9 @@ packages:
  colord@2.9.3:
    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}

+  colorjs.io@0.5.2:
+    resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==}
+
  colorspace@1.1.4:
    resolution: {integrity: sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==}

@@ -2881,6 +2894,9 @@ packages:
  image-meta@0.2.1:
    resolution: {integrity: sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==}

+  immutable@5.1.3:
+    resolution: {integrity: sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==}
+
  import-fresh@3.3.1:
    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
    engines: {node: '>=6'}
@@ -4138,6 +4154,9 @@ packages:
  run-parallel@1.2.0:
    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}

+  rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+
  safe-buffer@5.1.2:
    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}

@@ -4152,6 +4171,120 @@ packages:
    resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==}
    engines: {node: '>=10'}

+  sass-embedded-all-unknown@1.93.2:
+    resolution: {integrity: sha512-GdEuPXIzmhRS5J7UKAwEvtk8YyHQuFZRcpnEnkA3rwRUI27kwjyXkNeIj38XjUQ3DzrfMe8HcKFaqWGHvblS7Q==}
+    cpu: ['!arm', '!arm64', '!riscv64', '!x64']
+
+  sass-embedded-android-arm64@1.93.2:
+    resolution: {integrity: sha512-346f4iVGAPGcNP6V6IOOFkN5qnArAoXNTPr5eA/rmNpeGwomdb7kJyQ717r9rbJXxOG8OAAUado6J0qLsjnjXQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  sass-embedded-android-arm@1.93.2:
+    resolution: {integrity: sha512-I8bpO8meZNo5FvFx5FIiE7DGPVOYft0WjuwcCCdeJ6duwfkl6tZdatex1GrSigvTsuz9L0m4ngDcX/Tj/8yMow==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [android]
+
+  sass-embedded-android-riscv64@1.93.2:
+    resolution: {integrity: sha512-hSMW1s4yJf5guT9mrdkumluqrwh7BjbZ4MbBW9tmi1DRDdlw1Wh9Oy1HnnmOG8x9XcI1qkojtPL6LUuEJmsiDg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [android]
+
+  sass-embedded-android-x64@1.93.2:
+    resolution: {integrity: sha512-JqktiHZduvn+ldGBosE40ALgQ//tGCVNAObgcQ6UIZznEJbsHegqStqhRo8UW3x2cgOO2XYJcrInH6cc7wdKbw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [android]
+
+  sass-embedded-darwin-arm64@1.93.2:
+    resolution: {integrity: sha512-qI1X16qKNeBJp+M/5BNW7v/JHCDYWr1/mdoJ7+UMHmP0b5AVudIZtimtK0hnjrLnBECURifd6IkulybR+h+4UA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  sass-embedded-darwin-x64@1.93.2:
+    resolution: {integrity: sha512-4KeAvlkQ0m0enKUnDGQJZwpovYw99iiMb8CTZRSsQm8Eh7halbJZVmx67f4heFY/zISgVOCcxNg19GrM5NTwtA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  sass-embedded-linux-arm64@1.93.2:
+    resolution: {integrity: sha512-9ftX6nd5CsShJqJ2WRg+ptaYvUW+spqZfJ88FbcKQBNFQm6L87luj3UI1rB6cP5EWrLwHA754OKxRJyzWiaN6g==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  sass-embedded-linux-arm@1.93.2:
+    resolution: {integrity: sha512-N3+D/ToHtzwLDO+lSH05Wo6/KRxFBPnbjVHASOlHzqJnK+g5cqex7IFAp6ozzlRStySk61Rp6d+YGrqZ6/P0PA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  sass-embedded-linux-musl-arm64@1.93.2:
+    resolution: {integrity: sha512-+3EHuDPkMiAX5kytsjEC1bKZCawB9J6pm2eBIzzLMPWbf5xdx++vO1DpT7hD4bm4ZGn0eVHgSOKIfP6CVz6tVg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  sass-embedded-linux-musl-arm@1.93.2:
+    resolution: {integrity: sha512-XBTvx66yRenvEsp3VaJCb3HQSyqCsUh7R+pbxcN5TuzueybZi0LXvn9zneksdXcmjACMlMpIVXi6LyHPQkYc8A==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  sass-embedded-linux-musl-riscv64@1.93.2:
+    resolution: {integrity: sha512-0sB5kmVZDKTYzmCSlTUnjh6mzOhzmQiW/NNI5g8JS4JiHw2sDNTvt1dsFTuqFkUHyEOY3ESTsfHHBQV8Ip4bEA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+
+  sass-embedded-linux-musl-x64@1.93.2:
+    resolution: {integrity: sha512-t3ejQ+1LEVuHy7JHBI2tWHhoMfhedUNDjGJR2FKaLgrtJntGnyD1RyX0xb3nuqL/UXiEAtmTmZY+Uh3SLUe1Hg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  sass-embedded-linux-riscv64@1.93.2:
+    resolution: {integrity: sha512-e7AndEwAbFtXaLy6on4BfNGTr3wtGZQmypUgYpSNVcYDO+CWxatKVY4cxbehMPhxG9g5ru+eaMfynvhZt7fLaA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+
+  sass-embedded-linux-x64@1.93.2:
+    resolution: {integrity: sha512-U3EIUZQL11DU0xDDHXexd4PYPHQaSQa2hzc4EzmhHqrAj+TyfYO94htjWOd+DdTPtSwmLp+9cTWwPZBODzC96w==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  sass-embedded-unknown-all@1.93.2:
+    resolution: {integrity: sha512-7VnaOmyewcXohiuoFagJ3SK5ddP9yXpU0rzz+pZQmS1/+5O6vzyFCUoEt3HDRaLctH4GT3nUGoK1jg0ae62IfQ==}
+    os: ['!android', '!darwin', '!linux', '!win32']
+
+  sass-embedded-win32-arm64@1.93.2:
+    resolution: {integrity: sha512-Y90DZDbQvtv4Bt0GTXKlcT9pn4pz8AObEjFF8eyul+/boXwyptPZ/A1EyziAeNaIEIfxyy87z78PUgCeGHsx3Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  sass-embedded-win32-x64@1.93.2:
+    resolution: {integrity: sha512-BbSucRP6PVRZGIwlEBkp+6VQl2GWdkWFMN+9EuOTPrLxCJZoq+yhzmbjspd3PeM8+7WJ7AdFu/uRYdO8tor1iQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  sass-embedded@1.93.2:
+    resolution: {integrity: sha512-FvQdkn2dZ8DGiLgi0Uf4zsj7r/BsiLImNa5QJ10eZalY6NfZyjrmWGFcuCN5jNwlDlXFJnftauv+UtvBKLvepQ==}
+    engines: {node: '>=16.0.0'}
+    hasBin: true
+
+  sass@1.93.2:
+    resolution: {integrity: sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
  sax@1.4.1:
    resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}

@@ -4368,6 +4501,10 @@ packages:
    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
    engines: {node: '>=8'}

+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
  supports-preserve-symlinks-flag@1.0.0:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}
@@ -4377,6 +4514,14 @@ packages:
    engines: {node: '>=16'}
    hasBin: true

+  sync-child-process@1.0.2:
+    resolution: {integrity: sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==}
+    engines: {node: '>=16.0.0'}
+
+  sync-message-port@1.1.3:
+    resolution: {integrity: sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==}
+    engines: {node: '>=16.0.0'}
+
  system-architecture@0.1.0:
    resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
    engines: {node: '>=18'}
@@ -4652,6 +4797,9 @@ packages:
  validate-npm-package-license@3.0.4:
    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}

+  varint@6.0.0:
+    resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==}
+
  vary@1.1.2:
    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
    engines: {node: '>= 0.8'}
@@ -5106,6 +5254,8 @@ snapshots:
      '@babel/helper-string-parser': 7.27.1
      '@babel/helper-validator-identifier': 7.27.1

+  '@bufbuild/protobuf@2.9.0': {}
+
  '@clack/core@0.5.0':
    dependencies:
      picocolors: 1.1.1
@@ -5634,11 +5784,11 @@ snapshots:

  '@nuxt/devalue@2.0.2': {}

-  '@nuxt/devtools-kit@2.6.2(magicast@0.3.5)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))':
+  '@nuxt/devtools-kit@2.6.2(magicast@0.3.5)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))':
    dependencies:
      '@nuxt/kit': 3.18.1(magicast@0.3.5)
      execa: 8.0.1
-      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)
    transitivePeerDependencies:
      - magicast

@@ -5653,12 +5803,12 @@ snapshots:
      prompts: 2.4.2
      semver: 7.7.2

-  '@nuxt/devtools@2.6.2(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))':
+  '@nuxt/devtools@2.6.2(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))':
    dependencies:
-      '@nuxt/devtools-kit': 2.6.2(magicast@0.3.5)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      '@nuxt/devtools-kit': 2.6.2(magicast@0.3.5)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))
      '@nuxt/devtools-wizard': 2.6.2
      '@nuxt/kit': 3.18.1(magicast@0.3.5)
-      '@vue/devtools-core': 7.7.7(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))
+      '@vue/devtools-core': 7.7.7(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))
      '@vue/devtools-kit': 7.7.7
      birpc: 2.5.0
      consola: 3.4.2
@@ -5683,9 +5833,9 @@ snapshots:
      sirv: 3.0.1
      structured-clone-es: 1.0.0
      tinyglobby: 0.2.14
-      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
-      vite-plugin-inspect: 11.3.2(@nuxt/kit@3.18.1(magicast@0.3.5))(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
-      vite-plugin-vue-tracer: 1.0.0(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))
+      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)
+      vite-plugin-inspect: 11.3.2(@nuxt/kit@3.18.1(magicast@0.3.5))(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))
+      vite-plugin-vue-tracer: 1.0.0(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))
      which: 5.0.0
      ws: 8.18.3
    transitivePeerDependencies:
@@ -5734,10 +5884,10 @@ snapshots:
      - supports-color
      - typescript

-  '@nuxt/eslint@1.9.0(@typescript-eslint/utils@8.40.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(@vue/compiler-sfc@3.5.18)(eslint@9.33.0(jiti@2.5.1))(magicast@0.3.5)(typescript@5.9.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))':
+  '@nuxt/eslint@1.9.0(@typescript-eslint/utils@8.40.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(@vue/compiler-sfc@3.5.18)(eslint@9.33.0(jiti@2.5.1))(magicast@0.3.5)(typescript@5.9.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))':
    dependencies:
      '@eslint/config-inspector': 1.2.0(eslint@9.33.0(jiti@2.5.1))
-      '@nuxt/devtools-kit': 2.6.2(magicast@0.3.5)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      '@nuxt/devtools-kit': 2.6.2(magicast@0.3.5)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))
      '@nuxt/eslint-config': 1.9.0(@typescript-eslint/utils@8.40.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(@vue/compiler-sfc@3.5.18)(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
      '@nuxt/eslint-plugin': 1.9.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
      '@nuxt/kit': 4.0.3(magicast@0.3.5)
@@ -5841,12 +5991,12 @@ snapshots:
    transitivePeerDependencies:
      - magicast

-  '@nuxt/vite-builder@4.0.3(@types/node@24.3.0)(eslint@9.33.0(jiti@2.5.1))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.46.3)(terser@5.43.1)(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2))(yaml@2.8.1)':
+  '@nuxt/vite-builder@4.0.3(@types/node@24.3.0)(eslint@9.33.0(jiti@2.5.1))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.46.3)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2))(yaml@2.8.1)':
    dependencies:
      '@nuxt/kit': 4.0.3(magicast@0.3.5)
      '@rollup/plugin-replace': 6.0.2(rollup@4.46.3)
-      '@vitejs/plugin-vue': 6.0.1(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))
-      '@vitejs/plugin-vue-jsx': 5.0.1(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))
+      '@vitejs/plugin-vue': 6.0.1(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))
+      '@vitejs/plugin-vue-jsx': 5.0.1(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))
      autoprefixer: 10.4.21(postcss@8.5.6)
      consola: 3.4.2
      cssnano: 7.1.0(postcss@8.5.6)
@@ -5868,9 +6018,9 @@ snapshots:
      std-env: 3.9.0
      ufo: 1.6.1
      unenv: 2.0.0-rc.19
-      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
-      vite-node: 3.2.4(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
-      vite-plugin-checker: 0.10.2(eslint@9.33.0(jiti@2.5.1))(optionator@0.9.4)(typescript@5.9.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)
+      vite-node: 3.2.4(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)
+      vite-plugin-checker: 0.10.2(eslint@9.33.0(jiti@2.5.1))(optionator@0.9.4)(typescript@5.9.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))
      vue: 3.5.18(typescript@5.9.2)
      vue-bundle-renderer: 2.1.2
    transitivePeerDependencies:
@@ -6502,21 +6652,21 @@ snapshots:
      - rollup
      - supports-color

-  '@vitejs/plugin-vue-jsx@5.0.1(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))':
+  '@vitejs/plugin-vue-jsx@5.0.1(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))':
    dependencies:
      '@babel/core': 7.28.3
      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.3)
      '@rolldown/pluginutils': 1.0.0-beta.33
      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.3)
-      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)
      vue: 3.5.18(typescript@5.9.2)
    transitivePeerDependencies:
      - supports-color

-  '@vitejs/plugin-vue@6.0.1(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))':
+  '@vitejs/plugin-vue@6.0.1(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))':
    dependencies:
      '@rolldown/pluginutils': 1.0.0-beta.29
-      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)
      vue: 3.5.18(typescript@5.9.2)

  '@volar/language-core@2.4.22':
@@ -6605,14 +6755,14 @@ snapshots:
    dependencies:
      '@vue/devtools-kit': 7.7.7

-  '@vue/devtools-core@7.7.7(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))':
+  '@vue/devtools-core@7.7.7(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))':
    dependencies:
      '@vue/devtools-kit': 7.7.7
      '@vue/devtools-shared': 7.7.7
      mitt: 3.0.1
      nanoid: 5.1.5
      pathe: 2.0.3
-      vite-hot-client: 2.1.0(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      vite-hot-client: 2.1.0(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))
      vue: 3.5.18(typescript@5.9.2)
    transitivePeerDependencies:
      - vite
@@ -6842,6 +6992,8 @@ snapshots:
      node-releases: 2.0.19
      update-browserslist-db: 1.1.3(browserslist@4.25.3)

+  buffer-builder@0.2.0: {}
+
  buffer-crc32@0.2.13: {}

  buffer-crc32@1.0.0: {}
@@ -6990,6 +7142,8 @@ snapshots:

  colord@2.9.3: {}

+  colorjs.io@0.5.2: {}
+
  colorspace@1.1.4:
    dependencies:
      color: 3.2.1
@@ -7950,6 +8104,8 @@ snapshots:

  image-meta@0.2.1: {}

+  immutable@5.1.3: {}
+
  import-fresh@3.3.1:
    dependencies:
      parent-module: 1.0.1
@@ -8603,15 +8759,15 @@ snapshots:
    dependencies:
      boolbase: 1.0.0

-  nuxt@4.0.3(@netlify/blobs@9.1.2)(@parcel/watcher@2.5.1)(@types/node@24.3.0)(@vue/compiler-sfc@3.5.18)(db0@0.3.2)(eslint@9.33.0(jiti@2.5.1))(ioredis@5.7.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.46.3)(terser@5.43.1)(typescript@5.9.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1):
+  nuxt@4.0.3(@netlify/blobs@9.1.2)(@parcel/watcher@2.5.1)(@types/node@24.3.0)(@vue/compiler-sfc@3.5.18)(db0@0.3.2)(eslint@9.33.0(jiti@2.5.1))(ioredis@5.7.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.46.3)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(typescript@5.9.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1):
    dependencies:
      '@nuxt/cli': 3.28.0(magicast@0.3.5)
      '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 2.6.2(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))
+      '@nuxt/devtools': 2.6.2(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))
      '@nuxt/kit': 4.0.3(magicast@0.3.5)
      '@nuxt/schema': 4.0.3
      '@nuxt/telemetry': 2.6.6(magicast@0.3.5)
-      '@nuxt/vite-builder': 4.0.3(@types/node@24.3.0)(eslint@9.33.0(jiti@2.5.1))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.46.3)(terser@5.43.1)(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2))(yaml@2.8.1)
+      '@nuxt/vite-builder': 4.0.3(@types/node@24.3.0)(eslint@9.33.0(jiti@2.5.1))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.46.3)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2))(yaml@2.8.1)
      '@unhead/vue': 2.0.14(vue@3.5.18(typescript@5.9.2))
      '@vue/shared': 3.5.18
      c12: 3.2.0(magicast@0.3.5)
@@ -9410,6 +9566,10 @@ snapshots:
    dependencies:
      queue-microtask: 1.2.3

+  rxjs@7.8.2:
+    dependencies:
+      tslib: 2.8.1
+
  safe-buffer@5.1.2: {}

  safe-buffer@5.2.1: {}
@@ -9422,6 +9582,103 @@ snapshots:

  safe-stable-stringify@2.5.0: {}

+  sass-embedded-all-unknown@1.93.2:
+    dependencies:
+      sass: 1.93.2
+    optional: true
+
+  sass-embedded-android-arm64@1.93.2:
+    optional: true
+
+  sass-embedded-android-arm@1.93.2:
+    optional: true
+
+  sass-embedded-android-riscv64@1.93.2:
+    optional: true
+
+  sass-embedded-android-x64@1.93.2:
+    optional: true
+
+  sass-embedded-darwin-arm64@1.93.2:
+    optional: true
+
+  sass-embedded-darwin-x64@1.93.2:
+    optional: true
+
+  sass-embedded-linux-arm64@1.93.2:
+    optional: true
+
+  sass-embedded-linux-arm@1.93.2:
+    optional: true
+
+  sass-embedded-linux-musl-arm64@1.93.2:
+    optional: true
+
+  sass-embedded-linux-musl-arm@1.93.2:
+    optional: true
+
+  sass-embedded-linux-musl-riscv64@1.93.2:
+    optional: true
+
+  sass-embedded-linux-musl-x64@1.93.2:
+    optional: true
+
+  sass-embedded-linux-riscv64@1.93.2:
+    optional: true
+
+  sass-embedded-linux-x64@1.93.2:
+    optional: true
+
+  sass-embedded-unknown-all@1.93.2:
+    dependencies:
+      sass: 1.93.2
+    optional: true
+
+  sass-embedded-win32-arm64@1.93.2:
+    optional: true
+
+  sass-embedded-win32-x64@1.93.2:
+    optional: true
+
+  sass-embedded@1.93.2:
+    dependencies:
+      '@bufbuild/protobuf': 2.9.0
+      buffer-builder: 0.2.0
+      colorjs.io: 0.5.2
+      immutable: 5.1.3
+      rxjs: 7.8.2
+      supports-color: 8.1.1
+      sync-child-process: 1.0.2
+      varint: 6.0.0
+    optionalDependencies:
+      sass-embedded-all-unknown: 1.93.2
+      sass-embedded-android-arm: 1.93.2
+      sass-embedded-android-arm64: 1.93.2
+      sass-embedded-android-riscv64: 1.93.2
+      sass-embedded-android-x64: 1.93.2
+      sass-embedded-darwin-arm64: 1.93.2
+      sass-embedded-darwin-x64: 1.93.2
+      sass-embedded-linux-arm: 1.93.2
+      sass-embedded-linux-arm64: 1.93.2
+      sass-embedded-linux-musl-arm: 1.93.2
+      sass-embedded-linux-musl-arm64: 1.93.2
+      sass-embedded-linux-musl-riscv64: 1.93.2
+      sass-embedded-linux-musl-x64: 1.93.2
+      sass-embedded-linux-riscv64: 1.93.2
+      sass-embedded-linux-x64: 1.93.2
+      sass-embedded-unknown-all: 1.93.2
+      sass-embedded-win32-arm64: 1.93.2
+      sass-embedded-win32-x64: 1.93.2
+
+  sass@1.93.2:
+    dependencies:
+      chokidar: 4.0.3
+      immutable: 5.1.3
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
+    optional: true
+
  sax@1.4.1: {}

  scslre@0.3.0:
@@ -9656,6 +9913,10 @@ snapshots:
    dependencies:
      has-flag: 4.0.0

+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
  supports-preserve-symlinks-flag@1.0.0: {}

  svgo@4.0.0:
@@ -9668,6 +9929,12 @@ snapshots:
      picocolors: 1.1.1
      sax: 1.4.1

+  sync-child-process@1.0.2:
+    dependencies:
+      sync-message-port: 1.1.3
+
+  sync-message-port@1.1.3: {}
+
  system-architecture@0.1.0: {}

  tailwind-config-viewer@2.0.4(tailwindcss@3.4.17):
@@ -9980,25 +10247,27 @@ snapshots:
      spdx-correct: 3.2.0
      spdx-expression-parse: 3.0.1

+  varint@6.0.0: {}
+
  vary@1.1.2: {}

-  vite-dev-rpc@1.1.0(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)):
+  vite-dev-rpc@1.1.0(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)):
    dependencies:
      birpc: 2.5.0
-      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
-      vite-hot-client: 2.1.0(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)
+      vite-hot-client: 2.1.0(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))

-  vite-hot-client@2.1.0(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)):
+  vite-hot-client@2.1.0(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)):
    dependencies:
-      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)

-  vite-node@3.2.4(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1):
+  vite-node@3.2.4(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1):
    dependencies:
      cac: 6.7.14
      debug: 4.4.1
      es-module-lexer: 1.7.0
      pathe: 2.0.3
-      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)
    transitivePeerDependencies:
      - '@types/node'
      - jiti
@@ -10013,7 +10282,7 @@ snapshots:
      - tsx
      - yaml

-  vite-plugin-checker@0.10.2(eslint@9.33.0(jiti@2.5.1))(optionator@0.9.4)(typescript@5.9.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)):
+  vite-plugin-checker@0.10.2(eslint@9.33.0(jiti@2.5.1))(optionator@0.9.4)(typescript@5.9.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)):
    dependencies:
      '@babel/code-frame': 7.27.1
      chokidar: 4.0.3
@@ -10023,14 +10292,14 @@ snapshots:
      strip-ansi: 7.1.0
      tiny-invariant: 1.3.3
      tinyglobby: 0.2.14
-      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)
      vscode-uri: 3.1.0
    optionalDependencies:
      eslint: 9.33.0(jiti@2.5.1)
      optionator: 0.9.4
      typescript: 5.9.2

-  vite-plugin-inspect@11.3.2(@nuxt/kit@3.18.1(magicast@0.3.5))(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)):
+  vite-plugin-inspect@11.3.2(@nuxt/kit@3.18.1(magicast@0.3.5))(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)):
    dependencies:
      ansis: 4.1.0
      debug: 4.4.1
@@ -10040,24 +10309,24 @@ snapshots:
      perfect-debounce: 1.0.0
      sirv: 3.0.1
      unplugin-utils: 0.2.5
-      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
-      vite-dev-rpc: 1.1.0(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)
+      vite-dev-rpc: 1.1.0(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))
    optionalDependencies:
      '@nuxt/kit': 3.18.1(magicast@0.3.5)
    transitivePeerDependencies:
      - supports-color

-  vite-plugin-vue-tracer@1.0.0(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2)):
+  vite-plugin-vue-tracer@1.0.0(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2)):
    dependencies:
      estree-walker: 3.0.3
      exsolve: 1.0.7
      magic-string: 0.30.17
      pathe: 2.0.3
      source-map-js: 1.2.1
-      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)
+      vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1)
      vue: 3.5.18(typescript@5.9.2)

-  vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1):
+  vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.43.1)(yaml@2.8.1):
    dependencies:
      esbuild: 0.25.9
      fdir: 6.5.0(picomatch@4.0.3)
@@ -10069,6 +10338,8 @@ snapshots:
      '@types/node': 24.3.0
      fsevents: 2.3.3
      jiti: 2.5.1
+      sass: 1.93.2
+      sass-embedded: 1.93.2
      terser: 5.43.1
      yaml: 2.8.1

--- a/server/api/tracks.ts
+++ b/server/api/tracks.ts
@@ -8,7 +8,6 @@ export default eventHandler(() => {
      title: 'The grinding wheel',
      artist: 0,
      start: 0,
-      bpm: 0,
      url: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel',
      coverId: 'a3236746052',
    },
@@ -18,7 +17,6 @@ export default eventHandler(() => {
      title: 'Bleach',
      artist: 1,
      start: 393,
-      bpm: 0,
      url: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2',
      coverId: 'a1714786533',
    },
@@ -28,7 +26,6 @@ export default eventHandler(() => {
      title: 'Televised mind',
      artist: 2,
      start: 892,
-      bpm: 0,
      url: 'https://fontainesdc.bandcamp.com/track/televised-mind',
      coverId: 'a3772806156'
    },
@@ -38,7 +35,6 @@ export default eventHandler(() => {
      title: 'In it',
      artist: 3,
      start: 1138,
-      bpm: 0,
      url: 'https://howlinbananarecords.bandcamp.com/track/in-it',
      coverId: 'a1720372066',
    },
@@ -48,7 +44,6 @@ export default eventHandler(() => {
      title: 'Bad michel',
      artist: 4,
      start: 1245,
-      bpm: 0,
      url: 'https://johnnymafia.bandcamp.com/track/bad-michel-3',
      coverId: 'a0984622869',
    },
@@ -58,7 +53,6 @@ export default eventHandler(() => {
      title: 'Overall',
      artist: 5,
      start: 1394,
-      bpm: 0,
      url: 'https://newcandys.bandcamp.com/track/overall',
      coverId: 'a0559661270',
    },
@@ -68,7 +62,6 @@ export default eventHandler(() => {
      title: 'Blowup',
      artist: 6,
      start: 1674,
-      bpm: 0,
      url: 'https://magicshoppe.bandcamp.com/track/blowup',
      coverId: 'a1444895293',
    },
@@ -78,7 +71,6 @@ export default eventHandler(() => {
      title: 'Guitar jet',
      artist: 7,
      start: 1880,
-      bpm: 0,
      url: 'https://radiomartiko.bandcamp.com/track/guitare-jet',
      coverId: 'a1494681687',
    },
@@ -88,7 +80,6 @@ export default eventHandler(() => {
      title: 'Intercontinental radio waves',
      artist: 8,
      start: 2024,
-      bpm: 0,
      url: 'https://traams.bandcamp.com/track/intercontinental-radio-waves',
      coverId: 'a0046738552',
    },
@@ -98,7 +89,6 @@ export default eventHandler(() => {
      title: 'Here comes the sun',
      artist: 9,
      start: 2211,
-      bpm: 0,
      url: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun',
      coverId: 'a4102567047',
    },
@@ -108,7 +98,6 @@ export default eventHandler(() => {
      title: 'Like in the movies',
      artist: 10,
      start: 2559,
-      bpm: 0,
      url: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2',
      coverId: 'a2203158939',
    },
@@ -118,7 +107,6 @@ export default eventHandler(() => {
      title: 'Ce que révèle l\'éclipse',
      artist: 0,
      start: 0,
-      bpm: 0,
      url: 'https://arakirecords.bandcamp.com/track/ce-que-r-v-le-l-clipse',
      coverId: 'a3236746052',
    },
@@ -128,7 +116,6 @@ export default eventHandler(() => {
      title: 'Bleedin\' Gums Mushrool',
      artist: 1,
      start: 263,
-      bpm: 0,
      url: 'https://the-kundalini-genie.bandcamp.com/track/bleedin-gums-mushroom',
      coverId: 'a1714786533',
    },
@@ -138,7 +125,6 @@ export default eventHandler(() => {
      title: 'A lucid dream',
      artist: 2,
      start: 554,
-      bpm: 0,
      url: 'https://fontainesdc.bandcamp.com/track/a-lucid-dream',
      coverId: 'a3772806156',
    },
@@ -148,7 +134,6 @@ export default eventHandler(() => {
      title: 'Lights off',
      artist: 3,
      start: 781,
-      bpm: 0,
      url: 'https://howlinbananarecords.bandcamp.com/track/lights-off',
      coverId: 'a1720372066',
    },
@@ -158,7 +143,6 @@ export default eventHandler(() => {
      title: 'I\'m sentimental',
      artist: 4,
      start: 969,
-      bpm: 0,
      url: 'https://johnnymafia.bandcamp.com/track/im-sentimental-2',
      coverId: 'a2333676849',
    },
@@ -168,7 +152,6 @@ export default eventHandler(() => {
      title: 'Thrill or trip',
      artist: 5,
      start: 1128,
-      bpm: 0,
      url: 'https://newcandys.bandcamp.com/track/thrill-or-trip',
      coverId: 'a0559661270',
    },
@@ -178,7 +161,6 @@ export default eventHandler(() => {
      title: 'Redhead',
      artist: 6,
      start: 1303,
-      bpm: 0,
      url: 'https://magicshoppe.bandcamp.com/track/redhead',
      coverId: 'a0594426943',
    },
@@ -188,7 +170,6 @@ export default eventHandler(() => {
      title: 'Supersonic twist',
      artist: 7,
      start: 1584,
-      bpm: 0,
      url: 'https://open.spotify.com/track/66voQIZAJ3zD3Eju2qtNjF',
      coverId: 'a1494681687',
    },
@@ -198,7 +179,6 @@ export default eventHandler(() => {
      title: 'Flowers',
      artist: 8,
      start: 1749,
-      bpm: 0,
      url: 'https://traams.bandcamp.com/track/flowers',
      coverId: 'a3644668199',
    },
@@ -208,7 +188,6 @@ export default eventHandler(() => {
      title: 'The shade',
      artist: 9,
      start: 1924,
-      bpm: 0,
      url: 'https://blue-orchid.bandcamp.com/track/the-shade',
      coverId: 'a0804204790',
    },
@@ -218,7 +197,6 @@ export default eventHandler(() => {
      title: 'Like in the movies',
      artist: 10,
      start: 2185,
-      bpm: 0,
      url: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies',
      coverId: 'a3647322740',
    },
--- a/three.js
+++ b/three.js
--- a/types/types.ts
+++ b/types/types.ts
@@ -18,16 +18,18 @@ export interface Artist {
 }

 export interface Track {
-  id: string
+  id: number
  compilationId: string
  title: string
-  artistId: number
-  artist?: Artist
+  artist: Artist
  start: number
-  link: string
+  url: string
  coverId: string
 }

+// pour une v2
+export type BoxState = 'hide' | 'list' | 'selected'
+
 export interface BoxPosition {
  x: number
  y: number