@noirmd/previewer 1.1.1 → 2.0.0

package/dist/NReditor.js

@@ -1,7 +1,7 @@
 // react/NReditor.tsx
-import React9, { useRef as useRef6, useState as useState5 } from "react";
+import React2, { useRef as useRef3, useState as useState2 } from "react";
 import CodeMirror from "@uiw/react-codemirror";
-import { EditorView, Decoration, ViewPlugin, lineNumbers, scrollPastEnd, keymap } from "@codemirror/view";
+import { EditorView, Decoration, ViewPlugin, lineNumbers, keymap } from "@codemirror/view";
 
 // react/custom-syntax.ts
 import { StreamLanguage } from "@codemirror/language";
@@ -313,8 +313,64 @@ function useDebounce(value, delay) {
   return debouncedValue;
 }
 
+// react/useTailwindCDN.ts
+import { useEffect as useEffect2, useRef } from "react";
+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";
+var TAILWIND_CDN_CONFIG = `
+window.tailwind = window.tailwind || {};
+window.tailwind.config = {
+  corePlugins: {
+    preflight: false,
+  },
+};
+`;
+function useLazyTailwindCDN(enabled) {
+  const loadedRef = useRef(false);
+  useEffect2(() => {
+    if (!enabled) {
+      window.__twCDNRefs = (window.__twCDNRefs ?? 1) - 1;
+      if ((window.__twCDNRefs ?? 0) <= 0) {
+        document.getElementById(SCRIPT_ID)?.remove();
+        document.getElementById(CONFIG_ID)?.remove();
+        window.__twCDNRefs = 0;
+        loadedRef.current = false;
+      }
+      return;
+    }
+    window.__twCDNRefs = (window.__twCDNRefs ?? 0) + 1;
+    if (!document.getElementById(CONFIG_ID)) {
+      const configScript = document.createElement("script");
+      configScript.id = CONFIG_ID;
+      configScript.textContent = TAILWIND_CDN_CONFIG;
+      document.head.appendChild(configScript);
+    }
+    if (!document.getElementById(SCRIPT_ID)) {
+      const script = document.createElement("script");
+      script.id = SCRIPT_ID;
+      script.src = CDN_URL;
+      document.head.appendChild(script);
+      loadedRef.current = true;
+    }
+    return () => {
+      window.__twCDNRefs = (window.__twCDNRefs ?? 1) - 1;
+      if ((window.__twCDNRefs ?? 0) <= 0) {
+        document.getElementById(SCRIPT_ID)?.remove();
+        document.getElementById(CONFIG_ID)?.remove();
+        window.__twCDNRefs = 0;
+        loadedRef.current = false;
+      }
+    };
+  }, [enabled]);
+}
+function scanTailwindCDN() {
+  const tw = window.tailwind;
+  if (tw?.scan) tw.scan();
+}
+
 // react/CustomMarkdownRenderer.tsx
-import React8, { useState as useState4, useEffect as useEffect5, useCallback as useCallback2, useMemo, useId as useId3, useRef as useRef5 } from "react";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
 
 // core/utils.ts
 function parseCssString(cssText) {
@@ -360,9 +416,6 @@ function extractAttributes(text) {
   return { text: cleanedText, classes: classList.join(" "), id };
 }
 var _scopeCounter = 0;
-function resetScopeCounter() {
-  _scopeCounter = 0;
-}
 function generateScopeId() {
   return `scope-${++_scopeCounter}`;
 }
@@ -410,6 +463,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];
@@ -419,7 +473,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;
@@ -734,10 +795,7 @@ function splitSlots(rawContent) {
   return slots;
 }
 
-// react/ui-components.tsx
-import { useState as useState2, useRef } from "react";
-
-// react/highlightSetup.ts
+// vanilla/highlightSetup.ts
 import hljs from "highlight.js/lib/core";
 import javascript from "highlight.js/lib/languages/javascript";
 import typescript from "highlight.js/lib/languages/typescript";
@@ -786,1000 +844,947 @@ hljs.registerLanguage("java", java);
 hljs.registerLanguage("csharp", csharp);
 hljs.registerLanguage("cs", csharp);
 hljs.registerLanguage("cpp", cpp);
-hljs.registerLanguage("c", cpp);
 hljs.registerLanguage("go", go);
 hljs.registerLanguage("rust", rust);
-hljs.registerLanguage("rs", rust);
 hljs.registerLanguage("php", php);
 hljs.registerLanguage("ruby", ruby);
-hljs.registerLanguage("rb", ruby);
 hljs.registerLanguage("swift", swift);
 hljs.registerLanguage("kotlin", kotlin);
-hljs.registerLanguage("kt", kotlin);
 hljs.registerLanguage("dart", dart);
 hljs.registerLanguage("yaml", yaml);
-hljs.registerLanguage("yml", yaml);
 hljs.registerLanguage("toml", toml);
-hljs.registerLanguage("ini", toml);
 hljs.registerLanguage("dockerfile", dockerfile);
-hljs.registerLanguage("docker", dockerfile);
 hljs.registerLanguage("diff", diff);
 hljs.registerLanguage("shell", shell);
 var highlightSetup_default = hljs;
 
-// react/ui-components.tsx
-import { Dialog } from "@base-ui/react/dialog";
-import { jsx, jsxs } from "react/jsx-runtime";
-var IconRenderer = ({ iconName, extraClasses = "" }) => {
-  if (!iconName) return null;
-  const baseClass = `material-symbols-rounded !text-[1em] leading-none align-top ${extraClasses}`;
+// 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) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: baseClass,
-        dangerouslySetInnerHTML: { __html: `&#x${iconName};` },
-        "aria-hidden": "true"
-      }
-    );
+    span.innerHTML = `&#x${iconName};`;
+  } else {
+    span.textContent = iconName;
   }
