ggaction 0.0.21 → 0.0.22

package/src/actions/facets/derive.js

@@ -10,7 +10,8 @@ import {
 } from "../../materialization/dependencies.js";
 import {
   getLayerScaleIds,
-  getMarkMaterializationStep
+  getMarkMaterializationStep,
+  reusePlannedMarkScales
 } from "../../materialization/marks/index.js";
 import { buildMaterializationPlan } from "../../materialization/planner.js";
 import { requireDataset } from "../../selectors/datasets.js";
@@ -163,6 +164,32 @@ function buildFacetCellCandidate(
   return { program, populated: true };
 }
 
+function partitionGuideValues(program) {
+  let next = program;
+  const restrict = config => {
+    if (config?.mode !== "values" || config.inferredValues === true) return config;
+    const scale = next.resolvedScales[config.scale];
+    if (!Array.isArray(scale?.domain)) return config;
+    const discrete = ["ordinal", "band", "point"].includes(scale.type);
+    const domain = new Set(scale.domain);
+    const low = Math.min(...scale.domain), high = Math.max(...scale.domain);
+    return { ...config, values: config.values.filter(value => discrete
+      ? domain.has(value) : value >= low && value <= high) };
+  };
+  for (const [id, axis] of Object.entries(program.guideConfigs.axis ?? {})) {
+    for (const component of ["ticks", "labels"]) {
+      const config = axis[component];
+      const restricted = restrict(config);
+      if (restricted !== config) next = next._withGuideConfig(id, component, restricted);
+    }
+  }
+  for (const [id, config] of Object.entries(program.guideConfigs.grid ?? {})) {
+    const restricted = restrict(config);
+    if (restricted !== config) next = next._withGridConfig(id, restricted);
+  }
+  return next;
+}
+
 function applyResolvedDomains(
   program,
   childId,
@@ -188,19 +215,21 @@ function applyResolvedDomains(
       domain
     });
   }
+  next = partitionGuideValues(next);
   const marks = materializeMarks ? next.semanticSpec.layers.flatMap(layer => {
     const step = getMarkMaterializationStep(next, layer);
     if (step === undefined) return [];
-    return ["bar", "line", "area", "arc"].includes(layer.mark?.type)
-      ? [{ ...step, args: { ...step.args, scales: false } }]
-      : [step];
+    return [step];
   }) : [];
   const guides = Object.keys(resolution.scales).flatMap(id =>
     planScaleGuideRematerialization(next, id)
   );
   return applyMaterializationPlan(
     next,
-    buildMaterializationPlan({ marks, guides })
+    buildMaterializationPlan({
+      marks: reusePlannedMarkScales(next, marks, Object.keys(resolution.scales)),
+      guides
+    })
   );
 }
 

package/src/actions/facets/replay.js

