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

package/dist/index.js

@@ -33,6 +33,7 @@ var index_exports = {};
 __export(index_exports, {
   EDITOR_COPY: () => EDITOR_COPY,
   INLINE_BADGE_COPY: () => INLINE_BADGE_COPY,
+  SSML_ELEMENT_COPY: () => SSML_ELEMENT_COPY,
   SSML_HOVER_COPY: () => SSML_HOVER_COPY,
   SSML_INSERTIONS: () => SSML_INSERTIONS,
   SsmlEditor: () => SsmlEditor,
@@ -820,6 +821,152 @@ var SILENCE_VALUE_DESCRIPTIONS = {
 };
 
 // src/locales.ts
+var SSML_ELEMENT_COPY = {
+  ja: {
+    dialog: {
+      label: "\u30C0\u30A4\u30A2\u30ED\u30B0",
+      description: "\u8907\u6570\u306E\u8A71\u8005\u30BF\u30FC\u30F3\u3092\u307E\u3068\u3081\u307E\u3059\u3002",
+      validationErrors: { turn: "turn \u306F dialog \u306E\u76F4\u4E0B\u306B\u914D\u7F6E\u3057\u3066\u304F\u3060\u3055\u3044\u3002" }
+    },
+    "mstts:dialog": {
+      label: "\u30C0\u30A4\u30A2\u30ED\u30B0",
+      description: "\u8907\u6570\u306E\u8A71\u8005\u30BF\u30FC\u30F3\u3092\u307E\u3068\u3081\u307E\u3059\u3002",
+      validationErrors: { turn: "turn \u306F dialog \u306E\u76F4\u4E0B\u306B\u914D\u7F6E\u3057\u3066\u304F\u3060\u3055\u3044\u3002" }
+    },
+    turn: {
+      label: "\u8A71\u8005\u30BF\u30FC\u30F3",
+      description: "\u30C0\u30A4\u30A2\u30ED\u30B0\u5185\u306E\u8A71\u8005\u3068\u767A\u8A71\u5185\u5BB9\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+      validationErrors: { voice: "voice \u307E\u305F\u306F speaker \u3092\u6307\u5B9A\u3057\u3066\u304F\u3060\u3055\u3044\u3002" }
+    },
+    "mstts:turn": {
+      label: "\u8A71\u8005\u30BF\u30FC\u30F3",
+      description: "\u30C0\u30A4\u30A2\u30ED\u30B0\u5185\u306E\u8A71\u8005\u3068\u767A\u8A71\u5185\u5BB9\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+      validationErrors: { voice: "voice \u307E\u305F\u306F speaker \u3092\u6307\u5B9A\u3057\u3066\u304F\u3060\u3055\u3044\u3002" }
+    },
+    backgroundaudio: {
+      label: "\u80CC\u666F\u97F3\u58F0",
+      description: "\u5408\u6210\u97F3\u58F0\u306E\u80CC\u5F8C\u3067\u518D\u751F\u3059\u308B\u97F3\u58F0\u30D5\u30A1\u30A4\u30EB\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+      validationErrors: { src: "\u80CC\u666F\u97F3\u58F0\u306B\u306F URL \u3092\u6307\u5B9A\u3057\u3066\u304F\u3060\u3055\u3044\u3002" }
+    },
+    "mstts:backgroundaudio": {
+      label: "\u80CC\u666F\u97F3\u58F0",
+      description: "\u5408\u6210\u97F3\u58F0\u306E\u80CC\u5F8C\u3067\u518D\u751F\u3059\u308B\u97F3\u58F0\u30D5\u30A1\u30A4\u30EB\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+      validationErrors: { src: "\u80CC\u666F\u97F3\u58F0\u306B\u306F URL \u3092\u6307\u5B9A\u3057\u3066\u304F\u3060\u3055\u3044\u3002" }
+    },
+    ttsembedding: {
+      label: "\u97F3\u58F0\u57CB\u3081\u8FBC\u307F",
+      description: "\u30AB\u30B9\u30BF\u30E0\u97F3\u58F0\u307E\u305F\u306F\u8A71\u8005\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB\u306E\u30E1\u30BF\u30C7\u30FC\u30BF\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059\u3002",
+      validationErrors: { speakerProfileId: "\u8A71\u8005\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB ID \u3092\u6307\u5B9A\u3057\u3066\u304F\u3060\u3055\u3044\u3002" }
+    },
+    "mstts:ttsembedding": {
+      label: "\u97F3\u58F0\u57CB\u3081\u8FBC\u307F",
+      description: "\u30AB\u30B9\u30BF\u30E0\u97F3\u58F0\u307E\u305F\u306F\u8A71\u8005\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB\u306E\u30E1\u30BF\u30C7\u30FC\u30BF\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059\u3002",
+      validationErrors: { speakerProfileId: "\u8A71\u8005\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB ID \u3092\u6307\u5B9A\u3057\u3066\u304F\u3060\u3055\u3044\u3002" }
+    },
+    embedding: {
+      label: "\u57CB\u3081\u8FBC\u307F",
+      description: "\u8A71\u8005\u57CB\u3081\u8FBC\u307F\u306E\u30E1\u30BF\u30C7\u30FC\u30BF\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+      validationErrors: {}
+    },
+    "mstts:embedding": {
+      label: "\u57CB\u3081\u8FBC\u307F",
+      description: "\u8A71\u8005\u57CB\u3081\u8FBC\u307F\u306E\u30E1\u30BF\u30C7\u30FC\u30BF\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+      validationErrors: {}
+    },
+    silence: {
+      label: "\u7121\u97F3",
+      description: "\u767A\u8A71\u524D\u5F8C\u307E\u305F\u306F\u53E5\u8AAD\u70B9\u306E\u5883\u754C\u306B\u7121\u97F3\u3092\u8FFD\u52A0\u3057\u307E\u3059\u3002",
+      validationErrors: { value: "\u7121\u97F3\u306E\u9577\u3055\u3092\u6307\u5B9A\u3057\u3066\u304F\u3060\u3055\u3044\u3002" }
+    },
+    "mstts:silence": {
+      label: "\u7121\u97F3",
+      description: "\u767A\u8A71\u524D\u5F8C\u307E\u305F\u306F\u53E5\u8AAD\u70B9\u306E\u5883\u754C\u306B\u7121\u97F3\u3092\u8FFD\u52A0\u3057\u307E\u3059\u3002",
+      validationErrors: { value: "\u7121\u97F3\u306E\u9577\u3055\u3092\u6307\u5B9A\u3057\u3066\u304F\u3060\u3055\u3044\u3002" }
+    },
+    voiceconversion: {
+      label: "\u97F3\u58F0\u5909\u63DB",
+      description: "\u30AB\u30B9\u30BF\u30E0\u97F3\u58F0\u306E\u5909\u63DB\u30E1\u30BF\u30C7\u30FC\u30BF\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+      validationErrors: {}
+    },
+    "mstts:voiceconversion": {
+      label: "\u97F3\u58F0\u5909\u63DB",
+      description: "\u30AB\u30B9\u30BF\u30E0\u97F3\u58F0\u306E\u5909\u63DB\u30E1\u30BF\u30C7\u30FC\u30BF\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+      validationErrors: {}
+    }
+  },
+  en: {
+    dialog: {
+      label: "Dialog",
+      description: "Groups multiple speaker turns.",
+      validationErrors: { turn: "Place turns directly inside a dialog." }
+    },
+    "mstts:dialog": {
+      label: "Dialog",
+      description: "Groups multiple speaker turns.",
+      validationErrors: { turn: "Place turns directly inside a dialog." }
+    },
+    turn: {
+      label: "Dialog turn",
+      description: "Specifies a speaker and utterance within a dialog.",
+      validationErrors: { voice: "Provide a voice or speaker." }
+    },
+    "mstts:turn": {
+      label: "Dialog turn",
+      description: "Specifies a speaker and utterance within a dialog.",
+      validationErrors: { voice: "Provide a voice or speaker." }
+    },
+    backgroundaudio: {
+      label: "Background audio",
+      description: "Specifies an audio file played behind synthesized speech.",
+      validationErrors: { src: "Provide a background audio URL." }
+    },
+    "mstts:backgroundaudio": {
+      label: "Background audio",
+      description: "Specifies an audio file played behind synthesized speech.",
+      validationErrors: { src: "Provide a background audio URL." }
+    },
+    ttsembedding: {
+      label: "TTS embedding",
+      description: "Embeds custom voice or speaker profile metadata.",
+      validationErrors: { speakerProfileId: "Provide a speaker profile ID." }
+    },
+    "mstts:ttsembedding": {
+      label: "TTS embedding",
+      description: "Embeds custom voice or speaker profile metadata.",
+      validationErrors: { speakerProfileId: "Provide a speaker profile ID." }
+    },
+    embedding: {
+      label: "Embedding",
+      description: "Specifies speaker embedding metadata.",
+      validationErrors: {}
+    },
+    "mstts:embedding": {
+      label: "Embedding",
+      description: "Specifies speaker embedding metadata.",
+      validationErrors: {}
+    },
+    silence: {
+      label: "Silence",
+      description: "Adds silence before, after, or around punctuation.",
+      validationErrors: { value: "Provide a silence duration." }
+    },
+    "mstts:silence": {
+      label: "Silence",
+      description: "Adds silence before, after, or around punctuation.",
+      validationErrors: { value: "Provide a silence duration." }
+    },
+    voiceconversion: {
+      label: "Voice conversion",
+      description: "Specifies custom voice conversion metadata.",
+      validationErrors: {}
+    },
+    "mstts:voiceconversion": {
+      label: "Voice conversion",
+      description: "Specifies custom voice conversion metadata.",
+      validationErrors: {}
+    }
+  }
+};
 var EDITOR_COPY = {
   ja: {
     editorAriaLabel: "SSML\u30A8\u30C7\u30A3\u30BF\u30FC",
@@ -1037,6 +1184,42 @@ var SSML_HOVER_COPY = {
         parameters: {
           value: { title: "value", description: "\u76EE\u6A19\u6642\u9593\u3002\u4F8B: `10s`\u3001`5000ms`\u3001`00:00:10`\u3002" }
         }
+      },
+      "mstts:dialog": { title: "\u30C0\u30A4\u30A2\u30ED\u30B0", description: "\u8907\u6570\u306E\u8A71\u8005\u30BF\u30FC\u30F3\u3092\u307E\u3068\u3081\u307E\u3059\u3002", parameters: {} },
+      "mstts:turn": {
+        title: "\u8A71\u8005\u30BF\u30FC\u30F3",
+        description: "\u30C0\u30A4\u30A2\u30ED\u30B0\u5185\u306E\u8A71\u8005\u3068\u767A\u8A71\u5185\u5BB9\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+        parameters: {
+          voice: { title: "voice", description: "\u3053\u306E\u30BF\u30FC\u30F3\u3067\u4F7F\u7528\u3059\u308B Azure \u97F3\u58F0\u540D\u3002" },
+          speaker: { title: "speaker", description: "\u8A71\u8005\u8B58\u5225\u5B50\u3002" }
+        }
+      },
+      "mstts:backgroundaudio": {
+        title: "\u80CC\u666F\u97F3\u58F0",
+        description: "\u5408\u6210\u97F3\u58F0\u306E\u80CC\u5F8C\u3067\u518D\u751F\u3059\u308B\u97F3\u58F0\u30D5\u30A1\u30A4\u30EB\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+        parameters: { src: { title: "src", description: "\u97F3\u58F0\u30D5\u30A1\u30A4\u30EB\u306E HTTPS URL\u3002" } }
+      },
+      "mstts:ttsembedding": {
+        title: "\u97F3\u58F0\u57CB\u3081\u8FBC\u307F",
+        description: "\u30AB\u30B9\u30BF\u30E0\u97F3\u58F0\u307E\u305F\u306F\u8A71\u8005\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB\u306E\u30E1\u30BF\u30C7\u30FC\u30BF\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059\u3002",
+        parameters: { speakerProfileId: { title: "speakerProfileId", description: "\u8A71\u8005\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB ID\u3002" } }
+      },
+      "mstts:embedding": {
+        title: "\u57CB\u3081\u8FBC\u307F",
+        description: "\u8A71\u8005\u57CB\u3081\u8FBC\u307F\u306E\u30E1\u30BF\u30C7\u30FC\u30BF\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+        parameters: {
+          id: { title: "id", description: "\u57CB\u3081\u8FBC\u307F ID\u3002" },
+          speakerProfileId: { title: "speakerProfileId", description: "\u8A71\u8005\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB ID\u3002" }
+        }
+      },
+      "mstts:voiceconversion": {
+        title: "\u97F3\u58F0\u5909\u63DB",
+        description: "\u30AB\u30B9\u30BF\u30E0\u97F3\u58F0\u306E\u5909\u63DB\u30E1\u30BF\u30C7\u30FC\u30BF\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+        parameters: {
+          url: { title: "url", description: "\u97F3\u58F0\u5909\u63DB\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB URL\u3002" },
+          profile: { title: "profile", description: "\u5909\u63DB\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB\u3002" },
+          speakerProfileId: { title: "speakerProfileId", description: "\u8A71\u8005\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB ID\u3002" }
+        }
       }
     }
   },
