mviz 1.7.0-pre.1 → 1.7.0-pre.3

package/dist/cli.js

@@ -110,8 +110,7 @@ async function main() {
         console.log('  --lint, -l          Validate input without generating output');
         console.log('  --theme, -t <file>  Load custom theme from YAML file');
         console.log('  --allow-errors      Continue generating output even with lint errors');
-        console.log('  --embed             Strip page chrome (red bar, title, theme toggle) for embedding');
-        console.log('  --fragment          Emit an HTML fragment (no DOCTYPE/html/head/body); implies --embed');
+        console.log('  --embed             Strip page chrome + run embed post-processes for iframe-embedded output');
         console.log('  --help, -h          Show this help message');
         console.log('');
         console.log('Examples:');
@@ -125,16 +124,13 @@ async function main() {
     // Parse flags
     const lintOnly = args.includes('--lint') || args.includes('-l');
     const allowErrors = args.includes('--allow-errors');
-    const fragmentFlag = args.includes('--fragment');
-    // Fragment mode implies embed — no chrome inside a fragment.
-    const embedFlag = fragmentFlag || args.includes('--embed');
+    const embedFlag = args.includes('--embed');
     const { themeFile, remainingArgs: afterTheme } = parseThemeFlag(args);
     const { outputFile, remainingArgs } = parseOutputFlag(afterTheme);
     const filteredArgs = remainingArgs.filter((a) => a !== '--lint' &&
         a !== '-l' &&
         a !== '--allow-errors' &&
-        a !== '--embed' &&
-        a !== '--fragment');
+        a !== '--embed');
     // Load custom theme if specified
     let customTheme;
     if (themeFile) {
@@ -177,8 +173,7 @@ async function main() {
             console.error('  --lint, -l          Validate input without generating output');
             console.error('  --theme, -t <file>  Load custom theme from YAML file');
             console.error('  --allow-errors      Continue generating output even with lint errors');
-            console.error('  --embed             Strip page chrome (red bar, title, theme toggle) for embedding');
-            console.error('  --fragment          Emit an HTML fragment (no DOCTYPE/html/head/body); implies --embed');
+            console.error('  --embed             Strip page chrome + run embed post-processes for iframe-embedded output');
             console.error('  --help, -h          Show this help message');
             process.exit(1);
         }
@@ -193,11 +188,11 @@ async function main() {
             // JSON input - lint then generate
             const spec = JSON.parse(trimmed);
             lintSpec(spec, lintMode);
-            html = await generateChartAsync(spec, { fragment: fragmentFlag });
+            html = await generateChartAsync(spec);
         }
         else if (trimmed.startsWith('---') || trimmed.includes('```')) {
             // Markdown input - parser handles linting internally (async for mermaid)
-            const result = await parseMarkdownToDashboardAsync(input, 'light', baseDir, false, false, customTheme, lintMode, embedFlag, fragmentFlag);
+            const result = await parseMarkdownToDashboardAsync(input, 'light', baseDir, false, false, customTheme, lintMode, embedFlag);
             html = result.html;
             errors = result.errors;
         }
@@ -205,7 +200,7 @@ async function main() {
             // Try JSON anyway - lint then generate
             const spec = JSON.parse(trimmed);
             lintSpec(spec, lintMode);
-            html = await generateChartAsync(spec, { fragment: fragmentFlag });
+            html = await generateChartAsync(spec);
         }
         // Check for errors (unless --allow-errors is set)
         if (errors.length > 0 && !allowErrors) {
@@ -222,9 +217,11 @@ async function main() {
             }
         }
         else if (outputFile) {
-            // Write to file and print success message
+            // Write to file and print success message. Goes to stderr so the
+            // message doesn't corrupt captured output when callers pipe through
+            // `-o /dev/stdout` for inline-rendering workflows (issue #247, #275).
             writeFileSync(resolve(outputFile), html);
-            console.log(`✓ Created ${outputFile}`);
+            console.error(`✓ Created ${outputFile}`);
         }
         else {
             // No -o flag: require it unless piping

package/dist/core/embed-postprocess.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Embed-mode post-processing (issue #272 / #247).
+ *
+ * `--embed` produces a complete HTML document but strips the page chrome
+ * (red accent bar, title row, theme toggle) so the output can be tucked
+ * inside another product's iframe (mdw-turbo Prism tiles, dashboard cells,
+ * etc.). This module is the second half of that work: a set of
+ * post-processes that run on the assembled HTML to make the embedded
+ * output as lean and host-friendly as possible.
+ *
+ * What it does:
+ *   - Lift runtime style-injection IIFEs (table init creates a `<style>`
+ *     element at runtime — extract its body into the inline `<style>` so
+ *     pruning sees it and there's no FOUC).
+ *   - Prune unused CSS rules + minify the inline `<style>` block.
+ *   - Drop the ECharts CDN script tag entirely when no `echarts.init`
+ *     survives — table-only / KPI-only dashboards don't need ECharts and
+ *     the cold bundle is ~1 MB. Embeds that do use charts keep the full
+ *     bundle (no variant downsizing — feature parity with the standalone
+ *     report matters more than bundle size for iframe-embed consumers).
+ *   - Drop the `marked.min.js` CDN script tag when no `marked.parse(...)`
+ *     call survives. textarea / note / text components emit inline scripts
+ *     that call `marked.parse`, so the script must stay whenever any of
+ *     those components is rendered.
+ *   - Drop the sparkline-tooltip listener (`.spark-hit` handler) when no
+ *     `.spark-hit` element survives. Tables with sparkline columns still
+ *     emit these, so we can't blanket-strip in embed mode.
+ *   - Minify inline `<script>` whitespace (string/regex-literal-safe).
+ *   - Collapse element whitespace between top-level tags.
+ *
+ * What it deliberately does NOT do:
+ *   - Strip `<!DOCTYPE>` / `<html>` / `<head>` / `<body>` wrappers. Embed
+ *     mode emits a complete HTML document — embedding hosts like iframe
+ *     `srcdoc` need that to render. (claude.ai's `visualize:show_widget`
+ *     would require fragmentation, but the show_widget integration goes
+ *     through a different path — see the skill's chat-native rendering
+ *     section, not this code.)
+ */
+/**
+ * Apply embed-mode post-processing to an assembled HTML document.
+ *
+ * Idempotent for the most part — successive calls are safe.
+ */
+export declare function postProcessEmbed(html: string): string;
+//# sourceMappingURL=embed-postprocess.d.ts.map

package/dist/core/embed-postprocess.js

@@ -0,0 +1,494 @@
+/**
+ * Embed-mode post-processing (issue #272 / #247).
+ *
+ * `--embed` produces a complete HTML document but strips the page chrome
+ * (red accent bar, title row, theme toggle) so the output can be tucked
+ * inside another product's iframe (mdw-turbo Prism tiles, dashboard cells,
+ * etc.). This module is the second half of that work: a set of
+ * post-processes that run on the assembled HTML to make the embedded
+ * output as lean and host-friendly as possible.
+ *
+ * What it does:
+ *   - Lift runtime style-injection IIFEs (table init creates a `<style>`
+ *     element at runtime — extract its body into the inline `<style>` so
+ *     pruning sees it and there's no FOUC).
+ *   - Prune unused CSS rules + minify the inline `<style>` block.
+ *   - Drop the ECharts CDN script tag entirely when no `echarts.init`
+ *     survives — table-only / KPI-only dashboards don't need ECharts and
+ *     the cold bundle is ~1 MB. Embeds that do use charts keep the full
+ *     bundle (no variant downsizing — feature parity with the standalone
+ *     report matters more than bundle size for iframe-embed consumers).
+ *   - Drop the `marked.min.js` CDN script tag when no `marked.parse(...)`
+ *     call survives. textarea / note / text components emit inline scripts
+ *     that call `marked.parse`, so the script must stay whenever any of
+ *     those components is rendered.
+ *   - Drop the sparkline-tooltip listener (`.spark-hit` handler) when no
+ *     `.spark-hit` element survives. Tables with sparkline columns still
+ *     emit these, so we can't blanket-strip in embed mode.
+ *   - Minify inline `<script>` whitespace (string/regex-literal-safe).
+ *   - Collapse element whitespace between top-level tags.
+ *
+ * What it deliberately does NOT do:
+ *   - Strip `<!DOCTYPE>` / `<html>` / `<head>` / `<body>` wrappers. Embed
+ *     mode emits a complete HTML document — embedding hosts like iframe
+ *     `srcdoc` need that to render. (claude.ai's `visualize:show_widget`
+ *     would require fragmentation, but the show_widget integration goes
+ *     through a different path — see the skill's chat-native rendering
+ *     section, not this code.)
+ */
+import { randomBytes } from 'node:crypto';
+/**
+ * Generate a random nonce for protect-and-restore placeholders. Used to
+ * keep the markers we substitute in (during template-literal protection,
+ * block protection, etc.) from colliding with user-authored content that
+ * might happen to contain a hand-typed `__MVIZ_PROTECT_…__` string.
+ *
+ * 16 hex chars = 64 random bits. Collision probability with arbitrary
+ * user text is vanishingly small.
+ */
+function randomNonce() {
+    return randomBytes(8).toString('hex');
+}
+/**
+ * Apply embed-mode post-processing to an assembled HTML document.
+ *
+ * Idempotent for the most part — successive calls are safe.
+ */
+export function postProcessEmbed(html) {
+    let out = html;
+    // (Note: the PNG export menu — `.mviz-export-menu` CSS + the export
+    // IIFE in core/export.ts — never reaches this pass. `templates.ts`
+    // omits both when embed=true, before this module runs. We rely on
+    // that gate rather than carrying a defensive strip here.)
+    // 1. Lift any runtime style-injection IIFEs the table init code uses
+    //    (`var s = document.createElement('style'); s.textContent = "…"; head.appendChild(s);`).
+    //    Avoids a tool-call's worth of script execution latency and saves the
+    //    IIFE wrapping bytes. The extracted CSS is merged into the main
+    //    <style> block so the CSS pruner (step 2) still sees it.
+    out = inlineRuntimeStyleInjection(out);
+    // 2. Prune unused CSS rules + minify whitespace. The dashboard CSS carries
+    //    rules for every component type mviz supports — markdown, sparkline,
+    //    table, alert, etc. A typical embed uses two or three of those, so
+    //    most rules are dead weight. We scan the body HTML for the class names
+    //    that actually appear, then drop CSS rules whose selectors only
+    //    reference classes that aren't present.
+    out = pruneAndMinifyStyle(out);
+    // 3. Drop the ECharts CDN <script> when no `echarts.init` survives the
+    //    earlier transforms. Table-only / KPI-only dashboards don't need
+    //    ECharts and the bundle is ~1 MB cold — meaningful win for those
+    //    cases. We deliberately do NOT pick a smaller bundle variant
+    //    (`simple.min.js` / `common.min.js`) — the chart-type → bundle map
+    //    is brittle, and embed consumers usually want feature parity with
+    //    the standalone HTML report.
+    out = dropEchartsScriptIfUnused(out);
+    // 3b. Drop the marked CDN <script> when no `marked.parse(...)` call
+    //     survives. textarea / note / text components emit inline scripts
+    //     that call marked.parse, so the script tag has to stay whenever
+    //     those components are present. Dashboards without them (charts +
+    //     KPIs + tables only) can drop the ~50 KB CDN fetch.
+    out = dropMarkedScriptIfUnused(out);
+    // 4. Drop the sparkline tooltip JS when no `.spark-hit` elements survive.
+    //    Tables with sparkline columns DO emit `.spark-hit` rectangles with
+    //    `data-idx` / `data-val` and need the hover handler to fire — so we
+    //    can't blanket-strip in embed mode (same pattern as marked / ECharts).
+    out = dropSparklineTooltipIfUnused(out);
+    // (Note: an earlier draft also folded dead-boolean ternaries
+    // `true ? "$" : ''` → `"$"` and collapsed `{show:false, …}` sibling
+    // config. Both were post-process regex passes that couldn't reliably
+    // distinguish mviz-emitted JS code from user-authored strings inside
+    // chart data — e.g. a bar label `literal true ? 'yes' : 'no' text`
+    // would get folded into `literal 'yes' text`. The byte win was small
+    // (~200 B/chart) and the correctness risk was real, so both passes
+    // were removed. The right home for these optimizations is the codegen
+    // sites in core/formatting.ts and friends — out of scope for embed.)
+    // 5. Minify inline scripts. mviz emits chart init code with indentation
+    //    + blank lines for human readability; embed hosts don't need that,
+    //    and every byte costs latency (especially when a language model is
+    //    re-emitting the captured output verbatim).
+    out = minifyInlineScripts(out);
+    // 6. Collapse trivial whitespace between top-level elements (line breaks
+    //    + leading indentation outside of <script>/<style> blocks).
+    out = collapseElementWhitespace(out);
+    return out.trim();
+}
+/**
+ * Lift any `createElement('style')` + `head.appendChild` IIFEs into the
+ * main inline <style> block. mviz emits the table sortable styles via a
+ * runtime injection IIFE; in fragment mode we can hoist them so the styles
+ * are present at parse time (no FOUC) and the IIFE bytes vanish.
+ *
+ * Pattern matched (after JS minification):
+ *   (function(){var s=document.createElement('style');s.textContent="…";document.head.appendChild(s);})();
+ */
+function inlineRuntimeStyleInjection(html) {
+    // Find the first <style>…</style> block we can merge into. If none, bail.
+    const styleMatch = /<style>([\s\S]*?)<\/style>/i.exec(html);
+    if (!styleMatch)
+        return html;
+    const iifeRe = /\(function\(\)\{\s*var\s+\w+\s*=\s*document\.createElement\(\s*['"]style['"]\s*\)\s*;\s*\w+\.textContent\s*=\s*("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')\s*;\s*document\.head\.appendChild\(\s*\w+\s*\)\s*;?\s*\}\)\(\);?/g;
+    const extracted = [];
+    const stripped = html.replace(iifeRe, (_m, literal) => {
+        // Unescape the JS string literal into raw CSS text.
+        const css = jsLiteralToString(literal);
+        extracted.push(css);
+        return '';
+    });
+    if (extracted.length === 0)
+        return html;
+    const mergedCss = styleMatch[1] + '\n' + extracted.join('\n');
+    return stripped.replace(/<style>[\s\S]*?<\/style>/i, `<style>${mergedCss}</style>`);
+}
+/**
+ * Convert a JS string literal (with surrounding quotes + escape sequences)
+ * back to its raw value. Handles \n, \t, \r, \\, \', \", \uXXXX, octal-free.
+ */
+function jsLiteralToString(literal) {
+    // Strip the surrounding quote.
+    const quote = literal[0];
+    if (quote !== '"' && quote !== "'")
+        return literal;
+    const body = literal.slice(1, -1);
+    let out = '';
+    for (let i = 0; i < body.length; i++) {
+        const c = body[i];
+        if (c !== '\\') {
+            out += c;
+            continue;
+        }
+        const next = body[i + 1] ?? '';
+        if (next === 'n') {
+            out += '\n';
+            i++;
+        }
+        else if (next === 't') {
+            out += '\t';
+            i++;
+        }
+        else if (next === 'r') {
+            out += '\r';
+            i++;
+        }
+        else if (next === '\\') {
+            out += '\\';
+            i++;
+        }
+        else if (next === "'") {
+            out += "'";
+            i++;
+        }
+        else if (next === '"') {
+            out += '"';
+            i++;
+        }
+        else if (next === 'u' && body.length >= i + 6) {
+            const code = parseInt(body.slice(i + 2, i + 6), 16);
+            if (!isNaN(code)) {
+                out += String.fromCharCode(code);
+                i += 5;
+            }
+            else {
+                out += next;
+                i++;
+            }
+        }
+        else {
+            out += next;
+            i++;
+        }
+    }
+    return out;
+}
+/**
+ * Drop the ECharts CDN `<script src>` tag when no `echarts.init` call
+ * survives the earlier transforms — i.e. table-only / KPI-only dashboards
+ * that don't actually need ECharts. Embeds that DO use charts keep the
+ * full `echarts.min.js` bundle (no variant downsizing — embed consumers
+ * usually want feature parity with the standalone report).
+ */
+function dropEchartsScriptIfUnused(html) {
+    if (/\becharts\.init\b/.test(html))
+        return html;
+    return html.replace(/<script src="[^"]*echarts[^"]*"><\/script>\s*/gi, '');
+}
+/**
+ * Drop the `marked.min.js` CDN `<script>` tag when no `marked.parse(...)`
+ * caller survives. textarea / note / text components emit inline scripts
+ * that call `marked.parse`, so we cannot blanket-strip the script in embed
+ * mode — that would leave the inline scripts throwing `ReferenceError`.
+ */
+function dropMarkedScriptIfUnused(html) {
+    if (/\bmarked\.parse\s*\(/.test(html))
+        return html;
+    return html.replace(/<script src="[^"]*marked[^"]*"><\/script>\s*/gi, '');
+}
+/**
+ * Drop the sparkline tooltip JS (`.spark-hit` `mouseenter`/`mouseleave`
+ * handlers) when no `.spark-hit` element survives in the body. Tables
+ * with sparkline columns DO emit `.spark-hit` rectangles and need this
+ * script to react to hovers — so this can't be blanket-stripped in
+ * embed mode. Same shape as the marked / ECharts script drops.
+ */
+function dropSparklineTooltipIfUnused(html) {
+    // The listener script itself references `spark-hit` as a querySelector
+    // argument, so a plain substring check would always match. Mask out
+    // <script> bodies first and check for `spark-hit` references in the
+    // remaining markup (table cells emit it as a class).
+    const withoutScripts = html.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, '');
+    if (/\bspark-hit\b/.test(withoutScripts))
+        return html;
+    // The listener is bracketed by distinctive comment markers emitted by
+    // `generateDashboardHtml` (see templates.ts). Markers avoid the problem
+    // of matching nested `});` inside the arrow-function body with a
+    // non-balanced regex.
+    return html.replace(/\/\/\s*---\s*mviz sparkline tooltip start\s*---[\s\S]*?\/\/\s*---\s*mviz sparkline tooltip end\s*---\s*/g, '');
+}
+/**
+ * Prune unused CSS rules from the inline `<style>` block, then minify the
+ * remaining CSS by collapsing whitespace.
+ *
+ * Heuristic — for each top-level rule (including those inside `@media`):
+ *   - Extract the class names referenced in the selector list.
+ *   - If at least one is present in the body HTML (or in a known
+ *     always-keep list like `:root`, `html`, `body`, `*`, `@media`), keep
+ *     the rule. Otherwise drop it.
+ *
+ * Then collapse runs of whitespace to single spaces, and strip whitespace
+ * adjacent to CSS punctuation (`{`, `}`, `;`, `:`, `,`).
+ */
+function pruneAndMinifyStyle(html) {
+    const styleRe = /<style>([\s\S]*?)<\/style>/i;
+    const m = styleRe.exec(html);
+    if (!m)
+        return html;
+    const css = m[1] ?? '';
+    // Body content for class-presence checks: everything between </style> and
+    // the trailing scripts. We include the whole post-style remainder so chart
+    // `<div id="…">` class hints on grid-item rows are caught.
+    const body = html.slice(m.index + m[0].length);
+    const classesInBody = collectClassNames(body);
+    const pruned = pruneCssRules(css, classesInBody);
+    const minified = minifyCss(pruned);
+    return html.slice(0, m.index) + `<style>${minified}</style>` + body;
+}
+/** Collect all `class="…"` tokens from an HTML body. */
+function collectClassNames(body) {
+    const out = new Set();
+    const classAttrRe = /\bclass\s*=\s*"([^"]*)"/g;
+    let cm;
+    while ((cm = classAttrRe.exec(body)) !== null) {
+        for (const cls of (cm[1] ?? '').split(/\s+/)) {
+            if (cls)
+                out.add(cls);
+        }
+    }
+    return out;
+}
+/** Always-keep selector prefixes/keywords that have no class to test. */
+const KEEP_PREFIXES = [':root', '*', 'html', 'body', '@media', '@keyframes', '@font-face', '@supports', '@import'];
+function pruneCssRules(css, classes) {
+    // Split CSS into top-level rules: a selector list up to a `{`, then a
+    // balanced body up to the matching `}`. Handle @media by recursively
+    // pruning its inner rules with the same class set.
+    const out = [];
+    let i = 0;
+    while (i < css.length) {
+        // Skip whitespace.
+        while (i < css.length && /\s/.test(css[i] ?? ''))
+            i++;
+        if (i >= css.length)
+            break;
+        // Comment.
+        if (css.startsWith('/*', i)) {
+            const end = css.indexOf('*/', i + 2);
+            i = end === -1 ? css.length : end + 2;
+            continue;
+        }
+        // Find the next `{` (selector end) or `;` (at-rule like @import).
+        const braceIdx = css.indexOf('{', i);
+        const semiIdx = css.indexOf(';', i);
+        if (braceIdx === -1 || (semiIdx !== -1 && semiIdx < braceIdx)) {
+            // Standalone at-rule like `@import url(…);` — keep it.
+            const ruleEnd = semiIdx === -1 ? css.length : semiIdx + 1;
+            out.push(css.slice(i, ruleEnd));
+            i = ruleEnd;
+            continue;
+        }
+        const selector = css.slice(i, braceIdx).trim();
+        // Find balanced closing brace.
+        let depth = 1;
+        let j = braceIdx + 1;
+        while (j < css.length && depth > 0) {
+            const ch = css[j];
+            if (ch === '{')
+                depth++;
+            else if (ch === '}')
+                depth--;
+            if (depth > 0)
+                j++;
+        }
+        const body = css.slice(braceIdx + 1, j);
+        i = j + 1;
+        if (selector.startsWith('@media') || selector.startsWith('@supports')) {
+            // Recurse: prune inner rules with the same class set.
+            const innerPruned = pruneCssRules(body, classes).trim();
+            if (innerPruned)
+                out.push(`${selector} { ${innerPruned} }`);
+            continue;
+        }
+        if (selector.startsWith('@')) {
+            // Other at-rules (@keyframes, @font-face): keep as-is.
+            out.push(`${selector} {${body}}`);
+            continue;
+        }
+        if (selectorMatchesAnyClass(selector, classes)) {
+            out.push(`${selector} {${body}}`);
+        }
+        // else: drop the rule.
+    }
+    return out.join('\n');
+}
+/**
+ * Decide whether a selector list should be kept given the set of classes
+ * actually present in the body. Selectors with no class reference (e.g. `*`,
+ * `html, body`, `:root`) are always kept. A selector list is kept if at
+ * least one comma-separated selector references a present class, or if any
+ * selector has no class reference at all (it targets tags / ids / globals).
+ */
+function selectorMatchesAnyClass(selectorList, classes) {
+    const selectors = selectorList.split(',').map((s) => s.trim());
+    for (const sel of selectors) {
+        if (KEEP_PREFIXES.some((p) => sel.startsWith(p)))
+            return true;
+        const classRefs = [...sel.matchAll(/\.([A-Za-z_][\w-]*)/g)].map((m) => m[1] ?? '');
+        if (classRefs.length === 0) {
+            // No class reference — targets a tag or id selector. Keep.
+            return true;
+        }
+        // Keep only if every required class in this selector is present.
+        if (classRefs.every((c) => classes.has(c)))
+            return true;
+    }
+    return false;
+}
+function minifyCss(css) {
+    return css
+        .replace(/\/\*[\s\S]*?\*\//g, '') // comments
+        .replace(/\s+/g, ' ') // collapse whitespace
+        .replace(/\s*([{}:;,>])\s*/g, '$1') // strip spaces around punctuation
+        .replace(/;}/g, '}') // drop trailing semicolons
+        .trim();
+}
+/**
+ * Apply conservative whitespace minification to every `<script>` block
+ * (skipping `<script src=…>` which has no body). String literals and regex
+ * literals are preserved verbatim; everything else is folded into a single
+ * stream with line comments stripped and run-of-whitespace collapsed.
+ */
+function minifyInlineScripts(html) {
+    return html.replace(/<script>([\s\S]*?)<\/script>/gi, (_match, body) => {
+        return `<script>${minifyJs(body)}</script>`;
+    });
+}
+/**
+ * Conservative JS whitespace minifier. Walks the source character-by-character
+ * so it can leave string and regex literals untouched. Strips:
+ *   - `// line comments` (to end of line)
+ *   - `/* block comments * /`
+ *   - leading/trailing whitespace
+ *   - runs of whitespace (collapsed to single space, or removed entirely when
+ *     adjacent to non-identifier punctuation)
+ *
+ * Does NOT do symbol renaming or dead-code elimination — purely whitespace.
+ */
+function minifyJs(src) {
+    const out = [];
+    const n = src.length;
+    let i = 0;
+    const isWs = (c) => c === ' ' || c === '\t' || c === '\n' || c === '\r';
+    const isIdent = (c) => /[A-Za-z0-9_$]/.test(c);
+    while (i < n) {
+        const c = src[i] ?? '';
+        const c1 = src[i + 1] ?? '';
+        // Line comment.
+        if (c === '/' && c1 === '/') {
+            while (i < n && src[i] !== '\n')
+                i++;
+            continue;
+        }
+        // Block comment.
+        if (c === '/' && c1 === '*') {
+            const end = src.indexOf('*/', i + 2);
+            i = end === -1 ? n : end + 2;
+            continue;
+        }
+        // String literal — copy verbatim, honoring escapes.
+        if (c === '"' || c === "'" || c === '`') {
+            const quote = c;
+            out.push(quote);
+            i++;
+            while (i < n) {
+                const ch = src[i] ?? '';
+                out.push(ch);
+                if (ch === '\\') {
+                    // Copy the escaped char (if any) and continue.
+                    if (i + 1 < n) {
+                        out.push(src[i + 1] ?? '');
+                        i += 2;
+                        continue;
+                    }
+                }
+                i++;
+                if (ch === quote)
+                    break;
+            }
+            continue;
+        }
+        // Whitespace — collapse to a single space, but drop entirely when both
+        // neighbours are non-identifier punctuation (`,`, `;`, `{`, `}`, etc.).
+        if (isWs(c)) {
+            let j = i;
+            while (j < n && isWs(src[j] ?? ''))
+                j++;
+            const prev = out.length > 0 ? (out[out.length - 1] ?? '') : '';
+            const next = src[j] ?? '';
+            if (prev && next && (isIdent(prev) || prev === ')' || prev === ']') && (isIdent(next) || next === '/')) {
+                // Need a separator to avoid token merging (e.g. `var x` → `varx`).
+                out.push(' ');
+            }
+            i = j;
+            continue;
+        }
+        out.push(c);
+        i++;
+    }
+    return out.join('').trim();
+}
+/**
+ * Collapse the line breaks + leading indentation that mviz uses between
+ * top-level elements in its templates. Conservative — only strips runs of
+ * `\n` + spaces that sit *between* tags. Leaves whitespace inside `<script>`,
+ * `<style>`, `<pre>`, and `<textarea>` alone.
+ */
+function collapseElementWhitespace(html) {
+    // Protect <pre>, <textarea>, <script>, <style> blocks so we don't touch
+    // their contents. Sub them out, collapse, then put back. The placeholder
+    // uses a printable marker keyed by a per-call random nonce — so user
+    // content that happens to contain a literal `__MVIZ_PROTECT_…__` string
+    // can't accidentally get replaced by the restore pass. (The plain-text
+    // form also keeps the source file from being misclassified as binary by
+    // tools like rg/file — an earlier draft used literal NUL bytes.)
+    const protectedBlocks = [];
+    const nonce = randomNonce();
+    const protectRe = /<(script|style|pre|textarea)\b[^>]*>[\s\S]*?<\/\1>/gi;
+    const placeholder = (idx) => `__MVIZ_PROTECT_${nonce}_${idx}__`;
+    const masked = html.replace(protectRe, (m) => {
+        protectedBlocks.push(m);
+        return placeholder(protectedBlocks.length - 1);
+    });
+    const collapsed = masked.replace(/>\s+</g, '><').trim();
+    const restoreRe = new RegExp(`__MVIZ_PROTECT_${nonce}_(\\d+)__`, 'g');
+    return collapsed.replace(restoreRe, (_m, n) => {
+        return protectedBlocks[parseInt(n, 10)] ?? '';
+    });
+}
+//# sourceMappingURL=embed-postprocess.js.map

package/dist/layout/dispatcher.d.ts

@@ -4,11 +4,6 @@
  * Routes chart/component specs to the appropriate generator.
  */
 import type { ChartSpec, ComponentSpec } from '../types.js';
-export interface GenerateOptions {
-    /** Emit a self-contained HTML fragment (no DOCTYPE/html/head/body) suitable
-     *  for embedding inside hosts like claude.ai's `visualize:show_widget`. */
-    fragment?: boolean;
-}
 import '../charts/index.js';
 import '../components/index.js';
 /**
@@ -21,11 +16,11 @@ export declare function isAsyncChartType(type: string): boolean;
  * Note: This will throw an error for async chart types (like mermaid).
  * Use generateChartAsync for those.
  */
-export declare function generateChart(spec: ChartSpec | ComponentSpec, options?: GenerateOptions): string;
+export declare function generateChart(spec: ChartSpec | ComponentSpec): string;
 /**
  * Generate HTML output for a chart or component spec (async version)
  *
  * This handles both sync and async chart types.
  */
-export declare function generateChartAsync(spec: ChartSpec | ComponentSpec, options?: GenerateOptions): Promise<string>;
+export declare function generateChartAsync(spec: ChartSpec | ComponentSpec): Promise<string>;
 //# sourceMappingURL=dispatcher.d.ts.map

package/dist/layout/dispatcher.js

@@ -7,7 +7,6 @@ import { CHART_REGISTRY, ASYNC_CHART_REGISTRY } from '../charts/registry.js';
 import { COMPONENT_REGISTRY } from '../components/registry.js';
 import { convertColumnarFormat } from './converter.js';
 import { UnknownComponentType } from '../core/exceptions.js';
-import { toFragment } from '../core/fragment.js';
 // Import chart and component modules to trigger registration
 import '../charts/index.js';
 import '../components/index.js';
@@ -37,7 +36,7 @@ export function isAsyncChartType(type) {
  * Note: This will throw an error for async chart types (like mermaid).
  * Use generateChartAsync for those.
  */
-export function generateChart(spec, options = {}) {
+export function generateChart(spec) {
     // Convert columnar format if needed
     const converted = convertColumnarFormat(spec);
     const type = converted.type;
@@ -45,7 +44,7 @@ export function generateChart(spec, options = {}) {
     if (ASYNC_CHART_REGISTRY.has(type)) {
         throw new Error(`Chart type '${type}' requires async rendering. Use generateChartAsync instead.`);
     }
-    return finalize(dispatchSync(type, converted), options);
+    return dispatchSync(type, converted);
 }
 function dispatchSync(type, converted) {
     // Try chart registry first
@@ -62,24 +61,21 @@ function dispatchSync(type, converted) {
     const suggestions = getSimilarTypes(type);
     throw new UnknownComponentType(type, suggestions);
 }
-function finalize(html, options) {
-    return options.fragment ? toFragment(html) : html;
-}
 /**
  * Generate HTML output for a chart or component spec (async version)
  *
  * This handles both sync and async chart types.
  */
-export async function generateChartAsync(spec, options = {}) {
+export async function generateChartAsync(spec) {
     // Convert columnar format if needed
     const converted = convertColumnarFormat(spec);
     const type = converted.type;
     // Try async chart registry first
     const asyncChartGenerator = ASYNC_CHART_REGISTRY.get(type);
     if (asyncChartGenerator) {
-        return finalize(await asyncChartGenerator(converted), options);
+        return asyncChartGenerator(converted);
     }
     // Fall back to sync paths
-    return finalize(dispatchSync(type, converted), options);
+    return dispatchSync(type, converted);
 }
 //# sourceMappingURL=dispatcher.js.map

package/dist/layout/markdown-parser.js

@@ -35,7 +35,6 @@ function createDefaultFrontmatter(lines, baseTheme) {
         orientation: 'portrait',
         printMode: false,
         embed: false,
-        fragment: false,
         currency: undefined,
         remainingLines: lines,
         frontmatterEndLine: 0,
@@ -72,8 +71,6 @@ function applyFrontmatterLine(target, line) {
         target.printMode = isTruthy(val);
     else if (key === 'embed')
         target.embed = isTruthy(val);
-    else if (key === 'fragment')
-        target.fragment = isTruthy(val);
     else if (key === 'currency')
         target.currency = val.toUpperCase();
 }

package/dist/layout/parser-types.d.ts

@@ -18,13 +18,11 @@ export interface ParsedFrontmatter {
     continuous: boolean;
     orientation: PageOrientation;
     printMode: boolean;
-    /** When true, omit page chrome (red bar, title row, theme toggle) so the
-     *  output can be embedded inside another host (e.g. a small iframe tile). */
+    /** When true, omit page chrome (red bar, title row, theme toggle) and
+     *  run the embed post-processes (CSS prune, ECharts right-size, JS
+     *  minify, transparent backgrounds, etc.) so the output can be embedded
+     *  inside another host's frame (e.g. iframe tiles, dashboard cells). */
     embed: boolean;
-    /** When true, emit a self-contained HTML fragment with no
-     *  `<!DOCTYPE>`/`<html>`/`<head>`/`<body>` wrappers. Implies `embed`.
-     *  Designed for hosts like claude.ai's `visualize:show_widget`. */
-    fragment: boolean;
     currency: string | undefined;
     /** Lines of the markdown body after the closing `---`. */
     remainingLines: string[];

package/dist/layout/parser.d.ts

@@ -25,11 +25,11 @@ export type { MermaidBlock, ParseResult } from './parser-types.js';
  * Synchronous variant — mermaid blocks are emitted as placeholders and must be
  * resolved by `parseMarkdownToDashboardAsync` for final rendering.
  */
-export declare function parseMarkdownToDashboard(markdown: string, baseTheme?: string, baseDir?: string, strict?: boolean, testMode?: boolean, customTheme?: CustomTheme, lintMode?: 'generate' | 'lint', embedOverride?: boolean, fragmentOverride?: boolean): ParseResult;
+export declare function parseMarkdownToDashboard(markdown: string, baseTheme?: string, baseDir?: string, strict?: boolean, testMode?: boolean, customTheme?: CustomTheme, lintMode?: 'generate' | 'lint', embedOverride?: boolean): ParseResult;
 /**
  * Async variant that resolves mermaid placeholders to inline SVG.
  */
-export declare function parseMarkdownToDashboardAsync(markdown: string, baseTheme?: string, baseDir?: string, strict?: boolean, testMode?: boolean, customTheme?: CustomTheme, lintMode?: 'generate' | 'lint', embedOverride?: boolean, fragmentOverride?: boolean): Promise<{
+export declare function parseMarkdownToDashboardAsync(markdown: string, baseTheme?: string, baseDir?: string, strict?: boolean, testMode?: boolean, customTheme?: CustomTheme, lintMode?: 'generate' | 'lint', embedOverride?: boolean): Promise<{
     html: string;
     errors: string[];
 }>;

package/dist/layout/parser.js

@@ -18,7 +18,7 @@
  */
 import { renderMermaid, renderMermaidAscii } from 'beautiful-mermaid';
 import { getThemeColors } from '../core/themes.js';
-import { toFragment } from '../core/fragment.js';
+import { postProcessEmbed } from '../core/embed-postprocess.js';
 import { generateDashboardHtml, generateTestHarnessHtml, generateTestHarnessJs } from './templates.js';
 import { parseFrontmatter, parseMarkdown } from './markdown-parser.js';
 import { loadSections } from './block-loader.js';
@@ -30,7 +30,7 @@ import { renderSections } from './renderer.js';
  * Synchronous variant — mermaid blocks are emitted as placeholders and must be
  * resolved by `parseMarkdownToDashboardAsync` for final rendering.
  */
-export function parseMarkdownToDashboard(markdown, baseTheme = 'light', baseDir, strict = false, testMode = false, customTheme, lintMode = 'generate', embedOverride = false, fragmentOverride = false) {
+export function parseMarkdownToDashboard(markdown, baseTheme = 'light', baseDir, strict = false, testMode = false, customTheme, lintMode = 'generate', embedOverride = false) {
     // 1. Parse: markdown -> raw IR
     const parsed = parseMarkdown(markdown, baseTheme);
     const { frontmatter, sections: rawSections, pageTitle } = parsed;
@@ -50,24 +50,28 @@ export function parseMarkdownToDashboard(markdown, baseTheme = 'light', baseDir,
     });
     errors.push(...layoutResult.errors);
     // 4. Render: IR -> componentsHtml + scripts (+ collect test items, mermaid blocks)
-    const fragmentMode = frontmatter.fragment || fragmentOverride;
+    //    Embed flag is ignored in testMode — the visual test harness has its
+    //    own theme toggle which relies on full chart options (window.chartInstances
+    //    / window.chartOptions populated). Embed-mode chart scripts skip those,
+    //    so honoring `embed: true` here would silently break the harness toggle.
+    const embedMode = (frontmatter.embed || embedOverride) && !testMode;
     const renderOpts = {
         theme: frontmatter.theme,
         testMode,
-        fragment: fragmentMode,
+        embed: embedMode,
     };
     if (customTheme)
         renderOpts.customTheme = customTheme;
     if (frontmatter.currency)
         renderOpts.currency = frontmatter.currency;
     const rendered = renderSections(loaded.sections, renderOpts);
-    // 5. Assemble final page. Fragment mode implies embed (no chrome inside a
-    //    fragment — hosts supply their own framing).
-    const embedMode = fragmentMode || frontmatter.embed || embedOverride;
+    // 5. Assemble final page. Embed mode drops the page chrome (red bar,
+    //    title row, theme toggle) and runs a battery of post-processes that
+    //    shrink + lean the body for iframe-embedded contexts.
     const fullDoc = testMode
         ? assembleTestHarness(pageTitle, frontmatter.theme, rendered.componentsHtml, rendered.chartScripts, rendered.testItems)
-        : generateDashboardHtml(pageTitle, [rendered.componentsHtml], [rendered.chartScripts], frontmatter.theme, '', frontmatter.continuous, customTheme, frontmatter.orientation, embedMode, fragmentMode);
-    const html = fragmentMode ? toFragment(fullDoc) : fullDoc;
+        : generateDashboardHtml(pageTitle, [rendered.componentsHtml], [rendered.chartScripts], frontmatter.theme, '', frontmatter.continuous, customTheme, frontmatter.orientation, embedMode);
+    const html = embedMode ? postProcessEmbed(fullDoc) : fullDoc;
     return { html, errors, mermaidBlocks: rendered.mermaidBlocks };
 }
 /**
@@ -96,8 +100,8 @@ function buildNav(typesCount) {
 /**
  * Async variant that resolves mermaid placeholders to inline SVG.
  */
-export async function parseMarkdownToDashboardAsync(markdown, baseTheme = 'light', baseDir, strict = false, testMode = false, customTheme, lintMode = 'generate', embedOverride = false, fragmentOverride = false) {
-    const result = parseMarkdownToDashboard(markdown, baseTheme, baseDir, strict, testMode, customTheme, lintMode, embedOverride, fragmentOverride);
+export async function parseMarkdownToDashboardAsync(markdown, baseTheme = 'light', baseDir, strict = false, testMode = false, customTheme, lintMode = 'generate', embedOverride = false) {
+    const result = parseMarkdownToDashboard(markdown, baseTheme, baseDir, strict, testMode, customTheme, lintMode, embedOverride);
     if (result.mermaidBlocks.length === 0) {
         return { html: result.html, errors: result.errors };
     }

package/dist/layout/renderer.d.ts

@@ -18,8 +18,9 @@ export interface RenderOptions {
     customTheme?: CustomTheme;
     currency?: string;
     /** When true, emit slimmer chart scripts (no light/dark options dict, no
-     *  body-class theme check) for fragment output (issue #247). */
-    fragment?: boolean;
+     *  body-class theme check) for embed output. Embed widgets are one-shot
+     *  snapshots — no theme toggle to react to. */
+    embed?: boolean;
 }
 export interface RenderResult {
     componentsHtml: string;

package/dist/layout/renderer.js

@@ -111,7 +111,7 @@ function renderByType(compType, spec, args, ctx) {
     return renderSimpleComponent(compType, spec, args, ctx);
 }
 function renderEchartsAndCollect(compType, spec, args, ctx) {
-    const { html, script } = renderEchartsComponent(compType, spec, args.chartId, args.colSpan, args.itemHeight, args.anchorId, ctx.options.customTheme, ctx.options.fragment ?? false, ctx.options.theme === 'dark' ? 'dark' : 'light');
+    const { html, script } = renderEchartsComponent(compType, spec, args.chartId, args.colSpan, args.itemHeight, args.anchorId, ctx.options.customTheme, ctx.options.embed ?? false, ctx.options.theme === 'dark' ? 'dark' : 'light');
     if (!html)
         return `<div class="grid-item"><p>Error rendering ${compType}</p></div>`;
     if (script)
@@ -167,7 +167,7 @@ function trackTestItem(ctx, chartId, compType, spec, section) {
 // =============================================================================
 // ECharts component rendering
 // =============================================================================
-function renderEchartsComponent(compType, spec, chartId, colSpan, itemHeight, anchorId, customTheme, fragment = false, baseTheme = 'light') {
+function renderEchartsComponent(compType, spec, chartId, colSpan, itemHeight, anchorId, customTheme, embed = false, baseTheme = 'light') {
     const title = spec.title ?? '';
     const titleHtml = title ? `<h3 class="chart-title">${escapeHtml(title)}</h3>` : '';
     const builder = getOptionsBuilder(compType);
@@ -175,43 +175,43 @@ function renderEchartsComponent(compType, spec, chartId, colSpan, itemHeight, an
         return { html: null, script: null };
     const chartHeight = itemHeight - (title ? 24 : 0);
     const fontFamily = getFontsWithCustom(customTheme).family;
-    // Fragment mode also drops JSON pretty-print indentation — every byte the
-    // model has to emit verbatim costs latency in widget-host scenarios.
-    const optionJsonLight = buildEchartsOption(spec, baseTheme, chartHeight, customTheme, fontFamily, builder, fragment);
+    // Embed mode also drops JSON pretty-print indentation — every byte costs
+    // bandwidth + parse time inside the embedding host's iframe.
+    const optionJsonLight = buildEchartsOption(spec, baseTheme, chartHeight, customTheme, fontFamily, builder, embed);
     if (!optionJsonLight)
         return { html: null, script: null };
-    // Skip the dark variant entirely in fragment mode — fragments are one-shot
-    // snapshots, not theme-switchable surfaces. ~3KB of JSON per chart saved.
-    const optionJsonDark = fragment ? null : buildEchartsOption(spec, 'dark', chartHeight, customTheme, fontFamily, builder, false);
+    // Skip the dark variant entirely in embed mode — embed widgets are one-shot
+    // snapshots, not theme-switchable surfaces. ~3 KB of JSON per chart saved.
+    const optionJsonDark = embed ? null : buildEchartsOption(spec, 'dark', chartHeight, customTheme, fontFamily, builder, false);
     const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
     const html = `
     <div class="grid-item"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
       ${titleHtml}
       <div id="${chartId}" style="width: 100%; height: ${chartHeight}px;"></div>
     </div>`;
-    return { html, script: generateChartScript(chartId, optionJsonLight, optionJsonDark, fragment) };
+    return { html, script: generateChartScript(chartId, optionJsonLight, optionJsonDark, embed) };
 }
 function buildEchartsOption(spec, theme, chartHeight, customTheme, fontFamily, builder, 
-// Drop pretty-print indentation when true — used for fragment outputs to
-// shrink what downstream tools (and language models) have to emit verbatim.
+// Drop pretty-print indentation when true — used for embed outputs to
+// shrink what the host iframe has to parse.
 minify = false) {
     const themedSpec = { ...spec, theme, height: chartHeight, customTheme };
     const option = builder(themedSpec);
     if (!option)
         return null;
-    // Skip the per-chart fontFamily injection in fragment mode — SVG inherits
-    // from the parent container (and ECharts renders SVG in mviz). Saves ~50
-    // bytes per chart per option object that downstream tools have to emit.
+    // Skip the per-chart fontFamily injection in embed mode — SVG inherits
+    // from the parent container (and ECharts renders SVG in mviz). Saves
+    // ~50 bytes per chart per option object.
     if (!minify) {
         option.textStyle = { ...(option.textStyle ?? {}), fontFamily };
     }
     return serializeOption(option, { pretty: !minify });
 }
-function generateChartScript(chartId, optionJsonLight, optionJsonDark, fragment = false) {
-    // Fragment mode: drop the chartOptions dict and the dark variant entirely.
-    // Fragment outputs are one-shot snapshots — no theme toggle button, no
+function generateChartScript(chartId, optionJsonLight, optionJsonDark, embed = false) {
+    // Embed mode: drop the chartOptions dict and the dark variant entirely.
+    // Embed widgets are one-shot snapshots — no theme toggle button, no
     // host-driven theme swap to react to — so the light option is what renders.
-    if (fragment) {
+    if (embed) {
         return `
     (function() {
       var chart = echarts.init(document.getElementById('${chartId}'), null, {renderer: 'svg'});

package/dist/layout/templates.d.ts

@@ -9,11 +9,11 @@ export declare function escapeHtml(text: string): string;
 /**
  * Generate the dashboard CSS with theme variables.
  */
-export declare function generateDashboardCss(customTheme?: CustomTheme, orientation?: PageOrientation, fragment?: boolean): string;
+export declare function generateDashboardCss(customTheme?: CustomTheme, orientation?: PageOrientation, embed?: boolean): string;
 /**
  * Generate complete dashboard HTML.
  */
-export declare function generateDashboardHtml(pageTitle: string, componentsHtml: string[], chartScripts: string[], theme?: string, extraScripts?: string, continuous?: boolean, customTheme?: CustomTheme, orientation?: PageOrientation, embed?: boolean, fragment?: boolean): string;
+export declare function generateDashboardHtml(pageTitle: string, componentsHtml: string[], chartScripts: string[], theme?: string, extraScripts?: string, continuous?: boolean, customTheme?: CustomTheme, orientation?: PageOrientation, embed?: boolean): string;
 /**
  * Generate CSS for the test harness.
  */

package/dist/layout/templates.js

@@ -17,17 +17,18 @@ export function escapeHtml(text) {
 /**
  * Generate the dashboard CSS with theme variables.
  */
-export function generateDashboardCss(customTheme, orientation = 'portrait', fragment = false) {
+export function generateDashboardCss(customTheme, orientation = 'portrait', embed = false) {
     const colorsLight = getThemeColorsWithCustom('light', customTheme);
     const colorsDark = getThemeColorsWithCustom('dark', customTheme);
     const paletteLight = getPaletteWithCustom('light', customTheme);
     const fonts = getFontsWithCustom(customTheme);
     const linkColor = getLinkColor();
     const dashboardMaxWidth = orientation === 'landscape' ? PRINT_LANDSCAPE_WIDTH : PRINT_PORTRAIT_WIDTH;
-    // Fragment mode (issue #247) — skip the Google Fonts `@import` (the host
-    // already supplies its own font stack and the network roundtrip is wasted)
-    // and the print stylesheet (irrelevant in widget hosts).
-    const fontImport = fragment ? '' : `@import url('${fonts.import}');`;
+    // Embed mode (issues #272 / #247) — skip the Google Fonts `@import` (the
+    // host already supplies its own font stack and the network roundtrip is
+    // wasted) and the print stylesheet (irrelevant inside iframe-embedded
+    // widgets).
+    const fontImport = embed ? '' : `@import url('${fonts.import}');`;
     return `
     ${fontImport}
     * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -56,7 +57,7 @@ export function generateDashboardCss(customTheme, orientation = 'portrait', frag
 
     html, body {
       width: 100%; min-height: 100%;
-      ${fragment ? '' : 'background-color: var(--bg);'}
+      ${embed ? '' : 'background-color: var(--bg);'}
       font-family: var(--font-family);
       color: var(--text);
       font-size: 12px;
@@ -154,7 +155,7 @@ export function generateDashboardCss(customTheme, orientation = 'portrait', frag
       .row > * { grid-column: span 1; }
       .grid-item { overflow-x: auto; -webkit-overflow-scrolling: touch; }
     }
-    ${fragment ? '' : `@media print {
+    ${embed ? '' : `@media print {
       @page { size: letter ${orientation}; margin: 0.5in; }
       .dashboard { max-width: 100%; padding: 0; }
       .row { gap: 6px; margin-bottom: 6px; break-inside: avoid; page-break-inside: avoid; }
@@ -167,7 +168,7 @@ export function generateDashboardCss(customTheme, orientation = 'portrait', frag
       .title-row { break-after: avoid; page-break-after: avoid; }
     }`}
     .grid-item {
-      ${fragment ? '' : 'background: var(--bg);'}
+      ${embed ? '' : 'background: var(--bg);'}
       padding: 4px;
       transition: background-color 0.3s;
     }
@@ -362,22 +363,24 @@ export function generateDashboardCss(customTheme, orientation = 'portrait', frag
 /**
  * Generate complete dashboard HTML.
  */
-export function generateDashboardHtml(pageTitle, componentsHtml, chartScripts, theme = 'light', extraScripts = '', continuous = false, customTheme, orientation = 'portrait', embed = false, fragment = false) {
+export function generateDashboardHtml(pageTitle, componentsHtml, chartScripts, theme = 'light', extraScripts = '', continuous = false, customTheme, orientation = 'portrait', embed = false) {
     const initialThemeClass = theme === 'dark' ? 'theme-dark' : 'theme-light';
     const continuousClass = continuous ? ' dashboard-continuous' : '';
     const embedClass = embed ? ' dashboard-embed' : '';
-    const css = generateDashboardCss(customTheme, orientation, fragment);
-    // Fragment mode (issue #247) deliberately drops mviz's PNG-export menu and
-    // the theme-toggle function: the menu fights iframe-sandbox host behavior
-    // (document.body mutations, download attribute) and the toggle's button is
-    // already stripped by embed mode, leaving the function orphaned.
-    const exportCss = fragment ? '' : generateExportCss();
-    const exportJs = fragment ? '' : generateExportJs();
-    // marked.min.js is only needed if a markdown/text component is rendered.
-    // Fragment hosts (notably claude.ai's `visualize:show_widget`) rarely use
-    // those, and the script-tag fetch dominates load time. Skip it.
-    const markedScript = fragment ? '' : '<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>';
-    const themeToggleJs = fragment
+    const css = generateDashboardCss(customTheme, orientation, embed);
+    // Embed mode deliberately drops mviz's PNG-export menu and the theme-
+    // toggle function: the menu fights iframe-sandbox host behavior
+    // (document.body mutations, download attribute) and the toggle's button
+    // is already stripped by embed mode, leaving the function orphaned.
+    const exportCss = embed ? '' : generateExportCss();
+    const exportJs = embed ? '' : generateExportJs();
+    // marked.min.js is only needed if a markdown/text component is rendered
+    // (textarea + note + text components emit inline scripts that call
+    // `marked.parse(...)`). For embed mode we always include the script tag
+    // here and let the post-process drop it later — that pass scans the body
+    // for `marked.parse` and only strips when no caller survives.
+    const markedScript = '<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>';
+    const themeToggleJs = embed
         ? ''
         : `// Theme toggle function
     function toggleTheme() {
@@ -445,7 +448,13 @@ export function generateDashboardHtml(pageTitle, componentsHtml, chartScripts, t
 
     ${chartScripts.join('')}
 
-    ${fragment ? '' : `// Sparkline tooltip interactivity
+    // --- mviz sparkline tooltip start ---
+    // Always emitted; the embed post-process drops everything between the
+    // start/end markers when no .spark-hit element survives the rest of
+    // the pipeline, so table sparkline cells in embedded output still get
+    // hover handlers. The markers are a delimiter rather than a regex
+    // brace-walker because the listener has nested closing braces inside
+    // the arrow-function body and a non-balanced regex matches the wrong one.
     document.querySelectorAll('.spark-hit').forEach(hit => {
       hit.addEventListener('mouseenter', function() {
         const tooltip = this.closest('.spark-tooltip');
@@ -459,7 +468,8 @@ export function generateDashboardHtml(pageTitle, componentsHtml, chartScripts, t
           tooltip.setAttribute('data-tooltip', tooltip.dataset.default);
         }
       });
-    });`}
+    });
+    // --- mviz sparkline tooltip end ---
 
     ${exportJs}
   </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mviz",
-  "version": "1.7.0-pre.1",
+  "version": "1.7.0-pre.3",
   "description": "A chart & report builder designed for use by AI.",
   "type": "module",
   "main": "./dist/index.js",