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

package/dist/index.js

@@ -36,6 +36,7 @@ __export(index_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(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // 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"));
 
 // src/buttonVisibility.ts
 function isSsmlEditorButtonVisible(buttonVisibility, button) {
@@ -54,6 +55,8 @@ function isSsmlEditorButtonVisible(buttonVisibility, button) {
 // 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,
@@ -86,6 +89,103 @@ __export(ssmlPresets_exports, {
   getExpressAsStyleCategory: () => getExpressAsStyleCategory,
   resolveExpressAsStyles: () => resolveExpressAsStyles
 });
+
+// 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": []
+};
+
+// src/constants/ssmlPresets.ts
 var SSML_PRESETS = [
   {
     id: "basic",
@@ -185,7 +285,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"],
@@ -271,6 +371,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])
 );
@@ -313,6 +414,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",
@@ -321,6 +423,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 = {
@@ -364,6 +471,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
@@ -910,6 +1025,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" }
+        }
       }
     }
   },
@@ -1067,6 +1189,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`." }
+        }
       }
     }
   }
@@ -1166,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",
@@ -1604,6 +1741,7 @@ var INTRINSICALLY_EMPTY_ELEMENTS = /* @__PURE__ */ new Set([
   "lexicon",
   "mark",
   "mstts:silence",
+  "mstts:audioduration",
   "mstts:viseme",
   "silence",
   "viseme"
@@ -2450,7 +2588,7 @@ function findSsmlVoiceContext(source, offset) {
 }
 
 // src/hooks/useSsmlEditorState.ts
-var TIMING_INSERTION_TAGS = /* @__PURE__ */ new Set(["break", "mstts:silence"]);
+var TIMING_INSERTION_TAGS = /* @__PURE__ */ new Set(["break", "mstts:silence", "mstts:audioduration"]);
 var PROSODY_INSERTION_TAGS = /* @__PURE__ */ new Set(["prosody", "mstts:express-as", "voice", "emphasis"]);
 var TEXT_INSERTION_TAGS = /* @__PURE__ */ new Set(["sub", "say-as", "phoneme", "w", "lang"]);
 var EMPTY_SELECTION_OVERLAY = {
@@ -3172,6 +3310,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>`
@@ -3447,7 +3607,7 @@ function registerSsmlCodeLens(monaco, editor, onOpenPopover) {
           break;
         }
         const tag = source.slice(tagStart, tagEnd + 1);
-        const tagName = tag.match(/^<\s*(prosody|break)\b/i)?.[1]?.toLowerCase();
+        const tagName = tag.match(/^<\s*(prosody|break|mstts:audioduration)\b/i)?.[1]?.toLowerCase();
         index = tagEnd + 1;
         if (!tagName) {
           continue;
@@ -3477,7 +3637,22 @@ function registerSsmlCodeLens(monaco, editor, onOpenPopover) {
               elementRange
             })
           );