-  return /* @__PURE__ */ jsx("span", { className: baseClass, "aria-hidden": "true", children: iconName });
-};
-var CodeBlock = ({ code, language, title }) => {
-  const [copied, setCopied] = useState2(false);
-  const timerRef = useRef(null);
+  return span;
+}
+function createCodeBlock(code, language, title) {
+  const wrapper = document.createElement("div");
+  wrapper.className = "nr-codeblock";
   const lang = language?.split(/[\s{]/)[0]?.trim() || "";
-  let html;
+  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);
+  }
+  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)) {
-      html = highlightSetup_default.highlight(code, { language: lang }).value;
+      codeEl.innerHTML = highlightSetup_default.highlight(code, { language: lang }).value;
     } else {
-      html = highlightSetup_default.highlightAuto(code).value;
+      codeEl.innerHTML = highlightSetup_default.highlightAuto(code).value;
     }
   } catch {
-    html = "";
+    codeEl.textContent = code;
   }
-  const handleCopy = () => {
+  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);
-    setCopied(true);
-    if (timerRef.current) clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(() => setCopied(false), 1800);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "not-prose my-4 rounded-2xl border border-border overflow-hidden bg-background-secondary-solid/5", children: [
-    title && /* @__PURE__ */ jsxs("div", { className: "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", children: [
-      /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded text-base", children: "description" }),
-      title
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-auto [&_pre]:m-0 [&_pre]:p-4 [&_pre]:text-xs sm:[&_pre]:text-sm", children: /* @__PURE__ */ jsx("pre", { className: "m-0", children: /* @__PURE__ */ jsx("code", { className: `language-${lang || "plaintext"}`, dangerouslySetInnerHTML: { __html: html } }) }) }),
-    /* @__PURE__ */ jsx("button", { className: "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", children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", style: { fontSize: "1rem" }, children: copied ? "check" : "content_copy" }) })
-  ] });
-};
-var defaultIcons = {
+    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"
+  greentext: "subdirectory_arrow_right"
 };
-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"
-};
-var Admonition = ({ type, title, icon, className = "", style, children }) => {
-  const iconToRender = icon || defaultIcons[type] || "info";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `not-prose rounded-2xl mb-6 border shadow-xs p-4 ${typeClasses[type] || typeClasses.note} ${className}`,
-      style,
-      children: [
-        title && /* @__PURE__ */ jsxs("h5", { className: "font-bold text-base mb-2 m-0 flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(IconRenderer, { iconName: iconToRender, extraClasses: "shrink-0" }),
-          /* @__PURE__ */ jsx("span", { children: title })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed opacity-90", children })
-      ]
-    }
-  );
-};
-var Details = ({
-  title,
-  icon,
-  defaultOpen = false,
-  className = "",
-  style,
-  children
-}) => {
-  const [isOpen, setIsOpen] = useState2(defaultOpen);
-  const iconToRender = icon || "play_arrow";
-  return /* @__PURE__ */ jsxs(
-    "details",
-    {
-      className: `not-prose rounded-2xl border border-border mb-4 bg-background-primary/5 ${className}`,
-      open: isOpen,
-      style,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "summary",
-          {
-            className: "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();
-              setIsOpen((prev) => !prev);
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                IconRenderer,
-                {
-                  iconName: iconToRender,
-                  extraClasses: `transition-transform ${isOpen ? "rotate-90" : ""}`
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { children: title })
-            ]
-          }
-        ),
-        isOpen && /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 border-t border-border pt-3 text-sm leading-relaxed opacity-90 overflow-hidden min-w-0", children })
-      ]
-    }
-  );
-};
-var Modal = ({ title, isOpen, onClose, children }) => {
-  return /* @__PURE__ */ jsx(Dialog.Root, { open: isOpen, onOpenChange: (open) => {
-    if (!open) onClose();
-  }, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "fixed inset-0 z-[9999] bg-black/60" }),
-    /* @__PURE__ */ jsx(Dialog.Viewport, { className: "fixed inset-0 z-[9999] flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs(Dialog.Popup, { className: "bg-background-primary border border-border shadow-2xl rounded-3xl w-full max-w-3xl max-h-[85vh] flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-4 border-b border-border bg-background-secondary-solid/20", children: [
-        /* @__PURE__ */ jsx(Dialog.Title, { className: "text-lg font-bold !m-0", children: title }),
-        /* @__PURE__ */ jsx(Dialog.Close, { className: "w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center transition-colors cursor-pointer border-none bg-transparent", children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded text-base", children: "close" }) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "p-6 overflow-auto min-h-0 text-text-primary [&_h1:first-child]:mt-0 [&_h2:first-child]:mt-0 [&_h3:first-child]:mt-0 [&_h4:first-child]:mt-0 [&_h5:first-child]:mt-0 [&_h6:first-child]:mt-0", children })
-    ] }) })
-  ] }) });
-};
-
-// react/renderers.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function renderInline(text) {
-  if (!text) return text;
-  const parsePart = (part, key) => {
-    let match2;
-    if (match2 = part.match(/^\|\[([^\]]+)\]\|$/)) {
-      return /* @__PURE__ */ jsx2(IconRenderer, { iconName: match2[1] }, key);
-    }
-    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 /* @__PURE__ */ jsx2(
-        "span",
-        {
-          style: {
-            textDecoration: `${type} ${decorationStyle} ${color}`,
-            textDecorationThickness: "auto"
-          },
-          children: renderInline(innerText)
-        },
-        key
-      );
-    }
-    if (match2 = part.match(/%([^%\s]+?)%([\s\S]+?)%%/)) {
-      return /* @__PURE__ */ jsx2("span", { style: { color: match2[1] }, children: renderInline(match2[2]) }, key);
-    }
-    if (match2 = part.match(/^!>([^<]+?)<!$/)) {
-      return /* @__PURE__ */ jsx2("span", { className: "bg-text-primary text-bg-primary px-1 rounded hover:bg-transparent transition-colors cursor-pointer", children: renderInline(match2[1]) }, key);
-    }
-    if (match2 = part.match(/^==(.+?)==$/)) {
-      return /* @__PURE__ */ jsx2("mark", { className: "bg-yellow-500/20 text-inherit px-0.5 rounded", children: renderInline(match2[1]) }, key);
-    }
-    if (match2 = part.match(/^\*\*\*(.+?)\*\*\*$/)) {
-      return /* @__PURE__ */ jsx2("strong", { children: /* @__PURE__ */ jsx2("em", { children: renderInline(match2[1]) }) }, key);
-    }
-    if (match2 = part.match(/^\*\*(.+?)\*\*$/)) {
-      return /* @__PURE__ */ jsx2("strong", { children: renderInline(match2[1]) }, key);
-    }
-    if (match2 = part.match(/^_(.+?)_$/)) {
-      return /* @__PURE__ */ jsx2("em", { children: renderInline(match2[1]) }, key);
-    }
-    if (match2 = part.match(/^~~(.+?)~~$/)) {
-      return /* @__PURE__ */ jsx2("del", { children: renderInline(match2[1]) }, key);
-    }
-    if (match2 = part.match(/^`([^`]+)`$/)) {
-      return /* @__PURE__ */ jsx2("code", { className: "text-[0.875em] font-mono bg-background-secondary/50 px-1.5 py-0.5 rounded text-text-primary", children: match2[1] }, key);
-    }
-    if (match2 = part.match(/^\[([^\]]+?)\]\(([^)]+?)\)$/)) {
-      return /* @__PURE__ */ jsx2(
-        "a",
-        {
-          href: match2[2],
-          className: "text-accent-primary underline decoration-accent-primary/40 hover:decoration-accent-primary transition-colors",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: renderInline(match2[1])
-        },
-        key
-      );
-    }
-    if (part.startsWith("<") && part.endsWith(">")) {
-      return /* @__PURE__ */ jsx2("span", { dangerouslySetInnerHTML: { __html: part } }, key);
-    }
-    return 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(text.slice(lastIndex, match.index));
-    }
-    elements.push(parsePart(match[0], `inline-${keyCounter++}`));
-    lastIndex = regex.lastIndex;
-  }
-  if (lastIndex < text.length) {
-    elements.push(text.slice(lastIndex));
+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);
   }
-  return elements;
+  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 renderTable(content) {
+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) return /* @__PURE__ */ jsx2("p", { children: content });
+  if (rows.length < 2) {
+    const p = document.createElement("p");
+    p.textContent = content;
+    return p;
+  }
   const parseRow = (row) => row.split("|").map((c) => c.trim()).filter(Boolean);
   const headerCells = parseRow(rows[0]);
   const bodyRows = rows.slice(2).map(parseRow);
-  return /* @__PURE__ */ jsx2("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs2("table", { className: "w-full text-sm sm:text-base border-collapse my-4", children: [
-    /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: headerCells.map((cell, ci) => /* @__PURE__ */ jsx2("th", { className: "border border-border px-3 py-2 bg-background-secondary-solid/10 text-left font-bold", children: renderInline(cell) }, ci)) }) }),
-    /* @__PURE__ */ jsx2("tbody", { children: bodyRows.map((cells, ri) => /* @__PURE__ */ jsx2("tr", { children: cells.map((cell, ci) => /* @__PURE__ */ jsx2("td", { className: "border border-border px-3 py-2", children: renderInline(cell) }, ci)) }, ri)) })
-  ] }) });
+  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);
+  }
+  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);
+  }
+  table.appendChild(tbody);
+  wrapper.appendChild(table);
+  return wrapper;
 }
-function renderList(content) {
+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]
-      });
+      items.push({ indent: match[1].length, marker: match[2], text: match[3] });
     }
   }
-  if (items.length === 0) return /* @__PURE__ */ jsx2("p", { children: content });
+  if (items.length === 0) {
+    const p = document.createElement("p");
+    p.textContent = content;
+    return p;
+  }
   const isOrdered = /^\d+\.$/.test(items[0].marker);
-  const Tag = isOrdered ? "ol" : "ul";
-  return /* @__PURE__ */ jsx2(Tag, { className: `${isOrdered ? "list-decimal" : "list-disc"} pl-6 my-3 space-y-1 text-sm sm:text-base`, children: items.map((item, index) => /* @__PURE__ */ jsx2("li", { className: "leading-relaxed", children: renderInline(item.text) }, index)) });
+  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 h of headers) {
+    const li = document.createElement("li");
+    li.className = `nr-toc__item nr-toc__item--h${h.level}`;
+    const a = document.createElement("a");
+    a.className = "nr-toc__link";
+    a.href = `#${h.id}`;
+    a.appendChild(renderInline2(h.text.replace(/->|<-/g, "").trim()));
+    a.addEventListener("click", (e) => {
+      e.preventDefault();
+      const target = document.getElementById(h.id);
+      if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+    li.appendChild(a);
+    ul.appendChild(li);
+  }
+  nav.appendChild(ul);
+  return nav;
 }
