ggaction 0.0.13 → 0.0.16

package/src/actions/guides/legends/transition.js

@@ -2,42 +2,191 @@ import { isDiscretizedColorScaleType } from "../../../grammar/scales/types.js";
 import { normalizeContinuousLegend } from "./continuous/common.js";
 import { DEFAULT_GRADIENT_SIZE } from "./continuous/gradient.js";
 import { normalizeIntervalLegend } from "./continuous/interval.js";
+import {
+  describeLegendBlock,
+  legendBlockDescriptors,
+  resolveLegendBlock
+} from "./target.js";
+import { validateLegendBlockOverride } from "./blocks.js";
 
-const family = type => type === "sequential" ? "gradient"
-  : isDiscretizedColorScaleType(type) ? "interval" : undefined;
+const family = (channel, type) => type === "sequential"
+  ? channel === "stroke" ? "strokeGradient" : "gradient"
+  : isDiscretizedColorScaleType(type)
+    ? channel === "stroke" ? "strokeInterval" : "interval"
+    : type === "ordinal"
+      ? channel === "stroke" ? "stroke" : "color"
+    : undefined;
 const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
 
-export function planColorLegendTransition(program, scale, nextType) {
-  const from = family(scale.type), to = family(nextType);
+function categoricalFamilyCustom(program, kind, stored) {
+  const side = ["left", "right"].includes(stored.position);
+  const direction = side ? "vertical" : "horizontal";
+  const itemGap = side ? 28 : stored.position === "top" ? 24 : 20;
+  const order = program.semanticSpec.guides.legend?.[kind]?.order;
+  return stored.inferredSymbol !== true ||
+    stored.direction !== direction ||
+    (stored.columns !== undefined && !(side && stored.columns === 1)) ||
+    stored.itemGap !== itemGap || stored.layout !== "edge" ||
+    order !== undefined;
+}
+
+function planChannelLegendTransition(program, scale, nextType, channel) {
+  const from = family(channel, scale.type), to = family(channel, nextType);
   if (from === undefined || to === undefined || from === to) return undefined;
   const stored = program.guideConfigs.legend?.[from];
-  if (stored?.scale !== scale.id) return undefined;
+  if ((stored?.scale ?? stored?.scales?.[0]) !== scale.id) return undefined;
+  const oldDescriptor = describeLegendBlock(program, from, stored);
+  const overrideKeys = Object.keys(stored.blockOverrides ?? {});
+  if (overrideKeys.some(key => key !== oldDescriptor.key)) {
+    throw new Error(`${channel} legend transition found stale legend block overrides.`);
+  }
+  const blockOverride = stored.blockOverrides?.[oldDescriptor.key];
   const side = ["left", "right"].includes(stored.position);
-  const defaults = from === "gradient" ? normalizeContinuousLegend({ position: stored.position }, "gradient")
+  const categorical = ["color", "stroke"].includes(from);
+  const gradientFamily = from.toLowerCase().endsWith("gradient");
+  const defaults = gradientFamily ? normalizeContinuousLegend({ position: stored.position }, "gradient")
     : normalizeIntervalLegend({ position: stored.position });
-  const custom = from === "gradient"
+  const comparableSymbol = channel === "stroke" && stored.inferredStrokeWidth === true
+    ? { ...stored.symbol, strokeWidth: defaults.symbol?.strokeWidth }
+    : stored.symbol;
+  const custom = categorical
+    ? categoricalFamilyCustom(program, from, stored)
+    : gradientFamily
     ? stored.count !== defaults.count || !same(stored.gradient, DEFAULT_GRADIENT_SIZE) || stored.itemGap !== defaults.itemGap
-    : !same(stored.symbol, defaults.symbol) || stored.itemGap !== defaults.itemGap ||
+    : !same(comparableSymbol, defaults.symbol) || stored.itemGap !== defaults.itemGap ||
       stored.direction !== defaults.direction || (stored.columns !== undefined && !(side && stored.columns === 1));
   if (custom) {
-    throw new Error("Color legend transition cannot discard custom family settings; remove and recreate the legend explicitly.");
+    throw new Error(`${channel} legend transition cannot discard custom family settings; remove and recreate the legend explicitly.`);
+  }
+  if (blockOverride?.title !== undefined) {
+    throw new Error(`${channel} legend transition cannot distribute a legend block title; edit the destination block explicitly.`);
+  }
+  if (blockOverride?.labelMap !== undefined) {
+    throw new Error(`${channel} legend transition cannot distribute a legend block labelMap; edit the destination block explicitly.`);
+  }
+  if (blockOverride?.symbol !== undefined && ["gradient", "strokeGradient"].includes(to)) {
+    throw new Error(`${channel} legend transition cannot apply symbol overrides to a gradient block.`);
   }
   const args = {
-    target: stored.target, channels: ["color"], position: stored.position,
+    target: stored.target, channels: [channel], position: stored.position,
     labels: stored.labels, titleStyle: stored.titleStyle, border: stored.border,
     align: stored.align, offset: stored.offset, titlePosition: stored.titlePosition,
     ...(stored.inferredTitle ? {} : { title: stored.title })
   };
   try {
-    if (to === "interval") normalizeIntervalLegend(args);
-    else normalizeContinuousLegend(args, "gradient");
+    if (["interval", "strokeInterval"].includes(to)) {
+      normalizeIntervalLegend({ ...args, channels: undefined });
+    }
+    else if (["gradient", "strokeGradient"].includes(to)) {
+      normalizeContinuousLegend(args, "gradient");
+    }
   } catch (error) {
-    throw new Error(`Color legend transition has incompatible layout or style: ${error.message}`);
+    throw new Error(`${channel} legend transition has incompatible layout or style: ${error.message}`);
   }
-  return { args, titleVisible: stored.titleVisible !== false };
+  return { args, channel, titleVisible: stored.titleVisible !== false, blockOverride };
+}
+
+export function planColorLegendTransitions(program, scale, nextType) {
+  return ["color", "stroke"].flatMap(channel => {
+    const plan = planChannelLegendTransition(program, scale, nextType, channel);
+    return plan === undefined ? [] : [plan];
+  });
 }
 
 export function applyColorLegendTransition(program, plan) {
-  const next = program.createLegend(plan.args);
-  return plan.titleVisible ? next : next.editLegend({ target: plan.args.target, title: false });
+  let next = program.createLegend(plan.args);
+  if (!plan.titleVisible) {
+    next = next.editLegend({ target: plan.args.target, title: false });
+  }
+  if (plan.blockOverride === undefined) return next;
+  const descriptor = resolveLegendBlock(next, {
+    target: plan.args.target,
+    channel: plan.channel
+  }, `${plan.channel} legend transition`);
+  validateLegendBlockOverride(descriptor, plan.blockOverride);
+  next = next._withLegendConfig(descriptor.kind, {
+    ...descriptor.config,
+    blockOverrides: { [descriptor.key]: plan.blockOverride }
+  });
+  return next.rematerializeLegend();
+}
+
+function intersects(left, right) {
+  return left.channels.some(channel => right.channels.includes(channel));
+}
+
+function explicitOrder(program, descriptor) {
+  if (descriptor.family !== "categorical") return undefined;
+  return program.semanticSpec.guides.legend?.[descriptor.kind]?.order;
+}
+
+function sameBlockValue(left, right) {
+  if (Object.is(left, right)) return true;
+  if (Array.isArray(left) && Array.isArray(right)) {
+    return left.length === right.length &&
+      left.every((value, index) => sameBlockValue(value, right[index]));
+  }
+  if (left !== null && right !== null &&
+    typeof left === "object" && typeof right === "object" &&
+    !Array.isArray(left) && !Array.isArray(right)) {
+    const leftKeys = Object.keys(left).sort();
+    const rightKeys = Object.keys(right).sort();
+    return leftKeys.length === rightKeys.length &&
+      leftKeys.every((key, index) => key === rightKeys[index] &&
+        sameBlockValue(left[key], right[key]));
+  }
+  return false;
+}
+
+function transitionError(target, oldDescriptors, nextDescriptor, field) {
+  const oldKeys = oldDescriptors.map(item => item.key).join(", ");
+  throw new Error(
+    `Legend block transition for target "${target}" from ${oldKeys} to ${nextDescriptor.key} conflicts on ${field}.`
+  );
+}
+
+function withoutBlockOverrides(config) {
+  const { blockOverrides: _removed, ...rest } = config;
+  return rest;
+}
+
+export function planLegendBlockTransitions(program, target, plans) {
+  const oldDescriptors = legendBlockDescriptors(program, target);
+  const nextDescriptors = plans.map(plan =>
+    describeLegendBlock(program, plan.kind, plan.config));
+  return plans.map((plan, index) => {
+    const descriptor = nextDescriptors[index];
+    const incoming = oldDescriptors.filter(old => intersects(old, descriptor));
+    let override;
+    if (incoming.length === 1 && incoming[0].key === descriptor.key) {
+      override = incoming[0].config.blockOverrides?.[incoming[0].key];
+    } else if (incoming.length === 1) {
+      const old = incoming[0];
+      override = old.config.blockOverrides?.[old.key];
+      if (override?.title !== undefined) {
+        transitionError(target, incoming, descriptor, "title");
+      }
+      if (override?.labelMap !== undefined) {
+        transitionError(target, incoming, descriptor, "labelMap");
+      }
+    } else if (incoming.length > 1) {
+      const overrides = incoming.map(old => old.config.blockOverrides?.[old.key]);
+      if (!overrides.every(value => sameBlockValue(value, overrides[0]))) {
+        transitionError(target, incoming, descriptor, "block override");
+      }
+      const orders = incoming.map(old => explicitOrder(program, old));
+      if (!orders.every(value => sameBlockValue(value, orders[0]))) {
+        transitionError(target, incoming, descriptor, "order");
+      }
+      override = overrides[0];
+    }
+    if (override !== undefined) validateLegendBlockOverride(descriptor, override);
+    const config = withoutBlockOverrides(plan.config);
+    return {
+      ...plan,
+      config: override === undefined
+        ? config
+        : { ...config, blockOverrides: { [descriptor.key]: override } }
+    };
+  });
 }

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

@@ -8,7 +8,7 @@ import {
   validateEnabledAxisComponents
 } from "../../axes/components.js";
 import {
-  LABEL_EDIT_OPTIONS,
+  labelEditOptions,
   LINE_EDIT_OPTIONS,
   prefix,
   resolveAngle,
@@ -54,7 +54,7 @@ export function validatePolarAxisArgs(kind, args, operation) {
     if (Object.hasOwn(args.ticksAndLabels, "labels")) {
       validateObject(
         args.ticksAndLabels.labels,
-        LABEL_EDIT_OPTIONS.filter(key => !["count", "values"].includes(key)),
+        labelEditOptions(kind).filter(key => !["count", "values"].includes(key)),
         `${operation}.ticksAndLabels.labels`
       );
     }
@@ -131,7 +131,7 @@ function validateAxisEditArgs(kind, args, operation) {
     validateModeOptions(args.ticks, `${operation}.ticks`);
   }
   if (Object.hasOwn(args, "labels") && args.labels !== false) {
-    validateObject(args.labels, LABEL_EDIT_OPTIONS, `${operation}.labels`);
+    validateObject(args.labels, labelEditOptions(kind), `${operation}.labels`);
     validateModeOptions(args.labels, `${operation}.labels`);
   }
   if (args.ticksAndLabels !== undefined &&
@@ -155,7 +155,7 @@ function validateAxisEditArgs(kind, args, operation) {
     if (args.ticksAndLabels.labels !== undefined) {
       validateObject(
         args.ticksAndLabels.labels,
-        LABEL_EDIT_OPTIONS.filter(key => !["count", "values"].includes(key)),
+        labelEditOptions(kind).filter(key => !["count", "values"].includes(key)),
         `${operation}.ticksAndLabels.labels`
       );
     }
@@ -228,7 +228,7 @@ function makeEditAxis(kind) {
   });
 }
 
-export const createThetaAxis = makeCreateAxis("theta");
-export const createRadialAxis = makeCreateAxis("radius");
-export const editThetaAxis = makeEditAxis("theta");
-export const editRadialAxis = makeEditAxis("radius");
+export const createThetaAxis = /* @__PURE__ */ makeCreateAxis("theta");
+export const createRadialAxis = /* @__PURE__ */ makeCreateAxis("radius");
+export const editThetaAxis = /* @__PURE__ */ makeEditAxis("theta");
+export const editRadialAxis = /* @__PURE__ */ makeEditAxis("radius");

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

@@ -20,8 +20,8 @@ import {
 } from "../resolve.js";
 import {
   componentResources,
-  LABEL_CREATE_OPTIONS,
-  LABEL_EDIT_OPTIONS,
+  labelCreateOptions,
+  labelEditOptions,
   operations,
   prefix,
   resolveAngle,
@@ -30,9 +30,11 @@ import {
   validateObject,
   withAxisSemantics
 } from "./shared.js";
+import { normalizeDisplayLabelMap } from
+  "../../../../grammar/displayLabels.js";
 
 function labelGeometry(program, kind, config, angle = resolveAngle(program, kind, {})) {
-  const frame = resolvePolarFrameForProgram(program);
+  const frame = resolvePolarFrameForProgram(program, config.coordinate);
   const mapped = mapPolarGuideValues(program, config);
   const text = formatPolarGuideValues(program, config, mapped.values);
   const geometry = {
@@ -64,7 +66,7 @@ function labelGeometry(program, kind, config, angle = resolveAngle(program, kind
       textAlign: geometry.textAlign[index],
       textBaseline: geometry.textBaseline[index]
     }))
-  });
+  }, program.materializationConfigs.textMetrics);
   return geometry;
 }
 
