@bendyline/squisq-cli 2.9.28 → 2.9.30

package/README.md

@@ -256,6 +256,27 @@ console.log(`Rendered ${result.frameCount} frames (${result.duration}s) → ${re
 
 The container's audio segments become the MP4's audio track; timed media clips and block videos found in the doc are embedded and mixed at their scheduled positions.
 
+The capture page loads nothing from the network, so a theme font the rendering
+machine lacks (any Google Fonts stack, such as warm-earth's `DM Sans` body)
+renders in a fallback face. Pass the font files as `fonts`, one entry per file;
+every renderer here (MP4, GIF, cover and dashboard PNG) accepts them:
+
+```ts
+const fonts: RenderFontFace[] = [
+  { family: 'DM Sans', data: await readFile('DMSans-Variable.woff2'), weight: '100 1000' },
+  {
+    family: 'DM Sans',
+    data: await readFile('DMSans-VariableItalic.woff2'),
+    weight: '100 1000',
+    style: 'italic',
+  },
+];
+await renderDocToMp4(doc, container, { outputPath: './output.mp4', fonts });
+```
+
+`format` defaults to `'woff2'` (also `'woff'`, `'truetype'`, `'opentype'`), and
+`unicodeRange` takes a CSS `unicode-range` for a file holding one subset.
+
 ### `renderDocToGif`
 
 ```ts

package/dist/{api-6NVYOTM6.js → api-775UOV72.js}

@@ -18,7 +18,7 @@ import {
   renderDocToMp4,
   resolveDashboardDimensions,
   validateDashboardImageDimensions
-} from "./chunk-KWE5OXEY.js";
+} from "./chunk-6H22H2VX.js";
 import {
   GIF_EXPORT_DEFAULTS,
   framesToGifNative,

package/dist/api.d.ts

@@ -2,8 +2,8 @@ import { Doc, MotionSpec } from '@bendyline/squisq/schemas';
 import { DashboardStyleId } from '@bendyline/squisq/doc';
 import { ContentContainer } from '@bendyline/squisq/storage';
 export { MemoryContentContainer } from '@bendyline/squisq/storage';
-import { VideoQuality, VideoOrientation, GifDither, DashboardResolutionId, VideoExportOptions } from '@bendyline/squisq-video';
-export { DASHBOARD_RESOLUTIONS, DEFAULT_DASHBOARD_RESOLUTION, DashboardResolutionId, DashboardResolutionPreset, GifDither, VideoOrientation, VideoQuality, resolveDashboardDimensions, validateDashboardImageDimensions } from '@bendyline/squisq-video';
+import { VideoQuality, VideoOrientation, GifDither, DashboardResolutionId, VideoExportOptions, RenderFontFace } from '@bendyline/squisq-video';
+export { DASHBOARD_RESOLUTIONS, DEFAULT_DASHBOARD_RESOLUTION, DashboardResolutionId, DashboardResolutionPreset, GifDither, RenderFontFace, VideoOrientation, VideoQuality, resolveDashboardDimensions, validateDashboardImageDimensions } from '@bendyline/squisq-video';
 import { FormatRegistry, FormatId, ConvertOptions, ConvertSource, ConversionResult, PreparedConversion } from '@bendyline/squisq-formats';
 export { ConversionError, ConversionErrorCode, ConversionErrorOptions, ConversionResult, ConvertOptions, ConvertSource, FormatDefinition, FormatId, FormatRegistry, NormalizedInput, PreparedConversion, PreparedExportOptions } from '@bendyline/squisq-formats';
 import { MarkdownDocument } from '@bendyline/squisq/markdown';
@@ -68,6 +68,8 @@ interface FrameManifest {
     animationsEnabled: boolean;
     coverPreRoll: number;
     captureFormat: CaptureFormat;
+    /** Digest of the embedded font files; absent when the render embedded none. */
+    fontsHash?: string;
 }
 
 /**
@@ -392,6 +394,12 @@ interface RenderDocToMp4Options {
      * callers get exactly the duration they ask for.
      */
     coverPreRoll?: number;
+    /**
+     * Font files to embed in the capture page. It loads nothing from the
+     * network, so a theme font the machine lacks (such as a Google Fonts stack)
+     * renders in a fallback face unless it is supplied here. Default: none.
+     */
+    fonts?: readonly RenderFontFace[];
     /**
      * Progress callback. Called with a phase name and 0-100 percentage.
      */
@@ -427,6 +435,8 @@ interface RenderDocToGifOptions {
     dither?: GifDither;
     /** Bayer strength when dither is bayer (0-5, default: 3). */
     bayerScale?: number;
+    /** Font files to embed (see {@link RenderDocToMp4Options.fonts}). */
+    fonts?: readonly RenderFontFace[];
     /** Progress callback. */
     onProgress?: (phase: string, percent: number) => void;
 }
@@ -488,6 +498,8 @@ interface RenderDashboardPngOptions {
     style?: DashboardStyleId;
     /** Host-supplied title fallback when the doc has no frontmatter title. */
     documentTitle?: string;
+    /** Font files to embed (see {@link RenderDocToMp4Options.fonts}). */
+    fonts?: readonly RenderFontFace[];
     onProgress?: (phase: string, percent: number) => void;
 }
 /** Result returned by {@link renderDocToDashboardPng}. */
@@ -505,6 +517,8 @@ interface RenderCoverPngOptions {
     width?: number;
     height?: number;
     animationsEnabled?: boolean;
+    /** Font files to embed (see {@link RenderDocToMp4Options.fonts}). */
+    fonts?: readonly RenderFontFace[];
     onProgress?: (phase: string, percent: number) => void;
 }
 /** Result returned by {@link renderDocCoverToPng}. */

package/dist/api.js

@@ -469,6 +469,15 @@ function createFfmpegPipeSink(options) {
 function docRenderHash(doc) {
   return createHash("sha256").update(JSON.stringify(doc)).digest("hex");
 }
+function fontsRenderHash(fonts) {
+  const hash = createHash("sha256");
+  for (const font of fonts) {
+    const { data, ...face } = font;
+    hash.update(JSON.stringify(face));
+    hash.update(data instanceof Uint8Array ? data : new Uint8Array(data));
+  }
+  return hash.digest("hex");
+}
 var MANIFEST_NAME = "manifest.json";
 async function openDirectoryFrameStore(dir, manifest, resume) {
   await mkdir(dir, { recursive: true });
@@ -1133,6 +1142,7 @@ async function withRenderPage(doc, container, options, fn) {
     animationsEnabled,
     displayMode,
     dashboard,
+    fonts,
     onProgress
   } = options;
   onProgress?.("collecting media", 0);
@@ -1179,6 +1189,7 @@ async function withRenderPage(doc, container, options, fn) {
       images.set(src, data);
     }
   }
+  for (const font of fonts ?? []) budget.admit(`font:${font.family}`, font.data);
   onProgress?.("generating render HTML", 10);
   signal?.throwIfAborted();
   const playerBundle = await (selectStandalonePlayerVariant(doc) === "full" ? loadFullPlayerBundle() : loadPlayerBundle());
@@ -1193,7 +1204,8 @@ async function withRenderPage(doc, container, options, fn) {
     motion,
     animationsEnabled,
     displayMode,
-    dashboard
+    dashboard,
+    fonts
   });
   onProgress?.("launching browser", 15);
   signal?.throwIfAborted();
@@ -1359,6 +1371,7 @@ async function captureDocFrames(doc, container, options) {
     motion,
     coverPreRoll,
     animationsEnabled,
+    fonts,
     onProgress,
     signal
   } = options;
@@ -1378,6 +1391,7 @@ async function captureDocFrames(doc, container, options) {
         captionStyle,
         motion,
         animationsEnabled,
+        fonts,
         onProgress
       },
       async (session) => {
@@ -1429,7 +1443,8 @@ async function renderDocToMp4Piped(doc, container, options, render) {
     motion: motion === null ? null : JSON.stringify(motion),
     animationsEnabled,
     coverPreRoll,
-    captureFormat
+    captureFormat,
+    ...options.fonts?.length ? { fontsHash: fontsRenderHash(options.fonts) } : {}
   };
   const store = options.framesDir ? await openDirectoryFrameStore(
     resolvePath(options.framesDir),
@@ -1452,6 +1467,7 @@ async function renderDocToMp4Piped(doc, container, options, render) {
         captionStyle,
         motion,
         animationsEnabled,
+        fonts: options.fonts,
         onProgress
       },
       async (session) => {
@@ -1547,6 +1563,7 @@ async function renderDocCoverToPng(doc, container, options = {}) {
       includeAudio: false,
       animationsEnabled: options.animationsEnabled ?? false,
       displayMode: "slideshow",
+      fonts: options.fonts,
       onProgress: options.onProgress
     },
     async ({ page, renderAPI }) => {
@@ -1579,6 +1596,7 @@ async function renderDocToDashboardPng(doc, container, options = {}) {
     title,
     style,
     documentTitle,
+    fonts,
     onProgress
   } = options;
   signal?.throwIfAborted();
@@ -1594,6 +1612,7 @@ async function renderDocToDashboardPng(doc, container, options = {}) {
       animationsEnabled: false,
       displayMode: "dashboard",
       dashboard: { layout, title, style, documentTitle },
+      fonts,
       onProgress
     },
     async ({ page, renderAPI }) => {
@@ -1662,6 +1681,7 @@ async function renderDocToMp4(doc, container, options) {
     motion: options.motion ?? null,
     coverPreRoll: options.coverPreRoll ?? 0,
     animationsEnabled: options.animationsEnabled ?? true,
+    fonts: options.fonts,
     onProgress: options.onProgress,
     signal: options.signal
   });
@@ -1726,6 +1746,7 @@ async function renderDocToGif(doc, container, options) {
     motion: options.motion ?? null,
     coverPreRoll: options.coverPreRoll ?? 0,
     animationsEnabled: options.animationsEnabled ?? false,
+    fonts: options.fonts,
     onProgress: options.onProgress,
     signal: options.signal
   });

package/dist/{chunk-KWE5OXEY.js → chunk-6H22H2VX.js}

@@ -466,6 +466,15 @@ function createFfmpegPipeSink(options) {
 function docRenderHash(doc) {
   return createHash("sha256").update(JSON.stringify(doc)).digest("hex");
 }
+function fontsRenderHash(fonts) {
+  const hash = createHash("sha256");
+  for (const font of fonts) {
+    const { data, ...face } = font;
+    hash.update(JSON.stringify(face));
+    hash.update(data instanceof Uint8Array ? data : new Uint8Array(data));
+  }
+  return hash.digest("hex");
+}
 var MANIFEST_NAME = "manifest.json";
 async function openDirectoryFrameStore(dir, manifest, resume) {
   await mkdir(dir, { recursive: true });
@@ -543,7 +552,7 @@ function mp4Format() {
       const animationsEnabled = typeof mp4Opts.animationsEnabled === "boolean" ? mp4Opts.animationsEnabled : MP4_DEFAULTS.animationsEnabled;
       const outputPath = join2(tmpdir(), `squisq-mp4-${randomBytes(8).toString("hex")}.mp4`);
       try {
-        const { renderDocToMp4: renderDocToMp42 } = await import("./api-6NVYOTM6.js");
+        const { renderDocToMp4: renderDocToMp42 } = await import("./api-775UOV72.js");
         await renderDocToMp42(input.doc, input.container, {
           outputPath,
           fps,
@@ -584,7 +593,7 @@ function gifFormat() {
       const defaultHeight = portrait ? GIF_DEFAULTS.width : GIF_DEFAULTS.height;
       const outputPath = join2(tmpdir(), `squisq-gif-${randomBytes(8).toString("hex")}.gif`);
       try {
-        const { renderDocToGif: renderDocToGif2 } = await import("./api-6NVYOTM6.js");
+        const { renderDocToGif: renderDocToGif2 } = await import("./api-775UOV72.js");
         const result = await renderDocToGif2(input.doc, input.container, {
           outputPath,
           fps: typeof gifOpts.fps === "number" ? gifOpts.fps : GIF_DEFAULTS.fps,
@@ -627,7 +636,7 @@ function pngFormat() {
     async exportDoc(input, options) {
       options.signal?.throwIfAborted();
       const pngOpts = options.formatOptions?.png ?? {};
-      const { renderDocToDashboardPng: renderDocToDashboardPng2 } = await import("./api-6NVYOTM6.js");
+      const { renderDocToDashboardPng: renderDocToDashboardPng2 } = await import("./api-775UOV72.js");
       const result = await renderDocToDashboardPng2(input.doc, input.container, {
         resolution: pngOpts.resolution,
         width: pngOpts.width,
@@ -1130,6 +1139,7 @@ async function withRenderPage(doc, container, options, fn) {
     animationsEnabled,
     displayMode,
     dashboard,
+    fonts,
     onProgress
   } = options;
   onProgress?.("collecting media", 0);
@@ -1176,6 +1186,7 @@ async function withRenderPage(doc, container, options, fn) {
       images.set(src, data);
     }
   }
+  for (const font of fonts ?? []) budget.admit(`font:${font.family}`, font.data);
   onProgress?.("generating render HTML", 10);
   signal?.throwIfAborted();
   const playerBundle = await (selectStandalonePlayerVariant(doc) === "full" ? loadFullPlayerBundle() : loadPlayerBundle());
@@ -1190,7 +1201,8 @@ async function withRenderPage(doc, container, options, fn) {
     motion,
     animationsEnabled,
     displayMode,
-    dashboard
+    dashboard,
+    fonts
   });
   onProgress?.("launching browser", 15);
   signal?.throwIfAborted();
@@ -1356,6 +1368,7 @@ async function captureDocFrames(doc, container, options) {
     motion,
     coverPreRoll,
     animationsEnabled,
+    fonts,
     onProgress,
     signal
   } = options;
@@ -1375,6 +1388,7 @@ async function captureDocFrames(doc, container, options) {
         captionStyle,
         motion,
         animationsEnabled,
+        fonts,
         onProgress
       },
       async (session) => {
@@ -1426,7 +1440,8 @@ async function renderDocToMp4Piped(doc, container, options, render) {
     motion: motion === null ? null : JSON.stringify(motion),
     animationsEnabled,
     coverPreRoll,
-    captureFormat
+    captureFormat,
+    ...options.fonts?.length ? { fontsHash: fontsRenderHash(options.fonts) } : {}
   };
   const store = options.framesDir ? await openDirectoryFrameStore(
     resolvePath(options.framesDir),
@@ -1449,6 +1464,7 @@ async function renderDocToMp4Piped(doc, container, options, render) {
         captionStyle,
         motion,
         animationsEnabled,
+        fonts: options.fonts,
         onProgress
       },
       async (session) => {
@@ -1544,6 +1560,7 @@ async function renderDocCoverToPng(doc, container, options = {}) {
       includeAudio: false,
       animationsEnabled: options.animationsEnabled ?? false,
       displayMode: "slideshow",
+      fonts: options.fonts,
       onProgress: options.onProgress
     },
     async ({ page, renderAPI }) => {
@@ -1576,6 +1593,7 @@ async function renderDocToDashboardPng(doc, container, options = {}) {
     title,
     style,
     documentTitle,
+    fonts,
     onProgress
   } = options;
   signal?.throwIfAborted();
@@ -1591,6 +1609,7 @@ async function renderDocToDashboardPng(doc, container, options = {}) {
       animationsEnabled: false,
       displayMode: "dashboard",
       dashboard: { layout, title, style, documentTitle },
+      fonts,
       onProgress
     },
     async ({ page, renderAPI }) => {
@@ -1659,6 +1678,7 @@ async function renderDocToMp4(doc, container, options) {
     motion: options.motion ?? null,
     coverPreRoll: options.coverPreRoll ?? 0,
     animationsEnabled: options.animationsEnabled ?? true,
+    fonts: options.fonts,
     onProgress: options.onProgress,
     signal: options.signal
   });
@@ -1723,6 +1743,7 @@ async function renderDocToGif(doc, container, options) {
     motion: options.motion ?? null,
     coverPreRoll: options.coverPreRoll ?? 0,
     animationsEnabled: options.animationsEnabled ?? false,
+    fonts: options.fonts,
     onProgress: options.onProgress,
     signal: options.signal
   });

package/dist/index.js

@@ -9,7 +9,7 @@ import {
   renderDocToDashboardPng,
   renderDocToGif,
   renderDocToMp4
-} from "./chunk-KWE5OXEY.js";
+} from "./chunk-6H22H2VX.js";
 import "./chunk-Y5XKUWJ5.js";
 
 // src/index.ts