ggaction 0.0.16 → 0.0.18

package/src/actions/marks/area/actions.js

@@ -1,3 +1,5 @@
+import { validateFillPaint } from "../../../grammar/paint.js";
+import { validateAreaPaintConfig } from "../../../grammar/areaPaint.js";
 import { validateAreaMissing } from "../../../grammar/areaEndpoints.js";
 import { action } from "../../../core/action.js";
 import { validateUserId } from "../../../core/identifiers.js";
@@ -81,7 +83,7 @@ const createAreaMark = /* @__PURE__ */ action(
     if (missing === "break" && ["density", "horizon"].some(type => findUpstreamTransform(this, findDataset(this, data), type))) {
       throw new Error("Area missing:break does not reinterpret density or horizon data.");
     }
-    const fill = validateNonEmptyString(args.fill ?? DEFAULT_COLORS.mark, "Area fill");
+    const fill = validateFillPaint(args.fill ?? DEFAULT_COLORS.mark, "Area fill");
     const opacity = validateUnitInterval(args.opacity ?? 0.2, "Area opacity");
     const curve = validateCurveInterpolation(args.curve ?? "linear");
     const { stroke, strokeWidth } = validateAreaCreateOutline(args);
@@ -127,14 +129,14 @@ const configureAreaStrokeFromFill = /* @__PURE__ */ action(
     }
     const { stroke: _stroke, ...config } = this.markConfigs[id] ?? {};
     void _stroke;
-    return this._withMarkConfig(id, {
+    return this._withMarkConfig(id, validateAreaPaintConfig({
       ...config,
       strokeFromFill: true,
       strokeWidth: validateNonNegativeFinite(
         args.strokeWidth ?? 1,
         "Area strokeWidth"
       )
-    });
+    }));
   }
 );
 