-        } else if (/\/\s*>$/.test(tag)) {
+        } else if (tagName === "mstts:audioduration" && /\/\s*>$/.test(tag)) {
+          lenses.push(
+            createLens(
+              model,
+              tagStart,
+              tagEnd + 1,
+              `\u26A1 Duration: ${getAttributeValue(tag, "value") ?? "default"} (Click to edit)`,
+              { type: "attribute", insertionId: "mstts:audioduration", attributeName: "value", tagRange }
+            ),
+            createLens(model, tagStart, tagEnd + 1, "Delete", {
+              type: "delete",
+              tagRange,
+              elementRange
+            })
+          );
+        } else if (tagName === "break" && /\/\s*>$/.test(tag)) {
           lenses.push(
             createLens(
               model,
@@ -3813,6 +3988,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();
@@ -4417,10 +4660,182 @@ function useSsmlMonaco({
   return { editorRef, onMount };
 }
 
-// src/SsmlEditor.tsx
+// src/components/VisualSsmlEditor.tsx
+var import_react3 = require("react");
+var import_ssml_core4 = require("@ssml-builder-js/ssml-core");
 var import_jsx_runtime6 = require("react/jsx-runtime");
+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__ */ (0, import_jsx_runtime6.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "aria-current": isSelected ? "true" : void 0, onClick: () => onSelect(path), children: `<${name}>` }),
+    (node.children ?? []).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { children: node.children?.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      TreeNode,
+      {
+        node: child,
+        path: [...path, index],
+        selectedPath,
+        onSelect
+      },
+      `${path.join(".")}/${isElement(child) ? elementLabel(child) : JSON.stringify(child)}`
+    )) })
+  ] });
+}
+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)(() => (0, import_ssml_core4.validateAzureSsml)((0, import_ssml_core4.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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ssml-editor-visual", "data-ssml-editor-visual": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("fieldset", { className: "ssml-editor-visual-breadcrumb", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { children: "SSML structure breadcrumb" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "<speak>" }),
+      selectedLeaf?.ancestors.map((ancestor, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+        " / <",
+        ancestor,
+        ">"
+      ] }, selectedLeaf?.ancestors.slice(0, index + 1).join("/"))),
+      selectedPath && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: () => setSelectedPath(null), children: "Clear parent" })
+    ] }),
+    diagnostics.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "alert", "aria-invalid": "true", className: "ssml-editor-visual-errors", children: diagnostics.map((diagnostic) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: diagnostic.message }, `${diagnostic.code}-${diagnostic.message}`)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ssml-editor-visual-layout", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("nav", { "aria-label": "SSML structure tree", className: "ssml-editor-visual-tree", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: "Structure" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { children: document2.children?.map((node, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          TreeNode,
+          {
+            node,
+            path: [index],
+            selectedPath,
+            onSelect: setSelectedPath
+          },
+          isElement(node) ? elementLabel(node) : JSON.stringify(node)
+        )) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ssml-editor-visual-form", children: selectedLeaf ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
+          "Text",
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "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__ */ (0, import_jsx_runtime6.jsxs)("fieldset", { className: "ssml-editor-visual-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { children: "Apply SSML formatting" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", disabled: readOnly, onClick: () => applyWrapper("prosody", { rate: "slow" }), children: "Rate" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", disabled: readOnly, onClick: () => applyWrapper("prosody", { pitch: "high" }), children: "Pitch" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              disabled: readOnly,
+              onClick: () => applyWrapper("mstts:express-as", { style: "cheerful" }),
+              children: "Emotion"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", disabled: readOnly, onClick: () => applyWrapper("break", { time: "500ms" }), children: "Pause" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              disabled: readOnly,
+              onClick: () => applyWrapper("phoneme", { alphabet: "ipa", ph: selectedLeaf.value }),
+              children: "Pronunciation"
+            }
+          ),
+          onPreviewSelection && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => onPreviewSelection((0, import_ssml_core4.buildSsml)({ ...document2, children: [selectedLeaf.value] })),
+              children: "Preview selection"
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "Select an element or text node to edit it." }) })
+    ] })
+  ] });
+}
+
+// src/SsmlEditor.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var UNGROUPED_TOOLBAR_GROUP = "__ssml-editor-ungrouped__";
-var TIMING_POPOVER_TAGS = /* @__PURE__ */ new Set(["break", "mstts:silence"]);
+var TIMING_POPOVER_TAGS = /* @__PURE__ */ new Set(["break", "mstts:silence", "mstts:audioduration"]);
 var PROSODY_POPOVER_TAGS = /* @__PURE__ */ new Set(["prosody", "mstts:express-as", "voice", "emphasis"]);
 var TEXT_POPOVER_TAGS = /* @__PURE__ */ new Set(["sub", "say-as", "phoneme", "w", "lang"]);
 function localizedText(value) {
@@ -4648,13 +5063,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",
@@ -4863,6 +5299,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)) {
@@ -4879,10 +5369,10 @@ function ToolbarDecorationsSwitch({
   decorationsVisible,
   onVisibilityChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: editorStyles.toolbarSwitch, children: [
-    showToolbarIcons && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: editorStyles.toolbarIcon, "aria-hidden": "true", children: "\u2606" }),
-    showToolbarText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: copy.decorations }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: editorStyles.toolbarSwitch, children: [
+    showToolbarIcons && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: editorStyles.toolbarIcon, "aria-hidden": "true", children: "\u2606" }),
+    showToolbarText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: copy.decorations }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "button",
@@ -4893,12 +5383,12 @@ function ToolbarDecorationsSwitch({
         "aria-label": copy.decorations,
         title: decorationsVisible ? copy.decorationsHideTitle : copy.decorationsShowTitle,
         onClick: () => onVisibilityChange(!decorationsVisible),
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ssml-editor-switch-thumb", style: editorStyles.toolbarSwitchThumb, "aria-hidden": "true" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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,
@@ -4936,8 +5426,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,
@@ -5015,6 +5508,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
   );
   const {
     editorRef,
+    draftDocument,
     text,
     selectionOverlay,
     activeTags,
@@ -5026,6 +5520,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     syntaxError,
     setSyntaxError,
     helpPanelId,
+    commit,
     handleTextChange,
     handleInsert,
     handleInsertBreak,
@@ -5073,7 +5568,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     enableCodeLens,
     onOpenPopover: handleCodeLensAction
   });
