@ripple-ui/svelte 0.8.2 → 0.9.0-next.0

package/dist/utils/mermaid.d.ts

@@ -0,0 +1,94 @@
+export type MermaidConfig = ReturnType<typeof mermaidConfig>;
+export type Palette = Record<'ground' | 'ink' | 'soft' | 'border' | 'card' | 'panel' | 'inset' | 'primary' | 'tint' | 'onPrimary', string>;
+/**
+ * CSS colours (any syntax, var() resolved at `scope`) to opaque #rrggbb, each
+ * painted over `ground` (itself over the page background). Null without a 2D canvas.
+ */
+export declare function resolveColors<K extends string>(css: Record<K, string>, scope?: HTMLElement, ground?: string): Record<K, string> | null;
+/** True when a #rrggbb colour is dark (relative luminance under 0.4). */
+export declare function isDarkHex(hex: string): boolean;
+/**
+ * mermaid's config for one palette. `htmlLabels: false` keeps labels as SVG
+ * text (no foreignObject), which a caller drawing untrusted source needs so it
+ * can run the result through an SVG sanitizer.
+ */
+export declare function mermaidConfig(c: Palette, font: string, { htmlLabels }?: {
+    htmlLabels?: boolean | undefined;
+}): {
+    startOnLoad: boolean;
+    securityLevel: "strict";
+    suppressErrorRendering: boolean;
+    theme: "base";
+    fontFamily: string;
+    htmlLabels: boolean;
+    look: "neo";
+    layout: string;
+    themeCSS: string;
+    flowchart: {
+        wrappingWidth: number;
+        htmlLabels: boolean;
+        curve: "basis";
+        nodeSpacing: number;
+        rankSpacing: number;
+        padding: number;
+    };
+    sequence: {
+        actorFontFamily: string;
+        messageFontFamily: string;
+        noteFontFamily: string;
+    };
+    themeVariables: {
+        darkMode: boolean;
+        fontFamily: string;
+        fontSize: string;
+        background: string;
+        textColor: string;
+        titleColor: string;
+        lineColor: string;
+        primaryColor: string;
+        primaryTextColor: string;
+        primaryBorderColor: string;
+        secondaryColor: string;
+        secondaryTextColor: string;
+        secondaryBorderColor: string;
+        tertiaryColor: string;
+        tertiaryTextColor: string;
+        tertiaryBorderColor: string;
+        mainBkg: string;
+        nodeBorder: string;
+        nodeTextColor: string;
+        clusterBkg: string;
+        clusterBorder: string;
+        arrowheadColor: string;
+        edgeLabelBackground: string;
+        actorBkg: string;
+        actorBorder: string;
+        actorTextColor: string;
+        actorLineColor: string;
+        signalColor: string;
+        signalTextColor: string;
+        labelBoxBkgColor: string;
+        labelBoxBorderColor: string;
+        labelTextColor: string;
+        loopTextColor: string;
+        noteBkgColor: string;
+        noteTextColor: string;
+        noteBorderColor: string;
+        activationBkgColor: string;
+        activationBorderColor: string;
+        sequenceNumberColor: string;
+        stateBkg: string;
+        stateLabelColor: string;
+        stateBorder: string;
+        labelColor: string;
+        transitionColor: string;
+        transitionLabelColor: string;
+        compositeBackground: string;
+        compositeTitleBackground: string;
+        altBackground: string;
+        specialStateColor: string;
+        innerEndBackground: string;
+    };
+};
+/** Render mermaid `source` to an SVG string. Rejects when the source does not parse. */
+export declare function renderMermaid(source: string, config: MermaidConfig): Promise<string>;

package/dist/utils/mermaid.js

