ssml-builder-js 2.1.0 → 2.2.0

package/dist/elements.mjs

@@ -0,0 +1,1234 @@
+import {
+  BREAK_TIME_DESCRIPTIONS,
+  BREAK_TIME_PRESETS,
+  EDITOR_COPY,
+  EMPHASIS_LEVEL_DESCRIPTIONS,
+  EMPHASIS_LEVEL_PRESETS,
+  EXPRESS_AS_STYLE_DESCRIPTIONS,
+  EXPRESS_AS_STYLE_PRESETS,
+  LANGUAGE_DESCRIPTIONS,
+  LANGUAGE_PRESETS,
+  PROSODY_PITCH_DESCRIPTIONS,
+  PROSODY_PITCH_PRESETS,
+  PROSODY_RATE_DESCRIPTIONS,
+  PROSODY_RATE_PRESETS,
+  PROSODY_VOLUME_DESCRIPTIONS,
+  PROSODY_VOLUME_PRESETS,
+  SAY_AS_DESCRIPTIONS,
+  SAY_AS_PRESETS,
+  SILENCE_VALUE_DESCRIPTIONS,
+  SILENCE_VALUE_PRESETS,
+  buildSsml,
+  clearSsmlDocument,
+  createSsmlInsertionEdit,
+  findActiveSsmlTags,
+  findSsmlHoverTarget,
+  findSsmlVoiceContext,
+  formatSsmlHover,
+  formatXmlFragment,
+  getEditableRegion,
+  getEditableText,
+  getExpressAsStyleCategory,
+  parseSsml,
+  registerSsmlCompletionProvider,
+  resolveExpressAsStyles,
+  updateEditableText
+} from "./chunk-2XJER2BG.mjs";
+import "./chunk-6S5ODO6A.mjs";
+
+// packages/ssml-editor-react/src/ssmlInsertions.ts
+function createInsertionOptions(values, descriptions) {
+  return values.map((value) => ({
+    value,
+    labels: { ja: value, en: value },
+    ...descriptions?.[value] ? { descriptions: descriptions[value] } : {}
+  }));
+}
+var SSML_INSERTIONS = [
+  {
+    id: "break",
+    icon: "\u23F8",
+    tagName: "break",
+    selfClosing: true,
+    labels: { ja: "\u9593", en: "Break" },
+    descriptions: {
+      ja: "\u6307\u5B9A\u3057\u305F\u6642\u9593\u3060\u3051\u7121\u97F3\u306E\u9593\u3092\u633F\u5165\u3057\u307E\u3059\u3002",
+      en: "Inserts a silent pause for the selected duration."
+    },
+    parameterDescription: {
+      ja: "\u7121\u97F3\u306B\u3059\u308B\u6642\u9593\u3092\u9078\u629E\u3057\u307E\u3059\u3002",
+      en: "Selects the duration of the silent pause."
+    },
+    options: createInsertionOptions(BREAK_TIME_PRESETS, BREAK_TIME_DESCRIPTIONS),
+    createTemplate: (value) => ({
+      prefix: `<break time="${value}"/>`,
+      suffix: "",
+      mode: "insert"
+    })
+  },
+  {
+    id: "emphasis",
+    icon: "\u2726",
+    tagName: "emphasis",
+    labels: { ja: "\u5F37\u8ABF", en: "Emphasis" },
+    descriptions: {
+      ja: "\u9078\u629E\u7BC4\u56F2\u306E\u5F37\u8ABF\u30EC\u30D9\u30EB\u3092\u5909\u66F4\u3057\u307E\u3059\u3002",
+      en: "Changes the emphasis level of the selected text."
+    },
+    parameterDescription: {
+      ja: "\u9078\u629E\u7BC4\u56F2\u306E\u5F37\u8ABF\u30EC\u30D9\u30EB\u3092\u9078\u629E\u3057\u307E\u3059\u3002",
+      en: "Selects the emphasis level for the selected text."
+    },
+    options: createInsertionOptions(EMPHASIS_LEVEL_PRESETS, EMPHASIS_LEVEL_DESCRIPTIONS),
+    createTemplate: (value) => ({
+      prefix: `<emphasis level="${value}">`,
+      suffix: "</emphasis>",
+      mode: "wrap"
+    })
+  },
+  {
+    id: "rate",
+    icon: "\u2195",
+    tagName: "prosody",
+    labels: { ja: "\u901F\u5EA6", en: "Rate" },
+    descriptions: {
+      ja: "\u9078\u629E\u7BC4\u56F2\u306E\u8AAD\u307F\u4E0A\u3052\u901F\u5EA6\u3092\u5909\u66F4\u3057\u307E\u3059\u3002",
+      en: "Changes the speech rate of the selected text."
+    },
+    parameterDescription: {
+      ja: "\u9078\u629E\u7BC4\u56F2\u306E\u8AAD\u307F\u4E0A\u3052\u901F\u5EA6\u3092\u9078\u629E\u3057\u307E\u3059\u3002",
+      en: "Selects the speech rate for the selected text."
+    },
+    options: createInsertionOptions(PROSODY_RATE_PRESETS, PROSODY_RATE_DESCRIPTIONS),
+    createTemplate: (value) => ({
+      prefix: `<prosody rate="${value}">`,
+      suffix: "</prosody>",
+      mode: "wrap"
+    })
+  },
+  {
+    id: "pitch",
+    icon: "\u2197",
+    tagName: "prosody",
+    labels: { ja: "\u9AD8\u3055", en: "Pitch" },
+    descriptions: {
+      ja: "\u9078\u629E\u7BC4\u56F2\u306E\u58F0\u306E\u9AD8\u3055\u3092\u5909\u66F4\u3057\u307E\u3059\u3002",
+      en: "Changes the pitch of the selected text."
+    },
+    parameterDescription: {
+      ja: "\u9078\u629E\u7BC4\u56F2\u306E\u58F0\u306E\u9AD8\u3055\u3092\u534A\u97F3\u5358\u4F4D\u3067\u9078\u629E\u3057\u307E\u3059\u3002",
+      en: "Selects the pitch adjustment in semitone steps."
+    },
+    options: createInsertionOptions(PROSODY_PITCH_PRESETS, PROSODY_PITCH_DESCRIPTIONS),
+    createTemplate: (value) => ({
+      prefix: `<prosody pitch="${value}">`,
+      suffix: "</prosody>",
+      mode: "wrap"
+    })
+  },
+  {
+    id: "volume",
+    icon: "\u{1F50A}",
+    tagName: "prosody",
+    labels: { ja: "\u97F3\u91CF", en: "Volume" },
+    descriptions: {
+      ja: "\u9078\u629E\u7BC4\u56F2\u306E\u97F3\u91CF\u3092\u5909\u66F4\u3057\u307E\u3059\u3002",
+      en: "Changes the volume of the selected text."
+    },
+    parameterDescription: {
+      ja: "\u9078\u629E\u7BC4\u56F2\u306E\u97F3\u91CF\u30EC\u30D9\u30EB\u3092\u9078\u629E\u3057\u307E\u3059\u3002",
+      en: "Selects the volume level for the selected text."
+    },
+    options: createInsertionOptions(PROSODY_VOLUME_PRESETS, PROSODY_VOLUME_DESCRIPTIONS),
+    createTemplate: (value) => ({
+      prefix: `<prosody volume="${value}">`,
+      suffix: "</prosody>",
+      mode: "wrap"
+    })
+  },
+  {
+    id: "emotion",
+    icon: "\u263A",
+    tagName: "mstts:express-as",
+    labels: { ja: "\u611F\u60C5", en: "Emotion" },
+    descriptions: {
+      ja: "\u9078\u629E\u7BC4\u56F2\u306B\u97F3\u58F0\u306E\u611F\u60C5\u30B9\u30BF\u30A4\u30EB\u3092\u9069\u7528\u3057\u307E\u3059\u3002",
+      en: "Applies a voice emotion style to the selected text."
+    },
+    parameterDescription: {
+      ja: "\u9078\u629E\u7BC4\u56F2\u306B\u9069\u7528\u3059\u308B\u97F3\u58F0\u306E\u611F\u60C5\u30B9\u30BF\u30A4\u30EB\u3092\u9078\u629E\u3057\u307E\u3059\u3002",
+      en: "Selects the voice emotion style to apply."
+    },
+    options: createInsertionOptions(EXPRESS_AS_STYLE_PRESETS, EXPRESS_AS_STYLE_DESCRIPTIONS),
+    createTemplate: (value) => ({
+      prefix: `<mstts:express-as style="${value}">`,
+      suffix: "</mstts:express-as>",
+      mode: "wrap"
+    })
+  },
+  {
+    id: "say-as",
+    icon: "Aa",
+    tagName: "say-as",
+    labels: { ja: "\u8AAD\u307F\u4E0A\u3052", en: "Say as" },
+    descriptions: {
+      ja: "\u6570\u5B57\u3084\u65E5\u4ED8\u306A\u3069\u306E\u8AAD\u307F\u4E0A\u3052\u65B9\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002",
+      en: "Specifies how values such as numbers or dates are spoken."
+    },
+    parameterDescription: {
+      ja: "\u9078\u629E\u7BC4\u56F2\u306E\u8AAD\u307F\u4E0A\u3052\u65B9\u3092\u9078\u629E\u3057\u307E\u3059\u3002",
+      en: "Selects how the selected text is spoken."
+    },
+    options: createInsertionOptions(SAY_AS_PRESETS, SAY_AS_DESCRIPTIONS),
+    createTemplate: (value) => ({
+      prefix: `<say-as interpret-as="${value}">`,
+      suffix: "</say-as>",
+      mode: "wrap"
+    })
+  },
+  {
+    id: "lang",
+    icon: "\u6587",
+    tagName: "lang",
+    labels: { ja: "\u8A00\u8A9E", en: "Language" },
+    descriptions: {
+      ja: "\u9078\u629E\u7BC4\u56F2\u306E\u8AAD\u307F\u4E0A\u3052\u8A00\u8A9E\u3092\u5909\u66F4\u3057\u307E\u3059\u3002",
+      en: "Changes the speaking language of the selected text."
+    },
+    parameterDescription: {
+      ja: "\u9078\u629E\u7BC4\u56F2\u306B\u9069\u7528\u3059\u308B BCP-47 \u8A00\u8A9E\u30BF\u30B0\u3092\u9078\u629E\u3057\u307E\u3059\u3002",
+      en: "Selects the BCP-47 language tag for the selected text."
+    },
+    options: createInsertionOptions(LANGUAGE_PRESETS, LANGUAGE_DESCRIPTIONS),
+    createTemplate: (value) => ({
+      prefix: `<lang xml:lang="${value}">`,
+      suffix: "</lang>",
+      mode: "wrap"
+    })
+  },
+  {
+    id: "mstts:silence",
+    icon: "\u23F3",
+    tagName: "mstts:silence",
+    selfClosing: true,
+    labels: { ja: "\u7121\u97F3", en: "Silence" },
+    descriptions: {
+      ja: "\u7121\u97F3\u6642\u9593\u3092\u633F\u5165\u3057\u307E\u3059\u3002",
+      en: "Inserts a silence interval."
+    },
+    parameterDescription: {
+      ja: "\u7121\u97F3\u306B\u3059\u308B\u6642\u9593\u3092\u9078\u629E\u3057\u307E\u3059\u3002",
+      en: "Selects the silence duration."
+    },
+    options: createInsertionOptions(SILENCE_VALUE_PRESETS, SILENCE_VALUE_DESCRIPTIONS),
+    createTemplate: (value) => ({
+      prefix: `<mstts:silence type="Leading" value="${value}"/>`,
+      suffix: "",
+      mode: "insert"
+    })
+  }
+];
+var DEFAULT_INSERTION_GROUPS = [
+  {
+    id: "pauses",
+    labels: { ja: "\u9593\u30FB\u7121\u97F3", en: "Pauses" },
+    insertionIds: ["break", "mstts:silence"]
+  },
+  {
+    id: "prosody",
+    labels: { ja: "\u58F0\u306E\u8ABF\u6574", en: "Voice" },
+    insertionIds: ["rate", "pitch", "volume"]
+  },
+  {
+    id: "expression",
+    labels: { ja: "\u8868\u73FE", en: "Expression" },
+    insertionIds: ["emphasis", "emotion"]
+  },
+  {
+    id: "pronunciation",
+    labels: { ja: "\u8AAD\u307F\u4E0A\u3052", en: "Pronunciation" },
+    insertionIds: ["say-as", "lang"]
+  }
+];
+
+// packages/ssml-editor-elements/src/SsmlEditorElement.ts
+var HTMLElementBase = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+var STYLE_ID = "ssml-editor-elements-theme";
+var STYLE_CSS = `
+[data-ssml-editor] {
+  --ssml-editor-color: #111827;
+  --ssml-editor-bg: #ffffff;
+  --ssml-editor-border: #d1d5db;
+  --ssml-editor-control-bg: #f9fafb;
+  --ssml-editor-control-border: #9ca3af;
+  --ssml-editor-active-bg: #dbeafe;
+  --ssml-editor-active-border: #2563eb;
+  --ssml-editor-preview-bg: #f3f4f6;
+}
+section[data-ssml-editor] {
+  display: grid;
+  grid-template-rows: auto minmax(8rem, 1fr);
+  gap: 0.75rem;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+  padding: 1rem;
+  border: 1px solid var(--ssml-editor-border);
+  border-radius: 0.5rem;
+  color: var(--ssml-editor-color);
+  background: var(--ssml-editor-bg);
+}
+[data-ssml-editor][data-theme="dark"] {
+  --ssml-editor-color: #f9fafb;
+  --ssml-editor-bg: #1f2937;
+  --ssml-editor-border: #374151;
+  --ssml-editor-control-bg: #111827;
+  --ssml-editor-control-border: #4b5563;
+  --ssml-editor-active-bg: #1e3a8a;
+  --ssml-editor-active-border: #60a5fa;
+  --ssml-editor-preview-bg: #111827;
+}
+[data-ssml-editor] .ssml-editor-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+[data-ssml-editor] .ssml-editor-toolbar-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+[data-ssml-editor] .ssml-editor-toolbar-separator {
+  width: 1px;
+  height: 2.25rem;
+  margin: 0 0.25rem;
+  background: var(--ssml-editor-border);
+}
+[data-ssml-editor] .ssml-editor-toolbar-dropdown {
+  display: inline-block;
+}
+[data-ssml-editor] .ssml-editor-toolbar-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: 2.25rem;
+  padding: 0.375rem 0.625rem;
+  border: 1px solid var(--ssml-editor-control-border);
+  border-radius: 0.25rem;
+  color: var(--ssml-editor-color);
+  background: var(--ssml-editor-control-bg);
+  font: inherit;
+  cursor: pointer;
+}
+[data-ssml-editor] .ssml-editor-toolbar-button:hover,
+[data-ssml-editor] .ssml-editor-toolbar-option:hover {
+  background: var(--ssml-editor-preview-bg);
+}
+[data-ssml-editor] .ssml-editor-toolbar-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+[data-ssml-editor] .ssml-editor-toolbar-button[data-active="true"] {
+  border-color: var(--ssml-editor-active-border);
+  background: var(--ssml-editor-active-bg);
+}
+[data-ssml-editor] .ssml-editor-toolbar-icon {
+  display: inline-flex;
+  width: 1.25rem;
+  justify-content: center;
+  font-size: 1.1rem;
+  line-height: 1;
+}
+[data-ssml-editor] .ssml-editor-toolbar-chevron {
+  font-size: 0.7rem;
+  line-height: 1;
+}
+[data-ssml-editor] .ssml-editor-toolbar-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: 2.25rem;
+}
+[data-ssml-editor] .ssml-editor-switch-track {
+  display: inline-flex;
+  align-items: center;
+  width: 2.75rem;
+  height: 1.5rem;
+  padding: 0.1875rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--ssml-editor-control-border);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+[data-ssml-editor] .ssml-editor-switch-track[aria-checked="true"] {
+  background: var(--ssml-editor-active-border);
+}
+[data-ssml-editor] .ssml-editor-switch-track:focus-visible {
+  outline: 2px solid var(--ssml-editor-active-border);
+  outline-offset: 2px;
+}
+[data-ssml-editor] .ssml-editor-switch-thumb {
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 50%;
+  background: var(--ssml-editor-bg);
+  transition: transform 0.2s ease;
+}
+[data-ssml-editor] .ssml-editor-switch-track[aria-checked="true"] .ssml-editor-switch-thumb {
+  transform: translateX(1.25rem);
+}
+[data-ssml-editor].ssml-editor-toolbar-menu {
+  position: fixed;
+  z-index: 9999;
+  display: grid;
+  min-width: max-content;
+  max-height: min(24rem, calc(100vh - 1rem));
+  gap: 0.125rem;
+  padding: 0.25rem;
+  border: 1px solid var(--ssml-editor-control-border);
+  border-radius: 0.25rem;
+  background: var(--ssml-editor-control-bg);
+  box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 20%);
+  overflow-y: auto;
+}
+[data-ssml-editor] .ssml-editor-toolbar-option {
+  padding: 0.375rem 0.5rem;
+  border: 0;
+  border-radius: 0.125rem;
+  color: var(--ssml-editor-color);
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+[data-ssml-editor] .ssml-editor-toolbar-option-group {
+  display: grid;
+  gap: 0.125rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+[data-ssml-editor] .ssml-editor-toolbar-option-group legend {
+  padding: 0.375rem 0.5rem 0.125rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+[data-ssml-editor] .ssml-editor-help {
+  display: grid;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border: 1px solid var(--ssml-editor-control-border);
+  border-radius: 0.25rem;
+  background: var(--ssml-editor-preview-bg);
+}
+[data-ssml-editor] .ssml-editor-help h3,
+[data-ssml-editor] .ssml-editor-help p {
+  margin: 0;
+}
+[data-ssml-editor] .ssml-editor-help-list {
+  display: grid;
+  gap: 0.375rem;
+  margin: 0;
+  padding-left: 1.25rem;
+}
+[data-ssml-editor] .ssml-editor-help-item {
+  list-style: none;
+}
+[data-ssml-editor] .ssml-editor-help-item details {
+  margin-top: 0.375rem;
+  border: 1px solid var(--ssml-editor-control-border);
+  border-radius: 0.25rem;
+  background: var(--ssml-editor-control-bg);
+}
+[data-ssml-editor] .ssml-editor-help-item summary {
+  padding: 0.5rem 0.625rem;
+  cursor: pointer;
+}
+[data-ssml-editor] .ssml-editor-help-item details p,
+[data-ssml-editor] .ssml-editor-help-item details ul {
+  margin: 0.5rem 0.75rem 0.75rem;
+  font-size: 0.875rem;
+}
+[data-ssml-editor] .ssml-editor-display {
+  display: grid;
+  grid-template-rows: auto minmax(8rem, 1fr);
+  gap: 0.5rem;
+  min-height: 0;
+}
+[data-ssml-editor] .ssml-editor-editor {
+  position: relative;
+  min-height: 8rem;
+  height: 100%;
+  border: 1px solid var(--ssml-editor-control-border);
+  border-radius: 0.25rem;
+  overflow: visible;
+}
+`.trim();
+function injectStyles() {
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID)) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = STYLE_CSS;
+  document.head.appendChild(style);
+}
+function isDarkTheme(theme) {
+  return theme === "vs-dark" || theme.toLowerCase().includes("dark");
+}
+function getMenuPosition(trigger, menu) {
+  const bounds = trigger.getBoundingClientRect();
+  const margin = 8;
+  const top = Math.min(bounds.bottom + 4, window.innerHeight - menu.offsetHeight - margin);
+  const left = Math.min(bounds.left, window.innerWidth - menu.offsetWidth - margin);
+  return {
+    top: Math.max(margin, top),
+    left: Math.max(margin, left)
+  };
+}
+var SsmlEditorElement = class extends HTMLElementBase {
+  constructor() {
+    super(...arguments);
+    this.editor = null;
+    this.model = null;
+    this.monaco = null;
+    this.root = null;
+    this.toolbar = null;
+    this.toolbarActions = null;
+    this.display = null;
+    this.editorContainer = null;
+    this.helpPanel = null;
+    this.openMenu = null;
+    this.openMenuTrigger = null;
+    this.toolbarButtons = /* @__PURE__ */ new Map();
+    this.contentDisposable = null;
+    this.cursorDisposable = null;
+    this.completionDisposable = null;
+    this.hoverDisposable = null;
+    this.suppressChangeEvent = false;
+    this.initializationToken = 0;
+    this.documentState = null;
+    this.decorationsVisible = false;
+    this.helpOpen = false;
+    this.handleDocumentPointerDown = (event) => {
+      const target = event.target;
+      if (this.openMenu && target instanceof Node && !this.openMenu.contains(target) && !this.openMenuTrigger?.contains(target)) {
+        this.closeMenu();
+      }
+    };
+    this.handleDocumentKeyDown = (event) => {
+      if (event.key === "Escape" && this.openMenu) {
+        this.closeMenu(true);
+      }
+    };
+  }
+  get value() {
+    return this.valueState ?? this.getAttribute("value") ?? "";
+  }
+  set value(value) {
+    this.valueState = value;
+    this.setAttribute("value", value);
+  }
+  get theme() {
+    return this.getAttribute("theme") || "light";
+  }
+  set theme(theme) {
+    this.setAttribute("theme", theme);
+  }
+  get readonly() {
+    return this.hasAttribute("readonly");
+  }
+  set readonly(readonly) {
+    if (readonly) {
+      this.setAttribute("readonly", "");
+    } else {
+      this.removeAttribute("readonly");
+    }
+  }
+  get locale() {
+    return this.getAttribute("locale") === "en" ? "en" : "ja";
+  }
+  set locale(locale) {
+    this.setAttribute("locale", locale);
+  }
+  prepareDocument(value) {
+    try {
+      this.documentState = parseSsml(value);
+      return getEditableText(this.documentState);
+    } catch {
+      this.documentState = null;
+      return value;
+    }
+  }
+  connectedCallback() {
+    if (this.editor || this.root) {
+      return;
+    }
+    injectStyles();
+    document.addEventListener("pointerdown", this.handleDocumentPointerDown);
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
+    this.render();
+    const token = ++this.initializationToken;
+    void this.initialize(token);
+  }
+  disconnectedCallback() {
+    this.initializationToken += 1;
+    document.removeEventListener("pointerdown", this.handleDocumentPointerDown);
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+    this.closeMenu();
+    this.disposeEditor();
+  }
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (name === "value") {
+      this.valueState = newValue ?? "";
+      if (this.editor) {
+        const value = newValue ?? "";
+        const editableValue = this.prepareDocument(value);
+        if (this.editor.getValue() !== editableValue) {
+          this.suppressChangeEvent = true;
+          try {
+            this.editor.setValue(editableValue);
+          } finally {
+            this.suppressChangeEvent = false;
+          }
+        }
+      }
+      return;
+    }
+    if (name === "theme" && this.monaco) {
+      this.monaco.editor.setTheme(this.theme);
+      this.updateTheme();
+      return;
+    }
+    if (name === "readonly") {
+      this.editor?.updateOptions({ readOnly: this.readonly });
+      this.renderToolbar();
+      return;
+    }
+    if (name === "locale" || name === "show-toolbar" || name === "show-toolbar-labels") {
+      this.renderToolbar();
+      this.renderHelp();
+      return;
+    }
+    if (name === "show-decorations") {
+      this.decorationsVisible = newValue !== null;
+      this.updateDecorations();
+    }
+  }
+  render() {
+    const root = document.createElement("section");
+    root.dataset.ssmlEditor = "";
+    root.setAttribute("aria-label", EDITOR_COPY[this.locale].editorAriaLabel);
+    root.dataset.theme = isDarkTheme(this.theme) ? "dark" : "light";
+    const toolbar = document.createElement("div");
+    toolbar.className = "ssml-editor-toolbar";
+    toolbar.dataset.ssmlEditorToolbar = "";
+    const toolbarActions = document.createElement("div");
+    toolbarActions.className = "ssml-editor-toolbar-actions";
+    toolbarActions.setAttribute("role", "toolbar");
+    toolbarActions.setAttribute("aria-label", EDITOR_COPY[this.locale].toolbarAriaLabel);
+    toolbarActions.dataset.ssmlEditorToolbarActions = "";
+    toolbar.append(toolbarActions);
+    const display = document.createElement("div");
+    display.className = "ssml-editor-display";
+    display.dataset.ssmlEditorDisplay = "";
+    const editorContainer = document.createElement("div");
+    editorContainer.className = "ssml-editor-editor";
+    display.append(editorContainer);
+    root.append(toolbar, display);
+    this.replaceChildren(root);
+    this.root = root;
+    this.toolbar = toolbar;
+    this.toolbarActions = toolbarActions;
+    this.display = display;
+    this.editorContainer = editorContainer;
+    this.renderToolbar();
+    this.renderHelp();
+  }
+  renderToolbar() {
+    const toolbar = this.toolbar;
+    const toolbarActions = this.toolbarActions;
+    if (!toolbar || !toolbarActions) {
+      return;
+    }
+    this.closeMenu();
+    const copy = EDITOR_COPY[this.locale];
+    toolbar.hidden = this.getAttribute("show-toolbar") === "false";
+    toolbar.setAttribute("aria-label", copy.toolbarAriaLabel);
+    toolbarActions.setAttribute("aria-label", copy.toolbarAriaLabel);
+    toolbarActions.replaceChildren();
+    this.toolbarButtons.clear();
+    if (toolbar.hidden) {
+      return;
+    }
+    const insertionById = new Map(SSML_INSERTIONS.map((insertion) => [insertion.id, insertion]));
+    const toolbarIds = [
+      "undo",
+      "redo",
+      ...DEFAULT_INSERTION_GROUPS.flatMap((group) => group.insertionIds),
+      "clearAll",
+      "format",
+      "decorations",
+      "help"
+    ];
+    const groupByButtonId = /* @__PURE__ */ new Map();
+    for (const group of DEFAULT_INSERTION_GROUPS) {
+      for (const buttonId of group.insertionIds) {
+        groupByButtonId.set(buttonId, group.id);
+      }
+    }
+    groupByButtonId.set("undo", "history");
+    groupByButtonId.set("redo", "history");
+    groupByButtonId.set("clearAll", "document");
+    groupByButtonId.set("format", "document");
+    groupByButtonId.set("decorations", "document");
+    groupByButtonId.set("help", "help");
+    let previousGroup;
+    for (const id of toolbarIds) {
+      const group = groupByButtonId.get(id);
+      if (previousGroup !== void 0 && group !== previousGroup) {
+        const separator = document.createElement("span");
+        separator.className = "ssml-editor-toolbar-separator";
+        separator.setAttribute("aria-hidden", "true");
+        toolbarActions.append(separator);
+      }
+      previousGroup = group;
+      const insertion = insertionById.get(id);
+      if (insertion) {
+        toolbarActions.append(this.createInsertionButton(insertion));
+      } else if (id === "decorations") {
+        toolbarActions.append(this.createDecorationsSwitch());
+      } else {
+        toolbarActions.append(this.createActionButton(id));
+      }
+    }
+    this.updateActiveButtons();
+  }
+  createActionButton(id) {
+    const copy = EDITOR_COPY[this.locale];
+    const labels = {
+      undo: copy.undo,
+      redo: copy.redo,
+      clearAll: copy.clearAll,
+      format: copy.format,
+      help: copy.help
+    };
+    const icons = {
+      undo: "\u21A9",
+      redo: "\u21AA",
+      clearAll: "\xD7",
+      format: "\u2261",
+      help: "?"
+    };
+    const titles = {
+      undo: copy.undoTitle,
+      redo: copy.redoTitle,
+      clearAll: copy.clearAllTitle,
+      format: copy.formatTitle,
+      help: copy.helpTitle
+    };
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "ssml-editor-toolbar-button";
+    button.dataset.ssmlEditorButton = id;
+    button.setAttribute("aria-label", labels[id] ?? id);
+    button.title = titles[id] ?? labels[id] ?? id;
+    button.disabled = this.readonly && id !== "help";
+    if (id === "help") {
+      button.setAttribute("aria-expanded", String(this.helpOpen));
+    }
+    const icon = document.createElement("span");
+    icon.className = "ssml-editor-toolbar-icon";
+    icon.setAttribute("aria-hidden", "true");
+    icon.textContent = icons[id] ?? "";
+    button.append(icon);
+    if (this.hasAttribute("show-toolbar-labels")) {
+      button.append(document.createTextNode(labels[id] ?? id));
+    }
+    button.addEventListener("click", () => {
+      if (id === "help") {
+        this.helpOpen = !this.helpOpen;
+        button.setAttribute("aria-expanded", String(this.helpOpen));
+        this.renderHelp();
+      } else if (!this.readonly) {
+        this.handleAction(id);
+      }
+    });
+    this.toolbarButtons.set(id, button);
+    return button;
+  }
+  createDecorationsSwitch() {
+    const copy = EDITOR_COPY[this.locale];
+    const wrapper = document.createElement("div");
+    wrapper.className = "ssml-editor-toolbar-switch";
+    const icon = document.createElement("span");
+    icon.className = "ssml-editor-toolbar-icon";
+    icon.setAttribute("aria-hidden", "true");
+    icon.textContent = "\u2606";
+    wrapper.append(icon);
+    if (this.hasAttribute("show-toolbar-labels")) {
+      wrapper.append(document.createTextNode(copy.decorations));
+    }
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "ssml-editor-switch-track";
+    button.dataset.ssmlEditorButton = "decorations";
+    button.setAttribute("role", "switch");
+    button.setAttribute("aria-label", copy.decorations);
+    button.addEventListener("click", () => {
+      this.decorationsVisible = !this.decorationsVisible;
+      this.updateDecorations();
+    });
+    wrapper.append(button);
+    this.toolbarButtons.set("decorations", button);
+    this.updateDecorations();
+    return wrapper;
+  }
+  createInsertionButton(insertion) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "ssml-editor-toolbar-button";
+    button.dataset.ssmlEditorButton = insertion.id;
+    button.setAttribute("aria-label", insertion.labels[this.locale]);
+    button.setAttribute("aria-haspopup", "menu");
+    button.setAttribute("aria-expanded", "false");
+    button.title = insertion.titles?.[this.locale] ?? `${insertion.labels[this.locale]} \u2014 ${insertion.descriptions[this.locale]}`;
+    const icon = document.createElement("span");
+    icon.className = "ssml-editor-toolbar-icon";
+    icon.setAttribute("aria-hidden", "true");
+    icon.textContent = insertion.icon;
+    button.append(icon);
+    if (this.hasAttribute("show-toolbar-labels")) {
+      button.append(document.createTextNode(insertion.labels[this.locale]));
+    }
+    const chevron = document.createElement("span");
+    chevron.className = "ssml-editor-toolbar-chevron";
+    chevron.setAttribute("aria-hidden", "true");
+    chevron.textContent = "\u25BE";
+    button.append(chevron);
+    button.addEventListener("click", () => this.toggleInsertionMenu(insertion, button));
+    this.toolbarButtons.set(insertion.id, button);
+    const wrapper = document.createElement("div");
+    wrapper.className = "ssml-editor-toolbar-dropdown";
+    wrapper.append(button);
+    return wrapper;
+  }
+  toggleInsertionMenu(insertion, trigger) {
+    if (this.openMenuTrigger === trigger) {
+      this.closeMenu();
+      return;
+    }
+    this.closeMenu();
+    const menu = this.createInsertionMenu(insertion);
+    document.body.append(menu);
+    const position = getMenuPosition(trigger, menu);
+    menu.style.top = `${position.top}px`;
+    menu.style.left = `${position.left}px`;
+    trigger.setAttribute("aria-expanded", "true");
+    trigger.setAttribute("aria-controls", menu.id);
+    this.openMenu = menu;
+    this.openMenuTrigger = trigger;
+  }
+  createInsertionMenu(insertion) {
+    const menu = document.createElement("div");
+    menu.className = "ssml-editor-toolbar-menu";
+    menu.dataset.ssmlEditor = "";
+    menu.dataset.theme = isDarkTheme(this.theme) ? "dark" : "light";
+    menu.id = `ssml-editor-elements-menu-${insertion.id.replace(/[^A-Za-z0-9_-]/g, "-")}`;
+    menu.setAttribute("role", "menu");
+    menu.setAttribute("aria-label", insertion.labels[this.locale]);
+    menu.addEventListener("pointerdown", (event) => event.stopPropagation());
+    const options = this.getInsertionOptions(insertion);
+    if (options.length === 0) {
+      const empty = document.createElement("p");
+      empty.className = "ssml-editor-toolbar-option";
+      empty.textContent = EDITOR_COPY[this.locale].noAvailableOptions;
+      menu.append(empty);
+    } else {
+      for (const group of this.getOptionGroups(insertion, options)) {
+        if (group.label) {
+          const fieldset = document.createElement("fieldset");
+          fieldset.className = "ssml-editor-toolbar-option-group";
+          const legend = document.createElement("legend");
+          legend.textContent = group.label;
+          fieldset.append(legend);
+          for (const option of group.options) {
+            fieldset.append(this.createOptionButton(insertion, option));
+          }
+          menu.append(fieldset);
+        } else {
+          for (const option of group.options) {
+            menu.append(this.createOptionButton(insertion, option));
+          }
+        }
+      }
+    }
+    return menu;
+  }
+  getInsertionOptions(insertion) {
+    if (insertion.id !== "emotion") {
+      return insertion.options;
+    }
+    const model = this.model;
+    const selection = this.editor?.getSelection();
+    const voiceContext = model && selection ? findSsmlVoiceContext(model.getValue(), model.getOffsetAt(selection.getStartPosition())) : void 0;
+    const voiceName = voiceContext === void 0 ? this.documentState ? getEditableRegion(this.documentState).voiceName : void 0 : voiceContext.voiceName;
+    const availableStyles = new Set(
+      resolveExpressAsStyles(
+        voiceName,
+        insertion.options.map((option) => option.value)
+      )
+    );
+    return insertion.options.filter((option) => availableStyles.has(option.value));
+  }
+  getOptionGroups(insertion, options) {
+    if (insertion.id !== "emotion") {
+      return [{ label: "", options }];
+    }
+    const copy = EDITOR_COPY[this.locale];
+    const labels = {
+      emotions: copy.categoryEmotions,
+      scenarios: copy.categoryScenarios,
+      media: copy.categoryMedia,
+      other: copy.categoryOther
+    };
+    const categories = ["emotions", "scenarios", "media", "other"];
+    return categories.map((category) => ({
+      label: labels[category],
+      options: options.filter((option) => getExpressAsStyleCategory(option.value) === category)
+    })).filter((group) => group.options.length > 0);
+  }
+  createOptionButton(insertion, option) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "ssml-editor-toolbar-option";
+    button.setAttribute("role", "menuitem");
+    button.title = option.descriptions?.[this.locale] ?? insertion.descriptions[this.locale];
+    button.textContent = option.labels[this.locale];
+    button.disabled = this.readonly;
+    button.addEventListener("click", () => {
+      if (!this.readonly) {
+        this.applyInsertion(insertion, option);
+      }
+      this.closeMenu(true);
+    });
+    button.addEventListener("mousedown", (event) => event.preventDefault());
+    return button;
+  }
+  handleAction(id) {
+    if (!this.editor) {
+      return;
+    }
+    if (id === "undo" || id === "redo") {
+      this.editor.trigger("ssml-toolbar", id, null);
+      this.editor.focus();
+    } else if (id === "clearAll") {
+      if (this.documentState) {
+        this.replaceDocument(clearSsmlDocument(this.documentState));
+      }
+    } else if (id === "format") {
+      if (this.documentState) {
+        this.replaceDocument(updateEditableText(this.documentState, formatXmlFragment(this.editor.getValue())));
+      } else {
+        this.replaceEditorValue(formatXmlFragment(this.editor.getValue()));
+      }
+    }
+  }
+  applyInsertion(insertion, option) {
+    const editor = this.editor;
+    const model = this.model;
+    const selection = editor?.getSelection();
+    if (!editor || !model || !selection) {
+      return;
+    }
+    const startOffset = model.getOffsetAt(selection.getStartPosition());
+    const endOffset = model.getOffsetAt(selection.getEndPosition());
+    const selectedText = selection.isEmpty() ? "" : model.getValueInRange(selection);
+    const result = createSsmlInsertionEdit(
+      model.getValue(),
+      startOffset,
+      endOffset,
+      insertion.createTemplate(option.value),
+      model.getEOL(),
+      selectedText
+    );
+    editor.pushUndoStop();
+    const applied = editor.executeEdits("ssml-toolbar", [{ range: selection, text: result.replacement }]);
+    editor.pushUndoStop();
+    if (!applied) {
+      return;
+    }
+    const start = model.getPositionAt(startOffset + result.selectionOffset);
+    const end = model.getPositionAt(endOffset + result.selectionOffset);
+    editor.setSelection({
+      selectionStartLineNumber: start.lineNumber,
+      selectionStartColumn: start.column,
+      positionLineNumber: end.lineNumber,
+      positionColumn: end.column
+    });
+    editor.focus();
+  }
+  replaceEditorValue(value) {
+    const editor = this.editor;
+    const model = editor?.getModel();
+    if (!editor || !model || editor.getValue() === value) {
+      return;
+    }
+    editor.pushUndoStop();
+    editor.executeEdits("ssml-editor-toolbar", [
+      {
+        range: model.getFullModelRange(),
+        text: value,
+        forceMoveMarkers: true
+      }
+    ]);
+    editor.pushUndoStop();
+    editor.focus();
+  }
+  replaceDocument(document2) {
+    const editor = this.editor;
+    const model = editor?.getModel();
+    const editableValue = getEditableText(document2);
+    const fullValue = buildSsml(document2);
+    this.documentState = document2;
+    this.valueState = fullValue;
+    if (!editor || !model || editor.getValue() === editableValue) {
+      this.updateActiveButtons();
+      this.dispatchChange(fullValue);
+      return;
+    }
+    editor.pushUndoStop();
+    editor.executeEdits("ssml-editor-toolbar", [
+      {
+        range: model.getFullModelRange(),
+        text: editableValue,
+        forceMoveMarkers: true
+      }
+    ]);
+    editor.pushUndoStop();
+    editor.focus();
+  }
+  dispatchChange(value) {
+    if (this.suppressChangeEvent) {
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  updateDecorations() {
+    const button = this.toolbarButtons.get("decorations");
+    if (button) {
+      const copy = EDITOR_COPY[this.locale];
+      button.setAttribute("aria-checked", String(this.decorationsVisible));
+      button.title = this.decorationsVisible ? copy.decorationsHideTitle : copy.decorationsShowTitle;
+    }
+    this.editor?.updateOptions({
+      inlayHints: { enabled: this.decorationsVisible ? "on" : "off" }
+    });
+  }
+  renderHelp() {
+    const display = this.display;
+    if (!display) {
+      return;
+    }
+    this.helpPanel?.remove();
+    this.helpPanel = null;
+    const root = this.root;
+    if (root) {
+      root.setAttribute("aria-label", EDITOR_COPY[this.locale].editorAriaLabel);
+      this.updateTheme();
+    }
+    if (!this.helpOpen || this.getAttribute("show-toolbar") === "false") {
+      return;
+    }
+    const copy = EDITOR_COPY[this.locale];
+    const panel = document.createElement("section");
+    panel.className = "ssml-editor-help";
+    panel.setAttribute("aria-label", copy.helpHeading);
+    const heading = document.createElement("h3");
+    heading.textContent = copy.helpHeading;
+    const description = document.createElement("p");
+    description.textContent = copy.helpDescription;
+    const list = document.createElement("ul");
+    list.className = "ssml-editor-help-list";
+    for (const insertion of SSML_INSERTIONS) {
+      const item = document.createElement("li");
+      item.className = "ssml-editor-help-item";
+      const details = document.createElement("details");
+      const summary = document.createElement("summary");
+      summary.textContent = `${insertion.icon} ${insertion.labels[this.locale]} \u2014 ${insertion.descriptions[this.locale]}`;
+      const parameters = document.createElement("p");
+      parameters.textContent = `${copy.parameters}: ${insertion.parameterDescription[this.locale]}`;
+      const options = document.createElement("ul");
+      for (const option of insertion.options) {
+        const optionItem = document.createElement("li");
+        optionItem.textContent = `${option.labels[this.locale]}${option.descriptions?.[this.locale] ? ` \u2014 ${option.descriptions[this.locale]}` : ""}`;
+        options.append(optionItem);
+      }
+      details.append(summary, parameters, options);
+      item.append(details);
+      list.append(item);
+    }
+    panel.append(heading, description, list);
+    display.prepend(panel);
+    this.helpPanel = panel;
+  }
+  updateTheme() {
+    if (this.root) {
+      this.root.dataset.theme = isDarkTheme(this.theme) ? "dark" : "light";
+    }
+  }
+  updateActiveButtons() {
+    const editor = this.editor;
+    const model = this.model;
+    const selection = editor?.getSelection();
+    if (!editor || !model || !selection) {
+      return;
+    }
+    const activeTags = findActiveSsmlTags(model.getValue(), model.getOffsetAt(selection.getStartPosition()));
+    for (const insertion of SSML_INSERTIONS) {
+      const button = this.toolbarButtons.get(insertion.id);
+      if (button) {
+        button.dataset.active = String(
+          insertion.tagName !== void 0 && activeTags.has(insertion.tagName.toLowerCase())
+        );
+      }
+    }
+  }
+  async initialize(token) {
+    const container = this.editorContainer;
+    if (!container) {
+      return;
+    }
+    const monacoModule = await import("monaco-editor");
+    if (token !== this.initializationToken || !this.isConnected) {
+      return;
+    }
+    const model = monacoModule.editor.createModel(this.prepareDocument(this.value), "xml");
+    const editor = monacoModule.editor.create(container, {
+      model,
+      theme: this.theme,
+      readOnly: this.readonly,
+      automaticLayout: true,
+      minimap: { enabled: false },
+      wordWrap: "on",
+      inlayHints: { enabled: this.decorationsVisible ? "on" : "off" }
+    });
+    if (token !== this.initializationToken || !this.isConnected) {
+      editor.dispose();
+      model.dispose();
+      return;
+    }
+    this.monaco = monacoModule;
+    this.model = model;
+    this.editor = editor;
+    this.contentDisposable = editor.onDidChangeModelContent(() => {
+      const value = editor.getValue();
+      let nextValue = value;
+      if (this.documentState) {
+        this.documentState = updateEditableText(this.documentState, value);
+        nextValue = buildSsml(this.documentState);
+      }
+      this.valueState = nextValue;
+      this.updateActiveButtons();
+      this.dispatchChange(nextValue);
+    });
+    this.cursorDisposable = editor.onDidChangeCursorPosition(() => this.updateActiveButtons());
+    this.completionDisposable = registerSsmlCompletionProvider(monacoModule, {
+      model,
+      getOuterVoiceName: () => this.documentState ? getEditableRegion(this.documentState).voiceName : void 0
+    });
+    this.hoverDisposable = monacoModule.languages.registerHoverProvider("xml", {
+      provideHover: (hoverModel, position) => {
+        const target = findSsmlHoverTarget(hoverModel.getValue(), position.lineNumber, position.column);
+        if (!target) {
+          return void 0;
+        }
+        return {
+          contents: [
+            {
+              isTrusted: false,
+              supportHtml: false,
+              value: formatSsmlHover(target)
+            }
+          ],
+          range: target.range
+        };
+      }
+    });
+    this.updateActiveButtons();
+  }
+  closeMenu(restoreFocus = false) {
+    this.openMenu?.remove();
+    this.openMenu = null;
+    if (this.openMenuTrigger) {
+      this.openMenuTrigger.setAttribute("aria-expanded", "false");
+      this.openMenuTrigger.removeAttribute("aria-controls");
+      if (restoreFocus) {
+        this.openMenuTrigger.focus();
+      }
+    }
+    this.openMenuTrigger = null;
+  }
+  disposeEditor() {
+    this.closeMenu();
+    this.contentDisposable?.dispose();
+    this.contentDisposable = null;
+    this.cursorDisposable?.dispose();
+    this.cursorDisposable = null;
+    this.completionDisposable?.dispose();
+    this.completionDisposable = null;
+    this.hoverDisposable?.dispose();
+    this.hoverDisposable = null;
+    this.editor?.dispose();
+    this.editor = null;
+    this.model?.dispose();
+    this.model = null;
+    this.monaco = null;
+    this.root?.remove();
+    this.root = null;
+    this.toolbar = null;
+    this.toolbarActions = null;
+    this.display = null;
+    this.editorContainer = null;
+    this.helpPanel = null;
+    this.toolbarButtons.clear();
+  }
+};
+SsmlEditorElement.tagName = "ssml-editor";
+SsmlEditorElement.observedAttributes = [
+  "value",
+  "theme",
+  "readonly",
+  "locale",
+  "show-toolbar",
+  "show-toolbar-labels",
+  "show-decorations"
+];
+
+// packages/ssml-editor-elements/src/index.ts
+function defineSsmlEditorElement() {
+  if (typeof customElements === "undefined" || customElements.get(SsmlEditorElement.tagName)) {
+    return;
+  }
+  customElements.define(SsmlEditorElement.tagName, SsmlEditorElement);
+}
+
+// src/elements.ts
+defineSsmlEditorElement();
+export {
+  SsmlEditorElement,
+  defineSsmlEditorElement
+};
+//# sourceMappingURL=elements.mjs.map