-  (0, import_react3.useImperativeHandle)(
+  (0, import_react4.useImperativeHandle)(
     ref,
     () => ({
       getSelectedSsml: getSelectedSsml2,
@@ -5103,15 +5598,15 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
       onApply: isTimingPopover ? handleInsertBreak : isProsodyPopover ? handleInsertProsody : isTextPopover ? handleInsertText : handleInsert
     };
     if (isTimingPopover) {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TimingPopovers, { ...props, insertions: [insertion] });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TimingPopovers, { ...props, insertions: [insertion] });
     }
     if (isProsodyPopover) {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProsodyPopovers, { ...props, insertions: [insertion], voiceName: popoverVoiceName });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProsodyPopovers, { ...props, insertions: [insertion], voiceName: popoverVoiceName });
     }
     if (isTextPopover) {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextPopovers, { ...props, insertions: [insertion] });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextPopovers, { ...props, insertions: [insertion] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       InsertionPopover,
       {
         ...props,
@@ -5124,7 +5619,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
   const toolbarItemRenderers = /* @__PURE__ */ new Map([
     [
       "undo",
-      () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "button",
         {
           type: "button",
@@ -5138,8 +5633,8 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
             }
           },
           children: [
-            showToolbarIcons && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: editorStyles.toolbarIcon, "aria-hidden": "true", children: "\u21A9" }),
-            showToolbarText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: copy.undo })
+            showToolbarIcons && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: editorStyles.toolbarIcon, "aria-hidden": "true", children: "\u21A9" }),
+            showToolbarText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: copy.undo })
           ]
         },
         "undo"
@@ -5147,7 +5642,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     ],
     [
       "redo",
-      () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "button",
         {
           type: "button",
@@ -5161,8 +5656,8 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
             }
           },
           children: [
-            showToolbarIcons && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: editorStyles.toolbarIcon, "aria-hidden": "true", children: "\u21AA" }),
-            showToolbarText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: copy.redo })
+            showToolbarIcons && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: editorStyles.toolbarIcon, "aria-hidden": "true", children: "\u21AA" }),
+            showToolbarText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: copy.redo })
           ]
         },
         "redo"
@@ -5170,7 +5665,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     ],
     [
       "clearAll",
-      () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "button",
         {
           type: "button",
@@ -5184,8 +5679,8 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
             }
           },
           children: [
-            showToolbarIcons && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: editorStyles.toolbarIcon, "aria-hidden": "true", children: "\xD7" }),
-            showToolbarText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: copy.clearAll })
+            showToolbarIcons && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: editorStyles.toolbarIcon, "aria-hidden": "true", children: "\xD7" }),
+            showToolbarText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: copy.clearAll })
           ]
         },
         "clearAll"