-function extractHeaders(elements) {
-  return elements.filter((el) => el.type === "header");
+function createBlockquote(content, classes, renderInline2) {
+  const el = document.createElement("blockquote");
+  el.className = `nr-blockquote${classes ? ` ${classes}` : ""}`;
+  el.appendChild(renderInline2(content));
+  return el;
 }
 
-// react/directives/AdmonitionDirective.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var AdmonitionDirective = ({
-  directiveType,
-  props,
-  renderSlot
-}) => {
-  return /* @__PURE__ */ jsx3(
-    Admonition,
-    {
-      type: directiveType,
-      title: props.title,
-      icon: props.icon,
-      className: props.class,
-      style: props.style ? parseCssString(props.style) : void 0,
-      children: renderSlot("default")
+// 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)));
     }
-  );
-};
-var AdmonitionDirective_default = AdmonitionDirective;
+    fragment.appendChild(parseInlinePart(match[0]));
+    lastIndex = regex.lastIndex;
+  }
+  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);
+}
 
-// react/directives/CardDirective.tsx
-import React2, { useId } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var CardDirective = ({
-  directiveType,
-  props,
-  slots,
-  renderSlot,
-  context,
-  options = {}
-}) => {
-  const stableId = useId();
-  const { title, image, icon, class: customClass, url, target } = props;
-  const hasDescription = !!slots.description;
-  const { isSingleCard } = options;
-  const isModal = directiveType === "card-m";
-  const isLink = directiveType === "card-b";
-  const modalId = `modal-card-${props.id || stableId}`;
-  const wrapperClass = customClass || "";
-  const inlineStyles = props.style ? parseCssString(props.style) : {};
-  const description = hasDescription ? renderSlot("description") : null;
-  const content = renderSlot("content") || renderSlot("default");
-  return /* @__PURE__ */ jsxs3(React2.Fragment, { children: [
-    /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        className: `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"} ${wrapperClass}`,
-        style: inlineStyles,
-        onClick: isModal ? (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          context.setModals((prev) => ({ ...prev, [modalId]: true }));
-        } : isLink && url ? () => window.open(url, "_blank") : void 0,
-        role: isModal ? "button" : void 0,
-        tabIndex: isModal ? 0 : void 0,
-        onKeyDown: isModal ? (e) => {
-          if (e.key === "Enter" || e.key === " ") context.setModals((prev) => ({ ...prev, [modalId]: true }));
-        } : void 0,
-        children: [
-          image && /* @__PURE__ */ jsxs3("div", { className: `w-full ${isSingleCard ? "h-[240px]" : "h-[160px]"} overflow-hidden relative transition-all duration-500`, children: [
-            /* @__PURE__ */ jsx4("img", { src: image, alt: title || "", className: "w-full h-full object-cover !m-0" }),
-            /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 bg-gradient-to-t from-background-primary/40 to-transparent" })
-          ] }),
-          /* @__PURE__ */ jsxs3("div", { className: `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`, children: [
-            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 mb-3", children: [
-              icon && /* @__PURE__ */ jsx4("div", { className: "w-10 h-10 text-[1.6em] rounded-xl bg-accent-primary/20 flex items-center justify-center shrink-0 text-accent-primary", children: /* @__PURE__ */ jsx4(IconRenderer, { iconName: icon }) }),
-              /* @__PURE__ */ jsx4("h3", { className: "text-base font-black tracking-tight leading-tight !m-0", children: title })
-            ] }),
-            /* @__PURE__ */ jsxs3("div", { className: "flex-1 flex flex-col gap-2", children: [
-              description && /* @__PURE__ */ jsx4("div", { className: "text-sm opacity-80 leading-relaxed font-medium", children: description }),
-              directiveType === "card" && content && /* @__PURE__ */ jsx4("div", { className: "mt-2", children: content })
-            ] }),
-            (isModal || isLink) && /* @__PURE__ */ jsx4("div", { className: "mt-6 flex justify-end", children: isLink && url ? /* @__PURE__ */ jsxs3(
-              "a",
-              {
-                href: url,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: "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(),
-                children: [
-                  /* @__PURE__ */ jsx4(IconRenderer, { iconName: "open_in_new" }),
-                  " Link"
-                ]
-              }
-            ) : isModal ? /* @__PURE__ */ jsxs3("div", { className: "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", children: [
-              /* @__PURE__ */ jsx4(IconRenderer, { iconName: "arrow_forward" }),
-              " Abrir"
-            ] }) : null })
-          ] })
-        ]
-      }
-    ),
-    isModal && /* @__PURE__ */ jsx4(
-      Modal,
-      {
-        title: title || "Detalles",
-        isOpen: !!context.modals[modalId],
-        onClose: () => context.setModals((prev) => ({ ...prev, [modalId]: false })),
-        children: /* @__PURE__ */ jsx4("div", { className: "prose prose-sm max-w-none", children: content })
-      }
-    )
-  ] });
+// 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"));
+  }
+  return el;
 };
