site-builder/craft/src/editor/DirtyTracker.tsx

import { useEffect, useRef } from 'react';
import { useEditorConfig } from '../state/EditorConfigContext';
import { useSaveGuard } from '../state/SaveGuardContext';
import { usePages } from '../state/PageContext';
import { useSiteDesign } from '../state/SiteDesignContext';

/**
 * Marks the editor dirty when page, header/footer or design state changes
 * after the site has loaded. Canvas edits arrive separately, through the
 * `<Editor onNodesChange>` hook in App.tsx. Renders nothing.
 */
export const DirtyTracker: React.FC = () => {
  const { isWHP } = useEditorConfig();
  const { loadState, markDirty } = useSaveGuard();
  const { pages, headerPage, footerPage } = usePages();
  const { design } = useSiteDesign();
  const armedRef = useRef(false);

  useEffect(() => {
    if (!isWHP || loadState !== 'loaded') {
      armedRef.current = false;
      return;
    }
    // The first pass after a load only records the loaded state as the baseline.
    if (!armedRef.current) {
      armedRef.current = true;
      return;
    }
    markDirty();
  }, [isWHP, loadState, pages, headerPage, footerPage, design, markDirty]);

  return null;
};