ggaction 0.0.17 → 0.0.19

package/src/persistence.js

@@ -1,9 +1,9 @@
 import { ChartProgram } from "./ChartProgram.js";
 import { BasicChartProgram } from "./BasicChartProgram.js";
-import { cloneAndFreeze } from "./core/immutable.js";
+import { cloneAndFreeze, freezeOwned } from "./core/immutable.js";
 import { hasRegisteredExtension, isBuiltinProgramClass } from "./core/extensionRegistry.js";
 import { packageVersion } from "./version.js";
-import { decodeValue, encodeValue, invalidSnapshot } from "./persistence/codec.js";
+import { decodeValue, encodeValue, encodeSharedValue, invalidSnapshot } from "./persistence/codec.js";
 import { exactKeys, requireObject, STATE_KEYS, validateGraphic, validateProgramState, validateTrace } from "./persistence/validation.js";
 import {
   deriveTransformSchema,
@@ -25,7 +25,7 @@ function canonicalState(program, extensions, path = "payload") {
 }
 
 function envelope(kind, payload, extensions = []) {
-  return JSON.stringify({ schemaVersion: kind === "editable" ? 2 : 1, kind, packageVersion, extensions, payload: encodeValue(payload) });
+  return JSON.stringify({ schemaVersion: kind === "editable" ? 3 : 1, kind, packageVersion, extensions, payload: kind === "editable" ? encodeSharedValue(payload) : encodeValue(payload) });
 }
 
 function readEnvelope(text, kind) {
@@ -33,7 +33,7 @@ function readEnvelope(text, kind) {
   let value;
   try { value = JSON.parse(text); } catch { throw invalidSnapshot("Snapshot must be valid JSON.", "snapshot"); }
   exactKeys(value, ["schemaVersion", "kind", "packageVersion", "extensions", "payload"], "snapshot");
-  const versions = kind === "editable" ? [1, 2] : [1];
+  const versions = kind === "editable" ? [1, 2, 3] : [1];
   if (!versions.includes(value.schemaVersion) || value.kind !== kind) {
     throw invalidSnapshot(
       `Unsupported snapshot schema or kind; expected schema ${versions.join(" or ")} ${kind}.`,
@@ -45,6 +45,9 @@ function readEnvelope(text, kind) {
       value.extensions.some(name => typeof name !== "string" || !hasRegisteredExtension(name)) || (kind === "graphic" && value.extensions.length)) {
     throw invalidSnapshot("Snapshot requires unknown, duplicate, or inapplicable extensions.", "snapshot.extensions");
   }
+  if (value.schemaVersion < 3 && value.payload?.[0] === "shared") {
+    throw invalidSnapshot("Shared array payloads require editable snapshot version 3.", "snapshot.payload");
+  }
   return { ...value, payload: decodeValue(value.payload) };
 }
 
@@ -64,7 +67,7 @@ function restoreState(state, extensions, path = "payload", { requireSchemas = fa
   if (requireSchemas) {
     for (const dataset of program.semanticSpec.datasets) {
       if (dataset.schema === undefined) {
-        throw invalidSnapshot(`Dataset "${dataset.id}" requires schema in editable snapshot version 2.`, `${path}.semanticSpec.datasets`);
+        throw invalidSnapshot(`Dataset "${dataset.id}" requires schema in editable snapshot version 2 or later.`, `${path}.semanticSpec.datasets`);
       }
       validateDatasetSchema(dataset.schema);
     }
@@ -93,7 +96,7 @@ function migrateStateSchemas(state) {
         sourceSchema,
         dataset.transform?.[0] ?? {},
         dataset.values,
-        { sourceId: dataset.source, ownerId: dataset.id }
+        { sourceId: dataset.source, ownerId: dataset.id, sourceTransform: byId.get(dataset.source)?.transform?.[0] }
       );
     }
     active.delete(id);
@@ -118,6 +121,15 @@ export function serializeProgram(program) {
   return envelope("editable", canonicalState(program, extensions), [...extensions].sort());
 }
 
+// Decoding creates fresh plain containers. Own them once across the whole graph
+// so child constructors retain shared immutable data instead of copying each pool.
+function ownDecodedState(value, seen = new WeakSet()) {
+  if (value === null || typeof value !== "object" || seen.has(value)) return;
+  seen.add(value);
+  for (const child of Object.values(value)) ownDecodedState(child, seen);
+  freezeOwned(value);
+}
+
 export function deserializeProgram(text) {
   const stored = readEnvelope(text, "editable");
   const extensions = new Set();
@@ -128,6 +140,7 @@ export function deserializeProgram(text) {
     restoreState(payload, new Set());
     payload = migrateStateSchemas(payload);
   }
+  ownDecodedState(payload);
   const program = restoreState(payload, extensions, "payload", { requireSchemas: true });
   if (extensions.size !== stored.extensions.length || stored.extensions.some(name => !extensions.has(name))) {
     throw invalidSnapshot("Snapshot extensions must exactly match its action traces.", "snapshot.extensions");

package/src/renderers/canvas/circle.js

@@ -1,3 +1,4 @@
+import { resolveCanvasSolidPaint } from "./fill.js";
 import { requireFiniteProperty } from "./validation.js";
 import { validateConcreteGraphicProperties } from
   "../../grammar/schemas/concreteGraphic.js";
@@ -25,7 +26,7 @@ function drawCircle(context, child, collectionId) {
     throw new Error(`Graphic "${graphicId}" requires opacity from 0 to 1.`);
   }
 
-  context.fillStyle = properties.fill;
+  context.fillStyle = resolveCanvasSolidPaint(properties.fill);
   context.globalAlpha = opacity;
   context.beginPath();
   context.arc(x, y, radius, 0, Math.PI * 2);
@@ -44,8 +45,10 @@ function drawCircle(context, child, collectionId) {
         `Graphic "${graphicId}" requires a non-negative strokeWidth.`
       );
     }
-    applyCanvasStroke(context, properties);
-    context.stroke();
+    if (strokeWidth > 0) {
+      applyCanvasStroke(context, properties);
+      context.stroke();
+    }
   }
 }
 

package/src/renderers/canvas/fill.js

@@ -4,10 +4,16 @@ import {
 } from "../../grammar/paint.js";
 import { resolveCanvasGradientCoordinates } from "./native.js";
 
+// SVG's no-paint keyword is not a valid Canvas color assignment. Assign a real
+// transparent color so the backend cannot retain a previous opaque paint.
+export function resolveCanvasSolidPaint(paint) {
+  return paint === "none" ? "rgba(0,0,0,0)" : paint;
+}
+
 export function applyCanvasFill(context, fill, bounds, graphicId) {
   validateFillPaint(fill, `${graphicId}.fill`);
   if (!isLinearGradientPaint(fill)) {
-    context.fillStyle = fill;
+    context.fillStyle = resolveCanvasSolidPaint(fill);
     return fill;
   }
   if (typeof context.createLinearGradient !== "function") {

package/src/renderers/canvas/index.js

@@ -1,3 +1,6 @@
+import { MAX_RASTER_DIMENSION, MAX_RASTER_PIXELS } from "./limits.js";
+import { prepareIsolatedGlyphs, drawIsolatedGlyph } from "./isolated.js";
+import { resolveCanvasSolidPaint } from "./fill.js";
 import { annotateError } from "../../core/diagnostics.js";
 import { drawCircleGraphic } from "./circle.js";
 import { drawLineGraphic } from "./line.js";
@@ -39,8 +42,6 @@ const DRAWING_CONTEXT_METHODS = Object.freeze([
   "rotate",
   "fillText"
 ]);
-const MAX_RASTER_DIMENSION = 32_767;
-const MAX_RASTER_PIXELS = 16_777_216;
 
 function requireDrawingContext(context) {
   if (context === null || typeof context !== "object") {
@@ -81,7 +82,7 @@ function fillCanvasBackground(context, id, canvas, width, height) {
     );
   }
   context.globalAlpha = 1;
-  context.fillStyle = canvas.properties.background;
+  context.fillStyle = resolveCanvasSolidPaint(canvas.properties.background);
   context.fillRect(0, 0, width, height);
 }
 
@@ -143,9 +144,10 @@ export function resolveGraphicRenderTarget(graphicSpec) {
   });
 }
 
-export function drawResolvedGraphicSpec(target, context) {
+export function drawResolvedGraphicSpec(target, context, options = {}) {
   requireDrawingContext(context);
   const { graphicSpec, canvasId, canvas, width, height } = target;
+  const isolated = options.isolated ?? prepareIsolatedGlyphs(target, context, options);
 
   fillCanvasBackground(context, canvasId, canvas, width, height);
 
@@ -161,14 +163,14 @@ export function drawResolvedGraphicSpec(target, context) {
         return;
       }
       if (!Array.isArray(object.items)) {
-        drawConcreteGraphic(context, id, object);
+        drawConcreteGraphic(context, id, object, isolated);
       }
     },
     item({ id, object, owner }) {
       drawConcreteGraphic(context, id, {
         ...object,
         type: object.type ?? owner.type
-      });
+      }, isolated);
     },
     exit({ id, object }) {
       if (
@@ -181,7 +183,7 @@ export function drawResolvedGraphicSpec(target, context) {
   });
 }
 
-export function render(program, context, { pixelRatio = 1 } = {}) {
+export function renderCanvasProgram(program, context, { pixelRatio = 1 } = {}, createCanvas) {
   const graphicSpec = requireProgramGraphicSpec(program);
 
   requireCanvasContext(context);
@@ -219,6 +221,7 @@ export function render(program, context, { pixelRatio = 1 } = {}) {
     ), { code: "resource-limit", operation: "render", optionPath: "physicalPixels", limit: MAX_RASTER_PIXELS, actual: physicalWidth * physicalHeight });
   }
   preflightCanvasGraphicSpec(target, pixelRatio);
+  const isolated = prepareIsolatedGlyphs(target, context, {pixelRatio, createCanvas});
 
   context.canvas.width = physicalWidth;
   context.canvas.height = physicalHeight;
@@ -234,16 +237,20 @@ export function render(program, context, { pixelRatio = 1 } = {}) {
   try {
     context.scale(pixelRatio, pixelRatio);
     context.clearRect(0, 0, width, height);
-    drawResolvedGraphicSpec(target, context);
+    drawResolvedGraphicSpec(target, context, {isolated, pixelRatio, createCanvas});
   } finally {
     context.restore();
   }
 }
 
-function drawConcreteGraphic(context, id, graphic) {
+export function render(program, context, options) {
+  return renderCanvasProgram(program, context, options);
+}
+
+function drawConcreteGraphic(context, id, graphic, isolated) {
   if (graphic.type === "collection") {
     for (const item of graphic.items ?? []) {
-      drawConcreteGraphic(context, item.id ?? id, item);
+      drawConcreteGraphic(context, item.id ?? id, item, isolated);
     }
     return;
   }
@@ -251,5 +258,9 @@ function drawConcreteGraphic(context, id, graphic) {
   if (draw === undefined) {
     throw new Error(`Canvas renderer does not support "${graphic.type}" yet.`);
   }
-  draw(context, id, graphic);
+  if (["normal","difference"].includes(graphic.properties?.blend)) {
+    drawIsolatedGlyph(context, id, graphic, draw, isolated);
+  } else {
+    draw(context, id, graphic);
+  }
 }

package/src/renderers/canvas/isolated.js

@@ -0,0 +1,166 @@
+import { resolvePrimitiveGraphicBounds } from "../../grammar/schemas/graphicBounds.js";
+import { walkGraphicTreeEvents } from "../../grammar/schemas/graphicTree.js";
+import { MAX_RASTER_DIMENSION, MAX_RASTER_PIXELS } from "./limits.js";
+
+function canvasFactory(context, supplied) {
+  if (supplied !== undefined) return supplied;
+  const canvas = context.canvas;
+  if (typeof canvas?.ownerDocument?.createElement === "function") {
+    return (width, height) => {
+      const source = canvas.ownerDocument.createElement("canvas");
+      source.width = width;
+      source.height = height;
+      return source;
+    };
+  }
+  if (canvas?.constructor && canvas.constructor !== Object) {
+    return (width, height) => new canvas.constructor(width, height);
+  }
+  throw new TypeError("Isolated glyph painting requires a compatible Canvas surface.");
+}
+
+function requireSurface(surface) {
+  const context = surface?.getContext?.("2d");
+  if (!context || ["save", "restore", "scale", "translate", "beginPath", "fillRect",
+    "fill", "stroke", "moveTo", "lineTo", "bezierCurveTo", "closePath", "setLineDash"]
+    .some(method => typeof context[method] !== "function")) {
+    throw new TypeError("Isolated glyph painting requires a compatible Canvas 2D surface.");
+  }
+  return context;
+}
+
+// This is renderer-private state: no surface or backend object enters graphicSpec.
+export function prepareIsolatedGlyphs(target, context, { pixelRatio = 1, createCanvas } = {}) {
+  const requested = Object.values(target.graphicSpec.objects).some(object =>
+    ["normal","difference"].includes(object.properties?.blend) ||
+    object.items?.some(item => ["normal","difference"].includes(item.properties?.blend)));
+  if (!requested) return undefined;
+  if (typeof context.drawImage !== "function" || typeof context.globalCompositeOperation !== "string") {
+    throw new TypeError("Isolated glyph painting requires Canvas drawImage and compositing support.");
+  }
+  const factory = canvasFactory(context, createCanvas);
+  let surface;
+  try {
+    surface = factory(1, 1);
+    const source = requireSurface(surface);
+    const hasGradient = Object.values(target.graphicSpec.objects).some(object =>
+      [object, ...(object.items ?? [])].some(item =>
+        ["normal","difference"].includes(item.properties?.blend) && item.properties.fill?.type === "linear-gradient"));
+    const normal=Object.values(target.graphicSpec.objects).some(object=>
+      [object,...(object.items??[])].some(item=>item.properties?.blend==="normal"));
+    if(normal){
+      if(typeof source.setTransform!=="function")throw new TypeError("Normal glyph opacity requires Canvas transform support.");
+      source.save();try{
+        source.globalCompositeOperation="destination-in";
+        if(source.globalCompositeOperation!=="destination-in")throw new TypeError("Normal glyph opacity requires source attenuation.");
+      }finally{source.restore();}
+      const circle=Object.values(target.graphicSpec.objects).some(object=>
+        [object,...(object.items??[])].some(item=>item.properties?.blend==="normal"&&(item.type??object.type)==="circle"));
+      if(circle&&typeof source.arc!=="function")throw new TypeError("Normal circle painting requires Canvas arcs.");
+    }
+    if (hasGradient && (typeof source.createLinearGradient !== "function" ||
+        typeof source.createLinearGradient(0, 0, 1, 0)?.addColorStop !== "function")) {
+      throw new TypeError("Isolated gradient painting requires Canvas linear gradients.");
+    }
+  } catch (error) {
+    throw new TypeError("Isolated glyph painting requires a compatible Canvas surface.", {cause:error});
+  }
+  context.save();
+  try {
+    const modes=new Set();
+    for(const object of Object.values(target.graphicSpec.objects))for(const item of [object,...(object.items??[])]){
+      if(item.properties?.blend!==undefined)modes.add(item.properties.blend==="normal"?"source-over":item.properties.blend);
+    }
+    for(const mode of modes){
+      context.globalCompositeOperation=mode;
+      if(context.globalCompositeOperation!==mode)throw new TypeError(`Canvas context does not support ${mode} compositing.`);
+    }
+  } finally { context.restore(); }
+
+  const plans = new Map();
+  // Ordered root graphics may be siblings of the Canvas, not its descendants.
+  const frames = [{offset:[0,0],clip:{left:0,top:0,right:target.width,bottom:target.height}}];
+  function plan(id, object, type) {
+    const properties = object.properties;
+    if (!["normal","difference"].includes(properties?.blend)) return;
+    const bounds = resolvePrimitiveGraphicBounds(type, properties);
+    if (!bounds) throw new Error(`Graphic "${id}" requires finite isolated paint bounds.`);
+    const {offset: [x, y], clip} = frames.at(-1);
+    const clipped = {
+      left: Math.max(bounds.left + x, clip.left),
+      right: Math.min(bounds.right + x, clip.right),
+      top: Math.max(bounds.top + y, clip.top),
+      bottom: Math.min(bounds.bottom + y, clip.bottom)
+    };
+    if (clipped.right <= clipped.left || clipped.bottom <= clipped.top) {
+      plans.set(id, {empty: true});
+      return;
+    }
+    // Align to destination pixels, including fractional nested translations.
+    const left = Math.max(Math.floor(clip.left * pixelRatio), Math.floor(clipped.left * pixelRatio) - 1);
+    const top = Math.max(Math.floor(clip.top * pixelRatio), Math.floor(clipped.top * pixelRatio) - 1);
+    const right = Math.min(Math.ceil(clip.right * pixelRatio), Math.ceil(clipped.right * pixelRatio) + 1);
+    const bottom = Math.min(Math.ceil(clip.bottom * pixelRatio), Math.ceil(clipped.bottom * pixelRatio) + 1);
+    const width = right - left, height = bottom - top;
+    if (![width, height].every(Number.isSafeInteger) || width < 1 || height < 1 ||
+        width > MAX_RASTER_DIMENSION || height > MAX_RASTER_DIMENSION ||
+        width * height > MAX_RASTER_PIXELS) {
+      throw new RangeError(`Graphic "${id}" isolated paint surface exceeds the raster allocation limit.`);
+    }
+    plans.set(id, {width, height, left: left / pixelRatio - x, top: top / pixelRatio - y});
+  }
+  walkGraphicTreeEvents(target.graphicSpec, {
+    enter({id, object}) {
+      if (object.type === "canvas") {
+        const parent = frames.at(-1);
+        const offset = id === target.canvasId ? [0, 0] :
+          [parent.offset[0] + object.properties.x, parent.offset[1] + object.properties.y];
+        const properties = object.properties;
+        const local = {left: offset[0], top: offset[1],
+          right: offset[0] + properties.width, bottom: offset[1] + properties.height};
+        const clip = {
+          left: Math.max(parent.clip.left, local.left), top: Math.max(parent.clip.top, local.top),
+          right: Math.min(parent.clip.right, local.right), bottom: Math.min(parent.clip.bottom, local.bottom)
+        };
+        frames.push({offset, clip});
+      }
+      if (!object.items) plan(id, object, object.type);
+    },
+    item({id, object, owner}) { plan(id, object, object.type ?? owner.type); },
+    exit({object}) { if (object.type === "canvas") frames.pop(); }
+  });
+  return {plans, surface, pixelRatio};
+}
+
+// Paint fill and outline together with opacity 1, then composite the source once.
+export function drawIsolatedGlyph(context, id, graphic, draw, prepared) {
+  const plan = prepared?.plans.get(id);
+  if (!plan) throw new Error(`Graphic "${id}" has no prepared isolated paint source.`);
+  if (plan.empty) return;
+  const {surface, pixelRatio} = prepared;
+  surface.width = plan.width;
+  surface.height = plan.height;
+  const source = requireSurface(surface);
+  source.scale(pixelRatio, pixelRatio);
+  source.translate(-plan.left, -plan.top);
+  const {blend, opacity = 1, ...properties} = graphic.properties;
+  draw(source, id, {...graphic, properties: {...properties, opacity: 1}});
+  if(blend==="normal"){
+    // Attenuate the complete source once. drawImage(globalAlpha) introduces
+    // additional native image-alpha quantization; source masking avoids it.
+    source.save();
+    try{
+      source.setTransform(1,0,0,1,0,0);
+      source.globalCompositeOperation="destination-in";
+      source.globalAlpha=opacity;
+      source.fillStyle="#fff";
+      source.fillRect(0,0,plan.width,plan.height);
+    }finally{source.restore();}
+  }
+  context.save();
+  try {
+    context.globalAlpha = blend==="normal"?1:opacity;
+    context.globalCompositeOperation = blend==="normal"?"source-over":blend;
+    context.drawImage(surface, plan.left, plan.top, plan.width / pixelRatio, plan.height / pixelRatio);
+  } finally { context.restore(); }
+}

package/src/renderers/canvas/limits.js

@@ -0,0 +1,3 @@
+// Shared raster allocation limits for root canvases and isolated glyph sources.
+export const MAX_RASTER_DIMENSION = 32_767;
+export const MAX_RASTER_PIXELS = 16_777_216;

package/src/renderers/canvas/line.js

@@ -33,6 +33,7 @@ function drawLine(context, child, collectionId) {
     throw new Error(`Graphic "${graphicId}" requires opacity from 0 to 1.`);
   }
 
+  if (strokeWidth === 0) return;
   context.globalAlpha = opacity;
   applyCanvasStroke(context, properties, properties.strokeDash ?? []);
   context.beginPath();

package/src/renderers/canvas/path.js

@@ -82,7 +82,7 @@ function drawPath(context, child, collectionId) {
     applyCanvasFill(context, properties.fill, bounds, graphicId);
     context.fill();
   }
-  if (hasStroke) {
+  if (hasStroke && strokeWidth > 0) {
     applyCanvasStroke(context, properties, strokeDash);
     context.stroke();
   }

package/src/renderers/canvas/rect.js

@@ -43,14 +43,17 @@ function drawRect(context, child, collectionId) {
     bottom: y + height
   }, graphicId);
   context.fillRect(x, y, width, height);
-  applyCanvasStroke(context, properties);
-  context.beginPath();
-  context.moveTo(x, y);
-  context.lineTo(x + width, y);
-  context.lineTo(x + width, y + height);
-  context.lineTo(x, y + height);
-  context.lineTo(x, y);
-  context.stroke();
+  // Canvas ignores lineWidth = 0 and would retain a previous nonzero width.
+  if (strokeWidth > 0) {
+    applyCanvasStroke(context, properties);
+    context.beginPath();
+    context.moveTo(x, y);
+    context.lineTo(x + width, y);
+    context.lineTo(x + width, y + height);
+    context.lineTo(x, y + height);
+    context.closePath();
+    context.stroke();
+  }
 }
 
 export function drawRectGraphic(context, id, graphic) {

package/src/renderers/canvas/stroke.js

@@ -1,8 +1,9 @@
+import { resolveCanvasSolidPaint } from "./fill.js";
 import { resolveStrokeDetails } from "../../grammar/strokeStyle.js";
 
 export function applyCanvasStroke(context, properties, strokeDash = []) {
   const details = resolveStrokeDetails(properties);
-  context.strokeStyle = properties.stroke;
+  context.strokeStyle = resolveCanvasSolidPaint(properties.stroke);
   context.lineWidth = properties.strokeWidth;
   context.lineCap = details.lineCap;
   context.lineJoin = details.lineJoin;

package/src/renderers/canvas/text.js

@@ -1,3 +1,4 @@
+import { resolveCanvasSolidPaint } from "./fill.js";
 import { requireFiniteProperty, requireStringProperty } from "./validation.js";
 import { validateConcreteGraphicProperties } from
   "../../grammar/schemas/concreteGraphic.js";
@@ -72,15 +73,16 @@ function drawText(context, child, collectionId) {
   context.save();
 
   try {
-    context.fillStyle = fill;
+    context.fillStyle = resolveCanvasSolidPaint(fill);
     context.globalAlpha = opacity;
     const rendererFontWeight = normalizeRendererFontWeight(fontWeight);
-    context.font = `${rendererFontWeight} ${fontSize}px ${fontFamily}`;
+    context.font = `${properties.fontStyle === "italic" ? "italic " : ""}${rendererFontWeight} ${fontSize}px ${fontFamily}`;
     context.textAlign = textAlign;
     context.textBaseline = textBaseline;
     context.translate(x, y);
     context.rotate(rotation);
-    context.fillText(text, 0, 0);
+    if (properties.lines === undefined) context.fillText(text, 0, 0);
+    else for (const line of properties.lines) context.fillText(line.text, line.x, line.y);
   } finally {
     context.restore();
   }

package/src/renderers/pdf.js

@@ -73,10 +73,10 @@ export async function renderToPDFBuffer(program, options = {}) {
   const target = resolveGraphicRenderTarget(graphicSpec);
   requirePDFPageDimensions(target);
   preflightCanvasGraphicSpec(target);
-  const { PDFDocument } = await loadNativeBackend();
+  const { PDFDocument, createCanvas } = await loadNativeBackend();
   const document = new PDFDocument(metadata);
   const context = document.beginPage(target.width, target.height);
-  drawResolvedGraphicSpec(target, context);
+  drawResolvedGraphicSpec(target, context, {createCanvas});
   document.endPage();
   const buffer = document.close();
   return Object.freeze({

package/src/renderers/png.js

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

package/src/renderers/svg.js

@@ -265,7 +265,8 @@ function serializeRect(state, graphicId, properties) {
     ["stroke", properties.stroke],
     ["stroke-width", formatNumber(strokeWidth)],
     ...strokeDetailAttributes(properties, strokeWidth),
-    ["opacity", formatNumber(requireOpacity(properties, graphicId))]
+    ["opacity", formatNumber(requireOpacity(properties, graphicId))],
+    ["style", properties.blend === "difference" ? "mix-blend-mode:difference" : undefined]
   ]);
 }
 
@@ -362,7 +363,8 @@ function serializePath(state, graphicId, properties) {
     ["stroke-dasharray", strokeDash.length === 0
       ? undefined
       : strokeDash.map(formatNumber).join(" ")],
-    ["opacity", formatNumber(requireOpacity(properties, graphicId))]
+    ["opacity", formatNumber(requireOpacity(properties, graphicId))],
+    ["style", properties.blend === "difference" ? "mix-blend-mode:difference" : undefined]
   ]);
 }
 
@@ -419,13 +421,16 @@ function serializeText(state, graphicId, properties) {
     ["font-family", fontFamily],
     ["font-size", formatNumber(fontSize)],
     ["font-weight", normalizeRendererFontWeight(fontWeight)],
+    ["font-style", properties.fontStyle],
     ["text-anchor", TEXT_ANCHORS[textAlign]],
     ["dominant-baseline", DOMINANT_BASELINES[textBaseline]],
     ["opacity", formatNumber(opacity)],
     ["transform", rotation === 0
       ? undefined
       : `rotate(${formatNumber(rotationDegrees)} ${formatNumber(x)} ${formatNumber(y)})`]
-  ], escapeText(text));
+  ], properties.lines === undefined ? escapeText(text) : properties.lines.map(line =>
+    element("tspan", [["x", formatNumber(x + line.x)], ["y", formatNumber(y + line.y)]], escapeText(line.text))
+  ).join(""));
 }
 
 function serializeConcreteGraphic(state, id, graphic) {
@@ -579,6 +584,10 @@ export function renderToSVG(program, options = {}) {
     resourceNamespace:
       resolvedOptions.resourceNamespace ?? resourceNamespace(graphicSpec)
   };
+  walkGraphicTreeEvents(graphicSpec, {
+    enter({object}) { if (object.properties?.blend === "difference") state.hasBlend = true; },
+    item({object}) { if (object.properties?.blend === "difference") state.hasBlend = true; }
+  });
   const body = serializeBody(
     graphicSpec,
     rootId,
@@ -602,6 +611,7 @@ export function renderToSVG(program, options = {}) {
     ["xmlns", SVG_NAMESPACE],
     ["width", formatNumber(width)],
     ["height", formatNumber(height)],
-    ["viewBox", `0 0 ${formatNumber(width)} ${formatNumber(height)}`]
+    ["viewBox", `0 0 ${formatNumber(width)} ${formatNumber(height)}`],
+    ["style", state.hasBlend ? "isolation:isolate" : undefined]
   ], `${accessible}${definitions}${body}`);
 }

package/src/selectors/axes.js

@@ -0,0 +1 @@
+const p=Object.freeze(["x","y"]),w=Object.freeze(["line","ticks","labels","title"]);function x(n){const e=n.semanticSpec?.guides?.axis??{},a=(n.guideConfigs??n.materializationConfigs?.guides)?.axis??{};return[...new Set([...Object.keys(e),...Object.keys(a)])].flatMap(i=>{const s=Object.hasOwn(e,i)?e[i]:void 0,c=Object.hasOwn(a,i)?a[i]:void 0,d=p.includes(i)?i:s?.channel;if(!p.includes(d))return[];const t=[...new Set((n.semanticSpec.layers??[]).filter(f=>f.encoding?.[d]?.scale===s?.scale).map(f=>f.coordinate).filter(Boolean))];return[{id:i,channel:d,semantic:s,config:c,scale:s?.scale,coordinate:s?.coordinate??(t.length===1?t[0]:void 0),named:i!==d,sides:[...new Set(i!==d?[s.position]:w.map(f=>c?.[f]?.position).filter(Boolean))]}]})}function g(n,e){return n===e?{}:{target:n}}function O(n,e,a={},{create:i=!1,whole:s=!1}={}){const c=x(n),d=c.filter(r=>r.channel===e);let t;if(Object.hasOwn(a,"target")){const r=a.target;if(t=c.find(l=>l.id===r),t===void 0||t.channel!==e)throw new Error(`Unknown ${e}-axis target "${r}".`)}else if(t=d.find(r=>r.id===e),t===void 0){if(d.length>1)throw new Error(`Multiple ${e}-axes require an explicit target.`);t=d[0]}const{target:f,...o}=a,u=t?.id??e;if(!t?.named&&o.position!==void 0&&c.some(r=>r.named)){const r=[...new Set((n.semanticSpec.layers??[]).filter(l=>l.encoding?.[e]?.scale===(o.scale??t?.scale??e)).map(l=>l.coordinate).filter(Boolean))];m(n,{id:u,channel:e,coordinate:t?.coordinate??(r.length===1?r[0]:void 0),position:o.position})}if(t?.named){if(o.scale!==void 0&&o.scale!==t.scale||o.coordinate!==void 0&&o.coordinate!==t.coordinate)throw new Error(`Axis "${u}" resource binding does not match the requested filter.`);if(!s&&o.position!==void 0&&o.position!==t.semantic.position)throw new Error(`Named axis "${u}" components share one side; edit the complete axis position.`);i&&(o.scale??=t.scale),s||(o.position??=t.semantic.position)}return{id:u,owner:t,options:o}}function m(n,{id:e,channel:a,coordinate:i,position:s}){for(const c of x(n))if(c.id!==e&&c.coordinate===i&&c.sides.includes(s))throw new Error(`Axis side "${s}" is already occupied on coordinate "${i}".`)}function b(n,e=n){const a=["Line","Ticks","Labels","Title"];if(e!==n)return a.map(s=>`axis_${e}__${s}`);const i=n==="radius"?"radial":n;return a.map(s=>`${i}Axis${s}`)}export{m as assertCartesianAxisSideAvailable,b as axisGraphicIds,g as axisTargetArgs,x as cartesianAxisOwners,O as selectCartesianAxis};

package/src/selectors/graphicCapacity.js

@@ -0,0 +1,38 @@
+import { annotateError } from "../core/diagnostics.js";
+import { findLayer } from "./layers.js";
+import { findDataset } from "./datasets.js";
+
+export function namespaceGraphicId(namespace, id) {
+  const encode = value => Array.from(value, character =>
+    character.codePointAt(0).toString(16).padStart(6, "0")
+  ).join("");
+  return `g${encode(namespace)}_${id}`;
+}
+
+function pointOwners(program, id) {
+  const layer = findLayer(program, id);
+  const dataset = layer?.mark?.type === "point" ? findDataset(program, layer.data) : undefined;
+  const owners = Array.isArray(dataset?.values) ? [{ layer, dataset }] : [];
+  for (const childId of program.compositionSpec?.children ?? []) {
+    const prefix = namespaceGraphicId(`${program.compositionSpec.id}-${childId}`, "");
+    const child = program.children[childId];
+    if (!id.startsWith(prefix) || child === undefined) continue;
+    const localId = id.slice(prefix.length);
+    if (child.graphicSpec.objects[localId] === undefined) continue;
+    owners.push(...pointOwners(child, localId));
+  }
+  return owners;
+}
+
+export function resolveGraphicItemCapacity(program, { id, label, type }) {
+  const owners = pointOwners(program, id);
+  if (owners.length > 1) throw annotateError(new Error("Point graphic ownership is ambiguous."), {
+    code: "ambiguous-resource", resourceId: id, candidates: owners.map(owner => owner.layer.id)
+  });
+  return {
+    pointOwned: owners.length === 1,
+    rawCount: owners[0]?.dataset.values.length,
+    graphicType: type ?? program.graphicSpec.objects[id]?.type,
+    label
+  };
+}

package/src/selectors/layers.js

@@ -37,3 +37,22 @@ export function resolveEligibleLayer(program, {
   if (candidates.length === 0) throw annotateError(new Error(`${label} requires an eligible layer.`), { code: "missing-resource", optionPath: targetOption });
   throw annotateError(new Error(`${label} ${targetOption} is ambiguous; provide ${targetOption}.`), { code: "ambiguous-resource", optionPath: targetOption, candidates: candidates.map(layer => layer.id) });
 }
+
+// Configured composite plots retain their established owner errors while sharing
+// the explicit/current/unique resolution order.
+export function resolveConfiguredOwner(program, requested, {
+  config, operation, kind, article = "a", materialized = false, missing, ambiguous
+}, validateUserId) {
+  const eligible = program.semanticSpec.layers.filter(layer => {
+    const value = program.markConfigs[layer.id]?.[config];
+    return materialized ? value?.materialized === true : value !== undefined;
+  });
+  const id = requested === undefined ? program.context.currentMark
+    : validateUserId(requested, `${kind[0].toUpperCase() + kind.slice(1)}-plot owner id`);
+  const owner = eligible.find(layer => layer.id === id);
+  if (owner !== undefined) return owner;
+  if (requested !== undefined) throw new Error(`Unknown ${kind}-plot owner "${id}".`);
+  if (eligible.length === 1) return eligible[0];
+  if (eligible.length === 0) throw new Error(missing ?? `${operation} requires ${article} ${kind} plot.`);
+  throw new Error(ambiguous ?? `${operation} target is ambiguous; provide target.`);
+}