-var CardDirective_default = CardDirective;
+var admonition_default = admonitionDirective;
 
-// react/directives/DetailsDirective.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var DetailsDirective = ({
-  props,
-  renderSlot
-}) => {
-  return /* @__PURE__ */ jsx5(
-    Details,
-    {
-      title: props.title || "Details",
-      icon: props.icon,
-      defaultOpen: props.defaultOpen === "true",
-      className: props.class,
-      style: props.style ? parseCssString(props.style) : void 0,
-      children: 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"));
+  }
+  return el;
 };
-var DetailsDirective_default = DetailsDirective;
+var details_default = detailsDirective;
 
-// react/directives/ModalDirective.tsx
-import { useId as useId2 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var ModalDirective = ({
-  props,
-  renderSlot,
-  context
-}) => {
-  const stableId = useId2();
-  const modalId = `modal-${props.id || stableId}`;
+// 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 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 = () => {
-    context.setModals((prev) => ({ ...prev, [modalId]: true }));
-  };
-  const handleClose = () => {
-    context.setModals((prev) => ({ ...prev, [modalId]: false }));
-  };
-  return /* @__PURE__ */ jsxs4("div", { className: `not-prose ${wrapperClass}`.trim(), children: [
-    /* @__PURE__ */ jsxs4("button", { className: btnClass, onClick: handleOpen, children: [
-      props.icon && /* @__PURE__ */ jsx6(IconRenderer, { iconName: props.icon }),
-      label
-    ] }),
-    /* @__PURE__ */ jsx6(
-      Modal,
-      {
-        title: modalTitle,
-        isOpen: !!context.modals[modalId],
-        onClose: handleClose,
-        children: renderSlot("default")
-      }
-    )
-  ] });
+  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"));
+  }
+  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 ModalDirective_default = ModalDirective;
+var modal_default = modalDirective;
 
-// react/directives/ButtonDirective.tsx
-import React4 from "react";
-import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var ButtonDirective = ({
-  props,
-  renderSlot
-}) => {
+// 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 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(" ");
+  const wrapper = document.createElement("div");
+  wrapper.className = "nr-button-wrap";
   if (label) {
-    return /* @__PURE__ */ jsx7("div", { className: `not-prose ${wrapperClass}`.trim(), children: /* @__PURE__ */ jsxs5(
-      "a",
-      {
-        href: url,
-        target,
-        rel: "noopener noreferrer",
-        className: btnClass,
-        children: [
-          /* @__PURE__ */ jsx7(IconRenderer, { iconName: icon }),
-          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;
   }
   const slotContent = renderSlot("default");
-  const findLinks = (element) => {
-    if (!element) return [];
-    if (React4.isValidElement(element) && element.type === "a") {
-      return [element];
-    }
-    if (Array.isArray(element)) {
-      return element.flatMap(findLinks);
-    }
-    if (React4.isValidElement(element) && element.props.children) {
-      return findLinks(element.props.children);
-    }
-    return [];
-  };
-  const links = findLinks(slotContent);
+  const links = slotContent.querySelectorAll("a");
   if (links.length > 0) {
-    return /* @__PURE__ */ jsx7("div", { className: `not-prose ${wrapperClass}`.trim(), children: links.map(
-      (link, index) => React4.cloneElement(
-        link,
-        {
-          key: index,
-          className: `${link.props.className || ""} ${btnClass}`.trim(),
-          target,
-          rel: "noopener noreferrer"
-        },
-        /* @__PURE__ */ jsxs5(Fragment, { children: [
-          /* @__PURE__ */ jsx7(IconRenderer, { iconName: icon }),
-          link.props.children
-        ] })
-      )
-    ) });
+    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 /* @__PURE__ */ jsx7("div", { className: `not-prose ${wrapperClass}`.trim(), children: /* @__PURE__ */ jsxs5("a", { href: url, target, rel: "noopener noreferrer", className: btnClass, children: [
-    /* @__PURE__ */ jsx7(IconRenderer, { iconName: icon }),
-    slotContent
-  ] }) });
+  return wrapper;
 };
-var ButtonDirective_default = ButtonDirective;
+var button_default = buttonDirective;
 
-// react/directives/WrapperDirective.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var WrapperDirective = ({
+// vanilla/directives/card.ts
+var cardDirective = ({
+  directiveType,
   props,
-  renderSlot
+  slots,
+  renderSlot,
+  options
 }) => {
-  const className = props.class || "";
-  const id = props.id || "";
-  const inlineStyle = props.style ? parseCssString(props.style) : {};
-  const wrapperProps = {};
-  if (className) wrapperProps.className = className;
-  if (id) wrapperProps.id = id;
-  if (Object.keys(inlineStyle).length > 0) wrapperProps.style = inlineStyle;
+  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 h3 = document.createElement("h3");
+      h3.className = "nr-card__title";
+      h3.textContent = title;
+      header.appendChild(h3);
+    }
+    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 });
+      }
+    });
+    const frag = document.createDocumentFragment();
+    frag.appendChild(card);
+    frag.appendChild(dialog);
+    return frag;
+  }
+  if (isLink && url) {
+    card.addEventListener("click", () => window.open(url, target || "_blank"));
+  }
+  return card;
+};
+var card_default = cardDirective;
+
+// 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-")) {
-      wrapperProps[key] = value;
+      el.setAttribute(key, value);
     }
   }
