diff --git a/CORE_REFACTOR_DEFERRED.md b/CORE_REFACTOR_DEFERRED.md
index 0306d69b8..3984c81a6 100644
--- a/CORE_REFACTOR_DEFERRED.md
+++ b/CORE_REFACTOR_DEFERRED.md
@@ -1,14 +1,12 @@
 # Core.js refactor — deferred findings
 
-These items came out of the PR review for `core-refactor-1` (Phase 1: extracting helpers from `packages/doenetml-worker-javascript/src/Core.js`). They were intentionally out of scope for that PR but are good candidates for the next refactor pass.
-
-The implementation in this branch covers the in-scope items from the PR review.
+These items came out of the PR reviews for the multi-phase refactor (`core-refactor-1`, `core-refactor-2`, …) extracting helpers from `packages/doenetml-worker-javascript/src/Core.js`. They were intentionally out of scope for those PRs but are good candidates for a follow-up pass.
 
 ## Deferred items
 
 ### Type the `core: any` back-reference in extracted managers
 
-Every new manager (`DiagnosticsManager`, `VisibilityTracker`, `StatePersistence`, `AutoSubmitManager`, `NavigationHandler`, `ResolverAdapter`) declares `core: any;`. That defeats the point of converting to TypeScript — typos and accidental property reads through `core` go unchecked.
+Every new manager declares `core: any;` — Phase 1 (`DiagnosticsManager`, `VisibilityTracker`, `StatePersistence`, `AutoSubmitManager`, `NavigationHandler`, `ResolverAdapter`) and Phase 2 (`RendererInstructionBuilder`, `ProcessQueue`, `ComponentLifecycle`, `ChildMatcher`, `DeletionEngine`, `ActionTriggerScheduler`). That defeats the point of converting to TypeScript — typos and accidental property reads through `core` go unchecked.
 
 Since `Core.js` is still JavaScript, defining a real `Core` interface is awkward. Two practical paths:
 
@@ -19,7 +17,12 @@ Since `Core.js` is still JavaScript, defining a real `Core` interface is awkward
 
 ### Reduce stateless managers to plain functions
 
-`NavigationHandler` and `ResolverAdapter` hold no state of their own — only a `core` back-reference. The pure-function shape used in `StateVariableNameResolver.ts` is more honest for these:
+Several managers hold no state of their own — only a `core` back-reference:
+
+- Phase 1: `NavigationHandler`, `ResolverAdapter`
+- Phase 2: `ComponentLifecycle`, `DeletionEngine` (and `ChildMatcher`, modulo its single recursion-guard array)
+
+The pure-function shape used in `StateVariableNameResolver.ts` is more honest for these:
 
 ```ts
 // NavigationHandler.ts
@@ -30,7 +33,7 @@ export async function handleNavigatingToComponent({
 export function navigateToTarget({ core, args }: { core: CoreBackref; args: any }) { ... }
 ```
 
-Core's wrappers shrink by one line each. If we keep the class form for symmetry with the other (genuinely stateful) managers, that's defensible — but the current PR has both shapes coexisting, so the inconsistency is real.
+Core's wrappers shrink by one line each. If we keep the class form for symmetry with the other (genuinely stateful) managers, that's defensible — but the current shape has both forms coexisting, so the inconsistency is real. `ChildMatcher`'s `derivingChildResultsInProgress` array is a small enough piece of state that it could be lifted into a module-level closure or threaded through the call, allowing it to also become a plain-function module.
 
 ### Move `getSourceLocationForComponent` out of `DiagnosticsManager`
 
@@ -70,6 +73,34 @@ Three intentionally unawaited Promise calls remain in `Core.js`. They pre-date t
 
 Suggested fix in each case: wrap with `.catch(reportTimerError("<label>"))` using the helper added in this PR (`src/utils/timerErrors.ts`). For the setTimeout case, use a thin arrow wrapper: `setTimeout(() => { this.sendVisibilityChangedEvents()?.catch(reportTimerError("first-visible visibility send")); }, ...)`.
 
+Phase 2's `ProcessQueue._kickoff` already attaches a `.catch(console.error)` to its `executeProcesses()` call, but the rest of the codebase still needs a sweep for bare `executeProcesses()` invocations and other unawaited Promises.
+
+### Carried-over `TODO` comments in the new managers
+
+When the Phase 2 modules were extracted, several `TODO` / `XXX` markers were lifted verbatim from `Core.js`. They aren't blockers but represent unanswered design questions that have been deferred for years; tackling them is independent of the refactor itself.
+
+- `ProcessQueue.ts:97, 106` — `// TODO: if skip an update, presumably we should call reject???` Unresolved: skipped queue entries currently never resolve or reject, so callers awaiting them hang.
+- `ProcessQueue.ts` (between the `update` and `action` branches in `executeProcesses`) — commented-out `getStateVariableValues` queue branch. Either revive or delete.
+- `RendererInstructionBuilder.ts:91` — `//TODO: Figure out what we need from here` above the change-detection pass.
+- `RendererInstructionBuilder.ts:253` — `// && !deletedRenderers.includes(componentIdx)  TODO: what if recreate with same name?` — guards re-render of a name that has been deleted and re-created.
+- `RendererInstructionBuilder.ts:275` — `// TODO: need this to ignore baseVariables change: is this right place?` on `rendererType` capture.
+- `ChildMatcher.ts:430, 468` — two `// XXX: how does this work with the new componentIdx approach?` comments on the placeholder-adapter branch.
+
+### `processQueue` field naming inside Core
+
+`Core` stores the `ProcessQueue` instance as `this.processQueueManager` while every other manager is named after its class (`this.componentLifecycle`, `this.childMatcher`, `this.deletionEngine`, `this.actionTriggerScheduler`, `this.rendererInstructionBuilder`, `this.diagnosticsManager`, `this.statePersistence`, etc.). The `Manager` suffix is here because `Core` already exposes `get processQueue() { return this.processQueueManager.queue; }` for the underlying array — and JS doesn't let an instance field shadow an inherited accessor of the same name.
+
+Two cleanups to consider together:
+
+1. Drop the `get/set processQueue` wrappers on `Core` (no current consumers need the array directly — components and CoreWorker only see the four request entry points and the `processing`/`stopProcessingRequests` flags), then rename `processQueueManager` → `processQueue`.
+2. Or leave as-is for the explicit symmetry between "manager class instance" and "the array it owns".
+
+Pick one; the current shape inherits the asymmetry from a half-finished rename.
+
+### Standardize `core._components` vs `core.components` access in extracted managers
+
+`Core` exposes `_components` as the canonical array and `get components()` as a read-only accessor returning the same array. Phase 2's modules now consistently use `core._components` (Phase 1 mostly does too). If future managers are added, keep this convention so reviewers don't have to remember the array and getter are the same thing. The deferred `CoreBackref` interface above is the natural place to enforce it (expose only `_components`).
+
 ### Regression test for the `.primitive.number` → `.primitive.value` fix
 
 Commit `aed7910c` fixed a latent bug at `ResolverAdapter.ts:84` (was reading `component.attributes.createComponentIdx.primitive.number`, should be `.value` after a `primitive.type === "number"` guard). The fix matches the pattern at `utils/resolver.ts:220-224` and `utils/componentIndices.ts:725`.
