export png minecraft mode isnt displayed properly

[functionstackx]

go to chart and change to minecraft mode and then click export png and the png graph isnt minecraft...

+viz @adibarra

[lalithsagar10]

Currently working on this issue. Started implementation and will share a PR/update soon.

[functionstackx]

@claude can u try fixing this and openning an PR

[github-actions]

Claude finished @functionstackx's task in 16m 3s —— View job

---

Fix: minecraft mode now renders in PNG export

Root cause. useChartExport.ts was pre-supplying fontEmbedCSS to html-to-image by raw-dumping every @font-face rule from document.styleSheets. Those rules contain stylesheet-relative font URLs (e.g. url("../media/Monocraft-…woff2")). Once embedded inside an SVG data URL, those relative URLs have no base to resolve against — and even an absolute URL wouldn't help, because SVG-as-<img> cannot fetch external resources at all. The browser silently falls back to the local("Arial") fallback declared in monocraft Fallback.

In dark/light mode that fallback (Arial in place of DM Sans) is close enough to look right; in minecraft mode it replaces the pixel-perfect Monocraft with regular sans-serif Arial — which is exactly the bug reported here.

Fix. Drop the manual fontEmbedCSS and the now-unused getFontEmbedCSS() helper, so html-to-image's built-in getWebFontCSS runs instead. It walks the cloned subtree, finds the fonts actually used, resolves each font URL against its parent stylesheet's href, and inlines the woff2 as a data URL — so Monocraft genuinely renders inside the exported PNG.

Net diff: 1 file changed, 3 insertions(+), 17 deletions(-).

-/** Collect @font-face rules from all accessible stylesheets */
-function getFontEmbedCSS(): string {
-  const fontFaces: string[] = [];
-  for (const sheet of document.styleSheets) {
-    try {
-      for (const rule of sheet.cssRules || []) {
-        if (rule instanceof CSSFontFaceRule) fontFaces.push(rule.cssText);
-      }
-    } catch {
-      // skip CORS-restricted stylesheets
-    }
-  }
-  return fontFaces.join('\n');
-}
-
…
-      // Capture chart image
+      // Don't pass `fontEmbedCSS`: raw `@font-face` rules keep relative URLs that
+      // can't resolve inside an SVG data URL. Letting html-to-image run its own
+      // `getWebFontCSS` inlines the woff2 as a data URL, so Monocraft renders.
       const { toPng } = await htmlToImagePromise;
       const chartDataUrl = await toPng(exportElement, {
         …
         skipFonts: false,
-        fontEmbedCSS: getFontEmbedCSS(),
         preferredFontFormat: 'woff2',

Verification

End-to-end via Playwright on localhost:3000/inference, exporting the first chart in each theme and rendering the captured data:image/png back into the page:

theme	result
minecraft	now renders Monocraft pixel font + dark #1e1e1e background, matching live theme
dark	unchanged — DM Sans on dark bg
light	unchanged — DM Sans on light bg

Lint / typecheck / unit tests:

• pnpm typecheck ✅
• pnpm lint ✅ (0 warnings, 0 errors)
• pnpm vitest run ✅ (1731/1731 pass across 80 files)
• pnpm exec oxfmt --check packages/app/src/hooks/useChartExport.ts ✅

Push blocked — please open the PR manually

I committed the fix locally on claude/issue-282-20260505-0338 (commit 20f0ae1), but git push returns:

remote: Permission to SemiAnalysisAI/InferenceX-app.git denied to Klaud-Cold.
fatal: unable to access … 403

This GitHub App identity is not authorized to push to this repository, so I can't open the PR myself. The full one-file change is shown in the diff above and can be applied manually.

• Locate minecraft mode and PNG export code
• Diagnose: relative url(...) in @font-face can't resolve in SVG-as-image
• Apply fix in useChartExport.ts (drop fontEmbedCSS, let library inline fonts)
• Verify in browser: PNG export in light / dark / minecraft
• Run typecheck / lint / unit tests — all green
• Push & open PR — blocked by GitHub App permissions (Klaud-Cold cannot push to SemiAnalysisAI/InferenceX-app)
  · Branch (commit not yet visible on remote because the push was rejected)

[functionstackx]

@claude retry again, you got correct perms now

[github-actions]

Claude finished @functionstackx's task in 2m 12s —— View job • claude/issue-282-20260505-0421

---

Fix pushed: minecraft mode now renders in PNG export

• Read useChartExport.ts
• Apply the fix (drop fontEmbedCSS, remove getFontEmbedCSS() helper)
• Run typecheck / lint / unit tests
• Commit & push to claude/issue-282-20260505-0421

Root cause

useChartExport.ts was pre-supplying fontEmbedCSS to html-to-image by raw-dumping every @font-face rule from document.styleSheets. Those rules contain stylesheet-relative font URLs (e.g. url("../media/Monocraft-…woff2")). Once embedded inside an SVG data URL, those relative URLs have no base to resolve against — and SVG-as-<img> cannot fetch external resources at all. The browser silently fell back to the local("Arial") fallback declared in monocraft Fallback — close enough in dark/light mode, but in minecraft mode it replaced pixel-perfect Monocraft with sans-serif Arial.

Fix

Drop the manual fontEmbedCSS and the now-unused getFontEmbedCSS() helper, so html-to-image's built-in getWebFontCSS runs instead. It walks the cloned subtree, resolves each font URL against its parent stylesheet's href, and inlines the woff2 as a data URL — so Monocraft genuinely renders inside the exported PNG.

-/** Collect @font-face rules from all accessible stylesheets */
-function getFontEmbedCSS(): string { … }
…
-      // Capture chart image
+      // Don't pass `fontEmbedCSS`: raw `@font-face` rules keep relative URLs that
+      // can't resolve inside an SVG data URL. Letting html-to-image run its own
+      // `getWebFontCSS` inlines the woff2 as a data URL, so Monocraft renders.
       const { toPng } = await htmlToImagePromise;
       const chartDataUrl = await toPng(exportElement, {
         …
         skipFonts: false,
-        fontEmbedCSS: getFontEmbedCSS(),
         preferredFontFormat: 'woff2',

Net: 1 file changed, 3 insertions(+), 17 deletions(-).

Checks

• pnpm typecheck ✅
• pnpm lint ✅ (0 warnings, 0 errors)
• pnpm exec oxfmt --check on useChartExport.ts ✅
• packages/app unit tests: 1731/1731 pass across 80 files ✅
• packages/db had 3 pre-existing SSL test failures on master HEAD (635d580) — unrelated to this fix; verified independent of the change.

Per Klaud-Cold's previous run, end-to-end Playwright verification on localhost:3000/inference confirmed: minecraft now renders Monocraft + dark #1e1e1e bg; dark/light themes unchanged.

Create a PR

Branch ·