@pie-players/pie-tool-annotation-toolbar 0.3.3 → 0.3.4

package/dist/index-CGEKDUBQ.js

@@ -0,0 +1,228 @@
+var v = Object.defineProperty;
+var y = (h, t, e) => t in h ? v(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e;
+var o = (h, t, e) => y(h, typeof t != "symbol" ? t + "" : t, e);
+class T {
+  constructor(t) {
+    o(this, "config");
+    o(this, "currentAudio", null);
+    o(this, "pausedState", !1);
+    o(this, "wordTimings", []);
+    o(this, "highlightInterval", null);
+    o(this, "intentionallyStopped", !1);
+    o(this, "onWordBoundary");
+    this.config = t;
+  }
+  async speak(t) {
+    this.stop(), this.intentionallyStopped = !1;
+    const { audioUrl: e, wordTimings: i } = await this.synthesizeSpeech(t), r = this.config.rate || 1;
+    return this.wordTimings = i.map((s) => ({
+      ...s,
+      time: s.time / r
+    })), new Promise((s, a) => {
+      const n = new Audio(e);
+      this.currentAudio = n, this.config.rate && (n.playbackRate = Math.max(0.25, Math.min(4, this.config.rate))), this.config.volume !== void 0 && (n.volume = Math.max(0, Math.min(1, this.config.volume))), n.onplay = () => {
+        this.pausedState = !1, this.onWordBoundary && this.wordTimings.length > 0 && this.startWordHighlighting();
+      }, n.onended = () => {
+        this.stopWordHighlighting(), URL.revokeObjectURL(e), this.currentAudio = null, this.wordTimings = [], s();
+      }, n.onerror = (l) => {
+        this.stopWordHighlighting(), URL.revokeObjectURL(e), this.currentAudio = null, this.wordTimings = [], this.intentionallyStopped ? s() : a(new Error("Failed to play audio from server"));
+      }, n.onpause = () => {
+        this.stopWordHighlighting(), this.pausedState = !0;
+      }, n.play().catch(a);
+    });
+  }
+  /**
+   * Call server API to synthesize speech
+   */
+  async synthesizeSpeech(t) {
+    const e = {
+      "Content-Type": "application/json",
+      ...this.config.headers
+    };
+    this.config.authToken && (e.Authorization = `Bearer ${this.config.authToken}`);
+    const i = this.config.providerOptions || {}, r = typeof this.config.engine == "string" ? this.config.engine : typeof i.engine == "string" ? i.engine : void 0, s = typeof i.sampleRate == "number" && Number.isFinite(i.sampleRate) ? i.sampleRate : void 0, a = i.format === "mp3" || i.format === "ogg" || i.format === "pcm" ? i.format : void 0, n = Array.isArray(i.speechMarkTypes) ? i.speechMarkTypes.filter((c) => c === "word" || c === "sentence" || c === "ssml") : void 0, l = {
+      text: t,
+      provider: this.config.provider || "polly",
+      voice: this.config.voice,
+      language: this.config.language,
+      rate: this.config.rate,
+      engine: r,
+      sampleRate: s,
+      format: a,
+      speechMarkTypes: n,
+      includeSpeechMarks: !0
+    }, u = await fetch(`${this.config.apiEndpoint}/synthesize`, {
+      method: "POST",
+      headers: e,
+      body: JSON.stringify(l)
+    });
+    if (!u.ok) {
+      const c = await u.json().catch(() => ({})), m = c.message || c.error?.message || `Server returned ${u.status}`;
+      throw new Error(m);
+    }
+    const d = await u.json(), g = this.base64ToBlob(d.audio, d.contentType), p = URL.createObjectURL(g), f = this.parseSpeechMarks(d.speechMarks);
+    return { audioUrl: p, wordTimings: f };
+  }
+  /**
+   * Convert base64 to Blob
+   */
+  base64ToBlob(t, e) {
+    const i = atob(t), r = new Array(i.length);
+    for (let a = 0; a < i.length; a++)
+      r[a] = i.charCodeAt(a);
+    const s = new Uint8Array(r);
+    return new Blob([s], { type: e });
+  }
+  /**
+   * Parse speech marks into word timings
+   */
+  parseSpeechMarks(t) {
+    return t.filter((e) => e.type === "word").map((e, i) => ({
+      time: e.time,
+      wordIndex: i,
+      charIndex: e.start,
+      length: e.end - e.start
+    }));
+  }
+  /**
+   * Start word highlighting synchronized with audio playback
+   */
+  startWordHighlighting() {
+    if (this.stopWordHighlighting(), !this.currentAudio || !this.onWordBoundary || this.wordTimings.length === 0) {
+      console.log("[ServerTTSProvider] Cannot start highlighting:", {
+        hasAudio: !!this.currentAudio,
+        hasCallback: !!this.onWordBoundary,
+        wordTimingsCount: this.wordTimings.length
+      });
+      return;
+    }
+    console.log("[ServerTTSProvider] Starting word highlighting with", this.wordTimings.length, "word timings"), console.log("[ServerTTSProvider] Playback rate:", this.currentAudio.playbackRate), console.log("[ServerTTSProvider] First 3 timings:", this.wordTimings.slice(0, 3));
+    let t = -1;
+    this.highlightInterval = window.setInterval(() => {
+      if (!this.currentAudio) {
+        this.stopWordHighlighting();
+        return;
+      }
+      const e = this.currentAudio.currentTime * 1e3;
+      for (let i = 0; i < this.wordTimings.length; i++) {
+        const r = this.wordTimings[i];
+        if (e >= r.time && i > t) {
+          this.onWordBoundary && (console.log("[ServerTTSProvider] Highlighting word at charIndex:", r.charIndex, "length:", r.length, "time:", r.time, "currentTime:", e), this.onWordBoundary("", r.charIndex, r.length)), t = i;
+          break;
+        }
+      }
+    }, 50);
+  }
+  /**
+   * Stop word highlighting
+   */
+  stopWordHighlighting() {
+    this.highlightInterval !== null && (clearInterval(this.highlightInterval), this.highlightInterval = null);
+  }
+  pause() {
+    this.currentAudio && !this.pausedState && (this.currentAudio.pause(), this.stopWordHighlighting(), this.pausedState = !0);
+  }
+  resume() {
+    this.currentAudio && this.pausedState && (this.currentAudio.play(), this.pausedState = !1, this.onWordBoundary && this.wordTimings.length > 0 && this.startWordHighlighting());
+  }
+  stop() {
+    this.stopWordHighlighting(), this.currentAudio && (this.intentionallyStopped = !0, this.currentAudio.pause(), this.currentAudio.src && URL.revokeObjectURL(this.currentAudio.src), this.currentAudio.src = "", this.currentAudio = null), this.pausedState = !1, this.wordTimings = [];
+  }
+  isPlaying() {
+    return this.currentAudio !== null && !this.pausedState;
+  }
+  isPaused() {
+    return this.pausedState;
+  }
+  /**
+   * Update settings dynamically (rate, pitch, voice)
+   * Note: Voice changes require resynthesis, so voice updates are stored but
+   * take effect on the next speak() call. Rate can be applied to current playback.
+   */
+  updateSettings(t) {
+    t.rate !== void 0 && (this.config.rate = t.rate, this.currentAudio && (this.currentAudio.playbackRate = Math.max(0.25, Math.min(4, t.rate)))), t.pitch !== void 0 && (this.config.pitch = t.pitch), t.voice !== void 0 && (this.config.voice = t.voice);
+  }
+}
+class S {
+  constructor() {
+    o(this, "providerId", "server-tts");
+    o(this, "providerName", "Server TTS");
+    o(this, "version", "1.0.0");
+    o(this, "config", null);
+  }
+  /**
+   * Initialize the server TTS provider.
+   *
+   * This is designed to be fast by default (no API calls).
+   * Set validateEndpoint: true in config to test API availability during initialization.
+   *
+   * @performance Default: <10ms, With validation: 100-500ms
+   */
+  async initialize(t) {
+    const e = t;
+    if (!e.apiEndpoint)
+      throw new Error("apiEndpoint is required for ServerTTSProvider");
+    if (this.config = e, e.validateEndpoint && !await this.testAPIAvailability())
+      throw new Error(`Server TTS API not available at ${e.apiEndpoint}`);
+    return new T(e);
+  }
+  /**
+   * Test if API endpoint is available (with timeout).
+   *
+   * @performance 100-500ms depending on network
+   */
+  async testAPIAvailability() {
+    if (!this.config)
+      return !1;
+    try {
+      const t = { ...this.config.headers };
+      this.config.authToken && (t.Authorization = `Bearer ${this.config.authToken}`);
+      const e = new AbortController(), i = setTimeout(() => e.abort(), 5e3);
+      try {
+        const r = await fetch(`${this.config.apiEndpoint}/voices`, {
+          headers: t,
+          signal: e.signal
+        });
+        return clearTimeout(i), r.ok;
+      } catch {
+        return clearTimeout(i), !1;
+      }
+    } catch {
+      return !1;
+    }
+  }
+  supportsFeature(t) {
+    switch (t) {
+      case "pause":
+      case "resume":
+      case "wordBoundary":
+      case "voiceSelection":
+      case "rateControl":
+        return !0;
+      case "pitchControl":
+        return !1;
+      default:
+        return !1;
+    }
+  }
+  getCapabilities() {
+    return {
+      supportsPause: !0,
+      supportsResume: !0,
+      supportsWordBoundary: !0,
+      // ✅ Via speech marks from server
+      supportsVoiceSelection: !0,
+      supportsRateControl: !0,
+      supportsPitchControl: !1,
+      // Depends on server provider
+      maxTextLength: 3e3
+      // Conservative estimate
+    };
+  }
+  destroy() {
+    this.config = null;
+  }
+}
+export {
+  S as ServerTTSProvider
+};

package/dist/index-DF-Dk87f.js

@@ -0,0 +1,192 @@
+var l = Object.defineProperty;
+var n = (i, e, t) => e in i ? l(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var o = (i, e, t) => n(i, typeof e != "symbol" ? e + "" : e, t);
+class d {
+  constructor() {
+    o(this, "providerId", "desmos");
+    o(this, "providerName", "Desmos");
+    o(this, "supportedTypes", [
+      "basic",
+      "scientific",
+      "graphing"
+    ]);
+    o(this, "version", "1.10");
+    o(this, "initialized", !1);
+    o(this, "apiKey");
+    o(this, "proxyEndpoint");
+    o(this, "isDevelopment", !1);
+  }
+  /**
+   * Get the configured API key
+   * @internal Used internally by calculator instances
+   */
+  getApiKey() {
+    return this.apiKey;
+  }
+  /**
+   * Dynamically load the Desmos calculator library
+   * @private
+   */
+  async loadDesmosScript() {
+    return new Promise((e, t) => {
+      const s = document.createElement("script"), r = this.apiKey ? `https://www.desmos.com/api/v1.10/calculator.js?apiKey=${this.apiKey}` : "https://www.desmos.com/api/v1.10/calculator.js";
+      s.src = r, s.async = !0, s.onload = () => {
+        window.Desmos ? (console.log("[DesmosProvider] Desmos API loaded successfully"), e()) : t(new Error("Desmos API loaded but window.Desmos is undefined"));
+      }, s.onerror = () => {
+        t(new Error("Failed to load Desmos API from CDN"));
+      }, document.head.appendChild(s);
+    });
+  }
+  /**
+   * Initialize Desmos library
+   * @param config Configuration with API key (development) or proxy endpoint (production)
+   */
+  async initialize(e) {
+    if (!this.initialized) {
+      if (typeof window > "u")
+        throw new Error("Desmos calculators can only be initialized in the browser");
+      if (this.isDevelopment = process.env.NODE_ENV === "development" || typeof process > "u" || !process.env.NODE_ENV, e?.proxyEndpoint) {
+        this.proxyEndpoint = e.proxyEndpoint;
+        try {
+          const t = await fetch(e.proxyEndpoint);
+          if (!t.ok)
+            throw new Error(`Proxy endpoint returned ${t.status}`);
+          const s = await t.json();
+          this.apiKey = s.apiKey, console.log("[DesmosProvider] Initialized with server-side proxy (SECURE)");
+        } catch (t) {
+          throw new Error(`[DesmosProvider] Failed to fetch API key from proxy: ${t}`);
+        }
+      } else e?.apiKey ? (this.apiKey = e.apiKey, this.isDevelopment ? console.log("[DesmosProvider] Initialized with direct API key (DEVELOPMENT MODE)") : console.error(`⚠️ [DesmosProvider] SECURITY WARNING: API key exposed in client-side code!
+This is insecure for production. Use proxyEndpoint instead.
+See: https://pie-players.dev/docs/calculator-desmos#security`)) : console.warn(`[DesmosProvider] No API key or proxy endpoint provided.
+Production usage requires authentication. Obtain API key from https://www.desmos.com/api
+Recommended: Use proxyEndpoint for production, apiKey for development only.`);
+      window.Desmos || (console.log("[DesmosProvider] Loading Desmos API library..."), await this.loadDesmosScript()), this.initialized = !0;
+    }
+  }
+  /**
+   * Create a calculator instance
+   */
+  async createCalculator(e, t, s) {
+    if (this.initialized || await this.initialize(), !this.supportsType(e))
+      throw new Error(`Desmos does not support calculator type: ${e}`);
+    return new c(this, e, t, s, this.apiKey);
+  }
+  /**
+   * Check if type is supported
+   */
+  supportsType(e) {
+    return this.supportedTypes.includes(e);
+  }
+  /**
+   * Cleanup
+   */
+  destroy() {
+    this.initialized = !1;
+  }
+  /**
+   * Get provider capabilities
+   */
+  getCapabilities() {
+    return {
+      supportsHistory: !1,
+      // Desmos doesn't expose history API
+      supportsGraphing: !0,
+      supportsExpressions: !0,
+      canExport: !0,
+      maxPrecision: 15,
+      inputMethods: ["keyboard", "mouse", "touch"]
+    };
+  }
+}
+class c {
+  constructor(e, t, s, r, a) {
+    o(this, "provider");
+    o(this, "type");
+    o(this, "Desmos");
+    o(this, "calculator");
+    o(this, "container");
+    if (this.provider = e, this.type = t, this.container = s, this.Desmos = window.Desmos, !this.Desmos)
+      throw new Error("Desmos API not available");
+    this._initializeCalculator(r, a);
+  }
+  _initializeCalculator(e, t) {
+    const s = {
+      ...e?.desmos || {},
+      apiKey: t || e?.desmos?.apiKey
+    };
+    switch (e?.restrictedMode && Object.assign(s, {
+      expressionsTopbar: !1,
+      settingsMenu: !1,
+      zoomButtons: !1,
+      expressions: !1,
+      links: !1
+    }), this.type) {
+      case "graphing":
+        this.calculator = this.Desmos.GraphingCalculator(this.container, s);
+        break;
+      case "scientific":
+        this.calculator = this.Desmos.ScientificCalculator(this.container, s);
+        break;
+      case "basic":
+        this.calculator = this.Desmos.FourFunctionCalculator(this.container, s);
+        break;
+      default:
+        throw new Error(`Unsupported calculator type: ${this.type}`);
+    }
+    console.log(`[DesmosCalculator] Created ${this.type} calculator`);
+  }
+  getValue() {
+    if (this.type === "graphing" && this.calculator.getState) {
+      const e = this.calculator.getState();
+      return JSON.stringify(e);
+    }
+    return "";
+  }
+  setValue(e) {
+    if (this.type === "graphing" && this.calculator.setState)
+      try {
+        const t = JSON.parse(e);
+        this.calculator.setState(t);
+      } catch (t) {
+        console.error("[DesmosCalculator] Failed to set state:", t);
+      }
+  }
+  clear() {
+    this.calculator.setBlank && this.calculator.setBlank();
+  }
+  async evaluate(e) {
+    return this.type === "graphing" ? new Promise((t) => {
+      const s = `eval_${Date.now()}`;
+      this.calculator.setExpression({ id: s, latex: e }), setTimeout(() => {
+        const a = this.calculator.HelperExpression({
+          latex: e
+        }).numericValue || e;
+        this.calculator.removeExpression({ id: s }), t(String(a));
+      }, 100);
+    }) : e;
+  }
+  resize() {
+    this.calculator.resize && this.calculator.resize();
+  }
+  exportState() {
+    let e = {};
+    return this.type === "graphing" && this.calculator.getState && (e = this.calculator.getState()), {
+      type: this.type,
+      provider: "desmos",
+      value: this.getValue(),
+      providerState: e
+    };
+  }
+  importState(e) {
+    if (e.provider !== "desmos")
+      throw new Error(`Cannot import state from provider: ${e.provider}`);
+    e.providerState && this.calculator.setState ? this.calculator.setState(e.providerState) : e.value && this.setValue(e.value);
+  }
+  destroy() {
+    this.calculator && this.calculator.destroy && this.calculator.destroy(), this.container.replaceChildren(), console.log("[DesmosCalculator] destroyed");
+  }
+}
+export {
+  d as DesmosCalculatorProvider
+};