ssml-builder-js 2.15.0 → 2.17.0

package/dist/react.js

@@ -1743,6 +1743,8 @@ function InsertionPopover({
   toolbarButtonStyle,
   emptyOptionsMessage,
   isReadOnly,
+  disabled = false,
+  disabledReason,
   isOpen,
   menuPosition,
   menuRef,
@@ -1760,7 +1762,7 @@ function InsertionPopover({
       role: "menuitem",
       style: editorStyles.toolbarOption,
       title: option.descriptions?.[language] ?? insertion.descriptions[language],
-      disabled: isReadOnly,
+      disabled: isReadOnly || disabled,
       onMouseDown: (event) => event.preventDefault(),
       onClick: () => {
         if (!isReadOnly) {
@@ -1789,11 +1791,12 @@ function InsertionPopover({
     {
       type: "button",
       style: toolbarButtonStyle,
-      title: getInsertionTitle(insertion, language),
+      title: disabledReason ?? getInsertionTitle(insertion, language),
       "aria-label": insertion.labels[language],
       "aria-haspopup": "menu",
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? `ssml-editor-popover-${insertion.id}` : void 0,
+      disabled: isReadOnly || disabled,
       onClick: (event) => onToggle(event.currentTarget)
     },
     showToolbarIcons && /* @__PURE__ */ React.createElement("span", { style: editorStyles.toolbarIcon, "aria-hidden": "true" }, insertion.icon),
@@ -3144,6 +3147,7 @@ function tokenizeElements(source) {
     if (parent) parent.childElementCount += 1;
     const parentVoiceName = [...openElements].reverse().find((element) => element.voiceName)?.voiceName;
     const tokenName = nameMatch[1];
+    const path = parent ? [...parent.path, `${tokenName}[${childElementIndex ?? 0}]`] : [tokenName];
     const tokenVoiceName = tokenName.toLowerCase() === "voice" ? attributes.get("name") : tokenName.toLowerCase() === "mstts:turn" ? attributes.get("voice") ?? parentVoiceName : parentVoiceName;
     tokens.push({
       attributes,
@@ -3154,12 +3158,14 @@ function tokenizeElements(source) {
       parentName: parent?.name,
       parentVoiceName,
       selfClosing,
-      start
+      start,
+      path
     });
     if (!selfClosing) {
       openElements.push({
         childElementCount: 0,
         name: tokenName,
+        path,
         voiceName: tokenVoiceName
       });
     }
@@ -3172,13 +3178,14 @@ function location(source, 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) {
+function addDiagnostic(diagnostics, source, offset, message, severity = "error", code2, metadata = {}) {
   diagnostics.push({
     ...location(source, offset),
     message,
     severity,
     source: "ssml-static-validator",
-    ...code2 ? { code: code2 } : {}
+    ...code2 ? { code: code2 } : {},
+    ...metadata
   });
 }
 function isSupportedProsodyRate(value) {
@@ -3641,9 +3648,11 @@ function validateAzureSsmlStatic(ssml, options = {}) {
   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;
+    const tokenDiagnosticStart = diagnostics.length;
     validateElement(token, ssml, diagnostics, tokenVoiceName, options, voiceCatalog);
     const definition = tokenVoiceName ? voiceCatalog.get(tokenVoiceName.toLowerCase()) : void 0;
     validateVoiceFeatureMatrix(token, ssml, diagnostics, tokenVoiceName, definition);
+    annotateTokenDiagnostics(diagnostics, tokenDiagnosticStart, token, options, tokenVoiceName);
     if (tokenName === "voice" && options.model && definition?.models && !definition.models.some((model) => model.toLowerCase() === options.model?.toLowerCase())) {
       addDiagnostic(
         diagnostics,
@@ -3665,12 +3674,30 @@ function urlAttributes(token) {
     return value === void 0 ? [] : [{ attribute, value }];
   });
 }
+function annotateTokenDiagnostics(diagnostics, startIndex, token, options, voiceName) {
+  const attributes = [...token.attributes.keys()];
+  for (const diagnostic of diagnostics.slice(startIndex)) {
+    const attributeName = attributes.find(
+      (attribute) => new RegExp(`(?:<[^> ]+\\s+|")${attribute}(?:"|>|\\s)`, "i").test(diagnostic.message)
+    );
+    const nodePath = options.sourceNodePath ? [...options.sourceNodePath] : [...token.path];
+    Object.assign(diagnostic, {
+      range: { start: token.start, end: token.end + 1 },
+      tagName: token.name,
+      ...attributeName ? { attributeName } : {},
+      ...voiceName ? { voiceName } : {},
+      ...options.chunkIndex !== void 0 ? { chunkIndex: options.chunkIndex } : {},
+      nodePath,
+      targetNodePath: [...token.path]
+    });
+  }
+}
 function validateAzureSsml(ssml, options = {}) {
   const diagnostics = validateAzureSsmlStatic(ssml, options);
   const validator = options.urlValidator ?? options.customUrlValidator;
   if (!validator || typeof ssml !== "string") return diagnostics;
   const runnerOptions = options.urlValidation ?? {};
-  const boundedValidator = createAzureUrlValidatorRunner(validator, {
+  const boundedValidator = options.urlValidatorRunner ?? createAzureUrlValidatorRunner(validator, {
     ...runnerOptions,
     ...options.urlValidatorConcurrency !== void 0 ? { concurrency: options.urlValidatorConcurrency } : {},
     ...options.urlValidatorTimeoutMs !== void 0 ? { timeoutMs: options.urlValidatorTimeoutMs } : {},
@@ -3695,21 +3722,25 @@ function validateAzureSsml(ssml, options = {}) {
         const valid = typeof result === "boolean" ? result : result.valid;
         if (!valid) {
           const reason = typeof result === "boolean" ? void 0 : result.reason;
+          const diagnosticStart = diagnostics.length;
           addDiagnostic(
             diagnostics,
             ssml,
             token.start,
             `<${token.name} ${attribute}> was rejected by the custom URL validator${reason ? `: ${reason}` : "."}`
           );
+          annotateTokenDiagnostics(diagnostics, diagnosticStart, token, options, token.parentVoiceName);
         }
       } catch (error) {
         const reason = error instanceof Error ? error.message : String(error);
+        const diagnosticStart = diagnostics.length;
         addDiagnostic(
           diagnostics,
           ssml,
           token.start,
           `<${token.name} ${attribute}> could not be validated by the custom URL validator: ${reason}`
         );
+        annotateTokenDiagnostics(diagnostics, diagnosticStart, token, options, token.parentVoiceName);
       }
     })
   );
@@ -3719,7 +3750,9 @@ var AZURE_VOICE_CATALOG_METADATA = {
   apiVersion: "2025-10-01",
   generatedAt: "2026-08-28T00:00:00.000Z",
   regions: [],
-  voiceCount: AZURE_VOICE_DEFINITIONS.length
+  voiceCount: AZURE_VOICE_DEFINITIONS.length,
+  expiresAt: "2026-09-04T00:00:00.000Z",
+  regionDiffs: {}
 };
 
 // packages/ssml-editor-react/src/clearSsmlDocument.ts
@@ -6856,6 +6889,21 @@ function filteredVoices(voiceCatalog, locale, region, style) {
     return true;
   });
 }
+function voiceForPath(document2, path, voiceCatalog) {
+  if (!path || !voiceCatalog) return void 0;
+  const ancestors = getElementAncestors(document2.children ?? [], path);
+  const node = getNodeAtPath(document2.children ?? [], path);
+  const candidates = [...ancestors, ...node && isElement(node) ? [node] : []].reverse();
+  const voiceName = candidates.find((element) => element.type === "voice")?.name ?? candidates.find((element) => element.type === "mstts:turn")?.voice;
+  return voiceName ? voiceCatalog.find((voice) => voice.name.toLowerCase() === voiceName.toLowerCase()) : void 0;
+}
+function isVisualTagSupported(tagName, voice) {
+  if (!voice) return true;
+  const tag = tagName.toLowerCase();
+  const unsupported = new Set((voice.unsupportedTags ?? []).map((candidate) => candidate.toLowerCase()));
+  const supported = voice.supportedTags?.map((candidate) => candidate.toLowerCase());
+  return !unsupported.has(tag) && (supported === void 0 || supported.includes(tag));
+}
 function VoiceCapabilityMatrix({
   voice,
   locale
@@ -6930,10 +6978,12 @@ function VisualElementInspector({
   voiceLocale,
   voiceRegion,
   voiceStyle,
-  diagnostics
+  diagnostics,
+  voiceDefinition
 }) {
+  const tagSupported = isVisualTagSupported(elementLabel(element), voiceDefinition);
   if (customInspector) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, customInspector({ document: document2, element, path, readOnly, onChange: commit, locale }));
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, customInspector({ document: document2, element, path, readOnly: readOnly || !tagSupported, onChange: commit, locale }));
   }
   const fields = getElementFields(element);
   const availableVoices = filteredVoices(voiceCatalog, voiceLocale, voiceRegion, voiceStyle);
@@ -6941,7 +6991,7 @@ function VisualElementInspector({
     (voice) => voice.name === (element.type === "voice" ? element.name : void 0)
   );
   const renderSelector = renderVoiceSelector ?? DefaultVoiceSelector;
-  return /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, `<${elementLabel(element)}>`, " ", /* @__PURE__ */ React.createElement(WarningBadge, { messages: elementWarnings(diagnostics, element) })), fields.length === 0 ? /* @__PURE__ */ React.createElement("p", null, "This element is preserved in the visual tree. Edit its attributes in Code mode.") : fields.map((field) => {
+  return /* @__PURE__ */ React.createElement("fieldset", { disabled: readOnly || !tagSupported, style: !tagSupported ? { border: "1px solid #c0392b" } : void 0 }, /* @__PURE__ */ React.createElement("legend", null, `<${elementLabel(element)}>`, " ", /* @__PURE__ */ React.createElement(WarningBadge, { messages: elementWarnings(diagnostics, element) })), fields.length === 0 ? /* @__PURE__ */ React.createElement("p", null, "This element is preserved in the visual tree. Edit its attributes in Code mode.") : fields.map((field) => {
     const value = element[field.key];
     const inputValue = value === void 0 ? "" : String(value);
     const inputId = `ssml-visual-${field.key}`;
@@ -6990,6 +7040,7 @@ function VisualElementInspector({
       {
         id: inputId,
         value: inputValue,
+        disabled: readOnly || !tagSupported,
         readOnly,
         onChange: (event) => commit(updateOptionalElementProperty(document2, path, field.key, event.target.value))
       }
@@ -6998,6 +7049,7 @@ function VisualElementInspector({
       {
         id: inputId,
         value: inputValue,
+        disabled: readOnly || !tagSupported,
         readOnly,
         onChange: (event) => commit(updateOptionalElementProperty(document2, path, field.key, event.target.value))
       }
@@ -7061,18 +7113,27 @@ function TreeNode({
 }) {
   if (!isElement(node)) return null;
   const name = elementLabel(node);
+  const messages = getWarnings(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}>`, /* @__PURE__ */ React.createElement(WarningBadge, { messages: getWarnings(node) })), (node.children ?? []).length > 0 && /* @__PURE__ */ React.createElement("ul", null, node.children?.map((child, index) => /* @__PURE__ */ React.createElement(
-    TreeNode,
+  return /* @__PURE__ */ React.createElement(
+    "li",
     {
-      key: `${path.join(".")}/${isElement(child) ? elementLabel(child) : JSON.stringify(child)}`,
-      node: child,
-      path: [...path, index],
-      selectedPath,
-      onSelect,
-      getWarnings
-    }
-  ))));
+      "data-ssml-diagnostic": messages.length > 0 ? "error" : void 0,
+      style: messages.length > 0 ? { border: "1px solid #c0392b", borderRadius: "0.25rem" } : void 0
+    },
+    /* @__PURE__ */ React.createElement("button", { type: "button", "aria-current": isSelected ? "true" : void 0, onClick: () => onSelect(path) }, `<${name}>`, /* @__PURE__ */ React.createElement(WarningBadge, { messages: getWarnings(node) })),
+    (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,
+        getWarnings
+      }
+    )))
+  );
 }
 function VisualSsmlEditor({
   document: document2,
@@ -7087,13 +7148,16 @@ function VisualSsmlEditor({
   voiceRegion,
   voiceStyle,
   voiceModel,
-  model
+  model,
+  voiceCatalogMetadata
 }) {
   const [selectedPath, setSelectedPath] = (0, import_react3.useState)(null);
   const [selection, setSelection] = (0, import_react3.useState)({ start: 0, end: 0 });
   const textLeaves = (0, import_react3.useMemo)(() => collectTextLeaves(document2.children ?? []), [document2]);
   const selectedLeaf = textLeaves.find((leaf) => leaf.path.join(".") === selectedPath?.join(".")) ?? textLeaves[0];
   const selectedElement = selectedPath ? getNodeAtPath(document2.children ?? [], selectedPath) : void 0;
+  const activeVoice = voiceForPath(document2, selectedPath ?? selectedLeaf?.path, voiceCatalog);
+  const staleCatalog = voiceCatalogMetadata?.expiresAt ? Date.parse(voiceCatalogMetadata.expiresAt) <= Date.now() : false;
   const selectedCustomInspector = selectedElement && isElement(selectedElement) ? customInspectors?.[elementLabel(selectedElement)] ?? customInspectors?.[selectedElement.type] : void 0;
   const validationOptions = (0, import_react3.useMemo)(
     () => ({
@@ -7123,7 +7187,7 @@ function VisualSsmlEditor({
     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(
+  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))), staleCatalog && /* @__PURE__ */ React.createElement("div", { role: "status", className: "ssml-editor-visual-catalog-warning" }, locale === "ja" ? "\u97F3\u58F0\u30AB\u30BF\u30ED\u30B0\u304C\u53E4\u304F\u306A\u3063\u3066\u3044\u307E\u3059\u3002\u66F4\u65B0\u3057\u3066\u304F\u3060\u3055\u3044\u3002" : "The voice catalog is stale. Refresh it before synthesizing."), /* @__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),
@@ -7137,14 +7201,14 @@ function VisualSsmlEditor({
     document: document2,
     element: selectedElement,
     path: selectedPath ?? [],
-    readOnly,
+    readOnly: readOnly || !isVisualTagSupported(elementLabel(selectedElement), activeVoice),
     onChange: commit,
     locale
   }) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:dialog" ? /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, localizedElementLabel(selectedElement, locale)), /* @__PURE__ */ React.createElement("p", null, SSML_ELEMENT_COPY[locale][elementLabel(selectedElement)]?.description), /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "button",
-      disabled: readOnly,
+      disabled: readOnly || !isVisualTagSupported("mstts:dialog", activeVoice),
       onClick: () => commit(addDialogTurn(document2, selectedPath ?? []))
     },
     locale === "ja" ? "\u30BF\u30FC\u30F3\u3092\u8FFD\u52A0" : "Add turn"
@@ -7226,7 +7290,8 @@ function VisualSsmlEditor({
       voiceLocale,
       voiceRegion,
       voiceStyle,
-      diagnostics
+      diagnostics,
+      voiceDefinition: activeVoice
     }
   ) : selectedLeaf ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", null, "Text", /* @__PURE__ */ React.createElement(
     "textarea",
@@ -7236,19 +7301,43 @@ function VisualSsmlEditor({
       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(
+  )), /* @__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,
+      disabled: readOnly || !isVisualTagSupported("prosody", activeVoice),
+      onClick: () => applyWrapper("prosody", { rate: "slow" })
+    },
+    "Rate"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      disabled: readOnly || !isVisualTagSupported("prosody", activeVoice),
+      onClick: () => applyWrapper("prosody", { pitch: "high" })
+    },
+    "Pitch"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      disabled: readOnly || !isVisualTagSupported("mstts:express-as", activeVoice),
       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(
+  ), /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "button",
-      disabled: readOnly,
+      disabled: readOnly || !isVisualTagSupported("break", activeVoice),
+      onClick: () => applyWrapper("break", { time: "500ms" })
+    },
+    "Pause"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      disabled: readOnly || !isVisualTagSupported("phoneme", activeVoice),
       onClick: () => applyWrapper("phoneme", { alphabet: "ipa", ph: selectedLeaf.value })
     },
     "Pronunciation"
@@ -7267,6 +7356,23 @@ var UNGROUPED_TOOLBAR_GROUP = "__ssml-editor-ungrouped__";
 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 isVoiceTagSupported(tagName, voice) {
+  if (!tagName || !voice) return true;
+  const tag = tagName.toLowerCase();
+  const unsupported = new Set((voice.unsupportedTags ?? []).map((candidate) => candidate.toLowerCase()));
+  const supported = voice.supportedTags?.map((candidate) => candidate.toLowerCase());
+  return !unsupported.has(tag) && (supported === void 0 || supported.includes(tag));
+}
+function findFirstVoiceName(nodes) {
+  for (const node of nodes) {
+    if (typeof node === "string" || node.type === "text") continue;
+    if (node.type === "voice" && node.name) return node.name;
+    if (node.type === "mstts:turn" && node.voice) return node.voice;
+    const nested = findFirstVoiceName(node.children ?? []);
+    if (nested) return nested;
+  }
+  return void 0;
+}
 function localizedText(value) {
   return { ja: value, en: value };
 }
@@ -7852,6 +7958,7 @@ var SsmlEditor = (0, import_react4.forwardRef)(function SsmlEditor2({
   voiceStyle,
   voiceModel,
   model,
+  voiceCatalogMetadata,
   emotionStyles,
   className,
   style,
@@ -8015,6 +8122,10 @@ var SsmlEditor = (0, import_react4.forwardRef)(function SsmlEditor2({
     const isProsodyPopover = insertion.tagName !== void 0 && PROSODY_POPOVER_TAGS.has(insertion.tagName);
     const isTextPopover = insertion.tagName !== void 0 && TEXT_POPOVER_TAGS.has(insertion.tagName);
     const insertionButtonStyle = insertion.tagName && activeTags.has(insertion.tagName.toLowerCase()) ? { ...toolbarButtonStyle, ...editorStyles.toolbarButtonActive } : toolbarButtonStyle;
+    const activeVoiceName = popoverVoiceName ?? findFirstVoiceName(draftDocument.children ?? []);
+    const activeVoice = voiceCatalog?.find((voice) => voice.name.toLowerCase() === activeVoiceName?.toLowerCase());
+    const insertionDisabled = !isVoiceTagSupported(insertion.tagName, activeVoice);
+    const disabledReason = insertionDisabled ? language === "ja" ? `\u9078\u629E\u4E2D\u306E\u97F3\u58F0\u306F <${insertion.tagName}> \u306B\u5BFE\u5FDC\u3057\u3066\u3044\u307E\u305B\u3093\u3002` : `The selected voice does not support <${insertion.tagName}>.` : void 0;
     const props = {
       language,
       isDarkTheme,
@@ -8023,6 +8134,8 @@ var SsmlEditor = (0, import_react4.forwardRef)(function SsmlEditor2({
       toolbarButtonStyle: insertionButtonStyle,
       emptyOptionsMessage: copy.noAvailableOptions,
       isReadOnly,
+      disabled: insertionDisabled,
+      disabledReason,
       openPopoverId,
       menuPosition: popoverPosition,
       menuRef: setPopoverMenuRef,
@@ -8251,6 +8364,7 @@ var SsmlEditor = (0, import_react4.forwardRef)(function SsmlEditor2({
         voiceLocale,
         voiceRegion,
         voiceStyle,
+        voiceCatalogMetadata,
         voiceModel,
         model
       }