@pie-players/pie-tool-ruler 0.3.19 → 0.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pie-players/pie-tool-ruler",
-	"version": "0.3.19",
+	"version": "0.3.21",
 	"type": "module",
 	"description": "Ruler measurement tool for PIE assessment player",
 	"repository": {
@@ -42,9 +42,9 @@
 	"unpkg": "./dist/tool-ruler.js",
 	"jsdelivr": "./dist/tool-ruler.js",
 	"dependencies": {
-		"@pie-players/pie-assessment-toolkit": "0.3.19",
-		"@pie-players/pie-context": "0.3.19",
-		"@pie-players/pie-players-shared": "0.3.19",
+		"@pie-players/pie-assessment-toolkit": "0.3.21",
+		"@pie-players/pie-context": "0.3.21",
+		"@pie-players/pie-players-shared": "0.3.21",
 		"moveable": "^0.53.0"
 	},
 	"types": "./dist/index.d.ts",
@@ -56,10 +56,10 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.3.10",
-		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"svelte": "^5.53.7",
+		"@sveltejs/vite-plugin-svelte": "^7.0.0",
+		"svelte": "^5.54.0",
 		"typescript": "^5.9.3",
-		"vite": "^7.3.1",
+		"vite": "^8.0.1",
 		"vite-plugin-dts": "^4.5.4"
 	},
 	"homepage": "https://github.com/pie-framework/pie-players/tree/master/packages/tool-ruler#readme",

package/tool-ruler.svelte

@@ -100,6 +100,10 @@
 		// Associate the moveable instance with the tool ID
 		const controlBox = moveable.getControlBoxElement();
 		controlBox?.setAttribute('data-moveablejs-tool-control-box', toolId);
