@designcrowd/library.brand-page 5.18.6 → 5.18.7-ast-padding-1

package/src/bundles/bundled-translations.es-ES.json

@@ -1126,7 +1126,9 @@
   "quickLinkBar": {
     "myWebPageLabel": "Mi página web:",
     "copyButton": "Copiar",
-    "copiedButton": "¡Copiado!"
+    "copiedButton": "¡Copiado!",
+    "undoLabel": "Deshacer",
+    "redoLabel": "Rehacer"
   },
   "saveContactSettings": {
     "saveContentInfo": "Permite que los visitantes guarden tu información de contacto al ver tu tarjeta de visita digital.",
@@ -1527,6 +1529,8 @@
     "iconFillColorTitle": "Color de relleno del icono",
     "iconBackgroundColorTitle": "Color de fondo del icono",
     "paddingTitle": "Relleno",
+    "topPaddingTitle": "Relleno superior",
+    "bottomPaddingTitle": "Relleno inferior",
     "dividerStyleTitle": "Estilo del divisor",
     "dividerColorTitle": "Color del separador",
     "addItemTitle": "Añadir artículo",

package/src/bundles/bundled-translations.fr-CA.json

@@ -1126,7 +1126,9 @@
   "quickLinkBar": {
     "myWebPageLabel": "Ma page Web :",
     "copyButton": "Copier",
-    "copiedButton": "Copié !"
+    "copiedButton": "Copié !",
+    "undoLabel": "Annuler",
+    "redoLabel": "Rétablir"
   },
   "saveContactSettings": {
     "saveContentInfo": "Permettez aux visiteurs d'enregistrer vos coordonnées lorsqu'ils consultent votre carte professionnelle numérique",
@@ -1527,6 +1529,8 @@
     "iconFillColorTitle": "Couleur de remplissage de l’icône",
     "iconBackgroundColorTitle": "Couleur d’arrière-plan de l’icône",
     "paddingTitle": "Marges intérieures",
+    "topPaddingTitle": "Marge intérieure supérieure",
+    "bottomPaddingTitle": "Marges intérieures inférieures",
     "dividerStyleTitle": "Style de séparateur",
     "dividerColorTitle": "Couleur du séparateur",
     "addItemTitle": "Ajouter un article",

package/src/bundles/bundled-translations.fr-FR.json

@@ -1126,7 +1126,9 @@
   "quickLinkBar": {
     "myWebPageLabel": "Ma page Web :",
     "copyButton": "Copier",
-    "copiedButton": "Copié !"
+    "copiedButton": "Copié !",
+    "undoLabel": "Annuler",
+    "redoLabel": "Rétablir"
   },
   "saveContactSettings": {
     "saveContentInfo": "Permettez aux visiteurs d'enregistrer vos coordonnées lorsqu'ils consultent votre carte de visite numérique",
@@ -1527,6 +1529,8 @@
     "iconFillColorTitle": "Couleur de remplissage de l’icône",
     "iconBackgroundColorTitle": "Couleur d’arrière-plan de l’icône",
     "paddingTitle": "Marges intérieures",
+    "topPaddingTitle": "Marges intérieures supérieures",
+    "bottomPaddingTitle": "Marges intérieures inférieures",
     "dividerStyleTitle": "Style de séparateur",
     "dividerColorTitle": "Couleur du séparateur",
     "addItemTitle": "Ajouter un article",

package/src/bundles/bundled-translations.json

@@ -1126,7 +1126,9 @@
   "quickLinkBar": {
     "myWebPageLabel": "My web page:",
     "copyButton": "Copy",
-    "copiedButton": "Copied!"
+    "copiedButton": "Copied!",
+    "undoLabel": "Undo",
+    "redoLabel": "Redo"
   },
   "saveContactSettings": {
     "saveContentInfo": "Let visitors save your contact information when they view your Digital Business Card",
@@ -1527,6 +1529,8 @@
     "iconFillColorTitle": "Icon fill color",
     "iconBackgroundColorTitle": "Icon background color",
     "paddingTitle": "Padding",
+    "topPaddingTitle": "Top padding",
+    "bottomPaddingTitle": "Bottom padding",
     "dividerStyleTitle": "Divider Style",
     "dividerColorTitle": "Divider color",
     "addItemTitle": "Add Item",

package/src/bundles/bundled-translations.pt-BR.json

@@ -1126,7 +1126,9 @@
   "quickLinkBar": {
     "myWebPageLabel": "Minha página web:",
     "copyButton": "Copiar",
-    "copiedButton": "Copiado!"
+    "copiedButton": "Copiado!",
+    "undoLabel": "Desfazer",
+    "redoLabel": "Refazer"
   },
   "saveContactSettings": {
     "saveContentInfo": "Permita que os visitantes salvem suas informações de contato quando visualizarem seu cartão de visita digital",
@@ -1527,6 +1529,8 @@
     "iconFillColorTitle": "Cor de preenchimento do ícone",
     "iconBackgroundColorTitle": "Cor de fundo do ícone",
     "paddingTitle": "Preenchimento",
+    "topPaddingTitle": "Preenchimento superior",
+    "bottomPaddingTitle": "Preenchimento inferior",
     "dividerStyleTitle": "Estilo do separador",
     "dividerColorTitle": "Cor do separador",
     "addItemTitle": "Adicionar item",

package/src/bundles/bundled-translations.pt-PT.json

@@ -1126,7 +1126,9 @@
   "quickLinkBar": {
     "myWebPageLabel": "A minha página Web:",
     "copyButton": "Copiar",
-    "copiedButton": "Copiado!"
+    "copiedButton": "Copiado!",
+    "undoLabel": "Desfazer",
+    "redoLabel": "Refazer"
   },
   "saveContactSettings": {
     "saveContentInfo": "Permita que os visitantes guardem a sua informação de contacto quando visualizarem o seu cartão de visita digital",
@@ -1527,6 +1529,8 @@
     "iconFillColorTitle": "Cor de preenchimento do ícone",
     "iconBackgroundColorTitle": "Cor de fundo do ícone",
     "paddingTitle": "Preenchimento",
+    "topPaddingTitle": "Preenchimento superior",
+    "bottomPaddingTitle": "Preenchimento inferior",
     "dividerStyleTitle": "Estilo do separador",
     "dividerColorTitle": "Cor do separador",
     "addItemTitle": "Adicionar Item",

package/src/constants/ui.ts

@@ -14,6 +14,7 @@ export interface UIUserFeatures {
   canUseGettyVideos: boolean;
   canUseGoogleAdsense: boolean;
   googleAdsenseEnabled: boolean;
+  canUseUndoRedo: boolean;
 }
 
 export const TEMPLATE_FIRST_PAGE_NO = 1;

package/src/shared/content-settings/components/content-settings/ContentSettings.mixin.ts

@@ -29,6 +29,7 @@ import {
 } from '@brand-page-maker/utils';
 import { useUiStyleSettingsStore } from '../../../style-settings/store';
 import { usePageNavigationStore } from '../../../../shared/page-navigation/store/page-navigation-store';
+import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 
 interface CategoryTab {
   category: string;
@@ -44,6 +45,7 @@ export default defineComponent({
     const styleSettingsStore = useUiStyleSettingsStore();
     const userStore = useBrandPageMakerUserStore();
     const eventTracker = useEventTracker();
+    const historyStore = useHistoryStore();
     const { externalEditor } = useExternalRichTextEditor();
 
     return {
@@ -65,6 +67,7 @@ export default defineComponent({
       pageSettingsStore,
       styleSettingsStore,
       eventTracker,
+      historyStore,
       externalEditor,
     };
   },
@@ -81,6 +84,8 @@ export default defineComponent({
   },
   mounted() {
     if (this.canUseRichTextEditor) {
+      // RTE rewrap on tab mount — fold into current head.
+      this.historyStore.mergeNextMutation();
       switchAllContentToRTE(
         this.pageSettingsStore,
         this.externalEditor,

package/src/shared/content-settings/components/content-settings/ContentSettings.stories.ts

@@ -32,6 +32,7 @@ export const Sample = (): any => {
     canUseGettyVideos: true,
     canUseGoogleAdsense: false,
     googleAdsenseEnabled: false,
+    canUseUndoRedo: false,
   };
 
   const pinia = setupStoryPinia();

package/src/shared/content-settings/components/content-settings/i18n/content-settings.de-DE.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Farbe der Symbolfüllung",
     "iconBackgroundColorTitle": "Symbolhintergrundfarbe",
     "paddingTitle": "Polsterung",
+    "topPaddingTitle": "Polsterung oben",
+    "bottomPaddingTitle": "Polsterung unten",
     "dividerStyleTitle": "Trennlinienstil",
     "dividerColorTitle": "Trennlinienfarbe",
     "addItemTitle": "Artikel hinzufügen",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.es-ES.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Color de relleno del icono",
     "iconBackgroundColorTitle": "Color de fondo del icono",
     "paddingTitle": "Relleno",
+    "topPaddingTitle": "Relleno superior",
+    "bottomPaddingTitle": "Relleno inferior",
     "dividerStyleTitle": "Estilo del divisor",
     "dividerColorTitle": "Color del separador",
     "addItemTitle": "Añadir artículo",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.fr-CA.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Couleur de remplissage de l’icône",
     "iconBackgroundColorTitle": "Couleur d’arrière-plan de l’icône",
     "paddingTitle": "Marges intérieures",
+    "topPaddingTitle": "Marge intérieure supérieure",
+    "bottomPaddingTitle": "Marges intérieures inférieures",
     "dividerStyleTitle": "Style de séparateur",
     "dividerColorTitle": "Couleur du séparateur",
     "addItemTitle": "Ajouter un article",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.fr-FR.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Couleur de remplissage de l’icône",
     "iconBackgroundColorTitle": "Couleur d’arrière-plan de l’icône",
     "paddingTitle": "Marges intérieures",
+    "topPaddingTitle": "Marges intérieures supérieures",
+    "bottomPaddingTitle": "Marges intérieures inférieures",
     "dividerStyleTitle": "Style de séparateur",
     "dividerColorTitle": "Couleur du séparateur",
     "addItemTitle": "Ajouter un article",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Icon fill color",
     "iconBackgroundColorTitle": "Icon background color",
     "paddingTitle": "Padding",
+    "topPaddingTitle": "Top padding",
+    "bottomPaddingTitle": "Bottom padding",
     "dividerStyleTitle": "Divider Style",
     "dividerColorTitle": "Divider color",
     "addItemTitle": "Add Item",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-BR.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Cor de preenchimento do ícone",
     "iconBackgroundColorTitle": "Cor de fundo do ícone",
     "paddingTitle": "Preenchimento",
+    "topPaddingTitle": "Preenchimento superior",
+    "bottomPaddingTitle": "Preenchimento inferior",
     "dividerStyleTitle": "Estilo do separador",
     "dividerColorTitle": "Cor do separador",
     "addItemTitle": "Adicionar item",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-PT.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Cor de preenchimento do ícone",
     "iconBackgroundColorTitle": "Cor de fundo do ícone",
     "paddingTitle": "Preenchimento",
+    "topPaddingTitle": "Preenchimento superior",
+    "bottomPaddingTitle": "Preenchimento inferior",
     "dividerStyleTitle": "Estilo do separador",
     "dividerColorTitle": "Cor do separador",
     "addItemTitle": "Adicionar Item",

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItem.vue

@@ -56,7 +56,7 @@
     >
       <li
         v-for="(field, index) in fields"
-        :key="`content-settings-item-field-${id}-${index}`"
+        :key="`content-settings-item-field-${id}-${field.name}`"
         class="tw-cursor-pointer"
         :class="{
           'tw-mb-3': index !== fields.length - 1,

package/src/shared/content-settings/components/draggable-item-list/DraggableItemList.mixin.ts

@@ -76,6 +76,12 @@ export default defineComponent({
     schema: 'https',
     textIcon: 'globe',
     textIcons: [] as string[],
+    // Display-only override for the focused URL input. While a row is
+    // focused we strip the schema visually but MUST NOT mutate modelValue —
+    // doing so would land in the store and trigger a spurious undo/redo
+    // history entry between focus and blur (BP-5506).
+    focusedIndex: null as number | null,
+    focusedDisplay: '',
   }),
   computed: {
     items: {
@@ -162,15 +168,26 @@ export default defineComponent({
     },
 
     onFocusOverride(index: number, itemValue: string): void {
-      const value = [...this.modelValue];
       const match = URL_RE.exec(itemValue);
 
       if (match) {
         this.schema = match[1];
-        value[index][this.valuePropName] = match[2];
+        this.focusedIndex = index;
+        this.focusedDisplay = match[2];
+      } else {
+        this.focusedIndex = index;
+        this.focusedDisplay = itemValue;
       }
     },
+    inputDisplayValue(index: number): string {
+      return this.focusedIndex === index
+        ? this.focusedDisplay
+        : this.itemValue(index);
+    },
     onBlurOverride(index: number, itemValue: string): void {
+      this.focusedIndex = null;
+      this.focusedDisplay = '';
+
       const value = [...this.modelValue];
 
       let isValid = true;

package/src/shared/content-settings/components/draggable-item-list/DraggableItemList.vue

@@ -70,7 +70,7 @@
                     hasError[index],
                 }"
                 :placeholder="placeholderPrefix"
-                :value="itemValue(index)"
+                :value="inputDisplayValue(index)"
                 :data-test-tag="'image-url-text-input'"
                 @focus="onFocusOverride(index, $event.target.value)"
                 @blur="onBlurOverride(index, $event.target.value)"

package/src/shared/content-settings/components/focused-content-item-settings/FocusedContentItemSettings.vue

@@ -25,8 +25,8 @@
     >
       <ul>
         <li
-          v-for="(field, fieldIndex) in group.fields"
-          :key="`content-settings-item-group-field-${id}-${group.id}-${fieldIndex}`"
+          v-for="field in group.fields"
+          :key="`content-settings-item-group-field-${id}-${group.id}-${field.name}`"
         >
           <ContentSettingsItemField
             v-if="

package/src/shared/content-settings/components/form-fields-field/FormFieldsField.mixin.ts

@@ -1,4 +1,4 @@
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 import type { PropType } from 'vue';
 import type { FormField } from '@brand-page';
 import { formFieldsTr } from '@src/composables/useTranslate';
@@ -49,18 +49,34 @@ export default defineComponent({
       },
     ];
 
+    const valueWithState = ref(
+      props.value.map((field) => ({
+        field,
+        isCollapsed: true,
+        isTypeDropdownOpen: false,
+      })),
+    );
+
+    // Re-sync when the store-bound value changes externally (e.g. undo/redo
+    // via history-store). Preserve per-row UI flags (isCollapsed,
+    // isTypeDropdownOpen) by index so an undo doesn't snap rows back to
+    // collapsed state.
+    watch(
+      () => props.value,
+      (newVal) => {
+        valueWithState.value = newVal.map((field, index) => ({
+          field,
+          isCollapsed: valueWithState.value[index]?.isCollapsed ?? true,
+          isTypeDropdownOpen:
+            valueWithState.value[index]?.isTypeDropdownOpen ?? false,
+        }));
+      },
+    );
+
     return {
       formFieldsTr,
       typeList,
-      valueWithState: ref(
-        props.value.map((field) => {
-          return {
-            field: field,
-            isCollapsed: true,
-            isTypeDropdownOpen: false,
-          };
-        }),
-      ),
+      valueWithState,
     };
   },
   methods: {

package/src/shared/content-settings/components/logo-selection-field/LogoSelection.vue

@@ -59,7 +59,7 @@
       </template>
     </ButtonGroup>
     <div
-      v-if="data.selectedOption === 1 && !containerStore.isPrePurchase"
+      v-if="selectedOption === 1 && !containerStore.isPrePurchase"
       class="tw-mb-4"
     >
       <div class="tw-flex tw-items-center">
@@ -90,7 +90,7 @@
       </div>
     </div>
     <div
-      v-if="data.selectedOption === 1 && containerStore.isPrePurchase"
+      v-if="selectedOption === 1 && containerStore.isPrePurchase"
       class="tw-mb-4"
     >
       <LogoVariations
@@ -99,7 +99,7 @@
         @logo-variation-selected="onEditableLogoVariationSelected"
       />
     </div>
-    <div v-if="data.selectedOption === 2" class="tw-mb-4">
+    <div v-if="selectedOption === 2" class="tw-mb-4">
       <UploadLogoModal>
         <template #main="mainProp">
           <LogoField
@@ -188,88 +188,100 @@ const logoTabs: Tab[] = reactive([
 ]);
 
 const data = reactive({
-  selectedOption: 1,
-  currentLogoIsByo: false,
+  // Sticky override for the "Logo / Upload" choice when isLogoVisible is true.
+  // Set when the user explicitly clicks Logo or Upload; cleared on undo/redo
+  // so the snapshot's logoDraftAsset.isByo decides instead. `null` means
+  // "derive from props".
+  manualVisibleChoice: null as null | 1 | 2,
   logoEditUrl: '',
 });
 
 const containerStore = useBrandPageContainerStore();
+const logoStore = useLogoStore();
+const editableLogoStore = useUiEditableLogoStore();
+const sideBarStore = useUiSideBarStore();
+const userStore = useBrandPageMakerUserStore();
+
+const currentLogoIsByo = computed(() => {
+  const logoDraftAsset = logoStore.getLogoDraftAssetByToken(
+    props.selectedLogoDraftToken,
+  );
+
+  return !!logoDraftAsset?.isByo;
+});
+
+// Highlighted button. Derived purely from props + the user's most recent
+// manual choice — never from event-handler-set local state. Undo/redo
+// restores `props` from the history snapshot, which clears the manual
+// override (see watcher below) so the highlight tracks whatever the
+// snapshot says: None when isLogoVisible is false, Upload when the
+// restored logo is BYO, Logo otherwise.
+const selectedOption = computed<0 | 1 | 2>(() => {
+  if (!props.isLogoVisible) return 0;
+
+  if (currentLogoIsByo.value) return 2;
+
+  return data.manualVisibleChoice ?? 1;
+});
 
 const options = computed<ButtonGroupOption[]>(() => {
   const optionList = [
     {
       label: commonTr('none'),
       value: '0',
-      isSelected: data.selectedOption === 0,
+      isSelected: selectedOption.value === 0,
       iconName: `ban`,
       iconSize: 'sm',
     },
     {
       label: commonTr('logo'),
       value: '1',
-      isSelected: data.selectedOption === 1,
+      isSelected: selectedOption.value === 1,
       iconName: `bc-mast`,
       iconSize: 'sm',
     },
     {
       label: commonTr('upload'),
       value: '2',
-      isSelected: data.selectedOption === 2,
+      isSelected: selectedOption.value === 2,
       iconName: `upload-arrow`,
       iconSize: 'sm',
     },
   ];
 
-  if (data.currentLogoIsByo) {
+  if (currentLogoIsByo.value) {
     return optionList.filter((x) => x.value !== '1');
   }
 
   return optionList;
 });
 
-const logoStore = useLogoStore();
-const editableLogoStore = useUiEditableLogoStore();
-const sideBarStore = useUiSideBarStore();
-const userStore = useBrandPageMakerUserStore();
-
-onMounted(() => updateState());
-
-watch(
-  () => props.isLogoVisible,
-  () => updateState(),
-);
-
-watch(
-  () => props.selectedLogoDraftToken,
-  () => updateState(),
-);
-
-watch(
-  () => props.selectedLogo,
-  () => updateState(),
-);
-
 const updateState = () => {
   const logoDraftAsset = logoStore.getLogoDraftAssetByToken(
     props.selectedLogoDraftToken,
   );
 
   data.logoEditUrl = logoDraftAsset?.logoEditUrl || '';
+};
 
-  if (!props.isLogoVisible) {
-    data.selectedOption = 0;
-  } else {
-    if (logoDraftAsset?.isByo) {
-      data.selectedOption = 2;
-    } else {
-      data.selectedOption = data.selectedOption || 1;
-    }
-  }
+onMounted(() => updateState());
 
-  if (logoDraftAsset?.isByo) {
-    data.currentLogoIsByo = true;
-  }
-};
+// Only `selectedLogoDraftToken` clears the manual override — that's the
+// signal for an *external* data change (upload landed, or undo/redo
+// restored a different draft). `isLogoVisible` flips on the user's own
+// click and propagates back through props, so resetting on it would
+// clobber the choice the user just made (e.g. None → Upload would land
+// on Logo because the watcher fires before the computed re-reads).
+watch(
+  () => props.selectedLogoDraftToken,
+  () => {
+    data.manualVisibleChoice = null;
+    updateState();
+  },
+);
+
+watch(() => props.isLogoVisible, updateState);
+watch(() => props.selectedLogo, updateState);
 
 const logoSettingStore = useUiLogoSettingsStore();
 
@@ -320,9 +332,14 @@ const onEditableLogoVariationSelected = (selectedLogoVariation: {
 };
 
 const onOptionSelected = (selected: ButtonGroupOption) => {
-  data.selectedOption = parseInt(selected.value);
+  const next = parseInt(selected.value);
 
-  emit('on-logo-visible-changed', data.selectedOption !== 0);
+  // Capture the user's choice between Logo (1) and Upload (2) so the
+  // highlight stays put while they interact with the visible options.
+  // `null` for None — the visibility flip handles that.
+  data.manualVisibleChoice = next === 1 || next === 2 ? next : null;
+
+  emit('on-logo-visible-changed', next !== 0);
 };
 
 const handleLogoVisibleToggle = () => {
@@ -363,8 +380,6 @@ const onLogoUpload = (response: CreateWebsiteByoUploadResult) => {
   if (response.logoDesignAttributes) {
     logoSettingStore.applyLogoDesignAttributes(response.logoDesignAttributes);
   }
-
-  data.currentLogoIsByo = true;
 };
 
 const onEditLogoButtonClicked = () => {

package/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.vue

@@ -24,6 +24,7 @@ import { Button } from '@designcrowd/fe-shared-lib';
 import { ref, computed, onMounted } from 'vue';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import { useBrandPageMakerUserStore } from '../../../../brand-page-maker/stores';
+import { useHistoryStore } from '../../../../brand-page-maker/stores/history/history-store';
 import { pageSettingTr } from '../../../../composables/useTranslate';
 import PageSelectorDropdown from '../../../page-navigation/PageSelectorDropdown.vue';
 import { usePageNavigationStore } from '../../../page-navigation/store/page-navigation-store';
@@ -50,6 +51,7 @@ const emit = defineEmits<{
 const pageNavigationStore = usePageNavigationStore();
 const pageSettingsStore = useUiPageSettingsStore();
 const userStore = useBrandPageMakerUserStore();
+const historyStore = useHistoryStore();
 
 const selectedPage = ref('');
 
@@ -109,6 +111,8 @@ onMounted(() => {
     if (routeByPageId) {
       selectedPage.value = routeByPageId.displayName;
     } else {
+      // Stale page-id clear at mount — fold into current head.
+      historyStore.mergeNextMutation();
       emit('update:modelValue', {
         id: props.id,
         name: props.name,

package/src/shared/content-settings/components/payment-config-field/PaymentConfigField.mixin.ts

@@ -15,6 +15,7 @@ import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settin
 import { paymentConfigTr } from '@src/composables/useTranslate';
 import brandPageClient from '../../../../clients/brand-page-client';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
+import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 
 export default defineComponent({
   props: {
@@ -41,6 +42,7 @@ export default defineComponent({
     const uiPageSettingsStore = useUiPageSettingsStore();
     const eventManagerStore = useEventManagerStore();
     const shopConfigStore = useShopConfigStore();
+    const historyStore = useHistoryStore();
 
     return {
       brandPageToken: computed(() => brandPageContainerStore.brandPageToken),
@@ -51,6 +53,7 @@ export default defineComponent({
       eventManagerStore,
       shopConfigStore,
       uiPageSettingsStore,
+      historyStore,
     };
   },
   emits: ['update:modelValue'],
@@ -116,6 +119,10 @@ export default defineComponent({
         value,
       };
 
+      // Lazy paymentConfig hydration — fold into current head instead
+      // of pushing a phantom entry.
+      this.historyStore.mergeNextMutation();
+
       this.$emit('update:modelValue', payload);
     }
   },

package/src/shared/content-settings/components/slider-field/SliderField.mixin.ts

@@ -45,6 +45,15 @@ export default defineComponent({
       sliderValue: value,
     };
   },
+  watch: {
+    // The value can change outside the slider (e.g. a layout switch
+    // re-applying default padding, or undo) — keep the display in sync.
+    value(newValue: string | undefined) {
+      this.sliderValue = this.valueConvertor
+        ? this.valueConvertor.convert(newValue as any)
+        : newValue;
+    },
+  },
   computed: {
     innerMinLength(): number {
       return this.minLength ?? 0;

package/src/shared/content-settings/components/text-field/TextField.vue

@@ -3,6 +3,7 @@
     <RichTextEditor
       v-if="showRichTextEditor"
       :id="`${id}-${name}`"
+      ref="richTextEditorRef"
       v-model="text"
       :attrs="attrs"
       :label="label"