@ssml-builder-js/ssml-editor-elements 2.8.0 → 2.9.0

package/dist/index.mjs

@@ -5,7 +5,7 @@ var __export = (target, all) => {
 };
 
 // src/SsmlEditorElement.ts
-import { buildSsml as buildSsml2, parseSsml as parseSsml2 } from "@ssml-builder-js/ssml-core";
+import { buildSsml as buildSsml2, parseSsml as parseSsml2, validateAzureSsml } from "@ssml-builder-js/ssml-core";
 
 // ../ssml-editor-react/src/clearSsmlDocument.ts
 function getDocumentChildren(document2) {
@@ -69,6 +69,7 @@ var INTRINSICALLY_EMPTY_ELEMENTS = /* @__PURE__ */ new Set([
   "lexicon",
   "mark",
   "mstts:silence",
+  "mstts:audioduration",
   "mstts:viseme",
   "silence",
   "viseme"
@@ -727,6 +728,8 @@ function updateEditableText(document2, value) {
 // ../ssml-editor-react/src/constants/ssmlPresets.ts
 var ssmlPresets_exports = {};
 __export(ssmlPresets_exports, {
+  AUDIO_DURATION_DESCRIPTIONS: () => AUDIO_DURATION_DESCRIPTIONS,
+  AUDIO_DURATION_PRESETS: () => AUDIO_DURATION_PRESETS,
   BREAK_STRENGTH_PRESETS: () => BREAK_STRENGTH_PRESETS,
   BREAK_TIME_DESCRIPTIONS: () => BREAK_TIME_DESCRIPTIONS,
   BREAK_TIME_PRESETS: () => BREAK_TIME_PRESETS,
@@ -759,6 +762,103 @@ __export(ssmlPresets_exports, {
   getExpressAsStyleCategory: () => getExpressAsStyleCategory,
   resolveExpressAsStyles: () => resolveExpressAsStyles
 });
+
+// ../ssml-editor-react/src/constants/azureVoiceStyleMap.generated.ts
+var AZURE_VOICE_STYLE_MAP = {
+  "de-DE-ConradNeural": ["cheerful", "sad"],
+  "de-DE-KatjaNeural": ["cheerful", "sad"],
+  "en-US-AndrewNeural": ["empathetic", "relieved"],
+  "en-US-GuyNeural": [
+    "angry",
+    "cheerful",
+    "excited",
+    "friendly",
+    "hopeful",
+    "newscast",
+    "sad",
+    "shouting",
+    "terrified",
+    "unfriendly",
+    "whispering"
+  ],
+  "en-US-JennyMultilingualNeural": [
+    "cheerful",
+    "empathetic",
+    "excited",
+    "friendly",
+    "hopeful",
+    "sad",
+    "shouting",
+    "terrified",
+    "unfriendly",
+    "whispering"
+  ],
+  "en-US-JennyNeural": [
+    "assistant",
+    "chat",
+    "customerservice",
+    "newscast",
+    "cheerful",
+    "empathetic",
+    "excited",
+    "friendly",
+    "hopeful",
+    "sad",
+    "shouting",
+    "terrified",
+    "unfriendly",
+    "whispering"
+  ],
+  "es-ES-ElviraNeural": [],
+  "fil-PH-AngeloNeural": [],
+  "fr-FR-DeniseNeural": ["cheerful", "sad"],
+  "fr-FR-HenriNeural": ["cheerful", "sad"],
+  "id-ID-GadisNeural": [],
+  "it-IT-ElsaNeural": ["cheerful", "sad"],
+  "ja-JP-KeitaNeural": ["chat"],
+  "ja-JP-MayuNeural": ["calm", "cheerful", "sad"],
+  "ja-JP-NanamiNeural": ["chat", "customerservice", "cheerful", "whispering", "sad"],
+  "ko-KR-SunHiNeural": ["cheerful", "sad"],
+  "ms-MY-YasminNeural": [],
+  "pt-BR-FranciscaNeural": ["calm"],
+  "ru-RU-SvetlanaNeural": ["cheerful", "sad", "angry", "disgruntled", "embarrassed", "fearful"],
+  "th-TH-PremwadeeNeural": [],
+  "vi-VN-HoaiMyNeural": [],
+  "zh-CN-XiaoxiaoNeural": [
+    "assistant",
+    "chat",
+    "customerservice",
+    "newscast",
+    "cheerful",
+    "empathetic",
+    "excited",
+    "friendly",
+    "hopeful",
+    "sad",
+    "terrified",
+    "whispering",
+    "poetry-reading",
+    "sports_commentary",
+    "sports_commentary_excited",
+    "story"
+  ],
+  "zh-CN-YunxiNeural": [
+    "narration-relaxed",
+    "embarrassed",
+    "fearful",
+    "sad",
+    "disgruntled",
+    "serious",
+    "angry",
+    "depressed",
+    "chat",
+    "cheerful",
+    "assistant"
+  ],
+  "zh-TW-HsiaoChenNeural": []
+};
+
+// ../ssml-editor-react/src/constants/ssmlPresets.ts
 var SSML_PRESETS = [
   {
     id: "basic",
@@ -858,7 +958,7 @@ function getExpressAsStyleCategory(style) {
   }
   return "other";
 }
-var VOICE_STYLE_MAP = {
+var LEGACY_VOICE_STYLE_MAP = {
   "ja-JP-MayuNeural": ["calm", "cheerful", "sad"],
   "ja-JP-KeitaNeural": ["chat"],
   "ja-JP-NanamiNeural": ["chat", "customerservice", "cheerful", "whispering", "sad"],
@@ -944,6 +1044,7 @@ var VOICE_STYLE_MAP = {
   "de-DE-ConradNeural": ["cheerful", "sad"],
   "ru-RU-SvetlanaNeural": ["cheerful", "sad", "angry", "disgruntled", "embarrassed", "fearful"]
 };
+var VOICE_STYLE_MAP = Object.keys(AZURE_VOICE_STYLE_MAP).length > 0 ? AZURE_VOICE_STYLE_MAP : LEGACY_VOICE_STYLE_MAP;
 var VOICE_STYLE_MAP_BY_NORMALIZED_NAME = new Map(
   Object.entries(VOICE_STYLE_MAP).map(([voiceName, styles]) => [voiceName.toLowerCase(), styles])
 );
@@ -986,6 +1087,7 @@ var SAY_AS_PRESETS = [
 ];
 var LANGUAGE_PRESETS = ["ja-JP", "en-US", "de-DE", "fr-FR"];
 var SILENCE_VALUE_PRESETS = ["300ms", "500ms", "1s"];
+var AUDIO_DURATION_PRESETS = ["5s", "10s", "30s"];
 var SILENCE_TYPE_PRESETS = [
   "Leading",
   "Tailing",
@@ -994,6 +1096,11 @@ var SILENCE_TYPE_PRESETS = [
   "Semicolon",
   "Enumerationcomma"
 ];
+var AUDIO_DURATION_DESCRIPTIONS = {
+  "5s": { ja: "5\u79D2", en: "5 seconds" },
+  "10s": { ja: "10\u79D2", en: "10 seconds" },
+  "30s": { ja: "30\u79D2", en: "30 seconds" }
+};
 var PHONEME_ALPHABET_PRESETS = ["ipa", "sapi", "ups", "x-sampa"];
 var VISEME_TYPE_PRESETS = ["redlips_front", "FacialExpression"];
 var SSML_ATTRIBUTE_PRESETS = {
@@ -1037,6 +1144,14 @@ var SSML_ATTRIBUTE_PRESETS = {
     type: SILENCE_TYPE_PRESETS,
     value: SILENCE_VALUE_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
@@ -1524,6 +1639,28 @@ var SSML_COMPLETION_SNIPPETS = [
     label: "mstts:express-as",
     insertText: `<mstts:express-as style="cheerful">\${1:text}</mstts:express-as>`
   },
+  {
+    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>`
@@ -1791,6 +1928,13 @@ var SSML_HOVER_COPY = {
         parameters: {
           type: { title: "type", description: "\u30D3\u30BC\u30FC\u30E0\u30A4\u30D9\u30F3\u30C8\u306E\u5F62\u5F0F\u3002" }
         }
+      },
+      "mstts:audioduration": {
+        title: "\u97F3\u58F0\u9577",
+        description: "\u5408\u6210\u97F3\u58F0\u306E\u76EE\u6A19\u6642\u9593\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+        parameters: {
+          value: { title: "value", description: "\u76EE\u6A19\u6642\u9593\u3002\u4F8B: `10s`\u3001`5000ms`\u3001`00:00:10`\u3002" }
+        }
       }
     }
   },
@@ -1948,6 +2092,13 @@ var SSML_HOVER_COPY = {
         parameters: {
           type: { title: "type", description: "The viseme event format." }
         }
+      },
+      "mstts:audioduration": {
+        title: "Audio duration",
+        description: "Sets the target duration of synthesized audio.",
+        parameters: {
+          value: { title: "value", description: "The target duration, such as `10s`, `5000ms`, or `00:00:10`." }
+        }
       }
     }
   }
@@ -2244,6 +2395,74 @@ var SSML_TAG_DEFINITIONS = [
         values: VISEME_TYPE_PRESETS2
       }
     ]
+  },
+  {
+    name: "mstts:audioduration",
+    description: "Sets the target duration of synthesized audio.",
+    parameters: [
+      {
+        name: "value",
+        description: "The target duration, such as `10s`, `5000ms`, or `00:00:10`.",
+        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();
@@ -2785,13 +3004,34 @@ var SSML_INSERTIONS = [
       suffix: "",
       mode: "insert"
     })
+  },
+  {
+    id: "mstts:audioduration",
+    icon: "\u25F7",
+    tagName: "mstts:audioduration",
+    selfClosing: true,
+    labels: { ja: "\u97F3\u58F0\u9577", en: "Audio duration" },
+    descriptions: {
+      ja: "\u5408\u6210\u97F3\u58F0\u306E\u76EE\u6A19\u6642\u9593\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+      en: "Sets the target duration of synthesized audio."
+    },
+    parameterDescription: {
+      ja: "\u76EE\u6A19\u6642\u9593\u3092\u9078\u629E\u3057\u307E\u3059\u3002",
+      en: "Selects the target duration."
+    },
+    options: createInsertionOptions(AUDIO_DURATION_PRESETS, AUDIO_DURATION_DESCRIPTIONS),
+    createTemplate: (value) => ({
+      prefix: `<mstts:audioduration value="${value}"/>`,
+      suffix: "",
+      mode: "insert"
+    })
   }
 ];
 var DEFAULT_INSERTION_GROUPS = [
   {
     id: "pauses",
     labels: { ja: "\u9593\u30FB\u7121\u97F3", en: "Pauses" },
-    insertionIds: ["break", "mstts:silence"]
+    insertionIds: ["break", "mstts:silence", "mstts:audioduration"]
   },
   {
     id: "prosody",
@@ -3028,6 +3268,60 @@ section[data-ssml-editor] {
   border-radius: 0.25rem;
   overflow: visible;
 }
+[data-ssml-editor] .ssml-editor-visual {
+  display: grid;
+  gap: 0.75rem;
+  min-height: 8rem;
+  padding: 0.75rem;
+  border: 1px solid var(--ssml-editor-control-border);
+  border-radius: 0.25rem;
+}
+[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 ul {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+[data-ssml-editor] .ssml-editor-visual 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 button[data-selected="true"] {
+  border-color: var(--ssml-editor-active-border);
+  background: var(--ssml-editor-active-bg);
+}
+[data-ssml-editor] .ssml-editor-visual 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-actions,
+[data-ssml-editor] .ssml-editor-visual-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+}
+[data-ssml-editor] .ssml-editor-visual-errors {
+  padding: 0.5rem;
+  color: #b91c1c;
+  background: #fef2f2;
+  border: 1px solid #b91c1c;
+  border-radius: 0.25rem;
+}
 `.trim();
 function injectStyles() {
   if (typeof document === "undefined" || document.getElementById(STYLE_ID)) {
@@ -3041,6 +3335,55 @@ function injectStyles() {
 function isDarkTheme(theme) {
   return theme === "vs-dark" || theme.toLowerCase().includes("dark");
 }
+function isElement(node) {
+  return typeof node !== "string" && node.type !== "text";
+}
+function visualElementName(element) {
+  return element.type === "custom" || element.type === "element" ? element.name : element.type;
+}
+function collectVisualTextLeaves(nodes, path = [], ancestors = []) {
+  return nodes.flatMap((node, index) => {
+    const currentPath = [...path, index];
+    if (typeof node === "string") return [{ path: currentPath, value: node, ancestors }];
+    if (node.type === "text") return [{ path: currentPath, value: node.value, ancestors }];
+    return collectVisualTextLeaves(node.children ?? [], currentPath, [...ancestors, visualElementName(node)]);
+  });
+}
+function updateVisualNodes(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: updateVisualNodes(node.children ?? [], rest, update) }];
+  });
+}
+function updateVisualText(document2, path, value) {
+  return { ...document2, children: updateVisualNodes(document2.children ?? [], path, () => value) };
+}
+function wrapVisualText(document2, path, start, end, type, attributes) {
+  return {
+    ...document2,
+    children: updateVisualNodes(document2.children ?? [], path, (node) => {
+      const value = typeof node === "string" ? node : node.type === "text" ? node.value : "";
+      if (!value || start === end) return node;
+      if (type === "break") {
+        return [value.slice(0, start), { type, attributes, children: [] }, value.slice(start)].filter(
+          (part) => typeof part === "string" ? part.length > 0 : true
+        );
+      }
+      const selected = value.slice(start, end);
+      const wrapper = { type, attributes, children: [selected] };
+      return [value.slice(0, start), wrapper, value.slice(end)].filter(
+        (part) => typeof part === "string" ? part.length > 0 : true
+      );
+    })
+  };
+}
 function getMenuPosition(trigger, menu) {
   const bounds = trigger.getBoundingClientRect();
   const margin = 8;
@@ -3062,6 +3405,7 @@ var SsmlEditorElement = class extends HTMLElementBase {
     this.toolbarActions = null;
     this.display = null;
     this.editorContainer = null;
+    this.visualContainer = null;
     this.helpPanel = null;
     this.openMenu = null;
     this.openMenuTrigger = null;
@@ -3075,6 +3419,8 @@ var SsmlEditorElement = class extends HTMLElementBase {
     this.documentState = null;
     this.decorationsVisible = false;
     this.helpOpen = false;
+    this.visualSelectedPath = null;
+    this.visualSelection = { start: 0, end: 0 };
     this.handleDocumentPointerDown = (event) => {
       const target = event.target;
       if (this.openMenu && target instanceof Node && !this.openMenu.contains(target) && !this.openMenuTrigger?.contains(target)) {
@@ -3116,6 +3462,12 @@ var SsmlEditorElement = class extends HTMLElementBase {
   set locale(locale) {
     this.setAttribute("locale", locale);
   }
+  get editMode() {
+    return this.getAttribute("edit-mode") === "visual" ? "visual" : "code";
+  }
+  set editMode(mode) {
+    this.setAttribute("edit-mode", mode);
+  }
   prepareDocument(value) {
     try {
       this.documentState = parseSsml2(value);
@@ -3158,6 +3510,7 @@ var SsmlEditorElement = class extends HTMLElementBase {
           }
         }
       }
+      this.renderVisualEditor();
       return;
     }
     if (name === "theme" && this.monaco) {
@@ -3175,6 +3528,9 @@ var SsmlEditorElement = class extends HTMLElementBase {
       this.renderHelp();
       return;
     }
+    if (name === "edit-mode") {
+      this.updateEditMode();
+    }
     if (name === "show-decorations") {
       this.decorationsVisible = newValue !== null;
       this.updateDecorations();
@@ -3199,7 +3555,9 @@ var SsmlEditorElement = class extends HTMLElementBase {
     display.dataset.ssmlEditorDisplay = "";
     const editorContainer = document.createElement("div");
     editorContainer.className = "ssml-editor-editor";
-    display.append(editorContainer);
+    const visualContainer = document.createElement("div");
+    visualContainer.className = "ssml-editor-visual";
+    display.append(editorContainer, visualContainer);
     root.append(toolbar, display);
     this.replaceChildren(root);
     this.root = root;
@@ -3207,8 +3565,11 @@ var SsmlEditorElement = class extends HTMLElementBase {
     this.toolbarActions = toolbarActions;
     this.display = display;
     this.editorContainer = editorContainer;
+    this.visualContainer = visualContainer;
     this.renderToolbar();
     this.renderHelp();
+    this.updateEditMode();
+    this.renderVisualEditor();
   }
   renderToolbar() {
     const toolbar = this.toolbar;
@@ -3252,10 +3613,10 @@ var SsmlEditorElement = class extends HTMLElementBase {
     for (const id of toolbarIds) {
       const group = groupByButtonId.get(id);
       if (previousGroup !== void 0 && group !== previousGroup) {
-        const separator = document.createElement("span");
-        separator.className = "ssml-editor-toolbar-separator";
-        separator.setAttribute("aria-hidden", "true");
-        toolbarActions.append(separator);
+        const separator2 = document.createElement("span");
+        separator2.className = "ssml-editor-toolbar-separator";
+        separator2.setAttribute("aria-hidden", "true");
+        toolbarActions.append(separator2);
       }
       previousGroup = group;
       const insertion = insertionById.get(id);
@@ -3267,8 +3628,24 @@ var SsmlEditorElement = class extends HTMLElementBase {
         toolbarActions.append(this.createActionButton(id));
       }
     }
+    const separator = document.createElement("span");
+    separator.className = "ssml-editor-toolbar-separator";
+    separator.setAttribute("aria-hidden", "true");
+    toolbarActions.append(separator, this.createModeButton("visual", "Visual"), this.createModeButton("code", "Code"));
     this.updateActiveButtons();
   }
+  createModeButton(mode, label) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "ssml-editor-toolbar-button";
+    button.dataset.ssmlEditorButton = `edit-mode-${mode}`;
+    button.setAttribute("aria-pressed", String(this.editMode === mode));
+    button.textContent = label;
+    button.addEventListener("click", () => {
+      this.editMode = mode;
+    });
+    return button;
+  }
   createActionButton(id) {
     const copy = EDITOR_COPY[this.locale];
     const labels = {
@@ -3648,6 +4025,150 @@ var SsmlEditorElement = class extends HTMLElementBase {
       this.root.dataset.theme = isDarkTheme(this.theme) ? "dark" : "light";
     }
   }
+  updateEditMode() {
+    if (this.editorContainer && this.visualContainer) {
+      const visual = this.editMode === "visual";
+      this.editorContainer.hidden = visual;
+      this.visualContainer.hidden = !visual;
+    }
+    for (const mode of ["visual", "code"]) {
+      const button = this.toolbarActions?.querySelector(
+        `[data-ssml-editor-button="edit-mode-${mode}"]`
+      );
+      button?.setAttribute("aria-pressed", String(this.editMode === mode));
+      button?.toggleAttribute("data-active", this.editMode === mode);
+    }
+    this.renderVisualEditor();
+  }
+  renderVisualEditor() {
+    const container = this.visualContainer;
+    if (!container) return;
+    container.replaceChildren();
+    if (!this.documentState) {
+      const error = document.createElement("p");
+      error.className = "ssml-editor-visual-errors";
+      error.textContent = "SSML syntax must be valid before visual editing is available.";
+      container.append(error);
+      return;
+    }
+    const documentState = this.documentState;
+    const leaves = collectVisualTextLeaves(documentState.children ?? []);
+    const selectedLeaf = leaves.find((leaf) => leaf.path.join(".") === this.visualSelectedPath?.join(".")) ?? leaves[0];
+    const breadcrumb = document.createElement("div");
+    breadcrumb.className = "ssml-editor-visual-breadcrumb";
+    breadcrumb.textContent = `<speak>${selectedLeaf ? ` / ${selectedLeaf.ancestors.map((name) => `<${name}>`).join(" / ")}` : ""}`;
+    const clear = document.createElement("button");
+    clear.type = "button";
+    clear.textContent = "Clear parent";
+    clear.disabled = !this.visualSelectedPath;
+    clear.addEventListener("click", () => {
+      this.visualSelectedPath = null;
+      this.renderVisualEditor();
+    });
+    breadcrumb.append(clear);
+    container.append(breadcrumb);
+    const diagnostics = validateAzureSsml(buildSsml2(documentState));
+    if (diagnostics.length > 0) {
+      const errors = document.createElement("div");
+      errors.className = "ssml-editor-visual-errors";
+      errors.setAttribute("role", "alert");
+      for (const diagnostic of diagnostics) {
+        const message = document.createElement("div");
+        message.textContent = diagnostic.message;
+        errors.append(message);
+      }
+      container.append(errors);
+    }
+    const layout = document.createElement("div");
+    layout.className = "ssml-editor-visual-layout";
+    const tree = document.createElement("nav");
+    tree.className = "ssml-editor-visual-tree";
+    tree.setAttribute("aria-label", "SSML structure tree");
+    tree.append(document.createTextNode("Structure"));
+    const treeList = document.createElement("ul");
+    const renderTree = (nodes, parent, parentPath = []) => {
+      nodes.forEach((node, index) => {
+        if (!isElement(node)) return;
+        const path = [...parentPath, index];
+        const item = document.createElement("li");
+        const button = document.createElement("button");
+        button.type = "button";
+        button.textContent = `<${visualElementName(node)}>`;
+        button.dataset.selected = String(path.join(".") === this.visualSelectedPath?.join("."));
+        button.addEventListener("click", () => {
+          this.visualSelectedPath = path;
+          this.renderVisualEditor();
+        });
+        item.append(button);
+        if ((node.children ?? []).some(isElement)) {
+          const childList = document.createElement("ul");
+          renderTree(node.children ?? [], childList, path);
+          item.append(childList);
+        }
+        parent.append(item);
+      });
+    };
+    renderTree(documentState.children ?? [], treeList);
+    tree.append(treeList);
+    layout.append(tree);
+    const form = document.createElement("div");
+    form.className = "ssml-editor-visual-form";
+    if (selectedLeaf) {
+      const label = document.createElement("label");
+      label.append(document.createTextNode("Text"));
+      const textarea = document.createElement("textarea");
+      textarea.value = selectedLeaf.value;
+      textarea.readOnly = this.readonly;
+      textarea.addEventListener("select", () => {
+        this.visualSelection = { start: textarea.selectionStart, end: textarea.selectionEnd };
+      });
+      textarea.addEventListener("input", () => {
+        if (!this.readonly) this.replaceDocument(updateVisualText(documentState, selectedLeaf.path, textarea.value));
+      });
+      label.append(textarea);
+      form.append(label);
+      const actions = document.createElement("div");
+      actions.className = "ssml-editor-visual-actions";
+      const wrappers = [
+        ["Rate", "prosody", { rate: "slow" }],
+        ["Pitch", "prosody", { pitch: "high" }],
+        ["Emotion", "mstts:express-as", { style: "cheerful" }],
+        ["Pause", "break", { time: "500ms" }],
+        ["Pronunciation", "phoneme", { alphabet: "ipa", ph: selectedLeaf.value }]
+      ];
+      for (const [labelText, type, attributes] of wrappers) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.textContent = labelText;
+        button.disabled = this.readonly;
+        button.addEventListener("click", () => {
+          const start = this.visualSelection.start === this.visualSelection.end ? 0 : this.visualSelection.start;
+          const end = this.visualSelection.start === this.visualSelection.end ? selectedLeaf.value.length : this.visualSelection.end;
+          this.replaceDocument(wrapVisualText(documentState, selectedLeaf.path, start, end, type, attributes));
+          this.renderVisualEditor();
+        });
+        actions.append(button);
+      }
+      const preview = document.createElement("button");
+      preview.type = "button";
+      preview.textContent = "Preview selection";
+      preview.addEventListener("click", () => {
+        this.dispatchEvent(
+          new CustomEvent("preview-selection", {
+            detail: { ssml: buildSsml2({ ...documentState, children: [selectedLeaf.value] }) },
+            bubbles: true,
+            composed: true
+          })
+        );
+      });
+      actions.append(preview);
+      form.append(actions);
+    } else {
+      form.textContent = "Select an element or text node to edit it.";
+    }
+    layout.append(form);
+    container.append(layout);
+  }
   updateActiveButtons() {
     const editor = this.editor;
     const model = this.model;
@@ -3675,6 +4196,7 @@ var SsmlEditorElement = class extends HTMLElementBase {
       return;
     }
     const model = monacoModule.editor.createModel(this.prepareDocument(this.value), "xml");
+    this.renderVisualEditor();
     const editor = monacoModule.editor.create(container, {
       model,
       theme: this.theme,
@@ -3773,7 +4295,8 @@ SsmlEditorElement.observedAttributes = [
   "locale",
   "show-toolbar",
   "show-toolbar-labels",
-  "show-decorations"
+  "show-decorations",
+  "edit-mode"
 ];
 
 // src/index.ts