@arraypress/waveform-bar 1.0.0

package/dist/waveform-bar.esm.js

@@ -0,0 +1,1389 @@
+// src/js/icons.js
+var ICONS = {
+  play: '<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>',
+  pause: '<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M6 4h4v16H6zM14 4h4v16h-4z"/></svg>',
+  prev: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>',
+  next: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>',
+  queue: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>',
+  music: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" opacity="0.5"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55C7.79 13 6 14.79 6 17s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>',
+  volHigh: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>',
+  volLow: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/></svg>',
+  volMute: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>',
+  heart: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
+  heartFilled: '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
+  cart: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>',
+  close: '<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
+  speaker: '<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>',
+  repeatOff: '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/></svg>',
+  repeatAll: '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/></svg>',
+  repeatOne: '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/><text x="12" y="15" text-anchor="middle" font-size="7" font-weight="bold" fill="currentColor">1</text></svg>'
+};
+
+// src/js/utils.js
+function extractTitle(url) {
+  if (!url) return "Untitled";
+  return url.split("/").pop().split(".")[0].replace(/[-_]/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
+}
+function escapeHtml(str) {
+  if (!str) return "";
+  const d = document.createElement("div");
+  d.textContent = str;
+  return d.innerHTML;
+}
+function formatTime(seconds) {
+  if (!seconds || isNaN(seconds)) return "0:00";
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function parseTrackFromElement(el) {
+  const url = el.dataset.wbUrl || el.dataset.url;
+  if (!url) return null;
+  let meta = {};
+  try {
+    meta = JSON.parse(el.dataset.wbMeta || el.dataset.meta || "{}");
+  } catch (e) {
+  }
+  let markers = null;
+  try {
+    markers = JSON.parse(el.dataset.wbMarkers || el.dataset.markers || "null");
+  } catch (e) {
+  }
+  return {
+    url,
+    id: el.dataset.wbId || el.dataset.id || url,
+    title: el.dataset.wbTitle || el.dataset.title || extractTitle(url),
+    artist: el.dataset.wbArtist || el.dataset.artist || "",
+    artwork: el.dataset.wbArtwork || el.dataset.artwork || "",
+    album: el.dataset.wbAlbum || el.dataset.album || "",
+    link: el.dataset.wbLink || el.dataset.link || "",
+    duration: el.dataset.wbDuration || el.dataset.duration || "",
+    bpm: el.dataset.wbBpm || el.dataset.bpm || "",
+    key: el.dataset.wbKey || el.dataset.key || "",
+    waveform: el.dataset.wbWaveform || el.dataset.waveform || "",
+    markers,
+    favorited: el.dataset.wbFavorited === "true",
+    inCart: el.dataset.wbInCart === "true",
+    meta
+  };
+}
+
+// src/js/storage.js
+function saveQueueState(key, state) {
+  try {
+    sessionStorage.setItem(key, JSON.stringify(state));
+  } catch (e) {
+  }
+}
+function restoreQueueState(key) {
+  try {
+    const raw = sessionStorage.getItem(key);
+    if (!raw) return null;
+    const d = JSON.parse(raw);
+    if (!d || !d.queue || !d.queue.length) return null;
+    return d;
+  } catch (e) {
+    sessionStorage.removeItem(key);
+    return null;
+  }
+}
+function saveVolume(key, volume, muted, volumeBeforeMute) {
+  try {
+    localStorage.setItem(key + "-vol", JSON.stringify({
+      v: volume,
+      m: muted,
+      b: volumeBeforeMute
+    }));
+  } catch (e) {
+  }
+}
+function restoreVolume(key) {
+  try {
+    const d = JSON.parse(localStorage.getItem(key + "-vol"));
+    if (!d) return null;
+    return {
+      volume: d.v != null ? d.v : 1,
+      muted: d.m || false,
+      volumeBeforeMute: d.b || 1
+    };
+  } catch (e) {
+    return null;
+  }
+}
+function saveFavorites(key, favorites) {
+  try {
+    localStorage.setItem(key + "-favs", JSON.stringify([...favorites]));
+  } catch (e) {
+  }
+}
+function restoreFavorites(key) {
+  try {
+    const d = JSON.parse(localStorage.getItem(key + "-favs"));
+    return Array.isArray(d) ? new Set(d) : /* @__PURE__ */ new Set();
+  } catch (e) {
+    return /* @__PURE__ */ new Set();
+  }
+}
+
+// src/js/actions.js
+function fireAction(actionConfig, payload) {
+  if (!actionConfig || !actionConfig.endpoint) return;
+  if (typeof actionConfig.endpoint === "function") {
+    try {
+      actionConfig.endpoint(payload);
+    } catch (err) {
+      console.warn("WaveformBar action callback error:", err);
+    }
+    return;
+  }
+  if (typeof actionConfig.endpoint === "string") {
+    fetch(actionConfig.endpoint, {
+      method: actionConfig.method || "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...actionConfig.headers || {}
+      },
+      body: JSON.stringify(payload)
+    }).catch((err) => console.warn("WaveformBar action request failed:", err));
+  }
+}
+
+// src/js/dom.js
+function buildBarHTML(config) {
+  let left = '<div class="wb-left">';
+  left += '<div class="wb-controls">';
+  if (config.showPrevNext) {
+    left += `<button class="wb-btn wb-prev" aria-label="Previous" title="Previous">${ICONS.prev}</button>`;
+  }
+  left += `<button class="wb-btn wb-play" aria-label="Play/Pause" title="Play">
+        <span class="wb-icon-play">${ICONS.play}</span>
+        <span class="wb-icon-pause" style="display:none">${ICONS.pause}</span>
+    </button>`;
+  if (config.showPrevNext) {
+    left += `<button class="wb-btn wb-next" aria-label="Next" title="Next">${ICONS.next}</button>`;
+  }
+  if (config.showRepeat) {
+    left += `<button class="wb-btn wb-btn-sm wb-repeat" aria-label="Repeat" title="Repeat: Off">${ICONS.repeatOff}</button>`;
+  }
+  left += "</div>";
+  left += `<div class="wb-track">
+        <div class="wb-artwork">${ICONS.music}</div>
+        <div class="wb-track-text">
+            <div class="wb-title">No track selected</div>
+            <div class="wb-artist">&mdash;</div>
+        </div>
+    </div>`;
+  left += "</div>";
+  const centre = `<div class="wb-centre">
+        <div class="wb-waveform-container"></div>
+        <div class="wb-time"><span class="wb-time-current">0:00</span> / <span class="wb-time-total">0:00</span></div>
+    </div>`;
+  let right = '<div class="wb-right">';
+  if (config.showMeta) {
+    right += '<div class="wb-meta"></div>';
+  }
+  if (config.actions) {
+    right += '<div class="wb-actions">';
+    if (config.actions.favorite) {
+      right += `<button class="wb-btn wb-btn-sm wb-fav" aria-label="Favorite" title="Favorite">${ICONS.heart}</button>`;
+    }
+    if (config.actions.cart) {
+      right += `<button class="wb-btn wb-btn-sm wb-cart" aria-label="Add to cart" title="Add to Cart">${ICONS.cart}</button>`;
+    }
+    right += "</div>";
+  }
+  if (config.showMute || config.showVolume) {
+    right += '<div class="wb-volume">';
+    right += `<button class="wb-btn wb-btn-sm wb-mute" aria-label="Volume" title="Volume">${ICONS.volHigh}</button>`;
+    if (config.showVolume) {
+      right += `<div class="wb-volume-popup">
+                <input type="range" class="wb-volume-slider" min="0" max="100" value="100" orient="vertical" aria-label="Volume">
+            </div>`;
+    }
+    right += "</div>";
+  }
+  if (config.showQueue) {
+    right += `<button class="wb-btn wb-btn-sm wb-queue-btn" aria-label="Queue" title="Queue">${ICONS.queue}</button>`;
+  }
+  right += "</div>";
+  return `<div class="wb-inner">${left}${centre}${right}</div>`;
+}
+
+// src/js/queue.js
+function createQueuePanel() {
+  const el = document.createElement("div");
+  el.className = "wb-queue-panel";
+  el.innerHTML = `
+        <div class="wb-queue-header">
+            <div class="wb-queue-title">
+                ${ICONS.queue}
+                Queue
+                <span class="wb-queue-count">0</span>
+            </div>
+            <button class="wb-btn wb-btn-sm wb-queue-clear" aria-label="Clear queue">Clear</button>
+        </div>
+        <div class="wb-queue-body"></div>
+    `;
+  return el;
+}
+function renderQueue(bodyEl, countEl, queue, currentIndex, callbacks) {
+  if (!bodyEl) return;
+  const upcoming = Math.max(0, queue.length - 1 - currentIndex);
+  if (countEl) countEl.textContent = upcoming;
+  if (queue.length === 0) {
+    bodyEl.innerHTML = `<div class="wb-queue-empty">${ICONS.queue}<p>Queue is empty</p></div>`;
+    return;
+  }
+  let html = "";
+  if (currentIndex >= 0 && currentIndex < queue.length) {
+    const current = queue[currentIndex];
+    html += '<div class="wb-queue-label">Now Playing</div>';
+    html += `<div class="wb-queue-item wb-queue-current" data-qi="${currentIndex}">
+            <span class="wb-queue-num">${ICONS.speaker}</span>
+            <div class="wb-queue-info">
+                <div class="wb-queue-item-title">${escapeHtml(current.title)}</div>
+                <div class="wb-queue-item-artist">${escapeHtml(current.artist)}</div>
+            </div>
+        </div>`;
+  }
+  let hasNext = false;
+  for (let i = currentIndex + 1; i < queue.length; i++) {
+    if (!hasNext) {
+      html += '<div class="wb-queue-label">Next Up</div>';
+      hasNext = true;
+    }
+    const t = queue[i];
+    html += `<div class="wb-queue-item" data-qi="${i}">
+            <span class="wb-queue-num">${i - currentIndex}</span>
+            <div class="wb-queue-info">
+                <div class="wb-queue-item-title">${escapeHtml(t.title)}</div>
+                <div class="wb-queue-item-artist">${escapeHtml(t.artist)}</div>
+            </div>
+            <button class="wb-queue-remove" data-qi="${i}" aria-label="Remove">${ICONS.close}</button>
+        </div>`;
+  }
+  if (currentIndex > 0) {
+    html += '<div class="wb-queue-label">Previously Played</div>';
+    for (let j = currentIndex - 1; j >= 0; j--) {
+      const t = queue[j];
+      html += `<div class="wb-queue-item wb-queue-played" data-qi="${j}">
+                <span class="wb-queue-num">${j + 1}</span>
+                <div class="wb-queue-info">
+                    <div class="wb-queue-item-title">${escapeHtml(t.title)}</div>
+                    <div class="wb-queue-item-artist">${escapeHtml(t.artist)}</div>
+                </div>
+            </div>`;
+    }
+  }
+  bodyEl.innerHTML = html;
+  bodyEl.querySelectorAll(".wb-queue-item[data-qi]").forEach((el) => {
+    el.addEventListener("click", (e) => {
+      if (e.target.closest(".wb-queue-remove")) return;
+      if (callbacks.onSkipTo) callbacks.onSkipTo(parseInt(el.dataset.qi));
+    });
+  });
+  bodyEl.querySelectorAll(".wb-queue-remove").forEach((btn) => {
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (callbacks.onRemove) callbacks.onRemove(parseInt(btn.dataset.qi));
+    });
+  });
+}
+
+// src/js/core.js
+var DEFAULTS = {
+  persist: true,
+  autoResume: true,
+  continuous: true,
+  repeat: "off",
+  // 'off', 'all', 'one'
+  showRepeat: true,
+  showQueue: true,
+  showPrevNext: true,
+  showVolume: true,
+  showMute: true,
+  showMeta: true,
+  showTime: true,
+  showTrackLink: true,
+  maxMeta: 3,
+  defaultArtwork: null,
+  // URL to fallback artwork image
+  theme: null,
+  // 'dark', 'light', or null (dark by default)
+  waveformStyle: "mirror",
+  waveformHeight: 32,
+  barWidth: 2,
+  barSpacing: 0,
+  waveformColor: null,
+  progressColor: null,
+  markerColor: "rgba(255, 255, 255, 0.25)",
+  volume: 1,
+  storageKey: "waveform-bar",
+  actions: null,
+  onPlay: null,
+  onPause: null,
+  onTrackChange: null,
+  onQueueChange: null,
+  onVolumeChange: null,
+  onFavorite: null,
+  onCart: null
+};
+var WaveformBar = class {
+  constructor() {
+    this.config = null;
+    this.player = null;
+    this.queue = [];
+    this.currentIndex = -1;
+    this.isPlaying = false;
+    this.isInitialized = false;
+    this.queueOpen = false;
+    this.volume = 1;
+    this.isMuted = false;
+    this._volumeBeforeMute = 1;
+    this._lastPosition = 0;
+    this._favorites = /* @__PURE__ */ new Set();
+    this._cartItems = /* @__PURE__ */ new Set();
+    this._observer = null;
+    this._activeMarkers = null;
+    this._currentMarkerIndex = -1;
+    this.repeat = "off";
+    this.barEl = null;
+    this.queueEl = null;
+    this.waveformContainer = null;
+    this.volumePopupEl = null;
+    this.titleEl = null;
+    this.artistEl = null;
+    this.metaEl = null;
+    this.playBtnEl = null;
+    this.repeatBtnEl = null;
+    this.queueBtnEl = null;
+    this.queueBodyEl = null;
+    this.queueCountEl = null;
+    this.volumeSliderEl = null;
+    this.muteBtnEl = null;
+    this.favBtnEl = null;
+    this.cartBtnEl = null;
+    this.timeCurrentEl = null;
+    this.timeTotalEl = null;
+  }
+  // =====================================================================
+  // Init / Destroy
+  // =====================================================================
+  /**
+   * Initialize WaveformBar
+   * @param {Object} [config={}]
+   * @returns {WaveformBar}
+   */
+  init(config = {}) {
+    if (this.isInitialized) this.destroy();
+    this.config = { ...DEFAULTS, ...config };
+    this.volume = this.config.volume;
+    if (typeof window.WaveformPlayer === "undefined") {
+      console.error("WaveformBar: WaveformPlayer is required.");
+      return this;
+    }
+    this._createBar();
+    this._createQueue();
+    this._initPlayer();
+    this._bindTriggers();
+    this._observeDOM();
+    if (this.config.persist) {
+      this._restoreVolume();
+      this._restoreFavorites();
+    }
+    this._seedFromAttributes();
+    if (this.config.persist) {
+      this._restoreState();
+    }
+    this.isInitialized = true;
+    this._beforeUnloadHandler = () => this._saveState();
+    window.addEventListener("beforeunload", this._beforeUnloadHandler);
+    return this;
+  }
+  /**
+   * Destroy everything
+   * @returns {WaveformBar}
+   */
+  destroy() {
+    if (this.player) {
+      this.player.destroy();
+      this.player = null;
+    }
+    if (this.barEl) {
+      this.barEl.remove();
+      this.barEl = null;
+    }
+    if (this.queueEl) {
+      this.queueEl.remove();
+      this.queueEl = null;
+    }
+    if (this._observer) {
+      this._observer.disconnect();
+      this._observer = null;
+    }
+    if (this._beforeUnloadHandler) {
+      window.removeEventListener("beforeunload", this._beforeUnloadHandler);
+      this._beforeUnloadHandler = null;
+    }
+    document.querySelectorAll("[data-wb-play],[data-wb-queue]").forEach((el) => delete el._wbBound);
+    document.querySelectorAll(".wb-current,.wb-playing").forEach((el) => el.classList.remove("wb-current", "wb-playing"));
+    this.queue = [];
+    this.currentIndex = -1;
+    this.isPlaying = false;
+    this.queueOpen = false;
+    this.isInitialized = false;
+    this.config = null;
+    return this;
+  }
+  // =====================================================================
+  // DOM Setup (private)
+  // =====================================================================
+  _createBar() {
+    this.barEl = document.createElement("div");
+    this.barEl.className = "waveform-bar";
+    const theme = this.config.theme || this._detectTheme();
+    if (theme === "light") this.barEl.classList.add("wb-light");
+    this._resolvedTheme = theme;
+    this.barEl.id = "waveform-bar";
+    this.barEl.innerHTML = buildBarHTML(this.config);
+    document.body.appendChild(this.barEl);
+    this.titleEl = this.barEl.querySelector(".wb-title");
+    this.artistEl = this.barEl.querySelector(".wb-artist");
+    this.metaEl = this.barEl.querySelector(".wb-meta");
+    this.playBtnEl = this.barEl.querySelector(".wb-play");
+    this.waveformContainer = this.barEl.querySelector(".wb-waveform-container");
+    this.queueBtnEl = this.barEl.querySelector(".wb-queue-btn");
+    this.muteBtnEl = this.barEl.querySelector(".wb-mute");
+    this.volumeSliderEl = this.barEl.querySelector(".wb-volume-slider");
+    this.favBtnEl = this.barEl.querySelector(".wb-fav");
+    this.cartBtnEl = this.barEl.querySelector(".wb-cart");
+    this.timeCurrentEl = this.barEl.querySelector(".wb-time-current");
+    this.timeTotalEl = this.barEl.querySelector(".wb-time-total");
+    this.playBtnEl.addEventListener("click", () => this.togglePlay());
+    const prevBtn = this.barEl.querySelector(".wb-prev");
+    const nextBtn = this.barEl.querySelector(".wb-next");
+    if (prevBtn) prevBtn.addEventListener("click", () => this.previous());
+    if (nextBtn) nextBtn.addEventListener("click", () => this.next());
+    this.repeatBtnEl = this.barEl.querySelector(".wb-repeat");
+    if (this.repeatBtnEl) {
+      this.repeat = this.config.repeat || "off";
+      this._updateRepeatButton();
+      this.repeatBtnEl.addEventListener("click", () => this.cycleRepeat());
+    }
+    if (this.queueBtnEl) this.queueBtnEl.addEventListener("click", () => this.toggleQueuePanel());
+    this.volumePopupEl = this.barEl.querySelector(".wb-volume-popup");
+    const volumeWrapper = this.barEl.querySelector(".wb-volume");
+    if (this.muteBtnEl) {
+      this.muteBtnEl.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.toggleMute();
+      });
+    }
+    if (volumeWrapper && this.volumePopupEl) {
+      let hoverTimeout;
+      volumeWrapper.addEventListener("mouseenter", () => {
+        clearTimeout(hoverTimeout);
+        this.openVolumePopup();
+      });
+      volumeWrapper.addEventListener("mouseleave", () => {
+        hoverTimeout = setTimeout(() => this.closeVolumePopup(), 300);
+      });
+    }
+    if (this.volumeSliderEl) {
+      this.volumeSliderEl.addEventListener("input", (e) => {
+        e.stopPropagation();
+        this.setVolume(parseInt(e.target.value) / 100);
+      });
+    }
+    document.addEventListener("click", (e) => {
+      if (this.volumePopupEl?.classList.contains("wb-volume-open") && !this.barEl.querySelector(".wb-volume")?.contains(e.target)) {
+        this.closeVolumePopup();
+      }
+    });
+    if (this.favBtnEl) this.favBtnEl.addEventListener("click", () => this.toggleFavorite());
+    if (this.cartBtnEl) this.cartBtnEl.addEventListener("click", () => this.addToCart());
+    if (this.config.showTrackLink) {
+      this.barEl.querySelector(".wb-track").addEventListener("click", () => {
+        const t = this.getCurrentTrack();
+        if (t && t.link) window.location.href = t.link;
+      });
+    }
+  }
+  _createQueue() {
+    if (!this.config.showQueue) return;
+    this.queueEl = createQueuePanel();
+    if (this._resolvedTheme === "light") this.queueEl.classList.add("wb-light");
+    document.body.appendChild(this.queueEl);
+    this.queueBodyEl = this.queueEl.querySelector(".wb-queue-body");
+    this.queueCountEl = this.queueEl.querySelector(".wb-queue-count");
+    this.queueEl.querySelector(".wb-queue-clear").addEventListener("click", () => this.clearQueue());
+    document.addEventListener("click", (e) => {
+      if (this.queueOpen && !this.queueEl.contains(e.target) && !this.queueBtnEl.contains(e.target)) {
+        this.closeQueuePanel();
+      }
+    });
+  }
+  _initPlayer() {
+    const opts = {
+      showControls: false,
+      showInfo: false,
+      waveformStyle: this.config.waveformStyle,
+      height: this.config.waveformHeight,
+      barWidth: this.config.barWidth,
+      barSpacing: this.config.barSpacing,
+      singlePlay: false,
+      onPlay: () => {
+        this.isPlaying = true;
+        this._updatePlayButton();
+        this._syncPageState();
+        const track = this.getCurrentTrack();
+        this._emit("play", { track });
+        if (this.config.onPlay) this.config.onPlay(track);
+      },
+      onPause: () => {
+        this.isPlaying = false;
+        this._updatePlayButton();
+        this._syncPageState();
+        this._saveState();
+        const track = this.getCurrentTrack();
+        this._emit("pause", { track });
+        if (this.config.onPause) this.config.onPause(track);
+      },
+      onEnd: () => {
+        this.isPlaying = false;
+        this._updatePlayButton();
+        this._syncPageState();
+        if (this.timeCurrentEl) this.timeCurrentEl.textContent = "0:00";
+        if (this.repeat === "one") {
+          if (this.player) {
+            this.player.seekTo(0);
+            this.player.play().catch(() => {
+            });
+          }
+          return;
+        }
+        if (this.config.continuous && this.currentIndex < this.queue.length - 1) {
+          this.currentIndex++;
+          this._loadCurrentTrack();
+        } else if (this.repeat === "all" && this.queue.length > 0) {
+          this.currentIndex = 0;
+          this._loadCurrentTrack();
+        }
+      },
+      onTimeUpdate: (currentTime, duration) => {
+        this._lastPosition = currentTime;
+        if (this.timeCurrentEl) this.timeCurrentEl.textContent = formatTime(currentTime);
+        if (this.timeTotalEl) this.timeTotalEl.textContent = formatTime(duration);
+        if (!this._lastSaveTime || currentTime - this._lastSaveTime > 2) {
+          this._lastSaveTime = currentTime;
+          this._saveState();
+        }
+        if (this._activeMarkers) {
+          this._checkMarkerBoundary(currentTime);
+        }
+      },
+      onLoad: null
+    };
+    if (this.config.waveformColor) opts.waveformColor = this.config.waveformColor;
+    if (this.config.progressColor) opts.progressColor = this.config.progressColor;
+    this.player = new window.WaveformPlayer(this.waveformContainer, opts);
+    this.player.setVolume(this.volume);
+  }
+  // =====================================================================
+  // Triggers (private)
+  // =====================================================================
+  _bindTriggers() {
+    document.querySelectorAll("[data-wb-play]").forEach((el) => {
+      if (el._wbBound) return;
+      el._wbBound = true;
+      el.addEventListener("click", (e) => {
+        e.preventDefault();
+        const track = parseTrackFromElement(el);
+        if (track) this.play(track);
+      });
+    });
+    document.querySelectorAll("[data-wb-queue]").forEach((el) => {
+      if (el._wbBound) return;
+      el._wbBound = true;
+      el.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const track = parseTrackFromElement(el);
+        if (track) this.addToQueue(track);
+      });
+    });
+  }
+  _observeDOM() {
+    if (typeof MutationObserver === "undefined") return;
+    this._observer = new MutationObserver(() => {
+      this._bindTriggers();
+      this._syncPageState();
+    });
+    this._observer.observe(document.body, { childList: true, subtree: true });
+  }
+  // =====================================================================
+  // Playback (public)
+  // =====================================================================
+  /**
+   * Play a track immediately
+   * @param {Object|string} trackOrUrl
+   * @returns {WaveformBar}
+   */
+  play(trackOrUrl) {
+    const track = typeof trackOrUrl === "string" ? { url: trackOrUrl, id: trackOrUrl, title: extractTitle(trackOrUrl) } : trackOrUrl;
+    if (!track || !track.url) return this;
+    const current = this.getCurrentTrack();
+    if (current && current.url === track.url) {
+      this.togglePlay();
+      return this;
+    }
+    const existing = this.queue.findIndex((t) => t.url === track.url);
+    if (existing >= 0) {
+      this.queue[existing] = { ...this.queue[existing], ...track };
+      this.currentIndex = existing;
+    } else {
+      const insertAt = this.currentIndex + 1;
+      this.queue.splice(insertAt, 0, track);
+      this.currentIndex = insertAt;
+    }
+    this._loadCurrentTrack();
+    return this;
+  }
+  /**
+   * Add to end of queue
+   * @param {Object|string} trackOrUrl
+   * @returns {WaveformBar}
+   */
+  addToQueue(trackOrUrl) {
+    const track = typeof trackOrUrl === "string" ? { url: trackOrUrl, id: trackOrUrl, title: extractTitle(trackOrUrl) } : trackOrUrl;
+    if (!track || !track.url) return this;
+    if (this.queue.find((t) => t.url === track.url)) return this;
+    this.queue.push(track);
+    this._renderQueue();
+    this._saveState();
+    this._updateNavButtons();
+    if (this.currentIndex === -1) {
+      this.currentIndex = 0;
+      this._loadCurrentTrack();
+    }
+    if (this.config.onQueueChange) this.config.onQueueChange(this.queue, this.currentIndex);
+    return this;
+  }
+  togglePlay() {
+    if (!this.player) return this;
+    this.isPlaying ? this.player.pause() : this.player.play();
+    return this;
+  }
+  pause() {
+    if (this.player && this.isPlaying) this.player.pause();
+    return this;
+  }
+  next() {
+    if (this.currentIndex < this.queue.length - 1) {
+      this.currentIndex++;
+      this._loadCurrentTrack();
+    } else if (this.repeat === "all" && this.queue.length > 0) {
+      this.currentIndex = 0;
+      this._loadCurrentTrack();
+    }
+    return this;
+  }
+  previous() {
+    if (this.player && this.player.audio && this.player.audio.currentTime > 3) {
+      this.player.seekTo(0);
+      return this;
+    }
+    if (this.currentIndex > 0) {
+      this.currentIndex--;
+      this._loadCurrentTrack();
+    } else if (this.repeat === "all" && this.queue.length > 0) {
+      this.currentIndex = this.queue.length - 1;
+      this._loadCurrentTrack();
+    }
+    return this;
+  }
+  skipTo(index) {
+    if (index < 0 || index >= this.queue.length) return this;
+    if (index === this.currentIndex) {
+      this.togglePlay();
+      return this;
+    }
+    this.currentIndex = index;
+    this._loadCurrentTrack();
+    return this;
+  }
+  /**
+   * Seek to a specific marker by index on the current track
+   * @param {number} markerIndex
+   * @returns {WaveformBar}
+   */
+  seekToMarker(markerIndex) {
+    if (!this._activeMarkers || markerIndex < 0 || markerIndex >= this._activeMarkers.length) return this;
+    const marker = this._activeMarkers[markerIndex];
+    if (this.player) {
+      this.player.seekTo(marker.time);
+      if (!this.isPlaying) this.togglePlay();
+    }
+    return this;
+  }
+  /**
+   * Seek to a marker by label on the current track
+   * @param {string} label
+   * @returns {WaveformBar}
+   */
+  seekToMarkerByLabel(label) {
+    if (!this._activeMarkers) return this;
+    const index = this._activeMarkers.findIndex(
+      (m) => (m.label || m.title || "").toLowerCase() === label.toLowerCase()
+    );
+    if (index >= 0) this.seekToMarker(index);
+    return this;
+  }
+  // =====================================================================
+  // Volume (public)
+  // =====================================================================
+  setVolume(level) {
+    this.volume = Math.max(0, Math.min(1, level));
+    this.isMuted = this.volume === 0;
+    if (this.player) this.player.setVolume(this.volume);
+    this._updateVolumeUI();
+    saveVolume(this.config.storageKey, this.volume, this.isMuted, this._volumeBeforeMute);
+    this._emit("volumechange", { volume: this.volume });
+    if (this.config.onVolumeChange) this.config.onVolumeChange(this.volume);
+    return this;
+  }
+  getVolume() {
+    return this.volume;
+  }
+  toggleMute() {
+    if (this.isMuted) {
+      this.setVolume(this._volumeBeforeMute || 1);
+    } else {
+      this._volumeBeforeMute = this.volume;
+      this.isMuted = true;
+      if (this.player) this.player.setVolume(0);
+      this._updateVolumeUI();
+    }
+    return this;
+  }
+  // =====================================================================
+  // Actions (public)
+  // =====================================================================
+  toggleFavorite() {
+    const track = this.getCurrentTrack();
+    if (!track) return this;
+    const id = track.id || track.url;
+    const wasFav = this._favorites.has(id);
+    if (wasFav) {
+      this._favorites.delete(id);
+    } else {
+      this._favorites.add(id);
+    }
+    this._updateFavoriteUI();
+    this._syncFavoriteAttributes(track.url, !wasFav);
+    saveFavorites(this.config.storageKey, this._favorites);
+    this._emit("favorite", { track, favorited: !wasFav });
+    if (this.config.onFavorite) this.config.onFavorite(track, !wasFav);
+    if (this.config.actions?.favorite) {
+      fireAction(this.config.actions.favorite, {
+        action: "favorite",
+        id,
+        url: track.url,
+        title: track.title,
+        favorited: !wasFav
+      });
+    }
+    return this;
+  }
+  addToCart() {
+    const track = this.getCurrentTrack();
+    if (!track) return this;
+    const id = track.id || track.url;
+    this._cartItems.add(id);
+    if (this.cartBtnEl) {
+      this.cartBtnEl.classList.add("wb-action-done");
+      setTimeout(() => this.cartBtnEl.classList.remove("wb-action-done"), 1500);
+    }
+    this._syncCartAttributes(track.url, true);
+    this._emit("cart", { track });
+    if (this.config.onCart) this.config.onCart(track);
+    if (this.config.actions?.cart) {
+      fireAction(this.config.actions.cart, {
+        action: "cart",
+        id,
+        url: track.url,
+        title: track.title
+      });
+    }
+    return this;
+  }
+  isFavorited(id) {
+    if (!id) {
+      const t = this.getCurrentTrack();
+      id = t ? t.id || t.url : null;
+    }
+    return id ? this._favorites.has(id) : false;
+  }
+  isInCart(id) {
+    if (!id) {
+      const t = this.getCurrentTrack();
+      id = t ? t.id || t.url : null;
+    }
+    return id ? this._cartItems.has(id) : false;
+  }
+  // =====================================================================
+  // Queue (public)
+  // =====================================================================
+  removeFromQueue(index) {
+    if (index < 0 || index >= this.queue.length || index === this.currentIndex) return this;
+    this.queue.splice(index, 1);
+    if (index < this.currentIndex) this.currentIndex--;
+    this._renderQueue();
+    this._saveState();
+    this._updateNavButtons();
+    this._emit("queuechange", { queue: this.queue, currentIndex: this.currentIndex });
+    if (this.config.onQueueChange) this.config.onQueueChange(this.queue, this.currentIndex);
+    return this;
+  }
+  clearQueue() {
+    const current = this.getCurrentTrack();
+    this.queue = current ? [current] : [];
+    this.currentIndex = current ? 0 : -1;
+    this._renderQueue();
+    this._saveState();
+    this._updateNavButtons();
+    this._emit("queuechange", { queue: this.queue, currentIndex: this.currentIndex });
+    if (this.config.onQueueChange) this.config.onQueueChange(this.queue, this.currentIndex);
+    return this;
+  }
+  getCurrentTrack() {
+    return this.currentIndex >= 0 && this.currentIndex < this.queue.length ? this.queue[this.currentIndex] : null;
+  }
+  getQueue() {
+    return [...this.queue];
+  }
+  getCurrentIndex() {
+    return this.currentIndex;
+  }
+  isCurrentlyPlaying(url) {
+    const c = this.getCurrentTrack();
+    return this.isPlaying && c && c.url === url;
+  }
+  isCurrentTrack(url) {
+    const c = this.getCurrentTrack();
+    return c && c.url === url;
+  }
+  getPlayer() {
+    return this.player;
+  }
+  // =====================================================================
+  // Events
+  // =====================================================================
+  /**
+   * Dispatch a custom DOM event on the bar element.
+   * All events bubble and are prefixed with 'waveformbar:'.
+   *
+   * Events dispatched:
+   * - waveformbar:play        { track }
+   * - waveformbar:pause       { track }
+   * - waveformbar:trackchange { track, index }
+   * - waveformbar:markerchange { marker, index, track }
+   * - waveformbar:favorite    { track, favorited }
+   * - waveformbar:cart        { track }
+   * - waveformbar:queuechange { queue, currentIndex }
+   * - waveformbar:volumechange { volume }
+   *
+   * @private
+   * @param {string} name - Event name (without prefix)
+   * @param {Object} detail - Event detail data
+   */
+  _emit(name, detail = {}) {
+    if (!this.barEl) return;
+    this.barEl.dispatchEvent(new CustomEvent("waveformbar:" + name, {
+      bubbles: true,
+      detail
+    }));
+  }
+  // =====================================================================
+  // UI: Bar visibility & Queue panel
+  // =====================================================================
+  show() {
+    if (this.barEl) this.barEl.classList.add("wb-active");
+    return this;
+  }
+  hide() {
+    if (this.barEl) this.barEl.classList.remove("wb-active");
+    this.closeQueuePanel();
+    this.closeVolumePopup();
+    return this;
+  }
+  toggleQueuePanel() {
+    return this.queueOpen ? this.closeQueuePanel() : this.openQueuePanel();
+  }
+  openQueuePanel() {
+    if (!this.queueEl) return this;
+    this.queueOpen = true;
+    this.closeVolumePopup();
+    if (this.queueBtnEl) {
+      const rect = this.queueBtnEl.getBoundingClientRect();
+      this.queueEl.style.right = window.innerWidth - rect.right + "px";
+    }
+    this.queueEl.classList.add("wb-queue-open");
+    if (this.queueBtnEl) this.queueBtnEl.classList.add("wb-active");
+    this._renderQueue();
+    return this;
+  }
+  closeQueuePanel() {
+    if (!this.queueEl) return this;
+    this.queueOpen = false;
+    this.queueEl.classList.remove("wb-queue-open");
+    if (this.queueBtnEl) this.queueBtnEl.classList.remove("wb-active");
+    return this;
+  }
+  toggleVolumePopup() {
+    if (this.volumePopupEl?.classList.contains("wb-volume-open")) {
+      this.closeVolumePopup();
+    } else {
+      this.openVolumePopup();
+    }
+    return this;
+  }
+  openVolumePopup() {
+    if (!this.volumePopupEl) return this;
+    this.closeQueuePanel();
+    this.volumePopupEl.classList.add("wb-volume-open");
+    if (this.muteBtnEl) this.muteBtnEl.classList.add("wb-active");
+    return this;
+  }
+  closeVolumePopup() {
+    if (!this.volumePopupEl) return this;
+    this.volumePopupEl.classList.remove("wb-volume-open");
+    if (this.muteBtnEl) this.muteBtnEl.classList.remove("wb-active");
+    return this;
+  }
+  // =====================================================================
+  // Internal: Loading & Display
+  // =====================================================================
+  _loadCurrentTrack() {
+    const track = this.getCurrentTrack();
+    if (!track || !this.player) return;
+    this.show();
+    this._updateTrackDisplay(track);
+    this._updateFavoriteUI();
+    const loadOpts = { artwork: track.artwork, album: track.album };
+    if (track.waveform) loadOpts.waveform = track.waveform;
+    if (track.markers && track.markers.length) {
+      const defaultColor = this.config.markerColor;
+      loadOpts.markers = track.markers.map((m) => ({
+        ...m,
+        color: m.color || defaultColor
+      }));
+    } else {
+      loadOpts.markers = [];
+    }
+    this.player.loadTrack(track.url, track.title, track.artist, loadOpts);
+    this._activeMarkers = track.markers && track.markers.length ? track.markers : null;
+    this._currentMarkerIndex = -1;
+    if (this.player) this.player.setVolume(this.isMuted ? 0 : this.volume);
+    this._renderQueue();
+    this._syncPageState();
+    this._saveState();
+    this._updateNavButtons();
+    this._emit("trackchange", { track, index: this.currentIndex });
+    if (this.config.onTrackChange) this.config.onTrackChange(track, this.currentIndex);
+  }
+  _updateTrackDisplay(track) {
+    if (this.titleEl) this._setScrollText(this.titleEl, track.title || "Untitled");
+    if (this.artistEl) this._setScrollText(this.artistEl, track.artist || "");
+    const artworkEl = this.barEl.querySelector(".wb-artwork");
+    if (artworkEl) {
+      const artworkUrl = track.artwork || this.config.defaultArtwork;
+      artworkEl.innerHTML = artworkUrl ? `<img src="${escapeHtml(artworkUrl)}" alt="${escapeHtml(track.title)}" />` : ICONS.music;
+    }
+    if (this.metaEl && this.config.showMeta) this._renderMeta(track);
+    const trackEl = this.barEl.querySelector(".wb-track");
+    if (trackEl) trackEl.style.cursor = track.link ? "pointer" : "default";
+    if (this.timeCurrentEl) this.timeCurrentEl.textContent = "0:00";
+    if (this.timeTotalEl) this.timeTotalEl.textContent = "0:00";
+  }
+  /**
+   * Set text on an element with auto-scroll if it overflows.
+   * @private
+   */
+  _setScrollText(el, text) {
+    el.classList.remove("wb-scrolling");
+    el.textContent = text;
+    requestAnimationFrame(() => {
+      if (el.scrollWidth > el.clientWidth) {
+        const overflow = el.scrollWidth - el.clientWidth;
+        const duration = Math.max(4, overflow / 20);
+        el.innerHTML = `<span class="wb-scroll-inner">${escapeHtml(text)}</span>`;
+        el.style.setProperty("--wb-scroll-distance", `-${overflow + 48}px`);
+        el.style.setProperty("--wb-scroll-duration", `${duration}s`);
+        el.classList.add("wb-scrolling");
+      }
+    });
+  }
+  _renderMeta(track) {
+    if (!this.metaEl) return;
+    const tags = [];
+    if (track.bpm) tags.push({ label: track.bpm + " BPM", type: "bpm" });
+    if (track.key) tags.push({ label: track.key, type: "key" });
+    if (track.duration) tags.push({ label: track.duration, type: "duration" });
+    if (track.meta) {
+      for (const [k, v] of Object.entries(track.meta)) {
+        if (v && tags.length < this.config.maxMeta) tags.push({ label: String(v), type: k });
+      }
+    }
+    const limited = tags.slice(0, this.config.maxMeta);
+    this.metaEl.style.display = limited.length ? "flex" : "none";
+    this.metaEl.innerHTML = limited.map(
+      (t) => `<span class="wb-tag wb-tag-${escapeHtml(t.type)}">${escapeHtml(t.label)}</span>`
+    ).join("");
+  }
+  _updatePlayButton() {
+    if (!this.playBtnEl) return;
+    const play = this.playBtnEl.querySelector(".wb-icon-play");
+    const pause = this.playBtnEl.querySelector(".wb-icon-pause");
+    if (play) play.style.display = this.isPlaying ? "none" : "block";
+    if (pause) pause.style.display = this.isPlaying ? "block" : "none";
+    this.playBtnEl.title = this.isPlaying ? "Pause" : "Play";
+  }
+  _updateNavButtons() {
+    const prevBtn = this.barEl?.querySelector(".wb-prev");
+    const nextBtn = this.barEl?.querySelector(".wb-next");
+    if (this.repeat === "all") {
+      if (prevBtn) prevBtn.classList.remove("wb-disabled");
+      if (nextBtn) nextBtn.classList.remove("wb-disabled");
+    } else {
+      if (prevBtn) prevBtn.classList.toggle("wb-disabled", this.currentIndex <= 0);
+      if (nextBtn) nextBtn.classList.toggle("wb-disabled", this.currentIndex >= this.queue.length - 1);
+    }
+  }
+  // =====================================================================
+  // Repeat
+  // =====================================================================
+  /**
+   * Cycle through repeat modes: off → all → one → off
+   * @returns {WaveformBar}
+   */
+  cycleRepeat() {
+    const modes = ["off", "all", "one"];
+    const current = modes.indexOf(this.repeat);
+    this.repeat = modes[(current + 1) % modes.length];
+    this._updateRepeatButton();
+    this._updateNavButtons();
+    this._emit("repeatchange", { mode: this.repeat });
+    return this;
+  }
+  /**
+   * Set repeat mode directly
+   * @param {'off'|'all'|'one'} mode
+   * @returns {WaveformBar}
+   */
+  setRepeat(mode) {
+    if (["off", "all", "one"].includes(mode)) {
+      this.repeat = mode;
+      this._updateRepeatButton();
+      this._updateNavButtons();
+      this._emit("repeatchange", { mode: this.repeat });
+    }
+    return this;
+  }
+  /** @private */
+  _updateRepeatButton() {
+    if (!this.repeatBtnEl) return;
+    const icons = { off: ICONS.repeatOff, all: ICONS.repeatAll, one: ICONS.repeatOne };
+    const labels = { off: "Repeat: Off", all: "Repeat: All", one: "Repeat: One" };
+    this.repeatBtnEl.innerHTML = icons[this.repeat];
+    this.repeatBtnEl.title = labels[this.repeat];
+    this.repeatBtnEl.classList.toggle("wb-repeat-active", this.repeat !== "off");
+  }
+  /**
+   * DJ mode: check if playback has crossed a marker boundary
+   * and update the bar's title/artist/artwork/meta display.
+   * Markers should be sorted by time and can include:
+   * { time, label, title, artist, artwork, bpm, key }
+   * @private
+   */
+  _checkMarkerBoundary(currentTime) {
+    if (!this._activeMarkers) return;
+    let markerIndex = -1;
+    for (let i = this._activeMarkers.length - 1; i >= 0; i--) {
+      if (currentTime >= this._activeMarkers[i].time) {
+        markerIndex = i;
+        break;
+      }
+    }
+    if (markerIndex === this._currentMarkerIndex) return;
+    this._currentMarkerIndex = markerIndex;
+    if (markerIndex < 0) return;
+    const marker = this._activeMarkers[markerIndex];
+    const track = this.getCurrentTrack();
+    if (marker.title && this.titleEl) this._setScrollText(this.titleEl, marker.title);
+    if (marker.artist && this.artistEl) this._setScrollText(this.artistEl, marker.artist);
+    const markerEls = this.waveformContainer?.querySelectorAll(".waveform-marker");
+    if (markerEls) {
+      markerEls.forEach((el, i) => el.classList.toggle("wb-marker-active", i === markerIndex));
+    }
+    if (marker.artwork) {
+      const artworkEl = this.barEl.querySelector(".wb-artwork");
+      if (artworkEl) artworkEl.innerHTML = `<img src="${marker.artwork}" alt="${marker.title || ""}" />`;
+    }
+    if (this.metaEl && (marker.bpm || marker.key)) {
+      const metaTrack = {
+        ...track || {},
+        bpm: marker.bpm || "",
+        key: marker.key || ""
+      };
+      this._renderMeta(metaTrack);
+    }
+    this._emit("markerchange", { marker, index: markerIndex, track });
+  }
+  _updateVolumeUI() {
+    if (this.volumeSliderEl) {
+      this.volumeSliderEl.value = this.isMuted ? 0 : Math.round(this.volume * 100);
+    }
+    if (this.muteBtnEl) {
+      if (this.isMuted || this.volume === 0) {
+        this.muteBtnEl.innerHTML = ICONS.volMute;
+        this.muteBtnEl.classList.add("wb-muted");
+        this.muteBtnEl.title = "Unmute";
+      } else if (this.volume < 0.5) {
+        this.muteBtnEl.innerHTML = ICONS.volLow;
+        this.muteBtnEl.classList.remove("wb-muted");
+        this.muteBtnEl.title = "Mute";
+      } else {
+        this.muteBtnEl.innerHTML = ICONS.volHigh;
+        this.muteBtnEl.classList.remove("wb-muted");
+        this.muteBtnEl.title = "Mute";
+      }
+    }
+  }
+  /**
+   * Auto-detect light/dark theme from the page.
+   * Checks: 1) HTML/body classes, 2) background brightness, 3) system preference
+   * @private
+   * @returns {'dark'|'light'}
+   */
+  _detectTheme() {
+    const root = document.documentElement;
+    const body = document.body;
+    const darkIndicators = ["dark", "dark-mode", "theme-dark"];
+    const lightIndicators = ["light", "light-mode", "theme-light"];
+    for (const cls of darkIndicators) {
+      if (root.classList.contains(cls) || body.classList.contains(cls)) return "dark";
+    }
+    if (root.getAttribute("data-theme") === "dark" || body.getAttribute("data-theme") === "dark") return "dark";
+    for (const cls of lightIndicators) {
+      if (root.classList.contains(cls) || body.classList.contains(cls)) return "light";
+    }
+    if (root.getAttribute("data-theme") === "light" || body.getAttribute("data-theme") === "light") return "light";
+    try {
+      const bg = getComputedStyle(body).backgroundColor;
+      const rgb = bg.match(/\d+/g);
+      if (rgb && rgb.length >= 3) {
+        const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1e3;
+        if (brightness > 128) return "light";
+        if (brightness < 128) return "dark";
+      }
+    } catch (e) {
+    }
+    if (window.matchMedia?.("(prefers-color-scheme: light)").matches) return "light";
+    return "dark";
+  }
+  _updateFavoriteUI() {
+    if (!this.favBtnEl) return;
+    const fav = this.isFavorited();
+    this.favBtnEl.innerHTML = fav ? ICONS.heartFilled : ICONS.heart;
+    this.favBtnEl.classList.toggle("wb-fav-active", fav);
+  }
+  _renderQueue() {
+    renderQueue(this.queueBodyEl, this.queueCountEl, this.queue, this.currentIndex, {
+      onSkipTo: (i) => this.skipTo(i),
+      onRemove: (i) => this.removeFromQueue(i)
+    });
+  }
+  // =====================================================================
+  // Page State Sync
+  // =====================================================================
+  /**
+   * Sync all state classes and attributes back to page trigger elements.
+   *
+   * Classes applied:
+   * - .wb-current — track is current (playing or paused)
+   * - .wb-playing — track is actively playing
+   * - .wb-favorited — track is in favorites
+   * - .wb-in-cart — track has been added to cart
+   * @private
+   */
+  _syncPageState() {
+    const current = this.getCurrentTrack();
+    const currentUrl = current ? current.url : null;
+    document.querySelectorAll("[data-wb-play]").forEach((el) => {
+      const url = el.dataset.wbUrl || el.dataset.url;
+      const id = el.dataset.wbId || el.dataset.id || url;
+      const isCurrent = url && url === currentUrl;
+      el.classList.toggle("wb-current", isCurrent);
+      el.classList.toggle("wb-playing", isCurrent && this.isPlaying);
+      el.classList.toggle("wb-favorited", this._favorites.has(id));
+      el.classList.toggle("wb-in-cart", this._cartItems.has(id));
+    });
+  }
+  /**
+   * Seed favorites and cart state from data attributes on page elements.
+   * This is the authoritative source — server renders the initial state,
+   * and we read it on init. Overrides localStorage.
+   * @private
+   */
+  _seedFromAttributes() {
+    let seededFav = false;
+    let seededCart = false;
+    document.querySelectorAll("[data-wb-play]").forEach((el) => {
+      const id = el.dataset.wbId || el.dataset.id || el.dataset.wbUrl || el.dataset.url;
+      if (!id) return;
+      if (el.dataset.wbFavorited === "true") {
+        this._favorites.add(id);
+        seededFav = true;
+      }
+      if (el.dataset.wbInCart === "true") {
+        this._cartItems.add(id);
+        seededCart = true;
+      }
+    });
+    if (seededFav) {
+      saveFavorites(this.config.storageKey, this._favorites);
+    }
+  }
+  /**
+   * Sync favorite state back to trigger element data attributes
+   * @private
+   * @param {string} url - Track URL to match
+   * @param {boolean} favorited - New state
+   */
+  _syncFavoriteAttributes(url, favorited) {
+    document.querySelectorAll("[data-wb-play]").forEach((el) => {
+      const elUrl = el.dataset.wbUrl || el.dataset.url;
+      if (elUrl === url) {
+        el.dataset.wbFavorited = favorited ? "true" : "false";
+        el.classList.toggle("wb-favorited", favorited);
+      }
+    });
+  }
+  /**
+   * Sync cart state back to trigger element data attributes
+   * @private
+   * @param {string} url - Track URL to match
+   * @param {boolean} inCart - New state
+   */
+  _syncCartAttributes(url, inCart) {
+    document.querySelectorAll("[data-wb-play]").forEach((el) => {
+      const elUrl = el.dataset.wbUrl || el.dataset.url;
+      if (elUrl === url) {
+        el.dataset.wbInCart = inCart ? "true" : "false";
+        el.classList.toggle("wb-in-cart", inCart);
+      }
+    });
+  }
+  // =====================================================================
+  // Persistence
+  // =====================================================================
+  _saveState() {
+    if (!this.config.persist) return;
+    saveQueueState(this.config.storageKey, {
+      queue: this.queue,
+      currentIndex: this.currentIndex,
+      position: this._lastPosition || 0,
+      isPlaying: this.isPlaying
+    });
+  }
+  _restoreState() {
+    if (!this.config.persist) return;
+    const state = restoreQueueState(this.config.storageKey);
+    if (!state) return;
+    this.queue = state.queue;
+    this.currentIndex = state.currentIndex;
+    const track = this.getCurrentTrack();
+    if (!track) return;
+    this.show();
+    this._updateTrackDisplay(track);
+    this._updateFavoriteUI();
+    this._updateNavButtons();
+    if (track.waveform) this.player.options.waveform = track.waveform;
+    this.player.options.title = track.title || "";
+    this.player.options.subtitle = track.artist || "";
+    if (track.markers && track.markers.length) {
+      const defaultColor = this.config.markerColor;
+      this.player.options.markers = track.markers.map((m) => ({
+        ...m,
+        color: m.color || defaultColor
+      }));
+      this._activeMarkers = track.markers;
+    } else {
+      this.player.options.markers = [];
+      this._activeMarkers = null;
+    }
+    this._currentMarkerIndex = -1;
+    this.player.load(track.url).then(() => {
+      if (this.player) this.player.setVolume(this.isMuted ? 0 : this.volume);
+      console.log("RESTORE: position =", state.position, "duration =", this.player?.audio?.duration);
+      if (state.isPlaying && this.config.autoResume) {
+        try {
+          const p = this.player.play();
+          if (p && typeof p.catch === "function") {
+            p.catch(() => {
+              this.isPlaying = false;
+              this._updatePlayButton();
+              this._syncPageState();
+            });
+          }
+        } catch (e) {
+          this.isPlaying = false;
+          this._updatePlayButton();
+          this._syncPageState();
+        }
+      }
+      if (state.position > 0) {
+        setTimeout(() => {
+          if (this.player) {
+            this.player.seekTo(state.position);
+            this._lastPosition = state.position;
+          }
+        }, 100);
+      }
+    }).catch(() => {
+    });
+    this._renderQueue();
+    this._syncPageState();
+  }
+  _restoreVolume() {
+    const data = restoreVolume(this.config.storageKey);
+    if (!data) return;
+    this.volume = data.volume;
+    this.isMuted = data.muted;
+    this._volumeBeforeMute = data.volumeBeforeMute;
+    if (this.player) this.player.setVolume(this.isMuted ? 0 : this.volume);
+    this._updateVolumeUI();
+  }
+  _restoreFavorites() {
+    this._favorites = restoreFavorites(this.config.storageKey);
+  }
+};
+
+// src/js/index.js
+var instance = new WaveformBar();
+if (typeof window !== "undefined") {
+  window.WaveformBar = instance;
+}
+var index_default = instance;
+export {
+  WaveformBar,
+  index_default as default
+};
+/**
+ * WaveformBar v1.0.0
+ * Persistent bottom audio player bar for WaveformPlayer
+ *
+ * @author ArrayPress
+ * @license MIT
+ */