@@ -199,7 +201,7 @@ const rematerializeAreaMark = /* @__PURE__ */ action(
     if (args.scales !== false && strokeEncoding?.scale !== undefined) {
       resolved = resolved.rematerializeScale({ id: strokeEncoding.scale });
     }
-    const config = this.markConfigs[id];
+    const config = validateAreaPaintConfig(this.markConfigs[id]);
     const { paths, fills, strokes } = resolveAreaMaterialization({
       rows: dataset.values,
       layer,
@@ -273,7 +275,7 @@ const editAreaMark = /* @__PURE__ */ action(
     let config = { ...this.markConfigs[layer.id] };
     Object.assign(config, strokeDetails);
     if (Object.hasOwn(args, "fill")) {
-      config.fill = validateNonEmptyString(args.fill, "Area fill");
+      config.fill = validateFillPaint(args.fill, "Area fill");
       if (config.errorBand !== undefined) config.errorBand = { ...config.errorBand, fill: config.fill };
     }
     if (Object.hasOwn(args, "opacity")) {
@@ -314,6 +316,7 @@ const editAreaMark = /* @__PURE__ */ action(
       );
     }
 
+    validateAreaPaintConfig(config);
     let next = this._withMarkConfig(layer.id, config);
     if (Object.hasOwn(args, "missing")) {
       const missing = validateAreaMissing(args.missing);

package/src/actions/marks/area/materialize.js

@@ -6,6 +6,7 @@ import {
 } from "../../../grammar/areaSeries.js";
 import {
   mapContinuousScaleValues,
+  mapOrdinalPositionValues,
   mapOrdinalValues
 } from "../../../grammar/scales/index.js";
 import { mapScaleConsumerValues } from
@@ -37,9 +38,8 @@ function resolveAreaPaths({
   }
   return derived.series.map(series => {
     if (densityTransform === undefined && derived.orientation === "horizontal") {
-      const y = mapContinuousScaleValues(
-        series.values.map(value => value.y),
-        yScale
+      const y = (["point", "band"].includes(yScale.type) ? mapOrdinalPositionValues : mapContinuousScaleValues)(
+        series.values.map(value => value.y), yScale
       );
       const lower = mapContinuousScaleValues(
         series.values.map(value => value.x),
@@ -57,9 +57,8 @@ function resolveAreaPaths({
       );
     }
     if (densityTransform !== undefined && derived.mode === "x-density") {
-      const y = mapContinuousScaleValues(
-        series.values.map(value => value.y),
-        yScale
+      const y = (["point", "band"].includes(yScale.type) ? mapOrdinalPositionValues : mapContinuousScaleValues)(
+        series.values.map(value => value.y), yScale
       );
       const upper = mapContinuousScaleValues(
         series.values.map(value => value.x),
@@ -80,7 +79,7 @@ function resolveAreaPaths({
         { independentAxis: "y" }
       );
     }
-    const x = mapContinuousScaleValues(
+    const x = (["point", "band"].includes(xScale.type) ? mapOrdinalPositionValues : mapContinuousScaleValues)(
       series.values.map(value => value.x),
       xScale
     );
@@ -134,8 +133,8 @@ export function resolveAreaMaterialization({
     layer.encoding?.y?.stack === "center";
   const rawDerived = densityTransform === undefined
     ? centered
-      ? deriveCenteredAreaSeries(rows, layer)
-      : deriveAreaSeries(rows, layer)
+      ? deriveCenteredAreaSeries(rows, layer, { xDomain: xScale.domain })
+      : deriveAreaSeries(rows, layer, { xDomain: xScale.domain, yDomain: yScale.domain })
     : deriveDensityAreaSeries(rows, layer, densityTransform);
   const colorEncoding = layer.encoding?.color;
   const layout = layer.layout?.mode ?? colorEncoding?.layout ?? "overlay";

package/src/actions/marks/bar/create.js

@@ -10,14 +10,15 @@ import {
 } from "../shared.js";
 import { resolveMarkGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
-import { requestedRectStyleDetails } from
+import { requestedRectStyleDetails, RECT_RADIUS_PROPERTIES } from
   "../../../grammar/roundedRect.js";
 import { STROKE_STYLE_PROPERTIES } from
   "../../../grammar/strokeStyle.js";
+import { validateItemMissing } from "../../../grammar/itemMissing.js";
 
 const CREATE_OPTIONS = Object.freeze([
-  "id", "data", "fill", "opacity", "stroke", "strokeWidth",
-  "cornerRadius", ...STROKE_STYLE_PROPERTIES
+  "id", "data", "orientation", "missing", "fill", "opacity", "stroke", "strokeWidth",
+  ...RECT_RADIUS_PROPERTIES, ...STROKE_STYLE_PROPERTIES
 ]);
 
 export const createBarMark = /* @__PURE__ */ action(
@@ -28,6 +29,9 @@ export const createBarMark = /* @__PURE__ */ action(
   function (args = {}) {
     validateMarkOptions(args, CREATE_OPTIONS, "createBarMark");
     requestedRectStyleDetails(args, "createBarMark");
+    if (args.orientation !== undefined && !["vertical", "horizontal"].includes(args.orientation)) {
+      throw new Error("Bar orientation must be vertical or horizontal.");
+    }
     const id = resolveMarkId(this, args.id, {
       defaultId: "bar",
       label: "Bar mark id",
@@ -52,6 +56,15 @@ export const createBarMark = /* @__PURE__ */ action(
         property: `layer[${id}].data`,
         value: data
       });
+    if (Object.hasOwn(args, "missing")) {
+      created = created.editSemantic({
+        property: `layer[${id}].mark.missing`,
+        value: validateItemMissing(args.missing, "Bar missing")
+      });
+    }
+    if (args.orientation !== undefined) {
+      created = created.editSemantic({ property: `layer[${id}].mark.orientation`, value: args.orientation });
+    }
     created = applyLayeredMarkInheritance(created, id, inherited);
     created = created
       .createGraphics({
@@ -63,7 +76,7 @@ export const createBarMark = /* @__PURE__ */ action(
     created = materializeInheritedMark(created, id);
     const appearance = Object.fromEntries(
       [
-        "fill", "opacity", "stroke", "strokeWidth", "cornerRadius",
+        "fill", "opacity", "stroke", "strokeWidth", ...RECT_RADIUS_PROPERTIES,
         ...STROKE_STYLE_PROPERTIES
       ]
         .filter(property => Object.hasOwn(args, property))

package/src/actions/marks/bar/edit.js

@@ -9,14 +9,16 @@ import { canMaterializeBar } from "../../../materialization/marks/index.js";
 import { DEFAULT_BAR_STROKE_WIDTH } from "../../../materialization/bars/resolve.js";
 import { resolveEligibleLayer } from "../../../selectors/layers.js";
 import { validateMarkOptions } from "../shared.js";
-import { requestedRectStyleDetails } from
+import { requestedRectStyleDetails, RECT_RADIUS_PROPERTIES } from
   "../../../grammar/roundedRect.js";
 import { STROKE_STYLE_PROPERTIES } from
   "../../../grammar/strokeStyle.js";
 import { rematerializeExistingLegend } from "../../encodings/shared.js";
+import { validateFillPaint } from "../../../grammar/paint.js";
+import { validateItemMissing } from "../../../grammar/itemMissing.js";
 
 const EDIT_OPTIONS = Object.freeze([
-  "target", "fill", "opacity", "stroke", "strokeWidth", "cornerRadius",
+  "target", "missing", "fill", "opacity", "stroke", "strokeWidth", ...RECT_RADIUS_PROPERTIES,
   ...STROKE_STYLE_PROPERTIES
 ]);
 
@@ -29,12 +31,12 @@ export const editBarMark = /* @__PURE__ */ action(
     validateMarkOptions(args, EDIT_OPTIONS, "editBarMark");
     const styleDetails = requestedRectStyleDetails(args, "editBarMark");
     const changes = [
-      "fill", "opacity", "stroke", "strokeWidth", "cornerRadius",
+      "missing", "fill", "opacity", "stroke", "strokeWidth", ...RECT_RADIUS_PROPERTIES,
       ...STROKE_STYLE_PROPERTIES
     ];
     if (!changes.some(key => Object.hasOwn(args, key))) {
       throw new Error(
-        "editBarMark requires fill, opacity, stroke, or strokeWidth."
+        "editBarMark requires fill, opacity, stroke, or strokeWidth; missing is also editable."
       );
     }
     const requested = Object.hasOwn(args, "target")
@@ -55,17 +57,26 @@ export const editBarMark = /* @__PURE__ */ action(
         "editBarMark stroke conflicts with a field encoding; use encodeStroke with value to replace it."
       );
     }
+    if (Object.hasOwn(args, "opacity") && layer.encoding?.opacity !== undefined) {
+      throw new Error("editBarMark opacity conflicts with a field encoding; use encodeOpacity with value to replace it.");
+    }
     if (args.stroke === false && Object.hasOwn(args, "strokeWidth")) {
       throw new Error(
         "editBarMark cannot set strokeWidth while removing stroke."
       );
     }
 
-    const config = { ...this.markConfigs[layer.id] };
+    const semantic = Object.hasOwn(args, "missing")
+      ? this.editSemantic({
+          property: `layer[${layer.id}].mark.missing`,
+          value: validateItemMissing(args.missing, "Bar missing")
+        })
+      : this;
+    const config = { ...semantic.markConfigs[layer.id] };
     const appearance = { ...config.barAppearance };
     Object.assign(appearance, styleDetails);
     if (Object.hasOwn(args, "fill")) {
-      appearance.fill = validateNonEmptyString(args.fill, "Bar fill");
+      appearance.fill = validateFillPaint(args.fill, "Bar fill");
     }
     if (Object.hasOwn(args, "opacity")) {
       appearance.opacity = validateUnitInterval(args.opacity, "Bar opacity");
@@ -95,7 +106,7 @@ export const editBarMark = /* @__PURE__ */ action(
       );
     }
 
-    const next = this._withMarkConfig(layer.id, {
+    const next = semantic._withMarkConfig(layer.id, {
       ...config,
       barAppearance: appearance
     });

package/src/actions/marks/bar/materialize.js

@@ -13,19 +13,17 @@ import {
 import { rematerializeHighlightBaseline } from "../lifecycle.js";
 import { offsetCategoryRectangles } from
   "../../../materialization/categorySlotOffset.js";
-import { materializeRectItem } from "../../../grammar/roundedRect.js";
-import { STROKE_STYLE_PROPERTIES } from
-  "../../../grammar/strokeStyle.js";
+import { materializeRectItem, RECT_STYLE_PROPERTIES } from "../../../grammar/roundedRect.js";
 import { replaceGraphicItems } from "../../primitives/editGraphics.js";
 
 const REMATERIALIZE_OPTIONS = Object.freeze(["id", "scales"]);
 
 function editRectangles(program, id, rectangles) {
   const appearance = program.markConfigs[id]?.barAppearance ?? {};
-  const hasShapeStyle = ["cornerRadius", ...STROKE_STYLE_PROPERTIES]
+  const hasShapeStyle = RECT_STYLE_PROPERTIES
     .some(property => Object.hasOwn(appearance, property));
   if (hasShapeStyle) {
-    const radius = appearance.cornerRadius ?? 0;
+    const radius = appearance;
     return replaceGraphicItems(
       program,
       id,
@@ -92,6 +90,11 @@ export const rematerializeBarMark = /* @__PURE__ */ action(
       resolved = resolved.rematerializeScale({ id: strokeScaleId });
     }
 
+    const opacityScaleId = required.layer.encoding?.opacity?.scale;
+    if (opacityScaleId !== undefined && args.scales !== false) {
+      resolved = resolved.rematerializeScale({ id: opacityScaleId });
+    }
+
     if (required.materialization === "aggregate") {
       const offsetChannel = resolveBarOffsetChannel(required.layer);
       const offsetScaleId = required.layer.encoding?.[offsetChannel]?.scale;
@@ -104,7 +107,7 @@ export const rematerializeBarMark = /* @__PURE__ */ action(
       ));
     }
 
-    if (required.materialization === BAR_GRAINS.ranged) {
+    if ([BAR_GRAINS.ranged, BAR_GRAINS.centered].includes(required.materialization)) {
       const width = resolved.markConfigs[id]?.barWidth;
       return editRectangles(resolved, id, offsetCategoryRectangles(
         resolved, required.layer, deriveRangedRectangles(required, resolved, width)

package/src/actions/marks/line/actions.js

@@ -18,7 +18,7 @@ import {
 import { DEFAULT_COLORS } from "../../../theme/defaults.js";
 import { findDataset } from "../../../selectors/datasets.js";
 import { findLayer, resolveEligibleLayer } from "../../../selectors/layers.js";
-import { validateCurveInterpolation } from "../../../grammar/curveCommands.js";
+import { validateCurveInterpolation, validateCardinalTension } from "../../../grammar/curveCommands.js";
 import {
   resolveCoordinateBounds,
   resolveCoordinatePolarFrame
@@ -43,11 +43,11 @@ import {
 const DEFAULT_LINE_STROKE = DEFAULT_COLORS.mark;
 const DEFAULT_LINE_WIDTH = 2;
 const CREATE_OPTIONS = Object.freeze([
-  "id", "data", "stroke", "strokeWidth", "opacity", "curve", "closed",
+  "id", "data", "stroke", "strokeWidth", "opacity", "curve", "tension", "closed",
   ...STROKE_STYLE_PROPERTIES
 ]);
 const EDIT_OPTIONS = Object.freeze([
-  "target", "stroke", "strokeWidth", "opacity", "curve", "closed",
+  "target", "stroke", "strokeWidth", "opacity", "curve", "tension", "closed",
   ...STROKE_STYLE_PROPERTIES
 ]);
 const REMATERIALIZE_OPTIONS = Object.freeze(["id", "scales"]);
@@ -118,6 +118,7 @@ const createLineMark = /* @__PURE__ */ action(
       "Line strokeWidth"
     );
     const curve = validateCurveInterpolation(args.curve ?? "linear");
+    validateCardinalTension(args.tension, curve);
     const closed = Object.hasOwn(args, "closed")
       ? validateClosed(args.closed)
       : false;
@@ -151,6 +152,7 @@ const createLineMark = /* @__PURE__ */ action(
         {
           ...(Object.hasOwn(args, "strokeWidth") ? { strokeWidth } : {}),
           ...(Object.hasOwn(args, "curve") ? { curve } : {}),
+          ...(args.tension === undefined ? {} : { tension: args.tension }),
           ...(Object.hasOwn(args, "closed") ? { closed } : {}),
           ...strokeDetails
         }
@@ -277,7 +279,7 @@ const editLineMark = /* @__PURE__ */ action(
     validateMarkOptions(args, EDIT_OPTIONS, "editLineMark");
     const strokeDetails = requestedStrokeDetails(args, "editLineMark");
     if (!EDIT_OPTIONS.slice(1).some(key => Object.hasOwn(args, key))) {
-      throw new Error("editLineMark requires stroke, strokeWidth, opacity, curve, or closed.");
+      throw new Error("editLineMark requires stroke, strokeWidth, opacity, curve, tension, or closed.");
     }
     const target = Object.hasOwn(args, "target")
       ? validateUserId(args.target, "Line mark id")
@@ -315,6 +317,11 @@ const editLineMark = /* @__PURE__ */ action(
     })) {
       if (Object.hasOwn(args, key)) config[key] = validate(args[key], `Line ${key}`);
     }
+    if (args.curve !== undefined && args.curve !== "cardinal" && args.tension === undefined) {
+      delete config.tension;
+    }
+    if (Object.hasOwn(args, "tension")) config.tension = args.tension;
+    validateCardinalTension(config.tension, config.curve ?? "linear");
     validatePolarLineConfig(layer, config);
     const next = this._withMarkConfig(layer.id, config);
     const materialized = canMaterializeLine(next, layer)

package/src/actions/marks/line/materialize.js

@@ -3,6 +3,7 @@ import {
 } from "../../../grammar/lineSeries.js";
 import {
   mapContinuousScaleValues,
+  mapOrdinalPositionValues,
   normalizeStrokeDashPattern
 } from "../../../grammar/scales/index.js";
 import { buildCurvePathCommands } from
@@ -97,9 +98,7 @@ export function resolvePositionedLineMaterialization({
   const radiusScaleId = layer.encoding?.radius?.scale;
   const lineOptions = polar
     ? { thetaDomain: resolvedScales[thetaScaleId].domain }
-    : layer.encoding?.x?.bin === undefined
-      ? undefined
-      : { xBinBoundaries };
+    : { xBinBoundaries, xDomain: resolvedScales[xScaleId].domain };
   const derived = deriveLineSeries(rows, layer, lineOptions);
   const commands = polar
     ? derived.series.map(series => buildPolarLinePathCommands({
@@ -111,7 +110,9 @@ export function resolvePositionedLineMaterialization({
         closed: config.closed ?? false
       }))
     : derived.series.map(series => {
-        const x = mapContinuousScaleValues(
+        const mapX = ["nominal", "ordinal"].includes(layer.encoding.x.fieldType)
+          ? mapOrdinalPositionValues : mapContinuousScaleValues;
+        const x = mapX(
           series.values.map(value => value.x),
           resolvedScales[xScaleId]
         );
@@ -119,9 +120,12 @@ export function resolvePositionedLineMaterialization({
           series.values.map(value => value.y),
           resolvedScales[yScaleId]
         );
+        // A raw singleton retains its data position and series identity, but
+        // contributes no segment. Do not fabricate another observation.
+        if (series.values.length === 1) return [{ op: "M", x: x[0], y: y[0] }];
         return buildCurvePathCommands(
           series.values.map((_, index) => ({ x: x[index], y: y[index] })),
-          config.curve ?? "linear"
+          config.curve ?? "linear", config.tension
         );
       });
   const appearance = appearanceMapper(layer, resolvedScales,

package/src/actions/marks/point/create.js

@@ -16,9 +16,10 @@ import {
   resolveMarkId,
   validateMarkOptions
 } from "../shared.js";
+import { validateItemMissing } from "../../../grammar/itemMissing.js";
 
 const OPTIONS = Object.freeze([
-  "id", "data", "shape", "fill", "opacity", "stroke", "strokeWidth",
+  "id", "data", "missing", "shape", "fill", "opacity", "stroke", "strokeWidth",
   ...STROKE_STYLE_PROPERTIES
 ]);
 
@@ -61,6 +62,12 @@ export const createPointMark = /* @__PURE__ */ action(
         property: `layer[${id}].data`,
         value: data
       });
+    if (Object.hasOwn(args, "missing")) {
+      next = next.editSemantic({
+        property: `layer[${id}].mark.missing`,
+        value: validateItemMissing(args.missing, "Point missing")
+      });
+    }
     next = applyLayeredMarkInheritance(next, id, inherited)
       .createGraphics({
         id,

package/src/actions/marks/point/edit.js

@@ -13,9 +13,10 @@ import {
 import { resolveEligibleLayer } from "../../../selectors/layers.js";
 import { rematerializeExistingLegend } from "../../encodings/shared.js";
 import { validateMarkOptions } from "../shared.js";
+import { validateItemMissing } from "../../../grammar/itemMissing.js";
 
 const OPTIONS = Object.freeze([
-  "target", "shape", "fill", "opacity", "stroke", "strokeWidth",
+  "target", "missing", "shape", "fill", "opacity", "stroke", "strokeWidth",
   ...STROKE_STYLE_PROPERTIES
 ]);
 
@@ -28,12 +29,12 @@ export const editPointMark = /* @__PURE__ */ action(
     validateMarkOptions(args, OPTIONS, "editPointMark");
     const strokeDetails = requestedStrokeDetails(args, "editPointMark");
     const editable = [
-      "shape", "fill", "opacity", "stroke", "strokeWidth",
+      "missing", "shape", "fill", "opacity", "stroke", "strokeWidth",
       ...STROKE_STYLE_PROPERTIES
     ];
     if (!editable.some(property => Object.hasOwn(args, property))) {
       throw new Error(
-        "editPointMark requires shape, fill, opacity, stroke, or strokeWidth."
+        "editPointMark requires shape, fill, opacity, stroke, strokeWidth, or missing."
       );
     }
     if (args.target !== undefined) validateUserId(args.target, "Point mark id");
@@ -61,7 +62,13 @@ export const editPointMark = /* @__PURE__ */ action(
     if (Object.hasOwn(args, "opacity") && layer.encoding?.opacity?.field !== undefined) {
       throw new Error("editPointMark opacity conflicts with a field encoding; use encodeOpacity with value to replace it.");
     }
-    const config = { ...this.markConfigs[id] };
+    const semantic = Object.hasOwn(args, "missing")
+      ? this.editSemantic({
+          property: `layer[${id}].mark.missing`,
+          value: validateItemMissing(args.missing, "Point missing")
+        })
+      : this;
+    const config = { ...semantic.markConfigs[id] };
     Object.assign(config, strokeDetails);
     if (Object.hasOwn(args, "shape")) {
       config.shape = validatePointShape(args.shape);
@@ -89,7 +96,7 @@ export const editPointMark = /* @__PURE__ */ action(
       }
     }
     if (Object.hasOwn(args, "strokeWidth")) {
-      if (typeof config.stroke !== "string") {
+      if (typeof config.stroke !== "string" && layer.encoding?.stroke?.field === undefined) {
         throw new Error("Point strokeWidth requires an active stroke.");
       }
       config.strokeWidth = validateNonNegativeFinite(
@@ -97,7 +104,7 @@ export const editPointMark = /* @__PURE__ */ action(
         "Point strokeWidth"
       );
     }
-    const next = this
+    const next = semantic
       ._withMarkConfig(id, config)
       .rematerializePointMark({ id });
     return rematerializeExistingLegend(next);

package/src/actions/marks/point/materialize.js

@@ -40,6 +40,7 @@ import { offsetCategoryPositions } from
   "../../../materialization/categorySlotOffset.js";
 import { requestedStrokeDetails } from
   "../../../grammar/strokeStyle.js";
+import { applyItemMissingPolicy } from "../../../grammar/itemMissing.js";
 
 const REMATERIALIZE_OPTIONS = Object.freeze(["id"]);
 const DEFAULT_POINT_FILL = DEFAULT_COLORS.mark;
@@ -337,10 +338,11 @@ export const rematerializePointMark = /* @__PURE__ */ action(
     if (!["circle", "rect", "path", "collection"].includes(graphic?.type)) {
       throw new Error(`Point mark "${id}" requires point graphics.`);
     }
-    const dataset = findDataset(resolved, layer.data);
-    if (dataset === undefined) {
+    const sourceDataset = findDataset(resolved, layer.data);
+    if (sourceDataset === undefined) {
       throw new Error(`Point mark "${id}" requires an existing dataset.`);
     }
+    const dataset = applyItemMissingPolicy(layer, sourceDataset);
 
     if (graphic.items.length === 0 && !canMaterializePoint(resolved, layer)) {
       return resolved;

package/src/actions/marks/rect/actions.js

@@ -25,17 +25,19 @@ import { resolveMarkGraphicPlacement } from
 import { rematerializeExistingLegend } from "../../encodings/shared.js";
 import { rematerializeHighlightBaseline } from "../lifecycle.js";
 import {
-  requestedRectStyleDetails
+  requestedRectStyleDetails, hasRectRadius, RECT_RADIUS_PROPERTIES
 } from "../../../grammar/roundedRect.js";
 import { STROKE_STYLE_PROPERTIES } from
   "../../../grammar/strokeStyle.js";
+import { applyItemMissingPolicy, validateItemMissing } from
+  "../../../grammar/itemMissing.js";
 
 const STYLE_OPTIONS = Object.freeze([
-  "fill", "opacity", "stroke", "strokeWidth", "cornerRadius",
+  "fill", "opacity", "stroke", "strokeWidth", ...RECT_RADIUS_PROPERTIES,
   ...STROKE_STYLE_PROPERTIES
 ]);
-const CREATE_OPTIONS = Object.freeze(["id", "data", ...STYLE_OPTIONS]);
-const EDIT_OPTIONS = Object.freeze(["target", ...STYLE_OPTIONS]);
+const CREATE_OPTIONS = Object.freeze(["id", "data", "missing", ...STYLE_OPTIONS]);
+const EDIT_OPTIONS = Object.freeze(["target", "missing", ...STYLE_OPTIONS]);
 const REMATERIALIZE_OPTIONS = Object.freeze(["id", "scales"]);
 
 function requireRectLayer(program, requested, operation) {
@@ -71,6 +73,12 @@ const createRectMark = /* @__PURE__ */ action(
     let next = this
       .editSemantic({ property: `layer[${id}].mark.type`, value: "rect" })
       .editSemantic({ property: `layer[${id}].data`, value: data });
+    if (Object.hasOwn(args, "missing")) {
+      next = next.editSemantic({
+        property: `layer[${id}].mark.missing`,
+        value: validateItemMissing(args.missing, "Rect missing")
+      });
+    }
     next = applyLayeredMarkInheritance(next, id, inherited)
       .createGraphics({
         id,
@@ -109,7 +117,7 @@ const rematerializeRectMark = /* @__PURE__ */ action(
     const graphic = this.graphicSpec.objects[id];
     if (layer?.mark?.type !== "rect") throw new Error(`Unknown rect mark "${id}".`);
     const roundedCollection = graphic?.type === "collection" &&
-      Object.hasOwn(this.markConfigs[id] ?? {}, "cornerRadius") &&
+      hasRectRadius(this.markConfigs[id]) &&
       graphic.items?.every(item => ["rect", "path"].includes(item.type));
     if (
       (graphic?.type !== "rect" && !roundedCollection) ||
@@ -120,10 +128,11 @@ const rematerializeRectMark = /* @__PURE__ */ action(
     if (this.markConfigs[id]?.gradientPlot?.materialized === true) {
       return this.materializeGradientPlotFill({ id });
     }
-    const dataset = findDataset(this, layer.data);
-    if (dataset === undefined) {
+    const sourceDataset = findDataset(this, layer.data);
+    if (sourceDataset === undefined) {
       throw new Error(`Rect mark "${id}" requires an existing dataset.`);
     }
+    const dataset = applyItemMissingPolicy(layer, sourceDataset);
     if (!canMaterializeRect(this, layer)) {
       return replaceGraphicItems(this, id, "rect", []);
     }
@@ -151,7 +160,7 @@ const editRectMark = /* @__PURE__ */ action(
   function (args = {}) {
     validateMarkOptions(args, EDIT_OPTIONS, "editRectMark");
     requestedRectStyleDetails(args, "editRectMark");
-    if (!STYLE_OPTIONS.some(option => Object.hasOwn(args, option))) {
+    if (!["missing", ...STYLE_OPTIONS].some(option => Object.hasOwn(args, option))) {
       throw new Error("editRectMark requires at least one editable property.");
     }
     const layer = requireRectLayer(this, args.target, "editRectMark");
@@ -163,16 +172,22 @@ const editRectMark = /* @__PURE__ */ action(
         "editRectMark stroke conflicts with a field encoding; use encodeStroke with value to replace it."
       );
     }
-    const next = this._withMarkConfig(
+    const semantic = Object.hasOwn(args, "missing")
+      ? this.editSemantic({
+          property: `layer[${layer.id}].mark.missing`,
+          value: validateItemMissing(args.missing, "Rect missing")
+        })
+      : this;
+    const next = semantic._withMarkConfig(
       layer.id,
       {
         ...normalizeRectMarkConfig(
           args,
-          this.markConfigs[layer.id] ?? DEFAULT_RECT_MARK
+          semantic.markConfigs[layer.id] ?? DEFAULT_RECT_MARK
         ),
         fillExplicit: Object.hasOwn(args, "fill")
           ? true
-          : this.markConfigs[layer.id]?.fillExplicit ?? false
+          : semantic.markConfigs[layer.id]?.fillExplicit ?? false
       }
     );
     const materialized = canMaterializeRect(next, layer)

package/src/actions/marks/remove.js

@@ -163,6 +163,7 @@ export function removeOwnedMark(program, id, partial = false) {
     next = next.editGraphics({ target: id, remove: true });
   }
   return next
+    ._withoutMaterializationConfig(["guides", "legendGroups", id])
     ._withoutMaterializationConfig(["marks", id])
     ._withContext({
       ...(program.context.currentMark === id ? { currentMark: undefined } : {}),
@@ -262,6 +263,7 @@ export const removeMark = /* @__PURE__ */ closedAction(
       if (next.graphicSpec.objects[id] !== undefined) {
         next = next.editGraphics({ target: id, remove: true });
       }
+      next = next._withoutMaterializationConfig(["guides", "legendGroups", id]);
       next = next._withoutMaterializationConfig(["marks", id]);
       next = next._withoutMaterializationConfig(["jitters", id]);
       next = next._withoutMaterializationConfig(["pointPacking", id]);