feat: lots more improvements

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
2026-04-25 15:41:16 -04:00
parent 86e4772d45
commit 99a68737d1
26 changed files with 902 additions and 596 deletions
--- a/lib/Controllers/DefaultController.php
+++ b/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']
        );
    }
--- a/lib/Manager.php
+++ b/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
--- a/src/components/AddAccountDialog.vue
+++ b/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 selectedService = ref<ServiceObject | null>(null)
+const selectedProvider = shallowRef<ProviderObject | 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 (!serviceData.location || !serviceData.identity) {
+  if (!selectedService.value.location || !selectedService.value.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,
-    serviceData.identity
+    selectedService.value.location,
+    selectedService.value.identity
  )

  return testResult
--- a/src/components/EditAccountDialog.vue
+++ b/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 localService = ref<ServiceObject | null>(null)
-const mutated = ref(false)
+const localProvider = shallowRef<ProviderObject | null>(null)
+const localService = shallowRef<ServiceObject | null>(null)

 // 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"
-                :service="localService"
+                :provider="localProvider!"
+                :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"
-                :service="localService"
+                :provider="localProvider!"
+                :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"
-                :service="localService"
+                :provider="localProvider!"
+                :service="localService!"
                @update:service="handleUpdate"
              />
            </v-card>
--- a/src/components/steps/ProviderAuthPanel.vue
+++ b/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-icon start>mdi-alert-circle</v-icon>
-      No authentication method available for this provider.
+    <v-alert v-else-if="!panelActive" type="info" variant="tonal">
+      No panel available for this provider.
    </v-alert>

    <component
--- a/src/components/steps/ProviderAuxiliaryPanel.vue
+++ b/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>
--- a/src/components/steps/ProviderProtocolPanel.vue
+++ b/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 configuration panel available for this provider
+      No panel available for this provider.
    </v-alert>

    <component
--- a/src/components/steps/ProviderSelectionPanel.vue
+++ b/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
--- a/src/models/clone-plain.ts
+++ b/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));
+}
--- a/src/models/collection.ts
+++ b/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 = {
-            ...this._data
-        };
-        if (this._properties) {
-            json.properties = this._properties.toJson();
-        }
-        return json;
+        const json = this._properties
+            ? {
+                ...this._data,
+                properties: this._properties.toJson(),
+            }
+            : this._data;
+
+        return clonePlain(json);
    }

    clone(): CollectionObject {
-        const cloned = new CollectionObject();
-        cloned._data = {
-            ...this._data,
-        };
-        if (this._properties) {
-            cloned._properties = this._properties.clone();
-        }
-        return cloned;
+        return new CollectionObject().fromJson(this.toJson());
    }

    /** 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();
-        cloned._data = { ...this._data };
-        return cloned;
+        return new CollectionPropertiesObject().fromJson(this.toJson());
    }

    /** Immutable Properties */
--- a/src/models/entity.ts
+++ b/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();
-        cloned._data = {
-            ...this._data
-        };
-        cloned._properties = this.properties.clone();
-        return cloned;
+        return new EntityObject().fromJson(this.toJson());
    }

    /** Metadata Properties */
