@stellartech/voice-widget-directus 1.0.0

package/dist/index.js

@@ -0,0 +1,1702 @@
+import { useApi, defineInterface } from '@directus/extensions-sdk';
+import { defineComponent, ref, computed, watch, onUnmounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, createElementVNode, toDisplayString, normalizeStyle, withDirectives, vModelText, createCommentVNode, renderSlot, withModifiers, createBlock, createTextVNode, Fragment, renderList, onMounted, vShow, unref, vModelCheckbox } from 'vue';
+
+const _hoisted_1$3 = {
+  key: 0,
+  class: "audio-player__loading"
+};
+const _hoisted_2$3 = {
+  key: 1,
+  class: "audio-player__error"
+};
+const _hoisted_3$3 = {
+  key: 2,
+  class: "audio-player__controls"
+};
+const _hoisted_4$3 = ["src"];
+const _hoisted_5$3 = ["disabled"];
+const _hoisted_6$3 = { class: "audio-player__progress-track" };
+const _hoisted_7$2 = { class: "audio-player__time" };
+const _hoisted_8$2 = {
+  key: 0,
+  class: "audio-player__volume"
+};
+const _hoisted_9$2 = {
+  key: 3,
+  class: "audio-player__empty"
+};
+var _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "AudioPlayer",
+  props: {
+    src: { default: null },
+    loading: { type: Boolean, default: false },
+    loadingText: { default: "Loading..." },
+    size: { default: "medium" }
+  },
+  setup(__props) {
+    const props = __props;
+    const audioRef = ref(null);
+    const isPlaying = ref(false);
+    const isLoaded = ref(false);
+    const currentTime = ref(0);
+    const duration = ref(0);
+    const volume = ref(1);
+    const isMuted = ref(false);
+    const error = ref(null);
+    const progressPercent = computed(() => {
+      if (duration.value === 0) return 0;
+      return currentTime.value / duration.value * 100;
+    });
+    const formattedTime = computed(() => {
+      const current = formatTime(currentTime.value);
+      const total = formatTime(duration.value);
+      return `${current} / ${total}`;
+    });
+    function formatTime(seconds) {
+      if (!seconds || isNaN(seconds)) return "0:00";
+      const mins = Math.floor(seconds / 60);
+      const secs = Math.floor(seconds % 60);
+      return `${mins}:${secs.toString().padStart(2, "0")}`;
+    }
+    function togglePlay() {
+      if (!audioRef.value) return;
+      if (isPlaying.value) {
+        audioRef.value.pause();
+      } else {
+        audioRef.value.play().catch((e) => {
+          console.error("Play failed:", e);
+          error.value = "Failed to play audio";
+        });
+      }
+      isPlaying.value = !isPlaying.value;
+    }
+    function toggleMute() {
+      if (!audioRef.value) return;
+      isMuted.value = !isMuted.value;
+      audioRef.value.muted = isMuted.value;
+    }
+    function onVolumeChange() {
+      if (!audioRef.value) return;
+      audioRef.value.volume = volume.value;
+      isMuted.value = volume.value === 0;
+    }
+    function seek(event) {
+      if (!audioRef.value || duration.value === 0) return;
+      const target = event.currentTarget;
+      const rect = target.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const percent = x / rect.width;
+      audioRef.value.currentTime = percent * duration.value;
+    }
+    function onLoadedMetadata() {
+      if (!audioRef.value) return;
+      duration.value = audioRef.value.duration;
+      isLoaded.value = true;
+      error.value = null;
+    }
+    function onTimeUpdate() {
+      if (!audioRef.value) return;
+      currentTime.value = audioRef.value.currentTime;
+    }
+    function onEnded() {
+      isPlaying.value = false;
+      currentTime.value = 0;
+    }
+    function onError() {
+      error.value = "Failed to load audio";
+      isLoaded.value = false;
+    }
+    watch(() => props.src, (newSrc) => {
+      isPlaying.value = false;
+      isLoaded.value = false;
+      currentTime.value = 0;
+      duration.value = 0;
+      error.value = null;
+      if (audioRef.value && newSrc) {
+        audioRef.value.load();
+      }
+    });
+    onUnmounted(() => {
+      if (audioRef.value) {
+        audioRef.value.pause();
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_v_icon = resolveComponent("v-icon");
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(["audio-player", [`audio-player--${__props.size}`, { "audio-player--loading": __props.loading }]])
+        },
+        [
+          __props.loading ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+            createVNode(_component_v_icon, {
+              name: "refresh",
+              class: "spinning",
+              small: ""
+            }),
+            createElementVNode(
+              "span",
+              null,
+              toDisplayString(__props.loadingText),
+              1
+              /* TEXT */
+            )
+          ])) : error.value ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
+            createVNode(_component_v_icon, {
+              name: "error",
+              small: ""
+            }),
+            createElementVNode(
+              "span",
+              null,
+              toDisplayString(error.value),
+              1
+              /* TEXT */
+            )
+          ])) : __props.src ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
+            (openBlock(), createElementBlock("audio", {
+              ref_key: "audioRef",
+              ref: audioRef,
+              key: __props.src,
+              src: __props.src,
+              preload: "metadata",
+              onLoadedmetadata: onLoadedMetadata,
+              onError,
+              onTimeupdate: onTimeUpdate,
+              onEnded
+            }, null, 40, _hoisted_4$3)),
+            createElementVNode("button", {
+              class: "audio-player__play-btn",
+              onClick: togglePlay,
+              disabled: !isLoaded.value
+            }, [
+              createVNode(_component_v_icon, {
+                name: isPlaying.value ? "pause" : "play_arrow"
+              }, null, 8, ["name"])
+            ], 8, _hoisted_5$3),
+            createElementVNode("div", {
+              class: "audio-player__progress",
+              onClick: seek
+            }, [
+              createElementVNode("div", _hoisted_6$3, [
+                createElementVNode(
+                  "div",
+                  {
+                    class: "audio-player__progress-fill",
+                    style: normalizeStyle({ width: progressPercent.value + "%" })
+                  },
+                  null,
+                  4
+                  /* STYLE */
+                )
+              ])
+            ]),
+            createElementVNode(
+              "span",
+              _hoisted_7$2,
+              toDisplayString(formattedTime.value),
+              1
+              /* TEXT */
+            ),
+            __props.size === "large" ? (openBlock(), createElementBlock("div", _hoisted_8$2, [
+              createElementVNode("button", {
+                class: "audio-player__volume-btn",
+                onClick: toggleMute
+              }, [
+                createVNode(_component_v_icon, {
+                  name: isMuted.value ? "volume_off" : "volume_up",
+                  small: ""
+                }, null, 8, ["name"])
+              ]),
+              withDirectives(createElementVNode(
+                "input",
+                {
+                  type: "range",
+                  class: "audio-player__volume-slider",
+                  min: "0",
+                  max: "1",
+                  step: "0.1",
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => volume.value = $event),
+                  onInput: onVolumeChange
+                },
+                null,
+                544
+                /* NEED_HYDRATION, NEED_PATCH */
+              ), [
+                [vModelText, volume.value]
+              ])
+            ])) : createCommentVNode("v-if", true)
+          ])) : (openBlock(), createElementBlock("div", _hoisted_9$2, [
+            renderSlot(_ctx.$slots, "empty", {}, () => [
+              createVNode(_component_v_icon, {
+                name: "music_off",
+                small: ""
+              }),
+              _cache[1] || (_cache[1] = createElementVNode(
+                "span",
+                null,
+                "No audio",
+                -1
+                /* CACHED */
+              ))
+            ], true)
+          ]))
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css$3 = "\n.audio-player[data-v-9d56517d] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--theme--background-subdued);\n  border-radius: var(--theme--border-radius);\n  border: 1px solid var(--theme--border-color-subdued);\n}\n.audio-player--small[data-v-9d56517d] {\n  padding: 4px 8px;\n  gap: 6px;\n}\n.audio-player--large[data-v-9d56517d] {\n  padding: 12px 16px;\n  gap: 12px;\n}\n.audio-player__loading[data-v-9d56517d],\n.audio-player__error[data-v-9d56517d],\n.audio-player__empty[data-v-9d56517d] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--theme--foreground-subdued);\n  font-size: 13px;\n  width: 100%;\n}\n.audio-player__error[data-v-9d56517d] {\n  color: var(--theme--danger);\n}\n.audio-player__controls[data-v-9d56517d] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n.audio-player__play-btn[data-v-9d56517d] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 50%;\n  background: var(--theme--primary);\n  color: var(--theme--primary-foreground, #fff);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.audio-player--small .audio-player__play-btn[data-v-9d56517d] {\n  width: 24px;\n  height: 24px;\n}\n.audio-player--large .audio-player__play-btn[data-v-9d56517d] {\n  width: 40px;\n  height: 40px;\n}\n.audio-player__play-btn[data-v-9d56517d]:hover:not(:disabled) {\n  background: var(--theme--primary-accent);\n  transform: scale(1.05);\n}\n.audio-player__play-btn[data-v-9d56517d]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.audio-player__progress[data-v-9d56517d] {\n  flex: 1;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.audio-player__progress-track[data-v-9d56517d] {\n  width: 100%;\n  height: 4px;\n  background: var(--theme--border-color);\n  border-radius: 2px;\n  overflow: hidden;\n}\n.audio-player--large .audio-player__progress-track[data-v-9d56517d] {\n  height: 6px;\n  border-radius: 3px;\n}\n.audio-player__progress-fill[data-v-9d56517d] {\n  height: 100%;\n  background: var(--theme--primary);\n  border-radius: inherit;\n  transition: width 0.1s linear;\n}\n.audio-player__time[data-v-9d56517d] {\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n  white-space: nowrap;\n  min-width: 70px;\n  text-align: right;\n}\n.audio-player--small .audio-player__time[data-v-9d56517d] {\n  font-size: 11px;\n  min-width: 60px;\n}\n.audio-player__volume[data-v-9d56517d] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: 8px;\n}\n.audio-player__volume-btn[data-v-9d56517d] {\n  background: none;\n  border: none;\n  padding: 4px;\n  cursor: pointer;\n  color: var(--theme--foreground-subdued);\n  border-radius: 4px;\n}\n.audio-player__volume-btn[data-v-9d56517d]:hover {\n  background: var(--theme--background-accent);\n  color: var(--theme--foreground);\n}\n.audio-player__volume-slider[data-v-9d56517d] {\n  width: 60px;\n  height: 4px;\n  cursor: pointer;\n  accent-color: var(--theme--primary);\n}\n\n/* Spinning animation */\n.spinning[data-v-9d56517d] {\n  animation: spin-9d56517d 1s linear infinite;\n}\n@keyframes spin-9d56517d {\nfrom { transform: rotate(0deg);\n}\nto { transform: rotate(360deg);\n}\n}\n";
+n(css$3,{});
+
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+var AudioPlayer = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-9d56517d"], ["__file", "AudioPlayer.vue"]]);
+
+const _hoisted_1$2 = { class: "voice-card__info" };
+const _hoisted_2$2 = { class: "voice-card__radio" };
+const _hoisted_3$2 = ["checked", "name"];
+const _hoisted_4$2 = { class: "voice-card__text" };
+const _hoisted_5$2 = { class: "voice-card__name" };
+const _hoisted_6$2 = { class: "voice-card__description" };
+const _hoisted_7$1 = { class: "voice-card__player" };
+const _hoisted_8$1 = {
+  key: 0,
+  class: "voice-card__generating"
+};
+const _hoisted_9$1 = ["disabled"];
+var _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "VoiceCard",
+  props: {
+    voice: {},
+    isSelected: { type: Boolean },
+    loading: { type: Boolean },
+    sampleUrl: {},
+    provider: {}
+  },
+  emits: ["select", "generate-voice"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_v_icon = resolveComponent("v-icon");
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(["voice-card", { "voice-card--selected": __props.isSelected, "voice-card--loading": __props.loading }]),
+          onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("select", __props.voice.id))
+        },
+        [
+          createElementVNode("div", _hoisted_1$2, [
+            createElementVNode("div", _hoisted_2$2, [
+              createElementVNode("input", {
+                type: "radio",
+                checked: __props.isSelected,
+                name: `voice-select-${__props.provider}`,
+                onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                }, ["stop"])),
+                onChange: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("select", __props.voice.id))
+              }, null, 40, _hoisted_3$2)
+            ]),
+            createElementVNode("div", _hoisted_4$2, [
+              createElementVNode(
+                "span",
+                _hoisted_5$2,
+                toDisplayString(__props.voice.name),
+                1
+                /* TEXT */
+              ),
+              createElementVNode(
+                "span",
+                _hoisted_6$2,
+                toDisplayString(__props.voice.description),
+                1
+                /* TEXT */
+              )
+            ])
+          ]),
+          createElementVNode("div", _hoisted_7$1, [
+            __props.loading ? (openBlock(), createElementBlock("div", _hoisted_8$1, [
+              createVNode(_component_v_icon, {
+                name: "refresh",
+                class: "spinning",
+                small: ""
+              }),
+              _cache[4] || (_cache[4] = createElementVNode(
+                "span",
+                null,
+                "Generating...",
+                -1
+                /* CACHED */
+              ))
+            ])) : __props.sampleUrl ? (openBlock(), createBlock(AudioPlayer, {
+              key: 1,
+              src: __props.sampleUrl,
+              size: "small"
+            }, null, 8, ["src"])) : (openBlock(), createElementBlock("button", {
+              key: 2,
+              type: "button",
+              class: "voice-card__generate-btn",
+              onClick: _cache[2] || (_cache[2] = withModifiers(($event) => _ctx.$emit("generate-voice", __props.voice.id), ["stop", "prevent"])),
+              disabled: __props.loading
+            }, [
+              createVNode(_component_v_icon, {
+                name: "play_circle",
+                small: ""
+              }),
+              _cache[5] || (_cache[5] = createTextVNode(
+                " Generate Voice ",
+                -1
+                /* CACHED */
+              ))
+            ], 8, _hoisted_9$1))
+          ])
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+var css$2 = "\n.voice-card[data-v-51556c63] {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  border: 2px solid var(--theme--border-color-subdued);\n  border-radius: var(--theme--border-radius);\n  background: var(--theme--background);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  width: 100%;\n}\n.voice-card[data-v-51556c63]:hover {\n  border-color: var(--theme--primary);\n  background: var(--theme--background-subdued);\n}\n.voice-card--selected[data-v-51556c63] {\n  border-color: var(--theme--primary);\n  background: color-mix(in srgb, var(--theme--primary) 5%, var(--theme--background));\n}\n.voice-card--loading[data-v-51556c63] {\n  pointer-events: none;\n  opacity: 0.8;\n}\n.voice-card__info[data-v-51556c63] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 0 0 200px;\n  min-width: 0;\n}\n.voice-card__radio[data-v-51556c63] {\n  flex-shrink: 0;\n}\n.voice-card__radio input[data-v-51556c63] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--theme--primary);\n}\n.voice-card__text[data-v-51556c63] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n  flex: 1;\n}\n.voice-card__name[data-v-51556c63] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--theme--foreground);\n}\n.voice-card__description[data-v-51556c63] {\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.voice-card__player[data-v-51556c63] {\n  flex: 1;\n  min-height: 36px;\n  display: flex;\n  align-items: center;\n}\n.voice-card__generating[data-v-51556c63] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n  background: var(--theme--background-subdued);\n  border-radius: var(--theme--border-radius);\n}\n.voice-card__generate-btn[data-v-51556c63] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border: 1px dashed var(--theme--border-color);\n  border-radius: var(--theme--border-radius);\n  background: transparent;\n  color: var(--theme--foreground-subdued);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n.voice-card__generate-btn[data-v-51556c63]:hover:not(:disabled) {\n  border-color: var(--theme--primary);\n  color: var(--theme--primary);\n  background: var(--theme--background-subdued);\n}\n.voice-card__generate-btn[data-v-51556c63]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.spinning[data-v-51556c63] {\n  animation: spin-51556c63 1s linear infinite;\n}\n@keyframes spin-51556c63 {\nfrom { transform: rotate(0deg);\n}\nto { transform: rotate(360deg);\n}\n}\n";
+n(css$2,{});
+
+var VoiceCard = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-51556c63"], ["__file", "VoiceCard.vue"]]);
+
+const _hoisted_1$1 = { class: "tone-style-selector" };
+const _hoisted_2$1 = { class: "tone-style-selector__options" };
+const _hoisted_3$1 = ["onClick"];
+const _hoisted_4$1 = { class: "tone-style-selector__option-name" };
+const _hoisted_5$1 = {
+  key: 0,
+  class: "tone-style-selector__custom"
+};
+const _hoisted_6$1 = ["value", "placeholder"];
+var _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "ToneStyleSelector",
+  props: {
+    items: {},
+    selectedId: {},
+    customValue: {},
+    placeholder: {}
+  },
+  emits: ["select", "custom-change"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_v_icon = resolveComponent("v-icon");
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createElementVNode("div", _hoisted_2$1, [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(__props.items, (item) => {
+              return openBlock(), createElementBlock("button", {
+                key: item.id,
+                class: normalizeClass(["tone-style-selector__option", { "tone-style-selector__option--selected": __props.selectedId === item.id }]),
+                onClick: ($event) => _ctx.$emit("select", item.id)
+              }, [
+                createElementVNode(
+                  "span",
+                  _hoisted_4$1,
+                  toDisplayString(item.name),
+                  1
+                  /* TEXT */
+                ),
+                __props.selectedId === item.id ? (openBlock(), createBlock(_component_v_icon, {
+                  key: 0,
+                  name: "check",
+                  small: ""
+                })) : createCommentVNode("v-if", true)
+              ], 10, _hoisted_3$1);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ]),
+        __props.selectedId === "other" ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+          createElementVNode("input", {
+            type: "text",
+            class: "tone-style-selector__custom-input",
+            value: __props.customValue,
+            placeholder: __props.placeholder,
+            onInput: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("custom-change", $event.target.value))
+          }, null, 40, _hoisted_6$1),
+          _cache[1] || (_cache[1] = createElementVNode(
+            "p",
+            { class: "tone-style-selector__custom-hint" },
+            " Enter a custom description for the voice ",
+            -1
+            /* CACHED */
+          ))
+        ])) : createCommentVNode("v-if", true)
+      ]);
+    };
+  }
+});
+
+var css$1 = "\n.tone-style-selector[data-v-992c7031] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.tone-style-selector__options[data-v-992c7031] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.tone-style-selector__option[data-v-992c7031] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  border: 1px solid var(--theme--border-color-subdued);\n  border-radius: 20px;\n  background: var(--theme--background);\n  color: var(--theme--foreground);\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.tone-style-selector__option[data-v-992c7031]:hover {\n  border-color: var(--theme--primary);\n  background: var(--theme--background-subdued);\n}\n.tone-style-selector__option--selected[data-v-992c7031] {\n  border-color: var(--theme--primary);\n  background: var(--theme--primary);\n  color: var(--theme--primary-foreground, #fff);\n}\n.tone-style-selector__option--selected[data-v-992c7031]:hover {\n  background: var(--theme--primary-accent);\n}\n.tone-style-selector__option-name[data-v-992c7031] {\n  white-space: nowrap;\n}\n.tone-style-selector__custom[data-v-992c7031] {\n  padding: 12px;\n  background: var(--theme--background-subdued);\n  border-radius: var(--theme--border-radius);\n}\n.tone-style-selector__custom-input[data-v-992c7031] {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid var(--theme--form--field--input--border-color);\n  border-radius: var(--theme--border-radius);\n  background: var(--theme--form--field--input--background);\n  color: var(--theme--foreground);\n  font-size: 14px;\n}\n.tone-style-selector__custom-input[data-v-992c7031]:focus {\n  outline: none;\n  border-color: var(--theme--primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme--primary) 20%, transparent);\n}\n.tone-style-selector__custom-input[data-v-992c7031]::placeholder {\n  color: var(--theme--foreground-subdued);\n}\n.tone-style-selector__custom-hint[data-v-992c7031] {\n  margin: 8px 0 0 0;\n  font-size: 12px;\n  color: var(--theme--foreground-subdued);\n}\n";
+n(css$1,{});
+
+var ToneStyleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-992c7031"], ["__file", "ToneStyleSelector.vue"]]);
+
+const VOICE_MODELS = [
+  { id: "gemini", name: "Gemini" },
+  { 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";
+function useVoicingApi(api) {
+  async function fetchVoices(collection = "Voices") {
+    try {
+      const response = await api.get(`/items/${collection}`, {
+        params: {
+          filter: { status: { _eq: "published" } },
+          sort: ["sort", "name"],
+          fields: ["id", "name", "voice_id", "provider", "description", "sample_url", "sample_file", "sort"]
+        }
+      });
+      return response.data.data || [];
+    } catch (error) {
+      console.error("Failed to fetch voices:", error);
+      return [];
+    }
+  }
+  async function fetchFlowId() {
+    try {
+      const response = await api.get("/items/WidgetConfig", {
+        params: { fields: ["voice_flow_id"] }
+      });
+      return response.data.data?.voice_flow_id || DEFAULT_FLOW_ID;
+    } catch {
+      return DEFAULT_FLOW_ID;
+    }
+  }
+  async function fetchTones(collection = "VoiceTones") {
+    try {
+      const response = await api.get(`/items/${collection}`, {
+        params: {
+          filter: { status: { _eq: "published" } },
+          sort: ["sort", "name"],
+          fields: ["id", "name", "prompt", "sort", "is_custom"]
+        }
+      });
+      const tones = response.data.data || [];
+      tones.push({
+        id: "other",
+        name: "Other (Custom)",
+        prompt: "",
+        sort: 9999,
+        is_custom: true
+      });
+      return tones;
+    } catch (error) {
+      console.error("Failed to fetch tones:", error);
+      return [
+        { id: "teacher", name: "Teacher", prompt: "Speak in a clear, educational, and patient manner", sort: 1, is_custom: false },
+        { id: "storyteller", name: "Storyteller", prompt: "Speak in an engaging, narrative style with varied pacing", sort: 2, is_custom: false },
+        { id: "podcaster", name: "Podcaster", prompt: "Speak in a conversational, informal yet professional tone", sort: 3, is_custom: false },
+        { id: "other", name: "Other (Custom)", prompt: "", sort: 9999, is_custom: true }
+      ];
+    }
+  }
+  async function fetchStyles(collection = "VoiceStyles") {
+    try {
+      const response = await api.get(`/items/${collection}`, {
+        params: {
+          filter: { status: { _eq: "published" } },
+          sort: ["sort", "name"],
+          fields: ["id", "name", "prompt", "sort", "is_custom"]
+        }
+      });
+      const styles = response.data.data || [];
+      styles.push({
+        id: "other",
+        name: "Other (Custom)",
+        prompt: "",
+        sort: 9999,
+        is_custom: true
+      });
+      return styles;
+    } catch (error) {
+      console.error("Failed to fetch styles:", error);
+      return [
+        { id: "happy", name: "Happy", prompt: "enthusiastic and cheerful", sort: 1, is_custom: false },
+        { id: "chill", name: "Chill", prompt: "relaxed and calm", sort: 2, is_custom: false },
+        { id: "excited", name: "Excited", prompt: "energetic and animated", sort: 3, is_custom: false },
+        { id: "other", name: "Other (Custom)", prompt: "", sort: 9999, is_custom: true }
+      ];
+    }
+  }
+  async function generateVoiceSample(voiceId, provider, flowId = DEFAULT_FLOW_ID) {
+    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.");
+    }
+    const voicingPayload = {
+      texts: [SAMPLE_TEXT],
+      provider,
+      preprocessing: false,
+      title: `Voice Sample - ${voiceId}`
+    };
+    if (provider === "gemini") {
+      voicingPayload.speakers = [{ voice: voiceId, name: "Sample", style: "neutral" }];
+      voicingPayload.audio_model = "gemini-2.5-pro-tts";
+      voicingPayload.text_model = "gemini-2.5-flash";
+    } else {
+      voicingPayload.voice_id = voiceId;
+    }
+    try {
+      const response = await api.post(`/flows/trigger/${effectiveFlowId}`, voicingPayload);
+      const flowResponse = response.data;
+      const audioFileId = flowResponse?.data?.audio_file_id || flowResponse?.audio_file_id || null;
+      if (audioFileId) {
+        const url = await resolveAudioFileUrl(audioFileId);
+        return { url, audioFileId };
+      }
+      throw new Error("No audio file returned from voice generation");
+    } catch (e) {
+      console.error("Failed to generate voice sample:", e);
+      throw new Error(e.response?.data?.detail || e.message || "Failed to generate sample");
+    }
+  }
+  async function generateFullVoiceover(request) {
+    const rawFlowId = request.flowId?.trim() || "";
+    const effectiveFlowId = rawFlowId ? rawFlowId : 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.");
+    }
+    let texts = [];
+    let lessonTitle = `Lesson ${request.lessonId}`;
+    try {
+      const lessonResponse = await api.get(`/items/SM_Lessons/${request.lessonId}`, {
+        params: { fields: ["text", "title"] }
+      });
+      const textContent = lessonResponse.data.data?.text || "";
+      lessonTitle = lessonResponse.data.data?.title || lessonTitle;
+      if (!textContent.trim()) {
+        throw new Error("No text content available for voiceover generation");
+      }
+      texts = textContent.split(/\n\n+/).filter((t) => t.trim().length > 0);
+      if (texts.length === 0) {
+        texts = [textContent];
+      }
+      console.log(`[Voice Widget] Generating voiceover for "${lessonTitle}" with ${texts.length} text segments`);
+    } catch (e) {
+      console.error("Failed to fetch lesson text content:", e);
+      throw new Error(e.message || "Failed to fetch lesson text content");
+    }
+    const voicingPayload = {
+      texts,
+      provider: request.provider,
+      preprocessing: request.preprocessing,
+      title: `Voiceover - ${lessonTitle}`
+    };
+    if (request.provider === "gemini") {
+      voicingPayload.speakers = [{
+        voice: request.voiceId,
+        name: "Narrator",
+        style: request.style
+      }];
+      voicingPayload.audio_model = "gemini-2.5-pro-tts";
+      voicingPayload.text_model = "gemini-2.5-flash";
+    } else {
+      voicingPayload.voice_id = request.voiceId;
+    }
+    try {
+      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) {
+        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);
+          }
+        }
+      }
+      return {
+        audio_file_id: fileUuid || data?.audio_file_id || null,
+        status: data?.status || null,
+        callback_data: data?.callback_data || null,
+        generation_time: data?.generation_time || null
+      };
+    } catch (e) {
+      console.error("Failed to generate voiceover:", e);
+      throw new Error(e.response?.data?.detail || e.message || "Failed to generate voiceover");
+    }
+  }
+  function getAudioUrl(fileId) {
+    return `/assets/${fileId}`;
+  }
+  async function resolveAudioFileUrl(audioFilesRecordId) {
+    try {
+      const response = await api.get(`/items/AudioFiles/${audioFilesRecordId}`, {
+        params: { fields: ["file"] }
+      });
+      const fileId = response.data.data?.file;
+      if (fileId) {
+        return `/assets/${fileId}`;
+      }
+    } catch (e) {
+      console.warn("[Voice Widget] Could not resolve AudioFiles record:", e);
+    }
+    return `/assets/${audioFilesRecordId}`;
+  }
+  async function fetchVoiceVariants(lessonId) {
+    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 || [];
+    } catch (error) {
+      console.error("Failed to fetch voice variants:", error);
+      return [];
+    }
+  }
+  async function updateVoiceSampleFile(voiceId, audioFilesRecordId, collection = "Voices") {
+    try {
+      const response = await api.get(`/items/AudioFiles/${audioFilesRecordId}`, {
+        params: { fields: ["file"] }
+      });
+      const fileUuid = response.data.data?.file;
+      if (!fileUuid) {
+        console.warn("[Voice Widget] Could not get file UUID from AudioFiles record");
+        return;
+      }
+      await api.patch(`/items/${collection}/${voiceId}`, {
+        sample_file: fileUuid
+      });
+      console.log(`[Voice Widget] Updated voice ${voiceId} sample_file to ${fileUuid}`);
+    } catch (error) {
+      console.error("[Voice Widget] Failed to update voice sample_file:", error);
+    }
+  }
+  return {
+    fetchVoices,
+    fetchFlowId,
+    fetchTones,
+    fetchStyles,
+    generateVoiceSample,
+    generateFullVoiceover,
+    getAudioUrl,
+    resolveAudioFileUrl,
+    fetchVoiceVariants,
+    updateVoiceSampleFile
+  };
+}
+
+const _hoisted_1 = { class: "voice-widget" };
+const _hoisted_2 = {
+  key: 0,
+  class: "widget__processing"
+};
+const _hoisted_3 = { class: "widget__progress" };
+const _hoisted_4 = { class: "widget__progress-bar" };
+const _hoisted_5 = {
+  key: 0,
+  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_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_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 = {
+  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"
+};
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "interface",
+  props: {
+    value: {},
+    collection: {},
+    field: {},
+    primaryKey: {},
+    flowId: { default: "" },
+    voicesCollection: { default: "Voices" },
+    tonesCollection: { default: "VoiceTones" },
+    stylesCollection: { default: "VoiceStyles" },
+    defaultCollapsed: { type: Boolean, default: true }
+  },
+  emits: ["input"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const api = useApi();
+    const {
+      fetchVoices,
+      fetchFlowId,
+      fetchTones,
+      fetchStyles,
+      generateVoiceSample,
+      generateFullVoiceover,
+      getAudioUrl,
+      resolveAudioFileUrl,
+      fetchVoiceVariants,
+      updateVoiceSampleFile
+    } = 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 selectedModel = ref("gemini");
+    const selectedVoiceId = ref(null);
+    const voices = ref([]);
+    const voiceSamples = ref({});
+    const generatingSampleFor = ref(null);
+    const tones = ref([]);
+    const styles = ref([]);
+    const selectedToneId = ref(null);
+    const selectedStyleId = ref(null);
+    const customTone = ref("");
+    const customStyle = ref("");
+    const preprocessingEnabled = ref(false);
+    const processingMessage = ref("Generating voiceover...");
+    const progressPercent = ref(0);
+    const errorMessage = ref(null);
+    const generatedAudioId = ref(null);
+    const generatedAudioUrl = ref(null);
+    const hasExistingVoices = ref(false);
+    const allVariants = ref([]);
+    const currentVariantIndex = ref(0);
+    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(() => {
+      const variant = allVariants.value[currentVariantIndex.value];
+      if (!variant?.date_created) return null;
+      return new Date(variant.date_created).toLocaleString();
+    });
+    function selectModel(model) {
+      selectedModel.value = model;
+      selectedVoiceId.value = null;
+    }
+    function selectVoice(voiceId) {
+      selectedVoiceId.value = voiceId;
+    }
+    function selectTone(toneId) {
+      selectedToneId.value = toneId;
+    }
+    function selectStyle(styleId) {
+      selectedStyleId.value = styleId;
+    }
+    function updateCustomTone(value) {
+      customTone.value = value;
+    }
+    function updateCustomStyle(value) {
+      customStyle.value = value;
+    }
+    async function generateVoice(voiceId) {
+      const voice = voices.value.find((v) => v.id === voiceId);
+      if (!voice) {
+        console.warn("[Voice Widget] Generate Voice: voice not found for id", voiceId);
+        return;
+      }
+      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);
+        const voiceIndex = voices.value.findIndex((v) => v.id === voiceId);
+        if (voiceIndex !== -1) {
+          voices.value[voiceIndex].sample_file = url.replace("/assets/", "");
+        }
+      } catch (error) {
+        console.error("[Voice Widget] Failed to generate voice:", error?.message ?? error);
+      } finally {
+        generatingSampleFor.value = null;
+      }
+    }
+    function getSelectedTonePrompt() {
+      if (selectedToneId.value === "other") {
+        return customTone.value;
+      }
+      const tone = tones.value.find((t) => t.id === selectedToneId.value);
+      return tone?.prompt || "";
+    }
+    function getSelectedStylePrompt() {
+      if (selectedStyleId.value === "other") {
+        return customStyle.value;
+      }
+      const style = styles.value.find((s) => s.id === selectedStyleId.value);
+      return style?.prompt || "";
+    }
+    async function generateVoiceover() {
+      if (!canGenerate.value) return;
+      currentMode.value = "progress";
+      errorMessage.value = null;
+      processingMessage.value = "Generating voiceover...";
+      progressPercent.value = 10;
+      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,
+          style: combinedStyle,
+          preprocessing: preprocessingEnabled.value,
+          flowId: flowId.value,
+          lessonId: props.primaryKey,
+          toneId: selectedToneId.value || void 0,
+          styleId: selectedStyleId.value || void 0
+        });
+        progressPercent.value = 90;
+        if (result.audio_file_id) {
+          generatedAudioId.value = result.audio_file_id;
+          generatedAudioUrl.value = getAudioUrl(result.audio_file_id);
+          progressPercent.value = 100;
+          currentMode.value = "result";
+        } else if (result.status === "processing" && result.callback_data) {
+          processingMessage.value = "Processing in background...";
+          await pollForCompletion(result.callback_data);
+        }
+      } catch (error) {
+        errorMessage.value = error.message || "Failed to generate voiceover";
+        progressPercent.value = 0;
+      }
+    }
+    async function pollForCompletion(callbackData) {
+      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();
+    }
+    function goBackToSelection() {
+      currentMode.value = "selection";
+      errorMessage.value = null;
+      progressPercent.value = 0;
+    }
+    async function prevVariant() {
+      if (currentVariantIndex.value > 0) {
+        currentVariantIndex.value--;
+        await loadVariantAtIndex(currentVariantIndex.value);
+      }
+    }
+    async function nextVariant() {
+      if (currentVariantIndex.value < allVariants.value.length - 1) {
+        currentVariantIndex.value++;
+        await loadVariantAtIndex(currentVariantIndex.value);
+      }
+    }
+    async function loadVariantAtIndex(index) {
+      const variant = allVariants.value[index];
+      if (!variant) return;
+      const audioFileId = variant.audio_file_id;
+      generatedAudioId.value = audioFileId;
+      const isUuid = audioFileId.includes("-");
+      generatedAudioUrl.value = isUuid ? getAudioUrl(audioFileId) : await resolveAudioFileUrl(audioFileId);
+      const config = variant.voice_config;
+      if (config) {
+        if (config.provider) {
+          selectedModel.value = config.provider;
+        }
+        if (config.voice_id) {
+          const matchingVoice = voices.value.find((v) => v.name === config.voice_id);
+          if (matchingVoice) {
+            selectedVoiceId.value = matchingVoice.id;
+          }
+        }
+        if (config.tone_id) {
+          selectedToneId.value = config.tone_id;
+        }
+        if (config.style_id) {
+          selectedStyleId.value = config.style_id;
+        }
+        if (typeof config.preprocessing === "boolean") {
+          preprocessingEnabled.value = config.preprocessing;
+        }
+      }
+    }
+    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 viewGeneratedVoices() {
+      try {
+        const variants = await fetchVoiceVariants(props.primaryKey);
+        if (variants.length > 0) {
+          allVariants.value = variants;
+          currentVariantIndex.value = 0;
+          await loadVariantAtIndex(0);
+          currentMode.value = "result";
+        }
+      } catch (error) {
+        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;
+      try {
+        if (!props.flowId) {
+          flowId.value = await fetchFlowId();
+        } else {
+          flowId.value = props.flowId;
+        }
+        const [loadedVoices, loadedTones, loadedStyles] = await Promise.all([
+          fetchVoices(props.voicesCollection),
+          fetchTones(props.tonesCollection),
+          fetchStyles(props.stylesCollection)
+        ]);
+        voices.value = loadedVoices;
+        tones.value = loadedTones;
+        styles.value = loadedStyles;
+        if (currentVoices.value.length > 0 && !selectedVoiceId.value) {
+          selectedVoiceId.value = currentVoices.value[0].id;
+        }
+        if (tones.value.length > 0 && !selectedToneId.value) {
+          selectedToneId.value = tones.value[0].id;
+        }
+        if (styles.value.length > 0 && !selectedStyleId.value) {
+          selectedStyleId.value = styles.value[0].id;
+        }
+        if (props.primaryKey) {
+          const variants = await fetchVoiceVariants(props.primaryKey);
+          hasExistingVoices.value = variants.length > 0;
+        }
+        initFromValue();
+      } catch (error) {
+        initError.value = error.message || "Failed to load configuration";
+      } finally {
+        loading.value = false;
+      }
+    }
+    async function initFromValue() {
+      if (!props.value || typeof props.value !== "object") return;
+      if (props.value.model) {
+        selectedModel.value = props.value.model;
+      }
+      if (props.value.voice_id) {
+        selectedVoiceId.value = props.value.voice_id;
+      }
+      if (props.value.tone_id) {
+        selectedToneId.value = props.value.tone_id;
+      }
+      if (props.value.style_id) {
+        selectedStyleId.value = props.value.style_id;
+      }
+      if (props.value.custom_tone) {
+        customTone.value = props.value.custom_tone;
+      }
+      if (props.value.custom_style) {
+        customStyle.value = props.value.custom_style;
+      }
+      if (props.value.preprocessing !== void 0) {
+        preprocessingEnabled.value = props.value.preprocessing;
+      }
+      if (props.value.audio_file_id) {
+        const audioFileId = props.value.audio_file_id;
+        const isUuid = audioFileId.includes("-");
+        if (isUuid) {
+          generatedAudioId.value = audioFileId;
+          generatedAudioUrl.value = getAudioUrl(audioFileId);
+        } else {
+          generatedAudioId.value = audioFileId;
+          generatedAudioUrl.value = await resolveAudioFileUrl(audioFileId);
+        }
+      }
+    }
+    watch(() => props.value, initFromValue, { deep: true });
+    watch(selectedModel, () => {
+      if (currentVoices.value.length > 0) {
+        selectedVoiceId.value = currentVoices.value[0].id;
+      }
+    });
+    onMounted(initialize);
+    return (_ctx, _cache) => {
+      const _component_v_icon = resolveComponent("v-icon");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createCommentVNode(" Processing State (Page 2) "),
+        currentMode.value === "progress" ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            createVNode(_component_v_icon, {
+              name: "refresh",
+              class: "spinning"
+            }),
+            createElementVNode(
+              "span",
+              null,
+              toDisplayString(processingMessage.value),
+              1
+              /* TEXT */
+            )
+          ]),
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode(
+              "div",
+              {
+                class: "widget__progress-fill",
+                style: normalizeStyle({ width: progressPercent.value + "%" })
+              },
+              null,
+              4
+              /* STYLE */
+            )
+          ]),
+          errorMessage.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            createVNode(_component_v_icon, { name: "error" }),
+            createElementVNode(
+              "span",
+              null,
+              toDisplayString(errorMessage.value),
+              1
+              /* TEXT */
+            ),
+            createElementVNode("div", { class: "widget__error-actions" }, [
+              createElementVNode("button", {
+                class: "widget__btn widget__btn--secondary",
+                onClick: goBackToSelection
+              }, "Back"),
+              createElementVNode("button", {
+                class: "widget__btn widget__btn--primary",
+                onClick: retryGeneration
+              }, "Retry")
+            ])
+          ])) : createCommentVNode("v-if", true)
+        ])) : loading.value ? (openBlock(), createElementBlock(
+          Fragment,
+          { key: 1 },
+          [
+            createCommentVNode(" Loading State "),
+            createElementVNode("div", _hoisted_6, [
+              createVNode(_component_v_icon, {
+                name: "refresh",
+                class: "spinning"
+              }),
+              _cache[3] || (_cache[3] = createElementVNode(
+                "span",
+                null,
+                "Loading configuration...",
+                -1
+                /* CACHED */
+              ))
+            ])
+          ],
+          2112
+          /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+        )) : initError.value ? (openBlock(), createElementBlock(
+          Fragment,
+          { key: 2 },
+          [
+            createCommentVNode(" Error State "),
+            createElementVNode("div", _hoisted_7, [
+              createVNode(_component_v_icon, { name: "error" }),
+              createElementVNode(
+                "span",
+                null,
+                toDisplayString(initError.value),
+                1
+                /* TEXT */
+              ),
+              createElementVNode("button", {
+                class: "widget__retry",
+                onClick: initialize
+              }, "Retry")
+            ])
+          ],
+          2112
+          /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+        )) : currentMode.value === "selection" ? (openBlock(), createElementBlock(
+          Fragment,
+          { key: 3 },
+          [
+            createCommentVNode(" Page 1: Selection Mode "),
+            createElementVNode("div", _hoisted_8, [
+              createElementVNode("div", _hoisted_9, [
+                createElementVNode("div", _hoisted_10, [
+                  createElementVNode("h2", _hoisted_11, [
+                    createVNode(_component_v_icon, { name: "mic" }),
+                    _cache[4] || (_cache[4] = createTextVNode(
+                      " Voice Generation ",
+                      -1
+                      /* CACHED */
+                    )),
+                    createElementVNode("button", {
+                      type: "button",
+                      class: "widget__collapse-btn",
+                      title: headerExpanded.value ? "Collapse" : "Expand",
+                      onClick: _cache[0] || (_cache[0] = ($event) => headerExpanded.value = !headerExpanded.value)
+                    }, [
+                      createVNode(_component_v_icon, {
+                        name: headerExpanded.value ? "expand_less" : "expand_more",
+                        small: ""
+                      }, null, 8, ["name"])
+                    ], 8, _hoisted_12)
+                  ]),
+                  _cache[5] || (_cache[5] = createElementVNode(
+                    "p",
+                    { class: "widget__subtitle" },
+                    " Select a voice model, voice, tone, and style for your voiceover ",
+                    -1
+                    /* CACHED */
+                  ))
+                ]),
+                withDirectives(createElementVNode(
+                  "div",
+                  _hoisted_13,
+                  [
+                    createElementVNode("div", _hoisted_14, [
+                      _cache[6] || (_cache[6] = createElementVNode(
+                        "label",
+                        { class: "widget__url-label" },
+                        "Flow ID:",
+                        -1
+                        /* CACHED */
+                      )),
+                      withDirectives(createElementVNode("input", {
+                        type: "text",
+                        class: "widget__url-field",
+                        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => flowId.value = $event),
+                        disabled: savingUrl.value
+                      }, null, 8, _hoisted_15), [
+                        [vModelText, flowId.value]
+                      ])
+                    ])
+                  ],
+                  512
+                  /* NEED_PATCH */
+                ), [
+                  [vShow, headerExpanded.value]
+                ])
+              ])
+            ]),
+            createCommentVNode(" Model Selection "),
+            createElementVNode("div", _hoisted_16, [
+              _cache[7] || (_cache[7] = createElementVNode(
+                "label",
+                { class: "widget__section-label" },
+                "Voice Model",
+                -1
+                /* CACHED */
+              )),
+              createElementVNode("div", _hoisted_17, [
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(unref(VOICE_MODELS), (model) => {
+                    return openBlock(), createElementBlock("button", {
+                      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);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])
+            ]),
+            createCommentVNode(" Voice Selection "),
+            createElementVNode("div", _hoisted_19, [
+              _cache[8] || (_cache[8] = createElementVNode(
+                "label",
+                { class: "widget__section-label" },
+                "Voice",
+                -1
+                /* CACHED */
+              )),
+              createElementVNode("div", _hoisted_20, [
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(currentVoices.value, (voice) => {
+                    return openBlock(), createBlock(VoiceCard, {
+                      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),
+                      provider: selectedModel.value,
+                      onSelect: selectVoice,
+                      onGenerateVoice: generateVoice
+                    }, null, 8, ["voice", "is-selected", "loading", "sample-url", "provider"]);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])
+            ]),
+            createCommentVNode(" Tone Selection "),
+            createElementVNode("div", _hoisted_21, [
+              _cache[9] || (_cache[9] = createElementVNode(
+                "label",
+                { class: "widget__section-label" },
+                "Voice Tone",
+                -1
+                /* CACHED */
+              )),
+              createVNode(ToneStyleSelector, {
+                items: tones.value,
+                "selected-id": selectedToneId.value,
+                "custom-value": customTone.value,
+                placeholder: "Select a tone...",
+                onSelect: selectTone,
+                onCustomChange: updateCustomTone
+              }, null, 8, ["items", "selected-id", "custom-value"])
+            ]),
+            createCommentVNode(" Style Selection "),
+            createElementVNode("div", _hoisted_22, [
+              _cache[10] || (_cache[10] = createElementVNode(
+                "label",
+                { class: "widget__section-label" },
+                "Voice Style",
+                -1
+                /* CACHED */
+              )),
+              createVNode(ToneStyleSelector, {
+                items: styles.value,
+                "selected-id": selectedStyleId.value,
+                "custom-value": customStyle.value,
+                placeholder: "Select a style...",
+                onSelect: selectStyle,
+                onCustomChange: updateCustomStyle
+              }, null, 8, ["items", "selected-id", "custom-value"])
+            ]),
+            createCommentVNode(" Preprocessing Toggle "),
+            createElementVNode("div", _hoisted_23, [
+              createElementVNode("label", _hoisted_24, [
+                withDirectives(createElementVNode(
+                  "input",
+                  {
+                    type: "checkbox",
+                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => preprocessingEnabled.value = $event)
+                  },
+                  null,
+                  512
+                  /* NEED_PATCH */
+                ), [
+                  [vModelCheckbox, preprocessingEnabled.value]
+                ]),
+                _cache[11] || (_cache[11] = createElementVNode(
+                  "span",
+                  { class: "widget__toggle-label" },
+                  "Enable Text Preprocessing",
+                  -1
+                  /* CACHED */
+                ))
+              ]),
+              _cache[12] || (_cache[12] = createElementVNode(
+                "p",
+                { class: "widget__toggle-note" },
+                "Preprocesses text before voice generation for better results",
+                -1
+                /* CACHED */
+              ))
+            ]),
+            createCommentVNode(" Footer Actions "),
+            createElementVNode("div", _hoisted_25, [
+              _cache[13] || (_cache[13] = createElementVNode(
+                "div",
+                { class: "widget__footer-left" },
+                null,
+                -1
+                /* CACHED */
+              )),
+              createElementVNode("div", _hoisted_26, [
+                createElementVNode("button", {
+                  class: "widget__btn widget__btn--secondary",
+                  onClick: viewGeneratedVoices,
+                  disabled: !hasExistingVoices.value
+                }, " View Generated Voices ", 8, _hoisted_27),
+                createElementVNode("button", {
+                  class: "widget__btn widget__btn--primary",
+                  onClick: generateVoiceover,
+                  disabled: !canGenerate.value
+                }, " Generate Voiceover ", 8, _hoisted_28)
+              ])
+            ])
+          ],
+          64
+          /* STABLE_FRAGMENT */
+        )) : currentMode.value === "result" ? (openBlock(), createElementBlock(
+          Fragment,
+          { key: 4 },
+          [
+            createCommentVNode(" Page 3: Result Mode "),
+            createElementVNode("div", _hoisted_29, [
+              createElementVNode("div", _hoisted_30, [
+                createElementVNode("div", _hoisted_31, [
+                  createElementVNode("h2", _hoisted_32, [
+                    createVNode(_component_v_icon, { name: "check_circle" }),
+                    _cache[14] || (_cache[14] = createTextVNode(
+                      " Voiceover Generated ",
+                      -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),
+                    1
+                    /* TEXT */
+                  )
+                ])) : createCommentVNode("v-if", true)
+              ])
+            ]),
+            createElementVNode("div", { class: "widget__footer" }, [
+              createElementVNode("div", { class: "widget__footer-left" }, [
+                createElementVNode("button", {
+                  class: "widget__btn widget__btn--secondary",
+                  onClick: goBackToSelection
+                }, " Return ")
+              ]),
+              createElementVNode("div", { class: "widget__footer-right" }, [
+                createElementVNode("button", {
+                  class: "widget__btn widget__btn--secondary",
+                  onClick: regenerateVoiceover
+                }, " Regenerate "),
+                createElementVNode("button", {
+                  class: "widget__btn widget__btn--primary",
+                  onClick: confirmVoiceover
+                }, " Confirm ")
+              ])
+            ])
+          ],
+          64
+          /* STABLE_FRAGMENT */
+        )) : createCommentVNode("v-if", true)
+      ]);
+    };
+  }
+});
+
+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";
+n(css,{});
+
+var InterfaceComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f98cb13e"], ["__file", "interface.vue"]]);
+
+var index = defineInterface({
+  id: "voice-widget",
+  name: "Voice Widget",
+  icon: "mic",
+  description: "Voice generation with model/voice selection and audio preview",
+  component: InterfaceComponent,
+  options: [
+    {
+      field: "flowId",
+      name: "Flow ID",
+      type: "string",
+      meta: {
+        width: "full",
+        interface: "input",
+        note: "Flow ID for routing to voicing service (from WidgetConfig)"
+      },
+      schema: {
+        default_value: ""
+      }
+    },
+    {
+      field: "voicesCollection",
+      name: "Voices Collection",
+      type: "string",
+      meta: {
+        width: "half",
+        interface: "input",
+        note: "Collection containing voice definitions (default: Voices)"
+      },
+      schema: {
+        default_value: "Voices"
+      }
+    },
+    {
+      field: "tonesCollection",
+      name: "Tones Collection",
+      type: "string",
+      meta: {
+        width: "half",
+        interface: "input",
+        note: "Collection containing voice tone definitions (default: VoiceTones)"
+      },
+      schema: {
+        default_value: "VoiceTones"
+      }
+    },
+    {
+      field: "stylesCollection",
+      name: "Styles Collection",
+      type: "string",
+      meta: {
+        width: "half",
+        interface: "input",
+        note: "Collection containing voice style definitions (default: VoiceStyles)"
+      },
+      schema: {
+        default_value: "VoiceStyles"
+      }
+    },
+    {
+      field: "defaultCollapsed",
+      name: "Default Collapsed",
+      type: "boolean",
+      meta: {
+        width: "half",
+        interface: "boolean",
+        note: "When true (default), header starts collapsed."
+      },
+      schema: {
+        default_value: true
+      }
+    }
+  ],
+  types: ["json", "string"]
+});
+
+export { index as default };