@synclineapi/mdx-editor 0.1.1

package/dist/syncline-mdx-editor.js

@@ -0,0 +1,2845 @@
+import w from "highlight.js";
+class H {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  on(e, t) {
+    this.listeners.has(e) || this.listeners.set(e, /* @__PURE__ */ new Set()), this.listeners.get(e).add(t);
+  }
+  off(e, t) {
+    var o;
+    (o = this.listeners.get(e)) == null || o.delete(t);
+  }
+  emit(e, t) {
+    var o;
+    (o = this.listeners.get(e)) == null || o.forEach((i) => {
+      try {
+        i(t);
+      } catch (s) {
+        console.error(`[SynclineMDX] Error in event handler for "${e}":`, s);
+      }
+    });
+  }
+  removeAllListeners(e) {
+    e ? this.listeners.delete(e) : this.listeners.clear();
+  }
+}
+class D {
+  constructor(e, t) {
+    this.editorApi = e, this.plugins = /* @__PURE__ */ new Map(), this.toolbarItems = /* @__PURE__ */ new Map(), this.shortcuts = [], this.renderers = [], this.parsers = [], this.styleElements = [], this.events = t;
+  }
+  async register(e) {
+    if (this.plugins.has(e.name)) {
+      console.warn(`[SynclineMDX] Plugin "${e.name}" is already registered.`);
+      return;
+    }
+    if (e.dependencies) {
+      for (const t of e.dependencies)
+        if (!this.plugins.has(t))
+          throw new Error(`[SynclineMDX] Plugin "${e.name}" requires "${t}" which is not registered.`);
+    }
+    if (this.plugins.set(e.name, e), e.toolbarItems)
+      for (const t of e.toolbarItems)
+        this.toolbarItems.set(t.id, t);
+    e.shortcuts && this.shortcuts.push(...e.shortcuts), e.renderers && (this.renderers.push(...e.renderers), this.renderers.sort((t, o) => (o.priority ?? 0) - (t.priority ?? 0))), e.parsers && (this.parsers.push(...e.parsers), this.parsers.sort((t, o) => (o.priority ?? 0) - (t.priority ?? 0))), e.styles && this.injectStyles(e.styles), e.init && await e.init(this.createContext()), this.events.emit("plugin-registered", e.name);
+  }
+  unregister(e) {
+    const t = this.plugins.get(e);
+    if (t) {
+      if (t.destroy && t.destroy(this.createContext()), t.toolbarItems)
+        for (const o of t.toolbarItems)
+          this.toolbarItems.delete(o.id);
+      if (t.shortcuts && (this.shortcuts = this.shortcuts.filter(
+        (o) => !t.shortcuts.some((i) => i.key === o.key)
+      )), t.renderers) {
+        const o = new Set(t.renderers.map((i) => i.name));
+        this.renderers = this.renderers.filter((i) => !o.has(i.name));
+      }
+      if (t.parsers) {
+        const o = new Set(t.parsers.map((i) => i.name));
+        this.parsers = this.parsers.filter((i) => !o.has(i.name));
+      }
+      this.plugins.delete(e), this.events.emit("plugin-removed", e);
+    }
+  }
+  getToolbarItem(e) {
+    return this.toolbarItems.get(e);
+  }
+  getAllToolbarItems() {
+    return this.toolbarItems;
+  }
+  getShortcuts() {
+    return this.shortcuts;
+  }
+  getRenderers() {
+    return this.renderers;
+  }
+  getParsers() {
+    return this.parsers;
+  }
+  hasPlugin(e) {
+    return this.plugins.has(e);
+  }
+  createContext() {
+    return {
+      editor: this.editorApi,
+      registerToolbarItem: (e) => this.toolbarItems.set(e.id, e),
+      registerShortcut: (e) => this.shortcuts.push(e),
+      registerRenderer: (e) => {
+        this.renderers.push(e), this.renderers.sort((t, o) => (o.priority ?? 0) - (t.priority ?? 0));
+      },
+      registerParser: (e) => {
+        this.parsers.push(e), this.parsers.sort((t, o) => (o.priority ?? 0) - (t.priority ?? 0));
+      },
+      injectStyles: (e) => this.injectStyles(e),
+      emit: (e, t) => this.events.emit(e, t),
+      on: (e, t) => this.events.on(e, t),
+      off: (e, t) => this.events.off(e, t)
+    };
+  }
+  injectStyles(e) {
+    const t = document.createElement("style");
+    t.setAttribute("data-syncline-mdx", "plugin"), t.textContent = e, document.head.appendChild(t), this.styleElements.push(t);
+  }
+  destroy() {
+    for (const [e] of this.plugins)
+      this.unregister(e);
+    for (const e of this.styleElements)
+      e.remove();
+    this.styleElements = [];
+  }
+}
+class z {
+  constructor(e, t, o, i) {
+    this.config = e, this.pluginManager = t, this.editorApi = o, this.events = i, this.activeDropdown = null, this.documentClickHandler = (s) => {
+      this.activeDropdown && !this.activeDropdown.contains(s.target) && this.closeDropdowns();
+    };
+  }
+  render(e) {
+    this.el = document.createElement("div"), this.el.className = "smdx-toolbar";
+    for (const t of this.config) {
+      const o = document.createElement("div");
+      o.className = "smdx-toolbar-row", this.renderRow(t, o), this.el.appendChild(o);
+    }
+    return e.appendChild(this.el), document.addEventListener("click", this.documentClickHandler), this.el;
+  }
+  renderRow(e, t) {
+    for (const o of e)
+      typeof o == "string" ? o === "|" ? this.renderDivider(t) : this.renderItem(o, t) : "type" in o && o.type === "divider" ? this.renderDivider(t) : "type" in o && o.type === "group" && this.renderGroup(o, t);
+  }
+  renderDivider(e) {
+    const t = document.createElement("span");
+    t.className = "smdx-toolbar-divider", e.appendChild(t);
+  }
+  renderItem(e, t) {
+    const o = this.pluginManager.getToolbarItem(e);
+    if (o)
+      if (o.children && o.children.length > 0)
+        this.renderDropdownItem(o, t);
+      else {
+        const i = this.createButton(o);
+        t.appendChild(i);
+      }
+  }
+  renderGroup(e, t) {
+    if (e.display === "dropdown")
+      this.renderDropdownGroup(e, t);
+    else {
+      const o = document.createElement("div");
+      o.className = "smdx-toolbar-group";
+      for (const i of e.items)
+        typeof i == "string" ? this.renderItem(i, o) : this.renderGroup(i, o);
+      t.appendChild(o);
+    }
+  }
+  renderDropdownGroup(e, t) {
+    const o = document.createElement("div");
+    o.className = "smdx-toolbar-dropdown";
+    const i = document.createElement("button");
+    i.className = "smdx-toolbar-btn smdx-toolbar-dropdown-trigger", i.type = "button", i.innerHTML = `${e.icon || ""}<span class="smdx-toolbar-btn-label">${e.label || ""}</span><svg class="smdx-dropdown-arrow" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="currentColor" fill="none" stroke-width="1.5"/></svg>`, i.title = e.label || "", i.setAttribute("aria-label", e.label || "Dropdown"), i.setAttribute("aria-haspopup", "true"), i.setAttribute("aria-expanded", "false");
+    const s = document.createElement("div");
+    s.className = "smdx-toolbar-dropdown-menu", s.setAttribute("role", "menu"), s.style.display = "none";
+    for (const n of e.items)
+      if (typeof n == "string") {
+        const a = this.pluginManager.getToolbarItem(n);
+        if (!a) continue;
+        if (a.children && a.children.length > 0)
+          this.renderSubmenu(a, s);
+        else {
+          const d = this.createMenuButton(a);
+          s.appendChild(d);
+        }
+      } else {
+        const a = document.createElement("div");
+        if (a.className = "smdx-toolbar-dropdown-section", n.label) {
+          const d = document.createElement("div");
+          d.className = "smdx-toolbar-dropdown-section-label", d.textContent = n.label, a.appendChild(d);
+        }
+        for (const d of n.items)
+          if (typeof d == "string") {
+            const l = this.pluginManager.getToolbarItem(d);
+            if (l)
+              if (l.children && l.children.length > 0)
+                this.renderSubmenu(l, a);
+              else {
+                const c = this.createMenuButton(l);
+                a.appendChild(c);
+              }
+          }
+        s.appendChild(a);
+      }
+    i.addEventListener("click", (n) => {
+      n.stopPropagation(), this.toggleDropdown(s, o);
+    }), o.appendChild(i), o.appendChild(s), t.appendChild(o);
+  }
+  renderDropdownItem(e, t) {
+    const o = document.createElement("div");
+    o.className = "smdx-toolbar-dropdown";
+    const i = document.createElement("button");
+    i.className = "smdx-toolbar-btn smdx-toolbar-dropdown-trigger", i.type = "button", i.innerHTML = `${e.icon || ""}<span class="smdx-toolbar-btn-label">${e.label}</span><svg class="smdx-dropdown-arrow" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="currentColor" fill="none" stroke-width="1.5"/></svg>`, i.title = e.tooltip || e.label, i.setAttribute("aria-label", e.tooltip || e.label), i.setAttribute("aria-haspopup", "true"), i.setAttribute("aria-expanded", "false");
+    const s = document.createElement("div");
+    s.className = "smdx-toolbar-dropdown-menu", s.setAttribute("role", "menu"), s.style.display = "none";
+    for (const n of e.children)
+      if (n.children && n.children.length > 0)
+        this.renderSubmenu(n, s);
+      else {
+        const a = this.createMenuButton(n);
+        s.appendChild(a);
+      }
+    i.addEventListener("click", (n) => {
+      n.stopPropagation(), this.toggleDropdown(s, o);
+    }), o.appendChild(i), o.appendChild(s), t.appendChild(o);
+  }
+  renderSubmenu(e, t) {
+    const o = document.createElement("div");
+    o.className = "smdx-toolbar-submenu";
+    const i = document.createElement("button");
+    i.className = "smdx-toolbar-menu-btn smdx-toolbar-submenu-trigger", i.type = "button", i.innerHTML = `${e.icon || ""}<span>${e.label}</span><svg class="smdx-submenu-arrow" width="6" height="10" viewBox="0 0 6 10"><path d="M1 1l4 4-4 4" stroke="currentColor" fill="none" stroke-width="1.5"/></svg>`;
+    const s = document.createElement("div");
+    s.className = "smdx-toolbar-dropdown-menu smdx-toolbar-submenu-menu", s.style.display = "none";
+    for (const c of e.children)
+      if (c.children && c.children.length > 0)
+        this.renderSubmenu(c, s);
+      else {
+        const m = this.createMenuButton(c);
+        s.appendChild(m);
+      }
+    const n = () => {
+      const c = o.getBoundingClientRect();
+      s.style.left = `${c.right}px`, s.style.top = `${c.top}px`, requestAnimationFrame(() => {
+        const m = s.getBoundingClientRect();
+        m.right > window.innerWidth && (s.style.left = `${c.left - m.width}px`), m.bottom > window.innerHeight && (s.style.top = `${window.innerHeight - m.height - 8}px`);
+      });
+    };
+    let a = null;
+    const d = () => {
+      a && (clearTimeout(a), a = null), s.style.display = "", n();
+    }, l = () => {
+      a && clearTimeout(a), a = setTimeout(() => {
+        s.style.display = "none", a = null;
+      }, 120);
+    };
+    i.addEventListener("mouseenter", d), s.addEventListener("mouseenter", d), o.addEventListener("mouseleave", l), s.addEventListener("mouseleave", l), o.appendChild(i), o.appendChild(s), t.appendChild(o);
+  }
+  createButton(e) {
+    const t = document.createElement("button");
+    return t.className = `smdx-toolbar-btn${e.className ? " " + e.className : ""}`, t.type = "button", t.tabIndex = 0, t.title = e.tooltip || e.label, t.setAttribute("aria-label", e.tooltip || e.label), t.dataset.toolbarId = e.id, e.icon ? t.innerHTML = e.icon : t.textContent = e.label, e.shortcutLabel && (t.title += ` (${e.shortcutLabel})`), t.addEventListener("click", (o) => {
+      o.preventDefault(), this.executeAction(e);
+    }), e.render && e.render(t, this.getActionContext()), t;
+  }
+  createMenuButton(e) {
+    const t = document.createElement("button");
+    return t.className = `smdx-toolbar-menu-btn${e.className ? " " + e.className : ""}`, t.type = "button", t.setAttribute("role", "menuitem"), t.dataset.toolbarId = e.id, t.innerHTML = `${e.icon || ""}<span>${e.label}</span>${e.shortcutLabel ? `<span class="smdx-shortcut-label">${e.shortcutLabel}</span>` : ""}`, t.addEventListener("click", (o) => {
+      o.preventDefault(), this.closeDropdowns(), this.executeAction(e);
+    }), t;
+  }
+  executeAction(e) {
+    var o;
+    const t = this.getActionContext();
+    (o = e.isDisabled) != null && o.call(e, t) || (e.action(t), this.events.emit("toolbar-action", e.id));
+  }
+  getActionContext() {
+    return {
+      editor: this.editorApi,
+      selection: this.editorApi.getSelection()
+    };
+  }
+  toggleDropdown(e, t) {
+    if (e.style.display === "none") {
+      this.closeDropdowns(), e.style.display = "", this.activeDropdown = t;
+      const o = t.querySelector(".smdx-toolbar-dropdown-trigger");
+      o == null || o.setAttribute("aria-expanded", "true");
+    } else {
+      e.style.display = "none";
+      const o = t.querySelector(".smdx-toolbar-dropdown-trigger");
+      o == null || o.setAttribute("aria-expanded", "false"), this.activeDropdown = null;
+    }
+  }
+  closeDropdowns() {
+    var e, t;
+    (e = this.el) == null || e.querySelectorAll(".smdx-toolbar-dropdown-menu").forEach((o) => {
+      o.style.display = "none";
+    }), (t = this.el) == null || t.querySelectorAll('[aria-expanded="true"]').forEach((o) => {
+      o.setAttribute("aria-expanded", "false");
+    }), this.activeDropdown = null;
+  }
+  updateActiveStates() {
+    var t;
+    const e = this.getActionContext();
+    (t = this.el) == null || t.querySelectorAll("[data-toolbar-id]").forEach((o) => {
+      const i = o.dataset.toolbarId, s = this.pluginManager.getToolbarItem(i);
+      s != null && s.isActive && o.classList.toggle("smdx-active", s.isActive(e)), s != null && s.isDisabled && (o.disabled = s.isDisabled(e));
+    });
+  }
+  destroy() {
+    var e;
+    document.removeEventListener("click", this.documentClickHandler), (e = this.el) == null || e.remove();
+  }
+}
+const R = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "object",
+  "embed",
+  "base",
+  "form",
+  "input",
+  "link",
+  "meta",
+  "noscript",
+  "applet",
+  "frame",
+  "frameset"
+]), N = [
+  "https://www.youtube.com/embed/",
+  "https://youtube.com/embed/",
+  "https://codepen.io/",
+  "https://codesandbox.io/embed/"
+];
+function O(r) {
+  return N.some((e) => r.startsWith(e));
+}
+const S = /^on/i, j = /^\s*javascript\s*:/i;
+function G(r) {
+  if (typeof document > "u")
+    return r;
+  const t = new DOMParser().parseFromString(`<!DOCTYPE html><body>${r}</body>`, "text/html"), o = document.createTreeWalker(t.body, NodeFilter.SHOW_ELEMENT), i = [];
+  let s = o.currentNode;
+  for (; s; ) {
+    if (s.nodeType === Node.ELEMENT_NODE) {
+      const n = s, a = n.tagName.toLowerCase();
+      if (R.has(a))
+        i.push(n);
+      else if (a === "iframe") {
+        const d = n.getAttribute("src") || "";
+        if (!O(d))
+          i.push(n);
+        else {
+          const l = [];
+          for (const c of Array.from(n.attributes))
+            S.test(c.name) && l.push(c.name);
+          for (const c of l)
+            n.removeAttribute(c);
+        }
+      } else {
+        const d = [];
+        for (const l of Array.from(n.attributes))
+          (S.test(l.name) || (l.name === "href" || l.name === "src" || l.name === "action") && j.test(l.value)) && d.push(l.name);
+        for (const l of d)
+          n.removeAttribute(l);
+      }
+    }
+    s = o.nextNode();
+  }
+  for (const n of i)
+    n.remove();
+  return t.body.innerHTML;
+}
+class _ {
+  constructor() {
+    this.renderers = [], this.parsers = [];
+  }
+  setRenderers(e) {
+    this.renderers = e;
+  }
+  setParsers(e) {
+    this.parsers = e;
+  }
+  async render(e) {
+    let t = e;
+    const o = this.validateMdxTags(e), i = [];
+    t = t.replace(/`([^`\n]+)`/g, (s, n) => {
+      const a = i.length;
+      return i.push(n), `%%INLINECODE_${a}%%`;
+    }), t = this.applyParsers(t), t = this.applyRenderers(t);
+    for (let s = 0; s < i.length; s++)
+      t = t.replace(`%%INLINECODE_${s}%%`, `\`${i[s]}\``);
+    return t = this.renderMarkdown(t), o.length > 0 && (t = o.map(
+      (n) => `<div class="smdx-parse-error"><span class="smdx-parse-error-icon">&#9888;</span> ${this.escapeHtml(n)}</div>`
+    ).join("") + t), G(t);
+  }
+  applyParsers(e) {
+    let t = e;
+    for (const o of this.parsers)
+      t = t.replace(o.pattern, (...i) => {
+        const s = i;
+        return o.transform(s);
+      });
+    return t;
+  }
+  applyRenderers(e) {
+    let t = e;
+    for (const o of this.renderers)
+      t = t.replace(o.pattern, (i, ...s) => {
+        const n = {};
+        return s.length > 0 && (n.content = s[0] || ""), o.render(i, n);
+      });
+    return t;
+  }
+  /**
+   * Lightweight built-in markdown renderer.
+   * Handles standard markdown without external deps.
+   */
+  renderMarkdown(e) {
+    let t = e;
+    const o = [];
+    t = t.replace(/```(\w*)(?:[\t ]+([\w.\/ \-]+?))?\n([\s\S]*?)```/g, (s, n, a, d) => {
+      const l = o.length, c = {
+        js: "JavaScript",
+        javascript: "JavaScript",
+        ts: "TypeScript",
+        typescript: "TypeScript",
+        py: "Python",
+        python: "Python",
+        java: "Java",
+        rb: "Ruby",
+        ruby: "Ruby",
+        go: "Go",
+        rust: "Rust",
+        rs: "Rust",
+        cpp: "C++",
+        c: "C",
+        cs: "C#",
+        csharp: "C#",
+        php: "PHP",
+        swift: "Swift",
+        kt: "Kotlin",
+        kotlin: "Kotlin",
+        scala: "Scala",
+        sh: "Shell",
+        bash: "Bash",
+        zsh: "Zsh",
+        sql: "SQL",
+        html: "HTML",
+        css: "CSS",
+        scss: "SCSS",
+        less: "LESS",
+        json: "JSON",
+        yaml: "YAML",
+        yml: "YAML",
+        xml: "XML",
+        md: "Markdown",
+        markdown: "Markdown",
+        graphql: "GraphQL",
+        dart: "Dart",
+        r: "R",
+        lua: "Lua",
+        perl: "Perl",
+        text: "Text",
+        txt: "Text"
+      };
+      let m;
+      const h = d.trimEnd();
+      try {
+        n && w.getLanguage(n) ? m = w.highlight(h, { language: n }).value : m = w.highlightAuto(h).value;
+      } catch {
+        m = this.escapeHtml(h);
+      }
+      const x = n ? c[n.toLowerCase()] || n.charAt(0).toUpperCase() + n.slice(1) : "", u = x ? `<span class="smdx-code-lang">${x}</span>` : "", b = a ? `<span class="smdx-code-filename"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>${this.escapeHtml(a)}</span>` : "", v = '<button class="smdx-copy-btn" data-copy-btn="true" title="Copy code" aria-label="Copy code"><svg class="smdx-copy-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg><svg class="smdx-check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></button>', f = x || a, k = f ? `<div class="smdx-code-header">${u}${b}${v}</div>` : "";
+      return o.push(
+        `<div class="smdx-code-block${f ? " smdx-has-header" : ""}">${k}<pre><code class="hljs language-${n || "text"}">${m}</code></pre>${f ? "" : v}</div>`
+      ), `%%CODEBLOCK_${l}%%`;
+    }), t = t.replace(/`([^`]+)`/g, (s, n) => `<code class="smdx-inline-code">${this.escapeHtml(n)}</code>`);
+    const i = (s) => s.toLowerCase().replace(/[^\w]+/g, "-").replace(/^-|-$/g, "");
+    t = t.replace(/^######\s+(.+)$/gm, (s, n) => `<h6 id="${i(n)}">${n}</h6>`), t = t.replace(/^#####\s+(.+)$/gm, (s, n) => `<h5 id="${i(n)}">${n}</h5>`), t = t.replace(/^####\s+(.+)$/gm, (s, n) => `<h4 id="${i(n)}">${n}</h4>`), t = t.replace(/^###\s+(.+)$/gm, (s, n) => `<h3 id="${i(n)}">${n}</h3>`), t = t.replace(/^##\s+(.+)$/gm, (s, n) => `<h2 id="${i(n)}">${n}</h2>`), t = t.replace(/^#\s+(.+)$/gm, (s, n) => `<h1 id="${i(n)}">${n}</h1>`), t = t.replace(/^---$/gm, "<hr/>"), t = t.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>"), t = t.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>"), t = t.replace(/\*(.+?)\*/g, "<em>$1</em>"), t = t.replace(/~~(.+?)~~/g, "<del>$1</del>"), t = t.replace(/^>\s+(.+)$/gm, "<blockquote>$1</blockquote>"), t = t.replace(/^- \[x\]\s+(.+)$/gm, '<div class="smdx-task"><input type="checkbox" checked disabled /><span>$1</span></div>'), t = t.replace(/^- \[ \]\s+(.+)$/gm, '<div class="smdx-task"><input type="checkbox" disabled /><span>$1</span></div>'), t = t.replace(/^[-*]\s+(.+)$/gm, '<li class="smdx-ul-item">$1</li>'), t = t.replace(/((?:<li class="smdx-ul-item">.*<\/li>\n?)+)/g, "<ul>$1</ul>"), t = t.replace(/^\d+\.\s+(.+)$/gm, '<li class="smdx-ol-item">$1</li>'), t = t.replace(/((?:<li class="smdx-ol-item">.*<\/li>\n?)+)/g, "<ol>$1</ol>"), t = t.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" class="smdx-image"/>'), t = t.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'), t = this.renderTables(t), t = t.replace(/ {2,}$/gm, "<br/>"), t = t.replace(/^(?!\s*<[a-zA-Z/!]|\s*%%)(.*\S.*)$/gm, "<p>$1</p>"), t = t.replace(/<p>\s*<\/p>/g, "");
+    for (let s = 0; s < o.length; s++)
+      t = t.replace(`%%CODEBLOCK_${s}%%`, o[s]);
+    return t;
+  }
+  renderTables(e) {
+    const t = /(?:^(\|.+\|)\n(\|[-| :]+\|)\n((?:\|.+\|\n?)*))/gm;
+    return e.replace(t, (o, i, s, n) => {
+      const a = this.parseTableRow(i), d = n.trim().split(`
+`).filter(Boolean).map((c) => this.parseTableRow(c));
+      let l = '<div class="smdx-table-wrapper"><table class="smdx-table"><thead><tr>';
+      for (const c of a)
+        l += `<th>${c}</th>`;
+      l += "</tr></thead><tbody>";
+      for (const c of d) {
+        l += "<tr>";
+        for (const m of c)
+          l += `<td>${m}</td>`;
+        l += "</tr>";
+      }
+      return l += "</tbody></table></div>", l;
+    });
+  }
+  parseTableRow(e) {
+    return e.split("|").slice(1, -1).map((t) => t.trim());
+  }
+  escapeHtml(e) {
+    return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  /**
+   * Validate MDX component tags — detect unclosed or mismatched tags.
+   * Only checks PascalCase tags (MDX components), not standard HTML.
+   */
+  validateMdxTags(e) {
+    const t = [];
+    let o = e.replace(/```[\s\S]*?```/g, "");
+    o = o.replace(/`[^`]+`/g, "");
+    const i = [], s = o.split(`
+`);
+    for (let n = 0; n < s.length; n++) {
+      const a = s[n];
+      let d;
+      const l = /<\/?([A-Z][A-Za-z0-9]*)(?:\s[^>]*)?\/?>|<([A-Z][A-Za-z0-9]*)(?:\s[^>]*)?>/g;
+      for (; (d = l.exec(a)) !== null; ) {
+        const c = d[0];
+        if (c.endsWith("/>")) continue;
+        const m = d[1] || d[2];
+        if (!m) continue;
+        const h = d.index + 1;
+        if (c.startsWith("</")) {
+          let u = !1;
+          for (let b = i.length - 1; b >= 0; b--)
+            if (i[b].tag === m) {
+              i.splice(b, 1), u = !0;
+              break;
+            }
+          u || t.push(`Unexpected closing tag '</${m}>' at line ${n + 1}:${h} — no matching opening tag found.`);
+        } else
+          i.push({ tag: m, line: n + 1, col: h });
+      }
+    }
+    for (const n of i)
+      t.push(`Expected a closing tag for '<${n.tag}>' (${n.line}:${n.col}) before the end of the document.`);
+    return t;
+  }
+}
+class F {
+  constructor(e = 100) {
+    this.stack = [], this.pointer = -1, this.maxSize = e;
+  }
+  push(e) {
+    this.pointer < this.stack.length - 1 && (this.stack = this.stack.slice(0, this.pointer + 1)), this.stack[this.stack.length - 1] !== e && (this.stack.push(e), this.stack.length > this.maxSize && this.stack.shift(), this.pointer = this.stack.length - 1);
+  }
+  undo() {
+    if (this.pointer > 0)
+      return this.pointer--, this.stack[this.pointer];
+  }
+  redo() {
+    if (this.pointer < this.stack.length - 1)
+      return this.pointer++, this.stack[this.pointer];
+  }
+  current() {
+    return this.stack[this.pointer];
+  }
+  clear() {
+    this.stack = [], this.pointer = -1;
+  }
+}
+class q {
+  constructor(e) {
+    this.events = new H(), this.renderer = new _(), this.history = new F(), this.renderTimer = null, this.historyTimer = null, this._destroyed = !1, this.config = e, this.mode = e.mode || "split", this.init();
+  }
+  init() {
+    const e = typeof this.config.container == "string" ? document.querySelector(this.config.container) : this.config.container;
+    if (!e)
+      throw new Error("[SynclineMDX] Container element not found");
+    this.buildDOM(e), this.config.theme && this.applyTheme(this.config.theme), this.pluginManager = new D(this, this.events);
+    const t = this.config.toolbar || [this.getDefaultToolbar()];
+    this.toolbar = new z(t, this.pluginManager, this, this.events), this.config.value && (this.textarea.value = this.config.value), this.config.plugins ? this.registerPlugins(this.config.plugins).then(() => {
+      this.toolbar.render(this.toolbarEl), this.history.push(this.textarea.value), this.renderPreview();
+    }) : (this.toolbar.render(this.toolbarEl), this.history.push(this.textarea.value), this.renderPreview()), this.textarea.addEventListener("input", this.onInput.bind(this)), this.textarea.addEventListener("keydown", this.onKeyDown.bind(this)), this.textarea.addEventListener("click", this.onSelectionChange.bind(this)), this.textarea.addEventListener("select", this.onSelectionChange.bind(this)), this.textarea.addEventListener("focus", () => this.events.emit("focus")), this.textarea.addEventListener("blur", () => this.events.emit("blur")), this.config.scrollSync !== !1 && this.textarea.addEventListener("scroll", () => {
+      requestAnimationFrame(() => {
+        const o = this.textarea.scrollHeight - this.textarea.clientHeight, i = o > 0 ? this.textarea.scrollTop / o : 0, s = this.previewContent.scrollHeight - this.previewContent.clientHeight;
+        this.previewContent.scrollTop = i * s;
+      });
+    }), this.config.readOnly && (this.textarea.readOnly = !0), this.config.placeholder && (this.textarea.placeholder = this.config.placeholder), this.setMode(this.mode), this.config.onChange && this.on("change", (o) => {
+      typeof o == "string" && this.config.onChange(o);
+    });
+  }
+  buildDOM(e) {
+    this.root = document.createElement("div"), this.root.className = "smdx-editor", this.root.setAttribute("role", "application"), this.root.setAttribute("aria-label", "Markdown Editor");
+    const t = document.createElement("a");
+    t.className = "smdx-skip-link", t.href = "#smdx-editor-content", t.textContent = "Skip to editor", this.root.appendChild(t), this.toolbarEl = document.createElement("div"), this.toolbarEl.className = "smdx-toolbar-container", this.toolbarEl.setAttribute("role", "toolbar"), this.toolbarEl.setAttribute("aria-label", "Formatting toolbar");
+    const o = document.createElement("div");
+    o.className = "smdx-main", this.editorPane = document.createElement("div"), this.editorPane.className = "smdx-editor-pane", this.editorPane.id = "smdx-editor-content", this.textarea = document.createElement("textarea"), this.textarea.className = "smdx-textarea", this.textarea.spellcheck = !0, this.textarea.setAttribute("autocomplete", "off"), this.textarea.setAttribute("autocorrect", "off"), this.textarea.setAttribute("autocapitalize", "off"), this.textarea.setAttribute("role", "textbox"), this.textarea.setAttribute("aria-label", "Markdown editor"), this.textarea.setAttribute("aria-multiline", "true"), this.editorPane.appendChild(this.textarea), this.previewPane = document.createElement("div"), this.previewPane.className = "smdx-preview-pane", this.previewContent = document.createElement("div"), this.previewContent.className = "smdx-preview-content", this.previewContent.setAttribute("role", "region"), this.previewContent.setAttribute("aria-label", "Preview"), this.previewContent.setAttribute("aria-live", "polite"), this.previewContent.addEventListener("click", (i) => {
+      const s = i.target, n = s.closest("[data-smdx-tab-btn]");
+      if (n) {
+        const c = n.closest(".smdx-tabs");
+        if (c) {
+          const m = parseInt(n.dataset.tabIndex ?? "0", 10);
+          c.querySelectorAll(".smdx-tab-btn").forEach((h) => h.classList.remove("smdx-active")), n.classList.add("smdx-active"), c.querySelectorAll(".smdx-tab-panel").forEach((h, x) => {
+            h.style.display = x === m ? "block" : "none";
+          });
+        }
+        return;
+      }
+      const a = s.closest("[data-copy-btn]");
+      if (!a) return;
+      const d = a.closest(".smdx-code-block"), l = d == null ? void 0 : d.querySelector("code");
+      l && navigator.clipboard.writeText(l.textContent || "").then(() => {
+        a.classList.add("smdx-copied"), setTimeout(() => a.classList.remove("smdx-copied"), 2e3);
+      }).catch(() => {
+      });
+    }), this.previewPane.appendChild(this.previewContent), o.appendChild(this.editorPane), o.appendChild(this.previewPane), this.statusBar = document.createElement("div"), this.statusBar.className = "smdx-status-bar", this.statusBar.setAttribute("role", "status"), this.statusBar.setAttribute("aria-label", "Editor status"), this.updateStatusBar(), this.root.appendChild(this.toolbarEl), this.root.appendChild(o), this.root.appendChild(this.statusBar), e.appendChild(this.root);
+  }
+  async registerPlugins(e) {
+    for (const t of e)
+      await this.pluginManager.register(t);
+  }
+  getDefaultToolbar() {
+    return [
+      "heading",
+      "|",
+      "bold",
+      "italic",
+      "strikethrough",
+      "|",
+      "quote",
+      "link",
+      "image",
+      "|",
+      "code",
+      "codeBlock",
+      "|",
+      "unorderedList",
+      "orderedList",
+      "taskList",
+      "|",
+      "table",
+      "|",
+      "highlight",
+      "admonition",
+      "|",
+      "accordion",
+      "steps",
+      "tab",
+      "|",
+      "card",
+      "multiColumn",
+      "|",
+      "tip",
+      "container",
+      "|",
+      "emoji",
+      "formula",
+      "|",
+      "embedVideo",
+      "embedOthers",
+      "|",
+      "mermaid",
+      "|",
+      "copyText",
+      "tooltip"
+    ];
+  }
+  // ─── Input handlers ──────────────────────────────
+  onInput() {
+    this.historyTimer && clearTimeout(this.historyTimer), this.historyTimer = setTimeout(() => {
+      this.history.push(this.textarea.value);
+    }, 300), this.scheduleRender(), this.updateStatusBar(), this.events.emit("change", this.textarea.value);
+  }
+  onKeyDown(e) {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const i = this.textarea.selectionStart, s = this.textarea.selectionEnd, n = this.textarea.value;
+      if (e.shiftKey) {
+        const a = n.lastIndexOf(`
+`, i - 1) + 1;
+        n.substring(a, a + 2) === "  " && (this.textarea.value = n.substring(0, a) + n.substring(a + 2), this.textarea.selectionStart = Math.max(i - 2, a), this.textarea.selectionEnd = Math.max(s - 2, a));
+      } else
+        this.textarea.value = n.substring(0, i) + "  " + n.substring(s), this.textarea.selectionStart = this.textarea.selectionEnd = i + 2;
+      this.onInput();
+      return;
+    }
+    if (e.metaKey || e.ctrlKey) {
+      if (e.key === "z" && !e.shiftKey) {
+        e.preventDefault(), this.undo();
+        return;
+      }
+      if (e.key === "z" && e.shiftKey || e.key === "y") {
+        e.preventDefault(), this.redo();
+        return;
+      }
+    }
+    const o = this.pluginManager.getShortcuts();
+    for (const i of o)
+      if (this.matchShortcut(e, i.key)) {
+        e.preventDefault(), i.action({
+          editor: this,
+          selection: this.getSelection()
+        });
+        return;
+      }
+  }
+  matchShortcut(e, t) {
+    const o = t.toLowerCase().split("+"), i = o.includes("cmd") || o.includes("meta"), s = o.includes("ctrl"), n = o.includes("shift"), a = o.includes("alt"), d = i || s, l = o.filter((m) => !["cmd", "meta", "ctrl", "shift", "alt"].includes(m))[0];
+    return (i ? e.metaKey : !e.metaKey || d) && (s ? e.ctrlKey : !e.ctrlKey || d) && (n ? e.shiftKey : !e.shiftKey) && (a ? e.altKey : !e.altKey) && (d ? e.metaKey || e.ctrlKey : !e.metaKey && !e.ctrlKey) && e.key.toLowerCase() === l;
+  }
+  onSelectionChange() {
+    this.toolbar.updateActiveStates(), this.events.emit("selection-change", this.getSelection());
+  }
+  scheduleRender() {
+    this.renderTimer && clearTimeout(this.renderTimer), this.renderTimer = setTimeout(() => this.renderPreview(), 150);
+  }
+  updateStatusBar() {
+    const e = this.getWordCount(), t = this.getLineCount();
+    this.statusBar.innerHTML = `<span>Words: ${e}</span><span>Lines: ${t}</span>`;
+    const o = document.createElement("div");
+    o.className = "smdx-mode-switch", ["editor", "split", "preview"].forEach((i) => {
+      const s = document.createElement("button");
+      s.type = "button", s.className = `smdx-mode-btn${i === this.mode ? " smdx-active" : ""}`, s.textContent = i.charAt(0).toUpperCase() + i.slice(1), s.setAttribute("aria-label", `${i.charAt(0).toUpperCase() + i.slice(1)} mode`), s.setAttribute("aria-pressed", String(i === this.mode)), s.addEventListener("click", () => this.setMode(i)), o.appendChild(s);
+    }), this.statusBar.appendChild(o);
+  }
+  // ─── EditorAPI implementation ──────────────────
+  getValue() {
+    return this.textarea.value;
+  }
+  setValue(e) {
+    this.textarea.value = e, this.history.push(e), this.scheduleRender(), this.events.emit("change", e);
+  }
+  insertText(e) {
+    const t = this.textarea.selectionStart, o = this.textarea.selectionEnd, i = this.textarea.value;
+    this.textarea.value = i.substring(0, t) + e + i.substring(o), this.textarea.selectionStart = this.textarea.selectionEnd = t + e.length, this.textarea.focus(), this.onInput();
+  }
+  wrapSelection(e, t) {
+    const { start: o, end: i, text: s } = this.getSelection(), n = this.textarea.value, a = e + (s || "text") + t;
+    this.textarea.value = n.substring(0, o) + a + n.substring(i), this.textarea.selectionStart = o + e.length, this.textarea.selectionEnd = o + e.length + (s || "text").length, this.textarea.focus(), this.onInput();
+  }
+  replaceSelection(e) {
+    const { start: t, end: o } = this.getSelection(), i = this.textarea.value;
+    this.textarea.value = i.substring(0, t) + e + i.substring(o), this.textarea.selectionStart = this.textarea.selectionEnd = t + e.length, this.textarea.focus(), this.onInput();
+  }
+  getSelection() {
+    const e = this.textarea.selectionStart, t = this.textarea.selectionEnd, o = this.textarea.value;
+    return {
+      start: e,
+      end: t,
+      text: o.substring(e, t),
+      beforeText: o.substring(0, e),
+      afterText: o.substring(t)
+    };
+  }
+  setSelection(e, t) {
+    this.textarea.selectionStart = e, this.textarea.selectionEnd = t, this.textarea.focus();
+  }
+  insertBlock(e) {
+    const { start: t, end: o } = this.getSelection(), i = this.textarea.value, s = i.substring(0, t), n = i.substring(o), a = s.length > 0 && !s.endsWith(`
+`), d = n.length > 0 && !n.startsWith(`
+`), l = (a ? `
+
+` : "") + e + (d ? `
+
+` : "");
+    this.textarea.value = s + l + n, this.textarea.selectionStart = this.textarea.selectionEnd = s.length + l.length, this.textarea.focus(), this.onInput();
+  }
+  getTextarea() {
+    return this.textarea;
+  }
+  getPreview() {
+    return this.previewContent;
+  }
+  getRoot() {
+    return this.root;
+  }
+  focus() {
+    this.textarea.focus();
+  }
+  async renderPreview() {
+    this.renderer.setRenderers(this.pluginManager.getRenderers()), this.renderer.setParsers(this.pluginManager.getParsers());
+    const e = await this.renderer.render(this.textarea.value);
+    this.previewContent.innerHTML = e, this.events.emit("render", e);
+  }
+  getMode() {
+    return this.mode;
+  }
+  setMode(e) {
+    this.mode = e, this.root.classList.remove("smdx-mode-split", "smdx-mode-editor", "smdx-mode-preview"), this.root.classList.add(`smdx-mode-${e}`), this.updateStatusBar(), this.events.emit("mode-change", e);
+  }
+  registerPlugin(e) {
+    this.pluginManager.register(e).then(() => {
+      this.toolbarEl.innerHTML = "", this.toolbar.render(this.toolbarEl), this.renderPreview();
+    });
+  }
+  unregisterPlugin(e) {
+    this.pluginManager.unregister(e), this.toolbarEl.innerHTML = "", this.toolbar.render(this.toolbarEl), this.renderPreview();
+  }
+  on(e, t) {
+    this.events.on(e, t);
+  }
+  off(e, t) {
+    this.events.off(e, t);
+  }
+  emit(e, t) {
+    this.events.emit(e, t);
+  }
+  destroy() {
+    this._destroyed || (this._destroyed = !0, this.pluginManager.destroy(), this.toolbar.destroy(), this.events.removeAllListeners(), this.renderTimer && clearTimeout(this.renderTimer), this.historyTimer && clearTimeout(this.historyTimer), this.root.remove());
+  }
+  undo() {
+    const e = this.history.undo();
+    e !== void 0 && (this.textarea.value = e, this.scheduleRender(), this.events.emit("change", e));
+  }
+  redo() {
+    const e = this.history.redo();
+    e !== void 0 && (this.textarea.value = e, this.scheduleRender(), this.events.emit("change", e));
+  }
+  getCurrentLine() {
+    const e = this.textarea.value, t = this.textarea.selectionStart, o = e.lastIndexOf(`
+`, t - 1) + 1, i = e.indexOf(`
+`, t);
+    return e.substring(o, i === -1 ? e.length : i);
+  }
+  getCurrentLineNumber() {
+    const e = this.textarea.value, t = this.textarea.selectionStart;
+    return e.substring(0, t).split(`
+`).length;
+  }
+  replaceCurrentLine(e) {
+    const t = this.textarea.value, o = this.textarea.selectionStart, i = t.lastIndexOf(`
+`, o - 1) + 1;
+    let s = t.indexOf(`
+`, o);
+    s === -1 && (s = t.length), this.textarea.value = t.substring(0, i) + e + t.substring(s), this.textarea.selectionStart = this.textarea.selectionEnd = i + e.length, this.onInput();
+  }
+  insertAt(e, t) {
+    const o = this.textarea.value;
+    this.textarea.value = o.substring(0, e) + t + o.substring(e), this.textarea.selectionStart = this.textarea.selectionEnd = e + t.length, this.onInput();
+  }
+  getWordCount() {
+    const e = this.textarea.value.trim();
+    return e ? e.split(/\s+/).length : 0;
+  }
+  getLineCount() {
+    return this.textarea.value.split(`
+`).length;
+  }
+  // ─── Theme ──────────────────────────────────────
+  applyTheme(e) {
+    for (const [t, o] of Object.entries(e))
+      this.root.style.setProperty(t.startsWith("--") ? t : `--smdx-${t}`, o);
+  }
+}
+const p = {
+  heading: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12h16M4 6v12M20 6v12"/></svg>',
+  h1: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><text x="2" y="17" font-size="14" fill="currentColor" stroke="none" font-weight="bold">H1</text></svg>',
+  h2: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><text x="2" y="17" font-size="14" fill="currentColor" stroke="none" font-weight="bold">H2</text></svg>',
+  h3: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><text x="2" y="17" font-size="14" fill="currentColor" stroke="none" font-weight="bold">H3</text></svg>',
+  h4: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><text x="2" y="17" font-size="14" fill="currentColor" stroke="none" font-weight="bold">H4</text></svg>',
+  h5: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><text x="2" y="17" font-size="14" fill="currentColor" stroke="none" font-weight="bold">H5</text></svg>',
+  h6: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><text x="2" y="17" font-size="14" fill="currentColor" stroke="none" font-weight="bold">H6</text></svg>',
+  bold: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 4h8a4 4 0 014 4 4 4 0 01-4 4H6zM6 12h9a4 4 0 014 4 4 4 0 01-4 4H6z"/></svg>',
+  italic: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>',
+  strikethrough: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4H9a3 3 0 00-3 3v0a3 3 0 003 3h6a3 3 0 013 3v0a3 3 0 01-3 3H8"/><line x1="4" y1="12" x2="20" y2="12"/></svg>',
+  quote: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3z"/></svg>',
+  link: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>',
+  image: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
+  code: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>',
+  codeBlock: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="18" rx="2"/><polyline points="10 8 6 12 10 16"/><polyline points="14 8 18 12 14 16"/></svg>',
+  unorderedList: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="4" cy="6" r="1" fill="currentColor"/><circle cx="4" cy="12" r="1" fill="currentColor"/><circle cx="4" cy="18" r="1" fill="currentColor"/></svg>',
+  orderedList: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><text x="2" y="9" font-size="8" fill="currentColor" stroke="none">1</text><text x="2" y="15" font-size="8" fill="currentColor" stroke="none">2</text><text x="2" y="21" font-size="8" fill="currentColor" stroke="none">3</text></svg>',
+  taskList: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="6" height="6" rx="1"/><path d="M5 8l1 1 2-2"/><line x1="13" y1="8" x2="21" y2="8"/><rect x="3" y="13" width="6" height="6" rx="1"/><line x1="13" y1="16" x2="21" y2="16"/></svg>',
+  table: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>',
+  highlight: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>',
+  admonition: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
+  tab: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="14" rx="2"/><path d="M2 10h20"/><path d="M5 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>',
+  imageBackground: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2"/><rect x="5" y="5" width="14" height="14" rx="1" stroke-dasharray="4,2"/><circle cx="12" cy="12" r="3"/></svg>',
+  imageFrame: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2"/><rect x="5" y="5" width="14" height="14" rx="1"/></svg>',
+  accordion: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="6" rx="1"/><path d="M15 6l-3 3-3-3"/><rect x="3" y="13" width="18" height="6" rx="1"/></svg>',
+  accordionGroup: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="2" width="18" height="5" rx="1"/><rect x="3" y="9" width="18" height="5" rx="1"/><rect x="3" y="16" width="18" height="5" rx="1"/></svg>',
+  multiColumn: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="18" rx="1"/></svg>',
+  card: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="3"/><line x1="7" y1="10" x2="17" y2="10"/><line x1="7" y1="14" x2="13" y2="14"/></svg>',
+  cardGroup: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="8" height="8" rx="2"/><rect x="14" y="3" width="8" height="8" rx="2"/><rect x="2" y="13" width="8" height="8" rx="2"/><rect x="14" y="13" width="8" height="8" rx="2"/></svg>',
+  step: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="5" r="3"/><circle cx="12" cy="12" r="3"/><circle cx="12" cy="19" r="3"/><line x1="12" y1="8" x2="12" y2="9"/><line x1="12" y1="15" x2="12" y2="16"/></svg>',
+  tip: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18h6M10 22h4M12 2a7 7 0 017 7c0 2.38-1.19 4.47-3 5.74V17H8v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 017-7z"/></svg>',
+  container: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" stroke-dasharray="4,2"/></svg>',
+  copyText: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>',
+  tooltip: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="12" rx="2"/><path d="M9 15l3 4 3-4"/></svg>',
+  embedVideo: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><polygon points="10,8 16,12 10,16"/></svg>',
+  embedOthers: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><ellipse cx="12" cy="12" rx="4" ry="10"/></svg>',
+  mermaid: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="8" height="6" rx="1"/><rect x="14" y="16" width="8" height="6" rx="1"/><rect x="14" y="2" width="8" height="6" rx="1"/><path d="M10 5h4M6 8v8l12-4"/></svg>',
+  emoji: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>',
+  formula: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><text x="3" y="17" font-size="14" fill="currentColor" stroke="none" font-style="italic">∑x</text></svg>',
+  insert: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>',
+  scrollSync: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12h16M12 4v16"/></svg>'
+};
+function V() {
+  return {
+    name: "heading",
+    toolbarItems: [
+      {
+        id: "heading",
+        label: "Heading",
+        icon: p.heading,
+        tooltip: "Heading",
+        children: [1, 2, 3, 4, 5, 6].map((r) => ({
+          id: `h${r}`,
+          label: `Heading ${r}`,
+          icon: p[`h${r}`],
+          tooltip: `Heading ${r}`,
+          action: ({ editor: e }) => {
+            const t = "#".repeat(r) + " ", i = e.getCurrentLine().replace(/^#{1,6}\s*/, "");
+            e.replaceCurrentLine(t + i);
+          }
+        })),
+        action: ({ editor: r }) => {
+          const e = r.getCurrentLine(), t = e.match(/^(#{1,6})\s/);
+          if (t) {
+            const o = Math.min(t[1].length + 1, 6), i = e.replace(/^#{1,6}\s*/, "");
+            r.replaceCurrentLine("#".repeat(o) + " " + i);
+          } else
+            r.replaceCurrentLine("# " + e);
+        }
+      }
+    ],
+    shortcuts: [
+      { key: "Ctrl+1", action: ({ editor: r }) => r.replaceCurrentLine("# " + r.getCurrentLine().replace(/^#{1,6}\s*/, "")), description: "Heading 1" },
+      { key: "Ctrl+2", action: ({ editor: r }) => r.replaceCurrentLine("## " + r.getCurrentLine().replace(/^#{1,6}\s*/, "")), description: "Heading 2" },
+      { key: "Ctrl+3", action: ({ editor: r }) => r.replaceCurrentLine("### " + r.getCurrentLine().replace(/^#{1,6}\s*/, "")), description: "Heading 3" }
+    ]
+  };
+}
+function W() {
+  return {
+    name: "bold",
+    toolbarItems: [{
+      id: "bold",
+      label: "Bold",
+      icon: p.bold,
+      tooltip: "Bold",
+      shortcutLabel: "⌘B",
+      action: ({ editor: r }) => r.wrapSelection("**", "**"),
+      isActive: ({ selection: r }) => {
+        const { beforeText: e, afterText: t, text: o } = r;
+        return e.endsWith("**") && t.startsWith("**") || /^\*\*.+\*\*$/.test(o);
+      }
+    }],
+    shortcuts: [
+      { key: "Ctrl+b", action: ({ editor: r }) => r.wrapSelection("**", "**"), description: "Bold" }
+    ]
+  };
+}
+function K() {
+  return {
+    name: "italic",
+    toolbarItems: [{
+      id: "italic",
+      label: "Italic",
+      icon: p.italic,
+      tooltip: "Italic",
+      shortcutLabel: "⌘I",
+      action: ({ editor: r }) => r.wrapSelection("*", "*"),
+      isActive: ({ selection: r }) => {
+        const { beforeText: e, afterText: t, text: o } = r;
+        return e.endsWith("*") && !e.endsWith("**") && t.startsWith("*") && !t.startsWith("**") || /^\*[^*]+\*$/.test(o);
+      }
+    }],
+    shortcuts: [
+      { key: "Ctrl+i", action: ({ editor: r }) => r.wrapSelection("*", "*"), description: "Italic" }
+    ]
+  };
+}
+function U() {
+  return {
+    name: "strikethrough",
+    toolbarItems: [{
+      id: "strikethrough",
+      label: "Strikethrough",
+      icon: p.strikethrough,
+      tooltip: "Strikethrough",
+      shortcutLabel: "⌘⇧X",
+      action: ({ editor: r }) => r.wrapSelection("~~", "~~")
+    }],
+    shortcuts: [
+      { key: "Ctrl+Shift+x", action: ({ editor: r }) => r.wrapSelection("~~", "~~"), description: "Strikethrough" }
+    ]
+  };
+}
+function Y() {
+  return {
+    name: "quote",
+    toolbarItems: [{
+      id: "quote",
+      label: "Quote",
+      icon: p.quote,
+      tooltip: "Blockquote",
+      shortcutLabel: "⌘⇧.",
+      action: ({ editor: r }) => {
+        const e = r.getCurrentLine();
+        e.startsWith("> ") ? r.replaceCurrentLine(e.substring(2)) : r.replaceCurrentLine("> " + e);
+      }
+    }],
+    shortcuts: [
+      {
+        key: "Ctrl+Shift+.",
+        action: ({ editor: r }) => {
+          const e = r.getCurrentLine();
+          r.replaceCurrentLine(e.startsWith("> ") ? e.substring(2) : "> " + e);
+        },
+        description: "Blockquote"
+      }
+    ]
+  };
+}
+function X() {
+  return {
+    name: "link",
+    toolbarItems: [{
+      id: "link",
+      label: "Link",
+      icon: p.link,
+      tooltip: "Insert Link",
+      shortcutLabel: "⌘K",
+      action: ({ editor: r, selection: e }) => {
+        e.text ? r.replaceSelection(`[${e.text}](url)`) : r.insertText("[link text](url)");
+      }
+    }],
+    shortcuts: [
+      {
+        key: "Ctrl+k",
+        action: ({ editor: r, selection: e }) => {
+          e.text ? r.replaceSelection(`[${e.text}](url)`) : r.insertText("[link text](url)");
+        },
+        description: "Insert Link"
+      }
+    ]
+  };
+}
+function J() {
+  return {
+    name: "image",
+    toolbarItems: [{
+      id: "image",
+      label: "Image",
+      icon: p.image,
+      tooltip: "Insert Image",
+      action: ({ editor: r, selection: e }) => {
+        const t = e.text || "alt text";
+        r.replaceSelection(`![${t}](image-url)`);
+      }
+    }]
+  };
+}
+function Z() {
+  return {
+    name: "code",
+    toolbarItems: [
+      {
+        id: "code",
+        label: "Inline Code",
+        icon: p.code,
+        tooltip: "Inline Code",
+        shortcutLabel: "⌘E",
+        action: ({ editor: r }) => r.wrapSelection("`", "`")
+      },
+      {
+        id: "codeBlock",
+        label: "Code Block",
+        icon: p.codeBlock,
+        tooltip: "Code Block",
+        shortcutLabel: "⌘⇧C",
+        action: ({ editor: r, selection: e }) => {
+          r.insertBlock("```language\n" + (e.text || "code here") + "\n```");
+        }
+      }
+    ],
+    shortcuts: [
+      { key: "Ctrl+e", action: ({ editor: r }) => r.wrapSelection("`", "`"), description: "Inline Code" },
+      {
+        key: "Ctrl+Shift+c",
+        action: ({ editor: r, selection: e }) => {
+          r.insertBlock("```language\n" + (e.text || "code here") + "\n```");
+        },
+        description: "Code Block"
+      }
+    ]
+  };
+}
+function Q() {
+  return {
+    name: "unorderedList",
+    toolbarItems: [{
+      id: "unorderedList",
+      label: "Unordered List",
+      icon: p.unorderedList,
+      tooltip: "Bullet List",
+      action: ({ editor: r }) => {
+        const e = r.getCurrentLine();
+        e.match(/^[-*]\s/) ? r.replaceCurrentLine(e.replace(/^[-*]\s/, "")) : r.replaceCurrentLine("- " + e);
+      }
+    }]
+  };
+}
+function ee() {
+  return {
+    name: "orderedList",
+    toolbarItems: [{
+      id: "orderedList",
+      label: "Ordered List",
+      icon: p.orderedList,
+      tooltip: "Numbered List",
+      action: ({ editor: r }) => {
+        const e = r.getCurrentLine();
+        e.match(/^\d+\.\s/) ? r.replaceCurrentLine(e.replace(/^\d+\.\s/, "")) : r.replaceCurrentLine("1. " + e);
+      }
+    }]
+  };
+}
+function te() {
+  return {
+    name: "taskList",
+    toolbarItems: [{
+      id: "taskList",
+      label: "Task List",
+      icon: p.taskList,
+      tooltip: "Task List",
+      action: ({ editor: r }) => {
+        const e = r.getCurrentLine();
+        e.match(/^- \[[ x]\]\s/) ? r.replaceCurrentLine(e.replace(/^- \[[ x]\]\s/, "")) : r.replaceCurrentLine("- [ ] " + e);
+      }
+    }]
+  };
+}
+function re() {
+  return {
+    name: "table",
+    toolbarItems: [{
+      id: "table",
+      label: "Table",
+      icon: p.table,
+      tooltip: "Insert Table",
+      action: ({ editor: r }) => {
+        r.insertBlock(`| Header 1 | Header 2 | Header 3 |
+| -------- | -------- | -------- |
+| Cell 1   | Cell 2   | Cell 3   |
+| Cell 4   | Cell 5   | Cell 6   |`);
+      }
+    }]
+  };
+}
+const oe = [
+  { name: "Yellow", color: "#fef08a", darkColor: "#854d0e", class: "yellow" },
+  { name: "Green", color: "#bbf7d0", darkColor: "#166534", class: "green" },
+  { name: "Blue", color: "#bfdbfe", darkColor: "#1e3a5f", class: "blue" },
+  { name: "Purple", color: "#ddd6fe", darkColor: "#4c1d95", class: "purple" },
+  { name: "Pink", color: "#fbcfe8", darkColor: "#831843", class: "pink" },
+  { name: "Red", color: "#fecaca", darkColor: "#991b1b", class: "red" },
+  { name: "Orange", color: "#fed7aa", darkColor: "#9a3412", class: "orange" },
+  { name: "Cyan", color: "#a5f3fc", darkColor: "#155e75", class: "cyan" }
+];
+function ie() {
+  return {
+    name: "highlight",
+    toolbarItems: [{
+      id: "highlight",
+      label: "Highlight",
+      icon: p.highlight,
+      tooltip: "Highlight Text",
+      children: oe.map((r) => ({
+        id: `highlight-${r.class}`,
+        label: r.name,
+        icon: `<span class="smdx-color-dot" style="background:${r.color}"></span>`,
+        tooltip: `${r.name} Highlight`,
+        action: ({ editor: e }) => {
+          e.wrapSelection(`<Highlight color="${r.class}">`, "</Highlight>");
+        }
+      })),
+      action: ({ editor: r }) => {
+        r.wrapSelection('<Highlight color="yellow">', "</Highlight>");
+      }
+    }],
+    renderers: [{
+      name: "highlight",
+      pattern: /<Highlight\s+color="([^"]+)">([\s\S]*?)<\/Highlight>/g,
+      render: (r) => {
+        const e = r.match(/<Highlight\s+color="([^"]+)">([\s\S]*?)<\/Highlight>/);
+        return e ? `<mark class="smdx-highlight smdx-highlight-${e[1]}">${e[2]}</mark>` : r;
+      }
+    }],
+    styles: `
+      .smdx-highlight { padding: 2px 4px; border-radius: 3px; }
+      .smdx-highlight-yellow { background-color: #fef08a; }
+      .smdx-highlight-green { background-color: #bbf7d0; }
+      .smdx-highlight-blue { background-color: #bfdbfe; }
+      .smdx-highlight-purple { background-color: #ddd6fe; }
+      .smdx-highlight-pink { background-color: #fbcfe8; }
+      .smdx-highlight-red { background-color: #fecaca; }
+      .smdx-highlight-orange { background-color: #fed7aa; }
+      .smdx-highlight-cyan { background-color: #a5f3fc; }
+      .smdx-dark .smdx-highlight-yellow { background-color: #854d0e; color: #fef08a; }
+      .smdx-dark .smdx-highlight-green { background-color: #166534; color: #bbf7d0; }
+      .smdx-dark .smdx-highlight-blue { background-color: #1e3a5f; color: #bfdbfe; }
+      .smdx-dark .smdx-highlight-purple { background-color: #4c1d95; color: #ddd6fe; }
+      .smdx-dark .smdx-highlight-pink { background-color: #831843; color: #fbcfe8; }
+      .smdx-dark .smdx-highlight-red { background-color: #991b1b; color: #fecaca; }
+      .smdx-dark .smdx-highlight-orange { background-color: #9a3412; color: #fed7aa; }
+      .smdx-dark .smdx-highlight-cyan { background-color: #155e75; color: #a5f3fc; }
+      .smdx-color-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); vertical-align: middle; margin-right: 6px; }
+    `
+  };
+}
+const E = [
+  {
+    type: "tip",
+    label: "TIP",
+    color: "#10b981",
+    bg: "#ecfdf5",
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#10b981"/><path d="M9 12l2 2 4-4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+  },
+  {
+    type: "warning",
+    label: "WARNING",
+    color: "#f59e0b",
+    bg: "#fffbeb",
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" fill="#f59e0b"/><path d="M12 9v4M12 17h.01" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>'
+  },
+  {
+    type: "caution",
+    label: "CAUTION",
+    color: "#f97316",
+    bg: "#fff7ed",
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#f97316"/><path d="M12 8v4M12 16h.01" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>'
+  },
+  {
+    type: "danger",
+    label: "DANGER",
+    color: "#ef4444",
+    bg: "#fef2f2",
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#ef4444"/><path d="M15 9l-6 6M9 9l6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>'
+  },
+  {
+    type: "check",
+    label: "CHECK",
+    color: "#22c55e",
+    bg: "#f0fdf4",
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#22c55e"/><path d="M8 12l3 3 5-5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+  },
+  {
+    type: "info",
+    label: "INFO",
+    color: "#3b82f6",
+    bg: "#eff6ff",
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#3b82f6"/><path d="M12 16v-4M12 8h.01" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>'
+  },
+  {
+    type: "note",
+    label: "NOTE",
+    color: "#8b5cf6",
+    bg: "#f5f3ff",
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="3" fill="#8b5cf6"/><path d="M8 10h8M8 14h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>'
+  }
+];
+function se() {
+  return {
+    name: "admonition",
+    toolbarItems: [{
+      id: "admonition",
+      label: "Admonition",
+      icon: p.admonition,
+      tooltip: "Admonition / Callout",
+      children: E.map((r) => ({
+        id: `admonition-${r.type}`,
+        label: r.label,
+        icon: r.icon,
+        tooltip: `${r.label} callout`,
+        action: ({ editor: e }) => {
+          e.insertBlock(`:::${r.type}
+${r.label}: Your message here
+:::`);
+        }
+      })),
+      action: ({ editor: r }) => {
+        r.insertBlock(`:::info
+INFO: Your message here
+:::`);
+      }
+    }],
+    renderers: [{
+      name: "admonition",
+      pattern: /:::(tip|warning|caution|danger|check|info|note)(?:\[([^\]]*)\])?\n([\s\S]*?):::/g,
+      render: (r) => {
+        const e = r.match(/:::(tip|warning|caution|danger|check|info|note)(?:\[([^\]]*)\])?\n([\s\S]*?):::/);
+        if (!e) return r;
+        const t = E.find((i) => i.type === e[1]), o = e[2] || t.label;
+        return `<div class="smdx-admonition smdx-admonition-${e[1]}"><div class="smdx-admonition-title"><span class="smdx-admonition-icon">${t.icon}</span>${o}</div><div class="smdx-admonition-content">${e[3]}</div></div>`;
+      },
+      priority: 10
+    }],
+    styles: `
+      .smdx-admonition { padding: 14px 16px; border-radius: 6px; margin: 12px 0; border-left: 4px solid; }
+      .smdx-admonition-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 6px; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.02em; }
+      .smdx-admonition-icon { display: flex; align-items: center; flex-shrink: 0; }
+      .smdx-admonition-icon svg { display: block; }
+      .smdx-admonition-content { font-size: 0.95em; line-height: 1.6; color: var(--smdx-text, #1e293b); }
+      .smdx-admonition-content p { margin: 4px 0; }
+      .smdx-admonition-tip { border-left-color: #10b981; background: #ecfdf5; }
+      .smdx-admonition-tip .smdx-admonition-title { color: #10b981; }
+      .smdx-admonition-warning { border-left-color: #f59e0b; background: #fffbeb; }
+      .smdx-admonition-warning .smdx-admonition-title { color: #f59e0b; }
+      .smdx-admonition-caution { border-left-color: #f97316; background: #fff7ed; }
+      .smdx-admonition-caution .smdx-admonition-title { color: #f97316; }
+      .smdx-admonition-danger { border-left-color: #ef4444; background: #fef2f2; }
+      .smdx-admonition-danger .smdx-admonition-title { color: #ef4444; }
+      .smdx-admonition-check { border-left-color: #22c55e; background: #f0fdf4; }
+      .smdx-admonition-check .smdx-admonition-title { color: #22c55e; }
+      .smdx-admonition-info { border-left-color: #3b82f6; background: #eff6ff; }
+      .smdx-admonition-info .smdx-admonition-title { color: #3b82f6; }
+      .smdx-admonition-note { border-left-color: #8b5cf6; background: #f5f3ff; }
+      .smdx-admonition-note .smdx-admonition-title { color: #8b5cf6; }
+      .smdx-dark .smdx-admonition-tip { background: #052e16; }
+      .smdx-dark .smdx-admonition-warning { background: #451a03; }
+      .smdx-dark .smdx-admonition-caution { background: #431407; }
+      .smdx-dark .smdx-admonition-danger { background: #450a0a; }
+      .smdx-dark .smdx-admonition-check { background: #052e16; }
+      .smdx-dark .smdx-admonition-info { background: #172554; }
+      .smdx-dark .smdx-admonition-note { background: #2e1065; }
+      .smdx-dark .smdx-admonition-content { color: var(--smdx-text, #e2e8f0); }
+    `
+  };
+}
+function ne(r) {
+  const e = r.split(`
+`), t = e.filter((i) => i.trim().length > 0), o = t.length > 0 ? Math.min(...t.map((i) => i.match(/^\s*/)[0].length)) : 0;
+  return o > 0 ? e.map((i) => i.slice(o)).join(`
+`).trim() : r.trim();
+}
+function ae() {
+  return {
+    name: "tab",
+    toolbarItems: [{
+      id: "tab",
+      label: "Tab",
+      icon: p.tab,
+      tooltip: "Insert Tabs",
+      action: ({ editor: r }) => {
+        r.insertBlock(
+          `<Tabs>
+  <Tab title="Tab 1">
+    Content for tab 1
+  </Tab>
+  <Tab title="Tab 2">
+    Content for tab 2
+  </Tab>
+</Tabs>`
+        );
+      }
+    }],
+    renderers: [{
+      name: "tabs",
+      pattern: /<Tabs>([\s\S]*?)<\/Tabs>/g,
+      render: (r) => {
+        const e = /<Tab\s+title="([^"]*)">([\s\S]*?)<\/Tab>/g;
+        let t = [], o;
+        for (; (o = e.exec(r)) !== null; )
+          t.push({ title: o[1], content: ne(o[2]) });
+        if (t.length === 0) return r;
+        let s = `<div class="smdx-tabs" data-tab-id="${"tab-" + Math.random().toString(36).substring(2, 8)}"><div class="smdx-tabs-header">`;
+        return t.forEach((n, a) => {
+          s += `<button class="smdx-tab-btn${a === 0 ? " smdx-active" : ""}" data-smdx-tab-btn="true" data-tab-index="${a}">${n.title}</button>`;
+        }), s += "</div>", t.forEach((n, a) => {
+          s += `<div class="smdx-tab-panel" style="display:${a === 0 ? "block" : "none"}">${n.content}</div>`;
+        }), s += "</div>", s;
+      },
+      priority: 15
+    }],
+    styles: `
+      .smdx-tabs { border: 1px solid var(--smdx-border, #e2e8f0); border-radius: 8px; overflow: hidden; margin: 12px 0; }
+      .smdx-tabs-header { display: flex; background: var(--smdx-bg-muted, #f8fafc); border-bottom: 1px solid var(--smdx-border, #e2e8f0); }
+      .smdx-tab-btn { padding: 8px 16px; border: none; background: none; cursor: pointer; font-size: 0.9em; color: var(--smdx-text-muted, #64748b); border-bottom: 2px solid transparent; transition: all 0.15s; }
+      .smdx-tab-btn:hover { color: var(--smdx-text, #1e293b); }
+      .smdx-tab-btn.smdx-active { color: var(--smdx-primary, #6366f1); border-bottom-color: var(--smdx-primary, #6366f1); background: var(--smdx-bg, #fff); }
+      .smdx-tab-panel { padding: 16px; }
+    `
+  };
+}
+function de() {
+  return {
+    name: "imageBackground",
+    toolbarItems: [{
+      id: "imageBackground",
+      label: "Image Background",
+      icon: p.imageBackground,
+      tooltip: "Image with Background",
+      action: ({ editor: r }) => {
+        r.insertBlock(`<ImageBackground src="image-url" alt="description" background="#f0f0f0">
+  Content overlaying the image
+</ImageBackground>`);
+      }
+    }],
+    renderers: [{
+      name: "imageBackground",
+      pattern: /<ImageBackground\s+src="([^"]*)"(?:\s+alt="([^"]*)")?(?:\s+background="([^"]*)")?\s*>([\s\S]*?)<\/ImageBackground>/g,
+      render: (r) => {
+        const e = r.match(/<ImageBackground\s+src="([^"]*)"(?:\s+alt="([^"]*)")?(?:\s+background="([^"]*)")?\s*>([\s\S]*?)<\/ImageBackground>/);
+        return e ? `<div class="smdx-image-bg" style="${e[3] ? `background-image:url(${e[1]});background-color:${e[3]}` : `background-image:url(${e[1]})`}">
+          <div class="smdx-image-bg-overlay">${e[4].trim()}</div>
+        </div>` : r;
+      }
+    }],
+    styles: `
+      .smdx-image-bg { background-size: cover; background-position: center; border-radius: 8px; overflow: hidden; min-height: 200px; display: flex; align-items: center; justify-content: center; margin: 12px 0; background-color: var(--smdx-bg-muted, #f0f0f0); border: 1px solid var(--smdx-border, #e2e8f0); }
+      .smdx-image-bg-overlay { background: rgba(0,0,0,0.5); color: white; padding: 24px; width: 100%; text-align: center; }
+      .smdx-dark .smdx-image-bg-overlay { background: rgba(0,0,0,0.6); }
+    `
+  };
+}
+function le() {
+  return {
+    name: "imageFrame",
+    toolbarItems: [{
+      id: "imageFrame",
+      label: "Image Frame",
+      icon: p.imageFrame,
+      tooltip: "Image in Frame",
+      action: ({ editor: r }) => {
+        r.insertBlock('<ImageFrame src="image-url" alt="description" caption="Image caption" />');
+      }
+    }],
+    renderers: [{
+      name: "imageFrame",
+      pattern: /<ImageFrame\s+src="([^"]*)"(?:\s+alt="([^"]*)")?(?:\s+caption="([^"]*)")?\s*\/>/g,
+      render: (r) => {
+        const e = r.match(/<ImageFrame\s+src="([^"]*)"(?:\s+alt="([^"]*)")?(?:\s+caption="([^"]*)")?\s*\/>/);
+        return e ? `<figure class="smdx-image-frame">
+          <img src="${e[1]}" alt="${e[2] || ""}" />
+          ${e[3] ? `<figcaption>${e[3]}</figcaption>` : ""}
+        </figure>` : r;
+      }
+    }],
+    styles: `
+      .smdx-image-frame { border: 1px solid var(--smdx-border, #e2e8f0); border-radius: 8px; overflow: hidden; margin: 12px 0; padding: 8px; background: var(--smdx-bg-muted, #f8fafc); }
+      .smdx-image-frame img { width: 100%; border-radius: 4px; display: block; }
+      .smdx-image-frame figcaption { text-align: center; padding: 8px 0 4px; font-size: 0.85em; color: var(--smdx-text-muted, #64748b); }
+    `
+  };
+}
+function M(r) {
+  const e = r.split(`
+`), t = e.filter((i) => i.trim().length > 0), o = t.length > 0 ? Math.min(...t.map((i) => i.match(/^\s*/)[0].length)) : 0;
+  return o > 0 ? e.map((i) => i.slice(o)).join(`
+`).trim() : r.trim();
+}
+function ce() {
+  return {
+    name: "accordion",
+    toolbarItems: [{
+      id: "accordion",
+      label: "Accordion",
+      icon: p.accordion,
+      tooltip: "Insert Accordion",
+      action: ({ editor: r }) => {
+        r.insertBlock(
+          `<Accordion title="Accordion Title" defaultOpen>
+  Your content here. You can include any markdown or components.
+</Accordion>`
+        );
+      }
+    }],
+    renderers: [{
+      name: "accordion",
+      pattern: /<Accordion\s+title="([^"]*)"(\s+defaultOpen)?\s*>([\s\S]*?)<\/Accordion>/g,
+      render: (r) => {
+        const e = r.match(/<Accordion\s+title="([^"]*)"(\s+defaultOpen)?\s*>([\s\S]*?)<\/Accordion>/);
+        return e ? `<details class="smdx-accordion"${e[2] ? " open" : ""}><summary class="smdx-accordion-header"><span class="smdx-accordion-arrow"></span><span class="smdx-accordion-title">${e[1]}</span></summary><div class="smdx-accordion-content">${M(e[3])}</div></details>` : r;
+      },
+      priority: 12
+    }],
+    styles: `
+      .smdx-accordion { border: 1px solid var(--smdx-border, #e2e8f0); border-radius: 8px; margin: 8px 0; overflow: hidden; background: var(--smdx-bg, #fff); }
+      .smdx-accordion-header { padding: 14px 18px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95em; user-select: none; list-style: none; color: var(--smdx-text, #1e293b); }
+      .smdx-accordion-header::-webkit-details-marker { display: none; }
+      .smdx-accordion-arrow { display: inline-block; width: 0; height: 0; border-left: 5px solid var(--smdx-text-muted, #64748b); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.2s; flex-shrink: 0; }
+      details[open] > .smdx-accordion-header .smdx-accordion-arrow { transform: rotate(90deg); }
+      .smdx-accordion-title { flex: 1; }
+      .smdx-accordion-content { padding: 14px 18px 18px 18px; border-top: 1px solid var(--smdx-border, #e2e8f0); }
+      .smdx-accordion-content p { margin: 6px 0; }
+      .smdx-accordion-content > :last-child { margin-bottom: 0; }
+    `
+  };
+}
+function me() {
+  return {
+    name: "accordionGroup",
+    dependencies: ["accordion"],
+    toolbarItems: [{
+      id: "accordionGroup",
+      label: "Accordion Group",
+      icon: p.accordionGroup,
+      tooltip: "Insert Accordion Group",
+      action: ({ editor: r }) => {
+        r.insertBlock(
+          `<AccordionGroup>
+  <Accordion title="Section 1" defaultOpen>
+    Content for section 1
+  </Accordion>
+  <Accordion title="Section 2">
+    Content for section 2
+  </Accordion>
+  <Accordion title="Section 3">
+    Content for section 3
+  </Accordion>
+</AccordionGroup>`
+        );
+      }
+    }],
+    renderers: [{
+      name: "accordionGroup",
+      pattern: /<AccordionGroup>([\s\S]*?)<\/AccordionGroup>/g,
+      render: (r) => {
+        const e = r.match(/<AccordionGroup>([\s\S]*?)<\/AccordionGroup>/);
+        return e ? `<div class="smdx-accordion-group">${e[1]}</div>` : r;
+      },
+      priority: 14
+    }],
+    styles: `
+      .smdx-accordion-group { display: flex; flex-direction: column; gap: 0; margin: 12px 0; }
+      .smdx-accordion-group > :not(.smdx-accordion) { display: none; }
+      .smdx-accordion-group .smdx-accordion { margin: 0; border-radius: 0; border-bottom: none; }
+      .smdx-accordion-group .smdx-accordion:first-of-type { border-radius: 8px 8px 0 0; }
+      .smdx-accordion-group .smdx-accordion:last-of-type { border-radius: 0 0 8px 8px; border-bottom: 1px solid var(--smdx-border, #e2e8f0); }
+    `
+  };
+}
+function pe() {
+  return {
+    name: "multiColumn",
+    toolbarItems: [{
+      id: "multiColumn",
+      label: "Columns",
+      icon: p.multiColumn,
+      tooltip: "Multiple Columns",
+      children: [2, 3, 4, 5].map((r) => ({
+        id: `columns-${r}`,
+        label: `${r} Columns`,
+        tooltip: `${r} column layout`,
+        action: ({ editor: e }) => {
+          const t = Array.from(
+            { length: r },
+            (o, i) => `  <Column>
+    Column ${i + 1} content
+  </Column>`
+          ).join(`
+`);
+          e.insertBlock(`<Columns count="${r}">
+${t}
+</Columns>`);
+        }
+      })),
+      action: ({ editor: r }) => {
+        r.insertBlock(
+          `<Columns count="2">
+  <Column>
+    Column 1 content
+  </Column>
+  <Column>
+    Column 2 content
+  </Column>
+</Columns>`
+        );
+      }
+    }],
+    renderers: [{
+      name: "columns",
+      pattern: /<Columns\s+count="(\d+)">([\s\S]*?)<\/Columns>/g,
+      render: (r) => {
+        const e = r.match(/<Columns\s+count="(\d+)">([\s\S]*?)<\/Columns>/);
+        if (!e) return r;
+        const t = parseInt(e[1]), o = /<Column>([\s\S]*?)<\/Column>/g;
+        let i = [], s;
+        for (; (s = o.exec(e[2])) !== null; )
+          i.push(M(s[1]));
+        let n = `<div class="smdx-columns" style="grid-template-columns:repeat(${t},1fr)">`;
+        for (const a of i)
+          n += `<div class="smdx-column">${a}</div>`;
+        return n += "</div>", n;
+      },
+      priority: 13
+    }],
+    styles: `
+      .smdx-columns { display: grid; gap: 16px; margin: 12px 0; }
+      .smdx-column { padding: 12px; border: 1px solid var(--smdx-border, #e2e8f0); border-radius: 6px; }
+    `
+  };
+}
+function he(r) {
+  const e = r.split(`
+`), t = e.filter((i) => i.trim().length > 0), o = t.length > 0 ? Math.min(...t.map((i) => i.match(/^\s*/)[0].length)) : 0;
+  return o > 0 ? e.map((i) => i.slice(o)).join(`
+`).trim() : r.trim();
+}
+function xe() {
+  return {
+    name: "card",
+    toolbarItems: [{
+      id: "card",
+      label: "Card",
+      icon: p.card,
+      tooltip: "Insert Card",
+      action: ({ editor: r }) => {
+        r.insertBlock(
+          `<Card title="Card Title" icon="📄" href="/link">
+  Card description or content goes here.
+</Card>`
+        );
+      }
+    }],
+    renderers: [{
+      name: "card",
+      pattern: /<Card\s+title="([^"]*)"(?:\s+icon="([^"]*)")?(?:\s+href="([^"]*)")?\s*>([\s\S]*?)<\/Card>/g,
+      render: (r) => {
+        const e = r.match(/<Card\s+title="([^"]*)"(?:\s+icon="([^"]*)")?(?:\s+href="([^"]*)")?\s*>([\s\S]*?)<\/Card>/);
+        if (!e) return r;
+        const t = e[3] ? "a" : "div", o = e[3] ? ` href="${e[3]}" target="_blank" rel="noopener noreferrer"` : "", i = e[2] ? `<span class="smdx-card-icon">${e[2]}</span>` : "", s = e[3] ? '<svg class="smdx-card-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>' : "";
+        return `<${t} class="smdx-card"${o}><div class="smdx-card-header">${i}<span class="smdx-card-title">${e[1]}</span>${s}</div><div class="smdx-card-content">${he(e[4])}</div></${t}>`;
+      },
+      priority: 11
+    }],
+    styles: `
+      .smdx-card { display: block; border: 1px solid var(--smdx-border, #e2e8f0); border-radius: 10px; padding: 16px 20px; margin: 8px 0; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; background: var(--smdx-bg, #fff); }
+      a.smdx-card { cursor: pointer; }
+      a.smdx-card:hover { border-color: var(--smdx-primary, #6366f1); box-shadow: 0 2px 12px rgba(99,102,241,0.1); background: var(--smdx-bg-muted, #f8fafc); }
+      .smdx-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
+      .smdx-card-icon { font-size: 1.25em; flex-shrink: 0; }
+      .smdx-card-title { font-weight: 700; font-size: 1em; color: var(--smdx-text, #1e293b); }
+      .smdx-card-arrow { margin-left: auto; flex-shrink: 0; color: var(--smdx-text-muted, #94a3b8); transition: transform 0.2s, color 0.2s; }
+      a.smdx-card:hover .smdx-card-arrow { transform: translateX(2px); color: var(--smdx-primary, #6366f1); }
+      .smdx-card-content { font-size: 0.9em; color: var(--smdx-text-muted, #64748b); line-height: 1.5; }
+    `
+  };
+}
+function ue() {
+  return {
+    name: "cardGroup",
+    dependencies: ["card"],
+    toolbarItems: [{
+      id: "cardGroup",
+      label: "Card Group",
+      icon: p.cardGroup,
+      tooltip: "Insert Card Group",
+      action: ({ editor: r }) => {
+        r.insertBlock(
+          `<CardGroup cols="2">
+  <Card title="Card 1" icon="📄">
+    Description for card 1
+  </Card>
+  <Card title="Card 2" icon="🔧">
+    Description for card 2
+  </Card>
+  <Card title="Card 3" icon="🚀">
+    Description for card 3
+  </Card>
+  <Card title="Card 4" icon="💡">
+    Description for card 4
+  </Card>
+</CardGroup>`
+        );
+      }
+    }],
+    renderers: [{
+      name: "cardGroup",
+      pattern: /<CardGroup(?:\s+cols="(\d+)")?\s*>([\s\S]*?)<\/CardGroup>/g,
+      render: (r) => {
+        const e = r.match(/<CardGroup(?:\s+cols="(\d+)")?\s*>([\s\S]*?)<\/CardGroup>/);
+        return e ? `<div class="smdx-card-group" style="grid-template-columns:repeat(${e[1] || "2"},1fr)">${e[2]}</div>` : r;
+      },
+      priority: 13
+    }],
+    styles: `
+      .smdx-card-group { display: grid; gap: 12px; margin: 12px 0; }
+      .smdx-card-group .smdx-card { margin: 0; }
+    `
+  };
+}
+function B(r) {
+  const e = r.split(`
+`), t = e.filter((i) => i.trim().length > 0), o = t.length > 0 ? Math.min(...t.map((i) => i.match(/^\s*/)[0].length)) : 0;
+  return o > 0 ? e.map((i) => i.slice(o)).join(`
+`).trim() : r.trim();
+}
+function ge() {
+  return {
+    name: "step",
+    toolbarItems: [{
+      id: "steps",
+      label: "Steps",
+      icon: p.step,
+      tooltip: "Insert Steps",
+      action: ({ editor: r }) => {
+        r.insertBlock(
+          `<Steps>
+  <Step title="First Step">
+    These are instructions or content that only pertain to the first step.
+  </Step>
+  <Step title="Second Step">
+    These are instructions or content that only pertain to the second step.
+  </Step>
+  <Step title="Third Step">
+    These are instructions or content that only pertain to the third step.
+  </Step>
+</Steps>`
+        );
+      }
+    }],
+    renderers: [{
+      name: "steps",
+      pattern: /<Steps>([\s\S]*?)<\/Steps>/g,
+      render: (r) => {
+        const e = r.match(/<Steps>([\s\S]*?)<\/Steps>/);
+        if (!e) return r;
+        const t = /<Step\s+title="([^"]*)">([\s\S]*?)<\/Step>/g;
+        let o = [], i;
+        for (; (i = t.exec(e[1])) !== null; )
+          o.push({ title: i[1], content: B(i[2]) });
+        let s = '<div class="smdx-steps">';
+        return o.forEach((n, a) => {
+          const d = a === o.length - 1;
+          s += `<div class="smdx-step"><div class="smdx-step-indicator"><div class="smdx-step-number">${a + 1}</div>${d ? "" : '<div class="smdx-step-line"></div>'}</div><div class="smdx-step-content"><div class="smdx-step-title">${n.title}</div><div class="smdx-step-body">${n.content}</div></div></div>`;
+        }), s += "</div>", s;
+      },
+      priority: 15
+    }],
+    styles: `
+      .smdx-steps { margin: 20px 0; }
+      .smdx-step { display: flex; gap: 20px; position: relative; }
+      .smdx-step-indicator { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; min-width: 34px; position: relative; }
+      .smdx-step-number { width: 34px; height: 34px; min-width: 34px; min-height: 34px; border-radius: 50%; background: var(--smdx-bg-muted, #f1f5f9); color: var(--smdx-text-muted, #475569); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85em; border: 1px solid var(--smdx-border, #e2e8f0); position: relative; z-index: 1; box-sizing: border-box; }
+      .smdx-step-line { width: 2px; flex: 1; background: var(--smdx-border, #e2e8f0); min-height: 100%; }
+      .smdx-step-content { flex: 1; padding-bottom: 32px; min-width: 0; }
+      .smdx-step:last-child .smdx-step-content { padding-bottom: 0; }
+      .smdx-step-title { font-weight: 700; font-size: 1.05em; color: var(--smdx-text, #1e293b); margin-bottom: 8px; }
+      .smdx-step-body { color: var(--smdx-text-muted, #64748b); font-size: 0.95em; line-height: 1.7; }
+    `
+  };
+}
+const T = [
+  {
+    type: "good",
+    label: "Good",
+    color: "#22c55e",
+    bg: "#f0fdf4",
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#22c55e"/><path d="M8 12l3 3 5-5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+  },
+  {
+    type: "bad",
+    label: "Bad",
+    color: "#ef4444",
+    bg: "#fef2f2",
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#ef4444"/><path d="M15 9l-6 6M9 9l6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>'
+  },
+  {
+    type: "info",
+    label: "Info",
+    color: "#3b82f6",
+    bg: "#eff6ff",
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#3b82f6"/><path d="M12 16v-4M12 8h.01" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>'
+  }
+];
+function be() {
+  return {
+    name: "tip",
+    toolbarItems: [{
+      id: "tip",
+      label: "Tip",
+      icon: p.tip,
+      tooltip: "Insert Tip",
+      children: T.map((r) => ({
+        id: `tip-${r.type}`,
+        label: r.label,
+        icon: r.icon,
+        tooltip: `${r.label} tip`,
+        action: ({ editor: e }) => {
+          e.insertBlock(`<Tip${r.type.charAt(0).toUpperCase() + r.type.slice(1)}>Your tip message here</Tip${r.type.charAt(0).toUpperCase() + r.type.slice(1)}>`);
+        }
+      })),
+      action: ({ editor: r }) => {
+        r.insertBlock("<TipGood>Your tip message here</TipGood>");
+      }
+    }],
+    renderers: T.map((r) => ({
+      name: `tip-${r.type}`,
+      pattern: new RegExp(`<Tip${r.type.charAt(0).toUpperCase() + r.type.slice(1)}>([\\s\\S]*?)<\\/Tip${r.type.charAt(0).toUpperCase() + r.type.slice(1)}>`, "g"),
+      render: (e) => {
+        const t = `Tip${r.type.charAt(0).toUpperCase() + r.type.slice(1)}`, o = new RegExp(`<${t}>([\\s\\S]*?)<\\/${t}>`), i = e.match(o);
+        return i ? `<div class="smdx-tip smdx-tip-${r.type}"><span class="smdx-tip-icon">${r.icon}</span><span class="smdx-tip-text">${i[1].trim()}</span></div>` : e;
+      },
+      priority: 10
+    })),
+    styles: `
+      .smdx-tip { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 6px; margin: 8px 0; font-size: 0.95em; border-left: 4px solid; }
+      .smdx-tip-icon { flex-shrink: 0; display: flex; align-items: center; margin-top: 1px; }
+      .smdx-tip-icon svg { display: block; }
+      .smdx-tip-text { flex: 1; line-height: 1.5; }
+      .smdx-tip-good { border-left-color: #22c55e; background: #f0fdf4; }
+      .smdx-tip-bad { border-left-color: #ef4444; background: #fef2f2; }
+      .smdx-tip-info { border-left-color: #3b82f6; background: #eff6ff; }
+      .smdx-dark .smdx-tip-good { background: #052e16; }
+      .smdx-dark .smdx-tip-bad { background: #450a0a; }
+      .smdx-dark .smdx-tip-info { background: #172554; }
+    `
+  };
+}
+function fe() {
+  return {
+    name: "container",
+    toolbarItems: [{
+      id: "container",
+      label: "Container",
+      icon: p.container,
+      tooltip: "Insert Container",
+      action: ({ editor: r }) => {
+        r.insertBlock(
+          `<Container>
+  Content inside a styled container.
+</Container>`
+        );
+      }
+    }],
+    renderers: [{
+      name: "container",
+      pattern: /<Container(?:\s+title="([^"]*)")?>([\s\S]*?)<\/Container>/g,
+      render: (r) => {
+        const e = r.match(/<Container(?:\s+title="([^"]*)")?>([\s\S]*?)<\/Container>/);
+        return e ? `<div class="smdx-container">${e[1] ? `<div class="smdx-container-title">${e[1]}</div>` : ""}<div class="smdx-container-content">${B(e[2])}</div></div>` : r;
+      }
+    }],
+    styles: `
+      .smdx-container { border: 1px solid var(--smdx-border, #e2e8f0); border-radius: 8px; padding: 16px; margin: 12px 0; background: var(--smdx-bg-muted, #f8fafc); }
+      .smdx-container-title { font-weight: 600; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--smdx-border, #e2e8f0); }
+    `
+  };
+}
+function ve() {
+  return {
+    name: "copyText",
+    toolbarItems: [{
+      id: "copyText",
+      label: "Copy Text",
+      icon: p.copyText,
+      tooltip: "Copyable Text Block",
+      action: ({ editor: r }) => {
+        r.insertBlock("<CopyText>Text that users can click to copy</CopyText>");
+      }
+    }],
+    renderers: [{
+      name: "copyText",
+      pattern: /<CopyText>([\s\S]*?)<\/CopyText>/g,
+      render: (r) => {
+        const e = r.match(/<CopyText>([\s\S]*?)<\/CopyText>/);
+        if (!e) return r;
+        const t = e[1].trim();
+        return `<div class="smdx-copy-text" onclick="navigator.clipboard.writeText(this.dataset.text);this.classList.add('smdx-copied');setTimeout(()=>this.classList.remove('smdx-copied'),2000)" data-text="${t.replace(/"/g, "&quot;")}"><code class="smdx-copy-text-content">${t}</code><button class="smdx-copy-text-btn" type="button"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg></button></div>`;
+      }
+    }],
+    styles: `
+      .smdx-copy-text { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--smdx-bg-muted, #f1f5f9); border: 1px solid var(--smdx-border, #e2e8f0); border-radius: 8px; cursor: pointer; transition: all 0.15s; font-size: 0.9em; margin: 6px 0; }
+      .smdx-copy-text:hover { border-color: var(--smdx-primary, #6366f1); }
+      .smdx-copy-text.smdx-copied { border-color: #22c55e; background: #f0fdf4; }
+      .smdx-copy-text-content { font-family: var(--smdx-font-mono, monospace); color: var(--smdx-text, #1e293b); flex: 1; }
+      .smdx-copy-text-btn { display: flex; align-items: center; justify-content: center; border: none; background: none; padding: 2px; cursor: pointer; color: var(--smdx-text-muted, #94a3b8); flex-shrink: 0; transition: color 0.15s; }
+      .smdx-copy-text:hover .smdx-copy-text-btn { color: var(--smdx-text, #1e293b); }
+      .smdx-copy-text.smdx-copied .smdx-copy-text-btn { color: #22c55e; }
+      .smdx-dark .smdx-copy-text.smdx-copied { background: #052e16; border-color: #166534; }
+    `
+  };
+}
+function ke() {
+  return {
+    name: "tooltip",
+    toolbarItems: [{
+      id: "tooltip",
+      label: "Tooltip",
+      icon: p.tooltip,
+      tooltip: "Insert Tooltip",
+      action: ({ editor: r }) => {
+        const t = r.getSelection().text || "hover text";
+        r.replaceSelection(`<Tooltip tip="Tooltip content">${t}</Tooltip>`);
+      }
+    }],
+    renderers: [{
+      name: "tooltip",
+      pattern: /<Tooltip\s+tip="([^"]*)">([\s\S]*?)<\/Tooltip>/g,
+      render: (r) => {
+        const e = r.match(/<Tooltip\s+tip="([^"]*)">([\s\S]*?)<\/Tooltip>/);
+        return e ? `<span class="smdx-tooltip-wrapper"><span class="smdx-tooltip-trigger">${e[2]}<span class="smdx-tooltip-popup">${e[1]}</span></span></span>` : r;
+      }
+    }],
+    styles: `
+      .smdx-tooltip-wrapper { position: relative; display: inline; }
+      .smdx-tooltip-trigger { position: relative; border-bottom: 1px dashed var(--smdx-primary, #6366f1); cursor: help; text-decoration: none; }
+      .smdx-tooltip-popup { visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 6px 12px; background: #1e293b; color: #fff; border-radius: 6px; font-size: 0.8em; white-space: nowrap; transition: opacity 0.15s, visibility 0.15s; z-index: 1000; pointer-events: none; }
+      .smdx-tooltip-popup::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: #1e293b; }
+      .smdx-tooltip-trigger:hover .smdx-tooltip-popup { visibility: visible; opacity: 1; }
+      .smdx-dark .smdx-tooltip-popup { background: #e2e8f0; color: #1e293b; }
+      .smdx-dark .smdx-tooltip-popup::after { border-top-color: #e2e8f0; }
+    `
+  };
+}
+function ye() {
+  return {
+    name: "embedVideo",
+    toolbarItems: [{
+      id: "embedVideo",
+      label: "Embed Video",
+      icon: p.embedVideo,
+      tooltip: "Embed Video",
+      children: [
+        {
+          id: "embed-youtube",
+          label: "YouTube",
+          tooltip: "Embed YouTube video",
+          action: ({ editor: r }) => {
+            r.insertBlock('<EmbedVideo type="youtube" src="https://www.youtube.com/watch?v=VIDEO_ID" />');
+          }
+        },
+        {
+          id: "embed-video-file",
+          label: "Video File",
+          tooltip: "Embed video file",
+          action: ({ editor: r }) => {
+            r.insertBlock('<EmbedVideo type="file" src="video.mp4" />');
+          }
+        }
+      ],
+      action: ({ editor: r }) => {
+        r.insertBlock('<EmbedVideo type="youtube" src="https://www.youtube.com/watch?v=VIDEO_ID" />');
+      }
+    }],
+    renderers: [{
+      name: "embedVideo",
+      pattern: /<EmbedVideo\s+type="([^"]*)"(?:\s+src="([^"]*)")?\s*\/>/g,
+      render: (r) => {
+        const e = r.match(/<EmbedVideo\s+type="([^"]*)"(?:\s+src="([^"]*)")?\s*\/>/);
+        if (!e) return r;
+        const t = e[1], o = e[2] || "";
+        if (t === "youtube") {
+          const i = o.match(/(?:v=|\/embed\/|youtu\.be\/)([\w-]+)/), s = i ? i[1] : o;
+          return `<div class="smdx-embed-video">
+            <iframe src="https://www.youtube.com/embed/${encodeURIComponent(s)}" frameborder="0" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
+          </div>`;
+        }
+        return `<div class="smdx-embed-video">
+          <video controls src="${o}" class="smdx-video-player">
+            Your browser does not support the video tag.
+          </video>
+        </div>`;
+      }
+    }],
+    styles: `
+      .smdx-embed-video { position: relative; width: 100%; padding-top: 56.25%; margin: 12px 0; border-radius: 8px; overflow: hidden; background: #000; }
+      .smdx-embed-video iframe, .smdx-embed-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+    `
+  };
+}
+function we() {
+  return {
+    name: "embedOthers",
+    toolbarItems: [{
+      id: "embedOthers",
+      label: "Embed",
+      icon: p.embedOthers,
+      tooltip: "Embed External Content",
+      children: [
+        {
+          id: "embed-github",
+          label: "GitHub Gist",
+          tooltip: "Embed GitHub Gist",
+          action: ({ editor: r }) => {
+            r.insertBlock('<Embed type="github" src="https://gist.github.com/USER/GIST_ID" />');
+          }
+        },
+        {
+          id: "embed-twitter",
+          label: "Twitter/X Post",
+          tooltip: "Embed Tweet",
+          action: ({ editor: r }) => {
+            r.insertBlock('<Embed type="twitter" src="https://twitter.com/user/status/TWEET_ID" />');
+          }
+        },
+        {
+          id: "embed-codepen",
+          label: "CodePen",
+          tooltip: "Embed CodePen",
+          action: ({ editor: r }) => {
+            r.insertBlock('<Embed type="codepen" src="https://codepen.io/user/pen/PEN_ID" />');
+          }
+        },
+        {
+          id: "embed-codesandbox",
+          label: "CodeSandbox",
+          tooltip: "Embed CodeSandbox",
+          action: ({ editor: r }) => {
+            r.insertBlock('<Embed type="codesandbox" src="https://codesandbox.io/s/SANDBOX_ID" />');
+          }
+        }
+      ],
+      action: ({ editor: r }) => {
+        r.insertBlock('<Embed type="github" src="https://gist.github.com/USER/GIST_ID" />');
+      }
+    }],
+    renderers: [{
+      name: "embedOthers",
+      pattern: /<Embed\s+[^>]*?\/>/g,
+      render: (r) => {
+        const e = r.match(/type="([^"]*)"/), t = r.match(/src="([^"]*)"/), o = r.match(/label="([^"]*)"/);
+        if (!e) return r;
+        const i = e[1], s = t ? t[1] : "", n = o ? o[1] : "";
+        switch (i) {
+          case "github":
+            return `<div class="smdx-embed smdx-embed-card"><div class="smdx-embed-card-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg></div><div class="smdx-embed-card-body"><div class="smdx-embed-card-title">${n || "GitHub Gist"}</div><div class="smdx-embed-card-url">${s}</div></div><a href="${s}" target="_blank" rel="noopener noreferrer" class="smdx-embed-card-link">Open <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></a></div>`;
+          case "twitter":
+            return `<div class="smdx-embed smdx-embed-card"><div class="smdx-embed-card-icon smdx-embed-twitter-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></div><div class="smdx-embed-card-body"><div class="smdx-embed-card-title">${n || "Post on X (Twitter)"}</div><div class="smdx-embed-card-url">${s}</div></div><a href="${s}" target="_blank" rel="noopener noreferrer" class="smdx-embed-card-link">Open <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></a></div>`;
+          case "codepen": {
+            const a = s.match(/codepen\.io\/([^/]+)\/pen\/([^/?]+)/);
+            return a ? `<div class="smdx-embed smdx-embed-codepen"><iframe height="400" style="width:100%" scrolling="no" src="https://codepen.io/${encodeURIComponent(a[1])}/embed/${encodeURIComponent(a[2])}?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe></div>` : `<div class="smdx-embed smdx-embed-card"><div class="smdx-embed-card-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/><line x1="12" y1="22" x2="12" y2="15.5"/><polyline points="22 8.5 12 15.5 2 8.5"/></svg></div><div class="smdx-embed-card-body"><div class="smdx-embed-card-title">${n || "CodePen"}</div><div class="smdx-embed-card-url">${s}</div></div><a href="${s}" target="_blank" rel="noopener noreferrer" class="smdx-embed-card-link">Open <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></a></div>`;
+          }
+          case "codesandbox": {
+            const a = s.split("/").pop() || "";
+            return `<div class="smdx-embed smdx-embed-codesandbox"><iframe src="https://codesandbox.io/embed/${encodeURIComponent(a)}" style="width:100%;height:500px;border:0;border-radius:4px;overflow:hidden" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe></div>`;
+          }
+          default:
+            return `<div class="smdx-embed smdx-embed-card"><div class="smdx-embed-card-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg></div><div class="smdx-embed-card-body"><div class="smdx-embed-card-title">${n || "Embedded Content"}</div><div class="smdx-embed-card-url">${s}</div></div><a href="${s}" target="_blank" rel="noopener noreferrer" class="smdx-embed-card-link">Open <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></a></div>`;
+        }
+      }
+    }],
+    styles: `
+      .smdx-embed { margin: 12px 0; border-radius: 8px; overflow: hidden; }
+      .smdx-embed iframe { border: 1px solid var(--smdx-border, #e2e8f0); border-radius: 8px; }
+      .smdx-embed-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--smdx-border, #e2e8f0); border-radius: 8px; background: var(--smdx-bg-muted, #f8fafc); transition: border-color 0.15s; }
+      .smdx-embed-card:hover { border-color: var(--smdx-primary, #6366f1); }
+      .smdx-embed-card-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--smdx-bg, #fff); border: 1px solid var(--smdx-border, #e2e8f0); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--smdx-text-muted, #64748b); }
+      .smdx-embed-twitter-icon { color: #000; }
+      .smdx-dark .smdx-embed-twitter-icon { color: #fff; }
+      .smdx-embed-card-body { flex: 1; min-width: 0; }
+      .smdx-embed-card-title { font-weight: 600; font-size: 0.9em; color: var(--smdx-text, #1e293b); }
+      .smdx-embed-card-url { font-size: 0.8em; color: var(--smdx-text-muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
+      .smdx-embed-card-link { display: flex; align-items: center; gap: 4px; font-size: 0.8em; font-weight: 500; color: var(--smdx-primary, #6366f1); text-decoration: none; white-space: nowrap; flex-shrink: 0; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--smdx-border, #e2e8f0); background: var(--smdx-bg, #fff); transition: background 0.15s; }
+      .smdx-embed-card-link:hover { background: var(--smdx-bg-muted, #f8fafc); text-decoration: none; }
+    `
+  };
+}
+const L = [
+  { id: "flowchart", label: "Flowchart", template: `graph TD
+    Start --> Stop` },
+  { id: "sequence", label: "Sequence Diagram", template: `sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+    Alice-)John: See you later!` },
+  { id: "class", label: "Class Diagram", template: `classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+    }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+    }
+    class Zebra{
+      +bool is_wild
+      +run()
+    }` },
+  { id: "state", label: "State Diagram", template: `stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]` },
+  { id: "er", label: "ER Diagram", template: `erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses` },
+  { id: "journey", label: "User Journey", template: `journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me` },
+  { id: "gantt", label: "Gantt Diagram", template: `gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task     : 24d` }
+];
+function Ce() {
+  return {
+    name: "mermaid",
+    toolbarItems: [{
+      id: "mermaid",
+      label: "Mermaid",
+      icon: p.mermaid,
+      tooltip: "Insert Mermaid Diagram",
+      children: L.map((r) => ({
+        id: `mermaid-${r.id}`,
+        label: r.label,
+        tooltip: `Insert ${r.label}`,
+        action: ({ editor: e }) => {
+          e.insertBlock("```mermaid\n" + r.template + "\n```");
+        }
+      })),
+      action: ({ editor: r }) => {
+        r.insertBlock("```mermaid\n" + L[0].template + "\n```");
+      }
+    }],
+    renderers: [{
+      name: "mermaid",
+      pattern: /```mermaid\n([\s\S]*?)```/g,
+      render: (r) => {
+        const e = r.match(/```mermaid\n([\s\S]*?)```/);
+        if (!e) return r;
+        const t = "mermaid-" + Math.random().toString(36).substring(2, 10), o = encodeURIComponent(e[1].trim());
+        return `<div class="smdx-mermaid" data-mermaid-id="${t}" data-mermaid-code="${o}"><div class="smdx-mermaid-placeholder">Loading diagram…</div></div>`;
+      },
+      priority: 20
+    }],
+    async init(r) {
+      const e = async () => {
+        try {
+          const t = window.mermaid;
+          if (!t) return;
+          const o = r.editor.getRoot().classList.contains("smdx-dark");
+          t.initialize({ startOnLoad: !1, theme: o ? "dark" : "default" });
+          const i = r.editor.getPreview();
+          if (!i) return;
+          const s = i.querySelectorAll(".smdx-mermaid[data-mermaid-code]");
+          for (const n of Array.from(s)) {
+            const a = decodeURIComponent(n.getAttribute("data-mermaid-code")), d = n.getAttribute("data-mermaid-id");
+            try {
+              const { svg: l } = await t.render(d, a);
+              n.innerHTML = l, n.removeAttribute("data-mermaid-code");
+            } catch {
+              n.innerHTML = `<pre class="smdx-mermaid-error">${a.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</pre>`, n.removeAttribute("data-mermaid-code");
+            }
+          }
+        } catch {
+        }
+      };
+      r.on("render", e);
+    },
+    styles: `
+      .smdx-mermaid { margin: 12px 0; text-align: center; }
+      .smdx-mermaid svg { max-width: 100%; height: auto; }
+      .smdx-mermaid-placeholder { padding: 24px; color: var(--smdx-text-muted, #94a3b8); font-size: 0.9em; }
+      .smdx-mermaid-error { background: var(--smdx-bg-muted, #f8fafc); padding: 16px; border-radius: 8px; border: 1px solid var(--smdx-border, #e2e8f0); text-align: left; font-size: 0.85em; overflow-x: auto; }
+      .smdx-dark .smdx-mermaid text { fill: #e2e8f0 !important; }
+      .smdx-dark .smdx-mermaid .edgeLabel { background-color: #2a2a3c !important; color: #e2e8f0 !important; }
+      .smdx-dark .smdx-mermaid .edgeLabel p { color: #e2e8f0 !important; }
+      .smdx-dark .smdx-mermaid .label { color: #e2e8f0 !important; }
+      .smdx-dark .smdx-mermaid .nodeLabel { color: #e2e8f0 !important; }
+      .smdx-dark .smdx-mermaid .node rect,
+      .smdx-dark .smdx-mermaid .node circle,
+      .smdx-dark .smdx-mermaid .node ellipse,
+      .smdx-dark .smdx-mermaid .node polygon,
+      .smdx-dark .smdx-mermaid .node .label-container { fill: #2a2a3c !important; stroke: #818cf8 !important; }
+      .smdx-dark .smdx-mermaid .edgePath .path { stroke: #94a3b8 !important; }
+      .smdx-dark .smdx-mermaid .arrowheadPath { fill: #94a3b8 !important; }
+      .smdx-dark .smdx-mermaid marker path { fill: #94a3b8 !important; stroke: #94a3b8 !important; }
+      .smdx-dark .smdx-mermaid .flowchart-link { stroke: #94a3b8 !important; }
+      .smdx-dark .smdx-mermaid line { stroke: #94a3b8 !important; }
+      .smdx-dark .smdx-mermaid .messageLine0,
+      .smdx-dark .smdx-mermaid .messageLine1 { stroke: #94a3b8 !important; }
+      .smdx-dark .smdx-mermaid .messageText { fill: #e2e8f0 !important; }
+      .smdx-dark .smdx-mermaid .actor { fill: #2a2a3c !important; stroke: #818cf8 !important; }
+      .smdx-dark .smdx-mermaid .actor-line { stroke: #4b5563 !important; }
+      .smdx-dark .smdx-mermaid text.actor > tspan { fill: #e2e8f0 !important; }
+      .smdx-dark .smdx-mermaid .loopText > tspan { fill: #e2e8f0 !important; }
+      .smdx-dark .smdx-mermaid .labelBox { fill: #2a2a3c !important; stroke: #818cf8 !important; }
+      .smdx-dark .smdx-mermaid .loopLine { stroke: #4b5563 !important; }
+      .smdx-dark .smdx-mermaid .note { fill: #374151 !important; stroke: #4b5563 !important; }
+      .smdx-dark .smdx-mermaid .noteText > tspan { fill: #e2e8f0 !important; }
+      .smdx-dark .smdx-mermaid .activation0,
+      .smdx-dark .smdx-mermaid .activation1,
+      .smdx-dark .smdx-mermaid .activation2 { fill: #374151 !important; stroke: #818cf8 !important; }
+      .smdx-dark .smdx-mermaid .statediagram-state rect.divider { fill: #374151 !important; stroke: #4b5563 !important; }
+      .smdx-dark .smdx-mermaid .relationshipLine { stroke: #94a3b8 !important; }
+      .smdx-dark .smdx-mermaid .entityBox { fill: #2a2a3c !important; stroke: #818cf8 !important; }
+      .smdx-dark .smdx-mermaid .attributeBoxEven { fill: #2a2a3c !important; }
+      .smdx-dark .smdx-mermaid .attributeBoxOdd { fill: #374151 !important; }
+      .smdx-dark .smdx-mermaid .er.relationshipLabel { fill: #e2e8f0 !important; }
+      .smdx-dark .smdx-mermaid .journey-section-column { fill: #374151 !important; }
+      .smdx-dark .smdx-mermaid .task { fill: #2a2a3c !important; stroke: #818cf8 !important; }
+      .smdx-dark .smdx-mermaid .taskText { fill: #e2e8f0 !important; }
+      .smdx-dark .smdx-mermaid .sectionTitle { fill: #e2e8f0 !important; }
+      .smdx-dark .smdx-mermaid .grid .tick line { stroke: #374151 !important; }
+      .smdx-dark .smdx-mermaid .grid .tick text { fill: #94a3b8 !important; }
+      .smdx-dark .smdx-mermaid .titleText { fill: #e2e8f0 !important; }
+      .smdx-dark .smdx-mermaid .pieCircle { stroke: #1e1e2e !important; }
+      .smdx-dark .smdx-mermaid .section0,
+      .smdx-dark .smdx-mermaid .section1 { fill: #374151 !important; }
+      .smdx-dark .smdx-mermaid .today { stroke: #818cf8 !important; }
+    `
+  };
+}
+const C = [
+  ["😀", "grinning smile happy"],
+  ["😂", "joy laugh cry tears"],
+  ["🥰", "love hearts smiling"],
+  ["😎", "cool sunglasses"],
+  ["🤔", "thinking hmm"],
+  ["😢", "cry sad tear"],
+  ["😡", "angry mad rage"],
+  ["🥳", "party celebrate"],
+  ["👍", "thumbs up good yes ok"],
+  ["👎", "thumbs down bad no"],
+  ["👋", "wave hello hi bye"],
+  ["🙏", "pray please thanks"],
+  ["💪", "strong muscle flex"],
+  ["🎉", "party tada celebrate confetti"],
+  ["🔥", "fire hot lit"],
+  ["⭐", "star favorite"],
+  ["❤️", "heart love red"],
+  ["💔", "broken heart"],
+  ["💯", "hundred perfect score"],
+  ["✅", "check done yes complete"],
+  ["❌", "cross no wrong cancel"],
+  ["⚠️", "warning alert caution"],
+  ["💡", "idea bulb light tip"],
+  ["🚀", "rocket launch ship fast"],
+  ["📝", "memo note write edit"],
+  ["📌", "pin pushpin"],
+  ["📎", "paperclip clip attach"],
+  ["🔗", "link chain url"],
+  ["📁", "folder file directory"],
+  ["🗂️", "dividers tabs index"],
+  ["🔍", "search magnifying find look"],
+  ["🔧", "wrench tool fix settings"],
+  ["🎯", "target goal dart bullseye"],
+  ["🏆", "trophy winner cup award"],
+  ["🎨", "art palette paint color"],
+  ["🎵", "music note song"],
+  ["📊", "chart bar graph stats"],
+  ["📈", "chart up increase growth"],
+  ["📉", "chart down decrease decline"],
+  ["💰", "money bag dollar rich"],
+  ["🕐", "clock time one"],
+  ["📅", "calendar date schedule"],
+  ["🌟", "glowing star sparkle shine"],
+  ["🌍", "earth globe world"],
+  ["☀️", "sun sunny bright"],
+  ["🌙", "moon crescent night"],
+  ["⚡", "lightning bolt zap electric"],
+  ["💧", "water drop droplet"],
+  ["🟢", "green circle dot"],
+  ["🔴", "red circle dot"],
+  ["🟡", "yellow circle dot"],
+  ["🔵", "blue circle dot"],
+  ["⚪", "white circle dot"],
+  ["⚫", "black circle dot"],
+  ["🟣", "purple circle dot"],
+  ["🟠", "orange circle dot"]
+];
+function $e() {
+  return {
+    name: "emoji",
+    toolbarItems: [{
+      id: "emoji",
+      label: "Emoji",
+      icon: p.emoji,
+      tooltip: "Insert Emoji",
+      action: (r) => {
+      },
+      render: (r, e) => {
+        r.addEventListener("click", (t) => {
+          t.preventDefault(), t.stopPropagation(), Se(r, e.editor);
+        });
+      }
+    }]
+  };
+}
+function Se(r, e) {
+  var l;
+  (l = document.querySelector(".smdx-emoji-picker")) == null || l.remove();
+  const t = document.createElement("div");
+  t.className = "smdx-emoji-picker";
+  const o = r.closest(".smdx-editor");
+  o != null && o.classList.contains("smdx-dark") && t.classList.add("smdx-dark");
+  const i = document.createElement("input");
+  i.type = "text", i.placeholder = "Search emoji...", i.className = "smdx-emoji-search", t.appendChild(i);
+  const s = document.createElement("div");
+  s.className = "smdx-emoji-grid";
+  const n = (c) => {
+    s.innerHTML = "";
+    for (const [m] of c) {
+      const h = document.createElement("button");
+      h.type = "button", h.className = "smdx-emoji-btn", h.textContent = m, h.addEventListener("click", () => {
+        e.insertText(m), t.remove();
+      }), s.appendChild(h);
+    }
+  };
+  n(C), i.addEventListener("input", () => {
+    const c = i.value.toLowerCase().trim();
+    if (!c) {
+      n(C);
+      return;
+    }
+    n(C.filter(([, m]) => m.includes(c)));
+  }), t.appendChild(s);
+  const a = r.getBoundingClientRect();
+  t.style.position = "fixed", t.style.top = `${a.bottom + 4}px`, t.style.left = `${a.left}px`, document.body.appendChild(t);
+  const d = (c) => {
+    !t.contains(c.target) && c.target !== r && (t.remove(), document.removeEventListener("click", d));
+  };
+  setTimeout(() => document.addEventListener("click", d), 0), i.focus();
+}
+function Ee() {
+  return {
+    name: "formula",
+    toolbarItems: [{
+      id: "formula",
+      label: "Formula",
+      icon: p.formula,
+      tooltip: "Insert Formula",
+      children: [
+        {
+          id: "formula-inline",
+          label: "Inline Formula",
+          tooltip: "Inline math: $formula$",
+          action: ({ editor: r }) => {
+            r.wrapSelection("$", "$");
+          }
+        },
+        {
+          id: "formula-block",
+          label: "Block Formula",
+          tooltip: "Block math: $$formula$$",
+          action: ({ editor: r, selection: e }) => {
+            r.insertBlock(`$$
+` + (e.text || "E = mc^2") + `
+$$`);
+          }
+        }
+      ],
+      action: ({ editor: r }) => {
+        r.wrapSelection("$", "$");
+      }
+    }],
+    renderers: [
+      {
+        name: "formula-block",
+        pattern: /\$\$([\s\S]*?)\$\$/g,
+        render: (r) => {
+          const e = r.match(/\$\$([\s\S]*?)\$\$/);
+          if (!e) return r;
+          const t = e[1].trim();
+          try {
+            const o = window.katex;
+            if (o)
+              return `<div class="smdx-formula-block">${o.renderToString(t, { displayMode: !0, throwOnError: !1 })}</div>`;
+          } catch {
+          }
+          return `<div class="smdx-formula-block smdx-formula-fallback"><code>${t}</code></div>`;
+        },
+        priority: 18
+      },
+      {
+        name: "formula-inline",
+        pattern: new RegExp("(?<!\\$)\\$(?!\\$)((?:[^$\\\\]|\\\\.)+)\\$", "g"),
+        render: (r) => {
+          const e = r.match(new RegExp("(?<!\\$)\\$(?!\\$)((?:[^$\\\\]|\\\\.)+)\\$"));
+          if (!e) return r;
+          const t = e[1].trim();
+          try {
+            const o = window.katex;
+            if (o)
+              return o.renderToString(t, { displayMode: !1, throwOnError: !1 });
+          } catch {
+          }
+          return `<code class="smdx-formula-inline">${t}</code>`;
+        },
+        priority: 17
+      }
+    ],
+    styles: `
+      .smdx-formula-block { text-align: center; margin: 16px 0; font-size: 1.2em; overflow-x: auto; }
+      .smdx-formula-fallback { background: var(--smdx-bg-muted, #f8fafc); padding: 12px; border-radius: 6px; border: 1px solid var(--smdx-border, #e2e8f0); }
+      .smdx-formula-inline { font-size: 0.95em; }
+
+      .smdx-emoji-picker { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 1000; width: 300px; padding: 8px; }
+      .smdx-emoji-search { width: 100%; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 4px; margin-bottom: 8px; font-size: 0.9em; outline: none; box-sizing: border-box; background: #fff; color: #1e293b; }
+      .smdx-emoji-search:focus { border-color: #6366f1; }
+      .smdx-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 200px; overflow-y: auto; }
+      .smdx-emoji-btn { border: none; background: none; font-size: 1.3em; padding: 4px; border-radius: 4px; cursor: pointer; line-height: 1; }
+      .smdx-emoji-btn:hover { background: #f1f5f9; }
+      .smdx-dark .smdx-emoji-picker, .smdx-emoji-picker.smdx-dark { background: #1e1e2e; border-color: #374151; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
+      .smdx-dark .smdx-emoji-search, .smdx-emoji-picker.smdx-dark .smdx-emoji-search { background: #2a2a3c; color: #e2e8f0; border-color: #374151; }
+      .smdx-dark .smdx-emoji-search:focus, .smdx-emoji-picker.smdx-dark .smdx-emoji-search:focus { border-color: #818cf8; }
+      .smdx-dark .smdx-emoji-btn:hover, .smdx-emoji-picker.smdx-dark .smdx-emoji-btn:hover { background: #2a2a3c; }
+    `
+  };
+}
+function g(r) {
+  return r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function Te() {
+  const r = /* @__PURE__ */ new Map();
+  async function e(i) {
+    if (r.has(i)) return r.get(i);
+    try {
+      let s = await fetch(i + "?raw");
+      if (s.ok || (s = await fetch(i)), !s.ok) {
+        const c = { content: null, error: `File not found: ${i} (${s.status})` };
+        return r.set(i, c), c;
+      }
+      let n = await s.text();
+      const a = n.trimStart();
+      if (a.startsWith("<!DOCTYPE") || a.startsWith("<!doctype") || a.startsWith("<html")) {
+        const c = { content: null, error: `File not found: ${i}` };
+        return r.set(i, c), c;
+      }
+      const d = n.match(/^export default (?:\/\*(?:[^*]|\*(?!\/))*\*\/\s*)?["']([\s\S]*)["']\s*;?\s*$/);
+      d && (n = d[1].replace(/\\n/g, `
+`).replace(/\\r/g, "\r").replace(/\\t/g, "	").replace(/\\"/g, '"').replace(/\\'/g, "'").replace(/\\\\/g, "\\").replace(/\\u([\da-fA-F]{4})/g, (c, m) => String.fromCharCode(parseInt(m, 16))));
+      const l = { content: n };
+      return r.set(i, l), l;
+    } catch {
+      const s = { content: null, error: `Failed to load: ${i}` };
+      return r.set(i, s), s;
+    }
+  }
+  function t(i, s) {
+    const n = s.match(/^(\d+)-(\d+)$/);
+    if (!n) return i;
+    const a = Math.max(1, parseInt(n[1], 10)), d = parseInt(n[2], 10);
+    return i.split(`
+`).slice(a - 1, d).join(`
+`);
+  }
+  async function o(i) {
+    const s = i.querySelectorAll(".smdx-import[data-src]");
+    for (const a of s) {
+      if (a.dataset.loaded === "true") continue;
+      a.dataset.loaded = "true";
+      const d = a.dataset.src, { content: l, error: c } = await e(d);
+      c ? (a.innerHTML = `<span class="smdx-import-icon">⚠️</span> <span class="smdx-import-error">${g(c)}</span>`, a.classList.add("smdx-import-failed")) : (a.innerHTML = `<div class="smdx-import-header"><span class="smdx-import-icon">📄</span> <code>${g(d)}</code></div><div class="smdx-import-content">${g(l)}</div>`, a.classList.add("smdx-import-loaded"));
+    }
+    const n = i.querySelectorAll(".smdx-snippet[data-src]");
+    for (const a of n) {
+      if (a.dataset.loaded === "true") continue;
+      a.dataset.loaded = "true";
+      const d = a.dataset.src, l = a.dataset.lines || "", { content: c, error: m } = await e(d);
+      if (m)
+        a.innerHTML = `<span class="smdx-snippet-icon">⚠️</span> <span class="smdx-snippet-error">${g(m)}</span>`, a.classList.add("smdx-snippet-failed");
+      else {
+        const h = l ? t(c, l) : c, x = d.split(".").pop() || "text", u = l ? ` <span class="smdx-snippet-lines">(lines ${g(l)})</span>` : "";
+        a.innerHTML = `<div class="smdx-snippet-header"><span class="smdx-snippet-icon">📋</span> <code>${g(d)}</code>${u}</div><pre class="smdx-snippet-code"><code class="language-${g(x)}">${g(h)}</code></pre>`, a.classList.add("smdx-snippet-loaded");
+      }
+    }
+  }
+  return {
+    name: "insert",
+    init(i) {
+      i.on("render", () => {
+        const s = i.editor.getPreview();
+        s && o(s);
+      });
+    },
+    toolbarItems: [{
+      id: "insert",
+      label: "Insert",
+      icon: p.insert,
+      tooltip: "Insert Component",
+      children: [
+        {
+          id: "insert-endpoint",
+          label: "API Endpoint",
+          tooltip: "Insert API endpoint block",
+          action: ({ editor: i }) => {
+            i.insertBlock(
+              `<Endpoint method="GET" path="/api/v1/resource">
+  Description of the endpoint.
+  
+  **Parameters:**
+  | Name | Type | Description |
+  |------|------|-------------|
+  | id   | string | Resource ID |
+  
+  **Response:**
+  \`\`\`json
+  {
+    "status": "success",
+    "data": {}
+  }
+  \`\`\`
+</Endpoint>`
+            );
+          }
+        },
+        {
+          id: "insert-markdown",
+          label: "Markdown Import",
+          tooltip: "Import external markdown",
+          action: ({ editor: i }) => {
+            i.insertBlock('<Import src="./path/to/file.md" />');
+          }
+        },
+        {
+          id: "insert-snippet",
+          label: "Code Snippet",
+          tooltip: "Insert code snippet reference",
+          action: ({ editor: i }) => {
+            i.insertBlock('<Snippet src="./snippets/example.ts" lines="1-20" />');
+          }
+        }
+      ],
+      action: () => {
+      }
+    }],
+    renderers: [
+      {
+        name: "endpoint",
+        pattern: /<Endpoint\s+method="([^"]*)"(?:\s+path="([^"]*)")?\s*>([\s\S]*?)<\/Endpoint>/g,
+        render: (i) => {
+          const s = i.match(/<Endpoint\s+method="([^"]*)"(?:\s+path="([^"]*)")?\s*>([\s\S]*?)<\/Endpoint>/);
+          if (!s) return i;
+          const n = s[1].toUpperCase(), a = s[2] || "";
+          return `<div class="smdx-endpoint">
+            <div class="smdx-endpoint-header">
+              <span class="smdx-endpoint-method" style="background:${{
+            GET: "#22c55e",
+            POST: "#3b82f6",
+            PUT: "#f59e0b",
+            PATCH: "#a855f7",
+            DELETE: "#ef4444"
+          }[n] || "#64748b"}">${n}</span>
+              <code class="smdx-endpoint-path">${a}</code>
+            </div>
+            <div class="smdx-endpoint-body">${s[3].trim()}</div>
+          </div>`;
+        },
+        priority: 10
+      },
+      {
+        name: "import",
+        pattern: /<Import\s+src="([^"]*)"(?:\s*\/)?>/g,
+        render: (i) => {
+          const s = i.match(/<Import\s+src="([^"]*)"(?:\s*\/)?>/);
+          if (!s) return i;
+          const n = s[1];
+          return `<div class="smdx-import" data-src="${g(n)}"><span class="smdx-import-icon">📄</span> Loading <code>${g(n)}</code>…</div>`;
+        }
+      },
+      {
+        name: "snippet",
+        pattern: /<Snippet\s+src="([^"]*)"(?:\s+lines="([^"]*)")?\s*\/>/g,
+        render: (i) => {
+          const s = i.match(/<Snippet\s+src="([^"]*)"(?:\s+lines="([^"]*)")?\s*\/>/);
+          if (!s) return i;
+          const n = s[1], a = s[2] || "";
+          return `<div class="smdx-snippet" data-src="${g(n)}"${a ? ` data-lines="${g(a)}"` : ""}><span class="smdx-snippet-icon">📋</span> Loading <code>${g(n)}</code>…</div>`;
+        }
+      }
+    ],
+    styles: `
+      .smdx-endpoint { border: 1px solid var(--smdx-border, #e2e8f0); border-radius: 8px; overflow: hidden; margin: 12px 0; }
+      .smdx-endpoint-header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--smdx-bg-muted, #f8fafc); border-bottom: 1px solid var(--smdx-border, #e2e8f0); }
+      .smdx-endpoint-method { color: white; padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: 0.8em; letter-spacing: 0.05em; }
+      .smdx-endpoint-path { font-family: monospace; font-size: 0.9em; }
+      .smdx-endpoint-body { padding: 16px; }
+      .smdx-import, .smdx-snippet { border: 1px solid var(--smdx-border, #e2e8f0); border-radius: 8px; margin: 8px 0; overflow: hidden; font-size: 0.9em; }
+      .smdx-import:not(.smdx-import-loaded):not(.smdx-import-failed),
+      .smdx-snippet:not(.smdx-snippet-loaded):not(.smdx-snippet-failed) { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--smdx-bg-muted, #f8fafc); }
+      .smdx-import-header, .smdx-snippet-header { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--smdx-bg-muted, #f8fafc); border-bottom: 1px solid var(--smdx-border, #e2e8f0); font-size: 0.85em; }
+      .smdx-import-content { padding: 16px; white-space: pre-wrap; font-size: 0.9em; line-height: 1.6; }
+      .smdx-snippet-code { margin: 0; padding: 16px; background: var(--smdx-bg-code, #1e293b); color: var(--smdx-text-code, #e2e8f0); overflow-x: auto; font-size: 0.85em; line-height: 1.5; }
+      .smdx-snippet-code code { font-family: var(--smdx-font-mono, 'SF Mono', 'Fira Code', monospace); }
+      .smdx-snippet-lines { color: var(--smdx-text-muted, #94a3b8); font-size: 0.9em; }
+      .smdx-import-failed, .smdx-snippet-failed { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #fef2f2; border-color: #fecaca; }
+      .smdx-import-error, .smdx-snippet-error { color: #b91c1c; }
+      .smdx-dark .smdx-import-failed, .smdx-dark .smdx-snippet-failed { background: #450a0a; border-color: #991b1b; }
+      .smdx-dark .smdx-import-error, .smdx-dark .smdx-snippet-error { color: #fca5a5; }
+    `
+  };
+}
+function Le() {
+  return {
+    name: "toc",
+    toolbarItems: [{
+      id: "toc",
+      label: "ToC",
+      icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="12" x2="21" y2="12"/><line x1="6" y1="18" x2="21" y2="18"/><circle cx="3" cy="12" r="1" fill="currentColor"/><circle cx="3" cy="18" r="1" fill="currentColor"/></svg>',
+      tooltip: "Toggle Table of Contents",
+      action: ({ editor: r }) => {
+        const e = r.getRoot(), t = e.querySelector(".smdx-toc-sidebar");
+        t ? (t.remove(), e.classList.remove("smdx-toc-open")) : (e.classList.add("smdx-toc-open"), I(r));
+      }
+    }],
+    init(r) {
+      r.on("render", () => {
+        r.editor.getRoot().classList.contains("smdx-toc-open") && I(r.editor);
+      });
+    },
+    styles: `
+      .smdx-toc-sidebar { position: absolute; top: 0; right: 0; width: 220px; height: 100%; overflow-y: auto; background: var(--smdx-bg, #fff); border-left: 1px solid var(--smdx-border, #e2e8f0); padding: 16px 12px; z-index: 50; font-size: 0.85em; }
+      .smdx-toc-open .smdx-preview-pane { position: relative; }
+      .smdx-toc-title { font-weight: 700; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--smdx-text-muted, #64748b); margin-bottom: 12px; }
+      .smdx-toc-list { list-style: none; padding: 0; margin: 0; }
+      .smdx-toc-item { margin: 0; }
+      .smdx-toc-link { display: block; padding: 4px 8px; color: var(--smdx-text-muted, #64748b); text-decoration: none; border-radius: 4px; transition: background 0.15s, color 0.15s; cursor: pointer; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .smdx-toc-link:hover { background: var(--smdx-bg-muted, #f1f5f9); color: var(--smdx-text, #1e293b); }
+      .smdx-toc-link.smdx-toc-h2 { padding-left: 16px; }
+      .smdx-toc-link.smdx-toc-h3 { padding-left: 28px; font-size: 0.95em; }
+      .smdx-toc-link.smdx-toc-h4 { padding-left: 40px; font-size: 0.9em; }
+    `
+  };
+}
+function I(r) {
+  var m;
+  const e = r.getRoot(), t = e.querySelector(".smdx-preview-pane");
+  if (!t) return;
+  (m = e.querySelector(".smdx-toc-sidebar")) == null || m.remove();
+  const o = r.getValue(), i = [], s = o.split(`
+`);
+  for (const h of s) {
+    const x = h.match(/^(#{1,4})\s+(.+)$/);
+    if (x) {
+      const u = x[2].replace(/[*_`~]/g, ""), b = u.toLowerCase().replace(/[^\w]+/g, "-").replace(/^-|-$/g, "");
+      i.push({ level: x[1].length, text: u, slug: b });
+    }
+  }
+  if (i.length === 0) return;
+  const n = document.createElement("div");
+  n.className = "smdx-toc-sidebar";
+  const a = document.createElement("div");
+  a.className = "smdx-toc-title", a.textContent = "On this page", n.appendChild(a);
+  const d = document.createElement("ul");
+  d.className = "smdx-toc-list";
+  const l = r.getPreview(), c = e.querySelector(".smdx-textarea");
+  i.forEach((h) => {
+    const x = document.createElement("li");
+    x.className = "smdx-toc-item";
+    const u = document.createElement("a");
+    u.className = `smdx-toc-link smdx-toc-h${h.level}`, u.textContent = h.text, u.title = h.text, u.addEventListener("click", (b) => {
+      b.preventDefault();
+      const v = l.querySelector(`#${CSS.escape(h.slug)}`);
+      if (v && v.scrollIntoView({ behavior: "smooth", block: "start" }), c) {
+        const f = c.value.split(`
+`);
+        let k = 0;
+        for (let y = 0; y < f.length; y++) {
+          const $ = f[y].match(/^#{1,4}\s+(.+)$/);
+          if ($ && $[1].replace(/[*_`~]/g, "") === h.text) {
+            c.focus(), c.setSelectionRange(k, k);
+            const A = parseFloat(getComputedStyle(c).lineHeight) || 22, P = y * A - c.clientHeight / 3;
+            c.scrollTop = Math.max(0, P);
+            break;
+          }
+          k += f[y].length + 1;
+        }
+      }
+    }), x.appendChild(u), d.appendChild(x);
+  }), n.appendChild(d), t.appendChild(n);
+}
+function Ie() {
+  return {
+    name: "breakLine",
+    toolbarItems: [{
+      id: "breakLine",
+      label: "Line Break",
+      icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 7H3"/><path d="M21 17H9"/><path d="M18 13l3 4-3 4"/></svg>',
+      tooltip: "Insert Line Break",
+      action: ({ editor: r }) => {
+        r.insertText(`<br/>
+`);
+      }
+    }]
+  };
+}
+function Me() {
+  return {
+    name: "horizontalRule",
+    toolbarItems: [{
+      id: "horizontalRule",
+      label: "Horizontal Rule",
+      icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/></svg>',
+      tooltip: "Insert Horizontal Rule",
+      action: ({ editor: r }) => {
+        r.insertBlock("---");
+      }
+    }]
+  };
+}
+function Be() {
+  return [
+    V(),
+    W(),
+    K(),
+    U(),
+    Y(),
+    X(),
+    J(),
+    Z(),
+    Q(),
+    ee(),
+    te(),
+    re(),
+    ie(),
+    se(),
+    ae(),
+    de(),
+    le(),
+    ce(),
+    me(),
+    pe(),
+    xe(),
+    ue(),
+    ge(),
+    be(),
+    fe(),
+    ve(),
+    ke(),
+    ye(),
+    we(),
+    Ce(),
+    $e(),
+    Ee(),
+    Te(),
+    Le(),
+    Ie(),
+    Me()
+  ];
+}
+function Ae() {
+  return [
+    [
+      // Primary row
+      "heading",
+      "|",
+      "bold",
+      "italic",
+      "strikethrough",
+      "|",
+      "quote",
+      "link",
+      "image",
+      "|",
+      "code",
+      "codeBlock",
+      "|",
+      "unorderedList",
+      "orderedList",
+      "taskList",
+      "|",
+      "table",
+      "|",
+      "emoji",
+      "formula",
+      "|",
+      "toc",
+      "|",
+      {
+        type: "group",
+        label: "Insert",
+        icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>',
+        display: "dropdown",
+        items: [
+          {
+            type: "group",
+            label: "Layout",
+            items: ["highlight", "admonition", "tab", "imageBackground", "imageFrame", "accordion", "accordionGroup", "multiColumn", "card", "cardGroup", "steps", "tip", "container"]
+          },
+          {
+            type: "group",
+            label: "Others",
+            items: ["copyText", "tooltip", "embedVideo", "embedOthers", "breakLine", "horizontalRule"]
+          },
+          {
+            type: "group",
+            label: "Diagrams",
+            items: ["mermaid"]
+          },
+          {
+            type: "group",
+            label: "Apidog Widget",
+            items: ["insert"]
+          }
+        ]
+      }
+    ]
+  ];
+}
+function De(r) {
+  return new q({
+    plugins: Be(),
+    toolbar: Ae(),
+    placeholder: "Start writing markdown...",
+    scrollSync: !0,
+    mode: "split",
+    ...r
+  });
+}
+export {
+  H as EventEmitter,
+  F as History,
+  D as PluginManager,
+  _ as Renderer,
+  q as SynclineMDXEditor,
+  z as Toolbar,
+  me as accordionGroupPlugin,
+  ce as accordionPlugin,
+  se as admonitionPlugin,
+  Be as allPlugins,
+  W as boldPlugin,
+  Ie as breakLinePlugin,
+  ue as cardGroupPlugin,
+  xe as cardPlugin,
+  Z as codePlugin,
+  fe as containerPlugin,
+  ve as copyTextPlugin,
+  De as createEditor,
+  Ae as defaultToolbar,
+  we as embedOthersPlugin,
+  ye as embedVideoPlugin,
+  $e as emojiPlugin,
+  Ee as formulaPlugin,
+  V as headingPlugin,
+  ie as highlightPlugin,
+  Me as horizontalRulePlugin,
+  p as icons,
+  de as imageBackgroundPlugin,
+  le as imageFramePlugin,
+  J as imagePlugin,
+  Te as insertPlugin,
+  K as italicPlugin,
+  X as linkPlugin,
+  Ce as mermaidPlugin,
+  pe as multiColumnPlugin,
+  ee as orderedListPlugin,
+  Y as quotePlugin,
+  ge as stepPlugin,
+  U as strikethroughPlugin,
+  ae as tabPlugin,
+  re as tablePlugin,
+  te as taskListPlugin,
+  be as tipPlugin,
+  Le as tocPlugin,
+  ke as tooltipPlugin,
+  Q as unorderedListPlugin
+};