@@ -0,0 +1,144 @@
+// utils/mermaid.ts — Draws mermaid source as SVG for the docs site
+// (site/docs/diagrams.ts) and the markdown widget. Browser only: call it from
+// an effect or an attachment, never at module top level.
+// - mermaid is a dynamic import, fetched the first time anything renders, so a
+//   bundle (or a chat card) with no diagram never loads it.
+// - mermaidConfig maps a palette of opaque hex colours onto mermaid's 'base'
+//   theme in the neo look: rounded nodes with brand (palette.primary) strokes
+//   on a soft card fill, curved (basis) flowchart edges in the soft ink.
+//   Callers resolve their own tokens with resolveColors: mermaid's colour maths
+//   cannot parse oklch or color-mix, so each token is painted over the ground
+//   on a 1px canvas and read back as #rrggbb.
+// - mermaid.initialize is global, and the site and a widget can draw on one
+//   page with different palettes, so every render goes through one promise
+//   chain and re-initializes only when the config changed. securityLevel is
+//   always 'strict'.
+let loading;
+let queue = Promise.resolve();
+let initialized = '';
+let seq = 0;
+/**
+ * CSS colours (any syntax, var() resolved at `scope`) to opaque #rrggbb, each
+ * painted over `ground` (itself over the page background). Null without a 2D canvas.
+ */
+export function resolveColors(css, scope = document.body, ground = 'var(--background, Canvas)') {
+    const ctx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    if (!ctx)
+        return null;
+    const probe = document.createElement('span');
+    probe.style.display = 'none';
+    scope.append(probe);
+    const computed = (value) => {
+        probe.style.color = '';
+        probe.style.color = value;
+        return getComputedStyle(probe).color;
+    };
+    const layers = [computed('var(--background, Canvas)'), computed(ground)];
+    const out = {};
+    for (const key of Object.keys(css)) {
+        for (const fill of [...layers, computed(css[key])]) {
+            ctx.fillStyle = fill;
+            ctx.fillRect(0, 0, 1, 1);
+        }
+        const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+        out[key] = `#${[r, g, b].map((n) => n.toString(16).padStart(2, '0')).join('')}`;
+    }
+    probe.remove();
+    return out;
+}
+/** True when a #rrggbb colour is dark (relative luminance under 0.4). */
+export function isDarkHex(hex) {
+    const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b < 0.4;
+}
+/**
+ * mermaid's config for one palette. `htmlLabels: false` keeps labels as SVG
+ * text (no foreignObject), which a caller drawing untrusted source needs so it
+ * can run the result through an SVG sanitizer.
+ */
+export function mermaidConfig(c, font, { htmlLabels = true } = {}) {
+    return {
+        startOnLoad: false,
+        securityLevel: 'strict',
+        suppressErrorRendering: true,
+        theme: 'base',
+        fontFamily: font,
+        htmlLabels,
+        look: 'neo',
+        // mermaid 12 defaults to elk, which forces orthogonal edges; dagre honours `curve`.
+        layout: 'dagre',
+        // Rounded nodes even where the neo look keeps a square shape; lives in the SVG's own <style>.
+        themeCSS: '.node rect, .cluster rect { rx: 10px; ry: 10px; } .edgePath .path, .flowchart-link { stroke-width: 1.5px; }',
+        flowchart: { wrappingWidth: 260, htmlLabels, curve: 'basis', nodeSpacing: 36, rankSpacing: 44, padding: 14 },
+        sequence: { actorFontFamily: font, messageFontFamily: font, noteFontFamily: font },
+        themeVariables: {
+            darkMode: isDarkHex(c.ground),
+            fontFamily: font,
+            fontSize: '14px',
+            background: c.ground,
+            textColor: c.ink,
+            titleColor: c.ink,
+            lineColor: c.soft,
+            primaryColor: c.card,
+            primaryTextColor: c.ink,
+            primaryBorderColor: c.primary,
+            secondaryColor: c.inset,
+            secondaryTextColor: c.ink,
+            secondaryBorderColor: c.border,
+            tertiaryColor: c.panel,
+            tertiaryTextColor: c.ink,
+            tertiaryBorderColor: c.border,
+            mainBkg: c.card,
+            nodeBorder: c.primary,
+            nodeTextColor: c.ink,
+            clusterBkg: c.panel,
+            clusterBorder: c.border,
+            arrowheadColor: c.soft,
+            edgeLabelBackground: c.ground,
+            actorBkg: c.tint,
+            actorBorder: c.primary,
+            actorTextColor: c.ink,
+            actorLineColor: c.border,
+            signalColor: c.soft,
+            signalTextColor: c.ink,
+            labelBoxBkgColor: c.card,
+            labelBoxBorderColor: c.border,
+            labelTextColor: c.ink,
+            loopTextColor: c.ink,
+            noteBkgColor: c.inset,
+            noteTextColor: c.ink,
+            noteBorderColor: c.border,
+            activationBkgColor: c.tint,
+            activationBorderColor: c.primary,
+            sequenceNumberColor: c.onPrimary,
+            stateBkg: c.card,
+            stateLabelColor: c.ink,
+            stateBorder: c.border,
+            labelColor: c.ink,
+            transitionColor: c.soft,
+            transitionLabelColor: c.ink,
+            compositeBackground: c.panel,
+            compositeTitleBackground: c.card,
+            altBackground: c.inset,
+            specialStateColor: c.primary,
+            innerEndBackground: c.primary
+        }
+    };
+}
+/** Render mermaid `source` to an SVG string. Rejects when the source does not parse. */
+export function renderMermaid(source, config) {
+    loading ??= import('mermaid').then((m) => m.default);
+    const run = queue.then(async () => {
+        const mermaid = await loading;
+        await document.fonts?.ready;
+        const key = JSON.stringify(config);
+        if (key !== initialized) {
+            mermaid.initialize(config);
+            initialized = key;
+        }
+        const { svg } = await mermaid.render(`ripple-mermaid-${++seq}`, source);
+        return svg;
+    });
+    queue = run.catch(() => { });
+    return run;
+}

