@designcrowd/library.brand-page 5.18.3-undo-40 → 5.18.3

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -33,7 +33,6 @@ import type {
 import type { UserFeatures } from '../user';
 import { useBrandPageMakerUserStore } from '../user';
 import { defineStore } from 'pinia';
-import { toRaw } from 'vue';
 import { useUiStore } from '../ui';
 import type { LogoSettingsState } from '@shared/logo-settings/store';
 import {
@@ -61,7 +60,6 @@ import {
   BRANDPAGE_DEFAULT_SAVE_MESSAGE_DESCRIPTION,
   MAKER_MOBILE_BREAKPOINT,
   MESSAGE_VISIBLE_DURATION,
-  SIDE_BAR_TAB_NAMES,
 } from '@brand-page-maker/constants';
 import { useUiSideBarStore } from '@shared/side-bar/store';
 import { delayInMS } from '../../../utils/ui-util';
@@ -106,7 +104,6 @@ import { useConsent } from '@brand-page/composables/consent.composable';
 import { commonTr, errorTr } from '@src/composables/useTranslate';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
 import { useVideoStore } from '../video';
-import { useHistoryStore } from '../history/history-store';
 import { findValuesByKey } from '../../../helpers/ts.helper';
 import { useLogoStore } from '../logo-store';
 
@@ -671,16 +668,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           description: payload.noDescription ? '' : description,
         },
       });
