@designcrowd/library.brand-page 6.0.6-undo-9 → 6.0.6-undo-11

package/lib/src/shared/content-settings/components/GenericTextInput.mixin.d.ts

@@ -99,7 +99,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onFocus(): void;
     onBlur(): void;
     onRteModelValue(newVal: string, meta?: {
-        isHydration?: boolean;
+        isHydrationWrite?: boolean;
     }): void;
     emitChange(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/src/shared/content-settings/components/GenericTextInput.mixin.js

@@ -209,7 +209,7 @@ export default defineComponent({
         // would drop the second argument), records it for the `text` setter,
         // then applies the write.
         onRteModelValue(newVal, meta) {
-            this.pendingWriteIsHydration = meta?.isHydration === true;
+            this.pendingWriteIsHydration = meta?.isHydrationWrite === true;
             this.text = newVal;
         },
         emitChange() {

package/lib/src/shared/content-settings/components/email-field/EmailField.mixin.d.ts

@@ -96,7 +96,7 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     onFocus(): void;
     onBlur(): void;
     onRteModelValue(newVal: string, meta?: {
-        isHydration?: boolean;
+        isHydrationWrite?: boolean;
     }): void;
     emitChange(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/src/shared/content-settings/components/tel-field/TelField.mixin.d.ts

@@ -96,7 +96,7 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     onFocus(): void;
     onBlur(): void;
     onRteModelValue(newVal: string, meta?: {
-        isHydration?: boolean;
+        isHydrationWrite?: boolean;
     }): void;
     emitChange(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/src/shared/content-settings/components/text-field/TextField.mixin.d.ts

@@ -96,7 +96,7 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     onFocus(): void;
     onBlur(): void;
     onRteModelValue(newVal: string, meta?: {
-        isHydration?: boolean;
+        isHydrationWrite?: boolean;
     }): void;
     emitChange(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/src/shared/content-settings/components/textarea-field/TextareaField.mixin.d.ts

@@ -110,7 +110,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onFocus(): void;
     onBlur(): void;
     onRteModelValue(newVal: string, meta?: {
-        isHydration?: boolean;
+        isHydrationWrite?: boolean;
     }): void;
     emitChange(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/src/shared/content-settings/components/url-field/UrlField.mixin.d.ts

@@ -103,7 +103,7 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
     onFocus(): void;
     onBlur(): void;
     onRteModelValue(newVal: string, meta?: {
-        isHydration?: boolean;
+        isHydrationWrite?: boolean;
     }): void;
     emitChange(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/src/shared/content-settings/components/youtube-video-field/YoutubeVideoField.mixin.d.ts

@@ -99,7 +99,7 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
     onFocus(): void;
     onBlur(): void;
     onRteModelValue(newVal: string, meta?: {
-        isHydration?: boolean;
+        isHydrationWrite?: boolean;
     }): void;
     emitChange(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/src/shared/content-settings/store/content-settings-store.js

@@ -22,6 +22,23 @@ const DEFAULT_TEXT_COLOR_DEPENDENT_TYPES = [
 // result[i].x = v`), which would leave the payload byte-identical to
 // the store while state actually changed.
 const isSameValue = (a, b) => a === b;
+/**
+ * Arms the undo history to fold the next mutation into the current head
+ * instead of pushing an entry — the hydration-write contract (BP-5810).
+ * Framework-originated writes (RTE canonical HTML on mount, style
+ * re-derivation, lazy config hydration) reach this store through debounced
+ * field chains, so the flag travels WITH the payload and the arm happens
+ * here, in the same tick as the write — arming at emit time would lapse
+ * before the write lands. Call only AFTER an action's drop guards (missing
+ * item, value-identical): a dropped write must never arm. See
+ * UpdateItemValuePayload.isHydrationWrite (models.ts) for the payload
+ * contract.
+ */
+const armHistoryMergeForHydrationWrite = (isHydrationWrite) => {
+    if (!isHydrationWrite)
+        return;
+    useHistoryStore().mergeNextMutation();
+};
 export const CONTENT_SETTINGS_MODES = {
     edit: 'edit',
     add: 'add',
@@ -222,15 +239,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             if (isSameValue(item.settings.content[payload.name], payload.value)) {
                 return; // no-op write: don't validate, don't flip the modified flag
             }
-            // Hydration write-backs (RTE canonical HTML on mount, lazy config
-            // hydration, stale-id clears) fold into the current undo head instead
-            // of pushing an entry. Arming here — same tick as the write — is what
-            // makes the merge reliable: the flag travelled with the payload
-            // through the debounced field chain, so emit-time arming would lapse
-            // before the write lands (BP-5810).
-            if (payload.isHydrationWrite) {
-                useHistoryStore().mergeNextMutation();
-            }
+            armHistoryMergeForHydrationWrite(payload.isHydrationWrite);
             item.settings.content[payload.name] = payload.value;
             this.validateItem({
                 id: payload.id,
@@ -246,10 +255,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             if (Object.keys(value ?? {}).every((k) => isSameValue(item.settings.content[k], value[k]))) {
                 return; // every field a no-op — see isSameValue
             }
-            // Same hydration-write contract as updateItemValue.
-            if (isHydrationWrite) {
-                useHistoryStore().mergeNextMutation();
-            }
+            armHistoryMergeForHydrationWrite(isHydrationWrite);
             item.settings.content = vueDeepMerge(item.settings.content, value);
             this.validateItem({ id, name });
             this.onContentChanged();
@@ -259,10 +265,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             if (!item) {
                 return;
             }
-            // Same hydration-write contract as updateItemValue.
-            if (isHydrationWrite) {
-                useHistoryStore().mergeNextMutation();
-            }
+            armHistoryMergeForHydrationWrite(isHydrationWrite);
             item.settings.content[`${name}Style`].textStyleType = vueDeepMerge(item.settings.content, value);
             this.validateItem({ id, name });
             this.onContentChanged();
@@ -272,14 +275,11 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             if (!item) {
                 return;
             }
-            // Same hydration-write contract as updateItemValue. The RTE's
-            // mount-time style sync (setInitialStyleSettings) lands here ~100ms
-            // BEFORE its canonical text write-back — if this write opens a plain
-            // capture burst, the flagged text write joins it and both commit as a
-            // phantom entry (BP-5810's second act).
-            if (isHydrationWrite) {
-                useHistoryStore().mergeNextMutation();
-            }
+            // The RTE's mount-time style sync (setInitialStyleSettings) lands here
+            // ~100ms BEFORE its canonical text write-back — unflagged, it would
+            // open a plain capture burst that swallows the flagged text write
+            // (BP-5810's second act).
+            armHistoryMergeForHydrationWrite(isHydrationWrite);
             item.settings.content[`${name}Style`] = vueDeepMerge(item.settings.content[`${name}Style`], value);
             this.validateItem({ id, name });
             this.onContentChanged();
@@ -296,10 +296,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             if (!item) {
                 return;
             }
-            // Same hydration-write contract as updateItemValue.
-            if (isHydrationWrite) {
-                useHistoryStore().mergeNextMutation();
-            }
+            armHistoryMergeForHydrationWrite(isHydrationWrite);
             item.settings.content.textItems[index].textStyle.textStyleType =
                 vueDeepMerge(item.settings.content.textItems[index].textStyle.textStyleType, value);
             this.validateItem({ id, name });
@@ -310,10 +307,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             if (!item) {
                 return;
             }
-            // Same hydration-write contract as updateItemValue.
-            if (isHydrationWrite) {
-                useHistoryStore().mergeNextMutation();
-            }
+            armHistoryMergeForHydrationWrite(isHydrationWrite);
             item.settings.content.textItems[index].textStyle = vueDeepMerge(item.settings.content.textItems[index].textStyle, value);
             this.validateItem({ id, name });
             this.onContentChanged();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.0.6-undo-9",
+  "version": "6.0.6-undo-11",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page-maker/components/quick-link-bar/RedoButton.vue

@@ -3,7 +3,10 @@
     direction="top"
     alignment="center"
     :should-show-icon="false"
-    class="c-redo-button-tooltip"
+    :class="[
+      'c-redo-button-tooltip',
+      { 'c-tooltip-hidden': isMobileScreenSize },
+    ]"
   >
     <template #open>
       <Icon
@@ -39,13 +42,20 @@ import { Icon, Tooltip } from '@designcrowd/fe-shared-lib';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { useAiWebsiteBuilderThreadStore } from '@brand-page-maker/stores/ai-thread/ai-website-builder-thread-store';
 import { useBrandPageContainerStore } from '@brand-page-maker/stores/brandpage-container';
+import { useUiStore } from '@brand-page-maker/stores/ui/ui-store';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
+import { UI_SCREENSIZE_MODES } from '@shared/models';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 
 const historyStore = useHistoryStore();
 const aiThreadStore = useAiWebsiteBuilderThreadStore();
 const containerStore = useBrandPageContainerStore();
 const templateSettingsStore = useUiTemplateSettingsStore();
+const uiStore = useUiStore();
+
+const isMobileScreenSize = computed(
+  () => uiStore.screenSizeMode === UI_SCREENSIZE_MODES.mobile,
+);
 
 const isDisabled = computed(
   () =>
@@ -71,4 +81,8 @@ const onClick = () => {
   width: auto;
   padding: 4px 8px;
 }
+
+.c-tooltip-hidden :deep(.shared-tooltip__content) {
+  display: none !important;
+}
 </style>

package/src/brand-page-maker/components/quick-link-bar/UndoButton.vue

@@ -3,7 +3,10 @@
     direction="top"
     alignment="center"
     :should-show-icon="false"
-    class="c-undo-button-tooltip"
+    :class="[
+      'c-undo-button-tooltip',
+      { 'c-tooltip-hidden': isMobileScreenSize },
+    ]"
   >
     <template #open>
       <Icon
@@ -39,13 +42,20 @@ import { Icon, Tooltip } from '@designcrowd/fe-shared-lib';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { useAiWebsiteBuilderThreadStore } from '@brand-page-maker/stores/ai-thread/ai-website-builder-thread-store';
 import { useBrandPageContainerStore } from '@brand-page-maker/stores/brandpage-container';
+import { useUiStore } from '@brand-page-maker/stores/ui/ui-store';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
+import { UI_SCREENSIZE_MODES } from '@shared/models';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 
 const historyStore = useHistoryStore();
 const aiThreadStore = useAiWebsiteBuilderThreadStore();
 const containerStore = useBrandPageContainerStore();
 const templateSettingsStore = useUiTemplateSettingsStore();
+const uiStore = useUiStore();
+
+const isMobileScreenSize = computed(
+  () => uiStore.screenSizeMode === UI_SCREENSIZE_MODES.mobile,
+);
 
 const isDisabled = computed(
   () =>
@@ -71,4 +81,8 @@ const onClick = () => {
   width: auto;
   padding: 4px 8px;
 }
+
+.c-tooltip-hidden :deep(.shared-tooltip__content) {
+  display: none !important;
+}
 </style>

package/src/brand-page-maker/components/quick-link-bar/undo-redo-buttons.test.ts

@@ -66,6 +66,12 @@ vi.mock('@shared/template-settings/store', () => ({
   useUiTemplateSettingsStore: vi.fn(() => templateSettingsStoreMock),
 }));
 
+const uiStoreMock = { screenSizeMode: 'desktop' as 'desktop' | 'mobile' };
+
+vi.mock('@brand-page-maker/stores/ui/ui-store', () => ({
+  useUiStore: vi.fn(() => uiStoreMock),
+}));
+
 beforeEach(() => {
   setActivePinia(createPinia());
   historyStoreMock.canUndo = true;
@@ -76,6 +82,7 @@ beforeEach(() => {
   aiStoreMock.isProcessing = false;
   containerStoreMock.isSaving = false;
   templateSettingsStoreMock.isBusy = false;
+  uiStoreMock.screenSizeMode = 'desktop';
 });
 
 describe('UndoButton', () => {

package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts

@@ -523,7 +523,7 @@ export const useRichTextEditor = (
     // focuses it before formatting, so this doesn't occur — revisit if a
     // consumer ever drives toolbar actions on an unfocused editor.
     emit('update:modelValue', sanitizedData.sanitizedHtml, {
-      isHydration: !editor.isFocused,
+      isHydrationWrite: !editor.isFocused,
     });
   });
 

package/src/shared/content-settings/components/GenericTextInput.mixin.test.ts

@@ -2,10 +2,10 @@ import { defineComponent } from 'vue';
 import { mount } from '@vue/test-utils';
 import GenericTextInputMixin from './GenericTextInput.mixin';
 
-// BP-5810: the RTE attaches `{ isHydration: true }` meta to its canonical
-// write-back emits. GenericTextInput must carry that through its 100ms
-// debounce onto the outgoing payload as `isHydrationWrite` — and downgrade
-// the burst as soon as a single non-hydration write lands in it.
+// BP-5810: the RTE attaches `{ isHydrationWrite: true }` meta to its
+// canonical write-back emits. GenericTextInput must carry that through its
+// 100ms debounce onto the outgoing payload under the same name — and
+// downgrade the burst as soon as a single non-hydration write lands in it.
 
 const DEBOUNCE_WAIT_MS = 100;
 
@@ -50,7 +50,7 @@ describe('GenericTextInput hydration burst flag', () => {
     const wrapper = mountHost();
 
     wrapper.vm.onRteModelValue('<p style="text-align: center;"></p>', {
-      isHydration: true,
+      isHydrationWrite: true,
     });
 
     await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
@@ -69,8 +69,8 @@ describe('GenericTextInput hydration burst flag', () => {
   test('coalesced hydration writes in one burst stay flagged', async () => {
     const wrapper = mountHost();
 
-    wrapper.vm.onRteModelValue('<p>a</p>', { isHydration: true });
-    wrapper.vm.onRteModelValue('<p>b</p>', { isHydration: true });
+    wrapper.vm.onRteModelValue('<p>a</p>', { isHydrationWrite: true });
+    wrapper.vm.onRteModelValue('<p>b</p>', { isHydrationWrite: true });
 
     await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
 
@@ -82,7 +82,7 @@ describe('GenericTextInput hydration burst flag', () => {
   test('a user write in the same burst downgrades it to a normal edit', async () => {
     const wrapper = mountHost();
 
-    wrapper.vm.onRteModelValue('<p>canonical</p>', { isHydration: true });
+    wrapper.vm.onRteModelValue('<p>canonical</p>', { isHydrationWrite: true });
     // Focused typing emits without meta.
     wrapper.vm.onRteModelValue('<p>typed</p>');
 
@@ -106,7 +106,7 @@ describe('GenericTextInput hydration burst flag', () => {
   test('the flag resets between bursts', async () => {
     const wrapper = mountHost();
 
-    wrapper.vm.onRteModelValue('<p>canonical</p>', { isHydration: true });
+    wrapper.vm.onRteModelValue('<p>canonical</p>', { isHydrationWrite: true });
     await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
 
     wrapper.vm.text = '<p>typed later</p>';

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

@@ -232,8 +232,11 @@ export default defineComponent({
     // attaches to its update:modelValue emits (a plain v-model binding
     // would drop the second argument), records it for the `text` setter,
     // then applies the write.
-    onRteModelValue(newVal: string, meta?: { isHydration?: boolean }): void {
-      this.pendingWriteIsHydration = meta?.isHydration === true;
+    onRteModelValue(
+      newVal: string,
+      meta?: { isHydrationWrite?: boolean },
+    ): void {
+      this.pendingWriteIsHydration = meta?.isHydrationWrite === true;
       this.text = newVal;
     },
 

package/src/shared/content-settings/store/content-settings-store.ts

@@ -69,6 +69,24 @@ const DEFAULT_TEXT_COLOR_DEPENDENT_TYPES: readonly ContentType[] = [
 // the store while state actually changed.
 const isSameValue = (a: unknown, b: unknown): boolean => a === b;
 
+/**
+ * Arms the undo history to fold the next mutation into the current head
+ * instead of pushing an entry — the hydration-write contract (BP-5810).
+ * Framework-originated writes (RTE canonical HTML on mount, style
+ * re-derivation, lazy config hydration) reach this store through debounced
+ * field chains, so the flag travels WITH the payload and the arm happens
+ * here, in the same tick as the write — arming at emit time would lapse
+ * before the write lands. Call only AFTER an action's drop guards (missing
+ * item, value-identical): a dropped write must never arm. See
+ * UpdateItemValuePayload.isHydrationWrite (models.ts) for the payload
+ * contract.
+ */
+const armHistoryMergeForHydrationWrite = (isHydrationWrite?: boolean): void => {
+  if (!isHydrationWrite) return;
+
+  useHistoryStore().mergeNextMutation();
+};
+
 export const CONTENT_SETTINGS_MODES = {
   edit: 'edit',
   add: 'add',
@@ -403,15 +421,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         return; // no-op write: don't validate, don't flip the modified flag
       }
 
-      // Hydration write-backs (RTE canonical HTML on mount, lazy config
-      // hydration, stale-id clears) fold into the current undo head instead
-      // of pushing an entry. Arming here — same tick as the write — is what
-      // makes the merge reliable: the flag travelled with the payload
-      // through the debounced field chain, so emit-time arming would lapse
-      // before the write lands (BP-5810).
-      if (payload.isHydrationWrite) {
-        useHistoryStore().mergeNextMutation();
-      }
+      armHistoryMergeForHydrationWrite(payload.isHydrationWrite);
 
       item.settings.content[payload.name] = payload.value;
 
@@ -445,10 +455,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         return; // every field a no-op — see isSameValue
       }
 
-      // Same hydration-write contract as updateItemValue.
-      if (isHydrationWrite) {
-        useHistoryStore().mergeNextMutation();
-      }
+      armHistoryMergeForHydrationWrite(isHydrationWrite);
 
       item.settings.content = vueDeepMerge(item.settings.content, value);
       this.validateItem({ id, name });
@@ -466,10 +473,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         return;
       }
 
-      // Same hydration-write contract as updateItemValue.
-      if (isHydrationWrite) {
-        useHistoryStore().mergeNextMutation();
-      }
+      armHistoryMergeForHydrationWrite(isHydrationWrite);
 
       item.settings.content[`${name}Style`].textStyleType = vueDeepMerge(
         item.settings.content,
@@ -490,14 +494,11 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         return;
       }
 
-      // Same hydration-write contract as updateItemValue. The RTE's
-      // mount-time style sync (setInitialStyleSettings) lands here ~100ms
-      // BEFORE its canonical text write-back — if this write opens a plain
-      // capture burst, the flagged text write joins it and both commit as a
-      // phantom entry (BP-5810's second act).
-      if (isHydrationWrite) {
-        useHistoryStore().mergeNextMutation();
-      }
+      // The RTE's mount-time style sync (setInitialStyleSettings) lands here
+      // ~100ms BEFORE its canonical text write-back — unflagged, it would
+      // open a plain capture burst that swallows the flagged text write
+      // (BP-5810's second act).
+      armHistoryMergeForHydrationWrite(isHydrationWrite);
 
       item.settings.content[`${name}Style`] = vueDeepMerge(
         item.settings.content[`${name}Style`],
@@ -528,10 +529,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         return;
       }
 
-      // Same hydration-write contract as updateItemValue.
-      if (isHydrationWrite) {
-        useHistoryStore().mergeNextMutation();
-      }
+      armHistoryMergeForHydrationWrite(isHydrationWrite);
 
       item.settings.content.textItems[index!].textStyle.textStyleType =
         vueDeepMerge(
@@ -554,10 +552,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         return;
       }
 
-      // Same hydration-write contract as updateItemValue.
-      if (isHydrationWrite) {
-        useHistoryStore().mergeNextMutation();
-      }
+      armHistoryMergeForHydrationWrite(isHydrationWrite);
 
       item.settings.content.textItems[index!].textStyle = vueDeepMerge(
         item.settings.content.textItems[index!].textStyle,