@noirmd/previewer 2.1.4 → 2.1.6

package/dist/react.cjs

@@ -1675,6 +1675,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");
@@ -1688,8 +1704,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)) {
@@ -1697,7 +1724,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;
     }
@@ -1873,29 +1900,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;
@@ -11069,6 +11080,7 @@ function createModal(title) {
   header.appendChild(titleEl);
   const closeBtn = document.createElement("button");
   closeBtn.className = "nr-modal__close";
+  closeBtn.setAttribute("aria-label", "Close");
   closeBtn.appendChild(createIcon("close"));
   closeBtn.addEventListener("click", () => dialog.close());
   header.appendChild(closeBtn);
@@ -11289,11 +11301,89 @@ 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 applyAlignClass(el, baseClass, align) {
+  if (align === "center") {
+    el.classList.add(`${baseClass}--center`);
+  } else if (align === "right") {
+    el.classList.add(`${baseClass}--right`);
+  }
+}
+function resolveIcon(value, fallback) {
+  if (!value) return fallback;
+  if (value === "none" || value === "off") return null;
+  return value;
+}
+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"));
@@ -11309,8 +11399,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"));
@@ -11323,14 +11412,17 @@ 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 iconName = resolveIcon(props.icon, "open_in_full");
   const wrapper = document.createElement("div");
   wrapper.className = "nr-modal-trigger";
+  applyAlignClass(wrapper, "nr-modal-trigger", align);
   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.className = "nr-button nr-button--default";
+  btn.setAttribute("aria-haspopup", "dialog");
+  applyColor(btn, props.color, "nr-button");
+  applyBaseProps(btn, props);
+  if (iconName) btn.appendChild(createIcon(iconName));
   btn.appendChild(document.createTextNode(label));
   const dialog = createModal(modalTitle);
   const body = dialog.querySelector(".nr-modal__body");
@@ -11340,15 +11432,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;
@@ -11358,20 +11442,22 @@ var modal_default = modalDirective;
 // 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 label = props.label || props.title;
+  const iconName = resolveIcon(props.icon, "touch_app");
   const target = props.target || "_blank";
-  const customClass = props.class || "";
+  const align = props.align || "left";
   const wrapper = document.createElement("div");
   wrapper.className = "nr-button-wrap";
+  applyAlignClass(wrapper, "nr-button-wrap", align);
   if (label) {
     const a = document.createElement("a");
     a.href = url;
     a.target = target;
-    a.rel = "noopener noreferrer";
+    if (target === "_blank") 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));
+    applyColor(a, props.color, "nr-button");
+    applyBaseProps(a, props);
+    if (iconName) a.appendChild(createIcon(iconName));
     a.appendChild(document.createTextNode(label));
     wrapper.appendChild(a);
     return wrapper;
@@ -11381,17 +11467,20 @@ 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));
+      applyColor(link, props.color, "nr-button");
+      if (iconName) link.prepend(createIcon(iconName));
+      applyBaseProps(link, props);
     });
     wrapper.appendChild(slotContent);
   } else {
     const a = document.createElement("a");
     a.href = url;
     a.target = target;
-    a.rel = "noopener noreferrer";
+    if (target === "_blank") 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));
+    applyColor(a, props.color, "nr-button");
+    applyBaseProps(a, props);
+    if (iconName) a.appendChild(createIcon(iconName));
     a.appendChild(slotContent);
     wrapper.appendChild(a);
   }
@@ -11413,12 +11502,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" : ""}`;
@@ -11497,13 +11583,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);
@@ -11551,8 +11631,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}`;
@@ -11603,10 +11683,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;
 };
@@ -11616,8 +11697,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) => {
@@ -11641,8 +11721,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";
@@ -11661,8 +11740,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}`;
@@ -11675,7 +11753,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 || "";
@@ -11691,19 +11768,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;
@@ -11773,11 +11840,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 = [];
@@ -11824,13 +11890,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();
@@ -11838,8 +11906,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];
@@ -11852,21 +11920,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");
@@ -11929,8 +11987,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"));
@@ -11943,14 +12000,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) {
@@ -11959,9 +12015,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");
@@ -12011,28 +12066,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) {
@@ -12057,14 +12095,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) {
@@ -12078,8 +12110,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;
 };