-  return /* @__PURE__ */ jsx8("div", { ...wrapperProps, children: renderSlot("default") });
+  el.appendChild(renderSlot("default"));
+  return el;
 };
-var WrapperDirective_default = WrapperDirective;
+var wrapper_default = wrapperDirective;
 
-// react/directives/SlideDirective.tsx
-import { useState as useState3, useEffect as useEffect2, useCallback, useRef as useRef2, useLayoutEffect } from "react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+// vanilla/directives/slide.ts
 var slideCounter = 0;
-var SlideDirective = ({
+var slideDirective = ({
   props,
-  context,
-  slots
+  slots,
+  renderInline: renderInline2,
+  renderMarkdown
 }) => {
   const rawContent = slots.default || "";
   const lines = rawContent.split("\n").map((l) => l.trim()).filter(Boolean);
-  const elements = lines.map((line) => context.parseMarkdown(line));
-  const [current, setCurrent] = useState3(0);
+  if (lines.length === 0) {
+    return document.createDocumentFragment();
+  }
   const interval = parseInt(props.interval || "3000", 10);
   const speed = parseInt(props.speed || "500", 10);
-  const elRefs = useRef2([]);
-  const [maxH, setMaxH] = useState3(0);
-  useLayoutEffect(() => {
-    let h = 0;
-    elRefs.current.forEach((el) => {
-      if (el) h = Math.max(h, el.offsetHeight);
-    });
-    if (h > 0) setMaxH(h);
-  }, [elements]);
-  const cycle = useCallback(() => {
-    if (elements.length <= 1) return;
-    setCurrent((prev) => (prev + 1) % elements.length);
-  }, [elements.length]);
-  useEffect2(() => {
-    if (elements.length <= 1) return;
-    const id = setInterval(cycle, interval);
-    return () => clearInterval(id);
-  }, [cycle, interval, elements.length]);
-  if (elements.length === 0) return null;
   const rawClass = props.class || "";
   const inlineStyle = props.style ? parseCssString(props.style) : {};
-  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 scopeClass = `sld-${++slideCounter}`;
-  const className = textSizeMatch ? rawClass.replace(textSizeMatch[0], "").replace(/\s+/g, " ").trim() : rawClass;
-  return /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      className: "not-prose",
-      style: { height: maxH || "auto", position: "relative", overflow: "hidden", ...inlineStyle },
-      children: [
-        forcedFontSize && /* @__PURE__ */ jsx9("style", { children: `.${scopeClass} * { font-size: ${forcedFontSize} !important; line-height: normal !important; }` }),
-        /* @__PURE__ */ jsx9(
-          "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 * maxH}px)`
-            },
-            children: elements.map((tokens, i) => /* @__PURE__ */ jsx9(
-              "div",
-              {
-                ref: (el) => {
-                  elRefs.current[i] = el;
-                },
-                style: maxH ? { height: maxH, display: "flex", alignItems: "center", overflow: "hidden" } : { display: "flex", alignItems: "center" },
-                children: /* @__PURE__ */ jsx9("div", { className: `${scopeClass} ${className}`, style: { width: "100%" }, children: context.processAndRenderElements(tokens) })
-              },
-              i
-            ))
-          }
-        )
-      ]
+  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) {
+        el.style.height = `${maxH}px`;
+      }
     }
-  );
+  };
+  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);
+  }
+  return container;
 };
-var SlideDirective_default = SlideDirective;
+var slide_default = slideDirective;
 
-// react/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;
 
