diff --git a/src/lib/StateMachine.svelte b/src/lib/StateMachine.svelte
index a5064bd..090923a 100644
--- a/src/lib/StateMachine.svelte
+++ b/src/lib/StateMachine.svelte
@@ -43,22 +43,25 @@
 	import { ArrowLeft, Check } from 'phosphor-svelte';
 	import type { IconDef } from './util';
 
-	let {
-		pages,
-		success,
-		failure,
-		index = $bindable(0),
-		action
-	}: {
+	interface Props {
 		pages: StateMachinePage[];
 		success: StateMachinePage;
 		failure: StateMachinePage;
 		index?: number;
 		action?: string;
-	} = $props();
+	}
 
-	pages.push(success, failure); // add success and failure pages to the end of the pages array
-	// let progressVisible = $state(false);
+	let {
+		/** The initial pages to display, should NOT be modified after initialization. */
+		pages: initialPages,
+		success,
+		failure,
+		index = $bindable(0),
+		action
+	}: Props = $props();
+
+	// add success and failure pages to the end of the pages array
+	let pages = $state([...initialPages, success, failure]);
 
 	let lastIndex = $state(index);
 	let page = $derived(pages[index]);
@@ -102,6 +105,40 @@
 		});
 	});
 
+	export const updateHeight = async () => {
+		await tick();
+		if (!pageContainer) return;
+		height.set(pageContainer.offsetHeight);
+	};
+
+	export const setIndex = (i: number) => {
+		if (i < 0 || i >= pages.length) return;
+		index = i;
+	};
+
+	export const splicePages = (
+		start: number,
+		deleteCount: number,
+		...newPages: StateMachinePage[]
+	) => {
+		if (start < 0 || start > pages.length) return;
+		if (deleteCount < 0 || start + deleteCount > pages.length) return;
+
+		pages.splice(start, deleteCount, ...newPages);
+		if (index >= start && index < start + deleteCount) {
+			// current page was deleted
+			index = Math.min(start, pages.length - 1);
+		} else if (index >= start + deleteCount) {
+			// current page was after deleted pages
+			index -= deleteCount;
+			index += newPages.length;
+		}
+	};
+
+	export const insertAfterCurrent = (...newPages: StateMachinePage[]) => {
+		splicePages(index + 1, 0, ...newPages);
+	};
+
 	const updateHeroText = () => {
 		if (
 			heroText.scrollWidth > heroText.offsetWidth ||
@@ -235,6 +272,7 @@
 			index = pages.length - 2;
 		} else {
 			index = pages.length - 1;
+			console.log(json);
 		}
 	};