@ssml-builder-js/ssml-editor-react 2.13.0 → 2.15.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @ssml-builder-js/ssml-editor-react
 
+## 2.15.0
+
+### Minor Changes
+
+- Add strict audio merge formats, discriminated synthesis errors, per-event source mappings, abortable URL validation, external audio muxers, and live Visual Editor voice capability warnings.
+
+### Patch Changes
+
+- Updated dependencies
+  - @ssml-builder-js/ssml-core@2.15.0
+
+## 2.14.0
+
+### Minor Changes
+
+- Add safe container-aware audio merging, preflight-validated SSML chunk synthesis with structured progress events, source mapping metadata, controlled URL validation, and voice capability details in the Visual Editor.
+
+### Patch Changes
+
+- Updated dependencies
+  - @ssml-builder-js/ssml-core@2.14.0
+
 ## 2.13.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -78,13 +78,18 @@ interface VisualVoiceCatalogEntry {
     name: string;
     locale: string;
     region?: string;
+    regions?: readonly string[];
     styles?: readonly string[];
+    supportedTags?: readonly string[];
+    unsupportedTags?: readonly string[];
+    models?: readonly string[];
     preview?: boolean;
     status?: "ga" | "preview" | "deprecated";
 }
 interface VoiceSelectorRenderProps {
     value: string;
     voices: readonly VisualVoiceCatalogEntry[];
+    selectedVoice?: VisualVoiceCatalogEntry;
     readOnly: boolean;
     locale: SsmlEditorLocale;
     onChange: (voice: string) => void;
@@ -110,8 +115,12 @@ interface VisualSsmlEditorProps {
     voiceLocale?: string;
     voiceRegion?: string;
     voiceStyle?: string;
+    /** Selected Azure voice model used for live capability validation. */
+    voiceModel?: string;
+    /** Alias for voiceModel. */
+    model?: string;
 }
-declare function VisualSsmlEditor({ document, readOnly, onChange, onPreviewSelection, locale, customInspectors, renderVoiceSelector, voiceCatalog, voiceLocale, voiceRegion, voiceStyle, }: VisualSsmlEditorProps): ReactElement;
+declare function VisualSsmlEditor({ document, readOnly, onChange, onPreviewSelection, locale, customInspectors, renderVoiceSelector, voiceCatalog, voiceLocale, voiceRegion, voiceStyle, voiceModel, model, }: VisualSsmlEditorProps): ReactElement;
 
 type SsmlEditorInsertionMode = "insert" | "wrap";
 interface SsmlEditorInsertionOption {
@@ -297,6 +306,10 @@ interface SsmlEditorProps {
     voiceRegion?: string;
     /** Optional style filter for the visual voice selector. */
     voiceStyle?: string;
+    /** Selected Azure voice model used for live capability validation. */
+    voiceModel?: string;
+    /** Alias for voiceModel. */
+    model?: string;
     /** Candidate style values shown by the built-in emotion insertion. */
     emotionStyles?: readonly string[];
     /** Class name applied to the editor container. */

package/dist/index.d.ts

@@ -78,13 +78,18 @@ interface VisualVoiceCatalogEntry {
     name: string;
     locale: string;
     region?: string;
+    regions?: readonly string[];
     styles?: readonly string[];
+    supportedTags?: readonly string[];
+    unsupportedTags?: readonly string[];
+    models?: readonly string[];
     preview?: boolean;
     status?: "ga" | "preview" | "deprecated";
 }
 interface VoiceSelectorRenderProps {
     value: string;
     voices: readonly VisualVoiceCatalogEntry[];
+    selectedVoice?: VisualVoiceCatalogEntry;
     readOnly: boolean;
     locale: SsmlEditorLocale;
     onChange: (voice: string) => void;
@@ -110,8 +115,12 @@ interface VisualSsmlEditorProps {
     voiceLocale?: string;
     voiceRegion?: string;
     voiceStyle?: string;
+    /** Selected Azure voice model used for live capability validation. */
+    voiceModel?: string;
+    /** Alias for voiceModel. */
+    model?: string;
 }
-declare function VisualSsmlEditor({ document, readOnly, onChange, onPreviewSelection, locale, customInspectors, renderVoiceSelector, voiceCatalog, voiceLocale, voiceRegion, voiceStyle, }: VisualSsmlEditorProps): ReactElement;
+declare function VisualSsmlEditor({ document, readOnly, onChange, onPreviewSelection, locale, customInspectors, renderVoiceSelector, voiceCatalog, voiceLocale, voiceRegion, voiceStyle, voiceModel, model, }: VisualSsmlEditorProps): ReactElement;
 
 type SsmlEditorInsertionMode = "insert" | "wrap";
 interface SsmlEditorInsertionOption {
@@ -297,6 +306,10 @@ interface SsmlEditorProps {
     voiceRegion?: string;
     /** Optional style filter for the visual voice selector. */
     voiceStyle?: string;
+    /** Selected Azure voice model used for live capability validation. */
+    voiceModel?: string;
+    /** Alias for voiceModel. */
+    model?: string;
     /** Candidate style values shown by the built-in emotion insertion. */
     emotionStyles?: readonly string[];
     /** Class name applied to the editor container. */

package/dist/index.js

@@ -5035,29 +5035,107 @@ function localizedElementLabel(element, locale) {
 function filteredVoices(voiceCatalog, locale, region, style) {
   return (voiceCatalog ?? []).filter((voice) => {
     if (locale && voice.locale.toLowerCase() !== locale.toLowerCase()) return false;
-    if (region && voice.region && voice.region.toLowerCase() !== region.toLowerCase()) return false;
+    const regions = [voice.region, ...voice.regions ?? []].filter(
+      (candidate) => Boolean(candidate)
+    );
+    if (region && regions.length > 0 && !regions.some((candidate) => candidate.toLowerCase() === region.toLowerCase()))
+      return false;
     if (style && !voice.styles?.some((candidate) => candidate.toLowerCase() === style.toLowerCase())) return false;
     return true;
   });
 }
-function DefaultVoiceSelector({ value, voices, readOnly, locale, onChange }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    "select",
+function VoiceCapabilityMatrix({
+  voice,
+  locale
+}) {
+  const status = voice.status ?? (voice.preview ? "preview" : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ssml-editor-voice-capabilities", "data-voice-capabilities": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+      locale === "ja" ? "\u30B9\u30C6\u30FC\u30BF\u30B9" : "Status",
+      ": ",
+      status?.toUpperCase() ?? (locale === "ja" ? "GA" : "GA"),
+      status === "preview" || status === "deprecated" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { role: "status", "aria-label": status, className: "ssml-editor-voice-warning-badge", children: status === "preview" ? "\u26A0 Preview" : "\u26A0 Deprecated" }) : null
+    ] }),
+    (voice.regions?.length || voice.region) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+      locale === "ja" ? "\u30EA\u30FC\u30B8\u30E7\u30F3" : "Regions",
+      ":",
+      " ",
+      [...voice.regions ?? [], ...voice.region ? [voice.region] : []].filter((region, index, all) => all.indexOf(region) === index).join(", ")
+    ] }),
+    voice.supportedTags && voice.supportedTags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+      locale === "ja" ? "\u5BFE\u5FDC\u30BF\u30B0" : "Supported tags",
+      ": ",
+      voice.supportedTags.join(", ")
+    ] }),
+    voice.unsupportedTags && voice.unsupportedTags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ssml-editor-voice-unsupported", children: [
+      locale === "ja" ? "\u975E\u5BFE\u5FDC\u30BF\u30B0" : "Unsupported tags",
+      ": ",
+      voice.unsupportedTags.join(", ")
+    ] })
+  ] });
+}
+function diagnosticMatchesElement(diagnostic, element) {
+  const name = elementLabel(element).toLowerCase().replace("expressas", "mstts:express-as");
+  if (diagnostic.code === "azure-unsupported-style") return name === "mstts:express-as" || name === "express-as";
+  if (diagnostic.code === "azure-unsupported-tag-for-voice") {
+    return diagnostic.message.toLowerCase().includes(`<${name}>`) || diagnostic.message.toLowerCase().includes(`<${name.replace("mstts:", "")}>`);
+  }
+  if (diagnostic.code === "azure-locale-mismatch" || diagnostic.code === "azure-unsupported-model-for-voice")
+    return name === "voice" || name === "mstts:turn";
+  return false;
+}
+function elementWarnings(diagnostics, element) {
+  return diagnostics.filter((diagnostic) => diagnosticMatchesElement(diagnostic, element));
+}
+function fieldWarnings(diagnostics, element, field) {
+  return elementWarnings(diagnostics, element).filter((diagnostic) => {
+    if (diagnostic.code === "azure-unsupported-style") return field.key === "style";
+    return field.key === "name" || field.key === "voice";
+  });
+}
+function WarningBadge({ messages }) {
+  if (messages.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "span",
     {
-      "aria-label": locale === "ja" ? "\u97F3\u58F0" : "Voice",
-      value,
-      disabled: readOnly,
-      onChange: (event) => onChange(event.target.value),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: locale === "ja" ? "\u97F3\u58F0\u3092\u9078\u629E" : "Select a voice" }),
-        voices.map((voice) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("option", { value: voice.name, children: [
-          voice.name,
-          voice.preview || voice.status === "preview" ? " (preview)" : ""
-        ] }, voice.name))
-      ]
+      role: "status",
+      "aria-label": messages.map((message) => message.message).join(" "),
+      title: messages.map((message) => message.message).join(" "),
+      "data-ssml-warning-badge": "",
+      "data-testid": "ssml-editor-warning-badge",
+      className: "ssml-editor-warning-badge",
+      children: "\u26A0"
     }
   );
 }
