@noirmd/previewer 2.1.3 → 2.1.5

package/dist/vanilla.cjs

@@ -1672,6 +1672,22 @@ function parseHtmlAttrs(attrsString) {
 }
 
 // core/parser.ts
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
 function parseMarkdown(markdown2) {
   if (!markdown2) return [];
   const lines = markdown2.replace(/\r\n/g, "\n").replace(/\r/g, "").split("\n");
@@ -1685,8 +1701,19 @@ function parseMarkdown(markdown2) {
     if (match = trimmed.match(/^(#{1,6})\s+(.+)$/)) {
       const level = match[1].length;
       const rawText = match[2];
-      const { text: text2, classes: classes2, id: customId } = extractAttributes(rawText);
-      const baseId = customId || generateId(text2.replace(/->|<-/g, ""));
+      const { text: rawParsedText, classes: classes2, id: customId } = extractAttributes(rawText);
+      let text2 = rawParsedText;
+      let align;
+      const alignCenter = text2.match(/^->\s*(.+?)\s*<-\s*$/);
+      const alignRight = text2.match(/^->\s*(.+?)\s*->\s*$/);
+      if (alignCenter) {
+        text2 = alignCenter[1];
+        align = "center";
+      } else if (alignRight) {
+        text2 = alignRight[1];
+        align = "right";
+      }
+      const baseId = customId || generateId(text2);
       let id2 = baseId;
       let n = 1;
       while (usedIds.has(id2)) {
@@ -1694,7 +1721,7 @@ function parseMarkdown(markdown2) {
         id2 = `${baseId}-${n}`;
       }
       usedIds.add(id2);
-      result.push({ type: "header", level, text: text2, id: id2, classes: classes2 || void 0 });
+      result.push({ type: "header", level, text: text2, id: id2, classes: classes2 || void 0, align });
       i++;
       continue;
     }
@@ -1870,29 +1897,13 @@ function parseMarkdown(markdown2) {
     let tagStartMatch = trimmed.match(/^<([a-zA-Z][\w-]*)/);
     if (tagStartMatch) {
       const tagName = tagStartMatch[1].toLowerCase();
-      const voidElements = /* @__PURE__ */ new Set([
-        "area",
-        "base",
-        "br",
-        "col",
-        "embed",
-        "hr",
-        "img",
-        "input",
-        "link",
-        "meta",
-        "param",
-        "source",
-        "track",
-        "wbr"
-      ]);
       const remainingText = lines.slice(i).join("\n");
       const openTagRegex = new RegExp(`^\\s*<${tagName}\\b([^>]*?)>`, "i");
       const openTagMatch = remainingText.match(openTagRegex);
       if (openTagMatch) {
         const fullOpenTag = openTagMatch[0];
         const attrs = openTagMatch[1].replace(/\s+/g, " ").trim();
-        const isSelfClosing = fullOpenTag.endsWith("/>") || voidElements.has(tagName);
+        const isSelfClosing = fullOpenTag.endsWith("/>") || VOID_ELEMENTS.has(tagName);
         if (isSelfClosing) {
           const blockText = remainingText.substring(0, openTagMatch.index + fullOpenTag.length);
           const consumedLines = blockText.split("\n").length;
@@ -11286,11 +11297,77 @@ function parseInlinePart(part) {
   return document.createTextNode(part);
 }
 
+// vanilla/utils.ts
+var THEME_TOKENS = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "accent",
+  "neutral",
+  "info",
+  "success",
+  "warning",
+  "error"
+]);
+function isThemeToken(color) {
+  return !!color && THEME_TOKENS.has(color);
+}
+function isArbitraryColor(value) {
+  if (THEME_TOKENS.has(value)) return false;
+  if (/^(#|rgb|hsl|oklch|oklab|lab|lch|color\()/i.test(value)) return true;
+  if (/^[a-zA-Z]+$/.test(value)) return true;
+  return false;
+}
+function applyBaseProps(el, props) {
+  if (props.class) {
+    el.classList.add(...props.class.split(/\s+/).filter(Boolean));
+  }
+  if (props.style) {
+    const styles = parseCssString(props.style);
+    for (const [key, value] of Object.entries(styles)) {
+      el.style.setProperty(key, String(value));
+    }
+  }
+}
+function applyFloatStyle(el, float, width) {
+  if (!float) return;
+  if (float === "left" || float === "right") {
+    el.style.float = float;
+    if (!width) el.style.maxWidth = "50%";
+    el.style.marginInlineStart = float === "right" ? "1rem" : "";
+    el.style.marginInlineEnd = float === "left" ? "1rem" : "";
+  } else if (float === "center") {
+    el.style.marginInline = "auto";
+  }
+}
+function applyColor(el, color, classSuffix) {
+  if (!color) return "";
+  if (isThemeToken(color)) {
+    return ` ${classSuffix}--${color}`;
+  }
+  if (isArbitraryColor(color)) {
+    el.style.background = color;
+    el.style.color = "white";
+  }
+  return "";
+}
+function openModal(dialog) {
+  if (!dialog.open) {
+    document.body.appendChild(dialog);
+    dialog.showModal();
+    dialog.addEventListener("close", () => dialog.remove(), { once: true });
+  }
+}
+var IMG_RE = /!\[([^\]]*)\]\(([^)]+)\)/g;
+function parseIntProp(value, defaultValue) {
+  if (!value) return defaultValue;
+  const n = parseInt(value, 10);
+  return Number.isNaN(n) ? defaultValue : n;
+}
+
 // 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);
+  applyBaseProps(el, props);
   const body = el.querySelector(".nr-admonition__body");
   if (body) {
     body.appendChild(renderSlot("default"));
@@ -11306,8 +11383,7 @@ var detailsDirective = ({ props, renderSlot }) => {
     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);
+  applyBaseProps(el, props);
   const body = el.querySelector(".nr-details__body");
   if (body) {
     body.appendChild(renderSlot("default"));
@@ -11320,12 +11396,12 @@ var details_default = detailsDirective;
 var modalDirective = ({ props, renderSlot }) => {
   const label = props.label || props.title || "Open";
   const modalTitle = props.title || "Modal";
-  const customClass = props.class || "";
+  const align = props.align || "left";
   const wrapper = document.createElement("div");
-  wrapper.className = "nr-modal-trigger";
+  wrapper.className = `nr-modal-trigger${align === "center" ? " nr-modal-trigger--center" : align === "right" ? " nr-modal-trigger--right" : ""}`;
   const btn = document.createElement("button");
   btn.className = `nr-button nr-button--default`;
-  if (customClass) btn.classList.add(...customClass.split(/\s+/).filter(Boolean));
+  applyBaseProps(btn, props);
   const icon = props.icon || "open_in_new";
   if (icon) btn.appendChild(createIcon(icon));
   btn.appendChild(document.createTextNode(label));
@@ -11337,15 +11413,7 @@ var modalDirective = ({ props, renderSlot }) => {
     prose.appendChild(renderSlot("default"));
     body.appendChild(prose);
   }
-  btn.addEventListener("click", () => {
-    if (!dialog.open) {
-      document.body.appendChild(dialog);
-      dialog.showModal();
-      dialog.addEventListener("close", () => {
-        dialog.remove();
-      }, { once: true });
-    }
-  });
+  btn.addEventListener("click", () => openModal(dialog));
   wrapper.appendChild(btn);
   wrapper.appendChild(dialog);
   return wrapper;
@@ -11355,19 +11423,20 @@ var modal_default = modalDirective;
 // vanilla/directives/button.ts
 var buttonDirective = ({ props, renderSlot }) => {
   const url = props.url || props.href || "#";
-  const label = props.label;
+  const label = props.label || props.title;
   const icon = props.icon || "near_me";
   const target = props.target || "_blank";
   const customClass = props.class || "";
+  const align = props.align || "left";
   const wrapper = document.createElement("div");
-  wrapper.className = "nr-button-wrap";
+  wrapper.className = `nr-button-wrap${align === "center" ? " nr-button-wrap--center" : align === "right" ? " nr-button-wrap--right" : ""}`;
   if (label) {
     const a = document.createElement("a");
     a.href = url;
     a.target = target;
     a.rel = "noopener noreferrer";
     a.className = "nr-button nr-button--default";
-    if (customClass) a.classList.add(...customClass.split(/\s+/).filter(Boolean));
+    applyBaseProps(a, props);
     a.appendChild(createIcon(icon));
     a.appendChild(document.createTextNode(label));
     wrapper.appendChild(a);
@@ -11378,7 +11447,7 @@ var buttonDirective = ({ props, renderSlot }) => {
   if (links.length > 0) {
     links.forEach((link) => {
       link.classList.add("nr-button", "nr-button--default");
-      if (customClass) link.classList.add(...customClass.split(/\s+/).filter(Boolean));
+      applyBaseProps(link, props);
     });
     wrapper.appendChild(slotContent);
   } else {
@@ -11387,7 +11456,7 @@ var buttonDirective = ({ props, renderSlot }) => {
     a.target = target;
     a.rel = "noopener noreferrer";
     a.className = "nr-button nr-button--default";
-    if (customClass) a.classList.add(...customClass.split(/\s+/).filter(Boolean));
+    applyBaseProps(a, props);
     a.appendChild(createIcon(icon));
     a.appendChild(slotContent);
     wrapper.appendChild(a);
@@ -11410,12 +11479,9 @@ var cardDirective = ({
   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));
-  }
+  applyBaseProps(card, props);
   if (image) {
     const imgWrap = document.createElement("div");
     imgWrap.className = `nr-card__image${isSingleCard ? " nr-card__image--tall" : ""}`;
@@ -11494,13 +11560,7 @@ var cardDirective = ({
       prose.appendChild(renderSlot("content") || renderSlot("default"));
       modalBody.appendChild(prose);
     }
-    card.addEventListener("click", () => {
-      if (!dialog.open) {
-        document.body.appendChild(dialog);
-        dialog.showModal();
-        dialog.addEventListener("close", () => dialog.remove(), { once: true });
-      }
-    });
+    card.addEventListener("click", () => openModal(dialog));
     const frag = document.createDocumentFragment();
     frag.appendChild(card);
     frag.appendChild(dialog);
@@ -11548,8 +11608,8 @@ var slideDirective = ({
   if (lines.length === 0) {
     return document.createDocumentFragment();
   }
-  const interval = parseInt(props.interval || "3000", 10);
-  const speed = parseInt(props.speed || "500", 10);
+  const interval = parseIntProp(props.interval, 3e3);
+  const speed = parseIntProp(props.speed, 500);
   const rawClass = props.class || "";
   const inlineStyle = props.style ? parseCssString(props.style) : {};
   const scopeClass = `sld-${++slideCounter}`;
@@ -11600,10 +11660,11 @@ var slideDirective = ({
     }
   });
   if (lines.length > 1) {
-    setInterval(() => {
+    const id = setInterval(() => {
       current = (current + 1) % lines.length;
       track.style.transform = `translateY(${-current * maxH}px)`;
     }, interval);
+    container.dataset.nrIntervalId = String(id);
   }
   return container;
 };
@@ -11613,8 +11674,7 @@ var slide_default = slideDirective;
 var keysDirective = ({ props, slots }) => {
   const wrap = document.createElement("div");
   wrap.className = "nr-keys";
-  if (props.class) wrap.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) wrap.setAttribute("style", props.style);
+  applyBaseProps(wrap, props);
   const sizeClass = props.size ? ` nr-kbd--${props.size}` : "";
   const parts = (slots.default || "").split("+").map((p) => p.trim()).filter(Boolean);
   parts.forEach((part, i) => {
@@ -11638,8 +11698,7 @@ var accordionCounter = 0;
 var accordionItemDirective = ({ props, renderSlot }) => {
   const item = document.createElement("div");
   item.className = "nr-accordion__item";
-  if (props.class) item.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) item.setAttribute("style", props.style);
+  applyBaseProps(item, props);
   const input = document.createElement("input");
   input.type = "radio";
   input.className = "nr-accordion__input";
@@ -11658,8 +11717,7 @@ var accordionItemDirective = ({ props, renderSlot }) => {
 var accordionDirective = ({ props, renderSlot }) => {
   const wrap = document.createElement("div");
   wrap.className = "nr-accordion";
-  if (props.class) wrap.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) wrap.setAttribute("style", props.style);
+  applyBaseProps(wrap, props);
   wrap.appendChild(renderSlot("default"));
   const mode = props.mode === "checkbox" ? "checkbox" : "radio";
   const group = `nr-acc-${++accordionCounter}`;
@@ -11672,7 +11730,6 @@ var accordionDirective = ({ props, renderSlot }) => {
 var accordion_default = accordionDirective;
 
 // vanilla/directives/carousel.ts
-var IMG_RE = /!\[([^\]]*)\]\(([^)]+)\)/g;
 var carouselDirective = ({ props, slots }) => {
   const images = [];
   const raw = slots.default || "";
@@ -11688,19 +11745,9 @@ var carouselDirective = ({ props, slots }) => {
   wrap.className = "nr-carousel";
   wrap.tabIndex = 0;
   wrap.setAttribute("aria-label", "Image carousel");
-  if (props.class) wrap.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) wrap.setAttribute("style", props.style);
+  applyBaseProps(wrap, props);
   if (props.width) wrap.style.width = props.width;
-  if (props.float) {
-    if (props.float === "left" || props.float === "right") {
-      wrap.style.float = props.float;
-      if (!props.width) wrap.style.maxWidth = "50%";
-      wrap.style.marginInlineStart = props.float === "right" ? "1rem" : "";
-      wrap.style.marginInlineEnd = props.float === "left" ? "1rem" : "";
-    } else if (props.float === "center") {
-      wrap.style.marginInline = "auto";
-    }
-  }
+  applyFloatStyle(wrap, props.float, props.width);
   const viewport = document.createElement("div");
   viewport.className = "nr-carousel__viewport";
   if (props.height) viewport.style.height = props.height;
@@ -11770,11 +11817,10 @@ var DEFAULT_LABELS = ["days", "hours", "min", "sec"];
 var countdownDirective = ({ props }) => {
   const wrap = document.createElement("div");
   wrap.className = "nr-countdown";
-  if (props.class) wrap.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) wrap.setAttribute("style", props.style);
+  applyBaseProps(wrap, props);
   const labelParts = (props.labels || "").split("|").map((s) => s.trim());
   const labels = DEFAULT_LABELS.map((label, i) => labelParts[i] || label);
-  const digits = parseInt(props.digits || "2", 10);
+  const digits = parseIntProp(props.digits, 2);
   const targetTime = props.target ? new Date(props.target).getTime() : NaN;
   const hasTarget = !Number.isNaN(targetTime);
   const blocks = [];
@@ -11821,13 +11867,15 @@ var countdownDirective = ({ props }) => {
     blocks.push({ value });
   });
   render();
-  if (hasTarget) setInterval(render, 1e3);
+  if (hasTarget) {
+    const id = setInterval(render, 1e3);
+    wrap.dataset.nrIntervalId = String(id);
+  }
   return wrap;
 };
 var countdown_default = countdownDirective;
 
 // vanilla/directives/diff.ts
-var IMG_RE2 = /!\[([^\]]*)\]\(([^)]+)\)/g;
 var diffDirective = ({ props, slots }) => {
   let before = (props.before || "").split("#")[0].trim();
   let after = (props.after || "").split("#")[0].trim();
@@ -11835,8 +11883,8 @@ var diffDirective = ({ props, slots }) => {
     const urls = [];
     const raw = slots.default || "";
     let m;
-    IMG_RE2.lastIndex = 0;
-    while ((m = IMG_RE2.exec(raw)) !== null) {
+    IMG_RE.lastIndex = 0;
+    while ((m = IMG_RE.exec(raw)) !== null) {
       urls.push(m[2].split("#")[0].trim());
     }
     if (!before && urls.length > 0) before = urls[0];
@@ -11849,21 +11897,11 @@ var diffDirective = ({ props, slots }) => {
   figure.className = "nr-diff";
   figure.tabIndex = 0;
   figure.setAttribute("aria-label", "Image comparison slider");
-  if (props.class) figure.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) figure.setAttribute("style", props.style);
+  applyBaseProps(figure, props);
   if (props.aspect) figure.style.aspectRatio = props.aspect;
   if (props.height) figure.style.height = props.height;
   if (props.width) figure.style.width = props.width;
-  if (props.float) {
-    if (props.float === "left" || props.float === "right") {
-      figure.style.float = props.float;
-      if (!props.width) figure.style.maxWidth = "50%";
-      figure.style.marginInlineStart = props.float === "right" ? "1rem" : "";
-      figure.style.marginInlineEnd = props.float === "left" ? "1rem" : "";
-    } else if (props.float === "center") {
-      figure.style.marginInline = "auto";
-    }
-  }
+  applyFloatStyle(figure, props.float, props.width);
   const beforeItem = document.createElement("div");
   beforeItem.className = "nr-diff__item nr-diff__item--before";
   beforeItem.setAttribute("role", "img");
@@ -11926,8 +11964,7 @@ var diff_default = diffDirective;
 var hover3dDirective = ({ props, renderSlot }) => {
   const container = document.createElement("div");
   container.className = "nr-hover-3d";
-  if (props.class) container.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) container.setAttribute("style", props.style);
+  applyBaseProps(container, props);
   const stage = document.createElement("div");
   stage.className = "nr-hover-3d__stage";
   stage.appendChild(renderSlot("default"));
@@ -11940,14 +11977,13 @@ var hover3dDirective = ({ props, renderSlot }) => {
 var hover3d_default = hover3dDirective;
 
 // vanilla/directives/hovergallery.ts
-var IMG_RE3 = /!\[([^\]]*)\]\(([^)]+)\)/g;
 var MAX_IMAGES = 10;
 var hovergalleryDirective = ({ props, slots }) => {
   const images = [];
   const raw = slots.default || "";
   let m;
-  IMG_RE3.lastIndex = 0;
-  while ((m = IMG_RE3.exec(raw)) !== null) {
+  IMG_RE.lastIndex = 0;
+  while ((m = IMG_RE.exec(raw)) !== null) {
     images.push({ src: m[2].split("#")[0].trim(), alt: m[1].trim() || "gallery image" });
   }
   if (images.length === 0) {
@@ -11956,9 +11992,8 @@ var hovergalleryDirective = ({ props, slots }) => {
   const count = Math.min(images.length, MAX_IMAGES);
   const figure = document.createElement("figure");
   figure.className = "nr-hover-gallery";
+  applyBaseProps(figure, props);
   if (props.aspect) figure.style.aspectRatio = props.aspect;
-  if (props.class) figure.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) figure.setAttribute("style", (figure.getAttribute("style") || "") + ";" + props.style);
   const imgEls = [];
   for (let i = 0; i < count; i++) {
     const el = document.createElement("img");
@@ -12008,28 +12043,11 @@ var hovergalleryDirective = ({ props, slots }) => {
 var hovergallery_default = hovergalleryDirective;
 
 // vanilla/directives/chat.ts
-var CHAT_THEME_TOKENS = /* @__PURE__ */ new Set([
-  "primary",
-  "secondary",
-  "accent",
-  "neutral",
-  "info",
-  "success",
-  "warning",
-  "error"
-]);
-function isArbitraryColor(value) {
-  if (CHAT_THEME_TOKENS.has(value)) return false;
-  if (/^(#|rgb|hsl|oklch|oklab|lab|lch|color\()/i.test(value)) return true;
-  if (/^[a-zA-Z]+$/.test(value)) return true;
-  return false;
-}
 var chatItemDirective = ({ props, renderSlot }) => {
   const side = props.side === "end" ? "end" : "start";
   const wrap = document.createElement("div");
   wrap.className = `nr-chat nr-chat--${side}`;
-  if (props.class) wrap.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) wrap.setAttribute("style", props.style);
+  applyBaseProps(wrap, props);
   const header = document.createElement("div");
   header.className = "nr-chat__header";
   if (props.name) {
@@ -12054,14 +12072,8 @@ var chatItemDirective = ({ props, renderSlot }) => {
     avatar.appendChild(img);
     wrap.appendChild(avatar);
   }
-  const isThemeToken = CHAT_THEME_TOKENS.has(props.color || "");
-  const colorClass = isThemeToken ? ` nr-chat__bubble--${props.color}` : "";
   const bubble = document.createElement("div");
-  bubble.className = `nr-chat__bubble${colorClass}`;
-  if (props.color && isArbitraryColor(props.color) && !isThemeToken) {
-    bubble.style.background = props.color;
-    bubble.style.color = "white";
-  }
+  bubble.className = `nr-chat__bubble${applyColor(bubble, props.color, "nr-chat__bubble")}`;
   bubble.appendChild(renderSlot("default"));
   wrap.appendChild(bubble);
   if (props.footer) {
@@ -12075,8 +12087,7 @@ var chatItemDirective = ({ props, renderSlot }) => {
 var chatDirective = ({ props, renderSlot }) => {
   const wrap = document.createElement("div");
   wrap.className = "nr-chat";
-  if (props.class) wrap.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) wrap.setAttribute("style", props.style);
+  applyBaseProps(wrap, props);
   wrap.appendChild(renderSlot("default"));
   return wrap;
 };
@@ -12112,8 +12123,7 @@ function bindEventProp(el, eventProp) {
 var richlistItemDirective = ({ props, renderSlot }) => {
   const li = document.createElement("li");
   li.className = "nr-richlist__item";
-  if (props.class) li.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) li.setAttribute("style", props.style);
+  applyBaseProps(li, props);
   if (props.image) {
     const thumb = document.createElement("div");
     thumb.className = "nr-richlist__thumb";
@@ -12175,36 +12185,20 @@ var richlistItemDirective = ({ props, renderSlot }) => {
 var richlistDirective = ({ props, renderSlot }) => {
   const ul = document.createElement("ul");
   ul.className = "nr-richlist";
-  if (props.class) ul.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) ul.setAttribute("style", props.style);
+  applyBaseProps(ul, props);
   ul.appendChild(renderSlot("default"));
   return ul;
 };
 var richlist_default = richlistDirective;
 
 // vanilla/directives/stat.ts
-var STAT_THEME_TOKENS = /* @__PURE__ */ new Set([
-  "primary",
-  "secondary",
-  "info",
-  "success",
-  "warning",
-  "error"
-]);
-function isArbitraryColor2(value) {
-  if (STAT_THEME_TOKENS.has(value)) return false;
-  if (/^(#|rgb|hsl|oklch|oklab|lab|lch|color\()/i.test(value)) return true;
-  if (/^[a-zA-Z]+$/.test(value)) return true;
-  return false;
-}
 var statDirective = ({ props }) => {
-  const isThemeToken = STAT_THEME_TOKENS.has(props.color || "");
-  const colorClass = isThemeToken ? ` nr-stat--${props.color}` : "";
+  const statIsThemeToken = isThemeToken(props.color);
+  const colorClass = statIsThemeToken ? ` nr-stat--${props.color}` : "";
   const stat = document.createElement("div");
   stat.className = `nr-stat${colorClass}`;
-  if (props.class) stat.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) stat.setAttribute("style", props.style);
-  const useInlineColor = props.color && isArbitraryColor2(props.color) && !isThemeToken;
+  applyBaseProps(stat, props);
+  const useInlineColor = props.color && isArbitraryColor(props.color) && !statIsThemeToken;
   if (props.icon) {
     const figure = document.createElement("div");
     figure.className = "nr-stat__figure";
@@ -12297,9 +12291,12 @@ function renderHtmlString(html) {
   processedContent = processedContent.replace(
     /<style(?:\s+[^>]*)?>([\s\S]*?)<\/style>/gi,
     (_match, cssContent) => {
+      const trimmed = cssContent.trim();
+      const existing = document.head.querySelector("style[data-nr-global]");
+      if (existing && existing.textContent === trimmed) return "";
       const styleEl = document.createElement("style");
       styleEl.setAttribute("data-nr-global", "");
-      styleEl.textContent = cssContent;
+      styleEl.textContent = trimmed;
       document.head.appendChild(styleEl);
       return "";
     }
@@ -12369,19 +12366,14 @@ 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.align === "center") cls += " text-center";
+      else if (element.align === "right") cls += " text-right";
       if (element.classes) cls += ` ${element.classes}`;
       h.className = cls;
-      h.appendChild(renderInline(text));
+      h.appendChild(renderInline(element.text));
       return h;
     }
     case "paragraph": {