@pie-players/pie-section-player-tools-tts-settings 0.3.25 → 0.3.27

package/README.md

@@ -35,8 +35,8 @@ Without adapters, the panel uses the existing route contract:
 
 and applies settings via toolkit coordinator:
 
-- `getToolConfig("tts")`
-- `updateToolConfig("tts", ...)`
+- `getToolConfig("textToSpeech")`
+- `updateToolConfig("textToSpeech", ...)`
 - optional `ensureTTSReady(...)`
 
 ## Custom element API
@@ -73,7 +73,7 @@ Use adapters when your host app cannot or should not expose the default route co
 You can add provider tabs beyond Browser/Polly/Google through `customProviders`.
 
 - Keep provider `id` unique and avoid reserved ids: `browser`, `polly`, `google`.
-- The panel still owns persistence and `updateToolConfig("tts", ...)`.
+- The panel still owns persistence and `updateToolConfig("textToSpeech", ...)`.
 - Provider apply returns normalized output: `{ config, message? }`.
 
 ### JS adapter mode

package/TtsSettingsPanel.svelte

@@ -14,6 +14,14 @@
 
 <script lang="ts">
 	import "@pie-players/pie-theme/components.css";
+	import {
+		DEFAULT_TTS_SPEED_OPTIONS,
+		formatTTSSpeedOptionsAsText,
+		normalizeTTSSpeedOptions,
+		parseTTSSpeedOptionsFromText,
+		resolveTTSRuntimeSettings,
+		type TTSLayoutMode,
+	} from "@pie-players/pie-assessment-toolkit";
 	import { createEventDispatcher, onDestroy, onMount, untrack } from "svelte";
 
 	type BuiltInBackendTab = "browser" | "polly" | "google";
@@ -164,6 +172,9 @@ type PreviewSpeechMark = { time: number; start: number; end: number; value?: str
 		googleVoiceType?: string;
 		googleGender?: string;
 		providerOptions?: Record<string, unknown>;
+		layoutMode?: TTSLayoutMode;
+		/** Inline toolbar speed multipliers; `[]` hides speed buttons. */
+		speedOptions?: number[];
 		[key: string]: unknown;
 	};
 
