@stellartech/voice-widget-directus 1.0.0 → 1.0.1

package/dist/index.js

@@ -547,7 +547,8 @@ function useVoicingApi(api) {
       texts: [SAMPLE_TEXT],
       provider,
       preprocessing: false,
-      title: `Voice Sample - ${voiceId}`
+      title: `Voice Sample - ${voiceId}`,
+      audio_files_collection: "AudioFiles"
     };
     if (provider === "gemini") {
       voicingPayload.speakers = [{ voice: voiceId, name: "Sample", style: "neutral" }];
@@ -557,14 +558,28 @@ function useVoicingApi(api) {
       voicingPayload.voice_id = voiceId;
     }
     try {
+      console.log("[Voice Widget] Calling flow:", effectiveFlowId);
       const response = await api.post(`/flows/trigger/${effectiveFlowId}`, voicingPayload);
+      console.log("[Voice Widget] Full response:", JSON.stringify(response.data, null, 2));
       const flowResponse = response.data;
-      const audioFileId = flowResponse?.data?.audio_file_id || flowResponse?.audio_file_id || null;
+      let audioFileId = null;
+      if (flowResponse?.data?.audio_file_id) {
+        audioFileId = flowResponse.data.audio_file_id;
+      } else if (flowResponse?.audio_file_id) {
+        audioFileId = flowResponse.audio_file_id;
+      } else if (typeof flowResponse === "string") {
+        try {
+          const parsed = JSON.parse(flowResponse);
+          audioFileId = parsed?.data?.audio_file_id || parsed?.audio_file_id;
+        } catch {
+        }
+      }
+      console.log("[Voice Widget] Extracted audioFileId:", audioFileId);
       if (audioFileId) {
         const url = await resolveAudioFileUrl(audioFileId);
         return { url, audioFileId };
       }
-      throw new Error("No audio file returned from voice generation");
+      throw new Error("No audio file returned from voice generation. Response: " + JSON.stringify(flowResponse));
     } catch (e) {
       console.error("Failed to generate voice sample:", e);
       throw new Error(e.response?.data?.detail || e.message || "Failed to generate sample");
@@ -576,10 +591,11 @@ 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";
     let texts = [];
     let lessonTitle = `Lesson ${request.lessonId}`;
     try {
-      const lessonResponse = await api.get(`/items/SM_Lessons/${request.lessonId}`, {
+      const lessonResponse = await api.get(`/items/${collection}/${request.lessonId}`, {
         params: { fields: ["text", "title"] }
       });
       const textContent = lessonResponse.data.data?.text || "";
@@ -596,11 +612,24 @@ function useVoicingApi(api) {
       console.error("Failed to fetch lesson text content:", e);
       throw new Error(e.message || "Failed to fetch lesson text content");
     }
+    const voiceConfig = {
+      provider: request.provider,
+      voice_id: request.voiceId,
+      style: request.style,
+      preprocessing: request.preprocessing,
+      tone_id: request.toneId,
+      style_id: request.styleId
+    };
     const voicingPayload = {
       texts,
       provider: request.provider,
       preprocessing: request.preprocessing,
-      title: `Voiceover - ${lessonTitle}`
+      title: `Voiceover - ${lessonTitle}`,
+      audio_files_collection: "AudioFiles",
+      // Pass these so the flow can include them in callback_data
+      lesson_id: request.lessonId,
+      collection,
+      voice_config: voiceConfig
     };
     if (request.provider === "gemini") {
       voicingPayload.speakers = [{
@@ -617,43 +646,20 @@ function useVoicingApi(api) {
       const response = await api.post(`/flows/trigger/${effectiveFlowId}`, voicingPayload);
       const flowResponse = response.data;
       const data = flowResponse?.data || flowResponse;
-      let fileUuid = null;
-      if (data?.audio_file_id) {
+      let jobId = null;
+      if (data?.callback_data) {
         try {
-          const audioFilesResponse = await api.get(`/items/AudioFiles/${data.audio_file_id}`, {
-            params: { fields: ["file"] }
-          });
-          fileUuid = audioFilesResponse.data.data?.file || null;
-        } catch (e) {
-          console.warn("[Voice Widget] Could not resolve file UUID:", e);
-        }
-        if (fileUuid) {
-          try {
-            await api.post("/items/VoiceVariants", {
-              lesson_id: request.lessonId,
-              audio_file_id: fileUuid,
-              voice_config: {
-                provider: request.provider,
-                voice_id: request.voiceId,
-                style: request.style,
-                preprocessing: request.preprocessing,
-                tone_id: request.toneId,
-                style_id: request.styleId
-              },
-              callback_data: data.callback_data || null,
-              status: "published"
-            });
-            console.log("[Voice Widget] Saved voice variant with file UUID:", fileUuid);
-          } catch (saveError) {
-            console.warn("Failed to save voice variant:", saveError);
-          }
+          const callbackData = JSON.parse(data.callback_data);
+          jobId = callbackData.job_id || null;
+        } catch {
         }
       }
       return {
-        audio_file_id: fileUuid || data?.audio_file_id || null,
-        status: data?.status || null,
+        audio_file_id: data?.audio_file_id || null,
+        status: data?.status || "processing",
         callback_data: data?.callback_data || null,
-        generation_time: data?.generation_time || null
+        generation_time: data?.generation_time || null,
+        job_id: jobId
       };
     } catch (e) {
       console.error("Failed to generate voiceover:", e);
@@ -668,7 +674,8 @@ function useVoicingApi(api) {
       const response = await api.get(`/items/AudioFiles/${audioFilesRecordId}`, {
         params: { fields: ["file"] }
       });
-      const fileId = response.data.data?.file;
+      const fileField = response.data.data?.file;
+      const fileId = typeof fileField === "string" ? fileField : fileField?.id;
       if (fileId) {
         return `/assets/${fileId}`;
       }
@@ -694,14 +701,18 @@ function useVoicingApi(api) {
   }
   async function updateVoiceSampleFile(voiceId, audioFilesRecordId, collection = "Voices") {
     try {
+      console.log(`[Voice Widget] updateVoiceSampleFile called with voiceId=${voiceId}, audioFilesRecordId=${audioFilesRecordId}, collection=${collection}`);
       const response = await api.get(`/items/AudioFiles/${audioFilesRecordId}`, {
         params: { fields: ["file"] }
       });
-      const fileUuid = response.data.data?.file;
+      console.log("[Voice Widget] AudioFiles response:", response.data);
+      const fileField = response.data.data?.file;
+      const fileUuid = typeof fileField === "string" ? fileField : fileField?.id;
       if (!fileUuid) {
-        console.warn("[Voice Widget] Could not get file UUID from AudioFiles record");
+        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}`);
       await api.patch(`/items/${collection}/${voiceId}`, {
         sample_file: fileUuid
       });
@@ -710,6 +721,66 @@ function useVoicingApi(api) {
       console.error("[Voice Widget] Failed to update voice sample_file:", error);
     }
   }
+  async function deleteVoiceVariant(variantId) {
+    try {
+      await api.delete(`/items/VoiceVariants/${variantId}`);
+      console.log(`[Voice Widget] Deleted voice variant: ${variantId}`);
+    } catch (error) {
+      console.error("[Voice Widget] Failed to delete voice variant:", error);
+      throw error;
+    }
+  }
+  async function createVoiceVariant(lessonId, audioFileId, voiceConfig) {
+    try {
+      const response = await api.post("/items/VoiceVariants", {
+        lesson_id: lessonId,
+        audio_file_id: audioFileId,
+        voice_config: voiceConfig,
+        status: "draft"
+      });
+      const variantId = response.data.data?.id;
+      console.log(`[Voice Widget] Created VoiceVariant: ${variantId}`);
+      return variantId;
+    } catch (error) {
+      console.error("[Voice Widget] Failed to create VoiceVariant:", error);
+      throw error;
+    }
+  }
+  async function linkAudioToLesson(lessonId, audioFileId, collection) {
+    try {
+      await api.patch(`/items/${collection}/${lessonId}`, {
+        audio: audioFileId
+      });
+      console.log(`[Voice Widget] Linked audio ${audioFileId} to lesson ${lessonId} in ${collection}`);
+    } catch (error) {
+      console.error("[Voice Widget] Failed to link audio to lesson:", error);
+      throw error;
+    }
+  }
+  async function pollVoicingJob(jobId) {
+    try {
+      const response = await api.get("/items/VoicingJobs", {
+        params: {
+          filter: { job_id: { _eq: jobId } },
+          fields: ["status", "progress", "message", "audio_file_id"],
+          limit: 1
+        }
+      });
+      const job = response.data.data?.[0];
+      if (job) {
+        return {
+          status: job.status,
+          progress: job.progress,
+          message: job.message,
+          audio_file_id: job.audio_file_id
+        };
+      }
+      return null;
+    } catch (error) {
+      console.error("[Voice Widget] Failed to poll voicing job:", error);
+      return null;
+    }
+  }
   return {
     fetchVoices,
     fetchFlowId,
@@ -720,7 +791,11 @@ function useVoicingApi(api) {
     getAudioUrl,
     resolveAudioFileUrl,
     fetchVoiceVariants,
-    updateVoiceSampleFile
+    updateVoiceSampleFile,
+    deleteVoiceVariant,
+    createVoiceVariant,
+    linkAudioToLesson,
+    pollVoicingJob
   };
 }
 
@@ -733,49 +808,56 @@ const _hoisted_3 = { class: "widget__progress" };
 const _hoisted_4 = { class: "widget__progress-bar" };
 const _hoisted_5 = {
   key: 0,
+  class: "widget__progress-status"
+};
+const _hoisted_6 = {
+  key: 1,
   class: "widget__error"
 };
-const _hoisted_6 = { class: "widget__loading" };
-const _hoisted_7 = { class: "widget__error" };
-const _hoisted_8 = { class: "widget__header" };
-const _hoisted_9 = { class: "widget__header-row" };
-const _hoisted_10 = { class: "widget__header-text" };
-const _hoisted_11 = { class: "widget__title" };
-const _hoisted_12 = ["title"];
-const _hoisted_13 = { class: "widget__header-controls" };
-const _hoisted_14 = { class: "widget__url-input" };
-const _hoisted_15 = ["disabled"];
-const _hoisted_16 = { class: "widget__section" };
-const _hoisted_17 = { class: "widget__model-buttons" };
-const _hoisted_18 = ["onClick"];
-const _hoisted_19 = { class: "widget__section" };
-const _hoisted_20 = { class: "widget__voice-list" };
-const _hoisted_21 = { class: "widget__section" };
+const _hoisted_7 = { class: "widget__loading" };
+const _hoisted_8 = { class: "widget__error" };
+const _hoisted_9 = { class: "widget__header" };
+const _hoisted_10 = { class: "widget__header-row" };
+const _hoisted_11 = { class: "widget__header-text" };
+const _hoisted_12 = { class: "widget__title" };
+const _hoisted_13 = ["title"];
+const _hoisted_14 = { class: "widget__header-controls" };
+const _hoisted_15 = { class: "widget__url-input" };
+const _hoisted_16 = ["disabled"];
+const _hoisted_17 = { class: "widget__section" };
+const _hoisted_18 = { class: "widget__model-buttons" };
+const _hoisted_19 = ["onClick"];
+const _hoisted_20 = { class: "widget__section" };
+const _hoisted_21 = { class: "widget__voice-list" };
 const _hoisted_22 = { class: "widget__section" };
-const _hoisted_23 = { class: "widget__section widget__section--toggle" };
-const _hoisted_24 = { class: "widget__toggle" };
-const _hoisted_25 = { class: "widget__footer" };
-const _hoisted_26 = { class: "widget__footer-right" };
-const _hoisted_27 = ["disabled"];
+const _hoisted_23 = { class: "widget__section" };
+const _hoisted_24 = { class: "widget__section widget__section--toggle" };
+const _hoisted_25 = { class: "widget__toggle" };
+const _hoisted_26 = { class: "widget__footer" };
+const _hoisted_27 = { class: "widget__footer-right" };
 const _hoisted_28 = ["disabled"];
-const _hoisted_29 = { class: "widget__header" };
-const _hoisted_30 = { class: "widget__header-row" };
-const _hoisted_31 = { class: "widget__header-text" };
-const _hoisted_32 = { class: "widget__title" };
-const _hoisted_33 = { class: "widget__subtitle" };
-const _hoisted_34 = {
+const _hoisted_29 = ["disabled"];
+const _hoisted_30 = { class: "widget__header" };
+const _hoisted_31 = { class: "widget__header-row" };
+const _hoisted_32 = { class: "widget__header-text" };
+const _hoisted_33 = { class: "widget__title" };
+const _hoisted_34 = { class: "widget__subtitle" };
+const _hoisted_35 = { class: "widget__variants-list" };
+const _hoisted_36 = ["onClick"];
+const _hoisted_37 = { class: "widget__variant-radio" };
+const _hoisted_38 = ["checked", "onChange"];
+const _hoisted_39 = { class: "widget__variant-player" };
+const _hoisted_40 = { class: "widget__variant-meta" };
+const _hoisted_41 = { class: "widget__variant-voice" };
+const _hoisted_42 = { class: "widget__variant-date" };
+const _hoisted_43 = ["onClick"];
+const _hoisted_44 = {
   key: 0,
-  class: "widget__variant-nav"
-};
-const _hoisted_35 = ["disabled"];
-const _hoisted_36 = { class: "widget__variant-counter" };
-const _hoisted_37 = ["disabled"];
-const _hoisted_38 = { class: "widget__result" };
-const _hoisted_39 = { class: "widget__result-info" };
-const _hoisted_40 = {
-  key: 0,
-  class: "widget__result-date"
+  class: "widget__selected-info"
 };
+const _hoisted_45 = { class: "widget__footer" };
+const _hoisted_46 = { class: "widget__footer-right" };
+const _hoisted_47 = ["disabled"];
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "interface",
   props: {
@@ -804,7 +886,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       getAudioUrl,
       resolveAudioFileUrl,
       fetchVoiceVariants,
-      updateVoiceSampleFile
+      updateVoiceSampleFile,
+      deleteVoiceVariant,
+      createVoiceVariant,
+      linkAudioToLesson,
+      pollVoicingJob
     } = useVoicingApi(api);
     const currentMode = ref("selection");
     const loading = ref(true);
@@ -832,13 +918,17 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const hasExistingVoices = ref(false);
     const allVariants = ref([]);
     const currentVariantIndex = ref(0);
+    const currentJobId = ref(null);
+    const isPollingProgress = ref(false);
+    const progressStatus = ref("");
+    const selectedVariant = computed(() => allVariants.value[currentVariantIndex.value]);
     const currentVoices = computed(() => {
       return voices.value.filter((v) => v.provider === selectedModel.value);
     });
     const canGenerate = computed(() => {
       return selectedVoiceId.value !== null && selectedToneId.value !== null && selectedStyleId.value !== null;
     });
-    const currentVariantDate = computed(() => {
+    computed(() => {
       const variant = allVariants.value[currentVariantIndex.value];
       if (!variant?.date_created) return null;
       return new Date(variant.date_created).toLocaleString();
@@ -906,15 +996,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       if (!canGenerate.value) return;
       currentMode.value = "progress";
       errorMessage.value = null;
-      processingMessage.value = "Generating voiceover...";
-      progressPercent.value = 10;
+      processingMessage.value = "Starting generation...";
+      progressPercent.value = 5;
+      progressStatus.value = "";
       try {
         const tonePrompt = getSelectedTonePrompt();
         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;
-        progressPercent.value = 30;
         const result = await generateFullVoiceover({
           provider: selectedModel.value,
           voiceId: providerVoiceId,
@@ -922,25 +1012,41 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           preprocessing: preprocessingEnabled.value,
           flowId: flowId.value,
           lessonId: props.primaryKey,
+          collection: props.collection || "SM_Lessons",
           toneId: selectedToneId.value || void 0,
           styleId: selectedStyleId.value || void 0
         });
-        progressPercent.value = 90;
-        if (result.audio_file_id) {
+        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) {
           generatedAudioId.value = result.audio_file_id;
           generatedAudioUrl.value = getAudioUrl(result.audio_file_id);
           progressPercent.value = 100;
+          await createVoiceVariant(
+            props.primaryKey,
+            result.audio_file_id,
+            voiceConfig
+          );
+          await refreshVariants();
           currentMode.value = "result";
         } else if (result.status === "processing" && result.callback_data) {
           processingMessage.value = "Processing in background...";
-          await pollForCompletion(result.callback_data);
+          await pollForCompletion(result.callback_data, voiceConfig);
         }
       } catch (error) {
         errorMessage.value = error.message || "Failed to generate voiceover";
         progressPercent.value = 0;
       }
     }
-    async function pollForCompletion(callbackData) {
+    async function pollForCompletion(callbackData, voiceConfig) {
       const maxAttempts = 60;
       const pollInterval = 5e3;
       for (let i = 0; i < maxAttempts; i++) {
@@ -970,18 +1076,76 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       currentMode.value = "selection";
       errorMessage.value = null;
       progressPercent.value = 0;
+      progressStatus.value = "";
+      isPollingProgress.value = false;
+    }
+    function selectVariant(index) {
+      currentVariantIndex.value = index;
+      loadVariantAtIndex(index);
     }
-    async function prevVariant() {
-      if (currentVariantIndex.value > 0) {
-        currentVariantIndex.value--;
-        await loadVariantAtIndex(currentVariantIndex.value);
+    async function deleteVariant(variantId) {
+      if (!confirm("Delete this voiceover?")) return;
+      try {
+        await deleteVoiceVariant(variantId);
+        allVariants.value = allVariants.value.filter((v) => v.id !== variantId);
+        if (currentVariantIndex.value >= allVariants.value.length) {
+          currentVariantIndex.value = Math.max(0, allVariants.value.length - 1);
+        }
+        if (allVariants.value.length === 0) {
+          hasExistingVoices.value = false;
+          goBackToSelection();
+        }
+      } catch (error) {
+        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 nextVariant() {
-      if (currentVariantIndex.value < allVariants.value.length - 1) {
-        currentVariantIndex.value++;
-        await loadVariantAtIndex(currentVariantIndex.value);
+    async function refreshVariants() {
+      const variants = await fetchVoiceVariants(props.primaryKey);
+      allVariants.value = variants;
+      for (const v of allVariants.value) {
+        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 = variants.length > 0;
+    }
+    function formatVariantDate(dateStr) {
+      if (!dateStr) return "";
+      return new Date(dateStr).toLocaleString();
+    }
+    function getVoiceNameFromConfig(config) {
+      return config?.voice_id || "Unknown";
     }
     async function loadVariantAtIndex(index) {
       const variant = allVariants.value[index];
@@ -1015,25 +1179,41 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     function regenerateVoiceover() {
       generateVoiceover();
     }
-    function confirmVoiceover() {
-      const value = {
-        audio_file_id: generatedAudioId.value,
-        model: selectedModel.value,
-        voice_id: selectedVoiceId.value,
-        tone_id: selectedToneId.value,
-        style_id: selectedStyleId.value,
-        custom_tone: customTone.value,
-        custom_style: customStyle.value,
-        preprocessing: preprocessingEnabled.value,
-        confirmed_at: (/* @__PURE__ */ new Date()).toISOString()
-      };
-      emit("input", value);
+    async function confirmVoiceover() {
+      const variant = selectedVariant.value;
+      if (!variant) return;
+      try {
+        await linkAudioToLesson(
+          props.primaryKey,
+          variant.audio_file_id,
+          props.collection || "SM_Lessons"
+        );
+        const value = {
+          audio_file_id: variant.audio_file_id,
+          model: variant.voice_config?.provider || selectedModel.value,
+          voice_id: variant.voice_config?.voice_id || selectedVoiceId.value,
+          tone_id: variant.voice_config?.tone_id || selectedToneId.value,
+          style_id: variant.voice_config?.style_id || selectedStyleId.value,
+          custom_tone: customTone.value,
+          custom_style: customStyle.value,
+          preprocessing: variant.voice_config?.preprocessing ?? preprocessingEnabled.value,
+          confirmed_at: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        emit("input", value);
+        goBackToSelection();
+      } catch (error) {
+        console.error("Failed to link audio:", error);
+      }
     }
     async function viewGeneratedVoices() {
       try {
         const variants = await fetchVoiceVariants(props.primaryKey);
         if (variants.length > 0) {
           allVariants.value = variants;
+          for (const v of allVariants.value) {
+            const isUuid = v.audio_file_id?.includes("-");
+            v.audioUrl = isUuid ? getAudioUrl(v.audio_file_id) : await resolveAudioFileUrl(v.audio_file_id);
+          }
           currentVariantIndex.value = 0;
           await loadVariantAtIndex(0);
           currentMode.value = "result";
@@ -1042,27 +1222,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         console.error("Failed to fetch voice variants:", error);
       }
     }
-    function getModelName(modelId) {
-      const model = VOICE_MODELS.find((m) => m.id === modelId);
-      return model?.name || modelId;
-    }
-    function getVoiceName(voiceId) {
-      if (!voiceId) return "Not selected";
-      const voice = voices.value.find((v) => v.id === voiceId);
-      return voice?.name || voiceId;
-    }
-    function getToneName(toneId) {
-      if (!toneId) return "Not selected";
-      if (toneId === "other") return customTone.value || "Custom";
-      const tone = tones.value.find((t) => t.id === toneId);
-      return tone?.name || toneId;
-    }
-    function getStyleName(styleId) {
-      if (!styleId) return "Not selected";
-      if (styleId === "other") return customStyle.value || "Custom";
-      const style = styles.value.find((s) => s.id === styleId);
-      return style?.name || styleId;
-    }
     async function initialize() {
       loading.value = true;
       initError.value = null;
@@ -1172,7 +1331,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               /* STYLE */
             )
           ]),
-          errorMessage.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          progressStatus.value && !errorMessage.value ? (openBlock(), createElementBlock(
+            "p",
+            _hoisted_5,
+            " Status: " + toDisplayString(progressStatus.value),
+            1
+            /* TEXT */
+          )) : createCommentVNode("v-if", true),
+          errorMessage.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
             createVNode(_component_v_icon, { name: "error" }),
             createElementVNode(
               "span",
@@ -1197,7 +1363,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           { key: 1 },
           [
             createCommentVNode(" Loading State "),
-            createElementVNode("div", _hoisted_6, [
+            createElementVNode("div", _hoisted_7, [
               createVNode(_component_v_icon, {
                 name: "refresh",
                 class: "spinning"
@@ -1218,7 +1384,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           { key: 2 },
           [
             createCommentVNode(" Error State "),
-            createElementVNode("div", _hoisted_7, [
+            createElementVNode("div", _hoisted_8, [
               createVNode(_component_v_icon, { name: "error" }),
               createElementVNode(
                 "span",
@@ -1240,10 +1406,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           { key: 3 },
           [
             createCommentVNode(" Page 1: Selection Mode "),
-            createElementVNode("div", _hoisted_8, [
-              createElementVNode("div", _hoisted_9, [
-                createElementVNode("div", _hoisted_10, [
-                  createElementVNode("h2", _hoisted_11, [
+            createElementVNode("div", _hoisted_9, [
+              createElementVNode("div", _hoisted_10, [
+                createElementVNode("div", _hoisted_11, [
+                  createElementVNode("h2", _hoisted_12, [
                     createVNode(_component_v_icon, { name: "mic" }),
                     _cache[4] || (_cache[4] = createTextVNode(
                       " Voice Generation ",
@@ -1260,7 +1426,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                         name: headerExpanded.value ? "expand_less" : "expand_more",
                         small: ""
                       }, null, 8, ["name"])
-                    ], 8, _hoisted_12)
+                    ], 8, _hoisted_13)
                   ]),
                   _cache[5] || (_cache[5] = createElementVNode(
                     "p",
@@ -1272,9 +1438,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 ]),
                 withDirectives(createElementVNode(
                   "div",
-                  _hoisted_13,
+                  _hoisted_14,
                   [
-                    createElementVNode("div", _hoisted_14, [
+                    createElementVNode("div", _hoisted_15, [
                       _cache[6] || (_cache[6] = createElementVNode(
                         "label",
                         { class: "widget__url-label" },
@@ -1287,7 +1453,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                         class: "widget__url-field",
                         "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => flowId.value = $event),
                         disabled: savingUrl.value
-                      }, null, 8, _hoisted_15), [
+                      }, null, 8, _hoisted_16), [
                         [vModelText, flowId.value]
                       ])
                     ])
@@ -1300,7 +1466,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               ])
             ]),
             createCommentVNode(" Model Selection "),
-            createElementVNode("div", _hoisted_16, [
+            createElementVNode("div", _hoisted_17, [
               _cache[7] || (_cache[7] = createElementVNode(
                 "label",
                 { class: "widget__section-label" },
@@ -1308,7 +1474,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 -1
                 /* CACHED */
               )),
-              createElementVNode("div", _hoisted_17, [
+              createElementVNode("div", _hoisted_18, [
                 (openBlock(true), createElementBlock(
                   Fragment,
                   null,
@@ -1317,7 +1483,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                       key: model.id,
                       class: normalizeClass(["widget__model-btn", { "widget__model-btn--active": selectedModel.value === model.id }]),
                       onClick: ($event) => selectModel(model.id)
-                    }, toDisplayString(model.name), 11, _hoisted_18);
+                    }, toDisplayString(model.name), 11, _hoisted_19);
                   }),
                   128
                   /* KEYED_FRAGMENT */
@@ -1325,7 +1491,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               ])
             ]),
             createCommentVNode(" Voice Selection "),
-            createElementVNode("div", _hoisted_19, [
+            createElementVNode("div", _hoisted_20, [
               _cache[8] || (_cache[8] = createElementVNode(
                 "label",
                 { class: "widget__section-label" },
@@ -1333,7 +1499,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 -1
                 /* CACHED */
               )),
-              createElementVNode("div", _hoisted_20, [
+              createElementVNode("div", _hoisted_21, [
                 (openBlock(true), createElementBlock(
                   Fragment,
                   null,
@@ -1355,7 +1521,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               ])
             ]),
             createCommentVNode(" Tone Selection "),
-            createElementVNode("div", _hoisted_21, [
+            createElementVNode("div", _hoisted_22, [
               _cache[9] || (_cache[9] = createElementVNode(
                 "label",
                 { class: "widget__section-label" },
@@ -1373,7 +1539,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               }, null, 8, ["items", "selected-id", "custom-value"])
             ]),
             createCommentVNode(" Style Selection "),
-            createElementVNode("div", _hoisted_22, [
+            createElementVNode("div", _hoisted_23, [
               _cache[10] || (_cache[10] = createElementVNode(
                 "label",
                 { class: "widget__section-label" },
@@ -1391,8 +1557,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               }, null, 8, ["items", "selected-id", "custom-value"])
             ]),
             createCommentVNode(" Preprocessing Toggle "),
-            createElementVNode("div", _hoisted_23, [
-              createElementVNode("label", _hoisted_24, [
+            createElementVNode("div", _hoisted_24, [
+              createElementVNode("label", _hoisted_25, [
                 withDirectives(createElementVNode(
                   "input",
                   {
@@ -1422,7 +1588,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               ))
             ]),
             createCommentVNode(" Footer Actions "),
-            createElementVNode("div", _hoisted_25, [
+            createElementVNode("div", _hoisted_26, [
               _cache[13] || (_cache[13] = createElementVNode(
                 "div",
                 { class: "widget__footer-left" },
@@ -1430,17 +1596,17 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 -1
                 /* CACHED */
               )),
-              createElementVNode("div", _hoisted_26, [
+              createElementVNode("div", _hoisted_27, [
                 createElementVNode("button", {
                   class: "widget__btn widget__btn--secondary",
                   onClick: viewGeneratedVoices,
                   disabled: !hasExistingVoices.value
-                }, " View Generated Voices ", 8, _hoisted_27),
+                }, " View Generated Voices ", 8, _hoisted_28),
                 createElementVNode("button", {
                   class: "widget__btn widget__btn--primary",
                   onClick: generateVoiceover,
                   disabled: !canGenerate.value
-                }, " Generate Voiceover ", 8, _hoisted_28)
+                }, " Generate Voiceover ", 8, _hoisted_29)
               ])
             ])
           ],
@@ -1450,163 +1616,147 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           Fragment,
           { key: 4 },
           [
-            createCommentVNode(" Page 3: Result Mode "),
-            createElementVNode("div", _hoisted_29, [
-              createElementVNode("div", _hoisted_30, [
-                createElementVNode("div", _hoisted_31, [
-                  createElementVNode("h2", _hoisted_32, [
+            createCommentVNode(" Page 3: Result Mode - List View "),
+            createElementVNode("div", _hoisted_30, [
+              createElementVNode("div", _hoisted_31, [
+                createElementVNode("div", _hoisted_32, [
+                  createElementVNode("h2", _hoisted_33, [
                     createVNode(_component_v_icon, { name: "check_circle" }),
                     _cache[14] || (_cache[14] = createTextVNode(
-                      " Voiceover Generated ",
+                      " Generated Voiceovers ",
                       -1
                       /* CACHED */
                     ))
                   ]),
-                  createElementVNode("p", _hoisted_33, [
-                    allVariants.value.length > 1 ? (openBlock(), createElementBlock(
-                      Fragment,
-                      { key: 0 },
-                      [
-                        createTextVNode(
-                          " Viewing " + toDisplayString(currentVariantIndex.value + 1) + " of " + toDisplayString(allVariants.value.length) + " generated voiceovers ",
-                          1
-                          /* TEXT */
-                        )
-                      ],
-                      64
-                      /* STABLE_FRAGMENT */
-                    )) : (openBlock(), createElementBlock(
-                      Fragment,
-                      { key: 1 },
-                      [
-                        createTextVNode(" Listen to your generated voiceover and confirm or regenerate ")
-                      ],
-                      64
-                      /* STABLE_FRAGMENT */
-                    ))
-                  ])
-                ])
-              ])
-            ]),
-            createCommentVNode(" Navigation for multiple variants "),
-            allVariants.value.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_34, [
-              createElementVNode("button", {
-                class: "widget__btn widget__btn--icon",
-                onClick: prevVariant,
-                disabled: currentVariantIndex.value === 0
-              }, [
-                createVNode(_component_v_icon, { name: "chevron_left" })
-              ], 8, _hoisted_35),
-              createElementVNode(
-                "span",
-                _hoisted_36,
-                toDisplayString(currentVariantIndex.value + 1) + " / " + toDisplayString(allVariants.value.length),
-                1
-                /* TEXT */
-              ),
-              createElementVNode("button", {
-                class: "widget__btn widget__btn--icon",
-                onClick: nextVariant,
-                disabled: currentVariantIndex.value === allVariants.value.length - 1
-              }, [
-                createVNode(_component_v_icon, { name: "chevron_right" })
-              ], 8, _hoisted_37)
-            ])) : createCommentVNode("v-if", true),
-            createElementVNode("div", _hoisted_38, [
-              createVNode(AudioPlayer, {
-                src: generatedAudioUrl.value,
-                loading: false,
-                size: "large"
-              }, null, 8, ["src"]),
-              createElementVNode("div", _hoisted_39, [
-                createElementVNode("p", null, [
-                  _cache[15] || (_cache[15] = createElementVNode(
-                    "strong",
-                    null,
-                    "Model:",
-                    -1
-                    /* CACHED */
-                  )),
-                  createTextVNode(
-                    " " + toDisplayString(getModelName(selectedModel.value)),
-                    1
-                    /* TEXT */
-                  )
-                ]),
-                createElementVNode("p", null, [
-                  _cache[16] || (_cache[16] = createElementVNode(
-                    "strong",
-                    null,
-                    "Voice:",
-                    -1
-                    /* CACHED */
-                  )),
-                  createTextVNode(
-                    " " + toDisplayString(getVoiceName(selectedVoiceId.value)),
-                    1
-                    /* TEXT */
-                  )
-                ]),
-                createElementVNode("p", null, [
-                  _cache[17] || (_cache[17] = createElementVNode(
-                    "strong",
-                    null,
-                    "Tone:",
-                    -1
-                    /* CACHED */
-                  )),
-                  createTextVNode(
-                    " " + toDisplayString(getToneName(selectedToneId.value)),
-                    1
-                    /* TEXT */
-                  )
-                ]),
-                createElementVNode("p", null, [
-                  _cache[18] || (_cache[18] = createElementVNode(
-                    "strong",
-                    null,
-                    "Style:",
-                    -1
-                    /* CACHED */
-                  )),
-                  createTextVNode(
-                    " " + toDisplayString(getStyleName(selectedStyleId.value)),
-                    1
-                    /* TEXT */
-                  )
-                ]),
-                currentVariantDate.value ? (openBlock(), createElementBlock("p", _hoisted_40, [
-                  _cache[19] || (_cache[19] = createElementVNode(
-                    "strong",
-                    null,
-                    "Generated:",
-                    -1
-                    /* CACHED */
-                  )),
-                  createTextVNode(
-                    " " + toDisplayString(currentVariantDate.value),
+                  createElementVNode(
+                    "p",
+                    _hoisted_34,
+                    toDisplayString(allVariants.value.length) + " voiceover(s) available. Select one to preview and confirm. ",
                     1
                     /* TEXT */
                   )
-                ])) : createCommentVNode("v-if", true)
+                ])
               ])
             ]),
-            createElementVNode("div", { class: "widget__footer" }, [
+            createCommentVNode(" Variants List "),
+            createElementVNode("div", _hoisted_35, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(allVariants.value, (variant, index) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: variant.id,
+                    class: normalizeClass(["widget__variant-item", { "widget__variant-item--selected": currentVariantIndex.value === index }]),
+                    onClick: ($event) => selectVariant(index)
+                  }, [
+                    createElementVNode("div", _hoisted_37, [
+                      createElementVNode("input", {
+                        type: "radio",
+                        checked: currentVariantIndex.value === index,
+                        onChange: ($event) => selectVariant(index)
+                      }, null, 40, _hoisted_38)
+                    ]),
+                    createElementVNode("div", _hoisted_39, [
+                      createVNode(AudioPlayer, {
+                        src: variant.audioUrl,
+                        loading: false,
+                        size: "small"
+                      }, null, 8, ["src"])
+                    ]),
+                    createElementVNode("div", _hoisted_40, [
+                      createElementVNode(
+                        "span",
+                        _hoisted_41,
+                        toDisplayString(variant.voice_config?.provider) + " - " + toDisplayString(getVoiceNameFromConfig(variant.voice_config)),
+                        1
+                        /* TEXT */
+                      ),
+                      createElementVNode(
+                        "span",
+                        _hoisted_42,
+                        toDisplayString(formatVariantDate(variant.date_created)),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    createElementVNode("button", {
+                      class: "widget__btn widget__btn--icon widget__btn--danger",
+                      onClick: withModifiers(($event) => deleteVariant(variant.id), ["stop"]),
+                      title: "Delete this voiceover"
+                    }, [
+                      createVNode(_component_v_icon, {
+                        name: "delete",
+                        small: ""
+                      })
+                    ], 8, _hoisted_43)
+                  ], 10, _hoisted_36);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            createCommentVNode(" Selected Variant Details "),
+            selectedVariant.value ? (openBlock(), createElementBlock("div", _hoisted_44, [
+              createElementVNode("p", null, [
+                _cache[15] || (_cache[15] = createElementVNode(
+                  "strong",
+                  null,
+                  "Model:",
+                  -1
+                  /* CACHED */
+                )),
+                createTextVNode(
+                  " " + toDisplayString(selectedVariant.value.voice_config?.provider),
+                  1
+                  /* TEXT */
+                )
+              ]),
+              createElementVNode("p", null, [
+                _cache[16] || (_cache[16] = createElementVNode(
+                  "strong",
+                  null,
+                  "Voice:",
+                  -1
+                  /* CACHED */
+                )),
+                createTextVNode(
+                  " " + toDisplayString(getVoiceNameFromConfig(selectedVariant.value.voice_config)),
+                  1
+                  /* TEXT */
+                )
+              ]),
+              createElementVNode("p", null, [
+                _cache[17] || (_cache[17] = createElementVNode(
+                  "strong",
+                  null,
+                  "Style:",
+                  -1
+                  /* CACHED */
+                )),
+                createTextVNode(
+                  " " + toDisplayString(selectedVariant.value.voice_config?.style),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ])) : createCommentVNode("v-if", true),
+            createElementVNode("div", _hoisted_45, [
               createElementVNode("div", { class: "widget__footer-left" }, [
                 createElementVNode("button", {
                   class: "widget__btn widget__btn--secondary",
                   onClick: goBackToSelection
-                }, " Return ")
+                }, " Back ")
               ]),
-              createElementVNode("div", { class: "widget__footer-right" }, [
+              createElementVNode("div", _hoisted_46, [
                 createElementVNode("button", {
                   class: "widget__btn widget__btn--secondary",
                   onClick: regenerateVoiceover
                 }, " Regenerate "),
                 createElementVNode("button", {
                   class: "widget__btn widget__btn--primary",
-                  onClick: confirmVoiceover
-                }, " Confirm ")
+                  onClick: confirmVoiceover,
+                  disabled: !selectedVariant.value
+                }, " Confirm ", 8, _hoisted_47)
               ])
             ])
           ],
@@ -1618,10 +1768,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 
-var css = "\n.voice-widget[data-v-f98cb13e] {\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-f98cb13e] {\n  margin-bottom: 20px;\n}\n.widget__header-row[data-v-f98cb13e] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n}\n.widget__header-text[data-v-f98cb13e] {\n  flex: 1;\n}\n.widget__title[data-v-f98cb13e] {\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-f98cb13e] {\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-f98cb13e]:hover {\n  background: var(--theme--background-accent);\n}\n.widget__subtitle[data-v-f98cb13e] {\n  margin: 0;\n  font-size: 14px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__header-controls[data-v-f98cb13e] {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n}\n.widget__url-input[data-v-f98cb13e] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.widget__url-label[data-v-f98cb13e] {\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n  white-space: nowrap;\n}\n.widget__url-field[data-v-f98cb13e] {\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-f98cb13e] {\n  margin-bottom: 20px;\n}\n.widget__section-label[data-v-f98cb13e] {\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-f98cb13e] {\n  display: flex;\n  gap: 8px;\n}\n.widget__model-btn[data-v-f98cb13e] {\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-f98cb13e]:hover {\n  border-color: var(--theme--primary);\n}\n.widget__model-btn--active[data-v-f98cb13e] {\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-f98cb13e] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.widget__section--toggle[data-v-f98cb13e] {\n  padding: 12px;\n  background: var(--theme--background-subdued);\n  border-radius: var(--theme--border-radius);\n}\n.widget__toggle[data-v-f98cb13e] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n.widget__toggle input[data-v-f98cb13e] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.widget__toggle-label[data-v-f98cb13e] {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--theme--foreground);\n}\n.widget__toggle-note[data-v-f98cb13e] {\n  margin: 4px 0 0 24px;\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__footer[data-v-f98cb13e] {\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-f98cb13e],\n.widget__footer-right[data-v-f98cb13e] {\n  display: flex;\n  gap: 8px;\n}\n.widget__variant-nav[data-v-f98cb13e] {\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-f98cb13e] {\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-f98cb13e] {\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-f98cb13e] {\n  margin-top: 8px;\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__btn[data-v-f98cb13e] {\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-f98cb13e]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.widget__btn--primary[data-v-f98cb13e] {\n  background: var(--theme--primary);\n  color: var(--theme--primary-foreground, #fff);\n}\n.widget__btn--primary[data-v-f98cb13e]:hover:not(:disabled) {\n  background: var(--theme--primary-accent);\n}\n.widget__btn--secondary[data-v-f98cb13e] {\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-f98cb13e]:hover:not(:disabled) {\n  background: var(--theme--background-normal);\n}\n\n/* Processing State */\n.widget__processing[data-v-f98cb13e] {\n  padding: 40px 20px;\n  text-align: center;\n}\n.widget__progress[data-v-f98cb13e] {\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-f98cb13e] {\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-f98cb13e] {\n  height: 100%;\n  background: var(--theme--primary);\n  transition: width 0.3s ease;\n}\n\n/* Error State */\n.widget__error[data-v-f98cb13e] {\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-f98cb13e] {\n  display: flex;\n  gap: 8px;\n  margin-top: 8px;\n}\n.widget__retry[data-v-f98cb13e] {\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-f98cb13e] {\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-f98cb13e] {\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-f98cb13e] {\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-f98cb13e] {\n  margin: 4px 0;\n  font-size: 14px;\n  color: var(--theme--foreground-subdued);\n}\n.widget__result-info strong[data-v-f98cb13e] {\n  color: var(--theme--foreground);\n}\n\n/* Animations */\n.spinning[data-v-f98cb13e] {\n  animation: spin-f98cb13e 1s linear infinite;\n}\n@keyframes spin-f98cb13e {\nfrom { transform: rotate(0deg);\n}\nto { transform: rotate(360deg);\n}\n}\n";
+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";
 n(css,{});
 
-var InterfaceComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f98cb13e"], ["__file", "interface.vue"]]);
+var InterfaceComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-10fc7a16"], ["__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.0",
+  "version": "1.0.1",
   "license": "MIT",
   "readme": "README.md",
   "repository": {