feat: lots more improvements

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

lib/Controllers/DefaultController.php

@@ -299,12 +299,16 @@ class DefaultController extends ControllerAbstract {
         if (!is_array($data['data'])) {
             throw new InvalidArgumentException(self::ERR_INVALID_DATA);
         }
+        if (isset($data['delta']) && !is_bool($data['delta'])) {
+            throw new InvalidArgumentException('Invalid parameter: delta must be a boolean');
+        }
         
         return $this->mailManager->serviceUpdate(
             $tenantId,
             $userId,
             $data['provider'],
             $data['identifier'],
+            $data['delta'] ?? false,
             $data['data']
         );
     }

lib/Manager.php

@@ -247,17 +247,18 @@ class Manager {
      * @param string $userId User identifier for context
      * @param string $providerId Provider identifier
      * @param string|int $serviceId Service identifier
+     * @param bool $delta Whether the update is a delta (partial) update or a full replacement
      * @param array $data Updated service configuration data
      *
      * @return ServiceBaseInterface Updated service
      *
      * @throws InvalidArgumentException If provider doesn't support service modification or service not found
      */
-    public function serviceUpdate(string $tenantId, string $userId, string $providerId, string|int $serviceId, array $data): ServiceBaseInterface {
+    public function serviceUpdate(string $tenantId, string $userId, string $providerId, string|int $serviceId, bool $delta = false, array $data): ServiceBaseInterface {
         // retrieve provider and service
         $provider = $this->providerFetch($tenantId, $userId, $providerId);
         if ($provider instanceof ProviderServiceMutateInterface === false) {
-            throw new InvalidArgumentException("Provider '$providerId' does not support service creation");
+            throw new InvalidArgumentException("Provider '$providerId' does not support service modification");
         }
         
         // Fetch existing service
@@ -267,7 +268,7 @@ class Manager {
         }
         
         // Update with new data
-        $service->jsonDeserialize($data);
+        $service->jsonDeserialize($data, $delta);
         
         // Modify the service
         $provider->serviceModify($tenantId, $userId, $service);
@@ -294,7 +295,7 @@ class Manager {
         // retrieve provider and service
         $provider = $this->providerFetch($tenantId, $userId, $providerId);
         if ($provider instanceof ProviderServiceMutateInterface === false) {
-            throw new InvalidArgumentException("Provider '$providerId' does not support service creation");
+            throw new InvalidArgumentException("Provider '$providerId' does not support service deletion");
         }
         
         // Fetch existing service

src/components/AddAccountDialog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, shallowRef, computed, watch } from 'vue'
 import { useIntegrationStore } from '@KTXC/stores/integrationStore'
 import { useServicesStore } from '@MailManager/stores/servicesStore'
 import { useProvidersStore } from '@MailManager/stores/providersStore'
@@ -58,8 +58,8 @@ const discoverSecret = ref<string | null>(null)
 const discoverHostname = ref<string | null>(null)
 
 // Step 2: Discovery Status / Provider Selection
-const selectedProvider = ref<ProviderObject | null>(null)
+const selectedProvider = shallowRef<ProviderObject | null>(null)
-const selectedService = ref<ServiceObject | null>(null)
+const selectedService = shallowRef<ServiceObject | null>(null)
 
 // Step 5: Test & Save
 const testAndSaveValid = ref(false)
@@ -162,7 +162,7 @@ function createServiceObject(
     auxiliary: data.auxiliary ?? {}
   }
 
-  const factoryItem = integrationStore.getItemById('mail_service_factory', providerId) as any
+  const factoryItem = integrationStore.getItemById('mail_provider_factory_service', providerId) as any
   const factory = factoryItem?.factory
   return factory ? factory(model) : new ServiceObject().fromJson(model)
 }
@@ -175,16 +175,13 @@ function setSelectedProviderAndService(providerId: string, service: ServiceObjec
 
 function handleServiceUpdate(service: ServiceObject) {
   selectedService.value = service
+  testAndSaveValid.value = false
 }
 
 function handleServiceTested(success: boolean) {
   testAndSaveValid.value = success
 }
 
-watch(selectedService, () => {
-  testAndSaveValid.value = false
-}, { deep: true })
-
 // Navigation methods
 function handlePreviousStep() {
   if (currentStep.value > 1) {
@@ -370,8 +367,7 @@ async function testConnection() {
     }
   }
 
-  const serviceData = selectedService.value.toJson()
+  if (!selectedService.value.location || !selectedService.value.identity) {
-  if (!serviceData.location || !serviceData.identity) {
     return {
       success: false,
       message: 'Missing configuration'
@@ -381,8 +377,8 @@ async function testConnection() {
   const testResult = await servicesStore.test(
     selectedProvider.value.identifier,
     null,
-    serviceData.location,
+    selectedService.value.location,
-    serviceData.identity
+    selectedService.value.identity
   )
 
   return testResult

src/components/EditAccountDialog.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, shallowRef, computed, watch } from 'vue'
 import { useServicesStore } from '@MailManager/stores/servicesStore'
 import { useProvidersStore } from '@MailManager/stores/providersStore'
 import type { ProviderObject, ServiceObject } from '@MailManager/models'
+import ProviderAuxiliaryPanel from '@MailManager/components/steps/ProviderAuxiliaryPanel.vue'
 import ProviderProtocolPanel from '@MailManager/components/steps/ProviderProtocolPanel.vue'
 import ProviderAuthPanel from '@MailManager/components/steps/ProviderAuthPanel.vue'
 import TestAndSavePanel from '@MailManager/components/steps/TestAndSavePanel.vue'
 
-type EditTab = 'general' | 'protocol' | 'auth'
+type EditTab = 'general' | 'auxiliary' | 'protocol' | 'auth'
 
 const props = defineProps<{
   modelValue: boolean
@@ -33,19 +34,27 @@ const saving = ref(false)
 const loading = ref(false)
 const loadError = ref<string | null>(null)
 
-const localProvider = ref<ProviderObject | null>(null)
+const localProvider = shallowRef<ProviderObject | null>(null)
-const localService = ref<ServiceObject | null>(null)
+const localService = shallowRef<ServiceObject | null>(null)
-const mutated = ref(false)
 
 // Validation states
 const testAndSaveValid = ref(false)
 
+function serviceRequiresConnectionTest(service: ServiceObject | null): boolean {
+  return !!(service?.location?.mutated() || service?.identity?.mutated())
+}
+
 const tabItems = [
   {
     title: 'General',
     icon: 'mdi-view-dashboard-outline',
     value: 'general' as const
   },
+  {
+    title: 'Auxiliary Settings',
+    icon: 'mdi-tune-variant',
+    value: 'auxiliary' as const
+  },
   {
     title: 'Protocol',
     icon: 'mdi-tune-vertical',
@@ -59,7 +68,7 @@ const tabItems = [
 ]
 
 const canSave = computed(() => {
-  return testAndSaveValid.value
+  return !serviceRequiresConnectionTest(localService.value) || testAndSaveValid.value
 })
 
 const showSaveButton = computed(() => currentTab.value === 'general')
@@ -118,7 +127,6 @@ function resetForm() {
   localService.value = null
   localProvider.value = null
   loadError.value = null
-  testAndSaveValid.value = false
 }
 
 function isTabDisabled(tab: EditTab) {
@@ -131,14 +139,24 @@ function isTabDisabled(tab: EditTab) {
 
 function handleUpdate(mutatedService: ServiceObject) {
   localService.value = mutatedService
-  mutated.value = true
+
+  if (serviceRequiresConnectionTest(mutatedService)) {
+    testAndSaveValid.value = false
+  }
 }
 
 async function testConnection() {
   try {
+    if (!localService.value) {
+      return {
+        success: false,
+        message: 'Missing service configuration'
+      }
+    }
+
     let testResult = null
     
-    if (mutated.value) {
+    if (serviceRequiresConnectionTest(localService.value)) {
       testResult = await servicesStore.test(
         localService.value.provider,
         null,
@@ -165,27 +183,19 @@ async function testConnection() {
 
 async function saveAccount() {
   // No changes made, just close the dialog
-  if (!mutated.value) {
+  if (!localService.value.mutated() && !localService.value.location?.mutated() && !localService.value.identity?.mutated()) {
     close()
     return
   }
 
-  if (!localService.value?.location || !localService.value?.identity) return
-  
   saving.value = true
 
   try {
-    const accountData = {
-      label: accountLabel.value || localService.value.label,
-      enabled: accountEnabled.value,
-      location: localService.value.location,
-      identity: localService.value.identity
-    }
-
     await servicesStore.update(
       localService.value.provider,
       localService.value.identifier as string | number,
-      accountData
+      true, // delta update
+      localService.value
     )
 
     emit('saved')
@@ -254,20 +264,31 @@ async function saveAccount() {
             <v-card flat class="pa-6">
               <TestAndSavePanel
                 v-if="localProvider && localService"
-                :provider="localProvider"
+                :provider="localProvider!"
-                :service="localService"
+                :service="localService!"
                 :on-test="testConnection"
                 @update:service="handleUpdate"
               />
             </v-card>
           </v-window-item>
 
+          <v-window-item value="auxiliary">
+            <v-card flat class="pa-6">
+              <ProviderAuxiliaryPanel
+                v-if="localProvider && localService"
+                :provider="localProvider!"
+                :service="localService!"
+                @update:service="handleUpdate"
+              />
+            </v-card>
+          </v-window-item>
+
           <v-window-item value="protocol">
             <v-card flat class="pa-6">
               <ProviderProtocolPanel
                 v-if="localProvider && localService"
-                :provider="localProvider"
+                :provider="localProvider!"
-                :service="localService"
+                :service="localService!"
                 @update:service="handleUpdate"
               />
             </v-card>
@@ -277,8 +298,8 @@ async function saveAccount() {
             <v-card flat class="pa-6">
               <ProviderAuthPanel
                 v-if="localProvider && localService"
-                :provider="localProvider"
+                :provider="localProvider!"
-                :service="localService"
+                :service="localService!"
                 @update:service="handleUpdate"
               />
             </v-card>

src/components/steps/ProviderAuthPanel.vue

@@ -66,11 +66,11 @@ async function loadProviderPanel() {
   panelLoading.value = true
 
   // retrieve panel from integration store
-  const panel = integrationStore.getItems('mail_account_auth_panels').find((panel: any) => {
+  const panel = integrationStore.getItems('mail_provider_panels_auth').find((panel: any) => {
     return panel.id === providerIdentifier || panel.id.endsWith(`.${providerIdentifier}`)
   })
   if (!panel?.component) {
-    console.warn(`No config panel found for provider ID: ${providerIdentifier}`)
+    console.warn(`No panel found for provider ID: ${providerIdentifier}`)
     panelActive.value = null
     panelLoading.value = false
     return
@@ -99,19 +99,18 @@ function handleUpdate(service: ServiceObject) {
   <div class="provider-auth-panel">
     <h3 class="text-h6 mb-2">Authentication</h3>
     <p class="text-body-2 text-medium-emphasis mb-6">
-      Configure authentication for {{ localProvider?.label || 'this provider' }}.
+      Configure authentication specific settings for {{ localProvider?.label || 'this provider' }}.
     </p>
 
     <div v-if="panelLoading" class="text-center py-8">
       <v-progress-circular indeterminate color="primary" />
       <p class="text-caption text-medium-emphasis mt-2">
-        Loading authentication panel...
+        Loading panel...
       </p>
     </div>
 
-    <v-alert v-else-if="!panelActive" type="error" variant="tonal">
+    <v-alert v-else-if="!panelActive" type="info" variant="tonal">
-      <v-icon start>mdi-alert-circle</v-icon>
+      No panel available for this provider.
-      No authentication method available for this provider.
     </v-alert>
 
     <component

src/components/steps/ProviderAuxiliaryPanel.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref, shallowRef, watch } from 'vue'
+import type { Component } from 'vue'
+import { useIntegrationStore } from '@KTXC/stores/integrationStore'
+import type { ServiceObject } from '@MailManager/models/service'
+import type { ProviderObject } from '@MailManager/models/provider'
+
+const props = defineProps<{
+  provider: ProviderObject
+  service: ServiceObject
+}>()
+
+const emit = defineEmits<{
+  'update:service': [value: ServiceObject]
+}>()
+
+const integrationStore = useIntegrationStore()
+const panelCache = new Map<string, Component>()
+const panelLoading = ref(false)
+const panelActive = shallowRef<Component | null>(null)
+const localProvider = ref<ProviderObject>(props.provider)
+const localService = ref<ServiceObject>(props.service)
+
+watch(
+  () => props.provider,
+  async (provider) => {
+    localProvider.value = provider
+    await loadProviderPanel()
+  }
+)
+
+watch(
+  () => props.service,
+  (service) => {
+    localService.value = service
+  }
+)
+
+watch(
+  () => [localProvider.value?.identifier, localService.value?.provider] as const,
+  async () => {
+    await loadProviderPanel()
+  },
+  { immediate: true }
+)
+
+async function loadProviderPanel() {
+  const providerIdentifier = localProvider.value?.identifier || localService.value?.provider
+
+  if (!providerIdentifier) {
+    panelActive.value = null
+    panelLoading.value = false
+    return
+  }
+
+  if (panelCache.has(providerIdentifier)) {
+    panelActive.value = panelCache.get(providerIdentifier) || null
+    panelLoading.value = false
+    return
+  }
+
+  panelLoading.value = true
+
+  const panel = integrationStore.getItems('mail_provider_panels_auxiliary').find((panel: any) => {
+    return panel.id === providerIdentifier || panel.id.endsWith(`.${providerIdentifier}`)
+  })
+
+  if (!panel?.component) {
+    console.warn(`No auxiliary panel found for provider ID: ${providerIdentifier}`)
+    panelActive.value = null
+    panelLoading.value = false
+    return
+  }
+
+  try {
+    const module = await panel.component()
+    const component = module.default || module
+    panelCache.set(providerIdentifier, component)
+    panelActive.value = component
+  } catch (error) {
+    console.error(`Failed to load auxiliary panel for ${providerIdentifier}:`, error)
+    panelActive.value = null
+  } finally {
+    panelLoading.value = false
+  }
+}
+
+function handleUpdate(service: ServiceObject) {
+  localService.value = service
+  emit('update:service', localService.value)
+}
+</script>
+
+<template>
+  <div class="provider-auxiliary-panel">
+    <h3 class="text-h6 mb-2">Settings</h3>
+    <p class="text-body-2 text-medium-emphasis mb-6">
+      Configure provider specific settings for {{ localProvider?.label || 'this provider' }}.
+    </p>
+
+    <div v-if="panelLoading" class="text-center py-8">
+      <v-progress-circular indeterminate color="primary" />
+      <p class="text-caption text-medium-emphasis mt-2">
+        Loading panel...
+      </p>
+    </div>
+
+    <v-alert v-else-if="!panelActive" type="info" variant="tonal">
+      No panel available for this provider.
+    </v-alert>
+
+    <component
+      v-else
+      :is="panelActive"
+      :service="localService"
+      @update:service="handleUpdate"
+    />
+  </div>
+</template>

src/components/steps/ProviderProtocolPanel.vue

@@ -66,11 +66,11 @@ async function loadProviderPanel() {
   panelLoading.value = true
 
   // retrieve panel from integration store
-  const panel = integrationStore.getItems('mail_account_protocol_panels').find((panel: any) => {
+  const panel = integrationStore.getItems('mail_provider_panels_protocol').find((panel: any) => {
     return panel.id === providerIdentifier || panel.id.endsWith(`.${providerIdentifier}`)
   })
   if (!panel?.component) {
-    console.warn(`No config panel found for provider ID: ${providerIdentifier}`)
+    console.warn(`No panel found for provider ID: ${providerIdentifier}`)
     panelActive.value = null
     panelLoading.value = false
     return
@@ -97,21 +97,20 @@ function handleUpdate(service: ServiceObject) {
 
 <template>
   <div class="provider-protocol-panel">
-    <h3 class="text-h6 mb-2">Protocol Configuration</h3>
+    <h3 class="text-h6 mb-2">Protocol</h3>
     <p class="text-body-2 text-medium-emphasis mb-6">
-      Configure authentication for {{ localProvider?.label || 'this provider' }}.
+      Configure protocol specific settings for {{ localProvider?.label || 'this provider' }}.
     </p>
 
     <div v-if="panelLoading" class="text-center py-8">
       <v-progress-circular indeterminate color="primary" />
       <p class="text-caption text-medium-emphasis mt-2">
-        Loading configuration panel...
+        Loading panel...
       </p>
     </div>
 
     <v-alert v-else-if="!panelActive" type="info" variant="tonal">
-      <v-icon start>mdi-information</v-icon>
+      No panel available for this provider.
-      No configuration panel available for this provider
     </v-alert>
 
     <component

src/components/steps/ProviderSelectionPanel.vue

@@ -14,7 +14,7 @@ const selected = ref<string | null>(null)
 
 // Get provider metadata from integrations
 const providerMetadata = computed(() => {
-  const metadata = integrationStore.getItems('mail_provider_metadata')
+  const metadata = integrationStore.getItems('mail_provider_details')
   return metadata.reduce((acc: any, meta: any) => {
     acc[meta.id] = meta
     return acc

src/models/clone-plain.ts

@@ -0,0 +1,27 @@
+import { isProxy, toRaw } from 'vue';
+
+function normalizeCloneable<T>(value: T): T {
+    if (value === null || value === undefined) {
+        return value;
+    }
+
+    if (typeof value !== 'object') {
+        return value;
+    }
+
+    const rawValue = isProxy(value) ? toRaw(value) : value;
+
+    if (Array.isArray(rawValue)) {
+        return rawValue.map(item => normalizeCloneable(item)) as T;
+    }
+
+    const plainObject = Object.fromEntries(
+        Object.entries(rawValue).map(([key, nestedValue]) => [key, normalizeCloneable(nestedValue)])
+    );
+
+    return plainObject as T;
+}
+
+export function clonePlain<T>(value: T): T {
+    return structuredClone(normalizeCloneable(value));
+}

src/models/collection.ts

@@ -3,11 +3,12 @@
  */
 
 import type { CollectionInterface, CollectionModelInterface, CollectionPropertiesInterface, CollectionPropertiesModelInterface } from "@/types/collection";
+import { clonePlain } from './clone-plain';
 
 export class CollectionObject implements CollectionModelInterface {
 
     _data!: CollectionInterface<CollectionPropertiesInterface>;
-    _properties!: CollectionPropertiesObject;
+    _properties: CollectionPropertiesObject | undefined = undefined;
 
     constructor() {
         this._data = {
@@ -22,29 +23,24 @@ export class CollectionObject implements CollectionModelInterface {
     }
 
     fromJson(data: CollectionInterface): CollectionObject {
-        this._data = data;
+        this._data = clonePlain(data);
+        this._properties = undefined;
         return this;
     }
 
     toJson(): CollectionInterface {
-        const json = {
+        const json = this._properties
-            ...this._data
+            ? {
-        };
+                ...this._data,
-        if (this._properties) {
+                properties: this._properties.toJson(),
-            json.properties = this._properties.toJson();
             }
-        return json;
+            : this._data;
+
+        return clonePlain(json);
     }
 
     clone(): CollectionObject {
-        const cloned = new CollectionObject();
+        return new CollectionObject().fromJson(this.toJson());
-        cloned._data = {
-            ...this._data,
-        };
-        if (this._properties) {
-            cloned._properties = this._properties.clone();
-        }
-        return cloned;
     }
 
     /** Immutable Properties */
@@ -112,18 +108,16 @@ export class CollectionPropertiesObject implements CollectionPropertiesModelInte
     }
 
     fromJson(data: CollectionPropertiesInterface): CollectionPropertiesObject {
-        this._data = data;
+        this._data = clonePlain(data);
         return this;
     }
 
     toJson(): CollectionPropertiesInterface {
-        return this._data;
+        return clonePlain(this._data);
     }
 
     clone(): CollectionPropertiesObject {
-        const cloned = new CollectionPropertiesObject();
+        return new CollectionPropertiesObject().fromJson(this.toJson());
-        cloned._data = { ...this._data };
-        return cloned;
     }
 
     /** Immutable Properties */

src/models/entity.ts

@@ -5,11 +5,12 @@
 import type { EntityInterface, EntityModelInterface } from "@/types/entity";
 import type { MessageInterface } from "@/types/message";
 import { MessageObject } from "./message";
+import { clonePlain } from './clone-plain';
 
 export class EntityObject implements EntityModelInterface {
 
     private _data!: EntityInterface<MessageInterface>;
-    private _properties!: MessageObject;
+    private _properties: MessageObject | undefined = undefined;
 
     constructor() {
         this._data = {
@@ -27,21 +28,24 @@ export class EntityObject implements EntityModelInterface {
     }
 
     fromJson(data: EntityInterface<MessageInterface>): EntityObject {
-        this._data = data;
+        this._data = clonePlain(data);
+        this._properties = undefined;
         return this;
     }
 
     toJson(): EntityInterface<MessageInterface> {
-        return this._data;
+        const json = this._properties
+            ? {
+                ...this._data,
+                properties: this._properties.toJson(),
+            }
+            : this._data;
+
+        return clonePlain(json);
     }
 
     clone(): EntityObject {
-        const cloned = new EntityObject();
+        return new EntityObject().fromJson(this.toJson());
-        cloned._data = {
-            ...this._data
-        };
-        cloned._properties = this.properties.clone();
-        return cloned;
     }
 
     /** Metadata Properties */

src/models/identity.ts

@@ -10,18 +10,55 @@ import type {
   ServiceIdentityOAuth,
   ServiceIdentityCertificate
 } from '@/types/service';
+import { MutationProxy } from './mutation-proxy';
+import { clonePlain } from './clone-plain';
 
 /**
  * Base Identity class
  */
-export abstract class Identity {
+export abstract class Identity<T extends ServiceIdentity = ServiceIdentity> {
-  abstract toJson(): ServiceIdentity;
+  protected _original: T;
-  abstract clone(): Identity;
+  protected _mutated: Partial<T>;
+  protected _mutationProxy: MutationProxy<T>;
+  protected _data: T;
+
+  protected constructor(initial: T) {
+    this._original = clonePlain(initial);
+    this._mutated = {};
+    this._mutationProxy = new MutationProxy<T>(() => this._original, () => this._mutated);
+    this._data = this._mutationProxy.create();
+  }
+
+  protected load(data: T): this {
+    this._original = clonePlain(data);
+    this._mutated = {};
+    this._data = this._mutationProxy.create();
+    return this;
+  }
 
   toJSON(): ServiceIdentity {
     return this.toJson();
   }
 
+  toJson(): T;
+  toJson(delta: true): Partial<T>;
+  toJson(delta?: boolean): T | Partial<T> {
+    if (delta) {
+      return clonePlain(this._mutated);
+    }
+
+    return {
+      ...clonePlain(this._original),
+      ...clonePlain(this._mutated),
+    };
+  }
+
+  abstract clone(): Identity;
+
+  mutated(): boolean {
+    return Reflect.ownKeys(this._mutated).length > 0;
+  }
+
   static fromJson(data: ServiceIdentity): Identity {
     switch (data.type) {
       case 'NA':
@@ -43,48 +80,47 @@ export abstract class Identity {
 /**
  * No authentication
  */
-export class IdentityNone extends Identity {
+export class IdentityNone extends Identity<ServiceIdentityNone> {
-
-  private _data: ServiceIdentityNone;
 
   constructor() {
-    super();
+    super({
-    this._data = {
       type: 'NA'
-    };
+    });
-  }
-
-  get type(): 'NA' {
-    return this._data.type;
   }
 
   static fromJson(_data: ServiceIdentityNone): IdentityNone {
     return new IdentityNone();
   }
 
-  toJson(): ServiceIdentityNone {
-    return { ...this._data };
-  }
-
   clone(): IdentityNone {
     return IdentityNone.fromJson(this.toJson());
   }
+  
+  get type(): 'NA' {
+    return this._data.type;
+  }
+
 }
 
 /**
  * Basic authentication (username/password)
  */
-export class IdentityBasic extends Identity {
+export class IdentityBasic extends Identity<ServiceIdentityBasic> {
-
-  private _data: ServiceIdentityBasic;
 
   constructor(identity: string = '', secret: string = '') {
-    super();
+    super({
-    this._data = {
       type: 'BA',
       identity,
       secret
-    };
+    });
+  }
+
+  static fromJson(data: ServiceIdentityBasic): IdentityBasic {
+    return new IdentityBasic().load(data);
+  }
+
+  clone(): IdentityBasic {
+    return IdentityBasic.fromJson(this.toJson());
   }
 
   get type(): 'BA' {
@@ -107,32 +143,26 @@ export class IdentityBasic extends Identity {
     this._data.secret = value;
   }
 
-  static fromJson(data: ServiceIdentityBasic): IdentityBasic {
-    return new IdentityBasic(data.identity, data.secret);
-  }
-
-  toJson(): ServiceIdentityBasic {
-    return { ...this._data };
-  }
-
-  clone(): IdentityBasic {
-    return IdentityBasic.fromJson(this.toJson());
-  }
 }
 
 /**
  * Token authentication (API key, static token)
  */
-export class IdentityToken extends Identity {
+export class IdentityToken extends Identity<ServiceIdentityToken> {
-
-  private _data: ServiceIdentityToken;
 
   constructor(token: string = '') {
-    super();
+    super({
-    this._data = {
       type: 'TA',
       token
-    };
+    });
+  }
+
+  static fromJson(data: ServiceIdentityToken): IdentityToken {
+    return new IdentityToken().load(data);
+  }
+
+  clone(): IdentityToken {
+    return IdentityToken.fromJson(this.toJson());
   }
 
   get type(): 'TA' {
@@ -147,25 +177,12 @@ export class IdentityToken extends Identity {
     this._data.token = value;
   }
 
-  static fromJson(data: ServiceIdentityToken): IdentityToken {
-    return new IdentityToken(data.token);
-  }
-
-  toJson(): ServiceIdentityToken {
-    return { ...this._data };
-  }
-
-  clone(): IdentityToken {
-    return IdentityToken.fromJson(this.toJson());
-  }
 }
 
 /**
  * OAuth authentication
  */
-export class IdentityOAuth extends Identity {
+export class IdentityOAuth extends Identity<ServiceIdentityOAuth> {
-
-  private _data: ServiceIdentityOAuth;
 
   constructor(
     accessToken: string = '',
@@ -174,15 +191,32 @@ export class IdentityOAuth extends Identity {
     refreshToken?: string,
     refreshLocation?: string
   ) {
-    super();
+    super({
-    this._data = {
       type: 'OA',
       accessToken,
       accessScope,
       accessExpiry,
       refreshToken,
       refreshLocation
-    };
+    });
+  }
+
+  static fromJson(data: ServiceIdentityOAuth): IdentityOAuth {
+    return new IdentityOAuth().load(data);
+  }
+
+  clone(): IdentityOAuth {
+    return IdentityOAuth.fromJson(this.toJson());
+  }
+
+  isExpired(): boolean {
+    if (!this.accessExpiry) return false;
+    return Date.now() / 1000 >= this.accessExpiry;
+  }
+
+  expiresIn(): number {
+    if (!this.accessExpiry) return Infinity;
+    return Math.max(0, this.accessExpiry - Date.now() / 1000);
   }
 
   get type(): 'OA' {
@@ -198,11 +232,11 @@ export class IdentityOAuth extends Identity {
   }
 
   get accessScope(): string[] | undefined {
-    return this._data.accessScope;
+    return this._data.accessScope ? [...this._data.accessScope] : undefined;
   }
 
   set accessScope(value: string[] | undefined) {
-    this._data.accessScope = value;
+    this._data.accessScope = value ? [...value] : undefined;
   }
 
   get accessExpiry(): number | undefined {
@@ -229,56 +263,28 @@ export class IdentityOAuth extends Identity {
     this._data.refreshLocation = value;
   }
 
-  static fromJson(data: ServiceIdentityOAuth): IdentityOAuth {
-    return new IdentityOAuth(
-      data.accessToken,
-      data.accessScope,
-      data.accessExpiry,
-      data.refreshToken,
-      data.refreshLocation
-    );
-  }
-
-  toJson(): ServiceIdentityOAuth {
-    return {
-      type: this.type,
-      accessToken: this.accessToken,
-      ...(this.accessScope !== undefined && { accessScope: [...this.accessScope] }),
-      ...(this.accessExpiry !== undefined && { accessExpiry: this.accessExpiry }),
-      ...(this.refreshToken !== undefined && { refreshToken: this.refreshToken }),
-      ...(this.refreshLocation !== undefined && { refreshLocation: this.refreshLocation })
-    };
-  }
-
-  clone(): IdentityOAuth {
-    return IdentityOAuth.fromJson(this.toJson());
-  }
-
-  isExpired(): boolean {
-    if (!this.accessExpiry) return false;
-    return Date.now() / 1000 >= this.accessExpiry;
-  }
-
-  expiresIn(): number {
-    if (!this.accessExpiry) return Infinity;
-    return Math.max(0, this.accessExpiry - Date.now() / 1000);
-  }
 }
 
 /**
  * Client certificate authentication (mTLS)
  */
-export class IdentityCertificate extends Identity {
+export class IdentityCertificate extends Identity<ServiceIdentityCertificate> {
-  private _data: ServiceIdentityCertificate;
 
   constructor(certificate: string = '', privateKey: string = '', passphrase?: string) {
-    super();
+    super({
-    this._data = {
       type: 'CC',
       certificate,
       privateKey,
       passphrase
-    };
+    });
+  }
+
+  static fromJson(data: ServiceIdentityCertificate): IdentityCertificate {
+    return new IdentityCertificate().load(data);
+  }
+
+  clone(): IdentityCertificate {
+    return IdentityCertificate.fromJson(this.toJson());
   }
 
   get type(): 'CC' {
@@ -309,24 +315,4 @@ export class IdentityCertificate extends Identity {
     this._data.passphrase = value;
   }
 
-  static fromJson(data: ServiceIdentityCertificate): IdentityCertificate {
-    return new IdentityCertificate(
-      data.certificate,
-      data.privateKey,
-      data.passphrase
-    );
-  }
-
-  toJson(): ServiceIdentityCertificate {
-    return {
-      type: this.type,
-      certificate: this.certificate,
-      privateKey: this.privateKey,
-      ...(this.passphrase !== undefined && { passphrase: this.passphrase })
-    };
-  }
-
-  clone(): IdentityCertificate {
-    return IdentityCertificate.fromJson(this.toJson());
-  }
 }

src/models/index.ts

@@ -24,3 +24,6 @@ export {
   LocationSocketSplit,
   LocationFile
 } from './location';
+export {
+  MutationProxy
+} from './mutation-proxy';

src/models/location.ts

@@ -9,14 +9,51 @@ import type {
   ServiceLocationSocketSplit,
   ServiceLocationFile
 } from '@/types/service';
+import { MutationProxy } from './mutation-proxy';
+import { clonePlain } from './clone-plain';
 
 /**
  * Base Location class
  */
-export abstract class Location {
+export abstract class Location<T extends ServiceLocation = ServiceLocation> {
-  abstract toJson(): ServiceLocation;
+  protected _original: T;
+  protected _mutated: Partial<T>;
+  protected _mutationProxy: MutationProxy<T>;
+  protected _data: T;
+
+  protected constructor(initial: T) {
+    this._original = clonePlain(initial);
+    this._mutated = {};
+    this._mutationProxy = new MutationProxy<T>(() => this._original, () => this._mutated);
+    this._data = this._mutationProxy.create();
+  }
+
+  protected load(data: T): this {
+    this._original = clonePlain(data);
+    this._mutated = {};
+    this._data = this._mutationProxy.create();
+    return this;
+  }
+
+  toJson(): T;
+  toJson(delta: true): Partial<T>;
+  toJson(delta?: boolean): T | Partial<T> {
+    if (delta) {
+      return clonePlain(this._mutated);
+    }
+
+    return {
+      ...clonePlain(this._original),
+      ...clonePlain(this._mutated),
+    };
+  }
+
   abstract clone(): Location;
 
+  mutated(): boolean {
+    return Reflect.ownKeys(this._mutated).length > 0;
+  }
+  
   static fromJson(data: ServiceLocation): Location {
     switch (data.type) {
       case 'URI':
@@ -37,14 +74,7 @@ export abstract class Location {
  * URI-based service location for API and web services
  * Used by: JMAP, Gmail API, etc.
  */
-export class LocationUri extends Location {
+export class LocationUri extends Location<ServiceLocationUri> {
-  readonly type = 'URI' as const;
-  scheme: string;
-  host: string;
-  port: number;
-  path?: string;
-  verifyPeer: boolean;
-  verifyHost: boolean;
 
   constructor(
     scheme: string = 'https',
@@ -54,36 +84,19 @@ export class LocationUri extends Location {
     verifyPeer: boolean = true,
     verifyHost: boolean = true
   ) {
-    super();
+    super({
-    this.scheme = scheme;
+      type: 'URI',
-    this.host = host;
+      scheme,
-    this.port = port;
+      host,
-    this.path = path;
+      port,
-    this.verifyPeer = verifyPeer;
+      ...(path !== undefined && { path }),
-    this.verifyHost = verifyHost;
+      verifyPeer,
+      verifyHost,
+    });
   }
 
   static fromJson(data: ServiceLocationUri): LocationUri {
-    return new LocationUri(
+    return new LocationUri().load(data);
-      data.scheme,
-      data.host,
-      data.port,
-      data.path,
-      data.verifyPeer ?? true,
-      data.verifyHost ?? true
-    );
-  }
-
-  toJson(): ServiceLocationUri {
-    return {
-      type: this.type,
-      scheme: this.scheme,
-      host: this.host,
-      port: this.port,
-      ...(this.path && { path: this.path }),
-      ...(this.verifyPeer !== undefined && { verifyPeer: this.verifyPeer }),
-      ...(this.verifyHost !== undefined && { verifyHost: this.verifyHost })
-    };
   }
 
   getUrl(): string {
@@ -92,28 +105,68 @@ export class LocationUri extends Location {
   }
 
   clone(): LocationUri {
-    return new LocationUri(
+    return LocationUri.fromJson(structuredClone(this.toJson()));
-      this.scheme,
-      this.host,
-      this.port,
-      this.path,
-      this.verifyPeer,
-      this.verifyHost
-    );
   }
+
+  get type(): 'URI' {
+    return this._data.type;
+  }
+
+  get scheme(): string {
+    return this._data.scheme;
+  }
+
+  set scheme(value: string) {
+    this._data.scheme = value;
+  }
+
+  get host(): string {
+    return this._data.host;
+  }
+
+  set host(value: string) {
+    this._data.host = value;
+  }
+
+  get port(): number {
+    return this._data.port;
+  }
+
+  set port(value: number) {
+    this._data.port = value;
+  }
+
+  get path(): string | undefined {
+    return this._data.path;
+  }
+
+  set path(value: string | undefined) {
+    this._data.path = value;
+  }
+
+  get verifyPeer(): boolean {
+    return this._data.verifyPeer ?? true;
+  }
+
+  set verifyPeer(value: boolean) {
+    this._data.verifyPeer = value;
+  }
+
+  get verifyHost(): boolean {
+    return this._data.verifyHost ?? true;
+  }
+
+  set verifyHost(value: boolean) {
+    this._data.verifyHost = value;
+  }
+
 }
 
 /**
  * Single socket-based service location
  * Used by: services using a single host/port combination
  */
-export class LocationSocketSole extends Location {
+export class LocationSocketSole extends Location<ServiceLocationSocketSole> {
-  readonly type = 'SOCKET_SOLE' as const;
-  host: string;
-  port: number;
-  encryption: 'none' | 'ssl' | 'tls' | 'starttls';
-  verifyPeer: boolean;
-  verifyHost: boolean;
 
   constructor(
     host: string = '',
@@ -122,62 +175,75 @@ export class LocationSocketSole extends Location {
     verifyPeer: boolean = true,
     verifyHost: boolean = true
   ) {
-    super();
+    super({
-    this.host = host;
+      type: 'SOCKET_SOLE',
-    this.port = port;
+      host,
-    this.encryption = encryption;
+      port,
-    this.verifyPeer = verifyPeer;
+      encryption,
-    this.verifyHost = verifyHost;
+      verifyPeer,
+      verifyHost,
+    });
   }
 
   static fromJson(data: ServiceLocationSocketSole): LocationSocketSole {
-    return new LocationSocketSole(
+    return new LocationSocketSole().load(data);
-      data.host,
-      data.port,
-      data.encryption,
-      data.verifyPeer ?? true,
-      data.verifyHost ?? true
-    );
-  }
-
-  toJson(): ServiceLocationSocketSole {
-    return {
-      type: this.type,
-      host: this.host,
-      port: this.port,
-      encryption: this.encryption,
-      ...(this.verifyPeer !== undefined && { verifyPeer: this.verifyPeer }),
-      ...(this.verifyHost !== undefined && { verifyHost: this.verifyHost })
-    };
   }
 
   clone(): LocationSocketSole {
-    return new LocationSocketSole(
+    return LocationSocketSole.fromJson(structuredClone(this.toJson()));
-      this.host,
-      this.port,
-      this.encryption,
-      this.verifyPeer,
-      this.verifyHost
-    );
   }
+
+  get type(): 'SOCKET_SOLE' {
+    return this._data.type;
+  }
+
+  get host(): string {
+    return this._data.host;
+  }
+
+  set host(value: string) {
+    this._data.host = value;
+  }
+
+  get port(): number {
+    return this._data.port;
+  }
+
+  set port(value: number) {
+    this._data.port = value;
+  }
+
+  get encryption(): 'none' | 'ssl' | 'tls' | 'starttls' {
+    return this._data.encryption;
+  }
+
+  set encryption(value: 'none' | 'ssl' | 'tls' | 'starttls') {
+    this._data.encryption = value;
+  }
+
+  get verifyPeer(): boolean {
+    return this._data.verifyPeer ?? true;
+  }
+
+  set verifyPeer(value: boolean) {
+    this._data.verifyPeer = value;
+  }
+
+  get verifyHost(): boolean {
+    return this._data.verifyHost ?? true;
+  }
+
+  set verifyHost(value: boolean) {
+    this._data.verifyHost = value;
+  }
+
 }
 
 /**
  * Split socket-based service location
  * Used by: traditional IMAP/SMTP configurations
  */
-export class LocationSocketSplit extends Location {
+export class LocationSocketSplit extends Location<ServiceLocationSocketSplit> {
-  readonly type = 'SOCKET_SPLIT' as const;
-  inboundHost: string;
-  inboundPort: number;
-  inboundEncryption: 'none' | 'ssl' | 'tls' | 'starttls';
-  outboundHost: string;
-  outboundPort: number;
-  outboundEncryption: 'none' | 'ssl' | 'tls' | 'starttls';
-  inboundVerifyPeer: boolean;
-  inboundVerifyHost: boolean;
-  outboundVerifyPeer: boolean;
-  outboundVerifyHost: boolean;
 
   constructor(
     inboundHost: string = '',
@@ -191,91 +257,146 @@ export class LocationSocketSplit extends Location {
     outboundVerifyPeer: boolean = true,
     outboundVerifyHost: boolean = true
   ) {
-    super();
+    super({
-    this.inboundHost = inboundHost;
+      type: 'SOCKET_SPLIT',
-    this.inboundPort = inboundPort;
+      inboundHost,
-    this.inboundEncryption = inboundEncryption;
+      inboundPort,
-    this.outboundHost = outboundHost;
+      inboundEncryption,
-    this.outboundPort = outboundPort;
+      outboundHost,
-    this.outboundEncryption = outboundEncryption;
+      outboundPort,
-    this.inboundVerifyPeer = inboundVerifyPeer;
+      outboundEncryption,
-    this.inboundVerifyHost = inboundVerifyHost;
+      inboundVerifyPeer,
-    this.outboundVerifyPeer = outboundVerifyPeer;
+      inboundVerifyHost,
-    this.outboundVerifyHost = outboundVerifyHost;
+      outboundVerifyPeer,
+      outboundVerifyHost,
+    });
   }
 
   static fromJson(data: ServiceLocationSocketSplit): LocationSocketSplit {
-    return new LocationSocketSplit(
+    return new LocationSocketSplit().load(data);
-      data.inboundHost,
-      data.inboundPort,
-      data.inboundEncryption,
-      data.outboundHost,
-      data.outboundPort,
-      data.outboundEncryption,
-      data.inboundVerifyPeer ?? true,
-      data.inboundVerifyHost ?? true,
-      data.outboundVerifyPeer ?? true,
-      data.outboundVerifyHost ?? true
-    );
-  }
-
-  toJson(): ServiceLocationSocketSplit {
-    return {
-      type: this.type,
-      inboundHost: this.inboundHost,
-      inboundPort: this.inboundPort,
-      inboundEncryption: this.inboundEncryption,
-      outboundHost: this.outboundHost,
-      outboundPort: this.outboundPort,
-      outboundEncryption: this.outboundEncryption,
-      ...(this.inboundVerifyPeer !== undefined && { inboundVerifyPeer: this.inboundVerifyPeer }),
-      ...(this.inboundVerifyHost !== undefined && { inboundVerifyHost: this.inboundVerifyHost }),
-      ...(this.outboundVerifyPeer !== undefined && { outboundVerifyPeer: this.outboundVerifyPeer }),
-      ...(this.outboundVerifyHost !== undefined && { outboundVerifyHost: this.outboundVerifyHost })
-    };
   }
 
   clone(): LocationSocketSplit {
-    return new LocationSocketSplit(
+    return LocationSocketSplit.fromJson(structuredClone(this.toJson()));
-      this.inboundHost,
-      this.inboundPort,
-      this.inboundEncryption,
-      this.outboundHost,
-      this.outboundPort,
-      this.outboundEncryption,
-      this.inboundVerifyPeer,
-      this.inboundVerifyHost,
-      this.outboundVerifyPeer,
-      this.outboundVerifyHost
-    );
   }
+
+  get type(): 'SOCKET_SPLIT' {
+    return this._data.type;
+  }
+
+  get inboundHost(): string {
+    return this._data.inboundHost;
+  }
+
+  set inboundHost(value: string) {
+    this._data.inboundHost = value;
+  }
+
+  get inboundPort(): number {
+    return this._data.inboundPort;
+  }
+
+  set inboundPort(value: number) {
+    this._data.inboundPort = value;
+  }
+
+  get inboundEncryption(): 'none' | 'ssl' | 'tls' | 'starttls' {
+    return this._data.inboundEncryption;
+  }
+
+  set inboundEncryption(value: 'none' | 'ssl' | 'tls' | 'starttls') {
+    this._data.inboundEncryption = value;
+  }
+
+  get outboundHost(): string {
+    return this._data.outboundHost;
+  }
+
+  set outboundHost(value: string) {
+    this._data.outboundHost = value;
+  }
+
+  get outboundPort(): number {
+    return this._data.outboundPort;
+  }
+
+  set outboundPort(value: number) {
+    this._data.outboundPort = value;
+  }
+
+  get outboundEncryption(): 'none' | 'ssl' | 'tls' | 'starttls' {
+    return this._data.outboundEncryption;
+  }
+
+  set outboundEncryption(value: 'none' | 'ssl' | 'tls' | 'starttls') {
+    this._data.outboundEncryption = value;
+  }
+
+  get inboundVerifyPeer(): boolean {
+    return this._data.inboundVerifyPeer ?? true;
+  }
+
+  set inboundVerifyPeer(value: boolean) {
+    this._data.inboundVerifyPeer = value;
+  }
+
+  get inboundVerifyHost(): boolean {
+    return this._data.inboundVerifyHost ?? true;
+  }
+
+  set inboundVerifyHost(value: boolean) {
+    this._data.inboundVerifyHost = value;
+  }
+
+  get outboundVerifyPeer(): boolean {
+    return this._data.outboundVerifyPeer ?? true;
+  }
+
+  set outboundVerifyPeer(value: boolean) {
+    this._data.outboundVerifyPeer = value;
+  }
+
+  get outboundVerifyHost(): boolean {
+    return this._data.outboundVerifyHost ?? true;
+  }
+
+  set outboundVerifyHost(value: boolean) {
+    this._data.outboundVerifyHost = value;
+  }
+
 }
 
 /**
  * File-based service location
  * Used by: local file system providers
  */
-export class LocationFile extends Location {
+export class LocationFile extends Location<ServiceLocationFile> {
-  readonly type = 'FILE' as const;
-  path: string;
 
   constructor(path: string = '') {
-    super();
+    super({
-    this.path = path;
+      type: 'FILE',
+      path,
+    });
   }
 
   static fromJson(data: ServiceLocationFile): LocationFile {
-    return new LocationFile(data.path);
+    return new LocationFile().load(data);
-  }
-
-  toJson(): ServiceLocationFile {
-    return {
-      type: this.type,
-      path: this.path
-    };
   }
 
   clone(): LocationFile {
-    return new LocationFile(this.path);
+    return LocationFile.fromJson(structuredClone(this.toJson()));
   }
+
+  get type(): 'FILE' {
+    return this._data.type;
+  }
+
+  get path(): string {
+    return this._data.path;
+  }
+
+  set path(value: string) {
+    this._data.path = value;
+  }
+
 }

src/models/message.ts

@@ -8,6 +8,7 @@ import type {
     MessagePartInterface,
     MessagePartModelInterface
 } from "@/types/message";
+import { clonePlain } from './clone-plain';
 
 /**
  * Message class for working with message objects
@@ -25,29 +26,24 @@ export class MessageObject implements MessageModelInterface {
     }
 
     fromJson(data: MessageInterface): MessageObject {
-        this._data = data;
+        this._data = clonePlain(data);
+        this._body = null;
         return this;
     }
 
     toJson(): MessageInterface {
-        const json = {
+        const json = this._body
-            ...this._data
+            ? {
-        };
+                ...this._data,
-        if (this._body) {
+                body: this._body.toJson(),
-            json.body = this._body.toJson();
             }
-        return json;
+            : this._data;
+
+        return clonePlain(json);
     }
 
     clone(): MessageObject {
-        const cloned = new MessageObject();
+        return new MessageObject().fromJson(this.toJson());
-        cloned._data = {
-            ...this._data,
-        };
-        if (this._body) {
-            cloned._body = this._body.clone();
-        }
-        return cloned;
     }
 
     /** Properties */
@@ -101,7 +97,7 @@ export class MessageObject implements MessageModelInterface {
     }
 
     get flags(): { read?: boolean; flagged?: boolean; answered?: boolean; draft?: boolean } | {} {
-        return this._data.flags ?? {};
+        return clonePlain(this._data.flags ?? {});
     }
 
     get body(): MessagePartObject | null {
@@ -195,20 +191,20 @@ export class MessageAddressObject implements MessageAddressInterface {
     _data: MessageAddressInterface;
 
     constructor(data: MessageAddressInterface) {
-        this._data = data;
+        this._data = clonePlain(data);
     }
 
     fromJson(data: MessageAddressInterface): MessageAddressObject {
-        this._data = data;
+        this._data = clonePlain(data);
         return this;
     }
 
     toJson(): MessageAddressInterface {
-        return this._data;
+        return clonePlain(this._data);
     }
 
     clone(): MessageAddressObject {
-        return new MessageAddressObject({ ...this._data });
+        return new MessageAddressObject(this.toJson());
     }
 
     /** Properties */
@@ -233,38 +229,40 @@ export class MessagePartObject implements MessagePartModelInterface {
 
     constructor(data?: Partial<MessagePartInterface>) {
         this._data = {
-            partId: data?.partId ?? null,
+            partId: clonePlain(data?.partId ?? null),
-            blobId: data?.blobId ?? null,
+            blobId: clonePlain(data?.blobId ?? null),
-            size: data?.size ?? null,
+            size: clonePlain(data?.size ?? null),
-            name: data?.name ?? null,
+            name: clonePlain(data?.name ?? null),
-            type: data?.type ?? null,
+            type: clonePlain(data?.type ?? null),
-            charset: data?.charset ?? null,
+            charset: clonePlain(data?.charset ?? null),
-            disposition: data?.disposition ?? null,
+            disposition: clonePlain(data?.disposition ?? null),
-            cid: data?.cid ?? null,
+            cid: clonePlain(data?.cid ?? null),
-            language: data?.language ?? null,
+            language: clonePlain(data?.language ?? null),
-            location: data?.location ?? null,
+            location: clonePlain(data?.location ?? null),
-            content: data?.content ?? null,
+            content: clonePlain(data?.content ?? null),
-            subParts: data?.subParts ?? [],
+            subParts: clonePlain(data?.subParts ?? []),
         };
     }
 
     fromJson(data: MessagePartInterface): MessagePartObject {
-        this._data = data;
+        this._data = clonePlain(data);
+        this._subParts = [];
         return this;
     }
 
     toJson(): MessagePartInterface {
-        const json = {
+        const json = this._subParts.length > 0
+            ? {
                 ...this._data,
-        };
+                subParts: this._subParts.map(subPart => subPart.toJson()),
-        if (this._subParts.length > 0) {
-            json.subParts = this._subParts.map(subPart => subPart.toJson());
             }
-        return json
+            : this._data;
+
+        return clonePlain(json);
     }
 
     clone(): MessagePartObject {
-        return new MessagePartObject(JSON.parse(JSON.stringify(this._data)));
+        return new MessagePartObject().fromJson(this.toJson());
     }
 
     /** Properties */

src/models/mutation-proxy.ts

@@ -0,0 +1,61 @@
+import { clonePlain } from './clone-plain';
+
+export class MutationProxy<T extends object> {
+
+    private readonly getOriginal: () => T;
+    private readonly getMutated: () => Partial<T>;
+
+    constructor(
+        getOriginal: () => T,
+        getMutated: () => Partial<T>,
+    ) {
+        this.getOriginal = getOriginal;
+        this.getMutated = getMutated;
+    }
+
+    create(): T {
+        return new Proxy({} as T, {
+            get: (_target, prop: string | symbol) => {
+                if (typeof prop !== 'string') {
+                    return undefined;
+                }
+
+                const key = prop as keyof T;
+                const mutated = this.getMutated();
+                const original = this.getOriginal();
+                return key in mutated ? mutated[key] : original[key];
+            },
+            set: (_target, prop: string | symbol, value: unknown) => {
+                if (typeof prop === 'string') {
+                    const key = prop as keyof T;
+                    (this.getMutated() as Record<keyof T, unknown>)[key] = clonePlain(value);
+                }
+
+                return true;
+            },
+            has: (_target, prop: string | symbol) => {
+                if (typeof prop !== 'string') {
+                    return false;
+                }
+
+                const mutated = this.getMutated();
+                const original = this.getOriginal();
+                return prop in mutated || prop in original;
+            },
+            ownKeys: () => {
+                const mutated = this.getMutated();
+                const original = this.getOriginal();
+
+                return Array.from(new Set([
+                    ...Reflect.ownKeys(original),
+                    ...Reflect.ownKeys(mutated),
+                ]));
+            },
+            getOwnPropertyDescriptor: () => ({
+                enumerable: true,
+                configurable: true,
+            }),
+        });
+    }
+
+}

src/models/provider.ts

@@ -7,6 +7,7 @@ import type {
     ProviderCapabilitiesInterface,
     ProviderModelInterface
 } from "@/types/provider";
+import { clonePlain } from './clone-plain';
 
 export class ProviderObject implements ProviderModelInterface {
 
@@ -23,18 +24,16 @@ export class ProviderObject implements ProviderModelInterface {
     }
 
     fromJson(data: ProviderInterface): ProviderObject {
-        this._data = data;
+        this._data = clonePlain(data);
         return this;
     }
 
     toJson(): ProviderInterface {
-        return this._data;
+        return clonePlain(this._data);
     }
 
     clone(): ProviderObject {
-        const cloned = new ProviderObject();
+        return new ProviderObject().fromJson(this.toJson());
-        cloned._data = { ...this._data };
-        return cloned;
     }
 
     capable(capability: keyof ProviderCapabilitiesInterface): boolean {
@@ -60,7 +59,7 @@ export class ProviderObject implements ProviderModelInterface {
     }
 
     get capabilities(): ProviderCapabilitiesInterface {
-        return this._data.capabilities;
+        return clonePlain(this._data.capabilities);
     }
 
 }

src/models/service.ts

@@ -10,15 +10,20 @@ import type {
 } from "@/types/service";
 import { Identity } from './identity';
 import { Location } from './location';
+import { MutationProxy } from './mutation-proxy';
+import { clonePlain } from './clone-plain';
 
 export class ServiceObject implements ServiceModelInterface {
 
+    private _original: ServiceInterface;
+    private _mutated: Partial<ServiceInterface>;
+    private _mutationProxy = new MutationProxy<ServiceInterface>(() => this._original, () => this._mutated);
     _data!: ServiceInterface;
-    _location: Location | null = null;
+    _location: Location | null | undefined = undefined;
-    _identity: Identity | null = null;
+    _identity: Identity | null | undefined = undefined;
 
     constructor() {
-        this._data = {
+        this._original = {
             '@type': 'mail:service',
             version: 1,
             provider: '',
@@ -27,43 +32,64 @@ export class ServiceObject implements ServiceModelInterface {
             enabled: false,
             capabilities: {}
         };
+        this._mutated = {};
+        this._data = this._mutationProxy.create();
     }
 
     fromJson(data: ServiceInterface): ServiceObject {
-        this._data = data;
+        this._original = clonePlain(data);
+        this._mutated = {};
+        this._data = this._mutationProxy.create();
+        this._location = undefined;
+        this._identity = undefined;
         return this;
     }
 
-    toJson(): ServiceInterface {
+    toJson(): ServiceInterface;
-        const json = {
+    toJson(delta: true): Partial<ServiceInterface>;
-            ...this._data,
+    toJson(delta?: boolean): ServiceInterface | Partial<ServiceInterface> {
-            capabilities: this._data.capabilities ? { ...this._data.capabilities } : this._data.capabilities,
+        if (this._location !== undefined) {
-            secondaryAddresses: this._data.secondaryAddresses ? [...this._data.secondaryAddresses] : this._data.secondaryAddresses,
+            if (!delta) {
-            auxiliary: this._data.auxiliary ? { ...this._data.auxiliary } : this._data.auxiliary,
+                // handled below to preserve full ServiceInterface typing
-        };
+            }
-
-        if (this._location !== null) {
-            json.location = this._location.toJson();
         }
 
-        if (this._identity !== null) {
+        if (delta) {
-            json.identity = this._identity.toJson();
+            const json: Partial<ServiceInterface> = clonePlain(this._mutated);
+
+            if (this._location?.mutated()) {
+                json.location = this._location.toJson(true) as ServiceInterface['location'];
+            }
+
+            if (this._identity?.mutated()) {
+                json.identity = this._identity.toJson(true) as ServiceInterface['identity'];
+            }
+
+            return json;
+        }
+
+        const json: ServiceInterface = {
+            ...clonePlain(this._original),
+            ...clonePlain(this._mutated),
+        };
+
+        if (this._location !== undefined) {
+            json.location = this._location ? this._location.toJson() : null;
+        }
+
+        if (this._identity !== undefined) {
+            json.identity = this._identity ? this._identity.toJson() : null;
         }
 
         return json;
     }
 
     clone(): ServiceObject {
-        const cloned = new ServiceObject();
+        return new ServiceObject().fromJson(this.toJson());
-        cloned._data = {
+    }
-            ...this._data,
+
-            capabilities: this._data.capabilities ? { ...this._data.capabilities } : this._data.capabilities,
+    mutated(): boolean {
-            secondaryAddresses: this._data.secondaryAddresses ? [...this._data.secondaryAddresses] : this._data.secondaryAddresses,
+        return Reflect.ownKeys(this._mutated).length > 0 || (this._location?.mutated() ?? false) || (this._identity?.mutated() ?? false);
-            auxiliary: this._data.auxiliary ? { ...this._data.auxiliary } : this._data.auxiliary,
-        };
-        cloned._location = this._location ? this._location.clone() : null;
-        cloned._identity = this._identity ? this._identity.clone() : null;
-        return cloned;
     }
 
     capable(capability: keyof ServiceCapabilitiesInterface): boolean {
@@ -96,10 +122,18 @@ export class ServiceObject implements ServiceModelInterface {
         return this._data.primaryAddress ?? null;
     }
 
+    set primaryAddress(value: string | null) {
+        this._data.primaryAddress = value;
+    }
+
     get secondaryAddresses(): string[] {
         return this._data.secondaryAddresses ?? [];
     }
 
+    set secondaryAddresses(value: string[] | null) {
+        this._data.secondaryAddresses = value;
+    }
+
     /** Mutable Properties */
 
     get label(): string | null {
@@ -119,15 +153,16 @@ export class ServiceObject implements ServiceModelInterface {
     }
 
     get location(): Location | null {
-        if (this._location) {
+        if (this._location !== undefined) {
             return this._location;
         }
-        else if (this._location === null && this._data.location) {
+
-            const location = Location.fromJson(this._data.location as ServiceLocation);
+        if (this._data.location) {
-            this._location = location;
+            this._location = Location.fromJson(this._data.location as ServiceLocation);
-            return location;
+            return this._location;
         }
 
+        this._location = null;
         return null;
     }
 
@@ -136,15 +171,16 @@ export class ServiceObject implements ServiceModelInterface {
     }
 
     get identity(): Identity | null {
-        if (this._identity) {
+        if (this._identity !== undefined) {
             return this._identity;
         }
-        else if (this._data.identity) {
+
-            const identity = Identity.fromJson(this._data.identity);
+        if (this._data.identity) {
-            this._identity = identity;
+            this._identity = Identity.fromJson(this._data.identity);
-            return identity;
+            return this._identity;
         }
 
+        this._identity = null;
         return null;
     }
 

src/pages/AccountsPage.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { useServicesStore } from '@/stores/servicesStore'
+import { useIntegrationStore } from '@KTXC/stores/integrationStore'
-import AddAccountDialog from '@/components/AddAccountDialog.vue'
+import { useServicesStore } from '../stores/servicesStore'
-import type { ServiceObject } from '@/models'
+import AddAccountDialog from '../components/AddAccountDialog.vue'
+import EditAccountDialog from '../components/EditAccountDialog.vue'
+import type { ServiceObject } from '../models'
 
 const servicesStore = useServicesStore()
+const integrationStore = useIntegrationStore()
 
 const showAddDialog = ref(false)
 const showEditDialog = ref(false)
@@ -12,13 +15,20 @@ const showDeleteConfirm = ref(false)
 const showTestResult = ref(false)
 const selectedAccount = ref<any>({})
 const loading = ref(false)
-const saving = ref(false)
 const deleting = ref(false)
 const testingId = ref<string | null>(null)
 const testResult = ref<any>(null)
 
 const groupedServices = computed(() => servicesStore.servicesByProvider)
 
+const providerMetadata = computed(() => {
+  return integrationStore.getItems('mail_provider_details').reduce((metadata, entry: any) => {
+    const providerId = entry.id.split('.').pop() || entry.id
+    metadata[providerId] = entry
+    return metadata
+  }, {} as Record<string, { icon?: string; label?: string }>)
+})
+
 const hasAccounts = computed(() => servicesStore.has)
 
 onMounted(async () => {
@@ -31,44 +41,18 @@ onMounted(async () => {
 })
 
 function getProviderIcon(providerId: string): string {
-  const icons: Record<string, string> = {
+  return providerMetadata.value[providerId]?.icon || 'mdi-email'
-    'smtp': 'mdi-email-multiple',
-    'jmap': 'mdi-api',
-    'exchange': 'mdi-microsoft',
-  }
-  return icons[providerId] || 'mdi-email'
 }
 
 function getProviderLabel(providerId: string): string {
-  const labels: Record<string, string> = {
+  return providerMetadata.value[providerId]?.label || providerId.toUpperCase()
-    'smtp': 'SMTP/IMAP',
-    'jmap': 'JMAP',
-    'exchange': 'Microsoft Exchange',
-  }
-  return labels[providerId] || providerId.toUpperCase()
 }
 
-function editAccount(account: any) {
+function editAccount(account: ServiceObject) {
-  selectedAccount.value = { ...account }
+  selectedAccount.value = account
   showEditDialog.value = true
 }
 
-async function saveEdit() {
-  saving.value = true
-  try {
-    await servicesStore.update(
-      selectedAccount.value.provider,
-      selectedAccount.value.identifier,
-      selectedAccount.value
-    )
-    showEditDialog.value = false
-  } catch (error) {
-    console.error('Failed to update account:', error)
-  } finally {
-    saving.value = false
-  }
-}
-
 function confirmDelete(account: any) {
   selectedAccount.value = account
   showDeleteConfirm.value = true
@@ -94,9 +78,7 @@ async function testAccount(service: ServiceObject) {
   try {
     const result = await servicesStore.test(
       service.provider,
-      service.identifier,
+      service.identifier
-      service.location,
-      service.identity
     )
     testResult.value = result
     showTestResult.value = true
@@ -112,6 +94,7 @@ async function testAccount(service: ServiceObject) {
 }
 
 async function handleAccountSaved() {
+  showEditDialog.value = false
   await servicesStore.list()
 }
 </script>
@@ -292,42 +275,12 @@ async function handleAccountSaved() {
     />
 
     <!-- Edit Account Dialog -->
-    <v-dialog
+    <EditAccountDialog
       v-model="showEditDialog"
-      max-width="600"
+      :service-provider="selectedAccount?.provider || ''"
-    >
+      :service-identifier="selectedAccount?.identifier || ''"
-      <v-card>
+      @saved="handleAccountSaved"
-        <v-card-title>Edit Account</v-card-title>
-        <v-card-text>
-          <v-text-field
-            v-model="selectedAccount.label"
-            label="Account Name"
-            variant="outlined"
     />
-          <v-switch
-            v-model="selectedAccount.enabled"
-            label="Enable this account"
-            color="primary"
-          />
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn
-            variant="text"
-            @click="showEditDialog = false"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="primary"
-            :loading="saving"
-            @click="saveEdit"
-          >
-            Save
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
 
     <!-- Delete Confirmation Dialog -->
     <v-dialog

src/services/serviceService.ts

@@ -31,7 +31,7 @@ import { ServiceObject } from '../models/service';
  */
 function createServiceObject(data: ServiceInterface): ServiceObject {
   const integrationStore = useIntegrationStore();
-  const factoryItem = integrationStore.getItemById('mail_service_factory', data.provider) as any;
+  const factoryItem = integrationStore.getItemById('mail_provider_factory_service', data.provider) as any;
   const factory = factoryItem?.factory;
   
   // Use provider factory if available, otherwise base class

src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/stores/servicesStore.ts

@@ -13,6 +13,10 @@ import type {
   ServiceIdentity,
   ServiceInterface,
 } from '../types'
+import {
+  Location, 
+  Identity
+} from '@/models'
 
 export const useServicesStore = defineStore('mailServicesStore', () => {
   // State
@@ -34,6 +38,11 @@ export const useServicesStore = defineStore('mailServicesStore', () => {
    */
   const services = computed(() => Object.values(_services.value))
 
+  /**
+   * Get all enabled services present in store
+   */
+  const servicesEnabled = computed(() => services.value.filter(service => service.enabled))
+
   /**
    * Get all services present in store grouped by provider
    */
@@ -73,7 +82,11 @@ export const useServicesStore = defineStore('mailServicesStore', () => {
   function serviceByIdentifier(identifier: ServiceIdentifier, retrieve: boolean = false): ServiceObject | null {
     if (retrieve === true && !_services.value[identifier]) {
       console.debug(`[Mail Manager][Store] - Force fetching service "${identifier}"`)
-      fetch(provider, identifier)
+      const separatorIndex = identifier.indexOf(':')
+      const provider = identifier.slice(0, separatorIndex)
+      const serviceIdentifier = identifier.slice(separatorIndex + 1)
+
+      void fetch(provider, serviceIdentifier)
     }
     
     return _services.value[identifier] ?? null
@@ -102,8 +115,8 @@ export const useServicesStore = defineStore('mailServicesStore', () => {
   /**
    * Unique key for a service
    */
-  function identifierKey(provider: string, identifier: string | number | null): string {
+  function identifierKey(provider: string, identifier: string | number | null): ServiceIdentifier {
-    return `${provider}:${identifier ?? ''}`
+    return `${provider}:${identifier ?? ''}` as ServiceIdentifier
   }
 
   // Actions
@@ -223,14 +236,23 @@ export const useServicesStore = defineStore('mailServicesStore', () => {
    * 
    * @param provider - provider identifier for the service to update
    * @param identifier - service identifier for the service to update
-   * @param data - partial service data for update
+   * @param delta - whether the update is a delta (partial) update or a full replacement
+   * @param data - service data for update
    * 
    * @returns Promise with updated service object
    */
-  async function update(provider: string, identifier: string | number, data: Partial<ServiceInterface>): Promise<ServiceObject> {
+  async function update(provider: string, identifier: string | number, delta: boolean, data: ServiceObject | Partial<ServiceInterface>): Promise<ServiceObject> {
     transceiving.value = true
     try {
-      const service = await serviceService.update({ provider, identifier, data })
+      // convert ServiceObject to JSON if needed
+      let payload: Partial<ServiceInterface>
+      if (data instanceof ServiceObject) {
+        payload = data.toJson(delta)
+      } else {
+        payload = data
+      }
+
+      const service = await serviceService.update({ provider, identifier, delta, data: payload })
       
       // Merge updated service into state
       const key = identifierKey(service.provider, service.identifier)
@@ -323,11 +345,30 @@ export const useServicesStore = defineStore('mailServicesStore', () => {
   async function test(
     provider: string,
     identifier?: string | number | null,
-    location?: ServiceLocation | null,
+    location?: ServiceLocation | Location | null,
-    identity?: ServiceIdentity | null,
+    identity?: ServiceIdentity | Identity | null,
   ): Promise<any> {
     transceiving.value = true
     try {
+
+      if (provider === undefined || provider === null) {
+        console.error('[Mail Manager][Store] - Provider is required for testing service')
+        throw new Error('Provider is required for testing service')
+      }
+
+      if (identifier === undefined && (location === undefined || location === null) && (identity === undefined || identity === null)) {
+        console.error('[Mail Manager][Store] - Either identifier or location/identity is required for testing service')
+        throw new Error('Either identifier or location/identity is required for testing service')
+      }
+
+      if (location && location instanceof Location) {
+        location = location.toJson()
+      }
+      
+      if (identity && identity instanceof Identity) {
+        identity = identity.toJson()
+      }
+
       const response = await serviceService.test({ provider, identifier, location, identity })
       
       console.debug('[Mail Manager][Store] - Successfully tested service:', provider, identifier || location)
@@ -348,6 +389,7 @@ export const useServicesStore = defineStore('mailServicesStore', () => {
     count,
     has,
     services,
+    servicesEnabled,
     servicesByProvider,
     
     // Actions

src/types/service.ts

@@ -117,6 +117,7 @@ export interface ServiceCreateResponse extends ServiceInterface {}
 export interface ServiceUpdateRequest {
   provider: string;
   identifier: string | number;
+  delta?: boolean;  // If true, 'data' contains only fields to update (partial update). If false or omitted, 'data' is a full replacement.
   data: Partial<ServiceInterface>;
 }
 

tests/js/unit/base.test.ts

@@ -1,30 +0,0 @@
-import { describe, it, expect } from 'vitest'
-
-describe('Basic Tests', () => {
-  it('should perform basic assertion', () => {
-    expect(true).toBe(true)
-  })
-
-  it('should test array operations', () => {
-    const array = ['foo', 'bar', 'baz']
-    
-    expect(array).toHaveLength(3)
-    expect(array).toContain('bar')
-    expect(array[0]).toBe('foo')
-  })
-
-  it('should test string operations', () => {
-    const string = 'Hello, World!'
-    
-    expect(string).toContain('World')
-    expect(string.length).toBe(13)
-  })
-
-  it('should test object operations', () => {
-    const obj = { foo: 'bar', count: 42 }
-    
-    expect(obj).toHaveProperty('foo')
-    expect(obj.foo).toBe('bar')
-    expect(obj.count).toBeGreaterThan(40)
-  })
-})

tests/js/vitest.config.ts

@@ -1,33 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { defineConfig, configDefaults } from 'vitest/config'
-import vue from '@vitejs/plugin-vue'
-import vuetify from 'vite-plugin-vuetify'
-import path from 'path'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-export default defineConfig({
-  plugins: [vue(), vuetify()],
-  resolve: {
-    alias: {
-      '@KTXC': path.resolve(__dirname, '../../../core/src'),
-    },
-  },
-  test: {
-    environment: 'jsdom',
-    exclude: [...configDefaults.exclude, 'e2e/**'],
-    root: fileURLToPath(new URL('../../', import.meta.url)),
-    coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json', 'html'],
-      exclude: [
-        'node_modules/',
-        'tests/',
-        '**/*.d.ts',
-        '**/*.config.*',
-        '**/dist/**',
-      ],
-    },
-  },
-})

tsconfig.app.json

@@ -16,5 +16,5 @@
       "@MailManager/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }