ggaction 0.0.9 → 0.0.11

package/src/actions/boxPlots/options.js

@@ -15,18 +15,26 @@ export const BOX_PLOT_OPTIONS = Object.freeze([
   "width", "outliers", "box", "median", "outlier", "guides"
 ]);
 
-const DEFAULT_BOX = Object.freeze({
+const DEFAULT_BOX = {
   fill: DEFAULT_COLORS.mark,
   opacity: 1,
   stroke: DEFAULT_COLORS.mark,
   strokeWidth: 1.5
-});
-const DEFAULT_MEDIAN = Object.freeze({ stroke: "#1f2937", strokeWidth: 1.5 });
-const DEFAULT_OUTLIER = Object.freeze({
+};
+const DEFAULT_MEDIAN = { stroke: "#1f2937", strokeWidth: 1.5 };
+const DEFAULT_OUTLIER = {
   shape: "diamond",
   radius: 3,
   opacity: 0.75
-});
+};
+const APPEARANCE_VALIDATORS = {
+  fill: validateNonEmptyString,
+  opacity: validateUnitInterval,
+  stroke: validateNonEmptyString,
+  strokeWidth: validateNonNegativeFinite,
+  shape: validatePointShape,
+  radius: validatePositiveFinite
+};
 
 function plainOptions(value, keys, label, operation = "createBoxPlot") {
   if (value === undefined) return {};
@@ -37,13 +45,29 @@ function plainOptions(value, keys, label, operation = "createBoxPlot") {
   return value;
 }
 
+function resolveAppearance(value, defaults, label, operation) {
+  const options = plainOptions(
+    value,
+    Object.keys(defaults),
+    label,
+    operation
+  );
+  return Object.freeze(Object.fromEntries(
+    Object.entries(defaults).map(([key, fallback]) => [
+      key,
+      options[key] === undefined
+        ? fallback
+        : APPEARANCE_VALIDATORS[key](
+            options[key],
+            `createBoxPlot ${label}.${key}`
+          )
+    ])
+  ));
+}
+
 export function resolveBoxPosition(value, label, operation = "createBoxPlot") {
   if (value === undefined) return undefined;
-  if (!isPlainObject(value)) {
-    throw new TypeError(`${operation} ${label} must be a plain object.`);
-  }
-  validateKeys(value, ["field", "fieldType", "scale"], `${operation} ${label}`);
-  return value;
+  return plainOptions(value, ["field", "fieldType", "scale"], label, operation);
 }
 
 export function boxEncodingArgs(value) {
@@ -61,21 +85,23 @@ export function resolveBoxGuides(value) {
 
 export function resolveBoxWhisker(value, operation = "createBoxPlot") {
   if (value === undefined) return Object.freeze({ type: "tukey", factor: 1.5 });
-  if (!isPlainObject(value)) {
-    throw new TypeError(`${operation} whisker must be a plain object.`);
-  }
-  validateKeys(value, ["type", "factor"], `${operation} whisker`);
-  const type = value.type ?? "tukey";
+  const options = plainOptions(
+    value,
+    ["type", "factor"],
+    "whisker",
+    operation
+  );
+  const type = options.type ?? "tukey";
   if (!["tukey", "minmax"].includes(type)) {
     throw new Error(`Unsupported createBoxPlot whisker type "${type}".`);
   }
   if (type === "minmax") {
-    if (value.factor !== undefined) {
+    if (options.factor !== undefined) {
       throw new Error("createBoxPlot minmax whiskers do not accept factor.");
     }
     return Object.freeze({ type });
   }
-  const factor = value.factor ?? 1.5;
+  const factor = options.factor ?? 1.5;
   if (!Number.isFinite(factor) || factor <= 0) {
     throw new RangeError(
       "createBoxPlot whisker factor must be positive and finite."
@@ -96,70 +122,13 @@ export function resolveBoxWidth(value, operation = "createBoxPlot") {
 }
 
 export function resolveBoxAppearance(value, operation = "createBoxPlot") {
-  const options = plainOptions(
-    value,
-    ["fill", "opacity", "stroke", "strokeWidth"],
-    "box",
-    operation
-  );
-  return Object.freeze({
-    fill: options.fill === undefined
-      ? DEFAULT_BOX.fill
-      : validateNonEmptyString(options.fill, "createBoxPlot box.fill"),
-    opacity: options.opacity === undefined
-      ? DEFAULT_BOX.opacity
-      : validateUnitInterval(options.opacity, "createBoxPlot box.opacity"),
-    stroke: options.stroke === undefined
-      ? DEFAULT_BOX.stroke
-      : validateNonEmptyString(options.stroke, "createBoxPlot box.stroke"),
-    strokeWidth: options.strokeWidth === undefined
-      ? DEFAULT_BOX.strokeWidth
-      : validateNonNegativeFinite(
-          options.strokeWidth,
-          "createBoxPlot box.strokeWidth"
-        )
-  });
+  return resolveAppearance(value, DEFAULT_BOX, "box", operation);
 }
 
 export function resolveBoxMedianAppearance(value, operation = "createBoxPlot") {
-  const options = plainOptions(
-    value,
-    ["stroke", "strokeWidth"],
-    "median",
-    operation
-  );
-  return Object.freeze({
-    stroke: options.stroke === undefined
-      ? DEFAULT_MEDIAN.stroke
-      : validateNonEmptyString(options.stroke, "createBoxPlot median.stroke"),
-    strokeWidth: options.strokeWidth === undefined
-      ? DEFAULT_MEDIAN.strokeWidth
-      : validateNonNegativeFinite(
-          options.strokeWidth,
-          "createBoxPlot median.strokeWidth"
-        )
-  });
+  return resolveAppearance(value, DEFAULT_MEDIAN, "median", operation);
 }
 
 export function resolveBoxOutlierAppearance(value, operation = "createBoxPlot") {
-  const options = plainOptions(
-    value,
-    ["shape", "radius", "opacity"],
-    "outlier",
-    operation
-  );
-  return Object.freeze({
-    shape: options.shape === undefined
-      ? DEFAULT_OUTLIER.shape
-      : validatePointShape(options.shape),
-    radius: options.radius === undefined
-      ? DEFAULT_OUTLIER.radius
-      : validatePositiveFinite(options.radius, "createBoxPlot outlier.radius"),
-    opacity: options.opacity === undefined
-      ? DEFAULT_OUTLIER.opacity
-      : validateUnitInterval(
-          options.opacity,
-          "createBoxPlot outlier.opacity"
-        )
-  });
+  return resolveAppearance(value, DEFAULT_OUTLIER, "outlier", operation);
 }

package/src/actions/boxPlots/resolve.js

@@ -1,7 +1,7 @@
 import { resolveOptionalUserId, validateUserId } from "../../core/identifiers.js";
 import { findLayer, hasLayer } from "../../selectors/layers.js";
 
-const CATEGORY_TYPES = Object.freeze(["nominal", "ordinal", "temporal"]);
+const CATEGORY_TYPES = Object.freeze(["nominal", "ordinal"]);
 
 export function resolveBoxOrientation(x, y) {
   const xType = x?.fieldType ?? "quantitative";

package/src/actions/charts/bar.js

@@ -1,6 +1,7 @@
 import { action } from "../../core/action.js";
 import {
   applyFacadeGuides,
+  inferFacadeFieldType,
   normalizeAppearance,
   normalizeEncoding,
   normalizeFieldEncoding,
@@ -35,6 +36,8 @@ export const createBarPlot = action(
     const bar = normalizeAppearance(args.bar, BAR_OPTIONS, "createBarPlot bar");
     const x = normalizeFieldEncoding(args.x, "createBarPlot x");
     const y = normalizeFieldEncoding(args.y, "createBarPlot y");
+    x.fieldType = inferFacadeFieldType(this, data, x, "createBarPlot x");
+    y.fieldType = inferFacadeFieldType(this, data, y, "createBarPlot y");
     const color = normalizeEncoding(args.color, "createBarPlot color");
     const width = normalizeTargetOptions(args.width, "createBarPlot width");
     const guides = normalizeGuides(args.guides, "createBarPlot");

package/src/actions/charts/heatmap.js

@@ -17,41 +17,43 @@ import {
   validateFacadeOptions
 } from "./shared.js";
 
-const OPTIONS = Object.freeze([
+const OPERATION = "createHeatmap";
+const OPTIONS = [
   "id", "data", "coordinate", "x", "y", "bin", "color", "rect", "guides"
-]);
-const RECT_OPTIONS = Object.freeze([
+];
+const RECT_OPTIONS = [
   "opacity", "stroke", "strokeWidth"
-]);
-const BIN_OPTIONS = Object.freeze([
+];
+const BIN_OPTIONS = [
   "bins", "extent", "includeEmpty"
-]);
-const BINNED_POSITION_OPTIONS = Object.freeze([
+];
+const BINNED_POSITION_OPTIONS = [
   "field", "fieldType", "scale"
-]);
-const BINNED_COLOR_OPTIONS = Object.freeze([
+];
+const BINNED_COLOR_OPTIONS = [
   "scale", "palette"
-]);
+];
 
 function normalizeBin(value) {
   if (!isPlainObject(value)) {
-    throw new TypeError("createHeatmap bin must be a plain object.");
+    throw new TypeError(`${OPERATION} bin must be a plain object.`);
   }
-  validateOptionObject(value, BIN_OPTIONS, "createHeatmap bin");
+  validateOptionObject(value, BIN_OPTIONS, `${OPERATION} bin`);
   return {
     ...value,
     includeEmpty: value.includeEmpty ?? true
   };
 }
 
-function normalizeBinnedPosition(value, channel) {
-  const label = `createHeatmap ${channel}`;
+function normalizePosition(value, channel, categorical = false) {
+  const label = `${OPERATION} ${channel}`;
   const encoding = normalizeFieldEncoding(value, label);
   validateOptionObject(encoding, BINNED_POSITION_OPTIONS, label);
   const field = validateNonEmptyString(encoding.field, `${label} field`);
-  const fieldType = encoding.fieldType ?? "quantitative";
-  if (fieldType !== "quantitative") {
-    throw new Error(`${label} requires a quantitative field.`);
+  const types = categorical ? ["nominal", "ordinal"] : ["quantitative"];
+  const fieldType = encoding.fieldType ?? types[0];
+  if (!types.includes(fieldType)) {
+    throw new Error(`${label} requires a ${categorical ? "categorical" : "quantitative"} field.`);
   }
   if (encoding.scale !== undefined && !isPlainObject(encoding.scale)) {
     throw new TypeError(`${label} scale must be a plain object.`);
@@ -62,9 +64,9 @@ function normalizeBinnedPosition(value, channel) {
 function normalizeBinnedColor(value) {
   if (value === undefined) return {};
   if (!isPlainObject(value)) {
-    throw new TypeError("createHeatmap binned color must be a plain object.");
+    throw new TypeError(`${OPERATION} binned color must be a plain object.`);
   }
-  validateOptionObject(value, BINNED_COLOR_OPTIONS, "createHeatmap binned color");
+  validateOptionObject(value, BINNED_COLOR_OPTIONS, `${OPERATION} binned color`);
   return { ...value };
 }
 
@@ -76,7 +78,7 @@ function resolvedPosition(encoding, field, extent) {
     scale: {
       type: "linear",
       nice: false,
-      zero: false,
+      ...(scale.type !== "log" && { zero: false }),
       ...scale,
       domain: scale.domain === undefined || scale.domain === "auto"
         ? extent
@@ -88,10 +90,10 @@ function resolvedPosition(encoding, field, extent) {
 function axisWithTitle(value, text) {
   if (value === false) return false;
   if (value !== undefined && !isPlainObject(value)) {
-    throw new TypeError("createHeatmap binned axis must be false or a plain object.");
+    throw new TypeError(`${OPERATION} binned axis must be false or a plain object.`);
   }
   if (value?.title !== undefined && !isPlainObject(value.title)) {
-    throw new TypeError("createHeatmap binned axis title must be a plain object.");
+    throw new TypeError(`${OPERATION} binned axis title must be a plain object.`);
   }
   return {
     ...value,
@@ -111,7 +113,7 @@ function binnedGuides(guides, xTitle, yTitle) {
       !isPlainObject(guides[key])
     ) {
       throw new TypeError(
-        `createHeatmap guides ${key} must be false or a plain object.`
+        `${OPERATION} guides ${key} must be false or a plain object.`
       );
     }
   }
@@ -133,73 +135,61 @@ function binnedGuides(guides, xTitle, yTitle) {
   };
 }
 
-function createPreGriddedHeatmap(program, args, { id, data, rect, guides }) {
-  const x = normalizeFieldEncoding(args.x, "createHeatmap x");
-  const y = normalizeFieldEncoding(args.y, "createHeatmap y");
-  const color = normalizeFieldEncoding(args.color, "createHeatmap color");
-  const next = program
-    .createRectMark({ id, data, ...rect })
-    .encodeX(positionArgs(x, { target: id, coordinate: args.coordinate }))
-    .encodeY(positionArgs(y, { target: id, coordinate: args.coordinate }))
-    .encodeColor(targetArgs(color, id));
-  return applyFacadeGuides(next, guides);
-}
-
-function createBinnedHeatmap(program, args, { id, data, rect, guides }) {
-  const x = normalizeBinnedPosition(args.x, "x");
-  const y = normalizeBinnedPosition(args.y, "y");
-  const bin = normalizeBin(args.bin);
-  const color = normalizeBinnedColor(args.color);
-  const resolvedGuides = binnedGuides(guides, x.field, y.field);
-  const generatedData = `${id}Bin2DData`;
-  const binned = program.createBin2DData({
-    id: generatedData,
-    source: data,
-    x: x.field,
-    y: y.field,
-    ...bin
-  });
-  const dataset = requireDataset(binned, generatedData);
-  const transform = dataset.transform[0];
-  const resolved = transform.resolved;
-  const xEncoding = resolvedPosition(x, transform.as.x0, resolved.extent.x);
-  const yEncoding = resolvedPosition(y, transform.as.y0, resolved.extent.y);
-
-  const next = binned
-    .createRectMark({ id, data: generatedData, ...rect })
-    .encodeX(positionArgs(xEncoding, { target: id, coordinate: args.coordinate }))
-    .encodeX2({ target: id, field: transform.as.x1, fieldType: "quantitative" })
-    .encodeY(positionArgs(yEncoding, { target: id, coordinate: args.coordinate }))
-    .encodeY2({ target: id, field: transform.as.y1, fieldType: "quantitative" })
-    .encodeColor({
-      target: id,
-      field: transform.as.count,
-      fieldType: "quantitative",
-      ...color
-    });
-  return applyFacadeGuides(
-    next,
-    resolvedGuides
-  );
-}
-
 export const createHeatmap = action(
   {
-    op: "createHeatmap",
+    op: OPERATION,
     description: "Create a pre-gridded or rectangularly binned heatmap."
   },
   function (args = {}) {
-    validateFacadeOptions(args, OPTIONS, "createHeatmap");
+    validateFacadeOptions(args, OPTIONS, OPERATION);
     const id = resolveFacadeId(this, args.id, {
       defaultId: "heatmap",
-      operation: "createHeatmap"
+      operation: OPERATION
+    });
+    const data = resolveFacadeData(this, args.data, OPERATION);
+    const rect = normalizeAppearance(args.rect, RECT_OPTIONS, `${OPERATION} rect`);
+    const guides = normalizeGuides(args.guides, OPERATION);
+    if (args.bin === undefined) {
+      const x = normalizePosition(args.x, "x", true);
+      const y = normalizePosition(args.y, "y", true);
+      const color = normalizeFieldEncoding(args.color, `${OPERATION} color`);
+      const next = this
+        .createRectMark({ id, data, ...rect })
+        .encodeX(positionArgs(x, { target: id, coordinate: args.coordinate }))
+        .encodeY(positionArgs(y, { target: id, coordinate: args.coordinate }))
+        .encodeColor(targetArgs(color, id));
+      return applyFacadeGuides(next, guides);
+    }
+
+    const x = normalizePosition(args.x, "x");
+    const y = normalizePosition(args.y, "y");
+    const bin = normalizeBin(args.bin);
+    const color = normalizeBinnedColor(args.color);
+    const resolvedGuides = binnedGuides(guides, x.field, y.field);
+    const generatedData = `${id}Bin2DData`;
+    const binned = this.createBin2DData({
+      id: generatedData,
+      source: data,
+      x: x.field,
+      y: y.field,
+      ...bin
     });
-    const data = resolveFacadeData(this, args.data, "createHeatmap");
-    const rect = normalizeAppearance(args.rect, RECT_OPTIONS, "createHeatmap rect");
-    const guides = normalizeGuides(args.guides, "createHeatmap");
-    const shared = { id, data, rect, guides };
-    return args.bin === undefined
-      ? createPreGriddedHeatmap(this, args, shared)
-      : createBinnedHeatmap(this, args, shared);
+    const transform = requireDataset(binned, generatedData).transform[0];
+    const resolved = transform.resolved;
+    const xEncoding = resolvedPosition(x, transform.as.x0, resolved.extent.x);
+    const yEncoding = resolvedPosition(y, transform.as.y0, resolved.extent.y);
+    const next = binned
+      .createRectMark({ id, data: generatedData, ...rect })
+      .encodeX(positionArgs(xEncoding, { target: id, coordinate: args.coordinate }))
+      .encodeX2({ target: id, field: transform.as.x1, fieldType: "quantitative" })
+      .encodeY(positionArgs(yEncoding, { target: id, coordinate: args.coordinate }))
+      .encodeY2({ target: id, field: transform.as.y1, fieldType: "quantitative" })
+      .encodeColor({
+        target: id,
+        field: transform.as.count,
+        fieldType: "quantitative",
+        ...color
+      });
+    return applyFacadeGuides(next, resolvedGuides);
   }
 );

package/src/actions/charts/index.js

@@ -1,5 +1,5 @@
-import { createBarPlot } from "./bar.js";
 import { createHeatmap } from "./heatmap.js";
+import { createBarPlot } from "./bar.js";
 import { createHistogram } from "./histogram.js";
 import { createLinePlot } from "./line.js";
 import { createScatterPlot } from "./scatter.js";

package/src/actions/charts/parallel.js

@@ -20,6 +20,37 @@ const LINE_OPTIONS = Object.freeze([
   "strokeWidth", "stroke", "opacity", "curve", "closed"
 ]);
 
+function scopeParallelGuides(guides, coordinate) {
+  if (guides === false) return guides;
+  if (guides.grid !== undefined && guides.grid !== false) {
+    throw new Error("createParallelCoordinates guides do not accept grid options.");
+  }
+  if (guides.axes === false) return guides;
+  const axes = guides.axes ?? {};
+  const descriptor = axes.coordinate ?? {};
+  if (
+    descriptor.id !== undefined && descriptor.id !== coordinate ||
+    descriptor.type !== undefined &&
+      descriptor.type !== "auto" && descriptor.type !== "parallel"
+  ) {
+    throw new Error(
+      "createParallelCoordinates guides must use the chart's Parallel coordinate."
+    );
+  }
+  if (["x", "y", "theta", "radius"].some(channel => axes[channel] !== undefined)) {
+    throw new Error(
+      "createParallelCoordinates guides do not accept Cartesian or Polar axis channels."
+    );
+  }
+  return {
+    ...guides,
+    axes: {
+      ...axes,
+      coordinate: { ...descriptor, id: coordinate, type: "parallel" }
+    }
+  };
+}
+
 export const createParallelCoordinates = action(
   {
     op: "createParallelCoordinates",
@@ -55,7 +86,10 @@ export const createParallelCoordinates = action(
       args.strokeDash,
       "createParallelCoordinates strokeDash"
     );
-    const guides = normalizeGuides(args.guides, "createParallelCoordinates");
+    const guides = scopeParallelGuides(
+      normalizeGuides(args.guides, "createParallelCoordinates"),
+      coordinate
+    );
 
     let next = this
       .createCoordinate({ id: coordinate, type: "parallel" })

package/src/actions/charts/shared.js

@@ -2,6 +2,7 @@ import { resolveOptionalUserId, validateUserId } from "../../core/identifiers.js
 import { isPlainObject } from "../../core/immutable.js";
 import { validateOptionObject } from "../../core/validation.js";
 import { findDataset } from "../../selectors/datasets.js";
+import { isNominalValue } from "../../grammar/scales/fields.js";
 import { hasLayer } from "../../selectors/layers.js";
 
 export function validateFacadeOptions(args, supported, operation) {
@@ -62,6 +63,25 @@ export function normalizeEncoding(value, label) {
   return normalizeFieldEncoding(value, label);
 }
 
+export function inferFacadeFieldType(program, data, encoding, label) {
+  if (encoding.fieldType !== undefined) return encoding.fieldType;
+  if (typeof encoding.field !== "string" || encoding.field.length === 0) {
+    throw new TypeError(`${label} field must be a non-empty string.`);
+  }
+  const dataset = findDataset(program, data);
+  const values = dataset.values
+    .map(row => row?.[encoding.field])
+    .filter(value => value !== undefined && value !== null && value !== "");
+  if (values.length === 0) {
+    throw new Error(`${label} field "${encoding.field}" has no values.`);
+  }
+  if (values.every(Number.isFinite)) return "quantitative";
+  if (values.every(isNominalValue)) return "nominal";
+  throw new Error(
+    `${label} field "${encoding.field}" requires an explicit fieldType.`
+  );
+}
+
 export function normalizeStrokeDashEncoding(
   value,
   label = "createLinePlot strokeDash"

package/src/actions/composition/actions.js

@@ -21,6 +21,10 @@ const LAYOUT_EDIT_OPTIONS = Object.freeze([
 ]);
 const REPLACEMENT_OPTIONS = Object.freeze(["target", "program"]);
 
+function option(args, name, fallback) {
+  return Object.hasOwn(args, name) ? args[name] : fallback;
+}
+
 function normalizeChildEntry(entry, index) {
   const fallbackId = `view-${index + 1}`;
   if (entry instanceof CoreChartProgram) {
@@ -64,7 +68,11 @@ function childDescriptor({ id, program }) {
 }
 
 function normalizeCompositionInput(args, direction) {
-  validateOptionObject(args, CONCAT_OPTIONS, direction === "horizontal" ? "hconcat" : "vconcat");
+  validateOptionObject(
+    args,
+    CONCAT_OPTIONS,
+    direction === "horizontal" ? "hconcat" : "vconcat"
+  );
   if (!Array.isArray(args.programs) || args.programs.length < 2) {
     throw new TypeError("Composition requires at least two programs.");
   }
@@ -98,6 +106,12 @@ function normalizeCompositionInput(args, direction) {
   };
 }
 
+export function applyCompositionState(program, state, tracedChildren = []) {
+  let next = program._withCompositionState(state);
+  for (const id of tracedChildren) next = next.useProgram({ id });
+  return next.materializeComposition();
+}
+
 const useProgram = action(
   {
     op: "useProgram",
@@ -136,11 +150,7 @@ function concatAction(direction, op) {
     },
     function (args = {}) {
       const state = normalizeCompositionInput(args, direction);
-      let next = this._withCompositionState(state);
-      for (const id of state.compositionSpec.children) {
-        next = next.useProgram({ id });
-      }
-      return next.materializeComposition();
+      return applyCompositionState(this, state, state.compositionSpec.children);
     }
   );
 }
@@ -160,60 +170,49 @@ const editCompositionLayout = action(
       throw new TypeError("editCompositionLayout requires at least one layout option.");
     }
     const current = this.compositionSpec;
+    if (current.type !== "facet" && Object.hasOwn(args, "columns")) {
+      throw new Error(
+        "editCompositionLayout columns is available only on a facet composition."
+      );
+    }
+    const padding = Object.hasOwn(args, "padding")
+      ? normalizeCompositionPadding(args.padding, current.padding)
+      : current.padding;
+    let layout;
     if (current.type === "facet") {
-      const layout = resolveFacetLayout({
+      layout = resolveFacetLayout({
         children: current.children.map((id, index) => ({
           ...childDescriptor({ id, program: this.children[id] }),
           value: current.facet.values[index]
         })),
-        columns: Object.hasOwn(args, "columns")
-          ? args.columns
-          : current.columns,
-        gap: Object.hasOwn(args, "gap") ? args.gap : current.gap,
-        align: Object.hasOwn(args, "align") ? args.align : current.align,
-        padding: Object.hasOwn(args, "padding")
-          ? normalizeCompositionPadding(args.padding, current.padding)
-          : current.padding,
+        columns: option(args, "columns", current.columns),
+        gap: option(args, "gap", current.gap),
+        align: option(args, "align", current.align),
+        padding,
         sharedLegend: current.facet.guides.legend === "shared"
       });
-      return this._withCompositionState({
-        children: this.children,
-        compositionSpec: {
-          ...current,
-          columns: layout.columns,
-          gap: layout.gap,
-          align: layout.align,
-          padding: layout.padding
-        }
-      }).materializeComposition();
-    }
-    if (Object.hasOwn(args, "columns")) {
-      throw new Error(
-        "editCompositionLayout columns is available only on a facet composition."
-      );
+    } else {
+      layout = resolveCompositionLayout({
+        direction: current.direction,
+        children: current.children.map(id => childDescriptor({
+          id,
+          program: this.children[id]
+        })),
+        gap: option(args, "gap", current.gap),
+        align: option(args, "align", current.align),
+        padding
+      });
     }
-    const padding = Object.hasOwn(args, "padding")
-      ? normalizeCompositionPadding(args.padding, current.padding)
-      : current.padding;
-    const layout = resolveCompositionLayout({
-      direction: current.direction,
-      children: current.children.map(id => childDescriptor({
-        id,
-        program: this.children[id]
-      })),
-      gap: Object.hasOwn(args, "gap") ? args.gap : current.gap,
-      align: Object.hasOwn(args, "align") ? args.align : current.align,
-      padding
-    });
-    return this._withCompositionState({
+    return applyCompositionState(this, {
       children: this.children,
       compositionSpec: {
         ...current,
+        ...(current.type === "facet" ? { columns: layout.columns } : {}),
         gap: layout.gap,
         align: layout.align,
         padding: layout.padding
       }
-    }).materializeComposition();
+    });
   }
 );
 
@@ -240,12 +239,10 @@ const replaceCompositionChild = action(
       ...this.children,
       [target]: args.program
     });
-    return this._withCompositionState({
+    return applyCompositionState(this, {
       children,
       compositionSpec: this.compositionSpec
-    })
-      .useProgram({ id: target })
-      .materializeComposition();
+    }, [target]);
   }
 );