@@ -1201,6 +1384,42 @@ var SSML_HOVER_COPY = {
         parameters: {
           value: { title: "value", description: "The target duration, such as `10s`, `5000ms`, or `00:00:10`." }
         }
+      },
+      "mstts:dialog": { title: "Dialog", description: "Groups multiple speaker turns.", parameters: {} },
+      "mstts:turn": {
+        title: "Dialog turn",
+        description: "Specifies a speaker and utterance within a dialog.",
+        parameters: {
+          voice: { title: "voice", description: "The Azure voice used by this turn." },
+          speaker: { title: "speaker", description: "The speaker identifier." }
+        }
+      },
+      "mstts:backgroundaudio": {
+        title: "Background audio",
+        description: "Specifies an audio file played behind synthesized speech.",
+        parameters: { src: { title: "src", description: "The HTTPS URL of the audio file." } }
+      },
+      "mstts:ttsembedding": {
+        title: "TTS embedding",
+        description: "Embeds custom voice or speaker profile metadata.",
+        parameters: { speakerProfileId: { title: "speakerProfileId", description: "The speaker profile ID." } }
+      },
+      "mstts:embedding": {
+        title: "Embedding",
+        description: "Specifies speaker embedding metadata.",
+        parameters: {
+          id: { title: "id", description: "The embedding ID." },
+          speakerProfileId: { title: "speakerProfileId", description: "The speaker profile ID." }
+        }
+      },
+      "mstts:voiceconversion": {
+        title: "Voice conversion",
+        description: "Specifies custom voice conversion metadata.",
+        parameters: {
+          url: { title: "url", description: "The voice conversion profile URL." },
+          profile: { title: "profile", description: "The conversion profile." },
+          speakerProfileId: { title: "speakerProfileId", description: "The speaker profile ID." }
+        }
       }
     }
   }
