@designcrowd/library.brand-page 5.18.1-undo-33 → 5.18.1

package/lib/src/brand-page-maker/stores/history/history-store.js

@@ -1,459 +0,0 @@
-import { defineStore } from 'pinia';
-import { computed, ref, shallowRef, toRaw, watch } from 'vue';
-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';
-// 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;
-// 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([]);
-    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) {
-        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() {
-        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() {
-        return usePageNavigationStore().activePageId ?? '';
-    }
-    function serializeCurrentLogoEdits() {
-        try {
-            const editableLogoStore = useUiEditableLogoStore();
-            return JSON.stringify(toRaw(editableLogoStore.logoEdits));
-        }
-        catch (error) {
-            console.error('history-store: failed to serialize logoEdits', error);
-            return undefined;
-        }
-    }
-    // One-shot flag set by hydration write sites (TipTap mount, lazy
-    // paymentConfig fill, stale-page-ref clear, ContentSettings RTE
-    // rewrap) before their imperative write. The watcher's next flush
-    // consumes the flag and merges the snapshot into the current head
-    // instead of pushing — preventing phantom undo entries on first
-    // sidebar open / section click. Cleared on apply and reset.
-    const mergeNextFlush = ref(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) {
-        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 = {
-            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 = null;
-    let maxWaitTimerId = null;
-    function cancelPendingAutoCapture() {
-        if (idleTimerId !== null) {
-            clearTimeout(idleTimerId);
-            idleTimerId = null;
-        }
-        if (maxWaitTimerId !== null) {
-            clearTimeout(maxWaitTimerId);
-            maxWaitTimerId = null;
-        }
-    }
-    function installWatcher() {
-        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: a hydration write site flagged this flush — replace the
-            // current head in place instead of pushing. Consumed once.
-            const shouldMerge = mergeNextFlush.value;
-            mergeNextFlush.value = 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.
-        const scheduleAutoCapture = () => {
-            if (isApplyingSnapshot.value)
-                return;
-            if (idleTimerId !== null)
-                return;
-            idleTimerId = setTimeout(flush, CAPTURE_DEBOUNCE_MS);
-            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() {
-        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) {
-        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) {
-        cancelPendingAutoCapture();
-        return capture({ source: 'template_switch', actor: 'user', label });
-    }
-    function captureAiChangeset(label) {
-        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, targetIndex, cameFromIndex) {
-        const brandPageMakerStore = useBrandPageMakerStore();
-        let snapshot;
-        try {
-            snapshot = JSON.parse(snapshotStr);
-        }
-        catch (error) {
-            console.error('history-store: failed to parse snapshot', error);
-            return;
-        }
-        const restoredPageIds = new Set();
-        snapshot.pages?.forEach((p) => {
-            if (p?.id)
-                restoredPageIds.add(p.id);
-        });
-        let resolvedActivePageId;
-        // Step 1: diff cameFromIndex → first page absent from source wins.
-        const sourceEntry = entries.value[cameFromIndex];
-        if (sourceEntry) {
-            const sourcePageIds = new Set();
-            try {
-                const sourceSnap = JSON.parse(sourceEntry.snapshot);
-                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 flag — a stale flag would fold the
-        // post-apply tick into the restored entry and erase the redo.
-        mergeNextFlush.value = false;
-        cancelPendingAutoCapture();
-        try {
-            await brandPageMakerStore.applyHistorySnapshot(snapshot, resolvedActivePageId, targetEntry?.logoEdits);
-        }
-        finally {
-            isApplyingSnapshot.value = false;
-        }
-    }
-    async function undo() {
-        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() {
-        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() {
-        if (!baselineCaptured.value)
-            return;
-        cancelPendingAutoCapture();
-        mergeNextFlush.value = false;
-        entries.value = [];
-        currentIndex.value = -1;
-        baselineCaptured.value = false;
-        baselineCapturedAt = 0;
-        captureBaseline();
-    }
-    // Hydration write sites call this immediately before their imperative
-    // mutation; the next watcher flush merges into the current head
-    // instead of pushing. Idempotent and one-shot.
-    function mergeNextMutation() {
-        mergeNextFlush.value = true;
-    }
-    // --- Instrumentation (NFR-04a) ---
-    function getCurrentSizeBytes() {
-        return entries.value.reduce((sum, e) => sum + e.sizeBytes, 0);
-    }
-    function getCurrentEntryCount() {
-        return entries.value.length;
-    }
-    return {
-        // State
-        entries,
-        currentIndex,
-        isApplyingSnapshot,
-        baselineCaptured,
-        // Getters
-        canUndo,
-        canRedo,
-        // Actions
-        captureBaseline,
-        capture,
-        captureTemplateSwitch,
-        captureAiChangeset,
-        mergeNextMutation,
-        undo,
-        redo,
-        reset,
-        getCurrentSizeBytes,
-        getCurrentEntryCount,
-    };
-});