diff --git a/alfred/apps.py b/alfred/apps.py
index 15c66bfc8..4323d4d71 100644
--- a/alfred/apps.py
+++ b/alfred/apps.py
@@ -38,10 +38,6 @@ def apps_update(app: str = None):
         if not os.path.isdir(abs_path):
             continue
 
-        if os.path.isfile(os.path.join(abs_path, "ui.json")):
-            print(f'{app} : migrate ui.json')
-            wf_project.migrate_obsolete_ui_json(abs_path, {"writer_version": VERSION})
-
         if not os.path.isfile(os.path.join(abs_path, ".wf", 'components-workflows_root.jsonl')):
             wf_project.create_default_workflows_root(abs_path)
 
@@ -51,5 +47,5 @@ def apps_update(app: str = None):
         else:
             metadata['writer_version'] = writer.VERSION
             components = audit_and_fix.fix_components(components)
-            wf_project.write_files(abs_path, metadata, components)
+            wf_project.write_files(abs_path, metadata, components, context=wf_project.WfProjectContext(app_path=abs_path))
             print(f"{app} : app is up to date")
diff --git a/pyproject.toml b/pyproject.toml
index 2ae4f7e6d..f95eec470 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "poetry.core.masonry.api"
 
 [tool.poetry]
 name = "writer"
-version = "0.8.3rc18"
+version = "0.8.3rc19"
 description = "An open-source, Python framework for building feature-rich apps that are fully integrated with the Writer platform."
 authors = ["Writer, Inc."]
 readme = "README.md"
diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index 62295be50..b94812682 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -124,6 +124,7 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 
 const tracking = useWriterTracking(wf);
