ggaction 0.0.7 → 0.0.8

package/CHANGELOG.md

@@ -4,6 +4,25 @@ All notable changes to `ggaction` are recorded in this file.
 
 ## Unreleased
 
+## [0.0.8] - 2026-08-04
+
+### Added
+
+- Added immutable UTC time-unit derivation, semantic category ordering and reset, and partitioned moving mean/sum
+  windows with matching public actions, strict declarations, examples, and Current contracts.
+- Added the Tick mark lifecycle, point/Tick angle encoding, and non-negative centered area stacking with stable
+  Canvas, SVG, PNG, and PDF evidence.
+
+### Changed
+
+- Expanded the public example and documentation corpus with actual-data temporal, ordering, directional Tick,
+  centered-area, and multi-legend charts, plus installed-package coverage for their supported workflows.
+
+### Fixed
+
+- Replaced independent same-edge legend placement with deterministic shared right/left lanes and left-packed
+  top/bottom rows, aligning titles, symbols, and labels while preserving lifecycle convergence and compact margins.
+
 ## [0.0.7] - 2026-07-23
 
 ### Added
@@ -157,6 +176,7 @@ All notable changes to `ggaction` are recorded in this file.
 - Cartesian charts are the complete current path. Polar semantic tokens exist only where explicitly documented and do
   not imply complete polar rendering.
 
+[0.0.8]: https://github.com/ggaction/ggaction/releases/tag/v0.0.8
 [0.0.7]: https://github.com/ggaction/ggaction/releases/tag/v0.0.7
 [0.0.6]: https://github.com/ggaction/ggaction/releases/tag/v0.0.6
 [0.0.5]: https://github.com/ggaction/ggaction/releases/tag/v0.0.5

package/README.md

@@ -201,7 +201,7 @@ the extra discussion required before public API or architecture changes.
 
 ## Status and development
 
