ssml-builder-js 2.16.0 → 2.17.0

package/dist/react.d.mts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ReactElement, CSSProperties } from 'react';
-import { d as SsmlDocument, e as SsmlElement } from './index.d-DR5Qz43p.mjs';
+import { d as SsmlDocument, e as SsmlElement, f as AzureVoiceCatalogMetadata } from './index.d-tpKoP1jl.mjs';
 import { OnMount, Monaco } from '@monaco-editor/react';
 
 type SsmlEditorInsertionButton = "break" | "emphasis" | "rate" | "pitch" | "volume" | "emotion" | "say-as" | "phoneme" | "audio" | "sub" | "lang" | "mark" | "bookmark" | "mstts:silence" | "mstts:audioduration" | "mstts:viseme" | (string & {});
@@ -119,8 +119,9 @@ interface VisualSsmlEditorProps {
     voiceModel?: string;
     /** Alias for voiceModel. */
     model?: string;
+    voiceCatalogMetadata?: AzureVoiceCatalogMetadata;
 }
-declare function VisualSsmlEditor({ document, readOnly, onChange, onPreviewSelection, locale, customInspectors, renderVoiceSelector, voiceCatalog, voiceLocale, voiceRegion, voiceStyle, voiceModel, model, }: VisualSsmlEditorProps): ReactElement;
+declare function VisualSsmlEditor({ document, readOnly, onChange, onPreviewSelection, locale, customInspectors, renderVoiceSelector, voiceCatalog, voiceLocale, voiceRegion, voiceStyle, voiceModel, model, voiceCatalogMetadata, }: VisualSsmlEditorProps): ReactElement;
 
 type SsmlEditorInsertionMode = "insert" | "wrap";
 interface SsmlEditorInsertionOption {
@@ -310,6 +311,8 @@ interface SsmlEditorProps {
     voiceModel?: string;
     /** Alias for voiceModel. */
     model?: string;
+    /** Metadata for the voice catalog snapshot, used to warn when it is stale. */
+    voiceCatalogMetadata?: AzureVoiceCatalogMetadata;
     /** Candidate style values shown by the built-in emotion insertion. */
     emotionStyles?: readonly string[];
     /** Class name applied to the editor container. */

package/dist/react.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ReactElement, CSSProperties } from 'react';
-import { d as SsmlDocument, e as SsmlElement } from './index.d-DR5Qz43p.js';
+import { d as SsmlDocument, e as SsmlElement, f as AzureVoiceCatalogMetadata } from './index.d-tpKoP1jl.js';
 import { OnMount, Monaco } from '@monaco-editor/react';
 
 type SsmlEditorInsertionButton = "break" | "emphasis" | "rate" | "pitch" | "volume" | "emotion" | "say-as" | "phoneme" | "audio" | "sub" | "lang" | "mark" | "bookmark" | "mstts:silence" | "mstts:audioduration" | "mstts:viseme" | (string & {});
@@ -119,8 +119,9 @@ interface VisualSsmlEditorProps {
     voiceModel?: string;
     /** Alias for voiceModel. */
     model?: string;
+    voiceCatalogMetadata?: AzureVoiceCatalogMetadata;
 }
-declare function VisualSsmlEditor({ document, readOnly, onChange, onPreviewSelection, locale, customInspectors, renderVoiceSelector, voiceCatalog, voiceLocale, voiceRegion, voiceStyle, voiceModel, model, }: VisualSsmlEditorProps): ReactElement;
+declare function VisualSsmlEditor({ document, readOnly, onChange, onPreviewSelection, locale, customInspectors, renderVoiceSelector, voiceCatalog, voiceLocale, voiceRegion, voiceStyle, voiceModel, model, voiceCatalogMetadata, }: VisualSsmlEditorProps): ReactElement;
 
 type SsmlEditorInsertionMode = "insert" | "wrap";
 interface SsmlEditorInsertionOption {
@@ -310,6 +311,8 @@ interface SsmlEditorProps {
     voiceModel?: string;
     /** Alias for voiceModel. */
     model?: string;
+    /** Metadata for the voice catalog snapshot, used to warn when it is stale. */
+    voiceCatalogMetadata?: AzureVoiceCatalogMetadata;
     /** Candidate style values shown by the built-in emotion insertion. */
     emotionStyles?: readonly string[];
     /** Class name applied to the editor container. */

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),
@@ -3747,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
@@ -6884,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
@@ -6958,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);
@@ -6969,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}`;
@@ -7018,6 +7040,7 @@ function VisualElementInspector({
       {
         id: inputId,
         value: inputValue,
+        disabled: readOnly || !tagSupported,
         readOnly,
         onChange: (event) => commit(updateOptionalElementProperty(document2, path, field.key, event.target.value))
       }
@@ -7026,6 +7049,7 @@ function VisualElementInspector({
       {
         id: inputId,
         value: inputValue,
+        disabled: readOnly || !tagSupported,
         readOnly,
         onChange: (event) => commit(updateOptionalElementProperty(document2, path, field.key, event.target.value))
       }
@@ -7089,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,
@@ -7115,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)(
     () => ({
@@ -7151,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),
@@ -7165,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"
@@ -7254,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",
@@ -7264,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"
@@ -7295,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 };
 }
@@ -7880,6 +7958,7 @@ var SsmlEditor = (0, import_react4.forwardRef)(function SsmlEditor2({
   voiceStyle,
   voiceModel,
   model,
+  voiceCatalogMetadata,
   emotionStyles,
   className,
   style,
@@ -8043,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,
@@ -8051,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,
@@ -8279,6 +8364,7 @@ var SsmlEditor = (0, import_react4.forwardRef)(function SsmlEditor2({
         voiceLocale,
         voiceRegion,
         voiceStyle,
+        voiceCatalogMetadata,
         voiceModel,
         model
       }