@@ -186,6 +197,8 @@ type PreviewSpeechMark = { time: number; start: number; end: number; value?: str
 	let browserVoice = $state("");
 	let browserRate = $state(1);
 	let browserPitch = $state(1);
+	let layoutMode = $state<TTSLayoutMode>("left-aligned");
+	let speedOptionsText = $state("");
 
 	let pollyApiEndpoint = $state("");
 	let pollyLanguage = $state("en-US");
@@ -291,6 +304,12 @@ type PreviewSpeechMark = { time: number; start: number; end: number; value?: str
 	};
 	const BUILT_IN_TABS: BuiltInBackendTab[] = ["browser", "polly", "google"];
 const PREVIEW_DEBUG_PREFIX = "[pie-tts-preview]";
+const TTS_LAYOUT_MODES: readonly TTSLayoutMode[] = [
+	"reserved-row",
+	"expanding-row",
+	"floating-overlay",
+	"left-aligned",
+];
 
 function debugPreview(event: string, payload?: Record<string, unknown>): void {
 	if (typeof console === "undefined") return;
@@ -301,6 +320,16 @@ function debugPreview(event: string, payload?: Record<string, unknown>): void {
 	console.debug(`${PREVIEW_DEBUG_PREFIX} ${event}`);
 }
 
+	function normalizeLayoutMode(value: unknown): TTSLayoutMode {
+		return TTS_LAYOUT_MODES.includes(value as TTSLayoutMode)
+			? (value as TTSLayoutMode)
+			: "left-aligned";
+	}
+
+	function resetInlineSpeedOptionsToDefaults(): void {
+		speedOptionsText = formatTTSSpeedOptionsAsText([...DEFAULT_TTS_SPEED_OPTIONS]);
+	}
+
 	const normalizedCustomProviders = $derived.by(() => {
 		const reserved = new Set<string>(BUILT_IN_TABS);
 		const deduped: CustomProviderDescriptor[] = [];
@@ -479,7 +508,7 @@ function debugPreview(event: string, payload?: Record<string, unknown>): void {
 	}
 
 	function initializeFromCoordinator() {
-		const existing = toolkitCoordinator?.getToolConfig?.("tts") || {};
+		const existing = toolkitCoordinator?.getToolConfig?.("textToSpeech") || {};
 		const stored = readStoredSettings();
 		const source = stored ? { ...existing, ...stored } : existing;
 		const resolvedDefaultApiEndpoint = getDefaultApiEndpoint();
@@ -512,6 +541,22 @@ function debugPreview(event: string, payload?: Record<string, unknown>): void {
 						? "standard"
 						: "neural";
 		const sourceProviderOptions = (source?.providerOptions || {}) as Record<string, unknown>;
+		layoutMode = normalizeLayoutMode(source?.layoutMode);
+		const runtimeForSpeed = resolveTTSRuntimeSettings(
+			source && typeof source === "object" ? (source as Record<string, unknown>) : undefined,
+		);
+		if (runtimeForSpeed.speedOptions === undefined) {
+			speedOptionsText = formatTTSSpeedOptionsAsText([...DEFAULT_TTS_SPEED_OPTIONS]);
+		} else if (
+			Array.isArray(runtimeForSpeed.speedOptions) &&
+			runtimeForSpeed.speedOptions.length === 0
+		) {
+			speedOptionsText = "";
+		} else {
+			speedOptionsText = formatTTSSpeedOptionsAsText(
+				normalizeTTSSpeedOptions(runtimeForSpeed.speedOptions),
+			);
+		}
 		const defaultSampleRate = normalizePollySampleRate(
 			Number(source?.sampleRate ?? sourceProviderOptions.sampleRate ?? 24000)
 		);
@@ -570,6 +615,8 @@ function debugPreview(event: string, payload?: Record<string, unknown>): void {
 		setPreviewTextForCurrentTab();
 	}
 
+	const layoutModeReservesRow = $derived(layoutMode === "reserved-row");
+
 	function sameRecordEntries<T>(left: Record<string, T>, right: Record<string, T>): boolean {
 		const leftKeys = Object.keys(left);
 		const rightKeys = Object.keys(right);
@@ -1422,6 +1469,7 @@ function normalizePreviewSpeechMarkOffsets(
 
 		isApplying = true;
 		try {
+			const appliedSpeedOptions = parseTTSSpeedOptionsFromText(speedOptionsText);
 			if (!isBuiltInTab(activeTab)) {
 				const provider = getCustomProviderOrThrow(activeTab);
 				let next: ProviderApplyResult | undefined;
@@ -1436,13 +1484,17 @@ function normalizePreviewSpeechMarkOffsets(
 						`Custom provider '${provider.id}' did not return apply config.`
 					);
 				}
-				toolkitCoordinator.updateToolConfig("tts", {
+				toolkitCoordinator.updateToolConfig("textToSpeech", {
 					enabled: true,
-					...next.config
+					...next.config,
+					layoutMode,
+					speedOptions: appliedSpeedOptions,
 				});
 				persistSettings({
 					backend: provider.id,
-					...(next.config || {})
+					...(next.config || {}),
+					layoutMode,
+					speedOptions: appliedSpeedOptions,
 				});
 				applyMessage = next.message || `Applied ${provider.label} TTS settings.`;
 			} else if (activeTab === "browser") {
@@ -1453,9 +1505,11 @@ function normalizePreviewSpeechMarkOffsets(
 					defaultVoice: resolveVoiceForBackend("browser"),
 					rate: normalizeRate(browserRate),
 					pitch: normalizePitch(browserPitch),
-					transportMode: "pie" as const
+					transportMode: "pie" as const,
+					layoutMode,
+					speedOptions: appliedSpeedOptions,
 				};
-				toolkitCoordinator.updateToolConfig("tts", {
+				toolkitCoordinator.updateToolConfig("textToSpeech", {
 					enabled: true,
 					...next
 				});
@@ -1464,7 +1518,6 @@ function normalizePreviewSpeechMarkOffsets(
 				const next = {
 					backend: "polly" as const,
 					serverProvider: "polly" as const,
-					provider: "polly" as const,
 					apiEndpoint: normalizeApiEndpoint(pollyApiEndpoint, getDefaultApiEndpoint()),
 					transportMode: "pie" as const,
 					endpointMode: "synthesizePath" as const,
@@ -1481,9 +1534,11 @@ function normalizePreviewSpeechMarkOffsets(
 						sampleRate: normalizePollySampleRate(pollySampleRate),
 						format: pollyFormat,
 						speechMarkTypes: getPollySpeechMarkTypes()
-					}
+					},
+					layoutMode,
+					speedOptions: appliedSpeedOptions,
 				};
-				toolkitCoordinator.updateToolConfig("tts", {
+				toolkitCoordinator.updateToolConfig("textToSpeech", {
 					enabled: true,
 					...next
 				});
@@ -1492,7 +1547,6 @@ function normalizePreviewSpeechMarkOffsets(
 				const next = {
 					backend: "google" as const,
 					serverProvider: "google" as const,
-					provider: "google" as const,
 					apiEndpoint: normalizeApiEndpoint(googleApiEndpoint, getDefaultApiEndpoint()),
 					transportMode: "pie" as const,
 					endpointMode: "synthesizePath" as const,
@@ -1501,15 +1555,19 @@ function normalizePreviewSpeechMarkOffsets(
 					rate: normalizeRate(googleRate),
 					language: googleLanguage || undefined,
 					googleVoiceType,
-					googleGender
+					googleGender,
+					layoutMode,
+					speedOptions: appliedSpeedOptions,
 				};
-				toolkitCoordinator.updateToolConfig("tts", {
+				toolkitCoordinator.updateToolConfig("textToSpeech", {
 					enabled: true,
 					...next
 				});
 				persistSettings(next);
 			}
-			await toolkitCoordinator?.ensureTTSReady?.(toolkitCoordinator?.getToolConfig?.("tts"));
+			await toolkitCoordinator?.ensureTTSReady?.(
+				toolkitCoordinator?.getToolConfig?.("textToSpeech"),
+			);
 			if (isBuiltInTab(activeTab)) {
 				applyMessage = `Applied ${activeTab} TTS settings.`;
 			}
@@ -1602,6 +1660,48 @@ function normalizePreviewSpeechMarkOffsets(
 			</button>
 		</div>
 
+		<div class="pie-tts-fieldset fieldset bg-base-200 border border-base-300 rounded-box">
+			<div class="pie-tts-field">
+				<label class="pie-tts-label" for="tts-layout-mode">Toolbar layout mode</label>
+				<select
+					id="tts-layout-mode"
+					class="select select-sm select-bordered w-full"
+					bind:value={layoutMode}
+				>
+					<option value="reserved-row">Reserved row</option>
+					<option value="expanding-row">Expanding row</option>
+					<option value="floating-overlay">Floating overlay</option>
+					<option value="left-aligned">Left-aligned controls</option>
+				</select>
+				<div class="text-xs opacity-75">
+					Item header row reservation: {layoutModeReservesRow ? "Enabled" : "Disabled"}
+				</div>
+			</div>
+			<div class="pie-tts-field">
+				<label class="pie-tts-label" for="tts-inline-speed-options">Inline speed buttons</label>
+				<input
+					id="tts-inline-speed-options"
+					class="input input-sm input-bordered w-full"
+					bind:value={speedOptionsText}
+					placeholder="0.8, 1.25"
+					autocomplete="off"
+				/>
+				<div class="mt-1 flex flex-wrap items-center gap-2">
+					<span class="text-xs opacity-75">
+						Comma or semicolon-separated multipliers (1× is not shown as a button). Leave empty to
+						hide speed buttons.
+					</span>
+					<button
+						type="button"
+						class="btn btn-xs btn-ghost"
+						onclick={resetInlineSpeedOptionsToDefaults}
+					>
+						Reset to defaults
+					</button>
+				</div>
+			</div>
+		</div>
+
 		<div class="join pie-tts-tabs">
 			{#each providerTabs as provider}
 				<button

package/dist/defineProperty-CyepwRr5.js

@@ -0,0 +1,33 @@
+function o(e) {
+  "@babel/helpers - typeof";
+  return o = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(t) {
+    return typeof t;
+  } : function(t) {
+    return t && typeof Symbol == "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
+  }, o(e);
+}
+function i(e, t) {
+  if (o(e) != "object" || !e) return e;
+  var r = e[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var n = r.call(e, t || "default");
+    if (o(n) != "object") return n;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (t === "string" ? String : Number)(e);
+}
+function u(e) {
+  var t = i(e, "string");
+  return o(t) == "symbol" ? t : t + "";
+}
+function f(e, t, r) {
+  return (t = u(t)) in e ? Object.defineProperty(e, t, {
+    value: r,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[t] = r, e;
+}
+export {
+  f as t
+};