autokap 1.6.7 → 1.6.8

package/dist/browser-bar.js

@@ -155,11 +155,14 @@ function attr(s) {
 }
 // ── Chrome generator (SVG, for sharp compositing — no Playwright) ──────
 // Produces a self-contained SVG string rasterizable by @resvg/resvg-js.
-/** SF Pro font CSS for embedding inside SVG <defs><style>. No local() — resvg only supports url(). */
-const SVG_BB_FONT_CSS = `
-@font-face{font-family:'SF Pro Text';src:url('${SF_PRO_TEXT_REGULAR}') format('woff2');font-weight:400;font-style:normal}
-@font-face{font-family:'SF Pro Text';src:url('${SF_PRO_TEXT_SEMIBOLD}') format('woff2');font-weight:600;font-style:normal}
-`;
+// SF Pro fonts for the SVG output are NOT embedded inline — Resvg-js 2.6.2
+// does not honor `@font-face url(data:font/woff2;base64,…)` declarations
+// inside an SVG <defs><style> block. They must instead be supplied via the
+// `font.fontFiles` Resvg option, which is the job of
+// `mockup.ts::rasterizeSvg` + `sf-pro-resvg-fonts.ts`. The `font-family`
+// declarations on the <text> elements below remain as a hint for any
+// downstream consumer that DOES honor CSS @font-face (e.g. a future Resvg
+// release, or a different SVG renderer entirely).
 const SVG_BB_FF = "'SF Pro Text',system-ui,sans-serif";
 /**
  * Generate a self-contained SVG string for the Chrome browser bar.
@@ -215,7 +218,6 @@ export function generateChromeBrowserBarSvg(options) {
     // and hide the colored circles underneath.
     return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="0 0 ${iw} ${REF_H}" fill="none">
 <defs>
-<style>${SVG_BB_FONT_CSS}</style>
 <linearGradient id="bb_profile_grad" x1="${profileX + 15}" y1="109.5" x2="${profileX + 15}" y2="79.5" gradientUnits="userSpaceOnUse">
 <stop stop-color="#D5D8E4"/><stop offset="0.45" stop-color="#D1CAD6"/><stop offset="1" stop-color="#B7BAD1"/>
 </linearGradient>

package/dist/mockup.js

@@ -5,6 +5,7 @@ import { fileURLToPath } from 'url';
 import { renderStatusBarBuffer } from './status-bar-render.js';
 import { generateBrowserBarSvg } from './browser-bar.js';
 import { computeMockupLayout } from './mockup-html.js';
+import { getSfProResvgFontFiles } from './sf-pro-resvg-fonts.js';
 import { logger } from './logger.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -415,11 +416,27 @@ export async function getDeviceFrame(id) {
 }
 // ── Sharp Compositing Helpers ──────────────────────────────────────────
 /** Rasterize an SVG string to a PNG buffer using resvg-js.
- *  Resolves external image references (e.g. favicon URLs) before rendering. */
+ *  Resolves external image references (e.g. favicon URLs) before rendering.
+ *
+ *  Font handling: Resvg-js 2.6.2 does NOT read fonts from `@font-face url(data:...)`
+ *  declarations embedded inside the SVG. They MUST be supplied via `font.fontFiles`
+ *  with paths to on-disk TTF/OTF files. Without this, browser-bar text falls back
+ *  to Linux system fonts (DejaVu/Liberation) on Vercel, producing the wrong glyph
+ *  shapes that the user calls "SF Pro fonts don't load". `getSfProResvgFontFiles`
+ *  decompresses the SF Pro woff2 base64 data URIs to TTF in `os.tmpdir()` and
+ *  caches the paths for the lifetime of the function instance.
+ *  `loadSystemFonts: false` keeps the render deterministic across OSes — a font
+ *  load failure produces blank text (loud) instead of fallback (silent). */
 async function rasterizeSvg(svg, width) {
     const { Resvg } = await import('@resvg/resvg-js');
+    const fontFiles = await getSfProResvgFontFiles();
     const opts = {
         fitTo: { mode: 'width', value: width },
+        font: {
+            fontFiles,
+            loadSystemFonts: false,
+            defaultFontFamily: 'SF Pro Text',
+        },
     };
     const resvg = new Resvg(svg, opts);
     // Resolve external image references (e.g. <image href="https://..."/>)

package/dist/safari-browser-bar.js

@@ -17,10 +17,13 @@ const FONT_CSS_HTML = `<style>
 @font-face{font-family:'SF Pro Text';src:local('SF Pro Text'),local('.SFNSText'),url('${SF_PRO_TEXT_REGULAR}') format('woff2');font-weight:400;font-style:normal}
 @font-face{font-family:'SF Pro Text';src:local('SF Pro Text Semibold'),local('.SFNSText-Semibold'),url('${SF_PRO_TEXT_SEMIBOLD}') format('woff2');font-weight:600;font-style:normal}
 </style>`;
-const FONT_CSS_SVG = `
-@font-face{font-family:'SF Pro Text';src:url('${SF_PRO_TEXT_REGULAR}') format('woff2');font-weight:400;font-style:normal}
-@font-face{font-family:'SF Pro Text';src:url('${SF_PRO_TEXT_SEMIBOLD}') format('woff2');font-weight:600;font-style:normal}
-`;
+// SVG output: fonts are NOT embedded inline. Resvg-js 2.6.2 does not honor
+// `@font-face url(data:font/woff2;base64,…)` declarations inside SVG style
+// blocks; fonts must instead be supplied via `font.fontFiles` to the Resvg
+// constructor. The browser-bar pipeline (mockup.ts::rasterizeSvg) loads SF
+// Pro Text from disk via `sf-pro-resvg-fonts.ts`. The `font-family` hint on
+// the URL <text> element below remains for any consumer that DOES honor
+// CSS @font-face (a future Resvg release, a different SVG renderer, etc.).
 const FF = "'SF Pro Text',-apple-system,BlinkMacSystemFont,system-ui,sans-serif";
 // ── Helpers ──────────────────────────────────────────────────────────────
 function escText(s) {
@@ -88,7 +91,6 @@ export function generateSafariBrowserBarSvg(options) {
     const inner = buildSafariSvgInner(url, isDark);
     const vb = SAFARI_TOOLBAR_VIEWBOX;
     return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="${vb.x} ${vb.y} ${vb.width} ${vb.height}" preserveAspectRatio="none" fill="none">
-<defs><style>${FONT_CSS_SVG}</style></defs>
 ${inner}
 </svg>`;
 }

package/dist/sf-pro-resvg-fonts.d.ts

@@ -0,0 +1,44 @@
+/**
+ * SF Pro font files on disk for @resvg/resvg-js consumption.
+ *
+ * Why this exists: Resvg-js 2.6.2 cannot load fonts from in-memory buffers,
+ * and it does NOT honor `@font-face url('data:font/woff2;base64,…')`
+ * declarations inside an SVG `<defs><style>` block. It only reads fonts
+ * from on-disk files (`fontFiles`) or directories (`fontDirs`).
+ *
+ * The browser-bar rendering pipeline (`generateBrowserBarSvg` →
+ * `rasterizeSvg` in mockup.ts) used to rely on the SVG <defs><style>
+ * @font-face approach. That silently fell back to system fonts
+ * (DejaVu/Liberation on Vercel Linux) — empirically verified by rendering
+ * the same SVG with and without `font.fontFiles` and observing the output
+ * change only when `fontFiles` is provided.
+ *
+ * This module decompresses the SF Pro Text Regular/Semibold woff2 data URIs
+ * from `sf-pro-fonts.ts` to TTF and writes them to `os.tmpdir()`, returning
+ * the file paths so callers can pass them to `new Resvg(svg, { font:
+ * { fontFiles: paths, loadSystemFonts: false } })`.
+ *
+ * Caching: paths are memoized per-process. On Vercel Fluid Compute the
+ * instance is reused across requests so the woff2→ttf decompression and
+ * disk writes happen at most once per cold start (~200ms total).
+ *
+ * Concurrency: two requests arriving before the first decompression
+ * finishes share a single in-flight Promise (no double work, no
+ * partial-file races).
+ *
+ * Robustness: if /tmp gets wiped between requests on the same instance
+ * (rare but possible), `fs.access` detects the missing files and a fresh
+ * init re-writes them.
+ *
+ * Windows-safe: uses `os.tmpdir()` + `path.join` (no hard-coded /tmp/),
+ * `fs.chmod` is intentionally skipped (no-op on NTFS anyway), no bash-isms.
+ */
+/**
+ * Returns the absolute paths to SF Pro Text Regular + Semibold TTF files on
+ * disk, suitable for `font.fontFiles` on a `new Resvg(svg, { … })` call.
+ *
+ * First call: decompresses woff2 → TTF and writes to `os.tmpdir()`. Subsequent
+ * calls: returns cached paths in O(2) `fs.access` checks (skipped after a
+ * single confirmed lookup per process — see implementation).
+ */
+export declare function getSfProResvgFontFiles(): Promise<string[]>;

package/dist/sf-pro-resvg-fonts.js

@@ -0,0 +1,126 @@
+/**
+ * SF Pro font files on disk for @resvg/resvg-js consumption.
+ *
+ * Why this exists: Resvg-js 2.6.2 cannot load fonts from in-memory buffers,
+ * and it does NOT honor `@font-face url('data:font/woff2;base64,…')`
+ * declarations inside an SVG `<defs><style>` block. It only reads fonts
+ * from on-disk files (`fontFiles`) or directories (`fontDirs`).
+ *
+ * The browser-bar rendering pipeline (`generateBrowserBarSvg` →
+ * `rasterizeSvg` in mockup.ts) used to rely on the SVG <defs><style>
+ * @font-face approach. That silently fell back to system fonts
+ * (DejaVu/Liberation on Vercel Linux) — empirically verified by rendering
+ * the same SVG with and without `font.fontFiles` and observing the output
+ * change only when `fontFiles` is provided.
+ *
+ * This module decompresses the SF Pro Text Regular/Semibold woff2 data URIs
+ * from `sf-pro-fonts.ts` to TTF and writes them to `os.tmpdir()`, returning
+ * the file paths so callers can pass them to `new Resvg(svg, { font:
+ * { fontFiles: paths, loadSystemFonts: false } })`.
+ *
+ * Caching: paths are memoized per-process. On Vercel Fluid Compute the
+ * instance is reused across requests so the woff2→ttf decompression and
+ * disk writes happen at most once per cold start (~200ms total).
+ *
+ * Concurrency: two requests arriving before the first decompression
+ * finishes share a single in-flight Promise (no double work, no
+ * partial-file races).
+ *
+ * Robustness: if /tmp gets wiped between requests on the same instance
+ * (rare but possible), `fs.access` detects the missing files and a fresh
+ * init re-writes them.
+ *
+ * Windows-safe: uses `os.tmpdir()` + `path.join` (no hard-coded /tmp/),
+ * `fs.chmod` is intentionally skipped (no-op on NTFS anyway), no bash-isms.
+ */
+import fs from 'node:fs/promises';
+import os from 'node:os';
+import path from 'node:path';
+import { SF_PRO_TEXT_REGULAR, SF_PRO_TEXT_SEMIBOLD } from './sf-pro-fonts.js';
+const FONT_DIR_NAME = 'autokap-sf-pro';
+// Browser bar (Chrome + Safari chrome) uses only SF Pro Text Regular/Semibold.
+// Other variants (Display, Symbols) are consumed by the Satori-based status
+// bar renderer which already handles font embedding through its own
+// in-memory buffer pipeline (see `status-bar-render.ts::getSatoriFonts`).
+const FONTS = [
+    { filename: 'SF-Pro-Text-Regular.ttf', dataUri: SF_PRO_TEXT_REGULAR },
+    { filename: 'SF-Pro-Text-Semibold.ttf', dataUri: SF_PRO_TEXT_SEMIBOLD },
+];
+let cachedPaths = null;
+let pendingInit = null;
+async function decompressWoff2DataUri(dataUri) {
+    const raw = dataUri.replace(/^data:font\/woff2;base64,/, '');
+    const woff2 = Buffer.from(raw, 'base64');
+    const { decompress } = await import('wawoff2');
+    return Buffer.from(await decompress(woff2));
+}
+async function fileExists(p) {
+    try {
+        await fs.access(p);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Write a single TTF file atomically. If a concurrent call (same process or
+ * a sibling instance sharing the tmpdir) already produced the final file,
+ * the second `rename` overwrites identical bytes — still safe.
+ *
+ * The `.${pid}.partial` suffix prevents Resvg from reading a half-written
+ * file if it loads paths while a write is in flight.
+ */
+async function ensureFontFile(targetPath, dataUri) {
+    if (await fileExists(targetPath))
+        return;
+    const ttf = await decompressWoff2DataUri(dataUri);
+    const tmpPath = `${targetPath}.${process.pid}.partial`;
+    await fs.writeFile(tmpPath, ttf);
+    try {
+        await fs.rename(tmpPath, targetPath);
+    }
+    catch (err) {
+        // Best-effort cleanup of the .partial if rename failed for some reason
+        // (e.g. cross-device rename on exotic mounts). Swallow — the rename
+        // error is what matters and will surface to the caller.
+        await fs.rm(tmpPath, { force: true }).catch(() => { });
+        throw err;
+    }
+}
+async function initFontFiles() {
+    const dir = path.join(os.tmpdir(), FONT_DIR_NAME);
+    await fs.mkdir(dir, { recursive: true });
+    const paths = FONTS.map((f) => path.join(dir, f.filename));
+    await Promise.all(FONTS.map((f, i) => ensureFontFile(paths[i], f.dataUri)));
+    return paths;
+}
+/**
+ * Returns the absolute paths to SF Pro Text Regular + Semibold TTF files on
+ * disk, suitable for `font.fontFiles` on a `new Resvg(svg, { … })` call.
+ *
+ * First call: decompresses woff2 → TTF and writes to `os.tmpdir()`. Subsequent
+ * calls: returns cached paths in O(2) `fs.access` checks (skipped after a
+ * single confirmed lookup per process — see implementation).
+ */
+export async function getSfProResvgFontFiles() {
+    if (cachedPaths) {
+        // Defensive: ensure /tmp wasn't wiped under us.
+        const allExist = await Promise.all(cachedPaths.map(fileExists));
+        if (allExist.every(Boolean))
+            return cachedPaths;
+        cachedPaths = null;
+        pendingInit = null;
+    }
+    if (!pendingInit) {
+        pendingInit = initFontFiles().then((paths) => {
+            cachedPaths = paths;
+            return paths;
+        }, (err) => {
+            pendingInit = null;
+            throw err;
+        });
+    }
+    return pendingInit;
+}
+//# sourceMappingURL=sf-pro-resvg-fonts.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autokap",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "description": "AI-powered CLI tool for capturing clean screenshots of websites",
   "type": "module",
   "main": "./dist/index.js",