From e17271b8e95fa6d307c058a54ab8db910f4f0922 Mon Sep 17 00:00:00 2001
From: ltctceplrm <14954927+ltctceplrm@users.noreply.github.com>
Date: Sat, 19 Jul 2025 14:27:58 +0200
Subject: [PATCH 1/2] Fix property mapping text box

---
 .../PropertyMappingModelComponent.svelte         | 16 ++++------------
 .../PropertyMappingModelsComponent.svelte        |  8 ++------
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/settings/PropertyMappingModelComponent.svelte b/src/settings/PropertyMappingModelComponent.svelte
index 0018d75..483854a 100644
--- a/src/settings/PropertyMappingModelComponent.svelte
+++ b/src/settings/PropertyMappingModelComponent.svelte
@@ -1,22 +1,14 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { PropertyMappingModel, PropertyMappingOption, propertyMappingOptions } from './PropertyMapping';
 	import { capitalizeFirstLetter } from '../utils/Utils';
 	import Icon from './Icon.svelte';
 
-	interface Props {
-		model: PropertyMappingModel;
-		save: (model: PropertyMappingModel) => void;
-	}
-
-	let { model, save }: Props = $props();
+	export let model: PropertyMappingModel;
+	export let save: (model: PropertyMappingModel) => void;
 
-	let validationResult: { res: boolean; err?: Error } | undefined = $state();
+	let validationResult: { res: boolean; err?: Error } | undefined;
 
-	$effect(() => {
-		validationResult = model.validate();
-	});
+	$: validationResult = model.validate();
 </script>
 
 <div class="media-db-plugin-property-mappings-model-container">
diff --git a/src/settings/PropertyMappingModelsComponent.svelte b/src/settings/PropertyMappingModelsComponent.svelte
index 3093af0..dace243 100644
--- a/src/settings/PropertyMappingModelsComponent.svelte
+++ b/src/settings/PropertyMappingModelsComponent.svelte
@@ -2,12 +2,8 @@
 	import { PropertyMappingModel } from './PropertyMapping';
 	import PropertyMappingModelComponent from './PropertyMappingModelComponent.svelte';
 
-	interface Props {
-		models?: PropertyMappingModel[];
-		save: (model: PropertyMappingModel) => void;
-	}
-
-	let { models = [], save }: Props = $props();
+	export let models: PropertyMappingModel[] = [];
+	export let save: (model: PropertyMappingModel) => void;
 </script>
 
 <div class="setting-item" style="display: flex; gap: 10px; flex-direction: column; align-items: stretch;">

From 14fbbf8170d62875b5d1544f9e94b1045afc5eb3 Mon Sep 17 00:00:00 2001
From: ltctceplrm <14954927+ltctceplrm@users.noreply.github.com>
Date: Sat, 2 Aug 2025 00:16:42 +0200
Subject: [PATCH 2/2] Preliminary fix in rune mode for remapping

Based on https://github.com/sveltejs/svelte/pull/15107#discussion_r1945486274
---
 .../PropertyMappingModelComponent.svelte      | 19 ++++++++++++++-----
 .../PropertyMappingModelsComponent.svelte     |  8 ++++++--
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/settings/PropertyMappingModelComponent.svelte b/src/settings/PropertyMappingModelComponent.svelte
index 483854a..81b236c 100644
--- a/src/settings/PropertyMappingModelComponent.svelte
+++ b/src/settings/PropertyMappingModelComponent.svelte
@@ -3,18 +3,23 @@
 	import { capitalizeFirstLetter } from '../utils/Utils';
 	import Icon from './Icon.svelte';
 
-	export let model: PropertyMappingModel;
-	export let save: (model: PropertyMappingModel) => void;
+	interface Props {
+		model: PropertyMappingModel;
+		save: (model: PropertyMappingModel) => void;
+	}
 
-	let validationResult: { res: boolean; err?: Error } | undefined;
+	let { model, save }: Props = $props();
 
-	$: validationResult = model.validate();
+	let validationResult: { res: boolean; err?: Error } | undefined = $derived(model.validate());
+
+	// Use $state as a variable declaration initializer
+	let propertyStates = $state(model.properties.map(p => ({ ...p })));
 </script>
 
 <div class="media-db-plugin-property-mappings-model-container">
 	<div class="setting-item-name">{capitalizeFirstLetter(model.type)}</div>
 	<div class="media-db-plugin-property-mappings-container">
-		{#each model.properties as property}
+		{#each propertyStates as property, i}
 			<div class="media-db-plugin-property-mapping-element">
 				<div class="media-db-plugin-property-mapping-element-property-name-wrapper">
 					<pre class="media-db-plugin-property-mapping-element-property-name"><code>{property.property}</code></pre>
@@ -48,6 +53,10 @@
 	<button
 		class="media-db-plugin-property-mappings-save-button {validationResult?.res ? 'mod-cta' : 'mod-muted'}"
 		onclick={() => {
+			// Sync propertyStates back to model.properties
+			model.properties.forEach((p, i) => {
+				Object.assign(p, propertyStates[i]);
+			});
 			if (model.validate().res) save(model);
 		}}
 		>Save
diff --git a/src/settings/PropertyMappingModelsComponent.svelte b/src/settings/PropertyMappingModelsComponent.svelte
index dace243..3093af0 100644
--- a/src/settings/PropertyMappingModelsComponent.svelte
+++ b/src/settings/PropertyMappingModelsComponent.svelte
@@ -2,8 +2,12 @@
 	import { PropertyMappingModel } from './PropertyMapping';
 	import PropertyMappingModelComponent from './PropertyMappingModelComponent.svelte';
 
-	export let models: PropertyMappingModel[] = [];
-	export let save: (model: PropertyMappingModel) => void;
+	interface Props {
+		models?: PropertyMappingModel[];
+		save: (model: PropertyMappingModel) => void;
+	}
+
+	let { models = [], save }: Props = $props();
 </script>
 
 <div class="setting-item" style="display: flex; gap: 10px; flex-direction: column; align-items: stretch;">