ggaction 0.0.24 → 0.0.26

package/src/persistence/validation.js

@@ -1,3 +1,6 @@
+import { validateLegendOverflow } from "../grammar/legendOverflow.js";
+import { normalizeTextOverrides } from "../grammar/text.js";
+import { normalizeLegendDisplayLabelMap } from "../grammar/displayLabels.js";
 import { validateFacetAxisPolicy } from "../core/facetAxisPolicy.js";
 import { resolveFacetFamily } from "../grammar/facets/dependencies.js";
 import { validateRegressionPlacement } from "../grammar/regression/parameters.js";
@@ -18,15 +21,13 @@ import { axisGraphicIds } from "../selectors/axes.js";
 
 import {findLayer} from '../selectors/layers.js';
 import {findCoordinate} from '../selectors/coordinates.js';
-import {resolveColorSizeMapping,normalizeColorSizeSymbol} from '../grammar/colorSizeLegend.js';
+import {resolveColorSizeMapping,normalizeColorSizeSymbol,colorSizeChannels,validateColorSizeShapeSamples} from '../grammar/colorSizeLegend.js';
 import{validateLegendClip}from"../grammar/legendClip.js";
 import {validateLegendLayerOpacity}from"../grammar/legendOpacity.js";
 import { isSizeShapeChannels, resolveSizeShapeMapping } from "../grammar/legendCombinations.js";
-import { describeLegendBlock } from "../grammar/legendBlocks.js";
+import { describeLegendBlock, validateLegendChannels } from "../grammar/legendBlocks.js";
 import { localLegendPosition } from "../grammar/legendGroups.js";
 import { normalizeLegendBorderDash } from "../grammar/legendBorder.js";
-import { normalizeNumericDisplayLabelMap } from "../grammar/displayLabels.js";
-import { isContinuousSizeScaleType } from "../grammar/scales/size.js";
 import { validateGraphicItemLimit } from "../core/validation.js";
 import { LEGEND_TITLE_STYLE_KEYS, validateLegendTitleAlignment } from "../grammar/legendTitleStyle.js";
 import { validateGuideDash, normalizeGuideDashMap } from "../grammar/guideDash.js";
@@ -50,7 +51,8 @@ import { validateUserId } from "../core/identifiers.js";
 import { collectAllResourceReferences } from "../core/resourceReferences.js";
 import { requiredTraceExtension } from "../core/extensionRegistry.js";
 import { resolveDatasetReference } from "../selectors/datasets.js";
-import { normalizeMarkSelector } from "../grammar/markSelection.js";
+import { normalizeMarkSelector, validateRowSelectionDataset } from "../grammar/markSelection.js";
+import { highlightTargets } from "../selectors/selectionTargets.js";
 import { parseSemanticPath } from "../grammar/schemas/semanticPath.js";
 import { validateStoredSemanticValue } from "../actions/primitives/semantic.js";
 import { validateGraphicType, isGraphicContainerType } from "../grammar/schemas/graphic.js";
@@ -227,6 +229,7 @@ export function validateProgramState(program, path, { allowMissingLookupSchemas
       throw new TypeError("Facet row field title requires a row-column facet grid.");
     }
   }
