ssml-builder-js 2.16.0 → 2.18.0

package/dist/react.mjs

@@ -42,13 +42,13 @@ import {
   resolveExpressAsStyles,
   updateEditableText,
   updateTagAttribute
-} from "./chunk-F2EMU3HM.mjs";
+} from "./chunk-SLZ7PE6W.mjs";
 import {
   buildPartialSsml,
   buildSsml,
   validateAzureSsml,
   validateSsml
-} from "./chunk-HI74FTKY.mjs";
+} from "./chunk-5AZWURHW.mjs";
 import "./chunk-6S5ODO6A.mjs";
 
 // packages/ssml-editor-react/src/SsmlEditor.tsx
@@ -369,6 +369,8 @@ function InsertionPopover({
   toolbarButtonStyle,
   emptyOptionsMessage,
   isReadOnly,
+  disabled = false,
+  disabledReason,
   isOpen,
   menuPosition,
   menuRef,
@@ -386,7 +388,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) {
@@ -415,11 +417,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),
@@ -1969,6 +1972,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
@@ -2043,10 +2061,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);
@@ -2054,7 +2074,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}`;
@@ -2103,6 +2123,7 @@ function VisualElementInspector({
       {
         id: inputId,
         value: inputValue,
+        disabled: readOnly || !tagSupported,
         readOnly,
         onChange: (event) => commit(updateOptionalElementProperty(document2, path, field.key, event.target.value))
       }
@@ -2111,6 +2132,7 @@ function VisualElementInspector({
       {
         id: inputId,
         value: inputValue,
+        disabled: readOnly || !tagSupported,
         readOnly,
         onChange: (event) => commit(updateOptionalElementProperty(document2, path, field.key, event.target.value))
       }
@@ -2174,18 +2196,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,
@@ -2200,13 +2231,16 @@ function VisualSsmlEditor({
   voiceRegion,
   voiceStyle,
   voiceModel,
-  model
+  model,
+  voiceCatalogMetadata
 }) {
   const [selectedPath, setSelectedPath] = useState2(null);
   const [selection, setSelection] = useState2({ start: 0, end: 0 });
   const textLeaves = 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 = useMemo(
     () => ({
@@ -2236,7 +2270,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),
@@ -2250,14 +2284,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"
@@ -2339,7 +2373,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",
@@ -2349,19 +2384,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"
@@ -2380,6 +2439,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 };
 }
@@ -2965,6 +3041,7 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
   voiceStyle,
   voiceModel,
   model,
+  voiceCatalogMetadata,
   emotionStyles,
   className,
   style,
@@ -3128,6 +3205,10 @@ var SsmlEditor = 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,
@@ -3136,6 +3217,8 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
       toolbarButtonStyle: insertionButtonStyle,
       emptyOptionsMessage: copy.noAvailableOptions,
       isReadOnly,
+      disabled: insertionDisabled,
+      disabledReason,
       openPopoverId,
       menuPosition: popoverPosition,
       menuRef: setPopoverMenuRef,
@@ -3364,6 +3447,7 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
         voiceLocale,
         voiceRegion,
         voiceStyle,
+        voiceCatalogMetadata,
         voiceModel,
         model
       }