+function DefaultVoiceSelector({
+  value,
+  voices,
+  selectedVoice,
+  readOnly,
+  locale,
+  onChange
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "select",
+      {
+        "aria-label": locale === "ja" ? "\u97F3\u58F0" : "Voice",
+        value,
+        disabled: readOnly,
+        onChange: (event) => onChange(event.target.value),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: locale === "ja" ? "\u97F3\u58F0\u3092\u9078\u629E" : "Select a voice" }),
+          voices.map((voice) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("option", { value: voice.name, children: [
+            voice.name,
+            voice.preview || voice.status === "preview" ? " (preview)" : ""
+          ] }, voice.name))
+        ]
+      }
+    ),
+    selectedVoice ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VoiceCapabilityMatrix, { voice: selectedVoice, locale }) : null
+  ] });
+}
 function VisualElementInspector({
   document: document2,
   element,
@@ -5070,16 +5148,24 @@ function VisualElementInspector({
   voiceCatalog,
   voiceLocale,
   voiceRegion,
-  voiceStyle
+  voiceStyle,
+  diagnostics
 }) {
   if (customInspector) {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: customInspector({ document: document2, element, path, readOnly, onChange: commit, locale }) });
   }
   const fields = getElementFields(element);
   const availableVoices = filteredVoices(voiceCatalog, voiceLocale, voiceRegion, voiceStyle);
+  const selectedVoice = voiceCatalog?.find(
+    (voice) => voice.name === (element.type === "voice" ? element.name : void 0)
+  );
   const renderSelector = renderVoiceSelector ?? DefaultVoiceSelector;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("fieldset", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { children: `<${elementLabel(element)}>` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("legend", { children: [
+      `<${elementLabel(element)}>`,
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(WarningBadge, { messages: elementWarnings(diagnostics, element) })
+    ] }),
     fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "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);
@@ -5119,9 +5205,11 @@ function VisualElementInspector({
           url: "\u97F3\u58F0\u5909\u63DB URL",
           profile: "\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB"
         }[field.key] ?? field.label : field.label,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(WarningBadge, { messages: fieldWarnings(diagnostics, element, field) }),
         field.key === "name" && elementLabel(element) === "voice" && voiceCatalog ? renderSelector({
           value: inputValue,
           voices: availableVoices,
+          selectedVoice,
           readOnly,
           locale,
           onChange: (value2) => commit(updateOptionalElementProperty(document2, path, field.key, value2))
@@ -5198,20 +5286,25 @@ function TreeNode({
   node,
   path,
   selectedPath,
-  onSelect
+  onSelect,
+  getWarnings
 }) {
   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}>` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", "aria-current": isSelected ? "true" : void 0, onClick: () => onSelect(path), children: [
+      `<${name}>`,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(WarningBadge, { messages: getWarnings(node) })
+    ] }),
     (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
+        onSelect,
+        getWarnings
       },
       `${path.join(".")}/${isElement(child) ? elementLabel(child) : JSON.stringify(child)}`
     )) })
@@ -5228,7 +5321,9 @@ function VisualSsmlEditor({
   voiceCatalog,
   voiceLocale,
   voiceRegion,
-  voiceStyle
+  voiceStyle,
+  voiceModel,
+  model
 }) {
   const [selectedPath, setSelectedPath] = (0, import_react3.useState)(null);
   const [selection, setSelection] = (0, import_react3.useState)({ start: 0, end: 0 });
@@ -5236,7 +5331,27 @@ function VisualSsmlEditor({
   const selectedLeaf = textLeaves.find((leaf) => leaf.path.join(".") === selectedPath?.join(".")) ?? textLeaves[0];
   const selectedElement = selectedPath ? getNodeAtPath(document2.children ?? [], selectedPath) : void 0;
   const selectedCustomInspector = selectedElement && isElement(selectedElement) ? customInspectors?.[elementLabel(selectedElement)] ?? customInspectors?.[selectedElement.type] : void 0;
-  const diagnostics = (0, import_react3.useMemo)(() => (0, import_ssml_core4.validateAzureSsml)((0, import_ssml_core4.buildSsml)(document2)), [document2]);
+  const validationOptions = (0, import_react3.useMemo)(
+    () => ({
+      model: voiceModel ?? model,
+      customVoiceDefinitions: voiceCatalog?.map((voice) => ({
+        name: voice.name,
+        locale: voice.locale,
+        regions: voice.regions ?? (voice.region ? [voice.region] : void 0),
+        styles: voice.styles,
+        supportedTags: voice.supportedTags,
+        unsupportedTags: voice.unsupportedTags,
+        models: voice.models,
+        status: voice.status ?? (voice.preview ? "preview" : "ga")
+      }))
+    }),
+    [model, voiceCatalog, voiceModel]
+  );
+  const diagnostics = (0, import_react3.useMemo)(
+    () => (0, import_ssml_core4.validateAzureSsml)((0, import_ssml_core4.buildSsml)(document2), validationOptions),
+    [document2, validationOptions]
+  );
+  const getWarnings = (element) => elementWarnings(diagnostics, element);
   const commit = (nextDocument) => onChange?.(nextDocument);
   const applyWrapper = (tag, attributes) => {
     if (readOnly || !selectedLeaf) return;
@@ -5265,7 +5380,8 @@ function VisualSsmlEditor({
             node,
             path: [index],
             selectedPath,
-            onSelect: setSelectedPath
+            onSelect: setSelectedPath,
+            getWarnings
           },
           isElement(node) ? elementLabel(node) : JSON.stringify(node)
         )) })
@@ -5293,9 +5409,11 @@ function VisualSsmlEditor({
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { children: localizedElementLabel(selectedElement, locale) }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { htmlFor: "ssml-visual-turn-voice", children: [
           locale === "ja" ? "\u97F3\u58F0" : "Voice",
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(WarningBadge, { messages: elementWarnings(diagnostics, selectedElement) }),
           voiceCatalog ? (renderVoiceSelector ?? DefaultVoiceSelector)({
             value: selectedElement.voice ?? "",
             voices: filteredVoices(voiceCatalog, voiceLocale, voiceRegion, voiceStyle),
+            selectedVoice: voiceCatalog?.find((voice) => voice.name === selectedElement.voice),
             readOnly,
             locale,
             onChange: (value) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "voice", value))
@@ -5397,7 +5515,8 @@ function VisualSsmlEditor({
           voiceCatalog,
           voiceLocale,
           voiceRegion,
-          voiceStyle
+          voiceStyle,
+          diagnostics
         }
       ) : selectedLeaf ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
@@ -6042,6 +6161,8 @@ var SsmlEditor = (0, import_react4.forwardRef)(function SsmlEditor2({
   voiceLocale,
   voiceRegion,
   voiceStyle,
+  voiceModel,
+  model,
   emotionStyles,
   className,
   style,
@@ -6490,7 +6611,9 @@ var SsmlEditor = (0, import_react4.forwardRef)(function SsmlEditor2({
               voiceCatalog,
               voiceLocale,
               voiceRegion,
-              voiceStyle
+              voiceStyle,
+              voiceModel,
+              model
             }
           ) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { ...editorStyles.editor, minHeight: editorMinHeight }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(