-// react/DirectiveRenderer.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-var DirectiveRenderer = ({
-  element,
-  context,
-  index,
-  allElements
-}) => {
+// 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++;
+      }
+      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++;
+    }
+  }
+  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 h = document.createElement(tag);
+      h.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}`;
+      h.className = cls;
+      h.appendChild(renderInline(text));
+      return h;
+    }
+    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((h) => ({ level: h.level, text: h.text, id: h.id })), renderInline);
+    }
+    default:
+      return null;
+  }
+}
+function renderDirective(element, ctx, allElements) {
   const { directiveType, props, slots, scopeId } = element;
-  const Component = directives_default[directiveType];
+  const renderer = directives_default[directiveType];
   const renderSlot = (name) => {
+    const frag = document.createDocumentFragment();
     const slotContent = slots[name];
-    if (!slotContent) return null;
-    const parsed = context.parseMarkdown(slotContent);
-    return context.processAndRenderElements(parsed);
+    if (!slotContent) return frag;
+    const tokens = ctx.parseMarkdown(slotContent);
+    frag.appendChild(ctx.renderElements(tokens));
+    return frag;
   };
   const directiveProps = {
     directiveType,
     props,
     slots,
     renderSlot,
-    context,
-    index,
-    allElements
+    context: ctx,
+    index: 0,
+    allElements,
+    renderInline,
+    renderMarkdown: ctx.renderMarkdown
   };
-  if (Component) {
-    return /* @__PURE__ */ jsx10(Component, { ...directiveProps }, index);
+  if (renderer) {
+    return renderer(directiveProps);
   }
-  return /* @__PURE__ */ jsx10("div", { className: `my-4 p-4 rounded-2xl border border-border bg-background-primary/5`, children: renderSlot("default") }, index);
-};
-var DirectiveRenderer_default = DirectiveRenderer;
-
-// react/RawHtmlRenderer.tsx
-import { useRef as useRef4, useEffect as useEffect4 } from "react";
-
-// react/useTailwindCDN.ts
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
-function scanTailwindCDN() {
-  const tw = window.tailwind;
-  if (tw?.scan) tw.scan();
+  const fallback = document.createElement("div");
+  fallback.className = "nr-unknown-directive";
+  fallback.appendChild(renderSlot("default"));
+  return fallback;
 }
 
-// react/RawHtmlRenderer.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var RawHtmlRenderer = ({
-  content,
-  globalStyles,
-  wrapperClassName
-}) => {
-  const containerRef = useRef4(null);
-  useEffect4(() => {
-    if (!containerRef.current) return;
-    const scripts = containerRef.current.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();
-  }, [content]);
-  useEffect4(() => {
-    if (!globalStyles) return;
-    const styleEl = document.createElement("style");
-    styleEl.setAttribute("data-global", "");
-    styleEl.textContent = globalStyles;
-    document.head.appendChild(styleEl);
-    return () => {
-      if (styleEl.parentNode) document.head.removeChild(styleEl);
-    };
-  }, [globalStyles]);
-  return /* @__PURE__ */ jsx11("div", { className: wrapperClassName, ref: containerRef, children: /* @__PURE__ */ jsx11("div", { dangerouslySetInnerHTML: { __html: content } }) });
-};
-var RawHtmlRenderer_default = RawHtmlRenderer;
-
-// react/context.tsx
-import { createContext, useContext } from "react";
-var RenderCtx = createContext(null);
-var RenderContextProvider = RenderCtx.Provider;
-
 // react/CustomMarkdownRenderer.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-var CustomMarkdownRenderer = ({ content: initialContent }) => {
-  const [modals, setModals] = useState4({});
-  const baseId = useId3().replace(/:/g, "");
-  const articleClass = `scope-${baseId}`;
-  const contextRef = useRef5(null);
-  resetScopeCounter();
-  const allElements = useMemo(() => parseMarkdown(initialContent), [initialContent]);
-  useEffect5(() => {
+import { jsx } from "react/jsx-runtime";
+var CustomMarkdownRenderer = ({ content }) => {
+  const containerRef = useRef2(null);
+  useEffect3(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.replaceChildren();
+    container.appendChild(renderMarkdownString(content));
+    scanTailwindCDN();
     const handleHashChange = () => {
       const hash = window.location.hash;
       if (hash) {
         const parts = hash.split("#");
-        const id = parts[parts.length - 1];
-        scrollToId(id);
+        scrollToId(parts[parts.length - 1]);
       }
     };
     handleHashChange();
     window.addEventListener("hashchange", handleHashChange);
     return () => window.removeEventListener("hashchange", handleHashChange);
-  }, [initialContent]);
-  const renderElement = useCallback2(
-    (element, index, _depth = 0) => {
-      switch (element.type) {
-        case "header": {
-          const HeaderTag = `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 React8.createElement(
-            HeaderTag,
-            { key: index, id: element.id, className: 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 /* @__PURE__ */ jsxs7(React8.Fragment, { children: [
-                renderInline(hardBreakMatch[1]),
-                /* @__PURE__ */ jsx12("br", {})
-              ] }, lineIndex);
-            }
-            const isLastLine = lineIndex === lines.length - 1;
-            return /* @__PURE__ */ jsxs7(React8.Fragment, { children: [
-              renderInline(line),
-              !isLastLine && " "
-            ] }, lineIndex);
-          });
-          const pUserClasses = element.classes || "";
-          let pClasses = "md-p";
-          if (pUserClasses) pClasses += ` ${pUserClasses}`;
-          if (element.align) pClasses += ` text-${element.align}`;
-          return /* @__PURE__ */ jsx12("p", { id: element.id, className: pClasses, children: processedContent }, index);
-        }
-        case "codeblock":
-          return /* @__PURE__ */ jsx12(
-            CodeBlock,
-            {
-              code: element.content,
-              language: element.language,
-              title: element.title
-            },
-            index
-          );
-        case "directive":
-          return /* @__PURE__ */ jsx12(
-            DirectiveRenderer_default,
-            {
-              element,
-              context: contextRef.current,
-              index,
-              allElements
-            },
-            index
-          );
-        case "html": {
-          let processedContent = element.content;
-          let globalStyles = "";
-          processedContent = processedContent.replace(
-            /<style(?:\s+[^>]*)?>([\s\S]*?)<\/style>/gi,
-            (_match, cssContent) => {
-              globalStyles += cssContent + "\n";
-              return "";
-            }
-          );
-          const wrapperClassName = "w-full my-4";
-          return /* @__PURE__ */ jsx12(
-            RawHtmlRenderer_default,
-            {
-              content: processedContent,
-              globalStyles: globalStyles || void 0,
-              wrapperClassName
-            },
-            index
-          );
-        }
-        case "html-block": {
-          const htmlBlock = element;
-          const rawProps = parseHtmlAttrs(htmlBlock.attrs);
-          const props = {};
-          for (const [key, value] of Object.entries(rawProps)) {
-            if (key === "class") props["className"] = value;
-            else if (key === "for") props["htmlFor"] = value;
-            else if (key === "tabindex") props["tabIndex"] = value;
-            else props[key] = value;
-          }
-          return React8.createElement(
-            htmlBlock.tag,
-            { key: index, ...props },
-            ...processAndRenderElements(htmlBlock.children, _depth + 1)
-          );
-        }
-        case "image":
-          return /* @__PURE__ */ jsx12(
-            "img",
-            {
-              alt: element.alt,
-              src: element.src,
-              style: element.style,
-              className: "max-w-full h-auto"
-            },
-            index
-          );
-        case "table":
-          return /* @__PURE__ */ jsx12("div", { children: renderTable(element.content) }, index);
-        case "list":
-          return /* @__PURE__ */ jsx12("div", { children: renderList(element.content) }, index);
-        case "blockquote":
-          return /* @__PURE__ */ jsx12("blockquote", { className: `border-l-4 border-accent-primary/30 pl-4 italic text-text-secondary my-4 text-sm sm:text-base${element.classes ? ` ${element.classes}` : ""}`, children: renderInline(element.content) }, index);
-        case "hr":
-          return /* @__PURE__ */ jsx12("hr", { className: "my-8 border-border" }, index);
-        case "toc":
-          return /* @__PURE__ */ jsx12("div", { children: generateToc(allElements) }, index);
-        default:
-          return null;
-      }
-    },
-    [allElements]
-  );
-  const processAndRenderElements = useCallback2(
-    (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(
-              /* @__PURE__ */ jsx12("div", { className: `not-prose flex flex-wrap gap-6 my-6 ${wrapperJustify}`, children: cards.map((card, ci) => /* @__PURE__ */ jsx12(React8.Fragment, { children: renderElement(card, ci, depth) }, ci)) }, `card-grid-${result.length}`)
-            );
-          }
-        } else {
-          result.push(renderElement(el, result.length, depth));
-          i++;
-        }
-      }
-      return result;
-    },
-    [renderElement]
-  );
-  const generateToc = (elements) => {
-    const headers = extractHeaders(elements);
-    if (headers.length === 0) return null;
-    return /* @__PURE__ */ jsxs7("nav", { className: "not-prose my-6 p-4 rounded-2xl border border-border bg-background-primary/5", children: [
-      /* @__PURE__ */ jsx12("div", { className: "text-base font-bold mb-3", children: "Table of Contents" }),
-      /* @__PURE__ */ jsx12("ul", { className: "space-y-1 list-none p-0 m-0", children: headers.map((h, i) => {
-        if (h.type !== "header") return null;
-        const indentClass = h.level <= 2 ? "pl-0" : h.level === 3 ? "pl-4" : h.level === 4 ? "pl-8" : "pl-12";
-        return /* @__PURE__ */ jsx12("li", { className: `${indentClass} text-sm sm:text-base`, children: /* @__PURE__ */ jsx12(
-          "a",
-          {
-            href: `#${h.id}`,
-            className: "text-accent-primary hover:text-accent-primary/80 no-underline hover:underline transition-colors",
-            onClick: (e) => {
-              e.preventDefault();
-              scrollToId(h.id);
-            },
-            children: renderInline(h.text.replace(/->|<-/g, "").trim())
-          }
-        ) }, i);
-      }) })
-    ] });
-  };
-  const contextForDirectives = {
-    modals,
-    setModals,
-    articleClass,
-    allElements,
-    parseMarkdown,
-    renderElement,
-    renderInline,
-    processAndRenderElements
-  };
-  contextRef.current = contextForDirectives;
-  return /* @__PURE__ */ jsx12(RenderContextProvider, { value: contextForDirectives, children: processAndRenderElements(allElements) });
+  }, [content]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef });
 };
 var CustomMarkdownRenderer_default = CustomMarkdownRenderer;
 
 // react/NReditor.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var customSyntaxHighlighting = HighlightStyle.define([
   { tag: t2.heading, fontWeight: "bold", color: "var(--tc-heading, #e2e8f0)" },
   { tag: t2.quote, color: "var(--tc-quote, #94a3b8)", fontStyle: "italic" },
