ggaction 0.0.18 → 0.0.19

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

@@ -1,4 +1,7 @@
+import { selectCartesianAxis, axisTargetArgs } from "../../../selectors/axes.js";
+import { axisGraphicIds } from "../../../materialization/guides/resources.js";
 import { canvasOverflowError } from "../../../layout/canvas.js";
+import { patchGuideDash, validateGuideDash, normalizeGuideDashMap, resolveGuideDashes } from "../../../grammar/guideDash.js";
 import { editGraphicProperties } from "../../primitives/graphicProperties.js";
 import { withGuideLayoutValidation } from "../../../materialization/guides/layout.js";
 import { applyMaterializationPlan } from "../../../materialization/planner.js";
@@ -11,7 +14,7 @@ import {
   validateNonNegativeFinite,
   validateOptionObject
 } from "../../../core/validation.js";
-import { resolveGuideCoordinateBounds } from "../../../materialization/coordinateBounds.js";
+import { resolveCartesianAxisFrameBounds } from "../../../materialization/coordinateBounds.js";
 import {
   isTransformedScaleType,
   mapContinuousScaleValues,
@@ -32,7 +35,7 @@ import {
 import { findCanvasGraphic, resolvePlotGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
 
-const OPTIONS = Object.freeze(["scale", "position", "count", "values", "length", "color", "lineWidth", "alongOffset"]);
+const OPTIONS = Object.freeze(["target", "scale", "position", "count", "values", "length", "color", "lineWidth", "alongOffset", "strokeDash", "strokeDashMap"]);
 const DEFAULTS = Object.freeze({
   count: DEFAULT_TICK_COUNT,
   length: 6,
@@ -54,6 +57,8 @@ function validateOptions(args, operation, create) {
 }
 
 function validateConfig(channel, config) {
+  if (config.strokeDash !== undefined) validateGuideDash(config.strokeDash, "Tick strokeDash");
+  if (config.strokeDashMap !== undefined) normalizeGuideDashMap(config.strokeDashMap, { reset: false });
   validateAxisPosition(channel, config.position);
   if (config.mode === "count") {
     if (!Number.isInteger(config.count) || config.count <= 0) throw new RangeError("Tick count must be a positive integer.");
@@ -73,13 +78,9 @@ function validateConfig(channel, config) {
   validateNonEmptyString(config.color, "Tick color");
 }
 
-function geometry(program, channel, config) {
+function geometry(program, channel, config, axisId = channel) {
   const scale = program.resolvedScales[config.scale];
-  const bounds = resolveGuideCoordinateBounds(program, {
-    coordinate: program.semanticSpec.guides.axis?.[channel]?.coordinate,
-    scale: config.scale,
-    channel
-  });
+  const bounds = resolveCartesianAxisFrameBounds(program, channel, config.position, config.scale, axisId);
   const discrete = ["ordinal", "band", "point"].includes(scale?.type);
   if ((
     !["linear", "time", "ordinal", "band", "point"].includes(scale?.type) &&
@@ -139,9 +140,11 @@ function makeEdit(channel) {
   const op = channel === "x" ? "editXAxisTicks" : "editYAxisTicks";
   return action({ op, description: `Edit concrete ${channel}-axis ticks.` }, withGuideLayoutValidation(function (args = {}) {
     validateOptions(args, op, false);
-    const id = `${channel}AxisTicks`;
+    const selected = selectCartesianAxis(this, channel, args, { create: false });
+    const axisId = selected.id; args = selected.options;
+    const id = axisGraphicIds(channel, axisId)[1];
     if (this.graphicSpec.objects[id]?.type !== "line") throw new Error(`${op} requires existing axis ticks.`);
-    const previous = this.guideConfigs.axis?.[channel]?.ticks;
+    const previous = this.guideConfigs.axis?.[axisId]?.ticks;
     if (!previous) throw new Error(`${op} requires tick configuration.`);
     const explicitMode = Object.hasOwn(args, "values") || Object.hasOwn(args, "count");
     const inferredValues = !explicitMode && previous.inferredValues === true
@@ -155,24 +158,28 @@ function makeEdit(channel) {
     const mode = Object.hasOwn(args, "values") || inferredValues !== undefined
       ? "values"
       : Object.hasOwn(args, "count") ? "count" : previous.mode;
-    const config = {
+    const config = patchGuideDash({
       ...previous,
       ...args,
       ...(inferredValues === undefined ? {} : { values: inferredValues }),
       ...(explicitMode ? { inferredValues: false } : {}),
       mode
-    };
+    }, args);
     if (mode === "values") delete config.count; else delete config.values;
     validateConfig(channel, config);
-    const resolved = geometry(this, channel, config);
-    let next = this._withGuideConfig(channel, config).editGraphics({ target: id, property: "length", value: resolved.values.length });
+    const resolved = geometry(this, channel, config, axisId);
+    let next = this._withGuideConfig(axisId, config).editGraphics({ target: id, property: "length", value: resolved.values.length });
     for (const property of ["x1", "y1", "x2", "y2"]) next = next.editGraphics({ target: id, property, value: resolved[property] });
     next = editGraphicProperties(next, id, {
       stroke: config.color,
       strokeWidth: config.lineWidth
     });
+    if (config.strokeDash !== undefined || config.strokeDashMap !== undefined ||
+        previous.strokeDashMap !== undefined) {
+      next = next.editGraphics({ target: id, property: "strokeDash", value: resolveGuideDashes(resolved.values, config) });
+    }
     // Structural dependency plans own grids during a scale/role handoff.
-    return explicitMode ? applyMaterializationPlan(next, planAxisTickGridRematerialization(next, channel)) : next;
+    return explicitMode ? applyMaterializationPlan(next, planAxisTickGridRematerialization(next, channel, axisId)) : next;
   }));
 }
 
@@ -183,10 +190,12 @@ function makeCreate(channel) {
   const edit = channel === "x" ? "editXAxisTicks" : "editYAxisTicks";
   return action({ op, description: `Create concrete ${channel}-axis ticks.` }, withGuideLayoutValidation(function (args = {}) {
     validateOptions(args, op, true);
+    const selected = selectCartesianAxis(this, channel, args, { create: true });
+    const axisId = selected.id; args = selected.options;
     const scale = validateUserId(args.scale ?? channel, "Scale id");
-    const existingGuide = this.semanticSpec.guides.axis?.[channel]?.scale;
+    const existingGuide = this.semanticSpec.guides.axis?.[axisId]?.scale;
     if (existingGuide && existingGuide !== scale) throw new Error(`${op} conflicts with the existing axis scale.`);
-    const id = `${channel}AxisTicks`;
+    const id = axisGraphicIds(channel, axisId)[1];
     if (this.graphicSpec.objects[id]) throw new Error(`${op} requires missing axis ticks.`);
     const resolvedScale = this.resolvedScales[scale];
     const inferredValues =
@@ -197,18 +206,18 @@ function makeCreate(channel) {
           : inferHistogramBoundaries(this, channel, scale);
     const options =
       inferredValues === undefined ? args : { ...args, values: inferredValues };
-    const config = { scale, position: defaultAxisPosition(channel), length: DEFAULTS.length, color: DEFAULTS.color, lineWidth: DEFAULTS.lineWidth, ...options, inferredValues: inferredValues !== undefined, mode: Object.hasOwn(options, "values") ? "values" : "count" };
+    const config = patchGuideDash({ scale, position: defaultAxisPosition(channel), length: DEFAULTS.length, color: DEFAULTS.color, lineWidth: DEFAULTS.lineWidth, ...options, inferredValues: inferredValues !== undefined, mode: Object.hasOwn(options, "values") ? "values" : "count" }, args);
     if (config.mode === "values") delete config.count; else config.count ??= DEFAULTS.count;
-    validateConfig(channel, config); geometry(this, channel, config);
-    const next = this.editSemantic({ property: `guide.axis.${channel}.scale`, value: scale })
+    validateConfig(channel, config); geometry(this, channel, config, axisId);
+    const next = this.editSemantic({ property: `guide.axis.${axisId}.scale`, value: scale })
       .createGraphics({
         id,
         type: "line",
         length: 0,
         ...resolvePlotGraphicPlacement(this)
       })
-      ._withGuideConfig(channel, config)[edit]();
-    return applyMaterializationPlan(next, planAxisTickGridRematerialization(next, channel));
+      ._withGuideConfig(axisId, config)[edit](axisId === channel ? undefined : axisTargetArgs(axisId, channel));
+    return applyMaterializationPlan(next, planAxisTickGridRematerialization(next, channel, axisId));
   }));
 }
 

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

@@ -1,4 +1,7 @@
+import { selectCartesianAxis, axisTargetArgs } from "../../../selectors/axes.js";
+import { axisGraphicIds } from "../../../materialization/guides/resources.js";
 import { materializeTextLines } from "../../../materialization/textLines.js";
+import { axisTitleTextLines as titleLines, validateAxisTextPlacement } from "../../../grammar/axisTextPlacement.js";
 import { axisThemeTypography } from "../../theme/state.js";
 import { canvasOverflowError } from "../../../layout/canvas.js";
 import { isSourceOwnedText } from "../../../grammar/text.js";
@@ -7,10 +10,9 @@ import { action } from "../../../core/action.js";
 import { validateUserId } from "../../../core/identifiers.js";
 import {
   validateKeys,
-  validateNonEmptyString,
-  validateNonNegativeFinite
+  validateNonEmptyString
 } from "../../../core/validation.js";
-import { axisScaleBindings, resolveGuideCoordinateBounds } from "../../../materialization/coordinateBounds.js";
+import { axisScaleBindings, resolveCartesianAxisFrameBounds } from "../../../materialization/coordinateBounds.js";
 import {
   isTransformedScaleType,
   mapContinuousScaleValues,
@@ -31,7 +33,6 @@ import { findCanvasGraphic, resolvePlotGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
 import {
   resolveTextBounds,
-  resolveTextLines,
   textBoundsFitCanvas,
   textBoundsIntersect
 } from "../../../core/textMetrics.js";
@@ -40,14 +41,6 @@ import { resolveConcreteGraphicBounds } from
 import { validateAxisTextStyle } from "./labels.js";
 import { resolveRotation } from "../../../grammar/rotation.js";
 
-function titleLines(text, config) {
-  if (!/[\r\n]/u.test(text)) return undefined;
-  const lines = resolveTextLines(text, {
-    fontSize: config.fontSize, align: "center", baseline: "middle", blockAlign: "middle"
-  });
-  return lines.length > 1 ? lines : undefined;
-}
-
 function titleBounds(geometry, config, text, profile) {
   return resolveTextBounds({
     ...geometry,
@@ -56,8 +49,8 @@ function titleBounds(geometry, config, text, profile) {
     fontSize: config.fontSize,
     fontFamily: config.fontFamily,
     fontWeight: config.fontWeight,
-    textAlign: "center",
-    textBaseline: "middle",
+    textAlign: config.align ?? "center",
+    textBaseline: config.baseline ?? "middle",
     rotation: config.rotation
   }, profile);
 }
@@ -79,26 +72,22 @@ function resolveTitleAlong(scale, config) {
       along = mapContinuousScaleValues([config.at], scale)[0];
     }
   }
-  return along;
+  return along + (config.alongOffset ?? 0);
 }
 
-function axisLabelBounds(program, channel) {
-  const id = `${channel}AxisLabels`, labels = program.graphicSpec.objects[id];
+function axisLabelBounds(program, channel, axisId = channel) {
+  const id = axisGraphicIds(channel, axisId)[2], labels = program.graphicSpec.objects[id];
   const bounds = target => resolveConcreteGraphicBounds(
     program.graphicSpec, target, program.materializationConfigs.textMetrics
   );
   return labels?.items?.map(item => bounds(item.id)) ?? (labels ? [bounds(id)] : []);
 }
 
-function inferredTitleOffset(program, channel, config) {
-  const plot = resolveGuideCoordinateBounds(program, {
-    coordinate: program.semanticSpec.guides.axis?.[channel]?.coordinate,
-    scale: config.scale,
-    channel
-  });
+function inferredTitleOffset(program, channel, config, axisId = channel) {
+  const plot = resolveCartesianAxisFrameBounds(program, channel, config.position, config.scale, axisId);
   const canvas = findCanvasGraphic(program)?.properties;
-  const labels = program.graphicSpec.objects[`${channel}AxisLabels`]
-    ? resolveConcreteGraphicBounds(program.graphicSpec, `${channel}AxisLabels`, program.materializationConfigs.textMetrics)
+  const labels = program.graphicSpec.objects[axisGraphicIds(channel, axisId)[2]]
+    ? resolveConcreteGraphicBounds(program.graphicSpec, axisGraphicIds(channel, axisId)[2], program.materializationConfigs.textMetrics)
     : undefined;
   const preferred = channel === "x" ? 42 : 52;
   if (!plot || !canvas || !labels) return preferred;
@@ -112,7 +101,7 @@ function inferredTitleOffset(program, channel, config) {
     position: config.position,
     along: 0,
     offset: preferred
-  }), config, program.semanticSpec.guides.axis?.[channel]?.title ?? "", program.materializationConfigs.textMetrics);
+  }), config, program.semanticSpec.guides.axis?.[axisId]?.title ?? "", program.materializationConfigs.textMetrics);
   const needed = positive
     ? labels[far] + 4 - bounds[near]
     : bounds[far] - labels[near] + 4;
@@ -135,15 +124,15 @@ function inferredTitleOffset(program, channel, config) {
     bounds: plot, channel, position: config.position,
     along: resolveTitleAlong(program.resolvedScales[config.scale], config),
     offset: preferred + adjustment
-  }), config, program.semanticSpec.guides.axis?.[channel]?.title ?? "", program.materializationConfigs.textMetrics);
+  }), config, program.semanticSpec.guides.axis?.[axisId]?.title ?? "", program.materializationConfigs.textMetrics);
   // Optional ink reserve must not introduce a label collision.
-  return preferred + (axisLabelBounds(program, channel).some(label => label && textBoundsIntersect(candidateBounds, label))
+  return preferred + (axisLabelBounds(program, channel, axisId).some(label => label && textBoundsIntersect(candidateBounds, label))
     ? legacyAdjustment : adjustment);
 }
 
-const CREATE_OPTIONS = [
+const CREATE_OPTIONS = ["target",
   "text", "scale", "position", "at", "offset", "rotation", "color",
-  "fontSize", "fontFamily", "fontWeight"
+  "fontSize", "fontFamily", "fontWeight", "alongOffset", "align", "baseline"
 ];
 const EDIT_OPTIONS = CREATE_OPTIONS.filter(key => key !== "scale");
 const DEFAULTS = {
@@ -160,7 +149,7 @@ function validateText(text) {
 function validateConfig(channel, config) {
   validateAxisPosition(channel, config.position);
   if (!["start", "center", "end"].includes(config.at) && !Number.isFinite(config.at)) throw new TypeError("Axis title at must be start, center, end, or a finite number.");
-  validateNonNegativeFinite(config.offset, "Axis title offset");
+  validateAxisTextPlacement(config, { title: true });
   if (!Number.isFinite(config.rotation)) throw new TypeError("Axis title rotation must be finite radians.");
   validateAxisTextStyle(config, "Axis title");
 }
@@ -214,13 +203,9 @@ export function inferAxisTitleText(program, channel, scaleId) {
   return [...titles][0];
 }
 
-function resolveGeometry(program, channel, config) {
+function resolveGeometry(program, channel, config, axisId = channel) {
   const scale = program.resolvedScales[config.scale];
-  const bounds = resolveGuideCoordinateBounds(program, {
-    coordinate: program.semanticSpec.guides.axis?.[channel]?.coordinate,
-    scale: config.scale,
-    channel
-  });
+  const bounds = resolveCartesianAxisFrameBounds(program, channel, config.position, config.scale, axisId);
   if ((
     !["linear", "time", "ordinal", "band", "point"].includes(scale?.type) &&
     !isTransformedScaleType(scale?.type)
@@ -236,13 +221,13 @@ function resolveGeometry(program, channel, config) {
   const resolvedBounds = titleBounds(
     geometry,
     config,
-    program.semanticSpec.guides.axis?.[channel]?.title ?? ""
+    program.semanticSpec.guides.axis?.[axisId]?.title ?? ""
   , program.materializationConfigs.textMetrics);
   const canvas = findCanvasGraphic(program)?.properties;
   if (!canvas || !textBoundsFitCanvas(resolvedBounds, canvas)) {
     throw canvasOverflowError(`The ${channel}-axis title does not fit the Canvas margin.`, [resolvedBounds], canvas);
   }
-  const labelBounds = axisLabelBounds(program, channel);
+  const labelBounds = axisLabelBounds(program, channel, axisId);
   if (labelBounds.some(bounds => bounds && textBoundsIntersect(resolvedBounds, bounds))) {
     throw new Error(`The ${channel}-axis title overlaps the axis labels.`);
   }
@@ -251,15 +236,19 @@ function resolveGeometry(program, channel, config) {
 
 function names(channel) {
   const prefix = channel === "x" ? "X" : "Y";
-  return { create: `create${prefix}AxisTitle`, edit: `edit${prefix}AxisTitle`, graphic: `${channel}AxisTitle` };
+  return { create: `create${prefix}AxisTitle`, edit: `edit${prefix}AxisTitle` };
 }
 
 function makeEdit(channel) {
   const operation = names(channel);
   return action({ op: operation.edit, description: `Edit the ${channel}-axis title.` }, withGuideLayoutValidation(function (args = {}) {
       validateKeys(args, EDIT_OPTIONS, operation.edit);
-    if (this.graphicSpec.objects[operation.graphic]?.type !== "text") throw new Error(`${operation.edit} requires an existing axis title.`);
-    const previous = this.guideConfigs.axis?.[channel]?.title;
+    const selected = selectCartesianAxis(this, channel, args, { create: false });
+    const axisId = selected.id; args = selected.options;
+    const graphic = axisGraphicIds(channel, axisId)[3];
+    validateAxisTextPlacement(args, { title: true });
+    if (this.graphicSpec.objects[graphic]?.type !== "text") throw new Error(`${operation.edit} requires an existing axis title.`);
+    const previous = this.guideConfigs.axis?.[axisId]?.title;
     if (!previous) throw new Error(`${operation.edit} requires title configuration.`);
     const { text, rotation: requestedRotation, ...appearance } = args;
     const explicitText = Object.hasOwn(args, "text");
@@ -289,27 +278,27 @@ function makeEdit(channel) {
       ? validateText(text)
       : config.inferredText === true
         ? inferAxisTitleText(this, channel, config.scale)
-        : this.semanticSpec.guides.axis?.[channel]?.title;
-    if (resolvedTitle !== this.semanticSpec.guides.axis?.[channel]?.title) {
+        : this.semanticSpec.guides.axis?.[axisId]?.title;
+    if (resolvedTitle !== this.semanticSpec.guides.axis?.[axisId]?.title) {
       next = next.editSemantic({
-        property: `guide.axis.${channel}.title`,
+        property: `guide.axis.${axisId}.title`,
         value: validateText(resolvedTitle)
       });
     }
-    const resolvedText = validateText(next.semanticSpec.guides.axis?.[channel]?.title);
+    const resolvedText = validateText(next.semanticSpec.guides.axis?.[axisId]?.title);
     if (config.inferredOffset) {
-      config.offset = inferredTitleOffset(next, channel, config);
+      config.offset = inferredTitleOffset(next, channel, config, axisId);
     }
-    const geometry = resolveGeometry(next, channel, config);
-    next = next._withGuideConfig(channel, "title", config);
+    const geometry = resolveGeometry(next, channel, config, axisId);
+    next = next._withGuideConfig(axisId, "title", config);
     const properties = {
       x: geometry.x, y: geometry.y, text: resolvedText, fill: config.color,
       fontSize: config.fontSize, fontFamily: config.fontFamily,
-      fontWeight: config.fontWeight, textAlign: "center", textBaseline: "middle",
+      fontWeight: config.fontWeight, textAlign: config.align ?? "center", textBaseline: config.baseline ?? "middle",
       rotation: config.rotation
     };
-    for (const [property, value] of Object.entries(properties)) next = next.editGraphics({ target: operation.graphic, property, value });
-    return materializeTextLines(next, operation.graphic, titleLines(resolvedText, config));
+    for (const [property, value] of Object.entries(properties)) next = next.editGraphics({ target: graphic, property, value });
+    return materializeTextLines(next, graphic, titleLines(resolvedText, config));
   }));
 }
 
@@ -320,6 +309,10 @@ function makeCreate(channel) {
   const operation = names(channel);
   return action({ op: operation.create, description: `Create the ${channel}-axis title.` }, withGuideLayoutValidation(function (args = {}) {
       validateKeys(args, CREATE_OPTIONS, operation.create);
+    const selected = selectCartesianAxis(this, channel, args, { create: true });
+    const axisId = selected.id; args = selected.options;
+    const graphic = axisGraphicIds(channel, axisId)[3];
+    validateAxisTextPlacement(args, { title: true });
     const {
       text: requestedText,
       scale: requestedScale,
@@ -328,9 +321,9 @@ function makeCreate(channel) {
       ...appearance
     } = args;
     const scale = validateUserId(requestedScale ?? channel, "Scale id");
-    const guideScale = this.semanticSpec.guides.axis?.[channel]?.scale;
+    const guideScale = this.semanticSpec.guides.axis?.[axisId]?.scale;
     if (guideScale && guideScale !== scale) throw new Error(`${operation.create} conflicts with the existing axis scale.`);
-    if (this.graphicSpec.objects[operation.graphic]) throw new Error(`${operation.create} requires a missing axis title.`);
+    if (this.graphicSpec.objects[graphic]) throw new Error(`${operation.create} requires a missing axis title.`);
     const inferredText = !Object.hasOwn(args, "text");
     const text = validateText(
       requestedText ?? inferAxisTitleText(this, channel, scale)
@@ -357,18 +350,18 @@ function makeCreate(channel) {
       ...appearance
     };
     let next = this
-      .editSemantic({ property: `guide.axis.${channel}.scale`, value: scale })
-      .editSemantic({ property: `guide.axis.${channel}.title`, value: text });
-    if (inferredOffset) config.offset = inferredTitleOffset(next, channel, config);
+      .editSemantic({ property: `guide.axis.${axisId}.scale`, value: scale })
+      .editSemantic({ property: `guide.axis.${axisId}.title`, value: text });
+    if (inferredOffset) config.offset = inferredTitleOffset(next, channel, config, axisId);
     validateConfig(channel, config);
-    resolveGeometry(next, channel, config);
+    resolveGeometry(next, channel, config, axisId);
     return next
       .createGraphics({
-        id: operation.graphic,
+        id: graphic,
         type: "text",
         ...resolvePlotGraphicPlacement(this)
       })
-      ._withGuideConfig(channel, "title", config)[operation.edit]();
+      ._withGuideConfig(axisId, "title", config)[operation.edit](axisId === channel ? undefined : axisTargetArgs(axisId, channel));
   }));
 }
 

package/src/actions/guides/facadeAxes.js

@@ -1,3 +1,4 @@
+import { axisTargetArgs } from "../../selectors/axes.js";
 import { validatePolarAxisArgs } from "./polar/axes/facade.js";
 import { prefix as polarPrefix, resolveAngle } from "./polar/axes/shared.js";
 import { validateAxesArgs } from "./axes/axes.js";
@@ -47,24 +48,26 @@ export function scopeFacadeAxes(program, layer, args) {
   }
   const scoped = { coordinate: { id: coordinate.id, type: "cartesian" } };
   for (const channel of ["x", "y"]) {
-    const option = args[channel];
-    if (option === false || (option === undefined && layer.encoding?.[channel] === undefined)) {
-      scoped[channel] = false;
-      continue;
-    }
-    const scale = layer.encoding?.[channel]?.scale;
-    if (scale === undefined) guideConflict(`this facade has no ${channel} scale`);
-    if (option?.scale !== undefined && option.scale !== scale) {
-      guideConflict(`axes.${channel}.scale does not belong to this facade`);
-    }
-    if (option?.coordinate !== undefined && option.coordinate !== coordinate.id) {
-      guideConflict(`axes.${channel}.coordinate does not belong to this facade`);
-    }
-    scoped[channel] = { ...option, scale, coordinate: coordinate.id };
-    validateAxisArgs(scoped[channel], `create${channel.toUpperCase()}Axis`);
-    if (scoped[channel].ticksAndLabels !== false) {
-      validateAxisTickGroupArgs(scoped[channel].ticksAndLabels ?? {}, "createAxisTicksAndLabels", true);
-    }
+    const scope = option => {
+      if (option === false || (option === undefined && layer.encoding?.[channel] === undefined)) {
+        return false;
+      }
+      const scale = layer.encoding?.[channel]?.scale;
+      if (scale === undefined) guideConflict(`this facade has no ${channel} scale`);
+      if (option?.scale !== undefined && option.scale !== scale) {
+        guideConflict(`axes.${channel}.scale does not belong to this facade`);
+      }
+      if (option?.coordinate !== undefined && option.coordinate !== coordinate.id) {
+        guideConflict(`axes.${channel}.coordinate does not belong to this facade`);
+      }
+      const scopedOption = { ...option, scale, coordinate: coordinate.id };
+      validateAxisArgs(scopedOption, `create${channel.toUpperCase()}Axis`);
+      if (scopedOption.ticksAndLabels !== false) {
+        validateAxisTickGroupArgs(scopedOption.ticksAndLabels ?? {}, "createAxisTicksAndLabels", true);
+      }
+      return scopedOption;
+    };
+    scoped[channel] = Array.isArray(args[channel]) ? args[channel].map(scope) : scope(args[channel]);
   }
   return scoped;
 }
@@ -76,21 +79,25 @@ function tickMode(config) {
 
 function planAxis(program, channel, args, explicit) {
   const prefix = channel.toUpperCase();
-  const guide = program.semanticSpec.guides.axis?.[channel];
-  const configs = program.guideConfigs.axis?.[channel] ?? {};
+  const axisId = args.id ?? channel;
+  const guide = program.semanticSpec.guides.axis?.[axisId];
+  const configs = program.guideConfigs.axis?.[axisId] ?? {};
   if (guide === undefined && Object.keys(configs).length === 0) {
     return [{ op: `create${prefix}Axis`, args }];
   }
   if (guide?.scale !== args.scale || resolveStoredGuideCoordinate(program, guide, channel) !== args.coordinate) {
     guideConflict(`${channel} axis uses a different coordinate or scale`);
   }
+  if (explicit.offset !== undefined && explicit.offset !== (configs.frame?.offset ?? 0)) {
+    guideConflict(`${channel} axis uses a different frame offset`);
+  }
   const positions = [...new Set(Object.values(configs).map(config => config.position).filter(Boolean))];
   if (positions.length > 1) guideConflict(`${channel} axis components have incompatible positions`);
   const position = explicit.position ?? positions[0];
-  const shared = { scale: args.scale, ...(position === undefined ? {} : { position }) };
+  const shared = { ...axisTargetArgs(axisId, channel), scale: args.scale, ...(position === undefined ? {} : { position }) };
   const explicitShared = explicit.position === undefined ? {} : { position: explicit.position };
   const steps = guide.coordinate === undefined ? [{
-    op: "editSemantic", args: { property: `guide.axis.${channel}.coordinate`, value: args.coordinate }
+    op: "editSemantic", args: { property: `guide.axis.${axisId}.coordinate`, value: args.coordinate }
   }] : [];
   const group = args.ticksAndLabels ?? {};
   const explicitGroup = explicit.ticksAndLabels ?? {};
@@ -106,7 +113,7 @@ function planAxis(program, channel, args, explicit) {
   for (const component of ["line", "ticks", "labels", "title"]) {
     const config = configs[component];
     if (axisComponentDisabled(args, component)) {
-      if (hasAxisComponent(program, channel, component)) guideConflict(`${channel} axis already has ${component}`);
+      if (hasAxisComponent(program, channel, component, axisId)) guideConflict(`${channel} axis already has ${component}`);
       continue;
     }
     if (config === undefined) continue;
@@ -154,7 +161,9 @@ export function planFacadeAxes(program, layer, scoped, explicit = {}) {
       : planPolarAxis(program, channel, scoped[channel], explicit[channel] ?? {}));
   }
   return ["x", "y"].flatMap(channel => scoped[channel] === false ? []
-    : planAxis(program, channel, scoped[channel], explicit[channel] ?? {}));
+    : Array.isArray(scoped[channel])
+      ? scoped[channel].flatMap((entry, index) => planAxis(program, channel, entry, explicit[channel]?.[index] ?? {}))
+      : planAxis(program, channel, scoped[channel], explicit[channel] ?? {}));
 }
 
 function planPolarAxis(program, channel, args, explicit) {

package/src/actions/guides/facadeLegend.js

@@ -4,8 +4,8 @@ import { legendResourcePolicy } from "../../materialization/guides/resources.js"
 import { assertGuideOptions, guideConflict, sameGuideValue } from "./reuse.js";
 
 function compatibleLegend(program, kind, requested, existing, explicit) {
-  const expectedScales = requested.scales ?? [requested.scale];
-  const actualScales = existing.scales ?? [existing.scale];
+  const expectedScales = kind === "colorSize" ? [requested.colorScale,requested.sizeScale] : requested.scales ?? [requested.scale];
+  const actualScales = kind === "colorSize" ? [existing.colorScale,existing.sizeScale] : existing.scales ?? [existing.scale];
   if (!sameGuideValue(expectedScales, actualScales) ||
     !sameGuideValue(requested.channels, existing.channels)) {
     guideConflict(`${kind} legend uses different channels or scales`);
@@ -18,7 +18,7 @@ function compatibleLegend(program, kind, requested, existing, explicit) {
     requested.symbol.layers.map(layer => layer.type), existing.symbol?.layers?.map(layer => layer.type)
   )) guideConflict(`${kind} legend uses a different symbol recipe`);
   if (explicit.representation !== undefined && (requested.representation ?? "gradient") !== (existing.representation ?? "gradient")) guideConflict(`${kind} legend uses a different color representation`);
-  if (requested.representation === "symbols") {
+  if (requested.representation === "symbols" || kind === "colorSize") {
     if (explicit.values !== undefined && !sameGuideValue(requested.sampling.values, existing.sampling?.values)) guideConflict(`${kind} legend uses different exact samples`);
     if (explicit.count !== undefined && (existing.sampling?.mode !== "auto" || requested.sampling.count !== existing.sampling?.count)) guideConflict(`${kind} legend uses a different sample count`);
   }

package/src/actions/guides/grids/grid.js

@@ -85,7 +85,7 @@ function makeRematerialize(direction) {
         .editGraphics({
           target: operation.graphic,
           property: "strokeDash",
-          value: geometry.values.map(() => config.strokeDash)
+          value: geometry.strokeDash
         });
     }
   );