horeg-audio 1.0.0

package/dist/horeg-audio.cjs

@@ -0,0 +1,828 @@
+"use strict";var M=Object.defineProperty;var B=(l,e,i)=>e in l?M(l,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):l[e]=i;var r=(l,e,i)=>B(l,typeof e!="symbol"?e+"":e,i);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C={"horeg-classic":{primaryGlowColor:"#f59e0b",accentColor:"#ef4444",cardBackground:"#121214",textColor:"#f4f4f5",sliderProgressColor:"#f59e0b",borderRadius:"14px"},"horeg-nightclub":{primaryGlowColor:"#06b6d4",accentColor:"#ec4899",cardBackground:"#0b0c10",textColor:"#f8fafc",sliderProgressColor:"#06b6d4",borderRadius:"14px"},"horeg-stealth":{primaryGlowColor:"#94a3b8",accentColor:"#e2e8f0",cardBackground:"#0f1115",textColor:"#e2e8f0",sliderProgressColor:"#94a3b8",borderRadius:"8px"}};function T(l={}){const e=l.variant||"horeg-classic",i=C[e]||C["horeg-classic"],t=l.primaryGlowColor||i.primaryGlowColor||"#f59e0b",a=l.accentColor||i.accentColor||"#ef4444",s=l.cardBackground||i.cardBackground||"#121214",n=l.textColor||i.textColor||"#f4f4f5",c=l.sliderProgressColor||i.sliderProgressColor||t,h=l.borderRadius||i.borderRadius||"14px";return`
+    :host {
+      --horeg-bg: ${s};
+      --horeg-surface: #18181b;
+      --horeg-surface-hover: #222226;
+      --horeg-border: #27272a;
+      --horeg-glow: ${t};
+      --horeg-glow-rgb: 245, 158, 11;
+      --horeg-accent: ${a};
+      --horeg-progress: ${c};
+      --horeg-text-main: ${n};
+      --horeg-text-muted: #a1a1aa;
+      --horeg-radius: ${h};
+      display: block;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      box-sizing: border-box;
+      outline: none;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    *, *::before, *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    .horeg-player-box {
+      background: var(--horeg-bg);
+      border: 2px solid var(--horeg-border);
+      border-radius: var(--horeg-radius);
+      box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.9), 0 0 20px -5px var(--horeg-glow);
+      color: var(--horeg-text-main);
+      position: relative;
+      overflow: hidden;
+      max-width: 520px;
+      width: 100%;
+      margin: 0 auto;
+      transition: box-shadow 0.3s ease, border-color 0.3s ease;
+    }
+
+    /* Player Box active glow when focused within */
+    :host(:focus) .horeg-player-box,
+    :host(:focus-within) .horeg-player-box,
+    .horeg-player-box:focus-within {
+      border-color: var(--horeg-glow);
+      box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.95), 0 0 30px -2px var(--horeg-glow), 0 0 10px var(--horeg-glow);
+    }
+
+    :host(:focus) .horeg-player-box .horeg-bolt,
+    :host(:focus-within) .horeg-player-box .horeg-bolt,
+    .horeg-player-box:focus-within .horeg-bolt {
+      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 0 4px var(--horeg-glow);
+    }
+
+    .horeg-speaker-grill {
+      position: absolute;
+      inset: 0;
+      background-image: radial-gradient(#2c2d33 1.2px, transparent 1.2px);
+      background-size: 8px 8px;
+      opacity: 0.3;
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    /* Metal Corner Brackets / Screws (Sound System Rig Rigging) */
+    .horeg-bolt {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      background: #3f3f46;
+      border: 1px solid #18181b;
+      border-radius: 50%;
+      box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.8);
+      z-index: 2;
+    }
+    .horeg-bolt::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 4px;
+      height: 1px;
+      background: #18181b;
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+    .horeg-bolt.top-left { top: 7px; left: 7px; }
+    .horeg-bolt.top-right { top: 7px; right: 7px; }
+    .horeg-bolt.bottom-left { bottom: 7px; left: 7px; }
+    .horeg-bolt.bottom-right { bottom: 7px; right: 7px; }
+
+    .horeg-content-wrap {
+      position: relative;
+      z-index: 3;
+      padding: 18px 20px 16px 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+    }
+
+    /* Top Rig Header */
+    .horeg-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #27272a;
+      padding-bottom: 8px;
+    }
+
+    .horeg-rig-badge {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 10px;
+      letter-spacing: 1.5px;
+      text-transform: uppercase;
+      font-weight: 800;
+      color: var(--horeg-glow);
+      text-shadow: 0 0 8px var(--horeg-glow);
+    }
+
+    .horeg-badge-led {
+      width: 7px;
+      height: 7px;
+      background-color: var(--horeg-glow);
+      border-radius: 50%;
+      box-shadow: 0 0 6px var(--horeg-glow);
+      animation: ledPulse 2s infinite ease-in-out;
+    }
+
+    @keyframes ledPulse {
+      0%, 100% { opacity: 0.5; transform: scale(0.9); }
+      50% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 10px var(--horeg-glow); }
+    }
+
+    /* Track Display & Visualizer Section */
+    .horeg-track-row {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+    }
+
+    .horeg-cover-container {
+      position: relative;
+      width: 64px;
+      height: 64px;
+      min-width: 64px;
+      border-radius: 8px;
+      overflow: hidden;
+      background: #18181b;
+      border: 1px solid #3f3f46;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 2px 6px rgba(0,0,0,0.6);
+    }
+
+    .horeg-cover-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .horeg-cover-fallback {
+      color: var(--horeg-glow);
+      opacity: 0.7;
+    }
+
+    .horeg-track-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .horeg-track-title {
+      font-size: 15px;
+      font-weight: 700;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--horeg-text-main);
+      letter-spacing: 0.2px;
+    }
+
+    .horeg-track-artist {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--horeg-text-muted);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .horeg-track-album {
+      font-size: 10px;
+      color: #71717a;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* Mini EQ Visualizer */
+    .horeg-eq-wrapper {
+      display: flex;
+      align-items: flex-end;
+      gap: 2px;
+      height: 24px;
+      padding: 0 4px;
+    }
+
+    .horeg-eq-bar {
+      width: 3px;
+      height: 4px;
+      background: var(--horeg-glow);
+      border-radius: 1px;
+      transition: height 0.1s ease;
+      box-shadow: 0 0 4px var(--horeg-glow);
+    }
+
+    /* Scrubbing / Fader Progress Bar */
+    .horeg-progress-container {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+
+    .horeg-time-row {
+      display: flex;
+      justify-content: space-between;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+      font-size: 11px;
+      color: var(--horeg-text-muted);
+    }
+
+    .horeg-slider-track {
+      position: relative;
+      width: 100%;
+      height: 7px;
+      background: #27272a;
+      border-radius: 4px;
+      cursor: pointer;
+      overflow: hidden;
+      box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
+    }
+
+    .horeg-buffer-bar {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 0%;
+      background: #3f3f46;
+      border-radius: 4px;
+      transition: width 0.2s linear;
+    }
+
+    .horeg-fill-bar {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 0%;
+      background: linear-gradient(90deg, var(--horeg-accent) 0%, var(--horeg-progress) 100%);
+      border-radius: 4px;
+      box-shadow: 0 0 8px var(--horeg-glow);
+      transition: width 0.08s linear;
+    }
+
+    /* Controls Row */
+    .horeg-controls-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-top: 4px;
+    }
+
+    .horeg-side-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .horeg-center-controls {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .horeg-btn {
+      background: transparent;
+      border: none;
+      outline: none;
+      color: var(--horeg-text-muted);
+      cursor: pointer;
+      padding: 6px;
+      border-radius: 8px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.15s ease;
+      touch-action: manipulation;
+    }
+
+    .horeg-btn:hover {
+      color: var(--horeg-text-main);
+      background: var(--horeg-surface-hover);
+    }
+
+    .horeg-btn:active {
+      transform: scale(0.92);
+      filter: brightness(1.2);
+    }
+
+    .horeg-btn:focus-visible {
+      outline: 2px solid var(--horeg-glow);
+      outline-offset: 1px;
+    }
+
+    .horeg-btn.active {
+      color: var(--horeg-glow);
+      background: rgba(255, 255, 255, 0.06);
+      text-shadow: 0 0 8px var(--horeg-glow);
+      box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.05);
+    }
+
+    /* Primary Play / Pause Button with Neon Glow Pulse */
+    .horeg-btn-play {
+      width: 44px;
+      height: 44px;
+      border-radius: 50%;
+      background: #1f1f23;
+      border: 2px solid var(--horeg-glow);
+      color: var(--horeg-glow);
+      box-shadow: 0 0 12px -2px var(--horeg-glow);
+      transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
+    }
+
+    .horeg-btn-play:hover {
+      background: #27272a;
+      transform: scale(1.06);
+      box-shadow: 0 0 18px 2px var(--horeg-glow);
+    }
+
+    .horeg-btn-play:active {
+      transform: scale(0.96);
+    }
+
+    .horeg-btn-play.playing {
+      background: var(--horeg-glow);
+      color: #09090b;
+      box-shadow: 0 0 20px var(--horeg-glow), inset 0 0 8px rgba(255, 255, 255, 0.4);
+      animation: playPulse 2.2s infinite ease-in-out;
+    }
+
+    @keyframes playPulse {
+      0%, 100% {
+        box-shadow: 0 0 15px var(--horeg-glow);
+      }
+      50% {
+        box-shadow: 0 0 25px var(--horeg-glow), 0 0 8px #fff;
+      }
+    }
+
+    /* Volume Slider Rel Mixer */
+    .horeg-volume-wrap {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .horeg-volume-slider {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 70px;
+      height: 5px;
+      background: #27272a;
+      border-radius: 3px;
+      outline: none;
+      cursor: pointer;
+    }
+
+    .horeg-volume-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--horeg-glow);
+      border: 1px solid #18181b;
+      box-shadow: 0 0 6px var(--horeg-glow);
+      cursor: pointer;
+      transition: transform 0.1s ease;
+    }
+
+    .horeg-volume-slider::-webkit-slider-thumb:hover {
+      transform: scale(1.2);
+    }
+
+    .horeg-volume-slider::-moz-range-thumb {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--horeg-glow);
+      border: 1px solid #18181b;
+      box-shadow: 0 0 6px var(--horeg-glow);
+      cursor: pointer;
+    }
+
+    /* Drag Over Highlight on main player */
+    .horeg-player-box.drag-over {
+      border-color: var(--horeg-glow);
+      box-shadow: 0 0 25px var(--horeg-glow), 0 8px 32px rgba(0, 0, 0, 0.9);
+    }
+
+    /* Rack Mount Playlist Drawer */
+    .horeg-drawer {
+      max-height: 0;
+      opacity: 0;
+      overflow-y: auto;
+      transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
+      background: #141416;
+      border-top: 1px solid #27272a;
+      border-radius: 0 0 calc(var(--horeg-radius) - 2px) calc(var(--horeg-radius) - 2px);
+      scrollbar-width: thin;
+      scrollbar-color: #3f3f46 #18181b;
+      position: relative;
+      z-index: 3;
+    }
+
+    .horeg-drawer.open {
+      max-height: 220px;
+      max-height: 380px;
+      opacity: 1;
+    }
+
+    /* Drawer Header */
+    .horeg-drawer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 14px 8px 14px;
+      border-bottom: 1px solid #27272a;
+      position: sticky;
+      top: 0;
+      background: #141416;
+      z-index: 2;
+    }
+
+    .horeg-drawer-heading {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.8px;
+      color: var(--horeg-text-muted);
+      text-transform: uppercase;
+      font-family: ui-monospace, monospace;
+    }
+
+    .horeg-drawer-count {
+      padding: 1px 6px;
+      background: #27272a;
+      color: var(--horeg-glow);
+      border-radius: 10px;
+      font-size: 10px;
+      font-weight: 700;
+    }
+
+    .horeg-btn-add-track {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      padding: 4px 9px;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--horeg-text-main);
+      background: #1f1f23;
+      border: 1px solid #3f3f46;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+
+    .horeg-btn-add-track:hover {
+      background: #27272a;
+      border-color: var(--horeg-glow);
+      color: var(--horeg-glow);
+      box-shadow: 0 0 8px rgba(245, 158, 11, 0.2);
+    }
+
+    .horeg-btn-add-track.active {
+      background: #27272a;
+      border-color: var(--horeg-glow);
+      color: var(--horeg-glow);
+      box-shadow: 0 0 12px var(--horeg-glow);
+      text-shadow: 0 0 6px var(--horeg-glow);
+    }
+
+    .horeg-btn-add-track:active {
+      transform: scale(0.95);
+    }
+
+    /* Add Track Panel Form */
+    .horeg-add-panel {
+      display: none;
+      flex-direction: column;
+      gap: 10px;
+      margin: 10px 12px;
+      padding: 12px;
+      background: #18181b;
+      border: 1px solid #3f3f46;
+      border-radius: 8px;
+      box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
+      animation: fadeIn 0.2s ease;
+    }
+
+    .horeg-add-panel.open {
+      display: flex;
+    }
+
+    .horeg-add-tabs {
+      display: flex;
+      gap: 6px;
+      border-bottom: 1px solid #27272a;
+      padding-bottom: 8px;
+    }
+
+    .horeg-tab-btn {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 6px 10px;
+      font-size: 11px;
+      font-weight: 600;
+      background: #202024;
+      color: var(--horeg-text-muted);
+      border: 1px solid #2e2e33;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+
+    .horeg-tab-btn:hover {
+      color: var(--horeg-text-main);
+      border-color: #52525b;
+    }
+
+    .horeg-tab-btn.active {
+      background: #27272a;
+      color: var(--horeg-glow);
+      border-color: var(--horeg-glow);
+      box-shadow: 0 0 10px var(--horeg-glow);
+      text-shadow: 0 0 6px var(--horeg-glow);
+    }
+
+    .horeg-tab-btn:active {
+      transform: scale(0.97);
+    }
+
+    .horeg-tab-pane {
+      display: none;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .horeg-tab-pane.active {
+      display: flex;
+    }
+
+    /* Dropzone for local file */
+    .horeg-dropzone {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 16px 10px;
+      border: 2px dashed #3f3f46;
+      border-radius: 6px;
+      background: #141416;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      text-align: center;
+    }
+
+    .horeg-dropzone:hover,
+    .horeg-dropzone.drag-active {
+      border-color: var(--horeg-glow);
+      background: rgba(245, 158, 11, 0.05);
+      box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
+    }
+
+    .horeg-dropzone-icon {
+      color: var(--horeg-glow);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .horeg-dropzone-text {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--horeg-text-main);
+    }
+
+    .horeg-dropzone-hint {
+      font-size: 10px;
+      color: var(--horeg-text-muted);
+    }
+
+    /* Inputs for URL / Meta */
+    .horeg-input-field {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 7px 10px;
+      font-size: 12px;
+      background: #121214;
+      border: 1px solid #3f3f46;
+      border-radius: 5px;
+      color: var(--horeg-text-main);
+      outline: none;
+      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+    }
+
+    .horeg-input-field:focus {
+      border-color: var(--horeg-glow);
+      background: #18181b;
+      box-shadow: 0 0 0 1px var(--horeg-glow), 0 0 10px var(--horeg-glow);
+      outline: none;
+    }
+
+    .horeg-input-field::placeholder {
+      color: #71717a;
+      font-size: 11px;
+    }
+
+    .horeg-form-actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 6px;
+      margin-top: 4px;
+    }
+
+    .horeg-btn-submit {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      padding: 6px 12px;
+      font-size: 11px;
+      font-weight: 700;
+      background: var(--horeg-glow);
+      color: #09090b;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: opacity 0.15s ease, transform 0.1s ease;
+    }
+
+    .horeg-btn-submit:hover {
+      opacity: 0.9;
+      transform: translateY(-1px);
+    }
+
+    .horeg-btn-submit:active {
+      transform: scale(0.96);
+      filter: brightness(1.15);
+    }
+
+    .horeg-btn-cancel {
+      padding: 6px 10px;
+      font-size: 11px;
+      font-weight: 600;
+      background: transparent;
+      color: var(--horeg-text-muted);
+      border: 1px solid transparent;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: color 0.15s ease, transform 0.1s ease;
+    }
+
+    .horeg-btn-cancel:hover {
+      color: var(--horeg-text-main);
+    }
+
+    .horeg-btn-cancel:active {
+      transform: scale(0.96);
+    }
+
+    .horeg-drawer-inner {
+      padding: 6px 10px 10px 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .horeg-track-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 10px;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 0.15s ease;
+      font-size: 13px;
+    }
+
+    .horeg-track-item:hover {
+      background: #1f1f23;
+    }
+
+    .horeg-track-item.active {
+      background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
+      color: var(--horeg-glow);
+      border-left: 3px solid var(--horeg-glow);
+      box-shadow: inset 3px 0 6px -2px var(--horeg-glow), 0 2px 8px rgba(0, 0, 0, 0.4);
+      position: relative;
+    }
+
+    .horeg-track-item.active .horeg-track-num {
+      color: var(--horeg-glow);
+      font-weight: 700;
+      text-shadow: 0 0 8px var(--horeg-glow);
+    }
+
+    .horeg-track-item.active .horeg-item-title {
+      color: var(--horeg-glow);
+      font-weight: 700;
+      text-shadow: 0 0 8px var(--horeg-glow);
+    }
+
+    .horeg-track-item.active .horeg-item-artist {
+      color: var(--horeg-text-main);
+      opacity: 0.9;
+    }
+
+    .horeg-track-item.active .horeg-item-duration {
+      color: var(--horeg-glow);
+      opacity: 0.9;
+    }
+
+    .horeg-track-item:focus-visible {
+      outline: 2px solid var(--horeg-glow);
+      outline-offset: -1px;
+    }
+
+    .horeg-track-num {
+      font-family: ui-monospace, monospace;
+      font-size: 11px;
+      color: var(--horeg-text-muted);
+      width: 18px;
+    }
+
+    .horeg-track-details {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .horeg-item-title {
+      font-weight: 600;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .horeg-item-artist {
+      font-size: 11px;
+      color: var(--horeg-text-muted);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .horeg-item-duration {
+      font-family: ui-monospace, monospace;
+      font-size: 11px;
+      color: var(--horeg-text-muted);
+      margin-right: 4px;
+    }
+
+    /* Track Item Actions (Remove button) */
+    .horeg-track-actions {
+      display: flex;
+      align-items: center;
+      opacity: 0.5;
+      transition: opacity 0.15s ease;
+    }
+
+    .horeg-track-item:hover .horeg-track-actions {
+      opacity: 1;
+    }
+
+    .horeg-btn-remove {
+      background: transparent;
+      border: none;
+      color: var(--horeg-text-muted);
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.15s ease;
+    }
+
+    .horeg-btn-remove:hover {
+      color: #ef4444;
+      background: rgba(239, 68, 68, 0.15);
+    }
+
+    .horeg-empty-playlist {
+      padding: 24px 12px;
+      text-align: center;
+      color: var(--horeg-text-muted);
+      font-size: 12px;
+      font-style: italic;
+    }
+  `}function b(l){if(isNaN(l)||!isFinite(l)||l<0)return"00:00";const e=Math.floor(l),i=Math.floor(e/3600),t=Math.floor(e%3600/60),a=e%60,s=n=>n.toString().padStart(2,"0");return i>0?`${i}:${s(t)}:${s(a)}`:`${s(t)}:${s(a)}`}function u(l,e,i){return Math.min(Math.max(l,e),i)}class I{constructor(e,i={}){r(this,"audio");r(this,"playlist",[]);r(this,"currentIndex",0);r(this,"loopMode","all");r(this,"shuffleMode",!1);r(this,"volumeLevel",.8);r(this,"previousVolume",.8);r(this,"callbacks",{});r(this,"handlePlay",()=>{const e=this.getCurrentTrack();e&&this.callbacks.onPlay&&this.callbacks.onPlay(e)});r(this,"handlePause",()=>{this.callbacks.onPause&&this.callbacks.onPause()});r(this,"handleTimeUpdate",()=>{const e=this.audio.currentTime||0,i=this.getDuration();this.callbacks.onTimeUpdate&&this.callbacks.onTimeUpdate(e,i)});r(this,"handleProgress",()=>{if(this.audio.buffered.length>0&&this.audio.duration>0){const e=this.audio.buffered.end(this.audio.buffered.length-1),i=u(e/this.audio.duration*100,0,100);this.callbacks.onBufferUpdate&&this.callbacks.onBufferUpdate(i)}});r(this,"handleLoadedMetadata",()=>{const e=this.audio.currentTime||0,i=this.getDuration();this.callbacks.onTimeUpdate&&this.callbacks.onTimeUpdate(e,i),this.handleProgress()});r(this,"handleWaiting",()=>{this.callbacks.onLoadingChange&&this.callbacks.onLoadingChange(!0)});r(this,"handlePlaying",()=>{this.callbacks.onLoadingChange&&this.callbacks.onLoadingChange(!1)});r(this,"handleEnded",()=>{const e=this.getCurrentTrack();e&&this.callbacks.onEnded&&this.callbacks.onEnded(e),this.loopMode==="one"?(this.audio.currentTime=0,this.play()):this.next(!0)});r(this,"handleError",()=>{const e=this.audio.error||new Error("Unknown audio playback error");this.callbacks.onError&&this.callbacks.onError(e)});this.audio=new Audio,this.playlist=[...e.playlist||[]],this.currentIndex=e.initialIndex!==void 0?u(e.initialIndex,0,Math.max(0,this.playlist.length-1)):0,this.loopMode=e.loop||"all",this.shuffleMode=!!e.shuffle,this.volumeLevel=e.volume!==void 0?u(e.volume,0,1):.8,this.callbacks=i||{onPlay:e.onPlay,onPause:e.onPause,onTrackChange:e.onTrackChange,onPlaylistChange:e.onPlaylistChange,onTimeUpdate:e.onTimeUpdate,onEnded:e.onEnded,onError:e.onError},this.audio.volume=this.volumeLevel,this.attachEvents(),this.playlist.length>0&&this.loadTrack(this.currentIndex,!!e.autoplay)}attachEvents(){this.audio.addEventListener("play",this.handlePlay),this.audio.addEventListener("pause",this.handlePause),this.audio.addEventListener("timeupdate",this.handleTimeUpdate),this.audio.addEventListener("progress",this.handleProgress),this.audio.addEventListener("ended",this.handleEnded),this.audio.addEventListener("error",this.handleError),this.audio.addEventListener("waiting",this.handleWaiting),this.audio.addEventListener("playing",this.handlePlaying),this.audio.addEventListener("loadedmetadata",this.handleLoadedMetadata)}detachEvents(){this.audio.removeEventListener("play",this.handlePlay),this.audio.removeEventListener("pause",this.handlePause),this.audio.removeEventListener("timeupdate",this.handleTimeUpdate),this.audio.removeEventListener("progress",this.handleProgress),this.audio.removeEventListener("ended",this.handleEnded),this.audio.removeEventListener("error",this.handleError),this.audio.removeEventListener("waiting",this.handleWaiting),this.audio.removeEventListener("playing",this.handlePlaying),this.audio.removeEventListener("loadedmetadata",this.handleLoadedMetadata)}getCurrentTrack(){return this.playlist[this.currentIndex]}getCurrentIndex(){return this.currentIndex}getPlaylist(){return this.playlist}setPlaylist(e,i=0){this.playlist=[...e],this.currentIndex=u(i,0,Math.max(0,this.playlist.length-1)),this.loadTrack(this.currentIndex,!1),this.callbacks.onPlaylistChange&&this.callbacks.onPlaylistChange([...this.playlist],this.currentIndex),this.playlist.length>0?this.loadTrack(this.currentIndex,!1):(this.audio.pause(),this.audio.src="",this.callbacks.onTrackChange&&this.callbacks.onTrackChange({title:"No Track Loaded",src:""},0))}addTrack(e,i=!1){const t=this.playlist.length===0;this.playlist.push(e);const a=this.playlist.length-1;return this.callbacks.onPlaylistChange&&this.callbacks.onPlaylistChange([...this.playlist],this.currentIndex),t?this.loadTrack(0,i):i&&this.loadTrack(a,!0),a}addTracks(e,i=!1){if(!e||e.length===0)return;const t=this.playlist.length===0,a=this.playlist.length;this.playlist.push(...e),this.callbacks.onPlaylistChange&&this.callbacks.onPlaylistChange([...this.playlist],this.currentIndex),t?this.loadTrack(0,i):i&&this.loadTrack(a,!0)}removeTrack(e){if(e<0||e>=this.playlist.length)return;const i=e===this.currentIndex;if(this.playlist.splice(e,1),this.playlist.length===0)this.currentIndex=0,this.audio.pause(),this.audio.src="",this.callbacks.onTrackChange&&this.callbacks.onTrackChange({title:"No Track Loaded",src:""},0);else if(i){const t=u(e,0,this.playlist.length-1);this.loadTrack(t,!1)}else e<this.currentIndex&&this.currentIndex--;this.callbacks.onPlaylistChange&&this.callbacks.onPlaylistChange([...this.playlist],this.currentIndex)}getDuration(){const e=this.audio.duration;if(e&&!isNaN(e)&&isFinite(e))return e;const i=this.getCurrentTrack();return(i==null?void 0:i.duration)||0}getCurrentTime(){return this.audio.currentTime||0}isPlaying(){return!this.audio.paused&&!this.audio.ended}isMuted(){return this.audio.muted||this.audio.volume===0}getVolume(){return this.audio.volume}getLoop(){return this.loopMode}isShuffle(){return this.shuffleMode}loadTrack(e,i=!1){let t;typeof e=="number"?t=u(e,0,Math.max(0,this.playlist.length-1)):(t=this.playlist.findIndex(s=>s.src===e.src),t===-1&&(this.playlist.push(e),t=this.playlist.length-1)),this.currentIndex=t;const a=this.playlist[this.currentIndex];a&&(this.audio.src=a.src,this.callbacks.onTrackChange&&this.callbacks.onTrackChange(a,this.currentIndex),i&&this.play())}async play(){try{await this.audio.play()}catch(e){console.warn("[HoregAudio] Autoplay / Audio play was prevented by browser policy:",e)}}pause(){this.audio.pause()}toggle(){this.audio.paused?this.play():this.pause()}seek(e){const i=this.getDuration(),t=u(e,0,i>0?i:1/0);this.audio.currentTime=t}setVolume(e){const i=u(e,0,1);this.volumeLevel=i,this.audio.volume=i,i>0&&(this.audio.muted=!1,this.previousVolume=i)}toggleMute(){return this.isMuted()?(this.audio.muted=!1,this.setVolume(this.previousVolume>0?this.previousVolume:.5),!1):(this.previousVolume=this.audio.volume,this.audio.muted=!0,!0)}next(e=!1){if(this.playlist.length===0)return;if(this.shuffleMode&&this.playlist.length>1){let t;do t=Math.floor(Math.random()*this.playlist.length);while(t===this.currentIndex);this.loadTrack(t,!0);return}const i=this.currentIndex+1;i<this.playlist.length?this.loadTrack(i,!0):this.loopMode==="all"?this.loadTrack(0,!0):e?this.pause():this.loadTrack(0,!0)}prev(){if(this.playlist.length===0)return;if(this.audio.currentTime>2){this.seek(0);return}if(this.shuffleMode&&this.playlist.length>1){let i;do i=Math.floor(Math.random()*this.playlist.length);while(i===this.currentIndex);this.loadTrack(i,!0);return}const e=this.currentIndex-1;e>=0?this.loadTrack(e,!0):this.loopMode==="all"?this.loadTrack(this.playlist.length-1,!0):this.seek(0)}setLoop(e){this.loopMode=e}setShuffle(e){this.shuffleMode=e}setCallbacks(e){this.callbacks={...this.callbacks,...e}}destroy(){this.detachEvents(),this.audio.pause(),this.audio.src="",this.audio.load()}}const d={play:'<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M8 5v14l11-7z"/></svg>',pause:'<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>',prev:'<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>',next:'<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>',volumeHigh:'<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><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>',volumeMute:'<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><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.27l4.73 4.73H3v6h4l5 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>',shuffle:'<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg>',repeat:'<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/></svg>',repeatOne:'<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z"/></svg>',playlist:'<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M3 10h11v2H3zm0-4h11v2H3zm0 8h7v2H3zm13-1v8l6-4-6-4z"/></svg>',speaker:'<svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M17 2H7c-1.1 0-2 .9-2 2v16c0 1.1.9 1.99 2 1.99L17 22c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-5 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0 16c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>',plus:'<svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>',trash:'<svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>',upload:'<svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>',link:'<svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>'};function o(l,e){const i=document.createElement(l);if(e!=null&&e.className&&(i.className=e.className),e!=null&&e.attributes)for(const[t,a]of Object.entries(e.attributes))i.setAttribute(t,a);return e!=null&&e.innerHTML?i.innerHTML=e.innerHTML:e!=null&&e.textContent&&(i.textContent=e.textContent),i}class z{constructor(e){r(this,"root");r(this,"eqContainer");r(this,"playBtn");r(this,"prevBtn");r(this,"nextBtn");r(this,"shuffleBtn");r(this,"loopBtn");r(this,"muteBtn");r(this,"drawerBtn");r(this,"titleEl");r(this,"artistEl");r(this,"albumEl");r(this,"coverImgEl",null);r(this,"coverContainer");r(this,"currentTimeEl");r(this,"durationEl");r(this,"sliderTrack");r(this,"fillBar");r(this,"bufferBar");r(this,"volumeSlider");r(this,"drawerEl");r(this,"drawerCountEl");r(this,"addTrackBtn");r(this,"addPanelEl");r(this,"fileInputEl");r(this,"tabBtnFile");r(this,"tabBtnUrl");r(this,"tabPaneFile");r(this,"tabPaneUrl");r(this,"urlInput");r(this,"titleInput");r(this,"artistInput");r(this,"submitUrlBtn");r(this,"cancelAddBtn");r(this,"dropzoneEl");r(this,"drawerInner");r(this,"isScrubbing",!1);r(this,"currentDuration",0);r(this,"events");r(this,"startScrubbing",e=>{e.preventDefault(),this.isScrubbing=!0,this.handleScrubbingMove(e);const i=a=>{this.isScrubbing&&this.handleScrubbingMove(a)},t=a=>{this.isScrubbing&&(this.isScrubbing=!1,this.finishScrubbing(a),window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",t),window.removeEventListener("touchmove",i),window.removeEventListener("touchend",t))};window.addEventListener("mousemove",i),window.addEventListener("mouseup",t),window.addEventListener("touchmove",i,{passive:!1}),window.addEventListener("touchend",t)});this.events=e,this.root=o("div",{className:"horeg-player-box"});const i=o("div",{className:"horeg-speaker-grill"});this.root.appendChild(i),["top-left","top-right","bottom-left","bottom-right"].forEach(P=>{this.root.appendChild(o("div",{className:`horeg-bolt ${P}`}))});const t=o("div",{className:"horeg-content-wrap"});this.root.appendChild(t);const a=o("div",{className:"horeg-header"}),s=o("div",{className:"horeg-rig-badge",innerHTML:'<span class="horeg-badge-led"></span> HOREG RIG • HIGH VOLTAGE'});a.appendChild(s),t.appendChild(a);const n=o("div",{className:"horeg-track-row"});this.coverContainer=o("div",{className:"horeg-cover-container"}),this.coverContainer.innerHTML=`<span class="horeg-cover-fallback">${d.speaker}</span>`,n.appendChild(this.coverContainer);const c=o("div",{className:"horeg-track-info"});this.titleEl=o("div",{className:"horeg-track-title",textContent:"No Track Loaded"}),this.artistEl=o("div",{className:"horeg-track-artist",textContent:"Unknown Artist"}),this.albumEl=o("div",{className:"horeg-track-album",textContent:""}),c.appendChild(this.titleEl),c.appendChild(this.artistEl),c.appendChild(this.albumEl),n.appendChild(c),this.eqContainer=o("div",{className:"horeg-eq-wrapper"}),n.appendChild(this.eqContainer),t.appendChild(n);const h=o("div",{className:"horeg-progress-container"}),g=o("div",{className:"horeg-time-row"});this.currentTimeEl=o("span",{textContent:"00:00"}),this.durationEl=o("span",{textContent:"00:00"}),g.appendChild(this.currentTimeEl),g.appendChild(this.durationEl),h.appendChild(g),this.sliderTrack=o("div",{className:"horeg-slider-track",attributes:{role:"slider","aria-label":"Seek progress","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":"0",tabindex:"0"}}),this.bufferBar=o("div",{className:"horeg-buffer-bar"}),this.fillBar=o("div",{className:"horeg-fill-bar"}),this.sliderTrack.appendChild(this.bufferBar),this.sliderTrack.appendChild(this.fillBar),h.appendChild(this.sliderTrack),t.appendChild(h);const p=o("div",{className:"horeg-controls-row"}),f=o("div",{className:"horeg-side-controls"});this.shuffleBtn=o("button",{className:"horeg-btn",attributes:{"aria-label":"Toggle shuffle",type:"button"},innerHTML:d.shuffle}),this.loopBtn=o("button",{className:"horeg-btn active",attributes:{"aria-label":"Toggle loop mode",type:"button"},innerHTML:d.repeat}),f.appendChild(this.shuffleBtn),f.appendChild(this.loopBtn),p.appendChild(f);const v=o("div",{className:"horeg-center-controls"});this.prevBtn=o("button",{className:"horeg-btn",attributes:{"aria-label":"Previous track",type:"button"},innerHTML:d.prev}),this.playBtn=o("button",{className:"horeg-btn horeg-btn-play",attributes:{"aria-label":"Play track",type:"button"},innerHTML:d.play}),this.nextBtn=o("button",{className:"horeg-btn",attributes:{"aria-label":"Next track",type:"button"},innerHTML:d.next}),v.appendChild(this.prevBtn),v.appendChild(this.playBtn),v.appendChild(this.nextBtn),p.appendChild(v);const m=o("div",{className:"horeg-side-controls"}),x=o("div",{className:"horeg-volume-wrap"});this.muteBtn=o("button",{className:"horeg-btn",attributes:{"aria-label":"Toggle mute",type:"button"},innerHTML:d.volumeHigh}),this.volumeSlider=o("input",{className:"horeg-volume-slider",attributes:{type:"range",min:"0",max:"1",step:"0.01",value:"0.8","aria-label":"Volume control"}}),x.appendChild(this.muteBtn),x.appendChild(this.volumeSlider),m.appendChild(x),this.drawerBtn=o("button",{className:"horeg-btn",attributes:{"aria-label":"Toggle playlist drawer",type:"button"},innerHTML:d.playlist}),m.appendChild(this.drawerBtn),p.appendChild(m),t.appendChild(p),this.drawerEl=o("div",{className:"horeg-drawer"});const w=o("div",{className:"horeg-drawer-header"}),y=o("div",{className:"horeg-drawer-heading"});y.innerHTML="<span>PLAYLIST</span>",this.drawerCountEl=o("span",{className:"horeg-drawer-count",textContent:"0"}),y.appendChild(this.drawerCountEl),w.appendChild(y),this.addTrackBtn=o("button",{className:"horeg-btn-add-track",attributes:{type:"button","aria-label":"Add track to playlist"},innerHTML:`${d.plus} <span>Add Track</span>`}),w.appendChild(this.addTrackBtn),this.drawerEl.appendChild(w),this.addPanelEl=o("div",{className:"horeg-add-panel"});const k=o("div",{className:"horeg-add-tabs"});this.tabBtnFile=o("button",{className:"horeg-tab-btn active",attributes:{type:"button"},innerHTML:`${d.upload} <span>File Lokal</span>`}),this.tabBtnUrl=o("button",{className:"horeg-tab-btn",attributes:{type:"button"},innerHTML:`${d.link} <span>Audio URL</span>`}),k.appendChild(this.tabBtnFile),k.appendChild(this.tabBtnUrl),this.addPanelEl.appendChild(k),this.tabPaneFile=o("div",{className:"horeg-tab-pane active"}),this.fileInputEl=o("input",{attributes:{type:"file",accept:"audio/*",multiple:"true",style:"display: none;"}}),this.dropzoneEl=o("div",{className:"horeg-dropzone"}),this.dropzoneEl.innerHTML=`
+      <div class="horeg-dropzone-icon">${d.upload}</div>
+      <div class="horeg-dropzone-text">Pilih File Audio Komputer</div>
+      <div class="horeg-dropzone-hint">Klik di sini atau drag & drop file (.mp3, .wav, .flac, .ogg, .m4a)</div>
+    `,this.tabPaneFile.appendChild(this.fileInputEl),this.tabPaneFile.appendChild(this.dropzoneEl),this.addPanelEl.appendChild(this.tabPaneFile),this.tabPaneUrl=o("div",{className:"horeg-tab-pane"}),this.urlInput=o("input",{className:"horeg-input-field",attributes:{type:"url",placeholder:"Audio URL (https://...mp3/wav)",required:"true"}}),this.titleInput=o("input",{className:"horeg-input-field",attributes:{type:"text",placeholder:"Judul Lagu (Opsional)"}}),this.artistInput=o("input",{className:"horeg-input-field",attributes:{type:"text",placeholder:"Nama Artis (Opsional)"}});const E=o("div",{className:"horeg-form-actions"});this.cancelAddBtn=o("button",{className:"horeg-btn-cancel",attributes:{type:"button"},textContent:"Batal"}),this.submitUrlBtn=o("button",{className:"horeg-btn-submit",attributes:{type:"button"},innerHTML:`${d.plus} Tambah`}),E.appendChild(this.cancelAddBtn),E.appendChild(this.submitUrlBtn),this.tabPaneUrl.appendChild(this.urlInput),this.tabPaneUrl.appendChild(this.titleInput),this.tabPaneUrl.appendChild(this.artistInput),this.tabPaneUrl.appendChild(E),this.addPanelEl.appendChild(this.tabPaneUrl),this.drawerEl.appendChild(this.addPanelEl),this.drawerInner=o("div",{className:"horeg-drawer-inner"}),this.drawerEl.appendChild(this.drawerInner),this.root.appendChild(this.drawerEl),this.bindDOMEvents()}bindDOMEvents(){this.playBtn.addEventListener("click",()=>this.events.onPlayPauseClick()),this.prevBtn.addEventListener("click",()=>this.events.onPrevClick()),this.nextBtn.addEventListener("click",()=>this.events.onNextClick()),this.shuffleBtn.addEventListener("click",()=>this.events.onShuffleToggle()),this.loopBtn.addEventListener("click",()=>this.events.onLoopToggle()),this.muteBtn.addEventListener("click",()=>this.events.onMuteToggle()),this.volumeSlider.addEventListener("input",()=>{this.events.onVolumeChange(parseFloat(this.volumeSlider.value))}),this.drawerBtn.addEventListener("click",()=>{this.toggleDrawer()}),this.addTrackBtn.addEventListener("click",()=>{const t=this.addPanelEl.classList.toggle("open");this.addTrackBtn.classList.toggle("active",t),t&&this.toggleDrawer(!0)}),this.tabBtnFile.addEventListener("click",()=>{this.tabBtnFile.classList.add("active"),this.tabBtnUrl.classList.remove("active"),this.tabPaneFile.classList.add("active"),this.tabPaneUrl.classList.remove("active")}),this.tabBtnUrl.addEventListener("click",()=>{this.tabBtnUrl.classList.add("active"),this.tabBtnFile.classList.remove("active"),this.tabPaneUrl.classList.add("active"),this.tabPaneFile.classList.remove("active"),this.urlInput.focus()}),this.dropzoneEl.addEventListener("click",()=>{this.fileInputEl.click()}),this.fileInputEl.addEventListener("change",()=>{if(this.fileInputEl.files&&this.fileInputEl.files.length>0){const t=Array.from(this.fileInputEl.files);this.events.onAddTrackFiles&&this.events.onAddTrackFiles(t),this.fileInputEl.value="",this.closeAddPanel()}}),this.dropzoneEl.addEventListener("dragover",t=>{t.preventDefault(),this.dropzoneEl.classList.add("drag-active")}),this.dropzoneEl.addEventListener("dragleave",()=>{this.dropzoneEl.classList.remove("drag-active")}),this.dropzoneEl.addEventListener("drop",t=>{var a;if(t.preventDefault(),this.dropzoneEl.classList.remove("drag-active"),(a=t.dataTransfer)!=null&&a.files&&t.dataTransfer.files.length>0){const s=Array.from(t.dataTransfer.files).filter(n=>n.type.startsWith("audio/")||/\.(mp3|wav|ogg|flac|m4a|aac)$/i.test(n.name));s.length>0&&this.events.onAddTrackFiles&&(this.events.onAddTrackFiles(s),this.closeAddPanel())}}),this.root.addEventListener("dragover",t=>{t.preventDefault(),this.root.classList.add("drag-over")}),this.root.addEventListener("dragleave",t=>{this.root.contains(t.relatedTarget)||this.root.classList.remove("drag-over")}),this.root.addEventListener("drop",t=>{var a;if(t.preventDefault(),this.root.classList.remove("drag-over"),(a=t.dataTransfer)!=null&&a.files&&t.dataTransfer.files.length>0){const s=Array.from(t.dataTransfer.files).filter(n=>n.type.startsWith("audio/")||/\.(mp3|wav|ogg|flac|m4a|aac)$/i.test(n.name));s.length>0&&this.events.onAddTrackFiles&&(this.events.onAddTrackFiles(s),this.closeAddPanel())}});const e=()=>{const t=this.urlInput.value.trim();if(!t){this.urlInput.focus();return}const a=this.titleInput.value.trim(),s=this.artistInput.value.trim();this.events.onAddTrackUrl&&this.events.onAddTrackUrl(t,a||void 0,s||void 0),this.urlInput.value="",this.titleInput.value="",this.artistInput.value="",this.closeAddPanel()};this.submitUrlBtn.addEventListener("click",e);const i=t=>{t.stopPropagation(),t.key==="Enter"&&(t.preventDefault(),e())};this.urlInput.addEventListener("keydown",i),this.titleInput.addEventListener("keydown",i),this.artistInput.addEventListener("keydown",i),this.cancelAddBtn.addEventListener("click",()=>{this.closeAddPanel()}),this.sliderTrack.addEventListener("mousedown",this.startScrubbing),this.sliderTrack.addEventListener("touchstart",this.startScrubbing,{passive:!1}),this.sliderTrack.addEventListener("keydown",t=>{if(this.currentDuration){if(t.key==="ArrowRight"||t.key==="ArrowUp"){t.preventDefault();const a=parseFloat(this.fillBar.style.width)/100*this.currentDuration;this.events.onSeek(Math.min(a+5,this.currentDuration))}else if(t.key==="ArrowLeft"||t.key==="ArrowDown"){t.preventDefault();const a=parseFloat(this.fillBar.style.width)/100*this.currentDuration;this.events.onSeek(Math.max(a-5,0))}}})}calculateProgressPercent(e){const i=this.sliderTrack.getBoundingClientRect(),t="touches"in e?(e.touches[0]||e.changedTouches[0]).clientX:e.clientX,a=u(t-i.left,0,i.width);return i.width>0?a/i.width*100:0}handleScrubbingMove(e){const i=this.calculateProgressPercent(e);if(this.fillBar.style.width=`${i}%`,this.currentDuration>0){const t=i/100*this.currentDuration;this.currentTimeEl.textContent=b(t)}}finishScrubbing(e){const i=this.calculateProgressPercent(e);if(this.currentDuration>0){const t=i/100*this.currentDuration;this.events.onSeek(t)}}updateTrackInfo(e){this.titleEl.textContent=e.title||"Untitled Track",this.artistEl.textContent=e.artist||"Unknown Artist",this.albumEl.textContent=e.album||"",e.coverArt?(this.coverContainer.innerHTML="",this.coverImgEl=o("img",{className:"horeg-cover-img",attributes:{src:e.coverArt,alt:`${e.title} cover`}}),this.coverImgEl.onerror=()=>{this.coverContainer.innerHTML=`<span class="horeg-cover-fallback">${d.speaker}</span>`},this.coverContainer.appendChild(this.coverImgEl)):this.coverContainer.innerHTML=`<span class="horeg-cover-fallback">${d.speaker}</span>`}updatePlayState(e){e?(this.playBtn.classList.add("playing"),this.playBtn.innerHTML=d.pause,this.playBtn.setAttribute("aria-label","Pause track")):(this.playBtn.classList.remove("playing"),this.playBtn.innerHTML=d.play,this.playBtn.setAttribute("aria-label","Play track"))}updateProgress(e,i){if(this.currentDuration=i,this.durationEl.textContent=b(i),!this.isScrubbing){this.currentTimeEl.textContent=b(e);const t=i>0?e/i*100:0;this.fillBar.style.width=`${u(t,0,100)}%`,this.sliderTrack.setAttribute("aria-valuenow",Math.round(t).toString())}}updateBuffer(e){this.bufferBar.style.width=`${u(e,0,100)}%`}updateVolume(e,i){this.volumeSlider.value=e.toString(),i||e===0?(this.muteBtn.innerHTML=d.volumeMute,this.muteBtn.setAttribute("aria-label","Unmute")):(this.muteBtn.innerHTML=d.volumeHigh,this.muteBtn.setAttribute("aria-label","Mute"))}updateLoopState(e){e==="none"?(this.loopBtn.classList.remove("active"),this.loopBtn.innerHTML=d.repeat):e==="all"?(this.loopBtn.classList.add("active"),this.loopBtn.innerHTML=d.repeat):e==="one"&&(this.loopBtn.classList.add("active"),this.loopBtn.innerHTML=d.repeatOne),this.loopBtn.setAttribute("aria-label",`Repeat mode: ${e}`)}updateShuffleState(e){e?this.shuffleBtn.classList.add("active"):this.shuffleBtn.classList.remove("active")}toggleDrawer(e){(e!==void 0?e:!this.drawerEl.classList.contains("open"))?(this.drawerEl.classList.add("open"),this.drawerBtn.classList.add("active")):(this.drawerEl.classList.remove("open"),this.drawerBtn.classList.remove("active"),this.closeAddPanel())}closeAddPanel(){this.addPanelEl.classList.remove("open"),this.addTrackBtn.classList.remove("active")}renderPlaylist(e,i){if(this.drawerCountEl.textContent=e.length.toString(),this.drawerInner.innerHTML="",e.length===0){const t=o("div",{className:"horeg-empty-playlist",textContent:'Playlist masih kosong. Klik "Add Track" untuk menambahkan lagu.'});this.drawerInner.appendChild(t);return}e.forEach((t,a)=>{const s=o("div",{className:`horeg-track-item ${a===i?"active":""}`}),n=o("div",{className:"horeg-track-num",textContent:(a+1).toString().padStart(2,"0")});s.appendChild(n);const c=o("div",{className:"horeg-track-details"}),h=o("div",{className:"horeg-item-title",textContent:t.title}),g=o("div",{className:"horeg-item-artist",textContent:t.artist||"Unknown Artist"});if(c.appendChild(h),c.appendChild(g),s.appendChild(c),t.duration){const v=o("div",{className:"horeg-item-duration",textContent:b(t.duration)});s.appendChild(v)}const p=o("div",{className:"horeg-track-actions"}),f=o("button",{className:"horeg-btn-remove",attributes:{type:"button","aria-label":"Hapus lagu dari playlist"},innerHTML:d.trash});f.addEventListener("click",v=>{v.stopPropagation(),this.events.onRemoveTrack&&this.events.onRemoveTrack(a)}),p.appendChild(f),s.appendChild(p),s.addEventListener("click",()=>{this.events.onTrackSelect(a)}),this.drawerInner.appendChild(s)})}destroy(){this.root.remove()}}class A{constructor(e){r(this,"container");r(this,"bars",[]);r(this,"isRunning",!1);r(this,"animFrameId",null);r(this,"isEnabled",!0);r(this,"baseHeights",[]);r(this,"loop",()=>{if(!this.isRunning)return;const e=Date.now()/150;for(let i=0;i<this.bars.length;i++){const t=Math.sin(e*1.8+i*1.2),a=Math.cos(e*2.5+i*.8),s=Math.abs(t*.6+a*.4),n=Math.floor(4+s*18);this.bars[i].style.height=`${n}px`}this.animFrameId=requestAnimationFrame(this.loop)});this.container=e.container,this.isEnabled=e.enableAnimation!==!1;const i=e.barCount||5;this.initBars(i)}initBars(e){this.container.innerHTML="",this.bars=[],this.baseHeights=[];for(let i=0;i<e;i++){const t=document.createElement("span");t.className="horeg-eq-bar",this.container.appendChild(t),this.bars.push(t),this.baseHeights.push(3+i%2*2),t.style.height=`${this.baseHeights[i]}px`}}setEnabled(e){this.isEnabled=e,e||this.stop()}start(){this.isRunning||!this.isEnabled||(this.isRunning=!0,this.loop())}stop(){this.isRunning=!1,this.animFrameId!==null&&(cancelAnimationFrame(this.animFrameId),this.animFrameId=null);for(let e=0;e<this.bars.length;e++)this.bars[e].style.height=`${this.baseHeights[e]||3}px`}destroy(){this.stop(),this.bars=[],this.container.innerHTML=""}}class L{constructor(e){r(this,"container");r(this,"shadow");r(this,"styleEl");r(this,"audioEngine");r(this,"ui");r(this,"visualizer");r(this,"theme");r(this,"boundKeyHandler");if(typeof e.container=="string"){const t=document.querySelector(e.container);if(!t)throw new Error(`[HoregAudio] Container "${e.container}" not found in DOM.`);this.container=t}else if(e.container instanceof HTMLElement)this.container=e.container;else throw new Error("[HoregAudio] Invalid container option provided.");this.theme=e.theme||{variant:"horeg-classic"},this.shadow=this.container.attachShadow({mode:"open"}),this.styleEl=document.createElement("style"),this.styleEl.textContent=T(this.theme),this.shadow.appendChild(this.styleEl),this.ui=new z({onPlayPauseClick:()=>this.toggle(),onPrevClick:()=>this.prev(),onNextClick:()=>this.next(),onSeek:t=>this.seek(t),onVolumeChange:t=>this.setVolume(t),onMuteToggle:()=>{const t=this.audioEngine.toggleMute();this.ui.updateVolume(this.audioEngine.getVolume(),t)},onShuffleToggle:()=>{const t=!this.audioEngine.isShuffle();this.audioEngine.setShuffle(t),this.ui.updateShuffleState(t)},onLoopToggle:()=>{const t=this.audioEngine.getLoop(),a=t==="all"?"one":t==="one"?"none":"all";this.audioEngine.setLoop(a),this.ui.updateLoopState(a)},onTrackSelect:t=>{this.loadTrack(t,!0)},onAddTrackFiles:t=>{this.addTrackFromFiles(t,!1)},onAddTrackUrl:(t,a,s)=>{this.addTrackFromUrl(t,{title:a,artist:s},!1)},onRemoveTrack:t=>{this.removeTrack(t)}}),this.shadow.appendChild(this.ui.root),this.visualizer=new A({container:this.ui.eqContainer,enableAnimation:this.theme.enableEqAnimation!==!1}),this.audioEngine=new I(e,{onPlay:t=>{this.ui.updatePlayState(!0),this.visualizer.start(),e.onPlay&&e.onPlay(t)},onPause:()=>{this.ui.updatePlayState(!1),this.visualizer.stop(),e.onPause&&e.onPause()},onTrackChange:(t,a)=>{this.ui.updateTrackInfo(t);const s=this.audioEngine?this.audioEngine.getPlaylist():e.playlist||[];this.ui.renderPlaylist(s,a),this.ui.updateProgress(0,t.duration||0),e.onTrackChange&&e.onTrackChange(t,a)},onPlaylistChange:(t,a)=>{this.ui.renderPlaylist(t,a),e.onPlaylistChange&&e.onPlaylistChange(t,a)},onTimeUpdate:(t,a)=>{this.ui.updateProgress(t,a),e.onTimeUpdate&&e.onTimeUpdate(t,a)},onBufferUpdate:t=>{this.ui.updateBuffer(t)},onEnded:t=>{this.visualizer.stop(),e.onEnded&&e.onEnded(t)},onError:t=>{this.ui.updatePlayState(!1),this.visualizer.stop(),e.onError&&e.onError(t)}}),this.ui.updateVolume(this.audioEngine.getVolume(),this.audioEngine.isMuted()),this.ui.updateLoopState(this.audioEngine.getLoop()),this.ui.updateShuffleState(this.audioEngine.isShuffle()),this.ui.renderPlaylist(this.audioEngine.getPlaylist(),this.audioEngine.getCurrentIndex());const i=this.audioEngine.getCurrentTrack();i&&(this.ui.updateTrackInfo(i),this.ui.renderPlaylist(this.audioEngine.getPlaylist(),this.audioEngine.getCurrentIndex())),this.boundKeyHandler=this.handleKeyDown.bind(this),this.container.tabIndex=this.container.tabIndex>=0?this.container.tabIndex:0,this.container.addEventListener("keydown",this.boundKeyHandler)}handleKeyDown(e){var n;const i=e.composedPath?e.composedPath():[],t=i.length>0?i[0]:e.target,a=((n=this.shadow)==null?void 0:n.activeElement)||document.activeElement,s=c=>{if(!c)return!1;const h=c.tagName;return h==="INPUT"||h==="TEXTAREA"||h==="SELECT"||c.isContentEditable};if(!(s(t)||s(a)))if(e.code==="Space"){if((t==null?void 0:t.tagName)==="BUTTON"||(a==null?void 0:a.tagName)==="BUTTON")return;e.preventDefault(),this.toggle()}else e.key==="ArrowRight"&&!e.shiftKey?(e.preventDefault(),this.seek(this.audioEngine.getCurrentTime()+5)):e.key==="ArrowLeft"&&!e.shiftKey?(e.preventDefault(),this.seek(this.audioEngine.getCurrentTime()-5)):e.key==="ArrowUp"?(e.preventDefault(),this.setVolume(this.audioEngine.getVolume()+.05)):e.key==="ArrowDown"&&(e.preventDefault(),this.setVolume(this.audioEngine.getVolume()-.05))}async play(){await this.audioEngine.play()}pause(){this.audioEngine.pause()}toggle(){this.audioEngine.toggle()}next(){this.audioEngine.next()}prev(){this.audioEngine.prev()}seek(e){this.audioEngine.seek(e)}setVolume(e){this.audioEngine.setVolume(e),this.ui.updateVolume(this.audioEngine.getVolume(),this.audioEngine.isMuted())}loadTrack(e,i=!1){this.audioEngine.loadTrack(e,i)}addTrack(e,i=!1){const t=this.audioEngine.addTrack(e,i);return this.ui.renderPlaylist(this.audioEngine.getPlaylist(),this.audioEngine.getCurrentIndex()),t}addTracks(e,i=!1){this.audioEngine.addTracks(e,i),this.ui.renderPlaylist(this.audioEngine.getPlaylist(),this.audioEngine.getCurrentIndex())}async addTrackFromFile(e,i=!1){const t=URL.createObjectURL(e),a=e.name.replace(/\.[^/.]+$/,""),s={id:`local-${Date.now()}-${Math.random().toString(36).substring(2,7)}`,title:a,artist:"File Audio Lokal",src:t};try{const n=await this.probeAudioDuration(t);n>0&&(s.duration=n)}catch{}return this.addTrack(s,i),s}async addTrackFromFiles(e,i=!1){const t=Array.from(e),a=[];for(let s=0;s<t.length;s++){const n=t[s],c=i&&s===0,h=await this.addTrackFromFile(n,c);a.push(h)}return a}async addTrackFromUrl(e,i={},t=!1){var n,c;let a="Online Track";try{const g=new URL(e).pathname,p=g.substring(g.lastIndexOf("/")+1);p&&(a=decodeURIComponent(p).replace(/\.[^/.]+$/,""))}catch{}const s={id:i.id||`url-${Date.now()}-${Math.random().toString(36).substring(2,7)}`,title:((n=i.title)==null?void 0:n.trim())||a,artist:((c=i.artist)==null?void 0:c.trim())||"Audio Stream",album:i.album,coverArt:i.coverArt,src:e,duration:i.duration};if(!s.duration)try{const h=await this.probeAudioDuration(e);h>0&&(s.duration=h)}catch{}return this.addTrack(s,t),s}removeTrack(e){this.audioEngine.removeTrack(e),this.ui.renderPlaylist(this.audioEngine.getPlaylist(),this.audioEngine.getCurrentIndex());const i=this.audioEngine.getCurrentTrack();i?this.ui.updateTrackInfo(i):this.ui.updateTrackInfo({title:"No Track Loaded",src:""})}getPlaylist(){return this.audioEngine.getPlaylist()}probeAudioDuration(e){return new Promise(i=>{const t=new Audio;let a=!1;const s=h=>{a||(a=!0,t.removeEventListener("loadedmetadata",n),t.removeEventListener("error",c),t.src="",i(h))},n=()=>{const h=t.duration;s(h&&!isNaN(h)&&isFinite(h)?h:0)},c=()=>s(0);t.addEventListener("loadedmetadata",n),t.addEventListener("error",c),t.src=e,setTimeout(()=>s(0),3e3)})}setTheme(e){this.theme={...this.theme,...e},this.styleEl.textContent=T(this.theme),this.theme.enableEqAnimation!==void 0&&this.visualizer.setEnabled(this.theme.enableEqAnimation)}getAudioEngine(){return this.audioEngine}destroy(){this.container.removeEventListener("keydown",this.boundKeyHandler),this.audioEngine.destroy(),this.visualizer.destroy(),this.ui.destroy(),this.shadow.innerHTML=""}}exports.HoregAudio=L;exports.default=L;
+//# sourceMappingURL=horeg-audio.cjs.map