@@ -12115,8 +12146,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";
@@ -12178,36 +12208,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";
@@ -12300,9 +12314,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 "";
     }
@@ -12372,19 +12389,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": {
@@ -12727,7 +12739,7 @@ var guideData = [
     "title": "Introducci\xF3n",
     "icon": "menu_book",
     "order": 1,
-    "md": '# Introducci\xF3n a NoirMD\n\n**NoirMD** es un editor y motor de renderizado Markdown con extensiones propias: **admoniciones**, **componentes**, **directivas interactivas** y **markdown enriquecido**.\n\nEsta gu\xEDa est\xE1 escrita con el propio motor: cada directiva que ves aqu\xED es una muestra **viva** y funcional, no una captura.\n\n## C\xF3mo usar el editor\n\n| Elemento | Descripci\xF3n |\n| --- | --- |\n| Toolbar superior | Modo (editor / split / preview), guardar, copiar, imprimir, tema, gu\xEDa y configurar |\n| Panel izquierdo | Editor de c\xF3digo con resaltado de sintaxis |\n| Panel derecho | Preview en vivo (en modo split o preview) |\n| Atajo | `Ctrl+S` guarda el contenido |\n\n## Sintaxis de una directiva\n\nLas directivas se escriben con tres dos puntos `:::` y un nombre, opcionalmente con atributos entre llaves:\n\n```\n:::card {title="Mi tarjeta" icon="star"}\n\nContenido **markdown** aqu\xED dentro.\n\n:::\n```\n\nTodo lo que est\xE1 entre la apertura y el cierre `:::` se renderiza con el mismo motor, as\xED que puedes **anidar** directivas.\n\n## Cheatsheet r\xE1pido\n\n| Sintaxis | Resultado |\n| --- | --- |\n| `# T\xEDtulo` \u2192 `###### T\xEDtulo` | Encabezados |\n| `**negrita**` \xB7 `*cursiva*` \xB7 `~~tachado~~` | \xC9nfasis |\n| `` `c\xF3digo` `` | C\xF3digo inline |\n| `` ```js `` | Bloque de c\xF3digo con resaltado |\n| `[texto](url)` | Enlace |\n| `![alt](url)` | Imagen |\n| `![alt](url#left)` | Imagen flotante a la izquierda |\n| `==resaltado==` | Resaltado |\n| `%color%texto%%` | Texto de color |\n| `->centrado<-` | Texto centrado |\n| `!>spoiler<!` | Spoiler oculto |\n| `|[[icono]]|` | Icono Material |\n| `[TOC]` | \xCDndice de contenidos |\n| `:::note` `:::warning` `:::danger` `:::info` `:::greentext` | Admoniciones |\n| `:::card` `:::accordion` `:::carousel` `:::diff` `:::chat` `:::stat` `:::countdown` `:::keys` `:::hover-3d` `:::hover-gallery` `:::richlist` | Componentes |\n| `:::details` `:::modal` `:::button` `:::slide` | Interactivos |\n| `<style>` HTML inline | Bloques HTML (CSS global, HTML crudo) |\n\n## Organizaci\xF3n de la gu\xEDa\n\n- **Markdown** \u2014 sintaxis base y enriquecida (t\xEDtulos, \xE9nfasis, tablas, c\xF3digo, im\xE1genes, inline).\n- **Admoniciones** \u2014 cajas de aviso: nota, warning, danger, info y greentext.\n- **Componentes** \u2014 los 10 componentes de tarjeta, teclas, acorde\xF3n, carrusel, etc.\n- **Interactivos** \u2014 details, modal, botones y slides.\n- **Layout** \u2014 bloques HTML crudo: CSS global con `<style>` e HTML inline.\n\nCada p\xE1gina incluye: la sintaxis exacta, la tabla de props, un ejemplo en vivo y el c\xF3digo fuente para copiar.'
+    "md": '# Introducci\xF3n a NoirMD\n\n**NoirMD** es un editor y motor de renderizado Markdown con extensiones propias: **admoniciones**, **componentes**, **directivas interactivas** y **markdown enriquecido**.\n\nEsta gu\xEDa est\xE1 escrita con el propio motor: cada directiva que ves aqu\xED es una muestra **viva** y funcional, no una captura.\n\n## C\xF3mo usar el editor\n\n| Elemento | Descripci\xF3n |\n| --- | --- |\n| Toolbar superior | Modo (editor / split / preview), guardar, copiar, imprimir, tema, gu\xEDa y configurar |\n| Panel izquierdo | Editor de c\xF3digo con resaltado de sintaxis |\n| Panel derecho | Preview en vivo (en modo split o preview) |\n| Atajo | `Ctrl+S` guarda el contenido |\n\n## Sintaxis de una directiva\n\nLas directivas se escriben con tres dos puntos `:::` y un nombre, opcionalmente con atributos entre llaves:\n\n```\n:::card {title="Mi tarjeta" icon="star"}\n\nContenido **markdown** aqu\xED dentro.\n\n:::\n```\n\nTodo lo que est\xE1 entre la apertura y el cierre `:::` se renderiza con el mismo motor, as\xED que puedes **anidar** directivas.\n\n## Cheatsheet r\xE1pido\n\n| Sintaxis | Resultado |\n| --- | --- |\n| `# T\xEDtulo` \u2192 `###### T\xEDtulo` | Encabezados |\n| `**negrita**` \xB7 `_cursiva_` \xB7 `~~tachado~~` | \xC9nfasis |\n| `` `c\xF3digo` `` | C\xF3digo inline |\n| `` ```js `` | Bloque de c\xF3digo con resaltado |\n| `[texto](url)` | Enlace |\n| `![alt](url)` | Imagen |\n| `![alt](url#left)` | Imagen flotante a la izquierda |\n| `==resaltado==` | Resaltado |\n| `%color%texto%%` | Texto de color |\n| `->centrado<-` | Texto centrado |\n| `!>spoiler<!` | Spoiler oculto |\n| `|[[icono]]|` | Icono Material |\n| `[TOC]` | \xCDndice de contenidos |\n| `:::note` `:::warning` `:::danger` `:::info` `:::greentext` | Admoniciones |\n| `:::card` `:::accordion` `:::carousel` `:::diff` `:::chat` `:::stat` `:::countdown` `:::keys` `:::hover-3d` `:::hover-gallery` `:::richlist` | Componentes |\n| `:::details` `:::modal` `:::button` `:::slide` | Interactivos |\n| `<style>` HTML inline | Bloques HTML (CSS global, HTML crudo) |\n\n## Organizaci\xF3n de la gu\xEDa\n\n- **Markdown** \u2014 sintaxis base y enriquecida (t\xEDtulos, \xE9nfasis, tablas, c\xF3digo, im\xE1genes, inline).\n- **Admoniciones** \u2014 cajas de aviso: nota, warning, danger, info y greentext.\n- **Componentes** \u2014 los 10 componentes de tarjeta, teclas, acorde\xF3n, carrusel, etc.\n- **Interactivos** \u2014 details, modal, botones y slides.\n- **Layout** \u2014 bloques HTML crudo: CSS global con `<style>` e HTML inline.\n\nCada p\xE1gina incluye: la sintaxis exacta, la tabla de props, un ejemplo en vivo y el c\xF3digo fuente para copiar.'
   },
   {
     "id": "titulos",
@@ -12943,7 +12955,7 @@ var guideData = [
     "title": "Modal",
     "icon": "open_in_full",
     "order": 2,
-    "md": '# Modal\n\nLa directiva `:::modal` crea un **di\xE1logo modal** con su bot\xF3n de apertura.\n\n## Sintaxis\n\n```md\n:::modal {title="Confirmar borrado" label="Abrir modal" icon="delete"}\n\xBFSeguro que quieres borrar este documento? Esta acci\xF3n no se puede deshacer.\n\n| Acci\xF3n | Efecto |\n| --- | --- |\n| Aceptar | Borra el documento |\n| Cancelar | No hace nada |\n:::\n```\n\n:::modal {title="Confirmar borrado" label="Abrir modal" icon="delete"}\n\xBFSeguro que quieres borrar este documento? Esta acci\xF3n no se puede deshacer.\n\n| Acci\xF3n | Efecto |\n| --- | --- |\n| Aceptar | Borra el documento |\n| Cancelar | No hace nada |\n:::\n\n## Contenido enriquecido\n\n```md\n:::modal {title="Notas de la versi\xF3n" label="Ver novedades" icon="new_releases"}\n**v2.0** \u2014 cambios principales:\n\n- Nuevo componente `:::diff`\n- Gu\xEDa integrada en el editor\n- Especificidad CSS corregida en im\xE1genes\n:::\n```\n\n:::modal {title="Notas de la versi\xF3n" label="Ver novedades" icon="new_releases"}\n**v2.0** \u2014 cambios principales:\n\n- Nuevo componente `:::diff`\n- Gu\xEDa integrada en el editor\n- Especificidad CSS corregida en im\xE1genes\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | T\xEDtulo del modal |\n| `label` | texto | Texto del bot\xF3n de apertura (default: `title` o \xABOpen\xBB) |\n| `icon` | nombre Material | Icono del bot\xF3n (default `open_in_new`) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Interacci\xF3n\n\n- **Bot\xF3n**: abre el modal (focus se mueve dentro).\n- **Overlay** o bot\xF3n **\xD7**: cierra.\n- **Esc**: cierra (en desktop).\n- `dialog` nativo \u2192 accesible por defecto, focus trapped y `inert` al fondo.'
+    "md": '# Modal\n\nLa directiva `:::modal` crea un **di\xE1logo modal** con su bot\xF3n de apertura.\n\n## Sintaxis\n\n```md\n:::modal {title="Confirmar borrado" label="Abrir modal" icon="delete"}\n\xBFSeguro que quieres borrar este documento? Esta acci\xF3n no se puede deshacer.\n\n| Acci\xF3n | Efecto |\n| --- | --- |\n| Aceptar | Borra el documento |\n| Cancelar | No hace nada |\n:::\n```\n\n:::modal {title="Confirmar borrado" label="Abrir modal" icon="delete"}\n\xBFSeguro que quieres borrar este documento? Esta acci\xF3n no se puede deshacer.\n\n| Acci\xF3n | Efecto |\n| --- | --- |\n| Aceptar | Borra el documento |\n| Cancelar | No hace nada |\n:::\n\n## Contenido enriquecido\n\n```md\n:::modal {title="Notas de la versi\xF3n" label="Ver novedades" icon="new_releases"}\n**v2.0** \u2014 cambios principales:\n\n- Nuevo componente `:::diff`\n- Gu\xEDa integrada en el editor\n- Especificidad CSS corregida en im\xE1genes\n:::\n```\n\n:::modal {title="Notas de la versi\xF3n" label="Ver novedades" icon="new_releases"}\n**v2.0** \u2014 cambios principales:\n\n- Nuevo componente `:::diff`\n- Gu\xEDa integrada en el editor\n- Especificidad CSS corregida en im\xE1genes\n:::\n\n## Sin icono\n\nPara ocultar el icono del bot\xF3n de apertura, usa `icon="none"`:\n\n```md\n:::modal {title="Sin icono" label="Abrir" icon="none"}\nContenido del modal.\n:::\n```\n\n:::modal {title="Sin icono" label="Abrir" icon="none"}\nContenido del modal.\n:::\n\n## Color\n\nEl bot\xF3n de apertura acepta tokens de tema (`primary`, `secondary`, `info`, `success`, `warning`, `error`) o colores CSS arbitrarios:\n\n```md\n:::modal {title="\xC9xito" label="Abrir" icon="check_circle" color="success"}\nAcci\xF3n completada correctamente.\n:::\n```\n\n:::modal {title="\xC9xito" label="Abrir" icon="check_circle" color="success"}\nAcci\xF3n completada correctamente.\n:::\n\n## Alineaci\xF3n del bot\xF3n\n\nEl bot\xF3n de apertura se alinea a la izquierda por defecto. Usa el prop `align` para cambiar la alineaci\xF3n:\n\n### Centrado\n\n```md\n:::modal {title="Centrado" label="Abrir" icon="open_in_full" align="center"}\nContenido del modal centrado.\n:::\n```\n\n:::modal {title="Centrado" label="Abrir" icon="open_in_full" align="center"}\nContenido del modal centrado.\n:::\n\n### Alineado a la derecha\n\n```md\n:::modal {title="Derecha" label="Abrir" icon="open_in_full" align="right"}\nContenido del modal alineado a la derecha.\n:::\n```\n\n:::modal {title="Derecha" label="Abrir" icon="open_in_full" align="right"}\nContenido del modal alineado a la derecha.\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | T\xEDtulo del modal |\n| `label` (o `title`) | texto | Texto del bot\xF3n de apertura (`title` funciona como alias, default: \xABOpen\xBB) |\n| `icon` | nombre Material | Icono del bot\xF3n (default `open_in_full`). Usa `icon="none"` para ocultar |\n| `color` | token de tema o CSS | Color del bot\xF3n de apertura |\n| `align` | `left` / `center` / `right` | Alineaci\xF3n del bot\xF3n de apertura (default `left`) |\n| `class` | texto | Clases CSS adicionales (se aplican al bot\xF3n de apertura) |\n| `style` | CSS | Estilos inline (se aplican al bot\xF3n de apertura) |\n\n## Interacci\xF3n\n\n- **Bot\xF3n**: abre el modal (focus se mueve dentro).\n- **Overlay** o bot\xF3n **\xD7**: cierra.\n- **Esc**: cierra (en desktop).\n- `dialog` nativo \u2192 accesible por defecto, focus trapped y `inert` al fondo.'
   },
   {
     "id": "button",
@@ -12951,7 +12963,7 @@ var guideData = [
     "title": "Button",
     "icon": "touch_app",
     "order": 3,
-    "md": '# Button\n\nLa directiva `:::button` crea un **bot\xF3n con enlace** (se abre en pesta\xF1a nueva por defecto).\n\n## Sintaxis\n\n```md\n:::button {label="Documentaci\xF3n" url="https://example.com" icon="menu_book"}\n:::\n```\n\n:::button {label="Documentaci\xF3n" url="https://example.com" icon="menu_book"}\n:::\n\n## Variante con enlace interno\n\n```md\n:::button {label="Ir a la p\xE1gina de notas" url="#admonici\xF3n-nota" icon="sticky_note_2" target="_self"}\n:::\n```\n\n:::button {label="Ir a la p\xE1gina de notas" url="#admonici\xF3n-nota" icon="sticky_note_2" target="_self"}\n:::\n\n## Con contenido markdown\n\nSi el bloque contiene texto/enlaces, se renderizan dentro del bot\xF3n:\n\n```md\n:::button {label="Descargar" url="https://example.com/download" icon="download"}\nDescarga el **manual** en PDF\n:::\n```\n\n:::button {label="Descargar" url="https://example.com/download" icon="download"}\nDescarga el **manual** en PDF\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `label` | texto | Texto del bot\xF3n |\n| `url` (o `href`) | URL | Destino del enlace (default `#`) |\n| `icon` | nombre Material | Icono (default `near_me`) |\n| `target` | `_blank` / `_self` / ... | Destino del enlace (default `_blank`) |\n| `class` | texto | Clases CSS adicionales |'
+    "md": '# Button\n\nLa directiva `:::button` crea un **bot\xF3n con enlace** (se abre en pesta\xF1a nueva por defecto).\n\n## Sintaxis\n\n```md\n:::button {label="Documentaci\xF3n" url="https://example.com" icon="menu_book"}\n:::\n```\n\n:::button {label="Documentaci\xF3n" url="https://example.com" icon="menu_book"}\n:::\n\n## Variante con enlace interno\n\n```md\n:::button {label="Ir a la p\xE1gina de notas" url="#admonici\xF3n-nota" icon="sticky_note_2" target="_self"}\n:::\n```\n\n:::button {label="Ir a la p\xE1gina de notas" url="#admonici\xF3n-nota" icon="sticky_note_2" target="_self"}\n:::\n\n## Con contenido markdown\n\nSi el bloque contiene texto/enlaces, se renderizan dentro del bot\xF3n. El icono se a\xF1ade autom\xE1ticamente a cada enlace del contenido:\n\n```md\n:::button {label="Descargar" url="https://example.com/download" icon="download"}\nDescarga el **manual** en PDF\n:::\n```\n\n:::button {label="Descargar" url="https://example.com/download" icon="download"}\nDescarga el **manual** en PDF\n:::\n\n## Con enlace en el contenido\n\nSi el contenido es un enlace markdown, el bot\xF3n usa el enlace del contenido y el icono se a\xF1ade al principio:\n\n```md\n:::button {icon="star"}\n[Descarga con FDM](https://example.com/download)\n:::\n```\n\n:::button {icon="star"}\n[Descarga con FDM](https://example.com/download)\n:::\n\n## Sin icono\n\nPara ocultar el icono, usa `icon="none"`:\n\n```md\n:::button {label="Sin icono" url="https://example.com" icon="none"}\n:::\n```\n\n:::button {label="Sin icono" url="https://example.com" icon="none"}\n:::\n\n## Color\n\nLos botones aceptan tokens de tema (`primary`, `secondary`, `info`, `success`, `warning`, `error`) o colores CSS arbitrarios (`red`, `#ff0000`, `rgb(255,0,0)`):\n\n```md\n:::button {label="\xC9xito" url="https://example.com" icon="check_circle" color="success"}\n:::\n```\n\n:::button {label="\xC9xito" url="https://example.com" icon="check_circle" color="success"}\n:::\n\n```md\n:::button {label="Rojo" url="https://example.com" icon="error" color="#e11d48"}\n:::\n```\n\n:::button {label="Rojo" url="https://example.com" icon="error" color="#e11d48"}\n:::\n\n## Alineaci\xF3n\n\nLos botones se alinean a la izquierda por defecto. Usa el prop `align` para cambiar la alineaci\xF3n:\n\n### Centrado\n\n```md\n:::button {label="Centrado" url="https://example.com" icon="center_focus_strong" align="center"}\n:::\n```\n\n:::button {label="Centrado" url="https://example.com" icon="center_focus_strong" align="center"}\n:::\n\n### Alineado a la derecha\n\n```md\n:::button {label="Derecha" url="https://example.com" icon="arrow_forward" align="right"}\n:::\n```\n\n:::button {label="Derecha" url="https://example.com" icon="arrow_forward" align="right"}\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `label` (o `title`) | texto | Texto del bot\xF3n (`title` funciona como alias por compatibilidad) |\n| `url` (o `href`) | URL | Destino del enlace (default `#`) |\n| `icon` | nombre Material | Icono (default `touch_app`). Usa `icon="none"` para ocultar |\n| `target` | `_blank` / `_self` / ... | Destino del enlace (default `_blank`) |\n| `color` | token de tema o CSS | Color del bot\xF3n (ver colores soportados arriba) |\n| `align` | `left` / `center` / `right` | Alineaci\xF3n del bot\xF3n (default `left`) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline (ej: `style="font-size:1rem"`) |'
   },
   {
     "id": "slide",
@@ -12968,6 +12980,14 @@ var guideData = [
     "icon": "code_off",
     "order": 1,
     "md": '# Bloques HTML\r\n\r\nNoirMD permite escribir **HTML crudo** directamente en el markdown. Seg\xFAn la etiqueta, el comportamiento var\xEDa.\r\n\r\n## CSS global con `<style>`\r\n\r\nEscribe un bloque `<style>` para inyectar CSS en el documento. El contenido se extrae autom\xE1ticamente y se inserta en el `<head>` del DOM.\r\n\r\n```md\r\n<style>\r\n.mi-clase {\r\n  background: #f1f5f9;\r\n  border-radius: 10px;\r\n  padding: 1rem;\r\n}\r\n</style>\r\n```\r\n\r\n<style>\r\n.nr-demo-box {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 1rem;\r\n  padding: 1rem;\r\n  border-radius: 12px;\r\n  background: color-mix(in srgb, var(--color-accent-primary, #0ea5e9) 10%, transparent);\r\n}\r\n.nr-demo-box > div {\r\n  padding: 1rem;\r\n  border-radius: 8px;\r\n  background: var(--color-background-secondary-solid, #1e293b);\r\n}\r\n</style>\r\n\r\n<div class="nr-demo-box">\r\n<div>**A**</div>\r\n<div>**B**</div>\r\n</div>\r\n\r\n> El CSS se aplica al **documento renderizado completo**, no solo al bloque. Define clases una vez y \xFAsalas despu\xE9s en cualquier etiqueta HTML.\r\n\r\n## HTML inline\r\n\r\nCualquier etiqueta HTML escrita directamente en el markdown se renderiza sin procesar como markdown. El contenido dentro se preserva tal cual.\r\n\r\n```md\r\n<div style="text-align: center; padding: 1rem; border: 1px solid #334155; border-radius: 10px;">\r\n  HTML escrito a mano funciona tal cual.\r\n</div>\r\n```\r\n\r\n<div style="text-align: center; padding: 1rem; border: 1px solid #334155; border-radius: 10px;">\r\n  HTML escrito a mano funciona tal cual.\r\n</div>\r\n\r\n## Elementos interactivos nativos\r\n\r\n```md\r\n<details class="nr-details">\r\n  <summary>Detalle nativo con <b>HTML</b></summary>\r\n  <p>Los atributos, estilos y eventos se conservan intactos.</p>\r\n</details>\r\n```\r\n\r\n<details class="nr-details">\r\n  <summary>Detalle nativo con <b>HTML</b></summary>\r\n  <p>Los atributos, estilos y eventos se conservan intactos.</p>\r\n</details>\r\n\r\n## Scripts\r\n\r\nLos bloques `<script>` se ejecutan autom\xE1ticamente al renderizar:\r\n\r\n```md\r\n<script>\r\n  console.log(\'Este script se ejecuta al renderizar\');\r\n</script>\r\n```\r\n\r\n> \u26A0\uFE0F Al ser HTML y scripts sin filtrar, \xFAsalos solo con contenido de confianza.\r\n\r\n## Cu\xE1ndo usar bloques HTML\r\n\r\n- Insertar embeds (`iframe`, `video`, widgets externos).\r\n- Estructuras que el markdown no cubre (layouts complejos, formularios nativos).\r\n- Inyectar CSS reutilizable con `<style>`.\r\n- Prototipar HTML antes de convertirlo a directiva.'
+  },
+  {
+    "id": "wrapper-directives",
+    "category": "Layout",
+    "title": "Wrapper Directives",
+    "icon": "crop_free",
+    "order": 1,
+    "md": '# Wrapper Directives\r\n\r\nLas directivas `:::div`, `:::style`, `:::custom` y `:::raw` son wrappers gen\xE9ricos para **envolver contenido** con clases, estilos y atributos personalizados.\r\n\r\n## `:::div` \u2014 Div gen\xE9rico\r\n\r\nEnvuelve contenido en un `<div>` con clases, id, estilos y atributos `data-*`.\r\n\r\n```md\r\n:::div {class="mi-clase" id="seccion" style="padding: 2rem; background: #f0f0f0"}\r\n\r\nContenido **markdown** aqu\xED.\r\n\r\n:::\r\n```\r\n\r\n:::div {class="mi-clase" id="seccion" style="padding: 2rem; background: #f0f0f0"}\r\n\r\nContenido **markdown** aqu\xED.\r\n\r\n:::\r\n\r\n## `:::style` \u2014 Inyectar CSS\r\n\r\nInyecta un bloque `<style>` global. \xDAtil para estilos que afectan m\xFAltiples componentes.\r\n\r\n```md\r\n:::style\r\n.nr-mi-clase { color: red; }\r\n:::\r\n```\r\n\r\n## `:::custom` \u2014 Elemento personalizado\r\n\r\nSimilar a `div`, pero permite crear cualquier elemento HTML.\r\n\r\n## `:::raw` \u2014 HTML crudo\r\n\r\nRenderiza contenido HTML sin procesar.\r\n\r\n## Props\r\n\r\n| Prop | Tipo | Descripci\xF3n |\r\n| --- | --- | --- |\r\n| `class` | texto | Clases CSS (soporta `.shorthand` tambi\xE9n) |\r\n| `id` | texto | ID del elemento |\r\n| `style` | CSS inline | Estilos inline (se aplica con `setProperty`, no sobreescribe otros estilos) |\r\n| `data-*` | texto | Cualquier atributo `data-*` se aplica al elemento |\r\n\r\n## Shorthands\r\n\r\n```md\r\n:::div {.mi-clase #mi-id}\r\n\r\nIgual que usar `class="mi-clase" id="mi-id"`.\r\n\r\n:::\r\n```'
   }
 ];