From b776103687f818cb13f53264d634d15a0dc0bf24 Mon Sep 17 00:00:00 2001
From: Andreas Arvidsson <andreas.arvidsson87@gmail.com>
Date: Wed, 9 Jul 2025 11:02:45 +0200
Subject: [PATCH] Use iteration colors in scope visualizer in document page

---
 .../src/docs/components/ScopeVisualizer.tsx   |  6 +++++-
 .../docs/components/calculateHighlights.ts    | 19 +++++++++++++------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/cursorless-org-docs/src/docs/components/ScopeVisualizer.tsx b/packages/cursorless-org-docs/src/docs/components/ScopeVisualizer.tsx
index 2eecbc9b5e..06d293959c 100644
--- a/packages/cursorless-org-docs/src/docs/components/ScopeVisualizer.tsx
+++ b/packages/cursorless-org-docs/src/docs/components/ScopeVisualizer.tsx
@@ -207,7 +207,11 @@ function renderFacet(
             }}
             languageId={languageId ?? fixture.languageId}
             renderWhitespace={renderWhitespace}
-            decorations={generateDecorations(fixture, rangeType)}
+            decorations={generateDecorations(
+              fixture,
+              rangeType,
+              facet.info.isIteration ?? false,
+            )}
           >
             {fixture.code}
           </Code>
diff --git a/packages/cursorless-org-docs/src/docs/components/calculateHighlights.ts b/packages/cursorless-org-docs/src/docs/components/calculateHighlights.ts
index 6de1c8b0ce..9705e3ab1a 100644
--- a/packages/cursorless-org-docs/src/docs/components/calculateHighlights.ts
+++ b/packages/cursorless-org-docs/src/docs/components/calculateHighlights.ts
@@ -13,11 +13,12 @@ import type { Fixture, Highlight, RangeType, RangeTypeColors } from "./types";
 export function generateDecorations(
   fixture: Fixture,
   rangeType: RangeType,
+  isIteration: boolean,
 ): DecorationItem[] {
   const { domainRanges, targetRanges } = getRanges(fixture, rangeType);
 
   const codeLineRanges = getCodeLineRanges(fixture.code);
-  const colors = getColors(rangeType);
+  const colors = getColors(rangeType, isIteration);
 
   const domainDecorations = getDecorations(codeLineRanges, domainRanges);
   const targetRangeDecorations = getDecorations(codeLineRanges, targetRanges);
@@ -37,13 +38,19 @@ export function generateDecorations(
   return highlightsToDecorations(highlights);
 }
 
-function getColors(rangeType: RangeType) {
+function getColors(rangeType: RangeType, isIteration: boolean) {
+  const target = (() => {
+    if (isIteration) {
+      return highlightColors.iteration;
+    }
+    if (rangeType === "content") {
+      return highlightColors.content;
+    }
+    return highlightColors.removal;
+  })();
   return {
     domain: highlightColors.domain,
-    target:
-      rangeType === "content"
-        ? highlightColors.content
-        : highlightColors.removal,
+    target,
   };
 }