@ai-matrx/print 0.5.10 → 0.6.1

package/dist/markdown.cjs

@@ -24,15 +24,21 @@ __export(markdown_exports, {
   MARKDOWN_ARTICLE_TOKENS_CSS: () => MARKDOWN_ARTICLE_TOKENS_CSS,
   MARKDOWN_DOCUMENT_CSS: () => MARKDOWN_DOCUMENT_CSS,
   MARKDOWN_DOCUMENT_TOKENS_CSS: () => MARKDOWN_DOCUMENT_TOKENS_CSS,
+  MARKDOWN_PAGE_CSS: () => MARKDOWN_PAGE_CSS,
+  MARKDOWN_SHARED_CSS: () => MARKDOWN_SHARED_CSS,
+  PAGE_BREAK_CLASS: () => PAGE_BREAK_CLASS,
+  PAGE_BREAK_MARKDOWN: () => PAGE_BREAK_MARKDOWN,
   PRINT_ACTIONS_CSS: () => PRINT_ACTIONS_CSS,
   getMarkdownStylesheet: () => getMarkdownStylesheet,
   hasThinkingContent: () => hasThinkingContent,
+  isPageBreakLine: () => isPageBreakLine,
   markdownToArticleHtml: () => markdownToArticleHtml,
   markdownToHtml: () => markdownToHtml,
   markdownToHtmlForSkin: () => markdownToHtmlForSkin,
   printMarkdown: () => printMarkdown,
   removeThinkingContent: () => removeThinkingContent,
-  renderMarkdownDocument: () => renderMarkdownDocument
+  renderMarkdownDocument: () => renderMarkdownDocument,
+  splitAtPageBreaks: () => splitAtPageBreaks
 });
 module.exports = __toCommonJS(markdown_exports);
 
@@ -791,6 +797,265 @@ var MARKDOWN_DOCUMENT_CSS = `/*
 }
 `;
 var MARKDOWN_ARTICLE_CSS = `*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:Georgia,'Times New Roman',serif;font-size:11pt;line-height:1.7;color:var(--matrx-print-fg, #1a1a1a);background:var(--matrx-print-bg, #fff);max-width:780px;margin:0 auto;padding:32px 40px}.print-actions{display:flex;gap:10px;margin-bottom:28px;padding-bottom:20px;border-bottom:2px solid var(--matrx-print-border, #e5e7eb)}.print-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:8px;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;cursor:pointer;border:none;font-weight:600;transition:opacity .15s}.print-btn:hover{opacity:.85}.print-btn-primary{background:var(--matrx-print-accent, #2563eb);color:var(--matrx-print-bg, #fff)}.print-btn-secondary{background:var(--matrx-print-surface-sunken, #f3f4f6);color:var(--matrx-print-fg-muted, #374151);border:1px solid var(--matrx-print-border-muted, #d1d5db)}h1,h2,h3,h4,h5,h6{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',sans-serif;font-weight:700;line-height:1.3;color:var(--matrx-print-heading, #111827);margin-top:1.6em;margin-bottom:.5em;page-break-after:avoid}h1{font-size:24pt;border-bottom:2px solid var(--matrx-print-border, #e5e7eb);padding-bottom:.3em;margin-top:0}h2{font-size:18pt;border-bottom:1px solid var(--matrx-print-border, #e5e7eb);padding-bottom:.2em}h3{font-size:14pt}p{margin-bottom:.9em;orphans:3;widows:3}a{color:var(--matrx-print-accent, #2563eb);text-decoration:underline;word-break:break-word}ul,ol{margin:.6em 0 .9em 0;padding-left:1.8em}li{margin-bottom:.3em;page-break-inside:avoid}blockquote{margin:1em 0;padding:.7em 1em .7em 1.2em;border-left:4px solid var(--matrx-print-quote-border, #6366f1);background:var(--matrx-print-quote-bg, #f5f3ff);border-radius:0 6px 6px 0;color:var(--matrx-print-fg-muted, #374151);font-style:italic;page-break-inside:avoid}.inline-code{font-family:'JetBrains Mono','Fira Code',monospace;font-size:9.5pt;background:var(--matrx-print-code-bg, #f1f5f9);color:var(--matrx-print-ink, #0f172a);padding:1px 5px;border-radius:4px;border:1px solid var(--matrx-print-line, #e2e8f0)}.code-block-wrapper{position:relative;margin:1em 0 1.2em;border-radius:8px;overflow:hidden;border:1px solid var(--matrx-print-line, #e2e8f0);page-break-inside:avoid}.code-lang{display:block;font-family:-apple-system,sans-serif;font-size:9pt;font-weight:600;color:var(--matrx-print-fg-subtle, #64748b);background:var(--matrx-print-surface, #f8fafc);padding:4px 12px;border-bottom:1px solid var(--matrx-print-line, #e2e8f0);text-transform:uppercase;letter-spacing:.05em}.code-block{margin:0;padding:14px 16px;background:var(--matrx-print-ink, #0f172a);color:var(--matrx-print-line, #e2e8f0);font-family:'JetBrains Mono',monospace;font-size:9pt;line-height:1.6;overflow-x:auto;white-space:pre;tab-size:2}.print-table{width:100%;border-collapse:collapse;margin:1em 0 1.2em;font-size:10pt;page-break-inside:avoid}.print-table th{background:var(--matrx-print-table-head-bg, #1e293b);color:var(--matrx-print-surface, #f8fafc);font-family:-apple-system,sans-serif;font-weight:600;font-size:9.5pt;text-align:left;padding:8px 12px;border:1px solid var(--matrx-print-table-head-border, #334155)}.print-table td{padding:7px 12px;border:1px solid var(--matrx-print-line, #e2e8f0);vertical-align:top}.print-table tr:nth-child(even) td{background:var(--matrx-print-surface, #f8fafc)}hr{border:none;border-top:2px solid var(--matrx-print-border, #e5e7eb);margin:1.5em 0}.print-figure{margin:1em 0 1.2em;page-break-inside:avoid}.print-image{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:6px}.print-figure figcaption{margin-top:.4em;text-align:center;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:9.5pt;color:var(--matrx-print-fg-subtle, #64748b)}@media print{body{max-width:100%;padding:0;font-size:10.5pt}.print-actions{display:none!important}.code-block,.print-table th,blockquote{color-adjust:exact;-webkit-print-color-adjust:exact;print-color-adjust:exact}a[href]::after{content:" ("attr(href)")";font-size:9pt;color:var(--matrx-print-fg-subtle, #64748b)}a[href^="#"]::after,a[href^="javascript:"]::after{content:""}h1,h2,h3{page-break-after:avoid}pre,blockquote,table{page-break-inside:avoid}}`;
