ggaction 0.0.13 → 0.0.15

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

@@ -49,8 +49,13 @@ export function resolveCategoricalLegendRevision(program, kind, previous, channe
   const config = {
     ...previous,
     ...definition,
-    symbol: normalizeRecipe(resolveLegendSymbol(program, layer, channels,
-      previous.inferredSymbol ? undefined : previous.symbol), definition.kind)
+    symbol: normalizeRecipe(resolveLegendSymbol(
+      program,
+      layer,
+      channels,
+      previous.inferredSymbol ? undefined : previous.symbol,
+      definition.kind
+    ), definition.kind, { internal: previous.inferredSymbol })
   };
   if (validateLayout) resolveLayout(program, config);
   return { kind, config, order };
@@ -76,11 +81,11 @@ export function createCategoricalLegendFromConfig(program, config, order) {
   } else {
     next = next
       .editSemantic({
-        property: "guide.legend.color.scale",
+        property: `guide.legend.${kind}.scale`,
         value: config.scales[0]
       })
       .editSemantic({
-        property: "guide.legend.color.title",
+        property: `guide.legend.${kind}.title`,
         value: config.title
       });
   }
@@ -91,9 +96,15 @@ export function createCategoricalLegendFromConfig(program, config, order) {
     });
   }
   next = next._withLegendConfig(kind, config);
-  if (config.border !== false) next = next.createLegendBackground();
-  next = next.createLegendSymbols().createLegendLabels();
-  return config.titleVisible === false ? next : next.createLegendTitle();
+  if (config.border !== false) {
+    next = next.createLegendBackground({ kind });
+  }
+  next = next
+    .createLegendSymbols({ kind })
+    .createLegendLabels({ kind });
+  return config.titleVisible === false
+    ? next
+    : next.createLegendTitle({ kind });
 }
 
 // Categorical content precedes its sampled companions in both creation and revision.