+  validateGuideVisibilityState(program);
   if (program.materializationConfigs.textMetrics !== undefined) normalizeTextMetricProfile(program.materializationConfigs.textMetrics);
   for (const config of [
     ...Object.values(program.guideConfigs.axis ?? {}).map(axis => axis.ticks),
@@ -319,7 +322,7 @@ export function validateProgramState(program, path, { allowMissingLookupSchemas
     }
     const config = program.guideConfigs.axis?.[id];
     requireObject(config, `${path}.guides.axis.${id}`);
-    validateKeys(config, ["binding", "frame", "line", "ticks", "labels", "title"], "Stored named axis config");
+    validateKeys(config, ["binding", "frame", "line", "ticks", "labels", "title", "visibility"], "Stored named axis config");
     const components = ["line", "ticks", "labels", "title"];
     if (!components.some(component => config[component] !== undefined)) {
       throw invalidSnapshot("Named axes require at least one retained component.", path);
@@ -340,30 +343,50 @@ export function validateProgramState(program, path, { allowMissingLookupSchemas
       coordinate: semanticAxis.coordinate, position: semanticAxis.position });
   }
   if (program.guideConfigs.legendGroups !== undefined) validateLegendGroupState(program.guideConfigs.legendGroups);
+  if (program.guideConfigs.suppressedLegends !== undefined) {
+    requireObject(program.guideConfigs.suppressedLegends, `${path}.materializationConfigs.guides.suppressedLegends`);
+    for (const [target, config] of Object.entries(program.guideConfigs.suppressedLegends)) {
+      validateUserId(target, "Suppressed legend target");
+      requireObject(config, `${path}.materializationConfigs.guides.suppressedLegends.${target}`);
+      if (!semantic.layers.some(layer => layer.id === target) || Object.keys(config).some(key => key !== "channels")) {
+        throw invalidSnapshot("Suppressed legend requires an existing mark and channel selection.", path);
+      }
+      validateLegendChannels(config.channels, "Suppressed legend");
+    }
+  }
   for (const [kind, config] of Object.entries(program.guideConfigs.legend ?? {})) {
+    validateLegendOverflow(kind, config);
     validateLegendClip(kind,config);
+    for (const [key, override] of Object.entries(config.blockOverrides ?? {})) {
+      if (override.labelMap !== undefined) {
+        const descriptor = describeLegendBlock(program, kind, config);
+        if (key !== descriptor.key) throw invalidSnapshot("Display labels require their existing legend block owner.", path);
+        normalizeLegendDisplayLabelMap(descriptor, override.labelMap, program.resolvedScales[descriptor.scaleIds[0]]?.type);
+      }
+    }
     validateLegendSpacing(kind,config);
     if (localLegendPosition(config) !== undefined) {
       const descriptor = describeLegendBlock(program, kind, config);
       for (const [key, override] of Object.entries(config.blockOverrides)) {
-        if (override.position !== undefined && key !== descriptor.key) throw invalidSnapshot("Local position requires its existing block owner.", path);
+        if ((override.position !== undefined || override.alongOffset !== undefined) && key !== descriptor.key) throw invalidSnapshot("Local position requires its existing block owner.", path);
       }
     }
     for(const layer of config.symbol?.layers??[])validateLegendLayerOpacity(layer.opacity);
     if(kind==='colorSize') {
-      if(config.combine!=='color-size')throw invalidSnapshot('Color-size legend requires its combined owner.',path);
+      if(!['color-size','color-size-shape'].includes(config.combine))throw invalidSnapshot('Color-size legend requires its combined owner.',path);
       const layer=findLayer(program,config.target);
-      const mapping=resolveColorSizeMapping({layer,scales:program.resolvedScales,pointConfig:program.markConfigs[layer?.id],coordinate:findCoordinate(program,layer?.coordinate)});
-      for(const key of ['target','field','fieldType','colorScale','sizeScale','domain'])if(JSON.stringify(config[key])!==JSON.stringify(mapping[key]))throw invalidSnapshot('Stale color-size mapping.',path);
+      const mapping=resolveColorSizeMapping({layer,scales:program.resolvedScales,pointConfig:program.markConfigs[layer?.id],coordinate:findCoordinate(program,layer?.coordinate),combine:config.combine,channels:colorSizeChannels(config)});
+      for(const key of ['target','field','fieldType','colorScale','sizeScale','shapeScale','colorChannel','domain'])if(JSON.stringify(config[key])!==JSON.stringify(mapping[key]))throw invalidSnapshot('Stale color-size mapping.',path);
       const guide=semantic.guides.legend?.colorSize;
-      if(guide?.colorScale!==mapping.colorScale||guide?.sizeScale!==mapping.sizeScale||guide.title!==config.title)throw invalidSnapshot('Stale color-size semantic owner.',path);
-      requireObject(config.symbol,path);normalizeColorSizeSymbol(config.symbol);
-      if(config.symbol.type!=='point'||!Object.hasOwn(config.symbol,'strokeWidth')||!Object.hasOwn(config.symbol,'opacity'))throw invalidSnapshot('Color-size symbol requires point type.',path);
+      if(guide?.colorScale!==mapping.colorScale||guide?.sizeScale!==mapping.sizeScale||guide.title!==config.title||guide.shapeScale!==mapping.shapeScale||guide.colorChannel!==mapping.colorChannel)throw invalidSnapshot('Stale color-size semantic owner.',path);
+      requireObject(config.symbol,path);normalizeColorSizeSymbol(config.symbol,undefined,config);
+      if(config.symbol.type!=='point'||config.combine==='color-size'&&(!Object.hasOwn(config.symbol,'strokeWidth')||!Object.hasOwn(config.symbol,'opacity')))throw invalidSnapshot('Color-size symbol requires point type.',path);
       const sample=config.sampling;requireObject(sample,path);
       exactKeys(sample,sample.mode==='values'?['mode','count','values']:['mode','count'],path);
       if(!['auto','values'].includes(sample.mode)||!Number.isInteger(sample.count)||sample.count<2)throw invalidSnapshot('Invalid color-size samples.',path);
       validateGeneratedItemLimit(sample.count,'Color-size samples');
-      if(sample.mode==='values'){
+      if(config.combine==='color-size-shape')validateColorSizeShapeSamples(sample,program.resolvedScales[mapping.colorScale]);
+      else if(sample.mode==='values'){
         requireArray(sample.values,path);
         if(!sample.values.length||sample.values.length>100||sample.values.some((v,i)=>!Number.isFinite(v)||i>0&&v<=sample.values[i-1]||v<Math.min(...mapping.domain)||v>Math.max(...mapping.domain)||[mapping.colorScale,mapping.sizeScale].some(id=>program.resolvedScales[id].type==='log'&&v<=0)))throw invalidSnapshot('Invalid exact color-size samples.',path);
       }
@@ -385,15 +408,6 @@ export function validateProgramState(program, path, { allowMissingLookupSchemas
     if (config.border && Object.hasOwn(config.border, "strokeDash")) {
       normalizeLegendBorderDash(config.border.strokeDash, "Stored legend border strokeDash");
     }
-    if (["size","colorSize"].includes(kind) && config.blockOverrides !== undefined) {
-      for (const [key, override] of Object.entries(config.blockOverrides)) {
-        if (override.labelMap === undefined) continue;
-        if (key !== (kind==='colorSize'?'["color","size"]':'["size"]') || !isContinuousSizeScaleType(program.resolvedScales[kind==='colorSize'?config.sizeScale:config.scale]?.type)) {
-          throw invalidSnapshot("Numeric display labels require a continuous size legend block.", path);
-        }
-        normalizeNumericDisplayLabelMap(override.labelMap, "Stored size legend labelMap");
-      }
-    }
     if (config.titleStyle !== undefined) {
       validateOptionObject(config.titleStyle, LEGEND_TITLE_STYLE_KEYS, "Stored legend title style");
       validateLegendTitleAlignment(config.titleStyle, config.titlePosition);
@@ -458,13 +472,25 @@ export function validateProgramState(program, path, { allowMissingLookupSchemas
     }
   }
 
+  for (const [id, config] of Object.entries(program.materializationConfigs.rowProvenance ?? {})) {
+    exactKeys(config, ["indices"], `${path}.materializationConfigs.rowProvenance.${id}`);
+    const { indices } = config;
+    const dataset = resources.get("data").get(id), source = resources.get("data").get(dataset?.source);
+    if (dataset?.transform?.[0]?.type !== "markFilter" || !source || !Array.isArray(indices) ||
+        indices.length !== dataset.values?.length || Array.from(indices).some((index, offset) =>
+          !Number.isInteger(index) || index < 0 || index >= source.values.length ||
+          (offset > 0 && index <= indices[offset - 1]) || !sameLookupValue(dataset.values[offset], source.values[index]))) {
+      throw invalidSnapshot("Invalid filtered row provenance.", path);
+    }
+  }
   const selections = program.materializationConfigs.selections ?? {};
   requireObject(selections, `${path}.materializationConfigs.selections`);
   for (const [id, selection] of Object.entries(selections)) {
     validateUserId(id, "Selection id");
-    exactKeys(selection, ["target", "selector"], `${path}.materializationConfigs.selections.${id}`);
+    exactKeys(selection, ["target", "selector", ...(Object.hasOwn(selection, "sourceSelection") ? ["sourceSelection"] : [])], `${path}.materializationConfigs.selections.${id}`);
     validateUserId(selection.target, "Selection target");
     normalizeMarkSelector(selection.selector);
+    if (Object.hasOwn(selection, "sourceSelection")) validateUserId(selection.sourceSelection, "Composite selection owner");
   }
   resources.set("selection", new Map(Object.entries(selections)));
   for (const reference of collectAllResourceReferences(program)) {
@@ -473,6 +499,24 @@ export function validateProgramState(program, path, { allowMissingLookupSchemas
       throw invalidSnapshot(`Unknown ${reference.kind} "${reference.id}" referenced by ${reference.ownerKind} "${reference.ownerId}".`, path);
     }
   }
+  for (const selection of Object.values(selections)) {
+    if (selection.sourceSelection !== undefined) {
+      const owner = selections[selection.sourceSelection];
+      if (owner.sourceSelection !== undefined || owner.target === selection.target ||
+          !highlightTargets(program, owner.target).includes(selection.target)) {
+        throw invalidSnapshot("Invalid composite selection owner.", path);
+      }
+    }
+    if (selection.selector.rows !== undefined) validateRowSelectionDataset(selection.selector.rows, resources.get("data").get(selection.selector.rows.data));
+  }
+  for (const config of Object.values(program.materializationConfigs.highlights ?? {})) {
+    if (config.groupSelection === undefined) continue;
+    const owner = selections[config.groupSelection], selection = selections[config.selection];
+    if (owner.sourceSelection !== undefined || selection.target !== config.target ||
+        (config.selection !== config.groupSelection && selection.sourceSelection !== config.groupSelection)) {
+      throw invalidSnapshot("Invalid composite highlight selection group.", path);
+    }
+  }
   for (const [id, scale] of Object.entries(program.resolvedScales)) {
     requireObject(scale, `${path}.resolvedScales.${id}`);
     requireArray(scale.domain, `${path}.resolvedScales.${id}.domain`);
@@ -486,6 +530,10 @@ export function validateProgramState(program, path, { allowMissingLookupSchemas
     }
   }
   for (const id of Object.keys(program.markConfigs)) {
+    if (program.markConfigs[id].textOverrides !== undefined) {
+      if (resources.get("mark").get(id).mark.type !== "text") throw invalidSnapshot("Text overrides require a text mark.", path);
+      normalizeTextOverrides(program.markConfigs[id].textOverrides);
+    }
     validateRegressionPlacement(program.markConfigs[id].regression?.placement);
     requestedMarkClip(program.markConfigs[id]);
     validateMarkClipCoordinate(program, resources.get("mark").get(id), program.markConfigs[id].clip);
@@ -517,3 +565,28 @@ export function validateProgramState(program, path, { allowMissingLookupSchemas
     }));
   }
 }
+
+function validateGuideVisibilityState(program) {
+  const check = (visibility, allowed) => {
+    if (visibility === undefined) return;
+    if (!isPlainObject(visibility) || Object.entries(visibility).some(([key, value]) => !allowed.includes(key) || typeof value !== "boolean"))
+      throw new TypeError("Stored guide visibility must contain only supported boolean flags.");
+  };
+  for (const config of Object.values(program.guideConfigs.axis ?? {})) {
+    check(config.visibility, ["all", "line", "ticks", "labels", "title"]);
+    for (const dimension of config.axes?.dimensions ?? []) check(dimension.visibility, ["all", "line", "ticks", "labels", "title"]);
+  }
+  for (const config of Object.values(program.guideConfigs.legend ?? {})) check(config.visibility, ["all", "labels", "titleStyle"]);
+  for (const config of Object.values(program.guideConfigs.grid ?? {})) if (Object.hasOwn(config, "visible") && typeof config.visible !== "boolean")
+    throw new TypeError("Stored grid visible must be a boolean.");
+  const paint = program.materializationConfigs.guideVisibilityPaint;
+  if (paint !== undefined) {
+    if (!isPlainObject(paint)) throw new TypeError("Stored guide visibility paint must be an object.");
+    for (const items of Object.values(paint)) {
+      if (!isPlainObject(items)) throw new TypeError("Stored guide visibility paint entries must be objects.");
+      for (const value of Object.values(items)) if (!isPlainObject(value) || Object.keys(value).length !== 1 ||
+          !Object.hasOwn(value, "opacity") || value.opacity !== null && (!Number.isFinite(value.opacity) || value.opacity < 0 || value.opacity > 1))
+        throw new TypeError("Stored guide visibility paint requires an original opacity or null.");
+    }
+  }
+}

package/src/renderers/canvas/index.js

@@ -26,6 +26,9 @@ const DRAWERS = Object.freeze({
   path: drawPathGraphic
 });
 
+// Distinguish a completed empty preflight from a direct draw that still needs one.
+const NO_ISOLATED_GLYPHS = Object.freeze({});
+
 const DRAWING_CONTEXT_METHODS = Object.freeze([
   "save",
   "restore",
@@ -174,14 +177,14 @@ export function drawResolvedGraphicSpec(target, context, options = {}) {
         return;
       }
       if (!Array.isArray(object.items)) {
-        drawConcreteGraphic(context, id, object, isolated);
+        drawConcreteGraphic(context, id, object, isolated, options);
       }
     },
     item({ id, object, owner }) {
       drawConcreteGraphic(context, id, {
         ...object,
         type: object.type ?? owner.type
-      }, isolated);
+      }, isolated, options);
     },
     exit({ id, object }) {
       if (
@@ -195,7 +198,7 @@ export function drawResolvedGraphicSpec(target, context, options = {}) {
   });
 }
 
-export function renderCanvasProgram(program, context, { pixelRatio = 1 } = {}, createCanvas) {
+export function renderCanvasProgram(program, context, { pixelRatio = 1 } = {}, createCanvas, drawingOptions = {}) {
   const graphicSpec = requireProgramGraphicSpec(program);
 
   requireCanvasContext(context);
@@ -253,7 +256,9 @@ export function renderCanvasProgram(program, context, { pixelRatio = 1 } = {}, c
   try {
     context.scale(pixelRatio, pixelRatio);
     context.clearRect(0, 0, width, height);
-    drawResolvedGraphicSpec(target, context, {isolated, pixelRatio, createCanvas});
+    drawResolvedGraphicSpec(target, context, {
+      ...drawingOptions, isolated: isolated ?? NO_ISOLATED_GLYPHS, pixelRatio, createCanvas
+    });
   } finally {
     context.restore();
   }
@@ -263,10 +268,10 @@ export function render(program, context, options) {
   return renderCanvasProgram(program, context, options);
 }
 
-function drawConcreteGraphic(context, id, graphic, isolated) {
+function drawConcreteGraphic(context, id, graphic, isolated, options) {
   if (graphic.type === "collection") {
     for (const item of graphic.items ?? []) {
-      drawConcreteGraphic(context, item.id ?? id, item, isolated);
+      drawConcreteGraphic(context, item.id ?? id, item, isolated, options);
     }
     return;
   }
@@ -277,6 +282,6 @@ function drawConcreteGraphic(context, id, graphic, isolated) {
   if (["normal","difference"].includes(graphic.properties?.blend)) {
     drawIsolatedGlyph(context, id, graphic, draw, isolated);
   } else {
-    draw(context, id, graphic);
+    draw(context, id, graphic, options);
   }
 }

package/src/renderers/canvas/text.js

@@ -4,7 +4,7 @@ import { validateConcreteGraphicProperties, validateConcreteGraphicValue } from
   "../../grammar/schemas/concreteGraphic.js";
 import { normalizeRendererFontWeight } from "../text.js";
 
-function drawText(context, child, collectionId) {
+function drawText(context, child, collectionId, { resolveFontFamily } = {}) {
   const properties = child.properties ?? {};
   const graphicId = child.id ?? collectionId;
   validateConcreteGraphicProperties("text", properties);
@@ -77,7 +77,7 @@ function drawText(context, child, collectionId) {
     context.fillStyle = resolveCanvasSolidPaint(fill);
     context.globalAlpha = opacity;
     const rendererFontWeight = normalizeRendererFontWeight(fontWeight);
-    context.font = `${properties.fontStyle === "italic" ? "italic " : ""}${rendererFontWeight} ${fontSize}px ${fontFamily}`;
+    context.font = `${properties.fontStyle === "italic" ? "italic " : ""}${rendererFontWeight} ${fontSize}px ${resolveFontFamily?.(fontFamily) ?? fontFamily}`;
     context.textAlign = textAlign;
     context.textBaseline = textBaseline;
     context.translate(x, y);
@@ -89,13 +89,13 @@ function drawText(context, child, collectionId) {
   }
 }
 
-export function drawTextGraphic(context, id, graphic) {
+export function drawTextGraphic(context, id, graphic, options) {
   if (graphic.items) {
     for (const item of graphic.items) {
-      drawText(context, item, id);
+      drawText(context, item, id, options);
     }
     return;
   }
 
-  drawText(context, { id, properties: graphic.properties }, id);
+  drawText(context, { id, properties: graphic.properties }, id, options);
 }

package/src/renderers/nativeBackend.js

@@ -8,3 +8,28 @@ export async function loadNativeBackend() {
     throw error;
   }
 }
+
+// Supply installed glyph fallbacks after the authored family, as browsers do.
+// This resolves font resources only; no text or layout enters program state.
+const SYSTEM_FALLBACKS = [
+  "Noto Sans CJK KR", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic",
+  "Noto Sans CJK JP", "Noto Sans JP", "Yu Gothic", "Meiryo",
+  "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
+  "Noto Sans CJK TC", "PingFang TC", "Microsoft JhengHei",
+  "Arial Unicode MS", "Noto Sans", "DejaVu Sans",
+  "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji"
+];
+
+export function nativeFontResolver(globalFonts) {
+  const installed = new Set(globalFonts.families.map(entry => entry.family));
+  const fallbacks = SYSTEM_FALLBACKS.filter(family => installed.has(family));
+  const cache = new Map();
+  return requested => {
+    if (cache.has(requested)) return cache.get(requested);
+    const present = new Set(requested.split(',').map(family => family.trim().replace(/^["']|["']$/g, '').toLowerCase()));
+    const extra = fallbacks.filter(family => !present.has(family.toLowerCase()));
+    const resolved = [requested, ...extra.map(family => `"${family}"`)].join(', ');
+    cache.set(requested, resolved);
+    return resolved;
+  };
+}

package/src/renderers/pdf.js

@@ -1,7 +1,7 @@
 import { mkdir, writeFile } from "node:fs/promises";
 import { dirname, resolve } from "node:path";
 
-import { loadNativeBackend } from "./nativeBackend.js";
+import { loadNativeBackend, nativeFontResolver } from "./nativeBackend.js";
 
 import {
   drawResolvedGraphicSpec,
@@ -73,10 +73,10 @@ export async function renderToPDFBuffer(program, options = {}) {
   const target = resolveGraphicRenderTarget(graphicSpec);
   requirePDFPageDimensions(target);
   preflightCanvasGraphicSpec(target);
-  const { PDFDocument, createCanvas } = await loadNativeBackend();
+  const { PDFDocument, createCanvas, GlobalFonts } = await loadNativeBackend();
   const document = new PDFDocument(metadata);
   const context = document.beginPage(target.width, target.height);
-  drawResolvedGraphicSpec(target, context, {createCanvas});
+  drawResolvedGraphicSpec(target, context, {createCanvas, resolveFontFamily: nativeFontResolver(GlobalFonts)});
   document.endPage();
   const buffer = document.close();
   return Object.freeze({

package/src/renderers/png.js

@@ -2,7 +2,7 @@ import { mkdir, writeFile } from "node:fs/promises";
 import { dirname, resolve } from "node:path";
 import { renderCanvasProgram } from "./canvas/index.js";
 import { validateRendererOptions } from "./options.js";
-import { loadNativeBackend } from "./nativeBackend.js";
+import { loadNativeBackend, nativeFontResolver } from "./nativeBackend.js";
 
 const PNG_OPTIONS = new Set(["output", "pixelRatio"]);
 const BUFFER_OPTIONS = new Set(["pixelRatio"]);
@@ -10,9 +10,10 @@ const BUFFER_OPTIONS = new Set(["pixelRatio"]);
 export async function renderToPNGBuffer(program, options = {}) {
   validateRendererOptions(options, BUFFER_OPTIONS, "renderToPNGBuffer options");
   const { pixelRatio = 1 } = options;
-  const { createCanvas } = await loadNativeBackend();
+  const { createCanvas, GlobalFonts } = await loadNativeBackend();
   const canvas = createCanvas(1, 1);
-  renderCanvasProgram(program, canvas.getContext("2d"), { pixelRatio }, createCanvas);
+  renderCanvasProgram(program, canvas.getContext("2d"), { pixelRatio }, createCanvas,
+    { resolveFontFamily: nativeFontResolver(GlobalFonts) });
   // Canvas drawing is synchronous; encoding uses the native async worker.
   const buffer = await canvas.encode("png");
   return Object.freeze({