diff --git a/packages/doenetml-worker-javascript/src/ActionTriggerScheduler.ts b/packages/doenetml-worker-javascript/src/ActionTriggerScheduler.ts
new file mode 100644
index 000000000..77fca4171
--- /dev/null
+++ b/packages/doenetml-worker-javascript/src/ActionTriggerScheduler.ts
@@ -0,0 +1,333 @@
+/**
+ * Tracks state-variable-driven action triggers and the chained-action
+ * graph. Each cycle, `processStateVariableTriggers` polls registered
+ * trigger variables; `triggerChainedActions` walks the chained-action
+ * graph after a state mutation and dispatches the downstream actions.
+ *
+ * Owns:
+ *  - `stateVariableChangeTriggers`: per-component, per-state-variable
+ *    "fire this action when the value changes" registrations
+ *  - `actionsChangedToActions`: source-id → array of follow-up actions
+ *  - `originsOfActionsChangedToActions`: bookkeeping that lets us find
+ *    and unregister chained actions when their declaring state variable
+ *    re-resolves to a different target list
+ *
+ * Holds a back-reference to Core to read `_components` and `updateInfo`
+ * and to dispatch via `performAction` and `updateAllChangedRenderers`.
+ */
+export class ActionTriggerScheduler {
+    core: any;
+    stateVariableChangeTriggers: Record<
+        number,
+        Record<string, { action: string; previousValue?: any }>
+    >;
+    actionsChangedToActions: Record<string, any[]>;
+    originsOfActionsChangedToActions: Record<number, Record<string, any[]>>;
+
+    constructor({ core }: { core: any }) {
+        this.core = core;
+        this.stateVariableChangeTriggers = {};
+        this.actionsChangedToActions = {};
+        this.originsOfActionsChangedToActions = {};
+    }
+
+    /**
+     * Clear all per-document trigger and chain registrations. Called from
+     * `Core.generateDast` so state from any previous run does not leak in.
+     */
+    reset(): void {
+        this.stateVariableChangeTriggers = {};
+        this.actionsChangedToActions = {};
+        this.originsOfActionsChangedToActions = {};
+    }
+
+    /**
+     * Poll every registered trigger variable for a value change since the
+     * last poll, and dispatch the trigger's action if so. Renderer state
+     * is normally updated by the caller; pass
+     * `updateRenderersIfTriggered: true` to push a renderer update inline
+     * after any action fires.
+     *
+     * TODO: this scans every registered trigger each tick. We could
+     * narrow to components that actually changed by intersecting with
+     * `componentsToUpdateRenderers`, but that set excludes non-rendered
+     * components that may still carry triggers.
+     */
+    async processStateVariableTriggers(
+        updateRenderersIfTriggered: boolean = false,
+    ): Promise<void> {
+        let triggeredAction = false;
+
+        for (const componentIdxStr in this.stateVariableChangeTriggers) {
+            const componentIdx = Number(componentIdxStr);
+            let component = this.core._components[componentIdx];
+            for (let stateVariable in this.stateVariableChangeTriggers[
+                componentIdx
+            ]) {
+                let triggerInstructions =
+                    this.stateVariableChangeTriggers[componentIdx][
+                        stateVariable
+                    ];
+
+                let value = await component.state[stateVariable].value;
+
+                if (value !== triggerInstructions.previousValue) {
+                    let previousValue = triggerInstructions.previousValue;
+                    triggerInstructions.previousValue = value;
+                    let action = component.actions[triggerInstructions.action];
+                    if (action) {
+                        await this.core.performAction({
+                            componentIdx,
+                            actionName: triggerInstructions.action,
+                            args: {
+                                stateValues: { [stateVariable]: value },
+                                previousValues: {
+                                    [stateVariable]: previousValue,
+                                },
+                                skipRendererUpdate: true,
+                            },
+                        });
+                        triggeredAction = true;
+                    }
+                }
+            }
+        }
+
+        if (triggeredAction && updateRenderersIfTriggered) {
+            await this.core.updateAllChangedRenderers();
+        }
+    }
+
+    /**
+     * Queue every `mustEvaluate` state variable on `componentIdx` into
+     * `updateInfo.stateVariablesToEvaluate`, so that a later flush forces
+     * them to compute even if nothing read them.
+     */
+    recordStateVariablesMustEvaluate(componentIdx: number): void {
+        let comp = this.core._components[componentIdx];
+
+        for (let vName in comp.state) {
+            if (comp.state[vName].mustEvaluate) {
+                this.core.updateInfo.stateVariablesToEvaluate.push({
+                    componentIdx,
+                    stateVariable: vName,
+                });
+            }
+        }
+    }
+
+    /**
+     * Re-sync the chained-action graph for `component` after the value of
+     * one of its `chainActionOnActionOfStateVariableTargets` state
+     * variables changed. Computes the diff between the previously
+     * registered targets and the new ones: register newly added targets
+     * in `actionsChangedToActions`, drop targets that are no longer
+     * present, and update the per-component bookkeeping in
+     * `originsOfActionsChangedToActions`.
+     */
+    async checkForActionChaining({
+        component,
+        stateVariables,
+    }: {
+        component: any;
+        stateVariables?: string[];
+    }): Promise<void> {
+        if (!component) {
+            return;
+        }
+
+        if (!stateVariables) {
+            stateVariables = Object.keys(component.state);
+        }
+
+        for (let varName of stateVariables) {
+            let stateVarObj = component.state[varName];
+
+            if (stateVarObj.chainActionOnActionOfStateVariableTargets) {
+                let chainInfo =
+                    stateVarObj.chainActionOnActionOfStateVariableTargets;
+                let targetIds = await stateVarObj.value;
+
+                let originObj =
+                    this.originsOfActionsChangedToActions[
+                        component.componentIdx
+                    ];
+
+                let previousIds: any[] | undefined;
+                if (originObj) {
+                    previousIds = originObj[varName];
+                }
+
+                if (!previousIds) {
+                    previousIds = [];
+                }
+
+                let newTargets: any[] = [];
+
+                if (Array.isArray(targetIds)) {
+                    newTargets = [...targetIds];
+                    for (let id of newTargets) {
+                        let indPrev = previousIds.indexOf(id);
+
+                        if (indPrev === -1) {
+                            // found a component/action that wasn't previously chained
+                            let componentActionsChained =
+                                this.actionsChangedToActions[id];
+                            if (!componentActionsChained) {
+                                componentActionsChained =
+                                    this.actionsChangedToActions[id] = [];
+                            }
+
+                            componentActionsChained.push({
+                                componentIdx: component.componentIdx,
+                                actionName: chainInfo.triggeredAction,
+                                stateVariableDefiningChain: varName,
+                                args: {},
+                            });
+                        } else {
+                            // target was already chained
+                            // remove from previous names to indicate it should still be chained
+                            previousIds.splice(indPrev, 1);
+                        }
+                    }
+                }
+
+                // if any ids are left in previousIds,
+                // then they should no longer be chained
+                for (let idToNoLongerChain of previousIds) {
+                    let componentActionsChained =
+                        this.actionsChangedToActions[idToNoLongerChain];
+                    if (componentActionsChained) {
+                        let newComponentActionsChained: any[] = [];
+
+                        for (let chainedInfo of componentActionsChained) {
+                            if (
+                                chainedInfo.componentIdx !==
+                                    component.componentIdx ||
+                                chainedInfo.stateVariableDefiningChain !==
+                                    varName
+                            ) {
+                                newComponentActionsChained.push(chainedInfo);
+                            }
+                        }
+
+                        this.actionsChangedToActions[idToNoLongerChain] =
+                            newComponentActionsChained;
+                    }
+                }
+
+                if (newTargets.length > 0) {
+                    if (!originObj) {
+                        originObj = this.originsOfActionsChangedToActions[
+                            component.componentIdx
+                        ] = {};
+                    }
+                    originObj[varName] = newTargets;
+                } else if (originObj) {
+                    delete originObj[varName];
+
+                    if (Object.keys(originObj).length === 0) {
+                        delete this.originsOfActionsChangedToActions[
+                            component.componentIdx
+                        ];
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * After an action runs on `componentIdx`, fire any actions chained to
+     * it (and to any composite that this component shadows via a bare
+     * reference like `$P` — but not via `extend`/`copy`, since those
+     * don't propagate authored intent). Re-syncs the chain graph first
+     * so `componentsToUpdateActionChaining` doesn't miss any pending
+     * registration changes.
+     */
+    async triggerChainedActions({
+        componentIdx,
+        triggeringAction,
+        actionId,
+        sourceInformation = {},
+        skipRendererUpdate = false,
+    }: {
+        componentIdx: number;
+        triggeringAction?: string;
+        actionId?: string;
+        sourceInformation?: any;
+        skipRendererUpdate?: boolean;
+    }): Promise<void> {
+        for (const cIdxStr in this.core.updateInfo
+            .componentsToUpdateActionChaining) {
+            await this.checkForActionChaining({
+                component: this.core._components[cIdxStr],
+                stateVariables:
+                    this.core.updateInfo.componentsToUpdateActionChaining[
+                        cIdxStr
+                    ],
+            });
+        }
+
+        this.core.updateInfo.componentsToUpdateActionChaining = {};
+
+        let actionsToChain: any[] = [];
+
+        let cIdx = componentIdx;
+
+        while (true) {
+            let comp = this.core._components[cIdx];
+            let id: string | number = cIdx;
+
+            if (triggeringAction) {
+                id = id + "|" + triggeringAction;
+            }
+
+            if (this.actionsChangedToActions[id]) {
+                actionsToChain.push(...this.actionsChangedToActions[id]);
+            }
+
+            if (comp?.shadows) {
+                let composite =
+                    this.core._components[comp.shadows.compositeIdx];
+                if (composite.attributes.createComponentOfType != null) {
+                    break;
+                }
+
+                // We propagate to shadows if the component was copied with a bare references such as `$P`
+                // but not if was copied via extend/copy attribute, such as `<point extend="$P" />
+                // Rationale:
+                // If we include $P in a graph,
+                // then triggerWhenObjectsClicked="$P" and triggerWhenObjectsFocused="$P"
+                // will be triggered by that reference, which is what authors would expect.
+                // Another use case is defining an <updateValue name="uv">,
+                // along with other triggered actions using triggerWith="$uv",
+                // inside a <setup> and then including a $uv
+                // where we want the button to be.
+
+                cIdx = comp.shadows.componentIdx;
+            } else {
+                break;
+            }
+        }
+
+        for (let chainedActionInstructions of actionsToChain) {
+            chainedActionInstructions = { ...chainedActionInstructions };
+            if (chainedActionInstructions.args) {
+                chainedActionInstructions.args = {
+                    ...chainedActionInstructions.args,
+                };
+            } else {
+                chainedActionInstructions.args = {};
+            }
+            chainedActionInstructions.args.skipRendererUpdate = true;
+            await this.core.performAction(chainedActionInstructions);
+        }
+
+        if (!skipRendererUpdate) {
+            await this.core.updateAllChangedRenderers(
+                sourceInformation,
+                actionId,
+            );
+        }
+    }
+}
diff --git a/packages/doenetml-worker-javascript/src/ChildMatcher.ts b/packages/doenetml-worker-javascript/src/ChildMatcher.ts
new file mode 100644
index 000000000..33658fd18
--- /dev/null
+++ b/packages/doenetml-worker-javascript/src/ChildMatcher.ts
@@ -0,0 +1,519 @@
+import { assignDoenetMLRange } from "@doenet/utils";
+
+/**
+ * Resolves a parent's defining children into matched, adapted, ordered
+ * `activeChildren` and bookkeeping in `allChildren` / `allChildrenOrdered`,
+ * including substituting adapters when a child cannot be matched directly
+ * to a parent's child group, and computing which active children should
+ * actually be rendered.
+ *
+ * Stateless apart from a recursion guard (`derivingChildResultsInProgress`).
+ * Holds a back-reference to Core to read `_components`,
+ * `componentInfoObjects`, `dependencies`, `updateInfo`, and to invoke
+ * Phase-3 expansion methods (`expandCompositeOfDefiningChildren`,
+ * `replaceCompositeChildren`, `expandCompositeComponent`,
+ * `createIsolatedComponents`) and append to `unmatchedChildren`.
+ */
+export class ChildMatcher {
+    core: any;
+    /**
+     * Re-entrancy guard: parents currently inside
+     * `deriveChildResultsFromDefiningChildren`. Composite expansion can
+     * call back into the same parent indirectly; on re-entry we return
+     * `{ success: false, skipping: true }` so the outer call finishes first.
+     */
+    derivingChildResultsInProgress: Set<number>;
+
+    constructor({ core }: { core: any }) {
+        this.core = core;
+        this.derivingChildResultsInProgress = new Set();
+    }
+
+    /**
+     * Build `parent.activeChildren`, `parent.allChildren`, and
+     * `parent.allChildrenOrdered` from `parent.definingChildren`:
+     * expand any composites that aren't directly matchable, substitute
+     * adapters for unmatched children, and run child-group matching.
+     * On a successful pass, appends blockers to dependency tracking and
+     * marks the parent for re-render if its rendered child set changed.
+     */
+    async deriveChildResultsFromDefiningChildren({
+        parent,
+        expandComposites = true,
+        forceExpandComposites = false,
+    }: {
+        parent: any;
+        expandComposites?: boolean;
+        forceExpandComposites?: boolean;
+    }): Promise<any> {
+        if (this.derivingChildResultsInProgress.has(parent.componentIdx)) {
+            return { success: false, skipping: true };
+        }
+        this.derivingChildResultsInProgress.add(parent.componentIdx);
+
+        // create allChildren and activeChildren from defining children
+        // apply child logic and substitute adapters to modify activeChildren
+
+        // attempt to expand composites before modifying active children
+        let result = await this.core.expandCompositeOfDefiningChildren(
+            parent,
+            parent.definingChildren,
+            expandComposites,
+            forceExpandComposites,
+        );
+        parent.unexpandedCompositesReady = result.unexpandedCompositesReady;
+        parent.unexpandedCompositesNotReady =
+            result.unexpandedCompositesNotReady;
+
+        let previousActiveChildren: any[] | undefined;
+
+        if (parent.activeChildren) {
+            previousActiveChildren = parent.activeChildren.map((child: any) =>
+                child.componentIdx ? child.componentIdx : child,
+            );
+        }
+
+        parent.activeChildren = parent.definingChildren.slice(); // shallow copy
+
+        // allChildren include activeChildren, definingChildren,
+        // and possibly some children that are neither
+        // (which could occur when a composite is expanded and the result is adapted)
+        // ignores string and number primitive children
+        parent.allChildren = {};
+
+        // allChildrenOrdered contains same children as allChildren,
+        // but retaining an order that we can use for counters.
+        // If defining children are replaced my composite replacements or adapters,
+        // those children will come immediately after the corresponding defining child
+        parent.allChildrenOrdered = [];
+
+        for (let ind = 0; ind < parent.activeChildren.length; ind++) {
+            let child = parent.activeChildren[ind];
+            let childIdx;
+            if (typeof child !== "object") {
+                continue;
+            }
+
+            childIdx = child.componentIdx;
+
+            parent.allChildren[childIdx] = {
+                activeChildrenIndex: ind,
+                definingChildrenIndex: ind,
+                component: child,
+            };
+
+            parent.allChildrenOrdered.push(childIdx);
+        }
+
+        // if any of activeChildren are expanded compositeComponents
+        // replace with new components given by the composite component
+        await this.core.replaceCompositeChildren(parent);
+
+        let childGroupResults = await this.matchChildrenToChildGroups(parent);
+
+        if (childGroupResults.success) {
+            delete this.core.unmatchedChildren[parent.componentIdx];
+            parent.childrenMatchedWithPlaceholders = true;
+            parent.matchedCompositeChildrenWithPlaceholders = true;
+        } else {
+            parent.childrenMatchedWithPlaceholders = false;
+            parent.matchedCompositeChildrenWithPlaceholders = true;
+
+            let unmatchedChildrenTypes: string[] = [];
+            for (let child of childGroupResults.unmatchedChildren) {
+                if (typeof child === "string") {
+                    unmatchedChildrenTypes.push("string");
+                } else {
+                    unmatchedChildrenTypes.push(
+                        "`<" + child.componentType + ">`",
+                    );
+                    if (
+                        this.core.componentInfoObjects.isInheritedComponentType(
+                            {
+                                inheritedComponentType: child.componentType,
+                                baseComponentType: "_composite",
+                            },
+                        )
+                    ) {
+                        parent.matchedCompositeChildrenWithPlaceholders = false;
+                    }
+                }
+            }
+
+            if (parent.doenetAttributes.isAttributeChildFor) {
+                let attributeForComponentType =
+                    parent.ancestors[0].componentClass.componentType;
+                this.core.unmatchedChildren[parent.componentIdx] = {
+                    message: `Invalid format for attribute ${parent.doenetAttributes.isAttributeChildFor} of \`<${attributeForComponentType}>\`.`,
+                };
+            } else {
+                this.core.unmatchedChildren[parent.componentIdx] = {
+                    message: `Invalid children for \`<${
+                        parent.componentType
+                    }>\`: Found invalid children: ${unmatchedChildrenTypes.join(
+                        ", ",
+                    )}`,
+                };
+            }
+        }
+
+        await this.core.dependencies.addBlockersFromChangedActiveChildren({
+            parent,
+        });
+
+        this.derivingChildResultsInProgress.delete(parent.componentIdx);
+
+        if (parent.constructor.renderChildren) {
+            let childrenUnchanged =
+                previousActiveChildren &&
+                previousActiveChildren.length == parent.activeChildren.length &&
+                parent.activeChildren.every((child: any, ind: number) =>
+                    child.componentIdx
+                        ? child.componentIdx === previousActiveChildren![ind]
+                        : child === previousActiveChildren![ind],
+                );
+            if (!childrenUnchanged) {
+                this.core.componentsWithChangedChildrenToRender.add(
+                    parent.componentIdx,
+                );
+            }
+        }
+
+        return childGroupResults;
+    }
+
+    /**
+     * For each `activeChild` of `parent`, find the parent class's child
+     * group that accepts the child's component type, substituting an
+     * adapter if a direct match isn't available. Populates
+     * `parent.childMatchesByGroup`. Returns `{ success, unmatchedChildren }`
+     * where `success` is false iff any child could not be matched.
+     */
+    async matchChildrenToChildGroups(parent: any): Promise<any> {
+        parent.childMatchesByGroup = {};
+
+        for (let groupName in parent.constructor.childGroupIndsByName) {
+            parent.childMatchesByGroup[groupName] = [];
+        }
+
+        let success = true;
+
+        let unmatchedChildren: any[] = [];
+
+        for (let [ind, child] of parent.activeChildren.entries() as Iterable<
+            [number, any]
+        >) {
+            let childType =
+                typeof child !== "object" ? typeof child : child.componentType;
+
+            if (childType === undefined) {
+                success = false;
+                unmatchedChildren.push(child);
+                continue;
+            }
+
+            let result = this.findChildGroup(childType, parent.constructor);
+
+            if (result.success) {
+                parent.childMatchesByGroup[result.group!].push(ind);
+
+                if (result.adapterIndUsed !== undefined) {
+                    await this.substituteAdapter({
+                        parent,
+                        childInd: ind,
+                        adapterIndUsed: result.adapterIndUsed,
+                    });
+                }
+            } else {
+                success = false;
+                unmatchedChildren.push(child);
+            }
+        }
+
+        return { success, unmatchedChildren };
+    }
+
+    /**
+     * Try to match `childType` directly against `parentClass`'s child
+     * groups; if no match, walk the child class's adapter list and try
+     * each adapter component type in turn; finally retry with
+     * `afterAdapters: true` for groups that opt into late matching.
+     * Returns the matching `group` and (if applicable) `adapterIndUsed`.
+     */
+    findChildGroup(
+        childType: string,
+        parentClass: any,
+    ): {
+        success: boolean;
+        group?: string;
+        adapterIndUsed?: number;
+    } {
+        let result = this.findChildGroupNoAdapters(childType, parentClass);
+
+        if (result.success) {
+            return result;
+        } else if (childType === "string") {
+            return { success: false };
+        }
+
+        // check if can match with adapters
+        let childClass =
+            this.core.componentInfoObjects.allComponentClasses[childType];
+
+        // if didn't match child, attempt to match with child's adapters
+        let numAdapters = childClass.numAdapters;
+
+        for (let n = 0; n < numAdapters; n++) {
+            let adapterComponentType = childClass.getAdapterComponentType(
+                n,
+                this.core.componentInfoObjects.publicStateVariableInfo,
+            );
+
+            result = this.findChildGroupNoAdapters(
+                adapterComponentType,
+                parentClass,
+            );
+
+            if (result.success) {
+                (result as any).adapterIndUsed = n;
+                return result;
+            }
+        }
+
+        // lastly try to match with afterAdapters set to true
+        return this.findChildGroupNoAdapters(childType, parentClass, true);
+    }
+
+    findChildGroupNoAdapters(
+        componentType: string,
+        parentClass: any,
+        afterAdapters: boolean = false,
+    ): { success: boolean; group?: string } {
+        if (parentClass.childGroupOfComponentType[componentType]) {
+            return {
+                success: true,
+                group: parentClass.childGroupOfComponentType[componentType],
+            };
+        }
+
+        for (let group of parentClass.childGroups) {
+            for (let typeFromGroup of group.componentTypes) {
+                if (
+                    this.core.componentInfoObjects.isInheritedComponentType({
+                        inheritedComponentType: componentType,
+                        baseComponentType: typeFromGroup,
+                    })
+                ) {
+                    if (group.matchAfterAdapters && !afterAdapters) {
+                        continue;
+                    }
+                    // don't match composites to the base component
+                    // so that they will expand
+                    if (
+                        !(
+                            typeFromGroup === "_base" &&
+                            this.core.componentInfoObjects.isInheritedComponentType(
+                                {
+                                    inheritedComponentType: componentType,
+                                    baseComponentType: "_composite",
+                                },
+                            )
+                        )
+                    ) {
+                        parentClass.childGroupOfComponentType[componentType] =
+                            group.group;
+
+                        return {
+                            success: true,
+                            group: group.group,
+                        };
+                    }
+                }
+            }
+        }
+
+        return { success: false };
+    }
+
+    /**
+     * Compute which entries of `component.activeChildren` should actually
+     * be passed to the renderer. Honors `numChildrenToRender`,
+     * `childIndicesToRender`, per-child `hidden`, and propagates
+     * `hidden` from any composite that produced a primitive child.
+     */
+    async returnActiveChildrenIndicesToRender(
+        component: any,
+    ): Promise<number[]> {
+        let indicesToRender: number[] = [];
+        let numChildrenToRender = Infinity;
+        if ("numChildrenToRender" in component.state) {
+            numChildrenToRender =
+                await component.stateValues.numChildrenToRender;
+        }
+        let childIndicesToRender: number[] | null = null;
+        if ("childIndicesToRender" in component.state) {
+            childIndicesToRender =
+                await component.stateValues.childIndicesToRender;
+        }
+
+        for (let [ind, child] of component.activeChildren.entries() as Iterable<
+            [number, any]
+        >) {
+            if (ind >= numChildrenToRender) {
+                break;
+            }
+
+            if (childIndicesToRender && !childIndicesToRender.includes(ind)) {
+                continue;
+            }
+
+            if (typeof child === "object") {
+                if (
+                    child.constructor.sendToRendererEvenIfHidden ||
+                    !(await child.stateValues.hidden)
+                ) {
+                    indicesToRender.push(ind);
+                }
+            } else {
+                // if have a primitive,
+                // will be hidden if a composite source is hidden
+                let hidden = false;
+                if (component.compositeReplacementActiveRange) {
+                    for (let compositeInfo of component.compositeReplacementActiveRange) {
+                        let composite =
+                            this.core._components[compositeInfo.compositeIdx];
+                        if (await composite.stateValues.hidden) {
+                            if (
+                                compositeInfo.firstInd <= ind &&
+                                compositeInfo.lastInd >= ind
+                            ) {
+                                hidden = true;
+                                break;
+                            }
+                        }
+                    }
+                }
+                if (!hidden) {
+                    indicesToRender.push(ind);
+                }
+            }
+        }
+
+        return indicesToRender;
+    }
+
+    /**
+     * Replace `parent.activeChildren[childInd]` with the adapter selected
+     * by `adapterIndUsed`, creating the adapter component if it doesn't
+     * already exist or doesn't match the desired component type.
+     * Updates `allChildren` and `allChildrenOrdered` to reflect the swap
+     * (the adapter is placed immediately after the original child in the
+     * order so counters stay stable).
+     */
+    async substituteAdapter({
+        parent,
+        childInd,
+        adapterIndUsed,
+    }: {
+        parent: any;
+        childInd: number;
+        adapterIndUsed: number;
+    }): Promise<void> {
+        let originalChild = parent.activeChildren[childInd];
+
+        let newSerializedChild: any;
+        if (originalChild.componentIdx != undefined) {
+            newSerializedChild = originalChild.getAdapter(adapterIndUsed);
+            newSerializedChild.componentIdx = this.core._components.length;
+            this.core._components[this.core._components.length] = undefined;
+        } else {
+            // XXX: how does this work with the new componentIdx approach?
+
+            // child isn't a component, just an object with a componentType
+            // Create an object that is just the componentType of the adapter
+            newSerializedChild = {
+                componentType:
+                    this.core.componentInfoObjects.allComponentClasses[
+                        originalChild.componentType
+                    ].getAdapterComponentType(
+                        adapterIndUsed,
+                        this.core.componentInfoObjects.publicStateVariableInfo,
+                    ),
+                placeholderInd: originalChild.placeholderInd + "adapt",
+            };
+        }
+
+        let adapter = originalChild.adapterUsed;
+
+        if (
+            adapter === undefined ||
+            adapter.componentType !== newSerializedChild.componentType
+        ) {
+            if (originalChild.componentIdx != undefined) {
+                newSerializedChild.adaptedFrom = originalChild.componentIdx;
+                assignDoenetMLRange(
+                    [newSerializedChild],
+                    originalChild.position,
+                    originalChild.sourceDoc,
+                );
+                let newChildrenResult =
+                    await this.core.createIsolatedComponents({
+                        serializedComponents: [newSerializedChild],
+                        shadow: true,
+                        ancestors: originalChild.ancestors,
+                    });
+
+                adapter = newChildrenResult.components[0];
+            } else {
+                // XXX: how does this work with the new componentIdx approach?
+
+                // didn't have a component for the original child, just a componentType
+                // Adapter will also just be the componentType returned from childmatches
+                newSerializedChild.adaptedFrom = originalChild;
+                adapter = newSerializedChild;
+            }
+        }
+
+        // Replace originalChild with its adapter in activeChildren
+        parent.activeChildren.splice(childInd, 1, adapter);
+
+        // TODO: if originalChild is a placeholder, we lose track of it
+        // (other than through adaptedFrom of adapted)
+        // once we splice it out of activeChildren.  Is that a problem?
+
+        // Update allChildren to show that originalChild is no longer active
+        // and that adapter is now an active child
+        if (originalChild.componentIdx != undefined) {
+            // ignore placeholder active children
+            delete parent.allChildren[originalChild.componentIdx]
+                .activeChildrenIndex;
+            parent.allChildren[adapter.componentIdx] = {
+                activeChildrenIndex: childInd,
+                component: adapter,
+            };
+        }
+
+        // find index of originalChild in allChildrenOrdered
+        // and place adapter immediately afterward
+        if (originalChild.componentIdx != undefined) {
+            let originalInd = parent.allChildrenOrdered.indexOf(
+                originalChild.componentIdx,
+            );
+            parent.allChildrenOrdered.splice(
+                originalInd + 1,
+                0,
+                adapter.componentIdx,
+            );
+        } else {
+            // adapter of placeholder
+            let originalInd = parent.allChildrenOrdered.indexOf(
+                originalChild.placeholderInd,
+            );
+            parent.allChildrenOrdered.splice(
+                originalInd + 1,
+                0,
+                adapter.placeholderInd,
+            );
+        }
+    }
+}
diff --git a/packages/doenetml-worker-javascript/src/ComponentLifecycle.ts b/packages/doenetml-worker-javascript/src/ComponentLifecycle.ts
new file mode 100644
index 000000000..70fb7d339
--- /dev/null
+++ b/packages/doenetml-worker-javascript/src/ComponentLifecycle.ts
@@ -0,0 +1,286 @@
+import { postProcessCopy } from "./utils/copy";
+import { createNewComponentIndices } from "./utils/componentIndices";
+
+/**
+ * Bookkeeping for component objects in the live tree:
+ *
+ * - `registerComponent` / `deregisterComponent` add and remove components
+ *   from `core._components` (the canonical registry).
+ * - `setAncestors` walks the tree to keep each component's `ancestors`
+ *   chain in sync with its parent.
+ * - `spliceChildren`, `addChildrenAndRecurseToShadows`,
+ *   `processNewDefiningChildren` orchestrate insertion of new defining
+ *   children into a parent and propagation to any composites that
+ *   shadow that parent.
+ *
+ * Stateless — holds a back-reference to Core to read `_components`,
+ * `parameterStack`, and to invoke `deriveChildResultsFromDefiningChildren`
+ * and `createIsolatedComponents` (the latter still on Core through Phase 3).
+ */
+export class ComponentLifecycle {
+    core: any;
+
+    constructor({ core }: { core: any }) {
+        this.core = core;
+    }
+
+    /**
+     * Add `component` to the canonical `_components` registry. Throws if
+     * the index is already taken — duplicate indices indicate a bug in the
+     * caller, so we fail loudly rather than silently overwriting.
+     */
+    registerComponent(component: any): void {
+        if (this.core._components[component.componentIdx] !== undefined) {
+            throw Error(`Duplicate component index: ${component.componentIdx}`);
+        }
+        this.core._components[component.componentIdx] = component;
+    }
+
+    /**
+     * Remove `component` (and, by default, all its `allChildren`) from
+     * the registry. Pass `recursive: false` when the caller has already
+     * walked the subtree and is deregistering each entry itself, e.g.
+     * the `DeletionEngine` two-phase delete.
+     */
+    deregisterComponent(component: any, recursive: boolean = true): void {
+        if (recursive) {
+            for (let childIdxStr in component.allChildren) {
+                this.deregisterComponent(
+                    component.allChildren[childIdxStr].component,
+                );
+            }
+        }
+
+        delete this.core._components[component.componentIdx];
+    }
+
+    setAncestors(component: any, ancestors: any[] = []): void {
+        // set ancestors based on allChildren and attribute components
+        // so that all components get ancestors
+        // even if not activeChildren or definingChildren
+
+        component.ancestors = ancestors;
+
+        let ancestorsForChildren = [
+            {
+                componentIdx: component.componentIdx,
+                componentClass: component.constructor,
+            },
+            ...component.ancestors,
+        ];
+
+        for (const childIdxStr in component.allChildren) {
+            let unproxiedChild = this.core._components[childIdxStr];
+            // Note: when add and deleting replacements of shadowed composites,
+            // it is possible that we end up processing the defining children of ancestors of the composite
+            // while we were delaying processing the defining children of the composite's parent,
+            // which could lead to an attempt to set the ancestors of that composite's parent's children
+            // while the booking variable allChildren is in an inconsistent state.
+            // To avoid an error, we don't set ancestors in the case
+            // (See test "references to internal and external components, inconsistent new namespaces"
+            // from conditionalcontent.cy.js for an example that triggered the need for this check.)
+            // TODO: can we avoid the need for this check by preventing the algorithm from
+            // attempting to set ancestors in this case?
+            if (unproxiedChild) {
+                this.setAncestors(unproxiedChild, ancestorsForChildren);
+            }
+        }
+
+        for (let attrName in component.attributes) {
+            let comp = component.attributes[attrName].component;
+            if (comp) {
+                this.setAncestors(comp, ancestorsForChildren);
+            }
+        }
+    }
+
+    /**
+     * Splice `newChildren` into `parent.definingChildren` at the given
+     * index, derive child results, and propagate the same insertion to
+     * every composite that shadows `parent` (recursively). Returns the
+     * cumulative `addedComponents` / `deletedComponents` from `parent`
+     * and all shadowing parents.
+     */
+    async addChildrenAndRecurseToShadows({
+        parent,
+        indexOfDefiningChildren,
+        newChildren,
+    }: {
+        parent: any;
+        indexOfDefiningChildren: number;
+        newChildren: any[];
+    }): Promise<any> {
+        this.spliceChildren(parent, indexOfDefiningChildren, newChildren);
+
+        let newChildrenResult = await this.processNewDefiningChildren({
+            parent,
+        });
+
+        let addedComponents: Record<number, any> = {};
+        let deletedComponents: Record<number, any> = {};
+
+        if (!newChildrenResult.success) {
+            // try again, this time force expanding composites before giving up
+            newChildrenResult = await this.processNewDefiningChildren({
+                parent,
+                forceExpandComposites: true,
+            });
+
+            if (!newChildrenResult.success) {
+                return newChildrenResult;
+            }
+        }
+
+        for (let child of newChildren) {
+            if (typeof child === "object") {
+                addedComponents[child.componentIdx] = child;
+            }
+        }
+
+        if (parent.shadowedBy) {
+            for (let shadowingParent of parent.shadowedBy) {
+                if (
+                    shadowingParent.shadows.propVariable ||
+                    shadowingParent.constructor.doNotExpandAsShadowed
+                ) {
+                    continue;
+                }
+
+                let shadowingSerializeChildren: any[] = [];
+                let nComponents = this.core._components.length;
+
+                for (let child of newChildren) {
+                    if (typeof child === "object") {
+                        const serializedComponent = await child.serialize();
+
+                        const res = createNewComponentIndices(
+                            [serializedComponent],
+                            nComponents,
+                        );
+                        nComponents = res.nComponents;
+
+                        shadowingSerializeChildren.push(...res.components);
+                    } else {
+                        shadowingSerializeChildren.push(child);
+                    }
+                }
+
+                if (nComponents > this.core._components.length) {
+                    this.core._components[nComponents - 1] = undefined;
+                }
+
+                shadowingSerializeChildren = postProcessCopy({
+                    serializedComponents: shadowingSerializeChildren,
+                    componentIdx: shadowingParent.shadows.compositeIdx,
+                });
+
+                let unproxiedShadowingParent =
+                    this.core._components[shadowingParent.componentIdx];
+                this.core.parameterStack.push(
+                    unproxiedShadowingParent.sharedParameters,
+                    false,
+                );
+
+                let createResult = await this.core.createIsolatedComponents({
+                    serializedComponents: shadowingSerializeChildren,
+                    ancestors: shadowingParent.ancestors,
+                });
+
+                this.core.parameterStack.pop();
+
+                let shadowResult = await this.addChildrenAndRecurseToShadows({
+                    parent: unproxiedShadowingParent,
+                    indexOfDefiningChildren,
+                    newChildren: createResult.components,
+                });
+
+                if (!shadowResult.success) {
+                    throw Error(
+                        `was able to add components to parent but not shadows!`,
+                    );
+                }
+
+                Object.assign(addedComponents, shadowResult.addedComponents);
+            }
+        }
+
+        return {
+            success: true,
+            deletedComponents,
+            addedComponents,
+        };
+    }
+
+    /**
+     * Run child-group matching for `parent` after its `definingChildren`
+     * have been mutated. Pushes/pops `sharedParameters` around the call
+     * and re-syncs `ancestors` for every entry in `allChildren` (the
+     * matched/adapted set may differ from `definingChildren`).
+     */
+    async processNewDefiningChildren({
+        parent,
+        expandComposites = true,
+        forceExpandComposites = false,
+    }: {
+        parent: any;
+        expandComposites?: boolean;
+        forceExpandComposites?: boolean;
+    }): Promise<any> {
+        this.core.parameterStack.push(parent.sharedParameters, false);
+        let childResult =
+            await this.core.deriveChildResultsFromDefiningChildren({
+                parent,
+                expandComposites,
+                forceExpandComposites,
+            });
+        this.core.parameterStack.pop();
+
+        let ancestorsForChildren = [
+            {
+                componentIdx: parent.componentIdx,
+                componentClass: parent.constructor,
+            },
+            ...parent.ancestors,
+        ];
+
+        // set ancestors for allChildren of parent
+        // since could replace newChildren by adapters or via composites
+        for (const childIdxStr in parent.allChildren) {
+            let unproxiedChild = this.core._components[childIdxStr];
+            this.setAncestors(unproxiedChild, ancestorsForChildren);
+        }
+
+        return childResult;
+    }
+
+    spliceChildren(
+        parent: any,
+        indexOfDefiningChildren: number,
+        newChildren: any[],
+    ): void {
+        // splice newChildren into parent.definingChildren
+        // definingChildrenNumber is the index of parent.definingChildren
+        // before which to splice the newChildren (set to array length to add at end)
+
+        let numDefiningChildren = parent.definingChildren.length;
+
+        if (
+            !Number.isInteger(indexOfDefiningChildren) ||
+            indexOfDefiningChildren > numDefiningChildren ||
+            indexOfDefiningChildren < 0
+        ) {
+            throw Error(
+                "Can't add children at index " +
+                    indexOfDefiningChildren +
+                    ". Invalid index.",
+            );
+        }
+
+        // perform the actual splicing into children
+        parent.definingChildren.splice(
+            indexOfDefiningChildren,
+            0,
+            ...newChildren,
+        );
+    }
+}
diff --git a/packages/doenetml-worker-javascript/src/Core.js b/packages/doenetml-worker-javascript/src/Core.js
index 1ce8d4eaf..6f88cf6fb 100644
--- a/packages/doenetml-worker-javascript/src/Core.js
+++ b/packages/doenetml-worker-javascript/src/Core.js
@@ -27,9 +27,15 @@ import {
     unwrapSource,
 } from "./utils/dast/convertNormalizedDast";
 import { DependencyHandler } from "./Dependencies";
+import { ActionTriggerScheduler } from "./ActionTriggerScheduler";
 import { AutoSubmitManager } from "./AutoSubmitManager";
+import { ChildMatcher } from "./ChildMatcher";
+import { ComponentLifecycle } from "./ComponentLifecycle";
+import { DeletionEngine } from "./DeletionEngine";
 import { DiagnosticsManager } from "./DiagnosticsManager";
 import { NavigationHandler } from "./NavigationHandler";
+import { ProcessQueue } from "./ProcessQueue";
+import { RendererInstructionBuilder } from "./RendererInstructionBuilder";
 import { ResolverAdapter } from "./ResolverAdapter";
 import { StatePersistence } from "./StatePersistence";
 import { VisibilityTracker } from "./VisibilityTracker";
@@ -48,8 +54,10 @@ import {
 
 // Several feature areas have been extracted into their own modules
 // (DiagnosticsManager, VisibilityTracker, StatePersistence, AutoSubmitManager,
-// NavigationHandler, ResolverAdapter, and the `nameResolver` namespace). Core
-// retains thin wrapper methods so the public surface — used by CoreWorker,
+// NavigationHandler, ResolverAdapter, RendererInstructionBuilder,
+// ProcessQueue, ComponentLifecycle, ChildMatcher, DeletionEngine,
+// ActionTriggerScheduler, and the `nameResolver` namespace). Core retains
+// thin wrapper methods so the public surface — used by CoreWorker,
 // `coreFunctions`-bound references, components, and tests — keeps working.
 // Each delegating block is grouped near its original location and tagged with
 // a `// → managerName` marker; see the corresponding module for details.
@@ -198,6 +206,16 @@ export default class Core {
         this.autoSubmitManager = new AutoSubmitManager({ core: this });
         this.navigationHandler = new NavigationHandler({ core: this });
         this.resolverAdapter = new ResolverAdapter({ core: this });
+        this.rendererInstructionBuilder = new RendererInstructionBuilder({
+            core: this,
+        });
+        this.processQueueManager = new ProcessQueue({ core: this });
+        this.componentLifecycle = new ComponentLifecycle({ core: this });
+        this.childMatcher = new ChildMatcher({ core: this });
+        this.deletionEngine = new DeletionEngine({ core: this });
+        this.actionTriggerScheduler = new ActionTriggerScheduler({
+            core: this,
+        });
 
         // console.time('serialize doenetML');
 
@@ -238,20 +256,20 @@ export default class Core {
         this._components = [];
         this.componentIdxByStateId = {};
         this._components[this.nComponentsInit - 1] = undefined;
-        this.componentsToRender = {};
-        this.componentsWithChangedChildrenToRender = new Set([]);
         this.errorComponentsToAdd = [];
 
-        this.stateVariableChangeTriggers = {};
-        this.actionsChangedToActions = {};
-        this.originsOfActionsChangedToActions = {};
+        // Reset action-trigger registries managed by `this.actionTriggerScheduler`
+        // (see ActionTriggerScheduler.ts) so a previous run does not leak in.
+        this.actionTriggerScheduler.reset();
 
         this.essentialValuesSavedInDefinition = {};
 
         this.statePersistence = new StatePersistence({ core: this });
 
-        // rendererState the current state of each renderer, keyed by componentIdx
-        this.rendererState = {};
+        // Reset renderer state managed by `this.rendererInstructionBuilder`
+        // (see RendererInstructionBuilder.ts) so a previous run does not leak
+        // into this document.
+        this.rendererInstructionBuilder.reset();
 
         // rendererVariablesByComponentType is a description
         // of the which variables are sent to the renderers,
@@ -282,9 +300,10 @@ export default class Core {
             );
         }
 
-        this.processQueue = [];
-
-        this.stopProcessingRequests = false;
+        // Reset the process queue managed by `this.processQueueManager`
+        // (see ProcessQueue.ts) so a previous run does not leak into this
+        // document.
+        this.processQueueManager.reset();
 
         this.dependencies = new DependencyHandler({
             _components: this._components,
@@ -452,13 +471,22 @@ export default class Core {
         );
     }
 
-    callUpdateRenderers(args, init = false) {
-        let diagnostics = undefined;
-        if (this.hasPendingDiagnostics) {
-            diagnostics = this.getDiagnostics().diagnostics;
-        }
+    // → rendererInstructionBuilder
+    get componentsToRender() {
+        return this.rendererInstructionBuilder.componentsToRender;
+    }
+
+    get componentsWithChangedChildrenToRender() {
+        return this.rendererInstructionBuilder
+            .componentsWithChangedChildrenToRender;
+    }
+
+    get rendererState() {
+        return this.rendererInstructionBuilder.rendererState;
+    }
 
-        this.updateRenderersCallback({ ...args, init, diagnostics });
+    callUpdateRenderers(args, init = false) {
+        return this.rendererInstructionBuilder.callUpdateRenderers(args, init);
     }
 
     // → diagnosticsManager
@@ -712,463 +740,47 @@ export default class Core {
         return newComponents;
     }
 
-    async updateRendererInstructions({
-        componentNamesToUpdate,
-        sourceOfUpdate = {},
-        actionId,
-    }) {
-        let deletedRenderers = [];
-
-        let updateInstructions = [];
-        let rendererStatesToUpdate = [];
-
-        let newChildrenInstructions = {};
-
-        // copy components with changed children and reset for next time
-        let componentsWithChangedChildrenToRenderInProgress =
-            this.componentsWithChangedChildrenToRender;
-        this.componentsWithChangedChildrenToRender = new Set([]);
-
-        //TODO: Figure out what we need from here
-        for (let componentIdx of componentsWithChangedChildrenToRenderInProgress) {
-            if (componentIdx in this.componentsToRender) {
-                // check to see if current children who render are
-                // different from last time rendered
-
-                let currentChildIdentifiers = [];
-                let unproxiedComponent = this._components[componentIdx];
-                let indicesToRender = [];
-
-                if (
-                    unproxiedComponent &&
-                    unproxiedComponent.constructor.renderChildren
-                ) {
-                    if (!unproxiedComponent.matchedCompositeChildren) {
-                        await this.deriveChildResultsFromDefiningChildren({
-                            parent: unproxiedComponent,
-                            expandComposites: true,
-                            forceExpandComposites: true,
-                        });
-                    }
-
-                    indicesToRender =
-                        await this.returnActiveChildrenIndicesToRender(
-                            unproxiedComponent,
-                        );
-
-                    let renderedInd = 0;
-                    for (let [
-                        ind,
-                        child,
-                    ] of unproxiedComponent.activeChildren.entries()) {
-                        if (indicesToRender.includes(ind)) {
-                            if (child.rendererType) {
-                                currentChildIdentifiers.push(
-                                    `nameType:${child.componentIdx};${child.componentType}`,
-                                );
-                                renderedInd++;
-                            } else if (typeof child === "string") {
-                                currentChildIdentifiers.push(
-                                    `string${renderedInd}:${child}`,
-                                );
-                                renderedInd++;
-                            } else if (typeof child === "number") {
-                                currentChildIdentifiers.push(
-                                    `number${renderedInd}:${child.toString()}`,
-                                );
-                                renderedInd++;
-                            } else {
-                                currentChildIdentifiers.push("");
-                            }
-                        } else {
-                            currentChildIdentifiers.push("");
-                        }
-                    }
-                }
-
-                let previousChildRenderers =
-                    this.componentsToRender[componentIdx].children;
-
-                let previousChildIdentifiers = [];
-                for (let [ind, child] of previousChildRenderers.entries()) {
-                    if (child === null) {
-                        previousChildIdentifiers.push("");
-                    } else if (child.componentIdx != undefined) {
-                        previousChildIdentifiers.push(
-                            `nameType:${child.componentIdx};${child.componentType}`,
-                        );
-                    } else if (typeof child === "string") {
-                        previousChildIdentifiers.push(`string${ind}:${child}`);
-                    } else if (typeof child === "number") {
-                        previousChildIdentifiers.push(
-                            `number${ind}:${child.toString()}`,
-                        );
-                    }
-                }
-
-                if (
-                    currentChildIdentifiers.length !==
-                        previousChildIdentifiers.length ||
-                    currentChildIdentifiers.some(
-                        (v, i) => v !== previousChildIdentifiers[i],
-                    )
-                ) {
-                    // delete old renderers
-                    for (let child of previousChildRenderers) {
-                        if (child?.componentIdx != undefined) {
-                            let deletedNames =
-                                this.deleteFromComponentsToRender({
-                                    componentIdx: child.componentIdx,
-                                    recurseToChildren: true,
-                                    componentsWithChangedChildrenToRenderInProgress,
-                                });
-                            deletedRenderers.push(...deletedNames);
-                        }
-                    }
-
-                    // create new renderers
-                    let childrenToRender = [];
-                    if (indicesToRender.length > 0) {
-                        for (let [
-                            ind,
-                            child,
-                        ] of unproxiedComponent.activeChildren.entries()) {
-                            if (indicesToRender.includes(ind)) {
-                                if (child.rendererType) {
-                                    let results =
-                                        await this.initializeRenderedComponentInstruction(
-                                            child,
-                                            componentsWithChangedChildrenToRenderInProgress,
-                                        );
-                                    childrenToRender.push(
-                                        results.componentToRender,
-                                    );
-                                    rendererStatesToUpdate.push(
-                                        ...results.rendererStatesToUpdate,
-                                    );
-                                } else if (typeof child === "string") {
-                                    childrenToRender.push(child);
-                                } else if (typeof child === "number") {
-                                    childrenToRender.push(child.toString());
-                                } else {
-                                    childrenToRender.push(null);
-                                }
-                            } else {
-                                childrenToRender.push(null);
-                            }
-                        }
-                    }
-
-                    this.componentsToRender[componentIdx].children =
-                        childrenToRender;
-
-                    newChildrenInstructions[componentIdx] = childrenToRender;
-
-                    componentsWithChangedChildrenToRenderInProgress.delete(
-                        componentIdx,
-                    );
-
-                    if (!componentNamesToUpdate.includes(componentIdx)) {
-                        componentNamesToUpdate.push(componentIdx);
-                    }
-                }
-            }
-        }
-
-        for (let componentIdx of componentNamesToUpdate) {
-            if (
-                componentIdx in this.componentsToRender
-                // && !deletedRenderers.includes(componentIdx)  TODO: what if recreate with same name?
-            ) {
-                let component = this._components[componentIdx];
-                if (component) {
-                    let stateValuesForRenderer = {};
-                    for (let stateVariable in component.state) {
-                        if (component.state[stateVariable].forRenderer) {
-                            let value = removeFunctionsMathExpressionClass(
-                                await component.state[stateVariable].value,
-                            );
-                            // if (value !== null && typeof value === 'object') {
-                            //   value = new Proxy(value, readOnlyProxyHandler)
-                            // }
-                            stateValuesForRenderer[stateVariable] = value;
-                        }
-                    }
-
-                    if (component.compositeReplacementActiveRange) {
-                        stateValuesForRenderer._compositeReplacementActiveRange =
-                            component.compositeReplacementActiveRange;
-                    }
-
-                    let newRendererState = {
-                        componentIdx,
-                        stateValues: stateValuesForRenderer,
-                        rendererType: component.rendererType, // TODO: need this to ignore baseVariables change: is this right place?
-                    };
-
-                    // this.renderState is used to save the renderer state to the database
-                    if (!this.rendererState[componentIdx]) {
-                        this.rendererState[componentIdx] = {};
-                    }
-
-                    this.rendererState[componentIdx].stateValues =
-                        stateValuesForRenderer;
-
-                    // only add childrenInstructions if they changed
-                    if (newChildrenInstructions[componentIdx]) {
-                        newRendererState.childrenInstructions =
-                            newChildrenInstructions[componentIdx];
-                        this.rendererState[componentIdx].childrenInstructions =
-                            newChildrenInstructions[componentIdx];
-                    }
-
-                    rendererStatesToUpdate.push(newRendererState);
-                }
-            }
-        }
-
-        // rendererStatesToUpdate = rendererStatesToUpdate.filter(x => !deletedRenderers.includes(x))
-        if (rendererStatesToUpdate.length > 0) {
-            let instruction = {
-                instructionType: "updateRendererStates",
-                rendererStatesToUpdate,
-                sourceOfUpdate,
-            };
-            updateInstructions.splice(0, 0, instruction);
-        }
-
-        this.callUpdateRenderers({ updateInstructions, actionId });
+    async updateRendererInstructions(args) {
+        return this.rendererInstructionBuilder.updateRendererInstructions(args);
     }
 
     async initializeRenderedComponentInstruction(
         component,
-        componentsWithChangedChildrenToRenderInProgress = new Set([]),
+        componentsWithChangedChildrenToRenderInProgress,
     ) {
-        if (component.rendererType === undefined) {
-            return;
-        }
-
-        if (!component.matchedCompositeChildren) {
-            await this.deriveChildResultsFromDefiningChildren({
-                parent: component,
-                expandComposites: true, //forceExpandComposites: true,
-            });
-        }
-
-        let rendererStatesToUpdate = [];
-        let rendererStatesToForceUpdate = [];
-
-        let stateValuesForRenderer = {};
-        let stateValuesForRendererAlwaysUpdate = {};
-        let alwaysUpdate = false;
-        for (let stateVariable in component.state) {
-            if (component.state[stateVariable].forRenderer) {
-                stateValuesForRenderer[stateVariable] =
-                    removeFunctionsMathExpressionClass(
-                        await component.state[stateVariable].value,
-                    );
-                if (component.state[stateVariable].alwaysUpdateRenderer) {
-                    alwaysUpdate = true;
-                }
-            }
-        }
-
-        if (component.compositeReplacementActiveRange) {
-            stateValuesForRenderer._compositeReplacementActiveRange =
-                component.compositeReplacementActiveRange;
-        }
-
-        if (alwaysUpdate) {
-            stateValuesForRendererAlwaysUpdate = stateValuesForRenderer;
-        }
-
-        let componentIdx = component.componentIdx;
-
-        let childrenToRender = [];
-        if (component.constructor.renderChildren) {
-            let indicesToRender =
-                await this.returnActiveChildrenIndicesToRender(component);
-            for (let [ind, child] of component.activeChildren.entries()) {
-                if (indicesToRender.includes(ind)) {
-                    if (child.rendererType) {
-                        let results =
-                            await this.initializeRenderedComponentInstruction(
-                                child,
-                                componentsWithChangedChildrenToRenderInProgress,
-                            );
-                        childrenToRender.push(results.componentToRender);
-                        rendererStatesToUpdate.push(
-                            ...results.rendererStatesToUpdate,
-                        );
-                        rendererStatesToForceUpdate.push(
-                            ...results.rendererStatesToForceUpdate,
-                        );
-                    } else if (typeof child === "string") {
-                        childrenToRender.push(child);
-                    } else if (typeof child === "number") {
-                        childrenToRender.push(child.toString());
-                    } else {
-                        childrenToRender.push(null);
-                    }
-                } else {
-                    childrenToRender.push(null);
-                }
-            }
-        }
-
-        rendererStatesToUpdate.push({
-            componentIdx,
-            stateValues: stateValuesForRenderer,
-            childrenInstructions: childrenToRender,
-        });
-        if (Object.keys(stateValuesForRendererAlwaysUpdate).length > 0) {
-            rendererStatesToForceUpdate.push({
-                componentIdx,
-                stateValues: stateValuesForRendererAlwaysUpdate,
-            });
-        }
-
-        // this.renderState is used to save the renderer state to the database
-        this.rendererState[componentIdx] = {
-            stateValues: stateValuesForRenderer,
-            childrenInstructions: childrenToRender,
-        };
-
-        componentsWithChangedChildrenToRenderInProgress.delete(componentIdx);
-
-        let requestActions = {};
-        for (let actionName in component.actions) {
-            requestActions[actionName] = {
-                actionName,
-                componentIdx: component.componentIdx,
-            };
-        }
-
-        for (let actionName in component.externalActions) {
-            let action = await component.externalActions[actionName];
-            if (action) {
-                requestActions[actionName] = {
-                    actionName,
-                    componentIdx: action.componentIdx,
-                };
-            }
-        }
-
-        let rendererInstructions = {
-            componentIdx: componentIdx,
-            effectiveIdx: component.componentOrAdaptedIdx,
-            id: this.getRendererId(component),
-            componentType: component.componentType,
-            rendererType: component.rendererType,
-            actions: requestActions,
-        };
-
-        this.componentsToRender[componentIdx] = {
-            children: childrenToRender,
-        };
-
-        return {
-            componentToRender: rendererInstructions,
-            rendererStatesToUpdate,
-            rendererStatesToForceUpdate,
-        };
+        return this.rendererInstructionBuilder.initializeRenderedComponentInstruction(
+            component,
+            componentsWithChangedChildrenToRenderInProgress,
+        );
     }
 
-    /**
-     * Get the `rendererId` of `component`,
-     * where `rendererId` is the `rootName` of the component, if it exists,
-     * else the `componentIdx` as a string.
-     *
-     * The `rootName` is the simplest unique reference to the component
-     * when the document root is the origin. As `rootName` is designed to be
-     * a HTML id, indices are represented with `:`. For example,
-     * if `$a.b[2][3].c` is the simplest reference to a component from the root,
-     * then its root name will be `a.b:2:3.c`.
-     *
-     * If a component was adapted from another component,
-     * then the `renderedId` of the original component is used instead,
-     * as that corresponds to the component that was authored.
-     */
     getRendererId(component) {
-        return (
-            this.rootNames?.[component.componentOrAdaptedIdx] ??
-            `_id_${component.componentOrAdaptedIdx.toString()}`
-        );
+        return this.rendererInstructionBuilder.getRendererId(component);
     }
 
-    deleteFromComponentsToRender({
-        componentIdx,
-        recurseToChildren = true,
-        componentsWithChangedChildrenToRenderInProgress,
-    }) {
-        let deletedComponentNames = [componentIdx];
-        if (recurseToChildren) {
-            let componentInstruction = this.componentsToRender[componentIdx];
-            if (componentInstruction) {
-                for (let child of componentInstruction.children) {
-                    if (child) {
-                        let additionalDeleted =
-                            this.deleteFromComponentsToRender({
-                                componentIdx: child.componentIdx,
-                                recurseToChildren,
-                                componentsWithChangedChildrenToRenderInProgress,
-                            });
-                        deletedComponentNames.push(...additionalDeleted);
-                    }
-                }
-            }
-        }
-        delete this.componentsToRender[componentIdx];
-        componentsWithChangedChildrenToRenderInProgress.delete(componentIdx);
-
-        return deletedComponentNames;
+    deleteFromComponentsToRender(args) {
+        return this.rendererInstructionBuilder.deleteFromComponentsToRender(
+            args,
+        );
     }
 
-    async processStateVariableTriggers(updateRenderersIfTriggered = false) {
-        // TODO: can we make this more efficient by only checking components that changed?
-        // componentsToUpdateRenderers is close, but it includes only rendered components
-        // and we could have components with triggers that are not rendered
-
-        let triggeredAction = false;
-
-        for (const componentIdxStr in this.stateVariableChangeTriggers) {
-            const componentIdx = Number(componentIdxStr);
-            let component = this._components[componentIdx];
-            for (let stateVariable in this.stateVariableChangeTriggers[
-                componentIdx
-            ]) {
-                let triggerInstructions =
-                    this.stateVariableChangeTriggers[componentIdx][
-                        stateVariable
-                    ];
+    // → actionTriggerScheduler
+    get stateVariableChangeTriggers() {
+        return this.actionTriggerScheduler.stateVariableChangeTriggers;
+    }
 
-                let value = await component.state[stateVariable].value;
+    get actionsChangedToActions() {
+        return this.actionTriggerScheduler.actionsChangedToActions;
+    }
 
-                if (value !== triggerInstructions.previousValue) {
-                    let previousValue = triggerInstructions.previousValue;
-                    triggerInstructions.previousValue = value;
-                    let action = component.actions[triggerInstructions.action];
-                    if (action) {
-                        await this.performAction({
-                            componentIdx,
-                            actionName: triggerInstructions.action,
-                            args: {
-                                stateValues: { [stateVariable]: value },
-                                previousValues: {
-                                    [stateVariable]: previousValue,
-                                },
-                                skipRendererUpdate: true,
-                            },
-                        });
-                        triggeredAction = true;
-                    }
-                }
-            }
-        }
+    get originsOfActionsChangedToActions() {
+        return this.actionTriggerScheduler.originsOfActionsChangedToActions;
+    }
 
-        if (triggeredAction && updateRenderersIfTriggered) {
-            await this.updateAllChangedRenderers();
-        }
+    async processStateVariableTriggers(updateRenderersIfTriggered = false) {
+        return this.actionTriggerScheduler.processStateVariableTriggers(
+            updateRenderersIfTriggered,
+        );
     }
 
     async expandAllComposites(component, force = false) {
@@ -1909,218 +1521,63 @@ export default class Core {
     }
 
     recordStateVariablesMustEvaluate(componentIdx) {
-        let comp = this._components[componentIdx];
+        return this.actionTriggerScheduler.recordStateVariablesMustEvaluate(
+            componentIdx,
+        );
+    }
 
-        for (let vName in comp.state) {
-            if (comp.state[vName].mustEvaluate) {
-                this.updateInfo.stateVariablesToEvaluate.push({
-                    componentIdx,
-                    stateVariable: vName,
-                });
-            }
-        }
+    // → childMatcher
+    async deriveChildResultsFromDefiningChildren(args) {
+        return this.childMatcher.deriveChildResultsFromDefiningChildren(args);
     }
 
-    async deriveChildResultsFromDefiningChildren({
+    async expandCompositeOfDefiningChildren(
         parent,
-        expandComposites = true,
-        forceExpandComposites = false,
-    }) {
-        // console.log(`derive child results for ${parent.componentIdx}, ${expandComposites}, ${forceExpandComposites}`)
-
-        if (!this.derivingChildResults) {
-            this.derivingChildResults = [];
-        }
-        if (this.derivingChildResults.includes(parent.componentIdx)) {
-            // console.log(`not deriving child results of ${parent.componentIdx} while in the middle of deriving them already`)
-            return { success: false, skipping: true };
-        }
-        this.derivingChildResults.push(parent.componentIdx);
-
-        // create allChildren and activeChildren from defining children
-        // apply child logic and substitute adapters to modify activeChildren
-
-        // if (parent.activeChildren) {
-        //   // if there are any deferred child state variables
-        //   // evaluate them before changing the active children
-        //   this.evaluatedDeferredChildStateVariables(parent);
-        // }
-
-        // attempt to expand composites before modifying active children
-        let result = await this.expandCompositeOfDefiningChildren(
-            parent,
-            parent.definingChildren,
-            expandComposites,
-            forceExpandComposites,
-        );
-        parent.unexpandedCompositesReady = result.unexpandedCompositesReady;
-        parent.unexpandedCompositesNotReady =
-            result.unexpandedCompositesNotReady;
-
-        let previousActiveChildren;
+        children,
+        expandComposites,
+        forceExpandComposites,
+    ) {
+        // if composite is not directly matched by any childGroup
+        // then replace the composite with its replacements,
+        // expanding it if not already expanded
 
-        if (parent.activeChildren) {
-            previousActiveChildren = parent.activeChildren.map((child) =>
-                child.componentIdx ? child.componentIdx : child,
-            );
-        }
+        // console.log(`expanding defining children of of ${parent.componentIdx}`)
 
-        parent.activeChildren = parent.definingChildren.slice(); // shallow copy
+        let unexpandedCompositesReady = [];
+        let unexpandedCompositesNotReady = [];
 
-        // allChildren include activeChildren, definingChildren,
-        // and possibly some children that are neither
-        // (which could occur when a composite is expanded and the result is adapted)
-        // ignores string and number primitive children
-        parent.allChildren = {};
+        for (let childInd = 0; childInd < children.length; childInd++) {
+            let child = children[childInd];
 
-        // allChildrenOrdered contains same children as allChildren,
-        // but retaining an order that we can use for counters.
-        // If defining children are replaced my composite replacements or adapters,
-        // those children will come immediately after the corresponding defining child
-        parent.allChildrenOrdered = [];
+            if (
+                child instanceof
+                this.componentInfoObjects.allComponentClasses._composite
+            ) {
+                // if composite itself is in the child logic
+                // then don't replace it with its replacements
+                // but leave the composite as an activeChild
+                if (
+                    this.findChildGroup(child.componentType, parent.constructor)
+                        .success
+                ) {
+                    continue;
+                }
 
-        for (let ind = 0; ind < parent.activeChildren.length; ind++) {
-            let child = parent.activeChildren[ind];
-            let childIdx;
-            if (typeof child !== "object") {
-                continue;
-            }
+                // expand composite if it isn't already
+                if (!child.isExpanded) {
+                    // console.log(`child ${child.componentIdx} is not expanded`)
+                    // console.log(child.state.readyToExpandWhenResolved.isResolved)
 
-            childIdx = child.componentIdx;
-
-            parent.allChildren[childIdx] = {
-                activeChildrenIndex: ind,
-                definingChildrenIndex: ind,
-                component: child,
-            };
-
-            parent.allChildrenOrdered.push(childIdx);
-        }
-
-        // if any of activeChildren are expanded compositeComponents
-        // replace with new components given by the composite component
-        await this.replaceCompositeChildren(parent);
-
-        let childGroupResults = await this.matchChildrenToChildGroups(parent);
-
-        if (childGroupResults.success) {
-            delete this.unmatchedChildren[parent.componentIdx];
-            parent.childrenMatchedWithPlaceholders = true;
-            parent.matchedCompositeChildrenWithPlaceholders = true;
-        } else {
-            parent.childrenMatchedWithPlaceholders = false;
-            parent.matchedCompositeChildrenWithPlaceholders = true;
-
-            let unmatchedChildrenTypes = [];
-            for (let child of childGroupResults.unmatchedChildren) {
-                if (typeof child === "string") {
-                    unmatchedChildrenTypes.push("string");
-                } else {
-                    unmatchedChildrenTypes.push(
-                        "`<" + child.componentType + ">`",
-                    );
-                    if (
-                        this.componentInfoObjects.isInheritedComponentType({
-                            inheritedComponentType: child.componentType,
-                            baseComponentType: "_composite",
-                        })
-                    ) {
-                        parent.matchedCompositeChildrenWithPlaceholders = false;
-                    }
-                }
-            }
-
-            if (parent.doenetAttributes.isAttributeChildFor) {
-                let attributeForComponentType =
-                    parent.ancestors[0].componentClass.componentType;
-                this.unmatchedChildren[parent.componentIdx] = {
-                    message: `Invalid format for attribute ${parent.doenetAttributes.isAttributeChildFor} of \`<${attributeForComponentType}>\`.`,
-                };
-            } else {
-                this.unmatchedChildren[parent.componentIdx] = {
-                    message: `Invalid children for \`<${
-                        parent.componentType
-                    }>\`: Found invalid children: ${unmatchedChildrenTypes.join(
-                        ", ",
-                    )}`,
-                };
-            }
-        }
-
-        await this.dependencies.addBlockersFromChangedActiveChildren({
-            parent,
-        });
-
-        let ind = this.derivingChildResults.indexOf(parent.componentIdx);
-
-        this.derivingChildResults.splice(ind, 1);
-
-        if (parent.constructor.renderChildren) {
-            let childrenUnchanged =
-                previousActiveChildren &&
-                previousActiveChildren.length == parent.activeChildren.length &&
-                parent.activeChildren.every((child, ind) =>
-                    child.componentIdx
-                        ? child.componentIdx === previousActiveChildren[ind]
-                        : child === previousActiveChildren[ind],
-                );
-            if (!childrenUnchanged) {
-                this.componentsWithChangedChildrenToRender.add(
-                    parent.componentIdx,
-                );
-            }
-        }
-
-        return childGroupResults;
-    }
-
-    async expandCompositeOfDefiningChildren(
-        parent,
-        children,
-        expandComposites,
-        forceExpandComposites,
-    ) {
-        // if composite is not directly matched by any childGroup
-        // then replace the composite with its replacements,
-        // expanding it if not already expanded
-
-        // console.log(`expanding defining children of of ${parent.componentIdx}`)
-
-        let unexpandedCompositesReady = [];
-        let unexpandedCompositesNotReady = [];
-
-        for (let childInd = 0; childInd < children.length; childInd++) {
-            let child = children[childInd];
-
-            if (
-                child instanceof
-                this.componentInfoObjects.allComponentClasses._composite
-            ) {
-                // if composite itself is in the child logic
-                // then don't replace it with its replacements
-                // but leave the composite as an activeChild
-                if (
-                    this.findChildGroup(child.componentType, parent.constructor)
-                        .success
-                ) {
-                    continue;
-                }
-
-                // expand composite if it isn't already
-                if (!child.isExpanded) {
-                    // console.log(`child ${child.componentIdx} is not expanded`)
-                    // console.log(child.state.readyToExpandWhenResolved.isResolved)
-
-                    if (!child.state.readyToExpandWhenResolved.isResolved) {
-                        if (expandComposites) {
-                            let resolveResult =
-                                await this.dependencies.resolveItem({
-                                    componentIdx: child.componentIdx,
-                                    type: "stateVariable",
-                                    stateVariable: "readyToExpandWhenResolved",
-                                    expandComposites, //: forceExpandComposites,
-                                    force: forceExpandComposites,
-                                });
+                    if (!child.state.readyToExpandWhenResolved.isResolved) {
+                        if (expandComposites) {
+                            let resolveResult =
+                                await this.dependencies.resolveItem({
+                                    componentIdx: child.componentIdx,
+                                    type: "stateVariable",
+                                    stateVariable: "readyToExpandWhenResolved",
+                                    expandComposites, //: forceExpandComposites,
+                                    force: forceExpandComposites,
+                                });
 
                             if (!resolveResult.success) {
                                 unexpandedCompositesNotReady.push(
@@ -2175,82 +1632,11 @@ export default class Core {
     }
 
     async matchChildrenToChildGroups(parent) {
-        parent.childMatchesByGroup = {};
-
-        for (let groupName in parent.constructor.childGroupIndsByName) {
-            parent.childMatchesByGroup[groupName] = [];
-        }
-
-        let success = true;
-
-        let unmatchedChildren = [];
-
-        for (let [ind, child] of parent.activeChildren.entries()) {
-            let childType =
-                typeof child !== "object" ? typeof child : child.componentType;
-
-            if (childType === undefined) {
-                success = false;
-                unmatchedChildren.push(child);
-                continue;
-            }
-
-            let result = this.findChildGroup(childType, parent.constructor);
-
-            if (result.success) {
-                parent.childMatchesByGroup[result.group].push(ind);
-
-                if (result.adapterIndUsed !== undefined) {
-                    await this.substituteAdapter({
-                        parent,
-                        childInd: ind,
-                        adapterIndUsed: result.adapterIndUsed,
-                    });
-                }
-            } else {
-                success = false;
-                unmatchedChildren.push(child);
-            }
-        }
-
-        return { success, unmatchedChildren };
+        return this.childMatcher.matchChildrenToChildGroups(parent);
     }
 
     findChildGroup(childType, parentClass) {
-        let result = this.findChildGroupNoAdapters(childType, parentClass);
-
-        if (result.success) {
-            return result;
-        } else if (childType === "string") {
-            return { success: false };
-        }
-
-        // check if can match with adapters
-        let childClass =
-            this.componentInfoObjects.allComponentClasses[childType];
-
-        // if didn't match child, attempt to match with child's adapters
-        let numAdapters = childClass.numAdapters;
-
-        for (let n = 0; n < numAdapters; n++) {
-            let adapterComponentType = childClass.getAdapterComponentType(
-                n,
-                this.componentInfoObjects.publicStateVariableInfo,
-            );
-
-            result = this.findChildGroupNoAdapters(
-                adapterComponentType,
-                parentClass,
-            );
-
-            if (result.success) {
-                result.adapterIndUsed = n;
-                return result;
-            }
-        }
-
-        // lastly try to match with afterAdapters set to true
-        return this.findChildGroupNoAdapters(childType, parentClass, true);
+        return this.childMatcher.findChildGroup(childType, parentClass);
     }
 
     findChildGroupNoAdapters(
@@ -2258,204 +1644,19 @@ export default class Core {
         parentClass,
         afterAdapters = false,
     ) {
-        if (parentClass.childGroupOfComponentType[componentType]) {
-            return {
-                success: true,
-                group: parentClass.childGroupOfComponentType[componentType],
-            };
-        }
-
-        for (let group of parentClass.childGroups) {
-            for (let typeFromGroup of group.componentTypes) {
-                if (
-                    this.componentInfoObjects.isInheritedComponentType({
-                        inheritedComponentType: componentType,
-                        baseComponentType: typeFromGroup,
-                    })
-                ) {
-                    if (group.matchAfterAdapters && !afterAdapters) {
-                        continue;
-                    }
-                    // don't match composites to the base component
-                    // so that they will expand
-                    if (
-                        !(
-                            typeFromGroup === "_base" &&
-                            this.componentInfoObjects.isInheritedComponentType({
-                                inheritedComponentType: componentType,
-                                baseComponentType: "_composite",
-                            })
-                        )
-                    ) {
-                        parentClass.childGroupOfComponentType[componentType] =
-                            group.group;
-
-                        return {
-                            success: true,
-                            group: group.group,
-                        };
-                    }
-                }
-            }
-        }
-
-        return { success: false };
+        return this.childMatcher.findChildGroupNoAdapters(
+            componentType,
+            parentClass,
+            afterAdapters,
+        );
     }
 
     async returnActiveChildrenIndicesToRender(component) {
-        let indicesToRender = [];
-        let numChildrenToRender = Infinity;
-        if ("numChildrenToRender" in component.state) {
-            numChildrenToRender =
-                await component.stateValues.numChildrenToRender;
-        }
-        let childIndicesToRender = null;
-        if ("childIndicesToRender" in component.state) {
-            childIndicesToRender =
-                await component.stateValues.childIndicesToRender;
-        }
-
-        for (let [ind, child] of component.activeChildren.entries()) {
-            if (ind >= numChildrenToRender) {
-                break;
-            }
-
-            if (childIndicesToRender && !childIndicesToRender.includes(ind)) {
-                continue;
-            }
-
-            if (typeof child === "object") {
-                if (
-                    child.constructor.sendToRendererEvenIfHidden ||
-                    !(await child.stateValues.hidden)
-                ) {
-                    indicesToRender.push(ind);
-                }
-            } else {
-                // if have a primitive,
-                // will be hidden if a composite source is hidden
-                let hidden = false;
-                if (component.compositeReplacementActiveRange) {
-                    for (let compositeInfo of component.compositeReplacementActiveRange) {
-                        let composite =
-                            this._components[compositeInfo.compositeIdx];
-                        if (await composite.stateValues.hidden) {
-                            if (
-                                compositeInfo.firstInd <= ind &&
-                                compositeInfo.lastInd >= ind
-                            ) {
-                                hidden = true;
-                                break;
-                            }
-                        }
-                    }
-                }
-                if (!hidden) {
-                    indicesToRender.push(ind);
-                }
-            }
-        }
-
-        return indicesToRender;
+        return this.childMatcher.returnActiveChildrenIndicesToRender(component);
     }
 
-    async substituteAdapter({ parent, childInd, adapterIndUsed }) {
-        // replace activeChildren with their adapters
-
-        let originalChild = parent.activeChildren[childInd];
-
-        let newSerializedChild;
-        if (originalChild.componentIdx != undefined) {
-            newSerializedChild = originalChild.getAdapter(adapterIndUsed);
-            newSerializedChild.componentIdx = this._components.length;
-            this._components[this._components.length] = undefined;
-        } else {
-            // XXX: how does this work with the new componentIdx approach?
-
-            // child isn't a component, just an object with a componentType
-            // Create an object that is just the componentType of the adapter
-            newSerializedChild = {
-                componentType: this.componentInfoObjects.allComponentClasses[
-                    originalChild.componentType
-                ].getAdapterComponentType(
-                    adapterIndUsed,
-                    this.componentInfoObjects.publicStateVariableInfo,
-                ),
-                placeholderInd: originalChild.placeholderInd + "adapt",
-            };
-        }
-
-        let adapter = originalChild.adapterUsed;
-
-        if (
-            adapter === undefined ||
-            adapter.componentType !== newSerializedChild.componentType
-        ) {
-            if (originalChild.componentIdx != undefined) {
-                newSerializedChild.adaptedFrom = originalChild.componentIdx;
-                assignDoenetMLRange(
-                    [newSerializedChild],
-                    originalChild.position,
-                    originalChild.sourceDoc,
-                );
-                let newChildrenResult = await this.createIsolatedComponents({
-                    serializedComponents: [newSerializedChild],
-                    shadow: true,
-                    ancestors: originalChild.ancestors,
-                });
-
-                adapter = newChildrenResult.components[0];
-            } else {
-                // XXX: how does this work with the new componentIdx approach?
-
-                // didn't have a component for the original child, just a componentType
-                // Adapter will also just be the componentType returned from childmatches
-                newSerializedChild.adaptedFrom = originalChild;
-                adapter = newSerializedChild;
-            }
-        }
-
-        // Replace originalChild with its adapter in activeChildren
-        parent.activeChildren.splice(childInd, 1, adapter);
-
-        // TODO: if originalChild is a placeholder, we lose track of it
-        // (other than through adaptedFrom of adapted)
-        // once we splice it out of activeChildren.  Is that a problem?
-
-        // Update allChildren to show that originalChild is no longer active
-        // and that adapter is now an active child
-        if (originalChild.componentIdx != undefined) {
-            // ignore placeholder active children
-            delete parent.allChildren[originalChild.componentIdx]
-                .activeChildrenIndex;
-            parent.allChildren[adapter.componentIdx] = {
-                activeChildrenIndex: childInd,
-                component: adapter,
-            };
-        }
-
-        // find index of originalChild in allChildrenOrdered
-        // and place adapter immediately afterward
-        if (originalChild.componentIdx != undefined) {
-            let originalInd = parent.allChildrenOrdered.indexOf(
-                originalChild.componentIdx,
-            );
-            parent.allChildrenOrdered.splice(
-                originalInd + 1,
-                0,
-                adapter.componentIdx,
-            );
-        } else {
-            // adapter of placeholder
-            let originalInd = parent.allChildrenOrdered.indexOf(
-                originalChild.placeholderInd,
-            );
-            parent.allChildrenOrdered.splice(
-                originalInd + 1,
-                0,
-                adapter.placeholderInd,
-            );
-        }
+    async substituteAdapter(args) {
+        return this.childMatcher.substituteAdapter(args);
     }
 
     async expandCompositeComponent(component) {
@@ -5042,109 +4243,8 @@ export default class Core {
         }
     }
 
-    async checkForActionChaining({ component, stateVariables }) {
-        if (!component) {
-            return;
-        }
-
-        if (!stateVariables) {
-            stateVariables = Object.keys(component.state);
-        }
-
-        for (let varName of stateVariables) {
-            let stateVarObj = component.state[varName];
-
-            if (stateVarObj.chainActionOnActionOfStateVariableTargets) {
-                let chainInfo =
-                    stateVarObj.chainActionOnActionOfStateVariableTargets;
-                let targetIds = await stateVarObj.value;
-
-                let originObj =
-                    this.originsOfActionsChangedToActions[
-                        component.componentIdx
-                    ];
-
-                let previousIds;
-                if (originObj) {
-                    previousIds = originObj[varName];
-                }
-
-                if (!previousIds) {
-                    previousIds = [];
-                }
-
-                let newTargets = [];
-
-                if (Array.isArray(targetIds)) {
-                    newTargets = [...targetIds];
-                    for (let id of newTargets) {
-                        let indPrev = previousIds.indexOf(id);
-
-                        if (indPrev === -1) {
-                            // found a component/action that wasn't previously chained
-                            let componentActionsChained =
-                                this.actionsChangedToActions[id];
-                            if (!componentActionsChained) {
-                                componentActionsChained =
-                                    this.actionsChangedToActions[id] = [];
-                            }
-
-                            componentActionsChained.push({
-                                componentIdx: component.componentIdx,
-                                actionName: chainInfo.triggeredAction,
-                                stateVariableDefiningChain: varName,
-                                args: {},
-                            });
-                        } else {
-                            // target was already chained
-                            // remove from previous names to indicate it should still be chained
-                            previousIds.splice(indPrev, 1);
-                        }
-                    }
-                }
-
-                // if any ids are left in previousIds,
-                // then they should no longer be chained
-                for (let idToNoLongerChain of previousIds) {
-                    let componentActionsChained =
-                        this.actionsChangedToActions[idToNoLongerChain];
-                    if (componentActionsChained) {
-                        let newComponentActionsChained = [];
-
-                        for (let chainedInfo of componentActionsChained) {
-                            if (
-                                chainedInfo.componentIdx !==
-                                    component.componentIdx ||
-                                chainedInfo.stateVariableDefiningChain !==
-                                    varName
-                            ) {
-                                newComponentActionsChained.push(chainedInfo);
-                            }
-                        }
-
-                        this.actionsChangedToActions[idToNoLongerChain] =
-                            newComponentActionsChained;
-                    }
-                }
-
-                if (newTargets.length > 0) {
-                    if (!originObj) {
-                        originObj = this.originsOfActionsChangedToActions[
-                            component.componentIdx
-                        ] = {};
-                    }
-                    originObj[varName] = newTargets;
-                } else if (originObj) {
-                    delete originObj[varName];
-
-                    if (Object.keys(originObj).length === 0) {
-                        delete this.originsOfActionsChangedToActions[
-                            component.componentIdx
-                        ];
-                    }
-                }
-            }
-        }
+    async checkForActionChaining(args) {
+        return this.actionTriggerScheduler.checkForActionChaining(args);
     }
 
     async initializeArrayEntryStateVariable({
@@ -8675,708 +7775,167 @@ export default class Core {
     //   }
     // }
 
+    // → componentLifecycle
     registerComponent(component) {
-        if (this._components[component.componentIdx] !== undefined) {
-            throw Error(`Duplicate component index: ${component.componentIdx}`);
-        }
-        this._components[component.componentIdx] = component;
+        return this.componentLifecycle.registerComponent(component);
     }
 
     deregisterComponent(component, recursive = true) {
-        if (recursive === true) {
-            for (let childIdxStr in component.allChildren) {
-                this.deregisterComponent(
-                    component.allChildren[childIdxStr].component,
-                );
-            }
-        }
-
-        delete this._components[component.componentIdx];
+        return this.componentLifecycle.deregisterComponent(
+            component,
+            recursive,
+        );
     }
 
     setAncestors(component, ancestors = []) {
-        // set ancestors based on allChildren and attribute components
-        // so that all components get ancestors
-        // even if not activeChildren or definingChildren
-
-        component.ancestors = ancestors;
-
-        let ancestorsForChildren = [
-            {
-                componentIdx: component.componentIdx,
-                componentClass: component.constructor,
-            },
-            ...component.ancestors,
-        ];
-
-        for (const childIdxStr in component.allChildren) {
-            let unproxiedChild = this._components[childIdxStr];
-            // Note: when add and deleting replacements of shadowed composites,
-            // it is possible that we end up processing the defining children of ancestors of the composite
-            // while we were delaying processing the defining children of the composite's parent,
-            // which could lead to an attempt to set the ancestors of that composite's parent's children
-            // while the booking variable allChildren is in an inconsistent state.
-            // To avoid an error, we don't set ancestors in the case
-            // (See test "references to internal and external components, inconsistent new namespaces"
-            // from conditionalcontent.cy.js for an example that triggered the need for this check.)
-            // TODO: can we avoid the need for this check by preventing the algorithm from
-            // attempting to set ancestors in this case?
-            if (unproxiedChild) {
-                this.setAncestors(unproxiedChild, ancestorsForChildren);
-            }
-        }
-
-        for (let attrName in component.attributes) {
-            let comp = component.attributes[attrName].component;
-            if (comp) {
-                this.setAncestors(comp, ancestorsForChildren);
-            }
-        }
+        return this.componentLifecycle.setAncestors(component, ancestors);
     }
 
-    async addChildrenAndRecurseToShadows({
-        parent,
-        indexOfDefiningChildren,
-        newChildren,
-    }) {
-        this.spliceChildren(parent, indexOfDefiningChildren, newChildren);
-
-        let newChildrenResult = await this.processNewDefiningChildren({
-            parent,
-            expandComposites: true,
-        });
-
-        let addedComponents = {};
-        let deletedComponents = {};
-
-        if (!newChildrenResult.success) {
-            // try again, this time force expanding composites before giving up
-            newChildrenResult = await this.processNewDefiningChildren({
-                parent,
-                expandComposites: true,
-                forceExpandComposites: true,
-            });
-
-            if (!newChildrenResult.success) {
-                return newChildrenResult;
-            }
-        }
-
-        for (let child of newChildren) {
-            if (typeof child === "object") {
-                addedComponents[child.componentIdx] = child;
-            }
-        }
-
-        if (parent.shadowedBy) {
-            for (let shadowingParent of parent.shadowedBy) {
-                if (
-                    shadowingParent.shadows.propVariable ||
-                    shadowingParent.constructor.doNotExpandAsShadowed
-                ) {
-                    continue;
-                }
-
-                let composite =
-                    this._components[shadowingParent.shadows.compositeIdx];
-
-                let shadowingSerializeChildren = [];
-                let nComponents = this._components.length;
-
-                for (let child of newChildren) {
-                    if (typeof child === "object") {
-                        const serializedComponent = await child.serialize();
-
-                        const res = createNewComponentIndices(
-                            [serializedComponent],
-                            nComponents,
-                        );
-                        nComponents = res.nComponents;
-
-                        shadowingSerializeChildren.push(...res.components);
-                    } else {
-                        shadowingSerializeChildren.push(child);
-                    }
-                }
-
-                if (nComponents > this.components.length) {
-                    this._components[nComponents - 1] = undefined;
-                }
-
-                shadowingSerializeChildren = postProcessCopy({
-                    serializedComponents: shadowingSerializeChildren,
-                    componentIdx: shadowingParent.shadows.compositeIdx,
-                });
-
-                let unproxiedShadowingParent =
-                    this._components[shadowingParent.componentIdx];
-                this.parameterStack.push(
-                    unproxiedShadowingParent.sharedParameters,
-                    false,
-                );
-
-                let createResult = await this.createIsolatedComponents({
-                    serializedComponents: shadowingSerializeChildren,
-                    ancestors: shadowingParent.ancestors,
-                });
-
-                this.parameterStack.pop();
-
-                let shadowResult = await this.addChildrenAndRecurseToShadows({
-                    parent: unproxiedShadowingParent,
-                    indexOfDefiningChildren,
-                    newChildren: createResult.components,
-                });
-
-                if (!shadowResult.success) {
-                    throw Error(
-                        `was able to add components to parent but not shadows!`,
-                    );
-                }
-
-                Object.assign(addedComponents, shadowResult.addedComponents);
-            }
-        }
-
-        return {
-            success: true,
-            deletedComponents,
-            addedComponents,
-        };
-    }
-
-    /**
-     * Create and insert `_error` siblings requested by state-variable definitions
-     * during initial document construction.
-     */
-    async addQueuedErrorComponentsFromStateVariables() {
-        if (!this.errorComponentsToAdd?.length) {
-            return;
-        }
-
-        const errorComponentsToAdd = this.errorComponentsToAdd;
-        this.errorComponentsToAdd = [];
-
-        const numberInsertedAfterSource = {};
-
-        for (let errorInfo of errorComponentsToAdd) {
-            let sourceComponent = this._components[errorInfo.componentIdx];
-            let parent;
-
-            while (sourceComponent?.parentIdx > 0) {
-                const candidateParent =
-                    this._components[sourceComponent.parentIdx];
-
-                if (!candidateParent) {
-                    break;
-                }
-
-                if (candidateParent.constructor.canDisplayChildErrors) {
-                    parent = candidateParent;
-                    break;
-                }
-
-                sourceComponent = candidateParent;
-            }
-
-            if (!parent) {
-                if (this.document?.constructor.canDisplayChildErrors) {
-                    parent = this.document;
-                }
-            }
-
-            if (!parent) {
-                continue;
-            }
-
-            let indexOfDefiningChildren = parent.definingChildren.length;
-
-            if (sourceComponent?.parentIdx === parent.componentIdx) {
-                const sourceInd = parent.definingChildren.findIndex(
-                    (child) =>
-                        typeof child === "object" &&
-                        child.componentIdx === sourceComponent.componentIdx,
-                );
-
-                if (sourceInd !== -1) {
-                    const numberAlreadyInserted =
-                        numberInsertedAfterSource[
-                            sourceComponent.componentIdx
-                        ] ?? 0;
-                    indexOfDefiningChildren =
-                        sourceInd + 1 + numberAlreadyInserted;
-                    numberInsertedAfterSource[sourceComponent.componentIdx] =
-                        numberAlreadyInserted + 1;
-                }
-            }
-
-            let serializedErrorComponents = [
-                {
-                    type: "serialized",
-                    componentType: "_error",
-                    componentIdx: this._components.length,
-                    state: { message: errorInfo.message },
-                    position: errorInfo.position,
-                    sourceDoc: errorInfo.sourceDoc,
-                    children: [],
-                    attributes: {},
-                    doenetAttributes: {},
-                },
-            ];
-
-            this._components[this._components.length] = undefined;
-
-            let ancestors = [
-                {
-                    componentIdx: parent.componentIdx,
-                    componentClass: parent.constructor,
-                },
-                ...parent.ancestors,
-            ];
-
-            this.parameterStack.push(parent.sharedParameters, false);
-            let createResult;
-            try {
-                createResult = await this.createIsolatedComponents({
-                    serializedComponents: serializedErrorComponents,
-                    ancestors,
-                });
-            } finally {
-                this.parameterStack.pop();
-            }
-
-            let addResults = await this.addChildrenAndRecurseToShadows({
-                parent,
-                indexOfDefiningChildren,
-                newChildren: createResult.components,
-            });
-
-            if (!addResults.success) {
-                throw Error(
-                    "Couldn't add error component from state variable evaluation.",
-                );
-            }
-        }
-    }
-
-    async processNewDefiningChildren({
-        parent,
-        expandComposites = true,
-        forceExpandComposites = false,
-    }) {
-        this.parameterStack.push(parent.sharedParameters, false);
-        let childResult = await this.deriveChildResultsFromDefiningChildren({
-            parent,
-            expandComposites,
-            forceExpandComposites,
-        });
-        this.parameterStack.pop();
-
-        let ancestorsForChildren = [
-            {
-                componentIdx: parent.componentIdx,
-                componentClass: parent.constructor,
-            },
-            ...parent.ancestors,
-        ];
-
-        // set ancestors for allChildren of parent
-        // since could replace newChildren by adapters or via composites
-        for (const childIdxStr in parent.allChildren) {
-            let unproxiedChild = this._components[childIdxStr];
-            this.setAncestors(unproxiedChild, ancestorsForChildren);
-        }
-
-        return childResult;
-    }
-
-    spliceChildren(parent, indexOfDefiningChildren, newChildren) {
-        // splice newChildren into parent.definingChildren
-        // definingChildrenNumber is the index of parent.definingChildren
-        // before which to splice the newChildren (set to array length to add at end)
-
-        let numDefiningChildren = parent.definingChildren.length;
-
-        if (
-            !Number.isInteger(indexOfDefiningChildren) ||
-            indexOfDefiningChildren > numDefiningChildren ||
-            indexOfDefiningChildren < 0
-        ) {
-            throw Error(
-                "Can't add children at index " +
-                    indexOfDefiningChildren +
-                    ". Invalid index.",
-            );
-        }
-
-        // perform the actual splicing into children
-        parent.definingChildren.splice(
-            indexOfDefiningChildren,
-            0,
-            ...newChildren,
-        );
-    }
-
-    async deleteComponents({
-        components,
-        deleteUpstreamDependencies = true,
-        skipProcessingChildrenOfParents = [],
-    }) {
-        // to delete a component, one must
-        // 1. recursively delete all children and attribute components
-        // 3. should we delete or mark components who are upstream dependencies?
-        // 4. for all other downstream dependencies,
-        //    delete upstream link back to component
-
-        if (!Array.isArray(components)) {
-            components = [components];
-        }
-
-        // TODO: if delete a shadow directly it should be an error
-        // (though it will be OK to delete them through other side effects)
-
-        // step 1. Determine which components to delete
-        const componentsToDelete = {};
-        this.determineComponentsToDelete({
-            components,
-            deleteUpstreamDependencies,
-            componentsToDelete,
-        });
-
-        //Calculate parent set
-        const parentsOfPotentiallyDeleted = {};
-        for (const componentIdxStr in componentsToDelete) {
-            const componentIdx = Number(componentIdxStr);
-            let component = componentsToDelete[componentIdx];
-            let parent = this.components[component.parentIdx];
-
-            // only add parent if it is not in componentsToDelete itself
-            if (
-                parent === undefined ||
-                parent.componentIdx in componentsToDelete
-            ) {
-                continue;
-            }
-            let parentObj = parentsOfPotentiallyDeleted[component.parentIdx];
-            if (parentObj === undefined) {
-                parentObj = {
-                    parent: this._components[component.parentIdx],
-                    childNamesToBeDeleted: new Set(),
-                };
-                parentsOfPotentiallyDeleted[component.parentIdx] = parentObj;
-            }
-            parentObj.childNamesToBeDeleted.add(componentIdx);
-        }
-
-        // if component is a replacement of another component,
-        // need to delete component from the replacement
-        // so that it isn't added back as a child of its parent
-        // Also keep track of which ones deleted so can add back to replacements
-        // if the deletion is unsuccessful
-        let replacementsDeletedFromComposites = [];
-
-        for (const componentIdxStr in componentsToDelete) {
-            const componentIdx = Number(componentIdxStr);
-            let component = this._components[componentIdx];
-            if (component.replacementOf) {
-                let composite = component.replacementOf;
-
-                let replacementNames = composite.replacements.map(
-                    (x) => x.componentIdx,
-                );
-
-                let replacementInd = replacementNames.indexOf(componentIdx);
-                if (replacementInd !== -1) {
-                    composite.replacements.splice(replacementInd, 1);
-                    if (
-                        !replacementsDeletedFromComposites.includes(
-                            composite.componentIdx,
-                        )
-                    ) {
-                        replacementsDeletedFromComposites.push(
-                            composite.componentIdx,
-                        );
-                    }
-                }
-            }
-        }
-
-        for (const compositeIdxStr of replacementsDeletedFromComposites) {
-            if (!(compositeIdxStr in componentsToDelete)) {
-                await this.dependencies.addBlockersFromChangedReplacements(
-                    this._components[compositeIdxStr],
-                );
-            }
-        }
-
-        // delete component from parent's defining children
-        // and record parents
-        const allParents = [];
-        for (const parentIdxStr in parentsOfPotentiallyDeleted) {
-            const parentObj = parentsOfPotentiallyDeleted[parentIdxStr];
-            const parent = parentObj.parent;
-            allParents.push(parent);
-
-            // if (parent.activeChildren) {
-            //   this.evaluatedDeferredChildStateVariables(parent);
-            // }
-
-            for (
-                let ind = parent.definingChildren.length - 1;
-                ind >= 0;
-                ind--
-            ) {
-                const child = parent.definingChildren[ind];
-                if (parentObj.childNamesToBeDeleted.has(child.componentIdx)) {
-                    parent.definingChildren.splice(ind, 1); // delete from array
-                }
-            }
-
-            if (
-                !skipProcessingChildrenOfParents.includes(parent.componentIdx)
-            ) {
-                await this.processNewDefiningChildren({
-                    parent,
-                    expandComposites: false,
-                });
-            }
-        }
-
-        for (const componentIdxStr in componentsToDelete) {
-            const componentIdx = Number(componentIdxStr);
-            const component = this._components[componentIdx];
-
-            if (component.shadows) {
-                const shadowedComponent =
-                    this._components[component.shadows.componentIdx];
-                if (shadowedComponent.shadowedBy.length === 1) {
-                    delete shadowedComponent.shadowedBy;
-                } else {
-                    shadowedComponent.shadowedBy.splice(
-                        shadowedComponent.shadowedBy.indexOf(component),
-                        1,
-                    );
-                }
-            }
-
-            this.dependencies.deleteAllDownstreamDependencies({ component });
-
-            // record any upstream dependencies that depend directly on componentIdx
-            // (componentIdentity, componentStateVariable*)
-
-            for (let varName in this.dependencies.upstreamDependencies[
-                component.componentIdx
-            ]) {
-                let upDeps =
-                    this.dependencies.upstreamDependencies[
-                        component.componentIdx
-                    ][varName];
-                for (let upDep of upDeps) {
-                    if (
-                        upDep.specifiedComponentName &&
-                        upDep.specifiedComponentName in componentsToDelete
-                    ) {
-                        let dependenciesMissingComponent =
-                            this.dependencies.updateTriggers
-                                .dependenciesMissingComponentBySpecifiedName[
-                                upDep.specifiedComponentName
-                            ];
-                        if (!dependenciesMissingComponent) {
-                            dependenciesMissingComponent =
-                                this.dependencies.updateTriggers.dependenciesMissingComponentBySpecifiedName[
-                                    upDep.specifiedComponentName
-                                ] = [];
-                        }
-                        if (!dependenciesMissingComponent.includes(upDep)) {
-                            dependenciesMissingComponent.push(upDep);
-                        }
-                    }
-                }
-            }
-
-            await this.dependencies.deleteAllUpstreamDependencies({
-                component,
-            });
-
-            if (
-                !this.updateInfo.deletedStateVariables[component.componentIdx]
-            ) {
-                this.updateInfo.deletedStateVariables[component.componentIdx] =
-                    [];
-            }
-            this.updateInfo.deletedStateVariables[component.componentIdx].push(
-                ...Object.keys(component.state),
-            );
-
-            this.updateInfo.deletedComponents[component.componentIdx] = true;
-            delete this.unmatchedChildren[component.componentIdx];
-
-            delete this.stateVariableChangeTriggers[component.componentIdx];
-        }
-
-        const componentsToRemoveFromResolver = [];
-
-        for (const componentIdxStr in componentsToDelete) {
-            const componentIdx = Number(componentIdxStr);
-            let component = this._components[componentIdx];
-
-            if (component.replacementOf) {
-                const compositeSource = component.replacementOf;
-
-                if (
-                    compositeSource.attributes.createComponentIdx?.primitive
-                        ?.value == component.componentIdx
-                ) {
-                    // If the component's index is being created from a composite,
-                    // check if there is a source of that composite index that is not being deleted.
-                    // In that case, we should not remove the component from the resolver.
-                    let compositeCreatingComponentIdx = compositeSource;
-
-                    let foundUndeletedSourceOfComponentIdx = false;
-                    while (true) {
-                        if (
-                            !(
-                                compositeCreatingComponentIdx.componentIdx in
-                                componentsToDelete
-                            )
-                        ) {
-                            foundUndeletedSourceOfComponentIdx = true;
-                            break;
-                        }
-
-                        if (
-                            compositeCreatingComponentIdx.replacementOf
-                                ?.attributes.createComponentIdx?.primitive
-                                ?.value === component.componentIdx
-                        ) {
-                            compositeCreatingComponentIdx =
-                                compositeCreatingComponentIdx.replacementOf;
-                        } else {
-                            break;
-                        }
-                    }
-
-                    if (foundUndeletedSourceOfComponentIdx) {
-                        // We determined that the source of the component's component index
-                        // is not being deleted, so don't remove the component from the resolver
-                        continue;
-                    }
-                }
-
-                if (
-                    !(compositeSource.componentIdx in componentsToDelete) &&
-                    compositeSource.constructor.replacementsAlreadyInResolver
-                ) {
-                    // don't remove from resolver, as non-deleted composite source
-                    // already has replacements in the resolver,
-                    // so the component was not added to the resolver when it was created
-                    continue;
-                }
-            }
-
-            componentsToRemoveFromResolver.push(component);
-        }
+    async addChildrenAndRecurseToShadows(args) {
+        return this.componentLifecycle.addChildrenAndRecurseToShadows(args);
+    }
 
-        this.removeComponentsFromResolver(componentsToRemoveFromResolver);
+    /**
+     * Create and insert `_error` siblings requested by state-variable definitions
+     * during initial document construction.
+     */
+    async addQueuedErrorComponentsFromStateVariables() {
+        if (!this.errorComponentsToAdd?.length) {
+            return;
+        }
 
-        for (const componentIdxStr in componentsToDelete) {
-            const componentIdx = Number(componentIdxStr);
-            let component = this._components[componentIdx];
+        const errorComponentsToAdd = this.errorComponentsToAdd;
+        this.errorComponentsToAdd = [];
 
-            // delete from cumulativeStateVariableChanges
-            delete this.cumulativeStateVariableChanges[component.stateId];
+        const numberInsertedAfterSource = {};
 
-            // console.log(`deregistering ${componentIdx}`)
+        for (let errorInfo of errorComponentsToAdd) {
+            let sourceComponent = this._components[errorInfo.componentIdx];
+            let parent;
 
-            // don't use recursive form since all children should already be included
-            this.deregisterComponent(component, false);
+            while (sourceComponent?.parentIdx > 0) {
+                const candidateParent =
+                    this._components[sourceComponent.parentIdx];
 
-            // remove deleted components from this.updateInfo sets
-            this.updateInfo.componentsToUpdateRenderers.delete(componentIdx);
-            this.updateInfo.compositesToUpdateReplacements.delete(componentIdx);
-            this.updateInfo.inactiveCompositesToUpdateReplacements.delete(
-                componentIdx,
-            );
-        }
+                if (!candidateParent) {
+                    break;
+                }
 
-        return {
-            success: true,
-            deletedComponents: componentsToDelete,
-            parentsOfDeleted: allParents,
-        };
-    }
+                if (candidateParent.constructor.canDisplayChildErrors) {
+                    parent = candidateParent;
+                    break;
+                }
 
-    removeComponentsFromResolver(componentsToRemove) {
-        return this.resolverAdapter.removeComponentsFromResolver(
-            componentsToRemove,
-        );
-    }
+                sourceComponent = candidateParent;
+            }
 
-    determineComponentsToDelete({
-        components,
-        deleteUpstreamDependencies,
-        componentsToDelete,
-    }) {
-        for (let component of components) {
-            if (typeof component !== "object") {
-                continue;
+            if (!parent) {
+                if (this.document?.constructor.canDisplayChildErrors) {
+                    parent = this.document;
+                }
             }
 
-            if (component.componentIdx in componentsToDelete) {
+            if (!parent) {
                 continue;
             }
 
-            // add unproxied component
-            componentsToDelete[component.componentIdx] =
-                this._components[component.componentIdx];
+            let indexOfDefiningChildren = parent.definingChildren.length;
 
-            // recurse on allChildren and attributes
-            let componentsToRecurse = Object.values(component.allChildren).map(
-                (x) => x.component,
-            );
+            if (sourceComponent?.parentIdx === parent.componentIdx) {
+                const sourceInd = parent.definingChildren.findIndex(
+                    (child) =>
+                        typeof child === "object" &&
+                        child.componentIdx === sourceComponent.componentIdx,
+                );
 
-            for (let attrName in component.attributes) {
-                let comp = component.attributes[attrName].component;
-                if (comp) {
-                    componentsToRecurse.push(comp);
-                } else {
-                    let references = component.attributes[attrName].references;
-                    if (references) {
-                        componentsToRecurse.push(...references);
-                    }
+                if (sourceInd !== -1) {
+                    const numberAlreadyInserted =
+                        numberInsertedAfterSource[
+                            sourceComponent.componentIdx
+                        ] ?? 0;
+                    indexOfDefiningChildren =
+                        sourceInd + 1 + numberAlreadyInserted;
+                    numberInsertedAfterSource[sourceComponent.componentIdx] =
+                        numberAlreadyInserted + 1;
                 }
             }
 
-            // if delete an adapter, also delete component it is adapting
-            if (component.adaptedFrom !== undefined) {
-                componentsToRecurse.push(component.adaptedFrom);
-            }
+            let serializedErrorComponents = [
+                {
+                    type: "serialized",
+                    componentType: "_error",
+                    componentIdx: this._components.length,
+                    state: { message: errorInfo.message },
+                    position: errorInfo.position,
+                    sourceDoc: errorInfo.sourceDoc,
+                    children: [],
+                    attributes: {},
+                    doenetAttributes: {},
+                },
+            ];
 
-            if (deleteUpstreamDependencies === true) {
-                // TODO: recurse on copy of the component (other composites?)
+            this._components[this._components.length] = undefined;
 
-                // recurse on components that shadow
-                if (component.shadowedBy) {
-                    componentsToRecurse.push(...component.shadowedBy);
-                }
+            let ancestors = [
+                {
+                    componentIdx: parent.componentIdx,
+                    componentClass: parent.constructor,
+                },
+                ...parent.ancestors,
+            ];
 
-                // recurse on replacements and adapters
-                if (component.adapterUsed) {
-                    componentsToRecurse.push(component.adapterUsed);
-                }
-                if (component.replacements) {
-                    componentsToRecurse.push(...component.replacements);
-                }
+            this.parameterStack.push(parent.sharedParameters, false);
+            let createResult;
+            try {
+                createResult = await this.createIsolatedComponents({
+                    serializedComponents: serializedErrorComponents,
+                    ancestors,
+                });
+            } finally {
+                this.parameterStack.pop();
             }
 
-            this.determineComponentsToDelete({
-                components: componentsToRecurse,
-                deleteUpstreamDependencies,
-                componentsToDelete,
+            let addResults = await this.addChildrenAndRecurseToShadows({
+                parent,
+                indexOfDefiningChildren,
+                newChildren: createResult.components,
             });
+
+            if (!addResults.success) {
+                throw Error(
+                    "Couldn't add error component from state variable evaluation.",
+                );
+            }
         }
     }
 
+    async processNewDefiningChildren(args) {
+        return this.componentLifecycle.processNewDefiningChildren(args);
+    }
+
+    spliceChildren(parent, indexOfDefiningChildren, newChildren) {
+        return this.componentLifecycle.spliceChildren(
+            parent,
+            indexOfDefiningChildren,
+            newChildren,
+        );
+    }
+
+    // → deletionEngine
+    async deleteComponents(args) {
+        return this.deletionEngine.deleteComponents(args);
+    }
+
+    removeComponentsFromResolver(componentsToRemove) {
+        return this.resolverAdapter.removeComponentsFromResolver(
+            componentsToRemove,
+        );
+    }
+
+    determineComponentsToDelete(args) {
+        return this.deletionEngine.determineComponentsToDelete(args);
+    }
+
     async updateCompositeReplacements({
         component,
         componentChanges,
@@ -10546,80 +9105,37 @@ export default class Core {
         return null;
     }
 
-    async executeProcesses() {
-        if (this.stopProcessingRequests) {
-            return;
-        }
-
-        while (this.processQueue.length > 0) {
-            let nextUpdateInfo = this.processQueue.splice(0, 1)[0];
-            let result;
-            try {
-                if (nextUpdateInfo.type === "update") {
-                    if (
-                        !nextUpdateInfo.skippable ||
-                        this.processQueue.length < 2
-                    ) {
-                        result = await this.performUpdate(nextUpdateInfo);
-                    }
-
-                    // TODO: if skip an update, presumably we should call reject???
+    // → processQueueManager
+    get processQueue() {
+        return this.processQueueManager.queue;
+    }
 
-                    // } else if (nextUpdateInfo.type === "getStateVariableValues") {
-                    //   result = await this.performGetStateVariableValues(nextUpdateInfo);
-                } else if (nextUpdateInfo.type === "action") {
-                    if (
-                        !nextUpdateInfo.skippable ||
-                        this.processQueue.length < 2
-                    ) {
-                        result = await this.performAction(nextUpdateInfo);
-                    }
+    set processQueue(value) {
+        this.processQueueManager.queue = value;
+    }
 
-                    // TODO: if skip an update, presumably we should call reject???
-                } else if (nextUpdateInfo.type === "recordEvent") {
-                    result = await this.performRecordEvent(nextUpdateInfo);
-                } else {
-                    throw Error(
-                        `Unrecognized process type: ${nextUpdateInfo.type}`,
-                    );
-                }
+    get processing() {
+        return this.processQueueManager.processing;
+    }
 
-                nextUpdateInfo.resolve(result);
-            } catch (e) {
-                console.error(e);
-                nextUpdateInfo.reject(
-                    typeof e === "object" &&
-                        e &&
-                        "message" in e &&
-                        typeof e.message === "string"
-                        ? e.message
-                        : "Error in core",
-                );
-            }
-        }
+    set processing(value) {
+        this.processQueueManager.processing = value;
+    }
 
-        this.processing = false;
+    get stopProcessingRequests() {
+        return this.processQueueManager.stopProcessingRequests;
     }
 
-    requestAction({ componentIdx, actionName, args }) {
-        return new Promise((resolve, reject) => {
-            let skippable = args?.skippable;
+    set stopProcessingRequests(value) {
+        this.processQueueManager.stopProcessingRequests = value;
+    }
 
-            this.processQueue.push({
-                type: "action",
-                componentIdx,
-                actionName,
-                args,
-                skippable,
-                resolve,
-                reject,
-            });
+    async executeProcesses() {
+        return this.processQueueManager.executeProcesses();
+    }
 
-            if (!this.processing) {
-                this.processing = true;
-                this.executeProcesses();
-            }
-        });
+    requestAction(args) {
+        return this.processQueueManager.requestAction(args);
     }
 
     async performAction({
@@ -10715,79 +9231,8 @@ export default class Core {
         return {};
     }
 
-    async triggerChainedActions({
-        componentIdx,
-        triggeringAction,
-        actionId,
-        sourceInformation = {},
-        skipRendererUpdate = false,
-    }) {
-        for (const cIdxStr in this.updateInfo
-            .componentsToUpdateActionChaining) {
-            await this.checkForActionChaining({
-                component: this.components[cIdxStr],
-                stateVariables:
-                    this.updateInfo.componentsToUpdateActionChaining[cIdxStr],
-            });
-        }
-
-        this.updateInfo.componentsToUpdateActionChaining = {};
-
-        let actionsToChain = [];
-
-        let cIdx = componentIdx;
-
-        while (true) {
-            let comp = this._components[cIdx];
-            let id = cIdx;
-
-            if (triggeringAction) {
-                id += "|" + triggeringAction;
-            }
-
-            if (this.actionsChangedToActions[id]) {
-                actionsToChain.push(...this.actionsChangedToActions[id]);
-            }
-
-            if (comp?.shadows) {
-                let composite = this._components[comp.shadows.compositeIdx];
-                if (composite.attributes.createComponentOfType != null) {
-                    break;
-                }
-
-                // We propagate to shadows if the component was copied with a bare references such as `$P`
-                // but not if was copied via extend/copy attribute, such as `<point extend="$P" />
-                // Rationale:
-                // If we include $P in a graph,
-                // then triggerWhenObjectsClicked="$P" and triggerWhenObjectsFocused="$P"
-                // will be triggered by that reference, which is what authors would expect.
-                // Another use case is defining an <updateValue name="uv">,
-                // along with other triggered actions using triggerWith="$uv",
-                // inside a <setup> and then including a $uv
-                // where we want the button to be.
-
-                cIdx = comp.shadows.componentIdx;
-            } else {
-                break;
-            }
-        }
-
-        for (let chainedActionInstructions of actionsToChain) {
-            chainedActionInstructions = { ...chainedActionInstructions };
-            if (chainedActionInstructions.args) {
-                chainedActionInstructions.args = {
-                    ...chainedActionInstructions.args,
-                };
-            } else {
-                chainedActionInstructions.args = {};
-            }
-            chainedActionInstructions.args.skipRendererUpdate = true;
-            await this.performAction(chainedActionInstructions);
-        }
-
-        if (!skipRendererUpdate) {
-            await this.updateAllChangedRenderers(sourceInformation, actionId);
-        }
+    async triggerChainedActions(args) {
+        return this.actionTriggerScheduler.triggerChainedActions(args);
     }
 
     async updateRenderers({
@@ -10800,86 +9245,8 @@ export default class Core {
         }
     }
 
-    async requestUpdate({
-        updateInstructions,
-        transient = false,
-        event,
-        skippable = false,
-        overrideReadOnly = false,
-    }) {
-        // Note: the transient flag is now ignored
-        // as the debounce is preventing too many updates from occurring
-
-        if (this.flags.readOnly && !overrideReadOnly) {
-            let sourceInformation = {};
-
-            for (let instruction of updateInstructions) {
-                let componentSourceInformation =
-                    sourceInformation[instruction.componentIdx];
-                if (!componentSourceInformation) {
-                    componentSourceInformation = sourceInformation[
-                        instruction.componentIdx
-                    ] = {};
-                }
-
-                if (instruction.sourceDetails) {
-                    Object.assign(
-                        componentSourceInformation,
-                        instruction.sourceDetails,
-                    );
-                }
-            }
-
-            await this.updateRendererInstructions({
-                componentNamesToUpdate: updateInstructions.map(
-                    (x) => x.componentIdx,
-                ),
-                sourceOfUpdate: { sourceInformation },
-            });
-
-            return;
-        }
-
-        return new Promise((resolve, reject) => {
-            this.processQueue.push({
-                type: "update",
-                updateInstructions,
-                transient,
-                event,
-                skippable,
-                resolve,
-                reject,
-            });
-
-            if (!this.processing) {
-                this.processing = true;
-                this.executeProcesses();
-            }
-
-            // if (this.processing) {
-
-            // } else {
-            //   this.processing = true;
-
-            //   // Note: execute this process synchronously
-            //   // so that UI doesn't update until after finished.
-            //   // It is a tradeoff, as the UI has to wait,
-            //   // but it allows constraints to be applied before renderering.
-
-            //   this.performUpdate({ updateInstructions, transient, event }).then(() => {
-            //     // execute asynchronously any remaining processes
-            //     // (that got added while performUpdate was running)
-
-            //     // if (this.processQueue.length > 0) {
-            //       setTimeout(this.executeProcesses, 0);
-            //     // } else {
-            //     //   this.processing = false;
-            //     // }
-            //     resolve();
-            //   });
-
-            // }
-        });
+    async requestUpdate(args) {
+        return this.processQueueManager.requestUpdate(args);
     }
 
     async performUpdate({
@@ -11175,58 +9542,14 @@ export default class Core {
     }
 
     async updateAllChangedRenderers(sourceInformation = {}, actionId) {
-        let componentNamesToUpdate = [
-            ...this.updateInfo.componentsToUpdateRenderers,
-        ];
-        this.updateInfo.componentsToUpdateRenderers.clear();
-
-        await this.updateRendererInstructions({
-            componentNamesToUpdate,
-            sourceOfUpdate: { sourceInformation, local: true },
+        return this.rendererInstructionBuilder.updateAllChangedRenderers(
+            sourceInformation,
             actionId,
-        });
-
-        // updating renderer instructions could trigger more composite updates
-        // (presumably from deriving child results)
-        // if so, make replacement changes and update renderer instructions again
-        // TODO: should we check for child results earlier so we don't have to check them
-        // when updating renderer instructions?
-        if (this.updateInfo.compositesToUpdateReplacements.size > 0) {
-            await this.replacementChangesFromCompositesToUpdate();
-
-            let componentNamesToUpdate = [
-                ...this.updateInfo.componentsToUpdateRenderers,
-            ];
-            this.updateInfo.componentsToUpdateRenderers.clear();
-
-            await this.updateRendererInstructions({
-                componentNamesToUpdate,
-                sourceOfUpdate: { sourceInformation, local: true },
-                actionId,
-            });
-        }
+        );
     }
 
     requestRecordEvent(event) {
-        this.resumeVisibilityMeasuring();
-
-        if (event.verb === "visibilityChanged") {
-            return this.processVisibilityChangedEvent(event);
-        }
-
-        return new Promise((resolve, reject) => {
-            this.processQueue.push({
-                type: "recordEvent",
-                event,
-                resolve,
-                reject,
-            });
-
-            if (!this.processing) {
-                this.processing = true;
-                this.executeProcesses();
-            }
-        });
+        return this.processQueueManager.requestRecordEvent(event);
     }
 
     async performRecordEvent({ event }) {
diff --git a/packages/doenetml-worker-javascript/src/DeletionEngine.ts b/packages/doenetml-worker-javascript/src/DeletionEngine.ts
new file mode 100644
index 000000000..aad902cc1
--- /dev/null
+++ b/packages/doenetml-worker-javascript/src/DeletionEngine.ts
@@ -0,0 +1,414 @@
+/**
+ * Deletes components from the live tree. The bulk of the work is the
+ * two-phase walk:
+ *
+ *   1. `determineComponentsToDelete` collects the full set of components
+ *      that must go (children, attribute components, adapters, shadows,
+ *      replacements) when an upstream dependent is deleted.
+ *   2. `deleteComponents` then unlinks parents, splices replacements out
+ *      of composite sources, deletes dependency edges, removes nodes from
+ *      the resolver, deregisters from `core._components`, and clears
+ *      `updateInfo` queues for the deleted ids.
+ *
+ * Stateless. Holds a back-reference to Core to read `_components`,
+ * `dependencies`, `updateInfo`, `unmatchedChildren`,
+ * `cumulativeStateVariableChanges`, `stateVariableChangeTriggers`,
+ * `componentsToRender`, and to invoke `processNewDefiningChildren`,
+ * `removeComponentsFromResolver`, `deregisterComponent`,
+ * `deleteFromComponentsToRender`.
+ */
+export class DeletionEngine {
+    core: any;
+
+    constructor({ core }: { core: any }) {
+        this.core = core;
+    }
+
+    /**
+     * Delete `components` (and, when `deleteUpstreamDependencies`,
+     * everything that shadows or depends on them) from the live tree.
+     *
+     * Two-phase walk:
+     *  1. `determineComponentsToDelete` collects the full transitive set
+     *     (children, attribute components, adapters, shadows, replacements).
+     *  2. The body below removes them: detach from composite replacements,
+     *     splice out of parent `definingChildren` and re-derive child
+     *     results, tear down dependency edges (downstream and upstream),
+     *     remove from the resolver, and deregister from `_components`.
+     *
+     * Pass `skipProcessingChildrenOfParents` for parents whose child
+     * results are about to be re-derived by a different code path, so we
+     * don't pay for two redundant passes.
+     */
+    async deleteComponents({
+        components,
+        deleteUpstreamDependencies = true,
+        skipProcessingChildrenOfParents = [],
+    }: {
+        components: any | any[];
+        deleteUpstreamDependencies?: boolean;
+        skipProcessingChildrenOfParents?: number[];
+    }): Promise<any> {
+        if (!Array.isArray(components)) {
+            components = [components];
+        }
+
+        // TODO: if delete a shadow directly it should be an error
+        // (though it will be OK to delete them through other side effects)
+
+        // step 1. Determine which components to delete
+        const componentsToDelete: Record<number, any> = {};
+        this.determineComponentsToDelete({
+            components,
+            deleteUpstreamDependencies,
+            componentsToDelete,
+        });
+
+        //Calculate parent set
+        const parentsOfPotentiallyDeleted: Record<
+            number,
+            { parent: any; childNamesToBeDeleted: Set<number> }
+        > = {};
+        for (const componentIdxStr in componentsToDelete) {
+            const componentIdx = Number(componentIdxStr);
+            let component = componentsToDelete[componentIdx];
+            let parent = this.core._components[component.parentIdx];
+
+            // only add parent if it is not in componentsToDelete itself
+            if (
+                parent === undefined ||
+                parent.componentIdx in componentsToDelete
+            ) {
+                continue;
+            }
+            let parentObj = parentsOfPotentiallyDeleted[component.parentIdx];
+            if (parentObj === undefined) {
+                parentObj = {
+                    parent: this.core._components[component.parentIdx],
+                    childNamesToBeDeleted: new Set(),
+                };
+                parentsOfPotentiallyDeleted[component.parentIdx] = parentObj;
+            }
+            parentObj.childNamesToBeDeleted.add(componentIdx);
+        }
+
+        // if component is a replacement of another component,
+        // need to delete component from the replacement
+        // so that it isn't added back as a child of its parent
+        // Also keep track of which ones deleted so can add back to replacements
+        // if the deletion is unsuccessful
+        let replacementsDeletedFromComposites: number[] = [];
+
+        for (const componentIdxStr in componentsToDelete) {
+            const componentIdx = Number(componentIdxStr);
+            let component = this.core._components[componentIdx];
+            if (component.replacementOf) {
+                let composite = component.replacementOf;
+
+                let replacementNames = composite.replacements.map(
+                    (x: any) => x.componentIdx,
+                );
+
+                let replacementInd = replacementNames.indexOf(componentIdx);
+                if (replacementInd !== -1) {
+                    composite.replacements.splice(replacementInd, 1);
+                    if (
+                        !replacementsDeletedFromComposites.includes(
+                            composite.componentIdx,
+                        )
+                    ) {
+                        replacementsDeletedFromComposites.push(
+                            composite.componentIdx,
+                        );
+                    }
+                }
+            }
+        }
+
+        for (const compositeIdx of replacementsDeletedFromComposites) {
+            if (!(compositeIdx in componentsToDelete)) {
+                await this.core.dependencies.addBlockersFromChangedReplacements(
+                    this.core._components[compositeIdx],
+                );
+            }
+        }
+
+        // delete component from parent's defining children
+        // and record parents
+        const allParents: any[] = [];
+        for (const parentIdxStr in parentsOfPotentiallyDeleted) {
+            const parentObj = parentsOfPotentiallyDeleted[parentIdxStr];
+            const parent = parentObj.parent;
+            allParents.push(parent);
+
+            for (
+                let ind = parent.definingChildren.length - 1;
+                ind >= 0;
+                ind--
+            ) {
+                const child = parent.definingChildren[ind];
+                if (parentObj.childNamesToBeDeleted.has(child.componentIdx)) {
+                    parent.definingChildren.splice(ind, 1); // delete from array
+                }
+            }
+
+            if (
+                !skipProcessingChildrenOfParents.includes(parent.componentIdx)
+            ) {
+                await this.core.processNewDefiningChildren({
+                    parent,
+                    expandComposites: false,
+                });
+            }
+        }
+
+        for (const componentIdxStr in componentsToDelete) {
+            const componentIdx = Number(componentIdxStr);
+            const component = this.core._components[componentIdx];
+
+            if (component.shadows) {
+                const shadowedComponent =
+                    this.core._components[component.shadows.componentIdx];
+                if (shadowedComponent.shadowedBy.length === 1) {
+                    delete shadowedComponent.shadowedBy;
+                } else {
+                    shadowedComponent.shadowedBy.splice(
+                        shadowedComponent.shadowedBy.indexOf(component),
+                        1,
+                    );
+                }
+            }
+
+            this.core.dependencies.deleteAllDownstreamDependencies({
+                component,
+            });
+
+            // record any upstream dependencies that depend directly on componentIdx
+            // (componentIdentity, componentStateVariable*)
+
+            for (let varName in this.core.dependencies.upstreamDependencies[
+                component.componentIdx
+            ]) {
+                let upDeps =
+                    this.core.dependencies.upstreamDependencies[
+                        component.componentIdx
+                    ][varName];
+                for (let upDep of upDeps) {
+                    if (
+                        upDep.specifiedComponentName &&
+                        upDep.specifiedComponentName in componentsToDelete
+                    ) {
+                        let dependenciesMissingComponent =
+                            this.core.dependencies.updateTriggers
+                                .dependenciesMissingComponentBySpecifiedName[
+                                upDep.specifiedComponentName
+                            ];
+                        if (!dependenciesMissingComponent) {
+                            dependenciesMissingComponent =
+                                this.core.dependencies.updateTriggers.dependenciesMissingComponentBySpecifiedName[
+                                    upDep.specifiedComponentName
+                                ] = [];
+                        }
+                        if (!dependenciesMissingComponent.includes(upDep)) {
+                            dependenciesMissingComponent.push(upDep);
+                        }
+                    }
+                }
+            }
+
+            await this.core.dependencies.deleteAllUpstreamDependencies({
+                component,
+            });
+
+            if (
+                !this.core.updateInfo.deletedStateVariables[
+                    component.componentIdx
+                ]
+            ) {
+                this.core.updateInfo.deletedStateVariables[
+                    component.componentIdx
+                ] = [];
+            }
+            this.core.updateInfo.deletedStateVariables[
+                component.componentIdx
+            ].push(...Object.keys(component.state));
+
+            this.core.updateInfo.deletedComponents[component.componentIdx] =
+                true;
+            delete this.core.unmatchedChildren[component.componentIdx];
+
+            delete this.core.stateVariableChangeTriggers[
+                component.componentIdx
+            ];
+        }
+
+        const componentsToRemoveFromResolver: any[] = [];
+
+        for (const componentIdxStr in componentsToDelete) {
+            const componentIdx = Number(componentIdxStr);
+            let component = this.core._components[componentIdx];
+
+            if (component.replacementOf) {
+                const compositeSource = component.replacementOf;
+
+                if (
+                    compositeSource.attributes.createComponentIdx?.primitive
+                        ?.value == component.componentIdx
+                ) {
+                    // If the component's index is being created from a composite,
+                    // check if there is a source of that composite index that is not being deleted.
+                    // In that case, we should not remove the component from the resolver.
+                    let compositeCreatingComponentIdx = compositeSource;
+
+                    let foundUndeletedSourceOfComponentIdx = false;
+                    while (true) {
+                        if (
+                            !(
+                                compositeCreatingComponentIdx.componentIdx in
+                                componentsToDelete
+                            )
+                        ) {
+                            foundUndeletedSourceOfComponentIdx = true;
+                            break;
+                        }
+
+                        if (
+                            compositeCreatingComponentIdx.replacementOf
+                                ?.attributes.createComponentIdx?.primitive
+                                ?.value === component.componentIdx
+                        ) {
+                            compositeCreatingComponentIdx =
+                                compositeCreatingComponentIdx.replacementOf;
+                        } else {
+                            break;
+                        }
+                    }
+
+                    if (foundUndeletedSourceOfComponentIdx) {
+                        // We determined that the source of the component's component index
+                        // is not being deleted, so don't remove the component from the resolver
+                        continue;
+                    }
+                }
+
+                if (
+                    !(compositeSource.componentIdx in componentsToDelete) &&
+                    compositeSource.constructor.replacementsAlreadyInResolver
+                ) {
+                    // don't remove from resolver, as non-deleted composite source
+                    // already has replacements in the resolver,
+                    // so the component was not added to the resolver when it was created
+                    continue;
+                }
+            }
+
+            componentsToRemoveFromResolver.push(component);
+        }
+
+        this.core.removeComponentsFromResolver(componentsToRemoveFromResolver);
+
+        for (const componentIdxStr in componentsToDelete) {
+            const componentIdx = Number(componentIdxStr);
+            let component = this.core._components[componentIdx];
+
+            // delete from cumulativeStateVariableChanges
+            delete this.core.cumulativeStateVariableChanges[component.stateId];
+
+            // don't use recursive form since all children should already be included
+            this.core.deregisterComponent(component, false);
+
+            // remove deleted components from this.updateInfo sets
+            this.core.updateInfo.componentsToUpdateRenderers.delete(
+                componentIdx,
+            );
+            this.core.updateInfo.compositesToUpdateReplacements.delete(
+                componentIdx,
+            );
+            this.core.updateInfo.inactiveCompositesToUpdateReplacements.delete(
+                componentIdx,
+            );
+        }
+
+        return {
+            success: true,
+            deletedComponents: componentsToDelete,
+            parentsOfDeleted: allParents,
+        };
+    }
+
+    /**
+     * Recursively populate `componentsToDelete` with the transitive
+     * deletion set rooted at `components`: each component's
+     * `allChildren`, attribute components/references, the source of any
+     * adapter, and (when `deleteUpstreamDependencies`) shadows, the
+     * adapter the component itself produced, and any replacements.
+     */
+    determineComponentsToDelete({
+        components,
+        deleteUpstreamDependencies,
+        componentsToDelete,
+    }: {
+        components: any[];
+        deleteUpstreamDependencies: boolean;
+        componentsToDelete: Record<number, any>;
+    }): void {
+        for (let component of components) {
+            if (typeof component !== "object") {
+                continue;
+            }
+
+            if (component.componentIdx in componentsToDelete) {
+                continue;
+            }
+
+            // add unproxied component
+            componentsToDelete[component.componentIdx] =
+                this.core._components[component.componentIdx];
+
+            // recurse on allChildren and attributes
+            let componentsToRecurse = Object.values(
+                component.allChildren as Record<string, any>,
+            ).map((x) => x.component);
+
+            for (let attrName in component.attributes) {
+                let comp = component.attributes[attrName].component;
+                if (comp) {
+                    componentsToRecurse.push(comp);
+                } else {
+                    let references = component.attributes[attrName].references;
+                    if (references) {
+                        componentsToRecurse.push(...references);
+                    }
+                }
+            }
+
+            // if delete an adapter, also delete component it is adapting
+            if (component.adaptedFrom !== undefined) {
+                componentsToRecurse.push(component.adaptedFrom);
+            }
+
+            if (deleteUpstreamDependencies === true) {
+                // TODO: recurse on copy of the component (other composites?)
+
+                // recurse on components that shadow
+                if (component.shadowedBy) {
+                    componentsToRecurse.push(...component.shadowedBy);
+                }
+
+                // recurse on replacements and adapters
+                if (component.adapterUsed) {
+                    componentsToRecurse.push(component.adapterUsed);
+                }
+                if (component.replacements) {
+                    componentsToRecurse.push(...component.replacements);
+                }
+            }
+
+            this.determineComponentsToDelete({
+                components: componentsToRecurse,
+                deleteUpstreamDependencies,
+                componentsToDelete,
+            });
+        }
+    }
+}
diff --git a/packages/doenetml-worker-javascript/src/ProcessQueue.ts b/packages/doenetml-worker-javascript/src/ProcessQueue.ts
new file mode 100644
index 000000000..aa3a33751
--- /dev/null
+++ b/packages/doenetml-worker-javascript/src/ProcessQueue.ts
@@ -0,0 +1,256 @@
+type QueueEntry =
+    | {
+          type: "update";
+          updateInstructions: any;
+          transient: boolean;
+          event: any;
+          skippable: boolean;
+          resolve: (v?: any) => void;
+          reject: (v?: any) => void;
+      }
+    | {
+          type: "action";
+          componentIdx: number;
+          actionName: string;
+          args: any;
+          skippable?: boolean;
+          resolve: (v?: any) => void;
+          reject: (v?: any) => void;
+      }
+    | {
+          type: "recordEvent";
+          event: any;
+          resolve: (v?: any) => void;
+          reject: (v?: any) => void;
+      };
+
+/**
+ * Owns the asynchronous request queue: the entry points
+ * (`requestAction`, `requestUpdate`, `requestRecordEvent`) push work
+ * onto the queue, and `executeProcesses` drains it serially by
+ * dispatching to Core's `performAction` / `performUpdate` /
+ * `performRecordEvent` (still on Core through Phase 3).
+ *
+ * Holds a back-reference to Core to read `flags`, invoke the perform
+ * methods, run renderer-only short-circuits in read-only mode, resume
+ * visibility measuring on event recording, and route visibility events.
+ */
+export class ProcessQueue {
+    core: any;
+    queue: QueueEntry[];
+    processing: boolean;
+    stopProcessingRequests: boolean;
+
+    constructor({ core }: { core: any }) {
+        this.core = core;
+        this.queue = [];
+        this.processing = false;
+        this.stopProcessingRequests = false;
+    }
+
+    /**
+     * Clear the queue and processing flags. Called from `Core.generateDast`
+     * so state from any previous run does not leak in.
+     */
+    reset(): void {
+        this.queue = [];
+        this.processing = false;
+        this.stopProcessingRequests = false;
+    }
+
+    /**
+     * Start `executeProcesses` if it's not already draining the queue.
+     * Called from each request entry point after the new entry is pushed.
+     */
+    _kickoff(): void {
+        if (!this.processing) {
+            this.processing = true;
+            this.executeProcesses().catch((e) => console.error(e));
+        }
+    }
+
+    /**
+     * Drain `this.queue` serially, dispatching each entry to Core's
+     * `performUpdate`/`performAction`/`performRecordEvent`. `skippable`
+     * update/action entries are dropped (without resolving) when more work
+     * is already queued behind them, so a flood of intermediate values
+     * collapses to the latest.
+     *
+     * Errors from per-entry dispatch are caught and routed to the entry's
+     * `reject`; throws outside that path bubble up via the `_kickoff`
+     * `.catch(console.error)` so we don't drop them silently.
+     */
+    async executeProcesses(): Promise<void> {
+        if (this.stopProcessingRequests) {
+            return;
+        }
+
+        while (this.queue.length > 0) {
+            let nextUpdateInfo = this.queue.splice(0, 1)[0];
+            let result;
+            try {
+                if (nextUpdateInfo.type === "update") {
+                    if (!nextUpdateInfo.skippable || this.queue.length < 2) {
+                        result = await this.core.performUpdate(nextUpdateInfo);
+                    }
+
+                    // TODO: if skip an update, presumably we should call reject???
+
+                    // } else if (nextUpdateInfo.type === "getStateVariableValues") {
+                    //   result = await this.core.performGetStateVariableValues(nextUpdateInfo);
+                } else if (nextUpdateInfo.type === "action") {
+                    if (!nextUpdateInfo.skippable || this.queue.length < 2) {
+                        result = await this.core.performAction(nextUpdateInfo);
+                    }
+
+                    // TODO: if skip an update, presumably we should call reject???
+                } else if (nextUpdateInfo.type === "recordEvent") {
+                    result = await this.core.performRecordEvent(nextUpdateInfo);
+                } else {
+                    throw Error(
+                        `Unrecognized process type: ${(nextUpdateInfo as any).type}`,
+                    );
+                }
+
+                nextUpdateInfo.resolve(result);
+            } catch (e) {
+                console.error(e);
+                nextUpdateInfo.reject(
+                    typeof e === "object" &&
+                        e &&
+                        "message" in e &&
+                        typeof (e as any).message === "string"
+                        ? (e as any).message
+                        : "Error in core",
+                );
+            }
+        }
+
+        this.processing = false;
+    }
+
+    /**
+     * Enqueue a component action (e.g. button click, input commit) and
+     * return a Promise that resolves with the action's result once the
+     * queue drains to it. `args.skippable === true` lets the queue drop
+     * intermediate entries when newer work is queued behind them.
+     */
+    requestAction({
+        componentIdx,
+        actionName,
+        args,
+    }: {
+        componentIdx: number;
+        actionName: string;
+        args?: any;
+    }): Promise<any> {
+        return new Promise((resolve, reject) => {
+            let skippable = args?.skippable;
+
+            this.queue.push({
+                type: "action",
+                componentIdx,
+                actionName,
+                args,
+                skippable,
+                resolve,
+                reject,
+            });
+
+            this._kickoff();
+        });
+    }
+
+    /**
+     * Enqueue a state-variable update batch and return a Promise that
+     * resolves once the queue drains to it. In read-only mode the update
+     * is short-circuited to a renderer-only refresh (so the renderer can
+     * revert any optimistic UI it showed) and the queue is skipped.
+     */
+    async requestUpdate({
+        updateInstructions,
+        transient = false,
+        event,
+        skippable = false,
+        overrideReadOnly = false,
+    }: {
+        updateInstructions: any[];
+        transient?: boolean;
+        event?: any;
+        skippable?: boolean;
+        overrideReadOnly?: boolean;
+    }): Promise<any> {
+        // Note: the transient flag is now ignored
+        // as the debounce is preventing too many updates from occurring
+
+        if (this.core.flags.readOnly && !overrideReadOnly) {
+            let sourceInformation: Record<number, any> = {};
+
+            for (let instruction of updateInstructions) {
+                let componentSourceInformation =
+                    sourceInformation[instruction.componentIdx];
+                if (!componentSourceInformation) {
+                    componentSourceInformation = sourceInformation[
+                        instruction.componentIdx
+                    ] = {};
+                }
+
+                if (instruction.sourceDetails) {
+                    Object.assign(
+                        componentSourceInformation,
+                        instruction.sourceDetails,
+                    );
+                }
+            }
+
+            await this.core.updateRendererInstructions({
+                componentNamesToUpdate: updateInstructions.map(
+                    (x) => x.componentIdx,
+                ),
+                sourceOfUpdate: { sourceInformation },
+            });
+
+            return;
+        }
+
+        return new Promise((resolve, reject) => {
+            this.queue.push({
+                type: "update",
+                updateInstructions,
+                transient,
+                event,
+                skippable,
+                resolve,
+                reject,
+            });
+
+            this._kickoff();
+        });
+    }
+
+    /**
+     * Enqueue an event for `performRecordEvent`, or for visibility-changed
+     * events bypass the queue and route directly to the visibility tracker
+     * (which manages its own debounced send). Resuming visibility measuring
+     * here piggybacks on every recorded event so suspended documents wake
+     * back up on the next interaction.
+     */
+    requestRecordEvent(event: any): Promise<any> | undefined {
+        this.core.resumeVisibilityMeasuring();
+
+        if (event.verb === "visibilityChanged") {
+            return this.core.processVisibilityChangedEvent(event);
+        }
+
+        return new Promise((resolve, reject) => {
+            this.queue.push({
+                type: "recordEvent",
+                event,
+                resolve,
+                reject,
+            });
+
+            this._kickoff();
+        });
+    }
+}
diff --git a/packages/doenetml-worker-javascript/src/RendererInstructionBuilder.ts b/packages/doenetml-worker-javascript/src/RendererInstructionBuilder.ts
new file mode 100644
index 000000000..6beacd4a6
--- /dev/null
+++ b/packages/doenetml-worker-javascript/src/RendererInstructionBuilder.ts
@@ -0,0 +1,562 @@
+import { removeFunctionsMathExpressionClass } from "./utils/math";
+
+/**
+ * Builds the dast/instruction stream sent to the renderer. Owns the
+ * per-component "what's currently rendered" registry, the cached
+ * renderer state used for save/restore, and the queue of components
+ * whose child lists have changed since the last flush.
+ *
+ * Holds a back-reference to Core to read the live component tree,
+ * the `updateInfo.componentsToUpdateRenderers` queue, root names,
+ * and to invoke `updateRenderersCallback`. Calls into ChildMatcher's
+ * `deriveChildResultsFromDefiningChildren` and
+ * `returnActiveChildrenIndicesToRender` (via Core's wrappers), and into
+ * Core's `replacementChangesFromCompositesToUpdate` (slated for a later
+ * phase).
+ */
+export class RendererInstructionBuilder {
+    core: any;
+    componentsToRender: Record<number, { children: any[] }>;
+    componentsWithChangedChildrenToRender: Set<number>;
+    rendererState: Record<number, any>;
+
+    constructor({ core }: { core: any }) {
+        this.core = core;
+        this.componentsToRender = {};
+        this.componentsWithChangedChildrenToRender = new Set();
+        this.rendererState = {};
+    }
+
+    /**
+     * Clear all per-document renderer state. Called from `Core.generateDast`
+     * so that state from any previous run does not leak into a fresh document.
+     */
+    reset(): void {
+        this.componentsToRender = {};
+        this.componentsWithChangedChildrenToRender = new Set();
+        this.rendererState = {};
+    }
+
+    /**
+     * Forward an update batch to the renderer, attaching the current
+     * diagnostics queue (which both passes the data and clears the
+     * pending flag). `init: true` is used only for the very first
+     * document render.
+     */
+    callUpdateRenderers(args: any, init = false): void {
+        let diagnostics: any = undefined;
+        if (this.core.hasPendingDiagnostics) {
+            diagnostics = this.core.getDiagnostics().diagnostics;
+        }
+
+        this.core.updateRenderersCallback({ ...args, init, diagnostics });
+    }
+
+    /**
+     * Build and send the next renderer-update batch.
+     *
+     * Two passes:
+     *  1. For every parent in `componentsWithChangedChildrenToRender`,
+     *     compare the rendered-child identifier list against the previous
+     *     one and, if it changed, tear down the old child renderers and
+     *     re-create the new ones (which can recurse).
+     *  2. For every component in `componentNamesToUpdate`, capture the
+     *     current `forRenderer` state values into a `rendererStatesToUpdate`
+     *     entry and append cached `childrenInstructions` if pass 1
+     *     produced new ones.
+     *
+     * The combined batch is delivered via `callUpdateRenderers`.
+     */
+    async updateRendererInstructions({
+        componentNamesToUpdate,
+        sourceOfUpdate = {},
+        actionId,
+    }: {
+        componentNamesToUpdate: number[];
+        sourceOfUpdate?: any;
+        actionId?: string;
+    }): Promise<void> {
+        let deletedRenderers: any[] = [];
+
+        let updateInstructions: any[] = [];
+        let rendererStatesToUpdate: any[] = [];
+
+        let newChildrenInstructions: Record<number, any[]> = {};
+
+        // copy components with changed children and reset for next time
+        let componentsWithChangedChildrenToRenderInProgress =
+            this.componentsWithChangedChildrenToRender;
+        this.componentsWithChangedChildrenToRender = new Set();
+
+        //TODO: Figure out what we need from here
+        for (let componentIdx of componentsWithChangedChildrenToRenderInProgress) {
+            if (componentIdx in this.componentsToRender) {
+                // check to see if current children who render are
+                // different from last time rendered
+
+                let currentChildIdentifiers: string[] = [];
+                let unproxiedComponent = this.core._components[componentIdx];
+                let indicesToRender: number[] = [];
+
+                if (
+                    unproxiedComponent &&
+                    unproxiedComponent.constructor.renderChildren
+                ) {
+                    if (!unproxiedComponent.matchedCompositeChildren) {
+                        await this.core.deriveChildResultsFromDefiningChildren({
+                            parent: unproxiedComponent,
+                            expandComposites: true,
+                            forceExpandComposites: true,
+                        });
+                    }
+
+                    indicesToRender =
+                        await this.core.returnActiveChildrenIndicesToRender(
+                            unproxiedComponent,
+                        );
+
+                    let renderedInd = 0;
+                    for (let [
+                        ind,
+                        child,
+                    ] of unproxiedComponent.activeChildren.entries() as Iterable<
+                        [number, any]
+                    >) {
+                        if (indicesToRender.includes(ind)) {
+                            if (child.rendererType) {
+                                currentChildIdentifiers.push(
+                                    `nameType:${child.componentIdx};${child.componentType}`,
+                                );
+                                renderedInd++;
+                            } else if (typeof child === "string") {
+                                currentChildIdentifiers.push(
+                                    `string${renderedInd}:${child}`,
+                                );
+                                renderedInd++;
+                            } else if (typeof child === "number") {
+                                currentChildIdentifiers.push(
+                                    `number${renderedInd}:${(
+                                        child as number
+                                    ).toString()}`,
+                                );
+                                renderedInd++;
+                            } else {
+                                currentChildIdentifiers.push("");
+                            }
+                        } else {
+                            currentChildIdentifiers.push("");
+                        }
+                    }
+                }
+
+                let previousChildRenderers =
+                    this.componentsToRender[componentIdx].children;
+
+                let previousChildIdentifiers: string[] = [];
+                for (let [
+                    ind,
+                    child,
+                ] of previousChildRenderers.entries() as Iterable<
+                    [number, any]
+                >) {
+                    if (child === null) {
+                        previousChildIdentifiers.push("");
+                    } else if (child.componentIdx != undefined) {
+                        previousChildIdentifiers.push(
+                            `nameType:${child.componentIdx};${child.componentType}`,
+                        );
+                    } else if (typeof child === "string") {
+                        previousChildIdentifiers.push(`string${ind}:${child}`);
+                    } else if (typeof child === "number") {
+                        previousChildIdentifiers.push(
+                            `number${ind}:${(child as number).toString()}`,
+                        );
+                    }
+                }
+
+                if (
+                    currentChildIdentifiers.length !==
+                        previousChildIdentifiers.length ||
+                    currentChildIdentifiers.some(
+                        (v, i) => v !== previousChildIdentifiers[i],
+                    )
+                ) {
+                    // delete old renderers
+                    for (let child of previousChildRenderers) {
+                        if (child?.componentIdx != undefined) {
+                            let deletedNames =
+                                this.deleteFromComponentsToRender({
+                                    componentIdx: child.componentIdx,
+                                    recurseToChildren: true,
+                                    componentsWithChangedChildrenToRenderInProgress,
+                                });
+                            deletedRenderers.push(...deletedNames);
+                        }
+                    }
+
+                    // create new renderers
+                    let childrenToRender: any[] = [];
+                    if (indicesToRender.length > 0) {
+                        for (let [
+                            ind,
+                            child,
+                        ] of unproxiedComponent.activeChildren.entries() as Iterable<
+                            [number, any]
+                        >) {
+                            if (indicesToRender.includes(ind)) {
+                                if (child.rendererType) {
+                                    let results =
+                                        await this.initializeRenderedComponentInstruction(
+                                            child,
+                                            componentsWithChangedChildrenToRenderInProgress,
+                                        );
+                                    childrenToRender.push(
+                                        results.componentToRender,
+                                    );
+                                    rendererStatesToUpdate.push(
+                                        ...results.rendererStatesToUpdate,
+                                    );
+                                } else if (typeof child === "string") {
+                                    childrenToRender.push(child);
+                                } else if (typeof child === "number") {
+                                    childrenToRender.push(
+                                        (child as number).toString(),
+                                    );
+                                } else {
+                                    childrenToRender.push(null);
+                                }
+                            } else {
+                                childrenToRender.push(null);
+                            }
+                        }
+                    }
+
+                    this.componentsToRender[componentIdx].children =
+                        childrenToRender;
+
+                    newChildrenInstructions[componentIdx] = childrenToRender;
+
+                    componentsWithChangedChildrenToRenderInProgress.delete(
+                        componentIdx,
+                    );
+
+                    if (!componentNamesToUpdate.includes(componentIdx)) {
+                        componentNamesToUpdate.push(componentIdx);
+                    }
+                }
+            }
+        }
+
+        for (let componentIdx of componentNamesToUpdate) {
+            if (
+                componentIdx in this.componentsToRender
+                // && !deletedRenderers.includes(componentIdx)  TODO: what if recreate with same name?
+            ) {
+                let component = this.core._components[componentIdx];
+                if (component) {
+                    let stateValuesForRenderer: Record<string, any> = {};
+                    for (let stateVariable in component.state) {
+                        if (component.state[stateVariable].forRenderer) {
+                            let value = removeFunctionsMathExpressionClass(
+                                await component.state[stateVariable].value,
+                            );
+                            stateValuesForRenderer[stateVariable] = value;
+                        }
+                    }
+
+                    if (component.compositeReplacementActiveRange) {
+                        stateValuesForRenderer._compositeReplacementActiveRange =
+                            component.compositeReplacementActiveRange;
+                    }
+
+                    let newRendererState: any = {
+                        componentIdx,
+                        stateValues: stateValuesForRenderer,
+                        rendererType: component.rendererType, // TODO: need this to ignore baseVariables change: is this right place?
+                    };
+
+                    // this.renderState is used to save the renderer state to the database
+                    if (!this.rendererState[componentIdx]) {
+                        this.rendererState[componentIdx] = {};
+                    }
+
+                    this.rendererState[componentIdx].stateValues =
+                        stateValuesForRenderer;
+
+                    // only add childrenInstructions if they changed
+                    if (newChildrenInstructions[componentIdx]) {
+                        newRendererState.childrenInstructions =
+                            newChildrenInstructions[componentIdx];
+                        this.rendererState[componentIdx].childrenInstructions =
+                            newChildrenInstructions[componentIdx];
+                    }
+
+                    rendererStatesToUpdate.push(newRendererState);
+                }
+            }
+        }
+
+        // rendererStatesToUpdate = rendererStatesToUpdate.filter(x => !deletedRenderers.includes(x))
+        if (rendererStatesToUpdate.length > 0) {
+            let instruction = {
+                instructionType: "updateRendererStates",
+                rendererStatesToUpdate,
+                sourceOfUpdate,
+            };
+            updateInstructions.splice(0, 0, instruction);
+        }
+
+        this.callUpdateRenderers({ updateInstructions, actionId });
+    }
+
+    /**
+     * Construct the initial renderer instructions for `component` and
+     * its rendered descendants: collect `forRenderer` state values, build
+     * the children-to-render list (recursing on rendered children), and
+     * register the component in `componentsToRender`. Returns
+     * `{ componentToRender, rendererStatesToUpdate, rendererStatesToForceUpdate }`
+     * — the third bucket holds states marked `alwaysUpdateRenderer`,
+     * which are flushed in a second pass without `init: true`.
+     *
+     * Returns `undefined` if `component.rendererType` is unset (callers
+     * only invoke this for components that render).
+     */
+    async initializeRenderedComponentInstruction(
+        component: any,
+        componentsWithChangedChildrenToRenderInProgress: Set<number> = new Set(),
+    ): Promise<any> {
+        if (component.rendererType === undefined) {
+            return;
+        }
+
+        if (!component.matchedCompositeChildren) {
+            await this.core.deriveChildResultsFromDefiningChildren({
+                parent: component,
+                expandComposites: true, //forceExpandComposites: true,
+            });
+        }
+
+        let rendererStatesToUpdate: any[] = [];
+        let rendererStatesToForceUpdate: any[] = [];
+
+        let stateValuesForRenderer: Record<string, any> = {};
+        let stateValuesForRendererAlwaysUpdate: Record<string, any> = {};
+        let alwaysUpdate = false;
+        for (let stateVariable in component.state) {
+            if (component.state[stateVariable].forRenderer) {
+                stateValuesForRenderer[stateVariable] =
+                    removeFunctionsMathExpressionClass(
+                        await component.state[stateVariable].value,
+                    );
+                if (component.state[stateVariable].alwaysUpdateRenderer) {
+                    alwaysUpdate = true;
+                }
+            }
+        }
+
+        if (component.compositeReplacementActiveRange) {
+            stateValuesForRenderer._compositeReplacementActiveRange =
+                component.compositeReplacementActiveRange;
+        }
+
+        if (alwaysUpdate) {
+            stateValuesForRendererAlwaysUpdate = stateValuesForRenderer;
+        }
+
+        let componentIdx = component.componentIdx;
+
+        let childrenToRender: any[] = [];
+        if (component.constructor.renderChildren) {
+            let indicesToRender =
+                await this.core.returnActiveChildrenIndicesToRender(component);
+            for (let [
+                ind,
+                child,
+            ] of component.activeChildren.entries() as Iterable<
+                [number, any]
+            >) {
+                if (indicesToRender.includes(ind)) {
+                    if (child.rendererType) {
+                        let results =
+                            await this.initializeRenderedComponentInstruction(
+                                child,
+                                componentsWithChangedChildrenToRenderInProgress,
+                            );
+                        childrenToRender.push(results.componentToRender);
+                        rendererStatesToUpdate.push(
+                            ...results.rendererStatesToUpdate,
+                        );
+                        rendererStatesToForceUpdate.push(
+                            ...results.rendererStatesToForceUpdate,
+                        );
+                    } else if (typeof child === "string") {
+                        childrenToRender.push(child);
+                    } else if (typeof child === "number") {
+                        childrenToRender.push((child as number).toString());
+                    } else {
+                        childrenToRender.push(null);
+                    }
+                } else {
+                    childrenToRender.push(null);
+                }
+            }
+        }
+
+        rendererStatesToUpdate.push({
+            componentIdx,
+            stateValues: stateValuesForRenderer,
+            childrenInstructions: childrenToRender,
+        });
+        if (Object.keys(stateValuesForRendererAlwaysUpdate).length > 0) {
+            rendererStatesToForceUpdate.push({
+                componentIdx,
+                stateValues: stateValuesForRendererAlwaysUpdate,
+            });
+        }
+
+        // this.renderState is used to save the renderer state to the database
+        this.rendererState[componentIdx] = {
+            stateValues: stateValuesForRenderer,
+            childrenInstructions: childrenToRender,
+        };
+
+        componentsWithChangedChildrenToRenderInProgress.delete(componentIdx);
+
+        let requestActions: Record<string, any> = {};
+        for (let actionName in component.actions) {
+            requestActions[actionName] = {
+                actionName,
+                componentIdx: component.componentIdx,
+            };
+        }
+
+        for (let actionName in component.externalActions) {
+            let action = await component.externalActions[actionName];
+            if (action) {
+                requestActions[actionName] = {
+                    actionName,
+                    componentIdx: action.componentIdx,
+                };
+            }
+        }
+
+        let rendererInstructions = {
+            componentIdx: componentIdx,
+            effectiveIdx: component.componentOrAdaptedIdx,
+            id: this.getRendererId(component),
+            componentType: component.componentType,
+            rendererType: component.rendererType,
+            actions: requestActions,
+        };
+
+        this.componentsToRender[componentIdx] = {
+            children: childrenToRender,
+        };
+
+        return {
+            componentToRender: rendererInstructions,
+            rendererStatesToUpdate,
+            rendererStatesToForceUpdate,
+        };
+    }
+
+    /**
+     * Get the `rendererId` of `component`,
+     * where `rendererId` is the `rootName` of the component, if it exists,
+     * else the `componentIdx` as a string.
+     *
+     * The `rootName` is the simplest unique reference to the component
+     * when the document root is the origin. As `rootName` is designed to be
+     * a HTML id, indices are represented with `:`. For example,
+     * if `$a.b[2][3].c` is the simplest reference to a component from the root,
+     * then its root name will be `a.b:2:3.c`.
+     *
+     * If a component was adapted from another component,
+     * then the `renderedId` of the original component is used instead,
+     * as that corresponds to the component that was authored.
+     */
+    getRendererId(component: any): string {
+        return (
+            this.core.rootNames?.[component.componentOrAdaptedIdx] ??
+            `_id_${component.componentOrAdaptedIdx.toString()}`
+        );
+    }
+
+    /**
+     * Drop `componentIdx` (and, by default, every nested rendered child)
+     * from `componentsToRender`, and clear it from the in-progress
+     * change set. Returns the flat list of component indices that were
+     * removed so the caller can include them in the renderer update.
+     */
+    deleteFromComponentsToRender({
+        componentIdx,
+        recurseToChildren = true,
+        componentsWithChangedChildrenToRenderInProgress,
+    }: {
+        componentIdx: number;
+        recurseToChildren?: boolean;
+        componentsWithChangedChildrenToRenderInProgress: Set<number>;
+    }): number[] {
+        let deletedComponentNames: number[] = [componentIdx];
+        if (recurseToChildren) {
+            let componentInstruction = this.componentsToRender[componentIdx];
+            if (componentInstruction) {
+                for (let child of componentInstruction.children) {
+                    if (child) {
+                        let additionalDeleted =
+                            this.deleteFromComponentsToRender({
+                                componentIdx: child.componentIdx,
+                                recurseToChildren,
+                                componentsWithChangedChildrenToRenderInProgress,
+                            });
+                        deletedComponentNames.push(...additionalDeleted);
+                    }
+                }
+            }
+        }
+        delete this.componentsToRender[componentIdx];
+        componentsWithChangedChildrenToRenderInProgress.delete(componentIdx);
+
+        return deletedComponentNames;
+    }
+
+    /**
+     * Drain `updateInfo.componentsToUpdateRenderers` into a renderer
+     * update batch. If the first pass produced new composite replacement
+     * work (which can happen when child results get derived during the
+     * pass), apply those replacement changes and run a second drain so
+     * the renderer sees a fully consistent tree.
+     */
+    async updateAllChangedRenderers(
+        sourceInformation: any = {},
+        actionId?: string,
+    ): Promise<void> {
+        let componentNamesToUpdate = [
+            ...this.core.updateInfo.componentsToUpdateRenderers,
+        ];
+        this.core.updateInfo.componentsToUpdateRenderers.clear();
+
+        await this.updateRendererInstructions({
+            componentNamesToUpdate,
+            sourceOfUpdate: { sourceInformation, local: true },
+            actionId,
+        });
+
+        // TODO: should we check for child results earlier so we don't have to check them
+        // when updating renderer instructions?
+        if (this.core.updateInfo.compositesToUpdateReplacements.size > 0) {
+            await this.core.replacementChangesFromCompositesToUpdate();
+
+            let componentNamesToUpdate = [
+                ...this.core.updateInfo.componentsToUpdateRenderers,
+            ];
+            this.core.updateInfo.componentsToUpdateRenderers.clear();
+
+            await this.updateRendererInstructions({
+                componentNamesToUpdate,
+                sourceOfUpdate: { sourceInformation, local: true },
+                actionId,
+            });
+        }
+    }
+}