@@ -115,6 +117,23 @@ function resolveLabelConfig(program, kind, args, resources, previous) {
     fontWeight: args.fontWeight ?? previous?.fontWeight ??
       POLAR_AXIS_DEFAULTS.labels.fontWeight
   };
+  const labelScale = program.resolvedScales[resources.scale];
+  if (Object.hasOwn(args, "labelMap")) {
+    if (kind !== "theta" || !["ordinal", "band", "point"].includes(labelScale?.type)) {
+      throw new Error(`${prefix(kind)} axis labelMap requires a categorical theta scale.`);
+    }
+    if (args.labelMap === "auto") delete config.labelMap;
+    else {
+      config.labelMap = normalizeDisplayLabelMap(
+        args.labelMap,
+        `${prefix(kind)} axis labelMap`
+      );
+    }
+  }
+  if (config.labelMap !== undefined &&
+      (kind !== "theta" || !["ordinal", "band", "point"].includes(labelScale?.type))) {
+    throw new Error(`${prefix(kind)} axis labelMap requires a categorical theta scale.`);
+  }
   validatePolarTickConfig(config, `${kind}-axis labels`);
   validateNonNegativeFinite(config.offset, "Polar axis label offset");
   validatePolarLabelFormat(config.format);
@@ -128,7 +147,7 @@ function makeEditLabels(kind) {
     op: operation.edit,
     description: `Edit the Polar ${kind}-axis labels.`
   }, function (args = {}) {
-    validateObject(args, LABEL_EDIT_OPTIONS, operation.edit);
+    validateObject(args, labelEditOptions(kind), operation.edit);
     validateModeOptions(args, operation.edit);
     const names = polarGuideNames(kind);
     const previous = this.guideConfigs.axis?.[kind]?.labels;
@@ -172,7 +191,7 @@ function makeCreateLabels(kind) {
     op: operation.create,
     description: `Create the Polar ${kind}-axis labels.`
   }, function (args = {}) {
-    validateComponentCreateArgs(kind, args, LABEL_CREATE_OPTIONS, operation.create);
+    validateComponentCreateArgs(kind, args, labelCreateOptions(kind), operation.create);
     validateModeOptions(args, operation.create);
     const names = polarGuideNames(kind);
     if (this.graphicSpec.objects[names.labels] !== undefined) {
@@ -199,7 +218,7 @@ function makeCreateLabels(kind) {
   });
 }
 
-export const createThetaAxisLabels = makeCreateLabels("theta");
-export const createRadialAxisLabels = makeCreateLabels("radius");
-export const editThetaAxisLabels = makeEditLabels("theta");
-export const editRadialAxisLabels = makeEditLabels("radius");
+export const createThetaAxisLabels = /* @__PURE__ */ makeCreateLabels("theta");
+export const createRadialAxisLabels = /* @__PURE__ */ makeCreateLabels("radius");
+export const editThetaAxisLabels = /* @__PURE__ */ makeEditLabels("theta");
+export const editRadialAxisLabels = /* @__PURE__ */ makeEditLabels("radius");

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

@@ -1,3 +1,4 @@
+import { editGraphicProperties } from "../../../primitives/graphicProperties.js";
 import { action } from "../../../../core/action.js";
 import {
   buildPolarCircleCommands,
@@ -23,8 +24,8 @@ import {
   withAxisSemantics
 } from "./shared.js";
 
-function lineGeometry(program, kind, angle, scale) {
-  const frame = resolvePolarFrameForProgram(program);
+function lineGeometry(program, kind, angle, scale, coordinate) {
+  const frame = resolvePolarFrameForProgram(program, coordinate);
   if (kind === "theta") {
     return { commands: buildPolarCircleCommands(frame, frame.availableRadius) };
   }
@@ -52,22 +53,21 @@ function makeEditLine(kind) {
     const config = { ...previous, ...args };
     validatePolarLineStyle(config, `${prefix(kind)} axis line`);
     const angle = resolveAngle(this, kind, {});
-    const geometry = lineGeometry(this, kind, angle, previous.scale);
+    const geometry = lineGeometry(
+      this,
+      kind,
+      angle,
+      previous.scale,
+      previous.coordinate
+    );
     let next = this._withGuideConfig(kind, "line", config);
     for (const [property, value] of Object.entries(geometry)) {
       next = next.editGraphics({ target: names.line, property, value });
     }
-    return next
-      .editGraphics({
-        target: names.line,
-        property: "stroke",
-        value: config.color
-      })
-      .editGraphics({
-        target: names.line,
-        property: "strokeWidth",
-        value: config.lineWidth
-      });
+    return editGraphicProperties(next, names.line, {
+      stroke: config.color,
+      strokeWidth: config.lineWidth
+    });
   });
 }
 
@@ -91,7 +91,7 @@ function makeCreateLine(kind) {
       lineWidth: args.lineWidth ?? POLAR_AXIS_DEFAULTS.line.lineWidth
     };
     validatePolarLineStyle(config, `${prefix(kind)} axis line`);
-    lineGeometry(this, kind, angle, resources.scale);
+    lineGeometry(this, kind, angle, resources.scale, resources.coordinate);
     let next = withAxisSemantics(this, kind, resources);
     if (kind === "radius" &&
         next.guideConfigs.axis?.radius?.layout === undefined) {
@@ -108,7 +108,7 @@ function makeCreateLine(kind) {
   });
 }
 
-export const createThetaAxisLine = makeCreateLine("theta");
-export const createRadialAxisLine = makeCreateLine("radius");
-export const editThetaAxisLine = makeEditLine("theta");
-export const editRadialAxisLine = makeEditLine("radius");
+export const createThetaAxisLine = /* @__PURE__ */ makeCreateLine("theta");
+export const createRadialAxisLine = /* @__PURE__ */ makeCreateLine("radius");
+export const editThetaAxisLine = /* @__PURE__ */ makeEditLine("theta");
+export const editRadialAxisLine = /* @__PURE__ */ makeEditLine("radius");

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

@@ -26,6 +26,22 @@ export const LABEL_EDIT_OPTIONS = Object.freeze([
   "count", "values", "offset", "format", "color", "fontSize",
   "fontFamily", "fontWeight"
 ]);
+const THETA_LABEL_CREATE_OPTIONS = Object.freeze([
+  ...LABEL_CREATE_OPTIONS,
+  "labelMap"
+]);
+const THETA_LABEL_EDIT_OPTIONS = Object.freeze([
+  ...LABEL_EDIT_OPTIONS,
+  "labelMap"
+]);
+
+export function labelCreateOptions(kind) {
+  return kind === "theta" ? THETA_LABEL_CREATE_OPTIONS : LABEL_CREATE_OPTIONS;
+}
+
+export function labelEditOptions(kind) {
+  return kind === "theta" ? THETA_LABEL_EDIT_OPTIONS : LABEL_EDIT_OPTIONS;
+}
 export const TITLE_CREATE_OPTIONS = Object.freeze([
   "scale", "coordinate", "angle", "text", "offset", "color", "fontSize",
   "fontFamily", "fontWeight", "position"

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

@@ -1,3 +1,4 @@
+import { editGraphicProperties } from "../../../primitives/graphicProperties.js";
 import { action } from "../../../../core/action.js";
 import { validateNonNegativeFinite } from "../../../../core/validation.js";
 import {
@@ -29,7 +30,7 @@ import {
 } from "./shared.js";
 
 function tickGeometry(program, kind, config, angle = resolveAngle(program, kind, {})) {
-  const frame = resolvePolarFrameForProgram(program);
+  const frame = resolvePolarFrameForProgram(program, config.coordinate);
   const mapped = mapPolarGuideValues(program, config);
   return {
     values: mapped.values,
@@ -112,17 +113,10 @@ function makeEditTicks(kind) {
         value: geometry[property]
       });
     }
-    return next
-      .editGraphics({
-        target: names.ticks,
-        property: "stroke",
-        value: config.color
-      })
-      .editGraphics({
-        target: names.ticks,
-        property: "strokeWidth",
-        value: config.lineWidth
-      });
+    return editGraphicProperties(next, names.ticks, {
+      stroke: config.color,
+      strokeWidth: config.lineWidth
+    });
   });
 }
 
@@ -159,7 +153,7 @@ function makeCreateTicks(kind) {
   });
 }
 
