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

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

@@ -1,660 +0,0 @@
-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);
-  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;
-    // 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,
-    baselineCaptured,
-
-    // Getters
-    canUndo,
-    canRedo,
-
-    // Actions
-    captureBaseline,
-    capture,
-    captureTemplateSwitch,
-    captureAiChangeset,
-    mergeNextMutation,
-    undo,
-    redo,
-    reset,
-    getCurrentSizeBytes,
-    getCurrentEntryCount,
-  };
-});