@classic-homes/theme-docs 0.0.48 → 0.0.50

package/dist/lib/components/CodeBlock.svelte

@@ -5,7 +5,6 @@
    * For use outside of markdown content when you need
    * to display code with highlighting directly.
    */
-  import { onMount } from 'svelte';
   import { cn } from '../utils.js';
   import { escapeHtml } from '../highlighter/index.js';
 
@@ -35,20 +34,36 @@
   let highlighted = $state('');
   let loading = $state(true);
 
-  onMount(async () => {
-    try {
-      const { highlightCode } = await import('../highlighter/index.js');
-      highlighted = await highlightCode(code, language, { theme });
-      loading = false;
-    } catch (err) {
-      // Log warning for debugging - falling back to plain code
-      console.warn(
-        '[docs] Failed to highlight code block, showing plain code:',
-        err instanceof Error ? err.message : err
-      );
-      highlighted = `<pre class="shiki bg-muted rounded-lg p-4 overflow-x-auto"><code>${escapeHtml(code)}</code></pre>`;
-      loading = false;
-    }
+  // Re-highlight whenever code/language/theme change (not just on mount)
+  $effect(() => {
+    const currentCode = code;
+    const currentLanguage = language;
+    const currentTheme = theme;
+    let cancelled = false;
+
+    loading = true;
+    (async () => {
+      try {
+        const { highlightCode } = await import('../highlighter/index.js');
+        const html = await highlightCode(currentCode, currentLanguage, { theme: currentTheme });
+        if (cancelled) return;
+        highlighted = html;
+        loading = false;
+      } catch (err) {
+        if (cancelled) return;
+        // Log warning for debugging - falling back to plain code
+        console.warn(
+          '[docs] Failed to highlight code block, showing plain code:',
+          err instanceof Error ? err.message : err
+        );
+        highlighted = `<pre class="shiki bg-muted rounded-lg p-4 overflow-x-auto"><code>${escapeHtml(currentCode)}</code></pre>`;
+        loading = false;
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
   });
 </script>
 

package/dist/lib/components/MermaidDiagram.svelte

@@ -8,7 +8,6 @@
    * Requires mermaid to be installed in the consuming application:
    * npm install mermaid
    */
-  import { onMount } from 'svelte';
   import { cn } from '../utils.js';
 
   interface Props {
@@ -34,32 +33,48 @@
   let containerRef = $state<HTMLDivElement | null>(null);
   let rendered = $state(false);
   let error = $state<string | null>(null);
+  let renderCount = 0;
 
-  onMount(async () => {
-    if (!containerRef) return;
+  // Re-render whenever code/theme change (not just on mount)
+  $effect(() => {
+    const container = containerRef;
+    const currentCode = code;
+    const currentTheme = theme;
+    if (!container) return;
 
-    try {
-      // Dynamically import mermaid to avoid SSR issues
-      const mermaid = await import('mermaid');
+    let cancelled = false;
 
-      // Initialize mermaid with theme
-      mermaid.default.initialize({
-        startOnLoad: false,
-        theme: theme,
-        securityLevel: 'strict',
-      });
+    (async () => {
+      try {
+        // Dynamically import mermaid to avoid SSR issues
+        const mermaid = await import('mermaid');
 
-      // Render the diagram
-      const { svg } = await mermaid.default.render(id, code);
-      containerRef.innerHTML = svg;
-      rendered = true;
-    } catch (err) {
-      console.warn(
-        '[docs] Failed to render Mermaid diagram:',
-        err instanceof Error ? err.message : err
-      );
-      error = err instanceof Error ? err.message : 'Failed to render diagram';
-    }
+        // Initialize mermaid with theme
+        mermaid.default.initialize({
+          startOnLoad: false,
+          theme: currentTheme,
+          securityLevel: 'strict',
+        });
+
+        // Render the diagram; mermaid.render needs a fresh element id per run
+        const { svg } = await mermaid.default.render(`${id}-${++renderCount}`, currentCode);
+        if (cancelled) return;
+        container.innerHTML = svg;
+        rendered = true;
+        error = null;
+      } catch (err) {
+        if (cancelled) return;
+        console.warn(
+          '[docs] Failed to render Mermaid diagram:',
+          err instanceof Error ? err.message : err
+        );
+        error = err instanceof Error ? err.message : 'Failed to render diagram';
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
   });
 </script>
 

package/dist/lib/parser/index.js

@@ -1,4 +1,4 @@
-import { marked, Renderer } from 'marked';
+import { Marked, Renderer } from 'marked';
 import yaml from 'js-yaml';
 import { getHighlighter, escapeHtml } from '../highlighter/index.js';
 import { getAllExtensions, resetFootnoteStore, renderFootnotes } from './extensions.js';
@@ -89,7 +89,7 @@ export async function parseMarkdown(content, options = {}) {
         }
     };
     if (generateHeadingIds) {
-        renderer.heading = ({ text, depth }) => {
+        renderer.heading = function ({ tokens, text, depth }) {
             const id = text
                 .toLowerCase()
                 .replace(/\./g, '-') // Convert periods to hyphens (preserves version numbers like v2.0 → v2-0)
@@ -97,13 +97,18 @@ export async function parseMarkdown(content, options = {}) {
                 .replace(/\s+/g, '-') // Convert spaces to hyphens
                 .replace(/-+/g, '-') // Collapse multiple hyphens
                 .replace(/^-|-$/g, ''); // Remove leading/trailing hyphens
-            return `<h${depth} id="${id}">${text}</h${depth}>`;
+            // Render inline tokens so markdown inside headings (bold, code, links) works
+            return `<h${depth} id="${id}">${this.parser.parseInline(tokens)}</h${depth}>`;
         };
     }
+    // Use a per-call Marked instance: the renderer captures per-call state
+    // (theme, highlighter), and `marked.use` on the shared global instance
+    // accumulates extensions across calls.
+    const md = new Marked();
     // Apply all markdown extensions (admonitions, footnotes, definition lists, mermaid)
-    marked.use(...getAllExtensions());
-    marked.use({ renderer, gfm: true });
-    let html = await marked(markdownContent);
+    md.use(...getAllExtensions());
+    md.use({ renderer, gfm: true });
+    let html = await md.parse(markdownContent);
     // Append footnotes section if any were referenced
     const footnotesHtml = renderFootnotes();
     if (footnotesHtml) {
@@ -133,7 +138,9 @@ export async function parseMarkdown(content, options = {}) {
  * ```
  */
 export function extractToc(html, maxDepth = 3) {
-    const headingRegex = /<h([1-6])[^>]*id="([^"]*)"[^>]*>([^<]*)<\/h[1-6]>/gi;
+    // Heading content may contain inline HTML (bold, code, links) — capture
+    // everything up to the matching close tag, then strip tags for the text.
+    const headingRegex = /<h([1-6])[^>]*id="([^"]*)"[^>]*>([\s\S]*?)<\/h\1>/gi;
     const toc = [];
     let match;
     while ((match = headingRegex.exec(html)) !== null) {
@@ -142,7 +149,7 @@ export function extractToc(html, maxDepth = 3) {
             toc.push({
                 level,
                 id: match[2],
-                text: match[3],
+                text: match[3].replace(/<[^>]*>/g, ''),
             });
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-docs",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "description": "Markdown documentation components for the Classic theme system",
   "type": "module",
   "main": "./dist/lib/index.js",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@classic-homes/theme-tokens": "*",
     "clsx": "^2.1.0",
-    "js-yaml": "^4.1.0",
+    "js-yaml": "^4.3.2",
     "marked": "^17.0.0",
     "shiki": "^1.0.0",
     "tailwind-merge": "^2.2.0",