+const toasts = useToasts();
 
 const {
 	candidateId,
@@ -146,14 +147,20 @@ const {
 	isCutAllowed,
 	isDeleteAllowed,
 	isGoToParentAllowed,
+	isGoToChildAllowed,
+	isGoToNextSiblingAllowed,
+	isGoToPrevSiblingAllowed,
 	pasteComponent,
 	copyComponent,
 	removeComponentsSubtree,
 	goToParent,
+	goToChild,
+	goToNextSibling,
+	goToPrevSibling,
+	moveComponentToParent,
+	moveComponentInsideNextSibling,
 } = useComponentActions(wf, ssbm, tracking);
 
-const toasts = useToasts();
-
 const builderMode = computed(() => ssbm.getMode());
 const selectedId = computed(() => ssbm.firstSelectedId.value);
 
@@ -192,37 +199,63 @@ async function handleKeydown(ev: KeyboardEvent) {
 		removeComponentsSubtree(...componentIds);
 		return;
 	}
-	if (ev.key == "ArrowUp" && isModifierKeyActive && ev.shiftKey) {
-		if (!isGoToParentAllowed(selectedId)) return;
-		goToParent(selectedId, selectedInstancePath);
-		return;
-	}
-	if (ev.key == "ArrowUp" && isModifierKeyActive) {
-		moveComponentUp(selectedId);
-		return;
-	}
-	if (ev.key == "ArrowDown" && isModifierKeyActive) {
-		moveComponentDown(selectedId);
-		return;
-	}
-	if (ev.key == "v" && isModifierKeyActive) {
-		if (!isPasteAllowed(selectedId)) return;
-		try {
-			await pasteComponent(selectedId);
-		} catch (error) {
-			toasts.pushToast({ type: "error", message: String(error) });
+	if (!isModifierKeyActive) return;
+
+	if (ev.shiftKey) {
+		switch (ev.key) {
+			case "ArrowDown":
+				ev.preventDefault();
+				if (isGoToNextSiblingAllowed(selectedId))
+					goToNextSibling(selectedId);
+				break;
+			case "ArrowUp":
+				ev.preventDefault();
+				if (isGoToPrevSiblingAllowed(selectedId))
+					goToPrevSibling(selectedId);
+				break;
+			case "ArrowLeft":
+				ev.preventDefault();
+				if (isGoToParentAllowed(selectedId))
+					goToParent(selectedId, selectedInstancePath);
+				break;
+			case "ArrowRight":
+				ev.preventDefault();
+				if (isGoToChildAllowed(selectedId)) goToChild(selectedId);
+				break;
+		}
+	} else {
+		switch (ev.key) {
+			case "ArrowDown":
+				ev.preventDefault();
+				moveComponentDown(selectedId);
+				break;
+			case "ArrowUp":
+				ev.preventDefault();
+				moveComponentUp(selectedId);
+				break;
+			case "ArrowLeft":
+				ev.preventDefault();
+				moveComponentToParent(selectedId);
+				break;
+			case "ArrowRight":
+				ev.preventDefault();
+				moveComponentInsideNextSibling(selectedId);
+				break;
+			case "v":
+				if (!isPasteAllowed(selectedId)) return;
+				try {
+					await pasteComponent(selectedId);
+				} catch (error) {
+					toasts.pushToast({ type: "error", message: String(error) });
+				}
+				break;
+			case "c":
+				if (isCopyAllowed(selectedId)) copyComponent(selectedId);
+				break;
+			case "x":
+				if (isCutAllowed(selectedId)) cutComponent(selectedId);
+				break;
 		}
-		return;
-	}
-	if (ev.key == "c" && isModifierKeyActive) {
-		if (!isCopyAllowed(selectedId)) return;
-		copyComponent(selectedId);
-		return;
-	}
-	if (ev.key == "x" && isModifierKeyActive) {
-		if (!isCutAllowed(selectedId)) return;
-		cutComponent(selectedId);
-		return;
 	}
 }
 
diff --git a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
index ef8964b12..bf66fc8fd 100644
--- a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
@@ -1,92 +1,79 @@
 <template>
 	<div
-		ref="rootEl"
-		class="BuilderFieldsOptions"
+		class="BuilderFieldsKeyValue"
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<WdsTabs
-			class="BuilderFieldsOptions__tabs"
-			:tabs="tabs"
-			:model-value="mode"
-			@update:model-value="setMode"
+		<div class="BuilderFieldsKeyValue__toolbar">
+			<WdsButton
+				variant="neutral"
+				size="smallIcon"
+				data-automation-key="openAssistedMode"
+				@click="modalMode = 'assisted'"
+			>
+				<i class="material-symbols-outlined">edit</i>
+			</WdsButton>
+		</div>
+		<BuilderFieldsKeyValueModal
+			v-if="modalMode"
+			:data="field"
+			:initial-mode="modalMode"
+			@submit="onModalSubmit"
+			@close="modalMode = undefined"
 		/>
 
-		<template v-if="mode == 'assisted'">
-			<div
-				class="staticList"
-				:class="{ 'staticList--invalid': error !== undefined }"
+		<div
+			v-if="Object.keys(evaluatedValue).length === 0"
+			class="BuilderFieldsKeyValue__listEmpty"
+		>
+			<p>There are no key value categories defined</p>
+			<WdsButton
+				variant="special"
+				size="small"
+				@click="modalMode = 'assisted'"
+			>
+				<i class="material-symbols-outlined">keyboard_backspace</i>
+				Edit
+			</WdsButton>
+		</div>
+		<ul v-else class="BuilderFieldsKeyValue__list">
+			<li
+				v-for="(value, key) of evaluatedValue"
+				:key
+				class="BuilderFieldsKeyValue__list__item"
 			>
-				<div
-					v-for="(entryValue, entryKey) in assistedEntries"
-					:key="entryKey"
-					class="entry"
+				<p
+					class="BuilderFieldsKeyValue__list__item__key"
+					:data-writer-tooltip="key"
+					data-writer-tooltip-strategy="overflow"
+				>
+					{{ key }}
+				</p>
+				<p
+					class="BuilderFieldsKeyValue__list__item__value"
+					:data-writer-tooltip="value"
+					data-writer-tooltip-strategy="overflow"
 				>
-					<div>{{ entryKey }} &middot; {{ entryValue }}</div>
-					<button
-						variant="subtle"
-						@click="removeAssistedEntry(entryKey)"
-					>
-						<i class="material-symbols-outlined">delete</i>
-					</button>
-				</div>
-			</div>
-			<div class="formAdd">
-				<BuilderTemplateInput
-					ref="assistedKeyEl"
-					class="inputKey"
-					placeholder="Type a key..."
-					:value="formAdd.key"
-					@update:value="($event) => (formAdd.key = $event)"
-					@keydown.enter="addAssistedEntry"
-				/>
-				<BuilderTemplateInput
-					class="inputValue"
-					placeholder="Type a value..."
-					:value="formAdd.value"
-					@update:value="($event) => (formAdd.value = $event)"
-					@keydown.enter="addAssistedEntry"
-				/>
-				<button @click="addAssistedEntry">
-					<i class="material-symbols-outlined">add</i>Add
-				</button>
-			</div>
-		</template>
-
-		<template v-if="mode == 'freehand'">
-			<BuilderFieldsObject
-				:component-id="component.id"
-				:field-key="fieldKey"
-				:error="error"
-			></BuilderFieldsObject>
-		</template>
+					{{ value || "\<empty value\>" }}
+				</p>
+			</li>
+		</ul>
 	</div>
 </template>
 
+<script lang="ts">
+export type JSONValue = Record<string, string | number | null>;
+</script>
+
 <script setup lang="ts">
-import {
-	PropType,
-	Ref,
-	computed,
-	inject,
-	nextTick,
-	onMounted,
-	ref,
-	toRefs,
-	useTemplateRef,
-	watch,
-} from "vue";
+import { PropType, computed, inject, ref, toRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 import { useEvaluator } from "@/renderer/useEvaluator";
 import type { InstancePath } from "@/writerTypes";
-import BuilderFieldsObject from "./BuilderFieldsObject.vue";
-import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import { useComponentActions } from "../useComponentActions";
-import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
-
-const wf = inject(injectionKeys.core);
-const ssbm = inject(injectionKeys.builderManager);
-const { setContentValue } = useComponentActions(wf, ssbm);
+import WdsButton from "@/wds/WdsButton.vue";
+import BuilderFieldsKeyValueModal from "./BuilderFieldsKeyValueModal.vue";
+import type { Mode } from "./composables/useKeyValueEditor";
 
 const props = defineProps({
 	componentId: { type: String, required: true },
@@ -95,141 +82,97 @@ const props = defineProps({
 	error: { type: String, required: false, default: undefined },
 });
 
-const { componentId, fieldKey } = toRefs(props);
-const component = computed(() => wf.getComponentById(componentId.value));
+const wf = inject(injectionKeys.core);
+const ssbm = inject(injectionKeys.builderManager);
 
-const rootEl = useTemplateRef("rootEl");
-const assistedKeyEl = useTemplateRef("assistedKeyEl");
-type Mode = "assisted" | "freehand";
-const mode: Ref<Mode> = ref(null);
-const assistedEntries: Ref<Record<string, string | number | null>> = ref({});
-const formAdd: Ref<{ key: string; value: string }> = ref({
-	key: "",
-	value: "",
-});
+const { setContentValue } = useComponentActions(wf, ssbm);
+const { getEvaluatedFields } = useEvaluator(wf);
 
-const tabs: WdsTabOptions<Mode>[] = [
-	{ label: "Static List", value: "assisted" },
-	{ label: "JSON", value: "freehand" },
-];
+const componentId = toRef(props, "componentId");
+const fieldKey = toRef(props, "fieldKey");
 
-const { getEvaluatedFields } = useEvaluator(wf);
+const modalMode = ref<Mode | undefined>();
 
-const evaluatedValue = computed<Record<string, string | number | null>>(
+const evaluatedValue = computed<JSONValue>(
 	() => getEvaluatedFields(props.instancePath)[fieldKey.value].value,
 );
 
-const setMode = async (newMode: Mode) => {
-	if (mode.value == newMode) return;
-	mode.value = newMode;
-
-	if (mode.value == "assisted") {
-		handleSwitchToAssisted();
-	}
-
-	await nextTick();
-};
+const component = computed(() => wf.getComponentById(componentId.value));
 
-const handleSwitchToAssisted = () => {
-	assistedEntries.value = evaluatedValue.value ?? {};
-};
+const field = computed(() => {
+	const value = component.value.content?.[fieldKey.value];
+	if (value === undefined) return evaluatedValue.value;
 
-const addAssistedEntry = () => {
-	const { key, value } = formAdd.value;
-	if (key === "" || value === "") return;
-	assistedEntries.value = { ...assistedEntries.value, [key]: value };
-	setContentValue(
-		component.value.id,
-		fieldKey.value,
-		JSON.stringify(assistedEntries.value, null, 2),
-	);
-	formAdd.value = { key: "", value: "" };
-	assistedKeyEl.value.focus();
-};
-
-const removeAssistedEntry = (key: string) => {
-	const assistedEntriesCopy = assistedEntries.value;
-	delete assistedEntriesCopy[key];
-	assistedEntries.value = assistedEntriesCopy;
-
-	if (Object.keys(assistedEntries.value).length == 0) {
-		setContentValue(component.value.id, fieldKey.value, undefined);
-		return;
+	try {
+		return JSON.parse(value);
+	} catch {
+		return {};
 	}
+});
 
+function onModalSubmit(data: JSONValue) {
+	modalMode.value = undefined;
 	setContentValue(
 		component.value.id,
 		fieldKey.value,
-		JSON.stringify(assistedEntries.value, null, 2),
+		JSON.stringify(data, null, 2),
 	);
-};
-
-/**
- * Watcher for external mutations (like undo/redo).
- */
-watch(
-	() => component.value?.content[fieldKey.value],
-	async () => {
-		if (!component.value || !evaluatedValue.value) return;
-		assistedEntries.value = evaluatedValue.value;
-	},
-);
-
-onMounted(async () => {
-	// Attempt assisted mode first, if the JSON can be parsed into an object
-	if (evaluatedValue.value) {
-		assistedEntries.value = evaluatedValue.value;
-		setMode("assisted");
-	} else {
-		setMode("freehand");
-	}
-});
+}
 </script>
 
 <style scoped>
-@import "../sharedStyles.css";
-
-.BuilderFieldsOptions__tabs {
-	margin-bottom: 8px;
+.BuilderFieldsKeyValue {
+	position: relative;
+}
+.BuilderFieldsKeyValue__toolbar {
+	display: flex;
+	gap: 4px;
+	justify-content: flex-end;
+	position: absolute;
+	top: -32px;
+	right: 0px;
 }
 
-.staticList {
-	padding: 8.5px 12px 8.5px 12px;
-	border: 1px solid var(--builderSeparatorColor);
+.BuilderFieldsKeyValue__listEmpty,
+.BuilderFieldsKeyValue__list {
+	border: 1px solid var(--separatorColor);
 	border-radius: 8px;
-}
-.staticList--invalid {
-	border-color: var(--wdsColorOrange5);
+	list-style: none;
 }
 
-.staticList:empty::before {
-	content: "No entries yet.";
+.BuilderFieldsKeyValue__list__item {
+	padding: 12px;
 }
 
-.staticList .entry {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	width: 100%;
-	max-width: 100%;
+.BuilderFieldsKeyValue__list__item:not(:last-child) {
+	border-bottom: 1px solid var(--separatorColor);
 }
 
-.staticList .entry div {
+.BuilderFieldsKeyValue__list__item__key,
+.BuilderFieldsKeyValue__list__item__value {
+	font-size: 12px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 	overflow: hidden;
-	padding-top: 4px;
-	padding-bottom: 4px;
-	flex: 1 1 auto;
 }
 
-.staticList .entry button {
-	flex: 0 0 auto;
+.BuilderFieldsKeyValue__list__item__key {
+	font-size: 12px;
+	color: var(--wdsColorGray4);
 }
 
-.formAdd {
-	margin-top: 8px;
+.BuilderFieldsKeyValue__listEmpty {
+	height: 150px;
+	padding: 12px;
+	gap: 18px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 }
-
-.BuilderTemplateInput {
-	margin-bottom: 8px;
+.BuilderFieldsKeyValue__listEmpty p {
+	text-align: center;
+	color: var(--wdsColorGray4);
+	text-wrap: pretty;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsKeyValueModal.vue b/src/ui/src/builder/settings/BuilderFieldsKeyValueModal.vue
new file mode 100644
index 000000000..c9ab36747
--- /dev/null
+++ b/src/ui/src/builder/settings/BuilderFieldsKeyValueModal.vue
@@ -0,0 +1,185 @@
+<template>
+	<WdsModal
+		title="Category key values"
+		display-close-button
+		:actions="actions"
+		@close="$emit('close')"
+	>
+		<template #titleActions>
+			<WdsTabs
+				v-model="mode"
+				class="BuilderFieldsKeyValueModal__tabs"
+				:tabs="tabs"
+			/>
+		</template>
+
+		<template #default>
+			<BuilderEmbeddedCodeEditor
+				v-if="mode === 'freehand'"
+				v-model="freehandValue"
+				class="BuilderFieldsKeyValueModal__freehand"
+				variant="minimal"
+				language="json"
+			/>
+
+			<div
+				v-if="mode === 'assisted'"
+				class="BuilderFieldsKeyValueModal__assistedEntries"
+			>
+				<div
+					v-if="mode === 'assisted'"
+					class="BuilderFieldsKeyValueModal__assistedEntries__form"
+				>
+					<p
+						class="BuilderFieldsKeyValueModal__assistedEntries__form__labelKey"
+					>
+						Key
+					</p>
+					<p
+						class="BuilderFieldsKeyValueModal__assistedEntries__form__labelValue"
+					>
+						Value
+					</p>
+					<template v-for="(entry, id) of assistedEntries" :key="id">
+						<WdsFieldWrapper :error="getAssistedEntryError(id)">
+							<BuilderTemplateInput
+								placeholder="Type a key..."
+								:value="entry.key"
+								:error="getAssistedEntryError(id)"
+								@update:value="
+									updateAssistedEntryKey(id, $event)
+								"
+							/>
+						</WdsFieldWrapper>
+						<WdsFieldWrapper>
+							<BuilderTemplateInput
+								placeholder="Type a value..."
+								:value="entry.value"
+								@update:value="
+									updateAssistedEntryValue(id, $event)
+								"
+							/>
+						</WdsFieldWrapper>
+						<div>
+							<WdsButton
+								variant="neutral"
+								size="smallIcon"
+								class="BuilderFieldsKeyValueModal__assistedEntries__form__deleteBtn"
+								@click="removeAssistedEntry(id)"
+							>
+								<span class="material-symbols-outlined"
+									>delete</span
+								>
+							</WdsButton>
+						</div>
+					</template>
+				</div>
+
+				<WdsButton
+					variant="special"
+					size="small"
+					@click="addAssistedEntry"
+					><span class="material-symbols-outlined">add</span>Add a
+					pair</WdsButton
+				>
+			</div>
+		</template>
+	</WdsModal>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, defineAsyncComponent } from "vue";
+import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
+import WdsModal, { ModalAction } from "@/wds/WdsModal.vue";
+import BuilderAsyncLoader from "../BuilderAsyncLoader.vue";
+import type { JSONValue } from "./BuilderFieldsKeyValue.vue";
+import WdsButton from "@/wds/WdsButton.vue";
+import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
+import { Mode, useKeyValueEditor } from "./composables/useKeyValueEditor";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+
+const BuilderEmbeddedCodeEditor = defineAsyncComponent({
+	loader: () => import("../BuilderEmbeddedCodeEditor.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
+
+const props = defineProps({
+	data: {
+		type: Object as PropType<JSONValue>,
+		required: true,
+	},
+	initialMode: {
+		type: String as PropType<Mode>,
+		required: false,
+		default: "assisted",
+	},
+});
+
+const {
+	mode,
+	assistedEntries,
+	freehandValue,
+	isValid,
+	currentValue,
+	addAssistedEntry,
+	updateAssistedEntryValue,
+	updateAssistedEntryKey,
+	removeAssistedEntry,
+	getAssistedEntryError,
+} = useKeyValueEditor(props.data);
+mode.value = props.initialMode;
+
+const emits = defineEmits({
+	submit: (data: JSONValue) => typeof data === "object" && data !== undefined,
+	close: () => true,
+});
+
+const actions = computed<ModalAction[]>(() => [
+	{
+		desc: "Save",
+		fn: () => emits("submit", currentValue.value),
+		disabled:
+			JSON.stringify(props.data) === JSON.stringify(currentValue.value) ||
+			!isValid.value,
+	},
+]);
+
+const tabs = computed<WdsTabOptions<Mode>[]>(() => {
+	let listDisabled =
+		mode.value === "freehand" && !isValid.value
+			? "The JSON is not valid"
+			: undefined;
+
+	return [
+		{ label: "List", value: "assisted", disabled: listDisabled },
+		{ label: "JSON", value: "freehand" },
+	];
+});
+</script>
+
+<style scoped>
+.BuilderFieldsKeyValueModal__freehand {
+	border: 1px solid var(--separatorColor);
+	border-radius: 8px;
+	overflow: hidden;
+}
+
+.BuilderFieldsKeyValueModal__assistedEntries__form {
+	display: grid;
+	grid-template-columns: 1fr 1fr auto;
+	align-items: flex-start;
+	gap: 10px;
+	margin-bottom: 22px;
+}
+
+.BuilderFieldsKeyValueModal__assistedEntries__form__deleteBtn {
+	margin-top: 4px;
+}
+.BuilderFieldsKeyValueModal__assistedEntries__form__labelKey {
+	grid-column-start: 1;
+}
+.BuilderFieldsKeyValueModal__assistedEntries__form__labelValue {
+	grid-column-start: 2;
+	grid-column-end: -1;
+}
+</style>
diff --git a/src/ui/src/builder/settings/BuilderTemplateInput.vue b/src/ui/src/builder/settings/BuilderTemplateInput.vue
index 65a617522..db254dcbc 100644
--- a/src/ui/src/builder/settings/BuilderTemplateInput.vue
+++ b/src/ui/src/builder/settings/BuilderTemplateInput.vue
@@ -20,7 +20,10 @@
 					:value="optionKey"
 				>
 					<template
-						v-if="option.toLowerCase() !== optionKey.toLowerCase()"
+						v-if="
+							option.toLowerCase() !==
+							String(optionKey).toLowerCase()
+						"
 					>
 						{{ option }}
 					</template>
@@ -46,8 +49,10 @@
 
 		<div
 			v-if="autocompleteOptions.length"
+			ref="dropdown"
 			class="fieldStateAutocomplete"
 			tabindex="-1"
+			:style="floatingStyles"
 		>
 			<button
 				v-for="(option, optionKey) in autocompleteOptions"
@@ -72,12 +77,14 @@ import {
 	PropType,
 	inject,
 	nextTick,
-	ref,
+	onUnmounted,
 	shallowRef,
-	ComponentInstance,
+	useTemplateRef,
+	watch,
 } from "vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
+import { useFloating, size, flip, autoUpdate } from "@floating-ui/vue";
 
 const emit = defineEmits(["input", "update:value"]);
 
@@ -93,7 +100,7 @@ const props = defineProps({
 	type: {
 		type: String as PropType<"state" | "template">,
 		required: false,
-		default: undefined,
+		default: "template",
 	},
 	options: {
 		type: Object as PropType<Record<string, string>>,
@@ -105,8 +112,46 @@ const props = defineProps({
 });
 
 const ss = inject(injectionKeys.core);
+
+const input = useTemplateRef("input");
+const dropdown = useTemplateRef("dropdown");
+
 const autocompleteOptions = shallowRef<{ text: string; type: string }[]>([]);
-const input = ref<ComponentInstance<typeof WdsTextInput> | null>(null);
+
+const { floatingStyles, update } = useFloating(input, dropdown, {
+	placement: "bottom-start",
+	middleware: [
+		flip(),
+		// take the width of the reference element
+		size({
+			apply({ rects, elements }) {
+				Object.assign(elements.floating.style, {
+					minWidth: `${rects.reference.width}px`,
+				});
+			},
+		}),
+	],
+	strategy: "fixed",
+});
+useFloatingAutoUpdate();
+
+function useFloatingAutoUpdate() {
+	let autoUpdateCleanup: ReturnType<typeof autoUpdate> | undefined;
+
+	function cleanup() {
+		if (autoUpdateCleanup) autoUpdateCleanup();
+		autoUpdateCleanup = undefined;
+	}
+
+	watch(dropdown, () => {
+		cleanup();
+		if (dropdown.value) {
+			autoUpdateCleanup = autoUpdate(input, dropdown.value, update);
+		}
+	});
+
+	onUnmounted(() => cleanup());
+}
 
 defineExpose({
 	focus: () => input.value?.focus(),
@@ -116,7 +161,7 @@ function _get(object: object, path: string[]) {
 	return path.reduce((acc, key) => acc?.[key], object);
 }
 
-const handleComplete = (selectedText: string) => {
+function handleComplete(selectedText: string) {
 	let newValue = input.value?.value ?? "";
 	const { selectionStart, selectionEnd } = input.value?.getSelection() ?? {};
 	const text = newValue.slice(0, selectionStart);
@@ -124,8 +169,12 @@ const handleComplete = (selectedText: string) => {
 	if (full === null) return;
 	const keyword = full.at(-1);
 	const regexKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "$"; // escape the keyword to handle properly on a regex
-	const replaced = text.replace(new RegExp(regexKeyword), selectedText);
-	newValue = replaced + newValue.slice(selectionEnd);
+	const replaced = text.replace(
+		new RegExp(regexKeyword),
+		`${selectedText}${props.type === "template" ? "}" : ""}`,
+	);
+	const afterText = newValue.slice(selectionEnd).replace(/^(\})+/, ""); // merge the closing bracket to avoid duplicates
+	newValue = replaced.concat(afterText);
 	emit("input", { target: { value: newValue } });
 	emit("update:value", newValue);
 	autocompleteOptions.value = [];
@@ -134,15 +183,15 @@ const handleComplete = (selectedText: string) => {
 		input.value.setSelectionEnd(replaced.length);
 		input.value.setSelectionStart(replaced.length);
 	});
-};
+}
 
-const typeToString = (val) => {
+function typeToString(val: unknown) {
 	if (val === null) return "null";
 	if (val === undefined) return "undefined";
 	return typeof val;
-};
+}
 
-const getPath = (text) => {
+function getPath(text: string) {
 	if ((props.type ?? "template") === "state") {
 		return text.split(".");
 	}
@@ -152,22 +201,22 @@ const getPath = (text) => {
 	}
 	const raw = m?.[1] ?? "";
 	return raw.split(".");
-};
+}
 
 /**
  * Escape a key to support the "." and "\" in a state variable
  */
-const escapeVariable = (key) => {
+function escapeVariable(key: string) {
 	return key.replace(/\\/g, "\\\\").replace(/\./g, "\\.");
-};
+}
 
-const handleInput = (ev) => {
+function handleInput(ev) {
 	emit("input", ev);
 	emit("update:value", ev.target.value);
 	showAutocomplete();
-};
+}
 
-const showAutocomplete = () => {
+function showAutocomplete() {
 	const { selectionStart, selectionEnd } = input.value?.getSelection() ?? {};
 	const newValue = input.value?.value;
 	const collapsed = selectionStart === selectionEnd;
@@ -205,7 +254,7 @@ const showAutocomplete = () => {
 		const { item } = match;
 		return item;
 	});
-};
+}
 
 let closeAutocompletionJob: ReturnType<typeof setTimeout> | null;
 
@@ -241,7 +290,6 @@ function abortClosingAutocompletion() {
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 	max-height: 200px;
 	overflow-y: auto;
-	width: 100%;
 	z-index: 2;
 }
 
diff --git a/src/ui/src/builder/settings/composables/useKeyValueEditor.spec.ts b/src/ui/src/builder/settings/composables/useKeyValueEditor.spec.ts
new file mode 100644
index 000000000..4ab268e39
--- /dev/null
+++ b/src/ui/src/builder/settings/composables/useKeyValueEditor.spec.ts
@@ -0,0 +1,141 @@
+import { describe, expect, it } from "vitest";
+import { useKeyValueEditor } from "./useKeyValueEditor";
+
+describe(useKeyValueEditor.name, () => {
+	describe("assisted mode", () => {
+		it("should get invalid status when keys are duplicated", () => {
+			const {
+				assistedEntries,
+				isValid,
+				addAssistedEntry,
+				updateAssistedEntryKey,
+				getAssistedEntryError,
+			} = useKeyValueEditor({ foo: "bar" });
+
+			expect(assistedEntries.value).toStrictEqual({
+				1: { key: "foo", value: "bar" },
+			});
+
+			addAssistedEntry();
+			updateAssistedEntryKey("2", "foo");
+
+			expect(assistedEntries.value).toStrictEqual({
+				1: { key: "foo", value: "bar" },
+				2: { key: "foo", value: "" },
+			});
+
+			expect(isValid.value).toBe(false);
+
+			expect(getAssistedEntryError("1")).toBe(
+				"This key is already in use. Please remove duplicate keys.",
+			);
+		});
+
+		it("shoul update an entry", () => {
+			const {
+				assistedEntries,
+				addAssistedEntry,
+				isValid,
+				updateAssistedEntryValue,
+				updateAssistedEntryKey,
+			} = useKeyValueEditor({ foo: "bar" });
+
+			expect(assistedEntries.value).toStrictEqual({
+				1: { key: "foo", value: "bar" },
+			});
+
+			addAssistedEntry();
+
+			expect(assistedEntries.value).toStrictEqual({
+				1: { key: "foo", value: "bar" },
+				2: { key: "", value: "" },
+			});
+			expect(isValid.value).toBe(true);
+
+			updateAssistedEntryKey("2", "test");
+			updateAssistedEntryValue("2", "test");
+
+			expect(assistedEntries.value).toStrictEqual({
+				1: { key: "foo", value: "bar" },
+				2: { key: "test", value: "test" },
+			});
+		});
+
+		it("shoul delete an entry", () => {
+			const { assistedEntries, removeAssistedEntry } = useKeyValueEditor({
+				foo: "bar",
+			});
+
+			removeAssistedEntry("1");
+
+			expect(assistedEntries.value).toStrictEqual({});
+		});
+	});
+
+	describe("freehand mode", () => {
+		it("should handle invalid JSON", () => {
+			const { mode, freehandValue, currentValue, isValid } =
+				useKeyValueEditor({
+					foo: "bar",
+				});
+			mode.value = "freehand";
+
+			freehandValue.value = '{"foo';
+			expect(currentValue.value).toStrictEqual({});
+			expect(isValid.value).toBe(false);
+		});
+
+		it("should reflect changes when moving from freehand mode to assisted mode", () => {
+			const { assistedEntries, mode, freehandValue } = useKeyValueEditor({
+				foo: "bar",
+			});
+			mode.value = "freehand";
+			freehandValue.value = JSON.stringify({ hello: "world" });
+
+			mode.value = "assisted";
+
+			expect(assistedEntries.value).toStrictEqual({
+				2: { key: "hello", value: "world" },
+			});
+		});
+	});
+
+	describe("mode change", () => {
+		it("should reflect changes when moving from assisted mode to freehand mode", () => {
+			const {
+				assistedEntries,
+				mode,
+				freehandValue,
+				updateAssistedEntryKey,
+				currentValue,
+			} = useKeyValueEditor({ foo: "bar" });
+
+			expect(assistedEntries.value).toStrictEqual({
+				1: { key: "foo", value: "bar" },
+			});
+
+			updateAssistedEntryKey("1", "hello");
+
+			mode.value = "freehand";
+
+			expect(freehandValue.value).toStrictEqual(
+				JSON.stringify({ hello: "bar" }, undefined, 2),
+			);
+			expect(currentValue.value).toStrictEqual({ hello: "bar" });
+		});
+
+		it("should reflect changes when moving from freehand mode to assisted mode", () => {
+			const { assistedEntries, mode, freehandValue } = useKeyValueEditor({
+				foo: "bar",
+			});
+			mode.value = "freehand";
+			freehandValue.value = JSON.stringify({ hello: "world" });
+
+			mode.value = "assisted";
+
+			expect(assistedEntries.value).toStrictEqual({
+				2: { key: "hello", value: "world" },
+			});
+		});
+	});
+});
diff --git a/src/ui/src/builder/settings/composables/useKeyValueEditor.ts b/src/ui/src/builder/settings/composables/useKeyValueEditor.ts
new file mode 100644
index 000000000..d65786dd1
--- /dev/null
+++ b/src/ui/src/builder/settings/composables/useKeyValueEditor.ts
@@ -0,0 +1,157 @@
+import { computed, readonly, ref, shallowRef } from "vue";
+import type { JSONValue } from "../BuilderFieldsKeyValue.vue";
+
+type AssistedEntry = { key: string; value: string };
+export type Mode = "assisted" | "freehand";
+
+export function useKeyValueEditor(originalValue: JSONValue) {
+	const getId = useId();
+
+	const mode = ref<Mode>("assisted");
+	function setMode(newMode: Mode) {
+		if (mode.value === newMode) return;
+		switch (newMode) {
+			case "assisted":
+				initializeAssistedEntries(currentValue.value);
+				break;
+			case "freehand":
+				freehandValue.value = JSON.stringify(
+					currentValue.value,
+					undefined,
+					2,
+				);
+				break;
+		}
+		mode.value = newMode;
+	}
+
+	const freehandValue = ref();
+
+	// assisted entries
+
+	const assistedEntries = shallowRef<Record<string, AssistedEntry>>({});
+	initializeAssistedEntries(originalValue);
+
+	function addAssistedEntry() {
+		assistedEntries.value = {
+			...assistedEntries.value,
+			[getId()]: { value: "", key: "" },
+		};
+	}
+
+	function updateAssistedEntryKey(id: string, key: string) {
+		const entry = assistedEntries.value[id];
+		if (!entry) return;
+
+		assistedEntries.value = {
+			...assistedEntries.value,
+			[id]: { ...entry, key },
+		};
+	}
+	function updateAssistedEntryValue(id: string, value: string) {
+		const entry = assistedEntries.value[id];
+		if (!entry) return;
+
+		assistedEntries.value = {
+			...assistedEntries.value,
+			[id]: { ...entry, value },
+		};
+	}
+	function removeAssistedEntry(id: string) {
+		if (!assistedEntries.value[id]) return;
+		const copy = { ...assistedEntries.value };
+		delete copy[id];
+		assistedEntries.value = copy;
+	}
+
+	function getAssistedEntryError(id: string): string | undefined {
+		const entry = assistedEntries.value[id];
+		if (!entry) return;
+
+		if (assitedEntriesDuplicatedKeys.value.has(entry.key)) {
+			return "This key is already in use. Please remove duplicate keys.";
+		}
+	}
+
+	function initializeAssistedEntries(object: JSONValue) {
+		assistedEntries.value = Object.entries(object).reduce<
+			Record<string, AssistedEntry>
+		>((acc, [key, value]) => {
+			acc[getId()] = { key, value: String(value) };
+			return acc;
+		}, {});
+
+		if (Object.keys(assistedEntries.value).length === 0) addAssistedEntry();
+	}
+	const addAssistedEntryDisabled = computed(() =>
+		Object.values(assistedEntries.value).some((k) => k.key === ""),
+	);
+
+	const assitedEntriesDuplicatedKeys = computed(() => {
+		const keys = new Set<string>();
+		const duplicatedKeys = new Set<string>();
+
+		for (const { key } of Object.values(assistedEntries.value)) {
+			if (keys.has(key)) {
+				duplicatedKeys.add(key);
+			} else {
+				keys.add(key);
+			}
+		}
+
+		return duplicatedKeys;
+	});
+
+	const isValid = computed(() => {
+		switch (mode.value) {
+			case "assisted":
+				return assitedEntriesDuplicatedKeys.value.size === 0;
+			case "freehand":
+				try {
+					JSON.parse(freehandValue.value);
+					return true;
+				} catch {
+					return false;
+				}
+			default:
+				return false;
+		}
+	});
+
+	const currentValue = computed<JSONValue>(() => {
+		switch (mode.value) {
+			case "assisted":
+				return Object.values(assistedEntries.value).reduce((acc, v) => {
+					acc[v.key] = v.value;
+					return acc;
+				}, {});
+			case "freehand":
+				try {
+					return JSON.parse(freehandValue.value);
+				} catch {
+					return {};
+				}
+			default:
+				return {};
+		}
+	});
+
+	return {
+		mode: computed<Mode>({ get: () => mode.value, set: setMode }),
+		assistedEntries: readonly(assistedEntries),
+		addEntryDisabled: addAssistedEntryDisabled,
+		addAssistedEntry,
+		updateAssistedEntryKey,
+		updateAssistedEntryValue,
+		removeAssistedEntry,
+		getAssistedEntryError,
+		freehandValue,
+		isValid,
+		currentValue,
+	};
+}
+
+function useId() {
+	let nextId = 0;
+	return () => String(++nextId);
+}
diff --git a/src/ui/src/builder/useComponentAction.spec.ts b/src/ui/src/builder/useComponentAction.spec.ts
index 4fed9998f..1a84db9fe 100644
--- a/src/ui/src/builder/useComponentAction.spec.ts
+++ b/src/ui/src/builder/useComponentAction.spec.ts
@@ -1,7 +1,8 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { useComponentActions } from "./useComponentActions";
-import { Core } from "@/writerTypes.js";
+import { Component, Core } from "@/writerTypes.js";
 import { generateBuilderManager } from "./builderManager";
+import { buildMockComponent, buildMockCore } from "@/tests/mocks";
 
 describe(useComponentActions.name, () => {
 	let core: Core;
@@ -10,19 +11,77 @@ describe(useComponentActions.name, () => {
 	beforeEach(() => {
 		ssbm = generateBuilderManager();
 
-		// @ts-expect-error we mock only necessary functions
-		core = {
-			getComponentById: vi
-				.fn()
-				.mockImplementation((id: string) => ({ id })),
-			getComponents: vi.fn().mockReturnValue([]),
-			deleteComponent: vi.fn(),
-			sendComponentUpdate: vi.fn(),
-		};
+		core = buildMockCore().core;
+
+		const components: Component[] = [
+			{ id: "root", type: "root", position: 0 } as Component,
+			{
+				id: "page-id",
+				type: "page",
+				content: { key: "page" },
+				isCodeManaged: false,
+				parentId: "root",
+				position: 0,
+			},
+			{
+				id: "1",
+				type: "section",
+				content: { title: "Section 1" },
+				isCodeManaged: false,
+				parentId: "page-id",
+				position: 0,
+			},
+			{
+				id: "1.1",
+				type: "section",
+				content: { title: "Section 1.1" },
+				isCodeManaged: false,
+				parentId: "1",
+				position: 0,
+			},
+			{
+				id: "1.1.1",
+				type: "section",
+				content: { title: "Section 1.1.1" },
+				isCodeManaged: false,
+				parentId: "1.1",
+				position: 0,
+			},
+			{
+				id: "1.1.2",
+				type: "section",
+				content: { title: "Section 1.1.2" },
+				isCodeManaged: false,
+				parentId: "1.1",
+				position: 1,
+			},
+			{
+				id: "1.2",
+				type: "section",
+				content: { title: "Section 1.2" },
+				handlers: {},
+				isCodeManaged: false,
+				parentId: "1",
+				position: 1,
+			},
+			{
+				id: "2",
+				type: "section",
+				content: { title: "Section 2" },
+				handlers: {},
+				isCodeManaged: false,
+				parentId: "page-id",
+				position: 1,
+			},
+		];
+
+		components.forEach((c) => core.addComponent(c));
 	});
 
 	describe("removeComponentSubtree", () => {
 		it("should delete the component in a transaction", () => {
+			core.addComponent(buildMockComponent({ id: "1" }));
+
 			const { removeComponentSubtree } = useComponentActions(core, ssbm);
 
 			const openMutationTransaction = vi.spyOn(
@@ -50,14 +109,69 @@ describe(useComponentActions.name, () => {
 				"openMutationTransaction",
 			);
 
-			removeComponentsSubtree("1", "2", "3");
+			removeComponentsSubtree("1", "2");
 
 			expect(core.sendComponentUpdate).toHaveBeenCalledOnce();
 			expect(openMutationTransaction).toHaveBeenNthCalledWith(
 				1,
-				"delete-1,2,3",
+				"delete-1,2",
 				"Delete",
 			);
 		});
 	});
+
+	describe("components movements", () => {
+		it("should go to the parent", () => {
+			const { isGoToParentAllowed, goToParent } = useComponentActions(
+				core,
+				ssbm,
+			);
+			expect(isGoToParentAllowed("root")).toBe(false);
+			expect(isGoToParentAllowed("1")).toBe(true);
+			expect(isGoToParentAllowed("1.1")).toBe(true);
+
+			goToParent("1.1");
+			expect(ssbm.firstSelectedId.value).toBe("1");
+		});
+
+		it("should go to the child", () => {
+			const { isGoToChildAllowed, goToChild } = useComponentActions(
+				core,
+				ssbm,
+			);
+			expect(isGoToChildAllowed("root")).toBe(true);
+			expect(isGoToChildAllowed("1")).toBe(true);
+			expect(isGoToChildAllowed("1.1.1")).toBe(false);
+
+			goToChild("1");
+			expect(ssbm.firstSelectedId.value).toBe("1.1");
+		});
+
+		it("should go to the previous sibling", () => {
+			const { isGoToPrevSiblingAllowed, goToPrevSibling } =
+				useComponentActions(core, ssbm);
+			expect(isGoToPrevSiblingAllowed("root")).toBe(false);
+			expect(isGoToPrevSiblingAllowed("1")).toBe(false);
+			expect(isGoToPrevSiblingAllowed("1.1")).toBe(false);
+			expect(isGoToPrevSiblingAllowed("1.2")).toBe(true);
+
+			goToPrevSibling("1.2");
+			expect(ssbm.firstSelectedId.value).toBe("1.1");
+		});
+
+		it("should go to the next sibling", () => {
+			const { isGoToNextSiblingAllowed, goToNextSibling } =
+				useComponentActions(core, ssbm);
+			expect(isGoToNextSiblingAllowed("root")).toBe(false);
+			expect(isGoToNextSiblingAllowed("1")).toBe(true);
+			expect(isGoToNextSiblingAllowed("1.1")).toBe(true);
+			expect(isGoToNextSiblingAllowed("1.2")).toBe(false);
+
+			goToNextSibling("1.1");
+			expect(ssbm.firstSelectedId.value).toBe("1.2");
+
+			goToNextSibling("1");
+			expect(ssbm.firstSelectedId.value).toBe("2");
+		});
+	});
 });
diff --git a/src/ui/src/builder/useComponentActions.ts b/src/ui/src/builder/useComponentActions.ts
index 96aa6ff51..239efcab4 100644
--- a/src/ui/src/builder/useComponentActions.ts
+++ b/src/ui/src/builder/useComponentActions.ts
@@ -36,9 +36,7 @@ export function useComponentActions(
 		const parent = wf.getComponentById(component.parentId);
 		if (!parent) return;
 
-		const previousSibling = wf
-			.getComponents(parent.id, { includeBMC: true, includeCMC: false })
-			.filter((c) => c.position == position - 1)[0];
+		const previousSibling = findSibling(componentId, -1);
 
 		// MUTATIONS
 
@@ -68,16 +66,8 @@ export function useComponentActions(
 		const position = component.position;
 		if (position == -2) return; // Positionless
 
-		const positionfulSiblings = wf
-			.getComponents(parent.id, { includeBMC: true, includeCMC: false })
-			.filter((c) => c.position !== -2);
-		if (position >= positionfulSiblings.length - 1) {
-			return;
-		}
-
-		const nextSibling = positionfulSiblings.filter(
-			(c) => c.position == position + 1,
-		)[0];
+		const nextSibling = findSibling(componentId, 1);
+		if (!nextSibling) return;
 
 		const transactionId = `move-down-${componentId}`;
 		ssbm.openMutationTransaction(transactionId, `Move down`);
@@ -125,6 +115,50 @@ export function useComponentActions(
 		wf.sendComponentUpdate();
 	}
 
+	function isParentSuitable(
+		targetId: Component["id"],
+		child: Component,
+	): boolean {
+		const targetComponent = wf.getComponentById(targetId);
+		if (!targetComponent) return false;
+		const containableTypes = wf.getContainableTypes(targetId);
+		return (
+			!targetComponent?.isCodeManaged &&
+			!wf.isChildOf(child.id, targetId) &&
+			containableTypes.includes(child.type)
+		);
+	}
+
+	/**
+	 * Moves a component inside the next sibling (if possible)
+	 * @returns the new parent ID of the component
+	 */
+	function moveComponentInsideNextSibling(
+		componentId: Component["id"],
+	): Component["id"] | undefined {
+		const component = wf.getComponentById(componentId);
+		const target = findSibling(componentId, 1);
+		if (!target) return;
+		if (!isParentSuitable(target.id, component)) return;
+		moveComponent(componentId, target.id);
+		return target.id;
+	}
+
+	/**
+	 * Moves a component inside the parent of the container
+	 * @returns the new parent ID of the component
+	 */
+	function moveComponentToParent(
+		componentId: Component["id"],
+	): Component["id"] | undefined {
+		const component = wf.getComponentById(componentId);
+		const targetId = wf.getComponentById(component.parentId).parentId;
+		if (!targetId) return;
+		if (!isParentSuitable(targetId, component)) return;
+		moveComponent(componentId, targetId, 0);
+		return targetId;
+	}
+
 	function createComponent(
 		type: string,
 		parentId: Component["id"],
@@ -358,12 +392,22 @@ export function useComponentActions(
 		return !isRoot(targetId) && !component?.isCodeManaged;
 	}
 
-	/**
-	 * Whether it's possible to go to (select) a component's parent.
-	 */
+	/** Whether it's possible to go to (select) a component's parent. */
 	function isGoToParentAllowed(targetId: Component["id"]): boolean {
 		return !isRoot(targetId);
 	}
+	/** Whether it's possible to go to (select) a component's children. */
+	function isGoToChildAllowed(targetId: Component["id"]): boolean {
+		return wf.getComponents(targetId).length > 0;
+	}
+	/** Whether it's possible to go to (select) the next component sibling. */
+	function isGoToNextSiblingAllowed(targetId: Component["id"]): boolean {
+		return Boolean(findSibling(targetId, 1));
+	}
+	/** Whether it's possible to go to (select) the previous component sibling. */
+	function isGoToPrevSiblingAllowed(targetId: Component["id"]): boolean {
+		return Boolean(findSibling(targetId, -1));
+	}
 
 	/**
 	 * Go to (select) a target component's parent.
@@ -390,6 +434,52 @@ export function useComponentActions(
 		ssbm.setSelection(parentId, parentInstancePath);
 	}
 
+	/**
+	 * Go to (select) a target component's parent.
+	 *
+	 * @param targetId Id of the target component
+	 * @param targetInstancePath Flattened instance path of a specific component instance
+	 */
+	function goToChild(targetId: Component["id"]) {
+		const child = wf
+			.getComponents(targetId)
+			.sort((a, b) => a.position - b.position)
+			.at(0);
+		if (child) ssbm.setSelection(child.id);
+	}
+
+	function findSibling(targetId: Component["id"], direction: -1 | 1) {
+		if (isRoot(targetId)) return;
+		const target = wf.getComponentById(targetId);
+		if (!target) return;
+		const { parentId, position } = target;
+
+		const targetPosition = position + direction;
+
+		return wf
+			.getComponents(parentId, { includeBMC: true, includeCMC: false })
+			.find(
+				(c) => c.position === targetPosition && c.parentId === parentId,
+			);
+	}
+	/** Whether it's possible to go to (select) the next component sibling. */
+	function goToNextSibling(targetId: Component["id"]) {
+		if (isRoot(targetId)) return;
+		const parentId = wf.getComponentById(targetId)?.parentId;
+		if (!parentId) return;
+		const siblings = wf
+			.getComponents(parentId)
+			.sort((a, b) => a.position - b.position);
+		const index = siblings.findIndex((c) => c.id === targetId);
+		if (index === -1 && index + 1 === siblings.length) return;
+		ssbm.setSelection(siblings[index + 1]?.id);
+	}
+	/** Whether it's possible to go to (select) the previous component sibling. */
+	function goToPrevSibling(targetId: Component["id"]) {
+		const sibling = findSibling(targetId, -1);
+		if (sibling) ssbm.setSelection(sibling.id);
+	}
+
 	/**
 	 * Returns whether the components in a subtree can be incorporated
 	 * to the system.
@@ -982,9 +1072,18 @@ export function useComponentActions(
 		isCutAllowed,
 		isDeleteAllowed,
 		isGoToParentAllowed,
+		isGoToChildAllowed,
+		isGoToNextSiblingAllowed,
+		isGoToPrevSiblingAllowed,
+		repositionHigherSiblings,
 		isDraggingAllowed,
 		getEnabledMoves,
 		goToParent,
+		goToChild,
+		goToNextSibling,
+		goToPrevSibling,
 		goToComponentParentPage,
+		moveComponentInsideNextSibling,
+		moveComponentToParent,
 	};
 }
diff --git a/src/ui/src/components/core/content/CoreDataframe.vue b/src/ui/src/components/core/content/CoreDataframe.vue
index de2a67351..b35fa73f9 100644
--- a/src/ui/src/components/core/content/CoreDataframe.vue
+++ b/src/ui/src/components/core/content/CoreDataframe.vue
@@ -319,6 +319,7 @@ export default {
 import injectionKeys from "@/injectionKeys";
 import type * as aq from "arquero";
 import type { Table } from "apache-arrow";
+import { dataUrlToBase64, base64ToArrayBuffer } from "@/utils/base64";
 
 /**
  * If the table is massive, only a certain amount of rows is rendered at a time,
@@ -559,12 +560,10 @@ async function loadData() {
 	isLoadingData.value = true;
 	const aq = await import("arquero");
 	const { tableFromIPC } = await import("apache-arrow");
-	const url = fields.dataframe.value;
 
 	try {
-		const res = await fetch(url);
-		const blob = await res.blob();
-		const buffer = await blob.arrayBuffer();
+		const base64 = dataUrlToBase64(fields.dataframe.value);
+		const buffer = base64ToArrayBuffer(base64);
 		const arrowTable = tableFromIPC(buffer);
 		tableIndex.value = getIndexFromArrowTable(arrowTable);
 		const aqTable = aq.fromArrow(arrowTable);
diff --git a/src/ui/src/renderer/ComponentProxy.vue b/src/ui/src/renderer/ComponentProxy.vue
index c1b35ae52..010e4740d 100644
--- a/src/ui/src/renderer/ComponentProxy.vue
+++ b/src/ui/src/renderer/ComponentProxy.vue
@@ -182,6 +182,7 @@ export default {
 			(isNowSelected) => {
 				isSelected.value = isNowSelected;
 			},
+			{ immediate: true },
 		);
 
 		// keep track on style fields changed to remove the "selected" state if a style change (it helps the user to see his modifications)
diff --git a/src/ui/src/utils/base64.ts b/src/ui/src/utils/base64.ts
new file mode 100644
index 000000000..404a2240f
--- /dev/null
+++ b/src/ui/src/utils/base64.ts
@@ -0,0 +1,15 @@
+export function dataUrlToBase64(url: string) {
+	const base64 = url.split(",")?.[1];
+	if (!base64) throw Error(`Could not extract base64 from data url: ${url}`);
+	return base64;
+}
+
+export function base64ToArrayBuffer(base64: string) {
+	const binaryString = window.atob(base64);
+	const len = binaryString.length;
+	const bytes = new Uint8Array(len);
+	for (let i = 0; i < len; i++) {
+		bytes[i] = binaryString.charCodeAt(i);
+	}
+	return bytes.buffer;
+}
diff --git a/src/ui/src/wds/WdsModal.vue b/src/ui/src/wds/WdsModal.vue
index 7565e362c..17bc82402 100644
--- a/src/ui/src/wds/WdsModal.vue
+++ b/src/ui/src/wds/WdsModal.vue
@@ -20,7 +20,10 @@
 					<i class="material-symbols-outlined">close</i>
 				</WdsButton>
 				<div v-if="title || description" class="WdsModal__main__title">
-					<h2>{{ title }}</h2>
+					<div class="WdsModal__main__title__header">
+						<h2>{{ title }}</h2>
+						<slot name="titleActions" />
+					</div>
 					<summary v-if="description">
 						{{ description }}
 					</summary>
@@ -157,7 +160,16 @@ const { title, actions } = toRefs(props);
 	margin-bottom: 32px;
 }
 
-.WdsModal__main__title h2 {
+/* center the actions slot if the slot is provided */
+.WdsModal__main__title__header {
+	display: grid;
+	grid-template-columns: 1fr auto 1fr;
+}
+.WdsModal__main__title__header > *:only-child {
+	grid-column: 1 / -1;
+}
+
+.WdsModal__main__title__header h2 {
 	margin: 0;
 	font-size: 24px;
 	font-style: normal;
diff --git a/src/ui/src/wds/WdsTab.vue b/src/ui/src/wds/WdsTab.vue
index 0f6f0a49c..1a4a1679f 100644
--- a/src/ui/src/wds/WdsTab.vue
+++ b/src/ui/src/wds/WdsTab.vue
@@ -3,6 +3,8 @@
 		class="WdsTab"
 		:class="{ 'WdsTab--disabled': disabled, 'WdsTab--selected': selected }"
 		type="button"
+		:disabled="Boolean(disabled)"
+		:data-writer-tooltip="tooltip"
 		@click="$emit('click')"
 	>
 		<slot />
@@ -10,11 +12,17 @@
 </template>
 
 <script setup lang="ts">
-defineProps({
-	disabled: { type: Boolean },
+import { computed } from "vue";
+
+const props = defineProps({
+	disabled: { type: [Boolean, String], default: undefined },
 	selected: { type: Boolean },
 });
 
+const tooltip = computed(() =>
+	typeof props.disabled === "string" ? props.disabled : undefined,
+);
+
 defineEmits({
 	click: () => true,
 });
@@ -38,6 +46,7 @@ defineEmits({
 
 .WdsTab--disabled {
 	color: var(--wdsColorGray4);
+	cursor: not-allowed;
 }
 
 .WdsTab--selected {
diff --git a/src/ui/src/wds/WdsTabs.vue b/src/ui/src/wds/WdsTabs.vue
index 366a6851a..21e4906bf 100644
--- a/src/ui/src/wds/WdsTabs.vue
+++ b/src/ui/src/wds/WdsTabs.vue
@@ -15,7 +15,7 @@
 export interface WdsTabOptions<Value extends string = string> {
 	label: string;
 	value: Value;
-	disabled?: boolean;
+	disabled?: boolean | string;
 }
 </script>
 
diff --git a/src/writer/app_runner.py b/src/writer/app_runner.py
index bc4c010b2..8de756098 100644
--- a/src/writer/app_runner.py
+++ b/src/writer/app_runner.py
@@ -854,7 +854,16 @@ def rename_persisted_script(self, from_path: str, to_path: str):
         self._check_file_in_app_path(to_path_abs)
 
         os.makedirs(os.path.dirname(to_path_abs), exist_ok=True)
-        os.rename(from_path_abs, to_path_abs)
+
+        try:
+            os.rename(from_path_abs, to_path_abs)
+        except OSError as e:
+            # If the error is due to the function not being implemented (like S3/Fuse), we fallback to copy/delete
+            if e.errno == 38:
+                shutil.copy2(from_path_abs, to_path_abs)
+                os.remove(from_path_abs)
+            else:
+                raise e
 
         self.source_files = wf_project.build_source_files(self.app_path)
 
@@ -895,8 +904,6 @@ def _check_file_in_app_path(self, path):
 
     def _load_persisted_components(self) -> Dict[str, ComponentDefinition]:
         logger = logging.getLogger("writer")
-        if os.path.isfile(os.path.join(self.app_path, "ui.json")):
-            wf_project.migrate_obsolete_ui_json(self.app_path, metadata={"writer_version": VERSION})
 
         if not os.path.isfile(
             os.path.join(self.app_path, ".wf", "components-blueprints_root.jsonl")
diff --git a/src/writer/blocks/httprequest.py b/src/writer/blocks/httprequest.py
index c61deac2b..2537a7b05 100644
--- a/src/writer/blocks/httprequest.py
+++ b/src/writer/blocks/httprequest.py
@@ -114,7 +114,8 @@ def run(self):
                     method,
                     url,
                     headers=headers,
-                    content=raw_body
+                    content=raw_body,
+                    timeout=180
                     )
 
                 content_type = res.headers.get("Content-Type", "")
diff --git a/src/writer/blocks/writerfileapi.py b/src/writer/blocks/writerfileapi.py
index 7ac36e5ce..9c94e0790 100644
--- a/src/writer/blocks/writerfileapi.py
+++ b/src/writer/blocks/writerfileapi.py
@@ -23,24 +23,7 @@ def register(cls, type: str):
                         "default": "[]",
                         "desc": "A list of files to be uploaded and added to the knowledge graph. You can use files uploaded via the File Input component or specify dictionaries with data, type and name.",
                         "validator": {
-                            "type": "array",
-                            "items": {
-                                "type": "object",
-                                "properties": {
-                                    "data": {
-                                        "type": "string",
-                                        "format": "base64"
-                                    },
-                                    "type": {
-                                        "type": "string",
-                                        "format": "mime-type"
-                                    },
-                                    "name": {
-                                        "type": "string"
-                                    }
-                                },
-                                "required": ["data", "type", "name"]
-                            }
+                            "type": "array"
                         }
                     },
                 },
diff --git a/src/writer/wf_project.py b/src/writer/wf_project.py
index eb9ceec9d..803272ad8 100644
--- a/src/writer/wf_project.py
+++ b/src/writer/wf_project.py
@@ -7,6 +7,7 @@
 """
 import dataclasses
 import glob
+import hashlib
 import io
 import json
 import logging
@@ -33,6 +34,7 @@ class WfProjectContext:
     write_files_async_queue: Queue = Queue()
     write_files_async_process: typing.Optional[multiprocessing.Process] = None
     write_files_async_stop: Any = multiprocessing.Event() # Note: Event is a function, not a class in python, it can't be typed
+    file_hashes: Dict[str, str] = dataclasses.field(default_factory=dict)
 
 
 def write_files_async(context: WfProjectContext, metadata: MetadataDefinition, components: Dict[str, ComponentDefinition]) -> None:
@@ -52,7 +54,7 @@ def write_files_async(context: WfProjectContext, metadata: MetadataDefinition, c
 
     context.write_files_async_queue.put((context.app_path, metadata, components))
 
-def write_files(app_path: str, metadata: MetadataDefinition, components: Dict[str, ComponentDefinition]) -> None:
+def write_files(app_path: str, metadata: MetadataDefinition, components: Dict[str, ComponentDefinition], context: WfProjectContext) -> None:
     """
     Writes the meta data of the WF project to the `.wf` directory (metadata, components, ...).
 
@@ -62,7 +64,7 @@ def write_files(app_path: str, metadata: MetadataDefinition, components: Dict[st
     * one file per page is created in the form `components-page-{id}.json` in jsonline format
     * one file per blueprint is created in the form `components-blueprints_blueprint-{id}.json` in jsonline format
 
-    >>> wf_project.write_files('app/hello', metadata={"writer_version": "0.1" }, components=...)
+    >>> wf_project.write_files('app/hello', metadata={"writer_version": "0.1" }, components=..., context=wf_project.WfProjectContext(app_path="app/path"))
     """
 
     wf_directory = os.path.join(app_path, ".wf")
@@ -77,8 +79,8 @@ def write_files(app_path: str, metadata: MetadataDefinition, components: Dict[st
     logger = logging.getLogger("writer")
     time_start = time.time()
     logger.info("Saving project...")
-    _write_root_files(wf_directory, components)
-    _write_component_files(wf_directory, components)
+    _write_root_files(wf_directory, components, context)
+    _write_component_files(wf_directory, components, context)
     _remove_obsolete_component_files(wf_directory, components)
     logger.info("Saved. Time elapsed: %.4fs", time.time() - time_start)
 
@@ -161,31 +163,6 @@ def read_files(app_path: str) -> Tuple[MetadataDefinition, dict[str, ComponentDe
     return metadata, components
 
 
-def migrate_obsolete_ui_json(app_path: str, metadata: MetadataDefinition) -> None:
-    """
-    Migrates a project that uses ui.json file to the current project format
-
-    The ui.json file is removed after the migration.
-
-    >>> wf_project.migrate_obsolete_ui_json('app/hello')
-    """
-    assert os.path.isfile(os.path.join(app_path, "ui.json")), f"ui.json file required for migration into {app_path}"
-
-    logger = logging.getLogger('writer')
-    with io.open(os.path.join(app_path, "ui.json"), "r") as f:
-        parsed_file = json.load(f)
-
-    if not isinstance(parsed_file, dict):
-        raise ValueError("No dictionary found in components file.")
-
-    file_payload = parsed_file
-    # metadata = file_payload.get("metadata", {})
-    components = file_payload.get("components", {})
-    write_files(app_path, metadata, components)
-    os.remove(os.path.join(app_path, "ui.json"))
-    logger.warning('project format has changed and has been migrated with success. ui.json file has been removed.')
-
-
 def create_default_blueprints_root(abs_path: str) -> None:
     with io.open(os.path.join(abs_path, '.wf', 'components-blueprints_root.jsonl'), 'w') as f:
         f.write('{"id": "blueprints_root", "type": "blueprints_root", "content": {}, "isCodeManaged": false, "position": 0, "handlers": {}, "visible": {"expression": true, "binding": "", "reversed": false}}')
@@ -253,7 +230,7 @@ def sort_key(item):
     return OrderedDict((k, _sort_wf_component_keys(v)) for k, v in sorted_items)
 
 
-def _write_component_files(wf_directory: str, components: Dict[str, ComponentDefinition]) -> None:
+def _write_component_files(wf_directory: str, components: Dict[str, ComponentDefinition], context: WfProjectContext) -> None:
     """
     Writes the component files in the .wf folder. It preserve obsolete files.
 
@@ -262,23 +239,50 @@ def _write_component_files(wf_directory: str, components: Dict[str, ComponentDef
     for component_id, filename in _expected_component_fileinfos(components):
         filtered_components = core_ui.filter_components_by(components, parent=component_id)
 
-        with io.open(os.path.join(wf_directory, filename), "w") as f:
-            for p in _order_components(filtered_components):
-                f.write(json.dumps(_sort_wf_component_keys(p)) + "\n")
+        file_path = os.path.join(wf_directory, filename)
+        file_contents = "".join(
+            [json.dumps(_sort_wf_component_keys(p)) + "\n" for p in _order_components(filtered_components)]
+        )
+
+        has_changed = _has_file_hash_changed(filename, file_contents, context)
+        if not has_changed:
+            continue
+
+        with io.open(file_path, "w") as f:
+            f.write(file_contents)
             f.flush()
             os.fsync(f.fileno())
 
 
-def _write_root_files(wf_directory, components):
+def _write_root_files(wf_directory, components, context: WfProjectContext):
     for root in ROOTS:
         root_component = components.get(root, None)
         if root_component:
+            file_contents = json.dumps(_sort_wf_component_keys(root_component))
+
+            has_changed = _has_file_hash_changed(f"components-{root}.jsonl", file_contents, context)
+            if not has_changed:
+                continue
+
             with io.open(os.path.join(wf_directory, f"components-{root}.jsonl"), "w") as f:
-                f.write(json.dumps(_sort_wf_component_keys(root_component)))
+                f.write(file_contents)
                 f.flush()
                 os.fsync(f.fileno())
 
 
+def _has_file_hash_changed(file_name: str, new_contents: str, context: WfProjectContext) -> bool:
+    """
+    Returns whether a hash of a file changed given new file contents;
+
+    Missing file counts as hash invalidation and return True.
+    """
+    new_hash = hashlib.md5(new_contents.encode('utf-8')).hexdigest()
+
+    old_hash = context.file_hashes.get(file_name)
+    context.file_hashes[file_name] = new_hash
+    return old_hash != new_hash
+
+
 def _order_components(components: Dict[str, ComponentDefinition]) -> List[ComponentDefinition]:
     """
     Orders the components by their position attribute
@@ -309,7 +313,7 @@ def _start_process_write_files_async_process(context: WfProjectContext, save_int
 
         if obj is not None:
             app_path, metadata, components = obj
-            write_files(app_path, metadata, components)
+            write_files(app_path, metadata, components, context)
 
         time.sleep(save_interval)
 
@@ -322,9 +326,8 @@ def is_project(path: str) -> bool:
     """
     has_main_py = os.path.isfile(os.path.join(path, "main.py"))
     has_wf_directory = os.path.isdir(os.path.join(path, ".wf"))
-    has_ui_json_file = os.path.isfile(os.path.join(path, "ui.json"))
 
-    return has_main_py and (has_wf_directory or has_ui_json_file)
+    return has_main_py and has_wf_directory
 
 
 def can_create_project(path: str) -> bool:
diff --git a/tests/backend/__init__.py b/tests/backend/__init__.py
index 5ed313de6..180de2413 100644
--- a/tests/backend/__init__.py
+++ b/tests/backend/__init__.py
@@ -3,4 +3,3 @@
 test_app_dir = Path(__file__).resolve().parent / 'testapp'
 test_multiapp_dir = Path(__file__).resolve().parent / 'testmultiapp'
 test_basicauth_dir = Path(__file__).resolve().parent / 'testbasicauth'
-testobsoleteapp = Path(__file__).resolve().parent / 'testobsoleteapp'
diff --git a/tests/backend/test_wf_project.py b/tests/backend/test_wf_project.py
index 512c22e37..e8aca1a46 100644
--- a/tests/backend/test_wf_project.py
+++ b/tests/backend/test_wf_project.py
@@ -3,11 +3,12 @@
 import shutil
 import tempfile
 from typing import List
+from unittest.mock import ANY
 
 from writer import VERSION, core_ui, wf_project
 from writer.ss_types import ComponentDefinition
 
-from tests.backend import test_app_dir, testobsoleteapp
+from tests.backend import test_app_dir
 from tests.backend.fixtures import file_fixtures, load_fixture_content
 
 
@@ -23,7 +24,12 @@ def test_wf_project_write_files_should_write_metadatajson_in_wf_directory():
         components = {c['id']: c for c in components_root}
 
         # When
-        wf_project.write_files(test_app_dir, metadata={'writer_version': '0.1.0'}, components=components)
+        wf_project.write_files(
+            test_app_dir,
+            metadata={'writer_version': '0.1.0'},
+            components=components,
+            context=wf_project.WfProjectContext(app_path=test_app_dir)
+        )
 
         # Then
         assert os.path.isfile(os.path.join(test_app_dir, '.wf', 'metadata.json'))
@@ -46,7 +52,12 @@ def test_wf_project_write_files_should_write_components_files_in_wf_directory():
         components.update({c['id']: c for c in component_page})
 
         # When
-        wf_project.write_files(test_app_dir, metadata={'writer_version': '0.1.0'}, components=components)
+        wf_project.write_files(
+            test_app_dir,
+            metadata={'writer_version': '0.1.0'},
+            components=components,
+            context=wf_project.WfProjectContext(app_path=test_app_dir)
+        )
 
         # Then
         assert os.path.isfile(os.path.join(test_app_dir, '.wf', 'components-root.jsonl'))
@@ -77,7 +88,12 @@ def test_wf_project_write_files_should_write_preserve_page_order_in_wf_directory
         components.update({c['id']: c for c in components_page_1})
 
         # When
-        wf_project.write_files(test_app_dir, metadata={'writer_version': '0.1.0'}, components=components)
+        wf_project.write_files(
+            test_app_dir,
+            metadata={'writer_version': '0.1.0'},
+            components=components,
+            context=wf_project.WfProjectContext(app_path=test_app_dir)
+        )
 
         # Then
         assert os.path.isfile(os.path.join(test_app_dir, '.wf', 'components-page-0-23bc1387-26ed-4ff2-8565-b027c2960c3c.jsonl'))
@@ -89,6 +105,34 @@ def test_wf_project_write_files_should_write_preserve_page_order_in_wf_directory
         assert page_1[0] == components_page_1[0]
 
 
+def test_wf_project_write_files_updates_context():
+    """
+    Tests that files with the same hash do not get rewritten
+    """
+    # Given
+    components_root: List = load_fixture_content('components/components-root.jsonl')
+    components = {c['id']: c for c in components_root if "hash" not in c}
+
+    components_page: List = load_fixture_content('components/components-page-0.jsonl')
+    components.update({c['id']: c for c in components_page if "hash" not in c})
+
+    with tempfile.TemporaryDirectory('test_wf_project_write_files') as temp_test_app_dir:
+        # When
+        context = wf_project.WfProjectContext(app_path=temp_test_app_dir)
+        wf_project.write_files(
+            temp_test_app_dir,
+            metadata={'writer_version': '0.1.0'},
+            components=components,
+            context=context
+        )
+
+        # Then
+        assert context.file_hashes == {
+            'components-page-0-bb4d0e86-619e-4367-a180-be28ab6059f4.jsonl': '7416851a26306bb3a62fac797e7f6f60',
+            'components-root.jsonl': '14255037a5c472eca4e0ff8308e2efbb',
+        }
+
+
 def test_wf_project_read_files_should_read_files_in_wf_directory():
     # When
     metadata, sc = wf_project.read_files(test_app_dir)
@@ -110,61 +154,17 @@ def test_wf_project_should_remove_obsolete_pages_in_wf_directory():
         for rc in removed_components.values():
             del sc[rc['id']]
 
-        wf_project.write_files(_test_app_dir, metadata=metadata, components=sc)
+        wf_project.write_files(
+            _test_app_dir,
+            metadata={'writer_version': '0.1.0'},
+            components=sc,
+            context=wf_project.WfProjectContext(app_path=_test_app_dir)
+        )
 
         # Then
         assert os.path.isfile(os.path.join(_test_app_dir, '.wf', 'components-page-0-bb4d0e86-619e-4367-a180-be28ab6059f4.jsonl')) is False
 
 
-def test_wf_project_migrate_obsolete_ui_json_should_migrate_ui_json_into_wf_directory():
-    with tempfile.TemporaryDirectory('wf_project_migrate_obsolete_ui_json') as tmp_app_dir:
-        shutil.copytree(testobsoleteapp, tmp_app_dir, dirs_exist_ok=True)
-
-        # When
-        wf_project.migrate_obsolete_ui_json(tmp_app_dir, {"writer_version": VERSION})
-
-        # Then
-        assert not os.path.isfile(os.path.join(tmp_app_dir, 'ui.json'))
-        assert os.path.isfile(os.path.join(tmp_app_dir, '.wf', 'metadata.json'))
-        assert os.path.isfile(os.path.join(tmp_app_dir, '.wf', 'components-root.jsonl'))
-
-
-def test_wf_project_is_project_work_on_current_project():
-    with tempfile.TemporaryDirectory('wf_project_migrate_obsolete_ui_json') as tmp_app_dir:
-        shutil.copytree(testobsoleteapp, tmp_app_dir, dirs_exist_ok=True)
-
-        # When
-        is_wf_project = wf_project.is_project(tmp_app_dir)
-
-        # Then
-        assert is_wf_project is True
-
-
-def test_wf_project_is_project_work_on_obsolete_project():
-    with tempfile.TemporaryDirectory('test_wf_project_write_files') as tmp_app_dir:
-        shutil.copytree(test_app_dir, tmp_app_dir, dirs_exist_ok=True)
-
-        # When
-        is_wf_project = wf_project.is_project(tmp_app_dir)
-
-        # Then
-        assert is_wf_project is True
-
-
-def test_wf_project_can_create_project_does_not_work_on_project_with_ui_json():
-    with tempfile.TemporaryDirectory('test_wf_project_write_files') as tmp_app_dir:
-        shutil.copytree(testobsoleteapp, tmp_app_dir, dirs_exist_ok=True)
-        os.remove(os.path.join(tmp_app_dir, 'main.py'))
-
-        # When
-        is_wf_project = wf_project.is_project(tmp_app_dir)
-        can_create_wf_project = wf_project.can_create_project(tmp_app_dir)
-
-        # Then
-        assert is_wf_project is False
-        assert can_create_wf_project is False
-
-
 def test_wf_project_can_create_project_does_not_work_on_project_with_a_directory():
     with tempfile.TemporaryDirectory('test_wf_project_can_create_project') as tmp_app_dir:
         io.open(os.path.join(tmp_app_dir, 'file'), 'w').close()
diff --git a/tests/backend/testobsoleteapp/main.py b/tests/backend/testobsoleteapp/main.py
deleted file mode 100644
index f880abb72..000000000
--- a/tests/backend/testobsoleteapp/main.py
+++ /dev/null
@@ -1,8 +0,0 @@
-import writer as wf
-
-# STATE INIT
-
-
-initial_state = wf.init_state({
-    "counter": 0,
-})
diff --git a/tests/backend/testobsoleteapp/ui.json b/tests/backend/testobsoleteapp/ui.json
deleted file mode 100644
index 0b0945062..000000000
--- a/tests/backend/testobsoleteapp/ui.json
+++ /dev/null
@@ -1,2932 +0,0 @@
-{
-    "metadata": {
-        "writer_version": "0.6.0rc4"
-    },
-    "components": {
-        "root": {
-            "id": "root",
-            "type": "root",
-            "content": {
-                "appName": "My App"
-            },
-            "isCodeManaged": false,
-            "position": 0
-        },
-        "bb4d0e86-619e-4367-a180-be28ab6059f4": {
-            "id": "bb4d0e86-619e-4367-a180-be28ab6059f4",
-            "type": "page",
-            "content": {
-                "pageMode": "",
-                "key": "main"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "root"
-        },
-        "84378aea-b64c-49a3-9539-f854532279ee": {
-            "id": "84378aea-b64c-49a3-9539-f854532279ee",
-            "type": "header",
-            "content": {
-                "text": "TEST APP",
-                "emptinessColor": "#ffffff"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "bb4d0e86-619e-4367-a180-be28ab6059f4"
-        },
-        "92a2c0c8-7ab4-4865-b7eb-ed437408c8f5": {
-            "id": "92a2c0c8-7ab4-4865-b7eb-ed437408c8f5",
-            "type": "columns",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "bb4d0e86-619e-4367-a180-be28ab6059f4"
-        },
-        "d1e01ce1-fab1-4a6e-91a1-1f45f9e57aa5": {
-            "id": "d1e01ce1-fab1-4a6e-91a1-1f45f9e57aa5",
-            "type": "column",
-            "content": {
-                "width": "1",
-                "isCollapsible": "",
-                "title": "",
-                "isSticky": "yes"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "92a2c0c8-7ab4-4865-b7eb-ed437408c8f5"
-        },
-        "0569937e-c72c-4fb9-820e-2ae56e17bcc0": {
-            "id": "0569937e-c72c-4fb9-820e-2ae56e17bcc0",
-            "type": "column",
-            "content": {
-                "width": "1.61"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "92a2c0c8-7ab4-4865-b7eb-ed437408c8f5"
-        },
-        "9c30af6d-4ee5-4782-9169-0f361d67fa76": {
-            "id": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "type": "section",
-            "content": {
-                "title": ""
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "d1e01ce1-fab1-4a6e-91a1-1f45f9e57aa5"
-        },
-        "26f412c4-1016-488e-9777-512a4f748c82": {
-            "id": "26f412c4-1016-488e-9777-512a4f748c82",
-            "type": "text",
-            "content": {
-                "text": "@{story.text}"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "18f73ad0-3961-4aed-9dc1-5ed54d939fdf"
-        },
-        "ee919cd6-8153-4f34-8c6a-bfc1153df360": {
-            "id": "ee919cd6-8153-4f34-8c6a-bfc1153df360",
-            "type": "tabs",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "0569937e-c72c-4fb9-820e-2ae56e17bcc0"
-        },
-        "c6392876-7cfd-4680-8725-b04f43ff294f": {
-            "id": "c6392876-7cfd-4680-8725-b04f43ff294f",
-            "type": "tab",
-            "content": {
-                "name": "Data and Charts"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "ee919cd6-8153-4f34-8c6a-bfc1153df360"
-        },
-        "da00a61f-0ee2-434e-acd6-228d32eae5c6": {
-            "id": "da00a61f-0ee2-434e-acd6-228d32eae5c6",
-            "type": "tab",
-            "content": {
-                "name": "Repeater"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "ee919cd6-8153-4f34-8c6a-bfc1153df360"
-        },
-        "d0298b1c-7c64-4b58-a018-db97dd49675b": {
-            "id": "d0298b1c-7c64-4b58-a018-db97dd49675b",
-            "type": "separator",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 3,
-            "parentId": "c6392876-7cfd-4680-8725-b04f43ff294f"
-        },
-        "f1d6bc8e-a780-4ae5-8b7c-082fe8a6867d": {
-            "id": "f1d6bc8e-a780-4ae5-8b7c-082fe8a6867d",
-            "type": "dataframe",
-            "content": {
-                "dataframe": "@{main_df}",
-                "dataframeBackgroundColor": "#f5fdff",
-                "dataframeHeaderRowBackgroundColor": "#d0e6eb",
-                "showIndex": "",
-                "enableSearch": ""
-            },
-            "isCodeManaged": false,
-            "position": 4,
-            "parentId": "c6392876-7cfd-4680-8725-b04f43ff294f"
-        },
-        "fbad9feb-5c88-4425-bb17-0d138286a875": {
-            "id": "fbad9feb-5c88-4425-bb17-0d138286a875",
-            "type": "sidebar",
-            "content": {
-                "startCollapsed": "yes"
-            },
-            "isCodeManaged": false,
-            "position": -2,
-            "parentId": "bb4d0e86-619e-4367-a180-be28ab6059f4"
-        },
-        "7e625201-20c2-4b05-951c-d825de28b216": {
-            "id": "7e625201-20c2-4b05-951c-d825de28b216",
-            "type": "section",
-            "content": {
-                "title": "Filter data"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "fbad9feb-5c88-4425-bb17-0d138286a875"
-        },
-        "385247e5-5c89-4352-a598-b8da81146a5a": {
-            "id": "385247e5-5c89-4352-a598-b8da81146a5a",
-            "type": "sliderinput",
-            "content": {
-                "label": "Minimum weight",
-                "minValue": "300",
-                "maxValue": "600",
-                "stepSize": "0.1"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "7e625201-20c2-4b05-951c-d825de28b216",
-            "handlers": {
-                "wf-number-change": "update"
-            },
-            "binding": {
-                "eventType": "wf-number-change",
-                "stateRef": "filter.min_weight"
-            }
-        },
-        "10c156df-7464-4889-8b69-1b54cb1ee80a": {
-            "id": "10c156df-7464-4889-8b69-1b54cb1ee80a",
-            "type": "sliderinput",
-            "content": {
-                "label": "Minimum length",
-                "minValue": "25",
-                "maxValue": "35",
-                "stepSize": "1"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "7e625201-20c2-4b05-951c-d825de28b216",
-            "handlers": {
-                "wf-number-change": "update"
-            },
-            "binding": {
-                "eventType": "wf-number-change",
-                "stateRef": "filter.min_length"
-            }
-        },
-        "70d82458-a08f-4005-8f96-dc8d3ba92fad": {
-            "id": "70d82458-a08f-4005-8f96-dc8d3ba92fad",
-            "type": "section",
-            "content": {
-                "title": "About this app"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "fbad9feb-5c88-4425-bb17-0d138286a875"
-        },
-        "12e11005-3b5e-4bd8-9a8c-fc7b8cb757d0": {
-            "id": "12e11005-3b5e-4bd8-9a8c-fc7b8cb757d0",
-            "type": "text",
-            "content": {
-                "text": "This app is meant to serve as a lighthearted introduction to Writer Framework. It's not a comprehensive demonstration of its capabilities."
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "70d82458-a08f-4005-8f96-dc8d3ba92fad"
-        },
-        "18f73ad0-3961-4aed-9dc1-5ed54d939fdf": {
-            "id": "18f73ad0-3961-4aed-9dc1-5ed54d939fdf",
-            "type": "tab",
-            "content": {
-                "name": "Download"
-            },
-            "isCodeManaged": false,
-            "position": 3,
-            "parentId": "ee919cd6-8153-4f34-8c6a-bfc1153df360"
-        },
-        "7b710d37-1c68-4d06-a65a-e6596ccc826a": {
-            "id": "7b710d37-1c68-4d06-a65a-e6596ccc826a",
-            "type": "text",
-            "content": {
-                "text": "In the bustling city, a hidden group of hacker pigeons works together to break into computer systems and create advanced data apps. These smart birds have different roles, like leaders, developers, security experts, and designers, and they use their skills to complete various tech challenges."
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76"
-        },
-        "b9cb10e5-1ead-448b-afcc-909e23afb72a": {
-            "id": "b9cb10e5-1ead-448b-afcc-909e23afb72a",
-            "type": "columns",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "c6392876-7cfd-4680-8725-b04f43ff294f"
-        },
-        "31c1b0d5-bfb6-4304-82bd-1687d492f0a2": {
-            "id": "31c1b0d5-bfb6-4304-82bd-1687d492f0a2",
-            "type": "heading",
-            "content": {
-                "text": "Pigeon Power: Clever Birds Tackle Data Apps",
-                "alignment": "right",
-                "primaryTextColor": "#2fa0c6"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76"
-        },
-        "804e15bf-11a7-463d-8082-f46ea3acac1b": {
-            "id": "804e15bf-11a7-463d-8082-f46ea3acac1b",
-            "type": "separator",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76"
-        },
-        "3cc9c5e9-6c77-401d-ab82-7805d9df760c": {
-            "id": "3cc9c5e9-6c77-401d-ab82-7805d9df760c",
-            "type": "tab",
-            "content": {
-                "name": "Layout"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "ee919cd6-8153-4f34-8c6a-bfc1153df360"
-        },
-        "fb22acfc-cdb5-44b6-9e97-76c3a51a8fff": {
-            "id": "fb22acfc-cdb5-44b6-9e97-76c3a51a8fff",
-            "type": "columns",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "3cc9c5e9-6c77-401d-ab82-7805d9df760c"
-        },
-        "25dda22d-1b18-4584-aa99-aaae9f3b8edf": {
-            "id": "25dda22d-1b18-4584-aa99-aaae9f3b8edf",
-            "type": "column",
-            "content": {
-                "width": "1",
-                "contentVAlign": ""
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "fb22acfc-cdb5-44b6-9e97-76c3a51a8fff"
-        },
-        "b1ee642e-f2e7-453b-a6ef-3d96eea37140": {
-            "id": "b1ee642e-f2e7-453b-a6ef-3d96eea37140",
-            "type": "column",
-            "content": {
-                "title": "HTML Element",
-                "width": "1",
-                "isCollapsible": "yes",
-                "startCollapsed": ""
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "fb22acfc-cdb5-44b6-9e97-76c3a51a8fff"
-        },
-        "d1f43b6f-5b0f-4c8f-95bf-a92dd7ed723b": {
-            "id": "d1f43b6f-5b0f-4c8f-95bf-a92dd7ed723b",
-            "type": "text",
-            "content": {
-                "text": "\n## Role Distribution\n\nThe hacker pigeons dataframe consists of five distinct roles:\n\n1. Leader\n2. Developer\n3. Data Expert\n4. Designer\n5. Security Expert\n\nThe role distribution among the hacker pigeons can be analyzed to understand the composition of the secret society and the proportions of various roles.\n\n## Length and Weight Statistics\n\n- The length and weight of hacker pigeons in the dataframe can be used to gain insights into their physical characteristics.\n- Examining the minimum, maximum, and average values for length and weight can provide an overview of the size variation among the hacker pigeons.\n- By grouping the data by role, we can analyze the differences in length and weight for each role and identify any patterns or trends.",
-                "useMarkdown": "yes"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "25dda22d-1b18-4584-aa99-aaae9f3b8edf"
-        },
-        "71766c0c-e1e5-4675-9dd0-3aa2627773a0": {
-            "id": "71766c0c-e1e5-4675-9dd0-3aa2627773a0",
-            "type": "html",
-            "content": {
-                "styles": "{\n  \"padding\": \"16px\",\n  \"margin\": \"24px\",\n  \"min-height\": \"64px\",\n  \"min-width\": \"64px\",\n  \"border-radius\": \"8px\",\n  \"transform\": \"rotate(-3deg)\",\n  \"box-shadow\": \"0 4px 16px -8px black\"\n}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "b1ee642e-f2e7-453b-a6ef-3d96eea37140"
-        },
-        "c73602a6-453d-4ccf-b8e3-b1774ab4ff17": {
-            "id": "c73602a6-453d-4ccf-b8e3-b1774ab4ff17",
-            "type": "text",
-            "content": {
-                "text": "Use the HTML Element component when you need additional control."
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "71766c0c-e1e5-4675-9dd0-3aa2627773a0"
-        },
-        "573f095f-94a7-43e4-a94e-b2f69439a164": {
-            "id": "573f095f-94a7-43e4-a94e-b2f69439a164",
-            "type": "separator",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "fb22acfc-cdb5-44b6-9e97-76c3a51a8fff"
-        },
-        "feedc43f-a7cf-499b-962e-8170f1032b69": {
-            "id": "feedc43f-a7cf-499b-962e-8170f1032b69",
-            "type": "text",
-            "content": {
-                "text": "You can use Markdown, as shown below."
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "25dda22d-1b18-4584-aa99-aaae9f3b8edf"
-        },
-        "1ee57415-557d-4529-be99-36f4d91fdf69": {
-            "id": "1ee57415-557d-4529-be99-36f4d91fdf69",
-            "type": "separator",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "25dda22d-1b18-4584-aa99-aaae9f3b8edf"
-        },
-        "ec5bc32e-1456-4abd-8d3e-97c640e32339": {
-            "id": "ec5bc32e-1456-4abd-8d3e-97c640e32339",
-            "type": "section",
-            "content": {
-                "title": "",
-                "containerBackgroundColor": "#ebfcff"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "3cc9c5e9-6c77-401d-ab82-7805d9df760c"
-        },
-        "919b0d26-ea9b-4364-b5af-865236b3fc3a": {
-            "id": "919b0d26-ea9b-4364-b5af-865236b3fc3a",
-            "type": "horizontalstack",
-            "content": {
-                "contentHAlign": "start"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "ec5bc32e-1456-4abd-8d3e-97c640e32339"
-        },
-        "0cf677a9-34f6-461a-a531-5578939400c7": {
-            "id": "0cf677a9-34f6-461a-a531-5578939400c7",
-            "type": "text",
-            "content": {
-                "text": "Used to stack things horizontally."
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "919b0d26-ea9b-4364-b5af-865236b3fc3a"
-        },
-        "a36b75bc-58e6-48ba-bdef-0824e6b21e8d": {
-            "id": "a36b75bc-58e6-48ba-bdef-0824e6b21e8d",
-            "type": "html",
-            "content": {
-                "styles": "{\n  \"padding\": \"16px\",\n  \"margin\": \"24px\",\n  \"min-height\": \"64px\",\n  \"min-width\": \"64px\",\n  \"border-radius\": \"8px\",\n  \"transform\": \"rotate(3deg)\",\n  \"box-shadow\": \"0 4px 16px -8px black\"\n}"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "b1ee642e-f2e7-453b-a6ef-3d96eea37140"
-        },
-        "5da5e007-d60a-4313-9d21-885deae7b37d": {
-            "id": "5da5e007-d60a-4313-9d21-885deae7b37d",
-            "type": "text",
-            "content": {
-                "text": "You can put other Writer Framework components inside HTML Elements."
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "a36b75bc-58e6-48ba-bdef-0824e6b21e8d"
-        },
-        "85120b55-69c6-4b50-853a-bbbf73ff8121": {
-            "id": "85120b55-69c6-4b50-853a-bbbf73ff8121",
-            "type": "tab",
-            "content": {
-                "name": "Timer"
-            },
-            "isCodeManaged": false,
-            "position": 4,
-            "parentId": "ee919cd6-8153-4f34-8c6a-bfc1153df360"
-        },
-        "db4c66d6-1eb7-44d3-a2d4-65d0b3e5cf12": {
-            "id": "db4c66d6-1eb7-44d3-a2d4-65d0b3e5cf12",
-            "type": "dataframe",
-            "content": {
-                "dataframe": "@{random_df}",
-                "fontStyle": "monospace"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "85120b55-69c6-4b50-853a-bbbf73ff8121"
-        },
-        "09ddb2da-6fa3-4157-8da3-4d5d44a6a58d": {
-            "id": "09ddb2da-6fa3-4157-8da3-4d5d44a6a58d",
-            "type": "horizontalstack",
-            "content": {
-                "contentHAlign": "start"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "85120b55-69c6-4b50-853a-bbbf73ff8121"
-        },
-        "50a05488-d6fe-47bf-b681-36870d04f5d7": {
-            "id": "50a05488-d6fe-47bf-b681-36870d04f5d7",
-            "type": "timer",
-            "content": {
-                "intervalMs": "500",
-                "isActive": "no"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "09ddb2da-6fa3-4157-8da3-4d5d44a6a58d",
-            "handlers": {
-                "wf-tick": "handle_timer_tick"
-            }
-        },
-        "e296866a-75d2-4677-b55d-3c1456113b89": {
-            "id": "e296866a-75d2-4677-b55d-3c1456113b89",
-            "type": "text",
-            "content": {
-                "text": "Refreshing automatically using a timer."
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "09ddb2da-6fa3-4157-8da3-4d5d44a6a58d"
-        },
-        "fdf38e46-c01e-4a93-94d5-e187f9e4c823": {
-            "id": "fdf38e46-c01e-4a93-94d5-e187f9e4c823",
-            "type": "text",
-            "content": {
-                "text": "_pgcf_ stands for \"Pigeon Coefficient\" and is a meaningless, randomly-generated value.",
-                "useMarkdown": "yes",
-                "primaryTextColor": "#8a8a8a"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "85120b55-69c6-4b50-853a-bbbf73ff8121"
-        },
-        "c921816d-6d45-4ce3-9c18-2c78ff850e0e": {
-            "id": "c921816d-6d45-4ce3-9c18-2c78ff850e0e",
-            "type": "html",
-            "content": {
-                "element": "img",
-                "styles": "{\n  \"filter\": \"hue-rotate(calc(80deg + @{hue_rotation}deg))\"\n}",
-                "attrs": "{ \"src\": \"static/pigeon1.jpg\"}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "71766c0c-e1e5-4675-9dd0-3aa2627773a0"
-        },
-        "c684f61e-0c79-4cb1-af9f-46c9cab5dfea": {
-            "id": "c684f61e-0c79-4cb1-af9f-46c9cab5dfea",
-            "type": "html",
-            "content": {
-                "element": "img",
-                "styles": "{\n  \"filter\": \"hue-rotate(calc(140deg + @{hue_rotation}deg))\"\n}",
-                "attrs": "{ \"src\": \"static/pigeon1.jpg\"}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "a36b75bc-58e6-48ba-bdef-0824e6b21e8d"
-        },
-        "ee82e035-cfb2-4d00-95ce-ccbb9eb2dbb9": {
-            "id": "ee82e035-cfb2-4d00-95ce-ccbb9eb2dbb9",
-            "type": "sliderinput",
-            "content": {
-                "label": "Hue rotation",
-                "minValue": "0",
-                "maxValue": "360",
-                "stepSize": "1"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "b1ee642e-f2e7-453b-a6ef-3d96eea37140",
-            "binding": {
-                "eventType": "wf-number-change",
-                "stateRef": "hue_rotation"
-            }
-        },
-        "c9bb4720-d07a-4fd8-bc53-5bda8dc64046": {
-            "id": "c9bb4720-d07a-4fd8-bc53-5bda8dc64046",
-            "type": "text",
-            "content": {
-                "text": "As shown above, you can use _HTML Element_ components together with state references.",
-                "useMarkdown": "yes"
-            },
-            "isCodeManaged": false,
-            "position": 3,
-            "parentId": "b1ee642e-f2e7-453b-a6ef-3d96eea37140"
-        },
-        "e77448dd-4e7c-451c-8f31-4edde9bbf9f5": {
-            "id": "e77448dd-4e7c-451c-8f31-4edde9bbf9f5",
-            "type": "text",
-            "content": {
-                "text": "Horizontal Stack"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "919b0d26-ea9b-4364-b5af-865236b3fc3a"
-        },
-        "b4dc3e9c-ce01-4690-8e0e-e4357dbe70ad": {
-            "id": "b4dc3e9c-ce01-4690-8e0e-e4357dbe70ad",
-            "type": "separator",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "919b0d26-ea9b-4364-b5af-865236b3fc3a"
-        },
-        "6a490318-239e-4fe9-a56b-f0f33d628c87": {
-            "id": "6a490318-239e-4fe9-a56b-f0f33d628c87",
-            "type": "column",
-            "content": {
-                "width": "1"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "b9cb10e5-1ead-448b-afcc-909e23afb72a"
-        },
-        "888b1eb9-609c-4205-bbda-262999d197ff": {
-            "id": "888b1eb9-609c-4205-bbda-262999d197ff",
-            "type": "separator",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "b9cb10e5-1ead-448b-afcc-909e23afb72a"
-        },
-        "de70a15a-2ff6-42d2-ab12-c7fc9c3ed4e1": {
-            "id": "de70a15a-2ff6-42d2-ab12-c7fc9c3ed4e1",
-            "type": "heading",
-            "content": {
-                "text": "Highlighted Members \ud83c\udfc6",
-                "headingType": "h1",
-                "alignment": "center"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "da00a61f-0ee2-434e-acd6-228d32eae5c6"
-        },
-        "e72f2050-3156-4fbf-9961-9a31945425fb": {
-            "id": "e72f2050-3156-4fbf-9961-9a31945425fb",
-            "type": "heading",
-            "content": {
-                "text": "The Story",
-                "headingType": "h1"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "18f73ad0-3961-4aed-9dc1-5ed54d939fdf"
-        },
-        "2f4969e2-e248-43ed-9e63-222fc35250e2": {
-            "id": "2f4969e2-e248-43ed-9e63-222fc35250e2",
-            "type": "columns",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "da00a61f-0ee2-434e-acd6-228d32eae5c6"
-        },
-        "f46cd60d-f01e-4390-a161-4353006b72a1": {
-            "id": "f46cd60d-f01e-4390-a161-4353006b72a1",
-            "type": "repeater",
-            "content": {
-                "repeaterObject": "@{highlighted_members_dict}",
-                "keyVariable": "itemId",
-                "valueVariable": "item"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "2f4969e2-e248-43ed-9e63-222fc35250e2"
-        },
-        "0dd29423-3867-478a-997e-eeaafb6b811e": {
-            "id": "0dd29423-3867-478a-997e-eeaafb6b811e",
-            "type": "column",
-            "content": {
-                "width": "1"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "f46cd60d-f01e-4390-a161-4353006b72a1"
-        },
-        "2d326b15-da90-496e-86e8-7fdd4bcbe822": {
-            "id": "2d326b15-da90-496e-86e8-7fdd4bcbe822",
-            "type": "section",
-            "content": {
-                "title": "@{item.name}",
-                "containerBackgroundColor": "#eff4f6"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "0dd29423-3867-478a-997e-eeaafb6b811e"
-        },
-        "7ea0d29a-5dca-4b6c-a067-322ccaee5032": {
-            "id": "7ea0d29a-5dca-4b6c-a067-322ccaee5032",
-            "type": "text",
-            "content": {
-                "text": "You can use a _Repeater_ component to repeat components, based on a dictionary.",
-                "useMarkdown": "yes"
-            },
-            "isCodeManaged": false,
-            "position": 4,
-            "parentId": "2d326b15-da90-496e-86e8-7fdd4bcbe822"
-        },
-        "cd611ce2-f594-4b55-9932-d48e657b2e31": {
-            "id": "cd611ce2-f594-4b55-9932-d48e657b2e31",
-            "type": "text",
-            "content": {
-                "text": "**Role:** @{item.role}\n",
-                "useMarkdown": "yes"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "2d326b15-da90-496e-86e8-7fdd4bcbe822"
-        },
-        "9d6ee245-b8f7-4391-9934-89598b7fa9f8": {
-            "id": "9d6ee245-b8f7-4391-9934-89598b7fa9f8",
-            "type": "separator",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "2d326b15-da90-496e-86e8-7fdd4bcbe822"
-        },
-        "01c33c6e-3788-4b5d-b7aa-2addaa7b503f": {
-            "id": "01c33c6e-3788-4b5d-b7aa-2addaa7b503f",
-            "type": "text",
-            "content": {
-                "text": "The following Hacker Pigeons have made an impressive contribution this month.",
-                "alignment": "center"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "da00a61f-0ee2-434e-acd6-228d32eae5c6"
-        },
-        "e0e2391e-7bab-4c68-ad92-841942cb12fb": {
-            "id": "e0e2391e-7bab-4c68-ad92-841942cb12fb",
-            "type": "text",
-            "content": {
-                "text": "The ability @{item.name} demonstrated in @{item.specialty} has earned them this recognition.",
-                "useMarkdown": "yes"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "2d326b15-da90-496e-86e8-7fdd4bcbe822"
-        },
-        "4ef4655b-45ca-495c-9f8d-fa1d7ae3565e": {
-            "id": "4ef4655b-45ca-495c-9f8d-fa1d7ae3565e",
-            "type": "separator",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 3,
-            "parentId": "2d326b15-da90-496e-86e8-7fdd4bcbe822"
-        },
-        "f67c98aa-3a7b-4f40-ac1f-0dd4aa06e22d": {
-            "id": "f67c98aa-3a7b-4f40-ac1f-0dd4aa06e22d",
-            "type": "plotlygraph",
-            "content": {
-                "spec": "@{scatter_chart}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "6a490318-239e-4fe9-a56b-f0f33d628c87",
-            "handlers": {}
-        },
-        "6d895924-e808-44aa-a119-f4e2d7f394f3": {
-            "id": "6d895924-e808-44aa-a119-f4e2d7f394f3",
-            "type": "column",
-            "content": {
-                "width": "1",
-                "not-a-real-field": "not-a-real-value",
-                "contentHAlign": "",
-                "contentVAlign": ""
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "b9cb10e5-1ead-448b-afcc-909e23afb72a"
-        },
-        "70bd9ea8-baa9-4e1d-bce5-deee6a3c5440": {
-            "id": "70bd9ea8-baa9-4e1d-bce5-deee6a3c5440",
-            "type": "plotlygraph",
-            "content": {
-                "spec": "@{role_chart}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "6d895924-e808-44aa-a119-f4e2d7f394f3",
-            "handlers": {}
-        },
-        "8c8dd54f-af2c-4d6d-9603-dfea11cf326b": {
-            "id": "8c8dd54f-af2c-4d6d-9603-dfea11cf326b",
-            "type": "metric",
-            "content": {
-                "metricValue": "@{metrics.average_weight}gr",
-                "name": "Average weight",
-                "note": "@{metrics.average_weight_note}",
-                "description": ""
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "feb9ca67-6670-483d-a895-22b031426a13",
-            "handlers": {}
-        },
-        "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f": {
-            "id": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
-            "type": "columns",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "c6392876-7cfd-4680-8725-b04f43ff294f",
-            "handlers": {}
-        },
-        "feb9ca67-6670-483d-a895-22b031426a13": {
-            "id": "feb9ca67-6670-483d-a895-22b031426a13",
-            "type": "column",
-            "content": {
-                "width": "1"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
-            "handlers": {}
-        },
-        "3b325899-e560-40ea-ba54-9c55967af1e3": {
-            "id": "3b325899-e560-40ea-ba54-9c55967af1e3",
-            "type": "column",
-            "content": {
-                "width": "1"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
-            "handlers": {}
-        },
-        "a0cd99db-0cbe-40ca-b9cb-b1670ec60dd8": {
-            "id": "a0cd99db-0cbe-40ca-b9cb-b1670ec60dd8",
-            "type": "column",
-            "content": {
-                "width": "1"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
-            "handlers": {}
-        },
-        "5dcd137b-76bd-4a5f-ae5c-5b629035500e": {
-            "id": "5dcd137b-76bd-4a5f-ae5c-5b629035500e",
-            "type": "column",
-            "content": {
-                "width": "1"
-            },
-            "isCodeManaged": false,
-            "position": 3,
-            "parentId": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
-            "handlers": {}
-        },
-        "6a81f847-4d1d-4110-9cc1-12c716150e66": {
-            "id": "6a81f847-4d1d-4110-9cc1-12c716150e66",
-            "type": "metric",
-            "content": {
-                "metricValue": "@{metrics.average_length}cm",
-                "name": "Average length",
-                "note": "@{metrics.average_length_note}",
-                "description": ""
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "3b325899-e560-40ea-ba54-9c55967af1e3",
-            "handlers": {}
-        },
-        "8e54e9d2-a7c8-4f74-897f-fa5791cd82da": {
-            "id": "8e54e9d2-a7c8-4f74-897f-fa5791cd82da",
-            "type": "metric",
-            "content": {
-                "metricValue": "@{metrics.average_bmi}",
-                "name": "Average BMI",
-                "note": "@{metrics.average_bmi_note}",
-                "description": ""
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "a0cd99db-0cbe-40ca-b9cb-b1670ec60dd8",
-            "handlers": {}
-        },
-        "07f50628-4679-48a8-9a5d-07dcaf171afb": {
-            "id": "07f50628-4679-48a8-9a5d-07dcaf171afb",
-            "type": "metric",
-            "content": {
-                "metricValue": "@{metrics.diversity}",
-                "name": "Diversity Index",
-                "description": "",
-                "note": "@{metrics.diversity_note}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "5dcd137b-76bd-4a5f-ae5c-5b629035500e",
-            "handlers": {}
-        },
-        "4cca0893-5ad7-4152-b805-5c87babc4dee": {
-            "id": "4cca0893-5ad7-4152-b805-5c87babc4dee",
-            "type": "separator",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "c6392876-7cfd-4680-8725-b04f43ff294f",
-            "handlers": {}
-        },
-        "b5915be5-774d-441a-a616-9f85e8e85c8e": {
-            "id": "b5915be5-774d-441a-a616-9f85e8e85c8e",
-            "type": "button",
-            "content": {
-                "text": "Test context"
-            },
-            "isCodeManaged": false,
-            "position": 5,
-            "parentId": "2d326b15-da90-496e-86e8-7fdd4bcbe822",
-            "handlers": {
-                "click": "test_context"
-            }
-        },
-        "6014485e-2418-42bd-a111-8683a8b87de4": {
-            "id": "6014485e-2418-42bd-a111-8683a8b87de4",
-            "type": "text",
-            "content": {
-                "text": "Selected info: @{highlighted_context}"
-            },
-            "isCodeManaged": false,
-            "position": 6,
-            "parentId": "2d326b15-da90-496e-86e8-7fdd4bcbe822",
-            "handlers": {}
-        },
-        "03796247-dec4-4671-85c9-16559789e013": {
-            "id": "03796247-dec4-4671-85c9-16559789e013",
-            "type": "page",
-            "content": {
-                "key": "emptyPage@{notaref}"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "root",
-            "handlers": {}
-        },
-        "7730df5b-8731-4123-bacc-898e7347b124": {
-            "id": "7730df5b-8731-4123-bacc-898e7347b124",
-            "type": "page",
-            "content": {
-                "key": "inputTest"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "root",
-            "handlers": {}
-        },
-        "6010765e-9ac3-4570-84bf-913ae404e03a": {
-            "id": "6010765e-9ac3-4570-84bf-913ae404e03a",
-            "type": "section",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "7730df5b-8731-4123-bacc-898e7347b124"
-        },
-        "9bd98acc-b429-42da-afc0-5798089d5d59": {
-            "id": "9bd98acc-b429-42da-afc0-5798089d5d59",
-            "type": "textinput",
-            "content": {
-                "label": "Name"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "6010765e-9ac3-4570-84bf-913ae404e03a",
-            "handlers": {
-                "wf-change": "payload_inspector"
-            },
-            "binding": {
-                "eventType": "wf-change",
-                "stateRef": "b.name"
-            }
-        },
-        "d00db022-c880-46d7-9c14-4b62012ab747": {
-            "id": "d00db022-c880-46d7-9c14-4b62012ab747",
-            "type": "textareainput",
-            "content": {
-                "label": "Summary",
-                "rows": "5"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "6010765e-9ac3-4570-84bf-913ae404e03a",
-            "handlers": {
-                "wf-change": "payload_inspector"
-            },
-            "binding": {
-                "eventType": "wf-change",
-                "stateRef": "b.summary"
-            }
-        },
-        "c282ad31-2487-4296-a944-508c167c43be": {
-            "id": "c282ad31-2487-4296-a944-508c167c43be",
-            "type": "numberinput",
-            "content": {
-                "label": "Number of pets"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "6010765e-9ac3-4570-84bf-913ae404e03a",
-            "handlers": {
-                "wf-number-change": "payload_inspector"
-            },
-            "binding": {
-                "eventType": "wf-number-change",
-                "stateRef": "b.pet_count"
-            }
-        },
-        "362f4557-4643-4e93-b3ae-28607fceb2df": {
-            "id": "362f4557-4643-4e93-b3ae-28607fceb2df",
-            "type": "sliderinput",
-            "content": {
-                "label": "Review score",
-                "minValue": "0",
-                "maxValue": "100",
-                "stepSize": "1"
-            },
-            "isCodeManaged": false,
-            "position": 7,
-            "parentId": "6010765e-9ac3-4570-84bf-913ae404e03a",
-            "handlers": {
-                "wf-number-change": "payload_inspector"
-            },
-            "binding": {
-                "eventType": "wf-number-change",
-                "stateRef": "b.review_score"
-            }
-        },
-        "05f71732-4161-42d5-93f7-d49f66d82082": {
-            "id": "05f71732-4161-42d5-93f7-d49f66d82082",
-            "type": "dateinput",
-            "content": {
-                "label": "Join date"
-            },
-            "isCodeManaged": false,
-            "position": 8,
-            "parentId": "6010765e-9ac3-4570-84bf-913ae404e03a",
-            "handlers": {
-                "wf-date-change": "payload_inspector"
-            },
-            "binding": {
-                "eventType": "wf-date-change",
-                "stateRef": "b.join_date"
-            }
-        },
-        "d2269aeb-c84e-4075-8679-c6f168fecfac": {
-            "id": "d2269aeb-c84e-4075-8679-c6f168fecfac",
-            "type": "radioinput",
-            "content": {
-                "label": "Default radio"
-            },
-            "isCodeManaged": false,
-            "position": 9,
-            "parentId": "6010765e-9ac3-4570-84bf-913ae404e03a",
-            "handlers": {
-                "wf-option-change": "payload_inspector"
-            },
-            "binding": {
-                "eventType": "wf-option-change",
-                "stateRef": "b.default_radio"
-            }
-        },
-        "784288ff-80ec-4170-a3de-53e461ca1640": {
-            "id": "784288ff-80ec-4170-a3de-53e461ca1640",
-            "type": "checkboxinput",
-            "content": {
-                "label": "Default checkbox"
-            },
-            "isCodeManaged": false,
-            "position": 5,
-            "parentId": "6010765e-9ac3-4570-84bf-913ae404e03a",
-            "handlers": {
-                "wf-options-change": "payload_inspector"
-            },
-            "binding": {
-                "eventType": "wf-options-change",
-                "stateRef": "b.default_checkbox"
-            }
-        },
-        "b48bfd8f-4db7-400c-8bfc-d575ae164a5a": {
-            "id": "b48bfd8f-4db7-400c-8bfc-d575ae164a5a",
-            "type": "dropdowninput",
-            "content": {
-                "label": "Default dropdown"
-            },
-            "isCodeManaged": false,
-            "position": 10,
-            "parentId": "6010765e-9ac3-4570-84bf-913ae404e03a",
-            "handlers": {
-                "wf-option-change": "payload_inspector"
-            },
-            "binding": {
-                "eventType": "wf-option-change",
-                "stateRef": "b.default_dropdown"
-            }
-        },
-        "e4cc004d-8183-4482-8159-1c8ac0318b26": {
-            "id": "e4cc004d-8183-4482-8159-1c8ac0318b26",
-            "type": "fileinput",
-            "content": {
-                "label": "Files",
-                "allowMultipleFiles": "yes"
-            },
-            "isCodeManaged": false,
-            "position": 11,
-            "parentId": "6010765e-9ac3-4570-84bf-913ae404e03a",
-            "handlers": {
-                "wf-file-change": "payload_inspector"
-            },
-            "binding": {
-                "eventType": "wf-file-change",
-                "stateRef": "b.files"
-            }
-        },
-        "9b09d964-da68-4d47-851a-31f070ae1f2f": {
-            "id": "9b09d964-da68-4d47-851a-31f070ae1f2f",
-            "type": "radioinput",
-            "content": {
-                "label": "Language",
-                "options": "{\n  \"en\": \"English\",\n  \"sp\": \"Spanish\",\n  \"pl\": \"Polish\"\n}"
-            },
-            "isCodeManaged": false,
-            "position": 3,
-            "parentId": "6010765e-9ac3-4570-84bf-913ae404e03a",
-            "handlers": {
-                "wf-option-change": "payload_inspector"
-            },
-            "binding": {
-                "eventType": "wf-option-change",
-                "stateRef": "b.language"
-            }
-        },
-        "2ab19af7-1efa-4012-af35-f01c3d39a409": {
-            "id": "2ab19af7-1efa-4012-af35-f01c3d39a409",
-            "type": "section",
-            "content": {
-                "title": "Payload"
-            },
-            "isCodeManaged": false,
-            "position": 3,
-            "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
-            "handlers": {}
-        },
-        "69e40d75-af2f-4015-9bce-6311587d796f": {
-            "id": "69e40d75-af2f-4015-9bce-6311587d796f",
-            "type": "text",
-            "content": {
-                "text": "@{inspected_payload}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "2ab19af7-1efa-4012-af35-f01c3d39a409",
-            "handlers": {}
-        },
-        "c76ac5ff-8459-4421-9be2-faead4a17458": {
-            "id": "c76ac5ff-8459-4421-9be2-faead4a17458",
-            "type": "heading",
-            "content": {
-                "text": "DO NOT CHANGE FORM BELOW"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
-            "handlers": {}
-        },
-        "2e10d41b-83b6-422b-a2c2-7e19b1834d45": {
-            "id": "2e10d41b-83b6-422b-a2c2-7e19b1834d45",
-            "type": "separator",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
-            "handlers": {}
-        },
-        "35986d56-3a1a-4ded-bb5c-b60c2046756f": {
-            "id": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "type": "page",
-            "content": {
-                "key": "content"
-            },
-            "isCodeManaged": false,
-            "position": 3,
-            "parentId": "root",
-            "handlers": {}
-        },
-        "3eb28922-ef5c-47de-88aa-d100c503a2f5": {
-            "id": "3eb28922-ef5c-47de-88aa-d100c503a2f5",
-            "type": "section",
-            "content": {
-                "title": "Bindings"
-            },
-            "isCodeManaged": false,
-            "position": 5,
-            "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
-            "handlers": {}
-        },
-        "2893e4ee-2ce4-4357-8fa9-9eba8eb2f3f5": {
-            "id": "2893e4ee-2ce4-4357-8fa9-9eba8eb2f3f5",
-            "type": "text",
-            "content": {
-                "text": "@{b}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "3eb28922-ef5c-47de-88aa-d100c503a2f5",
-            "handlers": {}
-        },
-        "5ee24c0d-e09e-4789-a9f9-111d5d581f11": {
-            "id": "5ee24c0d-e09e-4789-a9f9-111d5d581f11",
-            "type": "textinput",
-            "content": {
-                "label": "Just Binding"
-            },
-            "isCodeManaged": false,
-            "position": 4,
-            "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
-            "handlers": {},
-            "binding": {
-                "eventType": "wf-change",
-                "stateRef": "b.just_binding"
-            }
-        },
-        "d18393c5-08ee-4fe6-ab4c-cb1de961a905": {
-            "id": "d18393c5-08ee-4fe6-ab4c-cb1de961a905",
-            "type": "text",
-            "content": {
-                "text": "Text"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {
-                "click": "payload_inspector"
-            }
-        },
-        "d1cbbd60-6f27-4fe9-af89-8f0493e5dcea": {
-            "id": "d1cbbd60-6f27-4fe9-af89-8f0493e5dcea",
-            "type": "heading",
-            "content": {
-                "text": "Heading Text"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "b87338f7-1879-4060-8c6b-7f813a94736e": {
-            "id": "b87338f7-1879-4060-8c6b-7f813a94736e",
-            "type": "dataframe",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 5,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "42cce1fb-8bba-4175-a6e2-c8caf920f148": {
-            "id": "42cce1fb-8bba-4175-a6e2-c8caf920f148",
-            "type": "image",
-            "content": {
-                "caption": "Image Caption"
-            },
-            "isCodeManaged": false,
-            "position": 6,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {
-                "click": "payload_inspector"
-            },
-            "binding": {
-                "eventType": "wf-click",
-                "stateRef": "not-a-bindable-event"
-            }
-        },
-        "40ab3f09-37fb-4150-9196-5540044ef92a": {
-            "id": "40ab3f09-37fb-4150-9196-5540044ef92a",
-            "type": "vegalitechart",
-            "content": {
-                "spec": "@{altair_chart}"
-            },
-            "isCodeManaged": false,
-            "position": 8,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "92f59f46-e2ac-47a4-8b78-da20a24299bf": {
-            "id": "92f59f46-e2ac-47a4-8b78-da20a24299bf",
-            "type": "plotlygraph",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 9,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "04927b91-a0c4-4555-9874-1f65542ffb9f": {
-            "id": "04927b91-a0c4-4555-9874-1f65542ffb9f",
-            "type": "metric",
-            "content": {
-                "name": "My Metric",
-                "metricValue": "1",
-                "note": "-Low"
-            },
-            "isCodeManaged": false,
-            "position": 10,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "1a928b2a-4f6b-4a79-95a4-b93a6c2aaef2": {
-            "id": "1a928b2a-4f6b-4a79-95a4-b93a6c2aaef2",
-            "type": "message",
-            "content": {
-                "message": "+Hello"
-            },
-            "isCodeManaged": false,
-            "position": 13,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "d1628b64-28be-46a3-a9ab-3f232c0e9775": {
-            "id": "d1628b64-28be-46a3-a9ab-3f232c0e9775",
-            "type": "videoplayer",
-            "content": {
-                "src": "https://www.learningcontainer.com/download/sample-mp4-video-file-download-for-testing/?wpdmdl=2727&refresh=642fee645899d1680862820"
-            },
-            "isCodeManaged": false,
-            "position": 17,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "8d280fda-2b63-4830-85bb-836feff2faae": {
-            "id": "8d280fda-2b63-4830-85bb-836feff2faae",
-            "type": "message",
-            "content": {
-                "message": "-Hello"
-            },
-            "isCodeManaged": false,
-            "position": 16,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "b6c2d765-1460-407a-8833-850cd9f2a9a0": {
-            "id": "b6c2d765-1460-407a-8833-850cd9f2a9a0",
-            "type": "message",
-            "content": {
-                "message": "!Hello"
-            },
-            "isCodeManaged": false,
-            "position": 15,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "0eda1376-932c-4a1e-a575-2fe66520e4ca": {
-            "id": "0eda1376-932c-4a1e-a575-2fe66520e4ca",
-            "type": "message",
-            "content": {
-                "message": "Hello"
-            },
-            "isCodeManaged": false,
-            "position": 14,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "919ce03d-bb5f-4adc-a93d-da66159ac977": {
-            "id": "919ce03d-bb5f-4adc-a93d-da66159ac977",
-            "type": "metric",
-            "content": {
-                "name": "My Metric",
-                "metricValue": "2",
-                "note": ""
-            },
-            "isCodeManaged": false,
-            "position": 11,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "82a893ae-6328-44c4-9669-87797caedf7e": {
-            "id": "82a893ae-6328-44c4-9669-87797caedf7e",
-            "type": "metric",
-            "content": {
-                "name": "My Metric",
-                "metricValue": "3",
-                "description": "The description of the metric.",
-                "note": "+Great"
-            },
-            "isCodeManaged": false,
-            "position": 12,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "5cc43590-aed8-4a78-8ca9-9841ab1e11c2": {
-            "id": "5cc43590-aed8-4a78-8ca9-9841ab1e11c2",
-            "type": "heading",
-            "content": {
-                "text": "Heading Text",
-                "headingType": "h1"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "4a7a5121-da30-4c6b-8977-91a5848e3702": {
-            "id": "4a7a5121-da30-4c6b-8977-91a5848e3702",
-            "type": "heading",
-            "content": {
-                "text": "Heading Text",
-                "headingType": "h3"
-            },
-            "isCodeManaged": false,
-            "position": 3,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "6739dcac-5078-4acb-885b-2721e2efd994": {
-            "id": "6739dcac-5078-4acb-885b-2721e2efd994",
-            "type": "heading",
-            "content": {
-                "text": "Heading Text",
-                "headingType": "h4"
-            },
-            "isCodeManaged": false,
-            "position": 4,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "88ea37a5-eb07-4740-ae42-a3eeeacca310": {
-            "id": "88ea37a5-eb07-4740-ae42-a3eeeacca310",
-            "type": "page",
-            "content": {
-                "key": "layoutTest"
-            },
-            "isCodeManaged": false,
-            "position": 4,
-            "parentId": "root",
-            "handlers": {}
-        },
-        "c55caf0b-39c1-4fe5-8756-7506b3e3a19a": {
-            "id": "c55caf0b-39c1-4fe5-8756-7506b3e3a19a",
-            "type": "sidebar",
-            "content": {},
-            "isCodeManaged": false,
-            "position": -2,
-            "parentId": "88ea37a5-eb07-4740-ae42-a3eeeacca310",
-            "handlers": {}
-        },
-        "ca8f9355-c26b-44a6-85c1-46d2182a576e": {
-            "id": "ca8f9355-c26b-44a6-85c1-46d2182a576e",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "c55caf0b-39c1-4fe5-8756-7506b3e3a19a",
-            "handlers": {}
-        },
-        "4d686ee6-ab59-41f0-8537-e91fed85af50": {
-            "id": "4d686ee6-ab59-41f0-8537-e91fed85af50",
-            "type": "header",
-            "content": {
-                "text": "Header Text"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "88ea37a5-eb07-4740-ae42-a3eeeacca310",
-            "handlers": {}
-        },
-        "ee91f05a-6cac-4cf0-96dd-090a7bf09bd6": {
-            "id": "ee91f05a-6cac-4cf0-96dd-090a7bf09bd6",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "d4d9fd0d-b347-42d9-9786-a9873cdd0912",
-            "handlers": {}
-        },
-        "5190d792-4e80-40a9-b168-051018b12f3d": {
-            "id": "5190d792-4e80-40a9-b168-051018b12f3d",
-            "type": "columns",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "88ea37a5-eb07-4740-ae42-a3eeeacca310",
-            "handlers": {}
-        },
-        "d4d9fd0d-b347-42d9-9786-a9873cdd0912": {
-            "id": "d4d9fd0d-b347-42d9-9786-a9873cdd0912",
-            "type": "column",
-            "content": {
-                "width": "1"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "5190d792-4e80-40a9-b168-051018b12f3d",
-            "handlers": {}
-        },
-        "c937bbfd-a510-432c-8e58-c50eecd5c67a": {
-            "id": "c937bbfd-a510-432c-8e58-c50eecd5c67a",
-            "type": "column",
-            "content": {
-                "width": "1"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "5190d792-4e80-40a9-b168-051018b12f3d",
-            "handlers": {}
-        },
-        "04acdbfb-2e72-45b3-9fad-367cda5164b5": {
-            "id": "04acdbfb-2e72-45b3-9fad-367cda5164b5",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "c937bbfd-a510-432c-8e58-c50eecd5c67a",
-            "handlers": {}
-        },
-        "56074976-153a-4af3-ad65-fbd49da61f32": {
-            "id": "56074976-153a-4af3-ad65-fbd49da61f32",
-            "type": "tabs",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 3,
-            "parentId": "88ea37a5-eb07-4740-ae42-a3eeeacca310",
-            "handlers": {}
-        },
-        "c2b20427-0e95-4086-94f7-56df84fd4912": {
-            "id": "c2b20427-0e95-4086-94f7-56df84fd4912",
-            "type": "tab",
-            "content": {
-                "name": "Tab Name"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "56074976-153a-4af3-ad65-fbd49da61f32",
-            "handlers": {}
-        },
-        "ad8bd11b-3f89-4839-b2d3-4c7f52c267bd": {
-            "id": "ad8bd11b-3f89-4839-b2d3-4c7f52c267bd",
-            "type": "tab",
-            "content": {
-                "name": "Tab Name"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "56074976-153a-4af3-ad65-fbd49da61f32",
-            "handlers": {}
-        },
-        "e702f506-8ec1-495e-9d8e-e488120b9a7b": {
-            "id": "e702f506-8ec1-495e-9d8e-e488120b9a7b",
-            "type": "tab",
-            "content": {
-                "name": "Tab Name"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "56074976-153a-4af3-ad65-fbd49da61f32",
-            "handlers": {}
-        },
-        "c72a3364-03d9-4fb1-ac1f-13a1785e18c0": {
-            "id": "c72a3364-03d9-4fb1-ac1f-13a1785e18c0",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "ad8bd11b-3f89-4839-b2d3-4c7f52c267bd",
-            "handlers": {}
-        },
-        "065e4f07-c707-4cc7-8cbe-143be5ab2486": {
-            "id": "065e4f07-c707-4cc7-8cbe-143be5ab2486",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "e702f506-8ec1-495e-9d8e-e488120b9a7b",
-            "handlers": {}
-        },
-        "511bedb8-f856-451f-8ee4-a123d934b744": {
-            "id": "511bedb8-f856-451f-8ee4-a123d934b744",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "065e4f07-c707-4cc7-8cbe-143be5ab2486",
-            "handlers": {}
-        },
-        "5ab397b2-4283-44ab-ba9f-4cde3b422641": {
-            "id": "5ab397b2-4283-44ab-ba9f-4cde3b422641",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "e702f506-8ec1-495e-9d8e-e488120b9a7b",
-            "handlers": {}
-        },
-        "ba15571d-4baa-4c65-b600-45af1c32ca75": {
-            "id": "ba15571d-4baa-4c65-b600-45af1c32ca75",
-            "type": "horizontalstack",
-            "content": {
-                "contentHAlign": "start"
-            },
-            "isCodeManaged": false,
-            "position": 4,
-            "parentId": "88ea37a5-eb07-4740-ae42-a3eeeacca310",
-            "handlers": {}
-        },
-        "5a098fd8-1b39-41d9-881e-6cf8e47c4088": {
-            "id": "5a098fd8-1b39-41d9-881e-6cf8e47c4088",
-            "type": "text",
-            "content": {
-                "text": "Text"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "ba15571d-4baa-4c65-b600-45af1c32ca75",
-            "handlers": {}
-        },
-        "bf8db13c-c4b4-4a6d-bb98-247ed6d1da21": {
-            "id": "bf8db13c-c4b4-4a6d-bb98-247ed6d1da21",
-            "type": "text",
-            "content": {
-                "text": "Text"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "ba15571d-4baa-4c65-b600-45af1c32ca75",
-            "handlers": {}
-        },
-        "e4e5c10f-f5f3-44cb-bd3a-34e4f771829e": {
-            "id": "e4e5c10f-f5f3-44cb-bd3a-34e4f771829e",
-            "type": "separator",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "88ea37a5-eb07-4740-ae42-a3eeeacca310",
-            "handlers": {}
-        },
-        "28a2212b-bc58-4398-8a72-2554e5296490": {
-            "id": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "type": "page",
-            "content": {
-                "key": "otherTest"
-            },
-            "isCodeManaged": false,
-            "position": 5,
-            "parentId": "root",
-            "handlers": {}
-        },
-        "b8b10d7e-932f-4a23-baf5-a7a944a4c4a4": {
-            "id": "b8b10d7e-932f-4a23-baf5-a7a944a4c4a4",
-            "type": "button",
-            "content": {
-                "text": "Button Text"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {
-                "click": "payload_inspector"
-            }
-        },
-        "04915674-0afd-4f53-9dfd-301887e7e005": {
-            "id": "04915674-0afd-4f53-9dfd-301887e7e005",
-            "type": "html",
-            "content": {
-                "styles": "{\n  \"padding\": \"16px\",\n  \"min-height\": \"64px\",\n  \"min-width\": \"64px\",\n  \"border-radius\": \"8px\",\n  \"background\": \"linear-gradient(90deg, rgba(41,207,0,1) 0%, rgba(145,231,78,1) 100%)\"\n}"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {}
-        },
-        "f2c445a4-9d3c-4c38-9fe3-cda02126d5d0": {
-            "id": "f2c445a4-9d3c-4c38-9fe3-cda02126d5d0",
-            "type": "html",
-            "content": {
-                "styles": "{\n  \"padding\": \"16px\",\n  \"min-height\": \"64px\",\n  \"min-width\": \"64px\",\n  \"border-radius\": \"8px\",\n  \"background\": \"linear-gradient(10deg, rgba(91,197,190,1) 0%, rgba(145,231,78,1) 100%)\"\n}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "04915674-0afd-4f53-9dfd-301887e7e005",
-            "handlers": {}
-        },
-        "1b3c8d83-36c1-4c74-9dcd-110160c16081": {
-            "id": "1b3c8d83-36c1-4c74-9dcd-110160c16081",
-            "type": "section",
-            "content": {
-                "title": "iframe"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "f2c445a4-9d3c-4c38-9fe3-cda02126d5d0",
-            "handlers": {}
-        },
-        "7aa7e13b-31c4-4a60-be09-502da875eeda": {
-            "id": "7aa7e13b-31c4-4a60-be09-502da875eeda",
-            "type": "html",
-            "content": {
-                "element": "iframe",
-                "styles": "{\n  \"outline\": \"none\",\n  \"border\": \"none\",\n  \"padding\": \"16px\",\n  \"min-height\": \"64px\",\n  \"min-width\": \"64px\",\n  \"border-radius\": \"8px\",\n  \"background\": \"linear-gradient(90deg, rgba(41,207,0,1) 0%, rgba(145,231,78,1) 100%)\"\n}",
-                "attrs": "{ \"src\": \"static/favicon.png\" }"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "1b3c8d83-36c1-4c74-9dcd-110160c16081",
-            "handlers": {}
-        },
-        "056faae6-fc09-4482-b046-9818e62714c0": {
-            "id": "056faae6-fc09-4482-b046-9818e62714c0",
-            "type": "repeater",
-            "content": {
-                "keyVariable": "itemId",
-                "valueVariable": "item"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {}
-        },
-        "f39b508d-6fec-465c-856c-c064179a46d0": {
-            "id": "f39b508d-6fec-465c-856c-c064179a46d0",
-            "type": "html",
-            "content": {
-                "styles": "{\n  \"padding\": \"16px\",\n  \"min-height\": \"64px\",\n  \"min-width\": \"64px\",\n  \"border-radius\": \"8px\",\n  \"background\": \"linear-gradient(90deg, rgba(41,207,0,1) 0%, rgba(145,231,78,1) 100%)\"\n}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "056faae6-fc09-4482-b046-9818e62714c0",
-            "handlers": {}
-        },
-        "c2086d6c-22d7-4fc9-bb53-bd346c6ce711": {
-            "id": "c2086d6c-22d7-4fc9-bb53-bd346c6ce711",
-            "type": "text",
-            "content": {
-                "text": "@{item}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "f39b508d-6fec-465c-856c-c064179a46d0",
-            "handlers": {}
-        },
-        "b97d32ca-49f5-47b2-ae2a-a61e757f395a": {
-            "id": "b97d32ca-49f5-47b2-ae2a-a61e757f395a",
-            "type": "timer",
-            "content": {
-                "intervalMs": "5000"
-            },
-            "isCodeManaged": false,
-            "position": 3,
-            "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {
-                "wf-tick": "handle_timer_tick",
-                "wf-not-a-real-event": "handle_not_a_real_function"
-            }
-        },
-        "f4076626-ccb1-46d9-baf8-265fd5bd11bf": {
-            "id": "f4076626-ccb1-46d9-baf8-265fd5bd11bf",
-            "type": "text",
-            "content": {
-                "text": "@{counter}"
-            },
-            "isCodeManaged": false,
-            "position": 5,
-            "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {}
-        },
-        "30f4990c-256c-4527-b6ea-65033126bfa9": {
-            "id": "30f4990c-256c-4527-b6ea-65033126bfa9",
-            "type": "text",
-            "content": {
-                "text": "Webcam supports multiple channels"
-            },
-            "isCodeManaged": false,
-            "position": 6,
-            "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {}
-        },
-        "5862cc96-b231-4da5-8226-9814dd0bfd62": {
-            "id": "5862cc96-b231-4da5-8226-9814dd0bfd62",
-            "type": "button",
-            "content": {
-                "text": "Inspect Payload and Context"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "f39b508d-6fec-465c-856c-c064179a46d0",
-            "handlers": {
-                "click": "payload_inspector"
-            }
-        },
-        "0f68ff82-a59a-41fc-9f8a-cad8ef51dce0": {
-            "id": "0f68ff82-a59a-41fc-9f8a-cad8ef51dce0",
-            "type": "timer",
-            "content": {
-                "intervalMs": "4000"
-            },
-            "isCodeManaged": false,
-            "position": 4,
-            "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {
-                "wf-tick": "handle_timer_tick"
-            }
-        },
-        "b5a11459-735d-463f-ad7a-cafb2de7c8ae": {
-            "id": "b5a11459-735d-463f-ad7a-cafb2de7c8ae",
-            "type": "image",
-            "content": {
-                "src": "@{webcam_image}",
-                "caption": "Image Caption"
-            },
-            "isCodeManaged": false,
-            "position": 7,
-            "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {}
-        },
-        "9090bad3-2584-46e7-a937-a0afc81f2c81": {
-            "id": "9090bad3-2584-46e7-a937-a0afc81f2c81",
-            "type": "webcamcapture",
-            "content": {
-                "refreshRate": "200"
-            },
-            "isCodeManaged": false,
-            "position": 8,
-            "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {
-                "wf-webcam": "handle_webcam"
-            }
-        },
-        "21a9ec0b-708d-4f22-a52f-00b92fbc8f2a": {
-            "id": "21a9ec0b-708d-4f22-a52f-00b92fbc8f2a",
-            "type": "message",
-            "content": {
-                "message": "@{b.message}"
-            },
-            "isCodeManaged": false,
-            "position": 7,
-            "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
-            "handlers": {}
-        },
-        "fb2ff612-35d8-4b08-af75-0b895e19ed81": {
-            "id": "fb2ff612-35d8-4b08-af75-0b895e19ed81",
-            "type": "button",
-            "content": {
-                "text": "Submit form"
-            },
-            "isCodeManaged": false,
-            "position": 6,
-            "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
-            "handlers": {
-                "click": "handle_form_submit"
-            }
-        },
-        "4b6f14b0-b2d9-43e7-8aba-8d3e939c1f83": {
-            "id": "4b6f14b0-b2d9-43e7-8aba-8d3e939c1f83",
-            "type": "page",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 6,
-            "parentId": "root",
-            "handlers": {}
-        },
-        "0cd59329-29c8-4887-beee-39794065221e": {
-            "id": "0cd59329-29c8-4887-beee-39794065221e",
-            "type": "text",
-            "content": {
-                "text": "The counter is @{counter}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "4b6f14b0-b2d9-43e7-8aba-8d3e939c1f83",
-            "handlers": {}
-        },
-        "f811ca14-8915-443d-8dd3-77ae69fb80f4": {
-            "id": "f811ca14-8915-443d-8dd3-77ae69fb80f4",
-            "type": "repeater",
-            "content": {
-                "repeaterObject": "@{prog_languages}",
-                "keyVariable": "itemId",
-                "valueVariable": "item"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "4b6f14b0-b2d9-43e7-8aba-8d3e939c1f83",
-            "handlers": {}
-        },
-        "2e688107-f865-419b-a07b-95103197e3fd": {
-            "id": "2e688107-f865-419b-a07b-95103197e3fd",
-            "type": "text",
-            "content": {
-                "text": "The id is @{itemId} and the name is @{item.name}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "f811ca14-8915-443d-8dd3-77ae69fb80f4",
-            "handlers": {}
-        },
-        "d99d976a-bdf0-4fc4-8379-4998e7a58440": {
-            "id": "d99d976a-bdf0-4fc4-8379-4998e7a58440",
-            "type": "text",
-            "content": {
-                "text": "UTF-8 state: @{utf\u0800}"
-            },
-            "isCodeManaged": false,
-            "position": 3,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {}
-        },
-        "3991ac75-1219-49e7-a70d-6b782c27b4e0": {
-            "id": "3991ac75-1219-49e7-a70d-6b782c27b4e0",
-            "type": "button",
-            "content": {
-                "text": "Go to page \"inputTest\""
-            },
-            "isCodeManaged": false,
-            "position": 4,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {
-                "click": "$goToPage_inputTest"
-            }
-        },
-        "add45c35-6a73-4f9a-bade-22fecd738967": {
-            "id": "add45c35-6a73-4f9a-bade-22fecd738967",
-            "type": "button",
-            "content": {
-                "text": "Go to page \"content\""
-            },
-            "isCodeManaged": false,
-            "position": 5,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {
-                "click": "$goToPage_content"
-            }
-        },
-        "06c660f8-e3d6-4bdd-92be-64cb080ee933": {
-            "id": "06c660f8-e3d6-4bdd-92be-64cb080ee933",
-            "type": "page",
-            "content": {
-                "key": "repeater2",
-                "emptinessColor": "#f1ece9"
-            },
-            "isCodeManaged": false,
-            "position": 7,
-            "parentId": "root",
-            "handlers": {}
-        },
-        "d15b9cf1-7e79-4ee5-9f0d-7c38c6b6c070": {
-            "id": "d15b9cf1-7e79-4ee5-9f0d-7c38c6b6c070",
-            "type": "repeater",
-            "content": {
-                "repeaterObject": "@{articles}",
-                "keyVariable": "",
-                "valueVariable": ""
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "06c660f8-e3d6-4bdd-92be-64cb080ee933",
-            "handlers": {}
-        },
-        "9f589947-0ea9-4a70-9d57-4ae52543be42": {
-            "id": "9f589947-0ea9-4a70-9d57-4ae52543be42",
-            "type": "section",
-            "content": {
-                "title": ""
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "d15b9cf1-7e79-4ee5-9f0d-7c38c6b6c070",
-            "handlers": {}
-        },
-        "2b3a1237-8884-4fc7-a7a7-fdc51511e6f2": {
-            "id": "2b3a1237-8884-4fc7-a7a7-fdc51511e6f2",
-            "type": "columns",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "9f589947-0ea9-4a70-9d57-4ae52543be42",
-            "handlers": {}
-        },
-        "faf077b6-c62f-4a5a-b24e-4590efcae11f": {
-            "id": "faf077b6-c62f-4a5a-b24e-4590efcae11f",
-            "type": "column",
-            "content": {
-                "width": "0.25"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "2b3a1237-8884-4fc7-a7a7-fdc51511e6f2",
-            "handlers": {}
-        },
-        "b36b1692-0358-4594-b641-fe6addbf91b5": {
-            "id": "b36b1692-0358-4594-b641-fe6addbf91b5",
-            "type": "image",
-            "content": {
-                "caption": "",
-                "src": "static/@{itemId}.jpg"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "faf077b6-c62f-4a5a-b24e-4590efcae11f",
-            "handlers": {}
-        },
-        "b87ff7c9-9849-401a-a89b-85d8e9e6f628": {
-            "id": "b87ff7c9-9849-401a-a89b-85d8e9e6f628",
-            "type": "column",
-            "content": {
-                "width": "1"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "2b3a1237-8884-4fc7-a7a7-fdc51511e6f2",
-            "handlers": {}
-        },
-        "ff144a8c-42df-426b-8eb8-928eacb311f4": {
-            "id": "ff144a8c-42df-426b-8eb8-928eacb311f4",
-            "type": "text",
-            "content": {
-                "text": "**Type**: @{item.type}\n**Colour**: @{item.colour}\n",
-                "useMarkdown": "yes"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "b87ff7c9-9849-401a-a89b-85d8e9e6f628",
-            "handlers": {}
-        },
-        "ee336cd4-8127-40ff-a6e7-0689950655a0": {
-            "id": "ee336cd4-8127-40ff-a6e7-0689950655a0",
-            "type": "button",
-            "content": {
-                "text": "Add to my list",
-                "buttonShadow": "0px 3px 16px -9px #000000",
-                "buttonColor": "#5fcd37",
-                "buttonTextColor": "#ffffff"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "b87ff7c9-9849-401a-a89b-85d8e9e6f628",
-            "handlers": {
-                "click": "handle_add_to_list"
-            }
-        },
-        "3332d2f4-f70e-4354-981b-dfda3a76ae34": {
-            "id": "3332d2f4-f70e-4354-981b-dfda3a76ae34",
-            "type": "heading",
-            "content": {
-                "text": "@{itemId}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "b87ff7c9-9849-401a-a89b-85d8e9e6f628",
-            "handlers": {}
-        },
-        "dd335761-033a-47eb-9ddf-c3e3d25ba8a8": {
-            "id": "dd335761-033a-47eb-9ddf-c3e3d25ba8a8",
-            "type": "separator",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "2b3a1237-8884-4fc7-a7a7-fdc51511e6f2",
-            "handlers": {}
-        },
-        "cd02f864-b72a-44fe-bd52-1929c0fd6c7f": {
-            "id": "cd02f864-b72a-44fe-bd52-1929c0fd6c7f",
-            "type": "text",
-            "content": {
-                "text": "You've added the following items to your list: @{order_list}"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "06c660f8-e3d6-4bdd-92be-64cb080ee933",
-            "handlers": {}
-        },
-        "abaa1903-e58e-4a67-92ef-d7065f1a7fcf": {
-            "id": "abaa1903-e58e-4a67-92ef-d7065f1a7fcf",
-            "type": "header",
-            "content": {
-                "text": "FOOD SELECTOR"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "06c660f8-e3d6-4bdd-92be-64cb080ee933",
-            "handlers": {}
-        },
-        "af23e21b-b8ff-47d3-a72f-83eb53f5f452": {
-            "id": "af23e21b-b8ff-47d3-a72f-83eb53f5f452",
-            "type": "textinput",
-            "content": {
-                "label": "Input Label"
-            },
-            "isCodeManaged": false,
-            "position": 3,
-            "parentId": "06c660f8-e3d6-4bdd-92be-64cb080ee933",
-            "handlers": {},
-            "visible": {
-			  "expression": "custom",
-			  "binding": "",
-			  "reversed": false
-			},
-            "binding": {
-                "eventType": "wf-change",
-                "stateRef": "name"
-            }
-        },
-        "6e912116-4cc5-4840-96b9-84106bee795d": {
-            "id": "6e912116-4cc5-4840-96b9-84106bee795d",
-            "type": "button",
-            "content": {
-                "text": "File download",
-                "icon": "download"
-            },
-            "isCodeManaged": false,
-            "position": 6,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {
-                "click": "handle_file_download"
-            }
-        },
-        "272f0871-585e-4662-8ae1-a8cd6067b60b": {
-            "id": "272f0871-585e-4662-8ae1-a8cd6067b60b",
-            "type": "button",
-            "content": {
-                "text": "Add notifications",
-                "icon": "notifications"
-            },
-            "isCodeManaged": false,
-            "position": 7,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {
-                "click": "add_notification"
-            }
-        },
-        "232d749a-5e0c-4802-bbe1-f8cae06db112": {
-            "id": "232d749a-5e0c-4802-bbe1-f8cae06db112",
-            "type": "button",
-            "content": {
-                "text": "Bad event handler"
-            },
-            "isCodeManaged": false,
-            "position": 9,
-            "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {
-                "click": "bad_event_handler"
-            }
-        },
-        "b92be113-3059-4fc9-b152-b6b2c1f0c969": {
-            "id": "b92be113-3059-4fc9-b152-b6b2c1f0c969",
-            "type": "fileinput",
-            "content": {
-                "label": "Input Label",
-                "allowMultipleFiles": "yes"
-            },
-            "isCodeManaged": false,
-            "position": 8,
-            "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
-            "handlers": {
-                "wf-file-change": "file_change_handler"
-            }
-        },
-        "5c0df6e8-4dd8-4485-a244-8e9e7f4b4675": {
-            "id": "5c0df6e8-4dd8-4485-a244-8e9e7f4b4675",
-            "type": "button",
-            "content": {
-                "text": "Increment",
-                "icon": "arrow_upward"
-            },
-            "isCodeManaged": false,
-            "position": 9,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {
-                "click": "increment"
-            }
-        },
-        "15bd7d51-1a8c-4359-a892-253294684e1d": {
-            "id": "15bd7d51-1a8c-4359-a892-253294684e1d",
-            "type": "text",
-            "content": {
-                "text": "@{counter}"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "84378aea-b64c-49a3-9539-f854532279ee",
-            "handlers": {}
-        },
-        "b3df6ccd-20d4-4761-b8ed-8eabcf95f4be": {
-            "id": "b3df6ccd-20d4-4761-b8ed-8eabcf95f4be",
-            "type": "webcamcapture",
-            "content": {
-                "refreshRate": "200"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "bb4d0e86-619e-4367-a180-be28ab6059f4",
-            "handlers": {}
-        },
-        "575542f1-bb18-429c-9d6a-706edc7512be": {
-            "id": "575542f1-bb18-429c-9d6a-706edc7512be",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 7,
-            "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {}
-        },
-        "aade8074-13be-4e11-a405-a71b8138e6ae": {
-            "id": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "type": "page",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 8,
-            "parentId": "root",
-            "handlers": {}
-        },
-        "35f579dd-4205-413a-9c4f-1caf015a598a": {
-            "id": "35f579dd-4205-413a-9c4f-1caf015a598a",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 1,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "4c65268c-b536-4671-8081-c69be3e84161": {
-            "id": "4c65268c-b536-4671-8081-c69be3e84161",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 2,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "436ba1be-1194-4da9-9eb3-a10e9ec019f1": {
-            "id": "436ba1be-1194-4da9-9eb3-a10e9ec019f1",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 5,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "7a89f965-8c1d-473c-a565-947be62faa43": {
-            "id": "7a89f965-8c1d-473c-a565-947be62faa43",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 45,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "e2d3c1be-c43e-4b8a-84a8-90649da0b55e": {
-            "id": "e2d3c1be-c43e-4b8a-84a8-90649da0b55e",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 6,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "ddbedb50-5fbe-43a3-b221-8f7d59c617da": {
-            "id": "ddbedb50-5fbe-43a3-b221-8f7d59c617da",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 7,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "21dda1e9-a972-4f74-972d-d13f5e2941de": {
-            "id": "21dda1e9-a972-4f74-972d-d13f5e2941de",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 8,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "6ee3de2e-7333-469f-9ced-1e08d9231117": {
-            "id": "6ee3de2e-7333-469f-9ced-1e08d9231117",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 9,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "f0659dad-aa37-457e-80fe-02b900f38694": {
-            "id": "f0659dad-aa37-457e-80fe-02b900f38694",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 10,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "380f8a0b-38f3-414a-ab9f-7034629f5e8e": {
-            "id": "380f8a0b-38f3-414a-ab9f-7034629f5e8e",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 11,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "e43471a7-2e58-437f-8daf-489b221b464a": {
-            "id": "e43471a7-2e58-437f-8daf-489b221b464a",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 12,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "a16cf781-114f-4e74-a09a-578a3e2a3fcd": {
-            "id": "a16cf781-114f-4e74-a09a-578a3e2a3fcd",
-            "type": "header",
-            "content": {
-                "text": "Header Text"
-            },
-            "isCodeManaged": false,
-            "position": 13,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "71500567-d3db-4d67-89aa-86ea8fecc4ed": {
-            "id": "71500567-d3db-4d67-89aa-86ea8fecc4ed",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 14,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "0e8d0885-954a-4b95-9cfd-0a8ed2ed8683": {
-            "id": "0e8d0885-954a-4b95-9cfd-0a8ed2ed8683",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 15,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "a039b488-a523-42bc-84d0-f9b3f5185052": {
-            "id": "a039b488-a523-42bc-84d0-f9b3f5185052",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 16,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "8582c124-474c-4da5-80c5-16bca90f4d98": {
-            "id": "8582c124-474c-4da5-80c5-16bca90f4d98",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 17,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "d88e0ff3-4acb-474c-b37c-9cd7ea51fd26": {
-            "id": "d88e0ff3-4acb-474c-b37c-9cd7ea51fd26",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 18,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "de7a750f-6c88-4fbb-8962-93714b6be485": {
-            "id": "de7a750f-6c88-4fbb-8962-93714b6be485",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 19,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "110625bc-bad4-4b44-b20f-51339554d77b": {
-            "id": "110625bc-bad4-4b44-b20f-51339554d77b",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 20,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "eb568d28-e6de-4deb-978b-a10d6cb3c454": {
-            "id": "eb568d28-e6de-4deb-978b-a10d6cb3c454",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 21,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "4a94898f-01b2-4424-8db9-9ed75e788611": {
-            "id": "4a94898f-01b2-4424-8db9-9ed75e788611",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 22,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "f8136c45-f868-4858-928a-f007f9a7dfbe": {
-            "id": "f8136c45-f868-4858-928a-f007f9a7dfbe",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 23,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "1a8ca9b4-afc5-4055-9709-bd27cd7fd7aa": {
-            "id": "1a8ca9b4-afc5-4055-9709-bd27cd7fd7aa",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 24,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "6a308e3d-c5a0-400e-9036-6183aecac714": {
-            "id": "6a308e3d-c5a0-400e-9036-6183aecac714",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 25,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "a71a65fc-8710-40fb-8410-6c676072dab5": {
-            "id": "a71a65fc-8710-40fb-8410-6c676072dab5",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 26,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "ff213e0d-4e33-494d-8765-6738010ea932": {
-            "id": "ff213e0d-4e33-494d-8765-6738010ea932",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 27,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "25f8e06e-5a86-4e5c-afbc-6191c4146bd8": {
-            "id": "25f8e06e-5a86-4e5c-afbc-6191c4146bd8",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 28,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "48cb52fa-bb6a-43e7-aa7a-cbc0b30156b1": {
-            "id": "48cb52fa-bb6a-43e7-aa7a-cbc0b30156b1",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 29,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "7d914a22-e7aa-4340-9b88-36423a5566a3": {
-            "id": "7d914a22-e7aa-4340-9b88-36423a5566a3",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 30,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "bcbae34f-72fd-40b3-8678-d4b986b47cd5": {
-            "id": "bcbae34f-72fd-40b3-8678-d4b986b47cd5",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 31,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "574ec17c-ed69-49a6-b991-29354b8a8a76": {
-            "id": "574ec17c-ed69-49a6-b991-29354b8a8a76",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 32,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "27a21b92-0ed0-4044-8eb4-69979a285e2a": {
-            "id": "27a21b92-0ed0-4044-8eb4-69979a285e2a",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 33,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "c759135c-72ed-43b8-ab91-8bce748dcd58": {
-            "id": "c759135c-72ed-43b8-ab91-8bce748dcd58",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 35,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "210f45a4-c8da-48b2-a2ff-bca06ca7f8a3": {
-            "id": "210f45a4-c8da-48b2-a2ff-bca06ca7f8a3",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 36,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "0bdf78ac-2824-4116-8e14-af2c363c3b45": {
-            "id": "0bdf78ac-2824-4116-8e14-af2c363c3b45",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 37,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "a4a6316d-5fb1-47e2-976b-97265533fc97": {
-            "id": "a4a6316d-5fb1-47e2-976b-97265533fc97",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 38,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "aa8ab024-25a5-4d33-82cf-f20146e9cf28": {
-            "id": "aa8ab024-25a5-4d33-82cf-f20146e9cf28",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "4c65268c-b536-4671-8081-c69be3e84161",
-            "handlers": {}
-        },
-        "1c5b7db1-f8fa-4c7b-9daf-db60045fd16e": {
-            "id": "1c5b7db1-f8fa-4c7b-9daf-db60045fd16e",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 39,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "95690cbc-8d71-4079-936e-c625250fa337": {
-            "id": "95690cbc-8d71-4079-936e-c625250fa337",
-            "type": "header",
-            "content": {
-                "text": "Header Text"
-            },
-            "isCodeManaged": false,
-            "position": 41,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "857dc6fc-d6f7-4dd1-bbc3-6f0dea011d54": {
-            "id": "857dc6fc-d6f7-4dd1-bbc3-6f0dea011d54",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 42,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "aac79665-3341-4784-a105-433baf45dde3": {
-            "id": "aac79665-3341-4784-a105-433baf45dde3",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 43,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "d0f010ac-2048-49f3-91ff-e17e145298ed": {
-            "id": "d0f010ac-2048-49f3-91ff-e17e145298ed",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 44,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "b3aa5f2f-d952-4021-a506-7a4515388580": {
-            "id": "b3aa5f2f-d952-4021-a506-7a4515388580",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 46,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "d07b8382-dca7-4061-b0ca-22edd43e06b1": {
-            "id": "d07b8382-dca7-4061-b0ca-22edd43e06b1",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 47,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "9005a1fc-c560-4ca4-9626-b660031c9c8e": {
-            "id": "9005a1fc-c560-4ca4-9626-b660031c9c8e",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 48,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "440de4a5-b901-4626-a282-3aee83a007c5": {
-            "id": "440de4a5-b901-4626-a282-3aee83a007c5",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 49,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "2e8069dd-0017-42f3-a13b-44e19f132c4f": {
-            "id": "2e8069dd-0017-42f3-a13b-44e19f132c4f",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 50,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "cab6894d-98e1-426f-876c-ca1c81bb7a30": {
-            "id": "cab6894d-98e1-426f-876c-ca1c81bb7a30",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 51,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "8a937df7-c974-455e-b2bc-40445621ef40": {
-            "id": "8a937df7-c974-455e-b2bc-40445621ef40",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 52,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "16d1a673-48f3-47de-a875-1053ffb58e65": {
-            "id": "16d1a673-48f3-47de-a875-1053ffb58e65",
-            "type": "videoplayer",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 58,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "58807828-af04-434d-9a0a-6419ced716d7": {
-            "id": "58807828-af04-434d-9a0a-6419ced716d7",
-            "type": "message",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 53,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "23e7a993-1344-4c3a-a65f-87b72b9d72a3": {
-            "id": "23e7a993-1344-4c3a-a65f-87b72b9d72a3",
-            "type": "vegalitechart",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 54,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "47dd20f8-4477-4a7d-935a-c2615aaa684d": {
-            "id": "47dd20f8-4477-4a7d-935a-c2615aaa684d",
-            "type": "image",
-            "content": {
-                "caption": "Image Caption"
-            },
-            "isCodeManaged": false,
-            "position": 55,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "f0e45dc7-a752-49cd-8315-79cce246f8db": {
-            "id": "f0e45dc7-a752-49cd-8315-79cce246f8db",
-            "type": "dataframe",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 56,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "2ca1282f-df91-42cd-bb95-9ece65df27ae": {
-            "id": "2ca1282f-df91-42cd-bb95-9ece65df27ae",
-            "type": "metric",
-            "content": {
-                "note": "+Pass"
-            },
-            "isCodeManaged": false,
-            "position": 57,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "04da32e4-11c9-400f-ba44-3be79c760ca7": {
-            "id": "04da32e4-11c9-400f-ba44-3be79c760ca7",
-            "type": "tabs",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 59,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "10e93acf-3b13-40a8-ac8d-8222bfb4d7ca": {
-            "id": "10e93acf-3b13-40a8-ac8d-8222bfb4d7ca",
-            "type": "columns",
-            "content": {},
-            "isCodeManaged": false,
-            "position": 0,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "6f0e9441-217c-4b1d-a6cb-2201eeaee406": {
-            "id": "6f0e9441-217c-4b1d-a6cb-2201eeaee406",
-            "type": "header",
-            "content": {
-                "text": "Header Text"
-            },
-            "isCodeManaged": false,
-            "position": 34,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "1faaa29d-96d3-404a-b8f5-7d392cd55177": {
-            "id": "1faaa29d-96d3-404a-b8f5-7d392cd55177",
-            "type": "section",
-            "content": {
-                "title": "Section Title"
-            },
-            "isCodeManaged": false,
-            "position": 40,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "a34cba3c-0eb6-4bc8-bd69-67ee80ee6005": {
-            "id": "a34cba3c-0eb6-4bc8-bd69-67ee80ee6005",
-            "type": "sidebar",
-            "content": {},
-            "isCodeManaged": false,
-            "position": -2,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "2e46c38b-6405-42ad-ad9c-d237a53a7d30": {
-            "id": "2e46c38b-6405-42ad-ad9c-d237a53a7d30",
-            "type": "dropdowninput",
-            "content": {
-                "label": "Input Label",
-                "options": "{\n  \"ar\": \"Argentina\",\n  \"uk\": \"United Kingdom\"\n}"
-            },
-            "isCodeManaged": false,
-            "position": 11,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {
-                "wf-option-change": "update_cities"
-            }
-        },
-        "20a4329c-4b14-4743-adaa-698ff0629aed": {
-            "id": "20a4329c-4b14-4743-adaa-698ff0629aed",
-            "type": "dropdowninput",
-            "content": {
-                "label": "Input Label",
-                "options": "@{cities}"
-            },
-            "isCodeManaged": false,
-            "position": 12,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {}
-        },
-        "00f02bed-2113-4449-8af3-0f2c76a6bca4": {
-            "id": "00f02bed-2113-4449-8af3-0f2c76a6bca4",
-            "type": "checkboxinput",
-            "content": {
-                "label": "Input Label",
-                "orientation": "horizontal"
-            },
-            "isCodeManaged": false,
-            "position": 4,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "2a413447-4d40-4ade-8cf0-639f292ff353": {
-            "id": "2a413447-4d40-4ade-8cf0-639f292ff353",
-            "type": "radioinput",
-            "content": {
-                "label": "Input Label",
-                "orientation": "horizontal"
-            },
-            "isCodeManaged": false,
-            "position": 3,
-            "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {}
-        },
-        "242a8268-10d1-4e2c-96bd-f17ffe9e9b28": {
-            "id": "242a8268-10d1-4e2c-96bd-f17ffe9e9b28",
-            "type": "textinput",
-            "content": {
-                "label": "Input Label",
-                "passwordMode": "yes"
-            },
-            "isCodeManaged": false,
-            "position": 13,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {}
-        },
-        "c9e4e0d9-771e-47c2-863a-55ce8a98bfa5": {
-            "id": "c9e4e0d9-771e-47c2-863a-55ce8a98bfa5",
-            "type": "multiselectinput",
-            "content": {
-                "label": "Default checkbox mirrored in multiselect"
-            },
-            "isCodeManaged": false,
-            "position": 6,
-            "parentId": "6010765e-9ac3-4570-84bf-913ae404e03a",
-            "handlers": {},
-            "binding": {
-                "eventType": "wf-options-change",
-                "stateRef": "b.default_checkbox"
-            }
-        },
-        "c1d1f478-3dbb-4009-94a0-9b92404348cd": {
-            "id": "c1d1f478-3dbb-4009-94a0-9b92404348cd",
-            "type": "selectinput",
-            "content": {
-                "label": "Language",
-                "options": "{\n  \"en\": \"English\",\n  \"sp\": \"Spanish\",\n  \"pl\": \"Polish\"\n}"
-            },
-            "isCodeManaged": false,
-            "position": 4,
-            "parentId": "6010765e-9ac3-4570-84bf-913ae404e03a",
-            "handlers": {},
-            "binding": {
-                "eventType": "wf-option-change",
-                "stateRef": "b.language"
-            }
-        },
-        "nyo5vc79sb031yz8": {
-            "id": "nyo5vc79sb031yz8",
-            "type": "button",
-            "content": {
-                "text": "Increment asynchronically"
-            },
-            "isCodeManaged": false,
-            "position": 10,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {
-                "wf-click": "test_async_handler"
-            }
-        },
-        "3apnnxxg7pubdeqp": {
-            "id": "3apnnxxg7pubdeqp",
-            "type": "text",
-            "content": {
-                "text": "@{counter}"
-            },
-            "isCodeManaged": false,
-            "position": 8,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {}
-        }
-    }
-}
diff --git a/tests/e2e/tests/builderFieldValidation.spec.ts b/tests/e2e/tests/builderFieldValidation.spec.ts
index 69764b64f..3de9b4f7e 100644
--- a/tests/e2e/tests/builderFieldValidation.spec.ts
+++ b/tests/e2e/tests/builderFieldValidation.spec.ts
@@ -57,18 +57,5 @@ test.describe("Builder field validation", () => {
 
 		await maximunCountInput.fill("2");
 		expect(await maximunCountInput.getAttribute("aria-invalid")).toBe("false");
-
-		// options
-
-		await page.locator(".BuilderFieldsOptions button").nth(1).click();
-
-		const optionsTextarea = page.locator(
-			'.BuilderFieldsObject[data-automation-key="options"] textarea',
-		);
-		await optionsTextarea.fill(JSON.stringify(true));
-		expect(await optionsTextarea.getAttribute("aria-invalid")).toBe("true");
-
-		await optionsTextarea.fill(JSON.stringify({ a: "A", b: "B" }));
-		expect(await optionsTextarea.getAttribute("aria-invalid")).toBe("false");
 	});
 });
diff --git a/tests/e2e/tests/stateAutocompletion.spec.ts b/tests/e2e/tests/stateAutocompletion.spec.ts
index 666ceef6c..bc80f65cb 100644
--- a/tests/e2e/tests/stateAutocompletion.spec.ts
+++ b/tests/e2e/tests/stateAutocompletion.spec.ts
@@ -30,7 +30,7 @@ test.describe("state autocompletion", () => {
 			page.locator('.BuilderFieldsText[data-automation-key="text"] .fieldStateAutocomplete span.prop:text-matches("string")').click();
 			await expect(page
 				.locator('.BuilderFieldsText[data-automation-key="text"] textarea'))
-				.toHaveValue("@{types.string");
+				.toHaveValue("@{types.string}");
 		});
 		test("counter", async ({ page }) => {
 			await setTextField(page, "@{counter");
@@ -64,56 +64,38 @@ test.describe("state autocompletion", () => {
 
 	test.describe("Key-Value", () => {
 		test("Static List - completion", async ({ page }) => {
-			const FIELD = `.BuilderFieldsOptions[data-automation-key="options"]`;
+			const FIELD = `.BuilderFieldsKeyValue[data-automation-key="options"]`;
 			await page
 				.locator(`.BuilderSidebarToolkit [data-component-type="radioinput"]`)
 				.dragTo(page.locator(".CorePage"));
 
 			await page.locator('div.CoreRadioInput.component > label').click();
 			await page
-				.locator(`${FIELD} button.WdsTab:text-matches("Static List")`)
+				.locator(`${FIELD} button[data-automation-key="openAssistedMode"]`)
 				.click();
-			await page
-				.locator(`${FIELD} .inputKey input`)
-				.fill("@{types.");
-			await expect(page.locator(`${FIELD} .inputKey .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
-			await expect(page.locator(`${FIELD} .inputKey .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
-			page.locator(`${FIELD} .inputKey .fieldStateAutocomplete span.prop:text-matches("string")`).click();
-			await expect(page
-				.locator(`${FIELD} .inputKey input`))
-				.toHaveValue("@{types.string");
-			await page
-				.locator(`${FIELD} .inputValue input`)
-				.fill("@{types.");
-			await expect(page.locator(`${FIELD} .inputValue .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
-			await expect(page.locator(`${FIELD} .inputValue .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
-			page.locator(`${FIELD} .inputValue .fieldStateAutocomplete span.prop:text-matches("string")`).click();
-			await expect(page
-				.locator(`${FIELD} .inputValue input`))
-				.toHaveValue("@{types.string");
-			await page.locator('[data-automation-action="delete"]').click();
-		});
 
-		test("JSON - completion", async ({ page }) => {
-			const FIELD = `.BuilderFieldsOptions[data-automation-key="options"]`;
-			await page
-				.locator(`.BuilderSidebarToolkit [data-component-type="radioinput"]`)
-				.dragTo(page.locator(".CorePage"));
+			// key
 
-			await page.locator('div.CoreRadioInput.component > label').click();
-			await page
-				.locator(`${FIELD} button.WdsTab:text-matches("JSON")`)
-				.click();
-			await page
-				.locator(`${FIELD} textarea`)
-				.fill("@{types.");
-			await expect(page.locator(`${FIELD} .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
-			await expect(page.locator(`${FIELD} .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
-			page.locator(`${FIELD} .fieldStateAutocomplete span.prop:text-matches("string")`).click();
-			await expect(page
-				.locator(`${FIELD} textarea`))
-				.toHaveValue("@{types.string");
-			await page.locator('[data-automation-action="delete"]').click();
+			const assistedKeyField = page.locator(`.BuilderFieldsKeyValueModal__assistedEntries .WdsFieldWrapper`).first()
+			const assistedKeyFieldInput = assistedKeyField.locator('.WdsTextInput')
+
+			await assistedKeyFieldInput.fill("@{types.");
+
+			await expect(assistedKeyField.locator(`.fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
+			await expect(assistedKeyField.locator(`.fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
+			await assistedKeyField.locator(`.fieldStateAutocomplete span.prop:text-matches("string")`).click();
+			await expect(assistedKeyFieldInput).toHaveValue("@{types.string}");
+
+			// value
+
+			const assistedValueField = page.locator(`.BuilderFieldsKeyValueModal__assistedEntries .WdsFieldWrapper`).nth(1)
+			const assistedKeyValueInput = assistedValueField.locator('.WdsTextInput')
+
+			await assistedKeyValueInput.fill("@{types.");
+			await expect(assistedValueField.locator(`.fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
+			await expect(assistedValueField.locator(`.fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
+			await assistedValueField.locator(`.fieldStateAutocomplete span.prop:text-matches("string")`).click();
+			await expect(assistedKeyValueInput).toHaveValue("@{types.string}");
 		});
 	});
 
@@ -132,7 +114,7 @@ test.describe("state autocompletion", () => {
 			page.locator(`${FIELD} .fieldStateAutocomplete span.prop:text-matches("string")`).click();
 			await expect(page
 				.locator(`${FIELD} .BuilderTemplateInput input`))
-				.toHaveValue("@{types.string");
+				.toHaveValue("@{types.string}");
 		});
 	}