From 3685e33b4815e11f7962d860a7b7711043c9c3a0 Mon Sep 17 00:00:00 2001
From: Samidy <samidy@proton.me>
Date: Sun, 8 Mar 2026 01:15:51 +0300
Subject: [PATCH 01/26] fix(context menu): Change from "Like" to "Unlike"
 depending on state

---
 index.html   |  3 +++
 js/events.js | 11 +++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 5b4b4b7..b7b9e98 100644
--- a/index.html
+++ b/index.html
@@ -48,8 +48,11 @@
                 <li
                     data-action="toggle-like"
                     data-label-track="Like"
+                    data-label-unlike-track="Unlike"
                     data-label-album="Save album to library"
+                    data-label-unlike-album="Remove album from library"
                     data-label-playlist="Save playlist to library"
+                    data-label-unlike-playlist="Remove playlist from library"
                 >
                     Like
                 </li>
diff --git a/js/events.js b/js/events.js
index 5a8af19..04fbab2 100644
--- a/js/events.js
+++ b/js/events.js
@@ -1435,9 +1435,10 @@ async function updateContextMenuLikeState(contextMenu, contextTrack) {
     const type = contextMenu._contextType || 'track';
 
     const likeItem = contextMenu.querySelector('li[data-action="toggle-like"]');
+    let isLiked = false;
     if (likeItem) {
-        const isLiked = await db.isFavorite(type, contextTrack.id);
-        likeItem.textContent = isLiked ? 'Unlike' : 'Like';
+        const key = type === 'playlist' ? contextTrack.uuid : contextTrack.id;
+        isLiked = await db.isFavorite(type, key);
     }
 
     const pinItem = contextMenu.querySelector('li[data-action="toggle-pin"]');
@@ -1500,8 +1501,10 @@ async function updateContextMenuLikeState(contextMenu, contextTrack) {
 
         // Update labels for Like/Save
         if (item.dataset.action === 'toggle-like') {
-            const labelKey = `label${type.charAt(0).toUpperCase() + type.slice(1).replace('User-playlist', 'Playlist')}`;
-            const label = item.dataset[labelKey] || item.dataset.labelTrack || 'Like';
+            const labelPrefix = isLiked ? 'labelUnlike' : 'label';
+            const labelKey = `${labelPrefix}${type.charAt(0).toUpperCase() + type.slice(1).replace('User-playlist', 'Playlist')}`;
+            const fallbackKey = isLiked ? 'labelUnlikeTrack' : 'labelTrack';
+            const label = item.dataset[labelKey] || item.dataset[fallbackKey] || (isLiked ? 'Unlike' : 'Like');
             item.textContent = label;
         }
     });

From 4762dea6077c8e578bc022d52f825ccff6afc05e Mon Sep 17 00:00:00 2001
From: Samidy <samidy@proton.me>
Date: Sun, 8 Mar 2026 02:55:51 +0300
Subject: [PATCH 02/26] feat(visualizer): visualizer dimming

---
 index.html       | 29 ++++++++++++++++++++++++++++-
 js/settings.js   | 17 +++++++++++++++++
 js/storage.js    | 15 +++++++++++++++
 js/ui.js         |  6 ++++++
 js/visualizer.js |  8 ++++++++
 styles.css       | 10 +++++++++-
 6 files changed, 83 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index b7b9e98..fd69136 100644
--- a/index.html
+++ b/index.html
@@ -119,7 +119,9 @@
 
         <div id="fullscreen-cover-overlay" style="display: none">
             <div class="fullscreen-cover-content">
-                <canvas id="visualizer-canvas"></canvas>
+                <div id="visualizer-container">
+                    <canvas id="visualizer-canvas"></canvas>
+                </div>
                 <button id="toggle-ui-btn" class="fullscreen-ui-toggle" title="Toggle UI">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -3743,6 +3745,31 @@
                                         >
                                     </div>
                                 </div>
+                                <div class="setting-item" id="visualizer-dimming-setting">
+                                    <div class="info">
+                                        <span class="label">Visualizer Brightness</span>
+                                        <span class="description"
+                                            >Adjust the brightness of the visualizer. Lower this if the visualizer
+                                            is too bright for you.</span
+                                        >
+                                    </div>
+                                    <div style="display: flex; align-items: center; gap: 10px">
+                                        <input
+                                            type="range"
+                                            id="visualizer-dimming-slider"
+                                            min="0.1"
+                                            max="1.0"
+                                            step="0.05"
+                                            value="1.0"
+                                            style="width: 100px"
+                                        />
+                                        <span
+                                            id="visualizer-dimming-value"
+                                            style="font-size: 0.9rem; min-width: 3em; text-align: right"
+                                            >100%</span
+                                        >
+                                    </div>
+                                </div>
                                 <!-- Butterchurn Settings -->
                                 <div class="setting-item" id="butterchurn-cycle-setting" style="display: none">
                                     <div class="info">
diff --git a/js/settings.js b/js/settings.js
index e321eaa..fdd4b4a 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -2110,6 +2110,23 @@ export function initializeSettings(scrobbler, player, api, ui) {
         });
     }
 
+    const visualizerDimmingSlider = document.getElementById('visualizer-dimming-slider');
+    const visualizerDimmingValue = document.getElementById('visualizer-dimming-value');
+    if (visualizerDimmingSlider && visualizerDimmingValue) {
+        const currentDimming = visualizerSettings.getDimAmount();
+        visualizerDimmingSlider.value = currentDimming;
+        visualizerDimmingValue.textContent = `${(currentDimming * 100).toFixed(0)}%`;
+
+        visualizerDimmingSlider.addEventListener('input', (e) => {
+            const newDimming = parseFloat(e.target.value);
+            visualizerSettings.setDimAmount(newDimming);
+            visualizerDimmingValue.textContent = `${(newDimming * 100).toFixed(0)}%`;
+            window.dispatchEvent(
+                new CustomEvent('visualizer-dim-change', { detail: { dimAmount: newDimming } })
+            );
+        });
+    }
+
     // Visualizer Smart Intensity
     const smartIntensityToggle = document.getElementById('smart-intensity-toggle');
     if (smartIntensityToggle) {
diff --git a/js/storage.js b/js/storage.js
index c238f58..12e3ec6 100644
--- a/js/storage.js
+++ b/js/storage.js
@@ -763,6 +763,7 @@ export const visualizerSettings = {
     MODE_KEY: 'visualizer-mode', // 'solid' or 'blended'
     PRESET_KEY: 'visualizer-preset',
     BUTTERCHURN_CYCLE_KEY: 'butterchurn-cycle-duration',
+    DIM_AMOUNT_KEY: 'visualizer-dim-amount',
 
     getPreset() {
         try {
@@ -828,6 +829,20 @@ export const visualizerSettings = {
         localStorage.setItem(this.SMART_INTENSITY_KEY, enabled);
     },
 
+    getDimAmount() {
+        try {
+            const val = localStorage.getItem(this.DIM_AMOUNT_KEY);
+            if (val === null) return 1.0;
+            return parseFloat(val);
+        } catch {
+            return 1.0;
+        }
+    },
+
+    setDimAmount(value) {
+        localStorage.setItem(this.DIM_AMOUNT_KEY, value);
+    },
+
     // Butterchurn preset cycle duration in seconds
     getButterchurnCycleDuration() {
         try {
diff --git a/js/ui.js b/js/ui.js
index 8fb1cdd..45ffb28 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -120,6 +120,12 @@ export class UIRenderer {
         window.addEventListener('theme-changed', () => {
             this.updateGlobalTheme();
         });
+
+        window.addEventListener('visualizer-dim-change', () => {
+            if (this.visualizer) {
+                this.visualizer.updateDimming();
+            }
+        });
     }
 
     // Helper for Heart Icon
diff --git a/js/visualizer.js b/js/visualizer.js
index e3f5f3d..2e58dae 100644
--- a/js/visualizer.js
+++ b/js/visualizer.js
@@ -51,6 +51,12 @@ export class Visualizer {
         this._resizeBound = () => this.resize();
     }
 
+    updateDimming() {
+        if (!this.canvas || !this.canvas.parentElement) return;
+        const dimAmount = visualizerSettings.getDimAmount();
+        this.canvas.parentElement.style.opacity = dimAmount.toString();
+    }
+
     get activePreset() {
         return this.presets[this.activePresetKey] || this.presets['lcd'];
     }
@@ -150,6 +156,8 @@ export class Visualizer {
             this.audioContext.resume();
         }
 
+        this.updateDimming();
+
         // Set canvas dimensions before preset init so WebGL framebuffers are created at correct size
         this.resize();
         window.addEventListener('resize', this._resizeBound);
diff --git a/styles.css b/styles.css
index 49ae84b..743497c 100644
--- a/styles.css
+++ b/styles.css
@@ -3483,13 +3483,21 @@ input:checked + .slider::before {
     transition: background-image var(--transition);
 }
 
-#visualizer-canvas {
+#visualizer-container {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+
+#visualizer-canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
 }
 
 .fullscreen-cover-content {

From 277d8e801bde328836c2e539c23f7a2e1a69e673 Mon Sep 17 00:00:00 2001
From: willianpm <willianpm15@gmail.com>
Date: Sun, 8 Mar 2026 01:03:52 +0000
Subject: [PATCH 03/26] feat: add mouse wheel support for fullscreen volume
 control

Added event handler to allow adjusting the fullscreen volume using the mouse wheel. Scrolling up unmutes and increases volume, scrolling down decreases volume. Improves user experience for volume adjustments in fullscreen mode.
---
 js/ui.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/js/ui.js b/js/ui.js
index 8fb1cdd..c67168b 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1344,6 +1344,25 @@ export class UIRenderer {
                 updateFsVolumeUI();
             };
 
+            const handleFsVolumeWheel = (e) => {
+                e.preventDefault();
+
+                const delta = e.deltaY > 0 ? -0.05 : 0.05;
+                const currentVolume = this.player.userVolume;
+                const newVolume = Math.max(0, Math.min(1, currentVolume + delta));
+
+                if (delta > 0 && this.player.muted) {
+                    this.player.setMute(false);
+                }
+
+                this.player.setVolume(newVolume);
+                updateFsVolumeUI();
+            };
+
+            [fsVolumeBar, fsVolumeBtn].forEach((el) =>
+                el.addEventListener('wheel', handleFsVolumeWheel, { passive: false })
+            );
+
             const setFsVolume = (e) => {
                 const rect = fsVolumeBar.getBoundingClientRect();
                 const position = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));

From dfba735236300238ac6ddb46e6dbaec1c88ae54b Mon Sep 17 00:00:00 2001
From: Daniel <790119+DanTheMan827@users.noreply.github.com>
Date: Sun, 8 Mar 2026 01:14:23 +0000
Subject: [PATCH 04/26] chore(devcontainer): update Dockerfile and devcontainer
 configuration

- Changed base image to mcr.microsoft.com/devcontainers/base:debian
- Updated system dependencies in Dockerfile
- Modified devcontainer.json for improved configuration
- Added tasks.json for npm build and development scripts
---
 .devcontainer/Dockerfile        | 44 +++++++--------------------------
 .devcontainer/devcontainer.json | 29 ++++++++++------------
 .vscode/tasks.json              | 23 +++++++++++++++++
 3 files changed, 45 insertions(+), 51 deletions(-)
 create mode 100644 .vscode/tasks.json

diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
index 588d8ec..dd49f58 100644
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@@ -1,52 +1,26 @@
 # ------------------------------------------------------------
 # Base Image
 # ------------------------------------------------------------
-FROM debian:unstable-slim
-
-ENV DEBIAN_FRONTEND=noninteractive
-ENV LANG=C.UTF-8
-ENV LC_ALL=C.UTF-8
+FROM mcr.microsoft.com/devcontainers/base:debian
 
 # ------------------------------------------------------------
 # System Dependencies
 # ------------------------------------------------------------
-RUN apt-get update && apt-get upgrade -y && \
+RUN apt update && apt upgrade -y && \
     apt-get install -y --no-install-recommends \
-        curl \
-        ca-certificates \
         git \
-        build-essential \
-        sudo \
+        git-lfs \
         fish \
-        unzip \
-        xz-utils \
-        libatomic1 \
-        libc6 \
-        wget \
         nodejs \
-        npm && \
-    rm -rf /var/lib/apt/lists/*
-
-# ------------------------------------------------------------
-# Create Non-Root User
-# ------------------------------------------------------------
-ARG USERNAME=devuser
-ARG UID=1000
-ARG GID=1000
-
-RUN groupadd --gid ${GID} ${USERNAME} && \
-    useradd --uid ${UID} --gid ${GID} -m -s /usr/bin/fish ${USERNAME} && \
-    echo "${USERNAME} ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers
-
-USER ${USERNAME}
-WORKDIR /home/${USERNAME}
+        npm \
+        curl
 
 # ------------------------------------------------------------
 # Install Bun (Non-Root)
 # ------------------------------------------------------------
-ENV BUN_INSTALL=/home/${USERNAME}/.bun
-ENV PATH="${BUN_INSTALL}/bin:${PATH}"
-
+ENV BUN_INSTALL="$HOME/.bun"
+ENV PATH="$BUN_INSTALL/bin:$PATH"
+    
 RUN curl -fsSL https://bun.sh/install | bash
 
 # ------------------------------------------------------------
@@ -58,7 +32,7 @@ RUN curl -fsSL https://opencode.ai/install -o opencode-install && \
     rm opencode-install
 
 # Add OpenCode to PATH permanently
-ENV PATH="/home/${USERNAME}/.opencode/bin:${PATH}"
+ENV PATH="$HOME/.opencode/bin:$PATH"
     
 # ------------------------------------------------------------
 # Ensure fish is Default Shell
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 3aee656..3b9eb12 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,22 +1,19 @@
 {
-    "name": "debian-npm-fish-devcontainer",
-    "build": {
-        "dockerfile": "Dockerfile"
-    },
-
-    "remoteUser": "devuser",
-
-    "features": {},
-
-    "customizations": {
+	"name": "Monochrome Dev Container",
+	"build": {
+		"context": "..",
+		"dockerfile": "./Dockerfile"
+	},
+	"postCreateCommand": "git config --global core.editor \"code --wait\"",
+	"postStartCommand": "npm install && bun install",
+	"customizations": {
         "vscode": {
             "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
         }
     },
-
-    "postCreateCommand": "npm install",
-
-    "remoteEnv": {
-        "SHELL": "/usr/bin/fish"
-    }
+	"mounts": [
+		"source=${env:HOME}/.gitconfig,target=/home/vscode/.gitconfig,type=bind,consistency=cached",
+		"source=${env:HOME}/.gnupg,target=/home/vscode/.gnupg,type=bind",
+		"source=${env:HOME}/.ssh,target=/home/vscode/.ssh,type=bind"
+	]
 }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 0000000..59ffa53
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,23 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "build",
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			},
+			"problemMatcher": [],
+			"label": "npm: build",
+			"detail": "vite build"
+		},
+		{
+			"type": "npm",
+			"script": "dev",
+			"problemMatcher": [],
+			"label": "npm: dev",
+			"detail": "vite"
+		}
+	]
+}
\ No newline at end of file

From a22802b8a79208d252da06fc019593b1bb8fd807 Mon Sep 17 00:00:00 2001
From: Daniel <790119+DanTheMan827@users.noreply.github.com>
Date: Sun, 8 Mar 2026 01:47:06 +0000
Subject: [PATCH 05/26] chore(devcontainer): update postCreateCommand and
 remove unused mounts

- Changed core.editor configuration to local scope and added commit.gpgsign setting
- Combined npm and bun install commands into postCreateCommand
- Removed unused mounts for .gnupg and .ssh
---
 .devcontainer/devcontainer.json | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 3b9eb12..ca4f59a 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -4,8 +4,7 @@
 		"context": "..",
 		"dockerfile": "./Dockerfile"
 	},
-	"postCreateCommand": "git config --global core.editor \"code --wait\"",
-	"postStartCommand": "npm install && bun install",
+	"postCreateCommand": "git config --local core.editor \"code --wait\" && git config --local commit.gpgsign false && npm install && bun install",
 	"customizations": {
         "vscode": {
             "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
@@ -13,7 +12,5 @@
     },
 	"mounts": [
 		"source=${env:HOME}/.gitconfig,target=/home/vscode/.gitconfig,type=bind,consistency=cached",
-		"source=${env:HOME}/.gnupg,target=/home/vscode/.gnupg,type=bind",
-		"source=${env:HOME}/.ssh,target=/home/vscode/.ssh,type=bind"
 	]
 }

From 7cf0b3d38602dc7b6970860615cebef1e3d5842a Mon Sep 17 00:00:00 2001
From: willianpm <willianpm15@gmail.com>
Date: Sun, 8 Mar 2026 02:15:17 +0000
Subject: [PATCH 06/26] fix(ui): prevent duplicate wheel listeners and correct
 mute handling

- Remove stacked wheel event listeners on fullscreen reopen to avoid multiple handler executions.
- Replace non-existent Player mute methods with audioPlayer.muted property and localStorage update.
- Ensures volume wheel and mute logic work correctly after multiple fullscreen toggles.
---
 js/ui.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/js/ui.js b/js/ui.js
index c67168b..78a0660 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1351,17 +1351,22 @@ export class UIRenderer {
                 const currentVolume = this.player.userVolume;
                 const newVolume = Math.max(0, Math.min(1, currentVolume + delta));
 
-                if (delta > 0 && this.player.muted) {
-                    this.player.setMute(false);
+                if (delta > 0 && audioPlayer.muted) {
+                    audioPlayer.muted = false;
+                    localStorage.setItem('muted', false);
                 }
 
                 this.player.setVolume(newVolume);
                 updateFsVolumeUI();
             };
 
-            [fsVolumeBar, fsVolumeBtn].forEach((el) =>
-                el.addEventListener('wheel', handleFsVolumeWheel, { passive: false })
-            );
+            [fsVolumeBar, fsVolumeBtn].forEach((el) => {
+                if (el._fsVolumeWheelHandler) {
+                    el.removeEventListener('wheel', el._fsVolumeWheelHandler);
+                }
+                el._fsVolumeWheelHandler = handleFsVolumeWheel;
+                el.addEventListener('wheel', handleFsVolumeWheel, { passive: false });
+            });
 
             const setFsVolume = (e) => {
                 const rect = fsVolumeBar.getBoundingClientRect();

From e3f781d58811663c774cbb9bd0b97f9f348ec050 Mon Sep 17 00:00:00 2001
From: Samidy <samidy@proton.me>
Date: Sun, 8 Mar 2026 05:27:20 +0300
Subject: [PATCH 07/26] feat(covers): animated covers

---
 bun.lock        |   3 +
 js/music-api.js |  24 +++++
 js/player.js    |  86 ++++++++++++++-
 js/ui.js        | 271 +++++++++++++++++++++++++++++++++++++++++++++---
 package.json    |   1 +
 5 files changed, 370 insertions(+), 15 deletions(-)

diff --git a/bun.lock b/bun.lock
index 5046b04..63f4a92 100644
--- a/bun.lock
+++ b/bun.lock
@@ -15,6 +15,7 @@
         "cookie-session": "^2.1.1",
         "dashjs": "^5.1.1",
         "fuse.js": "^7.1.0",
+        "hls.js": "^1.6.15",
         "jose": "^6.1.3",
         "npm": "^11.11.0",
         "pocketbase": "^0.26.8",
@@ -843,6 +844,8 @@
 
     "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
 
+    "hls.js": ["hls.js@1.6.15", "", {}, "sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA=="],
+
     "hookified": ["hookified@1.15.0", "", {}, "sha512-51w+ZZGt7Zw5q7rM3nC4t3aLn/xvKDETsXqMczndvwyVQhAHfUmUuFBRFcos8Iyebtk7OAE9dL26wFNzZVVOkw=="],
 
     "html-entities": ["html-entities@2.6.0", "", {}, "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ=="],
diff --git a/js/music-api.js b/js/music-api.js
index adb8ee2..0f860d8 100644
--- a/js/music-api.js
+++ b/js/music-api.js
@@ -10,6 +10,7 @@ export class MusicAPI {
         this.tidalAPI = new LosslessAPI(settings);
         this.qobuzAPI = new QobuzAPI();
         this._settings = settings;
+        this.videoArtworkCache = new Map();
     }
 
     getCurrentProvider() {
@@ -139,6 +140,29 @@ export class MusicAPI {
         return this.getCoverUrl(fallbackCoverId, size);
     }
 
+    async getVideoArtwork(title, artist) {
+        const cacheKey = `${title}-${artist}`.toLowerCase();
+        if (this.videoArtworkCache.has(cacheKey)) {
+            return this.videoArtworkCache.get(cacheKey);
+        }
+
+        try {
+            const url = `https://artwork.boidu.dev/?s=${encodeURIComponent(title)}&a=${encodeURIComponent(artist)}`;
+            const response = await fetch(url);
+            if (!response.ok) return null;
+            const data = await response.json();
+            const result = {
+                videoUrl: data.videoUrl || null,
+                hlsUrl: data.animated || null
+            };
+            this.videoArtworkCache.set(cacheKey, result);
+            return result;
+        } catch (error) {
+            console.warn('Failed to fetch video artwork:', error);
+            return null;
+        }
+    }
+
     getArtistPictureUrl(id, size = '320') {
         if (typeof id === 'string' && id.startsWith('q:')) {
             return this.qobuzAPI.getArtistPictureUrl(id.slice(2), size);
diff --git a/js/player.js b/js/player.js
index 21c2d89..2b18861 100644
--- a/js/player.js
+++ b/js/player.js
@@ -18,6 +18,7 @@ import {
     audioEffectsSettings,
 } from './storage.js';
 import { audioContextManager } from './audio-context.js';
+import Hls from 'hls.js';
 
 export class Player {
     constructor(audioElement, api, quality = 'HI_RES_LOSSLESS') {
@@ -402,6 +403,42 @@ export class Player {
         }
     }
 
+    setupHlsVideo(video, result, fallbackImg) {
+        const url = result.videoUrl || result.hlsUrl;
+        if (!url) return;
+
+        if (url.endsWith('.m3u8')) {
+            if (Hls.isSupported()) {
+                const hls = new Hls();
+                hls.loadSource(url);
+                hls.attachMedia(video);
+                hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                    video.play().catch(() => {});
+                });
+                hls.on(Hls.Events.ERROR, (event, data) => {
+                    if (data.fatal) {
+                        console.warn('HLS fatal error:', data.type);
+                        video.replaceWith(fallbackImg);
+                        hls.destroy();
+                    }
+                });
+            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                video.src = url;
+            } else {
+                video.replaceWith(fallbackImg);
+            }
+        } else {
+            video.src = url;
+            video.onerror = () => {
+                if (result.hlsUrl) {
+                    this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, fallbackImg);
+                } else {
+                    video.replaceWith(fallbackImg);
+                }
+            };
+        }
+    }
+
     async playTrackFromQueue(startTime = 0, recursiveCount = 0) {
         const currentQueue = this.shuffleActive ? this.shuffledQueue : this.queue;
         if (this.currentQueueIndex < 0 || this.currentQueueIndex >= currentQueue.length) {
@@ -433,22 +470,67 @@ export class Player {
 
         const coverEl = document.querySelector('.now-playing-bar .cover');
         if (coverEl) {
-            const videoCoverUrl = track.album?.videoCover
+            let videoCoverUrl = track.album?.videoCover
                 ? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover)
-                : null;
+                : track.album?.videoCoverUrl || null;
+
+            if (!videoCoverUrl && track.album) {
+                this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
+                    if (result && this.currentTrack?.id === track.id) {
+                        const url = result.videoUrl || result.hlsUrl;
+                        if (!url) return;
+                        
+                        track.album.videoCoverUrl = url;
+                        const currentCoverEl = document.querySelector('.now-playing-bar .cover');
+                        if (currentCoverEl && currentCoverEl.tagName !== 'VIDEO') {
+                            const video = document.createElement('video');
+                            video.autoplay = true;
+                            video.loop = true;
+                            video.muted = true;
+                            video.playsInline = true;
+                            video.preload = 'auto';
+                            video.className = currentCoverEl.className;
+                            video.id = currentCoverEl.id;
+                            video.style.opacity = '1';
+                            video.style.zIndex = '1';
+                            video.style.objectFit = 'cover';
+                            video.poster = currentCoverEl.src;
+
+                            this.setupHlsVideo(video, result, currentCoverEl);
+                            currentCoverEl.replaceWith(video);
+                        }
+                    }
+                });
+            }
+
             const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover);
 
             if (videoCoverUrl) {
                 if (coverEl.tagName === 'IMG') {
                     const video = document.createElement('video');
                     video.src = videoCoverUrl;
+                    video.poster = this.api.getCoverUrl(track.album?.cover);
                     video.autoplay = true;
                     video.loop = true;
                     video.muted = true;
                     video.playsInline = true;
+                    video.preload = 'auto';
                     video.className = coverEl.className;
                     video.id = coverEl.id;
+                    video.style.objectFit = 'cover';
+                    video.style.gridArea = '1 / 1';
+                    video.onerror = () => {
+                        const img = document.createElement('img');
+                        img.src = this.api.getCoverUrl(track.album?.cover);
+                        img.className = video.className;
+                        img.id = video.id;
+                        video.replaceWith(img);
+                    };
                     coverEl.replaceWith(video);
+                } else if (coverEl.tagName === 'VIDEO' && coverEl.src !== videoCoverUrl) {
+                    coverEl.src = videoCoverUrl;
+                    coverEl.poster = this.api.getCoverUrl(track.album?.cover);
+                    coverEl.style.objectFit = 'cover';
                 }
             } else {
                 if (coverEl.tagName === 'VIDEO') {
diff --git a/js/ui.js b/js/ui.js
index 45ffb28..a30b994 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -49,6 +49,7 @@ import {
     createTrackFromSong,
 } from './tracker.js';
 import { trackSearch, trackChangeSort } from './analytics.js';
+import Hls from 'hls.js';
 
 fontSettings.applyFont();
 fontSettings.applyFontSize();
@@ -412,12 +413,13 @@ export class UIRenderer {
         `;
     }
 
-    getCoverHTML(videoCover, cover, alt, className = 'card-image', loading = 'lazy') {
-        const videoUrl = videoCover ? this.api.tidalAPI.getVideoCoverUrl(videoCover) : null;
+    getCoverHTML(videoCover, cover, alt, className = 'card-image', loading = 'lazy', videoCoverUrl = null) {
+        const videoUrl = (videoCover ? this.api.tidalAPI.getVideoCoverUrl(videoCover) : null) || videoCoverUrl;
+        const imageUrl = this.api.getCoverUrl(cover);
         if (videoUrl) {
-            return `<video src="${videoUrl}" class="${className}" alt="${alt}" autoplay loop muted playsinline></video>`;
+            return `<video src="${videoUrl}" poster="${imageUrl}" class="${className}" alt="${alt}" autoplay loop muted playsinline preload="auto" onerror="this.onerror=null; this.outerHTML='<img src=&quot;${imageUrl}&quot; class=&quot;${className}&quot; alt=&quot;${alt}&quot; loading=&quot;${loading}&quot;>';"></video>`;
         }
-        return `<img src="${this.api.getCoverUrl(cover)}" class="${className}" alt="${alt}" loading="${loading}">`;
+        return `<img src="${imageUrl}" class="${className}" alt="${alt}" loading="${loading}">`;
     }
 
     createBaseCardHTML({
@@ -623,7 +625,7 @@ export class UIRenderer {
             href: `/album/${album.id}`,
             title: `${escapeHtml(album.title)} ${explicitBadge} ${qualityBadge}`,
             subtitle: `${escapeHtml(artistName)} • ${yearDisplay}${typeLabel}`,
-            imageHTML: this.getCoverHTML(album.videoCover, album.cover, escapeHtml(album.title)),
+            imageHTML: this.getCoverHTML(album.videoCover, album.cover, escapeHtml(album.title), 'card-image', 'lazy', album.videoCoverUrl),
             actionButtonsHTML: `
                 <button class="like-btn card-like-btn" data-action="toggle-like" data-type="album" title="Add to Liked">
                     ${this.createHeartIcon(false)}
@@ -910,7 +912,7 @@ export class UIRenderer {
 
         const videoCoverUrl = track.album?.videoCover
             ? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover, '1280')
-            : null;
+            : (track.album?.videoCoverUrl || null);
         const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover, '1280');
 
         const fsLikeBtn = document.getElementById('fs-like-btn');
@@ -1434,6 +1436,7 @@ export class UIRenderer {
     }
 
     showPage(pageId) {
+        this.currentPage = pageId;
         document.querySelectorAll('.page').forEach((page) => {
             page.classList.toggle('active', page.id === `page-${pageId}`);
         });
@@ -1524,6 +1527,38 @@ export class UIRenderer {
         const likedPlaylists = await db.getFavorites('playlist');
         const likedMixes = await db.getFavorites('mix');
 
+
+        if (likedTracks.length > 0) {
+            likedTracks.slice(0, 2).forEach((track) => {
+                if (!track.album?.videoCover && !track.album?.videoCoverUrl) {
+                    this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
+                        if (result && this.currentPage === 'library') {
+                            const url = result.videoUrl || result.hlsUrl;
+                            if (!url) return;
+                            track.album = track.album || {};
+                            track.album.videoCoverUrl = url;
+                            this.replaceVideoArtwork(tracksContainer, 'track', track.id, result);
+                        }
+                    });
+                }
+            });
+        }
+
+        if (likedAlbums.length > 0) {
+            likedAlbums.slice(0, 2).forEach((album) => {
+                if (!album.videoCover && !album.videoCoverUrl) {
+                    this.api.getVideoArtwork(album.title, typeof album.artist === 'string' ? album.artist : (album.artist?.name || '')).then((result) => {
+                        if (result && this.currentPage === 'library') {
+                            const url = result.videoUrl || result.hlsUrl;
+                            if (!url) return;
+                            album.videoCoverUrl = url;
+                            this.replaceVideoArtwork(albumsContainer, 'album', album.id, result);
+                        }
+                    });
+                }
+            });
+        }
+
         let mixedContent = [];
         if (likedPlaylists.length) mixedContent.push(...likedPlaylists.map((p) => ({ ...p, _type: 'playlist' })));
         if (likedMixes.length) mixedContent.push(...likedMixes.map((m) => ({ ...m, _type: 'mix' })));
@@ -2388,6 +2423,88 @@ export class UIRenderer {
         return items.filter((item) => !favoriteIds.has(item.id));
     }
 
+    setupHlsVideo(video, result, fallbackImg) {
+        const url = result.videoUrl || result.hlsUrl;
+        if (!url) return;
+
+        if (url.endsWith('.m3u8')) {
+            if (Hls.isSupported()) {
+                const hls = new Hls();
+                hls.loadSource(url);
+                hls.attachMedia(video);
+                hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                    video.play().catch(() => {});
+                });
+                hls.on(Hls.Events.ERROR, (event, data) => {
+                    if (data.fatal) {
+                        console.warn('HLS fatal error:', data.type);
+                        video.replaceWith(fallbackImg);
+                        hls.destroy();
+                    }
+                });
+            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                // i heard safari supports HLS natively
+                video.src = url;
+            } else {
+                video.replaceWith(fallbackImg);
+            }
+        } else {
+            // MP4
+            video.src = url;
+            video.onerror = () => {
+                if (result.hlsUrl) {
+                    // HLS fallback (for some reason alot of animated covers js dont work on MP4 lol)
+                    this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, fallbackImg);
+                } else {
+                    video.replaceWith(fallbackImg);
+                }
+            };
+        }
+    }
+
+    replaceVideoArtwork(container, type, id, result) {
+        const url = result.videoUrl || result.hlsUrl;
+        if (!url) return;
+
+        const card = container.querySelector(`[data-${type}-id="${id}"]`);
+        if (!card) return;
+        const img = card.querySelector('.card-image');
+        if (img && img.tagName !== 'VIDEO') {
+            const video = document.createElement('video');
+            video.autoplay = true;
+            video.loop = true;
+            video.muted = true;
+            video.playsInline = true;
+            video.preload = 'auto';
+            video.className = img.className;
+            video.id = img.id;
+            video.style.objectFit = 'cover';
+
+            video.poster = img.src;
+
+            video.onerror = () => {
+                if (video.src === result.videoUrl && result.hlsUrl) {
+                    this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, img);
+                    return;
+                }
+                video.replaceWith(img);
+            };
+
+            video.addEventListener('error', (e) => {
+                if (video.src === result.videoUrl && result.hlsUrl) {
+                    this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, img);
+                    return;
+                }
+                console.warn('Video decoding error:', e);
+                video.replaceWith(img);
+            }, true);
+
+            img.replaceWith(video);
+            
+            this.setupHlsVideo(video, result, img);
+        }
+    }
+
     async renderSearchPage(query) {
         this.showPage('search');
         document.getElementById('search-results-title').textContent = `Search Results for "${query}"`;
@@ -2494,6 +2611,35 @@ export class UIRenderer {
                     this.updateLikeState(el, 'playlist', playlist.uuid);
                 }
             });
+
+            if (finalTracks.length > 0) {
+                const track = finalTracks[0];
+                if (!track.album?.videoCover && !track.album?.videoCoverUrl) {
+                    this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
+                        if (result && this.currentPage === 'search') {
+                            const url = result.videoUrl || result.hlsUrl;
+                            if (!url) return;
+                            track.album = track.album || {};
+                            track.album.videoCoverUrl = url;
+                            this.replaceVideoArtwork(tracksContainer, 'track', track.id, result);
+                        }
+                    });
+                }
+            }
+
+            if (finalAlbums.length > 0) {
+                const album = finalAlbums[0];
+                if (!album.videoCover && !album.videoCoverUrl) {
+                    this.api.getVideoArtwork(album.title, typeof album.artist === 'string' ? album.artist : (album.artist?.name || '')).then((result) => {
+                        if (result && this.currentPage === 'search') {
+                            const url = result.videoUrl || result.hlsUrl;
+                            if (!url) return;
+                            album.videoCoverUrl = url;
+                            this.replaceVideoArtwork(albumsContainer, 'album', album.id, result);
+                        }
+                    });
+                }
+            }
         } catch (error) {
             if (error.name === 'AbortError') return;
             console.error('Search failed:', error);
@@ -2613,8 +2759,39 @@ export class UIRenderer {
 
         try {
             const { album, tracks } = await this.api.getAlbum(albumId, provider);
+            this.currentAlbumId = albumId;
+
+            let videoCoverUrl = album.videoCover
+                ? this.api.tidalAPI.getVideoCoverUrl(album.videoCover)
+                : (album.videoCoverUrl || null);
+
+            if (!videoCoverUrl && tracks.length > 0) {
+                const firstTrack = tracks[0];
+                this.api.getVideoArtwork(firstTrack.title, getTrackArtists(firstTrack)).then((result) => {
+                    if (result && this.currentPage === 'album' && this.currentAlbumId === albumId) {
+                        const url = result.videoUrl || result.hlsUrl;
+                        if (!url) return;
+                        album.videoCoverUrl = url;
+                        const currentImageEl = document.getElementById('album-detail-image');
+                        if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
+                            const video = document.createElement('video');
+                            video.autoplay = true;
+                            video.loop = true;
+                            video.muted = true;
+                            video.playsInline = true;
+                            video.preload = 'auto';
+                            video.className = currentImageEl.className;
+                            video.id = currentImageEl.id;
+                            video.style.objectFit = 'cover';
+                            video.poster = currentImageEl.src;
+
+                            this.setupHlsVideo(video, result, currentImageEl);
+                            currentImageEl.replaceWith(video);
+                        }
+                    }
+                });
+            }
 
-            const videoCoverUrl = album.videoCover ? this.api.tidalAPI.getVideoCoverUrl(album.videoCover) : null;
             const coverUrl = videoCoverUrl || this.api.getCoverUrl(album.cover);
 
             if (videoCoverUrl) {
@@ -3364,6 +3541,7 @@ export class UIRenderer {
 
         try {
             const { mix, tracks } = await this.api.getMix(mixId, provider);
+            this.currentMixId = mixId;
 
             if (mix.cover) {
                 imageEl.src = mix.cover;
@@ -3372,10 +3550,47 @@ export class UIRenderer {
             } else {
                 // Try to get cover from first track album
                 if (tracks.length > 0 && tracks[0].album?.cover) {
-                    const videoCoverUrl = tracks[0].album?.videoCover
-                        ? this.api.tidalAPI.getVideoCoverUrl(tracks[0].album.videoCover)
-                        : null;
-                    const coverUrl = videoCoverUrl || this.api.getCoverUrl(tracks[0].album.cover);
+                    const firstTrack = tracks[0];
+                    let videoCoverUrl = firstTrack.album?.videoCover
+                        ? this.api.tidalAPI.getVideoCoverUrl(firstTrack.album.videoCover)
+                        : (firstTrack.album?.videoCoverUrl || null);
+
+                    if (!videoCoverUrl && firstTrack.album) {
+                        this.api.getVideoArtwork(firstTrack.title, getTrackArtists(firstTrack)).then((result) => {
+                            if (result && this.currentPage === 'mix' && this.currentMixId === mixId) {
+                                const url = result.videoUrl || result.hlsUrl;
+                                if (!url) return;
+                                firstTrack.album.videoCoverUrl = url;
+                                const currentImageEl = document.getElementById('mix-detail-image');
+                                if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
+                                    const video = document.createElement('video');
+                                    video.autoplay = true;
+                                    video.loop = true;
+                                    video.muted = true;
+                                    video.playsInline = true;
+                                    video.preload = 'auto';
+                                    video.className = currentImageEl.className;
+                                    video.id = currentImageEl.id;
+                                    video.style.opacity = '0';
+                                    video.style.transition = 'opacity 0.3s ease-in-out';
+
+                                    video.oncanplay = () => {
+                                        video.style.opacity = '1';
+                                        setTimeout(() => {
+                                            if (currentImageEl.parentNode) {
+                                                currentImageEl.style.display = 'none';
+                                            }
+                                        }, 300);
+                                    };
+
+                                    this.setupHlsVideo(video, result, currentImageEl);
+                                    currentImageEl.parentNode.insertBefore(video, currentImageEl);
+                                }
+                            }
+                        });
+                    }
+
+                    const coverUrl = videoCoverUrl || this.api.getCoverUrl(firstTrack.album.cover);
 
                     if (videoCoverUrl) {
                         if (imageEl.tagName === 'IMG') {
@@ -4416,10 +4631,40 @@ export class UIRenderer {
                 console.warn('getTrack failed, trying getTrackMetadata', e);
                 track = await this.api.getTrackMetadata(trackId, provider);
             }
+            this.currentTrackPageId = track.id;
 
-            const videoCoverUrl = track.album?.videoCover
+            let videoCoverUrl = track.album?.videoCover
                 ? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover)
-                : null;
+                : (track.album?.videoCoverUrl || null);
+
+            if (!videoCoverUrl && track.album) {
+                this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
+                    if (result && this.currentPage === 'track' && this.currentTrackPageId === track.id) {
+                        const url = result.videoUrl || result.hlsUrl;
+                        if (!url) return;
+                        track.album.videoCoverUrl = url;
+                        const currentImageEl = document.getElementById('track-detail-image');
+                        if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
+                            const video = document.createElement('video');
+                            video.autoplay = true;
+                            video.loop = true;
+                            video.muted = true;
+                            video.playsInline = true;
+                            video.preload = 'auto';
+                            video.className = currentImageEl.className;
+                            video.id = currentImageEl.id;
+                            video.style.opacity = '0';
+                            video.style.transition = 'opacity 0.3s ease-in-out';
+
+                            video.poster = currentImageEl.src;
+
+                            this.setupHlsVideo(video, result, currentImageEl);
+                            currentImageEl.replaceWith(video);
+                        }
+                    }
+                });
+            }
+
             const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover);
 
             if (videoCoverUrl) {
diff --git a/package.json b/package.json
index e241243..9880117 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
         "cookie-session": "^2.1.1",
         "dashjs": "^5.1.1",
         "fuse.js": "^7.1.0",
+        "hls.js": "^1.6.15",
         "jose": "^6.1.3",
         "npm": "^11.11.0",
         "pocketbase": "^0.26.8"

From b9bbbb6820eb244185f9357e71e19b1281b991fe Mon Sep 17 00:00:00 2001
From: edideaur <182119792+edideaur@users.noreply.github.com>
Date: Sun, 8 Mar 2026 11:52:44 +0000
Subject: [PATCH 08/26] style: auto-fix linting issues

---
 .devcontainer/devcontainer.json | 18 ++++++--------
 .vscode/tasks.json              | 44 ++++++++++++++++-----------------
 2 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index ca4f59a..bd87db0 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,16 +1,14 @@
 {
-	"name": "Monochrome Dev Container",
-	"build": {
-		"context": "..",
-		"dockerfile": "./Dockerfile"
-	},
-	"postCreateCommand": "git config --local core.editor \"code --wait\" && git config --local commit.gpgsign false && npm install && bun install",
-	"customizations": {
+    "name": "Monochrome Dev Container",
+    "build": {
+        "context": "..",
+        "dockerfile": "./Dockerfile"
+    },
+    "postCreateCommand": "git config --local core.editor \"code --wait\" && git config --local commit.gpgsign false && npm install && bun install",
+    "customizations": {
         "vscode": {
             "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
         }
     },
-	"mounts": [
-		"source=${env:HOME}/.gitconfig,target=/home/vscode/.gitconfig,type=bind,consistency=cached",
-	]
+    "mounts": ["source=${env:HOME}/.gitconfig,target=/home/vscode/.gitconfig,type=bind,consistency=cached"]
 }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 59ffa53..6938754 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -1,23 +1,23 @@
 {
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"type": "npm",
-			"script": "build",
-			"group": {
-				"kind": "build",
-				"isDefault": true
-			},
-			"problemMatcher": [],
-			"label": "npm: build",
-			"detail": "vite build"
-		},
-		{
-			"type": "npm",
-			"script": "dev",
-			"problemMatcher": [],
-			"label": "npm: dev",
-			"detail": "vite"
-		}
-	]
-}
\ No newline at end of file
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "npm",
+            "script": "build",
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "problemMatcher": [],
+            "label": "npm: build",
+            "detail": "vite build"
+        },
+        {
+            "type": "npm",
+            "script": "dev",
+            "problemMatcher": [],
+            "label": "npm: dev",
+            "detail": "vite"
+        }
+    ]
+}

From 473d63c8997e26d7191b5d41b46466e7d7a4b2e7 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 8 Mar 2026 18:34:27 +0100
Subject: [PATCH 09/26] reorganize settings menu, add playback speed reset and
 instances tab

---
 index.html     | 215 ++++++++++++++++++++++++++++---------------------
 js/settings.js |  61 +++++++++-----
 js/storage.js  |   5 ++
 styles.css     |  59 ++++++++++++++
 4 files changed, 227 insertions(+), 113 deletions(-)

diff --git a/index.html b/index.html
index 5b4b4b7..aa153e1 100644
--- a/index.html
+++ b/index.html
@@ -3428,6 +3428,7 @@
                         <button class="settings-tab" data-tab="scrobbling">Scrobbling</button>
                         <button class="settings-tab" data-tab="audio">Audio</button>
                         <button class="settings-tab" data-tab="downloads">Downloads</button>
+                        <button class="settings-tab" data-tab="instances">Instances</button>
                         <button class="settings-tab" data-tab="system">System</button>
                     </div>
                     <div class="settings-tab-content active" id="settings-tab-appearance">
@@ -3665,6 +3666,9 @@
                                         <span class="slider"></span>
                                     </label>
                                 </div>
+                            </div>
+
+                            <div class="settings-group">
                                 <div class="setting-item">
                                     <div class="info">
                                         <span class="label">Full-screen Visualizer</span>
@@ -3868,6 +3872,29 @@
                                 </div>
                             </div>
 
+                            <div class="settings-group">
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Compact Artists</span>
+                                        <span class="description">Show artist cards in a compact, horizontal layout</span>
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="compact-artist-toggle" />
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Compact Albums</span>
+                                        <span class="description">Show album cards in a compact, horizontal layout</span>
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="compact-album-toggle" />
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                            </div>
+
                             <div class="settings-group" id="sidebar-order-settings-group">
                                 <div class="sidebar-settings-section sidebar-settings-main">
                                     <span class="sidebar-settings-section-label">TOP SECTION</span>
@@ -4502,43 +4529,6 @@
                                         <option value="LOW">AAC 96kbps</option>
                                     </select>
                                 </div>
-                                <div class="setting-item">
-                                    <div class="info">
-                                        <span class="label">Download Quality</span>
-                                        <span class="description">Quality for track downloads</span>
-                                    </div>
-                                    <select id="download-quality-setting">
-                                        <option value="HI_RES_LOSSLESS">Hi-Res FLAC (24-bit)</option>
-                                        <option value="LOSSLESS">FLAC (Lossless)</option>
-                                        <option value="MP3_320">MP3 320kbps</option>
-                                        <option value="HIGH">AAC 320kbps</option>
-                                        <option value="LOW">AAC 96kbps</option>
-                                    </select>
-                                </div>
-                                <div class="setting-item">
-                                    <div class="info">
-                                        <span class="label">Lossless Container</span>
-                                        <span class="description">Container format for lossless downloads</span>
-                                    </div>
-                                    <select id="lossless-container-setting">
-                                        <option value="flac">FLAC</option>
-                                        <option value="alac">Apple Lossless</option>
-                                        <option value="nochange">Don't change</option>
-                                    </select>
-                                </div>
-                                <div class="setting-item">
-                                    <div class="info">
-                                        <span class="label">Cover Art Size</span>
-                                        <span class="description">Size for downloaded/embedded cover art</span>
-                                    </div>
-                                    <input
-                                        type="text"
-                                        id="cover-art-size-setting"
-                                        class="template-input"
-                                        style="width: 120px; text-align: right"
-                                        placeholder="1280x1280"
-                                    />
-                                </div>
                                 <div class="setting-item">
                                     <div class="info">
                                         <span class="label">Show Quality Badges</span>
@@ -4571,6 +4561,9 @@
                                         <span class="slider"></span>
                                     </label>
                                 </div>
+                            </div>
+
+                            <div class="settings-group">
                                 <div class="setting-item">
                                     <div class="info">
                                         <span class="label">ReplayGain Mode</span>
@@ -4624,7 +4617,7 @@
                                         <span class="label">Playback Speed</span>
                                         <span class="description">Adjust playback speed (0.01x - 100x)</span>
                                     </div>
-                                    <div style="display: flex; align-items: center; gap: 12px">
+                                    <div class="playback-speed-control">
                                         <input
                                             type="range"
                                             id="playback-speed-slider"
@@ -4632,7 +4625,7 @@
                                             max="4.0"
                                             step="0.01"
                                             value="1.0"
-                                            style="width: 150px"
+                                            class="playback-speed-slider"
                                         />
                                         <input
                                             type="number"
@@ -4641,18 +4634,12 @@
                                             max="100"
                                             step="0.01"
                                             value="1.0"
-                                            style="
-                                                width: 80px;
-                                                text-align: center;
-                                                font-family: var(--font-family);
-                                                padding: 4px 8px;
-                                                border: 1px solid var(--border-color);
-                                                border-radius: 4px;
-                                                background: var(--bg-secondary);
-                                                color: var(--text-primary);
-                                            "
+                                            class="playback-speed-number-input"
                                         />
-                                        <span style="font-family: var(--font-family)">x</span>
+                                        <span class="playback-speed-unit">x</span>
+                                        <button id="playback-speed-reset" class="btn-secondary" title="Reset to default">
+                                            Reset
+                                        </button>
                                     </div>
                                 </div>
 
@@ -4924,32 +4911,10 @@
                                     </div>
                                 </div>
                             </div>
-
-                            <div class="settings-group">
-                                <div class="info">
-                                    <span class="label">Compact Artists</span>
-                                    <span class="description">Show artist cards in a compact, horizontal layout</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="compact-artist-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Compact Albums</span>
-                                    <span class="description">Show album cards in a compact, horizontal layout</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="compact-album-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="settings-tab-content" id="settings-tab-downloads">
-                    <div class="settings-list">
+                    <div class="settings-tab-content" id="settings-tab-downloads">
+                        <div class="settings-list">
                         <div class="settings-group">
                             <div class="setting-item">
                                 <div class="info">
@@ -4985,6 +4950,43 @@
                                     <span class="slider"></span>
                                 </label>
                             </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Download Quality</span>
+                                    <span class="description">Quality for track downloads</span>
+                                </div>
+                                <select id="download-quality-setting">
+                                    <option value="HI_RES_LOSSLESS">Hi-Res FLAC (24-bit)</option>
+                                    <option value="LOSSLESS">FLAC (Lossless)</option>
+                                    <option value="MP3_320">MP3 320kbps</option>
+                                    <option value="HIGH">AAC 320kbps</option>
+                                    <option value="LOW">AAC 96kbps</option>
+                                </select>
+                            </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Lossless Container</span>
+                                    <span class="description">Container format for lossless downloads</span>
+                                </div>
+                                <select id="lossless-container-setting">
+                                    <option value="flac">FLAC</option>
+                                    <option value="alac">Apple Lossless</option>
+                                    <option value="nochange">Don't change</option>
+                                </select>
+                            </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Cover Art Size</span>
+                                    <span class="description">Size for downloaded/embedded cover art</span>
+                                </div>
+                                <input
+                                    type="text"
+                                    id="cover-art-size-setting"
+                                    class="template-input"
+                                    style="width: 120px; text-align: right"
+                                    placeholder="1280x1280"
+                                />
+                            </div>
                             <div class="setting-item">
                                 <div class="info">
                                     <span class="label">Filename Template</span>
@@ -5015,6 +5017,9 @@
                                     placeholder="{albumTitle} - {albumArtist} - monochrome.tf"
                                 />
                             </div>
+                        </div>
+
+                        <div class="settings-group">
                             <div class="setting-item">
                                 <div class="info">
                                     <span class="label">Generate M3U</span>
@@ -5067,6 +5072,9 @@
                                     <span class="slider"></span>
                                 </label>
                             </div>
+                        </div>
+
+                        <div class="settings-group">
                             <div class="setting-item">
                                 <div class="info">
                                     <span class="label">Relative Paths</span>
@@ -5092,6 +5100,36 @@
                         </div>
                     </div>
                 </div>
+
+                <div class="settings-tab-content" id="settings-tab-instances">
+                    <div class="settings-list">
+                        <div class="settings-group">
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">ADVANCED: Custom Database/Auth</span>
+                                    <span class="description">Configure custom PocketBase and Firebase instances</span>
+                                </div>
+                                <button id="custom-db-btn" class="btn-secondary">Configure</button>
+                            </div>
+                        </div>
+
+                        <div class="settings-group">
+                            <div id="api-instance-manager">
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">API Instances</span>
+                                        <span class="description">Manage and prioritize API instances.</span>
+                                    </div>
+                                    <button id="refresh-speed-test-btn" class="btn-secondary">
+                                        Refresh Instance List
+                                    </button>
+                                </div>
+                                <ul id="api-instance-list"></ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
                 <div class="settings-tab-content" id="settings-tab-system">
                     <div class="settings-list">
                         <div class="settings-group">
@@ -5140,6 +5178,9 @@
                                     <span class="slider"></span>
                                 </label>
                             </div>
+                        </div>
+
+                        <div class="settings-group">
                             <div class="setting-item">
                                 <div class="info">
                                     <span class="label">Reset Local Data</span>
@@ -5160,6 +5201,9 @@
                                     Clear Cloud Data
                                 </button>
                             </div>
+                        </div>
+
+                        <div class="settings-group">
                             <div class="setting-item">
                                 <div class="info">
                                     <span class="label">Backup & Restore</span>
@@ -5187,27 +5231,10 @@
                                     />
                                 </div>
                             </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">ADVANCED: Custom Database/Auth</span>
-                                    <span class="description">Configure custom PocketBase and Firebase instances</span>
-                                </div>
-                                <button id="custom-db-btn" class="btn-secondary">Configure</button>
-                            </div>
-                            <div id="api-instance-manager">
-                                <div class="setting-item" style="padding-bottom: 1rem; border: none">
-                                    <div class="info">
-                                        <span class="label">API Instances</span>
-                                        <span class="description">Manage and prioritize API instances.</span>
-                                    </div>
-                                    <button id="refresh-speed-test-btn" class="btn-secondary">
-                                        Refresh Instance List
-                                    </button>
-                                </div>
-                                <ul id="api-instance-list"></ul>
-                            </div>
+                        </div>
 
-                            <div class="setting-item" style="padding-bottom: 1rem; border-top: 1px solid var(--border)">
+                        <div class="settings-group">
+                            <div class="setting-item">
                                 <div class="info">
                                     <span class="label">Blocked Content</span>
                                     <span class="description"
diff --git a/js/settings.js b/js/settings.js
index e321eaa..41a3914 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -901,33 +901,56 @@ export function initializeSettings(scrobbler, player, api, ui) {
     // ========================================
     const playbackSpeedSlider = document.getElementById('playback-speed-slider');
     const playbackSpeedInput = document.getElementById('playback-speed-input');
+    const playbackSpeedReset = document.getElementById('playback-speed-reset');
+
     if (playbackSpeedSlider && playbackSpeedInput) {
-        const currentSpeed = audioEffectsSettings.getSpeed();
-        // Clamp slider to its range (0.25-4), but show actual value in input
-        playbackSpeedSlider.value = Math.max(0.25, Math.min(4.0, currentSpeed));
-        playbackSpeedInput.value = currentSpeed;
-
-        // Slider only controls 0.25-4 range
-        playbackSpeedSlider.addEventListener('input', (e) => {
-            const speed = parseFloat(e.target.value) || 1.0;
-            playbackSpeedInput.value = speed;
-            player.setPlaybackSpeed(speed);
-        });
-
-        // Input allows full 0.01-100 range
-        const handleInputChange = () => {
-            const speed = parseFloat(playbackSpeedInput.value) || 1.0;
-            const validSpeed = Math.max(0.01, Math.min(100, speed));
+        // Helper function to update both controls
+        const updatePlaybackSpeedControls = (speed) => {
+            const validSpeed = Math.max(0.01, Math.min(100, parseFloat(speed) || 1.0));
             playbackSpeedInput.value = validSpeed;
             // Only update slider if value is within slider range
             if (validSpeed >= 0.25 && validSpeed <= 4.0) {
                 playbackSpeedSlider.value = validSpeed;
             }
-            player.setPlaybackSpeed(validSpeed);
+            return validSpeed;
         };
 
-        playbackSpeedInput.addEventListener('change', handleInputChange);
-        playbackSpeedInput.addEventListener('blur', handleInputChange);
+        // Initialize with current value
+        const currentSpeed = audioEffectsSettings.getSpeed();
+        updatePlaybackSpeedControls(currentSpeed);
+
+        playbackSpeedSlider.addEventListener('input', (e) => {
+            const speed = parseFloat(e.target.value);
+            playbackSpeedInput.value = speed;
+            audioEffectsSettings.setSpeed(speed);
+            player.setPlaybackSpeed(speed);
+        });
+
+        playbackSpeedInput.addEventListener('input', (e) => {
+            const speed = parseFloat(e.target.value);
+            if (!isNaN(speed) && speed >= 0.01 && speed <= 100) {
+                if (speed >= 0.25 && speed <= 4.0) {
+                    playbackSpeedSlider.value = speed;
+                }
+                audioEffectsSettings.setSpeed(speed);
+                player.setPlaybackSpeed(speed);
+            }
+        });
+
+        playbackSpeedInput.addEventListener('change', (e) => {
+            const speed = parseFloat(e.target.value);
+            const validSpeed = updatePlaybackSpeedControls(speed);
+            audioEffectsSettings.setSpeed(validSpeed);
+            player.setPlaybackSpeed(validSpeed);
+        });
+
+        if (playbackSpeedReset) {
+            playbackSpeedReset.addEventListener('click', () => {
+                const defaultSpeed = audioEffectsSettings.resetSpeed();
+                updatePlaybackSpeedControls(defaultSpeed);
+                player.setPlaybackSpeed(defaultSpeed);
+            });
+        }
     }
 
     // ========================================
diff --git a/js/storage.js b/js/storage.js
index c238f58..dfdaa98 100644
--- a/js/storage.js
+++ b/js/storage.js
@@ -1352,6 +1352,11 @@ export const audioEffectsSettings = {
         localStorage.setItem(this.SPEED_KEY, validSpeed.toString());
     },
 
+    resetSpeed() {
+        this.setSpeed(1.0);
+        return 1.0;
+    },
+
     // Preserve pitch when changing speed (default true)
     isPreservePitchEnabled() {
         try {
diff --git a/styles.css b/styles.css
index 49ae84b..e779837 100644
--- a/styles.css
+++ b/styles.css
@@ -2617,6 +2617,65 @@ input[type='search']::-webkit-search-cancel-button {
     width: 100px;
 }
 
+.playback-speed-control {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.playback-speed-slider {
+    appearance: none;
+    width: 150px;
+    height: 6px;
+    background: var(--border);
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    outline: none;
+}
+
+.playback-speed-slider::-webkit-slider-thumb {
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    background: var(--primary);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform 0.1s ease;
+}
+
+.playback-speed-slider::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+}
+
+.playback-speed-number-input {
+    width: 80px;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--input);
+    color: var(--foreground);
+    text-align: center;
+    font-size: 0.9rem;
+}
+
+.playback-speed-unit {
+    font-size: 0.9rem;
+    color: var(--muted-foreground);
+    min-width: 1rem;
+}
+
+.playback-speed-number-input:focus {
+    outline: none;
+    border-color: var(--primary);
+}
+
+/* Hide arrows/spinners for number input */
+.playback-speed-number-input::-webkit-outer-spin-button,
+.playback-speed-number-input::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+}
+
 .template-input {
     width: 100%;
     max-width: 400px;

From 443ef4b6e1bb5b730c4da84ae4fcc45ffc5465ea Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 8 Mar 2026 18:38:18 +0100
Subject: [PATCH 10/26] fix: resolve security vulnerabilities in dependencies

---
 package-lock.json | 1884 +--------------------------------------------
 package.json      |    4 +-
 2 files changed, 32 insertions(+), 1856 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b76bb22..61e91ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,6 @@
                 "dashjs": "^5.1.1",
                 "fuse.js": "^7.1.0",
                 "jose": "^6.1.3",
-                "npm": "^11.11.0",
                 "pocketbase": "^0.26.8"
             },
             "devDependencies": {
@@ -4068,6 +4067,7 @@
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
             "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "color-convert": "^2.0.1"
@@ -4253,6 +4253,7 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
             "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/baseline-browser-mapping": {
@@ -4320,6 +4321,7 @@
             "version": "1.1.12",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
             "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "balanced-match": "^1.0.0",
@@ -4534,6 +4536,7 @@
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
             "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "ansi-styles": "^4.1.0",
@@ -4572,6 +4575,7 @@
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
             "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "color-name": "~1.1.4"
@@ -4584,6 +4588,7 @@
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
             "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/colord": {
@@ -4617,6 +4622,7 @@
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
             "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/configstore": {
@@ -5638,6 +5644,7 @@
             "version": "1.0.16",
             "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
             "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 4.9.1"
@@ -5844,6 +5851,7 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
             "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+            "dev": true,
             "license": "ISC"
         },
         "node_modules/fsevents": {
@@ -6000,6 +6008,7 @@
             "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
             "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
             "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "fs.realpath": "^1.0.0",
@@ -6145,6 +6154,7 @@
             "version": "4.2.11",
             "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
             "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+            "dev": true,
             "license": "ISC"
         },
         "node_modules/has-bigints": {
@@ -6164,6 +6174,7 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
             "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=8"
@@ -6447,6 +6458,7 @@
             "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
             "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
             "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "once": "^1.3.0",
@@ -6457,12 +6469,14 @@
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
             "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+            "dev": true,
             "license": "ISC"
         },
         "node_modules/ini": {
             "version": "1.3.8",
             "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
             "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+            "dev": true,
             "license": "ISC"
         },
         "node_modules/internal-slot": {
@@ -7036,6 +7050,7 @@
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
             "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+            "dev": true,
             "license": "ISC"
         },
         "node_modules/isobject": {
@@ -7151,6 +7166,7 @@
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
             "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/json-schema": {
@@ -7477,6 +7493,7 @@
             "version": "3.1.5",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
             "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "brace-expansion": "^1.1.7"
@@ -7489,6 +7506,7 @@
             "version": "7.1.3",
             "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
             "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+            "dev": true,
             "license": "BlueOak-1.0.0",
             "engines": {
                 "node": ">=16 || 14 >=14.17"
@@ -7591,1844 +7609,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/npm": {
-            "version": "11.11.0",
-            "resolved": "https://registry.npmjs.org/npm/-/npm-11.11.0.tgz",
-            "integrity": "sha512-82gRxKrh/eY5UnNorkTFcdBQAGpgjWehkfGVqAGlJjejEtJZGGJUqjo3mbBTNbc5BTnPKGVtGPBZGhElujX5cw==",
-            "bundleDependencies": [
-                "@isaacs/string-locale-compare",
-                "@npmcli/arborist",
-                "@npmcli/config",
-                "@npmcli/fs",
-                "@npmcli/map-workspaces",
-                "@npmcli/metavuln-calculator",
-                "@npmcli/package-json",
-                "@npmcli/promise-spawn",
-                "@npmcli/redact",
-                "@npmcli/run-script",
-                "@sigstore/tuf",
-                "abbrev",
-                "archy",
-                "cacache",
-                "chalk",
-                "ci-info",
-                "fastest-levenshtein",
-                "fs-minipass",
-                "glob",
-                "graceful-fs",
-                "hosted-git-info",
-                "ini",
-                "init-package-json",
-                "is-cidr",
-                "json-parse-even-better-errors",
-                "libnpmaccess",
-                "libnpmdiff",
-                "libnpmexec",
-                "libnpmfund",
-                "libnpmorg",
-                "libnpmpack",
-                "libnpmpublish",
-                "libnpmsearch",
-                "libnpmteam",
-                "libnpmversion",
-                "make-fetch-happen",
-                "minimatch",
-                "minipass",
-                "minipass-pipeline",
-                "ms",
-                "node-gyp",
-                "nopt",
-                "npm-audit-report",
-                "npm-install-checks",
-                "npm-package-arg",
-                "npm-pick-manifest",
-                "npm-profile",
-                "npm-registry-fetch",
-                "npm-user-validate",
-                "p-map",
-                "pacote",
-                "parse-conflict-json",
-                "proc-log",
-                "qrcode-terminal",
-                "read",
-                "semver",
-                "spdx-expression-parse",
-                "ssri",
-                "supports-color",
-                "tar",
-                "text-table",
-                "tiny-relative-date",
-                "treeverse",
-                "validate-npm-package-name",
-                "which"
-            ],
-            "license": "Artistic-2.0",
-            "workspaces": [
-                "docs",
-                "smoke-tests",
-                "mock-globals",
-                "mock-registry",
-                "workspaces/*"
-            ],
-            "dependencies": {
-                "@isaacs/string-locale-compare": "^1.1.0",
-                "@npmcli/arborist": "^9.4.0",
-                "@npmcli/config": "^10.7.1",
-                "@npmcli/fs": "^5.0.0",
-                "@npmcli/map-workspaces": "^5.0.3",
-                "@npmcli/metavuln-calculator": "^9.0.3",
-                "@npmcli/package-json": "^7.0.5",
-                "@npmcli/promise-spawn": "^9.0.1",
-                "@npmcli/redact": "^4.0.0",
-                "@npmcli/run-script": "^10.0.3",
-                "@sigstore/tuf": "^4.0.1",
-                "abbrev": "^4.0.0",
-                "archy": "~1.0.0",
-                "cacache": "^20.0.3",
-                "chalk": "^5.6.2",
-                "ci-info": "^4.4.0",
-                "fastest-levenshtein": "^1.0.16",
-                "fs-minipass": "^3.0.3",
-                "glob": "^13.0.6",
-                "graceful-fs": "^4.2.11",
-                "hosted-git-info": "^9.0.2",
-                "ini": "^6.0.0",
-                "init-package-json": "^8.2.5",
-                "is-cidr": "^6.0.3",
-                "json-parse-even-better-errors": "^5.0.0",
-                "libnpmaccess": "^10.0.3",
-                "libnpmdiff": "^8.1.3",
-                "libnpmexec": "^10.2.3",
-                "libnpmfund": "^7.0.17",
-                "libnpmorg": "^8.0.1",
-                "libnpmpack": "^9.1.3",
-                "libnpmpublish": "^11.1.3",
-                "libnpmsearch": "^9.0.1",
-                "libnpmteam": "^8.0.2",
-                "libnpmversion": "^8.0.3",
-                "make-fetch-happen": "^15.0.4",
-                "minimatch": "^10.2.2",
-                "minipass": "^7.1.3",
-                "minipass-pipeline": "^1.2.4",
-                "ms": "^2.1.2",
-                "node-gyp": "^12.2.0",
-                "nopt": "^9.0.0",
-                "npm-audit-report": "^7.0.0",
-                "npm-install-checks": "^8.0.0",
-                "npm-package-arg": "^13.0.2",
-                "npm-pick-manifest": "^11.0.3",
-                "npm-profile": "^12.0.1",
-                "npm-registry-fetch": "^19.1.1",
-                "npm-user-validate": "^4.0.0",
-                "p-map": "^7.0.4",
-                "pacote": "^21.4.0",
-                "parse-conflict-json": "^5.0.1",
-                "proc-log": "^6.1.0",
-                "qrcode-terminal": "^0.12.0",
-                "read": "^5.0.1",
-                "semver": "^7.7.4",
-                "spdx-expression-parse": "^4.0.0",
-                "ssri": "^13.0.1",
-                "supports-color": "^10.2.2",
-                "tar": "^7.5.9",
-                "text-table": "~0.2.0",
-                "tiny-relative-date": "^2.0.2",
-                "treeverse": "^3.0.0",
-                "validate-npm-package-name": "^7.0.2",
-                "which": "^6.0.1"
-            },
-            "bin": {
-                "npm": "bin/npm-cli.js",
-                "npx": "bin/npx-cli.js"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@gar/promise-retry": {
-            "version": "1.0.2",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "retry": "^0.13.1"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@gar/promise-retry/node_modules/retry": {
-            "version": "0.13.1",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">= 4"
-            }
-        },
-        "node_modules/npm/node_modules/@isaacs/fs-minipass": {
-            "version": "4.0.1",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "minipass": "^7.0.4"
-            },
-            "engines": {
-                "node": ">=18.0.0"
-            }
-        },
-        "node_modules/npm/node_modules/@isaacs/string-locale-compare": {
-            "version": "1.1.0",
-            "inBundle": true,
-            "license": "ISC"
-        },
-        "node_modules/npm/node_modules/@npmcli/agent": {
-            "version": "4.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "agent-base": "^7.1.0",
-                "http-proxy-agent": "^7.0.0",
-                "https-proxy-agent": "^7.0.1",
-                "lru-cache": "^11.2.1",
-                "socks-proxy-agent": "^8.0.3"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@npmcli/arborist": {
-            "version": "9.4.0",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@isaacs/string-locale-compare": "^1.1.0",
-                "@npmcli/fs": "^5.0.0",
-                "@npmcli/installed-package-contents": "^4.0.0",
-                "@npmcli/map-workspaces": "^5.0.0",
-                "@npmcli/metavuln-calculator": "^9.0.2",
-                "@npmcli/name-from-folder": "^4.0.0",
-                "@npmcli/node-gyp": "^5.0.0",
-                "@npmcli/package-json": "^7.0.0",
-                "@npmcli/query": "^5.0.0",
-                "@npmcli/redact": "^4.0.0",
-                "@npmcli/run-script": "^10.0.0",
-                "bin-links": "^6.0.0",
-                "cacache": "^20.0.1",
-                "common-ancestor-path": "^2.0.0",
-                "hosted-git-info": "^9.0.0",
-                "json-stringify-nice": "^1.1.4",
-                "lru-cache": "^11.2.1",
-                "minimatch": "^10.0.3",
-                "nopt": "^9.0.0",
-                "npm-install-checks": "^8.0.0",
-                "npm-package-arg": "^13.0.0",
-                "npm-pick-manifest": "^11.0.1",
-                "npm-registry-fetch": "^19.0.0",
-                "pacote": "^21.0.2",
-                "parse-conflict-json": "^5.0.1",
-                "proc-log": "^6.0.0",
-                "proggy": "^4.0.0",
-                "promise-all-reject-late": "^1.0.0",
-                "promise-call-limit": "^3.0.1",
-                "semver": "^7.3.7",
-                "ssri": "^13.0.0",
-                "treeverse": "^3.0.0",
-                "walk-up-path": "^4.0.0"
-            },
-            "bin": {
-                "arborist": "bin/index.js"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@npmcli/config": {
-            "version": "10.7.1",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@npmcli/map-workspaces": "^5.0.0",
-                "@npmcli/package-json": "^7.0.0",
-                "ci-info": "^4.0.0",
-                "ini": "^6.0.0",
-                "nopt": "^9.0.0",
-                "proc-log": "^6.0.0",
-                "semver": "^7.3.5",
-                "walk-up-path": "^4.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@npmcli/fs": {
-            "version": "5.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "semver": "^7.3.5"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@npmcli/git": {
-            "version": "7.0.2",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@gar/promise-retry": "^1.0.0",
-                "@npmcli/promise-spawn": "^9.0.0",
-                "ini": "^6.0.0",
-                "lru-cache": "^11.2.1",
-                "npm-pick-manifest": "^11.0.1",
-                "proc-log": "^6.0.0",
-                "semver": "^7.3.5",
-                "which": "^6.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@npmcli/installed-package-contents": {
-            "version": "4.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "npm-bundled": "^5.0.0",
-                "npm-normalize-package-bin": "^5.0.0"
-            },
-            "bin": {
-                "installed-package-contents": "bin/index.js"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@npmcli/map-workspaces": {
-            "version": "5.0.3",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@npmcli/name-from-folder": "^4.0.0",
-                "@npmcli/package-json": "^7.0.0",
-                "glob": "^13.0.0",
-                "minimatch": "^10.0.3"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@npmcli/metavuln-calculator": {
-            "version": "9.0.3",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "cacache": "^20.0.0",
-                "json-parse-even-better-errors": "^5.0.0",
-                "pacote": "^21.0.0",
-                "proc-log": "^6.0.0",
-                "semver": "^7.3.5"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@npmcli/name-from-folder": {
-            "version": "4.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@npmcli/node-gyp": {
-            "version": "5.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@npmcli/package-json": {
-            "version": "7.0.5",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@npmcli/git": "^7.0.0",
-                "glob": "^13.0.0",
-                "hosted-git-info": "^9.0.0",
-                "json-parse-even-better-errors": "^5.0.0",
-                "proc-log": "^6.0.0",
-                "semver": "^7.5.3",
-                "spdx-expression-parse": "^4.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@npmcli/promise-spawn": {
-            "version": "9.0.1",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "which": "^6.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@npmcli/query": {
-            "version": "5.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "postcss-selector-parser": "^7.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@npmcli/redact": {
-            "version": "4.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@npmcli/run-script": {
-            "version": "10.0.3",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@npmcli/node-gyp": "^5.0.0",
-                "@npmcli/package-json": "^7.0.0",
-                "@npmcli/promise-spawn": "^9.0.0",
-                "node-gyp": "^12.1.0",
-                "proc-log": "^6.0.0",
-                "which": "^6.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@sigstore/bundle": {
-            "version": "4.0.0",
-            "inBundle": true,
-            "license": "Apache-2.0",
-            "dependencies": {
-                "@sigstore/protobuf-specs": "^0.5.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@sigstore/core": {
-            "version": "3.1.0",
-            "inBundle": true,
-            "license": "Apache-2.0",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@sigstore/protobuf-specs": {
-            "version": "0.5.0",
-            "inBundle": true,
-            "license": "Apache-2.0",
-            "engines": {
-                "node": "^18.17.0 || >=20.5.0"
-            }
-        },
-        "node_modules/npm/node_modules/@sigstore/sign": {
-            "version": "4.1.0",
-            "inBundle": true,
-            "license": "Apache-2.0",
-            "dependencies": {
-                "@sigstore/bundle": "^4.0.0",
-                "@sigstore/core": "^3.1.0",
-                "@sigstore/protobuf-specs": "^0.5.0",
-                "make-fetch-happen": "^15.0.3",
-                "proc-log": "^6.1.0",
-                "promise-retry": "^2.0.1"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@sigstore/tuf": {
-            "version": "4.0.1",
-            "inBundle": true,
-            "license": "Apache-2.0",
-            "dependencies": {
-                "@sigstore/protobuf-specs": "^0.5.0",
-                "tuf-js": "^4.1.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@sigstore/verify": {
-            "version": "3.1.0",
-            "inBundle": true,
-            "license": "Apache-2.0",
-            "dependencies": {
-                "@sigstore/bundle": "^4.0.0",
-                "@sigstore/core": "^3.1.0",
-                "@sigstore/protobuf-specs": "^0.5.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/@tufjs/canonical-json": {
-            "version": "2.0.0",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": "^16.14.0 || >=18.0.0"
-            }
-        },
-        "node_modules/npm/node_modules/@tufjs/models": {
-            "version": "4.1.0",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "@tufjs/canonical-json": "2.0.0",
-                "minimatch": "^10.1.1"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/abbrev": {
-            "version": "4.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/agent-base": {
-            "version": "7.1.4",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">= 14"
-            }
-        },
-        "node_modules/npm/node_modules/aproba": {
-            "version": "2.1.0",
-            "inBundle": true,
-            "license": "ISC"
-        },
-        "node_modules/npm/node_modules/archy": {
-            "version": "1.0.0",
-            "inBundle": true,
-            "license": "MIT"
-        },
-        "node_modules/npm/node_modules/balanced-match": {
-            "version": "4.0.4",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": "18 || 20 || >=22"
-            }
-        },
-        "node_modules/npm/node_modules/bin-links": {
-            "version": "6.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "cmd-shim": "^8.0.0",
-                "npm-normalize-package-bin": "^5.0.0",
-                "proc-log": "^6.0.0",
-                "read-cmd-shim": "^6.0.0",
-                "write-file-atomic": "^7.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/binary-extensions": {
-            "version": "3.1.0",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=18.20"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/npm/node_modules/brace-expansion": {
-            "version": "5.0.3",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "balanced-match": "^4.0.2"
-            },
-            "engines": {
-                "node": "18 || 20 || >=22"
-            }
-        },
-        "node_modules/npm/node_modules/cacache": {
-            "version": "20.0.3",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@npmcli/fs": "^5.0.0",
-                "fs-minipass": "^3.0.0",
-                "glob": "^13.0.0",
-                "lru-cache": "^11.1.0",
-                "minipass": "^7.0.3",
-                "minipass-collect": "^2.0.1",
-                "minipass-flush": "^1.0.5",
-                "minipass-pipeline": "^1.2.4",
-                "p-map": "^7.0.2",
-                "ssri": "^13.0.0",
-                "unique-filename": "^5.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/chalk": {
-            "version": "5.6.2",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": "^12.17.0 || ^14.13 || >=16.0.0"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/chalk?sponsor=1"
-            }
-        },
-        "node_modules/npm/node_modules/chownr": {
-            "version": "3.0.0",
-            "inBundle": true,
-            "license": "BlueOak-1.0.0",
-            "engines": {
-                "node": ">=18"
-            }
-        },
-        "node_modules/npm/node_modules/ci-info": {
-            "version": "4.4.0",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/sibiraj-s"
-                }
-            ],
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/npm/node_modules/cidr-regex": {
-            "version": "5.0.3",
-            "inBundle": true,
-            "license": "BSD-2-Clause",
-            "engines": {
-                "node": ">=20"
-            }
-        },
-        "node_modules/npm/node_modules/cmd-shim": {
-            "version": "8.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/common-ancestor-path": {
-            "version": "2.0.0",
-            "inBundle": true,
-            "license": "BlueOak-1.0.0",
-            "engines": {
-                "node": ">= 18"
-            }
-        },
-        "node_modules/npm/node_modules/cssesc": {
-            "version": "3.0.0",
-            "inBundle": true,
-            "license": "MIT",
-            "bin": {
-                "cssesc": "bin/cssesc"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/npm/node_modules/debug": {
-            "version": "4.4.3",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "ms": "^2.1.3"
-            },
-            "engines": {
-                "node": ">=6.0"
-            },
-            "peerDependenciesMeta": {
-                "supports-color": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/npm/node_modules/diff": {
-            "version": "8.0.3",
-            "inBundle": true,
-            "license": "BSD-3-Clause",
-            "engines": {
-                "node": ">=0.3.1"
-            }
-        },
-        "node_modules/npm/node_modules/env-paths": {
-            "version": "2.2.1",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/npm/node_modules/err-code": {
-            "version": "2.0.3",
-            "inBundle": true,
-            "license": "MIT"
-        },
-        "node_modules/npm/node_modules/exponential-backoff": {
-            "version": "3.1.3",
-            "inBundle": true,
-            "license": "Apache-2.0"
-        },
-        "node_modules/npm/node_modules/fastest-levenshtein": {
-            "version": "1.0.16",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">= 4.9.1"
-            }
-        },
-        "node_modules/npm/node_modules/fs-minipass": {
-            "version": "3.0.3",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "minipass": "^7.0.3"
-            },
-            "engines": {
-                "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-            }
-        },
-        "node_modules/npm/node_modules/glob": {
-            "version": "13.0.6",
-            "inBundle": true,
-            "license": "BlueOak-1.0.0",
-            "dependencies": {
-                "minimatch": "^10.2.2",
-                "minipass": "^7.1.3",
-                "path-scurry": "^2.0.2"
-            },
-            "engines": {
-                "node": "18 || 20 || >=22"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
-            }
-        },
-        "node_modules/npm/node_modules/graceful-fs": {
-            "version": "4.2.11",
-            "inBundle": true,
-            "license": "ISC"
-        },
-        "node_modules/npm/node_modules/hosted-git-info": {
-            "version": "9.0.2",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "lru-cache": "^11.1.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/http-cache-semantics": {
-            "version": "4.2.0",
-            "inBundle": true,
-            "license": "BSD-2-Clause"
-        },
-        "node_modules/npm/node_modules/http-proxy-agent": {
-            "version": "7.0.2",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "agent-base": "^7.1.0",
-                "debug": "^4.3.4"
-            },
-            "engines": {
-                "node": ">= 14"
-            }
-        },
-        "node_modules/npm/node_modules/https-proxy-agent": {
-            "version": "7.0.6",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "agent-base": "^7.1.2",
-                "debug": "4"
-            },
-            "engines": {
-                "node": ">= 14"
-            }
-        },
-        "node_modules/npm/node_modules/iconv-lite": {
-            "version": "0.7.2",
-            "inBundle": true,
-            "license": "MIT",
-            "optional": true,
-            "dependencies": {
-                "safer-buffer": ">= 2.1.2 < 3.0.0"
-            },
-            "engines": {
-                "node": ">=0.10.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/express"
-            }
-        },
-        "node_modules/npm/node_modules/ignore-walk": {
-            "version": "8.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "minimatch": "^10.0.3"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/imurmurhash": {
-            "version": "0.1.4",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=0.8.19"
-            }
-        },
-        "node_modules/npm/node_modules/ini": {
-            "version": "6.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/init-package-json": {
-            "version": "8.2.5",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@npmcli/package-json": "^7.0.0",
-                "npm-package-arg": "^13.0.0",
-                "promzard": "^3.0.1",
-                "read": "^5.0.1",
-                "semver": "^7.7.2",
-                "validate-npm-package-name": "^7.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/ip-address": {
-            "version": "10.1.0",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">= 12"
-            }
-        },
-        "node_modules/npm/node_modules/is-cidr": {
-            "version": "6.0.3",
-            "inBundle": true,
-            "license": "BSD-2-Clause",
-            "dependencies": {
-                "cidr-regex": "^5.0.1"
-            },
-            "engines": {
-                "node": ">=20"
-            }
-        },
-        "node_modules/npm/node_modules/isexe": {
-            "version": "4.0.0",
-            "inBundle": true,
-            "license": "BlueOak-1.0.0",
-            "engines": {
-                "node": ">=20"
-            }
-        },
-        "node_modules/npm/node_modules/json-parse-even-better-errors": {
-            "version": "5.0.0",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/json-stringify-nice": {
-            "version": "1.1.4",
-            "inBundle": true,
-            "license": "ISC",
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
-            }
-        },
-        "node_modules/npm/node_modules/jsonparse": {
-            "version": "1.3.1",
-            "engines": [
-                "node >= 0.2.0"
-            ],
-            "inBundle": true,
-            "license": "MIT"
-        },
-        "node_modules/npm/node_modules/just-diff": {
-            "version": "6.0.2",
-            "inBundle": true,
-            "license": "MIT"
-        },
-        "node_modules/npm/node_modules/just-diff-apply": {
-            "version": "5.5.0",
-            "inBundle": true,
-            "license": "MIT"
-        },
-        "node_modules/npm/node_modules/libnpmaccess": {
-            "version": "10.0.3",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "npm-package-arg": "^13.0.0",
-                "npm-registry-fetch": "^19.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/libnpmdiff": {
-            "version": "8.1.3",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@npmcli/arborist": "^9.4.0",
-                "@npmcli/installed-package-contents": "^4.0.0",
-                "binary-extensions": "^3.0.0",
-                "diff": "^8.0.2",
-                "minimatch": "^10.0.3",
-                "npm-package-arg": "^13.0.0",
-                "pacote": "^21.0.2",
-                "tar": "^7.5.1"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/libnpmexec": {
-            "version": "10.2.3",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@gar/promise-retry": "^1.0.0",
-                "@npmcli/arborist": "^9.4.0",
-                "@npmcli/package-json": "^7.0.0",
-                "@npmcli/run-script": "^10.0.0",
-                "ci-info": "^4.0.0",
-                "npm-package-arg": "^13.0.0",
-                "pacote": "^21.0.2",
-                "proc-log": "^6.0.0",
-                "read": "^5.0.1",
-                "semver": "^7.3.7",
-                "signal-exit": "^4.1.0",
-                "walk-up-path": "^4.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/libnpmfund": {
-            "version": "7.0.17",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@npmcli/arborist": "^9.4.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/libnpmorg": {
-            "version": "8.0.1",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "aproba": "^2.0.0",
-                "npm-registry-fetch": "^19.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/libnpmpack": {
-            "version": "9.1.3",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@npmcli/arborist": "^9.4.0",
-                "@npmcli/run-script": "^10.0.0",
-                "npm-package-arg": "^13.0.0",
-                "pacote": "^21.0.2"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/libnpmpublish": {
-            "version": "11.1.3",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@npmcli/package-json": "^7.0.0",
-                "ci-info": "^4.0.0",
-                "npm-package-arg": "^13.0.0",
-                "npm-registry-fetch": "^19.0.0",
-                "proc-log": "^6.0.0",
-                "semver": "^7.3.7",
-                "sigstore": "^4.0.0",
-                "ssri": "^13.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/libnpmsearch": {
-            "version": "9.0.1",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "npm-registry-fetch": "^19.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/libnpmteam": {
-            "version": "8.0.2",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "aproba": "^2.0.0",
-                "npm-registry-fetch": "^19.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/libnpmversion": {
-            "version": "8.0.3",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@npmcli/git": "^7.0.0",
-                "@npmcli/run-script": "^10.0.0",
-                "json-parse-even-better-errors": "^5.0.0",
-                "proc-log": "^6.0.0",
-                "semver": "^7.3.7"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/lru-cache": {
-            "version": "11.2.6",
-            "inBundle": true,
-            "license": "BlueOak-1.0.0",
-            "engines": {
-                "node": "20 || >=22"
-            }
-        },
-        "node_modules/npm/node_modules/make-fetch-happen": {
-            "version": "15.0.4",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@gar/promise-retry": "^1.0.0",
-                "@npmcli/agent": "^4.0.0",
-                "cacache": "^20.0.1",
-                "http-cache-semantics": "^4.1.1",
-                "minipass": "^7.0.2",
-                "minipass-fetch": "^5.0.0",
-                "minipass-flush": "^1.0.5",
-                "minipass-pipeline": "^1.2.4",
-                "negotiator": "^1.0.0",
-                "proc-log": "^6.0.0",
-                "ssri": "^13.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/minimatch": {
-            "version": "10.2.2",
-            "inBundle": true,
-            "license": "BlueOak-1.0.0",
-            "dependencies": {
-                "brace-expansion": "^5.0.2"
-            },
-            "engines": {
-                "node": "18 || 20 || >=22"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
-            }
-        },
-        "node_modules/npm/node_modules/minipass": {
-            "version": "7.1.3",
-            "inBundle": true,
-            "license": "BlueOak-1.0.0",
-            "engines": {
-                "node": ">=16 || 14 >=14.17"
-            }
-        },
-        "node_modules/npm/node_modules/minipass-collect": {
-            "version": "2.0.1",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "minipass": "^7.0.3"
-            },
-            "engines": {
-                "node": ">=16 || 14 >=14.17"
-            }
-        },
-        "node_modules/npm/node_modules/minipass-fetch": {
-            "version": "5.0.2",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "minipass": "^7.0.3",
-                "minipass-sized": "^2.0.0",
-                "minizlib": "^3.0.1"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            },
-            "optionalDependencies": {
-                "iconv-lite": "^0.7.2"
-            }
-        },
-        "node_modules/npm/node_modules/minipass-flush": {
-            "version": "1.0.5",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "minipass": "^3.0.0"
-            },
-            "engines": {
-                "node": ">= 8"
-            }
-        },
-        "node_modules/npm/node_modules/minipass-flush/node_modules/minipass": {
-            "version": "3.3.6",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "yallist": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/npm/node_modules/minipass-flush/node_modules/yallist": {
-            "version": "4.0.0",
-            "inBundle": true,
-            "license": "ISC"
-        },
-        "node_modules/npm/node_modules/minipass-pipeline": {
-            "version": "1.2.4",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "minipass": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/npm/node_modules/minipass-pipeline/node_modules/minipass": {
-            "version": "3.3.6",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "yallist": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/npm/node_modules/minipass-pipeline/node_modules/yallist": {
-            "version": "4.0.0",
-            "inBundle": true,
-            "license": "ISC"
-        },
-        "node_modules/npm/node_modules/minipass-sized": {
-            "version": "2.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "minipass": "^7.1.2"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/npm/node_modules/minizlib": {
-            "version": "3.1.0",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "minipass": "^7.1.2"
-            },
-            "engines": {
-                "node": ">= 18"
-            }
-        },
-        "node_modules/npm/node_modules/ms": {
-            "version": "2.1.3",
-            "inBundle": true,
-            "license": "MIT"
-        },
-        "node_modules/npm/node_modules/mute-stream": {
-            "version": "3.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/negotiator": {
-            "version": "1.0.0",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/npm/node_modules/node-gyp": {
-            "version": "12.2.0",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "env-paths": "^2.2.0",
-                "exponential-backoff": "^3.1.1",
-                "graceful-fs": "^4.2.6",
-                "make-fetch-happen": "^15.0.0",
-                "nopt": "^9.0.0",
-                "proc-log": "^6.0.0",
-                "semver": "^7.3.5",
-                "tar": "^7.5.4",
-                "tinyglobby": "^0.2.12",
-                "which": "^6.0.0"
-            },
-            "bin": {
-                "node-gyp": "bin/node-gyp.js"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/nopt": {
-            "version": "9.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "abbrev": "^4.0.0"
-            },
-            "bin": {
-                "nopt": "bin/nopt.js"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/npm-audit-report": {
-            "version": "7.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/npm-bundled": {
-            "version": "5.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "npm-normalize-package-bin": "^5.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/npm-install-checks": {
-            "version": "8.0.0",
-            "inBundle": true,
-            "license": "BSD-2-Clause",
-            "dependencies": {
-                "semver": "^7.1.1"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/npm-normalize-package-bin": {
-            "version": "5.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/npm-package-arg": {
-            "version": "13.0.2",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "hosted-git-info": "^9.0.0",
-                "proc-log": "^6.0.0",
-                "semver": "^7.3.5",
-                "validate-npm-package-name": "^7.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/npm-packlist": {
-            "version": "10.0.4",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "ignore-walk": "^8.0.0",
-                "proc-log": "^6.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/npm-pick-manifest": {
-            "version": "11.0.3",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "npm-install-checks": "^8.0.0",
-                "npm-normalize-package-bin": "^5.0.0",
-                "npm-package-arg": "^13.0.0",
-                "semver": "^7.3.5"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/npm-profile": {
-            "version": "12.0.1",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "npm-registry-fetch": "^19.0.0",
-                "proc-log": "^6.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/npm-registry-fetch": {
-            "version": "19.1.1",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@npmcli/redact": "^4.0.0",
-                "jsonparse": "^1.3.1",
-                "make-fetch-happen": "^15.0.0",
-                "minipass": "^7.0.2",
-                "minipass-fetch": "^5.0.0",
-                "minizlib": "^3.0.1",
-                "npm-package-arg": "^13.0.0",
-                "proc-log": "^6.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/npm-user-validate": {
-            "version": "4.0.0",
-            "inBundle": true,
-            "license": "BSD-2-Clause",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/p-map": {
-            "version": "7.0.4",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=18"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/npm/node_modules/pacote": {
-            "version": "21.4.0",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "@gar/promise-retry": "^1.0.0",
-                "@npmcli/git": "^7.0.0",
-                "@npmcli/installed-package-contents": "^4.0.0",
-                "@npmcli/package-json": "^7.0.0",
-                "@npmcli/promise-spawn": "^9.0.0",
-                "@npmcli/run-script": "^10.0.0",
-                "cacache": "^20.0.0",
-                "fs-minipass": "^3.0.0",
-                "minipass": "^7.0.2",
-                "npm-package-arg": "^13.0.0",
-                "npm-packlist": "^10.0.1",
-                "npm-pick-manifest": "^11.0.1",
-                "npm-registry-fetch": "^19.0.0",
-                "proc-log": "^6.0.0",
-                "sigstore": "^4.0.0",
-                "ssri": "^13.0.0",
-                "tar": "^7.4.3"
-            },
-            "bin": {
-                "pacote": "bin/index.js"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/parse-conflict-json": {
-            "version": "5.0.1",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "json-parse-even-better-errors": "^5.0.0",
-                "just-diff": "^6.0.0",
-                "just-diff-apply": "^5.2.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/path-scurry": {
-            "version": "2.0.2",
-            "inBundle": true,
-            "license": "BlueOak-1.0.0",
-            "dependencies": {
-                "lru-cache": "^11.0.0",
-                "minipass": "^7.1.2"
-            },
-            "engines": {
-                "node": "18 || 20 || >=22"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
-            }
-        },
-        "node_modules/npm/node_modules/postcss-selector-parser": {
-            "version": "7.1.1",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "cssesc": "^3.0.0",
-                "util-deprecate": "^1.0.2"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/npm/node_modules/proc-log": {
-            "version": "6.1.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/proggy": {
-            "version": "4.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/promise-all-reject-late": {
-            "version": "1.0.1",
-            "inBundle": true,
-            "license": "ISC",
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
-            }
-        },
-        "node_modules/npm/node_modules/promise-call-limit": {
-            "version": "3.0.2",
-            "inBundle": true,
-            "license": "ISC",
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
-            }
-        },
-        "node_modules/npm/node_modules/promise-retry": {
-            "version": "2.0.1",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "err-code": "^2.0.2",
-                "retry": "^0.12.0"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/npm/node_modules/promzard": {
-            "version": "3.0.1",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "read": "^5.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/qrcode-terminal": {
-            "version": "0.12.0",
-            "inBundle": true,
-            "bin": {
-                "qrcode-terminal": "bin/qrcode-terminal.js"
-            }
-        },
-        "node_modules/npm/node_modules/read": {
-            "version": "5.0.1",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "mute-stream": "^3.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/read-cmd-shim": {
-            "version": "6.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/retry": {
-            "version": "0.12.0",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">= 4"
-            }
-        },
-        "node_modules/npm/node_modules/safer-buffer": {
-            "version": "2.1.2",
-            "inBundle": true,
-            "license": "MIT",
-            "optional": true
-        },
-        "node_modules/npm/node_modules/semver": {
-            "version": "7.7.4",
-            "inBundle": true,
-            "license": "ISC",
-            "bin": {
-                "semver": "bin/semver.js"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/npm/node_modules/signal-exit": {
-            "version": "4.1.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": ">=14"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
-            }
-        },
-        "node_modules/npm/node_modules/sigstore": {
-            "version": "4.1.0",
-            "inBundle": true,
-            "license": "Apache-2.0",
-            "dependencies": {
-                "@sigstore/bundle": "^4.0.0",
-                "@sigstore/core": "^3.1.0",
-                "@sigstore/protobuf-specs": "^0.5.0",
-                "@sigstore/sign": "^4.1.0",
-                "@sigstore/tuf": "^4.0.1",
-                "@sigstore/verify": "^3.1.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/smart-buffer": {
-            "version": "4.2.0",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">= 6.0.0",
-                "npm": ">= 3.0.0"
-            }
-        },
-        "node_modules/npm/node_modules/socks": {
-            "version": "2.8.7",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "ip-address": "^10.0.1",
-                "smart-buffer": "^4.2.0"
-            },
-            "engines": {
-                "node": ">= 10.0.0",
-                "npm": ">= 3.0.0"
-            }
-        },
-        "node_modules/npm/node_modules/socks-proxy-agent": {
-            "version": "8.0.5",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "agent-base": "^7.1.2",
-                "debug": "^4.3.4",
-                "socks": "^2.8.3"
-            },
-            "engines": {
-                "node": ">= 14"
-            }
-        },
-        "node_modules/npm/node_modules/spdx-exceptions": {
-            "version": "2.5.0",
-            "inBundle": true,
-            "license": "CC-BY-3.0"
-        },
-        "node_modules/npm/node_modules/spdx-expression-parse": {
-            "version": "4.0.0",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "spdx-exceptions": "^2.1.0",
-                "spdx-license-ids": "^3.0.0"
-            }
-        },
-        "node_modules/npm/node_modules/spdx-license-ids": {
-            "version": "3.0.23",
-            "inBundle": true,
-            "license": "CC0-1.0"
-        },
-        "node_modules/npm/node_modules/ssri": {
-            "version": "13.0.1",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "minipass": "^7.0.3"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/supports-color": {
-            "version": "10.2.2",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=18"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/supports-color?sponsor=1"
-            }
-        },
-        "node_modules/npm/node_modules/tar": {
-            "version": "7.5.9",
-            "inBundle": true,
-            "license": "BlueOak-1.0.0",
-            "dependencies": {
-                "@isaacs/fs-minipass": "^4.0.0",
-                "chownr": "^3.0.0",
-                "minipass": "^7.1.2",
-                "minizlib": "^3.1.0",
-                "yallist": "^5.0.0"
-            },
-            "engines": {
-                "node": ">=18"
-            }
-        },
-        "node_modules/npm/node_modules/text-table": {
-            "version": "0.2.0",
-            "inBundle": true,
-            "license": "MIT"
-        },
-        "node_modules/npm/node_modules/tiny-relative-date": {
-            "version": "2.0.2",
-            "inBundle": true,
-            "license": "MIT"
-        },
-        "node_modules/npm/node_modules/tinyglobby": {
-            "version": "0.2.15",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "fdir": "^6.5.0",
-                "picomatch": "^4.0.3"
-            },
-            "engines": {
-                "node": ">=12.0.0"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/SuperchupuDev"
-            }
-        },
-        "node_modules/npm/node_modules/tinyglobby/node_modules/fdir": {
-            "version": "6.5.0",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=12.0.0"
-            },
-            "peerDependencies": {
-                "picomatch": "^3 || ^4"
-            },
-            "peerDependenciesMeta": {
-                "picomatch": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/npm/node_modules/tinyglobby/node_modules/picomatch": {
-            "version": "4.0.3",
-            "inBundle": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/jonschlinkert"
-            }
-        },
-        "node_modules/npm/node_modules/treeverse": {
-            "version": "3.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-            }
-        },
-        "node_modules/npm/node_modules/tuf-js": {
-            "version": "4.1.0",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "@tufjs/models": "4.1.0",
-                "debug": "^4.4.3",
-                "make-fetch-happen": "^15.0.1"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/unique-filename": {
-            "version": "5.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "unique-slug": "^6.0.0"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/unique-slug": {
-            "version": "6.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "imurmurhash": "^0.1.4"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/util-deprecate": {
-            "version": "1.0.2",
-            "inBundle": true,
-            "license": "MIT"
-        },
-        "node_modules/npm/node_modules/validate-npm-package-name": {
-            "version": "7.0.2",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/walk-up-path": {
-            "version": "4.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "engines": {
-                "node": "20 || >=22"
-            }
-        },
-        "node_modules/npm/node_modules/which": {
-            "version": "6.0.1",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "isexe": "^4.0.0"
-            },
-            "bin": {
-                "node-which": "bin/which.js"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/write-file-atomic": {
-            "version": "7.0.0",
-            "inBundle": true,
-            "license": "ISC",
-            "dependencies": {
-                "imurmurhash": "^0.1.4",
-                "signal-exit": "^4.0.1"
-            },
-            "engines": {
-                "node": "^20.17.0 || >=22.9.0"
-            }
-        },
-        "node_modules/npm/node_modules/yallist": {
-            "version": "5.0.0",
-            "inBundle": true,
-            "license": "BlueOak-1.0.0",
-            "engines": {
-                "node": ">=18"
-            }
-        },
         "node_modules/object-inspect": {
             "version": "1.13.4",
             "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -9486,6 +7666,7 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
             "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "wrappy": "1"
@@ -9618,6 +7799,7 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
             "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
@@ -9989,16 +8171,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/randombytes": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-            "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "safe-buffer": "^5.1.0"
-            }
-        },
         "node_modules/readdirp": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -10358,19 +8530,20 @@
             "version": "6.3.1",
             "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
             "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+            "dev": true,
             "license": "ISC",
             "bin": {
                 "semver": "bin/semver.js"
             }
         },
         "node_modules/serialize-javascript": {
-            "version": "6.0.2",
-            "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
-            "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+            "version": "7.0.4",
+            "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-7.0.4.tgz",
+            "integrity": "sha512-DuGdB+Po43Q5Jxwpzt1lhyFSYKryqoNjQSA9M92tyw0lyHIOur+XCalOUe0KTJpyqzT8+fQ5A0Jf7vCx/NKmIg==",
             "dev": true,
             "license": "BSD-3-Clause",
-            "dependencies": {
-                "randombytes": "^2.1.0"
+            "engines": {
+                "node": ">=20.0.0"
             }
         },
         "node_modules/set-function-length": {
@@ -11167,6 +9340,7 @@
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
             "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "has-flag": "^4.0.0"
@@ -11955,6 +10129,7 @@
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
             "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "isexe": "^2.0.0"
@@ -12502,6 +10677,7 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
             "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+            "dev": true,
             "license": "ISC"
         },
         "node_modules/write-file-atomic": {
diff --git a/package.json b/package.json
index e241243..82d5a96 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,8 @@
     },
     "overrides": {
         "sourcemap-codec": "npm:@jridgewell/sourcemap-codec@^1.4.14",
-        "source-map": "^0.7.4"
+        "source-map": "^0.7.4",
+        "serialize-javascript": "^7.0.3"
     },
     "dependencies": {
         "@ffmpeg/ffmpeg": "^0.12.15",
@@ -59,7 +60,6 @@
         "dashjs": "^5.1.1",
         "fuse.js": "^7.1.0",
         "jose": "^6.1.3",
-        "npm": "^11.11.0",
         "pocketbase": "^0.26.8"
     }
 }

From c7b1d301db9dd867db53773d4ae606f4b277b4ba Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 8 Mar 2026 19:42:26 +0100
Subject: [PATCH 11/26] fix: linting errors and settings structure cleanup

---
 index.html          |  40 +-----------
 js/accounts/auth.js |   2 +-
 js/app.js           |   2 -
 js/metadata.js      |   4 +-
 js/qobuz-api.js     |   4 +-
 js/settings.js      |   1 -
 styles.css          | 144 ++++++++++++++++++++++++++++++++------------
 7 files changed, 111 insertions(+), 86 deletions(-)

diff --git a/index.html b/index.html
index aa153e1..15a4a67 100644
--- a/index.html
+++ b/index.html
@@ -5252,48 +5252,12 @@
                                     </button>
                                 </div>
                             </div>
-                            <div id="blocked-content-list" style="display: none">
-                                <div id="blocked-artists-section" style="margin-bottom: 1rem">
-                                    <h4
-                                        style="font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--muted-foreground)"
-                                    >
-                                        Blocked Artists
-                                    </h4>
-                                    <ul id="blocked-artists-list" class="blocked-items-list"></ul>
-                                </div>
-                                <div id="blocked-albums-section" style="margin-bottom: 1rem">
-                                    <h4
-                                        style="font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--muted-foreground)"
-                                    >
-                                        Blocked Albums
-                                    </h4>
-                                    <ul id="blocked-albums-list" class="blocked-items-list"></ul>
-                                </div>
-                                <div id="blocked-tracks-section" style="margin-bottom: 1rem">
-                                    <h4
-                                        style="font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--muted-foreground)"
-                                    >
-                                        Blocked Tracks
-                                    </h4>
-                                    <ul id="blocked-tracks-list" class="blocked-items-list"></ul>
-                                </div>
-                                <div
-                                    id="blocked-empty-message"
-                                    style="
-                                        text-align: center;
-                                        padding: 1rem;
-                                        color: var(--muted-foreground);
-                                        display: none;
-                                    "
-                                >
-                                    No blocked content
-                                </div>
-                            </div>
                         </div>
                     </div>
                 </div>
+            </div>
 
-                <div id="page-about" class="page">
+            <div id="page-about" class="page">
                     <h2 class="section-title" style="text-align: center">About Monochrome</h2>
                     <div class="about-content">
                         <p class="about-description">
diff --git a/js/accounts/auth.js b/js/accounts/auth.js
index 27fb1bd..8a422f6 100644
--- a/js/accounts/auth.js
+++ b/js/accounts/auth.js
@@ -31,7 +31,7 @@ export class AuthManager {
             this.user = await auth.get();
             this.updateUI(this.user);
             this.authListeners.forEach((listener) => listener(this.user));
-        } catch (error) {
+        } catch {
             this.user = null;
             this.updateUI(null);
         }
diff --git a/js/app.js b/js/app.js
index 7126174..0b04ba7 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2983,8 +2983,6 @@ function showCustomizeShortcutsModal() {
     let recordingAction = null;
     let recordingTimeout = null;
 
-    const shortcuts = keyboardShortcuts.getShortcuts();
-
     const formatKey = (key) => {
         if (!key) return 'none';
         const keyMap = {
diff --git a/js/metadata.js b/js/metadata.js
index 70e591f..1cb84af 100644
--- a/js/metadata.js
+++ b/js/metadata.js
@@ -1385,9 +1385,9 @@ function createStringAtom(type, value, truncateType = true) {
 
 function createUserAtom(namespace, name, value) {
     const encoder = new TextEncoder();
-    const dashBytes = encoder.encode('----'); // User-defined atom type
+    encoder.encode('----'); // User-defined atom type
     const namespaceBytes = encoder.encode(namespace);
-    const meanBytes = encoder.encode('mean'); // Standard 'mean' atom for namespace
+    encoder.encode('mean'); // Standard 'mean' atom for namespace
     const nameBytes = encoder.encode(name);
     const valueBytes = encoder.encode('\x00\x00\x00\x01\x00\x00\x00\x00' + value);
 
diff --git a/js/qobuz-api.js b/js/qobuz-api.js
index 806d196..ef0245c 100644
--- a/js/qobuz-api.js
+++ b/js/qobuz-api.js
@@ -331,12 +331,12 @@ export class QobuzAPI {
     }
 
     // Similar/recommendation methods
-    async getSimilarArtists(artistId) {
+    async getSimilarArtists(_artistId) {
         // Qobuz doesn't have a direct similar artists endpoint in this simplified API
         return [];
     }
 
-    async getSimilarAlbums(albumId) {
+    async getSimilarAlbums(_albumId) {
         // Qobuz doesn't have a direct similar albums endpoint in this simplified API
         return [];
     }
diff --git a/js/settings.js b/js/settings.js
index 41a3914..b9fcf4f 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -35,7 +35,6 @@ import {
     musicProviderSettings,
     analyticsSettings,
     modalSettings,
-    keyboardShortcuts,
 } from './storage.js';
 import { audioContextManager, EQ_PRESETS } from './audio-context.js';
 import { getButterchurnPresets } from './visualizers/butterchurn.js';
diff --git a/styles.css b/styles.css
index e779837..330d605 100644
--- a/styles.css
+++ b/styles.css
@@ -381,18 +381,6 @@ body {
     width: 100%;
 }
 
-img {
-    max-width: 100%;
-    display: block;
-    background-color: var(--muted);
-    border: none;
-}
-
-a {
-    color: inherit;
-    text-decoration: none;
-}
-
 .text-link {
     color: var(--primary);
     text-decoration: underline;
@@ -499,6 +487,75 @@ kbd {
     margin: var(--space-2);
 }
 
+/* Base Elements */
+a {
+    color: inherit;
+    text-decoration: none;
+    transition: color var(--transition-fast);
+}
+
+svg {
+    display: block;
+    vertical-align: middle;
+}
+
+img {
+    max-width: 100%;
+    display: block;
+    background-color: var(--muted);
+    border: none;
+}
+
+button {
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+input,
+select,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-3);
+    outline: none;
+    transition: all var(--transition-fast);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgb(var(--highlight-rgb) / 0.2);
+}
+
+span {
+    display: inline-block;
+}
+
+li {
+    list-style: none;
+}
+
+ul {
+    padding: 0;
+    margin: 0;
+}
+
 .m-3 {
     margin: var(--space-3);
 }
@@ -964,23 +1021,6 @@ kbd {
     margin-top: -0.5rem;
 }
 
-.sidebar-nav.bottom {
-    margin: 0;
-    padding: 0;
-}
-
-.sidebar-nav.bottom .nav-item a {
-    padding: 0.5rem 0.75rem;
-    gap: 0.5rem;
-    font-size: 0.8125rem;
-    font-weight: 500;
-}
-
-.sidebar-nav.bottom .nav-item a svg {
-    width: 17px;
-    height: 17px;
-}
-
 .main-content {
     grid-area: main;
     overflow-y: auto;
@@ -1134,6 +1174,23 @@ kbd {
     flex-shrink: 0;
 }
 
+.sidebar-nav.bottom {
+    margin: 0;
+    padding: 0;
+}
+
+.sidebar-nav.bottom .nav-item a {
+    padding: 0.5rem 0.75rem;
+    gap: 0.5rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+}
+
+.sidebar-nav.bottom .nav-item a svg {
+    width: 17px;
+    height: 17px;
+}
+
 .pinned-items-header {
     font-size: 0.75rem;
     text-transform: uppercase;
@@ -1772,6 +1829,17 @@ input[type='search']::-webkit-search-cancel-button {
     cursor: pointer;
 }
 
+.card-like-btn:hover,
+.card-menu-btn:hover,
+.edit-playlist-btn:hover,
+.delete-playlist-btn:hover {
+    background: rgb(0, 0, 0, 0.7) !important;
+    transform: scale(1.1) rotate(5deg) !important;
+
+    /* Playful rotation */
+    border-color: rgb(255, 255, 255, 0.3) !important;
+}
+
 .card:hover .card-like-btn,
 .card:hover .card-menu-btn,
 .card-like-btn.active,
@@ -1784,17 +1852,6 @@ input[type='search']::-webkit-search-cancel-button {
     /* Slight delay for staggered feel */
 }
 
-.card-like-btn:hover,
-.card-menu-btn:hover,
-.edit-playlist-btn:hover,
-.delete-playlist-btn:hover {
-    background: rgb(0, 0, 0, 0.7) !important;
-    transform: scale(1.1) rotate(5deg) !important;
-
-    /* Playful rotation */
-    border-color: rgb(255, 255, 255, 0.3) !important;
-}
-
 .card-like-btn.active {
     color: #ef4444 !important;
 }
@@ -6878,6 +6935,13 @@ textarea:focus {
     box-shadow: 0 0 0 3px rgb(var(--highlight-rgb), 0.2);
 }
 
+.search-bar input:focus,
+.track-list-search-input:focus {
+    outline: none;
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px rgb(var(--highlight-rgb) / 0.2);
+}
+
 .modal.active .modal-content {
     animation: pop-in var(--transition-normal) var(--ease-out-back);
     box-shadow: var(--shadow-2xl);

From 1c1c0037c0c39d4d469993337655cd3159fc004d Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 8 Mar 2026 19:48:53 +0100
Subject: [PATCH 12/26] fix: big button after css linting fixes

---
 styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/styles.css b/styles.css
index 330d605..205361b 100644
--- a/styles.css
+++ b/styles.css
@@ -2531,6 +2531,7 @@ input[type='search']::-webkit-search-cancel-button {
     border-radius: var(--radius);
     cursor: pointer;
     font-weight: 500;
+    font-size: 0.875rem;
     transition: all var(--transition);
 }
 

From 10f4d6952c4e73e0ed13b565ef9634ea00a2bb28 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 8 Mar 2026 19:51:16 +0100
Subject: [PATCH 13/26] dev: add local upload handler for development
 environment

---
 package-lock.json     | 60 +++++++++++++++++++++++++++++++++
 package.json          |  1 +
 vite-plugin-upload.js | 78 +++++++++++++++++++++++++++++++++++++++++++
 vite.config.js        |  2 ++
 4 files changed, 141 insertions(+)
 create mode 100644 vite-plugin-upload.js

diff --git a/package-lock.json b/package-lock.json
index 61e91ea..3b1f6fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
                 "@neutralinojs/neu": "^11.7.0",
                 "eslint": "^9.39.3",
                 "eslint-config-prettier": "^10.1.8",
+                "formidable": "^3.5.4",
                 "globals": "^17.4.0",
                 "htmlhint": "^1.9.1",
                 "miniflare": "^4.20260301.1",
@@ -3310,6 +3311,19 @@
                 "url": "https://www.patreon.com/shalithasuranga"
             }
         },
+        "node_modules/@noble/hashes": {
+            "version": "1.8.0",
+            "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
+            "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^14.21.3 || >=16"
+            },
+            "funding": {
+                "url": "https://paulmillr.com/funding/"
+            }
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3348,6 +3362,16 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@paralleldrive/cuid2": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/@paralleldrive/cuid2/-/cuid2-2.3.1.tgz",
+            "integrity": "sha512-XO7cAxhnTZl0Yggq6jOgjiOHhbgcO4NqFqwSmQpjK3b6TEE6Uj/jfSk6wzYyemh3+I0sHirKSetjQwn5cZktFw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@noble/hashes": "^1.1.5"
+            }
+        },
         "node_modules/@poppinss/colors": {
             "version": "4.1.6",
             "resolved": "https://registry.npmjs.org/@poppinss/colors/-/colors-4.1.6.tgz",
@@ -4144,6 +4168,13 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/asap": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+            "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/astral-regex": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
@@ -4976,6 +5007,17 @@
                 "node": ">=8"
             }
         },
+        "node_modules/dezalgo": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz",
+            "integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "asap": "^2.0.0",
+                "wrappy": "1"
+            }
+        },
         "node_modules/dir-glob": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -5831,6 +5873,24 @@
                 "url": "https://github.com/sponsors/isaacs"
             }
         },
+        "node_modules/formidable": {
+            "version": "3.5.4",
+            "resolved": "https://registry.npmjs.org/formidable/-/formidable-3.5.4.tgz",
+            "integrity": "sha512-YikH+7CUTOtP44ZTnUhR7Ic2UASBPOqmaRkRKxRbywPTe5VxF7RRCck4af9wutiZ/QKM5nME9Bie2fFaPz5Gug==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@paralleldrive/cuid2": "^2.2.2",
+                "dezalgo": "^1.0.4",
+                "once": "^1.4.0"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "url": "https://ko-fi.com/tunnckoCore/commissions"
+            }
+        },
         "node_modules/fs-extra": {
             "version": "9.1.0",
             "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
diff --git a/package.json b/package.json
index 82d5a96..2173d8a 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
         "@neutralinojs/neu": "^11.7.0",
         "eslint": "^9.39.3",
         "eslint-config-prettier": "^10.1.8",
+        "formidable": "^3.5.4",
         "globals": "^17.4.0",
         "htmlhint": "^1.9.1",
         "miniflare": "^4.20260301.1",
diff --git a/vite-plugin-upload.js b/vite-plugin-upload.js
new file mode 100644
index 0000000..911d3b6
--- /dev/null
+++ b/vite-plugin-upload.js
@@ -0,0 +1,78 @@
+import { formidable } from 'formidable';
+import fs from 'fs';
+import { Blob } from 'buffer';
+import { loadEnv } from 'vite';
+
+export default function uploadPlugin() {
+    let env = {};
+
+    const handler = async (req, res, next) => {
+        if (req.url === '/upload' && req.method === 'POST') {
+            const form = formidable({});
+            
+            try {
+                const [_fields, files] = await form.parse(req);
+                const uploadedFile = files.file?.[0];
+                
+                if (!uploadedFile) {
+                    res.statusCode = 400;
+                    res.end(JSON.stringify({ success: false, error: 'No file provided' }));
+                    return;
+                }
+
+                const fileData = fs.readFileSync(uploadedFile.filepath);
+                const useR2 = env.R2_ENABLED === 'true';
+
+                let url;
+
+                if (useR2) {
+                    // We could implement R2 upload here too, but for simplicity in dev 
+                    // we'll stick to catbox unless specifically requested to match R2 perfectly.
+                    // However, to be helpful, let's at least mention it.
+                    console.log('R2 upload detected in env, but dev plugin is using catbox fallback for now.');
+                }
+
+                // Forward to catbox.moe (default production behavior when R2 is disabled)
+                const formData = new FormData();
+                formData.append('reqtype', 'fileupload');
+                formData.append('fileToUpload', new Blob([fileData], { type: uploadedFile.mimetype }), uploadedFile.originalFilename);
+
+                const response = await fetch('https://catbox.moe/user/api.php', {
+                    method: 'POST',
+                    body: formData,
+                });
+
+                url = await response.text();
+
+                if (!response.ok) {
+                    throw new Error(`Upload failed: ${url}`);
+                }
+
+                res.setHeader('Content-Type', 'application/json');
+                res.end(JSON.stringify({
+                    success: true,
+                    url: url.trim(),
+                }));
+            } catch (err) {
+                console.error('Local upload error:', err);
+                res.statusCode = 500;
+                res.end(JSON.stringify({ success: false, error: err.message }));
+            }
+            return;
+        }
+        next();
+    };
+
+    return {
+        name: 'upload-plugin',
+        config(_, { mode }) {
+            env = loadEnv(mode, process.cwd(), '');
+        },
+        configureServer(server) {
+            server.middlewares.use(handler);
+        },
+        configurePreviewServer(server) {
+            server.middlewares.use(handler);
+        },
+    };
+}
diff --git a/vite.config.js b/vite.config.js
index 29e860f..1df793c 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import { VitePWA } from 'vite-plugin-pwa';
 import neutralino from 'vite-plugin-neutralino';
 import authGatePlugin from './vite-plugin-auth-gate.js';
+import uploadPlugin from './vite-plugin-upload.js';
 
 export default defineConfig(({ mode }) => {
     const IS_NEUTRALINO = mode === 'neutralino';
@@ -34,6 +35,7 @@ export default defineConfig(({ mode }) => {
         plugins: [
             IS_NEUTRALINO && neutralino(),
             authGatePlugin(),
+            uploadPlugin(),
             VitePWA({
                 registerType: 'prompt',
                 workbox: {

From 65c8f9e4812d958b23d69e2be2318a3196707379 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 8 Mar 2026 19:52:09 +0100
Subject: [PATCH 14/26] style: restore correct font size for secondary buttons

---
 styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles.css b/styles.css
index 205361b..c2e7428 100644
--- a/styles.css
+++ b/styles.css
@@ -2531,7 +2531,7 @@ input[type='search']::-webkit-search-cancel-button {
     border-radius: var(--radius);
     cursor: pointer;
     font-weight: 500;
-    font-size: 0.875rem;
+    font-size: 0.8333rem;
     transition: all var(--transition);
 }
 

From 402adb60d91e3396d588c0fb21345b7b1a30d3d2 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 8 Mar 2026 19:55:30 +0100
Subject: [PATCH 15/26] fix: profile banner visibility in WebKit browsers

---
 styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/styles.css b/styles.css
index c2e7428..a26c52f 100644
--- a/styles.css
+++ b/styles.css
@@ -7646,6 +7646,7 @@ textarea:focus {
     left: 0;
     z-index: 0;
     mask-image: linear-gradient(to bottom, rgb(0, 0, 0, 1) 50%, rgb(0, 0, 0, 0));
+    -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0, 1) 50%, rgb(0, 0, 0, 0));
 }
 
 .profile-info-section {

From b8a761d5c8ccb5e6201ea0fea72c452d499d03de Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 8 Mar 2026 19:55:54 +0100
Subject: [PATCH 16/26] chore: update bun.lock to fix CI failure

---
 bun.lock | 321 +++----------------------------------------------------
 1 file changed, 13 insertions(+), 308 deletions(-)

diff --git a/bun.lock b/bun.lock
index 5046b04..f27004a 100644
--- a/bun.lock
+++ b/bun.lock
@@ -16,13 +16,13 @@
         "dashjs": "^5.1.1",
         "fuse.js": "^7.1.0",
         "jose": "^6.1.3",
-        "npm": "^11.11.0",
         "pocketbase": "^0.26.8",
       },
       "devDependencies": {
         "@neutralinojs/neu": "^11.7.0",
         "eslint": "^9.39.3",
         "eslint-config-prettier": "^10.1.8",
+        "formidable": "^3.5.4",
         "globals": "^17.4.0",
         "htmlhint": "^1.9.1",
         "miniflare": "^4.20260301.1",
@@ -37,6 +37,7 @@
     },
   },
   "overrides": {
+    "serialize-javascript": "^7.0.3",
     "source-map": "^0.7.4",
     "sourcemap-codec": "npm:@jridgewell/sourcemap-codec@^1.4.14",
   },
@@ -417,12 +418,16 @@
 
     "@neutralinojs/neu": ["@neutralinojs/neu@11.7.0", "", { "dependencies": { "@electron/asar": "^3.0.3", "chalk": "^4.1.0", "chokidar": "^4.0.3", "commander": "^7.2.0", "configstore": "^5.0.1", "edit-json-file": "^1.6.2", "follow-redirects": "^1.13.1", "fs-extra": "^9.0.1", "pe-library": "^1.0.1", "png2icons": "^2.0.1", "postject": "1.0.0-alpha.6", "recursive-readdir": "^2.2.2", "resedit": "^2.0.2", "spawn-command": "^1.0.0", "tcp-port-used": "^1.0.2", "uuid": "^8.3.2", "websocket": "^1.0.35", "zip-lib": "^1.0.4" }, "bin": { "neu": "bin/neu.js" } }, "sha512-fUqvR70a+BpKI9mrD92ldZkVC24Rs8XL/9m7zmOCLgCRys3yuWy7vEsxpHzKMzqTiQJkTYIsLmcR8VMzNIjuSw=="],
 
+    "@noble/hashes": ["@noble/hashes@1.8.0", "", {}, "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="],
+
     "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
 
     "@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
 
     "@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
 
+    "@paralleldrive/cuid2": ["@paralleldrive/cuid2@2.3.1", "", { "dependencies": { "@noble/hashes": "^1.1.5" } }, "sha512-XO7cAxhnTZl0Yggq6jOgjiOHhbgcO4NqFqwSmQpjK3b6TEE6Uj/jfSk6wzYyemh3+I0sHirKSetjQwn5cZktFw=="],
+
     "@poppinss/colors": ["@poppinss/colors@4.1.6", "", { "dependencies": { "kleur": "^4.1.5" } }, "sha512-H9xkIdFswbS8n1d6vmRd8+c10t2Qe+rZITbbDHHkQixH5+2x1FDGmi/0K+WgWiqQFKPSlIYB7jlH6Kpfn6Fleg=="],
 
     "@poppinss/dumper": ["@poppinss/dumper@0.6.5", "", { "dependencies": { "@poppinss/colors": "^4.1.5", "@sindresorhus/is": "^7.0.2", "supports-color": "^10.0.0" } }, "sha512-NBdYIb90J7LfOI32dOewKI1r7wnkiH6m920puQ3qHUeZkxNkQiFnXVWoE6YtFSv6QOiPPf7ys6i+HWWecDz7sw=="],
@@ -545,6 +550,8 @@
 
     "arraybuffer.prototype.slice": ["arraybuffer.prototype.slice@1.0.4", "", { "dependencies": { "array-buffer-byte-length": "^1.0.1", "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.5", "es-errors": "^1.3.0", "get-intrinsic": "^1.2.6", "is-array-buffer": "^3.0.4" } }, "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ=="],
 
+    "asap": ["asap@2.0.6", "", {}, "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="],
+
     "astral-regex": ["astral-regex@2.0.0", "", {}, "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ=="],
 
     "async": ["async@3.2.6", "", {}, "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA=="],
@@ -671,6 +678,8 @@
 
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
 
+    "dezalgo": ["dezalgo@1.0.4", "", { "dependencies": { "asap": "^2.0.0", "wrappy": "1" } }, "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig=="],
+
     "dir-glob": ["dir-glob@3.0.1", "", { "dependencies": { "path-type": "^4.0.0" } }, "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA=="],
 
     "dot-prop": ["dot-prop@5.3.0", "", { "dependencies": { "is-obj": "^2.0.0" } }, "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q=="],
@@ -781,6 +790,8 @@
 
     "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
 
+    "formidable": ["formidable@3.5.4", "", { "dependencies": { "@paralleldrive/cuid2": "^2.2.2", "dezalgo": "^1.0.4", "once": "^1.4.0" } }, "sha512-YikH+7CUTOtP44ZTnUhR7Ic2UASBPOqmaRkRKxRbywPTe5VxF7RRCck4af9wutiZ/QKM5nME9Bie2fFaPz5Gug=="],
+
     "fs-extra": ["fs-extra@9.1.0", "", { "dependencies": { "at-least-node": "^1.0.0", "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ=="],
 
     "fs.realpath": ["fs.realpath@1.0.0", "", {}, "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="],
@@ -1059,8 +1070,6 @@
 
     "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],
 
-    "npm": ["npm@11.11.0", "", { "dependencies": { "@isaacs/string-locale-compare": "^1.1.0", "@npmcli/arborist": "^9.4.0", "@npmcli/config": "^10.7.1", "@npmcli/fs": "^5.0.0", "@npmcli/map-workspaces": "^5.0.3", "@npmcli/metavuln-calculator": "^9.0.3", "@npmcli/package-json": "^7.0.5", "@npmcli/promise-spawn": "^9.0.1", "@npmcli/redact": "^4.0.0", "@npmcli/run-script": "^10.0.3", "@sigstore/tuf": "^4.0.1", "abbrev": "^4.0.0", "archy": "~1.0.0", "cacache": "^20.0.3", "chalk": "^5.6.2", "ci-info": "^4.4.0", "fastest-levenshtein": "^1.0.16", "fs-minipass": "^3.0.3", "glob": "^13.0.6", "graceful-fs": "^4.2.11", "hosted-git-info": "^9.0.2", "ini": "^6.0.0", "init-package-json": "^8.2.5", "is-cidr": "^6.0.3", "json-parse-even-better-errors": "^5.0.0", "libnpmaccess": "^10.0.3", "libnpmdiff": "^8.1.3", "libnpmexec": "^10.2.3", "libnpmfund": "^7.0.17", "libnpmorg": "^8.0.1", "libnpmpack": "^9.1.3", "libnpmpublish": "^11.1.3", "libnpmsearch": "^9.0.1", "libnpmteam": "^8.0.2", "libnpmversion": "^8.0.3", "make-fetch-happen": "^15.0.4", "minimatch": "^10.2.2", "minipass": "^7.1.3", "minipass-pipeline": "^1.2.4", "ms": "^2.1.2", "node-gyp": "^12.2.0", "nopt": "^9.0.0", "npm-audit-report": "^7.0.0", "npm-install-checks": "^8.0.0", "npm-package-arg": "^13.0.2", "npm-pick-manifest": "^11.0.3", "npm-profile": "^12.0.1", "npm-registry-fetch": "^19.1.1", "npm-user-validate": "^4.0.0", "p-map": "^7.0.4", "pacote": "^21.4.0", "parse-conflict-json": "^5.0.1", "proc-log": "^6.1.0", "qrcode-terminal": "^0.12.0", "read": "^5.0.1", "semver": "^7.7.4", "spdx-expression-parse": "^4.0.0", "ssri": "^13.0.1", "supports-color": "^10.2.2", "tar": "^7.5.9", "text-table": "~0.2.0", "tiny-relative-date": "^2.0.2", "treeverse": "^3.0.0", "validate-npm-package-name": "^7.0.2", "which": "^6.0.1" }, "bin": { "npm": "bin/npm-cli.js", "npx": "bin/npx-cli.js" } }, "sha512-82gRxKrh/eY5UnNorkTFcdBQAGpgjWehkfGVqAGlJjejEtJZGGJUqjo3mbBTNbc5BTnPKGVtGPBZGhElujX5cw=="],
-
     "object-inspect": ["object-inspect@1.13.4", "", {}, "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="],
 
     "object-keys": ["object-keys@1.1.1", "", {}, "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="],
@@ -1143,8 +1152,6 @@
 
     "r-json": ["r-json@1.3.1", "", { "dependencies": { "w-json": "1.3.10" } }, "sha512-5nhRFfjVMQdrwKUfUlRpDUCocdKtjSnYZ1R/86mpZDV3MfsZ3dYYNjSGuMX+mPBvFvQBhdzxSqxkuLPLv4uFGg=="],
 
-    "randombytes": ["randombytes@2.1.0", "", { "dependencies": { "safe-buffer": "^5.1.0" } }, "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ=="],
-
     "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
 
     "recursive-readdir": ["recursive-readdir@2.2.3", "", { "dependencies": { "minimatch": "^3.0.5" } }, "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA=="],
@@ -1191,7 +1198,7 @@
 
     "semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
 
-    "serialize-javascript": ["serialize-javascript@6.0.2", "", { "dependencies": { "randombytes": "^2.1.0" } }, "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g=="],
+    "serialize-javascript": ["serialize-javascript@7.0.4", "", {}, "sha512-DuGdB+Po43Q5Jxwpzt1lhyFSYKryqoNjQSA9M92tyw0lyHIOur+XCalOUe0KTJpyqzT8+fQ5A0Jf7vCx/NKmIg=="],
 
     "set-function-length": ["set-function-length@1.2.2", "", { "dependencies": { "define-data-property": "^1.1.4", "es-errors": "^1.3.0", "function-bind": "^1.1.2", "get-intrinsic": "^1.2.4", "gopd": "^1.0.1", "has-property-descriptors": "^1.0.2" } }, "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg=="],
 
@@ -1509,298 +1516,6 @@
 
     "node-sarif-builder/fs-extra": ["fs-extra@11.3.3", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg=="],
 
-    "npm/@gar/promise-retry": ["@gar/promise-retry@1.0.2", "", { "dependencies": { "retry": "^0.13.1" } }, "sha512-Lm/ZLhDZcBECta3TmCQSngiQykFdfw+QtI1/GYMsZd4l3nG+P8WLB16XuS7WaBGLQ+9E+cOcWQsth9cayuGt8g=="],
-
-    "npm/@isaacs/fs-minipass": ["@isaacs/fs-minipass@4.0.1", "", { "dependencies": { "minipass": "^7.0.4" } }, "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w=="],
-
-    "npm/@isaacs/string-locale-compare": ["@isaacs/string-locale-compare@1.1.0", "", { "bundled": true }, "sha512-SQ7Kzhh9+D+ZW9MA0zkYv3VXhIDNx+LzM6EJ+/65I3QY+enU6Itte7E5XX7EWrqLW2FN4n06GWzBnPoC3th2aQ=="],
-
-    "npm/@npmcli/agent": ["@npmcli/agent@4.0.0", "", { "dependencies": { "agent-base": "^7.1.0", "http-proxy-agent": "^7.0.0", "https-proxy-agent": "^7.0.1", "lru-cache": "^11.2.1", "socks-proxy-agent": "^8.0.3" } }, "sha512-kAQTcEN9E8ERLVg5AsGwLNoFb+oEG6engbqAU2P43gD4JEIkNGMHdVQ096FsOAAYpZPB0RSt0zgInKIAS1l5QA=="],
-
-    "npm/@npmcli/arborist": ["@npmcli/arborist@9.4.0", "", { "dependencies": { "@isaacs/string-locale-compare": "^1.1.0", "@npmcli/fs": "^5.0.0", "@npmcli/installed-package-contents": "^4.0.0", "@npmcli/map-workspaces": "^5.0.0", "@npmcli/metavuln-calculator": "^9.0.2", "@npmcli/name-from-folder": "^4.0.0", "@npmcli/node-gyp": "^5.0.0", "@npmcli/package-json": "^7.0.0", "@npmcli/query": "^5.0.0", "@npmcli/redact": "^4.0.0", "@npmcli/run-script": "^10.0.0", "bin-links": "^6.0.0", "cacache": "^20.0.1", "common-ancestor-path": "^2.0.0", "hosted-git-info": "^9.0.0", "json-stringify-nice": "^1.1.4", "lru-cache": "^11.2.1", "minimatch": "^10.0.3", "nopt": "^9.0.0", "npm-install-checks": "^8.0.0", "npm-package-arg": "^13.0.0", "npm-pick-manifest": "^11.0.1", "npm-registry-fetch": "^19.0.0", "pacote": "^21.0.2", "parse-conflict-json": "^5.0.1", "proc-log": "^6.0.0", "proggy": "^4.0.0", "promise-all-reject-late": "^1.0.0", "promise-call-limit": "^3.0.1", "semver": "^7.3.7", "ssri": "^13.0.0", "treeverse": "^3.0.0", "walk-up-path": "^4.0.0" }, "bundled": true, "bin": { "arborist": "bin/index.js" } }, "sha512-4Bm8hNixJG/sii1PMnag0V9i/sGOX9VRzFrUiZMSBJpGlLR38f+Btl85d07G9GL56xO0l0OZjvrGNYsDYp0xKA=="],
-
-    "npm/@npmcli/config": ["@npmcli/config@10.7.1", "", { "dependencies": { "@npmcli/map-workspaces": "^5.0.0", "@npmcli/package-json": "^7.0.0", "ci-info": "^4.0.0", "ini": "^6.0.0", "nopt": "^9.0.0", "proc-log": "^6.0.0", "semver": "^7.3.5", "walk-up-path": "^4.0.0" }, "bundled": true }, "sha512-lh0eZYOknIpIKYKxbQKX7xFmb4FbmrOHUD25+0iEo3djRQP6YleHwBFgjH3X7QvUVM4t+Xm7rGsjDwJp63WkAg=="],
-
-    "npm/@npmcli/fs": ["@npmcli/fs@5.0.0", "", { "dependencies": { "semver": "^7.3.5" }, "bundled": true }, "sha512-7OsC1gNORBEawOa5+j2pXN9vsicaIOH5cPXxoR6fJOmH6/EXpJB2CajXOu1fPRFun2m1lktEFX11+P89hqO/og=="],
-
-    "npm/@npmcli/git": ["@npmcli/git@7.0.2", "", { "dependencies": { "@gar/promise-retry": "^1.0.0", "@npmcli/promise-spawn": "^9.0.0", "ini": "^6.0.0", "lru-cache": "^11.2.1", "npm-pick-manifest": "^11.0.1", "proc-log": "^6.0.0", "semver": "^7.3.5", "which": "^6.0.0" } }, "sha512-oeolHDjExNAJAnlYP2qzNjMX/Xi9bmu78C9dIGr4xjobrSKbuMYCph8lTzn4vnW3NjIqVmw/f8BCfouqyJXlRg=="],
-
-    "npm/@npmcli/installed-package-contents": ["@npmcli/installed-package-contents@4.0.0", "", { "dependencies": { "npm-bundled": "^5.0.0", "npm-normalize-package-bin": "^5.0.0" }, "bin": { "installed-package-contents": "bin/index.js" } }, "sha512-yNyAdkBxB72gtZ4GrwXCM0ZUedo9nIbOMKfGjt6Cu6DXf0p8y1PViZAKDC8q8kv/fufx0WTjRBdSlyrvnP7hmA=="],
-
-    "npm/@npmcli/map-workspaces": ["@npmcli/map-workspaces@5.0.3", "", { "dependencies": { "@npmcli/name-from-folder": "^4.0.0", "@npmcli/package-json": "^7.0.0", "glob": "^13.0.0", "minimatch": "^10.0.3" }, "bundled": true }, "sha512-o2grssXo1e774E5OtEwwrgoszYRh0lqkJH+Pb9r78UcqdGJRDRfhpM8DvZPjzNLLNYeD/rNbjOKM3Ss5UABROw=="],
-
-    "npm/@npmcli/metavuln-calculator": ["@npmcli/metavuln-calculator@9.0.3", "", { "dependencies": { "cacache": "^20.0.0", "json-parse-even-better-errors": "^5.0.0", "pacote": "^21.0.0", "proc-log": "^6.0.0", "semver": "^7.3.5" }, "bundled": true }, "sha512-94GLSYhLXF2t2LAC7pDwLaM4uCARzxShyAQKsirmlNcpidH89VA4/+K1LbJmRMgz5gy65E/QBBWQdUvGLe2Frg=="],
-
-    "npm/@npmcli/name-from-folder": ["@npmcli/name-from-folder@4.0.0", "", {}, "sha512-qfrhVlOSqmKM8i6rkNdZzABj8MKEITGFAY+4teqBziksCQAOLutiAxM1wY2BKEd8KjUSpWmWCYxvXr0y4VTlPg=="],
-
-    "npm/@npmcli/node-gyp": ["@npmcli/node-gyp@5.0.0", "", {}, "sha512-uuG5HZFXLfyFKqg8QypsmgLQW7smiRjVc45bqD/ofZZcR/uxEjgQU8qDPv0s9TEeMUiAAU/GC5bR6++UdTirIQ=="],
-
-    "npm/@npmcli/package-json": ["@npmcli/package-json@7.0.5", "", { "dependencies": { "@npmcli/git": "^7.0.0", "glob": "^13.0.0", "hosted-git-info": "^9.0.0", "json-parse-even-better-errors": "^5.0.0", "proc-log": "^6.0.0", "semver": "^7.5.3", "spdx-expression-parse": "^4.0.0" }, "bundled": true }, "sha512-iVuTlG3ORq2iaVa1IWUxAO/jIp77tUKBhoMjuzYW2kL4MLN1bi/ofqkZ7D7OOwh8coAx1/S2ge0rMdGv8sLSOQ=="],
-
-    "npm/@npmcli/promise-spawn": ["@npmcli/promise-spawn@9.0.1", "", { "dependencies": { "which": "^6.0.0" }, "bundled": true }, "sha512-OLUaoqBuyxeTqUvjA3FZFiXUfYC1alp3Sa99gW3EUDz3tZ3CbXDdcZ7qWKBzicrJleIgucoWamWH1saAmH/l2Q=="],
-
-    "npm/@npmcli/query": ["@npmcli/query@5.0.0", "", { "dependencies": { "postcss-selector-parser": "^7.0.0" } }, "sha512-8TZWfTQOsODpLqo9SVhVjHovmKXNpevHU0gO9e+y4V4fRIOneiXy0u0sMP9LmS71XivrEWfZWg50ReH4WRT4aQ=="],
-
-    "npm/@npmcli/redact": ["@npmcli/redact@4.0.0", "", { "bundled": true }, "sha512-gOBg5YHMfZy+TfHArfVogwgfBeQnKbbGo3pSUyK/gSI0AVu+pEiDVcKlQb0D8Mg1LNRZILZ6XG8I5dJ4KuAd9Q=="],
-
-    "npm/@npmcli/run-script": ["@npmcli/run-script@10.0.4", "", { "dependencies": { "@npmcli/node-gyp": "^5.0.0", "@npmcli/package-json": "^7.0.0", "@npmcli/promise-spawn": "^9.0.0", "node-gyp": "^12.1.0", "proc-log": "^6.0.0" }, "bundled": true }, "sha512-mGUWr1uMnf0le2TwfOZY4SFxZGXGfm4Jtay/nwAa2FLNAKXUoUwaGwBMNH36UHPtinWfTSJ3nqFQr0091CxVGg=="],
-
-    "npm/@sigstore/bundle": ["@sigstore/bundle@4.0.0", "", { "dependencies": { "@sigstore/protobuf-specs": "^0.5.0" } }, "sha512-NwCl5Y0V6Di0NexvkTqdoVfmjTaQwoLM236r89KEojGmq/jMls8S+zb7yOwAPdXvbwfKDlP+lmXgAL4vKSQT+A=="],
-
-    "npm/@sigstore/core": ["@sigstore/core@3.1.0", "", {}, "sha512-o5cw1QYhNQ9IroioJxpzexmPjfCe7gzafd2RY3qnMpxr4ZEja+Jad/U8sgFpaue6bOaF+z7RVkyKVV44FN+N8A=="],
-
-    "npm/@sigstore/protobuf-specs": ["@sigstore/protobuf-specs@0.5.0", "", {}, "sha512-MM8XIwUjN2bwvCg1QvrMtbBmpcSHrkhFSCu1D11NyPvDQ25HEc4oG5/OcQfd/Tlf/OxmKWERDj0zGE23jQaMwA=="],
-
-    "npm/@sigstore/sign": ["@sigstore/sign@4.1.0", "", { "dependencies": { "@sigstore/bundle": "^4.0.0", "@sigstore/core": "^3.1.0", "@sigstore/protobuf-specs": "^0.5.0", "make-fetch-happen": "^15.0.3", "proc-log": "^6.1.0", "promise-retry": "^2.0.1" } }, "sha512-Vx1RmLxLGnSUqx/o5/VsCjkuN5L7y+vxEEwawvc7u+6WtX2W4GNa7b9HEjmcRWohw/d6BpATXmvOwc78m+Swdg=="],
-
-    "npm/@sigstore/tuf": ["@sigstore/tuf@4.0.1", "", { "dependencies": { "@sigstore/protobuf-specs": "^0.5.0", "tuf-js": "^4.1.0" }, "bundled": true }, "sha512-OPZBg8y5Vc9yZjmWCHrlWPMBqW5yd8+wFNl+thMdtcWz3vjVSoJQutF8YkrzI0SLGnkuFof4HSsWUhXrf219Lw=="],
-
-    "npm/@sigstore/verify": ["@sigstore/verify@3.1.0", "", { "dependencies": { "@sigstore/bundle": "^4.0.0", "@sigstore/core": "^3.1.0", "@sigstore/protobuf-specs": "^0.5.0" } }, "sha512-mNe0Iigql08YupSOGv197YdHpPPr+EzDZmfCgMc7RPNaZTw5aLN01nBl6CHJOh3BGtnMIj83EeN4butBchc8Ag=="],
-
-    "npm/@tufjs/canonical-json": ["@tufjs/canonical-json@2.0.0", "", {}, "sha512-yVtV8zsdo8qFHe+/3kw81dSLyF7D576A5cCFCi4X7B39tWT7SekaEFUnvnWJHz+9qO7qJTah1JbrDjWKqFtdWA=="],
-
-    "npm/@tufjs/models": ["@tufjs/models@4.1.0", "", { "dependencies": { "@tufjs/canonical-json": "2.0.0", "minimatch": "^10.1.1" } }, "sha512-Y8cK9aggNRsqJVaKUlEYs4s7CvQ1b1ta2DVPyAimb0I2qhzjNk+A+mxvll/klL0RlfuIUei8BF7YWiua4kQqww=="],
-
-    "npm/abbrev": ["abbrev@4.0.0", "", { "bundled": true }, "sha512-a1wflyaL0tHtJSmLSOVybYhy22vRih4eduhhrkcjgrWGnRfrZtovJ2FRjxuTtkkj47O/baf0R86QU5OuYpz8fA=="],
-
-    "npm/agent-base": ["agent-base@7.1.4", "", {}, "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ=="],
-
-    "npm/aproba": ["aproba@2.1.0", "", {}, "sha512-tLIEcj5GuR2RSTnxNKdkK0dJ/GrC7P38sUkiDmDuHfsHmbagTFAxDVIBltoklXEVIQ/f14IL8IMJ5pn9Hez1Ew=="],
-
-    "npm/archy": ["archy@1.0.0", "", { "bundled": true }, "sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw=="],
-
-    "npm/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
-
-    "npm/bin-links": ["bin-links@6.0.0", "", { "dependencies": { "cmd-shim": "^8.0.0", "npm-normalize-package-bin": "^5.0.0", "proc-log": "^6.0.0", "read-cmd-shim": "^6.0.0", "write-file-atomic": "^7.0.0" } }, "sha512-X4CiKlcV2GjnCMwnKAfbVWpHa++65th9TuzAEYtZoATiOE2DQKhSp4CJlyLoTqdhBKlXjpXjCTYPNNFS33Fi6w=="],
-
-    "npm/binary-extensions": ["binary-extensions@3.1.0", "", {}, "sha512-Jvvd9hy1w+xUad8+ckQsWA/V1AoyubOvqn0aygjMOVM4BfIaRav1NFS3LsTSDaV4n4FtcCtQXvzep1E6MboqwQ=="],
-
-    "npm/brace-expansion": ["brace-expansion@5.0.4", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg=="],
-
-    "npm/cacache": ["cacache@20.0.3", "", { "dependencies": { "@npmcli/fs": "^5.0.0", "fs-minipass": "^3.0.0", "glob": "^13.0.0", "lru-cache": "^11.1.0", "minipass": "^7.0.3", "minipass-collect": "^2.0.1", "minipass-flush": "^1.0.5", "minipass-pipeline": "^1.2.4", "p-map": "^7.0.2", "ssri": "^13.0.0", "unique-filename": "^5.0.0" }, "bundled": true }, "sha512-3pUp4e8hv07k1QlijZu6Kn7c9+ZpWWk4j3F8N3xPuCExULobqJydKYOTj1FTq58srkJsXvO7LbGAH4C0ZU3WGw=="],
-
-    "npm/chalk": ["chalk@5.6.2", "", { "bundled": true }, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
-
-    "npm/chownr": ["chownr@3.0.0", "", {}, "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g=="],
-
-    "npm/ci-info": ["ci-info@4.4.0", "", { "bundled": true }, "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg=="],
-
-    "npm/cidr-regex": ["cidr-regex@5.0.3", "", {}, "sha512-zfPT2uurEroxXqefaL2L7/fT5ED2XTutC6UwFbSZfqSOk1vk5VFY6xa6/R6pBxB4Uc8MNPbRW5ykqutFG5P5ww=="],
-
-    "npm/cmd-shim": ["cmd-shim@8.0.0", "", {}, "sha512-Jk/BK6NCapZ58BKUxlSI+ouKRbjH1NLZCgJkYoab+vEHUY3f6OzpNBN9u7HFSv9J6TRDGs4PLOHezoKGaFRSCA=="],
-
-    "npm/common-ancestor-path": ["common-ancestor-path@2.0.0", "", {}, "sha512-dnN3ibLeoRf2HNC+OlCiNc5d2zxbLJXOtiZUudNFSXZrNSydxcCsSpRzXwfu7BBWCIfHPw+xTayeBvJCP/D8Ng=="],
-
-    "npm/cssesc": ["cssesc@3.0.0", "", { "bin": "bin/cssesc" }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
-
-    "npm/debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
-
-    "npm/diff": ["diff@8.0.3", "", {}, "sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ=="],
-
-    "npm/env-paths": ["env-paths@2.2.1", "", {}, "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A=="],
-
-    "npm/err-code": ["err-code@2.0.3", "", {}, "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA=="],
-
-    "npm/exponential-backoff": ["exponential-backoff@3.1.3", "", {}, "sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA=="],
-
-    "npm/fastest-levenshtein": ["fastest-levenshtein@1.0.16", "", { "bundled": true }, "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg=="],
-
-    "npm/fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" } }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
-
-    "npm/fs-minipass": ["fs-minipass@3.0.3", "", { "dependencies": { "minipass": "^7.0.3" }, "bundled": true }, "sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw=="],
-
-    "npm/glob": ["glob@13.0.6", "", { "dependencies": { "minimatch": "^10.2.2", "minipass": "^7.1.3", "path-scurry": "^2.0.2" }, "bundled": true }, "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw=="],
-
-    "npm/graceful-fs": ["graceful-fs@4.2.11", "", { "bundled": true }, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
-
-    "npm/hosted-git-info": ["hosted-git-info@9.0.2", "", { "dependencies": { "lru-cache": "^11.1.0" }, "bundled": true }, "sha512-M422h7o/BR3rmCQ8UHi7cyyMqKltdP9Uo+J2fXK+RSAY+wTcKOIRyhTuKv4qn+DJf3g+PL890AzId5KZpX+CBg=="],
-
-    "npm/http-cache-semantics": ["http-cache-semantics@4.2.0", "", {}, "sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ=="],
-
-    "npm/http-proxy-agent": ["http-proxy-agent@7.0.2", "", { "dependencies": { "agent-base": "^7.1.0", "debug": "^4.3.4" } }, "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig=="],
-
-    "npm/https-proxy-agent": ["https-proxy-agent@7.0.6", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "4" } }, "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw=="],
-
-    "npm/iconv-lite": ["iconv-lite@0.7.2", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw=="],
-
-    "npm/ignore-walk": ["ignore-walk@8.0.0", "", { "dependencies": { "minimatch": "^10.0.3" } }, "sha512-FCeMZT4NiRQGh+YkeKMtWrOmBgWjHjMJ26WQWrRQyoyzqevdaGSakUaJW5xQYmjLlUVk2qUnCjYVBax9EKKg8A=="],
-
-    "npm/imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
-
-    "npm/ini": ["ini@6.0.0", "", { "bundled": true }, "sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ=="],
-
-    "npm/init-package-json": ["init-package-json@8.2.5", "", { "dependencies": { "@npmcli/package-json": "^7.0.0", "npm-package-arg": "^13.0.0", "promzard": "^3.0.1", "read": "^5.0.1", "semver": "^7.7.2", "validate-npm-package-name": "^7.0.0" }, "bundled": true }, "sha512-IknQ+upLuJU6t3p0uo9wS3GjFD/1GtxIwcIGYOWR8zL2HxQeJwvxYTgZr9brJ8pyZ4kvpkebM8ZKcyqOeLOHSg=="],
-
-    "npm/ip-address": ["ip-address@10.1.0", "", {}, "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q=="],
-
-    "npm/is-cidr": ["is-cidr@6.0.3", "", { "dependencies": { "cidr-regex": "^5.0.1" }, "bundled": true }, "sha512-tPdsizbDiISrc4PoII6ZfpmAokx0oDKeYqAUp5bXOfznauOFXfEeosKBRrl0o0SriE4xoRR05Czn4YPCFMjSHA=="],
-
-    "npm/isexe": ["isexe@4.0.0", "", {}, "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw=="],
-
-    "npm/json-parse-even-better-errors": ["json-parse-even-better-errors@5.0.0", "", { "bundled": true }, "sha512-ZF1nxZ28VhQouRWhUcVlUIN3qwSgPuswK05s/HIaoetAoE/9tngVmCHjSxmSQPav1nd+lPtTL0YZ/2AFdR/iYQ=="],
-
-    "npm/json-stringify-nice": ["json-stringify-nice@1.1.4", "", {}, "sha512-5Z5RFW63yxReJ7vANgW6eZFGWaQvnPE3WNmZoOJrSkGju2etKA2L5rrOa1sm877TVTFt57A80BH1bArcmlLfPw=="],
-
-    "npm/jsonparse": ["jsonparse@1.3.1", "", {}, "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg=="],
-
-    "npm/just-diff": ["just-diff@6.0.2", "", {}, "sha512-S59eriX5u3/QhMNq3v/gm8Kd0w8OS6Tz2FS1NG4blv+z0MuQcBRJyFWjdovM0Rad4/P4aUPFtnkNjMjyMlMSYA=="],
-
-    "npm/just-diff-apply": ["just-diff-apply@5.5.0", "", {}, "sha512-OYTthRfSh55WOItVqwpefPtNt2VdKsq5AnAK6apdtR6yCH8pr0CmSr710J0Mf+WdQy7K/OzMy7K2MgAfdQURDw=="],
-
-    "npm/libnpmaccess": ["libnpmaccess@10.0.3", "", { "dependencies": { "npm-package-arg": "^13.0.0", "npm-registry-fetch": "^19.0.0" }, "bundled": true }, "sha512-JPHTfWJxIK+NVPdNMNGnkz4XGX56iijPbe0qFWbdt68HL+kIvSzh+euBL8npLZvl2fpaxo+1eZSdoG15f5YdIQ=="],
-
-    "npm/libnpmdiff": ["libnpmdiff@8.1.3", "", { "dependencies": { "@npmcli/arborist": "^9.4.0", "@npmcli/installed-package-contents": "^4.0.0", "binary-extensions": "^3.0.0", "diff": "^8.0.2", "minimatch": "^10.0.3", "npm-package-arg": "^13.0.0", "pacote": "^21.0.2", "tar": "^7.5.1" }, "bundled": true }, "sha512-QZ9rpchNXSzvxTRHzEqxCfYBK2h+6j4J7IbBViBGy3xSJDBl026BCMhmlZQ0a69GeQkjkbM9X1hzRV9N5cdQog=="],
-
-    "npm/libnpmexec": ["libnpmexec@10.2.3", "", { "dependencies": { "@gar/promise-retry": "^1.0.0", "@npmcli/arborist": "^9.4.0", "@npmcli/package-json": "^7.0.0", "@npmcli/run-script": "^10.0.0", "ci-info": "^4.0.0", "npm-package-arg": "^13.0.0", "pacote": "^21.0.2", "proc-log": "^6.0.0", "read": "^5.0.1", "semver": "^7.3.7", "signal-exit": "^4.1.0", "walk-up-path": "^4.0.0" }, "bundled": true }, "sha512-tCeneLdUhmn8GTORbui7QZrr1Rv8Y2/mQRwMjUeyY8IrhCjv29RkoH3gFz+1CCPGGMp26eT8KI977G74+rXMpw=="],
-
-    "npm/libnpmfund": ["libnpmfund@7.0.17", "", { "dependencies": { "@npmcli/arborist": "^9.4.0" }, "bundled": true }, "sha512-0VRPO+Bs21kneI3J01QqnuxiNnHn1lErTqLIbI3zGM9LvsPtc2q2/xhjACuXbkcejuHVm3T9mWaky0IjM9gQeQ=="],
-
-    "npm/libnpmorg": ["libnpmorg@8.0.1", "", { "dependencies": { "aproba": "^2.0.0", "npm-registry-fetch": "^19.0.0" }, "bundled": true }, "sha512-/QeyXXg4hqMw0ESM7pERjIT2wbR29qtFOWIOug/xO4fRjS3jJJhoAPQNsnHtdwnCqgBdFpGQ45aIdFFZx2YhTA=="],
-
-    "npm/libnpmpack": ["libnpmpack@9.1.3", "", { "dependencies": { "@npmcli/arborist": "^9.4.0", "@npmcli/run-script": "^10.0.0", "npm-package-arg": "^13.0.0", "pacote": "^21.0.2" }, "bundled": true }, "sha512-7Uvo0mDIidFCOGwZJghTuk9glaR6Es9FxmLWJobOS857/cb5SO5YPqgYLlC1TZB6L0c2jtu8XB1GfxKRf4W4GA=="],
-
-    "npm/libnpmpublish": ["libnpmpublish@11.1.3", "", { "dependencies": { "@npmcli/package-json": "^7.0.0", "ci-info": "^4.0.0", "npm-package-arg": "^13.0.0", "npm-registry-fetch": "^19.0.0", "proc-log": "^6.0.0", "semver": "^7.3.7", "sigstore": "^4.0.0", "ssri": "^13.0.0" }, "bundled": true }, "sha512-NVPTth/71cfbdYHqypcO9Lt5WFGTzFEcx81lWd7GDJIgZ95ERdYHGUfCtFejHCyqodKsQkNEx2JCkMpreDty/A=="],
-
-    "npm/libnpmsearch": ["libnpmsearch@9.0.1", "", { "dependencies": { "npm-registry-fetch": "^19.0.0" }, "bundled": true }, "sha512-oKw58X415ERY/BOGV3jQPVMcep8YeMRWMzuuqB0BAIM5VxicOU1tQt19ExCu4SV77SiTOEoziHxGEgJGw3FBYQ=="],
-
-    "npm/libnpmteam": ["libnpmteam@8.0.2", "", { "dependencies": { "aproba": "^2.0.0", "npm-registry-fetch": "^19.0.0" }, "bundled": true }, "sha512-ypLrDUQoi8EhG+gzx5ENMcYq23YjPV17Mfvx4nOnQiHOi8vp47+4GvZBrMsEM4yeHPwxguF/HZoXH4rJfHdH/w=="],
-
-    "npm/libnpmversion": ["libnpmversion@8.0.3", "", { "dependencies": { "@npmcli/git": "^7.0.0", "@npmcli/run-script": "^10.0.0", "json-parse-even-better-errors": "^5.0.0", "proc-log": "^6.0.0", "semver": "^7.3.7" }, "bundled": true }, "sha512-Avj1GG3DT6MGzWOOk3yA7rORcMDUPizkIGbI8glHCO7WoYn3NYNmskLDwxg2NMY1Tyf2vrHAqTuSG58uqd1lJg=="],
-
-    "npm/lru-cache": ["lru-cache@11.2.4", "", {}, "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg=="],
-
-    "npm/make-fetch-happen": ["make-fetch-happen@15.0.4", "", { "dependencies": { "@gar/promise-retry": "^1.0.0", "@npmcli/agent": "^4.0.0", "cacache": "^20.0.1", "http-cache-semantics": "^4.1.1", "minipass": "^7.0.2", "minipass-fetch": "^5.0.0", "minipass-flush": "^1.0.5", "minipass-pipeline": "^1.2.4", "negotiator": "^1.0.0", "proc-log": "^6.0.0", "ssri": "^13.0.0" }, "bundled": true }, "sha512-vM2sG+wbVeVGYcCm16mM3d5fuem9oC28n436HjsGO3LcxoTI8LNVa4rwZDn3f76+cWyT4GGJDxjTYU1I2nr6zw=="],
-
-    "npm/minimatch": ["minimatch@10.2.4", "", { "dependencies": { "brace-expansion": "^5.0.2" }, "bundled": true }, "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg=="],
-
-    "npm/minipass": ["minipass@7.1.3", "", { "bundled": true }, "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A=="],
-
-    "npm/minipass-collect": ["minipass-collect@2.0.1", "", { "dependencies": { "minipass": "^7.0.3" } }, "sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw=="],
-
-    "npm/minipass-fetch": ["minipass-fetch@5.0.2", "", { "dependencies": { "minipass": "^7.0.3", "minipass-sized": "^2.0.0", "minizlib": "^3.0.1" }, "optionalDependencies": { "iconv-lite": "^0.7.2" } }, "sha512-2d0q2a8eCi2IRg/IGubCNRJoYbA1+YPXAzQVRFmB45gdGZafyivnZ5YSEfo3JikbjGxOdntGFvBQGqaSMXlAFQ=="],
-
-    "npm/minipass-flush": ["minipass-flush@1.0.5", "", { "dependencies": { "minipass": "^3.0.0" } }, "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw=="],
-
-    "npm/minipass-pipeline": ["minipass-pipeline@1.2.4", "", { "dependencies": { "minipass": "^3.0.0" }, "bundled": true }, "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A=="],
-
-    "npm/minipass-sized": ["minipass-sized@2.0.0", "", { "dependencies": { "minipass": "^7.1.2" } }, "sha512-zSsHhto5BcUVM2m1LurnXY6M//cGhVaegT71OfOXoprxT6o780GZd792ea6FfrQkuU4usHZIUczAQMRUE2plzA=="],
-
-    "npm/minizlib": ["minizlib@3.1.0", "", { "dependencies": { "minipass": "^7.1.2" } }, "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw=="],
-
-    "npm/ms": ["ms@2.1.3", "", { "bundled": true }, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
-
-    "npm/mute-stream": ["mute-stream@3.0.0", "", {}, "sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw=="],
-
-    "npm/negotiator": ["negotiator@1.0.0", "", {}, "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg=="],
-
-    "npm/node-gyp": ["node-gyp@12.2.0", "", { "dependencies": { "env-paths": "^2.2.0", "exponential-backoff": "^3.1.1", "graceful-fs": "^4.2.6", "make-fetch-happen": "^15.0.0", "nopt": "^9.0.0", "proc-log": "^6.0.0", "semver": "^7.3.5", "tar": "^7.5.4", "tinyglobby": "^0.2.12", "which": "^6.0.0" }, "bundled": true, "bin": { "node-gyp": "bin/node-gyp.js" } }, "sha512-q23WdzrQv48KozXlr0U1v9dwO/k59NHeSzn6loGcasyf0UnSrtzs8kRxM+mfwJSf0DkX0s43hcqgnSO4/VNthQ=="],
-
-    "npm/nopt": ["nopt@9.0.0", "", { "dependencies": { "abbrev": "^4.0.0" }, "bundled": true, "bin": { "nopt": "bin/nopt.js" } }, "sha512-Zhq3a+yFKrYwSBluL4H9XP3m3y5uvQkB/09CwDruCiRmR/UJYnn9W4R48ry0uGC70aeTPKLynBtscP9efFFcPw=="],
-
-    "npm/npm-audit-report": ["npm-audit-report@7.0.0", "", { "bundled": true }, "sha512-bluLL4xwGr/3PERYz50h2Upco0TJMDcLcymuFnfDWeGO99NqH724MNzhWi5sXXuXf2jbytFF0LyR8W+w1jTI6A=="],
-
-    "npm/npm-bundled": ["npm-bundled@5.0.0", "", { "dependencies": { "npm-normalize-package-bin": "^5.0.0" } }, "sha512-JLSpbzh6UUXIEoqPsYBvVNVmyrjVZ1fzEFbqxKkTJQkWBO3xFzFT+KDnSKQWwOQNbuWRwt5LSD6HOTLGIWzfrw=="],
-
-    "npm/npm-install-checks": ["npm-install-checks@8.0.0", "", { "dependencies": { "semver": "^7.1.1" }, "bundled": true }, "sha512-ScAUdMpyzkbpxoNekQ3tNRdFI8SJ86wgKZSQZdUxT+bj0wVFpsEMWnkXP0twVe1gJyNF5apBWDJhhIbgrIViRA=="],
-
-    "npm/npm-normalize-package-bin": ["npm-normalize-package-bin@5.0.0", "", {}, "sha512-CJi3OS4JLsNMmr2u07OJlhcrPxCeOeP/4xq67aWNai6TNWWbTrlNDgl8NcFKVlcBKp18GPj+EzbNIgrBfZhsag=="],
-
-    "npm/npm-package-arg": ["npm-package-arg@13.0.2", "", { "dependencies": { "hosted-git-info": "^9.0.0", "proc-log": "^6.0.0", "semver": "^7.3.5", "validate-npm-package-name": "^7.0.0" }, "bundled": true }, "sha512-IciCE3SY3uE84Ld8WZU23gAPPV9rIYod4F+rc+vJ7h7cwAJt9Vk6TVsK60ry7Uj3SRS3bqRRIGuTp9YVlk6WNA=="],
-
-    "npm/npm-packlist": ["npm-packlist@10.0.4", "", { "dependencies": { "ignore-walk": "^8.0.0", "proc-log": "^6.0.0" } }, "sha512-uMW73iajD8hiH4ZBxEV3HC+eTnppIqwakjOYuvgddnalIw2lJguKviK1pcUJDlIWm1wSJkchpDZDSVVsZEYRng=="],
-
-    "npm/npm-pick-manifest": ["npm-pick-manifest@11.0.3", "", { "dependencies": { "npm-install-checks": "^8.0.0", "npm-normalize-package-bin": "^5.0.0", "npm-package-arg": "^13.0.0", "semver": "^7.3.5" }, "bundled": true }, "sha512-buzyCfeoGY/PxKqmBqn1IUJrZnUi1VVJTdSSRPGI60tJdUhUoSQFhs0zycJokDdOznQentgrpf8LayEHyyYlqQ=="],
-
-    "npm/npm-profile": ["npm-profile@12.0.1", "", { "dependencies": { "npm-registry-fetch": "^19.0.0", "proc-log": "^6.0.0" }, "bundled": true }, "sha512-Xs1mejJ1/9IKucCxdFMkiBJUre0xaxfCpbsO7DB7CadITuT4k68eI05HBlw4kj+Em1rsFMgeFNljFPYvPETbVQ=="],
-
-    "npm/npm-registry-fetch": ["npm-registry-fetch@19.1.1", "", { "dependencies": { "@npmcli/redact": "^4.0.0", "jsonparse": "^1.3.1", "make-fetch-happen": "^15.0.0", "minipass": "^7.0.2", "minipass-fetch": "^5.0.0", "minizlib": "^3.0.1", "npm-package-arg": "^13.0.0", "proc-log": "^6.0.0" }, "bundled": true }, "sha512-TakBap6OM1w0H73VZVDf44iFXsOS3h+L4wVMXmbWOQroZgFhMch0juN6XSzBNlD965yIKvWg2dfu7NSiaYLxtw=="],
-
-    "npm/npm-user-validate": ["npm-user-validate@4.0.0", "", { "bundled": true }, "sha512-TP+Ziq/qPi/JRdhaEhnaiMkqfMGjhDLoh/oRfW+t5aCuIfJxIUxvwk6Sg/6ZJ069N/Be6gs00r+aZeJTfS9uHQ=="],
-
-    "npm/p-map": ["p-map@7.0.4", "", { "bundled": true }, "sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ=="],
-
-    "npm/pacote": ["pacote@21.4.0", "", { "dependencies": { "@gar/promise-retry": "^1.0.0", "@npmcli/git": "^7.0.0", "@npmcli/installed-package-contents": "^4.0.0", "@npmcli/package-json": "^7.0.0", "@npmcli/promise-spawn": "^9.0.0", "@npmcli/run-script": "^10.0.0", "cacache": "^20.0.0", "fs-minipass": "^3.0.0", "minipass": "^7.0.2", "npm-package-arg": "^13.0.0", "npm-packlist": "^10.0.1", "npm-pick-manifest": "^11.0.1", "npm-registry-fetch": "^19.0.0", "proc-log": "^6.0.0", "sigstore": "^4.0.0", "ssri": "^13.0.0", "tar": "^7.4.3" }, "bundled": true, "bin": { "pacote": "bin/index.js" } }, "sha512-DR7mn7HUOomAX1BORnpYy678qVIidbvOojkBscqy27dRKN+s/hLeQT1MeYYrx1Cxh62jyKjiWiDV7RTTqB+ZEQ=="],
-
-    "npm/parse-conflict-json": ["parse-conflict-json@5.0.1", "", { "dependencies": { "json-parse-even-better-errors": "^5.0.0", "just-diff": "^6.0.0", "just-diff-apply": "^5.2.0" }, "bundled": true }, "sha512-ZHEmNKMq1wyJXNwLxyHnluPfRAFSIliBvbK/UiOceROt4Xh9Pz0fq49NytIaeaCUf5VR86hwQ/34FCcNU5/LKQ=="],
-
-    "npm/path-scurry": ["path-scurry@2.0.2", "", { "dependencies": { "lru-cache": "^11.0.0", "minipass": "^7.1.2" } }, "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg=="],
-
-    "npm/picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
-
-    "npm/postcss-selector-parser": ["postcss-selector-parser@7.1.1", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg=="],
-
-    "npm/proc-log": ["proc-log@6.1.0", "", { "bundled": true }, "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ=="],
-
-    "npm/proggy": ["proggy@4.0.0", "", {}, "sha512-MbA4R+WQT76ZBm/5JUpV9yqcJt92175+Y0Bodg3HgiXzrmKu7Ggq+bpn6y6wHH+gN9NcyKn3yg1+d47VaKwNAQ=="],
-
-    "npm/promise-all-reject-late": ["promise-all-reject-late@1.0.1", "", {}, "sha512-vuf0Lf0lOxyQREH7GDIOUMLS7kz+gs8i6B+Yi8dC68a2sychGrHTJYghMBD6k7eUcH0H5P73EckCA48xijWqXw=="],
-
-    "npm/promise-call-limit": ["promise-call-limit@3.0.2", "", {}, "sha512-mRPQO2T1QQVw11E7+UdCJu7S61eJVWknzml9sC1heAdj1jxl0fWMBypIt9ZOcLFf8FkG995ZD7RnVk7HH72fZw=="],
-
-    "npm/promise-retry": ["promise-retry@2.0.1", "", { "dependencies": { "err-code": "^2.0.2", "retry": "^0.12.0" } }, "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g=="],
-
-    "npm/promzard": ["promzard@3.0.1", "", { "dependencies": { "read": "^5.0.0" } }, "sha512-M5mHhWh+Adz0BIxgSrqcc6GTCSconR7zWQV9vnOSptNtr6cSFlApLc28GbQhuN6oOWBQeV2C0bNE47JCY/zu3Q=="],
-
-    "npm/qrcode-terminal": ["qrcode-terminal@0.12.0", "", { "bundled": true, "bin": { "qrcode-terminal": "./bin/qrcode-terminal.js" } }, "sha512-EXtzRZmC+YGmGlDFbXKxQiMZNwCLEO6BANKXG4iCtSIM0yqc/pappSx3RIKr4r0uh5JsBckOXeKrB3Iz7mdQpQ=="],
-
-    "npm/read": ["read@5.0.1", "", { "dependencies": { "mute-stream": "^3.0.0" }, "bundled": true }, "sha512-+nsqpqYkkpet2UVPG8ZiuE8d113DK4vHYEoEhcrXBAlPiq6di7QRTuNiKQAbaRYegobuX2BpZ6QjanKOXnJdTA=="],
-
-    "npm/read-cmd-shim": ["read-cmd-shim@6.0.0", "", {}, "sha512-1zM5HuOfagXCBWMN83fuFI/x+T/UhZ7k+KIzhrHXcQoeX5+7gmaDYjELQHmmzIodumBHeByBJT4QYS7ufAgs7A=="],
-
-    "npm/retry": ["retry@0.13.1", "", {}, "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg=="],
-
-    "npm/safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
-
-    "npm/semver": ["semver@7.7.4", "", { "bundled": true, "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
-
-    "npm/signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
-
-    "npm/sigstore": ["sigstore@4.1.0", "", { "dependencies": { "@sigstore/bundle": "^4.0.0", "@sigstore/core": "^3.1.0", "@sigstore/protobuf-specs": "^0.5.0", "@sigstore/sign": "^4.1.0", "@sigstore/tuf": "^4.0.1", "@sigstore/verify": "^3.1.0" } }, "sha512-/fUgUhYghuLzVT/gaJoeVehLCgZiUxPCPMcyVNY0lIf/cTCz58K/WTI7PefDarXxp9nUKpEwg1yyz3eSBMTtgA=="],
-
-    "npm/smart-buffer": ["smart-buffer@4.2.0", "", {}, "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg=="],
-
-    "npm/socks": ["socks@2.8.7", "", { "dependencies": { "ip-address": "^10.0.1", "smart-buffer": "^4.2.0" } }, "sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A=="],
-
-    "npm/socks-proxy-agent": ["socks-proxy-agent@8.0.5", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "^4.3.4", "socks": "^2.8.3" } }, "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw=="],
-
-    "npm/spdx-exceptions": ["spdx-exceptions@2.5.0", "", {}, "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w=="],
-
-    "npm/spdx-expression-parse": ["spdx-expression-parse@4.0.0", "", { "dependencies": { "spdx-exceptions": "^2.1.0", "spdx-license-ids": "^3.0.0" }, "bundled": true }, "sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ=="],
-
-    "npm/spdx-license-ids": ["spdx-license-ids@3.0.23", "", {}, "sha512-CWLcCCH7VLu13TgOH+r8p1O/Znwhqv/dbb6lqWy67G+pT1kHmeD/+V36AVb/vq8QMIQwVShJ6Ssl5FPh0fuSdw=="],
-
-    "npm/ssri": ["ssri@13.0.1", "", { "dependencies": { "minipass": "^7.0.3" }, "bundled": true }, "sha512-QUiRf1+u9wPTL/76GTYlKttDEBWV1ga9ZXW8BG6kfdeyyM8LGPix9gROyg9V2+P0xNyF3X2Go526xKFdMZrHSQ=="],
-
-    "npm/supports-color": ["supports-color@10.2.2", "", { "bundled": true }, "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g=="],
-
-    "npm/tar": ["tar@7.5.10", "", { "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", "minipass": "^7.1.2", "minizlib": "^3.1.0", "yallist": "^5.0.0" }, "bundled": true }, "sha512-8mOPs1//5q/rlkNSPcCegA6hiHJYDmSLEI8aMH/CdSQJNWztHC9WHNam5zdQlfpTwB9Xp7IBEsHfV5LKMJGVAw=="],
-
-    "npm/text-table": ["text-table@0.2.0", "", { "bundled": true }, "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="],
-
-    "npm/tiny-relative-date": ["tiny-relative-date@2.0.2", "", { "bundled": true }, "sha512-rGxAbeL9z3J4pI2GtBEoFaavHdO4RKAU54hEuOef5kfx5aPqiQtbhYktMOTL5OA33db8BjsDcLXuNp+/v19PHw=="],
-
-    "npm/tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="],
-
-    "npm/treeverse": ["treeverse@3.0.0", "", { "bundled": true }, "sha512-gcANaAnd2QDZFmHFEOF4k7uc1J/6a6z3DJMd/QwEyxLoKGiptJRwid582r7QIsFlFMIZ3SnxfS52S4hm2DHkuQ=="],
-
-    "npm/tuf-js": ["tuf-js@4.1.0", "", { "dependencies": { "@tufjs/models": "4.1.0", "debug": "^4.4.3", "make-fetch-happen": "^15.0.1" } }, "sha512-50QV99kCKH5P/Vs4E2Gzp7BopNV+KzTXqWeaxrfu5IQJBOULRsTIS9seSsOVT8ZnGXzCyx55nYWAi4qJzpZKEQ=="],
-
-    "npm/unique-filename": ["unique-filename@5.0.0", "", { "dependencies": { "unique-slug": "^6.0.0" } }, "sha512-2RaJTAvAb4owyjllTfXzFClJ7WsGxlykkPvCr9pA//LD9goVq+m4PPAeBgNodGZ7nSrntT/auWpJ6Y5IFXcfjg=="],
-
-    "npm/unique-slug": ["unique-slug@6.0.0", "", { "dependencies": { "imurmurhash": "^0.1.4" } }, "sha512-4Lup7Ezn8W3d52/xBhZBVdx323ckxa7DEvd9kPQHppTkLoJXw6ltrBCyj5pnrxj0qKDxYMJ56CoxNuFCscdTiw=="],
-
-    "npm/util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
-
-    "npm/validate-npm-package-name": ["validate-npm-package-name@7.0.2", "", { "bundled": true }, "sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A=="],
-
-    "npm/walk-up-path": ["walk-up-path@4.0.0", "", {}, "sha512-3hu+tD8YzSLGuFYtPRb48vdhKMi0KQV5sn+uWr8+7dMEq/2G/dtLrdDinkLjqq5TIbIBjYJ4Ax/n3YiaW7QM8A=="],
-
-    "npm/which": ["which@6.0.1", "", { "dependencies": { "isexe": "^4.0.0" }, "bundled": true, "bin": { "node-which": "bin/which.js" } }, "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg=="],
-
-    "npm/write-file-atomic": ["write-file-atomic@7.0.1", "", { "dependencies": { "signal-exit": "^4.0.1" } }, "sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg=="],
-
-    "npm/yallist": ["yallist@5.0.0", "", {}, "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw=="],
-
     "path-scurry/minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
 
     "postject/commander": ["commander@9.5.0", "", {}, "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="],
@@ -1855,12 +1570,6 @@
 
     "glob/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
 
-    "npm/minipass-flush/minipass": ["minipass@3.3.6", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw=="],
-
-    "npm/minipass-pipeline/minipass": ["minipass@3.3.6", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw=="],
-
-    "npm/promise-retry/retry": ["retry@0.12.0", "", {}, "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow=="],
-
     "stylelint/file-entry-cache/flat-cache": ["flat-cache@6.1.19", "", { "dependencies": { "cacheable": "^2.2.0", "flatted": "^3.3.3", "hookified": "^1.13.0" } }, "sha512-l/K33newPTZMTGAnnzaiqSl6NnH7Namh8jBNjrgjprWxGmZUuxx/sJNIRaijOh3n7q7ESbhNZC+pvVZMFdeU4A=="],
 
     "table/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
@@ -1885,10 +1594,6 @@
 
     "glob/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
-    "npm/minipass-flush/minipass/yallist": ["yallist@4.0.0", "", {}, "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="],
-
-    "npm/minipass-pipeline/minipass/yallist": ["yallist@4.0.0", "", {}, "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="],
-
     "workbox-build/glob/path-scurry/lru-cache": ["lru-cache@11.2.4", "", {}, "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg=="],
   }
 }

From 9fe689db530a93d6f3d2cdf6659a13d874d62714 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 8 Mar 2026 20:01:38 +0100
Subject: [PATCH 17/26] fix: handle JSON response in image upload

---
 js/profile.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/js/profile.js b/js/profile.js
index 39b40fc..2910c53 100644
--- a/js/profile.js
+++ b/js/profile.js
@@ -37,12 +37,14 @@ let currentFavoriteAlbums = [];
 const api = new MusicAPI(apiSettings);
 
 async function uploadImage(file) {
+    const formData = new FormData();
+    formData.append('file', file);
+
     try {
-        const formData = new FormData();
-        formData.append('file', file);
         const response = await fetch('/upload', { method: 'POST', body: formData });
         if (!response.ok) throw new Error(`Upload failed: ${response.status}`);
         const data = await response.json();
+        if (!data.success) throw new Error(data.error || 'Upload failed');
         return data.url;
     } catch (error) {
         console.error('Upload error:', error);

From 71ed8c7c1fbc7603d342bb939df45031b5f16cab Mon Sep 17 00:00:00 2001
From: JulienMaille <182520+JulienMaille@users.noreply.github.com>
Date: Sun, 8 Mar 2026 19:04:57 +0000
Subject: [PATCH 18/26] style: auto-fix linting issues

---
 index.html            | 679 ++++++++++++++++++++++--------------------
 styles.css            |   2 +-
 vite-plugin-upload.js |  22 +-
 3 files changed, 369 insertions(+), 334 deletions(-)

diff --git a/index.html b/index.html
index 15a4a67..c7d47ce 100644
--- a/index.html
+++ b/index.html
@@ -3876,7 +3876,9 @@
                                 <div class="setting-item">
                                     <div class="info">
                                         <span class="label">Compact Artists</span>
-                                        <span class="description">Show artist cards in a compact, horizontal layout</span>
+                                        <span class="description"
+                                            >Show artist cards in a compact, horizontal layout</span
+                                        >
                                     </div>
                                     <label class="toggle-switch">
                                         <input type="checkbox" id="compact-artist-toggle" />
@@ -3886,7 +3888,9 @@
                                 <div class="setting-item">
                                     <div class="info">
                                         <span class="label">Compact Albums</span>
-                                        <span class="description">Show album cards in a compact, horizontal layout</span>
+                                        <span class="description"
+                                            >Show album cards in a compact, horizontal layout</span
+                                        >
                                     </div>
                                     <label class="toggle-switch">
                                         <input type="checkbox" id="compact-album-toggle" />
@@ -4637,7 +4641,11 @@
                                             class="playback-speed-number-input"
                                         />
                                         <span class="playback-speed-unit">x</span>
-                                        <button id="playback-speed-reset" class="btn-secondary" title="Reset to default">
+                                        <button
+                                            id="playback-speed-reset"
+                                            class="btn-secondary"
+                                            title="Reset to default"
+                                        >
                                             Reset
                                         </button>
                                     </div>
@@ -4915,349 +4923,370 @@
                     </div>
                     <div class="settings-tab-content" id="settings-tab-downloads">
                         <div class="settings-list">
-                        <div class="settings-group">
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Zipped Bulk Downloads</span>
-                                    <span class="description"
-                                        >Download multiple tracks as a single ZIP file (requires browser support)</span
-                                    >
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="zipped-bulk-downloads-toggle" checked />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Download Lyrics</span>
-                                    <span class="description">Include .lrc files when downloading tracks/albums</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="download-lyrics-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Romaji Lyrics</span>
-                                    <span class="description"
-                                        >Convert Japanese lyrics to Romaji (Latin characters)</span
-                                    >
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="romaji-lyrics-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Download Quality</span>
-                                    <span class="description">Quality for track downloads</span>
-                                </div>
-                                <select id="download-quality-setting">
-                                    <option value="HI_RES_LOSSLESS">Hi-Res FLAC (24-bit)</option>
-                                    <option value="LOSSLESS">FLAC (Lossless)</option>
-                                    <option value="MP3_320">MP3 320kbps</option>
-                                    <option value="HIGH">AAC 320kbps</option>
-                                    <option value="LOW">AAC 96kbps</option>
-                                </select>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Lossless Container</span>
-                                    <span class="description">Container format for lossless downloads</span>
-                                </div>
-                                <select id="lossless-container-setting">
-                                    <option value="flac">FLAC</option>
-                                    <option value="alac">Apple Lossless</option>
-                                    <option value="nochange">Don't change</option>
-                                </select>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Cover Art Size</span>
-                                    <span class="description">Size for downloaded/embedded cover art</span>
-                                </div>
-                                <input
-                                    type="text"
-                                    id="cover-art-size-setting"
-                                    class="template-input"
-                                    style="width: 120px; text-align: right"
-                                    placeholder="1280x1280"
-                                />
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Filename Template</span>
-                                    <span class="description"
-                                        >Customize download filenames. Available: {trackNumber}, {artist}, {title},
-                                        {album}</span
-                                    >
-                                </div>
-                                <input
-                                    type="text"
-                                    id="filename-template"
-                                    class="template-input"
-                                    placeholder="{trackNumber} - {artist} - {title}"
-                                />
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">ZIP Folder Template</span>
-                                    <span class="description"
-                                        >Customize album folder names. Available: {albumTitle}, {albumArtist},
-                                        {year}</span
-                                    >
-                                </div>
-                                <input
-                                    type="text"
-                                    id="zip-folder-template"
-                                    class="template-input"
-                                    placeholder="{albumTitle} - {albumArtist} - monochrome.tf"
-                                />
-                            </div>
-                        </div>
-
-                        <div class="settings-group">
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Generate M3U</span>
-                                    <span class="description">Include M3U playlist files in downloads</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="generate-m3u-toggle" checked />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Generate M3U8</span>
-                                    <span class="description">Include extended M3U8 playlist files in downloads</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="generate-m3u8-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Generate CUE</span>
-                                    <span class="description"
-                                        >Include CUE sheets for gapless playback in downloads</span
-                                    >
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="generate-cue-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Generate NFO</span>
-                                    <span class="description">Include NFO files for media center compatibility</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="generate-nfo-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Generate JSON</span>
-                                    <span class="description">Include JSON files with rich metadata</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="generate-json-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                        </div>
-
-                        <div class="settings-group">
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Relative Paths</span>
-                                    <span class="description">Use relative paths in playlist files</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="relative-paths-toggle" checked />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Separate Discs in ZIP</span>
-                                    <span class="description"
-                                        >Put tracks in Disc folders when a release has multiple discs</span
-                                    >
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="separate-discs-zip-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="settings-tab-content" id="settings-tab-instances">
-                    <div class="settings-list">
-                        <div class="settings-group">
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">ADVANCED: Custom Database/Auth</span>
-                                    <span class="description">Configure custom PocketBase and Firebase instances</span>
-                                </div>
-                                <button id="custom-db-btn" class="btn-secondary">Configure</button>
-                            </div>
-                        </div>
-
-                        <div class="settings-group">
-                            <div id="api-instance-manager">
+                            <div class="settings-group">
                                 <div class="setting-item">
                                     <div class="info">
-                                        <span class="label">API Instances</span>
-                                        <span class="description">Manage and prioritize API instances.</span>
+                                        <span class="label">Zipped Bulk Downloads</span>
+                                        <span class="description"
+                                            >Download multiple tracks as a single ZIP file (requires browser
+                                            support)</span
+                                        >
                                     </div>
-                                    <button id="refresh-speed-test-btn" class="btn-secondary">
-                                        Refresh Instance List
-                                    </button>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="zipped-bulk-downloads-toggle" checked />
+                                        <span class="slider"></span>
+                                    </label>
                                 </div>
-                                <ul id="api-instance-list"></ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="settings-tab-content" id="settings-tab-system">
-                    <div class="settings-list">
-                        <div class="settings-group">
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Keyboard Shortcuts</span>
-                                    <span class="description">View and customize keyboard shortcuts</span>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Download Lyrics</span>
+                                        <span class="description"
+                                            >Include .lrc files when downloading tracks/albums</span
+                                        >
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="download-lyrics-toggle" />
+                                        <span class="slider"></span>
+                                    </label>
                                 </div>
-                                <button id="customize-shortcuts-btn" class="btn-secondary">Customize</button>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Cache</span>
-                                    <span class="description" id="cache-info"
-                                        >Stores API responses to reduce requests</span
-                                    >
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Romaji Lyrics</span>
+                                        <span class="description"
+                                            >Convert Japanese lyrics to Romaji (Latin characters)</span
+                                        >
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="romaji-lyrics-toggle" />
+                                        <span class="slider"></span>
+                                    </label>
                                 </div>
-                                <button id="clear-cache-btn" class="btn-secondary">Clear Cache</button>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Auto-Update App</span>
-                                    <span class="description"
-                                        >Automatically reload when a new version is available</span
-                                    >
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Download Quality</span>
+                                        <span class="description">Quality for track downloads</span>
+                                    </div>
+                                    <select id="download-quality-setting">
+                                        <option value="HI_RES_LOSSLESS">Hi-Res FLAC (24-bit)</option>
+                                        <option value="LOSSLESS">FLAC (Lossless)</option>
+                                        <option value="MP3_320">MP3 320kbps</option>
+                                        <option value="HIGH">AAC 320kbps</option>
+                                        <option value="LOW">AAC 96kbps</option>
+                                    </select>
                                 </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="pwa-auto-update-toggle" checked />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item" id="desktop-update-container" style="display: none">
-                                <div class="info">
-                                    <span class="label">Desktop Update</span>
-                                    <span class="description">Check for updates to the desktop application</span>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Lossless Container</span>
+                                        <span class="description">Container format for lossless downloads</span>
+                                    </div>
+                                    <select id="lossless-container-setting">
+                                        <option value="flac">FLAC</option>
+                                        <option value="alac">Apple Lossless</option>
+                                        <option value="nochange">Don't change</option>
+                                    </select>
                                 </div>
-                                <button id="check-desktop-updates-btn" class="btn-secondary">Check for Updates</button>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Analytics</span>
-                                    <span class="description">Send anonymous usage data to help improve the app</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="analytics-toggle" checked />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                        </div>
-
-                        <div class="settings-group">
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Reset Local Data</span>
-                                    <span class="description"
-                                        >Clear all local storage and cached data (does not affect cloud sync)</span
-                                    >
-                                </div>
-                                <button id="reset-local-data-btn" class="btn-secondary danger">Reset</button>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Clear Cloud Data</span>
-                                    <span class="description"
-                                        >Delete all your data from the cloud (cannot be undone)</span
-                                    >
-                                </div>
-                                <button id="firebase-clear-cloud-btn" class="btn-secondary danger">
-                                    Clear Cloud Data
-                                </button>
-                            </div>
-                        </div>
-
-                        <div class="settings-group">
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Backup & Restore</span>
-                                    <span class="description">Export or import your library and history as JSON</span>
-                                </div>
-                                <div style="display: flex; gap: 0.5rem">
-                                    <button id="export-library-btn" class="btn-secondary">Export</button>
-                                    <button id="import-library-btn" class="btn-secondary">Import</button>
-                                    <input type="file" id="import-library-input" style="display: none" accept=".json" />
-                                </div>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Export All Settings</span>
-                                    <span class="description">Export all app settings as JSON</span>
-                                </div>
-                                <div style="display: flex; gap: 0.5rem">
-                                    <button id="export-settings-btn" class="btn-secondary">Export</button>
-                                    <button id="import-settings-btn" class="btn-secondary">Import</button>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Cover Art Size</span>
+                                        <span class="description">Size for downloaded/embedded cover art</span>
+                                    </div>
                                     <input
-                                        type="file"
-                                        id="import-settings-input"
-                                        style="display: none"
-                                        accept=".json"
+                                        type="text"
+                                        id="cover-art-size-setting"
+                                        class="template-input"
+                                        style="width: 120px; text-align: right"
+                                        placeholder="1280x1280"
+                                    />
+                                </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Filename Template</span>
+                                        <span class="description"
+                                            >Customize download filenames. Available: {trackNumber}, {artist}, {title},
+                                            {album}</span
+                                        >
+                                    </div>
+                                    <input
+                                        type="text"
+                                        id="filename-template"
+                                        class="template-input"
+                                        placeholder="{trackNumber} - {artist} - {title}"
+                                    />
+                                </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">ZIP Folder Template</span>
+                                        <span class="description"
+                                            >Customize album folder names. Available: {albumTitle}, {albumArtist},
+                                            {year}</span
+                                        >
+                                    </div>
+                                    <input
+                                        type="text"
+                                        id="zip-folder-template"
+                                        class="template-input"
+                                        placeholder="{albumTitle} - {albumArtist} - monochrome.tf"
                                     />
                                 </div>
                             </div>
-                        </div>
 
-                        <div class="settings-group">
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Blocked Content</span>
-                                    <span class="description"
-                                        >Manage artists, albums, and tracks you've blocked from recommendations</span
-                                    >
+                            <div class="settings-group">
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Generate M3U</span>
+                                        <span class="description">Include M3U playlist files in downloads</span>
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="generate-m3u-toggle" checked />
+                                        <span class="slider"></span>
+                                    </label>
                                 </div>
-                                <div style="display: flex; gap: 0.5rem">
-                                    <button id="manage-blocked-btn" class="btn-secondary">Manage</button>
-                                    <button
-                                        id="clear-all-blocked-btn"
-                                        class="btn-secondary danger"
-                                        style="display: none"
-                                    >
-                                        Clear All
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Generate M3U8</span>
+                                        <span class="description"
+                                            >Include extended M3U8 playlist files in downloads</span
+                                        >
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="generate-m3u8-toggle" />
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Generate CUE</span>
+                                        <span class="description"
+                                            >Include CUE sheets for gapless playback in downloads</span
+                                        >
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="generate-cue-toggle" />
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Generate NFO</span>
+                                        <span class="description"
+                                            >Include NFO files for media center compatibility</span
+                                        >
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="generate-nfo-toggle" />
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Generate JSON</span>
+                                        <span class="description">Include JSON files with rich metadata</span>
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="generate-json-toggle" />
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="settings-group">
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Relative Paths</span>
+                                        <span class="description">Use relative paths in playlist files</span>
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="relative-paths-toggle" checked />
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Separate Discs in ZIP</span>
+                                        <span class="description"
+                                            >Put tracks in Disc folders when a release has multiple discs</span
+                                        >
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="separate-discs-zip-toggle" />
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="settings-tab-content" id="settings-tab-instances">
+                        <div class="settings-list">
+                            <div class="settings-group">
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">ADVANCED: Custom Database/Auth</span>
+                                        <span class="description"
+                                            >Configure custom PocketBase and Firebase instances</span
+                                        >
+                                    </div>
+                                    <button id="custom-db-btn" class="btn-secondary">Configure</button>
+                                </div>
+                            </div>
+
+                            <div class="settings-group">
+                                <div id="api-instance-manager">
+                                    <div class="setting-item">
+                                        <div class="info">
+                                            <span class="label">API Instances</span>
+                                            <span class="description">Manage and prioritize API instances.</span>
+                                        </div>
+                                        <button id="refresh-speed-test-btn" class="btn-secondary">
+                                            Refresh Instance List
+                                        </button>
+                                    </div>
+                                    <ul id="api-instance-list"></ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="settings-tab-content" id="settings-tab-system">
+                        <div class="settings-list">
+                            <div class="settings-group">
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Keyboard Shortcuts</span>
+                                        <span class="description">View and customize keyboard shortcuts</span>
+                                    </div>
+                                    <button id="customize-shortcuts-btn" class="btn-secondary">Customize</button>
+                                </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Cache</span>
+                                        <span class="description" id="cache-info"
+                                            >Stores API responses to reduce requests</span
+                                        >
+                                    </div>
+                                    <button id="clear-cache-btn" class="btn-secondary">Clear Cache</button>
+                                </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Auto-Update App</span>
+                                        <span class="description"
+                                            >Automatically reload when a new version is available</span
+                                        >
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="pwa-auto-update-toggle" checked />
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                                <div class="setting-item" id="desktop-update-container" style="display: none">
+                                    <div class="info">
+                                        <span class="label">Desktop Update</span>
+                                        <span class="description">Check for updates to the desktop application</span>
+                                    </div>
+                                    <button id="check-desktop-updates-btn" class="btn-secondary">
+                                        Check for Updates
                                     </button>
                                 </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Analytics</span>
+                                        <span class="description"
+                                            >Send anonymous usage data to help improve the app</span
+                                        >
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="analytics-toggle" checked />
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="settings-group">
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Reset Local Data</span>
+                                        <span class="description"
+                                            >Clear all local storage and cached data (does not affect cloud sync)</span
+                                        >
+                                    </div>
+                                    <button id="reset-local-data-btn" class="btn-secondary danger">Reset</button>
+                                </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Clear Cloud Data</span>
+                                        <span class="description"
+                                            >Delete all your data from the cloud (cannot be undone)</span
+                                        >
+                                    </div>
+                                    <button id="firebase-clear-cloud-btn" class="btn-secondary danger">
+                                        Clear Cloud Data
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div class="settings-group">
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Backup & Restore</span>
+                                        <span class="description"
+                                            >Export or import your library and history as JSON</span
+                                        >
+                                    </div>
+                                    <div style="display: flex; gap: 0.5rem">
+                                        <button id="export-library-btn" class="btn-secondary">Export</button>
+                                        <button id="import-library-btn" class="btn-secondary">Import</button>
+                                        <input
+                                            type="file"
+                                            id="import-library-input"
+                                            style="display: none"
+                                            accept=".json"
+                                        />
+                                    </div>
+                                </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Export All Settings</span>
+                                        <span class="description">Export all app settings as JSON</span>
+                                    </div>
+                                    <div style="display: flex; gap: 0.5rem">
+                                        <button id="export-settings-btn" class="btn-secondary">Export</button>
+                                        <button id="import-settings-btn" class="btn-secondary">Import</button>
+                                        <input
+                                            type="file"
+                                            id="import-settings-input"
+                                            style="display: none"
+                                            accept=".json"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="settings-group">
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Blocked Content</span>
+                                        <span class="description"
+                                            >Manage artists, albums, and tracks you've blocked from
+                                            recommendations</span
+                                        >
+                                    </div>
+                                    <div style="display: flex; gap: 0.5rem">
+                                        <button id="manage-blocked-btn" class="btn-secondary">Manage</button>
+                                        <button
+                                            id="clear-all-blocked-btn"
+                                            class="btn-secondary danger"
+                                            style="display: none"
+                                        >
+                                            Clear All
+                                        </button>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <div id="page-about" class="page">
+                <div id="page-about" class="page">
                     <h2 class="section-title" style="text-align: center">About Monochrome</h2>
                     <div class="about-content">
                         <p class="about-description">
diff --git a/styles.css b/styles.css
index a26c52f..adc1425 100644
--- a/styles.css
+++ b/styles.css
@@ -7646,7 +7646,7 @@ textarea:focus {
     left: 0;
     z-index: 0;
     mask-image: linear-gradient(to bottom, rgb(0, 0, 0, 1) 50%, rgb(0, 0, 0, 0));
-    -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0, 1) 50%, rgb(0, 0, 0, 0));
+    mask-image: linear-gradient(to bottom, rgb(0, 0, 0, 1) 50%, rgb(0, 0, 0, 0));
 }
 
 .profile-info-section {
diff --git a/vite-plugin-upload.js b/vite-plugin-upload.js
index 911d3b6..87c30bc 100644
--- a/vite-plugin-upload.js
+++ b/vite-plugin-upload.js
@@ -9,11 +9,11 @@ export default function uploadPlugin() {
     const handler = async (req, res, next) => {
         if (req.url === '/upload' && req.method === 'POST') {
             const form = formidable({});
-            
+
             try {
                 const [_fields, files] = await form.parse(req);
                 const uploadedFile = files.file?.[0];
-                
+
                 if (!uploadedFile) {
                     res.statusCode = 400;
                     res.end(JSON.stringify({ success: false, error: 'No file provided' }));
@@ -26,7 +26,7 @@ export default function uploadPlugin() {
                 let url;
 
                 if (useR2) {
-                    // We could implement R2 upload here too, but for simplicity in dev 
+                    // We could implement R2 upload here too, but for simplicity in dev
                     // we'll stick to catbox unless specifically requested to match R2 perfectly.
                     // However, to be helpful, let's at least mention it.
                     console.log('R2 upload detected in env, but dev plugin is using catbox fallback for now.');
@@ -35,7 +35,11 @@ export default function uploadPlugin() {
                 // Forward to catbox.moe (default production behavior when R2 is disabled)
                 const formData = new FormData();
                 formData.append('reqtype', 'fileupload');
-                formData.append('fileToUpload', new Blob([fileData], { type: uploadedFile.mimetype }), uploadedFile.originalFilename);
+                formData.append(
+                    'fileToUpload',
+                    new Blob([fileData], { type: uploadedFile.mimetype }),
+                    uploadedFile.originalFilename
+                );
 
                 const response = await fetch('https://catbox.moe/user/api.php', {
                     method: 'POST',
@@ -49,10 +53,12 @@ export default function uploadPlugin() {
                 }
 
                 res.setHeader('Content-Type', 'application/json');
-                res.end(JSON.stringify({
-                    success: true,
-                    url: url.trim(),
-                }));
+                res.end(
+                    JSON.stringify({
+                        success: true,
+                        url: url.trim(),
+                    })
+                );
             } catch (err) {
                 console.error('Local upload error:', err);
                 res.statusCode = 500;

From 133b3e4550233152f24474948de837bf9ee4f53e Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 8 Mar 2026 20:08:45 +0100
Subject: [PATCH 19/26] fix: resolve duplicate CSS selectors in styles.css

---
 styles.css | 29 -----------------------------
 1 file changed, 29 deletions(-)

diff --git a/styles.css b/styles.css
index adc1425..1249462 100644
--- a/styles.css
+++ b/styles.css
@@ -3732,10 +3732,6 @@ input:checked + .slider::before {
 }
 
 /* When UI is hidden, only toggle button stays visible at right edge (when .visible class is added) */
-#fullscreen-cover-overlay.ui-hidden #toggle-ui-btn {
-    opacity: 0;
-    pointer-events: none;
-}
 
 #fullscreen-cover-overlay.ui-hidden .fullscreen-lyrics-toggle,
 #fullscreen-cover-overlay.ui-hidden #close-fullscreen-cover-btn {
@@ -6918,31 +6914,6 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
     color: var(--primary-foreground);
 }
 
-/* Inputs & Form Elements */
-input,
-select,
-textarea {
-    transition:
-        border-color var(--transition-fast),
-        box-shadow var(--transition-fast),
-        background-color var(--transition-fast);
-}
-
-input:focus,
-select:focus,
-textarea:focus {
-    outline: none;
-    border-color: var(--ring);
-    box-shadow: 0 0 0 3px rgb(var(--highlight-rgb), 0.2);
-}
-
-.search-bar input:focus,
-.track-list-search-input:focus {
-    outline: none;
-    border-color: var(--ring);
-    box-shadow: 0 0 0 3px rgb(var(--highlight-rgb) / 0.2);
-}
-
 .modal.active .modal-content {
     animation: pop-in var(--transition-normal) var(--ease-out-back);
     box-shadow: var(--shadow-2xl);

From ec06fed5cf64e91cd05368f7162df529d1a664b6 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 8 Mar 2026 20:30:45 +0100
Subject: [PATCH 20/26] fix: restore Kawarp visualizer selection and fix
 settings visibility

---
 index.html     |  3 ++-
 js/settings.js | 12 ++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index c7d47ce..1647e43 100644
--- a/index.html
+++ b/index.html
@@ -3672,7 +3672,7 @@
                                 <div class="setting-item">
                                     <div class="info">
                                         <span class="label">Full-screen Visualizer</span>
-                                        <span class="description">Enable particle visualizer in full-screen mode</span>
+                                        <span class="description">Enable the visualizer in full-screen mode</span>
                                     </div>
                                     <label class="toggle-switch">
                                         <input type="checkbox" id="visualizer-enabled-toggle" checked />
@@ -3689,6 +3689,7 @@
                                         <option value="particles">Particles</option>
                                         <option value="unknown-pleasures">Unknown Pleasures</option>
                                         <option value="butterchurn">Butterchurn (Milkdrop)</option>
+                                        <option value="kawarp">Kawarp</option>
                                     </select>
                                 </div>
                                 <div class="setting-item" id="visualizer-mode-setting">
diff --git a/js/settings.js b/js/settings.js
index b9fcf4f..307d841 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -2310,20 +2310,20 @@ export function initializeSettings(scrobbler, player, api, ui) {
         updateButterchurnSettingsVisibility();
     }
 
-    // Watch for audio tab becoming active and refresh presets
-    const audioTabContent = document.getElementById('settings-tab-audio');
-    if (audioTabContent) {
+    // Watch for appearance tab becoming active and refresh presets
+    const appearanceTabContent = document.getElementById('settings-tab-appearance');
+    if (appearanceTabContent) {
         const observer = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-                    if (audioTabContent.classList.contains('active')) {
-                        console.log('[Settings] Audio tab became active, refreshing presets');
+                    if (appearanceTabContent.classList.contains('active')) {
+                        console.log('[Settings] Appearance tab became active, refreshing presets');
                         updateButterchurnSettingsVisibility();
                     }
                 }
             });
         });
-        observer.observe(audioTabContent, { attributes: true });
+        observer.observe(appearanceTabContent, { attributes: true });
     }
 
     // Visualizer Mode Select

From 3f138039f637895afc8e06939aedaac8dba5f25d Mon Sep 17 00:00:00 2001
From: JulienMaille <182520+JulienMaille@users.noreply.github.com>
Date: Sun, 8 Mar 2026 19:33:24 +0000
Subject: [PATCH 21/26] style: auto-fix linting issues

---
 styles.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/styles.css b/styles.css
index 1249462..d1449b1 100644
--- a/styles.css
+++ b/styles.css
@@ -7617,7 +7617,6 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
     left: 0;
     z-index: 0;
     mask-image: linear-gradient(to bottom, rgb(0, 0, 0, 1) 50%, rgb(0, 0, 0, 0));
-    mask-image: linear-gradient(to bottom, rgb(0, 0, 0, 1) 50%, rgb(0, 0, 0, 0));
 }
 
 .profile-info-section {

From 7dd8854ad160d4ca1b1dfe8a4350a9981faf9999 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 8 Mar 2026 20:36:40 +0100
Subject: [PATCH 22/26] UI: move lyrics panel close button to the right side

---
 js/lyrics.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/lyrics.js b/js/lyrics.js
index 922b2eb..8cdf87f 100644
--- a/js/lyrics.js
+++ b/js/lyrics.js
@@ -779,9 +779,6 @@ export function openLyricsPanel(track, audioPlayer, lyricsManager, forceOpen = f
         const offsetDisplay = manager.getOffsetDisplayString(manager.timingOffset);
 
         container.innerHTML = `
-            <button id="close-side-panel-btn" class="btn-icon" title="Close">
-                ${SVG_CLOSE}
-            </button>
             <div class="lyrics-timing-controls">
                 <button id="lyrics-timing-minus-btn" class="btn-icon" title="Decrease delay (lyrics earlier) -0.5s">
                     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -810,6 +807,9 @@ export function openLyricsPanel(track, audioPlayer, lyricsManager, forceOpen = f
             <button id="genius-toggle-btn" class="btn-icon ${isGeniusMode ? 'active-genius' : ''}" title="Genius Mode" style="${isGeniusMode ? 'color: #ffff64;' : ''}">
                 ${isGeniusMode ? SVG_GENIUS_ACTIVE : SVG_GENIUS_INACTIVE}
             </button>
+            <button id="close-side-panel-btn" class="btn-icon" title="Close">
+                ${SVG_CLOSE}
+            </button>
         `;
 
         container.querySelector('#close-side-panel-btn').addEventListener('click', () => {

From 4d938b5478a45d1818ac9388f824347ee8e2679c Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 8 Mar 2026 20:59:35 +0100
Subject: [PATCH 23/26] UI: show FFmpeg encoding progress in toaster

---
 js/api.js       |  2 +-
 js/downloads.js | 45 +++++++++++++++++++++++++++++++++++----------
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/js/api.js b/js/api.js
index e44f867..f523251 100644
--- a/js/api.js
+++ b/js/api.js
@@ -1216,7 +1216,7 @@ export class LosslessAPI {
                             if ((await getExtensionFromBlob(blob)) != 'flac') {
                                 blob = await ffmpeg(
                                     blob,
-                                    { args: ['-c:a', 'copy'] },
+                                    { args: ['-vn', '-map_metadata', '-1', '-map', '0:a', '-c:a', 'flac'] },
                                     'output.flac',
                                     'audio/flac',
                                     onProgress,
diff --git a/js/downloads.js b/js/downloads.js
index f3c16ce..00edae2 100644
--- a/js/downloads.js
+++ b/js/downloads.js
@@ -195,11 +195,21 @@ export function updateDownloadProgress(trackId, progress) {
         const percent = progress.totalBytes ? Math.round((progress.receivedBytes / progress.totalBytes) * 100) : 0;
 
         progressFill.style.width = `${percent}%`;
+        progressFill.style.background = 'var(--highlight)';
 
         const receivedMB = (progress.receivedBytes / (1024 * 1024)).toFixed(1);
         const totalMB = progress.totalBytes ? (progress.totalBytes / (1024 * 1024)).toFixed(1) : '?';
 
         statusEl.textContent = `Downloading: ${receivedMB}MB / ${totalMB}MB (${percent}%)`;
+    } else if (progress.stage === 'encoding') {
+        const percent = progress.progress ? Math.round(progress.progress) : 0;
+        progressFill.style.width = `${percent}%`;
+        progressFill.style.background = '#3b82f6'; // Blue for encoding
+        statusEl.textContent = `Converting: ${percent}%`;
+    } else if (progress.stage === 'finalizing' || progress.stage === 'processing') {
+        progressFill.style.width = '100%';
+        progressFill.style.background = '#3b82f6';
+        statusEl.textContent = progress.message || 'Processing...';
     }
 }
 
@@ -268,7 +278,7 @@ function removeBulkDownloadTask(notifEl) {
     }, 300);
 }
 
-async function downloadTrackBlob(track, quality, api, lyricsManager = null, signal = null) {
+async function downloadTrackBlob(track, quality, api, lyricsManager = null, signal = null, onProgress = null) {
     let enrichedTrack = {
         ...track,
         artist: track.artist || (track.artists && track.artists.length > 0 ? track.artists[0] : null),
@@ -343,7 +353,7 @@ async function downloadTrackBlob(track, quality, api, lyricsManager = null, sign
             // Fallback
             if (downloadQuality !== 'LOSSLESS') {
                 console.warn('Falling back to LOSSLESS (16-bit) download.');
-                return downloadTrackBlob(track, 'LOSSLESS', api, lyricsManager, signal);
+                return downloadTrackBlob(track, 'LOSSLESS', api, lyricsManager, signal, onProgress);
             }
             throw dashError;
         }
@@ -357,7 +367,7 @@ async function downloadTrackBlob(track, quality, api, lyricsManager = null, sign
 
     // Convert to MP3 320kbps if requested
     if (quality === 'MP3_320') {
-        blob = await encodeToMp3(blob, () => undefined, signal);
+        blob = await encodeToMp3(blob, onProgress || (() => undefined), signal);
     }
 
     if (quality.endsWith('LOSSLESS')) {
@@ -367,10 +377,10 @@ async function downloadTrackBlob(track, quality, api, lyricsManager = null, sign
                     if ((await getExtensionFromBlob(blob)) != 'flac') {
                         blob = await ffmpeg(
                             blob,
-                            { args: ['-c:a', 'copy'] },
+                            { args: ['-vn', '-map_metadata', '-1', '-map', '0:a', '-c:a', 'flac'] },
                             'output.flac',
                             'audio/flac',
-                            () => undefined,
+                            onProgress,
                             signal
                         );
                     }
@@ -381,7 +391,7 @@ async function downloadTrackBlob(track, quality, api, lyricsManager = null, sign
                         { args: ['-c:a', 'alac'] },
                         'output.m4a',
                         'audio/mp4',
-                        () => undefined,
+                        onProgress,
                         signal
                     );
                     break;
@@ -556,7 +566,9 @@ async function bulkDownloadToZipStream(
             updateBulkDownloadProgress(notification, i, tracks.length, trackTitle);
 
             try {
-                const { blob, extension } = await downloadTrackBlob(track, quality, api, null, signal);
+                const { blob, extension } = await downloadTrackBlob(track, quality, api, null, signal, (p) => {
+                    updateBulkDownloadProgress(notification, i, tracks.length, trackTitle, p);
+                });
                 const filename = buildTrackFilename(track, quality, extension);
                 const discNumber = discLayout.resolveDiscNumber(i);
                 yield {
@@ -698,7 +710,9 @@ async function bulkDownloadToZipBlob(
             updateBulkDownloadProgress(notification, i, tracks.length, trackTitle);
 
             try {
-                const { blob, extension } = await downloadTrackBlob(track, quality, api, null, signal);
+                const { blob, extension } = await downloadTrackBlob(track, quality, api, null, signal, (p) => {
+                    updateBulkDownloadProgress(notification, i, tracks.length, trackTitle, p);
+                });
                 const filename = buildTrackFilename(track, quality, extension);
                 const discNumber = discLayout.resolveDiscNumber(i);
                 yield {
@@ -841,7 +855,9 @@ async function bulkDownloadToZipNeutralino(
             updateBulkDownloadProgress(notification, i, tracks.length, trackTitle);
 
             try {
-                const { blob, extension } = await downloadTrackBlob(track, quality, api, null, signal);
+                const { blob, extension } = await downloadTrackBlob(track, quality, api, null, signal, (p) => {
+                    updateBulkDownloadProgress(notification, i, tracks.length, trackTitle, p);
+                });
                 const filename = buildTrackFilename(track, quality, extension);
                 const discNumber = discLayout.resolveDiscNumber(i);
                 yield {
@@ -1303,12 +1319,21 @@ function createBulkDownloadNotification(type, name, _totalItems) {
     return notifEl;
 }
 
-function updateBulkDownloadProgress(notifEl, current, total, currentItem) {
+function updateBulkDownloadProgress(notifEl, current, total, currentItem, ffmpegProgress = null) {
     const progressFill = notifEl.querySelector('.download-progress-fill');
     const statusEl = notifEl.querySelector('.download-status');
 
+    if (ffmpegProgress && (ffmpegProgress.stage === 'encoding' || ffmpegProgress.stage === 'finalizing')) {
+        const percent = ffmpegProgress.progress ? Math.round(ffmpegProgress.progress) : 100;
+        progressFill.style.width = `${percent}%`;
+        progressFill.style.background = '#3b82f6'; // Blue for encoding
+        statusEl.textContent = `Converting ${current}/${total}: ${percent}%`;
+        return;
+    }
+
     const percent = total > 0 ? Math.round((current / total) * 100) : 0;
     progressFill.style.width = `${percent}%`;
+    progressFill.style.background = 'var(--highlight)';
     statusEl.textContent = `${current}/${total} - ${currentItem}`;
 }
 

From 75d16e6ce47dfff5575bf3edc8969857628654e1 Mon Sep 17 00:00:00 2001
From: Samidy <samidy@proton.me>
Date: Mon, 9 Mar 2026 03:03:29 +0300
Subject: [PATCH 24/26] feat: music videos

---
 functions/album/[id].js    |   2 +-
 functions/playlist/[id].js |   2 +-
 functions/track/[id].js    |   2 +-
 index.html                 |  31 ++-
 js/accounts/pocketbase.js  |  17 +-
 js/api.js                  | 359 +++++++++++++++++-------
 js/app.js                  |   5 +-
 js/db.js                   |  39 ++-
 js/desktop/discord-rpc.js  |   2 +-
 js/events.js               | 118 +++++---
 js/hls-downloader.js       | 107 ++++++++
 js/music-api.js            |  29 +-
 js/player.js               | 195 +++++++------
 js/ui.js                   | 547 ++++++++++++++++++++++++-------------
 js/utils.js                |  27 +-
 styles.css                 | 155 ++++++++++-
 16 files changed, 1189 insertions(+), 448 deletions(-)
 create mode 100644 js/hls-downloader.js

diff --git a/functions/album/[id].js b/functions/album/[id].js
index 95f6fbf..8a5e2a9 100644
--- a/functions/album/[id].js
+++ b/functions/album/[id].js
@@ -84,7 +84,7 @@ class ServerAPI {
 
     getCoverUrl(id, size = '1280') {
         if (!id) return '';
-        const formattedId = id.replace(/-/g, '/');
+        const formattedId = String(id).replace(/-/g, '/');
         return `https://resources.tidal.com/images/${formattedId}/${size}x${size}.jpg`;
     }
 }
diff --git a/functions/playlist/[id].js b/functions/playlist/[id].js
index ae41d1a..c20a6ac 100644
--- a/functions/playlist/[id].js
+++ b/functions/playlist/[id].js
@@ -85,7 +85,7 @@ class ServerAPI {
 
     getCoverUrl(id, size = '1080') {
         if (!id) return '';
-        const formattedId = id.replace(/-/g, '/');
+        const formattedId = String(id).replace(/-/g, '/');
         return `https://resources.tidal.com/images/${formattedId}/${size}x${size}.jpg`;
     }
 }
diff --git a/functions/track/[id].js b/functions/track/[id].js
index fad3f21..e96fa94 100644
--- a/functions/track/[id].js
+++ b/functions/track/[id].js
@@ -98,7 +98,7 @@ class ServerAPI {
 
     getCoverUrl(id, size = '1280') {
         if (!id) return '';
-        const formattedId = id.replace(/-/g, '/');
+        const formattedId = String(id).replace(/-/g, '/');
         return `https://resources.tidal.com/images/${formattedId}/${size}x${size}.jpg`;
     }
 
diff --git a/index.html b/index.html
index fd69136..b711543 100644
--- a/index.html
+++ b/index.html
@@ -36,13 +36,13 @@
     </head>
 
     <body>
-        <audio id="audio-player" crossorigin="anonymous"></audio>
+        <video id="audio-player" crossorigin="anonymous" style="display: none"></video>
         <div id="context-menu">
             <ul>
                 <li data-action="shuffle-play-card" data-type-filter="album,playlist,mix,user-playlist">
                     Shuffle play
                 </li>
-                <li data-action="start-mix" data-type-filter="album,track">Start mix</li>
+                <li data-action="start-mix" data-type-filter="album,track,video">Start mix</li>
                 <li data-action="play-next">Play next</li>
                 <li data-action="add-to-queue">Add to queue</li>
                 <li
@@ -53,18 +53,20 @@
                     data-label-unlike-album="Remove album from library"
                     data-label-playlist="Save playlist to library"
                     data-label-unlike-playlist="Remove playlist from library"
+                    data-label-video="Like"
+                    data-label-unlike-video="Unlike"
                 >
                     Like
                 </li>
                 <li data-action="toggle-pin" data-type-filter="album,artist,playlist,user-playlist">Pin</li>
-                <li data-action="add-to-playlist" data-type-filter="track">Add to playlist</li>
-                <li data-action="go-to-artist" data-type-filter="track,album">Go to artist</li>
-                <li data-action="go-to-album" data-type-filter="track">Go to album</li>
+                <li data-action="add-to-playlist" data-type-filter="track,video">Add to playlist</li>
+                <li data-action="go-to-artist" data-type-filter="track,album,video">Go to artist</li>
+                <li data-action="go-to-album" data-type-filter="track,video">Go to album</li>
                 <li data-action="copy-link">Copy link</li>
                 <li data-action="open-in-new-tab">Open in new tab</li>
                 <li data-action="open-in-harmony" data-type-filter="album">Open in Harmony</li>
-                <li data-action="track-info" data-type-filter="track">Track info</li>
-                <li data-action="open-original-url" data-type-filter="track">Open original URL</li>
+                <li data-action="track-info" data-type-filter="track,video">Track info</li>
+                <li data-action="open-original-url" data-type-filter="track,video">Open original URL</li>
                 <li data-action="download">Download</li>
                 <li class="separator"></li>
                 <li
@@ -122,6 +124,7 @@
                 <div id="visualizer-container">
                     <canvas id="visualizer-canvas"></canvas>
                 </div>
+                <div id="fullscreen-video-container" style="display: none; position: absolute; inset: 0; width: 100%; height: 100%; justify-content: center; align-items: center; background: black; z-index: 0;"></div>
                 <button id="toggle-ui-btn" class="fullscreen-ui-toggle" title="Toggle UI">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -163,7 +166,9 @@
                         src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                         alt="Album Cover"
                     />
+
                     <div class="fullscreen-track-info">
+
                         <h2 id="fullscreen-track-title"></h2>
                         <h3 id="fullscreen-track-artist"></h3>
                         <div class="fullscreen-actions">
@@ -2358,6 +2363,7 @@
                     <h2 class="section-title" id="search-results-title">Search Results</h2>
                     <div class="search-tabs">
                         <button class="search-tab active" data-tab="tracks">Tracks</button>
+                        <button class="search-tab" data-tab="videos">Videos</button>
                         <button class="search-tab" data-tab="albums">Albums</button>
                         <button class="search-tab" data-tab="artists">Artists</button>
                         <button class="search-tab" data-tab="playlists">Playlists</button>
@@ -2365,6 +2371,9 @@
                     <div class="search-tab-content active" id="search-tab-tracks">
                         <div class="track-list" id="search-tracks-container"></div>
                     </div>
+                    <div class="search-tab-content" id="search-tab-videos">
+                        <div class="card-grid" id="search-videos-container"></div>
+                    </div>
                     <div class="search-tab-content" id="search-tab-albums">
                         <div class="card-grid" id="search-albums-container"></div>
                     </div>
@@ -2403,6 +2412,7 @@
                         <h2 class="section-title">Favorites</h2>
                         <div class="search-tabs">
                             <button class="search-tab active" data-tab="tracks">Liked Tracks</button>
+                            <button class="search-tab" data-tab="videos">Videos</button>
                             <button class="search-tab" data-tab="albums">Albums</button>
                             <button class="search-tab" data-tab="artists">Artists</button>
                             <button class="search-tab" data-tab="playlists">Playlists and Mixes</button>
@@ -2475,6 +2485,9 @@
                             </div>
                             <div class="track-list" id="library-tracks-container"></div>
                         </div>
+                        <div class="search-tab-content" id="library-tab-videos">
+                            <div class="card-grid" id="library-videos-container"></div>
+                        </div>
                         <div class="search-tab-content" id="library-tab-albums">
                             <div class="card-grid" id="library-albums-container"></div>
                         </div>
@@ -3177,6 +3190,10 @@
                         <h2 class="section-title">Albums</h2>
                         <div class="card-grid" id="artist-detail-albums"></div>
                     </section>
+                    <section class="content-section" id="artist-section-videos" style="display: none">
+                        <h2 class="section-title">Videos</h2>
+                        <div class="card-grid" id="artist-detail-videos"></div>
+                    </section>
                     <section class="content-section" id="artist-section-eps" style="display: none">
                         <h2 class="section-title">EPs and Singles</h2>
                         <div class="card-grid" id="artist-detail-eps"></div>
diff --git a/js/accounts/pocketbase.js b/js/accounts/pocketbase.js
index a8d4c30..3ebf554 100644
--- a/js/accounts/pocketbase.js
+++ b/js/accounts/pocketbase.js
@@ -200,6 +200,19 @@ const syncManager = {
             };
         }
 
+        if (type === 'video') {
+            return {
+                ...base,
+                type: 'video',
+                title: item.title || null,
+                duration: item.duration || null,
+                image: item.image || item.cover || null,
+                artist: item.artist || (item.artists && item.artists.length > 0 ? item.artists[0] : null) || null,
+                artists: item.artists?.map((a) => ({ id: a.id, name: a.name || null })) || [],
+                album: item.album || { title: 'Video', cover: item.image || item.cover },
+            };
+        }
+
         if (type === 'album') {
             return {
                 ...base,
@@ -280,7 +293,7 @@ const syncManager = {
                 id: playlist.id,
                 name: playlist.name,
                 cover: playlist.cover || null,
-                tracks: playlist.tracks ? playlist.tracks.map((t) => this._minifyItem('track', t)) : [],
+                tracks: playlist.tracks ? playlist.tracks.map((t) => this._minifyItem(t.type || 'track', t)) : [],
                 createdAt: playlist.createdAt || Date.now(),
                 updatedAt: playlist.updatedAt || Date.now(),
                 numberOfTracks: playlist.tracks ? playlist.tracks.length : 0,
@@ -572,7 +585,7 @@ const syncManager = {
                                 id: playlist.id,
                                 name: playlist.name,
                                 cover: playlist.cover || null,
-                                tracks: playlist.tracks ? playlist.tracks.map((t) => this._minifyItem('track', t)) : [],
+                                tracks: playlist.tracks ? playlist.tracks.map((t) => this._minifyItem(t.type || 'track', t)) : [],
                                 createdAt: playlist.createdAt || Date.now(),
                                 updatedAt: playlist.updatedAt || Date.now(),
                                 numberOfTracks: playlist.tracks ? playlist.tracks.length : 0,
diff --git a/js/api.js b/js/api.js
index e44f867..254d8a1 100644
--- a/js/api.js
+++ b/js/api.js
@@ -10,6 +10,7 @@ import { trackDateSettings, losslessContainerSettings } from './storage.js';
 import { APICache } from './cache.js';
 import { addMetadataToAudio } from './metadata.js';
 import { DashDownloader } from './dash-downloader.js';
+import { HlsDownloader } from './hls-downloader.js';
 import { encodeToMp3, MP3EncodingError } from './mp3-encoder.js';
 import { ffmpeg } from './ffmpeg.js';
 
@@ -59,6 +60,18 @@ export class LosslessAPI {
             }
         }
 
+        if (options.allowedDomains) {
+            instances = instances.filter((instance) => {
+                const url = typeof instance === 'string' ? instance : instance.url;
+                return options.allowedDomains.some((domain) => url.includes(domain));
+            });
+            if (instances.length === 0) {
+                throw new Error(
+                    `No API instances configured for type: ${type} matching allowedDomains: ${options.allowedDomains.join(', ')}`
+                );
+            }
+        }
+
         const maxTotalAttempts = instances.length * 2; // Allow some retries across instances
         let lastError = null;
         let instanceIndex = Math.floor(Math.random() * instances.length);
@@ -156,8 +169,15 @@ export class LosslessAPI {
     prepareTrack(track) {
         let normalized = track;
 
+        if (track.type && typeof track.type === 'string') {
+            const lowType = track.type.toLowerCase();
+            if (lowType === 'video' || lowType === 'track') {
+                normalized = { ...track, type: lowType };
+            }
+        }
+
         if (!track.artist && Array.isArray(track.artists) && track.artists.length > 0) {
-            normalized = { ...track, artist: track.artists[0] };
+            normalized = { ...normalized, artist: track.artists[0] };
         }
 
         const derivedQuality = deriveTrackQuality(normalized);
@@ -181,6 +201,16 @@ export class LosslessAPI {
         return playlist;
     }
 
+    prepareVideo(video) {
+        let normalized = { ...video, type: 'video' };
+
+        if (!video.artist && Array.isArray(video.artists) && video.artists.length > 0) {
+            normalized.artist = video.artists[0];
+        }
+
+        return normalized;
+    }
+
     prepareArtist(artist) {
         if (!artist.type && Array.isArray(artist.artistTypes) && artist.artistTypes.length > 0) {
             return { ...artist, type: artist.artistTypes[0] };
@@ -264,8 +294,22 @@ export class LosslessAPI {
     }
 
     extractStreamUrlFromManifest(manifest) {
+        if (!manifest) return null;
+
         try {
-            const decoded = atob(manifest);
+            let decoded;
+            if (typeof manifest === 'string') {
+                try {
+                    decoded = atob(manifest);
+                } catch {
+                    decoded = manifest;
+                }
+            } else if (typeof manifest === 'object') {
+                if (manifest.urls?.[0]) return manifest.urls[0];
+                return null;
+            } else {
+                return null;
+            }
 
             // Check if it's a DASH manifest (XML)
             if (decoded.includes('<MPD')) {
@@ -414,6 +458,53 @@ export class LosslessAPI {
         }
     }
 
+    async searchVideos(query, options = {}) {
+        const cached = await this.cache.get('search_videos', query);
+        if (cached) return cached;
+
+        try {
+            const response = await this.fetchWithRetry(`/search/?v=${encodeURIComponent(query)}`, {
+                ...options,
+                allowedDomains: ['api.monochrome.tf', 'arran.monochrome.tf'],
+            });
+            const data = await response.json();
+            const normalized = this.normalizeSearchResponse(data, 'videos');
+            const result = {
+                ...normalized,
+                items: normalized.items.map((v) => this.prepareVideo(v)),
+            };
+
+            await this.cache.set('search_videos', query, result);
+            return result;
+        } catch (error) {
+            if (error.name === 'AbortError') throw error;
+            console.error('Video search failed:', error);
+            return { items: [], limit: 0, offset: 0, totalNumberOfItems: 0 };
+        }
+    }
+
+    async getVideo(id) {
+        const cached = await this.cache.get('video', id);
+        if (cached) return cached;
+
+        const response = await this.fetchWithRetry(`/video/?id=${id}`, {
+            type: 'streaming',
+            allowedDomains: ['api.monochrome.tf', 'arran.monochrome.tf'],
+        });
+        const jsonResponse = await response.json();
+
+        const data = jsonResponse.data || jsonResponse;
+
+        const result = {
+            track: data,
+            info: data,
+            originalTrackUrl: data.OriginalTrackUrl || null,
+        };
+
+        await this.cache.set('video', id, result);
+        return result;
+    }
+
     async getAlbum(id) {
         const cached = await this.cache.get('album', id);
         if (cached) return cached;
@@ -769,9 +860,11 @@ export class LosslessAPI {
 
         const albumMap = new Map();
         const trackMap = new Map();
+        const videoMap = new Map();
 
         const isTrack = (v) => v?.id && v.duration && v.album;
         const isAlbum = (v) => v?.id && 'numberOfTracks' in v;
+        const isVideo = (v) => v?.id && v.type === 'VIDEO';
 
         const scan = (value, visited = new Set()) => {
             if (!value || typeof value !== 'object' || visited.has(value)) return;
@@ -785,6 +878,7 @@ export class LosslessAPI {
             const item = value.item || value;
             if (isAlbum(item)) albumMap.set(item.id, this.prepareAlbum(item));
             if (isTrack(item)) trackMap.set(item.id, this.prepareTrack(item));
+            if (isVideo(item)) videoMap.set(item.id, this.prepareVideo(item));
 
             Object.values(value).forEach((nested) => scan(nested, visited));
         };
@@ -792,25 +886,23 @@ export class LosslessAPI {
         entries.forEach((entry) => scan(entry));
 
         if (!options.lightweight) {
-            // Attempt to find more albums/EPs via search since the direct feed might be limited
             try {
-                const searchResults = await this.searchAlbums(artist.name);
-                if (searchResults && searchResults.items) {
+                const videoSearch = await this.searchVideos(artist.name);
+                if (videoSearch && videoSearch.items) {
                     const numericArtistId = Number(artistId);
-
-                    for (const item of searchResults.items) {
+                    for (const item of videoSearch.items) {
                         const itemArtistId = item.artist?.id;
-                        const matchesArtist =
-                            itemArtistId === numericArtistId ||
-                            (Array.isArray(item.artists) && item.artists.some((a) => a.id === numericArtistId));
-
-                        if (matchesArtist && !albumMap.has(item.id)) {
-                            albumMap.set(item.id, item);
+                        const matchesArtist = 
+                            itemArtistId === numericArtistId || 
+                            (Array.isArray(item.artists) && item.artists.some(a => a.id === numericArtistId));
+                        
+                        if (matchesArtist && !videoMap.has(item.id)) {
+                            videoMap.set(item.id, item);
                         }
                     }
                 }
             } catch (e) {
-                console.warn('Failed to fetch additional albums via search:', e);
+                console.warn('Failed to fetch additional videos via search:', e);
             }
         }
 
@@ -826,10 +918,13 @@ export class LosslessAPI {
             .sort((a, b) => (b.popularity || 0) - (a.popularity || 0))
             .slice(0, 15);
 
+        const videos = Array.from(videoMap.values())
+            .sort((a, b) => new Date(b.releaseDate || 0) - new Date(a.releaseDate || 0));
+
         // Enrich tracks with album release dates
         const tracks = options.lightweight ? topTracks : await this.enrichTracksWithAlbumDates(topTracks);
 
-        const result = { ...artist, albums, eps, tracks };
+        const result = { ...artist, albums, eps, tracks, videos };
 
         await this.cache.set('artist', cacheKey, result);
         return result;
@@ -1108,21 +1203,93 @@ export class LosslessAPI {
         return streamUrl;
     }
 
+    async getVideoStreamUrl(id) {
+        const cacheKey = `video_stream_${id}`;
+
+        if (this.streamCache.has(cacheKey)) {
+            return this.streamCache.get(cacheKey);
+        }
+
+        const lookup = await this.getVideo(id);
+
+        let streamUrl;
+
+        const findValue = (obj, key) => {
+            if (!obj || typeof obj !== 'object') return null;
+            if (obj[key]) return obj[key];
+            for (const v of Object.values(obj)) {
+                if (v && typeof v === 'object') {
+                    const f = findValue(v, key);
+                    if (f) return f;
+                }
+            }
+            return null;
+        };
+
+        const manifest = findValue(lookup, 'manifest') || findValue(lookup, 'Manifest');
+        if (manifest) {
+            streamUrl = this.extractStreamUrlFromManifest(manifest);
+        }
+
+        if (!streamUrl) {
+            streamUrl =
+                findValue(lookup, 'OriginalTrackUrl') ||
+                findValue(lookup, 'originalTrackUrl') ||
+                findValue(lookup, 'url') ||
+                findValue(lookup, 'streamUrl') ||
+                findValue(lookup, 'manifestUrl');
+        }
+
+        if (!streamUrl) {
+            throw new Error(`Could not resolve video stream URL for ID: ${id}`);
+        }
+
+        this.streamCache.set(cacheKey, streamUrl);
+        return streamUrl;
+    }
+
     async downloadTrack(id, quality = 'HI_RES_LOSSLESS', filename, options = {}) {
         const { onProgress, track } = options;
+        const isVideo = track?.type === 'video';
 
         try {
             // MP3_320 is not a native TIDAL quality, we download LOSSLESS and convert
             const downloadQuality = quality === 'MP3_320' ? 'LOSSLESS' : quality;
 
-            const lookup = await this.getTrack(id, downloadQuality);
+            let lookup;
+            if (isVideo) {
+                lookup = await this.getVideo(id);
+            } else {
+                lookup = await this.getTrack(id, downloadQuality);
+            }
+
             let streamUrl;
             let blob;
 
             if (lookup.originalTrackUrl) {
                 streamUrl = lookup.originalTrackUrl;
             } else {
-                streamUrl = this.extractStreamUrlFromManifest(lookup.info.manifest);
+                const findValue = (obj, key) => {
+                    if (!obj || typeof obj !== 'object') return null;
+                    if (obj[key]) return obj[key];
+                    for (const v of Object.values(obj)) {
+                        if (v && typeof v === 'object') {
+                            const f = findValue(v, key);
+                            if (f) return f;
+                        }
+                    }
+                    return null;
+                };
+
+                const manifest = isVideo 
+                    ? (findValue(lookup, 'manifest') || findValue(lookup, 'Manifest'))
+                    : lookup.info?.manifest;
+
+                if (!manifest) {
+                    throw new Error('Could not resolve manifest');
+                }
+
+                streamUrl = this.extractStreamUrlFromManifest(manifest);
                 if (!streamUrl) {
                     throw new Error('Could not resolve stream URL');
                 }
@@ -1138,6 +1305,8 @@ export class LosslessAPI {
                     });
                 } catch (dashError) {
                     console.error('DASH download failed:', dashError);
+                    if (isVideo) throw dashError;
+
                     // Fallback to LOSSLESS if DASH fails, but not if we're already downloading LOSSLESS
                     if (downloadQuality !== 'LOSSLESS') {
                         console.warn('Falling back to LOSSLESS (16-bit) download.');
@@ -1145,8 +1314,18 @@ export class LosslessAPI {
                     }
                     throw dashError;
                 }
-            } else {
-                const response = await fetch(streamUrl, {
+            } else if (streamUrl.includes('.m3u8') || streamUrl.includes('application/vnd.apple.mpegurl')) {
+                try {
+                    const downloader = new HlsDownloader();
+                    blob = await downloader.downloadHlsStream(streamUrl, {
+                        signal: options.signal,
+                        onProgress: options.onProgress,
+                    });
+                } catch (hlsError) {
+                    console.error('HLS download failed:', hlsError);
+                    throw hlsError;
+                }
+            } else {                const response = await fetch(streamUrl, {
                     cache: 'no-store',
                     signal: options.signal,
                 });
@@ -1155,7 +1334,6 @@ export class LosslessAPI {
                     throw new Error(`Fetch failed: ${response.status}`);
                 }
 
-                // ... (standard handling for Content-Length and body reader)
                 const contentLength = response.headers.get('Content-Length');
                 const totalBytes = contentLength ? parseInt(contentLength, 10) : 0;
 
@@ -1181,7 +1359,8 @@ export class LosslessAPI {
                         }
                     }
 
-                    blob = new Blob(chunks, { type: response.headers.get('Content-Type') || 'audio/flac' });
+                    const defaultMime = isVideo ? 'video/mp4' : 'audio/flac';
+                    blob = new Blob(chunks, { type: response.headers.get('Content-Type') || defaultMime });
                 } else {
                     blob = await response.blob();
                     if (onProgress) {
@@ -1194,78 +1373,80 @@ export class LosslessAPI {
                 }
             }
 
-            // Convert to MP3 320kbps if requested
-            if (quality === 'MP3_320') {
-                try {
-                    blob = await encodeToMp3(blob, onProgress, options.signal);
-                } catch (encodingError) {
-                    if (onProgress) {
-                        onProgress({
-                            stage: 'error',
-                            message: `Encoding failed: ${encodingError.message}`,
-                        });
+            if (!isVideo) {
+                // Convert to MP3 320kbps if requested
+                if (quality === 'MP3_320') {
+                    try {
+                        blob = await encodeToMp3(blob, onProgress, options.signal);
+                    } catch (encodingError) {
+                        if (onProgress) {
+                            onProgress({
+                                stage: 'error',
+                                message: `Encoding failed: ${encodingError.message}`,
+                            });
+                        }
+                        throw encodingError;
                     }
-                    throw encodingError;
                 }
-            }
 
-            if (quality.endsWith('LOSSLESS')) {
-                try {
-                    switch (losslessContainerSettings.getContainer()) {
-                        case 'flac':
-                            if ((await getExtensionFromBlob(blob)) != 'flac') {
+                if (quality.endsWith('LOSSLESS')) {
+                    try {
+                        switch (losslessContainerSettings.getContainer()) {
+                            case 'flac':
+                                if ((await getExtensionFromBlob(blob)) != 'flac') {
+                                    blob = await ffmpeg(
+                                        blob,
+                                        { args: ['-c:a', 'copy'] },
+                                        'output.flac',
+                                        'audio/flac',
+                                        onProgress,
+                                        options.signal
+                                    );
+                                }
+                                break;
+                            case 'alac':
                                 blob = await ffmpeg(
                                     blob,
-                                    { args: ['-c:a', 'copy'] },
-                                    'output.flac',
-                                    'audio/flac',
+                                    { args: ['-c:a', 'alac'] },
+                                    'output.m4a',
+                                    'audio/mp4',
                                     onProgress,
                                     options.signal
                                 );
-                            }
-                            break;
-                        case 'alac':
-                            blob = await ffmpeg(
-                                blob,
-                                { args: ['-c:a', 'alac'] },
-                                'output.m4a',
-                                'audio/mp4',
-                                onProgress,
-                                options.signal
-                            );
-                            break;
-                        default:
-                            break;
+                                break;
+                            default:
+                                break;
+                        }
+                    } catch (error) {
+                        if (error?.name === 'AbortError') {
+                            throw error;
+                        }
+
+                        console.error('Lossless container conversion failed:', error);
                     }
-                } catch (error) {
-                    if (error?.name === 'AbortError') {
-                        throw error;
+                }
+
+                // Add metadata if track information is provided
+                if (track) {
+                    if (onProgress) {
+                        onProgress({
+                            stage: 'processing',
+                            message: 'Adding metadata...',
+                        });
                     }
 
-                    console.error('Lossless container conversion failed:', error);
-                }
-            }
+                    const enrichedTrack = { ...track };
+                    if (lookup.info) {
+                        enrichedTrack.replayGain = {
+                            trackReplayGain: lookup.info.trackReplayGain,
+                            trackPeakAmplitude: lookup.info.trackPeakAmplitude,
+                            albumReplayGain: lookup.info.albumReplayGain,
+                            albumPeakAmplitude: lookup.info.albumPeakAmplitude,
+                        };
+                    }
 
-            // Add metadata if track information is provided
-            if (track) {
-                if (onProgress) {
-                    onProgress({
-                        stage: 'processing',
-                        message: 'Adding metadata...',
-                    });
+                    blob = await addMetadataToAudio(blob, enrichedTrack, this, quality);
                 }
-
-                const enrichedTrack = { ...track };
-                if (lookup.info) {
-                    enrichedTrack.replayGain = {
-                        trackReplayGain: lookup.info.trackReplayGain,
-                        trackPeakAmplitude: lookup.info.trackPeakAmplitude,
-                        albumReplayGain: lookup.info.albumReplayGain,
-                        albumPeakAmplitude: lookup.info.albumPeakAmplitude,
-                    };
-                }
-
-                blob = await addMetadataToAudio(blob, enrichedTrack, this, quality);
             }
 
             // Detect actual format and fix filename extension if needed
@@ -1279,6 +1460,7 @@ export class LosslessAPI {
             }
 
             this.triggerDownload(blob, finalFilename);
+            return blob;
         } catch (error) {
             if (error.name === 'AbortError') {
                 throw error;
@@ -1314,23 +1496,10 @@ export class LosslessAPI {
             return id;
         }
 
-        const formattedId = id.replace(/-/g, '/');
+        const formattedId = String(id).replace(/-/g, '/');
         return `https://resources.tidal.com/images/${formattedId}/${size}x${size}.jpg`;
     }
 
-    getVideoCoverUrl(id, size = '1280') {
-        if (!id) {
-            return null;
-        }
-
-        const parts = id.split('-');
-        if (parts.length !== 5) {
-            return null;
-        }
-
-        return `https://resources.tidal.com/videos/${parts[0]}/${parts[1]}/${parts[2]}/${parts[3]}/${parts[4]}/${size}x${size}.mp4`;
-    }
-
     getArtistPictureUrl(id, size = '320') {
         if (!id) {
             return `https://picsum.photos/seed/${Math.random()}/${size}`;
@@ -1340,7 +1509,7 @@ export class LosslessAPI {
             return id;
         }
 
-        const formattedId = id.replace(/-/g, '/');
+        const formattedId = String(id).replace(/-/g, '/');
         return `https://resources.tidal.com/images/${formattedId}/${size}x${size}.jpg`;
     }
 
diff --git a/js/app.js b/js/app.js
index 7126174..2033105 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1960,20 +1960,23 @@ document.addEventListener('DOMContentLoaded', async () => {
 
             db.getPlaylist(playlistId).then(async (playlist) => {
                 let trackId = null;
+                let trackType = null;
 
                 // Prefer ID if available (from sorted view)
                 if (btn.dataset.trackId) {
                     trackId = btn.dataset.trackId;
+                    trackType = btn.dataset.type || 'track';
                 } else if (btn.dataset.trackIndex) {
                     // Fallback to index (legacy/unsorted)
                     const index = parseInt(btn.dataset.trackIndex);
                     if (playlist && playlist.tracks[index]) {
                         trackId = playlist.tracks[index].id;
+                        trackType = playlist.tracks[index].type || 'track';
                     }
                 }
 
                 if (trackId) {
-                    const updatedPlaylist = await db.removeTrackFromPlaylist(playlistId, trackId);
+                    const updatedPlaylist = await db.removeTrackFromPlaylist(playlistId, trackId, trackType);
                     syncManager.syncUserPlaylist(updatedPlaylist, 'update');
                     const scrollTop = document.querySelector('.main-content').scrollTop;
                     await ui.renderPlaylistPage(playlistId, 'user');
diff --git a/js/db.js b/js/db.js
index eab226a..643328f 100644
--- a/js/db.js
+++ b/js/db.js
@@ -1,7 +1,7 @@
 export class MusicDatabase {
     constructor() {
         this.dbName = 'MonochromeDB';
-        this.version = 8;
+        this.version = 9;
         this.db = null;
     }
 
@@ -29,6 +29,10 @@ export class MusicDatabase {
                     const store = db.createObjectStore('favorites_tracks', { keyPath: 'id' });
                     store.createIndex('addedAt', 'addedAt', { unique: false });
                 }
+                if (!db.objectStoreNames.contains('favorites_videos')) {
+                    const store = db.createObjectStore('favorites_videos', { keyPath: 'id' });
+                    store.createIndex('addedAt', 'addedAt', { unique: false });
+                }
                 if (!db.objectStoreNames.contains('favorites_albums')) {
                     const store = db.createObjectStore('favorites_albums', { keyPath: 'id' });
                     store.createIndex('addedAt', 'addedAt', { unique: false });
@@ -88,7 +92,7 @@ export class MusicDatabase {
     // History API
     async addToHistory(track) {
         const storeName = 'history_tracks';
-        const minified = this._minifyItem('track', track);
+        const minified = this._minifyItem(track.type || 'track', track);
         const timestamp = Date.now();
         const entry = { ...minified, timestamp };
 
@@ -209,6 +213,7 @@ export class MusicDatabase {
 
     _minifyItem(type, item) {
         if (!item) return item;
+        const normalizedType = (type || '').toLowerCase();
 
         // Base properties to keep
         const base = {
@@ -216,7 +221,7 @@ export class MusicDatabase {
             addedAt: item.addedAt || null,
         };
 
-        if (type === 'track') {
+        if (normalizedType === 'track') {
             return {
                 ...base,
                 title: item.title || null,
@@ -256,6 +261,19 @@ export class MusicDatabase {
             };
         }
 
+        if (normalizedType === 'video') {
+            return {
+                ...base,
+                type: 'video',
+                title: item.title || null,
+                duration: item.duration || null,
+                image: item.image || item.cover || null,
+                artist: item.artist || (item.artists && item.artists.length > 0 ? item.artists[0] : null) || null,
+                artists: item.artists?.map((a) => ({ id: a.id, name: a.name || null })) || [],
+                album: item.album || { title: 'Video', cover: item.image || item.cover },
+            };
+        }
+
         if (type === 'album') {
             return {
                 ...base,
@@ -548,7 +566,7 @@ export class MusicDatabase {
         const playlist = {
             id: id,
             name: name,
-            tracks: tracks.map((t) => this._minifyItem('track', { ...t, addedAt: Date.now() })),
+            tracks: tracks.map((t) => this._minifyItem(t.type || 'track', { ...t, addedAt: Date.now() })),
             cover: cover,
             description: description,
             createdAt: Date.now(),
@@ -570,7 +588,7 @@ export class MusicDatabase {
         if (!playlist) throw new Error('Playlist not found');
         playlist.tracks = playlist.tracks || [];
         const trackWithDate = { ...track, addedAt: Date.now() };
-        const minifiedTrack = this._minifyItem('track', trackWithDate);
+        const minifiedTrack = this._minifyItem(track.type || 'track', trackWithDate);
         if (playlist.tracks.some((t) => t.id === track.id)) return;
         playlist.tracks.push(minifiedTrack);
         playlist.updatedAt = Date.now();
@@ -591,7 +609,7 @@ export class MusicDatabase {
         for (const track of tracks) {
             if (!playlist.tracks.some((t) => t.id === track.id)) {
                 const trackWithDate = { ...track, addedAt: Date.now() };
-                playlist.tracks.push(this._minifyItem('track', trackWithDate));
+                playlist.tracks.push(this._minifyItem(track.type || 'track', trackWithDate));
                 addedCount++;
             }
         }
@@ -606,11 +624,16 @@ export class MusicDatabase {
         return playlist;
     }
 
-    async removeTrackFromPlaylist(playlistId, trackId) {
+    async removeTrackFromPlaylist(playlistId, trackId, trackType = null) {
         const playlist = await this.performTransaction('user_playlists', 'readonly', (store) => store.get(playlistId));
         if (!playlist) throw new Error('Playlist not found');
         playlist.tracks = playlist.tracks || [];
-        playlist.tracks = playlist.tracks.filter((t) => t.id != trackId);
+        playlist.tracks = playlist.tracks.filter((t) => {
+            if (trackType) {
+                return !(t.id == trackId && (t.type || 'track') === trackType);
+            }
+            return t.id != trackId;
+        });
         playlist.updatedAt = Date.now();
         this._updatePlaylistMetadata(playlist);
         await this.performTransaction('user_playlists', 'readwrite', (store) => store.put(playlist));
diff --git a/js/desktop/discord-rpc.js b/js/desktop/discord-rpc.js
index 40c8d3f..a1d8c6f 100644
--- a/js/desktop/discord-rpc.js
+++ b/js/desktop/discord-rpc.js
@@ -9,7 +9,7 @@ export function initializeDiscordRPC(player) {
 
         let coverUrl = 'monochrome';
         if (track.album?.cover) {
-            const coverId = track.album.cover.replace(/-/g, '/');
+            const coverId = String(track.album.cover).replace(/-/g, '/');
             coverUrl = `https://resources.tidal.com/images/${coverId}/320x320.jpg`;
         }
 
diff --git a/js/events.js b/js/events.js
index 04fbab2..e471147 100644
--- a/js/events.js
+++ b/js/events.js
@@ -50,6 +50,7 @@ import {
     trackSetSleepTimer,
     trackCancelSleepTimer,
     trackStartMix,
+    trackEvent,
 } from './analytics.js';
 
 let currentTrackIdForWaveform = null;
@@ -952,11 +953,13 @@ export async function handleTrackAction(
         // Track like/unlike
         if (added) {
             if (type === 'track') trackLikeTrack(item);
+            else if (type === 'video') trackEvent('Like Video', { title: item.title });
             else if (type === 'album') trackLikeAlbum(item);
             else if (type === 'artist') trackLikeArtist(item);
             else if (type === 'playlist' || type === 'user-playlist') trackLikePlaylist(item);
         } else {
             if (type === 'track') trackUnlikeTrack(item);
+            else if (type === 'video') trackEvent('Unlike Video', { title: item.title });
             else if (type === 'album') trackUnlikeAlbum(item);
             else if (type === 'artist') trackUnlikeArtist(item);
             else if (type === 'playlist' || type === 'user-playlist') trackUnlikePlaylist(item);
@@ -976,7 +979,9 @@ export async function handleTrackAction(
         const selector =
             type === 'track'
                 ? `[data-track-id="${id}"] .like-btn`
-                : `.card[data-${type}-id="${id}"] .like-btn, .card[data-playlist-id="${id}"] .like-btn`;
+                : type === 'video'
+                  ? `.card[data-video-id="${id}"] .like-btn`
+                  : `.card[data-${type}-id="${id}"] .like-btn, .card[data-playlist-id="${id}"] .like-btn`;
 
         // Also check header buttons
         const headerBtn = document.getElementById(`like-${type}-btn`);
@@ -985,12 +990,12 @@ export async function handleTrackAction(
         if (headerBtn) elementsToUpdate.push(headerBtn);
 
         const nowPlayingLikeBtn = document.getElementById('now-playing-like-btn');
-        if (nowPlayingLikeBtn && type === 'track' && player?.currentTrack?.id === item.id) {
+        if (nowPlayingLikeBtn && (type === 'track' || type === 'video') && player?.currentTrack?.id === item.id) {
             elementsToUpdate.push(nowPlayingLikeBtn);
         }
 
         const fsLikeBtn = document.getElementById('fs-like-btn');
-        if (fsLikeBtn && type === 'track' && player?.currentTrack?.id === item.id) {
+        if (fsLikeBtn && (type === 'track' || type === 'video') && player?.currentTrack?.id === item.id) {
             elementsToUpdate.push(fsLikeBtn);
         }
 
@@ -1011,7 +1016,9 @@ export async function handleTrackAction(
             const itemSelector =
                 type === 'track'
                     ? `.track-item[data-track-id="${id}"]`
-                    : `.card[data-${type}-id="${id}"], .card[data-playlist-id="${id}"]`;
+                    : type === 'video'
+                      ? `.video-card[data-video-id="${id}"]`
+                      : `.card[data-${type}-id="${id}"], .card[data-playlist-id="${id}"]`;
 
             const itemEl = document.querySelector(itemSelector);
 
@@ -1020,29 +1027,60 @@ export async function handleTrackAction(
                 const container = itemEl.parentElement;
                 itemEl.remove();
                 if (container && container.children.length === 0) {
-                    const msg = type === 'track' ? 'No liked tracks yet.' : `No liked ${type}s yet.`;
+                    const msg =
+                        type === 'track'
+                            ? 'No liked tracks yet.'
+                            : type === 'video'
+                              ? 'No liked videos yet.'
+                              : `No liked ${type}s yet.`;
                     container.innerHTML = `<div class="placeholder-text">${msg}</div>`;
                 }
-            } else if (added && !itemEl && ui && type === 'track') {
-                // Add item (specifically for tracks currently)
-                const tracksContainer = document.getElementById('library-tracks-container');
-                if (tracksContainer) {
-                    // Remove placeholder if it exists
-                    const placeholder = tracksContainer.querySelector('.placeholder-text');
-                    if (placeholder) placeholder.remove();
+            } else if (added && !itemEl && ui && (type === 'track' || type === 'video')) {
+                // Add item
+                if (type === 'track') {
+                    const tracksContainer = document.getElementById('library-tracks-container');
+                    if (tracksContainer) {
+                        const placeholder = tracksContainer.querySelector('.placeholder-text');
+                        if (placeholder) placeholder.remove();
 
-                    // Create track element
-                    const index = tracksContainer.children.length;
-                    const trackHTML = ui.createTrackItemHTML(item, index, true, false);
+                        const index = tracksContainer.children.length;
+                        const trackHTML = ui.createTrackItemHTML(item, index, true, false);
 
-                    const tempDiv = document.createElement('div');
-                    tempDiv.innerHTML = trackHTML;
-                    const newEl = tempDiv.firstElementChild;
+                        const tempDiv = document.createElement('div');
+                        tempDiv.innerHTML = trackHTML;
+                        const newEl = tempDiv.firstElementChild;
 
-                    if (newEl) {
-                        tracksContainer.appendChild(newEl);
-                        trackDataStore.set(newEl, item);
-                        ui.updateLikeState(newEl, 'track', item.id);
+                        if (newEl) {
+                            tracksContainer.appendChild(newEl);
+                            trackDataStore.set(newEl, item);
+                            ui.updateLikeState(newEl, 'track', item.id);
+                        }
+                    }
+                } else if (type === 'video') {
+                    const videosTabContent = document.getElementById('library-tab-videos');
+                    if (videosTabContent) {
+                        const grid = videosTabContent.querySelector('.card-grid');
+                        if (grid) {
+                            const placeholder = grid.querySelector('.placeholder-text');
+                            if (placeholder) grid.innerHTML = '';
+
+                            const videoHTML = ui.createVideoCardHTML(item);
+                            const tempDiv = document.createElement('div');
+                            tempDiv.innerHTML = videoHTML;
+                            const newEl = tempDiv.firstElementChild;
+
+                            if (newEl) {
+                                grid.appendChild(newEl);
+                                trackDataStore.set(newEl, item);
+                                ui.updateLikeState(newEl, 'video', item.id);
+                                newEl.addEventListener('click', (e) => {
+                                    if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) {
+                                        e.stopPropagation();
+                                        player.playVideo(item);
+                                    }
+                                });
+                            }
+                        }
                     }
                 }
             }
@@ -1058,10 +1096,14 @@ export async function handleTrackAction(
             // Removed empty check to allow creating new playlist
 
             const trackId = item.id;
+            const trackType = item.type || 'track';
             const playlistsWithTrack = new Set();
 
             for (const playlist of playlists) {
-                if (playlist.tracks && playlist.tracks.some((track) => track.id == trackId)) {
+                if (
+                    playlist.tracks &&
+                    playlist.tracks.some((t) => t.id == trackId && (t.type || 'track') === trackType)
+                ) {
                     playlistsWithTrack.add(playlist.id);
                 }
             }
@@ -1645,7 +1687,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
                         contextMenu._originalHTML = null;
                     }
                     contextMenu._contextTrack = contextTrack;
-                    contextMenu._contextType = 'track';
+                    contextMenu._contextType = menuBtn.dataset.type || trackItem.dataset.type || 'track';
                     await updateContextMenuLikeState(contextMenu, contextTrack);
                     const rect = menuBtn.getBoundingClientRect();
                     positionMenu(contextMenu, rect.left, rect.bottom + 5, rect);
@@ -1670,15 +1712,19 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
             if (isSearch) {
                 const clickedTrack = trackDataStore.get(trackItem);
                 if (clickedTrack) {
-                    player.setQueue([clickedTrack], 0);
-                    document.getElementById('shuffle-btn').classList.remove('active');
-                    player.playTrackFromQueue();
+                    if (trackItem.dataset.type === 'video') {
+                        player.playVideo(clickedTrack);
+                    } else {
+                        player.setQueue([clickedTrack], 0);
+                        document.getElementById('shuffle-btn').classList.remove('active');
+                        player.playTrackFromQueue();
 
-                    api.getTrackRecommendations(clickedTrack.id).then((recs) => {
-                        if (recs && recs.length > 0) {
-                            player.addToQueue(recs);
-                        }
-                    });
+                        api.getTrackRecommendations(clickedTrack.id).then((recs) => {
+                            if (recs && recs.length > 0) {
+                                player.addToQueue(recs);
+                            }
+                        });
+                    }
                 }
             } else {
                 const parentList = trackItem.closest('.track-list');
@@ -1763,7 +1809,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
                 });
 
                 contextMenu._contextTrack = contextTrack;
-                contextMenu._contextType = 'track';
+                contextMenu._contextType = contextTrack.type || 'track';
                 await updateContextMenuLikeState(contextMenu, contextTrack);
                 positionMenu(contextMenu, e.clientX, e.clientY);
             }
@@ -1919,7 +1965,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
                     player,
                     api,
                     lyricsManager,
-                    'track',
+                    player.currentTrack.type || 'track',
                     ui,
                     scrobbler
                 );
@@ -1957,7 +2003,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
                     player,
                     api,
                     lyricsManager,
-                    'track',
+                    player.currentTrack.type || 'track',
                     ui,
                     scrobbler
                 );
@@ -1978,7 +2024,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
                     player,
                     api,
                     lyricsManager,
-                    'track',
+                    player.currentTrack.type || 'track',
                     ui,
                     scrobbler
                 );
diff --git a/js/hls-downloader.js b/js/hls-downloader.js
new file mode 100644
index 0000000..2384484
--- /dev/null
+++ b/js/hls-downloader.js
@@ -0,0 +1,107 @@
+export class HlsDownloader {
+    constructor() {}
+
+    async downloadHlsStream(masterUrl, options = {}) {
+        const { onProgress, signal } = options;
+
+        const response = await fetch(masterUrl, { signal });
+        const masterText = await response.text();
+
+        const variantUrl = this.getBestVariantUrl(masterUrl, masterText);
+        
+        const mediaResponse = await fetch(variantUrl, { signal });
+        const mediaText = await mediaResponse.text();
+
+        const segments = this.parseMediaPlaylist(variantUrl, mediaText);
+        if (segments.length === 0) {
+            throw new Error('No segments found in HLS playlist');
+        }
+
+        const chunks = [];
+        let downloadedBytes = 0;
+        const totalSegments = segments.length;
+
+        for (let i = 0; i < totalSegments; i++) {
+            if (signal?.aborted) throw new Error('AbortError');
+
+            const segmentUrl = segments[i];
+            const segmentResponse = await fetch(segmentUrl, { signal });
+
+            if (!segmentResponse.ok) {
+                throw new Error(`Failed to fetch segment ${i}: ${segmentResponse.status}`);
+            }
+
+            const chunk = await segmentResponse.arrayBuffer();
+            chunks.push(chunk);
+            downloadedBytes += chunk.byteLength;
+
+            if (onProgress) {
+                onProgress({
+                    stage: 'downloading',
+                    receivedBytes: downloadedBytes,
+                    totalBytes: undefined,
+                    currentSegment: i + 1,
+                    totalSegments: totalSegments,
+                });
+            }
+        }
+
+        const mimeType = segments[0].endsWith('.m4s') || segments[0].includes('mp4') ? 'video/mp4' : 'video/mp2t';
+        return new Blob(chunks, { type: mimeType });
+    }
+
+    getBestVariantUrl(masterUrl, masterText) {
+        if (!masterText.includes('#EXT-X-STREAM-INF')) {
+            return masterUrl;
+        }
+
+        const lines = masterText.split('\n');
+        const variants = [];
+        let currentVariant = null;
+
+        for (const line of lines) {
+            const trimmed = line.trim();
+            if (trimmed.startsWith('#EXT-X-STREAM-INF:')) {
+                const bandwidthMatch = trimmed.match(/BANDWIDTH=(\d+)/);
+                const resolutionMatch = trimmed.match(/RESOLUTION=(\d+x\d+)/);
+                currentVariant = {
+                    bandwidth: bandwidthMatch ? parseInt(bandwidthMatch[1], 10) : 0,
+                    resolution: resolutionMatch ? resolutionMatch[1] : 'unknown',
+                };
+            } else if (trimmed && !trimmed.startsWith('#')) {
+                if (currentVariant) {
+                    currentVariant.url = this.resolveUrl(masterUrl, trimmed);
+                    variants.push(currentVariant);
+                    currentVariant = null;
+                }
+            }
+        }
+
+        if (variants.length === 0) return masterUrl;
+
+        variants.sort((a, b) => b.bandwidth - a.bandwidth);
+        return variants[0].url;
+    }
+
+    parseMediaPlaylist(mediaUrl, mediaText) {
+        const lines = mediaText.split('\n');
+        const segments = [];
+
+        for (const line of lines) {
+            const trimmed = line.trim();
+            if (trimmed && !trimmed.startsWith('#')) {
+                segments.push(this.resolveUrl(mediaUrl, trimmed));
+            }
+        }
+
+        return segments;
+    }
+
+    resolveUrl(baseUrl, relativeUrl) {
+        try {
+            return new URL(relativeUrl, baseUrl).href;
+        } catch {
+            return relativeUrl;
+        }
+    }
+}
diff --git a/js/music-api.js b/js/music-api.js
index 0f860d8..81a7cd4 100644
--- a/js/music-api.js
+++ b/js/music-api.js
@@ -48,6 +48,11 @@ export class MusicAPI {
         return this.tidalAPI.searchPlaylists(query, options);
     }
 
+    async searchVideos(query, options = {}) {
+        const provider = options.provider || this.getCurrentProvider();
+        return this.tidalAPI.searchVideos(query, options);
+    }
+
     // Get methods
     async getTrack(id, quality, provider = null) {
         const p = provider || this.getProviderFromId(id) || this.getCurrentProvider();
@@ -89,6 +94,22 @@ export class MusicAPI {
         return null;
     }
 
+    async getVideo(id, provider = null) {
+        const p = provider || this.getProviderFromId(id) || this.getCurrentProvider();
+        const api = this.getAPI(p);
+        const cleanId = this.stripProviderPrefix(id);
+        return api.getVideo(cleanId);
+    }
+
+    async getVideoStreamUrl(id, provider = null) {
+        const p = provider || this.getProviderFromId(id) || this.getCurrentProvider();
+        const api = this.getAPI(p);
+        const cleanId = this.stripProviderPrefix(id);
+        if (typeof api.getVideoStreamUrl === 'function') {
+            return api.getVideoStreamUrl(cleanId);
+        }
+    }
+
     async getArtistSocials(artistName) {
         return this.tidalAPI.getArtistSocials(artistName);
     }
@@ -132,14 +153,6 @@ export class MusicAPI {
         return this.tidalAPI.getCoverUrl(id, size);
     }
 
-    getVideoCoverUrl(videoCoverId, fallbackCoverId, size = '1280') {
-        if (videoCoverId) {
-            const videoUrl = this.tidalAPI.getVideoCoverUrl(videoCoverId, size);
-            if (videoUrl) return videoUrl;
-        }
-        return this.getCoverUrl(fallbackCoverId, size);
-    }
-
     async getVideoArtwork(title, artist) {
         const cacheKey = `${title}-${artist}`.toLowerCase();
         if (this.videoArtworkCache.has(cacheKey)) {
diff --git a/js/player.js b/js/player.js
index 2b18861..7669423 100644
--- a/js/player.js
+++ b/js/player.js
@@ -43,6 +43,7 @@ export class Player {
             typeof window !== 'undefined' &&
             (window.matchMedia?.('(display-mode: standalone)')?.matches || window.navigator?.standalone === true);
 
+        this.hls = null;
         // Sleep timer properties
         this.sleepTimer = null;
         this.sleepTimerEndTime = null;
@@ -201,10 +202,8 @@ export class Player {
                 const artistEl = document.querySelector('.now-playing-bar .artist');
 
                 if (coverEl) {
-                    const videoCoverUrl = track.album?.videoCover
-                        ? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover)
-                        : null;
-                    const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover);
+                    const videoCoverUrl = track.videoUrl || track.videoCoverUrl || track.album?.videoCoverUrl || null;
+                    const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.image || track.cover || track.album?.cover);
 
                     if (videoCoverUrl) {
                         if (coverEl.tagName === 'IMG') {
@@ -216,7 +215,10 @@ export class Player {
                             video.playsInline = true;
                             video.className = coverEl.className;
                             video.id = coverEl.id;
+                            video.style.objectFit = 'cover';
                             coverEl.replaceWith(video);
+                        } else if (coverEl.tagName === 'VIDEO' && coverEl.src !== videoCoverUrl) {
+                            coverEl.src = videoCoverUrl;
                         }
                     } else {
                         if (coverEl.tagName === 'VIDEO') {
@@ -404,41 +406,59 @@ export class Player {
     }
 
     setupHlsVideo(video, result, fallbackImg) {
-        const url = result.videoUrl || result.hlsUrl;
+        const url = result.videoUrl || result.hlsUrl || result; // Allow passing just the URL
         if (!url) return;
 
-        if (url.endsWith('.m3u8')) {
+        if (this.hls) {
+            this.hls.destroy();
+            this.hls = null;
+        }
+
+        if (typeof url === 'string' && (url.includes('.m3u8') || url.includes('application/vnd.apple.mpegurl'))) {
             if (Hls.isSupported()) {
-                const hls = new Hls();
-                hls.loadSource(url);
-                hls.attachMedia(video);
-                hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                this.hls = new Hls();
+                this.hls.loadSource(url);
+                this.hls.attachMedia(video);
+                this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
                     video.play().catch(() => {});
                 });
-                hls.on(Hls.Events.ERROR, (event, data) => {
+                this.hls.on(Hls.Events.ERROR, (event, data) => {
                     if (data.fatal) {
                         console.warn('HLS fatal error:', data.type);
-                        video.replaceWith(fallbackImg);
-                        hls.destroy();
+                        if (fallbackImg) video.replaceWith(fallbackImg);
+                        this.hls.destroy();
+                        this.hls = null;
                     }
                 });
             } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                 video.src = url;
             } else {
-                video.replaceWith(fallbackImg);
+                if (fallbackImg) video.replaceWith(fallbackImg);
             }
         } else {
             video.src = url;
             video.onerror = () => {
-                if (result.hlsUrl) {
+                if (result && result.hlsUrl) {
                     this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, fallbackImg);
-                } else {
+                } else if (fallbackImg) {
                     video.replaceWith(fallbackImg);
                 }
             };
         }
     }
 
+    async playVideo(video) {
+        if (!video) return;
+        const videoTrack = {
+            ...video,
+            type: 'video',
+            artist: video.artist || (video.artists && video.artists[0]) || 'Unknown Artist',
+            album: video.album || { title: 'Video', cover: video.image || video.cover }
+        };
+        this.setQueue([videoTrack], 0);
+        await this.playTrackFromQueue();
+    }
+
     async playTrackFromQueue(startTime = 0, recursiveCount = 0) {
         const currentQueue = this.shuffleActive ? this.shuffledQueue : this.queue;
         if (this.currentQueueIndex < 0 || this.currentQueueIndex >= currentQueue.length) {
@@ -468,79 +488,42 @@ export class Player {
         const trackArtistsHTML = getTrackArtistsHTML(track);
         const yearDisplay = getTrackYearDisplay(track);
 
-        const coverEl = document.querySelector('.now-playing-bar .cover');
-        if (coverEl) {
-            let videoCoverUrl = track.album?.videoCover
-                ? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover)
-                : track.album?.videoCoverUrl || null;
+        const trackInfo = document.querySelector('.now-playing-bar .track-info');
+        const coverEl = trackInfo?.querySelector('.cover:not(#audio-player)');
+        
+        if (track.type === 'video') {
+            if (coverEl) coverEl.style.display = 'none';
+            if (this.audio) {
+                const isInFullscreen = document.getElementById('fullscreen-cover-overlay')?.style.display === 'flex';
+                
+                if (!isInFullscreen) {
+                    this.audio.style.display = 'block';
+                    this.audio.className = 'cover video-cover-mirror';
+                    this.audio.style.width = '56px';
+                    this.audio.style.height = '56px';
+                    this.audio.style.borderRadius = 'var(--radius-sm)';
+                    this.audio.style.objectFit = 'cover';
+                    this.audio.style.gridArea = 'none';
+                    this.audio.muted = false;
 
-            if (!videoCoverUrl && track.album) {
-                this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
-                    if (result && this.currentTrack?.id === track.id) {
-                        const url = result.videoUrl || result.hlsUrl;
-                        if (!url) return;
-                        
-                        track.album.videoCoverUrl = url;
-                        const currentCoverEl = document.querySelector('.now-playing-bar .cover');
-                        if (currentCoverEl && currentCoverEl.tagName !== 'VIDEO') {
-                            const video = document.createElement('video');
-                            video.autoplay = true;
-                            video.loop = true;
-                            video.muted = true;
-                            video.playsInline = true;
-                            video.preload = 'auto';
-                            video.className = currentCoverEl.className;
-                            video.id = currentCoverEl.id;
-                            video.style.opacity = '1';
-                            video.style.zIndex = '1';
-                            video.style.objectFit = 'cover';
-                            video.poster = currentCoverEl.src;
-
-                            this.setupHlsVideo(video, result, currentCoverEl);
-                            currentCoverEl.replaceWith(video);
-                        }
+                    if (trackInfo && this.audio.parentElement !== trackInfo) {
+                        trackInfo.insertBefore(this.audio, trackInfo.firstChild);
                     }
-                });
-            }
-
-            const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover);
-
-            if (videoCoverUrl) {
-                if (coverEl.tagName === 'IMG') {
-                    const video = document.createElement('video');
-                    video.src = videoCoverUrl;
-                    video.poster = this.api.getCoverUrl(track.album?.cover);
-                    video.autoplay = true;
-                    video.loop = true;
-                    video.muted = true;
-                    video.playsInline = true;
-                    video.preload = 'auto';
-                    video.className = coverEl.className;
-                    video.id = coverEl.id;
-                    video.style.objectFit = 'cover';
-                    video.style.gridArea = '1 / 1';
-                    video.onerror = () => {
-                        const img = document.createElement('img');
-                        img.src = this.api.getCoverUrl(track.album?.cover);
-                        img.className = video.className;
-                        img.id = video.id;
-                        video.replaceWith(img);
-                    };
-                    coverEl.replaceWith(video);
-                } else if (coverEl.tagName === 'VIDEO' && coverEl.src !== videoCoverUrl) {
-                    coverEl.src = videoCoverUrl;
-                    coverEl.poster = this.api.getCoverUrl(track.album?.cover);
-                    coverEl.style.objectFit = 'cover';
                 }
-            } else {
-                if (coverEl.tagName === 'VIDEO') {
-                    const img = document.createElement('img');
-                    img.src = coverUrl;
-                    img.className = coverEl.className;
-                    img.id = coverEl.id;
-                    coverEl.replaceWith(img);
-                } else {
-                    coverEl.src = coverUrl;
+            }
+        } else {
+            if (coverEl) {
+                coverEl.style.display = 'block';
+                const coverUrl = this.api.getCoverUrl(track.image || track.cover || track.album?.cover);
+                if (coverEl.src !== coverUrl) coverEl.src = coverUrl;
+            }
+            if (this.audio) {
+                const isInFullscreen = document.getElementById('fullscreen-cover-overlay')?.style.display === 'flex';
+                if (!isInFullscreen) {
+                    this.audio.style.display = 'none';
+                    if (this.audio.parentElement !== document.body) {
+                        document.body.appendChild(this.audio);
+                    }
                 }
             }
         }
@@ -650,7 +633,47 @@ export class Player {
                 }
                 const played = await this.safePlay();
                 if (!played) return;
+            } else if (track.type === 'video') {
+                if (this.dashInitialized) {
+                    this.dashPlayer.reset();
+                    this.dashInitialized = false;
+                }
+                if (this.hls) {
+                    this.hls.destroy();
+                    this.hls = null;
+                }
+
+                streamUrl = await this.api.getVideoStreamUrl(track.id);
+
+                if (streamUrl.includes('.m3u8') || streamUrl.includes('application/vnd.apple.mpegurl')) {
+                    this.setupHlsVideo(this.audio, streamUrl, null);
+                } else if (streamUrl.startsWith('blob:') || streamUrl.includes('.mpd')) {
+                    this.dashPlayer.initialize(this.audio, streamUrl, true);
+                    this.dashInitialized = true;
+                } else {
+                    this.audio.src = streamUrl;
+                }
+
+                this.applyAudioEffects();
+
+                if (window.monochromeUi) {
+                    const lyricsManager = window.monochromeUi.lyricsManager;
+                    window.monochromeUi.showFullscreenCover(track, this.getNextTrack(), lyricsManager, this.audio);
+                }
+
+                const canPlay = await this.waitForCanPlayOrTimeout();
+                if (!canPlay) return;
+
+                if (startTime > 0) {
+                    this.audio.currentTime = startTime;
+                }
+
+                await this.safePlay();
             } else {
+                if (this.hls) {
+                    this.hls.destroy();
+                    this.hls = null;
+                }
                 const isQobuz = String(track.id).startsWith('q:');
 
                 if (isQobuz) {
diff --git a/js/ui.js b/js/ui.js
index a30b994..d718b71 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -38,6 +38,7 @@ import { getVibrantColorFromImage } from './vibrant-color.js';
 import { syncManager } from './accounts/pocketbase.js';
 import { Visualizer } from './visualizer.js';
 import { navigate } from './router.js';
+import { sidePanelManager } from './side-panel.js';
 import {
     renderUnreleasedPage as renderUnreleasedTrackerPage,
     renderTrackerArtistPage as renderTrackerArtistContent,
@@ -260,7 +261,7 @@ export class UIRenderer {
                     likeBtn.style.display = 'none';
                 } else {
                     likeBtn.style.display = 'flex';
-                    this.updateLikeState(likeBtn.parentElement, 'track', track.id);
+                    this.updateLikeState(likeBtn.parentElement, track.type || 'track', track.id);
                 }
             }
 
@@ -290,7 +291,7 @@ export class UIRenderer {
                     fsLikeBtn.style.display = 'none';
                 } else {
                     fsLikeBtn.style.display = 'flex';
-                    this.updateLikeState(fsLikeBtn.parentElement, 'track', track.id);
+                    this.updateLikeState(fsLikeBtn.parentElement, track.type || 'track', track.id);
                 }
             }
             if (fsAddPlaylistBtn) {
@@ -341,9 +342,18 @@ export class UIRenderer {
     createTrackItemHTML(track, index, showCover = false, hasMultipleDiscs = false, useTrackNumber = false) {
         const isUnavailable = track.isUnavailable;
         const isBlocked = contentBlockingSettings?.shouldHideTrack(track);
-        const trackImageHTML = showCover
-            ? this.getCoverHTML(track.album?.videoCover, track.album?.cover, 'Track Cover', 'track-item-cover')
-            : '';
+        const isVideo = track.type === 'video';
+        
+        let trackImageHTML = '';
+        if (showCover) {
+            if (isVideo && this.currentPage === 'playlist') {
+                trackImageHTML = `<div class="track-item-cover video-icon-placeholder" style="display: flex; align-items: center; justify-content: center; background: var(--secondary);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.7;"><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg></div>`;
+            } else if (isVideo && (this.currentPage === 'search' || this.currentPage === 'library')) {
+                trackImageHTML = `<div class="track-item-cover video-icon-placeholder" style="display: flex; align-items: center; justify-content: center; background: var(--secondary);"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="opacity: 0.7;"><path d="M8 5v14l11-7z"/></svg></div>`;
+            } else {
+                trackImageHTML = this.getCoverHTML(track.image || track.cover || track.album?.cover, 'Track Cover', 'track-item-cover', 'lazy');
+            }
+        }
 
         let displayIndex;
         if (hasMultipleDiscs && !showCover) {
@@ -355,6 +365,7 @@ export class UIRenderer {
             displayIndex = index + 1;
         }
 
+        const videoIcon = isVideo ? '<span class="video-item-icon" title="Music Video" style="display: inline-flex; align-items: center; margin-right: 4px; color: var(--muted-foreground);"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg></span>' : '';
         const trackNumberHTML = `<div class="track-number">${showCover ? trackImageHTML : displayIndex}</div>`;
         const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
         const qualityBadge = createQualityBadgeHTML(track);
@@ -381,6 +392,7 @@ export class UIRenderer {
 
         const classList = [
             'track-item',
+            isVideo ? 'video-track-item' : '',
             isCurrentTrack ? 'playing' : '',
             isUnavailable ? 'unavailable' : '',
             isBlocked ? 'blocked' : '',
@@ -391,6 +403,7 @@ export class UIRenderer {
         return `
             <div class="${classList}" 
                  data-track-id="${track.id}" 
+                 ${isVideo ? 'data-type="video"' : 'data-type="track"'}
                  ${track.isLocal ? 'data-is-local="true"' : ''}
                  ${isUnavailable ? 'title="This track is currently unavailable"' : ''}
                  ${blockedTitle}>
@@ -398,6 +411,7 @@ export class UIRenderer {
                 <div class="track-item-info">
                     <div class="track-item-details">
                         <div class="title">
+                            ${videoIcon}
                             ${escapeHtml(trackTitle)}
                             ${explicitBadge}
                             ${qualityBadge}
@@ -413,11 +427,10 @@ export class UIRenderer {
         `;
     }
 
-    getCoverHTML(videoCover, cover, alt, className = 'card-image', loading = 'lazy', videoCoverUrl = null) {
-        const videoUrl = (videoCover ? this.api.tidalAPI.getVideoCoverUrl(videoCover) : null) || videoCoverUrl;
+    getCoverHTML(cover, alt, className = 'card-image', loading = 'lazy', videoCoverUrl = null) {
         const imageUrl = this.api.getCoverUrl(cover);
-        if (videoUrl) {
-            return `<video src="${videoUrl}" poster="${imageUrl}" class="${className}" alt="${alt}" autoplay loop muted playsinline preload="auto" onerror="this.onerror=null; this.outerHTML='<img src=&quot;${imageUrl}&quot; class=&quot;${className}&quot; alt=&quot;${alt}&quot; loading=&quot;${loading}&quot;>';"></video>`;
+        if (videoCoverUrl) {
+            return `<video src="${videoCoverUrl}" poster="${imageUrl}" class="${className}" alt="${alt}" preload="metadata" playsinline muted></video>`;
         }
         return `<img src="${imageUrl}" class="${className}" alt="${alt}" loading="${loading}">`;
     }
@@ -625,7 +638,7 @@ export class UIRenderer {
             href: `/album/${album.id}`,
             title: `${escapeHtml(album.title)} ${explicitBadge} ${qualityBadge}`,
             subtitle: `${escapeHtml(artistName)} • ${yearDisplay}${typeLabel}`,
-            imageHTML: this.getCoverHTML(album.videoCover, album.cover, escapeHtml(album.title), 'card-image', 'lazy', album.videoCoverUrl),
+            imageHTML: this.getCoverHTML(album.cover, escapeHtml(album.title), 'card-image', 'lazy', album.videoCoverUrl),
             actionButtonsHTML: `
                 <button class="like-btn card-like-btn" data-action="toggle-like" data-type="album" title="Add to Liked">
                     ${this.createHeartIcon(false)}
@@ -639,6 +652,41 @@ export class UIRenderer {
         });
     }
 
+    createVideoCardHTML(video) {
+        const duration = formatTime(video.duration);
+        const artistName = getTrackArtists(video);
+        
+        const cover = video.image || video.cover;
+        let imageHTML;
+        
+        if (cover) {
+            imageHTML = this.getCoverHTML(cover, escapeHtml(video.title));
+        } else {
+            imageHTML = `<div class="card-image video-icon-placeholder" style="display: flex; align-items: center; justify-content: center; background: var(--secondary); aspect-ratio: 16/9; width: 100%;"><svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor" style="opacity: 0.7;"><path d="M8 5v14l11-7z"/></svg></div>`;
+        }
+
+        return `
+            <div class="card video-card" data-video-id="${video.id}" data-type="video" draggable="true">
+                <div class="card-image-container">
+                    ${imageHTML}
+                    <div class="card-overlay">
+                        <button class="card-play-btn" title="Play video">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                        </button>
+                    </div>
+                    <button class="like-btn card-like-btn" data-action="toggle-like" data-type="video" title="Add to Liked">
+                        ${this.createHeartIcon(false)}
+                    </button>
+                    <div class="video-duration-badge" style="position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">${duration}</div>
+                </div>
+                <div class="card-info">
+                    <div class="card-title" title="${escapeHtml(video.title)}">${escapeHtml(video.title)}</div>
+                    <div class="card-subtitle">${escapeHtml(artistName)}</div>
+                </div>
+            </div>
+        `;
+    }
+
     createArtistCardHTML(artist) {
         const isCompact = cardSettings.isCompactArtist();
         const isBlocked = contentBlockingSettings?.shouldHideArtist(artist);
@@ -788,7 +836,7 @@ export class UIRenderer {
             if (element && track) {
                 trackDataStore.set(element, track);
                 // Async update for like button
-                this.updateLikeState(element, 'track', track.id);
+                this.updateLikeState(element, track.type || 'track', track.id);
             }
         });
 
@@ -906,48 +954,87 @@ export class UIRenderer {
         if (!track) return;
         const overlay = document.getElementById('fullscreen-cover-overlay');
         const image = document.getElementById('fullscreen-cover-image');
+        const videoContainer = document.getElementById('fullscreen-video-container');
         const title = document.getElementById('fullscreen-track-title');
         const artist = document.getElementById('fullscreen-track-artist');
         const nextTrackEl = document.getElementById('fullscreen-next-track');
 
-        const videoCoverUrl = track.album?.videoCover
-            ? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover, '1280')
-            : (track.album?.videoCoverUrl || null);
-        const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover, '1280');
+        const isRealVideo = track.type === 'video';
+        const visualizerContainer = document.getElementById('visualizer-container');
+        overlay.classList.toggle('is-video-mode', isRealVideo);
 
-        const fsLikeBtn = document.getElementById('fs-like-btn');
-        if (fsLikeBtn) {
-            this.updateLikeState(fsLikeBtn.parentElement, 'track', track.id);
+        const toggleUiBtn = document.getElementById('toggle-ui-btn');
+        if (toggleUiBtn) {
+            toggleUiBtn.style.display = isRealVideo ? 'none' : 'flex';
         }
 
-        if (videoCoverUrl) {
-            if (image.tagName === 'IMG') {
-                const video = document.createElement('video');
-                video.src = videoCoverUrl;
-                video.autoplay = true;
-                video.loop = true;
-                video.muted = true;
-                video.playsInline = true;
-                video.id = image.id;
-                video.className = image.className;
-                image.replaceWith(video);
+        if (isRealVideo) {
+            if (sidePanelManager.isActive('lyrics')) {
+                sidePanelManager.close();
             }
+
+            if (videoContainer) {
+                videoContainer.style.display = 'flex';
+                const audioPlayer = document.getElementById('audio-player');
+                if (audioPlayer && audioPlayer.parentElement !== videoContainer) {
+                    videoContainer.appendChild(audioPlayer);
+                    audioPlayer.style.display = 'block';
+                    audioPlayer.style.width = '100%';
+                    audioPlayer.style.height = '100%';
+                    audioPlayer.style.objectFit = 'contain';
+                }
+            }
+            if (image) image.style.display = 'none';
+            if (visualizerContainer) visualizerContainer.style.display = 'none';
         } else {
-            if (image.tagName === 'VIDEO') {
-                const img = document.createElement('img');
-                img.src = coverUrl;
-                img.id = image.id;
-                img.className = image.className;
-                image.replaceWith(img);
+            if (videoContainer) {
+                videoContainer.style.display = 'none';
+                const audioPlayer = document.getElementById('audio-player');
+                if (audioPlayer && audioPlayer.parentElement === videoContainer) {
+                    document.body.appendChild(audioPlayer);
+                    audioPlayer.style.display = 'none';
+                }
             }
-        }
+            if (image) image.style.display = 'block';
+            if (visualizerContainer) visualizerContainer.style.display = 'block';
 
-        const currentImage = document.getElementById('fullscreen-cover-image');
-        if (currentImage.src !== coverUrl || !videoCoverUrl) {
-            currentImage.src = coverUrl;
+            const videoCoverUrl = track.videoUrl || track.videoCoverUrl || track.album?.videoCoverUrl || null;            const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover, '1280');
+
+            const fsLikeBtn = document.getElementById('fs-like-btn');
+            if (fsLikeBtn) {
+                this.updateLikeState(fsLikeBtn.parentElement, track.type || 'track', track.id);
+            }
+
+            const currentImage = document.getElementById('fullscreen-cover-image');
+
+            if (videoCoverUrl) {
+                if (currentImage.tagName === 'IMG') {
+                    const video = document.createElement('video');
+                    video.src = videoCoverUrl;
+                    video.autoplay = false;
+                    video.loop = false;
+                    video.muted = true;
+                    video.playsInline = true;
+                    video.preload = 'metadata';
+                    video.className = currentImage.className;
+                    currentImage.replaceWith(video);
+                } else if (currentImage.src !== videoCoverUrl) {
+                    currentImage.src = videoCoverUrl;
+                }
+            } else {
+                if (currentImage.tagName === 'VIDEO') {
+                    const img = document.createElement('img');
+                    img.src = coverUrl;
+                    img.id = currentImage.id;
+                    img.className = currentImage.className;
+                    currentImage.replaceWith(img);
+                } else if (currentImage.src !== coverUrl) {
+                    currentImage.src = coverUrl;
+                }
+            }
+            overlay.style.setProperty('--bg-image', `url('${this.api.getCoverUrl(track.album?.cover, '1280')}')`);
+            this.extractAndApplyColor(this.api.getCoverUrl(track.album?.cover, '80'));
         }
-        overlay.style.setProperty('--bg-image', `url('${coverUrl}')`);
-        this.extractAndApplyColor(this.api.getCoverUrl(track.album?.cover, '80'));
 
         const qualityBadge = createQualityBadgeHTML(track);
         title.innerHTML = `${escapeHtml(track.title)} ${qualityBadge}`;
@@ -1059,6 +1146,28 @@ export class UIRenderer {
         const playerBar = document.querySelector('.now-playing-bar');
         if (playerBar) playerBar.style.removeProperty('display');
 
+        if (this.player?.currentTrack?.type === 'video') {
+            const coverContainer = document.querySelector('.now-playing-bar .track-info');
+            const audioPlayer = document.getElementById('audio-player');
+            const imgCover = coverContainer?.querySelector('.cover:not(#audio-player)');
+            
+            if (audioPlayer && coverContainer) {
+                if (imgCover) imgCover.style.display = 'none';
+                
+                audioPlayer.style.display = 'block';
+                audioPlayer.classList.add('cover', 'video-cover-mirror');
+                audioPlayer.style.width = '56px';
+                audioPlayer.style.height = '56px';
+                audioPlayer.style.borderRadius = 'var(--radius-sm)';
+                audioPlayer.style.objectFit = 'cover';
+                audioPlayer.style.gridArea = 'none';
+                
+                if (audioPlayer.parentElement !== coverContainer) {
+                    coverContainer.insertBefore(audioPlayer, coverContainer.firstChild);
+                }
+            }
+        }
+
         if (this.fullscreenUpdateInterval) {
             cancelAnimationFrame(this.fullscreenUpdateInterval);
             this.fullscreenUpdateInterval = null;
@@ -1107,16 +1216,32 @@ export class UIRenderer {
             const isNearTopRight = e.clientY < 100 && e.clientX > rect.width - 150;
 
             if (isUIHidden) {
-                // When UI is hidden, only show button when mouse is near top-right
-                if (isNearTopRight) {
+                if (overlay.classList.contains('is-video-mode')) {
+                    toggleUI();
+                } else if (isNearTopRight) {
                     showButton();
                 } else {
                     hideButton();
                 }
+            } else if (overlay.classList.contains('is-video-mode')) {
+                resetVideoHideTimer();
             }
-            // When UI is visible, button stays visible (no auto-hide)
         };
 
+        let videoHideTimer = null;
+        const resetVideoHideTimer = () => {
+            if (videoHideTimer) clearTimeout(videoHideTimer);
+            if (!overlay.classList.contains('is-video-mode') || isUIHidden) return;
+
+            videoHideTimer = setTimeout(() => {
+                if (!isUIHidden && overlay.classList.contains('is-video-mode')) {
+                    toggleUI();
+                }
+            }, 3000);
+        };
+
+        resetVideoHideTimer();
+
         // Toggle UI visibility
         const toggleUI = () => {
             isUIHidden = !isUIHidden;
@@ -1476,11 +1601,13 @@ export class UIRenderer {
         this.showPage('library');
 
         const tracksContainer = document.getElementById('library-tracks-container');
+        const videosTabContent = document.getElementById('library-tab-videos');
         const albumsContainer = document.getElementById('library-albums-container');
         const artistsContainer = document.getElementById('library-artists-container');
         const playlistsContainer = document.getElementById('library-playlists-container');
         const localContainer = document.getElementById('library-local-container');
         const foldersContainer = document.getElementById('my-folders-container');
+        const myPlaylistsContainer = document.getElementById('my-playlists-container');
 
         const likedTracks = await db.getFavorites('track');
         const shuffleBtn = document.getElementById('shuffle-liked-tracks-btn');
@@ -1496,6 +1623,29 @@ export class UIRenderer {
             tracksContainer.innerHTML = createPlaceholder('No liked tracks yet.');
         }
 
+        const likedVideos = await db.getFavorites('video');
+        if (videosTabContent) {
+            const grid = videosTabContent.querySelector('.card-grid');
+            if (likedVideos.length) {
+                grid.innerHTML = likedVideos.map((v) => this.createVideoCardHTML(v)).join('');
+                likedVideos.forEach((video) => {
+                    const el = grid.querySelector(`[data-video-id="${video.id}"]`);
+                    if (el) {
+                        trackDataStore.set(el, video);
+                        this.updateLikeState(el, 'video', video.id);
+                        el.addEventListener('click', (e) => {
+                            if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) {
+                                e.stopPropagation();
+                                this.player.playVideo(video);
+                            }
+                        });
+                    }
+                });
+            } else {
+                grid.innerHTML = createPlaceholder('No liked videos yet.');
+            }
+        }
+
         const likedAlbums = await db.getFavorites('album');
         if (likedAlbums.length) {
             albumsContainer.innerHTML = likedAlbums.map((a) => this.createAlbumCardHTML(a)).join('');
@@ -1527,38 +1677,6 @@ export class UIRenderer {
         const likedPlaylists = await db.getFavorites('playlist');
         const likedMixes = await db.getFavorites('mix');
 
-
-        if (likedTracks.length > 0) {
-            likedTracks.slice(0, 2).forEach((track) => {
-                if (!track.album?.videoCover && !track.album?.videoCoverUrl) {
-                    this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
-                        if (result && this.currentPage === 'library') {
-                            const url = result.videoUrl || result.hlsUrl;
-                            if (!url) return;
-                            track.album = track.album || {};
-                            track.album.videoCoverUrl = url;
-                            this.replaceVideoArtwork(tracksContainer, 'track', track.id, result);
-                        }
-                    });
-                }
-            });
-        }
-
-        if (likedAlbums.length > 0) {
-            likedAlbums.slice(0, 2).forEach((album) => {
-                if (!album.videoCover && !album.videoCoverUrl) {
-                    this.api.getVideoArtwork(album.title, typeof album.artist === 'string' ? album.artist : (album.artist?.name || '')).then((result) => {
-                        if (result && this.currentPage === 'library') {
-                            const url = result.videoUrl || result.hlsUrl;
-                            if (!url) return;
-                            album.videoCoverUrl = url;
-                            this.replaceVideoArtwork(albumsContainer, 'album', album.id, result);
-                        }
-                    });
-                }
-            });
-        }
-
         let mixedContent = [];
         if (likedPlaylists.length) mixedContent.push(...likedPlaylists.map((p) => ({ ...p, _type: 'playlist' })));
         if (likedMixes.length) mixedContent.push(...likedMixes.map((m) => ({ ...m, _type: 'mix' })));
@@ -1598,9 +1716,7 @@ export class UIRenderer {
             foldersContainer.style.display = folders.length ? 'grid' : 'none';
         }
 
-        const myPlaylistsContainer = document.getElementById('my-playlists-container');
         const myPlaylists = await db.getPlaylists();
-
         const playlistsInFolders = new Set();
         folders.forEach((folder) => {
             if (folder.playlists) {
@@ -1610,24 +1726,28 @@ export class UIRenderer {
 
         const visiblePlaylists = myPlaylists.filter((p) => !playlistsInFolders.has(p.id));
 
-        if (visiblePlaylists.length) {
-            myPlaylistsContainer.innerHTML = visiblePlaylists.map((p) => this.createUserPlaylistCardHTML(p)).join('');
-            visiblePlaylists.forEach((playlist) => {
-                const el = myPlaylistsContainer.querySelector(`[data-user-playlist-id="${playlist.id}"]`);
-                if (el) {
-                    trackDataStore.set(el, playlist);
-                }
-            });
-        } else {
-            if (folders.length === 0) {
-                myPlaylistsContainer.innerHTML = createPlaceholder('No playlists yet. Create your first playlist!');
+        if (myPlaylistsContainer) {
+            if (visiblePlaylists.length) {
+                myPlaylistsContainer.innerHTML = visiblePlaylists.map((p) => this.createUserPlaylistCardHTML(p)).join('');
+                visiblePlaylists.forEach((playlist) => {
+                    const el = myPlaylistsContainer.querySelector(`[data-user-playlist-id="${playlist.id}"]`);
+                    if (el) {
+                        trackDataStore.set(el, playlist);
+                    }
+                });
             } else {
-                myPlaylistsContainer.innerHTML = '';
+                if (folders.length === 0) {
+                    myPlaylistsContainer.innerHTML = createPlaceholder('No playlists yet. Create your first playlist!');
+                } else {
+                    myPlaylistsContainer.innerHTML = '';
+                }
             }
         }
 
         // Render Local Files
-        this.renderLocalFiles(localContainer);
+        if (localContainer) {
+            this.renderLocalFiles(localContainer);
+        }
     }
 
     async renderLocalFiles(container) {
@@ -2087,7 +2207,7 @@ export class UIRenderer {
             href: `/track/${track.id}`,
             title: `${escapeHtml(getTrackTitle(track))} ${explicitBadge} ${qualityBadge}`,
             subtitle: escapeHtml(getTrackArtists(track)),
-            imageHTML: this.getCoverHTML(track.album?.videoCover, track.album?.cover, escapeHtml(track.title)),
+            imageHTML: this.getCoverHTML(track.album?.cover, escapeHtml(track.title), 'card-image', 'lazy', track.videoUrl || track.album?.videoCoverUrl),
             actionButtonsHTML: `
                 <button class="like-btn card-like-btn" data-action="toggle-like" data-type="track" title="Add to Liked">
                     ${this.createHeartIcon(false)}
@@ -2471,11 +2591,11 @@ export class UIRenderer {
         const img = card.querySelector('.card-image');
         if (img && img.tagName !== 'VIDEO') {
             const video = document.createElement('video');
-            video.autoplay = true;
-            video.loop = true;
+            video.autoplay = false;
+            video.loop = false;
             video.muted = true;
             video.playsInline = true;
-            video.preload = 'auto';
+            video.preload = 'metadata';
             video.className = img.className;
             video.id = img.id;
             video.style.objectFit = 'cover';
@@ -2502,6 +2622,16 @@ export class UIRenderer {
             img.replaceWith(video);
             
             this.setupHlsVideo(video, result, img);
+            
+            // If HLS, dont play
+            const hls = video._hls;
+            if (hls) {
+                hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                    // Dont play
+                });
+            } else {
+                video.src = url;
+            }
         }
     }
 
@@ -2527,14 +2657,16 @@ export class UIRenderer {
 
         try {
             const provider = this.api.getCurrentProvider();
-            const [tracksResult, artistsResult, albumsResult, playlistsResult] = await Promise.all([
+            const [tracksResult, videosResult, artistsResult, albumsResult, playlistsResult] = await Promise.all([
                 this.api.searchTracks(query, { signal, provider }),
+                this.api.searchVideos(query, { signal, provider }),
                 this.api.searchArtists(query, { signal, provider }),
                 this.api.searchAlbums(query, { signal, provider }),
                 this.api.searchPlaylists(query, { signal, provider }),
             ]);
 
             let finalTracks = tracksResult.items;
+            let finalVideos = videosResult.items || [];
             let finalArtists = artistsResult.items;
             let finalAlbums = albumsResult.items;
             let finalPlaylists = playlistsResult.items;
@@ -2576,6 +2708,26 @@ export class UIRenderer {
                 tracksContainer.innerHTML = createPlaceholder('No tracks found.');
             }
 
+            const videosContainer = document.getElementById('search-videos-container');
+            if (videosContainer) {
+                videosContainer.innerHTML = finalVideos.length
+                    ? finalVideos.map((video) => this.createVideoCardHTML(video)).join('')
+                    : createPlaceholder('No videos found.');
+
+                finalVideos.forEach((video) => {
+                    const el = videosContainer.querySelector(`[data-video-id="${video.id}"]`);
+                    if (el) {
+                        trackDataStore.set(el, video);
+                        el.addEventListener('click', (e) => {
+                            if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) {
+                                e.stopPropagation();
+                                this.player.playVideo(video);
+                            }
+                        });
+                    }
+                });
+            }
+
             artistsContainer.innerHTML = finalArtists.length
                 ? finalArtists.map((artist) => this.createArtistCardHTML(artist)).join('')
                 : createPlaceholder('No artists found.');
@@ -2611,35 +2763,6 @@ export class UIRenderer {
                     this.updateLikeState(el, 'playlist', playlist.uuid);
                 }
             });
-
-            if (finalTracks.length > 0) {
-                const track = finalTracks[0];
-                if (!track.album?.videoCover && !track.album?.videoCoverUrl) {
-                    this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
-                        if (result && this.currentPage === 'search') {
-                            const url = result.videoUrl || result.hlsUrl;
-                            if (!url) return;
-                            track.album = track.album || {};
-                            track.album.videoCoverUrl = url;
-                            this.replaceVideoArtwork(tracksContainer, 'track', track.id, result);
-                        }
-                    });
-                }
-            }
-
-            if (finalAlbums.length > 0) {
-                const album = finalAlbums[0];
-                if (!album.videoCover && !album.videoCoverUrl) {
-                    this.api.getVideoArtwork(album.title, typeof album.artist === 'string' ? album.artist : (album.artist?.name || '')).then((result) => {
-                        if (result && this.currentPage === 'search') {
-                            const url = result.videoUrl || result.hlsUrl;
-                            if (!url) return;
-                            album.videoCoverUrl = url;
-                            this.replaceVideoArtwork(albumsContainer, 'album', album.id, result);
-                        }
-                    });
-                }
-            }
         } catch (error) {
             if (error.name === 'AbortError') return;
             console.error('Search failed:', error);
@@ -2761,9 +2884,7 @@ export class UIRenderer {
             const { album, tracks } = await this.api.getAlbum(albumId, provider);
             this.currentAlbumId = albumId;
 
-            let videoCoverUrl = album.videoCover
-                ? this.api.tidalAPI.getVideoCoverUrl(album.videoCover)
-                : (album.videoCoverUrl || null);
+            const videoCoverUrl = album.videoCoverUrl || null;
 
             if (!videoCoverUrl && tracks.length > 0) {
                 const firstTrack = tracks[0];
@@ -2775,20 +2896,19 @@ export class UIRenderer {
                         const currentImageEl = document.getElementById('album-detail-image');
                         if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
                             const video = document.createElement('video');
-                            video.autoplay = true;
-                            video.loop = true;
+                            video.autoplay = false;
+                            video.loop = false;
                             video.muted = true;
                             video.playsInline = true;
-                            video.preload = 'auto';
+                            video.preload = 'metadata';
                             video.className = currentImageEl.className;
                             video.id = currentImageEl.id;
-                            video.style.objectFit = 'cover';
+                            video.style.opacity = '1';
                             video.poster = currentImageEl.src;
 
                             this.setupHlsVideo(video, result, currentImageEl);
                             currentImageEl.replaceWith(video);
-                        }
-                    }
+                        }                    }
                 });
             }
 
@@ -3268,6 +3388,7 @@ export class UIRenderer {
                             removeBtn.innerHTML =
                                 '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>';
                             removeBtn.dataset.trackId = currentTracks[index].id;
+                            removeBtn.dataset.type = currentTracks[index].type || 'track';
 
                             const menuBtn = actionsDiv.querySelector('.track-menu-btn');
                             actionsDiv.insertBefore(removeBtn, menuBtn);
@@ -3551,43 +3672,48 @@ export class UIRenderer {
                 // Try to get cover from first track album
                 if (tracks.length > 0 && tracks[0].album?.cover) {
                     const firstTrack = tracks[0];
-                    let videoCoverUrl = firstTrack.album?.videoCover
-                        ? this.api.tidalAPI.getVideoCoverUrl(firstTrack.album.videoCover)
-                        : (firstTrack.album?.videoCoverUrl || null);
+                    let videoCoverUrl = firstTrack.videoUrl || firstTrack.videoCoverUrl || firstTrack.album?.videoCoverUrl || null;
 
-                    if (!videoCoverUrl && firstTrack.album) {
-                        this.api.getVideoArtwork(firstTrack.title, getTrackArtists(firstTrack)).then((result) => {
-                            if (result && this.currentPage === 'mix' && this.currentMixId === mixId) {
-                                const url = result.videoUrl || result.hlsUrl;
-                                if (!url) return;
-                                firstTrack.album.videoCoverUrl = url;
-                                const currentImageEl = document.getElementById('mix-detail-image');
-                                if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
-                                    const video = document.createElement('video');
-                                    video.autoplay = true;
-                                    video.loop = true;
-                                    video.muted = true;
-                                    video.playsInline = true;
-                                    video.preload = 'auto';
-                                    video.className = currentImageEl.className;
-                                    video.id = currentImageEl.id;
-                                    video.style.opacity = '0';
-                                    video.style.transition = 'opacity 0.3s ease-in-out';
-
-                                    video.oncanplay = () => {
+                    if (!videoCoverUrl && (firstTrack.album || firstTrack.type === 'video')) {
+                        const fetchArtwork = () => {
+                            this.api.getVideoArtwork(firstTrack.title, getTrackArtists(firstTrack)).then((result) => {
+                                if (result && this.currentPage === 'mix' && this.currentMixId === mixId) {
+                                    const url = result.videoUrl || result.hlsUrl;
+                                    if (!url) return;
+                                    firstTrack.album = firstTrack.album || {};
+                                    firstTrack.album.videoCoverUrl = url;
+                                    const currentImageEl = document.getElementById('mix-detail-image');
+                                    if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
+                                        const video = document.createElement('video');
+                                        video.autoplay = false;
+                                        video.loop = false;
+                                        video.muted = true;
+                                        video.playsInline = true;
+                                        video.preload = 'metadata';
+                                        video.className = currentImageEl.className;
+                                        video.id = currentImageEl.id;
                                         video.style.opacity = '1';
-                                        setTimeout(() => {
-                                            if (currentImageEl.parentNode) {
-                                                currentImageEl.style.display = 'none';
-                                            }
-                                        }, 300);
-                                    };
+                                        video.poster = currentImageEl.src;
 
-                                    this.setupHlsVideo(video, result, currentImageEl);
-                                    currentImageEl.parentNode.insertBefore(video, currentImageEl);
+                                        this.setupHlsVideo(video, result, currentImageEl);
+                                        currentImageEl.replaceWith(video);
+                                    }
                                 }
-                            }
-                        });
+                            });
+                        };
+
+                        if (firstTrack.type === 'video') {
+                            this.api.getVideoStreamUrl(firstTrack.id).then((url) => {
+                                if (url) {
+                                    firstTrack.videoUrl = url;
+                                    this.renderMixPage(mixId);
+                                } else {
+                                    fetchArtwork();
+                                }
+                            }).catch(fetchArtwork);
+                        } else {
+                            fetchArtwork();
+                        }
                     }
 
                     const coverUrl = videoCoverUrl || this.api.getCoverUrl(firstTrack.album.cover);
@@ -3980,6 +4106,25 @@ export class UIRenderer {
                 }
             });
 
+            const videosSection = document.getElementById('artist-section-videos');
+            const videosContainer = document.getElementById('artist-detail-videos');
+            if (videosSection && videosContainer) {
+                if (artist.videos && artist.videos.length > 0) {
+                    videosContainer.innerHTML = artist.videos.map((video) => this.createVideoCardHTML(video)).join('');
+                    videosSection.style.display = 'block';
+
+                    artist.videos.forEach((video) => {
+                        const el = videosContainer.querySelector(`[data-video-id="${video.id}"]`);
+                        if (el) {
+                            trackDataStore.set(el, video);
+                            this.updateLikeState(el, 'track', video.id);
+                        }
+                    });
+                } else {
+                    videosSection.style.display = 'none';
+                }
+            }
+
             // Check for unreleased projects
             const unreleasedSection = document.getElementById('artist-section-unreleased');
             const unreleasedContainer = document.getElementById('artist-detail-unreleased');
@@ -4633,39 +4778,51 @@ export class UIRenderer {
             }
             this.currentTrackPageId = track.id;
 
-            let videoCoverUrl = track.album?.videoCover
-                ? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover)
-                : (track.album?.videoCoverUrl || null);
+            let videoCoverUrl = track.videoUrl || track.videoCoverUrl || track.album?.videoCoverUrl || null;
 
-            if (!videoCoverUrl && track.album) {
-                this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
-                    if (result && this.currentPage === 'track' && this.currentTrackPageId === track.id) {
-                        const url = result.videoUrl || result.hlsUrl;
-                        if (!url) return;
-                        track.album.videoCoverUrl = url;
-                        const currentImageEl = document.getElementById('track-detail-image');
-                        if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
-                            const video = document.createElement('video');
-                            video.autoplay = true;
-                            video.loop = true;
-                            video.muted = true;
-                            video.playsInline = true;
-                            video.preload = 'auto';
-                            video.className = currentImageEl.className;
-                            video.id = currentImageEl.id;
-                            video.style.opacity = '0';
-                            video.style.transition = 'opacity 0.3s ease-in-out';
+            if (!videoCoverUrl && (track.album || track.type === 'video')) {
+                const fetchArtwork = () => {
+                    this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
+                        if (result && this.currentPage === 'track' && this.currentTrackPageId === track.id) {
+                            const url = result.videoUrl || result.hlsUrl;
+                            if (!url) return;
+                            track.album = track.album || {};
+                            track.album.videoCoverUrl = url;
+                            const currentImageEl = document.getElementById('track-detail-image');
+                            if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
+                                const video = document.createElement('video');
+                                video.autoplay = false;
+                                video.loop = false;
+                                video.muted = true;
+                                video.playsInline = true;
+                                video.preload = 'metadata';
+                                video.className = currentImageEl.className;
+                                video.id = currentImageEl.id;
+                                video.style.opacity = '1';
+                                video.poster = currentImageEl.src;
 
-                            video.poster = currentImageEl.src;
-
-                            this.setupHlsVideo(video, result, currentImageEl);
-                            currentImageEl.replaceWith(video);
+                                this.setupHlsVideo(video, result, currentImageEl);
+                                currentImageEl.replaceWith(video);
+                            }
                         }
-                    }
-                });
+                    });
+                };
+
+                if (track.type === 'video') {
+                    this.api.getVideoStreamUrl(track.id).then((url) => {
+                        if (url) {
+                            track.videoUrl = url;
+                            this.renderTrackPage(trackId, provider);
+                        } else {
+                            fetchArtwork();
+                        }
+                    }).catch(fetchArtwork);
+                } else {
+                    fetchArtwork();
+                }
             }
 
-            const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover);
+            const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.image || track.cover || track.album?.cover);
 
             if (videoCoverUrl) {
                 if (imageEl.tagName === 'IMG') {
diff --git a/js/utils.js b/js/utils.js
index 9bfbda1..18b3156 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -134,6 +134,23 @@ export const detectAudioFormat = (view, mimeType = '') => {
         return 'mp3';
     }
 
+    if (
+        view.byteLength >= 7 &&
+        view.getUint8(0) === 0x23 &&
+        view.getUint8(1) === 0x45 &&
+        view.getUint8(2) === 0x58 &&
+        view.getUint8(3) === 0x54 &&
+        view.getUint8(4) === 0x4d &&
+        view.getUint8(5) === 0x33 &&
+        view.getUint8(6) === 0x55
+    ) {
+        return 'm3u8';
+    }
+
+    if (view.byteLength >= 188 && view.getUint8(0) === 0x47 && view.getUint8(188) === 0x47) {
+        return 'ts';
+    }
+
     // Fallback to MIME type
     if (mimeType === 'audio/flac') return 'flac';
     if (mimeType === 'audio/mp4' || mimeType === 'audio/x-m4a') return 'mp4';
@@ -153,10 +170,16 @@ export const getExtensionFromBlob = async (blob) => {
 
     const format = detectAudioFormat(view, blob.type);
 
-    if (format === 'mp4') return 'm4a';
+    if (format === 'mp4') {
+        if (blob.type.includes('video')) return 'mp4';
+        return 'm4a';
+    }
     if (format) return format;
 
-    // Default fallback
+    if (blob.type.includes('video')) return 'mp4';
+    if (blob.type === 'audio/mp4' || blob.type === 'audio/x-m4a') return 'm4a';
+    if (blob.type === 'audio/mpeg' || blob.type === 'audio/mp3') return 'mp3';
+
     return 'flac';
 };
 
diff --git a/styles.css b/styles.css
index 743497c..36a9ea8 100644
--- a/styles.css
+++ b/styles.css
@@ -5227,10 +5227,110 @@ img[src=''] {
     align-items: center;
     justify-content: center;
     padding: 6rem 2rem 2rem;
-    transition:
-        flex 0.3s ease,
-        padding-right 0.3s ease,
-        margin-right 0.3s ease;
+    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+#fullscreen-cover-overlay.is-video-mode .fullscreen-main-view {
+    justify-content: flex-end;
+    align-items: flex-start;
+    padding: 2rem 2rem 6rem;
+    pointer-events: none;
+    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 15%, transparent 40%);
+}
+
+#fullscreen-cover-overlay.is-video-mode .fullscreen-track-info {
+    text-align: left;
+    background: none !important;
+    backdrop-filter: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    max-width: 40%;
+    margin: 0;
+    pointer-events: auto;
+}
+
+#fullscreen-cover-overlay.is-video-mode #fullscreen-track-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
+    margin-bottom: 0.1rem;
+}
+
+#fullscreen-cover-overlay.is-video-mode #fullscreen-track-artist {
+    font-size: 0.9rem;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
+    opacity: 0.7;
+}
+
+#fullscreen-cover-overlay.is-video-mode .fullscreen-controls {
+    position: absolute;
+    bottom: 1.5rem;
+    left: 2rem;
+    right: 2rem;
+    max-width: 500px;
+    margin: 0 auto;
+    background: rgba(15, 15, 15, 0.5);
+    backdrop-filter: blur(12px);
+    padding: 0.6rem 1rem;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
+    pointer-events: auto;
+    z-index: 100;
+}
+
+#fullscreen-cover-overlay.is-video-mode .fullscreen-buttons {
+    gap: 1.25rem;
+}
+
+#fullscreen-cover-overlay.is-video-mode .fullscreen-buttons button {
+    width: 28px;
+    height: 28px;
+    padding: 0.25rem;
+}
+
+#fullscreen-cover-overlay.is-video-mode .fullscreen-buttons button svg {
+    width: 18px;
+    height: 18px;
+}
+
+#fullscreen-cover-overlay.is-video-mode .fullscreen-buttons #fs-play-pause-btn {
+    width: 40px;
+    height: 40px;
+}
+
+#fullscreen-cover-overlay.is-video-mode .fullscreen-progress-container {
+    gap: 0.75rem;
+    font-size: 0.75rem;
+}
+
+#fullscreen-cover-overlay.is-video-mode .fullscreen-volume-container {
+    display: none;
+}
+
+#fullscreen-cover-overlay.is-video-mode .fullscreen-volume-container {
+    margin-top: 0.5rem;
+}
+
+
+#fullscreen-cover-overlay.ui-hidden .fullscreen-main-view,
+#fullscreen-cover-overlay.ui-hidden .fullscreen-controls,
+#fullscreen-cover-overlay.ui-hidden #fullscreen-next-track,
+#fullscreen-cover-overlay.ui-hidden .fullscreen-lyrics-toggle,
+#fullscreen-cover-overlay.ui-hidden #close-fullscreen-cover-btn {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(20px);
+}
+
+#fullscreen-cover-overlay.is-video-mode.ui-hidden .fullscreen-controls {
+    transform: translateY(100px);
+}
+
+#fullscreen-cover-overlay.is-video-mode.ui-hidden .fullscreen-main-view {
+    transform: translateY(0);
 }
 
 /* Modals */
@@ -7941,3 +8041,50 @@ textarea:focus {
     font-size: 0.85rem;
     color: var(--muted-foreground);
 }
+
+.video-card .card-image-container {
+    aspect-ratio: 16 / 9 !important;
+}
+
+.video-card .card-image {
+    aspect-ratio: 16 / 9 !important;
+    object-fit: cover !important;
+}
+
+.video-duration-badge {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    pointer-events: none;
+    z-index: 5;
+}
+
+#fullscreen-video-container {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    background: black;
+    display: none;
+    justify-content: center;
+    align-items: center;
+}
+
+#fullscreen-video-container video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.search-tab[data-tab="videos"] {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}

From c8b919a4c7d8fd1d99430bf7d7767450fd6c0880 Mon Sep 17 00:00:00 2001
From: SamidyFR <168582143+SamidyFR@users.noreply.github.com>
Date: Mon, 9 Mar 2026 00:04:26 +0000
Subject: [PATCH 25/26] style: auto-fix linting issues

---
 index.html                |  20 +++++--
 js/accounts/pocketbase.js |   4 +-
 js/api.js                 |  74 +++++++++++++------------
 js/events.js              |   5 +-
 js/hls-downloader.js      |   2 +-
 js/music-api.js           |   2 +-
 js/player.js              |   9 +--
 js/settings.js            |   4 +-
 js/ui.js                  | 114 +++++++++++++++++++++++++-------------
 styles.css                |  21 +++----
 10 files changed, 154 insertions(+), 101 deletions(-)

diff --git a/index.html b/index.html
index b423b7c..d8e8e0c 100644
--- a/index.html
+++ b/index.html
@@ -124,7 +124,20 @@
                 <div id="visualizer-container">
                     <canvas id="visualizer-canvas"></canvas>
                 </div>
-                <div id="fullscreen-video-container" style="display: none; position: absolute; inset: 0; width: 100%; height: 100%; justify-content: center; align-items: center; background: black; z-index: 0;"></div>
+                <div
+                    id="fullscreen-video-container"
+                    style="
+                        display: none;
+                        position: absolute;
+                        inset: 0;
+                        width: 100%;
+                        height: 100%;
+                        justify-content: center;
+                        align-items: center;
+                        background: black;
+                        z-index: 0;
+                    "
+                ></div>
                 <button id="toggle-ui-btn" class="fullscreen-ui-toggle" title="Toggle UI">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -168,7 +181,6 @@
                     />
 
                     <div class="fullscreen-track-info">
-
                         <h2 id="fullscreen-track-title"></h2>
                         <h3 id="fullscreen-track-artist"></h3>
                         <div class="fullscreen-actions">
@@ -3771,8 +3783,8 @@
                                     <div class="info">
                                         <span class="label">Visualizer Brightness</span>
                                         <span class="description"
-                                            >Adjust the brightness of the visualizer. Lower this if the visualizer
-                                            is too bright for you.</span
+                                            >Adjust the brightness of the visualizer. Lower this if the visualizer is
+                                            too bright for you.</span
                                         >
                                     </div>
                                     <div style="display: flex; align-items: center; gap: 10px">
diff --git a/js/accounts/pocketbase.js b/js/accounts/pocketbase.js
index e43a7d8..67a2f08 100644
--- a/js/accounts/pocketbase.js
+++ b/js/accounts/pocketbase.js
@@ -585,7 +585,9 @@ const syncManager = {
                                 id: playlist.id,
                                 name: playlist.name,
                                 cover: playlist.cover || null,
-                                tracks: playlist.tracks ? playlist.tracks.map((t) => this._minifyItem(t.type || 'track', t)) : [],
+                                tracks: playlist.tracks
+                                    ? playlist.tracks.map((t) => this._minifyItem(t.type || 'track', t))
+                                    : [],
                                 createdAt: playlist.createdAt || Date.now(),
                                 updatedAt: playlist.updatedAt || Date.now(),
                                 numberOfTracks: playlist.tracks ? playlist.tracks.length : 0,
diff --git a/js/api.js b/js/api.js
index 9bacdd7..a2e52df 100644
--- a/js/api.js
+++ b/js/api.js
@@ -892,10 +892,10 @@ export class LosslessAPI {
                     const numericArtistId = Number(artistId);
                     for (const item of videoSearch.items) {
                         const itemArtistId = item.artist?.id;
-                        const matchesArtist = 
-                            itemArtistId === numericArtistId || 
-                            (Array.isArray(item.artists) && item.artists.some(a => a.id === numericArtistId));
-                        
+                        const matchesArtist =
+                            itemArtistId === numericArtistId ||
+                            (Array.isArray(item.artists) && item.artists.some((a) => a.id === numericArtistId));
+
                         if (matchesArtist && !videoMap.has(item.id)) {
                             videoMap.set(item.id, item);
                         }
@@ -918,8 +918,9 @@ export class LosslessAPI {
             .sort((a, b) => (b.popularity || 0) - (a.popularity || 0))
             .slice(0, 15);
 
-        const videos = Array.from(videoMap.values())
-            .sort((a, b) => new Date(b.releaseDate || 0) - new Date(a.releaseDate || 0));
+        const videos = Array.from(videoMap.values()).sort(
+            (a, b) => new Date(b.releaseDate || 0) - new Date(a.releaseDate || 0)
+        );
 
         // Enrich tracks with album release dates
         const tracks = options.lightweight ? topTracks : await this.enrichTracksWithAlbumDates(topTracks);
@@ -1281,8 +1282,8 @@ export class LosslessAPI {
                     return null;
                 };
 
-                const manifest = isVideo 
-                    ? (findValue(lookup, 'manifest') || findValue(lookup, 'Manifest'))
+                const manifest = isVideo
+                    ? findValue(lookup, 'manifest') || findValue(lookup, 'Manifest')
                     : lookup.info?.manifest;
 
                 if (!manifest) {
@@ -1325,7 +1326,8 @@ export class LosslessAPI {
                     console.error('HLS download failed:', hlsError);
                     throw hlsError;
                 }
-            } else {                const response = await fetch(streamUrl, {
+            } else {
+                const response = await fetch(streamUrl, {
                     cache: 'no-store',
                     signal: options.signal,
                 });
@@ -1389,38 +1391,38 @@ export class LosslessAPI {
                     }
                 }
 
-            if (quality.endsWith('LOSSLESS')) {
-                try {
-                    switch (losslessContainerSettings.getContainer()) {
-                        case 'flac':
-                            if ((await getExtensionFromBlob(blob)) != 'flac') {
+                if (quality.endsWith('LOSSLESS')) {
+                    try {
+                        switch (losslessContainerSettings.getContainer()) {
+                            case 'flac':
+                                if ((await getExtensionFromBlob(blob)) != 'flac') {
+                                    blob = await ffmpeg(
+                                        blob,
+                                        { args: ['-vn', '-map_metadata', '-1', '-map', '0:a', '-c:a', 'flac'] },
+                                        'output.flac',
+                                        'audio/flac',
+                                        onProgress,
+                                        options.signal
+                                    );
+                                }
+                                break;
+                            case 'alac':
                                 blob = await ffmpeg(
                                     blob,
-                                    { args: ['-vn', '-map_metadata', '-1', '-map', '0:a', '-c:a', 'flac'] },
-                                    'output.flac',
-                                    'audio/flac',
+                                    { args: ['-c:a', 'alac'] },
+                                    'output.m4a',
+                                    'audio/mp4',
                                     onProgress,
                                     options.signal
                                 );
-                            }
-                            break;
-                        case 'alac':
-                            blob = await ffmpeg(
-                                blob,
-                                { args: ['-c:a', 'alac'] },
-                                'output.m4a',
-                                'audio/mp4',
-                                onProgress,
-                                options.signal
-                            );
-                            break;
-                        default:
-                            break;
-                    }
-                } catch (error) {
-                    if (error?.name === 'AbortError') {
-                        throw error;
-                    }
+                                break;
+                            default:
+                                break;
+                        }
+                    } catch (error) {
+                        if (error?.name === 'AbortError') {
+                            throw error;
+                        }
 
                         console.error('Lossless container conversion failed:', error);
                     }
diff --git a/js/events.js b/js/events.js
index e471147..c2f9b2d 100644
--- a/js/events.js
+++ b/js/events.js
@@ -1074,7 +1074,10 @@ export async function handleTrackAction(
                                 trackDataStore.set(newEl, item);
                                 ui.updateLikeState(newEl, 'video', item.id);
                                 newEl.addEventListener('click', (e) => {
-                                    if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) {
+                                    if (
+                                        e.target.closest('.card-play-btn') ||
+                                        e.target.closest('.card-image-container')
+                                    ) {
                                         e.stopPropagation();
                                         player.playVideo(item);
                                     }
diff --git a/js/hls-downloader.js b/js/hls-downloader.js
index 2384484..a05aa1e 100644
--- a/js/hls-downloader.js
+++ b/js/hls-downloader.js
@@ -8,7 +8,7 @@ export class HlsDownloader {
         const masterText = await response.text();
 
         const variantUrl = this.getBestVariantUrl(masterUrl, masterText);
-        
+
         const mediaResponse = await fetch(variantUrl, { signal });
         const mediaText = await mediaResponse.text();
 
diff --git a/js/music-api.js b/js/music-api.js
index 81a7cd4..9c76748 100644
--- a/js/music-api.js
+++ b/js/music-api.js
@@ -166,7 +166,7 @@ export class MusicAPI {
             const data = await response.json();
             const result = {
                 videoUrl: data.videoUrl || null,
-                hlsUrl: data.animated || null
+                hlsUrl: data.animated || null,
             };
             this.videoArtworkCache.set(cacheKey, result);
             return result;
diff --git a/js/player.js b/js/player.js
index 7669423..2ab6574 100644
--- a/js/player.js
+++ b/js/player.js
@@ -203,7 +203,8 @@ export class Player {
 
                 if (coverEl) {
                     const videoCoverUrl = track.videoUrl || track.videoCoverUrl || track.album?.videoCoverUrl || null;
-                    const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.image || track.cover || track.album?.cover);
+                    const coverUrl =
+                        videoCoverUrl || this.api.getCoverUrl(track.image || track.cover || track.album?.cover);
 
                     if (videoCoverUrl) {
                         if (coverEl.tagName === 'IMG') {
@@ -453,7 +454,7 @@ export class Player {
             ...video,
             type: 'video',
             artist: video.artist || (video.artists && video.artists[0]) || 'Unknown Artist',
-            album: video.album || { title: 'Video', cover: video.image || video.cover }
+            album: video.album || { title: 'Video', cover: video.image || video.cover },
         };
         this.setQueue([videoTrack], 0);
         await this.playTrackFromQueue();
@@ -490,12 +491,12 @@ export class Player {
 
         const trackInfo = document.querySelector('.now-playing-bar .track-info');
         const coverEl = trackInfo?.querySelector('.cover:not(#audio-player)');
-        
+
         if (track.type === 'video') {
             if (coverEl) coverEl.style.display = 'none';
             if (this.audio) {
                 const isInFullscreen = document.getElementById('fullscreen-cover-overlay')?.style.display === 'flex';
-                
+
                 if (!isInFullscreen) {
                     this.audio.style.display = 'block';
                     this.audio.className = 'cover video-cover-mirror';
diff --git a/js/settings.js b/js/settings.js
index 7b3057e..c52cb0c 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -2143,9 +2143,7 @@ export function initializeSettings(scrobbler, player, api, ui) {
             const newDimming = parseFloat(e.target.value);
             visualizerSettings.setDimAmount(newDimming);
             visualizerDimmingValue.textContent = `${(newDimming * 100).toFixed(0)}%`;
-            window.dispatchEvent(
-                new CustomEvent('visualizer-dim-change', { detail: { dimAmount: newDimming } })
-            );
+            window.dispatchEvent(new CustomEvent('visualizer-dim-change', { detail: { dimAmount: newDimming } }));
         });
     }
 
diff --git a/js/ui.js b/js/ui.js
index 3c82f5b..80cdfee 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -343,7 +343,7 @@ export class UIRenderer {
         const isUnavailable = track.isUnavailable;
         const isBlocked = contentBlockingSettings?.shouldHideTrack(track);
         const isVideo = track.type === 'video';
-        
+
         let trackImageHTML = '';
         if (showCover) {
             if (isVideo && this.currentPage === 'playlist') {
@@ -351,7 +351,12 @@ export class UIRenderer {
             } else if (isVideo && (this.currentPage === 'search' || this.currentPage === 'library')) {
                 trackImageHTML = `<div class="track-item-cover video-icon-placeholder" style="display: flex; align-items: center; justify-content: center; background: var(--secondary);"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="opacity: 0.7;"><path d="M8 5v14l11-7z"/></svg></div>`;
             } else {
-                trackImageHTML = this.getCoverHTML(track.image || track.cover || track.album?.cover, 'Track Cover', 'track-item-cover', 'lazy');
+                trackImageHTML = this.getCoverHTML(
+                    track.image || track.cover || track.album?.cover,
+                    'Track Cover',
+                    'track-item-cover',
+                    'lazy'
+                );
             }
         }
 
@@ -365,7 +370,9 @@ export class UIRenderer {
             displayIndex = index + 1;
         }
 
-        const videoIcon = isVideo ? '<span class="video-item-icon" title="Music Video" style="display: inline-flex; align-items: center; margin-right: 4px; color: var(--muted-foreground);"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg></span>' : '';
+        const videoIcon = isVideo
+            ? '<span class="video-item-icon" title="Music Video" style="display: inline-flex; align-items: center; margin-right: 4px; color: var(--muted-foreground);"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg></span>'
+            : '';
         const trackNumberHTML = `<div class="track-number">${showCover ? trackImageHTML : displayIndex}</div>`;
         const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
         const qualityBadge = createQualityBadgeHTML(track);
@@ -638,7 +645,13 @@ export class UIRenderer {
             href: `/album/${album.id}`,
             title: `${escapeHtml(album.title)} ${explicitBadge} ${qualityBadge}`,
             subtitle: `${escapeHtml(artistName)} • ${yearDisplay}${typeLabel}`,
-            imageHTML: this.getCoverHTML(album.cover, escapeHtml(album.title), 'card-image', 'lazy', album.videoCoverUrl),
+            imageHTML: this.getCoverHTML(
+                album.cover,
+                escapeHtml(album.title),
+                'card-image',
+                'lazy',
+                album.videoCoverUrl
+            ),
             actionButtonsHTML: `
                 <button class="like-btn card-like-btn" data-action="toggle-like" data-type="album" title="Add to Liked">
                     ${this.createHeartIcon(false)}
@@ -655,10 +668,10 @@ export class UIRenderer {
     createVideoCardHTML(video) {
         const duration = formatTime(video.duration);
         const artistName = getTrackArtists(video);
-        
+
         const cover = video.image || video.cover;
         let imageHTML;
-        
+
         if (cover) {
             imageHTML = this.getCoverHTML(cover, escapeHtml(video.title));
         } else {
@@ -998,7 +1011,8 @@ export class UIRenderer {
             if (image) image.style.display = 'block';
             if (visualizerContainer) visualizerContainer.style.display = 'block';
 
-            const videoCoverUrl = track.videoUrl || track.videoCoverUrl || track.album?.videoCoverUrl || null;            const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover, '1280');
+            const videoCoverUrl = track.videoUrl || track.videoCoverUrl || track.album?.videoCoverUrl || null;
+            const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover, '1280');
 
             const fsLikeBtn = document.getElementById('fs-like-btn');
             if (fsLikeBtn) {
@@ -1150,10 +1164,10 @@ export class UIRenderer {
             const coverContainer = document.querySelector('.now-playing-bar .track-info');
             const audioPlayer = document.getElementById('audio-player');
             const imgCover = coverContainer?.querySelector('.cover:not(#audio-player)');
-            
+
             if (audioPlayer && coverContainer) {
                 if (imgCover) imgCover.style.display = 'none';
-                
+
                 audioPlayer.style.display = 'block';
                 audioPlayer.classList.add('cover', 'video-cover-mirror');
                 audioPlayer.style.width = '56px';
@@ -1161,7 +1175,7 @@ export class UIRenderer {
                 audioPlayer.style.borderRadius = 'var(--radius-sm)';
                 audioPlayer.style.objectFit = 'cover';
                 audioPlayer.style.gridArea = 'none';
-                
+
                 if (audioPlayer.parentElement !== coverContainer) {
                     coverContainer.insertBefore(audioPlayer, coverContainer.firstChild);
                 }
@@ -1752,7 +1766,9 @@ export class UIRenderer {
 
         if (myPlaylistsContainer) {
             if (visiblePlaylists.length) {
-                myPlaylistsContainer.innerHTML = visiblePlaylists.map((p) => this.createUserPlaylistCardHTML(p)).join('');
+                myPlaylistsContainer.innerHTML = visiblePlaylists
+                    .map((p) => this.createUserPlaylistCardHTML(p))
+                    .join('');
                 visiblePlaylists.forEach((playlist) => {
                     const el = myPlaylistsContainer.querySelector(`[data-user-playlist-id="${playlist.id}"]`);
                     if (el) {
@@ -2231,7 +2247,13 @@ export class UIRenderer {
             href: `/track/${track.id}`,
             title: `${escapeHtml(getTrackTitle(track))} ${explicitBadge} ${qualityBadge}`,
             subtitle: escapeHtml(getTrackArtists(track)),
-            imageHTML: this.getCoverHTML(track.album?.cover, escapeHtml(track.title), 'card-image', 'lazy', track.videoUrl || track.album?.videoCoverUrl),
+            imageHTML: this.getCoverHTML(
+                track.album?.cover,
+                escapeHtml(track.title),
+                'card-image',
+                'lazy',
+                track.videoUrl || track.album?.videoCoverUrl
+            ),
             actionButtonsHTML: `
                 <button class="like-btn card-like-btn" data-action="toggle-like" data-type="track" title="Add to Liked">
                     ${this.createHeartIcon(false)}
@@ -2634,19 +2656,23 @@ export class UIRenderer {
                 video.replaceWith(img);
             };
 
-            video.addEventListener('error', (e) => {
-                if (video.src === result.videoUrl && result.hlsUrl) {
-                    this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, img);
-                    return;
-                }
-                console.warn('Video decoding error:', e);
-                video.replaceWith(img);
-            }, true);
+            video.addEventListener(
+                'error',
+                (e) => {
+                    if (video.src === result.videoUrl && result.hlsUrl) {
+                        this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, img);
+                        return;
+                    }
+                    console.warn('Video decoding error:', e);
+                    video.replaceWith(img);
+                },
+                true
+            );
 
             img.replaceWith(video);
-            
+
             this.setupHlsVideo(video, result, img);
-            
+
             // If HLS, dont play
             const hls = video._hls;
             if (hls) {
@@ -2932,7 +2958,8 @@ export class UIRenderer {
 
                             this.setupHlsVideo(video, result, currentImageEl);
                             currentImageEl.replaceWith(video);
-                        }                    }
+                        }
+                    }
                 });
             }
 
@@ -3696,7 +3723,8 @@ export class UIRenderer {
                 // Try to get cover from first track album
                 if (tracks.length > 0 && tracks[0].album?.cover) {
                     const firstTrack = tracks[0];
-                    let videoCoverUrl = firstTrack.videoUrl || firstTrack.videoCoverUrl || firstTrack.album?.videoCoverUrl || null;
+                    let videoCoverUrl =
+                        firstTrack.videoUrl || firstTrack.videoCoverUrl || firstTrack.album?.videoCoverUrl || null;
 
                     if (!videoCoverUrl && (firstTrack.album || firstTrack.type === 'video')) {
                         const fetchArtwork = () => {
@@ -3727,14 +3755,17 @@ export class UIRenderer {
                         };
 
                         if (firstTrack.type === 'video') {
-                            this.api.getVideoStreamUrl(firstTrack.id).then((url) => {
-                                if (url) {
-                                    firstTrack.videoUrl = url;
-                                    this.renderMixPage(mixId);
-                                } else {
-                                    fetchArtwork();
-                                }
-                            }).catch(fetchArtwork);
+                            this.api
+                                .getVideoStreamUrl(firstTrack.id)
+                                .then((url) => {
+                                    if (url) {
+                                        firstTrack.videoUrl = url;
+                                        this.renderMixPage(mixId);
+                                    } else {
+                                        fetchArtwork();
+                                    }
+                                })
+                                .catch(fetchArtwork);
                         } else {
                             fetchArtwork();
                         }
@@ -4833,14 +4864,17 @@ export class UIRenderer {
                 };
 
                 if (track.type === 'video') {
-                    this.api.getVideoStreamUrl(track.id).then((url) => {
-                        if (url) {
-                            track.videoUrl = url;
-                            this.renderTrackPage(trackId, provider);
-                        } else {
-                            fetchArtwork();
-                        }
-                    }).catch(fetchArtwork);
+                    this.api
+                        .getVideoStreamUrl(track.id)
+                        .then((url) => {
+                            if (url) {
+                                track.videoUrl = url;
+                                this.renderTrackPage(trackId, provider);
+                            } else {
+                                fetchArtwork();
+                            }
+                        })
+                        .catch(fetchArtwork);
                 } else {
                     fetchArtwork();
                 }
diff --git a/styles.css b/styles.css
index fcc8ab8..4674fe4 100644
--- a/styles.css
+++ b/styles.css
@@ -5348,7 +5348,7 @@ img[src=''] {
     align-items: flex-start;
     padding: 2rem 2rem 6rem;
     pointer-events: none;
-    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 15%, transparent 40%);
+    background: linear-gradient(to top, rgb(0, 0, 0, 0.6) 0%, rgb(0, 0, 0, 0.2) 15%, transparent 40%);
 }
 
 #fullscreen-cover-overlay.is-video-mode .fullscreen-track-info {
@@ -5366,13 +5366,13 @@ img[src=''] {
 #fullscreen-cover-overlay.is-video-mode #fullscreen-track-title {
     font-size: 1.1rem;
     font-weight: 600;
-    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
+    text-shadow: 0 1px 3px rgb(0, 0, 0, 0.8);
     margin-bottom: 0.1rem;
 }
 
 #fullscreen-cover-overlay.is-video-mode #fullscreen-track-artist {
     font-size: 0.9rem;
-    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
+    text-shadow: 0 1px 2px rgb(0, 0, 0, 0.8);
     opacity: 0.7;
 }
 
@@ -5383,13 +5383,15 @@ img[src=''] {
     right: 2rem;
     max-width: 500px;
     margin: 0 auto;
-    background: rgba(15, 15, 15, 0.5);
+    background: rgb(15, 15, 15, 0.5);
     backdrop-filter: blur(12px);
     padding: 0.6rem 1rem;
     border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
-    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
+    border: 1px solid rgb(255, 255, 255, 0.05);
+    box-shadow: 0 4px 20px rgb(0, 0, 0, 0.4);
+    transition:
+        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 0.4s ease;
     pointer-events: auto;
     z-index: 100;
 }
@@ -5427,7 +5429,6 @@ img[src=''] {
     margin-top: 0.5rem;
 }
 
-
 #fullscreen-cover-overlay.ui-hidden .fullscreen-main-view,
 #fullscreen-cover-overlay.ui-hidden .fullscreen-controls,
 #fullscreen-cover-overlay.ui-hidden #fullscreen-next-track,
@@ -8150,7 +8151,7 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
     position: absolute;
     bottom: 8px;
     right: 8px;
-    background: rgba(0, 0, 0, 0.7);
+    background: rgb(0, 0, 0, 0.7);
     color: white;
     padding: 2px 6px;
     border-radius: 4px;
@@ -8178,7 +8179,7 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
     object-fit: contain;
 }
 
-.search-tab[data-tab="videos"] {
+.search-tab[data-tab='videos'] {
     display: flex;
     align-items: center;
     gap: 0.5rem;

From 7849be77203912b64cc1245bb164e822fbce8b2e Mon Sep 17 00:00:00 2001
From: Samidy <samidy@proton.me>
Date: Mon, 9 Mar 2026 03:11:54 +0300
Subject: [PATCH 26/26] fix

---
 package-lock.json | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 3b1f6fe..e9bffe0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
                 "cookie-session": "^2.1.1",
                 "dashjs": "^5.1.1",
                 "fuse.js": "^7.1.0",
+                "hls.js": "^1.6.15",
                 "jose": "^6.1.3",
                 "pocketbase": "^0.26.8"
             },
@@ -6324,6 +6325,12 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/hls.js": {
+            "version": "1.6.15",
+            "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz",
+            "integrity": "sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==",
+            "license": "Apache-2.0"
+        },
         "node_modules/hookified": {
             "version": "1.15.1",
             "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.15.1.tgz",