package/dist/utils/sanitize-html.d.ts

@@ -6,3 +6,9 @@ export declare function sanitizeHtml(html: string): string;
  * fix a generator that interpolates attacker text into markup.
  */
 export declare function sanitizeSvg(svg: string): string;
+/**
+ * Sanitize generated MathML (temml output) for insertion. `style` is dropped
+ * like everywhere else: it only carries \color and a few spacing tweaks, and
+ * keeping it would reopen the url() beacon channel.
+ */
+export declare function sanitizeMath(mathml: string): string;

package/dist/utils/sanitize-html.js

@@ -11,6 +11,9 @@
 // url(https://evil/...) beacons on render, and position:fixed can overlay the
 // host app with a fake credential prompt. Structural markup is unaffected.
 //
+// sanitizeMath is the MathML-profile sibling for temml output (the markdown
+// widget's math); the HTML profile would delete the <math> element outright.
+//
 // sanitizeSvg is the SVG-profile sibling for widgets that {@html} generated SVG
 // (Qr): the HTML profile would delete the <svg> element outright.
 //
@@ -45,3 +48,15 @@ export function sanitizeSvg(svg) {
         return svg; // SSR fail-open — see header
     return DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true } });
 }
+/**
+ * Sanitize generated MathML (temml output) for insertion. `style` is dropped
+ * like everywhere else: it only carries \color and a few spacing tweaks, and
+ * keeping it would reopen the url() beacon channel.
+ */
+export function sanitizeMath(mathml) {
+    if (!mathml)
+        return '';
+    if (typeof window === 'undefined')
+        return mathml; // SSR fail-open, see header
+    return DOMPurify.sanitize(mathml, { USE_PROFILES: { mathMl: true }, FORBID_ATTR: ['style'] });
+}

package/dist/version.d.ts

@@ -11,7 +11,7 @@
  *   (scripts/build-manifest.ts) — unlike a Vite `define`, which would be
  *   undefined under bun. version.test.ts asserts this stays in lockstep with
  *   package.json so a release bump can't silently drift.
- * Released versions: svelte 0.8.2 with core 0.6.0, embed 0.1.0 and react 0.1.0. A bump
+ * Released versions: svelte 0.9.0-next.0 with core 0.6.1-next.0 (pre-release, npm dist-tag next), embed 0.1.0 and react 0.1.0. A bump
  *   changes this constant and packages/svelte/package.json together.
  */
-export declare const RIPPLE_VERSION = "0.8.2";
+export declare const RIPPLE_VERSION = "0.9.0-next.0";

package/dist/version.js

@@ -11,7 +11,7 @@
  *   (scripts/build-manifest.ts) — unlike a Vite `define`, which would be
  *   undefined under bun. version.test.ts asserts this stays in lockstep with
  *   package.json so a release bump can't silently drift.
- * Released versions: svelte 0.8.2 with core 0.6.0, embed 0.1.0 and react 0.1.0. A bump
+ * Released versions: svelte 0.9.0-next.0 with core 0.6.1-next.0 (pre-release, npm dist-tag next), embed 0.1.0 and react 0.1.0. A bump
  *   changes this constant and packages/svelte/package.json together.
  */
