@noirmd/previewer 1.2.0 → 2.0.1

package/dist/slide.css

@@ -0,0 +1,21 @@
+/* ============================================================
+   NoirMD Vanilla — Slide (Animation)
+   ============================================================ */
+
+.nr-slide {
+  overflow: hidden;
+  position: relative;
+}
+
+.nr-slide__track {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+.nr-slide__item {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}

package/dist/table.css

@@ -0,0 +1,36 @@
+/* ============================================================
+   NoirMD Vanilla — Table
+   ============================================================ */
+
+.nr-table-wrap {
+  overflow-x: auto;
+}
+
+.nr-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+@media (min-width: 640px) {
+  .nr-table { font-size: 1rem; }
+}
+
+.nr-table__th {
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-weight: 700;
+  font-size: 0.75rem;
+  background: rgba(30, 41, 59, 0.1);
+  border-bottom: 1px solid var(--nr-border);
+}
+
+.nr-table__td {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--nr-border);
+}
+
+.nr-table tbody tr:last-child .nr-table__td {
+  border-bottom: none;
+}

package/dist/toc.css

@@ -0,0 +1,45 @@
+/* ============================================================
+   NoirMD Vanilla — TOC (Table of Contents)
+   ============================================================ */
+
+.nr-toc {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  border-radius: var(--nr-radius);
+  border: 1px solid var(--nr-border);
+  background: color-mix(in srgb, var(--nr-bg) 5%, transparent);
+}
+
+.nr-toc__title {
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+}
+
+.nr-toc__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.nr-toc__item {
+  margin: 0.25rem 0;
+  font-size: 0.875rem;
+}
+@media (min-width: 640px) {
+  .nr-toc__item { font-size: 1rem; }
+}
+
+.nr-toc__item--h3 { padding-left: 1rem; }
+.nr-toc__item--h4 { padding-left: 2rem; }
+.nr-toc__item--h5 { padding-left: 3rem; }
+
+.nr-toc__link {
+  color: var(--nr-accent);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.nr-toc__link:hover {
+  color: var(--nr-accent-hover);
+  text-decoration: underline;
+}

package/dist/vanilla.cjs

@@ -1582,6 +1582,10 @@ __export(vanilla_exports, {
   createTOC: () => createTOC,
   createTable: () => createTable,
   directiveRegistry: () => directives_default,
+  hasHostTheme: () => hasHostTheme,
+  injectNRTailwindTheme: () => injectNRTailwindTheme,
+  removeNRTailwindTheme: () => removeNRTailwindTheme,
+  renderHtmlString: () => renderHtmlString,
   renderInline: () => renderInline,
   renderMarkdownString: () => renderMarkdownString,
   renderTokens: () => renderTokens
@@ -1672,6 +1676,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];
@@ -1681,7 +1686,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;
@@ -10933,7 +10945,7 @@ var highlightSetup_default = core_default;
 // vanilla/components.ts
 function createIcon(iconName, extraClasses) {
   const span = document.createElement("span");
-  const cls = `nr-icon material-symbols-rounded${extraClasses ? ` ${extraClasses}` : ""}`;
+  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);
@@ -10995,7 +11007,7 @@ var DEFAULT_ADMONITION_ICONS = {
   info: "lightbulb",
   warning: "warning",
   danger: "report",
-  greentext: "subdirectory_play_arrow"
+  greentext: "subdirectory_arrow_right"
 };
 function createAdmonition(type, title, icon) {
   const el = document.createElement("div");
@@ -11314,12 +11326,16 @@ var modalDirective = ({ props, renderSlot }) => {
   const btn = document.createElement("button");
   btn.className = `nr-button nr-button--default`;
   if (customClass) btn.classList.add(...customClass.split(/\s+/).filter(Boolean));
-  if (props.icon) btn.appendChild(createIcon(props.icon));
+  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"));
+    const prose = document.createElement("div");
+    prose.className = "nr-prose";
+    prose.appendChild(renderSlot("default"));
+    body.appendChild(prose);
   }
   btn.addEventListener("click", () => {
     if (!dialog.open) {
@@ -11473,8 +11489,10 @@ var cardDirective = ({
     const dialog = createModal(title || "Detalles");
     const modalBody = dialog.querySelector(".nr-modal__body");
     if (modalBody) {
-      const contentSlot = renderSlot("content") || renderSlot("default");
-      modalBody.appendChild(contentSlot);
+      const prose = document.createElement("div");
+      prose.className = "nr-prose";
+      prose.appendChild(renderSlot("content") || renderSlot("default"));
+      modalBody.appendChild(prose);
     }
     card.addEventListener("click", () => {
       if (!dialog.open) {
@@ -11634,6 +11652,32 @@ 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));
@@ -11720,30 +11764,7 @@ function renderElement(element, ctx, allElements) {
       return renderDirective(element, ctx, allElements);
     case "html": {
       const el = element;
-      let processedContent = el.content;
-      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;
+      return renderHtmlString(el.content);
     }
     case "html-block": {
       const htmlBlock = element;
@@ -11825,6 +11846,73 @@ function renderDirective(element, ctx, allElements) {
   fallback.appendChild(renderSlot("default"));
   return fallback;
 }
+
+// vanilla/tailwindTheme.ts
+var THEME_STYLE_ID = "nr-tailwind-theme";
+var NR_THEME_CSS = `
+@theme {
+  --color-primary: var(--color-accent-primary, oklch(var(--p, 55% 0.3 240) / 1));
+  --color-primary-content: #ffffff;
+  --color-secondary: oklch(var(--s, 55% 0.25 200) / 1);
+  --color-secondary-content: #ffffff;
+  --color-accent: var(--color-accent-primary, oklch(var(--a, 65% 0.25 160) / 1));
+  --color-accent-content: #ffffff;
+  --color-neutral: oklch(var(--n, 50% 0.05 240) / 1);
+  --color-neutral-content: var(--color-text-primary, oklch(var(--nc, 92% 0.02 240) / 1));
+  --color-base-100: var(--color-background-primary, oklch(var(--b1, 15% 0.01 260) / 1));
+  --color-base-200: var(--color-background-secondary-solid, oklch(var(--b2, 20% 0.02 260) / 1));
+  --color-base-300: var(--color-border, oklch(var(--b3, 25% 0.03 260) / 1));
+  --color-base-content: var(--color-text-primary, oklch(var(--bc, 92% 0.02 260) / 1));
+  --color-info: oklch(var(--in, 70% 0.2 220) / 1);
+  --color-info-content: #ffffff;
+  --color-success: oklch(var(--su, 65% 0.25 140) / 1);
+  --color-success-content: #ffffff;
+  --color-warning: oklch(var(--wa, 80% 0.25 80) / 1);
+  --color-warning-content: #1f2937;
+  --color-error: oklch(var(--er, 65% 0.3 30) / 1);
+  --color-error-content: #ffffff;
+}
+`;
+function getVar(root, name) {
+  return getComputedStyle(root).getPropertyValue(name).trim();
+}
+function stylesheetHasTheme() {
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules = null;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (!rules) continue;
+    for (const rule of Array.from(rules)) {
+      const css2 = rule.cssText || "";
+      if (css2.includes("@theme") || css2.includes('@plugin "daisyui"')) return true;
+    }
+  }
+  return false;
+}
+function hasHostTheme() {
+  if (typeof window === "undefined" || typeof document === "undefined") return true;
+  if (getVar(document.documentElement, "--color-primary")) return true;
+  if (getVar(document.documentElement, "--color-base-100")) return true;
+  if (document.body && (getVar(document.body, "--color-primary") || getVar(document.body, "--color-base-100"))) return true;
+  return stylesheetHasTheme();
+}
+function injectNRTailwindTheme() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(THEME_STYLE_ID)) return;
+  if (hasHostTheme()) return;
+  const style = document.createElement("style");
+  style.id = THEME_STYLE_ID;
+  style.setAttribute("type", "text/tailwindcss");
+  style.textContent = NR_THEME_CSS;
+  document.head.appendChild(style);
+}
+function removeNRTailwindTheme() {
+  if (typeof document === "undefined") return;
+  document.getElementById(THEME_STYLE_ID)?.remove();
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createAdmonition,
@@ -11837,6 +11925,10 @@ function renderDirective(element, ctx, allElements) {
   createTOC,
   createTable,
   directiveRegistry,
+  hasHostTheme,
+  injectNRTailwindTheme,
+  removeNRTailwindTheme,
+  renderHtmlString,
   renderInline,
   renderMarkdownString,
   renderTokens