-
-      // Any successful save re-baselines the undo stack so a user can't
-      // undo back past the persisted state. This covers Save Progress /
-      // Publish AND settings-only saves (updateBrandPage,
-      // updateSensitiveContent, admin saveTemplate) — settings-tab
-      // actions persist the metadata, so allowing undo to roll them
-      // back would let the local stack drift from what's saved.
-      // reset() no-ops in non-undo-redo sessions (no baseline = nothing
-      // to clear).
-      useHistoryStore().reset();
     },
     hideChangeTemplateConfirmModal() {
       this.setIsChangeTemplateConfirmModalVisible({
@@ -694,11 +681,10 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       this.setSelectedTemplateId({ templateId: false });
       this.hideChangeTemplateConfirmModal();
     },
-    async onChangeTemplateConfirmModalConfirm() {
-      await this.applySelectedTemplate();
+    onChangeTemplateConfirmModalConfirm() {
+      this.applySelectedTemplate();
       this.hideChangeTemplateConfirmModal();
       this.isModifiedAfterTemplateApplied = false;
-      this._captureTemplateSwitchIfEnabled();
     },
     onContentChanged() {
       this.setIsModifiedAfterTemplateApplied();
@@ -706,7 +692,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
     onStyleChanged(): void {
       this.setIsModifiedAfterTemplateApplied();
     },
-    async onTemplateSelected(payload: OnTemplateSelectedPayload) {
+    onTemplateSelected(payload: OnTemplateSelectedPayload) {
       this.setSelectedTemplateId({
         templateId: payload.templateId,
       });
@@ -716,8 +702,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           isVisible: true,
         });
       } else {
-        await this.applySelectedTemplate();
-        this._captureTemplateSwitchIfEnabled();
+        this.applySelectedTemplate();
       }
     },
     setSelectedTabName(payload) {
@@ -754,358 +739,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const uiContentSettingsStore = useUiContentSettingsStore();
 
       uiContentSettingsStore.updateContent<TContent>(payload);
-
-      // NOTE (Bolt 1, 2026-04-23): this action is not the actual edit path used
-      // by the UI — sidebar inputs call uiContentSettingsStore.updateItemValue
-      // directly. History capture is driven by a deep `watch(brandPageData, ...)`
-      // installed in history-store once the baseline is captured, so we do not
-      // need to instrument this action. Kept here as a pass-through because
-      // removing it may affect other callers.
-    },
-    /**
-     * Restore every store that the `brandPageData` getter reads from, so undo
-     * and redo bring back the EXACT document state captured at snapshot time.
-     *
-     * `initialiseStoresByBrandPageModelAsync` is too narrow for undo/redo — it
-     * only rehydrates pages, sections, and nav structure, which is enough for
-     * the AI-apply path but leaves navigation styles, backgrounds, button/text/
-     * logo/gallery styles, shop config, and several own-store fields unchanged.
-     * This action mirrors the full hydration surface of `applySelectedTemplate`
-     * (minus the template-specific logo/personalisation logic) so a restore is
-     * a complete round-trip of what `brandPageData` returns.
-     *
-     * Called ONLY by history-store during undo/redo. The history store sets
-     * `isApplyingSnapshot=true` across this call to prevent the deep-watcher
-     * on `brandPageData` from re-capturing the restored state.
-     */
-    /**
-     * Force-commit a `template_switch` entry to the history store, if the
-     * history store has a baseline (which only happens when the undo/redo
-     * feature flag is on — see `BrandPageMaker.mixin.ts`).
-     */
-    _captureTemplateSwitchIfEnabled(): void {
-      const historyStore = useHistoryStore();
-
-      if (!historyStore.baselineCaptured) return;
-
-      historyStore.captureTemplateSwitch();
-    },
-    async applyHistorySnapshot(
-      snapshot: BrandPageModel,
-      activePageId?: string,
-      logoEditsStr?: string,
-    ): Promise<void> {
-      const styleSettingsStore = useUiStyleSettingsStore();
-      const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
-      const backgroundSettingsStore = useUiBackgroundSettingsStore();
-      const pageNavigationStore = usePageNavigationStore();
-      const shopStore = useShopConfigStore();
-
-      // 1. Pages + header/footer sections (also covers content items).
-      this.initialisePagesForCurrentPage({
-        pages: snapshot.pages,
-        sections: {
-          [PAGE_SECTIONS.header]: {
-            [VIEWPORTS.desktop]: snapshot.pageHeaderDesktop,
-            [VIEWPORTS.mobile]: snapshot.pageHeaderMobile,
-          },
-          [PAGE_SECTIONS.footer]: {
-            [VIEWPORTS.desktop]: snapshot.pageFooterDesktop,
-            [VIEWPORTS.mobile]: snapshot.pageFooterMobile,
-          },
-        },
-      });
-
-      // 2. Page-level nav structure (routes, orders).
-      pageNavigationStore.setNav({ nav: snapshot.nav });
-
-      // 3. Navigation STYLES (header/footer nav colors, alignment, etc.) —
-      //    this is the bit that was being dropped before.
-      // Use function-form $patch so each nested style object is replaced as a
-      // whole reference. The object-form $patch (used by setState) deep-merges
-      // and would leave keys present in the live state but absent from the
-      // snapshot in place — e.g. switching button styles then undoing would
-      // leave the new style's borderRadius/borderStyle/borderWidth applied.
-      navigationStyleSettingsStore.$patch((state) => {
-        state.navigation[PAGE_SECTIONS.header][VIEWPORTS.desktop] =
-          new NavigationDesktop(snapshot.pageHeaderDesktop?.navigation);
-        state.navigation[PAGE_SECTIONS.header][VIEWPORTS.mobile] =
-          new NavigationMobile(snapshot.pageHeaderMobile?.navigation);
-      });
-
-      // 4. Global styles (logo, button, text, gallery). Same whole-reference
-      //    replacement reasoning as step 3.
-      styleSettingsStore.$patch((state) => {
-        state.buttonStyles = snapshot.styles.buttonStyles;
-        state.logoStyles = snapshot.styles.logoStyles;
-        state.textStyles = snapshot.styles.textStyles;
-        state.galleryStyles = snapshot.styles.galleryStyles;
-      });
-
-      // 5. Background styles. Same whole-reference replacement reasoning as
-      //    step 3 — `setBackgroundStyles` calls per-field setters that
-      //    `Object.assign` partials onto the live `style` and
-      //    `backgroundShapeStyle` objects, so keys from the previous mode
-      //    (e.g. background image url, shape style props) would survive an
-      //    undo back to a state that doesn't have them.
-      backgroundSettingsStore.$patch((state) => {
-        state.backgroundStyles = snapshot.styles.backgroundStyles;
-      });
-      backgroundSettingsStore.onBackgroundChanged();
-
-      // 6. Shop products are derived from shop-content blocks inside `pages`,
-      // so they're already implicitly restored at step 1. Re-run the shop
-      // store's derivation to keep `products` in sync with the snapshot
-      // pages. paymentConfig is intentionally NOT restored — selecting it is
-      // backend-confirmed (Stripe Connect / payment-provider linkage) per
-      // project-guardrails.md, so it must persist across undo. We pass the
-      // live paymentConfig back in to preserve it.
-      shopStore.initialiseShopStore({
-        paymentConfig: shopStore.paymentConfig,
-        pages: snapshot.pages ?? [],
-      });
-
-      // 7. Own-store scalar fields surfaced by the brandPageData getter.
-      if (snapshot.isModifiedAfterTemplateApplied !== undefined) {
-        this.isModifiedAfterTemplateApplied =
-          snapshot.isModifiedAfterTemplateApplied;
-      }
-
-      if (snapshot.brandPageType) {
-        this.setBrandPageType({ brandPageType: snapshot.brandPageType });
-      }
-
-      this.faviconUrl = snapshot.faviconUrl;
-      this.ogImageUrl = snapshot.ogImageUrl;
-      this.measurementID = snapshot.measurementID;
-      this.adsenseID = snapshot.adsenseID;
-      this.ogTitle = snapshot.ogTitle;
-      this.ogDescription = snapshot.ogDescription;
-      this.cookieOptions = snapshot.cookieOptions;
-      this.saveContactSettings = snapshot.saveContactSettings;
-
-      // 8. Re-sync the logo-settings sidebar's `selectedLogoImage` from the
-      //    restored header logo. The preview rehydrates via the page contents,
-      //    but `uiLogoSettings` holds its own copy that drives the sidebar
-      //    "current logo" state — same pattern as `initialiseStoresByBrandPageModelAsync`.
-      //    Also restores the variations grid + template asset for the
-      //    snapshot's draft token (both are sidecars to `brandPageData` —
-      //    BYO upload mutates them out of band). When the captured entry
-      //    carries a `logoEdits` sidecar (pre-purchase logo-tab edits —
-      //    text, support text, logo colors, fonts), `editableLogoStore.logoEdits`
-      //    is restored from that string so the sidebar form fields and the
-      //    save-time fabric-render POST both pick up the pre-edit state.
-      await this._syncLogoSettingsFromSnapshot(snapshot, logoEditsStr);
-
-      // 9. If the sidebar is editing a content item that no longer exists in
-      //    the restored page, fall back to the Content tab so the user doesn't
-      //    stare at a blank settings panel.
-      this._fallbackSidebarIfSelectedContentMissing(snapshot);
-
-      // 10. Switch to the page the user was viewing when this entry was
-      //     captured (or the closest still-existing page if the captured
-      //     page was the one being undone-away). The history store does the
-      //     walk-back resolution and passes us a pageId that's guaranteed to
-      //     exist in the restored nav — or undefined if no entry walking
-      //     back has a viable id, in which case we fall through to the
-      //     first/default route. Without this, the page-tabs carousel keeps
-      //     highlighting whatever page slug is in the URL (which can no
-      //     longer match any nav item after a page-add undo) and the
-      //     sidebar's `currentPage` getter silently falls back to page 0.
-      this._navigateToActivePage(activePageId);
-    },
-
-    async _syncLogoSettingsFromSnapshot(
-      snapshot: BrandPageModel,
-      logoEditsStr?: string,
-    ): Promise<void> {
-      const logoSettingsStore = useUiLogoSettingsStore();
-      const editableLogoStore = useUiEditableLogoStore();
-      const logoStore = useLogoStore();
-      const containerStore = useBrandPageContainerStore();
-
-      // Pre-restore logo identity, used to short-circuit the
-      // fabric-render call when only non-logo state changed.
-      const prevLogoEditsStr = JSON.stringify(
-        toRaw(editableLogoStore.logoEdits),
-      );
-      const prevDraftToken = editableLogoStore.logoDraftToken;
-
-      // Wholesale-replace via $patch so prior textObjects/colors don't
-      // leak across template switches.
-      if (logoEditsStr) {
-        try {
-          const parsed = JSON.parse(logoEditsStr);
-
-          editableLogoStore.$patch({ logoEdits: parsed });
-        } catch (error) {
-          console.error(
-            'brandpage-maker-store: failed to restore logoEdits',
-            error,
-          );
-        }
-      }
-
-      const logoImage =
-        snapshot.brandPageType === BRAND_PAGE_TYPES.default
-          ? (
-              snapshot.pages?.[0]?.contents?.find(
-                (c) => c.type === 'logo',
-              ) as any
-            )?.logoImage
-          : snapshot.pageHeaderDesktop?.logoImage;
-
-      if (!logoImage) return;
-
-      logoSettingsStore.setState({
-        newState: { selectedLogoImage: logoImage },
-      });
-
-      const draftToken: string | undefined = logoImage.logoDraftToken;
-
-      if (!draftToken) return;
-
-      // Re-derive enableEditMode + templateAsset from the draft registry
-      // (append-only for the session) instead of stashing on every entry.
-      const draft = logoStore.getLogoDraftAssetByToken(draftToken);
-
-      if (draft) {
-        editableLogoStore.setEnableEditMode(!draft.isByo);
-
-        if (draft.templateAsset) {
-          logoStore.setLogoTemplateAsset(draft.templateAsset);
-        }
-      }
-
-      editableLogoStore.setLogoDraftToken(draftToken);
-
-      // No logo change → cache is still correct; just stamp base64 back
-      // (snapshot doesn't carry logoImageBase64Url).
-      const logoUnchanged =
-        prevDraftToken === draftToken &&
-        (logoEditsStr === undefined || logoEditsStr === prevLogoEditsStr);
-
-      if (logoUnchanged) {
-        editableLogoStore.stampLogoBase64IntoBrandPageData();
-
-        return;
-      }
-
-      const isByo = !!draft?.isByo;
-
-      if (isByo) {
-        // BYO mints a fresh draftToken per upload so the per-token
-        // cache always matches; no re-render needed.
-        if (editableLogoStore.restoreVariationsForDraftToken(draftToken)) {
-          editableLogoStore.stampLogoBase64IntoBrandPageData();
-        }
-
-        return;
-      }
-
-      // Designed: draft token is reused across edits, so the cache
-      // only holds the latest render. Re-issue fabric-render — same
-      // call as the live edit path. Awaited so concurrent undos
-      // serialize and the call sits inside the isApplyingSnapshot
-      // window (watcher guard suppresses the writeback).
-      if (
-        containerStore.isPrePurchase &&
-        logoEditsStr &&
-        logoStore.logoTemplateAsset
-      ) {
-        // Stamp the cached (pre-undo) base64 onto brandPageData first
-        // so the canvas keeps showing the previous logo while the
-        // re-render is in flight. Without this the logoImageBase64Url
-        // fields are undefined (snapshot is stripped pre-purchase) and
-        // the canvas flickers blank for ~500-1500ms.
-        editableLogoStore.stampLogoBase64IntoBrandPageData();
-
-        try {
-          await editableLogoStore.updateEditableLogoImageUrlAsync();
-        } catch (error) {
-          console.error(
-            'brandpage-maker-store: failed to re-render logo on history apply',
-            error,
-          );
-        }
-      }
-    },
-
-    /**
-     * Restore the active page after a history apply. The id passed in is
-     * already validated against the restored nav by the history store; if
-     * it's undefined (no entry walking back had a viable page), fall back
-     * to the first/default route so the URL, `routeStore.currentRoute.params`,
-     * `pageNavigation.activePageId`, and the page-tab highlight all line up.
-     *
-     * `setCurrentActivePage` is called explicitly in addition to
-     * `navigateToPageByPageId` because `navigateToPageByPageId` is a no-op
-     * when the router instance is undefined (e.g. SSR / unit tests), but the
-     * Pinia state must still be updated so the sidebar's `currentPage`
-     * getter returns the right page.
-     */
-    _navigateToActivePage(activePageId?: string): void {
-      const pageNavigationStore = usePageNavigationStore();
-
-      let targetPageId = activePageId;
-
-      if (!targetPageId) {
-        const fallbackRoute = pageNavigationStore.routes.length
-          ? pageNavigationStore.getFirstOrDefaultRoute()
-          : undefined;
-
-        targetPageId = fallbackRoute?.pageId;
-      }
-
-      if (!targetPageId) return;
-
-      // Skip both the Pinia write and the router push when the target page
-      // is already active. The router push fires `router.afterEach` even
-      // for same-page navigation, and BrandPageMaker.mixin's afterEach hook
-      // resets the content-settings modeStack — which would snap the
-      // sidebar back to the default Content tab on every undo/redo,
-      // regardless of whether the user was deep-editing a content item.
-      if (pageNavigationStore.activePageId === targetPageId) return;
-
-      pageNavigationStore.setCurrentActivePage({ pageId: targetPageId });
-      navigateToPageByPageId(targetPageId);
-    },
-
-    _fallbackSidebarIfSelectedContentMissing(snapshot: BrandPageModel): void {
-      const contentSettingsStore = useUiContentSettingsStore();
-      const sideBarStore = useUiSideBarStore();
-
-      const selectedItemId = contentSettingsStore.selectedItemId;
-
-      if (!selectedItemId) return;
-
-      const existingContentIds = new Set<string>();
-
-      snapshot.pages?.forEach((page) => {
-        page.contents?.forEach((content) => {
-          if (content?.id) existingContentIds.add(content.id);
-        });
-      });
-
-      if (existingContentIds.has(selectedItemId)) return;
-
-      // The previously-selected content was undone away. Restore the
-      // Content tab's natural landing state — the same shape produced
-      // when the user clicks the Content tab fresh — instead of leaving
-      // the sidebar stuck rendering `<FocusedContentItemSettings>` for
-      // a missing item, which paints a blank panel.
-      //
-      // `resetMode()` pops the modeStack back to the base `edit` entry
-      // (the default landing mode); clearing `selectedItemId` releases
-      // the pointer to the now-deleted item.
-      sideBarStore.setSelectedTabName({
-        tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
-      });
-      contentSettingsStore.resetMode();
-      contentSettingsStore.selectedItemId = null;
-      contentSettingsStore.selectedItemFieldName = null;
-      contentSettingsStore.selectedItemIndex = null;
-      contentSettingsStore.selectedItemValue = null;
     },
     export(): BrandPageModel {
       const data = this.brandPageData;

package/src/brand-page-maker/stores/logo-store/logo-store.ts

@@ -14,11 +14,6 @@ export interface LogoDraftAsset {
   tick: number;
   isByo: boolean;
   logoEditUrl?: string;
-  // The `logoTemplateAsset` active when this draft was created. Stamped at
-  // upload/setState time so undo/redo can restore the right template token
-  // + isByo flag from a snapshot's `logoDraftToken` alone — without us
-  // bloating each history entry with a copy of the asset.
-  templateAsset?: LogoTemplateAsset;
 }
 
 export interface LogoStoreState {

package/src/brand-page-maker/stores/user/user-store.ts

@@ -33,7 +33,6 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
       canUseGettyVideos: false,
       canUseGoogleAdsense: false,
       googleAdsenseEnabled: false,
-      canUseUndoRedo: false,
     },
     emailAddress: '',
     hasPremiumSubscription: false,

package/src/bundles/bundled-translations.json

@@ -1126,9 +1126,7 @@
   "quickLinkBar": {
     "myWebPageLabel": "My web page:",
     "copyButton": "Copy",
-    "copiedButton": "Copied!",
-    "undoLabel": "Undo",
-    "redoLabel": "Redo"
+    "copiedButton": "Copied!"
   },
   "saveContactSettings": {
     "saveContentInfo": "Let visitors save your contact information when they view your Digital Business Card",

package/src/constants/ui.ts

@@ -14,7 +14,6 @@ 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,7 +29,6 @@ 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;
@@ -45,7 +44,6 @@ export default defineComponent({
     const styleSettingsStore = useUiStyleSettingsStore();
     const userStore = useBrandPageMakerUserStore();
     const eventTracker = useEventTracker();
-    const historyStore = useHistoryStore();
     const { externalEditor } = useExternalRichTextEditor();
 
     return {
@@ -67,7 +65,6 @@ export default defineComponent({
       pageSettingsStore,
       styleSettingsStore,
       eventTracker,
-      historyStore,
       externalEditor,
     };
   },
@@ -84,8 +81,6 @@ 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,7 +32,6 @@ export const Sample = (): any => {
     canUseGettyVideos: true,
     canUseGoogleAdsense: false,
     googleAdsenseEnabled: false,
-    canUseUndoRedo: false,
   };
 
   const pinia = setupStoryPinia();

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

@@ -76,12 +76,6 @@ 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: {
@@ -168,26 +162,15 @@ 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];
-        this.focusedIndex = index;
-        this.focusedDisplay = match[2];
-      } else {
-        this.focusedIndex = index;
-        this.focusedDisplay = itemValue;
+        value[index][this.valuePropName] = match[2];
       }
     },
-    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="inputDisplayValue(index)"
+                :value="itemValue(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/form-fields-field/FormFieldsField.mixin.ts

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch } from 'vue';
+import { defineComponent, ref } from 'vue';
 import type { PropType } from 'vue';
 import type { FormField } from '@brand-page';
 import { formFieldsTr } from '@src/composables/useTranslate';
@@ -49,34 +49,18 @@ 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,
+      valueWithState: ref(
+        props.value.map((field) => {
+          return {
+            field: field,
+            isCollapsed: true,
+            isTypeDropdownOpen: false,
+          };
+        }),
+      ),
     };
   },
   methods: {