@ssml-builder-js/ssml-editor-react 2.13.0 → 2.14.0

package/dist/index.mjs

@@ -4999,28 +4999,72 @@ function localizedElementLabel(element, locale) {
 function filteredVoices(voiceCatalog, locale, region, style) {
   return (voiceCatalog ?? []).filter((voice) => {
     if (locale && voice.locale.toLowerCase() !== locale.toLowerCase()) return false;
-    if (region && voice.region && voice.region.toLowerCase() !== region.toLowerCase()) return false;
+    const regions = [voice.region, ...voice.regions ?? []].filter(
+      (candidate) => Boolean(candidate)
+    );
+    if (region && regions.length > 0 && !regions.some((candidate) => candidate.toLowerCase() === region.toLowerCase()))
+      return false;
     if (style && !voice.styles?.some((candidate) => candidate.toLowerCase() === style.toLowerCase())) return false;
     return true;
   });
 }
-function DefaultVoiceSelector({ value, voices, readOnly, locale, onChange }) {
-  return /* @__PURE__ */ jsxs2(
-    "select",
-    {
-      "aria-label": locale === "ja" ? "\u97F3\u58F0" : "Voice",
-      value,
-      disabled: readOnly,
-      onChange: (event) => onChange(event.target.value),
-      children: [
-        /* @__PURE__ */ jsx6("option", { value: "", children: locale === "ja" ? "\u97F3\u58F0\u3092\u9078\u629E" : "Select a voice" }),
-        voices.map((voice) => /* @__PURE__ */ jsxs2("option", { value: voice.name, children: [
-          voice.name,
-          voice.preview || voice.status === "preview" ? " (preview)" : ""
-        ] }, voice.name))
-      ]
-    }
-  );
+function VoiceCapabilityMatrix({
+  voice,
+  locale
+}) {
+  const status = voice.status ?? (voice.preview ? "preview" : void 0);
+  return /* @__PURE__ */ jsxs2("div", { className: "ssml-editor-voice-capabilities", "data-voice-capabilities": "", children: [
+    /* @__PURE__ */ jsxs2("div", { children: [
+      locale === "ja" ? "\u30B9\u30C6\u30FC\u30BF\u30B9" : "Status",
+      ": ",
+      status?.toUpperCase() ?? (locale === "ja" ? "GA" : "GA"),
+      status === "preview" || status === "deprecated" ? /* @__PURE__ */ jsx6("span", { role: "status", "aria-label": status, className: "ssml-editor-voice-warning-badge", children: status === "preview" ? "\u26A0 Preview" : "\u26A0 Deprecated" }) : null
+    ] }),
+    (voice.regions?.length || voice.region) && /* @__PURE__ */ jsxs2("div", { children: [
+      locale === "ja" ? "\u30EA\u30FC\u30B8\u30E7\u30F3" : "Regions",
+      ":",
+      " ",
+      [...voice.regions ?? [], ...voice.region ? [voice.region] : []].filter((region, index, all) => all.indexOf(region) === index).join(", ")
+    ] }),
+    voice.supportedTags && voice.supportedTags.length > 0 && /* @__PURE__ */ jsxs2("div", { children: [
+      locale === "ja" ? "\u5BFE\u5FDC\u30BF\u30B0" : "Supported tags",
+      ": ",
+      voice.supportedTags.join(", ")
+    ] }),
+    voice.unsupportedTags && voice.unsupportedTags.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "ssml-editor-voice-unsupported", children: [
+      locale === "ja" ? "\u975E\u5BFE\u5FDC\u30BF\u30B0" : "Unsupported tags",
+      ": ",
+      voice.unsupportedTags.join(", ")
+    ] })
+  ] });
+}
+function DefaultVoiceSelector({
+  value,
+  voices,
+  selectedVoice,
+  readOnly,
+  locale,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    /* @__PURE__ */ jsxs2(
+      "select",
+      {
+        "aria-label": locale === "ja" ? "\u97F3\u58F0" : "Voice",
+        value,
+        disabled: readOnly,
+        onChange: (event) => onChange(event.target.value),
+        children: [
+          /* @__PURE__ */ jsx6("option", { value: "", children: locale === "ja" ? "\u97F3\u58F0\u3092\u9078\u629E" : "Select a voice" }),
+          voices.map((voice) => /* @__PURE__ */ jsxs2("option", { value: voice.name, children: [
+            voice.name,
+            voice.preview || voice.status === "preview" ? " (preview)" : ""
+          ] }, voice.name))
+        ]
+      }
+    ),
+    selectedVoice ? /* @__PURE__ */ jsx6(VoiceCapabilityMatrix, { voice: selectedVoice, locale }) : null
+  ] });
 }
 function VisualElementInspector({
   document: document2,
@@ -5041,6 +5085,9 @@ function VisualElementInspector({
   }
   const fields = getElementFields(element);
   const availableVoices = filteredVoices(voiceCatalog, voiceLocale, voiceRegion, voiceStyle);
+  const selectedVoice = voiceCatalog?.find(
+    (voice) => voice.name === (element.type === "voice" ? element.name : void 0)
+  );
   const renderSelector = renderVoiceSelector ?? DefaultVoiceSelector;
   return /* @__PURE__ */ jsxs2("fieldset", { children: [
     /* @__PURE__ */ jsx6("legend", { children: `<${elementLabel(element)}>` }),
@@ -5086,6 +5133,7 @@ function VisualElementInspector({
         field.key === "name" && elementLabel(element) === "voice" && voiceCatalog ? renderSelector({
           value: inputValue,
           voices: availableVoices,
+          selectedVoice,
           readOnly,
           locale,
           onChange: (value2) => commit(updateOptionalElementProperty(document2, path, field.key, value2))
@@ -5260,6 +5308,7 @@ function VisualSsmlEditor({
           voiceCatalog ? (renderVoiceSelector ?? DefaultVoiceSelector)({
             value: selectedElement.voice ?? "",
             voices: filteredVoices(voiceCatalog, voiceLocale, voiceRegion, voiceStyle),
+            selectedVoice: voiceCatalog?.find((voice) => voice.name === selectedElement.voice),
             readOnly,
             locale,
             onChange: (value) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "voice", value))