@vanduo-oss/framework 1.4.1 → 1.4.3

package/dist/vanduo.cjs.js

@@ -1,4 +1,4 @@
-/*! Vanduo v1.4.1 | Built: 2026-05-23T09:27:52.907Z | git:4799a84 | development */
+/*! Vanduo v1.4.3 | Built: 2026-05-28T13:14:25.371Z | git:02ef7f6 | development */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -201,7 +201,7 @@ module.exports = __toCommonJS(index_exports);
 // js/vanduo.js
 (function() {
   "use strict";
-  const VANDUO_VERSION = true ? "1.4.1" : "0.0.0-dev";
+  const VANDUO_VERSION = true ? "1.4.3" : "0.0.0-dev";
   const hasOwn = Object.prototype.hasOwnProperty;
   const Vanduo2 = {
     version: VANDUO_VERSION,
@@ -874,12 +874,38 @@ module.exports = __toCommonJS(index_exports);
      * @returns {string} HTML with syntax highlighting spans
      */
     highlightHtml: function(html) {
-      html = html.replace(/(&lt;\/?)([\w-]+)/g, '$1<span class="code-tag">$2</span>');
-      html = html.replace(/([\w-]+)(=)(["'])/g, '<span class="code-attr">$1</span>$2$3');
-      html = html.replace(/([\w-]+)(=)(&quot;|&#39;)/g, '<span class="code-attr">$1</span>$2$3');
-      html = html.replace(/(["'])([^"']*)(["'])/g, '$1<span class="code-string">$2</span>$3');
-      html = html.replace(/(&quot;|&#39;)([^&]*)(&quot;|&#39;)/g, '$1<span class="code-string">$2</span>$3');
       html = html.replace(/(&lt;!--)(.*?)(--&gt;)/g, '<span class="code-comment">$1$2$3</span>');
+      html = html.replace(/&lt;(?!--)([\s\S]*?)&gt;/g, function(match, inner) {
+        const closingMatch = inner.match(/^(\/)([\w-]+)\s*$/);
+        if (closingMatch) {
+          return "&lt;" + closingMatch[1] + '<span class="code-tag">' + closingMatch[2] + "</span>&gt;";
+        }
+        const selfClosingMatch = inner.match(/(\s*\/)\s*$/);
+        const selfClosingSuffix = selfClosingMatch ? selfClosingMatch[1] : "";
+        const tagSource = selfClosingMatch ? inner.slice(0, inner.length - selfClosingMatch[0].length) : inner;
+        const openMatch = tagSource.match(/^([\w-]+)([\s\S]*)$/);
+        if (!openMatch) {
+          return match;
+        }
+        const tagName = openMatch[1];
+        let attrSource = openMatch[2];
+        attrSource = attrSource.replace(
+          /([\w:-]+)(\s*=\s*)(["'])([\s\S]*?)\3/g,
+          function(attrMatch, attrName, separator, quote, value) {
+            return '<span class="code-attr">' + attrName + "</span>" + separator + quote + '<span class="code-string">' + value + "</span>" + quote;
+          }
+        );
+        attrSource = attrSource.replace(
+          /([\w:-]+)(\s*=\s*)(&quot;|&#39;)([\s\S]*?)(&quot;|&#39;)/g,
+          function(attrMatch, attrName, separator, openQuote, value, closeQuote) {
+            if (openQuote !== closeQuote) {
+              return attrMatch;
+            }
+            return '<span class="code-attr">' + attrName + "</span>" + separator + openQuote + '<span class="code-string">' + value + "</span>" + closeQuote;
+          }
+        );
+        return '&lt;<span class="code-tag">' + tagName + "</span>" + attrSource + selfClosingSuffix + "&gt;";
+      });
       return html;
     },
     /**
@@ -901,16 +927,26 @@ module.exports = __toCommonJS(index_exports);
      * @returns {string} JS with syntax highlighting spans
      */
     highlightJs: function(js) {
+      const protectedTokens = [];
+      const protectToken = (value, className) => {
+        const marker = String.fromCharCode(57344 + protectedTokens.length);
+        protectedTokens.push({ marker, html: '<span class="' + className + '">' + value + "</span>" });
+        return marker;
+      };
+      js = js.replace(
+        /\/\*[\s\S]*?\*\/|\/\/.*$|'(?:[^'\\]|\\.){0,10000}'|"(?:[^"\\]|\\.){0,10000}"|`(?:[^`\\]|\\.){0,10000}`/gm,
+        (match) => protectToken(match, match.startsWith("/") ? "code-comment" : "code-string")
+      );
       const keywords = ["const", "let", "var", "function", "return", "if", "else", "for", "while", "switch", "case", "break", "continue", "new", "this", "class", "extends", "import", "export", "default", "async", "await", "try", "catch", "throw", "typeof", "instanceof"];
       keywords.forEach((kw) => {
         const regex = new RegExp(`\\b(${kw})\\b`, "g");
         js = js.replace(regex, '<span class="code-keyword">$1</span>');
       });
-      js = js.replace(/('(?:[^'\\]|\\.){0,10000}'|"(?:[^"\\]|\\.){0,10000}"|`(?:[^`\\]|\\.){0,10000}`)/g, '<span class="code-string">$1</span>');
       js = js.replace(/\b(\d+\.?\d*)\b/g, '<span class="code-number">$1</span>');
       js = js.replace(/\b([\w]+)(\s*\()/g, '<span class="code-function">$1</span>$2');
-      js = js.replace(/(\/\/.*$)/gm, '<span class="code-comment">$1</span>');
-      js = js.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="code-comment">$1</span>');
+      protectedTokens.forEach((token) => {
+        js = js.replace(token.marker, token.html);
+      });
       return js;
     },
     /**
@@ -8456,11 +8492,6 @@ module.exports = __toCommonJS(index_exports);
 // js/components/suggest.js
 (function() {
   "use strict";
-  function _escapeHtml(text) {
-    const div = document.createElement("div");
-    div.textContent = text;
-    return div.innerHTML;
-  }
   function _isSafeUrl(url, allowlist) {
     try {
       const resolved = new URL(url, window.location.href);
@@ -8531,9 +8562,24 @@ module.exports = __toCommonJS(index_exports);
           li.id = listId + "-item-" + i;
           const text = typeof item === "object" ? item.label || item.text || String(item) : String(item);
           if (query) {
-            const escaped = _escapeHtml(text);
-            const re = new RegExp("(" + query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")", "gi");
-            li.innerHTML = escaped.replace(re, '<span class="vd-suggest-match">$1</span>');
+            const lowerText = text.toLowerCase();
+            const lowerQuery = query.toLowerCase();
+            let start = 0;
+            let matchIndex = lowerText.indexOf(lowerQuery, start);
+            while (matchIndex !== -1) {
+              if (matchIndex > start) {
+                li.appendChild(document.createTextNode(text.slice(start, matchIndex)));
+              }
+              const matchSpan = document.createElement("span");
+              matchSpan.className = "vd-suggest-match";
+              matchSpan.textContent = text.slice(matchIndex, matchIndex + query.length);
+              li.appendChild(matchSpan);
+              start = matchIndex + query.length;
+              matchIndex = lowerText.indexOf(lowerQuery, start);
+            }
+            if (start < text.length) {
+              li.appendChild(document.createTextNode(text.slice(start)));
+            }
           } else {
             li.textContent = text;
           }
@@ -8959,6 +9005,27 @@ module.exports = __toCommonJS(index_exports);
     x.setDate(x.getDate() + (6 - day));
     return x;
   }
+  function positionAnchoredPopup(anchor, popup, gap) {
+    const padding = 8;
+    const offset = gap != null ? gap : 4;
+    const rect = anchor.getBoundingClientRect();
+    popup.style.minWidth = Math.max(rect.width, 0) + "px";
+    let top = rect.bottom + offset;
+    let left = rect.left;
+    popup.style.top = top + "px";
+    popup.style.left = left + "px";
+    const popRect = popup.getBoundingClientRect();
+    if (popRect.bottom > window.innerHeight - padding && rect.top - popRect.height > padding) {
+      top = rect.top - popRect.height - offset;
+      popup.style.top = top + "px";
+    }
+    const alignedRect = popup.getBoundingClientRect();
+    left = rect.left;
+    if (left + alignedRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - alignedRect.width - padding;
+    }
+    popup.style.left = Math.max(padding, left) + "px";
+  }
   const Datepicker = {
     instances: /* @__PURE__ */ new Map(),
     init: function(root) {
@@ -8982,6 +9049,7 @@ module.exports = __toCommonJS(index_exports);
       let viewMode = "days";
       let focusedDate = null;
       let skipNextFocusOpen = false;
+      let ignoreOutsideUntil = 0;
       const isDisabled = (d) => {
         if (minDate) {
           const t = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
@@ -9040,7 +9108,7 @@ module.exports = __toCommonJS(index_exports);
       wrapper.style.display = "inline-block";
       input.parentNode.insertBefore(wrapper, input);
       wrapper.appendChild(input);
-      wrapper.appendChild(popup);
+      document.body.appendChild(popup);
       const isSameDay = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
       const selectDate = (date) => {
         selectedDate = date;
@@ -9270,6 +9338,9 @@ module.exports = __toCommonJS(index_exports);
           }
           popup.appendChild(grid);
         }
+        if (popup.classList.contains("is-open")) {
+          requestAnimationFrame(positionPopup);
+        }
       };
       const handleGridKeydown = (e) => {
         if (!popup.classList.contains("is-open") || viewMode !== "days") return;
@@ -9337,7 +9408,18 @@ module.exports = __toCommonJS(index_exports);
         render();
         requestAnimationFrame(focusFocusedDay);
       };
+      const positionPopup = () => {
+        if (!popup.classList.contains("is-open")) return;
+        positionAnchoredPopup(input, popup);
+      };
+      const repositionHandler = () => {
+        positionPopup();
+      };
+      const markIgnoreOutside = () => {
+        ignoreOutsideUntil = Date.now() + 100;
+      };
       const open = () => {
+        markIgnoreOutside();
         viewMode = "days";
         if (selectedDate) {
           viewYear = selectedDate.getFullYear();
@@ -9354,7 +9436,10 @@ module.exports = __toCommonJS(index_exports);
         render();
         popup.classList.add("is-open");
         input.setAttribute("aria-expanded", "true");
-        requestAnimationFrame(focusFocusedDay);
+        requestAnimationFrame(() => {
+          positionPopup();
+          focusFocusedDay();
+        });
       };
       const close = () => {
         popup.classList.remove("is-open");
@@ -9368,8 +9453,22 @@ module.exports = __toCommonJS(index_exports);
         }
         open();
       };
+      const clickHandler = () => {
+        if (!popup.classList.contains("is-open")) open();
+      };
+      const isOpenAnchorTarget = (target) => {
+        if (!target || !(target instanceof Node)) return false;
+        if (target === input || input.contains(target) || popup.contains(target)) return true;
+        const inputId = input.id;
+        if (inputId) {
+          const label = document.querySelector('label[for="' + inputId.replace(/"/g, '\\"') + '"]');
+          if (label && (target === label || label.contains(target))) return true;
+        }
+        return false;
+      };
       const outsideHandler = (e) => {
-        if (!wrapper.contains(e.target)) close();
+        if (Date.now() < ignoreOutsideUntil) return;
+        if (!isOpenAnchorTarget(e.target)) close();
       };
       const escHandler = (e) => {
         if (e.key === "Escape" && popup.classList.contains("is-open")) {
@@ -9379,17 +9478,24 @@ module.exports = __toCommonJS(index_exports);
         }
       };
       input.addEventListener("focus", focusHandler);
+      input.addEventListener("click", clickHandler);
       document.addEventListener("click", outsideHandler, true);
       document.addEventListener("keydown", escHandler);
       popup.addEventListener("keydown", handleGridKeydown);
+      window.addEventListener("resize", repositionHandler);
+      window.addEventListener("scroll", repositionHandler, true);
       input.setAttribute("aria-haspopup", "dialog");
       input.setAttribute("aria-expanded", "false");
       input.setAttribute("autocomplete", "off");
       cleanup.push(
         () => input.removeEventListener("focus", focusHandler),
+        () => input.removeEventListener("click", clickHandler),
         () => document.removeEventListener("click", outsideHandler, true),
         () => document.removeEventListener("keydown", escHandler),
-        () => popup.removeEventListener("keydown", handleGridKeydown)
+        () => popup.removeEventListener("keydown", handleGridKeydown),
+        () => window.removeEventListener("resize", repositionHandler),
+        () => window.removeEventListener("scroll", repositionHandler, true),
+        () => popup.remove()
       );
       this.instances.set(input, { cleanup, open, close, popup });
     },
@@ -9412,6 +9518,27 @@ module.exports = __toCommonJS(index_exports);
 // js/components/timepicker.js
 (function() {
   "use strict";
+  function positionAnchoredPopup(anchor, popup, gap) {
+    const padding = 8;
+    const offset = gap != null ? gap : 4;
+    const rect = anchor.getBoundingClientRect();
+    popup.style.minWidth = Math.max(rect.width, 0) + "px";
+    let top = rect.bottom + offset;
+    let left = rect.left;
+    popup.style.top = top + "px";
+    popup.style.left = left + "px";
+    const popRect = popup.getBoundingClientRect();
+    if (popRect.bottom > window.innerHeight - padding && rect.top - popRect.height > padding) {
+      top = rect.top - popRect.height - offset;
+      popup.style.top = top + "px";
+    }
+    const alignedRect = popup.getBoundingClientRect();
+    left = rect.left;
+    if (left + alignedRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - alignedRect.width - padding;
+    }
+    popup.style.left = Math.max(padding, left) + "px";
+  }
   const Timepicker = {
     instances: /* @__PURE__ */ new Map(),
     init: function(root) {
@@ -9436,7 +9563,7 @@ module.exports = __toCommonJS(index_exports);
       const popup = document.createElement("div");
       popup.className = "vd-timepicker-popup";
       popup.setAttribute("role", "listbox");
-      wrapper.appendChild(popup);
+      document.body.appendChild(popup);
       const times = [];
       for (let h = 0; h < 24; h++) {
         for (let m = 0; m < 60; m += step) {
@@ -9476,12 +9603,22 @@ module.exports = __toCommonJS(index_exports);
           popup.appendChild(item);
         });
       };
+      const positionPopup = () => {
+        if (!popup.classList.contains("is-open")) return;
+        positionAnchoredPopup(input, popup);
+      };
+      const repositionHandler = () => {
+        positionPopup();
+      };
       const open = () => {
         render();
         popup.classList.add("is-open");
         input.setAttribute("aria-expanded", "true");
-        const selected = popup.querySelector(".is-selected");
-        if (selected) selected.scrollIntoView({ block: "center" });
+        requestAnimationFrame(() => {
+          positionPopup();
+          const selected = popup.querySelector(".is-selected");
+          if (selected) selected.scrollIntoView({ block: "center" });
+        });
       };
       const close = () => {
         popup.classList.remove("is-open");
@@ -9489,7 +9626,7 @@ module.exports = __toCommonJS(index_exports);
       };
       const focusHandler = () => open();
       const outsideHandler = (e) => {
-        if (!wrapper.contains(e.target)) close();
+        if (!input.contains(e.target) && !popup.contains(e.target)) close();
       };
       const escHandler = (e) => {
         if (e.key === "Escape") close();
@@ -9497,6 +9634,8 @@ module.exports = __toCommonJS(index_exports);
       input.addEventListener("focus", focusHandler);
       document.addEventListener("click", outsideHandler, true);
       document.addEventListener("keydown", escHandler);
+      window.addEventListener("resize", repositionHandler);
+      window.addEventListener("scroll", repositionHandler, true);
       input.setAttribute("aria-haspopup", "listbox");
       input.setAttribute("aria-expanded", "false");
       input.setAttribute("autocomplete", "off");
@@ -9504,7 +9643,10 @@ module.exports = __toCommonJS(index_exports);
       cleanup.push(
         () => input.removeEventListener("focus", focusHandler),
         () => document.removeEventListener("click", outsideHandler, true),
-        () => document.removeEventListener("keydown", escHandler)
+        () => document.removeEventListener("keydown", escHandler),
+        () => window.removeEventListener("resize", repositionHandler),
+        () => window.removeEventListener("scroll", repositionHandler, true),
+        () => popup.remove()
       );
       this.instances.set(input, { cleanup, open, close });
     },
@@ -10280,1072 +10422,6 @@ module.exports = __toCommonJS(index_exports);
   window.VanduoSpotlight = Spotlight;
 })();
 
-// js/components/music-player.js
-(function() {
-  "use strict";
-  function shuffleArray(arr) {
-    const shuffled = arr.slice();
-    for (let i = shuffled.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      const tmp = shuffled[i];
-      shuffled[i] = shuffled[j];
-      shuffled[j] = tmp;
-    }
-    return shuffled;
-  }
-  function formatTime(seconds) {
-    if (!isFinite(seconds) || seconds < 0) return "0:00";
-    const m = Math.floor(seconds / 60);
-    const s = Math.floor(seconds % 60);
-    return m + ":" + (s < 10 ? "0" : "") + s;
-  }
-  function persistStorageKey(id) {
-    return "vanduo:music-player:" + (id && id.trim() ? id.trim() : "default") + ":pos";
-  }
-  function updateRangeFill(input) {
-    const min = parseFloat(input.min) || 0;
-    const max = parseFloat(input.max) || 1;
-    const val = parseFloat(input.value) || 0;
-    const pct = (val - min) / (max - min) * 100;
-    input.style.setProperty("--vd-fill", pct + "%");
-    input.style.backgroundImage = "linear-gradient(to right, var(--vd-music-player-track-fill, currentColor) 0%, var(--vd-music-player-track-fill, currentColor) " + pct + "%, var(--vd-music-player-track-bg, #ccc) " + pct + "%, var(--vd-music-player-track-bg, #ccc) 100%)";
-  }
-  function icon(name) {
-    const el = document.createElement("i");
-    el.className = "ph ph-" + name;
-    el.setAttribute("aria-hidden", "true");
-    return el;
-  }
-  const MusicPlayer = {
-    /** @type {Map<HTMLElement, Object>} */
-    instances: /* @__PURE__ */ new Map(),
-    /**
-     * Default options.
-     */
-    defaults: {
-      tracks: [],
-      volume: 0.5,
-      shuffle: false,
-      showProgress: false,
-      showPlaylist: false,
-      autoAdvance: true,
-      glass: false,
-      detachable: false,
-      /** @type {null|string} */
-      floatingPosition: null,
-      draggable: false,
-      minimizable: false,
-      startMinimized: false,
-      persistPosition: false,
-      persistKey: ""
-    },
-    /**
-     * Auto-initialize all .vd-music-player / [data-music-player] elements.
-     * Options can be provided via data-music-player-options (JSON string).
-     */
-    init: function(root) {
-      window.Vanduo.queryAll(root, ".vd-music-player, [data-music-player]").forEach((el) => {
-        if (this.instances.has(el)) return;
-        let opts = {};
-        const attr = el.getAttribute("data-music-player-options");
-        if (attr) {
-          try {
-            opts = JSON.parse(attr);
-          } catch (_) {
-          }
-        }
-        this.initPlayer(el, opts);
-      });
-    },
-    /**
-     * Initialize a single player element.
-     * @param {HTMLElement} container
-     * @param {Object} [options]
-     */
-    initPlayer: function(container, options) {
-      const opts = Object.assign({}, this.defaults, options || {});
-      const rawTracks = Array.isArray(opts.tracks) ? opts.tracks : [];
-      const tracks = rawTracks.filter((t) => t && typeof t.url === "string" && t.url.trim());
-      const trackList = opts.shuffle ? shuffleArray(tracks) : tracks.slice();
-      const state = {
-        tracks: trackList,
-        originalTracks: tracks.slice(),
-        currentIndex: 0,
-        isPlaying: false,
-        volume: Math.max(0, Math.min(1, opts.volume)),
-        shuffle: opts.shuffle,
-        showProgress: opts.showProgress,
-        showPlaylist: opts.showPlaylist,
-        autoAdvance: opts.autoAdvance,
-        audio: null,
-        glass: Boolean(opts.glass),
-        detachable: Boolean(opts.detachable),
-        floatingPosition: opts.floatingPosition || "bottom-right",
-        draggable: Boolean(opts.draggable) && Boolean(opts.detachable),
-        minimizable: Boolean(opts.minimizable),
-        startMinimized: Boolean(opts.startMinimized),
-        persistPosition: Boolean(opts.persistPosition),
-        persistKey: typeof opts.persistKey === "string" ? opts.persistKey : "",
-        isDetached: false,
-        isMinimized: false,
-        _startMinimizeApplied: false
-      };
-      const audio = new Audio();
-      audio.volume = state.volume;
-      audio.preload = "metadata";
-      state.audio = audio;
-      this._buildDOM(container, state);
-      const refs = {
-        btnPlay: container.querySelector(".vd-music-player-btn-play"),
-        btnPrev: container.querySelector(".vd-music-player-btn-prev"),
-        btnNext: container.querySelector(".vd-music-player-btn-next"),
-        btnShuffle: container.querySelector(".vd-music-player-btn-shuffle"),
-        btnPlaylist: container.querySelector(".vd-music-player-btn-playlist"),
-        btnDetach: container.querySelector(".vd-music-player-btn-detach"),
-        btnAttach: container.querySelector(".vd-music-player-btn-attach"),
-        btnMinimize: container.querySelector(".vd-music-player-btn-minimize"),
-        dragHandle: container.querySelector(".vd-music-player-drag-handle"),
-        trackName: container.querySelector(".vd-music-player-track-name"),
-        volumeSlider: container.querySelector(".vd-music-player-volume-slider"),
-        volumeIcon: container.querySelector(".vd-music-player-volume-icon"),
-        progressBar: container.querySelector(".vd-music-player-progress-bar"),
-        timeElapsed: container.querySelector(".vd-music-player-time-elapsed"),
-        timeDuration: container.querySelector(".vd-music-player-time-duration"),
-        playlistPanel: container.querySelector(".vd-music-player-playlist")
-      };
-      const renderPlayIcon = () => {
-        const btn = refs.btnPlay;
-        if (!btn) return;
-        btn.innerHTML = "";
-        btn.appendChild(icon(state.isPlaying ? "pause" : "play"));
-        btn.setAttribute("aria-label", state.isPlaying ? "Pause" : "Play");
-        btn.classList.toggle("is-active", state.isPlaying);
-      };
-      const renderTrackName = () => {
-        const el = refs.trackName;
-        if (!el) return;
-        const track = state.tracks[state.currentIndex];
-        if (track) {
-          el.textContent = track.name || "Unknown Track";
-          el.classList.remove("is-idle");
-        } else {
-          el.textContent = "No tracks loaded";
-          el.classList.add("is-idle");
-        }
-      };
-      const renderVolumeIcon = () => {
-        const el = refs.volumeIcon;
-        if (!el) return;
-        el.innerHTML = "";
-        const v = state.volume;
-        const name = v === 0 ? "speaker-none" : v < 0.5 ? "speaker-low" : "speaker-high";
-        el.appendChild(icon(name));
-      };
-      const renderShuffleBtn = () => {
-        const btn = refs.btnShuffle;
-        if (!btn) return;
-        btn.classList.toggle("is-active", state.shuffle);
-        btn.setAttribute("aria-pressed", state.shuffle ? "true" : "false");
-      };
-      const renderPlaylistItems = () => {
-        const panel = refs.playlistPanel;
-        if (!panel) return;
-        panel.innerHTML = "";
-        state.tracks.forEach((track, i) => {
-          const item = document.createElement("button");
-          item.className = "vd-music-player-playlist-item" + (i === state.currentIndex ? " is-active" : "");
-          item.type = "button";
-          item.setAttribute("data-index", String(i));
-          item.setAttribute("aria-current", i === state.currentIndex ? "true" : "false");
-          const num = document.createElement("span");
-          num.className = "vd-music-player-playlist-num";
-          num.textContent = String(i + 1);
-          const name = document.createElement("span");
-          name.className = "vd-music-player-playlist-name";
-          name.textContent = track.name || "Track " + (i + 1);
-          item.appendChild(num);
-          item.appendChild(name);
-          panel.appendChild(item);
-        });
-      };
-      const renderProgress = () => {
-        const bar = refs.progressBar;
-        if (!bar || !audio.duration) return;
-        const pct = audio.currentTime / audio.duration * 100;
-        bar.value = String(pct);
-        updateRangeFill(bar);
-        if (refs.timeElapsed) refs.timeElapsed.textContent = formatTime(audio.currentTime);
-        if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);
-      };
-      const loadTrack = (index, autoPlay) => {
-        const track = state.tracks[index];
-        if (!track) return;
-        state.currentIndex = index;
-        audio.src = track.url;
-        renderTrackName();
-        renderPlaylistItems();
-        if (refs.progressBar) {
-          refs.progressBar.value = "0";
-          updateRangeFill(refs.progressBar);
-        }
-        if (refs.timeElapsed) refs.timeElapsed.textContent = "0:00";
-        if (refs.timeDuration) refs.timeDuration.textContent = "0:00";
-        container.dispatchEvent(
-          new CustomEvent("musicplayer:trackchange", {
-            bubbles: true,
-            detail: { index, name: track.name, url: track.url }
-          })
-        );
-        if (autoPlay) {
-          audio.play().catch(() => {
-          });
-        }
-      };
-      const cleanupFunctions = [];
-      const onPlay = () => {
-        state.isPlaying = true;
-        renderPlayIcon();
-        container.dispatchEvent(new CustomEvent("musicplayer:play", { bubbles: true }));
-      };
-      const onPause = () => {
-        state.isPlaying = false;
-        renderPlayIcon();
-        container.dispatchEvent(new CustomEvent("musicplayer:pause", { bubbles: true }));
-      };
-      const onEnded = () => {
-        if (state.autoAdvance && state.tracks.length > 1) {
-          const next = (state.currentIndex + 1) % state.tracks.length;
-          loadTrack(next, true);
-        } else {
-          state.isPlaying = false;
-          renderPlayIcon();
-          container.dispatchEvent(new CustomEvent("musicplayer:ended", { bubbles: true }));
-        }
-      };
-      const onTimeUpdate = () => {
-        if (state.showProgress) renderProgress();
-      };
-      const onLoadedMetadata = () => {
-        if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);
-        if (refs.progressBar) {
-          refs.progressBar.max = "100";
-          updateRangeFill(refs.progressBar);
-        }
-      };
-      audio.addEventListener("play", onPlay);
-      audio.addEventListener("pause", onPause);
-      audio.addEventListener("ended", onEnded);
-      audio.addEventListener("timeupdate", onTimeUpdate);
-      audio.addEventListener("loadedmetadata", onLoadedMetadata);
-      cleanupFunctions.push(() => {
-        audio.removeEventListener("play", onPlay);
-        audio.removeEventListener("pause", onPause);
-        audio.removeEventListener("ended", onEnded);
-        audio.removeEventListener("timeupdate", onTimeUpdate);
-        audio.removeEventListener("loadedmetadata", onLoadedMetadata);
-        audio.pause();
-        audio.src = "";
-      });
-      if (refs.btnPlay) {
-        const handler = () => {
-          if (!audio.src && state.tracks.length) loadTrack(state.currentIndex, false);
-          if (state.isPlaying) {
-            audio.pause();
-          } else {
-            audio.play().catch(() => {
-            });
-          }
-        };
-        refs.btnPlay.addEventListener("click", handler);
-        cleanupFunctions.push(() => refs.btnPlay.removeEventListener("click", handler));
-        const keyHandler = (e) => {
-          if (e.key === " " || e.key === "Enter") {
-            e.preventDefault();
-            handler();
-          }
-        };
-        refs.btnPlay.addEventListener("keydown", keyHandler);
-        cleanupFunctions.push(() => refs.btnPlay.removeEventListener("keydown", keyHandler));
-      }
-      if (refs.btnPrev) {
-        const handler = () => {
-          if (!state.tracks.length) return;
-          if (audio.currentTime > 3) {
-            audio.currentTime = 0;
-          } else {
-            const prev = state.currentIndex === 0 ? state.tracks.length - 1 : state.currentIndex - 1;
-            loadTrack(prev, state.isPlaying);
-          }
-        };
-        refs.btnPrev.addEventListener("click", handler);
-        cleanupFunctions.push(() => refs.btnPrev.removeEventListener("click", handler));
-      }
-      if (refs.btnNext) {
-        const handler = () => {
-          if (!state.tracks.length) return;
-          const next = (state.currentIndex + 1) % state.tracks.length;
-          loadTrack(next, state.isPlaying);
-        };
-        refs.btnNext.addEventListener("click", handler);
-        cleanupFunctions.push(() => refs.btnNext.removeEventListener("click", handler));
-      }
-      if (refs.btnShuffle) {
-        const handler = () => {
-          state.shuffle = !state.shuffle;
-          if (state.shuffle) {
-            const current = state.tracks[state.currentIndex];
-            state.tracks = shuffleArray(state.tracks);
-            const newIdx = state.tracks.findIndex((t) => t === current);
-            if (newIdx > 0) {
-              state.tracks.splice(newIdx, 1);
-              state.tracks.unshift(current);
-            }
-            state.currentIndex = 0;
-          } else {
-            const current = state.tracks[state.currentIndex];
-            state.tracks = state.originalTracks.slice();
-            state.currentIndex = state.tracks.findIndex((t) => t === current);
-            if (state.currentIndex < 0) state.currentIndex = 0;
-          }
-          renderShuffleBtn();
-          renderPlaylistItems();
-        };
-        refs.btnShuffle.addEventListener("click", handler);
-        cleanupFunctions.push(() => refs.btnShuffle.removeEventListener("click", handler));
-      }
-      if (refs.btnPlaylist) {
-        const handler = () => {
-          const panel = refs.playlistPanel;
-          if (!panel) return;
-          const isOpen = panel.classList.toggle("is-open");
-          refs.btnPlaylist.classList.toggle("is-active", isOpen);
-          refs.btnPlaylist.setAttribute("aria-expanded", isOpen ? "true" : "false");
-        };
-        refs.btnPlaylist.addEventListener("click", handler);
-        cleanupFunctions.push(() => refs.btnPlaylist.removeEventListener("click", handler));
-      }
-      if (refs.volumeSlider) {
-        const handler = (e) => {
-          const v = parseFloat(e.target.value);
-          state.volume = v;
-          audio.volume = v;
-          renderVolumeIcon();
-          updateRangeFill(refs.volumeSlider);
-          container.dispatchEvent(
-            new CustomEvent("musicplayer:volumechange", { bubbles: true, detail: { volume: v } })
-          );
-        };
-        refs.volumeSlider.addEventListener("input", handler);
-        cleanupFunctions.push(() => refs.volumeSlider.removeEventListener("input", handler));
-        updateRangeFill(refs.volumeSlider);
-      }
-      if (refs.progressBar) {
-        const handler = (e) => {
-          if (!audio.duration) return;
-          const pct = parseFloat(e.target.value);
-          audio.currentTime = pct / 100 * audio.duration;
-          updateRangeFill(refs.progressBar);
-        };
-        refs.progressBar.addEventListener("input", handler);
-        cleanupFunctions.push(() => refs.progressBar.removeEventListener("input", handler));
-      }
-      if (refs.playlistPanel) {
-        const panelHandler = (e) => {
-          const item = e.target.closest(".vd-music-player-playlist-item");
-          if (!item) return;
-          const idx = parseInt(item.getAttribute("data-index"), 10);
-          if (!isNaN(idx)) loadTrack(idx, true);
-        };
-        refs.playlistPanel.addEventListener("click", panelHandler);
-        cleanupFunctions.push(
-          () => refs.playlistPanel.removeEventListener("click", panelHandler)
-        );
-      }
-      if (refs.btnDetach) {
-        const h = () => {
-          this.detach(container);
-        };
-        refs.btnDetach.addEventListener("click", h);
-        cleanupFunctions.push(() => refs.btnDetach.removeEventListener("click", h));
-      }
-      if (refs.btnAttach) {
-        const h = () => {
-          this.attach(container);
-        };
-        refs.btnAttach.addEventListener("click", h);
-        cleanupFunctions.push(() => refs.btnAttach.removeEventListener("click", h));
-      }
-      if (refs.btnMinimize) {
-        const h = () => {
-          this.toggleMinimize(container);
-        };
-        refs.btnMinimize.addEventListener("click", h);
-        cleanupFunctions.push(() => refs.btnMinimize.removeEventListener("click", h));
-      }
-      renderPlayIcon();
-      renderTrackName();
-      renderVolumeIcon();
-      if (opts.showPlaylist) renderPlaylistItems();
-      this.instances.set(container, {
-        state,
-        audio,
-        refs,
-        cleanup: cleanupFunctions,
-        ui: { restore: null, unbindDrag: null }
-      });
-      container.setAttribute("data-music-player-initialized", "true");
-    },
-    /* ─── DOM builder ─────────────────────────────────────── */
-    /**
-     * Build the inner DOM structure inside container.
-     * Pre-existing inner content is replaced only if it has no
-     * recognised child elements (allows server-rendered markup).
-     * @param {HTMLElement} container
-     * @param {Object} state
-     */
-    _buildDOM: function(container, state) {
-      if (container.querySelector(".vd-music-player-controls")) return;
-      container.setAttribute("role", "region");
-      container.setAttribute("aria-label", "Music Player");
-      if (state.showProgress) container.classList.add("has-progress");
-      if (state.showPlaylist) container.classList.add("has-playlist");
-      if (state.glass) container.classList.add("vd-music-player-glass");
-      if (state.draggable) container.classList.add("vd-music-player-draggable");
-      if (state.detachable || state.minimizable) {
-        const tb = document.createElement("div");
-        tb.className = "vd-music-player-toolbar";
-        tb.setAttribute("role", "toolbar");
-        tb.setAttribute("aria-label", "Player window");
-        if (state.draggable) {
-          const h = document.createElement("button");
-          h.type = "button";
-          h.className = "vd-music-player-drag-handle";
-          h.setAttribute("aria-label", "Drag to move player");
-          h.appendChild(icon("dots-six-vertical"));
-          tb.appendChild(h);
-        }
-        const tSp = document.createElement("span");
-        tSp.className = "vd-music-player-toolbar-spacer";
-        tSp.setAttribute("aria-hidden", "true");
-        tb.appendChild(tSp);
-        if (state.minimizable) {
-          const bMin = document.createElement("button");
-          bMin.type = "button";
-          bMin.className = "vd-music-player-btn vd-music-player-btn-minimize";
-          bMin.setAttribute("aria-label", "Minimize player");
-          bMin.setAttribute("aria-expanded", "true");
-          bMin.appendChild(icon("minus"));
-          tb.appendChild(bMin);
-        }
-        if (state.detachable) {
-          const bOut = document.createElement("button");
-          bOut.type = "button";
-          bOut.className = "vd-music-player-btn vd-music-player-btn-detach";
-          bOut.setAttribute("aria-label", "Detach player");
-          bOut.appendChild(icon("arrows-out"));
-          tb.appendChild(bOut);
-          const bIn = document.createElement("button");
-          bIn.type = "button";
-          bIn.className = "vd-music-player-btn vd-music-player-btn-attach";
-          bIn.setAttribute("aria-label", "Attach player");
-          bIn.appendChild(icon("arrows-in"));
-          tb.appendChild(bIn);
-        }
-        container.classList.add("vd-music-player-has-chrome");
-        container.appendChild(tb);
-      }
-      const info = document.createElement("div");
-      info.className = "vd-music-player-info";
-      const iconWrap = document.createElement("span");
-      iconWrap.className = "vd-music-player-icon";
-      iconWrap.setAttribute("aria-hidden", "true");
-      iconWrap.appendChild(icon("music-note"));
-      const trackName = document.createElement("span");
-      trackName.className = "vd-music-player-track-name";
-      trackName.setAttribute("aria-live", "polite");
-      trackName.setAttribute("aria-atomic", "true");
-      info.appendChild(iconWrap);
-      info.appendChild(trackName);
-      container.appendChild(info);
-      const controls = document.createElement("div");
-      controls.className = "vd-music-player-controls";
-      controls.setAttribute("role", "group");
-      controls.setAttribute("aria-label", "Playback controls");
-      const btnPrev = document.createElement("button");
-      btnPrev.type = "button";
-      btnPrev.className = "vd-music-player-btn vd-music-player-btn-prev";
-      btnPrev.setAttribute("aria-label", "Previous track");
-      btnPrev.appendChild(icon("skip-back"));
-      const btnPlay = document.createElement("button");
-      btnPlay.type = "button";
-      btnPlay.className = "vd-music-player-btn vd-music-player-btn-play";
-      btnPlay.setAttribute("aria-label", "Play");
-      btnPlay.appendChild(icon("play"));
-      const btnNext = document.createElement("button");
-      btnNext.type = "button";
-      btnNext.className = "vd-music-player-btn vd-music-player-btn-next";
-      btnNext.setAttribute("aria-label", "Next track");
-      btnNext.appendChild(icon("skip-forward"));
-      controls.appendChild(btnPrev);
-      controls.appendChild(btnPlay);
-      controls.appendChild(btnNext);
-      if (state.showPlaylist || state.shuffle !== void 0) {
-        const btnShuffle = document.createElement("button");
-        btnShuffle.type = "button";
-        btnShuffle.className = "vd-music-player-btn vd-music-player-btn-shuffle";
-        btnShuffle.setAttribute("aria-label", "Shuffle");
-        btnShuffle.setAttribute("aria-pressed", state.shuffle ? "true" : "false");
-        btnShuffle.appendChild(icon("shuffle"));
-        controls.appendChild(btnShuffle);
-      }
-      const spacer = document.createElement("span");
-      spacer.className = "vd-music-player-spacer";
-      spacer.setAttribute("aria-hidden", "true");
-      controls.appendChild(spacer);
-      const volumeWrap = document.createElement("div");
-      volumeWrap.className = "vd-music-player-volume";
-      const volumeIcon = document.createElement("span");
-      volumeIcon.className = "vd-music-player-volume-icon";
-      volumeIcon.setAttribute("aria-hidden", "true");
-      const volumeSlider = document.createElement("input");
-      volumeSlider.type = "range";
-      volumeSlider.className = "vd-music-player-volume-slider";
-      volumeSlider.min = "0";
-      volumeSlider.max = "1";
-      volumeSlider.step = "0.01";
-      volumeSlider.value = String(state.volume);
-      volumeSlider.setAttribute("aria-label", "Volume");
-      volumeWrap.appendChild(volumeIcon);
-      volumeWrap.appendChild(volumeSlider);
-      controls.appendChild(volumeWrap);
-      if (state.showPlaylist) {
-        const btnPlaylist = document.createElement("button");
-        btnPlaylist.type = "button";
-        btnPlaylist.className = "vd-music-player-btn vd-music-player-btn-playlist";
-        btnPlaylist.setAttribute("aria-label", "Show playlist");
-        btnPlaylist.setAttribute("aria-expanded", "false");
-        btnPlaylist.appendChild(icon("playlist"));
-        controls.appendChild(btnPlaylist);
-      }
-      container.appendChild(controls);
-      if (state.showProgress) {
-        const progressRow = document.createElement("div");
-        progressRow.className = "vd-music-player-progress";
-        const timeElapsed = document.createElement("span");
-        timeElapsed.className = "vd-music-player-time vd-music-player-time-elapsed";
-        timeElapsed.textContent = "0:00";
-        timeElapsed.setAttribute("aria-hidden", "true");
-        const progressBar = document.createElement("input");
-        progressBar.type = "range";
-        progressBar.className = "vd-music-player-progress-bar";
-        progressBar.min = "0";
-        progressBar.max = "100";
-        progressBar.step = "0.1";
-        progressBar.value = "0";
-        progressBar.setAttribute("aria-label", "Seek");
-        const timeDuration = document.createElement("span");
-        timeDuration.className = "vd-music-player-time vd-music-player-time-duration";
-        timeDuration.textContent = "0:00";
-        timeDuration.setAttribute("aria-hidden", "true");
-        progressRow.appendChild(timeElapsed);
-        progressRow.appendChild(progressBar);
-        progressRow.appendChild(timeDuration);
-        container.appendChild(progressRow);
-      }
-      if (state.showPlaylist) {
-        const playlist = document.createElement("div");
-        playlist.className = "vd-music-player-playlist";
-        playlist.setAttribute("aria-label", "Playlist");
-        container.appendChild(playlist);
-      }
-    },
-    /* ─── Public API ──────────────────────────────────────── */
-    /**
-     * @param {HTMLElement} container
-     */
-    play: function(container) {
-      const inst = this.instances.get(container);
-      if (!inst) return;
-      if (!inst.audio.src && inst.state.tracks.length) {
-        inst.audio.src = inst.state.tracks[inst.state.currentIndex].url;
-      }
-      inst.audio.play().catch(() => {
-      });
-    },
-    /**
-     * @param {HTMLElement} container
-     */
-    pause: function(container) {
-      const inst = this.instances.get(container);
-      if (inst) inst.audio.pause();
-    },
-    /**
-     * @param {HTMLElement} container
-     */
-    toggle: function(container) {
-      const inst = this.instances.get(container);
-      if (!inst) return;
-      if (inst.state.isPlaying) {
-        this.pause(container);
-      } else {
-        this.play(container);
-      }
-    },
-    /**
-     * @param {HTMLElement} container
-     */
-    next: function(container) {
-      const inst = this.instances.get(container);
-      if (!inst || !inst.state.tracks.length) return;
-      const next = (inst.state.currentIndex + 1) % inst.state.tracks.length;
-      this._loadTrack(inst, next, inst.state.isPlaying);
-    },
-    /**
-     * @param {HTMLElement} container
-     */
-    previous: function(container) {
-      const inst = this.instances.get(container);
-      if (!inst || !inst.state.tracks.length) return;
-      const len = inst.state.tracks.length;
-      const prev = (inst.state.currentIndex - 1 + len) % len;
-      this._loadTrack(inst, prev, inst.state.isPlaying);
-    },
-    /**
-     * @param {HTMLElement} container
-     * @param {number} value - 0 to 1
-     */
-    setVolume: function(container, value) {
-      const inst = this.instances.get(container);
-      if (!inst) return;
-      const v = Math.max(0, Math.min(1, value));
-      inst.state.volume = v;
-      inst.audio.volume = v;
-      if (inst.refs.volumeSlider) {
-        inst.refs.volumeSlider.value = String(v);
-        updateRangeFill(inst.refs.volumeSlider);
-      }
-      container.dispatchEvent(
-        new CustomEvent("musicplayer:volumechange", { bubbles: true, detail: { volume: v } })
-      );
-    },
-    /**
-     * @param {HTMLElement} container
-     * @param {number} index - Track index
-     */
-    setTrack: function(container, index) {
-      const inst = this.instances.get(container);
-      if (!inst) return;
-      this._loadTrack(inst, index, inst.state.isPlaying);
-    },
-    /**
-     * Shuffle or un-shuffle the track list.
-     * @param {HTMLElement} container
-     */
-    shuffle: function(container) {
-      const inst = this.instances.get(container);
-      if (!inst || !inst.refs.btnShuffle) return;
-      inst.refs.btnShuffle.click();
-    },
-    /**
-     * Float the player above the page. Requires { detachable: true } at init.
-     * @param {HTMLElement} container
-     * @param {string} [position] 'bottom-left' or 'bottom-right'
-     */
-    detach: function(container, position) {
-      const inst = this.instances.get(container);
-      if (!inst || !inst.state.detachable || inst.state.isDetached) return;
-      const s = inst.state;
-      inst.ui = inst.ui || { restore: null, unbindDrag: null };
-      s.isDetached = true;
-      inst.ui.restore = {
-        parent: container.parentNode,
-        next: container.nextSibling
-      };
-      document.body.appendChild(container);
-      container.classList.add("vd-music-player-floating", "vd-music-player-detached");
-      const pos = position != null && position !== void 0 ? position : s.floatingPosition;
-      this._setCornerPosition(
-        container,
-        pos === "bottom-left" || pos === "bottom-right" ? pos : "bottom-right"
-      );
-      this._loadPersistedPosition(container, inst);
-      if (s.startMinimized && !s._startMinimizeApplied) {
-        s._startMinimizeApplied = true;
-        this.minimize(container);
-      }
-      this._bindFloatingDrag(inst);
-      container.dispatchEvent(new CustomEvent("musicplayer:detach", { bubbles: true }));
-    },
-    /**
-     * Return a detached player to its original place in the document.
-     * @param {HTMLElement} container
-     */
-    attach: function(container) {
-      const inst = this.instances.get(container);
-      if (!inst || !inst.state.isDetached) return;
-      this._unbindFloatingDrag(inst);
-      inst.state.isDetached = false;
-      const r = inst.ui && inst.ui.restore;
-      container.classList.remove(
-        "vd-music-player-floating",
-        "vd-music-player-detached",
-        "vd-music-player-floating-bottom-left",
-        "vd-music-player-floating-bottom-right",
-        "is-position-custom"
-      );
-      container.style.removeProperty("--vd-music-player-floating-top");
-      container.style.removeProperty("--vd-music-player-floating-left");
-      if (r && r.parent && r.parent.isConnected) {
-        r.parent.insertBefore(container, r.next);
-      }
-      if (inst.ui) {
-        inst.ui.restore = null;
-        inst.ui.unbindDrag = null;
-      }
-      container.dispatchEvent(new CustomEvent("musicplayer:attach", { bubbles: true }));
-    },
-    /**
-     * Collapse to essential controls. Requires { minimizable: true } at init.
-     * @param {HTMLElement} container
-     */
-    minimize: function(container) {
-      const inst = this.instances.get(container);
-      if (!inst || !inst.state.minimizable || inst.state.isMinimized) return;
-      const s = inst.state;
-      s.isMinimized = true;
-      container.classList.add("vd-music-player-minimized");
-      this._setMinimizeButtonState(inst, true);
-      if (inst.refs.playlistPanel && inst.refs.playlistPanel.classList.contains("is-open") && inst.refs.btnPlaylist) {
-        inst.refs.playlistPanel.classList.remove("is-open");
-        inst.refs.btnPlaylist.classList.remove("is-active");
-        inst.refs.btnPlaylist.setAttribute("aria-expanded", "false");
-      }
-      container.dispatchEvent(new CustomEvent("musicplayer:minimize", { bubbles: true }));
-    },
-    /**
-     * Restore from minimized state.
-     * @param {HTMLElement} container
-     */
-    expand: function(container) {
-      const inst = this.instances.get(container);
-      if (!inst || !inst.state.minimizable || !inst.state.isMinimized) return;
-      inst.state.isMinimized = false;
-      container.classList.remove("vd-music-player-minimized");
-      this._setMinimizeButtonState(inst, false);
-      container.dispatchEvent(new CustomEvent("musicplayer:expand", { bubbles: true }));
-    },
-    /**
-     * Toggle minimize / expand.
-     * @param {HTMLElement} container
-     */
-    toggleMinimize: function(container) {
-      const inst = this.instances.get(container);
-      if (!inst || !inst.state.minimizable) return;
-      if (inst.state.isMinimized) {
-        this.expand(container);
-      } else {
-        this.minimize(container);
-      }
-    },
-    /**
-     * Set floating corner or pixel position (detached only).
-     * @param {HTMLElement} container
-     * @param {string|{x:number,y:number}} position 'bottom-left' | 'bottom-right' | { x, y } viewport
-     */
-    setPosition: function(container, position) {
-      const inst = this.instances.get(container);
-      if (!inst || !inst.state.isDetached) return;
-      if (typeof position === "string") {
-        this._setCornerPosition(
-          container,
-          position === "bottom-left" || position === "bottom-right" ? position : "bottom-right"
-        );
-      } else if (position && typeof position.x === "number" && typeof position.y === "number") {
-        this._setCustomPositionFromRect(container, position.x, position.y);
-      }
-      if (inst.state.persistPosition) {
-        const r = container.getBoundingClientRect();
-        this._savePositionPixels(inst, r.left, r.top);
-      }
-    },
-    /**
-     * @param {Object} inst
-     * @param {boolean} minimized
-     */
-    _setMinimizeButtonState: function(inst, minimized) {
-      const b = inst.refs && inst.refs.btnMinimize;
-      if (!b) return;
-      b.innerHTML = "";
-      b.appendChild(icon(minimized ? "plus" : "minus"));
-      b.setAttribute("aria-label", minimized ? "Expand player" : "Minimize player");
-      b.setAttribute("aria-expanded", minimized ? "false" : "true");
-    },
-    /**
-     * @param {HTMLElement} container
-     * @param {string} which 'bottom-left' | 'bottom-right'
-     */
-    _setCornerPosition: function(container, which) {
-      container.classList.remove("is-position-custom", "vd-music-player-floating-bottom-left", "vd-music-player-floating-bottom-right");
-      container.style.removeProperty("--vd-music-player-floating-top");
-      container.style.removeProperty("--vd-music-player-floating-left");
-      if (which === "bottom-left") {
-        container.classList.add("vd-music-player-floating-bottom-left");
-      } else {
-        container.classList.add("vd-music-player-floating-bottom-right");
-      }
-    },
-    /**
-     * @param {HTMLElement} container
-     * @param {number} left
-     * @param {number} top
-     */
-    _setCustomPositionFromRect: function(container, left, top) {
-      container.classList.remove("vd-music-player-floating-bottom-left", "vd-music-player-floating-bottom-right");
-      container.classList.add("is-position-custom");
-      container.style.setProperty("--vd-music-player-floating-left", left + "px");
-      container.style.setProperty("--vd-music-player-floating-top", top + "px");
-    },
-    /**
-     * @param {HTMLElement} container
-     * @param {Object} inst
-     */
-    _loadPersistedPosition: function(container, inst) {
-      if (!inst.state.persistPosition) return;
-      const key = this._persistKeyForInstance(inst, container);
-      let raw = null;
-      if (typeof window.safeStorageGet === "function") {
-        raw = window.safeStorageGet(key, null);
-      } else {
-        try {
-          raw = localStorage.getItem(key);
-        } catch (_e) {
-        }
-      }
-      if (!raw) return;
-      try {
-        const o = JSON.parse(raw);
-        if (o && typeof o.x === "number" && typeof o.y === "number") {
-          this._setCustomPositionFromRect(container, o.x, o.y);
-        }
-      } catch (_err) {
-      }
-    },
-    /**
-     * @param {Object} inst
-     * @param {number} x
-     * @param {number} y
-     */
-    _savePositionPixels: function(inst, x, y) {
-      if (!inst.state.persistPosition) return;
-      const container = this._containerOf(inst);
-      if (!container) return;
-      const key = this._persistKeyForInstance(inst, container);
-      const val = JSON.stringify({ x, y });
-      if (typeof window.safeStorageSet === "function") {
-        window.safeStorageSet(key, val);
-      } else {
-        try {
-          localStorage.setItem(key, val);
-        } catch (_e) {
-        }
-      }
-    },
-    /**
-     * @param {Object} inst
-     * @param {HTMLElement} container
-     * @returns {string}
-     */
-    _persistKeyForInstance: function(inst, container) {
-      const pk = inst.state.persistKey;
-      if (pk && String(pk).trim()) return persistStorageKey(String(pk).trim());
-      return persistStorageKey(container.id || "");
-    },
-    /**
-     * @param {Object} inst
-     */
-    _unbindFloatingDrag: function(inst) {
-      if (inst.ui && typeof inst.ui.unbindDrag === "function") {
-        inst.ui.unbindDrag();
-        inst.ui.unbindDrag = null;
-      }
-    },
-    /**
-     * Free-form pointer drag on the handle. Vanduo's `draggable` component uses HTML5
-     * drag/drop for list reordering; floating players use pointer events on the handle instead.
-     * @param {Object} inst
-     */
-    _bindFloatingDrag: function(inst) {
-      this._unbindFloatingDrag(inst);
-      const h = inst.refs && inst.refs.dragHandle;
-      if (!h || !inst.state || !inst.state.draggable) return;
-      const self = this;
-      const container = this._containerOf(inst);
-      if (!container) return;
-      let startX = 0;
-      let startY = 0;
-      let origL = 0;
-      let origT = 0;
-      let activeDrag = false;
-      const onDown = function(e) {
-        if (e.pointerType === "mouse" && e.button !== 0) return;
-        e.preventDefault();
-        activeDrag = true;
-        const r = container.getBoundingClientRect();
-        origL = r.left;
-        origT = r.top;
-        startX = e.clientX;
-        startY = e.clientY;
-        self._setCustomPositionFromRect(container, origL, origT);
-        try {
-          h.setPointerCapture(e.pointerId);
-        } catch (_err) {
-        }
-      };
-      const onMove = function(e) {
-        if (!activeDrag) return;
-        const dx = e.clientX - startX;
-        const dy = e.clientY - startY;
-        let nl = origL + dx;
-        let nt = origT + dy;
-        const r = container.getBoundingClientRect();
-        const w = r.width;
-        const ph = r.height;
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        const pad = 8;
-        nl = Math.max(pad, Math.min(nl, vw - w - pad));
-        nt = Math.max(pad, Math.min(nt, vh - ph - pad));
-        self._setCustomPositionFromRect(container, nl, nt);
-      };
-      const onUp = function(e) {
-        if (!activeDrag) return;
-        activeDrag = false;
-        if (typeof h.hasPointerCapture === "function" && h.hasPointerCapture(e.pointerId)) {
-          try {
-            h.releasePointerCapture(e.pointerId);
-          } catch (_e) {
-          }
-        }
-        if (inst.state.persistPosition) {
-          const r = container.getBoundingClientRect();
-          self._savePositionPixels(inst, r.left, r.top);
-        }
-      };
-      h.addEventListener("pointerdown", onDown);
-      h.addEventListener("pointermove", onMove);
-      h.addEventListener("pointerup", onUp);
-      h.addEventListener("pointercancel", onUp);
-      inst.ui = inst.ui || { restore: null, unbindDrag: null };
-      inst.ui.unbindDrag = function() {
-        h.removeEventListener("pointerdown", onDown);
-        h.removeEventListener("pointermove", onMove);
-        h.removeEventListener("pointerup", onUp);
-        h.removeEventListener("pointercancel", onUp);
-      };
-    },
-    /**
-     * Return a shallow copy of the current player state.
-     * @param {HTMLElement} container
-     * @returns {Object|null}
-     */
-    getState: function(container) {
-      const inst = this.instances.get(container);
-      if (!inst) return null;
-      const s = inst.state;
-      return {
-        isPlaying: s.isPlaying,
-        currentIndex: s.currentIndex,
-        currentTrack: s.tracks[s.currentIndex] || null,
-        volume: s.volume,
-        shuffle: s.shuffle,
-        tracks: s.tracks.slice(),
-        isDetached: Boolean(s.isDetached),
-        isMinimized: Boolean(s.isMinimized)
-      };
-    },
-    /**
-     * Stop playback, clean up listeners, remove instance.
-     * @param {HTMLElement} container
-     */
-    destroy: function(container) {
-      const inst = this.instances.get(container);
-      if (!inst) return;
-      this._unbindFloatingDrag(inst);
-      if (inst.state && inst.state.isDetached) {
-        try {
-          this.attach(container);
-        } catch (_e) {
-        }
-      }
-      inst.cleanup.forEach((fn) => fn());
-      this.instances.delete(container);
-      container.removeAttribute("data-music-player-initialized");
-    },
-    /**
-     * Destroy all instances.
-     */
-    destroyAll: function() {
-      this.instances.forEach((_, container) => this.destroy(container));
-    },
-    /* ─── Internal helpers ────────────────────────────────── */
-    /**
-     * Load track by index on an already-initialised instance object.
-     * @param {Object} inst
-     * @param {number} index
-     * @param {boolean} autoPlay
-     */
-    _loadTrack: function(inst, index, autoPlay) {
-      const track = inst.state.tracks[index];
-      if (!track) return;
-      const container = this._containerOf(inst);
-      inst.state.currentIndex = index;
-      inst.audio.src = track.url;
-      if (inst.refs.trackName) {
-        inst.refs.trackName.textContent = track.name || "Unknown Track";
-        inst.refs.trackName.classList.remove("is-idle");
-      }
-      if (inst.refs.playlistPanel) {
-        inst.refs.playlistPanel.querySelectorAll(".vd-music-player-playlist-item").forEach((item, i) => {
-          const active = i === index;
-          item.classList.toggle("is-active", active);
-          item.setAttribute("aria-current", active ? "true" : "false");
-        });
-      }
-      if (inst.refs.progressBar) {
-        inst.refs.progressBar.value = "0";
-        updateRangeFill(inst.refs.progressBar);
-      }
-      if (inst.refs.timeElapsed) inst.refs.timeElapsed.textContent = "0:00";
-      if (inst.refs.timeDuration) inst.refs.timeDuration.textContent = "0:00";
-      if (container) {
-        container.dispatchEvent(
-          new CustomEvent("musicplayer:trackchange", {
-            bubbles: true,
-            detail: { index, name: track.name, url: track.url }
-          })
-        );
-      }
-      if (autoPlay) inst.audio.play().catch(() => {
-      });
-    },
-    /**
-     * Reverse-lookup the container element for a given instance object.
-     * @param {Object} inst
-     * @returns {HTMLElement|null}
-     */
-    _containerOf: function(inst) {
-      for (const [container, i] of this.instances) {
-        if (i === inst) return container;
-      }
-      return null;
-    }
-  };
-  if (typeof window.Vanduo !== "undefined") {
-    window.Vanduo.register("musicPlayer", MusicPlayer);
-  }
-  window.VanduoMusicPlayer = MusicPlayer;
-})();
-
 // js/index.js
 var Vanduo = window.Vanduo;
 var index_default = Vanduo;