-export const createThetaAxisTicks = makeCreateTicks("theta");
-export const createRadialAxisTicks = makeCreateTicks("radius");
-export const editThetaAxisTicks = makeEditTicks("theta");
-export const editRadialAxisTicks = makeEditTicks("radius");
+export const createThetaAxisTicks = /* @__PURE__ */ makeCreateTicks("theta");
+export const createRadialAxisTicks = /* @__PURE__ */ makeCreateTicks("radius");
+export const editThetaAxisTicks = /* @__PURE__ */ makeEditTicks("theta");
+export const editRadialAxisTicks = /* @__PURE__ */ makeEditTicks("radius");

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

@@ -30,7 +30,7 @@ import {
 } from "./shared.js";
 
 function titleGeometry(program, kind, config, angle = resolveAngle(program, kind, {})) {
-  const frame = resolvePolarFrameForProgram(program);
+  const frame = resolvePolarFrameForProgram(program, config.coordinate);
   return kind === "theta"
     ? resolveThetaAxisTitle({ frame, offset: config.offset })
     : resolveRadialAxisTitle({
@@ -52,7 +52,7 @@ function validateTitleGeometry(program, kind, config, geometry, text) {
       fontFamily: config.fontFamily,
       fontWeight: config.fontWeight
     }]
-  });
+  }, program.materializationConfigs.textMetrics);
 }
 
 function resolveTitleConfig(kind, args, resources, previous) {
@@ -177,7 +177,7 @@ function makeCreateTitle(kind) {
   });
 }
 
