feat: add widget renderer (chart.js, mermaid) and bump to v2.0.0

Dockerfile

@@ -1,9 +1,7 @@
-
 # Use Node.js 20 on Debian Bullseye (Stable for Puppeteer)
 FROM node:20-bullseye-slim
 
-# 1. Install Chrome Dependencies
-# Puppeteer requires a lot of system libraries to run Chrome in Docker
+# Install Chrome Dependencies
 RUN apt-get update && apt-get install -y \
     chromium \
     fonts-noto-cjk \
@@ -13,18 +11,18 @@ RUN apt-get update && apt-get install -y \
     --no-install-recommends \
     && rm -rf /var/lib/apt/lists/*
 
-# 2. Set working directory
+# Set working directory
 WORKDIR /app
 
-# 3. Install Node.js Dependencies
+# Install Node.js Dependencies
 COPY package.json .
 RUN npm install
 
-# 4. Copy Application Code
+# Copy Application Code (including templates/)
 COPY . .
 
-# 5. Expose Port (Hugging Face expects 7860)
+# Expose Port (Hugging Face expects 7860)
 EXPOSE 7860
 
-# 6. Run the Application
+# Run the Application
 CMD ["node", "server.js"]

package.json

@@ -1,14 +1,16 @@
-
 {
   "name": "pdf-server",
-  "version": "1.0.1",
-  "description": "Puppeteer PDF Generator for Hugging Face Spaces",
+  "version": "2.0.0",
+  "description": "Puppeteer PDF + Widget Renderer for XWX AI Chat Exporter",
   "main": "server.js",
   "dependencies": {
     "cors": "^2.8.5",
     "express": "^4.18.2",
-    "puppeteer": "^22.0.0",
-    "shiki": "^1.24.0"
+    "puppeteer": "^24.0.0",
+    "shiki": "^1.24.0",
+    "chart.js": "^4.4.8",
+    "chartjs-node-canvas": "^5.0.0",
+    "@mermaid-js/mermaid-cli": "^11.0.0"
   },
   "scripts": {
     "start": "node server.js"

server.js

@@ -26,6 +26,15 @@ const express = require('express');
 const puppeteer = require('puppeteer');
 const cors = require('cors');
 const { getHighlighter } = require('shiki');
+const fs = require('fs');
+const path = require('path');
+
+let ChartJSNodeCanvas = null;
+try {
+  ChartJSNodeCanvas = require('chartjs-node-canvas').ChartJSNodeCanvas;
+} catch (e) {
+  console.log('[WIDGET] chartjs-node-canvas not yet installed, will retry on demand');
+}
 
 // ─── Shiki Highlighter Initialization ─────────────────
 // Maps frontend codeTheme settings to Shiki theme names
@@ -403,7 +412,7 @@ app.post('/api/generate_pdf', async (req, res) => {
 
     res.setHeader('Content-Type', 'application/pdf');
     res.setHeader('Content-Disposition', 'attachment; filename=export.pdf');
-    res.send(pdfBuffer);
+    res.send(Buffer.from(pdfBuffer));
 
   } catch (error) {
     console.error(`[PDF-GEN] [${getElapsed()}] 发生错误:`, error);
@@ -414,6 +423,433 @@ app.post('/api/generate_pdf', async (req, res) => {
   }
 });
 
+// ─── Widget Renderer Class ───────────────────────────────────
+
+class WidgetRenderer {
+  constructor() {
+    this._chartInstances = new Map();
+    this._widgetBrowser = null;
+  }
+
+  async getWidgetBrowser() {
+    if (this._widgetBrowser && this._widgetBrowser.isConnected()) {
+      return this._widgetBrowser;
+    }
+    this._widgetBrowser = await puppeteer.launch({
+      executablePath: '/usr/bin/chromium',
+      args: [
+        '--no-sandbox',
+        '--disable-setuid-sandbox',
+        '--disable-dev-shm-usage',
+        '--font-render-hinting=none',
+        '--disable-gpu',
+        '--disable-software-rasterizer',
+        '--enable-webgl',
+        '--use-gl=angle',
+        '--use-angle=swiftshader',
+        '--memory-pressure-off'
+      ],
+      headless: 'shell'
+    });
+    return this._widgetBrowser;
+  }
+
+  async close() {
+    if (this._widgetBrowser) {
+      try { await this._widgetBrowser.close(); } catch (e) {}
+      this._widgetBrowser = null;
+    }
+  }
+
+  _getChartInstance(width, height) {
+    const key = `${width}x${height}`;
+    if (!this._chartInstances.has(key)) {
+      let Ctor = ChartJSNodeCanvas;
+      if (!Ctor) {
+        ChartJSNodeCanvas = require('chartjs-node-canvas').ChartJSNodeCanvas;
+        Ctor = ChartJSNodeCanvas;
+      }
+      this._chartInstances.set(key, new Ctor({ width, height, backgroundColour: '#ffffff' }));
+    }
+    return this._chartInstances.get(key);
+  }
+
+  async renderChart(widgetHtml, title) {
+    const startTime = Date.now();
+    console.log(`[WIDGET] renderChart START: title=${title}`);
+
+    const config = this.extractChartConfig(widgetHtml);
+    if (!config) {
+      console.log(`[WIDGET] renderChart FAIL: no chart config found, falling back`);
+      return null;
+    }
+
+    const width = config.width || 800;
+    const height = config.height || 300;
+    const chartConfig = config.chartConfig;
+
+    console.log(`[WIDGET] renderChart DEBUG: type=${chartConfig.type}, parsedWidth=${config.width}, default800=${config.width === undefined}, renderSize=${width}x${height}, labels=${chartConfig.data?.labels?.length}, datasets=${chartConfig.data?.datasets?.length}`);
+
+    chartConfig.options = chartConfig.options || {};
+    chartConfig.options.animation = { duration: 0 };
+
+    const instance = this._getChartInstance(width, height);
+    const buffer = await instance.renderToBuffer(chartConfig, 'image/png');
+    const dataUrl = `data:image/png;base64,${buffer.toString('base64')}`;
+
+    console.log(`[WIDGET] renderChart OK: type=${chartConfig.type}, renderSize=${width}x${height}, size=${(buffer.length / 1024).toFixed(1)}KB`);
+    return dataUrl;
+  }
+
+  extractChartConfig(widgetHtml) {
+    const containerMatch = widgetHtml.match(/<div[^>]*style=["']([^"']*?)["']/);
+    let width = 650, height = 300;
+
+    let widthSource = 'default';
+    let heightSource = 'default';
+
+    if (containerMatch) {
+      const w = containerMatch[1].match(/width:\s*(\d+)px/);
+      const wPct = containerMatch[1].match(/width:\s*100%/);
+      const h = containerMatch[1].match(/height:\s*(\d+)px/);
+      if (w) {
+        width = parseInt(w[1]);
+        widthSource = `${width}px`;
+      } else if (wPct) {
+        width = 650;
+        widthSource = '100%→650px(bubble-width)';
+      }
+      if (h) {
+        height = parseInt(h[1]);
+        heightSource = `${height}px`;
+      }
+    }
+
+    console.log(`[WIDGET] extractChartConfig: width=${width} (${widthSource}), height=${height} (${heightSource})`);
+
+    const chartFnMatch = widgetHtml.match(/new\s+Chart\s*\([^,]+,\s*({[\s\S]*})\s*\)\s*;?/);
+    if (!chartFnMatch) {
+      console.log(`[WIDGET] extractChartConfig: FAIL — new Chart() pattern not found`);
+      return null;
+    }
+
+    let configStr = chartFnMatch[1];
+    configStr = configStr.replace(/,\s*\}\s*\)\s*;?\s*$/, '}');
+
+    configStr = configStr.replace(/\bbackgroundImage\s*:\s*['"`][^'`]*['"`]/g, '');
+    configStr = configStr.replace(/,\s*}\)\s*;?$/g, '}');
+
+    // DEBUG: Extract variable declarations from the script to resolve external references
+    // Chart.js configs often reference variables defined outside the config object
+    // e.g. const labels = [...]; new Chart(el, { data: { labels, datasets: [{ data }] } });
+    const scriptMatch = widgetHtml.match(/<script[^>]*>([\s\S]*?)<\/script>/g);
+    const allScriptBlocks = [];
+    if (scriptMatch) {
+      for (const s of scriptMatch) {
+        const inner = s.replace(/<script[^>]*>|<\/script>/gi, '');
+        if (inner.trim()) allScriptBlocks.push(inner);
+      }
+    }
+    const fullScript = allScriptBlocks.join('\n');
+
+    // Find all const/let/var declarations in the script
+    const varDeclarations = [];
+    const varDeclRegex = /\b(?:const|let|var)\s+(\w+)\s*=\s*([\s\S]*?);/g;
+    let varMatch;
+    while ((varMatch = varDeclRegex.exec(fullScript)) !== null) {
+      varDeclarations.push({ name: varMatch[1], value: varMatch[2] });
+    }
+    console.log(`[WIDGET] extractChartConfig DEBUG: Found ${varDeclarations.length} variable declarations: ${varDeclarations.map(v => v.name).join(', ')}`);
+
+    // Build a preamble with all variable declarations to resolve external references
+    const preamble = varDeclarations.map(v => `var ${v.name} = ${v.value};`).join('\n');
+
+    // Find which variables are referenced in the config string
+    const referencedVars = varDeclarations.filter(v => configStr.includes(v.name));
+    if (referencedVars.length > 0) {
+      console.log(`[WIDGET] extractChartConfig DEBUG: Config references ${referencedVars.length} external variables: ${referencedVars.map(v => v.name).join(', ')}`);
+    }
+
+    try {
+      const chartConfig = new Function(preamble + '\nreturn ' + configStr)();
+      console.log(`[WIDGET] extractChartConfig DEBUG: Parsed OK — type=${chartConfig.type}, labels=${chartConfig.data?.labels?.length}, datasets=${chartConfig.data?.datasets?.length}`);
+      return { width, height, chartConfig };
+    } catch (parseError) {
+      console.log(`[WIDGET] extractChartConfig parse failed (with preamble): ${parseError.message}`);
+      // Fallback: try without preamble
+      try {
+        const chartConfig = new Function('return ' + configStr)();
+        console.log(`[WIDGET] extractChartConfig parse OK (without preamble)`);
+        return { width, height, chartConfig };
+      } catch (e) {
+        console.log(`[WIDGET] extractChartConfig parse failed (without preamble): ${e.message}`);
+      }
+      try {
+        const jsonReady = configStr
+          .replace(/(\w+)\s*:/g, '"$1":')
+          .replace(/'/g, '"');
+        const chartConfig = JSON.parse(jsonReady);
+        return { width, height, chartConfig };
+      } catch (e) {
+        console.log(`[WIDGET] extractChartConfig JSON parse failed: ${e.message}`);
+        return null;
+      }
+    }
+  }
+
+  async renderMermaid(widgetHtml, title) {
+    const startTime = Date.now();
+    console.log(`[WIDGET] renderMermaid START: title=${title}`);
+
+    const hasPrefersColorScheme = widgetHtml.includes('prefers-color-scheme');
+    const hasDarkKeyword = widgetHtml.includes('dark');
+    const hasDarkModeVar = widgetHtml.includes('darkMode');
+    const hasMermaidRender = widgetHtml.includes('mermaid.render');
+    console.log(`[WIDGET] renderMermaid DEBUG: hasPrefersColorScheme=${hasPrefersColorScheme}, hasDarkKeyword=${hasDarkKeyword}, hasDarkModeVar=${hasDarkModeVar}, hasMermaidRender=${hasMermaidRender}`);
+
+    const defMatch = widgetHtml.match(/mermaid\.render\([^,]*,\s*`([\s\S]*?)`\s*\)/);
+    if (!defMatch) {
+      console.log(`[WIDGET] renderMermaid: no mermaid.render() backtick pattern found, falling back to Puppeteer`);
+      return this.renderWidgetPuppeteer(widgetHtml, 'mermaid', title, 3000);
+    }
+
+    const definition = defMatch[1];
+    console.log(`[WIDGET] renderMermaid: extracted definition_length=${definition.length}`);
+
+    try {
+      const { renderMermaid: mmdRender } = await import('@mermaid-js/mermaid-cli');
+      const browser = await this.getWidgetBrowser();
+
+      console.log(`[WIDGET] renderMermaid: calling mermaid-cli with theme=default, bg=#ffffff`);
+      const result = await mmdRender(
+        browser,
+        definition,
+        'svg',
+        {
+          mermaidConfig: {
+            theme: 'default',
+            fontFamily: 'system-ui, -apple-system, sans-serif',
+          },
+          backgroundColor: '#ffffff',
+        }
+      );
+
+      let svgStr = new TextDecoder().decode(result.data);
+
+      const svgWidthMatch = svgStr.match(/width="([^"]+)"/);
+      const svgHeightMatch = svgStr.match(/height="([^"]+)"/);
+      const svgViewBoxMatch = svgStr.match(/viewBox="([^"]+)"/);
+      const svgMaxWidthMatch = svgStr.match(/max-width:\s*([\d.]+)px/);
+      const svgW = svgWidthMatch ? svgWidthMatch[1] : 'N/A';
+      const svgH = svgHeightMatch ? svgHeightMatch[1] : 'N/A';
+      const svgVB = svgViewBoxMatch ? svgViewBoxMatch[1] : 'N/A';
+      const svgMaxW = svgMaxWidthMatch ? svgMaxWidthMatch[1] + 'px' : 'N/A';
+      console.log(`[WIDGET] DEBUG: SVG BEFORE FIX: width=${svgW}, height=${svgH}, viewBox=${svgVB}, max-width=${svgMaxW}`);
+
+      if (svgWidthMatch && svgWidthMatch[1] === '100%' && svgViewBoxMatch) {
+        const vbParts = svgViewBoxMatch[1].split(/\s+/);
+        const vbWidth = parseFloat(vbParts[2]);
+        const vbHeight = parseFloat(vbParts[3]);
+        if (!isNaN(vbWidth) && !isNaN(vbHeight)) {
+          const fixedWidth = Math.ceil(vbWidth) + 2;
+          const fixedHeight = Math.ceil(vbHeight) + 2;
+          svgStr = svgStr.replace(/width="100%"/, `width="${fixedWidth}"`);
+          svgStr = svgStr.replace(/height="[^"]*"/, `height="${fixedHeight}"`);
+          svgStr = svgStr.replace(/style="[^"]*max-width:\s*[\d.]+px[^"]*"/, `style=""`);
+          console.log(`[WIDGET] renderMermaid FIX: converted width=100% to width=${fixedWidth}, height=${fixedHeight} (from viewBox: ${svgVB})`);
+        }
+      }
+
+      const svgStrLower = svgStr.substring(0, 2000);
+      const hasBlackBackground = svgStrLower.includes('fill="#000000') || svgStrLower.includes('fill="#18181b') || svgStrLower.includes('fill="#1e1e1e') || svgStrLower.includes('fill="#0a0a0a');
+      console.log(`[WIDGET] renderMermaid: SVG first 2000 chars has black bg: ${hasBlackBackground}`);
+      console.log(`[WIDGET] renderMermaid: SVG preview (200 chars): ${svgStr.substring(0, 200).replace(/\n/g, '\\n')}`);
+
+      const svgBase64 = Buffer.from(svgStr).toString('base64');
+      const dataUrl = `data:image/svg+xml;base64,${svgBase64}`;
+
+      console.log(`[WIDGET] renderMermaid OK: ${((Date.now() - startTime) / 1000).toFixed(2)}s, svg_size=${(svgStr.length / 1024).toFixed(1)}KB`);
+      return dataUrl;
+    } catch (e) {
+      console.log(`[WIDGET] renderMermaid ERROR: ${e.message}, falling back to Puppeteer`);
+      return this.renderWidgetPuppeteer(widgetHtml, 'mermaid', title, 3000);
+    }
+  }
+
+  async renderWidgetPuppeteer(widgetHtml, type, title, renderTimeout) {
+    const startTime = Date.now();
+    console.log(`[WIDGET] renderPuppeteer START: type=${type}, title=${title}, timeout=${renderTimeout}ms`);
+
+    let browser = null;
+    try {
+      const finalTimeout = renderTimeout || 3000;
+
+      const launchArgs = [
+        '--no-sandbox',
+        '--disable-setuid-sandbox',
+        '--disable-dev-shm-usage',
+        '--disable-gpu',
+        '--disable-software-rasterizer',
+        '--memory-pressure-off'
+      ];
+
+      browser = await puppeteer.launch({
+        executablePath: '/usr/bin/chromium',
+        args: launchArgs,
+        headless: 'shell'
+      });
+
+      const page = await browser.newPage();
+      await page.setViewport({ width: 1024, height: 768 });
+
+      const templatesDir = path.join(__dirname, 'templates');
+      let template;
+      try {
+        template = fs.readFileSync(path.join(templatesDir, 'widget-render.html'), 'utf8');
+      } catch (e) {
+        console.log(`[WIDGET] renderPuppeteer template not found, using inline fallback`);
+        template = `<!DOCTYPE html><html><head><meta charset="UTF-8"><style>body{margin:0;padding:8px;background:#fff;}</style></head><body><div id="widget-container"></div><script>window._widgetRendered=false;<\/script></body></html>`;
+      }
+
+      let fullHtml = template
+        .replace('%%WIDGET_CODE%%', widgetHtml)
+        .replace('%%INJECTED_SCRIPTS%%', '');
+
+      await page.setContent(fullHtml, { waitUntil: 'networkidle0', timeout: 15000 });
+
+      await page.evaluate(() => { window._widgetRendered = false; });
+
+      const rendered = await page.waitForFunction(
+        () => window._widgetRendered === true,
+        { timeout: finalTimeout }
+      ).catch(() => null);
+
+      if (!rendered) {
+        console.log(`[WIDGET] renderPuppeteer timeout after ${finalTimeout}ms, trying screenshot anyway`);
+        await new Promise(r => setTimeout(r, 1000));
+      }
+
+      const container = await page.$('#widget-container');
+      if (!container) {
+        console.log(`[WIDGET] renderPuppeteer FAIL: no container found`);
+        return null;
+      }
+
+      const screenshot = await container.screenshot({ type: 'png', omitBackground: false });
+      const dataUrl = `data:image/png;base64,${screenshot.toString('base64')}`;
+
+      console.log(`[WIDGET] renderPuppeteer OK: ${((Date.now() - startTime) / 1000).toFixed(2)}s, png=${(screenshot.length / 1024).toFixed(1)}KB`);
+      return dataUrl;
+    } catch (e) {
+      console.log(`[WIDGET] renderPuppeteer ERROR: ${e.message}`);
+      return null;
+    } finally {
+      if (browser) {
+        try { await browser.close(); } catch (e) {}
+      }
+    }
+  }
+
+  async render(widget) {
+    const { type, html, title } = widget;
+    try {
+      switch (type) {
+        case 'chart':
+          return await this.renderChart(html, title);
+        case 'mermaid':
+          return await this.renderMermaid(html, title);
+        case 'interactive':
+          return await this.renderWidgetPuppeteer(html, 'interactive', title, 3000);
+        default:
+          return await this.renderWidgetPuppeteer(html, type, title, 2000);
+      }
+    } catch (e) {
+      console.log(`[WIDGET] render FAILED: type=${type}, error=${e.message}`);
+      return null;
+    }
+  }
+}
+
+const widgetRenderer = new WidgetRenderer();
+const MAX_CONCURRENT_RENDER = 3;
+let activeRenderCount = 0;
+const renderQueue = [];
+
+function renderWithConcurrency(widget) {
+  return new Promise((resolve, reject) => {
+    renderQueue.push({ widget, resolve, reject });
+    processRenderQueue();
+  });
+}
+
+async function processRenderQueue() {
+  while (renderQueue.length > 0 && activeRenderCount < MAX_CONCURRENT_RENDER) {
+    const { widget, resolve, reject } = renderQueue.shift();
+    activeRenderCount++;
+    try {
+      const result = await widgetRenderer.render(widget);
+      resolve(result);
+    } catch (e) {
+      reject(e);
+    } finally {
+      activeRenderCount--;
+      processRenderQueue();
+    }
+  }
+}
+
+// ─── Widget Rendering Endpoint ─────────────────────────────────
+
+app.post('/api/render_charts', async (req, res) => {
+  const startTime = Date.now();
+  console.log(`\n[WIDGET] ========== render_charts START ==========`);
+
+  const { widgets, theme } = req.body;
+
+  if (!widgets || !Array.isArray(widgets) || widgets.length === 0) {
+    return res.status(400).json({ error: 'Missing widgets array' });
+  }
+
+  console.log(`[WIDGET] Received ${widgets.length} widgets, theme=${theme || 'light'}`);
+
+  const results = [];
+  const renderPromises = widgets.map(async (widget, index) => {
+    const wStart = Date.now();
+    const wType = widget.type || 'html';
+    const wTitle = widget.title || `widget_${index}`;
+
+    console.log(`[WIDGET] [${index + 1}/${widgets.length}] Rendering: type=${wType}, title=${wTitle}`);
+
+    try {
+      const renderPromise = renderWithConcurrency(widget);
+      const timeoutPromise = new Promise(resolve => setTimeout(() => resolve(null), 15000));
+      const dataUrl = await Promise.race([renderPromise, timeoutPromise]);
+
+      const elapsed = ((Date.now() - wStart) / 1000).toFixed(2);
+      if (dataUrl) {
+        console.log(`[WIDGET] [${index + 1}/${widgets.length}] OK: ${elapsed}s, dataUrl_len=${(dataUrl.length / 1024).toFixed(1)}KB`);
+        return { index, success: true, dataUrl, type: wType, title: wTitle };
+      } else {
+        console.log(`[WIDGET] [${index + 1}/${widgets.length}] TIMEOUT: ${elapsed}s`);
+        return { index, success: false, error: 'timeout', type: wType, title: wTitle };
+      }
+    } catch (e) {
+      console.log(`[WIDGET] [${index + 1}/${widgets.length}] ERROR: ${e.message}`);
+      return { index, success: false, error: e.message, type: wType, title: wTitle };
+    }
+  });
+
+  const renderResults = await Promise.all(renderPromises);
+
+  const successCount = renderResults.filter(r => r.success).length;
+  const failCount = renderResults.filter(r => !r.success).length;
+  const totalElapsed = ((Date.now() - startTime) / 1000).toFixed(2);
+
+  console.log(`[WIDGET] ========== render_charts DONE: ${successCount} OK, ${failCount} FAIL, ${totalElapsed}s ==========\n`);
+
+  res.json({ results: renderResults });
+});
+
 app.listen(port, () => {
   console.log(`Server listening at http://localhost:${port}`);
 });

templates/widget-render.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<style>
+body { margin: 0; padding: 8px; background: #ffffff; font-family: system-ui, -apple-system, sans-serif; }
+
+/* Claude Semantic Color Classes */
+.c-purple { fill: #EEEDFE; stroke: #534AB7; color: #3C3489; }
+.c-teal   { fill: #E1F5EE; stroke: #0F6E56; color: #085041; }
+.c-coral  { fill: #FAECE7; stroke: #993C1D; color: #712B13; }
+.c-pink   { fill: #FBEAF0; stroke: #993556; color: #72243E; }
+.c-gray   { fill: #F1EFE8; stroke: #5F5E5A; color: #444441; }
+.c-blue   { fill: #E6F1FB; stroke: #185FA5; color: #0C447C; }
+.c-green  { fill: #EAF3DE; stroke: #3B6D11; color: #27500A; }
+.c-amber  { fill: #FAEEDA; stroke: #854F0B; color: #633806; }
+.c-red    { fill: #FCEBEB; stroke: #A32D2D; color: #791F1F; }
+
+.c-purple rect, .c-purple circle, .c-purple ellipse, .c-purple polygon { fill: #EEEDFE; stroke: #534AB7; }
+.c-teal rect,   .c-teal circle,   .c-teal ellipse,   .c-teal polygon   { fill: #E1F5EE; stroke: #0F6E56; }
+.c-coral rect,  .c-coral circle,  .c-coral ellipse,  .c-coral polygon  { fill: #FAECE7; stroke: #993C1D; }
+.c-pink rect,   .c-pink circle,   .c-pink ellipse,   .c-pink polygon   { fill: #FBEAF0; stroke: #993556; }
+.c-gray rect,   .c-gray circle,   .c-gray ellipse,   .c-gray polygon   { fill: #F1EFE8; stroke: #5F5E5A; }
+.c-blue rect,   .c-blue circle,   .c-blue ellipse,   .c-blue polygon   { fill: #E6F1FB; stroke: #185FA5; }
+.c-green rect,  .c-green circle,  .c-green ellipse,  .c-green polygon  { fill: #EAF3DE; stroke: #3B6D11; }
+.c-amber rect,  .c-amber circle,  .c-amber ellipse,  .c-amber polygon  { fill: #FAEEDA; stroke: #854F0B; }
+.c-red rect,    .c-red circle,    .c-red ellipse,    .c-red polygon    { fill: #FCEBEB; stroke: #A32D2D; }
+
+.th, text.th { font-weight: 500; fill: #212121; }
+.ts, text.ts { font-size: 12px; fill: #6b7280; }
+.t, text.t   { font-size: 14px; fill: #212121; }
+
+svg .arr   { fill: none; stroke: #888780; stroke-width: 1.5; }
+svg .leader { fill: none; stroke: #888780; stroke-width: 0.5; stroke-dasharray: 2 2; }
+svg .box   { fill: #f9f9f9; stroke: #e5e5e5; }
+
+/* Claude CSS variable fallbacks */
+:root {
+  --color-text-primary: #212121;
+  --color-text-secondary: #6b7280;
+  --color-border-primary: #e5e5e5;
+  --color-border-secondary: #e5e5e5;
+  --color-border-tertiary: #f0f0f0;
+  --color-background-primary: #ffffff;
+  --color-background-secondary: #fafafa;
+  --color-text-success: #059669;
+  --color-text-warning: #d97706;
+  --color-text-error: #dc2626;
+}
+</style>
+</head>
+<body>
+<div id="widget-container">%%WIDGET_CODE%%</div>
+<script>
+window._widgetRendered = false;
+</script>
+%%INJECTED_SCRIPTS%%
+<script>
+(function() {
+  // Disable Chart.js animations globally
+  if (typeof Chart !== 'undefined') {
+    const orig = Chart.defaults;
+    if (orig.animation) orig.animation.duration = 0;
+    if (orig.animations) orig.animations.duration = 0;
+  }
+
+  function signalDone() {
+    window._widgetRendered = true;
+    if (window.parent) {
+      try { window.parent.postMessage({ type: 'XWX_WIDGET_READY' }, '*'); } catch(e) {}
+    }
+  }
+
+  if (document.getElementById('widget-container').innerHTML.includes('canvas')) {
+    setTimeout(signalDone, 1500);
+  } else {
+    requestAnimationFrame(function() { setTimeout(signalDone, 500); });
+  }
+})();
+</script>
+</body>
+</html>