chart-preview 1.0.0

package/dist/index.js

@@ -0,0 +1,2158 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ChartPreview: () => ChartPreview,
+  ChartPreviewPlayer: () => ChartPreviewPlayer,
+  extractSngFile: () => extractSngFile,
+  fetchSngFile: () => fetchSngFile,
+  findAudioFiles: () => findAudioFiles,
+  findChartFile: () => findChartFile,
+  getInstrumentType: () => import_scan_chart3.getInstrumentType,
+  instrumentTypes: () => import_scan_chart3.instrumentTypes,
+  isVideoFile: () => isVideoFile,
+  prepareChartData: () => prepareChartData
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/ChartPreview.ts
+var import_eventemitter3 = require("eventemitter3");
+var import_scan_chart = require("scan-chart");
+var THREE = __toESM(require("three"));
+
+// src/SharedAudioContext.ts
+var AudioContextClass = typeof window !== "undefined" ? window.AudioContext || window.webkitAudioContext : null;
+var sharedContext = null;
+var activeInstanceCount = 0;
+function getSharedAudioContext() {
+  if (!AudioContextClass) {
+    return null;
+  }
+  if (!sharedContext || sharedContext.state === "closed") {
+    sharedContext = new AudioContextClass();
+  }
+  return sharedContext;
+}
+function registerInstance() {
+  activeInstanceCount++;
+}
+function unregisterInstance() {
+  activeInstanceCount = Math.max(0, activeInstanceCount - 1);
+}
+function isAudioContextSupported() {
+  return AudioContextClass !== null;
+}
+
+// src/ChartPreview.ts
+var HIGHWAY_DURATION_MS = 1500;
+var SCALE = 0.105;
+var NOTE_SPAN_WIDTH = 0.95;
+var BARRE1_TYPE = 99991;
+var BARRE2_TYPE = 99992;
+var BARRE3_TYPE = 99993;
+var barreTypes = [
+  BARRE1_TYPE,
+  BARRE2_TYPE,
+  BARRE3_TYPE
+];
+var SP_FLAG = 2147483648;
+var DEFAULT_PROGRESS_INTERVAL_MS = 50;
+var _ChartPreview = class {
+  constructor() {
+    this.eventEmitter = new import_eventemitter3.EventEmitter();
+    this.paused = true;
+    this.scene = new THREE.Scene();
+    this.lastProgressEmitTime = 0;
+  }
+  /**
+   * Adds an event listener.
+   *
+   * Available events:
+   * - `progress`: called during playback with the current progress (0-1), throttled by progressIntervalMs.
+   * - `end`: called when the chart preview ends.
+   */
+  on(event, listener) {
+    this.eventEmitter.on(event, listener);
+  }
+  /**
+   * Removes an event listener.
+   */
+  off(event, listener) {
+    this.eventEmitter.off(event, listener);
+  }
+  /**
+   * Creates a new ChartPreview instance.
+   *
+   * @param config - Configuration object for the chart preview
+   *
+   * Will throw an exception if textures fail to load or if audio decoding fails.
+   *
+   * @example
+   * ```ts
+   * import { ChartPreview, ParsedChart } from 'chart-preview'
+   * import { parseChartFile, getInstrumentType } from 'scan-chart'
+   *
+   * // Parse your chart file first
+   * const parsedChart = parseChartFile(chartData, format, modifiers)
+   *
+   * // Load textures for the instrument type
+   * const textures = await ChartPreview.loadTextures(getInstrumentType('guitar'))
+   *
+   * // Create the preview
+   * const preview = await ChartPreview.create({
+   *   parsedChart,
+   *   textures,
+   *   audioFiles: [audioData],
+   *   instrument: 'guitar',
+   *   difficulty: 'expert',
+   *   startDelayMs: 0,
+   *   audioLengthMs: 180000,
+   *   container: document.getElementById('preview-container')
+   * })
+   *
+   * // Control playback
+   * await preview.togglePaused()
+   * ```
+   */
+  static async create(config) {
+    const chartPreview = new _ChartPreview();
+    chartPreview.instrumentType = (0, import_scan_chart.getInstrumentType)(config.instrument);
+    chartPreview.highwayTexture = config.textures.highwayTexture;
+    chartPreview.progressIntervalMs = config.progressIntervalMs ?? DEFAULT_PROGRESS_INTERVAL_MS;
+    chartPreview.camera = new ChartCamera(config.container);
+    chartPreview.renderer = new ChartRenderer(config.container);
+    chartPreview.audioManager = await (isAudioContextSupported() ? AudioManager.create(config.audioFiles, config.startDelayMs) : SilentAudioManager.create(config.startDelayMs, config.audioLengthMs));
+    chartPreview.audioManager.on(
+      "end",
+      () => chartPreview.eventEmitter.emit("end")
+    );
+    chartPreview.notesManager = new NotesManager(
+      config.parsedChart,
+      config.instrument,
+      config.difficulty,
+      chartPreview.scene,
+      config.textures.noteTextures
+    );
+    chartPreview.addHighwayToScene(config.textures.highwayTexture);
+    chartPreview.addStrikelineToScene(config.textures.strikelineTexture);
+    config.container.firstChild?.remove();
+    config.container.appendChild(chartPreview.renderer.domElement);
+    return chartPreview;
+  }
+  /**
+   * Toggles between playing and paused states.
+   */
+  async togglePaused() {
+    if (this.paused) {
+      await this.audioManager.play();
+      this.renderer.setAnimationLoop(() => this.animateFrame());
+    } else {
+      await this.audioManager.pause();
+      this.renderer.setAnimationLoop(null);
+    }
+    this.paused = !this.paused;
+  }
+  /**
+   * Returns whether the preview is currently paused.
+   */
+  get isPaused() {
+    return this.paused;
+  }
+  /**
+   * Moves the playback time to `percentComplete` of the way through the preview.
+   * @param percentComplete A number between 0 and 1 (inclusive)
+   */
+  async seek(percentComplete) {
+    await this.audioManager.seek(percentComplete);
+    this.animateFrame(false);
+    this.renderer.setAnimationLoop(null);
+    this.paused = true;
+  }
+  /**
+   * Gets or sets the volume (0 to 1).
+   * Returns `null` if audio isn't loaded (e.g., using SilentAudioManager).
+   */
+  set volume(volume) {
+    this.audioManager.volume = volume;
+  }
+  get volume() {
+    return this.audioManager.volume;
+  }
+  /** Current playback position in milliseconds */
+  get chartCurrentTimeMs() {
+    return this.audioManager.chartCurrentTimeMs;
+  }
+  /** Total duration in milliseconds */
+  get chartEndTimeMs() {
+    return this.audioManager.chartEndTimeMs;
+  }
+  /**
+   * Cleans up all resources. Call this when discarding the preview.
+   * The preview should not be used after calling dispose().
+   */
+  dispose() {
+    this.eventEmitter.removeAllListeners();
+    this.camera.dispose();
+    this.renderer.setAnimationLoop(null);
+    this.renderer.renderLists.dispose();
+    this.renderer.dispose();
+    this.renderer.forceContextLoss();
+    this.audioManager.closeAudio();
+  }
+  addHighwayToScene(highwayTexture) {
+    const mat = new THREE.MeshBasicMaterial({ map: highwayTexture });
+    const geometry = new THREE.PlaneGeometry(
+      this.instrumentType === import_scan_chart.instrumentTypes.drums ? 0.9 : this.instrumentType === import_scan_chart.instrumentTypes.sixFret ? 0.7 : 1,
+      2
+    );
+    const plane = new THREE.Mesh(geometry, mat);
+    plane.position.y = -0.1;
+    plane.renderOrder = 1;
+    this.scene.add(plane);
+  }
+  addStrikelineToScene(strikelineTexture) {
+    const material = new THREE.SpriteMaterial({
+      map: strikelineTexture,
+      sizeAttenuation: true,
+      transparent: true,
+      depthTest: false
+    });
+    const aspectRatio = strikelineTexture.image.width / strikelineTexture.image.height;
+    const scale = this.instrumentType === import_scan_chart.instrumentTypes.sixFret ? 0.141 : 0.19;
+    const sprite = new THREE.Sprite(material);
+    if (aspectRatio > 1) {
+      sprite.scale.set(aspectRatio * scale, 1 * scale, 1);
+    } else {
+      sprite.scale.set(1 * scale, 1 / aspectRatio * scale, 1);
+    }
+    sprite.position.y = -1;
+    sprite.renderOrder = 3;
+    this.scene.add(sprite);
+  }
+  animateFrame(emit = true) {
+    this.notesManager.updateDisplayedNotes(
+      this.audioManager.chartCurrentTimeMs
+    );
+    const scrollPosition = -0.9 * (this.audioManager.chartCurrentTimeMs / 1e3) * (HIGHWAY_DURATION_MS / 1e3);
+    this.highwayTexture.offset.y = -1 * scrollPosition;
+    this.renderer.render(this.scene, this.camera);
+    if (emit) {
+      const now = performance.now();
+      if (now - this.lastProgressEmitTime >= this.progressIntervalMs) {
+        this.lastProgressEmitTime = now;
+        this.eventEmitter.emit(
+          "progress",
+          this.audioManager.chartCurrentTimeMs / this.audioManager.chartEndTimeMs
+        );
+      }
+    }
+  }
+};
+var ChartPreview = _ChartPreview;
+/**
+ * Loads textures required for the chart preview.
+ * Call this once per instrument type and cache the result for reuse.
+ */
+ChartPreview.loadTextures = loadTextures;
+var ChartCamera = class extends THREE.PerspectiveCamera {
+  constructor(divContainer) {
+    super(90, 1 / 1, 0.01, 10);
+    this.divContainer = divContainer;
+    this.resizeListener = () => this.onResize();
+    this.position.z = 0.8;
+    this.position.y = -1.3;
+    this.rotation.x = THREE.MathUtils.degToRad(60);
+    this.onResize();
+    window.addEventListener("resize", this.resizeListener);
+  }
+  onResize() {
+    const width = this.divContainer.offsetWidth ?? window.innerWidth;
+    const height = this.divContainer.offsetHeight ?? window.innerHeight;
+    this.aspect = width / height;
+    this.updateProjectionMatrix();
+  }
+  dispose() {
+    window.removeEventListener("resize", this.resizeListener);
+    this.clear();
+  }
+};
+var ChartRenderer = class extends THREE.WebGLRenderer {
+  constructor(divContainer) {
+    super({
+      antialias: true
+    });
+    this.divContainer = divContainer;
+    this.resizeListener = () => this.onResize();
+    this.localClippingEnabled = true;
+    this.outputColorSpace = THREE.LinearSRGBColorSpace;
+    this.onResize();
+    window.addEventListener("resize", this.resizeListener);
+  }
+  onResize() {
+    const width = this.divContainer.offsetWidth ?? window.innerWidth;
+    const height = this.divContainer.offsetHeight ?? window.innerHeight;
+    this.setSize(width, height);
+  }
+  dispose() {
+    window.removeEventListener("resize", this.resizeListener);
+    super.dispose();
+  }
+};
+var AudioManager = class {
+  constructor(audioFiles, startDelayMs) {
+    this.audioFiles = audioFiles;
+    this.startDelayMs = startDelayMs;
+    this.eventEmitter = new import_eventemitter3.EventEmitter();
+    this.gainNode = null;
+    this.audioSources = [];
+    this._volume = 0.5;
+    this.lastSeekChartTimeMs = 0;
+    this.lastAudioCtxCurrentTime = 0;
+    // Necessary because audioCtx.currentTime doesn't reset to 0 on seek
+    this.audioLengthMs = 0;
+    const ctx = getSharedAudioContext();
+    if (!ctx) {
+      throw new Error("AudioContext is not supported in this environment");
+    }
+    this.audioCtx = ctx;
+    registerInstance();
+  }
+  /**
+   * @param audioFiles The `Uint8Array[]` of the audio files to be played.
+   * @param startDelayMs The amount of time to delay the start of the audio. (can be negative)
+   */
+  static async create(audioFiles, startDelayMs) {
+    const audioManager = new AudioManager(audioFiles, startDelayMs);
+    await audioManager.initAudio();
+    return audioManager;
+  }
+  /**
+   * Available events:
+   * - `end`: called when the audio playback ends.
+   */
+  on(event, listener) {
+    this.eventEmitter.on(event, listener);
+  }
+  /** `volume` is a number between 0 and 1 (inclusive). Values outside this range are clamped. */
+  set volume(volume) {
+    const clamped = Math.max(0, Math.min(1, volume));
+    this._volume = clamped * clamped;
+    if (this.gainNode) {
+      this.gainNode.gain.value = this._volume;
+    }
+  }
+  /** `volume` is a number between 0 and 1 (inclusive) */
+  get volume() {
+    return Math.sqrt(this._volume);
+  }
+  /** Nonnegative number of milliseconds representing time elapsed since the chart preview start. */
+  get chartCurrentTimeMs() {
+    const isPaused = this.audioCtx.state === "suspended";
+    const audioLatency = (this.audioCtx.baseLatency + (this.audioCtx.outputLatency || 0)) * 1e3;
+    const audioTimeSinceLastSeekMs = (this.audioCtx.currentTime - this.lastAudioCtxCurrentTime) * 1e3;
+    return this.lastSeekChartTimeMs + audioTimeSinceLastSeekMs - (isPaused ? 0 : audioLatency);
+  }
+  /** Nonnegative number of milliseconds representing when the audio ends (and when the chart preview ends). */
+  get chartEndTimeMs() {
+    return Math.max(this.startDelayMs + this.audioLengthMs, 0);
+  }
+  async play() {
+    if (this.gainNode === null) {
+      await this.initAudio();
+    }
+    if (this.audioCtx.state === "suspended") {
+      await this.audioCtx.resume();
+    }
+  }
+  async pause() {
+    if (this.audioCtx.state === "running") {
+      await this.audioCtx.suspend();
+    }
+  }
+  closeAudio() {
+    this.eventEmitter.removeAllListeners();
+    for (const source of this.audioSources) {
+      source.onended = null;
+      try {
+        source.stop();
+        source.disconnect();
+      } catch {
+      }
+    }
+    this.audioSources = [];
+    this.gainNode?.disconnect();
+    this.gainNode = null;
+    unregisterInstance();
+  }
+  async initAudio() {
+    for (const source of this.audioSources) {
+      source.onended = null;
+      try {
+        source.stop();
+        source.disconnect();
+      } catch {
+      }
+    }
+    this.audioSources = [];
+    const audioBuffers = await Promise.all(
+      // Must be recreated on each seek because seek is not supported by the Web Audio API
+      this.audioFiles.map(
+        (file) => this.audioCtx.decodeAudioData(file.slice(0).buffer)
+      )
+    );
+    this.audioLengthMs = Math.max(...audioBuffers.map((b) => b.duration)) * 1e3;
+    this.gainNode = this.audioCtx.createGain();
+    this.gainNode.gain.value = this._volume;
+    this.gainNode.connect(this.audioCtx.destination);
+    let endedCount = 0;
+    const audioStartOffsetSeconds = (this.lastSeekChartTimeMs - this.startDelayMs) / 1e3;
+    for (const audioBuffer of audioBuffers) {
+      const source = this.audioCtx.createBufferSource();
+      source.buffer = audioBuffer;
+      source.onended = () => {
+        endedCount++;
+        if (endedCount === audioBuffers.length) {
+          this.eventEmitter.emit("end");
+        }
+      };
+      source.connect(this.gainNode);
+      const delaySeconds = Math.abs(Math.min(audioStartOffsetSeconds, 0));
+      const when = this.audioCtx.currentTime + delaySeconds;
+      const offset = Math.max(audioStartOffsetSeconds, 0);
+      source.start(when, offset);
+      this.audioSources.push(source);
+    }
+    this.lastAudioCtxCurrentTime = this.audioCtx.currentTime;
+    this.pause();
+  }
+  /**
+   * @param percentComplete The progress between the start and end of the preview.
+   */
+  async seek(percentComplete) {
+    if (this.audioCtx.state === "running") {
+      await this.audioCtx.suspend();
+    }
+    for (const source of this.audioSources) {
+      source.onended = null;
+      try {
+        source.stop();
+        source.disconnect();
+      } catch {
+      }
+    }
+    this.audioSources = [];
+    this.gainNode?.disconnect();
+    this.gainNode = null;
+    const chartSeekTimeMs = percentComplete * this.chartEndTimeMs;
+    this.lastSeekChartTimeMs = chartSeekTimeMs;
+    this.lastAudioCtxCurrentTime = this.audioCtx.currentTime;
+  }
+};
+var SilentAudioManager = class {
+  constructor(startDelayMs, audioLengthMs) {
+    this.startDelayMs = startDelayMs;
+    this.audioLengthMs = audioLengthMs;
+    this.eventEmitter = new import_eventemitter3.EventEmitter();
+    this.endEventTimeout = null;
+    this.isPaused = true;
+  }
+  /**
+   * @param startDelayMs The amount of time to delay the start of the audio. (can be negative)
+   * @param audioLengthMs The length of the longest audio file stem.
+   */
+  static async create(startDelayMs, audioLengthMs) {
+    const audioManager = new SilentAudioManager(startDelayMs, audioLengthMs);
+    await audioManager.seek(0);
+    return audioManager;
+  }
+  /**
+   * Available events:
+   * - `end`: called when the playback ends.
+   */
+  on(event, listener) {
+    this.eventEmitter.on(event, listener);
+  }
+  /** `volume` is invalid for silent playback. */
+  set volume(_null) {
+    return;
+  }
+  /** `volume` is invalid for silent playback. */
+  get volume() {
+    return null;
+  }
+  /** Nonnegative number of milliseconds representing time elapsed since the chart preview start. */
+  get chartCurrentTimeMs() {
+    if (this.isPaused) {
+      return this.lastResumeChartTimeMs;
+    } else {
+      return this.lastResumeChartTimeMs + performance.now() - this.lastResumeClockTimeMs;
+    }
+  }
+  /** Nonnegative number of milliseconds representing when the audio ends (and when the chart preview ends). */
+  get chartEndTimeMs() {
+    return Math.max(this.startDelayMs + this.audioLengthMs, 0);
+  }
+  async play() {
+    if (this.lastResumeChartTimeMs >= this.chartEndTimeMs - 2) {
+      this.lastResumeChartTimeMs = 0;
+    }
+    this.lastResumeClockTimeMs = performance.now();
+    this.endEventTimeout = setTimeout(() => {
+      this.pause();
+      this.eventEmitter.emit("end");
+    }, this.chartEndTimeMs - this.lastResumeChartTimeMs);
+    this.isPaused = false;
+  }
+  async pause() {
+    this.lastResumeChartTimeMs = this.chartCurrentTimeMs;
+    if (this.endEventTimeout) {
+      clearTimeout(this.endEventTimeout);
+    }
+    this.isPaused = true;
+  }
+  closeAudio() {
+    this.eventEmitter.removeAllListeners();
+    if (this.endEventTimeout) {
+      clearTimeout(this.endEventTimeout);
+    }
+  }
+  /**
+   * @param percentComplete The progress between the start and end of the preview.
+   */
+  async seek(percentComplete) {
+    this.lastResumeChartTimeMs = this.chartEndTimeMs * percentComplete;
+    if (!this.isPaused) {
+      this.play();
+    }
+  }
+};
+var NotesManager = class {
+  constructor(chartData, instrument, difficulty, scene, noteTextures) {
+    this.chartData = chartData;
+    this.instrument = instrument;
+    this.difficulty = difficulty;
+    this.scene = scene;
+    this.noteMaterials = /* @__PURE__ */ new Map();
+    this.clippingPlanes = [
+      new THREE.Plane(new THREE.Vector3(0, 1, 0), 1),
+      new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.9)
+    ];
+    this.noteGroups = /* @__PURE__ */ new Map();
+    adjustParsedChart(chartData, instrument, difficulty);
+    Object.values(import_scan_chart.noteTypes).forEach(
+      (noteType) => this.noteMaterials.set(noteType, /* @__PURE__ */ new Map())
+    );
+    barreTypes.forEach(
+      (barreType) => this.noteMaterials.set(barreType, /* @__PURE__ */ new Map())
+    );
+    noteTextures.forEach((flagTextures, noteType) => {
+      flagTextures.forEach((texture, noteFlagsValue) => {
+        this.noteMaterials.get(noteType).set(noteFlagsValue, new THREE.SpriteMaterial({ map: texture }));
+      });
+    });
+    const track = chartData.trackData.find(
+      (t) => t.instrument === instrument && t.difficulty === difficulty
+    );
+    if (!track) {
+      throw new Error(
+        `Track not found for instrument "${instrument}" at difficulty "${difficulty}"`
+      );
+    }
+    this.instrumentType = (0, import_scan_chart.getInstrumentType)(instrument);
+    this.noteEvents = track.noteEventGroups.flat();
+    this.notes = new EventSequence(this.noteEvents);
+    this.soloSections = new EventSequence(track.soloSections);
+    this.flexLanes = new EventSequence(track.flexLanes);
+    this.drumFreestyleSections = new EventSequence(track.drumFreestyleSections);
+  }
+  updateDisplayedNotes(chartCurrentTimeMs) {
+    const noteStartIndex = this.notes.getEarliestActiveEventIndex(chartCurrentTimeMs);
+    const renderEndTimeMs = chartCurrentTimeMs + HIGHWAY_DURATION_MS;
+    let maxNoteEventIndex = noteStartIndex - 1;
+    for (const [noteEventIndex, sprite] of this.noteGroups) {
+      if (noteEventIndex < noteStartIndex || this.noteEvents[noteEventIndex].msTime > renderEndTimeMs) {
+        this.scene.remove(sprite);
+        this.noteGroups.delete(noteEventIndex);
+      } else {
+        sprite.position.y = interpolate(
+          this.noteEvents[noteEventIndex].msTime,
+          chartCurrentTimeMs,
+          renderEndTimeMs,
+          -1,
+          1
+        );
+        if (noteEventIndex > maxNoteEventIndex) {
+          maxNoteEventIndex = noteEventIndex;
+        }
+      }
+    }
+    for (let i = maxNoteEventIndex + 1; this.noteEvents[i] && this.noteEvents[i].msTime < renderEndTimeMs; i++) {
+      const note = this.noteEvents[i];
+      const noteGroup = new THREE.Group();
+      const scale = note.type === import_scan_chart.noteTypes.kick ? 0.045 : note.type === import_scan_chart.noteTypes.open && this.instrumentType === import_scan_chart.instrumentTypes.sixFret ? 0.04 : SCALE;
+      const sprite = new THREE.Sprite(
+        this.noteMaterials.get(note.type).get(note.flags)
+      );
+      noteGroup.add(sprite);
+      sprite.center = new THREE.Vector2(
+        note.type === import_scan_chart.noteTypes.kick ? 0.62 : 0.5,
+        note.type === import_scan_chart.noteTypes.kick ? -0.5 : 0
+      );
+      const aspectRatio = sprite.material.map.image.width / sprite.material.map.image.height;
+      sprite.scale.set(scale * aspectRatio, scale, scale);
+      noteGroup.position.x = calculateNoteXOffset(
+        this.instrumentType,
+        note.type
+      );
+      noteGroup.position.y = interpolate(
+        note.msTime,
+        chartCurrentTimeMs,
+        renderEndTimeMs,
+        -1,
+        1
+      );
+      noteGroup.position.z = 0;
+      sprite.material.clippingPlanes = this.clippingPlanes;
+      sprite.material.depthTest = false;
+      sprite.material.transparent = true;
+      sprite.renderOrder = note.type === import_scan_chart.noteTypes.kick ? 1 : 4;
+      if (note.msLength > 0) {
+        const mat = new THREE.MeshBasicMaterial({
+          color: calculateColor(note.type),
+          side: THREE.DoubleSide
+        });
+        mat.clippingPlanes = this.clippingPlanes;
+        mat.depthTest = false;
+        mat.transparent = true;
+        const geometry = new THREE.PlaneGeometry(
+          SCALE * (note.type === import_scan_chart.noteTypes.open ? 5 : 0.3),
+          2 * (note.msLength / HIGHWAY_DURATION_MS)
+        );
+        const plane = new THREE.Mesh(geometry, mat);
+        plane.position.y = 0.03 + note.msLength / HIGHWAY_DURATION_MS;
+        plane.renderOrder = 2;
+        noteGroup.add(plane);
+      }
+      this.noteGroups.set(i, noteGroup);
+      this.scene.add(noteGroup);
+    }
+  }
+};
+var EventSequence = class {
+  /** Assumes `events` are already sorted in `msTime` order. */
+  constructor(events) {
+    this.events = events;
+    /** Contains the closest events before msTime, grouped by type */
+    this.lastPrecedingEventIndexesOfType = /* @__PURE__ */ new Map();
+    this.lastPrecedingEventIndex = -1;
+  }
+  getEarliestActiveEventIndex(startMs) {
+    if (this.lastPrecedingEventIndex !== -1 && startMs < this.events[this.lastPrecedingEventIndex].msTime) {
+      this.lastPrecedingEventIndexesOfType = /* @__PURE__ */ new Map();
+      this.lastPrecedingEventIndex = -1;
+    }
+    while (this.events[this.lastPrecedingEventIndex + 1] && this.events[this.lastPrecedingEventIndex + 1].msTime < startMs) {
+      this.lastPrecedingEventIndexesOfType.set(
+        this.events[this.lastPrecedingEventIndex + 1].type,
+        this.lastPrecedingEventIndex + 1
+      );
+      this.lastPrecedingEventIndex++;
+    }
+    let earliestActiveEventIndex = null;
+    for (const [, index] of this.lastPrecedingEventIndexesOfType) {
+      if (this.events[index].msTime + this.events[index].msLength > startMs) {
+        if (earliestActiveEventIndex === null || earliestActiveEventIndex > index) {
+          earliestActiveEventIndex = index;
+        }
+      }
+    }
+    return earliestActiveEventIndex === null ? this.lastPrecedingEventIndex + 1 : earliestActiveEventIndex;
+  }
+};
+async function loadTextures(instrumentType) {
+  const textureLoader = new THREE.TextureLoader();
+  const load = (path) => textureLoader.loadAsync("https://static.enchor.us/" + path);
+  const [highwayTexture, strikelineTexture, noteTextures] = await Promise.all([
+    (async () => {
+      const texture = await load("preview-highway.png");
+      texture.wrapS = THREE.RepeatWrapping;
+      texture.wrapT = THREE.RepeatWrapping;
+      texture.repeat.set(1, 2);
+      return texture;
+    })(),
+    (async () => {
+      switch (instrumentType) {
+        case import_scan_chart.instrumentTypes.drums:
+          return await load("preview-drums-strikeline.png");
+        case import_scan_chart.instrumentTypes.sixFret:
+          return await load("preview-6fret-strikeline.png");
+        case import_scan_chart.instrumentTypes.fiveFret:
+          return await load("preview-5fret-strikeline.png");
+      }
+    })(),
+    (async () => {
+      const texturePromises = [];
+      const addTexture = (type, flags, path) => {
+        const texture = textureLoader.loadAsync(
+          `https://static.enchor.us/preview-${path}.webp`
+        );
+        texturePromises.push({ type, flags, texture });
+        return texture;
+      };
+      const reuseTexture = (type, flags, texture) => {
+        texturePromises.push({ type, flags, texture });
+      };
+      if (instrumentType === import_scan_chart.instrumentTypes.drums) {
+        const colors = /* @__PURE__ */ new Map([
+          [import_scan_chart.noteTypes.redDrum, "red"],
+          [import_scan_chart.noteTypes.yellowDrum, "yellow"],
+          [import_scan_chart.noteTypes.blueDrum, "blue"],
+          [import_scan_chart.noteTypes.greenDrum, "green"]
+        ]);
+        const dynamicFlags = /* @__PURE__ */ new Map([
+          [import_scan_chart.noteFlags.none, ""],
+          [import_scan_chart.noteFlags.ghost, "-ghost"],
+          [import_scan_chart.noteFlags.accent, "-accent"]
+        ]);
+        const spFlags = /* @__PURE__ */ new Map([
+          [import_scan_chart.noteFlags.none, ""],
+          [SP_FLAG, "-sp"]
+        ]);
+        addTexture(import_scan_chart.noteTypes.kick, import_scan_chart.noteFlags.none, "drums-kick");
+        addTexture(import_scan_chart.noteTypes.kick, import_scan_chart.noteFlags.doubleKick, "drums-kick");
+        addTexture(import_scan_chart.noteTypes.kick, import_scan_chart.noteFlags.none | SP_FLAG, "drums-kick-sp");
+        addTexture(
+          import_scan_chart.noteTypes.kick,
+          import_scan_chart.noteFlags.doubleKick | SP_FLAG,
+          "drums-kick-sp"
+        );
+        for (const [colorKey, colorName] of colors) {
+          for (const [dynamicFlagKey, dynamicFlagName] of dynamicFlags) {
+            for (const [spFlagKey, spFlagName] of spFlags) {
+              addTexture(
+                colorKey,
+                spFlagKey | dynamicFlagKey | import_scan_chart.noteFlags.tom,
+                `drums-${colorName}-tom${dynamicFlagName}${spFlagName}`
+              );
+              if (colorKey !== import_scan_chart.noteTypes.redDrum) {
+                addTexture(
+                  colorKey,
+                  spFlagKey | dynamicFlagKey | import_scan_chart.noteFlags.cymbal,
+                  `drums-${colorName}-cymbal${dynamicFlagName}${spFlagName}`
+                );
+              }
+            }
+          }
+        }
+      } else if (instrumentType === import_scan_chart.instrumentTypes.sixFret) {
+        const lanes = /* @__PURE__ */ new Map([
+          [import_scan_chart.noteTypes.open, "open"],
+          [import_scan_chart.noteTypes.black1, "black"],
+          [import_scan_chart.noteTypes.white1, "white"],
+          [BARRE1_TYPE, "barre"]
+        ]);
+        const modifiers = /* @__PURE__ */ new Map([
+          [import_scan_chart.noteFlags.strum, "-strum"],
+          [import_scan_chart.noteFlags.hopo, "-hopo"],
+          [import_scan_chart.noteFlags.tap, "-tap"]
+        ]);
+        const spFlags = /* @__PURE__ */ new Map([
+          [import_scan_chart.noteFlags.none, ""],
+          [SP_FLAG, "-sp"]
+        ]);
+        for (const [laneKey, laneName] of lanes) {
+          for (const [modifierKey, modifierName] of modifiers) {
+            for (const [spFlagKey, spFlagName] of spFlags) {
+              const texturePromise = addTexture(
+                laneKey,
+                modifierKey | spFlagKey,
+                `6fret-${laneName}${modifierName}${spFlagName}`
+              );
+              if (laneKey === import_scan_chart.noteTypes.black1) {
+                reuseTexture(
+                  import_scan_chart.noteTypes.black2,
+                  modifierKey | spFlagKey,
+                  texturePromise
+                );
+                reuseTexture(
+                  import_scan_chart.noteTypes.black3,
+                  modifierKey | spFlagKey,
+                  texturePromise
+                );
+              } else if (laneKey === import_scan_chart.noteTypes.white1) {
+                reuseTexture(
+                  import_scan_chart.noteTypes.white2,
+                  modifierKey | spFlagKey,
+                  texturePromise
+                );
+                reuseTexture(
+                  import_scan_chart.noteTypes.white3,
+                  modifierKey | spFlagKey,
+                  texturePromise
+                );
+              } else if (laneKey === BARRE1_TYPE) {
+                reuseTexture(
+                  BARRE2_TYPE,
+                  modifierKey | spFlagKey,
+                  texturePromise
+                );
+                reuseTexture(
+                  BARRE3_TYPE,
+                  modifierKey | spFlagKey,
+                  texturePromise
+                );
+              }
+            }
+          }
+        }
+      } else if (instrumentType === import_scan_chart.instrumentTypes.fiveFret) {
+        const lanes = /* @__PURE__ */ new Map([
+          [import_scan_chart.noteTypes.open, "open"],
+          [import_scan_chart.noteTypes.green, "green"],
+          [import_scan_chart.noteTypes.red, "red"],
+          [import_scan_chart.noteTypes.yellow, "yellow"],
+          [import_scan_chart.noteTypes.blue, "blue"],
+          [import_scan_chart.noteTypes.orange, "orange"]
+        ]);
+        const modifiers = /* @__PURE__ */ new Map([
+          [import_scan_chart.noteFlags.strum, "-strum"],
+          [import_scan_chart.noteFlags.hopo, "-hopo"],
+          [import_scan_chart.noteFlags.tap, "-tap"]
+        ]);
+        const spFlags = /* @__PURE__ */ new Map([
+          [import_scan_chart.noteFlags.none, ""],
+          [SP_FLAG, "-sp"]
+        ]);
+        for (const [laneKey, laneName] of lanes) {
+          for (let [modifierKey, modifierName] of modifiers) {
+            for (const [spFlagKey, spFlagName] of spFlags) {
+              if (laneKey === import_scan_chart.noteTypes.open && modifierKey === import_scan_chart.noteFlags.tap) {
+                modifierName = "-hopo";
+                modifierKey = import_scan_chart.noteFlags.hopo;
+              }
+              addTexture(
+                laneKey,
+                modifierKey | spFlagKey,
+                `5fret-${laneName}${modifierName}${spFlagName}`
+              );
+            }
+          }
+        }
+      }
+      const textures = await Promise.all(
+        texturePromises.map(async (t) => ({
+          type: t.type,
+          flags: t.flags,
+          texture: await t.texture
+        }))
+      );
+      const textureMap = /* @__PURE__ */ new Map();
+      Object.values(import_scan_chart.noteTypes).forEach(
+        (noteType) => textureMap.set(noteType, /* @__PURE__ */ new Map())
+      );
+      barreTypes.forEach((barreType) => textureMap.set(barreType, /* @__PURE__ */ new Map()));
+      for (const texture of textures) {
+        textureMap.get(texture.type).set(texture.flags, texture.texture);
+      }
+      return textureMap;
+    })()
+  ]);
+  return {
+    highwayTexture,
+    strikelineTexture,
+    noteTextures
+  };
+}
+function adjustParsedChart(parsedChart, instrument, difficulty) {
+  const track = parsedChart.trackData.find(
+    (t) => t.instrument === instrument && t.difficulty === difficulty
+  );
+  const starPower = track.starPowerSections;
+  if (starPower.length > 0) {
+    let starPowerIndex = 0;
+    for (const noteGroup of track.noteEventGroups) {
+      while (starPowerIndex < starPower.length && starPower[starPowerIndex].tick + starPower[starPowerIndex].length < noteGroup[0].tick) {
+        starPowerIndex++;
+      }
+      if (starPowerIndex === starPower.length) {
+        break;
+      }
+      if (noteGroup[0].tick >= starPower[starPowerIndex].tick && noteGroup[0].tick < starPower[starPowerIndex].tick + starPower[starPowerIndex].length) {
+        for (const note of noteGroup) {
+          note.flags |= SP_FLAG;
+        }
+      }
+    }
+  }
+  if ((0, import_scan_chart.getInstrumentType)(instrument) === import_scan_chart.instrumentTypes.sixFret) {
+    for (const noteGroup of track.noteEventGroups) {
+      let oneCount = 0;
+      let twoCount = 0;
+      let threeCount = 0;
+      for (const note of noteGroup) {
+        switch (note.type) {
+          case import_scan_chart.noteTypes.black1:
+          case import_scan_chart.noteTypes.white1:
+            oneCount++;
+            break;
+          case import_scan_chart.noteTypes.black2:
+          case import_scan_chart.noteTypes.white2:
+            twoCount++;
+            break;
+          case import_scan_chart.noteTypes.black3:
+          case import_scan_chart.noteTypes.white3:
+            threeCount++;
+            break;
+        }
+      }
+      if (oneCount > 1) {
+        const removed = removeFromArray(
+          noteGroup,
+          (n) => n.type === import_scan_chart.noteTypes.black1 || n.type === import_scan_chart.noteTypes.white1
+        );
+        removed[0].type = BARRE1_TYPE;
+        noteGroup.push(removed[0]);
+      }
+      if (twoCount > 1) {
+        const removed = removeFromArray(
+          noteGroup,
+          (n) => n.type === import_scan_chart.noteTypes.black2 || n.type === import_scan_chart.noteTypes.white2
+        );
+        removed[0].type = BARRE2_TYPE;
+        noteGroup.push(removed[0]);
+      }
+      if (threeCount > 1) {
+        const removed = removeFromArray(
+          noteGroup,
+          (n) => n.type === import_scan_chart.noteTypes.black3 || n.type === import_scan_chart.noteTypes.white3
+        );
+        removed[0].type = BARRE3_TYPE;
+        noteGroup.push(removed[0]);
+      }
+    }
+  } else if ((0, import_scan_chart.getInstrumentType)(instrument) === import_scan_chart.instrumentTypes.drums) {
+    for (const noteGroup of track.noteEventGroups) {
+      for (const note of noteGroup) {
+        if (note.flags & import_scan_chart.noteFlags.discoNoflip) {
+          note.flags &= ~import_scan_chart.noteFlags.discoNoflip;
+        }
+        if (note.flags & import_scan_chart.noteFlags.disco) {
+          note.flags &= ~import_scan_chart.noteFlags.disco;
+          switch (note.type) {
+            case import_scan_chart.noteTypes.redDrum:
+              note.type = import_scan_chart.noteTypes.yellowDrum;
+              note.flags &= ~import_scan_chart.noteFlags.tom;
+              note.flags |= import_scan_chart.noteFlags.cymbal;
+              break;
+            case import_scan_chart.noteTypes.yellowDrum:
+              note.type = import_scan_chart.noteTypes.redDrum;
+              note.flags &= ~import_scan_chart.noteFlags.cymbal;
+              note.flags |= import_scan_chart.noteFlags.tom;
+          }
+        }
+      }
+    }
+  }
+  return parsedChart;
+}
+function calculateNoteXOffset(instrumentType, noteType) {
+  const lane = calculateLane(noteType);
+  const leftOffset = instrumentType === import_scan_chart.instrumentTypes.drums ? 0.135 : instrumentType === import_scan_chart.instrumentTypes.sixFret && noteType !== import_scan_chart.noteTypes.open ? 0.2 : instrumentType === import_scan_chart.instrumentTypes.sixFret && noteType === import_scan_chart.noteTypes.open ? 0.035 : 0.035;
+  return leftOffset + -(NOTE_SPAN_WIDTH / 2) + SCALE + (NOTE_SPAN_WIDTH - SCALE) / 5 * lane;
+}
+function calculateLane(noteType) {
+  switch (noteType) {
+    case import_scan_chart.noteTypes.green:
+    case import_scan_chart.noteTypes.redDrum:
+    case import_scan_chart.noteTypes.black1:
+    case import_scan_chart.noteTypes.white1:
+    case BARRE1_TYPE:
+      return 0;
+    case import_scan_chart.noteTypes.red:
+    case import_scan_chart.noteTypes.yellowDrum:
+    case import_scan_chart.noteTypes.black2:
+    case import_scan_chart.noteTypes.white2:
+    case BARRE2_TYPE:
+      return 1;
+    case import_scan_chart.noteTypes.yellow:
+    case import_scan_chart.noteTypes.blueDrum:
+    case import_scan_chart.noteTypes.open:
+    case import_scan_chart.noteTypes.kick:
+    case import_scan_chart.noteTypes.black3:
+    case import_scan_chart.noteTypes.white3:
+    case BARRE3_TYPE:
+      return 2;
+    case import_scan_chart.noteTypes.blue:
+    case import_scan_chart.noteTypes.greenDrum:
+      return 3;
+    case import_scan_chart.noteTypes.orange:
+      return 4;
+    default:
+      return 0;
+  }
+}
+function calculateColor(noteType) {
+  switch (noteType) {
+    case import_scan_chart.noteTypes.green:
+    case import_scan_chart.noteTypes.greenDrum:
+      return "#01B11A";
+    case import_scan_chart.noteTypes.red:
+    case import_scan_chart.noteTypes.redDrum:
+      return "#DD2214";
+    case import_scan_chart.noteTypes.yellow:
+    case import_scan_chart.noteTypes.yellowDrum:
+      return "#DEEB52";
+    case import_scan_chart.noteTypes.blue:
+    case import_scan_chart.noteTypes.blueDrum:
+      return "#006CAF";
+    case import_scan_chart.noteTypes.open:
+      return "#8A0BB5";
+    case import_scan_chart.noteTypes.orange:
+      return "#F8B272";
+    default:
+      return "#FFFFFF";
+  }
+}
+function removeFromArray(array, predicate) {
+  const removed = [];
+  for (let i = array.length - 1; i >= 0; i--) {
+    if (predicate(array[i])) {
+      removed.unshift(array.splice(i, 1)[0]);
+    }
+  }
+  return removed;
+}
+function interpolate(val, fromStart, fromEnd, toStart, toEnd) {
+  return (val - fromStart) / (fromEnd - fromStart) * (toEnd - toStart) + toStart;
+}
+
+// src/SngLoader.ts
+var import_parse_sng = require("parse-sng");
+var import_scan_chart2 = require("scan-chart");
+var AUDIO_EXTENSIONS = [".ogg", ".mp3", ".wav", ".opus"];
+var EXCLUDED_AUDIO_NAMES = ["preview", "crowd"];
+async function extractSngFile(data) {
+  return new Promise((resolve, reject) => {
+    const files = [];
+    const stream = new ReadableStream({
+      start(controller) {
+        controller.enqueue(data);
+        controller.close();
+      }
+    });
+    const sngStream = new import_parse_sng.SngStream(stream, { generateSongIni: true });
+    sngStream.on("error", (error) => {
+      reject(error instanceof Error ? error : new Error(String(error)));
+    });
+    sngStream.on("file", async (fileName, fileStream, nextFile) => {
+      try {
+        const chunks = [];
+        const reader = fileStream.getReader();
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done)
+            break;
+          chunks.push(value);
+        }
+        const totalLength = chunks.reduce(
+          (sum, chunk) => sum + chunk.length,
+          0
+        );
+        const fileData = new Uint8Array(totalLength);
+        let offset = 0;
+        for (const chunk of chunks) {
+          fileData.set(chunk, offset);
+          offset += chunk.length;
+        }
+        files.push({ fileName, data: fileData });
+        if (nextFile) {
+          nextFile();
+        } else {
+          resolve(files);
+        }
+      } catch (error) {
+        reject(error instanceof Error ? error : new Error(String(error)));
+      }
+    });
+    sngStream.start();
+  });
+}
+function findChartFile(files) {
+  const midFile = files.find((f) => f.fileName.toLowerCase().endsWith(".mid"));
+  if (midFile) {
+    return { ...midFile, format: "mid" };
+  }
+  const chartFile = files.find(
+    (f) => f.fileName.toLowerCase().endsWith(".chart")
+  );
+  if (chartFile) {
+    return { ...chartFile, format: "chart" };
+  }
+  return null;
+}
+function findAudioFiles(files) {
+  return files.filter((file) => {
+    const ext = file.fileName.toLowerCase().slice(file.fileName.lastIndexOf("."));
+    if (!AUDIO_EXTENSIONS.includes(ext)) {
+      return false;
+    }
+    const baseName = file.fileName.toLowerCase().replace(/\.[^/.]+$/, "").split("/").pop() || "";
+    return !EXCLUDED_AUDIO_NAMES.some(
+      (excluded) => baseName.includes(excluded)
+    );
+  }).map((file) => file.data);
+}
+function isVideoFile(fileName) {
+  const videoExtensions = [".mp4", ".avi", ".webm", ".ogv", ".mpeg"];
+  const ext = fileName.toLowerCase().slice(fileName.lastIndexOf("."));
+  return videoExtensions.includes(ext);
+}
+async function prepareChartData(files, instrument, difficulty, initialSeekPercent = 0) {
+  const filteredFiles = files.filter((f) => !isVideoFile(f.fileName));
+  const scannedChart = (0, import_scan_chart2.scanChartFolder)(filteredFiles);
+  if (!scannedChart.playable || !scannedChart.notesData) {
+    throw new Error("This chart has no playable tracks.");
+  }
+  const chartFile = findChartFile(filteredFiles);
+  if (!chartFile) {
+    throw new Error("No .chart or .mid file found in the chart.");
+  }
+  const modifiers = {
+    song_length: scannedChart.song_length || 0,
+    hopo_frequency: scannedChart.hopo_frequency || 0,
+    eighthnote_hopo: scannedChart.eighthnote_hopo || false,
+    multiplier_note: scannedChart.multiplier_note || 0,
+    sustain_cutoff_threshold: scannedChart.sustain_cutoff_threshold ?? -1,
+    chord_snap_threshold: scannedChart.chord_snap_threshold || 0,
+    five_lane_drums: scannedChart.five_lane_drums || false,
+    pro_drums: scannedChart.pro_drums || false
+  };
+  const parsedChart = (0, import_scan_chart2.parseChartFile)(
+    chartFile.data,
+    chartFile.format,
+    modifiers
+  );
+  const track = parsedChart.trackData.find(
+    (t) => t.instrument === instrument && t.difficulty === difficulty
+  );
+  if (!track) {
+    throw new Error(
+      `No ${difficulty} ${instrument} track found in this chart.`
+    );
+  }
+  const audioFiles = findAudioFiles(filteredFiles);
+  const instrumentType = (0, import_scan_chart2.getInstrumentType)(instrument);
+  const textures = await ChartPreview.loadTextures(instrumentType);
+  const lastNote = parsedChart.trackData.flatMap((t) => t.noteEventGroups.flat()).reduce((max, note) => Math.max(max, note.msTime + note.msLength), 0);
+  const audioLengthMs = scannedChart.song_length || lastNote + 5e3;
+  const startDelayMs = (scannedChart.delay || 0) + (scannedChart.chart_offset || 0) * 1e3;
+  const seekPercent = initialSeekPercent > 0 ? initialSeekPercent : scannedChart.preview_start_time ? scannedChart.preview_start_time / audioLengthMs : 0;
+  return {
+    parsedChart,
+    textures,
+    audioFiles,
+    instrument,
+    difficulty,
+    startDelayMs,
+    audioLengthMs,
+    initialSeekPercent: seekPercent
+  };
+}
+async function fetchSngFile(url, signal) {
+  const response = await fetch(url, { signal });
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch chart: ${response.status} ${response.statusText}`
+    );
+  }
+  const arrayBuffer = await response.arrayBuffer();
+  return new Uint8Array(arrayBuffer);
+}
+
+// src/ChartPreviewPlayer.ts
+var ICONS = {
+  play: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/></svg>`,
+  pause: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"/></svg>`,
+  replay: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/><path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/></svg>`,
+  volumeMute: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zm7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z"/></svg>`,
+  volumeLow: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12V4zm3.025 4a4.486 4.486 0 0 1-1.318 3.182L10 10.475A3.489 3.489 0 0 0 11.025 8 3.49 3.49 0 0 0 10 5.525l.707-.707A4.486 4.486 0 0 1 12.025 8z"/></svg>`,
+  volumeHigh: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/><path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"/><path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/></svg>`,
+  fullscreen: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"/></svg>`,
+  fullscreenExit: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 0a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"/></svg>`,
+  spinner: `<svg viewBox="0 0 16 16" fill="currentColor" class="spinner"><path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/></svg>`
+};
+var STYLES = `
+:host {
+	/* Themeable CSS custom properties */
+	--player-bg: #000;
+	--controls-bg: #2a2a3a;
+	--controls-hover-bg: #3a3a4a;
+	--slider-track-bg: #1a1a2a;
+	--accent-color: #3b82f6;
+	--text-color: #e0e0e0;
+	--text-muted: #aaa;
+	--text-idle: #666;
+	--error-color: #ef4444;
+	--shadow-color: rgba(0, 0, 0, 0.3);
+
+	display: block;
+	width: 100%;
+	height: 100%;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+.player-container {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	background: var(--player-bg);
+	position: relative;
+}
+
+.player-container.fullscreen {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 9999;
+}
+
+.preview-viewport {
+	flex: 1;
+	width: 100%;
+	background: var(--player-bg);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	position: relative;
+}
+
+.preview-viewport canvas {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.fullscreen-btn svg {
+	width: 20px;
+	height: 20px;
+}
+
+.controls {
+	display: flex;
+	align-items: center;
+	background: var(--controls-bg);
+	padding: 0;
+	height: 40px;
+	flex-shrink: 0;
+}
+
+.control-btn {
+	background: var(--controls-bg);
+	border: none;
+	color: var(--text-color);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 40px;
+	width: 38px;
+	padding: 8px;
+	transition: background 0.15s;
+	flex-shrink: 0;
+}
+
+.control-btn:hover:not(:disabled) {
+	background: var(--controls-hover-bg);
+}
+
+.control-btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.control-btn svg {
+	width: 20px;
+	height: 20px;
+}
+
+.control-btn .spinner {
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+	from { transform: rotate(0deg); }
+	to { transform: rotate(360deg); }
+}
+
+.volume-wrapper {
+	position: relative;
+	display: flex;
+	flex-shrink: 0;
+}
+
+.volume-dropdown {
+	position: absolute;
+	bottom: 100%;
+	left: 50%;
+	transform: translateX(-50%);
+	background: var(--controls-bg);
+	border-radius: 4px;
+	padding: 10px 6px;
+	box-shadow: 0 -2px 10px var(--shadow-color);
+	display: none;
+	z-index: 20;
+}
+
+.volume-wrapper:hover .volume-dropdown,
+.volume-dropdown:hover {
+	display: block;
+}
+
+.volume-slider {
+	writing-mode: vertical-lr;
+	direction: rtl;
+	width: 6px;
+	height: 80px;
+	-webkit-appearance: none;
+	appearance: none;
+	background: var(--slider-track-bg);
+	border-radius: 3px;
+	cursor: pointer;
+}
+
+.volume-slider::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	width: 14px;
+	height: 14px;
+	background: var(--accent-color);
+	border-radius: 50%;
+	cursor: pointer;
+}
+
+.volume-slider::-moz-range-thumb {
+	width: 14px;
+	height: 14px;
+	background: var(--accent-color);
+	border-radius: 50%;
+	cursor: pointer;
+	border: none;
+}
+
+.timestamp {
+	color: var(--text-muted);
+	font-size: 12px;
+	padding: 0 8px;
+	white-space: nowrap;
+	flex-shrink: 0;
+	min-width: 85px;
+	text-align: center;
+}
+
+.seek-wrapper {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	padding: 0 8px;
+	min-width: 0;
+}
+
+.seek-bar {
+	width: 100%;
+	height: 6px;
+	-webkit-appearance: none;
+	appearance: none;
+	background: var(--slider-track-bg);
+	border-radius: 3px;
+	cursor: pointer;
+}
+
+.seek-bar::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	width: 14px;
+	height: 14px;
+	background: var(--accent-color);
+	border-radius: 50%;
+	cursor: pointer;
+	transition: transform 0.1s;
+}
+
+.seek-bar::-webkit-slider-thumb:hover {
+	transform: scale(1.2);
+}
+
+.seek-bar::-moz-range-thumb {
+	width: 14px;
+	height: 14px;
+	background: var(--accent-color);
+	border-radius: 50%;
+	cursor: pointer;
+	border: none;
+}
+
+.seek-bar:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.idle-message {
+	color: var(--text-idle);
+	font-size: 14px;
+}
+
+.error-message {
+	color: var(--error-color);
+	font-size: 14px;
+	text-align: center;
+	padding: 20px;
+}
+`;
+var ChartPreviewPlayer = class extends HTMLElement {
+  constructor() {
+    super();
+    this.chartPreview = null;
+    this._state = "idle";
+    this._volume = 50;
+    this._lastVolumeBeforeMute = 50;
+    this._isFullscreen = false;
+    this.timestampInterval = null;
+    this._wasPlayingBeforeSeek = false;
+    this._isSeeking = false;
+    this._currentAbortController = null;
+    this.handleKeydown = (e) => {
+      if (e.target instanceof HTMLInputElement)
+        return;
+      switch (e.code) {
+        case "Space":
+          e.preventDefault();
+          if (this._state !== "idle" && this._state !== "loading" && this._state !== "error") {
+            this.togglePlayPause();
+          }
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          this.seekRelative(-5e3);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          this.seekRelative(5e3);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          this.setVolume(Math.min(100, this._volume + 10));
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          this.setVolume(Math.max(0, this._volume - 10));
+          break;
+        case "KeyM":
+          e.preventDefault();
+          this.toggleMute();
+          break;
+        case "KeyF":
+          e.preventDefault();
+          this.toggleFullscreen();
+          break;
+        case "Escape":
+          if (this._isFullscreen) {
+            e.preventDefault();
+            this.toggleFullscreen();
+          }
+          break;
+      }
+    };
+    this.handleFullscreenChange = () => {
+      this._isFullscreen = document.fullscreenElement === this.container;
+      this.container.classList.toggle("fullscreen", this._isFullscreen);
+      this.fullscreenBtn.innerHTML = this._isFullscreen ? ICONS.fullscreenExit : ICONS.fullscreen;
+      this.fullscreenBtn.title = this._isFullscreen ? "Exit fullscreen" : "Toggle fullscreen";
+    };
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.render();
+    this.setupEventListeners();
+  }
+  static get observedAttributes() {
+    return ["volume"];
+  }
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (name === "volume" && newValue !== null) {
+      const parsed = parseInt(newValue, 10);
+      this._volume = Math.max(0, Math.min(100, isNaN(parsed) ? 50 : parsed));
+      if (this.volumeSlider) {
+        this.volumeSlider.value = String(this._volume);
+      }
+      if (this.chartPreview) {
+        this.chartPreview.volume = this._volume / 100;
+      }
+      this.updateVolumeIcon();
+    }
+  }
+  connectedCallback() {
+    this.setAttribute("tabindex", "0");
+    document.addEventListener("fullscreenchange", this.handleFullscreenChange);
+  }
+  disconnectedCallback() {
+    this.dispose();
+    document.removeEventListener(
+      "fullscreenchange",
+      this.handleFullscreenChange
+    );
+    this.removeEventListener("keydown", this.handleKeydown);
+  }
+  render() {
+    this.shadow.innerHTML = `
+			<style>${STYLES}</style>
+			<div class="player-container">
+				<div class="preview-viewport">
+					<span class="idle-message">Click play to start</span>
+				</div>
+				<div class="controls">
+					<button class="control-btn play-btn" aria-label="Play" disabled>
+						${ICONS.play}
+					</button>
+					<div class="volume-wrapper">
+						<button class="control-btn volume-btn" aria-label="Volume">
+							${ICONS.volumeHigh}
+						</button>
+						<div class="volume-dropdown">
+							<input type="range" class="volume-slider" min="0" max="100" value="50" aria-label="Volume">
+						</div>
+					</div>
+					<span class="timestamp">0:00 / 0:00</span>
+					<div class="seek-wrapper">
+						<input type="range" class="seek-bar" min="0" max="1000" value="0" disabled aria-label="Seek">
+					</div>
+					<button class="control-btn fullscreen-btn" aria-label="Toggle fullscreen" title="Toggle fullscreen">
+						${ICONS.fullscreen}
+					</button>
+				</div>
+			</div>
+		`;
+    this.container = this.shadow.querySelector(".player-container");
+    this.viewport = this.shadow.querySelector(".preview-viewport");
+    this.playBtn = this.shadow.querySelector(".play-btn");
+    this.volumeBtn = this.shadow.querySelector(".volume-btn");
+    this.volumeSlider = this.shadow.querySelector(".volume-slider");
+    this.seekBar = this.shadow.querySelector(".seek-bar");
+    this.timestampEl = this.shadow.querySelector(".timestamp");
+    this.fullscreenBtn = this.shadow.querySelector(
+      ".controls .fullscreen-btn"
+    );
+    const volumeAttr = this.getAttribute("volume");
+    if (volumeAttr !== null) {
+      const parsed = parseInt(volumeAttr, 10);
+      this._volume = Math.max(0, Math.min(100, isNaN(parsed) ? 50 : parsed));
+    }
+    this.volumeSlider.value = String(this._volume);
+    this.updateVolumeIcon();
+  }
+  setupEventListeners() {
+    this.playBtn.addEventListener("click", () => this.togglePlayPause());
+    this.viewport.addEventListener("click", () => {
+      if (this._state !== "idle" && this._state !== "loading" && this._state !== "error") {
+        this.togglePlayPause();
+      }
+    });
+    this.volumeBtn.addEventListener("click", () => this.toggleMute());
+    this.volumeSlider.addEventListener("input", () => {
+      const newVolume = parseInt(this.volumeSlider.value, 10);
+      if (this._volume > 0 && newVolume === 0) {
+        this._lastVolumeBeforeMute = this._volume;
+      }
+      this._volume = newVolume;
+      if (this.chartPreview) {
+        this.chartPreview.volume = this._volume / 100;
+      }
+      this.updateVolumeIcon();
+      this.setAttribute("volume", String(this._volume));
+    });
+    this.seekBar.addEventListener("mousedown", () => this.onSeekStart());
+    this.seekBar.addEventListener("touchstart", () => this.onSeekStart(), {
+      passive: true
+    });
+    this.seekBar.addEventListener("input", () => this.onSeekInput());
+    this.seekBar.addEventListener("mouseup", () => this.onSeekEnd());
+    this.seekBar.addEventListener("touchend", () => this.onSeekEnd());
+    this.seekBar.addEventListener("mouseleave", (e) => {
+      if (e.buttons === 0 && this._isSeeking) {
+        this.onSeekEnd();
+      }
+    });
+    this.fullscreenBtn.addEventListener("click", () => {
+      this.toggleFullscreen();
+    });
+    this.addEventListener("keydown", this.handleKeydown);
+  }
+  onSeekStart() {
+    if (!this._isSeeking) {
+      this._isSeeking = true;
+      this._wasPlayingBeforeSeek = this._state === "playing";
+      if (this._wasPlayingBeforeSeek && this.chartPreview) {
+        this.chartPreview.togglePaused();
+        this.setState("seeking");
+      }
+    }
+  }
+  async onSeekInput() {
+    if (!this.chartPreview)
+      return;
+    this.setState("seeking");
+    await this.chartPreview.seek(parseInt(this.seekBar.value, 10) / 1e3);
+    this.updateTimestamp();
+  }
+  async onSeekEnd() {
+    if (!this._isSeeking)
+      return;
+    this._isSeeking = false;
+    if (!this.chartPreview) {
+      this.setState("paused");
+      return;
+    }
+    if (this._wasPlayingBeforeSeek) {
+      this._wasPlayingBeforeSeek = false;
+      await this.chartPreview.togglePaused();
+      this.setState("playing");
+      this.startTimestampUpdates();
+    } else {
+      this.setState("paused");
+    }
+  }
+  /**
+   * Prepares the viewport for loading by removing messages and setting loading state.
+   */
+  prepareForLoading() {
+    this.setState("loading");
+    const idleMessage = this.viewport.querySelector(".idle-message");
+    if (idleMessage)
+      idleMessage.remove();
+    const errorMessage = this.viewport.querySelector(".error-message");
+    if (errorMessage)
+      errorMessage.remove();
+  }
+  /**
+   * Handles load errors by showing error message and dispatching error event.
+   */
+  handleLoadError(error, context) {
+    if (error instanceof DOMException && error.name === "AbortError") {
+      return;
+    }
+    console.error(`Failed to load chart ${context}:`, error);
+    this.setState("error");
+    const errorEl = document.createElement("div");
+    errorEl.className = "error-message";
+    errorEl.textContent = `Failed to load: ${error instanceof Error ? error.message : "Unknown error"}`;
+    this.viewport.appendChild(errorEl);
+    this.dispatchEvent(
+      new CustomEvent("player-error", {
+        detail: { error },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  setState(state) {
+    const oldState = this._state;
+    this._state = state;
+    this.updatePlayButton();
+    if (oldState !== state) {
+      this.dispatchEvent(
+        new CustomEvent("player-statechange", {
+          detail: { state, previousState: oldState },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  updatePlayButton() {
+    switch (this._state) {
+      case "idle":
+        this.playBtn.disabled = true;
+        this.playBtn.innerHTML = ICONS.play;
+        this.playBtn.setAttribute("aria-label", "Play");
+        break;
+      case "loading":
+        this.playBtn.disabled = true;
+        this.playBtn.innerHTML = ICONS.spinner;
+        this.playBtn.setAttribute("aria-label", "Loading");
+        break;
+      case "ready":
+      case "paused":
+      case "seeking":
+        this.playBtn.disabled = false;
+        this.playBtn.innerHTML = ICONS.play;
+        this.playBtn.setAttribute("aria-label", "Play");
+        break;
+      case "playing":
+        this.playBtn.disabled = false;
+        this.playBtn.innerHTML = ICONS.pause;
+        this.playBtn.setAttribute("aria-label", "Pause");
+        break;
+      case "ended":
+        this.playBtn.disabled = false;
+        this.playBtn.innerHTML = ICONS.replay;
+        this.playBtn.setAttribute("aria-label", "Replay");
+        break;
+      case "error":
+        this.playBtn.disabled = true;
+        this.playBtn.innerHTML = ICONS.play;
+        this.playBtn.setAttribute("aria-label", "Error");
+        break;
+    }
+  }
+  updateVolumeIcon() {
+    if (this._volume === 0) {
+      this.volumeBtn.innerHTML = ICONS.volumeMute;
+    } else if (this._volume <= 50) {
+      this.volumeBtn.innerHTML = ICONS.volumeLow;
+    } else {
+      this.volumeBtn.innerHTML = ICONS.volumeHigh;
+    }
+  }
+  updateTimestamp() {
+    if (!this.chartPreview) {
+      this.timestampEl.textContent = "0:00 / 0:00";
+      return;
+    }
+    const current = this.formatTime(this.chartPreview.chartCurrentTimeMs);
+    const total = this.formatTime(this.chartPreview.chartEndTimeMs);
+    this.timestampEl.textContent = `${current} / ${total}`;
+  }
+  formatTime(ms) {
+    const totalSeconds = Math.max(0, Math.floor(ms / 1e3));
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  }
+  startTimestampUpdates() {
+    this.stopTimestampUpdates();
+    this.timestampInterval = setInterval(() => this.updateTimestamp(), 100);
+  }
+  stopTimestampUpdates() {
+    if (this.timestampInterval) {
+      clearInterval(this.timestampInterval);
+      this.timestampInterval = null;
+    }
+  }
+  // Public API
+  /**
+   * Current player state
+   */
+  get state() {
+    return this._state;
+  }
+  /**
+   * Whether the player is currently playing
+   */
+  get isPlaying() {
+    return this._state === "playing";
+  }
+  /**
+   * Current volume (0-100)
+   */
+  get volume() {
+    return this._volume;
+  }
+  /**
+   * Set volume (0-100)
+   */
+  setVolume(volume) {
+    this._volume = Math.max(0, Math.min(100, volume));
+    this.volumeSlider.value = String(this._volume);
+    if (this.chartPreview) {
+      this.chartPreview.volume = this._volume / 100;
+    }
+    this.updateVolumeIcon();
+    this.setAttribute("volume", String(this._volume));
+  }
+  /**
+   * Current playback position in milliseconds
+   */
+  get currentTimeMs() {
+    return this.chartPreview?.chartCurrentTimeMs ?? 0;
+  }
+  /**
+   * Total duration in milliseconds
+   */
+  get durationMs() {
+    return this.chartPreview?.chartEndTimeMs ?? 0;
+  }
+  /**
+   * Whether the player is in fullscreen mode
+   */
+  get isFullscreen() {
+    return this._isFullscreen;
+  }
+  /**
+   * Load a chart into the player from pre-processed data.
+   * Use this when you've already parsed the chart and loaded textures.
+   *
+   * @example
+   * ```ts
+   * const textures = await ChartPreview.loadTextures(instrumentType);
+   * await player.loadChart({
+   *   parsedChart,
+   *   textures,
+   *   audioFiles,
+   *   instrument: 'guitar',
+   *   difficulty: 'expert',
+   *   startDelayMs: 0,
+   *   audioLengthMs: 180000,
+   * });
+   * ```
+   */
+  async loadChart(config) {
+    try {
+      if (this.chartPreview) {
+        this.chartPreview.dispose();
+        this.chartPreview = null;
+      }
+      this.stopTimestampUpdates();
+      this.prepareForLoading();
+      let previewContainer = this.viewport.querySelector(
+        ".preview-render"
+      );
+      if (!previewContainer) {
+        previewContainer = document.createElement("div");
+        previewContainer.className = "preview-render";
+        previewContainer.style.cssText = "width: 100%; height: 100%;";
+        this.viewport.appendChild(previewContainer);
+      }
+      this.chartPreview = await ChartPreview.create({
+        parsedChart: config.parsedChart,
+        textures: config.textures,
+        audioFiles: config.audioFiles,
+        instrument: config.instrument,
+        difficulty: config.difficulty,
+        startDelayMs: config.startDelayMs,
+        audioLengthMs: config.audioLengthMs,
+        container: previewContainer
+      });
+      this.chartPreview.volume = this._volume / 100;
+      this.chartPreview.on("progress", (percent) => {
+        this.seekBar.value = String(Math.round(percent * 1e3));
+        this.dispatchEvent(
+          new CustomEvent("player-progress", {
+            detail: {
+              percent,
+              currentMs: this.chartPreview.chartCurrentTimeMs,
+              totalMs: this.chartPreview.chartEndTimeMs
+            },
+            bubbles: true,
+            composed: true
+          })
+        );
+      });
+      this.chartPreview.on("end", async () => {
+        await this.chartPreview.togglePaused();
+        this.setState("ended");
+        this.stopTimestampUpdates();
+        this.dispatchEvent(
+          new CustomEvent("player-end", {
+            bubbles: true,
+            composed: true
+          })
+        );
+      });
+      if (config.initialSeekPercent !== void 0 && config.initialSeekPercent > 0) {
+        await this.chartPreview.seek(config.initialSeekPercent);
+        this.seekBar.value = String(
+          Math.round(config.initialSeekPercent * 1e3)
+        );
+      }
+      this.seekBar.disabled = false;
+      this.startTimestampUpdates();
+      this.setState("ready");
+    } catch (error) {
+      this.handleLoadError(error, "");
+    }
+  }
+  /**
+   * Load a chart from a URL pointing to a .sng file.
+   * This is the simplest way to load a chart - just provide a URL and instrument/difficulty.
+   *
+   * @example
+   * ```ts
+   * await player.loadFromUrl({
+   *   url: 'https://files.enchor.us/abc123.sng',
+   *   instrument: 'guitar',
+   *   difficulty: 'expert',
+   * });
+   * ```
+   */
+  async loadFromUrl(config) {
+    try {
+      if (this._currentAbortController) {
+        this._currentAbortController.abort();
+      }
+      this._currentAbortController = new AbortController();
+      const signal = config.signal ?? this._currentAbortController.signal;
+      this.prepareForLoading();
+      const sngData = await fetchSngFile(config.url, signal);
+      const files = await extractSngFile(sngData);
+      const preparedData = await prepareChartData(
+        files,
+        config.instrument,
+        config.difficulty,
+        config.initialSeekPercent
+      );
+      await this.loadChart({
+        parsedChart: preparedData.parsedChart,
+        textures: preparedData.textures,
+        audioFiles: preparedData.audioFiles,
+        instrument: preparedData.instrument,
+        difficulty: preparedData.difficulty,
+        startDelayMs: preparedData.startDelayMs,
+        audioLengthMs: preparedData.audioLengthMs,
+        initialSeekPercent: preparedData.initialSeekPercent
+      });
+      this._currentAbortController = null;
+    } catch (error) {
+      this._currentAbortController = null;
+      this.handleLoadError(error, "from URL");
+    }
+  }
+  /**
+   * Load a chart from raw .sng file data.
+   * Use this when you've already fetched the .sng file yourself.
+   *
+   * @example
+   * ```ts
+   * const response = await fetch('https://files.enchor.us/abc123.sng');
+   * const sngData = new Uint8Array(await response.arrayBuffer());
+   *
+   * await player.loadFromSngFile({
+   *   sngFile: sngData,
+   *   instrument: 'guitar',
+   *   difficulty: 'expert',
+   * });
+   * ```
+   */
+  async loadFromSngFile(config) {
+    try {
+      this.prepareForLoading();
+      const files = await extractSngFile(config.sngFile);
+      const preparedData = await prepareChartData(
+        files,
+        config.instrument,
+        config.difficulty,
+        config.initialSeekPercent
+      );
+      await this.loadChart({
+        parsedChart: preparedData.parsedChart,
+        textures: preparedData.textures,
+        audioFiles: preparedData.audioFiles,
+        instrument: preparedData.instrument,
+        difficulty: preparedData.difficulty,
+        startDelayMs: preparedData.startDelayMs,
+        audioLengthMs: preparedData.audioLengthMs,
+        initialSeekPercent: preparedData.initialSeekPercent
+      });
+    } catch (error) {
+      this.handleLoadError(error, "from .sng file");
+    }
+  }
+  /**
+   * Load a chart from individual files (chart file + audio files).
+   * Use this when loading from a folder or when you have the files separately.
+   *
+   * @example
+   * ```ts
+   * // From file picker
+   * const files = await getFilesFromFolder();
+   *
+   * await player.loadFromChartFiles({
+   *   files: files.map(f => ({ fileName: f.name, data: new Uint8Array(f.data) })),
+   *   instrument: 'guitar',
+   *   difficulty: 'expert',
+   * });
+   * ```
+   */
+  async loadFromChartFiles(config) {
+    try {
+      this.prepareForLoading();
+      const preparedData = await prepareChartData(
+        config.files,
+        config.instrument,
+        config.difficulty,
+        config.initialSeekPercent
+      );
+      await this.loadChart({
+        parsedChart: preparedData.parsedChart,
+        textures: preparedData.textures,
+        audioFiles: preparedData.audioFiles,
+        instrument: preparedData.instrument,
+        difficulty: preparedData.difficulty,
+        startDelayMs: preparedData.startDelayMs,
+        audioLengthMs: preparedData.audioLengthMs,
+        initialSeekPercent: preparedData.initialSeekPercent
+      });
+    } catch (error) {
+      this.handleLoadError(error, "from files");
+    }
+  }
+  /**
+   * Toggle between playing and paused states
+   */
+  async togglePlayPause() {
+    if (!this.chartPreview)
+      return;
+    if (this._state === "ended") {
+      await this.chartPreview.seek(0);
+      this.seekBar.value = "0";
+      this.setState("paused");
+    }
+    if (this._state === "paused" || this._state === "ready") {
+      this.setState("loading");
+      await this.chartPreview.togglePaused();
+      this.setState("playing");
+      this.startTimestampUpdates();
+    } else if (this._state === "playing") {
+      this.setState("loading");
+      await this.chartPreview.togglePaused();
+      this.setState("paused");
+    }
+  }
+  /**
+   * Play the chart
+   */
+  async play() {
+    if (this._state === "paused" || this._state === "ready" || this._state === "ended") {
+      await this.togglePlayPause();
+    }
+  }
+  /**
+   * Pause the chart
+   */
+  async pause() {
+    if (this._state === "playing") {
+      await this.togglePlayPause();
+    }
+  }
+  /**
+   * Seek to a specific position
+   * @param percent Position as a percentage (0-1)
+   */
+  async seek(percent) {
+    if (!this.chartPreview)
+      return;
+    const wasPlaying = this._state === "playing";
+    if (wasPlaying) {
+      await this.chartPreview.togglePaused();
+    }
+    await this.chartPreview.seek(Math.max(0, Math.min(1, percent)));
+    this.seekBar.value = String(Math.round(percent * 1e3));
+    this.updateTimestamp();
+    this.setState("paused");
+  }
+  /**
+   * Seek relative to current position
+   * @param deltaMs Milliseconds to seek (positive = forward, negative = backward)
+   */
+  async seekRelative(deltaMs) {
+    if (!this.chartPreview)
+      return;
+    const currentMs = this.chartPreview.chartCurrentTimeMs;
+    const totalMs = this.chartPreview.chartEndTimeMs;
+    const newPercent = Math.max(
+      0,
+      Math.min(1, (currentMs + deltaMs) / totalMs)
+    );
+    await this.seek(newPercent);
+  }
+  /**
+   * Toggle mute
+   */
+  toggleMute() {
+    if (this._volume > 0) {
+      this._lastVolumeBeforeMute = this._volume;
+      this.setVolume(0);
+    } else {
+      this.setVolume(this._lastVolumeBeforeMute || 50);
+    }
+  }
+  /**
+   * Toggle fullscreen mode
+   */
+  async toggleFullscreen() {
+    if (!document.fullscreenEnabled)
+      return;
+    if (this._isFullscreen) {
+      await document.exitFullscreen();
+    } else {
+      await this.container.requestFullscreen();
+    }
+  }
+  /**
+   * Dispose of the player and clean up resources
+   */
+  dispose() {
+    if (this._currentAbortController) {
+      this._currentAbortController.abort();
+      this._currentAbortController = null;
+    }
+    this.stopTimestampUpdates();
+    if (this.chartPreview) {
+      this.chartPreview.dispose();
+      this.chartPreview = null;
+    }
+    this._isSeeking = false;
+    this._wasPlayingBeforeSeek = false;
+    this.setState("idle");
+    this.seekBar.disabled = true;
+    this.seekBar.value = "0";
+  }
+};
+if (typeof window !== "undefined" && !customElements.get("chart-preview-player")) {
+  customElements.define("chart-preview-player", ChartPreviewPlayer);
+}
+
+// src/index.ts
+var import_scan_chart3 = require("scan-chart");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ChartPreview,
+  ChartPreviewPlayer,
+  extractSngFile,
+  fetchSngFile,
+  findAudioFiles,
+  findChartFile,
+  getInstrumentType,
+  instrumentTypes,
+  isVideoFile,
+  prepareChartData
+});