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

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

@@ -1,621 +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;
-
-// 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;
-    }
-  }
-
-  // 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: {
-    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: 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 = (): void => {
-      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(): 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 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(): 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();
-    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(): void {
-    mergeNextFlush.value = true;
-  }
-
-  // --- 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,
-  };
-});

package/src/metadata-builder/builders/reorder-pages-builder.ts

@@ -1,80 +0,0 @@
-import type { BrandPageModel, NavOrder } from '../../brand-page/models';
-import {
-  BaseMetadataBuilder,
-  type BuilderResult,
-  type MetadataBuilderRequest,
-} from '../models';
-import type { Logger } from '../logger';
-
-export interface ReorderPagesPayload {
-  pageOrder: string[];
-}
-
-export class ReorderPagesBuilder extends BaseMetadataBuilder<ReorderPagesPayload> {
-  constructor(
-    request: MetadataBuilderRequest<ReorderPagesPayload>,
-    logger?: Logger,
-  ) {
-    super(request, logger);
-  }
-
-  async validateAsync(): Promise<{ errors: string[] }> {
-    const errors: string[] = [];
-    const payload = this.request.payload;
-
-    if (!payload?.pageOrder?.length) {
-      errors.push('page_order is required for reorder_pages');
-    }
-
-    return { errors };
-  }
-
-  async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
-    this.log('Build called');
-
-    const validation = await this.validateAsync();
-
-    if (validation.errors.length) {
-      return { request: this.request, model, errors: validation.errors };
-    }
-
-    const { pageOrder } = this.request.payload!;
-
-    // Build pageId → routeId lookup from nav.routes
-    const pageIdToRouteId = new Map<string, string>();
-
-    for (const route of model.nav.routes) {
-      pageIdToRouteId.set(route.pageId, route.id);
-    }
-
-    // Build new nav.orders from the flat page_order (array of pageIds)
-    const newOrders: NavOrder[] = [];
-    const seenRouteIds = new Set<string>();
-
-    for (const pageId of pageOrder) {
-      const routeId = pageIdToRouteId.get(pageId);
-
-      if (!routeId) continue;
-
-      newOrders.push({ routeId, subRoutes: [] });
-      seenRouteIds.add(routeId);
-    }
-
-    // Safety: append any routes not mentioned (don't lose pages)
-    for (const route of model.nav.routes) {
-      const routeId = pageIdToRouteId.get(route.pageId);
-
-      if (routeId && !seenRouteIds.has(routeId)) {
-        newOrders.push({ routeId, subRoutes: [] });
-      }
-    }
-
-    model.nav.orders = newOrders;
-
-    this.log({
-      message: `Reordered pages: ${pageOrder.join(', ')}`,
-    });
-
-    return { request: this.request, model };
-  }
-}