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

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

@@ -0,0 +1,666 @@
+import { defineStore } from 'pinia';
+import { computed, ref, shallowRef, toRaw, watch } from 'vue';
+import type { BrandPageModel } from '@brand-page';
+import { useBrandPageMakerStore } from '../brandpage-maker/brandpage-maker-store';
+import { useBrandPageContainerStore } from '../brandpage-container';
+import { useAiWebsiteBuilderThreadStore } from '../ai-thread/ai-website-builder-thread-store';
+import { useEventTracker } from '../../composables/useEventTracker';
+import { usePageNavigationStore } from '@shared/page-navigation/store/page-navigation-store';
+import { useUiEditableLogoStore } from '@shared/logo-settings/store/editable-logo-store';
+
+/**
+ * A single history entry. `snapshot` is JSON-stringified up-front so Pinia
+ * treats it as opaque (no per-field reactivity) and `sizeBytes` is exact.
+ * Sidecar state not in `brandPageData` rides along on this entry —
+ * `activePageId` for page-tab restore, `logoEdits` for pre-purchase logo
+ * form state.
+ */
+export interface HistoryEntry {
+  snapshot: string;
+  timestamp: string;
+  source: 'manual_edit' | 'template_switch' | 'ai_changeset' | 'rich_text';
+  actor: 'user' | 'ai_builder';
+  label?: string;
+  sizeBytes: number;
+  /** Active page id at capture time. Empty before first router push. */
+  activePageId: string;
+  /** JSON-stringified `editableLogoStore.logoEdits`. Undefined if logo tab never opened. */
+  logoEdits?: string;
+}
+
+// Monotonic burst — first mutation starts the timer, subsequent mutations
+// don't reset it; max-wait ceiling forces a commit during continuous typing.
+const CAPTURE_DEBOUNCE_MS = 1700;
+const CAPTURE_MAX_WAIT_MS = 10000;
+
+// Merge bursts flush quickly — sync hydration writes land in <50ms,
+// user typing takes >150ms, so a short debounce keeps user input out
+// of the merge.
+const MERGE_DEBOUNCE_MS = 50;
+
+// FR-12 / FR-13 / FR-13c. 25 MB per-entry accommodates a high-res BYO logo
+// rendered into 4 viewport sections + per-page logo blocks. Oversize
+// entries are skipped with telemetry; 100 MB total evicts oldest
+// non-baseline entries.
+const MAX_ENTRIES = 40;
+const MAX_MEMORY_BYTES = 100 * 1024 * 1024;
+const MAX_ENTRY_BYTES = 25 * 1024 * 1024;
+
+// Window after baseline during which captured mutations REPLACE the
+// baseline instead of pushing — covers async post-init cascades
+// (template load, router afterEach, layout settle).
+const BASELINE_SETTLE_MS = 2000;
+
+export const useHistoryStore = defineStore('history', () => {
+  const eventTracker = useEventTracker();
+
+  // --- State ---
+
+  // shallowRef keeps the array reactive but prevents Pinia from proxying
+  // every entry — combined with stringified snapshots, entries are
+  // fully opaque to reactivity traversal.
+  const entries = shallowRef<HistoryEntry[]>([]);
+  const currentIndex = ref(-1); // -1 means "no baseline yet"
+  const isApplyingSnapshot = ref(false);
+  // Bumped once per undo/redo apply so editors can detect an external re-seed
+  // without depending on the synchronous isApplyingSnapshot window (already
+  // closed by the time their async model.value watcher runs).
+  const snapshotAppliedToken = ref(0);
+  const baselineCaptured = ref(false);
+  const watcherInstalled = ref(false);
+  let baselineCapturedAt = 0;
+
+  // --- Getters ---
+
+  const canUndo = computed(() => currentIndex.value > 0);
+  const canRedo = computed(
+    () =>
+      currentIndex.value >= 0 && currentIndex.value < entries.value.length - 1,
+  );
+
+  // --- Internals ---
+
+  // Pre-purchase only (matches the save-path strip in
+  // `brand-page-container-store.ts:805`). Each rendered base64 is ~2-4 MB
+  // across 6-8 placements, so unstripped snapshots bump the 25 MB cap.
+  // `_syncLogoSettingsFromSnapshot` repopulates on undo.
+  function stripLogoBase64IfPrePurchase(data: {
+    pages?: { contents?: { logoImageBase64Url?: string }[] }[];
+    pageHeaderDesktop?: { logoImageBase64Url?: string };
+    pageHeaderMobile?: { logoImageBase64Url?: string };
+    pageFooterDesktop?: { logoImageBase64Url?: string };
+    pageFooterMobile?: { logoImageBase64Url?: string };
+  }): void {
+    try {
+      if (!useBrandPageContainerStore().isPrePurchase) return;
+    } catch {
+      return;
+    }
+
+    if (data.pageHeaderDesktop) {
+      data.pageHeaderDesktop.logoImageBase64Url = undefined;
+    }
+
+    if (data.pageHeaderMobile) {
+      data.pageHeaderMobile.logoImageBase64Url = undefined;
+    }
+
+    if (data.pageFooterDesktop) {
+      data.pageFooterDesktop.logoImageBase64Url = undefined;
+    }
+
+    if (data.pageFooterMobile) {
+      data.pageFooterMobile.logoImageBase64Url = undefined;
+    }
+
+    if (Array.isArray(data.pages)) {
+      for (const page of data.pages) {
+        if (!Array.isArray(page?.contents)) continue;
+
+        for (const content of page.contents) {
+          if (
+            content &&
+            typeof content === 'object' &&
+            'logoImageBase64Url' in content
+          ) {
+            content.logoImageBase64Url = undefined;
+          }
+        }
+      }
+    }
+  }
+
+  function serializeCurrentSnapshot(): string | null {
+    try {
+      const cloned = JSON.parse(
+        JSON.stringify(toRaw(useBrandPageMakerStore().brandPageData)),
+      );
+
+      stripLogoBase64IfPrePurchase(cloned);
+
+      return JSON.stringify(cloned);
+    } catch (error) {
+      console.error('history-store: failed to serialize snapshot', error);
+
+      return null;
+    }
+  }
+
+  function getCurrentActivePageId(): string {
+    return usePageNavigationStore().activePageId ?? '';
+  }
+
+  function serializeCurrentLogoEdits(): string | undefined {
+    try {
+      const editableLogoStore = useUiEditableLogoStore();
+
+      return JSON.stringify(toRaw(editableLogoStore.logoEdits));
+    } catch (error) {
+      console.error('history-store: failed to serialize logoEdits', error);
+
+      return undefined;
+    }
+  }
+
+  // Two-phase merge flag. Hydration write sites call `mergeNextMutation()`
+  // immediately before their imperative write, which sets `mergeArmed`.
+  // When the watcher's `scheduleAutoCapture` arms a new idle timer, it
+  // transfers `mergeArmed` into `pendingTimerIsMerge`. The flush then
+  // consumes `pendingTimerIsMerge` and merges into the current head
+  // instead of pushing.
+  //
+  // The microtask cleanup on `mergeArmed` prevents stale flags surviving
+  // when the user navigates away (e.g. sidebar tab switch) before the
+  // flagged write actually happens — a previously-set arm is dropped
+  // synchronously after the current tick if no watcher fired.
+  const mergeArmed = ref(false);
+  let pendingTimerIsMerge = false;
+
+  // Returns 'noop' when no-change vs current head, 'oversized' when over
+  // MAX_ENTRY_BYTES, else 'committed'. Truncates the redo tail, caps at
+  // MAX_ENTRIES, evicts oldest non-baseline to stay under MAX_MEMORY_BYTES.
+  // Baseline (index 0) is never evicted.
+  function commitEntry(args: {
+    snapshot: string;
+    source: HistoryEntry['source'];
+    actor: HistoryEntry['actor'];
+    label?: string;
+    activePageId: string;
+    logoEdits?: string;
+  }): 'committed' | 'oversized' | 'noop' {
+    const current = entries.value[currentIndex.value];
+
+    // Compare both snapshot AND logoEdits sidecar — pre-purchase logo
+    // edits don't change brandPageData (base64 is stripped) so the
+    // sidecar is the only signal that distinguishes them.
+    if (
+      current &&
+      current.snapshot === args.snapshot &&
+      current.logoEdits === args.logoEdits
+    ) {
+      return 'noop';
+    }
+
+    if (args.snapshot.length > MAX_ENTRY_BYTES) {
+      eventTracker.sendHistoryOversizedEvent({
+        attempted_bytes: args.snapshot.length,
+        source: args.source,
+      });
+
+      return 'oversized';
+    }
+
+    const entry: HistoryEntry = {
+      snapshot: args.snapshot,
+      timestamp: new Date().toISOString(),
+      source: args.source,
+      actor: args.actor,
+      label: args.label,
+      sizeBytes: args.snapshot.length,
+      activePageId: args.activePageId,
+      logoEdits: args.logoEdits,
+    };
+
+    // FR-11: truncate redo tail, then append.
+    const next = entries.value.slice(0, currentIndex.value + 1);
+
+    next.push(entry);
+
+    // FR-12: 40-entry cap. Drop oldest non-baseline (index 1) if we'd exceed.
+    let didEvict = false;
+
+    while (next.length > MAX_ENTRIES && next.length > 1) {
+      next.splice(1, 1);
+      didEvict = true;
+    }
+
+    // FR-13: keep total serialized size under 100 MB. Drop oldest
+    // non-baseline repeatedly until under budget. Baseline alone can exceed
+    // the budget on a very large page — in that pathological case we stop
+    // evicting at length 2 (baseline + newest) rather than dropping the
+    // baseline.
+    let totalBytes = next.reduce((sum, e) => sum + e.sizeBytes, 0);
+
+    while (totalBytes > MAX_MEMORY_BYTES && next.length > 2) {
+      totalBytes -= next[1].sizeBytes;
+      next.splice(1, 1);
+      didEvict = true;
+    }
+
+    entries.value = next;
+    currentIndex.value = next.length - 1;
+
+    if (didEvict) {
+      eventTracker.sendHistoryCappedEvent({
+        entries_count: next.length,
+        size_bytes: totalBytes,
+      });
+    }
+
+    return 'committed';
+  }
+
+  // Hoisted so force-commit paths (template switch, AI apply) can cancel
+  // any pending auto-capture that would otherwise duplicate their entry.
+  let idleTimerId: ReturnType<typeof setTimeout> | null = null;
+  let maxWaitTimerId: ReturnType<typeof setTimeout> | null = null;
+
+  function cancelPendingAutoCapture(): void {
+    if (idleTimerId !== null) {
+      clearTimeout(idleTimerId);
+      idleTimerId = null;
+    }
+
+    if (maxWaitTimerId !== null) {
+      clearTimeout(maxWaitTimerId);
+      maxWaitTimerId = null;
+    }
+  }
+
+  function installWatcher(): void {
+    if (watcherInstalled.value) return;
+
+    const flush = () => {
+      cancelPendingAutoCapture();
+
+      if (isApplyingSnapshot.value) return;
+
+      if (!baselineCaptured.value) return;
+
+      const snapshot = serializeCurrentSnapshot();
+
+      if (!snapshot) return;
+
+      const activePageId = getCurrentActivePageId();
+      const logoEdits = serializeCurrentLogoEdits();
+
+      // Settle window: fold post-init reactive cascades back into the
+      // baseline so undo doesn't light up before the user has done
+      // anything.
+      const inSettleWindow =
+        currentIndex.value === 0 &&
+        Date.now() - baselineCapturedAt < BASELINE_SETTLE_MS;
+
+      // Merge: the timer that fired this flush was armed during a
+      // hydration burst — replace the current head in place instead of
+      // pushing. Consumed once.
+      const shouldMerge = pendingTimerIsMerge;
+
+      pendingTimerIsMerge = false;
+
+      if (inSettleWindow) {
+        entries.value = [
+          {
+            ...entries.value[0],
+            snapshot,
+            timestamp: new Date().toISOString(),
+            sizeBytes: snapshot.length,
+            activePageId,
+            logoEdits,
+          },
+        ];
+
+        return;
+      }
+
+      if (shouldMerge && entries.value[currentIndex.value]) {
+        const next = entries.value.slice();
+
+        next[currentIndex.value] = {
+          ...next[currentIndex.value],
+          snapshot,
+          timestamp: new Date().toISOString(),
+          sizeBytes: snapshot.length,
+          activePageId,
+          logoEdits,
+        };
+        entries.value = next;
+
+        return;
+      }
+
+      commitEntry({
+        snapshot,
+        source: 'manual_edit',
+        actor: 'user',
+        activePageId,
+        logoEdits,
+      });
+    };
+
+    // Monotonic — first mutation arms; subsequent ones inside the window
+    // don't reset. Gated on isApplyingSnapshot so undo/redo don't leave
+    // a stale timer ticking. If a hydration site armed `mergeArmed`
+    // immediately before the mutation that triggered this run, transfer
+    // the intent into `pendingTimerIsMerge` so the resulting flush
+    // merges instead of commits.
+    const scheduleAutoCapture = (): void => {
+      if (isApplyingSnapshot.value) return;
+
+      if (idleTimerId !== null) return;
+
+      if (mergeArmed.value) {
+        pendingTimerIsMerge = true;
+        mergeArmed.value = false;
+      }
+
+      const idle = pendingTimerIsMerge
+        ? MERGE_DEBOUNCE_MS
+        : CAPTURE_DEBOUNCE_MS;
+
+      idleTimerId = setTimeout(flush, idle);
+      maxWaitTimerId = setTimeout(flush, CAPTURE_MAX_WAIT_MS);
+    };
+
+    watch(() => useBrandPageMakerStore().brandPageData, scheduleAutoCapture, {
+      deep: true,
+    });
+
+    watcherInstalled.value = true;
+  }
+
+  // --- Actions ---
+
+  // Called once per session by BrandPageMaker.mixin.ts after
+  // setIsBrandPageLoaded(true). Installs the watcher.
+  function captureBaseline(): void {
+    if (baselineCaptured.value) return;
+
+    installWatcher();
+
+    const snapshot = serializeCurrentSnapshot();
+
+    if (!snapshot) return;
+
+    entries.value = [
+      {
+        snapshot,
+        timestamp: new Date().toISOString(),
+        source: 'manual_edit',
+        actor: 'user',
+        label: 'baseline',
+        sizeBytes: snapshot.length,
+        activePageId: getCurrentActivePageId(),
+        logoEdits: serializeCurrentLogoEdits(),
+      },
+    ];
+    currentIndex.value = 0;
+    baselineCaptured.value = true;
+    baselineCapturedAt = Date.now();
+  }
+
+  // Force-commit for non-watcher call sites (template switch, AI apply).
+  function capture(args: {
+    source: HistoryEntry['source'];
+    actor: HistoryEntry['actor'];
+    label?: string;
+  }): 'committed' | 'oversized' | 'noop' | 'skipped' {
+    if (isApplyingSnapshot.value) return 'skipped';
+
+    if (!baselineCaptured.value) return 'skipped';
+
+    const snapshot = serializeCurrentSnapshot();
+
+    if (!snapshot) return 'skipped';
+
+    return commitEntry({
+      snapshot,
+      activePageId: getCurrentActivePageId(),
+      logoEdits: serializeCurrentLogoEdits(),
+      ...args,
+    });
+  }
+
+  // Cancel pending auto-capture so the forced entry doesn't duplicate
+  // with the watcher's eventual flush.
+  function captureTemplateSwitch(
+    label?: string,
+  ): 'committed' | 'oversized' | 'noop' | 'skipped' {
+    cancelPendingAutoCapture();
+
+    return capture({ source: 'template_switch', actor: 'user', label });
+  }
+
+  function captureAiChangeset(
+    label?: string,
+  ): 'committed' | 'oversized' | 'noop' | 'skipped' {
+    cancelPendingAutoCapture();
+
+    return capture({ source: 'ai_changeset', actor: 'ai_builder', label });
+  }
+
+  // Active-page resolution priority:
+  //   1. Diff `cameFromIndex` against target — pages present in target
+  //      but absent from source are being restored/added; navigate there
+  //      (undo-of-delete, redo-of-add).
+  //   2. Walk back from targetIndex for the closest entry whose
+  //      activePageId still exists (undo-of-add and non-page edits).
+  async function applySnapshotString(
+    snapshotStr: string,
+    targetIndex: number,
+    cameFromIndex: number,
+  ): Promise<void> {
+    const brandPageMakerStore = useBrandPageMakerStore();
+
+    let snapshot: BrandPageModel;
+
+    try {
+      snapshot = JSON.parse(snapshotStr) as BrandPageModel;
+    } catch (error) {
+      console.error('history-store: failed to parse snapshot', error);
+
+      return;
+    }
+
+    const restoredPageIds = new Set<string>();
+
+    snapshot.pages?.forEach((p) => {
+      if (p?.id) restoredPageIds.add(p.id);
+    });
+
+    let resolvedActivePageId: string | undefined;
+
+    // Step 1: diff cameFromIndex → first page absent from source wins.
+    const sourceEntry = entries.value[cameFromIndex];
+
+    if (sourceEntry) {
+      const sourcePageIds = new Set<string>();
+
+      try {
+        const sourceSnap = JSON.parse(sourceEntry.snapshot) as BrandPageModel;
+
+        sourceSnap.pages?.forEach((p) => {
+          if (p?.id) sourcePageIds.add(p.id);
+        });
+
+        for (const p of snapshot.pages ?? []) {
+          if (p?.id && !sourcePageIds.has(p.id)) {
+            resolvedActivePageId = p.id;
+            break;
+          }
+        }
+      } catch {
+        // Source snapshot unparseable — fall through to walk-back.
+      }
+    }
+
+    // Step 2: walk-back fallback for non-page-structural edits.
+    if (!resolvedActivePageId) {
+      for (let i = targetIndex; i >= 0; i--) {
+        const candidate = entries.value[i]?.activePageId;
+
+        if (candidate && restoredPageIds.has(candidate)) {
+          resolvedActivePageId = candidate;
+          break;
+        }
+      }
+    }
+
+    const targetEntry = entries.value[targetIndex];
+
+    isApplyingSnapshot.value = true;
+    snapshotAppliedToken.value += 1;
+    // Clear any unconsumed merge intent — a stale flag would fold the
+    // post-apply tick into the restored entry and erase the redo.
+    mergeArmed.value = false;
+    pendingTimerIsMerge = false;
+    cancelPendingAutoCapture();
+
+    try {
+      await brandPageMakerStore.applyHistorySnapshot(
+        snapshot,
+        resolvedActivePageId,
+        targetEntry?.logoEdits,
+      );
+    } finally {
+      isApplyingSnapshot.value = false;
+    }
+  }
+
+  async function undo(): Promise<void> {
+    if (!canUndo.value) return;
+
+    const aiThreadStore = useAiWebsiteBuilderThreadStore();
+
+    if (aiThreadStore.isProcessing) return;
+
+    // Actor of the entry being undone (the one we're leaving).
+    const undoneActor = entries.value[currentIndex.value]?.actor;
+    const cameFromIndex = currentIndex.value;
+
+    currentIndex.value -= 1;
+    const target = entries.value[currentIndex.value];
+
+    if (target) {
+      await applySnapshotString(
+        target.snapshot,
+        currentIndex.value,
+        cameFromIndex,
+      );
+    }
+
+    eventTracker.sendUndoEvent({
+      entries_count: entries.value.length,
+      actor: undoneActor,
+    });
+  }
+
+  async function redo(): Promise<void> {
+    if (!canRedo.value) return;
+
+    const aiThreadStore = useAiWebsiteBuilderThreadStore();
+
+    if (aiThreadStore.isProcessing) return;
+
+    const cameFromIndex = currentIndex.value;
+
+    currentIndex.value += 1;
+    const target = entries.value[currentIndex.value];
+
+    if (target) {
+      await applySnapshotString(
+        target.snapshot,
+        currentIndex.value,
+        cameFromIndex,
+      );
+    }
+
+    eventTracker.sendRedoEvent({
+      entries_count: entries.value.length,
+      actor: target?.actor,
+    });
+  }
+
+  // PRD §3: undo history resets on save/publish. Called by
+  // brand-page-container-store.saveBrandPage. No-ops when no baseline
+  // exists — unflagged sessions never installed the watcher.
+  function reset(): void {
+    if (!baselineCaptured.value) return;
+
+    cancelPendingAutoCapture();
+    mergeArmed.value = false;
+    pendingTimerIsMerge = false;
+
+    entries.value = [];
+    currentIndex.value = -1;
+    baselineCaptured.value = false;
+    baselineCapturedAt = 0;
+
+    captureBaseline();
+  }
+
+  // Hydration write sites call this immediately before their imperative
+  // mutation. The arm is auto-cleared on the next Vue tick — `nextTick`
+  // runs AFTER all queued reactive effects (including the watcher), so
+  // if the hydration write triggered `scheduleAutoCapture`, the arm has
+  // already been transferred into `pendingTimerIsMerge` before this
+  // cleanup fires. If no mutation followed (e.g. the user navigated
+  // away before the flagged write), the cleanup drops the stale arm so
+  // it can't be consumed by an unrelated future mutation.
+  function mergeNextMutation(): void {
+    mergeArmed.value = true;
+    // setTimeout(0) is a macrotask — runs AFTER the synchronous write
+    // and AFTER Vue's microtask flush of the watcher's reactive effect.
+    // If `scheduleAutoCapture` fired in between (the imperative write
+    // triggered the watcher), the arm has already been transferred into
+    // `pendingTimerIsMerge` before this cleanup runs.
+    setTimeout(() => {
+      mergeArmed.value = false;
+    }, 0);
+  }
+
+  // --- Instrumentation (NFR-04a) ---
+
+  function getCurrentSizeBytes(): number {
+    return entries.value.reduce((sum, e) => sum + e.sizeBytes, 0);
+  }
+
+  function getCurrentEntryCount(): number {
+    return entries.value.length;
+  }
+
+  return {
+    // State
+    entries,
+    currentIndex,
+    isApplyingSnapshot,
+    snapshotAppliedToken,
+    baselineCaptured,
+
+    // Getters
+    canUndo,
+    canRedo,
+
+    // Actions
+    captureBaseline,
+    capture,
+    captureTemplateSwitch,
+    captureAiChangeset,
+    mergeNextMutation,
+    undo,
+    redo,
+    reset,
+    getCurrentSizeBytes,
+    getCurrentEntryCount,
+  };
+});

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