@@ -4810,14 +5029,102 @@ var VISUAL_ELEMENT_FIELDS = {
 function getElementFields(element) {
   return VISUAL_ELEMENT_FIELDS[elementLabel(element)] ?? [];
 }
+function localizedElementLabel(element, locale) {
+  return SSML_ELEMENT_COPY[locale][elementLabel(element)]?.label ?? elementLabel(element);
+}
+function filteredVoices(voiceCatalog, locale, region, style) {
+  return (voiceCatalog ?? []).filter((voice) => {
+    if (locale && voice.locale.toLowerCase() !== locale.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 VoiceCapabilityMatrix({
+  voice,
+  locale
+}) {
+  const status = voice.status ?? (voice.preview ? "preview" : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ssml-editor-voice-capabilities", "data-voice-capabilities": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+      locale === "ja" ? "\u30B9\u30C6\u30FC\u30BF\u30B9" : "Status",
+      ": ",
+      status?.toUpperCase() ?? (locale === "ja" ? "GA" : "GA"),
+      status === "preview" || status === "deprecated" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("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__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+      locale === "ja" ? "\u5BFE\u5FDC\u30BF\u30B0" : "Supported tags",
+      ": ",
+      voice.supportedTags.join(", ")
+    ] }),
+    voice.unsupportedTags && voice.unsupportedTags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("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__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "select",
+      {
+        "aria-label": locale === "ja" ? "\u97F3\u58F0" : "Voice",
+        value,
+        disabled: readOnly,
+        onChange: (event) => onChange(event.target.value),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: locale === "ja" ? "\u97F3\u58F0\u3092\u9078\u629E" : "Select a voice" }),
+          voices.map((voice) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("option", { value: voice.name, children: [
+            voice.name,
+            voice.preview || voice.status === "preview" ? " (preview)" : ""
+          ] }, voice.name))
+        ]
+      }
+    ),
+    selectedVoice ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VoiceCapabilityMatrix, { voice: selectedVoice, locale }) : null
+  ] });
+}
 function VisualElementInspector({
   document: document2,
   element,
   path,
   readOnly,
-  commit
+  commit,
+  locale,
+  customInspector,
+  renderVoiceSelector,
+  voiceCatalog,
+  voiceLocale,
+  voiceRegion,
+  voiceStyle
 }) {
+  if (customInspector) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: customInspector({ document: document2, element, path, readOnly, onChange: commit, locale }) });
+  }
   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__ */ (0, import_jsx_runtime6.jsxs)("fieldset", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { children: `<${elementLabel(element)}>` }),
     fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "This element is preserved in the visual tree. Edit its attributes in Code mode." }) : fields.map((field) => {
@@ -4825,8 +5132,48 @@ function VisualElementInspector({
       const inputValue = value === void 0 ? "" : String(value);
       const inputId = `ssml-visual-${field.key}`;
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { htmlFor: inputId, children: [
-        field.label,
-        field.multiline ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        locale === "ja" ? {
+          name: "\u540D\u524D",
+          effect: "\u52B9\u679C",
+          rate: "\u901F\u5EA6",
+          pitch: "\u30D4\u30C3\u30C1",
+          volume: "\u97F3\u91CF",
+          contour: "\u30D4\u30C3\u30C1\u66F2\u7DDA",
+          range: "\u7BC4\u56F2",
+          style: "\u30B9\u30BF\u30A4\u30EB",
+          styleDegree: "\u30B9\u30BF\u30A4\u30EB\u5F37\u5EA6",
+          role: "\u5F79\u5272",
+          interpretAs: "\u89E3\u91C8",
+          alphabet: "\u30A2\u30EB\u30D5\u30A1\u30D9\u30C3\u30C8",
+          ph: "\u767A\u97F3",
+          level: "\u5F37\u8ABF\u30EC\u30D9\u30EB",
+          src: "\u97F3\u58F0 URL",
+          desc: "\u8AAC\u660E",
+          clipBegin: "\u958B\u59CB\u4F4D\u7F6E",
+          clipEnd: "\u7D42\u4E86\u4F4D\u7F6E",
+          speed: "\u901F\u5EA6",
+          repeatCount: "\u7E70\u308A\u8FD4\u3057\u56DE\u6570",
+          repeatDuration: "\u7E70\u308A\u8FD4\u3057\u6642\u9593",
+          soundLevel: "\u97F3\u91CF\u30EC\u30D9\u30EB",
+          mark: "\u30D6\u30C3\u30AF\u30DE\u30FC\u30AF\u540D",
+          alias: "\u5225\u540D",
+          lang: "\u8A00\u8A9E",
+          uri: "\u8F9E\u66F8 URI",
+          typeValue: "\u7121\u97F3\u306E\u7A2E\u985E",
+          value: "\u5024",
+          id: "\u57CB\u3081\u8FBC\u307F ID",
+          speakerProfileId: "\u8A71\u8005\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB ID",
+          url: "\u97F3\u58F0\u5909\u63DB URL",
+          profile: "\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB"
+        }[field.key] ?? field.label : field.label,
+        field.key === "name" && elementLabel(element) === "voice" && voiceCatalog ? renderSelector({
+          value: inputValue,
+          voices: availableVoices,
+          selectedVoice,
+          readOnly,
+          locale,
+          onChange: (value2) => commit(updateOptionalElementProperty(document2, path, field.key, value2))
+        }) : field.multiline ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "textarea",
           {
             id: inputId,
@@ -4922,13 +5269,21 @@ function VisualSsmlEditor({
   document: document2,
   readOnly = false,
   onChange,
-  onPreviewSelection
+  onPreviewSelection,
+  locale = "en",
+  customInspectors,
+  renderVoiceSelector,
+  voiceCatalog,
+  voiceLocale,
+  voiceRegion,
+  voiceStyle
 }) {
   const [selectedPath, setSelectedPath] = (0, import_react3.useState)(null);
   const [selection, setSelection] = (0, import_react3.useState)({ start: 0, end: 0 });
   const textLeaves = (0, import_react3.useMemo)(() => collectTextLeaves(document2.children ?? []), [document2]);
   const selectedLeaf = textLeaves.find((leaf) => leaf.path.join(".") === selectedPath?.join(".")) ?? textLeaves[0];
   const selectedElement = selectedPath ? getNodeAtPath(document2.children ?? [], selectedPath) : void 0;
+  const selectedCustomInspector = selectedElement && isElement(selectedElement) ? customInspectors?.[elementLabel(selectedElement)] ?? customInspectors?.[selectedElement.type] : void 0;
   const diagnostics = (0, import_react3.useMemo)(() => (0, import_ssml_core4.validateAzureSsml)((0, import_ssml_core4.buildSsml)(document2)), [document2]);
   const commit = (nextDocument) => onChange?.(nextDocument);
   const applyWrapper = (tag, attributes) => {
@@ -4963,25 +5318,40 @@ function VisualSsmlEditor({
           isElement(node) ? elementLabel(node) : JSON.stringify(node)
         )) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ssml-editor-visual-form", children: selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:dialog" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("fieldset", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { children: "Dialog" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "Add and edit speaker turns in this dialog." }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ssml-editor-visual-form", children: selectedCustomInspector && selectedElement && isElement(selectedElement) ? selectedCustomInspector({
+        document: document2,
+        element: selectedElement,
+        path: selectedPath ?? [],
+        readOnly,
+        onChange: commit,
+        locale
+      }) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:dialog" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("fieldset", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { children: localizedElementLabel(selectedElement, locale) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: SSML_ELEMENT_COPY[locale][elementLabel(selectedElement)]?.description }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
             disabled: readOnly,
             onClick: () => commit(addDialogTurn(document2, selectedPath ?? [])),
-            children: "Add turn"
+            children: locale === "ja" ? "\u30BF\u30FC\u30F3\u3092\u8FFD\u52A0" : "Add turn"
           }
         )
       ] }) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:turn" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("fieldset", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { children: "Dialog turn" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
-          "Voice",
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { children: localizedElementLabel(selectedElement, locale) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { htmlFor: "ssml-visual-turn-voice", children: [
+          locale === "ja" ? "\u97F3\u58F0" : "Voice",
+          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))
+          }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
+              id: "ssml-visual-turn-voice",
               value: selectedElement.voice ?? "",
               readOnly,
               onChange: (event) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "voice", event.target.value))
@@ -4989,7 +5359,7 @@ function VisualSsmlEditor({
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
-          "Speaker",
+          locale === "ja" ? "\u8A71\u8005" : "Speaker",
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
@@ -5000,7 +5370,7 @@ function VisualSsmlEditor({
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
-          "Turn text",
+          locale === "ja" ? "\u767A\u8A71\u30C6\u30AD\u30B9\u30C8" : "Turn text",
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "textarea",
             {
@@ -5017,9 +5387,9 @@ function VisualSsmlEditor({
           )
         ] })
       ] }) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:backgroundaudio" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("fieldset", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { children: "Background audio" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { children: localizedElementLabel(selectedElement, locale) }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
-          "Source URL",
+          locale === "ja" ? "\u97F3\u58F0 URL" : "Source URL",
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
@@ -5030,7 +5400,7 @@ function VisualSsmlEditor({
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
-          "Volume",
+          locale === "ja" ? "\u97F3\u91CF" : "Volume",
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
@@ -5041,7 +5411,7 @@ function VisualSsmlEditor({
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
-          "Fade in",
+          locale === "ja" ? "\u30D5\u30A7\u30FC\u30C9\u30A4\u30F3" : "Fade in",
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
@@ -5052,7 +5422,7 @@ function VisualSsmlEditor({
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
-          "Fade out",
+          locale === "ja" ? "\u30D5\u30A7\u30FC\u30C9\u30A2\u30A6\u30C8" : "Fade out",
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
@@ -5069,7 +5439,14 @@ function VisualSsmlEditor({
           element: selectedElement,
           path: selectedPath ?? [],
           readOnly,
-          commit
+          commit,
+          locale,
+          customInspector: customInspectors?.[elementLabel(selectedElement)] ?? customInspectors?.[selectedElement.type],
+          renderVoiceSelector,
+          voiceCatalog,
+          voiceLocale,
+          voiceRegion,
+          voiceStyle
         }
       ) : selectedLeaf ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
@@ -5708,6 +6085,12 @@ var SsmlEditor = (0, import_react4.forwardRef)(function SsmlEditor2({
   insertionGroups,
   customInsertions,
   additionalInsertions,
+  customInspectors,
+  renderVoiceSelector,
+  voiceCatalog,
+  voiceLocale,
+  voiceRegion,
+  voiceStyle,
   emotionStyles,
   className,
   style,
@@ -6149,7 +6532,14 @@ var SsmlEditor = (0, import_react4.forwardRef)(function SsmlEditor2({
               document: draftDocument,
               readOnly: isReadOnly,
               onChange: commit,
-              onPreviewSelection
+              onPreviewSelection,
+              locale: localeProp ?? languageProp,
+              customInspectors,
+              renderVoiceSelector,
+              voiceCatalog,
+              voiceLocale,
+              voiceRegion,
+              voiceStyle
             }
           ) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { ...editorStyles.editor, minHeight: editorMinHeight }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -6228,6 +6618,7 @@ var SsmlEditor = (0, import_react4.forwardRef)(function SsmlEditor2({
 0 && (module.exports = {
   EDITOR_COPY,
   INLINE_BADGE_COPY,
+  SSML_ELEMENT_COPY,
   SSML_HOVER_COPY,
   SSML_INSERTIONS,
   SsmlEditor,