@@ -5193,7 +5688,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     ],
     [
       "format",
-      () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "button",
         {
           type: "button",
@@ -5207,8 +5702,8 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
             }
           },
           children: [
-            showToolbarIcons && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: editorStyles.toolbarIcon, "aria-hidden": "true", children: "\u2261" }),
-            showToolbarText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: copy.format })
+            showToolbarIcons && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: editorStyles.toolbarIcon, "aria-hidden": "true", children: "\u2261" }),
+            showToolbarText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: copy.format })
           ]
         },
         "format"
@@ -5216,7 +5711,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     ],
     [
       "decorations",
-      () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         ToolbarDecorationsSwitch,
         {
           copy,
@@ -5230,7 +5725,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     ],
     [
       "help",
-      () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "button",
         {
           type: "button",
@@ -5241,8 +5736,8 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
           "aria-controls": helpPanelId,
           onClick: () => setIsHelpOpen((open) => !open),
           children: [
-            showToolbarIcons && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: editorStyles.toolbarIcon, "aria-hidden": "true", children: "?" }),
-            showToolbarText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: copy.help })
+            showToolbarIcons && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: editorStyles.toolbarIcon, "aria-hidden": "true", children: "?" }),
+            showToolbarText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: copy.help })
           ]
         },
         "help"
@@ -5266,15 +5761,15 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
       previousRenderedGroupId = groupId;
       hasRenderedToolbarItem = true;
       renderedItems.push(
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react3.Fragment, { children: [
-          showSeparator && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: editorStyles.toolbarSeparator, "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react4.Fragment, { children: [
+          showSeparator && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: editorStyles.toolbarSeparator, "aria-hidden": "true" }),
           render()
         ] }, id)
       );
     }
     return renderedItems;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "section",
     {
       className,
@@ -5283,62 +5778,93 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
       "data-ssml-editor": "",
       "data-theme": isDarkTheme ? "dark" : "light",
       children: [
-        showToolbar && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        showToolbar && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             className: toolbarClassName,
             style: { ...editorStyles.toolbarContainer, ...toolbarStyle },
             "data-ssml-editor-toolbar": "",
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "div",
               {
                 style: editorStyles.toolbarActions,
                 role: "toolbar",
                 "aria-label": copy.toolbarAriaLabel,
                 "data-ssml-editor-toolbar-actions": "",
-                children: renderToolbarItems()
+                children: [
+                  renderToolbarItems(),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: editorStyles.toolbarSeparator, "aria-hidden": "true" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      style: editMode === "visual" ? { ...toolbarButtonStyle, ...editorStyles.toolbarButtonActive } : toolbarButtonStyle,
+                      "aria-pressed": editMode === "visual",
+                      onClick: () => setEditMode("visual"),
+                      children: "Visual"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      style: editMode === "code" ? { ...toolbarButtonStyle, ...editorStyles.toolbarButtonActive } : toolbarButtonStyle,
+                      "aria-pressed": editMode === "code",
+                      onClick: () => setEditMode("code"),
+                      children: "Code"
+                    }
+                  )
+                ]
               }
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: displayClassName, style: { ...editorStyles.display, ...displayStyle }, "data-ssml-editor-display": "", children: [
-          isHelpOpen && isSsmlEditorButtonVisible(buttonVisibility, "help") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { id: helpPanelId, style: editorStyles.helpPanel, "aria-label": copy.helpHeading, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { style: editorStyles.helpHeading, children: copy.helpHeading }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: editorStyles.helpDescription, children: copy.helpDescription }),
-            helpInsertions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { style: editorStyles.helpList, children: helpInsertions.map((insertion) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { style: editorStyles.helpItem, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("details", { className: "ssml-editor-help-settings-accordion", style: editorStyles.helpSettingsAccordion, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("summary", { className: "ssml-editor-help-settings-summary", style: editorStyles.helpSettingsSummary, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: editorStyles.helpIcon, "aria-hidden": "true", children: insertion.icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: editorStyles.helpSettingsSummaryContent, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: insertion.labels[language] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: displayClassName, style: { ...editorStyles.display, ...displayStyle }, "data-ssml-editor-display": "", children: [
+          isHelpOpen && isSsmlEditorButtonVisible(buttonVisibility, "help") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { id: helpPanelId, style: editorStyles.helpPanel, "aria-label": copy.helpHeading, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: editorStyles.helpHeading, children: copy.helpHeading }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: editorStyles.helpDescription, children: copy.helpDescription }),
+            helpInsertions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { style: editorStyles.helpList, children: helpInsertions.map((insertion) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { style: editorStyles.helpItem, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("details", { className: "ssml-editor-help-settings-accordion", style: editorStyles.helpSettingsAccordion, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("summary", { className: "ssml-editor-help-settings-summary", style: editorStyles.helpSettingsSummary, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: editorStyles.helpIcon, "aria-hidden": "true", children: insertion.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: editorStyles.helpSettingsSummaryContent, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: insertion.labels[language] }),
                   " ",
-                  insertion.tagName && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { children: `<${insertion.tagName}${insertion.selfClosing ? "/>" : ">"}` }),
+                  insertion.tagName && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { children: `<${insertion.tagName}${insertion.selfClosing ? "/>" : ">"}` }),
                     " \u2014",
                     " "
                   ] }),
                   insertion.descriptions[language]
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { style: editorStyles.helpSettingsDescription, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("strong", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { style: editorStyles.helpSettingsDescription, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("strong", { children: [
                   copy.parameters,
                   ":"
                 ] }),
                 " ",
                 insertion.parameterDescription[language]
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { style: editorStyles.helpSettingsList, children: insertion.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: option.labels[language] }),
-                option.descriptions && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { style: editorStyles.helpSettingsList, children: insertion.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: option.labels[language] }),
+                option.descriptions && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
                   " \u2014 ",
                   option.descriptions[language]
                 ] })
               ] }, option.value)) })
             ] }) }, insertion.id)) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { ...editorStyles.editor, minHeight: editorMinHeight }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              import_react4.default,