@@ -1,38 +1 @@
-import { closedAction } from "../../core/action.js";
-import { isPlainObject } from "../../core/immutable.js";
-import { validateUserId } from "../../core/identifiers.js";
-
-import { findTransformPolicy } from "../../grammar/transforms.js";
-
-const REPLAY_OPTIONS = Object.freeze(["id", "source", "transform"]);
-
-function requestedTransform(transform) {
-  if (!isPlainObject(transform)) {
-    throw new TypeError("replayDerivedData transform must be a plain object.");
-  }
-  const policy = findTransformPolicy(transform.type);
-  if (policy?.facetTopology === undefined) {
-    throw new Error(
-      `replayDerivedData does not support transform "${transform.type ?? "unknown"}".`
-    );
-  }
-  return {
-    transform: policy.replayTransform?.(transform) ?? transform,
-    materialize: policy.materializeOp
-  };
-}
-
-export const replayDerivedData = /* @__PURE__ */ closedAction(
-  {
-    op: "replayDerivedData",
-    description: "Replay one stored derived-data transform for a facet cell."
-  }, REPLAY_OPTIONS,
-  function (args = {}) {
-    const id = validateUserId(args.id, "Facet replay dataset id");
-    const source = validateUserId(args.source, "Facet replay source id");
-    const resolved = requestedTransform(args.transform);
-    return this
-      .createDerivedData({ id, source, transform: [resolved.transform] })
-      [resolved.materialize]({ id });
-  }
-);
+import{findRaincloudParent as d}from"../../selectors/raincloud.js";import{closedAction as m}from"../../core/action.js";import{isPlainObject as p}from"../../core/immutable.js";import{validateUserId as s}from"../../core/identifiers.js";import{findTransformPolicy as c}from"../../grammar/transforms.js";import{applyLayerDataRematerialization as l}from"../../materialization/dependencies.js";const y=Object.freeze(["id","source","transform"]);function u(r){if(!p(r))throw new TypeError("replayDerivedData transform must be a plain object.");const e=c(r.type);if(e?.facetTopology===void 0)throw new Error(`replayDerivedData does not support transform "${r.type??"unknown"}".`);return{transform:e.replayTransform?.(r)??r,materialize:e.materializeOp}}const b=m({op:"replayDerivedData",description:"Replay one stored derived-data transform for a facet cell."},y,function(r={}){const e=s(r.id,"Facet replay dataset id"),i=s(r.source,"Facet replay source id"),a=u(r.transform);let t=this;if(a.transform.type==="markFilter"&&d(t,a.transform.target)===void 0){const o=a.transform.target,{markFilter:f,...n}=t.markConfigs[o]??{};t=t.rebindLayerData({id:o,data:i})._withMarkConfig(o,n),t=l(t,o)._withMarkConfig(o,{...n,markFilter:{...f,source:i,dataset:e,empty:!1}})}return t.createDerivedData({id:e,source:i,transform:[a.transform]})[a.materialize]({id:e})});export{b as replayDerivedData};

package/src/actions/gradientPlots/components.js