-export const RIPPLE_VERSION = '0.8.2';
+export const RIPPLE_VERSION = '0.9.0-next.0';

package/dist/widgets/data/Chart.svelte

@@ -1,8 +1,10 @@
 <!--
   Chart.svelte: 10 chart types (bar, line, area, pie, donut, candlestick,
   sparkline, heatmap, gauge, radar) drawn with echarts. Colours, axis label fit
-  and the pie legend come from chart-layout.ts: series take the categorical
-  palette in order, one series is one colour, `reference` series draw muted and
+  and the pie legend come from chart-layout.ts: an explicit `colors` prop wins,
+  otherwise series take the theme's --chart-1..5 in order (read as hex because
+  echarts draws on a canvas; an unset slot falls back to chart-layout's
+  categorical palette), one series is one colour, `reference` series draw muted and
   dashed, the category axis rotates or evenly thins labels (keeping first and
   last) to the measured width, and pie/donut legends carry value and percent.
   The instance is created once, when ResizeObserver first reports a size, and
@@ -19,7 +21,7 @@
 	import { onMount } from 'svelte';
 	import { cn } from '../../utils.js';
 	import { safeArray, safeObject } from '../../utils/safe-props.js';
-	import { fitAxisLabels, pieLayout, pointColors, seriesColor, sliceColors, sliceLegendText } from './chart-layout.js';
+	import { CATEGORICAL, fitAxisLabels, pieLayout, pointColors, seriesColor, sliceColors, sliceLegendText } from './chart-layout.js';
 
 	interface DataPoint {
 		label: string;
@@ -104,7 +106,32 @@
 
 	/** The i-th series colour, a `var(--x)` resolved for the canvas. */
 	function getColor(i: number): string {
-		return cssColor(seriesColor(i, colors));
+		return cssColor(seriesColor(i, colors, palette));
+	}
+
+	/** This draw's default palette, read once per buildOption. */
+	let palette: readonly string[] = CATEGORICAL;
+
+	/** The default palette: the theme's --chart-1..5 where they resolve, then chart-layout's categorical one. */
+	function themePalette(): string[] {
+		return CATEGORICAL.map((c, i) => (i < 5 && hexOf(cssColor(`var(--chart-${i + 1})`))) || c);
+	}
+
+	function hexOf(color: string): string | undefined {
+		if (/^#[0-9a-f]{6}$/i.test(color)) return color;
+		// An unset token comes back as `var(...)`: CSS.supports accepts it, canvas ignores it and reads black.
+		if (!color || color.startsWith('var(')) return undefined;
+		try {
+			if (!CSS.supports('color', color)) return undefined;
+			const ctx = document.createElement('canvas').getContext('2d');
+			if (!ctx) return undefined;
+			ctx.fillStyle = color;
+			ctx.fillRect(0, 0, 1, 1);
+			const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+			return `#${[r, g, b].map((n) => n.toString(16).padStart(2, '0')).join('')}`;
+		} catch {
+			return undefined;
+		}
 	}
 
 	let chartEl: HTMLDivElement | undefined = $state();
@@ -193,11 +220,12 @@
 	);
 
 	function buildOption() {
+		palette = themePalette();
 		const tc = themeColors();
 		const labels = data.map(d => d.label);
 		const values = data.map(d => d.value ?? 0);
 		// One series is one colour, unless the spec colours points itself.
-		const itemColors = pointColors(data, colors).map(cssColor);
+		const itemColors = pointColors(data, colors, palette).map(cssColor);
 
 		// Detect multi-series: any point carries a `series` map → one ECharts series per key.
 		const seriesKeys: string[] = (() => {
@@ -342,7 +370,7 @@
 				};
 			}
 		} else if (type === 'pie' || type === 'donut') {
-			const slices = sliceColors(data, colors).map(cssColor);
+			const slices = sliceColors(data, colors, palette).map(cssColor);
 			const legendText = sliceLegendText(data);
 			const pie = pieLayout(boxWidth, height, [...legendText.values()]);
 			const r = pie.radius;

package/dist/widgets/data/chart-layout.d.ts

@@ -5,16 +5,16 @@
  * A spec that wants status colours passes them in `colors`.
  */
 export declare const CATEGORICAL: string[];
-/** The i-th series colour: the spec's `colors[i]`, else the palette in order. */
-export declare function seriesColor(i: number, colors: readonly string[]): string;
+/** The i-th series colour: the spec's `colors[i]`, else `palette` in order. */
+export declare function seriesColor(i: number, colors: readonly string[], palette?: readonly string[]): string;
 /**
  * Colours for the points of ONE series (bar, line, heatmap, gauge, radar).
  * One series is one colour. Points differ only when the spec says so: a point's
  * own `color`, or a `colors` list longer than one (read as per point).
  */
-export declare function pointColors(data: readonly object[], colors: readonly string[]): string[];
+export declare function pointColors(data: readonly object[], colors: readonly string[], palette?: readonly string[]): string[];
 /** Slice colours for pie and donut: every slice is its own category. */
-export declare function sliceColors(data: readonly object[], colors: readonly string[]): string[];
+export declare function sliceColors(data: readonly object[], colors: readonly string[], palette?: readonly string[]): string[];
 export interface AxisLabelFit {
     /** echarts `axisLabel.interval`: 0 shows all, a function picks which. */
     interval: number | ((index: number) => boolean);

package/dist/widgets/data/chart-layout.js

@@ -3,7 +3,8 @@
 // Palette order, which colour each point or series wears, how the category
 // axis fits its labels to the measured width, and the pie/donut legend text
 // and layout. Chart.svelte resolves `var(--x)` colours and the theme, then
-// feeds these the numbers.
+// feeds these the numbers; its default palette is the theme's --chart-1..5
+// laid over CATEGORICAL, passed in as `palette`.
 /**
  * Categorical palette in draw order. Brand blue first, then hues that read as
  * categories. Status colours (red, green) are not in it and amber sits late, so
@@ -11,28 +12,28 @@
  * A spec that wants status colours passes them in `colors`.
  */
 export const CATEGORICAL = ['#3b82f6', '#14b8a6', '#8b5cf6', '#ec4899', '#f59e0b', '#06b6d4', '#f97316', '#64748b'];
-/** The i-th series colour: the spec's `colors[i]`, else the palette in order. */
-export function seriesColor(i, colors) {
-    return colors[i] || CATEGORICAL[i % CATEGORICAL.length];
+/** The i-th series colour: the spec's `colors[i]`, else `palette` in order. */
+export function seriesColor(i, colors, palette = CATEGORICAL) {
+    return colors[i] || palette[i % palette.length];
 }
 /**
  * Colours for the points of ONE series (bar, line, heatmap, gauge, radar).
  * One series is one colour. Points differ only when the spec says so: a point's
  * own `color`, or a `colors` list longer than one (read as per point).
  */
-export function pointColors(data, colors) {
+export function pointColors(data, colors, palette = CATEGORICAL) {
     return data.map((d, i) => {
         const own = ownColor(d);
         if (own)
             return own;
         if (colors.length > 1)
             return colors[i % colors.length];
-        return seriesColor(0, colors);
+        return seriesColor(0, colors, palette);
     });
 }
 /** Slice colours for pie and donut: every slice is its own category. */
-export function sliceColors(data, colors) {
-    return data.map((d, i) => ownColor(d) ?? seriesColor(i, colors));
+export function sliceColors(data, colors, palette = CATEGORICAL) {
+    return data.map((d, i) => ownColor(d) ?? seriesColor(i, colors, palette));
 }
 /** A point's own `color`, when it names one. */
 function ownColor(d) {

package/dist/widgets/display/Markdown.svelte

@@ -1,5 +1,107 @@
+<!--
+  widgets/display/Markdown.svelte — The `markdown` widget: GFM markdown, plus
+  LaTeX math ($…$, $$…$$, \(…\), \[…\]) and ```mermaid diagrams.
+  - marked runs synchronously (also under SSR) and its output is sanitized
+    before {@html}: the source is spec-controlled and may be LLM-authored.
+  - Math and diagrams arrive as placeholders holding the source as written
+    (utils/markdown-ext.ts). An effect upgrades them in the browser: temml and
+    mermaid are dynamic imports, fetched only when a placeholder exists, so a
+    card without either pays nothing. A failed render leaves the source.
+  - Upgrade output is sanitized again (sanitizeMath, sanitizeSvg) and mermaid
+    runs with strict security and SVG-only labels. Diagrams wait until a
+    streamed spec is done, so a half-written fence is not parsed every frame.
+  - Diagrams take their palette from the --ripple-* tokens at this element (so
+    inside an embed's shadow root too) and redraw when class or data-theme
+    changes on <html>, on the shadow host, or on .ripple-embed-root.
+-->
+<script lang="ts" module>
+  import { Marked } from 'marked';
+  import { markedMath, markedMermaid, MATH_CLASS } from '../../utils/markdown-ext.js';
+  import { mermaidConfig, renderMermaid, resolveColors } from '../../utils/mermaid.js';
+  import { sanitizeMath, sanitizeSvg } from '../../utils/sanitize-html.js';
+
+  const md = new Marked(markedMath(), markedMermaid());
+
+  type Temml = (typeof import('temml'))['default'];
+  let temml: Promise<Temml> | undefined;
+
+  function upgradeMath(root: HTMLElement) {
+    const spots = [...root.querySelectorAll<HTMLElement>(`.${MATH_CLASS}:not([data-rendered])`)];
+    if (!spots.length) return;
+    temml ??= import('temml').then((m) => m.default);
+    void temml.then((t) => {
+      for (const el of spots) {
+        if (!el.isConnected || el.dataset.rendered != null) continue;
+        try {
+          const display = el.dataset.display != null;
+          const out = sanitizeMath(t.renderToString(el.dataset.tex ?? '', { displayMode: display, throwOnError: true }));
+          if (!out) continue;
+          el.innerHTML = out;
+          el.dataset.rendered = '';
+        } catch {
+          // Unparseable TeX: the source stays on screen as written.
+        }
+      }
+    });
+  }
+
+  /** Mermaid's url()/@import in CSS (classDef, style) could beacon out; keep only #fragment refs. */
+  const stripOutsideRefs = (svg: string) =>
+    svg.replace(/@import[^;]*;?/gi, '').replace(/url\(\s*(?!['"]?#)[^)]*\)/gi, 'none');
+
+  function diagramConfig(root: HTMLElement) {
+    const c = resolveColors(
+      {
+        ground: 'var(--ripple-surface)',
+        ink: 'var(--ripple-surface-foreground)',
+        soft: 'var(--ripple-muted-foreground)',
+        border: 'color-mix(in oklab, var(--ripple-surface-foreground) 28%, transparent)',
+        // workflow's lifted card (--wf-card) with a soft accent wash
+        card: 'color-mix(in oklab, var(--ripple-accent) 6%, oklch(from var(--ripple-surface-foreground) calc(1.18 - l * 0.92) calc(c * 0.5) h))',
+        panel: 'var(--ripple-muted)',
+        inset: 'var(--ripple-muted)',
+        primary: 'var(--ripple-accent)',
+        tint: 'color-mix(in oklab, var(--ripple-accent) 14%, transparent)',
+        onPrimary: 'var(--ripple-accent-foreground)'
+      },
+      root,
+      'var(--ripple-surface)'
+    );
+    return c && mermaidConfig(c, getComputedStyle(root).fontFamily || 'sans-serif', { htmlLabels: false });
+  }
+
+  function upgradeDiagrams(root: HTMLElement, alive: () => boolean) {
+    const wraps = [...root.querySelectorAll<HTMLElement>('.ripple-diagram')];
+    if (!wraps.length) return;
+    const config = diagramConfig(root);
+    if (!config) return;
+    const key = JSON.stringify(config.themeVariables);
+    for (const wrap of wraps) {
+      if (wrap.dataset.drawn === key) continue;
+      const pre = wrap.querySelector('pre');
+      const source = pre?.textContent ?? '';
+      if (!pre || !source.trim()) continue;
+      renderMermaid(source, config).then(
+        (svg) => {
+          if (!alive() || !wrap.isConnected) return;
+          let canvas = wrap.querySelector<HTMLElement>('.ripple-diagram-canvas');
+          if (!canvas) {
+            canvas = document.createElement('div');
+            canvas.className = 'ripple-diagram-canvas';
+            wrap.prepend(canvas);
+          }
+          canvas.innerHTML = sanitizeSvg(stripOutsideRefs(svg));
+          pre.hidden = true;
+          wrap.dataset.drawn = key;
+        },
+        (e: unknown) => console.warn('[ripple/markdown] mermaid diagram failed to render:', e)
+      );
+    }
+  }
+</script>
+
 <script lang="ts">
-  import { marked } from 'marked';
+  import { getContext } from 'svelte';
   import { cn } from '../../utils.js';
   import { sanitizeHtml } from '../../utils/sanitize-html.js';
 
@@ -7,7 +109,7 @@
     id?: string;
     class?: string;
     style?: Record<string, string>;
-    /** Markdown source. */
+    /** Markdown source. Also renders LaTeX math and ```mermaid fences. */
     content?: string;
     /** Alias for `content`. Some specs author this as `text`. */
     text?: string;
@@ -17,6 +119,10 @@
 
   let { id, class: className, style, content, text, gfm = true }: Props = $props();
 
+  const streamPhase = getContext<(() => 'active' | 'done' | undefined) | undefined>('ui-streaming');
+  let root = $state<HTMLDivElement>();
+  let themeTick = $state(0);
+
   const source = $derived(content ?? text ?? '');
 
   const html = $derived.by(() => {
@@ -25,19 +131,46 @@
       // Sanitize before {@html}: markdown source is spec-controlled and may be
       // untrusted (LLM-authored), and marked passes raw HTML through by default,
       // so `<img src=x onerror=…>` in the source would otherwise run as XSS.
-      return sanitizeHtml(marked.parse(source, { gfm, breaks: true, async: false }) as string);
+      return sanitizeHtml(md.parse(source, { gfm, breaks: true, async: false }) as string);
     } catch (e) {
       console.warn('[ripple/markdown] parse failed:', e);
       return '';
     }
   });
 
+  $effect(() => {
+    if (!root) return;
+    // The page's theme lives on <html>; an embed's on its shadow host (data-theme)
+    // and .ripple-embed-root (.dark), and <html> never changes there.
+    const host = (root.getRootNode() as Partial<ShadowRoot>).host;
+    const themeRoots = new Set([document.documentElement, host, root.closest('.ripple-embed-root')]);
+    const mo = new MutationObserver(() => themeTick++);
+    for (const el of themeRoots) {
+      if (el) mo.observe(el, { attributes: true, attributeFilter: ['class', 'data-theme'] });
+    }
+    return () => mo.disconnect();
+  });
+
+  $effect(() => {
+    void html;
+    if (!root) return;
+    upgradeMath(root);
+    if (streamPhase?.() === 'active') return;
+    void themeTick;
+    let alive = true;
+    upgradeDiagrams(root, () => alive);
+    return () => {
+      alive = false;
+    };
+  });
+
   const styleString = $derived(
     style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
   );
 </script>
 
 <div
+  bind:this={root}
   {id}
   class={cn(
     'ripple-markdown text-sm leading-relaxed',
@@ -56,9 +189,20 @@
     '[&_th]:border-b [&_th]:border-border [&_th]:p-2 [&_th]:text-left [&_th]:font-semibold',
     '[&_td]:border-b [&_td]:border-border/50 [&_td]:p-2',
     '[&_hr]:my-4 [&_hr]:border-border',
+    '[&_.ripple-math-display]:block [&_.ripple-math-display]:my-3 [&_.ripple-math-display]:overflow-x-auto [&_.ripple-math-display]:py-1',
+    '[&_.ripple-diagram-canvas]:my-3 [&_.ripple-diagram-canvas]:overflow-x-auto',
+    '[&_.ripple-diagram-canvas_svg]:mx-auto [&_.ripple-diagram-canvas_svg]:h-auto [&_.ripple-diagram-canvas_svg]:max-w-full',
     className
   )}
   style={styleString}
 >
   {@html html}
 </div>
+
+<style>
+  /* System math fonts; temml's own CSS and woff2 are not shipped. */
+  .ripple-markdown :global(math) {
+    font-family: 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', math;
+    font-size: 1.1em;
+  }
+</style>

package/dist/widgets/display/Markdown.svelte.d.ts

@@ -2,7 +2,7 @@ interface Props {
     id?: string;
     class?: string;
     style?: Record<string, string>;
-    /** Markdown source. */
+    /** Markdown source. Also renders LaTeX math and ```mermaid fences. */
     content?: string;
     /** Alias for `content`. Some specs author this as `text`. */
     text?: string;