fix: evalv2 prohibit component delete

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -785,8 +785,7 @@
 	$: forceDeactivatePanzoom = isModifierKeyPressed && handMode
 </script>
 
-<svelte:head>
-</svelte:head>
+<svelte:head></svelte:head>
 
 <DarkModeObserver on:change={onThemeChange} />
 

frontend/src/lib/components/apps/editor/SettingsPanel.svelte

@@ -121,9 +121,15 @@
 						gridItemWithLocation?.location.type === 'subgrid' &&
 						Array.isArray($app.subgrids?.[gridItemWithLocation.location.subgridKey])
 					) {
-						$app.subgrids[gridItemWithLocation.location.subgridKey][
-							gridItemWithLocation.location.subgridItemIndex
-						] = cs.item
+						if (
+							$app.subgrids[gridItemWithLocation.location.subgridKey][
+								gridItemWithLocation.location.subgridItemIndex
+							]
+						) {
+							$app.subgrids[gridItemWithLocation.location.subgridKey][
+								gridItemWithLocation.location.subgridItemIndex
+							] = cs.item
+						}
 					}
 				}
 			}

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte

@@ -13,14 +13,27 @@
 	import { zIndexes } from '$lib/zIndexes'
 	import Popover from '$lib/components/Popover.svelte'
 
-	export let componentInput: EvalV2AppInput | undefined
-	export let id: string
-	export let field: string
-	export let fixedOverflowWidgets: boolean = true
-	export let acceptSelf: boolean = false
-	export let recomputeOnInputChanged = true
-	export let showOnDemandOnlyToggle = false
-	export let securedContext = false
+	interface Props {
+		componentInput: EvalV2AppInput | undefined
+		id: string
+		field: string
+		fixedOverflowWidgets?: boolean
+		acceptSelf?: boolean
+		recomputeOnInputChanged?: boolean
+		showOnDemandOnlyToggle?: boolean
+		securedContext?: boolean
+	}
+
+	let {
+		componentInput = $bindable(),
+		id,
+		field,
+		fixedOverflowWidgets = true,
+		acceptSelf = false,
+		recomputeOnInputChanged = true,
+		showOnDemandOnlyToggle = false,
+		securedContext = false
+	}: Props = $props()
 
 	const {
 		onchange,
@@ -30,15 +43,17 @@
 	} = getContext<AppViewerContext>('AppViewerContext')
 	const { evalPreview } = getContext<AppEditorContext>('AppEditorContext')
 
-	let editor: SimpleEditor
+	let editor: SimpleEditor | undefined = $state()
 	export function setCode(code: string) {
 		editor?.setCode(code)
 	}
 
-	$: extraLib =
-		componentInput?.expr && $worldStore
+	let exprDefined = $derived(componentInput?.expr != undefined)
+	let extraLib = $derived(
+		exprDefined && $worldStore
 			? buildExtraLib($worldStore?.outputsById ?? {}, acceptSelf ? '' : id, $stateStore, false)
 			: undefined
+	)
 
 	if (
 		componentInput &&
@@ -58,8 +73,8 @@
 		}
 	}
 
-	let fullscreen = false
-	let focus = false
+	let fullscreen = $state(false)
+	let focus = $state(false)
 </script>
 
 {#if componentInput?.type === 'evalv2'}
@@ -110,7 +125,14 @@
 				small
 				bind:this={editor}
 				lang="javascript"
-				bind:code={() => componentInput.expr ?? '', (e) => (componentInput.expr = e)}
+				bind:code={
+					() => componentInput.expr ?? '',
+					(e) => {
+						if (componentInput.expr != e) {
+							componentInput.expr = e
+						}
+					}
+				}
 				shouldBindKey={false}
 				{extraLib}
 				autoHeight
@@ -132,17 +154,17 @@
 				<div class="border bg-surface absolute top-0.5 right-8 p-0.5">
 					<Popover notClickable>
 						<Shield size={12} />
-						<svelte:fragment slot="text">
+						{#snippet text()}
 							This context variable is securely provided by the backend and cannot be altered by
 							users
-						</svelte:fragment>
+						{/snippet}
 					</Popover>
 				</div>
 			{/if}
 			<button
 				title="Open in drawer"
 				class="border bg-surface absolute hover:text-primary top-0 right-2 p-0.5 text-secondary"
-				on:click={() => (fullscreen = true)}><Maximize2 size={10} /></button
+				onclick={() => (fullscreen = true)}><Maximize2 size={10} /></button
 			>
 			{#if focus}
 				<div class="relative w-full">