@vanduo-oss/framework 1.4.2 → 1.4.4

package/dist/vanduo.js

@@ -1,4 +1,4 @@
-/*! Vanduo v1.4.2 | Built: 2026-05-23T19:59:36.731Z | git:adbe750 | development */
+/*! Vanduo v1.4.4 | Built: 2026-06-07T19:14:20.877Z | git:781df0d | development */
 (() => {
   // js/utils/lifecycle.js
   (function() {
@@ -176,7 +176,7 @@
   // js/vanduo.js
   (function() {
     "use strict";
-    const VANDUO_VERSION = true ? "1.4.2" : "0.0.0-dev";
+    const VANDUO_VERSION = true ? "1.4.4" : "0.0.0-dev";
     const hasOwn = Object.prototype.hasOwnProperty;
     const Vanduo2 = {
       version: VANDUO_VERSION,
@@ -461,9 +461,10 @@
       init: function(root) {
         const snippets = this.queryWithin(root, ".vd-code-snippet");
         snippets.forEach((snippet) => {
-          if (!snippet.dataset.initialized) {
-            this.initSnippet(snippet);
+          if (snippet.dataset.initialized === "true") {
+            return;
           }
+          this.initSnippet(snippet);
         });
       },
       /**
@@ -471,7 +472,9 @@
        * @param {HTMLElement} snippet - Code snippet container element
        */
       initSnippet: function(snippet) {
-        snippet.dataset.initialized = "true";
+        if (snippet.dataset.initialized === "true") {
+          return;
+        }
         snippet._codeSnippetCleanup = [];
         const toggle = snippet.querySelector(".vd-code-snippet-toggle");
         const content = snippet.querySelector(".vd-code-snippet-content");
@@ -499,6 +502,7 @@
         lineNumberPanes.forEach((pane) => {
           this.addLineNumbers(pane);
         });
+        snippet.dataset.initialized = "true";
       },
       /**
        * Initialize collapsible functionality
@@ -508,13 +512,14 @@
        */
       initCollapsible: function(snippet, toggle, content) {
         const isExpanded = snippet.dataset.expanded === "true";
-        toggle.setAttribute("aria-expanded", isExpanded);
-        content.dataset.visible = isExpanded;
+        toggle.setAttribute("aria-expanded", isExpanded ? "true" : "false");
+        content.dataset.visible = isExpanded ? "true" : "false";
         this.addListener(snippet, toggle, "click", () => {
           const expanded = snippet.dataset.expanded === "true";
-          snippet.dataset.expanded = !expanded;
-          toggle.setAttribute("aria-expanded", !expanded);
-          content.dataset.visible = !expanded;
+          const nextExpanded = !expanded;
+          snippet.dataset.expanded = nextExpanded ? "true" : "false";
+          toggle.setAttribute("aria-expanded", nextExpanded ? "true" : "false");
+          content.dataset.visible = nextExpanded ? "true" : "false";
           if (!expanded) {
             const extractPanes = content.querySelectorAll("[data-extract]:not([data-extracted])");
             extractPanes.forEach((pane) => {
@@ -849,12 +854,38 @@
        * @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;
       },
       /**
@@ -876,16 +907,26 @@
        * @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;
       },
       /**
@@ -5009,21 +5050,45 @@
   // js/components/theme-switcher.js
   (function() {
     "use strict";
+    const THEME_MODES = ["system", "light", "dark"];
+    const THEME_ICON_CLASSES = {
+      system: "ph ph-desktop",
+      light: "ph ph-sun",
+      dark: "ph ph-moon"
+    };
+    const THEME_LABELS = {
+      system: "Theme: System",
+      light: "Theme: Light",
+      dark: "Theme: Dark"
+    };
+    const THEME_OPTION_TOOLTIPS = {
+      system: "Use system preference",
+      light: "Light theme",
+      dark: "Dark theme"
+    };
     const ThemeSwitcher = {
       isInitialized: false,
       _mediaQuery: null,
       _onMediaChange: null,
+      menuInstances: /* @__PURE__ */ new Map(),
       getToggles: function(root) {
+        const scope = root || document;
+        const toggles = window.Vanduo && typeof window.Vanduo.queryAll === "function" ? window.Vanduo.queryAll(scope, '[data-toggle="theme"]') : Array.from(scope.querySelectorAll('[data-toggle="theme"]'));
+        return toggles.filter(function(toggle) {
+          return !toggle.closest('.vd-theme-switcher[data-theme-ui="menu"]');
+        });
+      },
+      getMenuSwitchers: function(root) {
+        const scope = root || document;
         if (window.Vanduo && typeof window.Vanduo.queryAll === "function") {
-          return window.Vanduo.queryAll(root, '[data-toggle="theme"]');
+          return window.Vanduo.queryAll(scope, '.vd-theme-switcher[data-theme-ui="menu"]');
         }
-        return Array.from(document.querySelectorAll('[data-toggle="theme"]'));
+        return Array.from(scope.querySelectorAll('.vd-theme-switcher[data-theme-ui="menu"]'));
       },
       init: function(root) {
         this.STORAGE_KEY = "vanduo-theme-preference";
         this.state = {
           preference: this.getPreference()
-          // 'light', 'dark', or 'system'
         };
         if (this.isInitialized) {
           this.applyTheme();
@@ -5040,6 +5105,9 @@
         return this.getStorageValue(this.STORAGE_KEY, "system");
       },
       setPreference: function(pref) {
+        if (!THEME_MODES.includes(pref)) {
+          return;
+        }
         this.state.preference = pref;
         this.setStorageValue(this.STORAGE_KEY, pref);
         this.applyTheme();
@@ -5093,8 +5161,8 @@
         };
         this._mediaQuery.addEventListener("change", this._onMediaChange);
       },
-      // Helper to facilitate UI creation if needed, though often UI is in HTML
       renderUI: function(root) {
+        this.renderMenuSwitchers(root);
         const toggles = this.getToggles(root);
         toggles.forEach((toggle) => {
           if (toggle.getAttribute("data-theme-initialized") === "true") {
@@ -5112,7 +5180,7 @@
             toggle._themeToggleHandler = onChange;
           } else {
             const onClick = () => {
-              const modes = ["system", "light", "dark"];
+              const modes = THEME_MODES;
               const nextIndex = (modes.indexOf(this.state.preference) + 1) % modes.length;
               this.setPreference(modes[nextIndex]);
             };
@@ -5121,6 +5189,188 @@
           }
           toggle.setAttribute("data-theme-initialized", "true");
         });
+        this.updateUI(root);
+      },
+      renderMenuSwitchers: function(root) {
+        const switchers = this.getMenuSwitchers(root);
+        switchers.forEach((switcher) => {
+          if (switcher.getAttribute("data-theme-menu-initialized") === "true") {
+            return;
+          }
+          const toggle = switcher.querySelector(".vd-theme-switcher-toggle");
+          const menu = switcher.querySelector(".vd-theme-switcher-menu");
+          if (!toggle || !menu) {
+            return;
+          }
+          const options = menu.querySelectorAll("[data-theme-value]");
+          const cleanupFunctions = [];
+          toggle.setAttribute("aria-haspopup", "true");
+          toggle.setAttribute("aria-expanded", "false");
+          menu.setAttribute("aria-hidden", "true");
+          const toggleClickHandler = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.toggleMenu(switcher, toggle, menu);
+          };
+          toggle.addEventListener("click", toggleClickHandler);
+          cleanupFunctions.push(() => toggle.removeEventListener("click", toggleClickHandler));
+          options.forEach((option) => {
+            const optionClickHandler = (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              const value = option.getAttribute("data-theme-value");
+              if (value) {
+                this.setPreference(value);
+              }
+              this.closeMenu(switcher, toggle, menu);
+            };
+            option.addEventListener("click", optionClickHandler);
+            cleanupFunctions.push(() => option.removeEventListener("click", optionClickHandler));
+            const optionKeydownHandler = (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                optionClickHandler(e);
+              }
+            };
+            option.addEventListener("keydown", optionKeydownHandler);
+            cleanupFunctions.push(() => option.removeEventListener("keydown", optionKeydownHandler));
+          });
+          const toggleKeydownHandler = (e) => {
+            if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              if (!menu.classList.contains("is-open")) {
+                this.openMenu(switcher, toggle, menu);
+              }
+            } else if (e.key === "Escape" && menu.classList.contains("is-open")) {
+              e.preventDefault();
+              this.closeMenu(switcher, toggle, menu);
+            }
+          };
+          toggle.addEventListener("keydown", toggleKeydownHandler);
+          cleanupFunctions.push(() => toggle.removeEventListener("keydown", toggleKeydownHandler));
+          const menuKeydownHandler = (e) => {
+            this.handleMenuKeydown(e, switcher, toggle, menu, options);
+          };
+          menu.addEventListener("keydown", menuKeydownHandler);
+          cleanupFunctions.push(() => menu.removeEventListener("keydown", menuKeydownHandler));
+          const documentClickHandler = (e) => {
+            if (!switcher.contains(e.target) && menu.classList.contains("is-open")) {
+              this.closeMenu(switcher, toggle, menu);
+            }
+          };
+          document.addEventListener("click", documentClickHandler);
+          cleanupFunctions.push(() => document.removeEventListener("click", documentClickHandler));
+          this.menuInstances.set(switcher, { toggle, menu, cleanup: cleanupFunctions });
+          switcher.setAttribute("data-theme-menu-initialized", "true");
+          this.initMenuTooltips(switcher);
+        });
+      },
+      initMenuTooltips: function(switcher) {
+        const tooltips = window.Vanduo && typeof window.Vanduo.getComponent === "function" ? window.Vanduo.getComponent("tooltips") : null;
+        if (tooltips && typeof tooltips.init === "function") {
+          tooltips.init(switcher);
+        }
+      },
+      closeOtherMenus: function(exceptMenu) {
+        this.menuInstances.forEach((instance, switcher) => {
+          if (instance.menu !== exceptMenu && instance.menu.classList.contains("is-open")) {
+            this.closeMenu(switcher, instance.toggle, instance.menu);
+          }
+        });
+      },
+      toggleMenu: function(switcher, toggle, menu) {
+        if (menu.classList.contains("is-open")) {
+          this.closeMenu(switcher, toggle, menu);
+        } else {
+          this.openMenu(switcher, toggle, menu);
+        }
+      },
+      openMenu: function(switcher, toggle, menu) {
+        this.closeOtherMenus(menu);
+        switcher.classList.add("is-open");
+        menu.classList.add("is-open");
+        toggle.setAttribute("aria-expanded", "true");
+        menu.setAttribute("aria-hidden", "false");
+        const activeOption = menu.querySelector("[data-theme-value].is-active") || menu.querySelector("[data-theme-value]");
+        if (activeOption) {
+          setTimeout(() => activeOption.focus(), 0);
+        }
+      },
+      closeMenu: function(switcher, toggle, menu) {
+        switcher.classList.remove("is-open");
+        menu.classList.remove("is-open");
+        toggle.setAttribute("aria-expanded", "false");
+        menu.setAttribute("aria-hidden", "true");
+      },
+      handleMenuKeydown: function(e, switcher, toggle, menu, options) {
+        const items = Array.from(options);
+        const currentIndex = items.indexOf(document.activeElement);
+        if (e.key === "Escape") {
+          e.preventDefault();
+          this.closeMenu(switcher, toggle, menu);
+          toggle.focus();
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+          items[nextIndex].focus();
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+          items[prevIndex].focus();
+        }
+      },
+      updateMenuSwitcher: function(switcher) {
+        const toggle = switcher.querySelector(".vd-theme-switcher-toggle");
+        const menu = switcher.querySelector(".vd-theme-switcher-menu");
+        if (!toggle || !menu) {
+          return;
+        }
+        const pref = this.state.preference;
+        const icon = toggle.querySelector("[data-theme-icon]");
+        const label = THEME_LABELS[pref] || THEME_LABELS.system;
+        if (icon) {
+          icon.className = THEME_ICON_CLASSES[pref] || THEME_ICON_CLASSES.system;
+        }
+        toggle.setAttribute("aria-label", label);
+        if (toggle.hasAttribute("data-tooltip")) {
+          toggle.setAttribute("data-tooltip", label);
+          this.refreshTooltipContent(toggle, label);
+        }
+        menu.querySelectorAll("[data-theme-value]").forEach((option) => {
+          const value = option.getAttribute("data-theme-value");
+          const isActive = value === pref;
+          option.classList.toggle("is-active", isActive);
+          option.setAttribute("aria-checked", isActive ? "true" : "false");
+          const tooltipText = THEME_OPTION_TOOLTIPS[value];
+          if (tooltipText && option.hasAttribute("data-tooltip")) {
+            option.setAttribute("data-tooltip", tooltipText);
+            this.refreshTooltipContent(option, tooltipText);
+          }
+        });
+      },
+      refreshTooltipContent: function(element, text) {
+        const tooltips = window.Vanduo && typeof window.Vanduo.getComponent === "function" ? window.Vanduo.getComponent("tooltips") : null;
+        if (!tooltips || typeof tooltips.update !== "function") {
+          return;
+        }
+        tooltips.update(element, text);
+      },
+      updateCycleToggle: function(toggle) {
+        const pref = this.state.preference;
+        const icon = toggle.querySelector("[data-theme-icon]");
+        const label = THEME_LABELS[pref] || THEME_LABELS.system;
+        if (icon) {
+          icon.className = THEME_ICON_CLASSES[pref] || THEME_ICON_CLASSES.system;
+        }
+        toggle.setAttribute("aria-label", label);
+        if (toggle.hasAttribute("data-tooltip")) {
+          toggle.setAttribute("data-tooltip", label);
+          this.refreshTooltipContent(toggle, label);
+        }
       },
       updateUI: function(root) {
         const toggles = this.getToggles(root);
@@ -5132,11 +5382,26 @@
             if (span) {
               span.textContent = this.state.preference.charAt(0).toUpperCase() + this.state.preference.slice(1);
             }
+            if (toggle.querySelector("[data-theme-icon]")) {
+              this.updateCycleToggle(toggle);
+            }
           }
         });
+        this.getMenuSwitchers(root).forEach((switcher) => {
+          this.updateMenuSwitcher(switcher);
+        });
       },
       destroyAll: function(root) {
         const scope = root || document;
+        this.getMenuSwitchers(scope).forEach((switcher) => {
+          const instance = this.menuInstances.get(switcher);
+          if (instance) {
+            instance.cleanup.forEach((fn) => fn());
+            this.closeMenu(switcher, instance.toggle, instance.menu);
+            this.menuInstances.delete(switcher);
+          }
+          switcher.removeAttribute("data-theme-menu-initialized");
+        });
         const toggles = this.getToggles(scope).filter(function(toggle) {
           return toggle.getAttribute("data-theme-initialized") === "true";
         });
@@ -8431,11 +8696,6 @@
   // 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);
@@ -8506,9 +8766,24 @@
             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;
             }
@@ -8978,6 +9253,7 @@
         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();
@@ -9343,7 +9619,11 @@
         const repositionHandler = () => {
           positionPopup();
         };
+        const markIgnoreOutside = () => {
+          ignoreOutsideUntil = Date.now() + 100;
+        };
         const open = () => {
+          markIgnoreOutside();
           viewMode = "days";
           if (selectedDate) {
             viewYear = selectedDate.getFullYear();
@@ -9377,8 +9657,22 @@
           }
           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 (!input.contains(e.target) && !popup.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")) {
@@ -9388,6 +9682,7 @@
           }
         };
         input.addEventListener("focus", focusHandler);
+        input.addEventListener("click", clickHandler);
         document.addEventListener("click", outsideHandler, true);
         document.addEventListener("keydown", escHandler);
         popup.addEventListener("keydown", handleGridKeydown);
@@ -9398,6 +9693,7 @@
         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),
@@ -10330,1072 +10626,6 @@
     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;