-export const createThetaAxisTitle = makeCreateTitle("theta");
-export const createRadialAxisTitle = makeCreateTitle("radius");
-export const editThetaAxisTitle = makeEditTitle("theta");
-export const editRadialAxisTitle = makeEditTitle("radius");
+export const createThetaAxisTitle = /* @__PURE__ */ makeCreateTitle("theta");
+export const createRadialAxisTitle = /* @__PURE__ */ makeCreateTitle("radius");
+export const editThetaAxisTitle = /* @__PURE__ */ makeEditTitle("theta");
+export const editRadialAxisTitle = /* @__PURE__ */ makeEditTitle("radius");

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

@@ -1,3 +1,4 @@
+import { editGraphicProperties } from "../../primitives/graphicProperties.js";
 import { action } from "../../../core/action.js";
 import {
   noOptions,
@@ -103,7 +104,7 @@ function resolveConfig(program, kind, args, resources, previous) {
 }
 
 function resolveGeometry(program, kind, config) {
-  const frame = resolvePolarFrameForProgram(program);
+  const frame = resolvePolarFrameForProgram(program, config.coordinate);
   const mapped = mapPolarGuideValues(program, config);
   if (kind === "theta") {
     return { values: mapped.values, ...resolveThetaSpokes({
@@ -139,13 +140,10 @@ function editConcrete(program, kind, config, geometry) {
   for (const [property, value] of Object.entries(properties)) {
     next = next.editGraphics({ target: graphic, property, value });
   }
-  return next
-    .editGraphics({ target: graphic, property: "stroke", value: config.color })
-    .editGraphics({
-      target: graphic,
-      property: "strokeWidth",
-      value: config.lineWidth
-    })
+  return editGraphicProperties(next, graphic, {
+    stroke: config.color,
+    strokeWidth: config.lineWidth
+  })
     .editGraphics({
       target: graphic,
       property: "strokeDash",
@@ -239,12 +237,12 @@ function makeEdit(kind) {
   });
 }
 
-const createThetaGrid = makeCreate("theta");
-const createRadialGrid = makeCreate("radial");
-const editThetaGrid = makeEdit("theta");
-const editRadialGrid = makeEdit("radial");
-const rematerializeThetaGrid = makeRematerialize("theta");
-const rematerializeRadialGrid = makeRematerialize("radial");
+const createThetaGrid = /* @__PURE__ */ makeCreate("theta");
+const createRadialGrid = /* @__PURE__ */ makeCreate("radial");
+const editThetaGrid = /* @__PURE__ */ makeEdit("theta");
+const editRadialGrid = /* @__PURE__ */ makeEdit("radial");
+const rematerializeThetaGrid = /* @__PURE__ */ makeRematerialize("theta");
+const rematerializeRadialGrid = /* @__PURE__ */ makeRematerialize("radial");
 
 export function registerPolarGridActions(ProgramClass) {
   ProgramClass.prototype.createThetaGrid = createThetaGrid;

package/src/actions/guides/polar/resolve.js

@@ -5,7 +5,6 @@ import {
   validateNonNegativeFinite,
   validatePositiveFinite
 } from "../../../core/validation.js";
-import { resolvePolarFrame } from "../../../grammar/polar.js";
 import {
   formatTransformedTick,
   isTransformedScaleType,
@@ -13,7 +12,8 @@ import {
   mapOrdinalPositionValues
 } from "../../../grammar/scales/index.js";
 import { formatTimeTick, formatTimeTicks } from "../../../grammar/ticks.js";
-import { resolveGraphicBounds } from "../../../layout/canvas.js";
+import { resolveCoordinatePolarFrame } from
+  "../../../materialization/coordinateBounds.js";
 import { findCoordinate } from "../../../selectors/coordinates.js";
 import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
   "../../../theme/defaults.js";
@@ -23,6 +23,7 @@ import {
 } from "../../../grammar/schemas/graphicTree.js";
 import { valuesFromTickConfig } from "../tickValues.js";
 import { formatAxisValue, validateAxisFormat } from "../axes/policy.js";
+import { resolveDisplayLabel } from "../../../grammar/displayLabels.js";
 
 export const POLAR_AXIS_DEFAULTS = Object.freeze({
   angle: 90,
@@ -160,12 +161,8 @@ export function resolvePolarGuideResources(program, kind, args, operation) {
   });
 }
 
-export function resolvePolarFrameForProgram(program) {
-  const bounds = resolveGraphicBounds(program);
-  if (bounds === undefined) {
-    throw new Error("Polar guides require graphical Canvas bounds.");
-  }
-  return resolvePolarFrame(bounds);
+export function resolvePolarFrameForProgram(program, coordinate) {
+  return resolveCoordinatePolarFrame(program, coordinate);
 }
 
 export function resolvePolarTickValues(program, config) {
@@ -203,6 +200,13 @@ export function mapPolarGuideValues(program, config) {
 
 export function formatPolarGuideValues(program, config, values) {
   const scale = program.resolvedScales[config.scale];
+  if (["ordinal", "band", "point"].includes(scale.type)) {
+    return values.map(value => resolveDisplayLabel(
+      value,
+      config.labelMap,
+      String
+    ));
+  }
   if (scale.type === "time" && config.format === "auto") {
     return formatTimeTicks(values, scale.domain);
   }

package/src/actions/index.js

@@ -1,3 +1,4 @@
+import { registerTextMetricActions } from "./textMetrics/index.js";
 import { registerPrimitiveActions } from "./primitives/index.js";
 import { registerSelectionActions } from "./selection/index.js";
 import { registerDataActions } from "./data/index.js";
@@ -5,7 +6,8 @@ import { registerCategoryOrderActions } from "./categoryOrder/index.js";
 import { registerEncodingActions } from "./encodings/index.js";
 import { registerScaleActions } from "./scales/index.js";
 import { registerMarkActions } from "./marks/index.js";
-import { registerCoordinateActions } from "./coordinates/actions.js";
+import { registerBasicCoordinateActions } from "./coordinates/actions.js";
+import { registerCoordinateEditActions } from "./coordinates/edit.js";
 import { registerFacetActions } from "./facets/index.js";
 import { registerCompositionActions } from "./composition/index.js";
 import { registerTitleActions } from "./titles/index.js";
@@ -19,9 +21,17 @@ import { registerViolinPlotActions } from "./violinPlots/index.js";
 import { registerErrorBandActions } from "./errorBands/index.js";
 import { registerChartActions } from "./charts/index.js";
 import { registerThemeActions } from "./theme/index.js";
+import { registerResourceActions } from "./resources/index.js";
+import {
+  applyCompositionTheme,
+  removeCompositionTheme
+} from "./theme/composition.js";
 
 export function registerActions(ProgramClass) {
-  registerThemeActions(ProgramClass);
+  registerThemeActions(ProgramClass, {
+    apply: applyCompositionTheme,
+    remove: removeCompositionTheme
+  });
   registerPrimitiveActions(ProgramClass);
   registerCompositionActions(ProgramClass);
   registerFacetActions(ProgramClass);
@@ -30,7 +40,8 @@ export function registerActions(ProgramClass) {
   registerMarkActions(ProgramClass);
   registerScaleActions(ProgramClass);
   registerEncodingActions(ProgramClass);
-  registerCoordinateActions(ProgramClass);
+  registerBasicCoordinateActions(ProgramClass);
+  registerCoordinateEditActions(ProgramClass);
   registerGuideActions(ProgramClass);
   registerTitleActions(ProgramClass);
   registerRegressionActions(ProgramClass);
@@ -42,4 +53,6 @@ export function registerActions(ProgramClass) {
   registerChartActions(ProgramClass);
   registerCategoryOrderActions(ProgramClass);
   registerSelectionActions(ProgramClass);
+  registerResourceActions(ProgramClass);
+  registerTextMetricActions(ProgramClass);
 }