ggaction 0.0.6 → 0.0.8

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/appearance.js

@@ -277,12 +277,16 @@ const encodeOpacity = action(
   }
 );
 
+export function registerBasicAppearanceEncodingActions(ProgramClass) {
+  ProgramClass.prototype.encodeSize = encodeSize;
+  ProgramClass.prototype.encodeShape = encodeShape;
+}
+
 export function registerAppearanceEncodingAction(ProgramClass) {
+  registerBasicAppearanceEncodingActions(ProgramClass);
   ProgramClass.prototype.encodeRadius = encodeRadius;
   ProgramClass.prototype.encodePointRadius = encodePointRadius;
   ProgramClass.prototype.removePointRadius = removePointRadius;
-  ProgramClass.prototype.encodeSize = encodeSize;
-  ProgramClass.prototype.encodeShape = encodeShape;
   ProgramClass.prototype.encodeOpacity = encodeOpacity;
   ProgramClass.prototype.clearOpacityEncoding = clearOpacityEncoding;
 }

package/src/actions/encodings/basic.js

@@ -0,0 +1,21 @@
+import { registerBasicAppearanceEncodingActions } from "./appearance.js";
+import { registerBarWidthEncodingAction } from "./barWidth.js";
+import { registerColorEncodingAction } from "./color/index.js";
+import { registerHistogramEncodingAction } from "./histogram.js";
+import { registerOffsetEncodingAction } from "./offset.js";
+import {
+  registerCartesianPositionEncodingActions
+} from "./position/index.js";
+import { registerBasicRangedEncodingActions } from "./ranged.js";
+import { registerStrokeDashEncodingActions } from "./strokeDash.js";
+
+export function registerBasicEncodingActions(ProgramClass) {
+  registerCartesianPositionEncodingActions(ProgramClass);
+  registerBasicRangedEncodingActions(ProgramClass);
+  registerColorEncodingAction(ProgramClass);
+  registerBasicAppearanceEncodingActions(ProgramClass);
+  registerStrokeDashEncodingActions(ProgramClass);
+  registerOffsetEncodingAction(ProgramClass);
+  registerHistogramEncodingAction(ProgramClass);
+  registerBarWidthEncodingAction(ProgramClass);
+}

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/index.js

@@ -135,9 +135,13 @@ const encodeR = action(
   }
 );
 
-export function registerPositionEncodingActions(ProgramClass) {
+export function registerCartesianPositionEncodingActions(ProgramClass) {
   ProgramClass.prototype.encodeX = encodeX;
   ProgramClass.prototype.encodeY = encodeY;
+}
+
+export function registerPositionEncodingActions(ProgramClass) {
+  registerCartesianPositionEncodingActions(ProgramClass);
   ProgramClass.prototype.encodeTheta = encodeTheta;
   ProgramClass.prototype.encodeR = encodeR;
 }

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/ranged.js

@@ -291,10 +291,14 @@ const encodeGroup = action(
   }
 );
 
