ggaction 0.0.17 → 0.0.18

package/src/materialization/scales/policies/series.js

@@ -27,11 +27,13 @@ export function resolveSeriesLayoutDomain({
       seriesLayouts[index] === undefined &&
       !isSourceOwnedText(consumer.layer)
   );
+  const layout = activeLayouts[0].layout;
   const compatibleDirect = directConsumers.every(({ consumer }) =>
     layoutConsumers.every(({ consumer: layoutConsumer }) => {
       const aggregate = layoutConsumer.encoding.aggregate;
       const directEncoding = consumer.encoding;
       return directEncoding.fieldType === "quantitative" && (
+        layout === "overlay" ||
         Object.hasOwn(directEncoding, "datum") ||
         (
           aggregate !== "count" &&
@@ -45,7 +47,6 @@ export function resolveSeriesLayoutDomain({
       `Series layout scale "${id}" cannot be shared with another policy.`
     );
   }
-  const layout = activeLayouts[0].layout;
   const values = [
     ...activeLayouts.flatMap(item => item.values),
     ...directConsumers.flatMap(item => item.values)

package/src/materialization/scales/resolve.js

@@ -160,7 +160,7 @@ function resolveContinuousScale({
 }) {
   return {
     type: isSequentialColor
-      ? "sequential"
+      ? scale.type
       : isOrdinalAppearance
         ? validateOrdinalScaleType(scale.type)
         : scale.type === "time"
@@ -377,7 +377,7 @@ export function resolveScaleMaterialization(options) {
   validateMeasuredRadiusConsumers({ scale, domain, range, consumers, markConfigs, thetaScales });
   if (channel === "shape" && domain.length > range.length) {
     throw new Error(
-      `Shape scale "${id}" requires at least one distinct shape per domain value.`
+      `Shape scale "${id}" requires at least one shape entry per domain value.`
     );
   }
 
@@ -440,7 +440,9 @@ export function resolveScaleMaterialization(options) {
     const temporalBarBand = resolveTemporalBarBand(
       valuesByConsumer,
       domain,
-      range
+      range,
+      markConfigs,
+      Array.isArray(scale.range)
     );
     if (temporalBarBand !== undefined) {
       resolvedScale = {

package/src/materialization/selection/items/arc.js

@@ -16,7 +16,7 @@ export function resolveArcItems(program, layer, dataset) {
     thetaScale,
     ...(radiusScale === undefined ? {} : { radiusScale }),
     frame,
-    innerRadiusRatio: program.markConfigs[layer.id]?.innerRadius ?? 0
+    innerRadius: program.markConfigs[layer.id]?.innerRadius ?? 0
   });
   const graphic = program.graphicSpec.objects[layer.id];
   const stroke = layer.encoding?.stroke;

package/src/materialization/selection/items/bar.js

@@ -1,3 +1,4 @@
+import { hasRectRadius } from "../../../grammar/roundedRect.js";
 import { deriveSeriesBarCells } from "../../../grammar/bars/aggregate.js";
 import { readSeriesIdentity } from "../../../grammar/pathSeries.js";
 import {
@@ -128,9 +129,12 @@ function histogramDefinitions(program, layer, dataset) {
 }
 
 function rangedDefinitions(layer, dataset) {
+  const measure = resolveBarGrain(layer) === BAR_GRAINS.centered ? resolveBarChannels(layer).measure : undefined;
   return dataset.values.map(row => ({
     fields: ownFields(row),
-    channels: channelMapFromRow(row, layer),
+    channels: { ...channelMapFromRow(row, layer),
+      ...(measure !== undefined && layer.encoding[`${measure}2`] === undefined
+        ? { [measure]: 0, [`${measure}2`]: row[layer.encoding[measure].field] } : {}) },
     members: [row]
   }));
 }
@@ -205,16 +209,13 @@ export function resolveBarItems(program, layer, dataset, selectionGrain) {
     ? histogramDefinitions(program, layer, dataset)
     : grain === BAR_GRAINS.aggregate
       ? aggregateCellDefinitions(program, layer, dataset)
-      : grain === BAR_GRAINS.ranged
+      : [BAR_GRAINS.ranged, BAR_GRAINS.centered].includes(grain)
         ? rangedDefinitions(layer, dataset)
         : undefined;
   if (definitions === undefined) {
     throw new Error(`Bar mark "${layer.id}" is incomplete for selection.`);
   }
-  const graphicTypes = Object.hasOwn(
-    program.markConfigs[layer.id]?.barAppearance ?? {},
-    "cornerRadius"
-  ) ? ["rect", "path"] : "rect";
+  const graphicTypes = hasRectRadius(program.markConfigs[layer.id]?.barAppearance) ? ["rect", "path"] : "rect";
   if (selectionGrain === "stack") {
     return finalizeItems(
       program,

package/src/materialization/selection/items/path.js

@@ -59,15 +59,16 @@ export function resolveLineItems(program, layer, dataset) {
   const derived = deriveLineSeries(
     dataset.values,
     layer,
-    x?.bin === undefined
-      ? undefined
-      : {
+    {
+      xDomain: program.resolvedScales[x?.scale]?.domain,
+      ...(x?.bin === undefined ? {} : {
           xBinBoundaries: resolveLineBins(
             dataset.values,
             layer,
             requireSemanticScale(program, x.scale)
           ).boundaries
-        }
+        })
+    }
   );
   return finalizeItems(
     program,
@@ -82,8 +83,8 @@ export function resolveAreaItems(program, layer, dataset) {
   const transform = findUpstreamTransform(program, dataset, "density");
   const derived = transform === undefined
     ? layer.encoding?.y?.stack === "center"
-      ? deriveCenteredAreaSeries(dataset.values, layer)
-      : deriveAreaSeries(dataset.values, layer)
+      ? deriveCenteredAreaSeries(dataset.values, layer, { xDomain: program.resolvedScales[layer.encoding.x?.scale]?.domain, yDomain: program.resolvedScales[layer.encoding.y?.scale]?.domain })
+      : deriveAreaSeries(dataset.values, layer, { xDomain: program.resolvedScales[layer.encoding.x?.scale]?.domain, yDomain: program.resolvedScales[layer.encoding.y?.scale]?.domain })
     : deriveDensityAreaSeries(dataset.values, layer, transform);
   return finalizeItems(
     program,

package/src/materialization/selection/items/rect.js

@@ -1,5 +1,5 @@
 import { rectUsesFields } from "../../../grammar/rects.js";
-import { readRectItemGeometry } from "../../../grammar/roundedRect.js";
+import { hasRectRadius, readRectItemGeometry } from "../../../grammar/roundedRect.js";
 import { resolveRectRows } from "../../rect.js";
 import {
   channelMapFromRow,
@@ -40,7 +40,7 @@ function resolveGradientPlotItems(program, layer, dataset) {
 
 export function resolveRectItems(program, layer, dataset) {
   const graphic = program.graphicSpec.objects[layer.id];
-  const rounded = Object.hasOwn(program.markConfigs[layer.id] ?? {}, "cornerRadius");
+  const rounded = hasRectRadius(program.markConfigs[layer.id]);
   const compatibleCollection = rounded && graphic?.type === "collection" &&
     graphic.items?.every(item => ["rect", "path"].includes(item.type));
   if (

package/src/materialization/text.js

@@ -5,7 +5,7 @@ import {
   resolveMarkLabelPlacement
 } from "../layout/labels.js";
 import { resolveMarkLabelValues } from "../grammar/markLabels.js";
-import { formatTextValue } from "../grammar/text.js";
+import { formatTextValue, resolveTextLines } from "../grammar/text.js";
 import { normalizePositionDatum } from "../grammar/positionDatum.js";
 import { mapOrdinalPositionValues } from "../grammar/scales/index.js";
 import { findDataset } from "../selectors/datasets.js";
@@ -274,12 +274,14 @@ function concreteTextItem(config, position, text, { offsets = true } = {}) {
   if (text === undefined || !Number.isFinite(x) || !Number.isFinite(y)) {
     return undefined;
   }
+  const lines = resolveTextLines(text, config);
   return {
     type: "text",
     properties: {
       x: x + (offsets ? config.dx : 0),
       y: y + (offsets ? config.dy : 0),
       text,
+      ...(lines === undefined ? {} : { lines }),
       fill: config.fill,
       opacity: config.opacity,
       fontSize: config.fontSize,
@@ -310,6 +312,11 @@ function relativeLuminance(color) {
 }
 
 function sourceTextConfig(config, source, item) {
+  if (config.inheritColor && config.fillExplicit !== true) {
+    const fill = item.properties[config.inheritColor];
+    if (typeof fill !== "string") throw new Error(`Source mark "${source.id}" has no resolved ${config.inheritColor} color.`);
+    return { ...config, fill };
+  }
   if (
     !["arc", "rect"].includes(source.mark.type) ||
     config.fillExplicit === true
@@ -383,6 +390,7 @@ function resolveSourceTextItems(program, layer, config) {
       geometry: sourcePlacementGeometry(program, source, item),
       text: {
         text,
+        lines: resolveTextLines(text, resolvedConfig),
         fontSize: resolvedConfig.fontSize,
         fontFamily: resolvedConfig.fontFamily,
         fontWeight: resolvedConfig.fontWeight,
@@ -396,7 +404,7 @@ function resolveSourceTextItems(program, layer, config) {
     if (!resolved.visible) return [];
     if (
       resolved.anchor.startsWith("outside") &&
-      config.fillExplicit !== true
+      config.fillExplicit !== true && !config.inheritColor
     ) {
       resolvedConfig = config;
     }
@@ -420,7 +428,7 @@ function resolveRowTextItems(program, layer, config) {
     throw new Error(`Text mark "${layer.id}" requires an existing dataset.`);
   }
   const dataset = applyItemMissingPolicy(layer, sourceDataset);
-  const encodings = [layer.encoding?.x, layer.encoding?.y, layer.encoding?.text];
+  const encodings = [layer.encoding?.x, layer.encoding?.y, layer.encoding?.text, layer.encoding?.color];
   const length = encodings.some(encoding => encoding !== undefined && Object.hasOwn(encoding, "field"))
     ? dataset.values.length
     : 1;
@@ -454,9 +462,10 @@ function resolveRowTextItems(program, layer, config) {
   const rows = length === 1 && dataset.values.length === 0
     ? [undefined]
     : dataset.values.slice(0, length);
+  const fills = resolveRowEncodingValues(program, layer, dataset, "color");
   return rows.flatMap((row, index) => {
     const concrete = concreteItem(
-      config,
+      fills === undefined ? config : { ...config, fill: fills[index] },
       { x: x[index], y: y[index] },
       contentValue(layer.encoding.text, row),
       layer.encoding.text.format

package/src/materialization/textLines.js

@@ -0,0 +1,15 @@
+import { freezeOwned } from "../core/immutable.js";
+
+// Reconcile optional derived line geometry without recreating its text graphic.
+// The owning wrapped domain materializer records the transition.
+export function materializeTextLines(program, id, lines) {
+  if (lines !== undefined) return program.editGraphics({ target: id, property: "lines", value: lines });
+  const graphic = program.graphicSpec.objects[id];
+  if (!Object.hasOwn(graphic.properties, "lines")) return program;
+  const { lines: _lines, ...properties } = graphic.properties;
+  return program._clone({ graphicSpec: freezeOwned({ ...program.graphicSpec,
+    objects: freezeOwned({ ...program.graphicSpec.objects,
+      [id]: freezeOwned({ ...graphic, properties: freezeOwned(properties) })
+    })
+  }) });
+}

package/src/persistence/codec.js

@@ -5,7 +5,7 @@ export function invalidSnapshot(message, optionPath) {
   return annotateError(new TypeError(message), { code: "unsupported-format", optionPath });
 }
 
-export function encodeValue(value, path = "payload", ancestors = new WeakSet()) {
+export function encodeValue(value, path = "payload", ancestors = new WeakSet(), shared) {
   if (value === null || typeof value === "string" || typeof value === "boolean") return value;
   if (value === undefined) return ["undefined"];
   if (typeof value === "bigint") return ["bigint", value.toString()];
@@ -17,6 +17,7 @@ export function encodeValue(value, path = "payload", ancestors = new WeakSet())
   if (ancestors.has(value)) throw invalidSnapshot(`Cannot serialize a cycle at ${path}.`, path);
   if (!Array.isArray(value) && !isPlainObject(value)) throw invalidSnapshot(`Cannot serialize a class instance at ${path}.`, path);
   if (Object.getOwnPropertySymbols(value).length) throw invalidSnapshot(`Cannot serialize symbol keys at ${path}.`, path);
+  if (shared?.seen.has(value)) return shared.seen.get(value);
   const keys = Object.getOwnPropertyNames(value);
   if (Array.isArray(value) ? keys.some(key => key !== "length" && !(/^(0|[1-9]\d*)$/.test(key) && Number(key) < value.length)) :
       keys.some(key => !Object.getOwnPropertyDescriptor(value, key).enumerable)) {
@@ -25,18 +26,48 @@ export function encodeValue(value, path = "payload", ancestors = new WeakSet())
   ancestors.add(value);
   const result = Array.isArray(value)
     ? ["array", Array.from({ length: value.length }, (_, index) => Object.hasOwn(value, index)
-        ? encodeValue(value[index], `${path}[${index}]`, ancestors) : ["hole"])]
-    : ["object", Object.entries(value).map(([key, child]) => [key, encodeValue(child, `${path}.${key}`, ancestors)])];
+        ? encodeValue(value[index], `${path}[${index}]`, ancestors, shared) : ["hole"])]
+    : ["object", Object.entries(value).map(([key, child]) => [key, encodeValue(child, `${path}.${key}`, ancestors, shared)])];
   ancestors.delete(value);
+  if (shared !== undefined && Array.isArray(value) && value.length >= 32) {
+    const key = JSON.stringify(result);
+    let index = shared.keys.get(key);
+    if (index === undefined) {
+      index = shared.arrays.length;
+      shared.keys.set(key, index);
+      shared.arrays.push(result);
+    }
+    const reference = ["reference", index];
+    shared.seen.set(value, reference);
+    return reference;
+  }
   return result;
 }
 
-export function decodeValue(value, path = "payload") {
+export function encodeSharedValue(value) {
+  const shared = { arrays: [], keys: new Map(), seen: new WeakMap() };
+  const root = encodeValue(value, "payload", new WeakSet(), shared);
+  return ["shared", shared.arrays, root];
+}
+
+export function decodeValue(value, path = "payload", references) {
   if (value === null || typeof value === "string" || typeof value === "boolean") return value;
   if (typeof value === "number" && Number.isFinite(value) && !Object.is(value, -0)) return value;
   const invalid = () => { throw invalidSnapshot(`Invalid encoded value at ${path}.`, path); };
   if (!Array.isArray(value)) return invalid();
   const [tag, payload] = value;
+  if (tag === "shared" && references === undefined && value.length === 3 && Array.isArray(payload)) {
+    const arrays = [];
+    for (const [index, encoded] of payload.entries()) {
+      if (!Array.isArray(encoded) || encoded[0] !== "array") return invalid();
+      arrays.push(decodeValue(encoded, `${path}.arrays[${index}]`, arrays));
+    }
+    return decodeValue(value[2], path, arrays);
+  }
+  if (tag === "reference" && references !== undefined && value.length === 2 &&
+      Number.isInteger(payload) && payload >= 0 && payload < references.length) {
+    return references[payload];
+  }
   if (tag === "undefined" && value.length === 1) return undefined;
   if (value.length !== 2) return invalid();
   if (tag === "bigint" && typeof payload === "string" && /^(?:0|-?[1-9]\d*)$/.test(payload)) return BigInt(payload);
@@ -47,7 +78,7 @@ export function decodeValue(value, path = "payload") {
     const result = new Array(payload.length);
     payload.forEach((child, index) => {
       if (Array.isArray(child) && child.length === 1 && child[0] === "hole") return;
-      result[index] = decodeValue(child, `${path}[${index}]`);
+      result[index] = decodeValue(child, `${path}[${index}]`, references ?? []);
     });
     return result;
   }
@@ -56,7 +87,7 @@ export function decodeValue(value, path = "payload") {
     for (const entry of payload) {
       if (!Array.isArray(entry) || entry.length !== 2 || typeof entry[0] !== "string" || Object.hasOwn(result, entry[0])) return invalid();
       Object.defineProperty(result, entry[0], {
-        value: decodeValue(entry[1], `${path}.${entry[0]}`), enumerable: true, writable: true, configurable: true
+        value: decodeValue(entry[1], `${path}.${entry[0]}`, references ?? []), enumerable: true, writable: true, configurable: true
       });
     }
     return result;

package/src/persistence/validation.js

@@ -1,3 +1,9 @@
+import { LEGEND_TITLE_STYLE_KEYS, validateLegendTitleAlignment } from "../grammar/legendTitleStyle.js";
+import { validateAreaPaintConfig } from "../grammar/areaPaint.js";
+import { validateOptionObject, validateKeys, validatePositiveFinite, validateNonNegativeFinite, validateNonEmptyString, validateGeneratedItemLimit } from "../core/validation.js";
+import { isContinuousColorScaleType } from "../grammar/scales/types.js";
+import { validateLegendGroupState } from "../grammar/legendGroups.js";
+import { validateLegendGradient } from "../grammar/legendGradient.js";
 import { normalizeTextMetricProfile } from "../core/textMetricProfile.js";
 import { isPlainObject } from "../core/immutable.js";
 import { validateUserId } from "../core/identifiers.js";
@@ -142,6 +148,44 @@ export function validateProgramState(program, path) {
   for (const key of ["resolvedScales", "materializationConfigs", "context"]) requireObject(program[key], `${path}.${key}`);
   for (const key of ["marks", "guides"]) requireObject(program.materializationConfigs[key], `${path}.materializationConfigs.${key}`);
   if (program.materializationConfigs.textMetrics !== undefined) normalizeTextMetricProfile(program.materializationConfigs.textMetrics);
+  if (program.guideConfigs.legendGroups !== undefined) validateLegendGroupState(program.guideConfigs.legendGroups);
+  for (const [kind, config] of Object.entries(program.guideConfigs.legend ?? {})) {
+    if (config.titleStyle !== undefined) {
+      validateOptionObject(config.titleStyle, LEGEND_TITLE_STYLE_KEYS, "Stored legend title style");
+      validateLegendTitleAlignment(config.titleStyle, config.titlePosition);
+    }
+    if (config.inferredOffset !== undefined && typeof config.inferredOffset !== "boolean") throw invalidSnapshot("Invalid legend offset inference.", path);
+    if (["gradient", "strokeGradient"].includes(kind) && config.representation !== "symbols") {
+      validateLegendGradient(config.gradient, "Stored legend gradient");
+    }
+    if (config.representation === undefined) continue;
+    if (kind !== "gradient" || !["symbols", "gradient"].includes(config.representation)) throw invalidSnapshot("Invalid continuous color legend representation.", path);
+    if (config.representation === "symbols") {
+      if (config.gradient !== undefined) throw invalidSnapshot("Symbol color legend cannot store gradient dimensions.", path);
+      requireObject(config.sampling, path);
+      const sample = config.sampling;
+      exactKeys(sample, sample.mode === "values" ? ["mode", "values", "count"] : ["mode", "count"], path);
+      if (!["auto", "values"].includes(sample.mode)) throw invalidSnapshot("Invalid color legend sample mode.", path);
+      if (!Number.isInteger(sample.count) || sample.count < 2) throw invalidSnapshot("Invalid color legend sample count.", path);
+      validateGeneratedItemLimit(sample.count, "Color legend sample count");
+      const scale = program.resolvedScales[config.scale];
+      if (!isContinuousColorScaleType(scale?.type)) throw invalidSnapshot("Sampled color legend requires a continuous color scale.", path);
+      if (sample.mode === "values") {
+        requireArray(sample.values, path);
+        if (!sample.values.length || sample.values.length > 100 || sample.values.some((value, index) => !Number.isFinite(value) || index > 0 && value <= sample.values[index - 1] || value < Math.min(...scale.domain) || value > Math.max(...scale.domain) || scale.type === "log" && value <= 0)) throw invalidSnapshot("Invalid exact color legend samples.", path);
+      }
+      requireObject(config.symbol, path);
+      validateKeys(config.symbol, ["type", "radius", "stroke", "strokeWidth"], "Stored sampled color symbol");
+      if (config.symbol.type !== "point") throw invalidSnapshot("Invalid sampled color symbol type.", path);
+      validatePositiveFinite(config.symbol.radius, "Stored sampled color radius");
+      validateNonNegativeFinite(config.symbol.strokeWidth, "Stored sampled color strokeWidth");
+      if (config.symbol.stroke !== undefined) validateNonEmptyString(config.symbol.stroke, "Stored sampled color stroke");
+      if (!["left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right"].includes(config.position) || !["horizontal", "vertical"].includes(config.direction) || config.layout !== "edge" || !["left", "center", "right"].includes(config.align) || !["top", "left"].includes(config.titlePosition) || config.columns !== undefined && (!Number.isInteger(config.columns) || config.columns < 1)) throw invalidSnapshot("Invalid sampled color item layout.", path);
+      validatePositiveFinite(config.itemGap, "Stored sampled color itemGap");
+      validateNonNegativeFinite(config.offset, "Stored sampled color offset");
+    } else if (["sampling", "symbol", "columns", "direction", "layout"].some(key => config[key] !== undefined)) throw invalidSnapshot("Gradient color legend cannot store symbol representation settings.", path);
+  }
+
   const selections = program.materializationConfigs.selections ?? {};
   requireObject(selections, `${path}.materializationConfigs.selections`);
   for (const [id, selection] of Object.entries(selections)) {
@@ -167,6 +211,9 @@ export function validateProgramState(program, path) {
   }
   for (const id of Object.keys(program.markConfigs)) {
     if (!resources.get("mark").has(id)) throw invalidSnapshot(`Mark config "${id}" has no layer owner.`, path);
+    if (resources.get("mark").get(id).mark.type === "area") {
+      validateAreaPaintConfig(program.markConfigs[id]);
+    }
   }
   for (const kind of ["data", "mark"]) {
     const visited = new Set();

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);
     }
@@ -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,4 @@
+import { resolveCanvasSolidPaint } from "./fill.js";
 import { annotateError } from "../../core/diagnostics.js";
 import { drawCircleGraphic } from "./circle.js";
 import { drawLineGraphic } from "./line.js";
@@ -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);
 }
 

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.lineTo(x, y);
+    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/svg.js

@@ -419,13 +419,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) {