templates/widget-render.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body { margin: 0; padding: 8px; background: #ffffff; font-family: system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }

/* 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; }

/* Fix: SVG text inherits stroke from parent <g class="c-xxx"> group.
   stroke on text causes fill+stroke double rendering → looks like bold. */
svg text { stroke: none !important; }

/* Claude "Imagine" widget design tokens (unprefixed scheme).
   Widgets reference var(--text-warning), var(--text-secondary), var(--surface-1),
   etc. — normally provided by claude.ai via tokens.vanilla.css. Without them,
   stroke="var(--text-warning)" computes to none → SVG lines disappear. */
:root {
  --surface-0: #ffffff;
  --surface-1: #fcfcfb;
  --surface-2: #ffffff;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --text-accent: #2a78d6;
  --text-info: #3266ad;
  --text-success: #265b19;
  --text-warning: #5a4815;
  --text-danger: #7f2c28;
  --bg-accent: #d6e4f6;
  --bg-info: #d6e4f6;
  --bg-success: #e9f1dc;
  --bg-warning: #f6eedf;
  --bg-danger: #f7ecec;
  --border: rgba(11, 11, 11, 0.10);
  --border-strong: rgba(31, 30, 29, 0.3);
  --border-stronger: rgba(31, 30, 29, 0.4);
  --border-accent: #4682d5;
  --border-info: #4682d5;
  --border-success: #437426;
  --border-warning: #805c1f;
  --border-danger: #a73d39;
  --radius: 8px;
  --pad-sm: 8px;
  --pad-md: 12px;
  --pad-lg: 16px;
  --pad-xl: 24px;
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --gap-xl: 24px;
}

/* Claude CSS variable fallbacks (prefixed scheme) */
:root {
  --color-text-primary: #212121;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-border-primary: #e5e5e5;
  --color-border-secondary: #e5e5e5;
  --color-border-tertiary: #e0e0e0;
  --color-background-primary: #ffffff;
  --color-background-secondary: #f5f4ed;
  --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>