+		const surface = containerEl.getAttribute('data-pie-tool-surface');
+		if (surface) {
+			controlBox?.setAttribute('data-pie-tool-surface', surface);
+		}
 
 		moveable.on('drag', ({ target, transform }) => {
 			if (target) {
@@ -354,11 +358,6 @@
 		width: 540px; /* Matching production implementation frame width */
 	}
 
-	.pie-tool-ruler:focus {
-		outline: 3px solid var(--pie-button-focus-outline, var(--pie-primary, #4A90E2));
-		outline-offset: 2px;
-	}
-
 	.pie-tool-ruler:focus-visible {
 		outline: 3px solid var(--pie-button-focus-outline, var(--pie-primary, #4A90E2));
 		outline-offset: 2px;
@@ -431,8 +430,8 @@
 
 	/* Moveable.js control styling (matching production implementation) */
 	/* Production implementation uses black (--moveable-color: #000) globally, not red for ruler */
-	:global(body .moveable-control-box[data-moveablejs-tool-control-box="ruler"]) {
-		--moveable-color: #000; /* Black, matching production implementation default */
+	:global(body .moveable-control-box[data-pie-tool-surface="frameless"]) {
+		--moveable-color: transparent;
 		z-index: 2003; /* ZIndexLayer.CONTROL */
 	}
 

package/dist/index-BRKsQ6Im.js

@@ -1,460 +0,0 @@
-var k = Object.defineProperty;
-var A = (r, t, e) => t in r ? k(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var a = (r, t, e) => A(r, typeof t != "symbol" ? t + "" : t, e);
-const b = (r) => {
-  const e = (r.providerOptions && typeof r.providerOptions == "object" ? r.providerOptions : {}).__pieTelemetry;
-  return typeof e == "function" ? e : void 0;
-}, R = {
-  pie: 3e3,
-  custom: 3e3
-}, v = (r) => r.replace(/\/+$/, ""), I = (r) => {
-  const t = v(r.apiEndpoint), e = (r.provider || "").toLowerCase();
-  return e === "polly" || e === "google" ? `${t}/${e}/voices` : `${t}/voices`;
-}, w = (r) => r.transportMode === "custom" ? "custom" : r.transportMode === "pie" ? "pie" : r.provider === "custom" ? "custom" : "pie", S = (r, t) => r.endpointMode ? r.endpointMode : t === "custom" ? "rootPost" : "synthesizePath", M = (r, t) => r.endpointValidationMode ? r.endpointValidationMode : t === "custom" ? "none" : "voices", E = (r) => {
-  const t = r.providerOptions || {};
-  if (typeof t.speedRate == "string")
-    return t.speedRate;
-  const e = Number(r.rate ?? 1);
-  return !Number.isFinite(e) || e <= 0.95 ? "slow" : e >= 1.5 ? "fast" : "medium";
-}, P = (r) => {
-  const t = [];
-  let e = 0;
-  const o = r.split(`
-`).map((i) => i.trim()).filter(Boolean);
-  for (const i of o)
-    try {
-      const s = JSON.parse(i), d = typeof s.type == "string" ? s.type : "word", n = typeof s.time == "number" && Number.isFinite(s.time) ? s.time : 0, c = typeof s.value == "string" ? s.value : "", l = typeof s.start == "number" && Number.isFinite(s.start) ? s.start : null, u = typeof s.end == "number" && Number.isFinite(s.end) ? s.end : null, m = l ?? e, y = u ?? m + Math.max(1, c.length || String(s.value || "").length);
-      e = Math.max(y + 1, e), t.push({
-        time: n,
-        type: d,
-        start: m,
-        end: y,
-        value: c
-      });
-    } catch {
-    }
-  return t;
-}, O = {
-  id: "pie",
-  resolveSynthesisUrl: (r) => {
-    const t = S(r, "pie"), e = v(r.apiEndpoint);
-    return t === "rootPost" ? e : `${e}/synthesize`;
-  },
-  buildRequestBody: (r, t) => {
-    const e = t.providerOptions || {}, o = typeof t.engine == "string" ? t.engine : typeof e.engine == "string" ? e.engine : void 0, i = typeof e.sampleRate == "number" && Number.isFinite(e.sampleRate) ? e.sampleRate : void 0, s = e.format === "mp3" || e.format === "ogg" || e.format === "pcm" ? e.format : void 0, d = Array.isArray(e.speechMarkTypes) ? e.speechMarkTypes.filter((n) => n === "word" || n === "sentence" || n === "ssml") : void 0;
-    return {
-      text: r,
-      provider: t.provider || "polly",
-      voice: t.voice,
-      language: t.language,
-      rate: t.rate,
-      engine: o,
-      sampleRate: i,
-      format: s,
-      speechMarkTypes: d,
-      includeSpeechMarks: !0
-    };
-  },
-  parseResponse: async (r) => {
-    const t = await r.json();
-    return {
-      audio: {
-        kind: "base64",
-        data: t.audio,
-        contentType: t.contentType
-      },
-      speechMarks: Array.isArray(t.speechMarks) ? t.speechMarks : []
-    };
-  }
-}, C = {
-  id: "custom",
-  resolveSynthesisUrl: (r) => {
-    const t = S(r, "custom"), e = v(r.apiEndpoint);
-    return t === "synthesizePath" ? `${e}/synthesize` : e;
-  },
-  buildRequestBody: (r, t) => {
-    const e = t.providerOptions || {}, o = typeof e.lang_id == "string" ? e.lang_id : t.language || "en-US", i = typeof e.cache == "boolean" ? e.cache : !0;
-    return {
-      text: r,
-      speedRate: E(t),
-      lang_id: o,
-      cache: i
-    };
-  },
-  parseResponse: async (r, t, e, o) => {
-    const i = await r.json(), s = {};
-    if (t.includeAuthOnAssetFetch)
-      for (const [n, c] of Object.entries(e))
-        n.toLowerCase() === "authorization" && (s[n] = c);
-    let d = [];
-    if (typeof i.word == "string" && i.word.length > 0) {
-      const n = await fetch(i.word, {
-        headers: s,
-        signal: o
-      });
-      if (n.ok) {
-        const c = await n.text();
-        d = P(c);
-      }
-    }
-    return {
-      audio: {
-        kind: "url",
-        url: i.audioContent
-      },
-      speechMarks: d
-    };
-  }
-}, B = {
-  pie: O,
-  custom: C
-};
-class z {
-  constructor(t, e) {
-    a(this, "config");
-    a(this, "adapter");
-    a(this, "currentAudio", null);
-    a(this, "pausedState", !1);
-    a(this, "wordTimings", []);
-    a(this, "highlightInterval", null);
-    a(this, "intentionallyStopped", !1);
-    a(this, "activeSynthesisController", null);
-    a(this, "synthesisRunId", 0);
-    a(this, "telemetryReporter");
-    a(this, "onWordBoundary");
-    this.config = t, this.adapter = e, this.telemetryReporter = b(t);
-  }
-  async emitTelemetry(t, e) {
-    try {
-      await this.telemetryReporter?.(t, e);
-    } catch (o) {
-      console.warn("[ServerTTSProvider] telemetry callback failed:", o);
-    }
-  }
-  async speak(t) {
-    this.stop(), this.intentionallyStopped = !1;
-    const e = ++this.synthesisRunId, o = new AbortController();
-    this.activeSynthesisController = o;
-    const { audioUrl: i, wordTimings: s } = await this.synthesizeSpeech(t, o.signal, e);
-    if (e !== this.synthesisRunId) {
-      URL.revokeObjectURL(i);
-      return;
-    }
-    const d = this.config.rate || 1;
-    return this.wordTimings = s.map((n) => ({
-      ...n,
-      time: n.time / d
-    })), new Promise((n, c) => {
-      const l = new Audio(i);
-      this.currentAudio = l, this.config.rate && (l.playbackRate = Math.max(0.25, Math.min(4, this.config.rate))), this.config.volume !== void 0 && (l.volume = Math.max(0, Math.min(1, this.config.volume))), l.onplay = () => {
-        this.pausedState = !1, this.onWordBoundary && this.wordTimings.length > 0 && this.startWordHighlighting();
-      }, l.onended = () => {
-        this.stopWordHighlighting(), URL.revokeObjectURL(i), this.currentAudio = null, this.wordTimings = [], n();
-      }, l.onerror = (u) => {
-        this.stopWordHighlighting(), URL.revokeObjectURL(i), this.currentAudio = null, this.wordTimings = [], this.intentionallyStopped ? n() : c(new Error("Failed to play audio from server"));
-      }, l.onpause = () => {
-        this.stopWordHighlighting(), this.pausedState = !0;
-      }, l.play().catch(c);
-    });
-  }
-  /**
-   * Call server API to synthesize speech
-   */
-  async synthesizeSpeech(t, e, o) {
-    const i = Date.now();
-    await this.emitTelemetry("pie-tool-backend-call-start", {
-      toolId: "tts",
-      backend: this.config.provider || "server",
-      operation: "synthesize-speech"
-    });
-    const s = {
-      "Content-Type": "application/json",
-      ...this.config.headers
-    };
-    this.config.authToken && (s.Authorization = `Bearer ${this.config.authToken}`);
-    const d = this.adapter.resolveSynthesisUrl(this.config), n = this.adapter.buildRequestBody(t, this.config), c = await (async () => {
-      try {
-        return await fetch(d, {
-          method: "POST",
-          headers: s,
-          body: JSON.stringify(n),
-          signal: e
-        });
-      } catch (h) {
-        throw await this.emitTelemetry("pie-tool-backend-call-error", {
-          toolId: "tts",
-          backend: this.config.provider || "server",
-          operation: "synthesize-speech",
-          duration: Date.now() - i,
-          errorType: "TTSBackendNetworkError",
-          message: h instanceof Error ? h.message : String(h)
-        }), h;
-      }
-    })();
-    if (!c.ok) {
-      const h = await c.json().catch(() => ({})), p = h.message || h.error?.message || `Server returned ${c.status}`;
-      throw await this.emitTelemetry("pie-tool-backend-call-error", {
-        toolId: "tts",
-        backend: this.config.provider || "server",
-        operation: "synthesize-speech",
-        duration: Date.now() - i,
-        statusCode: c.status,
-        errorType: "TTSBackendRequestError",
-        message: p
-      }), new Error(p);
-    }
-    const l = await this.adapter.parseResponse(c, this.config, s, e);
-    if (o !== this.synthesisRunId || e.aborted)
-      throw new Error("Synthesis superseded by a newer request");
-    let u;
-    if (l.audio.kind === "base64")
-      u = this.base64ToBlob(l.audio.data, l.audio.contentType);
-    else {
-      const h = l.audio.url, p = Date.now();
-      await this.emitTelemetry("pie-tool-backend-call-start", {
-        toolId: "tts",
-        backend: this.config.provider || "server",
-        operation: "fetch-synthesized-audio-asset"
-      });
-      const T = {};
-      this.config.includeAuthOnAssetFetch && this.config.authToken && (T.Authorization = `Bearer ${this.config.authToken}`);
-      const g = await (async () => {
-        try {
-          return await fetch(h, {
-            headers: T,
-            signal: e
-          });
-        } catch (f) {
-          throw await this.emitTelemetry("pie-tool-backend-call-error", {
-            toolId: "tts",
-            backend: this.config.provider || "server",
-            operation: "fetch-synthesized-audio-asset",
-            duration: Date.now() - p,
-            errorType: "TTSAssetNetworkError",
-            message: f instanceof Error ? f.message : String(f)
-          }), f;
-        }
-      })();
-      if (!g.ok)
-        throw await this.emitTelemetry("pie-tool-backend-call-error", {
-          toolId: "tts",
-          backend: this.config.provider || "server",
-          operation: "fetch-synthesized-audio-asset",
-          duration: Date.now() - p,
-          statusCode: g.status,
-          errorType: "TTSAssetFetchError",
-          message: `Failed to download synthesized audio (${g.status})`
-        }), new Error(`Failed to download synthesized audio (${g.status})`);
-      u = await g.blob(), await this.emitTelemetry("pie-tool-backend-call-success", {
-        toolId: "tts",
-        backend: this.config.provider || "server",
-        operation: "fetch-synthesized-audio-asset",
-        duration: Date.now() - p
-      });
-    }
-    const m = URL.createObjectURL(u), y = this.parseSpeechMarks(l.speechMarks);
-    return await this.emitTelemetry("pie-tool-backend-call-success", {
-      toolId: "tts",
-      backend: this.config.provider || "server",
-      operation: "synthesize-speech",
-      duration: Date.now() - i
-    }), { audioUrl: m, wordTimings: y };
-  }
-  /**
-   * Convert base64 to Blob
-   */
-  base64ToBlob(t, e) {
-    const o = atob(t), i = new Array(o.length);
-    for (let d = 0; d < o.length; d++)
-      i[d] = o.charCodeAt(d);
-    const s = new Uint8Array(i);
-    return new Blob([s], { type: e });
-  }
-  /**
-   * Parse speech marks into word timings
-   */
-  parseSpeechMarks(t) {
-    return t.filter((e) => e.type === "word").map((e, o) => ({
-      time: e.time,
-      wordIndex: o,
-      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 o = 0; o < this.wordTimings.length; o++) {
-        const i = this.wordTimings[o];
-        if (e >= i.time && o > t) {
-          this.onWordBoundary && (console.log("[ServerTTSProvider] Highlighting word at charIndex:", i.charIndex, "length:", i.length, "time:", i.time, "currentTime:", e), this.onWordBoundary("", i.charIndex, i.length)), t = o;
-          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.synthesisRunId += 1, this.activeSynthesisController && (this.activeSynthesisController.abort(), this.activeSynthesisController = null), 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 W {
-  constructor() {
-    a(this, "providerId", "server-tts");
-    a(this, "providerName", "Server TTS");
-    a(this, "version", "1.0.0");
-    a(this, "config", null);
-    a(this, "adapter", null);
-    a(this, "telemetryReporter");
-  }
-  async emitTelemetry(t, e) {
-    try {
-      await this.telemetryReporter?.(t, e);
-    } catch (o) {
-      console.warn("[ServerTTSProvider] telemetry callback failed:", o);
-    }
-  }
-  /**
-   * 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");
-    this.config = e, this.telemetryReporter = b(e);
-    const o = w(e);
-    if (this.adapter = B[o], e.validateEndpoint) {
-      const i = Date.now();
-      if (await this.emitTelemetry("pie-tool-backend-call-start", {
-        toolId: "tts",
-        backend: e.provider || "server",
-        operation: "validate-endpoint"
-      }), !await this.testAPIAvailability())
-        throw await this.emitTelemetry("pie-tool-backend-call-error", {
-          toolId: "tts",
-          backend: e.provider || "server",
-          operation: "validate-endpoint",
-          duration: Date.now() - i,
-          errorType: "TTSEndpointValidationError",
-          message: `Server TTS API not available at ${e.apiEndpoint}`
-        }), new Error(`Server TTS API not available at ${e.apiEndpoint}`);
-      await this.emitTelemetry("pie-tool-backend-call-success", {
-        toolId: "tts",
-        backend: e.provider || "server",
-        operation: "validate-endpoint",
-        duration: Date.now() - i
-      });
-    }
-    return new z(e, this.adapter);
-  }
-  /**
-   * Test if API endpoint is available (with timeout).
-   *
-   * @performance 100-500ms depending on network
-   */
-  async testAPIAvailability() {
-    if (!this.config || !this.adapter)
-      return !1;
-    try {
-      const t = { ...this.config.headers };
-      this.config.authToken && (t.Authorization = `Bearer ${this.config.authToken}`);
-      const e = new AbortController(), o = setTimeout(() => e.abort(), 5e3), i = M(this.config, this.adapter.id);
-      if (i === "none")
-        return clearTimeout(o), !0;
-      const s = i === "voices" ? I(this.config) : this.adapter.resolveSynthesisUrl(this.config), d = i === "voices" ? "GET" : "OPTIONS";
-      try {
-        const n = await fetch(s, {
-          method: d,
-          headers: t,
-          signal: e.signal
-        });
-        return clearTimeout(o), n.ok || n.status === 405;
-      } catch {
-        return clearTimeout(o), !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() {
-    const t = this.config ? w(this.config) : "pie";
-    return {
-      supportsPause: !0,
-      supportsResume: !0,
-      supportsWordBoundary: !0,
-      // ✅ Via speech marks from server
-      supportsVoiceSelection: !0,
-      supportsRateControl: !0,
-      supportsPitchControl: !1,
-      // Depends on server provider
-      maxTextLength: R[t]
-    };
-  }
-  destroy() {
-    this.config = null, this.adapter = null, this.telemetryReporter = void 0;
-  }
-}
-export {
-  W as ServerTTSProvider
-};