ssml-builder-js 2.8.1 → 2.9.0

package/dist/react.js

@@ -36,6 +36,7 @@ __export(react_exports, {
   SSML_HOVER_COPY: () => SSML_HOVER_COPY,
   SSML_INSERTIONS: () => SSML_INSERTIONS,
   SsmlEditor: () => SsmlEditor,
+  VisualSsmlEditor: () => VisualSsmlEditor,
   createSsmlEditorInsertionDefinition: () => createSsmlEditorInsertionDefinition,
   registerSsmlCodeLens: () => registerSsmlCodeLens,
   updateTagAttribute: () => updateTagAttribute
@@ -43,8 +44,8 @@ __export(react_exports, {
 module.exports = __toCommonJS(react_exports);
 
 // packages/ssml-editor-react/src/SsmlEditor.tsx
-var import_react3 = require("react");
-var import_react4 = __toESM(require("@monaco-editor/react"));
+var import_react4 = require("react");
+var import_react5 = __toESM(require("@monaco-editor/react"));
 
 // packages/ssml-editor-react/src/buttonVisibility.ts
 function isSsmlEditorButtonVisible(buttonVisibility, button) {
@@ -473,6 +474,11 @@ var SSML_ATTRIBUTE_PRESETS = {
   "mstts:audioduration": {
     value: AUDIO_DURATION_PRESETS
   },
+  "mstts:backgroundaudio": {
+    volume: PROSODY_VOLUME_PRESETS,
+    fadein: AUDIO_DURATION_PRESETS,
+    fadeout: AUDIO_DURATION_PRESETS
+  },
   silence: {
     type: SILENCE_TYPE_PRESETS,
     value: SILENCE_VALUE_PRESETS
@@ -1289,6 +1295,14 @@ var editorStyles = {
     display: "grid",
     gap: "0.5rem"
   },
+  visual: {
+    display: "grid",
+    gap: "0.75rem",
+    minHeight: "8rem",
+    padding: "0.75rem",
+    border: "1px solid var(--ssml-editor-control-border)",
+    borderRadius: "0.25rem"
+  },
   toolbarIconOnly: {
     justifyContent: "center",
     minWidth: "2.25rem",
@@ -1694,7 +1708,13 @@ var SSML_TAGS = {
   SILENCE: "silence",
   MSTTS_VISEME: "mstts:viseme",
   VISEME: "viseme",
-  MSTTS_AUDIO_DURATION: "mstts:audioduration"
+  MSTTS_AUDIO_DURATION: "mstts:audioduration",
+  MSTTS_DIALOG: "mstts:dialog",
+  MSTTS_TURN: "mstts:turn",
+  MSTTS_BACKGROUND_AUDIO: "mstts:backgroundaudio",
+  MSTTS_TTS_EMBEDDING: "mstts:ttsembedding",
+  MSTTS_EMBEDDING: "mstts:embedding",
+  MSTTS_VOICE_CONVERSION: "mstts:voiceconversion"
 };
 var SSML_ATTRS = {
   VERSION: "version",
@@ -1703,6 +1723,7 @@ var SSML_ATTRS = {
   LANG: "lang",
   MSTTS_XMLNS: "xmlns:mstts",
   NAME: "name",
+  VOICE: "voice",
   EFFECT: "effect",
   RATE: "rate",
   PITCH: "pitch",
@@ -1734,7 +1755,9 @@ var SSML_ATTRS = {
   MARK: "mark",
   URI: "uri",
   TYPE: "type",
-  VALUE: "value"
+  VALUE: "value",
+  FADE_IN: "fadein",
+  FADE_OUT: "fadeout"
 };
 function escapeText(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -1824,6 +1847,20 @@ function getAttributes(element) {
     case SSML_TAGS.MSTTS_AUDIO_DURATION:
       addAttribute(attributes, SSML_ATTRS.VALUE, element.value);
       break;
+    case SSML_TAGS.MSTTS_TURN:
+      addAttribute(attributes, SSML_ATTRS.VOICE, element.voice);
+      break;
+    case SSML_TAGS.MSTTS_BACKGROUND_AUDIO:
+      addAttribute(attributes, SSML_ATTRS.SRC, element.src);
+      addAttribute(attributes, SSML_ATTRS.VOLUME, element.volume);
+      addAttribute(attributes, SSML_ATTRS.FADE_IN, element.fadeIn ?? element.fadein);
+      addAttribute(attributes, SSML_ATTRS.FADE_OUT, element.fadeOut ?? element.fadeout);
+      break;
+    case SSML_TAGS.MSTTS_DIALOG:
+    case SSML_TAGS.MSTTS_TTS_EMBEDDING:
+    case SSML_TAGS.MSTTS_EMBEDDING:
+    case SSML_TAGS.MSTTS_VOICE_CONVERSION:
+      break;
     case SSML_TAGS.PARAGRAPH:
     case SSML_TAGS.SENTENCE:
     case SSML_TAGS.WORD:
@@ -2388,6 +2425,40 @@ function convertElement(node) {
       if (value !== void 0) element.value = value;
       return finishElement(element, node, attributes);
     }
+    case SSML_TAGS.MSTTS_DIALOG: {
+      const element = { type: SSML_TAGS.MSTTS_DIALOG };
+      return finishElement(element, node, attributes);
+    }
+    case SSML_TAGS.MSTTS_TURN: {
+      const element = { type: SSML_TAGS.MSTTS_TURN };
+      const voice = readAttribute(attributes, SSML_ATTRS.VOICE);
+      if (voice !== void 0) element.voice = voice;
+      return finishElement(element, node, attributes);
+    }
+    case SSML_TAGS.MSTTS_BACKGROUND_AUDIO: {
+      const element = { type: SSML_TAGS.MSTTS_BACKGROUND_AUDIO };
+      const src = readAttribute(attributes, SSML_ATTRS.SRC);
+      const volume = readAttribute(attributes, SSML_ATTRS.VOLUME);
+      const fadeIn = readAttribute(attributes, SSML_ATTRS.FADE_IN);
+      const fadeOut = readAttribute(attributes, SSML_ATTRS.FADE_OUT);
+      if (src !== void 0) element.src = src;
+      if (volume !== void 0) element.volume = volume;
+      if (fadeIn !== void 0) element.fadeIn = fadeIn;
+      if (fadeOut !== void 0) element.fadeOut = fadeOut;
+      return finishElement(element, node, attributes);
+    }
+    case SSML_TAGS.MSTTS_TTS_EMBEDDING: {
+      const element = { type: SSML_TAGS.MSTTS_TTS_EMBEDDING };
+      return finishElement(element, node, attributes);
+    }
+    case SSML_TAGS.MSTTS_EMBEDDING: {
+      const element = { type: SSML_TAGS.MSTTS_EMBEDDING };
+      return finishElement(element, node, attributes);
+    }
+    case SSML_TAGS.MSTTS_VOICE_CONVERSION: {
+      const element = { type: SSML_TAGS.MSTTS_VOICE_CONVERSION };
+      return finishElement(element, node, attributes);
+    }
     default: {
       const element = {
         name: node.name,
@@ -2508,6 +2579,644 @@ function validateSsml(xmlString) {
     };
   }
 }
+var AZURE_VOICE_DEFINITIONS = [
+  { name: "de-DE-ConradNeural", locale: "de-DE", styles: ["cheerful", "sad"] },
+  { name: "de-DE-KatjaNeural", locale: "de-DE", styles: ["cheerful", "sad"] },
+  { name: "en-US-AndrewNeural", locale: "en-US", styles: ["empathetic", "relieved"] },
+  {
+    name: "en-US-GuyNeural",
+    locale: "en-US",
+    styles: [
+      "angry",
+      "cheerful",
+      "excited",
+      "friendly",
+      "hopeful",
+      "newscast",
+      "sad",
+      "shouting",
+      "terrified",
+      "unfriendly",
+      "whispering"
+    ]
+  },
+  {
+    name: "en-US-JennyMultilingualNeural",
+    locale: "en-US",
+    styles: [
+      "cheerful",
+      "empathetic",
+      "excited",
+      "friendly",
+      "hopeful",
+      "sad",
+      "shouting",
+      "terrified",
+      "unfriendly",
+      "whispering"
+    ]
+  },
+  {
+    name: "en-US-JennyNeural",
+    locale: "en-US",
+    styles: [
+      "assistant",
+      "chat",
+      "customerservice",
+      "newscast",
+      "cheerful",
+      "empathetic",
+      "excited",
+      "friendly",
+      "hopeful",
+      "sad",
+      "shouting",
+      "terrified",
+      "unfriendly",
+      "whispering"
+    ]
+  },
+  { name: "es-ES-ElviraNeural", locale: "es-ES" },
+  { name: "fil-PH-AngeloNeural", locale: "fil-PH" },
+  { name: "fr-FR-DeniseNeural", locale: "fr-FR", styles: ["cheerful", "sad"] },
+  { name: "fr-FR-HenriNeural", locale: "fr-FR", styles: ["cheerful", "sad"] },
+  { name: "id-ID-GadisNeural", locale: "id-ID" },
+  { name: "it-IT-ElsaNeural", locale: "it-IT", styles: ["cheerful", "sad"] },
+  { name: "ja-JP-KeitaNeural", locale: "ja-JP", styles: ["chat"] },
+  { name: "ja-JP-MayuNeural", locale: "ja-JP", styles: ["calm", "cheerful", "sad"] },
+  { name: "ja-JP-NanamiNeural", locale: "ja-JP", styles: ["chat", "customerservice", "cheerful", "whispering", "sad"] },
+  { name: "ko-KR-SunHiNeural", locale: "ko-KR", styles: ["cheerful", "sad"] },
+  { name: "ms-MY-YasminNeural", locale: "ms-MY" },
+  { name: "pt-BR-FranciscaNeural", locale: "pt-BR", styles: ["calm"] },
+  {
+    name: "ru-RU-SvetlanaNeural",
+    locale: "ru-RU",
+    styles: ["cheerful", "sad", "angry", "disgruntled", "embarrassed", "fearful"]
+  },
+  { name: "th-TH-PremwadeeNeural", locale: "th-TH" },
+  { name: "vi-VN-HoaiMyNeural", locale: "vi-VN" },
+  {
+    name: "zh-CN-XiaoxiaoNeural",
+    locale: "zh-CN",
+    styles: [
+      "assistant",
+      "chat",
+      "customerservice",
+      "newscast",
+      "cheerful",
+      "empathetic",
+      "excited",
+      "friendly",
+      "hopeful",
+      "sad",
+      "terrified",
+      "whispering",
+      "poetry-reading",
+      "sports_commentary",
+      "sports_commentary_excited",
+      "story"
+    ]
+  },
+  {
+    name: "zh-CN-YunxiNeural",
+    locale: "zh-CN",
+    styles: [
+      "narration-relaxed",
+      "embarrassed",
+      "fearful",
+      "sad",
+      "disgruntled",
+      "serious",
+      "angry",
+      "depressed",
+      "chat",
+      "cheerful",
+      "assistant"
+    ]
+  },
+  { name: "zh-TW-HsiaoChenNeural", locale: "zh-TW" }
+];
+var ALLOWED_BREAK_STRENGTHS = /* @__PURE__ */ new Set(["none", "x-weak", "weak", "medium", "strong", "x-strong"]);
+var ALLOWED_SAY_AS = /* @__PURE__ */ new Set([
+  "characters",
+  "spell-out",
+  "cardinal",
+  "ordinal",
+  "number",
+  "date",
+  "time",
+  "telephone",
+  "fraction",
+  "address",
+  "name",
+  "currency",
+  "number_digit"
+]);
+var ALLOWED_ROLES = /* @__PURE__ */ new Set([
+  "Girl",
+  "Boy",
+  "YoungAdultFemale",
+  "YoungAdultMale",
+  "OlderAdultFemale",
+  "OlderAdultMale",
+  "SeniorFemale",
+  "SeniorMale"
+]);
+var ALLOWED_EMPHASIS_LEVELS = /* @__PURE__ */ new Set(["strong", "moderate", "reduced", "none"]);
+var ALLOWED_SILENCE_TYPES = /* @__PURE__ */ new Set([
+  "Leading",
+  "Tailing",
+  "Sentenceboundary",
+  "Comma",
+  "Semicolon",
+  "Enumerationcomma"
+]);
+var ALLOWED_VISEME_TYPES = /* @__PURE__ */ new Set(["redlips_front", "FacialExpression"]);
+function decodeAttribute(value) {
+  return value.replace(
+    /&(?:amp|apos|gt|lt|quot);/gi,
+    (entity) => ({ "&amp;": "&", "&apos;": "'", "&gt;": ">", "&lt;": "<", "&quot;": '"' })[entity.toLowerCase()] ?? entity
+  );
+}
+function findTagEnd2(source, start) {
+  let quote = "";
+  for (let index = start; index < source.length; index += 1) {
+    const character = source[index];
+    if (quote) {
+      if (character === quote) quote = "";
+    } else if (character === '"' || character === "'") quote = character;
+    else if (character === ">") return index;
+  }
+  return source.length - 1;
+}
+function tokenizeElements(source) {
+  const tokens = [];
+  const openElements = [];
+  let index = 0;
+  while (index < source.length) {
+    const start = source.indexOf("<", index);
+    if (start === -1) break;
+    if (source.startsWith("<!--", start)) {
+      const end2 = source.indexOf("-->", start + 4);
+      index = end2 === -1 ? source.length : end2 + 3;
+      continue;
+    }
+    if (source.startsWith("<![CDATA[", start)) {
+      const end2 = source.indexOf("]]>", start + 9);
+      index = end2 === -1 ? source.length : end2 + 3;
+      continue;
+    }
+    if (source.startsWith("<?", start)) {
+      const end2 = source.indexOf("?>", start + 2);
+      index = end2 === -1 ? source.length : end2 + 2;
+      continue;
+    }
+    const end = findTagEnd2(source, start + 1);
+    const raw = source.slice(start, end + 1);
+    if (raw.startsWith("</")) {
+      openElements.pop();
+      index = end + 1;
+      continue;
+    }
+    const nameMatch = /^<\s*([A-Za-z_][A-Za-z0-9_.:-]*)/.exec(raw);
+    if (!nameMatch?.[1]) {
+      index = end + 1;
+      continue;
+    }
+    const attributes = /* @__PURE__ */ new Map();
+    const attributeSource = raw.slice(nameMatch[0].length, raw.length - 1).replace(/\/\s*$/, "");
+    const attributePattern = /([A-Za-z_][A-Za-z0-9_.:-]*)\s*=\s*(["'])([\s\S]*?)\2/g;
+    for (const match of attributeSource.matchAll(attributePattern)) {
+      attributes.set(match[1].toLowerCase(), decodeAttribute(match[3]));
+    }
+    const selfClosing = /\/\s*>$/.test(raw);
+    const parent = openElements[openElements.length - 1];
+    const parentVoiceName = [...openElements].reverse().find((element) => element.voiceName)?.voiceName;
+    const tokenName = nameMatch[1];
+    const tokenVoiceName = tokenName.toLowerCase() === "voice" ? attributes.get("name") : tokenName.toLowerCase() === "mstts:turn" ? attributes.get("voice") ?? parentVoiceName : parentVoiceName;
+    tokens.push({
+      attributes,
+      end,
+      name: tokenName,
+      parentName: parent?.name,
+      parentVoiceName,
+      selfClosing,
+      start
+    });
+    if (!selfClosing) {
+      openElements.push({
+        name: tokenName,
+        voiceName: tokenVoiceName
+      });
+    }
+    index = end + 1;
+  }
+  return tokens;
+}
+function location(source, offset) {
+  const before = source.slice(0, Math.max(0, offset));
+  const line = before.split("\n").length;
+  return { line, column: before.length - (before.lastIndexOf("\n") + 1) + 1 };
+}
+function addDiagnostic(diagnostics, source, offset, message, severity = "error", code2) {
+  diagnostics.push({
+    ...location(source, offset),
+    message,
+    severity,
+    source: "ssml-static-validator",
+    ...code2 ? { code: code2 } : {}
+  });
+}
+function isSupportedProsodyRate(value) {
+  const trimmed = value.trim();
+  if (/^(x-slow|slow|medium|fast|x-fast|[+-]?\d+(?:\.\d+)?%)$/.test(trimmed)) return true;
+  const multiplier = /^(\d+(?:\.\d+)?)(x)?$/i.exec(trimmed);
+  if (!multiplier) return false;
+  const numericValue = Number(multiplier[1]);
+  return numericValue >= 0.5 && numericValue <= 2;
+}
+function isValidAzureAudioDuration(value) {
+  const trimmed = value.trim();
+  const numeric = /^(\d+(?:\.\d+)?)(ms|s)$/.exec(trimmed);
+  if (numeric) return Number(numeric[1]) > 0;
+  const clock = /^(\d{2,}):([0-5]\d):([0-5]\d)(?:\.(\d{1,3}))?$/.exec(trimmed);
+  if (!clock) return false;
+  return Number(clock[1]) > 0 || Number(clock[2]) > 0 || Number(clock[3]) > 0 || Number(clock[4] ?? 0) > 0;
+}
+function attr(token, name) {
+  return token.attributes.get(name.toLowerCase());
+}
+var DEFAULT_LANGUAGE_ALIASES = {
+  "zh-CN": ["zh-Hans"],
+  "zh-TW": ["zh-Hant"]
+};
+function canonicalLanguageTag(language) {
+  const trimmed = language.trim();
+  if (!trimmed) return "";
+  try {
+    return new Intl.Locale(trimmed).toString().toLowerCase();
+  } catch {
+    return trimmed.toLowerCase();
+  }
+}
+function createLanguageNormalizer(options) {
+  const aliases = /* @__PURE__ */ new Map();
+  const addAliasGroup = (canonical, values) => {
+    const normalizedCanonical = canonicalLanguageTag(canonical);
+    if (!normalizedCanonical) return;
+    aliases.set(normalizedCanonical, normalizedCanonical);
+    for (const value of values) {
+      const normalizedValue = canonicalLanguageTag(value);
+      if (normalizedValue) aliases.set(normalizedValue, normalizedCanonical);
+    }
+  };
+  for (const [canonical, values] of Object.entries(DEFAULT_LANGUAGE_ALIASES)) addAliasGroup(canonical, values);
+  for (const [canonical, valueOrValues] of Object.entries(options.languageAliases ?? {}))
+    addAliasGroup(canonical, typeof valueOrValues === "string" ? [valueOrValues] : valueOrValues);
+  return (language) => {
+    const customValue = options.normalizeLanguage ? options.normalizeLanguage(language) : language;
+    const normalized = canonicalLanguageTag(customValue);
+    return aliases.get(normalized) ?? normalized;
+  };
+}
+function voiceLocalePrefix(voiceName) {
+  const match = /^(?<language>[A-Za-z]{2,3})-(?<region>[A-Za-z]{2}|\d{3})(?:-|$)/.exec(voiceName.trim());
+  if (!match?.groups) return void 0;
+  const tag = `${match.groups.language}-${match.groups.region}`;
+  return {
+    language: match.groups.language.toLowerCase(),
+    region: match.groups.region.toLowerCase(),
+    tag
+  };
+}
+function definitionFromStyleMap(voiceName, styles) {
+  return {
+    name: voiceName,
+    locale: voiceLocalePrefix(voiceName)?.tag ?? "",
+    styles
+  };
+}
+function normalizeVoiceCatalog(options) {
+  const definitions = /* @__PURE__ */ new Map();
+  for (const definition of AZURE_VOICE_DEFINITIONS) definitions.set(definition.name.toLowerCase(), definition);
+  for (const definition of options.voiceCatalog ?? []) definitions.set(definition.name.toLowerCase(), definition);
+  for (const definition of options.voiceDefinitions ?? []) definitions.set(definition.name.toLowerCase(), definition);
+  for (const definition of options.customVoiceDefinitions ?? [])
+    definitions.set(definition.name.toLowerCase(), definition);
+  for (const [voiceName, styles] of Object.entries(options.customVoiceStyleMap ?? {})) {
+    const key = voiceName.toLowerCase();
+    const current = definitions.get(key);
+    definitions.set(key, {
+      ...current ?? definitionFromStyleMap(voiceName, styles),
+      name: current?.name ?? voiceName,
+      styles: styles.map((style) => style.toLowerCase())
+    });
+  }
+  return definitions;
+}
+function diagnosticSeverity(policy) {
+  if (policy === "ignore") return void 0;
+  return policy === "error" ? "error" : "warning";
+}
+function languagePart(language) {
+  try {
+    return new Intl.Locale(language).language.toLowerCase();
+  } catch {
+    return language.split("-")[0]?.toLowerCase() ?? "";
+  }
+}
+function definitionMatchesLanguage(definition, voiceName, language, normalizeLanguage) {
+  const candidateLanguages = definition ? [definition.locale, ...definition.secondaryLocales ?? []].filter(Boolean) : [voiceLocalePrefix(voiceName)?.tag ?? ""];
+  if (candidateLanguages.length === 0 || !language.trim()) return void 0;
+  const normalizedLanguage = normalizeLanguage(language);
+  const normalizedCandidates = candidateLanguages.map(normalizeLanguage);
+  if (normalizedCandidates.includes(normalizedLanguage)) return true;
+  if (!normalizedLanguage || !normalizedCandidates.some(Boolean)) return void 0;
+  return normalizedLanguage === languagePart(normalizedLanguage) ? normalizedCandidates.some((candidate) => languagePart(candidate) === normalizedLanguage) : false;
+}
+function canonicalTagName(name) {
+  const normalized = name.toLowerCase();
+  if (normalized === "express-as" || normalized === "expressas") return "mstts:express-as";
+  if (normalized === "sayas") return "say-as";
+  return normalized;
+}
+function validateVoiceFeatureMatrix(token, source, diagnostics, voiceName, definition) {
+  if (!voiceName || !definition || token.name.toLowerCase() === "voice" || token.name.toLowerCase() === "mstts:turn")
+    return;
+  const tagName = canonicalTagName(token.name);
+  const unsupportedTags = new Set((definition.unsupportedTags ?? []).map(canonicalTagName));
+  const supportedTags = definition.supportedTags?.map(canonicalTagName);
+  if (unsupportedTags.has(tagName) || supportedTags !== void 0 && !supportedTags.includes(tagName)) {
+    addDiagnostic(
+      diagnostics,
+      source,
+      token.start,
+      `Tag <${token.name}> is not supported by voice "${voiceName}" according to the configured feature matrix.`,
+      "error",
+      "azure-unsupported-tag-for-voice"
+    );
+  }
+}
+function validateAudioSource(token, source, diagnostics, options, elementName2) {
+  const src = attr(token, "src");
+  if (!src) {
+    addDiagnostic(diagnostics, source, token.start, `<${elementName2}> requires a "src" attribute.`);
+    return;
+  }
+  let parsed;
+  try {
+    parsed = new URL(src);
+  } catch {
+    addDiagnostic(diagnostics, source, token.start, `<${elementName2} src> must be an absolute HTTP(S) URL.`);
+    return;
+  }
+  if (parsed.protocol !== "https:" && !(options.allowHttpAudio && parsed.protocol === "http:"))
+    addDiagnostic(diagnostics, source, token.start, `<${elementName2} src> must use HTTPS.`);
+  if (options.allowedAudioOrigins && !options.allowedAudioOrigins.includes(parsed.origin))
+    addDiagnostic(diagnostics, source, token.start, `<${elementName2} src> origin "${parsed.origin}" is not allowed.`);
+  else if (!options.allowExternalAudio)
+    addDiagnostic(
+      diagnostics,
+      source,
+      token.start,
+      `<${elementName2} src> external origin "${parsed.origin}" is blocked by default; set allowExternalAudio to true or provide allowedAudioOrigins.`
+    );
+}
+function validateElement(token, source, diagnostics, voiceName, options, voiceCatalog) {
+  const name = token.name.toLowerCase();
+  if (name === "voice" && !attr(token, "name")?.trim())
+    addDiagnostic(diagnostics, source, token.start, '<voice> requires a non-empty "name" attribute.');
+  if (name === "break") {
+    const time = attr(token, "time");
+    const strength = attr(token, "strength");
+    if (!time && !strength)
+      addDiagnostic(diagnostics, source, token.start, '<break> requires either "time" or "strength".');
+    if (time && strength)
+      addDiagnostic(diagnostics, source, token.start, '<break> must not specify both "time" and "strength".');
+    if (time && !/^\d+(?:\.\d+)?(?:ms|s)$/.test(time.trim()))
+      addDiagnostic(diagnostics, source, token.start, '<break time> must use a numeric value followed by "ms" or "s".');
+    if (strength && !ALLOWED_BREAK_STRENGTHS.has(strength))
+      addDiagnostic(diagnostics, source, token.start, `Unsupported <break strength> value "${strength}".`);
+  }
+  if (name === "prosody") {
+    const rate = attr(token, "rate");
+    const pitch = attr(token, "pitch");
+    const volume = attr(token, "volume");
+    if (rate && !isSupportedProsodyRate(rate))
+      addDiagnostic(diagnostics, source, token.start, `Unsupported <prosody rate> value "${rate}".`);
+    if (pitch && !/^(x-low|low|medium|high|x-high|[+-]?\d+(?:\.\d+)?(?:st|Hz|%)?)$/.test(pitch.trim()))
+      addDiagnostic(diagnostics, source, token.start, `Unsupported <prosody pitch> value "${pitch}".`);
+    if (volume && !/^(silent|x-soft|soft|medium|loud|x-loud|[+-]?\d+(?:\.\d+)?(?:dB|%)?)$/.test(volume.trim()))
+      addDiagnostic(diagnostics, source, token.start, `Unsupported <prosody volume> value "${volume}".`);
+  }
+  if (name === "mstts:express-as" || name === "express-as" || name === "expressas") {
+    const style = attr(token, "style");
+    if (!style?.trim())
+      addDiagnostic(diagnostics, source, token.start, '<mstts:express-as> requires a non-empty "style" attribute.');
+    const degree = attr(token, "styledegree") ?? attr(token, "style-degree");
+    if (degree && (!/^\d+(?:\.\d+)?$/.test(degree) || Number(degree) < 0.01 || Number(degree) > 2))
+      addDiagnostic(
+        diagnostics,
+        source,
+        token.start,
+        "<mstts:express-as styledegree> must be a number between 0.01 and 2."
+      );
+    const role = attr(token, "role");
+    if (role && !ALLOWED_ROLES.has(role))
+      addDiagnostic(diagnostics, source, token.start, `Unsupported <mstts:express-as role> value "${role}".`);
+    const definition = voiceName ? voiceCatalog.get(voiceName.toLowerCase()) : void 0;
+    const supportedStyles = definition?.styles;
+    const severity = diagnosticSeverity(options.unsupportedStylePolicy ?? options.unknownVoicePolicy ?? "warn");
+    if (style && definition && !supportedStyles?.some((candidate) => candidate.toLowerCase() === style.toLowerCase()) && severity)
+      addDiagnostic(
+        diagnostics,
+        source,
+        token.start,
+        `Unknown style "${style}" is not supported by voice "${voiceName}" according to the configured voice style map.`,
+        severity,
+        "azure-unsupported-style"
+      );
+    if (style && voiceName && !definition && severity)
+      addDiagnostic(
+        diagnostics,
+        source,
+        token.start,
+        `Unknown style "${style}" cannot be verified because voice "${voiceName}" is not registered in the voice style map.`,
+        severity
+      );
+  }
+  if (name === "say-as" || name === "sayas") {
+    const interpretAs = attr(token, "interpret-as");
+    if (!interpretAs || !ALLOWED_SAY_AS.has(interpretAs))
+      addDiagnostic(diagnostics, source, token.start, `<say-as> requires a supported "interpret-as" value.`);
+  }
+  if (name === "phoneme" && (!attr(token, "alphabet") || !attr(token, "ph")))
+    addDiagnostic(diagnostics, source, token.start, '<phoneme> requires both "alphabet" and "ph" attributes.');
+  if (name === "emphasis" && attr(token, "level") && !ALLOWED_EMPHASIS_LEVELS.has(attr(token, "level") ?? ""))
+    addDiagnostic(diagnostics, source, token.start, `Unsupported <emphasis level> value "${attr(token, "level")}".`);
+  if (name === "sub" && !attr(token, "alias")?.trim())
+    addDiagnostic(diagnostics, source, token.start, '<sub> requires a non-empty "alias" attribute.');
+  if (name === "lang" && !attr(token, "xml:lang")?.trim() && !attr(token, "lang")?.trim())
+    addDiagnostic(diagnostics, source, token.start, '<lang> requires an "xml:lang" attribute.');
+  if (name === "mark" && !attr(token, "name")?.trim())
+    addDiagnostic(diagnostics, source, token.start, '<mark> requires a non-empty "name" attribute.');
+  if (name === "bookmark" && !attr(token, "mark")?.trim())
+    addDiagnostic(diagnostics, source, token.start, '<bookmark> requires a non-empty "mark" attribute.');
+  if (name === "lexicon") {
+    const uri = attr(token, "uri");
+    if (!uri) addDiagnostic(diagnostics, source, token.start, '<lexicon> requires a "uri" attribute.');
+    else {
+      try {
+        const parsed = new URL(uri);
+        if (parsed.protocol !== "https:")
+          addDiagnostic(diagnostics, source, token.start, "<lexicon uri> must use HTTPS.");
+      } catch {
+        addDiagnostic(diagnostics, source, token.start, "<lexicon uri> must be an absolute HTTPS URL.");
+      }
+    }
+  }
+  if (name === "mstts:silence") {
+    const type = attr(token, "type");
+    const value = attr(token, "value");
+    if (!type || !ALLOWED_SILENCE_TYPES.has(type))
+      addDiagnostic(diagnostics, source, token.start, '<mstts:silence> requires a supported "type" attribute.');
+    if (!value || !/^\d+(?:\.\d+)?(?:ms|s)$/.test(value.trim()))
+      addDiagnostic(diagnostics, source, token.start, '<mstts:silence> requires a time-valued "value" attribute.');
+  }
+  if (name === "mstts:audioduration") {
+    const value = attr(token, "value");
+    if (!value || !isValidAzureAudioDuration(value))
+      addDiagnostic(
+        diagnostics,
+        source,
+        token.start,
+        '<mstts:audioduration> requires a positive duration such as "10s", "5000ms", or "00:00:10".'
+      );
+    if (!token.selfClosing)
+      addDiagnostic(diagnostics, source, token.start, "<mstts:audioduration> must be self-closing.");
+  }
+  if (name === "mstts:viseme") {
+    const type = attr(token, "type");
+    if (!type || !ALLOWED_VISEME_TYPES.has(type))
+      addDiagnostic(diagnostics, source, token.start, '<mstts:viseme> requires a supported "type" attribute.');
+  }
+  if (name === "audio") {
+    validateAudioSource(token, source, diagnostics, options, "audio");
+  }
+  if (name === "mstts:turn") {
+    if (!attr(token, "voice")?.trim())
+      addDiagnostic(diagnostics, source, token.start, '<mstts:turn> requires a non-empty "voice" attribute.');
+    if (token.parentName?.toLowerCase() !== "mstts:dialog")
+      addDiagnostic(diagnostics, source, token.start, "<mstts:turn> is only allowed directly inside <mstts:dialog>.");
+  }
+  if (name === "mstts:backgroundaudio") {
+    validateAudioSource(token, source, diagnostics, options, "mstts:backgroundaudio");
+    const volume = attr(token, "volume");
+    if (volume && !/^(silent|x-soft|soft|medium|loud|x-loud|[+-]?\d+(?:\.\d+)?(?:dB|%))$/i.test(volume.trim()))
+      addDiagnostic(diagnostics, source, token.start, `Unsupported <mstts:backgroundaudio volume> value "${volume}".`);
+    for (const [attribute, value] of [
+      ["fadein", attr(token, "fadein")],
+      ["fadeout", attr(token, "fadeout")]
+    ]) {
+      if (value && !isValidAzureAudioDuration(value))
+        addDiagnostic(
+          diagnostics,
+          source,
+          token.start,
+          `<mstts:backgroundaudio ${attribute}> must be a positive duration such as "500ms" or "10s".`
+        );
+    }
+    if (!token.selfClosing)
+      addDiagnostic(diagnostics, source, token.start, "<mstts:backgroundaudio> must be self-closing.");
+  }
+}
+function validateAzureSsml(ssml, options = {}) {
+  const diagnostics = [];
+  if (typeof ssml !== "string") {
+    return [
+      {
+        line: 1,
+        column: 1,
+        message: "SSML input must be a string",
+        severity: "error",
+        source: "ssml-static-validator"
+      }
+    ];
+  }
+  const maxLength = options.maxLength ?? 1e4;
+  if (ssml.length > maxLength)
+    addDiagnostic(diagnostics, ssml, maxLength, `SSML exceeds the maximum length of ${maxLength} characters.`);
+  try {
+    parseSsml(ssml);
+  } catch (error) {
+    const message = error instanceof Error ? error.message.replace(/ at position \d+$/, "") : String(error);
+    const match = / at position (\d+)$/.exec(error instanceof Error ? error.message : "");
+    addDiagnostic(diagnostics, ssml, match ? Number(match[1]) : 0, message);
+    return diagnostics;
+  }
+  const tokens = tokenizeElements(ssml);
+  const speak = tokens.find((token) => token.name.toLowerCase() === "speak");
+  const voices = tokens.filter((token) => token.name.toLowerCase() === "voice");
+  if (!speak || voices.length === 0)
+    addDiagnostic(
+      diagnostics,
+      ssml,
+      speak?.start ?? 0,
+      "Azure SSML requires at least one <voice> element under <speak>."
+    );
+  const voiceName = voices[0] ? attr(voices[0], "name") : void 0;
+  const voiceCatalog = normalizeVoiceCatalog(options);
+  const normalizeLanguage = createLanguageNormalizer(options);
+  const policySeverity = diagnosticSeverity(options.unknownVoicePolicy ?? "warn");
+  const voicesToValidate = options.validateNestedVoices === false ? voices.slice(0, 1) : voices;
+  for (const token of voicesToValidate) {
+    const name = attr(token, "name")?.trim();
+    const language = attr(token, "xml:lang")?.trim() || (speak ? attr(speak, "xml:lang")?.trim() : void 0);
+    const definition = name ? voiceCatalog.get(name.toLowerCase()) : void 0;
+    if (name && !definition && policySeverity)
+      addDiagnostic(
+        diagnostics,
+        ssml,
+        token.start,
+        `Unknown voice "${name}" is not registered in the voice catalog.`,
+        policySeverity,
+        "azure-unknown-voice"
+      );
+    if (name && language && definitionMatchesLanguage(definition, name, language, normalizeLanguage) === false)
+      addDiagnostic(
+        diagnostics,
+        ssml,
+        token.start,
+        `Voice "${name}" does not match language "${language}"; the voice name prefix indicates a different language or region.`,
+        "warning",
+        "azure-locale-mismatch"
+      );
+  }
+  for (const token of tokens) {
+    const tokenName = token.name.toLowerCase();
+    const tokenVoiceName = tokenName === "voice" ? attr(token, "name")?.trim() : tokenName === "mstts:turn" ? attr(token, "voice")?.trim() || token.parentVoiceName : options.validateNestedVoices === false ? voiceName : token.parentVoiceName;
+    validateElement(token, ssml, diagnostics, tokenVoiceName, options, voiceCatalog);
+    const definition = tokenVoiceName ? voiceCatalog.get(tokenVoiceName.toLowerCase()) : void 0;
+    validateVoiceFeatureMatrix(token, ssml, diagnostics, tokenVoiceName, definition);
+    if (tokenName === "voice" && options.model && definition?.models && !definition.models.some((model) => model.toLowerCase() === options.model?.toLowerCase())) {
+      addDiagnostic(
+        diagnostics,
+        ssml,
+        token.start,
+        `Voice "${tokenVoiceName}" does not support model "${options.model}" according to the configured feature matrix.`,
+        "error",
+        "azure-unsupported-model-for-voice"
+      );
+    }
+  }
+  return diagnostics;
+}
+var AZURE_VOICE_CATALOG_METADATA = {
+  apiVersion: "2025-10-01",
+  generatedAt: "2026-08-28T00:00:00.000Z",
+  regions: [],
+  voiceCount: AZURE_VOICE_DEFINITIONS.length
+};
 
 // packages/ssml-editor-react/src/clearSsmlDocument.ts
 function getDocumentChildren(document2) {
@@ -3266,7 +3975,7 @@ function createSsmlInsertionEdit(source, startOffset, endOffset, template, eol =
 }
 
 // packages/ssml-editor-react/src/ssmlContext.ts
-function findTagEnd2(source, start, limit) {
+function findTagEnd3(source, start, limit) {
   let quote;
   for (let index = start + 1; index < limit; index += 1) {
     const character = source[index];
@@ -3336,7 +4045,7 @@ function findActiveSsmlTags(source, offset) {
       index = end;
       continue;
     }
-    const tagEnd = findTagEnd2(source, tagStart, source.length);
+    const tagEnd = findTagEnd3(source, tagStart, source.length);
     const tag = source.slice(tagStart, tagEnd === -1 ? source.length : tagEnd + 1);
     const closingMatch = tag.match(/^<\s*\/\s*([A-Za-z_][A-Za-z0-9_.:-]*)/);
     const openingMatch = tag.match(/^<\s*([A-Za-z_][A-Za-z0-9_.:-]*)/);
@@ -3379,7 +4088,7 @@ function findSsmlVoiceContext(source, offset) {
       index = end === -1 || end + 2 > limit ? limit : end + 2;
       continue;
     }
-    const tagEnd = findTagEnd2(source, tagStart, limit);
+    const tagEnd = findTagEnd3(source, tagStart, limit);
     if (tagEnd === -1) {
       break;
     }
@@ -4139,6 +4848,24 @@ var SSML_COMPLETION_SNIPPETS = [
     label: "mstts:audioduration",
     insertText: '<mstts:audioduration value="10s" />'
   },
+  {
+    label: "mstts:dialog",
+    insertText: `<mstts:dialog>
+  <mstts:turn voice="\${1:en-US-JennyNeural}">\${2:text}</mstts:turn>
+</mstts:dialog>`
+  },
+  {
+    label: "mstts:turn",
+    insertText: `<mstts:turn voice="\${1:en-US-JennyNeural}">\${2:text}</mstts:turn>`
+  },
+  {
+    label: "mstts:backgroundaudio",
+    insertText: `<mstts:backgroundaudio src="\${1:https://example.com/audio.mp3}" volume="\${2:-3dB}" />`
+  },
+  {
+    label: "mstts:ttsembedding",
+    insertText: `<mstts:ttsembedding>\${1:text}</mstts:ttsembedding>`
+  },
   {
     label: "sub",
     insertText: `<sub alias="\${1:\u8AAD\u307F}">\${2:\u6F22\u5B57}</sub>`
@@ -4317,7 +5044,7 @@ function registerSsmlCodeActions(monaco) {
 
 // packages/ssml-editor-react/src/ssmlCodeLens.ts
 var CODE_LENS_COMMAND = "ssml-editor.codeLens";
-function findTagEnd3(source, start) {
+function findTagEnd4(source, start) {
   let quote;
   for (let index = start + 1; index < source.length; index += 1) {
     const character = source[index];
@@ -4357,7 +5084,7 @@ function getElementEnd(source, tagName, tagEnd) {
       index = index === -1 ? source.length : index + 3;
       continue;
     }
-    const nextEnd = findTagEnd3(source, nextStart);
+    const nextEnd = findTagEnd4(source, nextStart);
     if (nextEnd === -1) {
       break;
     }
@@ -4409,7 +5136,7 @@ function registerSsmlCodeLens(monaco, editor, onOpenPopover) {
           index = index === -1 ? source.length : index + 3;
           continue;
         }
-        const tagEnd = findTagEnd3(source, tagStart);
+        const tagEnd = findTagEnd4(source, tagStart);
         if (tagEnd === -1) {
           break;
         }
@@ -4806,6 +5533,63 @@ var SSML_TAG_DEFINITIONS = [
         example: "10s"
       }
     ]
+  },
+  {
+    name: "mstts:dialog",
+    description: "Groups multiple Azure dialog turns that can use different voices.",
+    parameters: []
+  },
+  {
+    name: "mstts:turn",
+    description: "Adds one dialog turn using the required Azure voice name.",
+    parameters: [
+      {
+        name: "voice",
+        description: "The Azure voice used for this turn, such as `en-US-JennyNeural`.",
+        example: "en-US-JennyNeural"
+      }
+    ]
+  },
+  {
+    name: "mstts:backgroundaudio",
+    description: "Plays background audio while speech is synthesized.",
+    parameters: [
+      {
+        name: "src",
+        description: "An absolute HTTP(S) URL for the background audio file.",
+        example: "https://example.com/music.mp3"
+      },
+      {
+        name: "volume",
+        description: "The background audio volume, for example `-3dB` or `medium`.",
+        example: "-3dB"
+      },
+      {
+        name: "fadein",
+        description: "The fade-in duration, for example `1s`.",
+        example: "1s"
+      },
+      {
+        name: "fadeout",
+        description: "The fade-out duration, for example `500ms`.",
+        example: "500ms"
+      }
+    ]
+  },
+  {
+    name: "mstts:ttsembedding",
+    description: "Embeds custom voice or speaker profile metadata for Azure Speech.",
+    parameters: []
+  },
+  {
+    name: "mstts:embedding",
+    description: "Specifies embedding metadata for custom voice scenarios.",
+    parameters: []
+  },
+  {
+    name: "mstts:voiceconversion",
+    description: "Specifies voice conversion metadata for custom voice scenarios.",
+    parameters: []
   }
 ];
 var definitionsByName = /* @__PURE__ */ new Map();
@@ -4864,7 +5648,7 @@ function toRange(source, token) {
 function containsOffset(token, offset) {
   return offset >= token.start && offset < token.end;
 }
-function findTagEnd4(source, start) {
+function findTagEnd5(source, start) {
   let quote;
   for (let index = start; index < source.length; index += 1) {
     const character = source[index];
@@ -4995,7 +5779,7 @@ function findTagAtOffset(source, offset) {
       searchStart = tokenEnd2;
       continue;
     }
-    const tagEnd = findTagEnd4(source, start + 1);
+    const tagEnd = findTagEnd5(source, start + 1);
     const contentEnd = tagEnd ?? source.length;
     const tokenEnd = tagEnd === void 0 ? source.length : tagEnd + 1;
     if (offset < tokenEnd) {
@@ -5410,6 +6194,140 @@ function useSsmlMonaco({
   return { editorRef, onMount };
 }
 
+// packages/ssml-editor-react/src/components/VisualSsmlEditor.tsx
+var import_react3 = require("react");
+function isElement(node) {
+  return typeof node !== "string" && node.type !== "text";
+}
+function elementLabel(element) {
+  return element.type === "custom" || element.type === "element" ? element.name : element.type;
+}
+function collectTextLeaves(nodes, path = [], ancestors = []) {
+  return nodes.flatMap((node, index) => {
+    const currentPath = [...path, index];
+    if (typeof node === "string") return [{ ancestors, path: currentPath, value: node }];
+    if (node.type === "text") return [{ ancestors, path: currentPath, value: node.value }];
+    return collectTextLeaves(node.children ?? [], currentPath, [...ancestors, elementLabel(node)]);
+  });
+}
+function updateNodesAtPath(nodes, path, update) {
+  if (path.length === 0) return nodes;
+  const [index, ...rest] = path;
+  return nodes.flatMap((node, nodeIndex) => {
+    if (nodeIndex !== index) return [node];
+    if (rest.length === 0) {
+      const next = update(node);
+      return Array.isArray(next) ? next : [next];
+    }
+    if (!isElement(node)) return [node];
+    return [{ ...node, children: updateNodesAtPath(node.children ?? [], rest, update) }];
+  });
+}
+function updateTextAtPath(document2, path, value) {
+  return { ...document2, children: updateNodesAtPath(document2.children ?? [], path, () => value) };
+}
+function wrapTextAtPath(document2, path, start, end, tag, attributes) {
+  return {
+    ...document2,
+    children: updateNodesAtPath(document2.children ?? [], path, (node) => {
+      const value = typeof node === "string" ? node : node.type === "text" ? node.value : "";
+      if (!value || start === end) return node;
+      if (tag === "break") {
+        return [
+          value.slice(0, start),
+          { type: tag, attributes, children: [] },
+          value.slice(start)
+        ].filter((part) => typeof part === "string" ? part.length > 0 : true);
+      }
+      const selected = value.slice(start, end);
+      const wrapped = { type: tag, attributes, children: [selected] };
+      return [value.slice(0, start), wrapped, value.slice(end)].filter(
+        (part) => typeof part === "string" ? part.length > 0 : true
+      );
+    })
+  };
+}
+function TreeNode({
+  node,
+  path,
+  selectedPath,
+  onSelect
+}) {
+  if (!isElement(node)) return null;
+  const name = elementLabel(node);
+  const isSelected = selectedPath?.join(".") === path.join(".");
+  return /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("button", { type: "button", "aria-current": isSelected ? "true" : void 0, onClick: () => onSelect(path) }, `<${name}>`), (node.children ?? []).length > 0 && /* @__PURE__ */ React.createElement("ul", null, node.children?.map((child, index) => /* @__PURE__ */ React.createElement(
+    TreeNode,
+    {
+      key: `${path.join(".")}/${isElement(child) ? elementLabel(child) : JSON.stringify(child)}`,
+      node: child,
+      path: [...path, index],
+      selectedPath,
+      onSelect
+    }
+  ))));
+}
+function VisualSsmlEditor({
+  document: document2,
+  readOnly = false,
+  onChange,
+  onPreviewSelection
+}) {
+  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 diagnostics = (0, import_react3.useMemo)(() => validateAzureSsml(buildSsml(document2)), [document2]);
+  const commit = (nextDocument) => onChange?.(nextDocument);
+  const applyWrapper = (tag, attributes) => {
+    if (readOnly || !selectedLeaf) return;
+    const start = selection.start === selection.end ? 0 : selection.start;
+    const end = selection.start === selection.end ? selectedLeaf.value.length : selection.end;
+    commit(wrapTextAtPath(document2, selectedLeaf.path, start, end, tag, attributes));
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "ssml-editor-visual", "data-ssml-editor-visual": "" }, /* @__PURE__ */ React.createElement("fieldset", { className: "ssml-editor-visual-breadcrumb" }, /* @__PURE__ */ React.createElement("legend", null, "SSML structure breadcrumb"), /* @__PURE__ */ React.createElement("span", null, "<speak>"), selectedLeaf?.ancestors.map((ancestor, index) => /* @__PURE__ */ React.createElement("span", { key: selectedLeaf?.ancestors.slice(0, index + 1).join("/") }, " / <", ancestor, ">")), selectedPath && /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setSelectedPath(null) }, "Clear parent")), diagnostics.length > 0 && /* @__PURE__ */ React.createElement("div", { role: "alert", "aria-invalid": "true", className: "ssml-editor-visual-errors" }, diagnostics.map((diagnostic) => /* @__PURE__ */ React.createElement("div", { key: `${diagnostic.code}-${diagnostic.message}` }, diagnostic.message))), /* @__PURE__ */ React.createElement("div", { className: "ssml-editor-visual-layout" }, /* @__PURE__ */ React.createElement("nav", { "aria-label": "SSML structure tree", className: "ssml-editor-visual-tree" }, /* @__PURE__ */ React.createElement("strong", null, "Structure"), /* @__PURE__ */ React.createElement("ul", null, document2.children?.map((node, index) => /* @__PURE__ */ React.createElement(
+    TreeNode,
+    {
+      key: isElement(node) ? elementLabel(node) : JSON.stringify(node),
+      node,
+      path: [index],
+      selectedPath,
+      onSelect: setSelectedPath
+    }
+  )))), /* @__PURE__ */ React.createElement("div", { className: "ssml-editor-visual-form" }, selectedLeaf ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", null, "Text", /* @__PURE__ */ React.createElement(
+    "textarea",
+    {
+      value: selectedLeaf.value,
+      readOnly,
+      onSelect: (event) => setSelection({ start: event.currentTarget.selectionStart, end: event.currentTarget.selectionEnd }),
+      onChange: (event) => commit(updateTextAtPath(document2, selectedLeaf.path, event.target.value))
+    }
+  )), /* @__PURE__ */ React.createElement("fieldset", { className: "ssml-editor-visual-actions" }, /* @__PURE__ */ React.createElement("legend", null, "Apply SSML formatting"), /* @__PURE__ */ React.createElement("button", { type: "button", disabled: readOnly, onClick: () => applyWrapper("prosody", { rate: "slow" }) }, "Rate"), /* @__PURE__ */ React.createElement("button", { type: "button", disabled: readOnly, onClick: () => applyWrapper("prosody", { pitch: "high" }) }, "Pitch"), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      disabled: readOnly,
+      onClick: () => applyWrapper("mstts:express-as", { style: "cheerful" })
+    },
+    "Emotion"
+  ), /* @__PURE__ */ React.createElement("button", { type: "button", disabled: readOnly, onClick: () => applyWrapper("break", { time: "500ms" }) }, "Pause"), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      disabled: readOnly,
+      onClick: () => applyWrapper("phoneme", { alphabet: "ipa", ph: selectedLeaf.value })
+    },
+    "Pronunciation"
+  ), onPreviewSelection && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => onPreviewSelection(buildSsml({ ...document2, children: [selectedLeaf.value] }))
+    },
+    "Preview selection"
+  ))) : /* @__PURE__ */ React.createElement("p", null, "Select an element or text node to edit it."))));
+}
+
 // packages/ssml-editor-react/src/SsmlEditor.tsx
 var UNGROUPED_TOOLBAR_GROUP = "__ssml-editor-ungrouped__";
 var TIMING_POPOVER_TAGS = /* @__PURE__ */ new Set(["break", "mstts:silence", "mstts:audioduration"]);
@@ -5876,6 +6794,60 @@ var STYLE_CSS = `
   > .ssml-editor-help-settings-summary::before {
   content: "\u25BE";
 }
+[data-ssml-editor] .ssml-editor-visual-layout {
+  display: grid;
+  grid-template-columns: minmax(12rem, 0.35fr) minmax(16rem, 1fr);
+  gap: 1rem;
+}
+[data-ssml-editor] .ssml-editor-visual-tree,
+[data-ssml-editor] .ssml-editor-visual-form {
+  display: grid;
+  gap: 0.5rem;
+  align-content: start;
+}
+[data-ssml-editor] .ssml-editor-visual-tree ul {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+[data-ssml-editor] .ssml-editor-visual-tree button,
+[data-ssml-editor] .ssml-editor-visual-breadcrumb button,
+[data-ssml-editor] .ssml-editor-visual-actions button {
+  padding: 0.35rem 0.5rem;
+  border: 1px solid var(--ssml-editor-control-border);
+  border-radius: 0.25rem;
+  color: var(--ssml-editor-color);
+  background: var(--ssml-editor-control-bg);
+  cursor: pointer;
+}
+[data-ssml-editor] .ssml-editor-visual-tree button[aria-current] {
+  border-color: var(--ssml-editor-active-border);
+  background: var(--ssml-editor-active-bg);
+}
+[data-ssml-editor] .ssml-editor-visual-breadcrumb,
+[data-ssml-editor] .ssml-editor-visual-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+}
+[data-ssml-editor] .ssml-editor-visual-form textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 6rem;
+  padding: 0.5rem;
+  color: var(--ssml-editor-color);
+  background: var(--ssml-editor-control-bg);
+  border: 1px solid var(--ssml-editor-control-border);
+  border-radius: 0.25rem;
+  font: inherit;
+}
+[data-ssml-editor] .ssml-editor-visual-errors {
+  padding: 0.5rem;
+  color: var(--ssml-editor-error);
+  background: var(--ssml-editor-error-bg);
+  border: 1px solid var(--ssml-editor-error);
+  border-radius: 0.25rem;
+}
 `.trim();
 function injectEditorTheme() {
   if (typeof document !== "undefined" && !document.getElementById(STYLE_ID)) {
@@ -5907,7 +6879,7 @@ function ToolbarDecorationsSwitch({
     /* @__PURE__ */ React.createElement("span", { className: "ssml-editor-switch-thumb", style: editorStyles.toolbarSwitchThumb, "aria-hidden": "true" })
   ));
 }
-var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
+var SsmlEditor = (0, import_react4.forwardRef)(function SsmlEditor2({
   document: document2,
   onChange,
   onSsmlChange,
@@ -5945,8 +6917,11 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
   toolbarStyle,
   displayClassName,
   displayStyle,
-  loadingFallback
+  loadingFallback,
+  editMode: editModeProp = "code"
 }, ref) {
+  const [editMode, setEditMode] = (0, import_react4.useState)(editModeProp);
+  (0, import_react4.useEffect)(() => setEditMode(editModeProp), [editModeProp]);
   const resolvedEditorOptions = {
     ...settings,
     ...editorOptions,
@@ -6024,6 +6999,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
   );
   const {
     editorRef,
+    draftDocument,
     text,
     selectionOverlay,
     activeTags,
@@ -6035,6 +7011,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     syntaxError,
     setSyntaxError,
     helpPanelId,
+    commit,
     handleTextChange,
     handleInsert,
     handleInsertBreak,
@@ -6082,7 +7059,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     enableCodeLens,
     onOpenPopover: handleCodeLensAction
   });
-  (0, import_react3.useImperativeHandle)(
+  (0, import_react4.useImperativeHandle)(
     ref,
     () => ({
       getSelectedSsml: getSelectedSsml2,
@@ -6265,7 +7242,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
       previousRenderedGroupId = groupId;
       hasRenderedToolbarItem = true;
       renderedItems.push(
-        /* @__PURE__ */ React.createElement(import_react3.Fragment, { key: id }, showSeparator && /* @__PURE__ */ React.createElement("span", { style: editorStyles.toolbarSeparator, "aria-hidden": "true" }), render())
+        /* @__PURE__ */ React.createElement(import_react4.Fragment, { key: id }, showSeparator && /* @__PURE__ */ React.createElement("span", { style: editorStyles.toolbarSeparator, "aria-hidden": "true" }), render())
       );
     }
     return renderedItems;
@@ -6294,11 +7271,40 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
           "aria-label": copy.toolbarAriaLabel,
           "data-ssml-editor-toolbar-actions": ""
         },
-        renderToolbarItems()
+        renderToolbarItems(),
+        /* @__PURE__ */ React.createElement("span", { style: editorStyles.toolbarSeparator, "aria-hidden": "true" }),
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            style: editMode === "visual" ? { ...toolbarButtonStyle, ...editorStyles.toolbarButtonActive } : toolbarButtonStyle,
+            "aria-pressed": editMode === "visual",
+            onClick: () => setEditMode("visual")
+          },
+          "Visual"
+        ),
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            style: editMode === "code" ? { ...toolbarButtonStyle, ...editorStyles.toolbarButtonActive } : toolbarButtonStyle,
+            "aria-pressed": editMode === "code",
+            onClick: () => setEditMode("code")
+          },
+          "Code"
+        )
       )
     ),
-    /* @__PURE__ */ React.createElement("div", { className: displayClassName, style: { ...editorStyles.display, ...displayStyle }, "data-ssml-editor-display": "" }, isHelpOpen && isSsmlEditorButtonVisible(buttonVisibility, "help") && /* @__PURE__ */ React.createElement("section", { id: helpPanelId, style: editorStyles.helpPanel, "aria-label": copy.helpHeading }, /* @__PURE__ */ React.createElement("h3", { style: editorStyles.helpHeading }, copy.helpHeading), /* @__PURE__ */ React.createElement("p", { style: editorStyles.helpDescription }, copy.helpDescription), helpInsertions.length > 0 && /* @__PURE__ */ React.createElement("ul", { style: editorStyles.helpList }, helpInsertions.map((insertion) => /* @__PURE__ */ React.createElement("li", { key: insertion.id, style: editorStyles.helpItem }, /* @__PURE__ */ React.createElement("details", { className: "ssml-editor-help-settings-accordion", style: editorStyles.helpSettingsAccordion }, /* @__PURE__ */ React.createElement("summary", { className: "ssml-editor-help-settings-summary", style: editorStyles.helpSettingsSummary }, /* @__PURE__ */ React.createElement("span", { style: editorStyles.helpIcon, "aria-hidden": "true" }, insertion.icon), /* @__PURE__ */ React.createElement("span", { style: editorStyles.helpSettingsSummaryContent }, /* @__PURE__ */ React.createElement("strong", null, insertion.labels[language]), " ", insertion.tagName && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("code", null, `<${insertion.tagName}${insertion.selfClosing ? "/>" : ">"}`), " \u2014", " "), insertion.descriptions[language])), /* @__PURE__ */ React.createElement("p", { style: editorStyles.helpSettingsDescription }, /* @__PURE__ */ React.createElement("strong", null, copy.parameters, ":"), " ", insertion.parameterDescription[language]), /* @__PURE__ */ React.createElement("ul", { style: editorStyles.helpSettingsList }, insertion.options.map((option) => /* @__PURE__ */ React.createElement("li", { key: option.value }, /* @__PURE__ */ React.createElement("strong", null, option.labels[language]), option.descriptions && /* @__PURE__ */ React.createElement(React.Fragment, null, " \u2014 ", option.descriptions[language]))))))))), /* @__PURE__ */ React.createElement("div", { style: { ...editorStyles.editor, minHeight: editorMinHeight } }, /* @__PURE__ */ React.createElement(
-      import_react4.default,
+    /* @__PURE__ */ React.createElement("div", { className: displayClassName, style: { ...editorStyles.display, ...displayStyle }, "data-ssml-editor-display": "" }, isHelpOpen && isSsmlEditorButtonVisible(buttonVisibility, "help") && /* @__PURE__ */ React.createElement("section", { id: helpPanelId, style: editorStyles.helpPanel, "aria-label": copy.helpHeading }, /* @__PURE__ */ React.createElement("h3", { style: editorStyles.helpHeading }, copy.helpHeading), /* @__PURE__ */ React.createElement("p", { style: editorStyles.helpDescription }, copy.helpDescription), helpInsertions.length > 0 && /* @__PURE__ */ React.createElement("ul", { style: editorStyles.helpList }, helpInsertions.map((insertion) => /* @__PURE__ */ React.createElement("li", { key: insertion.id, style: editorStyles.helpItem }, /* @__PURE__ */ React.createElement("details", { className: "ssml-editor-help-settings-accordion", style: editorStyles.helpSettingsAccordion }, /* @__PURE__ */ React.createElement("summary", { className: "ssml-editor-help-settings-summary", style: editorStyles.helpSettingsSummary }, /* @__PURE__ */ React.createElement("span", { style: editorStyles.helpIcon, "aria-hidden": "true" }, insertion.icon), /* @__PURE__ */ React.createElement("span", { style: editorStyles.helpSettingsSummaryContent }, /* @__PURE__ */ React.createElement("strong", null, insertion.labels[language]), " ", insertion.tagName && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("code", null, `<${insertion.tagName}${insertion.selfClosing ? "/>" : ">"}`), " \u2014", " "), insertion.descriptions[language])), /* @__PURE__ */ React.createElement("p", { style: editorStyles.helpSettingsDescription }, /* @__PURE__ */ React.createElement("strong", null, copy.parameters, ":"), " ", insertion.parameterDescription[language]), /* @__PURE__ */ React.createElement("ul", { style: editorStyles.helpSettingsList }, insertion.options.map((option) => /* @__PURE__ */ React.createElement("li", { key: option.value }, /* @__PURE__ */ React.createElement("strong", null, option.labels[language]), option.descriptions && /* @__PURE__ */ React.createElement(React.Fragment, null, " \u2014 ", option.descriptions[language]))))))))), editMode === "visual" ? /* @__PURE__ */ React.createElement("div", { style: editorStyles.visual }, /* @__PURE__ */ React.createElement(
+      VisualSsmlEditor,
+      {
+        document: draftDocument,
+        readOnly: isReadOnly,
+        onChange: commit,
+        onPreviewSelection
+      }
+    )) : /* @__PURE__ */ React.createElement("div", { style: { ...editorStyles.editor, minHeight: editorMinHeight } }, /* @__PURE__ */ React.createElement(
+      import_react5.default,
       {
         height: editorHeight,
         language: "xml",
@@ -6359,6 +7365,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
   SSML_HOVER_COPY,
   SSML_INSERTIONS,
   SsmlEditor,
+  VisualSsmlEditor,
   createSsmlEditorInsertionDefinition,
   registerSsmlCodeLens,
   updateTagAttribute