ggaction 0.0.12 → 0.0.15

package/src/actions/marks/arc/actions.js

@@ -7,9 +7,12 @@ import {
 } from "../../../core/validation.js";
 import { deriveArcSectors } from "../../../grammar/arcs.js";
 import { buildAnnularSectorCommands } from "../../../grammar/polarPaths.js";
-import { resolvePolarFrame } from "../../../grammar/polar.js";
-import { mapOrdinalValues } from "../../../grammar/scales/index.js";
-import { resolveGraphicBounds } from "../../../layout/canvas.js";
+import {
+  mapOrdinalValues,
+  readScaleField
+} from "../../../grammar/scales/index.js";
+import { resolveCoordinatePolarFrame } from
+  "../../../materialization/coordinateBounds.js";
 import {
   canMaterializeArc,
   getSourceDependentMarkSteps
@@ -19,7 +22,10 @@ import { findLayer, resolveEligibleLayer } from "../../../selectors/layers.js";
 import { DEFAULT_COLORS } from "../../../theme/defaults.js";
 import { resolveMarkGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
+import { rematerializeExistingLegend } from "../../encodings/shared.js";
 import { rematerializeHighlightBaseline } from "../lifecycle.js";
+import { mapScaleConsumerValues } from
+  "../../../materialization/scales/map.js";
 import {
   assertMarkAvailable,
   applyLayeredMarkInheritance,
@@ -30,13 +36,18 @@ import {
   resolveMarkId,
   validateMarkOptions
 } from "../shared.js";
+import {
+  requestedStrokeDetails,
+  STROKE_STYLE_PROPERTIES
+} from "../../../grammar/strokeStyle.js";
 
 const ARC_OPTIONS = Object.freeze([
-  "innerRadius", "padAngle", "fill", "opacity", "stroke", "strokeWidth"
+  "innerRadius", "padAngle", "fill", "opacity", "stroke", "strokeWidth",
+  ...STROKE_STYLE_PROPERTIES
 ]);
 const CREATE_OPTIONS = Object.freeze(["id", "data", ...ARC_OPTIONS]);
 const EDIT_OPTIONS = Object.freeze(["target", ...ARC_OPTIONS]);
-const REMATERIALIZE_OPTIONS = Object.freeze(["id"]);
+const REMATERIALIZE_OPTIONS = Object.freeze(["id", "scales"]);
 
 function validateInnerRadius(value) {
   if (!Number.isFinite(value) || value < 0 || value >= 1) {
@@ -47,11 +58,16 @@ function validateInnerRadius(value) {
   return value;
 }
 
-function normalizeConfig(args, previous = {}, { allowStrokeRemoval = false } = {}) {
+function normalizeConfig(
+  args,
+  previous = {},
+  { allowStrokeRemoval = false, strokeDetails = {} } = {}
+) {
   let config = {
     ...previous,
+    ...strokeDetails,
     ...(Object.hasOwn(args, "innerRadius")
-      ? { innerRadius: validateInnerRadius(args.innerRadius) }
+      ? { innerRadius: validateInnerRadius(args.innerRadius), innerRadiusExplicit: true }
       : {}),
     ...(Object.hasOwn(args, "padAngle")
       ? { padAngle: validateNonNegativeFinite(args.padAngle, "Arc padAngle") }
@@ -93,6 +109,7 @@ const createArcMark = action(
   },
   function (args = {}) {
     validateMarkOptions(args, CREATE_OPTIONS, "createArcMark");
+    const strokeDetails = requestedStrokeDetails(args, "createArcMark");
     const id = resolveMarkId(this, args.id, {
       defaultId: "arc",
       label: "Arc mark id",
@@ -112,7 +129,7 @@ const createArcMark = action(
       opacity: 1,
       stroke: "#ffffff",
       strokeWidth: 1
-    });
+    }, { strokeDetails });
     let created = this
       .editSemantic({ property: `layer[${id}].mark.type`, value: "arc" })
       .editSemantic({ property: `layer[${id}].data`, value: data });
@@ -148,6 +165,9 @@ const rematerializeArcMark = action(
   },
   function (args = {}) {
     validateMarkOptions(args, REMATERIALIZE_OPTIONS, "rematerializeArcMark");
+    if (args.scales !== undefined && typeof args.scales !== "boolean") {
+      throw new TypeError("rematerializeArcMark scales must be a boolean.");
+    }
     const id = validateUserId(args.id, "Arc mark id");
     const highlighted = rematerializeHighlightBaseline(this, {
       target: id,
@@ -163,15 +183,21 @@ const rematerializeArcMark = action(
     const thetaScaleId = layer.encoding.theta.scale;
     const radiusScaleId = layer.encoding?.radius?.scale;
     const colorScaleId = layer.encoding?.color?.scale;
-    let resolved = this.rematerializeScale({ id: thetaScaleId });
-    if (radiusScaleId !== undefined) {
+    const strokeScaleId = layer.encoding?.stroke?.scale;
+    let resolved = args.scales === false
+      ? this
+      : this.rematerializeScale({ id: thetaScaleId });
+    if (radiusScaleId !== undefined && args.scales !== false) {
       resolved = resolved.rematerializeScale({ id: radiusScaleId });
     }
-    if (colorScaleId !== undefined) {
+    if (colorScaleId !== undefined && args.scales !== false) {
       resolved = resolved.rematerializeScale({ id: colorScaleId });
     }
+    if (strokeScaleId !== undefined && args.scales !== false) {
+      resolved = resolved.rematerializeScale({ id: strokeScaleId });
+    }
     const config = resolved.markConfigs[id] ?? {};
-    const frame = resolvePolarFrame(resolveGraphicBounds(resolved));
+    const frame = resolveCoordinatePolarFrame(resolved, layer.coordinate);
     const derived = deriveArcSectors(dataset.values, layer, {
       thetaScale: resolved.resolvedScales[thetaScaleId],
       ...(radiusScaleId === undefined
@@ -195,14 +221,37 @@ const rematerializeArcMark = action(
           resolved.resolvedScales[colorScaleId].domain,
           resolved.resolvedScales[colorScaleId].range
         );
+    const strokeEncoding = layer.encoding?.stroke;
+    const strokeValues = strokeEncoding === undefined ? undefined : derived.sectors.map(
+      sector => {
+        const values = readScaleField(
+          sector.sourceIndices.map(index => dataset.values[index]),
+          strokeEncoding.field,
+          strokeEncoding.fieldType,
+          { temporalUnit: strokeEncoding.temporalUnit }
+        );
+        if (new Set(values).size !== 1) {
+          throw new Error("Arc stroke requires one value within each sector.");
+        }
+        return values[0];
+      }
+    );
+    const strokes = strokeValues === undefined ? undefined : mapScaleConsumerValues(
+      strokeValues,
+      resolved.resolvedScales[strokeScaleId],
+      "stroke"
+    );
     return editMarkGraphic(resolved, id, {
       length: commands.length,
       commands,
       fill: fills,
       opacity: config.opacity ?? 1,
-      stroke: config.stroke === false ? "transparent" : config.stroke ?? "#ffffff",
+      stroke: strokes ?? (
+        config.stroke === false ? "transparent" : config.stroke ?? "#ffffff"
+      ),
       strokeWidth: config.stroke === false ? 0 : config.strokeWidth ?? 1,
-      strokeDash: commands.map(() => [])
+      strokeDash: commands.map(() => []),
+      ...requestedStrokeDetails(config, "Arc mark")
     });
   }
 );
@@ -214,6 +263,7 @@ const editArcMark = action(
   },
   function (args = {}) {
     validateMarkOptions(args, EDIT_OPTIONS, "editArcMark");
+    const strokeDetails = requestedStrokeDetails(args, "editArcMark");
     if (Object.keys(args).every(key => key === "target")) {
       throw new Error(
         "editArcMark requires innerRadius, padAngle, fill, opacity, stroke, or strokeWidth."
@@ -230,6 +280,11 @@ const editArcMark = action(
     if (Object.hasOwn(args, "fill") && layer.encoding?.color !== undefined) {
       throw new Error("editArcMark fill cannot be combined with a color encoding.");
     }
+    if (Object.hasOwn(args, "stroke") && layer.encoding?.stroke !== undefined) {
+      throw new Error(
+        "editArcMark stroke conflicts with a field encoding; use encodeStroke with value to replace it."
+      );
+    }
     if (args.stroke === false && Object.hasOwn(args, "strokeWidth")) {
       throw new Error(
         "editArcMark cannot set strokeWidth while removing stroke."
@@ -245,15 +300,18 @@ const editArcMark = action(
     const next = this._withMarkConfig(
       layer.id,
       normalizeConfig(args, this.markConfigs[layer.id], {
-        allowStrokeRemoval: true
+        allowStrokeRemoval: true,
+        strokeDetails
       })
     );
-    if (!canMaterializeArc(next, layer)) return next;
-    let rematerialized = next.rematerializeArcMark({ id: layer.id });
-    for (const step of getSourceDependentMarkSteps(rematerialized, layer.id)) {
-      rematerialized = rematerialized[step.op](step.args);
+    let materialized = next;
+    if (canMaterializeArc(next, layer)) {
+      materialized = next.rematerializeArcMark({ id: layer.id });
+      for (const step of getSourceDependentMarkSteps(materialized, layer.id)) {
+        materialized = materialized[step.op](step.args);
+      }
     }
-    return rematerialized;
+    return rematerializeExistingLegend(materialized);
   }
 );
 

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

@@ -1,3 +1,4 @@
+import { validateAreaMissing } from "../../../grammar/areaEndpoints.js";
 import { action } from "../../../core/action.js";
 import { validateUserId } from "../../../core/identifiers.js";
 import {
@@ -21,17 +22,23 @@ import { findLayer } from "../../../selectors/layers.js";
 import { validateCurveInterpolation } from "../../../grammar/curveCommands.js";
 import { resolveEligibleLayer } from "../../../selectors/layers.js";
 import { canMaterializeArea } from "../../../materialization/marks/index.js";
+import { rematerializeExistingLegend } from "../../encodings/shared.js";
 import { findUpstreamTransform } from "../../../materialization/dataProvenance.js";
 import { resolveMarkGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
 import { rematerializeHighlightBaseline } from "../lifecycle.js";
 import { resolveAreaMaterialization } from "./materialize.js";
+import {
+  requestedStrokeDetails,
+  STROKE_STYLE_PROPERTIES
+} from "../../../grammar/strokeStyle.js";
 
 const AREA_OPTIONS = Object.freeze([
-  "fill", "opacity", "stroke", "strokeWidth", "curve"
+  "fill", "opacity", "stroke", "strokeWidth", "curve",
+  ...STROKE_STYLE_PROPERTIES
 ]);
-const CREATE_OPTIONS = Object.freeze(["id", "data", ...AREA_OPTIONS]);
-const EDIT_OPTIONS = Object.freeze(["target", ...AREA_OPTIONS]);
+const CREATE_OPTIONS = Object.freeze(["id", "data", "missing", ...AREA_OPTIONS]);
+const EDIT_OPTIONS = Object.freeze(["target", "missing", ...AREA_OPTIONS]);
 const REMATERIALIZE_OPTIONS = Object.freeze(["id", "scales"]);
 const STROKE_FROM_FILL_OPTIONS = Object.freeze(["id", "strokeWidth"]);
 
@@ -57,6 +64,7 @@ const createAreaMark = action(
   },
   function (args = {}) {
     validateMarkOptions(args, CREATE_OPTIONS, "createAreaMark");
+    const strokeDetails = requestedStrokeDetails(args, "createAreaMark");
     const id = resolveMarkId(this, args.id, {
       defaultId: "area",
       label: "Area mark id",
@@ -69,6 +77,10 @@ const createAreaMark = action(
       ...(args.data === undefined && this.context.currentData === undefined &&
         inherited?.data !== undefined ? { data: inherited.data } : {})
     });
+    const missing = validateAreaMissing(args.missing);
+    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 opacity = validateUnitInterval(args.opacity ?? 0.2, "Area opacity");
     const curve = validateCurveInterpolation(args.curve ?? "linear");
@@ -77,6 +89,7 @@ const createAreaMark = action(
     let created = this
       .editSemantic({ property: `layer[${id}].mark.type`, value: "area" })
       .editSemantic({ property: `layer[${id}].data`, value: data });
+    if (Object.hasOwn(args, "missing")) created = created.editSemantic({ property: `layer[${id}].mark.missing`, value: missing });
     created = applyLayeredMarkInheritance(created, id, inherited);
     created = created
       .createGraphics({
@@ -89,7 +102,8 @@ const createAreaMark = action(
         fill,
         opacity,
         ...(Object.hasOwn(args, "curve") ? { curve } : {}),
-        ...(stroke === undefined ? {} : { stroke, strokeWidth })
+        ...(stroke === undefined ? {} : { stroke, strokeWidth }),
+        ...strokeDetails
       });
     return materializeInheritedMark(created, id);
   }
@@ -173,6 +187,7 @@ const rematerializeAreaMark = action(
       );
     }
     const colorEncoding = layer.encoding?.color;
+    const strokeEncoding = layer.encoding?.stroke;
     let resolved = args.scales === false
       ? this
       : this
@@ -181,8 +196,11 @@ const rematerializeAreaMark = action(
     if (args.scales !== false && colorEncoding?.scale !== undefined) {
       resolved = resolved.rematerializeScale({ id: colorEncoding.scale });
     }
+    if (args.scales !== false && strokeEncoding?.scale !== undefined) {
+      resolved = resolved.rematerializeScale({ id: strokeEncoding.scale });
+    }
     const config = this.markConfigs[id];
-    const { paths, fills } = resolveAreaMaterialization({
+    const { paths, fills, strokes } = resolveAreaMaterialization({
       rows: dataset.values,
       layer,
       densityTransform,
@@ -190,7 +208,8 @@ const rematerializeAreaMark = action(
       config
     });
     const existingChildren = resolved.graphicSpec.objects[id].items ?? [];
-    const hasOutline = config.stroke !== undefined || config.strokeFromFill === true;
+    const hasOutline = strokes !== undefined || config.stroke !== undefined ||
+      config.strokeFromFill === true;
     const removesOutline = !hasOutline && existingChildren.some(
       child => child.properties.stroke !== undefined
     );
@@ -204,9 +223,10 @@ const rematerializeAreaMark = action(
       fill: fills,
       opacity: config.opacity,
       ...(hasOutline ? {
-        stroke: config.strokeFromFill === true ? fills : config.stroke,
-        strokeWidth: config.strokeWidth
-      } : {})
+        stroke: strokes ?? (config.strokeFromFill === true ? fills : config.stroke),
+        strokeWidth: config.strokeWidth ?? (strokes === undefined ? undefined : 1)
+      } : {}),
+      ...requestedStrokeDetails(config, "Area mark")
     });
   }
 );
@@ -218,7 +238,11 @@ const editAreaMark = action(
   },
   function (args = {}) {
     validateMarkOptions(args, EDIT_OPTIONS, "editAreaMark");
-    const changes = ["fill", "opacity", "stroke", "strokeWidth", "curve"];
+    const strokeDetails = requestedStrokeDetails(args, "editAreaMark");
+    const changes = [
+      "fill", "opacity", "stroke", "strokeWidth", "curve", "missing",
+      ...STROKE_STYLE_PROPERTIES
+    ];
     if (!changes.some(key => Object.hasOwn(args, key))) {
       throw new Error(
         "editAreaMark requires fill, opacity, stroke, strokeWidth, or curve."
@@ -237,13 +261,20 @@ const editAreaMark = action(
         "editAreaMark fill cannot be combined with a color encoding."
       );
     }
+    if (Object.hasOwn(args, "stroke") && layer.encoding?.stroke !== undefined) {
+      throw new Error(
+        "editAreaMark stroke conflicts with a field encoding; use encodeStroke with value to replace it."
+      );
+    }
     if (args.stroke === false && Object.hasOwn(args, "strokeWidth")) {
       throw new Error("editAreaMark cannot set strokeWidth while removing stroke.");
     }
 
     let config = { ...this.markConfigs[layer.id] };
+    Object.assign(config, strokeDetails);
     if (Object.hasOwn(args, "fill")) {
       config.fill = validateNonEmptyString(args.fill, "Area fill");
+      if (config.errorBand !== undefined) config.errorBand = { ...config.errorBand, fill: config.fill };
     }
     if (Object.hasOwn(args, "opacity")) {
       config.opacity = validateUnitInterval(args.opacity, "Area opacity");
@@ -283,10 +314,18 @@ const editAreaMark = action(
       );
     }
 
-    const next = this._withMarkConfig(layer.id, config);
-    return canMaterializeArea(next, layer)
+    let next = this._withMarkConfig(layer.id, config);
+    if (Object.hasOwn(args, "missing")) {
+      const missing = validateAreaMissing(args.missing);
+      if (missing === "break" && ["density", "horizon"].some(type => findUpstreamTransform(this, findDataset(this, layer.data), type))) {
+        throw new Error("Area missing:break does not reinterpret density or horizon data.");
+      }
+      next = next.editSemantic({ property: `layer[${layer.id}].mark.missing`, value: missing });
+    }
+    const materialized = canMaterializeArea(next, layer)
       ? next.rematerializeAreaMark({ id: layer.id })
       : next;
+    return rematerializeExistingLegend(materialized);
   }
 );
 

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

@@ -8,12 +8,15 @@ import {
   mapContinuousScaleValues,
   mapOrdinalValues
 } from "../../../grammar/scales/index.js";
+import { mapScaleConsumerValues } from
+  "../../../materialization/scales/map.js";
 import { buildAreaCurvePathCommands } from
   "../../../grammar/curveCommands.js";
 import { buildLinearPathCommands } from
   "../../../grammar/pathCommands.js";
 import { buildCategoricalDensityPaths } from
   "../../../grammar/categoricalDensity.js";
+import { derivePathSeriesFieldValues } from "../../../grammar/pathSeries.js";
 
 function resolveAreaPaths({
   derived,
@@ -135,7 +138,7 @@ export function resolveAreaMaterialization({
       : deriveAreaSeries(rows, layer)
     : deriveDensityAreaSeries(rows, layer, densityTransform);
   const colorEncoding = layer.encoding?.color;
-  const layout = colorEncoding?.layout ?? "overlay";
+  const layout = layer.layout?.mode ?? colorEncoding?.layout ?? "overlay";
   const categoricalDensity = densityTransform?.placement?.type === "category";
   const derived = densityTransform === undefined || categoricalDensity
     ? rawDerived
@@ -164,9 +167,25 @@ export function resolveAreaMaterialization({
     : colorEncoding?.scale === undefined
       ? paths.map(() => config.fill)
       : mapOrdinalValues(
-          derived.series.map(series => series.key[colorEncoding.field]),
+          densityTransform !== undefined || centered
+            ? derived.series.map(series => series.key[colorEncoding.field])
+            : derivePathSeriesFieldValues(rows, derived.series, colorEncoding.field, "color"),
           resolvedScales[colorEncoding.scale].domain,
           resolvedScales[colorEncoding.scale].range
         );
-  return { paths, fills };
+  const strokeEncoding = layer.encoding?.stroke;
+  const strokes = strokeEncoding?.scale === undefined
+    ? undefined
+    : mapScaleConsumerValues(
+        derivePathSeriesFieldValues(
+          rows,
+          derived.series,
+          strokeEncoding.field,
+          "stroke",
+          strokeEncoding
+        ),
+        resolvedScales[strokeEncoding.scale],
+        "stroke"
+      );
+  return { paths, fills, strokes };
 }

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

@@ -10,9 +10,14 @@ import {
 } from "../shared.js";
 import { resolveMarkGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
+import { requestedRectStyleDetails } from
+  "../../../grammar/roundedRect.js";
+import { STROKE_STYLE_PROPERTIES } from
+  "../../../grammar/strokeStyle.js";
 
 const CREATE_OPTIONS = Object.freeze([
-  "id", "data", "fill", "opacity", "stroke", "strokeWidth"
+  "id", "data", "fill", "opacity", "stroke", "strokeWidth",
+  "cornerRadius", ...STROKE_STYLE_PROPERTIES
 ]);
 
 export const createBarMark = action(
@@ -22,6 +27,7 @@ export const createBarMark = action(
   },
   function (args = {}) {
     validateMarkOptions(args, CREATE_OPTIONS, "createBarMark");
+    requestedRectStyleDetails(args, "createBarMark");
     const id = resolveMarkId(this, args.id, {
       defaultId: "bar",
       label: "Bar mark id",
@@ -56,7 +62,10 @@ export const createBarMark = action(
       });
     created = materializeInheritedMark(created, id);
     const appearance = Object.fromEntries(
-      ["fill", "opacity", "stroke", "strokeWidth"]
+      [
+        "fill", "opacity", "stroke", "strokeWidth", "cornerRadius",
+        ...STROKE_STYLE_PROPERTIES
+      ]
         .filter(property => Object.hasOwn(args, property))
         .map(property => [property, args[property]])
     );

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

@@ -9,9 +9,15 @@ 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
+  "../../../grammar/roundedRect.js";
+import { STROKE_STYLE_PROPERTIES } from
+  "../../../grammar/strokeStyle.js";
+import { rematerializeExistingLegend } from "../../encodings/shared.js";
 
 const EDIT_OPTIONS = Object.freeze([
-  "target", "fill", "opacity", "stroke", "strokeWidth"
+  "target", "fill", "opacity", "stroke", "strokeWidth", "cornerRadius",
+  ...STROKE_STYLE_PROPERTIES
 ]);
 
 export const editBarMark = action(
@@ -21,7 +27,11 @@ export const editBarMark = action(
   },
   function (args = {}) {
     validateMarkOptions(args, EDIT_OPTIONS, "editBarMark");
-    const changes = ["fill", "opacity", "stroke", "strokeWidth"];
+    const styleDetails = requestedRectStyleDetails(args, "editBarMark");
+    const changes = [
+      "fill", "opacity", "stroke", "strokeWidth", "cornerRadius",
+      ...STROKE_STYLE_PROPERTIES
+    ];
     if (!changes.some(key => Object.hasOwn(args, key))) {
       throw new Error(
         "editBarMark requires fill, opacity, stroke, or strokeWidth."
@@ -40,6 +50,11 @@ export const editBarMark = action(
         "editBarMark fill cannot be combined with a color encoding."
       );
     }
+    if (Object.hasOwn(args, "stroke") && layer.encoding?.stroke !== undefined) {
+      throw new Error(
+        "editBarMark stroke conflicts with a field encoding; use encodeStroke with value to replace it."
+      );
+    }
     if (args.stroke === false && Object.hasOwn(args, "strokeWidth")) {
       throw new Error(
         "editBarMark cannot set strokeWidth while removing stroke."
@@ -48,6 +63,7 @@ export const editBarMark = action(
 
     const config = { ...this.markConfigs[layer.id] };
     const appearance = { ...config.barAppearance };
+    Object.assign(appearance, styleDetails);
     if (Object.hasOwn(args, "fill")) {
       appearance.fill = validateNonEmptyString(args.fill, "Bar fill");
     }
@@ -83,8 +99,9 @@ export const editBarMark = action(
       ...config,
       barAppearance: appearance
     });
-    return canMaterializeBar(next, layer)
+    const materialized = canMaterializeBar(next, layer)
       ? next.rematerializeBarMark({ id: layer.id })
       : next;
+    return rematerializeExistingLegend(materialized);
   }
 );

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

@@ -10,10 +10,28 @@ import {
   resolveBarOffsetChannel
 } from "../../../grammar/bars/policy.js";
 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 { 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]
+    .some(property => Object.hasOwn(appearance, property));
+  if (hasShapeStyle) {
+    const radius = appearance.cornerRadius ?? 0;
+    return replaceGraphicItems(
+      program,
+      id,
+      "rect",
+      rectangles.map(rectangle => materializeRectItem(rectangle, radius))
+    );
+  }
   let next = program
     .editGraphics({ target: id, property: "length", value: rectangles.length })
     .editGraphics({
@@ -79,8 +97,8 @@ export const rematerializeBarMark = action(
     const highlighted = rematerializeHighlightBaseline(this, {
       target: id,
       operation: "rematerializeBarMark",
-      resetProperty: "length",
-      resetValue: 0
+      resetProperty: "items",
+      resetValue: []
     });
     if (highlighted !== undefined) return highlighted;
     const required = requireCompleteBar(this, id);
@@ -95,6 +113,10 @@ export const rematerializeBarMark = action(
     if (colorScaleId !== undefined && args.scales !== false) {
       resolved = resolved.rematerializeScale({ id: colorScaleId });
     }
+    const strokeScaleId = required.layer.encoding?.stroke?.scale;
+    if (strokeScaleId !== undefined && args.scales !== false) {
+      resolved = resolved.rematerializeScale({ id: strokeScaleId });
+    }
 
     if (required.materialization === "aggregate") {
       const offsetChannel = resolveBarOffsetChannel(required.layer);
@@ -103,22 +125,24 @@ export const rematerializeBarMark = action(
         resolved = resolved.rematerializeScale({ id: offsetScaleId });
       }
       const width = resolved.markConfigs[id]?.barWidth;
-      return editRectangles(
-        resolved,
-        id,
-        deriveAggregateRectangles(required, resolved, width)
-      );
+      return editRectangles(resolved, id, offsetCategoryRectangles(
+        resolved, required.layer, deriveAggregateRectangles(required, resolved, width)
+      ));
     }
 
     if (required.materialization === BAR_GRAINS.ranged) {
       const width = resolved.markConfigs[id]?.barWidth;
-      return editRectangles(resolved, id, deriveRangedRectangles(required, resolved, width));
+      return editRectangles(resolved, id, offsetCategoryRectangles(
+        resolved, required.layer, deriveRangedRectangles(required, resolved, width)
+      ));
     }
 
     return editRectangles(
       resolved,
       id,
-      deriveHistogramRectangles(required, resolved)
+      offsetCategoryRectangles(
+        resolved, required.layer, deriveHistogramRectangles(required, resolved)
+      )
     );
   }
 );

package/src/actions/marks/index.js

@@ -1,4 +1,10 @@
 import { removeMark } from "./remove.js";
+import {
+  createReferenceLine,
+  createReferenceBand,
+  materializeStatisticalReferenceData,
+  rematerializeStatisticalReference
+} from "./references.js";
 import { registerRuleMarkActions } from "./rule/index.js";
 import { registerAreaMarkActions } from "./area/index.js";
 import { registerTickMarkActions } from "./tick/index.js";
@@ -8,6 +14,7 @@ import { registerArcMarkActions } from "./arc/index.js";
 import { registerRectMarkActions } from "./rect/index.js";
 import {
   registerPointJitterActions,
+  registerPointPackingActions,
   registerPointMarkActions
 } from "./point/index.js";
 import { registerTextMarkActions } from "./text/index.js";
@@ -15,6 +22,7 @@ import { registerTextMarkActions } from "./text/index.js";
 export function registerMarkActions(ProgramClass) {
   registerPointMarkActions(ProgramClass);
   registerPointJitterActions(ProgramClass);
+  registerPointPackingActions(ProgramClass);
   registerRectMarkActions(ProgramClass);
   registerAreaMarkActions(ProgramClass);
   registerArcMarkActions(ProgramClass);
@@ -24,4 +32,10 @@ export function registerMarkActions(ProgramClass) {
   registerTextMarkActions(ProgramClass);
   registerTickMarkActions(ProgramClass);
   ProgramClass.prototype.removeMark = removeMark;
+  ProgramClass.prototype.createReferenceLine = createReferenceLine;
+  ProgramClass.prototype.createReferenceBand = createReferenceBand;
+  ProgramClass.prototype.materializeStatisticalReferenceData =
+    materializeStatisticalReferenceData;
+  ProgramClass.prototype.rematerializeStatisticalReference =
+    rematerializeStatisticalReference;
 }