-> **Status:** `0.0.7` is the current experimental public release. APIs may change before `1.0.0`; changes are recorded in the [changelog](./CHANGELOG.md).
+> **Status:** `0.0.8` is the current experimental public release. APIs may change before `1.0.0`; changes are recorded in the [changelog](./CHANGELOG.md).
 
 ```bash
 npm install

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ggaction",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Build charts through immutable, traceable graphical actions.",
   "license": "MIT",
   "author": "Hyeon Jeon",

package/src/actions/categoryOrder/index.js

@@ -0,0 +1,111 @@
+import { action } from "../../core/action.js";
+import { validateUserId } from "../../core/identifiers.js";
+import { validateKeys } from "../../core/validation.js";
+import { findDataset } from "../../selectors/datasets.js";
+import { resolveEligibleLayer } from "../../selectors/layers.js";
+import { findScaleConsumers } from "../scales/consumers/index.js";
+import {
+  applyMaterializationPlan,
+  planScaleGuideRematerialization
+} from "../../materialization/dependencies.js";
+import { getMarkMaterializationStep } from "../../materialization/marks/index.js";
+import { buildMaterializationPlan } from "../../materialization/planner.js";
+import {
+  normalizeCategoryOrder,
+  resolveCategoryOrder
+} from "../../grammar/categoryOrder.js";
+
+const ORDER_OPTIONS = Object.freeze(["target", "channel", "values", "by", "direction"]);
+const REMOVE_OPTIONS = Object.freeze(["target", "channel"]);
+
+function resolveAssignment(program, args, operation, { activeOnly = false } = {}) {
+  if (!["x", "y"].includes(args.channel)) {
+    throw new Error(`${operation} channel must be x or y.`);
+  }
+  const requested = args.target === undefined
+    ? undefined
+    : validateUserId(args.target, "Mark id");
+  const layer = resolveEligibleLayer(program, {
+    target: requested,
+    label: "categorical position mark",
+    predicate: candidate => {
+      const encoding = candidate.encoding?.[args.channel];
+      return ["nominal", "ordinal"].includes(encoding?.fieldType) &&
+        typeof encoding.field === "string" && encoding.scale !== undefined &&
+        (!activeOnly || encoding.categoryOrder !== undefined);
+    }
+  });
+  const encoding = layer.encoding[args.channel];
+  const dataset = findDataset(program, layer.data);
+  if (dataset === undefined) {
+    throw new Error(`Mark "${layer.id}" requires an existing dataset.`);
+  }
+  const consumers = findScaleConsumers(program, encoding.scale);
+  const incompatible = consumers.find(consumer =>
+    consumer.layer.id !== layer.id &&
+    (consumer.layer.data !== layer.data || consumer.encoding.field !== encoding.field)
+  );
+  if (incompatible !== undefined) {
+    throw new Error(
+      `Category order scale "${encoding.scale}" has an incompatible shared consumer.`
+    );
+  }
+  return { layer, encoding, dataset };
+}
+
+function rematerializeAssignment(program, scaleId) {
+  const consumers = findScaleConsumers(program, scaleId);
+  return applyMaterializationPlan(program, buildMaterializationPlan({
+    scales: [{
+      op: "rematerializeScale",
+      args: { id: scaleId, guides: false, marks: false }
+    }],
+    marks: consumers.map(consumer =>
+      getMarkMaterializationStep(program, consumer.layer)
+    ),
+    guides: planScaleGuideRematerialization(program, scaleId)
+  }));
+}
+
+export const orderCategories = action(
+  { op: "orderCategories", description: "Assign semantic order to a categorical position." },
+  function (args = {}) {
+    validateKeys(args, ORDER_OPTIONS, "orderCategories");
+    const { layer, encoding, dataset } = resolveAssignment(this, args, "orderCategories");
+    const order = normalizeCategoryOrder(args);
+    resolveCategoryOrder(dataset.values, encoding.field, order);
+    const edited = this.editSemantic({
+      property: `layer[${layer.id}].encoding.${args.channel}.categoryOrder`,
+      value: order
+    });
+    return rematerializeAssignment(edited, encoding.scale);
+  }
+);
+
+export const removeCategoryOrder = action(
+  { op: "removeCategoryOrder", description: "Restore automatic category order." },
+  function (args = {}) {
+    validateKeys(args, REMOVE_OPTIONS, "removeCategoryOrder");
+    const { layer, encoding } = resolveAssignment(
+      this,
+      args,
+      "removeCategoryOrder",
+      { activeOnly: args.target === undefined }
+    );
+    if (encoding.categoryOrder === undefined) {
+      throw new Error(
+        `Mark "${layer.id}" ${args.channel} encoding has no category order assignment.`
+      );
+    }
+    const edited = this.editSemantic({
+        property: `layer[${layer.id}].encoding.${args.channel}.categoryOrder`,
+        remove: true
+      });
+    return rematerializeAssignment(edited, encoding.scale);
+  }
+);
+
+export function registerCategoryOrderActions(ProgramClass) {
+  ProgramClass.prototype.orderCategories = orderCategories;
+  ProgramClass.prototype.removeCategoryOrder = removeCategoryOrder;
+}

package/src/actions/data/index.js

@@ -23,6 +23,10 @@ import {
 import { createIntervalData, materializeIntervalData } from "./interval.js";
 import { createHorizonData, materializeHorizonData } from "./horizon.js";
 import { createWindowData, materializeWindowData } from "./window.js";
+import {
+  createTimeUnitData,
+  materializeTimeUnitData
+} from "./timeUnit.js";
 import {
   createBin2DData,
   editBin2DData,
@@ -54,6 +58,8 @@ export function registerDataActions(ProgramClass) {
   ProgramClass.prototype.materializeHorizonData = materializeHorizonData;
   ProgramClass.prototype.createWindowData = createWindowData;
   ProgramClass.prototype.materializeWindowData = materializeWindowData;
+  ProgramClass.prototype.createTimeUnitData = createTimeUnitData;
+  ProgramClass.prototype.materializeTimeUnitData = materializeTimeUnitData;
   ProgramClass.prototype.createBin2DData = createBin2DData;
   ProgramClass.prototype.editBin2DData = editBin2DData;
   ProgramClass.prototype.materializeBin2DData = materializeBin2DData;

package/src/actions/data/timeUnit.js

@@ -0,0 +1,48 @@
+import { action } from "../../core/action.js";
+import { validateUserId } from "../../core/identifiers.js";
+import { validateKeys } from "../../core/validation.js";
+import {
+  deriveTimeUnitRows,
+  normalizeTimeUnitTransform
+} from "../../grammar/timeUnit.js";
+import { MATERIALIZE_OPTIONS, requireDerivedDataset } from "./shared.js";
+
+const OPTIONS = Object.freeze(["id", "source", "field", "unit", "as"]);
+
+export const materializeTimeUnitData = action(
+  {
+    op: "materializeTimeUnitData",
+    description: "Materialize one immutable UTC time-unit dataset."
+  },
+  function (args = {}) {
+    validateKeys(args, MATERIALIZE_OPTIONS, "materializeTimeUnitData");
+    const { id, source, transform } = requireDerivedDataset(
+      this,
+      args.id,
+      "timeUnit"
+    );
+    return this.editSemantic({
+      property: `dataset[${id}].values`,
+      value: deriveTimeUnitRows(source.values, transform)
+    });
+  }
+);
+
+export const createTimeUnitData = action(
+  {
+    op: "createTimeUnitData",
+    description: "Create immutable UTC calendar bucket values."
+  },
+  function (args = {}) {
+    validateKeys(args, OPTIONS, "createTimeUnitData");
+    const id = validateUserId(args.id, "Time-unit dataset id");
+    const source = validateUserId(
+      args.source ?? this.context.currentData,
+      "Source dataset id"
+    );
+    const transform = normalizeTimeUnitTransform(args);
+    return this
+      .createDerivedData({ id, source, transform: [transform] })
+      .materializeTimeUnitData({ id });
+  }
+);

package/src/actions/encodings/angle.js

@@ -0,0 +1,77 @@
+import { action } from "../../core/action.js";
+import { readQuantitativeField } from "../../grammar/scales/index.js";
+import { resolveTarget, validateOptions } from "./shared.js";
+
+const OPTIONS = Object.freeze(["target", "value", "field", "fieldType"]);
+
+function rematerialize(program, layer, target) {
+  return layer.mark.type === "tick"
+    ? program.rematerializeTickMark({ id: target })
+    : program.rematerializePointMark({ id: target });
+}
+
+export const encodeAngle = action(
+  {
+    op: "encodeAngle",
+    description: "Assign direct clockwise degree rotation to point or Tick glyphs."
+  },
+  function (args = {}) {
+    validateOptions(args, OPTIONS, "encodeAngle");
+    const hasValue = Object.hasOwn(args, "value");
+    const hasField = Object.hasOwn(args, "field");
+    if (hasValue === hasField) {
+      throw new Error("encodeAngle requires exactly one of value or field.");
+    }
+    if (hasValue && args.fieldType !== undefined) {
+      throw new Error("Constant angle does not accept fieldType.");
+    }
+    const { id: target, dataset, layer } = resolveTarget(
+      this,
+      args.target,
+      ["point", "tick"],
+      "point or Tick mark"
+    );
+    if (hasValue && !Number.isFinite(args.value)) {
+      throw new TypeError("encodeAngle value must be finite degrees.");
+    }
+    if (hasField) {
+      const fieldType = args.fieldType ?? "quantitative";
+      if (fieldType !== "quantitative") {
+        throw new Error("encodeAngle requires a quantitative field.");
+      }
+      readQuantitativeField(dataset.values, args.field);
+    }
+
+    const previous = layer.encoding?.angle;
+    let next = this;
+    for (const property of ["datum", "field", "fieldType"]) {
+      if (Object.hasOwn(previous ?? {}, property)) {
+        next = next.editSemantic({
+          property: `layer[${target}].encoding.angle.${property}`,
+          remove: true
+        });
+      }
+    }
+    if (hasValue) {
+      next = next.editSemantic({
+        property: `layer[${target}].encoding.angle.datum`,
+        value: args.value
+      });
+    } else {
+      next = next
+        .editSemantic({
+          property: `layer[${target}].encoding.angle.field`,
+          value: args.field
+        })
+        .editSemantic({
+          property: `layer[${target}].encoding.angle.fieldType`,
+          value: "quantitative"
+        });
+    }
+    return rematerialize(next, layer, target);
+  }
+);
+
+export function registerAngleEncodingAction(ProgramClass) {
+  ProgramClass.prototype.encodeAngle = encodeAngle;
+}

package/src/actions/encodings/color/index.js

@@ -70,8 +70,18 @@ const encodeColor = action(
     const horizonColor = horizonTransform !== undefined &&
       horizonTransform.as?.color === args.field &&
       layer.encoding?.group?.field === horizonTransform.as?.group;
+    const barGrain = resolveBarGrain(layer);
+    if (layer.mark.type === "bar" && barGrain === undefined) {
+      throw new Error(
+        "Bar color encoding requires a complete histogram encoding or a complete ordinal aggregate encoding."
+      );
+    }
+    const layout = resolveColorLayout(layer, args.layout, barGrain);
+    const createsCenterGroup = layer.mark.type === "area" &&
+      layout === "center" && layer.encoding?.group?.field === undefined;
     if (
       layer.mark.type === "area" &&
+      !createsCenterGroup &&
       (layer.encoding?.group?.field === undefined ||
         layer.encoding.group.field !== args.field) &&
       !densitySeriesFields.includes(args.field) &&
@@ -82,14 +92,6 @@ const encodeColor = action(
       );
     }
     validateLineSeriesCompatibility(layer, "color", args.field);
-
-    const barGrain = resolveBarGrain(layer);
-    if (layer.mark.type === "bar" && barGrain === undefined) {
-      throw new Error(
-        "Bar color encoding requires a complete histogram encoding or a complete ordinal aggregate encoding."
-      );
-    }
-    const layout = resolveColorLayout(layer, args.layout, barGrain);
     const requestedScale = resolveReassignmentScaleOptions(
       layer.encoding?.color,
       resolveColorScaleOptions(args)
@@ -112,11 +114,13 @@ const encodeColor = action(
       readNominalField(dataset.values, args.field);
     }
 
-    let next = this
-      .editSemantic({
-        property: `layer[${target}].encoding.color.field`,
-        value: args.field
-      })
+    let next = createsCenterGroup
+      ? this.encodeGroup({ target, field: args.field })
+      : this;
+    next = next.editSemantic({
+      property: `layer[${target}].encoding.color.field`,
+      value: args.field
+    })
       .editSemantic({
         property: `layer[${target}].encoding.color.fieldType`,
         value: fieldType

package/src/actions/encodings/color/layout.js

@@ -37,6 +37,8 @@ export function applyColorLayoutCompanion(
   }
   const stack = layout === "fill"
     ? "normalize"
+    : layout === "center"
+      ? "center"
     : layout === "overlay" || layout === "group"
       ? null
       : "zero";

package/src/actions/encodings/color/policy.js

@@ -74,6 +74,9 @@ export function resolveColorLayout(layer, requested, barGrain) {
   if (layer.mark.type === "area" && layout === "group") {
     throw new Error('Area color layout does not support "group".');
   }
+  if (layer.mark.type === "bar" && layout === "center") {
+    throw new Error("Centered bars are not supported.");
+  }
   if (
     layer.mark.type === "arc" &&
     layout !== undefined &&

package/src/actions/encodings/index.js

@@ -1,4 +1,5 @@
 import { registerAppearanceEncodingAction } from "./appearance.js";
+import { registerAngleEncodingAction } from "./angle.js";
 import { registerBarWidthEncodingAction } from "./barWidth.js";
 import { registerColorEncodingAction } from "./color/index.js";
 import { registerDensityEncodingAction } from "./density.js";
@@ -26,6 +27,7 @@ export function registerEncodingActions(ProgramClass) {
   registerColorEncodingAction(ProgramClass);
   registerStrokeDashEncodingActions(ProgramClass);
   registerAppearanceEncodingAction(ProgramClass);
+  registerAngleEncodingAction(ProgramClass);
   registerRuleAppearanceEncodingActions(ProgramClass);
   registerTextEncodingAction(ProgramClass);
   registerParallelEncodingAction(ProgramClass);

package/src/actions/encodings/position/policies/area.js

@@ -1,4 +1,6 @@
 import { validateStack, emptyPositionPolicy } from "./common.js";
+import { deriveCenteredAreaSeries } from "../../../../grammar/areaSeries.js";
+import { readQuantitativeField } from "../../../../grammar/scales/index.js";
 
 export function isCategoricalDensityPosition({
   layer,
@@ -15,7 +17,14 @@ export function isCategoricalDensityPosition({
     density.placement.categoryField === field;
 }
 
-export function resolveAreaPositionPolicy({ dataset, channel, args, fieldType, field }) {
+export function resolveAreaPositionPolicy({
+  dataset,
+  layer,
+  channel,
+  args,
+  fieldType,
+  field
+}) {
   const density = dataset.transform?.find(transform => transform.type === "density");
   if (["nominal", "ordinal"].includes(fieldType)) {
     if (
@@ -41,6 +50,35 @@ export function resolveAreaPositionPolicy({ dataset, channel, args, fieldType, f
     throw new Error("Area position encoding does not support aggregate or bin.");
   }
   if (args.stack === undefined) return emptyPositionPolicy();
+  const stack = validateStack(args.stack, "Area y encoding");
+  if (stack === "center") {
+    if (channel !== "y") {
+      throw new Error("Area center stack requires a y encoding.");
+    }
+    if (layer.encoding?.group?.fieldType !== "nominal") {
+      throw new Error("Area center stack requires a nominal group encoding.");
+    }
+    if (
+      layer.encoding?.color?.layout !== undefined &&
+      layer.encoding.color.layout !== "center"
+    ) {
+      throw new Error("Area center stack requires a matching center color layout.");
+    }
+    const values = readQuantitativeField(dataset.values, field);
+    if (values.some(value => value < 0)) {
+      throw new RangeError("Area center stack requires non-negative values.");
+    }
+    if (layer.encoding?.x !== undefined) {
+      deriveCenteredAreaSeries(dataset.values, {
+        ...layer,
+        encoding: {
+          ...layer.encoding,
+          y: { field, fieldType, stack: "center" }
+        }
+      });
+    }
+    return { bin: undefined, aggregate: undefined, stack };
+  }
   if (
     channel !== "y" ||
     density === undefined
@@ -50,6 +88,6 @@ export function resolveAreaPositionPolicy({ dataset, channel, args, fieldType, f
   return {
     bin: undefined,
     aggregate: undefined,
-    stack: validateStack(args.stack, "Area y encoding")
+    stack
   };
 }

package/src/actions/encodings/position/policies/bar.js

@@ -52,6 +52,9 @@ export function resolveBarPositionPolicy({
       throw new Error('Histogram bar y aggregate must be "count".');
     }
     stack = validateStack(stack, "Histogram bar y encoding");
+    if (stack === "center") {
+      throw new Error("Centered bars are not supported.");
+    }
   } else if (fieldType === "quantitative") {
     if (args.bin !== undefined) {
       throw new Error(
@@ -80,6 +83,9 @@ export function resolveBarPositionPolicy({
     aggregate = validateAggregate(aggregate);
     validateAggregateFieldType(aggregate, fieldType);
     stack = validateStack(stack, `Bar ${channel} encoding`);
+    if (stack === "center") {
+      throw new Error("Centered bars are not supported.");
+    }
   } else {
     throw new Error(
       "Bar position requires quantitative, temporal, ordinal, or nominal fields."

package/src/actions/encodings/position/policies/index.js

@@ -9,6 +9,7 @@ import { resolveBarPositionPolicy } from "./bar.js";
 import { resolveLinePositionPolicy } from "./line.js";
 import { resolvePointPositionPolicy } from "./point.js";
 import { resolveRulePositionPolicy } from "./rule.js";
+import { resolveTickPositionPolicy } from "./tick.js";
 
 const POSITION_POLICIES = Object.freeze({
   area: resolveAreaPositionPolicy,
@@ -17,6 +18,7 @@ const POSITION_POLICIES = Object.freeze({
   line: resolveLinePositionPolicy,
   point: resolvePointPositionPolicy,
   rule: resolveRulePositionPolicy,
+  tick: resolveTickPositionPolicy,
   text: resolvePointPositionPolicy,
   rect: resolvePointPositionPolicy
 });

package/src/actions/encodings/position/policies/tick.js

@@ -0,0 +1,19 @@
+import { emptyPositionPolicy } from "./common.js";
+
+export function resolveTickPositionPolicy({ args, fieldType }) {
+  if (!["quantitative", "temporal", "ordinal", "nominal"].includes(fieldType)) {
+    throw new Error(
+      "Tick position encoding requires quantitative, temporal, ordinal, or nominal fields."
+    );
+  }
+  if (args.aggregate !== undefined) {
+    throw new Error("Tick position encoding does not support aggregate.");
+  }
+  if (args.bin !== undefined) {
+    throw new Error("Tick position encoding does not support bin.");
+  }
+  if (args.stack !== undefined) {
+    throw new Error("Tick position encoding does not support stack.");
+  }
+  return emptyPositionPolicy();
+}

package/src/actions/encodings/remove.js

@@ -21,7 +21,7 @@ const OPTIONS = Object.freeze(["target", "channel"]);
 const REMOVABLE_CHANNELS = Object.freeze([
   "x", "y", "x2", "y2", "xOffset", "yOffset", "theta", "radius",
   "color", "strokeDash", "strokeWidth", "size", "shape", "group",
-  "opacity", "text"
+  "angle", "opacity", "text"
 ]);
 const REMOVE_AXIS = Object.freeze({
   x: "removeXAxis",

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

@@ -8,6 +8,11 @@ import { isSizeLegendPoint } from "../size.js";
 import { isStrokeWidthLegendLayer } from "../strokeWidth.js";
 import { legendResourcePolicies } from
   "../../../../materialization/guides/resources.js";
+import {
+  hasMultiHorizontalLegendLane,
+  hasMultiLegendLane,
+  hasMultiSideLegendLane
+} from "../lane.js";
 import {
   resolveCurrentDefinition,
   resolveDefinition,
@@ -91,6 +96,12 @@ export const rematerializeLegend = action(
         next = next[policy.rematerializeOp]();
       }
     }
+    if (hasMultiSideLegendLane(next)) {
+      next = next.rematerializeSideLegendLane();
+    }
+    if (hasMultiHorizontalLegendLane(next)) {
+      next = next.rematerializeHorizontalLegendLane();
+    }
     return next;
   }
 );
@@ -212,10 +223,11 @@ export const createLegend = action(
       if (position !== undefined && position !== "right") {
         throw new Error('Standalone size legends currently require position "right".');
       }
-      return this.createSizeLegend({
+      const next = this.createSizeLegend({
         ...(target === undefined ? {} : { target }),
         ...(count === undefined ? {} : { count })
       });
+      return hasMultiLegendLane(next) ? next.rematerializeLegend() : next;
     }
     const strokeWidthCandidates = this.semanticSpec.layers.filter(
       isStrokeWidthLegendLayer
@@ -248,10 +260,11 @@ export const createLegend = action(
           'Standalone stroke-width legends currently require position "right".'
         );
       }
-      return this.createStrokeWidthLegend({
+      const next = this.createStrokeWidthLegend({
         ...(target === undefined ? {} : { target }),
         ...(count === undefined ? {} : { count })
       });
+      return hasMultiLegendLane(next) ? next.rematerializeLegend() : next;
     }
     const opacityCandidates = this.semanticSpec.layers.filter(layer =>
       layer.mark?.type === "point" && layer.encoding?.opacity?.scale !== undefined
@@ -266,7 +279,8 @@ export const createLegend = action(
       (channels === undefined && opacityCandidates.length === 1 &&
         !hasOtherLegendCandidate)
     ) {
-      return this.createOpacityLegend(args);
+      const next = this.createOpacityLegend(args);
+      return hasMultiLegendLane(next) ? next.rematerializeLegend() : next;
     }
     const continuousColorCandidates = this.semanticSpec.layers.filter(layer => {
       const encoding = ["point", "bar", "rect"].includes(layer.mark?.type)
@@ -287,7 +301,8 @@ export const createLegend = action(
       (channels?.length === 1 && channels[0] === "color" && continuousColor) ||
       (channels === undefined && continuousColor)
     ) {
-      return this.createGradientLegend(args);
+      const next = this.createGradientLegend(args);
+      return hasMultiLegendLane(next) ? next.rematerializeLegend() : next;
     }
     const intervalColorCandidates = this.semanticSpec.layers.filter(layer => {
       const encoding = layer.mark?.type === "point" ? layer.encoding?.color : undefined;
@@ -307,7 +322,8 @@ export const createLegend = action(
         intervalColorCandidates.length > 0) ||
       (channels === undefined && intervalColorCandidates.length > 0)
     ) {
-      return this.createIntervalLegend(args);
+      const next = this.createIntervalLegend(args);
+      return hasMultiLegendLane(next) ? next.rematerializeLegend() : next;
     }
     const wantsShape = channels?.includes("shape") === true;
     const pointCandidates = this.semanticSpec.layers.filter(layer =>
@@ -383,7 +399,8 @@ export const createLegend = action(
       }
       return next;
     }
-    return this.createCategoricalLegend(args);
+    const next = this.createCategoricalLegend(args);
+    return hasMultiLegendLane(next) ? next.rematerializeLegend() : next;
   }
 );
 

package/src/actions/guides/legends/categorical/index.js

@@ -24,6 +24,10 @@ import {
   rematerializeLegendHighlights
 } from "./symbols.js";
 import { editLegend } from "../edit.js";
+import {
+  rematerializeHorizontalLegendLane,
+  rematerializeSideLegendLane
+} from "../lane.js";
 
 export function registerBasicCategoricalLegendActions(ProgramClass) {
   ProgramClass.prototype.createLegend = createLegend;
@@ -45,6 +49,10 @@ export function registerBasicCategoricalLegendActions(ProgramClass) {
   ProgramClass.prototype.createLegendTitle = createLegendTitle;
   ProgramClass.prototype.rematerializeLegendTitle = rematerializeLegendTitle;
   ProgramClass.prototype.rematerializeLegend = rematerializeLegend;
+  ProgramClass.prototype.rematerializeSideLegendLane =
+    rematerializeSideLegendLane;
+  ProgramClass.prototype.rematerializeHorizontalLegendLane =
+    rematerializeHorizontalLegendLane;
 }
 
 export function registerCategoricalLegendActions(ProgramClass) {