@agent-native/core-corpus 0.217.0 → 0.219.0

package/corpus/templates/design/shared/motion-html-source.ts

@@ -33,15 +33,18 @@ import {
 import {
   decodeMotionTextDocument,
   injectMotionTextRuntime,
+  MOTION_TEXT_RUNTIME_SOURCE,
   MOTION_TEXT_RUNTIME_ATTRIBUTE,
   MOTION_TEXT_SOURCE_ATTRIBUTE,
   MOTION_TEXT_SOURCE_VERSION,
+  MOTION_TEXT_SOURCE_VERSION_PROVENANCE,
   readMotionTextDocument,
   removeMotionTextRuntime,
   type MotionTextDocument,
 } from "./motion-text-code";
 import {
   MOTION_DEFAULT_PLAYBACK_MODE,
+  parseMotionPlaybackMode,
   readTimelinePlaybackMode,
   type MotionPlaybackMode,
   type MotionTimeline,
@@ -50,6 +53,8 @@ import {
 const NODE_ID_ATTRIBUTE = "data-agent-native-node-id";
 const MANAGED_STYLE_ATTRIBUTE = "data-agent-native-motion";
 const SAFE_NODE_ID = /^[A-Za-z0-9_-]{1,512}$/;
+const MOTION_TEXT_V1_RUNTIME_SHA256 =
+  "ba4c65a0893f8c551897d6ede05f9a2167d70832a7c8050b152859fb1828addb";
 
 const FATAL_HTML_PARSE_ERRORS = new Set([
   "control-character-in-input-stream",
@@ -67,6 +72,7 @@ type HtmlNode = {
   tagName?: string;
   value?: string;
   attrs?: Array<{ name: string; value: string }>;
+  parentNode?: HtmlNode;
   childNodes?: HtmlNode[];
   content?: HtmlNode;
   insideTemplate?: boolean;
@@ -188,20 +194,23 @@ function parseHtml(source: string): ParsedHtml {
   }
 
   const nodes: HtmlNode[] = [];
-  const pending: Array<{ node: HtmlNode; insideTemplate: boolean }> = [
-    { node: document, insideTemplate: false },
-  ];
+  const pending: Array<{
+    node: HtmlNode;
+    insideTemplate: boolean;
+    parent?: HtmlNode;
+  }> = [{ node: document, insideTemplate: false }];
   while (pending.length > 0) {
-    const { node, insideTemplate } = pending.pop()!;
+    const { node, insideTemplate, parent } = pending.pop()!;
+    if (parent) node.parentNode = parent;
     node.insideTemplate = insideTemplate;
     nodes.push(node);
     pending.push(
       ...(node.childNodes ?? [])
         .reverse()
-        .map((child) => ({ node: child, insideTemplate })),
+        .map((child) => ({ node: child, insideTemplate, parent: node })),
     );
     if (node.tagName === "template" && node.content) {
-      pending.push({ node: node.content, insideTemplate: true });
+      pending.push({ node: node.content, insideTemplate: true, parent: node });
     }
   }
   return { nodes };
@@ -275,117 +284,1439 @@ function findManagedStyle(
       "Managed Motion style elements cannot live inside an HTML template.",
     );
   }
-  if (marked.length > 1) {
-    sourceError(
-      "ambiguous-managed-style",
-      "HTML contains more than one managed Motion style element.",
-    );
+  if (marked.length > 1) {
+    sourceError(
+      "ambiguous-managed-style",
+      "HTML contains more than one managed Motion style element.",
+    );
+  }
+  const node = marked[0];
+  if (!node) return null;
+  const range = assertSourceRanges(source, node);
+  return { node, css: textContent(node), range };
+}
+
+function motionTextError(error: Error): MotionHtmlSourceError {
+  return new MotionHtmlSourceError("invalid-motion-text", error.message);
+}
+
+function readMotionText(source: string): MotionTextDocument | null {
+  const read = readMotionTextDocument(source);
+  if (read.status === "invalid") throw motionTextError(read.error);
+  return read.status === "valid" ? read.document : null;
+}
+
+function assertMotionTextOutsideTemplates(nodes: HtmlNode[]): void {
+  if (
+    nodes.some(
+      (node) =>
+        node.insideTemplate &&
+        node.tagName === "script" &&
+        (attributes(node, MOTION_TEXT_SOURCE_ATTRIBUTE).length > 0 ||
+          attributes(node, MOTION_TEXT_RUNTIME_ATTRIBUTE).length > 0),
+    )
+  ) {
+    sourceError(
+      "invalid-motion-text",
+      "Managed Motion Text scripts cannot live inside an HTML template.",
+    );
+  }
+}
+
+function targetsFromDocuments(
+  document: MotionCodeDocument | null,
+  textDocument: MotionTextDocument | null,
+): string[] {
+  return [
+    ...new Set([
+      ...(document?.tracks.map((track) => track.targetNodeId) ?? []),
+      ...(document?.nativeStyles?.map((style) => style.targetNodeId) ?? []),
+      ...(textDocument?.animations.map((animation) => animation.targetNodeId) ??
+        []),
+    ]),
+  ];
+}
+
+function pathTrimTargetsFromDocument(
+  document: MotionCodeDocument | null,
+): string[] {
+  if (!document) return [];
+  return [
+    ...new Set([
+      ...document.tracks
+        .filter((track) => track.property === "path-trim")
+        .map((track) => track.targetNodeId),
+      ...(document.nativeStyles ?? [])
+        .filter((style) => style.enabled !== false && style.styleKey === "Path")
+        .map((style) => style.targetNodeId),
+    ]),
+  ];
+}
+
+function pathTrimTargetsFromTimeline(timeline: MotionTimeline): string[] {
+  return [
+    ...new Set([
+      ...timeline.tracks
+        .filter((track) => track.property === "path-trim")
+        .map((track) => track.targetNodeId),
+      ...(timeline.nativeStyles ?? [])
+        .filter((style) => style.enabled !== false && style.styleKey === "Path")
+        .map((style) => style.targetNodeId),
+    ]),
+  ];
+}
+
+function applyPathTrimTargets(source: string, targetNodeIds: string[]): string {
+  try {
+    return applyMotionPathTrimSource(source, targetNodeIds, "html");
+  } catch (error) {
+    if (error instanceof MotionPathTrimSourceError) {
+      sourceError("invalid-path-trim", error.message);
+    }
+    throw error;
+  }
+}
+
+function restorePathTrimTargets(source: string): string {
+  try {
+    return restoreMotionPathTrimSource(source, "html");
+  } catch (error) {
+    if (error instanceof MotionPathTrimSourceError) {
+      sourceError("invalid-path-trim", error.message);
+    }
+    throw error;
+  }
+}
+
+function assertSafeTargetId(targetNodeId: string): void {
+  if (!SAFE_NODE_ID.test(targetNodeId)) {
+    sourceError(
+      "unsupported-target",
+      `Motion target ID "${targetNodeId}" is not a safe static HTML node ID.`,
+    );
+  }
+}
+
+function isRuntimeStyleMutationHandler(name: string, value = ""): boolean {
+  const normalized = name.toLowerCase();
+  return (
+    ((normalized === "x-data" || normalized === "v-scope") &&
+      !isStaticRuntimeScopeData(value)) ||
+    isRuntimeLifecycleMutationAttribute(name) ||
+    normalized === "x-show" ||
+    normalized.startsWith("x-show.") ||
+    normalized === "v-show" ||
+    normalized.startsWith("v-show.") ||
+    normalized === ":class" ||
+    normalized.startsWith(":class.") ||
+    normalized === "x-bind:class" ||
+    normalized.startsWith("x-bind:class.") ||
+    normalized === "v-bind:class" ||
+    normalized.startsWith("v-bind:class.") ||
+    normalized === ":style" ||
+    normalized.startsWith(":style.") ||
+    normalized === "x-bind:style" ||
+    normalized.startsWith("x-bind:style.") ||
+    normalized === "v-bind:style" ||
+    normalized.startsWith("v-bind:style.") ||
+    normalized === "x-on" ||
+    normalized.startsWith("x-on:") ||
+    normalized === "v-on" ||
+    normalized.startsWith("v-on:") ||
+    normalized.startsWith("@")
+  );
+}
+
+function isRuntimeLifecycleMutationAttribute(name: string): boolean {
+  const normalized = name.toLowerCase();
+  return (
+    normalized === "x-init" ||
+    normalized.startsWith("x-init.") ||
+    normalized === "x-effect" ||
+    normalized.startsWith("x-effect.")
+  );
+}
+
+function hasPotentialRuntimeMutationHandler(
+  attrs: readonly { name: string; value: string }[] | undefined,
+): boolean {
+  return (attrs ?? []).some(
+    ({ name, value }) =>
+      isRuntimeStyleMutationHandler(name, value) ||
+      isNativeInlineEventHandler(name),
+  );
+}
+
+function isRuntimeStyleMutationScope(name: string): boolean {
+  const normalized = name.toLowerCase();
+  return normalized === "x-data" || normalized === "v-scope";
+}
+
+function isStaticRuntimeScopeData(value: string): boolean {
+  const normalized = value.trim();
+  if (!normalized || normalized === "{}") return true;
+  if (!normalized.startsWith("{") || !normalized.endsWith("}")) return false;
+
+  const entries = splitStaticObjectProperties(normalized.slice(1, -1).trim());
+  return (
+    entries !== null &&
+    entries.every((entry) => {
+      const match =
+        /^(?:[A-Za-z_$][\w$]*|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')\s*:\s*(.+)$/s.exec(
+          entry,
+        );
+      return match !== null && isStaticRuntimeScopeValue(match[1]!.trim());
+    })
+  );
+}
+
+function splitStaticObjectProperties(value: string): string[] | null {
+  if (!value) return [];
+  const properties: string[] = [];
+  let quote: "'" | '"' | null = null;
+  let escaped = false;
+  let start = 0;
+
+  for (let index = 0; index < value.length; index++) {
+    const character = value[index]!;
+    if (quote) {
+      if (escaped) {
+        escaped = false;
+      } else if (character === "\\") {
+        escaped = true;
+      } else if (character === quote) {
+        quote = null;
+      }
+      continue;
+    }
+    if (character === "'" || character === '"') {
+      quote = character;
+    } else if (character === ",") {
+      properties.push(value.slice(start, index).trim());
+      start = index + 1;
+    } else if ("{}[]()".includes(character)) {
+      return null;
+    }
+  }
+
+  if (quote || escaped) return null;
+  properties.push(value.slice(start).trim());
+  return properties.every(Boolean) ? properties : null;
+}
+
+function isStaticRuntimeScopeValue(value: string): boolean {
+  return /^(?:true|false|null|undefined|-?(?:\d+(?:\.\d*)?|\.\d+)|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')$/.test(
+    value,
+  );
+}
+
+function findRuntimeStyleMutationAttribute(target: HtmlNode):
+  | {
+      attribute: { name: string; value: string };
+      location: "target" | "ancestor" | "runtime-scope";
+    }
+  | undefined {
+  const ancestors = [target];
+  let current = target.parentNode;
+  let outermostScopeIndex = -1;
+  while (current) {
+    ancestors.push(current);
+    if (current.attrs?.some(({ name }) => isRuntimeStyleMutationScope(name))) {
+      outermostScopeIndex = ancestors.length - 1;
+    }
+    current = current.parentNode;
+  }
+
+  for (let index = 0; index < ancestors.length; index++) {
+    const node = ancestors[index]!;
+    const attribute = node.attrs?.find(({ name, value }) =>
+      isRuntimeStyleMutationHandler(name, value),
+    );
+    if (attribute) {
+      return {
+        attribute,
+        location: index === 0 ? "target" : "ancestor",
+      };
+    }
+  }
+
+  if (outermostScopeIndex >= 0) {
+    const scope = ancestors[outermostScopeIndex]!;
+    const attribute = findRuntimeStyleMutationInScope(scope);
+    if (attribute) return { attribute, location: "runtime-scope" };
+  }
+
+  return undefined;
+}
+
+const EXECUTABLE_SCRIPT_TYPES = new Set([
+  "application/ecmascript",
+  "application/javascript",
+  "application/x-ecmascript",
+  "application/x-javascript",
+  "text/ecmascript",
+  "text/javascript",
+  "text/javascript1.0",
+  "text/javascript1.1",
+  "text/javascript1.2",
+  "text/javascript1.3",
+  "text/javascript1.4",
+  "text/javascript1.5",
+  "text/jscript",
+  "text/livescript",
+  "text/x-ecmascript",
+  "text/x-javascript",
+]);
+
+function isExecutableScript(node: HtmlNode): boolean {
+  const type = attributes(node, "type")[0]?.value.trim().toLowerCase();
+  if (!type || type === "module") return true;
+  return EXECUTABLE_SCRIPT_TYPES.has(type.split(";", 1)[0]!.trim());
+}
+
+const JAVASCRIPT_URL_ATTRIBUTES = new Set([
+  "href",
+  "src",
+  "xlink:href",
+  "action",
+  "formaction",
+  "data",
+]);
+
+function isJavascriptUrl(value: string): boolean {
+  return value
+    .replace(/[\u0000-\u0020\u007f]/g, "")
+    .toLowerCase()
+    .startsWith("javascript:");
+}
+
+function isJavascriptUrlAttribute(name: string, value: string): boolean {
+  return (
+    JAVASCRIPT_URL_ATTRIBUTES.has(name.toLowerCase()) && isJavascriptUrl(value)
+  );
+}
+
+function srcdocContainsExecutableContentOrNestedFrame(value: string): boolean {
+  return parseHtml(value).nodes.some((node) => {
+    if (node.insideTemplate) return false;
+    if (
+      (node.tagName === "script" && isExecutableScript(node)) ||
+      node.tagName === "iframe" ||
+      (node.attrs ?? []).some(
+        ({ name, value: attributeValue }) =>
+          isEventHandlerAttribute(name) ||
+          isRuntimeLifecycleMutationAttribute(name) ||
+          isJavascriptUrlAttribute(name, attributeValue),
+      )
+    ) {
+      return true;
+    }
+    return false;
+  });
+}
+
+function isManagedMotionTextRuntime(source: string, node: HtmlNode): boolean {
+  const marker = attributes(node, MOTION_TEXT_RUNTIME_ATTRIBUTE);
+  if (
+    marker.length !== 1 ||
+    node.attrs?.length !== 1 ||
+    !["v1", `v${MOTION_TEXT_SOURCE_VERSION}`].includes(marker[0]?.value ?? "")
+  ) {
+    return false;
+  }
+
+  const textRead = readMotionTextDocument(source);
+  if (textRead.status !== "valid") return false;
+  const sourceMarker = parseHtml(source)
+    .nodes.filter((candidate) => candidate.tagName === "script")
+    .flatMap((candidate) =>
+      attributes(candidate, MOTION_TEXT_SOURCE_ATTRIBUTE),
+    );
+  if (sourceMarker.length !== 1) return false;
+  const sourceVersion =
+    textRead.document[MOTION_TEXT_SOURCE_VERSION_PROVENANCE] ??
+    MOTION_TEXT_SOURCE_VERSION;
+  const expectedMarker = `v${sourceVersion}`;
+  if (
+    marker[0]?.value !== expectedMarker ||
+    sourceMarker[0]?.value !== expectedMarker
+  ) {
+    return false;
+  }
+
+  const runtime = extractManagedMotionTextRuntime(textContent(node).trim());
+  if (
+    !runtime ||
+    !runtimeAnimationsMatch(runtime.payload, textRead.document, sourceVersion)
+  ) {
+    return false;
+  }
+
+  if (sourceVersion === 1) {
+    return (
+      bytesToHex(sha256(new TextEncoder().encode(runtime.template))) ===
+      MOTION_TEXT_V1_RUNTIME_SHA256
+    );
+  }
+  return runtime.template === MOTION_TEXT_RUNTIME_SOURCE;
+}
+
+interface ManagedMotionTextRuntimePayload {
+  animations: unknown[];
+  playbackMode: MotionPlaybackMode;
+}
+
+function extractManagedMotionTextRuntime(
+  source: string,
+): { template: string; payload: ManagedMotionTextRuntimePayload } | null {
+  if (!source.endsWith(");")) return null;
+
+  let markerIndex = source.lastIndexOf("})(", source.length - 3);
+  while (markerIndex >= 0) {
+    const payloadSource = source.slice(markerIndex + 3, -2);
+    let payload: unknown;
+    try {
+      payload = JSON.parse(payloadSource);
+    } catch {
+      markerIndex = source.lastIndexOf("})(", markerIndex - 1);
+      continue;
+    }
+    if (isManagedMotionTextRuntimePayload(payload)) {
+      return {
+        template: `${source.slice(0, markerIndex + 3)}__MOTION_TEXT_SOURCE__);`,
+        payload: {
+          animations: payload.animations,
+          playbackMode: payload.playbackMode,
+        },
+      };
+    }
+    markerIndex = source.lastIndexOf("})(", markerIndex - 1);
+  }
+  return null;
+}
+
+function isManagedMotionTextRuntimePayload(
+  value: unknown,
+): value is ManagedMotionTextRuntimePayload {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    Array.isArray((value as { animations?: unknown }).animations) &&
+    parseMotionPlaybackMode(
+      (value as { playbackMode?: unknown }).playbackMode,
+    ) !== null
+  );
+}
+
+function runtimeAnimationsMatch(
+  payload: ManagedMotionTextRuntimePayload,
+  document: MotionTextDocument,
+  sourceVersion: 1 | typeof MOTION_TEXT_SOURCE_VERSION,
+): boolean {
+  if (sourceVersion === MOTION_TEXT_SOURCE_VERSION) {
+    return (
+      JSON.stringify(payload.animations) === JSON.stringify(document.animations)
+    );
+  }
+
+  const legacyAnimations = document.animations.map((animation) => ({
+    targetNodeId: animation.targetNodeId,
+    unit: animation.unit,
+    direction: animation.direction,
+    staggerMs: animation.staggerMs,
+    delayMs: animation.delayMs,
+    property: animation.property,
+    durationMs: animation.durationMs,
+    keyframes: animation.keyframes,
+  }));
+  return (
+    JSON.stringify(payload.animations) === JSON.stringify(legacyAnimations)
+  );
+}
+
+function assertExecutableScriptsSafe(
+  source: string,
+  nodes: readonly HtmlNode[],
+  targetNodeIds: readonly string[],
+  generatedIds: Map<number | undefined, string>,
+): void {
+  for (const node of nodes) {
+    if (node.insideTemplate) continue;
+
+    const targetMutatingHandler = node.attrs?.find(
+      ({ name, value }) =>
+        (isEventHandlerAttribute(name) ||
+          isRuntimeLifecycleMutationAttribute(name)) &&
+        handlerMayMutateMotionTarget(
+          value,
+          node,
+          nodes,
+          targetNodeIds,
+          generatedIds,
+        ),
+    );
+    if (targetMutatingHandler) {
+      sourceError(
+        "unsupported-target",
+        `HTML Motion targets cannot be synchronized safely while an inline ${targetMutatingHandler.name} handler may mutate a Motion target.`,
+      );
+    }
+
+    const javascriptUrl = node.attrs?.find(({ name, value }) =>
+      isJavascriptUrlAttribute(name, value),
+    );
+    if (javascriptUrl) {
+      sourceError(
+        "unsupported-target",
+        `HTML Motion targets cannot be synchronized safely while ${javascriptUrl.name} contains a javascript URL.`,
+      );
+    }
+
+    const srcdoc = attributes(node, "srcdoc")[0]?.value;
+    if (
+      node.tagName === "iframe" &&
+      srcdoc &&
+      srcdocContainsExecutableContentOrNestedFrame(srcdoc)
+    ) {
+      sourceError(
+        "unsupported-target",
+        "HTML Motion targets cannot be synchronized safely while an iframe srcdoc contains an executable script, event handler, javascript URL, or nested frame.",
+      );
+    }
+
+    if (node.tagName !== "script") continue;
+    if (
+      !isExecutableScript(node) &&
+      !hasPotentialRuntimeMutationHandler(node.attrs)
+    ) {
+      continue;
+    }
+    if (
+      !hasPotentialRuntimeMutationHandler(node.attrs) &&
+      isManagedMotionTextRuntime(source, node)
+    ) {
+      continue;
+    }
+    sourceError(
+      "unsupported-target",
+      "HTML Motion targets cannot be synchronized safely while an executable script may change their class or style.",
+    );
+  }
+}
+
+function isRuntimeEventHandler(name: string): boolean {
+  const normalized = name.toLowerCase();
+  return (
+    normalized === "x-on" ||
+    normalized.startsWith("x-on:") ||
+    normalized === "v-on" ||
+    normalized.startsWith("v-on:") ||
+    normalized.startsWith("@")
+  );
+}
+
+function isEventHandlerAttribute(name: string): boolean {
+  return isRuntimeEventHandler(name) || isNativeInlineEventHandler(name);
+}
+
+function isNativeInlineEventHandler(name: string): boolean {
+  return /^on[a-z]/i.test(name);
+}
+
+function handlerMayMutateMotionTarget(
+  value: string,
+  handlerNode: HtmlNode,
+  nodes: readonly HtmlNode[],
+  targetNodeIds: readonly string[],
+  generatedIds: Map<number | undefined, string>,
+): boolean {
+  if (targetNodeIds.length > 0 && mayInjectRuntimeStylesheet(value)) {
+    return true;
+  }
+  if (mayMutateThroughDomTraversal(value)) {
+    return true;
+  }
+
+  const targetIds = new Set(targetNodeIds);
+  if (mayMutateThroughAlternateDomRoot(value, nodes, targetIds, generatedIds)) {
+    return true;
+  }
+  const directTargetMutation =
+    DIRECT_ELEMENT_MUTATION.test(value) || handlerTargetAliasMayMutate(value);
+  if (
+    directTargetMutation &&
+    isMotionTargetNode(handlerNode, targetIds, generatedIds)
+  ) {
+    return true;
+  }
+  if (
+    (DIRECT_EVENT_TARGET_MUTATION.test(value) ||
+      eventTargetAliasMayMutate(value)) &&
+    containsMotionTarget(handlerNode, nodes, targetIds, generatedIds)
+  ) {
+    return true;
+  }
+  if (
+    handlerElementSelectorMayMutateMotionTarget(
+      value,
+      handlerNode,
+      nodes,
+      targetIds,
+      generatedIds,
+    )
+  ) {
+    return true;
+  }
+  return handlerSelectsAndMutatesMotionTarget(
+    value,
+    nodes,
+    targetIds,
+    generatedIds,
+  );
+}
+
+const MUTATION_MEMBER_ACCESS = String.raw`(?:\?\.|\.)\s*(?:style\b|classList\b|className\b|setAttribute(?:NS)?\s*\(|removeAttribute\s*\(|toggleAttribute\s*\(|animate\s*\()|\[\s*["'](?:style|classList|className|setAttribute(?:NS)?|removeAttribute|toggleAttribute|animate)["']\s*\]`;
+const MUTATION_MEMBER_ACCESS_PATTERN = new RegExp(MUTATION_MEMBER_ACCESS, "i");
+
+function handlerElementSelectorMayMutateMotionTarget(
+  value: string,
+  handlerNode: HtmlNode,
+  nodes: readonly HtmlNode[],
+  targetIds: ReadonlySet<string>,
+  generatedIds: Map<number | undefined, string>,
+): boolean {
+  const selectorNames = String.raw`querySelector(?:All)?|getElementById|getElementsBy(?:ClassName|Name|TagName)`;
+  const scope = String.raw`(?:this|\$el|(?:event|e|\$event)\s*(?:\.\s*(?:currentTarget|target)|\[\s*["'](?:currentTarget|target)["']\s*\]))`;
+  const selectorCall = new RegExp(
+    String.raw`(?:^|[^\w$])${scope}\s*(?:\.\s*(${selectorNames})|\[\s*["'](${selectorNames})["']\s*\])\s*\(`,
+    "gi",
+  );
+  const hasMutation = MUTATION_MEMBER_ACCESS_PATTERN.test(value);
+  if (!hasMutation) return false;
+
+  const aliases = assignedAliases(
+    value,
+    /^(?:this|\$el|(?:event|e|\$event)\s*(?:\.\s*(?:currentTarget|target)|\[\s*["'](?:currentTarget|target)["']\s*\]))/i,
+  );
+  const escapedAliases = [...aliases]
+    .map((alias) => alias.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"))
+    .join("|");
+  if (escapedAliases) {
+    const aliasSelectorCall = new RegExp(
+      String.raw`\b(?:${escapedAliases})\s*(?:\.\s*(${selectorNames})|\[\s*["'](${selectorNames})["']\s*\])\s*\(`,
+      "gi",
+    );
+    if (aliasSelectorCall.test(value)) {
+      return containsMotionTarget(handlerNode, nodes, targetIds, generatedIds);
+    }
+  }
+
+  if (!selectorCall.test(value)) return false;
+  return containsMotionTarget(handlerNode, nodes, targetIds, generatedIds);
+}
+
+const DIRECT_ELEMENT_MUTATION = new RegExp(
+  String.raw`(?:\bthis\b|\b(?:event|e)\s*(?:\.\s*(?:currentTarget|target)|\[\s*["'](?:currentTarget|target)["']\s*\])|\$el|\$event\s*(?:\.\s*(?:currentTarget|target)|\[\s*["'](?:currentTarget|target)["']\s*\]))\s*(?:${MUTATION_MEMBER_ACCESS})`,
+  "i",
+);
+
+const DIRECT_EVENT_TARGET_MUTATION = new RegExp(
+  String.raw`(?:\b(?:event|e|\$event)\s*(?:\.\s*target|\[\s*["']target["']\s*\]))\s*(?:${MUTATION_MEMBER_ACCESS})`,
+  "i",
+);
+
+function mayInjectRuntimeStylesheet(value: string): boolean {
+  if (
+    /\b(?:adoptedStyleSheets|CSSStyleSheet|styleSheets|cssRules|insertRule|addRule|replaceSync)\b/i.test(
+      value,
+    )
+  ) {
+    return true;
+  }
+
+  const createElementCalls = /\bcreateElement(?:NS)?\s*\(([^)]*)\)/gi;
+  let match: RegExpExecArray | null;
+  while ((match = createElementCalls.exec(value)) !== null) {
+    const argument = match[1]?.trim() ?? "";
+    const tag = /^(['"])([^'"]+)\1$/.exec(argument)?.[2]?.toLowerCase();
+    if (!tag || tag === "style" || tag === "link") return true;
+  }
+
+  return /(?:innerHTML|insertAdjacentHTML)\s*(?:\+=|=|\()\s*[^;]*(?:<\s*style\b|<\s*link\b)/i.test(
+    value,
+  );
+}
+
+function mayMutateThroughDomTraversal(value: string): boolean {
+  const traversesDom =
+    /(?:\.\s*(?:parentElement|parentNode|children|childNodes|firstElementChild|lastElementChild|firstChild|lastChild|nextElementSibling|previousElementSibling|nextSibling|previousSibling|closest|matches)\b|\[\s*["'](?:parentElement|parentNode|children|childNodes|firstElementChild|lastElementChild|firstChild|lastChild|nextElementSibling|previousElementSibling|nextSibling|previousSibling|closest|matches)["']\s*\])/i.test(
+      value,
+    );
+  return traversesDom && MUTATION_MEMBER_ACCESS_PATTERN.test(value);
+}
+
+function mayMutateThroughAlternateDomRoot(
+  value: string,
+  nodes: readonly HtmlNode[],
+  targetIds: ReadonlySet<string>,
+  generatedIds: Map<number | undefined, string>,
+): boolean {
+  const root = String.raw`(?:this|\$el|(?:event|e|\$event)\s*(?:\.\s*(?:currentTarget|target)|\[\s*["'](?:currentTarget|target)["']\s*\]))`;
+  const selectorNames = String.raw`querySelector(?:All)?|getElementById|getElementsBy(?:ClassName|Name|TagName)`;
+  const selectorCalls = new RegExp(
+    String.raw`(?<![\w$])${root}\s*(?:\.\s*(?:ownerDocument)|\.\s*getRootNode\s*\(\s*\)|\[\s*["'](?:ownerDocument|getRootNode)["']\s*\](?:\s*\(\s*\))?)\s*(?:\.\s*(${selectorNames})|\[\s*["'](${selectorNames})["']\s*\])\s*\(`,
+    "gi",
+  );
+  let match: RegExpExecArray | null;
+
+  while ((match = selectorCalls.exec(value)) !== null) {
+    const callStartIndex = match.index;
+    const method = match[1] ?? match[2]!;
+    const openParenIndex = selectorCalls.lastIndex - 1;
+    const callEndIndex = findSelectorCallEnd(value, openParenIndex);
+    if (callEndIndex === null) return true;
+    if (
+      !alternateRootSelectorCallFeedsMutationSink(
+        value,
+        callStartIndex,
+        callEndIndex,
+        method,
+      )
+    ) {
+      selectorCalls.lastIndex = callEndIndex;
+      continue;
+    }
+
+    const selectorArgument = readStaticSelectorArgument(
+      value.slice(openParenIndex + 1, callEndIndex - 1),
+    );
+    if (!selectorArgument) return true;
+
+    const selector = selectorForDocumentCall(method, selectorArgument);
+    if (!selector) return true;
+    if (selectorMayTargetMotionNode(selector, nodes, targetIds, generatedIds)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function alternateRootSelectorCallFeedsMutationSink(
+  source: string,
+  callStartIndex: number,
+  callEndIndex: number,
+  method: string,
+): boolean {
+  const afterCall = source.slice(callEndIndex);
+  if (selectedElementHasActualMutationSink(afterCall)) return true;
+
+  const assignment =
+    /(?:\b(?:const|let|var)\s+)?([A-Za-z_$][\w$]*)\s*=\s*$/.exec(
+      source.slice(0, callStartIndex),
+    );
+  if (
+    assignment &&
+    identifierHasActualMutationSink(afterCall, assignment[1]!)
+  ) {
+    return true;
+  }
+
+  if (method.toLowerCase() === "queryselectorall") {
+    const callbackStatus = querySelectorAllCallbackMutationStatus(afterCall);
+    const forOfStatus = querySelectorAllForOfMutationStatus(
+      source,
+      callStartIndex,
+      callEndIndex,
+    );
+    if (callbackStatus === true || forOfStatus === true) return true;
+    if (callbackStatus === false || forOfStatus === false) return false;
+  }
+
+  return destructuredSelectorCallHasActualMutationSink(
+    source.slice(0, callStartIndex),
+    afterCall,
+  );
+}
+
+const ACTUAL_MUTATION_MEMBER_ACCESS = String.raw`(?:\?\.|\.)\s*(?:style(?:\s*(?:\.\s*[A-Za-z_$][\w$]*|\[[^\]]+\]))*\s*(?:=(?!=)|\+=|-=|\+\+|--)|style\s*(?:\?\.|\.)\s*(?:setProperty|removeProperty)\s*\(|classList\s*(?:\?\.|\.)\s*(?:add|remove|toggle|replace)\s*\(|className\s*(?:=(?!=)|\+=)|(?:setAttribute(?:NS)?|removeAttribute|toggleAttribute|animate)\s*\()|\[\s*["'](?:setAttribute(?:NS)?|removeAttribute|toggleAttribute|animate)["']\s*\]\s*\(`;
+
+function selectedElementHasActualMutationSink(suffix: string): boolean {
+  return new RegExp(
+    String.raw`^\s*(?:\[\s*\d+\s*\]\s*)?${ACTUAL_MUTATION_MEMBER_ACCESS}`,
+    "i",
+  ).test(suffix);
+}
+
+function identifierHasActualMutationSink(
+  source: string,
+  identifier: string,
+): boolean {
+  const escaped = identifier.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return (
+    new RegExp(
+      `\\b${escaped}\\s*(?:${ACTUAL_MUTATION_MEMBER_ACCESS})`,
+      "i",
+    ).test(source) ||
+    new RegExp(
+      `\\bObject\\s*\\.\\s*assign\\s*\\(\\s*${escaped}\\s*(?:\\?\\.|\\.)\\s*style\\b`,
+      "i",
+    ).test(source)
+  );
+}
+
+function identifierAliasHasActualMutationSink(
+  source: string,
+  identifier: string,
+): boolean {
+  return identifierAliases(source, identifier).some((alias) =>
+    identifierHasActualMutationSink(source, alias),
+  );
+}
+
+function styleAliasHasActualMutationSink(
+  source: string,
+  identifier: string,
+): boolean {
+  return identifierAliases(source, identifier).some((alias) => {
+    const escaped = alias.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    return (
+      new RegExp(
+        `\\b${escaped}\\s*(?:(?:\\.\\s*[A-Za-z_$][\\w$]*|\\[\\s*[^\\]]+\\s*\\])\\s*(?:=(?!=)|\\+=|-=|\\+\\+|--)|(?:\\?\\.|\\.)\\s*(?:setProperty|removeProperty)\\s*\\()`,
+        "i",
+      ).test(source) ||
+      new RegExp(
+        `\\bObject\\s*\\.\\s*assign\\s*\\(\\s*${escaped}(?:\\s*[,\\)])`,
+        "i",
+      ).test(source)
+    );
+  });
+}
+
+function destructuredBindingsMayMutate(
+  bindings: string,
+  source: string,
+): boolean {
+  return bindings.split(",").some((binding) => {
+    const [property, alias] = binding.split(/\s*:\s*/);
+    const name = alias?.trim() || property?.trim();
+    if (!name) return false;
+    if (property?.trim() === "classList") {
+      const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      return new RegExp(
+        `\\b${escaped}\\s*(?:\\?\\.|\\.)\\s*(?:add|remove|toggle|replace)\\s*\\(`,
+        "i",
+      ).test(source);
+    }
+    return (
+      property?.trim() === "style" &&
+      styleAliasHasActualMutationSink(source, name)
+    );
+  });
+}
+
+function querySelectorAllCallbackMutationStatus(
+  source: string,
+): boolean | null {
+  const methodCall =
+    /^\s*[\])]*\s*\.\s*(?:forEach|map|filter|some|every)\s*\(/i.exec(source);
+  const callback =
+    /^\s*[\])]*\s*\.\s*(?:forEach|map|filter|some|every)\s*\(\s*(?:async\s+)?(?:\(\s*([\w$]+)\s*\)|([\w$]+)|\(\s*\{\s*([^}]+)\s*\}\s*\))\s*=>/i.exec(
+      source,
+    );
+  if (!methodCall) return null;
+  if (!callback) return true;
+
+  const methodOpenIndex = methodCall[0].lastIndexOf("(");
+  const callEnd = findSelectorCallEnd(
+    source,
+    methodCall.index + methodOpenIndex,
+  );
+  if (callEnd === null) return true;
+
+  const callbackBody = source.slice(callback[0].length, callEnd - 1);
+  const callbackParameter = callback[1] ?? callback[2];
+  if (callbackParameter) {
+    return identifierAliasHasActualMutationSink(
+      callbackBody,
+      callbackParameter,
+    );
+  }
+  return (
+    callback[3] !== undefined &&
+    destructuredBindingsMayMutate(callback[3], callbackBody)
+  );
+}
+
+function destructuredSelectorCallHasActualMutationSink(
+  prefix: string,
+  suffix: string,
+): boolean {
+  const assignment = /\b(?:const|let|var)\s*\{\s*([^}]+)\s*\}\s*=\s*$/.exec(
+    prefix,
+  );
+  if (!assignment) return false;
+
+  return destructuredBindingsMayMutate(assignment[1]!, suffix);
+}
+
+function assignedAliases(
+  source: string,
+  initialExpression: RegExp,
+): Set<string> {
+  const aliases = new Set<string>();
+  const assignments =
+    /(?:\b(?:const|let|var)\s+)?([A-Za-z_$][\w$]*)\s*=\s*([^;,\n]+)/g;
+  let match: RegExpExecArray | null;
+  let changed = true;
+  while (changed) {
+    changed = false;
+    assignments.lastIndex = 0;
+    while ((match = assignments.exec(source)) !== null) {
+      const name = match[1]!;
+      const expression = match[2]!.trim().replace(/^\(|\)$/g, "");
+      const sourceAlias = /^([A-Za-z_$][\w$]*)\b/.exec(expression)?.[1];
+      if (
+        !aliases.has(name) &&
+        (initialExpression.test(expression) ||
+          (sourceAlias !== undefined && aliases.has(sourceAlias)))
+      ) {
+        aliases.add(name);
+        changed = true;
+      }
+    }
+  }
+  return aliases;
+}
+
+function identifierMutationSink(identifier: string): RegExp {
+  const escaped = identifier.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(`\\b${escaped}\\s*(?:${MUTATION_MEMBER_ACCESS})`, "i");
+}
+
+function identifierMayFeedMutationSink(
+  source: string,
+  identifier: string,
+): boolean {
+  const aliases = identifierAliases(source, identifier);
+  return aliases.some((alias) => {
+    if (elementMutationSinkForIdentifier(alias).test(source)) return true;
+    const escaped = alias.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    return new RegExp(
+      `\\b${escaped}(?:\\s*(?:\\?\\.|\\.)\\s*[A-Za-z_$][\\w$]*|\\s*\\[\\s*["'][^"']+["']\\s*\\]){1,8}\\s*(?:${MUTATION_MEMBER_ACCESS})`,
+      "i",
+    ).test(source);
+  });
+}
+
+function handlerTargetAliasMayMutate(value: string): boolean {
+  const targetExpression =
+    /^(?:this|\$el|(?:event|e|\$event)\s*(?:\.\s*(?:currentTarget|target)|\[\s*["'](?:currentTarget|target)["']\s*\]))/i;
+  const aliases = assignedAliases(value, targetExpression);
+  return [...aliases].some((alias) =>
+    identifierMutationSink(alias).test(value),
+  );
+}
+
+function eventTargetAliasMayMutate(value: string): boolean {
+  const targetExpression =
+    /^(?:event|e|\$event)\s*(?:\.\s*target|\[\s*["']target["']\s*\])/i;
+  const aliases = assignedAliases(value, targetExpression);
+  return [...aliases].some((alias) =>
+    identifierMutationSink(alias).test(value),
+  );
+}
+
+function containsMotionTarget(
+  node: HtmlNode,
+  nodes: readonly HtmlNode[],
+  targetNodeIds: ReadonlySet<string>,
+  generatedIds: Map<number | undefined, string>,
+): boolean {
+  return nodes.some((candidate) => {
+    if (!isMotionTargetNode(candidate, targetNodeIds, generatedIds))
+      return false;
+    let current = candidate.parentNode;
+    while (current) {
+      if (current === node) return true;
+      current = current.parentNode;
+    }
+    return false;
+  });
+}
+
+function isMotionTargetNode(
+  node: HtmlNode,
+  targetNodeIds: ReadonlySet<string>,
+  generatedIds: Map<number | undefined, string>,
+): boolean {
+  const targetAttrs = attributes(node, NODE_ID_ATTRIBUTE);
+  if (targetAttrs.some(({ value }) => targetNodeIds.has(value))) return true;
+  const generatedId = generatedIds.get(
+    node.sourceCodeLocation?.startTag?.startOffset,
+  );
+  return generatedId !== undefined && targetNodeIds.has(generatedId);
+}
+
+function handlerSelectsAndMutatesMotionTarget(
+  value: string,
+  nodes: readonly HtmlNode[],
+  targetIds: ReadonlySet<string>,
+  generatedIds: Map<number | undefined, string>,
+): boolean {
+  const usesDocumentSelector =
+    /\b(?:document|window|globalThis|self)\b/i.test(value) &&
+    /\b(?:querySelector(?:All)?|getElementById|getElementsBy(?:ClassName|Name|TagName))\b/i.test(
+      value,
+    );
+  const destructuredMutationCandidate =
+    /\b(?:const|let|var)\s*\{[^}]*\b(?:style|classList)\b[^}]*\}\s*=|\(\s*\{[^}]*\b(?:style|classList)\b[^}]*\}\s*\)\s*=>/i.test(
+      value,
+    );
+  if (
+    !usesDocumentSelector ||
+    (!MUTATION_MEMBER_ACCESS_PATTERN.test(value) &&
+      !destructuredMutationCandidate)
+  )
+    return false;
+
+  const selectorCalls =
+    /\b(?:document|window|globalThis|self)\s*(?:\.\s*document|\[\s*["']document["']\s*\])?\s*(?:\.\s*(querySelector(?:All)?|getElementById|getElementsBy(?:ClassName|Name|TagName))|\[\s*["'](querySelector(?:All)?|getElementById|getElementsBy(?:ClassName|Name|TagName))["']\s*\])\s*\(/gi;
+  let foundSelectorCall = false;
+  let match: RegExpExecArray | null;
+
+  while ((match = selectorCalls.exec(value)) !== null) {
+    foundSelectorCall = true;
+    const openParenIndex = selectorCalls.lastIndex - 1;
+    const method = match[1] ?? match[2]!;
+    const callEndIndex = findSelectorCallEnd(value, openParenIndex);
+    if (callEndIndex === null) return true;
+    if (
+      !selectorCallFeedsMutationSink(value, match.index, callEndIndex, method)
+    ) {
+      selectorCalls.lastIndex = callEndIndex;
+      continue;
+    }
+
+    const selectorArgument = readStaticSelectorArgument(
+      value.slice(openParenIndex + 1, callEndIndex - 1),
+    );
+    if (!selectorArgument) return true;
+
+    const selector = selectorForDocumentCall(method, selectorArgument);
+    if (!selector) return true;
+
+    const traversal = selectorCallTraversal(
+      value,
+      match.index,
+      callEndIndex,
+      method,
+    );
+    if (
+      selectorMayTargetMotionNode(
+        selector,
+        nodes,
+        targetIds,
+        generatedIds,
+        traversal,
+      )
+    ) {
+      return true;
+    }
+  }
+
+  return !foundSelectorCall;
+}
+
+function findSelectorCallEnd(
+  source: string,
+  openParenIndex: number,
+): number | null {
+  let depth = 0;
+  let quote: "'" | '"' | "`" | null = null;
+  let escaped = false;
+
+  for (let index = openParenIndex; index < source.length; index++) {
+    const character = source[index]!;
+    if (quote) {
+      if (escaped) escaped = false;
+      else if (character === "\\") escaped = true;
+      else if (character === quote) quote = null;
+      continue;
+    }
+    if (character === "'" || character === '"' || character === "`") {
+      quote = character;
+    } else if (character === "(") {
+      depth++;
+    } else if (character === ")" && --depth === 0) {
+      return index + 1;
+    }
+  }
+
+  return null;
+}
+
+function readStaticSelectorArgument(source: string): string | null {
+  const argument = source.trim();
+  const quote = argument[0];
+  if (
+    (quote !== "'" && quote !== '"') ||
+    argument[argument.length - 1] !== quote
+  ) {
+    return null;
+  }
+  const value = argument.slice(1, -1);
+  return value.includes("\\") || value.includes(quote) ? null : value;
+}
+
+function selectorCallFeedsMutationSink(
+  source: string,
+  callStartIndex: number,
+  callEndIndex: number,
+  method: string,
+): boolean {
+  const afterCall = source.slice(callEndIndex);
+  if (SELECTED_ELEMENT_MUTATION_SINK.test(afterCall)) return true;
+  if (
+    destructuredSelectorCallHasActualMutationSink(
+      source.slice(0, callStartIndex),
+      afterCall,
+    )
+  ) {
+    return true;
+  }
+
+  if (method.toLowerCase() === "queryselectorall") {
+    const callbackStatus = querySelectorAllCallbackMutationStatus(afterCall);
+    if (callbackStatus !== null) return callbackStatus;
+    if (
+      arrayFromSelectorCallbackMayMutate(source, callStartIndex, callEndIndex)
+    ) {
+      return true;
+    }
+    const forOfStatus = querySelectorAllForOfMutationStatus(
+      source,
+      callStartIndex,
+      callEndIndex,
+    );
+    if (forOfStatus !== null) return forOfStatus;
+  }
+
+  const assignment =
+    /(?:\b(?:const|let|var)\s+)?([A-Za-z_$][\w$]*)\s*=\s*$/.exec(
+      source.slice(0, callStartIndex),
+    );
+  if (assignment) {
+    return identifierMayFeedMutationSink(afterCall, assignment[1]!);
+  }
+
+  const remainingExpression = afterCall.trimStart();
+  if (!remainingExpression || /^[;),&|?]/.test(remainingExpression))
+    return false;
+  return true;
+}
+
+function arrayFromSelectorCallbackMayMutate(
+  source: string,
+  callStartIndex: number,
+  callEndIndex: number,
+): boolean {
+  if (!/\bArray\s*\.\s*from\s*\(\s*$/.test(source.slice(0, callStartIndex)))
+    return false;
+
+  const callback =
+    /^\s*,\s*(?:async\s+)?(?:\(\s*([A-Za-z_$][\w$]*)(?:\s*,[^)]*)?\)|([A-Za-z_$][\w$]*))\s*=>/i.exec(
+      source.slice(callEndIndex),
+    );
+  const callbackParameter = callback?.[1] ?? callback?.[2];
+  return (
+    callbackParameter !== undefined &&
+    identifierAliasHasActualMutationSink(
+      source.slice(callEndIndex),
+      callbackParameter,
+    )
+  );
+}
+
+function querySelectorAllForOfMutationStatus(
+  source: string,
+  callStartIndex: number,
+  callEndIndex: number,
+): boolean | null {
+  const prefix = source.slice(0, callStartIndex);
+  const forOfHeader = /\bfor\s*\(([^)]*)\bof\s*(?:\[\s*\.\.\.\s*)?$/i.exec(
+    prefix,
+  );
+  if (!forOfHeader) return null;
+
+  const binding = /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*$/.exec(
+    forOfHeader[1]!,
+  );
+  if (!binding) return true;
+
+  const afterCall = source.slice(callEndIndex);
+  const loopHeaderEnd = /^\s*\]?\s*\)\s*/.exec(afterCall);
+  if (!loopHeaderEnd) return true;
+
+  const loopBody = afterCall.slice(loopHeaderEnd[0].length);
+  if (loopBody.startsWith("{")) {
+    const bodyEnd = findMatchingBlockEnd(loopBody, 0);
+    if (bodyEnd === null) return true;
+    return identifierAliasHasActualMutationSink(
+      loopBody.slice(1, bodyEnd),
+      binding[1]!,
+    );
+  }
+
+  const statementEnd = loopBody.indexOf(";");
+  const statement =
+    statementEnd < 0 ? loopBody : loopBody.slice(0, statementEnd);
+  return identifierAliasHasActualMutationSink(statement, binding[1]!);
+}
+
+function findMatchingBlockEnd(
+  source: string,
+  openBraceIndex: number,
+): number | null {
+  let depth = 0;
+  let quote: "'" | '"' | "`" | null = null;
+  let escaped = false;
+
+  for (let index = openBraceIndex; index < source.length; index++) {
+    const character = source[index]!;
+    if (quote) {
+      if (escaped) escaped = false;
+      else if (character === "\\") escaped = true;
+      else if (character === quote) quote = null;
+      continue;
+    }
+    if (character === "'" || character === '"' || character === "`") {
+      quote = character;
+    } else if (character === "{") {
+      depth++;
+    } else if (character === "}" && --depth === 0) {
+      return index;
+    }
   }
-  const node = marked[0];
-  if (!node) return null;
-  const range = assertSourceRanges(source, node);
-  return { node, css: textContent(node), range };
+
+  return null;
 }
 
-function motionTextError(error: Error): MotionHtmlSourceError {
-  return new MotionHtmlSourceError("invalid-motion-text", error.message);
+const SELECTED_ELEMENT_MUTATION_SINK = new RegExp(
+  `^\\s*(?:\\[\\s*\\d+\\s*\\]\\s*)?(?:${MUTATION_MEMBER_ACCESS})`,
+  "i",
+);
+
+function elementMutationSinkForIdentifier(identifier: string): RegExp {
+  const escapedIdentifier = identifier.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(
+    `\\b${escapedIdentifier}\\s*(?:${MUTATION_MEMBER_ACCESS})`,
+    "i",
+  );
 }
 
-function readMotionText(source: string): MotionTextDocument | null {
-  const read = readMotionTextDocument(source);
-  if (read.status === "invalid") throw motionTextError(read.error);
-  return read.status === "valid" ? read.document : null;
+function identifierAliases(source: string, initial: string): string[] {
+  const aliases = new Set([initial]);
+  const assignments =
+    /(?:\b(?:const|let|var)\s+)?([A-Za-z_$][\w$]*)\s*=\s*([A-Za-z_$][\w$]*)\b/g;
+  let changed = true;
+  while (changed) {
+    changed = false;
+    assignments.lastIndex = 0;
+    let match: RegExpExecArray | null;
+    while ((match = assignments.exec(source)) !== null) {
+      if (!aliases.has(match[2]!) || aliases.has(match[1]!)) continue;
+      aliases.add(match[1]!);
+      changed = true;
+    }
+  }
+  return [...aliases];
 }
 
-function assertMotionTextOutsideTemplates(nodes: HtmlNode[]): void {
+function selectorCallTraversal(
+  source: string,
+  callStartIndex: number,
+  callEndIndex: number,
+  method: string,
+): { steps: string[]; unsupported: boolean } | null {
+  if (method.toLowerCase() === "queryselectorall") return null;
+
+  const afterCall = source.slice(callEndIndex);
   if (
-    nodes.some(
-      (node) =>
-        node.insideTemplate &&
-        node.tagName === "script" &&
-        (attributes(node, MOTION_TEXT_SOURCE_ATTRIBUTE).length > 0 ||
-          attributes(node, MOTION_TEXT_RUNTIME_ATTRIBUTE).length > 0),
+    /(?:\.\s*(?:parentElement|parentNode|children|childNodes|firstElementChild|lastElementChild|firstChild|lastChild|closest|matches|querySelector(?:All)?)\b|\[\s*["'](?:parentElement|parentNode|children|childNodes|firstElementChild|lastElementChild|firstChild|lastChild|closest|matches|querySelector(?:All)?)["']\s*\])/i.test(
+      afterCall,
     )
   ) {
-    sourceError(
-      "invalid-motion-text",
-      "Managed Motion Text scripts cannot live inside an HTML template.",
+    return { steps: [], unsupported: true };
+  }
+  const parseSteps = (suffix: string) => {
+    const access =
+      /\s*(?:\?\.|\.)\s*(nextElementSibling|previousElementSibling)\b|\s*\[\s*["'](nextElementSibling|previousElementSibling)["']\s*\]/iy;
+    const steps: string[] = [];
+    let offset = 0;
+    while (true) {
+      access.lastIndex = offset;
+      const match = access.exec(suffix);
+      if (!match) break;
+      steps.push((match[1] ?? match[2]!).toLowerCase());
+      offset = access.lastIndex;
+    }
+    if (steps.length > 0) {
+      return SELECTED_ELEMENT_MUTATION_SINK.test(suffix.slice(offset))
+        ? { steps, unsupported: false }
+        : null;
+    }
+    return null;
+  };
+
+  const direct = parseSteps(afterCall);
+  if (direct) return direct;
+
+  const assignment =
+    /(?:\b(?:const|let|var)\s+)?([A-Za-z_$][\w$]*)\s*=\s*$/.exec(
+      source.slice(0, callStartIndex),
     );
+  const receiver = assignment?.[1];
+  if (!receiver) {
+    return /^\s*(?:\?\.|\.)[A-Za-z_$]/.test(afterCall) &&
+      !SELECTED_ELEMENT_MUTATION_SINK.test(afterCall)
+      ? { steps: [], unsupported: true }
+      : null;
+  }
+  const escaped = receiver.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const traversal = new RegExp(
+    `\\b${escaped}((?:(?:\\?\\.|\\.)\\s*(?:nextElementSibling|previousElementSibling)\\b|\\[\\s*["'](?:nextElementSibling|previousElementSibling)["']\\s*\\]))+`,
+    "i",
+  );
+  const match = traversal.exec(afterCall);
+  if (!match) {
+    const intermediate = new RegExp(
+      `\\b${escaped}(?:\\s*(?:\\?\\.|\\.)\\s*|\\s*\\[\\s*["'][^"']+["']\\s*\\])([A-Za-z_$][\\w$]*)[^;]*(?:${MUTATION_MEMBER_ACCESS})`,
+      "i",
+    ).exec(afterCall);
+    return intermediate &&
+      !/^(?:style|classList|className|setAttribute|removeAttribute|animate)$/i.test(
+        intermediate[1]!,
+      )
+      ? { steps: [], unsupported: true }
+      : null;
   }
-}
 
-function targetsFromDocuments(
-  document: MotionCodeDocument | null,
-  textDocument: MotionTextDocument | null,
-): string[] {
-  return [
-    ...new Set([
-      ...(document?.tracks.map((track) => track.targetNodeId) ?? []),
-      ...(document?.nativeStyles?.map((style) => style.targetNodeId) ?? []),
-      ...(textDocument?.animations.map((animation) => animation.targetNodeId) ??
-        []),
-    ]),
-  ];
+  const steps: string[] = [];
+  const access =
+    /(?:\?\.|\.)\s*(nextElementSibling|previousElementSibling)\b|\[\s*["'](nextElementSibling|previousElementSibling)["']\s*\]/gi;
+  let accessMatch: RegExpExecArray | null;
+  while ((accessMatch = access.exec(match[1]!)) !== null) {
+    steps.push((accessMatch[1] ?? accessMatch[2]!).toLowerCase());
+  }
+  const suffix = afterCall.slice(match.index + match[0].length);
+  if (SELECTED_ELEMENT_MUTATION_SINK.test(suffix)) {
+    return { steps, unsupported: false };
+  }
+  const assignedTraversal =
+    /^\s*;?\s*(?:\b(?:const|let|var)\s+)?([A-Za-z_$][\w$]*)\s*=/.exec(suffix);
+  if (
+    assignedTraversal &&
+    identifierMayFeedMutationSink(suffix, assignedTraversal[1]!)
+  ) {
+    return { steps, unsupported: false };
+  }
+  return { steps, unsupported: true };
 }
 
-function pathTrimTargetsFromDocument(
-  document: MotionCodeDocument | null,
-): string[] {
-  if (!document) return [];
-  return [
-    ...new Set([
-      ...document.tracks
-        .filter((track) => track.property === "path-trim")
-        .map((track) => track.targetNodeId),
-      ...(document.nativeStyles ?? [])
-        .filter((style) => style.enabled !== false && style.styleKey === "Path")
-        .map((style) => style.targetNodeId),
-    ]),
-  ];
+function selectorForDocumentCall(
+  method: string,
+  argument: string,
+): string | null {
+  switch (method.toLowerCase()) {
+    case "queryselector":
+    case "queryselectorall":
+      return argument;
+    case "getelementbyid":
+      return `#${argument}`;
+    case "getelementsbyclassname":
+      return `.${argument}`;
+    case "getelementsbyname":
+      return `[name="${argument}"]`;
+    case "getelementsbytagname":
+      return argument;
+    default:
+      return null;
+  }
 }
 
-function pathTrimTargetsFromTimeline(timeline: MotionTimeline): string[] {
-  return [
-    ...new Set([
-      ...timeline.tracks
-        .filter((track) => track.property === "path-trim")
-        .map((track) => track.targetNodeId),
-      ...(timeline.nativeStyles ?? [])
-        .filter((style) => style.enabled !== false && style.styleKey === "Path")
-        .map((style) => style.targetNodeId),
-    ]),
-  ];
-}
+function selectorMayTargetMotionNode(
+  selector: string,
+  nodes: readonly HtmlNode[],
+  targetNodeIds: ReadonlySet<string>,
+  generatedIds: Map<number | undefined, string>,
+  traversal: { steps: string[]; unsupported: boolean } | null = null,
+): boolean {
+  const parsed = parseMotionAuthoredCssSimpleSelector(selector);
+  if (!parsed) return true;
+  const selectorAttribute =
+    parsed.kind === "id"
+      ? "id"
+      : parsed.kind === "class"
+        ? "class"
+        : parsed.kind === "attribute"
+          ? parsed.name
+          : null;
 
-function applyPathTrimTargets(source: string, targetNodeIds: string[]): string {
-  try {
-    return applyMotionPathTrimSource(source, targetNodeIds, "html");
-  } catch (error) {
-    if (error instanceof MotionPathTrimSourceError) {
-      sourceError("invalid-path-trim", error.message);
-    }
-    throw error;
+  const motionTargets = nodes.filter((node) =>
+    isMotionTargetNode(node, targetNodeIds, generatedIds),
+  );
+  if (traversal?.unsupported) return motionTargets.length > 0;
+
+  if (
+    motionTargets.some((node) =>
+      (node.attrs ?? []).some(({ name }) =>
+        isDynamicHtmlAttribute(name, selectorAttribute),
+      ),
+    )
+  ) {
+    return true;
   }
-}
 
-function restorePathTrimTargets(source: string): string {
-  try {
-    return restoreMotionPathTrimSource(source, "html");
-  } catch (error) {
-    if (error instanceof MotionPathTrimSourceError) {
-      sourceError("invalid-path-trim", error.message);
-    }
-    throw error;
+  let candidates = nodes.filter(
+    (node) => node.tagName && matchesHtmlSelector(node, parsed),
+  );
+  for (const step of traversal?.steps ?? []) {
+    candidates = candidates.flatMap((node) => {
+      const parent = node.parentNode;
+      const siblings = (parent?.childNodes ?? []).filter(
+        (sibling) => sibling.tagName !== undefined,
+      );
+      const index = siblings.indexOf(node);
+      const nextIndex = index + (step === "nextelementsibling" ? 1 : -1);
+      const sibling = siblings[nextIndex];
+      return sibling ? [sibling] : [];
+    });
   }
+
+  return motionTargets.some((target) => candidates.includes(target));
 }
 
-function assertSafeTargetId(targetNodeId: string): void {
-  if (!SAFE_NODE_ID.test(targetNodeId)) {
-    sourceError(
-      "unsupported-target",
-      `Motion target ID "${targetNodeId}" is not a safe static HTML node ID.`,
+function findRuntimeStyleMutationInScope(
+  scope: HtmlNode,
+): { name: string; value: string } | undefined {
+  const pending = [...(scope.childNodes ?? [])];
+  if (scope.content) pending.push(scope.content);
+
+  while (pending.length > 0) {
+    const node = pending.pop()!;
+    if (node.insideTemplate || node.tagName === "template") continue;
+
+    const attribute = node.attrs?.find(({ name, value }) =>
+      isRuntimeStyleMutationHandler(name, value),
     );
+    if (attribute) return attribute;
+
+    pending.push(...(node.childNodes ?? []));
+    if (node.content) pending.push(node.content);
   }
+
+  return undefined;
 }
 
 function assertSafeSourceFilePath(sourceFilePath: string): string {
@@ -538,9 +1869,23 @@ function assertTargetsExist(
   source: string,
   targetNodeIds: readonly string[],
   sourceFilePath?: string,
+  checkExecutableScripts = true,
+  checkEditSafety = true,
 ): void {
   if (targetNodeIds.length === 0) return;
   const { nodes } = parseHtml(source);
+  const generatedTargets = sourceFilePath
+    ? generatedHtmlTargets(source, sourceFilePath)
+    : [];
+  const generatedIds = new Map(
+    generatedTargets.map((target) => [
+      target.node.sourceCodeLocation?.startTag?.startOffset,
+      target.nodeId,
+    ]),
+  );
+  if (checkExecutableScripts) {
+    assertExecutableScriptsSafe(source, nodes, targetNodeIds, generatedIds);
+  }
   const targets = new Map<string, HtmlNode[]>();
   for (const node of nodes) {
     if (!node.tagName) continue;
@@ -558,12 +1903,7 @@ function assertTargetsExist(
     targets.set(nodeId, matches);
   }
   const generatedById = new Map(
-    sourceFilePath
-      ? generatedHtmlTargets(source, sourceFilePath).map((target) => [
-          target.nodeId,
-          target.node,
-        ])
-      : [],
+    generatedTargets.map((target) => [target.nodeId, target.node]),
   );
 
   for (const nodeId of targetNodeIds) {
@@ -606,23 +1946,39 @@ function assertTargetsExist(
         `Motion target "${nodeId}" is on a non-rendered ${tagName} element.`,
       );
     }
-    const conflictingMotionBinding = target.attrs?.find(
-      ({ name }) =>
-        name.startsWith("x-transition") ||
-        [":style", "x-bind", "x-bind:style", "v-bind:style"].includes(name),
-    );
-    if (conflictingMotionBinding) {
-      sourceError(
-        "unsupported-target",
-        `Motion target "${nodeId}" uses ${conflictingMotionBinding.name}, which cannot be synchronized with CSS Motion yet.`,
-      );
-    }
-    const inlineStyle = target.attrs?.find(({ name }) => name === "style");
-    if (inlineStyle && hasInlineMotionDeclarations(inlineStyle.value)) {
-      sourceError(
-        "unsupported-target",
-        `Motion target "${nodeId}" uses style, which cannot be synchronized with CSS Motion yet.`,
+    if (checkEditSafety) {
+      const conflictingMotionBinding = target.attrs?.find(
+        ({ name }) =>
+          name.startsWith("x-transition") ||
+          [":style", "x-bind", "x-bind:style", "v-bind:style"].includes(name),
       );
+      if (conflictingMotionBinding) {
+        sourceError(
+          "unsupported-target",
+          `Motion target "${nodeId}" uses ${conflictingMotionBinding.name}, which cannot be synchronized with CSS Motion yet.`,
+        );
+      }
+      const runtimeStyleMutation = findRuntimeStyleMutationAttribute(target);
+      if (runtimeStyleMutation) {
+        const { attribute, location } = runtimeStyleMutation;
+        const runtimeScope =
+          location === "target"
+            ? `uses ${attribute.name}`
+            : location === "ancestor"
+              ? `has an ancestor using ${attribute.name}`
+              : `is in a runtime scope using ${attribute.name}`;
+        sourceError(
+          "unsupported-target",
+          `Motion target "${nodeId}" ${runtimeScope}, whose runtime expression cannot be proven free of style mutations.`,
+        );
+      }
+      const inlineStyle = target.attrs?.find(({ name }) => name === "style");
+      if (inlineStyle && hasInlineMotionDeclarations(inlineStyle.value)) {
+        sourceError(
+          "unsupported-target",
+          `Motion target "${nodeId}" uses style, which cannot be synchronized with CSS Motion yet.`,
+        );
+      }
     }
   }
 }
@@ -685,10 +2041,57 @@ interface AuthoredHtmlMotion {
   rangesToRemove: MotionAuthoredCssSourceRange[];
 }
 
+function htmlStyleTextMatchesSource(
+  parsedText: string,
+  sourceText: string,
+): boolean {
+  const normalizeLineEndings = (text: string) => text.replace(/\r\n?/g, "\n");
+  return normalizeLineEndings(parsedText) === normalizeLineEndings(sourceText);
+}
+
+function staticAuthoredHtmlStyleContents(
+  source: string,
+  nodes: readonly HtmlNode[],
+): string[] {
+  return nodes.flatMap((node) => {
+    if (
+      node.tagName !== "style" ||
+      node.insideTemplate ||
+      !isPotentialCssStyle(node) ||
+      attributes(node, MANAGED_STYLE_ATTRIBUTE).length > 0
+    ) {
+      return [];
+    }
+
+    const location = node.sourceCodeLocation;
+    const contentStart = location?.startTag?.endOffset;
+    const contentEnd = location?.endTag?.startOffset;
+    if (
+      contentStart === undefined ||
+      contentEnd === undefined ||
+      contentStart < 0 ||
+      contentEnd < contentStart ||
+      contentEnd > source.length
+    ) {
+      return [];
+    }
+
+    const css = source.slice(contentStart, contentEnd);
+    if (
+      !htmlStyleTextMatchesSource(textContent(node), css) ||
+      hasCssTemplateInterpolation(css)
+    ) {
+      return [];
+    }
+    return [css];
+  });
+}
+
 function readAuthoredHtmlMotion(
   source: string,
   nodes: HtmlNode[],
   sourceFilePath?: string,
+  skipUnresolvedStylesheetCheck = false,
 ): AuthoredHtmlMotion {
   const generatedIds = sourceFilePath
     ? new Map(
@@ -703,6 +2106,7 @@ function readAuthoredHtmlMotion(
   const importedTargetNodeIds = new Set<string>();
   const usedKeyframeNames = new Set<string>();
   const keyframeNameCounts = new Map<string, number>();
+  const transitionCssBlocks = staticAuthoredHtmlStyleContents(source, nodes);
   let durationMs = 1;
 
   for (const node of nodes) {
@@ -727,7 +2131,7 @@ function readAuthoredHtmlMotion(
       continue;
     }
     const css = source.slice(contentStart, contentEnd);
-    if (textContent(node) !== css) {
+    if (!htmlStyleTextMatchesSource(textContent(node), css)) {
       if (/(?:^|[;{\s])(?:-?[a-z]+-)?animation(?:-[a-z-]+)?\s*:/i.test(css)) {
         sourceError(
           "unsupported-authored-motion",
@@ -736,8 +2140,11 @@ function readAuthoredHtmlMotion(
       }
       continue;
     }
-    const result = importAuthoredCssAnimations(css, (selector) =>
-      resolveAuthoredHtmlTarget(source, nodes, selector, generatedIds),
+    const result = importAuthoredCssAnimations(
+      css,
+      (selector) =>
+        resolveAuthoredHtmlTarget(source, nodes, selector, generatedIds),
+      { transitionCssBlocks },
     );
     if (result.status === "absent") {
       for (const name of result.definedKeyframeNames) {
@@ -748,10 +2155,10 @@ function readAuthoredHtmlMotion(
     if (result.status === "unsupported") {
       sourceError("unsupported-authored-motion", result.reason);
     }
-    if (hasUnresolvedStylesheet(nodes)) {
+    if (!skipUnresolvedStylesheetCheck && hasUnresolvedStylesheet(nodes)) {
       sourceError(
         "unresolved-stylesheet",
-        "Resolve external stylesheets before editing or adding Motion.",
+        "Resolve external or runtime-generated styles before editing or adding Motion.",
       );
     }
     for (const name of result.definedKeyframeNames) {
@@ -817,7 +2224,11 @@ function readAuthoredHtmlMotion(
 }
 
 function hasUnresolvedStylesheet(nodes: readonly HtmlNode[]): boolean {
-  return hasLinkedStylesheet(nodes) || hasImportedStylesheet(nodes);
+  return (
+    hasLinkedStylesheet(nodes) ||
+    hasImportedStylesheet(nodes) ||
+    hasDynamicStyleContent(nodes)
+  );
 }
 
 function dynamicBoundAttributeName(attributeName: string): string | null {
@@ -834,6 +2245,9 @@ function hasLinkedStylesheet(nodes: readonly HtmlNode[]): boolean {
     if (node.tagName !== "link" || node.insideTemplate) return false;
     const relAttributes = attributes(node, "rel");
     const hrefAttributes = attributes(node, "href");
+    const relTokens = relAttributes.flatMap((attribute) =>
+      attribute.value.split(/[\t\n\f\r ]+/).map((value) => value.toLowerCase()),
+    );
     const objectBinding = (node.attrs ?? []).some((attribute) =>
       ["x-bind", "v-bind"].includes(attribute.name.toLowerCase()),
     );
@@ -849,17 +2263,93 @@ function hasLinkedStylesheet(nodes: readonly HtmlNode[]): boolean {
       hrefAttributes.some((attribute) => attribute.value.trim()) ||
       hasBoundAttribute("href") ||
       objectBinding;
-    const stylesheetRel = relAttributes.some((attribute) =>
-      attribute.value
-        .split(/[\t\n\f\r ]+/)
-        .some((value) => value.toLowerCase() === "stylesheet"),
-    );
+    const stylesheetRel = relTokens.includes("stylesheet");
+    const stylePreload =
+      relTokens.includes("preload") &&
+      (attributes(node, "as").some(
+        (attribute) => attribute.value.toLowerCase() === "style",
+      ) ||
+        hasBoundAttribute("as") ||
+        objectBinding) &&
+      (attributes(node, "onload").length > 0 ||
+        hasBoundAttribute("onload") ||
+        objectBinding);
     return (
-      hasHref && (stylesheetRel || hasBoundAttribute("rel") || objectBinding)
+      hasHref &&
+      (stylesheetRel ||
+        hasBoundAttribute("rel") ||
+        stylePreload ||
+        objectBinding)
     );
   });
 }
 
+function hasDynamicStyleContent(nodes: readonly HtmlNode[]): boolean {
+  return nodes.some((node) => {
+    if (node.tagName !== "style" || node.insideTemplate) return false;
+    if (
+      hasPotentialRuntimeMutationHandler(node.attrs) ||
+      (node.attrs ?? []).some(({ name }) => {
+        const normalized = name.toLowerCase();
+        return (
+          (normalized.startsWith("x-") && normalized !== "x-cloak") ||
+          (normalized.startsWith("v-") && normalized !== "v-cloak") ||
+          (normalized.startsWith("ng-") && normalized !== "ng-cloak") ||
+          normalized.startsWith(":")
+        );
+      })
+    ) {
+      return true;
+    }
+    if (!isPotentialCssStyle(node)) return false;
+    if (hasCssTemplateInterpolation(textContent(node))) {
+      return true;
+    }
+    return (node.attrs ?? []).some((attribute) => {
+      const name = attribute.name.toLowerCase();
+      return (
+        [
+          "x-text",
+          "x-html",
+          "v-text",
+          "v-html",
+          "ng-bind",
+          "ng-bind-html",
+        ].includes(name) ||
+        ["innerhtml", "textcontent"].includes(
+          dynamicBoundAttributeName(name) ?? "",
+        )
+      );
+    });
+  });
+}
+
+function hasCssTemplateInterpolation(css: string): boolean {
+  let quote: "'" | '"' | null = null;
+  let escaped = false;
+
+  for (let index = 0; index < css.length; index++) {
+    const character = css[index]!;
+    if (quote) {
+      if (escaped) escaped = false;
+      else if (character === "\\") escaped = true;
+      else if (character === quote) quote = null;
+      continue;
+    }
+    if (character === "'" || character === '"') {
+      quote = character;
+    } else if (
+      css.startsWith("{{", index) ||
+      css.startsWith("${", index) ||
+      css.startsWith("<%", index)
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
 function hasImportedStylesheet(nodes: readonly HtmlNode[]): boolean {
   for (const node of nodes) {
     if (
@@ -907,6 +2397,21 @@ function isPotentialCssStyle(node: HtmlNode): boolean {
 function isSupportedAuthoredHtmlStyle(node: HtmlNode): boolean {
   for (const attribute of node.attrs ?? []) {
     const name = attribute.name.toLowerCase();
+    if (
+      [
+        "x-text",
+        "x-html",
+        "v-text",
+        "v-html",
+        "ng-bind",
+        "ng-bind-html",
+      ].includes(name) ||
+      ["innerhtml", "textcontent"].includes(
+        dynamicBoundAttributeName(name) ?? "",
+      )
+    ) {
+      return false;
+    }
     if (
       /^(?::|x-bind:|v-bind:)(?:media|disabled|title|scoped|type)$/.test(name)
     ) {
@@ -982,6 +2487,7 @@ function isDynamicHtmlAttribute(
   const normalized = name.toLowerCase();
   return (
     normalized === "x-bind" ||
+    normalized === "v-bind" ||
     [
       `:${selectorAttribute}`,
       `x-bind:${selectorAttribute}`,
@@ -1018,9 +2524,15 @@ function matchesHtmlSelector(
 function removeAuthoredHtmlMotion(
   source: string,
   sourceFilePath?: string,
+  cleanupOnly = false,
 ): string {
   const { nodes } = parseHtml(source);
-  const authored = readAuthoredHtmlMotion(source, nodes, sourceFilePath);
+  const authored = readAuthoredHtmlMotion(
+    source,
+    nodes,
+    sourceFilePath,
+    cleanupOnly,
+  );
   return authored.rangesToRemove.length > 0
     ? removeAuthoredCssSourceRanges(source, authored.rangesToRemove)
     : source;
@@ -1029,6 +2541,10 @@ function removeAuthoredHtmlMotion(
 function readSource(
   source: string,
   sourceFilePath?: string,
+  options: {
+    allowUnmanagedExecutableScripts?: boolean;
+    cleanupOnly?: boolean;
+  } = {},
 ): Exclude<MotionHtmlSourceReadResult, { status: "invalid" }> {
   const { nodes } = parseHtml(source);
   assertMotionTextOutsideTemplates(nodes);
@@ -1062,7 +2578,12 @@ function readSource(
       );
     }
   }
-  const authoredMotion = readAuthoredHtmlMotion(source, nodes, sourceFilePath);
+  const authoredMotion = readAuthoredHtmlMotion(
+    source,
+    nodes,
+    sourceFilePath,
+    options.cleanupOnly,
+  );
   if (authoredMotion.document) {
     try {
       document = mergeAuthoredCssMotionDocument(
@@ -1079,14 +2600,24 @@ function readSource(
     }
   }
   const textDocument = readMotionText(source);
-  if ((document || textDocument) && hasUnresolvedStylesheet(nodes)) {
+  if (
+    !options.cleanupOnly &&
+    (document || textDocument) &&
+    hasUnresolvedStylesheet(nodes)
+  ) {
     sourceError(
       "unresolved-stylesheet",
-      "Resolve external stylesheets before editing or adding Motion.",
+      "Resolve external or runtime-generated styles before editing or adding Motion.",
     );
   }
   const targetNodeIds = targetsFromDocuments(document, textDocument);
-  assertTargetsExist(source, targetNodeIds, sourceFilePath);
+  assertTargetsExist(
+    source,
+    targetNodeIds,
+    sourceFilePath,
+    !options.allowUnmanagedExecutableScripts,
+    !options.cleanupOnly,
+  );
   const pathTrimmedSource = applyPathTrimTargets(
     source,
     pathTrimTargetsFromDocument(document),
@@ -1098,10 +2629,10 @@ function readSource(
     );
   }
   if (!document && !textDocument) {
-    if (hasUnresolvedStylesheet(nodes)) {
+    if (!options.cleanupOnly && hasUnresolvedStylesheet(nodes)) {
       sourceError(
         "unresolved-stylesheet",
-        "Resolve external stylesheets before editing or adding Motion.",
+        "Resolve external or runtime-generated styles before editing or adding Motion.",
       );
     }
     return { status: "absent" };
@@ -1382,10 +2913,33 @@ export function removeMotionHtmlSource(
   source: string,
   sourceFilePath?: string,
 ): MotionHtmlSourceRemoval {
-  const read = readSource(source, sourceFilePath);
+  const read = readSource(source, sourceFilePath, {
+    allowUnmanagedExecutableScripts: true,
+    cleanupOnly: true,
+  });
   if (read.status === "absent") return { source, changed: false };
 
-  const withoutAuthored = removeAuthoredHtmlMotion(source, sourceFilePath);
+  const managedRuntimeScripts = parseHtml(source).nodes.filter(
+    (node) =>
+      node.tagName === "script" &&
+      attributes(node, MOTION_TEXT_RUNTIME_ATTRIBUTE).length > 0,
+  );
+  if (
+    managedRuntimeScripts.some(
+      (node) => !isManagedMotionTextRuntime(source, node),
+    )
+  ) {
+    sourceError(
+      "invalid-motion-text",
+      "The managed Motion Text runtime does not match a supported generated version.",
+    );
+  }
+
+  const withoutAuthored = removeAuthoredHtmlMotion(
+    source,
+    sourceFilePath,
+    true,
+  );
   const { nodes } = parseHtml(withoutAuthored);
   const managedStyle = findManagedStyle(withoutAuthored, nodes);
   let withoutStyle = withoutAuthored;