@@ -9,6 +9,8 @@ import {
 import { resolveGraphicBounds } from "../../layout/canvas.js";
 import { findLayer } from "../../selectors/layers.js";
 import { createDensityLegendPaint } from "./paint.js";
+import { legendResourcePolicy } from "../../materialization/guides/resources.js";
+import { resolveConcreteGraphicBounds } from "../../grammar/schemas/graphicBounds.js";
 
 const CENTER_OPTIONS = Object.freeze([
   "id", "owner", "data", "category", "categoryType", "coordinate",
@@ -94,11 +96,18 @@ export const rematerializeGradientPlotLegend = /* @__PURE__ */ action(
     if (position !== "right") {
       throw new Error('Gradient plot density legend currently requires position "right".');
     }
-    const x = bounds.x + bounds.width + 50;
+    const right = bounds.x + bounds.width;
+    const legendBounds = Object.keys(this.guideConfigs.legend ?? {}).flatMap(kind =>
+      legendResourcePolicy(kind).graphicIds.filter(id => this.graphicSpec.objects[id])
+        .map(id => resolveConcreteGraphicBounds(this.graphicSpec, id, this.materializationConfigs.textMetrics)))
+      .filter(box => box && box.left >= right);
+    const x = Math.max(right + 50, ...legendBounds.map(box => box.right + 24));
     const y = bounds.y + 50;
     const width = 22;
     const height = Math.min(170, Math.max(80, bounds.height - 110));
-    let next = editProperties(this, ids.strip, {
+    const baseline = this.semanticSpec.guides.legend?.color?.scale === `${owner}Density`
+      ? this.editSemantic({ property: "guide.legend.color", remove: true }) : this;
+    let next = editProperties(baseline, ids.strip, {
       x, y, width, height,
       fill: createDensityLegendPaint(config.gradient.opacity),
       stroke: "#cbd5e1",
@@ -144,14 +153,14 @@ function resolveDensityLegend(program, args) {
 }
 
 export function fulfillGradientPlotLegend(program, args) {
-  const { ids, densityScale } = resolveDensityLegend(program, args);
-  const occupied = program.semanticSpec.guides.legend?.color;
-  if (occupied !== undefined && occupied.scale !== densityScale) {
+  const { ids } = resolveDensityLegend(program, args);
+  if (Object.keys(program.markConfigs).some(owner => owner !== args.owner &&
+      program.graphicSpec.objects[`${owner}DensityLegend`])) {
     guideConflict("Gradient plot density legend uses a different scale or family");
   }
   const existing = Object.values(ids).filter(id => program.graphicSpec.objects[id] !== undefined);
   if (existing.length === 0) return program.createGradientPlotLegend(args);
-  if (existing.length !== Object.keys(ids).length || occupied?.scale !== densityScale) {
+  if (existing.length !== Object.keys(ids).length) {
     guideConflict("Gradient plot density legend has incomplete ownership");
   }
   const { owner, ...explicit } = args;
@@ -170,12 +179,15 @@ export const createGradientPlotLegend = /* @__PURE__ */ action(
     for (const [property, value] of [
       [`scale[${densityScale}].type`, "sequential"],
       [`scale[${densityScale}].domain`, this.markConfigs[args.owner].gradientPlot.intensityDomain],
-      [`scale[${densityScale}].range`, { palette: { name: "greys" } }],
-      ["guide.legend.color.scale", densityScale],
-      ["guide.legend.color.title", title]
+      [`scale[${densityScale}].range`, { palette: { name: "greys" } }]
     ]) {
       next = next.editSemantic({ property, value });
     }
+    // Older snapshots used the color-channel slot for this independent guide.
+    // Its existing owner config is sufficient; free that slot for actual hue.
+    if (next.semanticSpec.guides.legend?.color?.scale === densityScale) {
+      next = next.editSemantic({ property: "guide.legend.color", remove: true });
+    }
     for (const [id, type, length] of [
       [ids.strip, "rect"],
       [ids.labels, "text", 2],

package/src/actions/gradientPlots/create.js

@@ -2,6 +2,7 @@ import { closedAction } from "../../core/action.js";
 
 import { findDataset } from "../../selectors/datasets.js";
 import { findSemanticScale } from "../../selectors/scales.js";
+import { normalizeEncoding } from "../charts/shared.js";
 import {
   GRADIENT_PLOT_OPTIONS,
   gradientEncodingArgs,
@@ -49,6 +50,7 @@ export const createGradientPlot = /* @__PURE__ */ closedAction(
     const width = resolveGradientWidth(args.width);
     const gradient = resolveGradientAppearance(args.gradient);
     const center = resolveGradientCenter(args.center);
+    const color = normalizeEncoding(args.color, "createGradientPlot color");
     const guides = resolveGradientGuides(args.guides);
     const category = positions.orientation === "vertical"
       ? positions.x
@@ -70,11 +72,11 @@ export const createGradientPlot = /* @__PURE__ */ closedAction(
         width,
         gradient,
         center,
+        ...(color === undefined ? {} : { color }),
         guides
       },
       itemFilterable: false,
-      stroke: false,
-      strokeWidth: 0
+      stroke: false
     });
     if (positions.x !== undefined) {
       next = next.encodeX({

package/src/actions/gradientPlots/edit.js

@@ -9,6 +9,7 @@ import { removeOwnedMark } from "../marks/remove.js";
 import { GRADIENT_PROFILE_FIELDS } from "../../grammar/gradientProfile.js";
 import { requestedStrokeDetails } from "../../grammar/strokeStyle.js";
 import { removeGradientPlotLegend } from "./components.js";
+import { rematerializeExistingLegend } from "../encodings/shared.js";
 import {
   resolveDistributionRoles,
   setCartesianPosition,
@@ -191,6 +192,22 @@ export const editGradientPlot = /* @__PURE__ */ closedAction(
             intensityDomain: profile.transform[0].resolved.intensityDomain
           }
         });
+        // Hue assigned to the old category follows the category role. Internal
+        // profile fields keep their stable names across statistical revisions.
+        if (candidate.category !== current.category) {
+          for (const channel of ["color", "stroke"]) {
+            const binding = owner.encoding?.[channel];
+            if (binding?.field !== current.category ||
+                !["nominal", "ordinal"].includes(binding.fieldType)) continue;
+            next = next.editSemantic({
+              property: `layer[${owner.id}].encoding.${channel}.field`,
+              value: candidate.category
+            }).editSemantic({
+              property: `layer[${owner.id}].encoding.${channel}.fieldType`,
+              value: candidate.categoryType
+            });
+          }
+        }
         if (center === false && hadCenter) {
           next = removeCenter(next, current.centerId);
         }
@@ -252,7 +269,7 @@ export const editGradientPlot = /* @__PURE__ */ closedAction(
             });
         }
         next = next.releaseDerivedData(revision.release);
-        return next._withContext({
+        return rematerializeExistingLegend(next)._withContext({
           currentMark: owner.id,
           currentData: candidate.source
         });

package/src/actions/gradientPlots/materialize.js

@@ -5,6 +5,8 @@ import { validateUserId } from "../../core/identifiers.js";
 import { isPlainObject } from "../../core/immutable.js";
 import { GRADIENT_PROFILE_FIELDS } from "../../grammar/gradientProfile.js";
 import { requestedStrokeDetails } from "../../grammar/strokeStyle.js";
+import { materializeRectItem } from "../../grammar/roundedRect.js";
+import { replaceGraphicItems } from "../primitives/editGraphics.js";
 import {
   mapContinuousScaleValues,
   mapOrdinalPositionValues
@@ -16,7 +18,7 @@ import { findDataset } from "../../selectors/datasets.js";
 import { findLayer } from "../../selectors/layers.js";
 import {
   createGradientPlotPaint,
-  resolveGradientPlotCategoryColors
+  resolveGradientPlotAppearanceValues
 } from "./paint.js";
 import { resolveGradientOrientation } from "./resolve.js";
 
@@ -73,11 +75,9 @@ function bodyItems(program, layer, dataset, config) {
     rows.map(row => row[GRADIENT_PROFILE_FIELDS.upper]),
     measureScale
   );
-  const categoryColors = resolveGradientPlotCategoryColors(
-    program,
-    layer,
-    categories
-  );
+  const appearance = program.markConfigs[layer.id];
+  const mapped = Object.fromEntries(["color", "opacity", "stroke", "strokeWidth"]
+    .map(channel => [channel, resolveGradientPlotAppearanceValues(program, layer, rows, channel)]));
   const thickness = categoryScale.bandwidth * config.width.band;
   if (!Number.isFinite(thickness) || thickness <= 0) {
     throw new Error(`Gradient plot "${layer.id}" requires a positive band width.`);
@@ -98,28 +98,27 @@ function bodyItems(program, layer, dataset, config) {
           width: Math.abs(a - b),
           height: thickness
         };
-    return {
-      type: "rect",
-      properties: {
-        ...geometry,
-        fill: createGradientPlotPaint({
-          values: row[GRADIENT_PROFILE_FIELDS.values],
-          intensities: row[GRADIENT_PROFILE_FIELDS.intensities]
-        }, {
-          orientation: config.orientation,
-          valueScale: measureScale,
-          intensityDomain: config.intensityDomain,
-          palette: config.gradient.palette,
-          opacity: config.gradient.opacity,
-          ...(categoryColors === undefined
-            ? {}
-            : { baseColor: categoryColors[index] })
-        }),
-        opacity: 1,
-        stroke: "transparent",
-        strokeWidth: 0
-      }
-    };
+    return materializeRectItem({
+      ...geometry,
+      fill: createGradientPlotPaint({
+        values: row[GRADIENT_PROFILE_FIELDS.values],
+        intensities: row[GRADIENT_PROFILE_FIELDS.intensities]
+      }, {
+        orientation: config.orientation,
+        valueScale: measureScale,
+        intensityDomain: config.intensityDomain,
+        palette: config.gradient.palette,
+        opacity: config.gradient.opacity,
+        ...(mapped.color === undefined
+          ? appearance.fillExplicit ? { baseColor: appearance.fill } : {}
+          : { baseColor: mapped.color[index] })
+      }),
+      opacity: mapped.opacity?.[index] ?? appearance.opacity ?? 1,
+      stroke: mapped.stroke?.[index] ?? (appearance.stroke === false ? "transparent" : appearance.stroke ?? "transparent"),
+      strokeWidth: mapped.strokeWidth?.[index] ??
+        (mapped.stroke === undefined && appearance.stroke === false ? 0 : appearance.strokeWidth ?? 1),
+      ...requestedStrokeDetails(appearance, "Gradient plot strip")
+    }, appearance);
   });
 }
 
@@ -128,7 +127,7 @@ export const materializeGradientPlotFill = /* @__PURE__ */ action(
     op: "materializeGradientPlotFill",
     description: "Materialize categorical density profiles as gradient strips."
   },
-  function ({ id } = {}) {
+  function ({ id, scales = true } = {}) {
     const owner = validateUserId(id, "Gradient-plot id");
     const layer = findLayer(this, owner);
     const config = this.markConfigs[owner]?.gradientPlot;
@@ -142,17 +141,14 @@ export const materializeGradientPlotFill = /* @__PURE__ */ action(
     const scaleIds = [...new Set([
       layer.encoding?.x?.scale,
       layer.encoding?.y?.scale,
-      layer.encoding?.color?.scale
+      ...["color", "opacity", "stroke", "strokeWidth"].map(channel => layer.encoding?.[channel]?.scale)
     ].filter(Boolean))];
     let next = this;
-    for (const scale of scaleIds) {
+    for (const scale of scales ? scaleIds : []) {
       next = next.rematerializeScale({ id: scale, marks: false, guides: false });
     }
-    next = next.editGraphics({
-      target: owner,
-      property: "items",
-      value: bodyItems(next, findLayer(next, owner), dataset, config)
-    });
+    next = replaceGraphicItems(next, owner, "rect",
+      bodyItems(next, findLayer(next, owner), dataset, config));
     next = applyMaterializationPlan(
       next,
       buildMaterializationPlan({
@@ -253,6 +249,9 @@ export const materializeGradientPlot = /* @__PURE__ */ action(
         ...requestedStrokeDetails(config.center, "Gradient plot center")
       });
     }
+    if (config.color !== undefined) {
+      next = next.encodeColor({ ...config.color, target: owner });
+    }
     const guides = config.guides;
     if (guides !== false) {
       const wantsStandard = guides.axes !== false || guides.grid !== false;

package/src/actions/gradientPlots/options.js

@@ -12,7 +12,7 @@ import {
 
 export const GRADIENT_PLOT_OPTIONS = Object.freeze([
   "id", "target", "data", "x", "y", "coordinate", "density", "width",
-  "gradient", "center", "guides"
+  "gradient", "center", "color", "guides"
 ]);
 
 function plain(value, keys, label, operation) {

package/src/actions/gradientPlots/paint.js

@@ -1,6 +1,8 @@
 import { resolveContinuousPalette } from "../../grammar/palettes.js";
 import { inverseLerp } from "../../grammar/numeric.js";
 import { mapScaleConsumerValues } from "../../materialization/scales/map.js";
+import { readScaleField } from "../../grammar/scales/index.js";
+import { resolveSequentialColorStops } from "../../grammar/scales/color.js";
 
 function parseHex(value) {
   const match = value.match(/^#([0-9a-f]{6})$/i);
@@ -31,21 +33,25 @@ function paletteColor(colors, amount) {
 }
 
 function categoricalRamp(base) {
-  const rgb = parseHex(base);
+  const normalized = resolveSequentialColorStops([base, base])[0];
+  const rgb = parseHex(normalized);
   const pale = interpolate([255, 255, 255], rgb, 0.2);
   return [
     `#${pale.map(value => value.toString(16).padStart(2, "0")).join("")}`,
-    base
+    normalized
   ];
 }
 
-export function resolveGradientPlotCategoryColors(program, layer, categories) {
-  if (layer.encoding?.color === undefined) return undefined;
-  const scale = program.resolvedScales[layer.encoding.color.scale];
+export function resolveGradientPlotAppearanceValues(program, layer, rows, channel) {
+  const encoding = layer.encoding?.[channel];
+  if (encoding === undefined) return undefined;
+  const scale = program.resolvedScales[encoding.scale];
   if (scale === undefined) {
-    throw new Error(`Gradient plot "${layer.id}" requires a resolved color scale.`);
+    throw new Error(`Gradient plot "${layer.id}" requires a resolved ${channel} scale.`);
   }
-  return mapScaleConsumerValues(categories, scale, "color");
+  return mapScaleConsumerValues(readScaleField(rows, encoding.field, encoding.fieldType, {
+    temporalUnit: encoding.temporalUnit
+  }), scale, channel);
 }
 
 export function createGradientPlotPaint(profile, {

package/src/actions/guides/applicability.js

@@ -25,6 +25,8 @@ function hasEncoding(program, layers, channel, { scaled = false, grid = false }
   return layers.some(layer => {
     if (isHorizonLayer(program, layer) && channel !== "x") return false;
     const encoding = layer.encoding?.[channel];
+    if (encoding?.datum !== undefined && encoding.field === undefined &&
+        layer.encoding?.[`${channel}2`]?.field === undefined) return false;
     if (!scaled && !grid) return encoding !== undefined;
     if (encoding?.scale === undefined) return false;
     if (!grid || POLAR_POSITION_CHANNELS.includes(channel)) return true;

package/src/actions/guides/axes/axes.js

@@ -5,6 +5,7 @@ import { isPlainObject } from "../../../core/immutable.js";
 import { validateUserId } from "../../../core/identifiers.js";
 import { validateKeys, validateOptionObject } from "../../../core/validation.js";
 import { findCoordinate } from "../../../selectors/coordinates.js";
+import { resolveParallelAxisTarget } from "./parallel/resolve.js";
 import { resolvePolarGuideResources } from "../polar/resolve.js";
 
 const TOP_OPTIONS = Object.freeze([
@@ -326,6 +327,44 @@ const createAxes = /* @__PURE__ */ action(
   }
 );
 
+// Aggregate existing component editors; omission/false preserves that axis.
+const editAxes = /* @__PURE__ */ action(
+  { op: "editAxes", description: "Edit selected existing axes in one atomic layout transaction." },
+  function (args = {}) {
+    const methods = { x: "editXAxis", y: "editYAxis", theta: "editThetaAxis",
+      radius: "editRadialAxis", parallel: "editParallelAxis" };
+    validateOptionObject(args, Object.keys(methods), "editAxes", { allowEmpty: false });
+    const plan = [];
+    for (const [channel, method] of Object.entries(methods)) {
+      const option = args[channel];
+      if (option === undefined || option === false) continue;
+      const entries = Array.isArray(option) ? option : [option];
+      if (entries.length === 0 || entries.some(entry => !isPlainObject(entry))) {
+        throw new TypeError(`editAxes ${channel} must be a plain object or a nonempty array of edit options.`);
+      }
+      if (Array.isArray(option) && ["theta", "radius"].includes(channel)) {
+        throw new TypeError(`editAxes ${channel} does not accept an array.`);
+      }
+      const targets = new Set();
+      for (const entry of entries) {
+        if (Array.isArray(option) && ["x", "y"].includes(channel) && entry.target === undefined) {
+          throw new Error(`editAxes ${channel} arrays require an explicit axis target for every entry.`);
+        }
+        const key = channel === "parallel" ? `${resolveParallelAxisTarget(this, entry.target ?? this.guideConfigs.axis?.parallel?.axes?.target)}:${entry.field}` : entry.target ?? channel;
+        if (targets.has(key)) throw new Error(`editAxes ${channel} contains a duplicate axis target.`);
+        targets.add(key);
+        plan.push({ method, args: entry });
+      }
+    }
+    if (plan.length === 0) throw new Error("editAxes requires at least one axis change.");
+    const apply = source => plan.reduce((program, step) => program[step.method](step.args), source);
+    // Preflight the full immutable proposal before beginning the returned branch.
+    withGuideLayoutTransaction(this, apply);
+    return withGuideLayoutTransaction(this, apply);
+  }
+);
+
 export function registerAxisCollectionActions(ProgramClass) {
   ProgramClass.prototype.createAxes = createAxes;
+  ProgramClass.prototype.editAxes = editAxes;
 }

package/src/actions/guides/axes/axis.js

@@ -1,7 +1,7 @@
 import { AXIS_RESOURCE_CHANNELS } from "../../../core/vocabulary.js";
 import { cartesianAxisOwners, axisTargetArgs, assertCartesianAxisSideAvailable } from "../../../selectors/axes.js";
 import { axisGraphicIds } from "../../../materialization/guides/resources.js";
-import { defaultAxisPosition, validateAxisPosition } from "./policy.js";
+import { defaultAxisPosition, validateAxisPosition, resolveAxisFrameConfig } from "./policy.js";
 import { isSourceOwnedText } from "../../../grammar/text.js";
 import { withGuideLayoutValidation } from "../../../materialization/guides/layout.js";
 import { action } from "../../../core/action.js";
@@ -21,12 +21,13 @@ const TOP_OPTIONS = Object.freeze([
   "line",
   "ticksAndLabels",
   "title",
-  "offset"
+  "offset", "underlay"
 ]);
 const LINE_OPTIONS = Object.freeze(["color", "lineWidth"]);
 const TICK_GROUP_OPTIONS = Object.freeze([
   "count",
   "values",
+  "rounding",
   "ticks",
   "labels"
 ]);
@@ -39,7 +40,7 @@ const TITLE_OPTIONS = Object.freeze([
   "fontSize",
   "fontFamily",
   "fontWeight",
-  "alongOffset", "align", "baseline"
+  "alongOffset", "align", "baseline", "overlap"
 ]);
 
 function validateNested(value, supported, label) {
@@ -53,6 +54,7 @@ function validateNested(value, supported, label) {
 export function validateAxisArgs(args, operation) {
   validateKeys(args, TOP_OPTIONS, operation);
   if (Object.hasOwn(args, "offset")) validateNonNegativeFinite(args.offset, "Axis frame offset");
+  resolveAxisFrameConfig(undefined, args);
 
   validateEnabledAxisComponents(args, operation);
   if (Object.hasOwn(args, "line") && args.line !== false) {
@@ -136,8 +138,10 @@ function makeCreateAxis(channel) {
       const shared = axisTargetArgs(axisId, channel);
       if (Object.hasOwn(args, "scale")) shared.scale = args.scale;
       if (Object.hasOwn(args, "position")) shared.position = args.position;
-      let next = Object.hasOwn(args, "offset")
-        ? source._withGuideConfig(axisId, "frame", { offset: args.offset }) : source;
+      const frame = resolveAxisFrameConfig(source.guideConfigs.axis?.[axisId]?.frame, args);
+      let next = frame === undefined
+        ? source._withoutMaterializationConfig(["guides", "axis", axisId, "frame"])
+        : source._withGuideConfig(axisId, "frame", frame);
 
       if (Object.hasOwn(args, "coordinate")) {
         const coordinate = validateUserId(args.coordinate, "Coordinate id");

package/src/actions/guides/axes/edit.js

@@ -1,5 +1,5 @@
 import { selectCartesianAxis, axisTargetArgs, assertCartesianAxisSideAvailable } from "../../../selectors/axes.js";
-import { validateAxisPosition } from "./policy.js";
+import { validateAxisPosition, resolveAxisFrameConfig } from "./policy.js";
 import { withGuideLayoutValidation } from "../../../materialization/guides/layout.js";
 import { action } from "../../../core/action.js";
 import { isPlainObject } from "../../../core/immutable.js";
@@ -14,21 +14,21 @@ import {
 } from "./components.js";
 
 const OPTIONS = Object.freeze([
-  "target", "position", "line", "ticks", "labels", "ticksAndLabels", "title", "offset"
+  "target", "position", "line", "ticks", "labels", "ticksAndLabels", "title", "offset", "underlay"
 ]);
 const LINE_OPTIONS = Object.freeze(["color", "lineWidth"]);
 const TICK_OPTIONS = Object.freeze([
-  "count", "values", "length", "color", "lineWidth", "alongOffset", "strokeDash", "strokeDashMap"
+  "count", "values", "rounding", "length", "color", "lineWidth", "alongOffset", "strokeDash", "strokeDashMap"
 ]);
 const LABEL_OPTIONS = Object.freeze([
-  "count", "values", "offset", "format", "color", "fontSize",
+  "count", "values", "rounding", "offset", "format", "color", "fontSize",
   "fontFamily", "fontWeight", "rotation", "maxWidth", "wrap",
   "lineHeight", "overlap", "alongOffset", "labelMap", "flush", "colorMap", "align"
 ]);
-const GROUP_OPTIONS = Object.freeze(["count", "values", "ticks", "labels"]);
+const GROUP_OPTIONS = Object.freeze(["count", "values", "rounding", "ticks", "labels"]);
 const TITLE_OPTIONS = Object.freeze([
   "text", "at", "offset", "rotation", "color", "fontSize",
-  "fontFamily", "fontWeight", "alongOffset", "align", "baseline"
+  "fontFamily", "fontWeight", "alongOffset", "align", "baseline", "overlap"
 ]);
 
 function validateNested(args, key, options, operation, { allowFalse = false } = {}) {
@@ -43,6 +43,7 @@ function validateNested(args, key, options, operation, { allowFalse = false } =
 
 function validateArgs(args, operation) {
   if (Object.hasOwn(args, "offset")) validateNonNegativeFinite(args.offset, "Axis frame offset");
+  resolveAxisFrameConfig(undefined, args);
   validateOptionObject(args, OPTIONS, operation, {
     allowEmpty: false,
     emptyMessage: `${operation} requires at least one axis change.`,
@@ -96,7 +97,7 @@ function buildPlan(program, channel, args, operation, axisId = channel) {
       plan.push({ kind: "remove", component });
     } else if (value !== undefined) {
       plan.push({ kind: "edit", operation: edit, args: { ...shared, ...value } });
-    } else if ((args.position !== undefined || Object.hasOwn(args, "offset")) && hasComponent(program, channel, component, axisId)) {
+    } else if ((args.position !== undefined || Object.hasOwn(args, "offset") || Object.hasOwn(args, "underlay")) && hasComponent(program, channel, component, axisId)) {
       plan.push({ kind: "edit", operation: edit, args: shared });
     }
   };
@@ -165,7 +166,9 @@ function makeEditAxis(channel) {
           coordinate: selected.owner.coordinate, position });
         source = source.editSemantic({ property: `guide.axis.${axisId}.position`, value: position });
       }
-      if (Object.hasOwn(args, "offset")) source = source._withGuideConfig(axisId, "frame", { offset: args.offset });
+      const frame = resolveAxisFrameConfig(source.guideConfigs.axis?.[axisId]?.frame, args);
+      source = frame === undefined ? source._withoutMaterializationConfig(["guides", "axis", axisId, "frame"])
+        : source._withGuideConfig(axisId, "frame", frame);
       const plan = buildPlan(source, channel, args, operation, axisId);
 
       // Run the complete proposal against an immutable speculative branch so a