+var MARKDOWN_SHARED_CSS = `
+.matrx-page-break {
+    position: relative;
+    clear: both;
+    height: 0;
+    margin: 2.75rem 0;
+    border: 0;
+    border-top: 2px dashed var(--matrx-print-border-muted, #d1d5db);
+}
+.matrx-page-break::after {
+    content: attr(data-label);
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, -50%);
+    padding: 0 0.75rem;
+    background: var(--matrx-print-bg, #ffffff);
+    color: var(--matrx-print-fg-subtle, #6b7280);
+    font: 600 10px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.matrx-artifact {
+    margin: 1.25em 0;
+    border: 1px solid var(--matrx-print-border, #e5e7eb);
+    border-radius: 8px;
+    overflow: hidden;
+}
+.matrx-artifact-header {
+    display: flex;
+    align-items: baseline;
+    gap: 0.6em;
+    padding: 0.45em 0.9em;
+    background: var(--matrx-print-surface, #f8fafc);
+    border-bottom: 1px solid var(--matrx-print-border, #e5e7eb);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+.matrx-artifact-kind {
+    font-size: 0.72em;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--matrx-print-accent, #2563eb);
+}
+.matrx-artifact-title {
+    font-weight: 600;
+    color: var(--matrx-print-fg, #1a1a1a);
+}
+.matrx-artifact-body {
+    padding: 0.8em 0.9em;
+}
+.matrx-artifact-body > :first-child {
+    margin-top: 0;
+}
+.matrx-artifact-body > :last-child {
+    margin-bottom: 0;
+}
+/* The panel's kind chip already names these languages. */
+.matrx-artifact:is([data-artifact-type="html"], [data-artifact-type="react"], [data-artifact-type="svg"], [data-artifact-type="mermaid"], [data-artifact-type="diff"], [data-artifact-type="iframe"]) .code-lang {
+    display: none;
+}
+.matrx-artifact-empty {
+    margin: 0;
+    font-style: italic;
+    color: var(--matrx-print-fg-subtle, #6b7280);
+}
+
+li.matrx-task-item {
+    list-style: none;
+}
+/* The box IS the marker \u2014 the document skin's custom bullet must not sit on it. */
+:is(.matrx-content-container, .content) li.matrx-task-item::before {
+    content: none;
+}
+.matrx-task-box {
+    position: relative;
+    display: inline-block;
+    width: 0.9em;
+    height: 0.9em;
+    margin: 0 0.5em 0 -1.35em;
+    border: 1.5px solid var(--matrx-print-fg-muted, #4a4a4a);
+    border-radius: 3px;
+    vertical-align: -0.1em;
+}
+.matrx-task-box.is-checked::after {
+    content: "\\2713";
+    position: absolute;
+    inset: 0;
+    font-size: 0.8em;
+    font-weight: 700;
+    line-height: 1.1em;
+    text-align: center;
+    color: var(--matrx-print-fg, #1a1a1a);
+}
+
+:is(.matrx-content-container, .content) del {
+    color: var(--matrx-print-fg-muted, #4a4a4a);
+    text-decoration: line-through;
+}
+:is(.matrx-content-container, .content) hr.matrx-hr-accent {
+    height: 2px;
+    margin: 1.75em 0;
+    border: 0;
+    border-radius: 2px;
+    background: var(--matrx-print-accent, #2563eb);
+    opacity: 0.6;
+}
+:is(.matrx-content-container, .content) hr.matrx-hr-heavy {
+    height: 4px;
+    margin: 2.25em 0;
+    border: 0;
+    border-radius: 4px;
+    background: var(--matrx-print-accent, #2563eb);
+}
+
+.matrx-flashcards-print {
+    margin: 1em 0 1.2em;
+}
+.matrx-fc {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin-bottom: 0.5em;
+    border: 1px solid var(--matrx-print-border, #e5e7eb);
+    border-radius: 6px;
+}
+.matrx-fc-front,
+.matrx-fc-back {
+    padding: 0.6em 0.8em;
+}
+.matrx-fc-front {
+    font-weight: 600;
+    border-right: 1px dashed var(--matrx-print-border-muted, #d1d5db);
+}
+.matrx-fc-num {
+    display: inline-block;
+    min-width: 1.6em;
+    font-size: 0.85em;
+    color: var(--matrx-print-fg-subtle, #6b7280);
+}
+
+@media print {
+    .matrx-page-break {
+        margin: 0;
+        border: 0;
+        break-after: page;
+        page-break-after: always;
+    }
+    .matrx-page-break::after {
+        content: none;
+    }
+    .matrx-page-break + * {
+        margin-top: 0;
+    }
+
+    /* Scoped to the rendered markdown (.matrx-content-container = document
+       skin, .content = print window) so a host page that carries this sheet
+       \u2014 a WordPress theme \u2014 keeps its own print rules everywhere else. */
+
+    /* Long tables flow across pages: the header row repeats, rows never split. */
+    :is(.matrx-content-container, .content) thead {
+        display: table-header-group;
+    }
+    :is(.matrx-content-container, .content) :is(tr, img, figure),
+    .matrx-fc,
+    .matrx-task-item {
+        break-inside: avoid;
+        page-break-inside: avoid;
+    }
+    :is(.matrx-content-container, .content) :is(h1, h2, h3, h4, h5, h6),
+    .matrx-artifact-header {
+        break-after: avoid;
+        page-break-after: avoid;
+        break-inside: avoid;
+    }
+
+    /* Paper cannot scroll: long code lines wrap instead of being cut off. */
+    :is(.matrx-content-container, .content) :is(pre, pre code) {
+        white-space: pre-wrap !important;
+        overflow-wrap: anywhere;
+        overflow: visible !important;
+    }
+    .code-block-wrapper,
+    .matrx-artifact {
+        overflow: visible;
+    }
+    :is(.matrx-content-container, .content) img {
+        max-width: 100% !important;
+    }
+
+    .matrx-artifact-header,
+    .matrx-task-box {
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+    }
+
+    a.matrx-link[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: 0.85em;
+        color: var(--matrx-print-fg-subtle, #6b7280);
+        overflow-wrap: anywhere;
+    }
+}
+`;
+var MARKDOWN_PAGE_CSS = `
+@page {
+    margin: 0.6in 0.65in 0.7in;
+    @bottom-center {
+        content: counter(page) " / " counter(pages);
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font-size: 8pt;
+        color: var(--matrx-print-fg-subtle, #6b7280);
+    }
+}
+`;
+var MARKDOWN_PAGE_PLAIN_CSS = `
+@page {
+    margin: 0.6in 0.65in 0.7in;
+}
+`;
+
+// src/directives.ts
+var PAGE_BREAK_MARKDOWN = "<!-- pagebreak -->";
+var PAGE_BREAK_CLASS = "matrx-page-break";
+var PAGE_BREAK_LABEL = "Page break";
+var COMMENT_FORM = /^<!--\s*(?:page[\s_-]?break|new[\s_-]?page)\s*-->$/i;
+var LATEX_FORM = /^\\(?:pagebreak|newpage|clearpage)\s*(?:\{\s*\})?$/i;
+var DIV_FORM = /^<div\b([^>]*)>\s*<\/div>$|^<div\b([^>]*)\/>$/i;
+var DIV_BREAK_ATTR = /(?:page-break-(?:after|before)\s*:\s*always|break-(?:after|before)\s*:\s*page|class\s*=\s*["'](?:[^"']*\s)?page-?break(?:\s[^"']*)?["'])/i;
+function isPageBreakLine(line) {
+  const t = line.trim();
+  if (t.length < 8 || t.length > 200) return false;
+  if (COMMENT_FORM.test(t) || LATEX_FORM.test(t)) return true;
+  const div = DIV_FORM.exec(t);
+  if (!div) return false;
+  return DIV_BREAK_ATTR.test(div[1] ?? div[2] ?? "");
+}
+function splitAtPageBreaks(markdown) {
+  const lines = markdown.split(/\r?\n/);
+  const pieces = [];
+  let current = [];
+  let fence = null;
+  for (const line of lines) {
+    const fenceMatch = /^\s*(`{3,}|~{3,})/.exec(line);
+    if (fenceMatch) {
+      const marker = fenceMatch[1];
+      if (fence === null) fence = marker;
+      else if (marker[0] === fence[0] && marker.length >= fence.length) fence = null;
+    } else if (fence === null && isPageBreakLine(line)) {
+      if (current.join("\n").trim()) pieces.push(current.join("\n"));
+      current = [];
+      continue;
+    }
+    current.push(line);
+  }
+  if (current.join("\n").trim() || pieces.length === 0) pieces.push(current.join("\n"));
+  return pieces;
+}
 
 // src/markdown.ts
 function removeThinkingContent(content) {
@@ -803,80 +1068,166 @@ function hasThinkingContent(content) {
   if (!content) return false;
   return /<thinking>|<think>|<reasoning>/i.test(content);
 }
-function convertMarkdownTables(html) {
-  const tableRegex = /^(\|.*\|)\s*\n(\|[-\s:|]*\|)\s*\n((?:\|.*\|\s*\n?)*)/gm;
-  return html.replace(
-    tableRegex,
-    (_match, headerRow, _separatorRow, bodyRows) => {
-      const headers = headerRow.split("|").map((cell) => cell.trim()).filter((cell) => cell !== "");
-      const rows = bodyRows.trim().split("\n").filter((row) => row.trim()).map(
-        (row) => row.split("|").map((cell) => cell.trim()).filter((cell) => cell !== "")
-      );
-      let tableHtml = '<table class="matrx-table">\n';
-      if (headers.length > 0) {
-        tableHtml += '<thead class="matrx-table-head">\n<tr class="matrx-table-row">\n';
-        for (const header of headers) {
-          tableHtml += `<th class="matrx-table-header">${header}</th>
-`;
-        }
-        tableHtml += "</tr>\n</thead>\n";
-      }
-      if (rows.length > 0) {
-        tableHtml += '<tbody class="matrx-table-body">\n';
-        for (const row of rows) {
-          if (row.length === 0) continue;
-          tableHtml += '<tr class="matrx-table-row">\n';
-          for (const cell of row) {
-            tableHtml += `<td class="matrx-table-cell">${cell}</td>
-`;
-          }
-          tableHtml += "</tr>\n";
-        }
-        tableHtml += "</tbody>\n";
-      }
-      return `${tableHtml}</table>
-`;
+var TOKEN_OPEN = "\uE000";
+var TOKEN_CLOSE = "\uE001";
+var BLOCK_TOKEN = (i) => `${TOKEN_OPEN}B${i}${TOKEN_CLOSE}`;
+var INLINE_TOKEN = (i) => `${TOKEN_OPEN}I${i}${TOKEN_CLOSE}`;
+var TOKEN_RE = /\uE000([BI])(\d+)\uE001/g;
+var PARAGRAPH_WRAPPED_BLOCK_RE = /<p[^>]*>\s*(\uE000B\d+\uE001)\s*<\/p>/g;
+var Stash = class {
+  items = [];
+  block(html) {
+    return BLOCK_TOKEN(this.items.push(html) - 1);
+  }
+  inline(html) {
+    return INLINE_TOKEN(this.items.push(html) - 1);
+  }
+  restore(html) {
+    let out = html;
+    for (let pass = 0; pass < 8 && out.includes(TOKEN_OPEN); pass++) {
+      out = out.replace(PARAGRAPH_WRAPPED_BLOCK_RE, "$1").replace(TOKEN_RE, (_m, _k, i) => this.items[Number(i)] ?? "");
     }
-  );
+    return out;
+  }
+};
+var DOCUMENT_GRAMMAR = {
+  skin: "document",
+  table: "matrx-table",
+  thead: "matrx-table-head",
+  tbody: "matrx-table-body",
+  tr: "matrx-table-row",
+  th: "matrx-table-header",
+  td: "matrx-table-cell",
+  ul: "matrx-list matrx-bullet-list",
+  ol: "matrx-list matrx-numbered-list",
+  ulNested: "matrx-list matrx-bullet-list matrx-nested-list",
+  olNested: "matrx-list matrx-numbered-list matrx-nested-list",
+  li: "matrx-list-item",
+  hr: "matrx-hr",
+  del: "matrx-del",
+  strong: "matrx-strong",
+  em: "matrx-em",
+  inlineCode: "matrx-inline-code"
+};
+var ARTICLE_GRAMMAR = {
+  skin: "article",
+  table: "print-table",
+  thead: "",
+  tbody: "",
+  tr: "",
+  th: "",
+  td: "",
+  ul: "",
+  ol: "",
+  ulNested: "",
+  olNested: "",
+  li: "",
+  hr: "",
+  del: "",
+  strong: "",
+  em: "",
+  inlineCode: "inline-code"
+};
+var cls = (...names) => {
+  const joined = names.filter(Boolean).join(" ");
+  return joined ? ` class="${joined}"` : "";
+};
+var PAGE_BREAK_HTML = `<div class="${PAGE_BREAK_CLASS}" role="separator" aria-label="${PAGE_BREAK_LABEL}" data-label="${PAGE_BREAK_LABEL}"></div>`;
+function codeBlockHtml(g, code, language) {
+  const body = (0, import_html_escape2.escapeHtml)(code.replace(/\n$/, ""));
+  const lang = language.trim();
+  if (g.skin === "article") {
+    const label = lang ? `<span class="code-lang">${(0, import_html_escape2.escapeHtml)(lang)}</span>` : "";
+    return `<div class="code-block-wrapper">${label}<pre class="code-block"><code>${body}</code></pre></div>`;
+  }
+  const dataLang = lang ? ` data-language="${(0, import_html_escape2.escapeHtml)(lang)}"` : "";
+  return `<pre class="matrx-code-block"${dataLang}><code class="matrx-code">${body}</code></pre>`;
+}
+var CODE_ARTIFACT_LANGUAGE = {
+  html: "html",
+  react: "tsx",
+  svg: "svg",
+  mermaid: "mermaid",
+  diff: "diff",
+  iframe: "html",
+  code: ""
+};
+var ARTIFACT_TYPE_LABEL = {
+  html: "HTML",
+  svg: "SVG",
+  react: "React",
+  iframe: "Embed"
+};
+function parseTagAttributes(tag) {
+  const attrs = {};
+  for (const m of tag.matchAll(/([a-zA-Z_][\w-]*)\s*=\s*(?:"([^"]*)"|'([^']*)')/g)) {
+    attrs[m[1].toLowerCase()] = m[2] ?? m[3] ?? "";
+  }
+  return attrs;
+}
+function artifactLabel(type) {
+  if (!type) return "Artifact";
+  return ARTIFACT_TYPE_LABEL[type] ?? type.replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function looksLikeJson(body) {
+  const t = body.trim();
+  if (!/^[[{]/.test(t)) return false;
+  try {
+    JSON.parse(t);
+    return true;
+  } catch {
+    return false;
+  }
 }
-function markdownToHtml(markdown, options = {}) {
-  const notice = options.onNotice;
-  if (!markdown) {
-    notice?.({
-      code: "empty-output",
-      message: "markdownToHtml received an empty string.",
-      remedy: "Check the content is loaded before converting; nothing was rendered."
-    });
-    return "";
+function artifactHtml(g, attrs, body, ctx) {
+  const type = (attrs.type ?? "").toLowerCase();
+  const title = attrs.title?.trim() ?? "";
+  const header = `<div class="matrx-artifact-header"><span class="matrx-artifact-kind">${(0, import_html_escape2.escapeHtml)(
+    artifactLabel(type)
+  )}</span>${title ? `<span class="matrx-artifact-title">${(0, import_html_escape2.escapeHtml)(title)}</span>` : ""}</div>`;
+  let inner;
+  const trimmed = (body ?? "").replace(/^\n+|\n+$/g, "");
+  if (body === null || !trimmed.trim()) {
+    inner = `<p class="matrx-artifact-empty">Saved artifact \u2014 open it in AI Matrx to view its content.</p>`;
+  } else if (/^\s*(`{3,}|~{3,})/.test(trimmed)) {
+    inner = convertBody(g.skin, trimmed, ctx);
+  } else if (type in CODE_ARTIFACT_LANGUAGE) {
+    inner = codeBlockHtml(g, trimmed, CODE_ARTIFACT_LANGUAGE[type] || attrs.language || attrs.lang || "");
+  } else if (looksLikeJson(trimmed)) {
+    inner = codeBlockHtml(g, JSON.stringify(JSON.parse(trimmed), null, 2), "json");
+  } else {
+    inner = convertBody(g.skin, trimmed, ctx);
   }
-  const startWrapper = '<div class="matrx-content-container">';
-  const endWrapper = "</div>";
-  let html = options.includeThinking ? markdown : removeThinkingContent(markdown);
-  const flashcardPlaceholders = [];
-  let flashcardIndex = 0;
-  let globalCardIndex = 0;
-  html = html.replace(
-    /<flashcards>([\s\S]*?)<\/flashcards>/gi,
-    (_match, content) => {
-      const cards = content.split(/\n*---\n*/g).map((card) => card.trim()).filter((card) => card.length > 0);
-      if (cards.length === 0) return "";
-      let flashcardsHtml = '<div class="matrx-flashcards-container">\n';
-      for (const card of cards) {
-        const frontMatch = card.match(/Front:\s*(.+?)(?=\n|$)/i);
-        const backMatch = card.match(/Back:\s*([\s\S]+?)$/i);
-        const front = frontMatch?.[1]?.trim();
-        const back = backMatch?.[1]?.trim();
-        if (!front || !back) {
-          notice?.({
-            code: "flashcard-malformed",
-            message: `A flashcard was skipped: it is missing a ${front ? "Back:" : "Front:"} line.`,
-            remedy: 'Every card inside <flashcards> needs both "Front: \u2026" and "Back: \u2026", separated from the next card by ---.'
-          });
-          continue;
-        }
-        globalCardIndex++;
-        const cardId = `card${globalCardIndex}`;
-        flashcardsHtml += `    <div class="matrx-flashcard">
+  return `<section class="matrx-artifact" data-artifact-type="${(0, import_html_escape2.escapeHtml)(type || "artifact")}">${header}<div class="matrx-artifact-body">${inner}</div></section>`;
+}
+function parseFlashcards(content, notice) {
+  const cards = [];
+  for (const card of content.split(/\n*---\n*/g).map((c) => c.trim()).filter(Boolean)) {
+    const front = card.match(/Front:\s*(.+?)(?=\n|$)/i)?.[1]?.trim();
+    const back = card.match(/Back:\s*([\s\S]+?)$/i)?.[1]?.trim();
+    if (!front || !back) {
+      notice?.({
+        code: "flashcard-malformed",
+        message: `A flashcard was skipped: it is missing a ${front ? "Back:" : "Front:"} line.`,
+        remedy: 'Every card inside <flashcards> needs both "Front: \u2026" and "Back: \u2026", separated from the next card by ---.'
+      });
+      continue;
+    }
+    cards.push({ front, back });
+  }
+  return cards;
+}
+function flashcardsHtml(g, cards, ctx) {
+  if (g.skin === "article") {
+    return `<div class="matrx-flashcards-print">${cards.map(
+      (c, i) => `<div class="matrx-fc"><div class="matrx-fc-front"><span class="matrx-fc-num">${i + 1}</span>${c.front}</div><div class="matrx-fc-back">${c.back}</div></div>`
+    ).join("")}</div>`;
+  }
+  let out = '<div class="matrx-flashcards-container">\n';
+  for (const { front, back } of cards) {
+    ctx.cardIndex++;
+    const cardId = `card${ctx.cardIndex}`;
+    out += `    <div class="matrx-flashcard">
         <input type="checkbox" class="matrx-flashcard-input" id="${cardId}">
         <label for="${cardId}" class="matrx-flashcard-label"></label>
         <div class="matrx-flashcard-inner">
@@ -896,154 +1247,318 @@ function markdownToHtml(markdown, options = {}) {
     </div>
 
 `;
+  }
+  return `${out}</div>
+`;
+}
+var FENCE_OPEN = /^(\s*)(`{3,}|~{3,})\s*([^\s`]*)[^`]*$/;
+function protectRegions(markdown, g, stash, ctx) {
+  const lines = markdown.split(/\r?\n/);
+  const out = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const fence = FENCE_OPEN.exec(line);
+    if (fence) {
+      const marker = fence[2];
+      const code = [];
+      let j = i + 1;
+      for (; j < lines.length; j++) {
+        const close = /^\s*(`{3,}|~{3,})\s*$/.exec(lines[j]);
+        if (close && close[1][0] === marker[0] && close[1].length >= marker.length) break;
+        code.push(lines[j]);
       }
-      flashcardsHtml += "</div>\n";
-      const placeholder = `\u03A9FLASHCARD\u03A9${flashcardIndex}\u03A9FLASHCARD\u03A9`;
-      flashcardPlaceholders.push({ placeholder, html: flashcardsHtml });
-      flashcardIndex++;
-      return placeholder;
+      const indent = fence[1].length;
+      const dedented = code.map((l) => l.slice(Math.min(indent, l.length - l.trimStart().length)));
+      out.push(stash.block(codeBlockHtml(g, dedented.join("\n"), fence[3] ?? "")));
+      i = j;
+      continue;
+    }
+    if (isPageBreakLine(line)) {
+      out.push(stash.block(PAGE_BREAK_HTML));
+      continue;
     }
+    const open = /^\s*<artifact\b((?:[^>"']|"[^"]*"|'[^']*')*?)(\/?)>(.*)$/i.exec(line);
+    if (open) {
+      const attrs = parseTagAttributes(open[1] ?? "");
+      if (open[2] === "/") {
+        out.push(stash.block(artifactHtml(g, attrs, null, ctx)));
+        if (open[3]?.trim()) out.push(open[3]);
+        continue;
+      }
+      const bodyLines = [];
+      let rest = open[3] ?? "";
+      let after = "";
+      let j = i;
+      let inFence = null;
+      for (; ; ) {
+        const closeAt = inFence ? -1 : rest.search(/<\/artifact\s*>/i);
+        if (closeAt >= 0) {
+          bodyLines.push(rest.slice(0, closeAt));
+          after = rest.slice(closeAt).replace(/^<\/artifact\s*>/i, "");
+          break;
+        }
+        bodyLines.push(rest);
+        const f = /^\s*(`{3,}|~{3,})/.exec(rest);
+        if (f) {
+          const m = f[1];
+          if (inFence === null) inFence = m;
+          else if (m[0] === inFence[0] && m.length >= inFence.length) inFence = null;
+        }
+        j++;
+        if (j >= lines.length) break;
+        rest = lines[j];
+      }
+      const html = ctx.depth >= 3 ? codeBlockHtml(g, bodyLines.join("\n"), "") : artifactHtml(g, attrs, bodyLines.join("\n"), { ...ctx, depth: ctx.depth + 1 });
+      out.push(stash.block(html));
+      if (after.trim()) out.push(after);
+      i = j;
+      continue;
+    }
+    out.push(line);
+  }
+  let text = out.join("\n");
+  text = text.replace(
+    /`([^`\n]+)`/g,
+    (_m, code) => stash.inline(`<code${cls(g.inlineCode)}>${(0, import_html_escape2.escapeHtml)(code)}</code>`)
   );
-  html = html.replace(/^[-]{3,}$/gm, '<hr class="matrx-hr">');
-  html = html.replace(/^[*]{3,}$/gm, '<hr class="matrx-hr">');
-  const imagePlaceholders = [];
-  let imageIndex = 0;
-  html = html.replace(
-    /!\[([^\]]*)\]\(([^)]+)\)/g,
-    (_match, altText, url) => {
-      const placeholder = `\u03A9IMAGE\u03A9${imageIndex}\u03A9IMAGE\u03A9`;
-      imagePlaceholders.push({
-        placeholder,
-        html: `<img class="matrx-image" src="${url}" alt="${altText}" />`
-      });
-      imageIndex++;
-      return placeholder;
+  text = text.replace(/<!--[\s\S]*?-->/g, "");
+  const before = text;
+  for (let pass = 0; pass < 8; pass++) {
+    const next = text.replace(/<(script|style|head)\b[^>]*>[\s\S]*?<\/\1\s*>/gi, "").replace(/<\/?(?:script|style|head|html|body)\b[^>]*>/gi, "").replace(/<!DOCTYPE[^>]*>/gi, "");
+    if (next === text) break;
+    text = next;
+  }
+  text = sanitizeRawTags(text);
+  if (text !== before && !ctx.strippedAnnounced) {
+    ctx.strippedAnnounced = true;
+    ctx.options.onNotice?.({
+      code: "html-stripped",
+      message: "Unsafe or page-level markup (a <script>, <style>, <head>, an <html>/<body> shell, an on\u2026 event handler, or a javascript: URL) was removed from the rendered copy.",
+      remedy: 'To show a full HTML page, put it in an ```html fence or an <artifact type="html"> block \u2014 it is printed as its source.'
+    });
+  }
+  text = text.replace(/<flashcards>([\s\S]*?)<\/flashcards>/gi, (_m, content) => {
+    const cards = parseFlashcards(content, ctx.options.onNotice);
+    return cards.length ? `
+${stash.block(flashcardsHtml(g, cards, ctx))}
+` : "";
+  });
+  return text;
+}
+var URL_ATTRS = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "xlink:href", "poster", "background"]);
+function decodeForSchemeCheck(value) {
+  return value.replace(/&#x([0-9a-f]+);?/gi, (_m, h) => String.fromCharCode(parseInt(h, 16))).replace(/&#(\d+);?/g, (_m, d) => String.fromCharCode(Number(d))).replace(/&colon;/gi, ":").replace(/[\u0000-\u0020]+/g, "").toLowerCase();
+}
+function sanitizeRawTags(text) {
+  return text.replace(
+    /<([a-zA-Z][\w:-]*)((?:[^>"']|"[^"]*"|'[^']*')*)>/g,
+    (whole, tag, rawAttrs) => {
+      if (!/[=\s]/.test(rawAttrs)) return whole;
+      let changed = false;
+      const attrs = rawAttrs.replace(
+        /(\s+)([^\s"'=<>/]+)(\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+)))?/g,
+        (m, _sp, name, _eq, dq, sq, bare) => {
+          const lower = name.toLowerCase();
+          if (lower.startsWith("on") || lower === "srcdoc") {
+            changed = true;
+            return "";
+          }
+          if (URL_ATTRS.has(lower)) {
+            const value = decodeForSchemeCheck(dq ?? sq ?? bare ?? "");
+            if (/^(?:javascript|vbscript):|^data:text\/html/.test(value)) {
+              changed = true;
+              return ` ${name}="#"`;
+            }
+          }
+          return m;
+        }
+      );
+      return changed ? `<${tag}${attrs}>` : whole;
     }
   );
-  const linkPlaceholders = [];
-  let linkIndex = 0;
-  html = html.replace(
-    /\[([^\]]+)\]\(([^)]+)\)/g,
-    (_match, linkText, url) => {
-      const placeholder = `\u03A9LINK\u03A9${linkIndex}\u03A9LINK\u03A9`;
-      linkPlaceholders.push({
-        placeholder,
-        html: `<a class="matrx-link" href="${url}">${linkText}</a>`
+}
+function safeUrl(url) {
+  const u = url.trim();
+  if (/^(?:javascript|vbscript):|^data:text\/html/.test(decodeForSchemeCheck(u))) return "#";
+  return u.replace(/"/g, "%22");
+}
+function convertEmphasis(html, g) {
+  const strong = `<strong${cls(g.strong)}>`;
+  const em = `<em${cls(g.em)}>`;
+  return html.replace(/\*\*\*(?!\s)(.+?)(?<!\s)\*\*\*/g, `${strong}${em}$1</em></strong>`).replace(/\*\*(?!\s)(.+?)(?<!\s)\*\*/g, `${strong}$1</strong>`).replace(/(?<![\w*])\*(?![\s*])(.+?)(?<![\s*])\*(?![\w*])/g, `${em}$1</em>`).replace(/(?<![\w_])___(?!\s)(.+?)(?<!\s)___(?![\w_])/g, `${strong}${em}$1</em></strong>`).replace(/(?<![\w_])__(?!\s)(.+?)(?<!\s)__(?![\w_])/g, `${strong}$1</strong>`).replace(/(?<![\w_])_(?![\s_])(.+?)(?<![\s_])_(?![\w_])/g, `${em}$1</em>`).replace(/~~(?!\s)(.+?)(?<!\s)~~/g, `<del${cls(g.del)}>$1</del>`);
+}
+var LINK_URL = String.raw`((?:[^()\s]|\([^()\s]*\))+)(?:\s+"[^"]*")?`;
+var IMAGE_RE = new RegExp(String.raw`!\[([^\]]*)\]\(` + LINK_URL + String.raw`\)`, "g");
+var LINK_RE = new RegExp(String.raw`\[([^\]]+)\]\(` + LINK_URL + String.raw`\)`, "g");
+function convertRules(html, g) {
+  return html.replace(/^\s{0,3}#\s*={3,}\s*$/gm, `<hr${cls(g.hr, "matrx-hr-heavy")}>`).replace(/^\s{0,3}\*(?:\s*\*){2,}\s*$/gm, `<hr${cls(g.hr, "matrx-hr-accent")}>`).replace(/^\s{0,3}(?:-\s*){3,}$/gm, `<hr${cls(g.hr)}>`).replace(/^\s{0,3}(?:_\s*){3,}$/gm, `<hr${cls(g.hr)}>`);
+}
+function splitTableRow(row) {
+  let r = row.trim();
+  if (r.startsWith("|")) r = r.slice(1);
+  if (r.endsWith("|") && !r.endsWith("\\|")) r = r.slice(0, -1);
+  return r.split(/(?<!\\)\|/).map((c) => c.trim().replace(/\\\|/g, "|"));
+}
+function cellAlign(separator) {
+  const s = separator.trim();
+  const left = s.startsWith(":");
+  const right = s.endsWith(":");
+  if (left && right) return ' style="text-align:center"';
+  if (right) return ' style="text-align:right"';
+  return "";
+}
+function convertTables(html, g) {
+  const tableRegex = /^(\|.*\|)\s*\n(\|[-\s:|]*\|)\s*\n((?:\|.*\|\s*\n?)*)/gm;
+  return html.replace(
+    tableRegex,
+    (_m, headerRow, separatorRow, bodyRows) => {
+      const headers = splitTableRow(headerRow);
+      const aligns = splitTableRow(separatorRow).map(cellAlign);
+      const rows = bodyRows.trim().split("\n").filter((r) => r.trim()).map(splitTableRow);
+      let t = `<table${cls(g.table)}>
+<thead${cls(g.thead)}>
+<tr${cls(g.tr)}>
+`;
+      headers.forEach((h, i) => {
+        t += `<th${cls(g.th)}${aligns[i] ?? ""}>${h}</th>
+`;
       });
-      linkIndex++;
-      return placeholder;
+      t += "</tr>\n</thead>\n";
+      if (rows.length > 0) {
+        t += `<tbody${cls(g.tbody)}>
+`;
+        for (const row of rows) {
+          t += `<tr${cls(g.tr)}>
+`;
+          row.forEach((c, i) => {
+            t += `<td${cls(g.td)}${aligns[i] ?? ""}>${c}</td>
+`;
+          });
+          t += "</tr>\n";
+        }
+        t += "</tbody>\n";
+      }
+      return `${t}</table>
+`;
     }
   );
-  html = html.replace(/^# (.+)$/gm, '<h1 class="matrx-h1">$1</h1>').replace(/^## (.+)$/gm, '<h2 class="matrx-h2">$1</h2>').replace(/^### (.+)$/gm, '<h3 class="matrx-h3">$1</h3>').replace(/^#### (.+)$/gm, '<h4 class="matrx-h4">$1</h4>').replace(/^##### (.+)$/gm, '<h5 class="matrx-h5">$1</h5>').replace(/^###### (.+)$/gm, '<h6 class="matrx-h6">$1</h6>');
-  html = html.replace(/\*\*(.+?)\*\*/g, '<strong class="matrx-strong">$1</strong>').replace(/\*(.+?)\*/g, '<em class="matrx-em">$1</em>').replace(/__(.+?)__/g, '<strong class="matrx-strong">$1</strong>').replace(/_(.+?)_/g, '<em class="matrx-em">$1</em>');
+}
+function convertLists(html, g) {
   const lines = html.split("\n");
-  let processedHtml = "";
+  let processed = "";
   const listStack = [];
   let lastListItem = "";
+  const li = `<li${cls(g.li)}>`;
   const top = () => listStack[listStack.length - 1];
-  const closeDeeperThan = (indent) => {
-    while (listStack.length > 0 && top().indent > indent) {
-      if (lastListItem) {
-        processedHtml += "</li>\n";
-        lastListItem = "";
-      }
-      const closing = listStack.pop();
-      if (!closing) break;
-      processedHtml += closing.type === "ol" ? "</ol>\n" : "</ul>\n";
-      if (listStack.length > 0) processedHtml += "</li>\n";
+  const openTag = (type, nested) => type === "ol" ? `<ol${cls(nested ? g.olNested : g.ol)}>
+` : `<ul${cls(nested ? g.ulNested : g.ul)}>
+`;
+  const popOne = () => {
+    if (lastListItem) {
+      processed += "</li>\n";
+      lastListItem = "";
     }
+    const closing = listStack.pop();
+    if (!closing) return;
+    processed += closing.type === "ol" ? "</ol>\n" : "</ul>\n";
+    if (listStack.length > 0) processed += "</li>\n";
+  };
+  const closeDeeperThan = (indent) => {
+    while (listStack.length > 0 && top().indent > indent) popOne();
   };
   for (const line of lines) {
-    const numberedMatch = line.match(/^(\s*)(\d+)\.\s+(.+)$/);
-    if (numberedMatch) {
-      const indent = (numberedMatch[1] ?? "").length;
-      const content = numberedMatch[3] ?? "";
+    const numbered = line.match(/^(\s*)(\d+)[.)]\s+(.+)$/);
+    const bullet = numbered ? null : line.match(/^(\s*)[*\-+]\s+(.+)$/);
+    if (numbered || bullet) {
+      const type = numbered ? "ol" : "ul";
+      const indent = (numbered ?? bullet)[1]?.length ?? 0;
+      const content = (numbered ? numbered[3] : bullet[2]) ?? "";
       const current = top();
       if (current && indent > current.indent) {
-        processedHtml += '\n<ol class="matrx-list matrx-numbered-list matrx-nested-list">\n';
-        listStack.push({ type: "ol", indent });
-        processedHtml += `<li class="matrx-list-item">${content}`;
-        lastListItem = "ol";
+        processed += `
+${openTag(type, true)}`;
+        listStack.push({ type, indent });
       } else {
         closeDeeperThan(indent);
-        if (lastListItem && top()?.indent === indent) processedHtml += "</li>\n";
+        if (lastListItem && top()?.indent === indent) processed += "</li>\n";
         const now = top();
-        if (!now || now.indent !== indent || now.type !== "ol") {
-          processedHtml += '<ol class="matrx-list matrx-numbered-list">\n';
-          listStack.push({ type: "ol", indent });
+        if (now && now.indent === indent && now.type !== type) {
+          const closing = listStack.pop();
+          processed += closing.type === "ol" ? "</ol>\n" : "</ul>\n";
         }
-        processedHtml += `<li class="matrx-list-item">${content}`;
-        lastListItem = "ol";
-      }
-      continue;
-    }
-    const bulletMatch = line.match(/^(\s*)[*\-+]\s+(.+)$/);
-    if (bulletMatch) {
-      const indent = (bulletMatch[1] ?? "").length;
-      const content = bulletMatch[2] ?? "";
-      const current = top();
-      if (current && indent > current.indent) {
-        processedHtml += '\n<ul class="matrx-list matrx-bullet-list matrx-nested-list">\n';
-        listStack.push({ type: "ul", indent });
-        processedHtml += `<li class="matrx-list-item">${content}`;
-        lastListItem = "ul";
-      } else {
-        closeDeeperThan(indent);
-        if (lastListItem && top()?.indent === indent) processedHtml += "</li>\n";
-        const now = top();
-        if (!now || now.indent !== indent || now.type !== "ul") {
-          processedHtml += '<ul class="matrx-list matrx-bullet-list">\n';
-          listStack.push({ type: "ul", indent });
+        const after = top();
+        if (!after || after.indent !== indent || after.type !== type) {
+          processed += openTag(type, listStack.length > 0);
+          listStack.push({ type, indent });
         }
-        processedHtml += `<li class="matrx-list-item">${content}`;
-        lastListItem = "ul";
       }
+      processed += `${li}${content}`;
+      lastListItem = type;
       continue;
     }
     if (line.trim() !== "") {
-      while (listStack.length > 0) {
-        if (lastListItem) {
-          processedHtml += "</li>\n";
-          lastListItem = "";
-        }
-        const closing = listStack.pop();
-        if (!closing) break;
-        processedHtml += closing.type === "ol" ? "</ol>\n" : "</ul>\n";
-        if (listStack.length > 0) processedHtml += "</li>\n";
-      }
+      while (listStack.length > 0) popOne();
     }
-    processedHtml += `${line}
+    processed += `${line}
 `;
   }
-  while (listStack.length > 0) {
-    if (lastListItem) {
-      processedHtml += "</li>\n";
-      lastListItem = "";
-    }
-    const closing = listStack.pop();
-    if (!closing) break;
-    processedHtml += closing.type === "ol" ? "</ol>\n" : "</ul>\n";
-    if (listStack.length > 0) processedHtml += "</li>\n";
+  while (listStack.length > 0) popOne();
+  return processed.replace(
+    /<li( class="([^"]*)")?>\s*\[([ xX])\]\s+/g,
+    (_m, _c, classes, mark) => `<li${cls(classes ?? "", "matrx-task-item")}><span class="matrx-task-box${mark === " " ? "" : " is-checked"}" aria-hidden="true"></span>`
+  );
+}
+function convertBody(skin, markdown, ctx) {
+  return skin === "article" ? articleBody(markdown, ctx) : documentBody(markdown, ctx);
+}
+function scrubTokens(markdown) {
+  return markdown.replace(/[\uE000\uE001]/g, "");
+}
+function newContext(options) {
+  return { options, depth: 0, cardIndex: 0, strippedAnnounced: false };
+}
+function markdownToHtml(markdown, options = {}) {
+  if (!markdown) {
+    options.onNotice?.({
+      code: "empty-output",
+      message: "markdownToHtml received an empty string.",
+      remedy: "Check the content is loaded before converting; nothing was rendered."
+    });
+    return "";
   }
-  html = processedHtml;
-  html = html.replace(/^> (.+)$/gm, '<blockquote class="matrx-blockquote">$1</blockquote>');
+  const source = scrubTokens(options.includeThinking ? markdown : removeThinkingContent(markdown));
+  return `<div class="matrx-content-container">${documentBody(source, newContext(options))}</div>`;
+}
+function documentBody(markdown, ctx) {
+  const g = DOCUMENT_GRAMMAR;
+  const stash = new Stash();
+  let html = protectRegions(markdown, g, stash, ctx);
+  html = convertRules(html, g);
   html = html.replace(
-    /```([^`]+)```/gs,
-    '<pre class="matrx-code-block"><code class="matrx-code">$1</code></pre>'
+    IMAGE_RE,
+    (_m, alt, url) => stash.block(`<img class="matrx-image" src="${safeUrl(url)}" alt="${(0, import_html_escape2.escapeHtml)(alt)}" />`)
   );
-  html = html.replace(/`([^`]+)`/g, '<code class="matrx-inline-code">$1</code>');
-  html = convertMarkdownTables(html);
-  html = html.replace(/<table>/g, '<table class="matrx-table">').replace(/<thead>/g, '<thead class="matrx-table-head">').replace(/<tbody>/g, '<tbody class="matrx-table-body">').replace(/<tr>/g, '<tr class="matrx-table-row">').replace(/<th>/g, '<th class="matrx-table-header">').replace(/<td>/g, '<td class="matrx-table-cell">');
-  html = html.replace(/<img([^>]*)>/g, '<img class="matrx-image"$1>');
-  html = html.replace(/<div(?!\s+class="matrx-)([^>]*)>/g, '<div class="matrx-div"$1>');
-  html = html.replace(/<span([^>]*)>/g, '<span class="matrx-span"$1>');
-  html = html.replace(/^([^<\n].+)$/gm, '<p class="matrx-paragraph">$1</p>');
   html = html.replace(
-    /<\/p>\s*<p class="matrx-paragraph">/g,
-    '</p><p class="matrx-paragraph">'
+    LINK_RE,
+    (_m, text, url) => stash.inline(`<a class="matrx-link" href="${safeUrl(url)}">${convertEmphasis(text, g)}</a>`)
   );
+  html = html.replace(/^# (.+)$/gm, '<h1 class="matrx-h1">$1</h1>').replace(/^## (.+)$/gm, '<h2 class="matrx-h2">$1</h2>').replace(/^### (.+)$/gm, '<h3 class="matrx-h3">$1</h3>').replace(/^#### (.+)$/gm, '<h4 class="matrx-h4">$1</h4>').replace(/^##### (.+)$/gm, '<h5 class="matrx-h5">$1</h5>').replace(/^###### (.+)$/gm, '<h6 class="matrx-h6">$1</h6>');
+  html = convertLists(html, g);
+  html = convertEmphasis(html, g);
+  html = html.replace(/^> ?(.+)$/gm, '<blockquote class="matrx-blockquote">$1</blockquote>');
+  html = convertTables(html, g);
+  html = html.replace(/<table>/g, '<table class="matrx-table">').replace(/<thead>/g, '<thead class="matrx-table-head">').replace(/<tbody>/g, '<tbody class="matrx-table-body">').replace(/<tr>/g, '<tr class="matrx-table-row">').replace(/<th>/g, '<th class="matrx-table-header">').replace(/<td>/g, '<td class="matrx-table-cell">');
+  html = html.replace(/<img(?![^>]*class=)([^>]*)>/g, '<img class="matrx-image"$1>');
+  html = html.replace(/<div\b([^>]*)>/g, (m, attrs) => {
+    if (/\bclass="matrx-/.test(attrs)) return m;
+    if (/\bclass="/.test(attrs)) return `<div${attrs.replace(/\bclass="/, 'class="matrx-div ')}>`;
+    return `<div class="matrx-div"${attrs}>`;
+  });
+  html = html.replace(/<span(?![^>]*class=)([^>]*)>/g, '<span class="matrx-span"$1>');
+  html = html.replace(/^([^<\n].+)$/gm, '<p class="matrx-paragraph">$1</p>');
+  html = html.replace(/<\/p>\s*<p class="matrx-paragraph">/g, '</p><p class="matrx-paragraph">');
   html = html.replace(
-    /(<h1 class="matrx-h1">[\s\S]*?<\/h1>\s*)<p class="matrx-paragraph">([\s\S]*?)<\/p>/g,
+    /(<h1 class="matrx-h1">[\s\S]*?<\/h1>\s*)<p class="matrx-paragraph">((?:(?!\uE000B)[\s\S])*?)<\/p>/g,
     '$1<p class="matrx-intro">$2</p>'
   );
   html = html.replace(
@@ -1070,42 +1585,7 @@ function markdownToHtml(markdown, options = {}) {
     /(<div class="matrx-faq-answer">)<p class="matrx-paragraph">([\s\S]*?)<\/p>(<\/div>)/g,
     "$1$2$3"
   );
-  for (const { placeholder, html: imageHtml } of imagePlaceholders) {
-    if (html.includes(placeholder)) html = html.replaceAll(placeholder, imageHtml);
-  }
-  html = html.replace(/<p class="matrx-paragraph">\s*(<img[^>]*>)\s*<\/p>/g, "$1");
-  for (const { placeholder, html: linkHtml } of linkPlaceholders) {
-    if (html.includes(placeholder)) html = html.replaceAll(placeholder, linkHtml);
-  }
-  for (const { placeholder, html: cardHtml } of flashcardPlaceholders) {
-    if (html.includes(placeholder)) html = html.replaceAll(placeholder, cardHtml);
-  }
-  return startWrapper + html + endWrapper;
-}
-function convertArticleTables(html) {
-  const tableRegex = /^(\|.*\|)\s*\n(\|[-\s:|]*\|)\s*\n((?:\|.*\|\s*\n?)*)/gm;
-  return html.replace(
-    tableRegex,
-    (_match, headerRow, _sep, bodyRows) => {
-      const headers = headerRow.split("|").map((c) => c.trim()).filter((c) => c !== "");
-      const rows = bodyRows.trim().split("\n").filter((r) => r.trim()).map(
-        (r) => r.split("|").map((c) => c.trim()).filter((c) => c !== "")
-      );
-      let t = '<table class="print-table">\n';
-      if (headers.length) {
-        t += `<thead><tr>${headers.map((h) => `<th>${h}</th>`).join("")}</tr></thead>
-`;
-      }
-      if (rows.length) {
-        t += `<tbody>${rows.map(
-          (r) => r.length ? `<tr>${r.map((c) => `<td>${c}</td>`).join("")}</tr>` : ""
-        ).join("\n")}</tbody>
-`;
-      }
-      return `${t}</table>
-`;
-    }
-  );
+  return stash.restore(html);
 }
 function markdownToArticleHtml(markdown, options = {}) {
   if (!markdown) {
@@ -1116,117 +1596,38 @@ function markdownToArticleHtml(markdown, options = {}) {
     });
     return "";
   }
-  let html = options.includeThinking ? markdown : removeThinkingContent(markdown);
-  html = convertArticleTables(html);
-  const codeBlockPlaceholders = [];
-  let codeIdx = 0;
+  const source = scrubTokens(options.includeThinking ? markdown : removeThinkingContent(markdown));
+  return articleBody(source, newContext(options));
+}
+function articleBody(markdown, ctx) {
+  const g = ARTICLE_GRAMMAR;
+  const stash = new Stash();
+  let html = protectRegions(markdown, g, stash, ctx);
+  html = convertTables(html, g);
+  html = convertRules(html, g);
   html = html.replace(
-    /```(\w*)\n?([\s\S]*?)```/g,
-    (_m, lang, code) => {
-      const ph = `\u03A9CODEBLOCK\u03A9${codeIdx}\u03A9CODEBLOCK\u03A9`;
-      const langLabel = lang ? `<span class="code-lang">${lang}</span>` : "";
-      codeBlockPlaceholders.push({
-        placeholder: ph,
-        html: `<div class="code-block-wrapper">${langLabel}<pre class="code-block"><code>${(0, import_html_escape2.escapeHtml)(
-          code.trim()
-        )}</code></pre></div>`
-      });
-      codeIdx++;
-      return ph;
-    }
-  );
-  const imagePlaceholders = [];
-  let imageIdx = 0;
-  html = html.replace(
-    /!\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g,
-    (_m, alt, url) => {
-      const ph = `\u03A9IMAGE\u03A9${imageIdx}\u03A9IMAGE\u03A9`;
-      imagePlaceholders.push({
-        placeholder: ph,
-        html: `<figure class="print-figure"><img class="print-image" src="${url}" alt="${(0, import_html_escape2.escapeHtml)(alt)}" />${alt ? `<figcaption>${(0, import_html_escape2.escapeHtml)(alt)}</figcaption>` : ""}</figure>`
-      });
-      imageIdx++;
-      return ph;
-    }
+    IMAGE_RE,
+    (_m, alt, url) => stash.block(
+      `<figure class="print-figure"><img class="print-image" src="${safeUrl(url)}" alt="${(0, import_html_escape2.escapeHtml)(alt)}" />${alt ? `<figcaption>${(0, import_html_escape2.escapeHtml)(alt)}</figcaption>` : ""}</figure>`
+    )
   );
-  const linkPlaceholders = [];
-  let linkIdx = 0;
   html = html.replace(
-    /\[([^\]]+)\]\(([^)]+)\)/g,
-    (_m, text, url) => {
-      const ph = `\u03A9LINK\u03A9${linkIdx}\u03A9LINK\u03A9`;
-      linkPlaceholders.push({ placeholder: ph, html: `<a href="${url}">${text}</a>` });
-      linkIdx++;
-      return ph;
-    }
+    LINK_RE,
+    (_m, text, url) => stash.inline(`<a href="${safeUrl(url)}">${convertEmphasis(text, g)}</a>`)
   );
   html = html.replace(/^#{6}\s+(.+)$/gm, "<h6>$1</h6>").replace(/^#{5}\s+(.+)$/gm, "<h5>$1</h5>").replace(/^#{4}\s+(.+)$/gm, "<h4>$1</h4>").replace(/^#{3}\s+(.+)$/gm, "<h3>$1</h3>").replace(/^#{2}\s+(.+)$/gm, "<h2>$1</h2>").replace(/^#{1}\s+(.+)$/gm, "<h1>$1</h1>");
-  html = html.replace(/^> (.+)$/gm, "<blockquote>$1</blockquote>");
-  html = html.replace(/^[-*_]{3,}$/gm, "<hr>");
-  html = html.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/___(.+?)___/g, "<strong><em>$1</em></strong>").replace(/__(.+?)__/g, "<strong>$1</strong>").replace(/_([^_\s][^_]*)_/g, "<em>$1</em>");
-  html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
-  const lines = html.split("\n");
-  const result = [];
-  let inUl = false;
-  let inOl = false;
-  for (const line of lines) {
-    const ulMatch = line.match(/^(\s*)[-*+]\s+(.+)$/);
-    const olMatch = line.match(/^(\s*)\d+\.\s+(.+)$/);
-    if (ulMatch) {
-      if (inOl) {
-        result.push("</ol>");
-        inOl = false;
-      }
-      if (!inUl) {
-        result.push("<ul>");
-        inUl = true;
-      }
-      result.push(`<li>${ulMatch[2] ?? ""}</li>`);
-    } else if (olMatch) {
-      if (inUl) {
-        result.push("</ul>");
-        inUl = false;
-      }
-      if (!inOl) {
-        result.push("<ol>");
-        inOl = true;
-      }
-      result.push(`<li>${olMatch[2] ?? ""}</li>`);
-    } else {
-      if (inUl) {
-        result.push("</ul>");
-        inUl = false;
-      }
-      if (inOl) {
-        result.push("</ol>");
-        inOl = false;
-      }
-      result.push(line);
-    }
-  }
-  if (inUl) result.push("</ul>");
-  if (inOl) result.push("</ol>");
-  html = result.join("\n");
+  html = html.replace(/^> ?(.+)$/gm, "<blockquote>$1</blockquote>");
+  html = convertLists(html, g);
+  html = convertEmphasis(html, g);
   html = html.split("\n").map((line) => {
     const t = line.trim();
     if (!t) return "";
-    if (/^<\/?(h[1-6]|ul|ol|li|blockquote|pre|hr|table|thead|tbody|tr|th|td|div|figure)/.test(t) || /^Ω(CODEBLOCK|IMAGE)Ω/.test(t)) {
+    if (/^<\/?(h[1-6]|ul|ol|li|blockquote|pre|hr|table|thead|tbody|tr|th|td|div|figure|section)/.test(t) || /^\uE000B\d+\uE001$/.test(t)) {
       return line;
     }
     return `<p>${t}</p>`;
   }).join("\n");
-  for (const { placeholder, html: ph } of codeBlockPlaceholders) {
-    html = html.replace(`<p>${placeholder}</p>`, ph);
-    html = html.replace(placeholder, ph);
-  }
-  for (const { placeholder, html: ph } of imagePlaceholders) {
-    html = html.replaceAll(`<p>${placeholder}</p>`, ph);
-    html = html.replaceAll(placeholder, ph);
-  }
-  for (const { placeholder, html: ph } of linkPlaceholders) {
-    html = html.replaceAll(placeholder, ph);
-  }
-  return html;
+  return stash.restore(html).replace(/\n{3,}/g, "\n\n").trim();
 }
 var PRINT_ACTIONS_CSS = `
 .print-actions { display: flex; gap: 10px; margin: 0 auto 28px; max-width: 800px; padding: 0 2rem 20px; border-bottom: 2px solid var(--matrx-print-border, #e1e1e1); }
@@ -1240,7 +1641,8 @@ function getMarkdownStylesheet(options = {}) {
   const base = skin === "article" ? `${MARKDOWN_ARTICLE_TOKENS_CSS}
 ${MARKDOWN_ARTICLE_CSS}` : `${MARKDOWN_DOCUMENT_TOKENS_CSS}
 ${MARKDOWN_DOCUMENT_CSS}`;
-  return [base, options.tokens ?? "", options.extraCss ?? ""].filter((part) => part.trim().length > 0).join("\n");
+  const page = options.pageNumbers === false ? MARKDOWN_PAGE_PLAIN_CSS : MARKDOWN_PAGE_CSS;
+  return [base, MARKDOWN_SHARED_CSS, page, options.tokens ?? "", options.extraCss ?? ""].filter((part) => part.trim().length > 0).join("\n");
 }
 function markdownToHtmlForSkin(markdown, skin, options = {}) {
   return skin === "article" ? markdownToArticleHtml(markdown, options) : markdownToHtml(markdown, options);