@stellartech/voice-widget-directus 1.0.2 → 1.0.4

package/README.md

@@ -0,0 +1,46 @@
+# @stellartech/voice-widget-directus
+
+Voice generation widget with model/voice selection and audio preview for Directus.
+
+## Installation
+
+```bash
+npm install @stellartech/voice-widget-directus
+```
+
+## Features
+
+- Multiple TTS provider support (Gemini, ElevenLabs)
+- Voice selection with audio sample previews
+- Tone and style customization
+- Full voiceover generation with progress tracking
+- Async generation with background processing
+- Audio playback and variant management
+
+## Requirements
+
+- Directus ^11.0.0
+- Vue ^3.4.0
+
+## Configuration
+
+The widget requires the following collections in your Directus instance:
+
+- `Voices` - Available voice options with samples
+- `VoiceTones` - Tone presets for voice generation
+- `VoiceStyles` - Style presets for voice generation
+- `VoiceVariants` - Generated voice variants storage
+- `AudioFiles` - Audio file records
+
+## Usage
+
+After installation, the interface will be available in your Directus instance as a custom interface type. Configure it on a JSON field to enable voice generation for your content.
+
+### Widget Options
+
+- **Voices Collection**: Collection containing voice definitions
+- **Flow ID**: Directus Flow ID for voice generation proxy
+
+## License
+
+MIT

package/dist/index.js

@@ -455,7 +455,7 @@ const VOICE_MODELS = [
   { id: "elevenlabs", name: "ElevenLabs" }
 ];
 const SAMPLE_TEXT = "Hello! This is a sample of my voice. I hope you enjoy listening to how I sound.";
