npm - apexfile - Versions diffs - 1.1.0 - Mend

apexfile 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/src/renderer/html.js ADDED Viewed

@@ -0,0 +1,983 @@
+'use strict';
+/**
+ * ApexDoc HTML Renderer
+ * Walks the resolved AST and produces a full HTML document string.
+ */
+class HTMLRenderer {
+  constructor(ast) {
+    this.ast    = ast;
+    this.meta   = ast.meta?.fields   || {};
+    this.style  = ast.style          || {};
+    this._ids   = new Set();  // for deduplicating anchor IDs
+  }
+  // ── Entry Point ────────────────────────────────────────────────
+  render() {
+    const bodyHTML  = this._renderNodes(this.ast.body);
+    const styleCSS  = this._buildCSS();
+    const title     = this.meta.title || 'ApexDoc Document';
+    return `<!DOCTYPE html>
+<html lang="${this.meta.lang || 'en'}" dir="${this.meta.direction || 'ltr'}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${this._esc(title)}</title>
+  ${this.meta.description ? `<meta name="description" content="${this._esc(this.meta.description)}">` : ''}
+  ${this.meta.author      ? `<meta name="author"      content="${this._esc(Array.isArray(this.meta.author) ? this.meta.author.join(', ') : this.meta.author)}">` : ''}
+  <style>
+${this._baseCSS()}
+${styleCSS}
+  </style>
+</head>
+<body class="apx-doc theme-${this.meta.theme || 'default'}">
+  <div class="apx-content">
+${bodyHTML}
+  </div>
+${this._footerScripts()}
+</body>
+</html>`;
+  }
+  // ── Node Renderer ──────────────────────────────────────────────
+  _renderNodes(nodes) {
+    if (!nodes || nodes.length === 0) return '';
+    return nodes.map(n => this._renderNode(n)).filter(Boolean).join('\n');
+  }
+  _renderNode(node) {
+    if (!node) return '';
+    switch (node.type) {
+      case 'Heading':        return this._renderHeading(node);
+      case 'Paragraph':      return this._renderParagraph(node);
+      case 'Text':           return this._esc(node.value);
+      case 'Bold':           return `<strong>${this._renderChildren(node)}</strong>`;
+      case 'Italic':         return `<em>${this._renderChildren(node)}</em>`;
+      case 'Underline':      return `<u>${this._renderChildren(node)}</u>`;
+      case 'Strikethrough':  return `<s>${this._renderChildren(node)}</s>`;
+      case 'Superscript':    return `<sup>${this._renderChildren(node)}</sup>`;
+      case 'Subscript':      return `<sub>${this._renderChildren(node)}</sub>`;
+      case 'CodeInline':     return `<code class="apx-code-inline">${this._esc(node.value)}</code>`;
+      case 'Highlight':      return `<mark>${this._renderChildren(node)}</mark>`;
+      case 'MathInline':     return `<span class="apx-math-inline">\\(${this._esc(node.value)}\\)</span>`;
+      case 'Expression':     return this._esc(String(node.resolved ?? node.value));
+      case 'FootnoteRef':    return `<sup><a href="#fn-${node.id}" id="fnref-${node.id}" class="apx-fn-ref">[${node.id}]</a></sup>`;
+      case 'FootnoteDef':    return `<div id="fn-${node.id}" class="apx-fn-def"><strong>[${node.id}]</strong> ${this._esc(node.content)}</div>`;
+      case 'HR':             return `<hr class="apx-hr apx-hr-${node.style === '===' ? 'double' : node.style === '~~~' ? 'wave' : 'solid'}">`;
+      case 'Newline':        return '';
+      case 'InlineStyled':   return this._renderInlineStyled(node);
+      case 'Link':           return this._renderLink(node);
+      case 'MathBlock':      return this._renderMathBlock(node);
+      case 'List':           return this._renderList(node);
+      case 'Blockquote':     return this._renderBlockquote(node);
+      case 'Block':          return this._renderBlock(node);
+      case 'SelfCloseBlock': return this._renderSelfCloseBlock(node);
+      case 'Keyframe':       return this._renderKeyframe(node);
+      default:
+        return '';
+    }
+  }
+  // ── Heading ────────────────────────────────────────────────────
+  _renderHeading(node) {
+    const text  = this._renderChildren(node);
+    const raw   = node.children.map(c => c.value || '').join('');
+    const id    = this._headingId(raw);
+    const style = this._propsToStyle(node.props);
+    const tag   = `h${node.level}`;
+    return `<${tag} id="${id}" class="apx-heading apx-h${node.level}"${style}>${text}</${tag}>`;
+  }
+  _headingId(text) {
+    let id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+    // Deduplicate
+    if (this._ids.has(id)) {
+      let n = 1;
+      while (this._ids.has(`${id}-${n}`)) n++;
+      id = `${id}-${n}`;
+    }
+    this._ids.add(id);
+    return id;
+  }
+  // ── Paragraph ──────────────────────────────────────────────────
+  _renderParagraph(node) {
+    const content = this._renderChildren(node);
+    if (!content.trim()) return '';
+    return `<p class="apx-p">${content}</p>`;
+  }
+  // ── Inline Styled ──────────────────────────────────────────────
+  _renderInlineStyled(node) {
+    const content = this._renderChildren(node);
+    const style   = this._propsToStyle(node.props);
+    const cls     = node.props.animation ? ` apx-animated` : '';
+    // Tooltip
+    const tooltip = node.props.tooltip ? ` title="${this._esc(node.props.tooltip)}"` : '';
+    // Glossary
+    const glossary = node.props.glossary ? ` class="apx-glossary"` : '';
+    return `<span class="apx-styled${cls}"${style}${tooltip}${glossary}>${content}</span>`;
+  }
+  // ── Link ───────────────────────────────────────────────────────
+  _renderLink(node) {
+    const content = this._renderChildren(node);
+    const href    = node.href || '';
+    // Internal anchor
+    if (href.startsWith('#')) return `<a href="${href}" class="apx-link-internal">${content}</a>`;
+    // Modal trigger
+    if (href.startsWith('modal:')) {
+      return `<a href="#" class="apx-modal-trigger" data-modal="${href.slice(6)}">${content}</a>`;
+    }
+    // External
+    return `<a href="${this._esc(href)}" class="apx-link" target="_blank" rel="noopener">${content}</a>`;
+  }
+  // ── List ───────────────────────────────────────────────────────
+  _renderList(node) {
+    const tag   = node.ordered ? 'ol' : 'ul';
+    const items = node.items.map(item => {
+      if (item.type === 'TaskItem') {
+        const checked  = item.state === 'done';
+        const progress = item.state === 'progress';
+        const cls      = `apx-task-item apx-task-${item.state}`;
+        const icon     = checked ? '✓' : progress ? '◑' : '○';
+        return `<li class="${cls}"><span class="apx-task-icon">${icon}</span>${this._renderChildren(item)}</li>`;
+      }
+      return `<li class="apx-li">${this._renderChildren(item)}</li>`;
+    }).join('\n');
+    return `<${tag} class="apx-list apx-${node.ordered ? 'ol' : 'ul'}">\n${items}\n</${tag}>`;
+  }
+  // ── Blockquote ─────────────────────────────────────────────────
+  _renderBlockquote(node) {
+    const content = this._renderChildren(node);
+    return `<blockquote class="apx-blockquote apx-bq-level-${node.level}">${content}</blockquote>`;
+  }
+  // ── Math Block ─────────────────────────────────────────────────
+  _renderMathBlock(node) {
+    const raw     = node.children?.[0]?.value || node.value || '';
+    const dialect = node.dialect || 'latex';
+    const label   = node.props?.label || '';
+    const numbered = node.props?.numbered ? ` <span class="apx-eq-num">(${label})</span>` : '';
+    return `<div class="apx-math-block" data-dialect="${dialect}" id="${label}">\\[${this._esc(raw)}\\]${numbered}</div>`;
+  }
+  // ── Generic Block Dispatcher ───────────────────────────────────
+  _renderBlock(node) {
+    const dispatch = {
+      // Content
+      box:        () => this._renderBox(node),
+      note:       () => this._renderCallout(node, 'note', '📝'),
+      tip:        () => this._renderCallout(node, 'tip', '💡'),
+      warning:    () => this._renderCallout(node, 'warning', '⚠️'),
+      danger:     () => this._renderCallout(node, 'danger', '🚨'),
+      success:    () => this._renderCallout(node, 'success', '✅'),
+      info:       () => this._renderCallout(node, 'info', 'ℹ️'),
+      collapse:   () => this._renderCollapse(node),
+      tabs:       () => this._renderTabs(node),
+      grid:       () => this._renderGrid(node),
+      animate:    () => this._renderAnimate(node),
+      stagger:    () => this._renderStagger(node),
+      // Code & math
+      code:       () => this._renderCode(node),
+      math:       () => this._renderMathBlock(node),
+      chem:       () => this._renderChem(node),
+      terminal:   () => this._renderTerminal(node),
+      diff:       () => this._renderDiff(node),
+      // Data
+      table:      () => this._renderTable(node),
+      data:       () => this._renderData(node),
+      stats:      () => this._renderStats(node),
+      // Charts
+      chart:      () => this._renderChart(node),
+      // Interactive
+      poll:       () => this._renderPoll(node),
+      quiz:       () => this._renderQuiz(node),
+      kanban:     () => this._renderKanban(node),
+      timeline:   () => this._renderTimeline(node),
+      flowchart:  () => this._renderFlowchart(node),
+      mindmap:    () => this._renderMindmap(node),
+      modal:      () => this._renderModal(node),
+      // Media
+      gallery:    () => this._renderGallery(node),
+      svg:        () => this._renderSVG(node),
+      // Proof / math
+      theorem:    () => this._renderProofBlock(node, 'theorem'),
+      proof:      () => this._renderProofBlock(node, 'proof'),
+      lemma:      () => this._renderProofBlock(node, 'lemma'),
+      corollary:  () => this._renderProofBlock(node, 'corollary'),
+      // i18n
+      lang:       () => this._renderLang(node),
+      restrict:   () => this._renderRestrict(node),
+      redact:     () => this._renderRedact(node),
+      // Define / import — handled at parse time, not render time
+      define:     () => '',
+      import:     () => '',
+      // Slide
+      slide:      () => this._renderSlide(node),
+    };
+    const fn = dispatch[node.name];
+    if (fn) return fn();
+    // Generic fallback: render as a div with data attributes
+    const style    = this._propsToStyle(node.props);
+    const children = this._renderNodes(node.children);
+    return `<div class="apx-block apx-block-${node.name}"${style}>${children}</div>`;
+  }
+  // ── Self-Closing Block Dispatcher ──────────────────────────────
+  _renderSelfCloseBlock(node) {
+    const dispatch = {
+      chart:          () => this._renderChart(node),
+      image:          () => this._renderImage(node),
+      video:          () => this._renderVideo(node),
+      audio:          () => this._renderAudio(node),
+      clock:          () => this._renderClock(node),
+      countdown:      () => this._renderCountdown(node),
+      divider:        () => `<hr class="apx-divider apx-divider-${node.props.style || 'solid'}" style="color:${node.props.color || 'inherit'};margin:${node.props.margin || '1rem'} 0">`,
+      spacer:         () => `<div class="apx-spacer" style="height:${node.props.height || '1rem'}"></div>`,
+      progress:       () => this._renderProgress(node),
+      qr:             () => this._renderQR(node),
+      map:            () => this._renderMap(node),
+      lottie:         () => this._renderLottie(node),
+      icon:           () => this._renderIcon(node),
+      rating:         () => this._renderRating(node),
+      'back-to-top':  () => `<a href="#" class="apx-back-to-top">${node.props.label || '↑ Top'}</a>`,
+      breadcrumbs:    () => `<nav class="apx-breadcrumbs" aria-label="Breadcrumb"></nav>`,
+      'progress-bar': () => `<div class="apx-reading-progress" style="background:${node.props.color || 'var(--primary)'}"></div>`,
+      sidenav:        () => `<nav class="apx-sidenav"></nav>`,
+      toc:            () => `<nav class="apx-toc"><h3>${node.props.title || 'Contents'}</h3></nav>`,
+      'theme-switcher': () => this._renderThemeSwitcher(node),
+      slider:         () => this._renderSlider(node),
+      toggle:         () => this._renderToggle(node),
+      signature:      () => this._renderSignature(node),
+      feed:           () => this._renderFeed(node),
+      stat:           () => this._renderStat(node),
+      '3d':           () => `<div class="apx-3d" data-src="${node.props.src || ''}"></div>`,
+    };
+    const fn = dispatch[node.name];
+    if (fn) return fn();
+    return `<div class="apx-block apx-sc-${node.name}" data-props='${JSON.stringify(node.props)}'></div>`;
+  }
+  // ── Block Renderers ────────────────────────────────────────────
+  _renderBox(node) {
+    const style    = this._boxStyle(node.props);
+    const children = this._renderNodes(node.children);
+    return `<div class="apx-box"${style}>${children}</div>`;
+  }
+  _renderCallout(node, type, icon) {
+    const title    = node.props.title || type.charAt(0).toUpperCase() + type.slice(1);
+    const children = this._renderNodes(node.children);
+    return `<div class="apx-callout apx-callout-${type}" role="note">
+  <div class="apx-callout-header">${icon} <strong>${this._esc(title)}</strong></div>
+  <div class="apx-callout-body">${children}</div>
+</div>`;
+  }
+  _renderCollapse(node) {
+    const title    = node.props.title || 'Details';
+    const open     = node.props.open !== false ? ' open' : '';
+    const children = this._renderNodes(node.children);
+    return `<details class="apx-collapse"${open}>
+  <summary class="apx-collapse-title">${this._esc(title)}</summary>
+  <div class="apx-collapse-body">${children}</div>
+</details>`;
+  }
+  _renderTabs(node) {
+    const tabs    = node.children.filter(c => c.name === 'tab');
+    const headers = tabs.map((tab, i) =>
+      `<button class="apx-tab-btn${i === 0 ? ' active' : ''}" data-tab="${i}">${this._esc(tab.props.label || `Tab ${i+1}`)}</button>`
+    ).join('');
+    const panels = tabs.map((tab, i) =>
+      `<div class="apx-tab-panel${i === 0 ? ' active' : ''}" data-tab="${i}">${this._renderNodes(tab.children)}</div>`
+    ).join('');
+    return `<div class="apx-tabs">
+  <div class="apx-tab-headers">${headers}</div>
+  <div class="apx-tab-panels">${panels}</div>
+</div>`;
+  }
+  _renderGrid(node) {
+    const cols      = node.props.cols || 2;
+    const mobileCols = node.props['mobile-cols'] || 1;
+    const gap       = node.props.gap || '1rem';
+    const cells     = node.children.filter(c => c.name === 'cell' || c.type === 'Block');
+    const cellsHTML = cells.map(cell =>
+      `<div class="apx-cell">${this._renderNodes(cell.children)}</div>`
+    ).join('\n');
+    return `<div class="apx-grid" style="--apx-cols:${cols};--apx-mobile-cols:${mobileCols};gap:${gap}">${cellsHTML}</div>`;
+  }
+  _renderAnimate(node) {
+    const effect   = node.props.effect || 'fadeIn';
+    const duration = node.props.duration || '0.5s';
+    const delay    = node.props.delay || '0s';
+    const trigger  = node.props.trigger || 'load';
+    const children = this._renderNodes(node.children);
+    return `<div class="apx-animate" data-effect="${effect}" data-duration="${duration}" data-delay="${delay}" data-trigger="${trigger}">${children}</div>`;
+  }
+  _renderStagger(node) {
+    const effect   = node.props.effect || 'fadeIn';
+    const delay    = node.props.delay || '0.1s';
+    const children = this._renderNodes(node.children);
+    return `<div class="apx-stagger" data-effect="${effect}" data-delay="${delay}">${children}</div>`;
+  }
+  _renderCode(node) {
+    const raw  = node.children?.[0]?.value || '';
+    const lang = node.props.lang || 'text';
+    const lines = node.props.lines !== false;
+    const title = node.props.title || '';
+    const copy  = node.props.copy !== false;
+    const hl    = node.props.highlight ? JSON.stringify(node.props.highlight) : '[]';
+    return `<div class="apx-code-block" data-lang="${lang}">
+  ${title ? `<div class="apx-code-title">${this._esc(title)}</div>` : ''}
+  ${copy ? `<button class="apx-copy-btn" onclick="apxCopy(this)">Copy</button>` : ''}
+  <pre class="apx-pre${lines ? ' line-numbers' : ''}" data-highlight='${hl}'><code class="language-${lang}">${this._esc(raw)}</code></pre>
+</div>`;
+  }
+  _renderChem(node) {
+    const raw = node.children?.[0]?.value || '';
+    return `<div class="apx-chem">\\[${this._esc(raw)}\\]</div>`;
+  }
+  _renderTerminal(node) {
+    const raw   = node.children?.[0]?.value || '';
+    const title = node.props.title || 'terminal';
+    return `<div class="apx-terminal">
+  <div class="apx-terminal-bar"><span>${this._esc(title)}</span></div>
+  <pre class="apx-terminal-body">${this._esc(raw)}</pre>
+</div>`;
+  }
+  _renderDiff(node) {
+    const raw  = node.children?.[0]?.value || '';
+    const lang = node.props.lang || 'text';
+    const lines = raw.split('\n').map(l => {
+      if (l.startsWith('+ ')) return `<div class="apx-diff-add">${this._esc(l.slice(2))}</div>`;
+      if (l.startsWith('- ')) return `<div class="apx-diff-del">${this._esc(l.slice(2))}</div>`;
+      return `<div class="apx-diff-ctx">${this._esc(l)}</div>`;
+    }).join('');
+    return `<div class="apx-diff" data-lang="${lang}">${lines}</div>`;
+  }
+  _renderTable(node) {
+    const props    = node.props;
+    const striped  = props.striped ? ' apx-table-striped' : '';
+    const bordered = props.border  ? ' apx-table-bordered' : '';
+    const rows     = node.children.filter(c => c.type === 'Paragraph' || c.type === 'Text');
+    // Parse markdown table rows from children text
+    const rawText = node.children.map(c => {
+      if (c.type === 'Text') return c.value;
+      if (c.children) return c.children.map(ch => ch.value || '').join('');
+      return '';
+    }).join('\n');
+    const tableLines = rawText.split('\n').filter(l => l.trim().startsWith('|'));
+    if (tableLines.length === 0) {
+      return `<table class="apx-table${striped}${bordered}">${this._renderNodes(node.children)}</table>`;
+    }
+    const parseRow = (line) =>
+      line.split('|').slice(1, -1).map(c => c.trim());
+    const [headerLine, , ...bodyLines] = tableLines;
+    const headers = parseRow(headerLine);
+    const theadHTML = `<thead><tr>${headers.map(h => `<th>${this._esc(h)}</th>`).join('')}</tr></thead>`;
+    const tbodyHTML = `<tbody>${bodyLines.map(l =>
+      `<tr>${parseRow(l).map(c => `<td>${this._esc(c)}</td>`).join('')}</tr>`
+    ).join('')}</tbody>`;
+    return `<table class="apx-table${striped}${bordered}">${theadHTML}${tbodyHTML}</table>`;
+  }
+  _renderData(node) {
+    const id = node.props.id || '';
+    return `<script type="application/apx-data" id="apx-data-${id}">${this._renderNodes(node.children)}</script>`;
+  }
+  _renderStats(node) {
+    const cols   = node.props.cols || 4;
+    const stats  = node.children.filter(c => c.type === 'SelfCloseBlock' && c.name === 'stat');
+    const items  = stats.map(s => this._renderStat(s)).join('');
+    return `<div class="apx-stats" style="--apx-stat-cols:${cols}">${items}</div>`;
+  }
+  _renderStat(node) {
+    const { label, value, trend, icon, color } = node.props;
+    const trendClass = trend && trend.startsWith('+') ? 'up' : trend ? 'down' : '';
+    return `<div class="apx-stat"${color ? ` style="--apx-stat-color:${color}"` : ''}>
+  ${icon ? `<div class="apx-stat-icon">${this._esc(icon)}</div>` : ''}
+  <div class="apx-stat-value">${this._esc(String(value || ''))}</div>
+  <div class="apx-stat-label">${this._esc(label || '')}</div>
+  ${trend ? `<div class="apx-stat-trend apx-trend-${trendClass}">${this._esc(trend)}</div>` : ''}
+</div>`;
+  }
+  _renderChart(node) {
+    const props = JSON.stringify(node.props || {});
+    return `<div class="apx-chart" data-props='${props}'><canvas></canvas></div>`;
+  }
+  _renderPoll(node) {
+    const question = node.props.question || '';
+    const options  = node.children.filter(c => c.type === 'List').flatMap(l => l.items);
+    const opts = options.map(o => {
+      const label = o.children?.map(c => c.value || '').join('') || '';
+      return `<button class="apx-poll-opt" data-poll="${node.props.id || ''}">${this._esc(label)}</button>`;
+    }).join('');
+    return `<div class="apx-poll" id="poll-${node.props.id || ''}">
+  <p class="apx-poll-q">${this._esc(question)}</p>
+  <div class="apx-poll-opts">${opts}</div>
+  <div class="apx-poll-results"></div>
+</div>`;
+  }
+  _renderQuiz(node) {
+    return `<div class="apx-quiz" data-id="${node.props.id || ''}">${this._renderNodes(node.children)}</div>`;
+  }
+  _renderKanban(node) {
+    const cols = node.children.filter(c => c.name === 'column');
+    const colsHTML = cols.map(col => {
+      const cards = col.children.filter(c => c.name === 'card');
+      const cardsHTML = cards.map(card =>
+        `<div class="apx-kanban-card${card.props.done ? ' done' : ''}">
+  <div class="apx-card-title">${this._esc(card.props.title || '')}</div>
+  ${card.props.assignee ? `<div class="apx-card-assignee">${this._esc(card.props.assignee)}</div>` : ''}
+</div>`).join('');
+      return `<div class="apx-kanban-col">
+  <div class="apx-kanban-col-title">${this._esc(col.props.title || '')}</div>
+  ${cardsHTML}
+</div>`;
+    }).join('');
+    return `<div class="apx-kanban">${colsHTML}</div>`;
+  }
+  _renderTimeline(node) {
+    const dir    = node.props.direction || 'vertical';
+    const events = node.children.filter(c => c.name === 'event');
+    const items  = events.map(ev => {
+      const body = this._renderNodes(ev.children);
+      const cls  = ev.props.active ? ' active' : '';
+      return `<div class="apx-timeline-event${cls}">
+  <div class="apx-tl-date">${this._esc(ev.props.date || '')}</div>
+  <div class="apx-tl-dot"></div>
+  <div class="apx-tl-body">
+    <div class="apx-tl-title">${this._esc(ev.props.title || '')}</div>
+    ${body}
+  </div>
+</div>`;
+    }).join('');
+    return `<div class="apx-timeline apx-tl-${dir}">${items}</div>`;
+  }
+  _renderFlowchart(node) {
+    const raw = node.children?.[0]?.value || '';
+    return `<div class="apx-flowchart" data-definition="${this._esc(raw)}"></div>`;
+  }
+  _renderMindmap(node) {
+    const root = node.props.root || 'Root';
+    return `<div class="apx-mindmap" data-root="${this._esc(root)}">${this._renderNodes(node.children)}</div>`;
+  }
+  _renderModal(node) {
+    const id       = node.props.id || '';
+    const title    = node.props.title || '';
+    const children = this._renderNodes(node.children);
+    return `<div class="apx-modal" id="modal-${id}" role="dialog" aria-modal="true" aria-label="${this._esc(title)}">
+  <div class="apx-modal-overlay"></div>
+  <div class="apx-modal-box">
+    <div class="apx-modal-header"><strong>${this._esc(title)}</strong><button class="apx-modal-close">×</button></div>
+    <div class="apx-modal-body">${children}</div>
+  </div>
+</div>`;
+  }
+  _renderGallery(node) {
+    const cols      = node.props.cols || 3;
+    const lightbox  = node.props.lightbox !== false;
+    const images    = node.children.filter(c => c.type === 'SelfCloseBlock' && c.name === 'image');
+    const imgsHTML  = images.map(img =>
+      `<div class="apx-gallery-item">${this._renderImage(img, lightbox)}</div>`
+    ).join('');
+    return `<div class="apx-gallery" style="--apx-gallery-cols:${cols}">${imgsHTML}</div>`;
+  }
+  _renderSVG(node) {
+    const raw = node.children?.[0]?.value || '';
+    return `<div class="apx-svg"><svg xmlns="http://www.w3.org/2000/svg">${raw}</svg></div>`;
+  }
+  _renderProofBlock(node, kind) {
+    const title    = node.props.title || kind.charAt(0).toUpperCase() + kind.slice(1);
+    const num      = node.props.numbered ? ` (${node.props.numbered})` : '';
+    const children = this._renderNodes(node.children);
+    return `<div class="apx-proof apx-proof-${kind}">
+  <div class="apx-proof-title"><em>${this._esc(title)}${num}.</em></div>
+  <div class="apx-proof-body">${children}</div>
+</div>`;
+  }
+  _renderLang(node) {
+    const lang = node.props.value || node.value || 'en';
+    const dir  = node.props.dir || 'ltr';
+    const children = this._renderNodes(node.children);
+    return `<div class="apx-lang" lang="${lang}" dir="${dir}">${children}</div>`;
+  }
+  _renderRestrict(node) {
+    const role = node.props.role || 'user';
+    return `<div class="apx-restricted" data-role="${role}">${this._renderNodes(node.children)}</div>`;
+  }
+  _renderRedact(node) {
+    return `<span class="apx-redacted" aria-label="Redacted content">█████████</span>`;
+  }
+  _renderSlide(node) {
+    const transition = node.props.transition || 'fade';
+    const bg         = node.props.bg || '';
+    const children   = this._renderNodes(node.children);
+    return `<section class="apx-slide" data-transition="${transition}"${bg ? ` style="background:${bg}"` : ''}>${children}</section>`;
+  }
+  _renderKeyframe(node) {
+    const steps = Object.entries(node.steps).map(([k, v]) => `${k} { ${v} }`).join(' ');
+    return `<style>@keyframes ${node.name} { ${steps} }</style>`;
+  }
+  // ── Self-Closing Renderers ─────────────────────────────────────
+  _renderImage(node, lightbox = false) {
+    const { src, alt, width, caption, align, radius } = node.props;
+    const style = [
+      width  ? `width:${width}` : '',
+      radius ? `border-radius:${radius}` : '',
+    ].filter(Boolean).join(';');
+    const img = `<img src="${this._esc(src || '')}" alt="${this._esc(alt || '')}"${style ? ` style="${style}"` : ''} class="apx-img" loading="lazy">`;
+    const wrapped = lightbox ? `<a href="${this._esc(src || '')}" class="apx-lightbox-link">${img}</a>` : img;
+    const cap     = caption ? `<figcaption class="apx-caption">${this._esc(caption)}</figcaption>` : '';
+    return `<figure class="apx-figure apx-align-${align || 'left'}">${wrapped}${cap}</figure>`;
+  }
+  _renderVideo(node) {
+    const { src, type, autoplay, controls, width } = node.props;
+    if (type === 'youtube') {
+      const id = (src || '').match(/v=([^&]+)/)?.[1] || src;
+      return `<div class="apx-video apx-video-embed"><iframe src="https://www.youtube.com/embed/${id}" frameborder="0" allowfullscreen></iframe></div>`;
+    }
+    return `<video class="apx-video" src="${this._esc(src || '')}"${controls !== false ? ' controls' : ''}${autoplay ? ' autoplay muted' : ''}${width ? ` style="width:${width}"` : ''}></video>`;
+  }
+  _renderAudio(node) {
+    const { src, controls } = node.props;
+    return `<div class="apx-audio"><audio src="${this._esc(src || '')}"${controls !== false ? ' controls' : ''}></audio></div>`;
+  }
+  _renderClock(node) {
+    const { format, timezone, style: s } = node.props;
+    return `<div class="apx-clock apx-clock-${s || 'digital'}" data-format="${format || 'HH:mm:ss'}" data-tz="${timezone || 'UTC'}"></div>`;
+  }
+  _renderCountdown(node) {
+    const { to, label, style: s } = node.props;
+    return `<div class="apx-countdown apx-countdown-${s || 'default'}" data-to="${to || ''}" data-label="${this._esc(label || '')}"></div>`;
+  }
+  _renderProgress(node) {
+    const { value, max, color, label, animated } = node.props;
+    const pct = Math.min(100, Math.max(0, ((value || 0) / (max || 100)) * 100));
+    return `<div class="apx-progress${animated ? ' apx-progress-animated' : ''}">
+  ${label ? `<div class="apx-progress-label">${this._esc(label)} ${Math.round(pct)}%</div>` : ''}
+  <div class="apx-progress-track"><div class="apx-progress-fill" style="width:${pct}%;background:${color || 'var(--primary)'}"></div></div>
+</div>`;
+  }
+  _renderQR(node) {
+    const { data, size, color } = node.props;
+    return `<div class="apx-qr" data-qr="${this._esc(data || '')}" data-size="${size || '200px'}" data-color="${color || '#000'}"><canvas></canvas></div>`;
+  }
+  _renderMap(node) {
+    const { lat, lng, zoom, label } = node.props;
+    return `<div class="apx-map" data-lat="${lat || 0}" data-lng="${lng || 0}" data-zoom="${zoom || 12}" data-label="${this._esc(label || '')}"></div>`;
+  }
+  _renderLottie(node) {
+    const { src, loop, autoplay, width } = node.props;
+    return `<div class="apx-lottie"${width ? ` style="width:${width}"` : ''} data-src="${this._esc(src || '')}" data-loop="${loop !== false}" data-autoplay="${autoplay !== false}"></div>`;
+  }
+  _renderIcon(node) {
+    const { name, size, color } = node.props;
+    return `<span class="apx-icon apx-icon-${name || 'default'}" style="font-size:${size || '1em'};color:${color || 'inherit'}" aria-hidden="true"></span>`;
+  }
+  _renderRating(node) {
+    const { max, value, readonly, id } = node.props;
+    const stars = Array.from({ length: max || 5 }, (_, i) =>
+      `<span class="apx-star${i < Math.floor(value || 0) ? ' filled' : ''}" data-val="${i+1}">★</span>`
+    ).join('');
+    return `<div class="apx-rating${readonly ? ' readonly' : ''}" id="rating-${id || ''}">${stars}</div>`;
+  }
+  _renderThemeSwitcher(node) {
+    const themes  = node.props.themes || [];
+    const buttons = (Array.isArray(themes) ? themes : [themes]).map(t =>
+      `<button class="apx-theme-btn" data-theme="${t}">${this._esc(t)}</button>`
+    ).join('');
+    return `<div class="apx-theme-switcher">${buttons}</div>`;
+  }
+  _renderSlider(node) {
+    const { id, min, max, value, label } = node.props;
+    return `<div class="apx-slider-wrap">
+  ${label ? `<label for="slider-${id}">${this._esc(label)}</label>` : ''}
+  <input type="range" id="slider-${id || ''}" class="apx-slider" min="${min || 0}" max="${max || 100}" value="${value || 50}">
+  <span class="apx-slider-val">${value || 50}</span>
+</div>`;
+  }
+  _renderToggle(node) {
+    const { id, label, 'default': def } = node.props;
+    return `<label class="apx-toggle-wrap">
+  <input type="checkbox" id="toggle-${id || ''}" class="apx-toggle"${def ? ' checked' : ''}>
+  <span class="apx-toggle-knob"></span>
+  ${label ? `<span class="apx-toggle-label">${this._esc(label)}</span>` : ''}
+</label>`;
+  }
+  _renderSignature(node) {
+    const { id, label, required } = node.props;
+    return `<div class="apx-signature" id="sig-${id || ''}"${required ? ' data-required="true"' : ''}>
+  ${label ? `<div class="apx-sig-label">${this._esc(label)}</div>` : ''}
+  <canvas class="apx-sig-canvas"></canvas>
+  <button class="apx-sig-clear">Clear</button>
+</div>`;
+  }
+  _renderFeed(node) {
+    const { src, refresh, limit } = node.props;
+    return `<div class="apx-feed" data-src="${this._esc(src || '')}" data-refresh="${refresh || '5s'}" data-limit="${limit || 10}"></div>`;
+  }
+  // ── CSS Builder ────────────────────────────────────────────────
+  _buildCSS() {
+    const { variables, themes } = this.style;
+    const lines = [];
+    // Root variables
+    if (Object.keys(variables).length > 0) {
+      lines.push(':root {');
+      for (const [k, v] of Object.entries(variables)) {
+        lines.push(`  ${k}: ${v};`);
+      }
+      lines.push('}');
+    }
+    // Theme classes
+    for (const [name, vars] of Object.entries(themes)) {
+      lines.push(`\n.theme-${name} {`);
+      for (const [k, v] of Object.entries(vars)) {
+        lines.push(`  ${k}: ${v};`);
+      }
+      lines.push('}');
+    }
+    return lines.join('\n');
+  }
+  // ── Base CSS ───────────────────────────────────────────────────
+  _baseCSS() {
+    return `
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --primary: #00f5d4; --bg: #0d0d0d; --surface: #161616;
+      --text: #f0f0f0; --muted: #888; --radius: 8px;
+      --font: system-ui, sans-serif; --font-mono: monospace;
+    }
+    body.apx-doc { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.7; }
+    .apx-content { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem; }
+    .apx-heading { margin: 2rem 0 1rem; line-height: 1.3; }
+    .apx-h1 { font-size: 2.5rem; } .apx-h2 { font-size: 2rem; }
+    .apx-h3 { font-size: 1.5rem; } .apx-h4 { font-size: 1.25rem; }
+    .apx-p { margin: 1rem 0; }
+    .apx-code-inline { background: var(--surface); padding: 0.1em 0.4em; border-radius: 4px; font-family: var(--font-mono); font-size: 0.9em; }
+    .apx-code-block { position: relative; margin: 1.5rem 0; background: #111; border-radius: var(--radius); overflow: hidden; }
+    .apx-code-title { padding: 0.5rem 1rem; background: #1a1a1a; font-size: 0.8rem; color: var(--muted); }
+    .apx-pre { padding: 1.25rem; overflow-x: auto; font-family: var(--font-mono); font-size: 0.9rem; }
+    .apx-copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.25rem 0.6rem; background: var(--surface); border: none; border-radius: 4px; color: var(--muted); cursor: pointer; font-size: 0.75rem; }
+    .apx-box { border-radius: var(--radius); padding: 1.25rem; margin: 1rem 0; }
+    .apx-callout { border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1rem 0; border-left: 4px solid; }
+    .apx-callout-note { background: rgba(0,150,255,0.08); border-color: #0096ff; }
+    .apx-callout-tip { background: rgba(0,200,100,0.08); border-color: #00c864; }
+    .apx-callout-warning { background: rgba(255,180,0,0.08); border-color: #ffb800; }
+    .apx-callout-danger { background: rgba(255,50,50,0.08); border-color: #ff3232; }
+    .apx-callout-success { background: rgba(0,200,100,0.08); border-color: #00c864; }
+    .apx-callout-header { font-weight: 600; margin-bottom: 0.5rem; }
+    .apx-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
+    .apx-table th, .apx-table td { padding: 0.6rem 0.8rem; text-align: left; }
+    .apx-table th { background: var(--surface); font-weight: 600; }
+    .apx-table-striped tr:nth-child(even) { background: rgba(255,255,255,0.03); }
+    .apx-table-bordered th, .apx-table-bordered td { border: 1px solid rgba(255,255,255,0.1); }
+    .apx-blockquote { border-left: 3px solid var(--primary); padding-left: 1rem; color: var(--muted); margin: 1rem 0; }
+    .apx-hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 2rem 0; }
+    .apx-list { padding-left: 1.5rem; margin: 1rem 0; }
+    .apx-li { margin: 0.25rem 0; }
+    .apx-task-icon { margin-right: 0.5rem; }
+    .apx-task-done { opacity: 0.6; text-decoration: line-through; }
+    .apx-grid { display: grid; grid-template-columns: repeat(var(--apx-cols, 2), 1fr); }
+    .apx-stats { display: grid; grid-template-columns: repeat(var(--apx-stat-cols, 4), 1fr); gap: 1rem; margin: 1rem 0; }
+    .apx-stat { background: var(--surface); border-radius: var(--radius); padding: 1.25rem; }
+    .apx-stat-value { font-size: 2rem; font-weight: 700; color: var(--apx-stat-color, var(--primary)); }
+    .apx-stat-label { font-size: 0.85rem; color: var(--muted); }
+    .apx-stat-trend { font-size: 0.8rem; margin-top: 0.25rem; }
+    .apx-trend-up { color: #00c896; } .apx-trend-down { color: #ff4d4d; }
+    .apx-chart { margin: 1.5rem 0; background: var(--surface); border-radius: var(--radius); padding: 1rem; }
+    .apx-tabs { margin: 1rem 0; }
+    .apx-tab-headers { display: flex; gap: 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
+    .apx-tab-btn { padding: 0.5rem 1rem; background: none; border: none; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
+    .apx-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
+    .apx-tab-panel { display: none; padding: 1rem 0; }
+    .apx-tab-panel.active { display: block; }
+    .apx-collapse { margin: 1rem 0; background: var(--surface); border-radius: var(--radius); }
+    .apx-collapse-title { padding: 0.8rem 1rem; cursor: pointer; font-weight: 600; }
+    .apx-collapse-body { padding: 0 1rem 1rem; }
+    .apx-timeline { margin: 1.5rem 0; }
+    .apx-tl-vertical .apx-timeline-event { display: grid; grid-template-columns: 100px 20px 1fr; gap: 1rem; margin-bottom: 1.5rem; align-items: start; }
+    .apx-tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); margin-top: 4px; }
+    .apx-tl-date { font-size: 0.8rem; color: var(--muted); text-align: right; }
+    .apx-tl-title { font-weight: 600; margin-bottom: 0.25rem; }
+    .apx-kanban { display: flex; gap: 1rem; overflow-x: auto; margin: 1rem 0; }
+    .apx-kanban-col { min-width: 200px; background: var(--surface); border-radius: var(--radius); padding: 1rem; }
+    .apx-kanban-col-title { font-weight: 700; margin-bottom: 1rem; color: var(--primary); }
+    .apx-kanban-card { background: rgba(255,255,255,0.04); border-radius: 6px; padding: 0.75rem; margin-bottom: 0.5rem; }
+    .apx-terminal { background: #0a0a0a; border-radius: var(--radius); overflow: hidden; margin: 1rem 0; }
+    .apx-terminal-bar { background: #1a1a1a; padding: 0.5rem 1rem; font-size: 0.8rem; color: var(--muted); }
+    .apx-terminal-body { padding: 1rem; font-family: var(--font-mono); font-size: 0.9rem; color: #00ff41; white-space: pre; }
+    .apx-progress { margin: 1rem 0; }
+    .apx-progress-track { background: rgba(255,255,255,0.1); border-radius: 999px; height: 8px; overflow: hidden; }
+    .apx-progress-fill { height: 100%; border-radius: 999px; transition: width 0.5s ease; }
+    .apx-diff { font-family: var(--font-mono); font-size: 0.9rem; background: #111; border-radius: var(--radius); padding: 1rem; margin: 1rem 0; }
+    .apx-diff-add { background: rgba(0,200,100,0.1); color: #00c864; }
+    .apx-diff-del { background: rgba(255,50,50,0.1); color: #ff4d4d; }
+    .apx-diff-ctx { color: var(--muted); }
+    .apx-math-block { overflow-x: auto; margin: 1.5rem 0; }
+    .apx-proof { margin: 1.5rem 0; border-left: 3px solid var(--primary); padding-left: 1rem; }
+    .apx-modal { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
+    .apx-modal.open { display: flex; }
+    .apx-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
+    .apx-modal-box { position: relative; background: var(--surface); border-radius: var(--radius); padding: 1.5rem; max-width: 600px; width: 90%; z-index: 1; }
+    .apx-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
+    .apx-modal-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.25rem; }
+    .apx-rating { display: flex; gap: 0.25rem; font-size: 1.5rem; cursor: pointer; }
+    .apx-star { color: var(--muted); transition: color 0.2s; }
+    .apx-star.filled { color: #ffb800; }
+    .apx-toggle-wrap { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
+    .apx-toggle { display: none; }
+    .apx-toggle-knob { width: 40px; height: 22px; background: var(--muted); border-radius: 999px; position: relative; transition: background 0.2s; }
+    .apx-toggle:checked + .apx-toggle-knob { background: var(--primary); }
+    .apx-slider { width: 100%; accent-color: var(--primary); }
+    .apx-back-to-top { position: fixed; bottom: 2rem; right: 2rem; background: var(--primary); color: var(--bg); padding: 0.5rem 1rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; }
+    .apx-redacted { background: currentColor; border-radius: 3px; user-select: none; }
+    .apx-lang[dir=rtl] { text-align: right; }
+    .apx-fn-ref { color: var(--primary); text-decoration: none; font-size: 0.75rem; }
+    .apx-fn-def { font-size: 0.85rem; color: var(--muted); margin: 0.5rem 0; }
+    .apx-map, .apx-qr canvas, .apx-3d, .apx-lottie, .apx-feed { min-height: 200px; background: var(--surface); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; }
+    .apx-gallery { display: grid; grid-template-columns: repeat(var(--apx-gallery-cols, 3), 1fr); gap: 0.5rem; margin: 1rem 0; }
+    .apx-img { max-width: 100%; height: auto; display: block; }
+    .apx-video-embed iframe { width: 100%; aspect-ratio: 16/9; border: none; border-radius: var(--radius); }
+    @keyframes apx-fadeIn { from { opacity: 0 } to { opacity: 1 } }
+    @keyframes apx-slideUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
+    @keyframes apx-zoomIn { from { opacity: 0; transform: scale(0.95) } to { opacity: 1; transform: scale(1) } }
+    .apx-animate[data-effect=fadeIn] { animation: apx-fadeIn var(--apx-dur, 0.5s) ease both; }
+    .apx-animate[data-effect=slideUp] { animation: apx-slideUp var(--apx-dur, 0.5s) ease both; }
+    .apx-animate[data-effect=zoomIn]  { animation: apx-zoomIn var(--apx-dur, 0.5s) ease both; }
+    @media (max-width: 768px) {
+      .apx-grid { grid-template-columns: repeat(var(--apx-mobile-cols, 1), 1fr); }
+      .apx-stats { grid-template-columns: repeat(2, 1fr); }
+      .apx-gallery { grid-template-columns: repeat(2, 1fr); }
+    }
+    `;
+  }
+  // ── Footer Scripts ─────────────────────────────────────────────
+  _footerScripts() {
+    return `
+<script>
+// ApexDoc Runtime — Tabs
+document.querySelectorAll('.apx-tab-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const parent = btn.closest('.apx-tabs');
+    parent.querySelectorAll('.apx-tab-btn, .apx-tab-panel').forEach(el => el.classList.remove('active'));
+    btn.classList.add('active');
+    parent.querySelector('.apx-tab-panel[data-tab="' + btn.dataset.tab + '"]').classList.add('active');
+  });
+});
+// Modals
+document.querySelectorAll('.apx-modal-trigger').forEach(link => {
+  link.addEventListener('click', e => {
+    e.preventDefault();
+    document.getElementById('modal-' + link.dataset.modal)?.classList.add('open');
+  });
+});
+document.querySelectorAll('.apx-modal-close, .apx-modal-overlay').forEach(el => {
+  el.addEventListener('click', () => el.closest('.apx-modal')?.classList.remove('open'));
+});
+// Copy button
+function apxCopy(btn) {
+  const code = btn.closest('.apx-code-block').querySelector('code');
+  navigator.clipboard.writeText(code.textContent).then(() => {
+    btn.textContent = 'Copied!';
+    setTimeout(() => btn.textContent = 'Copy', 2000);
+  });
+}
+// Sliders
+document.querySelectorAll('.apx-slider').forEach(sl => {
+  sl.addEventListener('input', () => {
+    sl.closest('.apx-slider-wrap').querySelector('.apx-slider-val').textContent = sl.value;
+  });
+});
+// Ratings
+document.querySelectorAll('.apx-rating:not(.readonly) .apx-star').forEach(star => {
+  star.addEventListener('click', () => {
+    const val = parseInt(star.dataset.val);
+    star.closest('.apx-rating').querySelectorAll('.apx-star').forEach((s, i) => {
+      s.classList.toggle('filled', i < val);
+    });
+  });
+});
+// Theme switcher
+document.querySelectorAll('.apx-theme-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const body = document.body;
+    body.className = body.className.replace(/theme-\S+/, '') + ' theme-' + btn.dataset.theme;
+  });
+});
+// Scroll-triggered animations
+const apxObserver = new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      const el = entry.target;
+      el.style.setProperty('--apx-dur', el.dataset.duration || '0.5s');
+      el.style.animationDelay = el.dataset.delay || '0s';
+      el.classList.add('apx-triggered');
+    }
+  });
+}, { threshold: 0.2 });
+document.querySelectorAll('.apx-animate[data-trigger=scroll]').forEach(el => apxObserver.observe(el));
+// Clocks
+document.querySelectorAll('.apx-clock').forEach(clock => {
+  const fmt = clock.dataset.format || 'HH:mm:ss';
+  const update = () => {
+    const now = new Date();
+    const pad = n => String(n).padStart(2, '0');
+    clock.textContent = fmt
+      .replace('HH', pad(now.getHours()))
+      .replace('mm', pad(now.getMinutes()))
+      .replace('ss', pad(now.getSeconds()));
+  };
+  update(); setInterval(update, 1000);
+});
+// Collapse toggle fix
+document.querySelectorAll('.apx-collapse summary').forEach(s => {
+  s.style.listStyle = 'none';
+});
+</script>`;
+  }
+  // ── Utility ────────────────────────────────────────────────────
+  _renderChildren(node) {
+    if (!node.children || node.children.length === 0) return '';
+    return node.children.map(c => this._renderNode(c)).join('');
+  }
+  _propsToStyle(props) {
+    if (!props || Object.keys(props).length === 0) return '';
+    const pairs = [];
+    const map = {
+      color:      'color',
+      bg:         'background',
+      size:       'font-size',
+      weight:     'font-weight',
+      align:      'text-align',
+      radius:     'border-radius',
+      padding:    'padding',
+      margin:     'margin',
+      border:     'border',
+      gradient:   'background',
+    };
+    for (const [k, v] of Object.entries(props)) {
+      if (map[k] && v) pairs.push(`${map[k]}:${v}`);
+    }
+    if (props.animation) pairs.push(`animation:${props.animation}`);
+    return pairs.length > 0 ? ` style="${pairs.join(';')}"` : '';
+  }
+  _boxStyle(props) {
+    const pairs = [];
+    if (props.bg)      pairs.push(`background:${props.bg}`);
+    if (props.border)  pairs.push(`border:1px solid ${props.border}`);
+    if (props.radius)  pairs.push(`border-radius:${props.radius}`);
+    if (props.padding) pairs.push(`padding:${props.padding}`);
+    return pairs.length > 0 ? ` style="${pairs.join(';')}"` : '';
+  }
+  _esc(str) {
+    return String(str || '')
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+}
+module.exports = HTMLRenderer;