@noirmd/previewer 1.2.0 → 2.0.0

package/dist/vue.js

@@ -1564,10 +1564,10 @@ var require_core = __commonJS({
 });
 
 // vue/NRpreviewer.ts
-import { defineComponent as defineComponent12, h as h13, ref as ref6 } from "vue";
+import { defineComponent as defineComponent3, h as h3, ref as ref3 } from "vue";
 
 // vue/CustomMarkdownRenderer.ts
-import { defineComponent as defineComponent11, h as h12, ref as ref5, computed, onMounted as onMounted4, onUnmounted as onUnmounted3, provide } from "vue";
+import { defineComponent, h, onMounted as onMounted2, onUnmounted as onUnmounted2, ref, watch as watch2 } from "vue";
 
 // core/utils.ts
 function parseCssString(cssText) {
@@ -1613,9 +1613,6 @@ function extractAttributes(text) {
   return { text: cleanedText, classes: classList.join(" "), id };
 }
 var _scopeCounter = 0;
-function resetScopeCounter() {
-  _scopeCounter = 0;
-}
 function generateScopeId() {
   return `scope-${++_scopeCounter}`;
 }
@@ -1663,6 +1660,7 @@ function parseMarkdown(markdown2) {
   if (!markdown2) return [];
   const lines = markdown2.replace(/\r\n/g, "\n").replace(/\r/g, "").split("\n");
   const result = [];
+  const usedIds = /* @__PURE__ */ new Set();
   let i = 0;
   while (i < lines.length) {
     const line = lines[i];
@@ -1672,7 +1670,14 @@ function parseMarkdown(markdown2) {
       const level = match[1].length;
       const rawText = match[2];
       const { text: text2, classes: classes2, id: customId } = extractAttributes(rawText);
-      const id2 = customId || generateId(text2.replace(/->|<-/g, ""));
+      const baseId = customId || generateId(text2.replace(/->|<-/g, ""));
+      let id2 = baseId;
+      let n = 1;
+      while (usedIds.has(id2)) {
+        n++;
+        id2 = `${baseId}-${n}`;
+      }
+      usedIds.add(id2);
       result.push({ type: "header", level, text: text2, id: id2, classes: classes2 || void 0 });
       i++;
       continue;
@@ -1987,156 +1992,6 @@ function splitSlots(rawContent) {
   return slots;
 }
 
-// vue/renderers.ts
-import { h } from "vue";
-function renderInline(text) {
-  if (!text) return [];
-  const parsePart = (part, key) => {
-    let match2;
-    if (match2 = part.match(/^\|\[([^\]]+)\]\|$/)) {
-      return h("span", {
-        class: "nr-icon material-symbols-rounded",
-        "aria-hidden": "true",
-        innerHTML: /^[eE][0-9a-fA-F]{3,4}$/.test(match2[1]) ? `&#x${match2[1]};` : void 0,
-        key
-      }, /^[eE][0-9a-fA-F]{3,4}$/.test(match2[1]) ? void 0 : match2[1]);
-    }
-    if (match2 = part.match(/^!~(.+?)~!$/)) {
-      const content = match2[1];
-      const parts = content.split(";");
-      let color = "currentColor";
-      let decorationStyle = "solid";
-      let type = "underline";
-      let textIndex = 0;
-      if (parts[textIndex]?.match(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/) || ["red", "blue", "green", "purple", "orange", "yellow", "pink"].includes(parts[textIndex])) {
-        color = parts[textIndex++];
-      }
-      if (["solid", "double", "dotted", "dashed", "wavy"].includes(parts[textIndex])) {
-        decorationStyle = parts[textIndex++];
-      }
-      if (["underline", "line-through", "overline", "both"].includes(parts[textIndex])) {
-        type = parts[textIndex] === "both" ? "underline line-through" : parts[textIndex++];
-      }
-      const innerText = parts.slice(textIndex).join(";");
-      return h("span", {
-        key,
-        style: { textDecoration: `${type} ${decorationStyle} ${color}`, textDecorationThickness: "auto" }
-      }, renderInline(innerText));
-    }
-    if (match2 = part.match(/%([^%\s]+?)%([\s\S]+?)%%/)) {
-      return h("span", { key, style: { color: match2[1] } }, renderInline(match2[2]));
-    }
-    if (match2 = part.match(/^!>([^<]+?)<!$/)) {
-      return h("span", {
-        key,
-        class: "bg-text-primary text-bg-primary px-1 rounded hover:bg-transparent transition-colors cursor-pointer"
-      }, renderInline(match2[1]));
-    }
-    if (match2 = part.match(/^==(.+?)==$/)) {
-      return h("mark", {
-        key,
-        class: "bg-yellow-500/20 text-inherit px-0.5 rounded"
-      }, renderInline(match2[1]));
-    }
-    if (match2 = part.match(/^\*\*\*(.+?)\*\*\*$/)) {
-      return h("strong", { key }, h("em", renderInline(match2[1])));
-    }
-    if (match2 = part.match(/^\*\*(.+?)\*\*$/)) {
-      return h("strong", { key }, renderInline(match2[1]));
-    }
-    if (match2 = part.match(/^_(.+?)_$/)) {
-      return h("em", { key }, renderInline(match2[1]));
-    }
-    if (match2 = part.match(/^~~(.+?)~~$/)) {
-      return h("del", { key }, renderInline(match2[1]));
-    }
-    if (match2 = part.match(/^`([^`]+)`$/)) {
-      return h("code", {
-        key,
-        class: "text-[0.875em] font-mono bg-background-secondary/50 px-1.5 py-0.5 rounded text-text-primary"
-      }, match2[1]);
-    }
-    if (match2 = part.match(/^\[([^\]]+?)\]\(([^)]+?)\)$/)) {
-      return h("a", {
-        key,
-        href: match2[2],
-        class: "text-accent-primary underline decoration-accent-primary/40 hover:decoration-accent-primary transition-colors",
-        target: "_blank",
-        rel: "noopener noreferrer"
-      }, renderInline(match2[1]));
-    }
-    if (part.startsWith("<") && part.endsWith(">")) {
-      return h("span", { key, innerHTML: part });
-    }
-    return h("span", { key }, part);
-  };
-  const regex = /(\|\[[^\]]+\]\||\*\*\*.+?\*\*\*|\*\*.+?\*\*|_.+?_|~~.+?~~|`[^`]+?`|!~.+?~!|%[^%\s]+?%[\s\S]+?%%|!>.+?<!|==.+?==|\[[^\]]+?\]\([^)]+?\)|<[^>]+>)/g;
-  const elements = [];
-  let lastIndex = 0;
-  let match;
-  let keyCounter = 0;
-  while ((match = regex.exec(text)) !== null) {
-    if (match.index > lastIndex) {
-      elements.push(h("span", { key: `text-${keyCounter++}` }, text.slice(lastIndex, match.index)));
-    }
-    elements.push(parsePart(match[0], `inline-${keyCounter++}`));
-    lastIndex = regex.lastIndex;
-  }
-  if (lastIndex < text.length) {
-    elements.push(h("span", { key: `text-${keyCounter++}` }, text.slice(lastIndex)));
-  }
-  return elements;
-}
-function renderTable(content) {
-  const rows = content.split("\n").filter((r) => r.trim());
-  if (rows.length < 2) return h("p", content);
-  const parseRow = (row) => row.split("|").map((c) => c.trim()).filter(Boolean);
-  const headerCells = parseRow(rows[0]);
-  const bodyRows = rows.slice(2).map(parseRow);
-  return h("div", { class: "overflow-x-auto" }, [
-    h("table", { class: "w-full text-sm sm:text-base border-collapse my-4" }, [
-      h("thead", [
-        h("tr", headerCells.map(
-          (cell, ci) => h("th", {
-            key: ci,
-            class: "border border-border px-3 py-2 bg-background-secondary-solid/10 text-left font-bold"
-          }, renderInline(cell))
-        ))
-      ]),
-      h("tbody", bodyRows.map(
-        (cells, ri) => h("tr", { key: ri }, cells.map(
-          (cell, ci) => h("td", { key: ci, class: "border border-border px-3 py-2" }, renderInline(cell))
-        ))
-      ))
-    ])
-  ]);
-}
-function renderList(content) {
-  const lines = content.split("\n");
-  const items = [];
-  for (const line of lines) {
-    if (!line.trim()) continue;
-    const match = line.match(/^(\s*)([-*+]|\d+\.)\s+(.+)$/);
-    if (match) {
-      items.push({ indent: match[1].length, marker: match[2], text: match[3] });
-    }
-  }
-  if (items.length === 0) return h("p", content);
-  const isOrdered = /^\d+\.$/.test(items[0].marker);
-  const tag = isOrdered ? "ol" : "ul";
-  return h(tag, {
-    class: `${isOrdered ? "list-decimal" : "list-disc"} pl-6 my-3 space-y-1 text-sm sm:text-base`
-  }, items.map(
-    (item, index) => h("li", { key: index, class: "leading-relaxed" }, renderInline(item.text))
-  ));
-}
-function extractHeaders(elements) {
-  return elements.filter((el) => el.type === "header");
-}
-
-// vue/ui-components.ts
-import { h as h2, ref, defineComponent } from "vue";
-
 // node_modules/highlight.js/es/core.js
 var import_core = __toESM(require_core(), 1);
 var core_default = import_core.default;
@@ -11033,7 +10888,7 @@ function shell(hljs) {
   };
 }
 
-// vue/highlightSetup.ts
+// vanilla/highlightSetup.ts
 core_default.registerLanguage("javascript", javascript);
 core_default.registerLanguage("js", javascript);
 core_default.registerLanguage("jsx", javascript);
@@ -11071,754 +10926,908 @@ core_default.registerLanguage("diff", diff);
 core_default.registerLanguage("shell", shell);
 var highlightSetup_default = core_default;
 
-// vue/ui-components.ts
-var IconRenderer = defineComponent({
-  name: "IconRenderer",
-  props: {
-    iconName: { type: String, required: true },
-    extraClasses: { type: String, default: "" }
-  },
-  setup(props) {
-    return () => {
-      if (!props.iconName) return null;
-      const baseClass = `material-symbols-rounded !text-[1em] leading-none align-top ${props.extraClasses}`;
-      const isCodepoint = /^[eE][0-9a-fA-F]{3,4}$/.test(props.iconName);
-      if (isCodepoint) {
-        return h2("span", {
-          class: baseClass,
-          innerHTML: `&#x${props.iconName};`,
-          "aria-hidden": "true"
-        });
-      }
-      return h2("span", { class: baseClass, "aria-hidden": "true" }, props.iconName);
-    };
+// vanilla/components.ts
+function createIcon(iconName, extraClasses) {
+  const span = document.createElement("span");
+  const cls = `nr-icon material-icons-round${extraClasses ? ` ${extraClasses}` : ""}`;
+  span.className = cls;
+  span.setAttribute("aria-hidden", "true");
+  const isCodepoint = /^[eE][0-9a-fA-F]{3,4}$/.test(iconName);
+  if (isCodepoint) {
+    span.innerHTML = `&#x${iconName};`;
+  } else {
+    span.textContent = iconName;
   }
-});
-var CodeBlock = defineComponent({
-  name: "CodeBlock",
-  props: {
-    code: { type: String, required: true },
-    language: { type: String, default: "" },
-    title: { type: String, default: void 0 }
-  },
-  setup(props) {
-    const copied = ref(false);
-    let timer = null;
-    const lang = () => props.language?.split(/[\s{]/)[0]?.trim() || "";
-    const html = () => {
-      try {
-        if (lang() && highlightSetup_default.getLanguage(lang())) {
-          return highlightSetup_default.highlight(props.code, { language: lang() }).value;
-        }
-        return highlightSetup_default.highlightAuto(props.code).value;
-      } catch {
-        return "";
-      }
-    };
-    const handleCopy = () => {
-      navigator.clipboard.writeText(props.code);
-      copied.value = true;
-      if (timer) clearTimeout(timer);
-      timer = setTimeout(() => {
-        copied.value = false;
-      }, 1800);
-    };
-    return () => h2("div", { class: "not-prose my-4 rounded-2xl border border-border overflow-hidden bg-background-secondary-solid/5 relative" }, [
-      props.title && h2("div", { class: "flex items-center gap-2 px-4 py-2 border-b border-border bg-background-secondary-solid/10 text-xs sm:text-sm font-mono text-text-secondary" }, [
-        h2("span", { class: "material-symbols-rounded text-base" }, "description"),
-        props.title
-      ]),
-      h2("div", { class: "overflow-auto [&_pre]:m-0 [&_pre]:p-4 [&_pre]:text-xs sm:[&_pre]:text-sm" }, [
-        h2("pre", { class: "m-0" }, [
-          h2("code", {
-            class: `language-${lang() || "plaintext"}`,
-            innerHTML: html()
-          })
-        ])
-      ]),
-      h2("button", {
-        class: "absolute top-2 right-2 p-1.5 rounded-lg bg-background-secondary-solid/20 hover:bg-background-secondary-solid/40 transition-colors cursor-pointer border-none text-text-secondary hover:text-text-primary",
-        onClick: handleCopy,
-        title: "Copy code"
-      }, [
-        h2(
-          "span",
-          { class: "material-symbols-rounded", style: { fontSize: "1rem" } },
-          copied.value ? "check" : "content_copy"
-        )
-      ])
-    ]);
+  return span;
+}
+function createCodeBlock(code, language, title) {
+  const wrapper = document.createElement("div");
+  wrapper.className = "nr-codeblock";
+  const lang = language?.split(/[\s{]/)[0]?.trim() || "";
+  if (title) {
+    const header = document.createElement("div");
+    header.className = "nr-codeblock__header";
+    header.appendChild(createIcon("description"));
+    const titleSpan = document.createElement("span");
+    titleSpan.textContent = title;
+    header.appendChild(titleSpan);
+    wrapper.appendChild(header);
   }
-});
-var defaultIcons = {
+  const pre = document.createElement("pre");
+  pre.className = "nr-codeblock__pre";
+  const codeEl = document.createElement("code");
+  codeEl.className = `language-${lang || "plaintext"}`;
+  try {
+    if (lang && highlightSetup_default.getLanguage(lang)) {
+      codeEl.innerHTML = highlightSetup_default.highlight(code, { language: lang }).value;
+    } else {
+      codeEl.innerHTML = highlightSetup_default.highlightAuto(code).value;
+    }
+  } catch {
+    codeEl.textContent = code;
+  }
+  pre.appendChild(codeEl);
+  wrapper.appendChild(pre);
+  const copyBtn = document.createElement("button");
+  copyBtn.className = "nr-codeblock__copy";
+  copyBtn.title = "Copy code";
+  const copyIcon = createIcon("content_copy");
+  copyIcon.style.fontSize = "1rem";
+  copyBtn.appendChild(copyIcon);
+  let timer = null;
+  copyBtn.addEventListener("click", () => {
+    navigator.clipboard.writeText(code);
+    copyIcon.textContent = "check";
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      copyIcon.textContent = "content_copy";
+    }, 1800);
+  });
+  wrapper.appendChild(copyBtn);
+  return wrapper;
+}
+var DEFAULT_ADMONITION_ICONS = {
   note: "info",
   info: "lightbulb",
   warning: "warning",
   danger: "report",
-  greentext: "subdirectory_play_arrow"
-};
-var typeClasses = {
-  note: "border-info/20 bg-info/5 text-info",
-  info: "border-info/30 bg-info/10 text-info",
-  warning: "border-amber-500/30 bg-amber-500/10 text-amber-500",
-  danger: "border-danger/30 bg-danger/10 text-danger",
-  greentext: "border-success/30 bg-success/10 text-success"
+  greentext: "subdirectory_arrow_right"
 };
-var Admonition = defineComponent({
-  name: "Admonition",
-  props: {
-    type: { type: String, default: "note" },
-    title: { type: String, default: void 0 },
-    icon: { type: String, default: void 0 },
-    class: { type: String, default: "" },
-    style: { type: Object, default: void 0 }
-  },
-  setup(props, { slots }) {
-    return () => {
-      const iconToRender = props.icon || defaultIcons[props.type] || "info";
-      const cls = `not-prose rounded-2xl mb-6 border shadow-xs p-4 ${typeClasses[props.type] || typeClasses.note} ${props.class}`;
-      return h2("div", { class: cls, style: props.style }, [
-        props.title && h2("h5", { class: "font-bold text-base mb-2 m-0 flex items-center gap-2" }, [
-          h2(IconRenderer, { iconName: iconToRender, extraClasses: "shrink-0" }),
-          h2("span", props.title)
-        ]),
-        h2("div", { class: "text-sm leading-relaxed opacity-90" }, slots.default?.())
-      ]);
-    };
+function createAdmonition(type, title, icon) {
+  const el = document.createElement("div");
+  el.className = `nr-admonition nr-admonition--${type || "note"}`;
+  if (title) {
+    const header = document.createElement("h5");
+    header.className = "nr-admonition__title";
+    const iconToRender = icon || DEFAULT_ADMONITION_ICONS[type] || "info";
+    header.appendChild(createIcon(iconToRender, "nr-admonition__icon"));
+    const titleSpan = document.createElement("span");
+    titleSpan.textContent = title;
+    header.appendChild(titleSpan);
+    el.appendChild(header);
   }
-});
-var Details = defineComponent({
-  name: "Details",
-  props: {
-    title: { type: String, required: true },
-    icon: { type: String, default: void 0 },
-    defaultOpen: { type: Boolean, default: false },
-    class: { type: String, default: "" },
-    style: { type: Object, default: void 0 }
-  },
-  setup(props, { slots }) {
-    const isOpen = ref(props.defaultOpen);
-    const iconToRender = props.icon || "play_arrow";
-    return () => h2("details", {
-      class: `not-prose rounded-2xl border border-border mb-4 bg-background-primary/5 ${props.class}`,
-      open: isOpen.value,
-      style: props.style
-    }, [
-      h2("summary", {
-        class: "cursor-pointer p-4 font-bold flex items-center gap-2 list-none [&::-webkit-details-marker]:hidden hover:text-accent-primary transition-colors",
-        onClick: (e) => {
-          e.preventDefault();
-          isOpen.value = !isOpen.value;
-        }
-      }, [
-        h2(IconRenderer, {
-          iconName: iconToRender,
-          extraClasses: `transition-transform ${isOpen.value ? "rotate-90" : ""}`
-        }),
-        h2("span", props.title)
-      ]),
-      isOpen.value && h2("div", {
-        class: "px-4 pb-4 border-t border-border pt-3 text-sm leading-relaxed opacity-90 overflow-hidden min-w-0"
-      }, slots.default?.())
-    ]);
+  const body = document.createElement("div");
+  body.className = "nr-admonition__body";
+  el.appendChild(body);
+  return el;
+}
+function createDetails(title, icon, defaultOpen) {
+  const details = document.createElement("details");
+  details.className = "nr-details";
+  if (defaultOpen) details.open = true;
+  const summary = document.createElement("summary");
+  summary.className = "nr-details__summary";
+  const iconToRender = icon || "play_arrow";
+  const iconEl = createIcon(iconToRender, "nr-details__icon");
+  summary.appendChild(iconEl);
+  const titleSpan = document.createElement("span");
+  titleSpan.textContent = title || "Details";
+  summary.appendChild(titleSpan);
+  details.addEventListener("toggle", () => {
+    iconEl.classList.toggle("nr-details__icon--open", details.open);
+  });
+  details.appendChild(summary);
+  const body = document.createElement("div");
+  body.className = "nr-details__body";
+  details.appendChild(body);
+  return details;
+}
+function createModal(title) {
+  const dialog = document.createElement("dialog");
+  dialog.className = "nr-modal";
+  dialog.addEventListener("click", (e) => {
+    if (e.target === dialog) {
+      dialog.close();
+    }
+  });
+  const popup = document.createElement("div");
+  popup.className = "nr-modal__popup";
+  const header = document.createElement("div");
+  header.className = "nr-modal__header";
+  const titleEl = document.createElement("h2");
+  titleEl.className = "nr-modal__title";
+  titleEl.textContent = title;
+  header.appendChild(titleEl);
+  const closeBtn = document.createElement("button");
+  closeBtn.className = "nr-modal__close";
+  closeBtn.appendChild(createIcon("close"));
+  closeBtn.addEventListener("click", () => dialog.close());
+  header.appendChild(closeBtn);
+  popup.appendChild(header);
+  const body = document.createElement("div");
+  body.className = "nr-modal__body";
+  popup.appendChild(body);
+  dialog.appendChild(popup);
+  return dialog;
+}
+function createTable(content, renderInline2) {
+  const rows = content.split("\n").filter((r) => r.trim());
+  if (rows.length < 2) {
+    const p = document.createElement("p");
+    p.textContent = content;
+    return p;
   }
-});
-var Modal = defineComponent({
-  name: "Modal",
-  props: {
-    title: { type: String, required: true },
-    isOpen: { type: Boolean, required: true },
-    onClose: { type: Function, required: true }
-  },
-  setup(props, { slots }) {
-    let dialogEl = null;
-    const showDialog = () => {
-      if (dialogEl && !dialogEl.open) {
-        document.body.appendChild(dialogEl);
-        dialogEl.showModal();
-      }
-    };
-    const closeDialog = () => {
-      if (dialogEl) {
-        dialogEl.close();
-      }
-    };
-    return () => {
-      const dialog = h2("dialog", {
-        ref: (el) => {
-          dialogEl = el?.$el || el;
-        },
-        class: "nr-modal",
-        onClick: (e) => {
-          if (e.target === dialogEl) closeDialog();
-        },
-        onClosed: () => {
-          dialogEl?.remove();
-          props.onClose();
-        }
-      }, [
-        h2("div", { class: "nr-modal__popup" }, [
-          h2("div", { class: "nr-modal__header" }, [
-            h2("h2", { class: "nr-modal__title" }, props.title),
-            h2("button", {
-              class: "nr-modal__close",
-              onClick: closeDialog
-            }, [
-              h2("span", { class: "material-symbols-rounded" }, "close")
-            ])
-          ]),
-          h2("div", { class: "nr-modal__body" }, slots.default?.())
-        ])
-      ]);
-      if (props.isOpen) {
-        Promise.resolve().then(showDialog);
-      }
-      return dialog;
-    };
+  const parseRow = (row) => row.split("|").map((c) => c.trim()).filter(Boolean);
+  const headerCells = parseRow(rows[0]);
+  const bodyRows = rows.slice(2).map(parseRow);
+  const wrapper = document.createElement("div");
+  wrapper.className = "nr-table-wrap";
+  const table = document.createElement("table");
+  table.className = "nr-table";
+  const thead = document.createElement("thead");
+  const tr = document.createElement("tr");
+  for (const cell of headerCells) {
+    const th = document.createElement("th");
+    th.className = "nr-table__th";
+    th.appendChild(renderInline2(cell));
+    tr.appendChild(th);
   }
-});
-
-// vue/DirectiveRenderer.ts
-import { defineComponent as defineComponent9, h as h10 } from "vue";
-
-// vue/directives/AdmonitionDirective.ts
-import { defineComponent as defineComponent2, h as h3 } from "vue";
-var AdmonitionDirective = defineComponent2({
-  name: "AdmonitionDirective",
-  props: {
-    directiveType: String,
-    props: Object,
-    slots: Object,
-    renderSlot: Function,
-    context: Object,
-    index: [String, Number],
-    allElements: Array,
-    options: Object
-  },
-  setup(props) {
-    return () => {
-      const p = props;
-      return h3(Admonition, {
-        type: p.directiveType,
-        title: p.props.title,
-        icon: p.props.icon,
-        class: p.props.class,
-        style: p.props.style ? parseCssString(p.props.style) : void 0
-      }, p.renderSlot("default"));
-    };
+  thead.appendChild(tr);
+  table.appendChild(thead);
+  const tbody = document.createElement("tbody");
+  for (const cells of bodyRows) {
+    const tr2 = document.createElement("tr");
+    for (const cell of cells) {
+      const td = document.createElement("td");
+      td.className = "nr-table__td";
+      td.appendChild(renderInline2(cell));
+      tr2.appendChild(td);
+    }
+    tbody.appendChild(tr2);
   }
-});
-var AdmonitionDirective_default = AdmonitionDirective;
-
-// vue/directives/CardDirective.ts
-import { defineComponent as defineComponent3, h as h4 } from "vue";
+  table.appendChild(tbody);
+  wrapper.appendChild(table);
+  return wrapper;
+}
+function createList(content, renderInline2) {
+  const lines = content.split("\n");
+  const items = [];
+  for (const line of lines) {
+    if (!line.trim()) continue;
+    const match = line.match(/^(\s*)([-*+]|\d+\.)\s+(.+)$/);
+    if (match) {
+      items.push({ indent: match[1].length, marker: match[2], text: match[3] });
+    }
+  }
+  if (items.length === 0) {
+    const p = document.createElement("p");
+    p.textContent = content;
+    return p;
+  }
+  const isOrdered = /^\d+\.$/.test(items[0].marker);
+  const list = document.createElement(isOrdered ? "ol" : "ul");
+  list.className = "nr-list";
+  for (const item of items) {
+    const li = document.createElement("li");
+    li.className = "nr-list__item";
+    li.appendChild(renderInline2(item.text));
+    list.appendChild(li);
+  }
+  return list;
+}
+function createTOC(headers, renderInline2) {
+  const nav = document.createElement("nav");
+  nav.className = "nr-toc";
+  const title = document.createElement("div");
+  title.className = "nr-toc__title";
+  title.textContent = "Table of Contents";
+  nav.appendChild(title);
+  const ul = document.createElement("ul");
+  ul.className = "nr-toc__list";
+  for (const h4 of headers) {
+    const li = document.createElement("li");
+    li.className = `nr-toc__item nr-toc__item--h${h4.level}`;
+    const a = document.createElement("a");
+    a.className = "nr-toc__link";
+    a.href = `#${h4.id}`;
+    a.appendChild(renderInline2(h4.text.replace(/->|<-/g, "").trim()));
+    a.addEventListener("click", (e) => {
+      e.preventDefault();
+      const target = document.getElementById(h4.id);
+      if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+    li.appendChild(a);
+    ul.appendChild(li);
+  }
+  nav.appendChild(ul);
+  return nav;
+}
+function createBlockquote(content, classes, renderInline2) {
+  const el = document.createElement("blockquote");
+  el.className = `nr-blockquote${classes ? ` ${classes}` : ""}`;
+  el.appendChild(renderInline2(content));
+  return el;
+}
 
-// vue/context.ts
-import { inject } from "vue";
-var RenderContextKey = /* @__PURE__ */ Symbol("RenderContext");
-function useRenderContext() {
-  const ctx = inject(RenderContextKey);
-  if (!ctx) {
-    throw new Error("useRenderContext must be used within a RenderContextProvider");
+// vanilla/inline.ts
+function renderInline(text) {
+  const fragment = document.createDocumentFragment();
+  if (!text) return fragment;
+  const regex = /(\|\[[^\]]+\]\||\*\*\*.+?\*\*\*|\*\*.+?\*\*|_.+?_|~~.+?~~|`[^`]+?`|!~.+?~!|%[^%\s]+?%[\s\S]+?%%|!>.+?<!|==.+?==|\[[^\]]+?\]\([^)]+?\)|<[^>]+>)/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      fragment.appendChild(document.createTextNode(text.slice(lastIndex, match.index)));
+    }
+    fragment.appendChild(parseInlinePart(match[0]));
+    lastIndex = regex.lastIndex;
   }
-  return ctx;
+  if (lastIndex < text.length) {
+    fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
+  }
+  return fragment;
+}
+function parseInlinePart(part) {
+  let match;
+  if (match = part.match(/^\|\[([^\]]+)\]\|$/)) {
+    return createIcon(match[1]);
+  }
+  if (match = part.match(/^!~(.+?)~!$/)) {
+    const content = match[1];
+    const parts = content.split(";");
+    let color = "currentColor";
+    let decorationStyle = "solid";
+    let type = "underline";
+    let textIndex = 0;
+    if (parts[textIndex]?.match(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/) || ["red", "blue", "green", "purple", "orange", "yellow", "pink"].includes(parts[textIndex])) {
+      color = parts[textIndex++];
+    }
+    if (["solid", "double", "dotted", "dashed", "wavy"].includes(parts[textIndex])) {
+      decorationStyle = parts[textIndex++];
+    }
+    if (["underline", "line-through", "overline", "both"].includes(parts[textIndex])) {
+      type = parts[textIndex] === "both" ? "underline line-through" : parts[textIndex++];
+    }
+    const innerText = parts.slice(textIndex).join(";");
+    const span = document.createElement("span");
+    span.className = "nr-underline";
+    span.style.textDecoration = `${type} ${decorationStyle} ${color}`;
+    span.style.textDecorationThickness = "auto";
+    span.appendChild(renderInline(innerText));
+    return span;
+  }
+  if (match = part.match(/%([^%\s]+?)%([\s\S]+?)%%/)) {
+    const span = document.createElement("span");
+    span.style.color = match[1];
+    span.appendChild(renderInline(match[2]));
+    return span;
+  }
+  if (match = part.match(/^!>([^<]+?)<!$/)) {
+    const span = document.createElement("span");
+    span.className = "nr-spoiler";
+    span.appendChild(renderInline(match[1]));
+    return span;
+  }
+  if (match = part.match(/^==(.+?)==$/)) {
+    const mark = document.createElement("mark");
+    mark.className = "nr-highlight";
+    mark.appendChild(renderInline(match[1]));
+    return mark;
+  }
+  if (match = part.match(/^\*\*\*(.+?)\*\*\*$/)) {
+    const strong = document.createElement("strong");
+    const em = document.createElement("em");
+    em.appendChild(renderInline(match[1]));
+    strong.appendChild(em);
+    return strong;
+  }
+  if (match = part.match(/^\*\*(.+?)\*\*$/)) {
+    const strong = document.createElement("strong");
+    strong.appendChild(renderInline(match[1]));
+    return strong;
+  }
+  if (match = part.match(/^_(.+?)_$/)) {
+    const em = document.createElement("em");
+    em.appendChild(renderInline(match[1]));
+    return em;
+  }
+  if (match = part.match(/^~~(.+?)~~$/)) {
+    const del = document.createElement("del");
+    del.appendChild(renderInline(match[1]));
+    return del;
+  }
+  if (match = part.match(/^`([^`]+)`$/)) {
+    const code = document.createElement("code");
+    code.className = "nr-inline-code";
+    code.textContent = match[1];
+    return code;
+  }
+  if (match = part.match(/^\[([^\]]+?)\]\(([^)]+?)\)$/)) {
+    const a = document.createElement("a");
+    a.className = "nr-link";
+    a.href = match[2];
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    a.appendChild(renderInline(match[1]));
+    return a;
+  }
+  if (part.startsWith("<") && part.endsWith(">")) {
+    const span = document.createElement("span");
+    span.innerHTML = part;
+    return span;
+  }
+  return document.createTextNode(part);
 }
 
-// vue/directives/CardDirective.ts
-var CardDirective = defineComponent3({
-  name: "CardDirective",
-  props: {
-    directiveType: String,
-    props: Object,
-    slots: Object,
-    renderSlot: Function,
-    context: Object,
-    index: [String, Number],
-    allElements: Array,
-    options: { type: Object, default: () => ({}) }
-  },
-  setup(props) {
-    return () => {
-      const p = props;
-      const ctx = useRenderContext();
-      const { title, image, icon, class: customClass, url, target } = p.props;
-      const hasDescription = !!p.slots.description;
-      const { isSingleCard } = p.options || {};
-      const isModal = p.directiveType === "card-m";
-      const isLink = p.directiveType === "card-b";
-      const modalId = `modal-card-${p.props.id || Math.random().toString(36).slice(2, 9)}`;
-      const inlineStyles = p.props.style ? parseCssString(p.props.style) : {};
-      const description = hasDescription ? p.renderSlot("description") : null;
-      const content = p.renderSlot("content") || p.renderSlot("default");
-      const handleClick = isModal ? (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        ctx.setModals((prev) => ({ ...prev, [modalId]: true }));
-      } : isLink && url ? () => window.open(url, "_blank") : void 0;
-      const card = h4("div", {
-        class: `flex flex-col h-full rounded-3xl transition-all relative overflow-hidden group border min-w-[18rem] w-[18rem] max-w-[20rem] ${isModal || isLink ? "cursor-pointer !border-accent-primary/10 hover:border-accent-primary/50" : "border-border"} ${customClass || ""}`.trim(),
-        style: inlineStyles,
-        onClick: handleClick,
-        role: isModal ? "button" : void 0,
-        tabIndex: isModal ? 0 : void 0,
-        onKeyDown: isModal ? (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            ctx.setModals((prev) => ({ ...prev, [modalId]: true }));
-          }
-        } : void 0
-      }, [
-        // Image banner
-        image && h4("div", {
-          class: `w-full ${isSingleCard ? "h-[240px]" : "h-[160px]"} overflow-hidden relative transition-all duration-500`
-        }, [
-          h4("img", { src: image, alt: title || "", class: "w-full h-full object-cover !m-0" }),
-          h4("div", { class: "absolute inset-0 bg-gradient-to-t from-background-primary/40 to-transparent" })
-        ]),
-        // Content body
-        h4("div", {
-          class: `flex flex-col flex-1 bg-background-primary/80 rounded-t-xl p-6 relative ${image ? "-mt-10" : ""} border-t border-white/5 shadow-2xl`
-        }, [
-          // Header: Icon + Title
-          (icon || title) && h4("div", { class: "flex items-center gap-3 mb-3" }, [
-            icon && h4("div", {
-              class: "w-10 h-10 text-[1.6em] rounded-xl bg-accent-primary/20 flex items-center justify-center shrink-0 text-accent-primary"
-            }, h4(IconRenderer, { iconName: icon })),
-            h4("h3", { class: "text-base font-black tracking-tight leading-tight !m-0" }, title)
-          ]),
-          // Content Body
-          h4("div", { class: "flex-1 flex flex-col gap-2" }, [
-            description && h4("div", { class: "text-sm opacity-80 leading-relaxed font-medium" }, description),
-            p.directiveType === "card" && content && content.length > 0 ? h4("div", { class: "mt-2" }, content) : null
-          ]),
-          // Bottom: Action Link
-          (isModal || isLink) && h4("div", { class: "mt-6 flex justify-end" }, [
-            isLink && url ? h4("a", {
-              href: url,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              class: "bg-accent-primary/20 hover:bg-accent-primary/30 px-4 py-2 rounded-xl flex items-center gap-1.5 text-[10px] font-black uppercase tracking-widest opacity-50 group-hover:opacity-100 group-hover:text-accent-primary transition-all no-underline",
-              onClick: (e) => e.stopPropagation()
-            }, [h4(IconRenderer, { iconName: "open_in_new" }), " Link"]) : isModal ? h4("div", {
-              class: "bg-accent-primary/20 hover:bg-accent-primary/30 px-4 py-2 cursor-pointer rounded-xl flex items-center gap-1.5 text-[10px] font-black uppercase tracking-widest opacity-50 group-hover:opacity-100 group-hover:text-accent-primary transition-all"
-            }, [h4(IconRenderer, { iconName: "arrow_forward" }), " Abrir"]) : null
-          ])
-        ])
-      ]);
-      if (isModal) {
-        const modalContent = p.renderSlot("content") || p.renderSlot("default");
-        return h4("div", null, [
-          card,
-          h4(Modal, {
-            title: title || "Detalles",
-            isOpen: !!ctx.modals.value[modalId],
-            onClose: () => ctx.setModals((prev) => ({ ...prev, [modalId]: false }))
-          }, [
-            h4("div", { class: "prose prose-sm max-w-none" }, modalContent)
-          ])
-        ]);
-      }
-      return card;
-    };
+// vanilla/directives/admonition.ts
+var admonitionDirective = ({ directiveType, props, renderSlot }) => {
+  const el = createAdmonition(directiveType, props.title, props.icon);
+  if (props.class) el.classList.add(...props.class.split(/\s+/).filter(Boolean));
+  if (props.style) el.setAttribute("style", props.style);
+  const body = el.querySelector(".nr-admonition__body");
+  if (body) {
+    body.appendChild(renderSlot("default"));
   }
-});
-var CardDirective_default = CardDirective;
+  return el;
+};
+var admonition_default = admonitionDirective;
 
-// vue/directives/DetailsDirective.ts
-import { defineComponent as defineComponent4, h as h5 } from "vue";
-var DetailsDirective = defineComponent4({
-  name: "DetailsDirective",
-  props: {
-    directiveType: String,
-    props: Object,
-    slots: Object,
-    renderSlot: Function,
-    context: Object,
-    index: [String, Number],
-    allElements: Array,
-    options: Object
-  },
-  setup(props) {
-    return () => {
-      const p = props;
-      return h5(Details, {
-        title: p.props.title || "Details",
-        icon: p.props.icon,
-        defaultOpen: p.props.defaultOpen === "true",
-        class: p.props.class,
-        style: p.props.style ? parseCssString(p.props.style) : void 0
-      }, p.renderSlot("default"));
-    };
+// vanilla/directives/details.ts
+var detailsDirective = ({ props, renderSlot }) => {
+  const el = createDetails(
+    props.title || "Details",
+    props.icon,
+    props.defaultOpen === "true"
+  );
+  if (props.class) el.classList.add(...props.class.split(/\s+/).filter(Boolean));
+  if (props.style) el.setAttribute("style", props.style);
+  const body = el.querySelector(".nr-details__body");
+  if (body) {
+    body.appendChild(renderSlot("default"));
   }
-});
-var DetailsDirective_default = DetailsDirective;
+  return el;
+};
+var details_default = detailsDirective;
 
-// vue/directives/ModalDirective.ts
-import { defineComponent as defineComponent5, h as h6 } from "vue";
-var ModalDirective = defineComponent5({
-  name: "ModalDirective",
-  props: {
-    directiveType: String,
-    props: Object,
-    slots: Object,
-    renderSlot: Function,
-    context: Object,
-    index: [String, Number],
-    allElements: Array,
-    options: Object
-  },
-  setup(props) {
-    return () => {
-      const p = props;
-      const ctx = useRenderContext();
-      const modalId = `modal-${p.props.id || Math.random().toString(36).slice(2, 9)}`;
-      const label = p.props.label || p.props.title || "Open";
-      const modalTitle = p.props.title || "Modal";
-      const customClass = p.props.class || "";
-      const hasSizeClass = /\btext-(xs|sm|base|lg|xl|[2-9]xl)\b/.test(customClass);
-      const sizeClass = hasSizeClass ? "" : "text-sm";
-      const hasDisplayClass = /\b(flex|inline-flex|block|inline-block|grid|inline-grid|hidden)\b/.test(customClass);
-      const displayClass = hasDisplayClass ? "" : "inline-flex";
-      const isInlineFlex = /\binline-flex\b/.test(customClass);
-      const marginClass = isInlineFlex ? "my-1 mx-1" : "my-4";
-      const btnBase = `${displayClass} items-center w-fit ${marginClass} ${sizeClass} px-4 py-2 rounded-xl font-bold no-underline gap-2 transition-all hover:scale-105 active:scale-95 border border-border bg-background-primary/5 hover:bg-background-primary/10 text-text-primary hover:text-text-primary`.replace(/\s+/g, " ");
-      const btnClass = `${btnBase} ${customClass}`.trim();
-      const positionMap = {
-        "#left": "text-left",
-        "#center": "text-center",
-        "#right": "text-right"
-      };
-      const wrapperClass = customClass.split(/\s+/).map((c) => positionMap[c] || c).join(" ");
-      const handleOpen = () => {
-        ctx.setModals((prev) => ({ ...prev, [modalId]: true }));
-      };
-      const handleClose = () => {
-        ctx.setModals((prev) => ({ ...prev, [modalId]: false }));
-      };
-      return h6("div", { class: `not-prose ${wrapperClass}`.trim() }, [
-        h6("button", { class: btnClass, onClick: handleOpen }, [
-          p.props.icon && h6(IconRenderer, { iconName: p.props.icon }),
-          label
-        ]),
-        h6(Modal, {
-          title: modalTitle,
-          isOpen: !!ctx.modals.value[modalId],
-          onClose: handleClose
-        }, p.renderSlot("default"))
-      ]);
-    };
+// vanilla/directives/modal.ts
+var modalDirective = ({ props, renderSlot }) => {
+  const label = props.label || props.title || "Open";
+  const modalTitle = props.title || "Modal";
+  const customClass = props.class || "";
+  const wrapper = document.createElement("div");
+  wrapper.className = "nr-modal-trigger";
+  const btn = document.createElement("button");
+  btn.className = `nr-button nr-button--default`;
+  if (customClass) btn.classList.add(...customClass.split(/\s+/).filter(Boolean));
+  const icon = props.icon || "open_in_new";
+  if (icon) btn.appendChild(createIcon(icon));
+  btn.appendChild(document.createTextNode(label));
+  const dialog = createModal(modalTitle);
+  const body = dialog.querySelector(".nr-modal__body");
+  if (body) {
+    body.appendChild(renderSlot("default"));
   }
-});
-var ModalDirective_default = ModalDirective;
+  btn.addEventListener("click", () => {
+    if (!dialog.open) {
+      document.body.appendChild(dialog);
+      dialog.showModal();
+      dialog.addEventListener("close", () => {
+        dialog.remove();
+      }, { once: true });
+    }
+  });
+  wrapper.appendChild(btn);
+  wrapper.appendChild(dialog);
+  return wrapper;
+};
+var modal_default = modalDirective;
 
-// vue/directives/ButtonDirective.ts
-import { defineComponent as defineComponent6, h as h7 } from "vue";
-var ButtonDirective = defineComponent6({
-  name: "ButtonDirective",
-  props: {
-    directiveType: String,
-    props: Object,
-    slots: Object,
-    renderSlot: Function,
-    context: Object,
-    index: [String, Number],
-    allElements: Array,
-    options: Object
-  },
-  setup(props) {
-    return () => {
-      const p = props;
-      const url = p.props.url || p.props.href || "#";
-      const label = p.props.label;
-      const icon = p.props.icon || "near_me";
-      const target = p.props.target || "_blank";
-      const customClass = p.props.class || "";
-      const hasSizeClass = /\btext-(xs|sm|base|lg|xl|[2-9]xl)\b/.test(customClass);
-      const sizeClass = hasSizeClass ? "" : "text-sm";
-      const hasDisplayClass = /\b(flex|inline-flex|block|inline-block|grid|inline-grid|hidden)\b/.test(customClass);
-      const displayClass = hasDisplayClass ? "" : "inline-flex";
-      const isInline = !customClass || !/\b(flex|block|grid)\b/.test(customClass) || /\binline-flex\b/.test(customClass);
-      const marginClass = isInline ? "my-1 mx-1" : "my-4";
-      const btnBase = `${displayClass} items-center w-fit ${marginClass} ${sizeClass} px-4 py-2 rounded-xl font-bold no-underline gap-2 transition-all hover:scale-105 active:scale-95 border border-border bg-background-primary/5 hover:bg-background-primary/10 text-text-primary hover:text-text-primary`.replace(/\s+/g, " ");
-      const btnClass = `${btnBase} ${customClass}`.trim();
-      const positionMap = {
-        "#left": "flex justify-start",
-        "#center": "flex justify-center",
-        "#right": "flex justify-end"
-      };
-      const wrapperClass = customClass.split(/\s+/).map((c) => positionMap[c] || c).join(" ");
-      if (label) {
-        return h7("div", { class: `not-prose ${wrapperClass}`.trim() }, [
-          h7("a", {
-            href: url,
-            target,
-            rel: "noopener noreferrer",
-            class: btnClass
-          }, [
-            h7(IconRenderer, { iconName: icon }),
-            label
-          ])
-        ]);
-      }
-      const slotContent = p.renderSlot("default");
-      const findLinks = (vnodes) => {
-        const links2 = [];
-        for (const vnode of vnodes) {
-          if (!vnode) continue;
-          if (typeof vnode.type === "string" && vnode.type === "a") {
-            links2.push(vnode);
-          }
-          if (vnode.children && Array.isArray(vnode.children)) {
-            links2.push(...findLinks(vnode.children));
-          }
-        }
-        return links2;
-      };
-      const links = findLinks(Array.isArray(slotContent) ? slotContent : [slotContent]);
-      if (links.length > 0) {
-        return h7("div", { class: `not-prose ${wrapperClass}`.trim() }, links.map((link, i) => {
-          const linkChildren = Array.isArray(link.children) ? link.children : link.children != null ? [link.children] : [];
-          return h7("a", {
-            key: i,
-            ...link.props || {},
-            class: `${link.props?.class || ""} ${btnClass}`.trim(),
-            target,
-            rel: "noopener noreferrer"
-          }, [
-            h7(IconRenderer, { iconName: icon }),
-            ...linkChildren
-          ]);
-        }));
-      }
-      return h7("div", { class: `not-prose ${wrapperClass}`.trim() }, [
-        h7("a", {
-          href: url,
-          target,
-          rel: "noopener noreferrer",
-          class: btnClass
-        }, [
-          h7(IconRenderer, { iconName: icon }),
-          slotContent
-        ])
-      ]);
-    };
+// vanilla/directives/button.ts
+var buttonDirective = ({ props, renderSlot }) => {
+  const url = props.url || props.href || "#";
+  const label = props.label;
+  const icon = props.icon || "near_me";
+  const target = props.target || "_blank";
+  const customClass = props.class || "";
+  const wrapper = document.createElement("div");
+  wrapper.className = "nr-button-wrap";
+  if (label) {
+    const a = document.createElement("a");
+    a.href = url;
+    a.target = target;
+    a.rel = "noopener noreferrer";
+    a.className = "nr-button nr-button--default";
+    if (customClass) a.classList.add(...customClass.split(/\s+/).filter(Boolean));
+    a.appendChild(createIcon(icon));
+    a.appendChild(document.createTextNode(label));
+    wrapper.appendChild(a);
+    return wrapper;
   }
-});
-var ButtonDirective_default = ButtonDirective;
+  const slotContent = renderSlot("default");
+  const links = slotContent.querySelectorAll("a");
+  if (links.length > 0) {
+    links.forEach((link) => {
+      link.classList.add("nr-button", "nr-button--default");
+      if (customClass) link.classList.add(...customClass.split(/\s+/).filter(Boolean));
+    });
+    wrapper.appendChild(slotContent);
+  } else {
+    const a = document.createElement("a");
+    a.href = url;
+    a.target = target;
+    a.rel = "noopener noreferrer";
+    a.className = "nr-button nr-button--default";
+    if (customClass) a.classList.add(...customClass.split(/\s+/).filter(Boolean));
+    a.appendChild(createIcon(icon));
+    a.appendChild(slotContent);
+    wrapper.appendChild(a);
+  }
+  return wrapper;
+};
+var button_default = buttonDirective;
 
-// vue/directives/WrapperDirective.ts
-import { defineComponent as defineComponent7, h as h8 } from "vue";
-var WrapperDirective = defineComponent7({
-  name: "WrapperDirective",
-  props: {
-    directiveType: String,
-    props: Object,
-    slots: Object,
-    renderSlot: Function,
-    context: Object,
-    index: [String, Number],
-    allElements: Array,
-    options: Object
-  },
-  setup(props) {
-    return () => {
-      const p = props;
-      const className = p.props.class || "";
-      const id = p.props.id || "";
-      const inlineStyle = p.props.style ? parseCssString(p.props.style) : {};
-      const wrapperProps = {};
-      if (className) wrapperProps.class = className;
-      if (id) wrapperProps.id = id;
-      if (Object.keys(inlineStyle).length > 0) wrapperProps.style = inlineStyle;
-      for (const [key, value] of Object.entries(p.props)) {
-        if (key.startsWith("data-")) {
-          wrapperProps[key] = value;
-        }
+// vanilla/directives/card.ts
+var cardDirective = ({
+  directiveType,
+  props,
+  slots,
+  renderSlot,
+  options
+}) => {
+  const { title, image, icon, url, target } = props;
+  const customClass = props.class || "";
+  const hasDescription = !!slots.description;
+  const { isSingleCard } = options || {};
+  const isModal = directiveType === "card-m";
+  const isLink = directiveType === "card-b";
+  const inlineStyles = props.style ? parseCssString(props.style) : {};
+  const card = document.createElement("div");
+  card.className = `nr-card${isModal || isLink ? " nr-card--interactive" : ""} ${customClass}`.trim();
+  for (const [key, value] of Object.entries(inlineStyles)) {
+    card.style.setProperty(key, String(value));
+  }
+  if (image) {
+    const imgWrap = document.createElement("div");
+    imgWrap.className = `nr-card__image${isSingleCard ? " nr-card__image--tall" : ""}`;
+    const img = document.createElement("img");
+    img.src = image;
+    img.alt = title || "";
+    img.className = "nr-card__img";
+    imgWrap.appendChild(img);
+    const gradient = document.createElement("div");
+    gradient.className = "nr-card__gradient";
+    imgWrap.appendChild(gradient);
+    card.appendChild(imgWrap);
+  }
+  const body = document.createElement("div");
+  body.className = `nr-card__body${image ? " nr-card__body--overlap" : ""}`;
+  if (icon || title) {
+    const header = document.createElement("div");
+    header.className = "nr-card__header";
+    if (icon) {
+      const iconWrap = document.createElement("div");
+      iconWrap.className = "nr-card__icon-wrap";
+      iconWrap.appendChild(createIcon(icon));
+      header.appendChild(iconWrap);
+    }
+    if (title) {
+      const h32 = document.createElement("h3");
+      h32.className = "nr-card__title";
+      h32.textContent = title;
+      header.appendChild(h32);
+    }
+    body.appendChild(header);
+  }
+  if (hasDescription) {
+    const desc = document.createElement("div");
+    desc.className = "nr-card__description";
+    desc.appendChild(renderSlot("description"));
+    body.appendChild(desc);
+  }
+  if (directiveType === "card") {
+    const contentSlot = renderSlot("content") || renderSlot("default");
+    if (contentSlot.childNodes.length > 0) {
+      const contentDiv = document.createElement("div");
+      contentDiv.className = "nr-card__content";
+      contentDiv.appendChild(contentSlot);
+      body.appendChild(contentDiv);
+    }
+  }
+  if (isModal || isLink) {
+    const action = document.createElement("div");
+    action.className = "nr-card__action";
+    if (isLink && url) {
+      const a = document.createElement("a");
+      a.href = url;
+      a.target = target || "_blank";
+      a.rel = "noopener noreferrer";
+      a.className = "nr-card__action-link";
+      a.appendChild(createIcon("open_in_new"));
+      a.appendChild(document.createTextNode(" Link"));
+      action.appendChild(a);
+    } else if (isModal) {
+      const modalBtn = document.createElement("div");
+      modalBtn.className = "nr-card__action-link";
+      modalBtn.appendChild(createIcon("arrow_forward"));
+      modalBtn.appendChild(document.createTextNode(" Abrir"));
+      action.appendChild(modalBtn);
+    }
+    body.appendChild(action);
+  }
+  card.appendChild(body);
+  if (isModal) {
+    const dialog = createModal(title || "Detalles");
+    const modalBody = dialog.querySelector(".nr-modal__body");
+    if (modalBody) {
+      const contentSlot = renderSlot("content") || renderSlot("default");
+      modalBody.appendChild(contentSlot);
+    }
+    card.addEventListener("click", () => {
+      if (!dialog.open) {
+        document.body.appendChild(dialog);
+        dialog.showModal();
+        dialog.addEventListener("close", () => dialog.remove(), { once: true });
       }
-      return h8("div", wrapperProps, p.renderSlot("default"));
-    };
+    });
+    const frag = document.createDocumentFragment();
+    frag.appendChild(card);
+    frag.appendChild(dialog);
+    return frag;
   }
-});
-var WrapperDirective_default = WrapperDirective;
+  if (isLink && url) {
+    card.addEventListener("click", () => window.open(url, target || "_blank"));
+  }
+  return card;
+};
+var card_default = cardDirective;
 
-// vue/directives/SlideDirective.ts
-import { defineComponent as defineComponent8, h as h9, ref as ref3, onMounted, onUnmounted, nextTick } from "vue";
+// vanilla/directives/wrapper.ts
+var wrapperDirective = ({ props, renderSlot }) => {
+  const el = document.createElement("div");
+  el.className = "nr-wrapper";
+  if (props.class) el.classList.add(...props.class.split(/\s+/).filter(Boolean));
+  if (props.id) el.id = props.id;
+  if (props.style) {
+    const styles = parseCssString(props.style);
+    for (const [key, value] of Object.entries(styles)) {
+      el.style.setProperty(key, String(value));
+    }
+  }
+  for (const [key, value] of Object.entries(props)) {
+    if (key.startsWith("data-")) {
+      el.setAttribute(key, value);
+    }
+  }
+  el.appendChild(renderSlot("default"));
+  return el;
+};
+var wrapper_default = wrapperDirective;
+
+// vanilla/directives/slide.ts
 var slideCounter = 0;
-var SlideDirective = defineComponent8({
-  name: "SlideDirective",
-  props: {
-    directiveType: String,
-    props: Object,
-    slots: Object,
-    renderSlot: Function,
-    context: Object,
-    index: [String, Number],
-    allElements: Array,
-    options: Object
-  },
-  setup(props) {
-    const current = ref3(0);
-    const maxH = ref3(0);
-    let intervalId = null;
-    let slideEls = [];
-    const measureAndSetHeight = () => {
-      let h14 = 0;
+var slideDirective = ({
+  props,
+  slots,
+  renderInline: renderInline2,
+  renderMarkdown
+}) => {
+  const rawContent = slots.default || "";
+  const lines = rawContent.split("\n").map((l) => l.trim()).filter(Boolean);
+  if (lines.length === 0) {
+    return document.createDocumentFragment();
+  }
+  const interval = parseInt(props.interval || "3000", 10);
+  const speed = parseInt(props.speed || "500", 10);
+  const rawClass = props.class || "";
+  const inlineStyle = props.style ? parseCssString(props.style) : {};
+  const scopeClass = `sld-${++slideCounter}`;
+  const container = document.createElement("div");
+  container.className = "nr-slide";
+  Object.assign(container.style, {
+    position: "relative",
+    overflow: "hidden",
+    ...inlineStyle
+  });
+  const track = document.createElement("div");
+  track.className = "nr-slide__track";
+  track.style.transition = `transform ${speed}ms cubic-bezier(0.16, 1, 0.3, 1)`;
+  const slideEls = [];
+  for (const line of lines) {
+    const slideEl = document.createElement("div");
+    slideEl.className = `nr-slide__item ${scopeClass} ${rawClass}`.trim();
+    slideEl.style.display = "flex";
+    slideEl.style.alignItems = "center";
+    if (renderMarkdown) {
+      const tokens = renderMarkdown(line);
+      slideEl.appendChild(tokens);
+    } else if (renderInline2) {
+      slideEl.appendChild(renderInline2(line));
+    }
+    track.appendChild(slideEl);
+    slideEls.push(slideEl);
+  }
+  container.appendChild(track);
+  let current = 0;
+  let maxH = 0;
+  const measureAndSetHeight = () => {
+    maxH = 0;
+    for (const el of slideEls) {
+      maxH = Math.max(maxH, el.offsetHeight);
+    }
+    if (maxH > 0) {
+      container.style.height = `${maxH}px`;
       for (const el of slideEls) {
-        h14 = Math.max(h14, el.offsetHeight);
+        el.style.height = `${maxH}px`;
       }
-      if (h14 > 0) maxH.value = h14;
-    };
-    onMounted(() => {
-      nextTick(() => {
-        measureAndSetHeight();
-        if (document.fonts?.ready) {
-          document.fonts.ready.then(measureAndSetHeight);
-        }
-      });
-    });
-    onUnmounted(() => {
-      if (intervalId) clearInterval(intervalId);
-    });
-    return () => {
-      const p = props;
-      const ctx = p.context;
-      const rawContent = p.slots.default || "";
-      const lines = rawContent.split("\n").map((l) => l.trim()).filter(Boolean);
-      if (lines.length === 0) return h9("div");
-      const elements = lines.map((line) => ctx.parseMarkdown(line));
-      const interval = parseInt(p.props.interval || "3000", 10);
-      const speed = parseInt(p.props.speed || "500", 10);
-      const rawClass = p.props.class || "";
-      const inlineStyle = p.props.style ? parseCssString(p.props.style) : {};
-      const scopeClass = `sld-${++slideCounter}`;
-      if (lines.length > 1 && !intervalId) {
-        intervalId = setInterval(() => {
-          current.value = (current.value + 1) % elements.length;
-        }, interval);
-      }
-      const textSizeMap = {
-        "text-xs": "0.75rem",
-        "text-sm": "0.875rem",
-        "text-base": "1rem",
-        "text-lg": "1.125rem",
-        "text-xl": "1.25rem",
-        "text-2xl": "1.5rem",
-        "text-3xl": "1.875rem",
-        "text-4xl": "2.25rem",
-        "text-5xl": "3rem",
-        "text-6xl": "3.75rem",
-        "text-7xl": "4.5rem",
-        "text-8xl": "6rem",
-        "text-9xl": "8rem"
-      };
-      const textSizeMatch = rawClass.match(/\btext-(xs|sm|base|lg|xl|[2-9]xl)\b/);
-      const forcedFontSize = textSizeMatch ? textSizeMap[textSizeMatch[0]] : null;
-      const className = textSizeMatch ? rawClass.replace(textSizeMatch[0], "").replace(/\s+/g, " ").trim() : rawClass;
-      return h9("div", {
-        class: "not-prose",
-        style: { height: maxH.value || "auto", position: "relative", overflow: "hidden", ...inlineStyle }
-      }, [
-        forcedFontSize && h9("style", `.${scopeClass} * { font-size: ${forcedFontSize} !important; line-height: normal !important; }`),
-        h9("div", {
-          style: {
-            position: "absolute",
-            left: 0,
-            right: 0,
-            top: 0,
-            transition: `transform ${speed}ms cubic-bezier(0.16, 1, 0.3, 1)`,
-            transform: `translateY(${-current.value * maxH.value}px)`
-          }
-        }, elements.map(
-          (tokens, i) => h9("div", {
-            key: i,
-            ref: (el) => {
-              slideEls[i] = el?.$el || el;
-            },
-            style: maxH.value ? { height: maxH.value, display: "flex", alignItems: "center", overflow: "hidden" } : { display: "flex", alignItems: "center" }
-          }, [
-            h9("div", {
-              class: `${scopeClass} ${className}`.trim(),
-              style: { width: "100%" }
-            }, ctx.processAndRenderElements(tokens))
-          ])
-        ))
-      ]);
-    };
+    }
+  };
+  requestAnimationFrame(() => {
+    measureAndSetHeight();
+    if (document.fonts?.ready) {
+      document.fonts.ready.then(measureAndSetHeight);
+    }
+  });
+  if (lines.length > 1) {
+    setInterval(() => {
+      current = (current + 1) % lines.length;
+      track.style.transform = `translateY(${-current * maxH}px)`;
+    }, interval);
   }
-});
-var SlideDirective_default = SlideDirective;
+  return container;
+};
+var slide_default = slideDirective;
 
-// vue/directives/index.ts
+// vanilla/directives/index.ts
 var directiveRegistry = {
   // Admonitions
-  note: AdmonitionDirective_default,
-  info: AdmonitionDirective_default,
-  warning: AdmonitionDirective_default,
-  danger: AdmonitionDirective_default,
-  greentext: AdmonitionDirective_default,
+  note: admonition_default,
+  info: admonition_default,
+  warning: admonition_default,
+  danger: admonition_default,
+  greentext: admonition_default,
   // Cards
-  card: CardDirective_default,
-  "card-m": CardDirective_default,
-  "card-b": CardDirective_default,
+  card: card_default,
+  "card-m": card_default,
+  "card-b": card_default,
   // Interactive
-  details: DetailsDirective_default,
-  modal: ModalDirective_default,
-  button: ButtonDirective_default,
+  details: details_default,
+  modal: modal_default,
+  button: button_default,
   // Layout / generic wrappers
-  div: WrapperDirective_default,
-  style: WrapperDirective_default,
-  custom: WrapperDirective_default,
-  raw: WrapperDirective_default,
+  div: wrapper_default,
+  style: wrapper_default,
+  custom: wrapper_default,
+  raw: wrapper_default,
   // Animation
-  slide: SlideDirective_default
+  slide: slide_default
 };
 var directives_default = directiveRegistry;
 
-// vue/DirectiveRenderer.ts
-var DirectiveRenderer = defineComponent9({
-  name: "DirectiveRenderer",
-  props: {
-    element: { type: Object, required: true },
-    context: { type: Object, required: true },
-    index: { type: Number, required: true },
-    allElements: { type: Array, required: true }
-  },
-  setup(props) {
-    return () => {
-      const { element, context, index, allElements } = props;
-      const { directiveType, props: directiveProps, slots, scopeId } = element;
-      const Component = directives_default[directiveType];
-      const renderSlot = (name) => {
-        const slotContent = slots[name];
-        if (!slotContent) return [];
-        const parsed = context.parseMarkdown(slotContent);
-        return context.processAndRenderElements(parsed);
-      };
-      const componentProps = {
-        directiveType,
-        props: directiveProps,
-        slots,
-        renderSlot,
-        context,
-        index,
-        allElements
-      };
-      if (Component) {
-        return h10(Component, componentProps);
+// vanilla/renderer.ts
+function renderTokens(tokens) {
+  const article = document.createElement("article");
+  article.className = "nr-prose";
+  const ctx = {
+    parseMarkdown,
+    renderElements: (tks) => renderTokensInner(tks, ctx),
+    renderInline,
+    renderMarkdown: (md) => renderTokensInner(parseMarkdown(md), ctx)
+  };
+  article.appendChild(processElements(tokens, ctx, tokens));
+  return article;
+}
+function renderMarkdownString(markdown2) {
+  const tokens = parseMarkdown(markdown2);
+  return renderTokens(tokens);
+}
+function renderHtmlString(html) {
+  let processedContent = html;
+  processedContent = processedContent.replace(
+    /<style(?:\s+[^>]*)?>([\s\S]*?)<\/style>/gi,
+    (_match, cssContent) => {
+      const styleEl = document.createElement("style");
+      styleEl.setAttribute("data-nr-global", "");
+      styleEl.textContent = cssContent;
+      document.head.appendChild(styleEl);
+      return "";
+    }
+  );
+  const wrapper = document.createElement("div");
+  wrapper.className = "nr-raw-html";
+  wrapper.innerHTML = processedContent;
+  const scripts = wrapper.querySelectorAll("script");
+  scripts.forEach((oldScript) => {
+    const newScript = document.createElement("script");
+    Array.from(oldScript.attributes).forEach(
+      (attr) => newScript.setAttribute(attr.name, attr.value)
+    );
+    newScript.textContent = oldScript.textContent;
+    oldScript.parentNode?.replaceChild(newScript, oldScript);
+  });
+  return wrapper;
+}
+function renderTokensInner(tokens, ctx) {
+  const container = document.createElement("div");
+  container.appendChild(processElements(tokens, ctx, tokens));
+  return container;
+}
+function processElements(elements, ctx, allElements) {
+  const fragment = document.createDocumentFragment();
+  let i = 0;
+  while (i < elements.length) {
+    const el = elements[i];
+    if (el.type === "directive" && ["card", "card-m", "card-b"].includes(el.directiveType)) {
+      const cards = [];
+      while (i < elements.length && elements[i].type === "directive" && ["card", "card-m", "card-b"].includes(elements[i].directiveType)) {
+        cards.push(elements[i]);
+        i++;
       }
-      return h10("div", {
-        key: index,
-        class: "my-4 p-4 rounded-2xl border border-border bg-background-primary/5"
-      }, renderSlot("default"));
-    };
+      if (cards.length === 1 || cards[0].props?.batch === "off") {
+        for (const card of cards) {
+          const rendered = renderElement(card, ctx, allElements);
+          if (rendered) fragment.appendChild(rendered);
+        }
+      } else {
+        const grid = document.createElement("div");
+        grid.className = "nr-card-grid";
+        for (const card of cards) {
+          const rendered = renderElement(card, ctx, allElements);
+          if (rendered) grid.appendChild(rendered);
+        }
+        fragment.appendChild(grid);
+      }
+    } else {
+      const rendered = renderElement(el, ctx, allElements);
+      if (rendered) fragment.appendChild(rendered);
+      i++;
+    }
   }
-});
-var DirectiveRenderer_default = DirectiveRenderer;
-
-// vue/RawHtmlRenderer.ts
-import { defineComponent as defineComponent10, h as h11, ref as ref4, onMounted as onMounted3 } from "vue";
+  return fragment;
+}
+function renderElement(element, ctx, allElements) {
+  switch (element.type) {
+    case "header": {
+      const tag = `h${element.level}`;
+      let text = element.text;
+      const alignCenter = text.match(/^->\s*(.+?)\s*<-\s*$/);
+      const alignRight = text.match(/^->\s*(.+?)\s*->\s*$/);
+      if (alignCenter) text = alignCenter[1];
+      else if (alignRight) text = alignRight[1];
+      const h4 = document.createElement(tag);
+      h4.id = element.id;
+      let cls = `md-h${element.level}`;
+      if (alignCenter) cls += " text-center";
+      if (alignRight) cls += " text-right";
+      if (element.classes) cls += ` ${element.classes}`;
+      h4.className = cls;
+      h4.appendChild(renderInline(text));
+      return h4;
+    }
+    case "paragraph": {
+      const p = document.createElement("p");
+      let cls = "md-p";
+      if (element.classes) cls += ` ${element.classes}`;
+      if (element.align) cls += ` text-${element.align}`;
+      p.className = cls;
+      if (element.id) p.id = element.id;
+      const lines = element.content.split("\n");
+      for (let li = 0; li < lines.length; li++) {
+        const line = lines[li];
+        const hardBreakMatch = line.match(/^(.*?)(\s{2,})$/);
+        if (hardBreakMatch) {
+          p.appendChild(renderInline(hardBreakMatch[1]));
+          p.appendChild(document.createElement("br"));
+        } else {
+          p.appendChild(renderInline(line));
+          if (li < lines.length - 1) {
+            p.appendChild(document.createTextNode(" "));
+          }
+        }
+      }
+      return p;
+    }
+    case "codeblock":
+      return createCodeBlock(element.content, element.language, element.title);
+    case "directive":
+      return renderDirective(element, ctx, allElements);
+    case "html": {
+      const el = element;
+      return renderHtmlString(el.content);
+    }
+    case "html-block": {
+      const htmlBlock = element;
+      const rawProps = parseHtmlAttrs(htmlBlock.attrs);
+      const el = document.createElement(htmlBlock.tag);
+      for (const [key, value] of Object.entries(rawProps)) {
+        if (key === "style" && typeof value === "object") {
+          for (const [prop, val] of Object.entries(value)) {
+            el.style.setProperty(prop, String(val));
+          }
+        } else if (value === true) {
+          el.setAttribute(key, "");
+        } else {
+          el.setAttribute(key, String(value));
+        }
+      }
+      const childFrag = processElements(htmlBlock.children, ctx, allElements);
+      el.appendChild(childFrag);
+      return el;
+    }
+    case "image": {
+      const img = document.createElement("img");
+      img.src = element.src;
+      img.alt = element.alt;
+      img.className = "nr-image";
+      if (element.style) {
+        for (const [key, value] of Object.entries(element.style)) {
+          img.style.setProperty(key, String(value));
+        }
+      }
+      return img;
+    }
+    case "table":
+      return createTable(element.content, renderInline);
+    case "list":
+      return createList(element.content, renderInline);
+    case "blockquote":
+      return createBlockquote(element.content, element.classes, renderInline);
+    case "hr": {
+      const hr = document.createElement("hr");
+      hr.className = "nr-hr";
+      return hr;
+    }
+    case "toc": {
+      const headers = allElements.filter((e) => e.type === "header");
+      return createTOC(headers.map((h4) => ({ level: h4.level, text: h4.text, id: h4.id })), renderInline);
+    }
+    default:
+      return null;
+  }
+}
+function renderDirective(element, ctx, allElements) {
+  const { directiveType, props, slots, scopeId } = element;
+  const renderer = directives_default[directiveType];
+  const renderSlot = (name) => {
+    const frag = document.createDocumentFragment();
+    const slotContent = slots[name];
+    if (!slotContent) return frag;
+    const tokens = ctx.parseMarkdown(slotContent);
+    frag.appendChild(ctx.renderElements(tokens));
+    return frag;
+  };
+  const directiveProps = {
+    directiveType,
+    props,
+    slots,
+    renderSlot,
+    context: ctx,
+    index: 0,
+    allElements,
+    renderInline,
+    renderMarkdown: ctx.renderMarkdown
+  };
+  if (renderer) {
+    return renderer(directiveProps);
+  }
+  const fallback = document.createElement("div");
+  fallback.className = "nr-unknown-directive";
+  fallback.appendChild(renderSlot("default"));
+  return fallback;
+}
 
 // vue/useTailwindCDN.ts
-import { onMounted as onMounted2, onUnmounted as onUnmounted2, watch } from "vue";
+import { onMounted, onUnmounted, watch } from "vue";
 var CDN_URL = "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4";
 var SCRIPT_ID = "tailwind-cdn-v4-runtime";
 var CONFIG_ID = "tailwind-cdn-v4-config";
@@ -11858,10 +11867,10 @@ function useLazyTailwindCDN(enabled) {
     }
   };
   if (typeof enabled === "boolean") {
-    onMounted2(() => {
+    onMounted(() => {
       if (enabled) injectCDN();
     });
-    onUnmounted2(() => {
+    onUnmounted(() => {
       if (enabled) removeCDN();
     });
   } else {
@@ -11869,7 +11878,7 @@ function useLazyTailwindCDN(enabled) {
       if (newVal && !oldVal) injectCDN();
       if (!newVal && oldVal) removeCDN();
     }, { immediate: true });
-    onUnmounted2(() => {
+    onUnmounted(() => {
       if (enabled.value) removeCDN();
     });
   }
@@ -11882,7 +11891,7 @@ function scanTailwindCDN() {
 function preloadTailwindCDN() {
   if (typeof window === "undefined" || typeof document === "undefined") return;
   if (document.getElementById(SCRIPT_ID)) return;
-  const inject2 = () => {
+  const inject = () => {
     if (document.getElementById(SCRIPT_ID)) return;
     if (!document.getElementById(CONFIG_ID)) {
       const configScript = document.createElement("script");
@@ -11897,267 +11906,76 @@ function preloadTailwindCDN() {
     window.__twCDNRefs = (window.__twCDNRefs ?? 0) + 1;
   };
   if ("requestIdleCallback" in window) {
-    window.requestIdleCallback(inject2, { timeout: 2e3 });
+    window.requestIdleCallback(inject, { timeout: 2e3 });
   } else {
-    setTimeout(inject2, 200);
+    setTimeout(inject, 200);
   }
 }
 
-// vue/RawHtmlRenderer.ts
-var RawHtmlRenderer = defineComponent10({
-  name: "RawHtmlRenderer",
-  props: {
-    content: { type: String, required: true },
-    globalStyles: { type: String, default: void 0 },
-    wrapperClassName: { type: String, required: true }
-  },
-  setup(props) {
-    const containerRef = ref4(null);
-    onMounted3(() => {
-      if (!containerRef.value) return;
-      const scripts = containerRef.value.querySelectorAll("script");
-      scripts.forEach((oldScript) => {
-        const newScript = document.createElement("script");
-        Array.from(oldScript.attributes).forEach(
-          (attr) => newScript.setAttribute(attr.name, attr.value)
-        );
-        newScript.textContent = oldScript.textContent;
-        oldScript.parentNode?.replaceChild(newScript, oldScript);
-      });
-      scanTailwindCDN();
-    });
-    return () => {
-      const children = [
-        h11("div", { innerHTML: props.content })
-      ];
-      return h11("div", { ref: containerRef, class: props.wrapperClassName }, children);
-    };
-  }
-});
-var RawHtmlRenderer_default = RawHtmlRenderer;
-
 // vue/CustomMarkdownRenderer.ts
-var CustomMarkdownRenderer = defineComponent11({
+var CustomMarkdownRenderer = defineComponent({
   name: "CustomMarkdownRenderer",
   props: {
     content: { type: String, required: true }
   },
   setup(props) {
-    const modals = ref5({});
-    const baseId = Math.random().toString(36).slice(2, 9);
-    const articleClass = `scope-${baseId}`;
-    resetScopeCounter();
-    const allElements = computed(() => parseMarkdown(props.content));
-    const handleHashChange = () => {
-      const hash = window.location.hash;
-      if (hash) {
-        const parts = hash.split("#");
-        const id = parts[parts.length - 1];
-        scrollToId(id);
-      }
+    const container = ref(null);
+    const render = () => {
+      const el = container.value;
+      if (!el) return;
+      el.replaceChildren();
+      el.appendChild(renderMarkdownString(props.content));
+      scanTailwindCDN();
     };
-    onMounted4(() => {
+    let cleanupHash = null;
+    onMounted2(() => {
+      render();
+      const handleHashChange = () => {
+        const hash = window.location.hash;
+        if (hash) {
+          const parts = hash.split("#");
+          scrollToId(parts[parts.length - 1]);
+        }
+      };
       handleHashChange();
       window.addEventListener("hashchange", handleHashChange);
+      cleanupHash = () => window.removeEventListener("hashchange", handleHashChange);
     });
-    onUnmounted3(() => {
-      window.removeEventListener("hashchange", handleHashChange);
+    watch2(() => props.content, render);
+    onUnmounted2(() => {
+      cleanupHash?.();
     });
-    const generateToc = (elements) => {
-      const headers = extractHeaders(elements);
-      if (headers.length === 0) return null;
-      return h12("nav", { class: "not-prose my-6 p-4 rounded-2xl border border-border bg-background-primary/5" }, [
-        h12("div", { class: "text-base font-bold mb-3" }, "Table of Contents"),
-        h12("ul", { class: "space-y-1 list-none p-0 m-0" }, headers.map((h_token, i) => {
-          if (h_token.type !== "header") return null;
-          const indentClass = h_token.level <= 2 ? "pl-0" : h_token.level === 3 ? "pl-4" : h_token.level === 4 ? "pl-8" : "pl-12";
-          return h12("li", { key: i, class: `${indentClass} text-sm sm:text-base` }, [
-            h12("a", {
-              href: `#${h_token.id}`,
-              class: "text-accent-primary hover:text-accent-primary/80 no-underline hover:underline transition-colors",
-              onClick: (e) => {
-                e.preventDefault();
-                scrollToId(h_token.id);
-              }
-            }, renderInline(h_token.text.replace(/->|<-/g, "").trim()))
-          ]);
-        }))
-      ]);
-    };
-    const renderElement = (element, index, _depth = 0) => {
-      switch (element.type) {
-        case "header": {
-          const tag = `h${element.level}`;
-          let text = element.text;
-          const alignCenter = text.match(/^->\s*(.+?)\s*<-\s*$/);
-          const alignRight = text.match(/^->\s*(.+?)\s*->\s*$/);
-          if (alignCenter) text = alignCenter[1];
-          else if (alignRight) text = alignRight[1];
-          const userClasses = element.classes || "";
-          let headerClasses = `md-h${element.level}`;
-          if (alignCenter) headerClasses += " text-center";
-          if (alignRight) headerClasses += " text-right";
-          if (userClasses) headerClasses += ` ${userClasses}`;
-          return h12(tag, { key: index, id: element.id, class: headerClasses }, renderInline(text));
-        }
-        case "paragraph": {
-          const lines = element.content.split("\n");
-          const processedContent = lines.map((line, lineIndex) => {
-            const hardBreakMatch = line.match(/^(.*?)(\s{2,})$/);
-            if (hardBreakMatch) {
-              return h12("span", { key: lineIndex }, [
-                renderInline(hardBreakMatch[1]),
-                h12("br")
-              ]);
-            }
-            const isLastLine = lineIndex === lines.length - 1;
-            return h12("span", { key: lineIndex }, [
-              renderInline(line),
-              !isLastLine && " "
-            ]);
-          });
-          const pUserClasses = element.classes || "";
-          let pClasses = "md-p";
-          if (pUserClasses) pClasses += ` ${pUserClasses}`;
-          if (element.align) pClasses += ` text-${element.align}`;
-          return h12("p", { key: index, id: element.id, class: pClasses }, processedContent);
-        }
-        case "codeblock":
-          return h12(CodeBlock, {
-            key: index,
-            code: element.content,
-            language: element.language,
-            title: element.title
-          });
-        case "directive":
-          return h12(DirectiveRenderer_default, {
-            key: index,
-            element,
-            context: contextForDirectives,
-            index,
-            allElements: allElements.value
-          });
-        case "html": {
-          let processedContent = element.content;
-          let globalStyles = "";
-          processedContent = processedContent.replace(
-            /<style(?:\s+[^>]*)?>([\s\S]*?)<\/style>/gi,
-            (_match, cssContent) => {
-              globalStyles += cssContent + "\n";
-              return "";
-            }
-          );
-          return h12(RawHtmlRenderer_default, {
-            key: index,
-            content: processedContent,
-            globalStyles: globalStyles || void 0,
-            wrapperClassName: "w-full my-4"
-          });
-        }
-        case "html-block": {
-          const htmlBlock = element;
-          const rawProps = parseHtmlAttrs(htmlBlock.attrs);
-          const props2 = {};
-          for (const [key, value] of Object.entries(rawProps)) {
-            if (key === "class") props2["class"] = value;
-            else props2[key] = value;
-          }
-          return h12(
-            htmlBlock.tag,
-            { key: index, ...props2 },
-            processAndRenderElements(htmlBlock.children, _depth + 1)
-          );
-        }
-        case "image":
-          return h12("img", {
-            key: index,
-            alt: element.alt,
-            src: element.src,
-            style: element.style,
-            class: "max-w-full h-auto"
-          });
-        case "table":
-          return h12("div", { key: index }, renderTable(element.content));
-        case "list":
-          return h12("div", { key: index }, renderList(element.content));
-        case "blockquote":
-          return h12("blockquote", {
-            key: index,
-            class: `border-l-4 border-accent-primary/30 pl-4 italic text-text-secondary my-4 text-sm sm:text-base${element.classes ? ` ${element.classes}` : ""}`
-          }, renderInline(element.content));
-        case "hr":
-          return h12("hr", { key: index, class: "my-8 border-border" });
-        case "toc": {
-          const toc = generateToc(allElements.value);
-          return toc ? h12("div", { key: index }, toc) : null;
-        }
-        default:
-          return null;
-      }
-    };
-    const processAndRenderElements = (elements, depth = 0) => {
-      const result = [];
-      let i = 0;
-      while (i < elements.length) {
-        const el = elements[i];
-        if (el.type === "directive" && ["card", "card-m", "card-b"].includes(el.directiveType)) {
-          const cards = [];
-          while (i < elements.length && elements[i].type === "directive" && ["card", "card-m", "card-b"].includes(elements[i].directiveType)) {
-            cards.push(elements[i]);
-            i++;
-          }
-          if (cards.length === 1 || cards[0].props?.batch === "off") {
-            for (let c = 0; c < cards.length; c++) {
-              result.push(renderElement(cards[c], result.length, depth));
-            }
-          } else {
-            const firstCardClass = cards[0].props?.["class"] || "";
-            const justifyClasses = firstCardClass.match(/\bjustify-\S+/g) || [];
-            const wrapperJustify = justifyClasses.length > 0 ? justifyClasses.join(" ") : "";
-            result.push(h12("div", {
-              key: `card-grid-${result.length}`,
-              class: `not-prose flex flex-wrap gap-6 my-6 ${wrapperJustify}`
-            }, cards.map((card, ci) => {
-              const rendered = renderElement(card, ci, depth);
-              return rendered ? h12("span", { key: ci }, rendered) : null;
-            })));
-          }
-        } else {
-          result.push(renderElement(el, result.length, depth));
-          i++;
-        }
-      }
-      return result;
-    };
-    const setModals = (value) => {
-      if (typeof value === "function") {
-        modals.value = value(modals.value);
-      } else {
-        modals.value = value;
-      }
-    };
-    const contextForDirectives = {
-      modals,
-      setModals,
-      articleClass,
-      allElements: allElements.value,
-      parseMarkdown,
-      renderElement,
-      renderInline,
-      processAndRenderElements
-    };
-    provide(RenderContextKey, contextForDirectives);
-    return () => h12(
-      "div",
-      { class: articleClass },
-      processAndRenderElements(allElements.value)
-    );
+    return () => h("div", { ref: container });
   }
 });
 var CustomMarkdownRenderer_default = CustomMarkdownRenderer;
 
+// vue/RawHtmlRenderer.ts
+import { defineComponent as defineComponent2, h as h2, onMounted as onMounted3, ref as ref2, watch as watch3 } from "vue";
+var RawHtmlRenderer = defineComponent2({
+  name: "RawHtmlRenderer",
+  props: {
+    content: { type: String, required: true },
+    wrapperClassName: { type: String, default: "nr-raw-html" }
+  },
+  setup(props) {
+    const container = ref2(null);
+    const render = () => {
+      const el = container.value;
+      if (!el) return;
+      el.replaceChildren();
+      el.appendChild(renderHtmlString(props.content));
+      scanTailwindCDN();
+    };
+    onMounted3(render);
+    watch3(() => props.content, render);
+    return () => h2("div", { ref: container, class: props.wrapperClassName });
+  }
+});
+var RawHtmlRenderer_default = RawHtmlRenderer;
+
 // vue/NRpreviewer.ts
-var NRpreviewer = defineComponent12({
+var NRpreviewer = defineComponent3({
   name: "NRpreviewer",
   props: {
     content: { type: String, default: void 0 },
@@ -12167,23 +11985,20 @@ var NRpreviewer = defineComponent12({
     style: { type: Object, default: void 0 }
   },
   setup(props) {
-    const tailwindEnabled = ref6(props.tailwindCDN);
+    const tailwindEnabled = ref3(props.tailwindCDN);
     if (typeof window !== "undefined") {
       useLazyTailwindCDN(tailwindEnabled);
     }
     return () => {
       const wrapperClass = `nr-prose${props.className ? ` ${props.className}` : ""}`;
       if (props.content) {
-        return h13("div", { class: wrapperClass, style: props.style }, [
-          h13(CustomMarkdownRenderer_default, { content: props.content })
+        return h3("div", { class: wrapperClass, style: props.style }, [
+          h3(CustomMarkdownRenderer_default, { content: props.content })
         ]);
       }
       if (props.html) {
-        return h13("div", { class: wrapperClass, style: props.style }, [
-          h13(RawHtmlRenderer_default, {
-            content: props.html,
-            wrapperClassName: "nr-preview-html"
-          })
+        return h3("div", { class: wrapperClass, style: props.style }, [
+          h3(RawHtmlRenderer_default, { content: props.html })
         ]);
       }
       return null;
@@ -12192,14 +12007,9 @@ var NRpreviewer = defineComponent12({
 });
 var NRpreviewer_default = NRpreviewer;
 export {
-  Admonition,
-  CodeBlock,
   CustomMarkdownRenderer_default as CustomMarkdownRenderer,
-  Details,
-  IconRenderer,
-  Modal,
   NRpreviewer_default as NRpreviewer,
-  extractHeaders,
+  RawHtmlRenderer_default as RawHtmlRenderer,
   parseMarkdown,
   preloadTailwindCDN,
   scanTailwindCDN,