-const DEFAULT_FLOW_ID = "fada8e65-5ce2-477d-b5db-bf7f64a23ffa";
+const DEFAULT_FLOW_ID = "7fa08903-ed7d-4632-81fc-f422d873b8f8";
 function useVoicingApi(api) {
   async function fetchVoices(collection = "Voices") {
     try {
@@ -525,17 +525,29 @@ function useVoicingApi(api) {
       return [];
     }
   }
-  async function generateVoiceSample(voiceId, provider, flowId = DEFAULT_FLOW_ID) {
+  async function generateVoiceSample(voiceId, provider, flowId = DEFAULT_FLOW_ID, lessonId, collection) {
     const effectiveFlowId = flowId && flowId.trim() ? flowId.trim() : DEFAULT_FLOW_ID;
     if (!effectiveFlowId) {
       throw new Error("Voice flow ID is not configured. Set it in Widget Config or in the Flow ID field.");
     }
+    if (!collection) {
+      throw new Error("collection is required but was not provided");
+    }
     const voicingPayload = {
       texts: [SAMPLE_TEXT],
       provider,
       preprocessing: false,
       title: `Voice Sample - ${voiceId}`,
-      audio_files_collection: "AudioFiles"
+      audio_files_collection: "AudioFiles",
+      // Include lesson context for callback tracking
+      lesson_id: lessonId || null,
+      collection,
+      voice_config: {
+        provider,
+        voice_id: voiceId,
+        style: "neutral",
+        is_sample: true
+      }
     };
     if (provider === "gemini") {
       voicingPayload.speakers = [{ voice: voiceId, name: "Sample", style: "neutral" }];
@@ -566,7 +578,8 @@ function useVoicingApi(api) {
         const url = await resolveAudioFileUrl(audioFileId);
         return { url, audioFileId };
       }
-      throw new Error("No audio file returned from voice generation. Response: " + JSON.stringify(flowResponse));
+      console.log("[Voice Widget] Sample processing async, callback will update Voices.example");
+      return { url: "", audioFileId: "" };
     } catch (e) {
       console.error("Failed to generate voice sample:", e);
       throw new Error(e.response?.data?.detail || e.message || "Failed to generate sample");
@@ -578,7 +591,10 @@ function useVoicingApi(api) {
     if (!effectiveFlowId) {
       throw new Error("Voice flow ID is not configured. Set it in Widget Config or in the Flow ID field.");
     }
-    const collection = request.collection || "SM_Lessons";
+    if (!request.collection) {
+      throw new Error("collection is required but was not provided");
+    }
+    const collection = request.collection;
     let texts = [];
     let lessonTitle = `Lesson ${request.lessonId}`;
     try {
@@ -672,17 +688,30 @@ function useVoicingApi(api) {
     return `/assets/${audioFilesRecordId}`;
   }
   async function fetchVoiceVariants(lessonId) {
+    const lessonIdStr = String(lessonId);
+    console.log("[Voice Widget] ========== fetchVoiceVariants START ==========");
+    console.log("[Voice Widget] Lesson ID:", lessonIdStr);
+    console.log("[Voice Widget] API object exists:", !!api);
     try {
-      const response = await api.get("/items/VoiceVariants", {
-        params: {
-          filter: { lesson_id: { _eq: lessonId } },
-          sort: ["-date_created"],
-          fields: ["id", "lesson_id", "audio_file_id", "voice_config", "callback_data", "date_created"]
-        }
-      });
-      return response.data.data || [];
+      console.log('[Voice Widget] Calling api.get("/items/VoiceVariants")...');
+      const response = await api.get("/items/VoiceVariants");
+      console.log("[Voice Widget] Response status:", response?.status);
+      console.log("[Voice Widget] Response data type:", typeof response?.data);
+      console.log("[Voice Widget] Response.data.data type:", typeof response?.data?.data);
+      const allData = response.data?.data || response.data || [];
+      console.log("[Voice Widget] Extracted data length:", allData?.length);
+      if (allData.length > 0) {
+        console.log("[Voice Widget] First item:", JSON.stringify(allData[0]));
+      }
+      const filtered = allData.filter((v) => String(v.lesson_id) === lessonIdStr);
+      console.log("[Voice Widget] Filtered count:", filtered.length);
+      console.log("[Voice Widget] ========== fetchVoiceVariants END ==========");
+      return filtered;
     } catch (error) {
-      console.error("Failed to fetch voice variants:", error);
+      console.error("[Voice Widget] ========== fetchVoiceVariants ERROR ==========");
+      console.error("[Voice Widget] Error:", error);
+      console.error("[Voice Widget] Error message:", error?.message);
+      console.error("[Voice Widget] Error response:", error?.response?.status, error?.response?.data);
       return [];
     }
   }
@@ -699,13 +728,13 @@ function useVoicingApi(api) {
         console.warn("[Voice Widget] Could not get file UUID from AudioFiles record. fileField:", fileField);
         return;
       }
-      console.log(`[Voice Widget] Patching ${collection}/${voiceId} with sample_file=${fileUuid}`);
+      console.log(`[Voice Widget] Patching ${collection}/${voiceId} with example=${fileUuid}`);
       await api.patch(`/items/${collection}/${voiceId}`, {
-        sample_file: fileUuid
+        example: fileUuid
       });
-      console.log(`[Voice Widget] Updated voice ${voiceId} sample_file to ${fileUuid}`);
+      console.log(`[Voice Widget] Updated voice ${voiceId} example to ${fileUuid}`);
     } catch (error) {
-      console.error("[Voice Widget] Failed to update voice sample_file:", error);
+      console.error("[Voice Widget] Failed to update voice example:", error);
     }
   }
   async function deleteVoiceVariant(variantId) {
@@ -768,6 +797,59 @@ function useVoicingApi(api) {
       return null;
     }
   }
+  async function setVoiceExampleStatus(voiceId, status, collection = "Voices") {
+    try {
+      await api.patch(`/items/${collection}/${voiceId}`, {
+        example_status: status
+      });
+      console.log(`[Voice Widget] Set voice ${voiceId} example_status to ${status}`);
+    } catch (error) {
+      console.error("[Voice Widget] Failed to set example_status:", error);
+    }
+  }
+  async function createPendingVoiceVariant(lessonId, voiceConfig) {
+    try {
+      const response = await api.post("/items/VoiceVariants", {
+        lesson_id: lessonId,
+        voice_config: voiceConfig,
+        status: "processing"
+      });
+      const variantId = response.data.data?.id;
+      console.log(`[Voice Widget] Created pending VoiceVariant: ${variantId}`);
+      return variantId;
+    } catch (error) {
+      console.error("[Voice Widget] Failed to create pending VoiceVariant:", error);
+      return null;
+    }
+  }
+  async function fetchPendingVariants(lessonId) {
+    const lessonIdStr = String(lessonId);
+    console.log("[Voice Widget] ========== fetchPendingVariants START ==========");
+    try {
+      const response = await api.get("/items/VoiceVariants", {
+        params: {
+          fields: "id,lesson_id,voice_config,status,date_created",
+          limit: -1
+        }
+      });
+      const allData = response.data?.data || [];
+      console.log("[Voice Widget] fetchPendingVariants: got", allData.length, "total variants");
+      console.log("[Voice Widget] All statuses:", allData.map((v) => v.status));
+      const pending = allData.filter((v) => {
+        const matches = String(v.lesson_id) === lessonIdStr && v.status === "processing";
+        if (matches) {
+          console.log("[Voice Widget] Found PROCESSING variant:", v.id, "status:", v.status);
+        }
+        return matches;
+      });
+      console.log("[Voice Widget] fetchPendingVariants: returning", pending.length, "processing variants");
+      console.log("[Voice Widget] ========== fetchPendingVariants END ==========");
+      return pending;
+    } catch (error) {
+      console.error("[Voice Widget] Failed to fetch pending variants:", error);
+      return [];
+    }
+  }
   return {
     fetchVoices,
     fetchFlowId,
@@ -782,7 +864,10 @@ function useVoicingApi(api) {
     deleteVoiceVariant,
     createVoiceVariant,
     linkAudioToLesson,
-    pollVoicingJob
+    pollVoicingJob,
+    setVoiceExampleStatus,
+    createPendingVoiceVariant,
+    fetchPendingVariants
   };
 }
 
@@ -877,14 +962,17 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       deleteVoiceVariant,
       createVoiceVariant,
       linkAudioToLesson,
-      pollVoicingJob
+      pollVoicingJob,
+      setVoiceExampleStatus,
+      createPendingVoiceVariant,
+      fetchPendingVariants
     } = useVoicingApi(api);
     const currentMode = ref("selection");
     const loading = ref(true);
     const initError = ref(null);
     const headerExpanded = ref(!props.defaultCollapsed);
     const savingUrl = ref(false);
-    const flowId = ref("fada8e65-5ce2-477d-b5db-bf7f64a23ffa");
+    const flowId = ref("7fa08903-ed7d-4632-81fc-f422d873b8f8");
     const selectedModel = ref("gemini");
     const selectedVoiceId = ref(null);
     const voices = ref([]);
@@ -905,9 +993,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const hasExistingVoices = ref(false);
     const allVariants = ref([]);
     const currentVariantIndex = ref(0);
-    const currentJobId = ref(null);
+    ref(null);
     const isPollingProgress = ref(false);
     const progressStatus = ref("");
+    let samplePollingInterval = null;
+    let voiceoverPollingInterval = null;
     const selectedVariant = computed(() => allVariants.value[currentVariantIndex.value]);
     const currentVoices = computed(() => {
       return voices.value.filter((v) => v.provider === selectedModel.value);
@@ -947,24 +1037,125 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
       generatingSampleFor.value = voiceId;
       try {
-        const effectiveFlowId = flowId.value && flowId.value.trim() ? flowId.value.trim() : void 0;
-        const { url, audioFileId } = await generateVoiceSample(
-          voice.voice_id,
-          selectedModel.value,
-          effectiveFlowId
-        );
-        voiceSamples.value[voiceId] = url;
-        await updateVoiceSampleFile(voiceId, audioFileId, props.voicesCollection);
+        await setVoiceExampleStatus(voiceId, "processing", props.voicesCollection);
         const voiceIndex = voices.value.findIndex((v) => v.id === voiceId);
         if (voiceIndex !== -1) {
-          voices.value[voiceIndex].sample_file = url.replace("/assets/", "");
+          voices.value[voiceIndex].example_status = "processing";
         }
+        const effectiveFlowId = flowId.value && flowId.value.trim() ? flowId.value.trim() : void 0;
+        if (!props.collection) {
+          throw new Error("collection is required but was not provided");
+        }
+        generateVoiceSample(
+          voice.voice,
+          selectedModel.value,
+          effectiveFlowId,
+          props.primaryKey,
+          props.collection
+        ).then(() => {
+          console.log("[Voice Widget] Sample generation request sent for", voice.voice);
+        }).catch((error) => {
+          console.error("[Voice Widget] Failed to start sample generation:", error?.message ?? error);
+          setVoiceExampleStatus(voiceId, null, props.voicesCollection);
+        });
+        setTimeout(() => {
+          generatingSampleFor.value = null;
+        }, 1500);
+        startSamplePolling();
       } catch (error) {
         console.error("[Voice Widget] Failed to generate voice:", error?.message ?? error);
-      } finally {
         generatingSampleFor.value = null;
       }
     }
+    function startSamplePolling() {
+      if (samplePollingInterval) return;
+      console.log("[Voice Widget] Starting sample completion polling");
+      samplePollingInterval = setInterval(async () => {
+        try {
+          const freshVoices = await fetchVoices(props.voicesCollection);
+          let hasProcessing = false;
+          for (const freshVoice of freshVoices) {
+            const localVoice = voices.value.find((v) => v.id === freshVoice.id);
+            if (localVoice) {
+              if (localVoice.example_status === "processing" && freshVoice.example_status !== "processing") {
+                console.log("[Voice Widget] Sample completed for", freshVoice.voice);
+                localVoice.example_status = freshVoice.example_status;
+                localVoice.example = freshVoice.example;
+              }
+              if (freshVoice.example_status === "processing") {
+                hasProcessing = true;
+              }
+            }
+          }
+          if (!hasProcessing) {
+            console.log("[Voice Widget] All samples completed, stopping polling");
+            stopSamplePolling();
+          }
+        } catch (error) {
+          console.error("[Voice Widget] Sample polling error:", error);
+        }
+      }, 3e3);
+    }
+    function stopSamplePolling() {
+      if (samplePollingInterval) {
+        clearInterval(samplePollingInterval);
+        samplePollingInterval = null;
+      }
+    }
+    let voiceoverPollCount = 0;
+    let voiceoverLessonId = null;
+    function startVoiceoverPolling() {
+      stopVoiceoverPolling();
+      voiceoverPollCount = 0;
+      voiceoverLessonId = props.primaryKey ? String(props.primaryKey) : null;
+      if (!voiceoverLessonId) {
+        console.error("[Voice Widget] Cannot start polling - no primaryKey!");
+        return;
+      }
+      console.log("[Voice Widget] Starting voiceover completion polling for lesson:", voiceoverLessonId);
+      const checkCompletion = async () => {
+        if (!voiceoverLessonId) {
+          console.error("[Voice Widget] Poll aborted - no lesson ID");
+          stopVoiceoverPolling();
+          return;
+        }
+        voiceoverPollCount++;
+        console.log(`[Voice Widget] Poll #${voiceoverPollCount} for lesson ${voiceoverLessonId}...`);
+        try {
+          const allVariantsNow = await fetchVoiceVariants(voiceoverLessonId);
+          console.log(`[Voice Widget] Poll #${voiceoverPollCount} raw result:`, JSON.stringify(allVariantsNow));
+          const completedWithAudio = allVariantsNow.filter((v) => v.audio_file_id);
+          console.log(`[Voice Widget] Poll #${voiceoverPollCount}: total=${allVariantsNow.length}, withAudio=${completedWithAudio.length}`);
+          if (completedWithAudio.length > 0) {
+            console.log("[Voice Widget] COMPLETED! Transitioning to result...");
+            stopVoiceoverPolling();
+            allVariants.value = completedWithAudio;
+            for (const v of allVariants.value) {
+              if (v.audio_file_id) {
+                const isUuid = v.audio_file_id?.includes("-");
+                v.audioUrl = isUuid ? getAudioUrl(v.audio_file_id) : await resolveAudioFileUrl(v.audio_file_id);
+              }
+            }
+            currentVariantIndex.value = 0;
+            hasExistingVoices.value = true;
+            currentMode.value = "result";
+            console.log("[Voice Widget] Mode set to result, allVariants:", allVariants.value.length);
+          } else {
+            console.log(`[Voice Widget] Poll #${voiceoverPollCount} - waiting for audio_file_id...`);
+          }
+        } catch (error) {
+          console.error("[Voice Widget] Voiceover polling error:", error);
+        }
+      };
+      voiceoverPollingInterval = setInterval(checkCompletion, 2e3);
+      setTimeout(checkCompletion, 500);
+    }
+    function stopVoiceoverPolling() {
+      if (voiceoverPollingInterval) {
+        clearInterval(voiceoverPollingInterval);
+        voiceoverPollingInterval = null;
+      }
+    }
     function getSelectedTonePrompt() {
       if (selectedToneId.value === "other") {
         return customTone.value;
@@ -991,7 +1182,19 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         const stylePrompt = getSelectedStylePrompt();
         const combinedStyle = `${tonePrompt}. ${stylePrompt}`.trim();
         const selectedVoice = voices.value.find((v) => v.id === selectedVoiceId.value);
-        const providerVoiceId = selectedVoice?.voice_id || selectedVoiceId.value;
+        const providerVoiceId = selectedVoice?.voice || selectedVoiceId.value;
+        const voiceConfig = {
+          provider: selectedModel.value,
+          voice_id: providerVoiceId,
+          style: combinedStyle,
+          tone_id: selectedToneId.value,
+          style_id: selectedStyleId.value
+        };
+        await createPendingVoiceVariant(props.primaryKey, voiceConfig);
+        startVoiceoverPolling();
+        if (!props.collection) {
+          throw new Error("collection is required but was not provided");
+        }
         const result = await generateFullVoiceover({
           provider: selectedModel.value,
           voiceId: providerVoiceId,
@@ -999,21 +1202,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           preprocessing: preprocessingEnabled.value,
           flowId: flowId.value,
           lessonId: props.primaryKey,
-          collection: props.collection || "SM_Lessons",
+          collection: props.collection,
           toneId: selectedToneId.value || void 0,
           styleId: selectedStyleId.value || void 0
         });
-        const voiceConfig = {
-          provider: selectedModel.value,
-          voice_id: providerVoiceId,
-          style: combinedStyle,
-          tone_id: selectedToneId.value,
-          style_id: selectedStyleId.value
-        };
-        if (result.job_id) {
-          processingMessage.value = "Processing in background...";
-          await startProgressPolling(result.job_id, voiceConfig);
-        } else if (result.audio_file_id) {
+        if (result.audio_file_id) {
+          stopVoiceoverPolling();
           generatedAudioId.value = result.audio_file_id;
           generatedAudioUrl.value = getAudioUrl(result.audio_file_id);
           progressPercent.value = 100;
@@ -1024,37 +1218,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           );
           await refreshVariants();
           currentMode.value = "result";
-        } else if (result.status === "processing" && result.callback_data) {
-          processingMessage.value = "Processing in background...";
-          await pollForCompletion(result.callback_data, voiceConfig);
+        } else {
+          processingMessage.value = "Generating voiceover...";
+          console.log("[Voice Widget] Async generation started, polling for completion...");
         }
       } catch (error) {
         errorMessage.value = error.message || "Failed to generate voiceover";
         progressPercent.value = 0;
       }
     }
-    async function pollForCompletion(callbackData, voiceConfig) {
-      const maxAttempts = 60;
-      const pollInterval = 5e3;
-      for (let i = 0; i < maxAttempts; i++) {
-        await new Promise((resolve) => setTimeout(resolve, pollInterval));
-        progressPercent.value = Math.min(90, 30 + i / maxAttempts * 60);
-        try {
-          const variants = await fetchVoiceVariants(props.primaryKey);
-          const latest = variants.find((v) => v.callback_data === callbackData);
-          if (latest && latest.audio_file_id) {
-            generatedAudioId.value = latest.audio_file_id;
-            generatedAudioUrl.value = await resolveAudioFileUrl(latest.audio_file_id);
-            progressPercent.value = 100;
-            currentMode.value = "result";
-            return;
-          }
-        } catch (error) {
-          console.error("Poll error:", error);
-        }
-      }
-      errorMessage.value = "Generation timed out. Please try again.";
-    }
     function retryGeneration() {
       errorMessage.value = null;
       generateVoiceover();
@@ -1086,37 +1258,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         console.error("Failed to delete variant:", error);
       }
     }
-    async function startProgressPolling(jobId, voiceConfig) {
-      currentJobId.value = jobId;
-      isPollingProgress.value = true;
-      while (isPollingProgress.value) {
-        const job = await pollVoicingJob(jobId);
-        if (job) {
-          progressPercent.value = job.progress;
-          processingMessage.value = job.message;
-          progressStatus.value = job.status;
-          if (job.status === "completed") {
-            isPollingProgress.value = false;
-            if (job.audio_file_id) {
-              await createVoiceVariant(
-                props.primaryKey,
-                job.audio_file_id,
-                voiceConfig
-              );
-            }
-            await refreshVariants();
-            currentMode.value = "result";
-            return;
-          }
-          if (job.status.startsWith("failed")) {
-            isPollingProgress.value = false;
-            errorMessage.value = job.message || "Generation failed";
-            return;
-          }
-        }
-        await new Promise((r) => setTimeout(r, 2e3));
-      }
-    }
     async function refreshVariants() {
       const variants = await fetchVoiceVariants(props.primaryKey);
       allVariants.value = variants;
@@ -1143,11 +1284,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       generatedAudioUrl.value = isUuid ? getAudioUrl(audioFileId) : await resolveAudioFileUrl(audioFileId);
       const config = variant.voice_config;
       if (config) {
+        isRestoringFromVariant.value = true;
         if (config.provider) {
           selectedModel.value = config.provider;
         }
         if (config.voice_id) {
-          const matchingVoice = voices.value.find((v) => v.name === config.voice_id);
+          const matchingVoice = voices.value.find((v) => v.voice === config.voice_id || v.name === config.voice_id);
           if (matchingVoice) {
             selectedVoiceId.value = matchingVoice.id;
           }
@@ -1161,19 +1303,27 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         if (typeof config.preprocessing === "boolean") {
           preprocessingEnabled.value = config.preprocessing;
         }
+        isRestoringFromVariant.value = false;
       }
     }
-    function regenerateVoiceover() {
+    async function regenerateVoiceover() {
+      const variant = selectedVariant.value;
+      if (variant) {
+        await loadVariantAtIndex(currentVariantIndex.value);
+      }
       generateVoiceover();
     }
     async function confirmVoiceover() {
       const variant = selectedVariant.value;
       if (!variant) return;
       try {
+        if (!props.collection) {
+          throw new Error("collection is required but was not provided");
+        }
         await linkAudioToLesson(
           props.primaryKey,
           variant.audio_file_id,
-          props.collection || "SM_Lessons"
+          props.collection
         );
         const value = {
           audio_file_id: variant.audio_file_id,
@@ -1210,40 +1360,92 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     async function initialize() {
+      console.log("[Voice Widget] ===== INITIALIZE START =====");
+      console.log("[Voice Widget] Props:", {
+        collection: props.collection,
+        primaryKey: props.primaryKey,
+        voicesCollection: props.voicesCollection,
+        tonesCollection: props.tonesCollection,
+        stylesCollection: props.stylesCollection,
+        flowId: props.flowId
+      });
       loading.value = true;
       initError.value = null;
       try {
         if (!props.flowId) {
           flowId.value = await fetchFlowId();
+          console.log("[Voice Widget] Fetched flowId:", flowId.value);
         } else {
           flowId.value = props.flowId;
+          console.log("[Voice Widget] Using props flowId:", flowId.value);
         }
+        console.log("[Voice Widget] Fetching voices, tones, styles...");
         const [loadedVoices, loadedTones, loadedStyles] = await Promise.all([
           fetchVoices(props.voicesCollection),
           fetchTones(props.tonesCollection),
           fetchStyles(props.stylesCollection)
         ]);
+        console.log("[Voice Widget] Loaded voices:", loadedVoices.length, loadedVoices);
+        console.log("[Voice Widget] Loaded tones:", loadedTones.length, loadedTones);
+        console.log("[Voice Widget] Loaded styles:", loadedStyles.length, loadedStyles);
         voices.value = loadedVoices;
         tones.value = loadedTones;
         styles.value = loadedStyles;
+        console.log("[Voice Widget] currentVoices (filtered by model):", currentVoices.value.length);
         if (currentVoices.value.length > 0 && !selectedVoiceId.value) {
           selectedVoiceId.value = currentVoices.value[0].id;
+          console.log("[Voice Widget] Auto-selected voice:", selectedVoiceId.value);
         }
         if (tones.value.length > 0 && !selectedToneId.value) {
           selectedToneId.value = tones.value[0].id;
+          console.log("[Voice Widget] Auto-selected tone:", selectedToneId.value);
         }
         if (styles.value.length > 0 && !selectedStyleId.value) {
           selectedStyleId.value = styles.value[0].id;
+          console.log("[Voice Widget] Auto-selected style:", selectedStyleId.value);
+        }
+        const processingVoices = voices.value.filter((v) => v.example_status === "processing");
+        if (processingVoices.length > 0) {
+          console.log("[Voice Widget] Found", processingVoices.length, "voices with processing samples");
+          startSamplePolling();
         }
         if (props.primaryKey) {
+          console.log("[Voice Widget] Checking variants for lesson:", props.primaryKey);
           const variants = await fetchVoiceVariants(props.primaryKey);
-          hasExistingVoices.value = variants.length > 0;
+          console.log("[Voice Widget] All variants for lesson:", variants.length);
+          const processingVariants = variants.filter((v) => v.status === "processing" && !v.audio_file_id);
+          if (processingVariants.length > 0) {
+            console.log("[Voice Widget] Found", processingVariants.length, "processing voiceovers, showing progress");
+            currentMode.value = "progress";
+            processingMessage.value = "Generating voiceover...";
+            progressPercent.value = 50;
+            startVoiceoverPolling();
+          } else {
+            const completedVariants = variants.filter((v) => v.audio_file_id);
+            hasExistingVoices.value = completedVariants.length > 0;
+            console.log("[Voice Widget] Completed variants with audio:", completedVariants.length);
+            if (completedVariants.length > 0) {
+              allVariants.value = completedVariants;
+              for (const v of allVariants.value) {
+                if (v.audio_file_id) {
+                  const isUuid = v.audio_file_id?.includes("-");
+                  v.audioUrl = isUuid ? getAudioUrl(v.audio_file_id) : await resolveAudioFileUrl(v.audio_file_id);
+                }
+              }
+              currentVariantIndex.value = 0;
+              currentMode.value = "result";
+              console.log("[Voice Widget] AUTO-SHOWING RESULT PAGE with", completedVariants.length, "variants");
+            }
+          }
         }
         initFromValue();
+        console.log("[Voice Widget] ===== INITIALIZE SUCCESS =====");
       } catch (error) {
+        console.error("[Voice Widget] ===== INITIALIZE ERROR =====", error);
         initError.value = error.message || "Failed to load configuration";
       } finally {
         loading.value = false;
+        console.log("[Voice Widget] loading set to false, currentMode:", currentMode.value);
       }
     }
     async function initFromValue() {
@@ -1282,12 +1484,20 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     watch(() => props.value, initFromValue, { deep: true });
+    const isRestoringFromVariant = ref(false);
     watch(selectedModel, () => {
-      if (currentVoices.value.length > 0) {
+      if (!isRestoringFromVariant.value && currentVoices.value.length > 0) {
         selectedVoiceId.value = currentVoices.value[0].id;
       }
     });
-    onMounted(initialize);
+    onMounted(() => {
+      console.log("[Voice Widget] onMounted called");
+      initialize();
+    });
+    onUnmounted(() => {
+      stopSamplePolling();
+      stopVoiceoverPolling();
+    });
     return (_ctx, _cache) => {
       const _component_v_icon = resolveComponent("v-icon");
       return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -1495,8 +1705,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                       key: voice.id,
                       voice,
                       "is-selected": selectedVoiceId.value === voice.id,
-                      loading: generatingSampleFor.value === voice.id,
-                      "sample-url": voiceSamples.value[voice.id] || (voice.sample_file ? `/assets/${voice.sample_file}` : voice.sample_url),
+                      loading: generatingSampleFor.value === voice.id || voice.example_status === "processing",
+                      "sample-url": voiceSamples.value[voice.id] || (voice.example ? `/assets/${voice.example}` : voice.sample_url),
                       provider: selectedModel.value,
                       onSelect: selectVoice,
                       onGenerateVoice: generateVoice
@@ -1755,10 +1965,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 
-var css = "\n.voice-widget[data-v-10fc7a16] {\n  font-family: var(--theme--fonts--sans--font-family);\n  padding: 16px;\n  border: 1px solid var(--theme--form--field--input--border-color);\n  border-radius: var(--theme--border-radius);\n  background: var(--theme--background);\n}\n.widget__header[data-v-10fc7a16] {\n  margin-bottom: 20px;\n}\n.widget__header-row[data-v-10fc7a16] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n}\n.widget__header-text[data-v-10fc7a16] {\n  flex: 1;\n}\n.widget__title[data-v-10fc7a16] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 0 4px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--theme--foreground);\n}\n.widget__collapse-btn[data-v-10fc7a16] {\n  background: none;\n  border: none;\n  padding: 4px;\n  cursor: pointer;\n  color: var(--theme--foreground-subdued);\n  border-radius: 4px;\n}\n.widget__collapse-btn[data-v-10fc7a16]:hover {\n  background: var(--theme--background-accent);\n}\n.widget__subtitle[data-v-10fc7a16] {\n  margin: 0;\n  font-size: 14px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__header-controls[data-v-10fc7a16] {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n}\n.widget__url-input[data-v-10fc7a16] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.widget__url-label[data-v-10fc7a16] {\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n  white-space: nowrap;\n}\n.widget__url-field[data-v-10fc7a16] {\n  padding: 6px 10px;\n  border: 1px solid var(--theme--form--field--input--border-color);\n  border-radius: var(--theme--border-radius);\n  font-size: 12px;\n  width: 280px;\n  background: var(--theme--form--field--input--background);\n  color: var(--theme--foreground);\n}\n.widget__section[data-v-10fc7a16] {\n  margin-bottom: 20px;\n}\n.widget__section-label[data-v-10fc7a16] {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--theme--foreground);\n}\n.widget__model-buttons[data-v-10fc7a16] {\n  display: flex;\n  gap: 8px;\n}\n.widget__model-btn[data-v-10fc7a16] {\n  padding: 8px 16px;\n  border: 1px solid var(--theme--form--field--input--border-color);\n  border-radius: var(--theme--border-radius);\n  background: var(--theme--background);\n  color: var(--theme--foreground);\n  cursor: pointer;\n  font-size: 14px;\n  transition: all 0.15s ease;\n}\n.widget__model-btn[data-v-10fc7a16]:hover {\n  border-color: var(--theme--primary);\n}\n.widget__model-btn--active[data-v-10fc7a16] {\n  background: var(--theme--primary);\n  border-color: var(--theme--primary);\n  color: var(--theme--primary-foreground, #fff);\n}\n.widget__voice-list[data-v-10fc7a16] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.widget__section--toggle[data-v-10fc7a16] {\n  padding: 12px;\n  background: var(--theme--background-subdued);\n  border-radius: var(--theme--border-radius);\n}\n.widget__toggle[data-v-10fc7a16] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n.widget__toggle input[data-v-10fc7a16] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.widget__toggle-label[data-v-10fc7a16] {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--theme--foreground);\n}\n.widget__toggle-note[data-v-10fc7a16] {\n  margin: 4px 0 0 24px;\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__footer[data-v-10fc7a16] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 16px;\n  border-top: 1px solid var(--theme--border-color-subdued);\n  margin-top: 20px;\n}\n.widget__footer-left[data-v-10fc7a16],\n.widget__footer-right[data-v-10fc7a16] {\n  display: flex;\n  gap: 8px;\n}\n.widget__variant-nav[data-v-10fc7a16] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin-bottom: 16px;\n  padding: 8px 0;\n}\n.widget__variant-counter[data-v-10fc7a16] {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--theme--foreground-subdued);\n  min-width: 60px;\n  text-align: center;\n}\n.widget__btn--icon[data-v-10fc7a16] {\n  padding: 6px;\n  min-width: 32px;\n  min-height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.widget__result-date[data-v-10fc7a16] {\n  margin-top: 8px;\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__btn[data-v-10fc7a16] {\n  padding: 8px 16px;\n  border: none;\n  border-radius: var(--theme--border-radius);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.widget__btn[data-v-10fc7a16]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.widget__btn--primary[data-v-10fc7a16] {\n  background: var(--theme--primary);\n  color: var(--theme--primary-foreground, #fff);\n}\n.widget__btn--primary[data-v-10fc7a16]:hover:not(:disabled) {\n  background: var(--theme--primary-accent);\n}\n.widget__btn--secondary[data-v-10fc7a16] {\n  background: var(--theme--background-accent);\n  color: var(--theme--foreground);\n  border: 1px solid var(--theme--form--field--input--border-color);\n}\n.widget__btn--secondary[data-v-10fc7a16]:hover:not(:disabled) {\n  background: var(--theme--background-normal);\n}\n\n/* Processing State */\n.widget__processing[data-v-10fc7a16] {\n  padding: 40px 20px;\n  text-align: center;\n}\n.widget__progress[data-v-10fc7a16] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin-bottom: 16px;\n  font-size: 16px;\n  color: var(--theme--foreground);\n}\n.widget__progress-bar[data-v-10fc7a16] {\n  height: 8px;\n  background: var(--theme--background-accent);\n  border-radius: 4px;\n  overflow: hidden;\n  max-width: 400px;\n  margin: 0 auto;\n}\n.widget__progress-fill[data-v-10fc7a16] {\n  height: 100%;\n  background: var(--theme--primary);\n  transition: width 0.3s ease;\n}\n\n/* Error State */\n.widget__error[data-v-10fc7a16] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 20px;\n  color: var(--theme--danger);\n  text-align: center;\n}\n.widget__error-actions[data-v-10fc7a16] {\n  display: flex;\n  gap: 8px;\n  margin-top: 8px;\n}\n.widget__retry[data-v-10fc7a16] {\n  padding: 6px 12px;\n  background: var(--theme--danger);\n  color: #fff;\n  border: none;\n  border-radius: var(--theme--border-radius);\n  cursor: pointer;\n}\n\n/* Loading State */\n.widget__loading[data-v-10fc7a16] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: var(--theme--foreground-subdued);\n}\n\n/* Result State */\n.widget__result[data-v-10fc7a16] {\n  padding: 20px;\n  background: var(--theme--background-subdued);\n  border-radius: var(--theme--border-radius);\n  margin-bottom: 20px;\n}\n.widget__result-info[data-v-10fc7a16] {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--theme--border-color-subdued);\n}\n.widget__result-info p[data-v-10fc7a16] {\n  margin: 4px 0;\n  font-size: 14px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__result-info strong[data-v-10fc7a16] {\n  color: var(--theme--foreground);\n}\n\n/* Variants List View */\n.widget__variants-list[data-v-10fc7a16] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  max-height: 400px;\n  overflow-y: auto;\n  margin-bottom: 16px;\n}\n.widget__variant-item[data-v-10fc7a16] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--theme--border-color-subdued);\n  border-radius: var(--theme--border-radius);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.widget__variant-item[data-v-10fc7a16]:hover {\n  border-color: var(--theme--primary);\n}\n.widget__variant-item--selected[data-v-10fc7a16] {\n  border-color: var(--theme--primary);\n  background: var(--theme--primary-background);\n}\n.widget__variant-radio[data-v-10fc7a16] {\n  flex-shrink: 0;\n}\n.widget__variant-radio input[data-v-10fc7a16] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.widget__variant-player[data-v-10fc7a16] {\n  flex: 1;\n  min-width: 200px;\n}\n.widget__variant-meta[data-v-10fc7a16] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 120px;\n}\n.widget__variant-voice[data-v-10fc7a16] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--theme--foreground);\n}\n.widget__variant-date[data-v-10fc7a16] {\n  font-size: 11px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__btn--danger[data-v-10fc7a16] {\n  color: var(--theme--danger);\n  background: transparent;\n  border: none;\n}\n.widget__btn--danger[data-v-10fc7a16]:hover {\n  background: var(--theme--danger-background);\n}\n.widget__selected-info[data-v-10fc7a16] {\n  padding: 12px;\n  background: var(--theme--background-subdued);\n  border-radius: var(--theme--border-radius);\n  margin-bottom: 16px;\n}\n.widget__selected-info p[data-v-10fc7a16] {\n  margin: 4px 0;\n  font-size: 14px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__selected-info strong[data-v-10fc7a16] {\n  color: var(--theme--foreground);\n}\n.widget__progress-status[data-v-10fc7a16] {\n  text-align: center;\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n  margin-top: 8px;\n}\n\n/* Animations */\n.spinning[data-v-10fc7a16] {\n  animation: spin-10fc7a16 1s linear infinite;\n}\n@keyframes spin-10fc7a16 {\nfrom { transform: rotate(0deg);\n}\nto { transform: rotate(360deg);\n}\n}\n";
+var css = "\n.voice-widget[data-v-5371543d] {\n  font-family: var(--theme--fonts--sans--font-family);\n  padding: 16px;\n  border: 1px solid var(--theme--form--field--input--border-color);\n  border-radius: var(--theme--border-radius);\n  background: var(--theme--background);\n}\n.widget__header[data-v-5371543d] {\n  margin-bottom: 20px;\n}\n.widget__header-row[data-v-5371543d] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n}\n.widget__header-text[data-v-5371543d] {\n  flex: 1;\n}\n.widget__title[data-v-5371543d] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 0 4px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--theme--foreground);\n}\n.widget__collapse-btn[data-v-5371543d] {\n  background: none;\n  border: none;\n  padding: 4px;\n  cursor: pointer;\n  color: var(--theme--foreground-subdued);\n  border-radius: 4px;\n}\n.widget__collapse-btn[data-v-5371543d]:hover {\n  background: var(--theme--background-accent);\n}\n.widget__subtitle[data-v-5371543d] {\n  margin: 0;\n  font-size: 14px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__header-controls[data-v-5371543d] {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n}\n.widget__url-input[data-v-5371543d] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.widget__url-label[data-v-5371543d] {\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n  white-space: nowrap;\n}\n.widget__url-field[data-v-5371543d] {\n  padding: 6px 10px;\n  border: 1px solid var(--theme--form--field--input--border-color);\n  border-radius: var(--theme--border-radius);\n  font-size: 12px;\n  width: 280px;\n  background: var(--theme--form--field--input--background);\n  color: var(--theme--foreground);\n}\n.widget__section[data-v-5371543d] {\n  margin-bottom: 20px;\n}\n.widget__section-label[data-v-5371543d] {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--theme--foreground);\n}\n.widget__model-buttons[data-v-5371543d] {\n  display: flex;\n  gap: 8px;\n}\n.widget__model-btn[data-v-5371543d] {\n  padding: 8px 16px;\n  border: 1px solid var(--theme--form--field--input--border-color);\n  border-radius: var(--theme--border-radius);\n  background: var(--theme--background);\n  color: var(--theme--foreground);\n  cursor: pointer;\n  font-size: 14px;\n  transition: all 0.15s ease;\n}\n.widget__model-btn[data-v-5371543d]:hover {\n  border-color: var(--theme--primary);\n}\n.widget__model-btn--active[data-v-5371543d] {\n  background: var(--theme--primary);\n  border-color: var(--theme--primary);\n  color: var(--theme--primary-foreground, #fff);\n}\n.widget__voice-list[data-v-5371543d] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.widget__section--toggle[data-v-5371543d] {\n  padding: 12px;\n  background: var(--theme--background-subdued);\n  border-radius: var(--theme--border-radius);\n}\n.widget__toggle[data-v-5371543d] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n.widget__toggle input[data-v-5371543d] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.widget__toggle-label[data-v-5371543d] {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--theme--foreground);\n}\n.widget__toggle-note[data-v-5371543d] {\n  margin: 4px 0 0 24px;\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__footer[data-v-5371543d] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 16px;\n  border-top: 1px solid var(--theme--border-color-subdued);\n  margin-top: 20px;\n}\n.widget__footer-left[data-v-5371543d],\n.widget__footer-right[data-v-5371543d] {\n  display: flex;\n  gap: 8px;\n}\n.widget__variant-nav[data-v-5371543d] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin-bottom: 16px;\n  padding: 8px 0;\n}\n.widget__variant-counter[data-v-5371543d] {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--theme--foreground-subdued);\n  min-width: 60px;\n  text-align: center;\n}\n.widget__btn--icon[data-v-5371543d] {\n  padding: 6px;\n  min-width: 32px;\n  min-height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.widget__result-date[data-v-5371543d] {\n  margin-top: 8px;\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__btn[data-v-5371543d] {\n  padding: 8px 16px;\n  border: none;\n  border-radius: var(--theme--border-radius);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.widget__btn[data-v-5371543d]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.widget__btn--primary[data-v-5371543d] {\n  background: var(--theme--primary);\n  color: var(--theme--primary-foreground, #fff);\n}\n.widget__btn--primary[data-v-5371543d]:hover:not(:disabled) {\n  background: var(--theme--primary-accent);\n}\n.widget__btn--secondary[data-v-5371543d] {\n  background: var(--theme--background-accent);\n  color: var(--theme--foreground);\n  border: 1px solid var(--theme--form--field--input--border-color);\n}\n.widget__btn--secondary[data-v-5371543d]:hover:not(:disabled) {\n  background: var(--theme--background-normal);\n}\n\n/* Processing State */\n.widget__processing[data-v-5371543d] {\n  padding: 40px 20px;\n  text-align: center;\n}\n.widget__progress[data-v-5371543d] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin-bottom: 16px;\n  font-size: 16px;\n  color: var(--theme--foreground);\n}\n.widget__progress-bar[data-v-5371543d] {\n  height: 8px;\n  background: var(--theme--background-accent);\n  border-radius: 4px;\n  overflow: hidden;\n  max-width: 400px;\n  margin: 0 auto;\n}\n.widget__progress-fill[data-v-5371543d] {\n  height: 100%;\n  background: var(--theme--primary);\n  transition: width 0.3s ease;\n}\n\n/* Error State */\n.widget__error[data-v-5371543d] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 20px;\n  color: var(--theme--danger);\n  text-align: center;\n}\n.widget__error-actions[data-v-5371543d] {\n  display: flex;\n  gap: 8px;\n  margin-top: 8px;\n}\n.widget__retry[data-v-5371543d] {\n  padding: 6px 12px;\n  background: var(--theme--danger);\n  color: #fff;\n  border: none;\n  border-radius: var(--theme--border-radius);\n  cursor: pointer;\n}\n\n/* Loading State */\n.widget__loading[data-v-5371543d] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: var(--theme--foreground-subdued);\n}\n\n/* Result State */\n.widget__result[data-v-5371543d] {\n  padding: 20px;\n  background: var(--theme--background-subdued);\n  border-radius: var(--theme--border-radius);\n  margin-bottom: 20px;\n}\n.widget__result-info[data-v-5371543d] {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--theme--border-color-subdued);\n}\n.widget__result-info p[data-v-5371543d] {\n  margin: 4px 0;\n  font-size: 14px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__result-info strong[data-v-5371543d] {\n  color: var(--theme--foreground);\n}\n\n/* Variants List View */\n.widget__variants-list[data-v-5371543d] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  max-height: 400px;\n  overflow-y: auto;\n  margin-bottom: 16px;\n}\n.widget__variant-item[data-v-5371543d] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--theme--border-color-subdued);\n  border-radius: var(--theme--border-radius);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.widget__variant-item[data-v-5371543d]:hover {\n  border-color: var(--theme--primary);\n}\n.widget__variant-item--selected[data-v-5371543d] {\n  border-color: var(--theme--primary);\n  background: var(--theme--primary-background);\n}\n.widget__variant-radio[data-v-5371543d] {\n  flex-shrink: 0;\n}\n.widget__variant-radio input[data-v-5371543d] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.widget__variant-player[data-v-5371543d] {\n  flex: 1;\n  min-width: 200px;\n}\n.widget__variant-meta[data-v-5371543d] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 120px;\n}\n.widget__variant-voice[data-v-5371543d] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--theme--foreground);\n}\n.widget__variant-date[data-v-5371543d] {\n  font-size: 11px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__btn--danger[data-v-5371543d] {\n  color: var(--theme--danger);\n  background: transparent;\n  border: none;\n}\n.widget__btn--danger[data-v-5371543d]:hover {\n  background: var(--theme--danger-background);\n}\n.widget__selected-info[data-v-5371543d] {\n  padding: 12px;\n  background: var(--theme--background-subdued);\n  border-radius: var(--theme--border-radius);\n  margin-bottom: 16px;\n}\n.widget__selected-info p[data-v-5371543d] {\n  margin: 4px 0;\n  font-size: 14px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__selected-info strong[data-v-5371543d] {\n  color: var(--theme--foreground);\n}\n.widget__progress-status[data-v-5371543d] {\n  text-align: center;\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n  margin-top: 8px;\n}\n\n/* Animations */\n.spinning[data-v-5371543d] {\n  animation: spin-5371543d 1s linear infinite;\n}\n@keyframes spin-5371543d {\nfrom { transform: rotate(0deg);\n}\nto { transform: rotate(360deg);\n}\n}\n";
 n(css,{});
 
-var InterfaceComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-10fc7a16"], ["__file", "interface.vue"]]);
+var InterfaceComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5371543d"], ["__file", "interface.vue"]]);
 
 var index = defineInterface({
   id: "voice-widget",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stellartech/voice-widget-directus",
   "description": "Voice generation widget with model/voice selection and audio preview for Directus",
   "icon": "mic",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "license": "MIT",
   "readme": "README.md",
   "repository": {