@@ -2228,12 +2233,15 @@ var NReditor = ({
   onChange,
   className,
   debounceMs = 300,
-  tailwindCDN = false
+  tailwindCDN = false,
+  onGuide,
+  onConfig
 }) => {
-  const editorRef = useRef6(null);
-  const [isAllFolded, setIsAllFolded] = useState5(false);
-  const [editorMode, setEditorMode] = useState5("editor");
+  const editorRef = useRef3(null);
+  const [isAllFolded, setIsAllFolded] = useState2(false);
+  const [editorMode, setEditorMode] = useState2("split");
   const debouncedContent = useDebounce(value, debounceMs);
+  useLazyTailwindCDN(tailwindCDN);
   const handleToggleFold = () => {
     if (!editorRef.current) return;
     if (isAllFolded) {
@@ -2244,7 +2252,7 @@ var NReditor = ({
       setIsAllFolded(true);
     }
   };
-  const extensions = React9.useMemo(
+  const extensions = React2.useMemo(
     () => [
       customStreamParserV2,
       lineNumbers(),
@@ -2264,7 +2272,6 @@ var NReditor = ({
       customEditorTheme,
       syntaxHighlighting(customSyntaxHighlighting),
       EditorView.lineWrapping,
-      scrollPastEnd(),
       keymap.of([
         { key: "Ctrl-Shift-[", run: foldAll },
         { key: "Ctrl-Shift-]", run: unfoldAll }
@@ -2281,43 +2288,73 @@ var NReditor = ({
     { key: "split", icon: "vertical_split", label: "Split" },
     { key: "preview", icon: "visibility", label: "Preview" }
   ];
-  return /* @__PURE__ */ jsxs8("div", { className: `relative flex-1 flex flex-col min-h-0 ${className || ""}`, children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between px-2 py-1.5 border-b border-border/30 bg-background-secondary-solid/50 rounded-t-2xl shrink-0", children: [
-      /* @__PURE__ */ jsx13(
-        "button",
-        {
-          onClick: handleToggleFold,
-          className: "p-1 px-2 text-xs font-bold bg-background-secondary-solid border border-border rounded hover:bg-border text-accent-primary transition-colors",
-          title: isAllFolded ? "Expand all" : "Collapse all",
-          children: isAllFolded ? "\u2569" : "\u2566"
-        }
-      ),
-      /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-0.5 bg-black/10 dark:bg-white/5 rounded-lg p-0.5", children: modeButtons.map((btn) => /* @__PURE__ */ jsxs8(
-        "button",
-        {
-          onClick: () => setEditorMode(btn.key),
-          className: `flex items-center gap-1 px-2.5 py-1 text-xs rounded-md transition-colors ${editorMode === btn.key ? "bg-accent-primary/20 text-accent-primary font-semibold" : "text-text-secondary hover:text-text-primary hover:bg-white/5"}`,
-          title: btn.label,
-          children: [
-            /* @__PURE__ */ jsx13("span", { className: "material-symbols-rounded text-sm", children: btn.icon }),
-            /* @__PURE__ */ jsx13("span", { className: "hidden sm:inline", children: btn.label })
-          ]
-        },
-        btn.key
-      )) })
+  return /* @__PURE__ */ jsxs("div", { className: `nr-editor ${className || ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "nr-editor-toolbar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "nr-editor-toolbar-left", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: handleToggleFold,
+            className: "nr-toolbar-btn nr-toolbar-btn-fold",
+            title: isAllFolded ? "Expandir todo" : "Colapsar todo",
+            "aria-label": isAllFolded ? "Expandir todo" : "Colapsar todo",
+            children: /* @__PURE__ */ jsx2("span", { className: "material-icons-round", children: isAllFolded ? "unfold_more" : "unfold_less" })
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { className: "nr-toolbar-divider" }),
+        /* @__PURE__ */ jsx2("div", { className: "nr-toolbar-mode-group", children: modeButtons.map((btn) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setEditorMode(btn.key),
+            className: `nr-toolbar-btn nr-toolbar-btn-mode ${editorMode === btn.key ? "nr-toolbar-btn-mode--active" : ""} ${btn.key === "split" ? "nr-toolbar-btn-split" : ""}`,
+            title: btn.label,
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "material-icons-round", children: btn.icon }),
+              /* @__PURE__ */ jsx2("span", { className: "nr-toolbar-label", children: btn.label })
+            ]
+          },
+          btn.key
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "nr-editor-toolbar-right", children: [
+        onGuide && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: onGuide,
+            className: "nr-toolbar-btn nr-toolbar-btn-sm nr-toolbar-btn-guide",
+            title: "Gu\xEDa de sintaxis",
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "material-icons-round", children: "menu_book" }),
+              /* @__PURE__ */ jsx2("span", { className: "nr-toolbar-label", children: "Gu\xEDa" })
+            ]
+          }
+        ),
+        onGuide && onConfig && /* @__PURE__ */ jsx2("div", { className: "nr-toolbar-divider" }),
+        onConfig && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: onConfig,
+            className: "nr-toolbar-btn nr-toolbar-btn-sm nr-toolbar-btn-config",
+            title: "Configurar tema y metadata",
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "material-icons-round", children: "tune" }),
+              /* @__PURE__ */ jsx2("span", { className: "nr-toolbar-label", children: "Configurar" })
+            ]
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "flex-1 min-h-0 flex", children: [
-      (editorMode === "editor" || editorMode === "split") && /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsxs("div", { className: "nr-editor-body", children: [
+      (editorMode === "editor" || editorMode === "split") && /* @__PURE__ */ jsx2(
         "div",
         {
-          className: `${editorMode === "split" ? "w-1/2 border-r border-border/30" : "w-full"} flex-1 flex flex-col min-h-0 min-w-0`,
-          children: /* @__PURE__ */ jsx13(
+          className: `nr-editor-pane ${editorMode === "split" ? "nr-editor-pane--half" : ""}`,
+          children: /* @__PURE__ */ jsx2(
             CodeMirror,
             {
               value,
               onChange,
-              className: "flex-1 min-h-0 min-w-0",
-              height: "100%",
+              height: "auto",
               onCreateEditor: (view) => {
                 editorRef.current = view;
               },
@@ -2330,11 +2367,11 @@ var NReditor = ({
           )
         }
       ),
-      (editorMode === "preview" || editorMode === "split") && /* @__PURE__ */ jsx13(
+      (editorMode === "preview" || editorMode === "split") && /* @__PURE__ */ jsx2(
         "div",
         {
-          className: `${editorMode === "split" ? "w-1/2" : "w-full"} flex-1 min-h-0 overflow-auto min-w-0`,
-          children: /* @__PURE__ */ jsx13("div", { className: "nr-prose h-full shadow-xs overflow-auto p-4", children: /* @__PURE__ */ jsx13(CustomMarkdownRenderer_default, { content: debouncedContent }) })
+          className: `nr-editor-preview ${editorMode === "split" ? "nr-editor-preview--half" : ""}`,
+          children: /* @__PURE__ */ jsx2("div", { className: "nr-editor-prose", children: /* @__PURE__ */ jsx2("div", { className: "nr-prose", children: /* @__PURE__ */ jsx2(CustomMarkdownRenderer_default, { content: debouncedContent }) }) })
         }
       )
     ] })