@@ -125,7 +136,7 @@ export function reconcileCategoricalSymbols(program, previous, config) {
   for (const layer of config.symbol.layers) {
     if (next.graphicSpec.objects[symbolGraphic(config, layer.type)] === undefined) {
       const suffix = { line: "Lines", point: "Points", swatch: "Swatches" }[layer.type];
-      next = next[`createLegendSymbol${suffix}`]();
+      next = next[`createLegendSymbol${suffix}`]({ kind: config.kind });
     }
   }
   return next;

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

@@ -6,17 +6,20 @@ import {
   createCategoricalLegendFromConfig
 } from "./lifecycle.js";
 import { resolveLegendTarget, validateLegendChannels } from "./target.js";
+import { planLegendBlockTransitions } from "./transition.js";
 
 export { removeLegendKinds } from "./lifecycle.js";
 
 const OPTIONS = Object.freeze(["target", "channels"]);
 
 function legendKindChannels(kind, config) {
-  if (["series", "color"].includes(kind)) return config.channels;
+  if (["series", "color", "stroke"].includes(kind)) return config.channels;
   return {
     size: ["size"],
     gradient: ["color"],
     interval: ["color"],
+    strokeGradient: ["stroke"],
+    strokeInterval: ["stroke"],
     opacity: ["opacity"],
     strokeWidth: ["strokeWidth"]
   }[kind];
@@ -46,8 +49,13 @@ function resolveRequestedRemoval(program, target, channels) {
   // Remove departing sibling configs from the immutable layout preflight view.
   const view = kinds.reduce((next, kind) =>
     next._withoutMaterializationConfig(["guides", "legend", kind]), program);
-  const revision = partial === undefined ? undefined
+  const resolved = partial === undefined ? undefined
     : resolveCategoricalLegendRevision(view, partial.kind, partial.config, partial.channels);
+  const revision = resolved === undefined ? undefined : planLegendBlockTransitions(
+    program,
+    target,
+    [{ ...resolved, kind: resolved.config.kind }]
+  )[0];
   return { kinds, revision };
 }
 
@@ -81,7 +89,9 @@ export const removeLegend = action(
         : next.rematerializeLegend();
     }
     const remainingTargetKinds = targetKinds.filter(kind => !kinds.includes(kind));
-    const removedCategorical = kinds.some(kind => ["series", "color"].includes(kind));
+    const removedCategorical = kinds.some(kind =>
+      ["series", "color", "stroke"].includes(kind)
+    );
     if (
       removedCategorical && revision === undefined &&
       remainingTargetKinds.includes("size") &&

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

@@ -0,0 +1,140 @@
+import { sampleNumericRange } from "../../../grammar/numeric.js";
+import {
+  validateGeneratedItemLimit
+} from "../../../core/validation.js";
+
+const DEFAULT_COUNT = 5;
+const MAX_EXACT_VALUES = 100;
+
+function validateCount(value, label) {
+  if (!Number.isInteger(value) || value < 2) {
+    throw new RangeError(`${label} count must be an integer of at least 2.`);
+  }
+  validateGeneratedItemLimit(value, `${label} count`);
+  return value;
+}
+
+function normalizeExactValues(value, label) {
+  if (!Array.isArray(value)) {
+    throw new TypeError(`${label} values must be an array or "auto".`);
+  }
+  if (value.length === 0 || value.length > MAX_EXACT_VALUES) {
+    throw new RangeError(
+      `${label} values must contain between 1 and ${MAX_EXACT_VALUES} values.`
+    );
+  }
+  const values = [...value];
+  for (let index = 0; index < values.length; index += 1) {
+    if (!Number.isFinite(values[index])) {
+      throw new TypeError(`${label} values must contain only finite numbers.`);
+    }
+    if (index > 0 && !(values[index] > values[index - 1])) {
+      throw new RangeError(
+        `${label} values must be unique and strictly increasing.`
+      );
+    }
+  }
+  return Object.freeze(values);
+}
+
+export function readLegendSampling(config, defaultCount = DEFAULT_COUNT) {
+  if (config?.sampling?.mode === "values") {
+    return {
+      mode: "values",
+      values: config.sampling.values,
+      count: config.sampling.count ?? config.count ?? defaultCount
+    };
+  }
+  return {
+    mode: "auto",
+    count: config?.sampling?.count ?? config?.count ?? defaultCount
+  };
+}
+
+export function normalizeLegendSampling(
+  patch,
+  { previous, operation = "create", label = "Legend" } = {}
+) {
+  const prior = readLegendSampling(previous);
+  const hasValues = Object.hasOwn(patch, "values");
+  const hasCount = Object.hasOwn(patch, "count");
+  const requestedValues = patch.values;
+
+  if (hasValues && requestedValues !== "auto" && hasCount) {
+    throw new Error(`${label} cannot specify both count and exact values.`);
+  }
+  if (requestedValues === "auto" && operation === "create") {
+    throw new Error(`${label} creation uses omission for automatic values.`);
+  }
+  if (!hasValues && !hasCount) {
+    return Object.freeze({
+      ...prior,
+      ...(prior.values === undefined
+        ? {}
+        : { values: Object.freeze([...prior.values]) })
+    });
+  }
+  if (!hasValues) {
+    if (prior.mode === "values") {
+      throw new Error(
+        `${label} count cannot replace exact values; set values to "auto" first.`
+      );
+    }
+    return Object.freeze({ mode: "auto", count: validateCount(patch.count, label) });
+  }
+  if (requestedValues === "auto") {
+    return Object.freeze({
+      mode: "auto",
+      count: hasCount ? validateCount(patch.count, label) : validateCount(prior.count, label)
+    });
+  }
+  return Object.freeze({
+    mode: "values",
+    values: normalizeExactValues(requestedValues, label),
+    count: validateCount(prior.count, label)
+  });
+}
+
+export function validateSamplingAgainstScale(sampling, scale, label = "Legend") {
+  if (sampling.mode !== "values") return sampling;
+  const domain = scale?.domain;
+  if (!Array.isArray(domain) || domain.length < 2 || !domain.every(Number.isFinite)) {
+    throw new Error(`${label} exact values require a finite quantitative scale domain.`);
+  }
+  const lower = Math.min(...domain);
+  const upper = Math.max(...domain);
+  for (const value of sampling.values) {
+    if (scale.type === "log" && value <= 0) {
+      throw new RangeError(`${label} exact values must be positive for a log scale.`);
+    }
+    if (value < lower || value > upper) {
+      throw new RangeError(
+        `${label} exact value ${value} is outside the scale domain [${lower}, ${upper}].`
+      );
+    }
+  }
+  return sampling;
+}
+
+export function resolveLegendSampleValues(config, scale, label = "Legend") {
+  const sampling = validateSamplingAgainstScale(
+    readLegendSampling(config),
+    scale,
+    label
+  );
+  return sampling.mode === "values"
+    ? [...sampling.values]
+    : sampleNumericRange(
+        scale.domain[0],
+        scale.domain[1],
+        sampling.count,
+        `${label} domain`
+      );
+}
+
+export function hasExactLegendSamplingForScale(program, scaleId) {
+  return ["size", "opacity", "strokeWidth"].some(kind => {
+    const config = program.guideConfigs.legend?.[kind];
+    return config?.scale === scaleId && readLegendSampling(config).mode === "values";
+  });
+}

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

@@ -1,10 +1,14 @@
 import { action } from "../../../core/action.js";
 import {
-  validateGeneratedItemLimit,
   validateNonEmptyString,
   validateKeys
 } from "../../../core/validation.js";
-import { mapLinearValues } from "../../../grammar/scales/index.js";
+import {
+  formatDiscretizedIntervals,
+  isDiscreteSizeScaleType,
+  isSizeScaleType,
+  mapSizeValues
+} from "../../../grammar/scales/index.js";
 import { resolveLegendItemLayout } from "../../../layout/legendItems.js";
 import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
   "../../../theme/defaults.js";
@@ -21,13 +25,18 @@ import {
   resolveContinuousBounds,
   resolveLegendBackgroundFromBounds,
   formatContinuousValues,
-  sampleContinuousValues,
   selectLegendLayer,
   styleContinuousText
 } from "./continuous/common.js";
 import { legendResourcePolicies } from "../../../materialization/guides/resources.js";
+import {
+  normalizeLegendSampling,
+  readLegendSampling,
+  resolveLegendSampleValues
+} from "./sampling.js";
+import { resolveEffectiveLegendBlockConfig } from "./blocks.js";
 
-const SIZE_OPTIONS = Object.freeze(["target", "count", "position", "layout", "align",
+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({
@@ -61,21 +70,32 @@ export function resolveSizeLegendPoint(program, requested) {
   return layer;
 }
 
-function requireScale(program, id, type) {
+function requireScale(program, id) {
   const scale = program.resolvedScales[id];
-  if (scale?.type !== type) {
-    throw new Error(`Legend requires resolved ${type} scale "${id}".`);
+  if (!isSizeScaleType(scale?.type)) {
+    throw new Error(`Legend requires resolved size scale "${id}".`);
   }
   return scale;
 }
 
 export function resolveSizeLegendLayout(program, config) {
-  const scale = requireScale(program, config.scale, "linear");
-  const categorical = [program.guideConfigs.legend?.series, program.guideConfigs.legend?.color]
+  const scale = requireScale(program, config.scale);
+  const categorical = [
+    program.guideConfigs.legend?.series,
+    program.guideConfigs.legend?.color,
+    program.guideConfigs.legend?.stroke
+  ]
     .find(candidate => candidate?.target === config.target);
   const inherit = config.inheritAppearance === true && categorical !== undefined;
-  const labels = inherit ? { ...categorical.labels, offset: config.labels.offset } : config.labels;
-  const titleStyle = inherit ? categorical.titleStyle : config.titleStyle;
+  const inheritedLabels = inherit ? { ...categorical.labels, offset: config.labels.offset } : config.labels;
+  const inheritedTitleStyle = inherit ? categorical.titleStyle : config.titleStyle;
+  const effective = resolveEffectiveLegendBlockConfig(program, "size", {
+    ...config,
+    labels: inheritedLabels,
+    titleStyle: inheritedTitleStyle
+  });
+  const labels = effective.labels;
+  const titleStyle = effective.titleStyle;
   const position = categorical?.position ?? config.position;
   if (categorical?.layout === "legacy-bottom") {
     throw new Error('Combined size legends require layout "edge".');
@@ -84,27 +104,46 @@ export function resolveSizeLegendLayout(program, config) {
   const geometry = horizontal ? {
     position, align: categorical.align, direction: categorical.direction,
     columns: categorical.columns, titlePosition: categorical.titlePosition,
-    offset: categorical.offset, itemGap: categorical.itemGap
+    offset: categorical.offset, itemGap: effective.blockGap ?? categorical.itemGap
   } : { position };
-  const values = sampleContinuousValues(scale.domain, config.count);
-  const areas = mapLinearValues(values, scale.domain, scale.range, { clamp: scale.clamp ?? false });
+  const discrete = isDiscreteSizeScaleType(scale.type);
+  if (discrete && readLegendSampling(config).mode === "values") {
+    throw new Error("Discrete size legends do not support exact values.");
+  }
+  const values = discrete
+    ? undefined
+    : resolveLegendSampleValues(effective, scale, "Size legend");
+  const areas = discrete
+    ? scale.range
+    : mapSizeValues(values, scale);
   const radii = areas.map(area => Math.sqrt(area / Math.PI));
   const radius = Math.max(...radii);
   const width = Math.max(32, radius * 2);
   const { plot, canvas } = resolveContinuousBounds(program);
-  const text = formatContinuousValues(
-    values,
-    scale.domain,
-    "quantitative",
-    config.labels.format
-  );
-  const layout = resolveLegendItemLayout(plot, { ...config, ...geometry, labels, titleStyle }, text, {
-    width, height: radius * 2,
-    itemBounds: radii.map(r => ({ left: width / 2 - r, right: width / 2 + r, top: -r, bottom: r }))
+  const text = discrete
+    ? formatDiscretizedIntervals(scale.thresholds, config.labels.format)
+    : formatContinuousValues(
+        values,
+        scale.domain,
+        "quantitative",
+        config.labels.format
+      );
+  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 => ({
+      left: sampleWidth / 2 - r - symbolExtent,
+      right: sampleWidth / 2 + r + symbolExtent,
+      top: -r - symbolExtent,
+      bottom: r + symbolExtent
+    }))
   });
-  assertLegendBoundsInsideCanvas(layout.bounds, canvas, "Size legend layout", { ...config, ...geometry });
-  const background = resolveLegendBackgroundFromBounds(layout.bounds, config.border, canvas, "Size legend", { ...config, ...geometry });
-  return { ...layout, symbolX: layout.symbolX.map(x => x + width / 2), radii, text, labels, titleStyle, background };
+  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 };
 }
 
 export const rematerializeSizeLegend = action(
@@ -121,7 +160,7 @@ export const rematerializeSizeLegend = action(
     if (encoding?.scale === undefined) {
       throw new Error("Size legend target requires a size encoding.");
     }
-    const scale = requireScale(this, encoding.scale, "linear");
+    const scale = requireScale(this, encoding.scale);
     const title = config.inferredTitle === true ? encoding.field : config.title;
     const currentConfig = {
       ...config,
@@ -130,6 +169,7 @@ export const rematerializeSizeLegend = action(
       domain: scale.domain
     };
     const layout = resolveSizeLegendLayout(this, currentConfig);
+    const effective = layout.config;
     const { itemY, symbolX, labelX, radii, labels, titleStyle } = layout;
     let next = this
       .editSemantic({ property: "guide.legend.size.scale", value: encoding.scale })
@@ -146,9 +186,10 @@ export const rematerializeSizeLegend = action(
       .editGraphics({
         target: "sizeLegendSymbols",
         property: "fill",
-        value: DEFAULT_COLORS.sizeSymbol
+        value: effective.blockSymbol?.fill ?? DEFAULT_COLORS.sizeSymbol
       })
-      .editGraphics({ target: "sizeLegendSymbols", property: "opacity", value: 0.7 })
+      .editGraphics({ target: "sizeLegendSymbols", property: "opacity",
+        value: effective.blockSymbol?.opacity ?? 0.7 })
       .editGraphics({ target: "sizeLegendLabels", property: "length", value: radii.length })
       .editGraphics({ target: "sizeLegendLabels", property: "x", value: labelX })
       .editGraphics({ target: "sizeLegendLabels", property: "y", value: itemY })
@@ -158,12 +199,20 @@ export const rematerializeSizeLegend = action(
         value: layout.text
       });
     next = editLegendBackground(next, "sizeLegendBackground", layout.background, currentConfig.border);
+    if (effective.blockSymbol?.stroke !== undefined) {
+      next = next.editGraphics({ target: "sizeLegendSymbols", property: "stroke",
+        value: effective.blockSymbol.stroke });
+    }
+    if (effective.blockSymbol?.strokeWidth !== undefined) {
+      next = next.editGraphics({ target: "sizeLegendSymbols", property: "strokeWidth",
+        value: effective.blockSymbol.strokeWidth });
+    }
     next = styleContinuousText(next, "sizeLegendLabels", labels);
-    if (currentConfig.titleVisible === false) return next;
+    if (effective.titleVisible === false) return next;
     next = next
       .editGraphics({ target: "sizeLegendTitle", property: "x", value: layout.title.x })
       .editGraphics({ target: "sizeLegendTitle", property: "y", value: layout.title.y })
-      .editGraphics({ target: "sizeLegendTitle", property: "text", value: title });
+      .editGraphics({ target: "sizeLegendTitle", property: "text", value: effective.title });
     return styleContinuousText(next, "sizeLegendTitle", titleStyle, { align: layout.title.align });
   }
 );
@@ -177,12 +226,16 @@ export function resolveSizeLegendConfig(program, args = {}) {
   if (encoding?.scale === undefined) {
     throw new Error(`Point mark "${layer.id}" requires a size encoding.`);
   }
-  const scale = requireScale(program, encoding.scale, "linear");
-  const count = args.count ?? 5;
-  if (!Number.isInteger(count) || count < 2) {
-    throw new RangeError("Size legend count must be an integer of at least 2.");
+  const scale = requireScale(program, encoding.scale);
+  const discrete = isDiscreteSizeScaleType(scale.type);
+  if (discrete && (Object.hasOwn(args, "count") || Object.hasOwn(args, "values"))) {
+    throw new Error("Discrete size legends do not support count or exact values.");
   }
-  validateGeneratedItemLimit(count, "Size legend count");
+  const sampling = discrete ? undefined : normalizeLegendSampling(args, {
+    operation: "create",
+    label: "Size legend"
+  });
+  const count = discrete ? scale.range.length : undefined;
   return {
     target: layer.id,
     scale: encoding.scale,
@@ -190,7 +243,7 @@ export function resolveSizeLegendConfig(program, args = {}) {
     title: args.title ?? encoding.field,
     inferredTitle: args.title === undefined,
     domain: scale.domain,
-    count,
+    ...(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),
@@ -200,8 +253,8 @@ export function resolveSizeLegendConfig(program, args = {}) {
 }
 
 export function createSizeLegendFromConfig(program, config) {
-  resolveSizeLegendLayout(program, config);
-  const { count } = config;
+  const { radii } = resolveSizeLegendLayout(program, config);
+  const count = radii.length;
   const following = new Set(legendResourcePolicies().filter(policy =>
     policy.kind !== "size" && policy.family !== "categorical" &&
     program.guideConfigs.legend?.[policy.kind] !== undefined
@@ -241,7 +294,7 @@ export function createSizeLegendFromConfig(program, config) {
 export const createSizeLegend = action(
   {
     op: "createSizeLegend",
-    description: "Create a quantitative equal-area point-size legend."
+    description: "Create an equal-area point-size legend."
   },
   function (args = {}) {
     const config = resolveSizeLegendConfig(this, args);

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

@@ -1,6 +1,5 @@
 import { action } from "../../../core/action.js";
 import {
-  validateGeneratedItemLimit,
   validateNonEmptyString,
   validateKeys
 } from "../../../core/validation.js";
@@ -21,12 +20,16 @@ import {
   resolveContinuousBounds,
   resolveLegendBackgroundFromBounds,
   formatContinuousValues,
-  sampleContinuousValues,
   selectLegendLayer,
   styleContinuousText
 } from "./continuous/common.js";
+import {
+  normalizeLegendSampling,
+  resolveLegendSampleValues
+} from "./sampling.js";
+import { resolveEffectiveLegendBlockConfig } from "./blocks.js";
 
-const OPTIONS = Object.freeze(["target", "count", "position", "layout", "align",
+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({
@@ -74,20 +77,21 @@ function requireScale(program, id) {
 }
 
 export function resolveStrokeWidthLegendLayout(program, config) {
+  const effective = resolveEffectiveLegendBlockConfig(program, "strokeWidth", config);
   const scale = requireScale(program, config.scale);
   const { plot, canvas } = resolveContinuousBounds(program);
-  const values = sampleContinuousValues(scale.domain, config.count);
+  const values = resolveLegendSampleValues(effective, scale, "Stroke-width legend");
   const widths = mapContinuousScaleValues(values, scale);
   const labels = formatContinuousValues(
     values,
     scale.domain,
     "quantitative",
-    config.labels.format
+    effective.labels.format
   );
-  const layout = resolveLegendItemLayout(plot, config, labels, { width: 32, height: 0, strokeWidth: widths });
-  assertLegendBoundsInsideCanvas(layout.bounds, canvas, "Stroke-width legend layout", config);
-  const background = resolveLegendBackgroundFromBounds(layout.bounds, config.border, canvas, "Stroke-width legend", config);
-  return { ...layout, widths, labels, background };
+  const layout = resolveLegendItemLayout(plot, effective, labels, { width: 32, height: 0, strokeWidth: widths });
+  assertLegendBoundsInsideCanvas(layout.bounds, canvas, "Stroke-width legend layout", effective);
+  const background = resolveLegendBackgroundFromBounds(layout.bounds, effective.border, canvas, "Stroke-width legend", effective);
+  return { ...layout, widths, labels, background, config: effective };
 }
 
 export const rematerializeStrokeWidthLegend = /* @__PURE__ */ action(
@@ -114,15 +118,15 @@ export const rematerializeStrokeWidthLegend = /* @__PURE__ */ action(
     }
     const scale = requireScale(this, encoding.scale);
     const title = config.inferredTitle === true ? encoding.field : config.title;
-    const layout = resolveStrokeWidthLegendLayout(this, { ...config, scale: encoding.scale, title });
+    const currentConfig = { ...config, scale: encoding.scale, title };
+    const layout = resolveStrokeWidthLegendLayout(this, currentConfig);
+    const effective = layout.config;
     const { itemY: y, widths } = layout;
     let next = this
       .editSemantic({ property: "guide.legend.strokeWidth.scale", value: encoding.scale })
       .editSemantic({ property: "guide.legend.strokeWidth.title", value: title })
       ._withLegendConfig("strokeWidth", {
-        ...config,
-        scale: encoding.scale,
-        title,
+        ...currentConfig,
         domain: scale.domain
       })
       .editGraphics({ target: "strokeWidthLegendSymbols", property: "length", value: widths.length })
@@ -130,7 +134,8 @@ export const rematerializeStrokeWidthLegend = /* @__PURE__ */ action(
       .editGraphics({ target: "strokeWidthLegendSymbols", property: "x2", value: layout.symbolX.map(x => x + 32) })
       .editGraphics({ target: "strokeWidthLegendSymbols", property: "y1", value: y })
       .editGraphics({ target: "strokeWidthLegendSymbols", property: "y2", value: y })
-      .editGraphics({ target: "strokeWidthLegendSymbols", property: "stroke", value: DEFAULT_COLORS.mark })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "stroke",
+        value: effective.blockSymbol?.stroke ?? DEFAULT_COLORS.mark })
       .editGraphics({ target: "strokeWidthLegendSymbols", property: "strokeWidth", value: widths })
       .editGraphics({ target: "strokeWidthLegendLabels", property: "length", value: widths.length })
       .editGraphics({
@@ -145,13 +150,17 @@ export const rematerializeStrokeWidthLegend = /* @__PURE__ */ action(
         value: layout.labels
       });
     next = editLegendBackground(next, "strokeWidthLegendBackground", layout.background, config.border);
-    next = styleContinuousText(next, "strokeWidthLegendLabels", config.labels);
-    if (config.titleVisible === false) return next;
+    if (effective.blockSymbol?.opacity !== undefined) {
+      next = next.editGraphics({ target: "strokeWidthLegendSymbols", property: "opacity",
+        value: effective.blockSymbol.opacity });
+    }
+    next = styleContinuousText(next, "strokeWidthLegendLabels", effective.labels);
+    if (effective.titleVisible === false) return next;
     next = next
       .editGraphics({ target: "strokeWidthLegendTitle", property: "x", value: layout.title.x })
       .editGraphics({ target: "strokeWidthLegendTitle", property: "y", value: layout.title.y })
-      .editGraphics({ target: "strokeWidthLegendTitle", property: "text", value: title });
-    return styleContinuousText(next, "strokeWidthLegendTitle", config.titleStyle, { align: layout.title.align });
+      .editGraphics({ target: "strokeWidthLegendTitle", property: "text", value: effective.title });
+    return styleContinuousText(next, "strokeWidthLegendTitle", effective.titleStyle, { align: layout.title.align });
   }
 );
 
@@ -162,20 +171,17 @@ export function resolveStrokeWidthLegendConfig(program, args = {}) {
   const layer = resolveLayer(program, args.target);
   const encoding = layer.encoding.strokeWidth;
   requireScale(program, encoding.scale);
-  const count = args.count ?? 5;
-  if (!Number.isInteger(count) || count < 2) {
-    throw new RangeError(
-      "Stroke-width legend count must be an integer of at least 2."
-    );
-  }
-  validateGeneratedItemLimit(count, "Stroke-width legend count");
+  const sampling = normalizeLegendSampling(args, {
+    operation: "create",
+    label: "Stroke-width legend"
+  });
   return {
     target: layer.id,
     scale: encoding.scale,
     ...normalizeItemLegendLayout({ ...args, itemGap: args.itemGap ?? 32 }),
     title: args.title ?? encoding.field,
     inferredTitle: args.title === undefined,
-    count,
+    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),
@@ -184,8 +190,8 @@ export function resolveStrokeWidthLegendConfig(program, args = {}) {
 }
 
 export function createStrokeWidthLegendFromConfig(program, config) {
-  resolveStrokeWidthLegendLayout(program, config);
-  const { count } = config;
+  const layout = resolveStrokeWidthLegendLayout(program, config);
+  const count = layout.widths.length;
   let next = program
     .editSemantic({ property: "guide.legend.strokeWidth.scale", value: config.scale })
     .editSemantic({ property: "guide.legend.strokeWidth.title", value: config.title })