@noirmd/previewer 1.2.0 → 2.0.0

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,7 @@ __export(vanilla_exports, {
   createTOC: () => createTOC,
   createTable: () => createTable,
   directiveRegistry: () => directives_default,
+  renderHtmlString: () => renderHtmlString,
   renderInline: () => renderInline,
   renderMarkdownString: () => renderMarkdownString,
   renderTokens: () => renderTokens
@@ -1672,6 +1673,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 +1683,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 +10942,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 +11004,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,7 +11323,8 @@ 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");
@@ -11634,6 +11644,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 +11756,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;
@@ -11837,6 +11850,7 @@ function renderDirective(element, ctx, allElements) {
   createTOC,
   createTable,
   directiveRegistry,
+  renderHtmlString,
   renderInline,
   renderMarkdownString,
   renderTokens