--- a/src/models/identity.ts
+++ b/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 {
-  abstract toJson(): ServiceIdentity;
-  abstract clone(): Identity;
+export abstract class Identity<T extends ServiceIdentity = ServiceIdentity> {
+  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(): 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 {
-
-  private _data: ServiceIdentityNone;
+export class IdentityNone extends Identity<ServiceIdentityNone> {

  constructor() {
-    super();
-    this._data = {
+    super({
      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 {
-
-  private _data: ServiceIdentityBasic;
+export class IdentityBasic extends Identity<ServiceIdentityBasic> {

  constructor(identity: string = '', secret: string = '') {
-    super();
-    this._data = {
+    super({
      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 {
-
-  private _data: ServiceIdentityToken;
+export class IdentityToken extends Identity<ServiceIdentityToken> {

  constructor(token: string = '') {
-    super();
-    this._data = {
+    super({
      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 {
-
-  private _data: ServiceIdentityOAuth;
+export class IdentityOAuth extends Identity<ServiceIdentityOAuth> {

  constructor(
    accessToken: string = '',
@@ -174,15 +191,32 @@ export class IdentityOAuth extends Identity {
    refreshToken?: string,
    refreshLocation?: string
  ) {
-    super();
-    this._data = {
+    super({
      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 {
-  private _data: ServiceIdentityCertificate;
+export class IdentityCertificate extends Identity<ServiceIdentityCertificate> {

  constructor(certificate: string = '', privateKey: string = '', passphrase?: string) {
-    super();
-    this._data = {
+    super({
      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());
-  }
 }
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -24,3 +24,6 @@ export {
  LocationSocketSplit,
  LocationFile
 } from './location';
+export {
+  MutationProxy
+} from './mutation-proxy';
--- a/src/models/location.ts
+++ b/src/models/location.ts
@@ -9,13 +9,50 @@ import type {
  ServiceLocationSocketSplit,
  ServiceLocationFile
 } from '@/types/service';
+import { MutationProxy } from './mutation-proxy';
+import { clonePlain } from './clone-plain';

 /**
 * Base Location class
 */
-export abstract class Location {
-  abstract toJson(): ServiceLocation;
+export abstract class Location<T extends ServiceLocation = 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) {
@@ -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 {
-  readonly type = 'URI' as const;
-  scheme: string;
-  host: string;
-  port: number;
-  path?: string;
-  verifyPeer: boolean;
-  verifyHost: boolean;
+export class LocationUri extends Location<ServiceLocationUri> {

  constructor(
    scheme: string = 'https',
@@ -54,36 +84,19 @@ export class LocationUri extends Location {
    verifyPeer: boolean = true,
    verifyHost: boolean = true
  ) {
-    super();
-    this.scheme = scheme;
-    this.host = host;
-    this.port = port;
-    this.path = path;
-    this.verifyPeer = verifyPeer;
-    this.verifyHost = verifyHost;
+    super({
+      type: 'URI',
+      scheme,
+      host,
+      port,
+      ...(path !== undefined && { path }),
+      verifyPeer,
+      verifyHost,
+    });
  }

  static fromJson(data: ServiceLocationUri): LocationUri {
-    return new LocationUri(
-      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 })
-    };
+    return new LocationUri().load(data);
  }

  getUrl(): string {
@@ -92,28 +105,68 @@ export class LocationUri extends Location {
  }

  clone(): LocationUri {
-    return new LocationUri(
-      this.scheme,
-      this.host,
-      this.port,
-      this.path,
-      this.verifyPeer,
-      this.verifyHost
-    );
+    return LocationUri.fromJson(structuredClone(this.toJson()));
  }
+
+  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 {
-  readonly type = 'SOCKET_SOLE' as const;
-  host: string;
-  port: number;
-  encryption: 'none' | 'ssl' | 'tls' | 'starttls';
-  verifyPeer: boolean;
-  verifyHost: boolean;
+export class LocationSocketSole extends Location<ServiceLocationSocketSole> {

  constructor(
    host: string = '',
@@ -122,62 +175,75 @@ export class LocationSocketSole extends Location {
    verifyPeer: boolean = true,
    verifyHost: boolean = true
  ) {
-    super();
-    this.host = host;
-    this.port = port;
-    this.encryption = encryption;
-    this.verifyPeer = verifyPeer;
-    this.verifyHost = verifyHost;
+    super({
+      type: 'SOCKET_SOLE',
+      host,
+      port,
+      encryption,
+      verifyPeer,
+      verifyHost,
+    });
  }

  static fromJson(data: ServiceLocationSocketSole): LocationSocketSole {
-    return new LocationSocketSole(
-      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 })
-    };
+    return new LocationSocketSole().load(data);
  }

  clone(): LocationSocketSole {
-    return new LocationSocketSole(
-      this.host,
-      this.port,
-      this.encryption,
-      this.verifyPeer,
-      this.verifyHost
-    );
+    return LocationSocketSole.fromJson(structuredClone(this.toJson()));
  }
+
+  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 {
-  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;
+export class LocationSocketSplit extends Location<ServiceLocationSocketSplit> {

  constructor(
    inboundHost: string = '',
@@ -191,91 +257,146 @@ export class LocationSocketSplit extends Location {
    outboundVerifyPeer: boolean = true,
    outboundVerifyHost: boolean = true
  ) {
-    super();
-    this.inboundHost = inboundHost;
-    this.inboundPort = inboundPort;
-    this.inboundEncryption = inboundEncryption;
-    this.outboundHost = outboundHost;
-    this.outboundPort = outboundPort;
-    this.outboundEncryption = outboundEncryption;
-    this.inboundVerifyPeer = inboundVerifyPeer;
-    this.inboundVerifyHost = inboundVerifyHost;
-    this.outboundVerifyPeer = outboundVerifyPeer;
-    this.outboundVerifyHost = outboundVerifyHost;
+    super({
+      type: 'SOCKET_SPLIT',
+      inboundHost,
+      inboundPort,
+      inboundEncryption,
+      outboundHost,
+      outboundPort,
+      outboundEncryption,
+      inboundVerifyPeer,
+      inboundVerifyHost,
+      outboundVerifyPeer,
+      outboundVerifyHost,
+    });
  }

  static fromJson(data: ServiceLocationSocketSplit): LocationSocketSplit {
-    return new LocationSocketSplit(
-      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 })
-    };
+    return new LocationSocketSplit().load(data);
  }

  clone(): LocationSocketSplit {
-    return new LocationSocketSplit(
-      this.inboundHost,
-      this.inboundPort,
-      this.inboundEncryption,
-      this.outboundHost,
-      this.outboundPort,
-      this.outboundEncryption,
-      this.inboundVerifyPeer,
-      this.inboundVerifyHost,
-      this.outboundVerifyPeer,
-      this.outboundVerifyHost
-    );
+    return LocationSocketSplit.fromJson(structuredClone(this.toJson()));
  }
+
+  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 {
-  readonly type = 'FILE' as const;
-  path: string;
+export class LocationFile extends Location<ServiceLocationFile> {

  constructor(path: string = '') {
-    super();
-    this.path = path;
+    super({
+      type: 'FILE',
+      path,
+    });
  }

  static fromJson(data: ServiceLocationFile): LocationFile {
-    return new LocationFile(data.path);
-  }
-
-  toJson(): ServiceLocationFile {
-    return {
-      type: this.type,
-      path: this.path
-    };
+    return new LocationFile().load(data);
  }

  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;
+  }
+
 }
--- a/src/models/message.ts
+++ b/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 = {
-            ...this._data
-        };
-        if (this._body) {
-            json.body = this._body.toJson();
-        }
-        return json;
+        const json = this._body
+            ? {
+                ...this._data,
+                body: this._body.toJson(),
+            }
+            : this._data;
+
+        return clonePlain(json);
    }

    clone(): MessageObject {
-        const cloned = new MessageObject();
-        cloned._data = {
-            ...this._data,
-        };
-        if (this._body) {
-            cloned._body = this._body.clone();
-        }
-        return cloned;
+        return new MessageObject().fromJson(this.toJson());
    }

    /** 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,
-            blobId: data?.blobId ?? null,
-            size: data?.size ?? null,
-            name: data?.name ?? null,
-            type: data?.type ?? null,
-            charset: data?.charset ?? null,
-            disposition: data?.disposition ?? null,
-            cid: data?.cid ?? null,
-            language: data?.language ?? null,
-            location: data?.location ?? null,
-            content: data?.content ?? null,
-            subParts: data?.subParts ?? [],
+            partId: clonePlain(data?.partId ?? null),
+            blobId: clonePlain(data?.blobId ?? null),
+            size: clonePlain(data?.size ?? null),
+            name: clonePlain(data?.name ?? null),
+            type: clonePlain(data?.type ?? null),
+            charset: clonePlain(data?.charset ?? null),
+            disposition: clonePlain(data?.disposition ?? null),
+            cid: clonePlain(data?.cid ?? null),
+            language: clonePlain(data?.language ?? null),
+            location: clonePlain(data?.location ?? null),
+            content: clonePlain(data?.content ?? null),
+            subParts: clonePlain(data?.subParts ?? []),
        };
    }

    fromJson(data: MessagePartInterface): MessagePartObject {
-        this._data = data;
+        this._data = clonePlain(data);
+        this._subParts = [];
        return this;
    }

    toJson(): MessagePartInterface {
-        const json = {
-            ...this._data,
-        };
-        if (this._subParts.length > 0) {
-            json.subParts = this._subParts.map(subPart => subPart.toJson());
-        }
-        return json
+        const json = this._subParts.length > 0
+            ? {
+                ...this._data,
+                subParts: this._subParts.map(subPart => subPart.toJson()),
+            }
+            : this._data;
+
+        return clonePlain(json);
    }

    clone(): MessagePartObject {
-        return new MessagePartObject(JSON.parse(JSON.stringify(this._data)));
+        return new MessagePartObject().fromJson(this.toJson());
    }

    /** Properties */
--- a/src/models/mutation-proxy.ts
+++ b/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,
+            }),
+        });
+    }
+
+}
--- a/src/models/provider.ts
+++ b/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();
-        cloned._data = { ...this._data };
-        return cloned;
+        return new ProviderObject().fromJson(this.toJson());
    }

    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);
    }

 }
--- a/src/models/service.ts
+++ b/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;
-    _identity: Identity | null = null;
+    _location: Location | null | undefined = undefined;
+    _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 {
-        const json = {
-            ...this._data,
-            capabilities: this._data.capabilities ? { ...this._data.capabilities } : this._data.capabilities,
-            secondaryAddresses: this._data.secondaryAddresses ? [...this._data.secondaryAddresses] : this._data.secondaryAddresses,
-            auxiliary: this._data.auxiliary ? { ...this._data.auxiliary } : this._data.auxiliary,
-        };
-
-        if (this._location !== null) {
-            json.location = this._location.toJson();
+    toJson(): ServiceInterface;
+    toJson(delta: true): Partial<ServiceInterface>;
+    toJson(delta?: boolean): ServiceInterface | Partial<ServiceInterface> {
+        if (this._location !== undefined) {
+            if (!delta) {
+                // handled below to preserve full ServiceInterface typing
+            }
        }

-        if (this._identity !== null) {
-            json.identity = this._identity.toJson();
+        if (delta) {
+            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();
-        cloned._data = {
-            ...this._data,
-            capabilities: this._data.capabilities ? { ...this._data.capabilities } : this._data.capabilities,
-            secondaryAddresses: this._data.secondaryAddresses ? [...this._data.secondaryAddresses] : this._data.secondaryAddresses,
-            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;
+        return new ServiceObject().fromJson(this.toJson());
+    }
+
+    mutated(): boolean {
+        return Reflect.ownKeys(this._mutated).length > 0 || (this._location?.mutated() ?? false) || (this._identity?.mutated() ?? false);
    }

    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);
-            this._location = location;
-            return location;
+
+        if (this._data.location) {
+            this._location = Location.fromJson(this._data.location as ServiceLocation);
+            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);
-            this._identity = identity;
-            return identity;
+
+        if (this._data.identity) {
+            this._identity = Identity.fromJson(this._data.identity);
+            return this._identity;
        }

+        this._identity = null;
        return null;
    }

@@ -155,7 +191,7 @@ export class ServiceObject implements ServiceModelInterface {
    get auxiliary(): Record<string, any> {
        return this._data.auxiliary ?? {};
    }
-    
+
    set auxiliary(value: Record<string, any>) {
        this._data.auxiliary = value;
    }
--- a/src/pages/AccountsPage.vue
+++ b/src/pages/AccountsPage.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { useServicesStore } from '@/stores/servicesStore'
-import AddAccountDialog from '@/components/AddAccountDialog.vue'
-import type { ServiceObject } from '@/models'
+import { useIntegrationStore } from '@KTXC/stores/integrationStore'
+import { useServicesStore } from '../stores/servicesStore'
+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> = {
-    'smtp': 'mdi-email-multiple',
-    'jmap': 'mdi-api',
-    'exchange': 'mdi-microsoft',
-  }
-  return icons[providerId] || 'mdi-email'
+  return providerMetadata.value[providerId]?.icon || 'mdi-email'
 }

 function getProviderLabel(providerId: string): string {
-  const labels: Record<string, string> = {
-    'smtp': 'SMTP/IMAP',
-    'jmap': 'JMAP',
-    'exchange': 'Microsoft Exchange',
-  }
-  return labels[providerId] || providerId.toUpperCase()
+  return providerMetadata.value[providerId]?.label || providerId.toUpperCase()
 }

-function editAccount(account: any) {
-  selectedAccount.value = { ...account }
+function editAccount(account: ServiceObject) {
+  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.location,
-      service.identity
+      service.identifier
    )
    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"
-    >
-      <v-card>
-        <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>
+      :service-provider="selectedAccount?.provider || ''"
+      :service-identifier="selectedAccount?.identifier || ''"
+      @saved="handleAccountSaved"
+    />

    <!-- Delete Confirmation Dialog -->
    <v-dialog
--- a/src/services/serviceService.ts
+++ b/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
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/src/stores/servicesStore.ts
+++ b/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 {
-    return `${provider}:${identifier ?? ''}`
+  function identifierKey(provider: string, identifier: string | number | null): ServiceIdentifier {
+    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,
-    identity?: ServiceIdentity | null,
+    location?: ServiceLocation | Location | 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
--- a/src/types/service.ts
+++ b/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>;
 }

--- a/tests/js/unit/base.test.ts
+++ b/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)
-  })
-})
--- a/tests/js/vitest.config.ts
+++ b/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/**',
-      ],
-    },
-  },
-})
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -16,5 +16,5 @@
      "@MailManager/*": ["./src/*"]
    }
  },
-  "include": ["src/**/*.ts", "src/**/*.tsx"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }