@noirmd/previewer 2.1.1 → 2.1.2

package/dist/react.cjs

@@ -12685,7 +12685,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| `:::div` `:::style` `:::raw` | Layout |\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 contenedores `div`, estilos `style` y HTML `raw`.\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",
@@ -12693,7 +12693,7 @@ var guideData = [
     "title": "T\xEDtulos y encabezados",
     "icon": "title",
     "order": 1,
-    "md": "# T\xEDtulos y encabezados\n\nLos t\xEDtulos se escriben con almohadillas `#`. Hay **seis niveles**, de `#` (mayor) a `######` (menor).\n\n## Sintaxis\n\n```md\n# T\xEDtulo 1\n## T\xEDtulo 2\n### T\xEDtulo 3\n#### T\xEDtulo 4\n##### T\xEDtulo 5\n###### T\xEDtulo 6\n```\n\n## Resultado\n\n# T\xEDtulo 1\n## T\xEDtulo 2\n### T\xEDtulo 3\n#### T\xEDtulo 4\n##### T\xEDtulo 5\n###### T\xEDtulo 6\n\n## Notas\n\n- Cada t\xEDtulo genera un **ancla** autom\xE1tica: al pulsar sobre \xE9l se copia el enlace directo a la secci\xF3n.\n- El prefijo `[TOC]` (\xEDndice de contenidos) genera un \xEDndice con todos los t\xEDtulos del documento (ver la p\xE1gina de **Sintaxis inline**).\n- Los t\xEDtulos pueden llevar atributos personalizados con la directiva `:::div` o envolverlos en `:::style` para darles clases o estilos propios.\n\n## Anclas\n\nCualquier t\xEDtulo se puede enlazar con su id autom\xE1tico:\n\n```md\n[Ir a los t\xEDtulos](#t\xEDtulos-y-encabezados)\n```\n\n> El id se genera a partir del texto del t\xEDtulo, en min\xFAsculas y con guiones."
+    "md": "# T\xEDtulos y encabezados\n\nLos t\xEDtulos se escriben con almohadillas `#`. Hay **seis niveles**, de `#` (mayor) a `######` (menor).\n\n## Sintaxis\n\n```md\n# T\xEDtulo 1\n## T\xEDtulo 2\n### T\xEDtulo 3\n#### T\xEDtulo 4\n##### T\xEDtulo 5\n###### T\xEDtulo 6\n```\n\n## Resultado\n\n# T\xEDtulo 1\n## T\xEDtulo 2\n### T\xEDtulo 3\n#### T\xEDtulo 4\n##### T\xEDtulo 5\n###### T\xEDtulo 6\n\n## Notas\n\n- Cada t\xEDtulo genera un **ancla** autom\xE1tica: al pulsar sobre \xE9l se copia el enlace directo a la secci\xF3n.\n- El prefijo `[TOC]` (\xEDndice de contenidos) genera un \xEDndice con todos los t\xEDtulos del documento (ver la p\xE1gina de **Sintaxis inline**).\n- Los t\xEDtulos pueden llevar atributos personalizados con el sufijo `##{.clase #id}`.\n\n## Anclas\n\nCualquier t\xEDtulo se puede enlazar con su id autom\xE1tico:\n\n```md\n[Ir a los t\xEDtulos](#t\xEDtulos-y-encabezados)\n```\n\n> El id se genera a partir del texto del t\xEDtulo, en min\xFAsculas y con guiones."
   },
   {
     "id": "enfasis",
@@ -12789,7 +12789,15 @@ var guideData = [
     "title": "Card",
     "icon": "dashboard",
     "order": 1,
-    "md": '# Card\n\nLa directiva `:::card` crea una tarjeta con icono, t\xEDtulo y contenido markdown.\n\n## Sintaxis\n\n```md\n:::card {title="Tarjeta simple" icon="star"}\nContenido de la tarjeta en **markdown**.\n:::\n```\n\n:::card {title="Tarjeta simple" icon="star"}\nContenido de la tarjeta en **markdown**.\n:::\n\n## Con t\xEDtulo largo y contenido enriquecido\n\n```md\n:::card {title="Documentaci\xF3n t\xE9cnica" icon="code"}\n- Renderizado por el mismo motor\n- Soporta `inline`, tablas y directivas\n- Sin t\xEDtulo: usa `:::card` a secas\n:::\n```\n\n:::card {title="Documentaci\xF3n t\xE9cnica" icon="code"}\n- Renderizado por el mismo motor\n- Soporta `inline`, tablas y directivas\n- Sin t\xEDtulo: usa `:::card` a secas\n:::\n\n## Grid autom\xE1tico\n\nLas tarjetas **consecutivas** se agrupan en una cuadr\xEDcula responsive. A\xF1ade `batch="off"` para evitarlo:\n\n```md\n:::card {title="HTML" icon="html"}\nEstructura del documento.\n:::\n:::card {title="CSS" icon="palette"}\nEstilos y variables.\n:::\n:::card {title="JS" icon="javascript"}\nInteracci\xF3n y eventos.\n:::\n```\n\n:::card {title="HTML" icon="html"}\nEstructura del documento.\n:::\n:::card {title="CSS" icon="palette"}\nEstilos y variables.\n:::\n:::card {title="JS" icon="javascript"}\nInteracci\xF3n y eventos.\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | T\xEDtulo de la tarjeta |\n| `icon` | nombre Material | Icono del t\xEDtulo |\n| `batch` | `off` | Desactiva el agrupado en grid con las tarjetas vecinas |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Anidando directivas\n\n```md\n:::card {title="Ejemplo anidado" icon="layers"}\nUna admonici\xF3n dentro de la tarjeta:\n\n:::note\nLas tarjetas aceptan cualquier directiva dentro.\n:::\n:::\n```\n\n:::card {title="Ejemplo anidado" icon="layers"}\nUna admonici\xF3n dentro de la tarjeta:\n\n:::note\nLas tarjetas aceptan cualquier directiva dentro.\n:::\n:::'
+    "md": '# Card\n\nLa directiva `:::card` crea una tarjeta con icono, t\xEDtulo y contenido markdown.\n\n## Sintaxis\n\n```md\n:::card {title="Tarjeta simple" icon="star"}\nContenido de la tarjeta en **markdown**.\n:::\n```\n\n:::card {title="Tarjeta simple" icon="star"}\nContenido de la tarjeta en **markdown**.\n:::\n\n## Con t\xEDtulo largo y contenido enriquecido\n\n```md\n:::card {title="Documentaci\xF3n t\xE9cnica" icon="code"}\n- Renderizado por el mismo motor\n- Soporta `inline`, tablas y directivas\n- Sin t\xEDtulo: usa `:::card` a secas\n:::\n```\n\n:::card {title="Documentaci\xF3n t\xE9cnica" icon="code"}\n- Renderizado por el mismo motor\n- Soporta `inline`, tablas y directivas\n- Sin t\xEDtulo: usa `:::card` a secas\n:::\n\n## Grid autom\xE1tico\n\nLas tarjetas **consecutivas** se agrupan en una cuadr\xEDcula responsive. A\xF1ade `batch="off"` para evitarlo:\n\n```md\n:::card {title="HTML" icon="html"}\nEstructura del documento.\n:::\n:::card {title="CSS" icon="palette"}\nEstilos y variables.\n:::\n:::card {title="JS" icon="javascript"}\nInteracci\xF3n y eventos.\n:::\n```\n\n:::card {title="HTML" icon="html"}\nEstructura del documento.\n:::\n:::card {title="CSS" icon="palette"}\nEstilos y variables.\n:::\n:::card {title="JS" icon="javascript"}\nInteracci\xF3n y eventos.\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | T\xEDtulo de la tarjeta |\n| `icon` | nombre Material | Icono del t\xEDtulo |\n| `batch` | `off` | Desactiva el agrupado en grid con las tarjetas vecinas |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Anidando directivas\n\n```md\n:::card {title="Ejemplo anidado" icon="layers"}\nUna admonici\xF3n dentro de la tarjeta:\n\n:::note\nLas tarjetas aceptan cualquier directiva dentro.\n:::\n:::\n```\n\n:::card {title="Ejemplo anidado" icon="layers"}\nUna admonici\xF3n dentro de la tarjeta:\n\n:::note\nLas tarjetas aceptan cualquier directiva dentro.\n:::\n:::\n\n## Variantes\n\nExisten dos variantes de la tarjeta con comportamiento interactivo:\n\n| Directiva | Comportamiento al hacer click |\n| --- | --- |\n| `:::card` | Sin acci\xF3n (tarjeta est\xE1tica) |\n| `:::card-m` | Abre un modal con el contenido del slot `#content` |\n| `:::card-b` | Navega a la URL indicada en la prop `url` |\n\nLas tres variantes comparten las mismas props base (`title`, `icon`, `image`) y se agrupan autom\xE1ticamente en grid. Consulta las p\xE1ginas de **Card Modal** y **Card Link** para m\xE1s detalles.'
+  },
+  {
+    "id": "card-m",
+    "category": "Componentes",
+    "title": "Card Modal",
+    "icon": "open_in_new",
+    "order": 2,
+    "md": '# Card Modal\r\n\r\nLa directiva `:::card-m` crea una tarjeta interactiva que al hacer click abre un **modal** con contenido detallado.\r\n\r\n## Sintaxis\r\n\r\n```md\r\n:::card-m {title="Mi proyecto" icon="rocket"}\r\n\r\nDescripci\xF3n breve visible en la tarjeta.\r\n\r\n#content\r\nContenido **detallado** que aparece en el modal.\r\nPuede incluir markdown completo: tablas, c\xF3digo, directivas...\r\n\r\n:::\r\n```\r\n\r\n:::card-m {title="Mi proyecto" icon="rocket"}\r\n\r\nDescripci\xF3n breve visible en la tarjeta.\r\n\r\n#content\r\nContenido **detallado** que aparece en el modal.\r\nPuede incluir markdown completo: tablas, c\xF3digo, directivas...\r\n\r\n:::\r\n\r\n## Con imagen\r\n\r\n```md\r\n:::card-m {title="Paisaje" image="https://img.daisyui.com/images/stock/photo-1506905925346-21bda4d32df4.webp"}\r\n\r\nUna vista impresionante de las monta\xF1as.\r\n\r\n#content\r\n## Detalles del paisaje\r\n\r\n- Ubicaci\xF3n: Alpes suizos\r\n- Altitud: 2.500m\r\n- Mejor \xE9poca: Junio\u2013Septiembre\r\n\r\n:::\r\n```\r\n\r\n:::card-m {title="Paisaje" image="https://img.daisyui.com/images/stock/photo-1506905925346-21bda4d32df4.webp"}\r\n\r\nUna vista impresionante de las monta\xF1as.\r\n\r\n#content\r\n## Detalles del paisaje\r\n\r\n- Ubicaci\xF3n: Alpes suizos\r\n- Altitud: 2.500m\r\n- Mejor \xE9poca: Junio\u2013Septiembre\r\n\r\n:::\r\n\r\n## Con slot `#description`\r\n\r\n```md\r\n:::card-m {title="Estad\xEDsticas" icon="analytics"}\r\n\r\n#description\r\nResumen r\xE1pido del rendimiento.\r\n\r\n#content\r\n| M\xE9trica | Valor |\r\n| --- | --- |\r\n| Usuarios | 12.345 |\r\n| Tasa de conversi\xF3n | 3,2% |\r\n| Tiempo medio | 2m 15s |\r\n\r\n:::\r\n```\r\n\r\n:::card-m {title="Estad\xEDsticas" icon="analytics"}\r\n\r\n#description\r\nResumen r\xE1pido del rendimiento.\r\n\r\n#content\r\n| M\xE9trica | Valor |\r\n| --- | --- |\r\n| Usuarios | 12.345 |\r\n| Tasa de conversi\xF3n | 3,2% |\r\n| Tiempo medio | 2m 15s |\r\n\r\n:::\r\n\r\n## Grid autom\xE1tico\r\n\r\nLas cards `:::card-m` se agrupan en grid con `:::card` y `:::card-b`. Usa `batch="off"` para evitarlo:\r\n\r\n```md\r\n:::card {title="Est\xE1tica" icon="info"}\r\nContenido siempre visible.\r\n:::\r\n:::card-m {title="Modal" icon="open_in_new"}\r\nClick para ver m\xE1s.\r\n:::\r\n:::card-b {title="Link" icon="link" url="https://example.com"}\r\nAbre en nueva pesta\xF1a.\r\n:::\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Tipo | Descripci\xF3n |\r\n| --- | --- | --- |\r\n| `title` | texto | T\xEDtulo de la tarjeta |\r\n| `icon` | nombre Material | Icono del t\xEDtulo |\r\n| `image` | URL | Imagen de banner superior |\r\n| `url` | URL | URL opcional (no se usa como link, solo metadata) |\r\n| `batch` | `off` | Desactiva el agrupado en grid |\r\n| `class` | texto | Clases CSS adicionales |\r\n| `style` | CSS | Estilos inline |\r\n\r\n## Slots\r\n\r\n| Slot | Descripci\xF3n |\r\n| --- | --- |\r\n| `default` | Contenido breve visible en la tarjeta |\r\n| `#description` | Texto descriptivo secundario |\r\n| `#content` | Contenido detallado que se muestra en el modal |\r\n\r\n## Diferencia con `:::card` y `:::card-b`\r\n\r\n| Directiva | Comportamiento al hacer click |\r\n| --- | --- |\r\n| `:::card` | Sin acci\xF3n (tarjeta est\xE1tica) |\r\n| `:::card-m` | Abre un modal con el contenido de `#content` |\r\n| `:::card-b` | Navega a la URL indicada en `url` |'
   },
   {
     "id": "keys",
@@ -12807,6 +12815,14 @@ var guideData = [
     "order": 3,
     "md": '# Accordion\n\nLa directiva `:::accordion` agrupa items desplegables (`:::accordion-item`). Por defecto solo un item puede estar abierto (modo `radio`).\n\n## Sintaxis\n\n```md\n:::accordion\n:::accordion-item {title="Primera secci\xF3n"}\nContenido de la primera secci\xF3n.\n:::\n:::accordion-item {title="Segunda secci\xF3n"}\nContenido de la segunda secci\xF3n.\n:::\n:::\n```\n\n:::accordion\n:::accordion-item {title="Primera secci\xF3n"}\nContenido de la primera secci\xF3n.\n:::\n:::accordion-item {title="Segunda secci\xF3n"}\nContenido de la segunda secci\xF3n.\n:::\n:::\n\n## Abierto por defecto\n\nCon `checked` el item nace abierto:\n\n```md\n:::accordion\n:::accordion-item {title="FAQ: \xBFQu\xE9 es NoirMD?" checked}\nUn editor markdown con directivas propias.\n:::\n:::accordion-item {title="FAQ: \xBFC\xF3mo anido directivas?"}\nDentro del contenido de cualquier item puedes usar `:::`.\n:::\n:::\n```\n\n:::accordion\n:::accordion-item {title="FAQ: \xBFQu\xE9 es NoirMD?" checked}\nUn editor markdown con directivas propias.\n:::\n:::accordion-item {title="FAQ: \xBFC\xF3mo anido directivas?"}\nDentro del contenido de cualquier item puedes usar `:::`.\n:::\n:::\n\n## Modo checkbox (multiples abiertos)\n\n```md\n:::accordion {mode="checkbox"}\n:::accordion-item {title="Paso 1" checked}\nPreparar los ingredientes.\n:::\n:::accordion-item {title="Paso 2"}\nMezclar y hornear.\n:::\n:::\n```\n\n:::accordion {mode="checkbox"}\n:::accordion-item {title="Paso 1" checked}\nPreparar los ingredientes.\n:::\n:::accordion-item {title="Paso 2"}\nMezclar y hornear.\n:::\n:::\n\n## Props\n\n### `:::accordion`\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `mode` | `radio` \\| `checkbox` | `radio` (default): solo uno abierto; `checkbox`: varios |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n### `:::accordion-item`\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | T\xEDtulo del item (requerido) |\n| `checked` | flag | Item abierto por defecto |\n| `value` | texto | Valor asociado al input |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |'
   },
+  {
+    "id": "card-b",
+    "category": "Componentes",
+    "title": "Card Link",
+    "icon": "link",
+    "order": 3,
+    "md": '# Card Link\r\n\r\nLa directiva `:::card-b` crea una tarjeta interactiva que al hacer click **navega a una URL** en una nueva pesta\xF1a.\r\n\r\n## Sintaxis\r\n\r\n```md\r\n:::card-b {title="Documentaci\xF3n" icon="menu_book" url="https://example.com"}\r\n\r\nAccede a la documentaci\xF3n completa del proyecto.\r\n\r\n:::\r\n```\r\n\r\n:::card-b {title="Documentaci\xF3n" icon="menu_book" url="https://example.com"}\r\n\r\nAccede a la documentaci\xF3n completa del proyecto.\r\n\r\n:::\r\n\r\n## Con imagen\r\n\r\n```md\r\n:::card-b {title="GitHub" image="https://img.daisyui.com/images/stock/photo-1470071459604-3b5ec3a7fe05.webp" url="https://github.com"}\r\n\r\nExplora el repositorio en GitHub.\r\n\r\n:::\r\n```\r\n\r\n:::card-b {title="GitHub" image="https://img.daisyui.com/images/stock/photo-1470071459604-3b5ec3a7fe05.webp" url="https://github.com"}\r\n\r\nExplora el repositorio en GitHub.\r\n\r\n:::\r\n\r\n## Con slot `#description`\r\n\r\n```md\r\n:::card-b {title="NPM" icon="inventory_2" url="https://npmjs.com"}\r\n\r\n#description\r\nPaquete disponible en npm.\r\n\r\nPublicado recientemente con las \xFAltimas mejoras.\r\n\r\n:::\r\n```\r\n\r\n:::card-b {title="NPM" icon="inventory_2" url="https://npmjs.com"}\r\n\r\n#description\r\nPaquete disponible en npm.\r\n\r\nPublicado recientemente con las \xFAltimas mejoras.\r\n\r\n:::\r\n\r\n## Grid autom\xE1tico\r\n\r\nLas cards `:::card-b` se agrupan en grid con `:::card` y `:::card-m`. Usa `batch="off"` para evitarlo:\r\n\r\n```md\r\n:::card-b {title="Docs" icon="menu_book" url="https://docs.example.com"}\r\nDocumentaci\xF3n oficial.\r\n:::\r\n:::card-b {title="GitHub" icon="code" url="https://github.com"}\r\nC\xF3digo fuente.\r\n:::\r\n:::card-b {title="NPM" icon="inventory_2" url="https://npmjs.com"}\r\nPaquete npm.\r\n:::\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Tipo | Descripci\xF3n |\r\n| --- | --- | --- |\r\n| `title` | texto | T\xEDtulo de la tarjeta |\r\n| `icon` | nombre Material | Icono del t\xEDtulo |\r\n| `image` | URL | Imagen de banner superior |\r\n| `url` | URL | **Requerido.** URL de destino al hacer click |\r\n| `target` | texto | Target del enlace (por defecto `_blank`) |\r\n| `batch` | `off` | Desactiva el agrupado en grid |\r\n| `class` | texto | Clases CSS adicionales |\r\n| `style` | CSS | Estilos inline |\r\n\r\n## Slots\r\n\r\n| Slot | Descripci\xF3n |\r\n| --- | --- |\r\n| `default` | Contenido visible en la tarjeta |\r\n| `#description` | Texto descriptivo secundario |\r\n\r\n## Diferencia con `:::card` y `:::card-m`\r\n\r\n| Directiva | Comportamiento al hacer click |\r\n| --- | --- |\r\n| `:::card` | Sin acci\xF3n (tarjeta est\xE1tica) |\r\n| `:::card-m` | Abre un modal con el contenido de `#content` |\r\n| `:::card-b` | Navega a la URL indicada en `url` |'
+  },
   {
     "id": "carousel",
     "category": "Componentes",
@@ -12861,7 +12877,7 @@ var guideData = [
     "title": "Richlist",
     "icon": "playlist_play",
     "order": 10,
-    "md": '# Richlist\n\nLa directiva `:::richlist` muestra una **lista enriquecida** (`:::richlist-item`) con imagen, t\xEDtulos, subt\xEDtulo e iconos.\n\n## Sintaxis\n\n```md\n:::richlist\n:::richlist-item {title="Vim" subtitle="Editor de texto" image="https://img.daisyui.com/images/stock/photo-1493863641943-9b68992a8d07.webp"}\n:::richlist-item {title="Git" subtitle="Control de versiones" icon="code" icon2="terminal"}\n:::richlist-item {title="Docker" subtitle="Contenedores" icon="deployed_code"}\n:::\n```\n\n:::richlist\n:::richlist-item {title="Vim" subtitle="Editor de texto" image="https://img.daisyui.com/images/stock/photo-1493863641943-9b68992a8d07.webp"}\n:::richlist-item {title="Git" subtitle="Control de versiones" icon="code" icon2="terminal"}\n:::richlist-item {title="Docker" subtitle="Contenedores" icon="deployed_code"}\n:::\n\n## Con iconos en ambos lados\n\n```md\n:::richlist\n:::richlist-item {title="Modo oscuro" subtitle="Menos fatiga visual" icon="dark_mode" icon2="chevron_right"}\n:::richlist-item {title="Atajos" subtitle="M\xE1s velocidad" icon="keyboard" icon2="chevron_right"}\n:::richlist-item {title="Tema" subtitle="Personaliza colores" icon="palette" icon2="chevron_right"}\n:::\n```\n\n:::richlist\n:::richlist-item {title="Modo oscuro" subtitle="Menos fatiga visual" icon="dark_mode" icon2="chevron_right"}\n:::richlist-item {title="Atajos" subtitle="M\xE1s velocidad" icon="keyboard" icon2="chevron_right"}\n:::richlist-item {title="Tema" subtitle="Personaliza colores" icon="palette" icon2="chevron_right"}\n:::\n\n## Props\n\n### `:::richlist-item`\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | T\xEDtulo del elemento |\n| `subtitle` | texto | Subt\xEDtulo (segunda l\xEDnea) |\n| `image` | URL | Imagen a la izquierda (sustituye a `icon`) |\n| `icon` | nombre Material | Icono a la izquierda |\n| `icon2` | nombre Material | Icono a la derecha |\n| `url` | URL | El bot\xF3n del `icon` abre el enlace en una pesta\xF1a nueva |\n| `url2` | URL | El bot\xF3n del `icon2` abre el enlace en una pesta\xF1a nueva |\n| `event` | `evento: fn` | Handler del bot\xF3n `icon` (funci\xF3n global, ver abajo) |\n| `event2` | `evento: fn` | Handler del bot\xF3n `icon2` (funci\xF3n global, ver abajo) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n### `:::richlist`\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Botones con acci\xF3n\n\nCada bot\xF3n de icono puede navegar (`url`/`url2`) o llamar a una funci\xF3n global (`event`/`event2`). `event` tiene prioridad sobre `url` en el mismo bot\xF3n:\n\n```md\n:::richlist\n:::richlist-item {title="Reproductor" subtitle="Demo de botones" icon="open_in_new" url="https://example.com" icon2="volume_up" event="click: reproducirSonido"}\nEl primer bot\xF3n abre una pesta\xF1a nueva; el segundo ejecuta una funci\xF3n global al hacer clic.\n:::\n:::\n```\n\n:::richlist\n:::richlist-item {title="Reproductor" subtitle="Demo de botones" icon="open_in_new" url="https://example.com" icon2="volume_up" event="click: reproducirSonido"}\nEl primer bot\xF3n abre una pesta\xF1a nueva; el segundo ejecuta una funci\xF3n global al hacer clic.\n:::\n:::\n\n### Sintaxis de `event`\n\n```md\nevent="click: miFuncion"                 <!-- un solo evento -->\nevent="click: fn1; mouseover: fn2"       <!-- varios, separados por ; -->\nevent="onclick: miFuncion"               <!-- el prefijo "on" es opcional -->\n```\n\nLa funci\xF3n se resuelve desde el **scope global** en el momento del evento y se invoca con el elemento como `this` y el evento como argumento:\n\n```js\nwindow.reproducirSonido = function (event) {\n  console.log(\'Click en:\', this);\n};\n```\n\n:::note\nSi la funci\xF3n no existe, el bot\xF3n simplemente no hace nada (sin errores). El `event` es contenido propio del autor, con el mismo modelo de confianza que `:::raw` o `:::style`.\n:::'
+    "md": '# Richlist\n\nLa directiva `:::richlist` muestra una **lista enriquecida** (`:::richlist-item`) con imagen, t\xEDtulos, subt\xEDtulo e iconos.\n\n## Sintaxis\n\n```md\n:::richlist\n:::richlist-item {title="Vim" subtitle="Editor de texto" image="https://img.daisyui.com/images/stock/photo-1493863641943-9b68992a8d07.webp"}\n:::richlist-item {title="Git" subtitle="Control de versiones" icon="code" icon2="terminal"}\n:::richlist-item {title="Docker" subtitle="Contenedores" icon="deployed_code"}\n:::\n```\n\n:::richlist\n:::richlist-item {title="Vim" subtitle="Editor de texto" image="https://img.daisyui.com/images/stock/photo-1493863641943-9b68992a8d07.webp"}\n:::richlist-item {title="Git" subtitle="Control de versiones" icon="code" icon2="terminal"}\n:::richlist-item {title="Docker" subtitle="Contenedores" icon="deployed_code"}\n:::\n\n## Con iconos en ambos lados\n\n```md\n:::richlist\n:::richlist-item {title="Modo oscuro" subtitle="Menos fatiga visual" icon="dark_mode" icon2="chevron_right"}\n:::richlist-item {title="Atajos" subtitle="M\xE1s velocidad" icon="keyboard" icon2="chevron_right"}\n:::richlist-item {title="Tema" subtitle="Personaliza colores" icon="palette" icon2="chevron_right"}\n:::\n```\n\n:::richlist\n:::richlist-item {title="Modo oscuro" subtitle="Menos fatiga visual" icon="dark_mode" icon2="chevron_right"}\n:::richlist-item {title="Atajos" subtitle="M\xE1s velocidad" icon="keyboard" icon2="chevron_right"}\n:::richlist-item {title="Tema" subtitle="Personaliza colores" icon="palette" icon2="chevron_right"}\n:::\n\n## Props\n\n### `:::richlist-item`\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | T\xEDtulo del elemento |\n| `subtitle` | texto | Subt\xEDtulo (segunda l\xEDnea) |\n| `image` | URL | Imagen a la izquierda (sustituye a `icon`) |\n| `icon` | nombre Material | Icono a la izquierda |\n| `icon2` | nombre Material | Icono a la derecha |\n| `url` | URL | El bot\xF3n del `icon` abre el enlace en una pesta\xF1a nueva |\n| `url2` | URL | El bot\xF3n del `icon2` abre el enlace en una pesta\xF1a nueva |\n| `event` | `evento: fn` | Handler del bot\xF3n `icon` (funci\xF3n global, ver abajo) |\n| `event2` | `evento: fn` | Handler del bot\xF3n `icon2` (funci\xF3n global, ver abajo) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n### `:::richlist`\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Botones con acci\xF3n\n\nCada bot\xF3n de icono puede navegar (`url`/`url2`) o llamar a una funci\xF3n global (`event`/`event2`). `event` tiene prioridad sobre `url` en el mismo bot\xF3n:\n\n```md\n:::richlist\n:::richlist-item {title="Reproductor" subtitle="Demo de botones" icon="open_in_new" url="https://example.com" icon2="volume_up" event="click: reproducirSonido"}\nEl primer bot\xF3n abre una pesta\xF1a nueva; el segundo ejecuta una funci\xF3n global al hacer clic.\n:::\n:::\n```\n\n:::richlist\n:::richlist-item {title="Reproductor" subtitle="Demo de botones" icon="open_in_new" url="https://example.com" icon2="volume_up" event="click: reproducirSonido"}\nEl primer bot\xF3n abre una pesta\xF1a nueva; el segundo ejecuta una funci\xF3n global al hacer clic.\n:::\n:::\n\n### Sintaxis de `event`\n\n```md\nevent="click: miFuncion"                 <!-- un solo evento -->\nevent="click: fn1; mouseover: fn2"       <!-- varios, separados por ; -->\nevent="onclick: miFuncion"               <!-- el prefijo "on" es opcional -->\n```\n\nLa funci\xF3n se resuelve desde el **scope global** en el momento del evento y se invoca con el elemento como `this` y el evento como argumento:\n\n```js\nwindow.reproducirSonido = function (event) {\n  console.log(\'Click en:\', this);\n};\n```\n\n:::note\nSi la funci\xF3n no existe, el bot\xF3n simplemente no hace nada (sin errores). El `event` es contenido propio del autor, con el mismo modelo de confianza que los bloques HTML crudo.\n:::'
   },
   {
     "id": "stat",
@@ -12904,28 +12920,12 @@ var guideData = [
     "md": '# Slide\n\nLa directiva `:::slide` convierte su contenido en un **slider autom\xE1tico** (diapositivas con fade).\n\n## Sintaxis\n\nLas secciones se separan con `---`:\n\n```md\n:::slide {interval="2500"}\n## Diapositiva 1\n\nBienvenido a la **gu\xEDa interactiva**.\n\n---\n\n## Diapositiva 2\n\nCada `---` separa una diapositiva nueva.\n\n---\n\n## Diapositiva 3\n\nY el motor se encarga del resto.\n:::\n```\n\n:::slide {interval="2500"}\n## Diapositiva 1\n\nBienvenido a la **gu\xEDa interactiva**.\n\n---\n\n## Diapositiva 2\n\nCada `---` separa una diapositiva nueva.\n\n---\n\n## Diapositiva 3\n\nY el motor se encarga del resto.\n:::\n\n## Con contenido variado\n\n```md\n:::slide {interval="3500" speed="800"}\n:::card {title="Card" icon="dashboard"}\nLas directivas se anidan dentro.\n:::\n---\n> **Admonici\xF3n** como diapositiva\n---\n| P\xE1gina | Tema |\n| --- | --- |\n| 1 | Slide |\n| 2 | Loop |\n:::\n```\n\n:::slide {interval="3500" speed="800"}\n:::card {title="Card" icon="dashboard"}\nLas directivas se anidan dentro.\n:::\n---\n> **Admonici\xF3n** como diapositiva\n---\n| P\xE1gina | Tema |\n| --- | --- |\n| 1 | Slide |\n| 2 | Loop |\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `interval` | ms | Tiempo por diapositiva (default `3000`) |\n| `speed` | ms | Duraci\xF3n de la transici\xF3n (default `500`) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Notas\n\n- Los puntos inferiores permiten saltar a una diapositiva.\n- Al llegar a la \xFAltima, vuelve a la primera autom\xE1ticamente (loop).\n- La barra de progreso superior muestra el avance del ciclo.'
   },
   {
-    "id": "div",
-    "category": "Layout",
-    "title": "Div (contenedor)",
-    "icon": "square_foot",
-    "order": 1,
-    "md": '# Div (contenedor)\n\nLa directiva `:::div` envuelve su contenido en un `<div>` con **clases, id o estilos** propios.\n\n## Sintaxis\n\n```md\n:::div {.mi-clase #mi-id}\nContenido dentro del div.\n:::\n```\n\n:::div {.mi-clase #mi-id}\nContenido dentro del div.\n:::\n\n## Aplicando clases\n\n```md\n:::div {.test-container}\nTarjeta con estilo personalizado.\n:::\n```\n\n:::div {.test-container}\nTarjeta con estilo personalizado.\n:::\n\n## Con estilos inline\n\n```md\n:::div {style="border: 1px dashed var(--color-accent-primary, #0ea5e9); padding: 1rem; border-radius: 10px;"}\nCaja con borde discontinuo y padding.\n:::\n```\n\n:::div {style="border: 1px dashed var(--color-accent-primary, #0ea5e9); padding: 1rem; border-radius: 10px;"}\nCaja con borde discontinuo y padding.\n:::\n\n## Contenido enriquecido\n\n```md\n:::div {.test-container}\n## T\xEDtulo dentro del div\n\n:::note\nLas directivas funcionan anidadas dentro del div.\n:::\n:::\n```\n\n:::div {.test-container}\n## T\xEDtulo dentro del div\n\n:::note\nLas directivas funcionan anidadas dentro del div.\n:::\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `.clase` | texto | Clases CSS (prefijo `.`, varias separadas por espacio) |\n| `#id` | texto | Id del contenedor (prefijo `#`) |\n| `style` | CSS | Estilos inline |\n\n## Usos t\xEDpicos\n\n- Agrupar varios componentes para darles un fondo o borde com\xFAn.\n- Contenedor centrado: `:::div {style="max-width: 600px; margin: 0 auto;"}`.\n- Combinar con `:::style` para CSS reutilizable por clase.'
-  },
-  {
-    "id": "style",
+    "id": "html-blocks",
     "category": "Layout",
-    "title": "Style (CSS)",
-    "icon": "palette",
-    "order": 2,
-    "md": "# Style (CSS)\n\nLa directiva `:::style` inyecta **CSS global** al documento renderizado.\n\n## Sintaxis\n\n```md\n:::style\n.mi-clase {\n  background: #f1f5f9;\n  border-radius: 10px;\n  padding: 1rem;\n}\n:::\n```\n\n## Ejemplo combinado con div\n\n```md\n:::style\n.box-demo {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1rem;\n  padding: 1rem;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--color-accent-primary, #0ea5e9) 10%, transparent);\n}\n.box-demo > div {\n  padding: 1rem;\n  border-radius: 8px;\n  background: var(--color-background-secondary-solid, #1e293b);\n}\n:::\n\n:::div {.box-demo}\n**A**\n\n---\n**B**\n:::\n```\n\n:::style\n.box-demo {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1rem;\n  padding: 1rem;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--color-accent-primary, #0ea5e9) 10%, transparent);\n}\n.box-demo > div {\n  padding: 1rem;\n  border-radius: 8px;\n  background: var(--color-background-secondary-solid, #1e293b);\n}\n:::\n\n:::div {.box-demo}\n**A**\n\n---\n**B**\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Notas\n\n- El CSS se aplica al **documento renderizado completo**, no solo al bloque.\n- Define clases una vez al principio y \xFAsalas despu\xE9s con `:::div` o props `class`.\n- Dispones de las variables de tema del editor: `--color-background-primary`, `--color-text-primary`, `--color-accent-primary`, `--color-border`, etc."
-  },
-  {
-    "id": "raw",
-    "category": "Layout",
-    "title": "Raw (HTML)",
+    "title": "Bloques HTML",
     "icon": "code_off",
-    "order": 3,
-    "md": '# Raw (HTML)\n\nLa directiva `:::raw` (o su alias `:::custom`) inserta **HTML puro** sin procesar en el documento.\n\n## Sintaxis\n\n```md\n:::raw\n<div style="text-align: center; padding: 1rem; border: 1px solid #334155; border-radius: 10px;">\n  HTML escrito a mano funciona tal cual.\n</div>\n:::\n```\n\n:::raw\n<div style="text-align: center; padding: 1rem; border: 1px solid #334155; border-radius: 10px;">\n  HTML escrito a mano funciona tal cual.\n</div>\n:::\n\n## Elementos interactivos\n\n```md\n:::raw\n<details class="nr-details">\n  <summary>Detalle nativo con <b>HTML</b></summary>\n  <p>Los atributos, estilos y eventos se conservan intactos.</p>\n</details>\n:::\n```\n\n:::raw\n<details class="nr-details">\n  <summary>Detalle nativo con <b>HTML</b></summary>\n  <p>Los atributos, estilos y eventos se conservan intactos.</p>\n</details>\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Cu\xE1ndo usar `raw`\n\n- Insertar embeds (`iframe`, `video`, widgets).\n- Marcar up estructuras que el markdown no cubre.\n- Prototipar HTML antes de convertirlo a directiva.\n\n> \u26A0\uFE0F Al ser HTML sin filtrar, \xFAsalo solo con contenido de confianza.'
+    "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.'
   }
 ];