-export function registerRangedEncodingActions(ProgramClass) {
+export function registerBasicRangedEncodingActions(ProgramClass) {
   ProgramClass.prototype.encodeX2 = encodeX2;
   ProgramClass.prototype.encodeY2 = encodeY2;
+  ProgramClass.prototype.encodeGroup = encodeGroup;
+}
+
+export function registerRangedEncodingActions(ProgramClass) {
+  registerBasicRangedEncodingActions(ProgramClass);
   ProgramClass.prototype.encodeXRange = encodeXRange;
   ProgramClass.prototype.encodeYRange = encodeYRange;
-  ProgramClass.prototype.encodeGroup = encodeGroup;
 }

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/axes/index.js

@@ -14,7 +14,7 @@ import {
 } from "./remove.js";
 import { registerParallelAxisActions } from "./parallel.js";
 
-export function registerGuideAxisActions(ProgramClass) {
+export function registerBasicCartesianAxisActions(ProgramClass) {
   registerAxisLineActions(ProgramClass);
   registerAxisTickActions(ProgramClass);
   registerAxisLabelActions(ProgramClass);
@@ -22,10 +22,18 @@ export function registerGuideAxisActions(ProgramClass) {
   registerAxisTitleActions(ProgramClass);
   registerAxisActions(ProgramClass);
   registerAxisCollectionActions(ProgramClass);
+}
+
+export function registerCartesianAxisActions(ProgramClass) {
+  registerBasicCartesianAxisActions(ProgramClass);
   registerCompleteAxisEditActions(ProgramClass);
-  registerParallelAxisActions(ProgramClass);
   ProgramClass.prototype.removeXAxis = removeXAxis;
   ProgramClass.prototype.removeYAxis = removeYAxis;
+}
+
+export function registerGuideAxisActions(ProgramClass) {
+  registerCartesianAxisActions(ProgramClass);
+  registerParallelAxisActions(ProgramClass);
   ProgramClass.prototype.removeThetaAxis = removeThetaAxis;
   ProgramClass.prototype.removeRadialAxis = removeRadialAxis;
 }

package/src/actions/guides/basic.js

@@ -0,0 +1,19 @@
+import { registerBasicCartesianAxisActions } from "./axes/index.js";
+import { registerGuideCollectionActions } from "./guides.js";
+import { registerBasicGridActions } from "./grids/index.js";
+import {
+  registerBasicCategoricalLegendActions
+} from "./legends/categorical/index.js";
+import {
+  registerGradientLegendActions
+} from "./legends/continuous/index.js";
+import { registerSizeLegendActions } from "./legends/size.js";
+
+export function registerBasicGuideActions(ProgramClass) {
+  registerBasicCartesianAxisActions(ProgramClass);
+  registerBasicCategoricalLegendActions(ProgramClass);
+  registerGradientLegendActions(ProgramClass);
+  registerSizeLegendActions(ProgramClass);
+  registerBasicGridActions(ProgramClass);
+  registerGuideCollectionActions(ProgramClass);
+}

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

@@ -343,13 +343,17 @@ const removeGrid = action(
 );
 
 export function registerGridActions(ProgramClass) {
-  ProgramClass.prototype.createGrid = createGrid;
-  ProgramClass.prototype.createHorizontalGrid = createHorizontalGrid;
-  ProgramClass.prototype.createVerticalGrid = createVerticalGrid;
+  registerBasicGridActions(ProgramClass);
   ProgramClass.prototype.editHorizontalGrid = editHorizontalGrid;
   ProgramClass.prototype.editVerticalGrid = editVerticalGrid;
   ProgramClass.prototype.editGrid = editGrid;
   ProgramClass.prototype.removeGrid = removeGrid;
+}
+
+export function registerBasicGridActions(ProgramClass) {
+  ProgramClass.prototype.createGrid = createGrid;
+  ProgramClass.prototype.createHorizontalGrid = createHorizontalGrid;
+  ProgramClass.prototype.createVerticalGrid = createVerticalGrid;
   ProgramClass.prototype.rematerializeGrid = rematerializeGrid;
   ProgramClass.prototype.rematerializeHorizontalGrid =
     rematerializeHorizontalGrid;

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

@@ -1 +1 @@
-export { registerGridActions } from "./grid.js";
+export { registerBasicGridActions, registerGridActions } from "./grid.js";

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,10 +24,13 @@ import {
   rematerializeLegendHighlights
 } from "./symbols.js";
 import { editLegend } from "../edit.js";
+import {
+  rematerializeHorizontalLegendLane,
+  rematerializeSideLegendLane
+} from "../lane.js";
 
-export function registerCategoricalLegendActions(ProgramClass) {
+export function registerBasicCategoricalLegendActions(ProgramClass) {
   ProgramClass.prototype.createLegend = createLegend;
-  ProgramClass.prototype.editLegend = editLegend;
   ProgramClass.prototype.createCategoricalLegend = createCategoricalLegend;
   ProgramClass.prototype.removeCategoricalLegend = removeCategoricalLegend;
   ProgramClass.prototype.createLegendBackground = createLegendBackground;
@@ -46,4 +49,13 @@ export function registerCategoricalLegendActions(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) {
+  registerBasicCategoricalLegendActions(ProgramClass);
+  ProgramClass.prototype.editLegend = editLegend;
 }

package/src/actions/guides/legends/continuous/common.js

@@ -105,12 +105,21 @@ export function normalizeContinuousLegend(args, kind) {
   }
   const offset = args.offset ?? 30;
   validateNonNegative(offset, "Legend offset");
-  const itemGap = args.itemGap ?? 28;
+  const titlePosition = args.titlePosition ?? "top";
+  if (!["top", "left"].includes(titlePosition)) {
+    throw new Error(`Unsupported legend titlePosition "${titlePosition}".`);
+  }
+  if (
+    titlePosition === "left" &&
+    (!["top", "bottom"].includes(position) || kind !== "opacity")
+  ) {
+    throw new Error(
+      "Only horizontal opacity legends support left titlePosition."
+    );
+  }
+  const itemGap = args.itemGap ?? (titlePosition === "left" ? 20 : 28);
   validatePositive(itemGap, "Legend itemGap");
   if (args.title !== undefined) validateNonEmptyString(args.title, "Legend title");
-  if (args.titlePosition !== undefined && args.titlePosition !== "top") {
-    throw new Error("Continuous legends currently require top titlePosition.");
-  }
   if (kind === "gradient") {
     for (const key of ["symbol", "columns", "direction", "itemGap"]) {
       if (Object.hasOwn(args, key)) {
@@ -135,7 +144,9 @@ export function normalizeContinuousLegend(args, kind) {
     labels: normalizeLegendTextOptions(
       args.labels,
       "createLegend.labels",
-      DEFAULT_LABELS
+      titlePosition === "left"
+        ? { ...DEFAULT_LABELS, offset: 8 }
+        : DEFAULT_LABELS
     ),
     titleStyle: normalizeLegendTextOptions(
       args.titleStyle,
@@ -143,6 +154,7 @@ export function normalizeContinuousLegend(args, kind) {
       DEFAULT_TITLE
     ),
     itemGap,
+    titlePosition,
     border: normalizeBorder(args.border)
   };
 }