+          editMode === "visual" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: editorStyles.visual, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            VisualSsmlEditor,
+            {
+              document: draftDocument,
+              readOnly: isReadOnly,
+              onChange: commit,
+              onPreviewSelection
+            }
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { ...editorStyles.editor, minHeight: editorMinHeight }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_react5.default,
               {
                 height: editorHeight,
                 language: "xml",
@@ -5362,7 +5888,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
                 onChange: (value) => handleTextChange(value ?? "")
               }
             ),
-            selectionOverlay.hasSelection && selectionOverlay.position && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            selectionOverlay.hasSelection && selectionOverlay.position && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "div",
               {
                 role: "toolbar",
@@ -5376,12 +5902,12 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
                 },
                 onMouseDown: (event) => event.preventDefault(),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: editorStyles.selectionCount, "aria-live": "polite", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: editorStyles.selectionCount, "aria-live": "polite", children: [
                     selectionOverlay.characterCount,
                     copy.selectionCountSuffix
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: editorStyles.selectionActionsDivider, "aria-hidden": "true" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: editorStyles.selectionActionsDivider, "aria-hidden": "true" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                     "button",
                     {
                       type: "button",
@@ -5390,7 +5916,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
                       disabled: !canPreviewSelection,
                       onClick: previewSelection,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: editorStyles.selectionActionIcon, "aria-hidden": "true", children: "\u25B6" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: editorStyles.selectionActionIcon, "aria-hidden": "true", children: "\u25B6" }),
                         copy.previewSelection
                       ]
                     }
@@ -5399,7 +5925,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
               }
             )
           ] }),
-          syntaxError && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { style: editorStyles.error, role: "alert", children: [
+          syntaxError && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { style: editorStyles.error, role: "alert", children: [
             copy.syntaxError,
             ": ",
             syntaxError.message
@@ -5416,6 +5942,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
   SSML_HOVER_COPY,
   SSML_INSERTIONS,
   SsmlEditor,
+  VisualSsmlEditor,
   createSsmlEditorInsertionDefinition,
   registerSsmlCodeLens,
   updateTagAttribute