ggaction 0.0.17 → 0.0.19

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

@@ -1,28 +1,33 @@
+import{validateLegendClip,clippedSampleBounds}from"../../../grammar/legendClip.js";
+import{hasLegendClipGraphics}from"../../../materialization/legendClip.js";
+import { resolveDisplayLabel } from "../../../grammar/displayLabels.js";
+import { intrinsicLegendConfig, legendGroup } from "../../../materialization/legendGroups.js";
+import { formatVisibleText } from "../../../core/textMetrics.js";
 import { action, closedAction } from "../../../core/action.js";
 import {
-  validateNonEmptyString,
   validateKeys
 } from "../../../core/validation.js";
 import {
   formatDiscretizedIntervals,
   isDiscreteSizeScaleType,
+  isEnumeratedSizeScaleType,
   isSizeScaleType,
   mapSizeValues
 } from "../../../grammar/scales/index.js";
 import { resolveLegendItemLayout } from "../../../layout/legendItems.js";
-import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
+import { DEFAULT_COLORS } from
   "../../../theme/defaults.js";
 import { findLayer } from "../../../selectors/layers.js";
 import { resolveLegendGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
 import {
+  ITEM_LEGEND_LABELS as SIZE_LEGEND_LABELS,
+  ITEM_LEGEND_TITLE_STYLE as SIZE_LEGEND_TITLE_STYLE,
+  normalizeItemLegendConfig,
+  ITEM_LEGEND_OPTIONS as SIZE_OPTIONS,
   assertLegendBoundsInsideCanvas,
   materializeItemLegend,
   createItemLegendGraphics,
-  normalizeItemLegendLayout,
-  normalizeLegendBorder,
-  normalizeLegendTextOptions,
-  normalizeLegendTitleOptions,
   resolveContinuousBounds,
   resolveLegendBackgroundFromBounds,
   formatContinuousValues,
@@ -35,23 +40,11 @@ import {
   resolveLegendSampleValues
 } from "./sampling.js";
 import { resolveEffectiveLegendBlockConfig } from "./blocks.js";
+import { normalizeLegendOverflow } from "./categorical/options.js";
 
-const SIZE_OPTIONS = Object.freeze(["target", "count", "values", "position", "layout", "align",
-  "direction", "columns", "titlePosition", "offset", "itemGap", "title", "labels", "titleStyle", "border"]);
 
-export const SIZE_LEGEND_LABELS = Object.freeze({
-  offset: 12,
-  color: DEFAULT_COLORS.text,
-  fontSize: 12,
-  fontFamily: DEFAULT_FONT_FAMILY,
-  fontWeight: "normal"
-});
-export const SIZE_LEGEND_TITLE_STYLE = Object.freeze({
-  color: DEFAULT_COLORS.strongText,
-  fontSize: 13,
-  fontFamily: DEFAULT_FONT_FAMILY,
-  fontWeight: 600
-});
+
+export { SIZE_LEGEND_LABELS, SIZE_LEGEND_TITLE_STYLE };
 
 export function isSizeLegendPoint(layer) {
   return layer?.mark?.type === "point" &&
@@ -79,6 +72,8 @@ function requireScale(program, id) {
 }
 
 export function resolveSizeLegendLayout(program, config) {
+  validateLegendClip("size",config);
+  config = intrinsicLegendConfig(program, config);
   const scale = requireScale(program, config.scale);
   const categorical = [
     program.guideConfigs.legend?.series,
@@ -96,23 +91,38 @@ export function resolveSizeLegendLayout(program, config) {
   });
   const labels = effective.labels;
   const titleStyle = effective.titleStyle;
-  const position = categorical?.position ?? config.position;
-  if (categorical?.layout === "legacy-bottom") {
+  // Group ownership replaces placement inheritance, never shared typography.
+  const placementCategorical = config.blockLocalPosition === undefined && legendGroup(program, config.target) === undefined &&
+    (config.inheritPosition !== false || categorical?.position === config.position)
+    ? categorical : undefined;
+  const position = placementCategorical?.position ?? config.position;
+  if (placementCategorical?.layout === "legacy-bottom") {
     throw new Error('Combined size legends require layout "edge".');
   }
-  const horizontal = categorical !== undefined && ["top", "bottom"].includes(position);
+  const horizontal = placementCategorical !== undefined && ["top", "bottom"].includes(position);
   const geometry = horizontal ? {
     position, align: categorical.align, direction: categorical.direction,
     columns: categorical.columns, titlePosition: categorical.titlePosition,
     offset: categorical.offset, itemGap: effective.blockGap ?? categorical.itemGap
   } : { position };
+  const ordinalSize = scale.type === "ordinal";
+  if (ordinalSize && config.labels.format !== undefined && config.labels.format !== "auto") {
+    throw new Error("Categorical size legends retain original category labels.");
+  }
   const discrete = isDiscreteSizeScaleType(scale.type);
-  if (discrete && readLegendSampling(config).mode === "values") {
+  if ((discrete || ordinalSize) && readLegendSampling(config).mode === "values") {
     throw new Error("Discrete size legends do not support exact values.");
   }
-  const values = discrete
+  const allValues = discrete
     ? undefined
-    : resolveLegendSampleValues(effective, scale, "Size legend");
+    : ordinalSize ? scale.domain : resolveLegendSampleValues(effective, scale, "Size legend");
+  const hiddenCount = ordinalSize && effective.overflow &&
+    allValues.length > effective.overflow.maxItems
+    ? allValues.length - effective.overflow.maxItems
+    : 0;
+  const values = hiddenCount > 0
+    ? allValues.slice(0, effective.overflow.maxItems)
+    : allValues;
   const areas = discrete
     ? scale.range
     : mapSizeValues(values, scale);
@@ -120,38 +130,46 @@ export function resolveSizeLegendLayout(program, config) {
   const radius = Math.max(...radii);
   const width = Math.max(32, radius * 2);
   const { plot, canvas } = resolveContinuousBounds(program);
-  const text = discrete
+  const itemText = discrete
     ? formatDiscretizedIntervals(scale.thresholds, config.labels.format)
-    : formatContinuousValues(
+    : ordinalSize ? values.map(formatVisibleText) : formatContinuousValues(
         values,
         scale.domain,
         "quantitative",
         config.labels.format
       );
+  const mappedText = !discrete && !ordinalSize && effective.labelMap !== undefined
+    ? itemText.map((label, index) => resolveDisplayLabel(values[index], effective.labelMap, () => label))
+    : itemText;
+  const text = hiddenCount > 0 ? [...mappedText, `…${hiddenCount} entries`] : mappedText;
   const symbolStroke = effective.blockSymbol?.strokeWidth ?? 0;
   const symbolExtent = symbolStroke / 2;
   const sampleWidth = width + symbolStroke;
   const layout = resolveLegendItemLayout(plot, { ...effective, ...geometry, labels, titleStyle }, text, {
-    width: sampleWidth, height: radius * 2 + symbolStroke,
-    itemBounds: radii.map(r => ({
+    width: sampleWidth, height: Math.min(radius * 2 + symbolStroke, effective.clipHeight??Infinity),
+    itemBounds: radii.map(r => clippedSampleBounds({
       left: sampleWidth / 2 - r - symbolExtent,
       right: sampleWidth / 2 + r + symbolExtent,
       top: -r - symbolExtent,
       bottom: r + symbolExtent
-    }))
+    },effective.clipHeight))
   }, undefined, program.materializationConfigs.textMetrics);
   assertLegendBoundsInsideCanvas(layout.bounds, canvas, "Size legend layout", { ...effective, ...geometry });
   const background = resolveLegendBackgroundFromBounds(layout.bounds, effective.border, canvas, "Size legend", { ...effective, ...geometry });
-  return { ...layout, symbolX: layout.symbolX.map(x => x + sampleWidth / 2), radii, text,
-    labels, titleStyle, background, config: effective };
+  return { ...layout, symbolX: layout.symbolX.slice(0, radii.length).map(x => x + sampleWidth / 2),
+    symbolY: layout.itemY.slice(0, radii.length), radii, text,
+    ...(effective.labelMap === undefined ? {} : {
+      labelItemIndices: text.flatMap((label, index) => label === "" ? [] : [index])
+    }), labels, titleStyle, background, config: effective };
 }
 
 export const rematerializeSizeLegend = /* @__PURE__ */ closedAction(
   {
     op: "rematerializeSizeLegend",
-    description: "Rematerialize a quantitative point-size legend."
+    description: "Rematerialize a point-size legend."
   }, [],
   function (args = {}) {
+    if(hasLegendClipGraphics(this))return this.rematerializeLegend();
     const config = this.guideConfigs.legend?.size;
     if (config === undefined) throw new Error("Size legend requires stored configuration.");
     const layer = findLayer(this, config.target);
@@ -171,13 +189,14 @@ export const rematerializeSizeLegend = /* @__PURE__ */ closedAction(
     return materializeItemLegend(this, "size", currentConfig, layout, {
       text: layout.text, labels: layout.labels, titleStyle: layout.titleStyle,
       symbols: {
-        x: layout.symbolX, y: layout.itemY, radius: layout.radii,
+        x: layout.symbolX, y: layout.symbolY, radius: layout.radii,
         fill: layout.config.blockSymbol?.fill ?? DEFAULT_COLORS.sizeSymbol,
         opacity: layout.config.blockSymbol?.opacity ?? 0.7
       },
       optional: {
         stroke: layout.config.blockSymbol?.stroke,
-        strokeWidth: layout.config.blockSymbol?.strokeWidth
+        strokeWidth: layout.config.blockSymbol?.strokeWidth ??
+          (layout.config.blockSymbol?.stroke === undefined ? undefined : 0)
       }
     });
   }
@@ -186,14 +205,16 @@ export const rematerializeSizeLegend = /* @__PURE__ */ closedAction(
 
 export function resolveSizeLegendConfig(program, args = {}) {
   validateKeys(args, [...SIZE_OPTIONS, "inheritAppearance"], "createSizeLegend");
-  if (args.title !== undefined) validateNonEmptyString(args.title, "Legend title");
   const layer = resolveSizeLegendPoint(program, args.target);
   const encoding = layer.encoding?.size;
   if (encoding?.scale === undefined) {
     throw new Error(`Point mark "${layer.id}" requires a size encoding.`);
   }
   const scale = requireScale(program, encoding.scale);
-  const discrete = isDiscreteSizeScaleType(scale.type);
+  const discrete = isEnumeratedSizeScaleType(scale.type);
+  if (args.overflow !== undefined && scale.type !== "ordinal") {
+    throw new Error("Size legend overflow requires an ordinal scale.");
+  }
   if (discrete && (Object.hasOwn(args, "count") || Object.hasOwn(args, "values"))) {
     throw new Error("Discrete size legends do not support count or exact values.");
   }
@@ -201,20 +222,17 @@ export function resolveSizeLegendConfig(program, args = {}) {
     operation: "create",
     label: "Size legend"
   });
-  const count = discrete ? scale.range.length : undefined;
+  const count = discrete ? (scale.type === "ordinal" ? scale.domain.length : scale.range.length) : undefined;
   return {
     target: layer.id,
     scale: encoding.scale,
-    ...normalizeItemLegendLayout({ ...args, itemGap: args.itemGap ?? 40 }),
-    title: args.title ?? encoding.field,
-    inferredTitle: args.title === undefined,
+    ...normalizeItemLegendConfig(args, encoding, 40),
+    ...(args.overflow === undefined ? {} : { overflow: normalizeLegendOverflow(args.overflow) }),
     domain: scale.domain,
     ...(discrete ? { count } : { sampling }),
     inheritAppearance: args.inheritAppearance === true,
-    labels: normalizeLegendTextOptions(args.labels, "createLegend.labels", SIZE_LEGEND_LABELS),
-    titleStyle: normalizeLegendTitleOptions(args.titleStyle, "createLegend.titleStyle", SIZE_LEGEND_TITLE_STYLE),
-    border: normalizeLegendBorder(args.border),
-    titleVisible: true
+    inheritPosition: args.position === undefined,
+
   };
 }
 

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

@@ -1,6 +1,7 @@
+import {validateLegendClip} from "../../../grammar/legendClip.js";
+import { intrinsicLegendConfig } from "../../../materialization/legendGroups.js";
 import { action, closedAction } from "../../../core/action.js";
 import {
-  validateNonEmptyString,
   validateKeys
 } from "../../../core/validation.js";
 import { mapContinuousScaleValues } from "../../../grammar/scales/index.js";
@@ -8,16 +9,16 @@ import { resolveLegendItemLayout } from "../../../layout/legendItems.js";
 import { resolveLegendGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
 import { findLayer } from "../../../selectors/layers.js";
-import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
+import { DEFAULT_COLORS } from
   "../../../theme/defaults.js";
 import {
+  ITEM_LEGEND_LABELS as STROKE_WIDTH_LEGEND_LABELS,
+  ITEM_LEGEND_TITLE_STYLE as STROKE_WIDTH_LEGEND_TITLE_STYLE,
+  normalizeItemLegendConfig,
+  ITEM_LEGEND_OPTIONS as OPTIONS,
   assertLegendBoundsInsideCanvas,
   materializeItemLegend,
   createItemLegendGraphics,
-  normalizeItemLegendLayout,
-  normalizeLegendBorder,
-  normalizeLegendTextOptions,
-  normalizeLegendTitleOptions,
   resolveContinuousBounds,
   resolveLegendBackgroundFromBounds,
   formatContinuousValues,
@@ -29,29 +30,16 @@ import {
 } from "./sampling.js";
 import { resolveEffectiveLegendBlockConfig } from "./blocks.js";
 
-const OPTIONS = Object.freeze(["target", "count", "values", "position", "layout", "align",
-  "direction", "columns", "titlePosition", "offset", "itemGap", "title", "labels", "titleStyle", "border"]);
 
-export const STROKE_WIDTH_LEGEND_LABELS = Object.freeze({
-  offset: 12,
-  color: DEFAULT_COLORS.text,
-  fontSize: 12,
-  fontFamily: DEFAULT_FONT_FAMILY,
-  fontWeight: "normal"
-});
 
-export const STROKE_WIDTH_LEGEND_TITLE_STYLE = Object.freeze({
-  color: DEFAULT_COLORS.strongText,
-  fontSize: 13,
-  fontFamily: DEFAULT_FONT_FAMILY,
-  fontWeight: 600
-});
+export { STROKE_WIDTH_LEGEND_LABELS, STROKE_WIDTH_LEGEND_TITLE_STYLE };
 
 export function isStrokeWidthLegendLayer(layer) {
   return ["line", "rule"].includes(layer?.mark?.type) &&
     layer.encoding?.strokeWidth?.scale !== undefined;
 }
 
+
 function resolveLayer(program, requested) {
   const layer = selectLegendLayer(
     program,
@@ -77,6 +65,8 @@ function requireScale(program, id) {
 }
 
 export function resolveStrokeWidthLegendLayout(program, config) {
+  validateLegendClip("strokeWidth", config);
+  config = intrinsicLegendConfig(program, config);
   const effective = resolveEffectiveLegendBlockConfig(program, "strokeWidth", config);
   const scale = requireScale(program, config.scale);
   const { plot, canvas } = resolveContinuousBounds(program);
@@ -134,7 +124,6 @@ export const rematerializeStrokeWidthLegend = /* @__PURE__ */ closedAction(
 
 export function resolveStrokeWidthLegendConfig(program, args = {}) {
   validateKeys(args, OPTIONS, "createStrokeWidthLegend");
-  if (args.title !== undefined) validateNonEmptyString(args.title, "Legend title");
   const layer = resolveLayer(program, args.target);
   const encoding = layer.encoding.strokeWidth;
   requireScale(program, encoding.scale);
@@ -145,14 +134,9 @@ export function resolveStrokeWidthLegendConfig(program, args = {}) {
   return {
     target: layer.id,
     scale: encoding.scale,
-    ...normalizeItemLegendLayout({ ...args, itemGap: args.itemGap ?? 32 }),
-    title: args.title ?? encoding.field,
-    inferredTitle: args.title === undefined,
+    ...normalizeItemLegendConfig(args, encoding, 32),
     sampling,
-    labels: normalizeLegendTextOptions(args.labels, "createLegend.labels", STROKE_WIDTH_LEGEND_LABELS),
-    titleStyle: normalizeLegendTitleOptions(args.titleStyle, "createLegend.titleStyle", STROKE_WIDTH_LEGEND_TITLE_STYLE),
-    border: normalizeLegendBorder(args.border),
-    titleVisible: true
+
   };
 }
 

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

@@ -3,18 +3,8 @@ import {
   LEGEND_CHANNELS,
   LEGEND_CONFIG_KINDS
 } from "../../../core/vocabulary.js";
-import { isDiscreteSizeScaleType } from "../../../grammar/scales/index.js";
-
-export function validateLegendChannels(channels, operation) {
-  if (!Array.isArray(channels)) throw new TypeError(`${operation} channels must be an array.`);
-  if (channels.length === 0) throw new Error(`${operation} channels must select at least one channel.`);
-  const seen = new Set();
-  for (const channel of channels) {
-    if (!LEGEND_CHANNELS.includes(channel)) throw new Error(`Unsupported legend channel "${channel}".`);
-    if (seen.has(channel)) throw new Error(`${operation} channels contains duplicate "${channel}".`);
-    seen.add(channel);
-  }
-}
+import { validateLegendChannels, describeLegendBlock } from "../../../grammar/legendBlocks.js";
+export { validateLegendChannels, describeLegendBlock, legendBlockKey, legendBlockChannels } from "../../../grammar/legendBlocks.js";
 
 export function legendTargets(program) {
   return [...new Set(Object.values(program.guideConfigs.legend ?? {})
@@ -40,73 +30,6 @@ export function resolveLegendTarget(program, requested, operation) {
   return targets[0];
 }
 
-const CATEGORICAL_KINDS = Object.freeze(["series", "color", "stroke"]);
-const SINGLE_CHANNELS = Object.freeze({
-  size: "size",
-  opacity: "opacity",
-  strokeWidth: "strokeWidth",
-  gradient: "color",
-  interval: "color",
-  strokeGradient: "stroke",
-  strokeInterval: "stroke"
-});
-
-const asciiCompare = (left, right) => left < right ? -1 : left > right ? 1 : 0;
-
-export function legendBlockChannels(kind, config) {
-  const channels = CATEGORICAL_KINDS.includes(kind)
-    ? config?.channels
-    : SINGLE_CHANNELS[kind] === undefined
-      ? undefined
-      : [SINGLE_CHANNELS[kind]];
-  if (!Array.isArray(channels) || channels.length === 0) {
-    throw new Error(`Legend block ${kind} requires at least one channel.`);
-  }
-  validateLegendChannels(channels, `Legend block ${kind}`);
-  return Object.freeze([...channels].sort(asciiCompare));
-}
-
-export function legendBlockKey(channels) {
-  if (!Array.isArray(channels) || channels.length === 0) {
-    throw new TypeError("Legend block key requires a non-empty channel array.");
-  }
-  return JSON.stringify([...channels].sort(asciiCompare));
-}
-
-export function describeLegendBlock(program, kind, config) {
-  if (!LEGEND_CONFIG_KINDS.includes(kind)) {
-    throw new Error(`Unknown legend block kind "${kind}".`);
-  }
-  const channels = legendBlockChannels(kind, config);
-  const scaleIds = CATEGORICAL_KINDS.includes(kind)
-    ? config?.scales
-    : [config?.scale];
-  if (!Array.isArray(scaleIds) || scaleIds.length === 0 ||
-    scaleIds.some(id => typeof id !== "string" || program.resolvedScales[id] === undefined)) {
-    throw new Error(`Legend block ${kind} requires resolved scales.`);
-  }
-  const family = CATEGORICAL_KINDS.includes(kind)
-    ? "categorical"
-    : kind === "size"
-      ? isDiscreteSizeScaleType(program.resolvedScales[scaleIds[0]].type)
-        ? "discrete-size"
-        : "sampled"
-      : ["opacity", "strokeWidth"].includes(kind)
-        ? "sampled"
-        : ["gradient", "strokeGradient"].includes(kind)
-          ? "gradient"
-          : "interval";
-  return Object.freeze({
-    target: config.target,
-    kind,
-    family,
-    key: legendBlockKey(channels),
-    channels,
-    scaleIds: Object.freeze([...scaleIds]),
-    config
-  });
-}
-
 export function legendBlockDescriptors(program, target) {
   const requested = validateUserId(target, "Legend target id");
   const descriptors = LEGEND_CONFIG_KINDS.flatMap(kind => {

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

@@ -1,3 +1,5 @@
+import { legendResourcePolicy } from "../../../materialization/guides/resources.js";
+import { isContinuousColorScaleType } from "../../../grammar/scales/types.js";
 import { isDiscretizedColorScaleType } from "../../../grammar/scales/types.js";
 import { normalizeContinuousLegend } from "./continuous/common.js";
 import { DEFAULT_GRADIENT_SIZE } from "./continuous/gradient.js";
@@ -8,8 +10,9 @@ import {
   resolveLegendBlock
 } from "./target.js";
 import { validateLegendBlockOverride } from "./blocks.js";
+import { DEFAULT_VERTICAL_LEGEND_ITEM_GAP } from "../../../theme/defaults.js";
 
-const family = (channel, type) => type === "sequential"
+const family = (channel, type) => isContinuousColorScaleType(type)
   ? channel === "stroke" ? "strokeGradient" : "gradient"
   : isDiscretizedColorScaleType(type)
     ? channel === "stroke" ? "strokeInterval" : "interval"
@@ -21,7 +24,7 @@ const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
 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 itemGap = side ? DEFAULT_VERTICAL_LEGEND_ITEM_GAP : stored.position === "top" ? 24 : 20;
   const order = program.semanticSpec.guides.legend?.[kind]?.order;
   return stored.inferredSymbol !== true ||
     stored.direction !== direction ||
@@ -40,7 +43,9 @@ function planChannelLegendTransition(program, scale, nextType, channel) {
   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 storedOverride = stored.blockOverrides?.[oldDescriptor.key];
+  const { symbol: _sampleSymbol, labelMap: _sampleMap, gap: _sampleGap, ...commonOverride } = storedOverride ?? {};
+  const blockOverride = stored.representation === "symbols" && storedOverride !== undefined ? commonOverride : storedOverride;
   const side = ["left", "right"].includes(stored.position);
   const categorical = ["color", "stroke"].includes(from);
   const gradientFamily = from.toLowerCase().endsWith("gradient");
@@ -49,10 +54,11 @@ function planChannelLegendTransition(program, scale, nextType, channel) {
   const comparableSymbol = channel === "stroke" && stored.inferredStrokeWidth === true
     ? { ...stored.symbol, strokeWidth: defaults.symbol?.strokeWidth }
     : stored.symbol;
-  const custom = categorical
+  const sampledColor = from === "gradient" && stored.representation === "symbols";
+  const custom = sampledColor ? false : categorical
     ? categoricalFamilyCustom(program, from, stored)
     : gradientFamily
-    ? stored.count !== defaults.count || !same(stored.gradient, DEFAULT_GRADIENT_SIZE) || stored.itemGap !== defaults.itemGap
+    ? stored.gradientDirection !== undefined || stored.count !== defaults.count || !same({ ...stored.gradient, opacity: stored.gradient?.opacity ?? 1 }, { ...DEFAULT_GRADIENT_SIZE, opacity: 1 }) || 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) {
@@ -70,7 +76,7 @@ function planChannelLegendTransition(program, scale, nextType, channel) {
   const args = {
     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,
+    align: stored.align, offset: stored.offset, titlePosition: sampledColor ? "top" : stored.titlePosition,
     ...(stored.inferredTitle ? {} : { title: stored.title })
   };
   try {
@@ -83,7 +89,7 @@ function planChannelLegendTransition(program, scale, nextType, channel) {
   } catch (error) {
     throw new Error(`${channel} legend transition has incompatible layout or style: ${error.message}`);
   }
-  return { args, channel, titleVisible: stored.titleVisible !== false, blockOverride };
+  return { args, channel, titleVisible: stored.titleVisible !== false, inferredOffset: stored.inferredOffset, blockOverride };
 }
 
 export function planColorLegendTransitions(program, scale, nextType) {
@@ -95,6 +101,11 @@ export function planColorLegendTransitions(program, scale, nextType) {
 
 export function applyColorLegendTransition(program, plan) {
   let next = program.createLegend(plan.args);
+  for (const [kind, config] of Object.entries(next.guideConfigs.legend ?? {})) {
+    if (config.target === plan.args.target && legendResourcePolicy(kind).semanticKind === plan.channel) {
+      next = next._withLegendConfig(kind, { ...config, inferredOffset: plan.inferredOffset === true });
+    }
+  }
   if (!plan.titleVisible) {
     next = next.editLegend({ target: plan.args.target, title: false });
   }
@@ -150,7 +161,7 @@ function withoutBlockOverrides(config) {
   return rest;
 }
 
-export function planLegendBlockTransitions(program, target, plans) {
+export function planLegendBlockTransitions(program, target, plans, position) {
   const oldDescriptors = legendBlockDescriptors(program, target);
   const nextDescriptors = plans.map(plan =>
     describeLegendBlock(program, plan.kind, plan.config));
@@ -158,19 +169,41 @@ export function planLegendBlockTransitions(program, target, plans) {
     const descriptor = nextDescriptors[index];
     const incoming = oldDescriptors.filter(old => intersects(old, descriptor));
     let override;
-    if (incoming.length === 1 && incoming[0].key === descriptor.key) {
+    if (["size-shape","color-size"].includes(descriptor.config.combine) && incoming.length > 1) {
+      const positions = incoming.map(old=>old.config.blockOverrides?.[old.key]?.position);
+      if (position === undefined && !positions.every(value=>value===positions[0])) transitionError(target, incoming, descriptor, "position");
+      override = position === undefined && positions[0] !== undefined ? {position: positions[0]} : undefined;
+    } else if (incoming.length === 1 && incoming[0].key === descriptor.key) {
       override = incoming[0].config.blockOverrides?.[incoming[0].key];
+      if (incoming[0].config.representation === "symbols" && descriptor.kind === "gradient" && descriptor.config.representation !== "symbols" && override !== undefined) {
+        const { symbol: _symbol, labelMap: _labelMap, ...common } = override; override = common;
+      }
     } else if (incoming.length === 1) {
       const old = incoming[0];
       override = old.config.blockOverrides?.[old.key];
+      if (["size-shape","color-size"].includes(incoming[0].config.combine) && override !== undefined) {
+        const {title: _title, ...rest} = override; override = Object.keys(rest).length ? rest : undefined;
+      }
+      if(old.config.combine==='color-size'&&descriptor.kind==='gradient'&&override!==undefined){
+        const {symbol:_symbol,labelMap:_map,gap:_gap,...common}=override;override=Object.keys(common).length?common:undefined;
+      }
+      if(old.config.combine==='color-size'&&descriptor.kind==='size'){
+        const {type:_type,...style}=old.config.symbol;
+        override={...override,symbol:{...style,...override?.symbol}};
+      }
       if (override?.title !== undefined) {
         transitionError(target, incoming, descriptor, "title");
       }
-      if (override?.labelMap !== undefined) {
+      if (override?.labelMap !== undefined && !(old.config.combine==='color-size'&&descriptor.kind==='size')) {
         transitionError(target, incoming, descriptor, "labelMap");
       }
     } else if (incoming.length > 1) {
-      const overrides = incoming.map(old => old.config.blockOverrides?.[old.key]);
+      const overrides = incoming.map(old => {
+        const override = old.config.blockOverrides?.[old.key];
+        if (position === undefined || override === undefined) return override;
+        const {position: _local, ...rest} = override;
+        return Object.keys(rest).length ? rest : undefined;
+      });
       if (!overrides.every(value => sameBlockValue(value, overrides[0]))) {
         transitionError(target, incoming, descriptor, "block override");
       }

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

@@ -1,3 +1,4 @@
+import { axisThemeTypography } from "../../../theme/state.js";
 import { action } from "../../../../core/action.js";
 import { validateNonNegativeFinite } from "../../../../core/validation.js";
 import {
@@ -99,6 +100,7 @@ function resolveLabelConfig(program, kind, args, resources, previous) {
   } else {
     mode = normalizePolarTickMode(program, resources.scale, {}, count);
   }
+  const typography = axisThemeTypography(program.materializationConfigs.theme, "labels");
   const config = {
     ...(previous ?? {}),
     scale: resources.scale,
@@ -110,9 +112,9 @@ function resolveLabelConfig(program, kind, args, resources, previous) {
     format: args.format ?? previous?.format ??
       POLAR_AXIS_DEFAULTS.labels.format,
     color: args.color ?? previous?.color ?? POLAR_AXIS_DEFAULTS.labels.color,
-    fontSize: args.fontSize ?? previous?.fontSize ??
+    fontSize: args.fontSize ?? previous?.fontSize ?? typography.fontSize ??
       POLAR_AXIS_DEFAULTS.labels.fontSize,
-    fontFamily: args.fontFamily ?? previous?.fontFamily ??
+    fontFamily: args.fontFamily ?? previous?.fontFamily ?? typography.fontFamily ??
       POLAR_AXIS_DEFAULTS.labels.fontFamily,
     fontWeight: args.fontWeight ?? previous?.fontWeight ??
       POLAR_AXIS_DEFAULTS.labels.fontWeight

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

@@ -1,3 +1,4 @@
+import { axisThemeTypography } from "../../../theme/state.js";
 import { action } from "../../../../core/action.js";
 import {
   validateNonEmptyString,
@@ -55,7 +56,8 @@ function validateTitleGeometry(program, kind, config, geometry, text) {
   }, program.materializationConfigs.textMetrics);
 }
 
-function resolveTitleConfig(kind, args, resources, previous) {
+function resolveTitleConfig(program, kind, args, resources, previous) {
+  const typography = axisThemeTypography(program.materializationConfigs.theme, "title");
   const config = {
     ...(previous ?? {}),
     scale: resources.scale,
@@ -65,9 +67,9 @@ function resolveTitleConfig(kind, args, resources, previous) {
       ? POLAR_AXIS_DEFAULTS.title.thetaOffset
       : POLAR_AXIS_DEFAULTS.title.radiusOffset),
     color: args.color ?? previous?.color ?? POLAR_AXIS_DEFAULTS.title.color,
-    fontSize: args.fontSize ?? previous?.fontSize ??
+    fontSize: args.fontSize ?? previous?.fontSize ?? typography.fontSize ??
       POLAR_AXIS_DEFAULTS.title.fontSize,
-    fontFamily: args.fontFamily ?? previous?.fontFamily ??
+    fontFamily: args.fontFamily ?? previous?.fontFamily ?? typography.fontFamily ??
       POLAR_AXIS_DEFAULTS.title.fontFamily,
     fontWeight: args.fontWeight ?? previous?.fontWeight ??
       POLAR_AXIS_DEFAULTS.title.fontWeight
@@ -106,7 +108,7 @@ function makeEditTitle(kind) {
       scale: previous.scale,
       coordinate: previous.coordinate
     };
-    const config = resolveTitleConfig(kind, args, resources, previous);
+    const config = resolveTitleConfig(this, kind, args, resources, previous);
     const text = Object.hasOwn(args, "text")
       ? validateNonEmptyString(args.text, "Polar axis title text")
       : config.inferredText
@@ -150,7 +152,7 @@ function makeCreateTitle(kind) {
     }
     const resources = componentResources(this, kind, args, operation.create);
     const angle = resolveAngle(this, kind, args);
-    const config = resolveTitleConfig(kind, args, resources);
+    const config = resolveTitleConfig(this, kind, args, resources);
     const text = validateNonEmptyString(
       args.text ?? inferAxisTitleText(this, names.channel, resources.scale),
       "Polar axis title text"