ggaction 0.0.13 → 0.0.16

package/src/actions/selection/actions.js

@@ -1,8 +1,10 @@
-import { action } from "../../core/action.js";
+import { action, closedAction } from "../../core/action.js";
 import { validateUserId } from "../../core/identifiers.js";
 import { isPlainObject } from "../../core/immutable.js";
 import { validateKeys } from "../../core/validation.js";
-import { resolveEligibleLayer } from "../../selectors/layers.js";
+import { collectResourceReferences } from "../../core/resourceReferences.js";
+import { findLayer, resolveEligibleLayer } from "../../selectors/layers.js";
+import { isSourceOwnedText } from "../../grammar/text.js";
 import { transformPointHighlightChild } from "../../materialization/selection/point.js";
 import {
   transformPathHighlightProperties,
@@ -22,6 +24,10 @@ import {
   normalizeDimOthers,
   validateUnitInterval
 } from "../../materialization/selection/styles.js";
+import {
+  normalizeThemeState,
+  resolveEffectiveThemeTokens
+} from "../theme/state.js";
 
 const SELECTOR_KEYS = Object.freeze([
   "grain", "field", "channel", "property", "op", "value", "values", "min", "max",
@@ -58,32 +64,38 @@ function resolveTarget(program, target, label = "mark selection") {
 }
 
 function hasLegendSelection(program, target, selection) {
-  const legend = program.guideConfigs.legend?.series ??
-    program.guideConfigs.legend?.color;
   const selector = program.materializationConfigs.selections?.[selection]?.selector;
-  return legend?.target === target &&
-    selector?.field !== undefined &&
-    selector.field === legend.field;
+  const layer = findLayer(program, target);
+  const field = selector?.field ?? layer?.encoding?.[selector?.channel]?.field;
+  if (field === undefined) return false;
+  return ["series", "color", "stroke"].some(kind => {
+    const legend = program.guideConfigs.legend?.[kind];
+    return legend?.target === target && legend.field === field &&
+      (selector?.channel === undefined || legend.channels.includes(selector.channel));
+  });
 }
 
-function categoricalLegendKind(program, target) {
-  return ["series", "color"].find(
+function categoricalLegendKinds(program, target) {
+  return ["series", "color", "stroke"].filter(
     kind => program.guideConfigs.legend?.[kind]?.target === target
   );
 }
 
 function resetCategoricalLegendSymbols(program, target) {
-  const kind = categoricalLegendKind(program, target);
-  if (kind === undefined) return program;
+  const kinds = categoricalLegendKinds(program, target);
+  if (kinds.length === 0) return program;
   let next = program;
-  for (const id of legendGraphicIds(kind).filter(id => id.includes("Symbol"))) {
-    const graphic = next.graphicSpec.objects[id];
-    if (graphic === undefined) continue;
-    next = graphic.type === "collection"
-      ? next.editGraphics({ target: id, property: "items", value: [] })
-      : next.editGraphics({ target: id, property: "length", value: 0 });
+  for (const kind of kinds) {
+    for (const id of legendGraphicIds(kind).filter(id => id.includes("Symbol"))) {
+      const graphic = next.graphicSpec.objects[id];
+      if (graphic === undefined) continue;
+      next = graphic.type === "collection"
+        ? next.editGraphics({ target: id, property: "items", value: [] })
+        : next.editGraphics({ target: id, property: "length", value: 0 });
+    }
+    next = next.rematerializeLegendSymbols({ kind });
   }
-  return next.rematerializeLegendSymbols();
+  return next;
 }
 
 function targetHighlightEntries(program, target) {
@@ -91,7 +103,32 @@ function targetHighlightEntries(program, target) {
     .filter(([, config]) => config.target === target);
 }
 
-function rebuildTargetHighlights(program, target) {
+function namedLabelDependents(program, selection) {
+  const referenced = new Set(collectResourceReferences(program, {
+    kind: "selection",
+    id: selection
+  }).filter(reference =>
+    reference.ownerKind === "markConfig" &&
+    reference.path.join(".") === "labelAuthoring.selection.id"
+  ).map(reference => reference.ownerId));
+  return Object.entries(program.markConfigs)
+    .filter(([id, config]) => {
+      const layer = findLayer(program, id);
+      return isSourceOwnedText(layer) &&
+        config?.labelAuthoring?.selection?.kind === "named" &&
+        referenced.has(id);
+    })
+    .map(([id]) => id)
+    .sort();
+}
+
+function rematerializeLabels(program, ids) {
+  let next = program;
+  for (const id of ids) next = next.rematerializeTextMark({ id });
+  return next;
+}
+
+function rebuildTargetHighlights(program, target, { labels = [] } = {}) {
   const layer = resolveTarget(program, target, "highlight mark");
   const highlights = targetHighlightEntries(program, target);
   let baseline = program;
@@ -105,12 +142,26 @@ function rebuildTargetHighlights(program, target) {
   baseline = baseline[requireSelectionPolicy(
     layer.mark.type
   ).rematerializeOp]({ id: target });
+  baseline = rematerializeLabels(baseline, labels);
   baseline = resetCategoricalLegendSymbols(baseline, target);
   return highlights.length === 0
     ? baseline
     : baseline.rematerializeMarkHighlights({ target, highlights });
 }
 
+export function rematerializeLabelsBeforeHighlights(
+  program,
+  target,
+  labels,
+  { skipWithoutHighlights = false } = {}
+) {
+  return targetHighlightEntries(program, target).length === 0
+    ? skipWithoutHighlights
+      ? program
+      : rematerializeLabels(program, labels)
+    : rebuildTargetHighlights(program, target, { labels });
+}
+
 function selectedKeys(args, resolved) {
   if (args.keys === undefined) return resolved.keys;
   if (!Array.isArray(args.keys) || !args.keys.every(key =>
@@ -155,9 +206,10 @@ function editSelectedItems(
 }
 
 function applyHighlight(program, config, keys) {
+  const style = resolveHighlightStyle(program, config);
   let next = program[requireSelectionPolicy(config.markType).applyHighlightOp]({
     selection: config.selection,
-    style: config.style,
+    style,
     keys
   });
   if (config.dimOthers !== false) {
@@ -172,10 +224,63 @@ function applyHighlight(program, config, keys) {
     : next;
 }
 
-export const selectMarks = action(
-  { op: "selectMarks", description: "Create one reusable selection over final mark items." },
+function highlightPaintProperty(markType) {
+  return ["line", "rule", "tick"].includes(markType) ? "stroke" : "fill";
+}
+
+function requestedPaintSource(args, markType, style) {
+  const property = highlightPaintProperty(markType);
+  const explicit = args.color !== undefined || args[property] !== undefined;
+  if (explicit) return "explicit";
+  return Object.hasOwn(style, property) ? "theme" : "preserve";
+}
+
+function tracePaintSource(program, id, config) {
+  let source;
+  for (const node of program.trace.children) {
+    if (node.op !== "highlightMarks") continue;
+    const requestedId = node.args.selection ?? node.args.id ??
+      `${node.args.target ?? config.target}Selection`;
+    if (requestedId !== id) continue;
+    const property = highlightPaintProperty(config.markType);
+    const explicit = node.args.color !== undefined ||
+      node.args[property] !== undefined;
+    source = explicit
+      ? "explicit"
+      : Object.hasOwn(config.style, property) ? "theme" : "preserve";
+  }
+  return source ?? "explicit";
+}
+
+function normalizeStoredHighlightConfig(program, id, config) {
+  return config.paintSource === undefined
+    ? { ...config, paintSource: tracePaintSource(program, id, config) }
+    : config;
+}
+
+function resolveHighlightStyle(program, config) {
+  if (config.paintSource !== "theme") return config.style;
+  const property = highlightPaintProperty(config.markType);
+  return {
+    ...config.style,
+    [property]: resolveEffectiveThemeTokens(normalizeThemeState(
+      program.materializationConfigs.theme
+    )).highlight
+  };
+}
+
+export function rematerializeThemeHighlights(program) {
+  const targets = [...new Set(Object.values(
+    program.materializationConfigs.highlights ?? {}
+  ).map(config => config.target))];
+  let next = program;
+  for (const target of targets) next = rebuildTargetHighlights(next, target);
+  return next;
+}
+
+export const selectMarks = /* @__PURE__ */ closedAction(
+  { op: "selectMarks", description: "Create one reusable selection over final mark items." }, SELECT_OPTIONS,
   function (args = {}) {
-    validateKeys(args, SELECT_OPTIONS, "selectMarks");
     const layer = resolveTarget(this, args.target);
     const resolved = resolveMarkSelection(this, layer.id, selectorFrom(args));
     const id = resolveSelectionCreationId(this, args.id, layer.id);
@@ -185,20 +290,19 @@ export const selectMarks = action(
   }
 );
 
-export const editMarkSelection = action(
+export const editMarkSelection = /* @__PURE__ */ closedAction(
   {
     op: "editMarkSelection",
     description: "Replace one stored mark selector while preserving its identity and target."
-  },
+  }, EDIT_SELECTION_OPTIONS,
   function (args = {}) {
-    validateKeys(args, EDIT_SELECTION_OPTIONS, "editMarkSelection");
     const current = resolveStoredSelection(this, args.selection);
     const replacement = resolveMarkSelection(
       this,
       current.definition.target,
       selectorFrom(args)
     );
-    const next = this
+    let next = this
       ._withSelectionConfig(current.id, {
         target: current.definition.target,
         selector: replacement.selector
@@ -207,19 +311,24 @@ export const editMarkSelection = action(
     const hasDependentHighlight = Object.values(
       next.materializationConfigs.highlights ?? {}
     ).some(config => config.selection === current.id);
-    return hasDependentHighlight
-      ? rebuildTargetHighlights(next, current.definition.target)
-      : next;
+    const labels = namedLabelDependents(this, current.id);
+    if (hasDependentHighlight) {
+      return rematerializeLabelsBeforeHighlights(
+        next,
+        current.definition.target,
+        labels
+      );
+    }
+    return rematerializeLabels(next, labels);
   }
 );
 
-export const removeMarkHighlight = action(
+export const removeMarkHighlight = /* @__PURE__ */ closedAction(
   {
     op: "removeMarkHighlight",
     description: "Remove one stored highlight assignment and restore the clean mark baseline."
-  },
+  }, REMOVE_SELECTION_OPTIONS,
   function (args = {}) {
-    validateKeys(args, REMOVE_SELECTION_OPTIONS, "removeMarkHighlight");
     const current = resolveStoredSelection(this, args.selection);
     const dependent = Object.entries(
       this.materializationConfigs.highlights ?? {}
@@ -237,14 +346,19 @@ export const removeMarkHighlight = action(
   }
 );
 
-export const removeMarkSelection = action(
+export const removeMarkSelection = /* @__PURE__ */ closedAction(
   {
     op: "removeMarkSelection",
     description: "Remove one stored selection after removing its dependent highlight."
-  },
+  }, REMOVE_SELECTION_OPTIONS,
   function (args = {}) {
-    validateKeys(args, REMOVE_SELECTION_OPTIONS, "removeMarkSelection");
     const current = resolveStoredSelection(this, args.selection);
+    const labelDependents = namedLabelDependents(this, current.id);
+    if (labelDependents.length > 0) {
+      throw new Error(
+        `Selection "${current.id}" is referenced by attached labels: ${labelDependents.join(", ")}.`
+      );
+    }
     const hasDependentHighlight = Object.values(
       this.materializationConfigs.highlights ?? {}
     ).some(config => config.selection === current.id);
@@ -258,10 +372,9 @@ export const removeMarkSelection = action(
   }
 );
 
-export const applyPointHighlight = action(
-  { op: "applyPointHighlight", description: "Apply selected point appearance and geometry." },
+export const applyPointHighlight = /* @__PURE__ */ closedAction(
+  { op: "applyPointHighlight", description: "Apply selected point appearance and geometry." }, INTERNAL_SELECTION_OPTIONS,
   function (args = {}) {
-    validateKeys(args, INTERNAL_SELECTION_OPTIONS, "applyPointHighlight");
     const resolved = resolveStoredSelection(this, args.selection);
     const keys = selectedKeys(args, resolved);
     if (resolved.items[0]?.markType !== "point" && resolved.items.length > 0) {
@@ -287,6 +400,15 @@ function transformRectangularProperties(properties, style, offset = false) {
   };
 }
 
+function transformRectangularHighlightChild(item, style, offset) {
+  return {
+    ...item,
+    properties: item.type === "path"
+      ? transformPathHighlightProperties(item.properties, style)
+      : transformRectangularProperties(item.properties, style, offset)
+  };
+}
+
 function applyRectangularHighlight(
   program,
   args,
@@ -301,22 +423,18 @@ function applyRectangularHighlight(
     throw new Error(`${operation} requires a ${markType} selection.`);
   }
   if (keys.length === 0) return program;
-  return editSelectedItems(program, resolved, keys, item => ({
-    ...item,
-    properties: transformRectangularProperties(
-      item.properties, args.style, offset
-    )
-  }));
+  return editSelectedItems(program, resolved, keys, item =>
+    transformRectangularHighlightChild(item, args.style, offset));
 }
 
-export const applyBarHighlight = action(
+export const applyBarHighlight = /* @__PURE__ */ action(
   { op: "applyBarHighlight", description: "Apply selected bar appearance." },
   function (args = {}) {
     return applyRectangularHighlight(this, args, "applyBarHighlight", "bar");
   }
 );
 
-export const applyRectHighlight = action(
+export const applyRectHighlight = /* @__PURE__ */ action(
   { op: "applyRectHighlight", description: "Apply selected rect appearance." },
   function (args = {}) {
     return applyRectangularHighlight(
@@ -329,10 +447,9 @@ export const applyRectHighlight = action(
   }
 );
 
-export const applyPathHighlight = action(
-  { op: "applyPathHighlight", description: "Apply selected line or area path appearance and offset." },
+export const applyPathHighlight = /* @__PURE__ */ closedAction(
+  { op: "applyPathHighlight", description: "Apply selected line or area path appearance and offset." }, INTERNAL_SELECTION_OPTIONS,
   function (args = {}) {
-    validateKeys(args, INTERNAL_SELECTION_OPTIONS, "applyPathHighlight");
     const resolved = resolveStoredSelection(this, args.selection);
     const keys = selectedKeys(args, resolved);
     const markType = resolved.items[0]?.markType;
@@ -350,10 +467,9 @@ export const applyPathHighlight = action(
   }
 );
 
-export const applyRuleHighlight = action(
-  { op: "applyRuleHighlight", description: "Apply selected rule appearance and offset." },
+export const applyRuleHighlight = /* @__PURE__ */ closedAction(
+  { op: "applyRuleHighlight", description: "Apply selected rule appearance and offset." }, INTERNAL_SELECTION_OPTIONS,
   function (args = {}) {
-    validateKeys(args, INTERNAL_SELECTION_OPTIONS, "applyRuleHighlight");
     const resolved = resolveStoredSelection(this, args.selection);
     const keys = selectedKeys(args, resolved);
     if (
@@ -370,10 +486,9 @@ export const applyRuleHighlight = action(
   }
 );
 
-export const dimUnselectedMarkItems = action(
-  { op: "dimUnselectedMarkItems", description: "Dim the complement of one mark selection." },
+export const dimUnselectedMarkItems = /* @__PURE__ */ closedAction(
+  { op: "dimUnselectedMarkItems", description: "Dim the complement of one mark selection." }, INTERNAL_DIM_OPTIONS,
   function (args = {}) {
-    validateKeys(args, INTERNAL_DIM_OPTIONS, "dimUnselectedMarkItems");
     const opacity = validateUnitInterval(args.opacity, "Dim opacity");
     const resolved = resolveStoredSelection(this, args.selection);
     const keys = selectedKeys(args, resolved);
@@ -384,10 +499,9 @@ export const dimUnselectedMarkItems = action(
   }
 );
 
-export const placeSelectedMarkItemsLast = action(
-  { op: "placeSelectedMarkItemsLast", description: "Place selected collection items after their complement." },
+export const placeSelectedMarkItemsLast = /* @__PURE__ */ closedAction(
+  { op: "placeSelectedMarkItemsLast", description: "Place selected collection items after their complement." }, INTERNAL_ORDER_OPTIONS,
   function (args = {}) {
-    validateKeys(args, INTERNAL_ORDER_OPTIONS, "placeSelectedMarkItemsLast");
     const resolved = resolveStoredSelection(this, args.selection);
     const keys = selectedKeys(args, resolved);
     if (keys.length === 0 || keys.length === resolved.items.length) {
@@ -405,17 +519,16 @@ export const placeSelectedMarkItemsLast = action(
   }
 );
 
-export const rematerializeMarkHighlights = action(
-  { op: "rematerializeMarkHighlights", description: "Reapply stored highlight assignments to one rematerialized mark." },
+export const rematerializeMarkHighlights = /* @__PURE__ */ closedAction(
+  { op: "rematerializeMarkHighlights", description: "Reapply stored highlight assignments to one rematerialized mark." }, REMATERIALIZE_OPTIONS,
   function (args = {}) {
-    validateKeys(args, REMATERIALIZE_OPTIONS, "rematerializeMarkHighlights");
     validateUserId(args.target, "Highlight target id");
     if (!Array.isArray(args.highlights)) {
       throw new TypeError("rematerializeMarkHighlights requires highlight entries.");
     }
     const prepared = args.highlights.map(([id, config]) => ({
       id,
-      config,
+      config: normalizeStoredHighlightConfig(this, id, config),
       keys: resolveStoredSelection(this, config.selection).keys
     }));
     let next = this;
@@ -430,10 +543,9 @@ export const rematerializeMarkHighlights = action(
   }
 );
 
-export const highlightMarks = action(
-  { op: "highlightMarks", description: "Select and emphasize final visual mark items." },
+export const highlightMarks = /* @__PURE__ */ closedAction(
+  { op: "highlightMarks", description: "Select and emphasize final visual mark items." }, HIGHLIGHT_OPTIONS,
   function (args = {}) {
-    validateKeys(args, HIGHLIGHT_OPTIONS, "highlightMarks");
     if (args.select !== undefined && args.selection !== undefined) {
       throw new Error("highlightMarks accepts select or selection, not both.");
     }
@@ -492,6 +604,7 @@ export const highlightMarks = action(
       selection,
       markType: layer.mark.type,
       style,
+      paintSource: requestedPaintSource(args, layer.mark.type, style),
       dimOthers,
       bringToFront
     };

package/src/actions/selection/index.js

@@ -9,12 +9,15 @@ import {
   highlightMarks,
   placeSelectedMarkItemsLast,
   rematerializeMarkHighlights,
+  rematerializeThemeHighlights,
   removeMarkHighlight,
   removeMarkSelection,
   selectMarks
 } from "./actions.js";
+import { registerThemeHighlightReconciler } from "../theme/reconcile.js";
 
 export function registerSelectionActions(ProgramClass) {
+  registerThemeHighlightReconciler(rematerializeThemeHighlights);
   ProgramClass.prototype.selectMarks = selectMarks;
   ProgramClass.prototype.editMarkSelection = editMarkSelection;
   ProgramClass.prototype.removeMarkHighlight = removeMarkHighlight;

package/src/actions/textMetrics/index.js

@@ -0,0 +1,56 @@
+import { action, closedAction } from "../../core/action.js";
+import { noOptions } from "../../core/validation.js";
+import { normalizeTextMetricProfile } from "../../core/textMetricProfile.js";
+import { rematerializeTypography } from "../../materialization/typography.js";
+
+function metricsProgram(parent, child) {
+  return typeof child.applyTextMetrics === "function" ? child : new parent.constructor({
+    ...child, actionSequence: child._actionSequence
+  });
+}
+
+export function inheritTextMetrics(parent, child) {
+  const profile = parent.materializationConfigs.textMetrics;
+  return profile === undefined ? child : metricsProgram(parent, child).applyTextMetrics({ profile });
+}
+
+function applyProfile(program, profile) {
+  let next = profile === undefined
+    ? program._withoutMaterializationConfig(["textMetrics"])
+    : program._withMaterializationConfig(["textMetrics"], profile);
+  if (next.compositionSpec !== undefined) {
+    const children = Object.fromEntries(next.compositionSpec.children.map(id => {
+      const child = next.children[id];
+      return [id, profile === undefined
+        ? child.materializationConfigs.textMetrics === undefined ? child : metricsProgram(next, child).removeTextMetrics()
+        : inheritTextMetrics(next, child)];
+    }));
+    next = next._withCompositionState({ children, compositionSpec: next.compositionSpec });
+    for (const id of next.compositionSpec.children) next = next.useProgram({ id });
+    return next.materializeComposition();
+  }
+  return rematerializeTypography(next);
+}
+
+export const applyTextMetrics = /* @__PURE__ */ closedAction(
+  { op: "applyTextMetrics", description: "Apply measured text widths to chart layout.", scope: "any" }, ["profile"],
+  function (args = {}) {
+    const profile = normalizeTextMetricProfile(args.profile);
+    applyProfile(this, profile);
+    return applyProfile(this, profile);
+  }
+);
+
+export const removeTextMetrics = /* @__PURE__ */ action(
+  { op: "removeTextMetrics", description: "Restore estimated text layout.", scope: "any" },
+  function (args = {}) {
+    noOptions(args, "removeTextMetrics");
+    if (this.materializationConfigs.textMetrics === undefined) throw new Error("removeTextMetrics requires an active profile.");
+    applyProfile(this, undefined);
+    return applyProfile(this, undefined);
+  }
+);
+
+export function registerTextMetricActions(ProgramClass) {
+  Object.assign(ProgramClass.prototype, { applyTextMetrics, removeTextMetrics });
+}

package/src/actions/theme/actions.js

@@ -1,43 +1,98 @@
 import { action } from "../../core/action.js";
 import { noOptions, validateOptionObject } from "../../core/validation.js";
-import { THEME_NAMES } from "../../theme/defaults.js";
+import { normalizeThemeDefinition } from "../../theme/defaults.js";
+import {
+  LOCAL_THEME_OWNER,
+  createThemeFrame,
+  moveLocalThemeScope,
+  normalizeThemeState,
+  removeThemeFrameOwner,
+  upsertThemeFrame
+} from "./state.js";
 
-export const applyTheme = action(
+let compositionThemeHandlers;
+
+export function registerCompositionThemeHandlers(handlers) {
+  if (handlers === undefined ||
+      typeof handlers.apply !== "function" ||
+      typeof handlers.remove !== "function") {
+    throw new TypeError("Composition theme handlers must provide apply and remove functions.");
+  }
+  compositionThemeHandlers = handlers;
+}
+
+function requireCompositionThemeHandlers() {
+  if (compositionThemeHandlers === undefined) {
+    throw new Error("Composition theme actions are unavailable from this entry point.");
+  }
+  return compositionThemeHandlers;
+}
+
+export const applyTheme = /* @__PURE__ */ action(
   {
     op: "applyTheme",
-    description: "Apply persistent visual defaults to the chart program."
+    description: "Apply persistent visual defaults to the chart program.",
+    scope: "any"
   },
   function (args = {}) {
-    validateOptionObject(args, ["theme"], "applyTheme", {
+    validateOptionObject(args, ["theme", "scope"], "applyTheme", {
       allowEmpty: false,
       emptyMessage: "applyTheme requires theme.",
       emptyError: Error
     });
-    if (!THEME_NAMES.includes(args.theme)) {
-      throw new Error(`Unsupported theme "${args.theme}".`);
+    if (!Object.hasOwn(args, "theme")) {
+      throw new Error("applyTheme requires theme.");
     }
-    const previous = this.materializationConfigs.theme;
+    const definition = normalizeThemeDefinition(args.theme);
+    if (args.scope !== undefined &&
+        !["self", "descendants"].includes(args.scope)) {
+      throw new Error(`Unsupported theme scope "${args.scope}".`);
+    }
+    if (this.compositionSpec !== undefined) {
+      return requireCompositionThemeHandlers().apply(
+        this,
+        { base: definition.name, tokens: definition.tokens },
+        args.scope ?? "descendants"
+      );
+    }
+    const scope = "self";
+    const previous = normalizeThemeState(this.materializationConfigs.theme);
+    const frame = createThemeFrame({
+      owner: LOCAL_THEME_OWNER,
+      scope,
+      definition: { base: definition.name, tokens: definition.tokens }
+    });
     return this._withMaterializationConfig(["theme"], {
-      name: args.theme,
-      overrides: previous?.overrides ?? []
+      ...previous,
+      frames: upsertThemeFrame(previous.frames, frame),
+      localOrder: moveLocalThemeScope(previous.localOrder, scope)
     });
   }
 );
 
-export const removeTheme = action(
+export const removeTheme = /* @__PURE__ */ action(
   {
     op: "removeTheme",
-    description: "Remove program theme defaults while preserving local styles."
+    description: "Remove program theme defaults while preserving local styles.",
+    scope: "any"
   },
   function (args = {}) {
     noOptions(args, "removeTheme");
-    if (this.materializationConfigs.theme === undefined) {
+    if (this.compositionSpec !== undefined) {
+      return requireCompositionThemeHandlers().remove(this);
+    }
+    const previous = normalizeThemeState(this.materializationConfigs.theme);
+    const removed = removeThemeFrameOwner(
+      previous.frames,
+      LOCAL_THEME_OWNER
+    );
+    if (!removed.removed) {
       throw new Error("removeTheme requires an active program theme.");
     }
     return this._withMaterializationConfig(["theme"], {
-      ...this.materializationConfigs.theme,
-      name: "light",
-      removing: true
+      ...previous,
+      frames: removed.frames,
+      localOrder: previous.localOrder.filter(scope => scope !== "self")
     });
   }
 );