added debugger

src/components/ContentEditor.svelte

@@ -420,7 +420,7 @@
     }
 
     :global(.highlightOp) {
-        @apply border border-forge-sec rounded;
+        @apply border-forge-sec rounded;
     }
     
     :global(.current-operation-highlight) {
@@ -432,18 +432,6 @@
         @apply font-bold text-orange-300;
     }
     
-    @keyframes pulse {
-        0% {
-            background-color: rgba(251, 146, 60, 0.1);
-        }
-        50% {
-            background-color: rgba(251, 146, 60, 0.3);
-        }
-        100% {
-            background-color: rgba(251, 146, 60, 0.1);
-        }
-    }
-    
     :global(.breakpoint-glyph) {
         margin-left: 3px;
         width: 0;

src/components/PageView.svelte

@@ -11,7 +11,12 @@
 	let render: () => void = $state(() => {});
 	let stepper: DebugStepper | undefined = $state();
 	let breakpoints: Set<number> = $state(new Set<number>());
-	
+
+	$effect(() => {
+		if (stepper?.finished) {
+			fState.document.stepperManager.unregister(stepper);
+		}
+	})
 	function contentsUpdatedEvent() {
 		render();
 	}
@@ -75,6 +80,8 @@
 							<div class="debug-info">
 								{#if stepper.onBreak}
 									<span class="break-indicator">Paused at operation {stepper.currentIdx}</span>
+								{:else if stepper.finished}
+									<span class="running-indicator">Done</span>
 								{:else}
 									<span class="running-indicator">Running...</span>
 								{/if}

src/models/Stepper.svelte.ts

@@ -8,6 +8,7 @@ export class DebugStepper {
 	onBreak: boolean = $state(false);
 	opList: OperatorListModel | null = null;
 	callback: (() => void) | null = null;
+	finished = $state(false);
 
 	constructor(pageNum: number, breakPoints: Set<number>) {
 		this.pageNum = pageNum;
@@ -17,10 +18,19 @@ export class DebugStepper {
 	}
 
 	updateBreakPoints(breakPoints: Set<number>) {
-		this.breakPoints = Array.from(breakPoints).filter(a => a > this.currentIdx).sort(function (a, b) {
+		this.breakPoints = Array.from(breakPoints)
-			return b - a;
+			.filter((a) => a > this.currentIdx)
-		});
+			.sort(function (a, b) {
+				return b - a;
+			});
+	}
 
+	cleanBreakPoints() {
+		this.breakPoints = this.breakPoints
+			.filter((a) => a > this.currentIdx)
+			.sort(function (a, b) {
+				return b - a;
+			});
 	}
 
 	public async breakIt(idx: number, callback: () => void) {
@@ -41,6 +51,7 @@ export class DebugStepper {
 
 	public step() {
 		this.nextBreakPoint = this.currentIdx + 1;
+		this.cleanBreakPoints();
 		this._resume();
 	}
 
@@ -53,7 +64,6 @@ export class DebugStepper {
 	}
 
 	public getNextBreakPoint() {
-
 		return this.nextBreakPoint ?? this.breakPoints.pop();
 	}