ssml-builder-js 2.14.0 → 2.16.0

package/dist/react.js

@@ -2960,34 +2960,51 @@ function createAzureUrlValidatorRunner(validator, options = {}) {
   const inFlight = /* @__PURE__ */ new Map();
   const waiters = [];
   let active = 0;
-  const acquire = async () => {
+  const configuredSignal = options.signal ?? new AbortController().signal;
+  const acquire = async (signal) => {
+    if (signal.aborted) throw new Error("URL validation was aborted.");
     if (active < concurrency) {
       active += 1;
       return;
     }
-    await new Promise((resolve) => waiters.push(resolve));
+    await new Promise((resolve, reject) => {
+      let waiter;
+      const abortHandler = () => {
+        const index = waiters.indexOf(waiter);
+        if (index >= 0) waiters.splice(index, 1);
+        signal.removeEventListener("abort", abortHandler);
+        reject(new Error("URL validation was aborted."));
+      };
+      signal.addEventListener("abort", abortHandler, { once: true });
+      waiter = () => {
+        signal.removeEventListener("abort", abortHandler);
+        resolve();
+      };
+      waiters.push(waiter);
+    });
     active += 1;
   };
   const release = () => {
     active -= 1;
     waiters.shift()?.();
   };
-  const check = async (url, context) => {
-    if (options.signal?.aborted) throw new Error("URL validation was aborted.");
-    const cached = cache.get(url);
+  const check = async (url, context, signal = configuredSignal) => {
+    if (signal.aborted) throw new Error("URL validation was aborted.");
+    const key = `${context.tag}:${context.attribute}:${url}`;
+    const cached = cache.get(key);
     if (cached !== void 0) return cached;
-    const existing = inFlight.get(url);
+    const existing = inFlight.get(key);
     if (existing) return existing;
     const promise = (async () => {
-      await acquire();
+      await acquire(signal);
       try {
-        if (options.signal?.aborted) throw new Error("URL validation was aborted.");
-        const validation = Promise.resolve(validator(url, context));
+        if (signal.aborted) throw new Error("URL validation was aborted.");
+        const validation = Promise.resolve(validator(url, context, signal));
         let timer;
         let abortHandler;
         const cancellation = new Promise((_resolve, reject) => {
           abortHandler = () => reject(new Error("URL validation was aborted."));
-          options.signal?.addEventListener("abort", abortHandler, { once: true });
+          signal.addEventListener("abort", abortHandler, { once: true });
           if (options.timeoutMs !== void 0 && options.timeoutMs > 0) {
             timer = setTimeout(
               () => reject(new Error(`URL validation timed out after ${options.timeoutMs} ms.`)),
@@ -2997,24 +3014,24 @@ function createAzureUrlValidatorRunner(validator, options = {}) {
         });
         try {
           const result = await (timer || abortHandler ? Promise.race([validation, cancellation]) : validation);
-          cache.set(url, result);
+          cache.set(key, result);
           return result;
         } finally {
           if (timer) clearTimeout(timer);
-          if (abortHandler) options.signal?.removeEventListener("abort", abortHandler);
+          if (abortHandler) signal.removeEventListener("abort", abortHandler);
         }
       } finally {
         release();
       }
     })();
-    inFlight.set(url, promise);
+    inFlight.set(key, promise);
     try {
       return await promise;
     } finally {
-      inFlight.delete(url);
+      inFlight.delete(key);
     }
   };
-  return (url, context) => check(url, context);
+  return (url, context, signal) => check(url, context, signal ?? configuredSignal);
 }
 var ALLOWED_BREAK_STRENGTHS = /* @__PURE__ */ new Set(["none", "x-weak", "weak", "medium", "strong", "x-strong"]);
 var ALLOWED_SAY_AS = /* @__PURE__ */ new Set([
@@ -3127,6 +3144,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,
@@ -3137,12 +3155,14 @@ function tokenizeElements(source) {
       parentName: parent?.name,
       parentVoiceName,
       selfClosing,
-      start
+      start,
+      path
     });
     if (!selfClosing) {
       openElements.push({
         childElementCount: 0,
         name: tokenName,
+        path,
         voiceName: tokenVoiceName
       });
     }
@@ -3155,13 +3175,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) {
@@ -3624,9 +3645,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,
@@ -3648,18 +3671,37 @@ 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 } : {},
     ...options.urlValidatorSignal ? { signal: options.urlValidatorSignal } : {},
     ...options.urlValidatorCache ? { cache: options.urlValidatorCache } : {}
   });
+  const validationSignal = options.urlValidatorSignal ?? options.urlValidation?.signal ?? new AbortController().signal;
   let tokens;
   try {
     tokens = tokenizeElements(ssml);
@@ -3669,25 +3711,33 @@ function validateAzureSsml(ssml, options = {}) {
   const checks = tokens.flatMap(
     (token) => urlAttributes(token).map(async ({ attribute, value }) => {
       try {
-        const result = await boundedValidator(value, { tag: token.name, attribute });
+        const result = await boundedValidator(
+          value,
+          { tag: token.name, attribute, ...options.sourceNodePath ? { sourceNodePath: options.sourceNodePath } : {} },
+          validationSignal
+        );
         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);
       }
     })
   );
@@ -6841,6 +6891,40 @@ function VoiceCapabilityMatrix({
   const status = voice.status ?? (voice.preview ? "preview" : void 0);
   return /* @__PURE__ */ React.createElement("div", { className: "ssml-editor-voice-capabilities", "data-voice-capabilities": "" }, /* @__PURE__ */ React.createElement("div", null, locale === "ja" ? "\u30B9\u30C6\u30FC\u30BF\u30B9" : "Status", ": ", status?.toUpperCase() ?? (locale === "ja" ? "GA" : "GA"), status === "preview" || status === "deprecated" ? /* @__PURE__ */ React.createElement("span", { role: "status", "aria-label": status, className: "ssml-editor-voice-warning-badge" }, status === "preview" ? "\u26A0 Preview" : "\u26A0 Deprecated") : null), (voice.regions?.length || voice.region) && /* @__PURE__ */ React.createElement("div", null, 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__ */ React.createElement("div", null, locale === "ja" ? "\u5BFE\u5FDC\u30BF\u30B0" : "Supported tags", ": ", voice.supportedTags.join(", ")), voice.unsupportedTags && voice.unsupportedTags.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "ssml-editor-voice-unsupported" }, 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__ */ React.createElement(
+    "span",
+    {
+      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"
+    },
+    "\u26A0"
+  );
+}
 function DefaultVoiceSelector({
   value,
   voices,
@@ -6873,7 +6957,8 @@ function VisualElementInspector({
   voiceCatalog,
   voiceLocale,
   voiceRegion,
-  voiceStyle
+  voiceStyle,
+  diagnostics
 }) {
   if (customInspector) {
     return /* @__PURE__ */ React.createElement(React.Fragment, null, customInspector({ document: document2, element, path, readOnly, onChange: commit, locale }));
@@ -6884,7 +6969,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)}>`), 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", 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) => {
     const value = element[field.key];
     const inputValue = value === void 0 ? "" : String(value);
     const inputId = `ssml-visual-${field.key}`;
@@ -6921,7 +7006,7 @@ function VisualElementInspector({
       speakerProfileId: "\u8A71\u8005\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB ID",
       url: "\u97F3\u58F0\u5909\u63DB URL",
       profile: "\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB"
-    }[field.key] ?? field.label : field.label, field.key === "name" && elementLabel(element) === "voice" && voiceCatalog ? renderSelector({
+    }[field.key] ?? field.label : field.label, /* @__PURE__ */ React.createElement(WarningBadge, { messages: fieldWarnings(diagnostics, element, field) }), field.key === "name" && elementLabel(element) === "voice" && voiceCatalog ? renderSelector({
       value: inputValue,
       voices: availableVoices,
       selectedVoice,
@@ -6999,19 +7084,21 @@ 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__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("button", { type: "button", "aria-current": isSelected ? "true" : void 0, onClick: () => onSelect(path) }, `<${name}>`), (node.children ?? []).length > 0 && /* @__PURE__ */ React.createElement("ul", null, node.children?.map((child, index) => /* @__PURE__ */ React.createElement(
+  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,
     {
       key: `${path.join(".")}/${isElement(child) ? elementLabel(child) : JSON.stringify(child)}`,
       node: child,
       path: [...path, index],
       selectedPath,
-      onSelect
+      onSelect,
+      getWarnings
     }
   ))));
 }
@@ -7026,7 +7113,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 });
@@ -7034,7 +7123,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)(() => validateAzureSsml(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)(
+    () => validateAzureSsml(buildSsml(document2), validationOptions),
+    [document2, validationOptions]
+  );
+  const getWarnings = (element) => elementWarnings(diagnostics, element);
   const commit = (nextDocument) => onChange?.(nextDocument);
   const applyWrapper = (tag, attributes) => {
     if (readOnly || !selectedLeaf) return;
@@ -7049,7 +7158,8 @@ function VisualSsmlEditor({
       node,
       path: [index],
       selectedPath,
-      onSelect: setSelectedPath
+      onSelect: setSelectedPath,
+      getWarnings
     }
   )))), /* @__PURE__ */ React.createElement("div", { className: "ssml-editor-visual-form" }, selectedCustomInspector && selectedElement && isElement(selectedElement) ? selectedCustomInspector({
     document: document2,
@@ -7066,7 +7176,7 @@ function VisualSsmlEditor({
       onClick: () => commit(addDialogTurn(document2, selectedPath ?? []))
     },
     locale === "ja" ? "\u30BF\u30FC\u30F3\u3092\u8FFD\u52A0" : "Add turn"
-  )) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:turn" ? /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, localizedElementLabel(selectedElement, locale)), /* @__PURE__ */ React.createElement("label", { htmlFor: "ssml-visual-turn-voice" }, locale === "ja" ? "\u97F3\u58F0" : "Voice", voiceCatalog ? (renderVoiceSelector ?? DefaultVoiceSelector)({
+  )) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:turn" ? /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, localizedElementLabel(selectedElement, locale)), /* @__PURE__ */ React.createElement("label", { htmlFor: "ssml-visual-turn-voice" }, locale === "ja" ? "\u97F3\u58F0" : "Voice", /* @__PURE__ */ React.createElement(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),
@@ -7143,7 +7253,8 @@ function VisualSsmlEditor({
       voiceCatalog,
       voiceLocale,
       voiceRegion,
-      voiceStyle
+      voiceStyle,
+      diagnostics
     }
   ) : selectedLeaf ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", null, "Text", /* @__PURE__ */ React.createElement(
     "textarea",
@@ -7767,6 +7878,8 @@ var SsmlEditor = (0, import_react4.forwardRef)(function SsmlEditor2({
   voiceLocale,
   voiceRegion,
   voiceStyle,
+  voiceModel,
+  model,
   emotionStyles,
   className,
   style,
@@ -8165,7 +8278,9 @@ var SsmlEditor = (0, import_react4.forwardRef)(function SsmlEditor2({
         voiceCatalog,
         voiceLocale,
         voiceRegion,
-        voiceStyle
+        voiceStyle,
+        voiceModel,
+        model
       }
     )) : /* @__PURE__ */ React.createElement("div", { style: { ...editorStyles.editor, minHeight: editorMinHeight } }, /* @__PURE__ */ React.createElement(
       import_react5.default,