@@ -14,6 +14,11 @@ 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,6 +33,7 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
       canUseGettyVideos: false,
       canUseGoogleAdsense: false,
       googleAdsenseEnabled: false,
+      canUseUndoRedo: false,
     },
     emailAddress: '',
     hasPremiumSubscription: false,

package/src/bundles/bundled-translations.de-DE.json

@@ -1126,7 +1126,9 @@
   "quickLinkBar": {
     "myWebPageLabel": "Meine Webseite:",
     "copyButton": "Kopieren",
-    "copiedButton": "Kopiert!"
+    "copiedButton": "Kopiert!",
+    "undoLabel": "Rückgängig machen",
+    "redoLabel": "Wiederholen"
   },
   "saveContactSettings": {
     "saveContentInfo": "Lassen Sie Besucher Ihre Kontaktinformationen speichern, wenn sie Ihre digitale Visitenkarte ansehen.",
@@ -1527,6 +1529,8 @@
     "iconFillColorTitle": "Farbe der Symbolfüllung",
     "iconBackgroundColorTitle": "Symbolhintergrundfarbe",
     "paddingTitle": "Polsterung",
+    "topPaddingTitle": "Polsterung oben",
+    "bottomPaddingTitle": "Polsterung unten",
     "dividerStyleTitle": "Trennlinienstil",
     "dividerColorTitle": "Trennlinienfarbe",
     "addItemTitle": "Artikel hinzufügen",